@media (max-width: 767.9px) {

body{
	overflow-x: hidden;
}

nav{
	width: calc(100vw - 28px);
	padding: 3% 14px 0 14px;
}

#navBackground{
    height: calc(120px);
    -webkit-backdrop-filter: blur(5px);
}

#navLogo{
	margin-top: 12px;
	height: 40px;
	left: 34px;
}

#navContact{
    top: 20px;
    right: 32px;
/*    right: 14px;*/
}

.navContact{
	font-size: 12px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.menuWrapper, .subWrapper{
	width: calc(100% - 40px);
	padding: 20px;
}

.menu{
	width: calc(100% - 40px);
	min-height: calc(100vh - 40px);
}

.menuTitle{
	width: 90%;
}

.menuTitle h3{
    font-size: 40px;
}

.menuClose{
	right: 0px;
}

.menuButtons {
    height: calc(3vh + 54px);
}

.menuButtons div {
    /*height: calc(2vh + 34px);
    padding-top: calc(1vh + 20px);*/
}

.message textarea{
	height: 45px;
}

.menuFoot{
/*	position: absolute;*/
    /*bottom: 0;
    left: 0;*/
    padding: 35px 0 15px;
    width: 100%;
/*    width: calc(100% - 68px);*/
/*    background-color: #EEEEEE;*/
    color: #999;
    z-index: 1;
}

.subWrapper{
	
}

.subClose {
    top: 40px;
    right: 0px;
}

.campagne{
	width: 50%;
}

.campagneTitle{
	margin-bottom: 10px;
}

.campagneLogo{
	width: 40%;
	padding: 0 0 0 10%;
	height: 90px;
	text-align: right;
}

.campagneLogo img{
	height: 100%;
	width: 100%;
}

.subTicket, .packTicket{
	left: 0;
	width: calc(100% - 80px);
	padding: 20px 40px;
}

.ticketWrapper{
    width: 100%;
    padding: 0;
}

.subWrapper .menu{
	padding-bottom: 110px;
}

.addPrice{
	display: block;
}

.subSolutions, .packSolutions{
	padding: 20px;
}

.subSelect{
	width: calc(100% - 40px);
	padding: 20px 20px 30px 20px;
}

.selectTitle {
    font-size: calc(17px + 0.15vw + 0.3vh);
}

.selectMonth{
	font-size: calc(10px + 0.1vw + 0.2vh);
}

.subBtn, .packBtn{
	padding: 25px 20px 25px;
	font-size: calc(17px + 0.15vw + 0.3vh);
}

#header{
	border-radius: 0px;
}

#hans3D{
    width: calc(5vw + 63vh);
    top: 8%;
}

#gradient{
	background: linear-gradient(0deg, rgba(14, 13, 20, 1) 0%, rgba(14, 13, 20, 1) 50%, rgba(14, 13, 20, 0) 90%);
}

#smooth-wrapper{
	overflow: hidden!important;
}

#headerTitle{
	text-align: left;
	left: 34px;
	bottom: calc(320px + 1.5vw);
	width: 90%;
}

.brandbuilders{
	display: inline-block!important;
}

#headerTitle h4{
	margin-bottom: 10px;
}

h1{
	font-size: calc(2.8rem + 2vw);
}

h1 div:nth-child(2) {
    margin-top: -8px;
}

h1 div:last-child {
    margin-top: -8px;
}

h3{
    font-size: calc(32px + 1vw);
}

.benefit h3{
    font-size: calc(22px + 1vw);
}

h4{
    font-size: 11.5px;
    padding: 0px 20px 1px 44px;
    margin-bottom: 15px;
    line-height: 280%;
}

h4:before{
    margin-top: 6px;
    left: 5px;
    height: 14px;
    width: 30px;
    background-size: 14px;
}

.hlight {
    font-size: calc(2.1rem + 2vw);
    line-height: 110%;
}

.hlight .serif{
	letter-spacing: -2.5px;
}

#sticker{
	left: 57%;
	width: 120px;
	margin-top: calc(-85px - 3%);
}

