/* 
=====================================================================
*   Woo Media Queries
*   url: styleshout.com
*   05-02-2014
/* ================================================================== */

@media only screen and (max-width: 1730px) {
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {
	padding-top: 338px;
	}
	#memoria .row {width: 70%;}
}

/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1500px) {

	.logoarc {padding-top: 12%;}
	.logoallegra {padding-top: 12%;}
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {padding-top: 305px;}
	#memoria .row {width: 80%;}
	
   /* Hero Section
   ------------------------------------------------------------------ */
   .hero-text { width: 82%; }
   .hero-text h1 { font-size: 38px; } 
   .flex-control-paging li a {width: 25px;height: 25px;}
	
	/* Planos Section
   ------------------------------------------------------------------- */
   #planos .row{width: 90%;}
   #planos .flex-containerplanos .flexslider .descargar {background-size: cover;right: 18px;font-size: 14px;line-height: 16px;}

}
@media only screen and (max-width: 1300px) {
	body{background-position: 50% 8%;}
	/*header, #headermenu{background-position: 50% 0%;}*/
	
	.logoarc {padding-top: 14%;}
	.logoallegra {padding-top: 14%;}
	
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {padding-top: 260px;}
	
	#presentacion .row {width: 90%;}
	#memoria .row {width: 90%;}
	
}
/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1170px) {

	.logoarc {padding-top: 14%;width: 12%;}
	.logoallegra {padding-top: 14%;width: 12%;}
	.logo {width: 100%;}
	
	.section-head h1{font-size: 38px;}
	div.texto, p {font-size: 14px;}
	.plan-sign-up .button {font-size: 18px;}
	
	ul.presentacion li {font-size: 14px;}
	
	footer h3 {font-size: 16px;letter-spacing: 0px;line-height: 22px;}
	footer p {line-height: 16px;font-size: 12px;}
	footer ul li {line-height: 20px;}
	
	#presentacion .section-head p{font-size: 18px;}
	#presentacion .texto{font-size: 14px;line-height: 18px;padding: 0px;}
	#memoria .flex-containermemo .texto{line-height: 22px;}
	
   /* Hero Section
   ------------------------------------------------------------------ */
	.flex-control-paging li a {width: 20px;height: 20px;}
	
	/* Planos Section
   ------------------------------------------------------------------- */


}

