/******************************************************* * _INIT.SCSS * ================================================= * * This file contains intitial setup and configuration * data for all site stylesheets. It includes * Site-wide variables, mixins, & functions * * IMPORTING ADDITIONAL CONFIGURATION STYLESHEETS: * ---------------------------------------------- * All other sitewide includes should be imported at * at the end of this file. As this file is imported * into all other stylesheets, anything imported here * will likewise be imported into those stylesheets. * * ==================== WARNING! ======================= * DO NOT INCLUDE ANY ACTUAL STYLES THAT WILL GET OUTPUT * TO THE FINAL CSS IN THIS FILE OR ANY FILE IMPORTED IN * THIS FILE! ANY SUCH STYLES WILL END UP BEING DEFINED * IN EVERY OUTPUT CSS FILE THAT IMPORTS THIS FILE (I.E. * ALL STYLESHEET FILES SITE WIDE). ********************************************************/ /* TYPOGRAPHY ========== */ /* Define the path to use for ProximaNova fonts */ /* Define the path to use for ProximaNovaCondensed fonts */ /* Define the path to use for TisaPro fonts */ /*$ProximaNova: join(("ProximaNova", "proxima-nova"), $PrimaryCopyFont, comma); */ /* COLORS ====== */ /*Define the path to use for font awesome fonts */ /* MIXINS ====== */ /* ADDITIONAL CONFIGURATION STYLESHEETS * ==================================== */ /* Use this file to change/override bootstrap variables. * Variables should be defined at the top of the file, * with the bootstrap import coming at the end. *********************************************************/ /* Load icon fonts from this directory. */ /* default text settings */ /* default settings for headings and titles */ /* DO NOT ADD VARIABLES BELOW THIS LINE */ /********************************************************** * _REESPONSIVE.SCSS * This file defines variables, functions, and mixins for * use in targeting breakpoints for mobile devices. * * The variables and functions defined here should rarely * be accessesd directly. Instead, the media query mixins * should be used to target specific device(s). \**********************************************************/ /* $screen - * A Sass Map to define the min and max screen sizes * for each device type supported. Used by the * screen-size function to retrieve breakpoints for * media query mixins */ /* FUNCTIONS * ========= * * Functions are used to return a specific screen size from * the $screen map */ /* @screen-size * A function to retrieve a screen breakpoint value from the * $screen map for use in a media query mixin */ /* MEDIA QUERY MIXINS * ================== * * A set of mixins to create media queries that target a specific * device or set of devices. These mixins create the appropriate * media query, and then include the mixin content inside the media query. * * USAGE: * @include { * //Styles for the media query here. For example: * font-size: 0.75em; * background: url('phone-bg.png'); * } */ @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro.otf"); font-weight: normal; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Ita.otf"); font-weight: normal; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Thin.otf"); font-weight: 100; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-ThinIta.otf"); font-weight: 100; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Light.otf"); font-weight: 200; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-LightIta.otf"); font-weight: 200; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Medi.otf"); font-weight: 600; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-MediIta.otf"); font-weight: 600; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Bold.otf"); font-weight: 700; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-BoldIta.otf"); font-weight: 700; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Xbold.otf"); font-weight: 800; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-XboldIta.otf"); font-weight: 800; font-style: italic; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-Black.otf"); font-weight: 900; font-style: normal; } @font-face { font-family: "TisaPro"; src: url("/Themes/SECC2019/Assets/fonts/tisa-pro/FF-TisaPro-BlackIta.otf"); font-weight: 900; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Regular.otf"); font-weight: normal; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-RegularIt.otf"); font-weight: normal; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Thin.otf"); font-weight: 100; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-ThinIt.otf"); font-weight: 100; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Light.otf"); font-weight: 200; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-LightIt.otf"); font-weight: 200; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Semibold.otf"); font-weight: 600; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-SemiboldIt.otf"); font-weight: 600; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Bold.otf"); font-weight: 700; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-BoldIt.otf"); font-weight: 700; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Extrabld.otf"); font-weight: 800; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-ExtrabldIt.otf"); font-weight: 800; font-style: italic; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-Black.otf"); font-weight: 900; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova/ProximaNova-BlackIt.otf"); font-weight: 900; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Regular.otf"); font-weight: normal; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-RegularIt.otf"); font-weight: normal; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Thin.otf"); font-weight: 100; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-ThinIt.otf"); font-weight: 100; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Light.otf"); font-weight: 200; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-LightIt.otf"); font-weight: 200; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Semibold.otf"); font-weight: 600; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-SemiboldIt.otf"); font-weight: 600; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Bold.otf"); font-weight: 700; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-BoldIt.otf"); font-weight: 700; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Extrabld.otf"); font-weight: 800; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-ExtrabldIt.otf"); font-weight: 800; font-style: italic; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-Black.otf"); font-weight: 900; font-style: normal; } @font-face { font-family: "ProximaNovaCond"; src: url("/Themes/SECC2019/Assets/fonts/proxima-nova-condensed/ProximaNovaCond-BlackIt.otf"); font-weight: 900; font-style: italic; } /* Typography */ h1:not(.modal-title), h2:not(.modal-title), h3:not(.modal-title), .accordions-christmas2019 .panel .panel-heading .panel-title:not(.modal-title), .accordions-christmas2020 .panel .panel-heading .panel-title:not(.modal-title), .accordions-easter2020 .panel .panel-heading .panel-title:not(.modal-title), h4:not(.modal-title), .accordions-1 .panel .panel-heading .panel-title:not(.modal-title), .accordions-2 .panel .panel-heading .panel-title:not(.modal-title), .accordions-nostyle .panel .panel-heading .panel-title:not(.modal-title), h5:not(.modal-title), h6:not(.modal-title) { color: #000000; margin-top: 0; } h1 a, h2 a, h3 a, .accordions-christmas2019 .panel .panel-heading .panel-title a, .accordions-christmas2020 .panel .panel-heading .panel-title a, .accordions-easter2020 .panel .panel-heading .panel-title a, h4 a, .accordions-1 .panel .panel-heading .panel-title a, .accordions-2 .panel .panel-heading .panel-title a, .accordions-nostyle .panel .panel-heading .panel-title a, h5 a, h6 a { color: #000000; } h1 small, h2 small, h3 small, .accordions-christmas2019 .panel .panel-heading .panel-title small, .accordions-christmas2020 .panel .panel-heading .panel-title small, .accordions-easter2020 .panel .panel-heading .panel-title small, h4 small, .accordions-1 .panel .panel-heading .panel-title small, .accordions-2 .panel .panel-heading .panel-title small, .accordions-nostyle .panel .panel-heading .panel-title small, h5 small, h6 small { color: #222222; font-size: 60%; } h1, .h1 { font-size: 4rem; font-weight: normal; line-height: 1.1; } h2, .h2 { font-size: 3.5rem; font-weight: normal; line-height: 1.1; } h3, .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .panel-title, .h3 { font-size: 2.75rem; font-weight: normal; line-height: 1.4; } h4, .accordions-1 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .panel-title, .h4 { font-size: 2.25rem; font-weight: normal; line-height: 1.4; } h5, .h5 { font-size: 1.875rem; font-weight: normal; line-height: 1.4; } h6, .h6 { font-size: 1.25rem; font-weight: normal; line-height: 1.1; } code { background-color: rgba(0, 0, 0, 0.8); color: #FFFFFF; border-radius: .2rem; padding: .1rem .3rem .2rem; } em, li { font-size: 1.5rem; font-weight: 500; color: #000000; } em > a, li > a { color: #000000; } em > a:hover, li > a:hover { color: black; } label { font-size: 1.5rem; font-weight: 700; color: #000000; margin-bottom: .25rem; } i { line-height: 1; } /* Paragraph */ p { font-size: 1.75rem; font-weight: 400; color: #000000; line-height: 1.4; margin-top: 0; margin-bottom: 1rem; } /* Links */ a { color: #222222; text-decoration: none; } a:focus, a:hover { color: black; text-decoration: none; } a:focus { outline: none; } .uppercase { text-transform: uppercase; } .letter-space { letter-spacing: 2px; } .big-letter-space { letter-spacing: 6px; } /******************************************************* * _INIT.SCSS * ================================================= * * This file contains intitial setup and configuration * data for all site stylesheets. It includes * Site-wide variables, mixins, & functions * * IMPORTING ADDITIONAL CONFIGURATION STYLESHEETS: * ---------------------------------------------- * All other sitewide includes should be imported at * at the end of this file. As this file is imported * into all other stylesheets, anything imported here * will likewise be imported into those stylesheets. * * ==================== WARNING! ======================= * DO NOT INCLUDE ANY ACTUAL STYLES THAT WILL GET OUTPUT * TO THE FINAL CSS IN THIS FILE OR ANY FILE IMPORTED IN * THIS FILE! ANY SUCH STYLES WILL END UP BEING DEFINED * IN EVERY OUTPUT CSS FILE THAT IMPORTS THIS FILE (I.E. * ALL STYLESHEET FILES SITE WIDE). ********************************************************/ /* TYPOGRAPHY ========== */ /* Define the path to use for ProximaNova fonts */ /* Define the path to use for ProximaNovaCondensed fonts */ /* Define the path to use for TisaPro fonts */ /*$ProximaNova: join(("ProximaNova", "proxima-nova"), $PrimaryCopyFont, comma); */ /* COLORS ====== */ /*Define the path to use for font awesome fonts */ /* MIXINS ====== */ /* ADDITIONAL CONFIGURATION STYLESHEETS * ==================================== */ /* Use this file to change/override bootstrap variables. * Variables should be defined at the top of the file, * with the bootstrap import coming at the end. *********************************************************/ /* Load icon fonts from this directory. */ /* default text settings */ /* default settings for headings and titles */ /* DO NOT ADD VARIABLES BELOW THIS LINE */ /********************************************************** * _REESPONSIVE.SCSS * This file defines variables, functions, and mixins for * use in targeting breakpoints for mobile devices. * * The variables and functions defined here should rarely * be accessesd directly. Instead, the media query mixins * should be used to target specific device(s). \**********************************************************/ /* $screen - * A Sass Map to define the min and max screen sizes * for each device type supported. Used by the * screen-size function to retrieve breakpoints for * media query mixins */ /* FUNCTIONS * ========= * * Functions are used to return a specific screen size from * the $screen map */ /* @screen-size * A function to retrieve a screen breakpoint value from the * $screen map for use in a media query mixin */ /* MEDIA QUERY MIXINS * ================== * * A set of mixins to create media queries that target a specific * device or set of devices. These mixins create the appropriate * media query, and then include the mixin content inside the media query. * * USAGE: * @include { * //Styles for the media query here. For example: * font-size: 0.75em; * background: url('phone-bg.png'); * } */ nav.section-nav { color: inherit; font-size: .8em; font-family: "ProximaNova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; width: 23%; height: 100%; right: 0; top: 0; overflow: scroll; background: rgba(255, 255, 255, 0.8); } nav.section-nav a, nav.section-nav button { color: inherit; text-align: left; display: inline-block; width: 100%; } nav.section-nav > ul > li + li { border-top: 1px solid #a09d99; } nav.section-nav li > *:first-child { padding-left: 10%; padding-top: 0.5em; padding-bottom: 0.5em; } nav.section-nav.no-gutter { padding-left: 0; } nav.section-nav li li { margin-left: 10%; } nav.section-nav .no-indent li li { margin-left: 0; } nav.section-nav .indent-children li li { margin-left: 10%; } nav.section-nav .pad-children li li { margin-left: 0; } nav.section-nav .pad-children li li > *:first-child { padding-left: 20%; } nav.section-nav .pad-children li li li > *:first-child { padding-left: 30%; } nav.section-nav .pad-children li li li li > *:first-child { padding-left: 40%; } nav.section-nav .pad-children li li li li li > *:first-child { padding-left: 50%; } nav.section-nav .pad-children li li li li li li > *:first-child { padding-left: 60%; } nav.section-nav .pad-children li li li li li li li > *:first-child { padding-left: 70%; } @media (min-width: 1600px) { nav.section-nav { font-size: 1em; } } @media (min-width: 768px) and (max-width: 991px) { nav.section-nav { width: 30%; } } nav.section-nav > ul > li:hover, nav.section-nav > ul > li.active { background: rgba(255, 255, 255, 0.9); } nav.section-nav > ul > li .toggle:hover, nav.section-nav > ul > li a:hover { text-decoration: none; } nav.section-nav > ul > li.dropdown li > a { color: #6D6A66 !important; } nav.section-nav > ul > li.dropdown li.active > a { color: inherit !important; } nav.section-nav > ul > li li { font-size: .9em; } nav.section-nav > ul > li li > *:first-child { padding-top: .25em; padding-bottom: .5em; } nav.section-nav .se-logo { font-size: 26px; margin: 14px auto; display: block; } @media (min-width: 1600px) { nav.section-nav .se-logo { font-size: 35px; margin-top: 30px; margin-bottom: 30px; } } @media (min-width: 992px) and (max-width: 1199px) { nav.section-nav .se-logo { font-size: 16px; margin-top: 16px; margin-bottom: 8px; } } @media (min-width: 768px) and (max-width: 991px) { nav.section-nav .se-logo { font-size: 14px; margin-top: 20px; margin-bottom: 10px; } } @media (min-width: 480px) and (max-width: 767px) { nav.section-nav .se-logo { font-size: 28px; } } @media (max-width: 480px) { nav.section-nav .se-logo { font-size: 20px; margin: 14px; } } nav.section-nav .se-logo.visible-sm-block { float: left; margin: 0 5px 0 0; } /* -------------------------------- General Style -------------------------------- */ .cd-intro { position: relative; height: 50vh; /* due to height of top navigation */ width: 100%; /* vertically align its contentt */ display: table; background: #2e416a; overflow: hidden; } .cd-intro-content { /* vertically align inside its parent */ display: table-cell; vertical-align: middle; text-align: center; padding: 0 5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-intro-content::before { top: 0; left: 0; content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) center/cover no-repeat fixed; } .cd-intro-content h1 { font-size: 3rem; color: #ffffff; } .cd-intro-content p { font-size: 1.4rem; font-weight: 700; line-height: 1.4; margin: 1em 0; color: tint(#2e416a, 30%); } .cd-intro-content .action-wrapper { display: inline-block; } .cd-intro-content .action-wrapper:before, .cd-intro-content .action-wrapper:after { content: " "; display: table; } .cd-intro-content .action-wrapper:after { clear: both; } @media only screen and (min-width: 768px) { .cd-intro-content h1 { font-size: 6.6rem; font-weight: 300; } .cd-intro-content p { font-size: 1.6rem; margin: 1.5em 0 1.9em; } } .cd-btn { display: inline-block; padding: 1.2em 1.4em; font-size: 1.3rem; color: #ffffff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; background-color: shade(#2e416a, 30%); border-radius: .25em; margin-right: 1.5em; } .cd-btn:nth-of-type(2) { margin-right: 0; } .cd-btn.main-action { background-color: #fb5e58; } @media only screen and (min-width: 480px) { .cd-btn { padding: 1.2em 1.6em; } } @media only screen and (min-width: 768px) { .cd-btn { padding: 1.4em 1.8em; } } .cd-intro-content h1, .cd-intro-content h1 span, .cd-intro-content p, .cd-intro-content .cd-btn { opacity: 0; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .cd-intro-content h1, .no-cssanimations .cd-intro-content h1 span, .no-cssanimations .cd-intro-content p, .no-cssanimations .cd-intro-content .cd-btn { opacity: 1; } /* -------------------------------- Bouncy -------------------------------- */ .bouncy.cd-intro-content h1 { -webkit-animation-name: cd-bounce-right; animation-name: cd-bounce-right; } .bouncy.cd-intro-content p { -webkit-animation-name: cd-bounce-left; animation-name: cd-bounce-left; } .bouncy.cd-intro-content h1, .bouncy.cd-intro-content p { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .bouncy.cd-intro-content .cd-btn { -webkit-animation-name: cd-bounce-rotate; animation-name: cd-bounce-rotate; } .bouncy.cd-intro-content .cd-btn { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .bouncy.cd-intro-content .cd-btn.main-action { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes cd-bounce-right { 0% { opacity: .2; -moz-transform: translateX(-200px); -o-transform: translateX(-200px); -ms-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); } 60% { opacity: .7; -moz-transform: translateX(15px); -o-transform: translateX(15px); -ms-transform: translateX(15px); -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-bounce-right { 0% { opacity: .2; -moz-transform: translateX(-200px); -o-transform: translateX(-200px); -ms-transform: translateX(-200px); -webkit-transform: translateX(-200px); transform: translateX(-200px); } 60% { opacity: .7; -moz-transform: translateX(15px); -o-transform: translateX(15px); -ms-transform: translateX(15px); -webkit-transform: translateX(15px); transform: translateX(15px); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-left { 0% { opacity: .2; -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } 60% { opacity: .7; -moz-transform: translateX(-15px); -o-transform: translateX(-15px); -ms-transform: translateX(-15px); -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-bounce-left { 0% { opacity: .2; -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } 60% { opacity: .7; -moz-transform: translateX(-15px); -o-transform: translateX(-15px); -ms-transform: translateX(-15px); -webkit-transform: translateX(-15px); transform: translateX(-15px); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-rotate { 0% { opacity: .2; -moz-transform: perspective(800px) rotateX(-80deg); -o-transform: perspective(800px) rotateX(-80deg); -ms-transform: perspective(800px) rotateX(-80deg); -webkit-transform: perspective(800px) rotateX(-80deg); transform: perspective(800px) rotateX(-80deg); } 20% { opacity: 1; } 60% { -moz-transform: perspective(800px) rotateX(20deg); -o-transform: perspective(800px) rotateX(20deg); -ms-transform: perspective(800px) rotateX(20deg); -webkit-transform: perspective(800px) rotateX(20deg); transform: perspective(800px) rotateX(20deg); } 100% { opacity: 1; -moz-transform: perspective(800px) rotateX(0); -o-transform: perspective(800px) rotateX(0); -ms-transform: perspective(800px) rotateX(0); -webkit-transform: perspective(800px) rotateX(0); transform: perspective(800px) rotateX(0); } } @keyframes cd-bounce-rotate { 0% { opacity: .2; -moz-transform: perspective(800px) rotateX(-80deg); -o-transform: perspective(800px) rotateX(-80deg); -ms-transform: perspective(800px) rotateX(-80deg); -webkit-transform: perspective(800px) rotateX(-80deg); transform: perspective(800px) rotateX(-80deg); } 20% { opacity: 1; } 60% { -moz-transform: perspective(800px) rotateX(20deg); -o-transform: perspective(800px) rotateX(20deg); -ms-transform: perspective(800px) rotateX(20deg); -webkit-transform: perspective(800px) rotateX(20deg); transform: perspective(800px) rotateX(20deg); } 100% { opacity: 1; -moz-transform: perspective(800px) rotateX(0); -o-transform: perspective(800px) rotateX(0); -ms-transform: perspective(800px) rotateX(0); -webkit-transform: perspective(800px) rotateX(0); transform: perspective(800px) rotateX(0); } } /* -------------------------------- Cut -------------------------------- */ .cut.cd-intro-content h1 { position: relative; /* overwrite default style */ opacity: 1; font-weight: 700; color: transparent; } .cut.cd-intro-content h1 span { /* 2 span elements are used to create the cut effect */ display: block; position: absolute; width: 100%; height: 50%; left: 0; overflow: hidden; color: #ffffff; } .cut.cd-intro-content h1 span:first-of-type { top: 0; } .cut.cd-intro-content h1 span:last-of-type { bottom: 0; } .cut.cd-intro-content h1 span:first-of-type::before, .cut.cd-intro-content h1 span:last-of-type::after { /* span:first-of-type::before - top half of the text */ /* span:last-of-type::after - bottom half of the text */ content: attr(data-content); position: absolute; width: 100%; left: 0; color: #ffffff; } .cut.cd-intro-content h1 span:first-of-type::before { top: 0; } .cut.cd-intro-content h1 span:last-of-type::after { bottom: 0; } .cut.cd-intro-content .cd-btn { /* overwrite default style */ margin-right: 0; border-radius: 0; } .cut.cd-intro-content h1 span, .cut.cd-intro-content p, .cut.cd-intro-content .cd-btn { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .cut.cd-intro-content h1 span, .cut.cd-intro-content p { -webkit-animation-name: cd-slide-left; animation-name: cd-slide-left; } .cut.cd-intro-content h1 span:first-of-type { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .cut.cd-intro-content p { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .cut.cd-intro-content .cd-btn { -webkit-animation-name: cd-slide-left-btn; animation-name: cd-slide-left-btn; -webkit-animation-delay: 0.55s; animation-delay: 0.55s; } @-webkit-keyframes cd-slide-left { 0% { opacity: 1; -moz-transform: translateX(100vw); -o-transform: translateX(100vw); -ms-transform: translateX(100vw); -webkit-transform: translateX(100vw); transform: translateX(100vw); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-slide-left { 0% { opacity: 1; -moz-transform: translateX(100vw); -o-transform: translateX(100vw); -ms-transform: translateX(100vw); -webkit-transform: translateX(100vw); transform: translateX(100vw); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-slide-left-btn { 0% { opacity: 1; -moz-transform: translateX(150vw); -o-transform: translateX(150vw); -ms-transform: translateX(150vw); -webkit-transform: translateX(150vw); transform: translateX(150vw); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-slide-left-btn { 0% { opacity: 1; -moz-transform: translateX(150vw); -o-transform: translateX(150vw); -ms-transform: translateX(150vw); -webkit-transform: translateX(150vw); transform: translateX(150vw); } 100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- Reveal -------------------------------- */ .reveal.cd-intro-content h1 { position: relative; /* overwrite default style */ opacity: 1; font-weight: 700; /*

text is not visible - it is used only as a container for the ::after element */ color: transparent; overflow: hidden; } .reveal.cd-intro-content h1::after { /* this is the animated text */ content: attr(data-content); position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #ffffff; opacity: 0; -webkit-animation-name: cd-reveal-up; animation-name: cd-reveal-up; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .no-cssanimations .reveal.cd-intro-content h1::after { opacity: 1; } @media only screen and (min-width: 768px) { .reveal.cd-intro-content h1 { -moz-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); } } .reveal.cd-intro-content p { position: relative; margin: 0; padding: 1em; background-color: shade(#2e416a, 30%); -webkit-animation-name: cd-reveal-down; animation-name: cd-reveal-down; } @media only screen and (min-width: 1170px) { .reveal.cd-intro-content p { padding: 1em 1.6em; } } .reveal.cd-intro-content h1::after, .reveal.cd-intro-content p { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .reveal.cd-intro-content .action-wrapper { position: relative; overflow: hidden; } .reveal.cd-intro-content .action-wrapper::before { /* this is the loading bar */ content: ''; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background-color: shade(#2e416a, 30%); -webkit-animation: cd-loading 0.4s 0.3s backwards; -o-animation: cd-loading 0.4s 0.3s backwards; animation: cd-loading 0.4s 0.3s backwards; } .reveal.cd-intro-content .action-wrapper .cd-btn { display: block; opacity: 1; max-width: 200px; margin: 1em auto 0; } @media only screen and (min-width: 768px) { .reveal.cd-intro-content .action-wrapper .cd-btn { display: inline-block; margin: 0 0 0 1em; } } @-webkit-keyframes cd-reveal-up { 0% { opacity: 1; -moz-transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes cd-reveal-up { 0% { opacity: 1; -moz-transform: translateY(100%); -o-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-reveal-down { 0% { opacity: 1; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes cd-reveal-down { 0% { opacity: 1; -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-loading { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes cd-loading { 0% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } /* -------------------------------- Mask -------------------------------- */ .mask.cd-intro-content h1 { position: relative; padding-bottom: 10px; /* overwrite default style */ opacity: 1; font-weight: 700; /*

text is not visible - it is used only as a container for the ::after element */ color: transparent; overflow: hidden; } .mask.cd-intro-content h1::after { /* this is the animated text */ content: attr(data-content); position: absolute; top: 0; left: 0; height: 100%; width: 100%; color: #ffffff; -webkit-animation-name: cd-reveal-up; animation-name: cd-reveal-up; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .mask.cd-intro-content h1 span { position: relative; display: inline-block; opacity: 1; } .mask.cd-intro-content h1 span::before { /* this is the loading bar */ content: ''; position: absolute; top: calc(100% + 8px); left: -1em; height: 2px; width: calc(100% + 2em); background-color: #ffffff; -webkit-animation: cd-loading-mask 1s 0.3s both; -o-animation: cd-loading-mask 1s 0.3s both; animation: cd-loading-mask 1s 0.3s both; } @media only screen and (min-width: 768px) { .mask.cd-intro-content h1 { padding-bottom: 20px; } .mask.cd-intro-content h1 span::before { top: calc(100% + 18px); } } .mask.cd-intro-content p { position: relative; margin: 0; padding: 10px 0 0; -webkit-animation-name: cd-reveal-down; animation-name: cd-reveal-down; } @media only screen and (min-width: 768px) { .mask.cd-intro-content p { padding-top: 20px; } } .mask.cd-intro-content h1::after, .mask.cd-intro-content p { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .mask.cd-intro-content .action-wrapper { overflow: hidden; } .mask.cd-intro-content .action-wrapper .cd-btn { opacity: 1; margin: 0 0 0 1.5em; } .mask.cd-intro-content .action-wrapper .cd-btn:first-of-type { margin-left: 0; } @-webkit-keyframes cd-loading-mask { 0%, 100% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 40%, 60% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes cd-loading-mask { 0%, 100% { -moz-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 40%, 60% { -moz-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } /* -------------------------------- Mask 2 -------------------------------- */ .mask-2.cd-intro-content * { /* overwrite default style */ opacity: 1; } .mask-2.cd-intro-content .content-wrapper { position: relative; width: 100%; max-width: 650px; margin: 0 auto; padding: 2em 0; overflow: hidden; } .mask-2.cd-intro-content .content-wrapper::before { /* vertical bar */ content: ''; position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 2px; background-color: #ffffff; -webkit-animation: cd-pulse 1.3s 0.3s both; -o-animation: cd-pulse 1.3s 0.3s both; animation: cd-pulse 1.3s 0.3s both; } .no-cssanimations .mask-2.cd-intro-content .content-wrapper::before { opacity: 0; } .mask-2.cd-intro-content .content-wrapper > div { /* wrap the entire content */ position: relative; z-index: 1; } .mask-2.cd-intro-content .content-wrapper, .mask-2.cd-intro-content .content-wrapper > div { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .mask-2.cd-intro-content .content-wrapper { -webkit-animation-name: cd-mask-wrapper; animation-name: cd-mask-wrapper; } .mask-2.cd-intro-content .content-wrapper > div { -webkit-animation-name: cd-mask-content; animation-name: cd-mask-content; } @-webkit-keyframes cd-mask-wrapper { 0% { -moz-transform: translateX(50%); -o-transform: translateX(50%); -ms-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-mask-wrapper { 0% { -moz-transform: translateX(50%); -o-transform: translateX(50%); -ms-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-mask-content { 0% { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-mask-content { 0% { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-pulse { 0%, 30.8% { opacity: 0; } 15.4%, 46.2%, 61.5%, 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes cd-pulse { 0%, 30.8% { opacity: 0; } 15.4%, 46.2%, 61.5%, 70% { opacity: 1; } 100% { opacity: 0; } } /* -------------------------------- scale -------------------------------- */ .scale.cd-intro-content * { /* overwrite default style */ opacity: 1; } .scale.cd-intro-content { /* overwrite default style */ background-color: transparent; /* Force hardware acceleration */ -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: cd-scale-in 0.6s 0.3s both; -o-animation: cd-scale-in 0.6s 0.3s both; animation: cd-scale-in 0.6s 0.3s both; } @-webkit-keyframes cd-scale-in { 0% { opacity: 0; -moz-transform: scale(3); -o-transform: scale(3); -ms-transform: scale(3); -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @keyframes cd-scale-in { 0% { opacity: 0; -moz-transform: scale(3); -o-transform: scale(3); -ms-transform: scale(3); -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } /* -------------------------------- Parallax -------------------------------- */ .parallax.cd-intro-content * { /* overwrite default style */ opacity: 1; } .parallax.cd-intro-content h1 span, .parallax.cd-intro-content p span { position: relative; display: inline-block; padding: .5em 1em; /* span text is not visible */ color: transparent; } .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content p span::before, .parallax.cd-intro-content p span::after { position: absolute; left: 0; width: 100%; } .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content p span::before { /* this is used to create the background colored layer */ content: ''; height: 100%; top: 0; background-color: shade(#2e416a, 30%); } .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content p span::after { /* this is used to create the text */ content: attr(data-content); top: .5em; } .parallax.cd-intro-content h1 { font-size: 2.2rem; } .parallax.cd-intro-content h1 span::after { color: #ffffff; } @media only screen and (min-width: 768px) { .parallax.cd-intro-content h1 { font-size: 5.4rem; } } .parallax.cd-intro-content p span::after { color: tint(#2e416a, 30%); } .parallax .cd-btn { color: shade(#2e416a, 30%); background-color: #ffffff; margin-top: .6em; /* overwrite default style */ border-radius: 0; margin-right: 0; } .parallax .cd-btn.main-action { background-color: #fb5e58; color: #ffffff; padding: 1.8em 2.2em; margin-top: 0; } @media only screen and (min-width: 768px) { .parallax .cd-btn.main-action { padding: 2em 3em; } } .parallax.cd-intro-content h1 span::after, .parallax.cd-intro-content h1 span::before, .parallax.cd-intro-content p span::after, .parallax.cd-intro-content p span::before, .parallax.cd-intro-content .cd-btn { -webkit-animation-name: cd-slide-up; animation-name: cd-slide-up; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } .parallax.cd-intro-content h1 span::after { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .parallax.cd-intro-content h1 span::before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .parallax.cd-intro-content p span::after { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .parallax.cd-intro-content p span::before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .parallax.cd-intro-content .cd-btn { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .parallax.cd-intro-content .cd-btn.main-action { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } @-webkit-keyframes cd-slide-up { 0% { opacity: 0; -moz-transform: translateY(30vh); -o-transform: translateY(30vh); -ms-transform: translateY(30vh); -webkit-transform: translateY(30vh); transform: translateY(30vh); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes cd-slide-up { 0% { opacity: 0; -moz-transform: translateY(30vh); -o-transform: translateY(30vh); -ms-transform: translateY(30vh); -webkit-transform: translateY(30vh); transform: translateY(30vh); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } /* -------------------------------- Video -------------------------------- */ .cd-intro.video { display: block; } .video.cd-intro-content { display: block; height: 100%; position: relative; } .video.cd-intro-content * { opacity: 1; } .video.cd-intro-content .svg-wrapper { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 100%; } .video.cd-intro-content svg { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0.8; } .video.cd-intro-content svg.svg-mask { /* this is the svg mask used on desktop version */ display: none; } .video.cd-intro-content p, .video.cd-intro-content .action-wrapper { position: absolute; z-index: 3; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video.cd-intro-content p { bottom: calc(50% + 80px); margin: 0; color: #040404; min-width: 90%; } .video.cd-intro-content .action-wrapper { top: calc(50% + 120px); min-width: 295px; } .video.cd-intro-content .cd-btn { background-color: rgba(4, 4, 4, 0.4); } .video.cd-intro-content .cd-btn.main-action { background-color: #fb5e58; } @media only screen and (min-width: 768px) { .video.cd-intro-content svg.svg-mask-mobile { display: none; } .video.cd-intro-content svg.svg-mask { display: block; } .video.cd-intro-content p { bottom: calc(50% + 40px); } .video.cd-intro-content .action-wrapper { top: calc(50% + 80px); } } .cd-bg-video-wrapper { /* background cover video */ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: url(../assets/bg-img.jpg) no-repeat center center; background-size: cover; } .cd-bg-video-wrapper video { /* you won't see this element in the html, but it will be injected using js */ display: block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-height: 100%; min-width: 100%; max-width: none; height: auto; width: auto; } .cd-bg-video-wrapper::after { /* never visible - this is used in jQuery to check the current MQ */ display: none; content: 'mobile'; } @media only screen and (min-width: 768px) { .cd-bg-video-wrapper::after { content: 'desktop'; } } /* hide empty sections */ section:not(.row):not(.highlighted-section):not(.with-header):not(.footer-menu):not(.partners):not(.signoff) { /* Styles */ padding: 0; } .contrast-background { background-color: rgba(239, 239, 239, 0.5); } .content-padding-top { padding-top: 0; } @media (min-width: 768px) and (max-width: 991px) { .content-padding-top { padding-top: 1.2em; } } @media (max-width: 767px) { .content-padding-top { padding-top: 1.2em; } } .isotope_container { padding: 0 4em; } @media (max-width: 767px) { .isotope_container { padding: 0 1em; } } .isotope_container .isotope_wrap .isotope_item .thumbnail { padding: 0px; height: 100%; display: block; border-top: 1px solid #f8f8f8; background: #fff; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); transition: all .3s; border-radius: 5px; overflow: hidden; } .isotope_container .isotope_wrap .isotope_item .thumbnail h4, .isotope_container .isotope_wrap .isotope_item .thumbnail .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .isotope_container .isotope_wrap .isotope_item .thumbnail .panel-title, .isotope_container .isotope_wrap .isotope_item .thumbnail .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .isotope_container .isotope_wrap .isotope_item .thumbnail .panel-title, .isotope_container .isotope_wrap .isotope_item .thumbnail .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .isotope_container .isotope_wrap .isotope_item .thumbnail .panel-title { background-color: #f1f1f1; padding: 0.5em; } .isotope_container .isotope_wrap .isotope_item .thumbnail:hover { transform: translateY(-10px); box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15); } .isotope_container .isotope_wrap .isotope_item .btn-normal:hover { box-shadow: none !important; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=1); -webkit-transition: all ease .1s; -moz-transition: all ease .1s; -ms-transition: all ease .1s; -o-transition: all ease .1s; transition: all ease .1s; } @media (max-width: 767px) { nav.section-nav { display: none; } } .serviceBox .service-header { letter-spacing: 6px; background-color: #201e1d; color: white; border-radius: 10px; padding: 10px; text-transform: uppercase; } .serviceBox .service-header.lighter { background-color: rgba(239, 239, 239, 0.5); color: #201e1d; } .serviceBox .service-header.light { background-color: rgba(239, 239, 239, 0.9); color: #201e1d; } .serviceBox .description { min-height: 160px; } .vcentered-flex-box { margin-top: 30px; align-items: center; display: flex; height: 500px; } .vcentered-flex-box .box { display: block; margin: 0 auto; } @media (min-width: 768px) and (max-width: 991px) { .vcentered-flex-box { height: auto; } } @media (max-width: 767px) { .vcentered-flex-box { height: auto; } } /***************************************************************************** ************************ Update on 03 - 21 - 2018 **************************** ****************************************************************************** ***** Temporary Fix for Connect Sub - Menu Until Primary Nav is Updated ****** ****************************************************************************** ****************************************************************************** */ .jarallax { background-color: black; } .jarallax h1, .jarallax h2, .jarallax h3, .jarallax .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .jarallax .panel-title, .jarallax .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .jarallax .panel-title, .jarallax .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .jarallax .panel-title, .jarallax h4, .jarallax .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .jarallax .panel-title, .jarallax .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .jarallax .panel-title, .jarallax .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .jarallax .panel-title, .jarallax h5, .jarallax h6, .jarallax span, .jarallax p, .jarallax small { color: #FFFFFF; } .jarallax iframe { border: 0 !important; } .jarallax.darken:after { top: 0; left: 0; content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) center/cover no-repeat; } .jarallax.darker:after { top: 0; left: 0; content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)) center/cover no-repeat; } @media (min-width: 768px) and (max-width: 991px) { .jarallax.hero_parallax { height: calc(50vh - 77px); height: -o-calc(50vh - 77px); height: -webkit-calc(50vh - 77px); /* google, safari */ height: -moz-calc(50vh - 77px); /* firefox */ } } @media (max-width: 767px) { .jarallax.hero_parallax { height: calc(50vh - 77px); height: -o-calc(50vh - 77px); /* opera */ height: -webkit-calc(50vh - 77px); /* google, safari */ height: -moz-calc(50vh - 77px); /* firefox */ } } .jarallax .parallax-body { position: relative; z-index: 2; } .jarallax .parallax-logo { z-index: 2; position: relative; } .jarallax .parallax-logo.centered { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 50px; } .jarallax .parallax-logo a:hover, .jarallax .parallax-logo a:active, .jarallax .parallax-logo a:focus, .jarallax .parallax-logo a:visited { text-decoration: none; } .jarallax .parallax-logo h1, .jarallax .parallax-logo h2, .jarallax .parallax-logo h3, .jarallax .parallax-logo .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo h4, .jarallax .parallax-logo .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .jarallax .parallax-logo .panel-title, .jarallax .parallax-logo h5, .jarallax .parallax-logo h6 { color: #FFFFFF; } #sub-connect-menu nav.section-nav { color: inherit; font-family: "proxima-nova-n7", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; width: 23%; right: 0; top: 0; overflow: hidden; background: rgba(255, 255, 255, 0.9); z-index: 25; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); border-radius: 10px; margin: 20px; height: auto; } #sub-connect-menu nav.section-nav.wow { visibility: hidden; } @media (min-width: 1200px) { #sub-connect-menu nav.section-nav { font-size: inherit !important; } } #sub-connect-menu nav.section-nav li.dropdown ul li { -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } #sub-connect-menu nav.section-nav li.dropdown.open > ul li, #sub-connect-menu nav.section-nav li.dropdown.all.open ul li { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } #sub-connect-menu nav.section-nav ul li + li { border-top: 1px solid rgba(160, 157, 153, 0.34); } #sub-connect-menu nav.section-nav li > *:first-child { padding-left: 5%; padding-top: 0.4em; padding-bottom: 0.4em; } /***************************************************************************** *********************** END: Temporary Fix for Connect Sub ******************* ****************************************************************************** */ #PageHeader { padding-bottom: 0 !important; color: #222222; } #PageHeader .page-header-parallax { background-color: black; } #PageHeader .page-banner { position: relative; width: 100%; height: auto; overflow: hidden; } @media (min-width: 1600px) { #PageHeader .page-banner { max-height: 566px; } } #PageHeader .page-banner > img { width: 100%; } #PageHeader .page-banner nav.section-nav { z-index: 5; } #PageHeader .page-banner #Breadcrumbs { position: absolute; top: 0; width: 100%; background: rgba(255, 255, 255, 0.4); text-shadow: 1px 1px 1px #222222; color: #fff; text-align: left; z-index: 10; } #PageHeader .page-title { background: #383735; padding: 1em 0 !important; } #PageHeader .page-title h1 { color: rgba(255, 255, 255, 0.4); } #PageHeader .page-title a { color: #FFFFFF; text-transform: uppercase; font-family: "ProximaNova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; } @media (min-width: 768px) { #PageHeader .page-title h1, #PageHeader .page-title .page-nav { display: inline-block; } #PageHeader .page-title .page-nav li { margin-left: 2em; } } .content-headers { padding-top: 0 !important; padding-bottom: 0 !important; } @media (min-width: 768px) { .content-headers::before { content: "\00a0"; display: block; width: 100%; background: #383735; color: #383735; position: absolute; padding: .75em 0; font-size: 2.5em; line-height: 1.1; } } .content-headers h2 { background: #383735; padding: .75em 0; margin-bottom: .75em; color: rgba(255, 255, 255, 0.4); text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media (max-width: 767px) { .content-headers h2 { margin-left: -15px; margin-right: -15px; } } .content-headers .bar-col { padding-bottom: 5em; } .content-headers .bar-col + .bar-col { border-left: 1px solid #a09d99; } .image-divider { padding: 0 !important; } .image-divider img { width: 100%; } /* Credits to: https: //codyhouse.co/blog/post/css-diagonal-containers */ :root { --diagonal-hero-offset: 80px; } @media screen and (max-width: 750px) { :root { --diagonal-hero-offset: 40px; } } .hero--r-diagonal, .hero--l-diagonal, .hero--rl-diagonal, .hero--lr-diagonal, .hero--tr-diagonal, .hero--tl-diagonal, .hero--bl-diagonal, .hero--br-diagonal { position: relative; background-color: transparent; } .hero--r-diagonal::before, .hero--l-diagonal::before, .hero--rl-diagonal::before, .hero--lr-diagonal::before, .hero--tr-diagonal::before, .hero--tl-diagonal::before, .hero--bl-diagonal::before, .hero--br-diagonal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); } .hero--r-diagonal .hero__content, .hero--l-diagonal .hero__content, .hero--rl-diagonal .hero__content, .hero--lr-diagonal .hero__content, .hero--tr-diagonal .hero__content, .hero--tl-diagonal .hero__content, .hero--bl-diagonal .hero__content, .hero--br-diagonal .hero__content { position: relative; z-index: 1; } @supports (clip-path: none) { .hero--r-diagonal::before, .hero--l-diagonal::before, .hero--rl-diagonal::before, .hero--lr-diagonal::before, .hero--tr-diagonal::before, .hero--tl-diagonal::before, .hero--bl-diagonal::before, .hero--br-diagonal::before { height: calc(100% + var(--diagonal-hero-offset) * 2); top: calc(var(--diagonal-hero-offset) * -1); } .hero--r-diagonal::before { clip-path: polygon(0% 0%, 100% var(--diagonal-hero-offset), 100% 100%, 0% calc(100% - var(--diagonal-hero-offset))); } .hero--l-diagonal::before { clip-path: polygon(0% var(--diagonal-hero-offset), 100% 0%, 100% calc(100% - var(--diagonal-hero-offset)), 0% 100%); } .hero--rl-diagonal::before { clip-path: polygon(0% 0%, 100% var(--diagonal-hero-offset), 100% calc(100% - var(--diagonal-hero-offset)), 0% 100%); } .hero--lr-diagonal::before { clip-path: polygon(0% var(--diagonal-hero-offset), 100% 0%, 100% 100%, 0% calc(100% - var(--diagonal-hero-offset))); } .hero--tr-diagonal::before { clip-path: polygon(0% 0%, 100% var(--diagonal-hero-offset), 100% 100%, 0 100%); } .hero--tl-diagonal::before { clip-path: polygon(0% var(--diagonal-hero-offset), 100% 0%, 100% 100%, 0 100%); } .hero--br-diagonal::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% calc(100% - var(--diagonal-hero-offset))); } .hero--bl-diagonal::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal-hero-offset)), 0% 100%); } } /* -------------------------------------------------- 6.0 FAQ - Accordions -------------------------------------------------- */ .accordions-1 .panel { border: none; border-radius: 0px !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.15); } .accordions-1 .panel:hover { -webkit-box-shadow: 0 22px 133px rgba(0, 0, 0, 0.15); box-shadow: 0 22px 133px rgba(0, 0, 0, 0.15); transform: translateY(-10px); transform: translateY(-5px); -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-1 .panel .panel-heading { color: #222222; border-color: rgba(124, 124, 124, 0.17); background-color: #FFFFFF; position: relative; cursor: pointer; padding: 25px 14% 25px 25px; text-align: left; } .accordions-1 .panel .panel-heading::before { position: absolute; top: 54%; right: 7%; margin: -10px 0 0; display: inline-block; width: 15px; height: 15px; content: ""; border: solid #222222; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .accordions-1 .panel .panel-heading[aria-expanded="true"]::before { -webkit-transform: translateY(-5px) rotate(405deg); -moz-transform: translateY(-5px) rotate(405deg); transform: translateY(-5px) rotate(405deg); } .accordions-1 .panel .panel-heading .panel-title { font-size: 1.1em; text-transform: none !important; color: #222222; } .accordions-1 .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-1 .panel .panel-collapse .panel-body { border: none; border-radius: 0; border-top: 2px solid #efefef; background-color: #FFFFFF; padding: 30px 50px; text-align: left; } .accordions-1 .panel .panel-collapse .panel-body p { margin: 0px; color: #222222; } .accordions-1 .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #222222; font-weight: bolder; } .accordions-1 .panel + .panel { margin-top: 2.7rem; } .accordions-2 .panel { border-radius: 0px !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-2 .panel:hover { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-2 .panel .panel-heading { color: #222222; position: relative; cursor: pointer; padding: 25px 14% 25px 25px; text-align: left; } .accordions-2 .panel .panel-heading::before { position: absolute; top: 54%; right: 7%; margin: -10px 0 0; display: inline-block; width: 15px; height: 15px; content: ""; border: solid #222222; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .accordions-2 .panel .panel-heading[aria-expanded="true"]::before { -webkit-transform: translateY(-5px) rotate(405deg); -moz-transform: translateY(-5px) rotate(405deg); transform: translateY(-5px) rotate(405deg); } .accordions-2 .panel .panel-heading .panel-title { font-size: 1.1em; text-transform: none !important; color: #222222; } .accordions-2 .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-2 .panel .panel-collapse .panel-body { border: none; border-radius: 0; border-top: 2px solid #efefef; background-color: #FFFFFF; padding: 30px; text-align: left; } .accordions-2 .panel .panel-collapse .panel-body p { margin: 0px; color: #222222; } .accordions-2 .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #222222; font-weight: bolder; } .accordions-2 .panel + .panel { margin-top: 2.7rem; } .accordions-nostyle .panel { border-radius: 0px !important; margin-bottom: 0px !important; border-color: #fff !important; box-shadow: none !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-nostyle .panel:hover { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-nostyle .panel .panel-heading { color: #222222; position: relative; cursor: pointer; padding: 5px 14% 5px 5px; text-align: left; background-color: #fff !important; border-color: #fff !important; } .accordions-nostyle .panel .panel-heading::before { position: absolute; top: 54%; right: 7%; margin: -10px 0 0; display: inline-block; width: 15px; height: 15px; content: ""; border: solid #222222; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .accordions-nostyle .panel .panel-heading[aria-expanded="true"]::before { -webkit-transform: translateY(-5px) rotate(405deg); -moz-transform: translateY(-5px) rotate(405deg); transform: translateY(-5px) rotate(405deg); } .accordions-nostyle .panel .panel-heading .panel-title { font-size: 1.1em; text-transform: none !important; color: #222222; } .accordions-nostyle .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-nostyle .panel .panel-collapse .panel-body { border: none; border-radius: 0; background-color: #FFFFFF; padding: 0px; text-align: left; } .accordions-nostyle .panel .panel-collapse .panel-body p { margin: 0px; color: #222222; } .accordions-nostyle .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #222222; font-weight: bolder; } .accordions-nostyle .panel + .panel { margin-top: 2.7rem; } .accordions-christmas2019 .panel { border-radius: 0px !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-christmas2019 .panel:hover { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-christmas2019 .panel .panel-heading { color: #fff; position: relative; cursor: pointer; padding: 25px; text-align: center; background-color: #D5B47E; border-color: #D5B47E; } .accordions-christmas2019 .panel .panel-heading .panel-title { width: 100%; padding: 0px; margin: 0px; text-align: center; font-size: 1.4em !important; text-transform: none !important; color: #fff !important; } .accordions-christmas2019 .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-christmas2019 .panel .panel-collapse .panel-body { border: none; border-radius: 0; background-color: #eee5d7; padding: 30px; text-align: left; } .accordions-christmas2019 .panel .panel-collapse .panel-body p { margin: 0px; color: #6e6e6e; } .accordions-christmas2019 .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #6e6e6e; font-weight: bolder; } .accordions-christmas2019 .panel + .panel { margin-top: 2.7rem; } .accordions-christmas2020 .panel { border-radius: 0px !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-christmas2020 .panel:hover { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-christmas2020 .panel .panel-heading { color: #fff; position: relative; cursor: pointer; padding: 25px; text-align: center; background-color: #0A0F1F; border-color: #0A0F1F; } .accordions-christmas2020 .panel .panel-heading .panel-title { width: 100%; padding: 0px; margin: 0px; text-align: center; font-size: 1.4em !important; text-transform: none !important; color: #fff !important; } .accordions-christmas2020 .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-christmas2020 .panel .panel-collapse .panel-body { border: none; border-radius: 0; background-color: #F3EEE0; padding: 30px; text-align: left; } .accordions-christmas2020 .panel .panel-collapse .panel-body p { margin: 0px; color: #6e6e6e; } .accordions-christmas2020 .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #6e6e6e; font-weight: bolder; } .accordions-christmas2020 .panel + .panel { margin-top: 2.7rem; } .accordions-easter2020 .panel { border-radius: 0px !important; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-easter2020 .panel:hover { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordions-easter2020 .panel .panel-heading { color: #004121; position: relative; cursor: pointer; padding: 25px; text-align: center; background-color: #fff; border-color: #fff; } .accordions-easter2020 .panel .panel-heading .panel-title { width: 100%; padding: 0px; margin: 0px; text-align: center; font-size: 1.4em !important; text-transform: none !important; color: #004121 !important; } .accordions-easter2020 .panel .panel-heading .panel-title a:focus { text-decoration: none; } .accordions-easter2020 .panel .panel-collapse .panel-body { border: none; border-radius: 0; background-color: #004121; padding: 30px; text-align: left; } .accordions-easter2020 .panel .panel-collapse .panel-body p { margin: 0px; color: #E4E2D3; } .accordions-easter2020 .panel .panel-collapse .panel-body p a:not(.btn):not(.btn-doors) { color: #E4E2D3; font-weight: bolder; } .accordions-easter2020 .panel + .panel { margin-top: 2.7rem; } .faq-contact-links { color: rgba(34, 34, 34, 0.8); font-size: .9em; } .faq-contact-links i { color: rgba(34, 34, 34, 0.8); } .faq-contact-links a { color: #222222; padding-bottom: 4px; border-bottom: 1px solid rgba(17, 17, 17, 0); transition: all .3s; } .faq-contact-links a:hover { color: #222222; padding-bottom: 1px; border-bottom: 1px solid #111111; } /*---------------------------------- Button ------------------------------------*/ .se-btn, .se-btn--app-highlight, .se-btn--unleashed { display: inline-block; text-align: center; vertical-align: middle; border: none; white-space: nowrap; touch-action: manipulation; cursor: pointer; user-select: none; text-shadow: none; box-shadow: none; -webkit-box-shadow: none; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .se-btn:focus, .se-btn--app-highlight:focus, .se-btn--unleashed:focus, .se-btn:hover, .se-btn--app-highlight:hover, .se-btn--unleashed:hover { text-decoration: none; transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .se-btn.focus, .focus.se-btn--app-highlight, .focus.se-btn--unleashed { text-decoration: none; outline: none; } .se-btn:active, .se-btn--app-highlight:active, .se-btn--unleashed:active, .se-btn.active, .active.se-btn--app-highlight, .active.se-btn--unleashed { background-image: none; outline: 0; } .se-btn.disabled, .disabled.se-btn--app-highlight, .disabled.se-btn--unleashed, .se-btn:disabled, .se-btn--app-highlight:disabled, .se-btn--unleashed:disabled, fieldset[disabled] .se-btn, fieldset[disabled] .se-btn--app-highlight, fieldset[disabled] .se-btn--unleashed { cursor: not-allowed; opacity: .65; } .se-action-btn { -webkit-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; } .se-btn__element--vertical-inherit { vertical-align: inherit; } .se-btn__element--left, .se-btn__element--right { display: table-cell; vertical-align: middle; text-align: left; } /* Sizes ------------------------------ */ .se-btn--xs { font-size: 1.125rem; font-weight: 400; padding: 0.5rem 1.25rem; } .se-btn--sm { font-size: 1.25rem; font-weight: 700; padding: 0.65em 1.75em; text-transform: uppercase; } .se-btn--md { font-size: 1.5rem; font-weight: 400; padding: 1rem 2.5rem; } .se-btn-icon--md { font-size: 1rem; padding: 0.9375rem 1.5625rem 0.75rem; } /* Styles ------------------------------ */ .se-btn--primary-brd { color: #FFFFFF; background: transparent; padding: 1rem 3rem; border-width: 0.4rem; border-style: solid; border-color: #FFFFFF; border-radius: 3rem; } .se-btn--primary-brd:focus, .se-btn--primary-brd:hover { color: #000000; background: white; border-color: #FFFFFF; } .se-btn--primary-brd:focus h1, .se-btn--primary-brd:focus h2, .se-btn--primary-brd:focus h3, .se-btn--primary-brd:focus .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus h4, .se-btn--primary-brd:focus .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--primary-brd:focus .panel-title, .se-btn--primary-brd:focus h5, .se-btn--primary-brd:focus h6, .se-btn--primary-brd:focus span, .se-btn--primary-brd:focus small, .se-btn--primary-brd:focus div, .se-btn--primary-brd:focus p, .se-btn--primary-brd:hover h1, .se-btn--primary-brd:hover h2, .se-btn--primary-brd:hover h3, .se-btn--primary-brd:hover .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover h4, .se-btn--primary-brd:hover .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--primary-brd:hover .panel-title, .se-btn--primary-brd:hover h5, .se-btn--primary-brd:hover h6, .se-btn--primary-brd:hover span, .se-btn--primary-brd:hover small, .se-btn--primary-brd:hover div, .se-btn--primary-brd:hover p { color: #000000; } .se-btn--dark-brd { color: #000000; background: transparent; padding: 1rem 3rem; border-width: 0.4rem; border-style: solid; border-color: #000000; border-radius: 3rem; } .se-btn--dark-brd:focus, .se-btn--dark-brd:hover { color: #FFFFFF; background: #2e2e2e; border-color: #000000; } .se-btn--dark-brd:focus h1, .se-btn--dark-brd:focus h2, .se-btn--dark-brd:focus h3, .se-btn--dark-brd:focus .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus h4, .se-btn--dark-brd:focus .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--dark-brd:focus .panel-title, .se-btn--dark-brd:focus h5, .se-btn--dark-brd:focus h6, .se-btn--dark-brd:focus span, .se-btn--dark-brd:focus small, .se-btn--dark-brd:focus div, .se-btn--dark-brd:focus p, .se-btn--dark-brd:hover h1, .se-btn--dark-brd:hover h2, .se-btn--dark-brd:hover h3, .se-btn--dark-brd:hover .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover h4, .se-btn--dark-brd:hover .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--dark-brd:hover .panel-title, .se-btn--dark-brd:hover h5, .se-btn--dark-brd:hover h6, .se-btn--dark-brd:hover span, .se-btn--dark-brd:hover small, .se-btn--dark-brd:hover div, .se-btn--dark-brd:hover p { color: #FFFFFF; } .se-btn--tag { color: #000000; background: #e2e2e2; padding: 0.25rem 1rem; border-width: 0.4rem; border-style: solid; border-color: transparent; border-radius: 3rem; } .se-btn--tag:focus, .se-btn--tag:hover { color: #000000; background: #afafaf; border-color: transparent; } .se-btn--tag:focus h1, .se-btn--tag:focus h2, .se-btn--tag:focus h3, .se-btn--tag:focus .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus h4, .se-btn--tag:focus .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--tag:focus .panel-title, .se-btn--tag:focus h5, .se-btn--tag:focus h6, .se-btn--tag:focus span, .se-btn--tag:focus small, .se-btn--tag:focus div, .se-btn--tag:focus p, .se-btn--tag:hover h1, .se-btn--tag:hover h2, .se-btn--tag:hover h3, .se-btn--tag:hover .accordions-christmas2019 .panel .panel-heading .panel-title, .accordions-christmas2019 .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover .accordions-christmas2020 .panel .panel-heading .panel-title, .accordions-christmas2020 .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover .accordions-easter2020 .panel .panel-heading .panel-title, .accordions-easter2020 .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover h4, .se-btn--tag:hover .accordions-1 .panel .panel-heading .panel-title, .accordions-1 .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover .accordions-2 .panel .panel-heading .panel-title, .accordions-2 .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover .accordions-nostyle .panel .panel-heading .panel-title, .accordions-nostyle .panel .panel-heading .se-btn--tag:hover .panel-title, .se-btn--tag:hover h5, .se-btn--tag:hover h6, .se-btn--tag:hover span, .se-btn--tag:hover small, .se-btn--tag:hover div, .se-btn--tag:hover p { color: #000000; } .se-btn--tag.active { color: #FFFFFF; background-color: #000000; } .se-btn--tag.no-transitions { transition-duration: none !important; transition-property: none !important; transition-timing-function: none !important; } .se-btn--app-highlight { color: #FFFFFF; background: #28A5BB; padding: 1.2rem 2rem; border-width: 0.4rem; border-style: solid; border-color: transparent; border-radius: 3rem; } .se-btn--app-highlight.active { color: #FFFFFF; background-color: #28A5BB; } .se-btn--app-highlight.no-transitions { transition-duration: none !important; transition-property: none !important; transition-timing-function: none !important; } .se-btn--unleashed { color: #fff; background: #EB4F40; padding: 1.2rem 2rem; border-width: 0.4rem; border-style: solid; border-color: transparent; border-radius: 3rem; } .se-btn--unleashed.active { color: #FFFFFF; background-color: #EB4F40; } .se-btn--unleashed.no-transitions { transition-duration: none !important; transition-property: none !important; transition-timing-function: none !important; } /* ---- 2.1 Defualt Buttons ---- */ .btn { /*@include btn-style( $dspy: inline-block, $wht-space: normal, $ps: relative, $color: $color-dark, $bg: transparent, $brd-width: .4rem, $brd-style: solid, $brd-color: $color-dark, $brd-radius: 3rem, $hvr-bg: $color-primary, $hvr-color: $color-primary, $hvr-brd-color: $color-dark ); &.btn-light { border-color: white; color: white; &:before { background: white; } &:after { background: rgba(white,0.9); } &:hover { color: $color-1; border-color: rgba(255,255,255,1); box-shadow: 0 0 0px 2px white inset, 0 0 0px 0px white; } } @include transition(background-color 200ms ease-out, color 200ms ease-out, border-color 200ms linear); &:hover { background: lighten($color-dark, 18%); border-color: $color-dark; } &:focus { outline: none; }*/ } .btn-block { width: 100% !important; } .btn-doors { /*@extend .btn; background: none; color: $CopyColor; border: .4rem solid $CopyColor; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; overflow: hidden; z-index: 0; width: auto; padding: 10px 30px; -webkit-transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1), border-color 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); &:before { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: $CopyColor; // Prevent background color leak outs -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; content: ''; opacity: 0; z-index: -1; -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(-110%, -10%, 0) skewX(-20deg); transform: translate3d(-110%, -10%, 0) skewX(-20deg); } &:after { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background: rgba($CopyColor,0.9); // Prevent background color leak outs -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; content: ''; opacity: 0; z-index: -1; -webkit-transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(110%, -10%, 0) skewX(-20deg); transform: translate3d(110%, -10%, 0) skewX(-20deg); } &:hover { color: white; background: none; border-color: rgba($CopyColor,0.9); box-shadow: 0 0 0px 2px $CopyColor inset, 0 0 0px 0px $CopyColor; // Prevent background color leak outs -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; // box-shadow: 0 1px 8px rgba(58,51,53,0.3); -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); &:visited { // color: $color-1; text-decoration: none; } &:before { opacity: 1; -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(-50%, -10%, 0) skewX(-20deg); transform: translate3d(-50%, -10%, 0) skewX(-20deg); } &:after { opacity: 1; -webkit-transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), -webkit-transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1); -webkit-transform: translate3d(50%, -10%, 0) skewX(-20deg); transform: translate3d(50%, -10%, 0) skewX(-20deg); } }*/ } @keyframes spin { to { -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #play { cursor: pointer; position: relative; top: 0; left: 0; outline: none; } #play:hover .stroke-dotted { stroke-width: 4px; opacity: 1; } #play:hover .stroke-solid { opacity: 0; stroke-dashoffset: 300; } #play:hover .icon { -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); } #play:focus { outline: none; } #play .stroke-dotted { opacity: 0; stroke-dasharray: 4,5; stroke-width: 1px; transform-origin: 50% 50%; animation: spin 4s infinite linear; transition: opacity 1s ease, stroke-width 1s ease; } #play .stroke-solid { stroke-dashoffset: 0; stroke-dashArray: 300; stroke-width: 4px; transition: stroke-dashoffset 1s ease, opacity 1s ease; } #play .icon { transform-origin: 50% 50%; transition: transform 200ms ease-out; } /* Don't remove this CSS. It it used as the 'sub-menu' accross the whole website. */ .page-menu { background: rgba(124, 124, 124, 0.18); position: relative; top: 0; left: 0; width: 100%; height: 10rem; overflow: hidden; z-index: 10; } .page-menu .page-nav { display: block; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; padding-left: 30px; padding-right: 30px; -webkit-overflow-scrolling: touch; padding-bottom: 30px; padding-top: 4rem; height: 15rem; } .page-menu .page-nav h1 { color: #222222; } .page-menu .page-nav li { padding-left: 2rem; } .page-menu .page-nav li:last-child { padding-right: 50px; } .page-menu .page-nav li a { color: #222222; text-transform: uppercase; font-family: "ProximaNova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 2px; -webkit-transition: all 0.15s; -o-transition: all 0.15s; transition: all 0.15s; } .page-menu .page-nav li a.active { color: #878787; } .page-menu .page-nav li a:hover { text-decoration: none; color: #878787; } @media (min-width: 768px) { .page-menu .page-nav li { padding-left: 4rem; } } .js-modal-video { outline: none; } .js-modal-video:focus { outline: none; } .js-modal-video .play { height: 75px; display: inline-block; vertical-align: middle; } @keyframes modal-video { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-video-inner { from { transform: translate(0, -100px); } to { transform: translate(0, 0); } } .modal-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000000; cursor: pointer; opacity: 1; animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; -ms-transition: opacity 0.3s ease-out; -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .modal-video-close { opacity: 0; } .modal-video-close .modal-video-movie-wrap { -webkit-transform: translate(0, -100px); -moz-transform: translate(0, -100px); -ms-transform: translate(0, -100px); -o-transform: translate(0, -100px); transform: translate(0, -100px); } .modal-video-body { max-width: 940px; width: 100%; height: 100%; margin: 0 auto; display: table; } .modal-video-inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .modal-video-movie-wrap { width: 100%; height: 0; position: relative; padding-bottom: 56.25%; border: none; background-color: black; animation-timing-function: ease-out; animation-duration: 0.3s; animation-name: modal-video-inner; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -ms-transition: -ms-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal-video-movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .modal-video-close-btn { position: absolute; z-index: 2; top: -35px; right: 0px; display: inline-block; width: 35px; height: 35px; overflow: hidden; border: none; background: transparent; } .modal-video-close-btn:before { transform: rotate(45deg); } .modal-video-close-btn:after { transform: rotate(-45deg); } .modal-video-close-btn:before, .modal-video-close-btn:after { content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; margin-top: -1px; background: white; border-radius: 5px; margin-top: -6px; } /* Reset Rock sections styles */ section:not(.parallax), #PageBody > section, #AdminPageBody > section { position: relative; padding-top: 0px; padding-bottom: 0px; } /* Post / Story Itself ------------------------------------------------------ */ .post_item { padding: 0px 75px; font-size: 15px; /* Blogger: Classic*/ } .post_item .post_featured { position: relative; } .post_item .post_featured .post_thumb { display: inline-block; overflow: hidden; } .post_item .post_featured .post_info_item.post_info_posted { color: #222222; position: absolute; z-index: 1; bottom: 2px; left: 0; width: 5rem; height: 5rem; text-align: center; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } .post_item .post_featured .post_info_item.post_info_posted:hover { cursor: pointer; } .post_item .post_featured .post_info_item.post_info_posted div.day { font-size: 2rem; padding-top: 0.9rem; } .post_item .post_featured .post_info_item.post_info_posted div.month_year { font-size: 0.6667rem; } .post_item .post_featured .post_info_item.post_info_posted div.month_year { font-size: 0.6667rem; } .post_item .post_featured:hover .post_info_item.post_info_posted { opacity: 0; } .post_item .massonry_border .post_title { font-size: 1.5em; text-transform: none; margin: 20px 0 6px 0; } .post_item .massonry_border p { margin-bottom: 1em; } .post_item .massonry_border button, .post_item .massonry_border .button { display: inline-block; text-align: center; padding: 0.65em 1.75em; font-weight: 700; font-size: 0.867em; text-transform: uppercase; } /* Post Featured Block ------------------------------------------------------ */ .post_featured { overflow: hidden; /*margin-bottom:2em;*/ position: relative; z-index: 10; } .post_featured img { width: 100%; height: auto; } .post_featured_right > .post_featured { float: right; width: 40%; margin-left: 4.3478%; } .post_featured_left > .post_featured { float: left; width: 40%; margin-right: 4.3478%; } .post_tag_link { background-color: #f1f1f1; padding: 5px; color: black; border-radius: 5px; line-height: 35px; } /* Post Info Block ------------------------------------------------------ */ .post_info { line-height: 1.8em; margin-top: 0.6em; /*margin-bottom: 1.6em;*/ } .post_info .post_info_item { margin-right: 1em; } .post_info .post_info_counters .post_counters_item:before { margin-right: 0.5em; } .post_info .post_info_counters .post_counters_item + .post_counters_item { padding: 5px 0 5px 1em; margin-left: 1em; } .post_info .post_info_counters .post_counters_like .fb-like { top: -5px; } .post_info.post_info_share_vertical { margin: 0; } .post_info .post_info_item + .post_info_item:before { content: ""; } /* Post author ------------------------------------------------------ */ .post_author { margin-bottom: 2em; padding: 2.666rem 2rem; overflow: hidden; background-color: #f4f4f4; } .post_author .post_author_avatar { float: left; margin: 0 2rem 1em 0; overflow: hidden; max-width: 200px; max-height: 200px; } .post_author .post_author_title { margin-top: 0; } .post_author .post_author_about { font-size: 0.866rem; margin-top: 0.7em; } .post_author .post_author_info { margin-top: 2.5rem; margin-bottom: 0.67rem; } .post_author .post_author_title, .post_author .post_author_about, .post_author .post_author_info { margin-left: 12rem; } /* Post layouts for different screen sizes ------------------------------------------------------ */ @media (min-width: 1600px) { .post_item { padding: 0px 15%; } } /* Apple iPhone 5, 5S & 5C Apple iPod Touch (5th generation) */ /* With side menu */ @media (min-width: 1510px) and (max-width: 1600px) { /* Without side menu @media (min-width: 1280px) and (max-width: 1439px) { */ .content_wrap { width: 1170px; } } /* With side menu */ @media (min-width: 1366px) and (max-width: 1509px) { /* Without side menu @media (min-width: 1136px) and (max-width: 1279px) { */ .content_wrap { width: 1170px; } } /* With side menu */ @media (min-width: 1200px) and (max-width: 1365px) { /* Without side menu @media (min-width: 1024px) and (max-width: 1135px) { */ .content_wrap { width: 1160px; } } /* With side menu */ @media (min-width: 992px) and (max-width: 1199px) { /* Without side menu @media (min-width: 960px) and (max-width: 1023px) { */ .content_wrap { width: 970px; } } /* Sony Xperia LG Optimus Blackberry Storm 3, Torch 9850 & Torch 9860 Nokia Lumia 610, 710 & 800 HTC Desire, Desire Z, Desire S & One V Samsung Galaxy */ @media (min-width: 769px) and (max-width: 991px) { .content_wrap { width: 750px; } } @media (min-width: 640px) and (max-width: 768px) { .content_wrap { width: 600px; } } @media (min-width: 480px) and (max-width: 639px) { .content_wrap { width: 440px; } } /* Portrait orientation Sony Xperia LG Optimus Blackberry Storm 3, Torch 9850 & Torch 9860 Nokia Lumia 610, 710 & 800 HTC Desire, Desire Z, Desire S & One V Samsung Galaxy */ @media (max-width: 768px) { /*(max-width: 1439 1279 1135 1023 959 767 473 )*/ .post_item { padding: 0px; } /*Posts layouts*/ .post_featured_left, .post_featured_right { padding: 0 1em; } .post_featured_left > .post_featured, .post_featured_right > .post_featured { float: none; margin-left: 0; margin-bottom: 2em; width: 100%; } /*Single Post*/ .post_author .post_author_title, .post_author .post_author_about, .post_author .post_author_info { margin-left: 0; } } /* Very common low res */ @media (max-width: 479px) { .content_wrap { width: 300px; } /* Posts layouts */ .post_featured_left > .post_featured, .post_featured_right > .post_featured { float: none; margin-left: 0; margin-bottom: 2em; width: 100%; } /*Single Post*/ .post_author .post_author_avatar { max-width: 100px; max-height: 100px; } .post_author .post_author_info { clear: both; } }