Template:TU Delft/Style

strong{

  color:#119ED8;
  font-weight:700;

}

a {

color: inherit;

} a:visited{ color: inherit; } a:hover, a:focus, a:active {

color: #8E999D;
text-decoration: none;

} /* =============================================================================

Layout

========================================================================== */ .anchor{

display: block;
height: 80px; /*same height as header*/
margin-top: -80px; /*same height as header*/
visibility: hidden;

} /* Header ================================= */ .navbar-static-top {

margin-top: -13px;
border: 0;
color: #F3F4F4;

} .phone-name a p{

     display:none;
     font-size: 10px;

} .phone-name a:hover p{

     display:inline;
     

} .navbar-brand{ padding: 5px;} .navbar-top {

background: #119ED8;
font-size: 12px;
padding: 3px;
position: fixed;
width: 100%;
padding-left: 5px;
padding-right: 5px;

} .navbar-top a:hover, .navbar-top a:active, .navbar-top a:focus, .navbar-top a.is-active {

background: none !important;
color: #f3f4f4;

} .navbar-top .list-inline {

margin-bottom: 0;

} .navbar-top .header-contact li {

margin-right: 15px;

} .navbar-top .header-contact li .fa {

margin-right: 5px;

} .navbar-main {

margin-bottom: 0;
background: #119ED8;
margin-top: 27px;
position: fixed;
width: 100%;

} .navbar-main a{ color:#f3f4f4;} .navbar-main .navbar-brand {

border-bottom: none !important;

} .navbar-main a:hover, .navbar-main a:active, .navbar-main a:focus, .navbar-main a.is-active {

background: #f3f4f4!important;
color: #119ED8;
border-bottom: 2px solid #f3f4f4;

} .navbar-main .submenu {

position: absolute;

margin-top: -10px;

list-style: none;
background: #119ED8;
padding: 0;
width: 200px;
margin-left: -35px;
visibility: hidden;
top: 85px;
-moz-transition: all, 0.05s;
-o-transition: all, 0.05s;
-webkit-transition: all, 0.05s;
transition: all, 0.05s;

} .navbar-main .submenu li:hover {

background: #8E999D;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;

} .navbar-main .submenu li a {

width: 100%;
border-bottom: none;
text-decoration: none;
padding: 5px 25px;
display: block;
font-size: 16px;

} .navbar-main li a {

font-size: 15px;
padding: 9px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 2px solid transparent;

} .navbar-main li:hover .submenu {

top: 62px;
visibility: visible;
-moz-transition: all, 0.25s;
-o-transition: all, 0.25s;
-webkit-transition: all, 0.25s;
transition: all, 0.25s;

} .navbar-main .icon-bar {

background: #f3f4f4;

} /* Home Slider ================================= */ .carousel-home img {

width: 100%;
margin-top: 15px;
border-bottom: solid #8E999D 5px;
border-top: solid #8E999D 5px;

} .carousel-home .carousel-control {

background: #119ED8;
height: 80px;
width: 40px;
top: 50%;
margin-top: -40px;
-moz-transition: width, 0.3s;
-o-transition: width, 0.3s;
-webkit-transition: width, 0.3s;
transition: width, 0.3s;

} .carousel-home .carousel-control .fa {

font-size: 2.5em;
padding-top: 12px;

} .carousel-home .carousel-control:hover {

width: 50px;

} .carousel-home .carousel-caption {

top: 48%;
bottom: auto;
text-align: left;
transform: translateY(-50%);

} .carousel-home .carousel-title {

color: #119ED8;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;

} .carousel-home .carousel-subtitle{

font-size: 35px;
text-transform: uppercase;
margin-top: -40px;
font-weight:bold;
color:#f3f4f4;

} .carousel-home .carousel-subsubtitle{

font-size: 25px;
margin-top: 0px;
color:#fff;

} .carousel-home .btn {

margin-top: 30px;

} .section-home {

margin: 30px 0;

} /* home/ about-us ================================= */ .about-us .container:hover .fa-spin-hover{

 -webkit-animation:fa-spin 10s infinite linear;
 animation:fa-spin 10s infinite linear

} .fa-spin-hover:hover{

 -webkit-animation:fa-spin 10s infinite linear;
 animation:fa-spin 10s infinite linear

} .about-us {

margin: 30px;

} .about-us a{ color:#f3f4f4; padding:0px; margin:0px; } .about-us-col {

text-align: center;
background-color: #119ED8;
color: #f3f4f4;
border: solid #8E999D;

padding:10px; } .about-us-col .col-icon-wrapper .fa{

color: #f3f4f4;
text-align: center;

} .about-us-col col-icon-wrapper:hover .fa-spin-hover {

-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;

}

