body {
	margin: 0;
	padding: 0;
	border: 0;
	/*font-family: Verdana, sans-serif;*/
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	text-align: center;
	line-height: 16px;
	background: url() top center no-repeat #2D2E32
}

.spacing {
	margin: 0 auto;
	top: 0px;
	position: relative;
	width: 1250px;
	background-color: #ffffff;;
	z-index: 110;
	zoom: 1;
	margin-bottom: 10px;
	padding-bottom: 50px;
}

.footer {
    margin: 0 auto 50px auto;
    width: 1250px;
    text-align: center;
}
.footer a.kotisivut {
    color: #fff;
    text-decoration: none;
}

.wrapper {
	background: url(/images/shotgun/wrapper-bg.jpg) top center no-repeat #ffffff;
	position: relative;
	top: 0px;
	left: 0;
	width: 1236px;
	margin: 0 auto;
	margin-left: 7px;
	margin-top: -335px;
	min-width: 960px;
	line-height: 16px;
	opacity: 1.0;
	filter: alpha(opacity = 100);
	z-index: 110;
}

.topbar {
	float: none;
	display: block;
	width: 1236px;
	min-height: 334px;
	margin-left: 7px;
	background: url() top center no-repeat #2D2E32;
	z-index: 10000;
	border-bottom: 1px solid #2D2E32;
}

.whole_content {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	text-align: left;
	width: 960px;
	/*z-index: 10;*/
	border: 1px solid #8D8E8E;
}

#popup_advertisement.advertisement {
	display: none;
	float: left;
	top: 150px;
	width: 750px;
	height: 365px;
	z-index: 300000000;
	/*background-color: #ffffff;*/
	background: none repeat scroll 0 0 #FFFFFF;
	opacity: 1.0;
	border: 1px solid #cccccc;
}

#popup_advertisement.advertisement .image {
	margin-top: 0;
}

#popup_advertisement.advertisement .image:hover {
	opacity: 0.95;
}

#popup_advertisement.advertisement .close_icon {
	position: absolute;
	left: 781px;
	top: 2px;
	/*left: 719px;
	top: 5px;*/
}
#popup_advertisement.advertisement .close_icon img:hover {
	opacity: 0.75;
}



#fade {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.whole_content .header {
	position: relative;
	background: url(/images/shotgun/header-bg.jpg) top left no-repeat;
	float: none;
  height: 195px;
  opacity: 1.0;
  filter: Alpha(opacity = 100);
  /*background-color: #ffffff;*/
  width: 750px;
}

.menubar {
	position: absolute;
	float: none;
	padding-top: 75px;
	padding-left: 8px;
	top: 0px;
	left: 0px;
	width: 742px;
	height: 40px;
	background-color: #2D2E32;
	opacity: 0.8;
	filter: alpha(opacity = 80);
}

.logo {
	position: absolute;
	float: none;
	margin-left: 42px;
	margin-top: 21px;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	/*background-color: #ffffff;*/
	z-index: 123123123;
	opacity: 0.80;
	filter: alpha(opacity = 80);
}

.logo:hover {
	opacity: 0.90;
	filter: alpha(opacity = 90);
}

/*.logo:hover {
	border: 2px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
	margin-left: 48px;
	margin-top: 26px;
}*/

.whole_content .login_or_register {
	float: left;
	border: 0px solid #2D2E32;
	width: 210px;
	margin-top: -8px;
	padding-top: 0px;
	color: #ffffff;
	z-index: 100;
	zoom: 1;
	opacity: 0.95;
	filter: alpha(opacity = 95);
	overflow: hidden;
}

.whole_content .linked_in {
	float: left;
	border: 0px solid #2D2E32;
	width: 210px;
	margin-top: 10px;
	padding-top: 0px;
	color: #ffffff;
	z-index: 100;
	zoom: 1;
	opacity: 0.95;
	filter: alpha(opacity = 95);
	overflow: hidden;
}


.metrics_or_us {
	/*position: absolute;
	margin-top: 0px;
	top: 0px;*/
	float: left;
	margin-bottom: 0px;
	width: 210px;
	height: 25px;
	color: #222222;
	padding-top: 4px;
	padding-left: 20px;
}

.metrics_or_us input[type="radio"] {
	margin-left: 10px;
}

.language {
	float: left;
	margin-top: -50px;
	margin-left: -10px;
	width: 210px;
	height: 25px;
	color: #222222;
	padding-top: 4px;
	padding-left: 0px;
}
.language ul {
	display: block;
	float: left;
}

.language ul li {
	display: block;
	float: left;
	margin-right: 8px;
}

.language ul li a {
	border: 0;
}

.language ul li a img {
	border: 1px solid #333333;
	height: 20px;
	opacity: 0.75;
	filter: alpha(opacity = 75);
}

.whole_content .login_or_register .cartridge2 {
	position: relative;
	float: left;
}


.whole_content .login_or_register .login_form {
	float: left;
	opacity: 0.99;
	filter: alpha(opacity = 99);
	overflow: hidden;
}

.whole_content .login_or_register .login_form #login_ajax_loader_div,
.whole_content .login_or_register .logout_form #logout_ajax_loader_div,
.whole_content .login_or_register .logout_form #logged_in_pic_div,
.whole_content .login_or_register .login_form #login_username_password_div {
	float: left;
	margin-top: 10px;
	width: 100%;
	height: 60px;
}
.whole_content .login_or_register .logout_form #logged_in_pic_div img {
	margin-left: -20px;
	margin-top: -15px;
}

.whole_content .login_or_register .login_form #login_ajax_loader_div img,
.whole_content .login_or_register .logout_form #logout_ajax_loader_div img {
	display: block;
	float: left;
}

.whole_content .login_or_register .login_form #login_ajax_loader_div span,
.whole_content .login_or_register .logout_form #logout_ajax_loader_div span {
	float: left;
	margin-top: 10px;
	margin-left: 10px;
}

.whole_content .header .cartridge {
	position: relative;
	left: 470px;
	top: -150px;
	background: url(/images/shotgun/cartridge4.png) top left no-repeat;
	width: 283px;
	height: 345px;
	opacity: 1.0;
	filter: alpha(opacity = 100);
	filter: inherit;
	zoom: 1;
}

.whole_content .header .pellets {
	position: relative;
	left: 0px;
	top: -415px;
	background: url(/images/shotgun/pellets-bg2.png) top left no-repeat;
	width: 470px;
	height: 265px;
	opacity: 1.0;
	filter: alpha(opacity = 100);
	filter: inherit;
	zoom: 1;
}


