* {
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
}

#contenedor-general {
	margin: 0 auto;
	position:relative;
	width: 100%;
	clear: both;
}

#linea {

	background:#ed6506;
	height: 20px;
	width: 100%;
}

#fondo {
	background-image:url(img/franja.png);
	background-repeat: repeat-x;
	height: 122px;
	width:100%;
	margin-bottom: 10px;	
}

#logo {
	background:url(img/logo.png);
	background-repeat: no-repeat;
	height:68px;
	width:528px;
	margin-left:100px;
	margin-top:22px;
	float:left;
}

nav {
	float:right;
}

nav ul {
	list-style-type:none;
	margin-top:40px;
	margin-right:100px;
}

nav ul li {	
	padding:5px 9px 10px 0px;
	display: inline-block;
}

nav  ul li a {
	color:#0056a8;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:17px;
	text-decoration:none;
	padding:9px 9px 9px 9px;
}

nav ul li a:hover {
	background:#dcdcdc;
	color:#ec680c;
	border-radius: 5px;
	border-bottom: 3px solid #b4b4b4;	
}

.activo a {
	background: #f2f1f1;
	color:#ec680c;
	border-radius: 5px;
	border-bottom: 3px solid #b4b4b4;
	border-left: 1px solid #b4b4b4; 
	border-right: 1px solid #b4b4b4;
	border-top: 1px solid #b4b4b4; 
	box-shadow: 0px 0px 0 0 #dcdcdc inset;
}

	 /*cajas */ 
section {
	width:1200px;
	margin: 30px auto 0;
} 

#frase h2{ 
	color: #C63;
	text-align: center;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:18px;
}
 
#cajas {
	padding-top:20px;
	width:1170px;
	margin: 0 auto 50px;
}

#caja1 {
	background: url(img/caja-1.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	margin-top:30px;
	display:inline-block;
	margin-left:75px;

	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}
 
#caja1:hover { 
	background:url(img/caja-1-hover.png);
 	background-repeat:no-repeat;
}

#caja2 {
	background: url(img/caja-2.png);
	width:300px;
	height:390px;
	margin-top:30px;
	display:inline-block;
	margin-left:70px;

	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}

#caja2:hover {
	background:url(img/caja-2-hover.png);
	background-repeat:no-repeat;
}
	 
#caja3 {
	background: url(img/caja-3.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	margin-top:30px;
	display:inline-block;
	margin-left:70px;
	
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;	  
}

#caja3:hover {
	background:url(img/caja-3-hover.png);
	background-repeat: no-repeat;
}	 

/* texto*/ 

 #contenido {
	border:1px;
	margin:auto;
	background:#F0F1F2;
	width:950px;
	height:340px;
	border-radius:8px ;
	padding:10px 30px 30px 50px;
}
	 
#caja h1 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h2 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja h4 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja p {
	width:940px;
	margin-top:18px;
	font-family:'Century Gothic Bold Italic',arial, helvetica, lucida;
	font-size:14px;
	line-height:22px;
	font-weight: normal;	
}
	
.separador {
	clear:both;
}
	
footer  {
	margin-top: 50px;
	background:#ed6506;
	height: 150px;
	width: 100%;
}

#cont {
	width: 705px;
	margin:auto;
} 
	
.separador {
clear:both;
}

#texto2{
	width: 500px;
	float:left;
    margin-left:100px;
}

#texto2 p {
	margin:auto;
	margin-top: 5px;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: normal;
	font-style: oblique;
	font-size:13px;
	color: #7b3301;
	text-align: center;	
}

#texto2 p#arriba {
	text-align: center;	
}

#texto1 {
	float: right;
	margin-left: 150px;
	text-align: center;
	width: 683px;
	background:#f3761e;
	color:#fff;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:12px;
	border-radius: 8px;
	padding:9px 9px 9px 9px;
	border-bottom: 2px solid #8b3a03;
	border-left: 2px solid #8b3a03;
	border-right: 2px solid #8b3a03;
	margin-top: 30px; 	
}









/*960*/

@media only screen and (min-width: 769px) and (max-width: 960px) {

#fondo {
	background-image:url(img/franja.png);
	background-repeat: repeat-x;
	height: 122px;
	width:100%;
	margin-bottom: 10px;		
}


#logo {
	
	height:60px;
	width:300px;
	background-size: 100%;
	margin-left:85px;
	margin-top:30px;
	}



nav ul {
	list-style-type:none;
	margin-top:40px;
	margin-right:40px;
}
section {
	width:810px;
	margin-top:30px;
} 

#frase {
	text-align: center;
}

