/********************************* OVERALL STYLING ************************************/ html{ font-family: 'Muli', sans-serif; color:#01334D; font-size:18px; } /*html{ font-family: 'Muli', sans-serif; color:#6D6E70; font-size:18px; }*/ /******* COLOURS ******** DARK BLUE - #01334D SLIGHTY LIGHTER BLUE - #014365 CAMPAIGN SHOP REDESIGN SUMMER 2019 Pink - #ad2e89 */ /*********************** STRUCTURAL ADDITIONS 23-2-2021 ***********************/ .flex-row{ display: flex; flex-direction: row; } .flex-row-wrap{ display: flex; flex-direction: row; flex-wrap: wrap; } .flex-row-space-between{ display: flex; flex-direction: row; justify-content: space-between; } .flex-column{ display: flex; flex-direction: column; } .flex-column-wrap{ display: flex; flex-direction: column; flex-wrap: wrap; } /*********************** GENERAL STYLES FOR THIS WEBSITE ***********************/ /***** FONTS *****/ .heading-font{ font-family:'Playfair Display', serif; } p{ font-size:1rem; font-weight:400; } a{ color:#6d6e70; } /***** FORMS *****/ .form-field{ padding-right:20px; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="password"], input[type="search"], textarea, select{ border:1px solid #01334D; font-size:0.9rem; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { border-color:#ccc; } form .required-field, form .sensitive-data{ font-size:0.85rem; } /*********************** FORMATTING STYLES FOR THIS WEBSITE ***********************/ .hero-page-heading, .hero-heading, .page-heading, .section-heading, .sub-heading, .small-heading{ float:left; width:100%; font-family:'Playfair Display', serif; } .hero-heading{ margin-bottom:30px; font-size:4rem; color:#fff; line-height:110%; } .page-heading{ margin:0; font-size:3rem; font-weight:500; color:#01334D; line-height:110%; letter-spacing:1px; } .section-heading{ margin-bottom:40px; font-size:3rem; line-height:110%; /*font-weight:800;*/ font-weight:400; } .sub-heading{ margin-bottom:20px; font-size:1.6rem; font-weight:500; line-height:120%; letter-spacing:1px; } .small-heading{ margin-bottom:20px; font-size:1.1rem; line-height:120%; letter-spacing:1px; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ font-size:0.8rem; } .button-standard{ float:left; padding:8px 50px; font-size: 0.9rem; background-color:#01334D; border:none; color:#fff; -webkit-transition:background-color .5s; -moz-transition:background-color .5s; -o-transition:background-color .5s; transition:background-color .5s; } .button-standard.center{ float: none; display: table; margin: 0 auto; } .desktop-device .button-standard:hover { background-color:#999; } .button-full-width-blue{ float:left; width:100%; padding:4px 10px; background-color:#01334D; color:#fff; text-align:center; font-family:'Playfair Display', serif; font-size:0.8rem; letter-spacing:1px; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .desktop-device .button-full-width-blue:hover { background-color:#999; } .button-white{ background-color: #fff; color: #014365; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .desktop-device .button-white:hover{ background-color: #014365; color: #fff; } @media screen and (max-height:767px){ .hero-heading{ font-size:2.5rem; } .page-heading{ font-size:2.5rem; } .section-heading{ font-size:2.5rem; } .sub-heading{ font-size:1.2rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:1023px){ .hero-heading{ font-size:2.5rem; } .section-heading{ font-size:2.5rem; } .sub-heading{ } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:767px){ .hero-heading{ margin-bottom: 20px; font-size:2rem; } .page-heading{ font-size:2.2rem; } .section-heading{ font-size:2rem; } .sub-heading{font-size:1.1rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } @media screen and (max-width:479px){ .hero-heading{ margin-bottom: 0; font-size:1.5rem; } .section-heading{ font-size:1.4rem; } .sub-heading{ font-size:1rem; } .highlighted-text-large{ } .highlighted-text-small{ } .body-text-large{ } .body-text-small{ } } .page-heading.gap-bottom{ margin-bottom:80px; } #main-wrapper{ padding-top:150px; padding-bottom:0; } /********************************* SITE COLOURS ************************************/ .font-blue-standard{color:#01334D;} .desktop-device .font-blue-standard-hover:hover{color:#01334D;} .bg-blue-standard{background-color:#01334D;} .desktop-device .bg-blue-standard-hover:hover{background-color:#01334D;} .font-blue-light{ color:#EFEFF1; } .bg-blue-light{ background-color:#EFEFF1; } .grey-bg{ background-color:#D1D5D9; } .grey-light-bg{ background-color:#F4F4F4; } .bg-off-white{ background-color:#f8f8f8; } .border-bottom-grey-light-thin{ border-bottom:1px solid #E7E9EB; } .bg-blue-transparent{ background-color:rgba(1,51,77,0.95); } /******************** RE-USED STYLES (INDIVIDUAL OVERRIDES TO GO BELOW) **********************/ .alt-font{ font-family:'Playfair Display', serif; } .letter-space-2{ letter-spacing:2px; } /***** LEFT MENUS *****/ .body-with-left-menu-sticky.active{ position:fixed; top:150px; } .body-with-left-menu-sticky.active.stuck-bottom{ position:absolute; top:auto; bottom:0; } /***** RE-USED ELEMENTS *****/ .button-full-width{ float:left; width:100%; padding:5px 10px 7px; background-color:#01334D; color:#fff; font-size:0.9rem; text-align:center; font-family:'Playfair Display', serif; line-height:100%; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .button-full-width-large{ padding:13px 10px 16px; font-size:1rem; } body.desktop-device .button-full-width:hover{ background-color:#999; } .top-bottom-border-grey{ padding-top:10px; padding-bottom:10px; border-top:1px solid #bbb; border-bottom:1px solid #bbb; } /***** ICON MAPS *****/ .icon-map{ float:left; width:20px; height:20px; background-image:url(../img/icons/icon-map.png); background-repeat:no-repeat; } .icon-map-pin{ background-position:-50px 0px; } .icon-map-envelope{ background-position:-100px 0px; } .icon-map-person{ background-position:-150px 0px; } .icon-map-phone{ background-position:-200px 0px; } .icon-map-favourite{ background-position:-250px 0px; } .icon-map-search{ background-position:0 0; } /***** HIGHLIGHT LINES *****/ .highlight-line{ position:absolute; bottom:-1px; height:1px; width:100px; background-color:#01334D; opacity:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .highlight-line.active{ opacity:1; } /*********** SOCIAL *************/ .header-social-icon{ color:#01334D; } /********************************** TEASERS **************************************/ .teaser{ width:22%; margin-bottom:50px; } .teaser-image{ } .teaser-image img{ } .teaser-text{ padding:10px 3% 0; color:#01334D; } .teaser-text-heading-text{ margin-bottom:10px; /*padding-right:25px; THIS IS FOR WITH THE FAVOURITES BUTTON */ font-size:1.2rem; } .teaser-content-library .teaser-text-heading-text{ margin-bottom: 8px; } .teaser-text-content{ padding-bottom:15px; } .teaser-text-content p{ margin-bottom:0; font-size:0.75rem; line-height:130%; } .teaser-date{ font-size: 0.75rem; font-weight: 700; margin-bottom: 14px; float: left; width: 100%; } .teaser-text-heading-favourite{ top:6px; } .teaser-text-heading-favourite img{ } .teaser-horizontal{ } .teaser-horizontal .teaser-image{ } .teaser-horizontal .teaser-text{ } .teaser-grey-bg{ } .teaser-grey-bg .teaser-image{ padding:20px; background-color:#D1D5D9; } .teaser-grey-bg .teaser-image img{ margin:0 auto; } .teaser-columns-four{ margin-right:4%; } .teaser-columns-four:nth-of-type(4n){ margin-right:0; } .teaser-columns-four:nth-of-type(4n + 1){ clear:left; } .teaser-image-triangle-overlay-wrapper{ width: 100px; height: 100px; position: absolute; bottom: 0; left: 0; display:none; } .produced-by-bn .teaser-image-triangle-overlay-wrapper{ display:block; } .teaser-image-triangle-overlay-background{ width: 0; height: 0; border-bottom: 100px solid #a83669; border-right: 100px solid transparent; } .teaser-image-triangle-overlay-image{ position: absolute; bottom: 10px; left: 10px; width: 40px; height: 40px; } .teaser-image-video-overlay{ background-position:50%; background-repeat:no-repeat; background-size:120px; background-image:url(../img/assets/play-button.svg); display:none; } .teaser-video-category .teaser-image-video-overlay{ display:block; } .teaser-new-content-notification{ color: #fff; background: red; padding: 4px 24px; float: left; font-size: 0.7rem; font-weight: 600; } @media screen and (max-width:767px){ .teaser-text-heading-text{ font-size:1.1rem; } } /************************************************************************************** EVERYTHING BELOW HERE TO BE FOR INDIVIDUAL SECTIONS, PAGES AND OVERRIDES ***************************************************************************************/ #page-loading-mask{ display:none; background-color:rgba(255,255,255, 0.8); z-index:3001; } #page-loading-mask img{ margin:0 auto; } /****************************** HEADER SECTION ****************************/ /***** STRUCTURE FOR RESIZING HEADER ON SCROLL DOWN FROM TOP *****/ /* Top - large screen */ /*#site-header{ height:110px; } #sticky-header{ height:110px; border-bottom:1px solid #ddd; } #header-top-site-logo img{ height:50px; } .main-navigation{ width:calc( 100% - 270px ); height:50px; } /* Scrolled down - large screen */ /*.scrolled-down #site-header{ height:50px; } .scrolled-down #sticky-header{ height:50px; padding-top:10px; padding-bottom:10px; } .scrolled-down #header-top-site-logo img{ height:30px; } .scrolled-down .main-navigation{ height:30px; } /*@media screen and (max-width:1023px){ /* Top - small screen */ /*#site-header{ height:70px; } #sticky-header{ height:70px; padding-top:15px; padding-bottom:15px; } #header-top-site-logo img{ height:40px; } .main-navigation{ height:40px; } /* Scrolled down - small screen */ /*.scrolled-down #site-header{ height:50px; } .scrolled-down #sticky-header{ height:50px; padding-top:10px; padding-bottom:10px; } .scrolled-down #header-top-site-logo img{ height:30px; } .scrolled-down .main-navigation{ height:30px; } }*/ #site-header{ /*height:170px; margin-bottom:50px;*/ /*height:100px;*/ position:fixed; top:0; left:0; z-index:3; } #site-header-sticky{ /*height:170px;*/ height:100px; background-color:#fff; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #site-header-sticky.show-search{ top:50px; } #header-top-wrapper{ position:relative; overflow:hidden; z-index:2; background-color:#fff; } #header-top{ height:100px; -webkit-transition:height .5s; -moz-transition:height .5s; -o-transition:height .5s;transition:height .5s; } #header-top-site-logo{ } #header-top-site-logo img{ width:288px; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); transform:translateZ(0); } #header-top-user-controls{ } .header-user-controls-item{ margin-left:20px; } .header-user-controls-item-icon{ /*margin:6px 5px 0 0;*/ width:20px; margin:0; background:none; } .header-user-controls-item-text{ color:#0A4160; font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; } /*#header-user-controls-item-icon-person{ background:url(../img/icons/avatar.svg) no-repeat 50% 50%; } #header-user-controls-item-icon-logout{ background:url(../img/icons/logout.svg) no-repeat 50% 50%; } #header-user-controls-item-icon-search{ background:url(../img/icons/magnifying-glass.svg) no-repeat 50% 50%; }*/ #header-bottom-wrapper{ position:relative; overflow:hidden; z-index:2; background-color:#fff; } #header-bottom{ height:70px; -webkit-transition:height .5s; -moz-transition:height .5s; -o-transition:height .5s;transition:height .5s; } #header-bottom-search-wrapper{ } #header-bottom-search-wrapper form{ } #header-bottom-search-wrapper form label{ float:left; } #header-bottom-search-wrapper form input[type=text], #header-bottom-search-wrapper form input[type=search]{ float:left; width:100px; margin:0; padding:10px 15px; border:none; font-size:0.8rem; letter-spacing:1px; line-height:100%; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #header-bottom-search-wrapper form input[type=text]:focus, #header-bottom-search-wrapper form input[type=search]:focus{ width:250px; } input.search-submit[type="submit"], button.search-submit[type="submit"]{ float:left; width:30px; height:34px; margin:0; padding:0 5px; background:url(../img/icons/icon-map.png) no-repeat 5px 7px; } body.desktop-device #header-bottom-search-wrapper form input[type=text]:hover, body.desktop-device #header-bottom-search-wrapper form input[type=search]:hover{ background-color:#e7e9eb; } /* SCROLLED DOWN STICKY VERSION */ body.scrolled-down #header-top{ height:70px; } body.scrolled-down #header-bottom{ height:50px; } body.scrolled-down #site-header-sticky{ /*height:120px;*/ height:70px; } /***** NEW CONTENT NOTIFICATION *****/ .new-content-notification-wrapper{ padding: 0 15px; color: #014364; font-size: 0.7rem; text-transform: uppercase; line-height: 100px; letter-spacing: 2px; transition:line-height .5s; } .new-content-notification-text{ } .new-content-notification-number{ background: red; border-radius: 50px; width: 28px; height: 28px; text-align: center; line-height: 28px; letter-spacing: 1px; font-size: 0.6rem; transition:top .5s; } #header-new-content-notification-number{ top: 24px; } #main-nav-dropdown-wrapper .new-content-notification-number{ top:-1px; color: #fff; width: 20px; height: 20px; line-height: 20px; font-size: 0.5rem; } #main-nav-dropdown-menu-column-2-notification-number{ left: 60px; } #main-nav-dropdown-menu-column-3-notification-number{ left: 125px; } .scrolled-down #header-new-content-notification-wrapper{ line-height: 70px; } .scrolled-down #header-new-content-notification-number{ top:8px; } /***** MAIN NAV *****/ .menu-main-menu-container{ float:left; height:100%; } .main-navigation { } #main-menu{ height:100%; } #main-menu > li{ height:100%; } #main-menu > li > a { height:100%; /*padding:0 30px 0 0;*/ padding:0 15px; color:#014364; font-size:0.7rem; text-transform:uppercase; /*line-height:70px;*/ line-height:100px; letter-spacing:2px; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .desktop-device #main-menu > li > a:hover{ color:#999; } body.scrolled-down #main-menu > li > a { /*line-height:50px;*/ line-height:70px; } /* Toggle button */ .menu-toggle{ width:40px; height:40px; position:relative; margin-top:30px; } .scrolled-down .menu-toggle{ margin-top:20px; } .menu-toggle-line{ height:1px; width:80%; background-color:#01334D; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } #menu-toggle-line-1{ top:25%; left:10%; width:80%; } #menu-toggle-line-2{ top:50%; left:15%; width:70%; } #menu-toggle-line-3{ top:75%; left:10%; width:80%; } .menu-toggle.active{ } .menu-toggle.active, .menu-toggle.inactive{ /*animation-name:menuToggle; animation-duration:1s; animation-iteration-count:1;*/ } .menu-toggle.active #menu-toggle-line-1{ top:50%; transform:rotate(45deg); } .menu-toggle.active #menu-toggle-line-2{ opacity:0; } .menu-toggle.active #menu-toggle-line-3{ top:50%; transform:rotate(-45deg); } /* Maybe make the lines zoom off to the right and come back in? */ @keyframes menuToggle{ 0%{ filter:blur(0); -webkit-filter:blur(0); } 50%{ filter:blur(5px); -webkit-filter:blur(5px); } 100%{ filter:blur(0); -webkit-filter:blur(0); } } .scrolled-down .menu-toggle{ width:30px; height:30px; } .mobile-menu-active .menu-toggle{ } /* POINT WHERE MENU CHANGES TO BURGER */ @media screen and (max-width:767px) { .menu-toggle { display: block; } #main-menu{ display:none; } } @media screen and (max-width:1139px){ #main-menu > li > a{ padding:0 13px; } } .mobile-device .menu-toggle { display: block; } .mobile-device #main-menu{ display:none; } .mobile-device #main-menu > li > a{ padding:0 13px; } /***** SOCIAL *****/ [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa{ font-size:1.4rem; } @media screen and (max-width:1139px){ .header-social{ margin-left:20px; } [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa{ font-size:1.2rem; } } @media screen and (max-width:1023px){ [class^="i"]::before, [class*=" i"]::before, .header-social-link .fa{ font-size:1rem; } } @media screen and (max-width:939px){ .header-social{ margin:0 100px 0 0; } } /***** SEARCH BAR *****/ #search-bar{ top:-50px; height:50px; z-index:4; background-color:#F0F0F0; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #search-bar.active{ top:0; } #search-bar-form-wrapper{ width:100%; max-width:400px; } #search-bar-close{ } .search-form{ width:100%; } .search-form > label{ float:left; width:calc(100% - 65px); } .search-form .search-field{ margin:6px 0 0; padding:7px 17px; margin:6px 0 0; border:none; } .search-form input.search-submit[type="submit"], .search-form button.search-submit[type="submit"], #search-form-submit-icon{ position:absolute; top:15px; right:25px; width:20px; height:20px; } .search-form input.search-submit[type="submit"], .search-form button.search-submit[type="submit"]{ padding:0; z-index:1; background:none; } #search-form-submit-icon{ z-index:0; } #search-bar-close{ width:20px; height:20px; margin-top:15px; cursor:pointer; } .search-bar-close-line{ position:absolute; top:8px; left:-4px; height:2px; width:25px; background-color:#01334D; } #search-bar-close-line-1{ transform: rotate(45deg); } #search-bar-close-line-2{ transform: rotate(-45deg); } /***** MAIN MENU DROPDOWN *****/ #main-nav-dropdown-mask{ padding-bottom:10px; overflow-x:hidden; z-index:1; border-top:1px solid #E7E9EB; transform:translateY(-100%); -webkit-transition:transform .3s; -moz-transition:transform .3s; -o-transition:transform .3s; transition:transform .3s; } #main-nav-dropdown-mask.active{ transform:translateY(0); } #main-nav-dropdown-wrapper{ position:relative; overflow:hidden; background-color:#fff; box-shadow:0 2px 10px #969999; } #main-nav-dropdown-wrapper *{ color:#014364; } #main-nav-dropdown{ padding:30px 0; } #main-nav-dropdown-menu{ width:77%; } .menu-main-menu-submenu-container{ } /* These are for all levels of this menu */ .menu-main-menu-submenu-container ul{ margin:0; list-style:none; } .menu-main-menu-submenu-container ul li{ } .menu-main-menu-submenu-container ul li a{ font-size:0.7rem; text-transform:uppercase; } /* Individual levels */ #main-menu-submenu{ } #main-menu-submenu li > a{ float:left; margin-bottom:5px; transform:translateX(0px); -webkit-transition:transform .3s; -moz-transition:transform .3s; -o-transition:transform .3s; transition:transform .3s; } body.desktop-device #main-menu-submenu li > a:hover{ transform:translateX(5px); } #main-menu-submenu > li{ width:20%; } #main-menu-submenu > li > a{ font-weight:700; } #main-menu-submenu > li > ul{ } #main-menu-submenu > li > ul > li{ } #main-menu-submenu > li > ul > li > a{ float:left; } #main-nav-dropdown-teaser{ width:23%; padding:20px 25px; } #main-nav-dropdown-teaser .button-full-width-blue{ color:#fff; } #main-nav-dropdown-contact{ padding:30px 0; } #main-nav-dropdown-contact *{ font-size:0.65rem; } .main-nav-dropdown-contact-item{ margin-right:30px; } #main-nav-dropdown-contact-item-favourite{ margin-right:0; } .main-nav-dropdown-contact-item-icon{ margin:0 10px 0 0; } .main-nav-dropdown-contact-item-text{ float:left; margin-top:1px; } .main-nav-dropdown-contact-item-text .text-widget{ } .main-nav-dropdown-contact-item-text p{ width:auto; margin:0; } #main-nav-dropdown-contact .icon-map{ background:none; } @media screen and (max-width:1299px){ #main-nav-dropdown-contact-item-favourite{ margin-top:10px; clear:left; } #main-nav-dropdown-contact-item-favourite .main-nav-dropdown-contact-item-text{ float:right; width:calc(100% - 30px); } } @media screen and (max-width:1023px){ #main-nav-dropdown-menu{ width:60%; } .main-nav-dropdown-menu-column{ width:33.3%; padding-right:10px; } .main-nav-dropdown-menu-column:nth-of-type(3n+1){ clear:left; } #main-nav-dropdown-teaser{ width:35%; } } /***** New Version - same styling, different structure *****/ .main-nav-dropdown-menu-column{ } .main-nav-dropdown-menu-column ul{ margin:0; list-style:none; } .main-nav-dropdown-menu-column ul li{ } .main-nav-dropdown-menu-column ul li a{ float:left; margin-bottom:5px; font-size:0.7rem; text-transform:uppercase; -webkit-transform:translateX(0px); -ms-transform:translateX(0px); transform:translateX(0px); -webkit-transition:transform .3s; -moz-transition:transform .3s; -o-transition:transform .3s; transition:transform .3s; } .desktop-device .main-nav-dropdown-menu-column ul li a:hover{ -webkit-transform:translateX(5px); -ms-transform:translateX(5px); transform:translateX(5px); } .main-nav-dropdown-menu-column > div > .menu{ } .main-nav-dropdown-menu-column > div > .menu > li{ } .main-nav-dropdown-menu-column > div > .menu > li > a{ font-weight:700; } /*.main-nav-dropdown-menu-column-categories > div > .menu > li > a{ font-weight:400; }*/ .desktop-device .main-nav-dropdown-menu-column > div > .menu > li > a:hover{ } .main-nav-dropdown-menu-column > div > .menu > li > ul{ } .main-nav-dropdown-menu-column > div > .menu > li > ul > li{ } .main-nav-dropdown-menu-column > div > .menu > li > ul > li > a{ float:left; } .desktop-device .main-nav-dropdown-menu-column > div > .menu > li > ul > li > a:hover{ } .main-nav-dropdown-menu-column ul li.unlink > a{ cursor:auto; } .desktop-device .main-nav-dropdown-menu-column ul li.unlink > a:hover{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); } /****************************************** MOBILE MENU **************************************/ #mobile-menu-social{ width:150px; margin:0 auto; } /****************************************** STICKY LEFT MENU **************************************/ .left-sticky-navigation{ width: 75%; float: left; max-width: 320px; } .left-sticky-navigation ul{ list-style: none; margin-left: 0; padding-left: 0; } .left-sticky-navigation ul > li{ padding: 15px 0; border-top: 1px solid #E7E9EB; position: relative; line-height:120%; } .left-sticky-navigation ul > li > a{ padding: 2px 0; color: #01334D; text-transform: uppercase; font-weight: 600; font-size: 0.9rem; } .left-sticky-navigation ul > li.menu-item-has-children a{ padding-right:22px; } .left-sticky-navigation ul > li > a:hover{ text-decoration: underline; } .left-sticky-navigation .nav-menu > li > ul{ display: none; max-height:140px; overflow-y:scroll; overflow-x:hidden; } .left-sticky-navigation ul > li > ul > li{ padding: 0; border-top: none; } .left-sticky-navigation ul > li > ul > li > a{ padding: 3px 0; font-size: 0.65rem; font-weight: 400; } .left-sticky-navigation ul > li > ul > li > ul{ padding-left: 15px; } .side-menu-expand{ top: 19px; width: 17px; height: 17px; cursor: pointer; } .side-menu-line{ position: absolute; background-color: #01334D;; } .side-menu-line-vertical{ top: 0; left: 8px; width: 1px; height: 100%; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .side-menu-line-horizontal{ top: 8px; left: 0; width: 100%; height: 1px; } .side-menu-expand.open .side-menu-line-vertical{ opacity: 0; } #blog-left-nav .sticky-nav-checker.sticky{ position: fixed; top: 150px; } .sticky-nav-checker.sticky .left-sticky-navigation{ max-width: 216px; } @media screen and (max-width:1023px){ .left-sticky-navigation ul > li > a{ font-size:0.8rem; } } @media screen and (max-width:767px){ .left-sticky-navigation ul > li{ line-height:100%; } .left-sticky-navigation ul > li > a{ font-size:0.7rem; } } /****************************** HERO **********************************/ #hero-wrapper{ max-height:400px; overflow:hidden; } .hero-link{ color:#fff; text-decoration:underline; } @media screen and (max-height:767px){ #hero-wrapper{ max-height:350px; } } @media screen and (max-width:1023px){ #hero-wrapper{ max-height:350px; } } @media screen and (max-width:767px){ #hero-wrapper{ max-height:300px; } } @media screen and (max-width:479px){ #hero-wrapper{ max-height:none; } } @media screen and (max-height:767px){ #hero-wrapper{ max-height:300px; } } @media screen and (max-height:599px){ #hero-wrapper{ max-height:200px; } } #hero-wrapper-training{ max-height:700px; overflow:hidden; padding-top: 100px;} /* @media screen and (max-height:767px){ #hero-wrapper-training{ max-height:600px; } } @media screen and (max-width:1023px){ #hero-wrapper-training{ max-height:600px; } } @media screen and (max-width:479px){ #hero-wrapper-training{ max-height: 500px; } } @media screen and (max-height:599px){ #hero-wrapper-training{ max-height:600px; } }*/ /****************************** BREADCRUMBS **********************************/ #breadcrumb-wrapper.gap-top{ padding-top:20px; padding-bottom:0; } #breadcrumb-wrapper.gap-bottom{ padding-top:0; padding-bottom:20px; } #breadcrumb-wrapper.gap-both{ padding-top:20px; padding-bottom:20px; } #breadcrumb-wrapper.gap-none{ padding-top:0; padding-bottom:0; } #breadcrumb-wrapper{ /*font-family:'Playfair Display', serif;*/ font-size:0.85rem; } #breadcrumb-wrapper span > span{ color:#6d6e70; } #breadcrumb-wrapper a{ color:#01334D; } body.desktop-device #breadcrumb-wrapper a:hover{ text-decoration:underline; } @media screen and (max-height:767px){ } @media screen and (max-width:1023px){ } @media screen and (max-width:767px){ } @media screen and (max-width:479px){ } /****************************************** FOOTER **************************************/ #site-footer{ z-index:2; } #footer-logo{ max-width:none; width:100%; max-height:120px; padding-right:15%; } .footer-menu-column ul{ margin-left:0; padding-right:20px; } .footer-menu-column a{ margin-bottom:5px; font-size:0.9rem; } footer{ background-color: #EFEFF1; padding: 30px 0; } footer .footer-column{ float: left; width: auto; } footer .footer-column img{ max-width: 240px; } footer .footer-column p{ font-size: 0.7rem; text-align: left; } footer .footer-column a{ font-size: 0.7rem; float: none; color: #01334D; } footer #footer-col-1{ width: 30%; } .footer-icon{ float:left; width:20px; margin:6px 12px 0 0; } footer .footer-column.footer-nav{ width: 23%; } .footer-nav ul > li{ margin-bottom: 7px; } .footer-nav ul > li > a{ font-weight: 700; } .footer-nav ul > li > a:hover{ text-decoration: underline; } .footer-nav ul > li > ul > li{ margin-bottom: 0px; } .footer-nav ul > li > ul > li > a{ font-weight: 400 } .footer-legal-wrapper{ position:relative; z-index:2; background-color: #DFDFE1; padding: 25px 0; } .footer-legal-wrapper #footer-legal .textwidget{ float: left; width: 100%; } .footer-legal-wrapper #footer-legal p{ font-size: 0.65rem; text-align: center; margin-bottom: 5px; } .footer-legal-wrapper #footer-legal a{ } .desktop-device .footer-legal-wrapper #footer-legal a:hover{ text-decoration:underline; } @media screen and (max-width:1023px){ footer #footer-col-1{ width:100%; margin-bottom:30px; } #footer-logo{ width:300px; padding-right:0; } footer .footer-column.footer-nav{ width:33.3%; } footer #footer-col-2{ clear:left; } } /***************************** TEASERS ***************************/ .teaser-wrapper:nth-of-time(3n + 1){ clear:left; } .teaser-wrapper > .left-content{ max-width:350px; } .teaser-wrapper > .left-content .sub-heading{ margin-bottom:0; } .desktop-device .teaser-wrapper > .left-content:hover .background-blue-light-hover{background-color:#C8EBF2;} @media screen and (max-width:767px){ .teaser-wrapper > .left-content{ float:none; display:block; margin:0 auto; } } /****************************** HEADER WITH VIDEO ON COMPUTER SCREEN *********************/ .header-video-on-computer-screen{ width: 1000px; display: block; margin: 0 auto; float: none; } .header-video-on-computer-screen-background{ } .header-video-on-computer-screen-video-wrapper{ top: 41px; left: 111px; width: 778px; } .header-video-on-computer-screen-video-wrapper > video{ } @media screen and (max-width:1023px){ .header-video-on-computer-screen-video-wrapper{ top:31px; left:83px; width:585px; } .header-video-on-computer-screen{ width: 750px; } } @media screen and (max-width:767px){ .header-video-on-computer-screen-video-wrapper{ top:19px; left:51px; width:358px; } .header-video-on-computer-screen{ width: 460px; } } /************************************** HERO LETTER **************************************/ #hero-letter{ top:-450px; right:3%; opacity:0.25; font-size:450px; font-family:'Playfair Display', serif; line-height:100%; } /****************************** ALTERNATING COLUMNS LAYOUT ******************************/ .alternating-column{ float: left; width: 50%; padding: 0 50px; } section:nth-of-type(odd) .column-image{ float: right; } .column-image img{ max-height: 500px; margin: 0 auto; } .alternating-column.column-title .page-heading, .alternating-column.column-text .page-heading{ margin-bottom: 30px; width: 70%; } .case-studies .alternating-column.column-text .page-heading{ width: 77%; } .page-link-button{ color: #0A4160; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid #0A4160; } /**************************** INTRO SECTIONS ***************************/ @media screen and (max-width:767px){ .main-text > .left-content, .main-text > .right-content{ width:100%; } } /******************************************************************************************** INDIVIDUAL PAGES *********************************************************************************************/ /***************************** LOGIN / FORGOTTEN PASSWORD PAGE ******************************/ .login-page-header{ opacity: 0.2; } .login-page-header #site-header-sticky{ z-index: 2; } .login-page-header .login-overlay{ position: absolute; z-index: 3; height: 100%; } #login-screen{ position:fixed; top:0; left:0; width:100%; height:100vh; z-index:10; } .login-page-left, .login-page-right{ float: left; width: 50%; height:100vh; } .login-page-left img{ width:100%; max-width: 500px; margin: 0 auto; } .login-wrapper, .login-top-section, .login-bottom-section{ height:100%; } .login-wrapper{ float: none; overflow: hidden; width: 70%; margin: 0 auto; /*min-height: 45vh;*/ } #login-wrapper-inner{ width: 500px; display: block; margin: 0 auto; padding: 50px 75px; background: rgba(255,255,255,0.8); overflow: hidden; border-radius: 10px; } /*#login-wrapper-inner::after{ filter:blur(10px); }*/ @media screen and (max-width:1023px){ .login-wrapper{ width: 80%; } } @media screen and (max-width:767px){ #login-wrapper-inner{ width: 90%; padding: 50px 30px; } .mobile-device #login-wrapper-inner{ margin-bottom:20%; } } #hero-wrapper-login video{ object-fit: cover; width: 100%; min-width: 100%; min-height: 100%; } #login-wrapper-inner img{ width:260px; margin:0 auto 30px; } #login-wrapper-inner .page-heading{ font-size: 1.8rem; letter-spacing: 2px; margin-bottom: 30px; } #login-wrapper-inner form label{ margin-bottom: 3px; font-family:'Playfair Display', serif; letter-spacing: 1px; } #login-wrapper-inner form input[type=text], #login-wrapper-inner form input[type=email], #login-wrapper-inner form input[type=password]{ margin-bottom:0; } #login-wrapper-inner form .login-submit{ margin-bottom:0; } #login-wrapper-inner form input[type=submit], #login-wrapper-inner form button[type=submit]{ float:left; width:100%; padding:7px 10px; background-color:#01334D; color:#fff; text-align:center; font-family:'Playfair Display', serif; font-size:0.9rem; letter-spacing:1px; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #login-wrapper-inner form input[type=submit]:hover, #login-wrapper-inner form button[type=submit]:hover { background-color:#999; } #login-wrapper-inner .login-link{ color:#01334D; font-size:0.9rem; } .desktop-device #login-wrapper-inner .login-link:hover{ text-decoration:underline; } @media screen and (max-width:479px){ #login-wrapper-inner{ width:100%; padding-top:30px; padding-bottom:30px; } #login-wrapper-inner .page-heading{ margin-bottom:10px; font-size:1.2rem; } #login-wrapper-inner form p{ margin-bottom:10px; } #login-wrapper-inner form label{ font-size:0.9rem; } #login-wrapper-inner form input[type="text"], #login-wrapper-inner form input[type="email"], #login-wrapper-inner form input[type="password"]{ padding: 7px 12px; } #login-wrapper-inner .login-link{ float:none; display:table; margin:0 auto; clear:both; } #login-wrapper-inner .login-link:first-of-type{ margin-bottom:5px; } } .login-top-section{ position: absolute; top:0; /*padding-top:80px;*/ left: 0; /*height: auto;*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } /*#login-top-section-forgotten-password{ padding-top:50px; }*/ .login-top-section img, .login-top-section h1{ margin-bottom: 40px; } .login-top-section img{ max-height:none; } #login-top-section-forgotten-password h1{ font-size:2.5rem; } .login-top-section .sign-in-cta{ float: left; width: auto; border-bottom: 1px solid #01334D; } .login-top-section .sign-in-cta:hover{ cursor: pointer; } .login-top-section .sign-in-cta p{ margin-bottom: 0; } #login-page-content p, #login-top-section-forgotten-password form > p:first-of-type{ font-size:0.85rem; line-height:130%; } .login-page-right #bn_login_form label, #login-top-section-forgotten-password label{ font-family: 'Playfair Display', serif; margin-bottom: 5px; } .login-page-right #bn_login_form input[type="text"], .login-page-right #bn_login_form input[type="email"], .login-page-right #bn_login_form input[type="password"], #login-top-section-forgotten-password input[type="text"]{ border: 1px solid #01334D; margin-bottom: 0px; } .login-page-right #bn_login_form input[type="password"]{ margin-bottom:10px; } .login-page-right #bn_login_form input[type="submit"], .login-page-right #bn_login_form button[type="submit"], #login-top-section-forgotten-password input[type="submit"], #login-top-section-forgotten-password button[type="submit"]{ float:left; width:100%; padding:10px; background-color:#01334D; color:#fff; text-align:center; font-family:'Playfair Display', serif; font-size:1rem; letter-spacing:1px; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .login-page-right #bn_login_form input[type="submit"]:hover, .login-page-right #bn_login_form button[type="submit"]:hover { background-color:#999; } .login-page-right .login-submit{ margin-bottom: 0; } .login-page-right .lostPassword{ font-size: 0.8rem; } .login-page-right .login-bottom-section{ float: left; width: 100%; top: 100%; position: absolute; opacity:0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .login-page-right .sign-in-sub-heading{ float: left; width: 100%; padding: 10px 0 20px; margin-bottom: 20px; border-bottom: 1px solid #E7E9EB; } .login-page-right .sign-in-sub-heading p{ margin: 0; } /*- Login Active -*/ .login-active .login-wrapper{ min-height: 75vh; } .login-active .login-top-section{ top: -100%; opacity:0; } .login-active .login-page-right .login-bottom-section{ top: 0; opacity:1; } /***** LOGIN FAILED *****/ body.login-failed .login-wrapper{ min-height: 75vh; } /*body.login-failed .login-top-section{ top: -100%; opacity:0; }*/ body.login-failed .login-page-right .login-bottom-section{ top: 0; opacity:1; } /*#login-failed-error, */ #login-password-reset{ display:none; } #login-failed-error span, #login-password-reset span{ color:red; } body.login-failed #login-failed-error{ display:block; } /***** FORGOTTEN PASSWORD FAILED *****/ #login-top-section-forgotten-password .woocommerce-error{ padding:0; margin:0 0 20px; border:none; background:none; color:red; } #login-password-reset-sent > span{ color:red; } #login-top-section-forgotten-password .woocommerce-error::before{ content:''; } #login-top-section-forgotten-password .woocommerce-error > li{ } /***** PASSWORD RESET *****/ .password-reset-field-error{ color:red; font-size:0.9rem; } #password-reset-tip{ } @media screen and (max-width:767px){ #password-reset-content p{ font-size:0.9rem; } } @media screen and (max-width:479px){ #password-reset-content p{ font-size:0.8rem; } #password-reset-content .woocommerce-Button{ margin:0; } } /***** RESPONSIVE *****/ @media screen and (max-height:767px){ .login-top-section .page-heading{ font-size:2.3rem; } } @media screen and (max-height:479px){ .login-top-section .page-heading{ font-size:1.8rem; } } @media screen and (max-width:1299px){ .login-top-section .page-heading{ font-size:2.3rem; } } @media screen and (max-width:1023px){ .login-top-section .page-heading{ font-size:2rem; } } @media screen and (max-width:767px){ .login-top-section .page-heading{ font-size:1.8rem; } } /***** GEM PLATFORM LOGIN BUTTON AND CHANGES TO LOGIN SCREEN *****/ /* THIS ONLY NEEDS TO BE ON WHEN WE'RE 100% USING ONLY THE GEM LOGIN - MAINLY ON LIVE: */ #login-form-wrapper{ /*display: none;*/ } #login-wrapper-inner P{ margin-bottom: 30px; font-size: 0.9rem; } #login-wrapper-inner > a:first-of-type{ float: left; width: 100%; margin-bottom: 20px; display: block; } #login-wrapper-inner .mo_oauth_login_button_icon_widget{ width: 32px; padding-top: 0; margin-right: 5%; } #login-wrapper-inner .mo_oauth_login_button_widget{ display: flex; flex-direction: row; align-items: center; } @media screen and (max-width: 450px){ #login-wrapper-inner .mo_oauth_login_button_text_widget{ line-height: 1.5 !important; } } /************************** COMING SOON PAGE ************************/ body.page-template-template-coming-soon #login-wrapper-inner .page-heading{ font-size:3rem; } @media screen and (max-width:1299px){ body.page-template-template-coming-soon #login-wrapper-inner .page-heading{ font-size:2.5rem; } } @media screen and (max-width:1023px){ body.page-template-template-coming-soon #login-wrapper-inner .page-heading{ font-size:2rem; } } @media screen and (max-width:767px){ body.page-template-template-coming-soon #login-wrapper-inner .page-heading{ font-size:1.8rem; } } /***************************** FRONT PAGE ******************************/ .page-id-7 #main-wrapper{ padding-top:0; } #hero-wrapper-home{ position:relative; overflow:hidden; } #hero-wrapper-home video{ position:fixed; top:0; left:0; z-index:0; width:100%; min-width:100%; min-height:100%; object-fit:fill; } #home-hero-text{ position:relative; color:#fff; } #home-hero-text .hero-heading{ font-size:9rem; font-weight:100; } #home-hero-text p{ font-size:2.2rem; font-weight:300; letter-spacing:1px; line-height:130%; } @media screen and (max-width:1299px), screen and (max-height:867px){ #home-hero-text .hero-heading{ font-size:6rem; } #home-hero-text p{ font-size:1.8rem; } } @media screen and (max-width:1299px), screen and (max-height:867px){ #home-hero-text .hero-heading{ font-size:6rem; } #home-hero-text p{ font-size:1.8rem; } } @media screen and (max-width:1023px), screen and (max-height:767px){ #home-hero-text .hero-heading{ font-size:5rem; } #home-hero-text p{ font-size:1.5rem; } } @media screen and (max-width:899px){ #home-hero-text .hero-heading{ font-size:4rem; } #home-hero-text p{ font-size:1.2rem; } } @media screen and (max-width:479px){ #home-hero-text .hero-heading{ margin-bottom:20px; } } .scroll-down{ border: 1px solid #fff; width: 61px; height: 61px; bottom: 90px; left: calc(50% - 30px); border-radius: 50%; cursor:pointer; animation-name:scrollDownBob; animation-duration: 2.5s; animation-iteration-count:infinite; } .scroll-down-arrow-line{ position:absolute; height:1px; background-color:#fff; } .scroll-down-arrow-line-vertical{ width: 35px; transform: rotate(90deg); left: 12px; top: 30px; } .scroll-down-arrow-line-left{ width: 20px; transform: rotate(45deg); left: 13px; top: 41px; height: 1.5px; } .scroll-down-arrow-line-right{ width: 20px; transform: rotate(-45deg); left: 26px; top: 41px; height: 1.5px; } @keyframes scrollDownBob{ 0%{ margin-bottom:0; } 30%{ margin-bottom:10px; } 60%{ margin-bottom:0; } 100%{ margin-bottom:0; } } @media screen and (max-width:1299px), screen and (max-height:867px){ .scroll-down{ bottom:50px; } } #main-text-home{ margin-top:100px; margin-bottom:100px; } #main-text-home .section-heading{ margin-bottom:30px; letter-spacing:10px; } .page-content-wrapper-alternate-two-columns .main-text .section-heading, .page-content-wrapper-alternate-two-columns .main-text p{ margin:0; } .page-content-wrapper-alternate-two-columns .section-heading{ font-weight:500; letter-spacing:3px; } .page-content-wrapper-alternate-two-columns .main-text .section-heading{ letter-spacing:1px; } .home-intro-logo{ margin-right:50px; } .home-intro-logo:last-of-type{ margin-right:0; } .home-section-half-split-wrapper > .left-content{ padding-right:30px; } .home-section-half-split-wrapper > .right-content{ padding-left:30px; } .home-section-half-split-text .section-heading{ padding-bottom:30px; margin-bottom:25px; border-bottom:1px solid #ccc; } @media screen and (max-width:1024px){ #main-text-home .section-heading{ letter-spacing:5px; } .home-section-half-split-wrapper .left-content, .home-section-half-split-wrapper .right-content{ width:50%; } .home-section-half-split-wrapper p{ font-size:0.9rem; } } .home-section-link, .link-highlight-bottom-wrapper{ padding-bottom:4px; position:relative; clear:both; color:#01334D; text-transform:uppercase; letter-spacing:1px; } .home-section-link-highlight, .link-highlight-bottom{ position:absolute; left:0; bottom:0; height:1px; max-width:100%; } .home-section-link-highlight-default, .link-highlight-bottom-default{ width:100%; background-color:#ccc; } .home-section-link-highlight-active, .link-highlight-bottom-active{ width:0; background-color:#01334D; -webkit-transition:width .3s; -moz-transition:width .3s; -o-transition:width .3s; transition:width .3s; } body.desktop-device .home-section-link:hover .home-section-link-highlight-active, body.desktop-device .link-highlight-bottom-wrapper:hover .link-highlight-bottom-active{ width:100%; } /* Owl Carousels */ .owl-carousel-wrapper{ position:relative; } .owl-teasers-container-4, .owl-teasers-container-4-no-repeat{ height:400px; } .toolkit-page-teasers-wrapper > .owl-teasers-container-4, .toolkit-page-teasers-wrapper > .owl-teasers-container-4-no-repeat{ height:450px; } .owl-teasers-container-4.owl-teasers-container-short, .owl-teasers-container-4-no-repeat.owl-teasers-container-short{ height:250px; } .owl-teasers-container-4 .owl-stage-outer, .owl-teasers-container-4-no-repeat .owl-stage-outer{ position:relative; width:100%; height:100%; overflow:hidden; } .owl-teasers-container-4 .owl-stage, .owl-teasers-container-4-no-repeat .owl-stage{ position:absolute; } .owl-teasers-container-4 .owl-item, .owl-teasers-container-4-no-repeat .owl-item{ float:left; } .owl-teasers-container-4 .owl-nav, .owl-teasers-container-4-no-repeat .owl-nav{ position:absolute; left:0; top:30%; width:100%; /* top:60px; top:23%; left:-50px; width:calc(100% + 100px); */ } /*.owl-carousel-wrapper*/ .owl-prev, /*.owl-carousel-wrapper*/ .owl-next{ position:absolute; width:41px; height:41px; text-indent:-5000px; cursor:pointer; } /*.owl-carousel-wrapper*/ .owl-prev{ left:0; background:url(../img/assets/carousel-arrow-left.png) no-repeat 50% 50%; } /*.owl-carousel-wrapper*/ .owl-next{ right:0; background:url(../img/assets/carousel-arrow-right.png) no-repeat 50% 50%; } .owl-teasers-container-no-text .owl-nav{ top:23%; } .owl-nav.disabled, .owl-dots.disabled{ display:none; } .owl-teasers-container-4 .teaser-image, .owl-teasers-container-4-no-repeat .teaser-image{ background-color:#eee; } .owl-teasers-container-4 .teaser-image img, .owl-teasers-container-4-no-repeat .teaser-image img{ max-height:200px; margin:0 auto; } .teaser-home .teaser-text{ padding-left:0; padding-right:0; } .teaser-text > .teaser-text-heading-text-home{ width:100%; } .teaser-text-content-home{ margin-bottom:0; position:relative; } .home-teaser-line{ position:absolute; left:0; bottom:0; height:2px; } .home-teaser-line-default{ width:100%; background-color:#ccc; } .home-teaser-line-active{ width:0; background-color:#01334D; -webkit-transition:width .3s; -moz-transition:width .3s; -o-transition:width .3s; transition:width .3s; } body.desktop-device .teaser-home:hover .home-teaser-line-active{ width:100%; } /*.teaser-text-content-home{ border-bottom:3px solid #ccc; }*/ /***************************** MARKETING CONSULTANCY MAIN PAGE ******************************/ /***** SERVICES TABBED SECTION *****/ #marketing-consultancy-services{ } #marketing-consultancy-services-headings{ width:auto; display:table; margin:0 auto 80px; padding-bottom:10px; border-bottom:1px solid #ccc; } .tabbed-content-headings-marker{ position:absolute; bottom:0; left:0; height:1px; background-color:#01334D; -webkit-transition:width .3s, left .3s; -moz-transition:width .3s, left .3s; -o-transition:width .3s, left .3s; transition:width .3s, left .3s; } #marketing-consultancy-services-content{ } .marketing-consultancy-services-item{ margin:0 40px 0 0; font-size:1.2rem; letter-spacing:1px; cursor:pointer; } .marketing-consultancy-services-item:first-of-type{ margin-left:0; } .marketing-consultancy-services-item:last-of-type{ margin-right:0; } .marketing-consultancy-services-item-content{ position:absolute; opacity:0; z-index:0; } .marketing-consultancy-services-item-content.active{ position:relative; opacity:1; z-index:1; -webkit-transition:opacity .5s; -moz-transition:opacity .5s; -o-transition:opacity .5s; transition:opacity .5s; } .marketing-consultancy-services-item-content .section-heading{ margin-bottom:0; text-align:right; } .marketing-consultancy-services-item-content .left-content{ padding-right:50px; } .marketing-consultancy-services-item-content .right-content{ padding-left:50px; } @media screen and (max-width:1023px){ .marketing-consultancy-services-item{ font-size:1.1rem; } .marketing-consultancy-services-item-content .section-heading{ font-size:2rem; } } @media screen and (max-width:767px){ .marketing-consultancy-services-item{ font-size:1rem; } .marketing-consultancy-services-item-content .section-heading{ font-size:1.5rem; } } /***** PORTFOLIO SECTION *****/ #marketing-consultancy-portfolio-teasers .owl-teasers-container-4{ height:320px; } .teaser-marketing-consultancy-portfolio .teaser-text{ font-size:0.8rem; } /***** CASE STUDIES SECTION *****/ .custom-sections-page-section-centered-image{ } .custom-sections-page-section-centered-image img{ margin:0 auto; } .teaser-marketing-consultancy-case-studies .teaser-text p{ font-size:0.8rem; } /***** TEAM SECTION *****/ .teaser-team .teaser-image{ position:relative; } .teaser-team .image-overlay{ opacity:0; /*****/display:none;/*****/ position:absolute; top:0; left:0; width:100%; height:100%; padding:30px 20px; background:rgba(1,51,77,0.7); color:#fff; font-size:0.9rem; -webkit-transition:opacity .5s; -moz-transition:opacity .5s; -o-transition:opacity .5s; transition:opacity .5s; } .teaser-team .team-description{ line-height:120%; } .teaser-team a{ color:#fff; } .team-phone{ } .team-email{ font-size:0.7rem; } /*.teaser:hover .image-overlay{ opacity:1; }*/ .owl-teasers-container-4 .teaser-team .teaser-image img{ max-height:350px; } #marketing-consultancy-contact a{ -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .desktop-device #marketing-consultancy-contact a:hover{ color:#01334D; } /***************************** TEAM PAGE ******************************/ a .teaser-text-heading-text{ color: #01334D; /*width: 88%;*/ } #article-category-section .teaser-grey-bg .teaser-image{ padding: 0; } .bottom-grey-space-line{ float: left; width: 100%; height: 2px; background-color: #D1D5D9; transition: all 0.3s; } .teaser-columns-four:hover .bottom-grey-space-line{ background-color: #01334D; } #team-member-single .employee-image{ padding: 0 22px; } .team-content-header .section-heading{ margin-bottom: 10px; font-size: 2.4rem; } .team-member-contact-info p{ width: calc(100% - 40px); margin: 5px 0; } .team-member-contact-info p a{ color: #01334D; } .email-employee-button{ padding: 15px 10px 15px; font-size: 1rem; margin-top: 30px; } /***************************** CONTENT LIBRARY PAGES ******************************/ /*.articles-wrap .teaser{ margin-bottom:10px; }*/ .blog-section-header{ float: left; width: 100%; } .blog-section-header h2{ width: 50%; } /*.blog-section-header*/ .view-more-articles-link{ /*width: 50%;*/ } /*.blog-section-header*/ .view-more-articles-link a{ padding-right: 25px; margin-top: 9px; float: right; font-size: 0.8rem; color: #01334D; } /*.blog-section-header*/ .view-more-articles-link a .side-menu-expand{ top: 13px; width: 13px; height: 12px; } /*.blog-section-header*/ .view-more-articles-link a .side-menu-expand .side-menu-line-vertical{ left: 6px; } /*.blog-section-header*/ .view-more-articles-link a .side-menu-expand .side-menu-line-horizontal{ top: 6px; } .teaser-columns-three{ width: 30%; } .teaser-columns-three:nth-of-type(3n+1){ clear: left; } .teaser-columns-three:nth-of-type(3n+2){ margin-left: 5%; margin-right: 5%; } .teaser-columns-three .teaser-image{ overflow: hidden; position: relative; } .teaser-columns-three .teaser-image img{ transition: all 0.75s; -webkit-transform: translate3d(0, 0, 0); transform:scale(1.01); } .teaser-columns-three .teaser-image > a:hover > img{ transform: scale(1.05); } .teaser-columns-three .teaser-image .image-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transition: all 0.6s; opacity: 0; } .teaser-helpful-docs .teaser-image .image-overlay{ background-color: #a96e87; } .teaser-columns-three .teaser-image:hover .image-overlay{ opacity: 0.5; } .teaser-content-library-index{ margin-bottom:10px; } .insurer-content-flag{ position: absolute; top: -5px; right: 10px; width: 25px; height: 35px; z-index: 1; box-shadow: 1px 1px 3px #969999; } .insurer-content-flag p{ font-family: 'Playfair Display', serif; margin-bottom: 0; margin-top: 4px; padding: 0 3px; color: #fff; } .insurer-content-flag p:hover{ cursor: default; } .hover-insurer-logo-holder{ position: absolute; top: calc(50% - 62px); width: 125px; left: calc(50% - 62px); opacity: 0; transition: all 0.6s; } .teaser-columns-three:hover .hover-insurer-logo-holder{ opacity: 1; } .content-library-teaser-heading a{ color: #01334D; } .content-library-category-link{ padding: 0 10px; } .content-library-category-link p{ margin-bottom: 7px; } .content-library-category-link a{ color: #01334D; font-size: 0.8rem; font-weight:700; } .teaser-columns-one{ width: 100%; margin: 0 0 50px 0; } .featured-left{ width: 65%; } .featured-right{ width: 35%; padding: 0 0 0 5%; } .featured-right .content-library-featured-heading{ font-size: 1.6rem; line-height: 120%; margin-bottom: 15px; } #article-category-section ul, #insurer-category-section ul{ margin: 0; list-style: none; } #article-category-section ul li, #insurer-category-section ul li{ margin-bottom: 30px; } #article-category-section ul li .small-heading, #insurer-category-section ul li .small-heading{ width: 75%; color: #01334D; } #article-category-section ul li .teaser-text-category, #insurer-category-section ul li .teaser-text-category{ border-bottom: 1px solid #E7E9EB; } #article-category-section ul li .teaser-text-heading-favourite, #insurer-category-section ul li .teaser-text-heading-favourite{ top: 12px; } .teaser-content-library-category{ } #insurer-category-section .teaser-grey-bg .teaser-image{ padding: 0; } .teaser-text .content-library-featured-heading a{ color: #01334D; } @media screen and (max-width:1023px){ .teaser-text .content-library-featured-heading a{ font-size: 1.3rem; line-height: 120%; } } @media screen and (max-width:767px){ .content-library-teaser-heading{ font-size:1rem; } .teaser-content-library-index{ width:48%; } .teaser-content-library-index.teaser-columns-three:nth-of-type(3){ display:none; } .teaser-content-library-index.teaser-columns-three:nth-of-type(3n+2){ margin-left: 4%; margin-right: 0; } .featured-left{ width:100%; margin-bottom:20px; } .featured-right{ width:100%; padding-left:0; } .teaser-content-library-category{ width: 29%; } .teaser-content-library-index.teaser-columns-four:nth-of-type(4n+1){ clear:none; } .teaser-content-library-index.teaser-columns-four:nth-of-type(3n+1){ clear:left; } .teaser-content-library-index.teaser-columns-four:nth-of-type(4n){ margin-right:4%; } .teaser-content-library-index.teaser-columns-four .teaser-text-heading-text{ font-size:1rem; } } /***** LEFT MENU *****/ #sidebar-search-wrapper{ } #sidebar-search-wrapper form{ position:relative; } #sidebar-search-wrapper .search-form > label{ width:100%; } #sidebar-search-wrapper .search-form .search-field{ margin:0; padding:12px 30px 12px 0; border-top: 1px solid #E7E9EB; } #sidebar-search-wrapper .search-form input.search-submit[type="submit"], #sidebar-search-wrapper .search-form button.search-submit[type="submit"]{ top: 14px; right: 0; } #search-form-submit-icon-sidebar{ top: 14px; right: 0; width: 20px; height: 20px; } /***** RIGHT POP IN MENU *****/ #blog-how-to.right-sidebar-help{ width:400px; max-width:calc(100% - 50px); right:-290px; top:auto; position:absolute; /*animation-name:rightSidebarBob; animation-iteration-count:infinite; animation-duration:3s;*/ } #blog-how-to.right-sidebar-help.sticky{ top:0; position:fixed; } #blog-how-to.right-sidebar-help.active{ right:0; animation:none; } #right-sidebar-help-items-content-library{ width:calc(100% - 50px); margin-left: 50px; } #right-sidebar-help-items-content-library .more-info-dropdown{ margin-bottom:0; border-bottom:none; background-color:#15273F; -webkit-transition:background-color .2s; -moz-transition:background-color .2s; -o-transition:background-color .2s; transition:background-color .2s; } .desktop-device #right-sidebar-help-items-content-library .more-info-dropdown:hover{ } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-header{ height:60px; padding:5px 50px 5px 20px; color:#fff; cursor:pointer; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-header .right-sidebar-help-item-image-wrapper{ height:100%; padding-right:20px; min-width:40px; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-header .right-sidebar-help-item-image-wrapper img{ max-width:20px; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-header .right-sidebar-help-item-image-wrapper .right-sidebar-help-item-image{ } .right-sidebar-help-item-text-wrapper{ float:left; height:100%; } .right-sidebar-help-item-text-wrapper .dropdown-arrow{ background-color:#fff; } .right-sidebar-help-item-text-wrapper .dropdown-arrow-expand{ right:20px; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-info{ padding-top:20px;background-color:#fff; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-info.extend{ max-height:300px; overflow-y:scroll; } #right-sidebar-help-items-content-library .more-info-dropdown .more-info-dropdown-info img{ } #blog-how-to-tab{ top:76px; left:-74px; width:200px; height: 50px; padding: 15px 0 0; transform:rotate(-90deg); background-color:#D87B11; border-bottom:1px solid #fff; text-align: center; line-height: 100%; cursor:pointer; color: #fff; border-radius: 20px 20px 0 0; text-transform: uppercase; letter-spacing: 3px; -webkit-transition:.2s background-color; -moz-transition:.2s background-color; -o-transition:.2s background-color; transition:.2s background-color; } .desktop-device #blog-how-to-tab:hover{ background-color:#ccc; } /* ANIMATION */ @keyframes rightSidebarBob{ 0%{ right:-290px; } 50%{ right:-275px; } 100%{ right:-290px; } } /***** CATEGORY PAGES *****/ button.alm-load-more-btn{ background-color:#999; border-radius:0; } button.alm-load-more-btn:hover{ background-color:#01334D; } button.alm-load-more-btn.done{ background-color:#01334D; } #ajax-load-more .alm-btn-wrap .alm-load-more-btn{ background-color:#999; } /***** SINGLE PAGE *****/ .main-blog-article #hero-wrapper{ max-height:400px; margin-bottom: 40px; } .further-blog-info{ padding-left: 60px; } .further-blog-info p, .further-blog-info ol{ font-size: 0.75rem; } .further-blog-info > .accordion-section-content > ol{ width: calc(100% - 1.25em); } .further-blog-info ol li{ margin-bottom: 7px; } .further-blog-info .small-heading{ font-family: 'Muli', sans-serif; } .single-insurer-logo-holder{ width: 50%; margin: 0 auto; float: none; } .more-info-dropdown{ border: 1px solid #E7E9EB; margin-bottom: 15px; } .more-info-dropdown-header{ padding: 15px 20px 0 20px; } .more-info-dropdown-header .small-heading{ margin-bottom: 15px; } .more-info-dropdown-info{ padding: 0 35px; display: none; } .more-info-dropdown-info ol{ margin-left: 0; } .image-download-button{ padding: 15px 10px 15px; font-size: 1rem; } .dropdown-arrow-expand{ top: 20px; width: 20px; height: 20px; cursor: pointer; right: 30px; -webkit-transition: transform .3s; -moz-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s; } .dropdown-arrow{ position: absolute; top: 3px; width: 1px; height: 13px; background-color: #01334D; } .dropdown-arrow-left{ left: 5px; transform: rotate(-45deg); } .dropdown-arrow-right{ right: 5px; transform: rotate(45deg); } .dropdown-arrow-expand.open{ transform: /*rotate(180deg)*/ scaleY(-1); } .prev-next-posts{ float: left; width: 100%; position: relative; height: 30px; } .prev-posts-link{ position: absolute; right: 0; } .next-posts-link{ position: absolute; left: 0; } .prev-next-posts a{ color: #01334D; text-transform: uppercase; font-weight: 600; font-size: 0.9rem; } .prev-next-posts a:hover{ text-decoration: underline; } /***** STICKY RIGHT HOW TO BAR *****/ #blog-how-to{ top:220px; right:-340px; width:400px; height:calc(100vh - 220px); padding:0; z-index:20; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; } #blog-how-to.active{ right:0; } #blog-how-to-icon{ position:absolute; top:0; left:0; width:60px; height:60px; background-color:#01334D; cursor:pointer; } #blog-how-to-content{ width:340px; height:100%; overflow-y:scroll; margin-left:60px; padding:20px; background-color:#eee; } /*body.scrolled-down #blog-how-to{ top:0; height:100vh; } body.scrolled-down #blog-how-to.active{ }*/ #blog-how-to-content ol{ } #blog-how-to-content ol li{ width:calc(100% - 1.25em); } @media screen and (max-width:1499px){ #blog-how-to.right-sidebar-help{ right:-350px; } } /***** TOOLKIT SECTIONS *****/ .toolkit-page-teasers-wrapper .teaser-text-content{ min-height:70px; } .teaser-columns-four-no-sidebar{ } /***** HOW TO GUIDES *****/ .how-to-guides .teaser-grey-bg .teaser-image{ padding: 50px 30px; } .how-to-guides .teaser-text-heading .teaser-text-heading-text{ /*width: 90%;*/ } #guides-related-articles{ padding: 0 50px; } .owl-item .teaser{ width: 100%; } .owl-theme .owl-controls .owl-buttons .owl-next{ position: absolute; top: 15%; right: -50px; background-image: url('../img/icons/carousel-arrow-right.jpg'); padding: 7px 16px; background-color: transparent; text-indent: -50000px; background-size: cover; background-repeat: no-repeat; margin: 0; opacity: 0.75; } .owl-theme .owl-controls .owl-buttons .owl-prev{ position: absolute; top: 15%; left: -50px; background-image: url('../img/icons/carousel-arrow-left.jpg'); padding: 7px 16px; background-color: transparent; text-indent: -50000px; background-size: cover; background-repeat: no-repeat; margin: 0; opacity: 0.75; } #blog-index-single .twitter-tweet{ float:left; } /***** TOOLKIT - PLANNING PAGE *****/ #toolkit-planning-main .page-heading{ margin-bottom:80px; } @media screen and (max-width:1023px){ .teaser-columns-four-no-sidebar{ width:29%; } .teaser-columns-four-no-sidebar:nth-of-type(4n){ margin-right:4%; } .teaser-columns-four-no-sidebar:nth-of-type(4n+1){ clear:none; } .teaser-columns-four-no-sidebar:nth-of-type(3n){ margin-right:0; } .teaser-columns-four-no-sidebar:nth-of-type(3n+1){ clear:left; } } @media screen and (max-width:699px){ .teaser-columns-four-no-sidebar{ width:46%; margin-right:4%; } .teaser-columns-four-no-sidebar:nth-of-type(3n){ margin-right:4%; } .teaser-columns-four-no-sidebar:nth-of-type(3n+1){ clear:none; } .teaser-columns-four-no-sidebar:nth-of-type(2n){ margin-right:0; } .teaser-columns-four-no-sidebar:nth-of-type(2n+1){ clear:left; } } /***************************** PRODUCT PAGE ******************************/ /* NAV MENU */ #product-menu{ padding-right:20px; } /* RIGHT SIDEBAR */ #product-sidebar-right{ } #product-sidebar-right li{ } #product-sidebar-right li img{ width:50px; margin-right:20px; } #product-sidebar-right li p{ width:calc(100% - 70px); margin:10px 0 0; } /***************************** CAMPAIGN SHOP PAGES ******************************/ /***** CAMPAIGN OVERVIEW PAGE *****/ .product-section-text p, .product-section-text a, .product-section-text li{ font-size:0.8rem; } #main-product-right .page-heading{ margin-bottom:30px; } #page-content-product p, #page-content-product a, #page-content-product li{ font-size:0.8rem; font-weight:400; } #campaign-shop-popup-campaign-added, #campaign-shop-popup-campaign-added-content{ display:block; } #campaign-shop-popup-campaign-added-content{ width: 80%; max-width: 500px; margin: auto; background: #fff; overflow: hidden; padding: 30px 40px 10px; } #campaign-shop-popup-campaign-added-content p{ color: #01334D; } #campaign-shop-step-heading-wrapper-close-campaign-added{ right:20px; } #campaign-shop-step-heading-wrapper-close-campaign-added-message{ border-radius:0; padding: 8px 25px; height: auto; width: auto; cursor:pointer; } /***** CUSTOMISE CAMPAIGN PAGE *****/ #main-shop-customise-campaign .page-heading{ margin-bottom:40px; } #main-shop-customise-campaign-left{ } .product-section-shop-customise-campaign{ } .product-section-shop-customise-campaign > .left-content{ } .product-section-shop-customise-campaign > .left-content > img{ margin:0 auto; } .product-section-shop-customise-campaign > .right-content{ padding-left:50px; } #main-shop-customise-campaign-right{ padding-left:50px; } #customise-campaign-right-sticky{ } #customise-campaign-right-sticky .button-full-width-blue{ margin:0; } /***** ORDER SUMMARY PAGE *****/ /* Hide the fields we don't need */ .woocommerce-billing-fields, .woocommerce-shipping-fields, #order_comments_field, #my_custom_checkout_field, .wc_payment_methods, #order_review_heading, .cart_item .product-quantity, #order_review .variation > dt, #customer_details, .woocommerce-checkout-review-order-table{ display:none; } /* Styling for the new elements */ #main-order-summary{ max-width:1000px; } #main-order-summary *{ font-family:'Playfair Display', serif; } #page-heading-order-summary{ width:auto; margin-bottom:40px; } #campaign-shop-checkout-table-header, #campaign-shop-checkout-table-footer{ padding:30px 0; font-size:1.2rem; } .campaign-shop-checkout-month{ } #campaign-shop-checkout-month-attribute{ margin-right:10px; } #campaign-shop-checkout-month-value{ } .campaign-shop-checkout-table-border-lines{ padding-top:10px; padding-bottom:10px; border-top:1px solid #bbb; border-bottom:1px solid #bbb; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{ line-height:110%; } .campaign-shop-checkout-table-header-text{ } #campaign-shop-checkout-table-header-text-attribute{ } #campaign-shop-checkout-table-header-text-value{ } #order-summary-edit-submit{ margin-top:10px; margin-bottom:0; padding:10px 30px; font-size:1rem; } .shop-order-summary-product-row{ height:120px; } .shop-order-summary-product-image-wrapper{ } .shop-order-summary-product-image{ width:120px; height:120px; padding:10px; } .shop-order-summary-product-image img{ max-width:100px; max-height:100px; margin:0 auto; } .shop-order-summary-product-name{ } .shop-order-summary-product-variation{ } .shop-order-summary-product-cost{ } #campaign-shop-checkout-table-footer{ } #campaign-shop-checkout-table-footer *{ } #main-order-summary .woocommerce{ float:left; width:48%; margin-right:4%; } .woocommerce-checkout #payment{ float:left; width:100%; background:none; font-size:1.1rem; } .woocommerce-checkout #payment div.form-row{ padding:0; } .woocommerce-checkout #payment #place_order{ float:left; width:100%; /*padding:15px;*/ background-color:#01334D; border-radius:0; font-weight:400; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } body.desktop-device .woocommerce-checkout #payment #place_order:hover{ background-color:#999; } #shop-order-summary-cancel-order, #shop-order-summary-empty-basket{ width:48%; padding:15px; background-color:#CD1719; color:#fff; font-size:1.1rem; line-height:100%; text-align:center; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } #shop-order-summary-empty-basket{ /*width:200px;*/ } body.desktop-device #shop-order-summary-cancel-order:hover, body.desktop-device #shop-order-summary-empty-basket:hover{ background-color:#999; } /***** ORDER CONFIRMATION PAGE *****/ #main-order-summary .page-heading{ margin-bottom:50px; } .campaign-shop-confirmation-table-row-comments{ min-height:1px; } /****************************************************************************************** CAMPAIGN SHOP VERSION 2 *******************************************************************************************/ /* RE-USEABLE */ .teaser-campaign-shop{ } .teaser-campaign-shop.already-selected{ opacity:0.3; z-index:-1; } .teaser-campaign-shop .teaser-image{ /*height:350px;*/ } .teaser-campaign-shop img{ max-height:300px; /*max-width:230px;*/ width:230px; max-width:100%; box-shadow:5px 5px 5px #999; } .white-button{ float:left; padding:6px 25px 8px; background-color:#fff; cursor:pointer; color:#00324D; font-family:'Playfair Display', serif; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } body.desktop-device .white-button:hover{ background-color:#bbb; color:; } /* Intro step teasers */ .campaign-shop-step-teaser{ float:left; width:33.3%; padding:0 50px; text-align:center; } .campaign-shop-step-teaser:nth-of-type(2){ border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .campaign-shop-step-teaser-number-wrapper{ font-family:'Playfair Display', serif; } .campaign-shop-step-teaser-number{ display:block; width:100px; height:100px; margin:0 auto 30px; background-color:#00324D; border-radius:50%; font-family:'Playfair Display', serif; font-size:4rem; color:#fff; line-height:100%; } .campaign-shop-step-teaser-number-text{ font-size:2rem; letter-spacing:1px; line-height:100%; } .campaign-shop-step-teaser-heading{ font-size:1.3rem; margin-bottom:15px; } .campaign-shop-step-teaser-text{ font-size:0.8rem; } .campaign-shop-step-heading-wrapper{ } .campaign-shop-step-heading-wrapper .campaign-shop-step-teaser-number{ float:left; margin:0 50px 0 0; text-align:center; } .campaign-shop-step-heading-wrapper .section-heading{ width:auto; clear:none; margin-top:15px; letter-spacing:2px; } /***** Popup - Campaign selection *****/ .campaign-shop-popup{ display:none; z-index:31; padding-top:30px; overflow-y:auto; overflow-x:hidden; color:#eee; } .campaign-shop-popup .campaign-shop-step-heading-wrapper .campaign-shop-step-teaser-number{ background-color:#fff; color:#00324D; } .campaign-shop-popup .campaign-shop-step-heading-wrapper .section-heading{ color:#fff; font-weight:500; letter-spacing:5px; } .campaign-shop-step-heading-wrapper-icon{ top:20px; width:59px; height:59px; border:1px solid #fff; border-radius:50%; cursor:pointer; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } .campaign-shop-step-heading-wrapper-close{ } .campaign-shop-step-heading-wrapper-close-line{ position:absolute; top:28px; width:41px; height:1px; background:#fff; } .campaign-shop-step-heading-wrapper-close-line-1{ left:9px; transform:rotate(45deg); } .campaign-shop-step-heading-wrapper-close-line-2{ left:8px; transform:rotate(-45deg); } .campaign-shop-step-heading-wrapper-back-line{ position: absolute; width: 20px; height: 1px; background: #fff; left: 16px; } .campaign-shop-step-heading-wrapper-back-line-1{ transform: rotate(40deg); top: 35px; } .campaign-shop-step-heading-wrapper-back-line-2{ transform: rotate(-40deg); top: 22px; } body.desktop-device .campaign-shop-step-heading-wrapper-close:hover, body.desktop-device .campaign-shop-step-heading-wrapper-back:hover{ background-color:rgba(0,0,0,0.3); } /***** Popup *****/ .campaign-selection-details, .campaign-selection-customise{ position:absolute; width:100%; height:0; z-index:0; opacity:0; overflow:hidden; -webkit-transition:opacity 1s; -moz-transition:opacity 1s; -o-transition:opacity 1s; transition:opacity 1s; } .campaign-selection-details.active, .campaign-selection-customise.active{ height:auto; z-index:1; opacity:1; } .campaign-selection-details.loading{ background:transparent url(../img/icons/loading-icon.gif) no-repeat 50% 50%; background-size:50px; } @media screen and (max-width:1399px){ .campaign-selection-customise{ width:calc(100% - 40px); } } /* LOADING ICON */ .loading-icon-wrapper{ position:absolute; top:0; left:0; width:100%; height:75vh; } .loading-icon{ position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; /*background-color: #fff;*/ border-radius: 50%; } .loading-icon:after { content: ''; position: absolute; border-radius: 50%; top: 50%; left: 50%; border: 0px solid white; transform: translate(-50%, -50%); animation: loading 1250ms ease-out forwards infinite; } @keyframes loading { 0% { border: 0px solid white; width: 0%; height: 0%; opacity:1; } /*20% { border: 8px solid white; width: 0%; height: 0%; }*/ 20% { opacity:1; } 100% { border: 8px solid white; width: 100%; height: 100%; opacity:0; } } /* CAMPAIGN SELECTION DETAILS */ /* Columns*/ .campaign-selection-details-column{ height:0; overflow:hidden; opacity:0; -webkit-transition:opacity .3s; -moz-transition:opacity .3s; -o-transition:opacity .3s; transition:opacity .3s; } .campaign-selection-details-column.active{ opacity:1; } .campaign-selection-details.active .campaign-selection-details-column, .campaign-selection-customise.active .campaign-selection-details-column{ height:auto; overflow:visible; } /*.campaign-selection-details-column-1{ width:18%; } .campaign-selection-details-column-2{ width:40%; } .campaign-selection-details-column-3{ width:42%; }*/ .campaign-selection-details-column-1{ width:28%; } .campaign-selection-details-column-2{ width:36%; } .campaign-selection-details-column-3{ width:36%; } @media screen and (max-width:1599px){ #campaign-selection-details{ width:calc(100% - 40px); } .campaign-selection-details-column-3{ width:33%; } } /* Left column teasers */ .campaign-selection-details-product-teaser{ width: auto; margin:0 10% 15px 0; } .campaign-selection-details-product-teaser:nth-of-type(2n){ margin-right:0; } .campaign-selection-details-product-teaser:last-of-type{ margin-bottom:0; } .campaign-selection-details-product-teaser-image{ position:relative; width:100%; max-width:130px; height:150px; padding:15px; clear:both; overflow:hidden; border:1px solid #ccc; cursor:pointer; -webkit-transition:background-color 1s; -moz-transition:background-color 1s; -o-transition:background-color 1s; transition:background-color 1s; } .desktop-device .campaign-selection-details-product-teaser-image:hover, .campaign-selection-details-product-teaser.active .campaign-selection-details-product-teaser-image{ background-color:#ccc; } .campaign-selection-details-product-teaser-image img{ height:120px; margin:0 auto; background:transparent url(../img/icons/loading-icon.gif) no-repeat 50% 50%; background-size:contain; } .campaign-selection-details-product-teaser-text{ font-family:'Playfair Display', serif; letter-spacing:2px; width: 130px; text-align: center; } /* Social icon versions */ .campaign-selection-details-product-teaser-social{ } .campaign-selection-details-product-teaser-social .campaign-selection-details-product-teaser-image{ } .campaign-selection-details-product-teaser-social-icon-wrapper{ background: #fff; padding: 6px; border-radius: 50%; } .campaign-selection-details-product-teaser-social-icon-wrapper img{ width:100%; background:none; height: auto; padding: 20px; } #campaign-selection-details-product-teaser-5 .campaign-selection-details-product-teaser-social-icon-wrapper{ background:#0077B5; } #campaign-selection-details-product-teaser-6 .campaign-selection-details-product-teaser-social-icon-wrapper{ background:#1DA1F2; } #campaign-selection-details-product-teaser-7 .campaign-selection-details-product-teaser-social-icon-wrapper{ background:#4267B2; } #campaign-selection-details-product-teaser-8 .campaign-selection-details-product-teaser-social-icon-wrapper{ background:#00324D; } .campaign-selection-details-product-teaser-image-title{ background-color: rgba(0,0,0,0.7); opacity:0; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .campaign-selection-details-product-teaser-image-title-text{ } .desktop-device .campaign-selection-details-product-teaser-image:hover .campaign-selection-details-product-teaser-image-title{ opacity:1; } /* Middle column large images */ .campaign-selection-details-teaser-large-wrapper{ position:absolute; top:0; left:0; height:0; opacity:0; width:80%; z-index:-1; overflow:hidden; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .campaign-selection-details-teaser-large-wrapper.active{ position:relative; height:auto; opacity:1; z-index:1; } .campaign-selection-details-teaser-large-wrapper img{ max-height:600px; } .campaign-selection-details-teaser-large-wrapper img{ /*margin-top:5000px; background:transparent url(../img/icons/loading-icon.gif) no-repeat 50% 50%; background-size:contain;*/ } .campaign-selection-details-teaser-large-wrapper.active img{ margin-top:0; } .campaign-selection-details-teaser-large-image{ position:relative; margin-bottom:20px; } .campaign-selection-details-teaser-large-image-box{ position:absolute; top:0; left:0; z-index:0; opacity:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .campaign-selection-details-teaser-large-image-front, .campaign-selection-details-teaser-large-image-back, .campaign-selection-details-teaser-large-image-inner-left, .campaign-selection-details-teaser-large-image-inner-right{ /*z-index:0; opacity:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s;*/ } .campaign-selection-details-teaser-large-image-front{ /*position:relative;*/ } .campaign-selection-details-teaser-large-image-back{ /*position:absolute; top:0; left:0;*/ } .campaign-selection-details-teaser-large-image-box.active{ position:relative; z-index:1; opacity:1; } .campaign-selection-details-teaser-large-image-front.active, .campaign-selection-details-teaser-large-image-back.active, .campaign-selection-details-teaser-large-image-inner-left.active, .campaign-selection-details-teaser-large-image-inner-right.active{ /*z-index:1; opacity:1;*/ } /***** FOR THE DL FLYER AS IT NEEDS SPLITTING INTO TWO *****/ .campaign-selection-details-teaser-large-image-inside-half{ float:left; width:50%; } .campaign-selection-details-teaser-large-image-front .campaign-selection-details-teaser-large-image-inside-half{ float:right; } /***** CONTROLS *****/ .campaign-selection-details-teaser-large-controls-wrapper{ } .campaign-selection-details-teaser-large-controls{ z-index:-1; } .campaign-selection-details-teaser-large-controls.active{ cursor:default; background-color:#bbb; } .campaign-selection-details-teaser-large-controls-front{ margin-right:20px; } .campaign-selection-details-teaser-large-controls-inside{ margin-right:20px; } .campaign-selection-details-teaser-large-controls-back{ } .campaign-selection-details-teaser-large-controls-print{ float:right; } /* WHEN ACTIVE */ .campaign-selection-details-teaser-large-wrapper.active .campaign-selection-details-teaser-large-controls{ z-index:1; } /* RIGHT COLUMN TEXT */ .campaign-selection-details-column-3 .section-heading{ font-size:2.7rem; font-weight:500; letter-spacing:2px; } .campaign-selection-details-body *{ font-size:0.9rem; line-height:140%; } .campaign-selection-details-product-teaser-right-column-info-type{ display:none; } .campaign-selection-details-product-teaser-right-column-info-type.active{ display:block; } .campaign-selection-details-column-3 ul{ width:calc(100% - 1.25em); } #campaign-selection-media-type-header-wrapper > p{ margin-bottom:10px; } .campaign-selection-media-type-content{ display:none; } .campaign-selection-media-type-content.active{ display:block; } .campaign-selection-details-order-quantities{ padding-left:100px; padding-right:100px; } @media screen and (max-width:1023px){ .campaign-selection-details-column-3 .section-heading{ font-size:2.2rem; } } @media screen and (max-width:767px){ .campaign-shop-step-teaser { width: 80%; padding: 60px 0; margin: 0 10%; } .campaign-shop-step-teaser:nth-of-type(2){ border-left:none; border-right:none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .teaser-campaign-shop{ width:48%; } .teaser-campaign-shop:nth-of-type(4n){ margin-right:4%; } .teaser-campaign-shop:nth-of-type(4n+1){ clear:none; } .teaser-campaign-shop:nth-of-type(2n){ margin-right:0; } .teaser-campaign-shop:nth-of-type(2n+1){ clear:left; } .campaign-selection-details-column-1{ width:200px; } .campaign-selection-details-column-2{ width:calc(100% - 240px); } .campaign-selection-details-column-3{ width:calc(100% - 40px); } .campaign-selection-details-column-3 .section-heading{ font-size:1.8rem; } } @media screen and (max-width:479px){ .campaign-selection-details-column-3 .section-heading{ font-size:1.4rem; } } /***** RESPONSIVE *****/ @media screen and (max-width:1024px){ .campaign-selection-details-column-1{ width:40%; } .campaign-selection-details-column-2{ width:60%; } .campaign-selection-details-column-3{ width:100%; } } /****************************** CAMPAIGN SELECTION - QUANTITIES OPTIONS ***************************/ #campaign-details-quantities-previous{ right: 90px; height: 60px; width: 60px; top: 20px;opacity:0; z-index:0; cursor:pointer; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } #campaign-details-quantities-previous.active{ opacity:1; z-index:1; } #campaign-details-quantities-previous span{ } .campaign-selection-customise-teaser{ width:21%; margin-right:5%; } .campaign-selection-customise-teaser:nth-of-type(4){ margin-right:0; } .campaign-selection-customise-teaser-image{ /*max-height:270px;*/ padding:30px; } .campaign-selection-customise-social-blog-teaser-image-bg{ display:block; margin:0 auto; width:90%; height:90%; max-width:300px; max-height:300px; background-color:#00324D; border-radius:50%; } #campaign-selection-customise-social-blog-teaser-image-bg-linkedin{ background-color:#0077B5; } #campaign-selection-customise-social-blog-teaser-image-bg-twitter{ background-color:#1DA1F2; } #campaign-selection-customise-social-blog-teaser-image-bg-facebook{ background-color:#4267B2; } #campaign-selection-customise-social-blog-teaser-image-bg-blog{ } .campaign-selection-customise-teaser-image img{ max-height:230px; width:auto; max-width:100%; margin:0 auto; box-shadow:5px 5px 5px #777; /*background:transparent url(../img/icons/loading-icon.gif) no-repeat 50% 50%; background-size:contain;*/ } .campaign-selection-customise-teaser-image .campaign-selection-customise-social-blog-teaser-image-bg img{ padding:30%; box-shadow:unset; /*background:transparent url(../img/icons/loading-icon.gif) no-repeat 50% 50%; background-size:contain;*/ } .campaign-selection-customise-social-blog-teaser-image .campaign-selection-customise-social-blog-teaser-image-bg img{ width:100%; padding:30%; box-shadow:unset; box-shadow:none; background:none; max-height: none; } .campaign-selection-customise-teaser-title{ } .campaign-selection-customise-teaser-select{ padding:5px 10px; background:none; border:1px solid #ddd; -webkit-appearance:none; -moz-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position:calc(100% - 15px) calc(1em), calc(100% - 10px) calc(1em), 100% 0; background-size:5px 5px, 5px 5px, 2.5em 2.5em; background-repeat:no-repeat; background-color:#00324D; } .campaign-selection-customise-printed-materials-teaser-variable-text{ margin-bottom:6px; font-size:0.8rem; } .campaign-selection-customise-teaser-checkbox-label{ position:relative; float:left; width:100%; height:36px; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .campaign-selection-customise-teaser-checkbox{ position:absolute; right:0; width:36px; height:36px; border:1px #ddd solid; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; -webkit-transition:background-image .3s, background-color .3s; -moz-transition:background-image .3s, background-color .3s; -o-transition:background-image .3s, background-color .3s; transition:background-image .3s, background-color .3s; } .campaign-selection-customise-teaser-checkbox:checked{ background:#fff url(../img/icons/tick-blue.png) no-repeat 50% 50%; } .campaign-selection-customise-teaser-checkbox-label-text{ float:left; margin-top:3px; } /* Submit buttons */ #campaign-selection-customise-buttons{ } #campaign-selection-customise-buttons #campaign-selection-customise-buttons-submit, #campaign-selection-customise-buttons .campaign-shop-step-heading-wrapper-close{ width:calc(50% - 15px); max-width:400px; padding:8px 10px; margin:0; font-family:'Playfair Display', serif; letter-spacing:2px; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } #campaign-selection-customise-buttons #campaign-selection-customise-buttons-submit{ margin-left:30px; color:#00324D; } #campaign-selection-customise-buttons .campaign-shop-step-heading-wrapper-close{ top:auto; height:auto; background-color:#CE1719; border:none; border-radius:0; cursor:pointer; text-align:center; } /* Hover */ .desktop-device #campaign-selection-customise-buttons #campaign-selection-customise-buttons-submit:hover{ background-color:#bbb; } .desktop-device #campaign-selection-customise-buttons .campaign-shop-step-heading-wrapper-close:hover{ background-color:#B61414; } /***** Cart contents right *****/ #campaignshop-home-basket-contents-right{ right:0; z-index:30; } #campaignshop-home-basket-contents-right.inactive{ } #campaignshop-home-basket-contents-right-items{ margin:0; list-style:none; } .campaignshop-home-basket-contents-right-item{ float:left; height:80px; padding:10px; clear:both; background-color:#01334D; border-bottom:1px solid #fff; transition:width .5s; } .campaignshop-home-basket-contents-right-item-image-wrapper{ width:60px; height:60px; } .campaignshop-home-basket-contents-right-item-text-wrapper{ height:60px; /*width:250px;*/ color:#fff; -webkit-transition:width .3s; -moz-transition:width .3s; -o-transition:width .3s; transition:width .3s; } #campaignshop-home-basket-contents-right.inactive .campaignshop-home-basket-contents-right-item-text-wrapper{ width:0 !important; } .campaignshop-home-basket-contents-right-item-text{ float:left; /*width:250px;*/ padding:0 10px 4px 20px; } .campaignshop-home-basket-contents-right-item-empty{ cursor:pointer; } #campaignshop-home-basket-contents-right-item-basket{ border:none; } .campaignshop-home-basket-contents-right-item-image{ width:60px; max-width:calc(100% - 20px) !important; max-height:calc(100% - 20px); margin:0 auto; } #campaignshop-home-basket-contents-right-item-basket .campaignshop-home-basket-contents-right-item-image{ transform:scale(0.8); -webkit-transition:transform .2s; -moz-transition:transform .2s; -o-transition:transform .2s; transition:transform .2s; } .desktop-device #campaignshop-home-basket-contents-right-item-basket > a:hover .campaignshop-home-basket-contents-right-item-image{ transform:scale(0.9); } .campaignshop-home-basket-contents-right-item-empty-lines-wrapper{ display:block; position:relative; width:27px; height:27px; margin:0 auto; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s; } .campaignshop-home-basket-contents-right-item-empty-line{ position:absolute; background-color:#fff; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s; } .campaignshop-home-basket-contents-right-item-empty-line-vertical{ top:13px; left:3px; width:21px; height:1px; } .campaignshop-home-basket-contents-right-item-empty-line-horizontal{ top:3px; left:13px; width:1px; height:21px; } .desktop-device .campaignshop-home-basket-contents-right-item-empty:hover .campaignshop-home-basket-contents-right-item-empty-lines-wrapper{ } .desktop-device .campaignshop-home-basket-contents-right-item-empty:hover .campaignshop-home-basket-contents-right-item-empty-line{ transform:scale(1.3); } .desktop-device .campaignshop-home-basket-contents-right-item-empty:hover .campaignshop-home-basket-contents-right-item-empty-line-vertical{ /*left:0; width:27px;*/ } .desktop-device .campaignshop-home-basket-contents-right-item-empty:hover .campaignshop-home-basket-contents-right-item-empty-line-horizontal{ /*top:0; height:27px;*/ } #campaignshop-home-basket-contents-right-tab{ position: absolute; top: 170px; left: -230px; transform: rotate(-90deg); width: 400px; height: 60px; padding: 21px 0 0; border-bottom:1px solid #fff; text-align: center; line-height: 100%; background: #D87B11; cursor:pointer; color: #fff; border-radius: 20px 20px 0 0; text-transform: uppercase; letter-spacing: 3px; -webkit-transition:.2s background-color; -moz-transition:.2s background-color; -o-transition:.2s background-color; transition:.2s background-color; } .desktop-device #campaignshop-home-basket-contents-right-tab:hover{ background-color:#999; } @media screen and (max-width:1599px){ #campaignshop-home-basket-contents-right{ right: 0; -webkit-transition: right .3s; -moz-transition: right .3s; -o-transition: right .3s; transition: right .3s; } #campaignshop-home-basket-contents-right.inactive{ right: -80px; } } /***** Basket full messages *****/ #error-basket-full{ } #error-basket-full-message{ color:red; text-align:center; font-size:1.3rem; } /******************************* BASKET CONTENTS PAGE ***************************/ .basket-page-return-link{ font-size: 1.1rem; margin-top: 30px; } #campaign-shop-confirmation-order-info-table{ } .campaign-shop-confirmation-order-info-table-row{ float:left; clear:both; /*margin-bottom:5px;*/ } #campaign-shop-confirmation-order-info-table-row-campaign-start{ /*margin-bottom:20px;*/ } .campaign-shop-confirmation-order-info-table-attr{ width:300px; font-family:'Playfair Display', serif; letter-spacing:1px; } .campaign-shop-confirmation-order-info-table-value{ } #order-summary-buttons .woocommerce-message, .woocommerce-error{ display:none; } #shop-remove-campaign-message-cancel, #shop-empty-basket-message-cancel, #shop-home-emptied-basket-message-close{ float:left; } #shop-remove-campaign-message-confirm, #shop-empty-basket-message-confirm{ float:right; } #shop-home-emptied-basket-mask, #shop-home-emptied-basket-message-wrapper{ display:block; } @media screen and (max-width:1023px){ .basket-page-return-link{ font-size: 0.9rem; } } @media screen and (max-width:767px){ .basket-page-return-link{ margin-top:25px; } } /************* FROM VERSION 1 ************/ #campaign-shop-step-3-basket-contents{ } #campaign-start-month{ width:100%; max-width:200px; margin:0; padding:5px 10px; border:1px solid #00324D; -webkit-appearance:none; -moz-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #00324D 50%), linear-gradient(135deg, #00324D 50%, transparent 50%); background-position:calc(100% - 15px) calc(1em), calc(100% - 10px) calc(1em), 100% 0; background-size:5px 5px, 5px 5px, 2.5em 2.5em; background-repeat:no-repeat; background-color:#fff; } #campaign-start-month.error{ border-color:red; border-width: 2px; } .shop-basket-item{ } .shop-basket-item:nth-of-type(3){ clear:left; } .shop-basket-item-left-wrapper{ min-height:300px; padding:40px 40px 30px; background-color:#01334D; } .shop-basket-item-left{ min-height:200px; text-align:center; } .shop-basket-item-left-image{ float:left; width:100%; margin-bottom:30px; } .shop-basket-item-left-image img{ height:100%; max-height:200px; margin:0 auto; } .shop-basket-item-left-edit, .shop-basket-item-left-remove{ clear:both; color:#fff; text-align:center; } .shop-basket-item-left-edit{ display:block; margin-bottom:5px; } .shop-basket-item-left-remove{ } .desktop-device .shop-basket-item-left-edit:hover, .desktop-device .shop-basket-item-left-remove:hover{ text-decoration:underline; } .shop-basket-item-edit-links{ } .shop-basket-item-edit-links > a{ } .shop-basket-item-left .shop-basket-item-left-edit{ float:right; margin:0 20px 0 0; } .shop-basket-item-left .shop-basket-item-left-remove{ float:left; margin:0 0 0 20px; } .shop-basket-item-left .shop-basket-item-make-change-icon{ float:left; width:auto; height:25px; } .shop-basket-item-left .shop-basket-item-make-change-icon-edit{ float:right; } .shop-basket-item-left .shop-basket-item-make-change-icon-delete{ } .shop-basket-item-right-wrapper{ padding:5px 40px; } .shop-basket-item-right{ } .shop-basket-item-right-title{ } .shop-basket-item-right-items{ } .shop-basket-item-right-items-table{ } .shop-basket-item-right-items-table > tbody{ float:left; width:100%; } .shop-basket-item-right-items-table tr{ /*float:none; width:auto;*/ } .shop-basket-item-right-items-table tr > td{ float:left; padding-bottom:3px; } .shop-basket-item-right-item{ text-transform:capitalize; } .shop-basket-item-right-item-name{ width:56%; font-family:'Playfair Display', serif; } .shop-basket-item-right-item-value{ width:22%; } .shop-basket-item-right-item-price{ width:22%; text-align:right; } .shop-basket-item-right-item-price-total-wrapper{ border-top: 1px solid #01334D; margin-top: 12px; } .shop-basket-item-right-item-price-total-wrapper > .shop-basket-item-right-item-price-total{ margin-top: 10px; font-weight:700; } .shop-basket-item-right-item-price-total-wrapper > .right-content{ float:right; } .shop-basket-item-right-items-order-wrapper{ } .basket-campaign-order-heading{ } .basket-campaign-order-select{ margin:0; padding:5px 10px; border:1px solid #00324D; -webkit-appearance:none; -moz-appearance:none; background-image:linear-gradient(45deg, transparent 50%, #00324D 50%), linear-gradient(135deg, #00324D 50%, transparent 50%); background-position:calc(100% - 15px) calc(1em), calc(100% - 10px) calc(1em), 100% 0; background-size:5px 5px, 5px 5px, 2.5em 2.5em; background-repeat:no-repeat; background-color:#fff; } .basket-campaign-order-select.error{ border-color:red; border-width: 2px; } .shop-basket-item-empty{ } .shop-basket-item-empty .shop-basket-item-left-wrapper{ padding-bottom:30px; background-color:#D1D5D9; } .shop-basket-item-empty .shop-basket-item-left{ } .shop-basket-item-empty-lines-wrapper{ float:none; width:80px; height:80px; margin:0 auto 30px; } .shop-basket-item-empty-line{ position:absolute; top:0; left:0; width:2px; height:2px; background-color:#000; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .shop-basket-item-empty-line-vertical{ left:49%; top:10%; height:80%; } .shop-basket-item-empty-line-horizontal{ top:49%; left:10%; width:80%; } .shop-basket-item-empty-link-wrapper{ position:absolute; bottom:40px; left:0; text-align:center; } .shop-basket-item-empty-link{ color:#01334D; font-size:0.9rem; } /* Hover */ .shop-basket-item-empty .shop-basket-item-left:hover .shop-basket-item-empty-line-vertical{ height:100%; top:0; } .shop-basket-item-empty .shop-basket-item-left:hover .shop-basket-item-empty-line-horizontal{ width:100%; left:0; } #order-summary-buttons .woocommerce{ float:right; width:48%; max-width:330px; } #order-summary-buttons .woocommerce #payment > .place-order{ margin:0; } #place_order{ float:left; width:100%; padding:13px 15px; font-size:0.9rem; text-align:center; line-height:100%; font-family:'Playfair Display', serif; letter-spacing:2px; } #order-summary-buttons .shop-order-campaign, #shop-order-summary-cancel-order, #shop-order-summary-empty-basket{ float:right; width:48%; max-width:330px; padding:13px 15px; font-size:0.9rem; text-align:center; line-height:100%; font-family:'Playfair Display', serif; letter-spacing:2px; } #shop-order-summary-empty-basket{ float:left; } #order-summary-buttons .shop-order-campaign{ background-color:#D1D5D9; } #shop-order-summary-cancel-order{ margin-right:4%; } @media screen and (max-width:1023px){ .shop-basket-item { padding: 10px 30px; } .shop-basket-item-left-wrapper{ width:100%; margin-bottom:20px; } .shop-basket-item-right-wrapper{ width:100%; } } @media screen and (max-width:767px){ .shop-basket-item { width:100%; } } @media screen and (max-width:479px){ .shop-basket-item { width:100%; padding: 10px 0; } .shop-basket-item-right-wrapper{ padding: 5px 10px; } } /*********************************** ACCOUNT PAGES ***************************************/ /***** Main Account page *****/ /*#account-section-2,*/ #account-section-3{ padding-top:150px; } #account-section-2.account-section-restricted{ padding-top:0; } #account-section-3{ padding-bottom:150px; } #account-content-main .page-heading{ margin-bottom:50px; } /* Orders */ .account-order{ } .account-order:nth-of-type(2n+1){ clear:left; } .account-order-teaser-left-wrapper, .account-order-teaser-right-wrapper{ } .account-order-teaser-left-wrapper{ padding-right:7%; } .account-order-teaser-left{ padding:20px; position:relative; min-height:200px; } .account-order-teaser-left > img{ max-width:90%; max-height:90%; } .account-order-teaser-right-wrapper{ padding-right:12%; } .account-order-teaser-right{ } .account-order-blank-lines-wrapper{ float:none; width:60px; height:60px; margin:0 auto 10px; } .account-order-blank-line{ position:absolute; top:0; left:0; width:2px; height:2px; background-color:#000; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .account-order-blank-line-vertical{ left:49%; top:20%; height:60%; } .account-order-blank-line-horizontal{ top:49%; left:20%; width:60%; } .account-order-blank-link-wrapper{ position:absolute; bottom:30px; left:0; text-align:center; } .account-order-blank-link{ color:#01334D; font-size:0.9rem; } /* Hover */ .account-order-blank .account-order-teaser-left:hover .account-order-blank-line-vertical{ height:100%; top:0; } .account-order-blank .account-order-teaser-left:hover .account-order-blank-line-horizontal{ width:100%; left:0; } /* Account details */ .account-section-details-block{ max-width:450px; padding-right:10%; } #account-content-main form{ } #account-content-main .account-details-field-wrapper{ } #account-content-main .account-details-field-wrapper label{ padding-bottom:5px; font-family:'Playfair Display', serif; } #account-content-main .account-details-field{ margin-bottom:15px; padding:7px 15px; border-color:#999; } #account-content-main .account-details-field-address{ margin-bottom:5px; } #account-content-main .account-details-field-error{ color:red; } #account-content-main .account-details-field-success{ color:green; } /* Social Media Admin */ .account-social-media-field-wrapper{ position:relative; margin-bottom:20px; } .account-social-media-field-wrapper > label{ } .account-social-media-field-wrapper > input[type=checkbox]{ position:absolute; top:0; right:0; width:32px; height:100%; } .shop-basket-item-right-wrapper{ padding:5px 30px; } @media screen and (max-width:1299px){ #account-section-1 .shop-basket-item { padding: 10px 50px 10px 0; } #account-section-1 .shop-basket-item-left-wrapper{ width:100%; margin-bottom:20px; } #account-section-1 .shop-basket-item-right-wrapper{ width:100%; } } @media screen and (max-width:1023px){ .shop-basket-item-right-wrapper { padding: 5px 10px; } } @media screen and (max-width:767px){ #account-side-nav{ display:none; } #account-section-1 .shop-basket-item{ padding:10px 0; } #account-section-1 .shop-basket-item-left-wrapper{ width:50%; } #account-section-1 .shop-basket-item-right-wrapper{ width:50%; padding:5px 10px 5px 20px; } } @media screen and (max-width:479px){ #account-section-1 .shop-basket-item-left-wrapper{ width:100%; } #account-section-1 .shop-basket-item-right-wrapper{ width:100%; } } /***************************** CONTACT PAGE ******************************/ .team-member-contact-info .header-user-controls-item-icon{ margin:9px 10px 0 0; } .contact-icon{ float:left; width:20px; margin:11px 12px 0 0; } /* GOOGLE MAP */ #hero-wrapper iframe{ height:400px; width:100%; } @media screen and (max-height:767px){ #hero-wrapper iframe{ height:300px; } } @media screen and (max-width:767px){ #hero-wrapper iframe{ height:300px; } } @media screen and (max-width:479px){ #hero-wrapper iframe{ height:200px; } } /* FONT AWESOME ICONS VIA VISUAL COMPOSER */ .icon-library-icon.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner{ width:16px; height:16px; margin-right:15px; } .icon-library-icon.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner .vc_icon_element-icon{ top:0; left:0; transform:translate(0, 0); } @media screen and (max-width:767px){ #contact-main-content p{ font-size:0.9rem; } } /***************************** BLOG PAGES ******************************/ .archives{ margin:0; padding-right:20px; list-style:none; } .archives li{ } .archives li a{ float:left; margin-bottom:5px; } .page-numbers, .nav-links a{ background-color:#01334D; color:#fff; } .page-numbers.current{ background-color:#999; color:#fff; } body.desktop-device .pagination a:hover{ background-color:#999; } /**************************** CUSTOM SECTIONS PAGES **************************/ #custom-sections-page-intro .section-heading{ letter-spacing:7px; } .custom-sections-page-section-split-section-half{ padding:0 40px; } .custom-sections-page-section .section-heading{ padding-bottom: 40px; border-bottom: 1px solid #ccc; letter-spacing:3px; } .custom-sections-page-section .sub-heading{ font-size:3rem; } .custom-sections-page-section-split-text-image-to-edge .custom-sections-page-section-split-section-half.left-content{ padding-left:0; } .custom-sections-page-section-split-text-image-to-edge .custom-sections-page-section-split-section-half.right-content{ padding-right:0; } .custom-sections-page-section-split-text-image-to-edge .custom-sections-page-section-split-section-text-wrapper .custom-sections-page-section-split-section-half-text{ width:100%; max-width:750px; } .custom-sections-page-section-split-text-image-to-edge-left-image .custom-sections-page-section-split-section-text-wrapper .custom-sections-page-section-split-section-half-text{ float:left; } .custom-sections-page-section-split-text-image-to-edge-left-text .custom-sections-page-section-split-section-text-wrapper .custom-sections-page-section-split-section-half-text{ float:right; } /****************************** MARKETING CONSULTANCY - PORTFOLIO PAGE ******************************/ /* THIS VERSION IS THE FULL WIDTH VERSION body.page-id-3454 #site-header{ margin-bottom:0; } body.page-id-3454 #site-footer{ margin-top:0; } .portfolio-index-item-wrapper{ } .portfolio-index-item-wrapper > .left-content, .portfolio-index-item-wrapper > .right-content{ } .portfolio-index-item-wrapper > .left-content{ position:fixed; top:0; left:-100px; padding:50px; opacity:0; z-index:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } .portfolio-index-item-wrapper > .left-content.active{ left:0; opacity:1; z-index:1; } .portfolio-index-item-wrapper > .left-content.bottom{ position:absolute; top:auto; } .portfolio-index-item-bg{ } .portfolio-index-item-wrapper > .left-content .section-heading{ text-align:center; font-size:4.5rem; font-weight:500; } .portfolio-index-item-link{ display:table; margin:0 auto; } .portfolio-index-item-wrapper > .right-content{ } .portfolio-index-item-wrapper > .right-content img{ min-width:100%; min-height:100%; }*/ /* AND THIS IS THE NON FULL SCREEN VERSION */ /*.portfolio-index-item-wrapper{ position:relative; background-color:#eee; } .portfolio-index-item-wrapper > .left-content, .portfolio-index-item-wrapper > .right-content{ }*/ /* THIS IS THE NEW VERSION - THE SCROLLED VERSION IS THE FULL WIDTH ONE */ /*.portfolio-index-item-wrapper > .left-content{ padding:50px; opacity:0; z-index:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; height:650px; } .scrolled .portfolio-index-item-wrapper > .left-content{ position:fixed; top:120px; right:calc(50% + 50px); } /*body.scrolled-down .portfolio-index-item-wrapper > .left-content{ top:120px; } .portfolio-index-item-wrapper > .left-content.active{ opacity:1; z-index:1; } .scrolled .portfolio-index-item-wrapper > .left-content.active{ right:50%; } body.scrolled-down .portfolio-index-item-wrapper > .left-content.bottom{ position:absolute; top:auto; } .portfolio-index-item-bg{ } .portfolio-index-item-wrapper > .left-content .section-heading{ text-align:center; font-size:4.5rem; font-weight:500; line-height:100%; } .portfolio-index-item-link{ display:table; margin:0 auto; } .portfolio-index-item-bg-letter-wrapper{ z-index:-1; text-align:center; } .portfolio-index-item-bg-letter{ color:#ddd; font-size:25rem; line-height:150px; } .portfolio-index-item-wrapper > .right-content{ background-color:#000; } .portfolio-index-item-wrapper > .right-content img{ min-width:100%; min-height:100%; } @media screen and (max-width:1023px){ .portfolio-index-item-wrapper > .left-content .section-heading{ font-size:3.5rem; } }*/ /* THIS IS THE NEWEST VERSION FROM THE MAJOR PORTAL REDESIGN */ #portfolio-intro .section-heading{ margin:0; font-size:4rem; } .portfolio-index-item-content-text-wrapper{ padding-left:100px; padding-right:0; } .portfolio-index-item-wrapper:nth-of-type(2n) .portfolio-index-item-content-image-wrapper{ float:right; } .portfolio-index-item-wrapper:nth-of-type(2n) .portfolio-index-item-content-text-wrapper{ float:left; padding-left:0; padding-right:100px; } .portfolio-index-item-content-text-wrapper .section-heading{ margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #ccc; font-weight:400; } .portfolio-index-item-content-text-wrapper .sub-heading{ margin-bottom:10px; } .teaser-portfolio-more-work .teaser-text p{ font-size:0.8rem; } @media screen and (max-width:1399px){ .portfolio-index-item-content-text-wrapper{ padding-right:50px; } .portfolio-index-item-wrapper:nth-of-type(2n) .portfolio-index-item-content-text-wrapper{ padding-left:50px; } } @media screen and (max-width:1023px){ .portfolio-index-item-content-text-wrapper{ padding-left: 50px; padding-right: 25px; } .portfolio-index-item-wrapper:nth-of-type(2n) .portfolio-index-item-content-text-wrapper{ padding-left:25px; padding-right:50px; } .portfolio-index-item-content-text-wrapper p{ font-size:0.9rem; } } /***** INDIVIDUAL PORTFOLIO PAGES *****/ /*.portfolio-individual-header-video-section{ } .portfolio-individual-header-video-background{ } .portfolio-individual-header-video-wrapper{ top:54px; left:145px; width:1009px; } .portfolio-individual-header-video-wrapper > video{ } @media screen and (max-width:1299px){ #portfolio-individual-header > .content-width{ max-width:1000px; } .portfolio-individual-header-video-wrapper{ top:42px; left:112px; width:775px; } } @media screen and (max-width:1023px){ #portfolio-individual-header > .content-width{ max-width:750px; } .portfolio-individual-header-video-wrapper{ top:32px; left:84px; width:581px; } }*/ #portfolio-individual-intro .section-heading{ font-weight:400; letter-spacing:7px; } .portfolio-individual-text-section-text.left-content{ padding-right:50px; } .portfolio-individual-text-section-text.right-content{ padding-left:50px; } .portfolio-individual-text-section > .match-children-height{ overflow:hidden; } .portfolio-individual-text-section .section-heading{ font-weight:400; } #portfolio-individual-text-section-1 .section-heading{ padding-bottom:40px; border-bottom:1px solid #ccc; } #portfolio-individual-text-section-2{ margin:80px 0 140px; } #portfolio-individual-full-website-image img{ margin:0 auto; } #portfolio-individual-teasers .section-heading{ margin-bottom:50px; font-weight:400; } .portfolio-individual-text-section-image-to-edge{ } .portfolio-individual-text-section-image-to-edge .portfolio-individual-text-section-text{ } .portfolio-individual-text-section-image-to-edge .portfolio-individual-text-section-text.left-content{ } .portfolio-individual-text-section-image-to-edge .portfolio-individual-text-section-text.right-content{ } .portfolio-individual-text-section-image-to-edge .portfolio-individual-text-section-text-inner{ height:100%; max-width:500px; padding:100px 50px; } .portfolio-individual-text-section-image-to-edge-left-text .portfolio-individual-text-section-text-inner{ float:right; } .portfolio-individual-text-section-image-to-edge-left-image .portfolio-individual-text-section-text-inner{ float:left; } .portfolio-individual-text-section-image-to-edge .portfolio-individual-text-section-image{ } .portfolio-individual-text-section-split .portfolio-individual-text-section-text{ padding:0 100px; } #portfolio-individual-teasers-wrapper{ padding:0 50px; } #portfolio-individual-teasers-wrapper .owl-nav{ left:0; width:100%; } .portfolio-logo{ max-width:70%; margin:0 auto; } #main-text-alternating-two-columns p{ margin:0; } @media screen and (max-width:1023px){ .portfolio-individual-text-section-split .portfolio-individual-text-section-text.left-content{ padding-left:0; padding-right:25px; } .portfolio-individual-text-section-split .portfolio-individual-text-section-text.right-content{ padding-left:25px; padding-right:0; } } /********************************* CASE STUDIES ********************************/ .case-study-individual-section-centered-image img{ margin:0 auto; } /****************************** SEARCH RESULTS PAGE ******************************/ #main-text-search{ } .search-result{ float:left; width:100%; margin-bottom:50px; } .search-result .entry-footer{ } .search-result .entry-header{ } .search-result .entry-title{ } .search-result .entry-title a{ color: #01334D; font-weight: 500; font-size: 1.5rem; } .search-result .entry-title a:hover{ text-decoration: underline; } .search-result .entry-summary{ } .search-result .entry-footer{ margin:0; padding:0; background:none; } .search-result .entry-footer .cat-links{ } .search-result .entry-footer .cat-links a{ float:none; } .search-result a{ /*color:#B5CC03;*/ } .search-result .button-standard{ margin-top:20px; padding:8px 30px; } .desktop-device .search-result .button-standard:hover{ text-decoration:none; } .desktop-device .search-result .cat-links a:hover{ text-decoration:underline; } #main-text-search .no-results .search-form{ display:none; } /*.search-everything-highlight-color{ background-color: transparent !important; }*/ body.desktop-device #main-text-search input.search-submit[type="submit"]:hover, body.desktop-device #main-text-search button.search-submit[type="submit"]:hover{ background-color:#ddd; } /******************************* ONBOARDING ************************************/ #onboarding-mask{ z-index:10; background-color:rgba(0,0,0,0.5); } .onboarding-wrapper{ width:90%; max-width:500px; display:block; margin:0 auto; background:#fff; } /********************************* USER RESTRICTIONS ******************************/ body.user-restrict-page-premier.user-role-advantage-2 #main-wrapper, body.user-restrict-page-premier.user-role-advantage-1 #main-wrapper, body.user-restrict-page-advantage-2.user-role-advantage-1 #main-wrapper, body.user-restrict-section-premier.user-role-advantage-2 #main-wrapper, body.user-restrict-section-premier.user-role-advantage-1 #main-wrapper, body.user-restrict-section-advantage-2.user-role-advantage-1 #main-wrapper, body.user-restrict-section-descendant-premier.user-role-advantage-2 #main-wrapper, body.user-restrict-section-descendant-premier.user-role-advantage-1 #main-wrapper, body.user-restrict-section-descendant-advantage-2.user-role-advantage-1 #main-wrapper{ pointer-events:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; z-index:-1; } .pop-up-message-mask{ z-index:1; background:rgba(0,0,0,0.5); display:none; } /* OVERALL RESTRICTED BODY CLASS */ body.user-restrict-page-premier.user-role-advantage-2 #restrict-user-mask, body.user-restrict-page-premier.user-role-advantage-1 #restrict-user-mask, body.user-restrict-page-advantage-2.user-role-advantage-1 #restrict-user-mask, body.user-restrict-section-premier.user-role-advantage-2 #restrict-user-mask, body.user-restrict-section-premier.user-role-advantage-1 #restrict-user-mask, body.user-restrict-section-advantage-2.user-role-advantage-1 #restrict-user-mask, body.user-restrict-section-descendant-premier.user-role-advantage-2 #restrict-user-mask, body.user-restrict-section-descendant-premier.user-role-advantage-1 #restrict-user-mask, body.user-restrict-section-descendant-advantage-2.user-role-advantage-1 #restrict-user-mask{ display:block; } body.restrict-content #restrict-user-mask{ display:block; } /*#content-restricted-message-wrapper{ z-index:3; display:none; } #content-restricted-message{ top:30%; left:calc(50% - 250px); width:500px; padding:40px 40px 30px; background-color:#fff; pointer-events:all; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } #content-restricted-message a{ -webkit-transition:color .3s; -moz-transition:color .3s; -o-transition:color .3s; :color .3s; } .desktop-device #content-restricted-message a:hover{ color:#01334D; } #content-restricted-message-close{ display:block; width:100px; padding:5px 0; margin:0 auto; border:none; background:#01334D; color:#fff; -webkit-transition:color .3s, background-color .3s; -moz-transition:color .3s, background-color .3s; -o-transition:color .3s, background-color .3s; transition:color .3s, background-color .3s; } .desktop-device #content-restricted-message-close:hover{ background-color:#999; }*/ /*************************** POP UP MESSAGES ***********************/ .pop-up-message-wrapper{ z-index:3; display:none; } .pop-up-message{ top:30%; left:calc(50% - 250px); width:500px; padding:40px 40px 30px; background-color:#fff; pointer-events:all; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } .pop-up-message a{ -webkit-transition:color .3s; -moz-transition:color .3s; -o-transition:color .3s; :color .3s; } .desktop-device .pop-up-message a:hover{ color:#01334D; } .pop-up-message-close{ display:block; width:100px; padding:5px 0; margin:0 auto; border:none; background:#01334D; color:#fff; -webkit-transition:color .3s, background-color .3s; -moz-transition:color .3s, background-color .3s; -o-transition:color .3s, background-color .3s; transition:color .3s, background-color .3s; } .desktop-device .pop-up-message-close:hover{ background-color:#999; } #small-screen-message-mask, #small-screen-message-wrapper{ z-index:20; } @media screen and (max-width:519px){ .pop-up-message{ left: calc(50% - 150px); width:300px; } } /************************ COMING SOON PAGE FOR HIDDEN SECTIONS *************************/ /*.coming-soon.user-role-premier #main-wrapper,*/ .coming-soon.user-role-advantage-1 #main-wrapper, .coming-soon.user-role-advantage-2 #main-wrapper{ padding-top:0; } #coming-soon-heading-text{ color:#fff; } #coming-soon-heading-text .hero-heading{ font-size:4rem; font-weight:500; } /************************ 404 *************************/ .error404 #main-wrapper{ padding-top:0; } .error404 .hero-heading{ font-size:4rem; font-weight:500; } /***************************** USER INACTIVITY TIMEOUT POPUP **************************/ .ina__no_confict_popup_bg{ } .ina-dp-noflict-modal{ } #ina__dp_logout_message_box{ padding-top:0; } .ina-dp-noflict-modal-content{ overflow:hidden; width:80%; max-width:500px; top:30%; } .ina-modal-header{ float:left; width:100%; padding:25px 30px 0; text-align:center; } .ina-dp-noflict-modal-body{ float:left; padding:10px 30px; } .ina-dp-noflict-modal-body p{ } .ina-dp-noflict-modal-body .ina-dp-noflict-btn-container{ } .ina-dp-noflict-modal-body .ina-dp-noflict-btn-container .ina_stay_logged_in, .ina-dp-noflict-modal-body .ina-dp-noflict-btn-container .btn-timeout{ display:table; margin:auto; background-color:#01334D; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } .desktop-device .ina-dp-noflict-modal-body .ina-dp-noflict-btn-container .ina_stay_logged_in:hover, .desktop-device .ina-dp-noflict-modal-body .ina-dp-noflict-btn-container .btn-timeout:hover{ background-color:#666; } #gdpr *{ } #gdpr li{ line-height:160%; } #gdpr table{ margin-bottom:20px; border-collapse:collapse; } #gdpr table tr{ } #gdpr table th{ padding:5px 10px; border:#333 solid 1px; background: #666; color:#fff !important; } #gdpr table th p{ color:#fff !important; } #gdpr table td{ padding:5px 10px; border:#333 solid 1px; vertical-align: top; } #gdpr table p{ padding:0; margin:0; line-height: 160%; } .form-text-small{ margin-top: 20px; font-size:0.9rem; } /****************************************************************** CAMPAIGN SHOP REDESIGN SUMMER 2019 *******************************************************************/ /***** SIDEBAR *****/ #campaignshop-home-basket-contents-right-tab{ background-color:#ad2e89; border-radius: 20px 0px 0 0; } .campaignshop-home-basket-contents-right-item{ background-color:#f3f3f3; } .campaignshop-home-basket-contents-right-item-empty-line{ background-color:#063751; } body.desktop-device .campaignshop-home-basket-contents-right-item:hover .campaignshop-home-basket-contents-right-item-empty-line{ background-color:#ad2e89; } .campaignshop-home-basket-contents-right-item-text{ color:#222220; } .campaignshop-home-basket-contents-right-item-image-wrapper i{ color: #ad2e89; font-size: 2rem; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); width: 100%; text-align: center; } /***** INTRO SECTION *****/ #campaign-shop-steps-teasers{ display: table; float: none; width: auto; margin-left: auto; margin-right: auto; } .campaign-shop-step-teaser{ width:auto; padding: 0; border: none !important; } .campaign-shop-step-teaser-number{ float: left; width: 30px; height: 30px; margin:0; background-color:#d4d4d4; font-family: 'Muli', sans-serif; font-size: 0.8rem; line-height: 30px; font-weight: 700; } .campaign-shop-step-teaser.active .campaign-shop-step-teaser-number{ background-color:#ad2e89; } .campaign-shop-step-teaser-number-text { float: left; width: auto; margin: 0 0 0 10px; font-family: 'Muli', sans-serif; font-size: 0.9rem; color:#828282; letter-spacing: 0px; font-weight: 500; line-height: 30px; } .campaign-shop-step-teaser.active .campaign-shop-step-teaser-number-text{ color:#ad2e89; font-weight: 600; } .campaign-shop-step-teaser-number-text::after{ content:">"; padding: 0 20px; color:#828282; } .campaign-shop-step-teaser:last-of-type .campaign-shop-step-teaser-number-text::after{ content:""; padding: 0; } /***** CAMPAIGN TEASERS - ADDED A NEW CLASS FOR THIS VERSION TO COVER ALL TEASERS *****/ .campaign-shop-19-teaser{ margin-bottom: 100px; } .campaign-shop-19-teaser .campaign-shop-tab-heading{ background: #d4d4d4; margin:0 0 8px; padding: 12px 0; color: #ad2e89; text-align: center; font-size: 1.1rem; } .campaign-shop-19-teaser .campaign-selection-customise-teaser-image{ background-color:#f3f3f3; } .campaign-shop-19-teaser .teaser-image{ padding: 0; background: none; margin-bottom: 8px; } .campaign-shop-19-teaser .teaser-image > img{ margin: 0; width: 100%; height: auto; max-height: none; box-shadow: none; -webkit-transition:opacity .3s; -moz-transition:opacity .3s; -o-transition:opacity .3s; transition:opacity .3s; } .campaign-shop-19-teaser > .campaign-shop-see-campaign-details, .campaign-shop-19-teaser > .campaign-shop-see-campaign-preview{ padding: 17px; color:#fff; font-family: 'Muli', sans-serif; font-size: 0.65rem; letter-spacing: 0px; border:2px solid; } .campaign-shop-19-teaser > .campaign-shop-see-campaign-details{ background-color: #ad2e89; border-color:#ad2e89; margin-bottom: 5px; } .campaign-shop-19-teaser > .campaign-shop-preview-button{ padding: 17px; color: #fff; font-family: 'Muli', sans-serif; font-size: 0.65rem; letter-spacing: 0px; border: 2px solid; background-color:#8294a8; border-color:#8294a8; } body.desktop-device .campaign-shop-19-teaser > .campaign-shop-see-campaign-details:hover, body.desktop-device .campaign-shop-19-teaser > .campaign-shop-see-campaign-preview:hover{ background-color:#fff; color:#04334d; } .campaign-shop-19-teaser select{ background-color:#fff; border:2px solid #ad2e89; } /********************** LEARN HOW TO USE WP PAGE *********************/ .wp-training-center { text-align: center; } #training-intro, #sign-up, #testimonials{ padding: 0 30px; } .training-content { margin: 0 auto 80px; width: 100%; max-width: 400px; } .training-content p{ margin: 30px 0; } .training-line { background-color: black; } /* hero */ #hero-outer-wrapper-training{ margin-top: 100px; overflow: hidden; z-index: 2; position: relative; } #hero-outer-wrapper-training #hero-wrapper-training{ height:100%; max-height: 700px; overflow: hidden; padding-top: 0; position: absolute; z-index: 0; } #hero-outer-wrapper-training #hero-wrapper-training > .content-width{ height:100%; } #hero-training-image-wrapper{ background-position: 50%; width: 100%; height: 100%; background-size: cover; } #hero-outer-wrapper-training #hero-content{ position: relative; top:0; margin-top: 0; padding: 100px 0; } #hero-outer-wrapper-training #hero-text{ margin-bottom: 30px; } #hero-outer-wrapper-training #hero-arrow{ margin-top: 100px; } .hero-mask-purple{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(112,57,89,0.7); z-index:1; max-height: 700px; } #hero-content { position: absolute; /*top: 250px;*/ top:24%; color: white; z-index: 6; } .hero-page-heading { margin-bottom: 40px; font-size: 3rem; font-weight: 500; line-height: 110%; letter-spacing: 1px; } #hero-arrow { margin-top:14%; } #hero-text { margin: auto; } .page-template-template-wp-training #main-wrapper{ padding-top:0px; padding-bottom:0; } /* testimonial */ .testimonial_author{ color: #c16493; } .testimonial-item { margin-bottom: 30px; float: left; width: 50%; padding: 0 30px; } #testimonial-items-wrapper { margin-bottom: 60px; } /* signup links */ #sign-up-training { color: #c16493; font-weight: 800; border-bottom-width: 1px; border-bottom: 1px solid #c16493; padding-bottom: 3px; } .sign-up-training-hero { color: white; font-weight: 800; border-bottom-width: 1px; border-bottom: 1px solid white; padding-bottom: 3px; } /* form styles */ #training-intro .tribe-mini-calendar-wrapper{ margin-bottom: 15px; } .pink-box input[type="email"], .pink-box input[type="text"]{ border: 1px solid #c16493; color: #c16493; width:calc(100% - 5px); } .pink-box .form-full input[type="email"], .pink-box .form-full input[type="text"]{ width:100%; } .pink-box .form-half:nth-of-type(2n) input[type="email"], .pink-box .form-half:nth-of-type(2n) input[type="text"]{ float:right; } #webinarDate{ height: 0; width: 0; overflow: hidden; padding: 0; margin: 0; border: none; opacity: 0; position: absolute; left: 0; } .wpcf7-form-control-wrap.webinar-date{ } #training-intro .tribe-mini-calendar-event .list-date{ margin-right: 0; } #training-intro .tribe-events-adv-list-widget .list-info, #training-intro .tribe-mini-calendar-list-wrapper .list-info{ width:85%; } .wpcf7-form-control-wrap.webinar-date .wpcf7-not-valid-tip{ margin-top: 60px; margin-bottom: 0; } .pink-submit input[type="submit"]{ background-color: #c16493; color: white; text-transform: uppercase; font-weight: 600; float: none; margin: auto; -webkit-transition:background-color .3s; -moz-transition:background-color .3s; -o-transition:background-color .3s; transition:background-color .3s; } .desktop-device .pink-submit input[type="submit"]:hover{ background-color:#01334D; } .pink-box.form-row span.wpcf7-not-valid-tip{ margin-top:3px; font-size: 0.8rem; } .pink-submit .ajax-loader{ position:absolute; } #training-intro div.wpcf7 .ajax-loader{ bottom: -25px; right: calc(50% - 10px); } .form-row { width: 100%; float: left; } .pink-box.form-row{ margin-bottom:20px; } .form-row .form-half { width: 50%; float: left; } .form-row .form-half > p, .form-full > p, form div > p{ margin: 0 !important; } .wpcf7-spinner{ position: absolute; left: 50%; transform: translateX(-50%); margin: 0; bottom: -40px; } .pink-box.form-row .form-full{ margin-bottom:0; } #training-intro .form-row span.wpcf7-form-control-wrap { width: 100%; margin:0; } .page-template-templatestemplate-wp-training-php .wpcf7-validation-errors, .page-template-templatestemplate-wp-training-php .wpcf7-response-output { text-align: center; width: 100%; margin-bottom: 20px; margin-top: 20px; font-size: 0.8rem; } #training-intro .wpcf7-response-output{ margin-top: 30px; } .tribe-mini-calendar-event .list-info h2 { display: none; } .tribe-mini-calendar-event .list-info { padding-top: 12px; } .training-content form > p{ margin-top:0; } #webinar-form-two, #webinar-form-three { display: none; } #wordpress-webinar-add-attendee-wrapper{ cursor:pointer; } #acAdder0 { position: relative; float: none; display:block; width: 40px; height: 40px; margin:0 auto; padding: 0px; border-radius: 40px; border: 2px solid #c16493; background: url("../img/assets/pink-plus.png") no-repeat 50% #fff; background-size: 26px; } #wordpress-webinar-add-attendee-text{ -webkit-transition:color .3s; -moz-transition:color .3s; -o-transition:color .3s; transition:color .3s; } .desktop-device #wordpress-webinar-add-attendee-wrapper:hover #wordpress-webinar-add-attendee-text{ color:#c16493; } /* calendar widget */ .page-template-template-wp-training .widgettitle { color: white; background: #c16493; border-radius: 15px 15px 0px 0px; font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 100; padding: 5px; margin-top:30px; } .tribe-mini-calendar .tribe-events-has-events div[id*=daynum-] a:before { background: #c16493 !important; } .tribe-mini-calendar .tribe-events-has-events div[id*=daynum-] a { color: #c16493 !important; } .tribe-mini-calendar .tribe-events-has-events { background: white !important; } .tribe-mini-calendar .tribe-events-has-events:hover a:hover { background: #c16493 !important; color: white !important; } .tribe-mini-calendar .tribe-events-has-events.tribe-events-past div[id*="daynum-"] a{ pointer-events: none; } .tribe-mini-calendar td { background: #f6f6f6 !important; border-color: white !important; } .tribe-mini-calendar-nav span { color: black !important; } .tribe-mini-calendar-no-event { color: #c9c9c9 !important; } .tribe-mini-calendar-event .list-date { background: #c16493 !important; } body.single-tribe_events .tribe-events-cal-links a.tribe-events-gcal, body.single-tribe_events .tribe-events-cal-links a.tribe-events-ical { display: none !important; } p.tribe-events-back { display: none !important; } #training-intro .tribe-mini-calendar-event{ padding-bottom: 30px; margin-bottom: 40px; } #youtubeVideo { display: none; } /***** TUTORIAL VIDEO SECTION *****/ #sign-up .training-content{ max-width: 680px; } #sign-up .center-inner > p{ margin-bottom: 50px; } #sign-up .pink-box .sign-up-email{ margin-bottom:40px; } #sign-up .pink-box input[type="email"], #sign-up .pink-box input[type="text"]{ max-width: 400px; margin-bottom:3px; } #sign-up div.wpcf7 .ajax-loader{ bottom: 0; right: calc(50% - 10px); } #sign-up div.wpcf7-mail-sent-ok{ display:none !important; } #sign-up div.wpcf7-response-output{ max-width: 400px; margin: auto; float: none; overflow: hidden; } /***** TESTIMONIALS *****/ #testimonials .page-heading{ margin-bottom:50px; } @media screen and (max-width:715px){ #hero-content{ top: 20%; } } @media screen and (max-width:1024px){ #hero-content { top: 17%; } .page-template-template-wp-training .scroll-down { /*display: none;*/ } } @media screen and (max-width:910px){ #hero-content { top: 19%; } #hero-arrow { margin-top: 17%; } } @media screen and (max-width:768px){ .hero-page-heading { /*margin-bottom: 0px !important;*/ } #hero-content { top: 13%; } } @media screen and (max-width:767px){ #hero-outer-wrapper-training{ margin-top: 50px; } #hero-outer-wrapper-training #hero-arrow{ padding-bottom: 0; } .testimonial-item > p{ font-size: 0.9rem; } .testimonial-item > .testimonial_author{ font-size: 0.9rem; } } @media screen and (max-width:715px){ #hero-text { margin-bottom: 30px; float: none; display: block; overflow: hidden; } .hero-page-heading { font-size: 2.6rem; /*margin-bottom: 20px;*/ } } @media screen and (max-width:600px){ #hero-text { padding-bottom: 15px; } #hero-arrow { margin-top: 16%; } .testimonial-item{ width:100%; margin-bottom: 50px; } } @media screen and (max-width:500px){ #hero-arrow { display: none; } .sub-text, .sign-up-button { display: none; } #hero-content { top: 15%; } .page-template-template-wp-training .hero-page-heading { font-size: 2.4rem; } } @media screen and (max-width:479px){ .page-template-template-wp-training .hero-page-heading{ font-size:2rem; } #hero-outer-wrapper-training #hero-text{ width: 90%; } #hero-outer-wrapper-training #hero-text p{ font-size: 0.9rem; } #training-intro .page-heading{ font-size: 1.8rem; } .page-template-template-wp-training .widgettitle{ font-size: 1.3rem; } .training-content p{ font-size: 0.9rem; } } /* marketing page testimonial carousel - 25/09/19 */ .slick-prev, .slick-next { position: relative !important; } .slick-dots { margin-left: 42% !important; } .slick-carousel-container-3 .slick-list.draggable { max-width:900px; } @media screen and (max-width:800px){ .slick-carousel-container-3 .slick-list.draggable { width:700px; } } @media screen and (max-width:600px){ .slick-carousel-container-3 .slick-list.draggable { width:500px; } .slick-dots { margin-left: 36% !important; } } @media screen and (max-width:479px){ .slick-carousel-container-3 .slick-list.draggable { width:400px; } .slick-dots { margin-left: 32% !important; } } /*********************************************************************************************** CHANGES 23-2-2021 - MAINLY FOR THE HOME PAGE REDO ************************************************************************************************/ /********************************** RESPONSIVE CHANGES FOR HEADER ***********************************/ @media screen and (max-width:490px){ #header-user-controls-item-account, #header-user-controls-item-search, #search-bar{ display: none; } } @media screen and (max-width:420px){ #header-top-site-logo img{ width: 230px; } } @media screen and (max-width:360px){ #header-top-site-logo img{ width: 180px; } } /********************************** LOADING SCREEN ***********************************/ #loading-screen-wrapper{ display: flex; justify-content: center; z-index: 10; } #loading-screen-contents{ display: block; margin: auto; text-align: center; opacity: 0; transform: scale(0.9); -webkit-transition: all 3s; -moz-transition: all 3s; -o-transition: all 3s; transition: all 3s; } #loading-screen-contents img{ margin: auto; width: 40px; } #loading-screen-contents h2{ font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 100; } #loading-screen-contents p{ font-size: 0.9rem; } /********************************** HEADER TWEAKS ***********************************/ body.page-template-template-home-page-2021 #site-header-sticky{ background: none; } body.page-template-template-home-page-2021 #header-top-wrapper{ background: none; -webkit-transition: background-color .3s; -moz-transition: background-color .3s; -o-transition: background-color .3s; transition: background-color .3s; } body.page-template-template-home-page-2021 #header-top-wrapper > .content-width{ background: none; } body.page-template-template-home-page-2021 #main-nav-dropdown-mask{ transform: translateY( calc(-100% - 100px) ); } body.page-template-template-home-page-2021 #main-nav-dropdown-mask.active{ transform: translateY(0); } body.page-template-template-home-page-2021 #main-nav-dropdown-wrapper{ box-shadow: none; } body.page-template-template-home-page-2021 #main-menu > li > a{ color: #fff; } body.page-template-template-home-page-2021 .menu-toggle-line{ background-color: #fff; } body.page-template-template-home-page-2021 .header-user-controls-item img{ /*background-color: #fff;*/ } .header-user-controls-item-icon-reverse{ position: absolute; opacity: 0; } body.page-template-template-home-page-2021 .header-user-controls-item-icon{ position: absolute; opacity: 0; } body.page-template-template-home-page-2021 .header-user-controls-item-icon-reverse{ position: relative; opacity: 1; } body.scrolled-down.page-template-template-home-page-2021 .header-user-controls-item-icon{ position: relative; opacity: 1; } body.scrolled-down.page-template-template-home-page-2021 .header-user-controls-item-icon-reverse{ position: absolute; opacity: 0; } /***** SCROLLED DOWN AND MENU ACTIVE VERSION *****/ /*body.page-template-template-home-page-2021.scrolled-down #site-header-sticky, body.page-template-template-home-page-2021.menu-active #site-header-sticky{ background: #fff; }*/ body.page-template-template-home-page-2021.scrolled-down #header-top-wrapper, body.page-template-template-home-page-2021.menu-active #header-top-wrapper{ background: #fff; } /*body.page-template-template-home-page-2021.scrolled-down #header-top-wrapper > .content-width, body.page-template-template-home-page-2021.menu-active #header-top-wrapper > .content-width{ background: #fff; }*/ /*body.page-template-template-home-page-2021.scrolled-down #main-nav-dropdown-mask, /*body.page-template-template-home-page-2021.menu-active #main-nav-dropdown-mask{ transform: translateY( calc(-100% - 100px) ); }*/ body.page-template-template-home-page-2021.scrolled-down #main-nav-dropdown-wrapper, body.page-template-template-home-page-2021.menu-active #main-nav-dropdown-wrapper{ box-shadow: 0 2px 10px #969999; } body.page-template-template-home-page-2021.scrolled-down #main-menu > li > a, body.page-template-template-home-page-2021.menu-active #main-menu > li > a{ color: #014365; } body.page-template-template-home-page-2021.scrolled-down .menu-toggle-line, body.page-template-template-home-page-2021.menu-active .menu-toggle-line{ background-color: #014365; } @media screen and (max-width: 900px){ body.page-template-template-home-page-2021 #header-top-wrapper{ background: #fff; } body.page-template-template-home-page-2021 #main-nav-dropdown-wrapper{ box-shadow: 0 2px 10px #969999; } body.page-template-template-home-page-2021 #main-menu > li > a{ color: #014365; } body.page-template-template-home-page-2021 .menu-toggle-line{ background-color: #014365; } } /********************************** HOME PAGE ***********************************/ /***** RE-USED *****/ .home-2021-section h2, .home-2021-section h3{ margin-bottom: 20px; color: #014365; } .home-2021-section-intro p{ font-size: 0.9rem; } .home-2021-section .button-standard, .gem-portal-page-section .button-standard{ /*padding: 8px 80px;*/ margin-bottom: 10px; box-shadow: 4px 3px 6px #969999; /*padding: 6px 72px;*/ padding: 3px 50px; background-color: #014365; border: 3px solid #014365; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .desktop-device .home-2021-section .button-standard:hover, .desktop-device .gem-portal-page-section .button-standard:hover{ background-color: #fff; color: #014365; } .home-2021-section .button-standard.button-white, .gem-portal-page-section .button-standard.button-white{ background-color: #fff; border-color: #fff; color: #014365; box-shadow: none; } .desktop-device .home-2021-section .button-standard.button-white:hover, .desktop-device .gem-portal-page-section .button-standard.button-white:hover{ background-color: #014365; color: #fff; } @media screen and (max-width: 400px){ .home-2021-section-intro p{ font-size: 0.8rem; } } .top-gap-border{ padding-top: 20px; border-top: 2px solid #014365; } /***** CAROUSELS *****/ .arrow-wrapper{ } .arrow-wrapper:before, .arrow-wrapper::before{ } .arrow-wrapper .arrow-line{ position: absolute; height: 3px; widows: 30px; background-color: #014365; } .arrow-wrapper .arrow-line-1{ } .arrow-wrapper .arrow-line-2{ } .arrow-wrapper-large{ height: 60px; width: 60px; } .arrow-wrapper-large:before, .arrow-wrapper-large::before{ } .arrow-wrapper-large .arrow-line{ } .arrow-wrapper-large .arrow-line-1{ top: 20px; } .arrow-wrapper-large .arrow-line-2{ top: 39px; } .arrow-wrapper-left{ } .arrow-wrapper-left:before, .arrow-wrapper-left::before{ } .arrow-wrapper-left .arrow-line{ left: 0; } .arrow-wrapper-left .arrow-line-1{ transform: rotate( -45deg ); } .arrow-wrapper-left .arrow-line-2{ transform: rotate( 45deg ); } .arrow-wrapper-right{ } .arrow-wrapper-right:before, .arrow-wrapper-right::before{ } .arrow-wrapper-right .arrow-line{ right: 0; } .arrow-wrapper-right .arrow-line-1{ transform: rotate( 45deg ); } .arrow-wrapper-right .arrow-line-2{ transform: rotate( -45deg ); } .arrow-wrapper-home-carousel{ position: absolute !important; top: 50%; } .arrow-wrapper-home-carousel:before, .arrow-wrapper-home-carousel::before{ content: none; } .arrow-wrapper-home-carousel .arrow-line{ position: absolute; height: 3px; width: 30px; } .arrow-wrapper-home-carousel .arrow-line-1{ } .arrow-wrapper-home-carousel .arrow-line-2{ } .arrow-wrapper-home-carousel.arrow-wrapper-large{ } .arrow-wrapper-home-carousel.arrow-wrapper-left{ left: 0; } .arrow-wrapper-home-carousel.arrow-wrapper-left .arrow-line{ left: 0; } .arrow-wrapper-home-carousel.arrow-wrapper-right{ right: 0; } .arrow-wrapper-home-carousel.arrow-wrapper-right .arrow-line{ right: 0; } /***** SCROLL ARROWS *****/ .scroll-down-arrows-wrapper{ position: absolute; bottom: 10%; left: 0; width: 37%; } .scroll-down-arrows-wrapper-inner{ float: right; width: 100%; max-width: calc(37vw - ( (100vw - 1300px ) / 2 ) ); } .scroll-down-arrows{ position: relative; bottom: 0; left: 0; height: 50px; width: 50px; animation: scrollArrowsBounce 5s infinite; /*animation-timing-function: step-start(1,ease-in) step-start(2,ease-out);*/ } .scroll-down-arrows .scroll-down-arrow-line{ background-color: #014365; position: absolute; width: 27px; height: 3px; } .scroll-down-arrows .scroll-down-arrow-line.upper{ top: 17px; } .scroll-down-arrows .scroll-down-arrow-line.lower{ top: 32px; } .scroll-down-arrows .scroll-down-arrow-line.left{ transform: rotate( 45deg ); left: 2px; } .scroll-down-arrows .scroll-down-arrow-line.right{ transform: rotate( -45deg ); left: 19px; } @keyframes scrollArrowsBounce{ 0% { bottom: 0; } 10% { bottom: 20px; } 20% { bottom: 0; } 100% { bottom: 0; } } /***** HOME INTRO *****/ #home-intro-section{ /*min-height: 800px;*/ /***** THIS IS TEMPORARY TO GIVE THE SECTION SOME PROPER HEIGHT *****/ } /***** LEFT SIDE *****/ #home-intro-section-left{ width: 37%; height: auto; margin: auto; } #home-intro-section-left-content{ float: right; width: 100%; max-width: calc(37vw - ( (100vw - 1300px ) / 2 ) ); padding-right: 50px; } #home-intro-section-left-content h1, #home-intro-section-left-content h2{ padding-top: 20px; border-top: 3px solid #014365; color: #014365; } #home-intro-section-left-content h1 .section-heading, #home-intro-section-left-content h2 .section-heading{ margin-bottom: 25px; } #home-intro-section-left-content p{ margin-bottom: 30px; color: #014365; } #home-intro-section-left-content .button-full-width{ /*padding: 10px;*/ padding: 7px 10px; background-color: #014365; border: 3px solid #014365; box-shadow: 4px 3px 6px #969999; font-family: 'Muli', sans-serif; } .desktop-device #home-intro-section-left-content .button-full-width:hover{ color: #014365; background-color: #fff; } /***** RIGHT SIDE *****/ #home-intro-section-right{ width: 63%; padding: 100px 0 0 100px; background: #014365 url(../img/assets/homepage-blue-background.jpg) no-repeat center; background-size: cover; } #home-intro-section-right-carousel-wrapper{ display: flex; height: 100%; overflow: hidden; padding: 40px 13% 100px 0; margin-bottom: 10px; } #home-intro-section-right-carousel-wrapper .slick-list, #home-intro-section-right-carousel-wrapper .slick-track, #home-intro-section-right-carousel-wrapper .slick-slide > div{ /*height: 100%;*/ } #home-intro-section-right-carousel-wrapper .slick-list{ overflow: visible; width: 100%; } #home-intro-section-right-carousel-wrapper .slick-dots{ top: 0; left: 0; bottom: auto; width: auto; margin: 0 !important; } #home-intro-section-right-carousel-wrapper .slick-dots li{ margin: 0 12px 0 0; width: 14px; height: 14px; } #home-intro-section-right-carousel-wrapper .slick-dots button{ width: 14px; height: 14px; padding: 0; } #home-intro-section-right-carousel-wrapper .slick-dots button:before, #home-intro-section-right-carousel-wrapper .slick-dots button::before{ content: ""; width: 14px; height: 14px; border: 1px solid #fff; opacity: 1; } #home-intro-section-right-carousel-wrapper .slick-dots li.slick-active{ } #home-intro-section-right-carousel-wrapper .slick-dots li.slick-active button{ } #home-intro-section-right-carousel-wrapper .slick-dots li.slick-active button:before, #home-intro-section-right-carousel-wrapper .slick-dots li.slick-active button::before{ background-color: #fff; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel{ top: auto; bottom: 10px; width: 30px; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel.arrow-wrapper-left{ } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel.arrow-wrapper-right{ right: auto; left: 50px; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel .arrow-line{ background-color: #fff; height: 2px; width: 25px; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel .arrow-line-1{ top: 21px; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel .arrow-line-2{ top: 38px; } .home-2021-teaser-wrapper{ /*height: 100%;*/ } .home-2021-teaser{ height: 550px; display: flex; align-items: flex-end; background-repeat: no-repeat; background-position: center; background-size: cover; margin: 0 40px 0px 0; box-shadow: 8px 8px 10px #111; } .home-2021-teaser-content{ position: relative; padding: 30px 40px; color:#fff; } .home-2021-teaser-wrapper .horizontal-line{ float: left; width: 50px; height: 1px; margin-bottom: 20px; background-color: #fff; } .home-2021-teaser-wrapper .small-heading{ font-weight: 400; font-size: 1.7rem; } .home-2021-teaser-content p{ font-size: 0.85rem; } .home-2021-teaser-wrapper .button-with-arrow{ color:#fff; } .home-2021-teaser-wrapper .button-arrow{ } .home-2021-teaser-wrapper .button-arrow .button-arrow-line{ background-color:#fff; } .home-2021-teaser-wrapper .button-arrow .button-arrow-end{ color:#fff; } @media screen and (max-width: 1400px){ #home-intro-section-right-carousel-wrapper{ padding-right: 10%; } } @media screen and (max-width: 1399px){ #home-intro-section .scroll-down-arrows{ left: 15px; } } @media screen and (max-width: 1200px){ #home-intro-section-right{ padding-left: 7%; } .home-2021-teaser-content{ padding: 25px 30px; } .home-2021-teaser-wrapper .small-heading{ font-size: 1.4rem; } .home-2021-teaser-content p{ font-size: 0.8rem; } } @media screen and (max-width: 1023px){ #home-intro-section-right{ padding-left: 5%; } .home-2021-teaser{ margin-right: 30px; } } @media screen and (max-width: 900px){ #home-intro-section-left{ padding-top: 50px; } #home-intro-section-right{ padding-top: 150px; } } @media screen and (max-width: 767px){ #home-intro-section{ flex-direction: column; } #home-intro-section .scroll-down-arrows-wrapper{ display: none; } #home-intro-section-left{ width: 100%; margin: 100px 0; } #home-intro-section-left-content{ max-width: 500px; padding: 0 5%; float: none; margin: auto; } #home-intro-section-left-content h1 .section-heading, #home-intro-section-left-content h2 .section-heading{ font-size: 2.3rem; } #home-intro-section-right{ width: 100%; padding-top: 100px; } #home-intro-section-right-carousel-wrapper .arrow-wrapper-home-carousel{ bottom: 0; } } /********************************** HOME GEM SECTION ***********************************/ #home-gem-section > div{ border-bottom: 2px solid #014365; } /********************************** HOME CONTENT LIBRARY SECTION ***********************************/ #home-content-library-section{ } #home-content-library-section .slick-track{ display: flex; } #home-content-library-section .slick-slide{ float: none; height: auto; } #home-content-library-section .slick-slide > div{ height: 100%; } .home-2021-blog-teaser-wrapper{ height: 100%; margin-bottom: 0; } .home-2021-blog-teaser-wrapper > .teaser-content{ padding: 0 7% 30px; } .home-2021-blog-teaser-wrapper .teaser-image{ padding-bottom: 25px; border-bottom: 2px solid #014365; overflow: visible; } .home-2021-blog-teaser-wrapper .teaser-image a{ position: relative; float: left; width: 100%; box-shadow: 4px 3px 6px #969999; overflow: hidden; } .home-2021-blog-teaser-wrapper .teaser-image img{ /*max-width: 326px;*/ transform: none; } .home-2021-blog-teaser-wrapper .teaser-image .image-overlay{ background-color: #014365; } .home-2021-blog-teaser-wrapper .teaser-text{ padding: 10px 0 0; margin-bottom: 0; } .home-2021-blog-teaser-wrapper .teaser-text-heading-text{ line-height: 125%; } .home-2021-blog-teaser-wrapper .teaser-text-heading-text a{ font-family: 'Muli', sans-serif; font-size: 1.1rem; color: #014365; } .home-2021-blog-teaser-wrapper .teaser-text-content{ } .home-2021-blog-teaser-wrapper .teaser-text-content p{ line-height: 145%; } #home-content-library-section .arrow-wrapper-home-carousel{ top: 20%; } .button-with-arrow{ float: left; color: #014365; font-size: 0.8rem; letter-spacing: 2px; } .button-with-arrow .button-arrow{ position: relative; float: right; width: 50px; margin-left: 10px; -webkit-transition: width .3s; -moz-transition: width .3s; -o-transition: width .3s; transition: width .3s; } .button-arrow-line{ position: absolute; top: 10px; height: 1px; width: 85%; background: #014365; } .button-arrow-end{ float: right; font-size: 0.75rem; color: #014365; } .desktop-device .button-with-arrow:hover .button-arrow{ width: 60px; } #home-content-library-section .button-with-arrow{ position: absolute; bottom: 0; left: 7%; } @media screen and (max-width: 700px){ #home-content-library-section .slick-slider{ padding: 0 40px; } } /********************************** HOME TOOLKIT SECTION ***********************************/ #home-toolkit-section > div{ background-color: #eff4f7; border-bottom: 2px solid #014365; } #toolkit-featured .sub-heading{ margin-bottom: 13px; font-family: 'Muli', sans-serif; font-weight: 400; } #toolkit-featured-article-wrapper{ width: calc(100% - 388px); } #toolkit-featured-article-wrapper .image-wrapper{ } #toolkit-featured-article-wrapper .image-wrapper img{ width: 100%; } #toolkit-featured-article-wrapper .image-overlay{ } #toolkit-featured-article-wrapper .teaser-image-video-overlay{ } #toolkit-featured-article-wrapper .image-wrapper .teaser-image-triangle-overlay-image{ width: 40px; } #toolkit-featured-article-wrapper .sub-heading{ margin-bottom: 5px; } #toolkit-latest-articles-wrapper{ width: 330px; } .home-2021-latest-article-wrapper{ } .home-2021-latest-article-wrapper .image-wrapper{ } .home-2021-latest-article-wrapper .image-wrapper img{ width: 100%; } .home-2021-latest-article-wrapper .image-wrapper .image-overlay{ } .home-2021-latest-article-wrapper .image-wrapper .teaser-image-triangle-overlay-wrapper{ } .home-2021-latest-article-wrapper .image-wrapper .teaser-image-triangle-overlay-image{ width: 40px; } .home-2021-latest-article-wrapper .image-wrapper .teaser-image-video-overlay{ } .home-2021-latest-article-wrapper h4{ } .home-2021-latest-article-wrapper .link-text{ color: #014365; font-weight: 500; font-size: 0.9rem; } @media screen and (max-width:1200px){ #toolkit-featured-article-wrapper{ width: calc(100% - 330px); } #toolkit-latest-articles-wrapper{ width: 280px; } } @media screen and (max-width:1023px){ #toolkit-featured-article-wrapper{ width: calc(100% - 300px); } #toolkit-featured-article-wrapper .sub-heading{ font-size: 1.3rem; } #toolkit-latest-articles-wrapper{ width: 250px; } } @media screen and (max-width:800px){ #home-toolkit-section > div{ padding-left: 60px; padding-right: 60px; } #toolkit-articles{ flex-direction: column; } #toolkit-featured-article-wrapper{ width: 100%; } #home-toolkit-section .home-2021-section-intro{ margin-bottom: 20px; } #toolkit-latest-articles-wrapper{ width: 100%; } .home-2021-latest-article-wrapper .link-text{ font-size: 1.1rem; } } @media screen and (max-width:479px){ #home-toolkit-section > div{ padding-left: 50px; padding-right: 50px; } .home-2021-latest-article-wrapper .link-text{ font-size: 1rem; } } @media screen and (max-width:479px){ #home-toolkit-section > div{ padding-left: 30px; padding-right: 30px; } .home-2021-latest-article-wrapper .link-text{ font-size: 0.9rem; } } /********************************** HOME TRAINING WEBINAR SECTION ***********************************/ #home-training-webinar-section{ } #training-webinar-image-wrapper{ width: calc(100% - 480px); } #training-webinar-image-wrapper img{ } #training-webinar-content-wrapper{ width: 100%; max-width: 500px; background-color: #014365; padding: 45px 55px 40px; margin: 0 50px 100px 0; box-shadow: 4px 3px 6px #555; } #training-webinar-heading-wrapper{ margin-bottom: 20px; border-top: 2px solid #fff; padding-top: 20px; } #training-webinar-heading-wrapper .section-heading{ max-width: 220px; margin-bottom: 0; color: #fff; } #training-webinar-heading-wrapper img{ height: fit-content; } #training-webinar-content-wrapper .home-2021-section-intro{ } #training-webinar-content-wrapper .home-2021-section-intro p{ } #training-webinar-content-wrapper .button-standard{ /*box-shadow: none;*/ } .desktop-device #training-webinar-content-wrapper .button-standard:hover{ /*background-color: #999;*/ } @media screen and (max-width:1200px){ #training-webinar-content-wrapper{ margin-bottom: 50px; } } @media screen and (max-width:950px){ #training-webinar-image-wrapper{ bottom: auto; top: 0; left: 20px; width: 80%; } #training-webinar-content-wrapper{ width: calc(100% - 80px); margin: 40% 20px 20px 0; } } @media screen and (max-width:767px){ #training-webinar-content-wrapper{ max-width: 450px; } #training-webinar-content-wrapper .home-2021-section-intro p{ font-size: 0.83rem; } } @media screen and (max-width:479px){ #training-webinar-image-wrapper{ left: 0; width: 90%; } #training-webinar-heading-wrapper .section-heading{ max-width: 180px; line-height: 130%; font-size: 1.6rem; } #training-webinar-content-wrapper{ margin-right: 0px; width: calc(100% - 20px); padding: 40px 40px 30px; } #training-webinar-content-wrapper .button-standard{ padding: 8px 23%; } } @media screen and (max-width:400px){ #training-webinar-content-wrapper{ padding: 30px 30px 20px; } #training-webinar-heading-wrapper img{ max-width: 60px; } #training-webinar-content-wrapper .home-2021-section-intro p { font-size: 0.8rem; } #training-webinar-content-wrapper .button-standard{ font-size: 0.8rem; } } /*************************************************************************************************************** GEM PORTAL PAGE ***************************************************************************************************************/ /***** RE-USED *****/ .section-body-text-wrapper{ } .section-body-text-wrapper p{ font-size: 0.85rem; } @media screen and (max-width: 479px){ .section-body-text-wrapper p{ font-size: 0.8rem; } } /***** HERO SECTION ADDITIONS *****/ #hero-outer-wrapper-gem-portal{ position: relative; margin-top: 100px; z-index: 1; background-position: center; background-repeat: no-repeat; background-size: cover; } #hero-outer-wrapper-gem-portal #hero-content{ position: relative; width: 100%; max-width: 400px; background-color: #014365; padding: 200px 50px 120px 50px; margin-bottom: 120px; } #hero-outer-wrapper-gem-portal .hero-page-heading{ border-top: 2px solid #fff; padding-top: 30px; margin-bottom: 20px; } #hero-outer-wrapper-gem-portal #hero-text{ margin-bottom: 25px; padding-bottom: 0; } #hero-outer-wrapper-gem-portal #hero-text p{ margin-bottom: 0; font-size: 0.85rem; } #hero-outer-wrapper-gem-portal .button-standard{ width: 100%; /*padding: 8px 10px;*/ text-align: center; } .desktop-device #hero-outer-wrapper-gem-portal .button-standard:hover{ /*background-color: #999;*/ } @media screen and (max-width: 479px){ #hero-outer-wrapper-gem-portal #hero-content{ padding: 120px 35px 100px 35px; } #hero-outer-wrapper-gem-portal .hero-page-heading{ font-size: 2rem; } #hero-outer-wrapper-gem-portal #hero-text p{ font-size: 0.8rem; } } /***** MAIN PAGE STRUCTURE ELEMENTS *****/ .page-template-template-gem-portal #main-wrapper{ padding-top: 0; } #page-content-wrapper-gem-portal{ } /***** INTRO SECTION *****/ #gem-portal-intro-section{ } #gem-portal-intro-section .section-heading{ margin-bottom: 20px; } #gem-portal-intro-section .section-body-text-wrapper{ margin-bottom: 25px; } #gem-portal-intro-section .section-body-text-wrapper p{ } #gem-portal-intro-section .button-standard{ width: 100%; max-width: 270px; text-align: center; } @media screen and (max-width: 1023px){ #gem-portal-intro-section .section-heading, #gem-portal-faq-section .section-heading{ font-size: 3rem; } } @media screen and (max-width: 767px){ #gem-portal-intro-section .section-heading, #gem-portal-faq-section .section-heading{ font-size: 2.5rem; } } @media screen and (max-width: 480px){ #gem-portal-intro-section .section-heading, #gem-portal-faq-section .section-heading{ font-size: 2.2rem; } } @media screen and (max-width: 400px){ #gem-portal-faq-section .section-heading{ font-size: 2rem; } } /***** FAQS SECTION *****/ #gem-portal-faq-section > div{ background-color: #eff4f7; border-top: 2px solid #014365; } #gem-portal-faq-section .section-heading{ } #gem-portal-faq-section .section-body-text-wrapper{ margin-bottom: 30px; } #gem-portal-faq-section .section-body-text-wrapper p{ } #faq-items-wrapper{ margin-bottom: 30px; } .faq-item-wrapper{ border-top: 2px solid #014365; } .faq-item-question-wrapper{ position: relative; padding: 20px 0; } .faq-item-question-wrapper .sub-heading{ width: calc(100% - 50px); margin: 0; } .faq-status-icon-wrapper{ position: absolute; top: calc(50% - 18px); right: 0; width: 36px; height: 36px; border-radius: 50%; background-color: #014365; border: 2px solid #014365; cursor: pointer; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .faq-status-icon-line{ position: absolute; background-color: #eff4f7; opacity: 1; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .faq-status-icon-line-vertical{ width: 2px; height: 20px; left: calc(50% - 1px); top: calc(50% - 10px); } .faq-status-icon-line-horizontal{ width: 20px; height: 2px; top: calc(50% - 1px); left: calc(50% - 10px); } .faq-status-icon-line-horizontal p{ padding-bottom: 20px; margin: 0; font-size: 0.85rem; } .desktop-device .faq-status-icon-wrapper:hover{ background-color: #eff4f7; } .desktop-device .faq-status-icon-wrapper:hover .faq-status-icon-line{ background-color: #014365; } .faq-item-wrapper.active .faq-status-icon-wrapper{ background-color: #eff4f7; } .faq-item-wrapper.active .faq-status-icon-line{ background-color: #014365; } .faq-item-wrapper.active .faq-status-icon-line-vertical{ opacity: 0; } .faq-item-answer-wrapper{ display: none; } .faq-item-answer-wrapper p{ font-size: 0.85rem; } @media screen and (max-width: 767px){ .faq-item-question-wrapper .sub-heading{ font-size: 1.4rem; } } @media screen and (max-width: 479px){ .faq-item-question-wrapper .sub-heading{ font-size: 1.2rem; } } @media screen and (max-width: 400px){ .faq-item-question-wrapper .sub-heading{ font-size: 1.1rem; } } /***** BACK TO TOP LINK *****/ #back-to-top-section-gem-portal{ display: flex; justify-content: center; } .back-to-top-link{ position: relative; padding-top: 70px; cursor: pointer; } .back-to-top-link-text{ text-transform: uppercase; color: #01334D; letter-spacing: 2px; font-size: 0.9rem; } .back-to-top-line-wrapper{ width: 2px; height: 60px; position: absolute; left: calc(50% - 1px); top: 0; } .back-to-top-line{ width: 100%; height: 0; position: absolute; float: left; background-color: #ccc; animation: backToTopLine 3s infinite; } @keyframes backToTopLine{ 0% { bottom: 0; top: auto; height: 0; } 49.9999% { bottom: 0; top: auto; height: 100%; } 50% { bottom: auto; top: 0; height: 100%; } 99.9999% { bottom: auto; top: 0; height: 0; } 100% { top: 0; bottom: auto; height: 0; } }