Kendracorral (Talk | contribs) |
Kendracorral (Talk | contribs) |
||
(17 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | @import 'https://fonts.googleapis.com/css?family=Lato|Open+Sans'; | |
+ | |||
+ | body { | ||
+ | background-color: #fafafa; | ||
+ | } | ||
+ | |||
+ | .loading-screen { | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | position: fixed; | ||
+ | z-index: 999999; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | background-color: #078794; | ||
+ | color: #fff; | ||
+ | transition: all 0.5s; | ||
+ | } | ||
+ | |||
+ | ul.no-bullet li { | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .loading-screen .content h2 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .loading-screen.bye { | ||
+ | transform: translate(0, -100%); | ||
+ | } | ||
+ | |||
+ | .black-overlay { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | z-index: 7000; | ||
+ | } | ||
+ | |||
+ | .traslucent { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .main-nav, .nav-backdrop { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | z-index: 20; | ||
+ | height: 48px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper .main-nav, #globalWrapper .nav-backdrop { | ||
+ | top: 14px; | ||
+ | } | ||
+ | |||
+ | .blue-bg { | ||
+ | background-color: rgb(7, 135, 148); | ||
+ | } | ||
+ | |||
+ | p.attention, #content .std-section p.attention { | ||
+ | margin: 40px auto; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | p.attention.left, #content .std-section p.attention.left { | ||
+ | margin: 40px auto; | ||
+ | display: block; | ||
+ | text-align: left; | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | .page-preview { | ||
+ | max-width: 70%; | ||
+ | max-height: 70vh; | ||
+ | height: auto; | ||
+ | margin: 100px auto; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .page-ender { | ||
+ | max-width: 80%; | ||
+ | max-height: 300px; | ||
+ | margin: 20px auto; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .margin { | ||
+ | margin: 40px auto; | ||
+ | } | ||
+ | |||
+ | .margin-big { | ||
+ | margin: 80px auto; | ||
+ | } | ||
+ | |||
+ | .parallax { | ||
+ | margin: 50px 0; | ||
+ | width: 100%; | ||
+ | max-height: 300px; | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 50% 0%; | ||
+ | padding: 130px 10px; | ||
+ | } | ||
+ | |||
+ | .parallax p { | ||
+ | font-size: 40px; | ||
+ | margin: 0; | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | text-shadow: 2px 2px #333; | ||
+ | } | ||
+ | |||
+ | .center-block { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | /* BEGIN NAV */ | ||
+ | .nav-backdrop { | ||
+ | background-color: #078794; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .main-nav a { | ||
+ | color: #fff; | ||
+ | -webkit-transition: color 0.3s; | ||
+ | -moz-transition: color 0.3s; | ||
+ | transition: color 0.3s; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .main-nav .logo { | ||
+ | position: absolute; | ||
+ | right: 5px; | ||
+ | top: 5px; | ||
+ | } | ||
+ | |||
+ | .main-nav a:focus { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .main-nav a:hover, .main-nav .option.header:hover { | ||
+ | text-decoration: none; | ||
+ | color: #ddd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .main-nav .options-wrapper { | ||
+ | display: flex; | ||
+ | width: 100%; | ||
+ | margin-top: 8px; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-item { | ||
+ | position: relative; | ||
+ | flex-grow: 1; | ||
+ | color: #fff; | ||
+ | padding: 4px 8px; | ||
+ | left: 0px; | ||
+ | -webkit-transition: all 0.5s; | ||
+ | -moz-transition: all 0.5s; | ||
+ | transition: all 0.5s; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-item.active { | ||
+ | border-bottom: #fff solid 2px; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header { | ||
+ | text-align: center; | ||
+ | -webkit-transition: color 0.3s; | ||
+ | -moz-transition: color 0.3s; | ||
+ | transition: color 0.3s; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown { | ||
+ | display: none; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | -moz-transition: opacity 0.5s; | ||
+ | transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header.active-menu { | ||
+ | font-weight: 600; | ||
+ | border-right: #fff solid 1px; | ||
+ | display: inline-block; | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | |||
+ | .main-nav .active .option.header.active-menu { | ||
+ | padding-bottom: 3px; | ||
+ | border-bottom: #fff solid 2px; | ||
+ | border-right: #fff solid 1px; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header.active-menu + .option-dropdown { | ||
+ | top: 1px; | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | position: absolute; | ||
+ | width: 100vw; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header+ .option-dropdown .option { | ||
+ | transform: translate(200px); | ||
+ | -webkit-transition: transform 0.3s; | ||
+ | -moz-transition: transform 0.3s; | ||
+ | transition: transform 0.3s; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header.active-menu + .option-dropdown .option { | ||
+ | display: inline-block; | ||
+ | padding: 3px 15px; | ||
+ | } | ||
+ | |||
+ | .cover { | ||
+ | z-index: 5; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2016/4/48/T--Tec-Chihuahua--Alfalfa-field-myxo-placeholder.jpeg) center 0% no-repeat; | ||
+ | background-size: cover; | ||
+ | background-color: #333; | ||
+ | height: 100vh; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .mini-cover { | ||
+ | z-index: 5; | ||
+ | display: block; | ||
+ | background: url(https://static.igem.org/mediawiki/2016/d/dc/Cover.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | background-size: cover; | ||
+ | background-color: #333; | ||
+ | height: 200px; | ||
+ | max-height: 100vh; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .cover .overlay, .mini-cover .overlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | background-color: rgba(0,0,0,0.3); | ||
+ | } | ||
+ | |||
+ | .mini-cover .gradient-overlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,3163c6+100&0+0,0+65,0.55+100 */ | ||
+ | background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(121,154,218,0) 65%, rgba(0,0,0,0.55) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c3163c6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | ||
+ | } | ||
+ | |||
+ | .cover .gradient-overlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,da4e5b+65,e96f2e+100&0+0,0.2+65,0.6+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(218,78,91,0.2) 65%, rgba(233,111,46,0.2) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#99e96f2e',GradientType=0 ); /* IE6-9 */ | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .cover .content, .mini-cover .content { | ||
+ | position: relative; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translateY(-50%); | ||
+ | transform: translateY(-50%); | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .cover .content h1, .mini-cover .content h1 { | ||
+ | margin-top: 0px; | ||
+ | font-size: 48px; | ||
+ | } | ||
+ | |||
+ | .cover .content, .mini-cover .content { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .cover .content h3, .mini-cover .content h3 { | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | |||
+ | .slide-menu { | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | left: 20px; | ||
+ | padding-left: 0px; | ||
+ | list-style: none; | ||
+ | z-index: 5000; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.3s; | ||
+ | -moz-transition: opacity 0.3s; | ||
+ | transition: opacity 0.3s; | ||
+ | } | ||
+ | |||
+ | .slide-menu.show { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: opacity 0.7s; | ||
+ | -moz-transition: opacity 0.7s; | ||
+ | transition: opacity 0.7s; | ||
+ | } | ||
+ | |||
+ | .slide-menu li { | ||
+ | position: relative; | ||
+ | margin: 10px; | ||
+ | color: #000; | ||
+ | background: rgba(255,255,255,.5); | ||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .slide-menu li:hover { | ||
+ | background: rgba(255,255,255,.7); | ||
+ | } | ||
+ | |||
+ | .slide-menu li:after { | ||
+ | content: ""; | ||
+ | background: rgba(255,255,255,.5); | ||
+ | position: absolute; | ||
+ | bottom: -10px; | ||
+ | height: 10px; | ||
+ | width: 5px; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%); | ||
+ | } | ||
+ | |||
+ | .slide-menu li:last-child:after { | ||
+ | height: 0px; | ||
+ | } | ||
+ | |||
+ | .slide-menu li.active { | ||
+ | background: rgba(0,0,0,.5); | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .slide-menu li a { | ||
+ | color: inherit; | ||
+ | padding: 9px 18px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .slide-menu li a:hover, .slide-menu li a:focus, .slide-menu li a:active { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .section .sorted p.left-text { | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .section .sorted ul li { | ||
+ | color: #fff; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | .control-arrows { | ||
+ | position: fixed; | ||
+ | right: 20px; | ||
+ | bottom: 20px; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .control-arrows span { | ||
+ | display: block; | ||
+ | font-size: 36px; | ||
+ | color: #fff; | ||
+ | -webkit-transition: all 0.7s; | ||
+ | -moz-transition: all 0.7s; | ||
+ | transition: all 0.7s; | ||
+ | } | ||
+ | |||
+ | .control-arrows span:hover { | ||
+ | cursor: pointer; | ||
+ | color: #bcbcbc; | ||
+ | } | ||
+ | |||
+ | .control-arrows span.nope { | ||
+ | opacity: 0; | ||
+ | pointer-events: none; | ||
+ | cursor: initial; | ||
+ | } | ||
+ | |||
+ | .control-arrows span.go-down { | ||
+ | transform: translate(0, 100%); | ||
+ | } | ||
+ | |||
+ | .section h1 { | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .sorted { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .sorted div { | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | text-align: center; | ||
+ | width: 49%; | ||
+ | } | ||
+ | |||
+ | .sorted .left { | ||
+ | float: left; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .sorted .right { | ||
+ | float: right; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | .sorted img { | ||
+ | display: inline-block; | ||
+ | max-height: 30vh; | ||
+ | width: auto; | ||
+ | margin: 10px auto; | ||
+ | } | ||
+ | |||
+ | .sorted img.big { | ||
+ | max-height: 60vh; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p, .section p, #bodyContent .footer p, .footer p { | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | margin: 0 5vw; | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | |||
+ | .footer ul { | ||
+ | color: #fff; | ||
+ | list-style: none; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | |||
+ | .footer li ul li:before { | ||
+ | content: "- " | ||
+ | } | ||
+ | |||
+ | .footer a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .footer a:hover { | ||
+ | color: #ccc; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p.small, .section p.small, #bodyContent .footer p.small, .footer p.small { | ||
+ | font-size: 18px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .modal-title { | ||
+ | font-family: 'Open Sans', sans-serif;; | ||
+ | text-align: center; | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | |||
+ | .modal-text { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .std-section h2 { | ||
+ | text-align: center; | ||
+ | font-family: 'Open Sans', sans-serif;; | ||
+ | margin-top: 60px; | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .std-section h2:after, .modal-title:after { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | margin-top: 10px; | ||
+ | height: 1px; | ||
+ | width: 100%; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+20,cccccc+20,cccccc+80,000000+100&0+0,0.65+20,0.65+80,0+100 */ | ||
+ | background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(204,204,204,0.65) 20%, rgba(204,204,204,0.65) 80%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | .team-member { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | margin-bottom: 30px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .team-member img { | ||
+ | margin: 0px auto; | ||
+ | } | ||
+ | |||
+ | .member-description p.meta { | ||
+ | color: #555; | ||
+ | font-weight: 600; | ||
+ | } | ||
+ | |||
+ | .member-description p.meta::nth-child(2) { | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | .footer { | ||
+ | padding: 30px 0; | ||
+ | background-color: #333; | ||
+ | } | ||
+ | |||
+ | .footer .logo { | ||
+ | display: block; | ||
+ | margin: 40px auto; | ||
+ | max-width: 100%; | ||
+ | max-height: 20vh; | ||
+ | } | ||
+ | |||
+ | .footer .outlier { | ||
+ | position: absolute; | ||
+ | bottom: -10px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .section p a { | ||
+ | color: #ddd; | ||
+ | } | ||
+ | |||
+ | .section p a:hover, .section p a:visited, .section p a:active { | ||
+ | color: #eee; | ||
+ | border-bottom: #eee solid 1px; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .section p a:visited, .section p a:active { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | .calendar-wrapper { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .calendar-wrapper.left { | ||
+ | -webkit-transition: transform 0.6s; | ||
+ | transition: transform 0.6s; | ||
+ | -webkit-transform: translate(-100%); | ||
+ | transform: translate(-100%); | ||
+ | } | ||
+ | |||
+ | .calendar-wrapper.right { | ||
+ | -webkit-transition: transform 0.6s; | ||
+ | transition: transform 0.6s; | ||
+ | -webkit-transform: translate(100%); | ||
+ | transform: translate(100%); | ||
+ | } | ||
+ | |||
+ | .calendar { | ||
+ | display: block; | ||
+ | margin: 5vh auto; | ||
+ | } | ||
+ | |||
+ | .calendar-header { | ||
+ | color: #f0f0f0; | ||
+ | text-align: center; | ||
+ | font-size: 26px; | ||
+ | padding: 10px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .calendar .event p { | ||
+ | font-size: 8px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls span { | ||
+ | -webkit-user-select: none; | ||
+ | user-select: none; | ||
+ | -webkit-transition: transform 0.3s; | ||
+ | transition: transform 0.3s; | ||
+ | -webkit-transform: translate(0); | ||
+ | transform: translate(0); | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls span.disabled { | ||
+ | color: #aaa; | ||
+ | cursor: not-allowed !important; | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls span:first-child:hover:not(.disabled) { | ||
+ | cursor: pointer; | ||
+ | -webkit-transform: translate(-5px); | ||
+ | transform: translate(-5px); | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls span:last-child:hover:not(.disabled) { | ||
+ | cursor: pointer; | ||
+ | -webkit-transform: translate(5px); | ||
+ | transform: translate(5px); | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls span:active:not(.disabled) { | ||
+ | color: #ccc; | ||
+ | } | ||
+ | |||
+ | .calendar-grid.has-event { | ||
+ | background-color: #006400; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | .calendar-header .month-name { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .calendar-row { | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .calendar-grid { | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | width: 14.28%; | ||
+ | height: 100px; | ||
+ | border: #f0f0f0 solid 1px; | ||
+ | margin: 0; | ||
+ | border-left: none; | ||
+ | border-top: none; | ||
+ | color: #f0f0f0; | ||
+ | padding: 2px; | ||
+ | } | ||
+ | |||
+ | .calendar-row:last-child .calendar-grid { | ||
+ | border-bottom: none; | ||
+ | } | ||
+ | |||
+ | .calendar-row .calendar-grid:last-child { | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | .calendar-grid .day-number { | ||
+ | position: absolute; | ||
+ | margin: 0; | ||
+ | bottom: 2px; | ||
+ | right: 8px; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | .calendar-grid .event { | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translate(0, -50%); | ||
+ | transform: translate(0, -50%); | ||
+ | } | ||
+ | |||
+ | .calendar-grid .event img { | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | max-height: 25px; | ||
+ | display: inline-block; | ||
+ | margin: 3px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .calendar-grid .event img:hover { | ||
+ | max-height: 40px; | ||
+ | } | ||
+ | |||
+ | .calendar-header .dropdown { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .calendar-header .dropdown button { | ||
+ | width: 130px; | ||
+ | white-space: nowrap; | ||
+ | position: relative; | ||
+ | font-size: 20px; | ||
+ | background-color: transparent; | ||
+ | border: none; | ||
+ | top: -5px; | ||
+ | } | ||
+ | |||
+ | .calendar-header .dropdown ul { | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | left: -14px; | ||
+ | padding-left: 0px; | ||
+ | } | ||
+ | |||
+ | .calendar-header .dropdown ul li { | ||
+ | padding: 5px 10px; | ||
+ | font-size: 18px; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | .calendar-header .dropdown ul li:hover { | ||
+ | cursor: pointer; | ||
+ | background-color: rgba(0,0,0,0.4); | ||
+ | } | ||
+ | |||
+ | .calendar-legend { | ||
+ | display: block; | ||
+ | margin: 30px auto; | ||
+ | } | ||
+ | |||
+ | .calendar-legend h2 { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .calendar-legend ul { | ||
+ | text-align: center; | ||
+ | padding-left: 0; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li .igemtooltip, .calendar-grid .igemtooltip { | ||
+ | color: #333; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | background-color: #fff; | ||
+ | border: #bcbcbc solid 1px; | ||
+ | display: none; | ||
+ | z-index: 500; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li .igemtooltip div, .calendar-grid .igemtooltip div { | ||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li img, .calendar-legend li p { | ||
+ | margin: 0px 5px; | ||
+ | display: inline-block; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li img { | ||
+ | max-width: 50px; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li:not(:last-child):after { | ||
+ | content: "-"; | ||
+ | color: #fff; | ||
+ | margin: 0px 20px; | ||
+ | } | ||
+ | |||
+ | .modal-content { | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | |||
+ | .modal-header { | ||
+ | border-bottom: none; | ||
+ | padding: 15px; | ||
+ | } | ||
+ | |||
+ | .modal-body { | ||
+ | padding: 0 15px 15px 15px; | ||
+ | } | ||
+ | |||
+ | .modal-body br { | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | .modal-main-image { | ||
+ | max-width: 100%; | ||
+ | margin: 0px auto; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .modal-image-wrapper { | ||
+ | margin: 0px auto 25px auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .modal-footer { | ||
+ | border-top: none; | ||
+ | } | ||
+ | |||
+ | .slider-img { | ||
+ | background-color: #333; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | background-position: center; | ||
+ | width: 100%; | ||
+ | height: 0; | ||
+ | padding-bottom: 75%; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-control { | ||
+ | background-image: none; | ||
+ | color: #5bc0de; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-indicators { | ||
+ | bottom: 3.5%; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-indicators li { | ||
+ | border-color: #5bc0de; | ||
+ | margin: 3px; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-indicators li.active { | ||
+ | background-color: #5bc0de; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-control span { | ||
+ | top: auto; | ||
+ | bottom: 5%; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-inner:not(.no-after):after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | height: 20%; | ||
+ | width: 100%; | ||
+ | bottom: 0; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-inner.no-after .carousel-control { | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-indicators.left { | ||
+ | bottom: initial; | ||
+ | top: 50%; | ||
+ | left: 0; | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | #modalSlider .carousel-indicators.left li { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #bodyContent p.strong, p.strong { | ||
+ | font-size: 18px; | ||
+ | font-weight: 800; | ||
+ | } | ||
+ | |||
+ | .std-section ul { | ||
+ | padding-left: 30px; | ||
+ | } | ||
+ | |||
+ | .std-section li { | ||
+ | font-size: 16px; | ||
+ | list-style: initial; | ||
+ | } | ||
+ | |||
+ | .std-section td, .std-section th { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .social-media { | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .social-media img { | ||
+ | display: inline-block; | ||
+ | margin: 20px 5px; | ||
+ | transition: all 0.3s; | ||
+ | border-radius: 50%; | ||
+ | max-width: 50px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .social-media img:hover { | ||
+ | background-color: #3399cc; | ||
+ | } | ||
+ | |||
+ | .protocol { | ||
+ | padding: 15px 20px; | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | background-color: #fff; | ||
+ | border: #bcbcbc solid 1px; | ||
+ | margin: 0; | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | .protocol>span { | ||
+ | position: relative; | ||
+ | top: 4px; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .protocol:hover { | ||
+ | cursor: pointer; | ||
+ | background-color: #f0f0f0; | ||
+ | } | ||
+ | |||
+ | .protocol:not(:first-child) { | ||
+ | border-top: none; | ||
+ | } | ||
+ | |||
+ | .protocol-pdf { | ||
+ | height: 800px; | ||
+ | max-height: 80vh; | ||
+ | } | ||
+ | |||
+ | .protocol[aria-expanded=true]>span { | ||
+ | -webkit-transform: rotate(180deg); | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | |||
+ | .std-section ul.big-list > li { | ||
+ | font-size: 18px; | ||
+ | list-style: none; | ||
+ | margin: 15px auto; | ||
+ | } | ||
+ | |||
+ | .std-section ul.big-list .padpls { | ||
+ | padding-left: 40px; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | #carousel-safety .item { | ||
+ | background-position: center center; | ||
+ | background-size: cover; | ||
+ | background-color: #333; | ||
+ | height: 500px; | ||
+ | max-height: 80vh; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .sorted p button { | ||
+ | margin: 10px 15px; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | input, select { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | height: 30px; | ||
+ | font-size: 18px; | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .white-section .fp-ControlArrow.fp-prev { | ||
+ | border-color: transparent rgb(7, 135, 148) transparent transparent; | ||
+ | } | ||
+ | |||
+ | .white-section .fp-ControlArrow.fp-prev { | ||
+ | border-color: transparent transparent transparent rgb(7, 135, 148); | ||
+ | } | ||
+ | |||
+ | input { | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .team-member, .std-section > h2, .calendar, .calendar-legend, .std-section > p, .std-section > img, .std-section li, .std-section > div p, .std-section div img, .std-section table { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .calendar-legend *, .calendar * { | ||
+ | visibility: visible !important; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 767px) { | ||
+ | |||
+ | .main-nav, .nav-backdrop { | ||
+ | height: 38px; | ||
+ | } | ||
+ | |||
+ | .main-nav { | ||
+ | z-index: 9500; | ||
+ | } | ||
+ | |||
+ | .nav-backdrop { | ||
+ | z-index: 9499; | ||
+ | } | ||
+ | |||
+ | .logo img { | ||
+ | height: 27px; | ||
+ | } | ||
+ | |||
+ | .toggle-menu { | ||
+ | width: 38px; | ||
+ | height: 38px; | ||
+ | padding: 6px 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .burger { | ||
+ | width: 22px; | ||
+ | height: 3px; | ||
+ | background-color: #fff; | ||
+ | margin: 4px auto; | ||
+ | } | ||
+ | |||
+ | .cover { | ||
+ | background-attachment: scroll; | ||
+ | height: 100vh; | ||
+ | } | ||
+ | |||
+ | .fp-controlArrow { | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | |||
+ | .main-nav .options-wrapper { | ||
+ | display: block; | ||
+ | position: fixed; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | width: 200px; | ||
+ | background: #333; | ||
+ | margin-top: 0; | ||
+ | -webkit-transform: translate(-100%); | ||
+ | transform: translate(-100%); | ||
+ | -webkit-transition: transform 0.3s; | ||
+ | -moz-transition: transform 0.3s; | ||
+ | transition: transform 0.3s; | ||
+ | padding-top: 14px; | ||
+ | } | ||
+ | |||
+ | .main-nav.open .options-wrapper { | ||
+ | -webkit-transform: translate(0%); | ||
+ | transform: translate(0%); | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header { | ||
+ | padding: 5px; | ||
+ | text-align: left; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-item.active { | ||
+ | border: 0; | ||
+ | background-color: #33c; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown { | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | top: 0; | ||
+ | border: none; | ||
+ | padding: 0; | ||
+ | background-color: #fafafa; | ||
+ | max-height: 0; | ||
+ | min-width: 100%; | ||
+ | position: relative; | ||
+ | overflow-y: hidden; | ||
+ | -webkit-transition: max-height 0.3s; | ||
+ | -moz-transition: max-height 0.3s; | ||
+ | transition: max-height 0.3s; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown.open { | ||
+ | border: #bcbcbc solid 1px; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown .option { | ||
+ | padding: 5px; | ||
+ | color: #333; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown .option:hover { | ||
+ | background-color: #ddd; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown a.option { | ||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-dropdown .option { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .main-nav .option-item { | ||
+ | padding: 4px 0; | ||
+ | } | ||
+ | |||
+ | .main-nav .option.header+ .option-dropdown .option { | ||
+ | transform: translate(0px); | ||
+ | } | ||
+ | |||
+ | .slide-menu { | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | margin: 0 !important; | ||
+ | } | ||
+ | |||
+ | .slide-menu li { | ||
+ | display: inline-block; | ||
+ | margin: 3px; | ||
+ | } | ||
+ | |||
+ | .slide-menu li:after { | ||
+ | bottom: 50%; | ||
+ | height: 5px; | ||
+ | width: 10px; | ||
+ | left: 100%; | ||
+ | transform: translate(0, 50%); | ||
+ | } | ||
+ | |||
+ | .slide-menu li a { | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p, .section p { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p.small, .section p.small { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | .control-arrows { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 550px) { | ||
+ | .parallax { | ||
+ | max-height: 200px; | ||
+ | padding: 45px 10px; | ||
+ | } | ||
+ | |||
+ | .calendar-header .month-name { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .calendar-header .controls { | ||
+ | display: block; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | .calendar-grid { | ||
+ | height: 120px; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li { | ||
+ | display: block; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | .calendar-legend li:not(:last-child):after { | ||
+ | content: ""; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 450px) { | ||
+ | .slide-menu { | ||
+ | bottom: 5px; | ||
+ | } | ||
+ | |||
+ | .slide-menu li { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .slide-menu li:after { | ||
+ | width: 4px; | ||
+ | } | ||
+ | |||
+ | .slide-menu li a { | ||
+ | padding: 4px 8px; | ||
+ | font-size: 10px; | ||
+ | } | ||
+ | |||
+ | .section .sorted > div:not(.grow) { | ||
+ | width: 24%; | ||
+ | } | ||
+ | |||
+ | .section .sorted .grow { | ||
+ | width: 74%; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p, .section p { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | |||
+ | #bodyContent .section p.small, .section p.small { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Collaboration CSS */ | ||
+ | #vgemcollaboration { | ||
+ | margin: 0px auto; | ||
+ | display: block; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png'); | ||
+ | position: relative; | ||
+ | background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ | ||
+ | width:180px; | ||
+ | height:220px; | ||
+ | } | ||
+ | |||
+ | #vgemcollaboration:hover { | ||
+ | background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); | ||
+ | } | ||
+ | |||
+ | #vgemcollaboration a { | ||
+ | display:inline-block; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | .uil-spin-css { | ||
+ | background: none; | ||
+ | position: relative; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | } | ||
+ | width: 100%; | ||
+ | @-webkit-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-moz-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-ms-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-moz-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @-o-keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @keyframes uil-spin-css { | ||
+ | 0% { | ||
+ | opacity: 1; | ||
+ | -ms-transform: scale(1.5); | ||
+ | -moz-transform: scale(1.5); | ||
+ | -webkit-transform: scale(1.5); | ||
+ | -o-transform: scale(1.5); | ||
+ | transform: scale(1.5); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 0.1; | ||
+ | -ms-transform: scale(1); | ||
+ | -moz-transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | -o-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | .uil-spin-css > div { | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | margin-left: 4px; | ||
+ | margin-top: 4px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | .uil-spin-css > div > div { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border-radius: 15px; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(1) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0s; | ||
+ | -moz-animation-delay: 0s; | ||
+ | -webkit-animation-delay: 0s; | ||
+ | -o-animation-delay: 0s; | ||
+ | animation-delay: 0s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(1) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(2) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.12s; | ||
+ | -moz-animation-delay: 0.12s; | ||
+ | -webkit-animation-delay: 0.12s; | ||
+ | -o-animation-delay: 0.12s; | ||
+ | animation-delay: 0.12s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(2) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(3) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.25s; | ||
+ | -moz-animation-delay: 0.25s; | ||
+ | -webkit-animation-delay: 0.25s; | ||
+ | -o-animation-delay: 0.25s; | ||
+ | animation-delay: 0.25s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(3) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(4) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.37s; | ||
+ | -moz-animation-delay: 0.37s; | ||
+ | -webkit-animation-delay: 0.37s; | ||
+ | -o-animation-delay: 0.37s; | ||
+ | animation-delay: 0.37s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(4) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(5) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.5s; | ||
+ | -moz-animation-delay: 0.5s; | ||
+ | -webkit-animation-delay: 0.5s; | ||
+ | -o-animation-delay: 0.5s; | ||
+ | animation-delay: 0.5s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(5) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(6) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.62s; | ||
+ | -moz-animation-delay: 0.62s; | ||
+ | -webkit-animation-delay: 0.62s; | ||
+ | -o-animation-delay: 0.62s; | ||
+ | animation-delay: 0.62s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(6) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(7) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.75s; | ||
+ | -moz-animation-delay: 0.75s; | ||
+ | -webkit-animation-delay: 0.75s; | ||
+ | -o-animation-delay: 0.75s; | ||
+ | animation-delay: 0.75s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(7) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(8) > div { | ||
+ | -ms-animation: uil-spin-css 1s linear infinite; | ||
+ | -moz-animation: uil-spin-css 1s linear infinite; | ||
+ | -webkit-animation: uil-spin-css 1s linear infinite; | ||
+ | -o-animation: uil-spin-css 1s linear infinite; | ||
+ | animation: uil-spin-css 1s linear infinite; | ||
+ | -ms-animation-delay: 0.87s; | ||
+ | -moz-animation-delay: 0.87s; | ||
+ | -webkit-animation-delay: 0.87s; | ||
+ | -o-animation-delay: 0.87s; | ||
+ | animation-delay: 0.87s; | ||
+ | } | ||
+ | .uil-spin-css > div:nth-of-type(8) { | ||
+ | -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); | ||
+ | -moz-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); | ||
+ | -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); | ||
+ | -o-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); | ||
+ | transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); | ||
+ | } |
Latest revision as of 02:35, 20 October 2016
@import 'https://fonts.googleapis.com/css?family=Lato%7COpen+Sans';
body {
background-color: #fafafa;
}
.loading-screen {
display: flex; align-items: center; justify-content: center; position: fixed; z-index: 999999; top: 0; bottom: 0; left: 0; right: 0; background-color: #078794; color: #fff; transition: all 0.5s;
}
ul.no-bullet li {
list-style: none;
}
.loading-screen .content h2 {
text-align: center;
}
.loading-screen.bye {
transform: translate(0, -100%);
}
.black-overlay {
position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.4); z-index: 7000;
}
.traslucent {
opacity: 0;
}
.main-nav, .nav-backdrop {
position: fixed; top: 0; width: 100%; z-index: 20; height: 48px;
}
- globalWrapper .main-nav, #globalWrapper .nav-backdrop {
top: 14px;
}
.blue-bg {
background-color: rgb(7, 135, 148);
}
p.attention, #content .std-section p.attention {
margin: 40px auto; display: block; text-align: center; font-size: 24px;
}
p.attention.left, #content .std-section p.attention.left {
margin: 40px auto; display: block; text-align: left; font-size: 24px;
}
.page-preview {
max-width: 70%; max-height: 70vh; height: auto; margin: 100px auto; display: block;
}
.page-ender {
max-width: 80%; max-height: 300px; margin: 20px auto; display: block;
}
.margin {
margin: 40px auto;
}
.margin-big {
margin: 80px auto;
}
.parallax {
margin: 50px 0; width: 100%; max-height: 300px; background-size: cover; background-repeat: no-repeat; background-position: 50% 0%; padding: 130px 10px;
}
.parallax p {
font-size: 40px; margin: 0; text-align: center; color: #fff; text-shadow: 2px 2px #333;
}
.center-block {
display: block; margin-left: auto; margin-right: auto;
}
/* BEGIN NAV */ .nav-backdrop {
background-color: #078794; z-index: 1;
}
.main-nav a {
color: #fff; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; display: block;
}
.main-nav .logo {
position: absolute; right: 5px; top: 5px;
}
.main-nav a:focus {
text-decoration: none;
}
.main-nav a:hover, .main-nav .option.header:hover {
text-decoration: none; color: #ddd; cursor: pointer;
}
.main-nav .options-wrapper {
display: flex; width: 100%; margin-top: 8px;
}
.main-nav .option-item {
position: relative; flex-grow: 1; color: #fff; padding: 4px 8px; left: 0px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
.main-nav .option-item.active {
border-bottom: #fff solid 2px;
}
.main-nav .option.header {
text-align: center; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;
}
.main-nav .option-dropdown {
display: none; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s;
}
.main-nav .option.header.active-menu {
font-weight: 600; border-right: #fff solid 1px; display: inline-block; padding-right: 15px;
}
.main-nav .active .option.header.active-menu {
padding-bottom: 3px; border-bottom: #fff solid 2px; border-right: #fff solid 1px;
}
.main-nav .option.header.active-menu + .option-dropdown {
top: 1px; display: block; opacity: 1; position: absolute; width: 100vw;
}
.main-nav .option.header+ .option-dropdown .option {
transform: translate(200px); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;
}
.main-nav .option.header.active-menu + .option-dropdown .option {
display: inline-block; padding: 3px 15px;
}
.cover {
z-index: 5; display: block; background: url() center 0% no-repeat; background-size: cover; background-color: #333; height: 100vh; width: 100%; position: relative;
}
.mini-cover {
z-index: 5; display: block; background: url(); background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #333; height: 200px; max-height: 100vh; width: 100%; position: relative;
}
.cover .overlay, .mini-cover .overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3);
}
.mini-cover .gradient-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,3163c6+100&0+0,0+65,0.55+100 */ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(121,154,218,0) 65%, rgba(0,0,0,0.55) 100%); /* FF3.6-15 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* Chrome10-25,Safari5.1-6 */ background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c3163c6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.cover .gradient-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,da4e5b+65,e96f2e+100&0+0,0.2+65,0.6+100 */ background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(218,78,91,0.2) 65%, rgba(233,111,46,0.2) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#99e96f2e',GradientType=0 ); /* IE6-9 */
}
.cover .content, .mini-cover .content {
position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center;
}
.cover .content h1, .mini-cover .content h1 {
margin-top: 0px; font-size: 48px;
}
.cover .content, .mini-cover .content {
color: #fff;
}
.cover .content h3, .mini-cover .content h3 {
font-size: 24px;
}
.slide-menu {
position: fixed; bottom: 20px; left: 20px; padding-left: 0px; list-style: none; z-index: 5000; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;
}
.slide-menu.show {
opacity: 1; -webkit-transition: opacity 0.7s; -moz-transition: opacity 0.7s; transition: opacity 0.7s;
}
.slide-menu li {
position: relative; margin: 10px; color: #000; background: rgba(255,255,255,.5); -webkit-border-radius: 10px; border-radius: 10px;
}
.slide-menu li:hover {
background: rgba(255,255,255,.7);
}
.slide-menu li:after {
content: ""; background: rgba(255,255,255,.5); position: absolute; bottom: -10px; height: 10px; width: 5px; left: 50%; transform: translate(-50%);
}
.slide-menu li:last-child:after {
height: 0px;
}
.slide-menu li.active {
background: rgba(0,0,0,.5); color: #fff;
}
.slide-menu li a {
color: inherit; padding: 9px 18px; display: block;
}
.slide-menu li a:hover, .slide-menu li a:focus, .slide-menu li a:active {
text-decoration: none;
}
.section .sorted p.left-text {
text-align: left;
}
.section .sorted ul li {
color: #fff; font-size: 18px;
}
.control-arrows {
position: fixed; right: 20px; bottom: 20px; padding: 5px;
}
.control-arrows span {
display: block; font-size: 36px; color: #fff; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; transition: all 0.7s;
}
.control-arrows span:hover {
cursor: pointer; color: #bcbcbc;
}
.control-arrows span.nope {
opacity: 0; pointer-events: none; cursor: initial;
}
.control-arrows span.go-down {
transform: translate(0, 100%);
}
.section h1 {
color: #fff; text-align: center; margin: 0;
}
.sorted {
display: block;
}
.sorted div {
display: inline-block; vertical-align: middle; text-align: center; width: 49%;
}
.sorted .left {
float: left; width: 50%;
}
.sorted .right {
float: right; width: 50%;
}
.sorted img {
display: inline-block; max-height: 30vh; width: auto; margin: 10px auto;
}
.sorted img.big {
max-height: 60vh;
}
- bodyContent .section p, .section p, #bodyContent .footer p, .footer p {
color: #fff; text-align: center; margin: 0 5vw; font-size: 30px;
}
.footer ul {
color: #fff; list-style: none; padding-left: 20px;
}
.footer li ul li:before {
content: "- "
}
.footer a {
color: #fff;
}
.footer a:hover {
color: #ccc; text-decoration: none;
}
- bodyContent .section p.small, .section p.small, #bodyContent .footer p.small, .footer p.small {
font-size: 18px; margin-bottom: 10px;
}
.modal-title {
font-family: 'Open Sans', sans-serif;; text-align: center; font-size: 30px;
}
.modal-text {
font-size: 16px;
}
.std-section h2 {
text-align: center; font-family: 'Open Sans', sans-serif;; margin-top: 60px; padding-bottom: 10px;
}
.std-section h2:after, .modal-title:after {
content: ""; display: block; margin-top: 10px; height: 1px; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+20,cccccc+20,cccccc+80,000000+100&0+0,0.65+20,0.65+80,0+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(204,204,204,0.65) 20%, rgba(204,204,204,0.65) 80%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.team-member {
font-family: 'Lato', sans-serif; margin-bottom: 30px; position: relative;
}
.team-member img {
margin: 0px auto;
}
.member-description p.meta {
color: #555; font-weight: 600;
}
.member-description p.meta::nth-child(2) {
margin-top: 80px;
}
.footer {
padding: 30px 0; background-color: #333;
}
.footer .logo {
display: block; margin: 40px auto; max-width: 100%; max-height: 20vh;
}
.footer .outlier {
position: absolute; bottom: -10px; text-align: center;
}
.section p a {
color: #ddd;
}
.section p a:hover, .section p a:visited, .section p a:active {
color: #eee; border-bottom: #eee solid 1px; text-decoration: none;
}
.section p a:visited, .section p a:active { border-bottom: none; }
.calendar-wrapper {
position: relative;
}
.calendar-wrapper.left {
-webkit-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform: translate(-100%); transform: translate(-100%);
}
.calendar-wrapper.right {
-webkit-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform: translate(100%); transform: translate(100%);
}
.calendar {
display: block; margin: 5vh auto;
}
.calendar-header {
color: #f0f0f0; text-align: center; font-size: 26px; padding: 10px; margin-bottom: 10px;
}
.calendar-header .controls {
float: right;
}
.calendar .event p {
font-size: 8px; text-align: left;
}
.calendar-header .controls span {
-webkit-user-select: none; user-select: none; -webkit-transition: transform 0.3s; transition: transform 0.3s; -webkit-transform: translate(0); transform: translate(0);
}
.calendar-header .controls span.disabled {
color: #aaa; cursor: not-allowed !important;
}
.calendar-header .controls span:first-child:hover:not(.disabled) {
cursor: pointer; -webkit-transform: translate(-5px); transform: translate(-5px);
}
.calendar-header .controls span:last-child:hover:not(.disabled) {
cursor: pointer; -webkit-transform: translate(5px); transform: translate(5px);
}
.calendar-header .controls span:active:not(.disabled) {
color: #ccc;
}
.calendar-grid.has-event {
background-color: #006400; cursor: pointer;
}
.calendar-header .month-name {
display: inline-block;
}
.calendar-row {
display: block; text-align: center;
}
.calendar-grid {
position: relative; float: left; width: 14.28%; height: 100px; border: #f0f0f0 solid 1px; margin: 0; border-left: none; border-top: none; color: #f0f0f0; padding: 2px;
}
.calendar-row:last-child .calendar-grid {
border-bottom: none;
}
.calendar-row .calendar-grid:last-child {
border-right: none;
}
.calendar-grid .day-number {
position: absolute; margin: 0; bottom: 2px; right: 8px; font-size: 18px;
}
.calendar-grid .event {
position: absolute; text-align: center; width: 100%; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);
}
.calendar-grid .event img {
transition: all 0.3s ease-in-out; max-height: 25px; display: inline-block; margin: 3px; cursor: pointer;
}
.calendar-grid .event img:hover {
max-height: 40px;
}
.calendar-header .dropdown {
display: inline-block;
}
.calendar-header .dropdown button {
width: 130px; white-space: nowrap; position: relative; font-size: 20px; background-color: transparent; border: none; top: -5px;
}
.calendar-header .dropdown ul {
background-color: rgba(0,0,0,0.4); left: -14px; padding-left: 0px;
}
.calendar-header .dropdown ul li {
padding: 5px 10px; font-size: 18px; list-style: none;
}
.calendar-header .dropdown ul li:hover {
cursor: pointer; background-color: rgba(0,0,0,0.4);
}
.calendar-legend {
display: block; margin: 30px auto;
}
.calendar-legend h2 {
color: #fff;
}
.calendar-legend ul {
text-align: center; padding-left: 0;
}
.calendar-legend li {
position: relative; display: inline-block;
}
.calendar-legend li .igemtooltip, .calendar-grid .igemtooltip {
color: #333; position: absolute; top: 0; left: 0; right: 0; background-color: #fff; border: #bcbcbc solid 1px; display: none; z-index: 500;
}
.calendar-legend li .igemtooltip div, .calendar-grid .igemtooltip div {
color: #333;
}
.calendar-legend li img, .calendar-legend li p {
margin: 0px 5px; display: inline-block; color: #fff;
}
.calendar-legend li img {
max-width: 50px;
}
.calendar-legend li:not(:last-child):after {
content: "-"; color: #fff; margin: 0px 20px;
}
.modal-content {
border-radius: 0;
}
.modal-header {
border-bottom: none; padding: 15px;
}
.modal-body {
padding: 0 15px 15px 15px;
}
.modal-body br {
margin: 20px;
}
.modal-main-image {
max-width: 100%; margin: 0px auto; display: block;
}
.modal-image-wrapper {
margin: 0px auto 25px auto;
}
.modal-footer {
border-top: none;
}
.slider-img {
background-color: #333; background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 0; padding-bottom: 75%;
}
- modalSlider .carousel-control {
background-image: none; color: #5bc0de;
}
- modalSlider .carousel-indicators {
bottom: 3.5%;
}
- modalSlider .carousel-indicators li {
border-color: #5bc0de; margin: 3px;
}
- modalSlider .carousel-indicators li.active {
background-color: #5bc0de;
}
- modalSlider .carousel-control span {
top: auto; bottom: 5%;
}
- modalSlider .carousel-inner:not(.no-after):after {
content: ""; position: absolute; height: 20%; width: 100%; bottom: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
- modalSlider .carousel-inner.no-after .carousel-control {
opacity: 0.3;
}
- modalSlider .carousel-indicators.left {
bottom: initial; top: 50%; left: 0; margin-left: 0;
}
- modalSlider .carousel-indicators.left li {
display: block;
}
- bodyContent p.strong, p.strong {
font-size: 18px; font-weight: 800;
}
.std-section ul {
padding-left: 30px;
}
.std-section li {
font-size: 16px; list-style: initial;
}
.std-section td, .std-section th {
font-size: 16px;
}
.social-media {
text-align: center; display: block;
}
.social-media img {
display: inline-block; margin: 20px 5px; transition: all 0.3s; border-radius: 50%; max-width: 50px; cursor: pointer;
}
.social-media img:hover {
background-color: #3399cc;
}
.protocol {
padding: 15px 20px; width: 100%; display: block; background-color: #fff; border: #bcbcbc solid 1px; margin: 0; font-size: 20px;
}
.protocol>span {
position: relative; top: 4px; float: right;
}
.protocol:hover {
cursor: pointer; background-color: #f0f0f0;
}
.protocol:not(:first-child) {
border-top: none;
}
.protocol-pdf {
height: 800px; max-height: 80vh;
}
.protocol[aria-expanded=true]>span {
-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.std-section ul.big-list > li {
font-size: 18px; list-style: none; margin: 15px auto;
}
.std-section ul.big-list .padpls {
padding-left: 40px; font-style: italic;
}
- carousel-safety .item {
background-position: center center; background-size: cover; background-color: #333; height: 500px; max-height: 80vh; width: 100%;
}
.sorted p button {
margin: 10px 15px; font-size: 18px;
}
input, select {
width: 100%; display: block; height: 30px; font-size: 18px; margin-bottom: 15px;
}
.white-section .fp-ControlArrow.fp-prev {
border-color: transparent rgb(7, 135, 148) transparent transparent;
}
.white-section .fp-ControlArrow.fp-prev {
border-color: transparent transparent transparent rgb(7, 135, 148);
}
input {
padding: 5px;
}
.team-member, .std-section > h2, .calendar, .calendar-legend, .std-section > p, .std-section > img, .std-section li, .std-section > div p, .std-section div img, .std-section table {
visibility: hidden;
}
.calendar-legend *, .calendar * {
visibility: visible !important;
}
@media (max-width: 767px) {
.main-nav, .nav-backdrop { height: 38px; }
.main-nav { z-index: 9500; }
.nav-backdrop { z-index: 9499; }
.logo img { height: 27px; }
.toggle-menu { width: 38px; height: 38px; padding: 6px 0; cursor: pointer; }
.burger { width: 22px; height: 3px; background-color: #fff; margin: 4px auto; }
.cover { background-attachment: scroll; height: 100vh; }
.fp-controlArrow { opacity: 0.3; }
.main-nav .options-wrapper { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: 200px; background: #333; margin-top: 0; -webkit-transform: translate(-100%); transform: translate(-100%); -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s; padding-top: 14px; }
.main-nav.open .options-wrapper { -webkit-transform: translate(0%); transform: translate(0%); } .main-nav .option.header { padding: 5px; text-align: left; }
.main-nav .option-item.active { border: 0; background-color: #33c; }
.main-nav .option-dropdown { display: block; opacity: 1; top: 0; border: none; padding: 0; background-color: #fafafa; max-height: 0; min-width: 100%; position: relative; overflow-y: hidden; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; transition: max-height 0.3s; }
.main-nav .option-dropdown.open { border: #bcbcbc solid 1px; }
.main-nav .option-dropdown .option { padding: 5px; color: #333; white-space: nowrap; }
.main-nav .option-dropdown .option:hover { background-color: #ddd; }
.main-nav .option-dropdown a.option { color: #333; }
.main-nav .option-dropdown .option { display: block; }
.main-nav .option-item { padding: 4px 0; }
.main-nav .option.header+ .option-dropdown .option { transform: translate(0px); }
.slide-menu { left: 0; width: 100%; text-align: center; margin: 0 !important; }
.slide-menu li { display: inline-block; margin: 3px; }
.slide-menu li:after { bottom: 50%; height: 5px; width: 10px; left: 100%; transform: translate(0, 50%); }
.slide-menu li a { padding: 5px 10px; }
#bodyContent .section p, .section p { font-size: 20px; }
#bodyContent .section p.small, .section p.small { font-size: 14px; }
.control-arrows { display: none; }
}
@media (max-width: 550px) {
.parallax { max-height: 200px; padding: 45px 10px; }
.calendar-header .month-name { display: block; }
.calendar-header .controls { display: block; float: none; }
.calendar-grid { height: 120px; }
.calendar-legend li { display: block; margin: 20px; }
.calendar-legend li:not(:last-child):after { content: ""; }
}
@media (max-width: 450px) {
.slide-menu { bottom: 5px; }
.slide-menu li { margin: 0; }
.slide-menu li:after { width: 4px; }
.slide-menu li a { padding: 4px 8px; font-size: 10px; }
.section .sorted > div:not(.grow) { width: 24%; }
.section .sorted .grow { width: 74%; }
#bodyContent .section p, .section p { font-size: 14px; }
#bodyContent .section p.small, .section p.small { font-size: 12px; }
}
/* Collaboration CSS */
- vgemcollaboration {
margin: 0px auto; display: block;
background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png');
position: relative;
background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ width:180px; height:220px; }
- vgemcollaboration:hover {
background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); }
- vgemcollaboration a {
display:inline-block; width:100%; height:100%; }
.uil-spin-css {
background: none; position: relative; width: 200px; height: 200px;
} width: 100%; @-webkit-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-webkit-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-moz-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-ms-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-moz-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-webkit-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @-o-keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} @keyframes uil-spin-css {
0% { opacity: 1; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 0.1; -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
} .uil-spin-css > div {
width: 24px; height: 24px; margin-left: 4px; margin-top: 4px; position: absolute;
} .uil-spin-css > div > div {
width: 100%; height: 100%; border-radius: 15px; background: #ffffff;
} .uil-spin-css > div:nth-of-type(1) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0s; -moz-animation-delay: 0s; -webkit-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s;
} .uil-spin-css > div:nth-of-type(1) {
-ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(2) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.12s; -moz-animation-delay: 0.12s; -webkit-animation-delay: 0.12s; -o-animation-delay: 0.12s; animation-delay: 0.12s;
} .uil-spin-css > div:nth-of-type(2) {
-ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(3) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s;
} .uil-spin-css > div:nth-of-type(3) {
-ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(4) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.37s; -moz-animation-delay: 0.37s; -webkit-animation-delay: 0.37s; -o-animation-delay: 0.37s; animation-delay: 0.37s;
} .uil-spin-css > div:nth-of-type(4) {
-ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(5) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s;
} .uil-spin-css > div:nth-of-type(5) {
-ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(6) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.62s; -moz-animation-delay: 0.62s; -webkit-animation-delay: 0.62s; -o-animation-delay: 0.62s; animation-delay: 0.62s;
} .uil-spin-css > div:nth-of-type(6) {
-ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(7) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.75s; -moz-animation-delay: 0.75s; -webkit-animation-delay: 0.75s; -o-animation-delay: 0.75s; animation-delay: 0.75s;
} .uil-spin-css > div:nth-of-type(7) {
-ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
} .uil-spin-css > div:nth-of-type(8) > div {
-ms-animation: uil-spin-css 1s linear infinite; -moz-animation: uil-spin-css 1s linear infinite; -webkit-animation: uil-spin-css 1s linear infinite; -o-animation: uil-spin-css 1s linear infinite; animation: uil-spin-css 1s linear infinite; -ms-animation-delay: 0.87s; -moz-animation-delay: 0.87s; -webkit-animation-delay: 0.87s; -o-animation-delay: 0.87s; animation-delay: 0.87s;
} .uil-spin-css > div:nth-of-type(8) {
-ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); -moz-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); -o-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}