@font-face {
	font-family: 'title';
	src: url('../fonts/gilroy-extrabold-webfont.woff2') format('woff2');
	src: url('../fonts/gilroy-extrabold-webfont.woff') format('woff');
	}

@font-face {
	font-family: 'text';
	src: url('../fonts/kleintext-book-webfont.woff2') format('woff2');
	src: url('../fonts/kleintext-book-webfont.woff') format('woff');
	}


body {margin:0;padding:0;font-family: text;background-color: #FDFDFD}

h1 {
	font-family: title;
	font-size: 63px;
	line-height: 53px;
}

h2 {
	font-family: title;
	font-size: 43px;
	line-height: 33px;
}

h3 {
	font-family:title;
	font-size: 24px;
	line-height:24px;
}

h4 {
    font-family: title;
	font-size: 20px;
	line-height: 30px;
}

h1,h2,h3,h4 {margin:0;text-transform: uppercase;}
h3 {margin-bottom:15px}
h4 {margin-bottom:30px}


.logo {margin:30px 0px 60px 0px;}

.uppercase {text-transform:uppercase}
.borderRed {border:1px solid red}
.borderGreen {border:1px solid green}

/* Transitions */
div, section {
	transition: all 0.3s ease-out,
}



.wrapper {
    /* display:flex;
    align-items:center;
        padding:60px 120px;*/
    w1idth:1200px;
    margin:0 auto;
}

.bg {width:100%;display:flex;}

/* ----------------------------------------------- SASHA */

#sasha {
    position:relative;
    z-index:9;
    background-image:url(../images/bg.svg);
	background-repeat: no-repeat;
    background-position:top;
    background-size:cover}

#sasha .wrapper {
    width:1200px;
	position: relative;
	z-index:2;
	border-bottom: 0px solid #fff;
}

#sasha .bg {
	background-image:url(../images/sasha1.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position: 100%;
	-webkit-backface-visibility: hidden; /* add to fix webkit bug jitter */
	-webkit-transform: perspective(100px); /* add to fix webkit bug jitter */
}


/* COUB */
#coub .wrapper {flex-direction: column}
#coub .content {text-align:center;padding:60px}
#coub .text {
    text-align:justify;
    width:75%;
    margin:0 auto;
    margin-bottom:50px;}

#coub .logo {margin-bottom:80px;width:100%}

#coub {
    text-align:center;
	position:relative;
	z-index:41;
	background-color:#fff;
	background-repeat: no-repeat;background-position:top;
	background-size: cover;
        -webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
}

/* ----------------------------------------------- SAMOKLEIM */

#samokleim .logo {margin-bottom:80px}
#samokleim .double {width:50%;}
#samokleim {
    display:flex;
    text-align:center;
	position:relative;
	z-index:4;
	background-color:#fff;
	background-repeat: no-repeat;background-position:top;
	background-size: cover
}

#samokleim .content:last-child {
    display:flex;
    flex-direction: row;
    align-items: flex-start;
	flex-wrap: wrap;
}

#samokleim .content {text-align:left;}
#samokleim .text {padding-right:60px;}


.numbers {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
    align-items:flex-end;
    justify-content: space-around;
	text-align:center;
	color: #000;
    font-size:30px;
    line-height: 30px;
    margin:50px 0px;
}

.text a {color:#0000ff}
.text a:hover {text-decoration: underline}


.numbers div span {
    font-size:50px;
    font-family: title;
    margin-bottom:0px;
    color: #0000ff
}

/* ----------------------------------------------- WORK */

#work {
    display:flex;
    text-align:center;

    padding:180px 0px;
    background-color: #fff;
    position:relative;
    z-index:10;
    -webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
   }

#work .double {width:50%}
#work .double img {width:100%}
#work .double p {margin-top:0px}
#work .double p:last-child {margin-bottom:0px}
#work .double:first-child {padding-right:30px}

#letskick .wrapper {width:1200px !important}

#work .content {
    display:flex;
    flex-direction: row;
    align-items: center;
    text-align:left;}

/* ----------------------------------------------- LET'S KICK */

