@import "../css/reset.css";
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic);
@import "../build/mediaelementplayer.min.css";
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video{display:block}mark,rp,rt,ruby,summary,time{display:inline}

/* Global properties ======================================================== */
html {width:100%}

body {
  font-family: 'Roboto', sans-serif;
  font-size:16px;
  line-height:20px;
  color:#000;
  min-width:1030px;
  background:url(../images/body_bg.png) 50% 0 no-repeat #fff;
  -webkit-text-size-adjust: none;
}

.main{
  width: 1020px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}


.baloons_bg{
  background: url(../images/top_bg.png) 60% 0 no-repeat;
}
/*----------------------> Links And buttons <------------------*/
a {
  color:#000;
  outline:none;
  text-decoration:none;
  cursor:pointer;
}
a:hover{
  color:#;
  text-decoration:none;
}


.link{
  color: #cc2127;
  text-decoration: underline; 
}


/*----------------------> Basic Classes <------------------*/
.reg {text-transform:uppercase}
.f_left {float:left}
.f_right {float:right}
.al_left{text-align: left;}
.al_right {text-align:right}
.al_center {text-align:center}

.it{font-style:italic}
.let{letter-spacing:-1px}

.full_w{
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.val_mid{vertical-align: middle;}
/*----------------------> Indents Zero <------------------*/

.m_b_zero{ margin-bottom:0 !important;}
.m_l_zero{ margin-left:0 !important;}
.p_b_zero{ padding-bottom:0 !important;}
.p_l_zero{ padding-left:0 !important;}

/*----------------------> Positions <------------------*/
.p_abs{position: absolute;}
.p_rel{position: relative;}
.p_fix{position: fixed;}
.clear {clear:both;width:100%;line-height:0;font-size:0;}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.wrapper {overflow:hidden}
.f_elem>*:first-child{margin-top: 0 !important;}
.f_elem1>*:first-child{margin-top: 0 !important;border: none !important;}

.bg_none{ background:none !important;}

/*----------------------> Displays <------------------*/

.d_block{ display:block;}
.d_ib{ display:inline-block;}
.d_none{ display:none;}
.d_tc{ display:table-cell;}
.d_t{ display:table;}


/*----------------------> Basic Colors <------------------*/



/*======================> Header <======================*/

header {
  padding: 49px 0 0;
}
.logo{
  padding: 0 0 0 28px;
  margin-bottom: 40px;
}
  .logo a{
    display:block;
    width:140px;
    height:50px;
    background:url(../images/logo.png) 0 0 no-repeat;
    text-decoration:none;
    text-indent:-9999px;
  }

.video_box{
  width: 779px;
  border: 8px solid #fff;
  margin: 0 0 20px 25px;
}
.social_likes{
  position: relative;
  right: -30px;
  bottom: 70px;
}

[class^="birth_img_"]{
  position: absolute;
}

.birth_img_0{
  right: 647px;
  bottom: 0px;
}

.birth_img_1{
  right: 98px;
  bottom: -118px;
}

.birth_img_2{
  right: -226px;
  bottom: -140px;
  z-index: 10;
}

.birth_img_3{
  right: -157px;
  bottom: 17px;
}

.birth_img_4{
  right: -167px;
  bottom: -95px;
}
/*=====================> Content ========================*/
#content {padding: 112px 0px 50px;}
.cont_pad{padding:0 0 0 0 !important;}

.birth_img_4 {
  -webkit-animation: baloons 12s 100;
  -moz-animation: baloons 12s 100;
  -o-animation: baloons 12s 100;
  -ms-animation: baloons 12s 100;
}

@-webkit-keyframes baloons {

  0{
    -webkit-transform: translateX(0px) translateY(0px);
  }

  25%{
    -webkit-transform: translateX() translateY(-45px);
  }

  50%{
    -webkit-transform: translateX(0) translateY(-50px);
  }

  75%{
    -webkit-transform: translateX(0) translateY(-20px);
  }
  100%{
    -webkit-transform: translateX(0px) translateY(0px);
  }

}

@-moz-keyframes baloons {

  0{
    -moz-transform: translateX(0px) translateY(0px);
  }

  25%{
    -moz-transform: translateX() translateY(-45px);
  }

  50%{
    -moz-transform: translateX(0) translateY(-50px);
  }

  75%{
    -moz-transform: translateX(0) translateY(-20px);
  }
  100%{
    -moz-transform: translateX(0px) translateY(0px);
  }

}

@-o-keyframes baloons {

  0{
    -o-transform: translateX(0px) translateY(0px);
  }

  25%{
    -o-transform: translateX() translateY(-45px);
  }

  50%{
    -o-transform: translateX(0) translateY(-50px);
  }

  75%{
    -o-transform: translateX(0) translateY(-20px);
  }
  100%{
    -o-transform: translateX(0px) translateY(0px);
  }

}

@-ms-keyframes baloons {

  0{
    -ms-transform: translateX(0px) translateY(0px);
  }

  25%{
    -ms-transform: translateX() translateY(-45px);
  }

  50%{
    -ms-transform: translateX(0) translateY(-50px);
  }

  75%{
    -ms-transform: translateX(0) translateY(-20px);
  }
  100%{
    -ms-transform: translateX(0px) translateY(0px);
  }

}

/*=====================> Paragraphs ========================*/

p {margin-bottom:20px}
/*=====================> Titles ========================*/
h2,h3,h4{
  font-weight:normal;
}
.title1,
.title2{
  font-weight: 300;
  font-size: 40px;
  line-height: 1.1;
}
.title1{
  padding: 3px 0 13px 23px;
  background: url(../images/bg_div1.png) 0 0 no-repeat;
}
.title2{
  background: url(../images/bg_div2.png) 0 0 no-repeat;
  padding: 6px 0 10px 30px;
  margin: -13px 0 30px 50px;
}

.title_box:after{
  display: block;
  position: absolute;
  width: 56px;
  height: 55px;
  left: 50%;
  margin: 0 0 0 60px;
  bottom: -8px;
  background: url(../images/arrow_commit.png) 0 0 no-repeat;
  content: ""
}



.confetti{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
}


/*================================>> hovers <<========================================*/
a{
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
a:hover{
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}



/*================================>> Footer <<========================================*/
footer {
  padding:22px 0 26px;
  font-size: 13px;
  line-height: 1.23;
  color: #707070;
}


.copy{
  font-size: 12px;
}