/*---CHERRY CSS---*/

@font-face {
    font-family: "segoeProLight";
    src: url("/css/fonts/segoepro-light.ttf");
}
@font-face {
    font-family: "segoeProMedium";
    src: url("/css/fonts/segoepro-medium.ttf");
}
@font-face {
    font-family: "segoeProBold";
    src: url("/css/fonts/segoepro-bold.ttf");
}

body {
	font-family: "segoeProLight", sans-serif;
	font-size: 20px;
	color: #777;
}

#video {
	-o-object-fit: cover;
	   object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*---MENU START---*/

.lang-change {
    color: #fff;
    position: absolute;
    top: 40px;
    right: 40px;
    line-height: 1;
}
.lang-change a {
    border: none;
    color: #fff;
    padding: 0;
    line-height: inherit;
}
.main-menu-holder {
	position: fixed;
	height: 100vh;
	width: calc(100vw - 40px);
	left: 0;
	top: 0;
	z-index: 99;
	background-color: #b62248;
	-webkit-transition: -webkit-transform 750ms;
	transition: -webkit-transform 750ms;
	transition: transform 750ms;
	transition: transform 750ms, -webkit-transform 750ms;
	-webkit-transform: translateX(-150%);
	        transform: translateX(-150%);
}
@media (min-width: 768px) {
	.main-menu-holder {
		width: 500px;
	}
}
.main-menu-show {
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
}
.menu {
	-webkit-transform: translateX(0%);
	        transform: translateX(0%);
}
.menu-holder {
	position: absolute;
	height: 100%;
}
.main-menu {
	list-style-type: none;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	margin: 0;
	padding: 0;
	padding-left: 50px;
}
.main-menu > li {
	margin-top: 8px;
	margin-bottom: 8px;
}
.main-menu > li > a {
	color: #fff;
	font-size: 24px;
	white-space: nowrap;
}
.main-menu > li > a.bold {
    font-family: "segoeProMedium", sans-serif;
}

