/* Theme Name: Battin Theme URI: http://demo.qodeinteractive.com/bridge/ Description: A custom child theme of Bridge Theme Author: Binsfeld Author URI: http://www.binsfeld.lu Version: 1.0.2 Template: bridge */ @import url("../bridge/style.css"); /* body.home { -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); } */ *::-moz-selection { background: #ffd803 none repeat scroll 0 0; color: #000} *::selection { background: #ffd803 none repeat scroll 0 0; color: #000} .social-icones{position: absolute; left: 0; top: 40px} header.sticky .social-icones{top: 40px} .social-icones a{color: #fff; font-size: 18px; margin-right: 13px;} .social-icones a:hover{color: #ffd803;} p{color: #fff} /* Background de la Homepage */ #qode-home .carousel-inner .item .image{/* background-size: contain */} /* H1 et H2 des leaderboard des différentes pages */ .header_full_width_padding h1 {color: #fff !important; font-size: 100px; position: absolute; top: 220px; width: 100%; z-index: 500; text-transform: uppercase; text-shadow: 0 3px 4px rgba(150, 150, 150, 1); letter-spacing: 2px} .header_full_width_padding h2 {color: #fff !important; font-size: 50px; position: absolute; top: 330px; width: 100%; z-index: 500; text-transform: uppercase; text-shadow: 0 3px 4px rgba(150, 150, 150, 1); letter-spacing: 2px} body.home .content .content_inner > .full_width{position: relative} .page-id-2517 .content, .page-id-2513 .content, .page-id-2515 .content{margin-top:80px;} .page-id-2517 h1, .page-id-2513 h1{color: #fff !important; font-size: 80px; text-transform: uppercase; text-shadow: 0 3px 4px rgba(150, 150, 150, 1);letter-spacing: 2px} .page-id-2515 h1 {color: #fff !important; font-size: 60px; text-transform: uppercase; text-shadow: 0 3px 4px rgba(150, 150, 150, 1);letter-spacing: 2px} .page-id-2437 .wpb_wrapper table, .page-id-2517 .wpb_wrapper table, .page-id-2513 .wpb_wrapper table, .page-id-2515 .wpb_wrapper table width: 100%; margin:20px 0; } .page-id-2437 .wpb_wrapper table td, .page-id-2517 .wpb_wrapper table td, .page-id-2513 .wpb_wrapper table td, .page-id-2515 .wpb_wrapper table td{ border-bottom: 1px solid #ffffff; text-align: left; color:#ddd; } .page-id-2437 .wpb_wrapper, .page-id-2517 .wpb_wrapper, .page-id-2513 .wpb_wrapper, .page-id-2515 .wpb_wrapper { color:white; } .page-id-2437 .wpb_wrapper table tr:nth-child(even), .page-id-2517 .wpb_wrapper table tr:nth-child(even), .page-id-2513 .wpb_wrapper table tr:nth-child(even), .page-id-2515 .wpb_wrapper table tr:nth-child(even){ background:rgba(255,255,255, .2); } .page-id-2437 .wpb_wrapper table tr:nth-child(odd), .page-id-2517 .wpb_wrapper table tr:nth-child(odd), .page-id-2513 .wpb_wrapper table tr:nth-child(odd), .page-id-2515 .wpb_wrapper table tr:nth-child(odd){ background:rgba(255,255,255, .1); } .page-id-2437 .wpb_wrapper table tr:first-child td, .page-id-2517 .wpb_wrapper table tr:first-child td, .page-id-2513 .wpb_wrapper table tr:first-child td, .page-id-2515 .wpb_wrapper table tr:first-child td{ color:black; font-weight: bold; background:#ffd803; } .page-id-2437 .wpb_wrapper h2, .page-id-2437 .wpb_wrapper h3, .page-id-2517 .wpb_wrapper h2, .page-id-2517 .wpb_wrapper h3, .page-id-2513 .wpb_wrapper h2, .page-id-2513 .wpb_wrapper h3, .page-id-2515 .wpb_wrapper h2, .page-id-2515 .wpb_wrapper h3{ color:#ffd803; } .page-id-2437 .wpb_wrapper ul+p, .page-id-2517 .wpb_wrapper ul+p, .page-id-2513 .wpb_wrapper ul+p, .page-id-2515 .wpb_wrapper ul+p{ margin-top: 20px; } .page-id-2437 .rgpd-panel, .page-id-2517 .rgpd-panel, .page-id-2513 .rgpd-panel{ margin:10px 0 40px 0; } /* MENU */ /* #menu-menu-left-fr a.current .menu_icon.fa-home{color: #ffd803} #menu-menu-left-fr li:first-of-type a span{display: none} */ #menu-menu-left-fr .fa-home:hover{color: #ffd803} header .logo_wrapper{width: 195px !important} .header_top_bottom_holder {background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; height: 124px; position: relative} header nav.main_menu > ul > li > a {line-height: 110px !important} header.sticky .header_top_bottom_holder {height: 110px; background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;} header.sticky nav.main_menu > ul > li > a {line-height: 110px !important} /*header:not(.with_hover_bg_color) nav.main_menu > ul > li:hover > a {opacity: 1}*/ .header_top_bottom_holder .header_bottom{background-color: rgba(0, 0, 0, 0)} .title_outer .title_subtitle_holder_inner h1{color: #fff; font-size: 40px; text-transform: uppercase; text-align: center} .title_outer .title_subtitle_holder_inner h1 span span{color: #ffd803} body header.stick_with_left_right_menu.sticky .header_inner_left {display: inline-block} body header.stick_with_left_right_menu.sticky .header_inner_left{ display: inline-block; left: auto; position: relative; top: 0; vertical-align: middle; z-index: 100; float: none; margin: 20px 0 10px} ul#menu-menu-left-fr li:last-of-type{margin-right: 97.5px !important;} header.centered_logo .q_logo img {margin: 0; transform: translate(-50%, 0px)} header.stick_with_left_right_menu.sticky nav.main_menu.right_side > ul > li:first-child{margin-left: 97.5px !important} header a.current .underline_dash{opacity: 1 !important} header.stick_with_left_right_menu.sticky nav.main_menu.left_side{left: 0; position: absolute; text-align: right; top: 0; width: 49%; z-index: 50; background: rgba(0, 0, 0, 0);} header.stick_with_left_right_menu.sticky nav.main_menu.right_side{left: auto; position: absolute; right: 0; top: 0; width: 49%; z-index: 50; background: rgba(0, 0, 0, 0);} header.stick_with_left_right_menu .header_inner_left{z-index: 300} header.stick_with_left_right_menu nav.main_menu.left_side{background: rgba(0,0,0,0);} header.stick_with_left_right_menu nav.main_menu.right_side{background: rgba(0,0,0,0);} header.sticky .header_bottom {background-color: rgba(0, 0, 0, 0) !important; box-shadow: none !important} /* menu hamburger */ header.centered_logo .header_inner_right{display: none !important} /* menu hamburger */ #menu-menu-right-fr #nav-menu-item-180{ margin-left: 97.5px; } /* FIN MENU */ #gamme_home h2{font-size: 55px; line-height: 65px; color: #fff; text-transform: uppercase; margin: 15px 0} /* RANGEE PERFECT BAR */ #rangee_home_perfect_bar{background: url('images/fond_header_gelleflute_v2.jpg') no-repeat center bottom / cover; padding:0 0 45px; margin:0 0 45px;} #rangee_home_perfect_bar .vc_column-inner{padding-left:0; padding-right:0;} #rangee_home_perfect_bar h2{text-transform: uppercase; color:#fff; font-size: 46px; font-family: 'Neuton', sans-serif; text-align:center; margin-bottom:25px;} #rangee_home_perfect_bar #intro p{text-transform: none; color:#fff; font-size: 22px; font-family: 'Neuton', sans-serif; text-align:center; line-height: 1.3em} #rangee_home_perfect_bar p.bouton{text-align: center} #rangee_home_perfect_bar p.bouton a{margin-top: 14px; text-transform: none; font-style: italic; font-weight: bold; font-size: 18px; padding: 7px 20px 7px 45px; background: #ffd803 url('images/bouton-more-battin-35.jpg') no-repeat left center; display: inline-block; width: auto; color:#000;} #rangee_home_perfect_bar p.bouton a:hover{background-color: #ffdd26} #bandeau_vert{ width:100%; position: relative; text-align: center; margin:40px 0; /* background: url('images/bandeau_vert_pb_pb.png') no-repeat center center / contain; */ background: url('images/marker_gelleflute_battin_2019.png') no-repeat center center / contain; padding-bottom:17%; } /* RANGEE PERFECT BAR */ /* PAGE PERFECT BAR */ /* feuille de style css séparée */ /* PAGE PERFECT BAR */ /* MODULE GAMME BIERE BATTIN */ #gamme_all_bieres_battin{background: url('images/background-gamme-battin-biere-luxembourg.jpg') no-repeat center center; margin-top:30px} #gamme_all_bieres_battin h3{color: #fff; text-align: center;text-transform: uppercase; margin-bottom: 25px; font-size: 45px; line-height: 55px; } #gamme_all_bieres_battin div.nom_de_la_biere{ font-family: "Neuton",sans-serif; font-style: normal; font-weight: 700; color: #ffffff; text-align: center; font-size: 17px; line-height: 1.30435em; } #gamme_all_bieres_battin .vc_col-sm-2{ /*width: 20%;*/ margin: 25px 0; width:12.5%; } #gamme_all_bieres_battin .vc_col-sm-2:hover div.nom_de_la_biere{color: #ffd803} .owl-dots{margin: 0 auto; width: 240px} .owl-dot{background: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; float: left; margin: 0 10px 0 0; box-sizing: border-box} .owl-dots .owl-dot:last-of-type{margin-right: 0} .owl-dot.active{border: 2px solid #fecf0f; background: #000} /* FIN MODULE GAMME BIERE BATTIN */ /* MODULE DERNIERE RECETTE HP */ .derniere_recette_homepage h2{font-size: 33px; line-height: 38px} #derniere_recette h3{color: #fff; text-align: center; font-size: 28px; line-height: 35px; min-height: 70px; margin-top: 28px} #derniere_recette p{color: #fff; text-align: center; text-transform: uppercase; margin-bottom: 16px} #derniere_recette .fond_jaune{margin-top: 14px; text-transform: none; font-style: italic; font-weight: bold; font-size: 18px; padding: 7px 20px 7px 45px; background: #ffd803 url('images/bouton-more-battin-35.jpg') no-repeat left center; display: inline-block; width: auto} #derniere_recette .fond_jaune:hover{background-color: #ffdd26} /* FIN MODULE DERNIERE RECETTE HP */ /* MODULE tous_les_conseils_carousel HP */ #tous_les_conseils_carousel{position: relative; padding-left: 10px; padding-right: 10px;} #tous_les_conseils_carousel h3{color: #fff; text-align: center; text-transform: uppercase; font-size: 33px; line-height: 38px; /*margin-bottom: 15px !important; margin-top: 12px*/ margin-bottom: 34px !important; margin-top: 27px} #tous_les_conseils_carousel h3 span{color: #ffd803;} #tous_les_conseils_carousel .owl-prev{position: absolute; left: -10px; top: 50%; color: #fff; font-size: 30px;} #tous_les_conseils_carousel .owl-next{position: absolute; right: -12px; top: 50%; color: #fff; font-size: 30px;} .fond_jaune.carousel_home{text-transform: none; font-style: italic; font-weight: bold; font-size: 18px; padding: 7px 20px 7px 45px; display: inline-block; width: auto; bottom: 10px; left: 28px; position: absolute; z-index: 100; background: #ffd803 url('images/bouton-more-battin-35.jpg') no-repeat left center;} /* FIN MODULE tous_les_conseils_carousel HP */ #histoire_home{font-size: 70px; line-height: 75px; color: #fff; font-weight: normal; padding-top: 120px; text-transform: uppercase; cursor: pointer} #histoire_home p a{font-family: "Neuton",sans-serif; line-height: 110px; font-size: 110px; letter-spacing: 9px; text-shadow: 0 3px 4px rgba(34, 18, 12, 1); color: #fff;} #histoire_home p a:hover{color: #fff;} div.ppt {display: none !important} /* PAGE HISTOIRE */ body.page-id-11 .header_full_width_padding h1{text-shadow: 0 3px 4px rgba(49, 25, 15, 1)} body.page-id-11 h2{color: #ffd803; font-size: 18px; text-transform: none; font-family: "Source Sans Pro",sans-serif; margin-bottom: 15px} body.page-id-11 p{margin-bottom: 10px} body.page-id-11 p strong{color: #ffd803; font-size: 16px; line-height: 16px;} /* FINPAGE HISTOIRE */ /* PAGE NOS BIERES */ body.page-id-13 > .wrapper > .wrapper_inner > .content > .content_inner > .container{ background: url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -560px top, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -580px center, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -620px bottom } .infos_biere.vc_row{margin-bottom: 40px !important} .infos_biere h1{color: #fff; font-size: 80px; letter-spacing:4px; margin-bottom: 25px} .infos_biere p{color: #fff} .infos_biere .tab-title{font-size: 30px; padding-left: 0 !important} .infos_biere .q_accordion_holder.accordion .ui-accordion-header.ui-state-active .accordion_mark_icon{background-image: url("images/fermer-conditionnement-battin.jpg")} .infos_biere .q_accordion_holder.accordion .ui-accordion-header .accordion_mark_icon { background-image: url("images/ouvrir-conditionnement-battin.jpg")} .infos_biere .accordion_mark.left_mark{right: 0 !important; left: auto !important; border: 0 !important} .infos_biere .q_accordion_holder.accordion .ui-accordion-header.ui-state-active .accordion_mark{background-color: #000} .infos_biere .q_accordion_holder.accordion div.accordion_content{padding: 0} .infos_biere .qbutton{ background-color: #ffd803; border-color: #ffd803; border-radius: 0; color: #000000; font-size: 16px; font-style: italic !important; font-weight: normal; text-transform: none} .infos_biere .qbutton:hover{background-color: #ffdd26} .infos_biere .fa-plus{font-weight: normal; left: -11px; position: absolute; top: 12px} /*#gambrinus{ background: url('images/lumiere-battin-extra.png') no-repeat -300px 360px; }*/ #gambrinus::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-gambrinus.png") no-repeat scroll left center; height: 142px; left: -190px; position: absolute; top: 330px; width: 727px} /*#brune .vc_col-sm-4::after{content:""; position: absolute; left:0; top:-10px; background: url("images/brune_nouveau.png") no-repeat left center; width: 200px; height: 200px; background-size: 200px}*/ #fruitee::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-fruitee.png") no-repeat scroll left center; height: 176px; right: -305px; position: absolute; top: 295px; width: 899px} #blanche::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-blanche.png") no-repeat scroll left center; height: 176px; right: -255px; position: absolute; top: 295px; width: 893px} #extra::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-extra.png") no-repeat scroll left center; height: 122px; left: -400px; position: absolute; top: 270px; width: 1069px} #triple::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-triple.png") no-repeat scroll left center; height: 149px; left: -400px; position: absolute; top: 350px; width: 1033px} #edelpils::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-triple.png") no-repeat scroll left center; height: 149px; left: -400px; position: absolute; top: 300px; width: 1033px} #christmas::after {background: rgba(0, 0, 0, 0) url("images/lumiere-battin-fruitee.png") no-repeat scroll left center; height: 176px; right: -305px; position: absolute; top: 295px; width: 899px} /* #gambrinus .vc_col-sm-4{ background: url('images/lumiere-battin-extra-377.png') no-repeat center bottom; } */ /* FIN PAGE NOS BIERES */ /* PAGE CONTACT */ body.page-template-contact-page #map_canvas{margin-top: 30px; margin-bottom: 0 !important} #zone_contact{margin-top: 30px !important; margin-bottom: 30px !important; text-transform: uppercase} #zone_contact h1{color: #ffd803} #zone_contact p{color: #fff; line-height: 20px} #zone_contact a{color: #ffd803} #zone_contact .couleur_battin{color: #ffd803} #map_canvas #bodyContent p{color: #000} /* FIN PAGE CONTACT */ /* PAGE detail_recette */ body.page-template-recette_biere .header_full_width_padding { /*background-attachment: unset !important;*/ background-position: 50% 150px !important; } body.page-template-recette_biere .header_full_width_padding h1{color: #ffd803 !important; margin-bottom: 5px; top: 200px; text-shadow: 0 3px 4px rgba(73, 32, 27, 1);} body.page-template-recette_biere .header_full_width_padding h2{top: 330px; text-shadow: 0 3px 4px rgba(73, 32, 27, 1);} body.page-template-recette_biere .header_full_width_padding p {color: #fff; font-size: 20px; position: absolute; text-transform: none; top: 400px; width: 100%; z-index: 500; text-align: center !important; font-style: italic} body.page-template-recette_biere #carousel_recettes{position: relative; display: block; width: 80%; box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1600px} .container.detail_recette h2{color: #ffd803; text-align: center; text-transform: uppercase; font-size: 33px; line-height: 38px; margin-bottom: 15px} .container.detail_recette h3{color: #fff; text-align: center; text-transform: uppercase; margin-bottom: 25px; font-size: 45px; line-height: 55px} #carousel_recettes h2{font-size: 33px; line-height: 38px; margin-bottom: 0} #carousel_recettes h3{font-size: 30px; line-height: 35px; min-height: 106px;} .container.detail_recette .introduction{color: #fff; font-size: 14px; text-align: center; line-height: 150%; margin-bottom: 25px} .container.detail_recette .vc_row-fluid{margin-bottom: 25px !important} #carousel_recettes .image_recette{position: relative} #carousel_recettes .auteur {background: #fff none repeat scroll 0 0; bottom: 11px; color: #000; font-size: 19px; font-style: italic; height: 35px; line-height: 35px; padding: 0 20px; position: absolute; right: 40px; text-align: center; width: auto} #carousel_recettes .more {background: rgba(0, 0, 0, 0) url("images/bouton-more-battin-35.jpg") no-repeat scroll left top; bottom: 11px; height: 35px; position: absolute; right: 5px; width: 35px} #carousel_recettes .owl-dots{margin-top: 25px; width: 120px} #carousel_recettes .owl-stage {margin: 0 auto !important} #video{margin-bottom: 25px} /*css for responsive embeds*/ .embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%} .embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%} div.check-container .instructions{font-size: 1.3em} /*------------------------*/ .fond_jaune{background: #ffd803; color: #000; padding: 0; box-sizing: border-box; margin-bottom: 25px} .fond_jaune .header_ingredients{border-bottom: 2px solid #000; width: 100%; height: 60px; font-family: "Neuton", sans-serif} .fond_jaune .header_left_ingredients{border-right: 2px solid #000; text-transform: uppercase; padding: 15px 0 10px; font-weight: bold; font-size: 18px; text-align: center; height: 100%} .fond_jaune .header_right_ingredients{text-align: left; padding: 10px} .fond_jaune .header_right_ingredients .temps_preparation img{float: left; height: auto; width: 30px; margin-top: 5px} .fond_jaune .header_right_ingredients .span_temps_preparation{line-height: 41px; vertical-align: middle; margin-left: 10px; float: left; font-weight: bold; font-size: 17px} .fond_jaune .header_right_ingredients .nb_personnes img{float: left; height: auto; width: 30px; margin-top: 10px} .fond_jaune .header_right_ingredients .span_nb_personnes{line-height: 41px; vertical-align: middle; margin-left: 10px; float: left; font-weight: bold; font-size: 17px} .liste_ingredients{padding: 15px 20px; width: 100%; position: relative; display: block; box-sizing: border-box} .liste_ingredients li{list-style-type: none; padding-left: 20px; margin-left: 20px; margin-bottom: 10px; position: relative} .liste_ingredients li i{-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #000; border: 1px solid #000; padding: 4px 8px 8px; width: 10px; height: 14px; text-align: center; font-size: 16px; line-height: 1em; font-weight: bold; position: absolute; left: -20px; top: 0} a.fond_jaune{box-sizing: border-box; color: #000; display: block; padding: 10px 20px; text-transform: uppercase; width: 100%; position: relative; margin-top: 150px} a.fond_jaune img{position: absolute; right: 0; bottom: -30px} #content_recette a.fond_jaune{font-size: 20px; line-height: 25px; padding: 10px 20px 10px 50px; font-family: "Neuton", sans-serif; letter-spacing: 2px} #content_recette #atstbx{margin-top: 40px; margin-left: 18px} .container.detail_recette .etapes_de_la_preparation{color: #fff; margin-left: 30px} .container.detail_recette .etapes_de_la_preparation li{margin-bottom: 20px; margin-left: 10px; list-style-type: none; padding-left: 30px; position: relative} .container.detail_recette .etapes_de_la_preparation i{background: #ffd803 none repeat scroll 0 0; border: 1px solid #ffd803; border-radius: 50%; color: #000; font-size: 15px; font-weight: bold; height: 16px; left: -20px; line-height: 1em; padding: 8px; position: absolute; text-align: center; top: 0; width: 16px} /* FIN PAGE detail_recette */ /* PAGE tous les conseils */ body.page-template-full_width.page-parent .section_inner_margin h2{color: #ffd803; font-size: 45px; line-height: 55px; margin-bottom: 25px !important} /* FIN PAGE tous les conseils */ /* PAGE detail_conseil */ body.page-template-detail_conseil h1{color: #fff; font-size: 40px; text-transform: uppercase; text-align: center; margin-top: 85px !important; margin-bottom: 16px !important; letter-spacing: 2px} body.page-template-detail_conseil h1 span span{color: #ffd803} body.page-template-detail_conseil h2{color: #ffd803; font-size: 45px; line-height: 55px; margin-bottom: 10px !important} body.page-template-detail_conseil h3{color: #fff; font-size: 36px; line-height: 40px; margin-bottom: 15px !important} body.page-template-detail_conseil h3 span{color: #ffd803;} body.page-template-detail_conseil p{color: #fff; margin-bottom: 25px; text-align: center} body.page-template-detail_conseil #atstbx{text-align: center} #tous_les_conseils_sauf_actuel{margin-top: 30px} #tous_les_conseils_sauf_actuel .vc_col-sm-6{margin-bottom: 30px !important; padding-left: 15px; padding-right: 15px; position: relative} #tous_les_conseils_sauf_actuel .vc_col-sm-6 .more{width: 41px; height: 41px; position: absolute; right: 25px; bottom: 65px; background: url(images/sprite_css.png) -225px -10px no-repeat; } #tous_les_conseils_sauf_actuel .vc_col-sm-6 .mor{width: 30px; height: 30px; position: absolute; right: 26px; bottom: 100px; } #tous_les_conseils_sauf_actuel .vc_col-sm-6 .mor img{width: 100%; height: auto;} /* FIN PAGE detail_conseil */ /* PAGE LE SAVOIR BIERE */ body.page-id-15 .header_full_width_padding h1 {text-shadow: 0 3px 4px rgba(11, 33, 30, 1);} body.page-id-15 .header_full_width_padding h2 {text-shadow: 0 3px 4px rgba(11, 33, 30, 1);} body.page-id-15 > .wrapper > .wrapper_inner > .content > .content_inner > .full_width{ background: url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -560px 680px, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -580px center, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -620px bottom, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat calc(100% + 580px) 450px, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat calc(100% + 550px) bottom !important; } body.page-id-15 .section_inner_margin h2 {color: #ffd803; font-size: 45px; line-height: 55px; margin-bottom: 10px} body.page-id-15 .section_inner_margin p{color: #fff; margin-bottom: 25px; text-align: center} #quatre_dernieres_recettes{margin-top: 25px} #quatre_dernieres_recettes h2{color: #ffd803; text-align: center; font-size: 40px; line-height: 40px; margin-bottom: 5px !important} #quatre_dernieres_recettes h3{color: #fff; text-align: center; font-size: 28px; line-height: 33px; margin-bottom: 8px !important; min-height: 70px;} #quatre_dernieres_recettes .fond_jaune.auteur{background: #fff none repeat scroll 0 0; bottom: 15px; display: block; font-style: italic; height: 35px; line-height: 35px; margin-top: 5px; padding: 0 20px; position: absolute; right: 60px; text-transform: none; vertical-align: middle; width: auto; z-index: 100} #quatre_dernieres_recettes .vc_col-sm-6{padding-left: 15px; padding-right: 15px; margin-bottom: 35px !important; position: relative} #quatre_dernieres_recettes .vc_col-sm-12 .fond_jaune{margin-top: 50px !important; text-align: center; text-transform: none; font-weight: bold; text-align: center; cursor: pointer; padding: 8px; font-size: 18px} #quatre_dernieres_recettes .vc_col-sm-6 .more{position: absolute; right: 25px; bottom: 15px; width: 35px; height: 35px; background: url(images/bouton-more-battin-35.jpg) left top no-repeat; } #show_all_recettes{text-align: center; font-weight: bold; padding: 10px 0; font-size: 17px; cursor: pointer} #hide_all_recettes{text-align: center; font-weight: bold; padding: 10px 0; font-size: 17px; display: none; cursor: pointer} .gametrigger{background: url(images/verreetbiere/bgtireuses.jpg) no-repeat center top;display: table;width:100%;min-height: 490px; height:490px; margin-bottom: 60px !important;} .gametrigger a{display: table-cell;vertical-align: middle;width: 60%;padding:0 20%;} .gametrigger h3{color:#FFF;font-size: 34px;line-height: 36px;padding-left:30%;} .gametrigger h4{color:#ffd803;margin:10px 0 20px 0;padding-left:30%;} .gametrigger span{ background: white; font-style: italic; height: 35px; line-height: 35px; padding: 0 20px; color: black; display: inline-block; position: relative; margin-left: 30%; } .gametrigger span:after{ width: 35px; height: 35px; position: absolute; left:100%; top: 0; background: url(images/bouton-more-battin-35.jpg) no-repeat center center; content:''; } .gametrigger img{ float: left; width: auto; height: auto; position: absolute; left: 20%; top: 3%; max-height: 78%; } #tous_les_conseils h3{color: #fff; font-size: 38px; line-height: 38px; margin-bottom: 15px !important} #tous_les_conseils h3 span{color: #ffd803;} #tous_les_conseils .vc_col-sm-6{margin-bottom: 30px !important; padding-left: 15px; padding-right: 15px; position: relative} #tous_les_conseils .vc_col-sm-6 .more{width: 35px; height: 35px; position: absolute; right: 25px; bottom: 97px; /*background: url(images/sprite_css.png) -225px -10px no-repeat;*/ } #recettes_sup_4 > div{display: none } #recettes_sup_4.slideInDown{ /*display: none*/ /*visibility:hidden*/ } /* FIN PAGE LE SAVOIR BIERE */ /* PAGE TOUTES LES RECETTES */ .header_full_width_padding{padding-top: 300px; padding-bottom: 300px} body.page-id-172 .section_inner_margin h2 {color: #ffd803; font-size: 45px; line-height: 55px; margin-bottom: 25px} body.page-id-172 .section_inner_margin p{color: #fff; margin-bottom: 25px;} /* FIN PAGE TOUTES LES RECETTES */ /* LIGHTBOX */ .fancybox-skin{padding: 0 !important; background: rgba(0, 0, 0, .10) !important;} .fancybox-inner{overflow: visible !important} .fancybox-close{display: none !important} #contentLightbox{background: rgba(0, 0, 0, .10); max-width: 555px; max-height: 600px; padding: 160px 0 0; overflow: visible; border: 1px solid #c8c8c8; color: #fff !important; font-family: "Neuton",sans-serif; text-align: center; position: relative} #contentLightbox h1{font-family: "Neuton",sans-serif; font-size: 50px; color: #fff; letter-spacing: 1px; font-weight: normal; margin-bottom: 0; text-shadow: 0 3px 4px rgba(53, 46, 42, 1);} #contentLightbox h2{font-family: "Neuton",sans-serif; font-size: 25px; color: #fff; font-weight: normal; letter-spacing: 1px; margin-bottom: 60px; text-shadow: 0 3px 4px rgba(53, 46, 4, 1);} #contentLightbox #bouton_majeur{ background: #ffd803; color: #000; font-family: "Neuton",sans-serif; font-size: 15px; font-weight: bold; padding: 15px 3px; margin: 0 auto 15px auto; cursor: pointer; -webkit-transition : all 0.5s; -moz-transition : all 0.5s; -o-transition : all 0.5s; transition:all 0.5s} #contentLightbox #bouton_majeur:hover{ background:#ffdd26;} #contentLightbox p{color: #fff; text-align: center} #contentLightbox #loader{display: none; margin-bottom: 25px} #contentLightbox #logo_lightbox{position: absolute; top: -100px; left:0; right:0; margin: 0 auto} body.blurr .wrapper .wrapper_inner{-webkit-filter: blur(6px); -moz-filter: blur(6px); -o-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px)} #beierweifreiersplash{margin-top: 150px} #beierweifreiersplashtop{margin-top: 5vh; margin-bottom: 16vh;} /* FIN LIGHTBOX */ #derniere_recette{position: relative} #derniere_recette .more{ position: absolute; right: 5px; bottom: 77px; width: 35px; height: 35px; background: url(images/bouton-more-battin-35.jpg) left top no-repeat; } #derniere_recette .auteur{background: #fff none repeat scroll 0 0; bottom: 77px; color: #000; font-size: 19px; font-style: italic; height: 35px; line-height: 35px; padding: 0 20px; position: absolute; right: 40px; text-align: center; width: auto;} #tous_les_conseils_carousel {position: relative;} #tous_les_conseils_carousel .more{width: 35px; height: 35px; position: absolute; right: 7px; bottom: 88px; background: url(images/bouton-more-battin-35.jpg) left top no-repeat; } .mobile_menu_button{float: right !important} /* .main_menu.drop_down.left_side{display: block !important} */ #qode-home .carousel-indicators{display: none !important} /* #qode-home .carousel-inner .slider_content_outer{} */ #qode-home h4.q_slide_subtitle{padding-top:0; position: absolute; left:0; right:0; text-align: center} /*#qode-home .carousel-inner::after{content:""; position: absolute; left:0; top:0; background: url("images/brune_nouveau.png") no-repeat left center; width: 200px; height: 200px; background-size: 200px}*/ .side_menu.right ul{margin-top: 60px} .side_menu.right ul li{text-align: left} .side_menu.right ul li a{font-family: "Neuton",sans-serif; font-weight: bold; font-size: 21px; text-transform: uppercase; letter-spacing: 0.5px} .side_menu a.close_side_menu {background-image: url("images/close_side_menu.png"); background-repeat: no-repeat; display: inline-block; width: 43px; height: 56px; line-height: 56px; position: absolute; right: 10px; top: 29px; transition: none; z-index: 1000} /* Pages comment accompagner */ .background_conseils_zyhtologues{ background: url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -560px top, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -720px center, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -920px bottom, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat calc(100% + 580px) 150px, url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat calc(100% + 550px) bottom !important; } /* FIN Pages comment accompagner */ /* footer */ footer .footer_bottom_holder{padding-bottom: 40px} footer .afterfooter{margin:0 auto 0; width: 100%; max-width: 1100px; position: relative; padding-bottom:25px; min-height: 20px; font-size:12px} footer .afterfooter span{} footer .afterfooter span a{color:#fff; text-transform: uppercase; font-family: "Neuton", sans-serif; margin-right: 30px; letter-spacing: 1px } footer .afterfooter span.last a{margin-right: 0} footer .afterfooter span a:hover{color:#ffd803} footer .afterfooter img{width: 50px; height: 21px; vertical-align: bottom; margin:3px 0 0 3px; float: right} footer .afterfooter img.freien{float: left; height:20px;margin-right:15px;position: relative;top: -2px;} footer .afterfooter .afterfooterleft{float: left} footer .afterfooter .afterfootermiddle{text-align: center; display: inline-block; position: absolute; left:0; right:0; z-index: 30} footer .afterfooter .afterfooterright{float: right; z-index: 50; position: relative} /* footer */ /* LARGE SCREENS > 1600px */ @media only screen and (min-width: 1600px) { #derniere_recette_conseils_home{width: 100% !important;} #derniere_recette_conseils_home .section_inner{width: 80%; max-width: 1600px;} #tous_les_conseils_carousel h3{font-size: 35px} } /* FIN LARGE SCREENS > 1600px */ /* MEDIUM SCREENS < 1600px */ @media only screen and (min-width: 1024px) and (max-width: 1600px) { /* LIGHTBOX */ .fancybox-skin{padding: 0 !important} #contentLightbox{max-width: 540px !important; width: 100% !important; max-height: 370px !important; height: 370px !important; padding: 80px 0 0; overflow: visible; margin-top: 60px !important} #contentLightbox #logo_lightbox{position: absolute; top: -90px; left:0; right:0; margin: 0 auto} #contentLightbox #logo_lightbox img{max-width: 180px; width: 180px; height: auto} #contentLightbox h1{font-family: "Neuton",sans-serif; font-size: 32px; color: #fff; letter-spacing: 1px; font-weight: normal; margin-bottom: 0; text-shadow: 0 3px 4px rgba(53, 46, 42, 1);} #contentLightbox h2{font-family: "Neuton",sans-serif; font-size: 20px; color: #fff; font-weight: normal; letter-spacing: 1px; margin-bottom: 35px; text-shadow: 0 3px 4px rgba(53, 46, 42, 1);} #contentLightbox #bouton_majeur{ background: #ffd803; color: #000; font-family: "Neuton",sans-serif; font-size: 14px; font-weight: bold; padding: 10px 2px; margin: 0 auto 15px auto !important; cursor: pointer;} #contentLightbox p{color: #fff; text-align: center; margin-bottom: 0; font-size: 13px} #contentLightbox #loader{display: none;} #beierweifreiersplash {margin-top: 40px} #beierweifreiersplash img{ max-width: 60%; height: auto} #beierweifreiersplashtop{margin-top: 50px; margin-bottom: 100px;} #beierweifreiersplashtop img{ max-width: 60%; height: auto} /* FIN LIGHTBOX */ #derniere_recette .auteur {font-size: 12px} #derniere_recette .fond_jaune {font-size: 14px; font-style: italic; font-weight: bold; margin-top: 25px; padding: 7px 15px 7px 45px} .fond_jaune.carousel_home {background: #ffd803 url("images/bouton-more-battin-35.jpg") no-repeat scroll left center; bottom: 3px; display: inline-block; font-size: 14px; font-style: italic; font-weight: bold; left: 28px; padding: 7px 15px 7px 45px; position: absolute; text-transform: none; width: auto; z-index: 100} #tous_les_conseils_carousel h3 {font-size: 37px} #tous_les_conseils_carousel .more {background: rgba(0, 0, 0, 0) url("images/bouton-more-battin-35.jpg") no-repeat scroll left top; bottom: 89px; height: 35px; position: absolute; right: 7px; width: 35px} #gamme_all_bieres_battin .vc_col-sm-2 {margin: 25px 0 25px 0; /*width: 18%;*/} #gamme_all_bieres_battin .vc_col-sm-2:last-of-type {margin-right: 0} /* utile pour la Homepage avec la derniere recette et le carousel des conseils */ .vc_col-md-6.vc_col-lg-4, .vc_col-md-6.vc_col-lg-8{width: 50% !important} /* PAGE NOS BIERES */ body.page-id-13 > .wrapper > .wrapper_inner > .content > .content_inner > .container{background: url(images/background-gamme-battin-biere-luxembourg.jpg) no-repeat -700px top !important} /* FIN PAGE NOS BIERES */ .background_conseils_zyhtologues{background: transparent !important} /* PAGE LE SAVOIR BIERE */ body.page-id-15 > .wrapper > .wrapper_inner > .content > .content_inner > .full_width{background: transparent !important} /* FIN PAGE LE SAVOIR BIERE */ /* PAGE CONTACT */ body.page-template-contact-page #map_canvas{height: 420px !important; margin-top: 30px; margin-bottom: 0 !important} body.page-template-contact-page .google_map_holder h1{display: none !important; visibility: hidden !important} /* FIN PAGE CONTACT */ } /* FIN MEDIUM SCREENS < 1600px */ /* Mobile iphone5 et iphone 5S */ /*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {*/ @media only screen and (max-width: 1023px) { /* LIGHTBOX */ .fancybox-skin{padding: 0 !important} #contentLightbox{max-width: 540px !important; width: 100% !important; max-height: 280px !important; height: 280px !important; padding: 80px 0 0; overflow: visible; margin-top: 60px !important} #contentLightbox #logo_lightbox{position: absolute; top: -75px; left:0; right:0; margin: 0 auto} #contentLightbox #logo_lightbox img{max-width: 150px; width: 150px; height: auto} #contentLightbox h1{font-family: "Neuton",sans-serif; font-size: 30px; color: #fff; letter-spacing: 1px; font-weight: normal; margin-bottom: 10px; text-shadow: 0 3px 4px rgba(53, 46, 42, 1);} #contentLightbox h2{font-family: "Neuton",sans-serif; font-size: 18px; color: #fff; font-weight: normal; letter-spacing: 1px; margin-bottom: 25px; text-shadow: 0 3px 4px rgba(53, 46, 42, 1);} #contentLightbox #bouton_majeur{ background: #ffd803; color: #000; font-family: "Neuton",sans-serif; font-size: 14px; font-weight: bold; padding: 10px 2px; margin: 0 auto 25px auto !important; cursor: pointer;} #contentLightbox p{color: #fff; text-align: center; margin-bottom: 0; font-size: 12px} #contentLightbox #loader{display: none;} #beierweifreiersplash {margin-top: 30px} #beierweifreiersplash img{ max-width: 70%; height: auto} #beierweifreiersplashtop{margin-top: 40px; margin-bottom: 50px;} #beierweifreiersplashtop img{ max-width: 70%; height: auto} /* FIN LIGHTBOX */ /* LOGO */ header .q_logo a, header .q_logo img {height: 110px !important} header .q_logo a {left: -19% !important} header.centered_logo .q_logo img {top: 8px} /* FIN LOGO */ /* MENU NAVIGATION */ /* menu hamburger */ header.centered_logo .header_inner_right{display: block !important; z-index: 300} /* menu hamburger */ .main_menu.drop_down.left_side{display: block !important} #menu-menu-left-fr{display: none !important} #menu-menu-right-fr{display: none !important} body header.centered_logo .header_inner_right.left_side{display: none !important} .mobile_menu_button{display: none !important} .social-icones {top: 15px;} .social-icones a {margin-right: 9px} .side_menu_button{height: 60px !important; z-index: 300} .side_menu_button > a {display: inline; font-size: 30px; height: 40px; position: relative; width: 45px; color: #fff; z-index: 300} .header_top_bottom_holder {background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0; height: 70px; position: relative} header.sticky .header_top_bottom_holder {height: 90px} header.sticky nav.main_menu > ul > li > a {line-height: 90px !important} .side_menu.right ul li.current-menu-item a{color: #fff} /* FIN MENU NAVIGATION */ /* HOMEPAGE MOBILE */ #qode-home .carousel-inner .item .image {background-size: cover;} #qode-home.carousel:not(.advanced_responsiveness) .carousel-inner .slider_content {display: block} #qode-home h4.q_slide_subtitle{padding-top:0; position: absolute !important; left:0; right:0; text-align: center; font-size:25px !important} #gamme_home h2{font-size: 35px; line-height: 45px; color: #fff; text-transform: uppercase; margin: 15px 0} #gamme_home .vc_col-sm-2{width: 100%; margin: 25px 0} body.side_menu_slide_with_content .side_menu, body.side_menu_slide_with_content.width_270 .side_menu, body.side_menu_slide_with_content.width_370 .side_menu{width: inherit !important} .infos_biere h1{color: #fff; font-size: 40px; margin-bottom: 25px; letter-spacing:0} #derniere_recette p {line-height: 115%; margin-top: 10px} #tous_les_conseils_carousel .more{right: 5px; bottom: 50px} #tous_les_conseils_carousel h3 {font-size: 27px; line-height: 30px} #derniere_recette a{display: block} #derniere_recette .auteur{bottom:55px;} #derniere_recette .more{bottom:55px;} #derniere_recette .fond_jaune{padding-right: 15px; margin-bottom: 0; margin-top: 5px; display: block} #tous_les_conseils_carousel {padding-left: 10px; padding-right: 10px; position: relative; width: 92%} .fond_jaune.carousel_home {background: #ffd803 url("images/bouton-more-battin-35.jpg") no-repeat scroll left center; bottom: 0; font-size: 18px; font-style: italic; font-weight: bold; margin-left: 0; margin-right: 0; padding: 7px 0 7px 45px; position: relative !important; text-transform: none; width: 100%; z-index: 100; box-sizing: border-box; margin-top: 0 !important; left: 0} #tous_les_conseils_carousel .owl-prev {color: #fff; font-size: 30px; left: -8px; position: absolute; top: 55%} #tous_les_conseils_carousel .owl-next {color: #fff; font-size: 30px; position: absolute; right: -12px; top: 55%} /*#histoire_home{background-size: 100% 150px;padding-top: 10px; padding-bottom: 0 !important; margin-top: 60px !important; margin-bottom: 0; margin-left: 0; text-transform: uppercase; background-repeat: no-repeat; background-position: center top !important; height: 150px !important; overflow: hidden !important; position: relative !important; float: left !important; max-height: 150px !important;}*/ #histoire_home{ margin-top: 60px !important; text-align: center; padding: 15px 0; /*background-image: url("http://battin.lu/wp-content/uploads/2016/04/back-histoire-battin-biere-luxembourg-2.jpg");*/ background-position: center top !important; background-size: contain !important; background-attachment: initial; width: 100%; height: 150px; } #histoire_home p {font-size: 46px; letter-spacing: 4px; line-height: 40px; text-align: center} #histoire_home p a {color: #fff; font-family: "Neuton",sans-serif; font-size: 40px; letter-spacing: 5px; line-height: 43px; text-shadow: 0 3px 4px rgba(150, 150, 150, 1)} #histoire_home p a br{display: none !important} #derniere_recette h3 {font-size: 27px; line-height: 30px} #bandeau_vert{ width:100%; position: relative; text-align: center; margin:40px 0; background: url('images/bandeau_vert_pb_pb_mobile.png') no-repeat center center / contain; padding-bottom:28.25%; } /* FIN HOMEPAGE */ /* MODULE GAMME BIERE BATTIN */ #gamme_all_bieres_battin{background: none} #gamme_all_bieres_battin h3{color: #fff; text-align: center; text-transform: uppercase; margin-bottom: 10px; font-size: 38px; line-height: 45px} #gamme_all_bieres_battin div.nom_de_la_biere{font-family: "Neuton",sans-serif; font-style: normal; font-weight: 700; color: #ffffff; text-align: center; font-size: 35px; line-height: 1.30435em} #gamme_all_bieres_battin .vc_col-sm-2{width: 55%; margin: 0 20% 0 21%} #gamme_all_bieres_battin .vc_col-sm-2:hover div.nom_de_la_biere{color: #ffd803} .owl-dots{margin: 15px 0 15px; width: 100%; text-align: center} .owl-dot{background: #fff; border: none; border-radius: 50%; width: 20px; height: 20px; float: none; margin: 0 10px 0 0; box-sizing: border-box; display: inline-block;} .owl-dots .owl-dot:last-of-type{margin-right: 0} .owl-dot.active{border: 2px solid #fecf0f; background: #000} .owl-item .vc_col-sm-2{width: 100% !important; margin:0 auto !important} .owl-item .image_with_text{width: 100%} .owl-item .nom_de_la_biere{margin-top: 15px} .owl-item a img{max-width: 50%; width: 50%; padding: 0 !important; text-align: center; margin: 0 auto!important;} /* FIN MODULE GAMME BIERE BATTIN */ /* PAGE HISTOIRE */ .header_full_width_padding h1 {color: #fff !important; font-size: 50px; letter-spacing: 2px; position: absolute; text-transform: uppercase; top: 220px; width: 100%; z-index: 500; text-align: center} body.page-id-11 .parallax_section_holder { background-image: url("images/background_histoire_battin_mobile.jpg") !important; background-attachment: initial !important; background-repeat: no-repeat; background-size: auto auto; background-position: 50% top !important; height: 180px !important; min-height: 180px !important; } body.page-id-11 .header_full_width_padding h1 {color: #fff !important; font-size: 48px !important; position: absolute; top: 55px !important; width: 100%; letter-spacing: 3px; padding: 0} .header_full_width_padding h1 {color: #fff !important; font-size: 48px !important; position: absolute; top: 55px !important; width: 100%; letter-spacing: 3px; padding: 0} body.page-id-11 h2{color: #ffd803; font-size: 16px} /* FIN PAGE HISTOIRE */ /* PAGE TOUTES LES RECETES */ .header_full_width_padding h1 {font-size: 33px !important; top: 60px !important; width: 100%; letter-spacing: 2px; padding: 0 !important; text-align: center; left: 0; right: 0} .header_full_width_padding h2 {font-size: 25px !important; top: 110px !important; width: 100%; letter-spacing: 2px; padding: 0; text-align: center; left: 0; right: 0} body.page-id-172 .parallax_section_holder { background-image: url("images/background_toutes_les_recettes_battin_mobile.jpg") !important; background-attachment: initial !important; background-repeat: no-repeat; background-size: auto auto; background-position: 50% top !important; height: 180px !important; min-height: 180px !important; } /* FIN PAGE TOUTES LES RECETES */ /* PAGE DETAIL RECETTE */ body.page-template-recette_biere .parallax_section_holder { /*background-image: url("images/background_toutes_les_recettes_battin_mobile.jpg") !important;*/ background-attachment: initial !important; background-repeat: no-repeat; background-size:cover !important; background-position: 50% top !important; height: 230px !important; min-height: 230px !important; } body.page-template-recette_biere .header_full_width_padding h2 { color: #fff !important; letter-spacing: 2px; position: absolute; width: 80%; font-size: 25px !important; line-height: 30px !important; z-index: 500; left: 10%; right: 0; text-align: center; } body.page-template-recette_biere .header_full_width_padding p { color: #fff; font-size: 20px; font-style: italic; position: absolute; text-align: center !important; left: 0; right: 0; text-transform: none; top: 200px; width: 100%; z-index: 500; } body.page-template-recette_biere #carousel_recettes .owl-dots { margin-top: 25px; width: auto !important; display: block !important; margin: 0 auto !important; text-align: center !important; } body.page-template-recette_biere #carousel_recettes .owl-dots .owl-dot { float: none !important; margin: 0 10px 0 0; display: inline-block !important; } .fond_jaune .header_left_ingredients { border-right: 2px solid #000; font-size: 15px; font-weight: bold; height: 100%; padding: 15px 0 10px; text-align: center; text-transform: uppercase; width: 36%; float: left; } .fond_jaune .header_right_ingredients { float: left; padding: 10px 0; text-align: left; width: 64%; } .fond_jaune .header_right_ingredients .temps_preparation img { float: left; height: auto; margin-top: 5px; width: 25px; } .fond_jaune .header_right_ingredients .span_temps_preparation { float: left; font-size: 15px; font-weight: bold; line-height: 41px; margin-left: 5px; vertical-align: middle; } .fond_jaune .header_right_ingredients .nb_personnes { margin-left: 10px; float: left; padding: 0; } .fond_jaune .header_right_ingredients .nb_personnes img { float: left; height: auto; margin-top: 10px; width: 25px; } .fond_jaune .header_right_ingredients .span_nb_personnes { float: left; font-size: 15px; font-weight: bold; line-height: 41px; margin-left: 5px; vertical-align: middle; } body.page-template-recette_biere #content_recette a.fond_jaune { font-family: "Neuton",sans-serif; font-size: 14px; letter-spacing: 2px; line-height: 18px; padding: 10px 20px 10px 10px; margin-top: 250px; margin-bottom: 0; } body.page-template-recette_biere #content_recette a.fond_jaune img { bottom: 60px !important; position: absolute; right: 0; } /* FIN PAGE DETAIL RECETTE */ /* PAGE TOUS LES CONSEILS */ body.page-id-174 .parallax_section_holder { background-image: url("images/background_toutes_les_recettes_battin_mobile.jpg") !important; background-attachment: initial !important; background-repeat: no-repeat; background-size: auto auto; background-position: 50% top !important; height: 180px !important; min-height: 180px !important; } /* FIN PAGE TOUS LES CONSEILS */ /* PAGE detail_conseil */ body.page-template-detail_conseil .content.content_top_margin_none {margin-top: 15px !important} body.page-template-detail_conseil h1{color: #fff; font-size: 23px; text-transform: uppercase; text-align: center; margin-top: 45px !important; margin-bottom: -20px !important; letter-spacing: 1px} body.page-template-detail_conseil h1 span span{color: #ffd803} body.page-template-detail_conseil .wpb_single_image img {height: auto; max-width: 50%; margin-bottom: -15px;} body.page-template-detail_conseil h2{color: #ffd803; font-size: 35px; line-height: 40px; margin-bottom: 25px !important} body.page-template-detail_conseil h3{color: #fff; font-size: 22px; line-height: 27px; margin-bottom: 15px !important} body.page-template-detail_conseil h3 span{color: #ffd803;} body.page-template-detail_conseil p{color: #fff; margin-bottom: 25px; text-align: center; line-height: 150%} body.page-template-detail_conseil #atstbx{text-align: center} #tous_les_conseils_sauf_actuel{margin-top: 30px} #tous_les_conseils_sauf_actuel .vc_col-sm-6{margin-bottom: 30px !important; padding-left: 15px; padding-right: 15px; position: relative} #tous_les_conseils_sauf_actuel .vc_col-sm-6 .more{width: 41px; height: 41px; position: absolute; right: 25px; bottom: 65px; background: url(images/sprite_css.png) -225px -10px no-repeat; } #tous_les_conseils_sauf_actuel .vc_col-sm-6 .mor{width: 30px; height: 30px; position: absolute; right: 20px; bottom: 55px; } #tous_les_conseils_sauf_actuel .vc_col-sm-6 .mor img{width: 100%; height: auto;} body.page-template-detail_conseil .background_conseils_zyhtologues {background: #000 !important} /* FIN PAGE detail_conseil */ /* PAGE LE SAVOIR BIERE */ body.page-id-15 .parallax_section_holder { background-image: url("images/background_savoir_biere_battin_mobile.jpg") !important; background-attachment: initial !important; background-repeat: no-repeat; background-size: auto auto; background-position: 50% top !important; height: 180px !important; min-height: 180px !important; } body.page-id-15 > .wrapper > .wrapper_inner > .content > .content_inner > .full_width {background:#000!important} body.page-id-15 .section_inner_margin h2 {font-size: 37px; line-height: 45px} .gametrigger a{padding-left: 30% !important; padding-top:12% !important; padding-right: 5% !important} .gametrigger img{left:8% !important; top:15% !important; max-height: 60% !important } .gametrigger h3{font-size:18px !important; line-height: 22px} .gametrigger h4{font-size:14px !important; line-height: 16px} #tous_les_conseils h3 {font-size: 35px !important} /* FIN PAGE LE SAVOIR BIERE */ /* PAGE NOS BIERES MOBILE */ body.page-id-13 > .wrapper > .wrapper_inner > .content > .content_inner > .container{background:none !important} .infos_biere .tab-title {font-size: 22px; padding-left: 0 !important} .infos_biere .q_accordion_holder.accordion .ui-accordion-header .accordion_mark_icon {background-image: url("images/ouvrir-conditionnement-battin.jpg")} body.page-id-13 .qbutton.medium.center.default{padding-left: 23px; padding-right: 5px} .infos_biere .fa-plus {left: -8px} #gambrinus::after {top: 200px} #extra::after {top: 200px} #fruitee::after {top: 180px} #triple::after {top: 200px} #blanche::after {top: 180px} #edelpils::after {top: 200px} body.page-id-13 .wpb_content_element.wpb_single_image img {max-width: 70%} body.page-id-13 .accordion_content .wpb_content_element.wpb_single_image img {max-width: 100%} body.page-id-13 .infos_biere .vc_col-sm-4{width: 100%;text-align: center; position: relative} body.page-id-13 .infos_biere .vc_col-sm-4 .biere, body.page-id-13 .infos_biere .vc_col-sm-4 .vc_align_right, body.page-id-13 .infos_biere .vc_col-sm-4 .vc_align_left{text-align: center} body.page-id-13 .infos_biere .vc_col-sm-8{width: 100%;text-align: center} body.page-id-13 .infos_biere .vc_col-sm-8 h1{text-align: center;} body.page-id-13 .infos_biere .full_section_inner{ display: table-cell; } body.page-id-13 .infos_biere .full_section_inner .vc_col-sm-4{ display: table-header-group; } body.page-id-13 .infos_biere .full_section_inner .vc_col-sm-8{ display: table-footer-group;} /* FIN PAGE NOS BIERES MOBILE */ /* PAGE CONTACT */ body.page-template-contact-page .google_map_holder h1{color: #fff; font-size: 70px !important; letter-spacing: 4px; position: absolute; text-align: center; text-shadow: 4px 4px 2px rgba(150, 150, 150, 1); top: 100px; width: 100%; z-index: 500} /* FIN PAGE CONTACT */ /* FOOTER */ footer img { height: auto; max-width: 90%} footer .afterfooter .afterfooterleft, footer .afterfooter .afterfootermiddle, footer .afterfooter .afterfooterright{ width:90%; margin:.5em 5%; display: block; float:none; text-align: center; position: static; } footer .afterfooter .afterfootermiddle span{ display: block; } footer .afterfooter .afterfootermiddle span a{ margin:0; } footer .afterfooter img{ float: none; display: inline-block; position: relative; top: -3px; } footer .afterfooter .afterfooterright a:first-child{ display: block; text-align: center; margin-bottom: 10px; } footer .afterfooter img.freien{ float:none; position: static; margin-right: 0; } #back_to_top{ bottom: 25px; } /* FIN FOOTER */ } /* ========================================================================== TABLETTE PORTRAIT ========================================================================== */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .logo_wrapper{left: 40% !important} #qode-home h4.q_slide_subtitle{padding-top:0; position: absolute !important; left:0; right:0; text-align: center; font-size:45px !important} #derniere_recette_conseils_home .element_from_fade > div > div{width: 100% !important} #tous_les_conseils_carousel .owl-item a img{max-width: 100% !important} #histoire_home{min-height: 270px !important; background-size: cover !important} #histoire_home p a { line-height: 80px; font-size: 80px;letter-spacing: 5px} #gambrinus::after {top: 200px} #extra::after {top: 200px} #fruitee::after {top: 180px} #triple::after {top: 200px} #blanche::after {top: 180px} #edelpils::after {top: 200px} #brune::after {top: 200px} #christmas::after {top: 200px} body.page-id-13 .infos_biere .full_section_inner{ display: table-cell; } body.page-id-13 .infos_biere .full_section_inner .vc_col-sm-4{ display: table-header-group; float:none; } body.page-id-13 .infos_biere .full_section_inner .vc_col-sm-8{ display: table-footer-group; float:none;} /* PAGE LE SAVOIR BIERE TABLETTE PORTRAIT */ body.page-id-15 .parallax_section_holder {background-size: cover !important} .gametrigger a{padding-left: 25% !important; } .gametrigger img{left:8% !important; } /* FIN PAGE LE SAVOIR BIERE TABLETTE PORTRAIT */ } /* ========================================================================== FIN TABLETTE PORTRAIT ========================================================================== */ /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -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(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .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(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .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: none; transform: none; } 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: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 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: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 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: none; transform: none; } 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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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(.9, .9, .9); transform: scale3d(.9, .9, .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -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; } @-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: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .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-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-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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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: none; transform: none; 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-name: hinge; animation-name: hinge; } /* 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: none; transform: none; } } @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: none; transform: none; } } .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.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(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.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(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .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.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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; } /** * CTA */ .header_cta{ position: absolute; background-color: #ffd803; padding: 0 20px; z-index: 1; right: 0; color: #303030; font-size: 14px; font-style: italic !important; font-weight: 700; display: inline-block; width: auto; height: 33px; line-height: 33px; -webkit-animation-name: header_cta; animation-name: header_cta; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; margin-right: 4.5rem; } .header_cta:hover{ color: #303030; } .header_cta img{ display: inline-block; width: 16px; vertical-align: sub; } .position-relative{ position: relative; z-index: 2000; } @-webkit-keyframes header_cta { 0%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes header_cta { 0%{ -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100%{ -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @media only screen and (max-width: 1023px){ .header_cta{ position: fixed; top: calc(50% - 33px); right: 0; margin: 0; display: block; -webkit-transform: rotate(-90deg) translateX(50%); transform: rotate(-90deg) translateX(50%); -webkit-animation-name: none; animation: none; -webkit-transform-origin: right bottom; transform-origin: right bottom; } } @media only screen and (max-width: 1200px) and (min-width: 1000px) { .header_cta{ margin-right: 0; } } .side_menu_cta{ background: #e8e9e3; color: black!important; position: absolute; bottom: 0; left: 0; right: 0; font-family: "Neuton",sans-serif; font-weight: bold!important; font-size: 21px; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 10px 10px 10px 20px; display: flex; align-items: center; } .side_menu_cta img{ width: 25px; vertical-align: sub; margin-right: 20px; } .side_menu_cta span{ color: black!important; } .text-center{ text-align: center!important; } .d-table{ display: table; } .cta{ margin-top: 14px; text-transform: none; font-style: italic; font-weight: 700; font-size: 18px; padding: 7px 20px 7px 45px; background: #ffd803 url("./images/bouton-more-battin-35.jpg") no-repeat left center; display: inline-block; width: auto; color: #000; } .cta:hover{ color: #000; } .cta span{ white-space: nowrap; } #qode-home-copie .slider_content, #qode-home-copie .text{ height: 100%; } #qode-home-copie .cta{ position: absolute; top: 37%; left: 51%; transform: translate(-50%, -50%); } @media only screen and (max-width : 768px) { #qode-home-copie .cta { left: 50%; top: 85%; } #qode-home-copie .slider_content_outer{ width: calc(100% - 30px); } #qode-home-copie .image{ background-position: center center; } } #qode-home-copie .q_slide_subtitle{ line-height: 1; text-align: left; left: 42%; position: absolute; white-space: nowrap; top: 10%; } @media only screen and (max-width: 768px){ #qode-home-copie .q_slide_subtitle{ left:0; white-space: normal; font-size: 39px !important; color: #000 !important; top: 0; } } @media only screen and (max-width: 1023px){ .parallax_content_full_width .h1{ font-size: 22px!important; letter-spacing: 1px!important; } } body.page-id-3032 .parallax_section_holder, body.page-id-15 .parallax_section_holder{ background-size: 100%; } @media only screen and (max-width: 1023px){ body.page-id-3032 .parallax_section_holder, body.page-id-15 .parallax_section_holder{ background-image: url("https://battin.lu/wp-content/uploads/2021/07/BATT_homepage_700x1634.jpg") !important; background-attachment: initial !important; background-repeat: no-repeat; min-height: 226px!important; height: 226px!important; background-repeat: no-repeat; background-size: 132%; background-position: 50% 50% !important; } } .parallax_content_full_width .h1{ font-size: 40px; } #displaynone{ display: none; }