@font-face {
  font-family: 'Brain_Flower';
  src:  url(../fonts/BRAINFLOWEREURO.TTF);
}
@font-face {
  font-family: 'OpenSansBold';
  src:  url(../fonts/OPENSANS-BOLD.TTF);
}
@font-face {
  font-family: 'OpenSansBoldItalic';
  src:  url(../fonts/OPENSANS-BOLDITALIC.TTF);
}
@font-face {
  font-family: 'OpenSansExtraBold';
  src:  url(../fonts/OPENSANS-EXTRABOLD.TTF);
}
@font-face {
  font-family: 'OpenSansExtraBoldItalic';
  src:  url(../fonts/OPENSANS-EXTRABOLDITALIC.TTF);
}
@font-face {
  font-family: 'OpenSansItalic';
  src:  url(../fonts/OPENSANS-ITALIC.TTF);
}
@font-face {
  font-family: 'OpenSansLight';
  src:  url(../fonts/OPENSANS-LIGHT.TTF);
}
@font-face {
  font-family: 'OpenSansLightItalic';
  src:  url(../fonts/OPENSANS-LIGHTITALIC.TTF);
}
@font-face {
  font-family: 'OpenSansRegular';
  src:  url(../fonts/OPENSANS-REGULAR.TTF);
}
@font-face {
  font-family: 'OpenSansSemiBold';
  src:  url(../fonts/OPENSANS-SEMIBOLD.TTF);
}
@font-face {
  font-family: 'OpenSansSemiBoldItalic';
  src:  url(../fonts/OPENSANS-SEMIBOLDITALIC.TTF);
}

.navbar-toggle .icon-bar{
	background: #fff;
}

