* {
transition: all 0.1s ease-out;
}
html {
font-size: 10px;
}
@media only screen and (max-width:400px) {
html {
font-size: 9.411764705882353px;
}
}
html,
body {
height: 100%;
}
body {
font-family: "Nunito Sans", sans-serif;
font-size: 1.7rem;
font-style: normal;
font-weight: normal;
line-height: 1.941;
color: rgba(255, 255, 255, 0.3);
margin: 0;
padding: 0;
}
/* -------------------------------------------------------------------
* ## links
* ------------------------------------------------------------------- */
a {
color: #e3061d;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
color: #e3061d;
text-decoration: none !important;
}
a:hover,
a:active {
outline: 0;
}
/* ===================================================================
* # typography & general theme styles
*
* ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #FFFFFF;
text-rendering: optimizeLegibility;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 9rem;
margin-bottom: 1.8rem;
}
@media only screen and (max-width:600px) {
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 5.1rem;
}
}
h5, .h5, h6, .h6 {
margin-top: 4.2rem;
margin-bottom: 1.5rem;
}
@media only screen and (max-width:600px) {
h5, .h5, h6, .h6 {
margin-top: 3.6rem;
margin-bottom: 0.9rem;
}
}
h1, .h1 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
@media only screen and (max-width:600px) {
h1, .h1 {
font-size: 3.3rem;
letter-spacing: -.07rem;
}
}
h2, .h2 {
font-size: 3rem;
line-height: 1.3;
}
h3, .h3 {
font-size: 2.4rem;
line-height: 1.25;
}
h4, .h4 {
font-size: 2.1rem;
line-height: 1.286;
}
h5, .h5 {
font-size: 1.8rem;
line-height: 1.333;
}
h6, .h6 {
font-size: 1.6rem;
line-height: 1.3125;
text-transform: uppercase;
letter-spacing: .16rem;
}
p img {
margin: 0;
}
p.lead {
font-family: "Nunito Sans", sans-serif;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.625;
margin-bottom: 3.6rem;
color: rgba(255, 255, 255, 0.2);
}
@media only screen and (max-width:1200px) {
p.lead {
font-size: 2.2rem;
}
}
@media only screen and (max-width:1000px) {
p.lead {
font-size: 2.1rem;
}
}
@media only screen and (max-width:800px) {
p.lead {
font-size: 2rem;
}
}
em,
i,
strong,
b {
font-size: inherit;
line-height: inherit;
}
em,
i {
font-family: "Nunito Sans", sans-serif;
font-style: italic;
}
strong,
b {
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
}
small {
font-size: 1.2rem;
line-height: inherit;
}
blockquote {
margin: 3.9rem 0;
padding-left: 4.5rem;
position: relative;
}
blockquote:before {
content: "\201C";
font-size: 10rem;
line-height: 0px;
margin: 0;
color: rgba(255, 255, 255, 0.15);
font-family: arial, sans-serif;
position: absolute;
top: 3.6rem;
left: 0;
}
blockquote p {
font-family: "Nunito Sans", sans-serif;
padding: 0;
font-size: 2.1rem;
line-height: 1.857;
color: rgba(255, 255, 255, 0.7);
}
blockquote cite {
display: block;
font-family: "Montserrat", sans-serif;
font-size: 1.4rem;
font-style: normal;
line-height: 1.5;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite a,
blockquote cite a:visited {
color: rgba(255, 255, 255, 0.3);
border: none;
}
abbr {
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .05rem;
color: rgba(255, 255, 255, 0.2);
}
var,
kbd,
samp,
code,
pre {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
padding: 2.4rem 3rem 3rem;
background: #F1F1F1;
overflow-x: auto;
}
code {
font-size: 1.4rem;
margin: 0 .2rem;
padding: .3rem .6rem;
white-space: nowrap;
background: #1f1f1f;
border: 1px solid #252525;
color: rgba(255, 255, 255, 0.7);
border-radius: 3px;
}
pre > code {
display: block;
white-space: pre;
line-height: 2;
padding: 0;
margin: 0;
}
pre.prettyprint > code {
border: none;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
background: #ffd900;
color: #000000;
}
hr {
border: solid rgba(255, 255, 255, 0.05);
border-width: 1px 0 0;
clear: both;
margin: 2.4rem 0 1.5rem;
height: 0;
}
section {
overflow: hidden;
}
/* -------------------------------------------------------------------
* ## Lists
* ------------------------------------------------------------------- */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
display: list-item;
}
ol,
ul {
margin-left: 1.7rem;
}
ul li {
padding-left: .4rem;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: .6rem 0 .6rem 1.7rem;
}
ul.disc li {
display: list-item;
list-style: none;
padding: 0 0 0 .8rem;
position: relative;
}
ul.disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #e3061d;
position: absolute;
left: -17px;
top: 11px;
vertical-align: middle;
}
dt {
margin: 0;
color: #e3061d;
}
dd {
margin: 0 0 0 2rem;
}
/* -------------------------------------------------------------------
* ## responsive video container
* ------------------------------------------------------------------- */
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------------
* ## floated image
* ------------------------------------------------------------------- */
img.pull-right {
margin: 1.5rem 0 0 3rem;
}
img.pull-left {
margin: 1.5rem 3rem 0 0;
}
/* -------------------------------------------------------------------
* ## tables
* ------------------------------------------------------------------- */
table {
border-width: 0;
width: 100%;
max-width: 100%;
font-family: "Nunito Sans", sans-serif;
border-collapse: collapse;
}
th,
td {
padding: 1.5rem 3rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
th {
color: #FFFFFF;
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
}
td {
line-height: 1.5;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* -------------------------------------------------------------------
* ## Spacing
* ------------------------------------------------------------------- */
button,
.btn {
margin-bottom: 1.2rem;
}
fieldset {
margin-bottom: 1.5rem;
}
input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.video-container,
.ss-custom-select {
margin-bottom: 3rem;
}
/* ===================================================================
* # preloader - (_preloader-dots.scss)
*
* ------------------------------------------------------------------- */
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #151515;
z-index: 800;
height: 100vh;
width: 100%;
overflow: hidden;
}
.no-js #preloader,
.oldie #preloader {
display: none;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
padding: 0;
display: inline-block;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#loader > div {
content: "";
background: #FFFFFF;
width: 6px;
height: 6px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
#loader > div:nth-of-type(1) {
left: 15px;
}
#loader > div:nth-of-type(3) {
left: -15px;
}
/* dots jump */
.dots-jump > div {
-webkit-animation: dots-jump 1.2s infinite ease;
animation: dots-jump 1.2s infinite ease;
animation-delay: 0.2s;
}
.dots-jump > div:nth-of-type(1) {
animation-delay: 0.4s;
}
.dots-jump > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes dots-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
@keyframes dots-jump {
0% {
top: 0;
}
40% {
top: -6px;
}
80% {
top: 0;
}
}
/* dots fade */
.dots-fade > div {
-webkit-animation: dots-fade 1.6s infinite ease;
animation: dots-fade 1.6s infinite ease;
animation-delay: 0.4s;
}
.dots-fade > div:nth-of-type(1) {
animation-delay: 0.8s;
}
.dots-fade > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes dots-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
@keyframes dots-fade {
0% {
opacity: 1;
}
40% {
opacity: 0.2;
}
80% {
opacity: 1;
}
}
/* dots pulse */
.dots-pulse > div {
-webkit-animation: dots-pulse 1.2s infinite ease;
animation: dots-pulse 1.2s infinite ease;
animation-delay: 0.2s;
}
.dots-pulse > div:nth-of-type(1) {
animation-delay: 0.4s;
}
.dots-pulse > div:nth-of-type(3) {
animation-delay: 0s;
}
@-webkit-keyframes dots-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.3);
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes dots-pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.1);
transform: scale(1.3);
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ===================================================================
* # forms
*
* ------------------------------------------------------------------- */
fieldset {
border: none;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
display: block;
height: 6rem;
padding: 1.5rem 2.4rem;
border: 0;
outline: none;
color: rgba(255, 255, 255, 0.7);
font-family: "Nunito Sans", sans-serif;
font-size: 1.5rem;
line-height: 3rem;
max-width: 100%;
background: rgba(255, 255, 255, 0.05);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ss-custom-select {
position: relative;
padding: 0;
}
.ss-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
margin: 0;
line-height: 3rem;
vertical-align: middle;
}
.ss-custom-select select option {
padding-left: 2rem;
padding-right: 2rem;
color: #666666;
background: #FFFFFF;
}
.ss-custom-select select::-ms-expand {
display: none;
}
.ss-custom-select::after {
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
border-right: 2px solid rgba(255, 255, 255, 0.5);
content: '';
display: block;
height: 8px;
width: 8px;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 2.4rem;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
}
/* IE9 and below */
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
input {
color: red;
}
textarea.textarea {
min-height: 110px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color: #FFFFFF;
}
label,
legend {
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
font-size: 1.4rem;
margin-bottom: .9rem;
line-height: 1.714;
color: #FFFFFF;
display: block;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-text {
display: inline-block;
margin-left: 1rem;
font-family: "Nunito Sans", sans-serif;
font-weight: normal;
line-height: inherit;
}
label > input[type="checkbox"],
label > input[type="radio"] {
margin: 0;
position: relative;
top: .15rem;
}
/* -------------------------------------------------------------------
* ## Style Placeholder Text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: rgba(255, 255, 255, 0.4);
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba(255, 255, 255, 0.4);
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba(255, 255, 255, 0.4);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: rgba(255, 255, 255, 0.4);
}
::placeholder {
/* Most modern browsers support this now. */
color: rgba(255, 255, 255, 0.4);
}
.placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* -------------------------------------------------------------------
* ## Change Autocomplete styles in Chrome
* ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: #e3061d;
transition: background-color 5000s ease-in-out 0s;
}
/* ===================================================================
* # buttons
*
* ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .4rem;
height: 5.4rem;
line-height: 5rem;
padding: 0 3rem;
margin: 0 .3rem 1.2rem 0;
color: #000000;
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #c5c5c5;
border: .2rem solid #c5c5c5;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: #b8b8b8;
border-color: #b8b8b8;
color: #000000;
outline: 0;
}
/* button primary
* ------------------------------------------------- */
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
background: #e3061d;
border-color: #e3061d;
color: #FFFFFF;
}
.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover,
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus {
background: #6b3792;
border-color: #6b3792;
}
/* button modifiers
* ------------------------------------------------- */
.btn.full-width,
button.full-width {
width: 100%;
margin-right: 0;
}
.btn--medium,
button.btn--medium {
height: 5.7rem !important;
line-height: 5.3rem !important;
}
.btn--large,
button.btn--large {
height: 6rem !important;
line-height: 5.6rem !important;
}
.btn--stroke,
button.btn--stroke {
background: transparent !important;
border: 0.2rem solid #FFFFFF;
color: #FFFFFF;
}
.btn--stroke:hover,
button.btn--stroke:hover {
background: #FFFFFF !important;
border: 0.2rem solid #FFFFFF;
color: #000000;
}
.btn--pill,
button.btn--pill {
padding-left: 3rem !important;
padding-right: 3rem !important;
border-radius: 1000px !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* ===================================================================
* # additional components
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## alert box - (_alert-box.scss)
* ------------------------------------------------------------------- */
.alert-box {
padding: 2.1rem 4rem 2.1rem 3rem;
position: relative;
margin-bottom: 3rem;
border-radius: 3px;
font-family: "Nunito Sans", sans-serif;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.6;
}
.alert-box__close {
position: absolute;
right: 1.8rem;
top: 1.8rem;
cursor: pointer;
}
.alert-box__close.fa {
font-size: 12px;
}
.alert-box--error {
background-color: #ffd1d2;
color: #e65153;
}
.alert-box--success {
background-color: #c8e675;
color: #758c36;
}
.alert-box--info {
background-color: #d7ecfb;
color: #4a95cc;
}
.alert-box--notice {
background-color: #fff099;
color: #bba31b;
}
/* -------------------------------------------------------------------
* ## additional typo styles - (_additional-typo.scss)
* ------------------------------------------------------------------- */
/* drop cap
* ----------------------------------------------- */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 1.5rem .6rem 0 0;
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
font-size: 8.4rem;
line-height: 6rem;
text-indent: 0;
background: transparent;
color: rgba(255, 255, 255, 0.7);
}
/* line definition style
* ----------------------------------------------- */
.lining dt,
.lining dd {
display: inline;
margin: 0;
}
.lining dt + dt:before,
.lining dd + dt:before {
content: "\A";
white-space: pre;
}
.lining dd + dd:before {
content: ", ";
}
.lining dd + dd:before {
content: ", ";
}
.lining dd:before {
content: ": ";
margin-left: -0.2em;
}
/* dictionary definition style
* ----------------------------------------------- */
.dictionary-style dt {
display: inline;
counter-reset: definitions;
}
.dictionary-style dt + dt:before {
content: ", ";
margin-left: -0.2em;
}
.dictionary-style dd {
display: block;
counter-increment: definitions;
}
.dictionary-style dd:before {
content: counter(definitions, decimal) ". ";
}
/**
* Pull Quotes
* -----------
* markup:
*
*
*
* --------------------------------------------------------------------- */
.pull-quote {
position: relative;
padding: 2.1rem 3rem 2.1rem 0px;
}
.pull-quote:before,
.pull-quote:after {
height: 1em;
position: absolute;
font-size: 10rem;
font-family: Arial, Sans-Serif;
color: rgba(255, 255, 255, 0.15);
}
.pull-quote:before {
content: "\201C";
top: -3.6rem;
left: 0;
}
.pull-quote:after {
content: '\201D';
bottom: 3.6rem;
right: 0;
}
.pull-quote blockquote {
margin: 0;
}
.pull-quote blockquote:before {
content: none;
}
/**
* Stats Tab
* ---------
* markup:
*
*
*
* Extend this object into your markup.
*
* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 3rem 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 1.5rem 3rem 0;
padding: 0 1.5rem 0 0;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 2.5rem;
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
border: none;
color: #FFFFFF;
}
.stats-tabs li a:hover {
color: #e3061d;
}
.stats-tabs li a em {
display: block;
margin: .6rem 0 0 0;
font-family: "Nunito Sans", sans-serif;
font-size: 1.4rem;
font-weight: normal;
font-style: normal;
}
/* -------------------------------------------------------------------
* ## skillbars - (_skillbars.scss)
* ------------------------------------------------------------------- */
.skill-bars {
list-style: none;
margin: 6rem 0 3rem;
}
.skill-bars li {
height: .6rem;
background: rgba(255, 255, 255, 0.1);
width: 100%;
margin-bottom: 6.9rem;
padding: 0;
position: relative;
}
.skill-bars li strong {
position: absolute;
left: 0;
top: -3rem;
font-family: "Nunito Sans", sans-serif;
font-weight: 700;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: 1.4rem;
line-height: 2.4rem;
}
.skill-bars li .progress {
background: #e3061d;
position: relative;
height: 100%;
}
.skill-bars li .progress span {
position: absolute;
right: 0;
top: -3.6rem;
display: block;
font-family: "Nunito Sans", sans-serif;
color: #FFFFFF;
font-size: 1.1rem;
line-height: 1;
background: #e3061d;
padding: .6rem .6rem;
border-radius: 3px;
}
.skill-bars li .progress span::after {
position: absolute;
left: 50%;
bottom: -5px;
margin-left: -5px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 5px solid #e3061d;
content: "";
}
.skill-bars li .percent5 {
width: 5%;
}
.skill-bars li .percent10 {
width: 10%;
}
.skill-bars li .percent15 {
width: 15%;
}
.skill-bars li .percent20 {
width: 20%;
}
.skill-bars li .percent25 {
width: 25%;
}
.skill-bars li .percent30 {
width: 30%;
}
.skill-bars li .percent35 {
width: 35%;
}
.skill-bars li .percent40 {
width: 40%;
}
.skill-bars li .percent45 {
width: 45%;
}
.skill-bars li .percent50 {
width: 50%;
}
.skill-bars li .percent55 {
width: 55%;
}
.skill-bars li .percent60 {
width: 60%;
}
.skill-bars li .percent65 {
width: 65%;
}
.skill-bars li .percent70 {
width: 70%;
}
.skill-bars li .percent75 {
width: 75%;
}
.skill-bars li .percent80 {
width: 80%;
}
.skill-bars li .percent85 {
width: 85%;
}
.skill-bars li .percent90 {
width: 90%;
}
.skill-bars li .percent95 {
width: 95%;
}
.skill-bars li .percent100 {
width: 100%;
}
/* ===================================================================
* # reusable and common theme styles
*
* ------------------------------------------------------------------- */
body.menu-is-open {
overflow: hidden;
}
.wide {
max-width: 1400px;
}
.narrow {
max-width: 1320px;
}
.bit-narrow {
max-width: 1120px;
}
.darker {
background-color: #0f0f0f;
}
/* -------------------------------------------------------------------
* ## display headings
* ------------------------------------------------------------------- */
.display-1 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 4.6rem;
line-height: 1.5;
letter-spacing: -0.03rem;
margin-top: 0;
margin-bottom: 4.8rem;
line-height: 70px;
}
.subhead {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 1.8rem;
line-height: 1.333;
text-transform: uppercase;
letter-spacing: .25rem;
color: #e3061d;
margin-top: 0;
margin-bottom: 3rem;
position: relative;
}
.item-title {
font-size: 3rem;
line-height: 1.5;
margin-top: 0;
margin-bottom: 1.4rem;
}
/* -------------------------------------------------------------------
* ## section header
* ------------------------------------------------------------------- */
.section-header.has-bottom-sep {
padding-bottom: 1.5rem;
position: relative;
text-align: center;
}
.section-header.has-bottom-sep::before {
content: "";
display: inline-block;
height: 1px;
width: 550px;
background-color: rgba(255, 255, 255, 0.05);
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* -------------------------------------------------------------------
* ## grid overlay
* ------------------------------------------------------------------- */
.grid-overlay {
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
max-width: 1200px;
width: 89%;
height: 100%;
opacity: .5;
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-left: 1px solid rgba(255, 255, 255, 0.1);
-webkit-transform: translate3d(-50%, 0, 0);
-ms-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
z-index: 3;
}
.grid-overlay > div,
.grid-overlay::before,
.grid-overlay::after {
/*background-color: rgba(255, 255, 255, 0.1);*/
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 1px;
}
.grid-overlay::before {
content: "";
left: 25%;
}
.grid-overlay::after {
content: "";
right: 25%;
}
.grid-overlay > div {
left: 50%;
}
/* -------------------------------------------------------------------
* responsive:
* reusable and common theme styles
* ------------------------------------------------------------------- */
@media only screen and (max-width:1600px) {
.grid-overlay {
border-right: none !important;
border-left: none !important;
}
.grid-overlay::before {
left: 22.5%;
}
.grid-overlay::after {
right: 22.5%;
}
}
@media only screen and (max-width:1200px) {
.display-1 {
font-size: 4.5rem;
}
.display-1 br {
display: none;
}
}
@media only screen and (max-width:1100px) {
.display-1 {
font-size: 4.2rem;
}
}
@media only screen and (max-width:1000px) {
.display-1 {
font-size: 4rem;
}
}
@media only screen and (max-width:800px) {
.display-1 {
font-size: 3.6rem;
margin-bottom: 4.5rem;
}
.subhead {
font-size: 1.6rem;
}
.section-header.has-bottom-sep::before {
width: 300px;
}
}
@media only screen and (max-width:700px) {
.display-1 {
font-size: 3.2rem;
}
.subhead {
font-size: 1.5rem;
}
}
@media only screen and (max-width:600px) {
.display-1 {
font-size: 2.8rem;
margin-bottom: 4.2rem;
}
}
@media only screen and (max-width:500px) {
.display-1 {
font-size: 2.6rem;
}
.section-header.has-bottom-sep::before {
width: 200px;
}
}
@media only screen and (max-width:400px) {
.display-1 {
font-size: 2.4rem;
}
.subhead {
font-size: 1.4rem;
}
.item-title {
font-size: 2.1rem;
}
.grid-overlay > div,
.grid-overlay::before,
.grid-overlay::after {
display: none;
}
}
/* ===================================================================
* # header styles
*
* ------------------------------------------------------------------- */
.s-header {
z-index: 500;
width: 100%;
height: 78px;
background-color: transparent;
position: absolute;
top: 21px;
}
/* -------------------------------------------------------------------
* ## header logo
* ------------------------------------------------------------------- */
.header-logo {
z-index: 501;
display: inline-block;
margin: 0;
padding: 0;
position: absolute;
left: 7.5rem;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.header-logo a {
display: block;
padding: 0;
outline: 0;
border: none;
}
.header-logo img {
/*width: 155px;
height: 36px;*/
}
.cursor {
width: 35px;
height: 35px;
border-radius: 100%;
border: 1px solid #e3061d;
transition: all 200ms ease-out;
position: fixed;
pointer-events: none;
left: 0;
top: 0;
transform: translate(calc(-50% + 15px), -50%);
z-index: 99999999;
}
.cursor2 {
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #e3061d;
opacity: 1;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width .3s, height .3s, opacity .3s;
z-index: 99999999;
}
.hover {
background-color: red;
opacity: 0.5;
}
.cursorinnerhover {
width: 50px;
height: 50px;
opacity: .5;
}
/* -------------------------------------------------------------------
* ## main navigation
* ------------------------------------------------------------------- */
.header-nav {
z-index: 600;
font-size: 1.6rem;
line-height: 1.875;
padding: 3.6rem 4rem 3.6rem 4rem;
height: 100%;
width: 585px;
background-color: rgb(232, 232, 232);
color: rgba(255, 255, 255, 0.25);
overflow-y: auto;
overflow-x: hidden;
position: fixed;
top: 0;
left: 90px;
-webkit-transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
transition: all 0.5s cubic-bezier(0.7, 0.3, 0, 1);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.header-nav h3 img {
width: 75%;
display: none;
}
.header-nav a,
.header-nav a:visited {
color: rgba(255, 255, 255, 1);
}
.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active {
color: #e3061d;
}
.header-nav h3 {
display: inline-block;
font-weight: 700;
font-size: 12px;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: .4rem;
margin-bottom: 7.2rem;
margin-top: 1.2rem;
padding-right: 140px;
color: #fff;
position: relative;
}
.header-nav h3::after {
/*content: "";
display: block;
height: 1px;
width: 110px;
background-color: #fff;
position: absolute;
top: 50%;
right: 0;*/
}
.header-nav p {
margin-bottom: 2.7rem;
}
.header-nav__content,
.header-nav h3 {
left: 100px;
opacity: 0;
visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.header-nav__content {
position: relative;
/*max-width: 300px;*/
}
.header-nav__list {
font-weight: 600;
font-size: 2.8rem;
line-height: 1.286;
margin: 0 0 4.2rem 0;
padding: 0;
list-style: none;
counter-reset: ctr;
}
.header-nav__list li {
padding: .9rem 0;
}
.header-nav__list a {
display: block;
color: #FFFFFF;
position: relative;
font-size: 35px;
font-weight: 700;
}
.header-nav__list a:hover {
/*-webkit-transition-delay: .19s;
transition-delay: .19s;
padding-left: 15px;*/
}
.header-nav__list a::before {
display: block;
content: counter(ctr, decimal-leading-zero) ".";
counter-increment: ctr;
font-family: "Montserrat", sans-serif;
font-size: 11px;
color: rgba(255, 255, 255, 1);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
display: none;
}
.header-nav__list a:hover::before {
color: #e3061d;
}
.header-nav__list .current a::before {
color: #e3061d;
}
.header-nav__social {
list-style: none;
display: inline-block;
font-size: 2.4rem;
margin: 0;
}
.header-nav__social li {
display: inline-block;
margin-right: 12px;
padding-left: 0;
}
.header-nav__social li a {
color: rgba(255, 255, 255, 0.15);
}
.header-nav__social li a:hover,
.header-nav__social li a:focus {
color: white;
}
.header-nav__social li:last-child {
margin: 0;
}
.dropdown_list {
list-style: none;
padding: 0;
margin: 0;
opacity: 0;
position: absolute;
right: 7%;
/* top: 37px; */
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition-delay: 0s;
transition-delay: 0s;
margin-top: -60px;
z-index: 2;
width: 330px;
}
.dropdown_list ul {
position: relative;
z-index: 1;
}
.dropdown_list ul:after {
content: "";
display: inline-block;
height: 1px;
background-color: #e3061d;
/* -webkit-flex-grow: 1; */
-moz-box-flex: 1;
/* flex-grow: 1; */
/* margin: 0 2.1875rem; */
/* -webkit-transform: translateX(-0.625rem) scaleX(0); */
/* transform: translateX(-0.625rem) scaleX(0); */
/* -webkit-transform-origin: center left; */
/* transform-origin: center left; */
/* -webkit-transition: -webkit-transform .6s cubic-bezier(.4,0,.2,1) .2s; */
/* transition: -webkit-transform .6s cubic-bezier(.4,0,.2,1) .2s; */
/* transition: transform .6s cubic-bezier(.4,0,.2,1) .2s; */
transition: transform .6s cubic-bezier(.4,0,.2,1) .2s,-webkit-transform .6s cubic-bezier(.4,0,.2,1) .2s;
position: absolute;
top: 17px;
width: 10rem;
left: -11rem;
}
.dropdown_list ul li {
list-style: none;
padding: 0;
margin: 0;
}
.dropdown_list ul li a {
padding: 0.625rem 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.header-nav__list li:hover .dropdown_list {
opacity: 1;
-webkit-transition-delay: .34s;
transition-delay: .34s;
}
.dropdown_list li a {
font-size: 18px;
color: #fff;
-webkit-transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
transition: -webkit-transform .3s cubic-bezier(.4,0,.2,1);
transition: transform .3s cubic-bezier(.4,0,.2,1);
transition: transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);
}
.logo-1 {
padding-left: 24px;
padding-top: 30px;
display: none;
}
.logo-1 img {
width: 75%;
}
.logo-2 {
transform: rotate(-90deg);
}
.header-nav__close {
z-index: 601;
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 39px;
right: 30px;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.header-nav__close span::before,
.header-nav__close span::after {
content: "";
display: block;
height: 2px;
width: 16px;
background-color: #FFFFFF;
position: absolute;
top: 50%;
left: 7px;
margin-top: -1px;
}
.header-nav__close span::before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header-nav__close span::after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* menu is open
* ----------------------------------------------- */
.menu-is-open .header-nav {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
-webkit-overflow-scrolling: touch;
margin-left: -92px;
overflow: hidden;
}
.menu-is-open .header-nav .header-nav__content,
.menu-is-open .header-nav h3 {
opacity: 1;
visibility: visible;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
left: 0;
}
/* -------------------------------------------------------------------
* ## mobile menu toggle
* ------------------------------------------------------------------- */
.header-menu-toggle {
/*width: 90px;
height: 48px;
line-height: 48px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .5rem;
color: #FFFFFF;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: fixed;
left: 0;
top: 0;
background: red;
height: 100%;*/
}
.hamburger-main {
position: absolute;
width: 100px;
height: 100px;
background: #e3061d;
right: 0;
top: 0;
height: 100%;
}
.hamburger {
float: left;
/* background: white; */
/* padding: 10px; */
position: absolute;
z-index: 9999;
width: 95px;
height: 90px;
padding-left: 5px;
z-index: 2;
top: 45%;
}
.menu-is-open .header-menu-icon {
background: #e3061d;
transform: rotate(7deg);
}
.menu-is-open .header-menu-icon::before {
top: 0px;
transform: translateY(0px) rotate(-56deg);
left: -2px;
background: white;
}
.menu-is-open .header-menu-icon::after {
transform: translateY(0px) rotate(40deg);
top: 0px;
background: white;
}
.header-menu-toggle.opaque {
background-color: #e3061d;
}
.header-menu-icon {
display: block;
width: 27px;
height: 2px;
margin-top: -2px;
right: auto;
bottom: auto;
background-color: #fff;
position: absolute;
left: 35px;
top: 50%;
z-index: 0;
}
.header-menu-icon::before,
.header-menu-icon::after {
content: '';
width: 100%;
height: 100%;
background-color: inherit;
position: absolute;
left: 0;
}
.header-menu-icon::before {
top: -9px;
}
.header-menu-icon::after {
bottom: -9px;
}
/* -------------------------------------------------------------------
* responsive:
* header
* ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
.header-logo {
left: 60px;
}
.header-menu-toggle {
right: 60px;
}
}
@media only screen and (max-width:900px) {
.header-nav h3 {
padding-right: 0;
}
.header-nav h3::after {
display: none;
}
.header-nav__content {
max-width: 280px;
}
.header-nav__list {
font-size: 2.5rem;
}
.header-nav__list li {
padding: .6rem 0;
}
}
@media only screen and (max-width:800px) {
.header-logo {
left: 40px;
}
.header-nav {
width: calc(100% - 80px);
padding: 3.6rem 3rem 3.6rem 5rem;
}
.header-menu-toggle {
right: 40px;
}
}
@media only screen and (max-width:600px) {
.s-header {
height: 90px;
top: 12px;
}
.header-nav {
padding: 3.6rem 3rem 3.6rem 4rem;
}
.header-menu-toggle {
top: 27px;
right: 25px;
}
}
@media only screen and (max-width:400px) {
.s-header {
top: 6px;
display: none !important;
}
.header-logo {
left: 30px;
}
.header-logo img {
width: 150px;
height: 35px;
}
.header-nav {
width: calc(100% - 0px);
}
.header-nav h3 {
margin-bottom: 6rem;
}
.header-nav__list {
font-size: 2.2rem;
}
.header-menu-toggle {
top: 21px;
right: 20px;
}
.header-nav__social {
font-size: 2.2rem;
}
}
/* ===================================================================
* # home
*
* ------------------------------------------------------------------- */
.swiper {
top: -10rem;
height: 650px !important;
}
.s-home {
width: 100%;
height: 100vh;
min-height: 786px;
background-color: transparent;
position: relative;
display: table;
}
.s-home::before {
/*display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .7;
z-index: 2;*/
}
.s-home::after {
/*display: block;
content: "";
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
opacity: .5;
z-index: 3;
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;*/
}
.s-home .grid-overlay > div {
display: none;
}
.no-js .s-home {
background: #000000;
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1320px;
}
.row {
margin: 0 !important;
}
}
/* -------------------------------------------------------------------
* ## home content
* ------------------------------------------------------------------- */
.home-content {
display: table-cell;
vertical-align: middle;
padding-top: 20rem;
width: 100%;
overflow: hidden;
position: relative;
z-index: 4;
}
.home-content h1 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 6rem;
line-height: 1;
letter-spacing: -.02em;
color: #e3061d;
margin-top: 0;
margin-bottom: 0;
}
.home-content h3 {
margin-top: 1.2rem;
font-family: "Nunito Sans", sans-serif;
font-weight: 300;
font-size: 3.8rem;
line-height: 45px;
font-style: normal;
color: #282943;
}
.home-content__main {
position: relative;
text-align: left;
padding: 0 57rem 0 0;
}
/* -------------------------------------------------------------------
* ## home video link
* ------------------------------------------------------------------- */
.home-content__video {
display: inline-block;
margin-top: 4.2rem;
}
.home-content__video .video-link {
display: block;
text-align: center;
width: 20rem;
outline: none;
position: relative;
}
.home-content__video .video-icon {
display: inline-block;
height: 9rem;
width: 9rem;
border-radius: 50%;
background-color: #e3061d;
background-image: url(../images/icons/icon-play.svg);
background-repeat: no-repeat;
background-position: 55% center;
background-size: 24px 27px;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.home-content__video .video-text {
display: inline-block;
text-align: center;
font-family: "Nunito Sans", sans-serif;
font-weight: 600;
font-size: 1.3rem;
line-height: 1;
color: #9c9c9c;
text-transform: uppercase;
letter-spacing: .5rem;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
position: relative;
}
.home-content__video .video-link:hover .video-text {
color: white;
}
.home-content__video .video-link:hover .video-icon {
background-color: #6b3792;
}
/* -------------------------------------------------------------------
* ## home buttons
* ------------------------------------------------------------------- */
.home-content__button {
margin-top: 7.8rem;
position: relative;
}
.home-content__button .btn {
width: 30rem;
height: 7.2rem !important;
line-height: 6.8rem !important;
margin-right: 0;
position: absolute;
}
.home-content__button .btn:first-child {
right: 50%;
left: auto;
}
.home-content__button .btn:last-child {
left: 50%;
right: auto;
}
.home-content__button .btn:not(.btn--primary) {
background-color: #13161b;
border-color: #13161b;
color: #FFFFFF;
}
.home-content__button .btn:not(.btn--primary):hover,
.home-content__button .btn:not(.btn--primary):focus {
background-color: #080a0c;
border-color: #080a0c;
}
/* -------------------------------------------------------------------
* ## home scroll
* ------------------------------------------------------------------- */
.home-content__scroll {
position: absolute;
right: 9.5rem;
bottom: 16rem;
-webkit-transform: rotate(-90deg) translate3d(100%, 50%, 0);
-ms-transform: rotate(-90deg) translate3d(100%, 50%, 0);
transform: rotate(-90deg) translate3d(100%, 50%, 0);
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
}
.home-content__scroll .scroll-link {
font-family: "Nunito Sans", sans-serif;
font-weight: 600;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .35rem;
text-align: left;
color: #e3061d;
position: relative;
padding-right: 180px;
}
.home-content__scroll .scroll-link:hover,
.home-content__scroll .scroll-link:focus {
color: #e3061d;
}
.home-content__scroll::after {
content: "";
display: block;
background-color: rgba(227, 6, 29, 80);
width: 150px;
height: 1px;
position: absolute;
right: 0;
top: 50%;
}
/* -------------------------------------------------------------------
* ## home social
* ------------------------------------------------------------------- */
.home-social {
list-style: none;
font-family: "Nunito Sans", sans-serif;
margin: 0;
position: absolute;
bottom: 1rem;
right: 2rem;
z-index: 5;
/* background: #e3061d; */
border-radius: 35px;
padding: 35px 8px 25px 8px;
}
.home-social a {
color: #e3061d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.home-social a:hover {
color: #e3061d;
}
.home-social li {
position: relative;
padding: .6rem 0;
}
.home-social li a {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
}
.home-social i,
.home-social span {
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.home-social i {
display: inline-block;
font-size: 22px;
text-align: center;
vertical-align: middle;
/*width: 30px;
height: 30px;*/
line-height: 30px;
top: 3px;
left: 0;
}
.home-social span {
background-color: #000000;
color: #FFFFFF;
font-size: 1.2rem;
line-height: 30px;
top: 0;
left: 50px;
padding: 0 15px;
margin: 3px 0;
border-radius: 3px;
opacity: 0;
visibility: hidden;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.home-social span::after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #000000;
position: absolute;
top: 50%;
left: -5px;
margin-top: -6px;
}
.home-social li:hover span {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* animate .home-content__main
* ------------------------------------------------------------------- */
html.ss-preload .home-content__main {
opacity: 0;
}
html.ss-loaded .home-content__main {
animation-duration: 2s;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
html.no-csstransitions .home-content__main {
opacity: 1;
}
/* -------------------------------------------------------------------
* ## home animations
* ------------------------------------------------------------------- */
/* fade in */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-webkit-transform: translate3d(0, 150%, 0);
-ms-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
-webkit-transform: translate3d(0, 150%, 0);
-ms-transform: translate3d(0, 150%, 0);
transform: translate3d(0, 150%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* fade out */
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -150%, 0);
-ms-transform: translate3d(0, -150%, 0);
transform: translate3d(0, -150%, 0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -150%, 0);
-ms-transform: translate3d(0, -150%, 0);
transform: translate3d(0, -150%, 0);
}
}
/* -------------------------------------------------------------------
* responsive:
* home
* ------------------------------------------------------------------- */
@media only screen and (max-width:1600px) {
.home-content h1 {
font-size: 6rem;
line-height: 75px;
padding-left: 25px;
}
.home-content h3 {
font-size: 3.7rem;
padding-left: 25px;
}
}
@media only screen and (max-width:1400px) {
.home-content h1 {
font-size: 16rem;
}
.home-content h3 {
font-size: 3.6rem;
}
.home-content__video .video-icon {
height: 8.4rem;
width: 8.4rem;
background-size: 22px 24px;
}
}
@media only screen and (max-width:1200px) {
.home-content {
padding-top: 4.5rem;
}
.home-content h1 {
font-size: 14rem;
}
.home-content h3 {
font-size: 3.2rem;
}
.home-content__video {
height: 6.6rem;
line-height: 6.6rem;
vertical-align: middle;
}
.home-content__video .video-link {
padding-left: 9rem;
width: auto;
}
.home-content__video .video-icon {
height: 6.6rem;
width: 6.6rem;
background-size: 12px 13px;
position: absolute;
top: 0;
left: 0;
}
.home-content__button {
margin-top: 7.2rem;
}
.home-content__button .btn {
font-size: 11px;
width: 28rem;
height: 6.6rem !important;
line-height: 6.2rem !important;
}
.home-content__scroll {
right: 7rem;
}
.home-content__scroll .scroll-link {
font-size: 1.1rem;
}
.home-social {
left: 5.5rem;
}
}
@media only screen and (max-width:1000px) {
.home-content h1 {
font-size: 13rem;
}
.home-content h3 {
font-size: 3rem;
}
.home-content__button .btn {
width: 24rem;
}
.home-content__scroll {
right: 6rem;
}
.home-social {
left: 4.5rem;
}
}
@media only screen and (max-width:900px) {
.home-content h1 {
font-size: 12rem;
}
.home-content h3 {
font-size: 2.7rem;
}
.home-social {
display: none;
}
}
@media only screen and (max-width:800px) {
.home-content h1 {
font-size: 11.4rem;
}
.home-content h3 {
font-size: 2.6rem;
}
.home-content__video {
margin-top: 3.6rem;
}
.home-content__video .video-link {
padding-left: 8rem;
}
.home-content__video .video-icon {
height: 6rem;
width: 6rem;
}
.home-content__video .video-text {
top: -6px;
font-size: 1.2rem;
line-height: 6rem;
}
.home-content__button {
margin-top: 6.6rem;
}
.home-content__button .btn {
width: 22rem;
}
}
@media only screen and (max-width:700px) {
.home-content h1 {
font-size: 10.2rem;
}
.home-content h3 {
font-size: 2.4rem;
}
.home-content__scroll {
right: 5rem;
bottom: 4.8rem;
}
.home-content__scroll::after {
display: none;
}
}
@media only screen and (max-width:600px) {
.home-content {
padding-top: 6rem;
}
.home-content h1 {
font-size: 9rem;
}
.home-content h3 {
font-size: 2.1rem;
}
.home-content__main {
padding: 0 35px;
}
.home-content__video {
margin-top: 3rem;
}
.home-content__button {
margin-top: 4.8rem;
}
.home-content__button .btn {
position: static;
display: block;
height: 6rem !important;
line-height: 5.6rem !important;
width: 100%;
max-width: 32rem;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width:500px) {
.home-content h1 {
font-size: 7.5rem;
}
.home-content h3 {
font-size: 1.8rem;
}
}
@media only screen and (max-width:400px) {
.s-home {
min-height: 630px;
}
.home-content h1 {
font-size: 6.5rem;
}
.home-content__main {
padding: 0 25px;
}
.home-content__video .video-link {
padding-left: 7.5rem;
}
.home-content__video .video-icon {
height: 5.4rem;
width: 5.4rem;
}
.home-content__video .video-text {
line-height: 5.4rem;
font-size: 1.1rem;
}
.home-content__button {
margin-top: 3.6rem;
}
}
@media only screen and (max-width:350px) {
.home-content h1 {
font-size: 6.2rem;
}
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
/* ===================================================================
* # about
*
* ------------------------------------------------------------------- */
.s-about {
/* padding-top: 12rem; */
/* padding-bottom: 12rem; */
/* background-color: #121212; */
position: relative;
top: -66px;
z-index: 1;
padding-left: 90px;
}
/* -------------------------------------------------------------------
* ## about process
* ------------------------------------------------------------------- */
.process {
margin-top: 6.6rem;
counter-reset: ctr;
}
.process h4 {
/*padding-left: 7rem;*/
color: #282943;
margin-bottom: 2.1rem;
position: relative;
}
.process h4::before {
content: counter(ctr);
counter-increment: ctr;
display: none;
font-family: "Montserrat", sans-serif;
font-size: 2.1rem;
font-weight: 700;
text-align: center;
color: #FFFFFF;
background-color: #e3061d;
height: 48px;
width: 48px;
line-height: 48px;
border-radius: 50%;
position: absolute;
left: 0;
top: -5px;
}
.item-process {
position: relative;
min-height: 24.6rem;
margin-bottom: 3rem;
}
.item-process:nth-child(2n+1) {
padding-right: 30px;
}
.item-process:nth-child(2n+2) {
padding-left: 30px;
}
/* -------------------------------------------------------------------
* responsive:
* about
* ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
.item-process:nth-child(2n+1) {
padding-right: 25px;
}
.item-process:nth-child(2n+2) {
padding-left: 25px;
}
}
@media only screen and (max-width:1000px) {
.s-about {
padding-top: 15rem;
padding-bottom: 15rem;
}
.item-process:nth-child(n) {
padding: 0 15px;
min-height: 0;
}
}
@media only screen and (max-width:600px) {
.s-about {
padding-top: 12rem;
padding-bottom: 12rem;
}
.process h4 {
padding-left: 6rem;
}
.process h4::before {
font-size: 1.8rem;
height: 42px;
width: 42px;
line-height: 42px;
top: -4px;
}
.item-process:nth-child(n) {
padding: 0 10px;
}
}
@media only screen and (max-width:400px) {
.process h4 {
padding-left: 5.8rem;
}
.process h4::before {
font-size: 1.6rem;
height: 39px;
width: 39px;
line-height: 39px;
top: -5px;
}
.item-process:nth-child(n) {
padding: 0;
margin-bottom: 1.5rem;
}
}
/* ===================================================================
* # services
*
* ------------------------------------------------------------------- */
.s-services {
padding-left: 90px;
padding-top: 9rem;
padding-bottom: 9rem;
position: relative;
background-color: rgb(232, 232, 232);
}
.s-services h1.display-1, .item-service h3, .item-service p {
color: #282943;
line-height: 25px;
}
/* -------------------------------------------------------------------
* ## services list
* ------------------------------------------------------------------- */
.services {
margin-top: 9rem;
}
.item-service {
margin-bottom: 1.9rem;
}
.item-p {
transition: all 0.2s ease-out;
top: 0px;
position: relative;
text-decoration: none;
z-index: 0;
overflow: hidden;
height: 100%;
min-height: 438px !important;
}
.item-p:hover, .item-p:focus {
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
top: -20px;
}
.item-service {
transition: all 0.2s ease-out;
width: 100% !important;
top: 0px;
position: relative;
background-color: #ffffff;
text-decoration: none;
z-index: 0;
overflow: hidden;
border: 1px solid #fff;
padding: 40px 20px 10px;
margin: 0;
}
.item-service:hover, .item-service:focus {
box-shadow: 0px 0px 30px 0px rgba(88, 88, 88, 0.10);
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
box-shadow: 0 40px 40px rgba(0, 0, 0, .16);
top: -20px;
}
.item-service h3 {
font-size: 24px;
margin-top: 0;
}
.item-service:nth-child(2n+1) {
padding-right: 15px;
}
.item-service:nth-child(2n+2) {
padding-left: 50px;
}
.item-service__text {
margin-left: 9rem;
}
.item-service__icon {
float: left;
color: #e3061d;
font-size: 4.5rem;
margin-top: -1.8rem;
}
/* -------------------------------------------------------------------
* responsive:
* services
* ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
.services {
max-width: 1000px;
}
.services .item-service:nth-child(2n+1) {
padding-right: 30px;
}
.services .item-service:nth-child(2n+2) {
padding-left: 30px;
}
}
@media only screen and (max-width:1000px) {
.s-services {
padding-top: 15rem;
padding-bottom: 15rem;
}
.services .item-service:nth-child(2n+1) {
padding-right: 20px;
}
.services .item-service:nth-child(2n+2) {
padding-left: 20px;
}
.item-service__text {
margin-left: 0;
}
.item-service__icon {
float: none;
margin-top: 0;
font-size: 4.2rem;
}
}
@media only screen and (max-width:800px) {
.services {
margin-top: 4.2rem;
}
.services .item-service:nth-child(n) {
padding-right: 15px;
padding-left: 15px;
max-width: 700px;
}
.services .service-icon {
font-size: 4.2rem;
float: none;
margin-top: 0;
}
}
@media only screen and (max-width:600px) {
.s-services {
padding-top: 12rem;
}
.services .item-service:nth-child(n) {
padding-right: 10px;
padding-left: 10px;
}
}
@media only screen and (max-width:400px) {
.services .item-service:nth-child(n) {
padding-right: 0;
padding-left: 0;
margin-bottom: 0;
}
}
/* ===================================================================
* # works
*
* ------------------------------------------------------------------- */
.s-works {
padding-top: 18rem;
padding-bottom: 18rem;
position: relative;
}
.s-works::before {
content: "";
display: block;
content: "";
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
width: 50%;
height: 100%;
opacity: .3;
background-color: rgba(0, 0, 0, 0.9);
background-image: url(../images/pattern.jpg);
background-size: 760px 380px;
}
/* -------------------------------------------------------------------
* ## bricks/masonry
* ------------------------------------------------------------------- */
.masonry-wrap {
margin-top: 7.2rem;
max-width: 1100px;
position: relative;
}
.masonry-wrap:after {
content: "";
display: table;
clear: both;
}
.masonry:after {
content: "";
display: table;
clear: both;
}
.masonry .grid-sizer,
.masonry__brick {
width: 50%;
}
.masonry__brick {
float: left;
padding: 0;
}
.item-folio {
position: relative;
overflow: hidden;
}
.item-folio__thumb img {
vertical-align: bottom;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.item-folio__thumb a {
display: block;
}
.item-folio__thumb a::before {
display: block;
background-color: rgba(0, 0, 0, 0.8);
content: "";
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.item-folio__thumb a::after {
content: "...";
font-family: georgia, serif;
font-size: 2.7rem;
display: block;
height: 30px;
width: 30px;
line-height: 30px;
margin-left: -15px;
margin-top: -15px;
position: absolute;
left: 50%;
top: 50%;
text-align: center;
color: rgba(255, 255, 255, 0.8);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
z-index: 1;
}
.item-folio__text {
position: absolute;
left: 0;
bottom: 3.6rem;
padding: 0 3.3rem;
z-index: 2;
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item-folio__title {
font-family: "Nunito Sans", sans-serif;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.286;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: .2rem;
margin: 0 0 .3rem 0;
}
.item-folio__cat {
color: rgba(255, 255, 255, 0.5);
font-family: "Nunito Sans", sans-serif;
font-size: 1.4rem;
font-weight: 300;
line-height: 1.714;
margin-bottom: 0;
}
.item-folio__caption {
display: none;
}
.item-folio__project-link {
display: block;
color: #FFFFFF;
box-shadow: 0 0 0 1px #FFFFFF;
border-radius: 50%;
height: 4.2rem;
width: 4.2rem;
text-align: center;
z-index: 500;
position: absolute;
top: 3rem;
left: 3rem;
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.item-folio__project-link i {
font-size: 1.8rem;
line-height: 4.2rem;
}
.item-folio__project-link::before {
display: block;
content: "";
height: 3rem;
width: 1px;
background-color: rgba(255, 255, 255, 0.1);
position: absolute;
top: -3rem;
left: 50%;
}
.item-folio__project-link:hover,
.item-folio__project-link:focus,
.item-folio__project-link:active {
background-color: #FFFFFF;
color: #000000;
}
/* on hover
* ----------------------------------------------- */
.item-folio:hover .item-folio__thumb a::before {
opacity: 1;
visibility: visible;
}
.item-folio:hover .item-folio__thumb a::after {
opacity: 1;
visibility: visible;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.item-folio:hover .item-folio__thumb img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.item-folio:hover .item-folio__project-link,
.item-folio:hover .item-folio__text {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* -------------------------------------------------------------------
* responsive:
* works
* ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
.s-works {
padding-top: 15rem;
padding-bottom: 15rem;
}
}
@media only screen and (max-width:800px) {
.item-folio__title,
.item-folio__cat {
font-size: 1.3rem;
}
}
@media only screen and (max-width:600px) {
.s-works {
padding-top: 12rem;
}
.masonry-wrap {
padding: 0 35px;
}
.masonry__brick {
float: none;
width: 100%;
}
.item-folio__title,
.item-folio__cat {
font-size: 1.4rem;
}
}
@media only screen and (max-width:400px) {
.masonry-wrap {
padding: 0 25px;
}
}
/* ===================================================================
* # clients
*
* ------------------------------------------------------------------- */
.s-clients {
padding-top: 12rem;
padding-bottom: 10rem;
position: relative;
padding-left: 90px;
}
.s-clients .grid-overlay {
border-right: 1px solid rgba(255, 255, 255, 0.05);
border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.s-clients .grid-overlay > div,
.s-clients .grid-overlay::before,
.s-clients .grid-overlay::after {
/*background-color: rgba(255, 255, 255, 0.05);*/
}
.section-header,
.clients-wrap,
.clients {
z-index: 3;
}
.clients-wrap {
margin-top: 6rem;
}
.clients {
list-style: none;
text-align: center;
margin-left: 0;
font-weight: 700;
font-size: 4.5rem;
position: relative;
}
.clients a {
color: rgba(255, 255, 255, 0.15);
}
.clients a:hover,
.clients a:focus {
color: #e3061d;
}
.clients li {
display: inline-block;
padding: 0 1.5rem;
}
/* -------------------------------------------------------------------
* responsive:
* clients
* ------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {
.s-clients {
padding-top: 15rem;
}
.clients {
font-size: 4.2rem;
}
}
@media only screen and (max-width:900px) {
.clients {
font-size: 4rem;
}
}
@media only screen and (max-width:800px) {
.clients-wrap {
margin-top: 3.6rem;
}
.clients {
font-size: 3.4rem;
}
}
@media only screen and (max-width:600px) {
.s-clients {
padding-top: 12rem;
padding-bottom: 10.2rem;
}
.clients {
font-size: 3rem;
}
}
@media only screen and (max-width:500px) {
.clients-wrap {
margin-top: 1.5rem;
}
.clients {
font-size: 2.4rem;
}
.clients li {
padding: 0 1rem;
}
}
@media only screen and (max-width:400px) {
.clients {
font-size: 2.1rem;
}
.clients li {
padding: 0 .6rem;
}
}
.swiper-pointer-events.swiper-vertical {
border-radius: 16px !important;
}
/* ===================================================================
* # testimonials
*
* ------------------------------------------------------------------- */
.s-testimonials {
padding-left: 90px;
padding-top: 9rem;
padding-bottom: 9rem;
text-align: center;
position: relative;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.s-testimonials::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .9;
}
.testimonials__icon {
height: 4.5rem;
width: 4.5rem;
background-color: transparent;
background-image: url(../images/icons/icon-quote.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 15rem;
left: 50%;
margin-left: -2.25rem;
display: none;
}
.testimonials__slider {
font-size: 3.6rem;
font-weight: 400;
line-height: 1.636;
margin-top: 7.2rem;
color: #FFFFFF;
position: relative;
margin-top: 10px;
}
.testimonials__slider .slick-slide {
outline: none;
padding: 15px;
}
.testimonials__slider .slick-slide p {
font-size: 24px;
color: rgb(100, 100, 100);
text-align: left;
margin-bottom: 15px;
line-height: normal;
line-height: 34px;
min-height: 70px;
padding-top: 15px;
}
.testimonials__slider .slick-slide {
transition: all 0.2s ease-out;
top: 0px;
position: relative;
border: 9px solid white;
}
.testimonials__slider .slick-slide:hover, .testimonials__slider .slick-slide:focus {
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
/*box-shadow: 0px 0px 30px 0px rgba(88, 88, 88, 0.10);
box-shadow: 0 40px 40px rgba(0, 0, 0, .16);*/
top: 0px;
border-left: 5px solid #e3061d;
border-right: 5px solid #e3061d;
border-bottom: 5px solid #e3061d;
border-top: 9px solid #e3061d;
}
.testimonials__slider .slick-slide p.sub-text {
color: rgb(160, 160, 160);
font-size: 14px;
line-height: 25px;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 130px;
}
.testimonials__slider .slick-dots {
display: block;
list-style: none;
width: 100%;
padding: 0;
margin: 3rem 0 0 0;
text-align: center;
position: absolute;
top: 100%;
left: 0;
}
.testimonials__slider .slick-dots li {
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
padding: 9px;
cursor: pointer;
}
.testimonials__slider .slick-dots li button {
display: block;
width: 10px;
height: 10px;
line-height: 10px;
border-radius: 50%;
background: black;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.testimonials__slider .slick-dots li button:hover,
.testimonials__slider .slick-dots li button:focus {
outline: none;
}
.testimonials__slider .slick-dots li.slick-active button,
.testimonials__slider .slick-dots li:hover button {
background: #e3061d;
box-shadow: 0 0 0 2px #FFFFFF;
}
.testimonials__author {
margin-top: 0;
font-family: "Nunito Sans", sans-serif;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.6;
text-transform: uppercase;
letter-spacing: .3rem;
color: #e3061d;
}
.testimonials__author span {
display: block;
font-family: "Nunito Sans", sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
text-transform: none;
letter-spacing: 0;
}
/* -------------------------------------------------------------------
* responsive:
* testimonials
* ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
.testimonials__slider {
font-size: 3.3rem;
}
}
@media only screen and (max-width:1000px) {
.s-testimonials {
padding-top: 12rem;
padding-bottom: 12rem;
}
}
@media only screen and (max-width:900px) {
.testimonials__icon {
height: 3.9rem;
width: 3.9rem;
margin-left: -1.95rem;
}
.testimonials__slider {
font-size: 3rem;
}
}
@media only screen and (max-width:800px) {
.testimonials__icon {
height: 3.6rem;
width: 3.6rem;
margin-left: -1.8rem;
}
.testimonials__slider {
font-size: 2.7rem;
}
}
@media only screen and (max-width:600px) {
.s-testimonials {
padding-top: 7.8rem;
padding-bottom: 15rem;
}
.testimonials__icon {
height: 3.3rem;
width: 3.3rem;
margin-left: -1.65rem;
top: 9rem;
}
.testimonials__slider {
font-size: 2.5rem;
}
.testimonials__author {
font-size: 1.4rem;
}
.testimonials__author span {
font-size: 1.4rem;
}
}
@media only screen and (max-width:400px) {
.testimonials__slider {
font-size: 2.1rem;
}
}
@media only screen and (max-width:350px) {
.testimonials__slider {
font-size: 1.9rem;
}
}
/* ===================================================================
* # contact
*
* ------------------------------------------------------------------- */
.s-contact {
padding-top: 12rem;
padding-bottom: 14rem;
background-color: #e3061d;
color: rgba(255, 255, 255, 0.6);
text-align: center;
position: relative;
padding-left: 90px;
}
.ss-copyright span::after {
display: none;
}
.s-contact a {
color: #FFFFFF;
}
.s-contact .grid-overlay {
border-right: 1px solid rgba(255, 255, 255, 0.12);
border-left: 1px solid rgba(255, 255, 255, 0.12);
z-index: 2;
}
.s-contact .grid-overlay > div,
.s-contact .grid-overlay::before,
.s-contact .grid-overlay::after {
}
.s-contact .subhead {
color: #000;
}
.s-contact .section-header,
.s-contact .contact-main {
z-index: 3;
position: relative;
}
.contact-main {
font-size: 3.3rem;
line-height: 1.636;
margin-top: 9rem;
}
.contact-main [class*="contact-"] {
margin-bottom: 0;
}
.contact-main .contact-email {
margin-bottom: 3.6rem;
}
.contact-email a {
font-size: 9rem;
font-weight: 700;
line-height: 1.2;
color: #FFFFFF;
border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}
.contact-email a:hover,
.contact-email a:focus {
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}
/* -------------------------------------------------------------------
* ## contact social
* ------------------------------------------------------------------- */
.contact-social {
list-style: none;
display: inline-block;
margin: 4.2rem 0 0 0;
font-size: 4.2rem;
}
.contact-social li {
margin-right: 15px;
padding-left: 0;
display: inline-block;
}
.contact-social li a {
color: white;
border: none !important;
}
.contact-social li a:hover,
.contact-social li a:focus {
color: #FFFFFF;
}
.contact-social li:last-child {
margin: 0;
}
/* -------------------------------------------------------------------
* responsive:
* contact
* ------------------------------------------------------------------- */
@media only screen and (max-width:1200px) {
.contact-main {
font-size: 3.1rem;
}
.contact-email a {
font-size: 7.6rem;
}
}
@media only screen and (max-width:1000px) {
.s-contact {
padding-top: 15rem;
padding-bottom: 19.8rem;
}
.contact-main {
font-size: 3rem;
}
.contact-email a {
font-size: 7.2rem;
}
}
@media only screen and (max-width:900px) {
.contact-main {
font-size: 2.8rem;
}
.contact-email a {
font-size: 6.2rem;
}
.contact-social {
font-size: 4rem;
}
}
@media only screen and (max-width:800px) {
.contact-main {
font-size: 2.6rem;
}
.contact-email a {
font-size: 5.5rem;
}
.contact-social {
font-size: 3.5rem;
}
}
@media only screen and (max-width:700px) {
.contact-main {
font-size: 2.4rem;
}
.contact-email a {
font-size: 3.8rem;
}
.contact-social {
font-size: 3.2rem;
}
}
@media only screen and (max-width:600px) {
.s-contact {
padding-top: 12rem;
padding-bottom: 13.2rem;
}
.contact-main {
font-size: 2.1rem;
margin-top: 7.2rem;
}
.contact-social {
font-size: 3rem;
}
}
@media only screen and (max-width:500px) {
.contact-main {
font-size: 1.8rem;
}
.contact-email a {
font-size: 3rem;
}
}
@media only screen and (max-width:400px) {
.contact-main {
font-size: 1.6rem;
margin-top: 4.5rem;
}
.contact-email a {
font-size: 2.5rem;
}
.contact-social {
margin: 3rem 0 0 0;
font-size: 2.4rem;
}
}
/* Custom Styles */
.swiper {
width: 100%;
height: 100vh;
padding: 0 0%;
}
.swiper::after {
position: absolute;
content: "";
width: 100%;
margin: auto;
height: 60px;
top: 0;
background: #142b80;
background: -moz-linear-gradient(180deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
background: -webkit-linear-gradient(180deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
background: linear-gradient(180deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#142b80",endColorstr="#142b80",GradientType=1);
mix-blend-mode: multiply(1);
z-index: 2;
}
.swiper::before {
position: absolute;
content: "";
width: 100%;
height: 60px;
bottom: 0;
background: #142b80;
background: -moz-linear-gradient(0deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
background: -webkit-linear-gradient(0deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
background: linear-gradient(0deg, #fff 0%, rgba(20, 43, 128, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#142b80",endColorstr="#142b80",GradientType=1);
mix-blend-mode: multiply(1);
z-index: 2;
}
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
-o-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
.swiper-wrapper:hover .swiper-slide {
opacity: 0.75;
}
.swiper-slide {
height: 410px !important;
font-size: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: start;
width: 100%;
border-radius: 16px;
transition: all 0.25s ease-in;
font-weight: 500;
color: #18181b;
}
.swiper-slide img {
width: 100% !important;
}
.swiper-slide:hover {
/*box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
transform: scale(1.032);
opacity: 1 !important;*/
}
.swiper-slide h4 {
margin-bottom: 0;
}
.swiper-slide img {
display: block;
width: 150px;
height: 100%;
object-fit: cover;
transition: all 0.25s ease-in;
border-bottom-left-radius: 16px;
border-top-left-radius: 16px;
border-bottom-right-radius: 16px;
border-top-right-radius: 16px;
}
.slide-info {
width: 60%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.item-process:nth-child(1) {
background: url(../images/img_1.jpg) no-repeat center center;
background-size: cover;
width: 30%;
}
.item-process:nth-child(2) {
margin-top: -30px !important;
width: 40%;
background-color: rgba(0, 0, 0, 0.4);
background: url(../images/img_2.jpg) no-repeat center center;
background-size: cover;
}
.item-process:nth-child(3) {
background: url(../images/contact.png) no-repeat center center;
background-size: contain;
width: 30%;
}
.item-process {
padding: 30px;
min-height: 436px !important;
}
.item-process__text {
padding: 30px;
}
.item-process::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(255 255 255 / 85%);
}
.item-process:nth-child(2) h4, .item-process:nth-child(2) .item-process__text p {
/*color: #fff;*/
}
.item-process:nth-child(2) .item-process__text h6 {
/*color: #fff;*/
}
.item-process:nth-child(2) .read-more span {
/*color: #fff;*/
}
.item-process:nth-child(2)::before {
background-color: rgb(255 255 255 / 60%);
background-image: url(../images/img_2.jpg) no-repeat center center;
background-size: cover;
}
.item-process__text h6{
letter-spacing: 0em;
color: red;
position: relative;
font-size: 12px;
text-transform: uppercase;
position: relative;
top: -30px;
}
.item-process:nth-child(3)::before {
/* background-color: #e3061d;*/
}
.item-process__text p {
position: relative;
color: #282943;
line-height: 26px;
padding: 0;
margin-bottom: 9px;
font-size: 18px;
font-weight: 300;
}
.item-title span {
color: #e3061d;
}
.read-more {
margin-top: 0px;
position: relative;
display: inline-block;
}
.read-more span {
top: 5px;
left: 20px;
opacity: 0;
color: #282943;
width: 100px;
position: absolute;
display: inline-block;
-webkit-transition: 500ms all ease;
transition: 500ms all ease;
font-size: 13px;
text-transform: none;
}
.read-more:hover {
padding-left: 72px;
}
.read-more:hover span {
left: 0;
opacity: 1;
}
.container-wrap {
position: relative;
overflow: hidden;
}
.scrolling-text {
display: inline-block;
transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
will-change: transform;
backface-visibility: hidden;
}
.scrolling-text .scrolling-text-content {
color: #e3061d;
font-size: 120px;
white-space: nowrap;
transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
line-height: 0.5em;
margin: 0 0 50px;
}
.cms {
padding: 9rem 0;
color: #282943;
padding-left: 90px;
}
.cms h2 {
color: #282943;
font-size: 50px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding-top: 145px;
}
.cms h2 span {
color: #e3061d;
}
.cms .container {
padding-top: 3rem;
}
.col-lg-6.pr-5 {
max-width: 45%;
}
.col-lg-6.pl-6 {
max-width: 55%;
}
.rare-box {
height: 187px;
width: 100%;
background: #e3061d;
position: relative;
}
.image {
margin-left: 30px;
top: -155px;
margin-bottom: -153px;
}
.w-100 {
width: 100%!important;
}
.pl-6 {
padding-left: 4rem;
}
.cms ul {
margin: 0 0 0px;
list-style: none;
}
.cms ul li {
padding: 0;
margin-left: 0px;
}
.cms ul li i {
margin-right: 15px;
color: #e3061d;
position: relative;
top: 2px;
}
.spancediv{
height:300px;
border-radius:30px;
color:#fff;
font-size:50px;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}
.spancediv{
background-color:#000;
}
.spancediv2{
background-color:#50915e;
}
.spancediv3{
background-color:#485c8b;
}
.spancediv4{
background-color:#e15858;
}
.big-title,.big-titles,.big-titlesw{
font-size: 150px;
position: relative;
left: 0px;
right: 81vw;
color: #e3061d;
font-size: 68px;
white-space: nowrap;
line-height: 0.5em;
margin: 0 0 0px;
text-align: center;
padding-top: 20px;
}
.cms .big-title {
color: #282943;
}
.cms .big-title span {
color: #e3061d;
}
.cms h2 {
color: #282943;
font-size: 50px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
}
.animation-element.slide-left.in-view {
opacity: 1;
transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-left {
opacity: 1;
transition: all 500ms linear;
transform: translate3d(-300px, 0px, 0px);
}
.animation-element {
opacity: 1;
}
/* Carousel styling */
#introCarousel,
.carousel-inner,
.carousel-item,
.carousel-item.active {
height: 100vh;
}
.carousel-item:nth-child(1) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.carousel-item:nth-child(2) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.carousel-item:nth-child(3) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* Height for devices larger than 576px */
@media (min-width: 992px) {
#introCarousel {
/*margin-top: -58.59px;*/
}
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-attachment: fixed;
}
.mask h1 {
font-size: 6rem;
line-height: 75px;
padding-left: 25px;
font-weight: 700;
font-size: 6rem;
line-height: 1;
letter-spacing: -.02em;
color: #fff;
margin-top: 0;
margin-bottom: 0;
line-height: 70px;
text-shadow: 1px 1px 1px #000000;
}
.mask h1 span {
color: #e3061d;
}
.mask p {
font-size: 3.7rem;
padding-left: 25px;
margin-top: 1.2rem;
font-family: "Nunito Sans", sans-serif;
font-size: 2.2rem;
line-height: 32px;
font-style: normal;
color: #fff;
text-shadow: 1px 1px 1px #000000;
}
.carousel-control-next, .carousel-control-prev {
width: 7%;
top: 5%;
}
.mask .text-white {
text-align: left;
padding-top: 8%;
}
.subscribe-form button {
position: absolute;
right: 0;
background: #e3061d;
padding: 14px 20px;
border: 1px solid #e3061d;
top: 0;
color: #fff;
}
.footer-section {
background: #151414;
position: relative;
padding-left: 90px;
padding-top: 12rem;
}
.footer-cta {
border-bottom: 1px solid #373636;
}
.single-cta i {
color: #e3061d;
font-size: 30px;
float: left;
margin-top: 8px;
}
.cta-text {
padding-left: 15px;
display: inline-block;
}
.cta-text h4 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 2px;
margin: 0;
}
.single-cta .bi {
font-size: 24px;
position: relative;
color: #fff;
top: -10px;
}
.single-cta {
line-height: inherit;
}
.cta-text span {
color: #757575;
font-size: 15px;
line-height: 22px;
display: inherit;
}
.footer-content {
position: relative;
z-index: 2;
}
.footer-pattern img {
position: absolute;
top: 0;
left: 0;
height: 330px;
background-size: cover;
background-position: 100% 100%;
}
.footer-logo {
margin-bottom: 30px;
}
.footer-logo img {
max-width: 200px;
}
.footer-text p {
margin-bottom: 14px;
font-size: 14px;
color: #7e7e7e;
line-height: 24px;
}
.footer-social-icon span {
color: #fff;
display: block;
font-size: 20px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
}
.footer-social-icon a {
color: #fff;
font-size: 16px;
margin-right: 15px;
}
.footer-social-icon i {
height: 40px;
width: 40px;
text-align: center;
line-height: 38px;
border-radius: 50%;
}
.facebook-bg{
background: #3B5998;
}
.twitter-bg{
background: #55ACEE;
}
.google-bg{
background: #DD4B39;
}
.footer-widget-heading h3 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
position: relative;
margin: 0 0 35px;
}
.footer-widget-heading h3::before {
content: "";
position: absolute;
left: 0;
bottom: -15px;
height: 2px;
width: 50px;
background: #e3061d;
}
.footer-widget ul li {
display: inline-block;
float: left;
width: 50%;
margin-bottom: 0px;
}
.footer-widget ul li a:hover{
color: #e3061d;
}
.footer-widget ul li a {
color: #878787;
text-transform: capitalize;
font-size: 16px;
}
.subscribe-form {
position: relative;
overflow: hidden;
}
.subscribe-form input {
width: 100%;
padding: 14px 28px;
background: #2E2E2E;
border: 1px solid #2E2E2E;
color: #fff;
border-radius: 20px;
height: 54px;
}
.subscribe-form button {
position: absolute;
right: -5px;
background: #e3061d;
padding: 14px 20px;
border: 1px solid #e3061d;
top: 0;
color: #fff;
}
.bi-envelope {
font-size: 18px;
position: relative;
top: -11px;
}
.subscribe-form button i {
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}
.copyright-area{
background: #202020;
padding: 25px 0;
}
.copyright-text p {
margin: 0;
font-size: 14px;
color: #878787;
}
.copyright-text p a{
color: #e3061d;
}
.footer-menu li {
display: inline-block;
margin-left: 20px;
}
.footer-menu li:hover a{
color: #e3061d;
}
.footer-menu li a {
font-size: 14px;
color: #878787;
}
.social a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background: #e1e1e1;
position: relative;
text-align: center;
transition: 0.3s background ease;
color: #0d1e2d;
line-height: 0;
}
.social a span {
display: inline-block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
color: #e3061d;
}
.single-cta .bi {
font-size: 24px;
position: relative;
color: #fff;
top: -10px;
}
.footer-menu ul {
margin: 0;
}
/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content {
height: initial;
}
.accordion-item-content,
.accordion:hover .accordion-item-content {
height: 0;
overflow: hidden;
transition: height .25s;
}
.accordion {
padding: 0;
width: 68%;
}
.accordion .accordion-item p {
padding: 0;
margin: 0;
}
.accordion .accordion-item {
padding: 10px 0;
background: none;
border: none;
}
.accordion h1, .accordion h1 a {
margin: 0;
color: #282943;
}
.accordion h1 a:hover,
.accordion h1 a:focus {
color: #282943;
}
.header-nav a, .header-nav a:visited {
color: #282943;
}
.mega-col {
padding: 15px 0 0 15px;
margin: 0;
max-height: 250px;
overflow-y: scroll;
}
.mega-col li {
list-style: none;
margin: 0;
}
.longEnough {
width: 360px;
max-height:250px;
}
.mega-col li a {
line-height: 20px;
display: inherit;
padding-bottom: 10px;
}
.cms .sub-text {
font-size: 40px;
font-weight: 300;
padding: 0 0 5px;
margin: 0;
line-height: initial;
}
.cms .sub-text span {
color: #e3061d;
}
.cms .sub-text-2 {
font-size: 28px;
font-weight: 300;
padding: 0 0 5px;
margin: 0;
line-height: initial;
}
.cms .sub-text-2 span {
color: #e3061d;
}
.services h2 {
color: #282943;
font-size: 50px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
}
.services p.sub-text-3 {
color: #282943;
font-size: 40px;
font-weight: 300;
padding: 0 0 5px;
margin: 0;
line-height: initial;
padding: 0 6rem;
padding-bottom: 30px !important;
}
.services h2 span, .services p span {
color: #e3061d;
}
.footer-wrapper {
background-color: rgb(232, 232, 232);
}
.footer-middle {
padding: 50px 0px 40px;
}
.footer-wrapper p {
padding: 0;
margin: 0;
}
.footer-wrapper p.social {
float: right;
}
.footer-wrapper p.social a{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
background: transparent;
position: relative;
text-align: center;
color: #282943;
line-height: 0;
border: 1px solid #282943;
}
.footer-links, .footer-links li {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
.social a span {
display: inline-block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
color: #282943;
}
.footer-social-icon span {
color: #a7a7a7;
display: block;
font-size: 15px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
margin-bottom: 0;
}
.footer-links li {
list-style: none;
padding: 0;
margin: 0;
min-width: 190px;
float: left;
text-decoration: underline;
}
.footer-links li a {
font-size: 14px;
text-transform: uppercase;
color: #282943;
}
.footer-links li a:hover,
.footer-links li a:focus {
color: #e3061d;
}
.footer-top {
padding: 3rem 0;
margin: 0 0px;
border-bottom: 1px solid #282943;
}
.footer-top p {
padding: 0;
margin: 0;
font-size: 2.2rem;
color: #282943;
padding-bottom: 2.5rem;
}
.cmp-button--subscription-center .cmp-button {
width: auto;
height: auto;
margin: 0;
padding: 1rem;
min-width: auto;
text-decoration: none;
position: relative;
text-transform: none;
font-family: Graphik,Arial,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,ubuntu,Helvetica Neue,oxygen,cantarell,sans-serif;
font-weight: 500;
font-size: 2.8rem;
line-height: 3.5rem;
background: none;
cursor: pointer;
color: #e3061d;
text-align: left;
opacity: 1;
-webkit-transition: opacity .6s ease;
transition: opacity .6s ease;
padding-right: 25px;
}
.cmp-button--subscription-center .cmp-button:before {
content: "";
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 4.6rem;
height: 4.6rem;
border: 2.8px solid #e3061d;
border-radius: 80px;
position: absolute;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.cmp-button--subscription-center .cmp-button .cmp-button__text {
background: url(../images/contact-arrow.png) no-repeat center left;
-webkit-transition: opacity .7s ease .8s;
transition: opacity .7s ease .8s;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 1.4rem;
position: relative;
top: -10px;
}
.cmp-button--subscription-center .cmp-button .cmp-button__text:before {
content: "";
font-size: 58px;
font-family: Ionicons;
display: block;
font-weight: 400;
font-style: normal;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
font-weight: 500;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: none;
transition: none;
margin-right: 2.1rem;
width: 3.8rem;
height: 2rem;
color: #282943;
}
.cmp-button--subscription-center .cmp-button:focus:before, .cmp-button--subscription-center .cmp-button:hover:before {
width: 100%;
}
.footer-links-2 {
padding: 0;
margin: 0;
}
.footer-links-2 li {
list-style: none;
padding: 0;
margin: 0;
float: left;
text-decoration: underline;
}
.footer-links-2 li {
min-width: inherit;
padding-right: 30px;
}
.footer-links-2 li a {
font-size: 1.1rem;
color: #282943;
}
.footer-links-2 li a:hover,
.footer-links-2 li a:focus {
color: #e3061d;
}
.copyright {
font-size: 1.1rem;
color: #282943;
padding: 0;
margin: 0;
float: right;
position: relative;
top: 8px;
}
.footer-bottom {
border-top: 1px solid #282943;
padding: 15px 0;
}
.footer-wrapper {
padding-left: 90px;
}
.footer-wrapper .col-md-12 {
padding: 0;
}
.blog .blog-slide {
outline: none;
padding: 15px;
}
.blog .slide {
padding: 30px;
transition: all 0.2s ease-out;
border: 5px solid white;
margin: 0;
}
.blog .slide p {
font-size: 24px;
color: rgb(100, 100, 100);
text-align: left;
margin-bottom: 15px;
line-height: normal;
line-height: 34px;
min-height: 70px;
font-weight: bold;
}
.blog .slide p.sub-text {
color: rgb(160, 160, 160);
font-size: 14px;
line-height: 25px;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 125px;
font-weight: normal;
}
.blog .slide:hover, .blog .slide:focus {
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
/*box-shadow: 0px 0px 30px 0px rgba(88, 88, 88, 0.10);
box-shadow: 0 40px 40px rgba(0, 0, 0, .16);*/
top: 0px;
border-left: 5px solid #e3061d;
border-right: 5px solid #e3061d;
border-bottom: 5px solid #e3061d;
border-top: 5px solid #e3061d;
top: 4px;
position: relative;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
border-radius: 8px;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
text-align: left;
display: block;
}
.slick-initialized .slick-slide .read-more span {
top: -7px;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
#blog {
background: url(../images/clients-bg.png) no-repeat 0 center;
background-size: cover;
}
#blog h1 {
color: #fff;
}
#blog::before {
background: rgba(0, 0, 0, 0.6);
content: "";
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
right: 0;
}
.customer-logos .slide {
background: #fff;
border-radius: 8px;
}
.menu-is-open .logo-1 {
display: none;
}
.about-content h1, .about-content h2, .about-content p {
text-shadow: 1px 1px 1px #000000;
color: #282943;
}
.about-banner h2{
padding-left: 25px;
margin-top: 2rem;
font-size: 45px;
text-shadow: 1px 1px 1px #000000;
}
.about-banner h2 span, .about-banner p.sub-text span {
color: #e3061d;
}
.process-wrapper.arrow [class*=col-]:before {
background-image: url(images/arrow-about.svg);
}
.process-wrapper.arrow [class*=col-] {
position: relative;
color: rebeccapurple;
}
.process-wrapper.line.text-center [class*=col-]:first-child:before,.process-wrapper.line.text-center [class*=col-]:last-child:after {
display: none
}
.process-wrapper.arrow [class*=col-]:before {
content: "";
background-image: url(../images/arrow-about.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: 70% 70%;
position: absolute;
width: 6rem;
height: 1rem;
top: 0.8rem;
left: -3rem;
z-index: 1;
opacity: 1;
}
.our-work-culture {
background: rgb(232, 232, 232);
padding: 9rem 0;
padding-left: 90px;
}
.our-work-culture h2 {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
}
.process-wrapper.arrow [class*=col-]:nth-child(odd):before {
transform: scaleY(-1);
}
@media(min-width: 992px) {
.pricing-wrapper .popular .pricing.card {
padding-top:1rem;
padding-bottom: 1rem;
margin-top: -1rem
}
.process-wrapper.line [class*=col-] {
position: relative
}
.process-wrapper.line [class*=col-]:after {
width: 100%;
position: absolute;
content: "";
height: 1px;
background: none;
border-top: 2px solid rgb(0 0 0 / 20%);
top: 22px;
z-index: 1;
left: 3rem;
}
.process-wrapper.line [class*=col-]:last-child:after {
display: none
}
.process-wrapper.line.text-center [class*=col-]:after,.process-wrapper.line.text-center [class*=col-]:before {
width: 50%;
position: absolute;
content: "";
height: 1px;
background: rgba(164,174,198,.2);
border: 0;
top: 1.5rem;
z-index: 1;
left: 0
}
.process-wrapper.line.text-center [class*=col-]:after {
right: 0;
left: auto
}
.process-wrapper.line.text-center [class*=col-]:first-child:before,.process-wrapper.line.text-center [class*=col-]:last-child:after {
display: none
}
.process-wrapper.arrow [class*=col-] {
position: relative
}
.process-wrapper.arrow [class*=col-]:before {
content: "";
background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108.15 19.5'%3E%3Cpath fill='%233f78e0' d='M2.38,13.63A107.77,107.77,0,0,1,41.56,3.28C54.29,2.51,67,4.2,79.4,6.9c7.73,1.68,15.38,3.73,23,5.86a1.56,1.56,0,0,0,.83-3C89.85,6,76.35,2.5,62.54.87A111,111,0,0,0,24,2.73,119,119,0,0,0,.8,10.93c-1.81.85-.23,3.54,1.58,2.7Z'/%3E%3Cpath fill='%233f78e0' d='M95.51,19.27A60.35,60.35,0,0,1,107,12.41a1.58,1.58,0,0,0,1.12-1.29,1.53,1.53,0,0,0-.75-1.56,20.31,20.31,0,0,1-9-8.65,1.56,1.56,0,0,0-2.7,1.57c2.34,4,5.79,7.86,10.12,9.78l.37-2.86a62.69,62.69,0,0,0-12.25,7.18,1.6,1.6,0,0,0-.56,2.14,1.56,1.56,0,0,0,2.13.55Z'/%3E%3C/svg%3E);
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
position: absolute;
width: 15rem;
height: 3rem;
top: 0.8rem;
left: -9rem;
z-index: 1;
}
.process-wrapper.arrow [class*=col-]:nth-child(odd):before {
transform: scaleY(-1)
}
.process-wrapper.arrow [class*=col-]:first-child:before {
display: none
}
}
.process-wrapper.line .btn-circle {
position: relative;
z-index: 2
}
.our-work-culture p {
color: #282943;
font-size: 28px;
line-height: normal;
padding: 3% 0 0 0;
font-weight: 300;
text-align: left;
}
.btn-group-lg>.btn.btn-circle,.btn.btn-circle.btn-lg {
width: 30px;
height: 30px;
font-size: calc(1.255rem + .06vw);
border-radius: 50%;
padding: 10px !important;
text-align: center;
background: #09b3af;
background: #e3061d;
color: #fff;
margin-top: 7px;
}
.process-wrapper {
text-align:center;
}
.process-wrapper h4 {
font-size: 20px;
padding-bottom: 10px;
}
.process-wrapper.line:after {
position: absolute;
content: "";
height: 1px;
background: none;
border-top: 1px solid #09b3af;
top: 2rem;
z-index: 1;
left: 20rem;;
}
.our-leadership {
padding: 9rem 0 9rem 90px;
color: #282943;
}
.process-wrapper.line [class*=col-]:after {
left: 20rem;;
border-top: 1px solid #282943;
}
.our-leadership h2 {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
}
.our-leadership p {
color: #282943;
font-size: 28px;
line-height: normal;
padding: 0% 5%;
font-weight: 300;
text-align: left;
}
.testimonials-wrap {
color: red;
padding: 9rem 0;
padding-left: 90px;
}
.testimonials-wrap {
padding: 9rem 0;
padding-left: 90px;
}
.testimonials-wrap .slide p {
color: #282943;
font-size: 28px;
line-height: normal;
padding: 0% 5%;
font-weight: 300;
text-align: left;
text-align: center;
padding: 0 10%;
}
.testimonials-wrap p.name {
font-style: italic;
padding: 0;
margin: 0;
}
.testimonials-wrap p.designation {
font-size: 18px;
color: #666;
padding: 0;
margin: 0 0 15px;
}
.contact-info {
color: #e3061d;
}
.btn-main {
background: #e3061d;
color: white;
border: none;
font-size: 15px;
letter-spacing: 0.1px;
}
.btn-main:hover,
.btn-main:focus {
background-color: black;
border-color: black;
color: #ffffff;
outline: 0;
}
.contact-form-wrap {
background-color: rgb(232, 232, 232);
padding: 9rem 0;
padding-left: 90px;
}
.contact-map {
padding: 9rem 0;
}
.contact-map .col-md-12 label {
color: #282943;
}
.contact-form {
background-color: rgb(232, 232, 232);
padding: 7% 5%;
}
.contact-form-wrap h2 {
color: #282943;
font-size: 28px;
line-height: normal;
padding: 3% 0 0 0;
font-weight: 300;
text-align: left;
padding: 0;
margin: 0;
text-align: center;
padding-bottom: 30px;
}
.contact-form-wrap h1 span, .contact-form-wrap h2 span {
color: #e3061d;
}
.contact-info {
color: #282943;
}
.contact-info h4 {
color: #282943;
font-size: 36px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
padding-bottom: 25px;
padding-top: 5px;
}
.contact-info h4 span, .contact-info h5 span {
color: #e3061d;
}
.contact-info .bi-envelope {
top: 4px;
font-size: 28px;
}
.contact-info p {
color: #282943;
font-size: 28px;
line-height: normal;
padding: 0 0 0 0;
font-weight: 300;
text-align: left;
padding: 0;
margin: 0;
text-align: left;
padding-bottom: 15px;
}
.contact-info p span {
width: 50px;
display: inline-block;
}
.contact-info h5 {
color: #282943;
font-size: 28px;
margin: 0;
line-height: normal;
padding-bottom: 15px !important;
padding: 0;
padding-bottom: 40px;
}
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
background-color: #e3061d !important;
}
}
/* Responsive Styles */
header > nav > ul > li:hover > a {
color: rgb(140, 193, 193);
}
header > nav > ul > li > nav {
background-color: rgb(51,51,51);
border-radius: 1.5em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
}
header > nav > ul > li > nav > ul > li > a {
color: rgba(255,255,255,.85);
transition: 300ms all ease;
}
header > nav > ul > li > nav > ul > li:hover > a {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,1);
}
/* Medium screens */
@media all and (min-width: 600px) {
header > div#logo > div#navToggle {
display: none;
}
header {
background-color: white;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
text-align: left;
width: 100%;
}
header > div#logo {
background-color: transparent;
line-height: 90px;
}
header > div#logo > h1 {
color: rgb(140, 193, 193);
}
header > nav {
background-color: transparent;
display: block;
}
header > nav > ul {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
header nav > ul > li {
border-bottom: none;
}
header nav > ul > li > a {
padding: 0 1.25rem;
}
header nav > ul > li > a span.toggle {
display: none;
}
header nav > ul > li > a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(0,0,0,.65);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
header nav > ul > li:hover > a span.caret {
border-top-color: rgb(140, 193, 193);
transform: rotate(270deg);
}
header > nav > ul > li:hover > nav {
background-color: rgb(51,51,51);
border-radius: .25em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: block;
line-height: 3em;
right: -50%;
width: 196px;
}
}
.mobile-header {
display: none;
}
.services-slider .slick-next, .services-slider .slick-prev {
position: absolute;
right: 0;
bottom: -66px;
margin-right: 2.5%;
content: none;
background: #e3061d;
border: none;
padding: 0;
height: inherit;
line-height: inherit;
color: #fff;
padding: 6px 12px;
border-radius: 15px;
letter-spacing: 2px;
font-size: 10px;
padding-left: 14px;
padding-top: 7px;
}
.services-slider .slick-prev {
margin-right: 7.5%;
}
.services-slider .slick-slide img
{
border-radius: 0px;
}
.services-slider .slick-slide {
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s,-webkit-transform .5s;
-webkit-transform: scale(.95);
transform: scale(.95);
background: #000 !important;
}
.services-slider .slick-slide img {
opacity: 0.6;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s,
}
.services-slider .slick-slide:hover {
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s,
-webkit-transform .5s;
-webkit-transform: scale(1);
transform: scale(1);
}
.services-slider .slick-slide:hover img {
opacity: 0.6;
}
.services-slider .slide-content {
position: absolute;
z-index: 1;
bottom: 0;
opacity: 1;
padding: 30px;
color: #fff;
line-height: 24px;
}
.services-slider .slide-content p {
font-size: 36px;
font-weight: 300;
}
.width-50 {
width: 100% !important;
color: #282943;
margin: 5% 0 5% 3%;
}
.padding-fifteen {
padding: 5% !important;
font-size: 24px;
font-weight: 300;
line-height: 40px;
}
.bg-gray {
background: rgba(255,255,255, 0.8);
}
.margin-fifteen-bottom {
margin-bottom: 15px !important;
}
.title-extra-large-2 {
color: #282943;
font-size: 50px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
}
.tz-builder-bg-image .title-extra-large-2 {
font-size: 36px;
}
.title-extra-large-2 span, .margin-twelve-bottom span, .margin-fifteen-bottom span {
color: #e3061d;
font-weight: bold;
}
.margin-twelve-bottom {
margin-bottom: 15px !important;
}
.grab-position {
padding: 9rem 0;
text-align: center;
}
.grab-position h2 {
color: #282943;
font-size: 50px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
}
.grab-position p {
color: #282943;
font-size: 40px;
font-weight: 300;
padding: 0 0 5px;
margin: 0;
line-height: initial;
padding: 0 6rem;
}
.grab-position h2 span, .grab-position p span {
color: #e3061d;
font-weight: bold;
}
.job-openings {
padding: 9rem 0;
padding-left: 90px;
}
.s-open-positions-pu>ul>li:first-child {
border-top: 1px solid #dbdbdb;
}
.c-open-po-card {
padding: 28px 0 24px;
}
.c-open-po-card a {
font-size: 30px;
margin-bottom: 8px;
position: relative;
padding-left: 25px;
font-weight: bold;
}
.c-open-po-card__details {
margin-top: 6px;
padding-left: 5px;
}
.c-open-po-card__title:after {
top: 14px !important;
}
.c-open-po-card__title:after {
background: #ea002a;
border-radius: 50%;
content: "";
height: 8px;
left: 0;
position: absolute;
top: 10rem;
width: 8px;
}
.c-open-po-card__details>li:last-child {
border-right: none;
}
.p--s {
font-size: 14px;
color: #7d7d7d;
}
.c-open-po-card {
border-bottom: 1px solid #dbdbdb;
padding: 15px 0;
}
.c-open-po-card__details>li {
margin-bottom: 12px;
margin-right: 12px;
padding-right: 12px;
display: inline-block;
}
.c-open-po-card__details>li {
border-right: 1px solid #dbdbdb;
line-height: 1.1;
margin-bottom: 8px;
margin-right: 8px;
padding-right: 8px;
}
.modal-lg, .modal-xl {
--bs-modal-width: 1200px;
}
.modal h4, .modal h3 {
color: #282943;
}
.modal .modal-content {
border-radius: 0;
border: none;
padding: 50px 40px;
}
.modal .close {
background: none;
border: none;
padding: 0;
line-height: initial;
height: inherit;
font-size: 40px;
margin-top: -50px;
font-weight: 300;
margin-right: -10px;
color: #e3061d;
position: absolute;
right: 30px;
top: 60px;
}
.modal .modal-footer, .modal .modal-header {
border: none;
}
.modal {
color: #282943;
}
.modal .modal-header {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
font-weight: 300;
display: initial;
}
.modal .c-open-po-card__details {
padding: 0;
margin: 0;
padding-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 300;
color: #545454;
}
.modal .modal-body p {
font-size: 18px;
font-weight: 300;
line-height: 30px;
margin-bottom: 2rem;
}
.modal .longEnough {
width: 100%;
max-height: 480px;
}
.modal h2 {
font-weight: 300;
margin: 0;
padding-bottom: 15px;
color: #282943;
}
.modal ul li {
font-size: 18px;
font-weight: 300;
line-height: 30px;
margin-bottom: 15px;
}
.modal .modal-header a {
background: #e3061d;
color: #fff;
font-size: 20px;
padding: 15px 30px;
text-align: left;
margin: 0;
/* position: absolute; */
/* right: 0; */
margin-left: 30px;
position: relative;
top: -7px;
}
.careers-form {
padding: 9rem 0;
padding-left: 90px;
padding-top: 2rem;
}
.careers-form .container {
padding: 0 30px;
}
.careers-form form {
background-color: rgb(232, 232, 232);
padding: 7% 5%;
display: inline-block;
width: 100%;
}
.careers-form-main h2 {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
font-weight: 300;
display: initial;
text-align: center;
width: 100%;
display: inherit;
padding: 9rem 0 0 0;
}
.careers-form-main h2 a {
font-size: 16px;
text-decoration: underline;
position: absolute;
left: 18rem;
top: 11rem;
}
.careers-form-main .c-open-po-card__details {
padding: 0;
margin: 0;
padding-top: 10px;
margin-bottom: 10px;
font-size: 18px;
font-weight: 300;
color: #545454;
}
.careers-form-main ul {
font-size: 14px;
color: #7d7d7d;
text-align: center;
margin: 0;
margin-top: 15px;
}
.careers-form-main ul li {
font-size: 18px;
font-weight: 300;
line-height: 30px;
margin-bottom: 15px;
}
.careers-form form input {
height: 45px !important;
outline: none !important;
font-size: 14px !important;
height: 60px !important;
border: 3px solid rgb(215 214 214);
!important: ;
box-shadow: none !important;
width: 100% !important;
background: #fff !important;
color: #6c757d!important;
margin: 0;
padding: 0 15px;
}
.careers-form form label {
display: inline-block;
margin-bottom: 0.5rem;
color: #282943;
font-size: 18px;
}
.careers-form form .form-group {
margin-bottom: 15px;
padding: 0 40px;
}
.careers-form form textarea {
min-height: 110px;
font-size: 14px;
padding: 15px
}
.careers-form .form-control[type=file] {
overflow: hidden;
background: none !important;
border: none;
height: inherit !important;
background-color: transparent;
padding: 0;
margin-bottom: 20px !important;
color: red;
}
.form-group .btn-main {
background-color: #e3061d !important;
border: none;
position: relative;
float: left;
width: 178px !important;
background: #e3061d !important;
color: #fff !important;
}
/* Blog Styles */
.blog-cover {
background-size: cover !important;
border-radius: 5px 5px 0 0;
height: 25rem;
box-shadow: inset hsla(0, 0, 0, .2) 0 64px 64px 16px;
}
.blog-author,
.blog-author--no-cover {
margin: 0 auto;
padding-top: .125rem;
width: 80%;
}
.blog-author h3::before,
.blog-author--no-cover h3::before {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/17779/russ.jpeg");
background-size: cover;
border-radius: 50%;
content: " ";
display: inline-block;
height: 32px;
margin-right: .5rem;
position: relative;
top: 8px;
width: 32px;
}
.blog-author h3 {
color: #fff;
font-weight: 100;
}
.blog-author--no-cover h3 {
color: lighten(#333, 40%);
font-weight: 100;
}
.blog-body {
margin: 0 auto;
width: 80%;
}
.video-body {
height: 100%;
width: 100%;
}
.blog-title h1 a {
color: #333;
font-weight: 500;
line-height: 36px;
font-size: 20px;
}
.blog-summary p {
margin-bottom: 2rem;
}
.blog-tags ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}
.blog-tags li + li {
margin-left: .5rem;
}
.blog-tags a {
border: 1px solid lighten(#333, 40%);
border-radius: 3px;
color: lighten(#333, 40%);
font-size: .75rem;
height: 1.5rem;
line-height: 1.5rem;
letter-spacing: 1px;
padding: 0 .5rem;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
width: 5rem;
}
.blog-footer {
border-top: 1px solid lighten(#333, 70%);
margin: 0 auto;
padding-bottom: .125rem;
width: 80%;
}
.blog-footer ul {
list-style: none;
display: flex;
flex: row wrap;
justify-content: flex-end;
padding-left: 0;
}
.blog-footer li:first-child {
margin-right: auto;
}
.blog-footer li + li {
margin-left: .5rem;
}
.blog-footer li {
color: lighten(#333, 40%);
font-size: .75rem;
height: 1.5rem;
letter-spacing: 1px;
line-height: 1.5rem;
text-align: center;
text-transform: uppercase;
position: relative;
white-space: nowrap;
& a {
color: lighten(#333, 40%);
}
}
.comments {
margin-right: 1rem;
}
.published-date {
border: 1px solid lighten(#333, 40%);
border-radius: 3px;
padding: 0 .5rem;
}
.numero {
position: relative;
top: -0.5rem;
}
.blog-main {
padding-left: 90px;
color: #282943;
padding-bottom: 90px;
}
.blog-main .container {
}
.blog-main h1 {
margin-top: 30px;
line-height: 20px;
min-height: 108px;
margin-bottom: 0;
}
.blog-main h2 {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
font-weight: 300;
display: initial;
text-align: center;
width: 100%;
display: inherit;
padding: 9rem 0 0 0;
margin-bottom: 30px;
text-align: left;
}
.blog-main .blog-container {
background-color: rgb(232, 232, 232);
padding-bottom: 40px;
display: inline-block;
margin-bottom: 40px;
transition: all 0.2s ease-out;
top: 0px;
}
.blog-main .col-md-12 {
position: relative;
}
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
#myInput {
background: white;
width: 28%;
border-radius: 25px;
color: gray;
position: absolute;
border: 2px solid #e3061d;
z-index: 1;
right: 20px;
top: 85px;
}
.blog-main .blog-container:hover,
.blog-main .blog-container:focus {
background: red;
cursor: pointer;
color: #fff;
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
top: -20px;
}
.blog-main .blog-container:hover h1 a,
.blog-main .blog-container:focus h1 a {
color: #fff;
-webkit-transform: translate(0, -4px);
-moz-transform: translate(0, -4px);
-ms-transform: translate(0, -4px);
-o-transform: translate(0, -4px);
transform: translate(0, -4px);
top: -20px;
}
.post-card-bottom {
color: #798099;
justify-content: center;
align-items: center;
margin-bottom: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 12px;
line-height: 20px;
display: flex;
}
.blog-details .blog-body {
margin: 0 auto;
width: 92%;
}
.blog-details .blog-cover {
height: 40rem;
background-position: center !important;
}
.blog-main h2 a {
font-size: 16px;
text-decoration: underline;
/* position: absolute; */
left: 18rem;
/* top: 11rem; */
/* padding-bottom: 30px; */
/* display: inline-grid; */
display: inherit;
text-align: left;
padding-left: 90px;
}
.blog-main .btn-main {
background-color: #e3061d !important;
border: none;
position: relative;
float: left;
width: 178px !important;
background: #e3061d !important;
color: #fff !important;
outline: none !important;
font-size: 14px !important;
height: 60px !important;
border: 3px solid rgb(215 214 214);
padding: 0 15px;
text-align: center;
line-height: 60px;
border: none !important;
text-transform: uppercase;
letter-spacing: .4rem;
}
.blog-details .blog-container {
margin-bottom: 0px;
}
.blog-details .blog-container h3 {
color: #282943;
margin: 0 0 2rem;
font-size: 22px;
}
.blog-details ul li {
padding-bottom: 2rem;
}
.blog-details ul li:after {
background: #ea002a;
border-radius: 50%;
content: "";
height: 8px;
left: 0;
position: absolute;
top: 10rem;
width: 8px;
}
.blog-details h1 {
margin-top: 30px;
line-height: 20px;
min-height: inherit;
margin-bottom: 30px;
}
.blog-details h1 a {
font-size: 34px;
}
.blog-details .blog-container:hover, .blog-details .blog-container:focus {
background-color: rgb(232, 232, 232);
cursor: pointer;
color: #282943;
-webkit-transform: translate(0, 0px);
-moz-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
-o-transform: translate(0, 0px);
transform: translate(0, 0px);
top: 0px;
}
.blog-details .blog-container:hover h1 a, .blog-details .blog-container:focus h1 a {
color: #282943;
}
@media only screen and (max-width: 767px) {
.mobile-header {
display: block;
position: fixed;
z-index: 999999;
background-color: rgb(232, 232, 232);
width: 100%;
padding: 15px 15px;
}
.mobile-header nav {
display: none;
}
.mobile-header #logo {
display: flex;
}
.mobile-header #logo a {
width: 259px;
}
.mobile-header #logo a img {
width: 100%;
}
.header-menu-icon {
background-color: #e01f28;
position: fixed;
top: 43px;
right: 15px;
left: inherit;
}
.accordion .card {
border: none;
}
.accordion .card h2 {
background: url(https://cdn0.iconfinder.com/data/icons/entypo/91/arrow56-512.png) no-repeat calc(100% - 10px) center;
background-size: 20px;
cursor: pointer;
}
.accordion .card h2.collapsed {
background-image: url(https://cdn0.iconfinder.com/data/icons/arrows-android-l-lollipop-icon-pack/24/expand2-256.png);
}
.accordion .card h2.img-none {
background-image: none;
}
.accordion .card-body {
padding-left: 0;
padding-right: 0;
}
.accordion {
width: 100%;
padding: 30px 0;
}
.accordion h2 {
margin: 0;
color: #282943;
font-size: 25px;
padding: 7px 0;
}
.accordion h2 a {
color: #282943;
}
.accordion .card-body {
color: red;
}
.accordion .card {
background: none;
border: none;
}
.mCustomScrollBox {
max-width: 95%;
}
.accordion .card-body ul, .accordion .card-body ul li {
list-style: none;
margin: 0;
}
.accordion .card-body ul li a {
color: #282943;
}
.longEnough {
margin: 0;
width: 320px;
max-height: 150px;
}
.footer-wrapper, .s-about, .cms, .s-services, .s-testimonials, .our-work-culture, .our-leadership, .contact-form-wrap {
padding-left: 0;
}
.footer-links li:first-child img {
margin-bottom: 25px;
}
.s-about, .cms, .s-testimonials, .our-work-culture, .our-leadership, .contact-form-wrap {
padding-top: 3rem;
padding-bottom: 3rem;
}
.cms {
margin-top: -9rem;
}
.cms .container {
padding-top: 0;
}
.item-service {
padding: 0;
margin: 0;
}
.item-service h3 {
font-size: 20px;
margin-top: 15px;
}
.footer-links li {
min-width: 90px !important;
}
.footer-middle {
padding: 30px 0px 20px;
}
.footer-social-icon {
text-align: center;
}
.footer-wrapper p.social {
float: left;
margin-top: 20px;
}
.footer-wrapper p {
line-height: 30px;
width: 100%;
text-align: left;
}
.about-banner h2 {
display: none;
}
.sub-text {
display: none;
}
.mask h1 {
font-size: 3rem;
line-height: 36px;
text-shadow: 1px 1px 1px #000000;
}
.banner-text h1, h1.content-scrolling {
font-size: 2.5rem !important;
}
h1.content-scrolling {
line-height: 25px !important;
margin-top: -10px;
}
#introCarousel, .carousel-inner, .carousel-item, .carousel-item.active {
height: inherit;
}
.carousel-item video {
margin-top: 84px;
}
.carousel-item .about-banner {
padding-top: 19% !important;
}
.process h4 {
padding-left: 0;
}
.item-p {
min-height: inherit !important;
}
.item-process {
margin-bottom: 15px !important;
}
.item-process:nth-child(2) {
margin-top: 0 !important;
}
.item-process:nth-child(3) {
background-size: cover;
}
.big-title {
font-size: 24px;
padding-bottom: 15px !important;
}
h2 {
font-size: 20px !important;
}
.services {
margin-top: 15px;
}
.s-services {
padding-top: 3rem;
padding-bottom: 3rem;
}
.Fristsss {
padding-bottom: 0 !important;
}
.services p.sub-text-3 {
font-size: 20px;
padding: 0 3rem;
padding-bottom: 0px !important;
}
.slick-slide {
margin: 0px 5px;
}
.services p.sub-text-3 {
padding: 0 !important;
}
.blog .slide p {
font-size: 18px;
line-height: 28px;
min-height: inherit;
}
.about-banner-content h1, .contact-banner h1 {
font-size: 20px !important;
line-height: 27px !important;
padding-top: 17px !important;
}
.process-wrapper.arrow [class*=col-]:before {
background: none;
}
.our-work-culture h2 {
padding: 5px 0;
}
.our-work-culture p, .our-leadership p {
font-size: 20px;
}
.contact-banner .about-banner {
padding-top: 21% !important;
padding: 0;
margin: 0;
text-align: left;
margin-left: -10px;
}
.contact-info h4 {
font-size: 24px;
padding-top: 5px !important;
}
.contact-info p {
font-size: 20px;
padding-bottom: 5px;
line-height: 30px !important;
}
.contact-form {
background-color: rgb(232, 232, 232);
padding: 15px 30px;
}
.grab-position {
padding-top: 3rem;
padding-bottom: 3rem;
}
.grab-position p, .margin-twelve-bottom, .margin-fifteen-bottom p {
font-size: 20px;
line-height: 28px;
}
.job-openings {
padding: 3rem 0;
padding-left: 0;
}
.c-open-po-card {
border-bottom: 1px solid #dbdbdb;
padding: 10px 0;
line-height: 30px;
display: inline-flex;
}
.c-open-po-card a {
font-size: 20px;
margin-bottom: 8px;
position: relative;
padding-left: 25px;
font-weight: bold;
width: 100%;
}
.modal .modal-header {
font-size: 25px;
}
.modal .modal-header a {
top: 0px;
margin: 20px 0;
display: inline-block;
}
.modal .modal-content {
padding: 50px 15px;
margin-top: 100px;
}
.careers-form {
padding: 3rem 0;
padding-left: 0;
}
.careers-form form .form-group {
padding: 0 10px;
}
.careers-form-main h2 {
color: #e3061d;
font-size: 40px;
margin: 0;
line-height: normal;
padding-bottom: 15px;
padding: 0;
font-weight: 300;
display: initial;
text-align: center;
width: 100%;
display: inherit;
padding: 17rem 0 0 0;
margin-bottom: 0;
padding-bottom: 0px !important;
font-weight: bold;
}
.careers-form-main h2 a {
left: inherit;
top: 11rem;
}
}
/*---------------------------------------------------- */
/*Service Area*/
/*----------------------------------------------------*/
.ori-service-section-5 {
padding-bottom: 225px;
}
.ori-service-content-5 {
padding-top: 70px;
}
.ori-service-inner-item-5 {
min-height: 370px;
margin-bottom: 45px;
border-radius: 20px;
background-color: #fff;
padding: 60px 60px 0;
-webkit-transition: 500ms all ease;
transition: 500ms all ease;
-webkit-box-shadow: 0px 38px 35px 0px rgba(232, 235, 238, 1);
box-shadow: 0px 38px 35px 0px rgba(232, 235, 238, 1);
background: rgb(232, 232, 232);
}
.ori-service-inner-item-5 .service-icon {
width: 80px;
height: 80px;
margin-bottom: 40px;
border-radius: 100%;
-webkit-transition: 500ms all ease;
transition: 500ms all ease;
background-color: rgb(227 6 29);
}
.ori-service-inner-item-5 .service-icon img {
width: 40px;
}
.ori-service-inner-item-5 .service-icon i {
color: var(--base-color-5);
font-size: 32px;
-webkit-transition: 500ms all ease;
transition: 500ms all ease;
}
.ori-service-inner-item-5 .service-text h3 {
color: #282943;
font-size: 26px;
font-weight: 500;
line-height: 32px;
padding-bottom: 25px;
margin: 0;
}
.ori-service-inner-item-5 .service-text h3 a {
font-family: 'Raleway', sans-serif;
font-weight: bold;
color: #282943;
text-decoration: none;
}
.ori-service-inner-item-5 .service-text p {
font-size: 18px;
line-height: 30px;
color: #282943;
}
.privacy-policy h4 {
color: #e3061d;
margin-top: 3rem;
}
.privacy-policy p {
color: #282943;
}