@charset "UTF-8";
:before,:after,html *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-moz-osx-font-smoothing: grayscale; /*(For Firefox)*/-webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/}
.clearfix:after,
.clear{clear: both;display: block;height: 0;width: 100%;float: none !important;}
.clearfix:after{content: '';}
input::-moz-focus-inner /*Remove button padding in FF*/{ border: 0;padding: 0;}
a{text-decoration: none;outline: 0 !important;}
a:hover{color: inherit;text-decoration: none;}
img{max-width: 100%;vertical-align: top;}
*:focus ,
textarea,
input,
textarea:focus, input:focus{outline: none;border-radius: 0}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}
input[type=number] {-moz-appearance:textfield !important;}
input::placeholder{ 
	color: #cacdc8;
	opacity:1;
}
textarea::placeholder{ 
	color: #cacdc8;
	opacity: 1;
}
::-moz-placeholder {
	opacity: 1;
}
.cvr-bg-bf:before,
.cvr-bg-af:after,
.cvr-bg{
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.cvr-bg-bf:before,
.cvr-bg-af:after{
	content: '';
	display: inline-block;
        vertical-align: middle;
}
body{
        background: #fff;
        color: #1A1A1F;
	font-size: 16px;
	font-family: 'Work Sans';
	font-weight:  400;
	position: static;
	overflow-y:auto
}
.wrapper{
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
}

.rowflex{
	display: flex;
	flex-wrap: wrap;
}
.rowflex > *{
	flex: 1;
}
.format-text{
	line-height: 175%;
	font-size: 18px;
}
.format-text > *{
	margin-top: 30px;
}
.format-text > *:first-child{
	margin-top: 0;
}
.format-text b,
.format-text strong{
	font-weight: 700;
}
.format-text em,
.format-text i:not(.fa){
	font-style: italic;
}
.format-text h1,
.format-text h2,
.format-text h3,
.format-text h4,
.format-text h5,
.format-text h6{
	color: #1A1A1F;
	font-weight: 700;
	line-height: 140%;
}
.format-text h1{
	font-size: 48px;
}
.format-text h2{
	font-size: 36px;
}
.format-text h3{
	font-size: 30px;
}
.format-text h4{
	font-size: 24px;
}
.format-text h5{
	font-size: 20px;
}
.format-text h6{
	font-size: 16px;
}
.format-text h1 + *,
.format-text h2 + *,
.format-text h3 + *,
.format-text h4 + *,
.format-text h5 + *,
.format-text h6 + *{
	margin-top: 10px;
}
.format-text a:not(.button){
	color: #1e1e1e;
}
.format-text a:not(.button):hover{
	text-decoration: underline;
}
.format-text ul{
	list-style: none;
}
.format-text ul li{
	display: block;
	position: relative;
	padding: 0 0 10px 40px;
}
.format-text ul li:before{
	display: block;
	position: absolute;
	left: 0;
	top: 1px;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: url(../img/icon/check.svg);
	content: '';
}
.format-text ol li{
	padding-bottom: 10px;
}
.format-text ol{
	list-style: decimal;
}
.format-text ol{
	padding-left: 20px;
}
.format-text sup{
	color: #d90000;
	position: relative;
	top: 0;
	line-height: 100%;
}
.format-text blockquote{
	font-size: 18px;
	font-style: italic;
	line-height: 160%;
	color: #817F85;
}

.button{
	/* Remove First */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border-radius: 0;
	display: inline-block;
	color: #1A1A1F;
	background: #FBC211;
	font-family: 'Work Sans';
	font-weight: 600;
	font-size: 14px;
	height: 48px;
	line-height: 48px;
	padding: 0 40px;
	text-align: center;
	cursor: pointer;
	border: none;
	outline: none !important;
	transition:all 0.2s ease-in;
}
.button.disabled:hover,
.button.disabled{
	cursor: default;
	background: #ccc;
	color: #fff;
}
.button:active,
.button:focus{
	border-radius: 0;
}
.button:hover{
	color: #1A1A1F;
	background: #fccc3a;
}
.video-holder{
        position: relative;
	padding-bottom:50%;
	padding-top: 0;
	height: 0;
        z-index: 1;
}
.video-holder > *{
        position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/** HEADER **/
#top{
        background: #fff;
        padding: 19px 0 21px;
        position: fixed;
        z-index: 9999;
        width: 100%;
        left: 0;
        top: 0;
}
#top .wrapper{
        max-width: 1280px;
}
#top .logo{
        float: left;
}
#top .mainmenu{
        float: right;
        position: relative;
        top: 13px;
}
.mainmenu li{
        display: inline-block;
        vertical-align: middle;
        margin-left: 30px;
}
.mainmenu li:first-child{
        margin: 0;
}
.mainmenu li a{
        color: #1A1A1F;
        font-size: 14px;
        font-weight: 600;
        transition:color 0.2s ease-in;
}
.mainmenu li a:hover{
        color: #000;
}
#body{
        padding-top: 112px;
}
.inner-home{
        padding: 38px 0 56px;
}
#service .rowflex,
#intro .rowflex{
        justify-content: space-between;
}
#intro .video-holder{
        left: -110px;
        flex: 50%;
        max-width: calc(50% + 50px);
        margin-left: -50px;
        padding-bottom: 54.5%;
}
#intro .caption{
        flex: 49.5%;
        max-width: 49.5%;
}
#contact h2,
#about h2,
#approach h2,
#copy h2,
#client h2,
#endorse h2,
#service h2,
#intro h2{
        font-size: 70px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 110%;
        margin: 0 0 30px;
        max-width: 540px;
}
#intro .format-text{
        max-width: 510px;
}
#service{
        margin: 90px 0 0;
        background: #F8F8F8;
        padding: 122px 0 118px;
}
#service figure{
        order: 2;
        flex: 60%;
        max-width: calc(60% + 42px);
        margin-right: -50px;
        position: relative;
        right: -110px;
}
#service .caption{
        flex: 40%;
        max-width: 40%;
        order: 1;
        position: relative;
}
#about h2,
#approach h2,
#copy h2,
#client h2,
#endorse h2,
#service h2{
        font-size: 48px;
        letter-spacing: 0px;
        line-height: 115%;
        margin: 0 0 20px;
}
#service .format-text p{
        font-size: 18px;
}
#endorse{
        margin: 120px 0 0;
        overflow: hidden;
}
#endorse .slider{
        margin-right: -50vw;
        position: relative;
}
#endorse .slick-track{
        display: flex;
}
#endorse .item{
        float: none;
        height: auto;
        width: 322px;
        flex: 322px;
        max-width: 322px;
        margin-right: 16px;
        box-shadow: inset 0px 0 0px 8px #7CCDCB;
        padding: 32px 32px 56px;
}
#endorse .item:last-child{
        margin-right: 0;
}
#endorse .txt:before{
        display: block;
        width: 102px;
        height: 102px;
        background-image: url(../img/icon/quote.svg);
        margin: 0 0 16px;
}
#endorse .txt{
        line-height: 170%;
        font-size: 14px;
}
#endorse .txt > *:not(:first-child){
        margin-top: 30px;
}
#endorse h2{
        margin-bottom: 55px;
}
#endorse .slidenav{
        height: 1px;
        width: 100%;
        max-width: 1400px;
        position: absolute;
        left: -130px;
        top: 40%;
        -ms-transform: translateY(-40%);
        -webkit-transform: translateY(-40%);
        transform: translateY(-40%);
}
#endorse .slidenav a{
        display: block;
        width: 68px;
        height: 68px;
        opacity: 1;
        transition:opacity 0.2s ease-in;
}
#endorse .slidenav a:hover{
        opacity: .7;
}
#endorse .slidenav a.prev{
        background-image: url(../img/icon/arrow-left.svg);
        float: left;
}
#endorse .slidenav a.next{
        float: right;
        background-image: url(../img/icon/arrow-right.svg);
}
#client{
        margin: 145px 0 0;
        padding: 65px 0 115px;
        background: #F8F8F8;
}
#client h2{
        margin: 0 0 90px;
}
#client .item{
        flex: 25%;
        max-width: 25%;
        text-align: center;
        margin: 0 0 35px;
}
#copy{
        margin: 120px 0 0;
}
#copy figure{
        flex: 60%;
        max-width:  calc(60% + 37px);
        position: relative;
        margin-left: -37px;
        left: -123px;
}
#copy .caption{
        flex: 40%;
        max-width: 40%;
}
#copy h2{
        margin: 0 0 45px;
}
#copy .format-text{
        opacity: .8;
        font-size: 18px;
        line-height: 180%;
        max-width: 400px;
}
#approach{
        margin: 120px 0 0;
        position: relative;
        padding: 120px 0 115px;
}
#approach h2{
        color: #fff;
        margin: 0 0 90px;
}
#contact .bg,
#approach .bg{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
}
#contact .bg:after,
#approach .bg:after{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: '';
        background: #000;
        opacity: .3;
}
#contact .bg:after{
        opacity: 0.15;
}
#contact .wrapper,
#approach .wrapper{
        position: relative;
        z-index: 3;
}
#approach .rowflex{
        max-width: 860px;
        float: right;
        margin: 0 -15px;
}
#approach .item{
        background: #fff;
        flex:calc(33.33333333333% - 30px);
        max-width:calc(33.33333333333% - 30px);
        margin: 0 15px 30px;
        border-top: 2px solid #7CCDCB;
        padding: 24px 16px 24px 24px;
        min-height: 360px;
}
#approach .item b{
        display: block;
        line-height: 100%;
        color: #7CCDCB;
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 25px;
}
#approach .item h3{
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        margin: 0 0 40px;
}
#approach .item .format-text{
        font-size: 14px;
        line-height: 170%;
}
#about{
        margin: 120px 0 0;
}
#about figure{
        flex: 50%;
        max-width: calc(50% + 50px);
        position: relative;
        left: -110px;
        margin-left: -50px;
}
#about .caption{
        flex:50%;
        max-width: 50%;
}
#about h2{
        margin: 0 0 45px;
}
#about .format-text{
        max-width: 500px;
        font-size: 18px;
        line-height: 175%;
}
#contact{
        position: relative;
        margin: 120px 0 0;
        padding: 120px 0;
        min-height: 1140px;
        color: #fff;
}
#contact .txt{
        line-height: 150%;
        font-size: 24px;
        font-weight: 500;
}
#contact .txt > *:not(:first-child){
        margin-top: 30px;
}
#contact .txt b,
#contact .txt strong{
        font-weight: 600;
}
#contact .txt a{
        color: #fff;
        text-decoration: underline;
}
#bottom{
        padding: 0 0 65px;
        font-size: 12px;
}
#bottom a{
        opacity: 0.7;
        color: #1A1A1F;
}
#bottom a:hover{
        text-decoration: underline;
}
#bottom span{
        display: block;
        height: 1px;
        width: 100%;
        background: #1A1A1F;
        margin: 0 0 27px;
        opacity: .3;
}
/* MEDIA QUERY FOR WEBKIT BASED BROWSER **/
@media screen and (-webkit-min-device-pixel-ratio:0) {

}

