@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* Diseño móvil: 480 px e inferior. */

@media only screen 
and (max-width : 767px)   {

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
}

 .title{
	width:220px;
	height:65px;
	position:relative;
	display: block;
top:0px;
margin-left:auto;
margin-right:auto;
	 }
form{
	display:none;
}
ul.accordion{
top:50px;
float:right;
}

.reference{
		width:240px;
		top:365px;
}
.reference p{
		font-size: 18px;

}
ul.accordion li .heading{
    margin-top:10px;
	padding:5px;
}


ul.accordion li .description h2{
	font-size:18px;
}

ul.accordion li{
    width:300px; 
    height:55px;
	left:75px;
	float:left;
}

ul.accordion li .description{
    width:305px;
	height:175px;
}


#accordion .bg3 .description p{
	margin-top:150px;
}
	
#accordion .bg5 .description p{
	margin-top:210px;	
}

#accordion .bg3 .description #movil,#accordion .bg5 .description #movil{
	display:block;
	line-height:1em;
	font-size:96%;
}
#accordion .bg5 .description #movil{
	font-size:70%;
	line-height:1.4em;
}

body{
	background-size:cover;
	overflow:hidden;
}


h3{
	margin-top:320px;
}

h2{
	display:none;
}

}


/* Diseño tableta: de 481 px a 1024 px en horizontal  */

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape){

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}

.title{
width:247px;
height:73px;
}

.reference{
width:240px;
top:360px;}

ul.accordion{
	right: 20px;
}

.accordion .description h2{
	display:none;
}

ul.accordion li{
    width:85px;
    height:340px;
	top:10px;
}

ul.accordion li .description p{
	margin: 10px 0 0 20px;
	font-size:13px;
}

ul.accordion li .description{
    width:285px;
	height:335px;
}

ul.accordion .bg2 .description {
	height:175px;
}

ul.accordion .bg4 .description {
	height:135px;
}

ul.accordion .bg5 .description{
	height:320px;
	}
ul.accordion .bg3 .description{
	height:300px;
}

ul.accordion .bg1 .description{
	height:320px;
}

ul.accordion li .heading{
	font-size:11px;
}

form{
	margin-top:15px;
}

input[type=text], input[type=email],  textarea {
	margin-bottom: 7px;
}

textarea {
		height:100px;
}

#submitbtn {
	margin-right:10px;
}

}

/* Diseño tableta: de 481 px a 768 px en vertical  */

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)  {
	
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}

body{
	background-size:cover;
}

.title{
width:333px;
height:98px;
}

.reference{
top:700px;
}

ul.accordion{
top:145px;
right:25px;
}

ul.accordion li{
    width:95px;
    height:480px;
}

ul.accordion li .heading{
	font-size:13px;
}

ul.accordion li .description h2{
	font-size:25px;
}

ul.accordion li .description{
    width:300px;
}

ul.accordion .bg2 .description {
	height:260px;
}

ul.accordion .bg4 .description {
	height:230px;
}

ul.accordion .bg5 .description{
	height:470px;
	}
ul.accordion .bg3 .description{
	height:390px;
}

form{
}

input[type=text], input[type=email],  textarea {
	width:195px;
}

#submitbtn {
	margin-right:20px;
}

}

/*  Diseño laptop baja resolucion */

@media only screen and (min-width : 1025px) and (max-width : 1278px){

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}

.title{
width:333px;
height:101px;

}

ul.accordion .bg2 .description {
	height:235px;
}

ul.accordion .bg4 .description {
	height:190px;
}

ul.accordion .bg5 .description, ul.accordion .bg3 .description{
	height:450px;
	}
ul.accordion .bg3 .description{
	height:360px;
}

ul.accordion li .description p{
	margin: 10px 0 0 20px;
	font-size:13px;
}

ul.accordion li{
    width:95px;
    height:480px;
	top:10px;
}

ul.accordion li .description h2{
	font-size:25px;
}

ul.accordion li .description{
    width:285px;
	height:335px;
}

.reference{
	top:435px;
}

}


/* Diseño laptop, reslucion alta */

@media only screen and (min-width: 1279px) {
	
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}

.title{
width:440px;
height:130px;
}

.reference p {
	word-spacing:3px;

}
}
