@charset utf-8;

/* RESETS ------ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,code,del,em,img,samp,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tr,th,td {margin:0; padding:0; border:0}
a img {border:0}
a {outline:0}

a:link, a:visited {color:#241e16; text-decoration:none}
a:hover {color:#000; text-decoration:underline}

.clear {height:0px; clear:both}
.hide {display:none}
.left {float:left}
.right {float:right}

h2, h3, h4, h5 {font-weight:400}

body {font:76% 'Open Sans', sans-serif; background:#e3ddce; color:#453d32; opacity: 1; -webkit-transition: opacity 1s ease}

.loading:before {content:'C A R G A N D O'; width:100%; position:absolute; z-index:10; top:400px; text-align:center; color:#FFF; font-size:1.6em; opacity:0.5}

/* HEADER ------ */
.bgHeader {width:100%; padding:40px 0 20px 0; background:#FFF}
#header {width:940px; margin:0 auto}
#header h1 a {width:350px; height:80px; background:url(img/recalada-sanjuan.png) no-repeat left top; display:block; text-indent:-9999px; float:left}
#header .options {width:550px; float:right}
#header .options h2 {font-size:1.4em; font-weight:300; font-style:italic; color:#713620; text-align:right}
#header ul#social {width:126px; margin:0 0 12px 0; list-style-type:none; float:right}
#header ul#social li {float:right}
#header ul#social li a {width:31px; height:30px; margin:0 0 0 10px; display:block; transition:opacity 0.1s linear}
<!--#header ul#social li.fb a {background:url(img/icFacebook.png) no-repeat left top}-->
#header ul#social li.mp a {background:url(img/icMaps.png) no-repeat left top}
#header ul#social li.ml a {background:url(img/icMail.png) no-repeat left top}
#header ul#social li a:hover {opacity:.5}

.bgMenu {width:100%; padding:10px 0; background:#5b5852}
#menu {width:940px; margin:0 auto}
#menu ul {list-style-type:none}
#menu ul li {margin:0 55px 0 0; float:left}
#menu ul li.last {margin:0}
#menu ul li a {display:block; color:#FFF; font-size:1.4em; text-transform:uppercase}
#menu ul li a:hover {color:#b4ba36; text-decoration:none}
#menu ul li.selected a {color:#b4ba36}

/* FOOTER ------ */
#footer {width:940px; margin:0 auto; padding:20px 0 60px 0; text-align:center}
#footer p {margin:0 0 10px 0; font-size:1.1em; color:#7e4e3c}
#footer p a {color:#7e4e3c}

/* HOME ------ */
#slider {width:100%; margin:0 auto 20px auto}

#cabanas {width:940px; margin:0 auto 20px auto}
#cabanas .cabana12 {width:460px; margin:0 20px 20px 0; background:#453d32; float:left}
#cabanas .cabana34 {width:460px; margin:0 0 20px 0; background:#453d32; float:left}
#cabanas .foto {width:460px; height:180px}
#cabanas .foto img {width:100%; height:100%; z-index:0}
#cabanas .foto .more a {width:90px; height:17px; margin:153px 0 0 312px; padding:5px 20px 5px 38px; background:url(img/dotMore.png) no-repeat 20px 8px #b4ba36; color:#453d32; text-transform:uppercase; font-size:1em; font-weight:600; display:inline-block; z-index:10; position:absolute}
#cabanas .foto .more a:hover {background:url(img/dotMore.png) no-repeat 20px 8px #939820; text-decoration:none; color:#453d32}
#cabanas .texto {height:95px; padding:20px}
#cabanas .texto h3 {margin:0 0 5px 0; font-size:1.5em; font-weight:600}
#cabanas .texto h3 a {color:#b4ba36}
#cabanas .texto h3 a:hover {text-decoration:none; color:#e3e5b4}
#cabanas .texto p {color:#FFF}

/* PAGES ------ */
#main {width:940px; margin:0 auto}

#tit {padding:20px 0}
#tit h2 {margin:0 0 5px 0; font-size:2em; text-transform:uppercase }
#tit h3 {font-size:1.3em}

#texto {margin:0 0 20px 0}
#texto p {margin:0 0 10px 0; font-size:1.2em}

.fichaTit {background:#484137}
.fichaTit h3 {padding:7px 20px; background:#484137; font-size:1.6em; color:#b4ba36; font-weight:600; float:left}
.fichaTit .disp {padding:12px 25px; background:#b4ba36; font-size:1em; font-weight:600; color:#453d32; display:inline-block; float:right}
.fichaTit .disp a {color:#453d32}
.ficha {margin:0 0 20px 0; padding:20px; background:#FFF}
.ficha p {margin:0 0 12px 0; font-size:1.1em}
.ficha .foto {width:440px; height:300px; margin:0 0 0 20px; float:right}
.ficha .foto img {width:100%; height:100%}
.ficha .boton1 a {margin:0 10px 0 0; padding:7px 20px; background:#5a6e26; color:#FFF; text-transform:uppercase; font-size:1.1em; font-weight:600; display:inline-block; float:left}
.ficha .boton1 a:hover {background:#2e3b0b; text-decoration:none}
.ficha .boton2 a {margin:0; padding:7px 20px; background:#b4ba36; color:#484137; text-transform:uppercase; font-size:1.1em; font-weight:600; display:inline-block; float:left}
.ficha .boton2 a:hover {background:#797e18; text-decoration:none}

.col1 {width:47%; margin:0 40px 20px 0; float:left}
.col2 {width:47%; margin:0 0 20px 0; float:left}
.col1 h3, .col2 h3 {margin:0 0 10px 0; font-size:1.3em; font-weight:600}
.col1 p, .col2 p {margin:0 0 10px 0; font-size:1.2em}

.google-maps {position:relative; padding-bottom:50%; height:0; overflow:hidden}
.google-maps iframe {position:absolute;	top:0; left:0; width:100% !important; height:100% !important}

#formulario {margin:0 0 30px 0; padding:30px; background:#FFF}
#formulario p {margin:0 0 10px 0; font-size:1.1em}
#formulario .boxSmall {width:30.5%; margin:0 30px 20px 0; float:left}
#formulario .boxSmall.tres {margin:0 0 20px 0}
#formulario .boxBig {width:98%; margin:0 0 20px 0}
#formulario .text {width:100%; padding:6px; border:1px solid #5b5852; background:#f9f8f5; color:#000; font-size:1.4em}
#formulario .text:focus {background:#FFF}
#formulario .textarea {width:100%; height:130px; margin:0 0 15px 0; padding:6px; border:1px solid #5b5852; color:#000; font-size:1.4em; font-family:Arial; background:#f9f8f5}
#formulario .textarea:focus {background:#FFF}
.buttom {margin:0 -15px 0 0; padding:6px 20px; background:#b4ba36; color:#FFF; font-size:1.5em; cursor:hand; border:none; float:right}
.buttom:hover {background:#7f8419; color:#FFF; outline:0}
#formulario .mensaje {margin:0 0 20px 0}
#formulario .mensaje h4 {margin:0 0 20px 0; font-size:1.3em}
#formulario .mensaje .volver a {padding:6px 20px; background:#b4ba36; color:#FFF; font-size:1.4em; cursor:hand; border:none}
#formulario .mensaje .volver a:hover {background:#7f8419; color:#FFF; text-decoration:none}

/* Galeria ------ */
.container {margin:3px -3px 20px -3px}
.container .gallery a img {float:left; width:24.35%; height:auto; margin:3px; -webkit-transition:-webkit-transform .15s ease; -moz-transition:-moz-transform .15s ease; -o-transition:-o-transform .15s ease; -ms-transition:-ms-transform .15s ease; transition:transform .15s ease; position:relative}
.container .gallery a:hover img {-webkit-transform:scale(1.05); -moz-transform:scale(1.05); -o-transform:scale(1.05); -ms-transform:scale(1.05); transform:scale(1.05); z-index: 5}
.container .gallery a.big img {width:40%}


/* RESPONSIVE QUERIES */

/* Check size */
.s768 {display:none}
.s480 {display:none}
.s479 {display:none}  

/* Common */
@media screen and (max-width: 1000px) {
	
	#header {width:95%}
	#menu {width:95%; margin:0 auto}
	#slider {width:auto; height:auto}
	#cabanas {width:95%}
	#main {width:95%}
	#footer {width:95%}

}

/* Landscape tablet and dated desktop */
@media screen and (min-width: 1000px) {
}

/* Portrait tablet to landscape and desktop */
@media screen and (min-width: 768px) and (max-width: 1000px) {

	#header h1 a {width:300px; height:69px; margin:0; background-size:300px}
	#header .options {width:40%}
	#header .options h2 {font-size:1.3em}
	#header ul#social {margin:0 0 5px 0}
	
	#menu ul li {margin:0 21px 0 0}
	#menu ul li a {font-size:1.2em}
	
	.flex-direction-nav a:before  {font-size:36px !important}

	#cabanas .cabana12, #cabanas .cabana34 {width:48.5%}
	#cabanas .foto {width:100%; height:auto}
	#cabanas .foto .more a {width:auto; height:auto; margin:0; padding:5px 10px 5px 30px; background:url(img/dotMore.png) no-repeat 12px 8px #b4ba36 }
	#cabanas .texto {height:110px}

	#tit h2 {font-size:1.8em}
	#tit h3 {font-size:1.2em}
	.fichaTit h3 {padding:7px 15px}
	.fichaTit .disp {padding:12px 15px}
	.ficha .foto {width:380px; height:auto; float:none}
	.ficha .boton1 a {margin:0 5px 0 0; padding:7px 10px}
	.ficha .boton2 a {padding:7px 10px}

	#formulario .boxSmall {width:29.5%}
	
	.container .gallery a img {width:24%}

	/* Check size */
	.s768 {display:block} 

}

/* Iphone Ipod Landscape */
@media screen and (min-width: 480px) and (max-width: 767px) {

	html {-webkit-text-size-adjust:none}
	
	.bgHeader {padding:20px 0}
	#header h1 a {width:250px; height:57px; margin:0 auto 20px auto; background-size:250px; float:none}
	#header .options {width:auto; float:none}
	#header .options h2 {font-size:1.3em; margin:0 30px; text-align:center}
	#header ul#social {margin:0 auto; float:none}
	#header ul#social li a {margin:0 0 10px 10px}
	
	.bgMenu {padding:10px 0 5px 0}
	#menu ul li {margin:0 5px 5px 0; padding:5px 15px; background:#3d382d}
	#menu ul li a {font-size:1.2em}

	.flex-direction-nav a:before  {font-size:36px !important}
	
	#cabanas .cabana12, #cabanas .cabana34 {width:auto; margin:0 0 20px 0; float:none}
	#cabanas .foto {width:100%; height:auto}
	#cabanas .foto .more a {width:auto; height:auto; margin:0; padding:5px 10px 5px 30px; background:url(img/dotMore.png) no-repeat 12px 8px #b4ba36 }
	#cabanas .texto {height:auto}

	#tit h2 {font-size:1.8em}
	#tit h3 {font-size:1.2em}
	.fichaTit h3 {padding:7px 15px; float:none}
	.fichaTit .disp {margin:0 0 10px 15px; padding:5px 10px; float:none}
	.ficha {padding:15px}
	.ficha .foto {width:100%; height:auto; margin:0 0 15px 0}
	.ficha .boton1 a {margin:0 5px 0 0; padding:7px 10px}
	.ficha .boton2 a {padding:7px 10px}
	
	.col1 {width:auto; margin:0 0 20px 0; float:none}
	.col2 {width:auto; float:none}

	#formulario .boxSmall {width:90%; margin:0 0 20px 0; float:none}
	#formulario .boxBig {width:90%}
	
	.container .gallery a img {width:31.7%}

	/* Check size */
	.s480 {display:block} 
	
}

/* Iphone Ipod vertical and down */
@media screen and (max-width: 479px) {
	
	.bgHeader {padding:20px 0}
	#header h1 a {width:230px; height:53px; margin:0 auto 20px auto; background-size:230px; float:none}
	#header .options {width:auto; float:none}
	#header .options h2 {font-size:1.3em; margin:0 10px; text-align:center}
	#header ul#social {margin:0 auto; float:none}
	#header ul#social li a {margin:0 0 10px 10px}
	
	.bgMenu {padding:10px 0 5px 0}
	#menu ul li {margin:0 5px 5px 0; padding:5px 10px; background:#3d382d}
	#menu ul li a {font-size:1.15em}

	#slider .flex-prev, #slider .flex-next {display:none}
	.flex-direction-nav a:before  {font-size:36px !important}
	
	#cabanas .cabana12, #cabanas .cabana34 {width:auto; margin:0 0 20px 0; float:none}
	#cabanas .foto {width:100%; height:auto}
	#cabanas .foto .more a {width:auto; height:auto; margin:0; padding:5px 10px 5px 30px; background:url(img/dotMore.png) no-repeat 12px 8px #b4ba36 }
	#cabanas .texto {height:auto}

	#tit h2 {font-size:1.7em}
	#tit h3 {font-size:1.2em}
	.fichaTit h3 {padding:7px 10px; float:none}
	.fichaTit .disp {margin:0 0 10px 10px; padding:5px 10px; float:none}
	.ficha {padding:10px}
	.ficha .foto {width:100%; height:auto; margin:0 0 15px 0}
	.ficha .boton1 a {margin:0 5px 0 0; padding:7px 10px}
	.ficha .boton2 a {padding:7px 10px}

	.col1 {width:auto; margin:0 0 20px 0; float:none}
	.col2 {width:auto; float:none}
	
	#formulario {padding:20px}
	#formulario p {margin:0 0 8px 0}
	#formulario .boxSmall {width:95%; margin:0 0 20px 0; float:none}
	#formulario .boxBig {width:95%}
	.buttom {font-size:1.3em}

	
	.container .gallery a img {width:48%}

	/* Check size */
	.s479 {display:block} 

}