/* Table of Content ================================================== #Font-Face #Site Styles #Media Queries */ /* #Font-Face ================================================== */ /* #Site Styles ================================================== */ @font-face {font-family: "quincy-cf"; src: url("../fonts/quincy-cf/quincy-cf-bold.woff2?family=quincy-cf") format("woff2");} /* ### general ### */ * { margin: 0; padding: 0; box-sizing: border-box; /*-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;*/} html, body { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.45; color: black; } body { background: #fff; } label, input, select, textarea, button { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #000; } img { max-width: 100%; border: 0; display: block; } ul, li { list-style: none; } h1, h2, h3, h4 ,h5, h6 { color: #78B3BB; font-weight: 300; font-family: 'Open Sans', sans-serif; } h1 { font-weight: 300; font-family: 'quincy-cf',sans-serif; } h1, h2 { font-family: 'quincy-cf',sans-serif; font-size: 50px; margin-bottom: 38px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;line-height:1em !important;} h2 { font-family: 'quincy-cf',sans-serif; font-size:50px;font-weight:400;} h3 { font-family: 'quincy-cf',sans-serif; font-size: 24px; line-height: 1.2; color: #333333; font-weight:400;} p { font-size: 16px; line-height: 1.65; margin-bottom: 22px; font-weight:400; } a { text-decoration: none; transition: all 0.3s; color: #EB595C; font-weight:600; } a:hover { text-decoration: underline; } :focus { outline: none; } .skin h2 { color: #ED9E6B; } .orange h2 { color: #F28C40; } .yellow h2 { color: #EBC22B; } .red h2 { color: #EB595C; } .wow { visibility: hidden; } .errors { color:#EB595C;font-style: italic;} /* .border-green { -webkit-box-shadow: 10px 10px 0px 0px rgba(119, 172, 87, 1); -moz-box-shadow:10px 10px 0px 0px rgba(119, 172, 87, 1); box-shadow:10px 10px 0px 0px rgba(119, 172, 87, 1); } .border-green-light { -webkit-box-shadow: 10px 10px 0px 0px rgba(196, 216, 178, 1); -moz-box-shadow:10px 10px 0px 0px rgba(196, 216, 178,1); box-shadow:10px 10px 0px 0px rgba(196, 216, 178, 1); } .border-blue-light{ -webkit-box-shadow: 10px 10px 0px 0px #A6BFCD; -moz-box-shadow:10px 10px 0px 0px #A6BFCD; box-shadow:10px 10px 0px 0px #A6BFCD; } */ .button { transition: all 0.3s; cursor: pointer; border: 0; display: inline-block; padding: 15px 24px 16px; line-height: 1.2; border-radius: 0px; color: #fff; font-size: 14px; font-weight: 500; background: #EB595C; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;text-transform: uppercase; letter-spacing:2.2px;} .button:hover { background: #c34d49; text-decoration: none; } .white-button { transition: all 0.3s; cursor: pointer; border: 0; display: inline-block; padding: 9px 18px 10px; line-height: 1.2; border-radius: 5px; color: #78B3BB; font-size: 16px; font-weight: 700; background: #fff; } .white-button:hover { background: #78B3BB; color: #fff; text-decoration: none; } .button.ghost, li a.ghost { color:white;border:1px white solid;background:none;box-sizing: border-box;padding:13px 24px 14px;} .button.ghost:hover,li a.ghost:hover { color:#EB595C;border:2px white solid;background:white;} .button.yellow { background:#EBC22B; color:white;} .button.small { font-size:14px;text-transform: none; font-weight:500;letter-spacing:normal;} .link { color: #EB595C; font-weight: 700; display: inline-block; } .white-link { color: #fff; font-weight: 700; display: inline-block; padding-top: 14px; padding-bottom: 14px; line-height: 1.2; vertical-align: middle; } .white-link.red-link { color: #EB595C; } .white-link:after { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 18px; margin-left: 5px; margin-right: auto; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .white-link.back:hover:before { text-decoration: none; } .red-link { color: #EB595C; font-weight: 700; display: inline-block; padding-top: 14px; padding-bottom: 14px; line-height: 1.2; vertical-align: middle; } .red-link:after { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 18px; margin-left: 5px; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .red-link.back:after { display: none; } .red-link.back { padding-top: 0; padding-bottom: 0; } .red-link.back:before { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 18px; margin-right: 5px; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .red-link.back:hover:before { text-decoration: none; } .bannerBox .back { color:white;} .bannerBox .back:after { background:white;} .back-to-button { transition: all 0.3s; cursor: pointer; border: 0; display: inline-block; padding: 15px 24px 16px; line-height: 1.2; border-radius: 0px; color: #595959; font-size: 14px; font-weight: 500; background: #F7F3F3; margin: 75px 0 43px; text-transform: uppercase; letter-spacing:2.2px;} .back-to-button:after { content: 'arrow_forward'; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 18px; margin-left: 5px; margin-right:10px;top: -1px; position: relative;word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; text-transform:none;} .back-to-button:hover { text-decoration: none;} .back-to-overview { padding: 15px 24px 16px 24px; } .back-to-overview:before { content: 'arrow_back'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 18px; margin-right: 5px; top: -1px; position: relative; margin-right: auto; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .back-to-overview:after{ content:'';} select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: url('../images/select-arrow.png'); background-position: calc(100% - 22px) center; background-repeat: no-repeat; background-size: 10px; } select::-ms-expand { display: none; } select, input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input[type="text"] { padding: 5px 25px; font-size: 16px; width: 100%; height: 50px; background-color: #F7F3F3; border: 0; border-radius: 26px; color: #595959; margin-bottom: 25px; } form ::-webkit-input-placeholder { color: #595959; } form ::-moz-placeholder { color: #595959; } form ::-ms-input-placeholder { color: #595959; } form ::placeholder { color: #595959; } label { color: #000; display: block; width: 100%; font-size: 18px; font-weight: 700; margin-bottom: 10px; } label.error { color:#EB595C;font-weight:400;margin-top:-20px;font-size:14px;} .mfp-bg { background: #1a1b1c; } .my-mfp-zoom-in .zoom-anim-dialog { opacity: 0; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); transform: scale(0.8); } .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .my-mfp-zoom-in.mfp-bg { opacity: 0; transition: opacity 0.3s ease-out; } .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; } .heading { padding-bottom: 38px; padding-top: 120px; max-width: 750px; margin: 0 auto; text-align: center; } .heading p { font-size: 24px; font-weight: 300; line-height: 1.5; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;} .heading p a { color:black; text-decoration:none;border-bottom:1px black solid; font-weight:400;} .heading p a:hover { border-bottom:none;} .heading h2 { margin-bottom: 25px; } .text-center { text-align: center; } .mfp-close, .mfp-close:active, .mfp-close:focus { font-size: 0; color: transparent; opacity: 1; top: 18px; right: 15px; } .mfp-close:hover { opacity: 0.8; } .mfp-close:after { display: inline-block; content: 'close'; font-family: 'Material Icons', sans-serif; font-weight: 300; color: #000; font-size: 30px; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .jquery-datepicker__prev .fa-chevron-left:before { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: block; -webkit-transform: rotate(180deg); transform: rotate(180deg); font-size: 18px; width: 30px; height: 30px; cursor: pointer; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .jquery-datepicker__next .fa-chevron-right:before { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: block; font-size: 18px; width: 30px; height: 30px; cursor: pointer; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .jquery-datepicker__prev .fa-chevron-left:hover:before, .jquery-datepicker__next .fa-chevron-right:hover:before { color: #fff; } .jquery-datepicker__panel span { cursor: pointer; } .jquery-datepicker__panel { box-shadow: 0 3px 5px rgba(0,0,0,0.2) } .jquery-datepicker__panel .jquery-datepicker__day.-is--selected { background-color: #EB595C; border-color: #EB595C; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } /* ### global classes ### */ .clear { clear: both; visibility: hidden; line-height: 0; height: 0; } .center { margin: 0 auto; position: relative; max-width: 1200px; } .centered { padding-right: calc((100% - 1200px) / 2); padding-left: calc((100% - 1200px) / 2); } /* ### wrapper ### */ #wrapper { position: relative; display: block; width: 100%; min-height: 100%; margin: 0 auto; } /* ### main container ### */ #mainCntr { width: 100%; } /* ### header container ### */ #headerCntr { padding: 26px 23px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; position: fixed; left: 0; top: 0; width: 100%; z-index: 999; transition: all 0.3s; } #headerCntr.journey { position: absolute; } #headerCntr .logo { margin: 2px 0 0 9px; display: block; width: 160px; } #headerCntr .logo img { max-width: 100%; } #headerCntr .logo img + img { display: none; } #headerCntr .mobileMenu { display: none; cursor: pointer; z-index: 15; float: left; width: 80px; position: absolute; top: 30px; right: 30px; transition: 0.2s; overflow: hidden; color: #000; height: 30px; line-height: 30px; font-weight: 400; } #headerCntr .mobileMenu:hover { text-decoration: none; } #headerCntr .mobileMenu:after { display: inline-block; vertical-align: top; position: absolute; right: 0; top: 0; font-size: 30px; content: 'menu'; font-family: 'Material Icons', sans-serif; font-weight: 300; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } #headerCntr .mobileMenu span { transition: all 0.3s; display: block; text-transform: uppercase; letter-spacing: 2.2px;font-size:14px;} #headerCntr .mobileMenu span + span { position: absolute; left: 0; top: 0; opacity: 0; } #headerCntr.sticky { padding: 10px 27px; box-shadow: 0 3px 3px rgba(0,0,0,0.2); background: #fff; height: 70px; } #headerCntr.sticky .logo { width: 70px; margin-left: 3px; } #headerCntr.sticky .logo img { display: none; } #headerCntr.sticky .logo img + img { display: block; } #headerCntr.sticky .menuBox ul li a { color: #000000; } #headerCntr.sticky .menuBox ul li a:after { background: #000000; } #headerCntr.sticky .mobileMenu { color: #333; top: 20px; right: 30px; } #headerCntr.sticky .mobileMenu .button.yellow { color:white !important;} /* ### landingpage ### */ body.landingpage #headerCntr .menuBox, body.landingpage #headerCntr .button.ghost, body.landingpage #headerCntr .mobileMenu, body.landingpage .footerBox { display:none;} body.landingpage #footerCntr { padding-top:25px;} /* ### menu box ### */ .menuBox { margin-left: auto; padding-right: 26px; } .menuBox ul { overflow: hidden; width: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .menuBox ul li { margin: 9px 10px; } .menuBox ul li a { padding: 4px 0; display: block; font-size: 14px; position: relative; color: #000; font-weight:400; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; text-transform: uppercase; letter-spacing: 2.2px;} .menuBox ul li a:after { content: ''; position: absolute; left: 0; bottom: -1px; transition: all 0.2s; width: 0; height: 1px; background: #000; } .menuBox ul li a:hover { text-decoration: none;} .menuBox ul li.is-active a:after, .menuBox ul li a:hover:after { width: 100%; } .menuBox ul li.has-mobile-show { display: none; } /* ### content container ### */ #contentCntr { padding: 27px 29px; overflow: hidden; position: relative; } /* ### banner box ### */ .bannerBox { /*padding-top: 125px;*/margin-top:80px; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; min-height: 587px; position: relative; background-image: linear-gradient(to left, #78B3BB , #78B3BB); } .skin .bannerBox { background:#ED9E6B; } .orange .bannerBox { background:#F28C40; } .yellow .bannerBox { background:#EBC22B; } .red .bannerBox { background:#EB595C; } .bannerBox .text { padding-top: 100px; width: 53%; z-index:10;} .bannerBox .white-link, .bannerBox .red-link { margin-left: 15px; } .bannerBox .button { padding-right: 27px; padding-left: 27px; } .bannerBox .button.ghost { background:none;border:1px solid white;color:white;} .bannerBox .button.ghost:hover { background:white;color:#78B3BB;} #headerCntr.sticky .button.ghost { border: 1px solid #000000;color:#000000; } /* .bannerBox .image { width: 47%; margin-left: -61px; position: relative; }*/ .bannerBox .image { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; margin-top: auto; width: 47%; margin-left: -61px; position: relative; } .bannerBox .icons { width: 183px; position: absolute; left: 71.5%; top: -31px; } .bannerBox .bubble1 { width: 11px; position: absolute; left: 57.7%; top: 15%; } .bannerBox .bubble2 { width: 15px; position: absolute; left: 60.9%; top: 11.2%; } .bannerBox .bubble3 { width: 18px; position: absolute; left: 65.4%; top: 9.5%; } .bannerBox h1 { color: #fff; } .bannerBox h1 strong { font-weight: 600; } .bannerBox p { padding: 5px 35px 15px 0; color: #fff; font-size: 24px; font-weight: 300; line-height: 1.55; } .bannerBox p strong { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; } .bannerBox.inner { padding-top: 95px; } .bannerBox.inner .image { position: absolute; right: 69px; bottom: -3px; } .bannerBox .red-link.back { margin-left: -3px; display: inline-block; position: relative; } .bannerBox .red-link.back:after { display: none; position: absolute; left: 18px; bottom: 0; width: calc(100% - 18px); height: 1px; background: #EB595C; content: ''; } .bannerBox .red-link.back:hover { text-decoration: none; } .bannerBox .red-link.back:hover:after { display: block; } .bannerBox.inner-detail .image { margin-left: 0; padding-right: 23px; } .bannerBox.inner-detail .image img { float: right; } .bannerBox.inner-detail { padding-top: 102px; } .bannerBox.inner-detail .text { padding-top: 75px; } .bannerBox.inner-detail h1 { margin-bottom: 0; } .bannerBox .subtitle { font-size: 18px; font-weight: 700; color: #fff; opacity: 0.5; margin-bottom: 37px; } .bannerBox .title { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 13px; font-size: 24px; color: #333333; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .bannerBox .title span { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; font-size: 18px; font-weight: 700; color: #fff; margin-left: 15px; } .bannerBox .title span img { margin-left: 10px; } .bannerBox .name { position: absolute; right: 50%; margin-right: -665px; bottom: 33px; display: block; text-align: right; color: rgba(255,255,255,0.5); } .bannerBox .name strong { display: block; } /* ### usp box ### */ .uspBox { padding-bottom: 117px; width: 100%; position: relative; } .uspBox ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .uspBox li { width: calc(33.333% - 30px); } .uspBox .top { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 10px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .uspBox figure { width: 95px; } .uspBox figure img {max-width:75px;max-height:73px;} .uspBox h3 { padding-top: 5px; width: calc(100% - 95px) } .uspBox li p {color:#747479;} /* ### reviews box ### */ .reviewsBox { margin-bottom: 100px; position: relative; z-index: 9; background: #8EC0AD; border-radius:5px;} .reviewsBox .slide { padding: 53px 50px 39px 307px; position: relative; } .reviewsBox h2 { color: #fff; font-size: 24px; margin-bottom: 50px; } .reviewsBox h3 { color: #fff;} .reviewsBox p { color: #fff; margin-bottom: 20px; font-size:24px; line-height: 1.5; margin-top: 45px;width: 68%; min-height:110px;} .reviewsBox .name { margin-bottom: 16px; display: block; line-height: 1.4; color: #fff; font-weight:400;} .reviewsBox .name strong { display: block; font-size: 18px; } .reviewsBox .name span { opacity: 0.5; margin-left: 13px; } .reviewsBox .name span img { display: inline-block; vertical-align: top; margin: -7px 0 0 2px; } .reviewsBox .white-button { margin-right: 20px; color:white;background:transparent;border:2px solid white;} .reviewsBox .white-button:hover { color:#8EC0AD; background:white;} .reviewsBox .image { position: absolute; right: 5px; width: 350px; bottom:0px;} .reviewsBox .slick-dots { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; position: absolute; left: 310px; top: 114px; } .reviewsBox .slick-dots li { margin: 0 4px; } .reviewsBox .slick-dots li button { border: 0; background: #c4d8b2; width: 9px; height: 9px; border-radius: 50%; cursor: pointer; display: block; text-indent: -9999px; } .reviewsBox .slick-dots li.slick-active button { background: white; } .reviewsBox.blue {background:#78B3BB;} .reviewsBox.blue .slick-dots li:not(.slick-active) button { background:#A6BFCD} /* ### success box ### */ .successBox { margin: 0 0 -90px; z-index: 9; position: relative; min-height: 958px; width: 100%; background-image: linear-gradient(to right, #d7cfc9 , #f4efeb); overflow: hidden; } .successBox .heading { padding: 110px 0 34px; max-width: 600px; } .successBox .row { max-width: 994px; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .successBox h3 { margin-bottom: 13px; } .successBox .col-1 { width: 35%; } .successBox .col-1 + .col-1 { width: 40%; margin-right: -20px; } .successBox li { width: 100%; padding: 0 0 6px 38px; font-size: 16px; line-height: 1.55; position: relative; font-weight:400;} .successBox li:before { color: #8EC0AD; font-size: 23px; position: absolute; left: -3px; top: -1px; line-height: 1.3; content: 'check'; font-family: 'Material Icons', sans-serif; font-weight: 300; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .successBox ul { margin-bottom: 25px; } .successBox .button { margin: 0 20px 10px 0; background:white;color:transparent;color:black;border:2px solid white;} .successBox .button:hover { background:transparent;color:black;border:2px solid white;} .successBox .bg { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center 30%; background-size: cover; z-index: -1; } /* ### new success box ### */ .successBox.dark { min-height:820px;} .successBox.dark .bg::after { content: ""; background: #ED9E6B; opacity:.85; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;} .successBox.dark h2, .successBox.dark p, .successBox.dark h3, .successBox.dark ul li, .successBox.dark li:before { color:white;} .successBox.dark .heading p { font-weight:400;} .successBox.dark p, .successBox.dark ul li { font-weight:400;} /* ### download box ### */ .downloadBox { padding: 72px; max-width: 788px; margin: 0 auto; background: #fff; } .downloadBox h3 { margin-bottom: 33px; } .downloadBox .row { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .downloadBox .col-1 { width: 47.5%; } .downloadBox p { margin-bottom: 35px; } .downloadBox cite { display: block; padding-top: 15px; color: #595959; line-height: 1.7; } .downloadBox .button { width: 100%; height: 50px; margin-top: 36px; } /* ### item box ### */ .itemBox { padding-top: 123px; padding-bottom: 82px; } .itemBox ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -17px; } .itemBox li { width: 33.333%; padding: 0 15px 65px; } .itemBox figure { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 21px; position: relative; background-image: linear-gradient(to left, #78B3BB , #78B3BB); height: 270px; border-radius:5px;} body.skin .itemBox figure { background-color: rgb(255 255 255 / 30%); } body.orange .itemBox figure { background-color: rgb(255 255 255 / 30%); } body.yellow .itemBox figure { background-color: rgb(255 255 255 / 30%); } body.red .itemBox figure { background-color: rgb(255 255 255 / 30%); } .itemBox figure img { display: block; max-width: 110%;max-height:110%; } .itemBox li a:hover { text-decoration: none; } .itemBox li p { color: #595959; margin-bottom: 18px; } .itemBox li h2 { font-size: 24px; margin-bottom: 0; line-height: 1.3; font-family:'Open Sans';} .itemBox li strong { padding-bottom: 20px; display: block; color: #595959; font-size: 16px; } .itemBox li a:hover .link { text-decoration: underline; } .itemBox figure span { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; position: absolute; right: 15px; top: 20px; color: #fff; opacity: 0.5; } .itemBox figure span img { display: inline-block; width: 52px; vertical-align: top; margin: 0 0 0 2px; } .itemBox.inner { padding-top: 0; padding-bottom: 120px; background: #78B3BB; } .itemBox.inner h2 { color: #fff; } .itemBox.inner p { color: #fff; } .itemBox.inner li strong { color: #fff; opacity: 0.6; } .itemBox.inner li h3, .itemBox.inner li h2, .itemBox.inner li p { color: #F7F3F3 } .itemBox.inner li { padding-bottom: 53px; } .itemBox.inner .heading { padding-top: 110px; padding-bottom: 65px; } .itemBox.inner figure { background:#C4D8B2;/*background-image: linear-gradient(to left, #8EC0AD , #8EC0AD);*/ } .itemBox.inner span.link { color:white;} .itemBox.inner .button { border:2px solid white;background:transparent;color:white;} /* ### info box ### */ .infoBox { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; background: #78B3BB; position: relative; z-index: 2; } .infoBox:after { content: ''; position: absolute; right: 0; top: 0; width: 30px; height: 100%; background: #fff; z-index: -1; } .infoBox .text { padding: 55px 75px 50px; width: 42.8% } .infoBox .image { width: 57.2%; margin: -30px 0 0 0; } .infoBox h2 { color: #fff; margin-bottom: 32px; } .infoBox p { color: #fff; margin-bottom: 30px; } .infoBox .button { margin: 0 10px 10px 0; background:transparent;color:white;border:2px solid white;} .infoBox .button:hover {background:white;color:#78B3BB;border:2px solid white;} .infoBox .subtitle, .infoBox .bottom strong { color: #333333; font-size: 18px; font-weight: 700; line-height: 1.2; padding: 42px 0 3px;display:inline-block; } .infoBox .bottom p { font-size: 16px; } .infoBox .bottom p a { color: #fff; text-decoration: underline; } .infoBox .bottom p a:hover { text-decoration: none; } .infoBox .name { color: rgba(255,255,255,0.5); font-size: 16px; line-height: 20px; text-align: right; padding: 28px 70px 28px 0; } /* ### detail box ### */ .detailBox { padding-top: 123px; padding-bottom: 115px; } .detailBox .row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 120px; } .detailBox .text { width: 40%; padding-top: 52px; } .detailBox .image { width: 57.2%; } .detailBox .row:nth-child(odd) .image { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .detailBox .row h2 { font-size: 24px; font-weight: 300; color: #333333; margin-bottom: 20px; font-family:'Open Sans';} .detailBox a { font-weight: 700; } .detailBox p { margin-bottom: 30px; } .detailBox .bottom { max-width: 800px; text-align: center; margin: 0 auto; } .detailBox .intro { display: none; } /* ### content box ### */ .contentBox .block { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .contentBox .text { width: 40%; padding-top: 20px; position: relative; z-index: 99; } .contentBox .image { /*width: 57.2%;*/ width:55.2%;} .blue .contentBox .button:hover { color:black;background:transparent;border:2px solid #78B3BB;} .blue .contentBox .button { color:white;background:#78B3BB;border:2px solid #78B3BB;} .skin .contentBox .button:hover { color:black;background:transparent;border:2px solid #ED9E6B;} .skin .contentBox .button { color:white;background:#ED9E6B;border:2px solid #ED9E6B;} .yellow .contentBox .button:hover { color:black;background:transparent;border:2px solid #EBC22B;} .yellow .contentBox .button { color:white;background:#EBC22B;border:2px solid #EBC22B;} .orange .contentBox .button:hover { color:black;background:transparent;border:2px solid #F28C40;} .orange .contentBox .button { color:white;background:#F28C40;border:2px solid #F28C40;} .red .contentBox .button:hover { color:black;background:transparent;border:2px solid #EB595C;} .red .contentBox .button { color:white;background:#EB595C;border:2px solid #EB595C;} /* .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(94, 144, 167, 1); -moz-box-shadow:10px 10px 0px 0px rgba(94, 144, 167, 1); box-shadow:10px 10px 0px 0px rgba(94, 144, 167, 1); } .skin .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(119, 172, 87, 1); -moz-box-shadow:10px 10px 0px 0px rgba(119, 172, 87, 1); box-shadow:10px 10px 0px 0px rgba(119, 172, 87, 1); } .yellow .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(193, 154, 37, 1); -moz-box-shadow:10px 10px 0px 0px rgba(193, 154, 37, 1); box-shadow:10px 10px 0px 0px rgba(193, 154, 37, 1); } .orange .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(224, 105, 55, 1); -moz-box-shadow:10px 10px 0px 0px rgba(224, 105, 55, 1); box-shadow:10px 10px 0px 0px rgba(224, 105, 55, 87, 1); } .red .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(146, 138, 129, 1); -moz-box-shadow:10px 10px 0px 0px rgba(146, 138, 129, 1); box-shadow:10px 10px 0px 0px rgba(146, 138, 129, 1); } .red .contentBox .image img { -webkit-box-shadow: 10px 10px 0px 0px rgba(233, 88, 91, 1); -moz-box-shadow:10px 10px 0px 0px rgba(233, 88, 91, 1); box-shadow:10px 10px 0px 0px rgba(233, 88, 91, 1); } */ .contentBox .row { padding-bottom: 160px; } .contentBox .row.gray { background: #F7F3F3; } .contentBox .row.align-left .image { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .contentBox h3 { color: #333333; margin-bottom: 20px; } .contentBox a:not(.button) { font-weight: 700; } .contentBox p { margin-bottom: 30px; } .contentBox ul { margin-left:21px;margin-bottom:20px;} .contentBox ul li { font-size:1zpx;line-height:25px;list-style:square; font-weight:400; margin-bottom:5px;} .contentBox .bottom { max-width: 800px; text-align: center; margin: 0 auto; } .contentBox .intro { display: none; } .contentBox .heading { padding-top: 110px; padding-bottom: 55px; } .contentBox .heading h2 { } .contentBox .dark p { margin-bottom: 0; } .contentBox .dark strong { color: #333; margin: 0 15px 10px 0; line-height: 1.4; display: inline-block; } .contentBox .last .heading { padding: 0; margin-top: -45px; } .contentBox .textonly .heading { padding-bottom:0;} .contentBox .last .text, .contentBox .textonly .text { width: 100%; margin: 0 auto; padding-top: 0; padding-bottom: 110px; text-align: center; max-width: 800px; } .contentBox .textonly.left .text { text-align:left;} .contentBox .row.last, .contentBox .row.textonly { padding-bottom: 0; } .contentBox .result { padding: 30px; margin-top: -10px; background: #EB595C; width: 122%; position: relative; z-index: 9; } .orange .contentBox .result { background:#F28C40 ;} .blue .contentBox .result { background: #78B3BB;} .yellow .contentBox .result { background: #EBC22B;} .red .contentBox .result { background: #EB595C;} .skin .contentBox .result { background:#ED9E6B ;} .contentBox .result label { color: #fff; font-weight: 300; padding: 0; margin: 0; } .contentBox .result .col-1 { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap; margin-bottom: 30px; } .contentBox .result .col-1 + .col-1 { margin-bottom: 0; } .contentBox .result .col-1.new { margin-bottom:10px !important;color:white;font-size:18px;} .contentBox .result .col-1.new select { width:auto;height:40px;min-width:126px;} .contentBox .result .number { width: 80px; margin-bottom: 0; } .contentBox .result .weeks { padding-left: 30px; width: 180px; margin-bottom: 0; } .contentBox .result label { width: 105px; } .contentBox .result label:nth-child(3) { width: 154px; padding-left: 15px; } .contentBox .result select { background-position: calc(100% - 17px) center; } .contentBox .result input[type="email"],.contentBox .result input[type="text"] { width: calc(100% - 198px); margin: 0; } .contentBox .result .button { margin: 0; width: 180px; background:transparent;color:white;border:2px solid white;} .contentBox .result .button:hover { background:white;color:#78B3BB;border:2px solid white;} .contentBox .result .messages { color:white;display:none;padding-top:20px;} /* ### contact box ### */ .contactBox { padding-bottom: 110px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; position: relative; z-index: 99; } .contactBox.no-top-space { margin-top:-90px;} .contactBox .left { padding: 138px 75px 80px; margin-top: -33px; width: 65.8%; background: #F7F3F3; } .contactBox.no-top-space .left { padding:75px;} .contactBox h2 { margin-bottom: 32px; } .contactBox p { margin-bottom: 68px;font-weight:400; } .contactBox input[type="number"], .contactBox input[type="password"], .contactBox input[type="email"], .contactBox input[type="tel"], .contactBox select, .contactBox input[type="text"] { background-color: #fff; } .contactBox .row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contactBox .col-1 { width: 47.5% } .contactBox .col-2 { width: 47.5% } .contactBox .col-3 { width: 100% } .contactBox .button { width: 100%; margin-bottom: 20px; margin-top: 7px; } .contactBox cite { font-size: 16px; } .contactBox .right { width: 28.3%; padding: 114px 0 0; } .contactBox .right h2 { font-size: 24px; color: #333; margin-bottom: 25px; } .contactBox address { font-style: normal; font-size: 18px; line-height: 1.65; margin-bottom: 30px; } .contactBox address a { font-weight: 700; margin-left: 4px; } .contactBox .right p { margin-bottom: 0; } .contactBox .social ul { overflow: hidden; padding-top: 10px; } .contactBox .social ul li { float: left; margin-right: 12px; } .contactBox .social ul li:last-child { margin-right: 0; } .contactBox .social ul li a { line-height: 1.2; font-size: 0; color: transparent; } .contactBox .social ul li a:before { font-size: 39px; color: #EB595C; transition: all 0.3s; } .contactBox .social ul li a:hover:before { color: #811e1e; } .contactBox .js-datepicker { z-index: 9; position: relative; background-color: #fff; height: 50px; border-radius: 26px; margin-bottom: 25px; } .contactBox .js-datepicker input[type="text"] { cursor:pointer;padding-right: 30px; margin: 0; background-color: transparent; margin-bottom:25px;} .contactBox .js-datepicker:after { z-index: -1; content: 'date_range'; color: #000; position: absolute; right: 18px; top: 9px; line-height: 1.4; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 24px; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } /* ### cta box ### */ .ctaBox:not(.single) { max-width: 1390px; margin: 0 auto; } .ctaBox .row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } /* .ctaBox .col-1 { width: calc(50% - 15px); background-image: linear-gradient(to left, #78B3BB , #78B3BB); }*/ .ctaBox .col-1 { width: calc(50% - 15px); background: rgba(235, 89, 92,0.9); border-radius:5px;} .ctaBox .col-1:nth-child(2) { background:#EB595C;} .ctaBox .button { background:transparent;color:white;border:1px solid white;} .ctaBox .button:hover { background:white;color:black;} .ctaBox .block { padding: 80px 0 20px 105px; min-height: 420px; width: 680px; position: relative; } .ctaBox .col-1:first-child .block { width: 586px; float: right; padding-right: 50px; padding-left: 0; } .ctaBox h3 { color: #fff; margin-bottom: 15px; } .ctaBox .block p { color: #fff; margin-bottom: 28px; } .ctaBox .text { max-width: 370px; } .ctaBox .col-1:first-child .text { max-width: 300px; /* 250px;*/ } .ctaBox .image1 { position: absolute; right: 0px; bottom: 0; } .ctaBox .image2 { position: absolute; right: 0; bottom: 0; } .ctaBox .name { display: block; margin-top: 28px; color: #fff; opacity: 0.5; } .ctaBox .heading { max-width: 600px; } .ctaBox h2 { color:black;} .ctaBox .text h2 { color:white;} .ctaBox.belgian h2 { color:#78B3BB;} .ctaBox.belgian .col-1 { background-image: linear-gradient(to left,#78B3BB, #78B3BB); } .ctaBox.single .col-1 { width:100%;} .ctaBox.single .col-1:first-child .block { width:90%;} .ctaBox.single .col-1:first-child .text { max-width:500px;} .ctaBox.single h3 { font-size:24px;} /* ### story box ### */ .journeyBox { padding: 0px; position: relative; overflow: hidden; z-index:8; margin-top: 80px;} .journeyBox h1 { margin-bottom: 40px; font-size: 50px; line-height: 49px; font-weight: 300; color: #ffffff; } .journeyBox .slide7 h2 { margin-bottom: 40px; font-size: 59px; line-height: 59px; font-weight: 100; color: #ffffff; } .journeyBox h2 { margin-bottom: 24px; font-size: 40px; line-height: 43px; font-weight: 300; color: #ffffff; } .journeyBox h4 { margin-bottom: 24px; font-size: 22px; line-height: 32px; font-weight: 300; color: #ffffff; } .journeyBox p { margin-bottom: 32px; font-size: 16px; line-height: 29px; color: #ffffff; font-weight: 300; } .journeyBox .slide ul { padding: 0px; margin: 0px 0 25px; font-size: 16px; line-height: 23px; color: #ffffff; font-weight: 300; } .journeyBox .slide ul li { padding: 0 0 12px 42px; position: relative; } .journeyBox .slide ul li:before { content: 'done'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 22px; line-height: 20px; margin-left: 3px; margin-right: auto; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; position: absolute; top: 0px; left: -3px; } .journeyBox .text { max-width: 550px; position: relative; } .journeyBox .slide .text { max-width: 482px; } .journeyBox .slide.last .text { max-width: 630px; } .journeyBox .slide.first .text { max-width: 550px; } .journeyBox .slide { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: calc(100vh - 52px); margin-bottom: 26px; position: relative; background-repeat: no-repeat; background-size: auto 100%; background-position: center right; } .journeyBox .slide .inner { padding: 100px 0 100px 299px; width: 100%; position: relative; z-index: 10; } .journeyBox div.slide.first { background-color: #78B3BB; } .journeyBox div.slide.first:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: linear-gradient(to right, rgba(120,179,187,1) 0%,rgba(120,179,187,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78B3BB', endColorstr='#78B3BB',GradientType=1 ); } .journeyBox .slide.skin { background-color: #ED9E6B; } .journeyBox .slide.skin:before { content: ""; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6f9b65+0,6f9b65+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,158,107,1) 0%,rgba(237,158,107,1) 49%,rgba(237,158,107,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ED9E6B', endColorstr='#ED9E6B',GradientType=1 ); /* IE6-9 */ } .journeyBox .skin .button { background:white;color:#ED9E6B;} .journeyBox .slide.yellow { background-color: #EBC22B; } .journeyBox .slide.yellow:before { content: ""; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6f9b65+0,6f9b65+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(235,194,43,1) 0%,rgba(235,194,43,1) 49%,rgba(235,194,43,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBC22B', endColorstr='#EBC22B',GradientType=1 ); /* IE6-9 */ } .journeyBox .yellow .button { background:white;color:#EBC22B;} .journeyBox .slide.purple { background-color: #EBC22B; } .journeyBox .slide.purple:before { content: ""; opacity: 0.97; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be9726+0,be9726+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(162, 143, 172,1) 0%,rgba(162, 143, 172,1) 49%,rgba(162, 143, 172,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBC22B', endColorstr='#00EBC22B',GradientType=1 ); /* IE6-9 */ } .journeyBox .purple .button { background:white;color:#EBC22B;} .journeyBox .slide.red { background-color: #EB595C; } .journeyBox .slide.red:before { content: ""; opacity: 0.97; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be9726+0,be9726+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(238, 115, 111,1) 0%,rgba(238, 115, 111,1) 49%,rgba(238, 115, 111,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F28C40', endColorstr='#00F28C40',GradientType=1 ); /* IE6-9 */ } .journeyBox .red .button { background:white;color:#EB595C;} .journeyBox .slide.orange { background-color: #F28C40; } .journeyBox .slide.orange:before { content: ""; opacity: 0.97; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be9726+0,be9726+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(242,140,64,1) 0%,rgba(242,140,64,1) 49%,rgba(242,140,64,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F28C40', endColorstr='#F28C40',GradientType=1 ); /* IE6-9 */ } .journeyBox .orange .button { background:white;color:#F28C40;} .journeyBox .slide.pink { background-color: #EB595C; } .journeyBox .slide.pink:before { content: ""; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d35b66+0,d35b66+100&1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(207, 124, 146,1) 0%,rgba(207, 124, 146,1) 49%,rgba(207, 124, 146,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EB595C', endColorstr='#00EB595C',GradientType=1 ); /* IE6-9 */ } .journeyBox .pink .button { background:white;color:#EB595C;} .journeyBox .slide.red { background-color: #EB595C; } .journeyBox .slide.red:before { content: ""; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#948c82+0,948c82+100&1+30,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(235,89,92,1) 0%,rgba(235,89,92,1) 49%,rgba(235,89,92,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EB595C', endColorstr='#EB595C',GradientType=1 ); /* IE6-9 */ } .journeyBox .red .button { background:white;color:EB595C;} .journeyBox .slide.blue { background-color: #78B3BB; } .journeyBox .slide.blue:before { content: ""; opacity: 0.9; width: 85%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#05799e+0,05799e+100&1+30,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(120,179,187,1) 0%,rgba(120,179,187,1) 30%,rgba(120,179,187,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78B3BB', endColorstr='#78B3BB',GradientType=1 ); /* IE6-9 */ } .journeyBox .blue .button { background:white;color:#78B3BB;} .journeyBox .slide.last { margin-bottom: 0px; background-color: #78B3BB; } .journeyBox .slide.last:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04799d+0,68a5c1+100&1+0,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(120,179,187,1) 0%,rgba(120,179,187,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78B3BB', endColorstr='#78B3BB',GradientType=1 ); /* IE6-9 */ } .journeyBox .last .button { background:white;color:#78B3BB;} .journeyBox .white-button { padding: 13px 18px 10px 22px; margin-top: 19px; font-size:14px;border:1px white solid;font-weight:400;border-radius:0; text-transform: uppercase; letter-spacing: 2.2px;} .journeyBox .white-button:hover { color:white;background:transparent; } .journeyBox .white-button:after { content: 'arrow_downward'; font-family: 'Material Icons', sans-serif; font-weight: 300; display: inline-block; vertical-align: top; font-size: 22px; line-height: 20px; margin-left: 3px; margin-right: auto; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; text-transform: none; } .journeyBox .button { padding: 15px 34px 16px 24px; margin-right: 26px; background:white;} .journeyBox .previous-arrow { opacity: 0.5; text-decoration: none; display: table; position: absolute; top: 22px; left: 291px; z-index: 20; } .journeyBox .next-arrow { opacity: 0.5; text-decoration: none; display: table; position: absolute; bottom: 22px; left: 291px; z-index: 20; } .journeyBox .previous-arrow:hover, .journeyBox .next-arrow:hover { opacity: 1; } .journeyBox .previous-arrow .material-icons, .journeyBox .next-arrow .material-icons { font-size: 50px; line-height: 50px; display: block; color: #fff; } .journeyBox .controls { padding-bottom: 40px; margin-top: -143px; position: fixed; top: 50%; left: 65px; z-index: 1000; } .journeyBox .controls.is-absolute { top: auto; bottom: 0px; left: 36px; } .journeyBox .controls ul { padding: 0px; margin: 0px; list-style-type: none; counter-reset: item; } .journeyBox .controls ul li { padding: 0 0 37px; display: block; position: relative; counter-increment: item; } .journeyBox .controls ul li:nth-last-of-type(2) { padding: 0px; } .journeyBox .controls ul li:last-child { display: none; } .journeyBox .controls ul li:after { content: ""; opacity: 0.5; position: absolute; top: 18px; left: 8px; width: 2px; height: 38px; transition: all 0.3s; -webkit-transition: all 0.3s; background: #fff; } .journeyBox .controls ul li:nth-last-of-type(2):after { display: none; } .journeyBox .controls ul li a { padding: 0 0 0 39px; color: #fff; opacity: 0.5; display: block; font-size: 16px; line-height: 19px; font-weight: 700; } .journeyBox .controls ul li a:hover { opacity: 1; } .journeyBox .controls ul li a:hover { text-decoration: none; } .journeyBox .controls ul li a:before { content: ""; width: 14px; height: 14px; position: absolute; top: 0px; left: 0px; border: 2px solid #fff; border-radius: 100%; -webkit-border-radius: 100%; transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 1; } .journeyBox .controls ul li a:after { content: counter(item); width: 34px; height: 34px; position: absolute; top: -8px; left: -8px; font-size: 16px; line-height: 35px; font-weight: 700; text-align: center; transform: scale(0); -webkit-transform: scale(0); transition: all 0.3s; -webkit-transition: all 0.3s; z-index: 2; } .journeyBox .controls ul li.border:after { height: 31px; } .journeyBox .controls ul li.current:after { top: 25px; height: 31px; } .journeyBox .controls ul li.current a { opacity: 1; font-size: 20px; } .journeyBox .controls ul li.current a:before { left: -8px; top: -8px; width: 30px; height: 30px; } .journeyBox .controls ul li.current a:after { transform: scale(1); -webkit-transform: scale(1); } .journeyBox .play,.bannerBox .play { position: absolute; bottom: 125px; right: 200px; width: 270px; } .journeyBox .play a,.bannerBox .play a { font-size: 18px; line-height: 29px; color: #fff; text-decoration: none; font-weight: 300; display: block; text-align: center; text-shadow:1px 1px 2px #333;z-index:1;position:relative;} .journeyBox .play a:before,.bannerBox .play a:before { content: 'play_circle_outline'; margin-bottom: 32px; font-family: 'Material Icons', sans-serif; font-weight: 300; display: block; font-size: 140px; line-height: 140px; margin-right: auto; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; position: relative; z-index: 1;text-shadow:none; } .journeyBox .play a:after,.bannerBox .play a:after { content: ""; margin-left: -50px; position: absolute; top: 20px; left: 50%; width: 100px; height: 100px; border-radius: 100%; -webkit-border-radius: 100%; opacity: 0.5; transition: all 0.3s; background: #606060; } .journeyBox .play a:hover:after,.bannerBox .play a:hover:after { opacity: 1; } .journeyBox .slide.last .image { position: absolute; bottom: 0px; right: 0px; } .journeyBox .slide.last .image .name { position: absolute; bottom: 66px; left: -10px; text-align: center; font-size: 16px; line-height: 20px; color: #ffffff; font-weight: 300; } .journeyBox .line { position: absolute; bottom: 41px; right: 6px; } .journeyBox .slide.first .image { margin-right: -696px; position: absolute; bottom: 0px; right: 50%; z-index: 1; } .journeyBox .mobile-image { display: none; position: relative; } .journeyBox .slide.skin .mobile-image:before { content: ""; opacity: 0.98; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6f9b65+0,6f9b65+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,158,107,1) 0%,rgba(237,158,107,1) 49%,rgba(237,158,107,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ED9E6B', endColorstr='#ED9E6B',GradientType=1 ); /* IE6-9 */ } .journeyBox .slide.yellow .mobile-image:before { content: ""; opacity: 0.8; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be9726+0,be9726+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(235,194,43,1) 0%,rgba(235,194,43,1) 49%,rgba(235,194,43,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBC22B', endColorstr='#EBC22B',GradientType=1 ); /* IE6-9 */ } .journeyBox .slide.orange .mobile-image:before { content: ""; opacity: 0.8; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be9726+0,be9726+100&1+49,1+49,1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(225,104,55,1) 0%,rgba(225,104,55,1) 49%,rgba(225,104,55,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F28C40', endColorstr='#F28C40',GradientType=1 ); /* IE6-9 */ } .journeyBox .slide.red .mobile-image:before { content: ""; opacity: 0.8; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d35b66+0,d35b66+100&1+49,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(233,88,91,1) 0%,rgba(233,88,91,1) 49%,rgba(233,88,91,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E9585B', endColorstr='#E9585B',GradientType=1 ); /* IE6-9 */ } .journeyBox .slide.red .mobile-image:before { content: ""; opacity: 0.8; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#948c82+0,948c82+100&1+30,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(148,140,130,1) 0%,rgba(148,140,130,1) 30%,rgba(148,140,130,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#948c82', endColorstr='#00948c82',GradientType=1 ); /* IE6-9 */ } .journeyBox .slide.blue .mobile-image:before { content: ""; opacity: 0.98; width: 70%; height: 100%; position: absolute; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#05799e+0,05799e+100&1+30,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(94,144,167,1) 0%,rgba(94,144,167,1) 30%,rgba(94,144,167,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78B3BB', endColorstr='#78B3BB',GradientType=1 ); /* IE6-9 */ } /* ### footer container ### */ #footerCntr { overflow: hidden; background: #333333; width: 100%; padding-top: 100px; padding-bottom: 25px; } /* ### footer box ### */ .footerBox { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 25px; } .footerBox .title { color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 32px; } .footerBox nav ul { width: 43%; float: left; } .footerBox nav ul + ul { width: 57%; float: left; } .footerBox nav ul li { padding: 5px 0 4px; font-size: 16px; line-height: 1.2; } .footerBox nav ul li a { color: #fff; display: inline-block; font-weight:400;} .footerBox section { width: 40%; } .footerBox section:nth-child(2) { width: 48.7%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .footerBox p { color: #fff; } .footerBox .col-1 { width: 50%; padding-right: 30px; } .footerBox .col-2 { width: 50%; } .footerBox a { color: #fff;} .footerBox .social { padding-top: 12px; } .footerBox .social .title { margin-bottom: 15px; } .footerBox .social ul { overflow: hidden; } .footerBox .social ul li { float: left; margin-right: 12px; } .footerBox .social ul li:last-child { margin-right: 0; } .footerBox .social ul li a { line-height: 1.2; font-size: 0; color: transparent; } .footerBox .social ul li a:before { font-size: 39px; transition: all 0.3s; } .footerBox .social ul li a:hover:before { color: #fff; } .footerBox input[type="email"] { padding: 5px 25px; font-size: 16px; width: calc(100% - 145px); height: 50px; background: #fff; border: 0; border-radius: 26px; } .footerBox form { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .footerBox ::-webkit-input-placeholder { color: #595959; } .footerBox ::-moz-placeholder { color: #595959; } .footerBox ::-ms-input-placeholder { color: #595959; } .footerBox ::placeholder { color: #595959; } .footerBox .button { width: 130px; padding-right: 20px; padding-left: 20px; } .footerBox h3 { color:white; margin-bottom:15px;} /* ### copyright box ### */ .copyrightBox { width: 100%; overflow: hidden; } .copyrightBox ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .copyrightBox li { color: #999;} .copyrightBox li a { color: #999; font-weight:400;} .copyrightBox li a:hover { color: #fff; text-decoration: none; } .copyrightBox li:after { content: ''; vertical-align: top; margin: 5px 9px 0; width: 1px; height: 14px; background: #595959; display: inline-block; } .copyrightBox li:last-child:after { display: none; } /* #Media Queries ================================================== */ @media only screen and (max-width: 1449px) { .ctaBox .col-1:first-child .block, .ctaBox .block { width: 100%; padding-left: 50px; } .bannerBox.inner .image { right: 0; } .bannerBox .name { right: 30px; margin-right: 0; } .journeyBox .play, .bannerBox .play { right: 120px; bottom: 100px; } .journeyBox .slide.last h2 { font-size: 53px; line-height: 53px; } .journeyBox .slide.first .image { margin-right: 0px; right: 0px; } .journeyBox .controls { margin-top: -120px; } } @media only screen and (max-width: 1289px) { h1, h2 { font-size: 32px; line-height: 1.5 } .itemBox li h2, h3 { font-size: 22px; } .bannerBox .text { padding-top: 80px; padding-bottom:60px; } .bannerBox { min-height: 10px; } .bannerBox .icons { width: 150px; right: -40px; } .bannerBox.inner { min-height: 500px } .centered { padding-left: 15px; padding-right: 15px; } .uspBox li { width: calc(33.333% - 10px); } .heading { padding-top: 100px; } .uspBox figure { width: 75px; padding-right: 10px; } .uspBox h3 { width: calc(100% - 75px); } #footerCntr { padding-top: 78px; } .footerBox section { width: 46%; } .footerBox .title { margin-bottom: 25px;} .footerBox section:nth-child(2) { width: 52%; } .footerBox .col-1 { padding-right: 15px; width: 68% } .footerBox .col-2 { width: 32%; } .footerBox .social ul li { margin-right: 5px; } .footerBox input[type="email"] { padding: 5px 15px; width: calc(100% - 135px); } .ctaBox .col-1:first-child .block, .ctaBox .block { width: 100%; padding: 50px 25px 25px; min-height: 360px; } .ctaBox .col-1 { width: calc(50% - 10px); } .ctaBox .image1 { width: 200px; right: 10px; } .ctaBox .image2 { width: 50%; } .ctaBox .name { font-size: 15px; } .reviewsBox { margin-bottom:30px;} .reviewsBox .slide { padding-top: 40px; padding-right: 30px; } .reviewsBox .slick-dots { top: 100px; } .reviewsBox .image { width:30%;} .reviewsBox .slide { padding: 53px 50px 39px 53px;} .reviewsBox .slick-dots { left: 53px;} .successBox .col-1 + .col-1 { width: 42%; margin-right: 0; } .successBox .button { margin-right: 10px; } .itemBox figure span { right: 10px; top: 10px; } .itemBox figure span img { width: 45px; } .itemBox figure { height: 270px;/*auto;*/ padding-top: 20px; } .infoBox .text { padding: 30px; } .infoBox .image { width: 53%; } .infoBox .text { width: 47%; } .bannerBox.inner-detail .text { padding-bottom: 20px; } .bannerBox.inner-detail { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .bannerBox.inner-detail .image { margin-top: auto; padding-right: 0; } .detailBox .text { padding-top: 10px; } .detailBox .row { margin-bottom: 50px; } .bannerBox.banner-5 .image, .bannerBox.banner-4 .image { padding-right: 100px; } .contentBox .heading { padding-top: 80px; padding-bottom: 40px; } .contentBox .heading h2 { } .contentBox .row { padding-bottom: 94px; } .contentBox .block { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .contentBox .last .heading { margin-top: -5px; } .contentBox .result { width: 150%; } .contentBox .result .number { width: 16%; } .contentBox .result .weeks { padding-left: 15px; width: 30%; } .contentBox .result label { width: 22%; } .contentBox .result label:nth-child(3) { padding-left: 10px; width: 31%; } .contentBox .result input[type="email"] { width: calc(100% - 198px); margin: 0; } .contactBox .left { padding: 100px 45px 60px; } .contactBox .right { padding-top: 74px; } .contactBox.no-top-space { margin-top:0px;} .journeyBox .slide .inner { padding: 100px 0 100px 220px; } .journeyBox .slide.first .image { max-width: 300px; } .journeyBox h1 { margin-bottom: 20px; font-size: 45px; line-height: 45px; } .journeyBox .slide.last h2 { margin-bottom: 15px; font-size: 43px; line-height: 43px; } .journeyBox h4 { font-size: 20px; line-height: 34px; } .journeyBox .white-button { margin-top: 0px; } .journeyBox .text { max-width: 420px; } .journeyBox .line { max-width: 550px; } .journeyBox h2 { margin-bottom: 15px; font-size: 50px; line-height: 40px; } .journeyBox p { margin-bottom: 25px; font-size: 16px; line-height: 26px; } .journeyBox .slide ul { font-size: 16px; line-height: 26px; } .journeyBox .play, .bannerBox .play { right: 20px; } .journeyBox .play a, .bannerBox .play a { font-size: 16px; line-height: 26px; } .journeyBox .slide .text { max-width: 400px; } .journeyBox .play a:before, .bannerBox .play a:before { margin-bottom: 10px; font-size: 110px; line-height: 110px; } .journeyBox .play a:after, .bannerBox .play a:after { margin-left: -40px; top: 15px; width: 80px; height: 80px; } .journeyBox .previous-arrow { left: 210px; } .journeyBox .next-arrow { left: 210px; } .journeyBox .slide.last .image img { max-width: 320px; } .journeyBox .slide.last .image .name { left: -110px; } } @media only screen and (max-width: 1150px) { #headerCntr .mobileMenu { display: block; z-index: 99; } #headerCntr .button { margin-left: 0; margin-right: 110px; } #headerCntr .button.ghost { margin-right:10px;margin-left:auto;} .menuBox { opacity: 0; visibility: hidden; padding: 0; position: fixed; width: 100%; left: 0; top: 0; height: 100vh; overflow: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: -2; /*background-image: linear-gradient(to top, #78B3BB , #78B3BB);*/ background:white; } .menuBox ul { padding: 50px 0; width: 100%; } .menuBox ul li { text-align: center; width: 100%; } .menuBox ul li a { font-size: 30px; font-weight: 300; display: inline-block;} .is-active .menuBox { opacity: 1; visibility: visible; transition: ease-in 0.3s; z-index: 9; } #headerCntr .logo { z-index: 99; position: relative; } /* #headerCntr.sticky .menuBox ul li a { color: #fff; }*/ #headerCntr.sticky .menuBox ul li a:after { background: #fff; } #headerCntr .menuBox ul li a.button { display: none; } #headerCntr .menuBox ul li a.button:after { display: none; } #headerCntr .mobileMenu { } #headerCntr.sticky .menuBox { top: 106px; height: calc(100vh - 106px); } html.is-active { display: block; position: relative; overflow: hidden; } body.is-active { position: relative; overflow: hidden; height: 100%; max-height: 100%; } body.is-active #headerCntr .mobileMenu:after { content: 'close' } body.is-active #headerCntr .mobileMenu span { opacity: 0; } body.is-active #headerCntr .mobileMenu span + span { opacity: 1; } } @media only screen and (max-width: 979px) { h1 { font-size: 24px; } .itemBox li h2, h3 { font-size: 20px; } p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; } .bannerBox .text { max-width: 630px; padding: 60px 50px 60px 5px; width: 100%; } .bannerBox { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .bannerBox .image { margin-left: auto; margin-right: -20px; width: 454px; margin-top: -93px; padding-right: 35px; } .bannerBox .bubble3 { width: 15px; } .bannerBox .bubble2 { width: 13px; } .bannerBox .bubble1 { width: 9px; } .bannerBox .icons { width: 147px; top: -25px; } .heading p { font-size: 22px; } .heading { padding-top: 82px; padding-bottom: 30px; } .heading h2 { margin-bottom: 13px; } .uspBox figure { width: 100%; text-align: center; } .uspBox figure img { margin: 0 auto; display: block; } .uspBox h3 { width: 100%; margin-bottom: 5px; } .uspBox ul { margin: 0 -15px; } .uspBox li { text-align: center; width: 33.33%; padding: 0 8px; } .uspBox li p { margin-bottom: 18px; } .uspBox { padding-bottom: 79px; } .centered.not(.single) { padding-left: 30px; padding-right: 30px; } .footerBox .title { margin-bottom: 32px; } .footerBox nav ul + ul, .footerBox nav ul { width: 100%; } .footerBox nav ul + ul { margin-top: 35px; } .footerBox { padding: 0 0 65px; } .footerBox section:nth-child(2) { width: 48%; } .footerBox .col-2, .footerBox .col-1 { width: 100%; padding-right: 0; } .footerBox .col-1 { margin-bottom: 45px; } .footerBox .col-2 .title { display:none;} .footerBox p { font-size: 18px; line-height: 1.7; } .footerBox input[type="email"] { padding: 5px 25px; width: calc(100% - 145px); } .footerBox .button { letter-spacing: 0; } .footerBox .social { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 4px; } .footerBox .social .title { margin: 0 22px 0 0; } .footerBox .social ul li { margin-right: 12px; } .ctaBox .col-1 { width: 100%; margin-bottom: 30px; } .ctaBox .image1 { width: 310px; } .ctaBox .col-1:first-child .block, .ctaBox .block { padding: 80px 35px 30px; min-height: 390px; } .ctaBox .image2 { width: 400px; margin: 0 -10px 0 0; } .ctaBox h3 { font-size: 24px; } .ctaBox .text { max-width: 300px; } .ctaBox .col-1:first-child .text { max-width: 320px; } .reviewsBox { margin: 30px 0 30px 0; width:100%; } .reviewsBox .image { right: 5px; } .reviewsBox .slide {padding-left: 40px; } .reviewsBox .image { width: auto; max-width: 230px; } .reviewsBox .slick-dots { left: 40px; top: 93px; } .reviewsBox h2 { margin-bottom: 40px;} .reviewsBox p { margin-bottom: 25px; width:100%;} .reviewsBox .name strong { font-size: 16px; } .successBox { min-height: 10px; padding-bottom: 30px; margin-bottom: 25px; } .successBox .bg { height: 570px; width: 116%; left: -8%; } .successBox .heading { padding-top: 80px; padding-bottom: 280px; max-width: 640px; } .successBox .col-1 { width: 48%; } .successBox .col-1 + .col-1 { width: 50%; margin-right: -20px; } .successBox li { font-size: 16px; margin-bottom: 4px; } .successBox h3 { margin-bottom: 20px; } .successBox .col-1 p { margin-bottom: 35px; } .successBox .button { margin-bottom: 15px; } .successBox.dark { min-height:630px;} .successBox.dark .bg { height:100%;} .successBox.dark .heading { padding-bottom:50px;} .downloadBox { width: 710px; padding: 70px 40px 100px; } .downloadBox p { font-size: 18px; } .downloadBox cite { padding-top: 0; } .downloadBox h3 { font-size: 24px; } .mfp-container { padding-left: 0; padding-right: 0; } .bannerBox.inner { padding-top: 110px; } .bannerBox.inner h1 { margin-bottom: 20px; } .bannerBox.inner .text { padding-right: 0; } .bannerBox.inner .image { overflow: hidden; left: 70px; position: relative; margin: -32px 0 0 0; width: 100%; padding-right: 0; } .bannerBox.inner .image img { max-width: 620px; float: right; } .bannerBox.banner-4 .image img { max-width: 340px; } .bannerBox.banner-4 .image { margin-top: -55px; left: -15px; } .bannerBox.banner-5 .image img { max-width: 405px; } .bannerBox.banner-5 .image { margin-top: -55px; left: 10px; } .bannerBox .name { right: auto; left: 35px; bottom: 30px; text-align: left; } .itemBox { padding: 90px 0 50px; } .itemBox ul { margin: 0 -13px; } .itemBox li { width: 50%; padding: 0 13px 45px; } .itemBox strong { padding-top: 5px; } .itemBox li p { font-size: 18px; } .itemBox figure { padding-top: 0; margin-bottom: 25px; } .itemBox figure span { right: 15px; top: 20px; } .itemBox figure span img { width: 52px; margin-left: 5px; } .infoBox { padding-top: 78px; margin: 0 -30px 30px; text-align: center; } .infoBox:after { display: none; } .infoBox .image, .infoBox .text { padding: 0; max-width: 460px; margin: 0 auto; width: 100%; } .infoBox .text h2 { font-size: 30px; } .infoBox .text p { text-align: left; font-size: 18px; margin-bottom: 35px; } .infoBox .bottom p { font-size: 16px; text-align: center; } .infoBox .button { margin-right: 20px; } .infoBox .subtitle { padding-top: 25px; } .infoBox .bottom p { margin-bottom: 30px; } .infoBox .image { margin-bottom: -87px; } .infoBox .name { color: #333333; font-size: 16px; padding: 17px 0; text-align: center; opacity: 0.5;} .bannerBox.inner-detail .text { padding-top: 87px; } .bannerBox.inner-detail h1 { font-size: 30px; } .bannerBox.inner-detail p { max-width: 360px; } .bannerBox.inner-detail .image { width: 100%; margin: 0; padding-right: 0; } .bannerBox.inner-detail .image img { max-width: 400px; margin: -210px -35px 0 0; } .detailBox .image { max-width: 460px; margin: 7px auto 0; width: 100%; } .contentBox .row.align-left .image, .detailBox .row:nth-child(odd) .image { -webkit-order: 0; -ms-flex-order: 0; order: 0; } .detailBox .row { margin-bottom: 73px; } .detailBox .text { width: 100%; text-align: center; } .detailBox { padding-top: 72px; padding-bottom: 58px; } .detailBox p { font-size: 18px; padding: 3px 2px 0; } .contentBox p { font-size: 18px; padding: 3px 2px 0; } .contentBox .text { padding-top: 0; width: 100%; padding-bottom: 25px; text-align: center; } .contentBox .image { max-width: 460px; margin: 7px auto 0; width: 100%; } .contentBox .heading p { padding: 0; font-size: 22px; margin-bottom: 0; } .contentBox .dark strong { display: block; margin: 0 0 20px; } .contentBox .dark strong br { display: none; } .contentBox .row { margin: 0 -30px; padding-right: 30px; padding-left: 30px; } .contentBox .row.gray { margin-bottom: 35px; padding-bottom: 0; } .contentBox .row.gray .image { margin-bottom: -40px; } .contentBox .last .heading { padding-bottom: 40px; } .contentBox .last .text { padding-bottom: 52px; } .itemBox.inner { margin: 100px -30px; padding-left: 30px; padding-right: 30px; } .itemBox.inner ul { margin: 0 -10px; } .itemBox.inner .heading { padding-top: 82px; padding-bottom: 35px; } .itemBox.inner .slick-arrow { position: absolute; top: 95px; font-size: 0; z-index: 9; width: 38px; height: 38px; border-radius: 50%; background: #333; border: 0; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .itemBox.inner .slick-arrow:after { content: 'arrow_forward'; font-family: 'Material Icons', sans-serif; font-weight: 300; font-size: 24px; color: #fff; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga'; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .itemBox.inner .slick-prev { left: -5px; } .itemBox.inner .slick-next { right: -5px; } .itemBox.inner .slick-prev:after { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .contentBox .result { width: 100%; padding-bottom: 66px; margin-bottom: -65px; margin-top: 15px; } .contentBox .image { position: relative; z-index: 91; } .contentBox .result label { text-align: left; width: 19%; } .contentBox .result label:nth-child(3) { width: 28%; } .contentBox .result .weeks { width: 35%; padding-left: 25px; } .contentBox .result form { max-width: 520px; margin: 0 auto; } .contentBox p { padding: 0; } .contactBox .left { padding: 95px 35px; margin-top: 0; width: 100%; } .contactBox .left h2 { font-size: 30px; margin-bottom: 28px; } .contactBox p { font-size: 18px; line-height: 1.65; } .contactBox .right { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-top: 88px; padding-bottom: 35px; } .contactBox .right h2 { width: 100%; } .contactBox .right address { width: 34.7%; } .contactBox .right .social { width: 30.2%; } .contactBox .right .social p { line-height: 1.4; margin-bottom: 0; } .contactBox .right .social ul { padding-top: 7px; } .contactBox { width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0 0; } .contactBox.no-top-space { margin-top:-90px;} .ctaBox .name { font-size: 16px; margin-top: 60px; } .mfp-container { overflow: auto; } .contentBox .text { z-index: 9; } .itemBox.inner figure img { max-height: 236px; } .white-link, .red-link { padding-top: 0; padding-bottom: 0; } .back-to-button { margin-top: 43px; } #contentCntr { padding-bottom: 0; } .ctaBox .col-1:last-child { margin-bottom: 0; } .infoBox { margin-bottom: 60px; } .journeyBox .slide { display: block; } .journeyBox h1 { margin-bottom: 35px; font-size: 40px; line-height: 50px; } .journeyBox .slide.first h4 { font-size: 22px; line-height: 32px; } .journeyBox .slide .inner { padding: 190px 0 124px 125px; } .journeyBox .text { max-width: 460px; } .journeyBox .white-button { margin-top: 15px; } .journeyBox .slide.first .image { margin: -185px 0 0; position: relative; overflow: hidden; width: 100%; max-width: 100% } .journeyBox .slide.first .image img { margin: 0 90px 0 0; float: right; max-width: 291px; } .journeyBox .controls { margin-top: -142px; left: auto; right: 47px; } .journeyBox .controls ul li a { width: 20px; height: 20px; } .journeyBox .controls ul li a span { display: none; } .journeyBox .controls ul li { padding-bottom: 36px; } .journeyBox .line { max-width: 557px; bottom: 31px; right: 12px; } .journeyBox .previous-arrow { margin-left: -20px; top: 40px; left: 50%; } .journeyBox .next-arrow { margin-left: -20px; bottom: 40px; left: 50%; } .journeyBox h2 { font-size: 40px; line-height: 43px; } .journeyBox h4 { font-size: 24px; line-height: 37px; } .journeyBox p { font-size: 18px; line-height: 29px; } .journeyBox .slide ul { font-size: 18px; line-height: 23px; } .journeyBox .slide .text { max-width: 500px; } .journeyBox .button { margin-top: 12px; } .journeyBox .slide2, .journeyBox .slide3, .journeyBox .slide4, .journeyBox .slide5, .journeyBox .slide6 { background-image: none !important; } .journeyBox .mobile-image { margin: 84px 27px 0 -100px; width: calc(100% + 73px); display: block; } .journeyBox .mobile-image img { width: 100%; } .journeyBox .play { bottom: 170px; right: auto; left: 0px; width: 100%; } .journeyBox .play a { font-size: 18px; line-height: 29px; } .bannerBox .play { width: 100%; bottom:auto;left:25px;text-align:left;position:initial;} .bannerBox .play a { text-align:left;font-size: 18px; line-height: 29px; } .bannerBox .play a:after { content:'';width:0;height:0;} .bannerBox .play a:before { content:'';width:0;height:0;} .bannerBox .play a { transition: all 0.3s; cursor: pointer; border: 0; display: inline-block; padding: 4px 18px 12px 17px; line-height: 1.2; border-radius: 25px; color: #fff; font-size: 16px; font-weight: 700; background: none;border:2px solid white;text-shadow:none; } .journeyBox .slide.skin:before { opacity: 0.98; width: 70%; } .journeyBox .slide.yellow:before { opacity: 0.8; width: 70%; } .journeyBox .slide.red:before { opacity: 0.8; width: 70%; } .journeyBox .slide.red:before { opacity: 0.8; width: 70%; } .journeyBox .slide.blue:before { opacity: 0.98; width: 70%; } .journeyBox .slide.last h2 { font-size: 40px; line-height: 50px; } .journeyBox .slide.last .inner { padding-bottom: 395px; } .journeyBox .slide.last .image img { max-width: 355px; margin:0 auto; } .journeyBox .slide.last .image { width: 100%; } .journeyBox .slide.last .image .name { left: 125px; text-align: left; opacity: 0.5; max-width: 200px; } .journeyBox .controls ul li.current a:after { display: none; } .journeyBox .controls ul li.current a:before { width: 14px; height: 14px; top: 0px; left: 0px; background: #fff; } .journeyBox .controls.is-absolute { left: auto; right: 18px; } .journeyBox .slide .mobile-image:before { display: none; } .journeyBox .controls ul li.border:after { height: 38px; } .journeyBox .controls ul li.current:after { top: 18px; height: 38px; } } @media only screen and (max-width: 975px) { .menuBox { transition: all 0.3s; } } @media only screen and (max-width: 767px) { h1, h2 { font-size: 36px; line-height: 1.6; margin-bottom: 27px; } h2 { line-height: 1.0; font-size:28px;} .itemBox li h2, h3 { font-size: 24px; line-height: 1.2; } #headerCntr .button { display: none; } #headerCntr.sticky .menuBox { top: 66px; height: calc(100vh - 67px); } #contentCntr { padding: 0px 15px; } #headerCntr { padding: 27px 20px; } #headerCntr.sticky { padding-top: 14px; padding-bottom: 5px; height: 66px; } #headerCntr.sticky .mobileMenu { top: 20px; right: 15px; } #headerCntr .logo { width: 115px; } #headerCntr.sticky .logo { width: 45px; } #headerCntr.sticky .mobileMenu span { font-size: 0; color: transparent; } #headerCntr .mobileMenu { top: 30px; right: 15px; } .menuBox ul li { margin: 0; } #headerCntr.sticky .button.more-btn { display: inline-block; } #headerCntr.sticky .button.ghost { display: none;} ul li a.button.ghost { display:inline-block !important; z-index:999;} #headerCntr .button.more-btn { padding: 10px 18px; margin-right: 50px; } .menuBox ul li a:not(.button) { font-size: 18px;font-weight:500;letter-spacing:2.2px;/*border-bottom:1px dashed #333*/; padding:16px 0;} #headerCntr .menuBox ul li a.button { display: inline-block; margin: 20px 0 0; font-size: 16px; font-weight: 700; padding: 15px 24px 16px; } #headerCntr .menuBox ul li a.button.ghost { margin: 40px 0 0; padding:13px 24px 14px; color:white;border:2px solid white;} .menuBox ul li.has-mobile-show { display: block; } .bannerBox { margin-top:100px;} .bannerBox .text { padding: 68px 0 60px 0; } .bannerBox .image { margin: 0; } .bannerBox .button { padding: 9px 25px 11px; } .bannerBox .white-link, .bannerBox .red-link { margin: 22px 0 0; display: block; } .bannerBox .image { margin: 5px -26px 0 -60px; } .bannerBox .icons { width: 113px; top: -20px; } .bannerBox .bubble1 { width: 8px; } .bannerBox .bubble2 { width: 10px; } .bannerBox .bubble3 { width: 11px; } .heading { padding-top: 65px; padding-bottom: 5px; text-align: left; } .heading h2 { margin-bottom: 20px; } .heading p { font-size: 16px; line-height: 1.45 } .uspBox ul { margin: 0 -5px; } .uspBox li p { display: none; } .uspBox li { width: 100%; position: relative; padding-left: 70px; text-align: left; margin-bottom: 28px; } .uspBox figure { width: 70px; position: absolute; left: 0; top: 0; } .uspBox figure img { width: 52px; } .uspBox h3 { width: 100%; padding: 0; margin-bottom: 0; } .uspBox .top { margin-bottom: 3px; } .link { font-size: 14px; } #footerCntr { padding-top: 60px; } .footerBox .title { font-size: 16px; margin-bottom: 5px; } .footerBox nav ul + ul { margin-top: 25px; } .footerBox p, .footerBox li a { font-size: 16px; } .footerBox section:nth-child(2), .footerBox section { width: 100% } .footerBox section { margin-bottom: 50px; } .footerBox p { line-height: 1.9; margin-bottom: 28px; } .footerBox input[type="email"] { width: 100%; height: 40px; padding: 5px 20px; margin-bottom: 15px; } .footerBox .col-1 { margin-bottom: 57px; } .footerBox .button { padding-right: 15px; padding-left: 15px; width: 120px; } .footerBox .social .title { width: 100%; margin: 0 0 10px; } .footerBox { padding-bottom: 5px; } .copyrightBox li:after { margin-top: 6px; } .copyrightBox li { margin-top: 5px; } .ctaBox:not(.single) { padding: 0 30px; } .ctaBox.single .col-1:first-child .block { width:100%;} .ctaBox .heading { margin-bottom: 10px; } .ctaBox .image2, .ctaBox .image1 { display: none; } .ctaBox h3 { font-size: 18px; margin-bottom: 20px; } .ctaBox .block p { font-size: 14px; } .ctaBox .col-1:first-child .block, .ctaBox .block { padding: 26px 28px 43px; min-height: 10px; } .back-to-button, .button { padding: 9px 20px 11px; } .ctaBox .name { display: none; } .reviewsBox .slide { padding: 68px 30px 62px; } /* .reviewsBox .image { position: static; display: block; margin: 0 auto 50px; max-height:220px;width:auto; }*/ .reviewsBox .image { position: static; display: block; margin: 0 auto 50px; width: auto; max-height: 170px; display:none;} .reviewsBox h2 { font-size: 18px; margin-bottom: 22px; } .reviewsBox h3 { font-size:18px;} .reviewsBox p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; min-height:0;margin-top:30px;} .reviewsBox .name strong { font-size: 14px; margin-bottom: 3px; } .reviewsBox .name { font-size: 14px; } .reviewsBox .white-button { margin-bottom: 13px; } .reviewsBox .name span { margin: 20px 0 0; display: block; font-size: 16px; margin-bottom: 25px; } .reviewsBox .slick-dots { left: 28px; top: 100px; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left; } .successBox .bg { display: none; } .successBox .heading { padding-top: 70px; padding-bottom: 24px; } .successBox h3 { margin-bottom: 10px; } .successBox .col-1 p { font-size: 14px; margin-bottom: 20px; } .successBox .col-1 + .col-1, .successBox .col-1 { width: 100%; } .successBox .col-1 + .col-1 { margin-top: 40px; } .successBox li { font-size: 14px; padding-left: 30px; margin-bottom: 0; } .successBox li:before { top: -2px; left: 1px; } .successBox ul { margin-top: 25px; } .successBox { margin-bottom: 0; padding-bottom: 62px; } .successBox .heading { max-width: 100%; } .successBox.dark { background:#8EC0AD;} .uspBox { padding-bottom: 40px; } .downloadBox { width: 100%; padding: 55px 32px 100px; } .downloadBox p { font-size: 14px; margin-bottom: 26px; line-height: 1.7; } .downloadBox .button { height: 40px; margin-top: 5px; } .downloadBox cite { font-size: 14px; margin: 20px -10px 0 0; } select, input[type="number"], input[type="password"], input[type="email"], input[type="text"], input[type="tel"] { height: 40px; padding: 4px 20px; margin-bottom: 20px; } label { font-size: 16px; margin-bottom: 7px; } .downloadBox cite { padding-top: 0; } .downloadBox h3 { margin-bottom: 20px; font-size: 18px; } .downloadBox .col-1 { width: 100%; } .mfp-content { vertical-align: top; } .bannerBox.inner { padding-top: 75px; } .bannerBox.inner h1 { font-weight: 300; margin-bottom: 13px; } .bannerBox p { font-size: 18px; padding-top: 0; padding-right: 0; } .bannerBox.inner .text { padding-right: 0; } .bannerBox.inner .image { overflow: visible; left: 0; margin: -5px 0 0 0; } .bannerBox.inner .image img { float: none; max-width: 516px; position: relative; left: 50%; -webkit-transform: translateX(-48%); transform: translateX(-48%); } .itemBox { padding: 67px 30px 40px; } .itemBox li { width: 100%; padding-bottom: 40px; } .itemBox figure { margin-bottom: 20px; } .itemBox li strong { font-size: 14px; padding-top: 2px; } .itemBox li p { font-size: 14px; } .itemBox li .link { font-size: 16px; } .itemBox figure span { font-size: 0; color: transparent; top: 15px; } .infoBox { padding: 0 30px; margin-bottom: -35px; } .infoBox .bottom { display: none; } .infoBox .text { text-align: left; padding-top: 70px; padding-bottom: 20px; } .infoBox .image { margin: 0 auto; } .infoBox .text h2 { font-size: 36px; margin-bottom: 23px; } .infoBox .text p { font-size: 14px; margin-bottom: 32px; } .infoBox .button { margin-bottom: 14px; } .infoBox .name { font-size: 14px; padding-bottom: 0; } .infoBox:after { width: 100%; height: 88px; display: block; top: auto; bottom: 0; } .bannerBox.inner-detail .text { padding-top: 3px; } .bannerBox .subtitle { font-size: 16px; margin-bottom: 22px; } .bannerBox .title { font-size: 16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 27px; } .bannerBox.inner-detail .image img { max-width: 308px; margin: -15px -55px 0 0; } .bannerBox .title span { width: 100%; margin-left: 0; font-size: 15px; } .bannerBox .title span img { width: 44px; } .bannerBox.inner-detail h1 { font-size: 18px; } .bannerBox .play a {bottom:10vw;} .detailBox .text { text-align: left; padding-top: 0; } .detailBox .row h2 { font-size: 18px; } .detailBox p { font-size: 14px; line-height: 1.65; margin-bottom: 20px; } .detailBox .row { margin-bottom: 60px; } .detailBox .bottom { text-align: left; } .detailBox { padding-top: 65px; padding-bottom: 40px; } .detailBox .intro { display: block; } .detailBox .intro p { font-size: 16px; font-weight: 300; } .bannerBox.banner-4 .image img { max-width: 260px; } .bannerBox.banner-4 .image { margin-top: -15px; left: 0; } .bannerBox.banner-5 .image img { max-width: 320px; } .bannerBox.banner-5 .image { margin-top: -25px; left: -5px; } .bannerBox .name { display: none; } .contentBox .heading { padding-top: 55px; padding-bottom: 22px; } .contentBox .dark strong { font-size: 16px; margin-bottom: 15px; } .contentBox .heading h2 { margin-bottom: 12px; } .contentBox .heading p { font-size: 18px; line-height: 1.45; } .contentBox .text { text-align: left; padding-top: 0; } .contentBox .block { margin-bottom: 60px; } .contentBox .block h2 { font-size: 18px; } .contentBox p, .contentBox ul li { font-size: 14px; line-height: 1.65; margin-bottom: 20px; } .contentBox .row { margin: 0; padding-bottom: 0; } .contentBox .row.gray .image { margin-bottom: -25px; } .contentBox .row.gray { margin-bottom: 0; } .contentBox .row.gray .block { margin-bottom: 35px; } .contentBox .last .heading { padding-bottom: 25px; } .contentBox .last .text { text-align: left; } .itemBox.inner { margin: 80px 0 0 0; padding-bottom: 70px;} .itemBox.inner .heading { padding-top: 70px; padding-bottom: 10px; } .itemBox.inner li { padding: 0 10px 30px; } .itemBox.inner figure span { display: none; } .back-to-button { margin: 40px 0; } .itemBox.inner .slick-arrow { top: 75px; } .contentBox h3 { margin-bottom: 5px; } .contentBox p { padding: 3px 0 0; } .contentBox .result { width: auto; margin-right: -30px; margin-left: -30px; padding-top: 40px; padding-bottom: 75px; } .contentBox .result .weeks { width: 100%; margin-bottom: 15px; } .contentBox .result .col-1 { margin-bottom: 0; } .contentBox .result input[type="email"] { width: 100%; margin-bottom: 15px; } .contentBox .result label { width: 100%; margin-bottom: 15px; } .contentBox .result .number { width: 50%; margin-bottom: 15px; } .contentBox .result label:nth-child(3) { width: 50%; padding-bottom: 5px; padding-left: 15px; } .contactBox { padding-top: 0; } .contactBox.no-top-space { margin-top:30px;} .contactBox .left { padding: 55px 30px; } .contactBox .right h2, .contactBox .left h2 { font-size: 18px; margin-bottom: 20px; } .contactBox p { font-size: 14px; margin-bottom: 43px; } .contactBox cite { font-size: 14px; } .contactBox .col-2, .contactBox .right .social, .contactBox .right address, .contactBox .col-1 { width: 100%; } .contactBox .right { padding: 62px 30px 55px; } .contactBox .right p, .contactBox .right address { font-size: 16px; margin-bottom: 24px; } .contactBox .right h2 { margin-bottom: 24px; } #headerCntr.sticky .mobileMenu { width: 40px; } .contactBox .js-datepicker:after { top: 4px; right: 10px; } .itemBox.inner figure { height: 180px; } .itemBox.inner figure img { max-height: 180px; } .contactBox .js-datepicker { height: 40px; margin-bottom: 20px; } .infoBox { margin-bottom: 0; } .journeyBox h1 { margin-bottom: 25px; font-size: 18px; line-height: 21px; font-weight: 300; } .journeyBox .slide.last h2 { margin-bottom: 32px; font-size: 36px; line-height: 32px; } .journeyBox .slide.last h4 { margin-bottom: 20px; font-size: 18px; line-height: 28px; } .journeyBox .slide .inner { padding: 144px 30px 30px; } .journeyBox .slide.first h4 { margin-bottom: 24px; font-size: 18px; line-height: 28px; } .journeyBox .slide.last h4 br { display: none; } .journeyBox h2 { margin-bottom: 24px; font-size: 36px; line-height: 35px; } .journeyBox h4 { margin-bottom: 28px; font-size: 16px; line-height: 23px; } .journeyBox p { font-size: 14px; line-height: 23px; } .journeyBox .slide ul { font-size: 14px; line-height: 18px; } .journeyBox .slide ul li:before { top: -2px; font-size: 18px; line-height: 22px; } .journeyBox .slide ul li { padding: 0 0 5px 30px; } .journeyBox .button { padding: 11px 15px; } .journeyBox .mobile-image { margin: 35px -30px 198px; width: calc(100% + 60px); position: relative; padding:25px;} .journeyBox .mobile-image img { border-radius:5px;} .journeyBox .mobile-image.no-video { margin-bottom:152px;} .journeyBox .play a { font-size: 14px; line-height: 23px; } .journeyBox .play a:before { margin-bottom: 5px; font-size: 72px; line-height: 72px; } .journeyBox .play a:after { margin-left: -25px; top: 11px; width: 50px; height: 50px; } .journeyBox .controls, .journeyBox .controls.is-absolute { right: -9px; margin-top: -148px; } .journeyBox .text { max-width: 460px; } .journeyBox .slide.first .image { padding: 13px 14px 0; margin: 0px; } .journeyBox .slide.first .image img { margin: 0px; float: none; max-width: 232px; } .journeyBox .white-button { margin-top: 0px; } .journeyBox .line { max-width: 452px; bottom: 17px; right: 0px; } .journeyBox .slide { margin: 0px; } .journeyBox .white-link { margin-top: 25px; display: table; } .journeyBox .play { margin-left: -130px; bottom: 141px; width: 260px; left: 50%; } .journeyBox .slide.last .image { bottom: 0;} .journeyBox .slide.last .image img { margin: 0 auto; float: none; } .journeyBox .slide.last .inner { padding-bottom: 0px; } .journeyBox .slide.last .image .name { padding: 20px 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); position: relative; left: 50%; bottom: auto; font-size: 14px; line-height: 23px; opacity: 1; text-align: center; max-width: 240px; display: block; } } /* mobile */ @media only screen and (max-width: 580px) { .contentBox .result .col-1.new select { width:100%;} .contentBox .result .col-1.new span { font-size:16px;} .journeyBox .slide.last .image img { max-height: 220px; } #headerCntr.journey { position: fixed; } } /************************************************* PROSPECT CAMPAIGN CSS /*************************************************/ .backgroundImage .bannerBox .image { padding-right:0px;} .backgroundImage .bannerBox .image img { max-width:none;} .backgroundImage .bannerBox .name { display:none;} .campaign .bannerBox .image.stretch, .backgroundImage .bannerBox .image.stretch { position: absolute; right: 0px; bottom: 0px; margin: 0px; width: auto; z-index: 1; } .campaign .bannerBox .image.stretch img, .backgroundImage .bannerBox .image.stretch img { max-height: 600px; opacity: 0.8; -webkit-mask-image:-webkit-gradient(linear, 50% top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)) -moz-linear-gradient(right, rgba(0,0,0,01, rgba(0,0,0,0))); } @media only screen and (max-width: 1289px) { .campaign .bannerBo{ min-height:525px;} } @media only screen and (max-width: 979px) { .campaign .bannerBox .image.stretch, .backgroundImage .bannerBox .image.stretch { padding:0px;} .campaign .bannerBox, .backgroundImage .bannerBox { min-height:450px;} .campaign .bannerBox .image.stretch img, .backgroundImage .bannerBox .image.stretch img { opacity: 0.3;} } @media only screen and (max-width: 767px) { .campaign .bannerBox .image.stretch img, .backgroundImage .bannerBox .image.stretch img { -webkit-mask-image:-webkit-gradient(linear, right bottom, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)) -moz-linear-gradient(bottom, rgba(0,0,0,01, rgba(0,0,0,0))); } } /************************************************* COACH PAGE CSS - + lined in module-coach-page.. /*************************************************/ /* Standard page */ .campaign .contentBox.personal .heading { padding-bottom:15px; } .campaign .contentBox.personal .image { max-width:170px; text-align:center;} .campaign .contentBox.personal .image img {border-radius:50%; border:5px white solid; box-shadow:0px 0px 3px 3px rgba(0,0,0,0.1); margin-bottom:10px;} .campaign .contentBox.personal strong { color:#333; } .campaign .contentBox.personal .block { max-width: 750px; margin: 0 auto; } .campaign .contentBox.personal .text { width: 70%; } /* Coach cutout banner */ .bannerBox.coach { background-image:none;} .bannerBox.coach .coloredLayer { background-color:black;opacity:0.2;} .bannerBox.coach .image { padding-right:100px;margin-left:99px;width:500px;max-width:35%;padding-right:0;margin-left:0;position:absolute;right:5%;} .bannerBox.coach .name { margin-right:-150px;} @media only screen and (max-width: 1449px) { .coachpage .bannerBox .name { margin-right:520px;} } @media only screen and (max-width: 1289px) { .coachpage .bannerBox.coach { min-height:420px;} .coachpage .bannerBox .name { margin-right:-150px;right:55%;} } @media only screen and (max-width: 979px) { .coachpage .bannerBox.coach {padding-top:0;min-height:350px;} .coachpage .bannerBox.coach .text { width:60%;background:none;;} .coachpage .bannerBox.coach .image { position:relative;float:right;margin-bottom:-30px;} .coachpage .bannerBox .name { margin-right:0px;margin-left:30px;} .coachpage .bannerBox .name strong { display:inline-block;} } @media only screen and (max-width: 768px) { .coachpage .bannerBox.coach { min-height:290px; } .coachpage .bannerBox.coach .text { padding:0;margin-top:30px;} .coachpage .bannerBox.coach .image { z-index:0;width:100%;} .coachpage .bannerBox.coach .image img { float:right;} .coachpage .bannerBox .name { display: block;width: 100%;z-index: 100;left: 0;} } @media only screen and (max-width: 480px) { .coachpage .bannerBox.coach .text { width:100%;} .coachpage .bannerBox.coach .image {max-width:none;margin-top:-90px;} .coachpage .bannerBox.coach .image img { max-width:190px;margin-right:-30px;} }