@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:#6e3196; text-decoration:none}
a:hover {color:#491a68; 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:#85639b; color:#4f4f4f; 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}

.bgBlanco10 {padding:10px 0; background:#FFF}
.bgBlanco20 {padding:20px 0; background:#FFF}
.bgAzul {padding:20px 0 60px 0; background:#3d859a}

/* HEADER ------ */
#header {width:1000px; margin:0 auto; padding:15px 0}
#header h1 {width:270px; height:78px; display:block; text-indent:-9999px; background:url(../img/testea.png) no-repeat left top; float:left}
#header h2 {margin:30px 0 0 0; font-size:2em; line-height:1.25em; text-transform:uppercase; color:#FFF; float:right}

/* CONTENIDO ------ */
#detalle {width:1000px; margin:0 auto; text-align:center}
#detalle h3 {margin:0 0 5px 0; font-size:2em; color:#6e3196; text-transform:uppercase; font-weight:700}
#detalle h4 {margin:0 0 20px 0; font-size:1.6em; color:#6e3196; text-transform:uppercase}
#detalle p {font-size:1.6em}

#slider {width:1000px; margin:0 auto; background:url(../img/sala-gesell01.jpg) no-repeat left top #85639b}

#features {width:1010px; margin:0 auto}
#features .item {width:226px; margin:0 5px 10px 5px; font-size:1.2em; color:#561f7a; line-height:1.1em; float:left}
#features .item.icono01 {height:44px; padding:26px 20px 0 80px; background:url(../img/icono01.png) no-repeat left top #e2d6ea}
#features .item.icono02 {height:60px; padding:10px 20px 0 80px; background:url(../img/icono02.png) no-repeat left top #e2d6ea}
#features .item.icono03 {height:60px; padding:10px 20px 0 80px; background:url(../img/icono03.png) no-repeat left top #e2d6ea}
#features .item.icono04 {height:60px; padding:10px 20px 0 80px; background:url(../img/icono04.png) no-repeat left top #e2d6ea}
#features .item.icono05 {height:44px; padding:26px 20px 0 80px; background:url(../img/icono05.png) no-repeat left top #e2d6ea}
#features .item.icono06 {height:44px; padding:26px 20px 0 80px; background:url(../img/icono06.png) no-repeat left top #e2d6ea}
#features .item.icono07 {height:52px; padding:18px 20px 0 80px; background:url(../img/icono07.png) no-repeat left top #e2d6ea}
#features .item.icono08 {height:44px; padding:26px 20px 0 80px; background:url(../img/icono08.png) no-repeat left top #e2d6ea}
#features .item.icono09 {height:52px; padding:18px 20px 0 80px; background:url(../img/icono09.png) no-repeat left top #e2d6ea}
#features .item.icono10 {height:52px; padding:18px 20px 0 80px; background:url(../img/icono10.png) no-repeat left top #e2d6ea}
#features .item.icono11 {height:44px; padding:26px 20px 0 80px; background:url(../img/icono11.png) no-repeat left top #e2d6ea}
#features .item.icono12 {height:60px; padding:10px 20px 0 80px; background:url(../img/icono12.png) no-repeat left top #e2d6ea}

#features h5 {margin:10px 0 2px 5px; font-size:1.6em; color:#6e3196; text-transform:uppercase; font-weight:700}
#features p {margin:0 0 20px 5px; font-size:1.2em; color:#6e3196}

#ubicacion {width:1000px; margin:0 auto; padding:30px 0}
#ubicacion .box {margin:0 0 20px 0; padding:15px 20px; background:#e2cfee}
#ubicacion .box .boxContainer {width:46%; margin:0 30px 0 0; float:left}
#ubicacion h4 {margin:0 0 2px 0; font-size:1.6em; color:#6e3196; font-weight:700; text-transform:uppercase}
#ubicacion p {font-size:1.5em; color:#6e3196}
#ubicacion h5 {margin:0 0 20px 0; font-size:1.15em; color:#FFF}

.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 {width:1000px; margin:0 auto}
#formulario h5 {margin:0 0 20px 0; font-size:1.6em; font-weight:600; color:#FFF; text-transform:uppercase}

#formulario p {margin:0 0 5px 0 !important; font-size:1.2em; color:#FFF}

#formulario .boxSmall {width:22.3%; margin:0 30px 20px 0; float:left}
#formulario .boxSmall.cuatro {margin:0 0 20px 0}
#formulario .boxBig {width:73%; margin:0 30px 20px 0; float:left}
#formulario .boxEnviar {width:22%; padding:130px 0 0 0; float:left}

#formulario .text {width:100%; padding:5px 6px; border:none; background:#FFF; color:#000; font-size:1.4em; font-family:'Open Sans', sans-serif}
#formulario .text:focus {background-color:#FFFFCC}
#formulario .textarea {width:100%; height:130px; padding:5px 6px; color:#000; font-size:1.4em; font-family:'Open Sans', sans-serif; border:none; background:#FFF}
#formulario .textarea:focus {background-color:#FFFFCC}
.buttom {padding:4px 20px; background:#6c1c74; color:#FFF; font-size:1.6em; cursor:hand; border:none; font-weight:600; font-family:'Open Sans', sans-serif}
.buttom:hover {background:#491a68; outline:0}
#formulario .mensaje {margin:0 0 20px 0; padding:15px 20px; background:#2f6676}
#formulario .mensaje h4 {margin:0; font-size:1.6em; font-weight:600; color:#FFF}
.volver a {margin:0 0 60px 0; padding:4px 20px; background:#6c1c74; color:#FFF; font-size:1.6em; cursor:hand; border:none; font-weight:600}
.volver a:hover {background:#491a68; text-decoration:none}



/* RESPONSIVE QUERIES */

/* Check size */
.s768 {display:none; color:#FFF}
.s480 {display:none; color:#FFF}
.s479 {display:none; color:#FFF}  

/* Common */
@media screen and (max-width: 1000px) {
	
	#header {width:95%}
	#slider {width:auto; height:auto}
	#features {width:auto; margin:0 5px}
	#ubicacion {width:auto; margin:0 10px; padding:20px 0}
	#formulario {width:auto; margin:0 10px}
	
}

/* 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 h2 {width:50%; margin:13px 40px 0 20px; font-size:1.7em}

	#detalle {width:auto; padding:0 30px}
	#detalle h3 {font-size:1.9em}
	#detalle h4 {font-size:1.5em}
	#detalle p {font-size:1.5em}

	#features .item {width:35%}
	#features p {margin:0 20px 20px 5px}

	#ubicacion .box .boxContainer {width:44%}
	#ubicacion h4 {font-size:1.5em}
	#ubicacion p {font-size:1.4em}
	
	#formulario .boxSmall {width:40%}
	#formulario .boxSmall.dos {margin:0 0 20px 0}
	#formulario .boxSmall.cuatro {margin:0 0 20px 0}
	#formulario .boxBig {width:84%; margin:0 30px 20px 0; float:none}
	#formulario .boxEnviar {width:84%; padding:0; float:none}
	
	/* Check size */
	.s768 {display:block} 

}

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

	html {-webkit-text-size-adjust:none}
	
	body {margin:0}
	
	#header {width:93%; padding:15px; text-align:center;}
	#header h1 {margin:0 auto; float:none}
	#header h2 {width:auto; margin:10px 20px; font-size:1.7em; text-align:center}

	#detalle {width:90%; padding:0 20px}
	#detalle h3 {font-size:1.6em}
	#detalle h4 {font-size:1.5em}
	#detalle p {font-size:1.4em}

	#features .item {width:75%; font-size:1.3em; line-height:1.2em; float:none}
	#features p {margin:0 20px 20px 5px}
	#features .item.icono01, #features .item.icono02, #features .item.icono03, #features .item.icono04, #features .item.icono05, #features .item.icono06, #features .item.icono07, #features .item.icono08, #features .item.icono09, #features .item.icono10, #features .item.icono11, #features .item.icono12 {height:60px; padding:10px 20px 0 80px}
	
	#features h5 {margin:20px 0 2px 5px; font-size:1.5em}
	#features p {font-size:1.3em}

	#ubicacion .box .boxContainer {width:96%; margin:0 0 20px 0; float:none}
	#ubicacion h4 {font-size:1.5em}
	#ubicacion p {font-size:1.4em}
	
	.google-maps {padding-bottom:70%}
	
	#formulario .boxSmall {width:40%}
	#formulario .boxSmall.dos {margin:0 0 20px 0}
	#formulario .boxSmall.cuatro {margin:0 0 20px 0}
	#formulario .boxBig {width:87%; margin:0 30px 20px 0; float:none}
	#formulario .boxEnviar {width:87%; padding:0; float:none}
	
	/* Check size */
	.s480 {display:block} 
	
}

/* Iphone Ipod vertical and down */
@media screen and (max-width: 479px) {
	
	#header {width:88%; padding:15px; text-align:center}
	#header h1 {width:240px; height:69px; margin:0 auto; float:none; background-size:240px}
	#header h2 {width:auto; margin:10px 0; font-size:1.5em; text-align:center}

	#detalle {width:88%; padding:0 20px}
	#detalle h3 {font-size:1.6em}
	#detalle h4 {font-size:1.5em}
	#detalle p {font-size:1.4em}

	#features .item {width:64%; float:none}
	#features p {margin:0 20px 20px 5px}
	#features .item.icono01, #features .item.icono02, #features .item.icono03, #features .item.icono04, #features .item.icono05, #features .item.icono06, #features .item.icono07, #features .item.icono08, #features .item.icono09, #features .item.icono10, #features .item.icono11, #features .item.icono12 {height:60px; padding:10px 20px 0 80px}
	
	#features h5 {margin:20px 0 2px 5px; font-size:1.5em}
	#features p {font-size:1.3em}
	
	#ubicacion {width:94%}
	#ubicacion .box .boxContainer {width:96%; margin:0 0 20px 0; float:none}
	#ubicacion h4 {font-size:1.4em}
	#ubicacion p {font-size:1.3em}
	
	.google-maps {padding-bottom:75%}
	
	#formulario .boxSmall {width:90%}
	#formulario .boxSmall.uno, #formulario .boxSmall.dos, #formulario .boxSmall.tres, #formulario .boxSmall.cuatro {margin:0 0 15px 0}
	#formulario .boxBig {width:90%; margin:0 0 15px 0; float:none}
	#formulario .boxEnviar {width:90%; padding:0; float:none}
	

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

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) {
	
	#header #logo h1 {background-image:url(../img/testea@2x.png); background-size:240px}

	#features .item.icono01 {background-image:url(../img/icono01@2x.png); background-size:70px}
	#features .item.icono02 {background-image:url(../img/icono02@2x.png); background-size:70px}
	#features .item.icono03 {background-image:url(../img/icono03@2x.png); background-size:70px}
	#features .item.icono04 {background-image:url(../img/icono04@2x.png); background-size:70px}
	#features .item.icono05 {background-image:url(../img/icono05@2x.png); background-size:70px}
	#features .item.icono06 {background-image:url(../img/icono06@2x.png); background-size:70px}
	#features .item.icono07 {background-image:url(../img/icono07@2x.png); background-size:70px}
	#features .item.icono08 {background-image:url(../img/icono08@2x.png); background-size:70px}
	#features .item.icono09 {background-image:url(../img/icono09@2x.png); background-size:70px}
	#features .item.icono10 {background-image:url(../img/icono10@2x.png); background-size:70px}
	#features .item.icono11 {background-image:url(../img/icono11@2x.png); background-size:70px}
	#features .item.icono12 {background-image:url(../img/icono12@2x.png); background-size:70px}

}