/* * @file * Overall specifications for Magazine+. */ body { font-size: 15px; font-weight: 400; line-height: 1.6; color: #2d2d2d; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } /*Paragraphs and links*/ p { margin: 0; padding: 0 0 15px 0; } p.large { font-size: 18px; line-height: 1.45; } p.highlighted { background-color: #f4f4f4; display: inline-block; padding: 10px 40px; margin-bottom: 45px; border-radius: 50px; font-size: 16px; } .region--gray-background p.highlighted { background-color: #ffffff; } .region--light-typography p.highlighted { background-color: rgba(255, 255, 255, 0.1); } a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration: none; } a:hover { text-decoration: none; } a:focus { outline: none; text-decoration: none; } p a { text-decoration: underline; } p a:hover, p a:focus { text-decoration: none; } .region--light-typography.region--dark-background a.is-active { color: #ddd; } a.link--bordered, .link--bordered a { border-bottom-width: 1px; border-bottom-style: solid; text-decoration: none; display: inline-block; } a.link--bordered:hover, .link--bordered a:hover { border-bottom-width: 1px; border-bottom-style: solid; text-decoration: none; border-color: transparent; } .region--light-typography a.link--bordered, .region--light-typography .link--bordered a { border-color: #ffffff; text-decoration: none; } .region--light-typography a.link--bordered:hover, .region--light-typography .link--bordered a:hover { border-color: transparent; text-decoration: none; } a.link--hover-style-2, .link--hover-style-2 a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: relative; display: block; } a.link--hover-style-2:before, .link--hover-style-2 a:before { position: absolute; left: -15px; top: 50%; margin-top: -5px; font-family: "FontAwesome"; font-size: 10px; line-height: 1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transition-delay: 0s; /* Safari */ transition-delay: 0s; opacity: 0; filter: alpha(opacity=0); content: "\f105"; } a.link--hover-style-2:hover, .link--hover-style-2 a:hover { padding-left: 20px; text-decoration: none; } a.link--hover-style-2:hover:before, .link--hover-style-2 a:hover:before { left: 0; opacity: 1; filter: alpha(opacity=100); -webkit-transition-delay: 0.1s; /* Safari */ transition-delay: 0.1s; } .region--light-typography.region--dark-background a.link--hover-style-2:before, .region--light-typography.region--dark-background .link--hover-style-2 a:before { color: #ffffff; } .region--light-typography.region--dark-background .text--dark, .region--light-typography.region--black-background .text--dark { color: #ffffff; } .region--light-typography.region--colored-background .text--colored, .region--light-typography.region--black-background .text--colored { color: #ffffff; } .text--drop-cap:first-letter { float: left; font-size: 5em; line-height: 0.8; padding-top: 0px; padding-right: 12px; } /*Regions with light and dark typography*/ .region--light-typography { color: #ffffff; } .subfooter.region--light-typography.region--dark-background, .subfooter.region--light-typography.region--black-background { color: #9c9c9c; } .region--light-typography a, .region--light-typography a.link--dark, .region--light-typography .link--dark a { color: #ffffff; text-decoration: underline; } .region--light-typography a:hover, .region--light-typography a:focus, .region--light-typography a.link--dark:hover, .region--light-typography a.link--dark:focus, .region--light-typography .link--dark a:hover, .region--light-typography .link--dark a:focus { color: #ffffff; text-decoration: none; } /*Basic elements*/ img { height: auto; max-width: 100%; } img.img--bordered, .img--bordered img { border-width: 1px; border-style: solid; border-color: #e7e7e7; } .region--light-typography img.img--bordered, .region--light-typography .img--bordered img { border-color: rgba(255, 255, 255, 0.15); } code, pre { word-wrap: break-word; word-break: break-all; white-space: pre; white-space: pre-wrap; font-family: 'Source Code Pro', Consolas, Monaco, Courier; } pre { background: #f4f4f4; border: none; border-left: 5px solid #d3d1cd; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; color: #2d2d2d; padding: 20px; font-size: 14px; max-height: 62px; overflow: hidden; margin: 40px 0 40px 45px; } pre:hover { max-height: 10000px; -webkit-transition: all ease-in-out 2s; -moz-transition: all ease-in-out 2s; -o-transition: all ease-in-out 2s; -ms-transition: all ease-in-out 2s; transition: all ease-in-out 2s; } blockquote { padding: 25px 0 5px; margin: 0 0 25px; border-left-width: 0px; position: relative; font-style: italic; } blockquote p { font-size: 18px; line-height: 1.65; } .paragraph-responsive-typography-enabled blockquote p { font-size: calc(1.5*(0.9em + 0.3vw)); } p + blockquote { margin-top: 30px; } blockquote:before { content: ""; width: 170px; height: 5px; background-color: #f4f4f4; position: absolute; top: 0; left: 0; } blockquote p:first-child:before { content: "“" } blockquote footer { font-style: normal; color: #2d2d2d; } .region--light-typography blockquote footer { color: #ffffff; } .region--gray-background blockquote:before { background-color: #eaeaea; } .region--colored-background blockquote:before, .region--black-background blockquote:before, .region--dark-background blockquote:before { background-color: #ffffff; } hr { border-top: 1px solid #f4f4f4; margin-bottom: 40px; margin-top: 40px; } .region--gray-background hr { border-color: #e7e7e7; } .region--light-typography hr { border-color: #ffffff; } /*Headings*/ h1, h2, h3, h4, h5, h6 { line-height: 1.20; padding: 0; margin: 20px 0 15px 0; font-weight: 400; } .headings-wide-spacing-enabled h1, .headings-wide-spacing-enabled h2, .headings-wide-spacing-enabled h3, .headings-wide-spacing-enabled h4, .headings-wide-spacing-enabled h5, .headings-wide-spacing-enabled h6 { letter-spacing: 0.2em; text-transform: uppercase; } h1 { font-size: 40px; } h2 { font-size: 35px; } h3 { font-size: 30px; } h4 { font-size: 26px; } h5 { font-size: 24px; } h6 { font-size: 18px; } h1.title { margin-top: 0; } h1.page-title { margin-bottom: 20px; } /*resposinve text align*/ @media (min-width: 1200px) { .lg-text-center { text-align: center; } } @media (min-width: 992px) and (max-width: 1199px) { .md-text-center { text-align: center; } } @media (min-width: 768px) and (max-width: 991px) { .sm-text-center { text-align: center; } } @media (max-width: 767px) { .xs-text-center { text-align: center; } } /*Block title*/ .block-title { margin-bottom: 30px; margin-top: 0; line-height: 1.2; font-size: 30px; } .block-title--large { font-size: 40px; margin-bottom: 15px; } .block-title--extra-large { font-size: 50px; margin-bottom: 15px; } @media (max-width: 767px) { .block-title--large { font-size: 30px; } .block-title--extra-large { font-size: 35px; } } .headings-wide-spacing-enabled .block-title--large { letter-spacing: 0.55em; text-transform: uppercase; } h2.block-title { padding-bottom: 15px; margin: 0 0 20px 0; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #eeeeee; line-height: 1.2; text-transform: uppercase; font-weight: 400; } .region--light-typography h2.block-title { border-bottom-color: rgba(255,255,255,0.1); } h2.title, nav > h2, .block-search > h2 { font-size: 30px; padding-top: 15px; margin: 0 0 40px 0; border-width: 2px 0 0 0; border-top-style: solid; border-color: #eeeeee; font-weight: 400; text-align: center; } .sidebar__section h2.title, .sidebar__section nav > h2, .sidebar__section .block-search > h2, .slideout__section h2.title, .slideout__section nav > h2, .slideout__section .block-search > h2, .footer__section h2.title, .footer__section nav > h2, .footer__section .block-search > h2, .footer-bottom__section h2.title, .footer-bottom__section nav > h2, .footer-bottom__section .block-search > h2, .subfooter__section h2.title, .subfooter__section nav > h2, .subfooter__section .block-search > h2 { font-size: 18px; padding-top: 8px; padding-bottom: 25px; margin-bottom: 30px; border-width: 0 0 2px 0; border-bottom-style: solid; border-color: #eeeeee; text-transform: uppercase; text-align: left; } .region--light-typography h2.title, .region--light-typography nav > h2, .region--light-typography .block-search > h2 { border-color: rgba(255,255,255,0.1); } /*footer regions*/ @media (max-width: 991px) { .footer__section h2.title, .footer__section nav > h2, .footer__section .block-search > h2, .footer-bottom__section h2.title, .footer-bottom__section nav > h2, .footer-bottom__section .block-search > h2, .subfooter__section h2.title, .subfooter__section nav > h2, .subfooter__section .block-search > h2 { margin-bottom: 20px; } } /* Content region overrides */ .region-content h2.title, .region-content nav > h2, .region-content .block-search > h2 { margin: 20px 0; } /*spacing*/ .bottom-spacing-small { padding-bottom: 25px; } .bottom-spacing-medium { padding-bottom: 50px; } .bottom-spacing-large { padding-bottom: 90px; }