/* general */

body, html {
    font-family: 'Poppins', sans-serif;
    /* color: rgb(46, 74, 93); */
    background-color: #fff;
    overflow-x: hidden;
    position: relative;
    /*cursor: url('../media/cursor-small-tutorial-black.png') 30 30, auto;*/
    cursor: url('../media/cursor-small-black.png') 10 10, auto;
    background-color: transparent;
}

body {
	color: #fff;
	margin: 0px;
  	overflow: hidden;
  	/*transform: translateZ(0);*/
}
#emailv-input {
  display: none;
}
::-moz-selection {
    background: #fff;
    text-shadow: none;
}

::selection {
    background: #fff;
    text-shadow: none;
}

/* container */

#container {
	max-width: 1200px;
	padding-left: 100px;
	padding-right: 100px;
	margin: auto;
}

/* header */

header {
	padding-top: 60px;
	font-weight: 600;
}

#logo {
	z-index: 100 !important;
	position: relative;
}

#lang,
#text,
#switch {
    font-weight: 500;
    text-align: right;
    font-size: 0.9em;
    line-height: 1.5em;
    z-index: 100 !important;
	position: relative;
	color: #000;
}

#lang-activ,
.switch-activ {
	font-weight: 700;
}

#lang a {
	text-decoration: none;
	color: rgb(0, 0, 0);
}

#lang a:hover {
	font-weight: 700;
}

#switch:hover {
	font-weight: 700;
}

#switch {
	position: fixed;
	top: 60px;
	padding-left: 1090px;
}

#text {
	position: fixed;
	top: 60px;
	padding-left: 1035px;
}

/* Color titles */

#color-title {
	padding-top: 160px;
}

#color-title h2 {
	font-weight: 600;
	font-size: 4em;
	text-transform: uppercase;
	margin: 0 0;
}

#def {
	padding-top: 100px;
	font-size: 2em;
	font-weight: 500;
	width: 60%;
	margin: 0 0;
	display: inline-block;
	padding-right: 5%;
}

#description {
	display: inline-block;
	vertical-align: top;
	width: 35%;
	padding-top: 90px;
	line-height: 1.8em;
	font-size: 1.2em;
}

#imghead {
	width: 1050px;
	margin: 150px 75px 80px 75px;
}

.names,
.names-pres {
	font-weight: 400;
	line-height: 1.8em;
	margin: 0;
	max-width: 500px;
	font-size: 1.1em;
}

#wwd {
	margin-top: 300px;
}

#wwd h3 {
	font-weight: 500;
	font-size: 1.1em;
	margin-bottom: 30px;
}

#wwd p {
	margin: 0;
	line-height: 1.6em;
	font-size: 1.1em;
	font-weight: 500;
}

#clients-title {
	margin-left: 15%;
	margin-top: 200px;
	font-weight: 500;
	font-size: 1.30em;
	margin-bottom: 50px;
}


.clients-sub-title {
	margin-left: 15%;
	font-weight: 500;
	font-size: 1em;
	margin-top: 50px;
	margin-bottom: 50px;
}

.clients-logo-container {
	margin-left: 15%;
	margin-right: 15%;
}

.clients-logos {
	height: 62px;
	padding-right: 40px;
  padding-bottom: 40px;
}
.clients-logos-p {
	width: 24%;
}
.square-logo {
	height: 120px;
}

#testimonial {
	margin: 150px auto 150px auto;
	max-width: 800px;
	text-align: center;
	font-weight: 500;
	font-size: 1.3em;
	line-height: 1.6em;
}

#email-input {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgb(0, 0, 0);
	text-align: center;
	font-size: 1.2em;
	font-weight: 300;
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 100 !important;
	position: relative;
	width: 250px;
}


#email-input:invalid {
	border: none;
	border-bottom: 1px solid red;
}

#email-input:out-of-range {
    border: none;
	border-bottom: 1px solid red;
}

#button-send {
	background-color: transparent;
	color: rgb(0, 0, 0);
	border: none;
	border: 1px solid rgb(0, 0, 0);
	font-size: 1.2em;
	font-weight: 600;
	padding-top: 20px;
	padding-bottom: 20px;
	z-index: 100 !important;
	position: relative;
	width: 250px;
	cursor: pointer;
}

#button-send:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid rgb(0, 0, 0);;
}

#quote {
	margin: 200px auto 200px auto;
	max-width: 800px;
	text-align: center;
	font-weight: 500;
	font-size: 2em;
	line-height: 1.6em;
}

footer {
	background-color: #fff;
	color: #000;
	padding: 100px 100px 30px 100px;
	line-height: 1.6em;
	font-weight: 300;
	font-size: 1em;
	margin-bottom: 0px;
	position: relative;
	z-index: 200;
	cursor: initial;
}

footer h1 {
	color: #000;
}

footer a {
	text-decoration: none;
	color: rgb(0, 0, 0);
}

#address,
#tel,
#contact {
	display: inline-block;
	font-weight: 500;
}

#address {
	width: 40%;
}

#tel,
#contact {
	width: 30%;
}

#tel {
	text-align: center;
}

#contact {
	text-align: right;
}

#address h1 {
	margin: 0;
	line-height: 1.6em;
	font-size: 1em;
	font-weight: 500;
}

#copyright {
	margin: 50px 0 30px 0;
	font-size: 0.7em;
}