.sub-menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-left: 30px;
}
.sub-menu > li {
	margin-top: 6px;
	margin-bottom: 6px;
}
.sub-menu > li > a {
	color: #fff;
	font-size: 22px;
	white-space: nowrap;
}
.vertical-holder {
	position: absolute;
	height: 100%;
	width: 40px;
	background: #e1e1e1;
	right: 0px;
	-webkit-transform: translateX(100%);
	        transform: translateX(100%);
}
.vertical-cherry {
	position: absolute;
	top: 5%;
	margin-left: 15px;
	margin-right: 15px;
}
.vertical-cherry img {
	max-width: 100%;
}
.menu-cherry {
	/* background-image: url(/gui/menu-cherry.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 120px;
	height: 150px;
	position: absolute;
	top: 45%;
	-webkit-transform: translateX(50%);
	        transform: translateX(50%);
	right: 0px; */

    width: 50px;
    height: auto;
    position: absolute;
    top: 58%;
    /* transform: translateY(-50%); */
    right: auto;
    left: 0;
}
.vertical-menu {
	position: absolute;
	background: transparent;
/*
	margin-left: 4px;
	margin-right: 4px;
*/
    padding-left: 4px;
    padding-right: 4px;
	border: 0;
	outline: 0;
	padding: 0;
	bottom: 80px;
}
.vertical-menu img {
	width: 100%;
}
.vertical-menu svg {
    fill: #b81f46;
}
@media (min-width: 768px) {
	.vertical-holder {
		position: absolute;
		height: 100%;
		width: 40px;
		background: #e1e1e1;
		right: 0px;
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	.vertical-menu {
		position: absolute;
		background: transparent;
/*
		margin-left: 6px;
		margin-right: 6px;
*/
		padding-left: 6px;
		padding-right: 6px;
        border: 0;
		outline: 0;
		padding: 0;
		/* top: 70%; */
	}
	.vertical-cherry {
		position: absolute;
		top: 5%;
		margin-left: 14px;
		margin-right: 14px;
	}
	.main-menu > li > a {
		color: #fff;
		font-size: 26px;
		white-space: nowrap;
	}
	.menu-cherry {
		/* background-image: url(/gui/menu-cherry.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 258px;
		height: 321px;
		height: 30vmin;
		position: absolute;
		top: 50%;
		-webkit-transform: translate(50%, -50%);
		        transform: translate(50%, -50%);
		right: 0px; */
	}
}
@media (min-width: 992px) {
	.vertical-holder {
		position: absolute;
		height: 100%;
		width: 52px;
		background: #e1e1e1;
		right: 0px;
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	.vertical-menu {
		position: absolute;
		background: transparent;
/*
		margin-left: 8px;
		margin-right: 8px;
*/
		border: 0;
		outline: 0;
		padding: 0;
        top: auto;
        bottom: 35px;
        padding-left: 8px;
        padding-right: 8px;
	}
	.vertical-cherry {
		position: absolute;
		top: 5%;
		margin-left: 21px;
		margin-right: 21px;
	}
	.main-menu > li > a {
		color: #fff;
		/* text-transform: uppercase; */
		font-size: 26px;
		white-space: nowrap;
	}
	.menu-cherry {
		width: 70px;
        height: auto;
		position: absolute;
		top: 50%;
        /* transform: translateY(-50%); */
		right: auto;
        left: 0;
	}
}
@media (min-width: 1200px) {
    .vertical-cherry {
        position: absolute;
        top: 5%;
        margin-left: 21px;
        margin-right: 21px;
    }
}
@media (min-width: 1400px) {
    .vertical-cherry {
        position: absolute;
        top: 5%;
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media (min-width: 1600px) {
    .vertical-cherry {
        position: absolute;
        top: 5%;
        margin-left: 19px;
        margin-right: 19px;
    }
}

/*---MENU END---*/


/*---SECTIONS START---*/

.average-text {
	position: relative;
	text-transform: uppercase;
	text-align: center;
	font-size: 36px;
	font-size: 2.1vmax;
	letter-spacing: 6px;
	color: #fff;
}
.average-text-mask {
	position: absolute;
	top: 0;
	right: 0;
	background: #b81e45;
	height: 100%;
	width: 100%;
}
.average-text-ani {
	-webkit-animation-name: text-ani;
	        animation-name: text-ani;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
}
@-webkit-keyframes text-ani {
	from {width: 100%;}
	to {width: 0px;}
}
@keyframes text-ani {
	from {width: 100%;}
	to {width: 0px;}
}
.cherry-1 {
	position: absolute;
	background-image: url(/gui/cherry-1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 23.1vmax;
	height: 35.6vh;
	top: 4vh;
	left: 0;
	-webkit-transform: translateX(-35vw);
	        transform: translateX(-35vw);
}
.cherry-1-ani {
	-webkit-animation-name: cherry-1;
	        animation-name: cherry-1;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-out, linear;
	        animation-timing-function: ease-out, linear;
}
@-webkit-keyframes cherry-1 {
	from {-webkit-transform: translateX(-35vw);transform: translateX(-35vw);}
	50% {-webkit-transform: translateX(18vw);transform: translateX(18vw);}
	to {-webkit-transform: translateX(14vw);transform: translateX(14vw);}
}
@keyframes cherry-1 {
	from {-webkit-transform: translateX(-35vw);transform: translateX(-35vw);}
	50% {-webkit-transform: translateX(18vw);transform: translateX(18vw);}
	to {-webkit-transform: translateX(14vw);transform: translateX(14vw);}
}
.cherry-2 {
	position: absolute;
	background-image: url(/gui/cherry-2.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 13.3vmax;
	height: 21.1vh;
	top: 15vh;
	right: 0;
	-webkit-transform: translateX(20vw);
	        transform: translateX(20vw);
}
.cherry-2-ani {
	-webkit-animation-name: cherry-2;
	        animation-name: cherry-2;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear, ease-in-out;
	        animation-timing-function: linear, ease-in-out;
}
@-webkit-keyframes cherry-2 {
	from {-webkit-transform: translateX(20vw);transform: translateX(20vw);}
	50% {-webkit-transform: translateX(-32vw);transform: translateX(-32vw);}
	to {-webkit-transform: translateX(-26vw);transform: translateX(-26vw);}
}
@keyframes cherry-2 {
	from {-webkit-transform: translateX(20vw);transform: translateX(20vw);}
	50% {-webkit-transform: translateX(-32vw);transform: translateX(-32vw);}
	to {-webkit-transform: translateX(-26vw);transform: translateX(-26vw);}
}
.cherry-3 {
	position: absolute;
	background-image: url(/gui/cherry-3.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 16.4vmax;
	height: 23.6vh;
	bottom: 10vh;
	left: 0;
	-webkit-transform: translateX(-25vw);
	        transform: translateX(-25vw);
}
.cherry-3-ani {
	-webkit-animation-name: cherry-3;
	        animation-name: cherry-3;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear, ease-in-out;
	        animation-timing-function: linear, ease-in-out;
}
@-webkit-keyframes cherry-3 {
	from {-webkit-transform: translateX(-25vw);transform: translateX(-25vw);}
	50% {-webkit-transform: translateX(18vw);transform: translateX(18vw);}
	to {-webkit-transform: translateX(24vw);transform: translateX(24vw);}
}
@keyframes cherry-3 {
	from {-webkit-transform: translateX(-25vw);transform: translateX(-25vw);}
	50% {-webkit-transform: translateX(18vw);transform: translateX(18vw);}
	to {-webkit-transform: translateX(24vw);transform: translateX(24vw);}
}
.cherry-4 {
	position: absolute;
	background-image: url(/gui/cherry-4.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 16.5vmax;
	height: 24.1vh;
	bottom: 2vh;
	right: 0;
	-webkit-transform: translateX(155vw);
	        transform: translateX(155vw);
}
.cherry-4-ani {
	-webkit-animation-name: cherry-4;
	        animation-name: cherry-4;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes cherry-4 {
	from {
		-webkit-transform: translateX(15vw);
		        transform: translateX(15vw);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	50% {
		-webkit-transform: translateX(-10vw);
		        transform: translateX(-10vw);
		-webkit-animation-timing-function: ease-in-out;
		        animation-timing-function: ease-in-out;
	}
	to {
		-webkit-transform: translateX(-14vw);
		        transform: translateX(-14vw);
	}
}
@keyframes cherry-4 {
	from {
		-webkit-transform: translateX(15vw);
		        transform: translateX(15vw);
		-webkit-animation-timing-function: linear;
		        animation-timing-function: linear;
	}
	50% {
		-webkit-transform: translateX(-10vw);
		        transform: translateX(-10vw);
		-webkit-animation-timing-function: ease-in-out;
		        animation-timing-function: ease-in-out;
	}
	to {
		-webkit-transform: translateX(-14vw);
		        transform: translateX(-14vw);
	}
}
.scroll {
	position: absolute;
	bottom: 30px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	background-image: url(/gui/scroll.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 70px;
	width: 24px;
}
.section {
	padding-left: 40px;
	overflow: hidden;
}
@media (min-width: 768px) {
	.section {
		padding-left: 50px;
	}
}
/*---SECTIONS END---*/

/*---TEAM START---*/

.team-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 75px;
	padding-right: 20px;
	bottom: 0;
	-webkit-transform: translateX(-85vw);
	        transform: translateX(-85vw);
}
.team-left-ani {
	-webkit-animation-name: team-left;
	        animation-name: team-left;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes team-left {
	from {-webkit-transform: translateX(-85vw);transform: translateX(-85vw);}
	to {-webkit-transform: translateX(0px);transform: translateX(0px);}
}
@keyframes team-left {
	from {-webkit-transform: translateX(-85vw);transform: translateX(-85vw);}
	to {-webkit-transform: translateX(0px);transform: translateX(0px);}
}

.team-left h1 {
	text-transform: uppercase;
	font-size: 24px;
	font-family: segoeProBold, sans-serif;
}
.team-left p {
	font-size: 14px;
	margin-bottom: 5px;
}
.team-right {
	position: absolute;
	top: 0;
	left: 75px;
	width: 100%;
	height: 50%;
}
.img-holder {
	background-image: url(/gui/nas-tim.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	width: 100%;
	height: 70%;
	position: absolute;
	top: 0;
	right: 0;
	-webkit-transform: translateY(-70vh);
	        transform: translateY(-70vh);
}
.img-holder-ani {
	-webkit-animation-name: img-holder;
	        animation-name: img-holder;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes img-holder {
	from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes img-holder {
	from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}
.title-holder {
	position: absolute;
	bottom: 0;
	left: 60px;
	right: 30px;
	-webkit-transform: translate(70vw, -30px);
	        transform: translate(70vw, -30px);
}
.title-holder-ani {
	-webkit-animation-name: title-holder;
	        animation-name: title-holder;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes title-holder {
	from {-webkit-transform: translate(70vw, -30px);transform: translate(70vw, -30px);}
	to {-webkit-transform: translate(-60px, -30px);transform: translate(-60px, -30px);}
}
@keyframes title-holder {
	from {-webkit-transform: translate(70vw, -30px);transform: translate(70vw, -30px);}
	to {-webkit-transform: translate(-60px, -30px);transform: translate(-60px, -30px);}
}
.team-right h2 {
	font-family: segoeProBold, sans-serif;
	font-size: 120px;
	color: #777;
	text-transform: uppercase;
	opacity: 0.58;
	text-align: right;
}
.team-right h3 {
	font-family: segoeProBold, sans-serif;
	font-size: 100px;
	color: #777;
	text-transform: uppercase;
	opacity: 0.58;
	text-align: right;
}
.cherry-5 {
	position: absolute;
	background-image: url(/gui/cherry-3.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 16.4vmax;
	height: 23.6vh;
	top: 0;
	left: 0;
	-webkit-transform: translate(7vw, -20vh);
	        transform: translate(7vw, -20vh);
}
.cherry-5-ani {
	-webkit-animation-name: cherry-5;
	        animation-name: cherry-5;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes cherry-5 {
	from {-webkit-transform: translate(7vw, -20vh);transform: translate(7vw, -20vh);}
	to {-webkit-transform: translate(7vw, 22vh);transform: translate(7vw, 22vh);}
}
@keyframes cherry-5 {
	from {-webkit-transform: translate(7vw, -20vh);transform: translate(7vw, -20vh);}
	to {-webkit-transform: translate(7vw, 22vh);transform: translate(7vw, 22vh);}
}
.cherry-6 {
	position: absolute;
	background-image: url(/gui/cherry-6.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 13.8vmax;
	height: 10vmax;
	top: 0;
	left: 0;
	-webkit-transform: translate(55vw, 10vh);
	        transform: translate(55vw, 10vh);
}
.cherry-6-ani {
	-webkit-animation-name: cherry-6;
	        animation-name: cherry-6;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes cherry-6 {
	from {-webkit-transform: translate(55vw, 10vh);transform: translate(55vw, 10vh);}
	to {-webkit-transform: translate(55vw, 46vh);transform: translate(55vw, 46vh);}
}
@keyframes cherry-6 {
	from {-webkit-transform: translate(55vw, 10vh);transform: translate(55vw, 10vh);}
	to {-webkit-transform: translate(55vw, 46vh);transform: translate(55vw, 46vh);}
}
.cherry-7 {
	position: absolute;
	background-image: url(/gui/cherry-6.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 13.8vmax;
	height: 19.9vh;
	top: 0;
	left: 0;
	-webkit-transform: translate(-15vw, 78vh);
	        transform: translate(-15vw, 78vh);
}
.cherry-7-ani {
	-webkit-animation-name: cherry-7;
	        animation-name: cherry-7;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes cherry-7 {
	from {-webkit-transform: translate(-15vw, 78vh);transform: translate(-15vw, 78vh);}
	to {-webkit-transform: translate(26vw, 78vh);transform: translate(26vw, 78vh);}
}
@keyframes cherry-7 {
	from {-webkit-transform: translate(-15vw, 78vh);transform: translate(-15vw, 78vh);}
	to {-webkit-transform: translate(26vw, 78vh);transform: translate(26vw, 78vh);}
}

@media (min-width: 768px) {
	.team-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 125px;
		padding-right: 25px;
		bottom: 0;
		padding-top: 50px;
		-webkit-transform: translateX(-95vw);
		        transform: translateX(-95vw);
	}
	@-webkit-keyframes team-left {
		from {-webkit-transform: translateX(-95vw);transform: translateX(-95vw);}
		to {-webkit-transform: translateX(0px);transform: translateX(0px);}
	}
	@keyframes team-left {
		from {-webkit-transform: translateX(-95vw);transform: translateX(-95vw);}
		to {-webkit-transform: translateX(0px);transform: translateX(0px);}
	}
	.team-left h1 {
		text-transform: uppercase;
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
	}
	.team-left p {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.team-right {
		position: absolute;
	    top: 0;
	    left: 125px;
		right: 0;
	    width: 100%;
		width: auto;
	    height: 50%;
	}
	.title-holder {
		position: absolute;
		bottom: 0;
		left: 100px;
		right: 0px;
		-webkit-transform: translateX(75vw);
		        transform: translateX(75vw);
	}
	@-webkit-keyframes title-holder {
		from {-webkit-transform: translateX(75vw);transform: translateX(75vw);}
		to {-webkit-transform: translateX(-60px);transform: translateX(-60px);}
	}
	@keyframes title-holder {
		from {-webkit-transform: translateX(75vw);transform: translateX(75vw);}
		to {-webkit-transform: translateX(-60px);transform: translateX(-60px);}
	}
	.cherry-5 {
		position: absolute;
		background-image: url(/gui/cherry-3.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 16.4vmax;
		height: 23.6vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(5vw, -25vh);
		        transform: translate(5vw, -25vh);
	}
	@-webkit-keyframes cherry-5 {
		from {-webkit-transform: translate(5vw, -25vh);transform: translate(5vw, -25vh);}
		to {-webkit-transform: translate(5vw, 25vh);transform: translate(5vw, 25vh);}
	}
	@keyframes cherry-5 {
		from {-webkit-transform: translate(5vw, -25vh);transform: translate(5vw, -25vh);}
		to {-webkit-transform: translate(5vw, 25vh);transform: translate(5vw, 25vh);}
	}
	.cherry-6 {
		position: absolute;
		background-image: url(/gui/cherry-6.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 13.8vmax;
		height: 19.9vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(43vw, 8vh);
		        transform: translate(43vw, 8vh);
	}
	@-webkit-keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 8vh);transform: translate(43vw, 8vh);}
		to {-webkit-transform: translate(43vw, 47vh);transform: translate(43vw, 47vh);}
	}
	@keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 8vh);transform: translate(43vw, 8vh);}
		to {-webkit-transform: translate(43vw, 47vh);transform: translate(43vw, 47vh);}
	}
}
@media (min-width: 992px) {
	.team-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 140px;
		padding-right: 25px;
		top: 50%;
		bottom: auto;
		-webkit-transform: translate(-50vw, -50%);
		        transform: translate(-50vw, -50%);
	}
	@-webkit-keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	@keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	.team-left h1 {
		text-transform: uppercase;
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
	}
	.team-left p {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.team-right {
		position: absolute;
		top: 0;
		left: initial;
		right: 0;
		width: 50%;
		height: 100%;
	}
	.img-holder {
		background-image: url(/gui/nas-tim.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		width: 100%;
		height: 70%;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-transform: translateY(-70vh);
		        transform: translateY(-70vh);
	}
	@-webkit-keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	@keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	.title-holder {
		position: absolute;
		bottom: 0;
		right: 0;
		left: auto;
		-webkit-transform: translate(50vw, -70px);
		        transform: translate(50vw, -70px);
	}
	@-webkit-keyframes title-holder {
		from {-webkit-transform: translate(50vw, -70px);transform: translate(50vw, -70px);}
		to {-webkit-transform: translate(-60px, -70px);transform: translate(-60px, -70px);}
	}
	@keyframes title-holder {
		from {-webkit-transform: translate(50vw, -70px);transform: translate(50vw, -70px);}
		to {-webkit-transform: translate(-60px, -70px);transform: translate(-60px, -70px);}
	}
	.cherry-5 {
		position: absolute;
		background-image: url(/gui/cherry-3.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 16.4vmax;
		height: 23.6vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(41vw, -25vh);
		        transform: translate(41vw, -25vh);
	}
	@-webkit-keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	@keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	.cherry-6 {
		position: absolute;
		background-image: url(/gui/cherry-6.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 13.8vmax;
		height: 19.9vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(43vw, 10vh);
		        transform: translate(43vw, 10vh);
	}
	@-webkit-keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
	@keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
}
@media (min-width: 1200px) {
	.team-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 25px;
		top: 50%;
        padding-top: 0;
		bottom: auto;
		-webkit-transform: translate(-50vw, -50%);
		        transform: translate(-50vw, -50%);
	}
	@-webkit-keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	@keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	.team-left h1 {
		text-transform: uppercase;
		font-size: 38px;
		font-family: segoeProBold, sans-serif;
	}
	.team-left p {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.team-right {
		position: absolute;
		top: 0;
		left: initial;
		right: 0;
		width: 50%;
		height: 100%;
	}
	.img-holder {
		background-image: url(/gui/nas-tim.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		width: 100%;
		height: 65%;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-transform: translateY(-70vh);
		        transform: translateY(-70vh);
	}
	@-webkit-keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	@keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	.title-holder {
		position: absolute;
		bottom: 0;
		right: 0;
		left: auto;
		-webkit-transform: translate(50vw, -50px);
		        transform: translate(50vw, -50px);
	}
	@-webkit-keyframes title-holder {
		from {-webkit-transform: translate(50vw, -50px);transform: translate(50vw, -50px);}
		to {-webkit-transform: translate(-60px, -50px);transform: translate(-60px, -50px);}
	}
	@keyframes title-holder {
		from {-webkit-transform: translate(50vw, -50px);transform: translate(50vw, -50px);}
		to {-webkit-transform: translate(-60px, -50px);transform: translate(-60px, -50px);}
	}
	.cherry-5 {
		position: absolute;
		background-image: url(/gui/cherry-3.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 16.4vmax;
		height: 23.6vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(41vw, -25vh);
		        transform: translate(41vw, -25vh);
	}
	@-webkit-keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	@keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	.cherry-6 {
		position: absolute;
		background-image: url(/gui/cherry-6.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 13.8vmax;
		height: 19.9vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(43vw, 10vh);
		        transform: translate(43vw, 10vh);
	}
	@-webkit-keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
	@keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
}
@media (min-width: 1600px) {
	.team-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 200px;
		padding-right: 100px;
		top: 50%;
		bottom: auto;
		-webkit-transform: translate(-50vw, -50%);
		        transform: translate(-50vw, -50%);
	}
	@-webkit-keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	@keyframes team-left {
		from {-webkit-transform: translate(-50vw, -50%);transform: translate(-50vw, -50%);}
		to {-webkit-transform: translate(0px, -50%);transform: translate(0px, -50%);}
	}
	.team-left h1 {
		text-transform: uppercase;
		font-size: 44px;
		font-family: segoeProBold, sans-serif;
	}
	.team-left p {
		font-size: 22px;
		margin-bottom: 15px;
	}
	.team-right {
		position: absolute;
		top: 0;
		left: initial;
		right: 0;
		width: 50%;
		height: 100%;
	}
	.img-holder {
		background-image: url(/gui/nas-tim.jpg);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: cover;
		width: 100%;
		height: 65%;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-transform: translateY(-70vh);
		        transform: translateY(-70vh);
	}
	@-webkit-keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	@keyframes img-holder {
		from {-webkit-transform: translateY(-70vh);transform: translateY(-70vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	.title-holder {
		position: absolute;
		bottom: 0;
		right: 0;
		left: auto;
		-webkit-transform: translate(50vw, -70px);
		        transform: translate(50vw, -70px);
	}
	@-webkit-keyframes title-holder {
		from {-webkit-transform: translate(50vw, -70px);transform: translate(50vw, -70px);}
		to {-webkit-transform: translate(-60px, -70px);transform: translate(-60px, -70px);}
	}
	@keyframes title-holder {
		from {-webkit-transform: translate(50vw, -70px);transform: translate(50vw, -70px);}
		to {-webkit-transform: translate(-60px, -70px);transform: translate(-60px, -70px);}
	}
	.cherry-5 {
		position: absolute;
		background-image: url(/gui/cherry-3.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 16.4vmax;
		height: 23.6vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(41vw, -25vh);
		        transform: translate(41vw, -25vh);
	}
	@-webkit-keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	@keyframes cherry-5 {
		from {-webkit-transform: translate(41vw, -25vh);transform: translate(41vw, -25vh);}
		to {-webkit-transform: translate(41vw, 6vh);transform: translate(41vw, 6vh);}
	}
	.cherry-6 {
		position: absolute;
		background-image: url(/gui/cherry-6.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		width: 13.8vmax;
		height: 19.9vh;
		top: 0;
		left: 0;
		-webkit-transform: translate(43vw, 10vh);
		        transform: translate(43vw, 10vh);
	}
	@-webkit-keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
	@keyframes cherry-6 {
		from {-webkit-transform: translate(43vw, 10vh);transform: translate(43vw, 10vh);}
		to {-webkit-transform: translate(43vw, 60vh);transform: translate(43vw, 60vh);}
	}
}

/*---TEAM END---*/


/*---SPECIALTY START---*/

.specialty-title {
	font-size: 22px;
	font-family: segoeProBold, sans-serif;
	text-transform: uppercase;
	position: absolute;
	top: 0;
	left: 0;
	padding-left: 65px;
	-webkit-transform: translateX(90vw);
	        transform: translateX(90vw);
}
.specialty-title-ani {
	-webkit-animation-name: specialty-title;
	        animation-name: specialty-title;
	-webkit-animation-duration: 2000ms;
	        animation-duration: 2000ms;
	-webkit-animation-delay: 2500ms;
	        animation-delay: 2500ms;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes specialty-title {
	from {-webkit-transform: translateX(90vw);transform: translateX(90vw);}
	to {-webkit-transform: translateX(0vw);transform: translateX(0vw);}
}
@keyframes specialty-title {
	from {-webkit-transform: translateX(90vw);transform: translateX(90vw);}
	to {-webkit-transform: translateX(0vw);transform: translateX(0vw);}
}

.specialty-holder {
	width: 100%;
	height: 80%;
	padding-left: 65px;
	padding-right: 25px;
	position: absolute;
	top: 10vh;
	left: 0;
}
.specialty-item {
	width: 100%;
	height: 14.285714%;
	position: relative;
}
.specialty-rect {
	height: 100%;
	background: silver;
	margin-bottom: 20px;
	cursor: pointer;
	position: relative;
	background-position: center;
	background-size: cover;

    display: block;
}

.item-title {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 16px;
	line-height: 1;
	padding-top: 10px;
	padding-right: 10px;
	text-transform: uppercase;
	text-align: right;
	color: #fff;
}

.even {
	-webkit-transform: translateY(-90vh);
	        transform: translateY(-90vh);
}
.even-ani {
	-webkit-animation-name: even;
	        animation-name: even;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes even {
	from {-webkit-transform: translateY(-90vh);transform: translateY(-90vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes even {
	from {-webkit-transform: translateY(-90vh);transform: translateY(-90vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}

.odd {
	-webkit-transform: translateY(100vh);
	        transform: translateY(100vh);
}
.odd-ani {
	-webkit-animation-name: odd;
	        animation-name: odd;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes odd {
	from {-webkit-transform: translateY(100vh);transform: translateY(100vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}
@keyframes odd {
	from {-webkit-transform: translateY(100vh);transform: translateY(100vh);}
	to {-webkit-transform: translateY(0);transform: translateY(0);}
}
@media (min-width: 768px) {
	.specialty-title {
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
		text-transform: uppercase;
		position: absolute;
		top: 0;
		left: 0px;
		padding-left: 90px;
		-webkit-transform: translateX(90vw);
		        transform: translateX(90vw);
	}
	@-webkit-keyframes specialty-title {
		from {-webkit-transform: translateX(90vw);transform: translateX(90vw);}
		to {-webkit-transform: translateX(0vw);transform: translateX(0vw);}
	}
	@keyframes specialty-title {
		from {-webkit-transform: translateX(90vw);transform: translateX(90vw);}
		to {-webkit-transform: translateX(0vw);transform: translateX(0vw);}
	}
	.specialty-holder {
		width: 100%;
		height: 80%;
		padding-left: 90px;
		padding-right: 50px;
	}
	.specialty-item {
		width: 100%;
		height: 14.285714%;
		float: left;
	}
	.specialty-rect {
		height: 100%;
		background: silver;
		margin-bottom: 0px;
		cursor: pointer;
		position: relative;
		background-position: center;
		background-size: cover;
	}
	.item-title {
		font-size: 20px;
		line-height: 1;
		padding-right: 10px;
		text-transform: uppercase;
		text-align: right;
	}
	.even {
		-webkit-transform: translateY(-80vh);
		        transform: translateY(-80vh);
	}
	@-webkit-keyframes even {
		from {-webkit-transform: translateY(-80vh);transform: translateY(-80vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	@keyframes even {
		from {-webkit-transform: translateY(-80vh);transform: translateY(-80vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}

	.odd {
		-webkit-transform: translateY(95vh);
		        transform: translateY(95vh);
	}
	@-webkit-keyframes odd {
		from {-webkit-transform: translateY(95vh);transform: translateY(95vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
	@keyframes odd {
		from {-webkit-transform: translateY(95vh);transform: translateY(95vh);}
		to {-webkit-transform: translateY(0);transform: translateY(0);}
	}
}
@media (min-width: 992px) {
	.specialty-title {
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
		text-transform: uppercase;
		position: absolute;
		top: 0;
		left: 50px;
		padding-left: 0;
		-webkit-transform: translate(10vw, -8vh);
		        transform: translate(10vw, -8vh);
	}
	@-webkit-keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	@keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	.specialty-holder {
		width: 100%;
		height: 33%;
		padding-left: 10vw;
		padding-right: 10vw;
		position: static;
	    top: auto;
	    left: auto;
	}
	.specialty-item {
		width: 14.285714%;
		height: 100%;
		float: left;
	}
	.specialty-rect {
		height: 100%;
		background: silver;
		margin-bottom: 0px;
		cursor: pointer;
		position: relative;
		background-position: center;
		background-size: cover;
	}
	.item-title {
		font-size: 15px;
		line-height: 1;
		padding-right: 10px;
		text-transform: uppercase;
		text-align: right;
		color: #777;
		position: static;
	}
}
@media (min-width: 1200px) {
	.specialty-title {
		font-size: 38px;
		font-family: segoeProBold, sans-serif;
		text-transform: uppercase;
		position: absolute;
		top: 0;
		left: 50px;
		padding-left: 0;
		-webkit-transform: translate(10vw, -8vh);
		        transform: translate(10vw, -8vh);
	}
	@-webkit-keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	@keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	.specialty-holder {
		width: 100%;
		height: 33%;
		padding-left: 10vw;
		padding-right: 10vw;
		position: static;
	    top: auto;
	    left: auto;
	}
	.specialty-item {
		width: 14.285714%;
		height: 100%;
		float: left;
	}
	.specialty-rect {
		height: 100%;
		background: silver;
		margin-bottom: 0px;
		cursor: pointer;
		position: relative;
		background-position: center;
		background-size: cover;
	}
	.item-title {
		font-size: 18px;
		line-height: 1;
		padding-right: 10px;
		text-transform: uppercase;
		text-align: right;
		color: #777;
		position: static;
	}
}
@media (min-width: 1600px) {
	.specialty-title {
		font-size: 44px;
		font-family: segoeProBold, sans-serif;
		text-transform: uppercase;
		position: absolute;
		top: 0;
		left: 50px;
		padding-left: 0;
		-webkit-transform: translate(10vw, -8vh);
		        transform: translate(10vw, -8vh);
	}
	@-webkit-keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	@keyframes specialty-title {
		from {-webkit-transform: translate(10vw, -8vh);transform: translate(10vw, -8vh);}
		to {-webkit-transform: translate(10vw, 22vh);transform: translate(10vw, 22vh);}
	}
	.specialty-holder {
		width: 100%;
		height: 33%;
		padding-left: 10vw;
		padding-right: 10vw;
		position: static;
	    top: auto;
	    left: auto;
	}
	.specialty-item {
		width: 14.285714%;
		height: 100%;
		float: left;
	}
	.specialty-rect {
		height: 100%;
		background: silver;
		margin-bottom: 0px;
		cursor: pointer;
		position: relative;
		background-position: center;
		background-size: cover;
	}
	.item-title {
		font-size: 20px;
		line-height: 1;
		padding-right: 10px;
		text-transform: uppercase;
		text-align: right;
		color: #777;
		position: static;
	}
}
.spec-1 {
	background-image: url(/gui/spec-design.jpg);
}
.spec-1::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #eed8db;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-1:hover:after {
	opacity: 0;
}
.spec-2 {
	background-image: url(/gui/spec-copy.jpg);
}
.spec-2::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #efa9b4;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-2:hover:after {
	opacity: 0;
}
.spec-3 {
	background-image: url(/gui/spec-web.jpg);
}
.spec-3::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #e87c8c;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-3:hover:after {
	opacity: 0;
}
.spec-4 {
	background-image: url(/gui/spec-goog.jpg);
}
.spec-4::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #df4f64;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-4:hover:after {
	opacity: 0;
}
.spec-5 {
	background-image: url(/gui/spec-social.jpg);
}
.spec-5::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #d83049;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-5:hover:after {
	opacity: 0;
}
.spec-6 {
	background-image: url(/gui/spec-promo.jpg);
}
.spec-6::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #d4223e;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-6:hover:after {
	opacity: 0;
}
.spec-7 {
	background-image: url(/gui/spec-fair.jpg);
}
.spec-7::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ad2132;
	opacity: 1;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
}
.spec-7:hover:after {
	opacity: 0;
}
/*---SPECIALTY END---*/

/*---DESIGN START---*/

.design-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #b81e45;
	-webkit-transform: translateX(100vw);
	        transform: translateX(100vw);
}
.design-cover-ani {
	-webkit-animation-name: design-cover;
	        animation-name: design-cover;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes design-cover {
	from {-webkit-transform: translateX(100vw);transform: translateX(100vw);}
	to {-webkit-transform: translateX(-100vw);transform: translateX(-100vw);}
}
@keyframes design-cover {
	from {-webkit-transform: translateX(100vw);transform: translateX(100vw);}
	to {-webkit-transform: translateX(-100vw);transform: translateX(-100vw);}
}
.design-white {
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	width: 100%;
	height: 50%;
	bottom: 0;
	overflow: hidden;
}
.design-white-ani {
	-webkit-animation-name: design-white;
	        animation-name: design-white;
	-webkit-animation-duration: 1.4s;
	        animation-duration: 1.4s;
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes design-white {
	from {width: 100%;}
	to {width: 0%;}
}
@keyframes design-white {
	from {width: 100%;}
	to {width: 0%;}
}
.design-white img {
	width: calc(100vw - 40px);
	position: absolute;
	top: 50%;
	left: 40px;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.design-back {
	position: absolute;
	top: 50%;
	right: 0px;
	height: 50%;
	-webkit-transform: translateX(40%);
	        transform: translateX(40%);
}
.design-back-ani {
	-webkit-animation-name: design-back;
	        animation-name: design-back;
	-webkit-animation-duration: 5s;
	        animation-duration: 5s;
	-webkit-animation-delay: 4s;
	        animation-delay: 4s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
}
@-webkit-keyframes design-back {
	from {-webkit-transform: translateX(40%);transform: translateX(40%);}
	50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
	50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
	to {-webkit-transform: translateX(40%);transform: translateX(40%);}
}
@keyframes design-back {
	from {-webkit-transform: translateX(40%);transform: translateX(40%);}
	50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
	50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
	to {-webkit-transform: translateX(40%);transform: translateX(40%);}
}
.design-back img {
	max-height: 100%;
}
.design-invert {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 40px;
	right: 0;
	width: auto;
	height: 50%;
	overflow: hidden;
}
.design-invert img {
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
.design h1 {
	text-align: right;
	text-transform: uppercase;
	font-size: 22px;
	font-family: segoeProBold, sans-serif;
}
.design p {
	text-align: right;
    font-size: 14px;
    margin-bottom: 5px;
}
.design-left {
	position: absolute;
	left: 0;
	width: 100%;
	padding-left: 65px;
	padding-right: 25px;
	top: 0;
	opacity: 0;
}
.design-left-ani {
	-webkit-animation-name: design-left;
	        animation-name: design-left;
	-webkit-animation-duration: 1.4s;
	        animation-duration: 1.4s;
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
@-webkit-keyframes design-left {
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes design-left {
	from {opacity: 0;}
	to {opacity: 1;}
}
.design-right {
	position: absolute;
	right: 0;
	width: 100%;
	padding-left: 65px;
	padding-right: 25px;
	top: 50%;
	padding-top: 15px;
	padding-bottom: 15px;
}

@media (min-width: 768px) {
	.design-white {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 50%;
		overflow: hidden;
	}
	@-webkit-keyframes design-white {
		from {width: 100%;}
		to {width: 0%;}
	}
	@keyframes design-white {
		from {width: 100%;}
		to {width: 0%;}
	}
	.design-white img {
		width: calc(100vw - 40px);
		position: absolute;
		top: 50%;
		left: 40px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.design-back {
		position: absolute;
		top: 50%;
		right: 0px;
		height: 50%;
		-webkit-transform: translateX(28%);
		        transform: translateX(28%);
	}
	@-webkit-keyframes design-back {
		from {-webkit-transform: translateX(28%);transform: translateX(28%);}
		50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
		50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
		to {-webkit-transform: translateX(28%);transform: translateX(28%);}
	}
	@keyframes design-back {
		from {-webkit-transform: translateX(28%);transform: translateX(28%);}
		50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
		50% {-webkit-transform: translateX(0%);transform: translateX(0%);}
		to {-webkit-transform: translateX(28%);transform: translateX(28%);}
	}
	.design-invert {
		position: absolute;
		top: 50%;
		left: auto;
		right: 0;
		width: 100%;
		height: 50%;
		overflow: hidden;
	}
	.design-invert img {
		width: calc(100% - 40px);
		position: absolute;
		top: 50%;
		left: 40px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.design h1 {
		text-align: right;
		text-transform: uppercase;
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
	}
	.design p {
		text-align: right;
	    font-size: 18px;
	    margin-bottom: 10px;
	}
	.design-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: auto;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	}
	.design-right {
		position: absolute;
		right: 0;
		width: 100%;
		padding-left: 90px;
		padding-right: 50px;
		top: 50%;
	}
}
@media (min-width: 992px) {
	.design-white {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	@-webkit-keyframes design-white {
		from {width: 100%;}
		to {width: 0%;}
	}
	@keyframes design-white {
		from {width: 100%;}
		to {width: 0%;}
	}
	.design-white img {
		width: 60vw;
		position: absolute;
		top: 50%;
		left: 40vw;
        transform: translateY(-50%);
	}
	.design-back {
		position: absolute;
		top: 0;
		right: 0px;
		height: 100%;
        transform: translateX(35%);
	}
	@keyframes design-back {
		from {transform: translateX(35%);}
		50% {transform: translateX(0%);}
		50% {transform: translateX(0%);}
		to {transform: translateX(35%);}
	}
	.design-invert {
		position: absolute;
		top: 0px;
		left: auto;
		right: 0;
		width: 60vw;
		height: 100%;
	}
	.design-invert img {
		width: 60vw;
		position: absolute;
		top: 50%;
		left: auto;
        transform: translateY(-50%);
	}
	.invert-add {
		position: absolute;
		left: 0;
		top: 0;
		width: 41vw;
		height: 100%;
		background-color: #fff;
	}
	.design h1 {
		text-align: right;
		text-transform: uppercase;
		font-size: 32px;
		font-family: segoeProBold, sans-serif;
	}
	.design p {
		text-align: right;
	    font-size: 16px;
	    margin-bottom: 10px;
	}
	.design-left {
		position: absolute;
		left: 0;
		width: 40%;
		padding-left: 140px;
		padding-right: 40px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.design-right {
		position: absolute;
		right: 0;
		width: 60%;
		padding-left: 50px;
		padding-right: 100px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
}
@media (min-width: 1200px) {
	.design h1 {
		text-align: right;
		text-transform: uppercase;
		font-size: 38px;
		font-family: segoeProBold, sans-serif;
	}
	.design p {
		text-align: right;
	    font-size: 18px;
	    margin-bottom: 10px;
	}
	.design-left {
		position: absolute;
		left: 0;
		width: 40%;
		padding-left: 150px;
		padding-right: 25px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.design-right {
		position: absolute;
		right: 0;
		width: 60%;
		padding-left: 50px;
		padding-right: 100px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
}
@media (min-width: 1600px) {
	.design h1 {
		text-align: right;
		text-transform: uppercase;
		font-size: 44px;
		font-family: segoeProBold, sans-serif;
	}
	.design p {
		text-align: right;
	    font-size: 22px;
	    margin-bottom: 15px;
	}
	.design-left {
		position: absolute;
		left: 0;
		width: 40%;
		padding-left: 150px;
		padding-right: 50px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
		opacity: 0;
	}
	.design-right {
		position: absolute;
		right: 0;
		width: 100%;
		top: 0;
		-webkit-transform: none;
		        transform: none;
	}
}

/*---DESIGN END---*/

/*---COPYWRITING START---*/

.copy h1 {
	text-align: right;
	text-transform: uppercase;
    font-size: 22px;
    font-family: segoeProBold, sans-serif;
}
.copy p {
	text-align: right;
	font-size: 15px;
    margin-bottom: 5px;
}
.copy-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 65px;
	padding-right: 25px;
	top: 0;
/*	transform: translateY(-50%);	*/
}
.copy-right {
	position: absolute;
	right: 0;
	width: 100%;
	height: 50%;
	top: 50%;
	padding-left: 65px;
	padding-right: 25px;
/*	transform: translateY(-50%);	*/
}
.copy-right img {
	max-height: 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.copy h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
	.copy p {
		text-align: right;
		font-size: 18px;
	    margin-bottom: 10px;
	}
	.copy-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	/*	transform: translateY(-50%);	*/
	}
	.copy-right {
		position: absolute;
		right: 0;
		width: 100%;
		height: 50%;
		top: 50%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.copy-right img {
		max-height: 100%;
		max-width: auto;
	}
}
@media (min-width: 992px) {
	.copy-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 140px;
		padding-right: 0px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy-right {
		position: absolute;
		right: 0;
		width: 50%;
		height: initial;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
	.copy p {
		text-align: right;
		font-size: 16px;
	    margin-bottom: 10px;
	}
	.copy-right img {
		max-height: auto;
		max-width: 100%;
	}
}
@media (min-width: 1200px) {
	.copy-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 25px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy-right {
		position: absolute;
		right: 0;
		width: 50%;
		height: initial;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 38px;
	    font-family: segoeProBold, sans-serif;
	}
	.copy p {
		text-align: right;
		font-size: 18px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1600px) {
	.copy-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 50px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy-right {
		position: absolute;
		right: 0;
		width: 50%;
		height: initial;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.copy h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 44px;
	    font-family: segoeProBold, sans-serif;
	}
	.copy p {
		text-align: right;
		font-size: 22px;
	    margin-bottom: 15px;
	}
}

/*---COPYWRITING END---*/

/*---WEB START---*/

.web h1 {
	text-align: right;
	text-transform: uppercase;
    font-size: 22px;
    font-family: segoeProBold, sans-serif;
}
.web p {
	text-align: right;
	font-size: 14px;
    margin-bottom: 5px;
}
.web-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 60px;
	padding-right: 30px;
	top: 0;
    transform: translate(-100%, 0);
}
.web-left-ani {
    animation-name: web-left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes web-left {
	from {transform: translate(-100%, 0);}
	to {transform: translate(0, 0);}
}
.web-right {
	position: absolute;
	right: 0;
	width: 100%;
	height: 50%;
	top: 50%;
	padding-left: 65px;
	padding-right: 25px;
    transform: translateX(100%);
}
.web-right-ani {
    animation-name: web-right;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes web-right {
	from {transform: translateX(100%);}
	to {transform: translateX(0);}
}
.web-cover {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    background-color: #b62248;
    transform: skewX(155deg) translateX(100%);
    transform-origin: 50% 200%;
}
.web-cover-ani {
    animation-name: web-cover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes web-cover {
	from {transform: skewX(155deg) translateX(100%);}
	to {transform: skewX(155deg) translateX(0);}
}
.web-right img {
    position: relative;
    top: 50%;
   /*  transform: translateY(-50%); */
}
@media (min-width: 768px) {
	.web h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
	.web p {
		text-align: right;
		font-size: 18px;
	    margin-bottom: 10px;
	}
	.web-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	}
	.web-right {
		position: absolute;
		right: 0;
		width: 100%;
		height: 50%;
		top: 50%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
    .web-cover {
        position: absolute;
        width: 50%;
        height: 100%;
        top: 50%;
        left: 50%;
        background-color: #b62248;
        transform: skewX(155deg) translateX(100%);
        transform-origin: 50% 50%;
    }
}
@media (min-width: 992px) {
	.web-left {
		position: absolute;
		left: 0;
		width: 45%;
		height: auto;
		padding-left: 140px;
		padding-right: 0px;
		top: 50%;
        transform: translate(-100%, -50%);
	}
    @keyframes web-left {
    	from {transform: translate(-100%, -50%);}
    	to {transform: translate(0, -50%);}
    }
	.web-right {
		position: absolute;
		right: 0;
		width: 55%;
		height: auto;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
        transform: translate(100%, -50%);
	}
    @keyframes web-right {
        from {transform: translate(100%, -50%);}
        to {transform: translate(0, -50%);}
    }
    .web-cover {
        width: 100%;
        height: 100%;
        top: 0;
        left: 45%;
        background-color: #b62248;
        transform: skewX(155deg) translateX(100%);
        transform-origin: 50% 120%;
    }
	.web h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
	.web p {
		text-align: right;
		font-size: 16px;
	    margin-bottom: 10px;
	}
	.web-right img {
        position: static;
        transform: none;
	}
}
@media (min-width: 1200px) {
	.web-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 25px;
		top: 50%;
        transform: translate(-100%, -50%);
	}
	.web-right {
		position: absolute;
		right: 0;
		width: 50%;
		height: initial;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
        transform: translate(100%, -50%);
	}
    .web-cover {
        width: 100%;
        height: 100%;
        top: 0;
        left: 45%;
        background-color: #b62248;
        transform: skewX(155deg) translateX(100%);
        transform-origin: 50% 150%;
    }
	.web h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 38px;
	    font-family: segoeProBold, sans-serif;
	}
	.web p {
		text-align: right;
		font-size: 18px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1600px) {
	.web-left {
		position: absolute;
		left: 0;
		width: 45%;
		height: auto;
		padding-left: 150px;
		padding-right: 50px;
		top: 50%;
        transform: translate(-100%, -50%);
	}
	.web-right {
		position: absolute;
		right: 0;
		width: 55%;
		height: 100%;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
        transform: translateY(100%, -50%);
	}

    .web-cover {
        width: 100%;
        height: 100%;
        background-color: #b62248;
        transform: skewX(155deg) translateX(100%);
        transform-origin: 50% 150%;
    }
    .web-right img {
        position: absolute;
        top: 50%;
       
    }
	.web h1 {
		text-align: right;
		text-transform: uppercase;
	    font-size: 44px;
	    font-family: segoeProBold, sans-serif;
	}
	.web p {
		text-align: right;
		font-size: 22px;
	    margin-bottom: 15px;
	}
}

/*---WEB END---*/


/*---GOOGLE START---*/

.goog-center {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 45px;
    padding-right: 25px;
    top: 0;
}
.google-logo-holder {
    width: 160px;
    margin: 80px auto 10px;
}
.google-search-holder {
    width: 90%;
    margin: 8px auto;
}
.google-search-bar {
    position: relative;
    height: 40px;
    width: 100%;
    border: 1px solid #dfe1e5;
    padding-left: 10px;
    padding-right: 40px;
    /* font-family: "segoeProBold", sans-serif; */
    font-family: 'Roboto Mono', monospace;
}
.google-search-content {
    line-height: 38px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    margin: 0;
    width: 0px;
    font-weight: 400;
}
.google-search-content-ani {
    animation: typing 3.5s steps(27, end);
    animation-fill-mode: forwards;
}
@keyframes typing {
  from { width: 0% }
  to { width: 210px }
}
.loupe-holder {
    position: absolute;
    top: 0;
    right: 0;
    background-image: url('/gui/search.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    margin: 11px;
}
.google-results-holder {
    width: 90%;
    margin: auto;
    opacity: 0;
}
.google-results-holder-ani {
    opacity: 1;
    transition: opacity 1s;
    transition-delay: 3.5s;
}
.google-results-box {
    border: 1px solid #dfe1e5;
    padding: 10px 10px 0px;
    font-size: 16px;
}
.google-bagde-holder {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .goog-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 60px;
        padding-right: 25px;
        top: 0;
    }
    .google-logo-holder {
        width: 272px;
        margin: 142px auto 23px;
    }
    .google-search-content {
        font-size: 16px;
    }
    @keyframes typing {
      from { width: 0% }
      to { width: 260px }
    }
    .google-bagde-holder {
        margin-top: 200px;
    }
}
@media (min-width: 992px) {
    .google-search-holder {
        width: 70%;
    }
    .google-results-holder {
        width: 70%;
    }
    .google-bagde-holder {
        margin-top: 125px;
    }
}
@media (min-width: 1200px) {
    .google-logo-holder {
        width: 272px;
        margin: 140px auto 10px;
    }
    .google-search-holder {
        width: 584px;
    }
    .google-results-holder {
        width: 584px;
    }
    .google-bagde-holder {
        margin-top: 75px;
    }
}
@media (min-width: 1600px) {
    .google-logo-holder {
        width: 320px;
        margin: 140px auto 10px;
    }
    .google-bagde-holder {
        margin-top: 175px;
    }
}

/*---GOOGLE END---*/


/*---SOCIAL START---*/

.social-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 65px;
	padding-right: 25px;
	top: 0;
}
.social-background {
    position: absolute;
    left: 40px;
    right: 0;
    height: 50%;
    top: 50%;
    background-color: #35518b;
    transform: translateX(100%);
}
.social-background-ani {
    animation-name: social-background;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes social-background {
	from {transform: translateX(100%);}
	to {transform: translateX(0);}
}
.social-right {
	position: absolute;
    left: 40px;
	right: 0;
	height: 50%;
	bottom: 0;
}
.social-items {
    float: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.social-item {
    float: left;
    width: 250px;
    margin-bottom: 25px;
}
.social-item:last-of-type {
    margin: 0;
}
.social-item img {
    width: 60px;
    vertical-align: sub;
}


.social h1 {
	text-transform: uppercase;
    font-size: 22px;
    font-family: segoeProBold, sans-serif;
}
.social h2 {
    font-size: 14px;
    font-family: segoeProBold, sans-serif;
}
.social p {
	font-size: 14px;
    margin-bottom: 5px;
}
.social-item span {
    display: inline-block;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 1px solid #fff;
    margin-left: 10px;
    padding-left: 10px;
    font-size: 18px;
}

.social-item span strong {
    font-family: "segoeProMedium", sans-serif;
}

.social-img-1 {
    transform: translateX(80vw);
}
.social-img-1-ani {
    animation-name: social-img-1;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes social-img-1 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}
.social-img-2 {
    transform: translateX(80vw);
}
.social-img-2-ani {
    animation-name: social-img-2;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 1.75s;
}
@keyframes social-img-2 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}
.social-img-3 {
    transform: translateX(80vw);
}
.social-img-3-ani {
    animation-name: social-img-3;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
}
@keyframes social-img-3 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}

.social-title-1 {
    transform: translateX(80vw);
}
.social-title-1-ani {
    animation-name: social-title-1;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 3.25s;
}
@keyframes social-title-1 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}
.social-title-2 {
    transform: translateX(80vw);
}
.social-title-2-ani {
    animation-name: social-title-2;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}
@keyframes social-title-2 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}
.social-title-3 {
    transform: translateX(80vw);
}
.social-title-3-ani {
    animation-name: social-title-3;
    animation-duration: .75s;
    animation-fill-mode: forwards;
    animation-delay: 4.75s;
}
@keyframes social-title-3 {
	from {transform: translateX(80vw);}
	to {transform: translateX(0);}
}

@media (min-width: 768px) {
	.social h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .social h2 {
        font-size: 18px;
        font-family: segoeProBold, sans-serif;
    }
	.social p {
		font-size: 18px;
	    margin-bottom: 10px;
	}
	.social-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	/*	transform: translateY(-50%);	*/
	}
	.social-right {
		position: absolute;
		right: 0;
		width: 100%;
		height: 50%;
		top: 50%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
}
@media (min-width: 992px) {
	.social-left {
		position: absolute;
		left: 0;
		width: 65%;
		height: auto;
		padding-left: 120px;
		padding-right: 60px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
    .social-background {
        position: absolute;
        left: 65%;
        right: 0;
        height: 100%;
        top: 0;
        background-color: #35518b;
    }
	.social-right {
		position: absolute;
		right: 0;
		width: 35%;
        height: 100%;
		top: 50%;
        left: auto;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.social h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .social h2 {
        font-size: 16px;
        font-family: segoeProBold, sans-serif;
    }
	.social p {
		font-size: 16px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1200px) {
	.social-left {
		position: absolute;
		left: 0;
		width: 65%;
		height: auto;
		padding-left: 120px;
		padding-right: 60px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
    .social-background {
        position: absolute;
        left: 65%;
        right: 0;
        height: 100%;
        top: 0;
        background-color: #35518b;
    }
	.social-right {
		position: absolute;
		right: 0;
		width: 35%;
        height: 100%;
		top: 50%;
        left: auto;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
    .social-item {
        float: left;
        width: 305px;
        margin-bottom: 60px;
    }
    .social-item:last-of-type {
        margin: 0;
    }
    .social-item img {
        width: 80px;
        vertical-align: sub;
    }
    .social-item span {
        font-size: 24px;
    }
	.social h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .social h2 {
        font-size: 16px;
        font-family: segoeProBold, sans-serif;
    }
	.social p {
		font-size: 16px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1600px) {
	.social-left {
		position: absolute;
		left: 0;
		width: 70%;
		height: auto;
		padding-left: 150px;
		padding-right: 50px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
    .social-background {
        position: absolute;
        left: 70%;
        right: 0;
        height: 100%;
        top: 0;
        background-color: #35518b;
    }
	.social-right {
		position: absolute;
		right: 0;
		width: 30%;
		height: 100%;
		top: 50%;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 50px;
		padding-right: 50px;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
    .social-item {
        float: left;
        width: 335px;
        margin-bottom: 75px;
    }
    .social-item:last-of-type {
        margin: 0;
    }
    .social-item img {
        width: 95px;
        vertical-align: sub;
    }
    .social-item span {
        font-size: 26px;
    }
	.social h1 {
		text-transform: uppercase;
	    font-size: 44px;
	    font-family: segoeProBold, sans-serif;
	}
    .social h2 {
        font-size: 22px;
        font-family: segoeProBold, sans-serif;
    }
	.social p {
		font-size: 22px;
	    margin-bottom: 15px;
	}
}

/*---SOCIAL END---*/


/*---PROMO START---*/

.promo h1 {
	text-transform: uppercase;
    font-size: 22px;
    font-family: segoeProBold, sans-serif;
}
.promo h2 {
    font-size: 14px;
    font-family: segoeProBold, sans-serif;
}
.promo p {
	font-size: 14px;
    margin-bottom: 5px;
}
.promo-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse at 50% 75%, #01b0d8, #134d7f);
    transform: translateX(100%);
}
.promo-background-ani {
    animation-name: promo-background;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes promo-background {
	from {transform: translateX(100%);}
	to {transform: translateX(0);}
}

.promo-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 65px;
	padding-right: 25px;
	top: 0;
    color: #fff;
    transform: translateX(-100%);
}
.promo-left-ani {
    animation-name: promo-left;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes promo-left {
	from {transform: translateX(-100%);}
	to {transform: translateX(0);}
}
.promo-right {
	position: absolute;
	right: 0;
	width: 100%;
	height: 50%;
	top: 50%;
	padding-left: 65px;
	padding-right: 25px;
    transform: translateX(100%);
}
.promo-right-ani {
    animation-name: promo-right;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes promo-right {
	from {transform: translateX(100%);}
	to {transform: translateX(0);}
}
.promo-right img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    max-height: 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
	.promo h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .promo h2 {
        font-size: 18px;
        font-family: segoeProBold, sans-serif;
    }
	.promo p {
		font-size: 18px;
	    margin-bottom: 10px;
	}
	.promo-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	/*	transform: translateY(-50%);	*/
	}
	.promo-right {
		position: absolute;
		right: 0;
		width: 100%;
		height: 50%;
		top: 50%;
	}
}
@media (min-width: 992px) {
    .promo-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(ellipse at 50% 75%, #01b0d8, #134d7f);
        transform: translateX(100%);
    }
    .promo-background-ani {
        animation-name: promo-background;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
    }
    @keyframes promo-background {
    	from {transform: translateX(100%);}
    	to {transform: translateX(0);}
    }
	.promo-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 120px;
		padding-right: 0;
		top: 50%;
        transform: translate(-100%, -50%);
	}
    .promo-left-ani {
        animation-name: promo-left;
        animation-duration: 1.5s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
    @keyframes promo-left {
    	from {transform: translate(-100%, -50%);}
    	to {transform: translate(0, -50%);}
    }
	.promo-right {
		position: absolute;
		right: 0;
		width: 50%;
        height: 106%;
		top: 47%;
        left: auto;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
        transform: translate(100%, -50%);
	}

    .promo-right-ani {
        animation-name: promo-right;
        animation-duration: 1.5s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
    @keyframes promo-right {
    	from {transform: translate(100%, -50%);}
    	to {transform: translate(0, -50%);}
    }
	.promo h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .promo h2 {
        font-size: 16px;
        font-family: segoeProBold, sans-serif;
    }
	.promo p {
		font-size: 16px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1600px) {
	.promo h1 {
		text-transform: uppercase;
	    font-size: 44px;
	    font-family: segoeProBold, sans-serif;
	}
    .promo h2 {
        font-size: 22px;
        font-family: segoeProBold, sans-serif;
    }
	.promo p {
		font-size: 22px;
	    margin-bottom: 15px;
	}
}

/*---PROMO END---*/

/*---FAIR START---*/

.fair {
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-image: url('/gui/fair-v.jpg');
}
.fair h1 {
	text-transform: uppercase;
    font-size: 22px;
    font-family: segoeProBold, sans-serif;
}
.fair h2 {
    font-size: 14px;
    font-family: segoeProBold, sans-serif;
}
.fair p {
	font-size: 14px;
    margin-bottom: 5px;
}
.fair-left {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	padding-left: 65px;
	padding-right: 25px;
	top: 0;
}
@media (min-width: 768px) {
	.fair h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .fair h2 {
        font-size: 18px;
    }
	.fair p {
		font-size: 18px;
	    margin-bottom: 10px;
	}
	.fair-left {
		position: absolute;
		left: 0;
		width: 100%;
		height: 50%;
		padding-left: 80px;
		padding-right: 50px;
		top: 0;
	}
}
@media (min-width: 992px) {
    .fair {
        background-position: center;
        background-image: url('/gui/fair-h.jpg');
    }
	.fair-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 140px;
		padding-right: 0px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.fair h1 {
		text-transform: uppercase;
	    font-size: 32px;
	    font-family: segoeProBold, sans-serif;
	}
    .fair h2 {
        font-size: 16px;
    }
	.fair p {
		font-size: 16px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1200px) {
	.fair-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 25px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.fair h1 {
		text-transform: uppercase;
	    font-size: 38px;
	    font-family: segoeProBold, sans-serif;
	}
    .fair h2 {
        font-size: 18px;
    }
	.fair p {
		font-size: 18px;
	    margin-bottom: 10px;
	}
}
@media (min-width: 1600px) {
    .fair {
        background-position: right center;
    }
	.fair-left {
		position: absolute;
		left: 0;
		width: 50%;
		height: auto;
		padding-left: 150px;
		padding-right: 50px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
	}
	.fair h1 {
		text-transform: uppercase;
	    font-size: 44px;
	    font-family: segoeProBold, sans-serif;
	}
    .fair h2 {
        font-size: 22px;
    }
	.fair p {
		font-size: 22px;
	    margin-bottom: 15px;
	}
}
/*---FAIR END---*/


/*---PORTFOLIO START---*/

.portfolio-center {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    top: 0;
}
.portfolio-list-holder {
    height: 100%;
}
.portfolio-list-holder > .portfolio-item-holder {
    padding: 4px;
    /* height: 8.10%; */
    height: 7.70%;
}
.portfolio-list-item {
    background-color: #f5f5f5;
    height: 100%;
    padding: 4px;
    cursor: pointer;
}
.portfolio-list-item:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
}
.portfolio-list-item > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.slick-dots{
	display: none !important
}

@media (min-width: 768px) {
    .portfolio-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 60px;
        padding-right: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
        top: 0;
    }
    .portfolio-list-holder > .portfolio-item-holder {
        padding: 10px;
        height: 10.30%;
    }
    .portfolio-list-item {
        height: 100%;
        padding: 8px;
    }
    .slick-dots{
    	display: none !important;
    }
}
@media (min-width: 992px) {
    .portfolio-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 110px;
        padding-right: 60px;
        padding-top: 40px;
        padding-bottom: 40px;
        top: 0;
    }
    .portfolio-list-holder > .portfolio-item-holder {
        padding: 10px;
        height: 15%;
    }
    .portfolio-list-item {
        height: 100%;
        padding: 10px;
    }
    .slick-dots{
	display: block !important;
	}
}
@media (min-width: 1200px) {
    .portfolio-list-item {
        height: 100%;
        padding: 12px;
    }
    .slick-dots{
	display: block !important;
	}
}
@media (min-width: 1600px) {
    .portfolio-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 120px;
        padding-right: 70px;
        padding-top: 70px;
        padding-bottom: 80px;
        top: 0;
    }
    .portfolio-list-item {
        padding: 25px 20px;
    }
    .slick-dots{
	display: block !important;
	}
}

/*---PORTFOLIO END---*/

/*---CAROUSEL MOD START---*/

.carousel-back-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, .5);
    z-index: 101;
}
.carousel-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 10px 60px 0px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
    z-index: 102;
    width: 94%;
}
.slick-list,
.slick-track,
.slick-slide h3 {
   height: 100%;
}
.slick-slide {
    display: none;
    float: left;
    height: 330px;
    min-height: 1px;
    padding: 10px;
}
.slick-slide img {
    max-height: 100%;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev {
    left: -50px;
}
.slick-next {
    right: -50px;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: #ccc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
    .carousel-holder {
        width: 80%;
    }
    .slick-slide {
        height: 420px;
    }
}
@media (max-width: 1450px) {

	/* .team-list-item { */
		/* height: 155px; */
	/* } */
	.font-size-9 {
		font-size: 12px !important;
	}
}
@media (max-width: 400px) {
	/* .team-list-item {
		height: 90px;
	} */
	/* .font-size-9 { */
		/* font-size: 9px !important; */
	/* } */
}
@media (min-width: 992px) {
    .carousel-holder {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 10px 60px 0px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
        width: 800px;
	}
}

/*---CAROUEL MOD END---*/

/*---TEAM START---*/

.team-center {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    padding-right: 20px;
    top: 0;
    font-family: "segoeProMedium", sans-serif;
}
.team-list-holder {
    position: absolute;
    width: calc(100% - 60px);
    top: 50%;
    transform: translateY(-50%);
}
.team-list-holder > .team-item-holder {
    padding-right: 5px;
    padding-left: 5px;
}
.team-list-item {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
}
.team-list-item > h2 {
    font-size: 14px;
    line-height: 16px;
    height: 32px;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #b62248;
    text-align: center;
}
.team-list-item > h3 {
    display: none;
}
.team-list-item > img {
    max-width: 75%;
}
/*Rez za iphone 5s*/
@media (min-width: 320px) {
     .team-list-item > img {
        max-width: 62%;
    }   
}

@media (min-width: 768px) {
    .team-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 50px;
        padding-right: 50px;
        top: 0;
        font-family: "segoeProMedium", sans-serif;
    }
    .team-list-holder {
        position: absolute;
        width: calc(100% - 100px);
        top: 50%;
        transform: translateY(-50%);
    }
    .team-list-item {
        position: relative;
        padding: 5px;
    }
    .team-list-item > h2 {
        font-size: 18px;
        line-height: 20px;
        height: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        color: #b62248;
        text-align: center;
    }
    .team-list-item > h3 {
        display: block;
        font-size: 14px;
        margin: 0;
        line-height: 1;
        text-align: center;
    }
    .team-list-item > img {
/*        max-width: 70%; original*/
        max-width: 45%;
    }
}



@media (min-width: 992px) {
    .team-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 70px;
        padding-right: 50px;
        top: 0;
        font-family: "segoeProMedium", sans-serif;
    }
    .team-list-holder {
        position: absolute;
        width: calc(100% - 120px);
        top: 50%;
        transform: translateY(-50%);
    }
    .team-list-item {
        position: relative;
        padding: 15px;
    }
    .team-list-item > h2 {
        font-size: 16px;
        line-height: 20px;
        height: 40px;
        margin-top: 0px;
        margin-bottom: 0px;
        color: #b62248;
        text-align: center;
    }
    .team-list-item > h3 {
        display: block;
        font-size: 14px;
        margin: 0;
        line-height: 1;
        text-align: center;
    }
    .team-list-item > img {
        max-width: 55%;
    }
}
@media (min-width: 1200px) {
    .team-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 70px;
        padding-right: 50px;
        top: 0;
        font-family: "segoeProMedium", sans-serif;
    }
    .team-list-holder {
        position: absolute;
        width: calc(100% - 120px);
        top: 50%;
        transform: translateY(-50%);
    }
    .team-list-item {
        position: relative;
        padding: 15px;
    }
    .team-list-item > h2 {
        font-size: 18px;
        margin-bottom: 2px;
        height: auto;
    }
    .team-list-item > h3 {
        display: block;
        font-size: 14px;
        margin: 0;
        line-height: 1;
        text-align: center;
    }
    .team-list-item > img {
/*        max-width: 53%;*/
/*        70% original*/
         max-width: 45%;
    }
}
@media (min-width: 1600px) {
    .team-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 70px;
        padding-right: 50px;
        top: 0;
        font-family: "segoeProMedium", sans-serif;
    }
    .team-list-holder {
        position: absolute;
        width: calc(100% - 120px);
        top: 50%;
        transform: translateY(-50%);
    }
    .team-list-item {
        position: relative;
        padding: 15px;
    }
    .team-list-item > h2 {
        font-size: 21px;
        margin-top: 0px;
        margin-bottom: 0px;
        color: #b62248;
        text-align: center;
    }
    .team-list-item > h3 {
        display: block;
        font-size: 16px;
        margin: 0;
        line-height: 1;
        text-align: center;
    }
    .team-list-item > img {
        max-width: 40%;
    }
}

/*---TEAM END---*/

/*---CONTACT START---*/

.contact-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 65px;
    padding-right: 25px;

    background-image: url('/gui/Mapa.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.contact-right {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background-color: #b81f46;
    color: #fff;
    transform: translateX(100%);
}
.contact-right-ani {
    animation-name: contact-right-ani;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes contact-right-ani {
	from {transform: translateX(100%);}
	to {transform: translateX(0%);}
}
.contact-right-content {
    position: absolute;
    top: 55%;
    left: 60px;
    transform: translate(100%, -50%);
    padding-right: 40px;
}
.contact-right-content-ani {
    animation-name: contact-right-content-ani;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 1s;
}
@keyframes contact-right-content-ani {
	from {transform: translate(100%, -50%);}
	to {transform: translate(0%, -50%);}
}
.contact-right h1 {
    font-family: "segoeProMedium", sans-serif;
    font-size: 22px;
    border-bottom: 2px solid #fff;
    padding-bottom: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}
.contact-right h2 {
    font-family: "segoeProMedium", sans-serif;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 5px;
}
.contact-right span {
    font-size: 14px;
    display: block;
    width: 100%;
}
.contact-right p {
    font-size: 14px;
    margin-bottom: 15px;
}
.social-link {
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    padding: 6px;
    margin-top: 20px;
    margin-right: 10px;
    transition: transform .5s;
}
.social-link:hover {
    color: #fff;
    text-decoration: none;
    transform: scale(1.1);
}

.cherry-8 {
	position: absolute;
	background-image: url(/gui/cherry-2.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 13.3vmax;
	height: 10vmax;
	top: 6vh;
	left: 43vw;
    transform: translateY(-25vh);
}
.cherry-8-ani {
    animation-name: cherry-8;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
@keyframes cherry-8 {
	from {transform: translateY(-25vh);}
	to {transform: translateY(0);}
}
.cherry-9 {
	position: absolute;
	background-image: url(/gui/cherry-9.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 10.5vmax;
	height: 8vmax;
	bottom: 7vh;
	right: 5vw;
    transform: translateX(22vw);
}
.cherry-9-ani {
    animation-name: cherry-9;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
@keyframes cherry-9 {
	from {transform: translateX(22vw);}
	to {transform: translate(0);}
}

@media (min-width: 768px) {
    .contact-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 65px;
        padding-right: 25px;
        top: 0;

        background-image: url('/gui/Mapa.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .contact-right {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 100%;
    	height: 100%;
        background-color: #b81f46;
        color: #fff;
        transform: translateX(100%);
    }
    .contact-right-ani {
        animation-name: contact-right-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
    @keyframes contact-right-ani {
    	from {transform: translateX(100%);}
    	to {transform: translateX(0%);}
    }
    .contact-right-content {
        position: absolute;
        top: 55%;
        left: 80px;
        transform: translate(100%, -50%);
        padding-right: 100px;
    }
    .contact-right-content-ani {
        animation-name: contact-right-content-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 1s;
    }
    @keyframes contact-right-content-ani {
    	from {transform: translate(100%, -50%);}
    	to {transform: translate(0%, -50%);}
    }
    .contact-right h1 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 32px;
        border-bottom: 2px solid #fff;
        padding-bottom: 25px;
        margin-top: 0;
        margin-bottom: 15px;
    }
    .contact-right h2 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 20px;
        margin-top: 40px;
    }
    .contact-right span {
        font-size: 18px;
        display: inline-block;
        width: 100%;
    }
    .contact-right p {
        font-size: 18px;
        margin-bottom: 25px;
    }
    .cherry-8 {
    	position: absolute;
    	background-image: url(/gui/cherry-2.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 13.3vmax;
    	height: 10vmax;
    	top: 6vh;
    	left: 43vw;
        transform: translateY(-25vh);
    }
    .cherry-8-ani {
        animation-name: cherry-8;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-8 {
    	from {transform: translateY(-25vh);}
    	to {transform: translateY(0);}
    }
    .cherry-9 {
    	position: absolute;
    	background-image: url(/gui/cherry-9.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 10.5vmax;
    	height: 8vmax;
    	bottom: 7vh;
    	right: 3vw;
        transform: translateX(12vw);
    }
    .cherry-9-ani {
        animation-name: cherry-9;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-9 {
    	from {transform: translateX(12vw);}
    	to {transform: translate(0);}
    }
}
@media (min-width: 992px) {
    .contact-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 65px;
        padding-right: 25px;
        top: 0;

        background-image: url('/gui/Mapa.png');
        background-repeat: no-repeat;
        background-size: cover;
/*        background-position: center;*/
         background-position: left;
    }
    .contact-right {
    	position: absolute;
    	top: 0;
        left: auto;
    	right: 0;
    	width: 50%;
    	height: 100%;
        background-color: #b81f46;
        color: #fff;
        transform: translateX(100%);
    }
    .contact-right-ani {
        animation-name: contact-right-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
    @keyframes contact-right-ani {
    	from {transform: translateX(100%);}
    	to {transform: translateX(0%);}
    }
    .contact-right-content {
        position: absolute;
        top: 55%;
        left: 50px;
        transform: translate(100%, -50%);
        padding-right: 60px;
    }
    .contact-right-content-ani {
        animation-name: contact-right-content-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 1s;
    }
    @keyframes contact-right-content-ani {
    	from {transform: translate(100%, -50%);}
    	to {transform: translate(0%, -50%);}
    }
    .contact-right h1 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 32px;
        border-bottom: 2px solid #fff;
        padding-bottom: 25px;
        margin-top: 0;
        margin-bottom: 15px;
    }
    .contact-right h2 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 18px;
        margin-top: 40px;
    }
    .contact-right span {
        font-size: 16px;
        display: inline-block;
        width: 100%;
    }
    .contact-right p {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .cherry-8 {
    	position: absolute;
    	background-image: url(/gui/cherry-2.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 13.3vmax;
    	height: 10vmax;
    	top: 6vh;
    	left: 43vw;
        transform: translateY(-25vh);
    }
    .cherry-8-ani {
        animation-name: cherry-8;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-8 {
    	from {transform: translateY(-25vh);}
    	to {transform: translateY(0);}
    }
    .cherry-9 {
    	position: absolute;
    	background-image: url(/gui/cherry-9.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 10.5vmax;
    	height: 8vmax;
    	bottom: 7vh;
    	right: 3vw;
        transform: translateX(12vw);
    }
    .cherry-9-ani {
        animation-name: cherry-9;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-9 {
    	from {transform: translateX(12vw);}
    	to {transform: translate(0);}
    }
}
@media (min-width: 1200px) {
    .contact-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 65px;
        padding-right: 25px;
        top: 0;

        background-image: url('/gui/Mapa.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .contact-right {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 50%;
    	height: 100%;
        background-color: #b81f46;
        color: #fff;
        transform: translateX(100%);
    }
    .contact-right-ani {
        animation-name: contact-right-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
    @keyframes contact-right-ani {
    	from {transform: translateX(100%);}
    	to {transform: translateX(0%);}
    }
    .contact-right-content {
        position: absolute;
        top: 55%;
        left: 50px;
        transform: translate(100%, -50%);
        padding-right: 150px;
    }
    .contact-right-content-ani {
        animation-name: contact-right-content-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 1s;
    }
    @keyframes contact-right-content-ani {
    	from {transform: translate(100%, -50%);}
    	to {transform: translate(0%, -50%);}
    }
    .contact-right h1 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 34px;
        border-bottom: 2px solid #fff;
        padding-bottom: 25px;
        margin-top: 0;
        margin-bottom: 15px;
    }
    .contact-right h2 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 20px;
        margin-top: 35px;
    }
    .contact-right span {
        font-size: 18px;
        display: inline-block;
        width: 100%;
    }
    .contact-right p {
        font-size: 18px;
        margin-bottom: 25px;
    }
    .social-link {
        display: inline-block;
        border: 3px solid #fff;
        border-radius: 50%;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        font-size: 32px;
        line-height: 40px;
        padding: 6px;
        margin-top: 30px;
        margin-right: 10px;
        transition: transform .5s;
    }
    .social-link:hover {
        color: #fff;
        text-decoration: none;
        transform: scale(1.1);
    }

    .cherry-8 {
    	position: absolute;
    	background-image: url(/gui/cherry-2.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 13.3vmax;
    	height: 10vmax;
    	top: 6vh;
    	left: 43vw;
        transform: translateY(-25vh);
    }
    .cherry-8-ani {
        animation-name: cherry-8;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-8 {
    	from {transform: translateY(-25vh);}
    	to {transform: translateY(0);}
    }
    .cherry-9 {
    	position: absolute;
    	background-image: url(/gui/cherry-9.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 10.5vmax;
    	height: 8vmax;
    	bottom: 7vh;
    	right: 3vw;
        transform: translateX(12vw);
    }
    .cherry-9-ani {
        animation-name: cherry-9;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-9 {
    	from {transform: translateX(12vw);}
    	to {transform: translate(0);}
    }
}
@media (min-width: 1600px) {
    .contact-center {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 65px;
        padding-right: 25px;
        top: 0;

        background-image: url('/gui/Mapa.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .contact-right {
    	position: absolute;
    	top: 0;
    	right: 0;
    	width: 50%;
    	height: 100%;
        background-color: #b81f46;
        color: #fff;
        transform: translateX(100%);
    }
    .contact-right-ani {
        animation-name: contact-right-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
    }
    @keyframes contact-right-ani {
    	from {transform: translateX(100%);}
    	to {transform: translateX(0%);}
    }
    .contact-right-content {
        position: absolute;
        top: 57%;
        left: 50px;
        transform: translate(100%, -50%);
        padding-right: 250px;
    }
    .contact-right-content-ani {
        animation-name: contact-right-content-ani;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 1s;
    }
    @keyframes contact-right-content-ani {
    	from {transform: translate(100%, -50%);}
    	to {transform: translate(0%, -50%);}
    }
    .contact-right h1 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 34px;
        border-bottom: 2px solid #fff;
        padding-bottom: 25px;
        margin-top: 0;
        margin-bottom: 15px;
    }
    .contact-right h2 {
        font-family: "segoeProMedium", sans-serif;
        font-size: 24px;
        margin-top: 40px;
    }
    .contact-right span {
        font-size: 22px;
        display: inline-block;
        width: 100%;
    }
    .contact-right p {
        font-size: 22px;
        margin-bottom: 25px;
    }
    .social-link {
        display: inline-block;
        border: 3px solid #fff;
        border-radius: 50%;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        font-size: 32px;
        line-height: 40px;
        padding: 6px;
        margin-top: 30px;
        margin-right: 10px;
        transition: transform .5s;
    }
    .social-link:hover {
        color: #fff;
        text-decoration: none;
        transform: scale(1.1);
    }

    .cherry-8 {
    	position: absolute;
    	background-image: url(/gui/cherry-2.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 13.3vmax;
    	height: 10vmax;
    	top: 6vh;
    	left: 43vw;
        transform: translateY(-25vh);
    }
    .cherry-8-ani {
        animation-name: cherry-8;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-8 {
    	from {transform: translateY(-25vh);}
    	to {transform: translateY(0);}
    }
    .cherry-9 {
    	position: absolute;
    	background-image: url(/gui/cherry-9.png);
    	background-repeat: no-repeat;
    	background-position: center;
    	background-size: contain;
    	width: 10.5vmax;
    	height: 8vmax;
    	bottom: 7vh;
    	right: 3vw;
        transform: translateX(12vw);
    }
    .cherry-9-ani {
        animation-name: cherry-9;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 2s;
    }
    @keyframes cherry-9 {
    	from {transform: translateX(12vw);}
    	to {transform: translate(0);}
    }
}

/*---CONTACT END---*/


/*---BOOTSTRAP FIVE COLUMN START---*/

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
	}
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

/*---BOOTSTRAP FIVE COLUMN END---*/

/*---BOOTSTRAP SEVEN COLUMN START---*/

.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-17 {
    width: 14.285714285714285714285714285714%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-17 {
        width: 14.285714285714285714285714285714%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-17 {
        width: 12.285714285714285714285714285714%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-17 {
        width: 14.285714285714285714285714285714%;
        float: left;
    }
}

/*---BOOTSTRAP SEVEN COLUMN END---*/


#fp-nav.right {
    right: 6px;
}


/****Laptop ispravke*************/

.img-box{
    position: relative;

}

.video-seo-box{
    padding: 4% 13% 0;
}

.web-right img.imgLap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.web-right.web-right-ani {
    display: flex;
    align-items: center;
}