.about-us-col .col-title {

text-transform: uppercase;
font-weight: bold;

} /*===========medal requirements==============*/ .gold{ color:#CFB53B;} .silver{ color:#C0C0C0;} .bronze{ color:#cd7f32;}

/*-- InterLab----*/ .interlab img{

 max-width:100%;

} .interlab figure{

padding-top: 15px;

padding-bottom: 15px; float:middle;} .interlab a{ color: #119ED8;} /*--- team---*/ .member-name{

  color: #119ED8;

} members p{ font-size: 14px;} .team-member .on-hover {

position: absolute;
top: 100px;
bottom: 0px;
right: 0px;
width: 100%;
padding: 0px;
color: #119ED8;
text-align: justify;
background: #f3f4f4;
visibility: hidden;
opacity: 0;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
overflow-y: scroll;
overflow-x: hidden;

} .team-member:hover .on-hover {

visibility: visible;
opacity: 1;
padding: 10px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

} .team-img{

margin-bottom: 15px;
width: 100%;

}

/* igem logo */ .igemlogo { z-index:1000; position: fixed; bottom: 20px; left:0px; } .igemlogo img{ width:100px; } .up a{

 opacity: 0.3;
 position: fixed;
 bottom: 90px;
 right: 0px;
 z-index:1000000;

} /*home did you know---------------------*/ .didyouknow{

z-index:1000;

} .didyouknow img{

 position: fixed;
 bottom: 20px;
 right:0px;
 width:100px;
 max-width:100%;
z-index:1000;

} .didyouknow:hover img{

width:600px;

} .didyouknow p{

 background:white;
 font-family:Arial Black;
 font-weight:900;
 position: fixed;
 bottom: 200px;
 right:230px;
 width:250px;
 height:150;
text-align: justify;
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
transform: rotate(-13deg);
visibility: hidden;
opacity: 0;
z-index:1110;
font-size:14px;

} .didyouknow:hover p{

visibility: visible;
opacity: 1;
padding: 10px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

}

/* ============home/reasons ================================= */ .home-reasons {

margin: 0px 0;

} .reasons-col {

position: relative;
padding-bottom: 0px;
border-style: solid;
border-color: #8E999D;
background: #f3f4f4;

} .reasons-col img {

width: 100%;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
padding: 20px;

} .reasons-col .reasons-titles {

position: relative;
bottom: 20px;
text-align: center;
background: #119ED8;
width: 100%;
color: #f3f4f4;
text-transform: uppercase;
height: 50px;
padding: 0px;

} .reasons-col .reasons-title {

font-weight: bold;

} .reasons-col .on-hover {

position: absolute;
bottom: 0;
top: 50px;
width: 100%;
padding: 20px;
font-size:30px;
text-align: justify;
background: #f3f4f4;
border-bottom: 1px solid #f3f4f4;
visibility: hidden;
opacity: 0;
-moz-transition: all, 0.5s;
-o-transition: all, 0.5s;
-webkit-transition: all, 0.5s;
transition: all, 0.5s;
overflow-y: scroll;
overflow-x: hidden;

} .reasons-col:hover .on-hover {

visibility: visible;
opacity: 1;
padding: 20px;
padding-top: 40px;
-moz-transition: all, 1s;
-o-transition: all, 1s;
-webkit-transition: all, 1s;
transition: all, 1s;

} .reasons-col:hover img {

-moz-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
-webkit-transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);
transform: perspective(1.1) scale3d(1.1, 1.1, 1.1);

} /* ===============home/causes================================= */ .cause {

padding-bottom: 15px;
margin-bottom: 30px;
border: 1px solid #119ED8;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;

} .cause .cause-img {

margin-bottom: 15px;
width: 100%;

} .cause .cause-title {

text-align: center;
margin-bottom: 10px;
font-weight: bold;

} .cause .cause-details {

text-align: justify;
padding: 0 15px;
font-size: 16px;
margin-bottom: 15px;
min-height: 115px;

} .cause:hover {

background: #f3f4f4;
color: #119ED8;
border-color: #119ED8;

} /*============= practises====================*/ .outreach img {

  width: 100%

} .outreach a{

 text-decoration: none;

} .practices img{ max-width: 100%; } .practices .nav-tabs li{ width:30%; background:#119ED8; font-weight:bold; }

.bmc{

z-index:800;
position: absolute;
text-align: justify;
border: solid 2px #8e999d;
overflow: hidden;
height: 100%;
width: 100%;
display:block;
top: 0px;
left:0px;
font-weight: bold;
color:#119ED8;

} .partnership{ position: absolute; top:23%; left:5%; } .activities{ position:absolute; top:23%; left:23%;} .proposition{ position:absolute; top:23%; left:43%;} .resources{ position:absolute; top:52%; left:23%;} .relationships{ position:absolute; top:23%; left:62%;} .segments{ position:absolute; top:23%; left:82%;} .channels{ position:absolute; top:46%; left:62%;} .structure{ position:absolute; top:90%; left:10%;} .streams{ position:absolute; top:90%; left:59%;}

/* project*/ .project-col img{

  width: 100%;

} .project-col:hover img{

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  background:#f3f4f4;
  z-index: 99999;
  border: 2px #119ED8 solid;

}

.campus img{ height: 360px; }

/*--hardware----------------------------*/ .hardware100 img{ width:100%; } .hardware100 figure{ padding:20; } figcaption{ font-weight: bold; } iframe{ padding:50px; } .hardwarelist figure{ border: solid #8E999D 3px; float:left; } .hardware100:hover img{ width:200%; margin-left:-50%; } .right{ float:right; padding:0 20px 20px 0; } /*==========================ligation tool===============================*/ form1 label{ width:280px;} /*============attributions===== */ .expert img{ width:100%; } /*===============media==============*/ .media img{ width:100%; } .media object{ width:100%; } /*====================sponsors===============*/ .sponsor{ z-index:50;} .sponsor img{

  width: 80%;

} .sponsor a{

  color:#119ED8;

} .sponsor .list-unstyled{ font-size: 13px; }

/* =========== references====================== */ .references{ font-size:11px; background:#8E999D; color:white; }

/* footer ================================= */ .logo img{

  height: 70px;
  background-color: #f3f4f4;
  margin: 5px;
  max-width:80%;

} .main-footer {

background: #f3f4f4;
color: #119ED8;
width: 99%;

} .footer-top {

background: #119ED8;
min-height: 40px;
color:#f3f4f4; 
width:100%;

}

.main-footer .footer-title {

text-transform: uppercase;
margin-bottom: 10px;
color: black;

} .main-footer .footer-title .title-under {

background: #119ED8;
margin: 15px 0;
text-align: left;

} .main-footer .footer-title .title-under:after {

margin: 0;
background: #119ED8;

} .main-footer .footer-content {

text-align: justify;
font-size: 13px;
color: black;

} .footer-bottom {

background: #119ED8;
padding: 0px;
width: 100%;

}

/* Pages ================================= */ .page-heading {

background: url('../images/heading-bg.jpg?1428795369') no-repeat center;
background-size: cover;
min-height: 190px;
color: #000;
padding: 25px 15px;
margin-bottom: 50px;

} .page-heading .title-under {

background: #119ED8;

} .page-description {

font-size: 18px;

} .main-container {

margin-bottom: 50px;

}

/* Causes ================================= */ .cause-carousel {

margin-top: 15px;
margin-bottom: 30px;

} /* ============================================================================= Module ========================================================================== */ .btn-primary {

background: #115c9b;
border: none;
border-radius: 0;
padding: 10px 25px;
border: 1px solid transparent;
-moz-transition: all, 0.3s;
-o-transition: all, 0.3s;
-webkit-transition: all, 0.3s;
transition: all, 0.3s;
max-width: 80%;
text-align: center;

} .btn-primary:hover {

background: #f3f4f4;
color: #119ED8;
border: 1px solid #119ED8;

} .btn-secondary {

background: #f3f4f4;
color: #119ED8;
border-radius: 0;

} .btn-secondary:hover {

background: #119ED8;
color: #f3f4f4;

} .title-style-1 {

text-align: center;
text-transform: uppercase;
font-size: 50px;
margin-bottom: 50px;

} .title-style-3 {

text-align: left;
font-size: 26px;
margin-bottom: 25px;
margin-left: 40px;

} .title-style-2 {

text-align: left;
text-transform: uppercase;
font-size: 26px;
margin-bottom: 25px;

} .title-style-2 .title-under {

display: block;
margin: 5px 0;

} .title-style-2 .title-under:after {

margin: 0;
margin-top: 10px;

} .title-under {

display: block;
margin: 5px auto;
background: #119ED8;
height: 1px;
width: 280px;

} .title-under:after {

content: ;
display: block;
width: 100px;
background: inherit;
height: 2px;
margin: 0 auto;
margin-top: 10px;

} /* Modal ================================= */ .form-control {

border-radius: 0;
box-shadow: none;

} /* Tables ================================= */ delft .notebook table{ max-width:40%; } .notebook img{ max-width:90%; max-height:250px; } .protocols table{ width:80%; } delft .table-style-1 thead {

background: #119ED8;
border-bottom: 1px solid #8E999D;
color: #f3f4f4;

} delft .table-style-1 td, .table-style-1 th {

border-bottom: 1px solid #119ED8;
border-right:none;
border-left:none;
border-top:none;

} delft table{ border:none; vertical-align:middle; }

/* Tabs ================================= */ .nav-tabs {

border-bottom-color: #f3f4f4;

} .nav-tabs li{

width: 45%;

} .tab-content{ padding-top: 50px;} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

background: #119ED8;
color: #f3f4f4;

} .nav-tabs > li > a {

border-radius: 0;

} .nav-tabs > li > a:hover {

border-color: #119ED8;

} .protocols .nav-tabs > li > a{

min-height: 60px;
border: solid #8E999D;

}

.protocols .nav > li > a:hover, .nav > li > a:focus {

background: #119ED8;
color: #f3f4f4;

} /* Accordion ================================= */ .panel-default {

border-color: #119ED8;
border-radius: 0;

} .panel-default > .panel-heading {

background: #119ED8;
color: #f3f4f4;

} .panel-default > .panel-heading:hover {

background: #119ED8;

}

/* Modal ================================= */ .modal .modal-content {

border-radius: 0;

} .modal .modal-header {

background: #119ED8;
color: #f3f4f4;

} .modal .modal-header .close {

font-size: 26px;

}

/* ============================================================================= Responsive ========================================================================== */ /* Large devices (large desktops, 1200px and Down) */ @media (max-width: 1200px) {

.about-us-col {
  padding: 15px;
}
.reasons-col:hover .on-hover {
  padding: 15px;
}

} /* Medium devices (desktops, 992px and Donw) */ @media (max-width: 992px) {

.carousel-home .carousel-title {
  font-size: 36px;
}
.carousel-home .carousel-subtitle {
  font-size: 18px;
}

.carousel-home .carousel-subsubtitle{

font-size: 10px;

}

.carousel-home .btn {
  margin-top: 15px;
}
.about-us-col {
  margin-bottom: 25px;
}
.ember {
  margin-bottom: 25px;
}

.reasons-col {
  margin-bottom: 15px;
}
.footer-col {
  margin-bottom: 50px;
}

} /*tussen grootte*/ @media (max-width: 1330px) { .carousel-home img { margin-top:90px; } } /* Small devices (tablets, 768px and Down) */ @media (max-width: 768px) { .about-us-col { font-size:10px; min-width: 100%; padding: 0;} .about-us-col h3{ font-size:15px;} .carousel-home img { margin-top:20px; } .didyouknow p{

 bottom: 23%;
 right:40%;
 width:40%;

} .nav-tabs li{

width: 100%;

}

.header-contact {
  text-align: center;
}
.header-contact li {
  margin: 0 !important;
}
.header-social {
  text-align: center;
}
.navbar-main #navbar {
  float: none !important;
}
.navbar-main #navbar a {
  border-bottom: none;
  padding: 5px;
}
.navbar-main .navbar-brand {
  padding: 6px;
}
.navbar-main .submenu {
  position: initial;
  display: none;
  width: 100%;
}
.navbar-main li:hover .submenu,
.navbar-main li:active .submenu,
.navbar-main li:focus .submenu {
  display: block;
}
.navbar-main li:hover .submenu li,
.navbar-main li:active .submenu li,
.navbar-main li:focus .submenu li {
 border-top-color: #119ED8;
}
.carousel-home .carousel-title {
  font-size: 32px;
}
.carousel-home .carousel-subtitle {
  font-size: 16px;
}

