@font-face {
    font-family: 'PFAgoraSlabProBold';
    src: url('../fonts/pfagoraslabpro-bold.eot');
    src: url('../fonts/pfagoraslabpro-bold.eot') format('embedded-opentype'),
         url('../fonts/pfagoraslabpro-bold.woff') format('woff'),
         url('../fonts/pfagoraslabpro-bold.ttf') format('truetype'),
         url('../fonts/pfagoraslabpro-bold.svg#PFAgoraSlabProBold') format('svg');
}

@font-face {
    font-family: 'PFAgoraSlabProRegular';
    src: url('../fonts/pfagoraslabpro-reg.eot');
    src: url('../fonts/pfagoraslabpro-reg.eot') format('embedded-opentype'),
         url('../fonts/pfagoraslabpro-reg.woff') format('woff'),
         url('../fonts/pfagoraslabpro-reg.ttf') format('truetype'),
         url('../fonts/pfagoraslabpro-reg.svg#PFAgoraSlabProRegular') format('svg');
}

#maximage:after {
	background-image: url("../img/dot.png");
	content: "";
	position: absolute;
	opacity: 0.3;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 15;
}

.redcircle {
	color: #fff;
	background-color: rgba(255, 0, 0, 0.35);
	border-radius: 50%;
	width: 500px;
	height: 500px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.redcircle div {
	margin: auto;
}

.redcircle i {
	font-style: normal;
	margin-top: 12%;
	font-size: 8em;
	text-shadow: 0 7px 0 rgba(0, 0, 0, 0.4);
}

.redcircle h1 {
	font: 90px/90px 'PFAgoraSlabProBold';
	margin: 15px 0 40px;
	text-shadow: 0 7px 0 rgba(0, 0, 0, 0.4);
}

.redcircle span {
	font-size: 36px;
	text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

.social {
	position: absolute;
	bottom: 20px;
	left: 20px;
	padding: 6px 8px 4px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.social small {
	color: #fff;
	font: 12px Arial;
	margin-bottom: 5px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* I wanted to center my loader */
#cycle-loader {
	height:32px;
	left:50%;
	margin:-8px 0 0 -8px;
	position:absolute;
	top:50%;
	width:32px;
	z-index:999;
}

/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
	display:none;/* Only use this if you fade it in again after the img load */
	position:fixed !important;
}

/*Set my logo in bottom left*/
#logo {
	bottom:30px;
	height:auto;
	left:30px;
	position:absolute;
	width:34%;
	z-index:1000;
}

#logo img {
	width:100%;
}

#arrow_left, #arrow_right {
	bottom:30px;
	height:67px;
	position:absolute;
	right:30px;
	width:36px;
	z-index:1000;
}

#arrow_left {
	right:86px;
}

#arrow_left:hover, #arrow_right:hover {
	bottom:29px;
}

#arrow_left:active, #arrow_right:active {
	bottom:28px;
}

.in-slide-content { 
	color:#333;
	float:right;
	font-family:'Helvetica Neue', helvetica;
	font-size:60px;
	font-weight:bold;
	right:0;
	margin:40px;
	padding:20px;
	position:absolute;
	top:0;
	width:700px;
	z-index:9999; /* Show above .gradient */
	text-shadow: 0 1px 0 #fff;
	-webkit-font-smoothing:antialiased;
}

