/*Body*/
body{
    background-color: #536066;	
}
.gamearea{

}
/*Audio*/
.audio_box{
    background-color: red;
    border:1px solid white;
}
/*Floating Button*/
#floater {
    /*position: fixed;
     top:450px;
     right: 35%;*/
    float:right;
    width: 140px;
    height: 20px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 1;
    border-radius: 3px 0 0 3px;
    padding: 1px;
    background-color: grey;
    font-size:10px;
    color: white;
    border:1px solid white;
    text-align: center;
    box-sizing: border-box;
}

#floater:hover{
    text-decoration: none;
}
/**********
 * Bottom
 **********/
.navbar {
    background-image: url("../images/tiroirs.PNG");	
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
    margin-top:20px;
}

.navbar a {
    float: left;
    display: block;
    color: black;
    text-align: left;
    padding: 14px 6px;
    text-decoration: none;
    font-size: 14px;

}
.navbar > #Btn_Cslab{
    background-image: url("../images/toplieux.PNG");	
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 44%;
    letter-spacing: -1px;
    font-weight: bold;
    color:#333333;
    padding:5px;
    margin-bottom:15px;
}
/*Bottom Buttons (drawars)*/
.navbar > #Btn_Res{
    background-image: url("../images/topressources.PNG");	
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 53%;
    padding:5px;
    margin-bottom:5px;
    letter-spacing: -1px;
    font-weight: bold;
    color:#333333;
}
.navbar > #mid{
    width:3%;
}

.main {
    padding: 16px;
    margin-bottom: 10px;
}

/**********
 * Top Bar
 **********/
/* Add a black background color to the top navigation */
.topnav {
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    background-color: #333;
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 4px 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight:bold;
    color: white;
}
/* Add a color to the exhibition link */
.topnav a.exibition {
    background-color: #CE3C2D;
}
/* Add a color to the exhibition link */
.topnav a.links {
    background-color: #90A39D;
}
.topnav a.other {
    background-color: #828685;
}


#entergame_screen,#gameplay{
    display:none;
}
/*Game Play Section*/
#gameplay{
    margin-top:0px;	
}
#gameplay > button{
    color:white;
}
#gamebackground,#genlab,#ballab,#chemlab,#finlab{
    /*	
            background-image: url("../images/back_en.PNG");	
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            max-height: 100%;
    */
    border: 10px groove #ced4dd;
    width: 100%;
    height: 65%;
}

/*interactive text file*/
#head_text_small{
    display: block;
    background: linear-gradient(to right, black, black,grey,silver);
    font-size:11px;
    color:white;
    padding: 2px 2px;
    padding-left: 5px;
}
/*for heading Autopsy of a murder*/
#head_text{
    display: inline;
    color:white;	
}
#bottom_menu{
    width: 100%;
}

.hover_img {
    position: absolute;
    z-index: 1;
}
.hover_img button { 
    font-weight: 900;
    font-size:12px;
    padding: 5px;
    position:relative; 
    color: #97722F;
    background-color: #E7D444;	
}
.hover_img button span { position:absolute; display:none;}
.hover_img button:hover span { display:block;}

/*minor space on top*/
.space_top{
    margin-top: 10px;
}
.top_text{
    background-image: url("../images/thumb_top.PNG");	
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
}

.useful_link > li > a{
    color:white;
    font-size: 14px;
    font-weight:bold;
}
.useful_link > li > a:hover{
    text-decoration: none;
}
.quit{
    padding:0px 2px;
    background-color: white; 
    color:#828685;
}
/*Video Icon*/
.fa-video{
    color:black;
}

/*************
 *Genetics Lab
 **************/
#genlab{
    background: linear-gradient(to right, #6F5D6D,#8E758A,#A886A1,#8E758A,#6F5D6D);
    color: #FFFFFF;
    padding: 3rem 0;
}
.genlab_top{
    padding-top: 10%;
}
.genlab_wel {
    color: #B9A1B8;
    font-weight: 800;
    font-size: 12px;
    float:right;
    padding-bottom:0px;
    margin-bottom:0px;
}
.genlab_wel2{
    padding-top:0px;
    margin-top:0px;
    float:right;
    font-weight: bold;
}
.gl3{
    font-size: 12px
}
.gl3 > strong{
    font-size: 12px;
}

.elab_box{
    padding:15px;
    font-size:20px;
    font-weight:bold;
    border:3px solid white;
}
.elab_box:hover{
    background-color: #CC3426;
}

.eilab_box{
    margin-right:10px;
    border:2px solid white;
}