#letskick {
	position:relative;
	z-index:4;
	background-color:#eee;
	background-image:url(../images/bg.svg);
	background-repeat: no-repeat;
    background-position:top;
	background-size: cover;

    -webkit-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.35);}

#letskick .bg {
    background-image:url(../images/sasha2.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position: 15% bottom;
	-webkit-backface-visibility: hidden; /* add to fix webkit bug jitter */
	-webkit-transform: perspective(100px); /* add to fix webkit bug jitter */
}

#letskick .content  {margin-left:50%;width:600px;}
#letskick .contacts {align-items: flex-start;margin-bottom:0px;}
#letskick section div.content {width:600px;}


/* ----------------------------------------------- LET'S KICK CARDS */

#letskick-cards {
	position:relative;
	z-index:3;
    background: rgb(0,115,188);
    background: linear-gradient(94deg, rgba(0,115,188,1) 0%, rgba(0,96,157,1) 50%, rgba(0,115,188,1) 100%);
}

#letskick-cards .cards {
	display:flex;
	flex-direction: row;
	align-items:stretch;
	flex-wrap:wrap;
    justify-content: space-around;
    width:100%;
}

#letskick-cards .wrapper {padding:60px 180px}

#letskick-cards .card {
	width:calc(100%/3 - 30px);
	text-align:left;
	display: flex;
	flex-direction: row;
    align-content: flex-start;
    height:auto;
    flex-wrap:wrap;
	margin-bottom:20px;
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.10);
	border-radius: 15px;
	background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%);
}

#coub-cards .cards {
	display:flex;
	flex-direction: row;
	align-items:center;
	flex-wrap:wrap;
	justify-content: center;
}

#coub-cards .card {
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;
	margin:20px;
}

#letskick-cards .card .content {
	padding:45px 30px;
	border-radius: 0px 0px 15px 15px;
	background-color: #fff;
}

.card .content h3 {margin-top:0}

/* ----------------------------------------------- LET'S KICK VIDEO */

#video iframe{
	-webkit-box-shadow: inset 0px 32px 53px -30px rgba(0,0,0,0.45);
	-moz-box-shadow: inset 0px 32px 53px -30px rgba(0,0,0,0.45);
	box-shadow: inset 0px 32px 53px -30px rgba(0,0,0,0.45);
}

#letskick-youtube {padding:0;background-color:#222;}
#letskick-youtube .wrapper {flex-direction: column; padding:80px 0px}
.video-text {
    color:#666;
    margin:0 auto;
    text-align: center;
    padding:40px 0px 80px 0px;
    text-transform: none;
    font-family: "text"}


.text {
	font-size: 15px;
	line-height: 26px;
	letter-spacing: -0.1px
}

.text p:first-child {margin-top:0px}
.text p:last-child {margin-bottom:0px}

.contacts {
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: stretch;
	flex-wrap:wrap;
}


.link {
    display: inline-block;
	font-family: 'title';
	font-size: 22px;
	border-radius: 15px;
    border:1px solid #ccc;
	padding:20px;
	text-transform: uppercase;
	background: unset;
    margin:40px 0px
}

.link div { 
    display:inline;
    margin-left:10px;
    margin-top:5px;
    line-height:20px
}

.link .svg {height:15px}

.link:hover {
    border:1px solid #eee;
    background-color: #eee;
    color: #333;
    
    -webkit-box-shadow: inset 0px 10px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0px 10px 10px 0px rgba(0,0,0,0.15);
    text-shadow-shadow: inset 0px 10px 10px 0px rgba(0,0,0,0.15);
    
    }
.link:hover div {
  text-shadow: 0px 5px 8px rgba(0,0,0,0.25);transition: all 0.3s ease-in-out
    
}

.link div {
transition: all 0.3s ease-in-out
    
}

