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

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

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

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


h1 {
	font-family: 'futura';
	font-size: 60pt;
	line-height: 70px;
    letter-spacing: -3px;
}

h2 {
	font-family: title;
	font-size: 30pt;
	line-height: 34px;
}

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

h4 {
    font-family: title;
	font-size: 20pt;
	line-height: 30px;
    letter-spacing: -1px;            
}

h1,h2,h3,h4 {margin:0;text-transform: uppercase;        font-weight: normal;
    font-style: normal;}

.red {color:#dd0000;font-weight: bold}


.logo {margin:30px 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 {
max-width: 860px;
    margin:0 auto;
}

.highlight {background-color:#0332FF;color:white;padding:0px 5px}
.bg-red {background-color:#dd0000 }

.blue {color: #0332FF}

.mb40 {margin-bottom: 40px}

/* COUB */
#coub {height: 100%;width: 100%;}
#coub .wrapper {flex-direction: column}
.content {text-align:center;padding:30px}


.text {
    margin:10px auto 30px auto;
}


p {margin-top:40px;margin-bottom: 10px;    text-align:left;
}

p:first-child {margin-top:0px}



#coub {
	position:relative;
	z-index:41;
	background-color:#fff;

}

.content {text-align:left}
/* ----------------------------------------------- STORIES CARDS */

#stories-cards {
	position:relative;
	z-index:3;
    background: #fff;
margin-bottom: 60px;}

#stories-cards .cards {margin-top:20px;
	display:flex;
	flex-direction: row;
	align-items:stretch;
	flex-wrap:wrap;
    justify-content: flex-start;
    width:100%;
}

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

#stories-cards .card {
	width:calc(100%/3 - 30px);
    height:auto;
	box-shadow: 0px 0px 24px 0 rgba(0,0,0,0.20);
	border-radius: 15px;

}

.card {
	display: flex;
	border-radius: 15px;

}
.card a{line-height: 0px;	border-radius: 15px;
}

.card a img{line-height: 0px;	border-radius: 15px;
}

.singleimage{
    width:100%;

}


.text {
	font-size: 16px;
	line-height: 30px;
}


.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:#0332FF;}
a, a:hover {transition: all 0.3s ease-in-out}
a:hover {text-decoration: underline}

.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}


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



/* ----------------------------------------------- COUBERS */


div.param {display:flex;justify-content: space-between; background-image:url(../images/dots.gif);line-height:22px;flex-wrap: wrap;margin-bottom: 15px}
div.param span {font-size:15px;background-color:#fff}
div.param span:first-child {font-weight: bold;padding-right:5px}
div.param span:last-child {padding-left:5px;float:right;color:#0073bc;}

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


/* ----------------------------------------------- media */

@media only screen and (max-width: 1560px) {
    #sasha .bg {background-position: 160%;}
    #letskick .bg {background-position: 0%;}
    #stories-cards .wrapper {padding:60px 120px 0px 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%;}    

    #stories-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: 50pt;line-height: 50px;}
    h2 {font-size: 30pt;line-height:32px;}
    h3 {font-size: 25pt;line-height:30px;}
    h4 {font-size: 18pt}
    .text {font-size: 16px;line-height: 26px;}
    
}

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

    #stories-cards .card {width:calc(100%/2 - 10px);}
    #stories-cards .wrapper {padding:0px}
  
    
    .link {margin: 40px 0px}

	.contacts {margin:0 auto}

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

    .numbers br {display:block}
	


}



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

   
    #coub .text {width:100%;}
    .video-text {width:100%}
        

}

@media only screen and (max-width: 640px) {
  
	#stories-cards .card {width:100%;}

	.social {margin: 0 auto}
    .data {padding:30px}



    h1 {font-size:30pt;letter-spacing: -1px;line-height: 36px}
    h2 {font-size:24pt;letter-spacing: -1px;line-height: 26px}
    h3 {font-size:18pt;letter-spacing: -1px;line-height: 20px}

div.param {display:flex;flex-direction: column; background-image:unset;margin-bottom: 10px}
div.param span {font-size:14px;background-color:#fff;}
div.param span:first-child {text-align: left; padding-right:unset}
div.param span:last-child {padding-left:unset;color:#0073bc;}
    
.content, .param {text-align:left !important;}
p, .param  {text-align: left;font-size:15px;}
}


@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}
    
}

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