#frase h2{ 
	color: #c63;
	text-align:center;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:18px;
}
 
#cajas {
	padding-top:20px;
	width:810px;
	margin:auto;
	margin-bottom:-60px;
	margin-left:10px;
}

#caja1 {
 	background: url(img/caja-1.png);
	background-repeat:no-repeat;
	width:220px;
	height:400px;
	background-size:100%;
	margin-top:30px;
	display:inline-block;
	margin-left:20px;

	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}
 
#caja1:hover { 
	background:url(img/caja-1-hover.png);
	background-repeat:no-repeat;
	width:220px;
	height:400px;
	background-size:100%;
	display:inline-block;
	transition-duration:1s;
	-moz-transition-duration:1s;
	-ms-transition-duration:1s;
}

 #caja2 {
	background: url(img/caja-2.png);
	background-repeat:no-repeat;
	width:220px;
	height:400px;
	background-size:100%;
 	margin-top:30px;
 	display:inline-block;
 	margin-left:50px;
 
 	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}


#caja2:hover {
	background:url(img/caja-2-hover.png);
	background-repeat:no-repeat;
	width:220px;
	height:400px;
	background-size:100%;
	margin-top:30px;
	transition-duration:1s;
}
	 
#caja3 {
	width:220px;
	height:400px;
	background-size:100%;
	margin-top:30px;
	display:inline-block;
	margin-left:50px;
	  
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;}


#caja3:hover {background:url(img/caja-3-hover.png);
	width:220px;
	height:400px;
	background-size:100%;
	margin-top:30px;
	background-repeat: no-repeat;
	transition-duration:1s;
}

/* texto*/ 

#contenido {
	 border:1px;
	 margin:auto;
	 background:#F0F1F2;
	 width:695px;
	 height:460px;
	 border-radius:8px ;
	 padding:10px 30px 0px 50px;
	 
}
	 
#caja h1 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h2 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja h4 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja p {
	width:685px;
	font-size:14px;
	line-height:22px;
	font-family:'Century Gothic Bold Italic',arial, helvetica, lucida;
	font-weight: normal;
}
	
.separador {
	clear:both;
}
	
footer  {
	margin-top: 50px;
	background:#ed6506;
	height: 150px;
	width: 100%;
}

#cont {
	width: 705px;
	margin:auto;
} 
	
.separador {
	clear:both;
}
	
#texto2{
	width: 500px;
	float:left;
	margin-left: 90px;
	margin-top: 10px;
}

#texto2 p {
	margin:auto;
	margin-top: 5px;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: normal;
	font-style: oblique;
	font-size:13px;
	color: #7b3301;
	text-align: center;
}

#texto2 p#arriba {
	text-align: center;
}

#texto1 {
	float: right;
	margin-left: 10px;
	text-align: center;
	width: 683px;
	background:#f3761e;
	color:#fff;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:12px;
	border-radius: 8px;
	padding:9px 9px 9px 9px;
	border-bottom: 2px solid #8b3a03;
	border-left: 2px solid #8b3a03;
	border-right: 2px solid #8b3a03;
	margin-top: 30px; 	
}

}
	





/*768*/

@media only screen and (min-width: 481px) and (max-width: 768px) {
	
#fondo {
	background-image:url(img/franjancha.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width:760px;
	height: 300px;
	margin-bottom: 20px;	
}

#logo {
	height:100px;
	width:600px;
	background-size: 100%;
	margin-left:80px;
	margin-top:60px;		
}

nav ul {
	list-style-type:none;
	margin-top:30px;
	margin-right:150px;
}
	
section {
	width:700px;
	margin-top:10px;
} 

#frase h2{ 
	color: #c63;
	width:600px;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:18px;
	text-align:center;
	margin-left:45px;
}
 
 #cajas {
	padding-top:20px;
	width:700px;
	margin:auto;
	margin-bottom:50px;
	margin-left:0px;
}

#caja1 {
 	background: url(img/caja-1.png);
 	background-repeat:no-repeat;
	width:180px;
	height:239px;
	background-size:100%;
	margin-top:30px;
	display:inline-block;
	margin-left:45px;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}
 
#caja1:hover { 
	background:url(img/caja-1-hover.png);
 	background-repeat:no-repeat;
	width:180px;
	height:239px;
	background-size:100%;
	display:inline-block;
}

 #caja2 {
	background: url(img/caja-2.png);
	background-repeat:no-repeat;
	width:180px;
	height:239px;
	background-size:100%;
 	margin-top:30px;
 	display:inline-block;
 	margin-left:30px;

	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}