a { text-decoration:none;color:#000;}
a, a:hover {transition: all 0.3s ease-in-out}

.social {margin:0px 0px 40px 0px;}
.social a img {
	width:30px;
	padding:0px 13px 0px 20px;
	box-shadow:inset 1px 0px 0px 0px rgba(255,255,255,0.8), inset  2px 0px 0px 0px rgba(0,0,0,0.1);
}



.social a:first-child img {box-shadow: none;padding-left:0}
.social a:last-child img {margin-right:0;padding-right:0}

/* ----------------------------------------------- OWL */

.carousel {overflow: hidden;border-radius:15px 15px 0px 0px}
.carousel img {width:100%}

#letskick-cards .owl-stage-outer {border-radius: 15px 15px 0px 0px;z-index:-10}
#samokleim .owl-stage-outer {border-radius: 15px;z-index:-10}

.owl-item {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
 }

.owl-dots {
	z-index: 33;
	margin-left: 30px;
	margin-top: -40px;
	padding-bottom:15px;
}

button.owl-dot {
	background: 0 0;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
	cursor: pointer;
}

.owl-dot span {
	display: block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	background-color: rgba(255,255,255,0.5);
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 30px;
}

    .active span {background-color:rgba(255,255,255,1)}

    #samokleim .content {padding:60px}
    #sasha .content {padding:60px}
/*
    #sasha {display:none}    
    #work {display:none}    
    #letskick {display:none}    
    #letskick-cards {display:none}    
    #letskick-youtube {display:none}    
    #coub {display:none}    
    #coub-cards {display:none}    
    #s1amokleim {display:none}    
*/

    #work .wrapper { width:1200px}
    #letskick-youtube .wrapper { width:1200px}
    #coub .wrapper { width:1200px}
    #samokleim .wrapper { width:1200px}

    img.logo  { height:150px}
    section {padding-top:100px}
    section#sasha {padding-top:0px}
/* ----------------------------------------------- media */

@media only screen and (max-width: 1560px) {
    #sasha .bg {background-position: 160%;}
    #letskick .bg {background-position: 0%;}
    #letskick-cards .wrapper {padding:60px 120px}

   }


@media only screen and (max-width: 1280px) {
	
    #sasha .wrapper, #work .wrapper {width:100%} 
    #sasha .bg {background-position: 220%;}

    #samokleim .wrapper {width:100% !important}
    #letskick-youtube .wrapper {width:100% !important}
    #coub .wrapper {width:100% !important}

    #letskick .wrapper {padding:0px 30px 0px 0px}
    #letskick .bg {background-position: 0%;}
    #letskick .content  {width:50%;}    

    #letskick-cards .card {width:calc(100%/2 - 30px);}

    #work .content {padding:60px}
}


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

    #sasha .bg {background-position: 300px}	

    h1 {font-size: 49px;line-height: 50px;}
    h2 {font-size: 39px;line-height:60px;}
    h3 {font-size: 22px}
    h4 {font-size: 24px}
    .text {font-size: 16px;line-height: 26px;}
    
}

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

    #letskick-cards .card {width:calc(100%/2 - 10px);}
    #letskick-cards .wrapper {padding:30px}
    
    #work {padding:0px}
	#sasha .bg {
        transition: unset;
        background-position: bottom center;
        background-size:70%
    }	

	#sasha .wrapper {
        align-items:flex-start;
        height:1400px;
        background-position: top
    }
    
    #sasha .content {
        text-align: center;
        padding:60px 120px
    }
    
    #sasha .text {text-align: justify;margin:0 auto}
    #sasha .contacts {margin-top:10px} 
    
	#work {margin:0 auto}
	#work .content {flex-direction: column}
	#work .double {width:100%;text-align: justify}
	#work .double img {width:100%}
	#work .double:first-child {padding:0;margin:0px 0px 40px 0px}
	#work .double:last-child {margin:0px}

    #letskick {height:1000px}
    
	#letskick .bg {
        height:900px;
        background-position: 25% top;
        background-size:70%;
    }
    
    #letskick .wrapper {
        padding:60px;
        flex-direction:row;
        flex-wrap: wrap;
    }
    
    #letskick section {
        background-position: bottom left;
        display: flex;
        flex-direction: column;
        align-items:stretch;
        justify-content: space-around;		
		}
    
    #letskick .content {
        width:100%;
        margin-left:0
    } 

    #letskick .content:first-child {
        height:400px;
        text-align:right;
        align-items:flex-end
    }
    
    #letskick .content:last-child {
			-webkit-box-shadow: 0px 17px 60px 0px rgba(0,0,0,0.35);
			-moz-box-shadow: 0px 17px 60px 0px rgba(0,0,0,0.35);
			box-shadow: 0px 17px 60px 0px rgba(0,0,0,0.35);
			border-radius:15px;
			background-image:url(../images/bg.svg);
			background-repeat: no-repeat;
			background-position:0%;
			background-size:auto;
			position: relative;
			z-index:2;
			border-bottom: 0px solid #fff;
			background-color:#eee;
			text-align:center;
			position: relative;
		}
    
    #letskick .data {padding:60px}
    #letskick div.content {width:100%}
	#letskick div.content:last-child .text {text-align:justify;margin-bottom:30px}
    
    .link {margin: 40px 0px}

	.contacts {margin:0 auto}
	.social, .link {margin: 20px auto}

    .numbers {display:block;text-align:center;}
    .numbers div {margin:25px auto}

    br {display:none}
    .numbers br {display:block}
	
    #coub .text {width:75%;}
    
    #samokleim .content .double {width:100%;}
    #samokleim .content .double:last-child {margin-bottom: 30px}
    #samokleim .content:last-child {flex-direction: column-reverse;align-items: flex-start;} 
    #samokleim .content {text-align: center}
    #samokleim .text {padding-right:0px;text-align:justify}
    
        .text {font-size: 14px;line-height: 22px;}

}



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

    #sasha .wrapper {height:1400px}
    #sasha .content {padding:60px}
    #work .wrapper {flex-direction: column;}   

    #work .double:first-child {padding-right:0}

    #letskick .content:first-child {padding-right:0}  
    #letskick .bg {height:800px;background-size: 70%;} 
    #letskick .logo {width:200px}
    #letskick {height:1100px}
    
    #coub .text {width:100%;}
    .video-text {width:100%}
        
    #letskick .contacts {margin-bottom:0}

}

