:root {
	--banner-bg-color: #2bc5da;
	--menu-button-bg-color: #000;
	--heading-01: 5rem;
	--heading-01-line-height: 5.5rem;
	--heading-06-line-height: 0.813rem;
	--bg-grey-color: #e8e8e8;
	--bg-green-color: #63c783;
	--bg-red-color: #f14f51;
	--bg-orange-color: #f49e45;
    --bg-drk-orange-color: #ff9d02;
    --bg-lg-orange-color: #ffc001;
    --bg-yellow-color: #f9dc58;
    --bg-maroon-color: #d43c44;
    --bg-pink-color: #fc4c9f;
    --bg-black-color:#1c0606;
    --bg-rose-color:#fef3f3;
    --bg-rose-dark-color:#ebc4c2;
    --bg-dark-orange-color:#eb5f2a;
    --bg-lg-rose-color:#f4c2c1;
    --bg-lg-red-color: #ff5a30;
    --bg-lg-violet-color: #916cb9;
    --bg-tolg-violet-color: #957cb3;
}
.standby {
	-webkit-animation: none !important;
	-o-animation: none !important;
	animation: none !important;
	visibility: hidden;
}
body {
	font-size: 16px;
	color: #333;
	font-family: 'Poppins', sans-serif;
}
h1 {
	font-size: var(--heading-01);
	line-height: var(--heading-01-line-height);
}
h2 {
	font-size: 7.5rem;
	line-height: 8rem;
}
h6 {
	font-size: var(--heading-06);
}
.main_banner {
	height: 100vh; overflow: hidden;
	position: relative; background: #32bcd3; background: transparent; background-size: cover;
}
.main_banner.adobe_banner{
    background: #32bcd3 url(../img/adobe/image01.jpg) no-repeat center center; background-size: cover;
}
.main_banner.acer_banner {
    background: url(../img/acer/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.detox_banner {
    background: url(../img/Detox/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.item_banner {
    background: url(../img/Item/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.lnl_banner {
    background: url(../img/LnL/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.oc_banner {
    background: url(../img/Oc/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.srh_banner {
    background: url(../img/SRH/SRH-banner.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.villain_banner {
    background: url(../img/Villain/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.wrangler_banner {
    background: url(../img/Wrangler/image01.jpg) no-repeat center center;  background-size: cover;
}
.main_banner.yk_banner {
    background: url(../img/YK/image01.jpg) no-repeat center center;  background-size: cover;
}
img{
    max-width: 100%;
}
.details .header{
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
            -webkit-transition: all 0.6s ease-in 0.3s;
    -moz-transition: all 0.6s ease-in 0.3s;
    transition: all 0.6s ease-in 0.3s;

    transform: translateY(-100px);
}
.details.highlit .header{
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
            -webkit-transition: all 0.6s ease-in 0.3s;
    -moz-transition: all 0.6s ease-in 0.3s;
    transition: all 0.6s ease-in 0.3s;

    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transition: all 0.3s ease-in 0.3s;
}

.full-banner{
    height: 100vh; position: relative;
        background: transparent;overflow: hidden;
   position: relative;
}
.banr-top-img01{
    position: absolute; top: 0; right: 14%; width: 10%;
}
.banr-btm-img01{
    position: absolute; bottom: 0; left: 0; width: 12%;
}
.banr-top-img01 img, .banr-btm-img01 img{
    max-width: 100%;
}
*.section_, *.container_ {
    overflow: hidden;
}
.main_banner h1 {
	color: #fff;
	padding-right: 8rem;
}
.banner_title {
	height: calc(100vh - 86px);
}
.context {
	background: #fff;
	padding: 110px 0;
	position: relative;
	z-index: 5;
}
.context .container_fluid {
	max-width: 940px;
	margin: 0 auto;
}
.context h6 {
	font-weight: 300;
	color: #333;
}
.context .textnew {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	color: #333;
	font-size: 1.5rem;
}
.context p {
	font-size: 0.8rem;
	font-weight: 300;
}
.color_pallet {
	height: 100vh;
	background-color: var(--bg-grey-color);
	position: relative;
}
.color_pallet h2 {
	color: #5b5b5b;
	margin-left: 12rem;
}
.grow_full_horizontal {
	flex: 1 1 auto;
}
.grow_full_vertical {
	height: 100vh;
}
.grow_full_vertical_half {
	height: 50vh;
}
.grow_full > .slds-col {
	flex: 1 1 auto;
}
.col_red {
	background-color: var(--bg-red-color);
}
.col_green {
	background-color: var(--bg-green-color);
}
.col_grey {
	background-color: var(--bg-grey-color);
}
.col_blue {
	background-color: var(--banner-bg-color);
}
.col_orange {
	background-color: var(--bg-orange-color);
}
.col_dark_orange {
	background-color: var(--bg-dark-orange-color);
}
.col_yellow {
	background-color: var(--bg-yellow-color);
}
.col_maroon {
	background-color: var(--bg-maroon-color);
}
.col_pink {
	background-color: var(--bg-pink-color);
}
.col_balck {
	background-color: var(--bg-black-color);
}
.col_rose {
	background-color: var(--bg-rose-color);
}
.col_dark_rose {
	background-color: var(--bg-rose-dark-color);
}
.col_lg_rose {
	background-color: var(--bg-lg-rose-color);
}
.col_lg_red {
    background-color: var(--bg-lg-red-color);
}
.col_lg_orange {
    background-color: var(--bg-lg-orange-color);
}
.col_drk_orange {
    background-color: var(--bg-drk-orange-color);
}
.col_lg-violet{
    background-color: var(--bg-lg-violet-color);
}
.col_tolg-violet{
    background-color: var(--bg-tolg-violet-color);
}



.color_code {
	padding: 3rem;
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
}
.content_text{
    display: inline-block; width: 100%; padding: 2rem 0;
    color: #fff; text-align: center;
}
.content_text .container {
    max-width: 800px;
}
.related_projects {
	text-align: center;
	background: #fff;
	margin-top: 10%;
}
.related_projects h4 {
	font-size: 3rem;
	background: -webkit-linear-gradient(left, #010202 40%, #2baec3 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Anton', sans-serif;
    font-weight: 300;
    letter-spacing: 0.2rem;
	margin: 0;
	padding: 60px 24px;
	position: relative;
	display: inline-block;
}
.related_projects h4.gradient4 {
	background: -webkit-linear-gradient(left, #020202 40%, #7f6564 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.project_wrap {
	background: #ded9c1;
	height: 100vh;
	position: relative;
}

.project_wrap .container_fluid {
	max-width: 1000px;
	margin: auto;
	transition: .4s all ease;
}
.project_wrap:hover .container_fluid {
	max-width: 100%;
	margin: auto;
}
.project_img {
	height: 100vh;
}
.project_wrap .thumb_nail {
	display: block;
}
.project_wrap .thumb_nail h5 {
	font-size: 2.5rem;
	background: -webkit-linear-gradient(left, #090201 40%, #c3291c 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Anton', sans-serif;
	margin: 1rem 0;
}
.product_launch .container {
	position: relative;
}
.product_launch {
	padding: 100px 0;
	background: #fff;
	position: relative;
}
.product_launch h3 {
	font-size: 11rem;
	line-height: 12rem;
	color: #565656;
	margin: 0 0 212px;
	padding: 0 120px;
}
.product_launch img {
	max-width: 540px;
	position: absolute;
	right: 194px;
	top: 186px;
}
.section_04 {
	background: -webkit-linear-gradient(left, #d43c44 0%, #d43c44 50%, #fae354 50%, #fae354 100%);
	background: linear-gradient(to right, #d43c44 0%, #d43c44 50%, #fae354 50%, #fae354 100%);
	position: relative;
}
.gradient-4{
    	background: -webkit-linear-gradient(left, #231f1e 0%, #231f1e 50%, #ebc4c2 50%, #ebc4c2 100%);
	background: linear-gradient(to right, #231f1e 0%, #231f1e 50%, #ebc4c2 50%, #ebc4c2 100%);
}
.section_05 {
	background: -webkit-linear-gradient(left, #fae354 0%, #fae354 50%, #d43c44 50%, #d43c44 100%);
	background: linear-gradient(to right, #fae354 0%, #fae354 50%, #d43c44 50%, #d43c44 100%);
	position: relative;
}
.rgt-yellow-bg {
	height: 100vh;
	background: url(../img/SRH/SRH-image05.jpg) no-repeat center center;
    background-size: cover;
}
.lft-pink-bg{
    height: 100vh;
	background: url(../img/SRH/SRH-image04.jpg) no-repeat center center;
    background-size: cover;
}
.lft-lght-yellow-bg {
	height: 100vh;
	background: url(../img/SRH/SRH-image05.jpg) no-repeat center center;
    background-size: cover;
}
.rgt-lght-orange-bg{
    height: 100vh;
	background: url(../img/SRH/SRH-image08.jpg) no-repeat center center;
    background-size: cover;
}
.rgt-blue-bg{
	height: 100vh;
	background: url(../img/SRH/SRH-image05.jpg) no-repeat center center;
    background-size: cover;
}
.lft-orange-bg{
    height: 100vh;
}
.lft-legacy, .rgt-legacy{
    height: 100vh; display: flex !important; align-items: center;justify-content: center;
}
.legacy-item2{
    height: 100vh; display: flex !important; align-items: center;justify-content: center; text-align: center;
}
.legacy-item img{
    max-width:inherit;
}
.section_04 .slds-grid {
	height: 100vh;
}
.section_04 h3 {
	font-size: var(--heading-01);
	line-height: var(--heading-01-line-height);
	color: #fff;
	padding-left: 6rem;
	position: relative;
	z-index: 10;
}
.Digital_flyer_img {
	z-index: 0;
	position: relative;
	margin-left: -166px;
	margin-top: 64px;
	position: relative;
	z-index: 0;
}
.section_03 {
	background: var(--bg-green-color);
	position: relative;
}
.section_03 .col_1 {
	background: #14b7ce;
	padding: 16px 0 0;
	height: 100vh;
}
.section_03 .col_2 {
	padding: 10rem 0;
	position: relative;
	height: 100vh;
	background: url(../img/SRH/phone.jpg) no-repeat center center;
    background-size: cover;
}
.section_03 .col_2 h3 {
	font-size: var(--heading-01);
	line-height: var(--heading-01-line-height);
	color: #fff;
	padding-left: 6rem;
	position: absolute;
	z-index: 10;
	top: 76%;
}
.top_title {
	padding-left: 5rem;
}
.block {
	display: block !important;
}
.Adobe_Captivate {
	padding-left: 5rem;
	padding-right: 5rem;
}
.Adobe_Captivate h3 {
	margin: 8px 0 0;
	border-bottom: 1px solid #fff;
	font-size: 4rem;
	font-weight: 300;
	color: #fff;
	margin-bottom: 1.5rem;
}
.Adobe_Captivate .note {
	color: #fff;
}
.specification {
	color: #fff; overflow: hidden;
}
.specification .slds-grid {
	height: calc(100vh - 192px);
}
.specification .slds-size_1-of-3 {
	width: 33.33333%;
	padding: 0 2rem;
	height: 50%;
}
.specification h3 {
	font-size: 1.75rem;
	font-weight: 300;
	margin: 1rem 0 0;
}
.specification.color-specifi h3 {
	font-size: 1.9rem; margin: 0;
}
.specification p {
	font-size: 1.25rem;
	margin-bottom: 0;
}
.specification .innr {
	position: relative;
	top: 50%;
	transform: translate(0%, -50%);
}
.icon_features {
	width: 80px;
	height: 80px;
}
.big_img_wrapper {
	position: relative;
}
.img_container {
	position: absolute;
	width: 300px;
	height: 400px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-size: cover;
	transition: all 2.85s cubic-bezier(.95,1,.2,1);
}
.big_img_wrapper h5 {
	font-size: 1.1rem;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin-top: 230px;
	margin-left: 0px;
	opacity: 1;
	visibility: visible;
	transition: .5s all ease;
	font-size: 300;
}
.project_wrap:hover .hover-effect h5 {
	opacity: 0;
	visibility: hidden;
}
.project_wrap:hover .hover-effect .img_container {
	width: 100%;
	height: 100%; transition: all 2.65s cubic-bezier(.45,1,.2,1);
}
.project_wrap.rlt-project {
	background: #ffffff; transition: all 1.65s cubic-bezier(.45,1,.2,1);
}
.project_wrap.rlt-project:hover {
	background: #ded9c1; transition: all 1.65s cubic-bezier(.45,1,.2,1);
}

.pt-1{
  padding-top: 1rem;
}
.pt-2{
    padding-top: 2rem;
}
.pt-4{
    padding-top: 2rem;
}
.pb-1{
   padding-bottom: 4rem;
}
.pb-2{
    padding-bottom: 2rem;
}
.pb-4{
    padding-bottom: 4rem;
}
.pb-5{
    padding-bottom: 5rem;
}
.pb-20{
    padding-bottom: 20rem;
}
.pl-4{
    padding-left: 4rem;
}
.legacy{
    position: relative; z-index: 1;
}
.legacy figure{
    position: relative; z-index: 2;
}
.legacy .wht-strip{
    display: block; border: 0;
    position: absolute; z-index: 1; left: 0; right: 0; top: 50%; width: 100%;
    background: #FFF; height: 1.4rem;
}
.section_02{
    position: relative;
}
.section_02 .inst-img02{
    width:60%; display: flex; align-items: baseline;
    position: absolute; right: 0; bottom: 0;
}
.item-img-3-4 {
	height: 100vh;
	position: relative; background: #32bcd3; background: transparent; background-size: cover;
}
.item-img-3{
    background: url(../img/Item/image03.jpg) no-repeat center center;  background-size: cover;
}
.item-img-4{
    background: url(../img/Item/image04.jpg) no-repeat center center;  background-size: cover;
}
.oc-img-3-4 {
	height: 100vh;
	position: relative; background: #32bcd3; background: transparent; background-size: cover;
}
.oc-img-3{
    background: url(../img/Oc/image03.jpg) no-repeat center center;  background-size: cover;
}
.oc-img-4{
    background: url(../img/Oc/image04.jpg) no-repeat center center;  background-size: cover;
}
.adobe-img-2{
    background: url(../img/adobe/image02.jpg) no-repeat center center;  background-size: cover;
}
.adobe-img-3{
    background: url(../img/adobe/image03.jpg) no-repeat center center;  background-size: cover;
}
.adobe-img-4{
    background: url(../img/adobe/image04.jpg) no-repeat center center;  background-size: cover;
}
.adobe-img-5{
    background: url(../img/adobe/image05.jpg) no-repeat center center;  background-size: cover;
}



.thumb-img2{
    padding: 10rem;
}
.view.details{
   overflow: hidden;
}
.section_02 .small_query{
    height: 100%; width: 100%; display: flex; align-items: center;
    padding: 0 10%; color: #FFF;
}
.section_02 .small_query h3, .section_02 .small_query p{
    color: #FFF;
}
@media only screen and (min-width: 1368px) {
	.specification .slds-grid {
		height: calc(100vh - 171px);
	}
}
@media (hover: none) and (pointer: coarse) {
	.view {
		overflow: hidden;
	}
	.header {
		padding-top: 10px;
	}
	.context {
		padding: 30px 0;

	}
	.context h6 {
		margin: 0;

	}

	.context .container_fluid {
		padding: 0 16px;

	}
	.section_03 .col_1 {
		width: 100%;
		padding-top: 30px;
	}
	.top_title {
		padding-left: 16px;
	}
	.Adobe_Captivate {
		padding-left: 16px;
		padding-right: 16px;
	}
	.Adobe_Captivate h3 {
		margin: 16px 0 0;
		border-bottom: 1px solid #fff;
		font-size: 3rem;
		font-weight: 300;
		color: #fff;
		margin-bottom: 1.5rem;
	}
	.specification .slds-size_1-of-3 {
		width: 100%;
		padding: 3rem 2rem;
		padding: 32px 16px;
		min-height: inherit;
	}
	.section_03 .col_2 {
		padding: 30px 0 0;
		position: relative;
		width: 100%;
	}
	.section_03 .col_2 img {
		width: 100%;
	}
	.slds-size_1-of-2 {
		width: 100%;
	}
	.section_04 {
		padding: 0;
	}
	.section_04 .slds-grid .slds-size_1-of-2:first-child {
		background: #eb9f49;
	}
	.section_04 .slds-grid .slds-size_1-of-2:last-child {
		background: #60adb3;
	}
	.section_04 img {
		max-width: 100%;
	}

    .main_banner.adobe_banner{
        background: #32bcd3 url(../img/adobe/Adobe_hero.jpg) no-repeat center center; background-size: cover;
    }
    .main_banner.acer_banner {
        background: url(../img/Acer/Acer_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.detox_banner {
        background: url(../img/Detox/Detox_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.item_banner {
        background: url(../img/Item/Item_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.lnl_banner {
        background: url(../img/LnL/LnL_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.oc_banner {
        background: url(../img/Oc/OC_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.srh_banner {
        background: url(../img/SRH/SRH_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.villain_banner {
        background: url(../img/Villain/Villain_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.wrangler_banner {
        background: url(../img/Wrangler/Wrangler_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.yk_banner {
        background: url(../img/YK/YK_hero.jpg) no-repeat center center;  background-size: cover;
    }

}

@media screen and (max-width: 991px) {
    .main_banner.adobe_banner{
        background: #32bcd3 url(../img/mobhero/Adobe_Hero.jpg) no-repeat center center; background-size: cover;
    }
    .main_banner.acer_banner {
        background: url(../img/mobhero/Acer_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.detox_banner {
        background: url(../img/mobhero/Detox_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.item_banner {
        background: url(../img/mobhero/Item_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.lnl_banner {
        background: url(../img/mobhero/LnL_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.oc_banner {
        background: url(../img/mobhero/OC_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.srh_banner {
        background: url(../img/mobhero/SRH_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.villain_banner {
        background: url(../img/mobhero/Villain_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.wrangler_banner {
        background: url(../img/mobhero/Wrangler_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .main_banner.yk_banner {
        background: url(../img/mobhero/YK_hero.jpg) no-repeat center center;  background-size: cover;
    }
    .oc-img-3-4{
        height: 100%;
    }
	.context .textnew {
		font-family: 'Poppins', sans-serif;
		font-weight: 300;
		color: #333;
		font-size: 1.2rem;
	}
	.context p {
		font-size: 0.8rem;
		font-weight: 300;
	}

	.context h6 {
		font-weight: 300;
		color: #333;
	}
}