.websitelatenmaken #sticker{
	margin-top: calc(-150px - 3%);
}

.websitelatenmaken .headerButton{
	margin: 20px 0 7px 0;
}

.websitelatenmaken #headerTitle{
	width: calc(100% - 68px);
}

.websitelatenmaken .hlight{
	line-height: 100%;
}

.websitelatenmaken #headerTitle h4 {
    margin-bottom: 15px;
}

.websitelatenmaken .serviceTitle{
	font-size: calc(40px + 1.5vw);
}

#headerTitle h1>div{
	padding-bottom: 7px;
}

#headerTitle h1>div:nth-child(2){
	margin-left: 0px;
	margin-right: 0px;
}

.headerButton{
	width: calc(100vw - 68px);
	margin-left: 0;
    transform: translateX(0);
    text-align: left;
}

#headerBrands{
    bottom: calc(250px + 1vw);
	height: 50px;
    width: calc(100% - 26px);
    left: 26px;
}

#headerBrands img{
	
}

.subscriptionText{
	display: none;
	/*position: relative;
	width: calc(100% - 30px);
    left: 20px;
    top: 10px;*/
}

.subscriptionText ul{
    padding-inline-start: 0px;
}

.subscriptionText li{
	padding-left: 0px;
/*    padding-left: 10px;*/
    line-height: 200%;
    list-style-type: auto;
}

.subscriptionText li:before{
	display: none;
/*	margin-left: -25px;*/
}

#subAssistent{
	margin: 0;
}

#subPro{
	margin: 0;
}

.subHeader{
	display: none;
}

/*.subscriptions .pretitle{
    line-height: 24px;
}

.spots {
    margin-top: 0px; 
}*/

.starter{
	margin-left: 0!important;
}

.selfTitle{
	margin-top: 0;
    font-size: calc(36px + 2.5vw);
}

.selfPrice {
    font-size: calc(24px + 1.25vw);
    line-height: 130%;
}

.selfUSP{
	margin-top: 30px;
}

.subButtons{
	width: calc(100% - 80px);
    flex-direction: column;
    row-gap: 10px;
    bottom: calc(4% + 28px);
}

.subButtons .primary, .subButtons .secondary, .subButtons .tertiary{
    width: 100%;
}



.andWhatif{
	width: 80%;
	margin: 150px 10% 100px;
}

.andWhatif p {
    width: 100% !important;
    margin: 50px 0% 60px !important;
}


.service{
	padding: 40px 26px 50px 26px;
	border-radius: 15px;
	background-position: 20%;
	margin-bottom: 20px;
	background-position: bottom;
}

.serviceLayer{
	display: none;
}

.servicesTitle{
    margin-bottom: 70px;
}

.serviceTitle{
/*    font-size: calc(36px + 2vw);*/
	font-size: calc(40px + 2.5vw);
    font-weight: 400;
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.serviceElements{
    width: 100%;
    height: 580px;
}

.marketing, .social, .other{
    margin-top: 70px;
}

.website{
	background-image: url(../images/servicewebsite-m.jpg);
}

.marketing{
	background-image: url(../images/servicemarketing-m.jpg);
}

.other{
    margin-bottom: 100px;
    background-image: url(../images/serviceother-m.jpg);
}

.website .serviceElements{
    height: 625px;
}

.marketing .serviceElements{
    height: 605px;
}

.other .serviceElements{
    height: 555px;
}

.website:before, .marketing:before, .other:before{
	margin-top: -40px;
	margin-left: -26px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.25) 380px, rgba(0, 0, 0, 0) 380px);
    /*backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);*/
}

.website:before{
	height: 380px;
/*	background: linear-gradient(150deg, rgba(60, 26, 48, 0.75) 0px, rgba(60, 26, 48, 0.35) 250px, rgba(60, 26, 48, 0) 400px);*/
}

