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

body 
{
    margin: 0;
    padding: 0;
    background: url(../images/water-1246527_1920.jpg) no-repeat fixed 0% 30%;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    flex-wrap: wrap;
    font-family: 'Dancing Script', cursive;

}
.clear
{
    clear:both;
}

header 

{
    padding-left: 15px;
    padding-right: 15px;
    margin:20px auto;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-self: flex-start;
    width: 50%;
}

header .navbar {

   display:flex;
   flex-direction: column;
   justify-content: space-between;
   width:100%;
   margin-top: 0px;
}


header .drinks ,
header .about,
header .special ,
header .contact
{
justify-content: flex-end;
width: 48%;
margin-left: 2%;
}


header .navbar .heading
{
    font-weight: bold;
    text-align: center;
    background:#fff;
    color:#0e7e8b;
    margin-bottom: 30px;
    font-size: 50px;
    text-align: center;
    width:90%;
}


header .navbar  p 
{ 
    color:#0e7e8b;
    background-color:white;
    display:inline;
}


header .navbar i 
{
    color:#0e7e8b;
    
}


header .navbar nav {
    width: 90%;
}

header .navbar nav ul {
   
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

header .navbar nav ul li 
{
    list-style-type: none;
    width:48%;
    margin-bottom: 5%;
}


header .navbar li a
{
    padding:10px;
    display:inline-block;
    width: 100%;
    background-color: white;
}


header .navbar ul li.active a,
header .navbar ul li.active a i

{
    background-color:#0e7e8b;
    color:white;
    
}


header .navbar ul li.active a p
{
    background-color:#0e7e8b;
    color:white;
}


.container {
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    margin:20px auto;
    padding-left: 15px;
    padding-right: 15px;
}


.container .drinks {
   align-self: flex-start;
   padding: 0;
   margin:20px auto;
   width:87%;
   margin-left: 23px;
}

nav.drinks ul 
{
    margin: 0;
    width: 100%;
    height: 100%;
    align-items:center;
    text-align: center;
    flex: auto;
    display:flex;
    flex-direction: row;   
}

nav.drinks ul li 
{
    display:inline-block;
    list-style-type: none;
    background-color:rgba(14,28,28,.8);
    flex: auto;
    padding:10px
}


nav.drinks ul li a
{
    display: inline-block;
    width:100%;
    padding: 10px;
    text-align: justify;
    padding-left: 10px;
}

a
{
text-decoration:none;
font-size: 20px;
font-weight: bold;
}


nav.drinks ul li a:link
{
    color:white;
}


nav.drinks ul li.active a
{
    color:#34d4e6
}


nav.drinks ul li a:hover
{
text-decoration:underline;
color:#34d4e6
}


a:visited{
    color:white
    
}



.container .hotcoffe figure ,
.container .fruitjuice figure ,
.container .icecoffe figure
{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;
    margin-bottom: 10px;
    height: 170px;
    display:none
}



.icecoffe 
,.hotcoffe,
.fruitjuice
{
    margin-right: 2%;
    display:none;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    width:90%;
}


.icecoffe figure img,
.hotcoffe figure img,
.fruitjuice figure img
{
    margin-left:4%;
    width: 27%;
    height: 170px;
}

.icecoffe figcaption,
.hotcoffe figcaption,
.fruitjuice figcaption
{
    width:70%;
    background-color: rgba(14,28,28,.9);
    color:white;
    height:100%;
}

.icecoffe figcaption .price,
.hotcoffe figcaption .price,
.fruitjuice figcaption .price
{
color:#0e7e8b;
text-align: right;
padding: 10px;
font-size: 23px;
}

.icecoffe figcaption h2,
.hotcoffe figcaption h2,
.fruitjuice figcaption h2
{
    color:rgb(245, 239, 239);
    font-weight: bold;
    text-align: left;
    padding:2px;
    margin-top:-10%;
    margin-left: 2%;
}


.icecoffe figcaption p,
.hotcoffe figcaption p,
.fruitjuice figcaption p
{
    color:rgba(221, 220, 220, 0.945);
    font-weight:normal;
    text-align: left;
    padding:1px;
    margin:3% 2%;
    font-size: 15px;
    font-family: 'Dancing Script', cursive;
font-family: 'Lobster Two', cursive;

}

.icecoffe .active li
,.hotcoffe .active li
,.fruitjuice .active li
{
    color:#34d4e6
}


.icecoffe.active figure
,.hotcoffe.active figure
,.fruitjuice.active figure
{
    display: flex;
}

.icecoffe.active
,.hotcoffe.active 
,.fruitjuice.active 
{
    display:flex
}




.about,
.special{
    height:100%;
    display:flex;
    flex-direction: column;
    align-items: space-evenly;
    width:90%;
    margin-top: 20px;

}

.about .aboutWave 
{
height: 50%;
width:94%;
background-color: rgba(14,28,28,.9);
margin-bottom: 10%;
margin-left: 6%;
}


.about .howWave 
{
 height:50%;
 width:94%;
 margin-left: 6%;
 background-color: rgba(14,28,28,.9);
 margin-bottom: 30%;

}

.center {
    width:100%;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    
}


.about h2,
.contact h2 {
    color: #0e7e8b;
    text-align: center;
    padding: 20px;
}
.about .aboutWave img 
{
    width:200px;
    height:150px;
    margin-left: 1%;
    margin-bottom:2%;
    
}

.about .aboutWave p 
{
width:60%;
color:white;
font-size: 17px;
margin-right: 2%;
line-height: 1.4rem;

}

.about .howWave img 
{
    width:200px;
    height:150px;
    margin-right: 1%;
    margin-bottom:2%;
    
}

.about .howWave p 
{

width:60%;
color:white;
font-size: 17px;
margin-left: 2%;
line-height: 1.4rem;

}

.special{
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 5%;

}
.special figure 
{
    width: 50%;
    margin-bottom: 5%;
    height:400px

}

.special figure img 
{
    width:70%;
    height:150px;
}

.special figure figcaption
{
    width:70%;
    background-color:rgba(14,28,28,.9);
    margin-top:-6px;
}
.special figure figcaption h2 i 
{
    color:white;
    font-size: 20px;
    cursor:pointer;
}
.special figure figcaption h2 i.active
{
    color:rgb(250, 110, 17);
}
.special figure figcaption h2
{
    padding: 10px;
    color:#0e7e8b;
    
}

.special figure figcaption p.des
{
    color:white;
    padding: 10px;
    height:150px;
    display: none;
    
}

.contact {
    margin-top: 25px;
    width: 100%
}

.contact .aboutcont 

{
    width:90%;
    text-align: center;
    margin-bottom: 5%;
    background-color: rgba(14,28,28,.8);
    height: auto;
    margin-left: 2%;
    color:white;
    position: relative;
    padding: 10px;
}

.contact .aboutcont img
{
    width:100px;
    height:100px;
    border-radius: 50%;
    position:absolute;
    top:-40px;
    left:-9px;
}
.contact .aboutcont a
{
    display:block;
    color:white;
    text-decoration:none;
    margin-bottom: 2%;

}
.contact form {
 

    width:90%;
    background-color: rgba(14,28,28,.8);
    height: auto;
    margin-left: 2%;
    padding: 1%;
    

}
form input,
form button ,
form textarea{
    display:block;
    margin:3% 14% ;
    width:60%;
    background-color:transparent;
    border:none;
    border-bottom: 2px solid rgb(238, 227, 227);
    color:white;
    font-size:16px;
    padding:.5%;
    outline:none

}

form button 
{
    background-color: white;
    color:#0e7e8b;
    font-size: 20px;
    font-weight: bold;

}


footer {
    background-color:rgba(14,28,28,.8);
    color:white;
    text-align: center;
    width:100%;
    padding:10px;
    margin-bottom: 0px;
    

}

footer span {
    color:#0e7e8b;
    font-size: 23px;
}

.header .drinks ul li.active a{
    color:#34d4e6;
    text-decoration: underline;
}

.contact 
{
    margin-bottom: 85px;
}


@media(max-width:767px){ /*Mobile screen (extral small in Bootstrap )*/

    header {
        width: 767px;
        align-self: center;
        display: flex
    }
    
    header .drinks ,
    header .about,
    header .special ,
    header .contact
    {
    width: 767px;
    }
    
    header .navbar
    {

       width: 100%;
     
    }
    
    header .navbar .heading    {

        font-size: 35px;
        text-align: center;
        width:95%;
        padding:10px
     
    }
    
    
    header .navbar nav {
        width: 95%;

       
    }
    
    header .navbar nav ul {
        flex-direction: column;
    }
    
    header .navbar nav ul li 
    {
        text-align: justify;

        width:100%;
    }
       
    header .navbar nav ul li a
    {
      
    padding-left: 40%;
    }

    nav.drinks ul li 
    {
        
        padding:5px;
    }


    nav.drinks ul li a
    {
    
        padding: 5px;
        font-size: 16px;
    
    }


    .container .drinks {

        width: 100%;
        margin-left: 0px;
        margin-bottom: 10%
    }
    .container .drinks ul
{
    width: 95%
}
    .icecoffe figcaption .price,
    .hotcoffe figcaption .price,
    .fruitjuice figcaption .price

    {
    padding: 10px;
    font-size: 19px;
    }

    .icecoffe figcaption h2,
    .hotcoffe figcaption h2,
    .fruitjuice figcaption h2
    {
        padding:2px;
        margin-top: -8%;
        font-size: 19px;
        width: 204px;
        word-wrap: break-word
        
    }


    .icedCofe figcaption p,
    .hotcoffe figcaption p,
    .fruitjuice figcaption p
    {
        
        font-size: 15px;

    }


                
    .container .hotcoffe figure ,
    .container .fruitjuice figure ,
    .container .icecoffe figure
    {
        display: flex;
        flex-direction: column;
        justify-content:space-evenly;
        align-items: center;
        margin-bottom: 30%;
        height: 300px;
        display:none;
        margin-top: 30%;
    }



.icecoffe 
,.hotcoffe,
.fruitjuice
{
    margin-right: 0%;
    width:100%;
    margin-left: 0%;
    display:none
}
.about,
.special{
    width: 95%;
    margin-left: 0%;
}

.icecoffe figure img,
.hotcoffe figure img,
.fruitjuice figure img
{
    margin-left:0%;
    width: 90%;
    height:250px
}

.icecoffe figcaption,
.hotcoffe figcaption,
.fruitjuice figcaption
{
    width:90%;
    height:auto;
    padding: 10px;
}
.icecoffe.active figure
,.hotcoffe.active figure
,.fruitjuice.active figure
{
    display: flex;
}

.icecoffe.active
,.hotcoffe.active 
,.fruitjuice.active 
{
    display:flex
}


.about .aboutWave ,
.about .howWave 

{
height: 50%;
width:100%;
margin-bottom: 10%;
margin-left: 0%;
}


.center {
    width:100%;
    display:flex;
    flex-direction: column;    
}

.about .aboutWave img ,
.about .howWave img 
{
    width:100%;
    height:220px;
    margin-left: 0%;
    margin-bottom:2%;
    margin-right: 0%;
    
}

.about .aboutWave p ,
.about .howWave p 

{
width:100%;
padding: 20px;

}

.about .howWave img 

{
    order: -1;
}
.special{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between
}
.special figure 
{
    width: 50%;
    margin-bottom: -14%;
    height:400px

}

.special figure img 
{
    width:97%;
    height:150px;
}

.special figure figcaption
{
    width:97%;
    background-color:rgba(14,28,28,.9);
    margin-top:-6px;
}


.container {
    width:100%;
    margin-left: 0%;
}
.contact {
    width: 95%
}

.contact .aboutcont 

{
    width: 100%;
    padding: 20px;
}

.contact .aboutcont a
{
    margin-bottom: 5%;
    font-size: 16px;
    font-weight: 300;
}

.contact form 

{
     width:100%;
    padding: 20px;
}


form input,
form button ,
form textarea{
   
    width:80%;
 
    margin-bottom: 20px;

}



footer {
   
    width:100%;
font-size: 14px;
    

}

footer span {
    color:#0e7e8b;
    font-size: 16px;
}


}



@media(min-width:768px){ /*(small screen  in Bootstrap )*/

    .container {
        width:750px
    }

    header {
        width: 768px;
        align-self: center;
        display: flex
    }
    
    header .drinks ,
    header .about,
    header .special ,
    header .contact
    {
    width: 768px;
    }
    
    header .navbar
    {

       width: 100%;
     
    }
    
    header .navbar .heading    {

        width:95%;
        padding:10px
     
    }
    
    
    header .navbar nav {
        width: 95%;

       
    }
    

    header .navbar nav ul li 
    {
      
        width:48%;
    }

    nav.drinks ul li 
    {
        
        padding:5px;
    }


    nav.drinks ul li a
    {
    
        padding: 5px;
        font-size: 16px;
    }

    .container .drinks {

        width: 100%;
        margin-left: 0px;
        margin-bottom: 10%
    }
    .container .drinks ul
{
    width: 95%
}
    .icecoffe figcaption .price,
    .hotcoffe figcaption .price,
    .fruitjuice figcaption .price

    {
    padding: 10px;
    font-size: 19px;
    }

    .icecoffe figcaption h2,
    .hotcoffe figcaption h2,
    .fruitjuice figcaption h2
    {
        padding:2px;
        margin-top: -13%;
        font-size: 19px;
        width: 204px;
        word-wrap: break-word
        
    }


    .icedCofe figcaption p,
    .hotcoffe figcaption p,
    .fruitjuice figcaption p
    {
        
        font-size: 15px;

    }




.icecoffe 
,.hotcoffe,
.fruitjuice
{
    margin-right: 0%;
    width:95%;
    margin-left: 0%;
    display:none
}


    .icedCofe figure img,
    .hotcoffe figure img,
    .fruitjuice figure img
    {
        
        margin-left: 0%;
        width: 30%;

    }

    .about,
    .special{
        width: 95%;
        margin-left: 0%;
    }
    
    .about .aboutWave ,
    .about .howWave 
    
    {
    width:100%;
    margin-left: 0%;
    
    }
    
    

.icecoffe.active figure
,.hotcoffe.active figure
,.fruitjuice.active figure
{
    display: flex;
}

.icecoffe.active
,.hotcoffe.active 
,.fruitjuice.active 
{
    display:flex
}


.special{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
    margin-bottom: 1%;
}
.special figure 
{
    width: 49%;
    margin-bottom: 1%;
    height:400px;


}

.special figure img 
{
    width:97%;
    height:150px;
}

.special figure figcaption
{
    width:97%;
    background-color:rgba(14,28,28,.9);
    margin-top:-6px;
}

.container {
    width:100%;
    margin-left: 0%;
}
.contact {
    width: 95%
}

.contact .aboutcont 

{
    width: 100%;
    padding: 20px;
}

.contact .aboutcont a
{
    margin-bottom: 5%;
    font-size: 19px;
    font-weight: 300;
}
.contact .aboutcont img {
    width: 150px;
    height:150px;
    top:-40px;
    left:-20px
}

.contact form 

{
     width:100%;
    padding: 20px;
}


form input,
form button ,
form textarea{
   
    width:80%;
 
    margin-bottom: 20px;

}



footer {
   
    width:100%;
font-size: 16px;
    

}

footer span {
    color:#0e7e8b;
    font-size: 18px;
}


}

@media(min-width:992px){ /*(mideum screen  in Bootstrap )*/
    .container {
        width:49%
    }

    .container {
        width:970
    }

    header {
        width: 992px;
        align-self: center;
        display: flex
    }
    
    header .drinks ,
    header .about,
    header .special ,
    header .contact
    {
    width: 992px;
    }
    
    header .navbar
    {

       width: 100%;
     
    }
    
    header .navbar .heading    {

        width:95%;
        padding:10px
     
    }
    
    
    header .navbar nav {
        width: 95%;
       
    }
    

    header .navbar nav ul li 
    {
      
        width:48%;
    }

    nav.drinks ul li 
    {
        
        padding:5px;
    }


    nav.drinks ul li a
    {
    
        padding: 5px;
        font-size: 20px;
    }

    .container .drinks {

        width: 100%;
        margin-left: 0px;
        margin-bottom: 10%
    }
    .container .drinks ul
    {
        width: 95%
    }

    .icecoffe figcaption .price,
    .hotcoffe figcaption .price,
    .fruitjuice figcaption .price

    {
    padding: 10px;
    font-size: 19px;
    }

    .icecoffe figcaption h2,
    .hotcoffe figcaption h2,
    .fruitjuice figcaption h2
    {
        padding:2px;
        margin-top: -8%;
        font-size: 19px;
        width: 204px;
        word-wrap: break-word
        
    }


    .icedCofe figcaption p,
    .hotcoffe figcaption p,
    .fruitjuice figcaption p
    {
        
        font-size: 15px;

    }




    .icecoffe 
    ,.hotcoffe,
    .fruitjuice
    {
        margin-right: 0%;
        width:95%;
        margin-left: 0%;
        display:none
    }


        .icedCofe figure img,
        .hotcoffe figure img,
        .fruitjuice figure img
        {
            
            margin-left: 0%;
            width: 30%;

        }

    .about,
    .special{
        width: 95%;
        margin-left: 0%;
    }

    .about{
        margin-bottom: 10%;
    }
        .about .aboutWave ,
        .about .howWave 

        {
        width:100%;
        margin-left: 0%;
    }


    .icecoffe.active figure
    ,.hotcoffe.active figure
    ,.fruitjuice.active figure
    {
        display: flex;
    }

    .icecoffe.active
    ,.hotcoffe.active 
    ,.fruitjuice.active 
    {
        display:flex
    }


    .special{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:space-between;
        margin-bottom: 1%;
        width:90%;
        margin-left: 5%;
    }

.special figure 
{
    width: 44%;
    margin-bottom: 10%;
    height:400px;


}

.special figure img 
{
    width:97%;
    height:200px;
}

.special figure figcaption
{
    width:97%;
    background-color:rgba(14,28,28,.9);
    margin-top:-6px;
}


.container {
    width:100%;
    margin-left: 0%;
}
.contact {
    width: 95%
}

.contact .aboutcont 

{
    width: 100%;
    padding: 20px;
}
.contact .aboutcont img {
    width: 150px;
    height:150px;
    top:-40px;
    left:-30px
}
.contact .aboutcont a
{
    margin-bottom: 5%;
    font-size: 22px;
    font-weight: 300;
}

.contact form 

{
     width:100%;
    padding: 20px;
    margin-bottom: 14%;
}


form input,
form button ,
form textarea{
   
    width:80%;
 
    margin-bottom: 20px;

}



footer {
   
    width:100%;
font-size: 16px;
padding: 20px;
    

}

footer span {
    color:#0e7e8b;
    font-size: 18px;
}





}




@media(min-width:1200px){ 
    .container {
        width:49%
    }


    header 

    {
        padding-left: 15px;
        padding-right: 15px;
        margin:20px auto;
        display:flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-self: flex-start;
        width: 50%;
    }
    
    header .navbar {
    
       display:flex;
       flex-direction: column;
       justify-content: space-between;
       width:100%;
       margin-top: 20px;
    }
    
    
    header .drinks ,
    header .about,
    header .special ,
    header .contact
    {
    justify-content: flex-end;
    width: 48%;
    margin-left: 2%;
    }
    
    
    header .navbar .heading
    {
        font-weight: bold;
        text-align: center;
        background:#fff;
        color:#0e7e8b;
        margin-bottom: 30px;
        font-size: 40px;
        text-align: center;
        width:90%;
    }
    
    
    header .navbar  p 
    { 
        color:#0e7e8b;
        background-color:white;
        display:inline;
    }
    
    
    header .navbar i 
    {
        color:#0e7e8b;
        
    }
    
    
    header .navbar nav {
        width: 90%;
    }
    
    header .navbar nav ul {
       
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: center;
    }
    
    header .navbar nav ul li 
    {
        list-style-type: none;
        width:48%;
        margin-bottom: 5%;
    }
    
    
    header .navbar li a
    {
        padding:10px;
        display:inline-block;
        width: 100%;
        background-color: white;
    }
    
    
    header .navbar ul li.active a,
    header .navbar ul li.active a i
    
    {
        background-color:#0e7e8b;
        color:white;
        
    }
    
    
    header .navbar ul li.active a p
    {
        background-color:#0e7e8b;
        color:white;
    }
    
    
    .container {
        display: flex;
        flex-direction: column;
        justify-content:space-evenly;
        margin:20px auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    
    .container .drinks {
       align-self: flex-start;
       padding: 0;
       margin:20px auto;
       width:96.5%;
       margin-left: 3.5%
    }
    
    nav.drinks ul 
    {
        margin: 0;
        width: 100%;
        height: 100%;
        align-items:center;
        text-align: center;
        flex: auto;
        display:flex;
        flex-direction: row;   
    }
    
    nav.drinks ul li 
    {
        display:inline-block;
        list-style-type: none;
        background-color:rgba(14,28,28,.8);
        flex: auto;
        padding:10px
    }

    
    .container .hotcoffe figure ,
    .container .fruitjuice figure ,
    .container .icecoffe figure
    {
        display: flex;
        flex-direction: row;
        justify-content:space-evenly;
        align-items: center;
        margin-bottom: 10px;
        height: 200px;
        display:none
    }
    
    
    
    .icecoffe 
    ,.hotcoffe,
    .fruitjuice
    {
        margin-right: 2%;
        display:none;
        display: flex;
        flex-direction: column;
        justify-content:space-evenly;
        width:95%;
    }
    
    
    .icecoffe figure img,
    .hotcoffe figure img,
    .fruitjuice figure img
    {
        margin-left:4%;
        width: 30%;
        height: 200px;
    }
    
    .icecoffe figcaption,
    .hotcoffe figcaption,
    .fruitjuice figcaption
    {
        width:70%;
        background-color: rgba(14,28,28,.9);
        color:white;
        height:200px;
    }
    
    .icecoffe figcaption .price,
    .hotcoffe figcaption .price,
    .fruitjuice figcaption .price
    {
    color:#0e7e8b;
    text-align: right;
    padding: 10px;
    font-size: 23px;
    }
    
    .icecoffe figcaption h2,
    .hotcoffe figcaption h2,
    .fruitjuice figcaption h2
    {
        color:rgb(245, 239, 239);
        font-weight: bold;
        text-align: left;
        padding:2px;
        margin-top:-10%;
        margin-left: 2%;
    }
    
    
    .icecoffe figcaption p,
    .hotcoffe figcaption p,
    .fruitjuice figcaption p
    {
        color:rgba(250,250,250,.5);
        font-weight: bold;
        text-align: left;
        padding:1px;
        margin:3% 2%;
        font-size: 15px;
    
    }
    
    .icecoffe .active li
    ,.hotcoffe .active li
    ,.fruitjuice .active li
    {
        color:#34d4e6
    }
    
    
    .icecoffe.active figure
    ,.hotcoffe.active figure
    ,.fruitjuice.active figure
    {
        display: flex;
    }
    
    .icecoffe.active
    ,.hotcoffe.active 
    ,.fruitjuice.active 
    {
        display:flex
    }
    
    
    
    
    .about,
    .special{
        height:100%;
        display:flex;
        flex-direction: column;
        align-items: space-evenly;
        width:90%;
        margin-top: 20px;
    
    }
    
    .about .aboutWave 
    {
    height: 50%;
    width:94%;
    background-color: rgba(14,28,28,.9);
    margin-bottom: 10%;
    margin-left: 6%;
    }
    
    
    .about .howWave 
    {
     height:50%;
     width:94%;
     margin-left: 6%;
     background-color: rgba(14,28,28,.9);
     margin-bottom: 30%;
    
    }
    
    .center {
        width:100%;
        display:flex;
        flex-direction: row;
        justify-content:space-between;
        
    }
    
    
    .about h2,
    .contact h2 {
        color: #0e7e8b;
        text-align: center;
        padding: 20px;
    }
    .about .aboutWave img 
    {
        width:200px;
        height:150px;
        margin-left: 1%;
        margin-bottom:2%;
        
    }
    
    .about .aboutWave p 
    {
    width:50%;
    color:white;
    font-size: 17px;
    margin-right: 2%;
    line-height: 1.4rem;
    
    }
    
    .about .howWave img 
    {
        width:200px;
        height:150px;
        margin-right: 1%;
        margin-bottom:2%;
        
    }
    
    .about .howWave p 
    {
    
    width:50%;
    color:white;
    font-size: 17px;
    margin-left: 2%;
    line-height: 1.4rem;
    
    }
    
    .special{
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: 5%;
    
    }
    .special figure 
    {
        width: 50%;
        margin-bottom: 5%;
        height:400px
    
    }
    
    .special figure img 
    {
        width:70%;
        height:150px;
    }
    
    .special figure figcaption
    {
        width:70%;
        background-color:rgba(14,28,28,.9);
        margin-top:-6px;
    }
    .special figure figcaption h2 i 
    {
        color:white;
        font-size: 20px;
        cursor:pointer;
    }
    .special figure figcaption h2 i.active
    {
        color:rgb(250, 110, 17);
    }
    .special figure figcaption h2
    {
        padding: 10px;
        color:#0e7e8b;
        
    }
    
    .special figure figcaption p.des
    {
        color:white;
        padding: 10px;
        height:150px;
        display: none;
        
    }
    
    .contact {
        margin-top: 25px;
        width: 100%
    }
    
    .contact .aboutcont 
    
    {
        width:90%;
        text-align: center;
        margin-bottom: 5%;
        background-color: rgba(14,28,28,.8);
        height: auto;
        margin-left: 2%;
        color:white;
        position: relative;
        padding: 10px;
    }
    
    .contact .aboutcont img
    {
        width:100px;
        height:100px;
        border-radius: 50%;
        position:absolute;
        top:-25px;
        left:-9px;
    }
    .contact .aboutcont a
    {
        display:block;
        color:white;
        text-decoration:none;
        margin-bottom: 2%;
    
    }
    .contact form {
     
    
        width:90%;
        background-color: rgba(14,28,28,.8);
        height: auto;
        margin-left: 2%;
        padding: 1%;
        
    
    }
    form input,
    form button ,
    form textarea{
        display:block;
        margin:3% 14% ;
        width:60%;
        background-color:transparent;
        border:none;
        border-bottom: 2px solid rgb(238, 227, 227);
        color:white;
        font-size:16px;
        padding:.5%;
        outline:none
    
    }
    
    form button 
    {
        background-color: white;
        color:#0e7e8b;
        font-size: 20px;
        font-weight: bold;
    
    }
    
    
    footer {
        background-color:rgba(14,28,28,.8);
        color:white;
        text-align: center;
        width:100%;
        padding:10px;
        margin-bottom: 0px;
        
    
    }
    
    footer span {
        color:#0e7e8b;
        font-size: 23px;
    }
    
    .header .drinks ul li.active a{
        color:#34d4e6;
        text-decoration: underline;
    }
    
    .contact 
    {
        margin-bottom: 85px;
    }
    


}