.enterlab_clue{
    border:2px solid white;
    text-align: center;
    float: right;
    font-weight: 900;
    font-size:13px
}
.ec1lab_box{
    background-color: #768084;
    border-bottom:2px solid white;
    padding: 3px 20px;
}
.ec2lab_box{
    background:linear-gradient(#F33428,#CE3125,#A62505);
    padding: 5px 20px;	
}
@media only screen and (max-width: 575px){
    .elab_box{
        padding:5px;
        font-size:10px;
        font-weight:bold;
        float:right;
        border:2px solid white;
    }
    .elab_box:hover{
        background-color: #CC3426;
    }


    .enterlab_clue{
        border:2px solid white;
        text-align: center;
        float: left;
        font-weight: 900;
        font-size:10px
    }
    .genlab_wel,.genlab_wel2,.ballab_wel,.chemlab_wel,.finlab_wel{
        float:left;
    }
}

/*Genetics Lab TOOLS*/
div.lab_tool{
    overflow-x: auto;
    white-space: nowrap;
    height:100%;
}
div.lab_tool img{
    display: inline-block;

}
.lab_txt{
    border:1px solid white;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
}
/*lab title box*/
.gen_lab_txt{
    border:1px solid white;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
    padding:5px;
    background-color: #A28C99;
}
.bal_lab_txt{
    border:1px solid white;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
    padding:5px;
    background-color: #71A07E;	
}
.chem_lab_txt{
    border:1px solid white;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
    padding:5px;
    background-color: #8294BC;	
}
.fin_lab_txt{
    border:1px solid white;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 10px;
    padding:5px;
    background-color: #C17B73;	
}
.gen_lab_txt > span{
    padding-top:0px;
    font-size:8px;
    float:right;
}
.gen_lab_txt > span > span{
    font-size:12px;
}
.bal_lab_txt > span{
    padding-top:0px;
    font-size:8px;
    float:right;
}
.bal_lab_txt > span > span{
    font-size:12px;
}
.chem_lab_txt > span{
    padding-top:0px;
    font-size:8px;
    float:right;
}
.chem_lab_txt > span > span{
    font-size:12px;
}
.fin_lab_txt > span{
    padding-top:0px;
    font-size:8px;
    float:right;
}
.fin_lab_txt > span > span{
    font-size:12px;
}
#genlabel{
    position: absolute;
    z-index: 5;
    border:1px solid white;
    margin-top:10px;
    float:left;
    background-color:#8E758A;
    font-size: 10px;

    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#ballabel{
    position: absolute;
    z-index: 5;
    border:1px solid white;
    margin-top:10px;
    float:left;
    background-color:#71A07E;
    font-size: 10px;

    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#chemlabel{
    position: absolute;
    z-index: 5;
    border:1px solid white;
    margin-top:10px;
    float:left;
    background-color:#3F5270;
    font-size: 10px;

    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#finlabel{
    position: absolute;
    z-index: 5;
    border:1px solid white;
    margin-top:10px;
    float:left;
    background-color:#A35040;
    font-size: 10px;

    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/***** SAME IN LAB *****/
/*Left side*/
.lab_ani_popup{
    border:2px solid white;
    text-align: center;
    font-weight: bold;
    background-color: #CC3427;
}
.lab_ani_popup > img{
    max-width:100%;
    border-bottom:2px solid white;
}
.lab_ani_popup > label{
    padding-top: 5px;
}
/*Right side*/
.lab_ani_popup2 > span{
    font-weight: bold;
    font-size: 12px;
}
.lab_ani_popup2 > label{
    font-weight: bold;
    font-size: 16px;
}
.lab_ani_popup2 > p{
    font-size:12px;
}
/*Play animation pop up*/
.ani_pop_out{
    border:2px solid white;
    color:white;
    background-color: #CC3427;
}
.lab_ani_close{
    border:1px solid white;
    background-color:grey;
    padding: 0px 2px;
    font-size: 10px;
}
.gen_ani_pop_in{
    padding: 10px 0px;
    margin:3px;
    background-color: #8E758A;
}
.bal_ani_pop_in{
    padding: 10px 0px;
    margin:3px;
    background-color: #578362;
}
.chem_ani_pop_in{
    padding: 10px 0px;
    margin:3px;
    background-color: #547095;
}
.fin_ani_pop_in{
    padding: 10px 0px;
    margin:3px;
    background-color: #A35040;
}
.cph_ani_pop_in{
    padding: 10px 0px;
    margin:3px;
    background-color: #5E6B71;
}
/*Technition pop up*/
.ani_pop_out_GT{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #8E758A;
}
.lab_popup_GT_left{
    border:1px solid white;
}
.lab_popup_GT{
    border:1px solid white;
    width:100%;
    text-align: left;
    background-color: #CC3427;
    font-size: 14px
}
.detail_head_GT{
    background-color:#796775;
    border:1px solid white;
    font-size:10px;
    padding: 0px 1px;
}
.bio,.case{
    font-size:10px;
}
.bio > span,.case > span{
    font-size: 12px;
    font-weight: bold;
}
.tech_GT{
    width:100%;
}
/*Res Gen*/
.Gen_title{
    background-color: #A08D99;
}
.Gen_btn{
    background-color: #7F6C7F;
}
/*************
 *Ballistic Lab
 **************/
#ballab{
    background: linear-gradient(to right, #405D47,#578362,#669873,#578362,#405D47);
    color: #FFFFFF;
    padding: 2.5rem 0;
}
.ballab_top{
    padding-top: 10%;
}
.ballab_wel {
    color: #98B59F;
    font-weight: 800;
    font-size: 12px;
    float:right;
    padding-bottom:0px;
    margin-bottom:0px;
}
.detail_head_BT{
    background-color: #405D47;
    border:1px solid white;
    font-size:10px;
    padding: 0px 1px;
}
/*Popup BT*/
.ani_pop_out_BT{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #669873;
}
/*Res Bal*/
.Bal_title{
    background-color: #71A07C;
}
.Bal_btn{
    background-color: #558862;
}
/*Popup*/
.ani_pop_out_BT{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #578362;
}
/*************
 *Chemistry Lab
 **************/
#chemlab{
    background: linear-gradient(to right, #3F5270,#5D7091,#778DB4,#5D7091,#3F5270);
    color: #FFFFFF;
    padding: 2.5rem 0;
}
.chemlab_top{
    padding-top: 10%;
}
.chemlab_wel {
    color: #98B59F;
    font-weight: 800;
    font-size: 12px;
    float:right;
    padding-bottom:0px;
    margin-bottom:0px;
}
.detail_head_CT{
    background-color: #657282;
    border:1px solid white;
    font-size:10px;
    padding: 0px 1px;
}
/*Res Chem*/
.Chem_title{
    background-color: #8294BA;
}
.Chem_btn{
    background-color: #758BAB;
}
/*Popup CT*/
.ani_pop_out_CT{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #778DB4;
}
/*************
 *Fingerprint Lab
 **************/
#finlab{
    background: linear-gradient(to right, #A35040,#B2695A,#BE7969,#B2695A,#A35040);
    color: #FFFFFF;
    padding: 2.5rem 0;
}
.finlab_top{
    padding-top: 10%;
}
.finlab_wel {
    color: #98B59F;
    font-weight: bold;
    font-size: 12px;
    float:right;
    padding-bottom:0px;
    margin-bottom:0px;
}
.detail_head_FT{
    background-color: #894B02;
    border:1px solid white;
    font-size:10px;
    padding: 0px 1px;
}
/*Popup FT*/
.ani_pop_out_FT{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #A16656;
}
/*Crime Scene Technition*/
.detail_head_CST{
    background-color: #5E6B70;
    border:1px solid white;
    font-size:10px;
    padding: 0px 1px;
}

.ani_pop_out_CST{
    border:5px solid #D2D1CE;
    border-top:15px solid #D2D1CE;
    padding:5px;
    color:white;
    background-color: #7A8990;
}
.CS_tool{
    display: inline;
    max-width: 100%;
    border: 2px solid white;
    border-radius: 10px;
    margin-top:5px;
}
.wrap-CS_tool_title{
    height: 4rem;
    position: relative;
    background-color: #5E6B70;
    border-radius: 5px;
    padding: 0.5em;
    margin: 0.5rem 0;
}
#CS_tool_title{
    text-align:center;
    font-size: 0.7rem;
    display: block;
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    padding: 0 0.5em;
    color: #c9c9c9;
    font-weight: 800;
}
/*Res Fin*/
.fin_title{
    background-color: #C68B8F;
}
.fin_btn{
    background-color: #B17D82;
}
/*SCROLL BAR IN LABORATORIES*/
/* width */
::-webkit-scrollbar {
    width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
    border-top:1px solid white;
    border-bottom:1px solid white;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #CC3426; 
    border-radius: 5px;
}