.col-l,
.col-r {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

.col-l {
	width: 47%;
	padding-right: 3%
}

.col-middle-l,
.col-middle-r {
	display: inline-block;
	vertical-align: middle;
	width: 50%;
}


.col-bottom-l,
.col-bottom-r {
	display: inline-block;
	width: 50%;
}

.col-small-l,
.col-small-r {
	display: inline-block;
	width: 35%;
	vertical-align: top;
}

.col-small-l {
	margin-left: 15%;
}

.col-small-r {
	margin-right: 15%;
}

.center {
	padding-left: auto;
	padding-right: auto;
	text-align:center
}

/* interaction */


#container {
  z-index: 1;
  position: relative;
}
#container img {
  z-index: -1;
  position: relative;
}
#formes {
  z-index: 0;
}
#form-answer {
  text-align: center;
}

.testor {
 	transform: translate(-50%,-50%, 0.001);
	position: absolute;
	margin: 0;
	/*overflow: visible;*/
	/*mix-blend-mode: exclusion;*/
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 0;
	/* will-change: opacity; */
 	/* transform-origin: center; */
 	/* transform: translateZ(0.001); */
  	opacity: 1;
}

/* tutorial */
#tutorial-mobile {
	position: fixed;
	left: 50%;
	top: 50vh;
	transform: translate(-50%,-50%);
	z-index: 200 !important;
	color: #000;
}

/* background */
#noise {
  animation: grain 8s steps(10) infinite;
  background-image: url(../media/grain.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity: 1;
  position: fixed;
  top: -110%;
  width: 300%;
  z-index: 1;
  pointer-events: none;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

/* Responsive */
@media only screen and (max-width: 1400px) {
	#container {
		max-width: 1000px;
		padding-left: 100px;
		padding-right: 100px;
	}

	#imghead {
		display: block;
		width: 900px;
		margin: 150px auto 80px auto;
	}

	.clients-logos {
		height: 68px;
	}

	#switch {
		position: fixed;
		top: 60px;
		padding-left: 900px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 850px;
	}
}

@media only screen and (max-width: 1200px) {
	#container {
		max-width: 900px;
		padding-left: 50px;
		padding-right: 50px;
	}

	#imghead {
		width: 800px;
		margin: 150px auto 80px auto;
	}

	.clients-logos {
		height: 60px;
		padding-right: 57px;
	}

	#switch {
		position: fixed;
		top: 60px;
		padding-left: 800px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 750px;
	}
}

@media only screen and (max-width: 1000px) {
	#container {
		max-width: 700px;
		padding-left: 25px;
		padding-right: 25px;
	}

	#imghead {
		width: 550px;
		margin: 150px auto 80px auto;
	}

	.col-l,
	.col-r {
		display: block;
		width: 100%;
	}

	.col-r {
		padding-top: 50px;
	}

	.names-pres {
		max-width: 100%;
	}

	#wwd {
		margin-top: 100px;
	}

	#address,
	#tel,
	#email {
		display: block;
	}

	#address {
		width: 100%;
	}

	#tel,
	#email {
		padding-top: 20px;
		width: 100%;
		text-align: left;
	}

	#clients-title {
		margin-top: 100px;
	}

	.clients-logos {
		height: 60px;
		padding-right: 70px;
	}

  .clients-logos-p {
    width: 49%;
  }

	#switch {
		position: fixed;
		top: 60px;
		padding-left: 600px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 550px;
	}
}

@media only screen and (max-width: 750px) {

	#logo {
		height: 15px;
	}

	#container {
		max-width: 400px;
	}

	#def {
		padding-top: 50px;
		width: 100%;
		display: block;
	}

	#description {
		padding-top: 25px;
		width: 100%;
		font-size: 1em;
		display: block;
	}

	#color-title {
		padding-top: 100px;
	}

	#color-title h2 {
		font-size: 2em;
	}

	#def {
		font-size: 1.5em;
		max-width: 100%;
	}

	#imghead {
		width: 450px;
		margin: 100px auto 80px -25px;
	}

	.col-small-l,
	.col-small-r {
		display: block;
		width: 80%;
	}

	.col-small-l {
		margin-left: 10%;
	}

	.col-small-r {
		padding-top: 50px;
		margin-left: 10%;
	}

	#clients-title {
		margin-left: 10%;
	}

	.clients-sub-title {
		margin-left: 10%;
	}

	.clients-logo-container {
		margin-left: 10%;
		margin-right: 10%;
	}

	.clients-logos {
		display: block;
		padding-bottom: 20px;
	}

	#testimonial {
		margin: 100px auto 100px auto;
		font-size: 1.1em;
	}

	#quote {
		margin: 100px auto 100px auto;
		font-size: 1.3em;
	}

	footer {
		padding: 40px 20px 30px 20px;
	}

	#switch {
		position: fixed;
		top: 60px;
		padding-left: 300px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 250px;
	}
}

@media only screen and (max-width: 440px) {
	#switch {
		position: fixed;
		top: 60px;
		padding-left: 280px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 230px;
	}
}

@media only screen and (max-width: 410px) {
	#switch {
		position: fixed;
		top: 60px;
		padding-left: 250px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 200px;
	}
}


@media only screen and (max-width: 380px) {
	#color-title h2 {
		font-size: 1.6em;
	}

	#def {
		font-size: 1.3em;
	}

	#imghead {
		width: 100vw;
		margin: 100px auto 80px -25px;
	}

	.names,
	.names-pres {
		font-size: 1em;
	}

	#email-input {
		width: 200px;
	}

	#button-send {
		width: 200px;
	}

	.clients-logos {
		height: 60px;
	}

	#logo {
		height: 13px;
	}

	#switch {
		position: fixed;
		top: 60px;
		padding-left: 235px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 190px;
	}
}

@media only screen and (max-width: 360px) {
	#switch {
		position: fixed;
		top: 60px;
		padding-left: 210px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 165px;
	}
}

@media only screen and (max-width: 340px) {
	#switch {
		position: fixed;
		top: 60px;
		padding-left: 190px;
	}

	#text {
		position: fixed;
		top: 60px;
		padding-left: 145px;
	}
}