/* MEDIA QUERY FOR GECKO BASED BROWSER **/
@-moz-document url-prefix(){
        
}
#contact h2 br,
.mainmenu figure,
#intro .video-holder .mobile,
.mobile-trigger{
	display: none;
}
@media (max-width: 1800px) {

}
@media (max-width: 1439px) {
	.wrapper{
		max-width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}
	#intro .video-holder{
		left: -30px;
		margin-left: 0;
	}
	#intro .caption{
		max-width: 42%;
		flex: 42%;
	}
	#service figure{
		right: -30px;
		margin-right: 0;
		max-width: 43%;
		flex: 43%;
	}
	#service .caption{
		flex: 55%;
		max-width: 55%;
		padding-left: 200px;
	}
	#endorse .slidenav{
		left: -30px;
		max-width: calc(100vw - 70px);
	}
	#about .rowflex,
	#copy .rowflex{
		justify-content: space-between;
	}
	#about figure,
	#copy figure{
		left: -30px;
		margin: 0;
		max-width: 50%;
		flex: 50%;
	}
	#about .caption,
	#copy .caption{
		flex: 45%;
		max-width: 45%;
	}
}
@media (max-width: 1129px) {
	
	#top .logo img{
		max-width: 200px;
	}
	#top .mainmenu{
		top: 0;
	}
	#body{
		padding-top: 88px;
	}
	#service .caption{
		padding: 0;
	}
}
@media (max-width: 991px) {
	.wrapper{
		padding-left: 20px;
		padding-right: 20px;
	}
	#endorse .slidenav,
	#intro .video-holder .desktop{
		display: none;
	}
	.mobile-trigger{
		display: block;
		float: right;
		width: 48px;
		height: 48px;
		position: relative;
		top: 10px;
	}
	.mobile-trigger:before,
	.mobile-trigger:after{
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: url(../img/icon/close.svg);
		display: none;
	}
	.mobile-trigger:before{
		background-image: url(../img/icon/bar.svg);
		width: 36px;
		height: 36px;
		left: 6px;
		top: 6px;
		display: block;
	}
	.open-menu .mobile-trigger:before{
		display: none;
	}
	#top .mainmenu{
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		align-items: center;
	}
	.open-menu .mobile-trigger:after,
	.open-menu #top .mainmenu{
		display: block;
	}
	#top .mainmenu figure{
		width: 45%;
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
	}
	#top .mainmenu figure img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#top .mainmenu .holder{
		width: 55%;
		padding: 40px;
		top: 50%;
		left: 45%;
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		position: absolute;
	}
	.mainmenu li {
		display: block;
		margin: 30px 0 0;
	}
	.mainmenu li a{
		font-size: 5vw;
		font-weight: 600;
	}
	.mainmenu li:last-child{
		display: none;
	}
	.open-menu #top .logo{
		position: relative;
		z-index: 9;
		left: calc(45% + 40px);
		top: 15px;
	}
	.open-menu #top .logo img{
		max-width: 137px;
	}
	#top .logo img{
		max-width: 307px;
	}
	#body{
		padding-top: 116px;
	}
	#intro .wrapper{
		position: relative;
		display: block;
		padding: 32px;
	}
	#intro .wrapper:after{
		clear: both;
		display: block;
		width: 100%;
		content: '';
	}
	#intro .video-holder {
		flex: 100%;
		max-width: 100%;
		left: 0;
		padding: 0;
		height: auto;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	#intro .video-holder .mobile{
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.inner-home{
		padding-top: 0;
	}
	#intro .caption{
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 380px;
		float: right;
		background: rgba(255,255,255,.8);
		border-radius: 16px;
		padding: 32px;
	}
	#contact h2, #about h2, #approach h2, #copy h2, #client h2, #endorse h2, #service h2, #intro h2{
		font-size: 36px;
		letter-spacing: -0.5px;
		line-height: 125%;
	}
	#about .format-text,
	#service .format-text p,
	.format-text{
		font-size: 14px;
	}
	#top{
		padding: 20px 0 25px;
	}
	#service figure{
		right: -20px;
		flex: 47%;
		max-width: 47%;
	}
    
    #service figure iframe{
	right: -20px;
  top:0;
  left: 0;
  max-width:98%;
