/*

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Fjalla+One|Poppins:300,400,500,600,700,900&subset=latin-ext');

/* BODY */
*{outline: none !important}
body{margin: 0; padding: 0; font-family: 'Poppins', sans-serif; font-size: 14px; color: #131314; background: #fff;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;}
body{height: 100%;}
html{height: 100%;}



/* HTML TAGS */
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
img{ max-width: 100%;}
strong{ font-weight: 700;}
b{font-weight: 700;}


.nopad{padding:0px;}


/* CUSTOM TAGS */
.pull-left{ float: left;}
.pull-right{ float: right;}
/*.overflow-hidden{overflow: hidden;}*/



/* SECTIONS */
main{ width: 100%; float: left; position: relative; z-index: 2; }
/*section{position: relative;}*/
aside{position: relative;}
footer{position: relative;}



/* CONTENT */
.content {
	width: 100%;
	float: left;
	background: #fff;
	margin: 0 auto;
}

.content2 {
	width: calc(100% - 120px);
	float: left;
	background: #fff;
	margin: 0 60px;
	padding: 40px 0;
}

/* ODOMETER */
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit{ padding:0;}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner{ left:0;}




/* EQUALIZER */
.equalizer { width: 18px; height: 20px; cursor: pointer; position: relative;}
.equalizer span { background: #fff; width: 3px; height: 0px; bottom: 0; left: 0%; display: block; position: absolute; transition: height 0.2s linear;}
.equalizer span:nth-child(1) { margin-left: 5px;}
.equalizer span:nth-child(2) { margin-left: 10px;}
.equalizer span:nth-child(4) { margin-left: 15px;}
.equalizer span:nth-child(5) {margin-left: 20px;}
.equalizer.paused span { height: 3px !important;}




/* REVEAL EFFECT */
.reveal-effect { float: left; overflow: hidden; position: relative;}
.reveal-effect>img { -webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;  -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86);  animation-timing-function: cubic-bezier(.785,.135,.15,.86); position: relative;}
.reveal-effect>img { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
.reveal-effect { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform;}
.reveal-effect {-webkit-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1); transition-timing-function: cubic-bezier(.25,.1,.25,1);}
.reveal-effect.animated {-webkit-transform: translate(0,0); transform: translate(0,0);}
.reveal-effect.animated img {-webkit-animation-name: show-img-1;animation-name: show-img-1;}
.reveal-effect:after {-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);}
.reveal-effect:after { content:"";  width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
.reveal-effect:after{-webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05,0); transform: scale(.05,0); -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);}
.reveal-effect.se2-white:after { background-color: #01cdd0; }
.reveal-effect.animated:after { -webkit-animation-name: slide-bg-2; animation-name: slide-bg-2;}




/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}



/* PRELOADER */
.preloader { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999999; background: #01CDD0; }

.preloader { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform: all 0.4s ease; transition: all 0.4s ease; transition-delay: 1s; }

.page-loaded .preloader { transform: translateY(-100%); }

/* SPINNER */
.spinner { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; z-index: 2; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; width: 50px; height: 50px; }

.spinner .path { stroke: #fff; stroke-linecap: round; -webkit-animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite; }




/* ANIMATIONS */
@-webkit-keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
  
  


/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; transition-delay: 0.60s;}
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;}
.page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;}
.page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}

