* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 0;
/* For mobile phones: */
    width: 100%;
}

.banner-img   {display: block; width: 50%; margin: 0 auto 0 auto; padding: 0; border: 0;}
.banner-hline {display: none;}
.img-logo     {display: block;}
.img-demo     {display: none;}

@media only screen and (min-width: 820px) {
/* For desktop: */
	.col-logo  {width: 20%;}
	.col-title {width: 55%;}
	.col-banner {width: 75%;}
	.col-img   {width: 25%;}
	.col-1 {width: 10%;}
	.col-2 {width: 20%;}
	.col-3 {width: 30%;}
	.col-4 {width: 40%;}
	.col-5 {width: 50%;}
	.col-6 {width: 60%;}
	.col-7 {width: 70%;}
	.col-8 {width: 80%;}
	.col-9 {width: 90%;}
	.col-10 {width: 100%;}
	.col-1t {width: 33%;}
	.col-1q {width: 25%;}
	.col-3q {width: 75%;}
	.col-23 {width: 23%;}
	.col-27 {width: 27%;}
	.img-logo {position: relative; top: 0; bottom: 0;}
	.img-demo {display: inline-block;}
	.banner-img {margin: 0; width: 100%;}
	.banner-hline  {display: block; height: 3px; width: 340%; background-color: #ddd; position: absolute; bottom: 0; left: 100%}
}

.banner-text {
	display: inline-block;
	text-align: center;
	padding: 4ex 0 1.5ex 0;
	font-size: 18pt;
	font-weight: bold;
}

.block-main    {padding: 1ex 1.5em 1.5ex 1.5em;}

.menu ul {
	list-style-type: none;
	margin: 2ex 1em 4ex 1em;
	font-size: 13pt;
	font-weight: bold;
	padding:0;
}

.menu li {
	margin: 0;
	padding: 1.5ex 0 1ex 2em;
	border-bottom: solid 3px #888;
	display: block;
}

.selected {
	background-image: url('../img/orange_star_small.png');
	background-repeat: no-repeat;
	background-position: left center;
}

html {
    font-family: "Lucida Sans", sans-serif;
}

body {
	font-size: 12pt;
	font-family: "Open Sans", "sans-serif";
	color: #0f0f0f;
	background-color: #fffcf8;
	margin: 1ex auto 5px auto;
	padding: 0 10px 0 10px;
	max-width: 1200px;
}

p             {margin:0.5ex 0 1ex 0;}
h4            {font-weight:bold; margin:1.5ex 0 0.5ex 0;}
h4.first      {margin:0.5ex 0 0.5ex 0;}
ul            {list-style-type:disc; margin:0px 0 0 20px; padding:0;}
li            {margin:0 0 0.5ex 0;}

a:link, a:visited
              {color:#0f0f0f; text-decoration: underline;}
a:hover       {color:#0f0f0f; text-decoration: underline;}

.menu a:link, a:visited
              {color:#0f0f0f; text-decoration: none;}
.menu a:hover       {color:#0f0f0f; text-decoration: underline;}

figure.left   {float:left; margin:15px 15px 15px 5px;}
figure.right  {float:right; margin:15px 5px 15px 10px;}
img.figure    {display:block; border:0;}
figcaption    {display:block; font-size:10pt; margin:0.5ex 0 0 0;}
video         {display:block; margin: 0.5ex auto 0.5ex auto;}

.boldface     {font-weight: bold;}
.em           {font-style: italic;}
.session      {font-weight: bold; color: #404040; }
.text_justify {text-align: justify;}
.text_center  {text-align: center;}
.text_right   {text-align: right;}
.topspace     {padding-top: 2ex;}
.block_center {margin-right: auto; margin-left: auto;}
.email        {font-family:"Dejavu Sans Mono", Courier, "Courier New"; font-size:10pt;}
.contacts     {color:#303030; font-size:10pt;}

.table_noframe      {border:0;}
.table_noframe td   {padding:0 5px 3px 5px; margin:0; vertical-align:top;}

.gallery {display: block; padding: 1ex 1em 1ex 1em;};
.imglink {}
.imglink:hover {cursor: pointer;}

.mapa    {display: block; height: 400px; margin-top: 3ex 0 3ex 0;}
/*
#map-canvas
{
	margin: 20px auto 10px auto;
	width: 600px;
	height: 500px;
}
*/
/* photo gallery lightbox (background) */
.lightbox {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 80px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
}

.lightbox-content {
	position: relative;
	display: table;
	margin: auto;
	padding: 0;
	width: 90%;
	max-height: 800px;
	max-width: 1000px;
}

.lightbox-profile {
	background-color: #fffcf8;
	padding: 20px;
}

/* The Close Button */
.lightbox-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Next & previous buttons */
.lightbox-prev,
.lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.lightbox-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.lightbox-prev:hover,
.lightbox-next:hover {
	background-color: rgba(0, 0, 0, 0.6);
	text-decoration: none;
	color: white;
}