/*Size of lab images*/
.lab_img{
    max-width: 100%;
    max-height:100%;
}

/**************** Alex*************/
div.lab_tool {
    height: auto;
}
.detail_head_CST label:hover,
.detail_head_GT label:hover,
.detail_head_BT label:hover,
.detail_head_CT label:hover,
.detail_head_FT label:hover,
label.detail_head_CT:hover,
label.detail_head_CST:hover,
label.detail_head_GT:hover,
label.detail_head_BT:hover,
label.detail_head_FT:hover{
    background-color: #CC3427;
}
.navbar > #Btn_Cslab{
    width: 45%;
}
.navbar > #Btn_Cslab,
.navbar > #Btn_Res,
#head_Cslab span{
    font-size: 0.8rem;
    text-shadow: 0px 0px 0px #636161;
}

#evid1 .pre-title{
    font-size: 0.5rem;
}
#evid1 .post-title{
    font-size: 0.6rem;
}
.modal_ani_popup{
    top: 30%;
}
#head_Res .close_box_evi,
#head_Cslab .close_box_evi{
    padding: 0.1rem 0.5rem 0.1rem 0.2rem;
    background-color: black;
    border: 2px solid red;
    color: white;
    margin: 0;
}
.modal-header{
    padding: 2px 0px 2px 16px !important;
}
.modal_res{
    left: 47%;
}
.res_box > aside:nth-child(3)> p{
    font-size: 10px;
}
@media only screen and (max-width: 1441px){
    .modal_res {
        top: 10px !important;
    }
    .modal_lab_cs{
        top: 160px !important;
    }
    .modal_technition{
        left: 14% !important;
        top: 17% !important;
    }
}
/**** Alex CSS   ***/

