@import url('https://fonts.googleapis.com/css?family=Acme')
*{
    margin: 0;
    box-sizing: border-box;
}

body{
    background: #D7DBDD;
    font-family: 'Acme', sans-serif;
   margin-top: 0;
}

#contenedor{   
    
    display: flex;
    align-items: center;
    /*flex-direction: column; */
    flex-flow: column nowrap; 
    
}

header{
    
   background: linear-gradient(rgb(121,121,122),rgb(255,255,255));
    
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 100;
}

header img{
    height: 100%;  
    
}

header label{
    display: none;
}


.nav{     
    width: 50%;
    font-size: 15px;    
     
    /* flex */
    display: flex;    
    flex-direction: row; /* cuando se achica baja */
    flex-wrap: wrap; 
    align-items: center;
    
}

.nav a{
    
    padding: 10px;
    color: #ffffff; 
    background: rgba(0,0,0,0.2);
    text-decoration: none;
    text-align: center;
    
    
    /* flex */
    flex: 1 1 auto; /* para que ocupe todo el ancho del mismo tamaño */
       
}

.nav a:hover{
    background: rgba(0, 0, 0, .5);
    border-radius: 8px;
}

.nav a.activado{
    
    background: rgba(0, 0, 0, .5);
    border-radius: 8px;
}

#menu-bar{
    display: none;
}



/*---------------------------------------------------------------------*/
.baner{
    margin-top: 100px;    
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    
    
}


.baner img{
    width: 100%;
    height: 100%;
    
    
}

.baner h2{
    
    color: #ffffff;
    position: absolute;
    top: 40%;
    left: 10%;
    font-size: 45px;
    margin: 0;
}

.baner p{
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 10%;
    font-size: 30px;
    margin: 0;
}

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

.title, .title2{
    width: 90%;
    height: 50px;
    color: #1343F3;
    text-align: center;
    border-bottom: 2px solid;
    border-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;   
    
}

/*------------------*/
.ofrece{    
    
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
     
}

.ofrece .of{
    width: 300px;
    height: 200px;
    background: #ffffff;
    border: 1px solid;
    margin: 40px;
    padding: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.ofrece .of p {
    margin-top: 7px;
    
}

/*------------PROMOCIONES-------------------------*/
.promo{       
    /* flex */
    display: flex;
    
     /* cuando se achica baja */
    flex-wrap: wrap; 
    justify-content: center;
     
}

    .pro{
        background:#ffffff ;
        border: 1px solid;
        margin: 40px;
        width: 300px;
        
    }    

    .pro h3,.pro h3,.pro h3{
        background:#dddddd ;
        font-size: 18px;
        padding: 2px;
        text-align: center;
        border-bottom: 2px solid;
        margin: 0;
        }

    
    .promo ul li{
        padding: 5px;
        list-style-type:none;
        margin-left: 0;
        
     }

.promo ul{
    margin-top: 10px;
   padding-left: 10px;
}

    .promo h2{
    background: #000000;
    color: #ffffff;
    font-size: 25px;
    border-top: 5px solid #ffffff;
    border-right:  5px solid #ffffff;
    border-left:  5px solid #ffffff;
    border-color: #d3d3d3;
    font-family: arial;    
    text-align: center;
    margin: 0;
    
    }

    .promo h5{
    background: #000000;
    color: #ffffff;
    font-size: 15px;
    border-bottom: 5px solid #ffffff;
    border-right:  5px solid #ffffff;
    border-left:  5px solid #ffffff;
    border-color: #d3d3d3;
    text-align: center;
    margin: 0;
    }


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

footer{
    height: 30px;
    width: 100%;
    font-size: 10px;
    background: rgba(19,64,231,0.4);
    color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 700px) {

    .ofrece .of,.pro{
        margin: 5px;
    }
    
    .baner{    
        height: 200px;
        margin-top: 50px; 
   
    
        }
    
    .baner h2{     
    top: 20%;
    left: 10%;
    font-size: 30px;
    
}

.baner p{   
    top: 26%;
    left: 10%;
    font-size: 20px;
   
}
    
    
    
    header{
    height: 50px;  
    
    }
       
    header label{
    display: block;
    }
        
  .nav{ 
    position: absolute;      
    top: 100px;
    width: 100%;
    height: 62vh;
    background: rgba(51,51,51,0.8);    
    transition: all 0.5s;
    transform: translateX(-100%);
    }

.nav a{
    display: flex;
    align-items: center;
    width: 100%;    
    color: #ffffff;
    text-align: left;
    height: 50px;
    text-decoration: none;    
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

nav a:hover{
    background: rgba(255,255,255,0.3);
}

#menu-bar:checked ~ .nav {
    transform: translateX(0%);    
}          
}

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

    header label{
    color: #ffffff;
    float: right;
    font-size: 28px;
    margin: 8px;
    cursor: pointer;
   
}