#caja2:hover {
	background:url(img/caja-2-hover.png);
	background-repeat:no-repeat;
	width:180px;
	height:239px;
	background-size:100%;
 	margin-top:30px;
}
	 
 #caja3 {
	width:180px;
	height:239px;
	background-size:100%;
	margin-top:30px;
	display:inline-block;
	margin-left:30px;
	  
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s; 
}

#caja3:hover {
	background:url(img/caja-3-hover.png);
	width:180px;
	height:239px;
	background-size:100%;
	margin-top:30px;
	background-repeat: no-repeat;
	transition-duration:1s;
}

/* texto*/ 

#contenido {
	 border:1px;
	 margin:auto;
	 background:#F0F1F2;
	 width:540px;
	 height:550px;
	 border-radius:8px ;
	 padding:10px 30px 0px 50px;	 
}
	 
#caja h1 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h2 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja h4 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-size:18px;
	margin-top:30px;
	font-weight: bold;
	font-style: oblique;
}

#caja p {
	width:530px;
	font-family:'Century Gothic Bold Italic',arial, helvetica, lucida;
	font-size:14px;
	line-height:22px;
	font-weight: normal;
}
	
.separador {
	clear:both;
}
	
footer  {
	margin-top: 30px;
	background:#ed6506;
	height: 150px;
	width: 100%;
}

#cont {
	width: 600px;
	margin:auto;
} 
	
.separador {
	clear:both;
}
	
#texto2{
	width: 500px;
	float:left;
	margin-top: 10px;
	margin-left: 50px;
}

#texto2 p {
	margin:auto;
	margin-top: 5px;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: normal;
	font-style: oblique;
	font-size:13px;
	color: #7b3301;
	text-align: center;
}

#texto2 p#arriba {
	text-align: center;
}

#texto1 {
	float: right;
	margin-left: 10px;
	text-align: center;
	width: 570px;
	background:#f3761e;
	color:#fff;
	font-family:'Century Gothic',arial, helvetica, lucida;
	font-weight: bold;
	font-style: oblique;
	font-size:12px;
	border-radius: 8px;
	padding:9px 9px 9px 9px;
	border-bottom: 2px solid #8b3a03;
	border-left: 2px solid #8b3a03;
	border-right: 2px solid #8b3a03;
	margin-top: 30px; 	
}	

} 



/*480*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
	

#fondo {
	background-image:url(img/franja480.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width:480px;
	height: 200px;
	margin-bottom: 20px;	
}

#logo {
	
	height:70px;
	width:350px;
	background-size: 100%;
	margin-left:55px;
	margin-top:40px;
	
	
}




nav ul {
	list-style-type:none;
	margin-top:15px;
	margin-right:70px;
}

nav ul li {	
	padding:5px 9px 10px 0px;
	display: inline-block;
}

nav  ul li a {
	
	font-size:12px;
	
	padding:8px;
}

	
section {
	width:400px;
	margin:auto;
	margin-top:0px;
} 

#frase h2{ 
	color: #c63;
	width:400px;
	text-align: center;
	margin:auto;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: normal;
	font-style: oblique;
	margin-top:50px;
}
 
 #cajas {
	 padding-top:10px;
	 width:300px;
	 margin-bottom:50px;	 
}

#caja1 {
	background: url(img/caja-1.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	top: 330px;
	
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}
 
#caja1:hover { 
	background:url(img/caja-1-hover.png);
 	background-repeat:no-repeat;
	width:300px;
	height:390px;
}

#caja2 {
	background: url(img/caja-2.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	top: 1620px;
	
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}

#caja2:hover {
	background:url(img/caja-2-hover.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	margin-top:30px;
	transition-duration:1s;
}
	 
#caja3 {
	background: url(img/caja-3.png);
	background-repeat:no-repeat;
	width:300px;
	height:390px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	top: 2070px;
		
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}

#caja3:hover {
	background:url(img/caja-3-hover.png);
	width:300px;
	height:390px;
	margin-top:30px;
	background-repeat: no-repeat;
	transition-duration:1s;
}

#contenido {
	 width: 310px;
	 height: 830px;
	 border-radius: 0px;
	 margin-left:40px;
	 position: absolute;
	 top: 770px;
	 padding:0px 40px 0px 30px;
}

#caja h1 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h2 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h4 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
	font-size:18px;
	margin-top:30px;
}

#caja p {
	width:330px;
	font-family:'Century Gothic Bold Italic', helvetica, lucida;
	font-size:15px;
	line-height:22px;
	font-weight: normal;
}

footer  {
	margin-top: 2220px;
	background:#ed6506;
	height: 200px;
	width: 100%;
}

#cont {
	width: 300px;
	margin:auto;
	} 
	
.separador {
	clear:both;}
	

#texto2{
	width: 300px;
	float:left;
	margin-left: 2px;
	margin-top: 10px;
}
#texto2 p {

	margin:auto;
	margin-top: 5px;
	font-size:13px;
	color: #7b3301;
	text-align: center;

	
}

#texto2 p#arriba {
	text-align: center;
}

#texto1 {	
	margin-right: 0px;
	text-align: center;
	width: 290px;
	font-size:12px;
	border-radius: 8px;
	padding:5px;
	margin-top: 30px; 	
}
}


/*320*/
@media only screen and (max-width: 320px) {
	
#fondo {
	background-image:url(img/franja480.png);
	background-repeat: no-repeat;
	width:320px;
	height: 200px;
	margin-bottom: 20px;	
}

