*{
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
text-align: center;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
padding-bottom: 80px;
min-height: 100vh;
background: #f5f5e9;
}

.pres{
  padding: 60px 400px; vertical-align: middle; font-size: 24px; margin: auto;
}

footer a:link{text-decoration: none;color: #fff;}
footer a:visited{text-decoration: none;color: #fff;}
footer a:hover{text-decoration: none;color: #e7ce7f;}
footer a:active{text-decoration: none;color: #fff;}

/*navegacion*/
.menu_bar{
display: none;
}

header{
  width: 100%;
  background: #f5f5e9;
}

header nav{border-radius: 15px; background: #e7ce7f; z-index: 1000; max-width: 550px; width: 95%; margin: 20px auto;}


header nav ul {
  list-style: none;
}

header nav ul li{
  display: inline-block;
  position: relative;
  }

header nav ul li:hover{
  background: #f5f5e9;
  text-decoration: none;
}

header nav ul li a{
  color: #434343; 
  font-weight: bold;
  display: block;
  text-decoration: none;
  padding: 20px;
    text-align: left;
    font-size: 16px;
}

header nav ul li a:hover{
  color: #434343;
  text-decoration: none;
}

header nav ul li:hover .children{
display: block;

}

header nav ul li .children{
  display: none;
  background: #961b1e;
  position: absolute;
  width: 150%;
  z-index: 1000;
}

header nav ul li .children li{
  display: block;
}

header nav ul li .children li a {
  display: block;
  color: #fff;
}

header nav ul li .children li a:hover {
  display: block;
  color: #434343;
}


/*--------------------------------------------*/
/*secciones*/

figure{
border: 10px #f5f5e9 solid;
border-radius: 25px;
padding: 0;
margin:0 auto;
background: #fff;
display: block;
height: 100%;
position: relative;
}

figcaption{
  width: 100%;
  color: #999250;
  font-size: 14px;
  font-weight: bold;
  padding: 5px;
  text-align: left;
  margin: auto;
  margin-bottom: 10%;
}

h3{
color:#333  ;
padding: auto;
text-align: center;
font-weight: bold;
height: 80px;
}

.carac{
   line-height: 15px; color: #434343; font-weight: normal; margin:0 20px;list-style: disc;
}

.cat-img{
width: 100%;
margin: 0 auto;
border: 1px solid #999;
box-sizing: border-box;
}

.slogan{
  color: #961b1e;
  padding: 0;
}

footer{
width: 100%;
background: #961b1e;
margin: auto;
padding: 30px;
color: white;
font-weight: bold;
position: fixed;
bottom: 0;
z-index: 1;
font-size: 15px;
}

/*--------------------------------*/


/* Media Queries */

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}


[class*="col-"] {
  float: left;
  padding: 15px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) { 
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
.col-l-12{padding-top: 160px;}
.logo{max-width:300px; float: left; line-height: 20px;}
.slogan{  color: #961b1e;  max-width: 400px; font-size: 16px; float: left; padding-left: 20px;}
h3{background-color: #fff;color:#000;padding: auto;text-align: center;font-weight: bold;font-size: 20px;height: 80px;}
header{position: fixed;z-index: 10000;top: 0;height: 130px;}
section{margin-bottom: 100px;position: relative;}
body{padding-top: 0;}
section h3 span { 
  margin-top: -180px;        
  padding-bottom: 180px; 
  display: inline-block; 
}

.pres{
  padding: 60px 30px; vertical-align: middle; font-size: 22px;
}


.menu_bar{
  display: block;
  width: 100%;
  position: fixed;
  top:0;
  }

.menu_bar .bt-menu{
  display: block;
  padding: 20px;
  color: #434343;
  overflow: hidden;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
}

.menu_bar span{
  float: right;
  font-size: 40px;
}

header nav{
  width: 100%;
  height: 300px;
  position: fixed;
  right: 100%;
  margin: 0;
  top:120px;
  border-radius: 0;
}

header nav ul li{
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.5);
}

header nav ul li a {
  display: block;
}

header nav ul li:hover .children{
  display: none;
}

header nav ul li .children{
  width: 100%;
  position: relative;
}


}


/* Low Resolution Tablets, Mobiles (Landscape) */

@media (min-width: 400px) and (max-width:767px) and (max-height: 767px) and (orientation: landscape){
 .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
.col-l-12{padding-top: 100px;}
.logo{max-width:300px; float: left; line-height: 20px;}
.slogan{ display: none;}
h3{background-color: #fff;color:#000;padding: auto;text-align: center;font-weight: bold;font-size: 20px;height: 80px;}
header{position: fixed;z-index: 10000;top: 0;height: 100px;}
section{margin-bottom: 10px;position: relative;}
footer{position: relative;}
body{padding-top: 0;}
section h3 span { 
  margin-top: -100px;        
  padding-bottom: 100px; 
  display: inline-block;
  }

.pres{
  padding: 40px 20px; vertical-align: middle; font-size: 20px;
}

.menu_bar{
  display: block;
  width: 100%;
  position: fixed;
  top:0;
  }

.menu_bar .bt-menu{
  display: block;
  padding: 20px;
  color: #434343;
  overflow: hidden;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
}

.menu_bar span{
  float: right;
  font-size: 40px;
}

header nav{
  width: 100%;
  height: 188px;
  position: fixed;
  right: 100%;
  margin: 0;
  top:90px;
  border-radius: 0;
}

header nav ul li{
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.5);

}

header nav ul li a {
  display: block;
  font-size: 13px;
  padding: 15px;
}

header nav ul li:hover .children{
  display: none;
}

header nav ul li .children{
  width: 100%;
  position: relative;
}
}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) and (max-width: 767px) and (orientation: portrait) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  .col-l-12{padding-top: 300px;}
  .logo{  max-width:400px; line-height: 20px;}
.slogan{  color: #961b1e;  max-width: 500px;margin: auto;  font-size: 25px; padding-bottom: 20px; text-align: center;}
header {position:fixed;z-index: 1111;}
body {position: absolute;}
section {position: relative;}
section h3 span { 
  margin-top: -320px;        
  padding-bottom: 320px; 
  display: inline-block; 
}
.pres{
  padding: 40px 20px; vertical-align: middle; font-size: 20px;
}

}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) { 
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .col-l-12{padding-top: 330px;}
  .logo{max-width:500px;  line-height: 20px;}
.slogan{color: #961b1e;  max-width: 500px;margin: auto;  font-size: 25px; padding-bottom: 20px;text-align: center;}
figure{height: 500px; }
header {position:fixed;z-index: 1111;}
body {position: absolute;}
section{position:relative;}
section h3 span { 
  margin-top: -360px;        
  padding-bottom: 360px; 
  display: inline-block; 
}
.pres{
  padding: 40px 20px; vertical-align: middle; font-size: 20px;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;margin-top: 320px;}
 .logo{max-width:500px;  line-height: 20px;float: none;}
.slogan{float: none;  color: #961b1e;  max-width: 500px;margin: auto;  font-size: 25px; padding-bottom: 20px;line-height: 25px;text-align: center;}
figure{height: 450px; }
header {position:fixed;z-index: 1111;height: 320px;}
section {position: relative; margin-top:320px;margin-bottom: 50px;}
section h3 span { 
  margin-top: -360px;        
  padding-bottom: 360px; 
  display: inline-block; 
}
.pres{
  padding: 40px 200px; vertical-align: middle; font-size: 20px;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)  {
  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;}
.logo{
  max-width:450px;
  float: left;
  line-height: 20px;}
.slogan{
  max-width: 200px;
  margin: auto;
  text-align: left;
  font-size: 25px;
  float: left;
  padding-top: 35px;
  padding-left: 1%;
  line-height: 25px;}
body{max-width: 1600px;}
header{position: fixed;z-index: 10000;height:150px; max-width: 1595px}
figure{height: 550px; }
footer{margin: auto; max-width:1600px; }
header nav{float: right;margin-right: 22px;margin-top: 50px;width: 500px;height: 60px;padding: 0}
section {margin-top: 150px;margin-bottom: 50px;}
section h3 span { 
  margin-top: -180px;        
  padding-bottom: 180px; 
  display: inline-block; 
}

}