@font-face {
  font-family: 'SuisseBold';
  src: url('../font/SuisseBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SuisseAntique';
  src: url('../font/SuisseAntique.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SuisseRegular';
  src: url('../font/SuisseRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body {
	margin:0;
	padding:0;
  height: 100%;
  font-family: "SuisseBold", sans-serif;
/* font-size: 25px;
  line-height: 28px; */
  cursor:url('../../assets/img/cursor_black.png') 10 10, col-resize;
  background-color: #;
  overflow-x:hidden;
}

/* -------------- Wave -------------- */
.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}
/* -------------- Wave -------------- */
.work {
	margin: 2vw 0 6vw 10vw;
	width: 70%;
  height: 70%;
  overflow: hidden;
}

.videoInsert {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: inline-block;
}

/* -------------- link -------------- */
a {	

  text-decoration-color: black;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;

	display:inline-block;
	text-decoration: none;
	-webkit-transition: transform 0.01s; /* Safari */
  transition: transform 0.01s;
}

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  transition: transform 0.01s ease;
}

a.hovered {
 transform: scale(-1, 1);
 color: white;
 -moz-transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
 -o-transform: scale(-1, 1);
 -ms-transform: scale(-1, 1);
 transform: scale(-1, 1);
}

/* -------------- underline -------------- */
.language1 a > span {
	border-bottom:0.3vw solid black;
	bottom margin: -10px;
}

.language2 a > span {
	border-bottom:0.3vw solid white;
	bottom margin: -10px;
}
/* -------------- link color -------------- */

.language1 a {
	color:black;
}

.language2 a {
	color:white;
}
/* -------------- breakable -------------- */
.container {
	position: relative;
	width: 100vw;
	min-height: 100%;
}

.language1 {
	position:absolute;
	left:0px;
	top:0;
	width:100vw;
	min-height:100%;
	overflow-x:hidden;	
	z-index:10;
	color: black;
	background-color: #ffffff;
}

.language2 {
	position:absolute;
	right:0px;
	top:0;
	width:100vw;
	min-height:100%;
	overflow-x:hidden;
	z-index:20;
	color:white;
	background-color:black;
  pointer-events: none;
}

.copyblock {
	position:relative;
	padding:40px 40px 40px 25px;
	width: 90vw;
}

.hand {
  font-size:12vw;
  line-height:15vw;
  margin-bottom: 1vw;
  margin-top: 3vw;
  padding-left: 3vw;
  overflow: visible;
}

.description {
	font-size: 3vw;
	font-family: "SuisseRegular", sans-serif;
	text-transform: uppercase;
	padding-left: 16vw;
	/*padding-bottom: 16vw;*/
	line-height: 4.5vw;
}

.clients {
	font-size:2vw;
	line-height: 3vw;
	font-family: "SuisseRegular", sans-serif;
	text-transform: none;
	color: #505050;
	padding-left: 16vw;
	padding-right: 7vw;
	margin-bottom: 4vw;
}

.clientCopyblock-1 {
    visibility: visible;
}

.clientCopyblock-2 {
    visibility: hidden;
    display: none;
}

.bold {
		font-family: "SuisseBold", sans-serif;
}

.contact {
	font-family: "SuisseRegular", sans-serif;
  font-size:2vw;
  line-height:3vw;
  padding-left: 10vw;
}

.copyright {
	font-family: "SuisseRegular", sans-serif;
	font-size:2vw;
  line-height:3vw;
	margin-top: 4vw;
  padding-left: 10vw;
}

.logo {
 	  margin-top: 5vw;
}

svg {
  padding: 0 2vw 0.85vw 10vw;
  display: inline-block;
  vertical-align: middle;
  width: 8%;
  height: 8%;
}

/* ------------------ breakpoints ------------------ */


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

	.work {
		margin-left: 5.7vw;
		padding-bottom: 2vw;
		width: 90%;
  	height: 90%;
	}

	.hand {
  	font-size:30vw;
  	line-height:35vw;
  	margin-bottom: 1vw;
  	margin-top: 4vw;
	}

	.description {
		font-size:5vw;
		padding-left: 6vw;
		padding-bottom: 1vw;
	  line-height: 7vw;
	}

	.clients {
		font-size:2.6vw;
		padding-left: 6vw;
	  line-height: 3.8vw;
	  margin-bottom: 7vw;
	}

	.clientCopyblock-2 {
		visibility: visible;
		display: contents;

	}

	.clientCopyblock-1 {
		visibility: hidden;
		display: none;
	}

	.contact {
  	font-size:2.5vw;
  	line-height:3vw;
  	padding-left: 6vw;
	}

	.logo {
  	margin-top: 8vw;
	}

	svg {
	  padding: 0vw 0 0 6vw;
	  display: inline-block;
	  vertical-align: middle;
	  width: 12%;
	  height: 12%;
	}

	.copyright {
		margin-top: 5vw;
 		font-size:2vw;
  	line-height:1.5vw;
  	padding-left: 6vw;
	}
}

/* ---------------*/

/* 600px and up */
@media only screen and (min-width: 600px) {


}

/* ---------------*/

/* 768px and up */
@media only screen and (min-width: 768px) {


} 

/* ---------------*/

/* 992px and up */
@media only screen and (min-width: 992px) {


} 

/* ---------------*/

/* 1200px and up */
@media only screen and (min-width: 1200px) {


}