body{
  	font-family: 'OpenSansSemiBold';
	background-repeat: no-repeat;
	background-image: url(../img/crack1.png); /* fallback */
    background-image: url(../img/crack1.png), -webkit-linear-gradient(left top, #3E1050, #D742B8); /* For Safari 5.1 to 6.0 */
    background-image: url(../img/crack1.png), -o-linear-gradient(bottom right, #3E1050, #D742B8); /* For Opera 11.1 to 12.0 */
    background-image: url(../img/crack1.png), -moz-linear-gradient(bottom right, #3E1050, #D742B8); /* For Firefox 3.6 to 15 */
    background-image: url(../img/crack1.png), linear-gradient(to bottom right, #3E1050, #D742B8); /* Standard syntax (must be last) */
   	background-position: top right;
   	/*margin-bottom: 100px;*/
}

 .navbar.transparent{
 	padding: 45px;
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.navbar.transparent li a, .navbar.transparent li a:focus,.navbar.transparent li a:hover{
	text-transform: uppercase;
	color: #fff;
	background: transparent;
	font-weight: 600;
	outline: none;
	font-size: 12px;
}
.navbar.transparent li a:active{
	color: #E89E16;
}

.navbar-brand img{
	margin-top: -23px;
}

.main_div{
	background: url(../img/arrow_prank.png) no-repeat;
	background-position: 250px 0px;
	background-size: 200px;
	padding-left: 40px;
}
.main_div .prankit{
	padding-top: 115px;
	/*width: 400px;*/
	display: inline-block;
	float: left;
	padding-left: 50px;
}
.prankit h1{
  	font-family: 'Brain_Flower';
	color: #fff;
	font-size: 176px;
	font-weight: 600; 
	line-height: 100px;
	padding-top: 50px;
}
.prankit h2{
  	font-family: 'OpenSansSemiBold';
	color: #fff;
	font-weight: 600; 
	font-size: 90px;
	line-height: 75px;
}
.prankit h3{
	font-family: 'OpenSansSemiBold';
	color: #fff;
	font-weight: 600; 
	font-size: 36px;
	line-height: 35px;
	padding-left: 70px;
}
.prankit button, .prankit button:focus, .prankit button:active, .how_to_use button, .how_to_use button:focus, .how_to_use button:active,  .div40 button, .div40 button:focus, .div40 button:active, footer button, footer button:focus, footer button:active{
	border:0px !important;
	outline: none !important;
	box-shadow: none !important;
	width: 134px;
	height: 51px;
	background: url(../img/google_play.png) no-repeat;
	background-size: 100%;
}

.prankit span{
	position: absolute;
	color: #752375;
	z-index: 9;
}

.prankit p{
	padding-top: 15px;
	text-align: center;
}

.prankit button:hover, .how_to_use button:hover, .icon img:hover , .div40 button:hover, footer button:hover{
  animation: shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.circle{
    width: 125%;
    margin-left: -120px;

}

.circle img{
	width: 100%;
	margin-left: -100px;
}

/*.circle h1{
	font-family: 'Brain_Flower';
	font-size: 176px;
	font-weight: 600; 
	color: #752375;
	padding-top: 85px;
	line-height: 100px;
}
.circle h2{
	font-family: 'OpenSansSemiBold';
	color: #752375;
	font-weight: 600; 
	font-size: 90px;
	line-height: 75px;
}
.circle{
	background: yellow;
	width: 400px;
	height: 400px;
	border-radius: 100%;
	float: left;
	margin-top: 95px;
	margin-left: -90px;
}*/

.video_main{
	background: url(../img/crac2.png) no-repeat;
	background-position: left top;
	background-size: 150px;
	margin-top: 100px;
	text-align: center;
}

.video_main h2{
	font-family: "OpenSansBold";
	color: #fff;
	text-align: center;
	font-size: 41px;
	padding-left: 100px;
	padding-right: 100px;
}

.video_arrow{
	background: url(../img/strelka_video1.png) no-repeat;
	background-position: right top;
	background-size: 150px;
	padding-top: 50px;
}

.video_border{
	background: url(../img/video.png) no-repeat;
	background-size: 100% 100%;
	width: 80%;
	margin:40px auto;
	padding: 20px;
}

.video_div{
	overflow: hidden;
	position: relative;
}

video{
	width: 100%;
	border-radius: 50px;
	border:0px !important;
	outline: none !important;
	overflow: hidden;
}

.full_video{
	background: rgba(255,255,255,.5) url(../img/kopce.png) no-repeat;
	background-position: center;
	background-size: 200px 200px;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50px;
	overflow: hidden;
	z-index: 9999;
}


.cube{
	width: 270px;
	height: 270px;
	background: #E89E16;
	position: absolute;
	border-radius: 20px;
	z-index: -1;
}

.cube1{
	top: 60px;
	left: 0;
	transform: rotate(60deg);
}
.cube2{
	bottom: 100px;
	right: 50px;
	transform: rotate(-20deg);
}

/*.how_to_use:after{
	width: 140px;
	position: absolute;
	height: 140px;
	background: url(../images/strelka_video2.png) no-repeat;
	background-size: 160px;
	background-position: 100px 0px;	 
	margin-top: -180px;
}*/

.how_to_arrow:after{
	width: 140px;
	height: 140px;
	background: url(../img/crac3.png) no-repeat;
	background-size: 100%;
	position: absolute;
	right: 0;
	margin-top: -310px;

}

.how_to_use .arrow_before{
	width: 160px;
	height: 230px;
	background: url(../img/strelka_video2.png) no-repeat;
	background-size: 100%;
	float: left;
	background-size: 160px 230px;
	/*background-position: top right;*/
	position: absolute;
	top: -140px;

}

.how_to_use .arrow{
	width: 200px;
	height: 200px;
	background: url(../img/strelka_video3.png) no-repeat;
	background-size: 100%;
	float: left;
	background-size: 160px;
	background-position: top right;
}

.how_to_use h2{
	font-size: 90px;
	color: #fff;
	font-family: "Brain_Flower";
	font-weight: 600;
	padding-left: 210px;
	padding-top: 20px;
	display: inline;
	float: left;
}
.how_to_use p{
	display: inline;
	float: left;
	padding-top: 60px;
	padding-left: 20px;
}

.icon{
	text-align: center;
}

.icon img{
	width: 80px;
}

.steps{
	color: #fff;
	text-align: center;
	position: relative;
}

.step{
	width: 20%;
	height: 100px;
	display: inline;
	float: left;
	position: relative;
	margin-bottom: 100px;
}

.step h2{
	font-family: "Brain_Flower";
	font-weight: 600;
	font-size: 56px;
	letter-spacing: -2px;
}

.step p{
	font-family: "OpenSansSemiBold";
	font-weight: 600;
	padding-left: 20px;
	padding-right: 20px;
}

.step img{
	height: 120px;
	width: auto;
}

.yellow{
	background: #E89E16;
	margin-top: 150px;
}

.yellow img{
	width: 100%;
	margin-top: -40px;
}

.div30{
	width: 30%;
	display: inline;
	float: left;
	position: relative;
	min-height: 600px;
}
.div30 img{
	position: absolute;
	bottom: 0px;
}

.div40{
	width: 40%;
	display: inline;
	float: left;
	height: 600px;
}

.div40 h1{
	font-family: "Brain_Flower";
	color: #fff;
	font-size: 110px;
	width: 150%;
	letter-spacing: -2px;
	font-weight: 600;
	padding-top:55px;
}

.div40 h2{
	color: #fff;
	font-size: 29px;
}
.div40 p{
	font-size: 18px;
	color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
}



.left_blog{
	background: url(../img/isprekinata.png) repeat-y;
	background-position: right;
	padding-bottom: 60px;
	padding-top: 20px;
	height: 540px;
	overflow: hidden;
}
.right_blog{
	height: 540px;
	overflow: hidden;
}
.left_blog h2{
	color: #fff;
	font-size: 70px;
	font-family: "Brain_Flower";
	font-weight: 600;
	display: inline-block;
	float: left;
}

.left_blog img{
	width: 100px;
	margin-top: 40px;
	margin-left: 50px;
}

.newest_post, .right_post{
	padding-right: 20px;
	color: #fff;
	padding-top: 20px;
}

.right_post{
	padding-left: 20px;
}

p.date{
	color: #3E1050;
	font-size: 22px;
}
h3.title{
	text-transform: uppercase;
	font-size: 26px;
}
p.desc{
	font-size: 18px;
}
p.link{
	text-align: right;
}

p.link a, p.link a:hover, p.link a:focus, p.link a:active{
	color: #3E1050;
	text-decoration: none;
	font-size: 18px;
}

.form_div{
	background: #3E1050 url(../img/crac7.png) no-repeat;
	background-position:bottom left;
	background-size: 200px 200px;
}

.form_div h3{
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 600;
	font-family: "Brain_Flower";
	color: #fff;
}

.form_div input, .form_div input:focus, .form_div input:active, .form_div textarea{
	background: url(../img/contact.png) no-repeat;
	background-size: 100% 100%;
	width: 90%;
	height: 70px;
	border:0px !important;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
	color: #fff;
}
.form_div textarea{
	height: 180px;
	background: url(../img/message.png) no-repeat;
	background-size: 100% 100%;
	resize: none;
	color: #fff;
	padding: 20px;
}

.form_div input[type=submit]
{
	background: url(../img/send_button.png) no-repeat;
	background-size: 100% 100%;
	color: #3E1050;
	font-weight: 600;
	margin-top: 110px;
}
.row.crack{
	background: url(../img/crac6.png) no-repeat;
	background-size: 100px 100px;
	background-position: top right;
}

footer{
	background: #E89E16;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #3E1050;
}
footer ul:first-child{
	padding: 10px;
}

footer a, footer a:hover, footer a:active,footer a:focus{
	color: #3E1050;
	text-decoration: none;
}

footer p{
	display: inline-block;
	float: left;
	padding: 10px;
}


@media screen and (max-width: 1360px)
{
	.form_div{
		background: #3E1050;
	}
}

@media screen and (max-width: 1200px)
{
	.prankit h1{
		font-size: 135px;
	}
	.prankit h2 {
	    font-size: 72px;
	    line-height: 37px;
	}
	.circle {
	    width: 110%;
	    margin-left: -90px;
	    margin-top: 73px;
	}
	.prankit h3 {
	    font-size: 26px;
	    line-height: 24px;
	}
	.prankit button{
	    border: 0px !important;
	    outline: none !important;
	    box-shadow: none !important;
	    width: 112px;
	    height: 51px;
	    background: url(../img/google_play.png) no-repeat;
	    background-size: 100%;
	    margin-left: 70px;
	}
	.video_main h2 {
	    font-size: 34px;
	    padding-top: 30px;
	}
	.div40 h1 {
	    font-size: 94px;
	    padding-top: 15px;
	}
	.div40 h2 {
	    color: #fff;
	    font-size: 24px;
	}
	.div40 p {
	    font-size: 17px;
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	.div30, .div40{
		min-height: 470px;
		height: 470px;
	}
	.left_blog img {
	    width: 75px;
	}
	.blog_posts p{
		font-size: 16px;
	}
}

@media screen and (max-width: 992px)
{	
	.container{
		width: 100%;
	}
	.row{
		margin: 0px !important;
	}
	.main_div{
		background: transparent;
		padding-left: 0px;
	}
	.main_div .prankit{
		padding: 0px;
		width: 100%;
		color: #fff !important;
		text-align: center;
		margin: 0px;
		margin-left: -30px;
	}
	.prankit h1, .prankit h1 span, .prankit h2, .prankit h2 span{
		padding: 0px; 
		text-align: center;
		color: #fff !important;
	}
	.circle{
		display: none;
	}
	.video_main{
		margin-top: 0px;
		background: transparent;
	}
	.video_arrow{
		background: transparent;
	}
	.arrow_before, .arrow{
		display: none;
	}
	.how_to_use h2, .how_to_use p{
		display: block;
		width: 100%;
		text-align: center;
		padding: 0px;
		margin: 0px;
	}
	.steps{
		margin-top: 40px;
	}
	.div30{
		display: none;
	}
	.div40{
		width: 100%;
		text-align: center;
	}
	.div40 h1{
		width: 100%;
		font-size: 80px;
	}
	.left_blog{
		background: transparent;
	}
	.left_blog img{
		display: none;
	}
	.left_blog h2{
		width: 100%;
	}
	.left_blog{
		height: auto;
		padding-bottom: 0px;
	}
	.right_blog{
		padding: 0px;
	}
	.form_div input, .form_div input:focus, .form_div input:active, .form_div textarea{
		border: 2px solid rgba(255,255,255,.5) !important;
		background: transparent;
		border-radius: 5px;
		width: 100%;
		margin: 0px;
		margin-top: 25px;
	}

	.form_div input[type="submit"]{
		background: #fff;
		margin-top: 25px;
		margin-bottom: 25px;
	}

	body{
		 /* fallback */
		  background-color: #1a82f7;

		  background-repeat: repeat-x;

		  /* Safari 4-5, Chrome 1-9 */
		  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3E1050), to(#D742B8));

		  /* Safari 5.1, Chrome 10+ */
		  background: -webkit-linear-gradient(top left, #3E1050, #D742B8);

		  /* Firefox 3.6+ */
		  background: -moz-linear-gradient(top left, #3E1050, #D742B8);

		  /* IE 10 */
		  background: -ms-linear-gradient(top left, #3E1050, #D742B8);

		  /* Opera 11.10+ */
		  background: -o-linear-gradient(top left, #3E1050, #D742B8);

	}
}

@media screen and (max-width: 992px)
{
	.div40{
		min-height: auto;
		height: auto;
	}
	.step{
		width: 100%;
		display: inline-block;
		height: auto;
		margin-bottom: 20px;
	}
	.cube1, .cube2{
		display: none;
	}
	.video_border{
		background: transparent;
		border-radius: 0px;
		width: 100%;
		padding: 0px;
	}
	.full_video{
		border-radius: 0px;
		background-size: 100px 100px;
	}
	video{
		border-radius: 0px;
	}
	.video_main h2{
		padding-left: 10px;
		padding-right: 10px;
	}
	.how_to_arrow:after{
		background: transparent;
	}
	footer{
		text-align: center;
	}
	footer p{
		width: 100%;
	}
	.left_blog, .right_blog{
		height: auto;
	}
	.navbar-brand img{
		width: 100px;
		margin-top: -15px;
	}
}


input:focus, input, textarea, textarea:focus, textarea:active, input:active{
	outline:none !important;
}

/*
.lines{
	width: 20%;
	height: 20%;
	position: absolute;
}
.lines_girl{
	background: url(../images/linii_devojka.png) no-repeat;
	background-size: 100%;
	right: -5%;
	top: 9%;
}*/

@keyframes shake {
  10%, 90% {
    /*transform: translate3d(-1px, 0, 0);*/
    transform: rotate(10deg);
  }
  
  20%, 80% {
    transform: rotate(0deg);
    t/*ransform: translate3d(2px, 0, 0);*/
  }

  30%, 70% {
    /*transform: translate3d(-4px, 0, 0);*/
    transform: rotate(-10deg);

  }

  50%{
  	transform: rotate(10deg);
  }

  40%, 60% {
    /*transform: translate3d(4px, 0, 0);*/
    transform: rotate(0deg);

  }
}