@font-face { font-family: 'Arial Rounded MT Bold'; src: url('../../fonts/b2c_v4/arlrdbd-webfont.eot'); src: url('../../fonts/b2c_v4/arlrdbd-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/b2c_v4/arlrdbd-webfont.woff2') format('woff2'), url('../../fonts/b2c_v4/arlrdbd-webfont.woff') format('woff'), url('../../fonts/b2c_v4/arlrdbd-webfont.ttf') format('truetype'), url('../../fonts/b2c_v4/arlrdbd-webfont.svg#arial_rounded_mt_boldbold') format('svg'); font-weight: normal; font-style: normal;} #shadow_centre{background-color:#9da7b2;} #navigation_centre{ z-index: 4; padding-top: 1px; width: 990px; left: 0px; position: absolute; top: 0px; } #navigation_centre ul{ margin-top: 10px; overflow: hidden; text-align: center; padding-bottom: 0px; } #navigation_centre li{ list-style-type: none; text-align:center;display:inline-block;min-width:50px;} #navigation_centre li:hover{ cursor:pointer;} #navigation_centre li.sep{ list-style-type: none; background-image: url("../../img/b2c_v4/path_line.png"); background-repeat: no-repeat; background-position: left 18px; display:inline-block;min-width:53px;cursor:auto;} #navigation_centre li.active.case1,#navigation_centre li.case1:hover{ background-position: center 0px; } #navigation_centre li.case2{ background-position: center -150px; } #navigation_centre li.active.case2,#navigation_centre li.case2:hover{ background-position: center -100px; } #navigation_centre li.case3{ background-position: center -250px; } #navigation_centre li.active.case3,#navigation_centre li.case3:hover{ background-position: center -200px; } #navigation_centre li.case4{ background-position: center -350px; } #navigation_centre li.active.case4,#navigation_centre li.case4:hover{ background-position: center -300px; } #navigation_centre li span{ font-family: 'FagoWebPro-Cond',Arial; font-size: 14px; font-weight: bold; color: #D4D9DD; padding: 0px; } #navigation_centre li.case1.active span,#navigation_centre li.case1:hover span{ color: #fab711; } #navigation_centre li.case2.active span,#navigation_centre li.case2:hover span{ color: #fab711; } #navigation_centre li.case3.active span,#navigation_centre li.case3:hover span{ color: #fab711; } #navigation_centre li.case4.active span,#navigation_centre li.case4:hover span{ color: #fab711; } #module_centre > .content{ height: 350px; position: relative; width: 990px; margin:0 auto;} #module_centre > .content.playing_video{ width: 100%; background-color: #000000;} #module_centre > .content.playing_video .block_texte,#module_centre > .content.playing_video .personnage{ display:none;} #module_centre{ width: 100%; height: 325px; background-color: #fff; background-position: center top; background-repeat: no-repeat;} #module_centre #anim_centre { width: 100%; height: 100%; } #module_centre #anim_centre .slide_centre.active{ position: absolute; top: 0; width: 100%; height: 100%; left: 0; opacity: 1; filter: alpha(opacity=100); z-index: 1; overflow:hidden;} #module_centre #anim_centre .slide_centre{ position: absolute; top: 0; width: 100%; height: 100%; left: 0; opacity: 0; z-index: -1; filter: alpha(opacity=100); } #module_centre #anim_centre .slide_centre{ -webkit-transition: opacity 1s ease;-moz-transition: opacity 1s ease;-ms-transition: opacity 1s ease;-o-transition: opacity 1s ease;transition: opacity 1s ease; } #module_centre #anim_centre .slide_centre .block_texte{ position: absolute; left: 0px; top: 0; } #module_centre #anim_centre .slide_centre .block_texte .image{ float: left; width: 140px; height: auto; position: relative; top: 0px; } #module_centre #anim_centre .slide_centre .block_texte .content{ float: left; width: 275px; margin-left: 25px; height: auto; color: #000; position:relative; } #module_centre #anim_centre .slide_centre .block_texte .content h2{ font-size: 22px; margin-bottom: 13px; font-family:'Shadows Into Light Two',Arial; background-image: url("../../img/b2c_v4/path_line.png"); background-repeat: repeat-x; background-position: left 30px; margin-top:0px;line-height:27px;color:#000;font-style:italic; padding-bottom:10px;letter-spacing:1px;} #module_centre #anim_centre .slide_centre .block_texte .content p{ color: #85929F; } #module_centre #anim_centre .slide_centre .block_texte .content p b,#module_centre #anim_centre .slide_centre .block_texte .content h2{ color: #000; } #module_centre #anim_centre .slide_centre .block_texte .content p{ display: inline; font-family: 'FagoWebPro-Cond',Arial; font-size: 15px; line-height: 18px; position: relative; } #module_centre #anim_centre .slide_centre .block_texte .content b,#module_centre #anim_centre .slide_centre .block_texte .content strong{ margin-top:0px; } #module_centre #anim_centre .slide_centre .block_texte .content .quote{ width: 8px; height: 8px; display: block; position: absolute; background-image: url("../../img/b2c_v4/quote_module_centre.png"); } #module_centre #anim_centre .slide_centre .block_texte .content .quote.before{ left: -10px; top: 0; } #module_centre #anim_centre .slide_centre .block_texte .content .quote.after{ right: -10px; bottom: 0; } #module_centre #anim_centre .slide_centre .block_texte ul { margin-top: 21px; } #module_centre #anim_centre .slide_centre .block_texte ul li{ list-style-type: none; background: transparent url(../../img/b2c_v4/sprite.png) 0 -606px no-repeat; padding-left: 15px; } #module_centre #anim_centre .slide_centre .block_texte ul li a{ color: white; text-decoration: none; font-family: Verdana; font-size: 12px; } #module_centre #anim_centre .slide_centre .block_texte ul li a:hover{ color: black; text-decoration: none; font-family: Verdana; font-size: 12px; } #module_centre #anim_centre .slide_centre .personnage{ position: absolute; bottom: 0; right: 0; padding-left: 80px; background-image: url("../../img/b2c_v4/fleche_module_centre.png"); background-position: 70px 120px; background-repeat: no-repeat; } #module_centre #anim_centre .slide_centre .personnage .lire_la_video{ position: absolute; left: 0; top: 123px; color: #000; font-weight: bold; text-decoration: none; font-family: 'FagoWebPro-Cond',Arial; padding-top: 53px;background-image: url("../../img/b2c_v4/module_centre_lire_video.png"); background-repeat: no-repeat; background-position: center top; font-size: 14px; } #module_centre #anim_centre .slide_centre .personnage .lire_la_video:hover{ position: absolute; left: 0; top: 123px; color: #000; font-weight: bold; text-decoration: none; font-family: 'FagoWebPro-Cond',Arial; padding-top: 53px;background-image: url("../../img/b2c_v4/module_centre_lire_video_hover.png"); background-repeat: no-repeat; background-position: center top; font-size: 14px; } #module_centre #anim_centre .slide_centre.case1 .personnage .lire_la_video{ left: 31px!important; top:186px !important; } #module_centre #anim_centre .slide_centre.case2 .personnage .lire_la_video{ left: 0px!important; top:174px !important; } #module_centre #anim_centre .slide_centre.case2 .personnage{ padding-left: 47px!important; } #module_centre #anim_centre .slide_centre.case3 .personnage .lire_la_video{ left: 0px!important; top:20px !important; } #module_centre #anim_centre .slide_centre.case3 .personnage{ padding-left: 6px!important; } #module_centre #anim_centre .slide_centre.case4 .personnage .lire_la_video{ top:16px !important; } #module_centre #anim_centre .slide_centre.case4 .personnage{ padding-left: 44px!important; } #modules_bot{ position: relative; z-index: 2; } #product_list{ position: relative; z-index: 3; } #logo_module_centre{ position: absolute; top: 4px; left: 0; width: 100%; text-align: center; } #selection_personnage{ width: 990px; height: 350px; position: relative; margin: auto; } #module_centre .overlay_personnages{ -webkit-transition: background 500ms ease;-moz-transition: background 500ms ease; -ms-transition: background 500ms ease; -o-transition: background 500ms ease;transition: background 500ms ease; } #module_centre .overlay_personnages{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.1; filter: alpha(opacity=10); z-index: 1; } #selection_personnage .personnage .texte_personnage p{ padding: 0 15px; margin: 0; font-size: 13px; font-family: 'Shadows Into Light Two',Arial; color: #000; line-height: 16px; letter-spacing:1px; font-style:italic; } #selection_personnage h2{margin-top: 22px;font-weight: bold;width:100%;text-align:center;position:absolute;font-family: "FagoWebPro-Regular",Arial;font-size:25px;color:#000;letter-spacing: -1px;} #selection_personnage h2 strong,#selection_personnage h2 b{display:inline;font-family: "FagoWebPro-Regular",Arial;font-size:48px;color:#fab711;letter-spacing: -1px;} #selection_personnage .personnage{ cursor: pointer; position: absolute; left: 0; z-index: 1; } #selection_personnage .personnage .image_personnage{z-index:2;position:relative;overflow: hidden;} #selection_personnage .personnage .image_personnage img{opacity:0.9;filter:alpha(opacity=90);} #selection_personnage .personnage .image_personnage .hover{ display: none; } #selection_personnage .personnage .image_personnage .alpha{ display: none; opacity:0.1;filter:alpha(opacity=10);} #selection_personnage .personnage:hover .image_personnage .hover{ display: none; } #selection_personnage .personnage:hover .image_personnage .blur{ display: none; } #selection_personnage .personnage:hover .image_personnage .alpha{ display: none; } #selection_personnage .personnage:nth-child(2){ left: 66px; bottom: 25px; az-index: 2; } #selection_personnage .personnage:nth-child(2):hover{ qleft: -20px; } #selection_personnage .personnage:nth-child(3){ left: 285px; z-index: 1; bottom: 25px; } #selection_personnage .personnage:nth-child(3):hover{ qleft: 200px; qz-index: 1; } #selection_personnage .personnage:nth-child(4){ left: 482px; z-index: 2; bottom: 25px; } #selection_personnage .personnage:nth-child(4):hover{ qleft: 326px; qz-index: 2; } #selection_personnage .personnage:nth-child(5){ left: 623px; z-index: 1; bottom: 25px; } #selection_personnage .personnage:nth-child(5):hover{ qleft: 540px; } #selection_personnage .personnage:hover .image_personnage img {opacity:1;filter:alpha(opacity=100);-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;} @media all\0 { #selection_personnage .personnage .image_personnage img{ filter:none; } #selection_personnage .personnage:hover .image_personnage img{ filter:none; } } .transitionPerso {-webkit-transform: scale(1.05); -moz-transform: scale(1.05));-o-transform: scale(1.05);transform: scale(1.05);} #selection_personnage.it3 .personnage:nth-child(2){ az-index: 2; } #selection_personnage.it3 .personnage:nth-child(3){ left: 360px; z-index: 1; } #selection_personnage.it3 .personnage:nth-child(4){ left: 660px; z-index: 2; } #selection_personnage.it2 .personnage:nth-child(2){ az-index: 2; } #selection_personnage.it2 .personnage:nth-child(3){ left: 450px; z-index: 1; } #selection_personnage .personnage .texte_personnage{ position: relative; color: #000; margin: 0; padding-bottom: 27px; text-align: center; z-index:1;} #selection_personnage .personnage.case1 .texte_personnage{ width: 120px; top: 105px; left: -30px; } #selection_personnage .personnage.case2 .texte_personnage{ width: 100%x; top: 10px; left: 0px; text-align:center; } #selection_personnage .personnage.case3 .texte_personnage{ width: 100%; top: 10px; left: 0px; } #selection_personnage .personnage.case4 .texte_personnage{ width: 120px; top: 100px; left: 190px; } #hover_personnage{position: absolute; left: 0;z-index: 4!important;} .touch #hover_personnage{display:none;} #hover_personnage .hover_personnage:nth-child(1){display:none;position: absolute; left: 280px;top:53px; z-index: 1;} #hover_personnage .hover_personnage:nth-child(2){display:none;position: absolute; left: 470px;top:65px; z-index: 1;} #hover_personnage .hover_personnage:nth-child(3){display:none;position: absolute; left: 394px;top:57px; z-index: 1;} #hover_personnage .hover_personnage:nth-child(4){display:none;position: absolute; left: 584px;top:42px; z-index: 1;} #hover_personnage .hover_personnage:nth-child(1) span{font-family: 'FagoWebPro-Regular',Arial; width:500px;position:absolute;top:126px;left:99px;font-size:21px;line-height:25px;color:#000;} #hover_personnage .hover_personnage:nth-child(2) span{font-family: 'FagoWebPro-Regular',Arial; width:400px;position:absolute;top:130px;left:59px;font-size:21px;line-height:25px;color:#000;} #hover_personnage .hover_personnage:nth-child(3) span{font-family: 'FagoWebPro-Regular',Arial; width:500px;position:absolute;top:100px;right:74px;font-size:21px;line-height:25px;color:#000;text-align:right;} #hover_personnage .hover_personnage:nth-child(4) span{font-family: 'FagoWebPro-Regular',Arial; width:400px;position:absolute;top:137px;right:70px;font-size:21px;line-height:25px;color:#000;text-align:right;} #hover_personnage.it3 .hover_personnage:nth-child(1){} #hover_personnage.it3 .hover_personnage:nth-child(2){left: 289px;} #hover_personnage.it3 .hover_personnage:nth-child(3){left: 560px;} #hover_personnage.it3 .hover_personnage:nth-child(1) span{font-family: 'FagoWebPro-Regular',Arial; width:500px;position:absolute;top:126px;left:99px;font-size:21px;line-height:25px;color:#000;} #hover_personnage.it3 .hover_personnage:nth-child(2) span{left:-342px;width: 400px;text-align: right;} #hover_personnage.it3 .hover_personnage:nth-child(3) span{top:143px;} body .content .first_step, body .content .second_step{ display: none; } body .content .first_step.active, body .content .second_step.active{ display: block; } .first_step.active{ opacity: 0; display: block; } .first_step.active.visible{ opacity: 1; } .first_step{-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;transition: all 500ms ease;} #selection_personnage .personnage.cache{ opacity: 0; bottom: -500px; } #selection_personnage .personnage{-webkit-transition: bottom 500ms ease, opacity 1s ease;-moz-transition: bottom 500ms ease, opacity 1s ease;-ms-transition: bottom 500ms ease, opacity 1s ease;-o-transition: bottom 500ms ease, opacity 1s ease;transition: bottom 500ms ease, opacity 1s ease;} #navigation_centre.cache{ opacity: 0; top: 10px; } .slide_centre .block_texte.cache,.slide_centre .personnage.cache,.slide_centre .lire_la_video.cache,#navigation_centre.cache{-webkit-transition: all 0 ease!important;-moz-transition: all 0 ease!important;-ms-transition: all 0 ease!important;-o-transition: all 0 ease!important;transition: all 0 ease!important; } .slide_centre .block_texte,.slide_centre .personnage,.slide_centre .lire_la_video,#navigation_centre{opacity: 1; filter: alpha(opacity=100); -webkit-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 2s ease;-moz-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 2s ease;-ms-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 2s ease;-o-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 2s ease;transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 2s ease;} .slide_centre .lire_la_video{-webkit-transition: all 0 ease;-moz-transition: all 0 ease;-ms-transition: all 0 ease;-o-transition: all 0 ease;transition: all 0 ease;min-width: 53px;} .close_video{-webkit-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 500ms ease;-moz-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 500ms ease;-ms-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 500ms ease;-o-transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 500ms ease;transition: top 1s ease, bottom 1s ease, left 1s ease, background 2s ease, opacity 500ms ease;} .slide_centre .block_texte.cache{ opacity: 0; filter: alpha(opacity=0); top: 90px!important; } .slide_centre .personnage.cache{ opacity: 0; filter: alpha(opacity=0); bottom: -1000px!important; } .slide_centre .lire_la_video.cache{ opacity: 0; filter: alpha(opacity=0); } .slide_centre .personnage.no_bg{ background-image: none!important; } #loader_home{ position: relative; z-index: 1; width: 980px; margin: auto; margin-top: 100px; text-align: center; } #loader_home h2{ color: #000; font-size: 14px; letter-spacing: 5px; } #loader_home .progress_bar{ width: 340px; height: 2px; opacity: 0.5; filter: alpha(opacity=50); background: white; margin: auto; margin-top: 5px; margin-bottom: 15px; position: relative; } #loader_home .progress_bar .fill_bar{ width: 0%; height: 2px; opacity: 0.5; filter: alpha(opacity=50); background: #888; max-width: 100%; display: block; } #loader_home .please_message{ font-size: 10px; color: 808080; margin-bottom: 0px; margin-top: 0; } #loader_home .progress_infos{ font-size: 10px; color: white; margin-top: 5px; color: #ccc; font-style: italic; } #module_centre > .content.cache{ display: none; } .slide_centre .video{ display: none; width: 417px; height: 235px; position: absolute; top: 60px; left: 590px; z-index: 500000; } @media screen and (max-width: 1000px){.slide_centre .video,.slide_centre .video div{ width: 280px !important; height: 157px !important;} } .slide_centre.playing_video .video{ display: block; } .overlay_personnages.playing_video{ background-color: black!important; opacity: 1!important; filter: alpha(opacity=100)!important; display: block!important; } .close_video{ cursor: pointer; z-index: 1000000; position: absolute; right: 50px; top: 15px; background-image: url("../../img/b2c_v4/close_video_module_centre.png"); background-position: left top; background-repeat: no-repeat; width: 40px; height: 40px; opacity: 0.5; filter: alpha(opacity=50); } .content .video:hover .close_video{ opacity: 1; filter: alpha(opacity=100); } .content .video img{ width: auto!important; position: absolute; bottom: 10px; right: 10px; top: initial; } #navigation_centre.playing_video{ display: none; } .slide_centre.playing_video{ z-index: 100000!important; } .ombre_video_module_centre{ position: fixed; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0, 0, 0, 0.498039); top: 0px; display: none; } .playing_video .personnage .image_personnage{ display: none; } #loader_home img {-webkit-animation: cssAnimation 1s infinite linear;-moz-animation: cssAnimation 1s infinite linear;-o-animation: cssAnimation 1s infinite linear;} @-webkit-keyframes cssAnimation {from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); } to { -webkit-transform: rotate(360deg) scale(1) skew(0deg) translateX(0px); } } @-moz-keyframes cssAnimation {from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); } to { -moz-transform: rotate(360deg) scale(1) skew(0deg) translateX(0px); } } @-o-keyframes cssAnimation {from { -o-transform: rotate(0deg) scale(1) skew(0deg) translateX(0px); } to { -o-transform: rotate(360deg) scale(1) skew(0deg) translateX(0px); } } .slide_centre .lire_la_video.animate{ animation: animationFrames linear 1s; animation-iteration-count: 1; transform-origin: ; -webkit-animation: animationFrames linear 1s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: ; -moz-animation: animationFrames linear 1s; -moz-animation-iteration-count: 1; -moz-transform-origin: ; -o-animation: animationFrames linear 1s; -o-animation-iteration-count: 1; -o-transform-origin: ; -ms-animation: animationFrames linear 1s; -ms-animation-iteration-count: 1; -ms-transform-origin: ;} @keyframes animationFrames{ 0% { opacity:1; transform: rotate(0deg) scaleX(1) scaleY(1) ; } 10% { transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 20% { transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 30% { transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 40% { transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 50% { transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 60% { transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 70% { transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 80% { transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 90% { transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 100% { opacity:1; transform: rotate(0deg) scaleX(1.2) scaleY(1.2) ; } } @-moz-keyframes animationFrames{ 0% { opacity:1; -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 10% { -moz-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 20% { -moz-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 30% { -moz-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 40% { -moz-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 50% { -moz-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 60% { -moz-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 70% { -moz-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 80% { -moz-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 90% { -moz-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 100% { opacity:1; -moz-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) ; } } @-webkit-keyframes animationFrames { 0% { opacity:1; -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 10% { -webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 20% { -webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 30% { -webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 40% { -webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 50% { -webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 60% { -webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 70% { -webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 80% { -webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 90% { -webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 100% { opacity:1; -webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) ; } } @-o-keyframes animationFrames { 0% { opacity:1; -o-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 10% { -o-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 20% { -o-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 30% { -o-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 40% { -o-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 50% { -o-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 60% { -o-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 70% { -o-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 80% { -o-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 90% { -o-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 100% { opacity:1; -o-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) ; } } @-ms-keyframes animationFrames { 0% { opacity:1; -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ; } 10% { -ms-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 20% { -ms-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8) ; } 30% { -ms-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 40% { -ms-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 50% { -ms-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 60% { -ms-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 70% { -ms-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 80% { -ms-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2) ; } 90% { -ms-transform: rotate(3deg) scaleX(1.2) scaleY(1.2) ; } 100% { opacity:1; -ms-transform: rotate(0deg) scaleX(1.2) scaleY(1.2) ; } } #module_centre.homeBanner {min-height: 325px;} #module_centre.homeBanner > .content {height: auto;}