.marketing:before{
	height: 380px;
/*	background: linear-gradient(150deg, rgba(133, 83, 57, 0.75) 100px, rgba(133, 83, 57, 0.35) 250px, rgba(133, 83, 57, 0) 500px);*/
/*	background: linear-gradient(180deg, rgba(133, 83, 57, 0.1) 0px, rgba(133, 83, 57, 0.6) 365px, rgba(133, 83, 57, 0) 365px);*/
}

.other:before{
	height: 330px;
/*	background: linear-gradient(180deg, rgba(36, 28, 57, 0.1) 0px, rgba(36, 28, 57, 0.6) 325px, rgba(36, 28, 57, 0) 325px);*/
}

.tag{
    font-size: 12px;
}

.workTitle, .brandsTitle {
    padding-left: 20px;
    padding-right: 0;
}

.workTitle{
	width:95%;
}

.subscription p{
	width: 80%;
	margin-left: 10%;
}

#cases {
    flex-direction: column;
    padding: 0;
    width: 100%;
    margin-left: 0;
}

#faq {
    padding: 150px 34px 155px 34px;
    width: calc(100vw - 68px);
}

details{
	width: 100%;
	margin-left: 0;
}

summary{
	padding: 25px 25px;
}

details > summary:first-of-type {
    list-style: none;
}

details > summary { 
	list-style: none; 
} 

details > summary::-webkit-details-marker { 
	display: none; 
}

#faq h5{
	width: 82%;
}

.toggle {
    right: 25px;
}

.toggle:after {
    
}

.answer {
    padding-right: 25px;
}

details div {
    margin-left: 25px;
}



/*******   Intro   *******/

#intro{
	flex-direction: column;
	margin-top: -1px;
	margin-bottom: 50px;
	width: 100%;
	height: auto;
}

.gallery{
    width: 100%;
    height: auto;
    border-radius: 0;
}

.gllr{
	position: relative;
    flex-direction: row;
    border-radius: 15px 15px 0 0;
    height: 400px;
}

.gllrDT{
	display: none;
}

.introduction {
    width: calc(100% - 68px);
    padding-top: 20%;
    padding-bottom: 50px;
    margin-left: 34px;
}

.introduction p {
	width: 90%;
	text-indent: 50px;
}

.benefit p {
    margin-top: 10px;
    text-indent: 50px;
    line-height: 190%;
}


/*******   BENEFITS   *******/

#benefits{
	flex-direction: column;
    width: 100%;
    margin-left: 0%;
    row-gap: 40px;
    padding-bottom: 0;
}

.benefit{
	width: 80%;
	padding: 10%;
}


/*******   PACKS AND PRICES   *******/

#packsnprices {
    width: calc(100% - 40px);
    padding-left: 20px;
    padding-right: 20px;
}

.packages{
	width: 100vw;
	margin-left: -20px;
	margin-right: 40px;
	padding: 30px 20px;
	justify-content: flex-start;
}

#package{
	min-width: 240px;
	padding-bottom: calc(110px + 5%);
}

#package:last-child{
    margin-right: 50px;
}

#package .selfTitle {
    font-size: calc(30px + 0.25vw);
    letter-spacing: -1px;
}

#packsnprices .subscriptionTitle {
    width: calc(100% - 40px);
    margin-bottom: 50px;
    margin-left: 20px;  
}


/*******   WHOIS   *******/

#whois{
	padding-top: 120px;
	padding-bottom: 150px;
}

#whoisWrapper{
    flex-direction: column;
    margin-left: 34px;
    width: calc(100vw - 68px);
}

#whois h1{
	width: 90%;
	margin-left: 5%;
}

.whoisLeft{
    width: 100%;
    order: 3;
}

.whoiscta{
	max-width: none;
}

.whoisVert {
    height: 190px;
    margin-left: calc(50% + 0.5vw);
}

.whoisPicture{
    border-radius: 50px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.whoisText {
    width: 100%;
    padding-top: 30px;
}

.whoisCube {
    left: -31%;
    margin-top: 100px;
    z-index: 2;
}

.whoisCube2 {
	position: absolute;
	width: 220px;
	height: 220px;
    left: 55%;
    margin-top: -60px;
}

#whois:before {
    background: radial-gradient(50% 40% at right, rgba(234, 172, 128, 0.5) 0%, rgba(238, 238, 238, 0) 100%);
    width: 80%;
    height: 50%;
    left: 20%;
    top: 15%;
}