/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.logoarc {padding-top: 16%;}
	.logoallegra {padding-top: 16%;}
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {padding-top: 226px;}
	#presentacion .row {width: 100%;}
	#memoria .row {width: 100%;}
	
   /* Hero Section
   ------------------------------------------------------------------ */
   .hero-text { width: 82%; }
   .hero-text h1 { font-size: 38px; } 
	.plan-title {font-size: 12px;}
	/*header, #headermenu {background-position: 50% 0%;}*/
	/* Planos Section
   ------------------------------------------------------------------- */
   #planos .text-container { width: 82%; }
   #planos .flex-containerplanos .flexslider .fotos {width: 78%;}
   #planos .flex-containerplanos .flexslider .descargar {bottom: 20px;}
}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

	/* General and Common Styles */
	.section-head h1 { font-size:35px;}
	p {line-height: 20px;font-size: 14px;}
	body {background-position: 50% 16%;}
	
   /* Header Styles
   ------------------------------------------------------------------ */
   /*header, #headermenu {	background-position: 50% 0%;}*/
   header .header-social { font-size: 18px; }
   header .header-social li { margin-right: 15px; }
   
   .section-head {background-size: 27px;background-position: 3% 20%;}

   /* Hero */
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {padding-top: 216px;}
    #hero{padding-top: 5%;background: #000;}
	
	
   /* nav-wrap */
   #nav-wrap { font-size: 10px;}
   ul#nav li {padding: 0px 1.6%;}

   /* Presentacion Section
   ------------------------------------------------------------------- */
   	
	#presentacion .row {width: 80%;}
	#presentacion .fila {}
	#presentacion .lado {width:48%;}
	#presentacion .ladoi {}
	#presentacion .ladod {}

	#presentacion .lado .foto.ub01{}
	.flexslider-presentacion .texto .parrafo {font-size: 10px;line-height: 13px;}
	.flexslider-presentacion {width: 80%;padding: 20px 20px 25px 20px;min-height: 498px;}

   /* Pricing Section
   ------------------------------------------------------------------- */
   .precios-tables { 
      width: 82%; 
      margin: 0 auto;
   }

   #precios .row {width: 100%;}
   #precios .col1{width: 14%}
	#precios .col2{width: 8%;}
	#precios .col3{width: 22%}
	#precios .col4{width: 14%}
	#precios .col5{width: 20%}
	#precios .col6{width: 20%}
	#precios .col7{width: 18%}
	
	.plan-title {font-size: 12px;}
	#memoria .row {width: 100%;}
	#memoria .lado{width:48%;}
   /* Planos Section
   ------------------------------------------------------------------- */
   #planos blockquote p { font-size: 24px; }
   #planos .flex-containerplanos .flexslider .descargar {bottom: 20px;}
   #planos .flex-containerplanos .flexslider .fotos {width: 100%;padding-bottom: 78px;}
   #planos .flex-containerplanos .flexslider .descargar {width: 20%;padding-top: 2%;padding-left: 6%;bottom: 0px;padding-right: 2%;}
   #planos .flex-containerplanos .flexslider .descargar img{float: left;width: 50%;}
   #planos .flex-containerplanos .flexslider .descargar span{float: left;width: 50%;}

   /* imagenes Section
   ------------------------------------------------------------------- */
   #imagenes h1 { margin-bottom: 18px; }
   #mc_embed_signup input[type="submit"] { width: 46%; }
   #mc_embed_signup input[type="email"] { width: 46%; }

   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { width: 33% !important; }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* General and Common Styles */
	.section-head { padding: 0 30px; }

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font-size: 11px;
      background: transparent !important;
      letter-spacing: 1.5px;  
      color: #515968;
      
      position: absolute;
      top: 0;
      right: 0;
   }
   #nav-wrap > a {	   
      text-align: left;
		border: none;            
      color: #fff;
      font-size: 12px;
      height: 54px;
      line-height: 54px; 
      float: right;     

      text-shadow: none;
      color: transparent;

      position: relative;
      top: 0px;
      right: 36px;
   }
	#nav-wrap > a:before {
	   font-family: 'FontAwesome';
      content: "\f0c9";
      margin: 0;
      font-size: 25px;
      line-height: 54px;
      text-align: left;      
      display: block; 
      float: right;     
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 24px 36px 48px 36px;
      background: #4d590d; 
      height: auto;
      display: none;
      clear: both;
      width: auto; 
            
      position: relative;
      top: 0;
      right: 30px;  

		padding: 24px 36px 48px 36px;
		background: #4d590d;
		height: auto;
		clear: both;
		position: absolute;
		right: 35px;
		top: 42px;         
	  
   }
   
   /* display toggle buttons */
	.no-js #nav-wrap:not( :target ) > a:first-of-type,
	.no-js #nav-wrap:target > a:last-of-type  {
	   display: block;
	} 
   .js #nav-wrap a { display: block; }  

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target > ul#nav  {
      display: block;           
   }

   ul#nav li {
      display: block;
      height: auto;      
      text-align: left;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted; 
   }
  
   ul#nav li a {  
      display: block;   
      width: auto;  
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 54px */
      border: none;
   }  

   /* hide social icons */
   .header-social { display: none; }
 /*header, #headermenu {	background-position: 50% 0%;}*/

   /* Header Styles
   -------------------------------------------------------------------- */
	.logo{padding-top: 8%;}

   /* Hero Section
   -------------------------------------------------------------------- */

   .hero-text { width: 92%; }
   .hero-text h1 { font-size: 31px; }
   .hero-text p { font-size: 14px; } 

   /* Hero CTA Buttons */
   #hero .buttons { margin-bottom: 30px; }
   #hero .buttons .button {
      display: block;
      width: 70%;
      margin: 0 auto 18px auto;
      font-size: 16px;
      letter-spacing: 1.5px;
   }

   /* Presentacion Section
   --------------------------------------------------------------------- */   
    #memoria .row {width: 100%;}
    #presentacion .row {width: 100%;}
	#presentacion .fila {}
	#presentacion .lado {width:100%;}
	#presentacion .ladoi {}
	#presentacion .ladod {}
	#presentacion .lado .foto.ub01{}
	
	#localizacion .row{ width: 100%;}
	.flexslider-memo { width: 100%;}
	
	.flexslider-presentacion .texto .parrafo {font-size: 10px;line-height: 12px;}
	.flexslider-presentacion .texto .foto.foto1{}
	.flexslider-presentacion .texto .foto.foto2{width:50%;margin: 0px auto;}
	.flexslider-presentacion .texto .foto.foto3{  width: 50%;  float: left;  margin: 0px 14px 10px 0px;}
   /* Pricing Section
   ------------------------------------------------------------------- */
   .precios-tables { width: 80%; }

   /* Memoria
   ------------------------------------------------------------------- */
   #memoria-wrapper {
      width: 80%;
      margin: 0 auto;
   } 
   #memoria-wrapper .columns { margin-bottom: 36px; }


   /* Planos Section
   ------------------------------------------------------------------- */
   #planos .quote-left,      
   #planos .quote-right {    
      font-size: 30px;
      margin-top: -25px;
   }
   #planos .text-container { width: 80%; }
   #planos blockquote p { 
      font-size: 20px; 
      line-height: 30px;
   }   
	.flex-direction-nav {width: 90%;}
	
   /* imagenes Section
   ------------------------------------------------------------------- */
   #mc_embed_signup { width: 90%; }
   #mc_embed_signup input[type="submit"], 
   #mc_embed_signup input[type="email"] { 
      width: 100%;
      text-align: center; 
      margin-bottom: 30px;
   }
   
   /* footer
   ------------------------------------------------------------------------ */
   footer { text-align: center; }
   footer .info { padding-right: 30px; }
   footer .info p { margin-bottom: 18px; }
   footer h3:before { text-align: center; }
   footer .right-cols {       
      width: 90% !important;
      margin: 0 auto ;
      margin-bottom: 42px; 
      text-align: center;
   }
   footer .right-cols .columns {
      float: left;       
      padding: 0 30px;    
   }
   footer .right-cols .columns:last-child { 
      clear: both; 
      float: left;
   }   

   /* Go To Top Button */
   #go-top { margin-left: -22px; }
   #go-top a {
   	width: 54px;
   	height: 54px;
      font-size: 18px;
      line-height: 54px;
   }

}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap { width: 100%; }
   #nav-wrap ul#nav { 
      width: 40%;
      float: none;
      right: 0;             
   }

   /* Hero Section
   -------------------------------------------------------------------- */
   .hero-text { width: 96%; }
   .hero-text h1 { font-size: 25px; }
   .hero-text p { font-size: 16px; } 

   /* Planos Section
   ------------------------------------------------------------------- */
   #planos .quote-left,      
   #planos .quote-right { font-size: 28px; }  
   #planos blockquote p { font-size: 20px; }

   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { padding: 0 10px; }        

}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 

    /* Hero Section
   -------------------------------------------------------------------- */
   .hero-text { width: 100%; }

   /* Pricing Section
   ------------------------------------------------------------------- */
   .precios-tables { width: 92%; }

   /* Memoria
   ------------------------------------------------------------------- */
   #memoria-wrapper { width: 92%; }  

   /* Planos Section
   ------------------------------------------------------------------- */
   #planos .text-container { width: 85%; }
   #planos blockquote p { 
      font-size: 18px; 
      line-height: 27px;
   }   

} 

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (max-width: 320px) { 
	/*header, #headermenu {background-position: 50% -12%;}*/
	#presentacion, #memoria, #planos, #imagenes, #precios, #contacto {padding-top: 110px;}
	
	#presentacion .columns{padding:0px;}
	#presentacion .lado .foto.ub01 {margin-top: 20px;}
	.flexslider-presentacion {border: 5px solid #8E8E8B;padding: 20px 10px 25px 10px;min-height:816px;}
	
	.flex-direction-nav {width: 100%;}
	.flex-direction-nav li a {font-size: 46px;}
	
	#memoria .columns{padding:0px;}
	.flexslider-memo {border: 5px solid #8E8E8B;width: 84%;padding: 12px 10px;}
	.flexslider-memo .texto {padding: 0px;font-size: 12px;}
	#memoria .flex-containermemo .texto {line-height: 16px;}
	#memoria .flex-containermemo .texto  strong, b {font-size: 12px;}
	#memoria .nota {font-size: 10px;width: 96%;margin-bottom: 10px;}
	#planos .flex-containerplanos{padding:0px;}
	#planos .flex-containerplanos .flexslider-planos{width: 80%;margin: 0 auto;}
	#planos .flex-containerplanos .flexslider .descargar {width: 71%;padding-top: 2%;padding-left: 10%;line-height: 13px;background-size: 45%;}
	
	#planos .flex-containerplanos .flexslider .descargar img {float: left;width: 20%;}
  }
@media only screen and (min-width: 768px) {
   
   #nav-wrap ul#nav { display: block !important; }

}