@charset "UTF-8";
/*
Theme Name: Jolly 1.16
Theme URI:https://graphiks.info/
Author:www.graphiks.info
Date: Oktober 2024
*/

@font-face {
    font-family: 'jollyinternet';
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.eot);
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.eot) format('embedded-opentype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.woff2) format('woff2'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.woff) format('woff'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.ttf) format('truetype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/jollyinternet.svg#jollyinternet) format('svg');
}

@font-face {
    font-family: 'DRUCKSCH_07';
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.eot);
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.eot) format('embedded-opentype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.woff2) format('woff2'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.woff) format('woff'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.ttf) format('truetype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/DRUCKSCH_07.svg#DRUCKSCH_07) format('svg');
}

@font-face {
    font-family: 'StandardSans';
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.eot);
    src: url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.eot) format('embedded-opentype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.woff2) format('woff2'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.woff) format('woff'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.ttf) format('truetype'),
         url(//jolly.at/wp-content/themes/jolly_1.16/fonts/StandardSans.svg#StandardSans) format('svg');
}

/*Reset ------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}body {line-height: 1;}ol,ul {list-style: none;}blockquote,q {quotes: none;}blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}caption,th,td {font-weight: normal;text-align: left;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {display: block;}audio,canvas,video {display: inline-block;}audio:not([controls]) {display: none;}del {color: #333;}ins {background: #fff9c0;text-decoration: none;}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}small {font-size: smaller;}img {border: 0;-ms-interpolation-mode: bicubic;}

/*HTML Elements
------------------------------------------------------------------------------------*/
* { box-sizing: border-box; outline:none;-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
html {overflow-y: scroll; }
body, tr, td, cite, input, select, textarea {font-family:'StandardSans','Lucida Grande', Arial, Helvetica, sans-serif;line-height:1.6em;color:#333;}
body { font-size:13px; background-color: #97bf3a; background-position: left top, 210% bottom, -250px center, -320px 75%; background-size: 100% auto, 75% auto, 75% auto, 75% auto; background-repeat: no-repeat; background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_2.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_3.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_3.png);}

body.home {  background-position: left top, 210% bottom, -250px 25%, -350px 85%; }

body.page-id-32 {background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_5.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_2.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_3.png), url(//jolly.at/wp-content/themes/jolly_1.16/pics/Farbkleckse_3.png);background-position: left -250px, 210% bottom, -250px center, -320px 75%; }

h1,h2,h3,h4, .navigation, .reload   {margin:0 0 10px 0;letter-spacing:1px; font-family:'jollyinternet', Arial, Helvetica, sans-serif; }
h1,  h1.product_title, h1.page-title, h2, h3, h4 {font-size:1.4em;line-height:1.4em; color:#666 ;margin:0 0 15px 0;letter-spacing: 1px; font-weight: normal; text-transform: capitalize; }
h4 { font-size: 1.25em; color: #90BC2E; }

.archivtitle { padding-top:15px;border-top:2px dotted #ccc; margin-top:30px; } .storycontent .archivtitle:first-child   { margin-top:0;}
i {color:#999;}

p {margin-bottom:1.3em;}

small	{font-size:0.85em; padding-bottom:15px; color:#ccc; position:relative;} small a { color:#999 !important;} small a:hover {color:#eee !important;}
hr { background:0;border:1px dotted #ccc; border-width:0 0 2px 0;height: 1px;width:99.999999999999999999999999999999%;margin:10px 0;}
img { max-width: 100%; height: auto; display: block;}

/*Links*/
a, a:visited, .link,  .link:visited {color:#333;text-decoration:underline;} 
a:hover, a:active, .link:hover {color:#f7a02c; }

.storycontent a[href*=".pdf"], .storycontent a.external[href*=".pdf"], .storycontent a[href*=".zip"], a.downloadzip {background-image:url(//jolly.at/wp-content/themes/jolly_1.16/pics/PDF.png); background-repeat: no-repeat; background-position: left center;padding:4px 0 4px 25px; line-height: 28px !important; display: inline-block; margin-left: 2px; height: 28px;} 
.storycontent a[href*=".zip"], a.downloadzip {background-image:url(//jolly.at/wp-content/themes/jolly_1.16/pics/ZIP.png);}
p.download { height: 2.8em;}
.storycontent .verweise a[href*=".pdf"], .storycontent .verweise a.external[href*=".pdf"], .storycontent .verweise a {background:0; padding:0 ;line-height: normal; height: auto;  line-height:1.6em; } 
a[href*="tel"] { text-decoration: none !important;}

h2 a, h3 a, h4 a,h2 a:visited, h3 a:visited, h4 a:visited {  display: inline-block;   position: relative;  color: #f7a02c; text-decoration: none;}
h2.white a { color: #fff;}
h2 a::after, h3 a::after, h4 a::after {   content: '';   position: absolute;   width: 100%;   transform: scaleX(0);   height: 2px;   bottom: 0;   left: 0;   background-color: #f7a02c;   transform-origin: bottom right;   transition: transform 0.25s ease-out; }
h2.white a::after { background-color: #fff;}
h2 a:hover::after, h3 a:hover::after, h4 a:hover::after {   transform: scaleX(1);   transform-origin: bottom left;}

/*Layout 
------------------------------------------------------------------------------------*/
.skiplink {position:absolute;left:-9999px;top:-2000em;}

#header, #navi, #content, #footer {position:relative;width:100%;  }
#headercontent,  .navicontent, #post, .homecontent, #footercontent {position:relative;width:94%;margin:0 auto; min-width:260px; }	
#post, #footer, .homecontent {font-size: 1.1em; line-height: 1.6em; }

/*Header 
------------------------------------------------------------------------------------*/
#header a, #navi a   { text-decoration: none; }
#headercontent {padding: 7px 0 0 0;}

#header h1 { position:relative;   width: 100%;    text-align: center;  font-size: 2em ; padding-top: 85px;opacity: 0; height: 0; overflow: hidden;}
.woocommerce-page #header h1 { opacity: 0; } 

#header h1 a { text-shadow: rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) 2.83333px 0.983333px 0px, rgb(255, 255, 255) 2.35px 1.85px 0px, rgb(255, 255, 255) 1.61667px 2.51667px 0px, rgb(255, 255, 255) 0.7px 2.91667px 0px, rgb(255, 255, 255) -0.283333px 2.98333px 0px, rgb(255, 255, 255) -1.25px 2.73333px 0px, rgb(255, 255, 255) -2.06667px 2.16667px 0px, rgb(255, 255, 255) -2.66667px 1.36667px 0px, rgb(255, 255, 255) -2.96667px 0.416667px 0px, rgb(255, 255, 255) -2.95px -0.566667px 0px, rgb(255, 255, 255) -2.6px -1.5px 0px, rgb(255, 255, 255) -1.96667px -2.26667px 0px, rgb(255, 255, 255) -1.11667px -2.78333px 0px, rgb(255, 255, 255) -0.133333px -3px 0px, rgb(255, 255, 255) 0.85px -2.88333px 0px, rgb(255, 255, 255) 1.75px -2.43333px 0px, rgb(255, 255, 255) 2.45px -1.73333px 0px, rgb(255, 255, 255) 2.88333px -0.833333px 0px;color: #ee3b7f !important;}

#jolly {position:absolute;   width: 25%;    z-index: 20; left: 0; top: 0;}
#jolly img { max-width: 100%; height: auto;}
#jolly a {position:absolute;left:0;top:0;width:100%;height:100%;display:block; text-indent:-99999px;z-index:2;  }

#language {position: absolute; right: 100px; top: 20px;}
#language .wpml-ls-legacy-list-horizontal li a img.wpml-ls-flag { width: 30px !important; height: auto !important;}

/*Navigation*/
.navigation   { font-size: 1.15em;    margin: 0; z-index: 10;text-align: center;}
#navi { display: none;}

.navigation  li {position:relative;  line-height: 1em; padding:0 0 20px 0;display:inline-block;  }
.navigation  li:hover { z-index: 10;}

.navigation a, .navigation a:visited {  text-decoration:none;   display: inline-block; color: #fff; -webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1);  border:3px solid #fff; border-radius: 7px; margin-right: 10px; text-transform:capitalize; font-size: 1.25em;letter-spacing:1px; line-height: 1.5em; display: block; padding: 6px 10px 5px 10px; background: #f7a02c;}
.navigation a:hover, .navigation a:active { color: #999;}

.navigation .current-menu-item a, .navigation .current-menu-item a:visited {color:#ccc ;cursor:default; }
.navigation .current-menu-item .sub-menu a { cursor: pointer; color: #999 ;}
.navigation .current-menu-parent a { color: #ee3b7f;}
.navigation .current-menu-parent a:hover,.navigation .current-menu-item .sub-menu a:hover { color: #999;}

.navigation ul.sub-menu li a { height: auto;font-size: 1.1em; border: 0; padding: 5px 20px; }
.navigation ul.sub-menu li {display: block important; width: 100% !important;}
.navigation .current_page_ancestor a, .woocommerce-page .menu-item-51 a { color: #ccc;}
.navigation .current-menu-item ul.sub-menu li a,.navigation .current_page_ancestor ul.sub-menu li a { color: #fff ;  }
.navigation .current-menu-item ul.sub-menu li a:hover,.navigation .current_page_ancestor ul.sub-menu li a:hover { color: #ddd ;}
.navigation ul.sub-menu li.current-menu-item a {color:#ccc !important;cursor:default; }

#navi .menu-item-has-children a { padding-right: 35px;  background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/chevron-double-down.png); background-repeat: no-repeat;  background-position: right 12px top 60%;}
#navi .menu-item-has-children a:hover::after { color:#ddd;}
#navi .menu-item-has-children .sub-menu a { padding-right: 10px; background: 0; }

.navigation ul.sub-menu {  position:absolute;   top:60px;   text-align: left; height: 0;  overflow: hidden; visibility: hidden; opacity: 0; margin: 50px 0 0 0; -webkit-box-shadow: 3px 3px 3px 5px rgba(000,000,000,.1); box-shadow: 3px 3px 3px 5px rgba(000,000,000,.1);border:3px solid #fff;background: #f7a02c; padding: 10px 0 }

.navigation li:hover ul.sub-menu { height: auto;  visibility: visible; opacity: 1;  -webkit-border-radius: 7px;border-radius:  7px;min-width: 110%; margin:0 ;  }

.navigation .sub-menu	li, .navigation .menu_item_has_children:hover .sub-menu .menu_item_has_children  {float:none;font-size: .8em; text-transform: none; margin: 0; line-height: 1.6em;  white-space: nowrap; padding: 0; }

.navigation .sub-menu a, .navigation .sub-menu a:visited {height: auto; background: 0; -webkit-box-shadow: 0 0 0 0 rgba(000,000,000,0); box-shadow: 0 0 0 0 rgba(000,000,000,0); }

.responsive-menu-open #responsive-menu-container.push-left, .responsive-menu-open #responsive-menu-container.slide-left {-webkit-box-shadow: 200px 200px 200px 200px rgba(0,0,0,.3) !important; box-shadow: 200px 200px 200px 200px rgba(0,0,0,.3) !important;}

/*Content 
------------------------------------------------------------------------------------*/

h1.page-title { color: #ee3b7f; margin-top: 15px; }

.storycontent {padding:20px 20px 35px 20px; position: relative; margin-bottom: 15px;background-color: #fff; border: 5px solid #f7a02c ;border-radius: 15px; -webkit-border-radius:15px; -webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); } 
.storycontent:before {content: " ";   position: absolute;   z-index: -1;   top: 1px;  left: 1px;   right: 1px;   bottom: 1px;   border: 3px solid #ffea00; border-radius: 10px;}
.storycontent h1.page-title {margin-top: 0;}
.main_slider { margin-bottom: 15px;}

/*Breadcrumb*/
.breadcrumb { padding:0; margin:0 0 15px 0; font-size:0.9em; color:#666 !important; left: 0; background: #fff;}
.breadcrumb a { color:#666 !important;  } .breadcrumb a:hover { color:#333;}

/*Bilder, Videos, Objects, iframes, Captions*/
#post img, .wp-caption	{-webkit-border-radius:3px;border-radius:3px;} 
.alignright {margin:0 0 15px 20px;display:inline;float:right !important;} 
.alignleft, figure.alignleft {margin:0 20px 15px 0;display:inline;float:left;} 
.aligncenter  {margin:0 auto 20px auto;display:block; text-align: center;} 
.aligncenter img {margin:0 auto 8px auto;display:block; text-align: center;} 
#post .alignleft, #post .alignright  	{ max-width:45% !important;} 
.introcontent .alignleft, .introcontent .alignright { width: 30%; max-width: 150px;}
.storycontent a img, .table_td a img  	{opacity:1; border:1px solid #ccc;} 
.storycontent a:hover img, .table_td a:hover img 	{opacity:.75 !important; border-color: #f7a02c;}
.centered, .aligncenter { text-align: center;}

.storycontent figure.alignnone {  margin: 0 0 25px 0; text-align: center; display: block;}

.video-wrapper { max-width: 750px;}
.video-container { position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden; margin-bottom:10px; } 
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border: 5px solid #fff ; border-radius: 15px; -webkit-border-radius:15px;} 
  
/*Listen*/
.storycontent ul, ul.product-categories, #sidebar ul  {margin:10px 0 0 0;padding:0 0 10px 0;}	
.storycontent ul li, ul.product-categories li, #sidebar ul li {margin:0 0 5px 20px;list-style:disc;} 
.pagecontent ol li {margin:0 0 5px 20px;list-style:decimal;}

.storycontent ul.farbliste { margin: 0 0 10px 0; padding: 0;}
.storycontent ul.farbliste li {list-style: none; margin: 0 0 5px 0; width: 50%; padding-right: 10px; float: left; white-space: nowrap;}
.storycontent ul.twocols li { width: 50% !important;}
.storycontent ul.farbliste li img {  margin: 0 7px 0 0; border: 0; }

/*Paragraphliste*/
.storycontent ul.paragraph, .storycontent ul.paragraph li{ list-style: none; }
.storycontent ul.paragraph { margin: 10px 0; padding: 0;}
.storycontent ul.paragraph li { padding-left: 30px; position: relative; margin-left:10px;}
.storycontent ul.paragraph li em { position: absolute; font-style: normal;left: -10px; top: 0;}

/*Verweise anzeigen*/
.storycontent .verweise {padding: 0; margin: 0;}
.storycontent .verweise li { width:97%;  margin:0 3% 35px 0; list-style: none ; padding: 0; display:inline-block; padding-bottom: 20px !important; } 
.storycontent .verweise a, .storycontent .verweise a:visited 	{ text-decoration:none; display: block;  }
.storycontent .verweise h4 {  padding-top: 5px; font-size: 1em;}
.storycontent .product-taglist .verweis h4, .storycontent .Produktinformation h4 { overflow: auto; height: 5em; white-space: normal; }
.storycontent .verweise-neuheiten .verweis h4 { height: 3.2em;}
.storycontent .verweise .description { height: 6.8em !important; overflow: hidden; text-overflow: ellipsis; }
.storycontent .verweise li.threecolumns .description { height: 4em !important; }
.storycontent .verweise li.threecolumns { padding-right: 3%;}
.storycontent .verweise li .more-link { font-weight: 700; background: #eee; padding: 5px 15px; width: auto !important; border-radius: 3px; display: inline-block; letter-spacing: 1px; margin-bottom: 20px;}
.storycontent .product-taglist li .more-link {width: 45% !important;}
.storycontent .verweise-neuheiten .verweis h4 { height: 3.2em; white-space: normal;}
.storycontent .verweise li .more-link:hover { background: #ddd;}

.storycontent .verweise li:hover, .storycontent .verweise li:hover a h4, .storycontent .verweise li:hover a .more-link {color: #f7a02c !important;}
.storycontent .verweise li:hover img { opacity: .85 !important;}

/*Caption*/
.wp-caption-text { text-align:center !important; max-width: 100%; }

/*Tabellen*/
table {border:0 none;border-spacing:0;margin:5px 0 15px 0;} 
td, th {padding:2px 6px 2px 0;vertical-align:top;text-align:left;} 
th {font-weight:bold;}

table.border-table td, table.border-table th { padding: 3px 20px   !important; border-bottom: 1px dotted #ddd !important; }
table.border-table tr:first-child td, table.border-table th  { font-weight: bold; border-bottom: 1px solid #ccc !important;}
table.border-table tr:last-child td {border-bottom: 1px solid #ccc !important;}

.page-id-3147 h1.page-title { text-align: center;}
table.middle td {vertical-align:middle !important; }
table.middle tr td:first-child {padding: 10px 20px 10px 0;}

/*Formular, Kontakt */
form p { margin-bottom:20px;}

/*Suche*/
.searchform input {background:url(//jolly.at/wp-content/themes/jolly_1.16/pics/search.png) right center no-repeat #fff;color:#999;width:25%;border:1px solid #ddd;padding:4px;font-size:1.1em; -webkit-border-radius:2px;border-radius:2px; line-height:1.9em; }
#sidebar .searchform input, #sidebar  .dgwt-wcas-search-form input.dgwt-wcas-search-input, .dgwt-wcas-search-wrapp, .dgwt-wcas-no-submit, .dgwt-wcas-search-form, .dgwt-wcas-sf-wrapp, .dgwt-wcas-sf-wrapp  { width: 100%!important; max-width: 100% !important; box-sizing: border-box !important;}
.searchform input:focus, .searchform input:active {color:#333; background:#fff;min-width:100%;width:27%; max-width: 100% !important;}
.searchform .button {display:none;}
.search-everything-highlight {background:#FFF984;font-weight:bold;color:#000;padding:0 1px;font-style:normal;} 
.searchresult { padding: 15px 0;}
.searchresult a {text-decoration: none; display: block; }
.searchresult .more-link { text-decoration: underline;}

dl.gallery-item { padding: 0 4px 4px 0; border:0}
dl.gallery-item img { border-width:1px !important;}

/*Pagenavi*/
.wp-pagenavi:before {content:".";clear:both;} .wp-pagenavi {text-align:center;padding:20px 0;display:block;margin:20px 0;border-top:2px dotted #999;} .wp-pagenavi .pages {margin-right:10px;line-height:2em;} .wp-pagenavi a,  .wp-pagenavi .current, .wp-pagenavi .extend { text-decoration:none;display:inline;margin-right:5px;} .wp-pagenavi .current {background:#f1f1f1 !important;color:#000;}

/*Sharing*/
.shariff  { margin: 30px 0; text-align: center; padding-top: 30px;  }
.shariff  a.external {padding-right:0;background:0;margin-right:0;} 
.shariff ul:before { content: "Teilen"; display: inline; margin-right: 5px; font-weight: bold;}
body.language-en .shariff ul:before { content: "Share"; }

/*Slider*/
.ms-info {text-align: center; background: #fff; padding: 7px 20px;color: #f7a02c; font-size: 1.15em;}

/*Displays*/
.displayimage .wp-caption  {max-width: 30%;}
.displaydescription, .displayimage { width: 100%; display: block;}

/*Witze*/
.single_witz  { font-family: 'DRUCKSCH_07', Arial, sans-serif; font-size: 1.7em;  ;line-height: 1.4em;}
.witzecontent .single_witz {border-width: 2px; border-style: solid; padding: 20px 20px 0 20px; border-radius:0 15px ;  margin: 0 5% 25px 0; background: #f9f9f9;display: inline-block; width: 100%;}

.witzecontent .single_witz:nth-child(1), .witzecontent .single_witz:nth-child(7)   { border-color:#f7a02c;  } 
.witzecontent .single_witz:nth-child(2), .witzecontent .single_witz:nth-child(8)   { border-color:#64c2cc;  } 
.witzecontent .single_witz:nth-child(3), .witzecontent .single_witz:nth-child(9)  { border-color:#A7329A; } 
.witzecontent .single_witz:nth-child(4), .witzecontent .single_witz:nth-child(10)  { border-color:#e74e12; } 
.witzecontent .single_witz:nth-child(5), .witzecontent .single_witz:nth-child(11) { border-color:#06a6e0; } 
.witzecontent .single_witz:nth-child(6), .witzecontent .single_witz:nth-child(12) { border-color:#ffd700; } 

/*PopUp*/
.pum-container {font-family:'StandardSans','Lucida Grande', Arial, Helvetica, sans-serif;line-height:1.6em;color:#333; font-size: 13px; }
.pum-container ul  {margin:15px 0 0 0;padding:10px 0 ;}	
.pum-container ul li {margin:0 0 5px 20px;list-style:disc;} 
.pum-container ol li {margin:0 0 5px 20px;list-style:decimal;}

/*Glossar*/
#post .glossar { font-size: 1.25em; color: #ccc; line-height: 1.25em; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px dotted #ddd;  }
#post .glossar li {display:inline-block; list-style: none ; margin: 0 3px 10px 0; padding: 0;}
#post .glossar li a { text-decoration: none;padding: 6px 7px; display: block; border:3px solid #f7a02c; border-radius: 4px; background: #90BC2E; color: #fff;font-weight: bold; }
#post .glossar li a:focus, #post .glossar li a:hover { border:3px solid #90BC2E; border-radius: 4px; background: #f7a02c; color: #90BC2E;}
#post .glossar .current-cat a {cursor: default !important; background:#fff !important;color:#90BC2E !important; border-color: #90BC2E !important;}
.glossar_section { padding-bottom: 25px; max-width: 800px;}

/* Template Name: Zeilen Bild plus Text (2spaltig)
page-twocolumns.php  */

#columns_container {width: 100%; padding: 10px 0; }

/*Startseite
------------------------------------------------------------------------------------*/
.homecontent { display: block; margin: 15px auto; width: 100%;}
.homecontent .content_table_td, .homecontent .subelement   { background-color: #fff; border: 5px solid #fff ; border-radius: 15px; -webkit-border-radius:15px; position: relative; -webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); }
.homecontent .content_table_td:before, .homecontent .subelement:before, .homecontent #section_text .textelement:before {content: " ";   position: absolute;   z-index: -1;   top: 1px;  left: 1px;   right: 1px;   bottom: 1px;   border: 3px solid #ffea00; border-radius: 10px;}

.homecontent .table_td_slider { padding:0 !important; background: 0; border: 0;-webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,0) !important; box-shadow: 3px 2px 5px 2px rgba(000,000,000,) !important;}

.homecontent .table_table {width: 94%; margin: 0 auto;}
.homecontent .table_td a img { margin-bottom: 10px;}
.homecontent .table_td { vertical-align: top; margin-bottom: 25px; }

.homecontent .mediaelement { padding: 20px 20px 0 20px;  }
.homecontent .textelement { padding: 0 20px 20px 20px;}
.homecontent #section_text .textelement { padding: 20px;}
.homecontent .textelement a img { border-color: transparent; margin: 0 auto;}
.homecontent .textelement .more-link { font-weight: 700; background: #eee; padding: 5px 15px; width: auto !important; border-radius: 3px; display: inline-block; letter-spacing: 1px; text-decoration: none; white-space: nowrap;}
.homecontent .textelement .more-link:hover { background: #ddd;}

.homecontent .table_td .video-container { margin-bottom:0;-webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1) !important; box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1) !important; border-radius: 15px; -webkit-border-radius:15px; } 

.master-slider-parent, .master-slider { margin: 0; padding: 0; }
.master-slider-parent .ms-slide img, .master-slider { border-radius: 13px;-webkit-border-radius: 13px; border: 5px solid #fff ;}
#section_1-01 .master-slider-parent { z-index: 2;}
#section_1-01 .placeholder { position: absolute; left: 0; top: 0; z-index: 1;}
.mainbox_image, .mainbox_image:before {background:none !important; border: 0 !important;-webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,0) !important; box-shadow: 3px 2px 5px 2px rgba(000,000,000,.0) !important;}
.mainbox_image img {border: 5px solid #fff !important ; border-radius: 15px; -webkit-border-radius:15px;-webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1);}
.mainbox_image a:hover img {opacity: .9 !important}

#section_1-02 .content_table_td, #section_1-02  { padding: 0 !important; margin-bottom: 20px;}
#section_1-02 .content_table_td img { margin: 0; padding: 0; border: 0; position: relative; width: 100%;display: block; border-radius: 13px 13px 0 0;-webkit-border-radius: 13px;}
#section_1-02 .content_table_td:hover { cursor: pointer;}
#section_1-02 .content_table_td .fixedcontent { position: absolute; bottom: 0;  width: 100%; background-color: rgba(255, 255, 255, .92);padding: 7px 15px;}
#section_1-02 .content_table_td .fixedcontent:hover {  background-color: rgba(255, 255, 255, 1);}
#section_1-02 .fixedcontent a { display: block;}

#section_1-02 .content_table_td .fixedcontent h2 { margin-bottom: 5px; }
#section_1-02 .content_table_td .fixedcontent .kurztext {margin-bottom: 7px;}
#section_1-02 .content_table_td .fixedcontent .kurztext  a { text-decoration: none;}

#section_text { padding-bottom: 0 !important;}
#section_text .content_table_td { width: 100%;}
#section_text .content_table_td .alignleft { float: right;}

.table_td .video-wrapper { margin-bottom: 10px;}

/*Dekorfarben 
------------------------------------------------------------------------------------*/
.navigation  li.lightblue a, .navigation  li.lightblue ul.sub-menu, .homecontent .table_td_lightblue {background-color: #06a6e0; }
.navigation  li.pink  a, .navigation  li.pink ul.sub-menu, .homecontent .table_td_pink  {background-color: #ee3b7f ; }
.navigation  li.violet a, .navigation  li.violet ul.sub-menu, .homecontent .table_td_violet  {background-color: #A7329A; }
.navigation  li.turk a, .navigation  li.turk ul.sub-menu, .homecontent .table_td_turk  {background-color: #08d2a8; }
.navigation  li.darkorange a, .navigation li.darkorange ul.sub-menu, .homecontent .table_td_darkorange  {background-color: #e74e12; }
.navigation  li.yellow a, .navigation li.yellow ul.sub-menu, .homecontent .table_td_yellow  {background-color: #ffd700 ; }
.navigation  li.aqua a, .navigation li.aqua ul.sub-menu, .homecontent .table_td_aqua {background-color: #64c2cc; }
.navigation  li.orange a, .navigation li.orange ul.sub-menu, .homecontent .table_td_orange {background-color: #f7a02c; }

/*WooCommerce 
------------------------------------------------------------------------------------*/

.entry-summary img.attachment-large { display: inline-block; margin: 0 3px 3px 0; float: left !important;}
.woocommerce-product-details__short-description { clear: left; padding-top: 10px;}

.product_meta .sku_wrapper, .product_meta .posted_in,  .product_meta  .tagged_as, .product_meta .ean-container, dl.produkt-metadaten dt   { display: block; font-weight: bold; position: relative; width: 100%;}
.product_meta .sku, .product_meta .posted_in a,  .product_meta  .tagged_as a,  .product_meta  .woocommerce-ean-code, dl.produkt-metadaten dd { /*position: absolute; left: 115px; top: 0;*/ font-weight: normal; white-space: nowrap; width: auto; }
.product_meta .shariff  { text-align: left !important; width: 100%;   }

.woocommerce-loop-product__title { color: #f7a02c;letter-spacing: normal;}
.type-product { padding-top: 15px;}

.storycontent .woocommerce-product-details__short-description ul  { margin: 0;}
.storycontent .woocommerce-product-details__short-description ul li {margin:0 0 0 20px;} 

.woocommerce-product-gallery .woocommerce-product-gallery__image img, .woocommerce-product-gallery--columns-6 .flex-control-thumbs li img { border:1px solid #ccc !important; border-radius: 3px; -webkit-border-radius: 3px;margin: 0 .5% 2px 0; }
.woocommerce-product-gallery--columns-6 .flex-control-thumbs li { padding 0 2px 2px 0;}
.woocommerce-product-gallery .woocommerce-product-gallery__image img:hover { border-color: #999;}

.comment-form-comment label { display: block;}

 h1.product_title {color: #A7329A;}
.products .product a p strong { display: inline !important;}

.widget_recently_viewed_products li { position: relative;width: 45% !important;max-width: 47% !important; display: inline-block !important;  margin: 0 3% 10px 0 !important; padding: 0 !important; border:1px solid #ccc; border-radius: 3px; -webkit-border-radius:3px; font-size: .75em; font-weight: normal;}
.widget_recently_viewed_products li:nth-child(even) { float: right; margin-right: 0 !important; }
.widget_recently_viewed_products li:hover { border-color: #999;}
.widget_recently_viewed_products img { width: 100% !important;max-width: 100% !important; padding: 0 !important;}
.widget_recently_viewed_products .product-title { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2px 7px; text-align: center; background-color: rgba(255, 255, 255, .8); color: #333;}

ul.products li.product a div { height: 4em !important; overflow: hidden; text-overflow: ellipsis; }
ul.products li.product a h2 { white-space: nowrap; overflow: hidden;}

body.tax-product_tag .woocommerce-breadcrumb { display: none;}

/*Related Products ausblenden*/
body.product_cat_zubehoer section.related, body.product_parent_cat_zubehoer section.related {display: none !important ;}

/*Listen*/
ul.product-categories li { margin-bottom: 0;}
ul.product-categories ul.children li { list-style: circle;margin:0 0 0 15px;}
ul.product-categories li .current-cat:after {content: "\f101"; font-family: 'FontAwesome';  font-weight: bold; padding-left: 10px;}

ul.woocommerce-widget-layered-nav-list, ul.woocommerce-widget-layered-nav-list li { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important;}

/*Eigene Elemente*/
.entry-summary .attachment-large { max-width: 22% !important; margin: 0 0 10px 0;}

section.produkt-metadaten dl.produkt-metadaten { position: relative;}
section.produkt-metadaten dl.produkt-metadaten:last-child { margin-bottom: 10px;}

.externalshops { margin-top: 15px;}
.externalshop {position:relative;   max-width: 20%;  z-index: 2; margin:0 2px 2px 0; width: 100px; display: inline-block; opacity: .7; -webkit-border-radius:3px;border-radius:3px; border:1px solid #ccc; }
.externalshop:hover {opacity: 1; padding: 0;border-color: orange;}
.externalshop img {padding: 10px;}
.externalshop:hover img { padding: 0;}
.externalshop a {position:absolute;left:0;top:0;width:100%;height:100%;display:block; text-indent:-99999px;z-index:2; }

#tab-downloads_tab {padding-bottom: 25px; border-bottom:2px dotted #ccc;}

/*Photocontest
------------------------------------------------------------------------------------*/
.contest-rules h3, .contest-rules h4, .contest-rules h1, .contest-rules h2, .pc-profile-box h1, .pc-profile-box h2 {	font-family:'jollyinternet', Arial, Helvetica, sans-serif !important; 	margin:0 0 15px 0;letter-spacing: 1px; font-weight: normal; text-transform: capitalize; }
.pc-image-info-box .pc-image-info-box-button .pc-image-info-box-button-btn,
.pc-image-info-box .pc-image-info-box-button .pc-image-info-box-button-btn-r,
.gallery-wrap .gallery-title-autor .author,
.pc-image-info-box .pc-image-info-box-button .pc-image-info-box-button-btn2,
.pc-image-info-box .pc-image-info-box-button .pc-image-info-box-button-btn3,
.firstbox_author,
ul.pcmenu > li > a { text-transform: none !important;}
.contest-rules, .gallery-wrap, .top10wrap{ border: 0 !important; padding: 20px 0 !important; margin: 0 !important; width: 100%;}
.contest-rules table tr td:first-child { padding-right: 20px;}
.p-label { width: 100% !important; display: block; white-space: nowrap;}
.input-group-btn { display: none;}
.contest-pagination:before { display: block; padding: 10px; font-weight: bold; content: "Mehr Bilder anzeigen? Hier klicken:"}
 
/*Sidebar 
-------------------------------------------------------------------*/
#sidebar .widget  {position:relative; background: #f7a02c; padding: 1px; color: #fff; border: 5px solid #fff ; border-radius: 15px; -webkit-border-radius:15px;  -webkit-box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1); box-shadow: 3px 2px 5px 2px rgba(000,000,000,.1);  margin-bottom: 15px; }
#sidebar .widget .widgetcontent {padding:20px;  border: 3px solid #ffea00; border-radius: 10px;-webkit-border-radius:10px;}
#sidebar .widget:after  {content: " ";   position: absolute;   z-index: -1;   top: 1px;  left: 1px;   right: 1px;   bottom: 1px;   border: 3px solid #ffea00; border-radius: 10px;}

#sidebar #text-3, #sidebar #text-5 { background: #fff; color: #333; -webkit-hyphens: none; -ms-hyphens: none;  hyphens: none; border-color: #f7a02c;}

#sidebar h2, #sidebar h3, #sidebar h4, #sidebar a { color: #fff; -webkit-hyphens: none; -ms-hyphens: none;  hyphens: none;  }
#sidebar a:hover {  color: #ddd;} 

#sidebar .widget:nth-child(1) {background:#fff; color: #333; border-color:#f7a02c; } 
#sidebar .widget:nth-child(1) .widgetcontent {padding-bottom: 0;}
#sidebar .widget:nth-child(2) {background:#06a6e0; }
#sidebar .widget:nth-child(3) {background:#ee3b7f; }
#sidebar .widget:nth-child(4) {background:#e74e12; }
#sidebar .widget:nth-child(5) {background:#A7329A; }
#sidebar .widget:nth-child(6) {background:#f7a02c; }
#sidebar .widget:nth-child(7) {background:#08d2a8; }

#sidebar ul { padding: 0;}

/*Produktkategorien - Navigation*/
#nav_menu-3 ul#menu-produktkategorien li {margin:0 0 5px 10px;list-style:disc;} 
#nav_menu-3 ul#menu-produktkategorien li.current-menu-item, #nav_menu-3 ul#menu-produktkategorien li.current-product-parent { font-weight: bold;}

#nav_menu-3 ul#menu-produktkategorien li .sub-menu { margin-left: 10px; display: none;}
#nav_menu-3 ul#menu-produktkategorien li.current-menu-item .sub-menu, #nav_menu-3 ul#menu-produktkategorien li.current-menu-ancestor .sub-menu, #nav_menu-3 ul#menu-produktkategorien li.current-product-ancestor .sub-menu { display: block;}
#nav_menu-3 ul#menu-produktkategorien li .sub-menu li { list-style: circle;} 
#nav_menu-3 ul#menu-produktkategorien li.current-menu-item ul li { font-weight: normal;}

/*Footer 
------------------------------------------------------------------------------------*/
#footer { padding:5px 0; margin-bottom: 25px; }
#footer a {  text-decoration: none;}
#footer a:hover  { color: #ddd;}
#footercontent {padding: 0 20px; }

.footer-navigation { text-align: center; margin: 0 auto;}
.footer-navigation li { display:inline; margin: 0 7px   }
.footer-navigation li a { text-decoration: underline !important;}

#footercontent .adressdaten  { padding-bottom: 15px; margin-bottom: 15px; text-align: center;  }
#footercontent .adressdaten #text-2 .column { text-align: left;}

.scroll-to-top-button { position: fixed;left: 10px;bottom: 0;margin: 0;padding: 0;width: 50px;height: 50px;z-index: 9999; cursor: pointer; line-height: 50px; border-radius: 2px; background: none; color: #333; opacity: 1;}
.scroll-to-top-button:hover {color: #ccc; opacity: .7;}
/*.scroll-to-top-button:after {display: inline-block;margin-left: 2px;content: '\f062';vertical-align: top;font-size: 32px;font-family: 'FontAwesome';line-height: 1;  }*/

.scroll-to-top-button  {background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/up.png); background-repeat: no-repeat;   background-position: top center;  }

#socialmedia {position: fixed; right: 10px; top: 175px; width: 50px; z-index: 20; }
#socialmedia li { position: relative; width: 50px; height: 50px; margin-bottom: 7px;    display:block; background: #f7a02c;-webkit-border-radius: 50%;border-radius: 50%;  margin-left: 25px; } 
#socialmedia li:hover {margin-left: 5px;}
#socialmedia li a {position:absolute;left:0;top:0;width:100%;height:100%;display:block; text-indent:-99999px;z-index:2; font-size: 0;background-color: #f7a02c; background-position: center; background-repeat: no-repeat; background-size: 55% auto; -webkit-border-radius: 50%;border-radius: 50%;}
#socialmedia li a[href*="facebook"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/facebook.png);}
#socialmedia li a[href*="twitter"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/twitter.png);}
#socialmedia li a[href*="pinterest"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/pinterest.png);}
#socialmedia li a[href*="feed"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/rss.png); }
#socialmedia li a[href*="youtube"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/youtube.png);  }
#socialmedia li a[href*="plus.google"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/google.png);  }
#socialmedia li a[href*="instagram"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/instagram.png);  }
#socialmedia li a[href*="tiktok"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/tiktok.png);  }

/*Ueberschreiben, Editor-Styles, Generelle Definitionen 
------------------------------------------------------------------------------------*/
.red, .red a, .required { color:#f00; }
.strong {font-weight: bold;}
.grey { color: #333;}
.orange, .orange a {color: #f7a02c; }
.lightblue { color: #06a6e0;}
.darkgreen { color: #0D5045;}
.green { color: #90BC2E !important;}
.pink {color:#ee3b7f;}
.white { color: #fff !important;}
.jolly { color:#90BC2E; font-weight: bold; letter-spacing: normal; text-transform: uppercase; margin: 0;}
a.underline { text-decoration: underline !important;}
.container1000 {max-width: 1000px;}

.noborder, a img.noborder { border: 0 !important;}
.uppercase { text-transform: uppercase;}
.nowrap { white-space: nowrap;  -webkit-hyphens: none; -ms-hyphens: none;  hyphens: none; }

/*Transition*/
a, #socialmedia li, #navi ul.sub-menu, #navi ul.sub-menu li,.scroll-to-top-button,.storycontent a img, .woocommerce-product-gallery--columns-6 .flex-control-thumbs li img, .externalshop, .externalshop img, .widget_recently_viewed_products li, .storycontent .verweise li:hover, .table_td a img, .fixedcontent, .storycontent .verweise li .more-link:hover, .verweise, .homecontent .content_table_td, .reload {-webkit-transition:all 500ms ease;-moz-transition:all 500ms ease;-ms-transition:all 500ms ease;-o-transition:all 500ms ease;transition:all 500ms ease;}

/*Shadow*/
#socialmedia li a {-webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.2); box-shadow: 0 1px 2px 1px rgba(0,0,0,.2); }

/*a.phone:before, a.mailto:before, .fax:before, .a[href*="mailto"]:before, .a[href*="@"]:before { content: "\f095"; font-family: 'FontAwesome'; font-size: 1em; font-weight: bold; padding-right: 10px; width: 15px; display: inline-block;} */

a.phone, a.mailto, .fax, .a[href*="mailto"], .a[href*="@"] {background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/phone.png); background-repeat: no-repeat;  display: inline-block; width: 15px; background-position: left center; padding-left: 25px; background-size: auto 11px; }
a.mailto, .a[href*="mailto"],.a[href*="@"] { background-image: url(//jolly.at/wp-content/themes/jolly_1.16/pics/mail.png);}
.fax:before { content: "\f1ac";}

/*.Clear*/
#navi ul:after, .wp-pagenavi:before, #header:after, #navi:after, .clear, h1:before, .storycontent .subseiten:before, .storycontent .subseiten:after, hr:before, .storycontent ul.farbliste:after {content: " "; height: 0; clear: both; visibility: hidden;font-size: 0; display:table;}
  
/*Buttons*/
.button, .wp-pagenavi a,  input[type="submit"], input[type="button"], input[type="reset"], .wp-pagenavi .current {-webkit-border-radius: 2px;border-radius: 2px;border:1px solid #666;letter-spacing:1px;padding:5px 7px;font-weight:bold;line-height:2.5em; background-color: #e6e6e6; 	background-repeat: repeat-x; 	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6); 	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6); 	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6); 	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6); 	background-image: linear-gradient(top, #f4f4f4, #e6e6e6); 	border: 1px solid #d2d2d2; 	border-radius: 3px; 	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);}  

.button:hover, input[type="submit"]:hover, .wp-pagenavi a:hover, input[type="button"]:hover, input[type="reset"]:hover	{ border-color: #fbc500;cursor:pointer;color:#000;	background-color: #ebebeb; 	background-repeat: repeat-x;	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb); 	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb); 	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb); 	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb); 	background-image: linear-gradient(top, #f9f9f9, #ebebeb);} 

input[type="submit"].reload { padding: 0 20px 5px 20px ; -webkit-border-radius: 33px ;border-radius: 33px ; height:66px ; line-height: 60px ; background:#f7a02c ;color: #fff !important; margin: 15px auto; font-size: 2em; border: 3px solid #A7329A ; }
input[type="submit"].reload:hover {background:#06a6e0;color: #ddd !important; border-color: #e74e12;   }


/*Responsive
-------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:470px) {
    
    #section_text img.alignleft, #section_text img.alignright { float: none !important; margin: 0 0 15px 0; display: block;}

}

@media screen and (min-width:501px) {
      
    #bubbles {top: 200px;  }
    .homecontent .table_td_25 img { float: right; width: 35%; margin: 0 0 15px 25px;}
    
    #section_1-02 .innercontent { text-align: center;}
    #section_1-02 .content_table_td { height: 240px !important; width: 45%; max-width: 410px;  display: inline-block; margin: 0 10px; overflow: hidden;}
    
    #columns_container .first-column, #columns_container .second-column { display: inline-block; float: left;}
    
    #columns_container.one-one .first-column { width: 48.5%; margin-right: 3%;}
    #columns_container.one-one .second-column { width: 48.5%;}
    
    #columns_container.two-one .first-column {width: 64%; margin-right: 3%;}
    #columns_container.two-one .second-column { width: 33%;}
    
    #columns_container.one-two .first-column {width: 33%; margin-right: 3%;}
    #columns_container.one-two .second-column {width: 64%;}
    
} 

@media screen and (min-width:700px) {       
    
    #header h1 { height: auto; }
    #sidebar    { float: left;  width: 27%;}
    #sidebar section { min-height: 20px;}
    #sidebar h4 { font-size: .95em;}

    .storycontent,  .bottomcontent   { float: right;width: 70%;}
    .storycontent { min-height: 455px;}
 
    .storycontent ul.farbliste li { width: 33%;}
    #footercontent .adressdaten #text-2 {margin: 0 auto; width: 400px; white-space: nowrap;}
    #footercontent .adressdaten #text-2 .column {  float: left; padding-right: 40px;}
    #footercontent .adressdaten #text-2 .column:nth-of-type(2) {padding: 0;}
    
    .witzecontent {column-count: 2;column-gap: 1.5em;  }
    
}

@media screen and (min-width:800px) {     
    
    .storycontent .verweise li { width: 47%;}
    .storycontent .verweise h4 { white-space: nowrap; overflow: hidden; padding-top: 5px;}
    .zweispaltig {column-count: 2;column-gap: 2em;  }
    .searchresult, .single_witz {-webkit-column-rule: 0 !important; -moz-column-rule:0 !important;  column-rule: 0 !important;}
     
}

@media screen and (min-width:900px) {    
    
    #header h1 { font-size: 3em; padding-top: 15px;}
    #jolly {width: 15%;}
    #headercontent {padding: 20px 0 0 0;}
    #language  { right: 20px;  }
    #navi { display: block; z-index: 11;}

   
    h1.page-title, h1.product_title  { font-size:1.6em;}
   
    .storycontent .wp-gallery li { width: 24%; margin:0 1.333333333333333333333% 20px 0;}
    .storycontent .wp-gallery li:nth-of-type(4) {margin-right: 0;}  
    
    .storycontent .verweise li { width: 23.5%; margin-right: 1%; }
    .storycontent .verweise li.threecolumns {width: 32%; margin: 0;}
    .storycontent .verweise li.threecolumns h4 { height: auto;}
    .storycontent .verweise li:nth-child(4n+4) { margin-right: 0;}
    
    #socialmedia li {   margin-left: 15px; }     
    
    #sidebar    {  width: 22%;}
    .storycontent  { width: 75%;}
    #sidebar h4 { font-size: 1em;}

    .scroll-to-top-button { position: fixed;left:auto;bottom: 40px; right: 40px;}
    
    .homecontent .table_td_25 img {  width: 25%;}
    
    #section_text .content_table_td .alignleft { float: left;}
    
    .displaybox { display: table; width: 100%;}
    .displaydescription, .displayimage { display: table-cell; vertical-align: top; width: 66%; padding-bottom: 25px;}
    .displaydescription { width: 34%; padding-bottom: 25px; display: table-cell; vertical-align: top;  padding-right: 30px;}
    
}

@media screen and (max-width:901px) {

    #post { -webkit-hyphens: auto; -ms-hyphens: auto;  hyphens: auto;  }

}

@media screen and (min-width:1100px) { 

    #jolly {  width: 16%;}
      
}

@media screen and (min-width:1150px) {       
    
     #section_1 .table_table { display: table; width: 100%; }
     #section_1 .table_td { display: table-cell; height: 500px; overflow: hidden;}
     #section_1 .table_td_spacer { width: 1%;}
    
    .master-slider-parent .ms-slide img { width: 100%;}
    
     #section_1-01 .slidercontent,  #section_1-02 .innercontent { height: 490px; overflow: hidden;}
     #section_1-02 .innercontent { height: 500px;  position: relative;}
     #section_1-01  {background-color: #f7a02c ; }
    
     #section_1-02 .innercontent { /*text-align: left;*/}
     #section_1-02 .content_table_td { display: block; width: 100% !important; max-width: 100%; margin: 0;}
     #section_1-02 .kl_box2 {position: absolute !important; bottom: 0 !important;}

     .homecontent #section_1-02 { padding-right: 15px;}
     #section_1-01 .slidercontent { height: auto;} 
    .homecontent #section_1-02 { padding-right: 15px;}
    body.home #section_1 .table_td_25 { width: 25%; }
    body.home #section_1 .table_td_75 { width: 74%; } 

}

@media screen and (max-width:1198px) {
    
    #section_3-04 div { margin: 0 auto;}  
    .homecontent .content_table_td { padding-top: 10px;}
    .homecontent #section_1 .content_table_td { padding-top: 0;}

}

@media screen and (min-width:1199px) {

    /*Content */    
    body.has_rightcontent .leftcontent {  width: 48%;  display: inline-block;/*border-right: 2px dotted #ddd;*/ padding-right: 1.5%;}
    body.woocommerce-page .leftcontent { border: 0;}
    body.has_rightcontent .rightcontent { float: right; display: inline-block; width: 48%; padding-left: 1.5%;}
    
    body.has_rightcontent .two-one .leftcontent {width: 63%; border-right: 2px dotted #ddd; padding-right: 3%;}
    body.has_rightcontent .two-one .rightcontent { width: 34%;}
    
    body.has_rightcontent woocommerce-Tabs-panel .rightcontent { width:48%; }
    body.has_rightcontent .rightcontent .video-wrapper { max-width: 100% !important;}
    
    .storycontent .product-taglist .verweis h4, .storycontent .Produktinformation h4 { height: 4em;}
    
    /*Startseite*/   
    #section_text .table_table, #section_2 .table_table, #section_3 .table_table { display: table; }
    #section_text .table_td, #section_2 .table_td, #section_3 .table_td { display: table-cell; }
    #section_2 .table_td_spacer, #section_3 .table_td_spacer {width: 1%;}
    #section_text .table_td_485 { width: 48.5%;}
    #section_text .table_td_499 { width: 49.9%;}
    #section_text .table_td_spacer {width: 1%;}
    #section_2 .table_td_25, #section_3 .table_td_25 { width: 24%;}
    
    #section_3 { padding-bottom: 25px;}
    #section_text { margin-bottom: 25px;}
    .homecontent .table_td_25 img { float: none; width: 100%; margin-left:0;}
 
    .homecontent .td_with_more-link .more-link { position: absolute; bottom: 10px; left: 20px;}
    .homecontent .trapez_leftup .more-link { left: auto !important; right: 20px !important;}
    
    .witzecontent {column-count: 3; }
    
    input[type="submit"].reload {  -webkit-border-radius: 40px ;border-radius: 40px ; height:80px ; line-height: 80px ; font-size: 2.2em; border-width: 4px;  }
    
    /*Produktkategorie*/
    .term-description p {max-width: 800px;  }
    
}

@media screen and (min-width:1200px) {   
    
     #header h1 {   text-align: center;  font-size: 4em;}

    .navigation li a {font-size: 1.5em; padding:4px 15px 0 15px;}
    .navigation ul.sub-menu li a { font-size: 1.25em;}
    
    #post { margin: 25px auto;}
    .storycontent {padding:25px 25px 75px 25px; }
    h1.page-title { font-size: 2.7em;}
    
    .shopcontent .product .entry-summary {width: 60% !mportant; max-width: 60% !mportant;}
    .woocommerce-product-gallery--columns-6 .flex-control-thumbs li {width: 16.66666666666666666666666666666666667% !important;   }
    .jolly-sticker, .externalshop { max-width: 18% !important;}
    
    #sidebar    {  width: 18%;}
    .storycontent  { width: 80%;}
    
    #socialmedia { width: 65px; top: 30%;}
    #socialmedia li { width: 55px; height: 55px;}
    
    /*Startseite*/
    
    .homecontent #section_2 .td_with_more-link, .homecontent #section_3 .td_with_more-link { padding-bottom: 45px ;}
    .homecontent .td_with_more-link .more-link { bottom: 15px; left: 20px;}
    
    /*Transformation 
    ------------------------------------------------------------------------------------*/
    .trapez_rightup {padding-top: 25px; padding-bottom: 25px; -moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -o-transform: skewY(-3deg); -ms-transform: skewY(-3deg); transform: skewY(-3deg);}
    .trapez_rightup .mediaelement, .trapez_rightup .textelement {-moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -o-transform: skewY(3deg); -ms-transform: skewY(3deg);
    transform: skewY(3deg);}

    .trapez_leftup {padding-top: 25px; -moz-transform: skewY(3deg); -webkit-transform: skewY(3deg); -o-transform: skewY(3deg); -ms-transform: skewY(3deg); transform: skewY(3deg);}
    .trapez_leftup .mediaelement, .trapez_leftup .textelement {-moz-transform: skewY(-3deg); -webkit-transform: skewY(-3deg); -o-transform: skewY(-3deg); -ms-transform: skewY(-3deg);
    transform: skewY(-3deg);}
    
}

@media screen and (min-width:1800px) {   

     #header h1 {   font-size: 5em;}
    
    #headercontent,  .navicontent, #post, .homecontent, #footercontent {width:85%; max-width: 2000px; }	
    .shopcontent .term-description p, .shopcontent .term-description h3, .shopcontent .term-description h4  { max-width:66.66666666666666666667%; }
    .shopcontent .term-description { position: relative;}
    .shopcontent .term-description img { position: relative; /* right: 0; top: 0; */}
    .homecontent .table_table {width: 100%;}
    .navigation li a {font-size: 1.6em; padding:6px 15px px 15px;  }
    .storycontent {padding:30px;}
    .externalshop { max-width: 15% !important;}
    .storycontent ul.farbliste li { width: 25%;}
    .storycontent ul.threecols li, .has_rightcontent .storycontent ul.farbliste li  { width: 33%;}
    
    input[type="submit"].reload {  -webkit-border-radius: 50px ;border-radius: 50px ; height:100px ; line-height: 100px ; font-size: 2.6em; padding: 0 40px ;  border-width: 6px; }
    
    #sidebar    {  width: 19%;} 
    #sidebar h4 { font-size: 1.25em;}
    
}

@media screen and (min-width:1900px) {  
    
    #jolly {  width: 13%;}
    
}


/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

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

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

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

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

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

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

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

@keyframes flash {
  from,
  50%,
  to {
    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 {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

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

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

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

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

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

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

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

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

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

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

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

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

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

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

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

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

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

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

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

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

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

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

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

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

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

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

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

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

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

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

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

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

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

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

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

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

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

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

fadeIn { -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;}
@-webkit-keyframes fadeIn {
    

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

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

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

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

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

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

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

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

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

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

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

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

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

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

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

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

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

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

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

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

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

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

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

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) 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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

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

@-webkit-keyframes hinge {
  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: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

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

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  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: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

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

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

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

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

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

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

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

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

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

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

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

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

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

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

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

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

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

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

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

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

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

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

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

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

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

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

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

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

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

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

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

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