#whois:after {
    background: radial-gradient(60% 40% at right, rgba(186, 128, 234, 0.3) 0%, rgba(238, 238, 238, 0) 100%);
    width: 55%;
    height: 50%;
    left: 45%;
    top: 23%;
}

#article{
	flex-direction: column;
	row-gap: 40px;
}

.articleImage{
	max-width: 100%;
}

.articleCopy{
	position: relative;
	width: 100%;
}

#article input[type="email"], #article input[type="url"] {
    width: calc(100% - 34px);
}

.submit{
	width: 100%;
}

/**  End New  **/

#scroll2{
	visibility: hidden;
}

.marquee {
    width: 3000%; 
    color: #aaa;
}

#marquee1{margin-left: calc(-110px - 1150%); }
#marquee2{margin-left: calc(-210px - 1150%); }
#marquee3{margin-left: calc(-180px - 1150%);}
#marquee4{margin-left: calc(-500px - 1150%);}
#marquee5{margin-left: calc(-790px - 1150%);}
#marquee6{margin-left: calc(-1010px - 1150%);}
#marquee7{margin-left: calc(-1330px - 1150%);}

#marquee1, #marquee2, #marquee3, #marquee4, #marquee5, #marquee6, #marquee7 {
    height: calc(55px + 1.5vw);
}

.en #marquee1{margin-left: calc(-340px - 1150%); }
.en #marquee2{margin-left: calc(-580px - 1150%); }
.en #marquee3{margin-left: calc(-410px - 1150%);}
.en #marquee4{margin-left: calc(-650px - 1150%);}
.en #marquee5{margin-left: calc(-980px - 1150%);}
.en #marquee6{margin-left: calc(-1040px - 1150%);}
.en #marquee7{margin-left: calc(-1370px - 1150%);}

	#serviceRight2{
		color: #666;
		font-size: calc(55px + 1.5vw);
		font-family: 'Poppins', Arial, Helvetica, sans-serif;
		font-weight: 900;
		line-height: calc(40px + 1.35vw);
		letter-spacing: -1.5px;
	}

	#servicesWrap{
		position: relative;
		padding: 0px 0% 200px 0%;
		width: 100%;
		background-image: none;
		font-size: 70px;
		line-height: 75px;
		/*background: rgb(245,245,245);
		background: linear-gradient(180deg, rgba(245,245,245,0) 0%, rgba(245,245,245,0) 10%, rgba(245,245,245,1) 10.01%);*/
		overflow: hidden;
