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

 transform: scale(1.1);
 
 */

html {
    height:100%;
	width:100%;}
	
	 
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: 'Source Sans Pro', sans-serif;
	color: #ededef;
	
	}
a {
	text-decoration:none;
	color:inherit !important;}
img {
	max-width:100%;
	height:auto;
	border: none;}

.clear {
	clear:both;}

ul, li {
       list-style-type: none;}

#pagewrap {
	height:100%;
	width:100%;
	overflow:hidden;
	}

#image-container { 
	width:100%;
	position: relative;
	height:54%;
	overflow:hidden;
	background:url(../img/header_img.jpg) center center no-repeat ;
	background-size: cover;}
	
#acceso { position:absolute;
top:5%;
right:6%;
z-index:999999;
padding:0.5%;
 background: #9aa7d2;
 font-size:11px;}

#button-container { 
	width:100%;
	position: relative;
	height:30%;
	background-color: #ededef;
	overflow: visible;
	z-index:999;}

.menu ul{ 
	width:101.3%;
	background-color:#ededef;
	margin:0;
	padding:0;
	float:left;
	display:inline-block;}

.menu li{ 
	width:19.8%;
	margin:0 0 0 -0.15%;
	padding:0;
	overflow:visible;
	 display: inline-block;}

.container {
  	position: relative;
  	border-top: #9aa7d2 35px solid;
	height:600px;
	background-color:#ededef;}

.image {
  	display: block;
  	width: 100%;
  	height: auto;}

.overlay {
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	border-top: #9aa7d2 35px solid;

	background-color:#ededef;
  	overflow: hidden;
  	width: 100%;
  	height: 100%;
  	transition: .2s ease;
  	z-index:998 ;
  	background:url(../img/border.png) repeat-y 100% top;
    opacity:1;}

.button {
  	z-index:9999;
    display: block;
	width:60%;
	bottom: 0%;
	text-align:center;
    position: absolute;
	transition: .3s ease;
	padding:10% 0;
	margin:0 20%;
	}
	
.text {
  	position: absolute;
  	overflow: hidden;
  	top: 15%;
  	left: 50%;
  	width:65%;
  	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
  	transition: .5s ease;
  	transform: translate(-50%, -50%) scale(1.1);
  	-ms-transform: translate(-50%, -50%) scale(1.1);
  	opacity:0.2;}

.container:hover .overlay {
 	height: 110%;
  	background-color:#FFF;
 	opacity:1;
  	box-shadow: 1px 10px 10px #000;
  	cursor: pointer;
	z-index:99999;}

.container:hover .text {	
    transform: translate(-50%, -60%) scale(1.3);
  	-ms-transform: translate(-50%, -60%) scale(1.3);
  	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	opacity:1;}

.container:hover .button {	
    bottom: 65%;
	/*border-top: #211f5a solid 1px;*/
	}
	
.boton { 
	background: #9aa7d2 !important;
	display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   overflow: visible;
   cursor: pointer;
   padding:5% 8%;
   color:#FFF;
   font-family: 'Source Sans Pro', sans-serif;
   font-weight:300;
   font-size:18px;

}

.boton:hover { 
	background: #8a97c2;

}
.boton:active {
   box-shadow: 1px 1px 2px #474f69;
   top:1px;
   background: #7580a7;
}
#footer { 
	width:100%;
	position: absolute;
	height:11%;
	background-color: #211f5a;
	overflow:hidden;
   bottom:0;
	z-index:9999 !important;}
	
#header { 
	width:90%;
	margin:7% 5%;
	position: relative;
}

#logo {
	float:left;
	width:50%;
	}
#logo img{
	width:25%;
	}
	
#social {
	float:right;
	width:15%;
	margin:-1% 5% 0 0 !important;
}

.social ul {
	display: inline-block;
	}
	
.social li{ 
	width:18%;
	margin:0 0.5%;
	padding:0;
	float: left;
}

#texto-bienvenida {
	width:50%;
	padding:6% 25%;
	background-size(cover);
	background:url(../img/shadow.png) no-repeat center center;
}
	
h1 { 
	text-align:center;
	font-size:42px;
	font-weight:700;
	margin:0;
	padding:0;
	text-shadow: -1px -1px 15px rgba(48, 45, 104, 1);
	border-bottom: #FFF solid thin;}

h2 { 
	text-align:center;
	font-size:28px;
	font-weight:400;
	margin:0;
	padding-top:1%;
	text-shadow: -1px -1px 11px rgba(0, 0, 0, 1);
}

#pright { 
	float:right !important;
	width:40%;
	margin:1.5% 1%;
	text-align:right !important;
	font-size:9px !important;}

p{
	margin:0;
	padding:0;}
	
	p a{
		color:#FFF;
		text-decoration:none;}

