Template:Heidelberg/SandboxMarita/styles2/CSS

body {

 overflow-x       : hidden;
 background-color : #222;
 font-family      : 'Open Sans' !important;
 font-size        : 16px;
 font-weight      : 300;

}

/* Content paragraphs: */

.content {

 color       : #393939 !important;
 text-align  : justify !important;
 font-family : 'Open Sans' !important;
 font-size   : 18px !important;
 font-weight : 300 !important;
 line-height : 30px !important;

}

.content h1, h2, h3, h4, h5, h6 {

 color       : #393939 !important;
 font-family : 'Open Sans' !important;
 font-weight : 100 !important;
 line-height : 70px !important;

}

/* Heidelberg colors */

.heidelberg-red {

 color : #9d1c20 !important;

}

.heidelberg-mred {

 color : #BB5651 !important;

}

.heidelberg-lred {

 color : #D89F9C !important;

}

.heidelberg-blue {

 color : #005493 !important;

}

.heidelberg-mblue {

 color : #6698BE !important;

}

.heidelberg-lblue {

 color : #B2CBDD !important;

}

.heidelberg-fblue {

 color : #C9D9FF !important;

}

.heidelberg-turk {

 color : #009193 !important;

}

.heidelberg-mturk {

 color : #66BDBE !important;

}

.heidelberg-lturk {

 color : #B3DEDE !important;

}

.heidelberg-green {

 color : #009E73 !important;

}

.heidelberg-mgreen {

 color : #4CBD9A !important;

}

.heidelberg-lgreen {

 color : #9AD5C3 !important;

}

.heidelberg-grey {

 color : #B9B9B9 !important;

}

.heidelberg-mgrey {

 color : #CFCECE !important;

}

.heidelberg-lgrey {

 color : #E3E3E3 !important;

}

.heidelberg-yellow {

 color : #FEE000 !important;

}

.heidelberg-myellow {

 color : #FEE84C !important;

}

.heidelberg-lyellow {

 color : #FEF39B !important;

}

.heidelberg-orange {

 color : #F8991D !important;

}

.heidelberg-morange {

 color : #FBB748 !important;

}

.heidelberg-lorange {

 color : #FED699 !important;

}

