/* Theme Name: Michael De Picciotto Author: Michael De Picciotto Author URI: http://www.michaeldepicciotto.com Version: 1.0 */ * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; position: relative;} html {width: 100%; height: 100%; background-color: #fff; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; color: #292c33} body {height: auto; letter-spacing: 0px; padding-left: 0px; padding-right: 0px; font-size: 16px; line-height: 22px; -webkit-font-smoothing: antialiased;} .animatePane {} /********************************** * Navigation and Header Styles **********************************/ /* General Build Styles */ .clearFloats {clear: both;} .alignright {float: right} .alignleft {float: left} .flexPane {position: relative; display: -webkit-flex; display: flex; border: 0px solid red;} .double-container, .triple-container, .quad-container, .quint-container {display: -webkit-flex; display: flex;} .ctl-double-pane {position: relative; display: inline-block; width: 50%;} .ctl-triple-pane {position: relative; display: inline-block; width: 33.3%} .ctl-quad-pane {position: relative; display: inline-block; width: 25%} .ctl-quint-pane {position: relative; display: inline-block; width: 20%} .clipBox {overflow: hidden} .coverPic {background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .sideImage {margin-bottom: 20px;} .sideImage img {width: 100%; height: auto;} .rowPadReg {padding-top: 50px; padding-bottom: 50px;} .rowPadRegTop {padding-top: 50px; padding-bottom: 0px;} /* Top Navigation Styles */ nav {display: block; position: fixed; background-color: #ffffff; width: 100%; height: 50px; top: 0px; left: 0px; z-index: 99999; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} nav #pull {display: none;} nav #topNav {display: inline-block; position: absolute; right: 20px; top: 15px; border: 0px solid red;} nav #topNav li {display: inline-block; position: relative; margin-left: 20px;} nav #topNav li a {color: #88888b; text-decoration: none; text-transform: none; font-weight: 400; font-size: 14px; line-height: 18px; padding: 1px 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} nav #topNav li a:before {content: ""; display: block; position: absolute; left: 0px; bottom: -4px; height: 2px; width: 0; background: #6699cc; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} nav #topNav li a:hover, nav #topNav li a.active {color: #121217} nav #topNav li a:hover:before, nav #topNav li a.active:before {width: 100%;} /* Header (navigation) logo */ nav #headerLogoNav {} .home nav #headerLogoNav {opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} nav #headerLogoNav .a {fill: #343434;} nav.sticky #headerLogoNav {opacity: 1;} nav #headerLogoHit {position: absolute; display: block; top: 12px; left: 0px; width: 206px; height: 25px; z-index: 1;} .home nav #headerLogoHit {display: none;} .home nav.sticky #headerLogoHit {display: block;} /* Header Styles */ header {height: 70vh; background: #f0f0f0; position: relative;} header.smallHeader {height: 150px;} header #headerLogo {position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -75px; visibility: hidden;} header #headerLogo .a {fill:#343434;} /* Home header Hero Pane Styles */ header .headerBgPic {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url("images/header-bg.jpg"); background-repeat: no-repeat;} /* Background and container Styles */ .ctl-bg-grey {background-color: #45474b} .ctl-bg-darkgrey {background-color: #f4f4f5; background: -moz-linear-gradient(top, #fafafa 0%, #f7f7f7 100%); background: -webkit-linear-gradient(top, #fafafa 0%,#f7f7f7 100%); background: linear-gradient(to bottom, #fafafa 0%,#f7f7f7 100%); } .ctl-bg-lightgrey {background-color: #fdfdfd;} /********************************** * Text Styles **********************************/ /* General Text Styles */ h2, h3, h4, h5, h6, h7 {} .ctl-title {font-size: 30px; line-height: 34px; font-weight: bold; margin-bottom: 0px;} .ctl-subTitle {font-size: 22px; line-height: 26px; font-weight: 300; font-style: italic; margin-bottom: 0px;} .ctl-medTitle {font-size: 45px; line-height: 50px; font-weight: bold;} .ctl-medText {font-size: 18px; line-height: 30px; font-weight: 400;} .ctl-bodyText {font-size: 18px; line-height: 30px; font-weight: 400;} .ctl-centerText {text-align: center;} .ctl-leftText {text-align: left;} .ctl-rightText {text-align: right;} .ctl-greyTxt {color: #45474b;} .ctl-blueTxt {color: #6699cc} .ctl-whiteTxt {color: #fff} .ctl-bodyText p {margin-bottom: 28px; margin-top: -8px} .ctl-bodyText p em {font-style: italic; font-weight: bold;} .ctl-bodyText p strong {font-weight: bold;} .ctl-bodyText p a {text-decoration: none; color: #00909F; font-size: inherit; overflow-wrap: break-word; word-wrap: break-word;} .ctl-bodyText p a:hover {text-decoration: underline; color: #436775;} #mainContent .ctl-bodyText p:first-of-type, .single-post #blogPost .ctl-bodyText p:first-of-type {font-weight: 300; font-size: 24px; line-height: 38px;} .single-post #blogPost .blogDate {margin-top: 5px;} .single-post #blogPost .ctl-bodyText blockquote p, .single-post #blogPost .ctl-bodyText blockquote p:first-of-type {padding-left: 20px; border-left: 3px solid #6699cc; font-size: 20px; line-height: 34px; padding-right: 20px; font-style: italic; font-weight: 300} .single-post #blogPost strong {font-weight: bold;} .single-post #blogPost small {font-size: 14px; line-height: 20px;} .single-post #blogPost hr {margin-top: 40px; margin-bottom: 40px; border: 0; width: 100%; height: 2px; background-color: #6699cc} .ctl-bodyText ul {margin-bottom: 25px;} .ctl-bodyText ul li {padding-left: 25px; margin-bottom: 5px;} .ctl-bodyText ul li:before {content: '•'; position: absolute; top: 0px; left: 0px; color: #6699cc} .ctl-bodyText ul li strong {font-weight: bold} .ctl-bodyText ul li ul {margin-top: 10px; border-left: none;} .ctl-bodyText ol {margin-bottom: 25px;} .ctl-bodyText ol li {padding-left: 25px; margin-bottom: 5px;} .ctl-bodyText ol li:before {content: '•'; position: absolute; top: 0px; left: 0px; color: #6699cc} .ctl-bodyText ol li strong {font-weight: bold} .ctl-bodyText ol li ol {margin-top: 10px; border-left: none;} /********************************** * Button Styles **********************************/ .blockButton, .pagaLink a {display: inline-block; text-decoration: none; border-radius: 5px; text-align: center; font-weight: 500; font-size: 14px; line-height: 14px; padding: 14px 25px; min-width: 160px; color: #45474b; margin-right: 5px; margin-bottom: 5px; border: 2px solid #c7c7c8; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} .blockButton.whiteRevBlock {background-color: none; color: #fff; border: 2px solid #fff;} .blockButton:hover, .pagaLink a:hover {background-color: #6699cc; color: #fff; border: 2px solid #6699cc;} .blockButton.greenBlock:hover {background-color: #893982; color: #fff; border: 1px solid #893982;} .blockButton.blueBlock:hover {background-color: #004B53; color: #fff; border: 1px solid #004B53;} /********************************** * News pane & Page Styles **********************************/ #latestnewsPage .flexPane {flex-wrap: wrap; /*justify-content: center;*/} #latestnews .newsPane, #latestnewsPage .newsPane {width: 25%; margin-right: 25px; padding-right: 25px; border-right: 1px solid #d2d2d5; padding-bottom: 70px;} #latestnewsPage .newsPane {width: 23%; width: calc(25% - 25px); margin-bottom: 50px;} #latestnews .newsPane:last-of-type, #latestnewsPage .newsPane:last-of-type {border: none;} #latestnewsPage .newsPane:nth-child(4) {border: none; margin-right: 0; padding-right: 0} #latestnews .newsPane .blogDate, #latestnewsPage .newsPane .blogDate {display: block; margin-bottom: 5px; font-size: 16px; line-height: 18px; font-weight: 300; font-style: italic; color: #6699cc;} #latestnews .newsPane .blogTitle, #latestnewsPage .newsPane .blogTitle {display: block; margin-bottom: 20px; font-size: 20px; line-height: 21px; font-weight: 700; color: #45474b; text-decoration: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} #latestnews .newsPane .blogTitle:hover, #latestnewsPage .newsPane .blogTitle:hover {color: #6699cc} #latestnews .newsPane .blockButton, #latestnewsPage .newsPane .blockButton {position: absolute; bottom: -4px; left: 0} #latestnews .newsPane .blockButton:first-of-type {left: 0} /********************************** * Footer Styles **********************************/ footer {background-color: #eeeeee; font-family: 'Open Sans', sans-serif; padding-top: 40px; padding-bottom: 40px; color: #45474b; font-size: 12px; line-height: 14px; font-weight: 500; text-align: center;} #footerLogo {margin-top: 0px; text-align: left;} footer * {vertical-align: center;} footer .col {vertical-align: top !important; line-height: 22px;} footer .col.span_4 {padding-left: 9%} /* Footer Link Styles */ footer .textLink {color: #767676; text-decoration: none; margin-right: 10px;} footer .textLink:hover {color: #fff; text-decoration: underline;} @media only screen and (min-width: 1180px) { } /********************************** * Smaller Screens **********************************/ @media only screen and (max-width: 1180px) { } /********************************** * Tablets **********************************/ @media (max-width: 967px) { } @media (max-width: 867px) { /* Header Styles */ header {height: 60vh;} /* Top Navigation Styles */ nav.live {} nav.live #headerLogoNav {opacity: 1;} nav #pull { display: block; position: absolute; top: -3px; right: 0px; height: 54px; width: 70px; -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); transform-origin: center center;} nav #topNav {display: none; position: absolute; right: 0px; top: 50px; width: 100%;} nav #topNav li {display: block; position: relative; margin-left: 0px; text-align: center; background-color: #fff} nav #topNav li a {display: block; font-size: 16px; line-height: 18px; padding: 16px 5px; border-bottom: 1px solid #e2e2e3; z-index: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} nav #topNav li:last-of-type a {border-bottom: none} nav #topNav li a.dropDown {padding-right: 0px;} nav #topNav li a.dropDown:after {display: none;} nav #topNav li a:before {content: ""; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0} nav #topNav li a:hover {background: #fafafa} nav #topNav li a:hover:before {opacity: 0.1} nav #topNav li ul {display: block; position: relative; display: block; visibility: visible; opacity: 1; top: 0px; padding: 0px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; border: 0px solid red;} nav #topNav li ul li {display: block; padding: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px; border-bottom: 1px solid #436775; background: #004B53;} nav #topNav li ul li:last-of-type {padding: 0px; margin-left: 0px; margin-bottom: 0px; border-bottom: 1px solid #004B53} nav #topNav li ul li a {display: block; position: relative; white-space: nowrap; padding: 12px 25px; border: 0px solid red; margin: 0px; z-index: 1} nav #topNav li:hover > ul {visibility: visible; opacity: 1;} nav #topNav li ul li a:before {content: ""; display: block; position: absolute; left: 0px; top: 0px; height: 100%; width: 0px; background: #fff; z-index: -1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out} /* News pane Styles */ #latestnews .flexPane {flex-wrap: wrap} #latestnews .newsPane.ctl-quad-pane, #latestnewsPage .newsPane.ctl-quad-pane {width: 48%; width: calc(50% - 25px); border-right: none;} #latestnews .newsPane.ctl-quad-pane:nth-child(-n+2), #latestnewsPage .newsPane.ctl-quad-pane:nth-child(-n+2) {margin-bottom: 50px;} #latestnews .newsPane.ctl-quad-pane:nth-child(odd), #latestnewsPage .newsPane.ctl-quad-pane:nth-child(odd) {margin-right: 25px; padding-right: 25px; border-right: 1px solid #d2d2d5;} #latestnews .newsPane.ctl-quad-pane:nth-child(even), #latestnewsPage .newsPane.ctl-quad-pane:nth-child(even) {margin-right: 0;} } /********************************** * Mobile Devices * - All columns are full width **********************************/ @media only screen and (max-width: 767px) { .row {width: 100%; border: 0px solid red} } @media only screen and (max-width: 619px) { /* Homepage content panes */ #mainContent .rowPadRegTop, #biography .rowPadRegTop, #scientific_research .rowPadRegTop {padding-top: 20px;} #mainContent .span_3, #biography .span_3, #scientific_research .span_3, #blogPost .span_3 {width: 100%; margin-left: 0;} #mainContent .span_1, #biography .span_1, #scientific_research .span_1, #blogPost .span_1 {width: 70%; margin-left: 0;} } @media only screen and (max-width: 520px) { /* Header Styles */ header {height: 50vh;} header #headerLogo {width: 100%; height: auto; margin-left: 0px; left: 0px;} /* Homepage content panes */ #biography .span_1, #scientific_research .span_1{width: 100%; margin-left: 0;} /* News pane Styles */ #latestnews .newsPane.ctl-quad-pane, #latestnewsPage .newsPane.ctl-quad-pane {width: 100%; margin-bottom: 50px; padding-top: 50px; margin-right: 0; padding-right: 0; border-right: none; border-top: 1px solid #d2d2d5; } #latestnews .newsPane.ctl-quad-pane:first-of-type, #latestnewsPage .newsPane.ctl-quad-pane:first-of-type {border-top: none; padding-top: 0} #latestnews .newsPane.ctl-quad-pane:last-of-type, #latestnewsPage .newsPane.ctl-quad-pane:last-of-type {margin-bottom: 0;} #latestnews .newsPane.ctl-quad-pane:nth-child(odd), #latestnewsPage .newsPane.ctl-quad-pane:nth-child(odd) {margin-right: 0; padding-right: 0; border-right: none;} } /********************************** * Height header fix height **********************************/ @media (max-height: 609px) { } @media (max-height: 649px) { }