#pleft { 
	float:left;
	width:40%;
	margin:0.5% 2%;
	text-align:left; font-size:9px}


/* Media Queries */ 

@media screen and (max-width: 1024px) {
h1 { 
	font-size:32px;
	}

h2 { 
	font-size:22px;
}

#pright { 
	margin:1% 2%;
	font-size:8px;}

#pleft { 
	margin:1% 2%;
	font-size:8px}
	
	#footer { 
	height:12%;
		
}

#button-container { 
	height: auto !important;
}

.container {
	height:370px !important;
}

	
.text {
  	top: 20%;
}

}


@media screen and (max-width: 1024px) and (orientation: portrait)  {
#texto-bienvenida {
margin-top:15%;
}
h1 { 
	font-size:40px;
	}

h2 { 
	font-size:26px;
}

.container {
	height:390px;
}
#pright { 
	margin:2%;
	font-size:9px;}

#pleft { 
	margin:2%;
	font-size:9px;}
	
	#logo img{
	width:30%;
	}
#button-container { 
	height:25%;
}
	#footer { 
	height:8%;
	position: absolute;
	bottom:15%;
}
#pagewrap {
	background:url(../img/bottom_img.jpg) no-repeat bottom center;}
	
	.container:hover .button {	
    bottom: 40%;
}

.container:hover .text {	
    transform: translate(-50%, -50%) scale(1.3);
  	-ms-transform: translate(-50%, -50%) scale(1.3);
}
#social { width:20%;}
.social li{ 
	width:20%;
	margin:0;
}
}

@media screen and (max-width: 906px) {
h1 { 
	font-size:34px;
	}


#texto-bienvenida {
	width:60%;
	padding:6% 20%;
}
	#logo img{
	width:35%;
	}
	.container {
	height:370px;
}
	.container:hover .button {	
    bottom: 50%;
}

#pright { 
	width:40%;
}

#social { width:20%;}
#pleft { 
	width:50%;
}
}

@media screen and (max-width: 800px) {
h1 { 
	font-size:26px;
	}
		h2 { 
	font-size:14px;
}
#texto-bienvenida {
	width:50%;
	padding:6% 25%;
}
	#logo img{
	width:35%;
	}
	.container {
	height:250px !important;
}
	.container:hover .button {	
    bottom: 55%;
}

#pright { 
	width:40%;
	font-size:7px;
}

#social { width:20%;}
#pleft { 
	width:50%;
	font-size:7px;
}

.text {
  	top: 20%;

}

	#footer { 
	height:12%;

}
}

@media screen and (max-width: 800px) and (orientation: portrait){

	#logo img{
	width:35%;
	}
	.container {
	height:250px !important;
}
	.container:hover .button {	
    bottom: 50%;
}


.text {
  	top: 20%;
}

	#footer { 
	height:8%;
	bottom:20%;
}

#acceso { top:2%;
right:6%;
padding:0.5%;
 font-size:11px;}

}
@media screen and (max-width: 768px) {

	#logo img{
	width:35%;
	}
	.container {
	height:280px;
}
	.container:hover .button {	
    bottom: 40%;
}

#social { width:25%;}
	#footer { 
	height:9%;
		bottom:17%;
}
.text {
  	
  	top: 25%;
  	
}

@media screen and (max-width: 667px) {
	
	#image-container { 
	background:url(../img/header_img_mobile.jpg) center center no-repeat ;
	background-size: cover;}

	#header { 
	width:100%;
	margin:0;
}
#logo {
	float: none;
	width:100%;
	background:#302d68;
	box-shadow:#000 5px 1px 10px;
	position:fixed;
	z-index:99999;
	}
#logo img { text-align:center;
margin:2% 33%;}

h1 { 
	font-size:28px;
	}
h2 { 
	font-size:16px;
}
#social {
	float: none;
	width:50%;
	left:25%;
	position:absolute;
	margin:0 !important;
	bottom:10%;
}
#image-container { 
	height:100%;
}
#texto-bienvenida {
	width:70%;
	padding:6% 25%;
	position:absolute;
	bottom:30%;
	left:-10%;
}

#button-container { 
	height: auto;
	position: relative;
	overflow: visible !important;
	border-top: #9aa7d2 solid 30px;
	clear:both;
	background-color:#ededef;
	
}

#footer { 
	height:45%;
	position: relative;
  bottom:0%;
  display:block;
  clear:both;

}

.menu ul{ 
	width:100%;
	margin:0;
	padding:0;
	float: none;
	display:block !important;
}

.menu li{ 
	width:100%;
	margin:0%;
	padding:0;
	overflow:visible;
	 display: block;}

.container {
  	position: relative;
  	border-top:none;
	height:180px;
}

.image {
  	display: block;
  	width: 50%;
  	height: auto;
	opacity:0.4;
	  	filter: grayscale(100%);
	-webkit-filter:grayscale(100%);}

