/*----------  begin of RULES  ------------- */


* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

	
a, a:link, a:active,
a:visited, a:hover{ text-decoration:none; color:white; }


body {
	width:100%; 
	position:relative;
	background:#00953A;
	font-family:'GillSansMTPro-Book';
	padding:0;
	margin:0;
	}
	

.black {color:black}




.rgba {
	background:rgba(0, 149, 58, .6);
	border:1px solid rgba(0,0,0,0);
	}

.rgba:hover {background:rgba(0, 149, 58, 1);}	


.rgba-black {
	background:rgba(0, 0, 0, .6);
	border:1px solid rgba(0,0,0,0);
	}

.rgba-black:hover {background:rgba(0, 0, 0, .6);}	
	
	
	
	
.overlay {
	display:block;
	float:none;
	width:100%;
	height:100%;
	position:fixed;
	z-index:9999;
	background:white;
	color:#00953A;
	text-align:center;
	font-size:40px;
	padding-top:20%;
	}	
	












/*----------  Wraps around the entire viewport ------------- */

.main-container {
	
	position: relative;
	height:100%;
	min-height:815px;
	
	width:100%;
	min-width:320px;
	max-width:100%;
	
	background-repeat:no-repeat;
	background:#00953A;
	}
	
	
	
/*--------------------  each slide  ----------------------- */

#a1 {background:url(../img/perote4.jpg);background-repeat:no-repeat;
background-position:center;background-size:cover;}
#a2 {background:url(../img/perote1.jpg);background-repeat:no-repeat;
background-position:center;background-size:cover;}
#a3 {background:url(../img/perote2.jpg);background-repeat:no-repeat;
background-position:center;background-size:cover;}




/*--------------------  container tier 1  ----------------------- */

.sliderContainer {
	
	position: absolute;
	width: 100%;
	height:100%;
	
	}

/*--------------------  container tier 2  ----------------------- */

.iosSlider {
	
	width: 100%;
	height: 100%;
	
	}


/*--------------------  individual slider ----------------------- */

.iosSlider
.slider {
	
	width: 100%;
	min-width:100%;
	height: 100%;
	
	}

/*--------------------  each slider item  ----------------------- */

/*individual elements*/
.iosSlider
.slider
.item 	{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-family:'GillSansMTPro-Medium';
		}


.item a1 {
	font-family:'GillSansMTPro-Light';
	}

/*--------------------  slider thumbs container  ----------------------- */


.iosSliderButtons {
	
	height:100px;
	position:absolute; 
	bottom:100px;
	left:0;
	font-size:22px;
	z-index:9999;
	padding-left:300px;
	}



/*--------------------  each thumbnail  ----------------------- */

	
.button {
	
	width:60px;
	height:60px;
	background:none;
	color:white;
	text-align:center;
	float:left;
	padding-top:12px;
	z-index:9999;
	opacity: 0.2;
	filter: alpha(opacity:50);

	}	

.button:hover {
	border:1px solid white;
	}		
		
.button img {width:100%}

.selected,
.button:hover {
	opacity: 1;
	filter: alpha(opacity:100);
	}


/*--------------------  the slider lock-up  ----------------------- */
	
.envelope {
	
	width:450px;
	height:150px;	
	color:white;
	position:relative;
	top:150px;
	left:200px;
	
	top:20%;
	left:25%;
	}
	
	
.envelope button {
	
	position:absolute;
	bottom:-60px; right:110px;
	width: 130px;
	height: 30px;
	
	}

	
	

.item img {
	
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	margin:0;
	}




/*--------------------  the NAV bar  ----------------------- */
/*--------------------  (contact, home, about ... )  ----------------------- */

nav {
	
	position:absolute;
	bottom:50px;
	left:0;
	width:100%;
	height:30px;
	
	border-bottom:1px solid rgba(255,255,255,.5);
	border-top:1px solid rgba(255,255,255,.5);
	z-index:9999;
	
	transition:background .3s ease;
	-webkit-transition:background .3s ease;
	-moz-transition:background .3s ease;
	-ms-transition:background .3s ease;
	
	}
	
	
	