/* TEXT ROTATER*/
.text-rotater{ width: 100%; float: left; height: 20px; position: absolute; left: 0; top: 50%; margin-top: 60px; font-size: 11px; font-weight: 600; color: #fff; text-transform:uppercase;}
.text-rotater li{ width: 100%; position: absolute; left: 0; top: 0; text-align: center; opacity: 0; animation: play 4.5s infinite; }
.text-rotater li:nth-child(2) { animation-delay: 1.5s; }
.text-rotater li:nth-child(3) { animation-delay: 3s; }

/* PERSPECTIVE HOVER */
 .perspective-box { position: relative; display:inline-block; width:100%; margin: 5px; cursor: pointer; transform: perspective(600px) translate3d(0, 0, 0);   backface-visiblity:none;  transform-style: preserve-3d;}	
.perspective-box img { width:100%; float: left;}
.perspective-box:hover { box-shadow: 0 66px 75px -10px rgba(0,0,0,.3);  transform-style: preserve-3d; z-index:20; }


/* SOCIAL BAR */
.social-bar{ width: 400px; position: fixed; left: 0; top: 50%; margin-top: 200px; z-index: 3; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; text-align: center;}
.social-bar li{display:inline-block; list-style: none; padding: 20px 0; margin: 0 10px; font-weight: 600;}
.social-bar li a{float: left; color: #fff; font-size: 11px;}
.social-bar li a:hover{text-decoration: none; color: #f50c1a;}



	
/* HEADER */
.header {width: 100%; position: absolute; left: 0; top: -100%; z-index: 999; padding: 5px 35px; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; } 
.header .logo{float: left; margin-right: 20px;}
.header .logo img {width: 190px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(1) contrast(1); filter: brightness(1) contrast(1);}




/* SLIDER */
.slider {width: 100%; height: 120vh;float: left; position: relative; background: #fff; z-index: 1;box-shadow: -1px 5px 0px -1px #f2f2f2;}
.slider{transform: translateY(250px); opacity: 0;}
.slider{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.slider .video-bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; background: #e41c2d;}
.slider .video-bg video{min-height: 100%; min-width: 100%; float: left; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.8);}
.slider .video-bg:after{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #1d3162; mix-blend-mode: lighten;}
.slider .animation-hero{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background:url(../images/hero1.gif) center no-repeat #131314; background-size: 600px 450px;}
.slider .swiper-container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.slider .swiper-container{-webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transform:all 0.8s ease; transition: all 0.8s ease; } 
.slider .swiper-container .swiper-wrapper{ width: 100%; float: left; display: flex; flex-direction: row;}



/* SPLIT */
.split{width:100%; height:100vh; float:left; position: relative; background: #131314; z-index: 1;}
.split .inner{width:100%; float:left; padding:0 100px; color:#fff;}
.split .inner p{ display:inline-block; width:50%; font-size:17px; font-weight:300;}
.split .inner a{ display:inline-block; font-size: 12px; font-weight: 600; color: #fff; position: relative;}
.split .inner a:hover{ text-decoration: none;}
.split .inner a:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.split .inner a:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.split .inner a:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.split .inner a:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.split  .split-back { position: relative; background: #ebca1c; color: #fff;  height: 100%;  overflow: hidden;  display: flex;  align-items: center; }
.split .split-front { position: absolute; top: 0; left: 0; width: 100%; justify-content: flex-end; height: 100%;  overflow: hidden;  display: flex;  align-items: center;}
.split .split-front .front-bg{width: 100%; height: 100%; float: left; background: #8e8973; position: absolute; left: 0; top: 0;}
.split .split-front .text-holder{position: relative; z-index: 2;}
.split .inner h1{ width:100%;  float: left;  font-size: 15vw; font-weight: 700; padding-bottom:15px; overflow:hidden; -webkit-background-clip: text;    -webkit-text-fill-color: transparent; background-image: url(../images/hero1.jpg); background-size:cover; background-position: center;}



/* SLIDER FRACTION */
.slider .swiper-container .swiper-pagination-fraction{ width: 100px; height: 50px; position: absolute; left: 100px; right: auto; top: auto; bottom: 30px; color: #fff; font-size: 11px;}
.slider .swiper-container .swiper-pagination-fraction span:first-child{font-size: 56px; height: 50px; line-height: 50px; float: left; overflow: hidden; text-indent: -17px; margin-right: -25px; padding-top: 3px; font-weight: 500;}
.slider .swiper-container .swiper-pagination-fraction span:last-child{font-size: 14px;}
.slider .swiper-container .swiper-pagination-fraction span:before{content: "0";}



/* SLIDER BUTTONS */
.slider .swiper-container .swiper-button-prev{ width: 40px; height: 26px; float: left; right: 200px; left: auto; top: 50%; z-index: 6; background: none; overflow: hidden; text-align: right;}
.slider .swiper-container .swiper-button-prev img{height: 26px;}
.slider .swiper-container .swiper-button-prev span{width: 100%; float: left; line-height: 26px; font-weight: 500; color: #fff;}
.slider .swiper-container .swiper-button-prev:hover img{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-prev:hover span{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-prev *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; }
.slider .swiper-container .swiper-button-next{ width: 40px; height: 26px; float: left; right: 100px; left: auto; top: 50%; z-index: 6; background: none; overflow: hidden;}
.slider .swiper-container .swiper-button-line{ width: 40px; height: 2px; background: #fff; position: absolute; right: 150px; top: 50%; z-index: 2; margin-top: -10px;}
.slider .swiper-container .swiper-button-next img{height: 26px;}
.slider .swiper-container .swiper-button-next span{width: 100%; float: left; line-height: 26px; font-weight: 500; color: #fff;}
.slider .swiper-container .swiper-button-next:hover img{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-next:hover span{transform: translateY(-100%);}
.slider .swiper-container .swiper-button-next *{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; }




/* SLIDER CONTENT */
.slider .swiper-container .swiper-slide{ color: #fff; display: flex;  flex-direction: column; justify-content: center; background-size:cover;}
.slider .swiper-container .swiper-slide:after{content: ""; width: 100%; height: 300px; position: absolute; left: 0; bottom: 0; z-index: 3; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);
background-image: -o-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);
background-image: -moz-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);
background-image: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);
background-image: -ms-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);}
.slider .swiper-container .swiper-slide .inner { width: 100%; padding: 0 100px; position: relative; z-index: 4;}
.slider .swiper-container .swiper-slide .inner h5{ font-size: 12px; font-weight: 700;}
.slider .swiper-container .swiper-slide .inner h5:before{content: ""; width: 4px; height: 10px; float: left; background: #f50c1a; margin-left: -10px; margin-top: 2px;}
.slider .swiper-container .swiper-slide .inner h2{ max-width: 50%; font-family: "Playfair Display"; font-size: 6em; margin-bottom: 30px;}
.slider .swiper-container .swiper-slide .inner p{ max-width: 40%; line-height: 25px; margin-bottom: 30px;}




/* SLIDER LINKS */
.slider .swiper-container .swiper-slide .inner .link{ float: left; font-size: 12px; font-weight: 600; color: #fff; position: relative;}
.slider .swiper-container .swiper-slide .inner .link:hover{ text-decoration: none;}
.slider .swiper-container .swiper-slide .inner .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.slider .swiper-container .swiper-slide .inner .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.slider .swiper-container .swiper-slide .inner .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.slider .swiper-container .swiper-slide .inner .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.slider .swiper-container .swiper-slide .inner .video-link {  width: 40px; height: 40px; float: left; border-radius: 50%; position: relative; transition:all .5s; margin-left: 30px; margin-top: -13px;}
.slider .swiper-container .swiper-slide .inner .video-link:after{content: ""; position: absolute; left: 50%; top: 50%; margin-left: -3px; margin-top: -7px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #fff;}
.slider .swiper-container .swiper-slide .inner .video-link .video-play-circle { stroke-dasharray: 315; stroke-dashoffset: 315; transition: stroke-dashoffset .5s;}
.slider .swiper-container .swiper-slide .inner .video-link svg { transform: rotate(-90deg); transition: transform .3s; }
.slider .swiper-container .swiper-slide .inner .video-link:hover .video-play-circle { stroke-dashoffset: 0; } 
.slider .swiper-container .swiper-slide .inner .video-link .video-play-outline{width: 40px; height: 40px; position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,0.05);}




/* INT HERO */
.int-hero{ width: 100%; float: left; padding: 0 100px; padding-top: 170px; padding-bottom: 120px; background: #131314; color: #fff; position: relative;}
.int-hero .video-bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.int-hero .video-bg video{min-width: 100%; min-height: 100%; float: left; opacity: 0.1;}
.int-hero .video-bg:after{content: ""; width: 100%; height: 300px; position: absolute; left: 0; bottom: 0; z-index: 2; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,20,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#131314',GradientType=0 ); }
.int-hero .inner{ width: 100%; float: left; position: relative; z-index: 3;}
.int-hero .inner{-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transform:all 0.7s ease; transition: all 0.7s ease; } 
.int-hero .inner h2{max-width: 60%; font-size: 5em; float: left;}
.int-hero .inner h2{transform: translateY(250px); opacity: 0;}
.int-hero .inner h2{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}



/* ABOUT STUDIO */
.about-studio{ width: 100%; float: left;}
.about-studio .hero-image{ width: 100%; margin-bottom: 120px; position: relative; z-index: 2;}
.about-studio .hero-image img{ width: 100%;}
.about-studio h5{ font-size: 3em; font-family: "Playfair Display"; line-height: 1; margin-top: -5px; margin-bottom: 30px;}
.about-studio .lead{ margin-bottom: 40px; opacity: 1; line-height: 32px;}
.about-studio .lead u{position: relative; text-decoration: none;}
.about-studio .lead u:after{content: ""; width: 100%; height: 7px; background: #56e9b1; position: absolute; left: 0; bottom: 6px; mix-blend-mode: color;}
.about-studio p{line-height: 24px; opacity: 0.8;}
.about-studio p:last-child{max-width: 50%; margin-bottom: 0;}
.about-studio .link{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2; margin-bottom: 60px;}
.about-studio .link:hover{ text-decoration: none;}
.about-studio .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.about-studio .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.about-studio .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.about-studio .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;}



/* WORKS  */
.works { width: 100%; float: left;}
.works.five-cols{width: 100%;}
.works.five-cols .grid-sizer{width: 20%;}
.works.five-cols .grid-item{width: 20%;}
.works.five-cols .grid-item-double{width: 40%;}
.works.four-cols .grid-sizer{ width: 25%; float: left;}
.works.four-cols .grid-item{ width: 25%; float: left; padding:10px;}
.works.four-cols .grid-item-double{ width: 50%; float: left; padding:10px;}
.works.three-cols{width: 100%;}
.works.three-cols .grid-sizer{width: 33.33333%;}
.works.three-cols .grid-item{width: 33.33333%;}
.works.three-cols .grid-item-double{width: 66.66666%;}
.works.two-cols{width: 100%;}
.works.two-cols .grid-sizer{width: 50%;}
.works.two-cols .grid-item{width: 50%;}
.works.two-cols .grid-item-double{width: 100%;}


/* WORKS FILTER */
.isotope-filter{ width: 100%; float: left; margin: 0; padding-bottom: 30px ; text-align: center; background: #131314;}
.isotope-filter li{ display: inline-block; margin: 0 15px; padding: 0; list-style: none;}
.isotope-filter li a{ float: left; font-size: 13px; font-weight: 500; color: #fff; opacity: 0.99; font-weight: 600; position: relative;}
.isotope-filter li a:hover{text-decoration: none;}
.isotope-filter li a:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.isotope-filter li a:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.isotope-filter li a:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.isotope-filter li a:hover:after { width: 100%; background: transparent; transition: all 0s ease;}
.isotope-filter li a.current{ color: #56e9b1;}
.isotope-filter li a.current:before{display: none;}
.isotope-filter li a.current:after{display: none;}


/* WORKS FIGURE */
.works figure{ width: 100%; float: left; position: relative; margin: 0; overflow: hidden;}
.works figure *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.works figure a{ width: 100%; float: left; text-align: center;}
.works figure img{ width: 100%; float: left; opacity: 1; }
.works figure figcaption{ width: 100%; height: 100%; float: left; position: absolute; left: 0; bottom: 0; color: #fff; font-size: 13px; font-weight: 700; opacity: 0; padding: 0; }
.works figure figcaption .bg-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.9;}
.works figure figcaption .brand{ width: 100%; float: left; margin-bottom: 20px;}
.works figure figcaption .brand img{ width: auto !important; height: 50px; float: none;}
.works figure figcaption a{ width: 100%; height: 100%; float: left; color: #fff; padding: 30px; justify-content: center; display: flex; flex-direction: column; }
.works figure figcaption a:hover{color: #fff; text-decoration: none;}
.works figure figcaption h5{ width: 100%; float: left;transform: translateY(-10px); opacity: 0; font-family: 'Playfair Display', serif; font-size: 20px;}
.works figure figcaption small{ width: 100%; float: left; transform: translateY(10px); opacity: 0; font-weight: 700;}
.works figure:hover figcaption{ opacity: 1;}
.works figure:hover img{transform: scale(1.05);}
.works figure:hover figcaption h5{transform: translateY(0); opacity: 1;}
.works figure:hover figcaption small{transform: translateY(0); opacity: 1;}



/* PROJECT HERO */
.project-hero{ width: calc(100% - 120px); float: left; background: #131314; color: #fff; position: relative; margin: 0 60px;}
.project-hero figure{ width: 100%; float: left; margin: 0; position: relative;}
.project-hero figure img{ width: 100%; float: left;}
.project-hero figure figcaption{ width: 100%; position: absolute; left: 0; top: 0; padding: 0 100px; padding-top: 170px; padding-bottom: 120px;}
.project-hero figure figcaption h2{max-width: 60%; font-size: 5em; float: left;}


/* PROJECT DETAIL */
.project-detail{ width: 100%; display: flex; background: #fff; padding: 120px 0;}
.project-detail .project-navbar{ width: 100%; float: left; margin-bottom: 50px; padding: 0; background: #fff;  text-align: center; z-index: 2; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0;}
.project-detail .project-navbar .navbar{ padding: 20px 0; background: #fff; }
.project-detail .project-navbar .navbar li{display: inline-block; margin: 0; padding: 0; list-style: none;}
.project-detail .project-navbar .navbar li a{color: #131314; font-weight: 600;}
.project-detail .project{width: 100%; float: left;}
.project-detail .project h2{ font-size: 70px; font-weight: 700;}
.project-detail .project .lead{margin-bottom: 30px; padding-right: 30%; opacity: 1; line-height: 32px;}
.project-detail .project p{line-height: 26px; opacity: 0.7;}
.project-detail .project figure{display: block; margin: 100px 0;}
.project-detail .project .client-logo{ width: 140px; margin-top: 50px; -webkit-filter: brightness(1) invert(1); filter: brightness(1) invert(1);}




/* ICON FEATURES */
.icon-features{ width: 100%; float: left; padding-top: 120px; padding-bottom: 60px; text-align: center;}
.icon-features img{ width: 60px; display: inline-block; margin-bottom: 20px;}
.icon-features small{display: block; font-weight: 600; margin-bottom: 10px;}
.icon-features h3{ display: block; font-family: "Playfair Display"; font-size: 24px; line-height: 32px; margin-bottom: 20px; }
.icon-features p{display: block; padding: 0 10%; margin-bottom: 20px; opacity: 0.8;}
.icon-features a{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2; margin-bottom: 60px;}
.icon-features a:hover{ text-decoration: none;}
.icon-features a:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;}
.icon-features a:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;}
.icon-features a:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;}
.icon-features a:hover:after { width: 100%; background: transparent; transition: all 0s ease;}




/* TEAM MEMBERS */
.team-members{ width: 100%; float: left; }
.team-members *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.team-members .member{width: 20%; float: left; position: relative; z-index: 2; margin: 0; background: #F8B500; overflow: hidden;}
.team-members .member:nth-child(2){margin-top: 100px;}
.team-members .member:nth-child(4){margin-top: 100px;}
.team-members .member figcaption{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0;}
.team-members .member figcaption div{ width: 100%; height: 30px; float: left; position: absolute; left: 0; top: 50%; margin-top: -15px; text-align: center;}
.team-members .member figcaption div h3{font-size: 13px; font-weight: 700; color: #333; margin: 0;}
.team-members .member figcaption div small{ display: block; color: #333;}
.team-members .member:hover{ box-shadow: 0 66px 75px -10px rgba(0,0,0,.3);}
.team-members .member:hover img{opacity: 0.2; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}
.team-members .member:hover figcaption{opacity: 1;}




/* CLIENTS */
.clients{width: 100%; float: left; padding: 120px 0;}
.clients *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.clients ul{ width: 100%; float: left; margin: 0; padding: 0;}
.clients ul li{ width: 20%; float: left; margin: 0; padding: 0; list-style: none; position: relative;}
.clients ul li figure{ width: 100%; float: left; margin: 0; padding: 0 10%;}
.clients ul li figure img{ width: 100%; float: left;}
.clients ul li:after{content: ""; width: 1px; height: 30px; background: #eee; position: absolute; right: 0; top: 30px;}
.clients ul li:last-child:after{display: none;}
.clients ul li:hover figure{opacity: 0.4;}




/* SIDE IMAGE CONTENT */
.side-image-content{width: 100%; float: left; display: flex; flex-direction: row; margin:0 0;}
.side-image-content .inner {width: 50%; display: flex; justify-content: center; flex-direction: column; position: relative;}
.side-image-content .inner.bg1{ background: #01cdd0;}
.side-image-content .inner .main-image{ width: 100%; float: left; margin: 0; margin-top:100px; margin-bottom: 100px;}
.side-image-content .inner .sub-image{ width: 250px; position: absolute; right: -50px; bottom: -100px; z-index: 2;}
.side-image-content .inner img{ width: 100%; }
.side-image-content .inner .contenty {width: 100%; float: left; padding: 0 11%; color: #fff;}
.side-image-content .inner .contenty h5{ font-size: 12px; font-weight: 700;}
.side-image-content .inner .contenty h5:before{content: ""; width: 4px; height: 10px; float: left; background:#fff; margin-left: -10px; margin-top: 2px;}
.side-image-content .inner .contenty h2 {font-family:'Montserrat', sans-serif; font-size:35px; margin-bottom:30px; text-indent:0; font-weight: 500;}
.side-image-content .inner .contenty p{ line-height: 25px;}
.side-image-content .inner .contenty a{height: 60px; line-height: 58px; display: inline-block; border: 1px solid #fff; padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; margin-top: 30px; overflow: hidden;}
.side-image-content .inner .contenty .award-list{ width: 100%; float: left; margin: 0; padding: 0; list-style: none;}
.side-image-content .inner .contenty .award-list li{ width: 100%; float: left; padding:5px 0;}
.side-image-content .inner .contenty .award-list li span{ float: left; margin-right: 6px; line-height: 23px;}
.side-image-content .inner .contenty .award-list li small{ width: 18px; height: 18px; line-height: 20px; display: inline-block; border-radius: 50%; background: #fff; color: #f50c1a; text-align: center; font-weight: 600; font-size: 11px; margin-bottom: 5px;}
.side-image-content .inner .contenty a *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.side-image-content .inner .contenty a span { position: relative; display: inline-block;}
.side-image-content .inner .contenty a span:before {position: absolute;top: 100%; content: attr(data-hover); }
.side-image-content .inner .contenty a span:before {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.side-image-content .inner .contenty a:hover span{-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}




/* AWARDS */
.awards{ width: 100%; float: left; padding: 120px 0;}
.awards h5{ font-size: 12px; font-weight: 700; margin-top: 20px;}
.awards h5:before{content: ""; width: 4px; height: 10px; float: left; background: #f50c1a; margin-left: -10px; margin-top: 2px;}
.awards h2{ font-family: "Playfair Display"; font-size: 4em; margin-bottom: 30px; text-indent: -5px;}
.awards figure{ width: 100%; float: left; margin-bottom: 20px; padding: 20px 30px; position: relative;}
.awards figure:after{content: ""; width: 40px; height: 3px; background: #f50c1a; position: absolute; left: 50%; bottom:0; margin-left: -20px;}
.awards figure img{ width: 100%; float: left; opacity: 0.5; }
.awards .award{ width: 100%; float: left; border: 1px solid #eee; padding-bottom: 20px;}
.awards .odometer{ display: block; text-align: center; font-family: "Fjalla One"; font-size: 30px;}



/* CONTACT */
.contact{ width: 100%; float: left; padding-top: 120px; padding-bottom: 90px;}
.contact .titles{ width: 100%; float: left; text-align: center; margin-bottom: 40px; padding: 0 25%;}
.contact .titles h5{ font-size: 12px; font-weight: 700; text-transform: uppercase;}
.contact .titles h2{ font-family: "Playfair Display"; font-size: 4em; margin-bottom: 30px;}
.contact .address{ width: 100%; float: left; text-align: center; padding: 0 10%; margin-bottom: 50px;}
.contact .address h4{ display: block; font-family: "Playfair Display"; font-size: 24px; line-height: 32px; margin-bottom: 20px; }
.contact .address p{display: block;}
.contact .address p a{font-weight: 600; color: #131314;}
.contact .address a{display: inline-block; font-weight: 600; color: #131314;}
.contact .address a:hover{text-decoration: none;}
.contact .address a svg{ width: 20px; display: inline-block; margin-bottom: -8px; }
.contact form{ margin-top: 50px;}
.contact form .form-group{margin-bottom: 30px;}
.contact form label{ width: 100%; float: left; margin: 0; position: relative; z-index: 2;}
.contact form label span{float: left; background: #fff; font-size: 12px; margin-left: 14px; padding: 0 6px; font-weight: 600; margin-bottom: -10px;}
.contact form input[type="text"]{ width: 100%; height: 62px; border: 1px solid #ccc; padding: 0 20px;}
.contact form textarea{ width: 100%; height: 140px; float: left; line-height: 26px; border: 1px solid #ccc; padding: 20px;}
.contact form button[type="submit"]{height: 60px; line-height: 58px; display: inline-block; border:none; padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; background: #131314; overflow: hidden;}
.contact .alert{ width:100%; float:left;}
.contact #success, .contact #error {display:none}
.contact #success, .contact #error { float:left;}
.contact #contact label.error{ width:100%; color:#f50c1a; margin-top: 10px; text-align: center;}
.contact #contact input.error  {width:100%; border:1px solid #f50c1a;}
.contact #contact textarea.error{width:100%; border:1px solid #f50c1a;}



/* FOOTER */
.footer-spacing{ width: 100%; float: left;}
.footer {
	width: 100%;
	margin: 0;
	padding-bottom: 0;
	background-color: #f8b500;
	z-index: 1;
	text-align: center;
	color: #fff;
	clear: both;
	max-height: 570px;
	position: relative;
	height: 560px;
}
.footer img{width: 32px; margin-bottom: 20px; display: inline-block;}
.footer .social-media{ width: 100%; float: left; display: none; text-align: center; margin-bottom: 20px; padding: 0;}
.footer .social-media li{display: inline-block; margin: 0 10px; list-style: none;}
.footer .social-media li a{ float: left; font-size: 12px; font-weight: 600; color: #fff;}
.footer .social-media li a:hover{text-decoration: none; color: #f50c1a;}}
.footer h4{font-weight: 300; letter-spacing: -1px; font-size: 2em;}
.footer h2{ font-family: "Fjalla One"; text-transform: uppercase; font-size: 4em; margin-bottom: 30px; padding: 0 10%;}
#quotes .btn-contact{height: 60px; line-height: 58px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff;  overflow: hidden;}
#quotes .btn-contact *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#quotes .btn-contact span { position: relative; display: inline-block;}
#quotes .btn-contact span:before {position: absolute;top: 100%; content: attr(data-hover); }
#quotes .btn-contact span:before {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
#quotes .btn-contact:hover span{-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);}
.footer-inner {position: relative; z-index: 99; padding: 70px 0;}
.footer .footer-bar{ width: 100%; float: left; border-top:1px solid rgba(255,255,255,0.05); margin-top: 50px; padding: 20px 0;}
.footer .footer-bar span{font-size: 12px;}
.footer .footer-bar { width: 100%;  float: left; margin-top: 0; padding: 40px 0;}
.footer-top {padding: 0; width: 100%; height: auto;}
.footer-widget {width: 100%; height: auto; text-align: left;}
.footerlinks ul {list-style: none; padding: 0; margin: 0;}
.footerlinks ul li {float: left; width: 50%;}
.footerlinks li a {
	color:#131314;
	font-family: 'Poppins', sans-serif;
	line-height: 28px;
	font-size: 14px;
	text-decoration: none;
	font-weight: 400;
}

.footer-widget p {
	color: #131314;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 25px;
}
.footer-inner .widget-title {
	font-size: 18px;
	line-height: 36px;
	margin-bottom: 20px;
	position:relative;
	color:#fff;
}
.footer-widget h5::after {
	content: '';
	width: 60px;
	height: 1px;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
}

.footer-widget .line-footer {display: block; height: 1px; width: 100%; background-color: #494c54; margin: 23px 0;}

.footercontact {float: left; width: 51%; /* border-right: 1px solid #000; */}
.footercontact2 {float: left; width: 45%; margin: 0 15px;}
.footercontact ul {list-style: none; padding: 0; margin: 0;}
.footercontact2 ul {list-style: none; padding: 0; margin: 0;}
.copyright {padding-top: 20px;}
.copyright p, .copyright p a{color: #000;}

.footercontact li {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 28px;
	font-family: 'Poppins', sans-serif;
	color: #000;
	font-weight: 400;
}

.footercontact2 li {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 28px;
	font-family: 'Poppins', sans-serif;
	color: #000;
	font-weight: 400;
	width: 50%;
	float: left;
}

@keyframes move_wave {
    0% { transform: translateX(0) translateZ(0) scaleY(1)}
    50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) }
    100% { transform: translateX(-50%) translateZ(0) scaleY(1) }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {

    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image:linear-gradient(to top, #f8b500 20%, #f8b500 80%);
}
.bgTop { z-index: 15; opacity: 0.5;}
.bgMiddle { z-index: 10; opacity: 0.75;}
.bgBottom { z-index: 5;}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop { background-size: 50% 100px;}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle { background-size: 50% 120px;}
.waveAnimation .waveMiddle { animation: move_wave 10s linear infinite;}
.waveBottom { background-size: 50% 100px;}
.waveAnimation .waveBottom {  animation: move_wave 15s linear infinite;}




/* SCROLL DOWN */
.scroll-down{width: 1px; height: 70px; position: absolute; left: 50%; bottom: 30px; z-index:2;}
.scroll-down span {display: block; position: relative; padding-top: 79px; text-align:center;}
.scroll-down span::before { -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;  -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;}
.scroll-down span::before{ position: absolute; top: 0px; left: 50%; margin-left: -0.5px; width: 2px; height: 70px; background: #F8B500; content:"";}






.pos-r{position: relative;}
section{padding: 80px 0;}
.white-bg{background:#ffffff;}
canvas {
	height: auto !important;
	position: absolute;
	width: 100% !important;
	left: 0;
	bottom: 0;
	top: 0;
	z-index:999;
}


.welcome {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0;
	z-index: 9;
	clear:both;	
}
.welcome .intro h4 {font-weight: 500; font-family: 'Montserrat', sans-serif;font-size: 30px;}

.welcome .intro-cont p {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #7f7f7f;
	line-height: 1.8;
	margin: 0;
}

.reveal-title {
	font-size: 8.375em;
	line-height: 1em;
	font-weight: 700;
	letter-spacing: -6px;
	color: #ececec;
	margin-top: 0.01em;
	margin-bottom: 0.01em;
}


.dtd-overview {position: relative; padding: 10px 0 30px;}

.dtd-overview .dtd-item, .dtd-overview .dtd-item a {height: 130px; width: 130px;}
.dtd-overview .dtd-item {float: left; position: relative;}
.dtd-overview .dtd-item, .dtd-overview .dtd-item a {
	height: 140px;
	width: 140px;
	margin: 20px 90px;
	text-align: center;
	padding: 0px 0;
}

.dtd-overview a.dream {background-color: rgba(248, 181, 0, 0.99); color: #f8b500;}
.dtd-overview a.design {background-color: rgba(248, 181, 0, 0.99); color: #f8b500;}
.dtd-overview a.develop {background-color: rgba(248, 181, 0, 0.99); color: #f8b500;}
.dtd-overview a.deploy {background-color: rgba(248, 181, 0, 0.99); color: #f8b500;}
.dtd-overview a {
	border: 3px solid #fff;
	border-radius: 50%;
	display: block;
	position: relative;
}
.dtd-overview .dtd-icon {
	height: auto;
	margin: 10px auto;
	padding: 10px 15px;
	text-align: center;
}
.dtd-overview a .dtd-title {
	display: none;
	font-size: 23px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Montserrat', sans-serif;
}
.dtd-overview a.dream:hover {
	background-color: rgba(1, 206, 209, 0.99);
	border-color: #008e91;
	color: #fff;
	-webkit-transition: background-color 0.8s ease-in;
	-moz-transition: background-color 0.8s ease-in;
	-o-transition: background-color 0.8s ease-in;
	transition: background-color 0.8s ease-in;
	-webkit-transition: border-color 0.8s ease-in;
	-moz-transition: border-color 0.8s ease-in;
	-o-transition: border-color 0.8s ease-in;
	transition: border-color 0.8s ease-in;
}

.dtd-overview a.design:hover {
	background-color: rgba(1, 206, 209, 0.99);
	border-color: #008e91;
	color: #fff;
	-webkit-transition: background-color 0.8s ease-in;
	-moz-transition: background-color 0.8s ease-in;
	-o-transition: background-color 0.8s ease-in;
	transition: background-color 0.8s ease-in;
	-webkit-transition: border-color 0.8s ease-in;
	-moz-transition: border-color 0.8s ease-in;
	-o-transition: border-color 0.8s ease-in;
	transition: border-color 0.8s ease-in;
}
.dtd-overview a.deploy:hover {
	background-color: rgba(1, 206, 209, 0.99);
	border-color: #008e91;
	color: #fff;
	-webkit-transition: background-color 0.8s ease-in;
	-moz-transition: background-color 0.8s ease-in;
	-o-transition: background-color 0.8s ease-in;
	transition: background-color 0.8s ease-in;
	-webkit-transition: border-color 0.8s ease-in;
	-moz-transition: border-color 0.8s ease-in;
	-o-transition: border-color 0.8s ease-in;
	transition: border-color 0.8s ease-in;
}
.dtd-overview a.develop:hover {
	background-color: rgba(1, 206, 209, 0.99);
	border-color: #008e91;
	color: #fff;
	-webkit-transition: background-color 0.8s ease-in;
	-moz-transition: background-color 0.8s ease-in;
	-o-transition: background-color 0.8s ease-in;
	transition: background-color 0.8s ease-in;
	-webkit-transition: border-color 0.8s ease-in;
	-moz-transition: border-color 0.8s ease-in;
	-o-transition: border-color 0.8s ease-in;
	transition: border-color 0.8s ease-in;
}
.dtd-overview a:hover .dtd-title {display: inline-block;}
.dtd-overview a:hover .dtd-icon {opacity: 0;}
.dtd-overview .arrow.right-top {top: -24px; right: -137px;}
.dtd-overview .arrow.right-bottom {bottom: -34px; right: -256px;}
.dtd-overview .arrow {position: absolute;}



/*quotes section*/
#quotes {width: 100%; height: auto; padding: 80px 0; background-color: #000; background-blend-mode: screen;}
.dark-bg {background: #000;}
.pos-r {position: relative;}
.o-hidden {overflow: hidden;}
#quotes canvas {height: auto !important; position: absolute; width: 100% !important; left: 0; bottom: 0; z-index:0;}
#quotes h4 {color: #fff; font-family: 'Amatic SC', cursive; font-size: 56px; line-height: 40px; font-weight: bolder; margin-bottom: 60px;}


/*services*/
.services-section-two {background-color: #fff; width: 100%; margin: 0 auto; float: left;}
.section-head {margin-bottom: 40px;}

.section-head h2 {
	font-size: 46px;
	font-weight: 700;
	margin-top: 10px;
	position: relative;
	padding-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
	color: #1f1f1f;
}

.section-head h2 span {
	color: #f4b400;
}

.section-head p {
	max-width: 650px;
	margin: auto;
	color: #777;
	font-size: 17px;
	line-height: 1.8;
}


.section-head h6 {color: #777; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 4px;font-family: 'Montserrat', sans-serif;}
.section-head h4 {font-size: 30px; font-weight: 500; margin-top: 10px; position: relative; padding-bottom: 15px; font-family: 'Montserrat', sans-serif;}
.section-head h4::after {content: ''; width: 60px; height: 1px; background-color: #f8b500; position: absolute; bottom: 0; left: calc(50% - 30px);}
.contenty .section-head h4::after {content: ''; width: 60px; height: 1px; background-color: #fff; position: absolute; bottom: 0; left: 0;}

.awards .section-head h4::after {content: ''; width: 60px; height: 1px; background-color: #f8b500; position: absolute; bottom: 0; left: 0;}
.awards .section-head  {margin-bottom:40px;}
.services-section-two .lower-content-box {position: relative; margin-top: 45px;}
.services-section-two .lower-content-box .text {position: relative; color: #555555; font-size: 14px;line-height: 1.9em;}
.btn-style-one {
	position: relative;
	line-height: 29px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 1px;
	background-color: #01cdd0;
	border: 2px solid #01cdd0;
	padding: 12px 25px 12px;
	font-family: 'Poppins', sans-serif;
	-moz-box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
	-ms-box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
	-o-box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
	box-shadow: 0px 4px 12px rgba(0,0,0,0.20);
}



.btn-style-one:hover .icon{ color: #01cdd0;}
.services-section-two .lower-content-box .btn-column {text-align:center;}
.btn-style-one .icon {
	position: relative;
	color: #ffffff;
	margin-left: 15px;
	font-size: 26px;
	top: 7px;
	line-height: 0;
	display: inline-block;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	font-weight: 600;
}

.upper-carousel-section .owl-nav .owl-next:hover {background-color: #f8f8f8;}

 .upper-carousel-section .owl-nav .owl-next {
	position: absolute;
	right: -80px;
	top:110px;
	width: 66px;
	height: 66px;
	font-size: 20px;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #efeded;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}
.upper-carousel-section .owl-nav .owl-prev {
	position: absolute;
	left: -80px;
	top:110px;
	width: 66px;
	height: 66px;
	font-size: 20px;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #efeded;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.upper-carousel-section .owl-nav .owl-prev:hover, .upper-carousel-section .owl-nav .owl-next:hover {background-color: #f8f8f8;}

.service-block-two {position: relative;}
.services-section-two .owl-carousel .service-block-two .inner-box {margin: 15px 15px;}
/* .service-block-two .inner-box {position: relative; border-radius: 5px; text-align: center; padding: 50px 15px; border: 1px solid #f2f0f0;} */
.service-block-two .inner-box .icon-box {position: relative; margin-bottom: 20px;}
.service-block-two .inner-box .icon-box img {width: auto; margin: 0 auto;}
.icon-box .icon {
	border-radius: 80px;
	background-color: #f6f6f6;
	width: 100px;
	height: 100px;
	display: inline-block;
	text-align: center;
	padding: 20px 0;
	box-shadow: 0px 6px 2px rgba(0,0,0,.1);
}

.service-block-two .inner-box .icon-box img {
	width: 58%;
	margin: 0 auto;
	height: auto;
}
.service-block-two .inner-box h3 {position: relative; font-size: 17px; font-weight: 500; font-family: 'Montserrat', sans-serif; color: #000;}

.service-block-two .inner-box {
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 16px;
	padding: 40px 30px;
	text-align: center;
	transition: .4s;
	overflow: hidden;
	position: relative;
	margin: 15px;
}

.service-block-two .inner-box:hover {
	transform: translateY(-12px);
	box-shadow: 0 25px 50px rgba(0,0,0,.10);
}

.service-block-two .inner-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 5px;
	background: #12c6d3;
	transform: scaleX(0);
	transition: .4s;
}
.service-block-two .inner-box:hover::before {
	transform: scaleX(1);
}

.service-block-two .inner-box h3 a {
	font-size: 28px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	text-decoration: none;
	margin-bottom: 18px;
}

.service-block-two .inner-box p {
	color: #777;
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 25px;
	min-height: 85px;
}

.designation a{color:#01cdd0;}

.designation a:hover {color: #f4b400;}

.designation a i {
	margin-left: 8px;
	transition: .3s;
}


.service-block-two .inner-box .designation {position: relative; color: #a7a8a7; font-size: 14px;}

/* .service-block-two .inner-box:hover {
	border-color: #ecfff2;
	background-color: #ecfff2;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-moz-box-shadow: 0px 0px 20px rgba(0,0,0,0.20);
	-ms-box-shadow: 0px 0px 20px rgba(0,0,0,0.20);
	-o-box-shadow: 0px 0px 20px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.20);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.20);
}
 */


.btn-style-one:hover {color: #01cdd0; background: none; text-decoration: none;}

.footer-social {padding: 10px 0 0;}
.footer-social a:first-child {margin-left: 0;}
.footer-social a {margin: 0 16px; display: inline-block;}
.footer-social a i {color: #000;}
.footer-social a i:hover {color: #fff;}
.footer-social i {font-size: 22px;}
.footer-bar a {color: #fff;}
.footer-bar a:hover {color:#131314; text-decoration:none;}
.footerlinks li a:hover{color: #fff;}
.ourclient > li {min-height: 80px;}
.ourclient > li {
	background-color: #fff;
	border: 2px solid #eee;
	float: left;
	padding: 1px;
	text-align: center;
	transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	width: 15%;
	opacity: 1;
	margin: 4px;
	box-shadow: 2px 1px 2px 0px #ccc;
}
.ourclient li img {width: 100%; height: auto;}
.ourclient {list-style: none; padding: 0;}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .5s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

.testimonial-caption {
	text-align: center;
}
.testimonial.style-2 .testimonial-content {
	position: relative;
	padding-top: 30px;
	text-align: center;
}
.testimonial.style-2 .testimonial-content i {
	color: #F8B500;
	font-size: 88px;
	left: 0%;
	margin-bottom: 0;
	opacity: 0.15;
	position: absolute;
	top: 0px;
}



.testimonial.style-2 .testimonial-content ul.testi-half li {
	text-align: left;
	font-size: 13px;
	width: 50%;
	float: left;
}

.testimonial.style-2 .testimonial-content ul.testi-full li {
	text-align: left;
	font-size: 13px;
	width: 100%;
	float: left;
}
.testimonial-content p {
	margin-bottom: 15px;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 28px;
}
.testimonial-caption h6 {color:#F8B500; font-size: 22px; margin-top: 5px;}
.testimonial-caption label {color: #17202a;}
.testimonial-img {
	position: relative;
	padding-top: 50px;
	margin-top: 20px;
}

.testimonial-img::before {
	background: #F8B500;
	content: "";
	height: 40px;
	left: 50%;
	margin-left: -1.5px;
	position: absolute;
	top: 0;
	width: 3px;
	border-radius: 7px;
}
.testimonial-img img {
	display: block;
	width: auto !important;
	border-radius: 50%;
	border: 10px solid #ffffff;
	margin: 0 auto;
	text-align: center;
}


.testi.owl-theme .owl-dots, .testi.owl-theme .owl-nav {text-align: center; -webkit-tap-highlight-color: transparent;margin-top: 0px;}
.testi.owl-theme .owl-dots .owl-dot {display: inline-block; zoom: 1;}
.testi.owl-theme .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px 7px;
	background: #505050;
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 30px;
}

.testi.owl-theme .owl-dots .owl-dot:hover span, .testi.owl-theme .owl-dots .owl-dot.active span {background: #F8B500;/* height: 25px; */}
.testi .owl-nav .owl-prev {
	position: absolute;
	left:-70px;
	top: 110px;
	width: 66px;
	height: 66px;

	font-size: 20px;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.testi .owl-nav .owl-next {
	position: absolute;
	right: -37px;
	top: 110px;
	width: 66px;
	height: 66px;
	font-size: 20px;
	line-height: 62px;
	text-align: center;
	font-weight: 700;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

/*overall texting*/
.about-text p {
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 28px;
}

.pt-0{padding-top:0px !important;}
.pb-0{padding-bottom:0px !important;}
.pb-8{padding-bottom:80px !important;}

/*about us page*/
.about-page-content {clear: both; width:100%; height:auto;}

.about-page-content .section-head h3::after {
	content: '';
	width: 60px;
	height: 3px;
	background-color: #f8b500;
	position: absolute;
	bottom: 0;
	left: 0;
}
.about-page-content .section-head h3 {
	font-size: 27px;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	margin: 0;
	position: relative;
	padding-bottom: 15px;
	line-height: 30px;
}

.about-page-content .about-inside-img {position: relative; height: auto;}
/* .about-page-content .about-inside-img .img-1 {
	position: absolute;
	right: 0;
	top: 0;
	height: auto;
	z-index: 3;
} */
.about-page-content .about-inside-img .img-2 {
	position: absolute;
	right: 240px;
	top: 155px;
	height: 445px;
	z-index: 5;
}
.about-page-content .about-inside-img .img-3 {
	position: absolute;
	right: 0;
	top: 315px;
	height: 250px;
	z-index: 7;
}

/*team page*/

.team-content {
	clear: both;
	width: 100%;
	height: auto;
	padding-bottom: 110px;
	padding-top: 40px;
}

.teamimg {
	float: left;
	width: 25%;
	height: auto;
}

.teamimg img {
	width: 100%;
	height: auto;
}



/*clients page*/

.client-wrap-layout1 {text-align: center; clear: both;}
.client-box-layout1 {border: 1px solid #dddddd; text-align: center;}
.client-box-layout1 img {
	opacity: 0.50;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.client-box-layout1:hover img {opacity: 1;}
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {padding-right: 0; padding-left: 0;}

/*Testimonials*/
#testimonials{width: 100%; clear: both; display: inline-block;}
.testimonial-box {padding: 1em; font-size: 1.2857em; text-align: left; margin-bottom: 1.1em;}
.item {float: left;}
.yellow-bg {background: #F8B500 !important;}
.gray-bg {background: #f2f2f2;}
.testimonial-box.gray-bg .fa {color: #000;}
.testimonial-box .fa {clear: both; float: none; margin-bottom: .2em;}
.testimonial-box blockquote {margin-bottom: 0; quotes: none; border: none; padding: 0; margin: 0;}
.testimonial-box blockquote p {
	display: block;
	margin-bottom: 0;
	padding: 10px;
	font-size: 14px;
}

.testimonial-box blockquote li { font-size:14px;}
ul.half-divide li {
	width: 50%;
	float: left;
	margin-bottom: 10px;
}

.testimonial-box.blue-bg .fa{color: #fff;}
.testimonial-box .fa {clear: both; float: none; margin-bottom: .2em;}
.testimonial-box footer {display: -webkit-box; font-size: 13px; line-height: 26px; margin-top: 1em; padding: 0px 45px; color: #000;}







/*contact us Page*/
.contactpage {background-color: #fff;width: 100%;margin: 0 auto;z-index: 9;}
.p-0px-b {padding-bottom: 0px;}
.section-contact-down .gray-bg {background: #fcfcfc;}
.m-60px-b {margin-bottom: 60px;}
.section-contact-down .section-title p {font-size: 14px; margin: 0 0 40px; font-family: 'Montserrat', sans-serif;}
.section-contact-down .contact-form-down {margin-bottom: -40px; border-radius: 5px; padding: 10%;}
.contact-form {box-shadow: 0 8px 50px -6px rgba(84,84,120,.26); background: #fff; padding: 20px;}
.contact-form .form-group {position: relative; width: 100%; margin-bottom: 20px;}
.contact-form .form-group .form-control{outline:none;box-shadow:none; height:auto; border:1px solid #d4d4d4; width:100%; font-size:14px; color:#000; background: #f7fafc;}
.feature-content {padding: 10px;}
.feature-box:not(:hover) {background: #fff;}
.feature-box {border: 1px solid #eee; padding: 3%; -webkit-transition: ease all 0.3s; transition: ease all 0.3s;}
.box-shadow {box-shadow: 0 8px 50px -6px rgba(84,84,120,.26);}
.feature-box .icon {margin: 0 0 10px;color:#F8B500;font-size: 35px;}
.feature-box .feature-content h4 {font-size: 18px;font-weight: 600;margin: 0 0 15px;}
.feature-box:hover {margin-top: -10px;}
.theme-hover:hover {background: #01cdd0;}
.feature-box:hover .feature-content h4, .feature-box:hover .icon  {color: #fff;}
.feature-box:hover .feature-content h4, .feature-box:hover p  {color: #fff;}
.border-bottom {border-bottom: 1px solid #dee2e6 !important;}
.section-contact-down .theme-btn.btn-style-one {padding: 10px 45px 10px;}
.contact-details {margin: 50px 0 0;}
.google-map  { padding: 0;}

.map {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
			border:none;
}


/*Career Page*/
.careers {
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 0;
	z-index: 9;
	clear:both;	
}

.careers h5 {
	font-size: 20px;
	line-height: 40px;
	letter-spacing: 0;
	font-weight: 500;
}

.careers a{color:#F8B500;}


.careers h3  span{display:inline-block; background-color:#F8B500; padding:8px; font-size:16px; font-weight:500;}

.hiring-img {margin-bottom:20px;}


.apply{background-color:#01CDD0; padding:10px; margin-top:30px;}

.apply a{color:#444;}
.apply h5{color:#fff;}



.contactpage .intro-cont p {
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #7f7f7f;
	line-height: 1.8;
}

/*group entity*/

.groupentityimages {width: 100%; height: auto; text-align: center; margin: 0 auto;}
.groupentityimages img {width: 100%; height: auto; text-align: center; margin: 0 auto;}


/*services*/
.service-page-content {padding: 80px 0 40px;}

.service-page-content .about-inside-img img {max-width: 100%;}



.pseudo_border {
    position:relative;
    display:inline-block;
}
.pseudo_border::after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	margin: 10px auto;
	width: 60px;
	height: 3px;
	background: #f8b500;
}


.service-page-content .section-head h3 {
	font-size: 27px;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	line-height: 35px;
}

.servicesline {background-color: #01CDD0; color: #fff; text-align: center; padding: 30px 0;}

.servicesline h2 {
	color: #fff;
	font-weight: 500;
	line-height: 40px;
	font-size: 22px;
	padding: 0 22px;
	text-transform: uppercase;
	letter-spacing: 0;
}
.service-page-content2 {padding: 40px 0 60px;}

.service-page-content2 .section-head h3 {	
    font-size: 27px;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	color: #000;}


.heli-listing {list-style: none; position: relative; padding: 0;}
.heli-listing li::before {content: "\f129";}
.heli-listing li::before, .heli-listing-arrow li::before, .heli-listing-checked li::before {
	margin-right: 12px;
	line-height: 28px;
	font-style: normal;
	font-weight: 400;
	font-family: Flaticon;
	vertical-align: middle;
	font-size: 14px;
}


.heli-listing2 {list-style: none; position: relative; padding: 0;}
.heli-listing2 li::before {content: "\f129";}
.heli-listing2 li::before, .heli-listing-arrow li::before, .heli-listing-checked li::before {
	margin-right: 12px;
	line-height: 28px;
	font-style: normal;
	font-weight: 400;
	font-family: Flaticon;
	vertical-align: middle;
	font-size: 14px;
}
.highlighted-yellow {background-color: #F8B500;}
.heli-listing2 li{ float:left; width:100%;}
.heli-listing li{ float:left; width:50%;}
.service-column .service-content-two {background: #fff; box-shadow: 0 4px 5px rgba(233, 236, 239, 0.20);}
.service-column .service-content-two {
	position: relative;
	display: block;
	border: 2px solid #f4f4f4;
	background: transparent;
	padding: 112px 0px 60px 0px;
	transition: all 500ms ease;
	cursor:pointer;
}
.service-column .service-content-two .icon-box {margin-bottom: 40px;}
.service-column .service-content-two .icon-box img {width: 30%; height: auto;}
.service-column .service-content-two:hover h4 a{color:#01CDD0;}
.service-column .service-content-two .arrow-icon  {font-size: 25px;color: #000;}

.service-column .service-content-two .arrow-icon span::after {
	content: '\f1b9';
	position: absolute;
	opacity: 0;
	/* bottom: 0; */
	right: 0;
	transition: 0.5s;
	font-size: 25px;
	color: #000;
	left: 0;
	font-family:Flaticon;
	font-style:normal;

}


.service-column .service-content-two:hover .arrow-icon span:after {opacity: 1; right: 0;}
.service-column .service-content-two:hover {box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);}
.service-column .service-content-two:hover {background: #fff;}


.service-content-two .icon-box i::before {color: #fff; font-size: 60px;margin: 0px;transition: all 500ms ease;}
.service-column .service-content-two h4 a {
	font-size: 22px;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	font-weight: 500;
}


.about-inside-img {
	position: relative;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	right: 0;
	margin: 0 auto;
	text-align: center;
}

.about-inside-img2 {

	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}





.service-page-content .about-inside-img img {
	max-width: 100%;
}
.service-page-content a, .service-page-content2 a {
	color: #01CDD0;
}

#fb-post {
	width: 100%;
	background-image: url(../images/fb-video-background.jpg);
	background-repeat: space;
	background-size: 100% auto;
	padding: 30px 140px 30px;
	float: left;
}


.facebook-video-post{text-align: right; }


#fb-post .section-head {
	float: left;
	width:53%;
	padding: 70px 0;
	vertical-align: middle;
	position: relative;
	top: 40px;
}


#fb-post .section-head h3 {
	font-size: 62px;
	font-weight: 900;
	position: relative;
	padding-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
	color: #01CDD0;
}

#fb-post .section-head h6 {
	color: #000;
	font-size: 20px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-family: 'Montserrat', sans-serif;
	line-height: 30px;
}

.facebook-video-post iframe {
	margin-left: 40px;
	float:left;
}





/* RESPONSIVE MEDIUM  FIXES */
/*@media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) {
	.header{padding: 30px 60px;}
	.slider .swiper-container .swiper-slide .inner h2{font-size: 4em;}
	.slider .swiper-container .swiper-slide .inner{padding: 0 60px;}
	.slider .swiper-container .swiper-pagination-fraction{left: 60px;}
	.icon-features p{padding: 0;}
	.icon-features h3{font-size: 20px;}
	.side-image-content .inner .contenty h2{font-size: 2em; text-indent: 0;}
	.awards h2{font-size: 3em; text-indent: 0;}
}	*/


/* RESPONSIVE TABLET FIXES */
/*@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
	.slider .swiper-container .swiper-slide .inner h2{max-width: 70%;}
	.slider .swiper-container .swiper-slide .inner p{max-width: 70%;}
	.slider .swiper-container .swiper-button-prev{ right: 160px;}
	.slider .swiper-container .swiper-button-line{right: 110px;}
	.slider .swiper-container .swiper-button-next{ right: 60px;}
	.works .grid-item{width: 50% !important;}
	.works .grid-item-double{width: 50% !important;}
	.works .grid-sizer{width: 50% !important;}
	.int-hero .video-bg{display: none;}
	.int-hero .inner h2{max-width: 100%;}
	.side-image-content{display: block;}
	.side-image-content .inner{width: 100%; float: left; display: block;}
	.side-image-content .inner .contenty{padding: 100px 15%;}
	.contact form input[type="text"]{border-radius: 0 !important; box-shadow: none !important;}
	.contact form textarea{border-radius: 0 !important; box-shadow: none !important;}
	
}

*/


/* RESPONSIVE MOBILE FIXES */
/*@media only screen and (max-width: 601px), only screen and (max-device-width: 767px) {
	.header{padding: 30px;}
	.header .language{display: none;}
	.social-bar{display: none;}
	.slider .swiper-container .swiper-slide .inner{padding: 0 30px;}
	.slider .swiper-container .swiper-slide .inner h2{max-width: 100%; font-size: 3.5em;}
	.slider .swiper-container .swiper-slide .inner p{max-width: 100%;}
	.slider .swiper-container .swiper-button-prev{ display: none;}
	.slider .swiper-container .swiper-button-line{ display: none;}
	.slider .swiper-container .swiper-button-next{ display: none;}
	.slider .swiper-container .swiper-pagination-fraction{display: none;}
	.scroll-down{display: none;}
	.int-hero{padding-left: 30px; padding-right: 30px;}
	.int-hero .inner h2{ max-width: 100%; font-size: 3.5em;}
	.content{ width: calc(100% - 30px); margin: 0 15px;}
	.about-studio .hero-image{overflow: hidden; margin-bottom: 50px;}
	.about-studio .hero-image img{ width: 150%; max-width: inherit;}
	.about-studio h5{font-size: 2em;}
	.about-studio p:last-child{max-width: 100%; margin-bottom: 0;}
	.team-members .member{width: 50%;}
	.works .grid-item{width: 100% !important;}
	.works .grid-item-double{width: 100% !important;}
	.icon-features a{margin-bottom: 50px;}
	
	.awards .award{ width: 60%; margin: 0 20%; margin-top: -1px;}
	.clients ul li{width: 50%;}
	.clients ul li:after{display: none;}

	.contact .titles{padding: 0;}
	.footer {
	width: calc(100% - 0);
	margin: 0 0;
}
	.footer h2{font-size: 3em; padding: 0;}
	.footer .social-media{display: block;}
}
*/


@media (min-width: 1200px) and (max-width: 1300px) {

.content2 {width: 100%;margin: 0;}
/*services carousel*/
.upper-carousel-section .owl-nav .owl-prev {left: -10px; width: 36px; height: 36px; font-size: 20px; line-height: 38px; top:180px;}
.upper-carousel-section .owl-nav .owl-next {width: 36px;height: 36px; font-size: 20px; line-height: 38px; right: -10px;top:180px;}


/*Footer*/
.footer {max-height: 530px;height: 530px;}
}


@media (min-width: 1121px) and (max-width: 1199px) {

/*home*/
.ourclient > li {width: 23%;}
.content2 {width: 100%; margin: 0 auto;}
.side-image-content .inner .sub-image {right: -30px;}
.side-image-content .inner .main-image {margin-bottom: 150px;}

#testimonials ul {padding-left: 13px;}

}

@media (min-width: 994px) and (max-width: 1120px) {

/*home*/
/*services carousel*/
.upper-carousel-section .owl-nav .owl-prev {left: -10px; width: 36px; height: 36px; font-size: 20px; line-height: 38px;}
.upper-carousel-section .owl-nav .owl-next {width: 36px;height: 36px; font-size: 20px; line-height: 38px; right: -10px;}

.ourclient > li {width: 23%;}
.content2 {width: 100%; margin: 0 auto;}
.side-image-content .inner .sub-image {right: -30px;}
.side-image-content .inner .main-image {margin-bottom: 150px;}

#testimonials ul {padding-left: 13px;}

.footercontact {width: 48%;}



}


@media (min-width: 769px) and (max-width: 993px) {

/*home*/

/*services carousel*/
.upper-carousel-section .owl-nav .owl-prev {left: -10px; width: 36px; height: 36px; font-size: 20px; line-height: 38px;}
.upper-carousel-section .owl-nav .owl-next {width: 36px;height: 36px; font-size: 20px; line-height: 38px; right: -10px;}

/*Work*/
.works figure figcaption a {padding: 10px;}
.works figure figcaption h5 {font-size: 12px;}
.works figure figcaption small {font-size: 7px;}
.ourclient > li {width: 27%;margin: 2px;}

#testimonials ul {padding-left: 18px;}

/*Footer*/
.waveWrapper {position: relative;}
.footer-inner {padding: 40px 0 60px;}
section {padding: 50px 0;}
.footercontact {
	width: 48%;
}

}


@media (min-width: 601px) and (max-width: 768px) {

/*home*/	
.upper-carousel-section .owl-nav .owl-prev {left: -10px; width: 36px; height: 36px; font-size: 20px; line-height: 38px;}
.upper-carousel-section .owl-nav .owl-next {width: 36px;height: 36px; font-size: 20px; line-height: 38px; right: -10px;}
.side-image-content .inner:first-child {display: none;}
.side-image-content .inner .contenty {width: 100%; float: left; padding: 30px 20px 40px; color: #fff;}
.side-image-content .inner {width: 100%;}
.content {padding-bottom: 0;}
.works figure figcaption a {padding: 10px;}
.works figure figcaption h5 {font-size: 12px;}
.works figure figcaption small {font-size: 7px;}
.awards {padding: 60px 0;}
.awards .section-head h4::after {bottom: 0;left: 0;right: 0;margin: 0 auto;}
.awards .section-head h4 {text-align: center;}
.awards .section-head h6 {text-align: center;}
.ourclient > li {width: 24%;margin: 2px;}
	
#testimonials ul {padding-left: 18px;}	
	
/*Footer*/
.waveWrapper {position: relative;}
.footer-inner {padding: 40px 0 60px;}
section {padding: 50px 0;}
.footercontact {
	width: 48%;
}
}


@media (min-width: 481px) and (max-width: 600px) {

/*home*/
.content {padding-bottom: 0;}
.works figure figcaption a {padding: 5px;}
.works figure figcaption h5 {font-size: 10px;}
.works figure figcaption small {font-size: 6px;}


/*services*/
.service-column .service-content-two {margin: 10px 0; }
.service-page-content .about-inside-img {left: 0;}
.service-page-content {padding: 20px 0 40px;}
.heli-listing li {float: left; width: 100%;}
.service-page-content2 .section-head h3 {line-height: 40px;}
section {padding: 50px 0;}

/*about us*/
.about-text {text-align: justify;}

/*contact us*/
.section.section-contact-down {padding: 40px 0;}
.section-contact-down .contact-form-down {margin-bottom: -60px;}

/*testimonials*/
.main-testimonials.section {padding: 40px 0;}
.testimonial-box .fa {font-size: 20px;}
#testimonials ul {padding-left: 15px;}


/*Footer*/
#quotes h4 {font-size: 50px;line-height: 60px;margin-bottom: 20px;}
.footer-inner {padding: 40px 0 60px;}
.waveWrapper {position: relative;}
.footercontact {width: 48%;}
.footercontact2 li {width: 100%;}

}


@media (min-width: 320px) and (max-width: 480px) {
	
/*home*/

.side-image-content .inner:first-child {display: none;}
.side-image-content .inner .contenty {width: 100%; float: left; padding: 30px 20px 40px; color: #fff;}
.side-image-content .inner {width: 100%;}
.content2 {width: 98%;margin: 0 0;}
	
/*services*/
.service-column .service-content-two {margin: 10px 0; }
.service-page-content .about-inside-img {left: 0;}
.service-page-content {padding: 20px 0 40px;}
.heli-listing li {float: left; width: 100%;}
.service-page-content2 .section-head h3 {line-height: 40px;}
section {padding: 50px 0;}

/*about us*/
.about-text {text-align: justify;}


/*contact us*/
.section.section-contact-down {padding: 40px 0;}
.section-contact-down .contact-form-down {margin-bottom: -60px;}

/*testimonials*/
.main-testimonials.section {padding: 40px 0;}
.testimonial-box .fa {font-size: 20px;}
ul.half-divide li {width: 100%;}
#testimonials ul {padding-left: 13px;}

/*Footer*/
#quotes h4 {font-size: 50px;line-height: 60px;margin-bottom: 20px;}
.footer-social a {margin: 0 13px;}
.footer .footer-bar span{ width: 100%; text-align: center;}
.waveWrapper {position: relative;}
.footer-inner {padding: 40px 0 60px;}
.footercontact {width: 100%;}
.footercontact2 {width: 100%; margin: 0 0px;}

}

/* Process */

/*==========================
      OUR PROCESS
==========================*/

.our-process{
    padding:100px 0;
    background:#fff;
}

.section-title span{
  	color: #777;
	font-size: 11px;
	font-weight: 500;
    letter-spacing:4px;
    text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
}



.section-title h2{
    font-size:48px;
    font-weight:700;
    margin:15px 0 20px;
}

.section-title p {
	color: #666;
	line-height: 1.8;
	margin-bottom: 50px;
	width: 90%;
}

/* Process Items */

.process-item{
    display:flex;
    align-items:flex-start;
    margin-bottom:35px;
}

.number{
    font-size:42px;
    font-weight:700;
    color:#d7d7d7;
    width:70px;
    flex-shrink:0;
    line-height:1;
}

.process-item h4{
    margin-bottom:8px;
    font-size:24px;
    font-weight:600;
}

.process-item p{
    color:#666;
    margin:0;
    line-height:1.7;
}

/* Image */

.process-image{
    position:relative;
    text-align:right;
}

.process-image img{
    width:100%;
    border-radius:8px;
    display:block;
}

/* Floating Box */

.floating-box {
	position: absolute;
	left: -100px;
	top: 87%;
	transform: translateY(-50%);
	background: #111;
	color: #fff;
	padding: 40px;
	width: 340px;
}

.floating-box h4 {
	font-size: 27px;
	margin-bottom: 20px;
	font-weight: 700;
	color: #fff;
}

.floating-box p{

    color:#d8d8d8;

    line-height:1.8;

    margin:0;

}

/* Responsive */

@media(max-width:991px){

.process-image{
    margin-top:50px;
}

.floating-box{

    position:relative;

    left:0;

    top:0;

    transform:none;

    width:100%;

    margin-top:-70px;

}

.section-title h2{

    font-size:36px;

}

}

@media(max-width:767px){

.our-process{

    padding:70px 0;

}

.number{

    font-size:32px;

    width:55px;

}

.process-item h4{

    font-size:20px;

}

.section-title h2{

    font-size:30px;

}

.floating-box{

    padding:30px;

}

}

/*==========================================
        WHY CHOOSE TRINITY
==========================================*/

/*===============================
        WHY CHOOSE TRINITY
================================*/

.why-trinity {
	padding: 90px 0 70px;
	background-color: rgba(247,244,237,0.6);
	overflow: hidden;
	background-image: url("https://www.transparenttextures.com/patterns/always-grey.png");
/* 	background-image: url(../images/home/batthern.png); */
	background-repeat: repeat;
	background-size: auto auto;
	background-position: center center;
	box-shadow: 5px 5px 30px 0px #888888;
}


.why-content {
	max-width: 100%;
	height: auto;
}

.subtitle{

    display:inline-block;

    color:#777;

    font-size:11px;

    font-weight:500;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;
	font-family: 'Montserrat', sans-serif;

}




.why-content h2{

    font-size:45px;

    line-height:1.1;

    font-weight:700;

    color:#181818;

    margin-bottom:35px;

}

.why-content p {
	font-size: 17px;
	line-height: 1.9;
	color: #666;
	margin-bottom: 35px;
	width: 75%;
}

.read-btn{

    color:#0B5569;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.read-btn i{

    margin-left:8px;

}

.read-btn:hover{

    color:#f4b400;

}


/*============================*/

.feature-wrapper{

    position:relative;

    height:620px;

}

.feature-card{

    position:absolute;

    width:300px;

    background:#fff;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    border-radius:8px;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.feature-card h4 {
	font-size: 20px;
	margin-bottom: 22px;
	color: #181818;
	font-weight: 600;
}

.feature-card span{

    display:block;

    width:40px;

    height:2px;

    background:#12c6d3;

    margin-bottom:20px;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    font-size:16px;

}

/* Position */

.top-right {
	top: 0;
	right: -100px;
}

.middle-left {
	top: 210px;
	left: -180px;
}

.bottom-right {
	bottom: 0;
	right: -100px;
}

/* Decorative Shapes */

.why-trinity::before{

    content:"";

    position:absolute;

    left:90px;

    bottom:120px;

    width:130px;

    height:130px;

    background:radial-gradient(circle,#d9d9d9 1px,transparent 1px);

    background-size:12px 12px;

    opacity:.4;

}

.why-trinity::after{

    content:"";

    position:absolute;

    right:120px;

    top:140px;

    width:90px;

    height:90px;

    border-top:2px solid #e8e8e8;

    border-right:2px solid #e8e8e8;

    border-radius:50%;

    transform:rotate(35deg);

}

/*===========================*/

@media(max-width:991px){

.feature-wrapper{

    height:auto;

    display:grid;

    gap:25px;

    margin-top:60px;

}

.feature-card{

    position:relative;

    width:100%;

    top:unset;

    right:unset;

    left:unset;

    bottom:unset;

}

.why-content h2{

    font-size:42px;

}

}

@media(max-width:767px){

.why-content h2{

    font-size:34px;

}

.why-trinity{

    padding:80px 0;

}

}

/*===============================
        ABOUT TRINITY
================================*/

.about-trinity {
	padding: 0 0 60px 0;
	background: #fff;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.about-header{
    max-width:70%;
    margin:auto;
    text-align:center;
    margin-bottom:10px;

}

.section-tag {
	display: inline-block;
	color: #777;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 500;
	margin-bottom: 0;
	font-family: 'Montserrat', sans-serif;
}

.about-header h2{
    font-size:50px;
    line-height:1.1;
    color:#111;
    margin-bottom:30px;
    font-weight:700;

}

.about-header h2 span{ color:#f4b400;}

.about-header p{
    max-width:70%;
    margin:auto;
    font-size:17px;
    color:#666;
    line-height:1.9;
}


/*========================*/

@media(max-width:991px){
.about-header h2{font-size:42px;}
}

@media(max-width:768px){

.about-header{margin-bottom:45px;}

.about-header h2{font-size:34px;}

.about-header p{font-size:16px;}

.about-trinity{padding:80px 0;}

}




/*==========================
        CONTACT STRIP
===========================*/

.contact-strip {
	padding: 70px 0;
	background-color: #083F50;
	box-shadow: 0 15px 40px rgba(0,0,0,.12);
	border: 1px solid rgba(255,255,255,.08);
}

.contact-box {
	max-width: 100%;
	margin: auto;
	background: ;
	/* border-radius: 18px; */
	padding: 0 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* border: 1px solid rgba(255,255,255,.08); */
	/* box-shadow: ; */
}

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    flex:1;

}

.contact-item .icon{

    width:52px;

    height:52px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.contact-item .info span{

    display:block;

    color:#ffffff;

    font-size:15px;

    margin-bottom:6px;

    opacity:.9;

}

.contact-item .info a{

    color:#C8A34D;

    text-decoration:none;

    font-weight:600;

    font-size:15px;

    transition:.3s;

}

.contact-item .info a:hover{

    color:#fff;

}

.divider{

    width:1px;

    height:55px;

    background:rgba(255,255,255,.12);

    margin:0 20px;

}





/* =========================================
   WHY CHOOSE TRINITY
========================================= */

.why-trinity-section {
	width: 100%;
	padding: 90px 0 100px;
	background: #f8fbfc;
	height: auto;
	clear: both;
}


/* Container */

.why-trinity-section .container {

    width: 90%;

    max-width: 1400px;

    margin: 0 auto;

}


/* =========================================
   HEADING
========================================= */

.why-trinity-heading {

    text-align: center;

    margin-bottom: 55px;

}


.why-eyebrow {

    display: block;

    margin-bottom: 10px;

    color: #0b6175;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;

}


.why-trinity-heading h2 {

    margin: 0;

    color: #222;

    font-size: 36px;

    line-height: 1.25;

    font-weight: 700;

}


.heading-line {

    width: 55px;

    height: 3px;

    margin: 18px auto 0;

    background: #f5b400;

}


/* =========================================
   FEATURE GRID
========================================= */

.why-trinity-grid {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    border: 1px solid #dce7ea;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

}


/* =========================================
   FEATURE ITEM
========================================= */

.why-trinity-item {

    position: relative;

    min-height: 260px;

    padding: 35px 22px 30px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


/* Vertical divider */

.why-trinity-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 35px;

    right: 0;

    width: 1px;

    height: calc(100% - 70px);

    background: #dce7ea;

}


/* =========================================
   ICON
========================================= */

.why-icon {

    width: 65px;

    height: 65px;

    border: 1px solid #0b6175;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    color: #0b6175;

    font-size: 25px;

    background: #ffffff;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}




.why-trinity-item h3 {
	margin: 0 0 13px;
	color: #131314;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 700;
}

.why-trinity-item p {
	margin: 0;
	color: #131314;
	font-size: 13px;
	line-height: 1.7;
	max-width: 180px;
}


/* =========================================
   HOVER
========================================= */

.why-trinity-item:hover {

    background: #ffffff;

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(8, 63, 80, .10);

    z-index: 2;

}


.why-trinity-item:hover .why-icon {

    background: #0b6175;

    color: #ffffff;

    transform: translateY(-3px);

}


/* Yellow accent */

.why-trinity-item:hover h3 {

    color: #0b6175;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1199px) {

    .why-trinity-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .why-trinity-item {

        min-height: 250px;

    }


    .why-trinity-item:nth-child(3)::after,
    .why-trinity-item:nth-child(6)::after {

        display: none;

    }

}


/* =========================================
   MOBILE / TABLET
========================================= */

@media (max-width: 767px) {

    .why-trinity-section {

        padding: 65px 0 70px;

    }


    .why-trinity-heading {

        margin-bottom: 35px;

    }


    .why-trinity-heading h2 {

        font-size: 28px;

    }


    .why-eyebrow {

        font-size: 10px;

        letter-spacing: 3px;

    }


    .why-trinity-grid {

        grid-template-columns:
            repeat(2, 1fr);

        border-radius: 10px;

    }


    .why-trinity-item {

        min-height: 250px;

        padding: 30px 18px;

    }


    .why-trinity-item:nth-child(2)::after,
    .why-trinity-item:nth-child(4)::after,
    .why-trinity-item:nth-child(6)::after {

        display: none;

    }


    .why-trinity-item:nth-child(3)::after {

        display: block;

    }


    .why-trinity-item h3 {

        font-size: 15px;

    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .why-trinity-grid {

        grid-template-columns: 1fr;

    }


    .why-trinity-item {

        min-height: auto;

        padding: 35px 25px;

    }


    .why-trinity-item::after {

        display: none !important;

    }


    .why-trinity-item:not(:last-child) {

        border-bottom: 1px solid #dce7ea;

    }


    .why-trinity-heading h2 {

        font-size: 25px;

    }

}







/*==========================
        RESPONSIVE
===========================*/

@media(max-width:991px){

.contact-box{

    flex-direction:column;

    gap:25px;

    align-items:flex-start;

}

.divider{

    display:none;

}

.contact-item{

    width:100%;

}

}

.choose-box {
	height: 100%;
	padding: 50px 28px 45px;
	background-color: var(--tj-color-common-white);
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.choose-box.style-2 {
	padding: 40px 28px;
}

.choose-box .choose-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 100%;
}
.choose-box.style-2 .choose-icon {
	margin-bottom: 25px;
}

.choose-box .choose-icon {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	color: var(--tj-color-theme-primary);
	font-size: 88px;
	line-height: 1;
	max-width: 88px;
	margin-bottom: 43px;
}

.choose-box .title {
	font-weight: var(--tj-fw-sbold);
	margin-bottom: 20px;
}

.choose-box .desc {
	margin-bottom: 0;
}

.choose-box .text-btn {
	margin-top: auto;
	padding-top: 27px;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.choose-box:hover {
	background-color: #1d9191;
}

/* ==========================================
   OUR APPROACH SECTION
========================================== */

.safety-approach {
    width: 100%;
    padding: 60px 0;
    background: #f8fafb;
    position: relative;
    overflow: hidden;
}

.safety-approach .container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

.approach-heading {
    text-align: center;
    margin: 0 auto 70px;
}

.approach-heading p {
    margin: 0 auto;
    max-width: 760px;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}


/* ==========================================
   TIMELINE
========================================== */

.approach-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.approach-step {
	width: 145px;
	text-align: center;
	position: relative;
	flex-shrink: 0;
}



/* ==========================================
   ICON
========================================== */

.step-icon {
	width: 78px;
	height: 78px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #075b6d;
	border: 6px solid #ffffff;
	box-shadow: 0 0 0 2px #dce8eb, 0 8px 20px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	padding: 50px;
}

.step-icon i {
    color: #ffffff;
    font-size: 30px;
}


/* Hover */

.approach-step:hover .step-icon {
    transform: translateY(-7px);
    background: #f6b500;
    box-shadow:
        0 0 0 2px #f6b500,
        0 12px 25px rgba(0, 0, 0, 0.12);
}


/* ==========================================
   STEP CONTENT
========================================== */

.approach-step h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    color: #17313b;
}


/* ==========================================
   CONNECTOR
========================================== */

.timeline-connector {
	width: 45px;
	height: 2px;
	background: #d7e0e3;
	margin-top: 68px;
	position: relative;
	flex-shrink: 0;
}

.timeline-connector::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #f6b500;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1200px) {

    .approach-timeline {
        flex-wrap: wrap;
        row-gap: 50px;
    }

    .approach-step {
        width: 150px;
    }

    .timeline-connector {
        width: 35px;
    }

}


/* ==========================================
   TABLET / SMALL LAPTOP
========================================== */

@media (max-width: 992px) {

    .safety-approach {
        padding: 80px 0;
    }

    .approach-heading {
        margin-bottom: 55px;
    }

    .approach-heading h2 {
        font-size: 40px;
    }

    .approach-timeline {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 45px 20px;
    }

    .approach-step {
        width: 100%;
    }

    .timeline-connector {
        display: none;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .safety-approach {
        padding: 65px 0;
    }

    .safety-approach .container {
        width: 90%;
    }

    .approach-heading {
        margin-bottom: 45px;
    }

    .approach-heading span {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .approach-heading h2 {
        font-size: 34px;
    }


    .approach-timeline {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: relative;
        padding-left: 20px;
    }

    /* Vertical line */

    .approach-timeline::before {
        content: "";
        position: absolute;
        left: 59px;
        top: 25px;
        bottom: 25px;
        width: 2px;
        background: #d7e0e3;
    }

    .approach-step {
        width: 100%;
        min-height: 125px;
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        text-align: left;

        position: relative;
        z-index: 1;
    }


    .step-icon {
        position: absolute;

        width: 58px;
        height: 58px;

        left: 10px;
        top: 25px;

        margin: 0;

        border-width: 4px;
    }

    .step-icon i {
        font-size: 18px;
    }

    .approach-step h3 {
        grid-column: 2;
        grid-row: 1;

        margin: 28px 0 5px;

        font-size: 18px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {


    .approach-step {
        grid-template-columns: 70px 1fr;
    }

    .approach-timeline::before {
        left: 49px;
    }

    .step-icon {
        left: 0;
    }

    .approach-step h3 {
        font-size: 17px;
    }

}



/* ==========================================
   WHY CHOOSE TRINITY
========================================== */

.why-choose-trinity2 {
    width: 100%;
    padding: 0 0 75px;
    background: #f8fafb;
    position: relative;
}


/* ==========================================
   CONTAINER
========================================== */

.why-choose-container {
	width: 90%;
	max-width: 80%;
	margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

.why-choose-heading {
    text-align: center;
    margin-bottom: 45px;
}

.why-choose-heading span {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #777;
}

.why-choose-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 400;
    color: #26323a;
}

.why-choose-heading h2 strong {
    font-weight: 700;
    color: #075d70;
}


/* Yellow underline */

.why-choose-line {
    width: 42px;
    height: 3px;
    margin: 15px auto 0;
    background: #f5b400;
}


/* ==========================================
   GRID
========================================== */

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
}


/* ==========================================
   ITEM
========================================== */

.why-choose-item {
	padding: 10px 18px 20px;
	position: relative;
}

/* Vertical divider */

.why-choose-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 0;
    width: 1px;
    height: 125px;
    background: #d7e1e4;
}


/* ==========================================
   ICON
========================================== */

.why-choose-icon {
	margin-bottom: 25px;
	float: left;
	align-items: center;
	justify-content: center;
	color: #075d70;
	font-size: 40px;
	margin-right: 10px;
}



/* ==========================================
   TITLE
========================================== */

.why-choose-item h3 {
	margin: 15px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 700;
	color: #131314;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1100px) {

    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid #dce5e8;
        background: #ffffff;
    }

    .why-choose-item {
        padding: 30px 20px;
        border-bottom: 1px solid #dce5e8;
    }

    .why-choose-item:nth-child(3n)::after {
        display: none;
    }

    .why-choose-item:nth-child(4),
    .why-choose-item:nth-child(5),
    .why-choose-item:nth-child(6) {
        border-bottom: none;
    }

}


/* ==========================================
   TABLET / SMALL LAPTOP
========================================== */

@media (max-width: 768px) {

    .why-choose-trinity {
        padding: 60px 0;
    }

    .why-choose-heading {
        margin-bottom: 35px;
    }

    .why-choose-heading h2 {
        font-size: 27px;
    }

    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-choose-item {
        min-height: 190px;
    }

    .why-choose-item:nth-child(3n)::after {
        display: block;
    }

    .why-choose-item:nth-child(2n)::after {
        display: none;
    }

    .why-choose-item:nth-child(4) {
        border-bottom: 1px solid #dce5e8;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 576px) {

    .why-choose-trinity {
        padding: 50px 0;
    }

    .why-choose-container {
        width: 90%;
    }

    .why-choose-heading span {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .why-choose-heading h2 {
        font-size: 25px;
    }

    .why-choose-grid {
        grid-template-columns: 1fr;

        border-radius: 6px;
        overflow: hidden;
    }

    .why-choose-item {
        min-height: auto;

        padding: 30px 20px;

        border-bottom: 1px solid #dce5e8;
    }

    .why-choose-item:last-child {
        border-bottom: none;
    }

    .why-choose-item::after {
        display: none !important;
    }

    .why-choose-icon {
        width: 65px;
        height: 65px;

        font-size: 22px;
    }

    .why-choose-item h3 {
        max-width: 280px;

        font-size: 15px;
    }

}


/* ==========================================
   VERY SMALL MOBILE
========================================== */

@media (max-width: 400px) {

    .why-choose-heading h2 {
        font-size: 23px;
    }

    .why-choose-item h3 {
        font-size: 14px;
    }

}

/* ==========================================
   OUR COMMITMENT
========================================== */

.trinity-commitment {
    width: 100%;
    background: #003f4d;
    padding: 38px 0;
    position: relative;
}


/* ==========================================
   CONTAINER
========================================== */

.commitment-container {
    width: 90%;
    max-width: 1050px;
    margin: 0 auto;

    display: flex;
    align-items: center;

    min-height: 105px;
}


/* ==========================================
   ICON
========================================== */

.commitment-icon {
    width: 145px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    font-size: 65px;
}


/* ==========================================
   YELLOW DIVIDER
========================================== */

.commitment-divider {
    width: 3px;
    height: 95px;

    background: #f5b400;

    margin: 0 35px 0 25px;

    flex-shrink: 0;
}


/* ==========================================
   CONTENT
========================================== */

.commitment-content {
    max-width: 700px;
}

.commitment-content h2 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;

    font-weight: 700;
}

.commitment-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: 14px;
    line-height: 1.65;

    font-weight: 400;
}

.commitment-content strong {
    color: #ffffff;
    font-weight: 700;
}


/* ==========================================
   SUBTLE TOP / BOTTOM DETAIL
========================================== */

.trinity-commitment::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: rgba(255, 255, 255, 0.08);
}

.trinity-commitment::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background: rgba(255, 255, 255, 0.08);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .commitment-container {
        width: 88%;
    }

    .commitment-icon {
        width: 110px;
        font-size: 55px;
    }

    .commitment-divider {
        margin-left: 15px;
        margin-right: 28px;
    }

    .commitment-content h2 {
        font-size: 23px;
    }

    .commitment-content p {
        font-size: 13px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .trinity-commitment {
        padding: 40px 0;
    }

    .commitment-container {
        width: 88%;

        flex-direction: column;

        text-align: center;
    }

    .commitment-icon {
        width: 100%;
        margin-bottom: 20px;

        font-size: 52px;
    }

    .commitment-divider {
        width: 45px;
        height: 3px;

        margin: 0 auto 22px;

        background: #f5b400;
    }

    .commitment-content {
        max-width: 100%;
    }

    .commitment-content h2 {
        font-size: 23px;
        margin-bottom: 12px;
    }

    .commitment-content p {
        font-size: 14px;
        line-height: 1.7;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 400px) {

    .trinity-commitment {
        padding: 35px 0;
    }

    .commitment-content h2 {
        font-size: 21px;
    }

    .commitment-content p {
        font-size: 13px;
    }
}



/* ==========================================
   WHY MARKETING COMMUNICATION MATTERS
========================================== */

.marketing-matters {
	width: 100%;
	padding: 100px 0;
	background: #f3f3f3;
}

.marketing-matters-container {
    width: 88%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;

    gap: 65px;
}


/* ==========================================
   IMAGE
========================================== */

.marketing-matters-image {
	position: relative;
	height: auto;
	overflow: hidden;
}

.marketing-matters-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: none;
}


/* Small label over image */

.image-label {
    position: absolute;

    left: 0;
    bottom: 0;

    background: #075d70;

    padding: 15px 25px;
}

.image-label span {
    color: #ffffff;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 2px;
}


/* ==========================================
   RIGHT CONTENT
========================================== */

.marketing-matters-content {
    padding: 10px 0;
}

.section-small-title {
    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;

    color: #777;

    text-transform: uppercase;
}


.marketing-matters-content h2 {
    margin: 0;

    color: #26323a;

    font-size: 38px;
    line-height: 1.18;

    font-weight: 400;
}

.marketing-matters-content h2 strong {
    color: #075d70;
    font-weight: 700;
}


/* ==========================================
   YELLOW LINE
========================================== */

.yellow-line {
    width: 45px;
    height: 3px;

    margin: 18px 0 25px;

    background: #f5b400;
}


/* ==========================================
   INTRO
========================================== */

.intro-text {
    margin: 0 0 14px;

    color: #394850;

    font-size: 16px;
    line-height: 1.65;
}

.intro-text strong {
    color: #075d70;
}


.support-text {
    margin: 0 0 30px;

    color: #777;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================
   BENEFITS
========================================== */

.marketing-benefits {
    width: 100%;
}


/* Individual benefit */

.marketing-benefit {
    display: flex;
    align-items: flex-start;

    padding: 14px 0;

    border-top: 1px solid #e5e8e9;
}

.marketing-benefit:last-child {
    border-bottom: 1px solid #e5e8e9;
}


/* ==========================================
   BENEFIT CONTENT
========================================== */

.benefit-content {
    padding-left: 5px;
}

.benefit-content h3 {
    margin: 0 0 3px;

    color: #173b47;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 700;
}

.benefit-content p {
    margin: 0;

    color: #777;

    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .marketing-matters {
        padding: 80px 0;
    }

    .marketing-matters-container {
        width: 90%;

        grid-template-columns: 45% 55%;

        gap: 40px;
    }

    .marketing-matters-image {
        height: 560px;
    }

    .marketing-matters-content h2 {
        font-size: 32px;
    }

    .intro-text {
        font-size: 15px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .marketing-matters {
        padding: 60px 0;
    }

    .marketing-matters-container {
        width: 90%;

        display: flex;
        flex-direction: column;

        gap: 40px;
    }


    /* Image */

    .marketing-matters-image {
        width: 100%;
        height: 400px;
    }


    /* Content */

    .marketing-matters-content {
        width: 100%;
    }

    .marketing-matters-content h2 {
        font-size: 30px;
    }

    .intro-text {
        font-size: 15px;
    }

    .support-text {
        font-size: 14px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .marketing-matters {
        padding: 50px 0;
    }

    .marketing-matters-image {
        height: 330px;
    }

    .marketing-matters-content h2 {
        font-size: 27px;
    }

    .section-small-title {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .benefit-content h3 {
        font-size: 14px;
    }

    .benefit-content p {
        font-size: 12px;
    }
}


/* ==========================================
   MARKETING COMMUNICATION CTA
========================================== */

.marketing-cta {
    width: 100%;
    padding: 90px 0;

    background: #075d70;

    position: relative;
    overflow: hidden;
}


/* ==========================================
   INNER
========================================== */

.marketing-cta-inner {
    width: 88%;
    max-width: 1150px;

    margin: 0 auto;

    position: relative;
}


/* ==========================================
   CONTENT
========================================== */

.marketing-cta-content {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;

    position: relative;
    z-index: 2;
}


/* ==========================================
   SMALL LABEL
========================================== */

.cta-label {
    display: block;

    margin-bottom: 18px;

    color: #f5b400;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;
    text-transform: uppercase;
}


/* ==========================================
   HEADING
========================================== */

.marketing-cta h2 {
    margin: 0;

    color: #ffffff;

    font-size: 44px;
    line-height: 1.2;

    font-weight: 400;
}

.marketing-cta h2 span {
    display: block;

    color: #ffffff;

    font-weight: 700;
}


/* ==========================================
   YELLOW LINE
========================================== */

.cta-line {
    width: 50px;
    height: 3px;

    margin: 22px auto 25px;

    background: #f5b400;
}


/* ==========================================
   DESCRIPTION
========================================== */

.marketing-cta p {
    max-width: 760px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;
    line-height: 1.75;
}


/* ==========================================
   BUTTON
========================================== */

.marketing-cta-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    padding: 15px 25px;

    background: #f5b400;

    color: #173b47;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    border: 1px solid #f5b400;

    transition: none;
}

.marketing-cta-btn span {
    font-size: 20px;
    line-height: 1;
}


/* ==========================================
   DECORATIVE CIRCLES
========================================== */

.cta-decoration {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;
}


/* Left decoration */

.cta-decoration-1 {
    width: 280px;
    height: 280px;

    left: -180px;
    top: -80px;
}


/* Right decoration */

.cta-decoration-2 {
    width: 380px;
    height: 380px;

    right: -230px;
    bottom: -220px;
}


/* ==========================================
   SMALL DOTS
========================================== */

.marketing-cta-inner::before {
    content: "";

    position: absolute;

    left: 4%;
    top: 20px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #f5b400;
}

.marketing-cta-inner::after {
    content: "";

    position: absolute;

    right: 5%;
    bottom: 15px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,0.5);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 900px) {

    .marketing-cta {
        padding: 75px 0;
    }

    .marketing-cta h2 {
        font-size: 38px;
    }

    .marketing-cta p {
        max-width: 680px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .marketing-cta {
        padding: 65px 0;
    }

    .marketing-cta-inner {
        width: 90%;
    }

    .cta-label {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .marketing-cta h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .marketing-cta p {
        font-size: 14px;
        line-height: 1.7;
    }

    .marketing-cta-btn {
        width: auto;

        padding: 14px 18px;

        font-size: 12px;
    }

    .cta-decoration-1 {
        width: 180px;
        height: 180px;

        left: -120px;
        top: -60px;
    }

    .cta-decoration-2 {
        width: 250px;
        height: 250px;

        right: -160px;
        bottom: -150px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 400px) {

    .marketing-cta h2 {
        font-size: 26px;
    }

    .marketing-cta p {
        font-size: 13px;
    }

    .marketing-cta-btn {
        font-size: 11px;
        padding: 13px 16px;
    }

}

.group-links a {
	width: 22%;
	height: auto;
	display: block;
	float: left;
	background-color: #008D90;
	margin: 0 16px 18px;
	text-align: center;
	padding: 10px;
	color: #fff;
}

.digital-ir-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

.digital-ir-table th,
.digital-ir-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.digital-ir-table th {
    font-weight: 700;
    background: #ffffff;
}

.digital-ir-table th:first-child,
.digital-ir-table td:first-child {
    width: 20%;
}

.digital-ir-table th:last-child,
.digital-ir-table td:last-child {
    width: 80%;
}