.noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-user-select: none; -ms-touch-action: none; -ms-user-select: none; -moz-user-select: none; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base { width: 100%; height: 100%; position: relative; } .noUi-origin { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .noUi-handle { position: relative; z-index: 1; } .noUi-stacking .noUi-handle { z-index: 10; } .noUi-stacking+.noUi-origin { *z-index: -1; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s; } .noUi-state-drag * { cursor: inherit !important; } .noUi-base { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } .noUi-background { background: #FAFAFA; box-shadow: inset 0 1px 1px #f0f0f0; } .noUi-connect { background: #3FB8AF; box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45); -webkit-transition: background 450ms; transition: background 450ms; } .noUi-origin { border-radius: 2px; } .noUi-target { border-radius: 4px; border: 1px solid #D3D3D3; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; } .noUi-target.noUi-connect { box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45), 0 3px 6px -5px #BBB; } .noUi-dragable { cursor: w-resize; } .noUi-vertical .noUi-dragable { cursor: n-resize; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } .noUi-active { box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } [disabled].noUi-connect, [disabled] .noUi-connect { background: #B8B8B8; } [disabled] .noUi-handle { cursor: not-allowed; } .spin { -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-transform: rotate(360deg); -moz-animation-name: spin; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }.in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 705ms; -moz-animation-timing-function: ease-in-out; -moz-animation-duration: 705ms; } .slide.out { -webkit-transform: translateX(-100%); -webkit-animation-name: slideouttoleft; -moz-transform: translateX(-100%); -moz-animation-name: slideouttoleft; } .slide.in { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromright; -moz-transform: translateX(0); -moz-animation-name: slideinfromright; } .slide.out.reverse { -webkit-transform: translateX(100%); -webkit-animation-name: slideouttoright; -moz-transform: translateX(100%); -moz-animation-name: slideouttoright; } .slide.in.reverse { -webkit-transform: translateX(0); -webkit-animation-name: slideinfromleft; -moz-transform: translateX(0); -moz-animation-name: slideinfromleft; } .slideup.out { -webkit-animation-name: dontmove; -moz-animation-name: dontmove; z-index: 0; } .slideup.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfrombottom; -moz-transform: translateY(0); -moz-animation-name: slideinfrombottom; z-index: 10; } .slideup.in.reverse { z-index: 0; -webkit-animation-name: dontmove; -moz-animation-name: dontmove; } .slideup.out.reverse { -webkit-transform: translateY(100%); z-index: 10; -webkit-animation-name: slideouttobottom; -moz-transform: translateY(100%); -moz-animation-name: slideouttobottom; } .slidedown.out { -webkit-animation-name: dontmove; -moz-animation-name: dontmove; z-index: 0; } .slidedown.in { -webkit-transform: translateY(0); -webkit-animation-name: slideinfromtop; -moz-transform: translateY(0); -moz-animation-name: slideinfromtop; z-index: 10; } .slidedown.in.reverse { z-index: 0; -webkit-animation-name: dontmove; -moz-animation-name: dontmove; } .slidedown.out.reverse { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); z-index: 10; -webkit-animation-name: slideouttotop; -moz-animation-name: slideouttotop; } @-webkit-keyframes slideinfromright { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } }@-webkit-keyframes slideinfromleft { from { -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(0); } }@-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } }@-webkit-keyframes slideouttoright { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(100%); } }@-webkit-keyframes slideinfromtop { from { -webkit-transform: translateY(-100%); } to { -webkit-transform: translateY(0); } }@-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }@-webkit-keyframes slideouttobottom { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(100%); } }@-webkit-keyframes slideouttotop { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(-100%); } }@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }@-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }.fade.out { z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; } .fade.in { opacity: 1; z-index: 10; -webkit-animation-name: fadein; -moz-animation-name: fadein; } .viewport-flip { -webkit-perspective: 1000; -moz-perspective: 1000; position: absolute; } .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page { width: 100%; height: 100%; overflow: hidden; } .flip { -webkit-animation-duration: .65s; -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); -moz-animation-duration: .65s; -moz-backface-visibility: hidden; -moz-transform: translateX(0); } .flip.out { -webkit-transform: rotateY(-180deg) scale(0.8); -webkit-animation-name: flipouttoleft; -moz-transform: rotateY(-180deg) scale(0.8); -moz-animation-name: flipouttoleft; } .flip.in { -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromleft; -moz-transform: rotateY(0) scale(1); -moz-animation-name: flipinfromleft; } .flip.out.reverse { -webkit-transform: rotateY(180deg) scale(0.8); -webkit-animation-name: flipouttoright; -moz-transform: rotateY(180deg) scale(0.8); -moz-animation-name: flipouttoright; } .flip.in.reverse { -webkit-transform: rotateY(0) scale(1); -webkit-animation-name: flipinfromright; -moz-transform: rotateY(0) scale(1); -moz-animation-name: flipinfromright; } @-webkit-keyframes flipinfromright { from { -webkit-transform: rotateY(-180deg) scale(0.8); } to { -webkit-transform: rotateY(0) scale(1); } }@-webkit-keyframes flipinfromleft { from { -webkit-transform: rotateY(180deg) scale(0.8); } to { -webkit-transform: rotateY(0) scale(1); } }@-webkit-keyframes flipouttoleft { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(-180deg) scale(0.8); } }@-webkit-keyframes flipouttoright { from { -webkit-transform: rotateY(0) scale(1); } to { -webkit-transform: rotateY(180deg) scale(0.8); } }@-webkit-keyframes dontmove { from { opacity: 1; } to { opacity: 1; } }.pop { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%} .pop.in { -webkit-transform: scale(1); opacity: 1; -webkit-animation-name: popin; z-index: 10; -moz-transform: scale(1); -moz-animation-name: popin; } .pop.in.reverse { z-index: 0; -webkit-animation-name: dontmove; -moz-animation-name: dontmove; } .pop.out.reverse { -webkit-transform: scale(0.2); opacity: 0; -webkit-animation-name: popout; z-index: 10; -moz-transform: scale(0.2); -moz-animation-name: popout; } @-webkit-keyframes popin { from { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); opacity: 0; } to { -webkit-transform: scale(1); -moz-transform: scale(1); opacity: 1; } }@-webkit-keyframes popout { from { -webkit-transform: scale(1); -moz-transform: scale(1); opacity: 1; } to { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); opacity: 0; } }html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } }@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } }@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }.paper-wrap { position: fixed; height: 100vh; width: 100vw; top: 0; left: 0; z-index: 100000; pointer-events: none; overflow: hidden; } .paper-wrap .modal-back { -webkit-transition: background 500ms; transition: background 500ms; width: 100%; position: fixed; height: 100%; left: 0; top: 0; } .paper-wrap .form-paper { position: relative; width: 800px; margin-top: 180vh; margin-left: calc( (100vw - 800px) / 2); margin-bottom: 120px; box-shadow: 19px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22); background-color: #222222; padding: 40px 60px; -webkit-transition: margin-top 500ms; -webkit-transition: margin-top 1s; transition: margin-top 1s; isolation: isolate; } @media screen and (max-width: 768px) { .paper-wrap .form-paper { width: calc(100vw - 20px); margin-left: 10px; padding: 10px 30px; } }.paper-wrap .form-paper.display-as-mobile { width: calc(100vw - 20px); margin-left: 10px; padding: 10px 30px; } .paper-wrap .form-paper.display-as-mobile { width: 800px; margin-left: calc( (100vw - 800px) / 2); padding: 40px 60px; } .paper-wrap .form-paper .close-form { color: #fff !important; position: absolute; top: 40px; left: 60px; } @media screen and (max-width: 768px) { .paper-wrap .form-paper .close-form { top: 20px; left: 30px; } }.paper-wrap .form-paper .close-form.display-as-mobile { top: 20px; left: 30px; } .paper-wrap .form-paper .letter-date { position: absolute; top: 40px; right: 60px; display: none; } .paper-wrap .form-paper .form-content { display: none; margin: 40px 0; } .paper-wrap .form-paper .form-content.show { display: block; } .paper-wrap .form-paper .form-content p { margin-bottom: 0.5em; font-size: 28px; line-height: 1.5; } .paper-wrap .form-paper .form-content p.privacy { font-size: 18px; margin-bottom: 2em; margin-top: 2em; } @media screen and (max-width: 480px) { .paper-wrap .form-paper .form-content p { font-size: 16px; } }.paper-wrap .form-paper .form-content p.display-as-mobile { font-size: 16px; } .paper-wrap .form-paper .form-content p.display-as-mobile { margin-bottom: 0.5em; font-size: 28px; line-height: 1.5; } .paper-wrap .form-paper .form-content input[type='text'], .paper-wrap .form-paper .form-content input[type='email'], .paper-wrap .form-paper .form-content textarea, .paper-wrap .form-paper .form-content select { font-size: 28px; font-family: "bree-serif", "Source Sans Pro", sans-serif; font-weight: 300; height: 1.5em; margin-bottom: 0em; } @media screen and (max-width: 480px) { .paper-wrap .form-paper .form-content input[type='text'], .paper-wrap .form-paper .form-content input[type='email'], .paper-wrap .form-paper .form-content textarea, .paper-wrap .form-paper .form-content select { font-size: 18px; } }.paper-wrap .form-paper .form-content input[type='text'].display-as-mobile, .paper-wrap .form-paper .form-content input[type='email'].display-as-mobile, .paper-wrap .form-paper .form-content textarea.display-as-mobile, .paper-wrap .form-paper .form-content select.display-as-mobile { font-size: 18px; } .paper-wrap .form-paper .form-content input[type='text'].display-as-mobile, .paper-wrap .form-paper .form-content input[type='email'].display-as-mobile, .paper-wrap .form-paper .form-content textarea.display-as-mobile, .paper-wrap .form-paper .form-content select.display-as-mobile { font-size: 28px; } @media screen and (max-width: 480px) { .paper-wrap .form-paper .form-content[data-form-name="subscribe"] input { width: 100%; margin: 0; margin-bottom: 10px; } }.paper-wrap .form-paper .form-content[data-form-name="subscribe"] input.display-as-mobile { width: 100%; margin: 0; margin-bottom: 10px; } .paper-wrap.show-form { pointer-events: auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .paper-wrap.show-form .modal-back { background-color: rgba(0, 0, 0, 0.3); } .paper-wrap.show-form .form-paper { margin-top: 80px !important; } html.no-scroll { overflow-y: hidden !important; } .main-form h2, .main-form h4, .main-form h5, .main-form .form-heading { color: #fff200; text-align: left; } .main-form h2, .main-form .form-heading { font-size: 50px; font-family: "bree", "Source Sans Pro", sans-serif; font-weight: 800; margin-bottom: 0px; display: block; } @media screen and (max-width: 480px) { .main-form h2, .main-form .form-heading { font-size: 22px; margin-bottom: 0; } }.main-form h2.display-as-mobile, .main-form .form-heading.display-as-mobile { font-size: 22px; margin-bottom: 0; } .main-form h2.display-as-mobile, .main-form .form-heading.display-as-mobile { font-size: 50px !important; } .main-form h4 { text-transform: uppercase; } @media screen and (max-width: 480px) { .main-form h4 { font-size: 1.2em; } }.main-form h4.display-as-mobile { font-size: 1.2em; } .main-form h5 { font-family: "bree-serif", "Source Sans Pro", sans-serif; color: #000; } .main-form p, .main-form label { -webkit-transform: translate3d(0, 0, 0); color: #fff; font-size: 18px; line-height: 2; } .main-form .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; margin-bottom: 15px; } .main-form .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .main-form .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .main-form .b1:hover .label { color: #000; } .main-form .b1:hover:after { height: 100%} .form-on-page a { color: #000 !important; text-decoration: underline; } .form-on-page p, .form-on-page h2 { color: #000; } .form-on-page h3, .form-on-page h4, .form-on-page h5 { color: #000; text-align: left; } .form-on-page h4 { color: #000; } .form-on-page .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .form-on-page .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .form-on-page .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .form-on-page .b1:hover .label { color: #fff; } .form-on-page .b1:hover:after { height: 100%} @media screen and (max-width: 480px) { .form-on-page p, .form-on-page .b1 { text-align: left !important; float: left !important; } }.form-on-page.display-as-mobile p, .form-on-page.display-as-mobile .b1 { text-align: left !important; float: left !important; } .form-cta h2, .form-cta h3, .form-cta h4 { color: #888; } .form-cta .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .form-cta .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #e8168c; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .form-cta .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #e8168c; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .form-cta .b1:hover .label { color: #fff; } .form-cta .b1:hover:after { height: 100%} form label, form .label, .step label, .step .label { color: #000; height: 30px; line-height: 30px; font-size: 15px; font-family: "bree", "Source Sans Pro", sans-serif; } @media screen and (max-width: 768px) { form label, form .label, .step label, .step .label { font-size: 13px; } } form label.display-as-mobile, form .label.display-as-mobile, .step label.display-as-mobile, .step .label.display-as-mobile { font-size: 13px; } form .divider, .step .divider { margin: 1.5em 0; display: block; clear: both; } form .check, .step .check { margin-right: 10px; margin-bottom: 1em; overflow: hidden; clear: both; cursor: pointer; display: block; } form .square-checkbox, .step .square-checkbox { position: relative; width: 30px; display: block; float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } form .square-checkbox .onoffswitch-checkbox, .step .square-checkbox .onoffswitch-checkbox { display: block; position: absolute; top: 6px; left: 7px; opacity: 1; } form .square-checkbox .onoffswitch-checkbox:focus, .step .square-checkbox .onoffswitch-checkbox:focus { box-shadow: 0 0 6pt 5pt #fff200; } form .square-checkbox .onoffswitch-label, .step .square-checkbox .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 0 solid #000000; border-radius: 10em; } form .square-checkbox .onoffswitch-inner, .step .square-checkbox .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; -webkit-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } form .square-checkbox .onoffswitch-inner:before, form .square-checkbox .onoffswitch-inner:after, .step .square-checkbox .onoffswitch-inner:before, .step .square-checkbox .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 0px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } form .square-checkbox .onoffswitch-inner:before, .step .square-checkbox .onoffswitch-inner:before { content: "ON"; padding-left: 0px; background-color: #19B6F1; color: #FFFFFF; } form .square-checkbox .onoffswitch-inner:after, .step .square-checkbox .onoffswitch-inner:after { content: ""; padding-right: 0px; background-color: #444444; color: #999999; text-align: right; } form .square-checkbox .onoffswitch-switch, .step .square-checkbox .onoffswitch-switch { display: block; width: 22px; margin: 4px; background: #222; border: 0 solid #000000; border-radius: 10em; position: absolute; top: 0; bottom: 0; right: 0; -webkit-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } form .square-checkbox .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-inner, .step .square-checkbox .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-inner { margin-left: 0; } form .square-checkbox .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-switch, .step .square-checkbox .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-switch { background: #222; right: 0px; } form .three-way-switch, .step .three-way-switch { float: left; position: relative; } form .three-way-switch .radiowrapper, .step .three-way-switch .radiowrapper { position: relative; display: inline-block; } form .three-way-switch .radiowrapper input, .step .three-way-switch .radiowrapper input { margin: auto; position: absolute; top: 5px; left: calc(50% - 5px); outline: none; } form .three-way-switch .radiowrapper input:before, .step .three-way-switch .radiowrapper input:before { content: ''; display: block; position: absolute; top: -5px; left: -12px; width: 30px; height: 30px; border-radius: 100px; z-index: 9898; pointer-events: none; -webkit-transition: -webkit-transform 400ms; transition: -webkit-transform 400ms; transition: transform 400ms; transition: transform 400ms, -webkit-transform 400ms; -webkit-transform: scale(0); transform: scale(0); } form .three-way-switch .radiowrapper input:checked:before, .step .three-way-switch .radiowrapper input:checked:before { -webkit-transform: scale(1); transform: scale(1); } form .three-way-switch .radiowrapper:nth-of-type(1) input:before, .step .three-way-switch .radiowrapper:nth-of-type(1) input:before { background-color: #00aeef; } form .three-way-switch .radiowrapper:nth-of-type(2) input:before, .step .three-way-switch .radiowrapper:nth-of-type(2) input:before { background-color: #eee; } form .three-way-switch .radiowrapper:nth-of-type(3) input:before, .step .three-way-switch .radiowrapper:nth-of-type(3) input:before { background-color: #fff200; } form .three-way-switch .radiowrapper label, .step .three-way-switch .radiowrapper label { color: white !important; display: block; height: 50px; line-height: 90px; vertical-align: bottom; cursor: pointer; padding: 0 10px; } form .three-way-switch .switch-knob, .step .three-way-switch .switch-knob { display: block; position: absolute; width: 50px; height: 22px; width: 22px; top: -1px; left: -8px; background-color: #000; border-radius: 100px; z-index: 9899; -webkit-transform: translateX(81.5px) translateY(5px); transform: translateX(81.5px) translateY(5px); -webkit-transition: -webkit-transform 400ms; transition: -webkit-transform 400ms; transition: transform 400ms; transition: transform 400ms, -webkit-transform 400ms; } @media screen and (max-width: 480px) { form .three-way-switch .switch-knob, .step .three-way-switch .switch-knob { -webkit-transform: translateX(74.5px) translateY(5px); transform: translateX(74.5px) translateY(5px); } }form .three-way-switch .switch-knob.display-as-mobile, .step .three-way-switch .switch-knob.display-as-mobile { -webkit-transform: translateX(74.5px) translateY(5px); transform: translateX(74.5px) translateY(5px); } form .three-way-switch:before, .step .three-way-switch:before { content: ''; display: block; position: absolute; top: 0; left: 3px; width: calc(100% - 10px); height: 30px; background-color: #444444; border-radius: 1000px; z-index: 1; pointer-events: none; } form .file-upload-input, .step .file-upload-input { width: 100%} form .file-upload-button, .step .file-upload-button { cursor: pointer; display: inline-block; padding: 0 15px; position: absolute; border: none; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; left: 0; height: 40px; background-color: #444; float: left; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; color: #222; } form .file-upload-button:hover, .step .file-upload-button:hover { background-color: #eee; } form #budget-slider, form #timeframe-slider, .step #budget-slider, .step #timeframe-slider { margin: 1em 0 2em 0; } form .noUi-target, form .noUi-background, form .noUi-horizontal, form .noUi-handle, form .noUi-active, form .noUi-origin, form .noUi-base, .step .noUi-target, .step .noUi-background, .step .noUi-horizontal, .step .noUi-handle, .step .noUi-active, .step .noUi-origin, .step .noUi-base { box-shadow: none; -webkit-box-shadow: none; border: 0; } form .noUi-background, .step .noUi-background { background: none; } form .noUi-base, .step .noUi-base { border-radius: 10em !important; } form .noUi-handle, .step .noUi-handle { box-shadow: inset 1px 1px 0px 2px rgba(115, 212, 247, 0.77), 2px 2px 1px 0px rgba(0, 0, 0, 0.4); cursor: pointer; width: 30px !important; height: 30px !important; background: #00aeef; border-radius: 100%; left: 0 !important; } form .noUi-handle.noUi-handle-upper, .step .noUi-handle.noUi-handle-upper { left: -15px !important; } form .noUi-handle:before, form .noUi-handle:after, .step .noUi-handle:before, .step .noUi-handle:after { background: #00aeef; display: none; } form .noUi-connect, .step .noUi-connect { box-shadow: inset 2px 1px 1px 0 rgba(115, 212, 247, 0.77), 2px 2px 0 0px rgba(0, 0, 0, 0.5); background: #00aeef !important; border-radius: 10em !important; } form .noUi-base, form .noUi-origin, .step .noUi-base, .step .noUi-origin { border-radius: 10em; background-color: #333; } form, .step { width: 100%} form .form-group.whole, .step .form-group.whole { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.whole:last-child, .step .form-group.whole:last-child { margin-right: 0; } form .form-group.half, .step .form-group.half { float: left; display: block; margin-right: 16.03631%; width: 41.98184%; margin-right: 2%; width: 48%} form .form-group.half:last-child, .step .form-group.half:last-child { margin-right: 0; } @media screen and (max-width: 480px) { form .form-group.half, .step .form-group.half { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.half:last-child, .step .form-group.half:last-child { margin-right: 0; } }form .form-group.half.display-as-mobile, .step .form-group.half.display-as-mobile { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.half.display-as-mobile:last-child, .step .form-group.half.display-as-mobile:last-child { margin-right: 0; } form .form-group.half.last, .step .form-group.half.last { margin-right: 0; width: 50%} @media screen and (max-width: 480px) { form .form-group.half.last, .step .form-group.half.last { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.half.last:last-child, .step .form-group.half.last:last-child { margin-right: 0; } }form .form-group.half.last.display-as-mobile, .step .form-group.half.last.display-as-mobile { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.half.last.display-as-mobile:last-child, .step .form-group.half.last.display-as-mobile:last-child { margin-right: 0; } form .form-group.third, .step .form-group.third { float: left; display: block; margin-right: 10.1484%; width: 26.56773%} form .form-group.third:last-child, .step .form-group.third:last-child { margin-right: 0; } @media screen and (max-width: 768px) { form .form-group.third, .step .form-group.third { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.third:last-child, .step .form-group.third:last-child { margin-right: 0; } }form .form-group.third.display-as-mobile, .step .form-group.third.display-as-mobile { float: left; display: block; margin-right: 38.19821%; width: 100%} form .form-group.third.display-as-mobile:last-child, .step .form-group.third.display-as-mobile:last-child { margin-right: 0; } form .form-group.third.last, .step .form-group.third.last { margin-right: 0; } form .check, .step .check { display: inline-block; } form .check>.label, .step .check>.label { display: block; float: left; height: 30px; line-height: 30px; margin-left: 8px; } form .check>.label--no, .step .check>.label--no { display: block; float: left; height: 30px; line-height: 30px; margin-right: 8px; margin-left: 0; } form .onoffswitch, .step .onoffswitch { position: relative; width: 56px; display: block; float: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } form .onoffswitch .onoffswitch-checkbox, .step .onoffswitch .onoffswitch-checkbox { display: block; position: absolute; top: 6px; left: 7px; opacity: 1; } form .onoffswitch .onoffswitch-checkbox:focus, .step .onoffswitch .onoffswitch-checkbox:focus { box-shadow: 0 0 6pt 5pt #fff200; } form .onoffswitch .onoffswitch-label, .step .onoffswitch .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 0 solid #000000; border-radius: 10em; } form .onoffswitch .onoffswitch-inner, .step .onoffswitch .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; -webkit-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } form .onoffswitch .onoffswitch-inner:before, form .onoffswitch .onoffswitch-inner:after, .step .onoffswitch .onoffswitch-inner:before, .step .onoffswitch .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 0px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } form .onoffswitch .onoffswitch-inner:before, .step .onoffswitch .onoffswitch-inner:before { content: "ON"; padding-left: 0px; background-color: #19B6F1; color: #FFFFFF; } form .onoffswitch .onoffswitch-inner:after, .step .onoffswitch .onoffswitch-inner:after { content: ""; padding-right: 0px; background-color: #444444; color: #999999; text-align: right; } form .onoffswitch .onoffswitch-switch, .step .onoffswitch .onoffswitch-switch { display: block; width: 22px; margin: 4px; background: #000; border: 0 solid #000000; border-radius: 10em; position: absolute; top: 0; bottom: 0; right: 26px; -webkit-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } form .onoffswitch .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-inner, .step .onoffswitch .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-inner { margin-left: 0; } form .onoffswitch .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-switch, .step .onoffswitch .onoffswitch-checkbox:checked ~ .onoffswitch-label .onoffswitch-switch { background: #222; right: 0px; } form textarea, .step textarea { resize: vertical; } .custom-file-upload-hidden { display: none; visibility: hidden; position: absolute; left: -9999px; } .custom-file-upload { display: block; width: auto; font-size: 16px; height: 50px; } .custom-file-upload label { display: block; margin-bottom: 5px; } .file-upload-wrapper { position: relative; } .file-upload-input { width: 300px; color: #000; font-size: 16px; height: 40px !important; padding: 11px 17px; border: none; background-color: #00aeef; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; float: left; } .file-upload-input:hover, .file-upload-input:focus { outline: none; } .file-upload-button { cursor: pointer; display: inline-block; color: #000; font-size: 16px; text-transform: uppercase; padding: 11px 20px; border: none; margin-left: -1px; font-family: "bree", "Source Sans Pro", sans-serif; width: 150px; float: left; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .show-interest1-valid, .show-interest2-valid { display: none; } .show-interest1-valid.show, .show-interest2-valid.show { display: inline-block; } .intro--form { background-color: #000 !important; } .web-questionnaire-wrap { min-height: 800px; } .startup-questionnaire-wrap { min-height: 400px; } .branding-questionnaire-wrap { min-height: 650px; } .marketing-questionnaire-wrap, .career-questionnaire-wrap { min-height: 650px; } header.form .page-name { position: absolute; top: 0; line-height: 60px; font-size: 24px; font-weight: 300; color: white; -webkit-transition: opacity 300ms; transition: opacity 300ms; opacity: 1; display: inline-block; vertical-align: top; left: 220px; } @media screen and (max-width: 480px) { header.form .page-name { left: 155px; } }header.form .page-name.display-as-mobile { left: 155px; } header.form .page-name #page-controls { display: inline-block; vertical-align: top; width: auto; margin-left: 15px; } @media screen and (max-width: 480px) { header.form .page-name #page-controls { display: none; } }header.form .page-name #page-controls.display-as-mobile { display: none; } header.form .vertical-divider { opacity: 1; left: 208px; } @media screen and (max-width: 480px) { header.form .vertical-divider { display: block; left: 140px; } }header.form .vertical-divider.display-as-mobile { display: block; left: 140px; } .close.form { width: 150px !important; margin: 7px 0 !important; margin-left: 50px !important; } @media screen and (max-width: 480px) { .close.form { width: 110px !important; margin: 13px 0 !important; margin-left: 20px !important; } }.close.form.display-as-mobile { width: 110px !important; margin: 13px 0 !important; margin-left: 20px !important; } .header.image-header-form { background-size: cover; background-position: bottom; position: relative; overflow: hidden; height: 10vh; padding: 0; } .header.image-header-form .image-header--image-form { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center center; z-index: -1; } .header.image-header-form .image-header--image-form .inner { display: table-cell; text-align: left; display: inline-block; } .site-container.form { position: relative; max-width: 100%} @media screen and (max-width: 768px) { .site-container.form { padding: 0; } }.site-container.form.display-as-mobile { padding: 0; } @media screen and (max-width: 480px) { .site-container.form { padding: 0; } }.site-container.form.display-as-mobile { padding: 0; } .site-container.form section { position: relative; overflow-x: initial; max-width: 100%} .intro-description { font-size: 32px; line-height: 1.5; } .main-form .step { width: 800px; max-width: 800px; min-height: 400px; margin: auto; background-color: #000; position: relative; padding: 40px; margin-top: -200px; } @media screen and (max-width: 480px) { .main-form .step { width: 100%; margin-top: -100px; } }.main-form .step.display-as-mobile { width: 100%; margin-top: -100px; } .main-form .step .intro-description { font-size: 20px; } @media screen and (max-width: 480px) { .main-form .step .intro-description { font-size: 22px; } }.main-form .step .intro-description.display-as-mobile { font-size: 22px; } .main-form .step .box-button { position: absolute; width: 100%; left: 0; text-align: center; bottom: 40px; } .main-form .step .form-label-text { color: #fff; display: block; float: left; width: 100%; font-size: 20px; margin: 30px 0px 10px 0px; } .main-form .step a { padding: 15px; cursor: pointer; font-size: 20px; } .main-form .step .check .label, .main-form .step h5 { color: #fff; } .main-form .step input[type='text'], .main-form .step input[type='email'] { text-align: left; margin-bottom: 15px; width: 100%} .main-form .step .file-upload-input { text-align: center !important; margin-bottom: 0 !important; } .main-form .step p { padding-bottom: 0; } .main-form .step input[type='text'], .main-form .step input[type='email'] { margin-bottom: 20px; } #hidden-name { display: none; } .loading-gif { height: 80px; opacity: 0; display: block; margin-top: -50px; margin-left: 40px; margin-bottom: -30px; mix-blend-mode: lighten; } @-webkit-keyframes fadeIn { from { opacity: 0; } }@keyframes fadeIn { from { opacity: 0; } }html, body { overflow-x: hidden !important; line-height: 1.4; } html.slide-page-opened, body.slide-page-opened { overflow-y: hidden !important; } html ::-moz-selection, body ::-moz-selection { background: #0e79c1; color: white; } html ::selection, body ::selection { background: #0e79c1; color: white; } html ::-moz-selection, body ::-moz-selection { background: #0e79c1; color: white; } body.no-smoothstate #loading-panel { display: none; visibility: hidden; } .empty-space { display: block; position: relative; height: 20px; } .empty-space:after { content: ""; display: table; clear: both; } .empty-space.double { height: 40px; } .pointer { cursor: pointer; } .fade-in-slow { -webkit-animation-name: fadeIn; -webkit-animation-duration: 1000ms; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-delay: 300ms; -webkit-animation-iteration-count: 1; -moz-animation-name: fadeIn; -moz-animation-duration: 1000ms; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-delay: 300ms; -moz-animation-iteration-count: 1; -ms-animation-name: fadeIn; -ms-animation-duration: 1000ms; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; -ms-animation-delay: 300ms; -ms-animation-iteration-count: 1; animation-name: fadeIn; animation-duration: 1000ms; animation-timing-function: ease; animation-fill-mode: both; -animation-delay: 300ms; animation-iteration-count: 1; } .image-hover-effect { -webkit-transition: all, 300ms; transition: all, 300ms; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; opacity: 1; } .image-hover-effect:hover { opacity: 0.8; } .hover-bounce-container .hover-bounce-subject { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .hover-bounce-container:hover .hover-bounce-subject { -webkit-animation-name: bounce; animation-name: bounce; } #toload { visibility: hidden; } .btn-subscribe { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-subscribe>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-subscribe:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .btn-subscribe:hover .label { color: #000; } .btn-subscribe:hover:after { height: 100%} .btn-submit { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-submit>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-submit:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .btn-submit:hover .label { color: #fff; } .btn-submit:hover:after { height: 100%} .site-container { max-width: 68em; margin-left: auto; margin-right: auto; } .site-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .site-container { padding: 0 1.5em; } }.site-container.display-as-mobile { padding: 0 1.5em; } .site-container--logo { display: inline-block; width: calc(100% - 65.5px); height: 100px; background: url("/images/logo-white.png") no-repeat; background-position: right; background-size: 100px auto; vertical-align: top; } .bg-yellow { background: #fff200 !important; } .bg-black { background: #000 !important; } .bg-white { background: #fff !important; } .border-box { border: 9px solid #000; } .padding { padding: 1em; } .divider-grey { border: none; border-bottom: 3px solid #666; margin: 10px 0 7px 0; } .white { color: #fff; } .form-page { background: #222; } .form-page .main-form { display: block !important; } .form-page .close { display: inline-block !important; font-size: 20px !important; margin: 20px 0; cursor: pointer; z-index: 9999; width: 30px; height: 30px; } .form-page .close a { color: #fff; } .form-page section.main { padding: 0; } .fit-text { display: block; width: 100%; margin-bottom: 0.12em; } @media screen and (max-width: 768px) { .fit-text { margin-bottom: 0.3em !important; } }.fit-text.display-as-mobile { margin-bottom: 0.3em !important; } @media screen and (max-width: 480px) { .fit-text { margin-bottom: 0.4em !important; } }.fit-text.display-as-mobile { margin-bottom: 0.4em !important; } iframe { border: none; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { -webkit-overflow: touch; } @media screen and (max-width: 480px) { body { font-size: 16px; } } a, button { color: inherit; -webkit-transition: .3s; transition: .3s; } a { color: #555; font-weight: 600; text-decoration: none; } a:hover { color: #00aeef; } button { overflow: visible; border: 0; font: inherit; background: none; cursor: pointer; -webkit-font-smoothing: inherit; } button:focus { outline: 0; } img { max-width: 100%; height: auto; border: 0; } .show-mobile { display: none !important; } @media (max-width: 468px) { .show-mobile { display: block !important; } }@media (max-width: 468px) { .hide-mobile { display: none !important; } }.no-padding { padding: 0 !important; } .no-margin { margin: 0 !important; } .main-wrapper { position: relative; height: auto; margin-bottom: 430px; width: 100%; z-index: 1; } @media screen and (max-width: 768px) { .main-wrapper { margin-bottom: 130px; } }.main-wrapper.display-as-mobile { margin-bottom: 130px; } @media screen and (max-width: 480px) { .main-wrapper { margin-bottom: 250px; } }.main-wrapper.display-as-mobile { margin-bottom: 250px; } .main-wrapper.display-as-mobile { margin-bottom: 400px !important; } @-webkit-keyframes throb { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@keyframes throb { 0% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 75% { -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@keyframes dance { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 75% { -webkit-transform: rotate(20deg); transform: rotate(20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@-webkit-keyframes side-acc { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scaleX(0.5); transform: scaleX(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@keyframes side-acc { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scaleX(0.5); transform: scaleX(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@-webkit-keyframes top-acc { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@keyframes top-acc { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@-webkit-keyframes both-rot { 0% { -webkit-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 50% { -webkit-transform: rotateY(180deg) rotateX(0); transform: rotateY(180deg) rotateX(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: rotateY(180deg) rotateX(180deg); transform: rotateY(180deg) rotateX(180deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } }@keyframes both-rot { 0% { -webkit-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 50% { -webkit-transform: rotateY(180deg) rotateX(0); transform: rotateY(180deg) rotateX(0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: rotateY(180deg) rotateX(180deg); transform: rotateY(180deg) rotateX(180deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } }@keyframes wiggle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 97% { -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 98% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 99% { -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }@-webkit-keyframes wiggle { 0% { -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 96% { -webkit-transform: rotate(-10deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 97% { -webkit-transform: rotate(10deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 98% { -webkit-transform: rotate(-10deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 99% { -webkit-transform: rotate(10deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }#loading-panel { background-color: #2f2f2f; opacity: 1; width: 100vw; height: 100vh; position: fixed; bottom: 110vh; left: 0; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: transform 500ms ease-in-out; -webkit-transition: -webkit-transform 500ms ease-in-out; transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out; z-index: 99999; box-shadow: 19px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22); overflow: hidden; } #loading-panel .loader-wrap { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: -webkit-box; display: flex; flex-wrap: wrap; pointer-events: none; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-transform: translateY(110vh); transform: translateY(110vh); -webkit-transition: transform 500ms ease-in-out; -webkit-transition: -webkit-transform 500ms ease-in-out; transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out; } #loading-panel .loader-wrap[data-icon='babu'] .loader--babu { display: block !important; -webkit-animation: dance 1s infinite; animation: dance 1s infinite; } #loading-panel .loader-wrap[data-icon='circle'] .loader--circle { display: block !important; -webkit-animation: both-rot 1s infinite; animation: both-rot 1s infinite; } #loading-panel .loader-wrap[data-icon='slinky'] .loader--slinky { display: block !important; -webkit-animation: dance 1s infinite; animation: dance 1s infinite; } #loading-panel .loader-wrap[data-icon='squiggle'] .loader--squiggle { display: block !important; -webkit-animation: side-acc 1s infinite; animation: side-acc 1s infinite; } #loading-panel .loader-wrap[data-icon='mw'] .loader--mw { display: block !important; } #loading-panel .loader-wrap .loader { fill: white; display: none; height: 100px; width: 100px; padding: 0; } #loading-panel .loader-wrap .loader svg { margin: 0; height: 100px; width: 100px; } #loading-panel .loader-wrap[data-color='white'] .loader { fill: white; } #loading-panel .loader-wrap[data-color='cyan'] .loader { fill: #00aeef; } #loading-panel .loader-wrap[data-color='yellow'] .loader { fill: #fff200; } #loading-panel .loader-wrap[data-color='magenta'] .loader { fill: #e8168c; } .js body.loading #loading-panel { display: none; visibility: hidden; -webkit-transform: translateY(110vh); transform: translateY(110vh); } .js body.loading #loading-panel .loader-wrap { -webkit-transform: translateY(0px); transform: translateY(0px); -moz-transform: translateY(0px); webkit-transform: translateY(0px); } .scrollme { overflow: hidden; } .full-width { width: 100%; display: block; } .bg-cyan { background: #00aeef; } .bg-magenta { background: #e8168c; } .bg-yellow { background: #fff200; } .font-size-0 { font-size: 0; } .font-size-0>* { font-size: 16px; } .bg-image-fill { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; } section { width: 100%; padding: 60px 0; overflow-x: hidden; min-height: 200px; } @media screen and (max-width: 480px) { section { padding: 30px 0; } }section.display-as-mobile { padding: 30px 0; } section p { padding-top: 0.8em; padding-bottom: 0.8em; } section p:first-of-type { padding-top: 0; } .section--thank-you, .section--thank-you.display-as-mobile { padding: 0; } .plead { font-size: 31px !important; line-height: 34px !important; font-weight: bold !important; font-family: "bree", "Source Sans Pro", sans-serif; } @media screen and (max-width: 480px) { .plead { font-size: 21px !important; line-height: 28px !important; } .plead p { font-size: 1em !important; } }.plead.display-as-mobile { font-size: 21px !important; line-height: 28px !important; } .plead.display-as-mobile p { font-size: 1em !important; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%} .clearfix { display: block; } .section--black { background-color: #000; } .outer-container { max-width: 68em; margin-left: auto; margin-right: auto; } .outer-container:after { content: ""; display: table; clear: both; } .mobile-only { display: none !important; } @media screen and (max-width: 480px) { .mobile-only { display: block !important; } }.mobile-only.display-as-mobile { display: block !important; } .tablet-down { display: none !important; } @media screen and (max-width: 768px) { .tablet-down { display: block !important; } }.tablet-down.display-as-mobile { display: block !important; } .tablet-up { display: block !important; } @media screen and (max-width: 768px) { .tablet-up { display: none !important; } }.tablet-up.display-as-mobile { display: none !important; } .desktop-only { display: block !important; } @media screen and (max-width: 480px) { .desktop-only { display: none !important; } }.desktop-only.display-as-mobile { display: none !important; } .b1, .b2, .b3, .b4, .b5 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .b1>.label, .b2>.label, .b3>.label, .b4>.label, .b5>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .b1:after, .b2:after, .b3:after, .b4:after, .b5:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #000; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .b1:hover .label, .b2:hover .label, .b3:hover .label, .b4:hover .label, .b5:hover .label { color: #fff; } .b1:hover:after, .b2:hover:after, .b3:hover:after, .b4:hover:after, .b5:hover:after { height: 100%} .btn-normal { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-normal>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-normal:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .btn-normal:hover .label { color: #fff; } .btn-normal:hover:after { height: 100%} .btn-reverse { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-reverse>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-reverse:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .btn-reverse:hover .label { color: #00aeef; } .btn-reverse:hover:after { height: 5px; } h1 { font-size: 50px; } h2 { font-size: 28px; } h3 { font-size: 28px; } @media screen and (max-width: 480px) { h3 { font-size: 33px; } }h3.display-as-mobile { font-size: 33px; } .center-text { text-align: center; } .whiteboard-header, .image-header, .video-header { transition: height 0s; -webkit-transition: height 0s; } .whiteboard-header .b1, .whiteboard-header .b2, .image-header .b1, .image-header .b2, .video-header .b1, .video-header .b2 { -webkit-animation-name: fadeIn; -webkit-animation-duration: 1000ms; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-delay: 1200ms; -webkit-animation-iteration-count: 1; -moz-animation-name: fadeIn; -moz-animation-duration: 1000ms; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-delay: 1200ms; -moz-animation-iteration-count: 1; -ms-animation-name: fadeIn; -ms-animation-duration: 1000ms; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; -ms-animation-delay: 1200ms; -ms-animation-iteration-count: 1; animation-name: fadeIn; animation-duration: 1000ms; animation-timing-function: ease; animation-fill-mode: both; -animation-delay: 1200ms; animation-iteration-count: 1; } .whiteboard-header.display-as-mobile, .image-header.display-as-mobile, .video-header.display-as-mobile { height: 500px !important; } .strong { font-size: 100px; color: #fff !important; text-align: left; font-weight: bold; display: block; margin: 0 auto; line-height: 0.9em; letter-spacing: -0.01em; font-family: "bree", "Source Sans Pro", sans-serif; } .strong.typewriter { font-size: 50px !important; height: 50px; font-family: "bree", "Source Sans Pro", sans-serif; } @media screen and (max-width: 480px) { .strong.typewriter { font-size: 30px !important; } }.strong.typewriter.display-as-mobile { font-size: 30px !important; } @media screen and (max-width: 768px) { .strong { font-size: 80px; padding: 0; } }.strong.display-as-mobile { font-size: 80px; padding: 0; } @media screen and (max-width: 480px) { .strong { font-size: 50px; margin-top: 20px; } }.strong.display-as-mobile { font-size: 50px; margin-top: 20px; } .sub-heading { font-size: 28px; color: #fff !important; text-align: left; margin-top: 0.5em; margin-bottom: 1em; display: block; font-family: "bree", "Source Sans Pro", sans-serif; } @media screen and (max-width: 480px) { .sub-heading { font-size: 18px; margin-bottom: 0.8em; } }.sub-heading.display-as-mobile { font-size: 18px; margin-bottom: 0.8em; } .menu-link { position: absolute; left: 25px; top: 18px; font-size: 26px; color: #fff; cursor: pointer; font-family: "bree", "Source Sans Pro", sans-serif; -webkit-transition: color 300ms; transition: color 300ms; } @media screen and (max-width: 480px) { .menu-link { top: -10px; padding: 15px 25px; left: 0px; } }.menu-link.display-as-mobile { top: -10px; padding: 15px 25px; left: 0px; } .menu-link .display-as-mobile { position: absolute; top: 10px; } .babu-wrap { position: fixed; right: 0px; bottom: 0px; width: 100px; height: 100px; font-family: "bree", "Source Sans Pro", sans-serif; } .babu-wrap.click-mobile .babu-second { -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; -webkit-transform: translateY(-70px); transform: translateY(-70px); } .babu-wrap.click-mobile .babu-second .label { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .babu-wrap.click-mobile .babu-third { -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform: translateY(-130px); transform: translateY(-130px); } .babu-wrap.click-mobile .babu-third .label { -webkit-transition-delay: 400ms; transition-delay: 400ms; } .babu-wrap.click-mobile .babu-doll .label { opacity: 1; -webkit-transform: translateX(-70px); transform: translateX(-70px); } .babu-wrap .babu-doll { position: absolute; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; bottom: 20px; right: 10px; width: 190px; height: 50px; } @media screen and (max-width: 480px) { .babu-wrap .babu-doll { right: 0; width: 90px; } }.babu-wrap .babu-doll.display-as-mobile { right: 0; width: 90px; } .babu-wrap .babu-doll.babu-main .doll { width: 80px; height: 80px; right: 0; z-index: 6999; -webkit-animation: wiggle 10s; animation: wiggle 10s; } .babu-wrap .babu-doll.babu-main .doll svg { position: absolute; top: 0; left: 0; fill: #e8168c; } @media screen and (max-width: 480px) { .babu-wrap .babu-doll.babu-main .doll { width: 75px; height: 75px; } }.babu-wrap .babu-doll.babu-main .doll.display-as-mobile { width: 75px; height: 75px; } .babu-wrap .babu-doll.babu-main .label { z-index: 6998; top: -10px; min-width: 151px; } .babu-wrap .babu-doll.babu-main:hover .doll { -webkit-animation: none; animation: none; } .babu-wrap .babu-doll.babu-main:hover .label { background-color: #e8168c; } .babu-wrap .babu-doll.babu-second { bottom: 25px; } .babu-wrap .babu-doll.babu-second .doll { width: 60px; height: 60px; right: 10px; z-index: 6997; } .babu-wrap .babu-doll.babu-second .doll svg { position: absolute; top: -10px; left: 0; fill: #fff200; } @media screen and (max-width: 480px) { .babu-wrap .babu-doll.babu-second .doll { width: 55px; height: 55px; } }.babu-wrap .babu-doll.babu-second .doll.display-as-mobile { width: 55px; height: 55px; } .babu-wrap .babu-doll.babu-second .label { z-index: 6996; top: -5px; } .babu-wrap .babu-doll.babu-second:hover .label { background-color: #fff200; } .babu-wrap .babu-doll.babu-third .doll { width: 40px; height: 40px; right: 20px; z-index: 6995; } .babu-wrap .babu-doll.babu-third .doll svg { position: absolute; top: -20px; left: 0; fill: #00aeef; } .babu-wrap .babu-doll.babu-third .label { z-index: 6994; top: -10px; } .babu-wrap .babu-doll.babu-third:hover .label { background-color: #00aeef; } .babu-wrap .babu-doll .doll { position: absolute; bottom: 0; display: block; border-radius: 50px; -webkit-filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.16)); filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.16)); } .babu-wrap .babu-doll .label { text-align: right; position: absolute; right: 0; -webkit-transition: opacity 300ms, background 300ms, -webkit-transform 300ms; transition: opacity 300ms, background 300ms, -webkit-transform 300ms; transition: opacity 300ms, transform 300ms, background 300ms; transition: opacity 300ms, transform 300ms, background 300ms, -webkit-transform 300ms; opacity: 0; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 0px 20px; border-radius: 2px; font-weight: 400; height: 40px; line-height: 40px; font-size: 18px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .babu-wrap .babu-doll:hover .label { color: black; } @media screen and (min-width: 0px) { .babu-wrap { width: 200px; height: 200px; } .babu-wrap .babu-main .label { opacity: 1; -webkit-transform: translateX(-70px); transform: translateX(-70px); } .babu-wrap .babu-doll .label { -webkit-transform: translateX(-70px); transform: translateX(-70px); } }.babu-wrap:hover { width: 200px; height: 200px; } .babu-wrap:hover .babu-second { -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; -webkit-transform: translateY(-70px); transform: translateY(-70px); } .babu-wrap:hover .babu-second .label { -webkit-transition-delay: 00ms; transition-delay: 00ms; } .babu-wrap:hover .babu-third { -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform: translateY(-130px); transform: translateY(-130px); } .babu-wrap:hover .babu-third .label { -webkit-transition-delay: 00ms; transition-delay: 00ms; } .babu-wrap:hover .babu-doll .label { opacity: 1; -webkit-transform: translateX(-70px); transform: translateX(-70px); } .navbar-recede header { -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: background 300ms ease-in-out, transform 500ms ease-in; } .navbar-recede .menu-link { -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: -webkit-transform 500ms ease-in; transition: -webkit-transform 500ms ease-in; transition: transform 500ms ease-in; transition: transform 500ms ease-in, -webkit-transform 500ms ease-in; } .menu-open .menu-link { color: #fff !important; } @media screen and (max-width: 480px) { .slide-page-opened .menu-link { display: none; } }.slide-page-opened .menu-link.display-as-mobile { display: none; } .main-logo { position: absolute; width: 160px; height: 60px; top: 5px; background-size: 100%; background-repeat: no-repeat; left: calc(50% - 80px); background-image: url("/images/logo-white.png"); -webkit-transition: background 300ms; transition: background 300ms; } @media screen and (max-width: 480px) { .main-logo { width: 116px; height: 43px; top: 21px; left: 70px; } }.main-logo.display-as-mobile { width: 116px; height: 43px; top: 21px; left: 70px; } .main-logo.display-as-mobile { width: 160px; height: 60px; top: 5px; left: 80px; } .center-contents>*, .two-col-alternating>.inner>*, .two-col-alternating-thirds>.inner>*, .secondary-alternating-sections-wrap>.inner>*, .section-basic>.inner>*, .section-basic-white>.inner>*, .section-dark>.inner>*, .section-grid>.inner>*, .work-stats>.inner>*, .work-section>.inner>*, .blog-detail>.inner>*, .section-basic-short>.inner>*, .section-secondary>.inner>*, .full-width>.inner>*, .cta>.inner>*, .work>.inner>*, .work-clients>.inner>*, .contact>.inner>*, .subscribe>.inner>*, .section-brochure>.inner>* { text-align: center; } #page-controls { width: 120px; margin-top: 7px; } #page-controls>a, #page-controls .toggle { line-height: 50px; text-decoration: none; width: 30px; display: inline-block; text-align: center; font-size: 20px; color: #fff; float: right; } @media screen and (max-width: 480px) { #page-controls { left: auto; right: 60px !important; margin-left: auto; font-size: 26px; } #page-controls>a { width: 30px; } }#page-controls.display-as-mobile { left: auto; right: 60px !important; margin-left: auto; font-size: 26px; } #page-controls.display-as-mobile>a { width: 30px; } #page-controls .share { cursor: pointer; } .divider { height: 3px; width: 140px; display: inline-block; background: none !important; } .divider:first-of-type { margin-top: 1em; } .divider:last-of-type { margin-bottom: 1em; } .project-starter { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; width: 150px; font-weight: 600; display: block; margin-top: -3px; } .project-starter>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .project-starter:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #e8168c; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .project-starter:hover .label { color: #e8168c; } .project-starter:hover:after { height: 5px; } .project-starter.cyan:hover .label { color: #00aeef; } .project-starter.cyan:after { background-color: #00aeef; } #mobile-cta { display: none; -webkit-transition-property: background, bottom; -webkit-transition-duration: 0.5s; } @media screen and (max-width: 480px) { #mobile-cta { display: block; background: #e8168c; position: fixed; font-size: 20px; bottom: -45px; left: 0 !important; font-weight: bold; width: 100%; height: 45px; cursor: pointer; line-height: 45px; z-index: 6666; text-align: center; } #mobile-cta:hover { background: #00aeef; } #mobile-cta.is-scrolling { bottom: 0; } }#mobile-cta.display-as-mobile { display: block; background: #e8168c; position: fixed; font-size: 20px; bottom: -45px; left: 0 !important; font-weight: bold; width: 100%; height: 45px; cursor: pointer; line-height: 45px; z-index: 6666; text-align: center; } #mobile-cta.display-as-mobile:hover { background: #00aeef; } #mobile-cta.display-as-mobile.is-scrolling { bottom: 0; } #mobile-cta.display-as-mobile { display: none !important; } .column_one_of_two { float: left; display: block; margin-right: 16.03631%; width: 41.98184%; margin-right: 2.5%; margin-left: 2.5%; width: 45%; margin-bottom: 1em; } .column_one_of_two:last-child { margin-right: 0; } .column_one_of_two p { text-align: left !important; } @media screen and (max-width: 480px) { .column_one_of_two { float: left; display: block; margin-right: 16.03631%; width: 100%; margin-left: 0; margin-right: 0; } .column_one_of_two:last-child { margin-right: 0; } .column_one_of_two p { text-align: center !important; } }.column_one_of_two.display-as-mobile { float: left; display: block; margin-right: 16.03631%; width: 100%; margin-left: 0; margin-right: 0; } .column_one_of_two.display-as-mobile:last-child { margin-right: 0; } .column_one_of_two.display-as-mobile p { text-align: center !important; } .secondary-images { max-width: 68em; margin-left: auto; margin-right: auto; width: 100%; display: block; } .secondary-images:after { content: ""; display: table; clear: both; } .secondary-images img { max-width: none; width: 14%; margin: 3%; height: auto; display: inline-block; } @media screen and (max-width: 480px) { .secondary-images img { width: 40%; margin: 5%} }.secondary-images img.display-as-mobile { width: 40%; margin: 5%} .pad-right-15 { padding-right: 15px; } .close-slide-page { display: none; } .slide-page-opened .close-slide-page { display: block !important; font-size: 20px !important; color: white; position: fixed; right: 272px; top: 30px; cursor: pointer; z-index: 9999; width: 30px; height: 30px; } @media screen and (max-width: 480px) { .slide-page-opened .close-slide-page { right: 22px; } }.slide-page-opened .close-slide-page.display-as-mobile { right: 22px; } .social-plugins { width: 100%; position: absolute; bottom: 0; padding: 2em 2.5em; } .social-plugins>.row { display: block; width: 100%; margin: 5px 0; } ul.social-icons li { display: inline-block; margin-right: 2px; } ul.social-icons li>span { font-size: 20px; line-height: 5px; vertical-align: top; } ul.social-icons li .icon { font-size: 30px; color: #fff; } ul.social-icons li .icon:hover { color: #00aeef; } .social-dropdown { -webkit-transition: all, 200ms; transition: all, 200ms; visibility: hidden; opacity: 0; top: -70px; left: 120px; height: 80px; line-height: 93px; width: 370px; float: right; position: relative; pointer-events: none; } .social-dropdown .icon { -webkit-transition: all, 350ms; transition: all, 350ms; margin: 0 -30px; } .social-dropdown.is-showing { visibility: visible; opacity: 1; pointer-events: auto; } .social-dropdown.is-showing .icon { margin: 0 8px; } @media screen and (max-width: 768px) { .social-dropdown { display: none; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; line-height: 42px; height: 60px; top: 80px; position: absolute; padding: 15px; margin: 0; } .social-dropdown>ul { margin: 0 auto; display: table; float: none; } .social-dropdown .icon { color: #fff !important; } }.social-dropdown.display-as-mobile { display: none; left: 0; background: rgba(0, 0, 0, 0.8); width: 100%; line-height: 42px; height: 60px; top: 80px; position: absolute; padding: 15px; margin: 0; } .social-dropdown.display-as-mobile>ul { margin: 0 auto; display: table; float: none; } .social-dropdown.display-as-mobile .icon { color: #fff !important; } #header:not(.is-scrolling) .social-dropdown .icon:not(:hover) { color: #fff !important; } #header.blog .page-name, #header.blog .vertical-divider { opacity: 1 !important; } .is-scrolling .blog-back { color: #000; } .blog-back { height: 85px; line-height: 85px; display: block; margin-left: 1em; color: #fff; font-size: 20px; float: left; } .blog-back .icon { margin-right: 8px; } .icon-blog { margin-left: -5px; } #agency-video { display: block; margin: 2em auto; max-width: 100%} .mo-slider { position: relative; } .mo-slider .slide { display: none; position: relative; } .mo-slider .dots .dot { -webkit-transition: .3s; transition: .3s; width: 16px; height: 16px; border: 8px solid black; border-radius: 10em; background: none; display: inline-block; margin-left: 4px; margin-right: 4px; float: left; cursor: pointer; } @media screen and (max-width: 768px) { .mo-slider .dots .dot { width: 22px; height: 22px; margin-left: 6px; margin-left: 6px; } }.mo-slider .dots .dot.display-as-mobile { width: 22px; height: 22px; margin-left: 6px; margin-left: 6px; } .mo-slider .dots .dot.current { border-width: 3px; } .mozaic-mobile-controls { display: none; width: 100%; background: #444; height: 60px; } .mozaic-mobile-controls>div { width: 50%; height: inherit; float: left; cursor: pointer; border-bottom: 2px solid #333; } .mozaic-mobile-controls>div:first-of-type { border-right: 1px solid #555; } .mozaic-mobile-controls>div>span { line-height: 60px; text-align: center; display: block; color: white; font-size: 30px; } @media screen and (max-width: 768px) { .mozaic-mobile-controls { display: block; } }.mozaic-mobile-controls.display-as-mobile { display: block; } @media screen and (max-width: 480px) { .shrink-hide-mobile { -webkit-transition: all, 200ms; transition: all, 200ms; height: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; visibility: hidden; } }.shrink-hide-mobile.display-as-mobile { -webkit-transition: all, 200ms; transition: all, 200ms; height: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; visibility: hidden; } .no-bg { background: none !important; background-color: none !important; } .boxed { max-width: 68em; margin: 0 auto; padding: 0 2em; } @media screen and (min-width: 768px) { .boxed { padding: 0; } }.boxed.display-as-mobile { padding: 0; } .col { position: relative; float: left; } .col.span6 { width: 50%} @media screen and (max-width: 480px) { .col.mobile-full { width: 100%} }.col.mobile-full.display-as-mobile { width: 100%} .its-crazy-gif { margin: 0 auto; margin-top: 20px; display: block; } .header.image-header, .header.video-header { background-size: cover; background-position: bottom; position: relative; overflow: hidden; height: 100vh; } .header.image-header .inner, .header.video-header .inner { -webkit-transition: opacity 500ms; transition: opacity 500ms; } .header.image-header .strong, .header.video-header .strong { font-size: 100px; } @media screen and (max-width: 768px) { .header.image-header .strong, .header.video-header .strong { font-size: 70px; } }.header.image-header .strong.display-as-mobile, .header.video-header .strong.display-as-mobile { font-size: 70px; } @media screen and (max-width: 480px) { .header.image-header .strong, .header.video-header .strong { font-size: 50px; } }.header.image-header .strong.display-as-mobile, .header.video-header .strong.display-as-mobile { font-size: 50px; } .video-header .video-play { color: #fff; font-weight: 300; font-size: 30px; -webkit-transition: font-weight 500ms; transition: font-weight 500ms; } .video-header .video-play p { margin-left: 10px; } @media screen and (max-width: 480px) { .video-header .video-play { font-weight: 400; font-size: 14px; } }.video-header .video-play.display-as-mobile { font-weight: 400; font-size: 14px; } .video-header .video-play:hover { text-decoration: underline; cursor: pointer; } .video-header .external-wrap { position: absolute; top: 0px; left: 0px; width: 100vw; height: 100vh; display: none; -webkit-transition: opacity 500ms; transition: opacity 500ms; } .video-header .external-wrap iframe { width: 100%; height: 100%} .video-playing .external-wrap { display: block; } .video-playing .video-header { height: 100vh; } .video-playing .video-header .inner { opacity: 0; } #zoomy { display: none; position: absolute; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; border: 0; background: transparent; } ul.tags li { -webkit-transition: all 0.15s ease-out 0s; transition: all 0.15s ease-out 0s; margin: 5px; padding: 5px !important; width: auto; float: left; background: #000; color: #fff; border-radius: 2px; } ul.tags li:hover { background: #00aeef; color: #000; } ul.tags>a:nth-of-type(2n)>li:hover { background: #e8168c; } ul.tags>a:nth-of-type(3n)>li:hover { background: #fff200; } .mu-rsvp-btn { background-color: #e8168c; border-radius: 5px; padding: 5px 14px; font-size: 12px; box-shadow: #851518 0 2px 0 0; -webkit-box-shadow: #851518 0 2px 0 0; -moz-box-shadow: #851518 0 2px 0 0; } .section-startup-benefits { padding-bottom: 0; background: #000 !important; } .section-startup-benefits h2 { color: #fff; } .section-startup-join { background: #fff200 !important; } #section-ways { background-color: #fff; } .mo-section-slider { position: relative; overflow: hidden; width: 100%; height: 400px; padding: 0; } .mo-section-slider--slide { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; min-height: 400px; } .mo-section-slider--slide section { background: none; } .mo-section-slider--slide section .inner h3, .mo-section-slider--slide section .inner p { color: #fff; text-align: left; } @media screen and (max-width: 480px) { .mo-section-slider--slide section .inner h3, .mo-section-slider--slide section .inner p { text-align: center; } }.mo-section-slider--slide section .inner h3.display-as-mobile, .mo-section-slider--slide section .inner p.display-as-mobile { text-align: center; } .mo-section-slider .dots { height: 40px; z-index: 5; position: absolute; width: 72px; bottom: 1em; left: 50%; margin-left: -36px; } .mo-section-slider .dots .dot { border-color: #fff; } @media screen and (max-width: 768px) { .mo-section-slider .dots { width: 96px; margin-left: -48px; } }.mo-section-slider .dots.display-as-mobile { width: 96px; margin-left: -48px; } .btn-cta { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; width: 150px; } .btn-cta>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-cta:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .btn-cta:hover .label { color: #e8168c; } .btn-cta:hover:after { height: 100%} .btn-cta-reverse { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; width: 150px; } .btn-cta-reverse>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #e8168c; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-cta-reverse:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #e8168c; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .btn-cta-reverse:hover .label { color: #fff; } .btn-cta-reverse:hover:after { height: 100%} .btn-grey { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-grey>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-grey:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #333; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .btn-grey:hover .label { color: #333; } .btn-grey:hover:after { height: 5px; } .btn-yellow { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-yellow>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-yellow:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .btn-yellow:hover .label { color: #00aeef; } .btn-yellow:hover:after { height: 5px; } .btn-cyan-black { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-cyan-black>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-cyan-black:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .btn-cyan-black:hover .label { color: #00aeef; } .btn-cyan-black:hover:after { height: 5px; } .btn-magenta-black { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .btn-magenta-black>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .btn-magenta-black:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .btn-magenta-black:hover .label { color: #00aeef; } .btn-magenta-black:hover:after { height: 5px; } .flex--1 { -webkit-box-flex: 1; flex: 1 1 250px; } .flex--2 { -webkit-box-flex: 2; flex: 2 1 250px; } .flex--3 { -webkit-box-flex: 3; flex: 3 1 250px; } .wobble-float { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } .wobble.firefox { -webkit-transition: none !important; transition: none !important; } #side { background-color: #000; z-index: 10000; position: fixed; top: 0px; left: 0px; height: 100vh; overflow: hidden; width: 0px; line-height: 1.0; overflow-y: scroll; box-shadow: 19px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22); -webkit-transition: none; transition: none; } .nav { font-size: 0; color: white; } .nav__left, .nav__right { height: 100vh; position: absolute; } .nav__left { width: 280px; left: 0; background: #fff; } .nav__left__inner { position: absolute; width: 100%; bottom: 0; padding: 25px; font-size: 16px; font-weight: 100; line-height: 1.4; font-family: bree, "Source Sans Pro", sans-serif; } .nav__left__inner a { color: white; font-family: bree, "Source Sans Pro", sans-serif; } @media screen and (max-width: 768px) { .nav__left__inner { padding: 5vw 2vh; text-align: center; line-height: 1.2; } .nav__left__inner .contact-info { font-size: 28px; } } @media screen and (max-width: 768px) { .nav__left { width: 100vw; } }.nav__right { width: calc(100vw - 600px); left: 280px; } @media screen and (max-width: 768px) { .nav__right { width: 100vw; left: 0; top: 90px; height: calc(100vh - 190px); padding: 0; } }.nav__close { position: absolute; top: 30px !important; left: 26px !important; color: white; font-size: 26px; cursor: pointer; } @media screen and (max-width: 480px) { .nav__close { top: 17px !important; } }.nav__logo { position: absolute; width: 90%; top: 10vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #fff; /* background-size: 100%; background-repeat: no-repeat; background-image: url(../images/logo.png);*/ } @media screen and (max-width: 768px) { .nav__logo { top: 15px; left: auto; right: 15px; width: 116px; height: 43px; -webkit-transform: none; transform: none; } }.nav__row { width: 100%; height: calc(33.33333% - 17px); } .nav__row:last-child { height: 51px; } .nav__column { width: 33.3333%; float: left; height: 100%; position: relative; } .nav__column--center>* { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 95%} @media screen and (max-width: 768px) { .nav .btn { min-width: 0px; } .nav .btn .label { font-size: 12px; } }.nav__block { width: calc(100% - 10px); height: calc(100% - 10px); margin: 5px; background-color: #333; position: relative; -webkit-transition: background-color 300ms linear; transition: background-color 300ms linear; text-align: center; } @media screen and (max-width: 768px) { .nav__block { width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px; } }.nav__block__image { background-size: cover; background-position: center; } .nav__block__image, .nav__block__link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.7; -webkit-transition: opacity 300ms linear; transition: opacity 300ms linear; } .nav__block__title { position: absolute; bottom: 10%; left: 10%; width: 80%; font-size: 28px !important; font-family: bree, "Source Sans Pro", sans-serif; font-weight: 300; pointer-events: none; text-transform: uppercase !important; color: #fff !important; } #row_4 .nav__block__title{ font-size: 18px !important;} #row_5 .nav__block__title{ font-size: 18px !important;} @media screen and (max-width: 768px) { .nav__block__title { font-size: 5vw !important; } #row_4 .nav__block__title{ font-size: 12px !important;} #row_5 .nav__block__title{ font-size: 12px !important;} }.nav__block--hover-cyan:hover { background-color: #00aeef; } .nav__block--hover-magenta:hover { background-color: #e8168c; } .nav__block--hover-yellow:hover { background-color: #fff200; } .nav__block:hover .nav__block__image { opacity: 0.3; } @media screen and (max-width: 768px) { .nav__block--loading { background-image: url(/images/loading.gif); background-position: center; background-size: cover; } }.main-wrapper.display-as-mobile, .wrapper--footer.display-as-mobile, .pre-slide-wrap.display-as-mobile { position: absolute !important; right: 0px !important; width: 320px !important; } #side { -webkit-transition: none; transition: none; } #main.menu-open #side { width: 100vw; } #main.menu-moving.menu-open #side { -webkit-transition: width 700ms; transition: width 700ms; } #main.menu-moving #side { -webkit-transition: width 700ms; transition: width 700ms; } @media (min-width: 1150px) { #main.display-as-mobile.menu-open #side.display-as-mobile { width: calc(100vw - 320px); } }#main.display-as-mobile.menu-moving.menu-open #side.display-as-mobile { -webkit-transition: width 300ms; transition: width 300ms; } #main.display-as-mobile.menu-moving.menu-open #side { -webkit-transition: width 300ms; transition: width 300ms; } .stat { float: left; display: block; margin-right: 38.19821%; width: 100%; margin-top: 0; margin-bottom: 0; } .stat:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .stat { float: left; display: block; margin-right: 38.19821%; width: 100%; margin-bottom: 0; } .stat:last-child { margin-right: 0; } }.stat.display-as-mobile { float: left; display: block; margin-right: 38.19821%; width: 100%; margin-bottom: 0; } .stat.display-as-mobile:last-child { margin-right: 0; } .stat img { max-width: 125px; } .stat .stat-info .label, .stat .stat-info .value { text-align: center; font-weight: bold; font-family: "bree", "Source Sans Pro", sans-serif; } .stat .stat-info .label { font-size: 28px; color: #444; display: block; } .stat .stat-info .value { display: inline-block; font-size: 28px; padding: 0 0.4em; } .header { position: relative; display: table; width: 100%; padding: 40px; } @media screen and (max-width: 480px) { .header { padding: 20px 10px; } }.header.display-as-mobile { padding: 20px 10px; } .header .inner { display: table-cell; vertical-align: middle; text-align: left; } .header .strong { color: #fff; } .header .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1000ms; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-delay: 1200ms; -webkit-animation-iteration-count: 1; -moz-animation-name: fadeIn; -moz-animation-duration: 1000ms; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-delay: 1200ms; -moz-animation-iteration-count: 1; -ms-animation-name: fadeIn; -ms-animation-duration: 1000ms; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; -ms-animation-delay: 1200ms; -ms-animation-iteration-count: 1; animation-name: fadeIn; animation-duration: 1000ms; animation-timing-function: ease; animation-fill-mode: both; -animation-delay: 1200ms; animation-iteration-count: 1; } .header .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .header .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .header .b1:hover .label { color: #fff; } .header .b1:hover:after { height: 100%} .header .b2 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1000ms; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-delay: 1800ms; -webkit-animation-iteration-count: 1; -moz-animation-name: fadeIn; -moz-animation-duration: 1000ms; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-delay: 1800ms; -moz-animation-iteration-count: 1; -ms-animation-name: fadeIn; -ms-animation-duration: 1000ms; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; -ms-animation-delay: 1800ms; -ms-animation-iteration-count: 1; animation-name: fadeIn; animation-duration: 1000ms; animation-timing-function: ease; animation-fill-mode: both; -animation-delay: 1800ms; animation-iteration-count: 1; } .header .b2>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .header .b2:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .header .b2:hover .label { color: #fff; } .header .b2:hover:after { height: 100%} .header .strong, .header .sub-heading, .header .typewriter { opacity: 1; -webkit-transition: opacity 300ms; transition: opacity 300ms; margin-top: 10px; } .header.is-scrolling .strong, .header.is-scrolling .sub-heading, .header.is-scrolling .typewriter { opacity: 0; } .header.see-thru { opacity: 0; pointer-events: none; } .image-header--image { position: fixed; width: 100%; height: 100%; top: 0; left: 0 !important; background-size: cover; background-position: center center; background-color: #000; z-index: -1; } @media only screen and (max-device-width: 1024px) { .image-header--image { position: absolute; } }.home-header .inner { width: 100%; display: inline-block; } .partner-header .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .partner-header .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .partner-header .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .partner-header .b1:hover .label { color: #fff; } .partner-header .b1:hover:after { height: 100%} .ipad-header { background-color: #eee; } .ipad-header--ipad-proxy { display: block; min-height: 350px; } .ipad-header--ipad { display: block; width: 497px; height: 387px; z-index: 100; position: absolute; left: 0px; top: -50px; background: url("/images/ipad.png"); background-size: cover; } @media screen and (max-width: 480px) { .ipad-header--ipad { display: none !important; } }.ipad-header--ipad.display-as-mobile { display: none !important; } .ipad-header--ipad--screen { background: black; position: absolute; left: 43px; right: 42px; bottom: 42px; top: 43px; } .ipad-header--ipad--video { display: block; width: 100%; height: 100%; position: relative; } .ipad-header--ipad--video>iframe { width: 100% !important; height: 100% !important; } @media screen and (max-width: 768px) { .ipad-header--ipad { width: 373px; height: 290px; right: 30px; } .ipad-header--ipad--screen { left: 32px; right: 32px; bottom: 31px; top: 32px; } }.ipad-header--ipad.display-as-mobile { width: 373px; height: 290px; right: 30px; } .ipad-header--ipad.display-as-mobile--screen { left: 32px; right: 32px; bottom: 31px; top: 32px; } .covervid-wrapper { position: absolute; z-index: -100; top: 0; left: 0; width: 100%; height: 100vh; } .whiteboard-header { width: 100%; position: relative; overflow: hidden; background-color: #333; background-repeat: repeat; } .whiteboard-header>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; padding-top: 200px; padding-bottom: 200px; } .whiteboard-header>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 480px) { .whiteboard-header>.inner { padding-left: 20px; padding-right: 20px; } }.whiteboard-header>.inner.display-as-mobile { padding-left: 20px; padding-right: 20px; } @media screen and (max-width: 480px) { .whiteboard-header>.inner { padding-top: 150px; } }.whiteboard-header>.inner.display-as-mobile { padding-top: 150px; } .whiteboard-header .b2 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; position: absolute; z-index: 100; } .whiteboard-header .b2>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .whiteboard-header .b2:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .whiteboard-header .b2:hover .label { color: #fff; } .whiteboard-header .b2:hover:after { height: 100%} .whiteboard-header .strong { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .whiteboard-header .whiteboard-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .whiteboard-header canvas { position: relative; display: block; width: 100%; height: 100%; cursor: crosshair; } .whiteboard-header .whiteboard-controls { position: absolute; left: 50%; width: 314; margin-left: -157px; bottom: 3em; z-index: 100; color: red; } .whiteboard-header .whiteboard-controls .color { font-size: 0; width: 50px; display: inline-block; height: 50px; border-radius: 100%; cursor: pointer; border: 9px solid #000; border-width: 4px; margin-right: 10px; } .whiteboard-header .whiteboard-controls .color:hover { border-color: #000 !important; } .whiteboard-header .whiteboard-controls .color.white { background: #fff; border-color: #fff; } .whiteboard-header .whiteboard-controls .color.cyan { background: #00aeef; border-color: #00aeef; } .whiteboard-header .whiteboard-controls .color.magenta { background: #e8168c; border-color: #e8168c; } .whiteboard-header .whiteboard-controls .color.yellow { background: #fff200; border-color: #fff200; } .whiteboard-header .whiteboard-controls .color.black { background: #000; border-color: #000; } .short-header { width: 100%; position: relative; overflow: hidden; background: #000; height: 600px; } .short-header .image { position: absolute; width: 100%; height: 100%; top: 0; left: 0 !important; background-size: cover; background-position: center center; z-index: -1; } .short-header>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; padding-top: 100px; padding-bottom: 100px; } .short-header>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 480px) { .short-header>.inner { padding-left: 20px; padding-right: 20px; } }.short-header>.inner.display-as-mobile { padding-left: 20px; padding-right: 20px; } .short-header .strong { color: #fff; } .short-header .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .short-header .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .short-header .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .short-header .b1:hover .label { color: #fff; } .short-header .b1:hover:after { height: 100%} .intro { width: 100%; background: #fff; overflow: visible !important; padding: 10px !important; padding-bottom: 80px; background-color: #EEEEEE; margin-bottom: -100px; -webkit-transition: margin 500ms; transition: margin 500ms; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24); } @media screen and (max-width: 768px) { .intro { margin-bottom: -50px; } }.intro.display-as-mobile { margin-bottom: -50px; } .intro>.inner { max-width: 68em; min-height: 400px; margin: auto; top: -100px; background-color: #fff; z-index: 1000; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; transform: translateY(50%); -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } @media screen and (max-width: 768px) { .intro>.inner { top: -50px; } }.intro>.inner.display-as-mobile { top: -50px; } @media screen and (max-width: 480px) { .intro>.inner { min-height: 325px; } }.intro>.inner.display-as-mobile { min-height: 325px; } .intro>.inner.up { transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); } .intro>.inner .intro-copy { margin: auto; padding: 80px; pointer-events: none; -webkit-transition: -webkit-transform 100ms; transition: -webkit-transform 100ms; transition: transform 100ms; transition: transform 100ms, -webkit-transform 100ms; line-height: 1.8; } @media screen and (max-width: 480px) { .intro>.inner .intro-copy { padding: 20px; } }.intro>.inner .intro-copy.display-as-mobile { padding: 20px; } .intro>.inner .intro-copy h2 { line-height: 1.5; font-size: 26px; font-weight: 300; } .intro>.inner .intro-copy h2 strong { font-weight: 800; font-size: 32px; margin: 10px 0px; } @media screen and (max-width: 480px) { .intro>.inner .intro-copy h2 strong { font-size: 20px; } }.intro>.inner .intro-copy h2 strong.display-as-mobile { font-size: 20px; } @media screen and (max-width: 480px) { .intro>.inner .intro-copy h2 { font-size: 16px; } }.intro>.inner .intro-copy.display-as-mobile h2 { font-size: 16px; } .video-playing .intro .inner { top: 0px; } @keyframes squiggle { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } }@-webkit-keyframes squiggle { 0% { -webkit-transform: translateX(0px); } 100% { -webkit-transform: translateX(30px); } }.column--padded { padding: 1em; } .column.large-3 { float: left; display: block; margin-right: 2.35765%; width: 23.23176%} .column.large-3:last-child { margin-right: 0; } .column.large-4 { float: left; display: block; margin-right: 2.35765%; width: 31.76157%} .column.large-4:last-child { margin-right: 0; } .column.large-6 { float: left; display: block; margin-right: 2.35765%; width: 48.82117%; width: 48%; margin-right: 2%} .column.large-6:last-child { margin-right: 0; } .column.large-8 { float: left; display: block; margin-right: 2.35765%; width: 65.88078%} .column.large-8:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .column.med-6 { float: left; display: block; margin-right: 2.35765%; width: 48.82117%} .column.med-6:last-child { margin-right: 0; } }.column.med-6.display-as-mobile { float: left; display: block; margin-right: 2.35765%; width: 48.82117%} .column.med-6.display-as-mobile:last-child { margin-right: 0; } @media screen and (max-width: 768px) { .column.med-12 { float: left; display: block; margin-right: 2.35765%; width: 100%} .column.med-12:last-child { margin-right: 0; } }.column.med-12.display-as-mobile { float: left; display: block; margin-right: 2.35765%; width: 100%} .column.med-12.display-as-mobile:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .column.small-12 { float: left; display: block; margin-right: 2.35765%; width: 100%} .column.small-12:last-child { margin-right: 0; } }.column.small-12.display-as-mobile { float: left; display: block; margin-right: 2.35765%; width: 100%} .column.small-12.display-as-mobile:last-child { margin-right: 0; } .column.column-right { float: right; } .column.push-4 { margin-left: 33.33%} @media screen and (max-width: 480px) { .column.push-4 { margin-left: 0; } }.column.display-as-mobile.push-4 { margin-left: 0; } .row-full { width: 100%} .row-full:after { content: ""; display: table; clear: both; } .two-col-alternating { width: 100%; background: #fff; position: relative; z-index: 1; } .two-col-alternating>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .two-col-alternating>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .two-col-alternating>.inner { padding: 1.5em 10px; } }.two-col-alternating>.inner.display-as-mobile { padding: 1.5em 10px; } .two-col-alternating>.inner p { text-align: left; } .two-col-alternating>.inner a { color: #00aeef; } .two-col-alternating .center>* { margin: 0 auto; text-align: center; } .two-col-alternating .section { max-width: 68em; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: 3em; } .two-col-alternating .section:after { content: ""; display: table; clear: both; } .two-col-alternating .section .column { float: left; display: block; margin-right: 38.19821%; width: 100%; text-align: left; } .two-col-alternating .section .column:last-child { margin-right: 0; } .two-col-alternating .section iframe { display: block; border: 0; max-width: 100%} .two-col-alternating .section h2, .two-col-alternating .section p { text-align: left; } @media screen and (max-width: 480px) { .two-col-alternating .section h2, .two-col-alternating .section p { text-align: center; } }.two-col-alternating .section h2.display-as-mobile, .two-col-alternating .section p.display-as-mobile { text-align: center; } @media screen and (min-width: 768px) { .two-col-alternating .section .column { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section .column:last-child { margin-right: 0; } .two-col-alternating .section .column:nth-of-type(2) { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section .column:nth-of-type(2):last-child { margin-right: 0; } .two-col-alternating .section:nth-of-type(2n) .column { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section:nth-of-type(2n) .column:last-child { margin-right: 0; } .two-col-alternating .section:nth-of-type(2n) .column:nth-of-type(2) { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section:nth-of-type(2n) .column:nth-of-type(2):last-child { margin-right: 0; } }.two-col-alternating .section.display-as-mobile .column { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section.display-as-mobile .column:last-child { margin-right: 0; } .two-col-alternating .section.display-as-mobile .column:nth-of-type(2) { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section.display-as-mobile .column:nth-of-type(2):last-child { margin-right: 0; } .two-col-alternating .section.display-as-mobile:nth-of-type(2n) .column { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section.display-as-mobile:nth-of-type(2n) .column:last-child { margin-right: 0; } .two-col-alternating .section.display-as-mobile:nth-of-type(2n) .column:nth-of-type(2) { float: left; display: block; margin-right: 7.42297%; width: 46.28851%} .two-col-alternating .section.display-as-mobile:nth-of-type(2n) .column:nth-of-type(2):last-child { margin-right: 0; } .two-col-alternating-thirds { width: 100%; background: #fff; position: relative; z-index: 1; } .two-col-alternating-thirds>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .two-col-alternating-thirds>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .two-col-alternating-thirds>.inner { padding: 1.5em 10px; } }.two-col-alternating-thirds>.inner.display-as-mobile { padding: 1.5em 10px; } .two-col-alternating-thirds>.inner p { text-align: center; } .two-col-alternating-thirds>.inner a { color: #00aeef; } .two-col-alternating-thirds .center>* { margin: 0 auto; text-align: center; } .two-col-alternating-thirds .section { max-width: 68em; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: 3em; } .two-col-alternating-thirds .section:after { content: ""; display: table; clear: both; } .two-col-alternating-thirds .section .column { float: left; display: block; margin-right: 38.19821%; width: 100%; text-align: left; } .two-col-alternating-thirds .section .column:last-child { margin-right: 0; } @media screen and (min-width: 768px) { .two-col-alternating-thirds .section .column { float: left; display: block; margin-right: 10.1484%; width: 63.28387%} .two-col-alternating-thirds .section .column:last-child { margin-right: 0; } .two-col-alternating-thirds .section .column:nth-of-type(2) { float: left; display: block; margin-right: 10.1484%; width: 26.56773%} .two-col-alternating-thirds .section .column:nth-of-type(2):last-child { margin-right: 0; } .two-col-alternating-thirds .section:nth-of-type(2n) .column { float: left; display: block; margin-right: 10.1484%; width: 26.56773%} .two-col-alternating-thirds .section:nth-of-type(2n) .column:last-child { margin-right: 0; } .two-col-alternating-thirds .section:nth-of-type(2n) .column:nth-of-type(2) { float: left; display: block; margin-right: 10.1484%; width: 63.28387%} .two-col-alternating-thirds .section:nth-of-type(2n) .column:nth-of-type(2):last-child { margin-right: 0; } }.two-col-alternating-thirds .section.display-as-mobile .column { float: left; display: block; margin-right: 10.1484%; width: 63.28387%} .two-col-alternating-thirds .section.display-as-mobile .column:last-child { margin-right: 0; } .two-col-alternating-thirds .section.display-as-mobile .column:nth-of-type(2) { float: left; display: block; margin-right: 10.1484%; width: 26.56773%} .two-col-alternating-thirds .section.display-as-mobile .column:nth-of-type(2):last-child { margin-right: 0; } .two-col-alternating-thirds .section.display-as-mobile:nth-of-type(2n) .column { float: left; display: block; margin-right: 10.1484%; width: 26.56773%} .two-col-alternating-thirds .section.display-as-mobile:nth-of-type(2n) .column:last-child { margin-right: 0; } .two-col-alternating-thirds .section.display-as-mobile:nth-of-type(2n) .column:nth-of-type(2) { float: left; display: block; margin-right: 10.1484%; width: 63.28387%} .two-col-alternating-thirds .section.display-as-mobile:nth-of-type(2n) .column:nth-of-type(2):last-child { margin-right: 0; } .primary-alternating-sections-wrap .two-col-alternating img { width: 100%; height: 100%; max-width: 250px; margin: 0 auto; } @media screen and (max-width: 480px) { .primary-alternating-sections-wrap .two-col-alternating img { width: 200px; height: 200px; margin: 0 auto; } }.primary-alternating-sections-wrap .two-col-alternating img.display-as-mobile { width: 200px; height: 200px; margin: 0 auto; } .secondary-alternating-sections-wrap { width: 100%; background: #eee; position: relative; z-index: 1; padding-bottom: 0; } .secondary-alternating-sections-wrap>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .secondary-alternating-sections-wrap>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .secondary-alternating-sections-wrap>.inner { padding: 1.5em 10px; } }.secondary-alternating-sections-wrap>.inner.display-as-mobile { padding: 1.5em 10px; } .secondary-alternating-sections-wrap>.inner p { text-align: left; } .secondary-alternating-sections-wrap>.inner a { color: #00aeef; } .secondary-alternating-sections-wrap .center>* { margin: 0 auto; text-align: center; } .secondary-alternating-sections-wrap .inner p { text-align: center; } @media screen and (max-width: 768px) { .secondary-alternating-sections-wrap .inner { padding-left: 1em; padding-right: 1em; } }.secondary-alternating-sections-wrap .inner.display-as-mobile { padding-left: 1em; padding-right: 1em; } .secondary-alternating-sections-wrap .two-col-alternating { background: none; padding-bottom: 0; } .secondary-alternating-sections-wrap .two-col-alternating img { width: 200px; height: auto; margin: 0 auto; margin-bottom: 30px; } .secondary-alternating-sections-wrap .two-col-alternating p, .secondary-alternating-sections-wrap .two-col-alternating p:first-of-type { text-align: left; font-size: 16px; } .secondary-alternating-sections-wrap .two-col-alternating h2, .secondary-alternating-sections-wrap .two-col-alternating h3 { font-size: 21px; text-align: left; } .section-basic { width: 100%; background: #eee; position: relative; z-index: 1; } .section-basic>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .section-basic>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-basic>.inner { padding: 1.5em 10px; } }.section-basic>.inner.display-as-mobile { padding: 1.5em 10px; } .section-basic>.inner p { text-align: center; } .section-basic>.inner a { color: #00aeef; } .section-basic .center>* { margin: 0 auto; text-align: center; } .section-basic-white { width: 100%; background: #fff; position: relative; z-index: 1; } .section-basic-white>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .section-basic-white>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-basic-white>.inner { padding: 1.5em 10px; } }.section-basic-white>.inner.display-as-mobile { padding: 1.5em 10px; } .section-basic-white>.inner p { text-align: center; } .section-basic-white>.inner a { color: #00aeef; } .section-basic-white .center>* { margin: 0 auto; text-align: center; } .section-dark { width: 100%; background: #222; position: relative; z-index: 1; } .section-dark>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .section-dark>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-dark>.inner { padding: 1.5em 10px; } }.section-dark>.inner.display-as-mobile { padding: 1.5em 10px; } .section-dark>.inner p { text-align: center; } .section-dark>.inner a { color: #00aeef; } .section-dark .center>* { margin: 0 auto; text-align: center; } .section-grid, .work-stats, .work-section, .blog-detail { width: 100%; background: #eee; position: relative; z-index: 1; background-size: 50%; background-repeat: repeat; } .section-grid>.inner, .work-stats>.inner, .work-section>.inner, .blog-detail>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .section-grid>.inner:after, .work-stats>.inner:after, .work-section>.inner:after, .blog-detail>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-grid>.inner, .work-stats>.inner, .work-section>.inner, .blog-detail>.inner { padding: 1.5em 10px; } }.section-grid>.inner.display-as-mobile, .work-stats>.inner.display-as-mobile, .work-section>.inner.display-as-mobile, .blog-detail>.inner.display-as-mobile { padding: 1.5em 10px; } .section-grid>.inner p, .work-stats>.inner p, .work-section>.inner p, .blog-detail>.inner p { text-align: center; } .section-grid>.inner a, .work-stats>.inner a, .work-section>.inner a, .blog-detail>.inner a { color: #00aeef; } .section-grid .center>*, .work-stats .center>*, .work-section .center>*, .blog-detail .center>* { margin: 0 auto; text-align: center; } .section-basic-short { width: 100%; background: #fff; position: relative; z-index: 1; } .section-basic-short>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1em; } .section-basic-short>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-basic-short>.inner { padding: 1em 10px; } }.section-basic-short>.inner.display-as-mobile { padding: 1em 10px; } .section-basic-short>.inner p { text-align: center; } .section-basic-short>.inner a { color: #00aeef; } .section-basic-short .center>* { margin: 0 auto; text-align: center; } .section-basic-left { width: 100%; position: relative; padding: 0px; overflow: visible; margin-bottom: -400px; } .section-basic-left:after { content: ''; display: block; background: #eee; height: calc(100% - 200px); width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .section-basic-left>.inner { padding: 40px; background-color: #fff; position: relative; top: -100px; padding: 60px; max-width: 68em; margin: auto; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } @media screen and (max-width: 480px) { .section-basic-left>.inner { padding: 2em; margin-bottom: 50px; } }.section-basic-left>.inner.display-as-mobile { padding: 2em; margin-bottom: 50px; } .section-basic-left>.inner .accordian-body { margin-bottom: 40px; } .section-basic-left>.inner a { color: #e8168c !important; } @media screen and (max-width: 480px) { .section-basic-left { padding: 10px; } }.section-basic-left.display-as-mobile { padding: 10px; } .section-secondary { width: 100%; background: #eee; position: relative; z-index: 1; } .section-secondary>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .section-secondary>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .section-secondary>.inner { padding: 1.5em 10px; } }.section-secondary>.inner.display-as-mobile { padding: 1.5em 10px; } .section-secondary>.inner p { text-align: center; } .section-secondary>.inner a { color: #00aeef; } .section-secondary .center>* { margin: 0 auto; text-align: center; } .full-width { width: 100%; background: #fff; position: relative; z-index: 1; } .full-width>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .full-width>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .full-width>.inner { padding: 1.5em 10px; } }.full-width>.inner.display-as-mobile { padding: 1.5em 10px; } .full-width>.inner p { text-align: center; } .full-width>.inner a { color: #00aeef; } .full-width .center>* { margin: 0 auto; text-align: center; } .full-width>.inner { max-width: none; width: 100%; padding: 0; margin: 0; } .half-section { width: 50%; height: 100%; display: inline-block; float: left; padding: 60px; } @media screen and (max-width: 768px) { .half-section { width: 100%} }.half-section.display-as-mobile { width: 100%} .detail-preview { width: 100%; position: relative; overflow: hidden; } .detail-preview>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; padding-top: 100px; padding-bottom: 100px; } .detail-preview>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 480px) { .detail-preview>.inner { padding-left: 20px; padding-right: 20px; } }.detail-preview>.inner.display-as-mobile { padding-left: 20px; padding-right: 20px; } .detail-preview .image { -webkit-transition: all, 200ms; transition: all, 200ms; position: absolute; width: 100%; height: 110%; top: -5%; left: 0 !important; background-size: cover; background-position: center center; z-index: -1; } .detail-preview:hover .image { opacity: 1; } .detail-preview h2 .strong { font-size: 50px; color: #fff; } @media screen and (max-width: 480px) { .detail-preview h2 .strong { font-size: 21px; } }.detail-preview h2 .strong.display-as-mobile { font-size: 21px; } .detail-preview .b2 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .detail-preview .b2>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .detail-preview .b2:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .detail-preview .b2:hover .label { color: #fff; } .detail-preview .b2:hover:after { height: 100%} .two-col-alternating-tiles { width: 100%; padding: 0; background: #000; } .two-col-alternating-tiles h2, .two-col-alternating-tiles h3 { font-size: 28px; text-align: left; color: #fff; } .two-col-alternating-tiles p { color: #fff; font-size: 1.3em; } .two-col-alternating-tiles .section { padding: 0; margin: 0; background: none !important; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .section { background: none !important; } }.two-col-alternating-tiles .section.display-as-mobile { background: none !important; } .two-col-alternating-tiles .section:nth-of-type(odd) .column:nth-of-type(odd) { padding: 4em; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .section: nth-of-type(odd) .column:nth-of-type(odd) { padding: 2em; } }.two-col-alternating-tiles .section:nth-of-type(odd) .column:nth-of-type(odd).display-as-mobile { padding: 2em; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .section: nth-of-type(odd) .column:nth-of-type(even) { background-image: none !important; } }.two-col-alternating-tiles .section:nth-of-type(odd).display-as-mobile .column:nth-of-type(even) { background-image: none !important; } .two-col-alternating-tiles .section:nth-of-type(even) .column:nth-of-type(odd) { float: right; padding: 4em; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .section: nth-of-type(even) .column:nth-of-type(odd) { padding: 2em; } }.two-col-alternating-tiles .section:nth-of-type(even) .column:nth-of-type(odd).display-as-mobile { padding: 2em; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .section: nth-of-type(even) .column:nth-of-type(even) { background-image: none !important; } }.two-col-alternating-tiles .section:nth-of-type(even).display-as-mobile .column:nth-of-type(even) { background-image: none !important; } .two-col-alternating-tiles .column { width: 50%; display: inline-block; float: left; background-position: center; background-size: cover; min-height: 500px; } @media screen and (max-width: 480px) { .two-col-alternating-tiles .column { float: right; width: 100%; min-height: 200px; } }.two-col-alternating-tiles .column.display-as-mobile { float: right; width: 100%; min-height: 200px; } .cta { width: 100%; color: #000; background-size: cover; position: relative; overflow: hidden; } @media screen and (min-width: 768px) { .cta { padding: 100px 0; } }.cta.display-as-mobile { padding: 100px 0; } .cta>.bg-image { background-color: #fff200; position: absolute; min-width: 100%; display: block !important; height: 100%; left: 0 !important; top: 0 !important; background-size: cover; background-position: center center; z-index: -1; } .cta h2 { font-size: 50px; line-height: 50px; margin-bottom: 15px; } @media screen and (max-width: 480px) { .cta h2 { font-size: 31px; line-height: 31px; } }.cta h2.display-as-mobile { font-size: 31px; line-height: 31px; } .cta>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 0 20px; } .cta>.inner:after { content: ""; display: table; clear: both; } .cta.cta-general { color: #fff; background: none; background-color: none; } .cta.cta-general>.bg-image { background-color: none; } @media screen and (max-width: 480px) { .cta.cta-general>.bg-image { top: 0 !important; height: 100%} }.cta.cta-general>.bg-image.display-as-mobile { top: 0 !important; height: 100%} .cta.cta-general .btn-normal { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .cta.cta-general .btn-normal>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .cta.cta-general .btn-normal:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .cta.cta-general .btn-normal:hover .label { color: #fff; } .cta.cta-general .btn-normal:hover:after { height: 100%} #page-service-popup .intro { background: #fff200; } .work { width: 100%; background: #fff; position: relative; z-index: 1; } .work>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .work>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .work>.inner { padding: 1.5em 10px; } }.work>.inner.display-as-mobile { padding: 1.5em 10px; } .work>.inner p { text-align: center; } .work>.inner a { color: #00aeef; } .work .center>* { margin: 0 auto; text-align: center; } @media screen and (max-width: 768px) { .work { padding-bottom: 0; } }.work.display-as-mobile { padding-bottom: 0; } .work-clients { width: 100%; background: #fff; position: relative; z-index: 1; } .work-clients>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .work-clients>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .work-clients>.inner { padding: 1.5em 10px; } }.work-clients>.inner.display-as-mobile { padding: 1.5em 10px; } .work-clients>.inner p { text-align: center; } .work-clients>.inner a { color: #00aeef; } .work-clients .center>* { margin: 0 auto; text-align: center; } .work-clients img { width: 11% !important; margin: 2% !important; } @media screen and (max-width: 480px) { .work-clients img { width: 27% !important; margin: 3% !important; } }.work-clients img.display-as-mobile { width: 27% !important; margin: 3% !important; } .work-stats .stat { float: left; display: block; margin-right: 16.03631%; width: 41.98184%; margin-top: 2em; margin-bottom: 2em; } .work-stats .stat:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .work-stats .stat { float: left; display: block; margin-right: 38.19821%; width: 100%; margin-bottom: 2em; } .work-stats .stat:last-child { margin-right: 0; } }.work-stats .stat.display-as-mobile { float: left; display: block; margin-right: 38.19821%; width: 100%; margin-bottom: 2em; } .work-stats .stat.display-as-mobile:last-child { margin-right: 0; } .work-stats .stat img { max-width: 125px; } .work-stats .stat .stat-info .label, .work-stats .stat .stat-info .value { text-align: center; font-weight: bold; font-family: "bree", "Source Sans Pro", sans-serif; } .work-stats .stat .stat-info .label { font-size: 28px; color: #444; display: block; } .work-stats .stat .stat-info .value { display: inline-block; font-size: 28px; padding: 0 0.4em; } .section-work-images { width: 100%; padding: 0px 0; font-size: 0; } .section-work-images>img { height: auto; display: block; margin: 0 auto; } .work-share, .blog-share { background-color: #eee; background-size: 50%; background-repeat: repeat; } .work-share .inner, .blog-share .inner { text-align: center; } .work-share .inner .icon, .blog-share .inner .icon { color: #000; } .work-share .inner .icon:hover, .blog-share .inner .icon:hover { color: #fff200; } .work-share { min-height: 100px; } @media screen and (max-width: 480px) { .work-section { padding: 10px; } }.work-section.display-as-mobile { padding: 10px; } .work-section .inner { background: #fff; position: relative; top: -150px; margin-bottom: -100px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .work-section #intro { padding: 40px; } .work-section #intro .outer-container { display: -webkit-box; display: flex; flex-wrap: wrap; } @media screen and (max-width: 480px) { .work-section #intro { padding: 10px; } }.work-section #intro.display-as-mobile { padding: 10px; } .work-section .description { -webkit-box-flex: 2; flex: 2; margin-top: 2em; margin-bottom: 3em; font-weight: 300; } @media screen and (max-width: 768px) { .work-section .description { min-width: 100%} }.work-section .description.display-as-mobile { min-width: 100%} .work-section .description p { text-align: left; } @media screen and (min-width: 768px) { .work-section .description p { font-size: 1.2em !important; line-height: 1.4em !important; font-weight: 300 !important; } }.work-section .description p.display-as-mobile { font-size: 1.2em !important; line-height: 1.4em !important; font-weight: 300 !important; } .work-section .description p:first-of-type::first-letter { font-size: 3.2em; padding-top: 0.2em; float: left; padding-right: 2px; line-height: 0.5; } .work-section .description iframe { display: block; max-width: 100%; margin: 0 auto; width: 60%; margin-bottom: 1em; } @media screen and (max-width: 768px) { .work-section .description iframe { width: 80% !important; } }.work-section .description iframe.display-as-mobile { width: 80% !important; } @media screen and (max-width: 480px) { .work-section .description iframe { width: 100% !important; } }.work-section .description iframe.display-as-mobile { width: 100% !important; } .work-section .info-wrap { text-align: left; font-size: 14px; font-weight: 300; margin-bottom: 20px; } .work-section .info-wrap .location { text-transform: uppercase; } .work-section .info-wrap .location:before { content: " | "} .work-section .facts { -webkit-box-flex: 1; flex: 1; -webkit-box-ordinal-group: 3; order: 2; margin-top: 2em; margin-left: 80px; margin-top: 60px; } @media screen and (max-width: 480px) { .work-section .facts { margin-left: 0px; margin-top: 0px; } }.work-section .facts.display-as-mobile { margin-left: 0px; margin-top: 0px; } .work-section .facts .facts-details { text-align: left; margin-bottom: 15px; } @media screen and (max-width: 768px) { .work-section .facts .facts-details { min-width: 100%} }.work-section .facts .facts-details.display-as-mobile { min-width: 100%} @media screen and (min-width: 768px) { .work-section .facts .facts-details { font-size: 21px !important; line-height: 35px !important; font-weight: normal !important; } }.work-section .facts .facts-details.display-as-mobile { font-size: 21px !important; line-height: 35px !important; font-weight: normal !important; } .work-section .facts .b1 { float: left; } @media screen and (max-width: 480px) { .work-section .facts .b1 { float: none; } }.work-section .facts .b1.display-as-mobile { float: none; } @media screen and (max-width: 480px) { .work-section .description, .work-section .facts { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-bottom: 0; } .work-section .description:last-child, .work-section .facts:last-child { margin-right: 0; } }.work-section.display-as-mobile .description, .work-section.display-as-mobile .facts { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-bottom: 0; } .work-section.display-as-mobile .description:last-child, .work-section.display-as-mobile .facts:last-child { margin-right: 0; } .work-section .work-aside { float: left; display: block; margin-right: 10.1484%; width: 26.56773%; margin-bottom: 1em; padding-bottom: 2em; color: #000; text-align: left; } .work-section .work-aside:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .work-section .work-aside { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-top: 1em; } .work-section .work-aside:last-child { margin-right: 0; } }.work-section .work-aside.display-as-mobile { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-top: 1em; } .work-section .work-aside.display-as-mobile:last-child { margin-right: 0; } .work-section .work-aside .tags { margin-bottom: 80px; } .work-section .work-sidebar-heading { display: block; width: 100%; color: #000; text-align: left; display: inline-block; } .work-section .work-sidebar-heading:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .blog-header { background-color: #333; background-size: cover; z-index: 1; height: 600px; } .blog-header .heading { max-width: 68em; margin: auto; } .blog-header .heading .subheading { font-size: 50px; } @media screen and (max-width: 480px) { .blog-header .heading .subheading { font-size: 30px; } }.blog-header .heading .subheading.display-as-mobile { font-size: 30px; } .blog-header .strong { color: #fff200 !important; } .blog-header .plead { color: #000; font-weight: 400 !important; } @media screen and (max-width: 480px) { .blog-header .plead { font-size: 19px !important; } }.blog-header.display-as-mobile .plead { font-size: 19px !important; } .blog-header>.inner { padding: 140px 1em; } .section-blog { overflow: visible; } .section-blog .inner { padding: 0; } .blog-list { max-width: 68em; margin-left: auto; margin-right: auto; } .blog-list:after { content: ""; display: table; clear: both; } .blog-list .listing { float: left; display: block; margin-right: 4.11092%; width: 100%} .blog-list .listing:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .blog-list .listing { float: left; display: block; margin-right: 10.1484%; width: 100%} .blog-list .listing:last-child { margin-right: 0; } }.blog-list .listing.display-as-mobile { float: left; display: block; margin-right: 10.1484%; width: 100%} .blog-list .listing.display-as-mobile:last-child { margin-right: 0; } .blog-list .listing .hentry { background-color: #eee; background-size: 100%; background-position: center center; position: relative; height: 340px; width: 100%; margin-bottom: 2em; } @media screen and (max-width: 480px) { .blog-list .listing .hentry { background-size: cover !important; height: 420px; } }.blog-list .listing .hentry.display-as-mobile { background-size: cover !important; height: 420px; } .blog-list .listing .hentry .box { width: 300px; background: #fff; border: 9px solid #000; position: absolute; bottom: 0; left: 0; height: 100%; padding: 1em; } .blog-list .listing .hentry .box .date { font-size: 13px; text-align: right; } .blog-list .listing .hentry .box h2 { font-size: 26px; line-height: 28px; text-align: left; } .blog-list .listing .hentry .box h2 a { color: #444 !important; } .blog-list .listing .hentry .box p { text-align: left; padding: 0.5em 0; } @media screen and (max-width: 480px) { .blog-list .listing .hentry .box { width: 100%; height: 75%} }.blog-list .listing .hentry .box.display-as-mobile { width: 100%; height: 75%} .blog-list .listing .hentry .read { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; position: absolute; right: 1em; bottom: 1em; } .blog-list .listing .hentry .read>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .blog-list .listing .hentry .read:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .blog-list .listing .hentry .read:hover .label { color: #fff; } .blog-list .listing .hentry .read:hover:after { height: 100%} @media screen and (max-width: 480px) { .blog-list .listing .hentry .read { right: auto; left: 1.5em; bottom: 1.5em; } }.blog-list .listing .hentry .read.display-as-mobile { right: auto; left: 1.5em; bottom: 1.5em; } .blog-list .listing .hentry:nth-of-type(2n) .read { right: auto; left: 1em; } .blog-list .listing .hentry:nth-of-type(2n) .box { left: auto; right: 0; } .blog-preview { display: block; position: relative; } .blog-preview .fixed-height { display: block; min-height: 220px; } .blog-preview .image-holder { -webkit-appearance: none; background-size: 100%; background-position: center; width: 100%; height: 140px; } .blog-preview h3, .blog-preview a, .blog-preview p { text-align: left !important; } .blog-preview h3 { line-height: 1.1em; margin-bottom: -15px; height: 50px; } @media screen and (max-width: 480px) { .blog-preview h3 { font-size: 21px; } }.blog-preview h3.display-as-mobile { font-size: 21px; } .blog-preview .date { position: absolute; top: 15px; right: 15px; color: #fff; font-size: 13px; } .blog-preview .b2 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; position: absolute; bottom: 30px; left: 50%; margin-left: -80px; text-align: center !important; } .blog-preview .b2>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .blog-preview .b2:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #000; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .blog-preview .b2:hover .label { color: #fff; } .blog-preview .b2:hover:after { height: 100%} .blog-detail { padding: 0; overflow: visible; } .blog-detail .inner p, .blog-detail .inner li { text-align: left; } @media screen and (max-width: 480px) { .blog-detail .inner { padding: 10px; } }.blog-detail .inner.display-as-mobile { padding: 10px; } .blog-detail .inner .main.inner .description p:first-of-type::first-letter { font-size: 3.2em; padding-top: 0.2em; float: left; padding-right: 2px; line-height: 0.5; } .blog-detail .main { float: left; display: block; margin-right: 3.57866%; width: 100%; background: #fff; padding: 2em; padding-top: 80px; margin-top: -200px; font-weight: 300; } .blog-detail .main:last-child { margin-right: 0; } @media screen and (max-width: 480px) { .blog-detail .main { box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } }.blog-detail .main.display-as-mobile { box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .blog-detail .main ul { list-style-type: disc; } .blog-detail .column--post .inner { box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .blog-detail p { font-size: 1.2em; } .blog-detail .meta { font-size: 13px; } .blog-detail a { color: #00aeef; } .blog-detail a:hover { text-decoration: underline; } .blog-detail iframe { max-width: 100%} .blog-detail .social-icons a:hover { text-decoration: none; } .blog-detail .icon { color: #000 !important; } .blog-detail .icon:hover { color: #fff200 !important; } .blog-detail h2, .blog-detail h3 { text-align: left; } .blog-detail p { margin-bottom: 1em; } .blog-detail .plead { margin-bottom: 2em; } .blog-latest-posts { width: 100%; position: relative; overflow: hidden; } .blog-latest-posts>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em; padding-top: 100px; padding-bottom: 100px; } .blog-latest-posts>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 480px) { .blog-latest-posts>.inner { padding-left: 20px; padding-right: 20px; } }.blog-latest-posts>.inner.display-as-mobile { padding-left: 20px; padding-right: 20px; } .blog-latest-posts .image { -webkit-transition: all, 200ms; transition: all, 200ms; position: absolute; width: 100%; height: 110%; top: -5%; left: 0 !important; background-size: cover; background-position: center center; z-index: -1; } .blog-latest-posts:hover .image { opacity: 1; } .blog-latest-posts h2 .strong { font-size: 50px; color: #fff; } @media screen and (max-width: 480px) { .blog-latest-posts h2 .strong { font-size: 21px; } }.blog-latest-posts h2 .strong.display-as-mobile { font-size: 21px; } .blog-latest-posts .b2 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .blog-latest-posts .b2>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .blog-latest-posts .b2:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .blog-latest-posts .b2:hover .label { color: #fff; } .blog-latest-posts .b2:hover:after { height: 100%} .blog-aside { float: left; display: block; margin-right: 38.19821%; width: 100%; margin: 0; margin-bottom: 1em; padding-bottom: 2em; color: #000; text-align: left; } .blog-aside:last-child { margin-right: 0; } .blog-aside ul li { padding: 5px 0; } .blog-aside blockquote, .blog-aside .tweet { padding: 0; margin: 0; } .blog-aside .tweet { margin-bottom: 2em; font-size: 0.8em; color: #333; } .blog-aside .tweet p { text-align: left; margin-bottom: 0; } .blog-aside .tweet:last-of-type { margin-bottom: 0; } .blog-aside .timestamp { font-style: italic; } .blog-aside a { color: #000 !important; } .blog-aside a:hover { text-decoration: underline; } .blog-aside .icon { color: #fff200 !important; margin-right: 6px; } .blog-aside .icon:hover { color: #fff200 !important; } @media screen and (max-width: 480px) { .blog-aside { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-top: 1em; } .blog-aside:last-child { margin-right: 0; } }.blog-aside.display-as-mobile { float: left; display: block; margin-right: 10.1484%; width: 100%; margin-top: 1em; } .blog-aside.display-as-mobile:last-child { margin-right: 0; } .blog-post-board { box-shadow: none !important; background-color: transparent !important; } @media screen and (max-width: 480px) { .blog-post-board { box-shadow: none !important; background-color: #fff; } }.blog-post-board.display-as-mobile { box-shadow: none !important; background-color: #fff; } .blog-post-board .inner { top: 0; box-shadow: none !important; } .blog-post-board .mood-piece { height: auto !important; min-height: 300px; -webkit-box-flex: 1 !important; flex: 1 1 100% !important; margin-bottom: 20px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .blog-post-board .mood-piece .mood-content .mood-heading { text-align: left; } .blog-post-board .mood-piece .mood-content .mood-heading h2 a { color: #fff; } .blog-post-board .mood-piece .mood-content .mood-blurb p { text-align: left !important; } .blog-post-board .mood-piece .mood-content .date { color: #fff; } .blog-post-board .mood-piece .mood-content .mood-button { opacity: 1 !important; text-align: left; } .blog-sidebar-heading, .blog-aside h3 { display: block; width: 100%; padding: 15px 0; margin-bottom: 15px; color: #000; text-align: left; display: inline-block; } .blog-sidebar-heading:after, .blog-aside h3:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .blog-button { background-color: #eee; width: 100%} .blog-button .inner { margin: auto; max-width: 68em; width: 100%; text-align: center; } .blog-button .inner .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .blog-button .inner .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .blog-button .inner .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .blog-button .inner .btn:hover .label { color: #fff; } .blog-button .inner .btn:hover:after { height: 100%} .contact { width: 100%; background: #fff; position: relative; z-index: 1; padding-bottom: 0; } .contact>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .contact>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .contact>.inner { padding: 1.5em 10px; } }.contact>.inner.display-as-mobile { padding: 1.5em 10px; } .contact>.inner p { text-align: center; } .contact>.inner a { color: #00aeef; } .contact .center>* { margin: 0 auto; text-align: center; } .contact-header { height: 120vh !important; min-height: 400px; padding-bottom: 100px; } .contact-header .image-header--image { position: absolute; } @media screen and (max-width: 480px) { .contact-header { padding-bottom: 50px; padding-top: 100px; } }.contact-header.display-as-mobile { padding-bottom: 50px; padding-top: 100px; } .contact-header a { color: #fff; } .subscribe { width: 100%; background: #666; position: relative; z-index: 1; background-color: transparent; color: #fff; } .subscribe>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1.5em; } .subscribe>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 768px) { .subscribe>.inner { padding: 1.5em 10px; } }.subscribe>.inner.display-as-mobile { padding: 1.5em 10px; } .subscribe>.inner p { text-align: center; } .subscribe>.inner a { color: #00aeef; } .subscribe .center>* { margin: 0 auto; text-align: center; } .subscribe .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .subscribe .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .subscribe .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .subscribe .b1:hover .label { color: #fff; } .subscribe .b1:hover:after { height: 100%} .contact-heading { display: block; width: 100%; padding: 15px 0; margin-bottom: 15px; margin-top: 30px; color: #fff; text-align: left; font-size: 28px; display: inline-block; } @media screen and (max-width: 480px) { .contact-heading { margin-top: 15px; } }.contact-heading.display-as-mobile { margin-top: 15px; } .contact-heading:after { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; border-radius: 2px; } .contact-heading+ul li { color: #fff !important; -webkit-appareance: none; font-size: 21px; } #map { padding: 0; overflow: visible; } #map>.inner { padding: 0; } #map-wrap { width: 100%; max-width: 68em; height: 400px; margin: auto; margin-top: -200px; z-index: 9998; } #map-wrap img { max-width: none; } @media screen and (max-width: 480px) { #map-wrap { height: 300px; margin-top: 0px; margin-bottom: -200px; } }#map-wrap.display-as-mobile { height: 300px; margin-top: 0px; margin-bottom: -200px; } #contact-icons { text-align: left; margin-top: 1em; } #contact-icons .icon { color: #fff; } #contact-icons .icon:hover { color: #fff200; } .section-brochure { position: relative; overflow: hidden; } .section-brochure>.inner { max-width: 68em; margin-left: auto; margin-right: auto; padding: 1em; } .section-brochure>.inner:after { content: ""; display: table; clear: both; } @media screen and (max-width: 480px) { .section-brochure>.inner { padding: 2em; } }.section-brochure>.inner.display-as-mobile { padding: 2em; } .brochure-title { position: relative; z-index: 99; margin-bottom: 2em; } .brochure-image { position: absolute; height: auto; } @media screen and (max-width: 480px) { .brochure-image { position: relative; width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important; } }.brochure-image.display-as-mobile { position: relative; width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 !important; } .brochure-heading { position: relative; z-index: 100; width: 100%; display: block; border-top: 2px solid #fff; border-bottom: 1px solid #fff; padding: 10px 0; margin-bottom: 30px; text-align: left; font-weight: 400; } .brochure-heading__black { position: relative; z-index: 100; width: 100%; display: block; border-top: 2px solid #000; border-bottom: 1px solid #000; } .brochure-text { position: relative; z-index: 101; width: 100%; display: block; text-align: left; } #partner-benefits { background: #000; } #partner-benefits h2, #partner-benefits h3, #partner-benefits p { color: #fff; } #partner-benefits #brochure-image__new-contact { left: 50%; bottom: 50%; width: 50%; margin-bottom: 100px; } #partner-benefits #brochure-image__stick-what-you-know { right: 51%; top: 45%; width: 50%} #partner-benefits #brochure-image__rewards { width: 50%; left: 50%; margin-left: 15px; bottom: 0%} .tabs { background-color: #eee; height: auto; position: relative; padding: 40px; } @media screen and (max-width: 480px) { .tabs { padding: 0px; } }.tabs.display-as-mobile { padding: 0px; } .tabs .inner { max-width: 68em; margin: 5% auto; overflow: hidden; position: relative; } @media screen and (max-width: 480px) { .tabs .inner { padding: 20px; margin: 0 auto; } }.tabs .inner.display-as-mobile { padding: 20px; margin: 0 auto; } .tabs .inner .strong { color: #555 !important; margin: 40px 0px 40px 0px; } @media screen and (max-width: 480px) { .tabs .inner .strong { margin: 10px 0px 10px 0px; } }.tabs .inner .strong.display-as-mobile { margin: 10px 0px 10px 0px; } @media screen and (max-width: 480px) { .tabs .inner .desktop { display: none; } }.tabs .inner .desktop.display-as-mobile { display: none; } .tabs .inner .desktop .tabs-headings { margin-bottom: 60px; width: 70%} @media screen and (max-width: 768px) { .tabs .inner .desktop .tabs-headings { width: 100%; position: relative; overflow-x: hidden; overflow-y: hidden; width: calc(100% - 40px); margin-bottom: 20px; -webkit-transform: translateX(0); -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; } .tabs .inner .desktop .tabs-headings::-webkit-scrollbar { display: none; } }.tabs .inner .desktop .tabs-headings.display-as-mobile { width: 100%; position: relative; overflow-x: hidden; overflow-y: hidden; width: calc(100% - 40px); margin-bottom: 20px; -webkit-transform: translateX(0); -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; } .tabs .inner .desktop .tabs-headings.display-as-mobile::-webkit-scrollbar { display: none; } @media screen and (max-width: 768px) { .tabs .inner .desktop .tabs-headings .heading-wrap { width: 1000%; padding-top: 10px; margin-top: -10px; padding-bottom: 10px; background-color: #eee; opacity: 0.95; -webkit-transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; } }.tabs .inner .desktop .tabs-headings .heading-wrap.display-as-mobile { width: 1000%; padding-top: 10px; margin-top: -10px; padding-bottom: 10px; background-color: #eee; opacity: 0.95; -webkit-transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; } .tabs .inner .desktop .tabs-headings .heading-wrap>div { display: inline-block; cursor: pointer; font-size: 28px; position: relative; padding-top: 0px; margin-right: 20px; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-headings .heading-wrap>div { font-size: 16px; } }.tabs .inner .desktop .tabs-headings .heading-wrap>div.display-as-mobile { font-size: 16px; } .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3 { display: inline-block; margin-bottom: 0px; font-weight: 300; font-size: 28px; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3 { font-weight: 400; display: inline-block; } .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3:after { -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%} }.tabs .inner .desktop .tabs-headings .heading-wrap>div>h3.display-as-mobile { font-weight: 400; display: inline-block; } .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3.display-as-mobile:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .tabs .inner .desktop .tabs-headings .heading-wrap>div>h3.display-as-mobile:after { -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%} .tabs .inner .desktop .tabs-headings .heading-wrap>div.active h3 { font-weight: 900; } @media screen and (max-width: 768px) { .tabs .inner .desktop .tabs-headings .heading-wrap>div.active h3: after { -webkit-transform: scaleX(1); transform: scaleX(1); } }.tabs .inner .desktop .tabs-headings .heading-wrap>div.active h3.display-as-mobile:after { -webkit-transform: scaleX(1); transform: scaleX(1); } .tabs .inner .desktop .heading-underline { width: 16.66%; height: 5px; background-color: #000; border-radius: 2px; -webkit-transition: none; transition: none; position: absolute; } @media screen and (max-width: 768px) { .tabs .inner .desktop .heading-underline { display: none; } }.tabs .inner .desktop .heading-underline.display-as-mobile { display: none; } .tabs .inner .desktop .tabs-body { display: block; position: relative; height: 40vh; } .tabs .inner .desktop .tabs-body>div { display: -webkit-box; display: flex; flex-wrap: wrap; flex-wrap: none; position: absolute; width: 100%; height: 100%; min-height: 200px; height: auto; opacity: 0; -webkit-transition: opacity 500ms; transition: opacity 500ms; pointer-events: none; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; -webkit-flex-direction: column; } }.tabs .inner .desktop .tabs-body>div.display-as-mobile { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; -webkit-flex-direction: column; } .tabs .inner .desktop .tabs-body>div .tabs-left { -webkit-box-flex: 3; flex: 3; -webkit-flex: 3; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; padding-right: 40px; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div .tabs-left { margin-top: 0px; padding-right: 0px; } }.tabs .inner .desktop .tabs-body>div .tabs-left.display-as-mobile { margin-top: 0px; padding-right: 0px; } .tabs .inner .desktop .tabs-body>div .tabs-left div>p { width: 100%; padding-right: 50px; font-size: 20px; line-height: 1.8em; font-weight: 300; } .tabs .inner .desktop .tabs-body>div .tabs-left div>p strong { font-weight: 800; } .tabs .inner .desktop .tabs-body>div .tabs-left div>p a { color: #555; font-weight: 600; } .tabs .inner .desktop .tabs-body>div .tabs-left div>p a:hover { color: #00aeef; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div .tabs-left div>p { padding-right: 0px; font-size: 1.2em; } }.tabs .inner .desktop .tabs-body>div .tabs-left div>p.display-as-mobile { padding-right: 0px; font-size: 1.2em; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons { -webkit-box-flex: 1; flex: 1; -webkit-flex: 1; width: 100%; padding-right: 50px; text-align: left; align-self: flex-end; margin-top: 30px; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:hover .label { color: #fff; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:hover:after { height: 100%} .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons span.project-starter { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons span.project-starter>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #e8168c; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons span.project-starter:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #e8168c; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons span.project-starter:hover .label { color: #fff; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons span.project-starter:hover:after { height: 100%} .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a, .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons>span { margin-right: 30px; margin-bottom: 10px; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; -webkit-transition-delay: 1s; transition-delay: 1s; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:nth-child(2), .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons>span:nth-child(2) { transition-delay: 1.5s; -webkit-transition-delay: 1.5s; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:nth-child(3), .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons>span:nth-child(3) { transition-delay: 2s; -webkit-transition-delay: 2s; } .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons a:nth-child(4), .tabs .inner .desktop .tabs-body>div .tabs-left .tabs-buttons>span:nth-child(4) { transition-delay: 2.5s; -webkit-transition-delay: 2.5s; } .tabs .inner .desktop .tabs-body>div .tabs-left.none { -webkit-box-flex: 0; flex: 0 0 0; padding: 0; } .tabs .inner .desktop .tabs-body>div .tabs-right { -webkit-box-flex: 1; flex: 1; -webkit-flex: 1; text-align: right; margin-top: -100px; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; -webkit-align-items: center; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div .tabs-right { margin-top: 40px; } }.tabs .inner .desktop .tabs-body>div .tabs-right.display-as-mobile { margin-top: 40px; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div .tabs-right { text-align: center; } }.tabs .inner .desktop .tabs-body>div .tabs-right.display-as-mobile { text-align: center; } .tabs .inner .desktop .tabs-body>div .tabs-right .tabs-img { margin: auto; display: none; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; -webkit-backface-visibility: hidden; outline: 1px solid transparent; max-height: 250px; } .tabs .inner .desktop .tabs-body>div .tabs-right .tabs-img:first-child { display: block; } @media screen and (max-width: 480px) { .tabs .inner .desktop .tabs-body>div .tabs-right .tabs-img { max-height: 200px; } }.tabs .inner .desktop .tabs-body>div .tabs-right .tabs-img.display-as-mobile { max-height: 200px; } .tabs .inner .desktop .tabs-body>div .tabs-right.full { margin-top: 5px; } .tabs .inner .desktop .tabs-body>div .tabs-right.full .tabs-img { display: block; height: 150px; width: auto; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table { background: rgba(255, 255, 255, 0.8); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); padding: 15px 30px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; border-radius: 5px; -webkit-transition: all 300ms; transition: all 300ms; -webkit-transform: perspective(200px) translateZ(0px); transform: perspective(200px) translateZ(0px); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; position: relative; z-index: 1; text-align: left; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .top { position: relative; background: #00aeef; top: -15px; left: -30px; padding: 15px 30px 0; width: calc(100% + 60px); color: #fff; display: -webkit-box; display: flex; border-radius: 5px 5px 0 0; opacity: 1; -webkit-transition: all 1000ms; transition: all 1000ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table h2 { line-height: 1; font-size: 40px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table>p { font-size: 18px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table h3 { margin-top: 50px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table h3 small { font-size: 12px; line-height: 1.8; color: #eee; display: block; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table h3 strong { margin-top: -15px; font-size: 30px; line-height: 1.8; display: block; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table ul { padding-left: 15px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table ul li { font-size: 16px; font-weight: 500; margin-top: 8px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .feature { position: relative; -webkit-transition: all 200ms; transition: all 200ms; background: transparent; border-radius: 5px 5px 0 0; position: relative; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .feature .info-icon .feature-description { position: absolute; background-color: black; color: white; padding: 20px; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: all 200ms; transition: all 200ms; opacity: 0; border-radius: 5px 5px 5px 5px; width: 100%; z-index: 1000; pointer-events: none; font-size: 16px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .feature .info-icon:after { content: '?'; display: inline-block; position: relative; left: 5px; top: 0px; font-size: 16px; line-height: 0.3; width: 20px; height: 20px; color: #00aeef; border-radius: 100px; padding: 5px; border: 2px solid #00aeef; text-align: center; -webkit-transition: all 300ms; transition: all 300ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .feature .info-icon:hover:after { background: #00aeef; color: #fff; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .feature .info-icon:hover .feature-description { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; width: auto; -webkit-box-flex: 10; flex: 10; -webkit-box-pack: end; justify-content: flex-end; max-height: 40px; margin: 30px 60px 15px; -webkit-transition: all 1000ms !important; transition: all 1000ms !important; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn:hover .label { color: #00aeef; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn:hover:after { height: 5px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn:before, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .btn:after { -webkit-transition: background 1000ms, height 500ms !important; transition: background 1000ms, height 500ms !important; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table .bottom { -webkit-box-flex: 10; flex: 10; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: end; justify-content: flex-end; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote { background: #fff; -webkit-transform: perspective(200px) translateZ(20px); transform: perspective(200px) translateZ(20px); box-shadow: 14px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22); z-index: 2; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .top, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .top { opacity: 1; background: #e8168c; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .btn, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .btn>.label, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .btn:after, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #e8168c; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .btn:hover .label, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .btn:hover .label { color: #e8168c; } .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table:hover .btn:hover:after, .tabs .inner .desktop .tabs-body>div .tabs-right .pricing-table.promote .btn:hover:after { height: 5px; } .tabs .inner .desktop .tabs-body>div.active { opacity: 1; -webkit-transition: opacity 200ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; pointer-events: auto; } @media screen and (max-width: 768px) { .tabs .inner .desktop .tabs-body>div.active { -webkit-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } }.tabs .inner .desktop .tabs-body>div.active.display-as-mobile { -webkit-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .tabs .inner .desktop .tabs-body>div.active .tabs-left { -webkit-touch-callout: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .tabs .inner .desktop .tabs-body>div.active .tabs-left .tabs-buttons a, .tabs .inner .desktop .tabs-body>div.active .tabs-left .tabs-buttons>span { opacity: 1; } .tabs .inner .desktop .tabs-body>div.active .tabs-right .tabs-img { opacity: 1; } .tabs .inner .desktop .tabs-circles { width: 100%; text-align: center; margin-top: 20px; } .tabs .inner .desktop .tabs-circles .circle { cursor: pointer; width: 25px; height: 25px; position: relative; display: inline-block; } .tabs .inner .desktop .tabs-circles .circle:after { content: ""; position: absolute; height: 15px; width: 15px; border-radius: 20px; border: 2px solid #000; margin: 5px; left: 0; background-color: transparent; -webkit-transition: border 500ms, background-color 500ms; transition: border 500ms, background-color 500ms; } .tabs .inner .desktop .tabs-circles .circle.active:after { border: 2px solid #00aeef; background-color: #00aeef; } .tabs .inner .desktop .tabs-circles .circle:hover:after { border: 2px solid #00aeef; } .tabs .inner .mobile { display: none; } @media screen and (max-width: 480px) { .tabs .inner .mobile { float: left; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-flex-direciton: column; flex-direciton: column; } }.tabs .inner .mobile.display-as-mobile { float: left; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-flex-direciton: column; flex-direciton: column; } .tabs.dark-tabs { background-color: #333; } .tabs.dark-tabs *, .tabs.dark-tabs .typewriter { color: white !important; } .tabs.dark-tabs .heading-underline { background-color: white !important; } .tabs.dark-tabs .circle:after { border: 2px solid white !important; } .tabs.dark-tabs .circle.active:after { border: 2px solid #00aeef !important; } .tabs.dark-tabs .mobile .content-wrap { background: rgba(0, 0, 0, 0.5) !important; } .accordian-heading { width: 100%; cursor: pointer; } .accordian-heading h3 { font-size: 20px; } .accordian-body { background: #ccc; color: #000; border-radius: 2px; overflow: hidden; margin-top: -10px; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition: height 500ms, -webkit-transform 500ms; transition: height 500ms, -webkit-transform 500ms; transition: height 500ms, transform 500ms; transition: height 500ms, transform 500ms, -webkit-transform 500ms; border-top: 5px solid black; } .accordian-body.shrunk { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); height: 0px !important; } .accordian-body .content-wrap { padding: 20px; } .accordian-body .text-flow p { display: block; font-weight: 300; } .accordian-body .text-flow p strong { font-weight: 800; } .accordian-body .text-flow p:first-of-type, .accordian-body .text-flow img { display: inline; } .accordian-body .text-flow img { width: 35%; margin-right: 20px; margin-bottom: 20px; } .accordian-body .text-flow img:nth-of-type(1) { float: left; } .accordian-body .buttons { display: block; } .accordian-body .buttons a, .accordian-body .buttons span, .accordian-body .buttons button { margin-top: 20px; } .boxes { background-color: #eee; height: auto; overflow: hidden; } .boxes .inner { background-color: #fff; height: 400px; position: relative; } .boxes .inner .boxes-title { background-color: rgba(0, 0, 0, 0.5); height: 50px; position: absolute; z-index: 10; width: 100%} .boxes .inner .boxes-title .title { float: left; color: #fff; margin-left: 40px; font-size: 21px; line-height: 50px; font-weight: 800; } @media screen and (max-width: 480px) { .boxes .inner .boxes-title .title { margin-left: 20px; } }.boxes .inner .boxes-title .title.display-as-mobile { margin-left: 20px; } .boxes .inner .boxes-title a { float: right; color: #fff; line-height: 50px; margin-right: 40px; } .boxes .inner .box-wrap { width: 100%; height: 400px; top: 0; left: 0; -webkit-transition: none; transition: none; } .boxes .inner .box-wrap .box { width: 50%; height: 100%; display: inline-block; background-color: white; background-size: cover; background-position: center; float: left; z-index: 1; position: relative; transition: background-size 500ms; -webkit-transition: background-size 500ms; -moz-transition: background-size 500ms; overflow: hidden; } @media screen and (max-width: 480px) { .boxes .inner .box-wrap .box { width: 100%; display: none; } .boxes .inner .box-wrap .box:nth-of-type(1) { display: block; } }.boxes .inner .box-wrap .box.display-as-mobile { width: 100%; display: none; } .boxes .inner .box-wrap .box.display-as-mobile:nth-of-type(1) { display: block; } .boxes .inner .box-wrap .box:after { content: ""; display: block; background-color: #000; width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0.3; z-index: -1; transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; } .boxes .inner .box-wrap .box .box-inner { padding: 40px; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; flex-wrap: nowrap; height: 100%; max-width: 400px; padding-top: 60px; } @media screen and (max-width: 480px) { .boxes .inner .box-wrap .box .box-inner { padding: 40px 20px; padding-top: 60px; } }.boxes .inner .box-wrap .box .box-inner.display-as-mobile { padding: 40px 20px; padding-top: 60px; } .boxes .inner .box-wrap .box .box-inner .box-heading { -webkit-box-flex: 2; flex: 2; width: 100%; max-width: 400px; } .boxes .inner .box-wrap .box .box-inner .box-heading a { display: block; } .boxes .inner .box-wrap .box .box-inner .box-heading h4 { color: #fff; font-size: 28px; display: inline-block; display: inline-block; transition: width 300ms; -webkit-transition: width 300ms; -moz-transition: width 300ms; } .boxes .inner .box-wrap .box .box-inner .box-heading h4:after { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; border-radius: 2px; } .boxes .inner .box-wrap .box .box-inner .box-heading .box-tag { transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; color: #fff; padding-bottom: 0px; line-height: 0.8em; font-size: 14px; font-weight: 100; } @media screen and (max-width: 480px) { .boxes .inner .box-wrap .box .box-inner .box-heading .box-tag { font-weight: 400; } }.boxes .inner .box-wrap .box .box-inner .box-heading .box-tag.display-as-mobile { font-weight: 400; } .boxes .inner .box-wrap .box .box-inner .box-heading .box-cat { text-transform: uppercase; color: #fff; font-size: 14px; font-weight: 300; } .boxes .inner .box-wrap .box .box-inner .box-heading .box-cat span:after { content: ' | '} .boxes .inner .box-wrap .box .box-inner .box-heading .box-cat span:last-child:after { content: ''} .boxes .inner .box-wrap .box .box-inner .box-copy { -webkit-box-flex: 2; flex: 2; opacity: 0; transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; width: 100%; max-width: 380px; color: #fff; max-height: 210px; text-align: left; font-weight: 400; } @media screen and (max-width: 768px) { .boxes .inner .box-wrap .box .box-inner .box-copy { display: none; } }.boxes .inner .box-wrap .box .box-inner .box-copy.display-as-mobile { display: none; } .boxes .inner .box-wrap .box .box-inner .box-copy p { display: none; } .boxes .inner .box-wrap .box .box-inner .box-copy p:nth-of-type(1), .boxes .inner .box-wrap .box .box-inner .box-copy p:nth-of-type(2) { display: block; } .boxes .inner .box-wrap .box .box-inner .box-button { -webkit-box-flex: 1; flex: 1; opacity: 0; transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; width: 100%; align-self: flex-end; } .boxes .inner .box-wrap .box .box-inner .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .boxes .inner .box-wrap .box .box-inner .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .boxes .inner .box-wrap .box .box-inner .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .boxes .inner .box-wrap .box .box-inner .box-button a:hover .label { color: #fff; } .boxes .inner .box-wrap .box .box-inner .box-button a:hover:after { height: 100%} @media screen and (max-width: 480px) { .boxes .inner .box-wrap .box .box-inner .box-button { margin-top: 80px; } }.boxes .inner .box-wrap .box .box-inner .box-button.display-as-mobile { margin-top: 80px; } @media (min-width: 770px) { .boxes .inner .box-wrap .box: hover { background-size: cover; } .boxes .inner .box-wrap .box:hover .box-button, .boxes .inner .box-wrap .box:hover .box-copy, .boxes .inner .box-wrap .box:hover .box-heading .box-tag { opacity: 1; } .boxes .inner .box-wrap .box:hover:after { opacity: 0.8; } }.boxes .inner .box-wrap .box.show-hover { background-size: cover; } .boxes .inner .box-wrap .box.show-hover .box-button, .boxes .inner .box-wrap .box.show-hover .box-copy, .boxes .inner .box-wrap .box.show-hover .box-heading .box-tag { opacity: 1; } .boxes .inner .box-wrap .box.show-hover:after { opacity: 0.8; } .boxes .inner .box-end { z-index: 1000; height: 100%; cursor: pointer; display: -webkit-box; display: flex; flex-wrap: wrap; transition: padding 500ms; -moz-transition: padding 500ms; -webkit-transition: padding 500ms; margin: 10px 40px; } @media screen and (max-width: 480px) { .boxes .inner .box-end { width: 100%; top: 400px; height: 60px; display: none; } }.boxes .inner .box-end.display-as-mobile { width: 100%; top: 400px; height: 60px; display: none; } .boxes .inner .box-end .moving-squiggle { width: 30px; height: 30px; overflow: hidden; transform: scale(0.7) rotate(-90deg); -webkit-transform: scale(0.7) rotate(-90deg); -moz-transform: scale(0.7) rotate(-90deg); transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; opacity: 0.5; } .boxes .inner .box-end .moving-squiggle div { margin-left: -120px; width: 150px; height: 30px; transform: translateX(0px) translate3d(0, 0, 0); -webkit-transform: translateX(0px) translate3d(0, 0, 0); -moz-transform: translateX(0px) translate3d(0, 0, 0); display: inline-block; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -moz-transition: transform 1s; -webkit-transition: transform 1s; } .boxes .inner .box-end .moving-squiggle div:after { content: ""; display: block; width: 100%; height: 30px; background: -webkit-linear-gradient(315deg, #000 35%, transparent 25%) -15px 0, -webkit-linear-gradient(225deg, #000 35%, transparent 25%) -15px 0, -webkit-linear-gradient(135deg, #000 35%, transparent 25%), -webkit-linear-gradient(45deg, #000 35%, transparent 25%); background: linear-gradient(135deg, #000 35%, transparent 25%) -15px 0, linear-gradient(225deg, #000 35%, transparent 25%) -15px 0, linear-gradient(315deg, #000 35%, transparent 25%), linear-gradient(45deg, #000 35%, transparent 25%); background-size: 30px 30px; background-color: #fff; } .boxes .inner .box-end:hover .moving-squiggle div { transform: translateX(90px) translate3d(0, 0, 0); -webkit-transform: translateX(90px) translate3d(0, 0, 0); -moz-transform: translateX(90px) translate3d(0, 0, 0); } .work-boxes .box-heading h4 { font-size: 36px !important; } .work-boxes .box-copy { font-size: 20px !important; } .outro-links { height: 400px; padding: 0px 10px; } .outro-links:after { content: ""; display: block; position: relative; height: 75%; width: 110%; margin-left: -10px; background-color: #eee; top: -100%; z-index: -1; } @media screen and (max-width: 480px) { .outro-links { height: auto; min-height: 250px; } .outro-links:after { height: 250px; margin-bottom: -200px; } }.outro-links.display-as-mobile { height: auto; min-height: 250px; } .outro-links.display-as-mobile:after { height: 250px; margin-bottom: -200px; } .outro-links .box-wrap { width: 100%; max-width: 68em; height: 100%; margin: auto; } .outro-links .box-wrap>div { height: 100%; display: inline-block; float: left; background-size: cover; background-position: center; z-index: 1; position: relative; transition: background-size 500ms; -webkit-transition: background-size 500ms; -moz-transition: background-size 500ms; padding: 40px; display: -webkit-box; display: flex; flex-wrap: wrap; flex-wrap: wrap; background-color: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .outro-links .box-wrap>div:after { content: ""; display: block; background-color: #000; width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0.2; z-index: -1; transition: opacity 500ms, background-color 500ms; -webkit-transition: opacity 500ms, background-color 500ms; -moz-transition: opacity 500ms, background-color 500ms; } .outro-links .box-wrap>div.left { width: 34%} @media screen and (max-width: 480px) { .outro-links .box-wrap>div.left { display: none; } }.outro-links .box-wrap>div.left.display-as-mobile { display: none; } .outro-links .box-wrap>div.right { width: 66%} .outro-links .box-wrap>div.right .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .outro-links .box-wrap>div.right .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .outro-links .box-wrap>div.right .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .outro-links .box-wrap>div.right .box-button a:hover .label { color: #fff; } .outro-links .box-wrap>div.right .box-button a:hover:after { height: 100%} @media screen and (max-width: 480px) { .outro-links .box-wrap>div.right, .outro-links .box-wrap>div.full { width: 100%; height: 100%; min-height: 300px; display: block; background-size: cover; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } }.outro-links .box-wrap>div.right.display-as-mobile, .outro-links .box-wrap>div.full.display-as-mobile { width: 100%; height: 100%; min-height: 300px; display: block; background-size: cover; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .outro-links .box-wrap>div.left .box-button a, .outro-links .box-wrap>div.full .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .outro-links .box-wrap>div.left .box-button a>.label, .outro-links .box-wrap>div.full .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .outro-links .box-wrap>div.left .box-button a:after, .outro-links .box-wrap>div.full .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .outro-links .box-wrap>div.left .box-button a:hover .label, .outro-links .box-wrap>div.full .box-button a:hover .label { color: #00aeef; } .outro-links .box-wrap>div.left .box-button a:hover:after, .outro-links .box-wrap>div.full .box-button a:hover:after { height: 100%} .outro-links .box-wrap>div.left.magenta .box-button a, .outro-links .box-wrap>div.full.magenta .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .outro-links .box-wrap>div.left.magenta .box-button a>.label, .outro-links .box-wrap>div.full.magenta .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .outro-links .box-wrap>div.left.magenta .box-button a:after, .outro-links .box-wrap>div.full.magenta .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .outro-links .box-wrap>div.left.magenta .box-button a:hover .label, .outro-links .box-wrap>div.full.magenta .box-button a:hover .label { color: #e8168c; } .outro-links .box-wrap>div.left.magenta .box-button a:hover:after, .outro-links .box-wrap>div.full.magenta .box-button a:hover:after { height: 100%} .outro-links .box-wrap>div.left.yellow .box-button a, .outro-links .box-wrap>div.full.yellow .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .outro-links .box-wrap>div.left.yellow .box-button a>.label, .outro-links .box-wrap>div.full.yellow .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .outro-links .box-wrap>div.left.yellow .box-button a:after, .outro-links .box-wrap>div.full.yellow .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .outro-links .box-wrap>div.left.yellow .box-button a:hover .label, .outro-links .box-wrap>div.full.yellow .box-button a:hover .label { color: #fff200; } .outro-links .box-wrap>div.left.yellow .box-button a:hover:after, .outro-links .box-wrap>div.full.yellow .box-button a:hover:after { height: 100%} .outro-links .box-wrap>div .box-heading { margin: auto; width: 100%} .outro-links .box-wrap>div .box-heading span { color: #fff; font-size: 36px; display: inline-block; font-weight: 800; font-family: "bree", "Source Sans Pro", sans-serif; display: inline-block; transition: width 300ms; -webkit-transition: width 300ms; -moz-transition: width 300ms; } .outro-links .box-wrap>div .box-heading span:after { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; border-radius: 2px; } .outro-links .box-wrap>div .box-copy { opacity: 0; font-size: 20px; transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; width: 90%; color: #fff; } .outro-links .box-wrap>div .box-button { opacity: 0; transition: opacity 500ms; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; width: 100%; align-self: flex-end; margin-top: 30px; } .outro-links .box-wrap>div .box-button .footer-subscribe #footer_subscribe_email { background-color: transparent; color: #fff; } .outro-links .box-wrap>div .box-button .footer-subscribe #footer_subscribe_email::-webkit-input-placeholder { color: #fff; } .outro-links .box-wrap>div .box-button .footer-subscribe #footer_subscribe_email:-moz-placeholder { color: #fff; } .outro-links .box-wrap>div .box-button .footer-subscribe #footer_subscribe_submit { font-size: 12px; } .outro-links .box-wrap>div .box-button .footer-subscribe.show-submit #footer_subscribe_email::-webkit-input-placeholder { opacity: 0; } .outro-links .box-wrap>div .box-button .footer-subscribe.show-submit #footer_subscribe_email:-moz-placeholder { opacity: 0; } .outro-links .box-wrap>div.full { text-align: center; width: 100%} .outro-links .box-wrap>div.full .box-heading { margin-top: 100px; } @media screen and (max-width: 480px) { .outro-links .box-wrap>div.full .box-heading { margin-top: auto; } }.outro-links .box-wrap>div.full .box-heading.display-as-mobile { margin-top: auto; } .outro-links .box-wrap>div.full .box-copy { width: 80%; text-align: left; margin: auto; } @media (min-width: 770px) { .outro-links .box-wrap>div: hover { background-size: cover; } .outro-links .box-wrap>div:hover .box-button, .outro-links .box-wrap>div:hover .box-copy { opacity: 1; } .outro-links .box-wrap>div:hover.left.magenta:after, .outro-links .box-wrap>div:hover.full.magenta:after { background-color: #e8168c; } .outro-links .box-wrap>div:hover.left.cyan:after, .outro-links .box-wrap>div:hover.full.cyan:after { background-color: #00aeef; } .outro-links .box-wrap>div:hover.left.yellow:after, .outro-links .box-wrap>div:hover.full.yellow:after { background-color: #fff200; } .outro-links .box-wrap>div:hover:after { opacity: 1; } }.outro-links .box-wrap>div.show-hover { background-size: cover; } .outro-links .box-wrap>div.show-hover .box-button, .outro-links .box-wrap>div.show-hover .box-copy { opacity: 1; } .outro-links .box-wrap>div.show-hover.left.magenta:after, .outro-links .box-wrap>div.show-hover.full.magenta:after { background-color: #e8168c; } .outro-links .box-wrap>div.show-hover.left.cyan:after, .outro-links .box-wrap>div.show-hover.full.cyan:after { background-color: #00aeef; } .outro-links .box-wrap>div.show-hover.left.yellow:after, .outro-links .box-wrap>div.show-hover.full.yellow:after { background-color: #fff200; } .outro-links .box-wrap>div.show-hover:after { opacity: 1; } .darkback .outro-links:after { background-color: #666; } .hatchback .outro-links:after { background-color: #eee; background-size: 50%; background-repeat: repeat; } .mood-filter { height: 600px; width: 100%; background-color: #fff; z-index: -1; padding: 30px; } @media screen and (max-width: 480px) { .mood-filter { height: 400px; padding: 20px; } }.mood-filter.display-as-mobile { height: 400px; padding: 20px; } .mood-filter .inner { height: 400px; padding-bottom: 40px; max-width: 68em; margin: auto; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: end; align-items: flex-end; } @media screen and (max-width: 480px) { .mood-filter .inner { padding-bottom: 0px; padding-top: 130px; display: block; } }.mood-filter .inner.display-as-mobile { padding-bottom: 0px; padding-top: 130px; display: block; } .mood-filter .inner .heading { width: 50%} @media screen and (max-width: 480px) { .mood-filter .inner .heading { float: left; } .mood-filter .inner .heading .strong { margin-top: 0; } }.mood-filter .inner .heading.display-as-mobile { float: left; } .mood-filter .inner .heading.display-as-mobile .strong { margin-top: 0; } .mood-filter .inner .heading .strong { color: black !important; margin-bottom: 5px; } .mood-filter .inner .filter-options { width: 50%; text-align: right; } @media screen and (max-width: 480px) { .mood-filter .inner .filter-options { width: auto; text-align: left; float: right; } }.mood-filter .inner .filter-options.display-as-mobile { width: auto; text-align: left; float: right; } @-webkit-keyframes shake { 0% { -webkit-transform: skew(0deg); transform: skew(0deg); } 30% { -webkit-transform: skew(10deg); transform: skew(10deg); } 40% { -webkit-transform: skew(-7deg); transform: skew(-7deg); } 50% { -webkit-transform: skew(4deg); transform: skew(4deg); } 60% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 70% { -webkit-transform: skew(1deg); transform: skew(1deg); } 80% { -webkit-transform: skew(-1deg); transform: skew(-1deg); } 90% { -webkit-transform: skew(0.5deg); transform: skew(0.5deg); } 100% { -webkit-transform: skew(0deg); transform: skew(0deg); } }@keyframes shake { 0% { -webkit-transform: skew(0deg); transform: skew(0deg); } 30% { -webkit-transform: skew(10deg); transform: skew(10deg); } 40% { -webkit-transform: skew(-7deg); transform: skew(-7deg); } 50% { -webkit-transform: skew(4deg); transform: skew(4deg); } 60% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 70% { -webkit-transform: skew(1deg); transform: skew(1deg); } 80% { -webkit-transform: skew(-1deg); transform: skew(-1deg); } 90% { -webkit-transform: skew(0.5deg); transform: skew(0.5deg); } 100% { -webkit-transform: skew(0deg); transform: skew(0deg); } }@-webkit-keyframes little-shake { 0% { -webkit-transform: skew(0deg); transform: skew(0deg); } 30% { -webkit-transform: skew(5deg); transform: skew(5deg); } 60% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0deg); transform: skew(0deg); } }@keyframes little-shake { 0% { -webkit-transform: skew(0deg); transform: skew(0deg); } 30% { -webkit-transform: skew(5deg); transform: skew(5deg); } 60% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0deg); transform: skew(0deg); } }@-webkit-keyframes sandwich { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 45% { -webkit-transform: scaleY(0.001); transform: scaleY(0.001); } 55% { -webkit-transform: scaleY(0.001); transform: scaleY(0.001); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } }@keyframes sandwich { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 45% { -webkit-transform: scaleY(0.001); transform: scaleY(0.001); } 55% { -webkit-transform: scaleY(0.001); transform: scaleY(0.001); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } }@-webkit-keyframes webkitsandwich { 0% { -webkit-transform: scaleY(1); } 45% { -webkit-transform: scaleY(0.001); } 55% { -webkit-transform: scaleY(0.001); } 100% { -webkit-transform: scaleY(1); } }.mood-board { width: 100%; background-color: #eee; padding: 0px; overflow: visible; opacity: 1; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .mood-board.shake-it-off .inner { -webkit-animation-name: webkitsandwich; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 1s; -webkit-animation: sandwich 1s infinite; animation: sandwich 1s infinite; } .mood-board .inner { display: -webkit-box; display: flex; flex-wrap: wrap; flex-wrap: wrap; max-width: 68em; overflow-x: hidden; margin: auto; position: relative; top: -200px; margin-bottom: -150px; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } @media screen and (max-width: 480px) { .mood-board .inner { padding: 10px; box-shadow: none !important; } }.mood-board .inner.display-as-mobile { padding: 10px; box-shadow: none !important; } .mood-board .inner .mood-piece { height: 400px; background-size: cover; background-position: center; z-index: 1; position: relative; max-width: 100%; overflow-x: hidden; overflow-y: hidden; } .mood-board .inner .mood-piece:nth-child(even) { -webkit-box-flex: 1; flex: 1 1 25%; -webkit-flex: 1 1 33%} .mood-board .inner .mood-piece:nth-child(odd) { -webkit-box-flex: 1; flex: 1 1 33%; -webkit-flex: 1 1 33%} .mood-board .inner .mood-piece:nth-child(1) { -webkit-box-flex: 1; flex: 1 1 100%; -webkit-flex: 1 1 100%} .mood-board .inner .mood-piece:nth-child(2) { -webkit-box-flex: 1; flex: 1 1 33%; -webkit-flex: 1 1 33%} .mood-board .inner .mood-piece:nth-child(3) { -webkit-box-flex: 1; flex: 1 1 66%; -webkit-flex: 1 1 66%} .mood-board .inner .mood-piece:nth-child(4) { -webkit-box-flex: 1; flex: 1 1 50%; -webkit-flex: 1 1 50%} .mood-board .inner .mood-piece:nth-child(5) { -webkit-box-flex: 1; flex: 1 1 50%; -webkit-flex: 1 1 50%} .mood-board .inner .mood-piece:nth-child(6) { -webkit-box-flex: 1; flex: 1 1 50%; -webkit-flex: 1 1 50%} @media screen and (max-width: 480px) { .mood-board .inner .mood-piece { height: auto !important; min-height: 300px; -webkit-box-flex: 1 !important; flex: 1 1 100% !important; margin-bottom: 20px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } }.mood-board .inner .mood-piece.display-as-mobile { height: auto !important; min-height: 300px; -webkit-box-flex: 1 !important; flex: 1 1 100% !important; margin-bottom: 20px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .mood-board .inner .mood-piece:after { content: ""; display: block; background-color: #000; width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0.3; z-index: -1; -webkit-transition: opacity 1000ms; transition: opacity 1000ms; } .mood-board .inner .mood-piece .mood-content { width: 100%; height: 100%; padding: 40px; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; flex-wrap: nowrap; z-index: 9999; -webkit-transition: opacity 1000ms; transition: opacity 1000ms; text-align: left; } .mood-board .inner .mood-piece .mood-content .mood-cat { text-transform: uppercase; color: #fff; font-size: 14px; font-weight: 300; display: inline-block; } .mood-board .inner .mood-piece .mood-content .mood-cat span:after { content: ' | '} .mood-board .inner .mood-piece .mood-content .mood-cat span:last-child:after { content: ''} .mood-board .inner .mood-piece .mood-content .box-tag { color: #fff; padding-bottom: 0px; line-height: 0.8em; font-size: 14px; font-weight: 300; } @media screen and (max-width: 480px) { .mood-board .inner .mood-piece .mood-content .box-tag { font-weight: 400; } }.mood-board .inner .mood-piece .mood-content .box-tag.display-as-mobile { font-weight: 400; } .mood-board .inner .mood-piece .mood-content .box-tag:before { content: ' | '} .mood-board .inner .mood-piece .mood-content .mood-heading { width: 100%} .mood-board .inner .mood-piece .mood-content .mood-heading a { display: block; } .mood-board .inner .mood-piece .mood-content .mood-heading h2 { color: #fff; font-size: 28px; display: inline-block; display: inline-block; } .mood-board .inner .mood-piece .mood-content .mood-heading h2:after { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; border-radius: 2px; } .mood-board .inner .mood-piece .mood-content .mood-heading .mood-tag { opacity: 0; -webkit-transition: opacity 500ms; transition: opacity 500ms; color: #fff; font-size: 20px; padding-bottom: 0px; line-height: 0.8em; } .mood-board .inner .mood-piece .mood-content .mood-blurb { max-width: 380px; -webkit-transition: opacity 500ms; transition: opacity 500ms; opacity: 0; color: #fff; font-size: 16px; overflow: scroll; } @media screen and (max-width: 768px) { .mood-board .inner .mood-piece .mood-content .mood-blurb { max-height: 200px; } }.mood-board .inner .mood-piece .mood-content .mood-blurb.display-as-mobile { max-height: 200px; } @media screen and (max-width: 480px) { .mood-board .inner .mood-piece .mood-content .mood-blurb { max-height: none; } }.mood-board .inner .mood-piece .mood-content .mood-blurb.display-as-mobile { max-height: none; } .mood-board .inner .mood-piece .mood-content .mood-button { width: 100%; align-self: flex-end; -webkit-transition: opacity 500ms; transition: opacity 500ms; opacity: 0; } .mood-board .inner .mood-piece .mood-content .mood-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .mood-board .inner .mood-piece .mood-content .mood-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .mood-board .inner .mood-piece .mood-content .mood-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .mood-board .inner .mood-piece .mood-content .mood-button a:hover .label { color: #00aeef; } .mood-board .inner .mood-piece .mood-content .mood-button a:hover:after { height: 100%} @media screen and (max-width: 480px) { .mood-board .inner .mood-piece .mood-content .mood-button { opacity: 1 !important; } }.mood-board .inner .mood-piece .mood-content .mood-button.display-as-mobile { opacity: 1 !important; } @media (min-width: 770px) { .mood-board .inner .mood-piece: hover { background-size: cover; } .mood-board .inner .mood-piece:hover:after { opacity: 0.8; } .mood-board .inner .mood-piece:hover.cyan:after { background-color: #00aeef; opacity: 0.8; } .mood-board .inner .mood-piece:hover.magenta:after { background-color: #e8168c; opacity: 0.8; } .mood-board .inner .mood-piece:hover.yellow:after { background-color: #fff200; opacity: 0.8; } .mood-board .inner .mood-piece:hover .mood-button, .mood-board .inner .mood-piece:hover .mood-heading .mood-tag, .mood-board .inner .mood-piece:hover .mood-blurb { opacity: 1; } }.mood-board .inner .mood-piece.show-hover:after { opacity: 0.8; } .mood-board .inner .mood-piece.show-hover.cyan:after { background-color: #00aeef; opacity: 0.8; } .mood-board .inner .mood-piece.show-hover.magenta:after { background-color: #e8168c; opacity: 0.8; } .mood-board .inner .mood-piece.show-hover.yellow:after { background-color: #fff200; opacity: 0.8; } .mood-board .inner .mood-piece.show-hover .mood-button, .mood-board .inner .mood-piece.show-hover .mood-heading .mood-tag, .mood-board .inner .mood-piece.show-hover .mood-blurb { opacity: 1; } .mood-board .inner .mood-piece.show-hover .mood-button .show-hover-btn .label { color: #00aeef; } .mood-board .inner .mood-piece.show-hover .mood-button .show-hover-btn:after { height: 100%} .mood-board .inner .mood-piece.extra { display: none; } .mood-board .inner .mood-piece.slide { max-width: 0px; background-size: cover; } .mood-board .inner .mood-piece.slide .mood-content { opacity: 0; } @media screen and (max-width: 480px) { .mood-board .inner .mood-piece.slide { max-width: 100%; margin-bottom: -100%} }.mood-board .inner .mood-piece.slide.display-as-mobile { max-width: 100%; margin-bottom: -100%} .mood-board .inner .mood-piece.hide { display: none; } .mood-board.filter-applied .inner .mood-piece.extra { display: inline-block; -webkit-box-flex: 1; flex: 1 1 33%} .mood-board.filter-applied .inner .mood-piece.extra.hide { display: none; } @media screen and (max-width: 768px) { .blog-board .inner .mood-piece .mood-blurb, .social-board .inner .mood-piece .mood-blurb { display: none; } }.blog-board .inner .mood-piece .mood-blurb.display-as-mobile, .social-board .inner .mood-piece .mood-blurb.display-as-mobile { display: none; } .blog-board .inner .mood-piece:after, .social-board .inner .mood-piece:after { opacity: 0.2; } .social-board .inner { max-width: 100%} .social-board .inner .mood-piece { -webkit-box-flex: 1 !important; flex: 1 1 33% !important; } .social-board .inner .mood-piece .mood-content .mood-blurb { max-width: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; align-content: center; } .social-board .inner .mood-piece .mood-content .mood-blurb p { font-size: 20px; margin: auto; max-width: 400px; } .social-board.display-as-mobile .inner .mood-piece { -webkit-box-flex: 1 !important; flex: 1 1 100% !important; height: 250px; } .work-board .mood-heading h2 { font-size: 36px !important; } .work-board .mood-blurb { font-size: 20px !important; } .quote { background-color: #eee; height: auto; min-height: 50vh; display: -webkit-box; display: flex; flex-wrap: wrap; padding: 30px; } .quote .inner { max-width: 68em; margin: auto; overflow: hidden; position: relative; } @media screen and (max-width: 480px) { .quote .inner { padding: 30px 10px; } }.quote .inner.display-as-mobile { padding: 30px 10px; } .quote .inner .quote-heading { margin-bottom: 80px; width: 100%; font-size: 22px; position: relative; padding-top: 0px; } @media screen and (max-width: 480px) { .quote .inner .quote-heading { font-size: 12px; } }.quote .inner .quote-heading.display-as-mobile { font-size: 12px; } .quote .inner .quote-heading>h4 { display: inline-block; margin-bottom: 0px; font-weight: 300; } @media screen and (max-width: 480px) { .quote .inner .quote-heading>h4 { font-weight: 400; } }.quote .inner .quote-heading>h4.display-as-mobile { font-weight: 400; } .quote .inner .quote-body { display: block; position: relative; } .quote .inner .quote-body>div { display: -webkit-box; display: flex; flex-wrap: wrap; position: relative; width: 100%; min-height: 200px; height: auto; } @media screen and (max-width: 480px) { .quote .inner .quote-body>div { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } }.quote .inner .quote-body>div.display-as-mobile { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } .quote .inner .quote-body>div>p { width: 100%; margin: auto; margin-bottom: 30px; line-height: 2em; font-weight: 400; font-size: 22px; position: relative; } @media screen and (max-width: 480px) { .quote .inner .quote-body>div>p { font-size: 18px; margin-bottom: 10px; } }.quote .inner .quote-body>div>p.display-as-mobile { font-size: 18px; margin-bottom: 10px; } .quote .inner .quote-body>div>p:before, .quote .inner .quote-body>div>p:after { color: #00aeef; font-size: 3em; line-height: 0.25em; font-family: "bree", "Source Sans Pro", sans-serif; position: relative; top: 0.4em; margin: 10px; } .quote .inner .quote-body>div>p:before { content: '“'} .quote .inner .quote-body>div>p:after { content: '”'} .wrapper--footer { position: fixed; width: 100%; height: auto; bottom: 0; left: auto !important; z-index: 0; } @media screen and (max-width: 768px) { .wrapper--footer { position: initial; -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; padding: 20px; } }.wrapper--footer.display-as-mobile { position: initial; -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; padding: 20px; } footer .inner { margin: auto; max-width: 68em; padding-top: 20px; } @media screen and (max-width: 768px) { footer .inner { padding: 20px 30px; } }footer .inner.display-as-mobile { padding: 20px 30px; } @media screen and (max-width: 480px) { footer .inner { padding: 20px 0; } }footer .inner.display-as-mobile { padding: 20px 0; } footer .inner .footer-up { margin-bottom: 0; } footer .inner .footer-up .line { color: #fff; } @media screen and (max-width: 480px) { footer .inner .footer-up .line { text-align: left; } }footer .inner .footer-up .line.display-as-mobile { text-align: left; } @media screen and (max-width: 480px) { footer .inner .footer-up { display: none; } }footer .inner .footer-up.display-as-mobile { display: none; } footer .inner>div { font-size: 17px; color: #555; text-align: center; width: 100%; margin-bottom: 50px; -webkit-box-pack: center; justify-content: center; } @media screen and (max-width: 768px) { footer .inner>div { flex-wrap: wrap; } }footer .inner>div.display-as-mobile { flex-wrap: wrap; } @media screen and (max-width: 480px) { footer .inner>div { font-size: 16px; margin-bottom: 0; } }footer .inner>div.display-as-mobile { font-size: 16px; margin-bottom: 0; } .footer-subscribe { -webkit-box-flex: 3; flex: 3 1 30%; padding: 20px 0; } @media screen and (max-width: 768px) { .footer-subscribe { -webkit-box-flex: 1; flex: 1 1 100%} }.footer-subscribe.display-as-mobile { -webkit-box-flex: 1; flex: 1 1 100%} .footer-subscribe .line { color: #fff; } .footer-subscribe>form>div { position: relative; width: 55%; margin: auto; text-align: center; } .footer-subscribe>form>div #footer_subscribe_email { text-align: center; color: #555; } .footer-subscribe>form>div #footer_subscribe_email::-webkit-input-placeholder { color: #555; } .footer-subscribe>form>div #footer_subscribe_email:-moz-placeholder { color: #555; } @media screen and (max-width: 480px) { .footer-subscribe>form>div #footer_subscribe_email { width: auto !important; } }.footer-subscribe>form>div #footer_subscribe_email.display-as-mobile { width: auto !important; } @media screen and (max-width: 480px) { .footer-subscribe>form>div { width: 100%; text-align: left; } }.footer-subscribe>form>div.display-as-mobile { width: 100%; text-align: left; } @media screen and (max-width: 480px) { .footer-subscribe .btn-subscribe { position: relative; left: 50%; margin-left: -75px; margin-top: 20px; } }.footer-subscribe .btn-subscribe.display-as-mobile { position: relative; left: 50%; margin-left: -75px; margin-top: 20px; } #footer-expand { padding: 20px 0; margin-top: 30px; } @media screen and (max-width: 768px) { #footer-expand { padding: 10px 0; } }#footer-expand.display-as-mobile { padding: 10px 0; } #footer-expand .first-row { display: -webkit-box; display: flex; margin: auto; width: 68em; color: #555; margin-bottom: 40px; } @media screen and (max-width: 768px) { #footer-expand .first-row { margin-left: 30px; width: 90%} }#footer-expand .first-row.display-as-mobile { margin-left: 30px; width: 90%} @media screen and (max-width: 480px) { #footer-expand .first-row { display: inline-block; margin-left: 0; } }#footer-expand .first-row.display-as-mobile { display: inline-block; margin-left: 0; } #footer-expand .first-row>div { width: 33%} #footer-expand .first-row .title { font-weight: 600; font-size: 21px; margin-bottom: 10px; } #footer-expand .first-row .contact-info { width: 30%; text-align: left; } #footer-expand .first-row .contact-info a { font-weight: normal; } @media screen and (max-width: 768px) { #footer-expand .first-row .contact-info { width: 50%} }#footer-expand .first-row .contact-info.display-as-mobile { width: 50%} @media screen and (max-width: 480px) { #footer-expand .first-row .contact-info { margin-bottom: 20px; } }#footer-expand .first-row .contact-info.display-as-mobile { margin-bottom: 20px; } #footer-expand .first-row .twitter-feed { width: 38%; margin: 0 1%} #footer-expand .first-row .twitter-feed blockquote { margin: 0 !important; } @media screen and (max-width: 768px) { #footer-expand .first-row .twitter-feed { display: none; } }#footer-expand .first-row .twitter-feed.display-as-mobile { display: none; } #footer-expand .first-row .social-media { width: 30%} @media screen and (max-width: 768px) { #footer-expand .first-row .social-media { width: 50%} }#footer-expand .first-row .social-media.display-as-mobile { width: 50%} @media screen and (max-width: 480px) { #footer-expand .first-row .social-media { display: none; } }#footer-expand .first-row .social-media.display-as-mobile { display: none; } #footer-expand .first-row .social-media-link { display: inline-block; line-height: 40px; font-weight: normal; text-align: left; margin: 0 5px; } #footer-expand .first-row .social-media-mobile { display: none; } @media screen and (max-width: 480px) { #footer-expand .first-row .social-media-mobile { display: block; } }#footer-expand .first-row .social-media-mobile.display-as-mobile { display: block; } #footer-expand .first-row .social-media-mobile .icon { font-size: 23px; } #footer-lower { padding: 1em 0; background: #000; width: 100%; padding: 0 0 0 1em; max-width: 68em; margin: auto; margin-bottom: 20px; text-align: center; } @media screen and (max-width: 480px) { #footer-lower { margin-bottom: 5px; padding: 0; } }#footer-lower.display-as-mobile { margin-bottom: 5px; padding: 0; } #footer-lower .footer-logo { display: inline-block; height: 30px; width: auto; opacity: 0.3; } #footer-lower .footer-lower--links { display: inline-block; } #footer-lower>span { display: inline-block; color: #555; margin: 0 auto; text-align: center; font-size: 12px; } #footer-lower>span a { color: #555; } .mw-dropdown { position: relative; display: inline-block; margin-right: 21px; } @media screen and (max-width: 480px) { .mw-dropdown { margin-right: 0px; } }.mw-dropdown.display-as-mobile { margin-right: 0px; } .mw-dropdown .top-display { cursor: pointer; height: 45px; line-height: 47px; width: 180px; position: relative; font-weight: 300; font-size: 18px; } @media screen and (max-width: 480px) { .mw-dropdown .top-display { width: 140px; } }.mw-dropdown .top-display.display-as-mobile { width: 140px; } .mw-dropdown .top-display .fixed-label { float: left; font-weight: 600; } @media screen and (max-width: 480px) { .mw-dropdown .top-display .fixed-label { display: none; } }.mw-dropdown .top-display .fixed-label.display-as-mobile { display: none; } .mw-dropdown .top-display .label { float: right; margin-right: 10px; } @media screen and (max-width: 480px) { .mw-dropdown .top-display .label { margin-right: 0; float: left; width: 140px; text-align: center; } }.mw-dropdown .top-display .label.display-as-mobile { margin-right: 0; float: left; width: 140px; text-align: center; } .mw-dropdown .top-display .moving-squiggle { position: absolute; right: 0; width: 30px; height: px; overflow: hidden; -webkit-transform: scale(0.6); -webkit-transform-origin: 250% 100%; transform: scale(0.6); transform-origin: 250% 100%} @media screen and (max-width: 480px) { .mw-dropdown .top-display .moving-squiggle { display: none; } }.mw-dropdown .top-display .moving-squiggle.display-as-mobile { display: none; } .mw-dropdown .top-display .moving-squiggle div { margin-left: -140px; width: 150px; height: 26px; -webkit-transform: translateX(0px); transform: translateX(0px); display: inline-block; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } .mw-dropdown .top-display .moving-squiggle div:after { content: ""; display: block; width: 100%; height: 30px; background: -webkit-linear-gradient(315deg, #fff 35%, transparent 25%) -15px 0, -webkit-linear-gradient(225deg, #fff 35%, transparent 25%) -15px 0, -webkit-linear-gradient(135deg, #fff 35%, transparent 25%), -webkit-linear-gradient(45deg, #fff 35%, transparent 25%); background: linear-gradient(135deg, #fff 35%, transparent 25%) -15px 0, linear-gradient(225deg, #fff 35%, transparent 25%) -15px 0, linear-gradient(315deg, #fff 35%, transparent 25%), linear-gradient(45deg, #fff 35%, transparent 25%); background-size: 30px 30px; background-color: #000; } .mw-dropdown .options { position: absolute; height: 5px; border-radius: 2px; overflow: hidden; background-color: #000; z-index: 9999; -webkit-transition: height 500ms; transition: height 500ms; } .mw-dropdown .options ul li { text-align: center; height: 45px; line-height: 47px; font-size: 18px; width: 200px; color: #fff; font-weight: 300; -webkit-transition: font-weight 500ms; transition: font-weight 500ms; } @media screen and (max-width: 480px) { .mw-dropdown .options ul li { font-weight: 400; width: 150px; font-size: 14px; } }.mw-dropdown .options ul li.display-as-mobile { font-weight: 400; width: 150px; font-size: 14px; } .mw-dropdown .options ul li:hover { cursor: pointer; font-weight: 900; } .mw-dropdown.expand .top-display .moving-squiggle div { -webkit-transform: translateX(75px); transform: translateX(75px); } .mw-dropdown.expand .options { height: 800%; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); } @-webkit-keyframes click { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }@keyframes click { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }[data-typeout] { position: relative; height: 98px; width: 100%; max-width: 68em; float: left; opacity: 0; visibility: hidden !important; } [data-typeout].typing, [data-typeout].finished { opacity: 1; visibility: visible !important; } [data-typeout].typing:after { content: "|"; display: inline-block; position: absolute; -webkit-animation: click 1s infinite; animation: click 1s infinite; } .logos { background-color: #fff; } .logos .inner { max-width: 68em; margin: auto; } .logos .inner .logos-wrap { text-align: center; } .logos .inner .logos-wrap img { height: auto; margin: 30px; height: 100px; } @media screen and (max-width: 480px) { .logos .inner .logos-wrap img { max-width: 85%; width: auto; max-height: 100px; height: auto; margin: 7px; } }.logos .inner .logos-wrap img.display-as-mobile { max-width: 85%; width: auto; max-height: 100px; height: auto; margin: 7px; } .image-strip { background-color: #fff; width: 100%; height: 400px; display: -webkit-box; display: flex; flex-wrap: wrap; padding: 0px !important; } @media screen and (max-width: 480px) { .image-strip { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } }.image-strip.display-as-mobile { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .image-strip .strip-image { -webkit-box-flex: 1; flex: 1; height: 100%; background-position: center; background-size: cover; } @media screen and (max-width: 480px) { .image-strip .strip-image { background-position: 75% 50%} }.image-strip .strip-image.display-as-mobile { background-position: 75% 50%} .twitter { padding: 10px !important; background-color: #eee; height: auto; position: relative; } .twitter .inner { max-width: 68em; margin: auto; } .twitter .inner .twitter-heading { overflow: hidden; } .twitter .inner .twitter-heading h4 { font-size: 28px; display: inline-block; display: inline-block; margin-bottom: 0; } .twitter .inner .twitter-heading h4:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .twitter .inner .tweets { padding: 40px 0px; } .twitter .inner .tweets .tweet blockquote { margin: 0; } .twitter .inner .tweets .tweet .timestamp { font-style: italic; font-weight: 300; text-align: right; } .side-boxes { width: 100%; text-align: center; background-color: #eee; padding-top: 100px; padding-bottom: 40px; overflow: hidden; } @media screen and (max-width: 768px) { .side-boxes { padding-top: 50px; padding-bottom: 50px; } }.side-boxes.display-as-mobile { padding-top: 50px; padding-bottom: 50px; } .side-boxes .inner { max-width: 68em; margin: auto; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } @media screen and (max-width: 768px) { .side-boxes .inner { padding: 10px; box-shadow: none !important; } }.side-boxes .inner.display-as-mobile { padding: 10px; box-shadow: none !important; } .side-boxes .inner .boxes-title { background-color: rgba(0, 0, 0, 0.5); height: 50px; position: absolute; z-index: 9999; width: 100%} .side-boxes .inner .boxes-title h3 { float: left; color: #fff; margin-left: 40px; } @media screen and (max-width: 480px) { .side-boxes .inner .boxes-title h3 { margin-left: 20px; } }.side-boxes .inner .boxes-title h3.display-as-mobile { margin-left: 20px; } .side-boxes .inner .boxes-title a { float: right; color: #fff; } .side-boxes .inner .boxes-title a span { margin-right: -20px; } .side-boxes .inner .side-box { position: relative; width: 100%; height: 300px; pointer-events: none; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box { margin-bottom: 20px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); background-color: #fff; height: auto; pointer-events: auto; } }.side-boxes .inner .side-box.display-as-mobile { margin-bottom: 20px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); background-color: #fff; height: auto; pointer-events: auto; } .side-boxes .inner .side-box .media { width: 50%; height: 100%; position: absolute; top: 0; z-index: 0; background-size: cover; background-position: center; overflow: hidden; pointer-events: auto; } .side-boxes .inner .side-box .media video { position: absolute; top: -10px; height: 320px; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .media video { display: none !important; } }.side-boxes .inner .side-box .media video.display-as-mobile { display: none !important; } .side-boxes .inner .side-box .text { max-width: 40%; height: 100%; padding: 20px 40px; text-align: left; position: absolute; z-index: 1; -webkit-transition: background-color 300ms, transform 300ms; -webkit-transition: background-color 300ms, -webkit-transform 300ms; transition: background-color 300ms, -webkit-transform 300ms; transition: background-color 300ms, transform 300ms; transition: background-color 300ms, transform 300ms, -webkit-transform 300ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; background-color: transparent; pointer-events: none; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .text { -webkit-transform: translateX(0%) !important; transform: translateX(0%) !important; } }.side-boxes .inner .side-box .text.display-as-mobile { -webkit-transform: translateX(0%) !important; transform: translateX(0%) !important; } .side-boxes .inner .side-box .text:after { content: ''; position: absolute; display: block; top: 0; width: 20%; height: 100%; -webkit-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition-delay: 100ms; transition-delay: 100ms; opacity: 0; pointer-events: none; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .text: after { pointer-events: auto; } }.side-boxes .inner .side-box .text:after.display-as-mobile { pointer-events: auto; } .side-boxes .inner .side-box .text * { -webkit-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .text * { opacity: 1 !important; } }.side-boxes .inner .side-box .text *.display-as-mobile { opacity: 1 !important; } .side-boxes .inner .side-box .text .heading { color: white; margin-bottom: 17px; font-size: 28px !important; display: inline-block; display: inline-block; } .side-boxes .inner .side-box .text .heading:after { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; border-radius: 2px; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .text .heading { margin: 10px 0; color: #000; display: inline-block; } .side-boxes .inner .side-box .text .heading:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } }.side-boxes .inner .side-box .text .heading.display-as-mobile { margin: 10px 0; color: #000; display: inline-block; } .side-boxes .inner .side-box .text .heading.display-as-mobile:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .side-boxes .inner .side-box .text p { color: white; font-size: 16px; line-height: 1.7em; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box .text p { color: #000; } }.side-boxes .inner .side-box .text p.display-as-mobile { color: #000; } .side-boxes .inner .side-box .text .link { margin: 7px 0; } .side-boxes .inner .side-box .text .link a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .side-boxes .inner .side-box .text .link a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .side-boxes .inner .side-box .text .link a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .side-boxes .inner .side-box .text .link a:hover .label { color: #fff; } .side-boxes .inner .side-box .text .link a:hover:after { height: 100%} @media screen and (max-width: 768px) { .side-boxes .inner .side-box .media, .side-boxes .inner .side-box .text, .side-boxes .inner .side-box .media video { display: block; position: relative; opacity: 1 !important; width: 100%; max-width: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; height: auto; } .side-boxes .inner .side-box .media { height: 400px; } .side-boxes .inner .side-box .media video { height: 400px; max-width: 200% !important; width: auto !important; } .side-boxes .inner .side-box text:after { display: none; } }.side-boxes .inner .side-box.display-as-mobile .media, .side-boxes .inner .side-box.display-as-mobile .text, .side-boxes .inner .side-box.display-as-mobile .media video { display: block; position: relative; opacity: 1 !important; width: 100%; max-width: 100% !important; left: 0 !important; right: 0 !important; top: 0 !important; height: auto; } .side-boxes .inner .side-box.display-as-mobile .media { height: 400px; } .side-boxes .inner .side-box.display-as-mobile .media video { height: 400px; max-width: 200% !important; width: auto !important; } .side-boxes .inner .side-box.display-as-mobile text:after { display: none; } @media screen and (max-width: 480px) { .side-boxes .inner .side-box .media { height: 200px; } .side-boxes .inner .side-box .media video { height: 200px; } }.side-boxes .inner .side-box.display-as-mobile .media { height: 200px; } .side-boxes .inner .side-box.display-as-mobile .media video { height: 200px; } .side-boxes .inner .side-box:nth-child(odd) .media { left: 0; } .side-boxes .inner .side-box:nth-child(odd) .media video { right: 0; } .side-boxes .inner .side-box:nth-child(odd) .text { right: 10%; -webkit-transform: translateX(-30%); transform: translateX(-30%); } .side-boxes .inner .side-box:nth-child(odd) .text:after { right: -20%; background: -webkit-linear-gradient(left, #000 0%, transparent 100%); background: linear-gradient(to right, #000 0%, transparent 100%); } .side-boxes .inner .side-box:nth-child(even) { margin-top: -300px; } .side-boxes .inner .side-box:nth-child(even) .media { right: 0; } .side-boxes .inner .side-box:nth-child(even) .media video { left: 0; } .side-boxes .inner .side-box:nth-child(even) .text { left: 10%; -webkit-transform: translateX(30%); transform: translateX(30%); } .side-boxes .inner .side-box:nth-child(even) .text:after { left: -20%; background: -webkit-linear-gradient(left, transparent 0%, #000 100%); background: linear-gradient(to right, transparent 0%, #000 100%); } @media screen and (max-width: 768px) { .side-boxes .inner .side-box: nth-child(even) { margin-top: 0; } }.side-boxes .inner .side-box:nth-child(even).display-as-mobile { margin-top: 0; } .side-boxes .inner .side-box:hover .text, .side-boxes .inner .side-box.show-hover .text { background-color: rgba(0, 0, 0, 0.8); -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition-delay: 0s; transition-delay: 0s; pointer-events: auto; } .side-boxes .inner .side-box:hover .text *, .side-boxes .inner .side-box.show-hover .text * { opacity: 1; -webkit-transition-delay: 100ms; transition-delay: 100ms; } .side-boxes .inner .side-box:hover .text:after, .side-boxes .inner .side-box.show-hover .text:after { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0.8; } @media screen and (max-width: 768px) { .side-boxes .inner .side-box: hover .text, .side-boxes .inner .side-box.show-hover .text { background-color: transparent; } .side-boxes .inner .side-box:hover .text:after, .side-boxes .inner .side-box.show-hover .text:after { opacity: 0; } }.side-boxes .inner .side-box:hover .text.display-as-mobile, .side-boxes .inner .side-box.show-hover .text.display-as-mobile { background-color: transparent; } .side-boxes .inner .side-box:hover .text.display-as-mobile:after, .side-boxes .inner .side-box.show-hover .text.display-as-mobile:after { opacity: 0; } .topbox { overflow: hidden; width: 32%; display: inline-block; vertical-align: top; float: left; margin-right: 2%; margin-bottom: 60px; } .topbox:nth-child(3n+1) { margin-right: 0; } .topbox:nth-child(3n+2) { clear: left; } .topbox__video-wrap { width: 100%; height: 200px; background-size: cover; background-position: center; } .topbox__video { min-width: 100%; width: auto; height: 0; min-height: 100%} @media screen and (max-width: 480px) { .topbox__video { display: none; } }.topbox__video.display-as-mobile { display: none; } .topbox__superheading { padding: 0; margin: 10px 0 0; text-transform: uppercase; } .topbox__heading { display: inline-block; margin-top: 0px; } .topbox__heading:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } .topbox p { font-size: 1em; } .topbox__link { border-radius: 2px; padding: 0; margin-bottom: 5px; display: inline-block; } .topbox__link span { color: #00aeef; font-weight: 100; font-size: 1.5em; } .topbox:last-child .topbox__link { display: none; } @media screen and (max-width: 480px) { .topbox { width: 100%; margin: 0 0 30px 0 !Important; } }.topbox.display-as-mobile { width: 100%; margin: 0 0 30px 0 !Important; } #startup-branding .intro { position: relative; z-index: 0; } #startup-branding #startup-canvasses { height: 100vh; width: 100vw; position: absolute; top: 0; left: 0; z-index: 0; background: rgba(0, 0, 0, 0.8); } #startup-branding #startup-canvasses:after { content: ''; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: black; opacity: 0.15; pointer-events: none; } #startup-branding #startup-canvasses #startup-canvas { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } #startup-branding .header { pointer-events: none; } #startup-branding .outro-links .box-heading { margin-top: 0px; } #startup-branding .outro-links .box-wrap>div.full .box-button a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; -webkit-transform: scale(1.5); transform: scale(1.5); } #startup-branding .outro-links .box-wrap>div.full .box-button a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #startup-branding .outro-links .box-wrap>div.full .box-button a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } #startup-branding .outro-links .box-wrap>div.full .box-button a:hover .label { color: #fff; } #startup-branding .outro-links .box-wrap>div.full .box-button a:hover:after { height: 5px; } #startup-branding .addon { padding: 50px 0px; } #startup-branding label, #startup-branding legend { font-size: 20px !important; } #startup-branding #cart { -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; border-top: 1px solid rgba(0, 0, 0, 0.3); position: fixed; width: 100vw; right: 0; top: 100vh; height: auto; background: white; padding: 30px; max-height: 60vh; overflow-y: scroll; } #startup-branding #cart.edited { -webkit-transform: translateY(-5vh); transform: translateY(-5vh); } #startup-branding #cart.edited:not(.updated):hover, #startup-branding #cart.updated { -webkit-transform: translateY(-100%); transform: translateY(-100%); } #startup-branding #cart.bottompage { position: static !important; -webkit-transform: none !important; transform: none !important; padding: 50px 100px !important; } #startup-branding #cart, #startup-branding #checkout { background: white; padding: 30px; } #startup-branding #options { padding: 0 !important; } #startup-branding #add { background: #00aeef; color: white !important; } #startup-branding .inner { max-width: 68em; margin: auto; padding: 15px; } #startup-branding .two-column { position: relative; z-index: 0; background: #eee; padding-bottom: 100px; } #startup-branding .two-column .inner { display: -webkit-box; display: flex; } #startup-branding .two-column .inner div { padding-right: 10%} #startup-branding .two-column .inner div h3 { font-size: 50px; } #startup-branding .two-column .inner div p { font-size: 20px; line-height: 1.8em; font-weight: 300; } @media screen and (max-width: 768px) { #startup-branding .two-column .inner { flex-wrap: wrap; } #startup-branding .two-column .inner div { width: 100%} #startup-branding .two-column .inner div h3 { font-size: 28px; } #startup-branding .two-column .inner div p { font-size: 16px; } }#startup-branding .two-column.display-as-mobile .inner { flex-wrap: wrap; } #startup-branding .two-column.display-as-mobile .inner div { width: 100%} #startup-branding .two-column.display-as-mobile .inner div h3 { font-size: 28px; } #startup-branding .two-column.display-as-mobile .inner div p { font-size: 16px; } #startup-branding .mission-strip+section { padding-top: 100px; } #startup-branding .mission-strip { background-size: cover; background-attachment: fixed; position: relative; } #startup-branding .mission-strip:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0.5; z-index: 1; } #startup-branding .mission-strip .inner { position: relative; z-index: 2; } #startup-branding .mission-strip .statement { font-size: 40px; font-weight: 800; color: #fff; } @media screen and (max-width: 768px) { #startup-branding .mission-strip .statement { font-size: 28px; } }#startup-branding .mission-strip.display-as-mobile .statement { font-size: 28px; } #startup-branding .texter { background-color: #eee; padding-top: 0; padding-bottom: 100px; } #startup-branding .texter .inner { margin: auto; max-width: 68em; } #startup-branding .texter .inner .strong { color: #555 !important; margin: 40px 0px 40px 0px; font-weight: bold; } #startup-branding .texter .inner p, #startup-branding .texter .inner li { width: 100%; padding-right: 50px; font-size: 20px; line-height: 1.8em; font-weight: 300; } #startup-branding .texter .inner p strong, #startup-branding .texter .inner li strong { display: inline-block; display: block; margin-bottom: 10px; font-weight: 300; font-size: 28px; font-family: "bree", "Source Sans Pro", sans-serif; font-weight: 800; margin-top: 40px; } #startup-branding .texter .inner p strong:after, #startup-branding .texter .inner li strong:after { content: ""; display: block; width: 100%; height: 5px; background-color: #000; border-radius: 2px; } #startup-branding .texter .inner p em, #startup-branding .texter .inner li em { margin-top: 15px; display: block; } #startup-branding .texter .inner ul { display: -webkit-box; display: flex; } @media screen and (max-width: 768px) { #startup-branding .texter .inner ul { display: block; } #startup-branding .texter .inner ul li { min-width: 100%; display: block; } }#startup-branding .texter .inner ul.display-as-mobile { display: block; } #startup-branding .texter .inner ul.display-as-mobile li { min-width: 100%; display: block; } #startup-branding .texter .inner ul li { -webkit-box-flex: 1; flex: 1; } #startup-branding #pricing-tables { background-color: #00aeef; } #startup-branding #pricing-tables .strong { color: #fff !important; margin: 40px 0px 40px 0px; font-size: 50px !important; height: 50px !important; margin-bottom: 15px; } #startup-branding #pricing-tables .section-intro { font-size: 24px; color: #fff; margin-bottom: 50px; } html.no-scrolling { overflow-x: hidden !important; overflow-y: hidden !important; } body.no-scrolling { overflow-x: hidden !important; overflow-y: hidden !important; position: relative !important; } @media screen and (max-width: 768px) { .is-scrolling-mobile { background-color: rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } }.is-scrolling-mobile.display-as-mobile { background-color: rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } .btn-hover { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; padding: 5px; margin: 0 5px; cursor: pointer; background: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); -webkit-transition: all 300ms; transition: all 300ms; -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); position: relative; z-index: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; text-align: center; min-height: 70px; } .btn-hover .label { font-size: 24px; line-height: 50px; font-weight: 300; font-family: "bree-serif", "Source Sans Pro", sans-serif; text-align: center; margin: auto; cursor: pointer; color: black; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-hover:hover { background: rgba(255, 255, 255, 0.75); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); -webkit-transform: perspective(200px) translateZ(-10px); transform: perspective(200px) translateZ(-10px); z-index: 2; } .mobile-only { display: none; } @media screen and (max-width: 768px) { .mobile-only { display: block; } }.mobile-only.display-as-mobile { display: block; } .mobile-only.mobile-navigation span { color: white !important; margin-left: 7px; display: inline; padding: 8px 10px 10px 10px; font-size: 20px; font-weight: 400; line-height: 0.6; display: inline-block; margin-top: 3px; } .mobile-only.mobile-navigation span.next-slide, .mobile-only.mobile-navigation span.prev-slide { border-radius: 100px; border: 2px solid white; } .mobile-only.mobile-navigation span.finish-slide { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .header-cube-wrap { -webkit-perspective: 200px; perspective: 200px; -webkit-perspective-origin: 50% 10px; perspective-origin: 50% 10px; } .header-cube-wrap .cube { position: relative; width: 20px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateY(60deg) rotateX(-10deg) rotateZ(-20deg); transform: rotateY(60deg) rotateX(-10deg) rotateZ(-20deg); -webkit-transition: opacity 300ms, -webkit-transform 1000ms; transition: opacity 300ms, -webkit-transform 1000ms; transition: transform 1000ms, opacity 300ms; transition: transform 1000ms, opacity 300ms, -webkit-transform 1000ms; } .header-cube-wrap .cube>div { position: absolute; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0); border: 0 solid #fff; outline: 1px solid white; border-radius: 3px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: background 1000ms; transition: background 1000ms; } .header-cube-wrap .cube .back { -webkit-transform: translateZ(-10px) rotateY(180deg); transform: translateZ(-10px) rotateY(180deg); } .header-cube-wrap .cube .right { -webkit-transform: rotateY(-270deg) translateX(10px); transform: rotateY(-270deg) translateX(10px); -webkit-transform-origin: top right; transform-origin: top right; } .header-cube-wrap .cube .left { -webkit-transform: rotateY(270deg) translateX(-10px); transform: rotateY(270deg) translateX(-10px); -webkit-transform-origin: center left; transform-origin: center left; } .header-cube-wrap .cube .top { background-color: transparent; border: none; -webkit-transform: rotateX(-90deg) translateY(-10px); transform: rotateX(-90deg) translateY(-10px); -webkit-transform-origin: top center; transform-origin: top center; } .header-cube-wrap .cube .top div { background-color: rgba(255, 255, 255, 0); border: 0 solid #fff; outline: 1px solid white; border-radius: 3px; position: absolute; width: 100%; height: 50%; left: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-delay: 250ms; transition-delay: 250ms; -webkit-transition: background 1000ms, -webkit-transform 750ms; transition: background 1000ms, -webkit-transform 750ms; transition: transform 750ms, background 1000ms; transition: transform 750ms, background 1000ms, -webkit-transform 750ms; } .header-cube-wrap .cube .top .top-left { top: 0; -webkit-transform: translateY(-10px) rotateX(-45deg); transform: translateY(-10px) rotateX(-45deg); } .header-cube-wrap .cube .top .top-right { bottom: 0; -webkit-transform: translateY(0px) rotateX(225deg); transform: translateY(0px) rotateX(225deg); } .header-cube-wrap .cube .bottom { -webkit-transform: rotateX(90deg) translateY(10px); transform: rotateX(90deg) translateY(10px); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .header-cube-wrap .cube .front { -webkit-transform: translateZ(10px); transform: translateZ(10px); } .header-cube-wrap:hover .cube, .header-cube-wrap.close .cube { -webkit-transform: rotateY(600deg) rotateX(10deg) rotateZ(20deg); transform: rotateY(600deg) rotateX(10deg) rotateZ(20deg); } .header-cube-wrap:hover .cube div, .header-cube-wrap.close .cube div { background-color: rgba(255, 255, 255, 0.3); } .header-cube-wrap:hover .cube .top .top-left, .header-cube-wrap.close .cube .top .top-left { -webkit-transform: translateY(-10px) rotateX(180deg); transform: translateY(-10px) rotateX(180deg); } .header-cube-wrap:hover .cube .top .top-right, .header-cube-wrap.close .cube .top .top-right { -webkit-transform: translateY(0px) rotateX(0deg); transform: translateY(0px) rotateX(0deg); } #edit-button { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; position: absolute; right: calc(50vw - 36em); -webkit-transform: scale(0.8); transform: scale(0.8); top: 66px; opacity: 0; -webkit-transition: opacity 300ms; transition: opacity 300ms; pointer-events: none; } #edit-button>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #edit-button:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } #edit-button:hover .label { color: #00aeef; } #edit-button:hover:after { height: 100%} .move-top #edit-button { opacity: 1; pointer-events: auto; } .move-top .cube { opacity: 0; pointer-events: none; } .desktop-only { display: block; } @media screen and (max-width: 768px) { .desktop-only { display: none; } }.desktop-only.display-as-mobile { display: none; } .product-page { height: 100vh; width: 100vw; overflow: hidden; display: -webkit-box; display: flex; background: #fff; -webkit-transition: background 500ms; transition: background 500ms; -webkit-box-pack: center; justify-content: center; align-content: center; -webkit-box-align: center; align-items: center; } .product-page.cyan-back { background-color: #00aeef; } .product-page.cyan-back .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .product-page.cyan-back .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .product-page.cyan-back .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .product-page.cyan-back .btn:hover .label { color: #fff; } .product-page.cyan-back .btn:hover:after { height: 5px; } .product-page.magenta-back { background-color: #e8168c; } .product-page.magenta-back .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .product-page.magenta-back .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .product-page.magenta-back .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .product-page.magenta-back .btn:hover .label { color: #e8168c; } .product-page.magenta-back .btn:hover:after { height: 100%} .product-page.dark-back { background-color: #61899A; } .product-page.dark-back .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .product-page.dark-back .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .product-page.dark-back .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .product-page.dark-back .btn:hover .label { color: #00aeef; } .product-page.dark-back .btn:hover:after { height: 100%} .product-page.grey-back { background-color: #a4a4a5; } .product-page.grey-back .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } .product-page.grey-back .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .product-page.grey-back .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .product-page.grey-back .btn:hover .label { color: #00aeef; } .product-page.grey-back .btn:hover:after { height: 100%} .product-page.purple-back { background-color: #020F82; } .product-page.green-back { background-color: #00A500; } .product-page.orange-back { background-color: #E81500; } .product-page .btn { margin-top: 30px; -webkit-transition: all 500ms !important; transition: all 500ms !important; } .product-page .btn:before, .product-page .btn:after { -webkit-transition: all 500ms !important; transition: all 500ms !important; } .product-page .slide { background: transparent; width: 100vw; max-width: 100vw; min-width: 100vw; height: 80vh; margin: auto; max-height: 800px; padding: 50px 50px 0 50px; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform: translateX(-100vw); transform: translateX(-100vw); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } @media (min-height: 800px) { .product-page .slide { padding: 100px 100px 0 100px; } }.product-page .slide>.inner { padding: 30px; } .product-page .slide .overflow { position: relative; max-height: 50vh; overflow-y: scroll; } .product-page .slide>div { -webkit-box-flex: 1; flex: 1; position: relative; max-width: 34em; } .product-page .slide .inner { padding-bottom: 120px; } .product-page .slide .inner h3 { font-size: 50px; color: white; margin-bottom: 0px; line-height: 1.2; } .product-page .slide .inner p { font-size: 18px; } .product-page .slide .inner .tagline { font-weight: 500 !important; } .product-page .slide .image-wrap { position: relative; padding-bottom: 80px; text-align: center; } .product-page .slide .image-wrap img { max-height: 70vh; margin: auto; } .product-page .slide .image-wrap .btn { position: absolute; bottom: 0px; right: 0px; } .product-page .slide .image-wrap .prev-slide { cursor: pointer; position: absolute; bottom: 0px; right: 180px; font-weight: 300; color: rgba(0, 0, 0, 0.5); } .product-page .slide[data-slide-color='yellow'] h2, .product-page .slide[data-slide-color='yellow'] h3 { color: black; } .product-page .slide .description { padding-top: 16px; } .product-page .slide .description p { font-size: 16px !important; line-height: 1.5 !important; } .product-page .slide .description ul { padding-left: 20px !important; } .product-page .slide .description ul li { font-size: 16px; list-style-type: circle; display: list-item; font-weight: 300; } .product-page .slide .description ul li ol { padding-left: 20px; } .product-page .slide .description ul li ol li { list-style-type: decimal; } .product-page .slide .tabs { background-color: transparent !important; padding: 0 !important; min-height: 0px !important; } .product-page .slide .tabs .inner { padding: 0 !important; margin: 0 !important; } .product-page .slide .tabs .tabs-headings { width: 100% !important; margin-top: 10px !important; margin-bottom: 10px !important; } .product-page .slide .tabs .tabs-headings .heading-wrap>div { font-size: 20px !important; } .product-page .slide .tabs .tabs-headings .heading-wrap h3 { font-size: 16px !important; margin-top: 0 !important; } .product-page .slide .tabs .heading-underline { background-color: white !important; height: 3px; } .product-page .slide .tabs .tabs-body { position: relative; } .product-page .slide .tabs .tabs-body>div { min-height: 0px !important; } .product-page .slide .tabs .tabs-body p { font-size: 16px !important; line-height: 1.5 !important; } .product-page .slide .tabs .tabs-body ul { padding: initial !important; padding-left: 20px !important; } .product-page .slide .tabs .tabs-body ul li { font-size: 16px; list-style-type: circle; display: list-item; font-weight: 300; } .product-page .slide .tabs .tabs-body ul li ol { padding-left: 20px; } .product-page .slide .tabs .tabs-body ul li ol li { list-style-type: decimal; } .product-page .slide.intro-slide { height: 65vh; padding-bottom: 0; } .product-page .slide.intro-slide div { padding-bottom: 0; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: end; justify-content: flex-end; } .product-page .slide.intro-slide div h1 { margin: 0; } .product-page .slide.intro-slide div h1 .strong { font-size: 80px; } .product-page .slide.intro-slide div .tagline p { font-size: 40px; } .product-page .slide.intro-slide div .start-button { height: 40vh; width: 40vh; max-height: 300px; max-width: 300px; display: -webkit-box; display: flex; } .product-page .slide.intro-slide div .start-button .label { font-size: 2em; margin: auto; font-weight: 400; line-height: 1.2; } @media screen and (max-width: 768px) { .product-page .slide { padding: 0; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; overflow-x: hidden !important; max-width: 100vw; height: 100vh !important; max-height: 100vh !important; display: block; padding: 50px 0 100px 0; } .product-page .slide .inner { padding-bottom: 30px; } .product-page .slide>div img { max-width: 90vw; } .product-page .slide h1 .strong { font-size: 70px !important; } .product-page .slide h3 { margin: 30px 0 15px 0 !important; line-height: 1.2 !important; font-size: 40px !important; } .product-page .slide .tabs { margin-top: 0px; } .product-page .slide .tabs .accordian-heading h4 { color: #fff !important; font-size: 18px !important; } .product-page .slide .tabs .accordian-body { background: transparent !important; border-top: 5px solid #fff !important; width: 100%} .product-page .slide .tabs .accordian-body .content-wrap { -webkit-transition: opacity 300ms; transition: opacity 300ms; } .product-page .slide .tabs .accordian-body.shrunk .content-wrap { opacity: 0; } .product-page .slide .tabs .accordian-body li { display: list-item; } .product-page .slide .prev-slide { position: absolute; bottom: 30px !important; left: 30px !important; right: auto !important; font-weight: 300; color: rgba(0, 0, 0, 0.5); } .product-page .slide .btn.next-slide { bottom: 30px; right: 30px; } .product-page .slide.intro-slide { height: 100vh !important; } .product-page .slide.intro-slide .start-button { margin: 30px auto !important; margin-bottom: 100px !important; height: 60vw; width: 60vw; max-height: 150px; max-width: 150px; } .product-page .slide.intro-slide h1 .strong { font-size: 50px !important; margin: 25px 0 !important; } .product-page .slide.intro-slide .tagline p { font-size: 28px !important; } }.product-page .slide.display-as-mobile { padding: 0; overflow-y: scroll !important; -webkit-overflow-scrolling: touch; overflow-x: hidden !important; max-width: 100vw; height: 100vh !important; max-height: 100vh !important; display: block; padding: 50px 0 100px 0; } .product-page .slide.display-as-mobile .inner { padding-bottom: 30px; } .product-page .slide.display-as-mobile>div img { max-width: 90vw; } .product-page .slide.display-as-mobile h1 .strong { font-size: 70px !important; } .product-page .slide.display-as-mobile h3 { margin: 30px 0 15px 0 !important; line-height: 1.2 !important; font-size: 40px !important; } .product-page .slide.display-as-mobile .tabs { margin-top: 0px; } .product-page .slide.display-as-mobile .tabs .accordian-heading h4 { color: #fff !important; font-size: 18px !important; } .product-page .slide.display-as-mobile .tabs .accordian-body { background: transparent !important; border-top: 5px solid #fff !important; width: 100%} .product-page .slide.display-as-mobile .tabs .accordian-body .content-wrap { -webkit-transition: opacity 300ms; transition: opacity 300ms; } .product-page .slide.display-as-mobile .tabs .accordian-body.shrunk .content-wrap { opacity: 0; } .product-page .slide.display-as-mobile .tabs .accordian-body li { display: list-item; } .product-page .slide.display-as-mobile .prev-slide { position: absolute; bottom: 30px !important; left: 30px !important; right: auto !important; font-weight: 300; color: rgba(0, 0, 0, 0.5); } .product-page .slide.display-as-mobile .btn.next-slide { bottom: 30px; right: 30px; } .product-page .slide.display-as-mobile.intro-slide { height: 100vh !important; } .product-page .slide.display-as-mobile.intro-slide .start-button { margin: 30px auto !important; margin-bottom: 100px !important; height: 60vw; width: 60vw; max-height: 150px; max-width: 150px; } .product-page .slide.display-as-mobile.intro-slide h1 .strong { font-size: 50px !important; margin: 25px 0 !important; } .product-page .slide.display-as-mobile.intro-slide .tagline p { font-size: 28px !important; } .product-page .slide.active-slide ~ .slide { -webkit-transform: translateX(100vw); transform: translateX(100vw); } .product-page .slide.was-active { opacity: 1; } .product-page .slide.active-slide { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .product-page .slide.above { -webkit-transform: translateX(0) translateY(-100vh); transform: translateX(0) translateY(-100vh); } .product-page .upgrade-slide input[type='submit'], .product-page .addon-slide input[type='submit'] { display: none; } .product-page .addon-slide .option:first-child { max-width: 0 !important; min-width: 0 !important; overflow: hidden; opacity: 0; padding: 0; margin: 0; } .product-page .addon-slide .option.multi:nth-child(odd) { max-width: 0 !important; min-width: 0 !important; overflow: hidden; opacity: 0; padding: 0; margin: 0; } .product-page .upsell { position: absolute; bottom: 0px; left: 30px; width: calc(100% - 60px); min-height: 60px; display: -webkit-box; display: flex; -ms-grid-column-align: space-between; justify-items: space-between; } @media screen and (max-height: 700px) { .product-page .upsell { position: static; margin-top: 30px; } }.product-page .upsell .option, .product-page .upsell .checker { -webkit-box-flex: 1; flex: 1; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; padding: 5px; margin: 0 5px; cursor: pointer; background: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); -webkit-transition: all 300ms; transition: all 300ms; -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); position: relative; z-index: 1; display: -webkit-box; display: flex; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%} .product-page .upsell .option:hover, .product-page .upsell .checker:hover { background: rgba(255, 255, 255, 0.75); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); -webkit-transform: perspective(200px) translateZ(-10px); transform: perspective(200px) translateZ(-10px); z-index: 2; } .product-page .upsell .option.selected, .product-page .upsell .checker.selected { box-shadow: 14px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22); background: #fff; -webkit-transform: perspective(200px) translateZ(0px) !important; transform: perspective(200px) translateZ(0px) !important; z-index: 3; } .product-page .upsell .option input, .product-page .upsell .checker input { opacity: 0; pointer-events: none; position: absolute; } .product-page .upsell .option label, .product-page .upsell .checker label { font-size: 20px; font-weight: 300; font-family: "bree-serif", "Source Sans Pro", sans-serif; text-align: center; margin: auto; pointer-events: none; cursor: pointer; height: auto; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .product-page .upsell .checker { -webkit-transform-origin: 0% 50% !important; transform-origin: 0% 50% !important; } .product-page .upsell .checker:hover { -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); } .product-page .upsell .checker label { -webkit-transition: opacity 150ms; transition: opacity 150ms; } @media screen and (max-width: 768px) { .product-page .upsell { display: block; margin: 30px auto; height: auto; position: static; } .product-page .upsell .option, .product-page .upsell .checker { min-width: 100%; height: auto; min-height: 70px; -webkit-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } .product-page .upsell .option:hover, .product-page .upsell .checker:hover { -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); } .product-page .upsell .option:first-child { position: relative; margin-bottom: -40px; } .product-page .upsell .checker { min-height: 70px; } }.product-page .upsell.display-as-mobile { display: block; margin: 30px auto; height: auto; position: static; } .product-page .upsell.display-as-mobile .option, .product-page .upsell.display-as-mobile .checker { min-width: 100%; height: auto; min-height: 70px; -webkit-transform-origin: 50% 50% !important; transform-origin: 50% 50% !important; } .product-page .upsell.display-as-mobile .option:hover, .product-page .upsell.display-as-mobile .checker:hover { -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); } .product-page .upsell.display-as-mobile .option:first-child { position: relative; margin-bottom: -40px; } .product-page .upsell.display-as-mobile .checker { min-height: 70px; } #product-timeline { position: fixed; top: 100vh; height: 100vh; width: 100vw; overflow: hidden; background: rgba(0, 0, 0, 0.5); color: white; z-index: 100; -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: padding 500ms, background 500ms, -webkit-transform 500ms, -webkit-filter 500ms; transition: padding 500ms, background 500ms, -webkit-transform 500ms, -webkit-filter 500ms; transition: transform 500ms, padding 500ms, background 500ms, filter 500ms; transition: transform 500ms, padding 500ms, background 500ms, filter 500ms, -webkit-transform 500ms, -webkit-filter 500ms; } #product-timeline .strip { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; height: 100px; -webkit-transition: height 500ms, -webkit-transform 500ms; transition: height 500ms, -webkit-transform 500ms; transition: height 500ms, transform 500ms; transition: height 500ms, transform 500ms, -webkit-transform 500ms; } #product-timeline .strip div { padding: 30px; } #product-timeline .strip #timeline { -webkit-box-flex: 4; flex: 4; max-width: 52em; padding: 20px; -webkit-transition: -webkit-transform 500ms; transition: -webkit-transform 500ms; transition: transform 500ms; transition: transform 500ms, -webkit-transform 500ms; -webkit-transform-origin: 30% 0%; transform-origin: 30% 0%} #product-timeline .strip #timeline ul { display: -webkit-box; display: flex; } #product-timeline .strip #timeline ul li { display: block; cursor: pointer; -webkit-box-flex: 1; flex: 1; line-height: 1.5; padding: 0 0 15px 20px; font-size: 16px; font-weight: 400; height: 30px; color: white; position: relative; -webkit-transition: color 500ms, height 500ms, border 500ms, -webkit-transform 500ms; transition: color 500ms, height 500ms, border 500ms, -webkit-transform 500ms; transition: color 500ms, height 500ms, transform 500ms, border 500ms; transition: color 500ms, height 500ms, transform 500ms, border 500ms, -webkit-transform 500ms; } #product-timeline .strip #timeline ul li .acronym { -webkit-transition: opacity 500ms; transition: opacity 500ms; } #product-timeline .strip #timeline ul li .acronym .after { margin-left: 5px; letter-spacing: 5px; font-weight: 300; } #product-timeline .strip #timeline ul li .full-title { position: absolute; bottom: 0; font-size: 14px; line-height: 1.2; width: 200%; opacity: 0; -webkit-transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, transform 500ms; transition: opacity 500ms, transform 500ms, -webkit-transform 500ms; } #product-timeline .strip #timeline ul li .full-title .after { display: block; font-weight: 200; } #product-timeline .strip #timeline ul li .indicator { display: block; position: absolute; width: 24px; height: 24px; border-radius: 100px; border: 2px solid white; bottom: -11px; left: -2px; -webkit-transition: background 500ms, border 500ms; transition: background 500ms, border 500ms; overflow: hidden; } #product-timeline .strip #timeline ul li .indicator .inner { content: ''; position: absolute; top: 0; left: 30px; width: 100%; height: 100%; background-color: white; -webkit-transition: left 500ms, background 500ms; transition: left 500ms, background 500ms; z-index: -1; } #product-timeline .strip #timeline ul li:after { content: ""; display: block; position: absolute; bottom: 0px; background-color: white; height: 2px; width: calc( 100% - 20px); -webkit-transition: background-color 500ms; transition: background-color 500ms; } #product-timeline .strip #timeline ul li.active ~ li .indicator .inner { left: -30px; } #product-timeline .strip #timeline ul li.active .indicator .inner { left: 0; } #product-timeline .strip #timeline ul li:hover { color: white; } #product-timeline .strip #timeline ul li:nth-child(even) { -webkit-transform: translateY(28px); transform: translateY(28px); border-bottom: none; line-height: 2; } #product-timeline .strip #timeline ul li:nth-child(even) .full-title { bottom: auto; top: 35px; } #product-timeline .strip #timeline ul li:nth-child(even) .indicator { bottom: auto; top: -11px; } #product-timeline .strip #timeline ul li:nth-child(even):after { bottom: auto; top: 0px; } #product-timeline .strip #timeline ul li:last-child:after { display: none; } #product-timeline .strip #timeline ul li.active { cursor: default; } #product-timeline .strip #timeline ul li.included { border-color: #00aeef; } #product-timeline .strip #timeline ul li.included .indicator { border-color: #00aeef; } #product-timeline .strip #timeline ul li.included .indicator .inner { background-color: #00aeef; } #product-timeline .strip #timeline ul li.included .indicator:before { background-color: #00aeef; } #product-timeline .strip #timeline ul li.not-included { color: #fff; border-color: #fff; } #product-timeline .strip #timeline ul li.not-included .indicator { border-color: #fff; } #product-timeline .strip #timeline ul li.not-included:after { background-color: #fff; } #product-timeline .strip #timeline ul li.disabled { color: #666; border-bottom: 2px dashed #666; } #product-timeline .strip #timeline ul li.disabled .indicator { border-color: #666; border-style: dashed; } #product-timeline .strip #timeline ul li.disabled:nth-child(even) { border-top: 2px dashed #666; border-bottom: none; } #product-timeline .strip #total-wrap { -webkit-box-flex: 2; flex: 2; max-width: 12em; -webkit-transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, -webkit-transform 500ms; transition: transform 500ms, opacity 500ms; transition: transform 500ms, opacity 500ms, -webkit-transform 500ms; -webkit-transform-origin: 200% 50%; transform-origin: 200% 50%} #product-timeline .strip #total-wrap #grand-total { font-size: 22px; font-weight: 100; position: relative; -webkit-transition: opacity 150ms; transition: opacity 150ms; } #product-timeline .strip #total-wrap #grand-total:before { content: 'ESTIMATE'; position: absolute; top: -10px; left: 0; font-size: 16px; font-weight: 200; } #product-timeline .strip #controls { -webkit-box-flex: 1; flex: 1; max-width: 8em; display: -webkit-box; display: flex; -webkit-transition: opacity 500ms, -webkit-transform 500ms; transition: opacity 500ms, -webkit-transform 500ms; transition: transform 500ms, opacity 500ms; transition: transform 500ms, opacity 500ms, -webkit-transform 500ms; -webkit-transform-origin: 200% 50%; transform-origin: 200% 50%; position: relative; } #product-timeline .strip #controls div { padding: 0; } #product-timeline .strip #controls span { cursor: pointer; } #product-timeline .strip #controls .finish-slide img { width: 50px; } #product-timeline.expand, #product-timeline.mid-expand { -webkit-transform: translateY(-200px); transform: translateY(-200px); background: rgba(0, 0, 0, 0.3); } #product-timeline.expand .strip, #product-timeline.mid-expand .strip { height: 200px; } #product-timeline.expand .disabled, #product-timeline.mid-expand .disabled { color: white !important; border-color: white !important; } #product-timeline.expand .disabled:before, #product-timeline.mid-expand .disabled:before { border-color: white !important; } #product-timeline.expand .included, #product-timeline.mid-expand .included { color: #00aeef !important; border-color: #00aeef !important; } #product-timeline.expand .included:before, #product-timeline.mid-expand .included:before { border-color: #00aeef !important; } #product-timeline.expand .not-included, #product-timeline.mid-expand .not-included { color: #eee !important; border-color: #eee !important; } #product-timeline.expand .not-included:before, #product-timeline.mid-expand .not-included:before { border-color: #eee !important; } #product-timeline.move-top { background: transparent; -webkit-transform: translateY(-100vh); transform: translateY(-100vh); padding-top: 70px; overflow: scroll; } #product-timeline.move-top .strip { height: 180px; } #product-timeline.move-top .not-included { color: #666 !important; } #product-timeline.move-top .not-included .indicator { border-color: #666 !important; } #product-timeline.move-top .not-included:after { background-color: #666 !important; } #product-timeline.move-top .included { color: white !important; border-color: white !important; } #product-timeline.move-top .included .indicator { border-color: #fff !important; } #product-timeline.move-top .included .indicator:before { background-color: #fff !important; -webkit-transform: scale(1.1) !important; transform: scale(1.1) !important; } #product-timeline.move-top .included:after { background-color: #fff !important; } #product-timeline.expand #timeline, #product-timeline.mid-expand #timeline, #product-timeline.move-top #timeline { -webkit-transform: scale(1.25); transform: scale(1.25); } #product-timeline.expand #total-wrap, #product-timeline.expand #controls, #product-timeline.mid-expand #total-wrap, #product-timeline.mid-expand #controls, #product-timeline.move-top #total-wrap, #product-timeline.move-top #controls { -webkit-transform: scale(0, 1); transform: scale(0, 1); opacity: 0; } #product-timeline.expand #timeline ul li, #product-timeline.mid-expand #timeline ul li, #product-timeline.move-top #timeline ul li { height: 60px; } #product-timeline.expand #timeline ul li:nth-child(even), #product-timeline.mid-expand #timeline ul li:nth-child(even), #product-timeline.move-top #timeline ul li:nth-child(even) { -webkit-transform: translateY(58px); transform: translateY(58px); } #product-timeline.expand .acronym, #product-timeline.mid-expand .acronym, #product-timeline.move-top .acronym { opacity: 0; } #product-timeline.expand .full-title, #product-timeline.mid-expand .full-title, #product-timeline.move-top .full-title { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 1 !important; } #product-timeline.expand #controls, #product-timeline.mid-expand #controls, #product-timeline.move-top #controls { -webkit-transform: translateX(130%) translateY(30%) scale(1, 1); transform: translateX(130%) translateY(30%) scale(1, 1); opacity: 0; } #product-timeline .page { margin-bottom: 100px; } #product-timeline .page form { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } #product-timeline .page form>div { -webkit-box-flex: 1; flex: 1; padding: 30px; position: relative; max-width: 34em; padding-bottom: 100px; } #product-timeline.mid-expand #controls { -webkit-transform: translateX(130%) translateY(30%) scale(1, 1); transform: translateX(130%) translateY(30%) scale(1, 1); opacity: 1; } #product-timeline #visible-form { width: 100%; max-width: 600px; } #product-timeline #visible-form input, #product-timeline #visible-form label { display: block; width: 100%} #product-timeline #visible-form label { margin-top: 10px; color: #333; } #product-timeline #visible-form input { padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(0, 0, 0, 0.24); border-radius: 5px; background: white !important; color: black !important; font-size: 16px; text-align: left; height: auto; line-height: 30px; } #product-timeline #hidden-form { display: none; } #product-timeline .btn-submit { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; position: absolute !important; left: 0; padding: 0 10px !important; -webkit-transform: translateX(-50%) scale(1.5); transform: translateX(-50%) scale(1.5); } #product-timeline .btn-submit>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #product-timeline .btn-submit:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } #product-timeline .btn-submit:hover .label { color: #000; } #product-timeline .btn-submit:hover:after { height: 100%} #product-timeline .loggedin-form .btn-submit { position: relative !important; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: translateX(0) scale(1.5); transform: translateX(0) scale(1.5); } #product-timeline #checkout input:not([type='submit']) { color: black !important; } #product-timeline .cart { background: white; } #product-timeline .cart * { color: rgba(0, 0, 0, 0.8); border-color: rgba(0, 0, 0, 0.8); font-weight: 300; border: none; font-size: 18px; } #product-timeline .cart td, #product-timeline .cart th { padding: 10px; text-align: right; } #product-timeline .cart td.money, #product-timeline .cart th.money { text-align: left; } #product-timeline .cart tr:nth-child(odd) { background: rgba(0, 174, 239, 0.2); } #product-timeline .cart tr:last-child { background: #00aeef; } #product-timeline .cart tr:last-child * { color: white !important; font-size: 28px !important; font-weight: 200 !important; } #product-timeline .cart tr:last-child .money { background: rgba(255, 255, 255, 0.2); } @media screen and (max-width: 768px) { #product-timeline { z-index: -1; opacity: 0; pointer-events: none; transtion: opacity 500ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-overflow-scrolling: touch; } #product-timeline .strip { display: none; } #product-timeline.move-top { display: block; z-index: 10; opacity: 1; pointer-events: auto; -webkit-transition-delay: 250ms; transition-delay: 250ms; } #product-timeline .page form { -webkit-overflow-scrolling: touch; display: block; padding-bottom: 100px; } #product-timeline .page form>div { min-width: 100vw; padding-bottom: 40px !important; } #product-timeline .page form>div #venn-diagram { width: 20em; height: 20em; } #product-timeline .page form .btn-submit { -webkit-transform: scale(1.2) translateX(50%) !important; transform: scale(1.2) translateX(50%) !important; } }#product-timeline.display-as-mobile { z-index: -1; opacity: 0; pointer-events: none; transtion: opacity 500ms; -webkit-transition-delay: 0ms; transition-delay: 0ms; -webkit-overflow-scrolling: touch; } #product-timeline.display-as-mobile .strip { display: none; } #product-timeline.display-as-mobile.move-top { display: block; z-index: 10; opacity: 1; pointer-events: auto; -webkit-transition-delay: 250ms; transition-delay: 250ms; } #product-timeline.display-as-mobile .page form { -webkit-overflow-scrolling: touch; display: block; padding-bottom: 100px; } #product-timeline.display-as-mobile .page form>div { min-width: 100vw; padding-bottom: 40px !important; } #product-timeline.display-as-mobile .page form>div #venn-diagram { width: 20em; height: 20em; } #product-timeline.display-as-mobile .page form .btn-submit { -webkit-transform: scale(1.2) translateX(50%) !important; transform: scale(1.2) translateX(50%) !important; } .fade-change { opacity: 0 !important; } #venn-diagram { width: 22em; height: 22em; max-width: 80vw; max-height: 80vw; position: relative; margin: 50px auto; } #venn-diagram input { position: absolute; top: 50%; width: 100%; opacity: 0; pointer-events: none; } #venn-diagram .circles, #venn-diagram .circle-backs { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #venn-diagram .circles { z-index: 1; } #venn-diagram .circle { width: 60%; height: 60%; border-radius: 10000px; position: absolute; mix-blend-mode: multiply; opacity: 0.5; border: 5px solid transparent; -webkit-transition: opacity 500ms, box-shadow 500ms, border 500ms, -webkit-transform 500ms; transition: opacity 500ms, box-shadow 500ms, border 500ms, -webkit-transform 500ms; transition: opacity 500ms, transform 500ms, box-shadow 500ms, border 500ms; transition: opacity 500ms, transform 500ms, box-shadow 500ms, border 500ms, -webkit-transform 500ms; -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; cursor: pointer; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24); } #venn-diagram .circle .circle-title { position: absolute; text-align: center; top: 50%; left: 50%; display: inline-block; font-size: 1.5em; color: #999 !important; mix-blend-mode: luminosity; z-index: 2; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: color 500ms; transition: color 500ms; } #venn-diagram .circle-cyan { background-color: #00aeef; } #venn-diagram .circle-yellow { background-color: #fff200; } #venn-diagram .circle-magenta { background-color: #e8168c; } #venn-diagram .circle:nth-child(1) { top: 0; left: 0; } #venn-diagram .circle:nth-child(1) .circle-title { left: 40%; top: 45%} #venn-diagram .circle:nth-child(2) { top: 0; right: 0; } #venn-diagram .circle:nth-child(2) .circle-title { right: 30%; top: 45%} #venn-diagram .circle:nth-child(3) { bottom: 0; left: 20%} #venn-diagram .circle:nth-child(3) .circle-title { top: 45%} #venn-diagram .circle:hover, #venn-diagram .circle.selected { opacity: 1; -webkit-transform: perspective(200px) translateZ(0); transform: perspective(200px) translateZ(0); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); } #venn-diagram .circle.selected { border: 5px solid white; } #venn-diagram .circle.selected .circle-title { color: black !important; } .no-underline:before, .no-underline:after { display: none !important; } .help-hover { opacity: 0.2; position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, 0.8); padding: 30px; -webkit-transform: scale(1, 0) perspective(200px) translateZ(-100px); transform: scale(1, 0) perspective(200px) translateZ(-100px); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; pointer-events: none; -webkit-transition: opacity 400ms, -webkit-transform 300ms; transition: opacity 400ms, -webkit-transform 300ms; transition: opacity 400ms, transform 300ms; transition: opacity 400ms, transform 300ms, -webkit-transform 300ms; border-radius: 0 0 0 10px; } .help-hover * { color: white !important; opacity: 0; -webkit-transition: opacity 500ms; transition: opacity 500ms; -webkit-transition-delay: 0 !important; transition-delay: 0 !important; } .help-hover.show { opacity: 1; pointer-events: auto; -webkit-transform: scale(1, 1) perspective(200px) translateZ(0); transform: scale(1, 1) perspective(200px) translateZ(0); } .help-hover.show * { opacity: 1; } .help-hover.show #contact-sider>*:nth-child(1) { -webkit-transition-delay: 120ms; transition-delay: 120ms; } .help-hover.show #contact-sider>*:nth-child(2) { -webkit-transition-delay: 240ms; transition-delay: 240ms; } .help-hover.show #contact-sider>*:nth-child(3) { -webkit-transition-delay: 360ms; transition-delay: 360ms; } .help-hover.show #contact-sider>*:nth-child(4) { -webkit-transition-delay: 480ms; transition-delay: 480ms; } .help-hover.show #contact-sider>*:nth-child(5) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .help-hover.show #contact-sider>*:nth-child(6) { -webkit-transition-delay: 720ms; transition-delay: 720ms; } .help-hover.show #contact-sider>*:nth-child(7) { -webkit-transition-delay: 840ms; transition-delay: 840ms; } .help-hover.show #contact-sider>*:nth-child(8) { -webkit-transition-delay: 960ms; transition-delay: 960ms; } .help-hover.show #contact-sider>*:nth-child(9) { -webkit-transition-delay: 1080ms; transition-delay: 1080ms; } #main.no-bottom { margin-bottom: 0 !important; max-height: 100vh !important; overflow: hidden !important; } .cube-wrap { -webkit-perspective: 200px; perspective: 200px; -webkit-perspective-origin: 50% 15px; perspective-origin: 50% 15px; } .cube-wrap .cube { position: relative; width: 30px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateY(60deg) rotateX(-10deg) rotateZ(-20deg); transform: rotateY(60deg) rotateX(-10deg) rotateZ(-20deg); -webkit-transition: opacity 300ms, -webkit-transform 1000ms; transition: opacity 300ms, -webkit-transform 1000ms; transition: transform 1000ms, opacity 300ms; transition: transform 1000ms, opacity 300ms, -webkit-transform 1000ms; } .cube-wrap .cube>div { position: absolute; width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0); border: 3px solid #fff; outline: 1px solid white; border-radius: 3px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: background 1000ms; transition: background 1000ms; } .cube-wrap .cube .back { -webkit-transform: translateZ(-15px) rotateY(180deg); transform: translateZ(-15px) rotateY(180deg); } .cube-wrap .cube .right { -webkit-transform: rotateY(-270deg) translateX(15px); transform: rotateY(-270deg) translateX(15px); -webkit-transform-origin: top right; transform-origin: top right; } .cube-wrap .cube .left { -webkit-transform: rotateY(270deg) translateX(-15px); transform: rotateY(270deg) translateX(-15px); -webkit-transform-origin: center left; transform-origin: center left; } .cube-wrap .cube .top { background-color: transparent; border: none; -webkit-transform: rotateX(-90deg) translateY(-15px); transform: rotateX(-90deg) translateY(-15px); -webkit-transform-origin: top center; transform-origin: top center; } .cube-wrap .cube .top div { background-color: rgba(255, 255, 255, 0); border: 3px solid #fff; outline: 1px solid white; border-radius: 3px; position: absolute; width: 100%; height: 50%; left: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-delay: 250ms; transition-delay: 250ms; -webkit-transition: background 1000ms, -webkit-transform 750ms; transition: background 1000ms, -webkit-transform 750ms; transition: transform 750ms, background 1000ms; transition: transform 750ms, background 1000ms, -webkit-transform 750ms; } .cube-wrap .cube .top .top-left { top: 0; -webkit-transform: translateY(-15px) rotateX(-45deg); transform: translateY(-15px) rotateX(-45deg); } .cube-wrap .cube .top .top-right { bottom: 0; -webkit-transform: translateY(0px) rotateX(225deg); transform: translateY(0px) rotateX(225deg); } .cube-wrap .cube .bottom { -webkit-transform: rotateX(90deg) translateY(15px); transform: rotateX(90deg) translateY(15px); -webkit-transform-origin: bottom center; transform-origin: bottom center; } .cube-wrap .cube .front { -webkit-transform: translateZ(15px); transform: translateZ(15px); } .cube-wrap:hover .cube, .cube-wrap.close .cube { -webkit-transform: rotateY(600deg) rotateX(10deg) rotateZ(20deg); transform: rotateY(600deg) rotateX(10deg) rotateZ(20deg); } .cube-wrap:hover .cube div, .cube-wrap.close .cube div { background-color: rgba(255, 255, 255, 0.3); } .cube-wrap:hover .cube .top .top-left, .cube-wrap.close .cube .top .top-left { -webkit-transform: translateY(-15px) rotateX(180deg); transform: translateY(-15px) rotateX(180deg); } .cube-wrap:hover .cube .top .top-right, .cube-wrap.close .cube .top .top-right { -webkit-transform: translateY(0px) rotateX(0deg); transform: translateY(0px) rotateX(0deg); } .team { background-color: #eee; padding: 40px; } @media screen and (max-width: 480px) { .team { padding: 20px; } }.team.display-as-mobile { padding: 20px; } .team .inner { max-width: 68em; margin: 5% auto; overflow: hidden; position: relative; } .team .strong { color: #555 !important; margin: 40px 0px 40px 0px; } @media screen and (max-width: 480px) { .team .strong { margin: 10px 0px 10px 0px; } }.team .strong.display-as-mobile { margin: 10px 0px 10px 0px; } @media screen and (max-width: 480px) { .team .strong { margin-bottom: 60px; } }.team .strong.display-as-mobile { margin-bottom: 60px; } .clock--wrap { position: relative; width: 1134px; height: 1136px; left: 50%; margin-left: -367px; top: 280px; margin-top: -568px; -webkit-transform: rotate(270deg); transform: rotate(270deg); -moz-transition: transform 1s, margin-left 1s; -webkit-transition: transform 1s, margin-left 1s; -o-transition: transform 1s, margin-left 1s; } @media screen and (max-width: 480px) { .clock--wrap { display: block; } }.clock--wrap.display-as-mobile { display: block; } @media screen and (min-width: 1068px) { .clock--wrap { display: block; } }.clock--wrap.display-as-mobile { display: block; } .menu-open .clock--wrap { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .clock { position: relative; width: 100%; height: 100%; margin: 0 auto; background: url(/images/clock/clock.png) no-repeat; background-size: 100% auto; list-style: none; } .clock--sec, .clock--min, .clock--hour { -webkit-transition: -webkit-transform 2s linear; transition: -webkit-transform 2s linear; transition: transform 2s linear; transition: transform 2s linear, -webkit-transform 2s linear; -moz-transition: transform 2s linear; -webkit-transition: transform 2s linear; -o-transition: transform 2s linear; position: absolute; } .clock--sec { background: url(/images/clock/secs.png) no-repeat; z-index: 3; height: 550px; width: 35px; left: 50%; margin-left: -17.5px; top: 50%; margin-top: -439px; -webkit-transform-origin: 50% 80%; transform-origin: 50% 80%} .clock--min { background: url(/images/clock/mins.png) no-repeat; z-index: 2; width: 10px; height: 382px; left: 50%; top: 50%; margin-left: -5px; margin-top: -387px; -webkit-transform-origin: bottom; transform-origin: bottom; } .clock--hour { background: url(/images/clock/hours.png) no-repeat; z-index: 1; width: 12px; height: 222px; left: 50%; margin-left: -6px; top: 50%; margin-top: -226px; -webkit-transform-origin: bottom; transform-origin: bottom; } .ouibounce-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999; } .ouibounce-modal .b1 { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; margin-top: 20px; } .ouibounce-modal .b1>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .ouibounce-modal .b1:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } .ouibounce-modal .b1:hover .label { color: #000; } .ouibounce-modal .b1:hover:after { height: 100%} .ouibounce-modal .btn-cta { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; margin: 20px auto 0; display: block; } .ouibounce-modal .btn-cta>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #000; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .ouibounce-modal .btn-cta:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .ouibounce-modal .btn-cta:hover .label { color: #fff200; } .ouibounce-modal .btn-cta:hover:after { height: 5px; } .ouibounce-modal .privacy-policy { font-size: 14px !important; margin-top: 10px; } .ouibounce-modal .underlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; -webkit-animation: fadein 0.5s; animation: fadein 0.5s; z-index: 5; } .ouibounce-modal .modal { width: 600px; height: 400px; background-color: #222222; z-index: 10; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; border-radius: 4px; -webkit-animation: popin 0.5s; animation: popin 0.5s; } @media screen and (max-width: 480px) { .ouibounce-modal .modal { width: 90%} }.ouibounce-modal .modal.display-as-mobile { width: 90%} .ouibounce-modal .modal.display-as-mobile { width: 600px; } .ouibounce-modal .modal-title { color: #fff200; padding: 10px; margin: 0; border-radius: 4px 4px 0 0; text-align: center; font-size: 50px; font-weight: 800; } .ouibounce-modal h3 { font-size: 1em; margin: 0.2em; text-transform: uppercase; } .ouibounce-modal .modal-body { padding: 20px 35px; font-size: 0.9em; } .ouibounce-modal p { color: #fff; font-size: 28px; } .ouibounce-modal form { text-align: center; margin-top: 35px; } .ouibounce-modal .modal-footer { position: absolute; bottom: 20px; text-align: center; width: 100%} .ouibounce-modal .modal-footer p { text-transform: capitalize; cursor: pointer; display: inline; border-bottom: 1px solid #555; font-size: 16px; } @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }@-webkit-keyframes popin { 0% { -webkit-transform: translateY(100vh); transform: translateY(100vh); opacity: 0; } 1% { -webkit-transform: translateY(100vh); transform: translateY(100vh); opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }@keyframes popin { 0% { -webkit-transform: translateY(100vh); transform: translateY(100vh); opacity: 0; } 1% { -webkit-transform: translateY(100vh); transform: translateY(100vh); opacity: 1; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } }.form-page { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } #impress { position: relative; margin: 10vh auto 10vh; width: 100vw; max-width: 900px; background-color: #000; padding: 5vw; } #impress .divider { width: 100%; float: left; clear: both; } #impress .step { margin: 0px; height: auto; width: 100%; min-width: 0; max-width: 100vw; min-height: 0; padding: 10px; } #impress .step:after { content: ''; display: table; clear: both; } #impress .step.hidden-from-member { opacity: 0 !important; display: none !important; } #impress .step .hidden-from-member { opacity: 0 !important; display: none !important; } #impress .step>div:not(.form-group), #impress .step>div>div:not(.form-group), #impress .step>div>div>div:not(.form-group) { float: left; } #impress .step::-webkit-scrollbar { width: 10px; } #impress .step::-webkit-scrollbar-track { background-color: transparent; } #impress .step::-webkit-scrollbar-thumb { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100px; } #impress .step h2 { font-size: 32px; } #impress .conditional { float: left; width: 100%; display: block; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: -webkit-transform 400ms; transition: -webkit-transform 400ms; transition: transform 400ms; transition: transform 400ms, -webkit-transform 400ms; display: none; } #impress .conditional.is-met { display: block; } #impress .conditional.is-shown { -webkit-transform: scale(1, 1); transform: scale(1, 1); } #impress .custom-file-upload { float: left; width: 100%} #impress p { pointer-events: none; float: left; } #impress p a, #impress p input, #impress p textarea { pointer-events: auto; } #impress p.form-label-text { padding: 0; margin: 20px 0px 0px 0px; width: 97%; line-height: 1.5; margin-bottom: 5px; clear: both; } #impress input[type='text'], #impress input[type='email'], #impress textarea { border: 2px solid rgba(255, 255, 255, 0.3) !important; -webkit-transition: border 400ms; transition: border 400ms; background-color: transparent; margin: 0 !important; padding: 20px 10px !important; font-size: 16px !important; width: 97% !important; } #impress input[type='text']:focus, #impress input[type='email']:focus, #impress textarea:focus { border: 2px solid white !important; } #impress textarea { padding: 10px 10px !important; height: 44px; overflow: hidden; } #impress .file-upload-wrapper, #impress .noUi-target { width: 100%} #impress .impress-arrow { float: left; } #impress .impress-arrow:nth-of-type(1) { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } #impress .impress-arrow:nth-of-type(1)>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #impress .impress-arrow:nth-of-type(1):after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } #impress .impress-arrow:nth-of-type(1):hover .label { color: #000; } #impress .impress-arrow:nth-of-type(1):hover:after { height: 100%} #impress .impress-arrow:nth-of-type(1):after { border-radius: 2px 0px 0px 2px; } #impress .impress-arrow:nth-of-type(1):hover:after { border-radius: 2px 2px 0px 2px; } #impress .impress-arrow:nth-of-type(2) { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; } #impress .impress-arrow:nth-of-type(2)>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #00aeef; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #impress .impress-arrow:nth-of-type(2):after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } #impress .impress-arrow:nth-of-type(2):hover .label { color: #fff; } #impress .impress-arrow:nth-of-type(2):hover:after { height: 100%} #impress .impress-arrow:nth-of-type(2):after { border-radius: 0px 2px 2px 0px; } #impress .impress-arrow:nth-of-type(2):hover:after { border-radius: 2px 2px 2px 0px; } #impress .impress-submit { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; float: left; clear: both; margin-top: 30px; } #impress .impress-submit>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff200; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } #impress .impress-submit:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 5px; background: #fff200; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms, border-radius 500ms; transition: height 500ms, border-radius 500ms; } #impress .impress-submit:hover .label { color: #000; } #impress .impress-submit:hover:after { height: 100%} #impress .impress-submit:after { border-radius: 0px 2px 2px 0px; } #impress .impress-submit:hover:after { border-radius: 2px 2px 2px 0px; } #impress .form-table .half { padding: 0; margin: 0; } #impress .form-table .half * { width: 100% !important; margin: 0 !important; } #impress .form-group.third { width: 30% !important; display: inline-block !important; margin-right: 3% !important; } #impress .form-group.two-third { width: 66% !important; display: inline-block !important; } #impress .only-one .onoffswitch-inner:before { background-color: #fff200; } #impress .only-one .check { float: none !important; } #impress .farbtastic { position: relative !important; } #impress .farbtastic * { position: absolute !important; cursor: crosshair !important; } #impress .farbtastic, #impress .farbtastic .wheel { width: 195px !important; height: 195px !important; } #impress .farbtastic .color, #impress .farbtastic .overlay { top: 47px !important; left: 47px !important; width: 101px !important; height: 101px !important; } #impress .farbtastic .wheel { background: url(/images/wheel.png) no-repeat !important; width: 195px !important; height: 195px !important; } #impress .farbtastic .overlay { background: url(/images/mask.png) no-repeat !important; } #impress .farbtastic .marker { width: 17px !important; height: 17px !important; margin: -8px 0 0 -8px !important; overflow: hidden !important; background: url(/images/marker.png) no-repeat !important; } #creative-session-questionnaire-wrap .step { margin-top: 0 !important; overflow: scroll; max-height: 80vh !important; } #creative-session-questionnaire-wrap .step .pick-a-date { width: 296px; } /*! * jQuery UI CSS Framework 1.11.4 * http://jqueryui.com * * Copyright jQuery Foundation and other contributors * Released under the MIT license. * http://jquery.org/license * * http://api.jqueryui.com/category/theming/ * * To view and modify this theme, visit http://jqueryui.com/themeroller/?tr%26ffDefault=Helvetica%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=888888&bgTextureHeader=highlight_hard&bgImgOpacityHeader=15&borderColorHeader=404040&fcHeader=ffffff&iconColorHeader=cccccc&bgColorContent=121212&bgTextureContent=gloss_wave&bgImgOpacityContent=16&borderColorContent=404040&fcContent=eeeeee&iconColorContent=bbbbbb&bgColorDefault=adadad&bgTextureDefault=highlight_soft&bgImgOpacityDefault=35&borderColorDefault=cccccc&fcDefault=333333&iconColorDefault=666666&bgColorHover=dddddd&bgTextureHover=highlight_soft&bgImgOpacityHover=60&borderColorHover=dddddd&fcHover=000000&iconColorHover=c98000&bgColorActive=121212&bgTextureActive=inset_soft&bgImgOpacityActive=15&borderColorActive=000000&fcActive=ffffff&iconColorActive=f29a00&bgColorHighlight=555555&bgTextureHighlight=highlight_hard&bgImgOpacityHighlight=55&borderColorHighlight=404040&fcHighlight=cccccc&iconColorHighlight=aaaaaa&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a */.ui-widget { font-size: 1.1em; z-index: 1000 !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-filter: blur(0); } .ui-widget * { border-radius: 0 !important; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 1em; } .ui-widget-content { /* background: #121212 url("images/ui-bg_gloss-wave_16_121212_500x100.png") 50% top repeat-x;*/ color: #eeeeee; } .ui-widget-content a { color: #eeeeee; display: inline-block; text-align: center; width: 100%} .ui-widget-header { border: 1px solid #404040; /*background: #888 url("images/ui-bg_highlight-hard_15_888888_1x100.png") 50% 50% repeat-x;*/ color: #ffffff; font-weight: bold; } .ui-widget-header a { color: #ffffff; } .ui-datepicker-calendar { border-collapse: collapse; margin: 15px; } .ui-datepicker-calendar td a { padding: 5px; min-width: 36px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none; background: transparent; font-weight: normal; color: #333333; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #333333; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: none; /*background: #ddd url("images/ui-bg_highlight-soft_60_dddddd_1x100.png") 50% 50% repeat-x;*/ font-weight: normal; color: #000000; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited { color: #000000; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: none; /* background: #121212 url("images/ui-bg_inset-soft_15_121212_1x100.png") 50% 50% repeat-x; */ font-weight: normal; color: #ffffff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #404040; /* background: #555 url("images/ui-bg_highlight-hard_55_555555_1x100.png") 50% top repeat-x; */ color: #cccccc; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #cccccc; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; /*background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;*/ color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter: Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter: Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); } .ui-datepicker-next, .ui-datepicker-prev { width: 50% !important; border-radius: 0 !important; cursor: pointer; } .ui-datepicker-title { text-align: center; padding: 15px; background: rgba(0, 0, 0, 0.5); border-radius: 0 !important; } .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon { /* background-image: url("images/ui-icons_bbbbbb_256x240.png");*/ } .ui-widget-header .ui-icon { /*background-image: url("images/ui-icons_cccccc_256x240.png");*/ } .ui-state-default .ui-icon { /*background-image: url("images/ui-icons_666666_256x240.png");*/ } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { /*background-image: url("images/ui-icons_c98000_256x240.png");*/ } .ui-state-active .ui-icon { /* background-image: url("images/ui-icons_f29a00_256x240.png");*/ } .ui-state-highlight .ui-icon { /*background-image: url("images/ui-icons_aaaaaa_256x240.png");*/ } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { /* background-image: url("images/ui-icons_cd0a0a_256x240.png");*/ } .ui-icon-blank { background-position: 16px 16px; } .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px; } .ui-widget-overlay { background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa; opacity: .3; filter: Alpha(Opacity=30); border-radius: 0px; } .member-section { background-color: #00aeef; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; padding-top: 15vh; } .member-section .inner { -webkit-box-flex: 4; flex: 4; max-width: 50em; position: relative; color: white; } @media screen and (max-width: 480px) { .member-section .inner { padding: 0 !important; } }.member-section .inner.display-as-mobile { padding: 0 !important; } .member-section .inner .block { background-color: rgba(0, 0, 0, 0.3); padding: 30px; } @media screen and (max-width: 480px) { .member-section .inner .block { padding: 15px !important; } }.member-section .inner .block.display-as-mobile { padding: 15px !important; } .member-section .inner .block.clear { background-color: transparent; } .member-section .inner h2 { color: white; margin-bottom: 0; } .member-section .inner h2:not(:first-of-type) { margin-top: 80px; } .member-section .inner h2.center { text-align: center; } .member-section .inner .form-link-list { height: 150px; display: -webkit-box; display: flex; margin-top: 30px; } @media screen and (max-width: 480px) { .member-section .inner .form-link-list { height: auto; } }.member-section .inner .form-link-list.display-as-mobile { height: auto; } .member-section .inner .form-link-list .form-link { -webkit-box-flex: 1; flex: 1; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; padding: 10px; margin: 0 auto; cursor: pointer; background: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); -webkit-transition: all 300ms; transition: all 300ms; -webkit-transform: perspective(200px) translateZ(-20px); transform: perspective(200px) translateZ(-20px); position: relative; z-index: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; max-width: 400px; } .member-section .inner .form-link-list .form-link a { width: 100%; height: 140px; display: block; position: relative; font-size: 24px; font-weight: 300; font-family: "bree-serif", "Source Sans Pro", sans-serif; text-align: center; margin: auto; cursor: pointer; color: black; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .member-section .inner .form-link-list .form-link a span { position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .member-section .inner .form-link-list .form-link:hover { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23); -webkit-transform: perspective(200px) translateZ(-10px); transform: perspective(200px) translateZ(-10px); z-index: 2; } .member-section .inner .form-link-list .form-link.completed { background-color: rgba(255, 255, 255, 0.5); } .member-section .inner .form-link-list .form-link.completed a { color: rgba(0, 0, 0, 0.5) !important; } .member-section .inner .form-link-list .form-link.completed a span:hover { background-color: transparent; color: rgba(0, 0, 0, 0.5) !important; } .member-section .inner .form-link-list .form-link.completed a span:after { content: ': Complete!'} .member-section .inner #login-wrap label { display: block; width: 100%; font-size: 16px; text-align: left; } .member-section .inner #login-wrap input[type='text'], .member-section .inner #login-wrap input[type='email'], .member-section .inner #login-wrap input[type='password'] { width: calc(100% - 160px); display: block; font-size: 16px; color: #000; background-color: transparent; margin: 10px 0px 0px; padding: 5px; text-align: left; height: 30px; border: 2px solid rgba(0, 0, 0, 0.3); -webkit-transition: border 400ms; transition: border 400ms; } .member-section .inner #login-wrap input[type='text']:focus, .member-section .inner #login-wrap input[type='email']:focus, .member-section .inner #login-wrap input[type='password']:focus { border: 2px solid black; outline: none !important; } .member-section .inner #login-wrap .btn-submit { margin: 10px 10px 30px 10px; } .member-section .inner #login-wrap p { clear: both; width: 100%; text-align: center; font-size: 12px; color: rgba(0, 0, 0, 0.5); } .member-section #product-timeline { position: static !important; -webkit-transform: none !important; transform: none !important; width: auto !important; height: auto !important; background: transparent !important; margin-top: 50px; overflow: visible; } .member-section #product-timeline #timeline { width: 100%; -webkit-transform: none !important; transform: none !important; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%} .member-section #product-timeline #timeline li { cursor: default !important; padding-left: 0 !important; color: #00aeef !important; } .member-section #product-timeline #timeline li .full-title { font-size: 14px !important; max-width: 130%; padding-bottom: 0 !important; } .member-section #product-timeline #timeline li ul { position: absolute; } .member-section #product-timeline #timeline li .hide { display: none; } .member-section #product-timeline #timeline li .indicator { border-color: #00aeef !important; } .member-section #product-timeline #timeline li:after { background-color: #00aeef !important; left: 20px; } .member-section #product-timeline #timeline li.included { color: white !important; border-color: white !important; } .member-section #product-timeline #timeline li.included .indicator { border-color: #fff !important; } .member-section #product-timeline #timeline li.included .indicator .inner { left: 0 !important; position: static !important; background-color: #fff !important; } .member-section #product-timeline #timeline li.included:after { background-color: #fff !important; } .member-section .side { -webkit-box-flex: 1; flex: 1; max-width: 20em; margin-left: 20px; } @media screen and (max-width: 480px) { .member-section .side { max-width: 100%} }.member-section .side.display-as-mobile { max-width: 100%} .member-section .side h2, .member-section .side h3 { color: white !important; } .member-section .side .block { background-color: rgba(0, 0, 0, 0.3); padding: 30px; } .member-section .side .block:not(:first-child) { margin-top: 20px; } .member-section .side .block.alert { background-color: rgba(255, 255, 255, 0.8); font-size: 18px; text-align: center; } .member-section .side .block.alert a { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; margin-top: 15px; } .member-section .side .block.alert a>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .member-section .side .block.alert a:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .member-section .side .block.alert a:hover .label { color: #00aeef; } .member-section .side .block.alert a:hover:after { height: 5px; } .member-section .side .block strong { font-weight: 400 !important; } .member-section .side #estimate { font-size: 28px; color: white; } .member-section .side #estimate h4 { margin-bottom: 0; font-weight: 100; font-size: 20px; line-height: 1; } .member-section section { background-color: #eee; } .member-section section .inner { margin: auto; max-width: 68em; } @media screen and (max-width: 768px) { .member-section { display: block !important; } .member-section .side { margin: 0; } .member-section .inner, .member-section .side .block { margin: 10px; padding: 30px; } .member-section #product-timeline { display: none; } .member-section .form-link-list { display: block !important; } .member-section .form-link-list li { display: block; } }.member-section.display-as-mobile { display: block !important; } .member-section.display-as-mobile .side { margin: 0; } .member-section.display-as-mobile .inner, .member-section.display-as-mobile .side .block { margin: 10px; padding: 30px; } .member-section.display-as-mobile #product-timeline { display: none; } .member-section.display-as-mobile .form-link-list { display: block !important; } .member-section.display-as-mobile .form-link-list li { display: block; } .member-section.member-form .inner { background-color: #fff; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); padding: 30px; } @media screen and (max-width: 480px) { .member-section.member-form .inner { padding: 30px !important; } }.member-section.member-form .inner.display-as-mobile { padding: 30px !important; } .member-section.member-form .inner input[type='text']::-webkit-input-placeholder, .member-section.member-form .inner input[type='email']::-webkit-input-placeholder, .member-section.member-form .inner input[type='password']::-webkit-input-placeholder { color: #a9a9a9; } .member-section.member-form .inner input[type='text']:-moz-placeholder, .member-section.member-form .inner input[type='email']:-moz-placeholder, .member-section.member-form .inner input[type='password']:-moz-placeholder { color: #a9a9a9; } .member-section.member-form .inner input[type='text']::-moz-placeholder, .member-section.member-form .inner input[type='email']::-moz-placeholder, .member-section.member-form .inner input[type='password']::-moz-placeholder { color: #a9a9a9; } .member-section.member-form .inner input[type='text']:-ms-input-placeholder, .member-section.member-form .inner input[type='email']:-ms-input-placeholder, .member-section.member-form .inner input[type='password']:-ms-input-placeholder { color: #a9a9a9; } .member-section.member-form .inner input[type='text']:focus, .member-section.member-form .inner input[type='email']:focus, .member-section.member-form .inner input[type='password']:focus { border: 1px solid #00aeef !important; } .member-section.member-form .inner input[type='text']:focus::-webkit-input-placeholder, .member-section.member-form .inner input[type='email']:focus::-webkit-input-placeholder, .member-section.member-form .inner input[type='password']:focus::-webkit-input-placeholder { color: #fff; } .member-section.member-form .inner input[type='text']:focus:-moz-placeholder, .member-section.member-form .inner input[type='email']:focus:-moz-placeholder, .member-section.member-form .inner input[type='password']:focus:-moz-placeholder { color: #fff; } .member-section.member-form .inner input[type='text']:focus::-moz-placeholder, .member-section.member-form .inner input[type='email']:focus::-moz-placeholder, .member-section.member-form .inner input[type='password']:focus::-moz-placeholder { color: #fff; } .member-section.member-form .inner input[type='text']:focus:-ms-input-placeholder, .member-section.member-form .inner input[type='email']:focus:-ms-input-placeholder, .member-section.member-form .inner input[type='password']:focus:-ms-input-placeholder { color: #fff; } .member-section.member-form .inner input:not([type='submit']) { padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(0, 0, 0, 0.24); border-radius: 5px; background: white !important; color: black !important; font-size: 16px; text-align: left; height: auto; line-height: 30px; display: block; margin-left: 0; width: 100%} .member-section.member-form .inner h2 { color: #00aeef; } .member-section.member-form .inner label { display: block; width: 100%; margin: 10px 0 0; } .member-section.member-form .inner p { color: #000; margin: 10px 0; } .member-section.member-form .inner .btn { display: inline-block; position: relative; cursor: pointer; height: 40px; line-height: 40px; min-width: 150px; text-align: center; background: none; padding: 0px 10px; margin: 20px 0; } .member-section.member-form .inner .btn>.label { font-family: "bree", "Source Sans Pro", sans-serif; text-transform: capitalize; color: #fff; border: 0; top: 0; left: 0; font-weight: 400 !important; font-size: 18px; height: 100%; width: 100%; position: relative; z-index: 10; background: none; cursor: pointer; -webkit-transition: color 500ms, font-weight 500ms; transition: color 500ms, font-weight 500ms; } .member-section.member-form .inner .btn:after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: #00aeef; border-radius: 2px; z-index: 9; cursor: pointer; -webkit-transition: height 500ms; transition: height 500ms; } .member-section.member-form .inner .btn:hover .label { color: #00aeef; } .member-section.member-form .inner .btn:hover:after { height: 5px; } .member-section.member-form .inner .success-message { color: #000; margin-left: 15px; } .member-status { display: block; padding: 0 50px 50px 50px; width: 100%; background-color: #00aeef; text-align: center; color: white; font-size: 20px; } @media screen and (max-width: 480px) { .member-status { padding: 0; } }.member-status.display-as-mobile { padding: 0; } .member-status a:hover { color: white; } #contact-sider * { padding: 0 !important; } #contact-sider #contact-list li { display: list-item; list-style: none !important; } #contact-sider #contact-list li a { color: white; } #contact-sider #contact-list li a:hover { color: #00aeef; } #contact-sider h4 { margin-top: 30px; margin-bottom: 0; } #contact-sider .chat-code { display: inline-block; margin: 30px 50px 0 50px; width: 100%; max-width: 160px; overflow: hidden; border-radius: 1000px; } #member-process #process { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } @media screen and (max-width: 480px) { #member-process #process { display: block; } #member-process #process:before { content: 'Process:'; font-family: "bree", "Source Sans Pro", sans-serif; font-size: 18px; margin: 10px 0 5px 30px; } }#member-process #process.display-as-mobile { display: block; } #member-process #process.display-as-mobile:before { content: 'Process:'; font-family: "bree", "Source Sans Pro", sans-serif; font-size: 18px; margin: 10px 0 5px 30px; } #member-process #process .process-step { border: 2px solid #00aeef; height: 120px; border-radius: 1200px; max-width: 120px; padding: 30px; display: -webkit-box; display: flex; font-weight: 400; margin: 20px; position: relative; color: #00aeef; } #member-process #process .process-step span { margin: auto; text-align: center; } #member-process #process .process-step.active { background-color: white; color: black; border-color: white; -webkit-transform: perspective(200px) translateZ(10px); transform: perspective(200px) translateZ(10px); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); } #member-process #process .process-step.finished { color: white; border-color: white; background-color: transparent; box-shadow: none; } #member-process #process .process-step:after { font-family: icomoon; content: "\72"; position: absolute; right: -30px; top: calc(50% - 15px); font-size: 26px; color: white; } #member-process #process .process-step:last-child:after { display: none; } @media screen and (max-width: 480px) { #member-process #process .process-step { display: block; height: auto; text-align: center; max-width: 100%; padding: 5px; border-radius: 0; margin: 1px 30px; } #member-process #process .process-step:after { display: none; } }#member-process #process .process-step.display-as-mobile { display: block; height: auto; text-align: center; max-width: 100%; padding: 5px; border-radius: 0; margin: 1px 30px; } #member-process #process .process-step.display-as-mobile:after { display: none; } #member-process #information { margin: 30px; } #member-process #information p { font-size: 22px; } #set-password form input, #set-password form label { display: block; width: 100%} #set-password form .btn-submit { margin: 30px auto 0; } #set-password form .success { font-size: 18px; font-weight: 400; } #set-password form input:not([type='submit']) { padding: 5px !important; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12), inset 0px 1px 2px rgba(0, 0, 0, 0.24); border-radius: 5px; background: white !important; color: black !important; font-size: 16px; text-align: left; height: 30px; } .member-message .form-paper { background-color: white; } .member-message .form-paper .close-form { color: black !important; } .member-message #messages h2 { color: #00aeef; font-size: 40px; } .member-message #messages p, .member-message #messages li { color: #fff; font-size: 22px; color: black; } .member-message #messages a { color: #00aeef; } .list-inline { padding-left: 0; list-style: none } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px }