@charset "utf-8";
/* CSS Document */

* { border:0;
margin:0;
padding:0;
box-sizing:border-box;}
a { text-decoration:none; }
img, video { max-width:100%;}
a:hover, input[type="submit"]:hover { opacity:0.8;}
input[type="submit"] { -webkit-appearance: none;}
strong { font-weight:700;}

body { font-family: 'Roboto', sans-serif; font-size:16px; color:#000; background:#fff; font-weight:300; }
h1, h2, .main p.icon {font-family: 'Roboto Condensed', sans-serif; font-weight:700;}
h3 {font-family: 'Roboto Condensed', sans-serif; font-weight:300; }

#top, .slide { 
display:block; width:100%;
}
.cont { width:1110px; margin:0 auto;}

.col2, .col3, .col3doble{ display:inline-block; vertical-align:top;}
.col2 { width:540px;}
.col3 { width:350px;}
.col3doble { width:730px;}
.right-gap { margin-right:15px;}

#top {background:#fff; z-index:20; border-bottom:solid 1px #999;}
#top .cont {padding:30px 0;}
.logo, #nav, ul#menu li { display:inline-block;  vertical-align:middle;}
.logo { width:19%; line-height:1.1; }
#nav { width:80%; text-align:right; }

ul#menu  { list-style:none;  }
ul#menu li {display:inline-block; vertical-align:middle; margin-left:16px; font-weight:700; font-size:12px;}
ul#menu li a { color:#000; }
ul#menu li a:hover, ul#menu li.current a { opacity:1; color:#999; }