nav:hover,
nav:active,
nav:focus {
	
	background:#00953A;
	border:1px solid rgba(0,0,0,0);

	}	
	
	



/*--------------------  individual NAV elements  ----------------------- */
/*--------------------  each submenu  ----------------------- */


nav > div {
	
	position:relative;
	float:right;
	display:block;
	color:white;
	font-family:'GillSansDisplayMTPro-Bold';
	height:100%;
	width:10%;
	max-width:200px;
	min-width:100px;
	top:0;
	
	text-align:center;
	cursor:pointer;
	font-size:12px;
	
	padding:7px 20px 0px 20px;
	background:none;
	color:white;
	}
	
	
	
	
nav > div:hover {
	
	background:white;
	color:#00953A;
	}
	
	

	
		
/*--------------------  some branding colors  ----------------------- */

.green {	color:#00953A; }
.white {	color:white; }
.black {	color:black; }


/*--------------------  the INPUT div  ----------------------- */



#last  {
	
	background:none;
	float:left;
	border:none;
	width:28%;
	height:100%; 
	padding:0;
	}
	
	
	
	
#last:hover {background:none}

/*--------------------  the search bar  ----------------------- */



#search {
	
	border:none;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.25);
	color:white;
	padding-left:30px;
	font-family:'GillSansMTPro-Medium';
	font-size:16px;
	}
	
	

	
#search:active,
#search:focus
 	{
	outline: 2px solid #00953A;
	}



   #lupa {
	   width:8px;
	   height:8px;
	   }


/*--------------------  the logo (in the main viewport)  ----------------------- */


#logo {
	
	z-index:9999;
	position:absolute;
	top:310px;
	right:100px;
	font-size:13px;
	text-align:right;
	font-family:'GillSansMTPro-Medium';
	width:400px;
	}
	
	
	
	/* das logo */


#logo-img {
	width:150px;
	position:absolute;
	right:0;
	top:0;
	}


#logo div {
	
	float:left;
	color:white;
	margin-right:40px;
	margin-top:6px;
	cursor:pointer;
	transition:all .4s ease;
	-webkit-transition:all .4s ease;
	}
	
	
	
#logo  div:hover  {color:black;}







/*--------------------  the TINY menu (when in iPhone)  ----------------------- */


#menu-wrapper {
	
	display:none;
	width:200px;
	height:auto;
	position:fixed;
	z-index:9999;
	}

/* the button for the tiny menu */

#menu {
	width:150px;
	height:50px;
	font-size:20px;
	position:fixed;
	left:0;
	top:150px;
	color:white;
	background:#00953A;
	z-index:9999;
	}	




#menu-content {
	
	position:absolute;
	left:0; 
	top:50px;
	width:150px;
	height:100%;
	min-height:2000px;
	background:#00953A;
	color:white;
	font-size:20px;
	z-index:9999;
}
	
	
#menu-content div {
	width:100%;
}	


/* each element */	
	
#menu-content a {
	float:none;
	display:block;
	padding:15px 40px;
}



#menu-content a:hover {
	
	
	background:white;
	color:#00953A;


}	



/*--------------------  the overflow screen  ----------------------- */


.panel {
	width:100%;
	height:100%;
	position:fixed;
	top:0;left:0;
	right:0; bottom:0;
	background:#00953A;
	opacity:1;
	z-index:9999;
	}




/*--------------------  the wrapper on the text element  ----------------------- */


/*the wrapper of the a tags*/ 
.inner-nav {
	width:100%;
	position:absolute;
	bottom:28px;
	left:0;
	}


.inner-nav a {
	
		color:#00953A;
		background:white;
		text-decoration:none; 
		text-align:left;
		margin:0;
		padding:0;
		padding:16px 0 16px 10%;
		display:block;
		width:100%;
				
		} 
		
		
  
.inner-nav a:hover {
	
		 background:#00953A;
		 color:white;
		 }
		
		
		
		
		
		
		
		
#label1 	{
		float:left;
		clear:both;
		position:absolute;
		margin-top:0px;
		font-size:13px;
		}
		
		
.submit 	{
		float:right;
		width:80px;
		margin-right:7px;
		border-radius:none;
		border:none;
		color:#00953a;
		color:black;
		background:white;
		position:relative;
		} 
	
		