.whole_content .middle_banner {
	float: left;
	background: url(/images/shotgun/middle_banner.jpg) top left no-repeat;
	width: 670px;
	height: 118px;
	padding-top: 8px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 8px;
	background-color: white;
	opacity: 1.0;
	filter: alpha(opacity = 100);
	font-size: 16px;
	/*line-height: 18px;*/
}

.whole_content .middle_banner.frontpage {
	padding: 0;
	margin: 0;
	width: 750px;
	height: 134px;
}

.whole_content .middle_banner h2 {
	font-size: 14px;
	margin-top: 8px;
	margin-bottom: 0px;
	color: #333333;
}

.whole_content .middle_banner .text {
	float: left;
	font-size: 14px;
	color: #333333;
}

.whole_content .middle_banner .text .read_more a  {
	float: left;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #333333;
}

.whole_content .middle_banner .text .row {
	float: left;
	margin-top: 6px;
}

.whole_content .middle_banner .text .row .current_image {
	float: left;
	width: 100px;
	height: 67px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 3px;
	/*border: 1px solid #CCCCCC;*/
}

.whole_content .middle_banner .text .row .current_image_img {
	padding: 2px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
}

.whole_content .middle_banner .text .row .current_image .date {
	float: left;
	color: #656565;
	font-size: 11px;
	font-style: italic;
	margin-right: 5px;
	padding-top: 0;
	width: 100px;
}

.whole_content .middle_banner .text .row .current_text {
	float: left;
	width: 550px;
	margin-left: 10px;
}

.whole_content .middle_banner .text ul {
	display: block;
	float: left;
	padding-left: 30px;
	margin-top: 0;
}

.whole_content .middle_banner .text ul li {
	display: block;
	float: left;
	width: 200px;
	height: 75px;
}

.whole_content .middle_banner .text ul li.choke_and_other {
	width: 225px;
}

.whole_content .middle_banner .text ul li h4 {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 5px;
}


#middle_banner_advertisement.advertisement {
	display: none;
	position: absolute;
	top: 194px;
	width: 750px;
	height: 135px; /* 135px - 215px */
	z-index: 9000000;
	background: none repeat scroll 0 0 #FFFFFF;
	opacity: 1.0;
	overflow: hidden;
}

#middle_banner_advertisement.advertisement .image {
	margin-top: 0;
}

#middle_banner_advertisement.advertisement .image:hover {
}

#middle_banner_advertisement.advertisement .close_icon {
	position: absolute;
	left: 721px;
	top: 2px;
	/*left: 719px;
	top: 5px;*/
	z-index: 300000;
}
#middle_banner_advertisement.advertisement .close_icon img:hover {
	opacity: 0.75;
}



.whole_content .main_content {
    float: left;
    width: 100%;
    background-color: #ffffff;
    overflow: visible;
}

.whole_content .main_content .content {
	float: left;
	margin: 0 0px 0 0;
	overflow: visible;
	padding: 0 0 0px;
	width: 750px;
	min-height: 700px;
}


.whole_content .main_content .content .actual_content {
	float: left;
	width: 730px;
	background-color: #ffffff;
	opacity: 0.9;
	filter: alpha(opacity = 90);
	padding: 10px;
	color: #222222;
}

#uploaded_image {
	float: left;
	display: block;
	border: 1px solid #cccccc;
	padding: 2px;
}


.whole_content .main_content .content .actual_content img.how_to_patternize,
.whole_content .main_content .content .actual_content img.about_shotgun_pattern {
	float: right;
	display: block;
	margin-left: 16px;
	border: 1px solid #cccccc;
	padding: 2px;
}

.whole_content .main_content .content .actual_content .most_recent_patterns {
	float: left;
	min-height: 300px;
}

/** AFFORDIA ADVERTISEMENT */
#affordia_advertisement {
    margin: 15px 0 50px 0;
    position: relative;
    /*
    border-top: 1px solid #444;
    border-left: 1px solid #444;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    */
    opacity: 0.95;
    filter: alpha(opacity=95);
    overflow: hidden;
}

#affordia_advertisement .action_block {
    top: 0px;
    color: #fff;
    margin: 0;
    max-width: 670px;
    padding: 0;
    position: absolute;
    text-align: left;
}
#affordia_advertisement .action_block h3 {
    width: 607px;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    clear: both;
    display: inline-block;
    font-size: 36px;
    font-weight: 300;
    line-height: 40px;
    margin: 0;
    padding: 16px 30px;
}

#affordia_advertisement .action_block h4 {
    width: 607px;
    /*background: rgba(105, 117, 97, 0.6) none repeat scroll 0 0;*/
    background: rgba(152, 125, 85, 0.6) none repeat scroll 0 0;
    clear: both;
    display: inline-block;
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    margin: 0;
    padding: 16px 30px;
    animation-delay: 2s;
}

#affordia_advertisement .action_block h5 {
    width: 607px;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    clear: both;
    display: inline-block;
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    margin: 0;
    padding: 16px 30px;
    animation-delay: 4s;
}

/*
#affordia_advertisement .affordia_oy_img {
    position: absolute;
    right: 15px;
    bottom: -155px;
    opacity: 1.0;
    filter: alpha(opacity=100);
    animation-delay: 4s;
}
*/

/* OTTIVIEHE.COM */
#ottiviehe_advertisement {
    margin-bottom: 50px;
}
#ottiviehe_advertisement p.onceuponatime {
	font-size: 14px;
}

#ottiviehe_advertisement p.onceuponatime:first-letter {
	font-size: 3em;
	font-weight: normal }

#ottiviehe_advertisement p.onceuponatime span {
	font-weight: bold;
	font-size: 1.5em;
	line-height: 1.0;
}
#ottiviehe_advertisement .ad {
    float: right;
    font-size: 12px;
}



/* Shotgun Patterns */
.actual_content .shotgun_patterns {
	float: left;
	width: 670px;
	min-height: 10px;
	padding-top: 10px;
}

.actual_content .shotgun_patterns .text {
	float: left;
	width: 335px;
}
.actual_content .shotgun_patterns .alphabet {
	float: left;
	width: 335px;
	margin-top: 24px;
	margin-bottom: 4px;
	font-size: 20px;
}

.actual_content .shotgun_patterns .alphabet:first-child {
	margin-top: 0;
}

.actual_content .shotgun_patterns .item {
	float: left;
	margin-left: 30px;
	width: 300px;
	font-size: 12px;
	margin-bottom: 4px;
}

.actual_content .shotgun_patterns .item a {
	text-decoration: none;
}

.actual_content .shotgun_patterns .shotgun_pattern {
	float: left;
	width: 650px;
	margin-bottom: 50px;
	border: 1px solid #CCCCCC;
	padding: 10px;
	font-family: Verdana,Arial,sans-serif;
	line-height: 1.3;
}