.slide {position:relative; top:0;  width:100%;  background-color:#999;}


.main {text-align:center; padding:40px 0;}
.main.black { background:#000; color:#fff; padding:0; }
h1 { font-size:36px; line-height:120px;}
.main h2 { font-size:30px; line-height:1.2; text-align:center;margin:0 auto; }
.main h2:after {content:""; height:2px; width:60px; background-color:#999; display:block; margin:40px auto;}
h3 { font-size:30px; line-height:1.2; text-align:center; margin:0 auto; }
h3:before  {content:""; height:2px; width:60px; background-color:#999; display:block; margin:40px auto;}
.main p { line-height:24px;  max-width:540px; margin:0 auto 25px auto; text-align:center; }
.main p:last-of-type {margin-bottom:0px;}
.main p.icon img{ display:block; margin:40px auto;}
.main p.icon { font-size:30px; line-height:1.2; text-align:center;margin:0 auto;}


.botones img { padding:0 15px;}
.main.app p { max-width:100%; line-height:normal; margin:0 auto 30px auto;}
.main.app .video { margin:60px 0 20px 0;}
.main.app h2:after  {background-color:#fff;}

.main.page { padding:60px 0;}

.tit { text-align:center; height:400px; color:#fff; background-size:cover; position: relative;
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6); 
-ms-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);
-o-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);}



.tit h2 {position: absolute; top: 50%; transform: translateY(-50%); left:0; right:0;
font-size:36px;}
.tit h2 span { display:block; font-size:16px; font-family: 'Roboto', sans-serif; font-weight:300; margin-bottom:20px;}


.tit.sol h2 {font-size:30px;}
.tit.sol h2 span { margin-top:20px;}

.qr img { border:solid 30px #E7E7E7; display:block; width:350px; margin:60px auto 0 auto;}

.adv { background:#E7E7E7 url(images/img-caja.png) no-repeat left top; height:255px; position:relative;
margin:60px 0;}
.adv .txt {position: absolute; top: 50%; transform: translateY(-50%); right:0; width:100%; 
padding-left:255px;}
.adv .txt p{ font-size:18px; max-width:100%;}
.adv .txt p.boton { font-size:14px;}
.adv .txt p.boton a { color:#000; display:block; line-height:40px; width:255px; border:solid 1px #000;
margin:0 auto; font-weight:700;}

.main.fund h2 { font-size:36px; line-height:1.2; text-align:left; margin-top:40px; }
.main.fund h2:after {content:""; height:2px; width:60px; background-color:#999; display:block; margin:40px 0;}
.main.fund p { text-align:left; max-width:100%;}

.main.gray { background-color:#E7E7E7;}
p.dir img {display:block; margin:0 auto 6px auto;}
p.dir a { color:#000;}

.main.contact { padding:40px 0 60px 0;}
.contact form { max-width:540px; margin:0 auto;}
.contact input, .contact textarea {padding:10px; color:#000; font:inherit; height:40px; background:#fff; 
width:100%; display:block; margin-bottom:20px; }
.contact textarea { height:160px; width:100%;}
.contact input[type="submit"] {background:#E7E7E7; color:#000; border:solid 1px #000; font-size:14px; 
width:255px; margin:0 auto; font-weight:700;}


#footer { background:#000; }
#footer {padding:30px 0; color:#fff; font-size:14px; }
#footer a {color:#fff;}
#footer p.left, #footer p.right { display:inline-block; vertical-align:middle; }
#footer p.right { text-align:right; width:40.5%;}
#footer p.right img { margin-left:10px; vertical-align:middle;}
#footer p.left { width:59%; }


/*Style 'show menu' label button and hide it by default*/
.show-menu {
	color: #000;
	display: none; 
}
.show-menu img { height:18px; vertical-align:bottom; padding-left:5px;}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


::-webkit-input-placeholder {color: #000; opacity:1;}
:-moz-placeholder {color: #000; opacity:1;}
::-moz-placeholder {color: #000; opacity:1;}
:-ms-input-placeholder {color: #000; opacity:1;}

#zzz{
 width:1110px; 
 margin:auto;
}


@media screen and (max-width: 1110px){
.cont { width:97%; }
.col3 { width:31.5%;}
.col3doble { width:65%;}
.right-gap { margin-right:2.2%;}
.logo {width:11%;}
#nav {width:88%;}
#zzz{width:1110px;  margin:auto; }

}

@media screen and (max-width: 985px){
.right-gap { margin-right:2%;}
ul#menu li { margin-left:10px;}
#zzz{width:980px;  margin:auto; }
}

@media screen and (max-width: 840px){
#top { height:100px;}
.logo {width:21%;}
#nav {width:78%;}
#nav { vertical-align:top; }
/*Make dropdown links appear inline*/
	#nav ul {
		position: relative; z-index:40;display: none;
	}
	/*Create vertical spacing*/
	#nav li {
		margin-bottom: 0px;
	}
	/*Make all menu links full width*/
	#nav ul li, #nav  li a {
		width: 100%; display:block;
	}
	/*Display 'show menu' link*/
	.show-menu {	display:block; line-height:40px; cursor:pointer; font-weight:700; font-size:12px;
	}
.show-menu img { vertical-align: text-bottom;}
ul#menu {width:200px; float:right; margin-right:17px; top:29px;}
ul#menu li { padding:0; margin:0;}
ul#menu li a { background:#fff; padding:10px;}
ul#menu li a:hover { opacity:1;}	
.adv .txt { padding-left:270px; padding-right:15px;}
#zzz{width:8000px;  margin:auto; }
}

@media (max-width: 768px) {
.col2, .col3, .col3doble { width:100%; display:block;}
.right-gap { margin-right:0; margin-bottom:25px;}
#footer p { text-align:center !important; width:100% !important; padding-bottom:20px;}
.main.fund h2 { text-align:center;}
.main.fund h2::after { margin:40px auto;}
.main.fund p { text-align:center;}
#zzz{width:700px; }
}

@media screen and (max-width: 685px){
.tit.sol h2 { font-size:24px; padding:0 0px; line-height:1;}
.tit { height:300px; background-size:cover !important;}
#zzz{width:680px;  margin:auto;}
}

@media screen and (max-width: 600px){
h1 {line-height: 1; padding: 30px 0;}
.adv { height:auto; background-position:center top 30px;}
.adv .txt {display: block; width: 100%; padding-left: 15px; padding-top: 300px; padding-bottom: 30px;
position: relative; top: 0; transform: none; }
#zzz{width:580px;  margin:auto;}
}

@media screen and (max-width: 540px){
#zzz{width:530px; margin:auto; }
}

@media screen and (max-width: 480px){
#nav {width:77%;}
#zzz{width:300px; margin:auto; }
}