Team:Aachen/Aachen style

@font-face{font-family:'FontAwesome';

    src:url('https://static.igem.org/mediawiki/2016/5/50/T--Aachen--fontawesome_webfonte0a5.eot?v=4.3.0');
    src:url('https://static.igem.org/mediawiki/2016/b/b0/T--Aachen--fontawesome_webfontd41d.eot?#iefix&v=4.3.0') format('embedded-opentype'),
    url('https://static.igem.org/mediawiki/2016/b/b8/T--Aachen--fontawesome_webfonte0a53.woff') format('woff'),
    url('https://static.igem.org/mediawiki/2016/e/e5/T--Aachen--fontawesome_webfonte0a52.ttf?v=4.3.0') format('truetype');
    font-weight:normal;
    font-style:normal

}

body{

    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;
    height: auto;
    width: auto;
    background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Aachen--background.JPG');
    font-size:14px;
    line-height:20px;
    color:#414141;

}

/*code to highlight current tab */

nav.main-navigation ul li a.current {

   color: #005b04;

}

a {

   color:#000;
   text-decoration:none

} a:hover {

   text-decoration:none

}

input[type=text],input[type=password], textarea{ border:1px solid #ddd;padding:5px } input[type=submit] h1,h2,h3,h4,h5,h6 {

   font-weight:normal;
   margin:0 0 15px;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;

} h2 { font-size:25px;

   line-height:30px

} img{

   max-width:100%;height:auto

} p{

   margin-bottom:20px;

font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ; } div.floatleft p {

   /* font-style: italic; */

} div.floatleft p {

   /* font-style: italic; */

} .alignleft{float:left;margin-left:0px} .aligncenter{display:block;margin:10px auto} .alignright{float:right;margin-left:10px}

.floatleft{float:left} .floatright{float:right}

.structure{

   display:block;
   margin:0 auto;
   transition: all 1.3s ease 0s;
   -moz-transition: all 1.3s ease 0s;
   -webkit-transition: all 1.3s ease 0s;
   -o-transition: all 1.3s ease 0s
    ;-ms-transition: all 1.3s ease 0s;
   overflow: hidden;

} .fix {

   overflow: visible;

}