/*		height: 7000px;*/
	}

	#servicesWrapBG {
	    top: 0;
	    left: 50%;
	    transform: none;
	    opacity: 0;
	}

	#imageWeb, #imageBanner, #imageSocial {
		position: absolute;
	    left: 0;
	}

	#imageWeb2, #imageBanner2, #imageSocial2 {
		display: none;
	}

	#services {
		width: calc(100vw - 28px);
	    padding: 70px 14px 150px 14px;
	    margin-left:0;
	    overflow: hidden;
	}

	#serviceLeft{
		width: 100%;
		float: none;
		margin-top: 0px;
		padding-top: 5%;
	}

	#deviceLeft{
		width: 100%;
		margin-top: calc(-40px - 4vw);
	}

	/*	#deviceLeft img {
	    transform: scale(0.35);
	    transform-origin: 40% 0%;
	}*/

	#deviceLeft img{	
		position: absolute;
		width: 70vw;
		height: auto;
		/*right: 8%;*/
		margin-left: calc(0px + 30vw);
		max-width: 414px;
		max-height: 341px;
		margin-top: 110px;
		/*transform-origin: 30vw 0%;*/
	}

	#serviceContent{
		margin-top: 15px;
		position: relative;
		font-size: calc(13px);
		line-height: 21px;
	}

	#serviceTitle {
	    /*height: 90px;*/
	    /*margin-left: -80px;*/
	}

	#serviceTitle .active {
	    /*font-size: 36px;*/
	    font-size: calc(15px + 3vw);
    	line-height: calc(24px + 3vw);
    	/*padding-left: 80px;*/
    	padding-bottom: 5px;
	}

	#serviceTitleBanner {
	    margin-left: 145px;
	}

	#serviceTitleSocial {
	    margin-left: 240px;
	}

	#serviceType{
		width: 110px;
		font-size: 16px;
		margin-top: 0;
	}

	#serviceContent{
		/*margin-left: 85px;*/
		padding-bottom: 120px;
	}

	.productMask, .productWeb, .productBanner, .productSocial{
		width: 70vw;
	}

	.productWeb, .productBanner{
		position: absolute;
	}


	/*** NEW CSS ***/

	.websiteTitle{
		font-size: 60px;
	}

	.websiteElements{
		width: 100%;
	}

	.websiteVisual{
		display: none;
	}

	.websiteVisualMobile{
		display: block;
		width: 100%;
		height: 100%;
		min-height: 598px;
		background-image: url(../images/servicewebsite.jpg);
		background-repeat: no-repeat;
		background-size: 120%;
		background-position: center;
	}

	/*** NEW CSS END ***/

	.mask{
		overflow: hidden;
		float: left; 
		height: calc(22px + 1.5vw);
		
	}
	.maskText, .maskText2{margin-top: 50px;}

	#work{
		width: calc(100% - 28px);
		padding: 100px 14px 150px 14px;
	}

	#workPretitle, #workTitle{
		margin-left: 10%;
		margin-top: 0px;
		opacity: 0;
	}

	#workTitle{
		/*font-size: calc(22px + 2vw);
    	line-height: calc(22px + 2vw);*/
    	font-size: calc(23px + 3vw);
    	line-height: calc(23px + 3vw);
    	background-size: 100px 5px;
	}

	.bgCase{
		height: 65vh;
	}

	#workCase1{
		border-top: 1px solid #aaa;
		margin-left: 0;
	}

	/*#workCase1{
		background-image: url(../images/caseMiele2.jpg);
	    background-size: cover;
	}

	#workCase2{
		background-image: url(../images/casePeugeot2.jpg);
	    background-size: cover;
	}

	#workCase3{
		background-image: url(../images/caseRituals2.jpg);
	    background-size: cover;
	}*/

	#workCase1, #workCase2, #workCase3, #workCase4, #workCase5, #workCase6{
		width: 100%;
		margin-top: 10px;
	}

	#myVideo1{
		position: absolute;
		height: 65vh;
/*		max-height: 700px;*/
/*		left: -450px;*/
	}

	#myVideo2{
		position: absolute;
		height: 65vh;
/*		max-height: 700px;*/
/*		left: -100px;*/
	}

	#myVideo3{
		position: absolute;
		height: 65vh;
