@import url(reset.css);
@header-font: arial, sans-serif;

// @media screen and (width: 800px) {
// 	.block-1-left li {
// 		font-size: 14px;
// 	}
// }



.block-1 .block-1-left {
	position: relative;
}

.clearfix() {	
	&:after {
	   content: "";
	   display: table;
	   clear: both; 
	}
}

html {
    min-height: 100%;
    overflow-y: scroll;
}

body{
	font-family: "Myriad Pro", Arial, sans-serif;
	font-size: 12px;
}

section {
	margin: 0 auto;
	width: 820px;
}

h2 {
	font-size: 32px;
}

.justify {
    text-align: justify;
    /* Обнуляем для родителя*/
    line-height: 0;
    font-size: 1px; /* 1px для Opera */
    /* Лекарство для IE6-7*/
    text-justify: newspaper;
    zoom:1;
    /* Включаем в работу последнюю строку*/
    // text-align-last: justify;
}

.justify:after {
    width: 100%;
    height: 0px;
    visibility: hidden;
    overflow: hidden;
    content: '';
    display: inline-block;

}

.justify li {
    display: inline-block;
    text-align: left;
    /* Востанавливаем у потомков, кроме последнего*/
    line-height: normal;
    font-size: 14px;
    /* Без него в Opera будет отступ под элементами */
    vertical-align: top;
    /* эмуляция inline-block для IE6-7*/
    //display : inline;
    //zoom : 1;
}

.header {
	padding-top: 25px;
	padding-bottom: 10px;
	position: relative;
}

.menu {
	font-size: 0;
	margin-left: -18px;
	position: relative;
	z-index: 1;
	li {
		display: inline-block;
		margin: 0 10px 0 0;

		a {
			font-family: @header-font;
			font-size: 14px;
			color: #666;
			text-decoration: none;
			display: inline-block;
			font-weight: bold;
			padding: 9px 18px;			
			background: #E9E5D9;
			border-radius: 5px;
		}
		
		a:hover, &.active a {
			color: #eb7200;
		}
	}
	
}

.logo {
	margin-top: 9px;
	float: left;

	a {
		width: 85px;
		//height: 85px;
		display: inline-block;
		text-decoration: none;
		//background: url(../images/logo.png) no-repeat;	
	}

	h1,p {
		margin-top: 5px;
		font-size: 12px;
		color: #000;
	}
}

.phone {
	position: absolute;
	top: 5px;
	right: 0;

	.vk {
		display: inline-block;
		text-align: right;
		margin-left: 120px;
		background: url(../images/vk.png) no-repeat;
		width: 22px;
		height: 22px;
		margin-bottom: 20px;
		margin-top: 24px;
		position: relative;
		z-index: 2;

		&:hover {
			opacity: 0.7;
		}
	}

	.ok {
		display: inline-block;
		text-align: right;
		background: url(../images/ok.png) no-repeat;
		width: 22px;
		height: 22px;
		margin-bottom: 20px;
		margin-top: 24px;
		border-radius: 6px;
		position: relative;
		z-index: 2;

		&:hover {
			opacity: 0.7;
		}
	}

	.number {
		margin-top: 72px;

		p {
			font-family: @header-font;
			color: #666;
			font-weight: bold;
			font-size: 24px;
			margin-bottom: 8px;
		}
	}
}

.block-1 {
	background: url(../images/block-1-bg.png) center #FF6100 no-repeat;

	section {
		padding: 26px 0 8px;
	}

	.block-1-left {
		float: left;
		width: 600px;
		
		.h1{
			color: #fff8df;
			font-size: 45px;
			margin-bottom: 30px;
		}

		p {
			color: #ffebac;
			font-size: 25px;
			margin-bottom: 10px;
		}

		ul {
			margin-left: 20px;

			li {
				list-style: disc;
				color: #ffebac;
				font-size: 18px;
				line-height: 20px;
				padding-left: 2px;

				span {
					font-weight: bold;
				}
			}
		}
	}

	.block-1-img {
		margin-left: 428px;
		background: url(../images/block-1-img.png) no-repeat;
		width: 419px;
		height: 387px;
	}


}

