* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Desktop Styles */
@media only screen and (min-width: 1000px) {
    
    body {font-family: 'Martel Sans', sans-serif; margin:0; padding:0; line-height:1.2; color:#686868; background-color:white;}
    h1 {font-family:'Georgia', serif;}
    h2 { font-size: 1.4rem}
    hr {border-color:#D7D7D7;}
    a{color:#893030;text-decoration: none;cursor:pointer;}
    a:hover{color:#db4c4c}
    
    .s_divisor {
        background-color: white;
        height: 20px;
        }
    
    .divisor {
        background-color: white;
        height: 60px;
        }
    
    .b_divisor {
        background-color: white;
        height: 120px;
        }
    
    .display_only_web {
         display: block;
     }
     
     .display_only_mobile {
         display: none;
     }
    
/*** ------------------------ Top ---------------------- ***/
    .top {
        height: 40px;
        background-color: black;
        }
    
    .twitter_top {
        padding: 10px;
        color: white;
        margin: 0.1%;
        margin-left: 2%;
        }

    .twitter_top:hover {
        color: #D7D7D7;
        }
    
    .logo_top {
        padding: 10px;
        color: white;
        margin: 0.1%;
        margin-left: 0.2%;
        }

    .logo_top:hover {
        color: #D7D7D7;
        }
    
    
    
/*** ------------------------ Menu ---------------------- ***/
    .container {
        background-color: #FBFCFC;
        padding: 40px;
        border-bottom: 0.75px solid #D7D7D7;
        }
    
    .logo {
        float: left;
        padding-left: 5%;
        margin-right: 75px;
        margin-top: -35px;
        }
    
    .logo img {
        padding-top: 10px;
        height: 100px;        
        }
    
    .menu_phone {
        display: none;
    }
    
    .header_desk {
        text-align: center;
        padding: 25px;
        padding-top: 5px;
        padding-left: 40%;
        font-size: 12px;
        text-transform: uppercase;
        /* position: sticky; */
        /* top: 0px; */
        /* z-index: 2; */
        }
    
        .header_desk li {
            display: inline;
            padding: 10px;
            }

        .header_desk a {
            text-decoration: none;
            color: #212121;
            }

        .header_desk :hover {
            color: #9E9E9E;
            }
    
    .header_phone {
        display: none;
        }
    
    .subratllat {
        background-image: linear-gradient(silver, silver);
        background-size: 0 2px, auto;
        background-repeat: no-repeat;
        background-position: center bottom;
        transition: all .2s ease-out;
        }
    
        .subratllat:hover{
            background-size: 100% 2px, auto;
            }
    
        li {
            float: left;
            position: relative;
            }

        ul li ul {
            background: grey;
            position: absolute;
            transition: all 0.5s ease;
            display: none;
            background-color: #FBFCFC;
            margin-top: 0.5rem;
            width: 80%;
            }
    
        ul li ul li {
            background: #e3e3e3;
            width: 200%;
            text-align: left;
            font-size: 11px;
            }

            ul li ul li:hover{
                background: #b8b8b8;
                }
    
        .subratllat_2 {
            z-index: 1;
            }
    
        .subratllat_3 {
            width: 85%;
            }
    
        .subratllat_2 :hover .subclass_3{
            color: white;
            }

        ul li:hover > ul,
        ul li ul:hover {
            display: block;
            }
    
    
    
    .cover {
        /* The image used */
        background-image: url(img/group_lju.JPG);
        /* Set a specific height */
        height: 450px;
        /* Create a parallax scrolling effect */
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        }
    
    .subcover {
        margin-top: 0px;
        height: 100%;
        text-align: center;
        }

    .subcover p{
        width: 80%;
        padding-top: 10%;
        padding-left: 20%;
        text-align: center;
        font-size: 2.5rem;
        color: white;
        font-family: 'Open Sans';
        }
    
    .core {
        background-color: white;
        padding: 7%;
        font-size: 13px;
        line-height: 1.7;
        text-align: justify;
    }
    
    .twitter {
        float: right;
        width: 30%;
        }
    
    .description {
        width: 65%;
        }
    
        .description p{
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            font-variant: small-caps;
            text-align: center;
            }
    
        .description ul {
            padding-left: 5%;
            }
    
        .description img {
            float: left;
            width: 37.5%;
            margin-right: 4%;
            margin-bottom: 4%;
            }
    
        .description sup {
            font-variant: normal;
            font-size: 12px;
        }

    
/*** ----------------------  Footer  -------------------- ***/
    .footer {
        clear: both;
        overflow: hidden;
        background-color: #FAFAFA;
        border-top: 0.75px solid #D7D7D7;
        /* The image used */
        background-image: url(img/lab.jpeg);
        /* Set a specific height */
        background-position: center;
        background-size: cover;
        }
    
    .subfooter {
        margin-top: 0px;
        height: 100%;
        background-color: rgba(30, 30, 30, 0.65);
        padding: 5%;
        font-size: 0.9rem;
        text-align: center;
        color: whitesmoke;
        line-height: 2;
        }
    
        .subfooter a {
            text-decoration: none;
            color: #D0D3D4;
            }

        .subfooter a:hover {
            color: #A6ACAF;
            }
    
    .bottom {
        height: 40px;
        background-color: black;
        }
    
/*** --------------- Selected publication --------------- ***/
    .sel_pub {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .sel_pub p{
            /**font-family: 'Georgia', serif;**/
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }

        .sel_pub p1{
            font-size: 1.05rem; 
            font-weight: bold; 
            font-variant: small-caps;
            }

        .sel_float img{float: left;}
        
        .kk1 img{
            width: 45%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            cursor: pointer;
            filter:grayscale(25%);
            border: 1px solid rgba(0, 0, 0, 0.1);
            }
        
        .kk1 img:hover{
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            filter:grayscale(0%);
            }

        .kk2 img{
            width: 29%;
            margin: 1%;
            margin-left: 3%;
            padding: 1%;
            cursor: pointer;
            filter:grayscale(25%);
            border: 1px solid rgba(0, 0, 0, 0.1);
            }
        
        .kk2 img:hover{
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            filter:grayscale(0%);
            }

        .kk3 {
          background: #7FB3D5;
          padding: 10px;
          color: white;
          border: 2px solid #1F618D;
          border-radius: 4px;
          cursor: pointer;
          width: 45%;
          margin: 1%;
          margin-left: 2%;
          padding: 1%;
          text-align: center
        }

        .kk3 a{
          color: white;
        }

        .kk3:hover {
          border: 2px solid black;
        }

        .sel_float_kk3 {float: left;}

    
/*** --------------- Manage Structure --------------- ***/
    .manage_struc {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .manage_struc p{
            font-size: 2rem; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
    
        .ms_main {
            margin-left: 24%;
        }
        
        .ms_main img{
            width: 25%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            filter:grayscale(25%);
            }
    
        .ms_sec {
            margin-left: 11%;
        }
        
        .ms_sec img{
            width: 25%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            filter:grayscale(25%);
            }
        
        .ms_sec img:hover{
            }
    
        .ms_float img{float: left;}
    



/*** --------------- Manage Committee --------------- ***/

    .container2 {
        font-family: 'book antiqua';
        font-size: 15px;
        background-color: #FBFCFC;
        padding: 30px;
        }

    .container3 {
        margin-left: 1%;
        width: 45%;
        float: none;
        }

    .container4 {
        width: 45%;
        margin-left: 4%;
        float: right;
        }





/*** --------------------- Profiles ------------------- ***/
    
    .profile {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .profile p{
            /**font-family: 'Georgia', serif;**/
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
        
        .profile p1{
            font-size: 18px;
            padding-bottom: 12px;
            font-variant: small-caps;
            }
    
        .profile img {
            float: left;
            width: 22.5%;
            margin-left: 26%;
            filter:grayscale(25%);
            }

        .profile table {
            padding-left: 3%;
            margin-top: 3%;
            }
    
    
    
    .profile_stsm {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .profile_stsm p{
            /**font-family: 'Georgia', serif;**/
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
        
        .profile_stsm p1{
            font-size: 18px;
            padding-bottom: 12px;
            font-variant: small-caps;
            }
    
        .profile_stsm table {
            padding-left: 3%;
            margin-top: 3%;
            }

/*** ------------------- Working Groups ----------------- ***/

    .wg {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .wg p{
            font-size: 2rem; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
    
    .wga {
        float: left;
        text-align: center;
        }
    
    .wga p{
        font-size: 5rem; 
        font-family: 'Georgia', serif;
        }
    
    .wga i{
        font-size: 4.5rem;
        padding-top: 20px;
        }
    
    .square {
        width: 100%;
        height: 7px;
        margin-top: -35px;
        }
    
    .wgb {
        width: 65%;
        margin-left: 25%
        }
    
    .wgb p{
        font-size: 1.5rem;
        font-variant:normal;
        text-align:justify;
        padding-top: 20px;
        font-family: 'Georgia', serif;
        }
    
    .wga_sub p{
        font-size: 2rem;
        font-variant: small-caps;
        text-align:justify;
        padding-top: 20px;
        font-family: 'Georgia', serif;
        }
    
    .wgb_sub {
        margin-top:  -2%;
        }
    
    .ms_main_wg {
        margin-left: 11%;
        margin-top: -6%;
        }
        
        .ms_main_wg img{
            width: 35%;
            margin: 1%;
            margin-left: 6%;
            padding: 1%;
            filter:grayscale(25%);
            }
    
    
    /** Working Group 1 **/
    .wg1 {
        width: 90%;
        margin-left: 10%;
        margin-top: -60px;
        }
    
    .wg1 p{
        color: #154360;
        }
    
    .wg1 i{
        color: #7FB3D5;
        }
    
    .wg1 p1{
        color: #1F618D;
        }
    
    .square_1 {
        background-color: aliceblue;
        }
    
/*** ---------------- WG1 periodic table -------------- ***/
    
.periodic {
  position: relative;
  height: 350px;
  margin-right: -1px;
  text-shadow: none;
}

.periodic-row {
  clear: both;
  height: 10%;
}
    
.periodic-row a:hover{color:#1F618D}

.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 150%;
  cursor: pointer;
}

.cell .symbol{
  color: black;
}
    
.cell .at_num{
  color: grey;
}

.cell:hover .element {
  border-color: #1F618D;
  background-color: #c9eaff;
}
    
.cell_v {
  float: left;
  position: relative;
  width: 5.55%;
  height: 150%;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 1px;
  right: 1px;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  cursor: default;
  pointer-events: none;
  background-color: #d6efff;
}

.cell_v .symbol{
  color: #75add1;
}

.at_details {
  opacity: 0;
  position: absolute;
  font-size: 0.2rem;
}

.at_num {
  position: absolute;
  font-size: 0.6rem;
  top: 0.5%;
  right: 0.5%;
}

.symbol {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  margin-top: -4px;
  font-size: 0.95rem;
  line-height: 1;
  height: 9px;
}

.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}
    
.ox_states {
    display: none;
    width: 400%;
    background-color: white;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    padding: 12px;
    margin-top: 100%;
    position: absolute;
    z-index: 1;
    }  

    
    
    
/*** --------------- WG3 properties of solvents ------------- ***/
    
.panel{
    position: absolute;
    top:0;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
    width: 100%;
    transition: transform 100ms;
    }
    
.panel2{
    padding-top: 15%;
    }
    
.panel1{  
    justify-content: center;
    align-items: center;
    background: #fcfcfc;
    border-top-width: 0.15rem;
    border-top-style: solid;
    border-top-color: #154360;
    border-bottom-width: 0.15rem;
    border-bottom-style: solid;
    border-bottom-color: #154360;
    width: 50%;
    z-index:1000;
    padding: 2%;
    color: #1F618D;
    }
    
.panel1 p4{  
    font-size: 1.1rem;
    color: #154360;
    font-weight: lighter;
    }
        
.panel[data-on='on']{
    transform: scale(1);
    }
    
.panel[data-on='off']{
    transform: scale(0);
    }

.container-2{
  vertical-align: middle;
}

.container-2 input#search{
  width: 100%;
  height: 10%;
  background: white;
  border-style: thin;
  border-color: lightgrey;
  font-size: 10pt;
  float: left;
  padding-left: 20px;
  margin-bottom: 5%;
  border-radius: 5px;
  transition: width .55s ease;
  }
    
.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
  }

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 150%;
 }

.container-2:hover input#search{
  width: 150%;
  }

.container-2:hover .icon{
  color: #93a2ad;
  }
    
.searcher{
    background: #fafafa;
    padding: 1%;
    border-top-width: 0.1rem;
    border-top-style: solid;
    border-top-color: #dbdbdb;
    border-bottom-width: 0.1rem;
    border-bottom-style: solid;
    border-bottom-color: #dbdbdb;
    min-height: 375px;
}
    
.table_solvents{
    padding-top: 2%;
    padding-left: 2%;
}

.table_solvents{
    padding-top: 2%;
    padding-left: 2%;
}
    
.table_solvents a{
    color: #1F618D;
}
    
.table_solvents a:hover{
    color: #7FB3D5;
}

.table_solvents td{
    padding-left: 5%;
}

.panel_solv{
    top:0;
    left:0;
    height:100%;
    width: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    }
    
.panel1_solv{  
    background: white;
    border-top-width: 0.15rem;
    border-top-style: solid;
    border-top-color: #154360;
    border-bottom-width: 0.15rem;
    border-bottom-style: solid;
    border-bottom-color: #154360;
    position: sticky;
    width: 75%;
    z-index:1000;
    padding: 2%;
    color: #1F618D;
    font-size: 0.75rem;
    position: absolute;
    margin-top: 325px;
    }
    
.panel_solv[data-on='on']{
    transform: scale(1);
    }
    
.panel_solv[data-on='off']{
    transform: scale(0);
    } 
    
.panel1_solv p4{  
    font-size: 1.2rem;
    color: #154360;
    font-weight: lighter;
    }
    
.panel1_solv p5{  
    font-size: 0.85rem;
    font-weight: bold;
    }

.panel2_solv{
    position: absolute;
    width: 100000px;
    height: 100000px;
    }
    
.panel1_solv a{  
    font-size: 0.7rem;
    color: #1F618D;
    }
    
.panel1_solv a:hover{  
    font-size: 0.7rem;
    color: #7FB3D5;
    }


    
    
    
/*** ------- WG3 synthesis and purification of ionic liquids ------- ***/
    
.button{
    background-color: #1F618D;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9rem;
    width: 2%;
    margin-left: 20%;
    }
    
.button:hover{
    background-color: #7FB3D5;
    color: white;
    }
    
.diff_a {
    color: #154360;
    font-size: 0.9rem;
}
    
.diff_a a{
    color: #379cde;
    text-decoration: underline;
}
    
.diff_a a:hover{
     color: #7FB3D5;
}
    
    
    
    
    


/*** --------------------- STSM ------------------- ***/
    .pub_text {
        padding-top: 3px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    
    .dropdown-content {
        display: none;
        width: 95%;
        /*box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);*/
        padding: 12px;
        text-decoration: none;
        }
    
        .dropdown-content p{
            float: right;
            width: 59%;
            clear: both;
            overflow: hidden;
            }
    
    .show {display: block;}
    
    .grantees {
          border-collapse: collapse;
          width: 105%;
            }

        .grantees td, .grantees th {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: left;
        }

        .grantees tr:nth-child(even){background-color: #f2f2f2;}

        .grantees tr:hover {background-color: #ebf7ff;}

        .grantees th {
          padding-top: 8px;
          padding-bottom: 8px;
          text-align: left;
          background-color: #154360;
          color: white;
        }
    
    
/*** --------------------- TS ------------------- ***/
    .trainsch {
          border-collapse: collapse;
          width: 105%;
            }

        .trainsch td, .trainsch th {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: left;
        }

        .trainsch tr:hover {background-color: #ebf7ff;}

    

    
    
/*** --------------------- Contact ------------------- ***/
div.elem-group {
  margin: 40px 0;
  padding-left: 20%;
}

label {
  display: block;
  padding-bottom: 4px;
  font-size: 1.1em;
}

input, select, textarea {
  border-radius: 2px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1em;
  width: 75%;
  padding: 8px;
}

textarea {
  height: 250px;
}

button {
  background: #7FB3D5;
  padding: 10px;
  color: white;
  border: 2px solid #1F618D;
  font-size: 1.1em;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  border: 2px solid black;
}
}
































/* Tablet & Phone Styles */
 @media only screen and (max-width: 1001px) {
   
    body {font-family: 'Martel Sans', sans-serif; margin:0; padding:0; line-height:1.2; color:#686868; background-color:white;font-size: 2.5rem}
    h1 {font-family:'Georgia', serif;}
    h2 {font-size: 3rem}
    hr {border-color:#D7D7D7;}
    a{color:#893030;text-decoration: none;cursor:pointer;}
    a:hover{color:#db4c4c}
    
    .s_divisor {
        background-color: white;
        height: 20px;
        }
    
    .divisor {
        background-color: white;
        height: 60px;
        }
    
    .b_divisor {
        background-color: white;
        height: 120px;
        }
     
     .display_only_web {
         display: none;
     }
     
     .display_only_mobile {
         display: block;
     }
    
/*** ------------------------ Top ---------------------- ***/
    .top {
        height: 40px;
        background-color: black;
        }
    
    .twitter_top {
        padding: 10px;
        color: white;
        margin: 0.1%;
        margin-left: 2%;
        }

    .twitter_top:hover {
        color: #D7D7D7;
        }
    
    .logo_top {
        padding: 10px;
        color: white;
        margin: 0.1%;
        margin-left: 0.2%;
        }

    .logo_top:hover {
        color: #D7D7D7;
        }
    
    
    
/*** ------------------------ Menu ---------------------- ***/
    .container {
        background-color: #FBFCFC;
        padding: 40px;
        border-bottom: 0.75px solid #D7D7D7;
        }
    
    .logo {
        float: left;
        padding-left: 5%;
        margin-right: 75px;
        margin-top: -35px;
        }
    
    .logo img {
        padding-top: 10px;
        height: 100px;        
        }
    
     
     .header_desk {
         display: none;
     }
     
    .menu_phone {
        clear: both;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 16px;
        text-transform: uppercase;
        background-color: white;
        text-align: center;
        line-height:1;
        border-bottom: 0.75px solid #D7D7D7;
        }
    
        .menu_phone ul {
            display: none;
            padding: 0;
            margin: 0;
            padding-top: 10px;
        }
    
        .menu_phone:hover ul {
            display: block;
        }
    
        .menu_phone li {
            padding-top: 10px;
            padding-bottom: 10px;
            }

        .menu_phone a {
            text-decoration: none;
            color: #212121;
            }

        .menu_phone a:hover {
            color: #9E9E9E;
            }
    
    
    
    .cover {
        /* The image used */
        background-image: url(img/group3.png);
        /* Set a specific height */
        height: 450px;
        /* Create a parallax scrolling effect */
        background-attachment: fixed;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        }
    
    .subcover {
        margin-top: 0px;
        height: 100%;
        text-align: center;
        }

    .subcover p{
        width: 80%;
        padding-top: 10%;
        padding-left: 20%;
        text-align: center;
        font-size: 2.5rem;
        color: white;
        font-family: 'Open Sans';
        }
    
    .core {
        background-color: white;
        padding: 7%;
        font-size: 2.2rem;
        line-height: 1.7;
        text-align: justify;
    }
    
    .twitter {
        display: none;
        }
    
    .description {
        width: 100%;
        }
    
        .description p{
            font-size: 2.5rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            font-variant: small-caps;
            text-align: center;
            }
    
        .description ul {
            padding-left: 5%;
            }
    
        .description img {
            float: left;
            width: 37.5%;
            margin-right: 4%;
            margin-bottom: 4%;
            }
    
        .description sup {
            font-variant: normal;
            font-size: 12px;
        }

    
/*** ----------------------  Footer  -------------------- ***/
    .footer {
        clear: both;
        overflow: hidden;
        background-color: #FAFAFA;
        border-top: 0.75px solid #D7D7D7;
        /* The image used */
        background-image: url(img/lab.jpeg);
        /* Set a specific height */
        background-position: center;
        background-size: cover;
        }
    
    .subfooter {
        margin-top: 0px;
        height: 100%;
        background-color: rgba(30, 30, 30, 0.65);
        padding: 5%;
        font-size: 0.9rem;
        text-align: center;
        color: whitesmoke;
        line-height: 2;
        }
    
        .subfooter a {
            text-decoration: none;
            color: #D0D3D4;
            }

        .subfooter a:hover {
            color: #A6ACAF;
            }
    
    .bottom {
        height: 40px;
        background-color: black;
        }
    
/*** --------------- Selected publication --------------- ***/
    .sel_pub {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .sel_pub p{
            /**font-family: 'Georgia', serif;**/
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }

        .sel_pub p1{
            font-size: 1.05rem; 
            font-weight: bold; 
            font-variant: small-caps;
            }

        .sel_float img{float: left;}
        
        .kk1 img{
            width: 45%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            cursor: pointer;
            filter:grayscale(25%);
            border: 1px solid rgba(0, 0, 0, 0.1);
            }
        
        .kk1 img:hover{
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            filter:grayscale(0%);
            }

        .kk2 img{
            width: 29%;
            margin: 1%;
            margin-left: 3%;
            padding: 1%;
            cursor: pointer;
            filter:grayscale(25%);
            border: 1px solid rgba(0, 0, 0, 0.1);
            }
        
        .kk2 img:hover{
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            filter:grayscale(0%);
            }

        .kk3 {
          background: #7FB3D5;
          padding: 10px;
          color: white;
          border: 2px solid #1F618D;
          border-radius: 4px;
          cursor: pointer;
          width: 45%;
          margin: 1%;
          margin-left: 2%;
          padding: 1%;
          text-align: center
        }

        .kk3 a{
          color: white;
        }

        .kk3:hover {
          border: 2px solid black;
        }

        .sel_float_kk3 {float: left;}

    
/*** --------------- Manage Structure --------------- ***/
    .manage_struc {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .manage_struc p{
            font-size: 2rem; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
    
        .ms_main {
            margin-left: 24%;
        }
        
        .ms_main img{
            width: 25%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            filter:grayscale(25%);
            }
    
        .ms_sec {
            margin-left: 11%;
        }
        
        .ms_sec img{
            width: 25%;
            margin: 1%;
            margin-left: 2%;
            padding: 1%;
            filter:grayscale(25%);
            }
        
        .ms_sec img:hover{
            }
    
        .ms_float img{float: left;}
    



/*** --------------- Manage Committee --------------- ***/

    .container2 {
        font-family: 'book antiqua';
        font-size: 15px;
        background-color: #FBFCFC;
        padding: 30px;
        }

    .container3 {
        margin-left: 1%;
        width: 45%;
        float: none;
        }

    .container4 {
        width: 45%;
        margin-left: 4%;
        float: right;
        }





/*** --------------------- Profiles ------------------- ***/
    
    .profile {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .profile p{
            /**font-family: 'Georgia', serif;**/
            font-size: 1.8rem; 
            font-weight: bold; 
            padding-bottom: 12px;
            margin-top: -6%;
            font-variant: small-caps;
            text-align: center;
            }
        
        .profile p1{
            font-size: 18px;
            padding-bottom: 12px;
            font-variant: small-caps;
            }
    
        .profile img {
            float: left;
            width: 22.5%;
            margin-left: 26%;
            filter:grayscale(25%);
            }

        .profile table {
            padding-left: 3%;
            margin-top: 3%;
            }

/*** ------------------- Working Groups ----------------- ***/

    .wg {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        }
    
        .wg p{
            font-size: 2rem; 
            padding-bottom: 12px;
            font-variant: small-caps;
            text-align: center;
            }
    
    .wga {
        float: left;
        text-align: center;
        }
    
    .wga p{
        font-size: 3rem; 
        font-family: 'Georgia', serif;
        }
    
    .wga i{
        display: none;
        }
    
    .square {
        display: none;
        }
    
    .wgb {
        width: 65%;
        margin-left: 25%
        }
    
    .wgb p{
        font-size: 3rem;
        font-variant:normal;
        text-align:justify;
        padding-top: 20px;
        font-family: 'Georgia', serif;
        }
    
    .wga_sub p{
        font-size: 3rem;
        font-variant: small-caps;
        text-align:justify;
        padding-top: 20px;
        font-family: 'Georgia', serif;
        }
    
    .wgb_sub {
        margin-top:  -2%;
        }
    
    .ms_main_wg {
        margin-left: 11%;
        margin-top: -6%;
        }
        
        .ms_main_wg img{
            width: 35%;
            margin: 1%;
            margin-left: 6%;
            padding: 1%;
            filter:grayscale(25%);
            }
    
    
    /** Working Group 1 **/
    .wg1 {
        width: 90%;
        margin-left: 10%;
        margin-top: -60px;
        }
    
    .wg1 p{
        color: #154360;
        }
    
    .wg1 i{
        color: #7FB3D5;
        }
    
    .wg1 p1{
        color: #1F618D;
        }
    
    .square_1 {
        background-color: aliceblue;
        }
    
/*** ---------------- WG1 periodic table -------------- ***/
    
.periodic {
  position: relative;
  height: 350px;
  margin-right: -1px;
  text-shadow: none;
}

.periodic-row {
  clear: both;
  height: 10%;
}
    
.periodic-row a:hover{color:#1F618D}

.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 150%;
  cursor: pointer;
}

.cell .symbol{
  color: black;
}
    
.cell .at_num{
  color: grey;
}

.cell:hover .element {
  border-color: #1F618D;
  background-color: #c9eaff;
}
    
.cell_v {
  float: left;
  position: relative;
  width: 5.55%;
  height: 150%;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 1px;
  right: 1px;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.05);
  text-align: center;
  cursor: default;
  pointer-events: none;
  background-color: #d6efff;
}

.cell_v .symbol{
  color: #75add1;
}

.at_details {
  opacity: 0;
  position: absolute;
  font-size: 0.2rem;
}

.at_num {
  position: absolute;
  font-size: 0.6rem;
  top: 0.5%;
  right: 0.5%;
}

.symbol {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  margin-top: -4px;
  font-size: 0.95rem;
  line-height: 1;
  height: 9px;
}

.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}
    
.ox_states {
    display: none;
    width: 400%;
    background-color: white;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    padding: 12px;
    margin-top: 100%;
    position: absolute;
    z-index: 1;
    }
    
     
     
     
/*** --------------------- STSM ------------------- ***/
    .pub_text {
        padding-top: 3px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
    
    .dropdown-content {
        display: none;
        width: 95%;
        /*box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);*/
        padding: 12px;
        text-decoration: none;
        }
    
        .dropdown-content p{
            float: right;
            width: 59%;
            clear: both;
            overflow: hidden;
            }
    
    .show {display: block;}
    
    .grantees {
          border-collapse: collapse;
          width: 105%;
            }

        .grantees td, .grantees th {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: left;
        }

        .grantees tr:nth-child(even){background-color: #f2f2f2;}

        .grantees tr:hover {background-color: #ebf7ff;}

        .grantees th {
          padding-top: 8px;
          padding-bottom: 8px;
          text-align: left;
          background-color: #154360;
          color: white;
        }

     
     
/*** --------------------- TS ------------------- ***/
    .trainsch {
          border-collapse: collapse;
          width: 105%;
            }

        .trainsch td, .trainsch th {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: left;
        }

        .trainsch tr:hover {background-color: #ebf7ff;}

     
     

/*** --------------------- Contact ------------------- ***/
div.elem-group {
  margin: 40px 0;
  padding-left: 20%;
}

label {
  display: block;
  padding-bottom: 4px;
  font-size: 1.1em;
}

input, select, textarea {
  border-radius: 2px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1em;
  width: 75%;
  padding: 8px;
}

textarea {
  height: 250px;
}

button {
  background: #7FB3D5;
  padding: 10px;
  color: white;
  border: 2px solid #1F618D;
  font-size: 1.1em;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  border: 2px solid black;
}
}