/* Code for header */ .header_area{

       margin-top: 107px;
      border-left: 10px  solid transparent;
   border-right: 10px solid transparent;
     

} .header {

   position: fixed;
   z-index:1000;
   padding: 10px 0px 0px 0px;
   margin: 0 auto;
   margin-top: 10px;
   top:0;
   left:0;
   right: 0;
   width: 100%;
   background-color: #FFFFFF;
   transition: all 1.3s ease 0s;
   -moz-transition: all 1.3s ease 0s;
   -webkit-transition: all 1.3s ease 0s;
   -o-transition: all 1.3s ease 0s;
   -ms-transition: all 1.3s ease 0s;

} .logo{} .logo span {

   color:#005b04;

} .logo h1 {

   font-size: 36px;
   margin: 30px 0;
   color:#005b04;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;

} .mainmenu {

   margin-top: 20px;
   margin-right: -15px;

} .mainmenu ul {

   margin:0;
   padding:0;
   list-style:none

} .mainmenu ul li {

   float:left

} .mainmenu ul li a {

   display: block;
   padding: 10px 15px;
   text-transform: uppercase;
   color: #353535;
   font-size: 14px;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;
   font-weight: bolder;

} .mainmenu ul li a:hover,.current-page-item,.active{color:#005b04 !important;}

.header_bottom_area {

   background: #005b04;
   min-height: 50px;

} .header_bottom_area_team {

   background: #d1d1d1;
   min-height: 50px;

} .main_content_area {

   margin-top: -50px;
   

} .content_area {

   background: none repeat scroll 0 0 #FFFFFF;
 

}

/* Code end for header */ /* code for footer */ .footer_area {

   background: none repeat scroll 0 0 #d1d1d1;
    margin-top: 40px; 
   overflow: hidden;
   max-height: 90px;

} .footer{

   background: none repeat scroll 0 0 #005b04;
  border-left: 10px  solid transparent;
   border-right: 10px solid transparent;
   margin: 0 auto;
   
   transition: all 1.3s ease 0s;-moz-transition: all 1.3s ease 0s;-webkit-transition: all 1.3s ease 0s;-o-transition: all 1.3s ease 0s;-ms-transition: all 1.3s ease 0s;

} .single_footer_container{

   margin-left: -25px;
   overflow: hidden;
}

.single_footer{

   color: #FFFFFF;
   margin-left: 25px;
   overflow: hidden;
   padding: 2px;
   
   

}

.single_footer a{

   color: #7fb983;
   font-size: 16px;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;
   

} .single_footer h2{

   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;

}

/* code ends for footer */

/* Team page to display the green bar */

.single_header_title {

   background: none repeat scroll 0 0  #005b04;
   min-height: 50px;
   max-height: 50px;
   margin-bottom: 30px;
   display: flex; 
  align-items: center;

} .single_header_title h1 {

   color: #FFFFFF;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;
   font-size: 24px;
   line-height: 45px;
   padding-left: 10px;

} a.anchor {

   color: white;
   text-decoration: none;
   display: block;
   padding-top:-20px;

} /* Team page codes end to display the green bar */ .selectnav{}

/* Code for the page scroll bar */ .site-header {

   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 9999;
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
   padding: 10px 0;
   -webkit-transition: all 000ms;
   -moz-transition: all 00ms;
   -o-transition: all 000ms;
   transition: all 00ms;

} @media (max-width: 991px) {

   .site-header {
       position: relative;
   }

}

.scrolled-header {

   background: #FFFFFF;
   padding: 0;
   border-color: #FFFFFF;

} .scrolled-header .main-navigation ul > li > a {

   color: #FFFFFF;

} .go-top {

   width: 46px!important;
   height: 46px!important;
   line-height: 46px!important;
   font-size: 14px!important;

} .go-top {

   display: inline-block;
   height: 40px;
   width: 40px;
   line-height: 40px;
   position: fixed;
   bottom: 60px;
   right: 10px;
   z-index: 77;
   font-size: 18px;
   text-align: center;

   color: #fff !important;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;

}

.go-top.go-top-visible {

   /* the button becomes visible */
   visibility: visible;
   opacity: 1;

} .go-top.go-top-fade-out {

   opacity: 1;

} @media (max-width: 991px) {

   .go-top {
       right: 20px;
       bottom: 20px;
   }

} @media (min-width: 992px) {

   .go-top {
       height: 60px;
       width: 60px;
       line-height: 60px;
       right: 30px;
       bottom: 60px;
   }

}

@media (max-width: 767px) {

   .hidden-xs {
       display: none !important;
   }

} @media (min-width: 768px) and (max-width: 991px) {

   .hidden-sm {
       display: none !important;
   }

}

/* Code end for the page scroll bar */

/* Code for the drop down meanu */ nav.main-navigation {

   position: relative;
   z-index: 9999;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;

} nav.main-navigation ul {

   margin: 0;
   padding: 0;
   list-style: none;

} nav.main-navigation ul li {

   position: relative;
   display: inline-block;
   padding: 10px;

} nav.main-navigation ul li ul.sub-menu {

   position: absolute;
   top: 82%;
   left: 0;
   width: 195px;
   background: #fff;
   padding: 15px 0;
   -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
   visibility: hidden;
   opacity: 0;
   -moz-transform: translate3d(0, 20px, 0);
   -o-transform: translate3d(0, 20px, 0);
   -ms-transform: translate3d(0, 20px, 0);
   -webkit-transform: translate3d(0, 20px, 0);
   transform: translate3d(0, 20px, 0);
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;

} nav.main-navigation ul li ul.sub-menu li {

   display: block;
   padding: 0;
   margin: 0;

} nav.main-navigation ul li ul.sub-menu li a {

   text-transform: capitalize;
   color: #7fb983;
   font-size: 13px;
   padding: 5px 30px;

} nav.main-navigation ul li:hover ul.sub-menu {

   visibility: visible;
   opacity: 1;
   -moz-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

}

nav.main-navigation ul a {

   font-size: 13px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: #7fb983;
   display: block;
   padding: 15px 10px;

} nav.main-navigation ul a i {

   margin-left: 7px;

} @media (min-width: 992px) and (max-width: 1200px) {

   nav.main-navigation ul a {
       padding: 10px 0;
   }

} nav.responsive-menu ul {

   padding: 25px 15px;
   margin: 0;
   list-style: none;

} nav.responsive-menu ul li {

   display: block;
   position: relative;
   z-index: 9999;

} nav.responsive-menu ul li .show-submenu {

   position: absolute;
   top: 5px;
   right: 15px;
   cursor: pointer;
   color: #a8a8a8;

} nav.responsive-menu ul li .sub-menu {

   display: none;
   padding: 0 0 0 30px;

} nav.responsive-menu ul li .sub-menu.open {

   display: block;

} nav.responsive-menu ul li .sub-menu li {

   position: relative;
   margin: 0;
   padding: 0 0 0 10px;

} nav.responsive-menu ul li .sub-menu li:before {

   content: '-';
   position: absolute;
   left: 0;
   top: 2px;

} nav.responsive-menu ul li .sub-menu a {

   padding: 2px;
   text-transform: capitalize;

} nav.responsive-menu a {

   font-size: 13px;
   text-transform: uppercase;
   display: block;
   padding: 5px 10px;
   margin: 0;
   color: #757575;
   z-index: 9999;

} /* Code end for the page drop down */

/* Code to change the background of header on scroll */ .activeColour {

   background-color: #FFFFFF}

/* Code end for the background of header on scroll */ /* Code for the grey image */ img.grayscale{

   filter: gray; /* IE6-9 */
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   -webkit-transition: all 0.0s ease-in-out;
   -moz-transition: all 0.0s ease-in-out;
   -o-transition: all 0.0s ease-in-out;
   -ms-transition: all 0.0s ease-in-out;
   transition: all 0.0s ease-in-out;

}

a.activeimage img.grayscale {

   filter: none;
   -webkit-filter: grayscale(0%);
   -webkit-transform: scale(1.07);
   -moz-transform: scale(1.071);
   -o-transform: scale(1.07);
   transform: scale(1.07);

}

/* Disable grayscale on hover */ img.grayscaleSupporters{

   filter: gray; /* IE6-9 */
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   -webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

} img.grayscaleSupporters:hover {

   filter: gray;
   filter: none;
   -webkit-filter: grayscale(0);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);

}

/* Code end for the grey image */

/* Code for the green image team icon */ img.grayscaleTeam{

   filter: gray; /* IE6-9 */
   filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

}

/* Disable grayscale on hover */ img.grayscaleTeam:hover {

   filter: none;
   -webkit-filter: grayscale(0);

}

/* Code end for the green image team icon */

/* Code for the fon awesome */ .fa{

   display:inline-block;
   font:normal normal normal 14px/1 FontAwesome;
   font-size:inherit;text-rendering:auto;
   -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
   transform:translate(0, 0)

}

.fa-angle-up:before {content:"\f106"} .fa-angle-down:before{content:"\f107"} .pull-right{float:right} .fa-chevron-up:before{content:"\f077"} .fa-chevron-circle-up:before{content:"\f139";

   color: #7fb983;

} .fa-chevron-circle-down:before{content:"\f13a"} .fa-3x{

   font-size: 30px;

}

.fa-facebook-square:before{

   content: "\f082 ";
   color: #7fb983;

} .fa-twitter-square:before{

   content: "\f081 ";
   color: #7fb983;

} .fa-instagram:before{

   content: "\f16d";
   color: #7fb983;

}

.fa-youtube-square:before{

   content: "\f166";
   color: #7fb983;

} .fa-arrow-right:before{

   content: "\f061";

}

.img-circle {

   height: 195px;
   width: 185px;
   border-radius: 50%;
   z-index:0;
   position: absolute;

}

ol li{color:#7fb983;} ol li span{color:#000;}

/* Code end for the font awesome */

/* for Team Page*/ /* .portfolio-area{min-height:500px !important;}*/

.portfolio-area li{

   float: left;
   margin: 0 3px 20px 0;
   overflow: hidden;
   padding: 5px;
   display:inline-block;

}

.home-portfolio-text a{

   color: #000000;
   display: block;
  font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif  ;
   font-size: 18px;

}

.home-portfolio-text p{

   font-size: 15px;
   color: #65a42d;
   font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif ;

}

.portfolio-categ{

   margin-bottom:-10px;
   display: flex;
   list-style:none;
   overflow:hidden;
   margin-left: 40px;
   margin-right: 40px;

}

.portfolio-categ li img{

   margin: -4px;
   margin: 0;
   height: 60px;

}

/*code for class table*/

tr { border:2pt solid black; }

/*shapes*/ .flag {

   width: 200px;
   height: 250px;
   position: relative;
   background: #d1d1d1;
   color: Black;
   font-size: 16px;
   text-align: center;

} .flag:after {

   content: close-quote;
   position: absolute;
   left: 0px;
   bottom: 0px;
   width: 0px;
   height: 0;
   border-bottom: 79px solid white;
   border-left: 94px solid transparent;
   border-right: 94px solid transparent;

}

.flag1 {

   width: auto;
   height: 300px;
   position: relative;
   background: #d1d1d1;
   color: Black;
   font-size: 16px;
   text-align: center;

} .flag1:after {

   content: close-quote;
   position: absolute;
   left: 0px;
   bottom: 0px;
   width: 0px;
   height: 0;
   border-bottom: 85px solid white;
   border-left: 130px solid transparent;
   border-right: 130px solid transparent;

}

/*code for fade in fade out */ .text-overflow {

   height:120px;
   display:block;
   overflow:hidden;
   word-break: break-word;
   word-wrap: break-word;

}

.btn-overflow {

   display: none;
   text-decoration: none;

}