/* Text Elements */
h2 {
margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px dotted #b89ade; color: #5b3984; text-align: center; text-transform: uppercase; font-weight: 300; font-family: 'Roboto', sans-serif;
}
h3 {
margin-right: 0; margin-bottom: 5px; margin-left: 0; color: #fff; text-align: center; font-weight: 300; font-family: 'Roboto', sans-serif;
}
h3.welcome-heading {
margin-top: 20px; margin-right: 0; padding-top: 20px; max-width: 800px; width: 80%; border-top: 1px dotted rgba(255, 255, 255, .14); line-height: 1;
}
h5 {
color: #fff; text-align: center; font-weight: 300; font-size: 27px; font-family: 'Roboto', sans-serif;
}
h5 a.preview-link-color {
color: #fff; text-decoration: none;
}
h5 a.preview-link-color:hover {
color: #959595; text-decoration: none;
}
p.paragraph {
margin-right: auto; margin-left: auto; width: 60%; color: #fff; text-align: center; font-size: 18px; font-family: 'Roboto', sans-serif;
}
p.paragraph.copyright {
margin-top: 10px; margin-bottom: 7px; font-size: 13px;
}
p.paragraph a.footer_link_copyright {
color: #fff;
}
p.paragraph.welcome-paragraph {
max-width: 800px; width: 80%; color: rgba(255, 255, 255, .8);
}
p.paragraph.portfolio-description {
width: 100%; color: #5f5f5f; text-align: left;
}
p.paragraph a.p-link {
color: #5b3984; font-weight: 600;
}
p.paragraph a.footer_link_copyright:hover {
text-decoration: underline;
}
p.paragraph a.p-link:hover {
text-decoration: underline;
}
ul.unorder-list {
margin-right: auto; margin-left: auto; list-style-type: none;
}
a.link-text {
padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(222, 225, 228, .2); border-bottom: 1px solid rgba(222, 225, 228, .2); color: #dee1e4; font-size: 18px; font-family: 'Roboto', sans-serif; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
a.link-text:hover {
border-top-color: rgba(222, 225, 228, .50); border-bottom-color: rgba(222, 225, 228, .50); -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
/* Interaction Elements */
a.link-button {
margin-right: 0; margin-left: 0; background-color: transparent; color: #555; font-size: 15px; font-family: 'Roboto', sans-serif;
}
a.link-button.toc-link {
display: block; margin-bottom: 40px; margin-left: 0; line-height: 1.2; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
a.link-button:hover {
color: #8d8d8d; text-decoration: none;
}
a.link-button.toc-link:hover {
-webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
/* Layout Elements */
body > .row {
max-width: none; width: auto; background-image: none;
}
body {
height: 100%;
}
body > .row.bckgnd_image {
position: static; min-height: 945px; height: 100%; background-image: url('https://static.igem.org/mediawiki/2016/3/3f/SCSU-New_HavenSaftey_Bench.jpeg'); background-attachment: fixed; background-position: center center; background-size: cover;
}
body > .row#theme2 {
background-image: url('https://static.igem.org/mediawiki/2016/b/bc/SCSU-New_HavenSaftey_EtBr.jpeg');
}
body > .row#theme3 {
background-image: url('https://static.igem.org/mediawiki/2016/0/01/SCSU-New_HavenSaftey_Hood.jpeg');
}
body > .row#theme4 {
background-image: url('https://static.igem.org/mediawiki/2016/f/fc/SCSU-New_HavenSaftey_Books.jpeg');
}
body > .row#theme5 {
background-image: url('https://static.igem.org/mediawiki/2016/c/c4/SCSU-New_HavenSaftey_Fridge.jpeg');
}
body > .row#theme6 {
background-image: url('https://static.igem.org/mediawiki/2016/4/4a/SCSU-New_HavenSaftey_Lab1.jpeg');
}
body > .row#theme7 {
background-image: url('https://static.igem.org/mediawiki/2016/e/ef/SCSU-New_HavenSaftey_Lab2.jpeg');
}
body > .row#theme8 {
background-image: url('https://static.igem.org/mediawiki/2016/7/7b/SCSU-New_HavenSaftey_Thermo.jpeg');
}
body > .row#theme9 {
background-image: url('https://static.igem.org/mediawiki/2016/0/0e/SCSU-New_HavenLinkATT.jpeg');
}
body > .row > [class*='coffee-span-'].welcome_text {
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; min-height: 50px; height: 100%; background-image: url('../CC_Theme/6.jpg'); background-position: center center; background-size: cover;
-webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;
}
body > .row.footer {
padding-top: 0; padding-bottom: 0; height: 100%; background-color: #1f1f1f;
}
body > .row > [class*='coffee-span-'].live_view {
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; min-height: 50px; max-height: none; height: 100%; background-color: transparent; opacity: 0; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all;
-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
}
body > .row.narrow-row {
max-width: 1200px;
}
body > .row.heading-row {
width: 100%; height: 100%;
}
body > .row > [class*='coffee-span-'].footer-col {
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; height: 100%;
-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
}
body > .row.narrow-row.portfolio-description {
margin-top: 0; margin-bottom: 50px; padding-top: 50px;
}
body > .row#theme11 {
background-image: url('../CC_Theme/theme-black-forest.jpg');
}
body > .row#theme10 {
background-image: url('../CC_Theme/theme-bahia.jpg');
}
body > .row#theme12 {
background-image: url('../CC_Theme/theme-flux.jpg');
}
body > .row#theme13 {
background-image: url('../CC_Theme/theme-animal-shelter.jpg');
}
body > .row.bckgnd_image:hover {
opacity: 1;
}
body > .row > [class*='coffee-span-'].live_view:hover {
border-width: 3px; border-style: none; background-color: rgba(0, 0, 0, .85); opacity: 1;
}
a.responsive-picture#backtotoparrow {
position: fixed; right: 10px; bottom: 0; float: right; padding-right: 20px; padding-bottom: 20px; max-width: 70px; opacity: .6; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
li {
margin-right: auto; margin-left: auto; color: #fff; text-align: center; font-size: 15px; font-family: 'Roboto', sans-serif;
}
li a.contact_link {
color: #fff;
}
.row > [class*='coffee-span-'] > .container.footer_contact {
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin-top: 15px; margin-bottom: 15px; margin-left: 0; min-height: 75px;
-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -webkit-align-content: center; -moz-align-content: center; -ms-align-content: center; -o-align-content: center; align-content: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
}
a.social-image {
margin-right: 1%; margin-left: 1%; min-width: 0; max-width: 60px; width: 100%; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; background-color: #802e66; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: background-color; -moz-transition-property: background-color; -ms-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color;
}
a.responsive-picture.thumbnail {
margin-bottom: 20px; margin-left: 0; box-shadow: rgba(0, 0, 0, .64) 0 3px 20px 0; opacity: 1;
}
a.responsive-picture.toc-thumbnail {
margin: 10px auto; max-width: 280px; width: 80%; box-shadow: rgba(0, 0, 0, .34) 0 2px 5px 0; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s;
}
div.responsive-picture.logo {
max-width: 300px; width: 80%;
}
a.link-button-glyph.scroll-down {
position: absolute; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; margin-top: 0; margin-bottom: 0; padding-top: 70px; border-top-left-radius: 0 0; border-top-right-radius: 0 0; border-bottom-right-radius: 0 0; border-bottom-left-radius: 0 0; background-color: transparent; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; -ms-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s;
}
span.glyph-for-button.scroll-down-icon {
display: block; color: rgba(255, 255, 255, .50); text-align: center; font-size: 30px;
}
span.link-button-text.scroll-down-text {
display: block; color: rgba(255, 255, 255, .74); text-align: center; font-family: 'Roboto', sans-serif;
}
a.link-button-image.get-RSD-bt {
display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; float: none; margin: 7px auto 25px; padding: 0 5px 5px; max-width: 300px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; background-color: #ff6f08; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -ms-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s;
-webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
}
div.image-for-button.bt-image {
float: left;
}
span.link-button-text.bt-text {
float: left; font-weight: 700; font-size: 22px; font-family: 'Roboto', sans-serif; line-height: 1;
}
li a.contact_link:hover {
text-decoration: underline;
}
a.social-image:hover {
background-color: #af478e; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transition-property: background-color; -moz-transition-property: background-color; -ms-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color;
}
a.responsive-picture.toc-thumbnail:hover {
box-shadow: rgba(0, 0, 0, .2) 0 10px 15px 0; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition-duration: .1s; -moz-transition-duration: .1s; -ms-transition-duration: .1s; -o-transition-duration: .1s; transition-duration: .1s; -webkit-transform: scale(1.1) translateY(-3px) rotate(0deg) skewX(0deg) skewY(0deg); -moz-transform: scale(1.1) translateY(-3px) rotate(0deg) skewX(0deg) skewY(0deg); -ms-transform: scale(1.1) translateY(-3px) rotate(0deg) skewX(0deg) skewY(0deg); -o-transform: scale(1.1) translateY(-3px) rotate(0deg) skewX(0deg) skewY(0deg); transform: scale(1.1) translateY(-3px) rotate(0deg) skewX(0deg) skewY(0deg);
}
a.responsive-picture#backtotoparrow:hover {
opacity: 1; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s;
}
a.link-button-glyph.scroll-down:hover {
padding-top: 100px; padding-right: 30px; padding-bottom: 20px; background-color: transparent; background-image: -webkit-linear-gradient(180deg, rgba(173, 86, 213, 0) 0%, rgba(131, 85, 152, .35) 100%); background-image: -moz-linear-gradient(180deg, rgba(173, 86, 213, 0) 0%, rgba(131, 85, 152, .35) 100%); background-image: -ms-linear-gradient(180deg, rgba(173, 86, 213, 0) 0%, rgba(131, 85, 152, .35) 100%); background-image: -o-linear-gradient(180deg, rgba(173, 86, 213, 0) 0%, rgba(131, 85, 152, .35) 100%); background-image: linear-gradient(180deg, rgba(173, 86, 213, 0) 0%, rgba(131, 85, 152, .35) 100%); -webkit-transition-duration: .1s; -moz-transition-duration: .1s; -ms-transition-duration: .1s; -o-transition-duration: .1s; transition-duration: .1s;
}
a.link-button-image.get-RSD-bt:hover {
background-color: #ff8300; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -ms-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s;
}
@media screen and (max-width: 755px) {
/* Text Elements */
h2 { font-size: 24px; }
h3.welcome-heading { margin-top: 10px; margin-bottom: 0; padding-top: 10px; font-size: 22px; }
h5 { padding: 6px 20px; background-color: rgba(0, 0, 0, .70); font-size: 18px; }
p.paragraph.welcome-paragraph { font-size: 14px; }
p.paragraph.portfolio-description { font-size: 14px; }
a.link-text { font-size: 14px; }
/* Interaction Elements */
a.link-button.toc-link { display: none; margin-bottom: 0; padding-bottom: 10px; }
/* Layout Elements */
body > .row.bckgnd_image { min-height: 50px; max-height: 400px; height: auto; background-attachment: scroll; background-size: cover; background-repeat: no-repeat; }
body > .row > [class*='coffee-span-'].welcome_text { padding-top: 60px; padding-right: 8px; padding-bottom: 60px; min-height: 50px; height: 100%; }
body > .row.heading-row { height: auto; }
body > .row.footer { padding-top: 60px; padding-bottom: 60px; height: auto; }
body > .row > [class*='coffee-span-'].live_view { padding: 100px 8px; min-height: 350px; background-color: transparent; opacity: 1; }
body > .row.narrow-row.portfolio-description { margin-top: 10px; margin-bottom: 0; }
body > .row > [class*='coffee-span-'].live_view:hover { background-color: transparent; }
a.responsive-picture.toc-thumbnail { margin-top: 10px; margin-bottom: 30px; }
div.responsive-picture.logo { max-width: 200px; width: 70%; }
a.responsive-picture.thumbnail { display: none; max-width: 100px; }
a.social-image { min-width: 0; max-width: 35px; }
.row > [class*='coffee-span-'] > .container.footer_contact { margin-top: 0; margin-right: 0; margin-bottom: 0; }
a.link-button-glyph.scroll-down { display: none; }
a.link-button-image.get-RSD-bt { float: none; padding-right: 5px; padding-bottom: 5px;
-webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; }
span.link-button-text.bt-text { font-size: 16px; line-height: 1; }
div.image-for-button.bt-image { min-width: 0; max-width: 50px; }
}