@font-face {
    font-family:'Playfair Display', serif;
    
}

@font-face {
    font-family:'Hind Madurai', sans-serif;

}

* {
    box-sizing: border-box;
}

html { 
position: relative;
margin: 0;
padding: 0;
overflow-y: auto;  <------
overflow-x: hidden; <-----
text-align: left;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: 'Hind Madurai',  sans-serif;
    
}

a:visited {text-decoration:none;color: #ffffff;}
a:link {text-decoration:none;color: #ffffff;}

.header {
    padding: 15px;
    height: 130px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 1px;
    margin-bottom: 1px;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    text-align: center;
    padding: 15px 0px 0px 0px;

}
/*SOCIALES*/
#twitter 
{
    background:#3aadef;
    transition: all 1s ease 0.0s;
}

#twitter:hover 
{
    background:#603a11;
    transition: all 1s ease 0.0s;
}

#twitter img 
{
    margin-left:42px;
    text-align:right;
}
  
    
#facebook 
{
    background:#3a5998;
    transition: all 1s ease 0.0s;
}

#facebook:hover 
{
    background:#603a11;
    transition: all 1s ease 0.0s;
}

#facebook img 
{
    margin-left:42px;
    text-align:right;
}   

#googleplus 
{
    background:#dd4b38;
    transition: all 1s ease 0.0s;
}

#googleplus:hover 
{
    background:#603a11;
    transition: all 1s ease 0.0s;
}

#googleplus img 
{
    margin-left:42px;
    text-align:right;
}
/* wrapper */
#wrapper {
    height: 100%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* container */
#container{
    height: 350px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
#container2{
    height: 350px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
#barrabase{
    width:110%;
    height: 110px;
    position: fixed;
    top:-10px;
    left:-10px;
    background-color: rgba(77,77,77,.9);
}

#barramini{
    width:110%;
    height: 50px;
    position: fixed;
    top:102px;
    left:-10px;
    background-color: rgba(77,77,77,.9);
}

