* {
    margin: 0;
    padding: 0;
}

a, a:link, a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    color: #88d0ef !important;
}

li {
    list-style-type: none;
}

h1, h2 {
    font-family: lemonMilklight;
    color: white;
    text-align: center;
    letter-spacing: 2px;
}

h2 {
    font-size: 2em;
}

i {
    font-size: 0.9em;
    font-family: LemonMilklightitalic;
    font-weight: normal;
    font-style: normal;
}

.larger {
    font-size: 3em !important;
}

@font-face {
    font-family: lemonMilk;
    src: url(../LemonMilk.otf);
}

@font-face {
    font-family: lemonMilklight;
    src: url(../LemonMilklight.otf);
}

@font-face {
    font-family: LemonMilklightitalic;
    src: url(../LemonMilklightitalic.otf);
}

/*-------GENERAL--------*/
body {
    background-color: #d7eaf6;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1.5vw;
}

@media (max-width: 600px) {
  body {
    font-size: 4vw;
  }
}

/*-------HEADER--------*/
header {
    background-color: #88d0ef;
    width: 100%;
    clear: both;
    display: inline-block;
    margin-bottom: -0.3333%;
}

header .logo {
    width: 33%;
    margin: 2% auto 2% auto;
}

header .logo h1 {
    width: 75%;
    float: left;
    margin: 4% 0 0 0;
}

header .logo img {
    width: 17.75%;
    float: left;
    margin-left: -10%;
}

header .social, header .langs {
    float: right;
    clear: both;
}

header .social li, header .langs li  {
    float: left;
}

header .social li {
    width: 40%;
    margin-left: 4%;
    margin-right: 4%;
}

header .social li img {
    width: 100%;
}

header .langs li {
    width: 50%;
}

header .langs li img {
    width: 100%;
    -webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
    
}

header .langs li img:hover {
     width: 110%;
 }

header .social {
    width: 5%;
}    

header .social img {
    -webkit-transition: transform 0.5s; /* Safari */
    transition: transform 0.5s;
}

header .social img:hover {
    transform:  rotate(15deg);
    -webkit-transform:  rotate(15deg);
    
}

 header .langs {
    width: 5%;
}

@media (max-width: 600px) { 
    header {
        position: relative;
        margin-bottom: -2%;
    }
    
    header .logo {
        width: 100%;
    }
    
    header .logo img {
       
       margin-left: 5%;
       margin-top: 1%;
    }
    
    header .logo h1 {
        margin-top: 8%;
        margin-left: -6%;
    }
    
    header .social {
        width: 15%;
    }
    
    header .langs {
        width: 15%;
    }
    
    header .social, header .langs {
        position: absolute;
        right: 0;
    }
    
    header .social {
        bottom: 0;
    }
    
    header .langs {
        top: 0;
    }
    
    .slider img {
        width: 200% !important;
    }
}
/*-------MAIN-------*/

.slider {
    clear: both;
   overflow: hidden;
}

.slider img {
    width: 100%;
    border-top: 2px solid #606060;
    border-bottom: 2px solid #606060;
}

/*------CONTENT------*/

.two-cols {
    width: 44%;
    margin-right: 1%;
    margin-left: 3%;
    margin-top: 2%;
    float: left;   
}

@media (max-width: 600px) {
  .two-cols {
    width: 89%;
    margin-bottom: 10%;
    margin-left: 5%;
    margin-right: 5%;

  }
}

.two-cols.info p {
    text-align: center;
    margin-top: 8%;
}

.prices, .hours {
    border: white 4px solid;
    color: #606060;
    border-radius: 25px;
    font-family: lemonMilk;   
    padding-top: 2%;  
    padding-bottom: 45%;
    height: 0px;
}

@media (max-width: 600px) {
  .prices, .hours {
    padding-bottom: 120%;
  }
}

.prices h2, .hours h2 {
    margin-bottom: 5%;
    font-weight: 900;
}

.prices ul {
    float: left;
    clear: right;
    width: 50%;
    font-size: 0.9em;
  
}

@media (max-width: 600px) {
  .prices ul {
    font-size: 0.8em;
    width: 50%;
  }
}

.prices img {
    float: left;
    clear: left;
    width: 13%;
    margin: 1% 15% 10% 18%;
}

.prices img.big {
    width: 18%;
    margin: 1% 12% 0% 16%;
}

.two-cols .footer {
   clear: both;
   float: right;
   font-size: 0.9em;
   font-style: italic;
   text-decoration: underline;
   text-align: right;
   font-family: Tahoma, Geneva, sans-serif;
   font-size: 0.8em;
}

.two-cols .footer img {
   float: right;
 }
.two-cols.map .footer img  {
    width: 6%;
    margin-left: 1%;
    margin-right: 1%;
}

.two-cols.prices .footer img {
    width: 20%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 3%;
    
   }
   
.two-cols.prices .footer {
        margin-right: 15%;
   }

.two-cols.hours p {
    font-size: 2em;
    text-align: center;
}

.two-cols.hours p b {
    font-family: lemonMilklight;
}

.two-cols.hours p.address {
    font-size: larger;
}

#map {
    padding-bottom: 100%;
    width: 100%;
    border: 3px solid #ffdeb9;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(207,196,207,1);
    -moz-box-shadow: 5px 5px 5px 0px rgba(207,196,207,1);
    box-shadow: 5px 5px 5px 0px rgba(207,196,207,1);
}

main dl {
    width: 66%;
    clear: both;
    margin: auto;
}

main dl div {
    float: left;
    text-align: center;
    width: 25%;
    margin-top: 10%;
    margin-bottom: 10%;
}

main dl img {
        width: 50%;
    }

@media (max-width: 600px) {
    main dl {
        width: 100%;
    }
    
    main dl div {
        width: 50%;
    }
    
    main dl img {
        width: 50%;
    }
}
    
footer {
    width: 99%;
    clear: both;
    background-color: #88d0ef;
    border-top: 2px solid #48a3cb;
    position: relative;
    color: black;
    display: inline-block;
    padding: 0.5%;
    margin-bottom: -1%;
}

footer a:hover {
    color: white !important;
}

footer .logo {
    float: left;
    width: 50%;
}

footer .logo img {
    width: 3%;
    position: absolute;
    bottom: 0;
    margin-bottom: 0.5%;
}

footer .logo h1 {
    color: black;
    font-size: 1em;
    margin-left: 8%;
    text-align: left;
}

@media (max-width: 600px) { 
   footer .logo h1 {
        font-size: 0.7em;
   }       
   
   footer p {
        font-size: 0.7em;
   }
}

footer p {
    float: right;
    font-style: italic;
    line-height: 1em;
}