#logo {
	height:70px;
	width:250px;
	background-size: 100%;
	margin-left:25px;
	margin-top:25px;
}

nav ul {
	list-style-type:none;
	margin-top:0px;
	margin-right:15px;
	text-align: center;
	width: 290px;
}

nav ul li {	
	margin-top: 5px;
	padding:5px 25px 10px 20px;
	display: inline-block;
}

nav  ul li a {
	font-size:12px;
	padding:9px;
}


section {
	width:250px;
	margin:auto;
	margin-top:30px;
} 

#frase h2{ 
	color: #c63;
	width:230px;
	text-align: center;
	margin:auto;
	font-family:'Century Gothic', helvetica, lucida;
	font-weight: normal;
	font-style: oblique;
}
 
#cajas {
	width:250px;
	margin-bottom:50px;
	margin-top:-20px; 
}

#caja1 {
	background: url(img/caja-1.png);
	background-repeat:no-repeat;
	width:210px;
	height:270px;
	margin-top:50px;
	display: block;
	margin-left:17px;
	background-size:100%;
	
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}
 

#caja1:hover { 
	background:url(img/caja-1-hover.png);
 	background-repeat:no-repeat;
	width:210px;
	height:270px;
	background-size:100%;
}

#caja2 {
	background: url(img/caja-2.png);
	background-repeat:no-repeat;
	width:210px;
	height:270px;
	position: absolute;
	left: 10.5%;
	margin-left: -150px;
	top: 1980px;
	background-size:100%;
	margin-left:20px;

	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}

#caja2:hover {
	background:url(img/caja-2-hover.png);
	background-repeat:no-repeat;
	width:210px;
	height:270px;
	margin-top:30px;
	transition-duration:1s;
	background-size:100%;
}
	 
 #caja3 {
	background: url(img/caja-3.png);
	background-repeat:no-repeat;
	width:210px;
	height:270px;
	position: absolute;
	left: 62%;
	margin-left: -146px;
	top: 2280px;
	background-size:100%;
	
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	-webkit-transition: all 1s;
	transition: all 1s;
}


#caja3:hover {
	background:url(img/caja-3-hover.png);
	width:210px;
	height:270px;
	margin-top:30px;
	background-repeat: no-repeat;
	transition-duration:1s;
	background-size:100%;
}


#contenido {
	width: 170px;
	height: 1285px;
	border-radius: 0px;
	margin-left:43px;
	position: absolute;
	top: 690px;
	padding:0px 40px 15px 18px;
}

#caja h1 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
}

#caja h2 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
	font-size:15px;
	margin-top:30px;
}

#caja h4 { 
	font-family:'Century Gothic', helvetica, lucida;
	color:#3268b8;
	font-weight: bold;
	font-style: oblique;
	font-size:15px;
	margin-top:30px;
}

#caja p {
	width:200px;
	font-family:'Century Gothic Bold Italic', helvetica, lucida;
	font-size:15px;
	line-height:22px;
	transition-duration:3s;
	margin-top:20px;
	font-weight: normal;
}
	
footer  {
	margin-top:1970px;
	height: 200px;
	width: 100%;
}

#cont {
	width: 300px;
	margin:auto;
} 
	
.separador {
	clear:both;
}
	
#texto2{
	width: 250px;
	float:left;
	margin-left: 25px;
	margin-top: 10px;
}

#texto2 p {
	margin:auto;
	margin-top: 5px;
	font-size:13px;
	color: #7b3301;
	text-align: center;
}

#texto2 p#arriba {
	text-align: center;
}

#texto1 {
	margin-right: 20px;
	text-align: center;
	width: 250px;
	font-size:12px;
	border-radius: 8px;
	padding:5px;
	margin-top: 30px; 	
}
		
}