* {
box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,F
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block;}
html,
body { height: 100%;}
a img { border: none;}
blockquote { quotes: none;}
blockquote:before,
blockquote:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
caption,
th,
td { text-align: left; font-weight: normal; vertical-align: middle;}
.contain { max-width: 1080px; margin-left: auto; margin-right: auto; padding: 0 1.50169em;}
.contain:after { content: " "; display: block; clear: both;}
@media (min-width: 75em) {
.contain { padding: 0; }
}
.contain--table { display: table; width: 100%; max-width: 1080px; margin: 0 auto;}
/* -- base -- */
/* ---------------------------------------------- * Partial: base Here you place the base defaults to any project\* ---------------------------------------------- */
*,
*:before,
*:after { box-sizing: border-box;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;}
body { color: #141414; font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; line-height: 1.6; margin: 0;}
@media (min-width: 30em) {
body { font-size: 16px; }
}
html,
body,
.page-wrapper { height: 100%; min-height: 100%;}
small { font-size: 0.85em;}
ul li { list-style: none;}
ol li { list-style: none;}
ul.disc { padding-left: 1em;}
ul.disc li { list-style-type: disc; margin-bottom: 0.5em;}
img,
object,
embed { height: auto; max-width: 100%;}
blockquote { background: #e3e3e3; color: #FFFFFF; font-size: 1.1em; font-style: italic; margin: 0 0 1.25em 1.25em; padding: 0.625em 1.25em 1.25em;}
blockquote p:last-child { margin-bottom: 0;}
button { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type="text"] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
/** LINKS **/
/* -- BASE LINK STYLES -- */
a { color: #2d4f79; cursor: pointer; text-decoration: none;}
a:hover { color: #2d4f79;}
a:focus { color: #2d4f79;}
a:focus,
a:active { outline: none;}
/* -- HEADER LINKS -- */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.h1 a,
.h2 a,
.h3 a,
.h4 a,
.h5 a,
.h6 a { color: #2d4f79;}
/**Helpers**/
.divider { margin-bottom: 0.4em;}
.divider:after { width: 4rem; height: 2px; background-color: #2d4f79; display: block; content: ""; margin: 0.4em 0;}
.divider-center:after { margin: 0.4em auto;}
.dots { background: url("../img/dot-pattern.jpg") repeat;}
.light-dots { background: url("../img/white-dot.png") repeat;}
.dark-bg { background: url("../img/dark-pattern.jpg") repeat;}
.grid { background: url("../img/grid-pattern.png") repeat #fff;}
.striped { background: url("../img/pinstripe.png") repeat;}
.black {background: #141414;}
.black h1,
.black h2,
.black h3,
.black h4,
.black h5,
.black h6,
.black p {color: #fff;}
.black p {font-family: brandon_text_light, Arial, "Helvetica Neue", Helvetica, sans-serif; color: rgba(255, 255, 255, 0.85);}
section.black { border-bottom: 3px solid #2d4f79;}
.blue {background-color: #2d4f79;}
.blue h1,
.blue h2,
.blue h3,
.blue h4,
.blue h5,
.blue h6,
.blue p { color: #fff;}
.blue .divider:after { background-color: #fff;}
.grey { background-color: #e9e9e9;}
.srt { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.white-box { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); border-radius: 1px; background-color: #fff; padding: 2.5em;}
/* -- fonts -- */
@font-face {
font-family: 'brandon_grotesque_black';
src: url("../fonts/brandon_grotesque_black.eot");
src: url("../fonts/brandon_grotesque_blackd41dd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/brandon_grotesque_black.woff") format("woff"), url("../fonts/brandon_grotesque_black.ttf") format("truetype"), url("../fonts/brandon_grotesque_black.html#brandon_grotesque_black") format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'brandon_grotesque_bold';
src: url("../fonts/brandon_grotesque_bold.woff") format("woff");font-display: swap;
}
@font-face {
font-family: 'brandon_grotesque_medium';
src: url("../fonts/brandon_grotesque_medium.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'brandon_text_regular';
src: url("../fonts/brandon_text_regular.woff") format("woff");
}
@font-face {
font-family: 'brandon_text_light';
src: url("../fonts/brandon_text_light.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'brandon_text_bold';
src: url("../fonts/brandon_text_bold.woff") format("woff");
font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 { line-height: 1.2; font-weight: normal; font-style: normal; color: #3e3d4e; margin-bottom: 0.7em; padding-top: 0.4em; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: none;}
h1 { font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2.7061em;}
@media (min-width: 30em) {
h1 { font-size: 3.04436em; }
}
h2 { font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2.40542em;}
@media (min-width: 30em) {
h2 { font-size: 2.7061em; }
}
h3 { font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2.13815em;}
@media (min-width: 30em) {
h3 { font-size: 2.40542em; }
}
h4 { font-size: 1.90058em;}
h5 { font-size: 1.68941em;}
h6 { font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.33484em;}
p { font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; line-height: 1.6; font-weight: normal; font-style: normal; margin-bottom: 0.8em; padding-top: 0.2em; color: #333;}
strong { font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif;}
/* -- nav -- */
.main-nav .menu { display: block;}
.main-nav .menu:before,
.main-nav .menu:after { content: ""; display: table;}
.main-nav .menu:after {clear: both;}
.main-nav .menu > li { position: relative; display: inline-block; margin: 0 0.25em; font-size: 14px;}
@media (min-width: 66.25em) {
.main-nav .menu > li {text-align: center; height: 100%; display: inline-block;}
.main-nav .menu > li:hover > ul {display: block; height: auto; opacity: 1;}
}
@media (min-width: 78.125em) {
.main-nav .menu > li { font-size: 16px; margin: 0 1.45em;}}
@media (min-width: 66.25em) {
.main-nav .menu > li.liLinkActive::before {content: "";display: block; position: absolute; bottom: 16px;
height: 3px; width: 100%; background-color: #2d4f79; border-radius: 10%;}}
.main-nav .menu > li a { color: #fff; display: block; font-size: 0.9375em; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; text-align: center; padding: 0 0.25em; line-height: 4; text-align: right; -webkit-transition: line-height 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3); transition: line-height 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3);}
.main-nav .menu > li a.liLinkActive,
.main-nav .menu > li a:hover { color: #2d4f79;}
.headroom--not-top .main-nav .menu > li a { line-height: 4rem;}
@media (min-width: 66.25em) {
.main-nav .menu > li a { line-height: 74px; text-align: center; }
}
.main-nav .menu > li > ul { display: none; overflow: hidden;}
@media (min-width: 66.25em) {
.main-nav .menu > li > ul { position: absolute; z-index: 100; top: 98%; left: -5px; min-width: 250px; margin: 0; background-color: rgba(0, 0, 0, 0.93); height: 0; opacity: 0; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }
.sub-menu { position: absolute; z-index: 100; top: 0; left: 100%; min-width: 250px; margin: 0; background: black !important; height: auto; display: block;}
}
.main-nav .menu > li > ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 0.75em; font-size: 14px;}
.main-nav .menu > li > ul li:hover { background-color: #000;}
.main-nav .menu > li > ul li a { text-align: left; whitespace: no-wrap; line-height: 3 !important; font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.9375em;}
.mobile-menu .nav { padding: 6.5em 0 3em; overflow: hidden; height: 100%; width: 95%;}
.mobile-menu .nav > ul { overflow-y: auto; webkit-overflow-scrolling: touch; font-size: 13px; padding: 0 2em 0 2.5em; height: 100%; width: calc(100% + 18px);}
@media (min-width: 40em) {
.mobile-menu .nav > ul { padding: 0 17% 0 17%; }
}
.mobile-menu .nav > ul > li { position: relative; -webkit-transition: -webkit-transform 400ms ease-out; transition: transform 400ms ease-out;}
.mobile-menu .nav > ul > li:nth-child(1) { -webkit-transform: translateY(70em); -ms-transform: translateY(70em); transform: translateY(70em);}
.mobile-menu .nav > ul > li:nth-child(2) { -webkit-transform: translateY(75em); -ms-transform: translateY(75em); transform: translateY(75em);}
.mobile-menu .nav > ul > li:nth-child(3) { -webkit-transform: translateY(80em); -ms-transform: translateY(80em); transform: translateY(80em);}
.mobile-menu .nav > ul > li:nth-child(4) { -webkit-transform: translateY(85em); -ms-transform: translateY(85em); transform: translateY(85em);}
.mobile-menu .nav > ul > li:nth-child(5) { -webkit-transform: translateY(90em); -ms-transform: translateY(90em); transform: translateY(90em);}
.mobile-menu .nav > ul > li:nth-child(6) { -webkit-transform: translateY(95em); -ms-transform: translateY(95em); transform: translateY(95em);}
.mobile-menu .nav > ul > li:nth-child(7) { -webkit-transform: translateY(100em); -ms-transform: translateY(100em); transform: translateY(100em);}
.mobile-menu .nav > ul > li:nth-child(8) { -webkit-transform: translateY(105em); -ms-transform: translateY(105em); transform: translateY(105em);}
.mobile-menu .nav > ul > li:nth-child(9) { -webkit-transform: translateY(110em); -ms-transform: translateY(110em); transform: translateY(110em);}
.mobile-menu .nav > ul > li:nth-child(10) { -webkit-transform: translateY(115em); -ms-transform: translateY(115em); transform: translateY(115em);}
.mobile-menu .nav > ul > li:nth-child(11) { -webkit-transform: translateY(120em); -ms-transform: translateY(120em); transform: translateY(120em);}
.mobile-menu .nav > ul > li.parent > a:after { content: ""; background-image: url("../img/down.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; width: 10px; height: 20px; margin-left: 0.5em; position: relative; display: inline-block; -webkit-transition: -webkit-transform 150ms cubic-bezier(0.13, 0.68, 0.69, 0.3); transition: transform 150ms cubic-bezier(0.13, 0.68, 0.69, 0.3); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 4px;}
.mobile-menu .nav > ul > li.parent.open { background-color: rgba(25, 33, 44, 0.95);}
.mobile-menu .nav > ul > li.parent.open > a { color: #fff;}
.mobile-menu .nav > ul > li.parent.open > a:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); top: 3px;}
.mobile-menu .nav > ul > li.parent.open > ul { display: block;}
.mobile-menu .nav > ul > li a { line-height: 2.5; display: block; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); padding: 0 0 0 0.95em; font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.33484em; padding-top: 3px;}
@media (min-width: 40em) {
.mobile-menu .nav > ul > li a { font-size: 1.50169em; line-height: 3; }
}
.mobile-menu .nav > ul > li a.open { color: #2d4f79;}
.mobile-menu .nav > ul > li a.open:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
.mobile-menu .nav > ul > li a.linkActive { color: #fff;}
.mobile-menu .nav > ul > li:hover { border-bottom-color: #2d4f79;}
.mobile-menu .nav > ul > li:hover a { color: rgba(255, 255, 255, 0.9);}
.mobile-menu .nav > ul > li:last-child { border-bottom: none; margin-top: 1.5em;}
.mobile-menu .nav > ul > li.btn-li a { line-height: 2.2; padding: 0.45em 3em; color: #fff; background-color: #2d4f79; text-align: center;}
@media (min-width: 30em) {
.mobile-menu .nav > ul > li.btn-li a { display: inline-block; margin-left: 0.95em; }
}
.mobile-menu .nav > ul > li.btn-li a:hover { background-color: #2d4f79;}
.mobile-menu .nav > ul > li ul { background-color: rgba(30, 41, 54, 0.65); padding: 0.5em 1em 0.75em; display: none; border-left: 1px solid #19212c; border-right: 1px solid #19212c;}
.mobile-menu .nav > ul > li ul li a { padding: 0.1em 0.5em; font-size: 1.05469em; line-height: 3; font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif;}
.mobile-menu .nav > ul > li ul li a:hover { color: #2d4f79;}
.show-menu .mobile-menu .nav > ul li { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
.show-menu .mobile-menu .nav > ul li:nth-child(1) { -webkit-transition-delay: 0.75s; transition-delay: 0.75s;}
.show-menu .mobile-menu .nav > ul li:nth-child(2) { -webkit-transition-delay: 0.79s; transition-delay: 0.79s;}
.show-menu .mobile-menu .nav > ul li:nth-child(3) { -webkit-transition-delay: 0.83s; transition-delay: 0.83s;}
.show-menu .mobile-menu .nav > ul li:nth-child(4) { -webkit-transition-delay: 0.87s; transition-delay: 0.87s;}
.show-menu .mobile-menu .nav > ul li:nth-child(5) { -webkit-transition-delay: 0.91s; transition-delay: 0.91s;}
.show-menu .mobile-menu .nav > ul li:nth-child(6) { -webkit-transition-delay: 0.95s; transition-delay: 0.95s;}
.show-menu .mobile-menu .nav > ul li:nth-child(7) { -webkit-transition-delay: 0.99s; transition-delay: 0.99s;}
.show-menu .mobile-menu .nav > ul li:nth-child(8) { -webkit-transition-delay: 1.03s; transition-delay: 1.03s;}
.show-menu .mobile-menu .nav > ul li:nth-child(9) { -webkit-transition-delay: 1.07s; transition-delay: 1.07s;}
.show-menu .mobile-menu .nav > ul li:nth-child(10) { -webkit-transition-delay: 1.11s; transition-delay: 1.11s;}
.show-menu .mobile-menu .nav > ul li:nth-child(11) { -webkit-transition-delay: 1.15s; transition-delay: 1.15s;}
/* ----------------------------------------- 11.0. Header----------------------------------------- */
/* * Owl Carousel - Animate Plugin */
.owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.owl-carousel .owl-animated-in { z-index: 0;}
.owl-carousel .owl-animated-out { z-index: 1;}
.owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut;}
@-webkit-keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* * Owl Carousel - Auto Height Plugin */
.owl-height { -webkit-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;}
/* * Core Owl Carousel CSS File */
.owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1;}
.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y;}
.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.owl-carousel.owl-loaded { display: block;}
.owl-carousel.owl-loading { opacity: 0; display: block;}
.owl-carousel.owl-hidden { opacity: 0;}
.owl-carousel .owl-refresh .owl-item { display: none;}
.owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d;}
.owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;}
.owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab;}
.owl-carousel.owl-rtl { direction: rtl;}
.owl-carousel.owl-rtl .owl-item { float: right;}
/* No Js */
.no-js .owl-carousel { display: block;}
/* * Owl Carousel - Lazy Load Plugin */
.owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease;}
.owl-carousel .owl-item img { -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
/* * Owl Carousel - Video Plugin */
.owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000;}
.owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.html") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; transition: scale 100ms ease;}
.owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3);}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon { display: none;}
.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease;}
.owl-carousel .owl-video-frame { position: relative; z-index: 1;}
.owl-dots { display: block; margin: 1.5em auto 0; text-align: center;}
.owl-dots .owl-dot span { height: 0.75em; width: 0.75em; display: block; background-color: rgba(4, 4, 4, 0.2); border-radius: 50%;}
.owl-dots .owl-dot:hover span { background-color: #2d4f79;}
.owl-dot { display: inline-block; margin: 0 0.3em;}
.owl-dot.active span { background-color: #2d4f79;}
.owl-dot.active:hover span { background-color: #2d4f79;}
/**********************************Bootstrap Modal**********************************/
.close { font-size: 21px; font-weight: bold; line-height: 1; color: #000000; opacity: 0.2;}
.close:hover,
.close:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.5;}
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;}
.modal-open { overflow: hidden;}
@-webkit-keyframes modalin {
0% { -webkit-transform: scale(0); transform: scale(0); opaacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); opaacity: 1; }
}
@keyframes modalin {
0% { -webkit-transform: scale(0); transform: scale(0); opaacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); opaacity: 1; }
}
.modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0;}
.modal-open .modal { overflow-x: hidden; overflow-y: auto;}
.modal-dialog { position: relative; width: auto; margin: 10px;}
.modal-content { position: relative; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: 0;}
.modal-backdrop {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000;}
.modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0);}
.modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50);}
.modal-header { padding: 15px; border-bottom: 1px solid #e5e5e5; min-height: 16.42857143px;}
.modal-header .close { margin-top: -2px;}
.modal-title { margin: 0; line-height: 1.42857143;}
.modal-body { position: relative; padding: 15px;}
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5;}
.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0;}
.modal-footer .btn-group .btn + .btn { margin-left: -1px;}
.modal-footer .btn-block + .btn-block { margin-left: 0;}
.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll;}
@media (min-width: 768px) {
.modal-dialog { width: 600px; margin: 30px auto; }
.modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.modal-sm { width: 300px; }
}
@media (min-width: 992px) {
.modal-lg { width: 900px; }
}
.clearfix:before,
.clearfix:after,
.modal-footer:before,
.modal-footer:after { content: " "; display: table;}
.clearfix:after,
.modal-footer:after { clear: both;}
.center-block { display: block; margin-left: auto; margin-right: auto;}
.pull-right { float: right !important;}
.pull-left { float: left !important;}
.hide { display: none !important;}
.show { display: block !important;}
.invisible { visibility: hidden;}
.text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;}
.hidden { display: none !important;}
.affix { position: fixed;}
@-webkit-keyframes slideUp {
100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
@keyframes slideUp {
100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
@-webkit-keyframes slideDown {
0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideDown {
0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
header { z-index: 100; width: 100%; background:rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; right: 0; height: 4rem; -webkit-transition: all 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3); transition: all 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3);padding: 15px 0;}
@media (min-width: 66.25em) {
header { height: auto;}}
header.headroom--not-top { position: fixed; height: 3.6rem; background-color: rgba(0, 0, 0, 0.85);}
@media (min-width: 66.25em) {
header.headroom--not-top {height: auto;padding: 5px 0; }
}
.show-menu header.headroom--not-top {height: 3.6rem;}
.show-menu header.headroom--top {height: 4rem;}
@media (min-width: 66.25em) {
.show-menu header.headroom--top {height: 5.875rem;}}
.slideUp { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%);}
.show-menu .slideUp { -webkit-animation: none; animation: none; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
.slideDown { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3); transition: all 350ms cubic-bezier(0.13, 0.68, 0.69, 0.3);}
.show-menu .slideDown { -webkit-animation: none; animation: none; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
.header-wrap {height: 100%; position: relative;}
.header-wrap:before,
.header-wrap:after { content: ""; display: table;}
.header-wrap:after {clear: both;}
.logo { width: 50%; padding: 1.5em 0 1.5em 1.5em; max-width: 100%; position: relative; top: 50%; float: left; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height: 0; text-align: left;}
@media (min-width: 66.25em) {
.logo { width: 16.66667%; float: left; display: none; }
}
.logo img { max-width: 9em;}
.main-nav { height: 100%; position: relative; display: none; -webkit-transition: -webkit-transform 500ms ease-in-out; transition: transform 500ms ease-in-out;}
@media (min-width: 66.25em) {
.main-nav { width: 100%; float: right; margin-right: 0; padding-right: 0; background: transparent; position: relative; -webkit-transform: none; -ms-transform: none; transform: none; display: block; }
}
@media (min-width: 66.25em) {
.nav { padding: 0; width: auto; display: block; text-align: center;}
}
/***************************************************************************Mobile Nav***************************************************************************/
.burger { width: 4em; height: 4em; display: inline-block; position: relative; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; top: -2em; right: 2em; -webkit-transition-timing-function: cubic-bezier(0.61, 0.04, 0.17, 1.32); transition-timing-function: cubic-bezier(0.61, 0.04, 0.17, 1.32);}
.burger .middle { left: -0.25em; top: 50%; width: 4.5em; height: 0.5em; position: absolute; margin-top: -0.25em; display: inline-block; border-radius: 0.5em; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; background: #fff;}
.burger:after,
.burger:before { content: ""; width: 4.5em; height: 0.5em; left: -0.25em; position: absolute; border-radius: 0.5em; background: #fff; -webkit-transform-origin: 50%, 50%, 0; -ms-transform-origin: 50%, 50%, 0; transform-origin: 50%, 50%, 0; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.burger:after { bottom: 0;}
.burger:before { top: 0;}
.menu-btn { font-size: 0.5em; width: 4em; height: 4em; line-height: 1em; padding: 4em; margin: 0 auto 0.6em; display: inline-block; position: absolute; border-radius: 50%; background-color: transparent; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; right: 2em; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
@media (min-width: 66.25em) {
.menu-btn { display: none; }
}
.menu-btn.active,
.show-menu .menu-btn { cursor: pointer;}
.menu-btn.active:before,
.show-menu .menu-btn:before { -webkit-animation: pointer-ball 300ms ease 1; animation: pointer-ball 300ms ease 1; -webkit-animation-timing-function: cubic-bezier(0.61, 0.04, 0.17, 1.32); animation-timing-function: cubic-bezier(0.61, 0.04, 0.17, 1.32);}
.menu-btn.active .burger,
.show-menu .menu-btn .burger { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg);}
.menu-btn.active .burger.arrow .middle,
.menu-btn.active .burger.arrow:after,
.menu-btn.active .burger.arrow:before,
.show-menu .menu-btn .burger.arrow .middle,
.show-menu .menu-btn .burger.arrow:after,
.show-menu .menu-btn .burger.arrow:before { background: white;}
.menu-btn.active .burger.arrow .middle,
.show-menu .menu-btn .burger.arrow .middle { opacity: 1; left: -0.4em; top: 51%;}
.menu-btn.active .burger.arrow:after,
.show-menu .menu-btn .burger.arrow:after { bottom: 0.65em; width: 3em; height: 0.55em; -webkit-transform: translateX(1.7em) rotate(135deg); -ms-transform: translateX(1.7em) rotate(135deg); transform: translateX(1.7em) rotate(135deg);}
.menu-btn.active .burger.arrow:before,
.show-menu .menu-btn .burger.arrow:before { top: 0.65em; width: 3em; height: 0.55em; -webkit-transform: translateX(1.7em) rotate(-135deg); -ms-transform: translateX(1.7em) rotate(-135deg); transform: translateX(1.7em) rotate(-135deg);}
.menu-btn.active .burger.arrow.left,
.show-menu .menu-btn .burger.arrow.left { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg);}
.menu-btn.active .burger.arrow.left:after,
.show-menu .menu-btn .burger.arrow.left:after { -webkit-transform: translateX(-0.2em) rotate(45deg); -ms-transform: translateX(-0.2em) rotate(45deg); transform: translateX(-0.2em) rotate(45deg);}
.menu-btn.active .burger.arrow.left:before,
.show-menu .menu-btn .burger.arrow.left:before { -webkit-transform: translateX(-0.2em) rotate(-45deg); -ms-transform: translateX(-0.2em) rotate(-45deg); transform: translateX(-0.2em) rotate(-45deg);}
@-webkit-keyframes pointer-ball {
0%,
100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
80% { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); }
100% { opacity: 0; }
}
@keyframes pointer-ball {
0%,
100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
80% { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); }
100% { opacity: 0; }
}
.mobile-menu { position: fixed; z-index: 99; top: 0; left: 0; height: 100%; width: 100%; background-color: #000; -webkit-transition: -webkit-transform 750ms cubic-bezier(0.82, 0.01, 0.77, 0.78); transition: transform 750ms cubic-bezier(0.82, 0.01, 0.77, 0.78); -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); display: block;}
@media (min-width: 66.25em) {
.mobile-menu { display: none; }
}
.show-menu .mobile-menu { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
/***************************************LOGIN STYLES***************************************/
.modal { background-color: rgba(0, 0, 0, 0.5);}
.modal .in .modal-dialog { -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%);}
.modal form { max-width: 28em; margin: auto;}
.modal-dialog { margin-top: 1em;}
@media (min-width: 30em) {
.modal-dialog { margin-top: 3em; }
}
.modal-open .modal-dialog { -webkit-animation: modalin 400ms ease-in; animation: modalin 400ms ease-in;}
.modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); border-radius: 1px; background-color: #fff; border-bottom: 8px solid #2d4f79;}
.modal-body { padding: 1em 1.5em; text-align: center;}
@media (min-width: 30em) {
.modal-body { padding: 2em 2.5em; }
}
.modal-body h1 { color: #111; margin-bottom: 0; line-height: 1.1;}
.modal-body h3 { color: #111; margin-bottom: 0.5em; line-height: 1.1;}
.modal-body p { color: #888; text-transform: uppercase;}
.modal-body a { color: #888; text-transform: none;}
.modal-body a:hover { color: #2d4f79;}
.close { color: #333; font-size: 2em; position: absolute; right: 0.5em; top: 0.5em;}
/* ----------------------------------------- 12.0. Content----------------------------------------- */
.hero.home-hero.cont { height:auto;}
.hero.inner-hero { height: auto;}
.hero.home-hero.cont.service{ height: 100%;}
.hero.full { height: 100%;}
.hero.inner-hero .hero-content,
.hero.med-hero .hero-content,
.hero.short-hero .hero-content { padding: 12em 0 8em;}
@media (min-width: 48em) {
.hero.inner-hero .hero-content,
.hero.med-hero .hero-content,
.hero.short-hero .hero-content { padding: 12em 0 8em; }
}
@media (min-width: 75em) {
.hero.inner-hero .hero-content,
.hero.med-hero .hero-content,
.hero.short-hero .hero-content { padding: 14em 0 10em; }
}
.hero .hero-title h1 { font-size: 2.7061em; line-height: 1; margin: 0; margin-bottom: 0.1em; padding-top: 0;}
.hero .hero-title strong { font-size: 2.7061em; line-height: 1; margin: 0; margin-bottom: 0.1em; padding-top: 0;}
@media (min-width: 30em) {
.hero .hero-title h1 { font-size: 3.04436em;}
.hero .hero-title strong { font-size: 3.04436em;}
}
@media (min-width: 48em) {
.hero .hero-title h1 { font-size: 3.42491em; }
.hero .hero-title strong { font-size: 3.42491em; }
}
@media (min-width: 66.25em) {
.hero-content .hero-title h1 { font-size: 66px; line-height: 85px; }
.hero-content .hero-title strong { font-size: 66px; line-height: 85px; }
}
.hero .hero-title.small-hero h1 { font-size: 2.7061em;}
@media (min-width: 30em) {
.hero .hero-title.small-hero h1 { font-size: 3.04436em; }
}
@media (min-width: 48em) {
.hero .hero-title.small-hero h1 { font-size: 4.33465em; }
}
@media (min-width: 66.25em) {
.hero .hero-title.small-hero h1 { font-size: 4.87648em; }
}
.extras__hero .hero-content .button { font-size: 14px; margin: 0.5em 0.2em 0.1em;}
@media (min-width: 30em) {
.extras__hero .hero-content .button { margin: 1.5em 0.2em 1em; font-size: 16px; }
}
@media (min-width: 30em) {
.inner-intro { text-align: center; }
}
.inner-intro .divider-center:after { margin: 0.4em 0;}
@media (min-width: 30em) {
.inner-intro .divider-center:after { margin: 0.4em auto; }
}
.inner-intro h2 { padding-top: 0; font-family: 'ralewaybold'; font-size: 55px;}
.section-title { text-align: center; margin-bottom: 2em;}
.section-title h6 { font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: none;}
.split-section { padding: 0;}
.split-section:before,
.split-section:after { content: ""; display: table;}
.split-section:after { clear: both;}
@media (min-width: 50em) {
.split-section { border-bottom: 1px solid #ccc; }
}
@media (min-width: 57.5em) {
.split-section { border-bottom: none; }
}
.split-image { padding-bottom: 75%; height: 0; z-index: 1; background-size: cover; background-repeat: no-repeat; background-color: #fff; background-position: center;}
@media (min-width: 43.75em) {
.split-image { padding-bottom: 65%; }
}
@media (min-width: 50em) {
.split-image { background-position: center; padding-bottom: 65%; }
.split-image.split-image__right { width: 33.33333%; float: right; margin-right: 0; }
.split-image.split-image__left { width: 33.33333%; float: left; }
}
@media (min-width: 57.5em) {
.split-image.split-image__right { width: 50%; float: right; margin-right: 0; }
.split-image.split-image__left { width: 50%; float: left; }
}
@media (min-width: 75em) {
.split-image { padding-bottom: 50%; }
}
@media (min-width: 87.5em) {
.split-image { padding-bottom: 48%; }
}
.split-copy { position: relative; z-index: 5;}
.split-copy.blue { background: url("../img/white-dot.png") repeat #2d4f79;}
@media (min-width: 50em) {
.split-copy { padding-bottom: 65%; height: 0; }
.split-copy.split-copy__right { width: 66.66667%; float: right; margin-right: 0; }
.split-copy.split-copy__left { width: 66.66667%; float: left; }
.split-copy__inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; }
}
@media (min-width: 57.5em) {
.split-copy.split-copy__right { width: 50%; float: right; margin-right: 0; }
.split-copy.split-copy__left { width: 50%; float: left; }
}
@media (min-width: 75em) {
.split-copy { padding-bottom: 50%; }
}
@media (min-width: 87.5em) {
.split-copy { padding-bottom: 48%; }
}
.split-copy .content-wrap { max-width: 85%; margin: auto; position: relative; padding: 2em 0;}
@media (min-width: 50em) {
.split-copy .content-wrap { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
}
@media (min-width: 57.5em) {
.split-copy .content-wrap { max-width: 75%; }
}
.split-copy p { font-size: 1.05469em;}
@media (min-width: 93.75em) {
.split-copy p { font-size: 1.18652em; }
}
.split-copy:after,
.split-copy__cell:after,
.reverse-sec .split-copy__cell:after { border: 25px transparent solid; border-bottom-color: #fff; position: absolute; top: -50px; left: 50%; display: block; content: ""; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
@media (min-width: 50em) {
.split-copy:after,
.split-copy__cell:after,
.reverse-sec .split-copy__cell:after { -webkit-transform: none; -ms-transform: none; transform: none; border-bottom-color: transparent; border-left-color: #fff; left: auto; top: 50%; right: -50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
}
@media (min-width: 50em) {
.split-copy__right:after,
.split-copy__cell:after { -webkit-transform: none; -ms-transform: none; transform: none; border-color: transparent; border-right-color: #fff; right: auto; top: 50%; left: -50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
}
.split-copy__left.blue:after,
.split-copy__cell.blue:after { border-bottom-color: #2d4f79;}
@media (min-width: 50em) {
.split-copy__left.blue:after,
.split-copy__cell.blue:after { border-color: transparent; border-left-color: #2d4f79; }
}
.split-copy__right.blue:after,
.split-copy__cell.blue:after { border-bottom-color: #2d4f79;}
@media (min-width: 50em) {
.split-copy__right.blue:after,
.split-copy__cell.blue:after { border-bottom-color: transparent; border-right-color: #2d4f79; }
}
.split-copy__cell.grey:after,
.split-copy__right.grey:after { border-bottom-color: #e9e9e9;}
@media (min-width: 50em) {
.split-copy__cell.grey:after,
.split-copy__right.grey:after { border-bottom-color: transparent; border-right-color: #e9e9e9; }
}
.split-copy__left.grey:after { border-bottom-color: #e9e9e9;}
@media (min-width: 50em) {
.split-copy__left.grey:after { border-color: transparent; border-left-color: #e9e9e9; }
}
.split-copy__cell.black:after,
.split-copy__right.black:after { border-bottom-color: #141414;}
@media (min-width: 50em) {
.split-copy__cell.black:after,
.split-copy__right.black:after { border-bottom-color: transparent; border-right-color: #141414; }
}
.split-copy__left.black:after { border-bottom-color: #141414;}
@media (min-width: 50em) {
.split-copy__left.black:after { border-color: transparent; border-left-color: #141414; }
}
@media (min-width: 50em) {
.split-copy__cell,
.split-image__cell { padding: 4.5em; display: table-cell; width: 50%; }
}
.split-copy__cell p,
.split-image__cell p { font-size: 1.05469em;}
.split-image__cell { height: 20em;}
@media (min-width: 50em) {
.split-image__cell { height: auto; }
}
.split-copy__cell { padding: 3em; position: relative;}
.split-copy__cell .content-wrap { display: inline-block;}
@media (min-width: 62.5em) {
.split-copy__cell { padding: 5.5em; }
}
@media (min-width: 50em) {
.reverse-sec .split-image__cell { left: 50%; position: relative; }
}
@media (min-width: 50em) {
.reverse-sec .split-copy__cell { right: 50%; position: relative; }
}
.main-content { border-bottom: 1px solid #ccc;}
.main-content .disc { padding-left: 1.5em; margin: 2em 0;}
.main-content .disc li { font-size: 1.18652em;}
.narrow-content-wrap { max-width: 100%; margin: auto; width: 100%;margin-top: 20px;}
.section-title { text-align: center; margin-bottom: 2em;}
.narrow-content-wrap:before,
.narrow-content-wrap:after { content: ""; display: table;}
.narrow-content-wrap:after { clear: both;}
.main-content-wrap { max-width: 72em; margin: auto; width: 92%;}
.main-content-wrap:before,
.main-content-wrap:after { content: ""; display: table;}
.main-content-wrap:after { clear: both;}
.defaultForm .form_submit { width: 150px; margin: 0 auto;}
/*************************************************************************************About History*************************************************************************************/
.history-sec .split-copy__cell,
.history-sec .split-image__cell { display: block; width: 100%;}
@media (min-width: 50em) {
.history-sec .split-copy__cell,
.history-sec .split-image__cell { left: auto; right: auto; }
}
@media (min-width: 62.5em) {
.history-sec .split-copy__cell,
.history-sec .split-image__cell { padding: 3.5em; display: table-cell; width: 50%; }
}
@media (min-width: 40em) {
.history-sec .split-image__cell { height: 25em; }
}
@media (min-width: 62.5em) {
.history-sec .split-image__cell { height: auto; left: 50%; }
}
@media (min-width: 62.5em) {
.history-sec .split-copy__cell { padding: 3.5em 2.25em; right: 50%; }
}
@media (min-width: 78.125em) {
.history-sec .split-copy__cell { padding: 5.5em; }
}
@media (min-width: 93.75em) {
.history-sec .split-copy__cell { padding: 7em 5.5em; }
}
@media (min-width: 62.5em) {
.about-value-sec .split-copy__cell { padding: 3.5em 2.25em; }
}
@media (min-width: 78.125em) {
.about-value-sec .split-copy__cell { padding: 5.5em; }
}
@media (min-width: 93.75em) {
.about-value-sec .split-copy__cell { padding: 7em 5.5em; }
}
/***************************************************************************Package Pages***************************************************************************/
.hero-title.small-hero h1 { font-size: 2.40542em;}
@media (min-width: 30em) {
.hero-title.small-hero h1 { font-size: 3.04436em; }
}
@media (min-width: 48em) {
.hero-title.small-hero h1 { font-size: 3.42491em; }
}
@media (min-width: 66.25em) {
.hero-title.small-hero h1 { font-size: 4.33465em; }
}
.hero.inner-hero.package-hero { height: auto;}
@media (min-width: 62.5em) {
.hero.inner-hero.package-hero { height: auto; }
}
.package-details h2,
.package-details h6,
.package-details .button,
.package-details .solid-button { -webkit-animation: textin 550ms ease-in both; animation: textin 550ms ease-in both;}
.package-details h2 { -webkit-animation-delay: 1s; animation-delay: 1s; margin-bottom: 0; color: #fff; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 2.13815em;}
@media (min-width: 30em) {
.package-details h2 { font-size: 2.40542em; }
}
@media (min-width: 48em) {
.package-details h2 { font-size: 2.7061em; }
}
@media (min-width: 66.25em) {
.package-details h2 { font-size: 3.42491em; }
}
.package-details .button:nth-child(1),
.package-details .solid-button:nth-child(1) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s;}
.package-details .button:nth-child(2),
.package-details .solid-button:nth-child(2) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s;}
.package-details .button-text { padding: 0.65em 1em;}
@media (min-width: 30em) {
.package-details .button-text { padding: 1em 2em; }
}
.package-examples .project-item:nth-child(1),
.package-examples .project-item:nth-child(2),
.package-examples .project-item:nth-child(3),
.package-examples .project-item:nth-child(4) { width: 100%;}
.package-examples .project-item:nth-child(1) .project-item__inner,
.package-examples .project-item:nth-child(2) .project-item__inner,
.package-examples .project-item:nth-child(3) .project-item__inner,
.package-examples .project-item:nth-child(4) .project-item__inner { padding-top: 100%;}
@media (min-width: 30em) {
.package-examples .project-item:nth-child(1),
.package-examples .project-item:nth-child(2),
.package-examples .project-item:nth-child(3),
.package-examples .project-item:nth-child(4) {
width: 50%; }
}
@media (min-width: 60em) {
.package-examples .project-item:nth-child(1),
.package-examples .project-item:nth-child(2),
.package-examples .project-item:nth-child(3),
.package-examples .project-item:nth-child(4) { width: 50%; }
}
@media (min-width: 78.125em) {
.package-examples .project-item:nth-child(1),
.package-examples .project-item:nth-child(2),
.package-examples .project-item:nth-child(3),
.package-examples .project-item:nth-child(4) { width: 25%; font-size: 14px; }
}
@media (min-width: 93.75em) {
.package-examples .project-item:nth-child(1),
.package-examples .project-item:nth-child(2),
.package-examples .project-item:nth-child(3),
.package-examples .project-item:nth-child(4) { font-size: 16px; }
}
@media (min-width: 30em) {
.package-examples .project-item:nth-child(1) p,
.package-examples .project-item:nth-child(2) p,
.package-examples .project-item:nth-child(3) p,
.package-examples .project-item:nth-child(4) p { display: none; }
}
@media (min-width: 40em) {
.package-examples .project-item:nth-child(1) p,
.package-examples .project-item:nth-child(2) p,
.package-examples .project-item:nth-child(3) p,
.package-examples .project-item:nth-child(4) p { display: block; }
}
@media (min-width: 60em) {
.package-examples .project-item:nth-child(1) p,
.package-examples .project-item:nth-child(2) p,
.package-examples .project-item:nth-child(3) p,
.package-examples .project-item:nth-child(4) p { display: block; }
}
.feature-list { text-align: center;}
.feature-list:before,
.feature-list:after { content: ""; display: table;}
.feature-list:after { clear: both;}
@media (min-width: 40em) {
.feature-list { text-align: left; }
}
.feature-list li { margin: 3em 0; position: relative;}
@media (min-width: 40em) {
.feature-list li { padding-left: 6em; }
}
@media (min-width: 48em) {
.feature-list li { float: left; width: 50%; padding-right: 2em; margin: 2em 0; }
}
.feature-list li:before { content: ""; width: 3em; height: 3em; display: inline-block; margin-bottom: 0.5em; background-position: center top; background-repeat: no-repeat; background-size: contain;}
@media (min-width: 40em) {
.feature-list li:before { position: absolute; left: 0.5em; top: 0; margin-bottom: 0; }
}
.feature-list h6, .feature-list strong { margin-bottom: 0.25em; text-transform: capitalize; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; display: block; padding-top: 0;font-size: 25px;color: #fff;}
.feature-list p { font-size: 1.05469em; margin-bottom: 0; line-height: 1.4;}
@media (min-width: 40em) {
.feature-list.no-text li::before { display: inline-block; position: relative; margin-left: -6em; margin-right: 2em; vertical-align: middle; }
.feature-list.no-text h6 { display: inline-block; vertical-align: middle; margin-bottom: 0; }
}
.buy-buttons { text-align: center; padding: 9em 0;}
.buy-buttons h4 { font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif;}
/*//////////////////////////////////////Logo Gallery/////////////////////////////////////*/
.logo-gallery { padding: 0;}
.logo-gallery .project-item { width: 100%;}
@media (min-width: 30em) {
.logo-gallery .project-item { width: 50%; }
}
@media (min-width: 60em) {
.logo-gallery .project-item { width: 25%; font-size: 14px; }
.logo-gallery .project-item:nth-child(4),
.logo-gallery .project-item:nth-child(5),
.logo-gallery .project-item:nth-child(6) { width: 33.333%; }
}
@media (min-width: 93.75em) {
.logo-gallery .project-item { font-size: 16px; }
}
.logo-gallery .project-item:hover .hover-content { opacity: 1; -webkit-transition: opacity 700ms ease; transition: opacity 700ms ease;}
.logo-gallery .project-item__inner { padding-top: 100%; text-align: center;}
.logo-gallery .button { font-size: 10px;}
/*//////////////////////////////////////SEO/////////////////////////////////////*/
.seo-reporting { text-align: center;}
.seo-reporting img { margin-bottom: 2em;}
@media (min-width: 75em) {
.split-section--seo .split-copy__cell { padding: 8em 5.5em; }
}
.table-section { padding: 3.5em 0.5em;}
.table-section table { border-collapse: collapse; margin: auto; font-size: 13px; width: 100%;}
@media (min-width: 40em) {
.table-section table { table-layout: fixed; font-size: 16px; }
}
.table-section th { font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; font-size: 1.33484em; text-transform: uppercase; padding: 0.5em; border: 1px solid #2d4f79; line-height: 1; background-color: #2d4f79; background-image: -webkit-linear-gradient(#2d4f79, #017ba9); background-image: linear-gradient(#2d4f79, #017ba9); color: #fff;}
@media (min-width: 40em) {
.table-section th { font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; padding: 1.3em 2em 1.2em; }
}
.table-section tr .pro-price { font-size: 1.33484em; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif;}
.table-section td { padding: 0.5em; font-size: 1.05469em; font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; background-color: #fff; text-align: center; border: 1px solid #ddd; line-height: 1;}
@media (min-width: 40em) {
.table-section td { padding: 1.2em 2em; }
}
.table-section svg { color: #2d4f79; height: 1.5em; width: 1.5em;}
.table-section svg.tick-icon { fill: #2d4f79;}
.table-section svg.cross-icon { fill: #444;}
.seo-prices th:first-child { border: none; background-color: transparent; background-image: none;}
.seo-prices tr td:nth-child(1) { text-align: left; font-family: brandon_text_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.18652em; background-color: #fff; border-color: #ccc;}
.seo-prices .button { margin: 0;}
.seo-prices .button .button-text { font-size: 0.83333em; padding: 0.5em;}
@media (min-width: 25em) {
.seo-prices .button .button-text { padding: 0.75em 1.5em; }
}
.seo-reporting { position: relative; padding-left: 0; padding-right: 0;}
.seo-reporting svg { position: absolute; top: 3em; left: 0; width: 100%; z-index: 1;}
.seo-reporting.inviewport .graph-line { stroke-dashoffset: 0;}
.seo-reporting .narrow-content-wrap { z-index: 5; position: relative;}
.process-section { border-bottom: 1px solid #d4d4d4;}
@media (min-width: 50em) {
.process-section .split-image.split-image__right { width: 50%; float: right; margin-right: 0; }
.process-section .split-image.split-image__left { width: 50%; float: left; }
}
@media (min-width: 50em) {
.process-section .split-copy.split-copy__right { width: 50%; float: right; margin-right: 0; }
.process-section .split-copy.split-copy__left { width: 50%; float: left; }
}
.process-section .process-icon { height: 2.4em; width: 2.4em; fill: #222; float: left; margin-right: 0.75em; position: relative; z-index: 2;}
.process-section .divider { position: relative; z-index: 2;}
.process-section h3 { padding-top: 0;}
.process-section.process-support .process-icon { height: 2.8em; width: 2.8em;}
.process-section .content-wrap { padding: 4em 0.5em;}
.process-section .content-wrap:after { content: "0" counter(process-section); font-size: 10em; opacity: 0.08; color: #9b9b9b; font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; position: absolute; top: -7%; left: -7%; z-index: 1; letter-spacing: -5px;}
@media (min-width: 62.5em) {
.process-section .content-wrap:after { font-size: 12em; top: -10%; left: -10%; }
}
.process-signup .split-image { background-image: url("../img/process-signup-img.jpg");}
.process-research .split-image { background-image: url("../img/process-research-img.jpg");}
.process-design .split-image { background-image: url("../img/bespoke-design.jpg");}
.process-build .split-image { background-image: url("../img/process-build-img.jpg");}
.process-launch .split-image { background-image: url("../img/somerset-house-cs.jpg");}
.process-support .split-image { background-image: url("../img/cms-edit.jpg");}
/*//////////////////////////////////////Contact Page/////////////////////////////////////*/
.contact-info,
.career-info { text-align: center;}
@media (min-width: 50em) {
.contact-info,
.career-info { text-align: left; }
}
@media (min-width: 50em) {
.contact-info .divider-center:after,
.career-info .divider-center:after { margin: 0.4em 0; }
}
.contact-info .contact-icon { position: relative;}
@media (min-width: 50em) {
.contact-info .contact-icon { margin-left: 2em; }
}
.contact-info .contact-icon:before { height: 1.75em; width: 1.75em; display: block; content: ""; margin: auto; margin-bottom: 0.25em; background-size: contain; background-repeat: no-repeat;}
@media (min-width: 50em) {
.contact-info .contact-icon:before { height: 1.5em; width: 1.5em; position: absolute; left: -2em; top: 2px; }
}
.contact-info .address:before { background-image: url("../img/svg/address-blue-solid.svg");}
.contact-info .phone:before { background-image: url("../img/svg/phone-blue-solid.svg");}
.contact-info .email:before { top: 0.3em; background-image: url("../img/svg/mail-blue-solid.svg");}
.contact-wrap .contact-info { padding: 1.5em 0;}
.socio{ display: inline-flex;}
.socio li { margin: 0 15px 0 5px;}
.custom-dev__carousel { padding-top: 3em;}
.custom-dev__carousel .owl-stage-outer { box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.3), 0 4px 12px 0 rgba(0, 0, 0, 0.3);}
.custom-dev__carousel .owl-prev,
.custom-dev__carousel .owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 3em; width: 2em; opacity: 0.4; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;}
@media (min-width: 50em) {
.custom-dev__carousel .owl-prev,
.custom-dev__carousel .owl-next { height: 3em; }
}
@media (min-width: 66.25em) {
.custom-dev__carousel .owl-prev,
.custom-dev__carousel .owl-next { height: 4em; }
}
.custom-dev__carousel .owl-prev:hover,
.custom-dev__carousel .owl-next:hover { opacity: 0.85;}
.custom-dev__carousel .owl-prev { left: -2em; top: 50%; background-image: url("../img/svg/left-black.svg");}
@media (min-width: 50em) {
.custom-dev__carousel .owl-prev { left: -2.5em; }
}
@media (min-width: 66.25em) {
.custom-dev__carousel .owl-prev { left: -3.5em; }
}
.custom-dev__carousel .owl-next { right: -2em; top: 50%; background-image: url("../img/svg/right-black.svg");}
@media (min-width: 50em) {
.custom-dev__carousel .owl-next { right: -2.5em; }
}
@media (min-width: 66.25em) {
.custom-dev__carousel .owl-next { right: -3.5em; }
}
.black .custom-dev__carousel .owl-prev { background-image: url("../img/svg/left-white.svg");}
.black .custom-dev__carousel .owl-next { background-image: url("../img/svg/right-white.svg");}
.custom-dev__carousel .owl-dots .owl-dot span { background-color: #999;}
.custom-dev__carousel .owl-dots .owl-dot span:hover { background-color: #ccc;}
.custom-dev__carousel .owl-dot.active span { background-color: #2d4f79;}
.custom-dev__carousel .owl-dot.active span:hover { background-color: #2d4f79;}
/* ---------------------------------------------- * Partial: buttons This is a work-in-progress. Please deploy your own method or use my exaple below. \* ---------------------------------------------- */
.button { margin: 1em 0.2em; display: inline-block;}
.button .button-text { display: inline-block; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.18652em; color: #111; text-transform: uppercase; line-height: 1; padding: 1em 2em; -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); text-align: center;}
.border-button .button-text { background: transparent; border: 3px solid #111;}
.border-button.white-button .button-text { border-color: #fff; color: #fff;}
.project-started .border-button.white-button .button-text { border-color: #fff; color: #111; background-color: #fff;}
.border-button.white-button a:hover .button-text { background-color: #fff; color: #111;}
.border-button.white-button a:hover i { background-color: #fff;}
.border-button.white-button a:hover i svg { fill: #111;}
.border-button.arrow-button { display: inline-block; font-size: 15px;}
.border-button.arrow-button .button-text { position: relative; height: 3.2em; float: left;}
.border-button.arrow-button.white-button i { border-color: #fff;}
.border-button.arrow-button.white-button i svg { fill: #fff;}
.border-button.arrow-button i { display: inline-block; border: 3px solid #111; background: transparent; border-left: none; height: 3.2em; width: 3.2em; float: right; font-size: 1.18652em; -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);}
.border-button.arrow-button i svg { fill: #111; height: 1.2em; width: 1.2em; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.border-button a:hover .button-text { background-color: #111; color: #fff;}
.border-button a:hover i { background-color: #111;}
.border-button a:hover i svg { fill: #fff;}
.solid-button .button-text { background: #333; border: 3px solid #333; color: #fff;}
.solid-button:hover .button-text { background: #111; border-color: #111;}
.solid-button.white-button .button-text { background-color: #fff; color: #111; border-color: #fff;}
.solid-button.white-button .button-text:hover { background-color: #2d4f79; border-color: #2d4f79; color: #fff;}
.solid-button.blue-button .button-text { background-color: #2d4f79; color: #fff; border-color: #2d4f79;}
.solid-button.blue-button .button-text:hover { background-color: #fff; border-color: #fff; color: #333;}
.process .how-we-title { font-size: 45px; display: block; line-height: 1.2;}
.feature-title { color: #fff; font-size: 40px; display: block; font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif;}
/* ----------------------------------------- 13.0. Footer----------------------------------------- */
@-webkit-keyframes spring {
25% { -webkit-transform: scale(0.8); transform: scale(0.8); }
50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
75% { -webkit-transform: scale(0.9); transform: scale(0.9); }
85% { -webkit-transform: scale(1.03); transform: scale(1.03); }
95% { -webkit-transform: scale(0.95); transform: scale(0.95); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes spring {
25% { -webkit-transform: scale(0.8); transform: scale(0.8); }
50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
75% { -webkit-transform: scale(0.9); transform: scale(0.9); }
85% { -webkit-transform: scale(1.03); transform: scale(1.03); }
95% { -webkit-transform: scale(0.95); transform: scale(0.95); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
/* ----------------------------------------- 14.0. Extras----------------------------------------- */
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="email"],
input[type="tel"],
textarea,
select,
button[type="submit"] { border-radius: 0; padding: 1em; border: 1px solid #d4d7da; margin: 0.4em 0; -webkit-appearance: none;}
input,
textarea,
select,
button { outline: none; resize: none; font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; width: 100%; line-height: 1; font-size: 0.9375em;}
input:focus,
textarea:focus,
select:focus,
button:focus { border-color: #999; background-color: #f8f8f8;}
input[type="submit"],
textarea[type="submit"],
select[type="submit"],
button[type="submit"] { cursor: pointer; background: #2d4f79; color: #fff; font-size: 1.18652em; text-transform: uppercase; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; margin-top: 1em; border: none;}
input[type="submit"]:hover,
textarea[type="submit"]:hover,
select[type="submit"]:hover,
button[type="submit"]:hover { background: #2ac4ff; color: #fff;}
input[type="radio"] { -webkit-appearance: radio;}
input[type="checkbox"] { -webkit-appearance: checkbox;}
select { padding: 1.3em; -moz-appearance: none; margin: 0.75em 0; color: #898289;}
label { line-height: 1; font-family: brandon_text_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase;}
textarea { height: 260px; overflow: auto; }
.contact-form__wrap { max-width: 100%; margin: auto;text-align: center;}
.contact-form__wrap label { display: block;}
.contact-form__wrap input[type="text"] { margin: 0.75em 0;}
@-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@-webkit-keyframes expand {
0% { width: 0; }
100% { width: 5rem; }
}
@keyframes expand {
0% { width: 0; }
100% { width: 5rem; }
}
.hero { height: 40em; width: 100%; padding: 0; position: relative; background-size: cover; background-repeat: no-repeat; background-color: #111; background-position: center;}
@media (min-width: 62.5em) {
.hero { height: 100%; height: 100vh; }
}
#s466567 .hero { background-image: url("../img/Website-design-and-development-company.jpg");}
.hero-content { padding-top: 14em; text-align: center; width: 83%; padding-bottom: 10em; margin: auto; font-size: 13px;}
.home-hero .hero-content,
.hero-content.cs-hero__content { position: relative; top:0; left: 0%; text-align: center;width: 100%;}
@media (min-width: 20em) {
.hero-content { font-size: 14px; }
}
@media (min-width: 60em) {
.hero-content { font-size: 16px; }
}
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content h4,
.hero-content h5,
.hero-content h6,
.hero-content p { color: #fff;}
.hero-content .button,
.hero-content .solid-button { margin: 0.5em 0.2em;}
@media (min-width: 25em) {
.hero-content .button,
.hero-content .solid-button { margin-top: 1.5em; }
}
@media (min-width: 62.5em) {
.hero-content .button,
.hero-content .solid-button { margin-top: 2em; }
}
.hero-content h6 { -webkit-animation: textin 550ms ease-in 1s both; animation: textin 550ms ease-in 1s both;}
.hero-content p { -webkit-animation: textin 550ms ease-in 1s both; animation: textin 550ms ease-in 1s both;font-size: 20px;}
.hero-content.planpage h2 { margin-bottom: 0; -webkit-animation: textin 550ms ease-in 1s both; animation: textin 550ms ease-in 1s both; font-size: 20px; text-transform: uppercase; font-weight: normal; font-family: brandon_grotesque_medium, Arial, "Helvetica Neue", Helvetica, sans-serif;}
.hero-content .button { -webkit-animation: textin 650ms ease-in 1.2s both; animation: textin 650ms ease-in 1.2s both; font-size: 13px;}
@media (min-width: 25em) {
.hero-content .button { font-size: inherit; }
}
.hero-content .divider:after { -webkit-animation: expand 400ms ease-in 0.75s both; animation: expand 400ms ease-in 0.75s both; margin: 0.25em auto;}
@media (min-width: 48em) {
.hero-content .divider:after { margin: 0.15em auto; }
}
@-webkit-keyframes textin {
0% { opacity: 0; -webkit-transform: scale(0.25); transform: scale(0.25); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes textin {
0% { opacity: 0; -webkit-transform: scale(0.25); transform: scale(0.25); }
100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
.hero-title h1 { font-size: 2.40542em; line-height: 1; margin: 0; margin-bottom: 0.1em; padding-top: 0;}
.hero-title strong { font-size: 2.40542em; line-height: 1; margin: 0; margin-bottom: 0.1em; padding-top: 0;}
@media (min-width: 30em) {
.hero-title h1 { font-size: 3.04436em; }
.hero-title strong { font-size: 3.04436em; }
}
@media (min-width: 48em) {
.hero-title h1 { font-size: 3.85302em; }
.hero-title strong { font-size: 3.85302em; }
}
@media (min-width: 66.25em) {
.hero-title h1 { font-size: 4.87648em; }
.hero-title strong { font-size: 4.87648em; }
}
.hero-title { -webkit-transform: translateY(-5%); -ms-transform: translateY(-5%); transform: translateY(-5%); opacity: 0; -webkit-animation: fadein 500ms ease-in 300ms forwards; animation: fadein 500ms ease-in 300ms forwards;}
section { padding: 60px 0; position: relative;}
section:before,
section:after { content: ""; display: table;}
section:after { clear: both;}
.about-us { background-size: cover; background-repeat: no-repeat; }
@media (min-width: 30em) {
.about-us { text-align: center; }
}
.about-us .content-wrap { max-width: 55em; margin: auto; width: 91%;}
.about-us h2,
.about-us h3,
.about-us h4,
.about-us h5,
.about-us h6,
.about-us p { color: #000;}
.about-us p { font-family: brandon_text_light, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #000;}
.about-us .divider-center:after { margin: 0.4em 0;}
.about-us .content-wrap .what-we-title { font-size: 45px; display: block; line-height: 1.2;}
@media (min-width: 30em) {
.about-us .divider-center:after { margin: 0.4em auto; }
}
/******************************************************************************************* Projects*******************************************************************************************/
.projects { padding: 0; position: relative; font-size: 14px;}
@media (min-width: 72.5em) {
.projects { font-size: 16px; }
}
.project-item { min-height: 0; background-repeat: no-repeat; background-size: cover; background-position: center; float: left; padding: 0; margin: 0; display: table;}
.project-item:nth-child(1) { width: 100%;}
.project-item:nth-child(1) .project-item__inner { padding-top: 100%;}
@media (min-width: 30em) {
.project-item:nth-child(1) { width: 50%; }
}
.project-item:nth-child(2),
.project-item:nth-child(3) { width: 100%;}
.project-item:nth-child(2) .project-item__inner,
.project-item:nth-child(3) .project-item__inner { padding-top: 100%;}
@media (min-width: 30em) {
.project-item:nth-child(2),
.project-item:nth-child(3) { width: 50%; }
}
@media (min-width: 60em) {
.project-item:nth-child(2) .project-item__inner,
.project-item:nth-child(3) .project-item__inner { padding-top: 50%; }
.project-item:nth-child(2) h3,
.project-item:nth-child(3) h3 {
font-size: 1.90058em; }
}
.project-item:nth-child(4),
.project-item:nth-child(5),
.project-item:nth-child(6),
.project-item:nth-child(7) { width: 100%;}
.project-item:nth-child(4) .project-item__inner,
.project-item:nth-child(4) .project-link__wrap,
.project-item:nth-child(5) .project-item__inner,
.project-item:nth-child(5) .project-link__wrap,
.project-item:nth-child(6) .project-item__inner,
.project-item:nth-child(6) .project-link__wrap,
.project-item:nth-child(7) .project-item__inner,
.project-item:nth-child(7) .project-link__wrap { padding-top: 100%;}
@media (min-width: 30em) {
.project-item:nth-child(4),
.project-item:nth-child(5),
.project-item:nth-child(6),
.project-item:nth-child(7) { width: 50%; }
}
@media (min-width: 40em) {
.project-item:nth-child(4) h3,
.project-item:nth-child(5) h3,
.project-item:nth-child(6) h3,
.project-item:nth-child(7) h3 { font-size: 1.68941em; }
}
@media (min-width: 60em) {
.project-item:nth-child(4),
.project-item:nth-child(5),
.project-item:nth-child(6),
.project-item:nth-child(7) { width: 25%; }
.project-item:nth-child(4) h3:after,
.project-item:nth-child(5) h3:after,
.project-item:nth-child(6) h3:after,
.project-item:nth-child(7) h3:after { margin-top: 0.7em; }
.project-item:nth-child(4) p,
.project-item:nth-child(5) p,
.project-item:nth-child(6) p,
.project-item:nth-child(7) p { display: none; }
}
.project-item.dark-bg { background-size: auto; background-repeat: repeat;}
.project-item .project-item__inner,
.project-item .project-link__wrap { height: 0; position: relative; overflow: hidden; display: block; width: 100%;}
.project-item { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0;}
.project-item.inviewport { -webkit-animation: fadein 500ms ease-in forwards; animation: fadein 500ms ease-in forwards;}
.hover-content,
.link-content-wrap { position: absolute; top: 0; right: 0; left: 0; bottom: 0;}
.hover-content { margin: 1em; padding: 1.5em; background-color: rgba(0, 0, 0, 0.8); text-align: center; -webkit-transition: opacity 550ms ease; transition: opacity 550ms ease; opacity: 0;}
.project-item:hover .hover-content { opacity: 1; -webkit-transition: opacity 700ms ease; transition: opacity 700ms ease;}
.project-item:hover h3, .project-item:hover strong,
.project-item:hover p,
.project-item:hover .arrow-button { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1;}
.project-item__content,
.link-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 90%;}
@media (min-width: 40em) {
.project-item__content,
.link-content { width: 85%; }
}
.project-item__content .arrow-button,
.link-content .arrow-button { font-size: 12px; margin-top: 1.5em; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; -webkit-transition: all 300ms ease 500ms; transition: all 300ms ease 500ms; margin-bottom: 0;}
.project-item__content h3, .project-item__content strong,
.link-content h3 { color: #fff; line-height: 1.1; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; -webkit-transition: all 300ms ease 400ms; transition: all 300ms ease 400ms; padding-top: 0; font-size: 1.50169em;}
@media (min-width: 30em) {
.project-item__content h3:after, .project-item__content strong:after,
.link-content h3:after { margin-top: 0.75em; }
}
@media (min-width: 40em) {
.project-item__content h3, .project-item__content strong,
.link-content h3 { font-size: 1.90058em; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; }
.project-item__content h3:after, .project-item__content strong:after,
.link-content h3:after { margin-top: 0.4em; }
}
.project-item__content p,
.link-content p { color: #fff; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; -webkit-transition: all 300ms ease-in-out 300ms; transition: all 300ms ease-in-out 300ms; margin-bottom: 0; padding-top: 0; line-height: 1.4;}
@media (min-width: 30em) {
.project-item__content p,
.link-content p { display: none; }
}
@media (min-width: 40em) {
.project-item__content p,
.link-content p { display: block; }
}
/******************************************************************************************* Processs*******************************************************************************************/
.process { text-align: center;}
.process h6 { text-transform: none; font-family: brandon_text_regular, Arial, "Helvetica Neue", Helvetica, sans-serif; color: rgba(0, 0, 0, 0.7);}
.process-wrap { padding: 0.5em;display: flex;flex-wrap: wrap;}
.process-wrap:before,
.process-wrap:after { content: ""; display: table;}
.process-wrap:after { clear: both;}
@media (min-width: 40em) {
.process-wrap { padding: 1.5em; }}
.process-wrap .process-step { -webkit-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); opacity: 0;}
.process-wrap .process-step:nth-child(1) { -webkit-animation: fadein 600ms ease-in 0.05s forwards; animation: fadein 600ms ease-in 0.05s forwards;}
.process-wrap .process-step:nth-child(2) { -webkit-animation: fadein 600ms ease-in 0.2s forwards; animation: fadein 600ms ease-in 0.2s forwards;}
.process-wrap .process-step:nth-child(3) { -webkit-animation: fadein 600ms ease-in 0.35s forwards; animation: fadein 600ms ease-in 0.35s forwards;}
.process-wrap .process-step:nth-child(4) { -webkit-animation: fadein 600ms ease-in 0.5s forwards; animation: fadein 600ms ease-in 0.5s forwards;}
.process-wrap .process-step:nth-child(5) { -webkit-animation: fadein 600ms ease-in 0.65s forwards; animation: fadein 600ms ease-in 0.65s forwards;}
.process-wrap .process-step:nth-child(6) { -webkit-animation: fadein 600ms ease-in 0.8s forwards; animation: fadein 600ms ease-in 0.8s forwards;}
.process-step { padding: 3.5em 0; position: relative; -webkit-transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1); background-position: center top; background-repeat: no-repeat; background-size: cover; width: 47.22222%; margin-left: 1.38889%; margin-right: 1.38889%;}
@media (min-width: 40em) {
.process-step { padding: 4em 0; width: 30.55556%; margin-left: 1.38889%; margin-right: 1.38889%; }
}
@media (min-width: 60em) {
.process-step { width: 13.88889%; margin-left: 1.38889%; margin-right: 1.38889%; }
}
@media (min-width: 66.25em) {
.process-step { padding: 5.5em 0; }
}
.process-step:last-child:before { background-image: none; height: 0; width: 0; visibility: hidden;}
.process-step svg { margin: auto; width: 5em; height: 5em; fill: #111; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1);}
@media (min-width: 60em) {
.process-step svg { width: 4em; height: 4em; }
}
@media (min-width: 66.25em) {
.process-step svg { height: 5em; width: 5em; }
}
.process-step h6 { font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; margin-bottom: 0; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); color: #444; color: rgba(0, 0, 0, 0.75);}
.process-step p { font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; text-transform: uppercase; margin-bottom: 0; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); color: #444; color: rgba(0, 0, 0, 0.75);}
.process-step a { opacity: 1; color: #333; -webkit-transition: all 200ms ease-in; transition: all 200ms ease-in;}
.process-step a:hover { text-decoration: underline;}
.process-step:after { width: 0%; position: absolute; bottom: -5px; left: 0; content: ""; display: block; background-color: #2d4f79; height: 5px;}
.process-step:before { content: ""; display: inline-block; height: 1.5em; width: 1.5em; position: absolute; right: 0; opacity: 0.8; -webkit-transform: translate(65%, -125%); -ms-transform: translate(65%, -125%); transform: translate(65%, -125%); -webkit-transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; top: 60%; background-image: url("../img/svg/arrow-right.svg"); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;}
@media (min-width: 40em) {
.process-step:before { -webkit-transform: translate(100%, -125%); -ms-transform: translate(100%, -125%); transform: translate(100%, -125%); }
}
@media (min-width: 0em) and (max-width: 40em) {
.process-step:nth-child(2n):before { background-image: none; height: 0; width: 0; visibility: hidden; }
}
@media (min-width: 40em) and (max-width: 60em) {
.process-step:nth-child(3n):before { background-image: none; height: 0; width: 0; visibility: hidden; }
}
.process-step:hover:after { width: 100%; -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);}
.process-step:hover:before { -webkit-transform: translate(140%, -125%); -ms-transform: translate(140%, -125%); transform: translate(140%, -125%);}
.process-step:hover svg { fill: #fff;}
.process-step:hover h6,
.process-step:hover a { color: #333;}
.process-step:hover img { display: none;}
/******************************************************************************************* CMS*******************************************************************************************/
.cms { background-image: url("../img/not/home-cms-bg.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; text-align: center; padding: 2em 1em;}
@media (min-width: 48em) {
.cms { padding: 5em 1em; }
}
.cms .sub-title h6 { text-transform: none; max-width: 30em; margin: auto; padding-top: 0; color: #444; color: rgba(0, 0, 0, 0.75);}
.cms .play-icon { height: 7em; width: 7em; margin: 10.5em 0; border-radius: 50%;}
@media (min-width: 48em) {
.cms .play-icon { margin: 10em 0; height: 10em; width: 10em; }
}
.cms .play-icon:hover { fill: #2d4f79; box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.2); -webkit-animation: wobble 300ms ease-in-out forwards; animation: wobble 300ms ease-in-out forwards; background: #fff;}
.cms-video.inviewport .play-icon { -webkit-animation: wobble 450ms ease-in-out 300ms forwards; animation: wobble 450ms ease-in-out 300ms forwards;}
@-webkit-keyframes wobble {
10% { -webkit-transform: rotate(60deg); transform: rotate(60deg); }
25% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
75% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@keyframes wobble {
10% { -webkit-transform: rotate(60deg); transform: rotate(60deg); }
25% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); }
75% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }
100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
/******************************************************************************************* Testimonials*******************************************************************************************/
.testimonials { padding: 1.5em 1em; position: relative; background-image: url("../img/Testimonials.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%;
}
@media (min-width: 40em) {
.testimonials { height: 40em; padding: 2em; font-size: 14px; }
}
@media (min-width: 62.5em) {
.testimonials { height: 75%; height: 75vh; padding: 2em; font-size: 16px; }
}
.testimonials strong, .testimonials h4, .testimonials h5 { color: #fff; padding-top: 0; font-size: 2.13815em;display: block;line-height: 1.2;}
@media (min-width: 62.5em) {
.testimonials strong, .testimonials h4, .testimonials h5 { font-size: 2.7061em; }
}
@media (min-width: 62.5em) {
.testimonials .divider:after { margin: 0.6em auto; }
}
.testimonial-wrap { border: 3px solid rgba(255, 255, 255, 0.5); width: 100%; height: 100%; padding: 2em; text-align: center; position: relative;}
@media (min-width: 62.5em) {
.testimonial-wrap { padding: 3em; }
}
.testimonial-content { position: relative;}
@media (min-width: 40em) {
.testimonial-content { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
}
.testimonial-item { max-width: 65em; margin: auto;}
.testimonial-item p { color: #fff; font-family: brandon_text_light, Arial, "Helvetica Neue", Helvetica, sans-serif;}
@media (min-width: 30em) {
.testimonial-item p { font-size: 1.33484em; }
}
@media (min-width: 40em) {
.testimonial-item p { font-size: 1.50169em; }
}
.testimonial-item .client-name { font-size: 1.33484em; font-family: brandon_text_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; text-transform: uppercase; margin-top: 1em;}
@media (min-width: 62.5em) {
.testimonial-item .client-name { margin-top: 2em; }
}
.client-name { font-family: brandon_text_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.33484em;}
.bg-cover { background-size: cover; background-repeat: no-repeat; background-position: center;}
.about-value { background-image: url("../img/Adding-Values-To-Your-Ideas.jpg"); background-position: center center;}
.about-history { background-image: url("../img/About.png"); background-position: center center;}
.buy-buttons,
.custom-form { background-image: url("../img/buy-button-bg.jpg");}
.seo-results { background-image: url("../img/service/Digital-Marketing-Company.jpg");}
.seo-report { background-image: url("../img/service/SEO-Reporting.jpg");}
.cms-easy { background-image: url("../img/not/cms-easy.jpg");}
.cms-ecommerce { background-image: url("../img/not/cms-ecommerce.jpg");}
.cms-coding { background-image: url("../img/not/cms-edit.jpg");}
.custom-hosting { background-image: url("../img/hosted-solution.jpg");}
.custom-support { background-image: url("../img/cms-edit1.jpg");}
.custom-plan { background-image: url("../img/custom-plan-bg.jpg");}
.custom-pricing { background-image: url("../img/custom-price-bg.jpg");}
.icon-responsive:before { background-image: url("../img/svg/responsive.svg");}
.icon-pages:before { background-image: url("../img/svg/pages.svg");}
.icon-cms:before { background-image: url("../img/svg/cms.svg");}
.icon-domain:before { background-image: url("../img/svg/domain.svg");}
.icon-email:before { background-image: url("../img/svg/email.svg");}
.icon-form:before { background-image: url("../img/svg/form.svg");}
.icon-blog:before { background-image: url("../img/svg/blog.svg");}
.icon-options:before { background-image: url("../img/svg/options2.svg");}
.icon-payment:before { background-image: url("../img/svg/payment.svg");}
.icon-bespoke:before { background-image: url("../img/svg/bespoke.svg");}
.icon-social:before { background-image: url("../img/svg/social.svg");}
.icon-calc:before { background-image: url("../img/svg/calc.svg");}
.icon-maps:before { background-image: url("../img/svg/map.svg");}
.icon-search:before { background-image: url("../img/svg/search.svg");}
.icon-software:before { background-image: url("../img/svg/software.svg");}
.icon-listing:before { background-image: url("../img/svg/listing.svg");}
.icon-ecommerce:before { background-image: url("../img/svg/ecommerce.svg");}
.icon-design:before { background-image: url("../img/svg/design.svg");}
.icon-uk:before { background-image: url("../img/svg/globe.svg");}
.icon-stationary:before { background-image: url("../img/svg/stationary.svg");}
.icon-vector:before { background-image: url("../img/svg/vector.svg");}
.icon-printer:before { background-image: url("../img/svg/printer.svg");}
.icon-strategy:before { background-image: url("../img/svg/graph.svg");}
.icon-ppc:before { background-image: url("../img/svg/cursor.svg");}
.icon-manage:before { background-image: url("../img/svg/calendar.svg");}
.icon-unsubscribe:before { background-image: url("../img/svg/unsubscribe.svg");}
.icon-broadcast:before { background-image: url("../img/svg/broadcast.svg");}
.icon-templates:before { background-image: url("../img/svg/template.svg");}
.icon-manage-lists:before { background-image: url("../img/svg/manage-lists.svg");}
.icon-payment-gateway:before { background-image: url("../img/svg/payment-gateway.svg");}
.icon-team:before { background-image: url("../img/svg/team.svg");}
.icon-money:before { background-image: url("../img/svg/money.svg");}
.icon-images:before { background-image: url("../img/svg/images.svg");}
.icon-barcode:before { background-image: url("../img/svg/barcode.svg");}
.collapse-card { background-color: #FFFFFF; border-bottom: 1px solid #ddd; color: #999; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; margin: 5px 0;}
.collapse-card.active { box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.08); z-index: 200; margin: 1rem -1rem;}
.collapse-card .collapse-card__heading:hover::after { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02);}
.collapse-card__heading { cursor: pointer; padding: 1rem; position: relative;}
.collapse-card__heading:before,
.collapse-card__heading:after { content: " "; display: table;}
.collapse-card__heading:after { clear: both;}
.active .collapse-card__heading { background-color: #aaa;}
.collapse-card__title { font-size: 14px; line-height: 2rem; margin: 0 2rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: brandon_grotesque_bold, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333; text-transform: uppercase; -webkit-transition: color 200ms ease; transition: color 200ms ease;}
.contact-form__wrap select { background: white;}
.active .collapse-card__title { color: #fff;}
.hero-content.page-not .hero-title h1 { font-size: 180px;}
.hero-content.page-not .divider::after { margin-top: 55px; width: 7rem;background: #fff;}
@media (min-width: 25em) {
.collapse-card__title { font-size: 16px; }
}
@media (min-width: 40em) {
.collapse-card__title { font-size: 1.05469em; }
}
.collapse-card__body { padding: 1.5em; display: none; color: #222; font-size: 1.05469em;}
@media (min-width: 40em) {
.collapse-card__body { padding: 2em; }
}
.plus-icon { fill: #333; height: 1.5em; width: 1.5em; position: absolute; right: 1em; top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: all 300ms linear; transition: all 300ms linear;}
.active .plus-icon { -webkit-transform: translateY(-50%) rotate(495deg); -ms-transform: translateY(-50%) rotate(495deg); transform: translateY(-50%) rotate(495deg); height: 1.75em; width: 1.75em; fill: #fff;}
@-webkit-keyframes numbers-in {
0% { -webkit-transform: rotateX(94deg); transform: rotateX(94deg); opacity: 0; letter-spacing: 10px;
}
10% { -webkit-transform: rotateX(82deg); transform: rotateX(82deg); opacity: 1;
}
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); letter-spacing: -1px; }
}
@keyframes numbers-in {
0% { -webkit-transform: rotateX(94deg); transform: rotateX(94deg); opacity: 0; letter-spacing: 10px; }
10% { -webkit-transform: rotateX(82deg); transform: rotateX(82deg); opacity: 1; }
100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); letter-spacing: -1px; }
}
.cms-stat__wrap { width: 92%; max-width: 90em; margin: auto;}
.cms-stat__item { -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;}
.cms-stat__item:last-child { margin-bottom: 0;}
.cms-stat__item:last-child .stat-wrap { border-bottom: none;}
@media (min-width: 43.75em) and (max-width: 78.125em) {
.cms-stat__item { width: 32%; display: inline-block; margin-bottom: 0; }
.cms-stat__item:nth-child(1) { display: block; width: 100%; }
.cms-stat__item:nth-child(3),
.cms-stat__item:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.5); }
}
@media (min-width: 78.125em) {
.cms-stat__item { margin-bottom: 0; width: 24%; display: inline-block; vertical-align: middle; }
}
.cms-stat__item .title { text-align: center; margin-bottom: 2.5em;}
.cms-stat__item .title strong { padding-top: 0; color: #fff; display: block; line-height: 1.2; font-size: 45px;}
@media (min-width: 78.125em) {
.cms-stat__item .title { text-align: left; margin-bottom: 0; }
.cms-stat__item .title .divider:after { margin: 0.4em 0; }
}
.cms-stat__item .stat-wrap { text-align: center; padding-bottom: 2em;}
@media (min-width: 43.75em) {
.cms-stat__item .stat-wrap { border-bottom: none; padding-bottom: 0; }
}
@media (min-width: 78.125em) {
.cms-stat__item .stat-wrap { border-left: 1px solid rgba(255, 255, 255, 0.5); }
}
.cms-stat__item .stat-number { font-size: 3.85302em; font-family: brandon_grotesque_black, Arial, "Helvetica Neue", Helvetica, sans-serif; color: #fff; text-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;}
@media (min-width: 43.75em) {
.cms-stat__item .stat-number { font-size: 2.7061em; }
}
@media (min-width: 57.5em) {
.cms-stat__item .stat-number { font-size: 3.85302em; }
}
.inviewport .cms-stat__item .stat-number { -webkit-animation: numbers-in 1500ms linear both 100ms; animation: numbers-in 1500ms linear both 100ms;}
.cms-stat__item p { font-size: 15px; text-transform: uppercase; line-height: 1.1; margin-bottom: 0;}
.hero-content { position: relative; z-index: 1;}
.darken-overlay { background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}
.blog-inner-content ul { margin-left: 20px;}
.blog-inner-content ul li { list-style-type: disc; font-size: 18px;}
.git-logo{ width: 250px;}
.git-logo .main-logo img { vertical-align: middle;margin-top: 0px}
.hero-content.planpage { background: #000; padding: 20px 0; width: 60%; bottom: 0; top: auto; position: absolute; border-radius: 10px 10px 0 0; left: 20%;}
/* not required */
@media all and (max-width: 990px){
.headroom--not-top .main-logo { display: block;}
.headroom--not-top .logo { padding: 1.5em 0 1.5em 1.5em;}
.contact-wrap .contact-info h3 { font-size: 24px;}
.video-slide .desctop-video {
display: none;
}
.video-slide .mobile-video {
display: block;
}
.video-slide .package-buttons {
bottom: 5px;}
}
@media all and (max-width: 768px){
section { padding: 30px 0;}
.about-us p { text-align: justify; font-size: 14px;}
.headroom--not-top .logo { padding: 1.5em 0 1.5em 1.5em;}
.headroom--not-top .main-logo { display: block;}
.footer section { padding-top: 0;}
.button .button-text { padding: 0.8em 1em;}
.hero-content { padding-top: 11em; padding-bottom: 3em; padding-left: 15px; padding-right: 15px;}
.hero-content h6 { font-size: 14px;}
.hero-content p { font-size: 14px;}
.hero-content.planpage h2 { font-size: 14px;}
.collapse-card__body { font-size: 14px; text-align: justify;}
.logo-faq { padding-bottom: 0;}
.collapse-card.active { margin: 1rem 0rem;}
.testimonial-wrap{padding-left: 0px; padding-right: 0px;}
.narrow-content-wrap { margin-top: 0;}
.inner-intro p { font-size: 14px; text-align: justify;}
.split-copy__cell { padding: 15px;}
.split-copy__cell::after { display: none;}
.table-section { padding: 2em 0em;}
.inner-intro h2 { font-size: 30px;}
.hero-content.planpage { width: 94%;left: 3%;}
.hero-content.planpage h1 { font-size: 30px;}
.split-copy__cell p { font-size: 14px; text-align: justify;}
.about-us .content-wrap .what-we-title { font-size: 30px;}
.cms-stat__item .title strong { font-size: 35px;}
.process .how-we-title { font-size: 45px;}
}
.main-container.container.blogs-content-part {
padding-top: 100px;
background: #fff;
}
.hero.home-hero.cont.content-part {
background: #fff;
}
.main-container.container.blogs-content-part .teaser-container.node.node-page h1 {
font-size: 36px;
}
.main-container.container.blogs-content-part .teaser-container.node.node-page h2 {
font-size: 26px;
}
.main-container.container.blogs-content-part .teaser-container.node.node-page h2 {
font-size: 20px;
}