@media only screen and (max-width: 640px) {
    
    #sasha .text {width:100%}
    #sasha .wrapper {height:1100px;}
    #sasha .content {padding:30px}
    #work .content {padding:30px}
	
    #letskick {height:850px}
	#letskick .wrapper {padding:30px}
    #letskick .bg {height:500px;background-size: 80%;}
    #letskick .logo {width:150px}
    
	#letskick-cards .card {width:100%;}

	h1 {font-size: 49px;line-height: 40px;}
	h4 {font-size: 18px;line-height: 22px;}
    

	.social {margin: 0 auto}
    .data {padding:30px}
    
    #letskick .contacts {align-items: center}
    #letskick .social {margin:0}
    #letskick .link {margin:30px 0px 0px 0px}
    #letskick .data {padding:30px}

}


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


    #sasha .wrapper {height:1100px}
    #sasha .content {text-align: left;}
   
    #letskick {height:1000px}
    #letskick .content:first-child {height:300px}
    #letskick .bg {height:500px;background-size: 80%;}  
    #letskick .logo {width:100px}
    #letskick .contacts {align-items: flex-start}

	.link div {display:inline;margin-left:10px;margin-top:5px;line-height:20px}
	.link .svg {height:12px}
	.social {margin: 0 auto}
	.social a img {width:20px;padding:0px 8px 0px 16px;}
	
	br {display:block}
    
    #coub .text {width:100%}
    #coub .numbers {text-align:left}
    
    .social, .link {margin:15px 0px}
    
    .text {text-align: left !important}

    h1 {text-align: left}
    h4 {text-align: left}
    
    #coub .text {margin-bottom:30px;}
    #coub .content {padding:0px 30px}
    
    #samokleim .content {padding:0px 30px}
    #samokleim .header {text-align:left;padding:0px 30px}
    #samokleim .logo {padding:0px}
}

@media only screen and (max-width: 380px) {
    
    #letskick .wrapper {padding: 10px}
    #letskick .bg {height:400px;background-size: 100%;}  
    #letskick .social a img {width:15px}
    
    #sasha .text {margin:30px 0px}
	#work section div:first-child {padding:0px}
	
    .link   {font-size:15px}
	.link .svg {height:11px}
    
   .content {text-align:left;}
}

@media only screen and (max-width: 320px) {
	.link .svg {height:10px}
}