/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {


     * {
          box-sizing: border-box;
     }
     
     /******************************** NAVBAR CONTAINER ************************************/


    #sticky_nav{
        width: 100%; 
        height: 50px;
        margin: 0 0 0 0;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,1);
        z-index: 10;
        display: none;
        float: left;
    }
    #auto_logo{
        /*border: 1px solid red;*/
        position: absolute;
        top: 10px;
        left: 30px;
        width: 150px; 
        padding-top: 0px;
        display: block;
    }
    ul.navbar {
        /*border: 1px solid red;*/
        list-style-type: none;
        /*overflow: hidden;*/
        font-family: 'Roboto';
        font-size: .9em;
        font-weight: 300;
        width: 55%;
        padding: 0;
        margin: 0 auto;
        display: block;
        height: 50px;
    }
.navbar li{
        /*border: 1px solid orange;*/
        text-align: center;
        float: left;
        font-family: inherit; /* Important for vertical align on mobile phones */
        margin: 0 0 0 0; /* Important for vertical align on mobile phones */
        width: 16.66%;
        line-height: 2.5em;
        height: 50px;
    }
    /* Links inside the navbar */
    li a, .dropdown{
        display: inline-block;
        color: black;
        text-align: center;
        padding: 7px 5px;
        text-decoration: none;
    }
    .active-menu-item{
        color: white;
        font-weight: 700;
        width: 100%;
        background-color:#992C2A;
        height: 50px;

    }
    /* Add emphasis to links on hover */
    .menu-item:hover{
        background-color: #92A4B5;
        color: #c8def1;
        text-decoration: none;
        font-weight: 700;
        height: 50px;
        overflow: hidden;
    }
    /* Add emphasis to links on hover */
      ul.navbar .dropdown_menu:hover, li.menu_item a:hover, li.dropdown_menu a:hover, .dropdown_menu:hover .dropbtn{
        background-color: #92A4B5;
        color: #c8def1;
        text-decoration: none;
        font-weight: 700;
    }
    /* Add a grey background color to dropdown links on hover */
    .dropdown_menu:hover .dropdown-content{
        display: block;
    }
    /* Links inside the dropdown */
    .dropdown_menu .dropdown-content a:hover{
        background-color: #344960;
        color: #56ACFB;
    }
        .row:hover{
            background-color: rgba(255, 255, 255, 0.0);
            border-bottom: none;
        }

        .dropdown_menu:hover .parent{
            color: white;
        }
        /*color of top nav*/
        .navbar .dropdown_menu a{
            color: white;
        }
        li .dropdown_menu{
            display: inline-block;
        }
        .dropdown-content{
            font-weight: 300;
            display: none;
            position: absolute;
            box-shadow: 0px 16px 16px 0px rgba(0,0,0,0.6);
            background: rgba(255, 255, 255, 1);
            background-image: rgba(255, 255, 255, 1);
            padding: 5px 5px 5px 5px;
        }
          #what_menu{
            width: 500px;
            /*position: absolute;
            left: 50%;
            margin-left: -50px;*/
          }
          #product_menu{
            width: 375px;
            /*position: absolute;
            left: 43.5%;*/
            /*margin-left: -30%;*/
          }
          #two-columns{
            width: 375px;
            /*position: absolute;
            left: 50%;*/
            /*margin-left: -30%;*/
          }

          #one-column{
            width: 200px;
            /*border: 1px solid lime;*/
          }

        .dropdown-content a{
            display: block;
            text-decoration: none;
            text-align: left;
            margin: 0px 2px 2px 2px;
            /*border-bottom: 2px solid white;*/
        }
        .dropdown-content .column3{
          width: 33.33%;
          float: left;
        }
        .dropdown-content .column2{
          width: 50%;
          float: left;
        }
            .parent{
                font-weight: 400;
                background-color: #92A4B5;
                color: white;
                line-height: 1.25em;
                font-weight: 500;
              }
              #label{
                padding: 8px 5px;
              }
            .child{
                padding-left: 20px;
                line-height: 1.25em;
                background-color: #C8DEF1;
            }
        .dropdown_menu .dropdown-content a{
            color: black;
        }
        /* Create three equal columns that floats next to each other */
        .column {
        /*border: 1px solid lime;*/
            float: left;
        }

     /******************************** HOTLINK MARKERS ************************************/

        /*OVERVIEW*/
        #over-media{display: inline-block;}
        #over-datalinks{display: inline-block;}
        #over-domains{display: inline-block;}
        /*AUTONOMY*/
        #auto-above{display: inline-block;}
        #auto-spectrum{display: inline-block;}
        /*ABOUT US*/
        #au-advent{display: inline-block;}
        /*TALK TO US*/
        #cu-custom-dev{display: inline-block;}

     /******************************** LANGUAGES ************************************/

    div.container_languages-narrow{
       /* border: 1px solid red;*/ 
        font-family: 'Roboto';
        font-size: .8em;
        font-weight: 300;
        text-align: left;
        color: white;
        width: 130px;
        float: left;
        position: fixed;
        margin: 0,0,0,0;
        top: 10px;
        left: 15px;
        z-index: 11;
    }
        div.container_languages-wide{
        /*border: 1px solid red;*/ 
        font-family: 'Roboto';
        font-size: .8em;
        font-weight: 300;
        text-align: left;
        color: white;
        width: 135px;
        float: right;
        position: fixed;
        margin: 0 0 0 0;
        top: 10px;
        right: 15px;
        z-index: 11;
        display: none;
    }
    .language-dropdown_menu{
        display: inline-block;
        background-color: none; /*rgba(224,237,249,0.3)*/
        padding: 0px 5px;
        float: left;
        border: 1px solid #92A4B5;
    }
    .language-dropdown_content{
        font-weight: 300;
        display: none;
        position: absolute;
        top:25px;
        left: 0px;
        max-width: 125px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
        /*background-color: rgba(255, 255, 255, 0.6);*/
        float: left;
    }
    .language-dropdown_content{
        border-top: 1px solid white;
        min-width: 125px;
        float: left;
    }
    .language-dropdown_content a{
        background-color: #EBF0FA;
        color: #58595B;
        line-height: 1.5em;
        padding: 5px 0 5px 10px;
        text-decoration: none;
        float: left;
        width: 125px;
    }
    /* Links inside the ul.container_languages */
    .language_label1{
        display: block;
        text-align: left;
        padding: 7px 10px;
        width: 100%;
        float: left;
    }
    .language_label2{
        display: block;
        text-align: left;
        font-style: italic;
        min-width: 125px;
        padding: 7px 10px;
        border-bottom: 1px solid #D5D7DB;/*#D5D7DB*/
        float: left;
    }
    /* Add emphasis to links on hover */
    div.language-dropdown_menu a:hover, .language_label2{
        background-color: #EBF0FA;
        text-decoration: none;
        color: #58595B;
    }
        .language_german:hover .deu{display: none} 
        .language_german:hover:before {content: "German (deu)"} 

        .language_french:hover .fra{display: none} 
        .language_french:hover:before {content: "French (fra)"} 
        .language-dropdown_content a, .language-dropdown_content .language_btn1,{
            display: block;
            text-decoration: none;
            text-align: left;
            border-bottom: 2px solid white;
        }
    /* Links inside the dropdown */
    .language-dropdown_menu .language-dropdown_content a:hover {
        background-color: rgba(192,197,203,1);
        color: white;
        font-weight: 500;
    }
    /*.language-dropdown_menu .language-dropdown_content .light a:hover {
    color: red;
    }*/
    /* Add a grey background color to dropdown links on hover */
    .language-dropdown_menu:hover .language-dropdown_content{
        display: block;
    }


     /******************************** MOBILE NAV ************************************/

     #mobile_wrapper{
        /*border: 1px solid yellow;*/
        width: 100%;
        float: left;
        background-color: black; /*rgba(0,0,0,1);*/
        margin: 0;
        z-index: 10;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 50px;
        display: block;
     }
         #hamburger-nav-logo{
            /*border: 1px solid yellow;*/
            width: 80px;
            margin: 0 auto;
            display: block;
            padding: 0 0 1em 0;
         }
         #auto-nav-logo_white{
            /*border: 1px solid red;*/
            width: 110px;
            margin: 15px auto;
            display: block;
         }
         .mobile-nav{
               position: absolute;
               top: 3px;
               right: 20px;
               z-index: 2;
               text-align: right;
               display: block;
         }
              .overlay {
                   height: 100%;
                   width: 100%;
                   display: none;
                   position: fixed;
                   z-index: 1;
                   top: 0;
                   left: 0;
                   background-color: rgb(0,0,0);
                   background-color: rgba(0,0,0, 0.9);
              }
              .overlay a{
                   text-decoration: none;
                   color: white;
              }
                   .overlay-content {
                        font-family:'Roboto', sans-serif;
                        font-size: 14px;
                        color: #818181;
                        margin-top: 30px;
                        width: 100%;
                        text-align: center;
                   }
                   .overlay-content a {
                        font-family:'Roboto', sans-serif;
                        text-decoration: none;
                        font-size: 14px;
                        color: #818181;
                        display: block;
                        transition: 0.3s;
                        float: left;
                        width: 80%;
                        margin: .75em 10% .75em 10%;
                        float: left;
                   }
                   .rule_gradient{
                        background: linear-gradient(to right, rgba(97,182,253,0), #61b6fd, rgba(97,182,253,0));
                        background-image: linear-gradient(to right, rgba(97, 182, 253, 0), rgb(97, 182, 253), rgba(97, 182, 253, 0));
                        height: 1px;
                        width: 80%;
                        margin: 0 10%;
                        float: left;
                   }
                   .overlay a:hover, .overlay a:focus {
                        color: #f1f1f1;
                        font-weight: 700;
                        cursor: pointer;
                   }
                   .overlay .closebtn {
                        position: absolute;
                        top: 20px;
                        right: 20px;
                        font-size: 45px;
                   }
              .nav-span{
                   font-family:'Roboto', sans-serif;
                   font-weight: 300;
                   font-size: 1.5em;
                   cursor: pointer;
                   color: white;
                   display: block;
                   padding: 7px 10px;
                   /*width: 110px;*/
                   /*background-color: RGBA(72,122,171,.8);*/
                   box-sizing: border-box;
              }
}

