/*  STRUCTURE START ********************************************************** */
@charset "utf-8";

@font-face {
    font-family: 'OurFont';
	src: url('../data/fonts/Roboto-Light.ttf') format('truetype');
	font-weight: light;
	font-style: normal;
}

html,body{
	font-family: 'OurFont';
	height: 100%;
	min-height: 100%;
}

.navigation{
	position:fixed;
	left:50%;
	margin-left:-21.5vmin;
	z-index:-2;
}

.navigation li{
	float:left;
	color:#ffffff;
	display:block;
	line-height:6vh;
	font-size:2vmin;
	text-align:center;
	width:12vmin;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.navigation li:hover{
	font-weight:bold;
	cursor:pointer;
	background-color:#00b1b3;
	color:#ffffff;
	width:15vmin!important;
}

.header{
	clear:both;
	position:fixed;
	width:100%;
	height:6vh;
	background-color:rgba(0,0,0,0.6);
	color:#ffffff;
	top:0;
	left:0;
	z-index:1;
}

.logo{
	position:absolute;
	height: 3.8vh;
	top:1vh;
	left:1%;
}

.bar{
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -605px;
}

.bar_bottom{
	position:absolute;
	width: 100%;
	bottom: 0;
	padding-bottom: 0.7vmin;
	text-align: center;
	color:#00b1b3;
	display: block;
	background-color: rgba(0,0,0,0.6);
}

.button{
	position: absolute;
	display: block;
	width: 5vmin;
	height: 5vmin;
	bottom: 0px;
	right: 0px;
	background-image: url(../images/nav.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.button:hover{
	background-color: #00b1b3;
	cursor: pointer;
}

.textBig {
	font-size: 5vmin;
}

.textMed{
	font-size: 35px;
}


.textSmall {
	font-size: 18px;
}

.block1 {
	position:relative;
	width: 100%;
	height: 55vw;
	color: white;
	display:block;
	background-color:#ffffff;
}

.block2 {
	position:relative;
	width: 100%;
	color: black;
	text-align: center;
	background-color:#ffffff;
	overflow:hidden;
	background-image:url(../images/slide2/bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.block3 {
	position:relative;
	width: 100%;
	text-align: center;
	background-color:#000000;
}

.block4 {
	position:relative;
	width: 100%;
	color: black;
	display:block;
	text-align: center;
	background-color:#ffffff;
	overflow:hidden;
	background-image:url(../images/slide4/bg.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.edge_offset {
	width, height: 80vmin;
	padding:  10vmin;
}


/*  STRUCTURE END ********************************************************** */

/*  PAGE 1 (SLIDESHOW) START ******************************************************** */
#imageContainer {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 56vw;
	overflow: hidden;
}

#slide1 {
  animation: anim1 25s infinite;
  animation-timing-function: linear;
}

#slide2 {
  animation: anim2 25s infinite;
  animation-timing-function: linear;
}

#slide3 {
  animation: anim3 25s infinite;
  animation-timing-function: linear;
}

#slide4 {
  animation: anim4 25s infinite;
  animation-timing-function: linear;
}

@keyframes anim1 {
	0% {
		transform: scale3d(1, 1, 1);
		-o-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		-moz-transform: scale3d(1, 1, 1);
		-webkit-transform: scale3d(1, 1, 1);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		transform: scale3d(1.18, 1.18, 1.18);
		-o-transform: scale3d(1.18, 1.18, 1.18);
		-ms-transform: scale3d(1.18, 1.18, 1.18);
		-moz-transform: scale3d(1.18, 1.18, 1.18);
		-webkit-transform: scale3d(1.18, 1.18, 1.18);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim2 {
	0% {
		transform: scale3d(1.18, 1.18, 1.18);
		-o-transform: scale3d(1.18, 1.18, 1.18);
		-ms-transform: scale3d(1.18, 1.18, 1.18);
		-moz-transform: scale3d(1.18, 1.18, 1.18);
		-webkit-transform: scale3d(1.18, 1.18, 1.18);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		transform: scale3d(1, 1, 1);
		-o-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		-moz-transform: scale3d(1, 1, 1);
		-webkit-transform: scale3d(1, 1, 1);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim3 {
	0% {
		transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes anim4 {
	0% {
		transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-5vw, 0, 0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	25% {
		transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(5vw, 0, 0);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

#imageContainer img:nth-of-type(1) {
  animation-delay: 20s;
}
#imageContainer img:nth-of-type(2) {
  animation-delay: 16s;
}
#imageContainer img:nth-of-type(3) {
  animation-delay: 12s;
}
#imageContainer img:nth-of-type(4) {
  animation-delay: 8s;
}
#imageContainer img:nth-of-type(5) {
  animation-delay: 4s;
}
#imageContainer img:nth-of-type(6) {
  animation-delay: 0s;
}
/*  PAGE 1 (SLIDESHOW) END ******************************************************** */

/*  PAGE 2, 4 START ****************************************************************** */

.info_block{
	position:relative;
	text-align:center;
	padding: 5%;
	background-color:rgba(255,255,255,0.88);
}

.logo_block{
position:relative;
}

.client_logo{
max-height:6vh;
}

.social_logo{
height:10vh;
}

.footer{
	position:relative;
	bottom:0%;
	width:100%;
	height:6vh;
	font-size:2.5vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#ffffff;
	background-color:rgba(0,0,0,0.6);
}
/*  PAGE 2, 4 END ****************************************************************** */

/*  PAGE 3 (TUMBS) START ****************************************************************** */

#thumbs {
	position:relative;
	width:100%;
	top:0%;
	margin:0 0 0 0;
	overflow:hidden;
}

.thumb div {
	position: relative;
	float: left;
	width: calc(100%/4);
	height: 50vh;
	overflow:hidden;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.thumb:hover div {
	position:relative;
	cursor:pointer;
	overflow:hidden;
}

.box  {
	position:absolute;
	width:100%;
	height: 100%;
	overflow:hidden;
}

.box a {
	display:block;
	position:absolute;
	width:100%;
	height: 100%;
	text-align:center;
	overflow:hidden;
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	-o-filter: none;
	filter: none;
	filter: none;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.box:hover a {
	width: 110%;
	height: 110%;
	margin-left: -5%;
	margin-top: -5%;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}

.box img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.box div {
 	position:absolute;
	width: 100%;
	margin-top: 0;
	padding-top: 1vw;
	text-align: center;
	font-size: 1.6vw;
	color: rgba(0,0,0,0);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.box:hover div {
	margin-top: 25vh;
	color: #ffffff;
	background-color:rgba(0,177,180,0.75);
}

.box div div {
	width:90%;
	left: 5%;
	margin-top: 20vw;
	text-align: center;
	font-size: 1vw;
	color:rgba(0,0,0,0);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.box:hover div div {
	margin-top:-1vh;
	color:#ffffff;
	background-color:rgba(0,0,0,0);
}

/*  PAGE 3 (TUMBS) END ****************************************************************** */

/*  WORKS PAGES START ****************************************************************** */
.logo_project{
	position:relative;
	width: 65vmin;
}

.edge_offset2 {
	position: relative;
	padding: 0 10vmin;
}

.pics_thumb {
width: 28.0vw;
cursor: pointer;
margin: .2vw;
}

.pics_thumb1 {
width: 42.2vw;
cursor: pointer;
margin: .2vw;
}

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

.image-box {
	color: white;
	height: 100%;
	text-align: center;
}

.button_block{
	display:flex;
	justify-content:center;
	font-size:2vmin;
}

.button_2{
	margin: 4% 0 4% 0;
	width: 40%;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button_2 li{
	display:block;
	width:40%;
	height:6vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

.button_2 li:hover{
	cursor:pointer;
	background-color:#00b1b3;
	width:50%!important;
}

.button_up {
	position: fixed;
	display: block;
	width: 5vmin;
	height: 5vmin;
	bottom: 0px;
	right: 0px;
	background-image: url(../images/nav.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-o-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage( rotation=2)
}

.button_up:hover {
	background-color: #00b1b3;
	cursor: pointer;
}

.gall_bg {
		background-color: #000000;
		background: var(--image-url) center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-attachment: fixed;
}

.row {
	display: flex;
	align-items: center;
	justify-content: center;
}
/*  WORKS PAGES END ****************************************************************** */

@media screen and (max-width: 900px) {
	.thumb div {
		width: calc(100%/2);
	}
	
	.box div {
		font-size: 3.2vw;
		width: 100%;
	}
	
	.box div div {
		font-size: 2vw;
	}


@media screen and (max-width: 550px) {
	.thumb div {
		width: 100%;
	}
	
	.box div {
		font-size: 6.4vw;
	}
	
	.box div div {
		font-size: 4vw;
	}
}