.block-2 {
	section	{
		padding: 50px 0;

		h2 {
			color: #ed7200;
		}

		ul {
			margin-top: 60px;
		}

		li {
			width: 150px;

			div {
				color: #FF6100;
				font-size: 39px;
				background: #E9E5D9;
				border-radius: 50%;
				padding: 2px 0 6px;
				margin: 0 auto;
				width: 55px;
				text-align: center;
			}

			p {
				margin-top: 25px;
				font-family: @header-font;
				color: #666;
				font-size: 14px;
				text-align: center;
			}
		}

	}
}

.block-3 {
	background: #E9E5D9;

	section	{
		padding: 40px 0 30px;

		h2 {
			color: #666;
		}

		ul {
			margin-top: 50px;
			padding: 0 40px;

			li {
				width: 150px;
				position: relative;

				&:after {
					content: '';
					width: 71px;
					height: 6px;
					position: absolute;
					top: 49px;
					right: -105px;
					background: url(../images/arrow.png) no-repeat;
				}

				&:last-child:after {
					display: none;
				}

				img {
					display: block;
					margin: 0 auto;
				}

				p {
					margin-top: 15px;
					font-family: @header-font;
					color: #666;
					font-size: 14px;
					text-align: center;
				}
			}
		}
	}
}

.block-4 {
	background: #F6F4EF;

	section {
		padding: 40px 0 60px;

		h2 {
			color: #eb7200;
		}

		ul {
			margin-top: 45px;
			
			li {
				color: #666;
				font-size: 13px;
				width: 260px;
				table {
					border-collapse: collapse;



					tr {

						td {
							text-align: center;
							border: 1px solid #676767;
							padding: 7px 15px;

							&:nth-child(1) {
								width: 180px;
							}

							&:nth-child(2) {
								width: 120px;
							}
						}
					}
				}

				p {
					text-align: center;
					margin-top: 10px;
				}
			}
		}
	}
}

.block-5 {
	background: #E9E5D9;

	section {
		padding: 40px 0 36px;

		h2 {
			color: #666;
		}

		.block-5-left {
			width: 400px;
			float: left;
			color: #666;
			font-size: 22px;
			margin-top: 40px;

			form {
				float: left;
			}

			label {
				font-size: 20px;
				display: block;
				margin-bottom: 10px;
			}

			input {
				width: 125px;
				display: inline-block;
			}

			.input,
			textarea {
				background: #fff;
				border: 0;
				outline: 0;
				padding: 5px 0px;
				text-align: center;
				font-size: 22px;
				color: #666;
				-webkit-box-shadow: inset 1px 1px 5px 0px rgba(204,204,204,1);
				-moz-box-shadow: inset 1px 1px 5px 0px rgba(204,204,204,1);
				box-shadow: inset 1px 1px 5px 0px rgba(204,204,204,1);
				margin-bottom: 28px;
			}

			textarea {
				width: 235px;
				height: 80px;
				padding: 5px 10px;
				resize: none;
				color: #666;
				text-align: left;
				font-size: 13px;
				font-family: "Myriad Pro", Arial, sans-serif;
			}

			span {
				margin-left: 15px;
			}

			.btn {
				background: #E84A00;
				border: 0;
				width: 255px;
				height: 45px;
				font-size: 27px;
				color: #ffebac;
				font-weight: bold;
				cursor: pointer;
				border-radius: 3px;
			}
		}

		.block-5-img {
			float: right;
			background: url(../images/block-5-img.png) no-repeat;
			width: 414px;
			height: 356px;
		} 
	}
}