.actual_content .shotgun_patterns .shotgun_pattern .shotgun_name,
.actual_content .shotgun_patterns .shotgun_pattern .cartridge_name,
.actual_content .shotgun_patterns .shotgun_pattern .choke_name {
	display: block;
	margin-left: 40px;
	margin-top: -21px;
}

.actual_content .shotgun_patterns .shotgun_pattern .warning_icon {
	margin-top: 2px;
	display: block;
	float: left;
	margin-right: 8px;
}

.actual_content .shotgun_patterns .uploaded_by {
	float: right;
	width: 500px;
	margin-bottom: 0px;
	margin-right: -3px;
	padding: 0 0 2px 0;
	border: none;
	text-align: right;
}

.actual_content .shotgun_patterns .pattern_number {
	float: left;
	display: block;
	width: 100px;
	height: 18px;
	padding: 0 10px 0 10px;
	margin-bottom: -50px;
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-bottom: 1px solid #FFFFFF;
	zoom: 1;
	z-index: 10000000;
}

.actual_content .shotgun_patterns .pattern_number a {
	text-decoration: none;
	color: #222222;
}

.actual_content .shotgun_patterns .pattern_number .web {
	margin-top: 2px;
	margin-right: 6px;
	float: left;
}

.actual_content .shotgun_patterns .status {
	float: left;
	width: 673px;
	margin-top: -50px;
	padding: 2px 0 0 0;
	border: none;
	text-align: right;
}

.actual_content .shotgun_patterns .status textarea {
	width: 275px;
	height: 50px;
	color: #222222;
	border: 1px solid #CCCCCC;
	resize: none;
	padding: 5px;
}

.actual_content .shotgun_patterns .comments {
	display: block;
	float: right;
	width: 500px;
	height: 50px;
	color: #222222;
	border: 1px solid #CCCCCC;
	resize: none;
	padding: 5px;
}

.actual_content .shotgun_patterns .comment_title {
	display: block;
	float: right;
	width: 500px;
	height: 20px;
}

.actual_content .shotgun_patterns .accept_or_reject_radio {
	display: block;
	float: right;
	width: 285px;
	margin-left: 215px;
	margin-top: 20px;
	height: 60px;
	text-align: left;
}