.carousel-home .carousel-subsubtitle{

font-size: 8px;
margin: 5px;

}

.carousel-home .carousel-control {
  background: #119ED8;
  height: 40px;
  width: 20px;
  top: 50%;
  margin-top: -20px;
}
.carousel-home .carousel-control .fa {
  font-size: 1.5em;
  padding-top: 4px;
}

} /* Extra Small devices (tablets, 480px and Down) */ @media (max-width: 480px) {

.carousel-home .carousel-title {
  font-size: 16px;
  margin: 0;
}
.carousel-home .carousel-subtitle {
  font-size: 14px;
  margin: 0;
}

.carousel-home .carousel-subsubtitle{

font-size: 8px;
margin:5px;

}

.carousel-home .carousel-indicators {
  bottom: 0;
}

.igemlogo img{

  width: 30px;}

.didyouknow img{ visibility: hidden;} .logo img{ height: 40px;} } /* ============================================================================= Animations ========================================================================== */ .animate-onscroll {

visibility: hidden;

} .animated {

visibility: visible;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

} .animated.slow {

-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

} .animated.fadeIn {

-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

} @-webkit-keyframes fadeIn {

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

} @keyframes fadeIn {

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

} .fadeIn {

-webkit-animation-name: fadeIn;
animation-name: fadeIn;

} @-webkit-keyframes bounceInUp {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
75% {
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
90% {
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
}
100% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

} @keyframes bounceInUp {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
75% {
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}
90% {
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
}
100% {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

} .bounceInUp {

-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;

} @-webkit-keyframes bounceInDown {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
}
75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
100% {
  -webkit-transform: none;
  transform: none;
}

} @keyframes bounceInDown {

0%, 60%, 75%, 90%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -3000px, 0);
  transform: translate3d(0, -3000px, 0);
}
60% {
  opacity: 1;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0);
}
75% {
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
90% {
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}
100% {
  -webkit-transform: none;
  transform: none;
}

} .bounceInDown {

-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;

} @-webkit-keyframes zoomIn {

0% {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}
50% {
  opacity: 1;
}

} @keyframes zoomIn {

0% {
  opacity: 0;
  -webkit-transform: scale3d(0.3, 0.3, 0.3);
  transform: scale3d(0.3, 0.3, 0.3);
}
50% {
  opacity: 1;
}

} .zoomIn {

-webkit-animation-name: zoomIn;
animation-name: zoomIn;

}