.light-text {color:#ddd;text-shadow: 0 1px 0 #666;}
.smaller-text {font-size:30px;}
.youtube-video, video {
	left:0;
	position:absolute;
	top:0;
}

/* анимированный бургер */
.menuTrigger {
    position: fixed;
    top: 50%;
    left: 40px;
    z-index: 110;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    transition: transform .8s cubic-bezier(.19, 1, .22, 1) 0s, visibility .8s linear 0s
}
.isLoading .menuTrigger, .isOpening .menuTrigger, .isSlideVimeoStart .menuTrigger {
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
    visibility: hidden;
    transition: transform .6s cubic-bezier(.755, .05, .855, .06) 0s, visibility .6s linear 0s
}
.menuTrigger_open, .menuTrigger_close {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}
.menuTrigger_open>span, .menuTrigger_close>span {
    position: absolute;
    display: block
}
.menuTrigger_open>span:before, .menuTrigger_close>span:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block
}
.menuTrigger_open {
    pointer-events: none
}
.isSlide .menuTrigger_open {
    pointer-events: auto
}
.menuTrigger_open>span {
    left: 0;
    width: 100%;
    height: 3px
}
.menuTrigger_open>span:before {
    background-color: #000;
}
.menuTrigger_open>span:nth-child(1) {
    top: 3px
}
.menuTrigger_open>span:nth-child(2) {
    top: 13px
}
.menuTrigger_open>span:nth-child(3) {
    top: 23px
}
.isSlide .menuTrigger_open>span {
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform: none;
    transform: none
}
.isSlide .menuTrigger_open>span:nth-child(1) {
    transition: transform .3s cubic-bezier(.77, 0, .355, 1) 0s
}
.isSlide .menuTrigger_open>span:nth-child(2) {
    transition: transform .3s cubic-bezier(.77, 0, .355, 1) .1s
}
.isSlide .menuTrigger_open>span:nth-child(3) {
    transition: transform .3s cubic-bezier(.77, 0, .355, 1) .2s
}
.menuTrigger_open>span {
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -ms-transform: scaleX(0);
    transform: scaleX(0)
}
.menuTrigger_open>span:before {
    animation: none
}
.menuTrigger_open>span:nth-child(1) {
    transition: transform .2s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_open>span:nth-child(2) {
    transition: transform .2s cubic-bezier(.645, .045, .175, 1) .1s
}
.menuTrigger_open>span:nth-child(3) {
    transition: transform .2s cubic-bezier(.645, .045, .175, 1) .2s
}
.isLoop .menuTrigger_open>span:nth-child(1):before {
    animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) 0s
}
.isLoop .menuTrigger_open>span:nth-child(2):before {
    animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) .1s
}
.isLoop .menuTrigger_open>span:nth-child(3):before {
    animation: menuTrigger_loopX .5s cubic-bezier(.645, .045, .175, 1) .2s
}
.menuTrigger_open.isHover>span:nth-child(1):before {
    animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_open.isHover>span:nth-child(2):before {
    animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) .1s
}
.menuTrigger_open.isHover>span:nth-child(3):before {
    animation: menuTrigger_hoverX .4s cubic-bezier(.645, .045, .175, 1) .2s
}
.menuTrigger_close {
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    pointer-events: none
}
.isList .menuTrigger_close {
    pointer-events: auto
}
.menuTrigger_close>span:before {
    background-color: #000
}
.menuTrigger_close>span:nth-child(1) {
    width: 100%;
    height: 3px;
    top: 13px;
    left: 0
}
.menuTrigger_close>span:nth-child(2) {
    width: 3px;
    height: 100%;
    top: 0;
    left: 13px
}
.isList .menuTrigger_close>span:nth-child(1) {
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -ms-transform: translateY(.5px) scaleX(1);
    transform: translateY(.5px) scaleX(1);
    transition: transform .3s cubic-bezier(.77, 0, .355, 1) 0s
}
.isList .menuTrigger_close>span:nth-child(2) {
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -ms-transform: translateX(.5px) scaleY(1);
    transform: translateX(.5px) scaleY(1);
    transition: transform .3s cubic-bezier(.77, 0, .355, 1) .1s
}
.menuTrigger_close>span:before {
    animation: none
}
.menuTrigger_close>span:nth-child(1) {
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -ms-transform: translateY(.5px) scaleX(0);
    transform: translateY(.5px) scaleX(0);
    transition: transform .2s cubic-bezier(.645, .045, .175, 1) 0s
}
.menuTrigger_close>span:nth-child(2) {
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -ms-transform: translateX(.5px) scaleY(0);
    transform: translateX(.5px) scaleY(0);
    transition: transform .2s cubic-bezier(.645, .045, .175, 1) .15s
}
.isLoop .menuTrigger_close>span:nth-child(1):before {
    animation: menuTrigger_loopX .6s cubic-bezier(.645, .045, .175, 1) 0s
}
.isLoop .menuTrigger_close>span:nth-child(2):before {
    animation: menuTrigger_loopY .6s cubic-bezier(.645, .045, .175, 1) .15s
}
.menuTrigger_close.isHover>span:nth-child(1):before {
    animation: menuTrigger_hoverX .5s cubic-bezier(.645, .045, .175, 1) 0s !important
}
.menuTrigger_close.isHover>span:nth-child(2):before {
    animation: menuTrigger_hoverY .5s cubic-bezier(.645, .045, .175, 1) .15s !important
}
@keyframes menuTrigger_loopX {
    0% {
        transform-origin: 100% 0;
        transform: none
    }
    45% {
        transform-origin: 100% 0;
        transform: scaleX(0)
    }
    55% {
        transform-origin: 0 0;
        transform: scaleX(0)
    }
    100% {
        transform-origin: 0 0;
        transform: none
    }
}
@keyframes menuTrigger_hoverX {
    0% {
        transform-origin: 100% 0;
        transform: none
    }
    45% {
        transform-origin: 100% 0;
        transform: scaleX(0)
    }
    55% {
        transform-origin: 0 0;
        transform: scaleX(0)
    }
    100% {
        transform-origin: 0 0;
        transform: none
    }
}
@keyframes menuTrigger_loopY {
    0% {
        transform-origin: 0 100%;
        transform: none
    }
    45% {
        transform-origin: 0 100%;
        transform: scaleY(0)
    }
    55% {
        transform-origin: 0 0;
        transform: scaleY(0)
    }
    100% {
        transform-origin: 0 0;
        transform: none
    }
}
@keyframes menuTrigger_hoverY {
    0% {
        transform-origin: 0 100%;
        transform: none
    }
    45% {
        transform-origin: 0 100%;
        transform: scaleY(0)
    }
    55% {
        transform-origin: 0 0;
        transform: scaleY(0)
    }
    100% {
        transform-origin: 0 0;
        transform: none
    }
}