@font-face {
  src: url('../fonts/DejaVuSans-Bold.ttf') format("truetype");
  font-family: DjBold;
}
@font-face {
  src: url('../fonts/sir.ttf') format("truetype");
  font-family: DjLight;
}
@font-face {
  src: url('../fonts/rubik.ttf') format("truetype");
  font-family: Rubik;
}
html {
  width:100%;
}
 body {
    background-image: url('../images/leto.webp');
  background-size: 100% 100%;
 }
.toppage {
 background: url('../images/background-top.jpg');
 background-size: 100% auto;
 border-radius: 10px 10px 0 0;
}
.container {
  width: 80%;
      margin-left: auto;
    margin-right: auto;
    background: #fdf4e3;
}
.logo {
     margin: 50px auto;
     text-align: center;
}
.menubar {
  background: #34495e;
}
/* Menu Dropdown */
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }

  .cf:after {
      clear: both;
  }

  .cf {
      *zoom: 1;
  }

  .menu,
  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .menu {   
   margin: 50px auto;
   width: 800px;   
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content; 
  }

  .menu > li {
   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

  .menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }  

  .menu li:hover {
   background: #e74c3c;
  }  

  .menu > li > a {
   transform: skewX(-25deg);
   padding: 1em 2em;
  }

  /* Dropdown */
  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

  .submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;  
  }      

  .submenu > li > a {
   padding: 1em 2em;   
  }

  .submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;   
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
  }  

  .submenu > li:nth-child(odd){
   transform: skewX(-25deg) translateX(0);
  }

  .submenu > li:nth-child(odd) > a {
   transform: skewX(25deg);
  }

  .submenu > li:nth-child(odd)::after {
   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }    

  .submenu > li:nth-child(even){
   transform: skewX(25deg) translateX(0);
  }

  .submenu > li:nth-child(even) > a {
   transform: skewX(-25deg);
  }

  .submenu > li:nth-child(even)::after {
   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

  /* Show dropdown */
  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;   
  }

  .submenu li {
   transition: .2s ease transform;
  }

  .menu > li:hover .submenu,
  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }  

  .menu > li:hover .submenu li:nth-child(even){
   transform: skewX(25deg) translateX(15px);   
  }

  .menu > li:hover .submenu li:nth-child(odd){
   transform: skewX(-25deg) translateX(-15px);   
  }
  .content {
    margin-left: 5%;
    margin-right: 5%;
  }
  .bottomborder {
    background: #34495e;
    background-size: 100% auto;
     border-radius: 0 0 10px 10px;
  }
  .content h3 {
    font-family: DjBold;
  }
  .content p {
    font-family: DjLight;
  }
  .tel p{
    font-family: DjBold;
  }
  .both {
    clear:both;
  }
  .poweredby p {
    display:block;
    white-space: pre;
    margin-top: 10px;
    margin-left: 5px;
  }
  .poweredby a {
    text-decoration: none;
    color: lightgray;
  }
  .poweredby a:hover {
    color: lightyellow;
  }
  .bottomborder td {
    vertical-align: middle;
    width: 33%;
  }