/******************************** MEDIA QUERIES ************************************/


/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

    #mobile_wrapper{
        display: block;
    }
       #auto-nav-logo_white{
          width: 150px;
          margin: 10px auto;
          display: block;
       }
    #sticky_nav{
        display: none;
    }
    div.container_languages-narrow{
       /* border: 1px solid red;*/ 
      display: block;  
    }       
    div.container_languages-wide{
       /* border: 1px solid red;*/ 
      display: none;  
    }
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {

    #mobile_wrapper{
        display: block;
    }
       #auto-nav-logo_white{
          width: 150px;
          margin: 10px auto;
          display: block;
       }
    #sticky_nav{
        display: none;
    }
    div.container_languages-narrow{
       /* border: 1px solid red;*/ 
      display: block;  
    }       
    div.container_languages-wide{
       /* border: 1px solid red;*/ 
      display: none;  
    }
}


/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

    #mobile_wrapper{
        display: none;
    }
    #sticky_nav{
        display: block;
        /*height: 150px;*/
    }
        .navbar {
            /*border: 1px solid lime;*/
            width: 50%;
            margin: 0 25%;
        }
    div.container_languages-narrow{
       /* border: 1px solid red;*/ 
      display: none;  
    }       
    div.container_languages-wide{
       /* border: 1px solid red;*/ 
      display: block;  
    }       
}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

    #sticky_nav{
        display: block;
        /*height: 150px;*/
    }
    #mobile_wrapper{
        display: none;
    }

}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {


}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {


}