.submit-send {
	
		float:right;
		width:80px;
		border-radius:none;
		border:none;
		position:relative;
		
		color:white;
		background:rgb(0,92,171);
		} 
	
				
		
		
.submit:hover {
		background:#00953A;
		color:white;		
		}
			
			
#submit-wrapper {
		width:100%;
		margin:0;
		padding:0;
		}	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
.stuck {
	position:fixed;top:30px;
	}   


/*-------------------- for the lower list in the NAV bar  ----------------------- */


nav.stuck > div {
	top:-1px;
	height:100%;
	}

	
.stuck div > div {
	
		width:100%;
		height:auto;
		color:#00953A;
		background:#FFF;
		position:absolute;
		left:0;
		top:28px;
		border:none;
	} 

	
.stuck div > div a {
	
		color:#00953A;
		background:white;
		text-decoration:none; 
		text-align:left;
		margin:0;
		padding:0;
		padding:16px 0 16px 10%;
		display:block;
		} 



.drop-shadow {text-shadow:1px 1px 1px rgba(0,0,0,.6);}


button {
	
	width:120px;
	height:20px;
	text-align:center;
	background:white;
	color:#00953A;
	font-size:14px;
	border:none;
	font-family:'GillSansMTPro-Medium';
	float:right;
	
	/*absolute position*/
	
	position:absolute;
	bottom:0;
	right:0;
	}
	
button:hover {
	
	background:#00953A;
	color:white;
	}
	
	
#assets {
	
	position:absolute;
	right:0;
	top:0;
	overflow:visible;
	width:100%;
	height:0px;
	z-index:9999;
	}
	


/* ---------------- EACH ONE OF THE SECTIONS --------------------*/


.section, .section2 {
	
	width:100%;
	height:auto;
	max-width:100%;
	min-width:480px;
	background:#00953A;
	margin:0;
	overflow:visible;
	position:relative;
	float:none;
	}





top {
	
	width:100%;
	height:auto;
	max-width:100%;
	min-width:480px;
	background:#00953A;
	margin:0;
	position:relative;
	overflow:hidden;
	}
	



	
/*
.section img {
	
	transform-origin:center;
	margin:0 auto;
	height:100%;
	width:100%;
	
	}

*/


.inner-left {
	width:480px;
	height:auto;
	padding:20px 40px;
	position:absolute;
	left:20%;
	top:30%;
	z-index:9998;
	position:absolute;
	overflow:visible;
	}

.back {

background: rgba(0,149,58,.4);
background-size:100% 200%;

	}	
	
.inner-right {
	width:480px;
	height:auto;
	padding:20px 40px;
	position:absolute;
	right:20%;
	top:30%;
	z-index:9998;
	position:absolute;
	overflow:visible;

	}

.shade 	{
		background:rgba(0,0,0,.7);
		}

/*the sections button*/

.clicker {
	width:130px;
	height:30px;
	position:absolute;
	right:-50px;
	bottom:40px;
	cursor: pointer;
	}

.clicker:hover {
	background:#00953A;
	}	
	
	

h1	{
	font-size:28px;
	display:block;
	margin-bottom:-20px;
	font-family:'GillSansMTPro-Light';
	}	
		
h2	{
	font-size:22px;
	display:block;
	margin-bottom:10px;	
	font-family:'GillSansDisplayMTPro-Bold';	
	}	
	
h3	{
	font-size:16px;
	display:block;
	line-height:20px;
	margin-top:20px;
	font-family:'GillSansMTPro-Medium';
	font-family:'GillSansMTPro-Light';
	}



	
/* the LOWER bar*/

#contact {
	position:fixed;
	width:100%;
	padding-top:20px;

	height:120px;
	left:0; bottom:0;
	transition:background .25s ease;
	-webkit-transition:background .25s ease;
	font-size:12px;
	
	background:rgba(0,0,0,.2);	
	}
	
#contact:hover {
	background:rgba(0,0,0,.85);
	}
	
#contact img {
	float:right;
	margin-right:80px;
	width:200px;
	}