.aut-entete{
    margin-top: 1rem;
}
.aut-head{
    height: 7rem;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
}
.aut-head-2{
    position: relative;
    height: 7rem;
}
.aut-head .topnav{
    right: 0px;
    position: absolute;
}


/**********************  Start  Hamburger menu      **********************/
.logo-reload{
    display: inline-block;
    height: 100%;
    width: 100%
}
.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.logo {
    height: 0;
}

.logo span {
    font-weight: 400;
}

.menu-toggle {
    position: absolute;
    padding: 0.8em;
    top: 1em;
    right: .5em;
    cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    background: #EBEBD3;
    height: 3px;
    width: 2em;
    border-radius: 3px;
    -webkit-transition: all ease-in-out 350ms;
    transition: all ease-in-out 350ms;
}

.hamburger::before {
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
}

.hamburger::after {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
}

.open .hamburger {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.open .hamburger::before {
    display: none;
}

.open .hamburger::after {
    -webkit-transform: translateY(-1px) rotate(-90deg);
    transform: translateY(-1px) rotate(-90deg);
}


nav {
    margin: 0;
    padding: 0;
}

nav ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
}

nav ul.opening {
    display: block;
    height: 30px;
    z-index: 2;
    position: relative;
}

nav li {
    border-bottom: 1px solid #f6f4e2;
}
nav li:last-child {
    border-bottom: none;
}
nav a {
    color: #EBEBD3;
    background: #333;
    display: block;
    padding: 1.5em 4em 1.5em 3em;
    text-transform: uppercase;
    text-decoration: none;
}

nav a:hover,
nav a:focus {
    background: #CB3526;
    color: white;
}

.site-nav--icon {
    font-size: 1.4em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255,255,255,.4);
}
@media (max-width: 780px) {
    .aut-head-2{
        display: none;
    }
}

@media (min-width: 780px) {

    .menu-toggle {
        display: none;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    nav li {
        flex: 1 1 auto;
        border: none;
    }

    nav li a {
        padding: 1.5em 1.3em 1.5em 1.3em;
        margin: 0;
        border: none;
        background-color: #f04343;
    }
    nav a:hover,
    nav a:focus {
        background-color: rgba(255,255,255,.10);
    }

    .logo {
        flex: 0 0 200px;
        margin: 0;
        padding-left: 20px;
    }


    nav {
        /*display: flex;*/
        display: none;
        flex-direction: row;
        justify-content: space-between;

        text-align: center;
        background-color: #f04343;
    }

    .site-nav--icon {
        display: none;
    }
}
/**********************  End Hamburger menu      **********************/
#gameplay{
    background-repeat: no-repeat;
    background-size: cover;
    height: 64vh;
    border: 10px groove #ced4dd;
}
.btn_pointer{
    cursor: pointer;
}
#floater:hover{
    background-color:red;
}
.btn_for_hover:hover{
    background-color: #90A39D !important;
}
.btn_for_hover:hover .evi_img{
    border: 2px solid white;
}
.btn_for_hover:hover .post-title,
.btn_for_hover:hover .pre-title{
    color: #505050 !important;
}
#evid1 .pre-title,
#evid1 .post-title{
    font-weight: 800;
}