flex: 98%;
	}
    
    
 .iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}

	#service .caption{
		flex: 47%;
		max-width: 47%;
	}
	#service{
		margin: 0;
		padding: 55px 0;
	}
	#endorse{
		margin: 55px 0 0;
	}
	#client{
		margin: 55px 0 0;
		padding: 55px 0 30px;
	}
	#approach h2,
	#endorse h2,
	#client h2{
		margin: 0 0 30px;
	}
	#about figure, #copy figure{
		left: -20px;
	}
	#about .caption, #copy .caption{
		flex: 48%;
		max-width: 48%;
	}
	#copy .format-text{
		opacity: 1;
		font-size: 14px;
	}
	#approach{
		margin: 55px 0 0;
		padding: 55px 0 120px;
	}
	#approach .rowflex{
		flex-wrap: nowrap;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		display: flex;
                padding: 0 0 5px;
		margin: 0 -20px 0 0;
		max-width: calc(100% + 20px);
	}
        #approach .rowflex::-webkit-scrollbar {
		width: 0px;
		background: transparent; /* make scrollbar transparent */
	}
	#approach .rowflex .item{
		flex: 0 0 auto;
		margin: 0 16px 0 0;
		max-width: 255px;
	}
	#about h2{
		margin: 0 0 15px;
	}
	#about h2 br{
		display: none;
	}
	#contact .txt{
		font-size: 18px;
	}
	#contact{
		min-height: 600px;
		padding: 55px 0;
		margin: 55px 0 0;
	}
	#copy,
	#about{
		margin: 55px 0 0;
	}
        #endorse .slider{
                margin-right: -20px;
        }
        #endorse .slick-carousel{
		flex-wrap: nowrap;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		display: flex;
                padding: 0 0 5px;
	}
        #endorse .slick-carousel::-webkit-scrollbar {
		width: 0px;
		background: transparent; /* make scrollbar transparent */
	}
	#endorse .slick-carousel .item{
		flex: 0 0 auto;
		margin: 0 16px 0 0;
	}
}
@media only screen and (orientation: landscape) and (max-width: 991px)  {
        #top .mainmenu{
                top: 0;
                -ms-transform: translateY(0%);
                -webkit-transform: translateY(0%);
                transform: translateY(0%);
        }
        #top .mainmenu .holder{
                height: calc(100vh - 50px);
                overflow: scroll;
                margin: 50px 0 0;
        }
}
@media only screen and (min-width: 769px) and (max-width: 991px)  {

}
@media (max-width: 480px) {
	.wrapper{
		padding-left: 13px;
		padding-right: 13px;
	}
	#top .logo img{
		max-width: 170px;
	}
	#top{
		padding: 40px 0 13px;
	}
	.mobile-trigger{
		top: 0;
	}
	#body{
		padding-top: 101px;
	}
	#intro .video-holder{
		position: relative;
		left: 0;
		max-width: 100%;
		width: 100%;
		height: 310px;
	}
	#intro .wrapper{
		padding: 0;
	}
	#intro .caption{
		padding: 24px 13px;
		max-width: calc(100% - 26px);
		float: none;
		background: #fff;
		margin: -87px auto 0;
	}
	#top .mainmenu figure{
		display: none;
	}
	#top .mainmenu .holder{
		left: auto;
		padding: 0;
		width: 100%;
		padding: 20px;
		max-width: 100%;
	}
	.mainmenu li a{
		font-size: 44px;
	}
	.open-menu #top .logo{
		display: none;
	}
    

	#service{
		padding: 0 0 35px;
	}
	#about .wrapper,
	#copy .wrapper,
	#service .wrapper{
		padding: 0;
	}
	#about figure,
	#copy figure,
	#service figure{
		order: 1;
		flex: 100%;
		max-width: 100%;
		right: 0;
		left: 0;
	}
	#about .caption,
	#copy .caption,
	#service .caption{
		flex: 100%;
		max-width: 100%;
		padding: 24px 13px 0;
		order: 2;
	}
	#client .item{
		flex: 50%;
		max-width: 50%;
	}
	#client{
		padding: 25px 0 0;
	}
	#copy{
		margin: 30px 0 0;
	}
	#copy h2{
		margin: 0 0 15px;
	}
	#approach .rowflex{
		margin: 0 -13px 0 0;
		max-width: calc(100% + 13px);
	}
	#about{
		margin: 50px 0 0;
	}
	#contact{
		min-height: 1px;
		padding: 32px 0 0;
	}
	#contact .bg{
		height: 300px;
	}
	#contact .txt{
		background: #fff;
		max-width: calc(100% - 26px);
		margin: 75px auto 0;
		border-radius: 16px;
		text-align: center;
		color: #1A1A1F;
		padding: 27px 13px;
	}
	#contact .txt b,
	#contact .txt strong{
		font-weight: 700;
	}
	#contact .txt a{
		color: #1A1A1F;
	}
	#contact h2 br{
		display: block;
	}
	.inner-home{
		padding: 0 ;
	}
	#approach{
		padding: 55px 0;
	}
        #endorse .slider{
                margin-right: -13px;
        }
}


#responsive{
	display:block;
	width:10px;
	height: 10px;
	position: fixed;
	bottom:10px;
	left: 10px;
	z-index: 9999;
}
/** RESPONSIVE VIEWER **/
@media (max-width: 1439px) {  #responsive{background: blueViolet !important;}}
@media (max-width: 1129px) {  #responsive{background: yellow !important;}}
@media (max-width: 991px) {  #responsive{background: red !important;}}
@media (max-width: 480px) {  #responsive{background: cyan !important;}}