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/1/18/T--IISER_Kolkata--social.otf");
   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;

}

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: 0vmax 0.2vmax 0.5vmax 0.1vmax #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;}

}

1. container {

   width: 100vw;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 6vmax;
   background-color: white;

} section.sec {

   position: relative;
   width: 100vw;
   display: flex;
   flex-direction: column;
   padding: 2vh 10vw 2vh 10vw;

} .sec.white {

   background-color: white;

} .sec.green {

   background-color: #74ed46;

} .sec.black {

   background-color: #222222;

}

1. container .sec p, #container .sec li {

   font-size: 1.4vmax;
   font-family: signika;
   padding: 0.5vmax 0 0.5vmax 0;
   line-height: 1.4;
   text-align: justify;
   word-wrap: break-word;

} .sec.white p, .sec.green p {

   color: black;    

} .sec.black p {

   color: #dddddd;    

}

1. container .sec h3 {

   align-self: center;
   text-align: center;
   font-size: 2.2vmax;
   font-family: signika;
   padding: 1vmax 0 1vmax 0;
   line-height: 1.4;

} .sec.white h3, .sec.green h3 {

   color: #444444;  

} .sec.black h3 {

   color: whitesmoke;    

}

1. container h1.heading {

   align-self: center;
   font-size: 4vmax;
   font-family: mohave;
   padding: 2.5vmax 0 2.5vmax 0;
   text-align: center;
   text-transform: uppercase;
   color: #333333;
   line-height: 1.4;
   margin: 0 !important;

}

1. container .sec figure {

   align-self: center; 
   margin: 2vmax; 
   text-align: center;  

}

1. container .sec figure img.bigimage {

   width: 50vw;
   height: auto;

}

1. container .sec figure img.smallimage {

   width: 25vw;
   height: auto;

}

1. container .sec figure img.fullimage {

   width: 80vw;
   height: auto;

}

1. container .sec figure figcaption {

   font-size: 1.4vmax;
   line-height: 1.4;
   font-family: mohave;
   padding: 0.5vmax 0 0.5vmax 0;
   margin-top: 0.5vmax;

}

1. container .sec table.tabular {

   align-self: center; 
   width: auto;
   font-size: 1.4vmax; 
   font-family: signika;
   border-collapse: collapse;
   caption-side: bottom;
   margin: 2vmax;
   overflow: auto;

}

1. container .sec table.tabular caption {

   font-size: 1.4vmax; 
   line-height: 1.4;    
   font-family: mohave;
   padding: 0.5vmax 0 0.5vmax 0;
   margin-top: 0.5vmax;
   text-align: center;

}

1. container .sec table.tabular td {

   padding: 1vmax;
   background-color: whitesmoke;
   text-align: center;
   border: 0.1vmax solid black; 
   margin: 0;
   line-height: 1.4;

}

1. container .sec table.tabular th {

   padding: 1vmax;
   background-color: #74ed46;
   border: 0.1vw solid black; 
   margin: 0v;
   line-height: 1.4;

}

1. container .sec video {

   align-self: center; 
   margin: 2vmax;
   width: 50vw;
   height: auto;  

} /*image carousel*/ .slidediv {

   align-self: center;
   position: relative;
   width: 48vw;
   height: 32vw;
   margin: 2vmax;

} img.slide {

   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} img.slide.activeslide {

   opacity: 1;

} .leftimg, .rightimg {

   cursor: pointer;
   position: absolute;
   top: 50%;
   height: 5vmax;
   margin-top: -2.5vmax;
   width: auto;
   padding: 1vmax;
   background: rgba(0,0,0,0.5);
   color: #74ed46;
   font-family: mohave; 
   font-weight: bold;
   font-size: 2vmax;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .leftimg:hover, .rightimg:hover {

   background: rgba(0,0,0,1);

} .leftimg {

   left: 0;

} .rightimg {

   right: 0;

} .dotdiv {

   align-self: center;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin: 1vmax;

} span.dot {

   height: 1vmax;
   width: 1vmax;
   background-color: #74ed46;
   border-radius: 100%;
   margin: 0 0.5vmax 0 0.5vmax;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;        

} span.dot.activedot {

   background-color: black;

}

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

   #navbar {  
       flex-direction: column;
       height: auto;
       background: 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: 0vmax 0.2vmax 0.5vmax 0.1vmax #333333;
   }
   #navbar > ul > li {  
       width: 35vw;
       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: 35vw;
       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: 0vmax 0.2vmax 0.5vmax 0.1vmax #333333;
   }
   #navbar .dropdown > li {
       display: flex;
       width: 40vw;
       height: 6vmax; 
       justify-content: center;
       align-items: center;  
   }
   #navbar .dropdown > li > div {
       height: 6vmax;
   }
   #navbar .dropdown > li > div > a {
       text-align: center;
       width: 40vw;
       font-size: 3vmax;
   }

   #container {
       top: 10vmax;
   }
   #container .sec p, #container .sec li {
       font-size: 2.4vmax;
       padding: 1vmax 0 1vmax 0;
   }
   #container .sec h3 {
       font-size: 3.6vmax;
       padding: 1.5vmax 0 1.5vmax 0;
   }
   #container h1.heading {
       font-size: 7vmax;
       padding: 4vmax 0 4vmax 0;
   } 
   #container h1.heading {
       font-size: 7vmax;
       padding: 4vmax 0 4vmax 0;
   } 
   #container .sec figure img.bigimage {
       width: 80vw;
       height: auto;
   }
   #container .sec figure img.smallimage {
       width: 50vw;
       height: auto;
   }   
   #container .sec figure img.fullimage {
       width: 100vw;
       height: auto;
   }
   #container .sec figure figcaption {
       font-size: 2.4vmax;
   }
   #container .sec table.tabular {  
       font-size: 2.4vmax; 
   } 
   #container .sec table.tabular caption {
       font-size: 2.4vmax; 
   }
   #container .sec video {
       width: 80vw;
       height: auto;  
   }
   /*image carousel*/
   .slidediv {
       width: 72vw;
       height: 48vw;
   }

}