.actual_content .shotgun_patterns .button_row {
	display: block;
	float: right;
	widht: 500px;
	margin-top: 25px;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block {
	float: left;
	font-size: 14px;
	width: 355px;
	margin-bottom: 20px;
	position: relative;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_percentage:hover {
	cursor: pointer;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution,
.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_percentage {
	float: right;
	width: 202px;
	height: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	border: 1px solid #CCCCCC;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_percentage :hover {
	height: 18px;
	border: 1px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
	cursor: pointer;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .inner {
	float: left;
	height: 20px;
	text-align: center;
	color: #ffffff;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .inner:hover,
.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .outer:hover {
	height: 18px;
	border: 1px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
	cursor: pointer;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .inner.sparse {
	background-color: #AA4643;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .inner.dense {
	background-color: #89A54E;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_percentage .percent {
	height: 20px;
	background-color: #90B1D8;
	color: #ffffff;
	text-align: center;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .outer {
	float: left;
	height: 20px;
	text-align: center;
	color: #222222;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .outer {
	background-color: #ffffff;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info {
	float: left;
	width: 200px;
	margin-right: 50px;
	margin-top: 10px;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info .row {
	width: 200px;
	height: 16px;
	margin-left: 8px;
	font-size: 10px;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info .row .box {
	float: left;
	width: 12px;
	height: 12px;
	border: 1px solid #CCCCCC;
	margin-right: 15px;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info .row .box.sparse {
	border: 1px solid #CCCCCC;
	background-color: #AA4643;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info .row .box.dense {
	border: 1px solid #CCCCCC;
	background-color: #89A54E;
}

.actual_content .shotgun_patterns .shotgun_pattern .info_block .hit_distribution .hit_distrubution_info .row .description {
	float: left;
	width: 150px;
	font-size: 10px;
}



.actual_content .shotgun_patterns .shotgun_pattern .pattern_image {
	float: left;
	width: 250px;
	height: 250px;
	border: 1px solid #CCCCCC;
	padding: 20px;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image.blue {
	/*border: 1px solid #438BC5;*/
	background-color: #f3f3f3;



/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #F3F3F3 0%, #FFFFFF 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #F3F3F3 0%, #FFFFFF 100%);

/* Opera */
background-image: -o-linear-gradient(top, #F3F3F3 0%, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F3F3F3), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #F3F3F3 0%, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #F3F3F3 0%, #FFFFFF 100%);
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_img {
	float: none;
	position: absolute;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .pellets {
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	opacity: 0.90;
	filter: alpha(opacity=90);
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .pellets .pellet {
  display: inline-block;
  position: absolute;
	width: 5px;
	height: 5px;
	background: url('/images/shotgun/pellet.png') no-repeat;
	z-index: 8000;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .pellets .pellet.highlight {
	background: url('/images/shotgun/pellet_highlight.png') no-repeat;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .pellets .average_pellet_hit {
  display: inline-block;
  position: absolute;
	width: 51px;
	height: 51px;
	background: url('/images/shotgun/avg_sight.png') no-repeat;
	z-index: 10000;
}


.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .holes {
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	opacity: 0.75;
	filter: alpha(opacity=75);
	z-index: 5000;
	overflow: hidden;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .holes .hole {
  display: inline-block;
  position: absolute;
	width: 41px;
	height: 41px;
	background: url('/images/shotgun/clay_12_5_black2_small.png') no-repeat;
	opacity: 0.50;
	filter: alpha(opacity=50);
	z-index: 5000;
	overflow: hidden;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .holes .hole img {
  display: block;
	opacity: 0.25;
	filter: alpha(opacity=25);
	width: 41px;
	height: 41px;
	z-index: 5000;
	overflow: hidden;
	border: 1px solid red;
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors {
	position: absolute;
	width: 250px;
	height: 250px;
	opacity: 0.95;
	filter: alpha(opacity=95);
	z-index: 5000;
	overflow: hidden;
}

.pattern_mallard {
	margin-top: 0px;
	margin-left: 0px;
	z-index: 900;
	background: url('/images/shotgun/game_targets/mallard.png') no-repeat;
	width: 260px;
	height: 187px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.pattern_mallard_img {
	display: block;
	margin-top: 72px;
	margin-left: 6px;
	z-index: 5000;
}

.pattern_crow {
	margin-top: 0px;
	margin-left: 0px;
	z-index: 900;
	background: url('/images/shotgun/game_targets/crow.png') no-repeat;
	width: 250px;
	height: 180px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.pattern_crow_img {
	display: block;
	margin-top: 72px;
	margin-left: 12px;
	z-index: 5000;
}

.pattern_canada_goose {
	margin-top: 0px;
	margin-left: 0px;
	z-index: 900;
	background: url('/images/shotgun/game_targets/canada_goose.png') no-repeat;
	width: 320px;
	height: 180px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.pattern_canada_goose_img {
	display: block;
	margin-top: -20px;
	margin-left: -50px;
	z-index: 5000;
}

.pattern_capercaillie_male {
	margin-top: 0px;
	margin-left: 0px;
	z-index: 900;
	background: url('/images/shotgun/game_targets/capercaillie_male.png') no-repeat;
	width: 225px;
	height: 241px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.pattern_capercaillie_male_img {
	display: block;
	margin-top: 0px;
	margin-left: 27px;
	z-index: 5000;
}

.pattern_hasel_grouse {
	margin-top: 0px;
	margin-left: 0px;
	z-index: 900;
	background: url('/images/shotgun/game_targets/hazel_grouse.png') no-repeat;
	width: 110px;
	height: 118px;
	/*background-color: rgba(255, 255, 255, 0.5);*/
}

.pattern_hazel_grouse_img {
	display: block;
	margin-top: 70px;
	margin-left: 85px;
	z-index: 5000;
}


.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector1,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector2,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector3,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector4,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector5,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector6,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector7,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector8,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector9,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector10,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector11,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector12,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector13,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector14,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector15,
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector16 {
	position: absolute;
	display: block;
	font-size: 22px;
	font-weight: bold;
	/*width: 75px;
	height: 50px;*/
	z-index: 5000;
	/*color: #de4343;*/
	color: #AA4643;
	/*opacity: 0.85;
	filter: alpha(opacity = 85);*/
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.25);
}

.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector1 {
	top: 20px;
	left: 140px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector2 {
	top: 45px;
	left: 185px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector3 {
	top: 90px;
	left: 205px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector4 {
	top: 135px;
	left: 205px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector5 {
	top: 180px;
	left: 185px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector6 {
	top: 205px;
	left: 140px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector7 {
	top: 205px;
	left: 90px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector8 {
	top: 180px;
	left: 45px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector9 {
	top: 135px;
	left: 25px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector10 {
	top: 90px;
	left: 25px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector11 {
	top: 45px;
	left: 45px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector12 {
	top: 20px;
	left: 90px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector13 {
	top: 90px;
	left: 140px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector14 {
	top: 135px;
	left: 140px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector15 {
	top: 135px;
	left: 90px;
}
.actual_content .shotgun_patterns .shotgun_pattern .pattern_image .wannsee_sectors .wannsee_sector16 {
	top: 90px;
	left: 90px;
}

.actual_content .shotgun_patterns .shotgun_pattern .options {
	float: left;
	width: 290px;
	padding-top: 10px;
}

.actual_content .shotgun_patterns .shotgun_pattern .options .pattern_logo_image {
	float: right;
	width: 76px;
	height: 70px;
	margin-top: -55px;
	margin-bottom: 5px;
}

.actual_content .shotgun_patterns .shotgun_pattern .options .rateinfo {
	/*color: #de4343;*/
}

.pattern ul.shotgun_combinations li { margin-bottom: 6px; }
.pattern .preview {
	float: left;
	margin-top: 40px;
}
.pattern .header_information {
	float: left;
	width: 50%;
	font-weight: bold;
	margin-bottom: 15px;
}

.pattern .pattern_image_area {
	float: left;
	width: 520px;
	height: 520px;
	padding-left: 20px;
	padding-top: 20px;
	border: 1px solid #8D8E8E;
}

.pattern .pattern_image_area .scale {
	float: left;
	width: 505px;
	height: 10px;
	margin-top: -17px;
}

.pattern .pattern_image_area .pattern_image_div,
.pattern .pattern_image_area .wannsee_img_div {
	position: absolute;
	display: block;
	top: 550px;
	left: 60px;
	width: 500px;
	height: 500px;
	overflow: hidden;
	border: 1px dashed #8D8E8E;
	opacity: 0.85;
	filter: alpha(opacity = 85);
}

.pattern .pattern_image_area .wannsee_img_div .wannsee_sector1,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector2,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector3,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector4,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector5,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector6,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector7,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector8,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector9,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector10,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector11,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector12,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector13,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector14,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector15,
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector16 {
	position: absolute;
	display: block;
	font-size: 36px;
	width: 75px;
	height: 50px;
	z-index: 123123;
	color: #de4343;
	opacity: 0.9;
	filter: alpha(opacity = 90);
}

.pattern .pattern_image_area .wannsee_img_div .wannsee_sector1 {
	top: 40px;
	left: 280px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector2 {
	top: 90px;
	left: 370px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector3 {
	top: 180px;
	left: 410px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector4 {
	top: 270px;
	left: 410px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector5 {
	top: 360px;
	left: 370px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector6 {
	top: 410px;
	left: 280px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector7 {
	top: 410px;
	left: 180px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector8 {
	top: 360px;
	left: 90px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector9 {
	top: 270px;
	left: 50px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector10 {
	top: 180px;
	left: 50px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector11 {
	top: 90px;
	left: 90px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector12 {
	top: 40px;
	left: 180px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector13 {
	top: 180px;
	left: 280px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector14 {
	top: 270px;
	left: 280px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector15 {
	top: 270px;
	left: 180px;
}
.pattern .pattern_image_area .wannsee_img_div .wannsee_sector16 {
	top: 180px;
	left: 180px;
}

.pattern .pattern_image_area .pattern_image_div .pellet {
  display: block;
  position: absolute;
	width: 11px;
	height: 11px;
	background: url('/images/shotgun/pellet_n2_hit_tp.png') no-repeat;
	z-index: 1;
}

.pattern .pattern_image_area .pattern_image_div .sight {
  display: block;
  position: absolute;
	width: 19px;
	height: 19px;
	background: url('/images/shotgun/sight_pic.png') no-repeat;
}

.pattern .pattern_image_area .pattern_image_div .hole {
  display: block;
  position: absolute;
	width: 83px;
	height: 83px;
	background: url('/images/shotgun/clay_12_5_black2.png') no-repeat;
}

.pattern .pattern_image_area .pattern_image_div #pattern_img {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0.90;
	filter: alpha(opacity = 90);
}

.pattern .pattern_image_settings {
	float: left;
	margin-left: 10px;
	width: 115px;
}

.pattern .pattern_image_settings .title {
	font-size: 14px;
	font-weight: bold;
}

.pattern .wrong_image_upload {
	float: left;
	width: 520px;
	margin-top: 100px;
	margin-bottom: 10px;
	border-top: 1px solid #cccccc;
	padding-top: 10px;
}

.pattern .other_content_area {
	float: left;
	width: 520px;

}

.pattern .background_img_information {
	float: left;
	width: 675px;
	height: 30px;
	font-weight: normal;
	margin-top: 15px;
	margin-bottom: 30px;
}

.pattern .background_img_information .title {
	font-size: 14px;
	font-weight: bold;
}

.actual_content .navigation_block {
	float: left;
	margin-top: 0px;
	width: 660px;
}

.pattern .navigation_block {
	float: left;
	margin-top: 50px;
	width: 660px;
}

.change_password .navigation_block {
	padding-right: 170px;
	padding-top: 25px;
	width: 500px;
}

.change_password #change_pwd_btn {
	margin-bottom: 25px;
}

.forgot_credentials .navigation_block {
	float: left;
	margin-top: 10px;
	margin-bottom: 25px;
	width: 450px;
}

.whole_content .main_content .content .actual_content .register_as_a_customer_form  {
}

.progress_tracker {
	float: left;
	width: 375px;
	height: 34px;
	margin-bottom: 20px;
	margin-top: 10px;
}

#register_as_a_customer_form #registration_short_text {
	margin-top: 10px;
	margin-bottom: 15px;
}

.progress_tracker.first {
	background: url('/images/shotgun/progress_tracker_01.png') no-repeat;
}

.progress_tracker.second {
	background: url('/images/shotgun/progress_tracker_02.png') no-repeat;
}

.progress_tracker.third {
	background: url('/images/shotgun/progress_tracker_03.png') no-repeat;
}

/* Tracker with five sections */
.progress_tracker.five {
	width: 625px;
}
.progress_tracker.five.zero {
	background: url('/images/shotgun/progress_tracker_00_05.png') no-repeat;
}
.progress_tracker.five.first {
	background: url('/images/shotgun/progress_tracker_01_05.png') no-repeat;
}
.progress_tracker.five.second {
	background: url('/images/shotgun/progress_tracker_02_05.png') no-repeat;
}
.progress_tracker.five.third {
	background: url('/images/shotgun/progress_tracker_03_05.png') no-repeat;
}
.progress_tracker.five.fourth {
	background: url('/images/shotgun/progress_tracker_04_05.png') no-repeat;
}
.progress_tracker.five.fifth {
	background: url('/images/shotgun/progress_tracker_05_05.png') no-repeat;
}

.progress_tracker span {
	float: left;
	width: 114px;
	margin-top: 8px;
	margin-left: 10px;
}

.progress_tracker span.active {
	color: #ffffff;
	font-weight: bold;
}

.progress_tracker span.inactive {
	color: #000000;
	font-weight: normal;

}

#register_as_a_customer_form label {
	float: left;
	width: 175px;
}

#register_as_a_customer_form label img {
	margin-right: 10px;
	width: 18px;
	border: none;
}

#register_as_a_customer_form img {
	float: right;
	margin-left: 20px;
	clear: left;
}

#register_as_a_customer_form img.success_img {
	margin-right: 30px;
}

#register_as_a_customer_form h4 {
	clear: left;
}

.field_block {
	clear: left;
}

#reloading {
	float: left;
	height: 0;
	/*width: 600px;*/
}
#reloading.iamalive {
	height: 210px;
}

.customer_comments {
	width: 345px;
	height: 75px;
	resize: none;
	border: 1px solid #B3B3B3;
	padding: 2px;
}

.field_block label {
	float: left;
	width: 175px;
}

.change_password .field_block label {
	width: 225px;
}

.field_block.margin_below {
	margin-bottom: 16px;
}

.field_block.addnew label {
	font-weight: bold;
	color: #61b832;
}

.field_block.setvalue label {
	font-weight: bold;
	color: #4ea5cd;
}

.field_block.addnew input {
	border: 2px solid #61b832;
}

.field_block.setvalue input {
	border: 2px solid #4ea5cd;
}

.field_block.error {
	font-weight: bold;
	color: #de4343;
	background-color: white;
}

.field_block.error label {
	font-weight: bold;
	color: #de4343;
}

.field_block.error input {
	color: #de4343;
	border: 2px solid #de4343;
}

.field_block span {
	color: #000000;
}

/** Feedback */
.feedback {
	padding-left: 25px;
	padding-top: 25px;
}

.feedback .field_block {
	width: 500px;
}

.feedback .field_block input {
	width: 300px;
	border: 1px solid #B3B3B3;
}



.feedback .field_block textarea {
	height: 100px;
	width: 304px;
	border: 1px solid #B3B3B3;
	resize: none;
}

.feedback .field_block input.readonly,
.feedback .field_block textarea.readonly {
	color: #aaaaaa;
}

.feedback .field_block input:focus,
.feedback .field_block input:active,
.feedback .field_block textarea:focus,
.feedback .field_block textarea:active {
	border: 1px solid #406B9B;
}

.feedback .field_block.error {
	font-weight: bold;
	color: #de4343;
	background-color: white;
}

.feedback .field_block.error label {
	font-weight: bold;
	color: #de4343;
}

.feedback .field_block.error input,
.feedback .field_block.error textarea {
	color: #de4343;
	border: 2px solid #de4343;
}


.feedback .button_row {
	float: left;
	width: 500px;
	margin-top: 25px;
}

.feedback .button_row .send_feedback_btn {
	margin-right: 19px;
	float: right;
}

.feedback .button_row .cancel_feedback_btn {
	margin-left: 175px;
	float: left;
}

.feedback .message {
	width: 428px;
}

#terms-dialog-window, #privacy-policy-dialog-window {
	display: none;
	z-index: 84759687574;
}

.whole_content .main_content .sidebar {
	/*position: absolute;
	top: 45px;
	left: 750px;
	*/
	float: left;
	overflow: visible;
	width: 210px;
	margin-top: -284px;
	margin-bottom: 10px;
	background-color: #ffffff;
}

.whole_content .main_content .sidebar .search_component,
.whole_content .main_content .sidebar .top_shotguns_and_manufacturers,
.whole_content .main_content .sidebar .top_cartridges_and_manufacturers,
.whole_content .main_content .sidebar .pellet_counter,
.whole_content .main_content .sidebar .pattern_info,
.whole_content .main_content .sidebar .pattern_statistics {
	float: left;
	display: block;
	width: 210px;
	background-color: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
}

.whole_content .main_content .sidebar .top_shotguns_and_manufacturers .topgun,
.whole_content .main_content .sidebar .top_cartridges_and_manufacturers .topgun,
.whole_content .main_content .sidebar .pattern_info .pattern_information,
.whole_content .main_content .sidebar .pattern_statistics .pattern_statistics_block {
	display: block;
	float: left;
	min-height: 200px;
}

.whole_content .main_content .sidebar .top_shotguns_and_manufacturers .subtitle,
.whole_content .main_content .sidebar .top_cartridges_and_manufacturers .subtitle  {
	display: block;
	float: left;
}

.whole_content .main_content .sidebar .top_shotguns_and_manufacturers ul,
.whole_content .main_content .sidebar .top_cartridges_and_manufacturers ul,
.whole_content .main_content .sidebar .pattern_statistics .pattern_statistics_block ul {
	padding-left: 0;
	margin-bottom: 8px;
	clear: both;
	list-style: inside;
}

.whole_content .main_content .sidebar .search_component .ui-accordion-content {
	padding: 5px;
}

.whole_content .main_content .sidebar .search_component #search_tabs {
	float: left;
	width: 190px;
}

.whole_content .main_content .sidebar .more_search_conditions,
.whole_content .main_content .sidebar .pattern_info .admin_comments,
.whole_content .main_content .sidebar .pattern_statistics .admin_comments {
	display: block;
	float: left;
	font-size: 10px;
	margin-bottom: 15px;
}

.whole_content .main_content .sidebar .search_component #search_tabs label {
	float: left;
	width: 100%;
}
.whole_content .main_content .sidebar .search_component #search_tabs .range {
	width: 25px;
}
.whole_content .main_content .sidebar .search_component #search_tabs .range_line {
	display: block;
	float: left
}

.whole_content .main_content .sidebar .search_component #search_tabs li {
	width: 41px;
}

.whole_content .main_content .sidebar .search_component #search_tabs li a {
	width: 16px;
}

.ui-autocomplete { height: 240px; overflow-y: scroll; overflow-x: hidden;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	/*
	border-top: 1px solid red;
	border-left: 1px solid red;
	border-right: 1px solid red;
	*/
	box-shadow: 1px 1px 6px #ffffff inset;
}

.whole_content .main_content .sidebar .search_component #search_tabs #search_tab_shotgun {
	background: url('/images/shotgun/tab_icon_shotgun.png') center center no-repeat;
}

.whole_content .main_content .sidebar .search_component #search_tabs #search_tab_cartridge {
	background: url('/images/shotgun/tab_icon_cartridge.png') center center no-repeat;
}

.whole_content .main_content .sidebar .search_component #search_tabs #search_tab_choke {
	background: url('/images/shotgun/tab_icon_choke.png') center center no-repeat;
}

.whole_content .main_content .sidebar .search_component #search_tabs #search_tab_settings {
	background: url('/images/shotgun/tab_icon_settings.png') center center no-repeat;
}

.right_banner {
	position: absolute;
	width: 320px;
	background-color: #ffffff;
	top: 195px;
	left: 1110px;
	border: 1px solid #cccccc;
}

.right_banner .close_icon {
	position: absolute;
	left: 292px;
	top: 2px;
	z-index: 3000000;
}
.right_banner .close_icon img:hover {
	opacity: 0.75;
}

.right_banner .advertisement {
	float: left;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 0;
}

.right_banner .advertisement.first {
	margin-top: 10px;
}

.right_banner .advertisement div {
	padding: 0;
}

input {
	border: 1px solid #B3B3B3;
	background: url('/images/shotgun/input-field-bg.png') top left repeat-x;
	background-color: #ffffff;
	margin-bottom: 4px;
	padding: 2px;
	cursor: default;
}

input.with_dropdown_icon {
	display: block;
	float: left;
}

.select_list {
}
.select_icon_img {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 34px;
	height: 22px;
}

.select_icon_img.shotgun {
	background: url('/images/shotgun/select_icon_shotgun.png');
}
.select_icon_img.cartridge {
	background: url('/images/shotgun/select_icon_cartridge.png');
}
.select_icon_img.choke {
	background: url('/images/shotgun/select_icon_choke.png');
}
.select_icon_img.settings {
	background: url('/images/shotgun/select_icon_settings.png');
}

input.with_dropdown_icon.shotgun {
	background: url('/images/shotgun/dropdown_icon_shotgun2.png') top right no-repeat;
}
input.with_dropdown_icon.cartridge {
	background: url('/images/shotgun/dropdown_icon_cartridge.png') top right no-repeat;
}
input.with_dropdown_icon.choke {
	background: url('/images/shotgun/dropdown_icon_choke.png') top right no-repeat;
}
input.with_dropdown_icon.settings {
	background: url('/images/shotgun/dropdown_icon_settings.png') top right no-repeat;
}

input.disabled {
	color: #B3B3B3;
}

input:focus,
input:active {
	border: 1px solid #406B9B;
}

input#pelletDiameter, input#counterShotSize { border: 0; }

.ui-spinner-input {
	margin-right: 20px;
}

#show_messages h3 {
	font-size: 14px;
	font-weight: bold;
	/*margin-left: 25px;*/
}

#show_messages p {
	margin-left: 30px;
}

.message
{
		-webkit-background-size: 40px 40px;
		-moz-background-size: 40px 40px;
		background-size: 40px 40px;
		background-image: -webkit-gradient(linear, left top, right bottom,
								color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
								color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
								color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
								to(transparent));
		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);

		 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 width: 693px;
		 border: 1px solid;
		 color: #fff;
		 padding-top: 15px;
		 padding-right: 15px;
		 padding-bottom: 15px;
		 padding-left: 40px;
		 position: absolute;
		 _position: absolute;
		 text-shadow: 0 1px 0 rgba(0,0,0,.5);
		 -webkit-animation: animate-bg 5s linear infinite;
		 -moz-animation: animate-bg 5s linear infinite;
		 opacity: 0.75;
		 filter: alpha(opacity = 75);
		 z-index: 300000;
}

.info
{
		 /*background-color: #4ea5cd;
		 border-color: #3b8eb5;*/
		 background-color: #438BC5;
		 border-color: #438BC5;
}

.error
{
		 background-color: #de4343;
		 border-color: #c43d3d;
}

.warning
{
		 background-color: #eaaf51;
		 border-color: #d99a36;
}

.success
{
		 background-color: #61b832;
		 border-color: #55a12c;
}

.message h3
{
		 margin: 0 0 5px 0;
}

.message p
{
		 margin: 0;
}

@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}


@-moz-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

#trigger-list
{
		 text-align: center;
		 margin: 100px 0;
		 padding: 0;
}

#trigger-list li
{
		 display: inline-block;
		 *display: inline;
		 zoom: 1;
}

#trigger-list .trigger
{
		 display: inline-block;
		 background: #ddd;
		 border: 1px solid #777;
		 padding: 10px 20px;
		 margin: 0 5px;
		 font: bold 12px Arial, Helvetica;
		 text-decoration: none;
		 color: #333;
		 -moz-border-radius: 3px;
		 -webkit-border-radius: 3px;
		 border-radius: 3px;
}

#trigger-list .trigger:hover
{
		background: #f5f5f5;
}

/*--------------------------------------*/

.centered
{
		 text-align: center;
}

.twitter-follow-button
{
		 position: relative;
		 top: 7px;
}


ul.ui-autocomplete li.ui-menu-item {
	text-align:left;
}

.ui-widget-content, ui-accordion-content {
	text-align:left;
}

.float_left {
	float: left;
}
.float_right {
	float: right;
}
.margin_right {
	margin-right: 16px;
}
.margin_top {
	margin-top: 16px;
}
.margin_left {
	margin-left: 16px;
}

.clear_both {
	height: 1px;
	clear: both;
}

.message_image {
	display: block;
	float: left;
	margin-right: 12px;
}

.add_btn_image {
	float: left;
	margin-left: 12px;
	margin-right: 12px;
	width: 16px;
}

.hidden {
	visibility: hidden;
	position: absolute;
}

.visible {
	visibility: visible;
	position: relative;
}

.invisible {
	opacity: 0.0;
	filter: alpha(opacity = 0);
}

.bold {
	font-weight: bold;
}

.underline {
	text-decoration: underline;
}

.no_text_decoration {
	text-decoration: none;
}

.font14 {
	font-size: 14px;
}

.gray_color {
	color: #333333;
}

.info_color {
	color: #438BC5;
}

.success_color {
	color: #61b832;
}

.error_color {
	color: #de4343;
}

.blue_color {
	color: #438BC5;
}

.error_borders {
	border: 2px solid #de4343;
	padding: 8px;
}

.image_borders {
	border: 1px solid #CCCCCC;
	padding: 2px;
}

.menubar .button_active {
	border: 2px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
}

.menubar .own_shotgun_pattern {
	float: right;
	margin-right: 10px;
	font-weight: bold;
	/*color: #95D000;
	border: 1px solid #95D000;*/
	/*box-shadow: 1px 1px 6px #95D000;*/
}

.sub_menubar {
	font-size: 12px;
}
.sub_menubar .button_active {
	border: 2px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
}

/* Tooltip */
.ui-tooltip {
	border: 1px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;
	z-index: 3200000;
}




/*------------------POPUPS------------------------*/
#fade {
	display: none;
	background: #000;
	position: fixed; left: 0; top: 0;
	z-index: -20;
	width: 100%; height: 100%;
	opacity: .30;
	z-index: 1150;
}

.popup_block {
	display: none;
	background: #ffffff;
	padding: 20px;
	/*border: 3px solid #BC8F8F;*/
	border: 2px solid #358ae0;
	box-shadow: 1px 1px 6px #358ae0;

	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 999999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color: #333333;
}

.popup_block img {
	margin-top: -20px;
}

img.btn_close {
	float: right;
	margin: -55px -55px 0 0;
	border: 0;
}

img.btn_close:hover {
	cursor: pointer;
}

.popup p {
	padding: 5px 10px;
	margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}

#popup_feedback_form {
	width: 500px;
	height: 400px;
}

#feedback {
	display: block;
	float: left;
	width: 100%;
	height: 400px;
	opacity: 1.0;
	filter: alpha(Opacity=100);
	background-color: #ffffff;
	text-align: left;
	z-index: 2000;
}


.shotgun_table {
}

.shotgun_table th {
	background-color: #2D2E32;
	border: 1px solid: #ffffff;
	color: #ffffff;
}

.shotgun_table td {
	padding: 4px;
}



/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 0px; background: #fff; border: 0px solid #fff; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; box-shadow: 0 0px 0px rgba(0,0,0,.2); -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.2); -moz-box-shadow: 0 0px 0px rgba(0,0,0,.2); -o-box-shadow: 0 0px 0px rgba(0,0,0,.2); zoom: 1; float: left; width: 750px; height: 135px;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(/images/shotgun/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; display: none; /*added*/ }
.flex-direction-nav .flex-prev {left: -36px; display: none; /*added*/ }
.flexslider:hover .flex-next {opacity: 0.8; filter: alpha(opacity = 80); right: 5px; display: block; /*added*/}
.flexslider:hover .flex-prev {opacity: 0.8; filter: alpha(opacity = 80); left: 5px; display: block; /*added*/}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1; filter: alpha(opacity = 100);}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 5px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; filter: alpha(opacity = 70); cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1; filter: alpha(opacity = 100);}
.flex-control-thumbs .flex-active {opacity: 1; filter: alpha(opacity = 100); cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; filter: alpha(opacity = 100); left: 0;}
  .flex-direction-nav .flex-next {opacity: 1 filter: alpha(opacity = 100); right: 0;}
}

.flexslider .slides .current_image {
	position: absolute;
	width: 110px;
	height: 90px;
	top: 15px;
	left: 50px;
}

.flexslider .slides .current_image .current_image_img {
	padding: 1px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
}

.flexslider .slides .current_image .date {
	float: left;
	color: #656565;
	font-size: 11px;
	font-style: italic;
	margin-left: 5px;
	padding-top: 0;
	width: 110px;
}

.flexslider .slides .title {
	position: absolute;
	width: 550px;
	height: 20px;
	top: 15px;
	left: 175px;
 	color: #333333;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
  color: #333333;
}

.flexslider .slides .text {
	position: absolute;
	width: 275px;
	height: 90px;
 	color: #333333;
  margin-bottom: 0;
}

.flexslider .slides .text.first {
	top: 35px;
	left: 175px;
}

.flexslider .slides .text.second {
	top: 35px;
	left: 450px;
}

.shadow {
	box-shadow: 6px 4px 4px rgba(60, 60, 60, 0.35);
}



/* JQUERY RateIt */

div.rateit
{
    display: -moz-inline-box;
    display: inline-block;
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

div.rateit div.rateit-range
{
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
    background: url(/images/shotgun/star.gif);
    height: 16px;
}

/* for IE 6 */
* html div.rateit, * html div.rateit div.rateit-range
{
    display: inline;
}

/* for IE 7 */
* + html div.rateit, * + html div.rateit div.rateit-range
{
    display: inline;
}

div.rateit div.rateit-hover, div.rateit div.rateit-selected
{
    position: absolute;
    left: 0px;
}

div.rateit div.rateit-hover-rtl, div.rateit div.rateit-selected-rtl
{
    left: auto;
    right: 0px;
}

div.rateit div.rateit-hover
{
    background: url(/images/shotgun/star.gif) left -32px;
}

div.rateit div.rateit-hover-rtl
{
    background-position: right -32px;
}

div.rateit div.rateit-selected
{
    background: url(/images/shotgun/star.gif) left -16px;
}

div.rateit div.rateit-selected-rtl
{
    background-position: right -16px;
}

div.rateit div.rateit-preset
{
    background: url(/images/shotgun/star.gif) left -48px;
}

div.rateit div.rateit-preset-rtl
{
    background: url(/images/shotgun/star.gif) left -48px;
}

div.rateit div.rateit-reset
{
    background: url(/images/shotgun/delete.gif) 0 0;
    width: 16px;
    height: 16px;
    display: -moz-inline-box;
    display: inline-block;
    float: left;
}

div.rateit div.rateit-reset:hover
{
    background-position: 0 -16px;
}


.pattern_rating {
	float: left;
	font-weight: normal;
	font-size: 12px;
	margin-bottom: 4px;
}

.pattern_rating_result {
	float: left;
	margin-left: 8px;
	font-size: 12px;
}

.pcs {
	float: left;
	margin-left: 4px;
	font-size: 12px;
}

.pattern_rate_average {
	position: absolute;
	margin-left: 8px;
}



/* JQUERY Freeow */

/*

This stylesheet provides some sample styles to use with Freeow! You may use
these in your project or create your own!

For my samples, I'm assuming that you will call freeow() on a container with
the class .freeow applied to it.

The default template function produces markup matching this outline:

	div (classes passed in options get applied here)
		div.background
			div.content
				h2
				p
		span.icon
		span.close

Don't forget: You can make your own template function if this markup doesn't work for your project. The function must accept the title and message as arguments and return a DOM element (the message box).

Update $.fn.freeow.defaults.template or pass the function as the template
member of the options object when calling freeow().

*/


/* Boilerplate -------------------------------------------------------------- */

/* Outermost Container */
.freeow {
    position: fixed;
    width: 300px;
    z-index: 9999;
}
.freeow.freeow-shotgun {
	position: absolute;
	color: #fff;
	top: 122px;
	left: -5px;
	width: 355px;
}
.freeow.freeow-shotgun .shotstyle .background {
	height: 100px;
	color: #000;
	background: #fff none repeat scroll 0 0;
	opacity: 0.90;
	filter:alpha(opacity=90)
	border: 1px solid #444;
}
.freeow.freeow-shotgun .shotstyle:hover .background {
    border-color: #444;
}

.freeow.freeow-shotgun .shotstyle .content {
	min-height: 60px;
	margin: 5px 5px 5px 69px;
	width: 250px;
}
.freeow.freeow-shotgun .shotstyle h2 {
	font-weight: bold;
}
.freeow.freeow-shotgun .shotstyle p {
	font-weight: bold;
}

.freeow-top-right {
    top: 10px;
    right: 10px;
}
.freeow-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* Message */
.freeow > div {
    position: relative;
    margin-bottom: 5px;
	cursor: pointer;
}
.freeow .content {
    margin: 5px 5px 5px 69px;
}
.freeow h2,
.freeow p {
    margin: 0;
    padding: 0;

}
.freeow .icon {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 5px;
    left: 10px;
    background: transparent url(/images/shotgun/freeow/notice.png) no-repeat 0 0;
    z-index: 1;
}
.freeow .close {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 8px;
    background: none;
    z-index: 2;
}
.freeow div:hover .close {
    background: transparent url(/images/shotgun/freeow/close.png) no-repeat 0 0;
}


/* Icons -------------------------------------------------------------------- */

.freeow .slide .icon   { background-image: url(/images/shotgun/freeow/slide.png); }
.freeow .pushpin .icon { background-image: url(/images/shotgun/freeow/pushpin.png); }
.freeow .error .icon   { background-image: url(/images/shotgun/freeow/error.png); }


/* Specific Styles ---------------------------------------------------------- */

/* Smokey */
.freeow .smokey {
	color: white;
}
.freeow .smokey .background {
    border: 1px solid #444;
    -moz-border-radius: 12px;
	border-radius: 12px;
    background: #000;
    opacity: .65;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
.freeow .smokey:hover .background {
    border-color: #fff;
}
.freeow .smokey .content {
    margin: 5px 5px 5px 69px;
}
.freeow .smokey h2 {
    font-family: "Lucida Grande", Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}
.freeow .smokey p {
    padding-top: 8px;
    font-family: Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 16px;
}

/* Gray */
.freeow .gray {
	color: black;
}
.freeow .gray .background {
	border: 3px solid #eee;
    -moz-border-radius: 12px;
	border-radius: 12px;
    background: #eee;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
.freeow .gray:hover .background {
    border-color: #009bc5;
}
.freeow .gray .content {
    margin: 5px 5px 5px 69px;
}
.freeow .gray h2 {
    font-family: "Lucida Grande", Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}
.freeow .gray p {
    padding-top: 8px;
    font-family: Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 16px;
}

/* OSX */
.freeow .osx .background {
	border: 1px solid #939393;
	background: #eee url(/images/shotgun/freeow/osx/background.png) repeat-y top left;
    -moz-box-shadow: 2px 2px 3px #888;
    -webkit-box-shadow: 2px 2px 3px #888;
    box-shadow: 2px 2px 3px #888;
}
.freeow .osx .content {
    margin: 5px 5px 5px 87px;
}
.freeow .osx .icon {
	left: 28px;
}
.freeow .osx .close {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 1px;
    left: 1px;
    background: transparent url(/images/shotgun/freeow/osx/close.png) no-repeat 0 0;
    z-index: 2;
}
.freeow .osx:hover .close {
    background: transparent url(/images/shotgun/freeow/osx/close.png) no-repeat -16px 0;
}
.freeow .osx h2 {
    font-family: "Lucida Grande", Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
}
.freeow .osx p {
    font-family: Helvetica, arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
    line-height: 16px;
}

/* Simple */
.freeow .simple .background {
	border: 2px solid #ccc;
	background: #eee;
}
.freeow .simple .content {
    margin: 5px 5px 5px 69px;
}

/* END JQUERY Freeow */




@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

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

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

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

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

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

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

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

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

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

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

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

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

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

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

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

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

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

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

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

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

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}