.footer {
	background: #908E80;

	.footer-menu {
		border-bottom: 1px solid #A8A699;
		background: #6F6E5A;
		height: 36px;
		font-size: 14px;
		color: #DFDDD1;
		vertical-align: middle;

		ul {
			padding-top: 11px;
			width: 820px;
			display: table;
			
			li {
				display: table-cell;
				height: 20px;
				padding: 0 20px;
			
				&:first-child {
					padding: 0 !important;
					padding-right: 20px !important;
				}
				
				&:nth-last-child(2) {
					width: 1%;
					white-space: nowrap;
					padding: 0;
					padding-left: 20px;
				}

				&:last-child {
					display: none !important;
					/*padding: 0 !important;
					padding-left: 20px !important;*/
				}
				
				&.sep {
					display: table-cell;
					position: relative;
					padding: 0 !important;
					top: -5px;
					right: 1px;
					width: 1px;
					height: 22px;
					border-left:1px solid #817F72;
				}
				
				&.active a {
					color: #fff;
				}
				
				a {
					color: #DFDDD1;
					text-decoration: none;
					
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
	
	section {
		padding: 30px 0;

		ul.footer-blocks {
			display: table;
			width: 820px;
			font-size: 0.95em;
			margin-top: 10px;
			
			a {
				color: #DFDDD1;
				
				&:hover {
					color: #fff;
				}
			}
			
			& > li {
				display: table-cell;
				padding: 0 25px;
				vertical-align: top;
				
				&:first-child {
					padding: 0 !important;
					padding-right: 30px !important;
				}
				
				&:last-child {
					padding: 0 !important;
					padding-left: 20px !important;
				}
				
				&.sep {
					position: relative;
					padding: 0 20px !important;
					top: -5px;
					right: 1px;
					width: 1px;
					border-left:1px solid #A8A699;
				}
				
				ul.footer-block li {
					padding: 0;
					vertical-align: middle;
					height: 30px;
					padding-top: 5px;
					
					&.copyright {
						margin: 0 !important;
						font-size: 12px;
					}
				}
				
				ul.footer-block-with-img {
					padding: 0 0 0 0;
					margin: 0 0 0 0;
					
					li {
						padding: 0px 0;
						vertical-align: middle;
						padding-top: 5px;
						
						&:first-child {
							padding-top: 0;
						}
						
						img {
							margin: 2px 5px 5px 5px;
						}
						
						 a {
							position: relative;
							top: -9px;
							padding-left: 2px;
						}
					}
				}
			}
		}

		.menu-bottom {
				position: relative;

			li {
				display: inline-block;
				margin-right: 45px;

				a {
					font-size: 11px;
					color: #e5e4d8;
					text-decoration: none;
					font-family: @header-font;
				}
			}

			.vk-bottom {
				position: absolute;
				top: -6px;
				right: 0px;

				a {
					display: block;
					text-align: right;
					background: url(http://localhost/biznes-sms/images/vk.png) no-repeat;
					width: 22px;
					height: 22px;
				}
			}
		}

		.copyright {
			margin-top: 40px;
			color: #e6e4d8;
			font-size: 11px;
			font-family: @header-font;

			.lps {
				float: right;
				margin-right: 5px;

				a{
					text-decoration: none;
					color: #e6e4d8;
				}
			}
		}
	}
}

section.content {
	padding: 40px 0 60px;
	font-size: 13px;
	color: #666;
	
	.h1 {
		font-size: 32px;
		margin: 0 0 0.5em;
		color: #eb7200;
		line-height: normal;
	}
	
	p {
		line-height: 1.3em;
		margin: 0 0 1em;
	}
} 
.reg-wrapper {
	
}
.reg-button {
	position: absolute;
	width: 190px;
	bottom: 30px;
	left: 140px;
	text-align: center;
	font-size: 18px;
	padding: 10px 0;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 3px;
	color: #fff;
	background: rgba(0, 0, 0, 0.5)
}


.sales{
	padding-left: 95px;
	margin-bottom: 0 !important;
	margin-top: 70px;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: bold;
	font-family: Arial, sans-serif;
}


@media screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	.block-1-left li {
		font-size: 10px !important;
	}

	.block-1 .block-1-left h1 {
		margin-bottom: 10px;
	}

	.reg-button {
		bottom: 25px;
	}

	.sales {
		font-size: 13px !important;
	}
}

.form {

}

.we-accept {
	margin-top: 65px;

	img {
		margin-top: 26px;
		margin-bottom: 60px;
	}
}

.content h1,
.content h3,
.content h4 {
    margin-bottom: 20px;
}

.content p {
    line-height: 18px;
    margin-bottom: 15px;
}

.content ul,
.content ol {
    margin-bottom: 15px;
}
.content ol {
    padding-left: 22px;
}
.content ul {
    padding-left: 17px;
}
.content ul li,
.content ol li {
    line-height: 16px;
    margin-bottom: 8px;
}
.content ul {
    list-style-type: square;
}

.content {
	.clearfix();
	
	h3 {
		font-size: 17px;
		font-weight: bold;
	}

	h4 {
		font-weight: bold;
		font-size: 15px;
	}
}

div.form {
	width: 100%;
	padding-bottom: 0;
}

.error-form {
	margin-top: 109px;
	width: 100px;
	float: right;
	background: #fff;
	border: 2px solid #CA4A00;
	border-radius: 5px;
	padding: 15px 10px 20px;
	font-size: 13px;
	color: #000;

	.form-line {
		display: block;
		height: 2px;
		background: #D1D1D1;
		margin-left: 0 !important;
		margin-bottom: 10px;
		margin-top: 7px;
	}
}

.price-btn {
	display: inline-block;
	font-size: 19px;
	padding: 5px 10px;
	border: 1px solid #619829;
	border-radius: 4px;
	background: rgb(156,224,29); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(156,224,29,1) 0%, rgba(95,150,39,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(156,224,29,1)), color-stop(100%,rgba(95,150,39,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(156,224,29,1) 0%,rgba(95,150,39,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(156,224,29,1) 0%,rgba(95,150,39,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(156,224,29,1) 0%,rgba(95,150,39,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(156,224,29,1) 0%,rgba(95,150,39,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ce01d', endColorstr='#5f9627',GradientType=0 ); /* IE6-9 */
	position: fixed;
	top: 74px;
	text-decoration: none;
	color: #fff;
	width: 458px;
	z-index: 5;
	left: 50%;
	margin-left: -270px;

	&:hover {
		background: rgb(95,150,39); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(95,150,39,1) 0%, rgba(156,224,29,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(95,150,39,1)), color-stop(100%,rgba(156,224,29,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(95,150,39,1) 0%,rgba(156,224,29,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(95,150,39,1) 0%,rgba(156,224,29,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(95,150,39,1) 0%,rgba(156,224,29,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(95,150,39,1) 0%,rgba(156,224,29,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f9627', endColorstr='#9ce01d',GradientType=0 ); /* IE6-9 */

	}
}

#made img {
    vertical-align: middle;
    opacity: 1;
}

#made a:hover img {
    opacity: 0.7;
}

#made {
    text-align: right;
}

#made a {
    color: #919191;
    text-decoration: none;
}

.creation {
    margin-bottom: 10px;
}

.action {
	float: left;
	background: url(../images/action.png) right center no-repeat #E9E5D9;
	margin-left: 53px;
	margin-top: 60px;
	border-radius: 10px;
	color: #4b4a4a;
	font-size: 16px;
	padding: 10px 100px 7px 10px;
}


.links {
    margin-top: 15px;
    margin-bottom: 0px;
    text-align: center;
}

.links li {
    margin: 5px 10px;
    display: inline-block;

    a {
    	color: #e5e4d8;
    }
}

.add-block {
	background: #E9E5D9;

	section {
		padding: 0px 0 20px;

		.add {
			list-style: none;
			text-align: center;
			display: table;
			width: 820px;

			li {
				display: table-cell;
				cursor: pointer;
				margin: 5px 10px;
				font-size: 18px;
				color: #363809 !important;

				&:hover {
					color: #E84A00 !important;
				}

				&:first-child {
					margin-left: 0;
					width: 1%;
					padding-right: 20px;
				}

				&:last-child {
					width: 1%;
				}
			}
		}

		.hide {
			margin-top: 10px;
			color: #6E6D5B;

			li {
				//text-align: center;
				font-size: 16px;
				display: none;
			}

			.active {
				display: block;
			} 
		}
	}
}


#tarif {
	width: 960px;

	.justify {
		padding-left: 0;

		li:first-child + li, li:first-child + li + li{
			table tr td{
				border: 3px solid #676767;
			}
		}

		li {
			//width: 230px;
			// width: 32%;
			width: 24%;

			table {
				width: 100%;

				td {
					padding: 7px 7px;
					vertical-align: middle;
				}
			}
		}
	}

	.justify {
		&.two-table {
			padding-left: 0;

			li:first-child + li, li:first-child + li + li{
				table tr td{
					border: 1px solid #676767;
				}
			}

			li {
				//width: 230px;
				// width: 32%;
				width: 48%;

				table {
					width: 100%;

					td {
						padding: 7px 7px;
						vertical-align: middle;
					}
				}
			}
		}
	}
}

@-webkit-keyframes scale {
    0%{
        // opacity:0;
        -webkit-transform: scale(1);
    }

    50%{
        // opacity:0;
        -webkit-transform: scale(1.2);
    }

    100%{
        //opacity:1;
        -webkit-transform: scale(1);
    }
}

@keyframes scale {
    0%{
        // opacity:0;
        transform: scale(1);
    }

    50%{
        // opacity:0;
        -webkit-transform: scale(1.2);
    }

    100%{
        //opacity:1;
        transform: scale(1);
    }
}
/*
.action-wup {
	text-align: center;
	background: #9ce01d;
	background: -moz-linear-gradient(top, #9ce01d 0%, #5f9627 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9ce01d), color-stop(100%, #5f9627));
	background: -webkit-linear-gradient(top, #9ce01d 0%, #5f9627 100%);
	background: -o-linear-gradient(top, #9ce01d 0%, #5f9627 100%);
	background: -ms-linear-gradient(top, #9ce01d 0%, #5f9627 100%);
	background: linear-gradient(to bottom, #9ce01d 0%, #5f9627 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ce01d', endColorstr='#5f9627', GradientType=0);
	position: absolute;
	top: 80px;
	left: -170px;
	border: 1px solid #619829;
	border-radius: 4px;
	-webkit-animation: scale 1.5s linear infinite;
	animation: scale 1.5s linear infinite;
	transition: all .5s;

	// &:hover {
	// 	background: #5f9627;
	// 	background: -moz-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5f9627), color-stop(100%, #9ce01d));
	// 	background: -webkit-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -o-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -ms-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: linear-gradient(to bottom, #5f9627 0%, #9ce01d 100%);
	// 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f9627', endColorstr='#9ce01d', GradientType=0);
	// }

	span {
		width: 120px;
		text-decoration: none;
		padding: 5px 10px;
		color: #fff;
		font-size: 19px;
		display: block;
	}
}
*/
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.action-wup{
	background-color: #7fc345;
	box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
	text-align: center;
	
	font-size: 19px;
	
	position: absolute;
	top: 80px;
	// top: 20px;
	left: -190px;
	
	
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	padding: 20px 10px;
	text-align: center;
	width: 148px;
	border-radius: 0px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	display: inline-block;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
	margin-bottom: 40px;

	// &:hover {
	// 	background: #5f9627;
	// 	background: -moz-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5f9627), color-stop(100%, #9ce01d));
	// 	background: -webkit-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -o-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: -ms-linear-gradient(top, #5f9627 0%, #9ce01d 100%);
	// 	background: linear-gradient(to bottom, #5f9627 0%, #9ce01d 100%);
	// 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f9627', endColorstr='#9ce01d', GradientType=0);
	// }
	
	/* animated */
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;

}

#fadeInLoad1 {
	// top: 190px;
	right: -373px;
	left: auto;
}

.pulse {
  /*-webkit-animation-name: pulse;
  animation-name: pulse;*/
  -webkit-animation: scale 1.5s linear infinite;
	animation: scale 1.5s linear infinite;
	transition: all .5s;
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    -ms-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    -ms-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    -ms-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    -ms-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}