/*DESPLEGABLE*/
#des2{
    background:rgba(77,77,77,.9);
}
#des3{
    background:rgba(77,77,77,.9);
}
#imagenback
{
    position:absolute;
    height: 280px;
    width: 1256px;
    left:0px;
    top:0px;
}
#imagenback img
{
    z-index: -1;
}
/*PC*/
@media only screen and (min-width:1025px){
    #m1, #m2, #m3
    {
        width: 140px;
    }
    .cafe{
        font-size: 50px;
        color: rgba(96,58,17,1);
    }
    .cafe2{
        font-size: 20px;
        color: rgba(96,58,17,1);
    }
    #fuerte{
        font-size: 15px;
        color:#484545;
        font-weight:600;
    }

    h1{
        font-family: 'Playfair Display', serif;
        font-size: 50px;
        color: #ffffff;
    }
    h2{
        font-family: 'Playfair Display', serif;
        font-size: 13px;
        color: #ffffff;
    }
    h3
    {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color:#484545;
    }
    h4
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 14px;
        color:#484545;
    }
    h5
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 10px;
        color:#828080;
    }

   .b1 {
        font-family: 'Hind Madurai', sans-serif;
        font-style: 900;
    }
   
  .b2 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
    }
    .b3{
        font-family: 'Playfair Display', serif;
        font-weight: 700i;
    }
    
    #identidad{
        position: absolute;
        left:18%;
        top:0px;
    }
    #logo1{
        position: absolute;
        top:20px;
        left:70%;
    }
    #menu{
        position: absolute;
        left: 18%;
        top: 5px;
        
    }
    #menucel{
        display:none; 
    }
    #botoc{
        position: absolute;
        left: 18%;
        top: 5px;
        width: 140px;
        height: 50px;
    }
    #li1{
        position: absolute;
        top:0px;
        left: 0px;
        width: 140px;
        height: 50px;
    }
    #li2{
        position: absolute;
        top:0px;
        left: 150px;
    }
    #li3{
        position: absolute;
        top:0px;
        left: 240px;
    }

    .italica{
        font-family: "PT+Sans", serif;
        font-size: 60px;
        color: #ffffff;
        font-style: italic;
    }
}
/*TABLET*/
@media only screen and (min-width:480px) and (max-width:1024px){
    #m1, #m2, #m3
    {
        width: 100px;
    }
    .cafe{
        font-size: 50px;
        color: rgba(96,58,17,1);
    }
    .cafe2{
        font-size: 15px;
        color: rgba(96,58,17,1);
    }
    h1{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        color: #ffffff;
    }
    h2{
        font-family: 'Playfair Display', serif;
        font-size: 13px;
        color: #ffffff;
    }
    h3
    {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color:#484545;
    }
    h4
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 14px;
        color:#484545;
    }
    h5
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 10px;
        color:#828080;
    }
    .b1 {
        font-family: 'Hind Madurai', sans-serif;
        font-style: 600;
    }
   
  .b2 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
    }
    #imgff1
    {
        display: block;
        max-width: 240px;
        max-height: 300px;
        width: auto;
        height: auto; 
    }
     #imgff2
    {
        display: block;
        max-width: 240px;
        max-height: 300px;
        width: auto;
        height: auto; 
    }

    #identidad{
        position: absolute;
        left:40px;
        top:40px;
    }
    #logo1{
        position: absolute;
        top:20px;
        left:80%;
    }
    #menu{
        position: absolute;
        left: 40px;
        top: 5px;
        
    }
    #menucel{
        display:none; 
    }
    #botoc{
        position: absolute;
        top:0px;
        left: 0px;
        width: 140px;
        height: 50px;
    }
    #li1{
        position: absolute;
        top:0px;
        left: 0px;
        width: 140px;
        height: 50px;
    }
    #li2{
        position: absolute;
        top:0px;
        left: 150px;
    }
    #li3{
        position: absolute;
        top:0px;
        left: 240px;
    }

    .italica{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        color: #ffffff;
        font-style: italic;
    }
}
/*PHONE*/
@media only screen and (max-width:480px){
    #m1, #m2, #m3
    {
        width: 110px;
    }
    .cafe{
        font-size: 50px;
        color: rgba(96,58,17,1);
    }
    .cafe2{
        font-size: 17px;
        color: rgba(96,58,17,1);
    }
    .hide{display: none;}
    h1{
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        color: #ffffff;
    }
    h2{
        font-family: 'Playfair Display', serif;
        font-size: 13px;
        color: #ffffff;
    }
    h3
    {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        color:#484545;
    }
    h4
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 14px;
        color:#484545;
    }
    h5
    {
        font-family: 'Hind Madurai',  sans-serif;
        font-size: 10px;
        color:#828080;
    }
    .b1 {
        font-family: 'Hind Madurai', sans-serif;
        font-style: 600;
    }
   
  .b2 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
    }
    #imgff1
    {
        display: block;
        max-width: 240px;
        max-height: 300px;
        width: auto;
        height: auto; 
    }

    #identidad{
        position: absolute;
        left:28%;
        top:65px;
    }
    #logo1{
        position: absolute;
        top:20px;
        left:42%;
    }
    #logo1 a img{
        display: block;
        max-width: 60px;
        max-height: 95px;
        width: auto;
        height: auto;
    }
    #menu{
        display:none;
        position: absolute;
        left: 40px;
        top: 5px;
        
    }
    #menucel{
        display: block;
        position: absolute;
        left: 40%;
        top: 5px;
        
    }
    #li1{
        position: absolute;
        top:0px;
        left: 0px;
        width: 200px;
    }
    #li2{
        position: absolute;
        top:0px;
        left: 150px;
    }
    #li3{
        position: absolute;
        top:0px;
        left: 240px;
    }

    .italica{
        font-family: "PT+Sans", serif;
        font-size: 20px;
        color: #ffffff;
        font-style: italic;
    }
    #botoc2{
        width: 140px;
        height: 50px;
    }
}
/* For desktop: */
.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%;}

@media only screen and (max-width: 480px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

#des2 a:link, #des3 a:link{
	    font-family: 'Playfair Display', serif;
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
}
.cafe2 {
	cursor:pointer;
}