Team:IISER Kolkata/common.css

1. top_title, .logo_2019, #firstHeading{

display: none !important; }

1. content{

width: 100vw !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: absolute !important; left: 0 !important; }

/*fonts*/ @font-face {

   src: url("https://static.igem.org/mediawiki/2019/1/19/T--IISER_Kolkata--Mohave.otf");
   font-family: mohave;

} @font-face {

   src: url("https://static.igem.org/mediawiki/2019/b/b3/T--IISER_Kolkata--Signika.ttf");
   font-family: signika;

} @font-face {

   src: url("https://static.igem.org/mediawiki/2019/5/55/T--IISER_Kolkata--social.ttf");
   font-family: social;

}

/*body*/

• {

   margin: 0;
   padding: 0;
   box-sizing: border-box;

} body {

   overflow-y: scroll;
   overflow-x: hidden;

}

/*navbar*/

1. navbar {

   width: 100vw;
   height: 6vmax;
   background-color: black;
   display: flex;
   flex-wrap: wrap;
   align-items: center;  
   position: fixed;
   top: 16px;
   left: 0vw;
   z-index: 10;
   box-shadow: 0vw 0.2vw 0.5vw 0.1vw #333333;

}

1. navbar #mobdiv {

   display: flex;  
   align-items: center;
   justify-content: space-between;
   width: auto;
   height: 6vmax;
   background-color: black;

}

1. mobdiv #logo {

   margin-left: 2vmax;
   display: flex;
   height: 100%;
   width: 14vmax;    

}

1. logo > a {

   width: 100%;
   padding: 0.2vmin 0.5vmin 0.2vmin 0.5vmin;

}

1. logo > a > img {

   height: 100%;   

}

1. mobdiv #menuicon {

   display: none;

}

1. navbar ul {

   list-style: none;
   display: flex;
   margin: 0;

}

1. navbar > ul > li {

   position: relative;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. navbar ul li div {

   display: flex;
   align-items: center;

}

1. navbar ul li div a {

   width: 100%; 
   text-decoration: none;
   font-family: mohave; 
   cursor: pointer; 
   padding: 1.5vmax;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. navbar > ul > li > div {

   width: auto;
   height: 6vmax;

}

1. navbar > ul > li > div > a {

   color: white; 
   font-size: 2vmax; 

}

1. navbar > ul > li:hover > div > a {

   color: black;

}

1. navbar > ul > li:hover {

   background-color: #65ce45;

}

1. navbar > ul > li:hover .dropdown li {

   display: flex;    
   -webkit-animation: fade 2s linear;
   -moz-animation: fade 0.2s linear;
   -o-animation: fade 0.2s linear;
   animation: fade 0.2s linear;

} .dropdown {

   position: absolute;
   display: flex;
   flex-direction: column;
   background-color: #74ed46;
   box-shadow: 0vw 0.2vw 0.5vw 0.1vw #333333;

} .dropdown > li {

   display: none;

} .dropdown > li > div {

   height: 3.5vmax;
   width: 100%;

} .dropdown > li > div > a {

   color: black;
   font-size: 1.8vmax; 

} .dropdown li:hover > div > a {

   color: black;

} .dropdown li:hover {

   background-color: #65ce45;

} @-webkit-keyframes fade {

     0% { opacity: 0;}   
   100% { opacity: 1;}

} @-moz-keyframes fade {

     0% { opacity: 0;}   
   100% { opacity: 1;}

}

/*mobile mode*/ @media screen and (orientation: portrait) {

   #navbar {  
       flex-direction: column;
       height: auto;
       background: none;
       box-shadow: none;
   }
   #navbar {  
       flex-direction: column;
       height: auto;
   }
   #navbar #mobdiv {
       width: 100%;
       height: 10vmax;
       display: flex;
       flex-direction: row;
   }
   #mobdiv #logo {
       width: 30%;
       height: 100%;
   }
   #logo a img {
       height: 100%;
       width: auto;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   #mobdiv #menuicon {
       display: flex;
       height: 3.5vmax;
       width: 3.7vmax;
       cursor: pointer;   
       margin-right: 5vmax;     
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   #bar1, #bar2, #bar3 {
       margin: 0.3vmax 0vh 0.3vmax 0vh;
       width: 3.7vmax;
       height: 0.3vmax;
       background-color: white;
       border-radius: 25%;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   .change #bar1 {
       margin: 0vw;
       -webkit-transform: rotate(-45deg) translateY(0.35vmax);
       -moz-transform: rotate(-45deg) translateY(0.35vmax);
       -o-transform: rotate(-45deg) translateY(0.35vmax);
       transform: rotate(-45deg) translateY(0.35vmax);
   }
   .change #bar2 {
       margin: 0vw;
       opacity: 0;
   }
   .change #bar3 {
       margin: 0vw;
       -webkit-transform: rotate(45deg) translateY(-0.35vmax);
       -moz-transform: rotate(45deg) translateY(-0.35vmax);
       -o-transform: rotate(45deg) translateY(-0.35vmax);
       transform: rotate(45deg) translateY(-0.35vmax);
   }
   #navbar > ul {
       width: auto;
       height: auto;
       display: none;
       align-self: flex-end;
       flex-direction: column; 
       background-color: #74ed46;
       box-shadow: 0vw 0.2vw 0.5vw 0.1vw #333333;
   }
   #navbar > ul > li {  
       width: 25vw;
       height: 6vmax;  
       display: flex;
       flex-direction: row-reverse;
       justify-content: flex-start;
       align-items: center;
   }
   #navbar > ul > li > div {
       height: 6vmax;
   }
   #navbar > ul > li > div > a {
       text-align: center;
       width: 25vw;
       color: black;       
       font-size: 3vmax;  
   }
   #navbar > ul.visible {
       display: flex;
   }
   #navbar > ul > li:hover .dropdown {
       display: flex;    
       -webkit-animation: fade 2s linear;
       -moz-animation: fade 0.2s linear;
       -o-animation: fade 0.2s linear;
       animation: fade 0.2s linear;
   }
   #navbar .dropdown {
       width: auto;
       position: relative;
       display: none;
       flex-direction: column;
       align-self: flex-start;
       box-shadow: 0vw 0.2vw 0.5vw 0.1vw #333333;
   }
   #navbar .dropdown > li {
       display: flex;
       width: 30vw;
       height: 6vmax; 
       justify-content: center;
       align-items: center;  
   }
   #navbar .dropdown > li > div {
       height: 6vmax;
   }
   #navbar .dropdown > li > div > a {
       text-align: center;
       width: 30vw;
       font-size: 3vmax;
   }

}