/*
Project: Labrin.net
Author: Muradov Sadig (coding&desing)
Author URL: http://sadig.muradov.org
*/
/*********** custom **********/
* { margin:0; padding:0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
body {color: #4c5564; font-family: Tahoma, Arial, sans-serif; background:#000 url(../img/back.jpg) scroll no-repeat center 0px; text-align:center;}
a {color: #0066cc; text-decoration:none;}
a:hover {color: #808080;text-decoration:underline;}
/*********** keyframes ***********/
@-webkit-keyframes effect-1 {
    0% {bottom: -90px;-webkit-transform: scale(1,1);animation-timing-function: linear;opacity:1;}
	50% {-webkit-transform: translate(80px, 80px) scale(0.2, 0.2);animation-timing-function: linear;}
    100% {bottom: 330px;-webkit-transform: translate(5px, 5px) scale(0.5, 0.5);opacity:0;}
}

@-webkit-keyframes effect-2 {
    0% {bottom: -90px;-webkit-transform: translate(60px, 60px) scale(1,1);animation-timing-function: linear;opacity:1;}
	50% {-webkit-transform: translate(10px, 10px) scale(0.5, 0.5);animation-timing-function: linear;}
    100% {bottom: 330px;-webkit-transform: translate(5px, 5px) scale(0.1, 0.1);opacity:0;}
}

@-webkit-keyframes effect-3 {
    0% {bottom: -90px;-webkit-transform: translate(-40px, -40px) scale(1,1);animation-timing-function: ease-in;}
	50% {-webkit-transform: translate(-20px, -20px) scale(0.2, 0.2);animation-timing-function: linear;opacity:1;}
    100% {bottom: 330px;-webkit-transform: translate(5px, 5px) scale(0.1, 0.1);opacity:0.3}
}

@-webkit-keyframes effect-4 {
    0% {bottom: -90px;-webkit-transform: translate(-80px, -80px) scale(1,1);animation-timing-function: ease-in;}
	50% {-webkit-transform: translate(-75px, -75px) scale(0.5, 0.5);animation-timing-function: ease-out;opacity:1;}
    100% {bottom: 330px;-webkit-transform: translate(-10px, -10px) scale(0.1, 0.1);opacity:0.1}
}
@-moz-keyframes effect-1 {
    0% {bottom: -90px;-moz-transform: scale(1,1);animation-timing-function: linear;opacity:1;}
	50% {-moz-transform: translate(80px, 80px) scale(0.2, 0.2);animation-timing-function: linear;}
    100% {bottom: 330px;-moz-transform: translate(5px, 5px) scale(0.5, 0.5);opacity:0;}
}

@-moz-keyframes effect-2 {
    0% {bottom: -90px;-moz-transform: translate(60px, 60px) scale(1,1);animation-timing-function: linear;opacity:1;}
	50% {-moz-transform: translate(10px, 10px) scale(0.5, 0.5);animation-timing-function: linear;}
    100% {bottom: 330px;-moz-transform: translate(5px, 5px) scale(0.1, 0.1);opacity:1;}
}

@-moz-keyframes effect-3 {
    0% {bottom: -90px;-moz-transform: translate(-40px, -40px) scale(1,1);animation-timing-function: ease-in;}
	50% {-moz-transform: translate(-20px, -20px) scale(0.2, 0.2);animation-timing-function: linear;opacity:1;}
    100% {bottom: 330px;-moz-transform: translate(5px, 5px) scale(0.1, 0.1);opacity:0.3}
}

@-moz-keyframes effect-4 {
    0% {bottom: -90px;-moz-transform: translate(-80px, -80px) scale(1,1);animation-timing-function: ease-in;}
	50% {-moz-transform: translate(-75px, -75px) scale(0.5, 0.5);animation-timing-function: ease-out;opacity:1;}
    100% {bottom: 330px;-moz-transform: translate(-10px, -10px) scale(0.1, 0.1);opacity:0.1}
}
/*********** logo **********/
/*.logo { background:url(../img/logo.png) scroll no-repeat left top; width:350px; margin:0 auto; height:205px; text-indent:-999em; display:block; outline:none; }*/
article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; }
canvas#labrin { /*border: 1px solid black;*/ position:absolute; left:-45px; bottom: -70px;}
.logo { background:url(../img/logo.png) scroll no-repeat left top; width:350px; margin:0 auto; height:205px; text-indent:-999em; display:block; outline:none; position:absolute; bottom:-70px; left:85px;}
/*********** balonlar olan kisim ***********/
div.CenterBox { text-align:left; width:435px; margin:0 auto; padding:0px 20px 20px;  position:relative}
div.CenterBox ul.baloon-list { margin:0; padding:0; float:left; height:275px; position:relative;width: 435px; overflow:hidden;}
div.CenterBox ul.baloon-list li { list-style:none outside none; display:inline; margin:0; padding:0; background:#fff;-webkit-border-radius: 25px;-moz-border-radius: 12px;border-radius: 12px; height:22px; width:22px; float:left; position: absolute; bottom:0;}

/*********** animation goes on  ***********/
div.CenterBox ul.baloon-list li.balon-01 { left:0; bottom: -90px; /*background-color: #9F9*/}
div.CenterBox ul.baloon-list li.balon-01 {
	-moz-animation-name: effect-1;
	-moz-animation-duration: 6s;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	
	-webkit-animation-name: effect-1;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
}
div.CenterBox ul.baloon-list li.balon-01 span {  }
div.CenterBox ul.baloon-list li.balon-02 { left:55px; bottom: -90px; /*background-color: #63F*/}
div.CenterBox ul.baloon-list li.balon-02 {
	-moz-animation-name: effect-2;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	
	-webkit-animation-name: effect-2;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal
}
div.CenterBox ul.baloon-list li.balon-02 span {  }
div.CenterBox ul.baloon-list li.balon-03 { left:110px; bottom: -90px;  /*background-color: #9C0*/}
div.CenterBox ul.baloon-list li.balon-03 {
	-moz-animation-name: effect-3;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;	
	
	-webkit-animation-name: effect-3;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
}
div.CenterBox ul.baloon-list li.balon-03 span {  }
div.CenterBox ul.baloon-list li.balon-04 {  left:165px; bottom: -90px; /*background-color:#F00*/}
div.CenterBox ul.baloon-list li.balon-04 {
	-moz-animation-name: effect-4;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	
	-webkit-animation-name: effect-4;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
}