/* each one of the elements in the lower bottom bar */

#contact .item {
	height:100%;
	color:white;
	float:right;
	margin-right:30px;
	font-family:'GillSansMTPro-Medium';
	}
	
/* GENERAL input settings */	

#contact input {  
	color:white;
	font-family: 'GillSansMTPro-BoldCondensed';	
	font-size:14px;
	padding:5px;
	}
	




/* the TITLE input */
#contact #input-title,
#contact #input-email
 	{
	width:180px;	
	margin-top:0;
	padding-bottom:12px;	
	background:none; 
	border:none;
	border-bottom:1px solid white;
	transition:all .3s ease;
	-webkit-transition:all .3s ease;	
	font-family: 'GillSansMTPro-BoldCondensed';
	font-size:14px;
	
	
	transition:all .15s ease;
	-webkit-transition:all .15s ease;
	-ms-transition:all .15s ease;
	-moz-transition:all .15s ease;
	}

#contact #input-title:focus,
#contact #input-email:focus
 	{

	padding-left:30px;
	background:white;
	color:rgb(0,92,171);/*blue*/
	outline:0;
	
	transition:all .15s ease;
	-webkit-transition:all .15s ease;
	-ms-transition:all .15s ease;
	-moz-transition:all .15s ease;
	}	
	
	
#contact #input-title:blur,
#contact #input-email:blur
 	{

	padding-left:0;
	
	transition:all .15s ease;
	-webkit-transition:all .15s ease;
	-ms-transition:all .15s ease;
	-moz-transition:all .15s ease;
	}	
	
	
	
	
	
	
	
/* social images */
#contact .item img {
	float:right;
	margin-left:10px;
	width:12px;
	height:10px;
	margin-right:0;
	margin-top:3px;
	}
	
	

	

	 
/* the 'message'  */
	
#contact #input-message {
	width:230px; 
	height:60%;
	margin-top:10px;
	background:none;
	border:1px solid white;
	color:white;
	font-family: 'GillSansMTPro-BoldCondensed';	
	font-size:14px;	
	padding:5px 10px;
	
		
	transition:all .15 ease;
	-webkit-transition:all .15 ease;
	-moz-transition:all .15 ease;
	-ms-transition:all .15 ease;
	}
	
	
	

#contact #input-message:focus {
	outline:none;
	
	}	







/*the placeholder text*/

::-webkit-input-placeholder
	{
	font-family: 'GillSansMTPro-Medium';
	font-size:13px;
	color:white;
	}
	
	
	

::-moz-selection {
    background: #00953A;
    text-shadow: none;
    color:white;
}

::selection {
    background: #00953A;
    text-shadow: none;
    color:white;
}





.image2 {
	margin-left:0; 
	margin-right:0; 
	margin-top:0; 
	margin-bottom:0; 
	position:absolute;
	left:-300px;
	top:0;
	width:200px;
	height:200px;
	z-index:9999;
	}
	
.image2 img {
	width:100%;
	}		
	

	
	
	
	
/* for the GOOGLE MAP section */	
	

	
	 
#map {
	 width:100%;
	 height:100%;
	 min-width:1200px;
	 min-height:700px;
	 z-index:9998;
	 
	 left:0;
	 top:0;
	 
	 position:absolute;
	 }
	 
.a1 {
	width:130px;
	height:30px;
	z-index:9999;
	float:right;
	position:relative;
	top:100px;
	margin-right:10px;
	}
	 

#close {
	top:70%;
	right:45%;
	width:170px;
	height:50px;
	position:absolute;
	
	background:rgba(255,255,255,.3);
	color:white;
	border:2px solid white;
	font-family:'GillSansDisplayMTPro-Bold';
	z-index:9999;
	}
	
#close:hover,
#close:active {
	background:white;
	color:#00953A;
	}
	
	
	
.blue {
	color:rgb(0,92,171);
	}
	
	
	
	
	
	
/* SOME TAILORED ADJUSTMENTS */	

#conejos .inner-left, 
#cofre .inner-left 
 	{
	top:40%;
	}


	

#bosque .inner-right,
#montanas .inner-right 
 	{
	top:20%;
	}