.overlay {
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	border-top: none;
	background-color:#ededef;
  	overflow: visible;
  	width: 100%;
  	height: 100%;
  	transition: none;
  	z-index:998 ;
  	background:url(../img/border_top.png) repeat-x 100% top;
    opacity:1;}


.button {
	width:60%;
	bottom: 15%;
    position: absolute;
	transition: none;
	padding:9% 0;
	margin:0 20%;
	}
	
.text {
  	position: absolute;
  	top: 0%;
  	left: 5%;
  	width:80% !important;
  	filter: none;
	-webkit-filter: none;
  	transition: .5s ease;
  	transform: none;
  	-ms-transform: none;
  	opacity:1;}


.container:hover .overlay {
	height: 100%;
	background-color: #EDEDEF;
	opacity: 1;
	box-shadow: none;
	cursor: pointer;
	z-index: 99999;
}

.container:hover .text {	
    transform:none;
  	-ms-transform: none);
  	filter: none;
	-webkit-filter:none;
	opacity:1;}

.container:hover .button {	
    bottom: 15%;
	border-top: none;}
	
.boton { 
	background: #9aa7d2 !important;
	display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   float:right;
   overflow: visible;
   cursor: pointer;
   padding:5% 8%;
   font-weight:300;
   font-size:18px;
}

.boton:hover { 
	background: #8a97c2;
}
.boton:active {
   box-shadow: 1px 1px 2px #474f69;
   top:1px;
   background: #7580a7;
}

#pagewrap {
	height:100%;
	width:100%;
	overflow: visible;
	min-height:100%;
   position:relative;
	}
	
	#pright { 
	width:80%;
	font-size:10px !important;
	text-align:center !important;
	float:none;
	clear:both;
	margin:1% 10%;
	border-top: 1px solid #FFF;
	padding-top:2%;
}

#pleft { 
	width:100%;
	float:none;
	font-size:10px !important;
	text-align:center;
	clear:both;
	margin:1%;
}
#acceso { top:6% !important;
right:6%;
padding:0.5% 1%;
 font-size:12px;
 position:fixed;}
}



@media screen and (max-width: 603px) {
body {
	background: #EDEDEF;	
	}
	#header { 
	width:100%;
	margin:0;
}
#logo {
	float: none;
	width:100%;
	background:#302d68;
	box-shadow:#000 5px 1px 10px;
	position:fixed;
	z-index:99999;
	}
#logo img { text-align:center;
margin:2% 33%;}


#social {
	float: none;
	width:50%;
	left:25%;
	position:absolute;
	margin:0 !important;
	bottom:10%;
}
#image-container { 
	height:35%;
}
#texto-bienvenida {
	width:70%;
	padding:6% 25%;
	position:absolute;
	bottom:30%;
	left:-10%;
}

#button-container { 
	height: auto;
	position: relative;
	overflow: visible !important;
	border-top: #9aa7d2 solid 30px;
	clear:both;
	background-color:#ededef;
	
}

#footer { 
	height:15%;
	position: relative;
  bottom:0;
  display:block;
  clear:both;

}

.menu ul{ 
	width:100%;
	margin:0;
	padding:0;
	float: none;
	display:block !important;
}

.menu li{ 
	width:100%;
	margin:0%;
	padding:0;
	overflow:visible;
	 display: block;}

.container {
  	position: relative;
  	border-top:none;
	height:180px;
}

.image {
  	display: block;
  	width: 50%;
  	height: auto;
	opacity:0.4;
	  	filter: grayscale(100%);
	-webkit-filter:grayscale(100%);}

.overlay {
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	border-top: none;
	background-color:#ededef;
  	overflow: visible;
  	width: 100%;
  	height: 100%;
  	transition: none;
  	z-index:998 ;
  	background:url(../img/border_top.png) repeat-x 100% top;
    opacity:1;}

.button {
	width:60%;
	bottom: 23%;
    position: absolute;
	transition: none;
	padding:9% 0;
	margin:0 20%;
	}
	
.text {
  	position: absolute;
  	top: 0%;
  	left: 5%;
  	width:80% !important;
  	filter: none;
	-webkit-filter: none;
  	transition: .5s ease;
  	transform: none;
  	-ms-transform: none;
  	opacity:1;}

.container:hover .overlay {
	height: 100%;
	background-color: #EDEDEF;
	opacity: 1;
	box-shadow: none;
	cursor: pointer;
	z-index: 99999;
}

.container:hover .text {	
    transform:none;
  	-ms-transform: none);
  	filter: none;
	-webkit-filter:none;
	opacity:1;}

.container:hover .button {	
    bottom: 23%;
	border-top: none;}
	