/* heidelberg emphbox */ .heidelbox-black { background-color: #222222 !important; color: white !important; } .heidelbox-red { background-color: #BB5651 !important; color: white !important; } .heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; } .heidelbox-blue { background-color: #6698BE !important; color: white !important; } .heidelbox-darkblue {background-color: #005493 !important; color: white !important; } .heidelbox-turk { background-color: #66BDBE !important; } .heidelbox-darkturk {background-color: #009193 !important; color: white !important; } .heidelbox-green { background-color: #4CBD9A !important; color: white !important; } .heidelbox-darkgreen { background-color: #009E73 !important; color: white !important; } .heidelbox-grey { background-color: #CFCECE !important; color: white !important; } .heidelbox-darkgrey { background-color: #B9B9B9 !important; color: white !important; } .heidelbox-yellow { background-color: #FEE84C !important; } .heidelbox-orange { background-color: #FBB748 !important; } .heidelbox-darkorange { background-color: #F8991D !important; } /* end Heidelberg colors */

/* HEIDELBUTTON */ .heidelbutton-red { background: #BB5651; } .heidelbutton-red:focus { background: #D89F9C } .heidelbutton-red.active { background: #9d1c20 !important; }

.heidelbutton-blue { background: #6698BE; } .heidelbutton-blue:focus { background: #B2CBDD } .heidelbutton-blue.active { background: #005493 !important; }

.heidelbutton-turk { background: #66BDBE; } .heidelbutton-turk:focus { background: #B3DEDE } .heidelbutton-turk.active { background: #009193 !important; }

.heidelbutton-green { background: #4CBD9A; } .heidelbutton-green:focus { background: #9AD5C3 } .heidelbutton-green.active { background: #009E73 !important; }

.heidelbutton-grey { background: #CFCECE; } .heidelbutton-grey:focus { background: #E3E3E3 } .heidelbutton-grey.active { background: #B9B9B9 !important; }

.heidelbutton-yellow { background: #FEE84C; } .heidelbutton-yellow:focus { background: #FEF39B } .heidelbutton-yellow.active { background: #FEE000 !important; }

.heidelbutton-orange { background: #FBB748; } .heidelbutton-orange:focus { background: #FED699 } .heidelbutton-orange.active { background: #F8991D !important; } /* end HEIDELBUTTON */

/* PAGE TITLE */

.page-heading {

 position          : relative;
 background-repeat : no-repeat;
 background-size   : cover;
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
 background-position: 0% 45%;

}

.page-title div {

 padding-top: 10px;

}

.header-title {

 text-align  : right !important;
 font-size   : 100px !important;
 line-height : 100px !important;
   text-transform : uppercase;
 font-family    : sans-serif !important;
 font-weight    : 700 !important;

}

.header-subtitle {

 padding-bottom : 20px;
 color          : #393939 !important;
 text-align     : right !important;
 font-size      : 50px !important;
 line-height    : 50px !important;
   text-transform : uppercase;
 font-family    : sans-serif !important;
 font-weight    : 700 !important;

}

.header-image { float: left; padding: 20px; margin:0px !important; }

   @media (max-width: 800px) {
       .header-image {
       width: 100% !important;
   } 
   }

@media (max-width: 650px) {

 .header-title {
   text-align  : right !important;
   font-size   : 80px !important;
   line-height : 80px !important;
 }

 .header-subtitle {
   padding-bottom : 20px;
   color          : #393939 !important;
   text-align     : right !important;
   font-size      : 40px !important;
   line-height    : 40px !important;
 }

}

@media (max-width: 550px) {

 .header-title {
   text-align  : right !important;
   font-size   : 50px !important;
   line-height : 50px !important;
 }

 .header-subtitle {
   padding-bottom : 20px;
   color          : #393939 !important;
   text-align     : right !important;
   font-size      : 30px !important;
   line-height    : 30px !important;
 }

}

/* END PAGE TITLE */

1. footer-sec h4 {

 color     : white !important;
 font-size : 26px !important;

}

1. footer-sec p {

 color       : grey !important;
 text-align  : center;
 font-family : 'Open Sans' !important;
 font-size   : 18px !important;

}

1. footer-sec a {

 color : grey !important;

}

1. footer-sec a:hover {

 color      : white !important;
 transition : color 1s !important;

}

article li, article ol {

 color       : #393939 !important;
 text-align  : left !important;
 font-family : 'Open Sans' !important;
 font-size   : 18px !important;
 font-weight : 300 !important;
 line-height : 30px !important;

}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

 padding-top    : 10px !important;
 padding-bottom : 10px !important;

}

.mw-body {

 height           : 0px !important;
 background-color : red !important;

}

.funny-box {

 margin-right  : 30px;
 padding       : 20px;
 border-radius : 10px;

}

.funny-box h3 {

 color         : white !important;
 border-bottom : 1px solid white;

}

.funny-box img {

 width  : 50%;
 height : auto;

}

.orange {

 background-color : #f8991d !important;

}

.red {

 background-color : #9d1c20 !important;

}

.blue {

 background-color : #6698be !important;

}

.green {

 background-color : #4cbd9a !important;

}

.funny-box p {

 color       : white !important;
 font-family : 'Open Sans' !important;
 font-size   : 20px !important;
 font-weight : 400 !important;

}

.funny-box a {

 color       : white !important;
 font-family : 'Open Sans' !important;
 font-size   : 25px !important;
 font-weight : 400 !important;

}

strong {

 font-weight : 500;

}

a, a:focus, a:hover {

 text-decoration    : none;
 -moz-transition    : all .3s;
 -ms-transition     : all .3s;
 -o-transition      : all .3s;
 -webkit-transition : all .3s;
 transition         : all .3s;

}

h1 {

 margin-top  : 10px;
 color       : #393939 !important;
 color       : #393939 !important;
 text-align  : center;
 font-family : 'Open Sans',
               sans-serif !important;
 font-family : 'Open Sans' !important;
 font-size   : 58px !important;
 font-weight : 700 !important;
 line-height : 58px !important;

}

h2 {

 margin-top  : 10px;
 color       : #222;
 text-align  : center;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 48px !important;
 font-size   : 48px !important;
 font-weight : 700 !important;
 line-height : 56px;

}

h3 {

 color       : #393939 !important;
 font-family : 'Open Sans' !important,
               sans-serif;
 font-size   : 40px;
 font-weight : 400 !important;
 line-height : 40px;

}

h4 {

 color       : #393939 !important;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 35px;
 font-weight : 400 !important;
 line-height : 40px;

}

h5 {

 color       : #393939 !important;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 30px;
 font-weight : 400 !important;
 line-height : 40px;

}

h6 {

 color       : #393939 !important;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 25px;
 font-weight : 400 !important;
 line-height : 40px;

}

h7 {

 color       : #393939 !important;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 22px;
 font-weight : 400 !important;
 line-height : 40px;

}

img {

 max-width : 100%;

}

/* Top menu **** */

.navbar {

 z-index               : 10;
 position              : fixed;
 margin-bottom         : 0;
 border-bottom         : 1px solid white;
 -moz-border-radius    : 0;
 -webkit-border-radius : 0;
 border-radius         : 0;
 background            : white;
 box-shadow            : 2px 0px 30px black;

}

.navbar-no-bg {

 padding-top    : 20px;
 padding-bottom : 5px;
 background     : white;

}

ul.navbar-nav {

 display        : inline-block;
 padding-top    : 10px;
 color          : #fff;
 text-transform : uppercase;
 font-family    : 'Open Sans',
                  sans-serif;
 font-size      : 14px;
 font-weight    : 400;

}

.navbar-inverse ul.navbar-nav li a {

 color  : grey;
 border : 0;

}

.navbar-inverse ul.navbar-nav li a:hover {

 color  : #000;
 border : 0;

}

.navbar-inverse ul.navbar-nav li a:focus {

 color   : #000;
 border  : 0;
 outline : 0;

}

.navbar-brand {

 position : absolute;
 top      : 1px;
 left     : 3.5vw;
 width    : 100%;

}

article a {

 color : #6698BE !important;

}

article a:hover {

 color           : #005493 !important;
 text-decoration : underline;
 transition      : all 0.5 ease;

}

.navbar>.container-fluid .navbar-brand, .navbar>.container .navbar-brand {

 margin-left : 0;

}

.dropdown:hover .dropdown-menu {

 display          : block;
 border-top       : none;
 background-color : white;
 text-transform   : uppercase;
 font-family      : 'Open Sans',
                    sans-serif;
 font-size        : 14px;
 font-weight      : 400;

}

.dropdown-menu>li>a {

 color : grey;

}

1. footer-sec {

 position         : relative;
 background-color : #393939;
 font-family      : 'Open Sans',
                    sans-serif;

}

1. footer-sec h4 {

 color : white;

}

1. footer-sec li > a {

 color     : grey;
 font-size : 16x;

}

1. footer-sec span {

 color       : grey;
 font-family : 'Open Sans',
               sans-serif;
 font-size   : 16px;

}

1. footer-sec li {

 padding-bottom : 2px;
 color          : grey;
 font-size      : 16px;
 list-style     : none;

}

1. footer-sec li > a:hover {

 color              : white;
 text-decoration    : none;
 -webkit-transition : color 1s;
 transition         : color 1s;
 transition-delay   : 0.1s;
 /* Safari */

}

1. facebook,
2. twitter {

 color : grey;

}

1. facebook:hover,
2. twitter:hover {

 color              : white;
 -webkit-transition : color 1s;
 transition         : color 1s;
 transition-delay   : 0.1s;
 /* Safari */

}

/* MEDIA QUERIES **** */

@media (max-width: 1211px) {

 .global_wrapper {
   margin : 150px 2% 0px 2%;
 }

 .navbar-header {
   float : none;
 }

 .navbar-toggle {
   display : block;
 }

 .navbar-collapse {
   border-top : 1px solid transparent;
   box-shadow : inset 0 1px 0 rgba(255,255,255,0.1);
 }

 .navbar-collapse.collapse {
   display : none!important;
 }

 .navbar-brand {
   position : absolute;
   top      : 1px;
   left     : 10px;
 }

 #circle:before {
   height : 61px !important;
 }

 .navbar {
   height : 77px;
 }

 .navbar-nav {
   float  : none!important;
   margin : 7.5px -15px;
 }

 .navbar-nav>li {
   float : none;
 }

 .navbar-nav>li>a {
   padding-top    : 10px;
   padding-bottom : 10px;
 }

 .navbar-text {
   float  : none;
   margin : 15px 0;
 }
 /* since 3.1.0 */

 .navbar-collapse.collapse.in {
   display : block!important;
 }

 .collapsing {
   overflow : hidden!important;
 }

}

1. circle {

 position         : relative;
 width            : 120px;
 height           : 120px;
 border-radius    : 50%;
 background-color : blue;
 box-shadow       : 2px 0px 30px black;

}

1. circle:before {

 content    : "";
 position   : absolute;
 left       : -90%;
 width      : 260%;
 height     : 75px;
 background : white;

}

1. circle:after {

 content             : "";
 position            : absolute;
 top                 : 0;
 left                : 0;
 width               : 100%;
 height              : 100%;
 border-radius       : 50%;
 background          : white;
 background-image    : url('https://static.igem.org/mediawiki/2017/8/8f/Heidelberg_2017_phage_logo.svg');
 background-repeat   : no-repeat;
 background-position : center;
 background-size     : 90px 90px;

}

1. sidenav {

 color          : #fff;
 text-transform : uppercase;
 font-family    : 'Open Sans',
                  sans-serif;
 font-size      : 14px;
 font-weight    : 400;
 list-style     : none;

}

1. sidenav {

 color          : #fff;
 text-transform : uppercase;
 font-family    : 'Open Sans',
                  sans-serif;
 font-size      : 14px;
 font-weight    : 400;

}

1. sidenav > li > ul > li {

 list-style : none;

}

1. sidenav > li > ul > li > a {

 color : firebrick;

}

1. sidenav > li > ul > li > a:hover {

 color      : #393939;
 transition : color 1s ease;

}

.navmenu-brand > img {

 width         : 100px;
 height        : auto;
 border-radius : 200px;

}

.navmenu-brand {

 color       : #fff;
 text-align  : center;
 font-size   : 20px;
 font-weight : 400;

}

/* End of Navbar CSS */

.abstract {

 background-color : white !important;

}

img {

 max-width : 100%;

}

.abstract-ribbon {

 width            : 100%;
 height           : 60vh;
 background-color : #222;

}

.bottom-ribbon {

 z-index          : -1000;
 position         : absolute;
 top              : 0px;
 right            : 0px;
 width            : 14%;
 background-color : #222;
 box-shadow       : ;

}

.abstract-main {

 margin-top : -55vh;

}

.abstract-header .mdl-layout__header-row {

 padding-left : 40px;

}

.abstract-container {

 width     : 100%;
 max-width : 1600px;

}

.abstract-content {

 margin-bottom : 50px;
 padding       : 30px 56px;
 border-radius : 2px;

}

.img-caption.title {

 padding-top : 30px;
 text-align  : left !important;
 font-weight : bold;

}

.img-caption.subtitle {

 text-align : justify !important;

}

.table > tbody > tr, .table > tfoot > tr, .table > thead > tr {

 -o-transition      : all 0.3s ease !important;
 -webkit-transition : all 0.3s ease !important;
 transition         : all 0.3s ease !important;

}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

 padding            : 1.6rem !important;
 border             : 0 !important;
 text-align         : left !important;
 vertical-align     : top !important;
 font-family        : 'Open Sans' !important;
 -o-transition      : all 0.3s ease !important;
 -webkit-transition : all 0.3s ease !important;
 transition         : all 0.3s ease !important;

}

.table > thead > tr > th {

 color          : #757575 !important;
 border-bottom  : 1px solid rgba(0, 0, 0, 0.12)!important;
 vertical-align : bottom !important;
 font-weight    : 400 !important;

}

.table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {

 border-top : 0 !important;

}

.table > tbody + tbody {

 border-top : 1px solid rgba(0, 0, 0, 0.12) !important;

}

.table .table {

 background-color : #fff !important;

}

.table .no-border {

 border : 0 !important;

}

/* -- Material Design Table style -------------- */

.table {

 width            : 100%;
 max-width        : 100%;
 margin           : 0px !important;
 padding          : 20px !important;
 background-color : #fff;

}

.table-responsive-vertical {

 margin-bottom : 20px;

}

.table > thead > tr > th {

 font-weight : 600 !important;

}

.table > tbody > tr, .table > tfoot > tr, .table > thead > tr {

 -o-transition      : all 0.3s ease;
 -webkit-transition : all 0.3s ease;
 transition         : all 0.3s ease;

}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th {}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {

 padding            : 1.6rem;
 border-bottom      : 1px solid lightgray !important;
 text-align         : left;
 vertical-align     : top;
 -o-transition      : all 0.3s ease;
 -webkit-transition : all 0.3s ease;
 transition         : all 0.3s ease;

}

.table > thead > tr > th {

 color            : white !important;
 border-bottom    : 1px solid rgba(0, 0, 0, 0.5);
 background-color : #393939 !important;
 vertical-align   : bottom;
 font-weight      : 400;

}

1. sidebarCollapse {

 border           : none;
 background-color : white;

}

body {

 background-color : #222;

} .image-box-left { padding-left: 0px !important; }

.image-box-right { padding-right: 0px !important; } @media(max-width: 1200px) { .image-box-left { padding-left: 0px !important; padding-right: 0px !important; }

.image-box-right { padding-right: 0px !important; padding-left: 0px !important } } }

/*Flipper*/

.flip-item-wrap{ width: 100%; height: auto; float: left; position:relative; -webkit-perspective:800px; -moz-perspective:800px; -ms-perspective:800px; -o-perspective:800px; perspective:800px; } @media screen and (min-width: 1280px) { .flip-item-wrap{ width: 100%;

  }

} @media screen and (max-width: 979px) { .flip-item-wrap{ width: 100%;

  }

} @media screen and (max-width: 639px) { .flip-item-wrap{ width: 100%;

  }

} @media screen and (max-width: 379px) { .flip-item-wrap{ width: 100%;

  }

} .flip-item-wrap img{ width:100%; height:auto; display:block; border-radius: 50%; margin:0; } .flip-item-wrap input{ display: none; } .flip-item-wrap .give_height{ visibility: hidden; } .flip-item{ display: block; width:100%;

height:100%; float:left; position:absolute; top:0; left:0; cursor:pointer; color:#fff; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:-webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; } .flip-item figure{ display:block; position:absolute;

width:100%; height:100%; margin:0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden;

-o-backface-visibility:hidden;

backface-visibility:hidden; } .flip-item .back{ border-radius: 50%; background-color: #222 !important; width:100%; display:block; margin:0; -webkit-transform:rotateY( 180deg ); -moz-transform:rotateY( 180deg ); -ms-transform:rotateY( 180deg ); -o-transform:rotateY( 180deg ); transform:rotateY( 180deg ); } .flipper:checked + .flip-item{ -webkit-transform:rotateY( 180deg ); -moz-transform:rotateY( 180deg ); -ms-transform:rotateY( 180deg ); -o-transform:rotateY( 180deg ); transform:rotateY( 180deg ); } .flip-item-desc{ background: #222; border: 1px solid white; width: 100%; color: white; height:100%; border-radius: 50%; position:absolute; top: 0; display: table; left: 0; text-shadow:1px 2px 1px rgba(0,0,0,0.9); overflow:hidden;

}

.center-test { text-align: center; padding: 30px; } .center-test span {

font-family: 'Open Sans'; font-size: 18px; display: table-cell; vertical-align: middle; color: white;

   }