/*		max-height: 700px;*/
/*		left: -270px;*/
	}

	.desktop{display: none;}
	.mobile{display: inline;}

	.case{
		/*border-right: none;*/
		-webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
		border: 1px solid #aaa;
		width: calc(100vw - 28px);
		height: 60vh;
/*		max-height: 700px;*/
		overflow: hidden;
		float: none;
		margin-left: 0;
		/*margin-bottom: 10%;*/
	}

	#workCard {
		bottom: calc(70px + 5vh);
	}

	.case .pretitle {
	    margin-left: 24px;
	    font-size: 13px;
	    color: #ddd;
	    line-height: 150%;
	}

	.casetitle{
		margin-bottom: 0px;
		margin-left: 21px;
		font-size: calc(30px + 1vw + 2vh);
    	line-height: calc(50px + 2vw);
    	background-size: 80px 1px;
    	padding-bottom: 5px;
	}

	.casecopy{
		margin-left: 24px;
		font-size: 13px;
	}

	.case img{
		max-height: 240px;
		margin-left: 25%;
	}

	#case1Visual, #case2Visual, #case3Visual{
		margin-top: -50px;
	}

	#case1Visual img, #case2Visual img, #case3Visual img{
		max-width: 56vw;
		margin-right: 0%;
		margin-top: 10%;
	}

	#case2Visual img{
		max-width: 62vw;
		margin-top: 15%;
	}

	.openClose{
		height: 30px;
    	width: 30px;
    	font-size: 22px;
	}

	.casedescription{
		margin-left: 24px;
		float: none;
		margin-top: 50px;
		width: 85%;  
		font-size: 13px;
		line-height: 20px;
	}

	#casephilipsexpanded, #casepeugeotexpanded, #caseritualsexpanded{
		position: relative;
		margin-right: 0px;
		margin-top: 100px !important;
		opacity: 0;
		max-width: 80vw;
		margin-left: 10vw !important;
		float: none;
		clear: both;
	}	

	#brands {
	    padding: 150px 14px 150px 14px;
	}

	#brandsTitle {
		font-size: calc(27px + 1vw);
    	line-height: calc(27px + 1vw);
    	width: 70%;
	}

    #brandLogos{
 		width: 100%;
    	margin-left: 0;
    }

    #brandLogos img.logo {
    	width: 80px;
    	margin: 3px 1.5px;
	}

	#subscription {
		width: calc(100% - 28px);
	    padding: 120px 14px 50px 14px;
	}

	#subscription p {
	    width: 80%;
	    margin-left: 10%;
	}

	.workTitle, .brandsTitle {
	    margin-left: 0%;
	    margin-bottom: 60px;
	}

	.subscriptions{
	    flex-direction: column;
	    row-gap: 40px;
	    margin-top: 60px;
	}

	.subscriptions>div {
/*	    border-radius: 15px;*/
	}

	#subAssistent, #subPro{
		padding-top: 50px;
		padding-right: 40px;
		padding-bottom: calc(150px + 10%);
		padding-left: 40px;
		width: calc(100% - 80px);
	}

	.steps{
		margin-top: 100px;
	}

	.step1, .step2, .step3{
		margin: 40px 0;
	}

	.stepImage{
    	text-align: left; 
	}


	/****   Footer  ****/

	#footer {
		width: 85%;
	    padding: 100px 7.5% 70px 7.5%;
	    text-align: left;
	    font-size: 12.5px;
	}

	#footerLogo img{
		width: 90%;
		height: auto;
		/*height: 81px;*/
	}

	#footerCopyright{
		line-height: 20px;
	}

	#footerLogo.footerColumn{		
	}

	.footerColumn {
		float: right;
	    line-height: 25px;
	    width: 50%;
	}

	#footerLogo{
		float: left;
	}

	#footerContact{
		width: 100%;
		float: none;
	}

	#footerLeft{
		margin-top: 40px;
		width: 100%;
	}

	#footerVolg.footerColumn{
		width: 50%;
	}

	#footer a {
	    
	}

	#footer .submit{
		width: 200px;
	}

	.footerTitle {
    	padding-bottom: 30px;
    	margin-bottom: 40px;
    }

    .contactBlock {
    	margin: 0;
    	flex-direction: column;
    }

    .contactBlock div {
	    width: 100%;
	}

	#footerRight{
		margin-top: 100px;
		width: 100%;
	}

	.linkedin{
		right: 34px;
	}

	/******     COOKIE CONSENT     *******/

	#cc-main .pm--flip .pm__btn-group, #cc-main .pm--flip .pm__footer {
        flex-direction: column!important;
    }

    #cc-main .pm.pm--box{
    	max-height: 100vh!important;
    }

	/******     LIVE CHAT     *******/

	#hubspot-messages-iframe-container.widget-align-right{
		margin-right: 0px!important;
		margin-bottom: 00px!important;
	}

	/******     GOOGLE CALENDAR     *******/

	.Xfsokf {
    	right: 20px!important;
    }

	.hur54b {
    	padding: 72px 20px 20px 20px!important;
    }

}