@import url('https://fonts.googleapis.com/css?family=Teko:300,700&display=swap&subset=latin-ext');

* {
    padding: 0;
    margin: 0;
    font-family: "Teko", Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight:300;
    color:rgb(179, 179, 179);
}

#fullpage {
    width: 100vw;
    height: 100vh;
    overflow:hidden;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/img/ANAANTONOVA_DJ.jpg) no-repeat center center;
    background-size: cover;
    position:relative;
}

#hero {
    width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    z-index: -2;
}

#vectorlogo {
    position: absolute;
    bottom: 15%;
    width: 20%;
    height: 20%;
    mix-blend-mode: screen;
}

#social {
    position: absolute;
    display: flex;
    bottom: 10vh;
    width: auto;
    height: 2vh;
    transform-origin: 50% 50%;
}

a {text-decoration:none;}

a:active, a:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none;
  }

img[src*="soc_"]:hover {transform-origin: 50% 50%;transform:scale(2, 2);filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);transition: all .3s ease-in-out;}

img {transition: all .3s ease-in-out;}

#bookme {position: absolute; float:right; right:50px;transition: all .3s ease-in-out;}
#bookme:hover {right:90px;transform:scale(2, 2);filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);transition: all .3s ease-in-out;}
#tour {position: absolute; float:left; left:50px;transition: all .3s ease-in-out;}
#tour:hover {left:90px;transform:scale(2, 2);filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);transition: all .3s ease-in-out;}

#tours, #contactformelement {
    width:80%;
    height:80%;
    margin:auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tourtable {position: absolute; float:left; margin-left:-200%; background-color:black;opacity:0.3;width:100%; height:100%;}
#contactform {position: absolute; float:right; margin-left:200%; background-color:rgb(41, 41, 41);opacity:0.3;width:100%; height:100%;}

.closebuttonleft, .closebuttonright {
  width:80px;
  height:80px;
  position:absolute;
  float:right;
  top:30px;
  right:30px;
  transform:scale(1, 1);
  transition: all .1s ease-in-out;
}

.closebuttonleft:hover, .closebuttonright:hover {
  cursor: pointer;
  transform:scale(1.2, 1.2);
  transition: all .1s ease-in-out;
}

/* TABLES */

.next {color:yellow!important;}
.nextold {color:rgb(177, 177, 177)!important;}

table.antonovaTable {
    background-color: #222222;
    width: 100%;
    height: auto;
    text-align: left;
    border-collapse: collapse;
  }

  table.antonovaTable td, table.antonovaTable th {
    border-top: 2px dotted #4A4A4A;
    padding: 5px 20px;
    font-weight:700;
  }
  
  th {border-top:none!important;background-color:#1a1a1a;}
  
  table.antonovaTable tbody td {
    font-size: 24px;
    font-weight:300 !important;
    color: #F6F6F6;
    border-bottom: 1px solid #FFFFFF;
  }

  table.antonovaTable tr:nth-child(even) {
    background: rgb(48, 48, 48);
  }

  table.antonovaTable thead {
    background: #000000;
    border-bottom: 3px solid #FFFFFF;
  }

  table.antonovaTable thead th {
    font-weight: bold;
    color: #E6E6E6;
    text-align: left;
  }

  .aclose:hover {
    fill:red!important;
    color:red!important;
  }

  input, textarea {
    width:80vw%;
    background-color: rgba(0, 0, 0, 0.5);
    border:none;
    border-bottom-color: rgba(0, 0, 0, 0);
    margin-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    padding:10px;
    transition: all .3s ease-in-out;
  }

  input:focus, textarea:focus {
    border-bottom-color: whitesmoke;
    transition: all .3s ease-in-out;
    outline: 0;
  }

  .sendbutton {
    background-color:black;
    font-weight:700;
    color:white;
    padding:5px;
    border: 2px solid white;
    cursor: pointer;
    padding-top: 10px;
    padding-left:15px;
    padding-right:15px;
  }

  .sendbutton:hover {
    background-color:white;
    color:black;
    cursor: pointer;
  }

  .sendbutton:focus {
    border:none;
  }

  .sendbutton:active {
    background-color:white;
    color:black;
    cursor: pointer;
  }

@media only screen and (max-width: 480px) {
  .closebuttonleft, .closebuttonright {
    width:10vw !important;
    height:auto;
  }
}

@media only screen and (max-width: 600px) {
/* 600px CSS */
}

@media only screen and (max-width: 900px) {
/* 900px CSS */
}

@media (orientation: landscape) {
}

@media (orientation: portrait) {

    #hero {
        width: auto;
        height: 100%;
    }

    table.antonovaTable tbody td {
        font-size: 2vw;
      }
}