.boton { 
	background: #9aa7d2 !important;
	display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   white-space: nowrap;
   line-height:1em;
   position:relative;
   outline: none;
   float:right;
   overflow: visible;
   cursor: pointer;
   padding:5% 8%;
   font-weight:300;
   font-size:18px;
}

.boton:hover { 
	background: #8a97c2;
}
.boton:active {
   box-shadow: 1px 1px 2px #474f69;
   top:1px;
   background: #7580a7;
}

#pagewrap {
	height:100%;
	width:100%;
	overflow: visible;
	min-height:100%;
   position:relative;
	}
	
	#pright { 
	width:80%;
	font-size:10px !important;
	text-align:center !important;
	float:none;
	clear:both;
	margin:1% 10%;
	border-top: 1px solid #FFF;
	padding-top:2%;
}

#pleft { 
	width:100%;
	float:none;
	font-size:10px !important;
	text-align:center;
	clear:both;
	margin:1%;
}

}



@media screen and (max-width: 568px) {


#social {
	float: none;
	width:50%;
	left:25%;
	position:absolute;
	margin:0 !important;
	bottom:10%;
}
#image-container { 
	height:85%;
}

#footer { 
	height:45%;
	position: relative;
  bottom:0;
  display:block;
  clear:both;

}

.image {
  	display: block;
  	width: 55%;
  	height: auto;
	opacity:0.4;
	  	filter: grayscale(100%);
	-webkit-filter:grayscale(100%);}
	
	#pright { 
	width:80%;
	font-size:10px;
	text-align:center !important;
	float:none;
	clear:both;
	margin:1% 10%;
	border-top: 1px solid #FFF;
	padding-top:2%;
}

#pleft { 
	width:100%;
	float:none;
	font-size:10px;
	text-align:center;
	clear:both;
	margin:1%;
}
#acceso { top:6% !important;
right:6%;
padding:0.5% 1%;
 font-size:12px;}
}


@media screen and (max-width: 480px) {


#social {
	float: none;
	width:50%;
	left:25%;
	position:absolute;
	margin:0 !important;
	bottom:10%;
}
#image-container { 
	height:55%;
}

#footer { 
  bottom:0%;
    height:25%;

}

h1 { 
	font-size:26px;
	}

#social {
	left:22%;
	bottom:10%;
}	
.image {
  	display: block;
  	width: 65%;
  	height: auto;
}
.button {
	bottom: 25%;

}
.container:hover .button {	
    bottom: 25%;
	border-top: none;}
	#button-container { 
	height: auto;
	
}
	#texto-bienvenida {
		background-size:(cover);
	background:url(../img/shadow_small.png) no-repeat center center;
}

#acceso { top:5% !important;
right:5%;
padding:0.5% 1%;
 font-size:11px;
 position:fixed;}
}

@media screen and (max-width: 414px) {
body {
	background:#ededef;
	
	}
	
	#texto-bienvenida {
		background-size:(cover);
	background:url(../img/shadow_small.png) no-repeat center center;
}

#image-container { 
	height:42%;
}

#footer { 
  bottom:-5%;
  height:25%;
}
.container {
  	position: relative;
  	border-top:none;
	height:150px !important;
}
h1 { 
	font-size:20px;
	}
		h2 { 
	font-size:14px;
	}

#social {
	left:20%;
	bottom:10%;
}	
.image {
  	display: block;
  	width: 65%;
  	height: auto;
}

.text { top:-20% !important;}
.button {
	bottom:10%;
}

#button-container { 
	height: auto;
}
#logo img { text-align:center;
margin:3% 33%;}
.container:hover .button {	
    bottom: 10%;
	border-top: none;}
	
	#acceso { top:0% !important;
right:0%;
padding:0.5% 1%;
 font-size:10px;
}
}
}

@media screen and (max-width: 375px) {
.button {
	bottom:18%;
}
.text { top:-15% !important;}
.container:hover .button {
	bottom:18% ;
}
}
@media screen and (max-width: 360px) {
h1 { 
	font-size:18px;
	}
		h2 { 
	font-size:12px;	}	
	.container {
	height:130px;}

	#button-container { 
	height: auto;}
	.button {
	bottom:10%;
}
.text { top:-5% !important;}
.container:hover .button {
	bottom:10% ;
}
}

@media screen and (max-width: 320px) {
#social {
	left:20%;
}
#image-container { 
	height:42%;
}
	#button-container { 
	height: auto;
	
}
#footer { 
  bottom:0;
  height:30%;
}
.container {
	height:130px;
}
h1 { 
	font-size:16px;
	}
	
	h2 { 
	font-size:12px;
	}
.button {
	bottom:18%;
}

.container:hover .button {
	bottom:18% ;
}
	#acceso { top:0% !important;
right:0%;
padding:0.5% 1%;
 font-size:8px;
}
}