html {
    font-size:1vw;
    scrollbar-width: none;
    height: 100%;
}
body {
    scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/Quicksand-Regular.ttf'); /* IE9 Compat Modes */
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    src: url('./assets/fonts/Quicksand-Bold.ttf'); /* IE9 Compat Modes */
}
#adt-container{
    position: relative;
}

#sticky_ADT_Logo{
    background-image: url('./assets/images/AB_PC.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

@media only screen and (max-width: 640px) {
    #adt-container #sticky_ADT_Logo{
        background-image: url('./assets/images/AB_mobile.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 100vh;
    }

    #adt-container #adt-logo-dropDown {
        z-index: 100011;
        top: 4.5%;
        right: 41.5%;
    }
    .overlay {
        z-index: 900000;
        position: fixed;

        height: 100%;
        width: 0;
        top: 0;
        right: 0;
        padding-top: 20px;

        background-color: rgba(0,0,0, 0.85);
        overflow-x: hidden;
        transition: 0.5s;
    }
    #adt-logo-dropDown  .overlay-content {
        position: relative;

        padding-left: 10px;
        top: 5%;
        width: 100%;
        /* right: 10px; */
        text-align: center;
    }
    #adt-logo-dropDown  .overlay-content li{
        display: block;
        opacity: 1;
        padding: 10px 10px;
        margin: 0;
    }
    #adt-logo-dropDown .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 30px;
        color: white;
        display: block;
        transition: 0.3s;
    }
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    #adt-logo-dropDown .overlay .closebtn {
        position: absolute;
        right: 45%;
        top: 85%;
        width: 25px;
        height: 25px;
        line-height: 18px;
        text-align: center;

        font-size: 45px;
        
        border: solid 0px black;
        border-radius: 50%;
        background-color: hsla(0, 0%, 0%, 0.85);
    }
    #adt-logo-dropDown .overlay .closeButton a{
        display: block;
        opacity: 1;
    }
    #adt-logo-dropDown .overlay .closebtn:focus {
        box-shadow: none;
    }

    #adt-logo-dropDown .Logo_Hover{
        position: relative;
    }

    #adt-logo-dropDown .Logo_Before_Hover{
        position: relative;
    }

    #adt-logo-dropDown .img_afterHover{
        position: absolute;
        left: 40%;
        top: 3px;
        transform: scale(0.5);
        opacity: 1;
    }
    #adt-logo-dropDown #img_beforeHover {
        /* display: block; */
        position: absolute;
        top: -20px;
        right: 40%;
        transform: scale(0.5);
    }
    #adt-logo-dropDown .menu:hover .overlay-content li {
        width: 90%;
    }
}
#sticky_ADT_Logo{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999999;
  }

.img_beforeHover {
    top: 20px;
    right: 20px;
    opacity: 1;
}

#adt-logo-dropDown {
    font-family: 'Quicksand';
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100011;
}

.menu .img_afterHover{
    opacity: 0;
}

#adt-logo-dropDown .menu{
    position: relative;
}

.img_beforeHover, #adt-logo-dropDown .img_afterHover{
    position: absolute;
    right: 20px;
    top: 0px;
}

.dropdown:hover {
    cursor: pointer;
}

.overlay-content{
    position: absolute;
    text-align: right;
    right: 0;
    padding-top: 40px;
    perspective: 1000px;
    z-index: -1;
}

.overlay-content li{
    display: none;
    color: white;
    padding: 15px 15px;
    font-size: 30px;
    opacity: 0;
}

.menu:hover .overlay-content li {
    display: block;
    color: white;
    opacity: 1;
    width: 200px;
}

#adt-logo-dropDown .closeButton a{
    display: none;
    opacity: 0;
}

.menu:hover .img_afterHover{
    opacity: 1;
    transition: all 0.5s;
}

.overlay-content a{
    text-decoration: none;
    color: white;
}

.overlay-content li:hover{
    transform: translateX(-5%);
    transition: all 0.5s;
}

.overlay-content a{
    text-decoration: none;
}

.overlay-content li:hover{
    transform: translateX(-5%);
    transition: all 0.5s;
}

.overlay-content .dropdown_item-1 {
    transform-origin: top center;
    animation: slideDown 150ms ease-in-out forwards;
}

.overlay-content .dropdown_item-2 {
  transform-origin: top center;
  animation: slideDown 300ms ease-in-out forwards;
}

.overlay-content .dropdown_item-3 {
  transform-origin: top center;
  animation: slideDown 450ms ease-in-out forwards;
}

.overlay-content .dropdown_item-4 {
  transform-origin: top center;
  animation: slideDown 600ms ease-in-out forwards;
}

.overlay-content .dropdown_item-5 {
  transform-origin: top center;
  animation: slideDown 750ms ease-in-out forwards;
}

@keyframes slideDown {
0% { 
  opacity: 0;
  transform: translateY(-60px);
}

100% {
  opacity: 1;
  transform: translateY(0);
}
}
.overlay-content .dropdown_item-1:hover a{
    color: #0055a5;
}

.overlay-content .dropdown_item-2:hover a{
    color: #818386;
}

.overlay-content .dropdown_item-3:hover a{
    color: #ffa800;
}

.overlay-content .dropdown_item-4:hover a{
    color: #ffa800;
}

.overlay-content .dropdown_item-5:hover a{
    color: #8abb2a;
}