@media only screen and (min-width:980px) and (max-width:10000px){.Maad_MainHeader{display:block}.Maad_MainHeader_Responsive{display:none;width:0px !important;height:0px !important}}@media only screen and (max-width:979px){.Maad_MainHeader{display:block}.Maad_MainHeader_Responsive{display:none;height:0px !important}}@media only screen and (max-width:767px) and (min-width:461px){.Maad_MainHeader{display:none;width:0px !important;float:right}.Maad_MainHeader_Responsive{display:block}}@media only screen and (max-width:460px){.Maad_MainHeader{display:none;width:0px !important;float:right}.Maad_MainHeader_Responsive{display:block}}#header .block-cart{background:none;/*width:11%;*/padding-right:0px !important;padding-left:0px !important;float:left !important;margin: 0px 5px 0 10px;}#header .shopping_cart .btn-shopping-cart a.top_cart:after{content:"\f107" !important;font-family:fontawesome !important;font-size:15px !important;position:absolute !important;left:0px !important;top:0 !important}.typeheader-1 .shopping_cart .btn-shopping-cart a.top_cart{padding-right:0px !important}#header .shopping_cart .btn-shopping-cart a.top_cart:after{content:none !important}#header .shopping_cart{line-height: 37px;height: 40px;border-radius: 8px;float: right;text-align: left;background-position: right center;}#header .shopping_cart span{color:#FFF}#header .shopping_cart:after,#header .shopping_cart:before{color:#df1f26}@media (max-width:767px){#header .shopping_cart:after,#header .shopping_cart:before{color:#FFF;left:6px;position:absolute;top:6px}}#sosearchpro.so-search .button-search{border-right:1px solid #f83347 !important;background:#f83347 !important}.typeheader-1 .block-cart:after,.typeheader-1 .block-cart:before{background:transparent !important}@media (max-width:767px){#header .block-cart .shopping_cart .dropdown-menu{/*left:-225px !important*/}#header .block-cart .shopping_cart .shoppingcart-box:before{left:0px !important}#header .shopping_cart .btn-shopping-cart a.top_cart{text-align:center !important}#header .shopping_cart{/*background-color:#f83347 !important;border-radius:5px;padding-left:0px !important;padding-right:0px !important;width:35px !important*/}#sosearchpro.so-search .button-search{border-right:1px solid #f83347 !important;background-color:#f83347}#sosearchpro.so-search .button-search i{color:#fff !important}}@media (max-width:360px){#header .shopping_cart{/*background-color:#f83347 !important;border-radius:5px;padding-left:0px !important;padding-right:0px !important;width:32px !important*/}}@media (max-width:767px){#header .collapsed-block .tabBlock .top-link > li{width:initial !important}}.shopping_cart .dropdown-menu{border-radius:5px !important}body{text-align:-webkit-auto !important}#header .navbar-logo{float:right !important}#header .header-bottom .container .header-bottom-inner .header-bottom-right{padding-left:0px !important;padding-right:0px !important}#header .header-bottom .container .header-bottom-inner .header-bottom-left{padding-left:0px !important;padding-right:0px !important}.header-center-right{padding-right:13px !important;padding-left:1px !important}#sosearchpro.so-search .icon-select:after{width:13px !important}#sosearchpro.so-search .button-search i{color:#fff !important}#sosearchpro.so-search .search{border:1px solid #f83347 !important;border-radius:3px !important}#sosearchpro.so-search .autosearch-input{border-right:1px solid #f83347 !important;border-left:1px solid #f83347 !important}#header #sosearchpro.so-search .select_category{width:200px} @media (max-width: 767px){ #header #sosearchpro.so-search .select_category {width:150px;} } #header .header-top{height:46px !important}.header-bottom-left .so-vertical-menu #menuHeading .megamenuToogle-wrapper .container:before{height:43px !important}#sosearchpro.so-search{float:right !important}@media (max-width:991px) and (min-width:768px){.navbar-logo{margin-bottom:1px !important}.navbar-logo img{width:80% !important;margin-top:3px !important;margin-left:15px !important}}@media (min-width:1200px){.w3-border{left:0px !important;right:auto !important}}@media (max-width:1199px) and (min-width:992px){#sosearchpro.so-search{/*width:85% !important*/}#header .block-cart{/*width:14.5% !important*/}}@media (max-width:991px) and (min-width:768px){#sosearchpro.so-search{/*width:79% !important*/}#header .block-cart{/*width:18% !important*/}}.navbar-compact .header-center .w3-btn{display:block !important}.navbar-compact .otherMenu_dd{display:block !important}.otherMenu_dd{width:100%;min-height:1px;text-align:center;position:relative;top:0px;display:none}#header .header-center.left .header-center-right{margin-top:2px !important;padding-left:0px !important;padding-right:0px !important}#header .header-top{background-color:#f6f6f6 !important;border-bottom:1px solid #fff !important}#header .header-top .languages-block{border:0px !important;z-index:5001 !important}.header-top .currencies-block{border:0px !important;display: none;}#header .header-center{margin: 10px 0;background:#fff !important;padding:5px 0 !important}#header .header-bottom{box-shadow:2px 5px 4px #eee;-moz-box-shadow:2px 5px 4px #eee;-webkit-box-shadow:2px 5px 4px #eee;border: 1px solid #ddd;background:#f5f5f5 !important}#header .header-top .header-top-right ul.top-link > li{border:0px !important}#header .header-bottom .container .header-bottom-inner{background:#fff !important}.header-center-right .col-xs-12{padding-right:7px !important;padding-left:0px !important}@media (min-width:992px){#header .header-center .col-md-3{width:24.5%}}@media (max-width:767px){#sosearchpro.so-search .autosearch-input{border-right:0px !important;display: none;}#header .header-center-right{width:69% !important}#sosearchpro.so-search .search{border:1px solid #f83347 !important;border-radius:3px !important;}#sosearchpro .select_category{border-left:1px solid #f83347 !important; display: none;}}@media only screen and (max-width:767px) and (min-width:461px){#sosearchpro.so-search{/*width:41px !important;*/float:right !important}#header .header-bottom{display:none !important}.n-m-header{display: block !important;}#login_view{display: none;}#search_top{width: 100% !important;}#n-m-su-abc{display: none !important;}#header .header-center-right{box-shadow: 0px 10px 8px #f5f5f5;width:100% !important;border-top: 1px solid #eee;margin: 10px 0;padding: 10px 0;border-bottom: 1px solid #eee;}}@media only screen and (max-width:460px){#sosearchpro.so-search{/*width:41px !important;*/float:right !important}#header .header-bottom{display:none !important}.n-m-header{display: block !important;}#login_view{display: none;}#search_top{width: 100% !important;}#n-m-su-abc{display: none !important;}#header .header-center-right{width: 100% !important;border-top: 1px solid #eee;margin: 10px 0;padding: 10px 0;border-bottom: 1px solid #eee;}}.typeheader-1 .header-top .header-top-right{padding:0px 10px}.typeheader-1 .header-top .header-top-left{padding:0px 10px}.w3-red{color:#fff !important;background-color:#ff5252 !important;background:url(../../../images/title_Fixedmenu.png) no-repeat;background-position:center;width:32px;height:32px;position:absolute;right:-30px;border-radius:5px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.w3-red:Hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}.w3-red_Click{color:#fff !important;background-color:#ff5252 !important;background:url(../../../images/title_Fixedmenu_Show.png) no-repeat;background-position:center;width:32px;height:32px;position:absolute;right:-30px;border-radius:50%;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.w3-red_Click:Hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}.w3-btn{webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s;webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;display:none;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none !important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease}.w3-border{z-index:1010;right:0px}.w3-show{display:block !important}.w3-Hide_RSP{display:block !important}.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}#sohomepage-slider1 .owl2-carousel .owl2-stage-outer{border-radius:15px;overflow:hidden}.module.sohomepage-slider .owl2-controls .owl2-nav div.owl2-prev:hover{background-color:#fe5454 !important;border:2px solid white !important;color:white !important}.module.sohomepage-slider .owl2-controls .owl2-nav div.owl2-next:hover{background-color:#fe5454 !important;border:2px solid white !important;color:white !important}.module.sohomepage-slider .owl2-controls .owl2-nav div.owl2-prev{left:10px !important;background-color:transparent !important;border:2px solid rgba(255, 255, 255, 0.5) !important;border-radius:38px !important;color:rgba(255, 255, 255, 0.5) !important}.module.sohomepage-slider .owl2-controls .owl2-nav div.owl2-next{right:10px !important;background-color:transparent !important;border:2px solid rgba(255, 255, 255, 0.5) !important;border-radius:38px !important;color:rgba(255, 255, 255, 0.5) !important}#so-slideshow .slideshow .owl2-controls .owl2-nav div.owl2-prev:before{content:"\f104" !important;font-family:fontawesome !important;position:absolute !important;top:0 !important;left:0 !important;height:100% !important;width:100% !important;font-size:32px !important;line-height:30px !important;text-align:center !important}#so-slideshow .slideshow .owl2-controls .owl2-nav div.owl2-next:before{content:"\f105" !important;font-family:fontawesome !important;position:absolute !important;top:0 !important;left:0 !important;height:100% !important;width:100% !important;font-size:32px !important;line-height:30px !important;text-align:center !important}@media (min-width:1200px){/*.col-lg-offset-3.slider-container{width:100% !important;margin-right:4px}*/.sohomepage-slider .so-homeslider img{width:100%;height:433px}}.banners a{border-radius:7px;overflow:hidden}.header-bottom-left .container-megamenu.vertical #menuHeading .megamenuToogle-wrapper{background-color:#f5f5f5 !important;height:43px !important;}.container-megamenu.vertical #menuHeading .megamenuToogle-wrapper .container:before{height:44px !important}.megamenuToogle-wrapper .container{color:#4d4d4d !important}.header-bottom-left:after{color:#4d4d4d !important}.header-bottom-left #menuHeading .megamenuToogle-wrapper .container:before{background-color:#ffffff !important}.header-bottom-left .vertical ul.megamenu > li > a{color:#222 !important}.header-bottom-left .vertical ul.megamenu > li > a:Hover{color:#FFF !important}.header-bottom-left .vertical ul.megamenu > li.with-sub-menu > a:after{color:#222 !important}.header-bottom-left .vertical ul.megamenu > li.loadmore span.more-view{color:#222 !important}.header-bottom-left .vertical ul.megamenu > li.loadmore{color:#222 !important;border-top:1px solid #ddd}.header-bottom-left ul.megamenu{background-color:white;border:1px solid #ddd;z-index:100 !important}.header-bottom-left .vertical ul.megamenu > li{background-color:white !important}.container-megamenu.vertical .vertical-wrapper ul.megamenu > li.active > a,.container-megamenu.vertical .vertical-wrapper ul.megamenu > li:hover > a{background:#F2112B !important}@media only screen and (max-width:767px){.responsive.so-megamenu .navbar-default ul.megamenu > li{border-bottom:1px solid #ddd !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.click::before,.responsive.so-megamenu .navbar-default ul.megamenu > li.hover::before{background:#fe5621 !important;border-radius:3px !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.active .close-menu:before{color:#000 !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.active > a{color:#000 !important;background:#ddd !important}.responsive.so-megamenu .navbar-default .vertical-wrapper ul.megamenu > li.active > a{background:#ddd !important}.responsive.so-megamenu .navbar-default .vertical-wrapper{background-color:white !important}.header-bottom-left .vertical-wrapper ul li > a strong{color:#000 !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.active > a{background-color:#f6f6f6 !important;color:#222 !important}#sosearchpro.so-search .search{background-color:white !important}.navbar-default .vertical .navbar-toggle{border-radius:3px !important}}@media only screen and (max-width:991px) and (min-width:768px){.responsive.so-megamenu .navbar-default .vertical-wrapper{background-color:white !important}.header-bottom-left .vertical-wrapper ul li > a strong{color:#000 !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.active > a{color:#000 !important;background:#ddd !important}.responsive.so-megamenu .navbar-default .vertical-wrapper ul.megamenu > li.active > a{background:#ddd !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.click::before,.responsive.so-megamenu .navbar-default ul.megamenu > li.hover::before{background:#fe5621 !important;border-radius:3px !important}.responsive.so-megamenu .navbar-default ul.megamenu > li{border-bottom:1px solid #ddd !important}.responsive.so-megamenu .navbar-default ul.megamenu > li.active .close-menu:before{color:#000 !important}}@media (min-width:1200px){/*.layout-1.common-home .vertical .vertical-wrapper{display:none !important}*/}@import "http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300";.Maad_MainHeader_Responsive nav{display:block;margin:0 auto 21px;position:relative;background-color:#ef3e3e;font:16px Tahoma, Sans-serif}.Maad_MainHeader_Responsive nav ul{padding:0;margin:0}.Maad_MainHeader_Responsive nav li{position:relative;float:right;list-style-type:none}.Maad_MainHeader_Responsive nav ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}.Maad_MainHeader_Responsive nav li a{display:block;padding:5px 9px;color:#eee;text-decoration:none}.showRepMenu{width:30px;height:30px;background:url(../../../images/title_Fixedmenu.png) no-repeat;background-size:80%;background-position:center}.CloseRepMenu{width:30px;height:30px;background:url(../../../images/title_Fixedmenu_Show.png) no-repeat !important;background-size:80%;background-position:center}.Maad_MainHeader_Responsive nav > ul > li > a > img{width:60px;height:60px}.menu_RES{margin:0;padding:0;list-style:none;position:absolute;top:0px;display:none}.menu_RES,.menu_RES li,.menu_RES a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:'Open Sans', sans-serif;font-size:14px;position:relative}.menu_RES > li{background-color:#000000;position:relative;top:-20px}.menu_RES img{width:50px;height:50px}.social{background-color:#000000}.social li a{display:inline}.cssmenu_RES{position:absolute;margin:0;font-family:'Roboto Condensed';line-height:1;width:250px;top:35px;z-index:1000}.align-right{float:right}.cssmenu_RES ul{margin:0;padding:0;list-style:none;display:block}.cssmenu_RES ul li{position:relative;margin:0;padding:0}.cssmenu_RES ul li a{text-decoration:none;cursor:pointer}.cssmenu_RES > ul > li > a{color:#dddddd;text-transform:uppercase;display:block;padding:20px;border-top:1px solid #555;border-left:1px solid #555;border-right:1px solid #555;background:#ef3e3e;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1);letter-spacing:1px;font-size:16px;font-weight:300;-webkit-transition:all 0.25s ease-in;-moz-transition:all 0.25s ease-in;-ms-transition:all 0.25s ease-in;-o-transition:all 0.25s ease-in;transition:all 0.25s ease-in;position:relative}.cssmenu_RES > ul > li:first-child > a{border-top-left-radius:3px;border-top-right-radius:3px}.cssmenu_RES > ul > li:last-child > a{border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom:1px solid #000000}.cssmenu_RES > ul > li:hover > a,.cssmenu_RES > ul > li.open > a,.cssmenu_RES > ul > li.active > a{background:#666;color:#ffffff}.cssmenu_RES ul > li.has-sub > a::after{content:'';position:absolute;display:block;width:0;height:0;border-top:13px solid #de7575;border-botom:13px solid transparent;border-left:125px solid transparent;border-right:125px solid transparent;right:0;bottom:-13px;bottom:0px;z-index:1;opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.cssmenu_RES ul > li.has-sub > a::before{content:'';position:absolute;display:block;width:0;height:0;border-top:13px solid #666;border-botom:13px solid transparent;border-left:125px solid transparent;border-right:125px solid transparent;right:0;bottom:-12px;bottom:-1px;z-index:3;opacity:0;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}.cssmenu_RES ul > li.has-sub::after{content:'';display:block;position:absolute;width:0;height:0;border:7px solid transparent;border-top-color:#dddddd;z-index:2;left:20px;top:24.5px;pointer-events:none}.cssmenu_RES ul > li:hover::after,.cssmenu_RES ul > li.active::after,.cssmenu_RES ul > li.open::after{border-top-color:#ffffff}.cssmenu_RES ul > li.has-sub.open > a::after{opacity:1;bottom:-13px}.cssmenu_RES ul > li.has-sub.open > a::before{opacity:1;bottom:-12px}.cssmenu_RES ul ul{display:none}.cssmenu_RES ul ul li{border-left:1px solid #ccc;border-right:1px solid #ccc}.cssmenu_RES ul ul li a{background:#f1f1f1;display:block;position:relative;font-size:15px;padding:14px 20px;border-bottom:1px solid #dddddd;color:#777777;font-weight:300;-webkit-transition:all 0.25s ease-in;-moz-transition:all 0.25s ease-in;-ms-transition:all 0.25s ease-in;-o-transition:all 0.25s ease-in;transition:all 0.25s ease-in}.cssmenu_RES ul ul li:first-child > a{padding-top:18px}.cssmenu_RES ul ul ul li{border:0}.cssmenu_RES ul ul li:hover > a,.cssmenu_RES ul ul li.open > a,.cssmenu_RES ul ul li.active > a{background:#c7c7c7;color:#666666}.cssmenu_RES ul ul > li.has-sub > a::after{border-top:13px solid #ddd}.cssmenu_RES ul ul > li.has-sub > a::before{border-top:13px solid #c7c7c7}.cssmenu_RES ul ul ul li a{padding-left:30px}.cssmenu_RES ul ul > li.has-sub::after{top:18.5px;border-width:6px;border-top-color:#777777}.cssmenu_RES ul ul > li:hover::after,.cssmenu_RES ul ul > li.active::after,.cssmenu_RES ul ul > li.open::after{border-top-color:#666666}.cssmenu_RES img{width:40px;height:40px}.borderradius nav{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.borderradius nav ul ul{-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.boxshadow.rgba nav ul ul{background-color:rgba(0,0,0,0.8);-moz-box-shadow:2px 2px 2px rgba(0,0,0,.8);-webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8);box-shadow:2px 2px 2px rgba(0,0,0,.8)}.rgba nav ul ul li{border-left:1px solid rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.1)}.rgba nav ul ul a:hover{background-color:rgba(85,85,85,.9)}.borderradius.rgba nav ul ul li.last{border-left:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-left-radius:4px;-webkit-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.csstransforms ul a span{-moz-transform:rotate(-180deg)}.no-cssgradients nav,.no-js nav{padding-bottom:4px;border:none;background:url(../fallback/navBG.gif) repeat-x 0 0}.no-borderradius nav ul,.no-js nav ul{background:url(../fallback/navRight.gif) no-repeat 100% 0}.no-borderradius nav ul ul,.no-js nav ul ul{background:none}.no-borderradius nav li,.no-js nav li{height:44px}.no-cssgradients nav li:hover,.no-js nav li:hover{background:url(../fallback/navOverBG.gif) repeat-x 0 0}.no-borderradius nav li li,.no-js nav li li{height:auto;width:98%;left:-2px}.no-borderradius nav li:first-child,.no-js nav li:first-child{background:url(../fallback/navLeft.gif) no-repeat 0 0}.no-borderradius nav li:first-child:hover,.no-js nav li:first-child:hover{background:url(../fallback/navOverLeft.gif) no-repeat 0 0}.no-borderradius nav li li:first-child,.no-js nav li li:first-child{background:none}.no-rgba nav ul ul,.no-js nav ul ul{left:1px;padding-left:2px;background:url(../fallback/subnavBG.png) no-repeat 100% 100%}.no-rgba nav ul ul a,.no-js nav ul ul a{left:3px}.no-rgba nav ul ul a:hover{background:url(../fallback/subOverBG.png) repeat 0 0}.no-csstransforms ul a span{height:7px;width:12px;margin-top:8px;text-indent:-5000px;overflow:hidden;background:url(../fallback/indicator.png) no-repeat 0 0}.no-borderradius ul ul li.last{margin-bottom:10px}.no-cssgradients.boxshadow nav{box-shadow:none}.cssmenu_RES ul ul li li:hover > a,.cssmenu_RES ul ul li li.open > a{background-color:#e4e4e4 !important}.cssmenu_RES ul ul > li li.has-sub > a::before{border-top:13px solid #e4e4e4 !important}.cssmenu_RES ul li a{background-color:#5e5e5f}.cssmenu_RES ul ul li a{background-color:#bababa;padding-right:5px}.cssmenu_RES ul ul ul li a{background-color:#d4d4d4;padding-right:25px}.cssmenu_RES ul ul ul ul li a{background-color:#efefef;padding-right:45px}@font-face{font-family:'yekan';src:url(../bootstrap/web_Yekan.woff);src:url(../bootstrap/web_Yekan.eot?#iefix) format("embedded-opentype"), url(../bootstrap/web_Yekan.woff) format("woff"),url(../bootstrap/web_Yekan.ttf) format("truetype"), url(../bootstrap/web_Yekan.svg#BYekan) format("svg");font-weight:normal;font-style:normal}:after{font-family:'fontawesome'}:before{font-family:'fontawesome'}.rmm ul{margin:5px 0 0 0;padding:0;list-style:none;position:relative}.rmm ul:after{content:"";clear:both;display:block}.rmm ul li{float:left}.rmm ul li:hover{background:#202020}.rmm ul li:hover > ul{display:block}.rmm ul li:hover a{color:#fff}.rmm ul li a{color:#fff;display:block;text-decoration:none}.rmm ul ul{display:none;margin:0;padding:0;position:absolute;top:100%}.rmm ul ul li{float:none;position:relative}.rmm ul ul li a{color:#fff}.rmm ul ul li a:hover{background:#202020}.rmm ul ul ul{position:absolute;left:100%;top:0;width:100%}.rmm-toggled{width:30px;cursor:pointer;-moz-box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);-webkit-box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);background:#f83347;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;min-height:30px;margin:0;display:none}.rmm-closed ~ .rmm-mobile{display:none !important}.rmm-toggled-controls{width:100%}.rmm-toggled-title{float:right;font-family:yekan !important;font-size:13pt;color:#fff;font-weight:600;display:block;text-decoration:none;text-transform:uppercase;text-align:right;padding-right:6px;padding-top:5px}.rmm-toggled-title:Before{content:"\f03a"}.rmm-toggled-button{width:20%;float:left;margin-top:3px;display:block;width:32px;padding:0 !important;margin:10px 10px 0 0;border:1px solid #fff;border-radius:3px;float:right}.rmm-toggled-button span{float:left;display:block;margin:3px 6px;height:3px;background:white;width:20px}.rmm .rmm-back{display:none;font-size:12px}.rmm .rmm-back:after{display:none}.rmm .rmm-back a:after{font-family:'fontawesome';speak:none;-webkit-font-smoothing:antialiased;content:"\f0d8";position:relative;display:inline-block;top:1px;right:-2px;float:left;color:#FFF !important;font-size:15px}.rmm-mobile .rmm-back{display:block}.rmm-back{border-bottom:1px solid #de0000}.rmm-mobile{width:100%}.rmm-mobile ul{width:100%;position:inherit !important}.rmm-mobile li{width:100%}.rmm-dropdown{display:block !important}.rmm-mobile .rmm-subview{display:block !important;width:100%}.rmm-mobile .rmm-subover-hidden{display:none !important}.rmm-mobile .rmm-subover-visible{display:block}.rmm-mobile .rmm-subover-header{display:none !important;padding:0;margin:0}.rmm-mobile .rmm-submenu{position:relative;left:0px}.rmm .rmm-mobile li:hover > ul{display:none}.rmm.style{text-align:left;font-family:Yekan;float:right;margin-left:3px;margin-top:1px}.rmm.style ul{-moz-box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);-webkit-box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);box-shadow:inset 1px 1px 0 rgba(255, 255, 255, 0.2);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;text-transform:uppercase;display:inline-table;text-align:left;width:260px !important}.rmm.style ul li{text-align:right}.rmm.style ul li:hover{background:#f10b0b}.rmm.style ul ul{display:none;margin:0;background:Transparent;border-radius:0px;padding:0;position:absolute}.rmm.style ul li a{color:#fff;font-weight:600;display:block;padding:15px 35px;text-decoration:none;font-weight:600}.rmm.style ul ul li{border-top:1px solid #ea3a3c}.rmm.style ul ul li a{padding:12px 35px;color:#fff}.rmm.style ul ul li a:hover{background:#f10b0b;-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px}.rmm.style ul li > a:not(:only-child):after{font-family:'fontawesome';speak:none;-webkit-font-smoothing:antialiased;content:"\f104";position:relative;display:inline-block;top:-4px;left:1px;font-size:10px;color:#fff !important}.rmm.style ul ul li > a:not(:only-child):after{top:2px;font-size:14px;float:right;margin-right:-20px}.rmm.style .rmm-mobile li > a:not(:only-child):after{top:4px !important;font-size:14px !important;float:left;margin-right:-20px}.rmm.style .rmm-mobile li{background:#F2112B;border-radius:5px;border:1px solid #e00608}@font-face{font-family:'yekan';src:url(bootstrap/web_Yekan.woff);src:url(bootstrap/web_Yekan.eot?#iefix) format("embedded-opentype"), url(bootstrap/web_Yekan.woff) format("woff"),url(bootstrap/web_Yekan.ttf) format("truetype"), url(bootstrap/web_Yekan.svg#BYekan) format("svg");font-weight:normal;font-style:normal}.responsiveMenuClosed{display:block;border:none;text-decoration:none !important;cursor:pointer;white-space:nowrap;color:#fff !important;background-color:#5e5e5f !important;background:url(../../../images/title_Fixedmenu_Show.png) no-repeat;background-position:center;width:32px;height:32px;border-radius:50%;left:-17px;top:-17px;z-index:100;position:absolute}.Maad_menubar{margin-bottom:0px;/*background-image:url(../images/menu_4level/menubar-bg.png);*/margin-left:auto;margin-right:auto;height:44px}.Maad_menu-wrapper{width:100%;margin-right:auto;margin-left:auto;text-align:right}.Maad_nav,.Maad_nav a,.Maad_nav ul,.Maad_nav li,.Maad_nav div{margin:0;padding:0;border:none;outline:none}.Maad_nav a{text-decoration:none}.Maad_nav li{list-style:none}@media only screen and (min-width:980px) and (max-width:10000px){.Maad_nav{display:inline-block;position:relative;cursor:default;z-index:500;width:885px}.Maad_menubar_inner_2{width:1200px;margin:auto}}@media only screen and (max-width:979px){.Maad_nav{display:inline-block;position:relative;cursor:default;z-index:500;width:850px}.Maad_menubar_inner_2{width:979px;margin:auto}}@media only screen and (max-width:767px) and (min-width:461px){.Maad_nav{display:inline-block;position:relative;cursor:default;z-index:500;width:600px}.Maad_menubar_inner_2{max-width:767px;min-width:461px;margin:auto}}@media only screen and (max-width:460px){.Maad_nav{display:inline-block;position:relative;cursor:default;z-index:500;width:320px}.Maad_menubar_inner_2{width:320px;margin:auto}}.Maad_nav > li{display:block;float:right;position:static}.Maad_nav > li > a{width:auto !important;position:relative;display:block;z-index:510;height:48px;padding:0px;line-height:50px;padding-left:10px;padding-right:10px;padding-top:5px;font-family:'yekan';font-size:16px;color:#4d4d4d;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}.Maad_nav > li > span{ border-right: none; line-height: 40px;width:auto !important;position:relative;display:block;z-index:510;height:48px;line-height:50px;padding-left:10px;padding-right:10px;padding-top:0px;font-family:'yekan';font-size:16px;color:#4d4d4d;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}.Maad_nav > li > a:after{margin-right:5px;margin-top:5px;height:18px;float:left}.Maad_nav > li:hover > a{color:#ef394e}.Maad_nav > li:hover > a:after{display: none;content:' ';width:7px;height:18px}.Maad_nav > li > a{border-right:none;line-height:40px}.Maad_nav > li > div{position:absolute;display:block;width:100%;top:43px;right:0px;opacity:0;visibility:hidden;overflow:hidden;background:#ffffff;border:1px solid #e1e1e1;}.Maad_nav > li:hover > div{opacity:1;visibility:visible;overflow:visible}.Maad_nav .Maad_nav-column{float:right;padding:2.5% 2.5% 2.5% 15px;text-align:right;height:auto}.Maad_nav .Maad_nav-column .Maad_head{margin:-15px -10px 10px 0;line-height:18px;font-family:'yekan';font-size:13px;color:#16c1f3}.Maad_nav .Maad_nav-column li a{display:block;line-height:26px;font-family:'yekan';font-size:12px;color:#4d4d4d;width:95px;direction:ltr}.Maad_nav .Maad_nav-column li a:hover{color:#ef394e;}.Maad_inner{float:right;height:10px;top:-23px;right:-23px;margin-right:auto;margin-left:auto;border-top:1px solid #ddd !important}.Maad_layer2{height:44px}.Maad_inner > li > div{top:42px;min-height:200px;background:#fcfcfc}.Maad_inner > li:hover > a{height:40px;margin-top:2px;border-bottom:2px solid #ef394e;color:#ef394e}.Maad_img{position:absolute;float:left;bottom:0px;margin-bottom:0px;left:0px;max-width:300px;max-height:300px}.Maad_border{border-right:1px solid #e2e2e2 !important}.Other{position:relative}.Other:Hover{border-radius:13px 0px 0px 13px}.Other:Hover ul{visibility:visible;top:0px;right:100%;z-index:1000;background-color:rgb(246, 246, 246)}.Other:Hover ul:before{content:"\f0da" !important;color:#16c1f3;position:absolute;top:0px;right:-8px;font-size:15pt}.Other:Hover ul:Hover + Div:before{content:"\f068" !important;color:Red}.Other:Hover ul + Div:before{content:"\f068" !important;color:Red}.Other:Hover ul:Hover + span:hover{color:red}.Other ul{visibility:hidden;background-color:white;position:absolute;border-top:2px solid #16c1f3;border-bottom:2px solid #16c1f3;border-right:2px solid #16c1f3;border-left:2px solid #16c1f3;border-radius:13px 0px 13px 13px;padding:10px;direction:rtl;-webkit-column-count:2;-moz-column-count:2;column-count:2}.Other ul li{width:100px}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-fw{width:1.28571429em;text-align:center}.fa-3x{font-size:8pt}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.fa-spinner:before{content:"\f067"}.fa-spin{-webkit-animation:none !important;animation:none !important}.Other Div{width:15px;float:right;margin-top:8px;margin-left:5px;color:#4d4d4d !important;display:inline-block}.afterMore:Before{content:"\f0da";font:normal normal normal 25px/1 FontAwesome;position:absolute;top:1px;right:-10px;color:Red} /*#content{ background-image:url('https://kalaview.com/catalog/view/theme/so-maxshop/images/fasl_img/SpringBack.png'); } */ /******************************* n-header *******************************/ .Maad_inner > li:hover > a::before { content: ' '; position: absolute; bottom: 0; right: calc(50% - 6px); width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #ef394e; } .Maad_menubar > div > ul > li{ height: 43px; } .Maad_menubar > div > ul > li:hover{ background: #fff; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } .Maad_menubar > div > ul > li:hover span{ color: #ef394e; } .Maad_menubar > div > ul > li:hover span::before{ webkit-transform: rotate(45deg) translate(0,0); -ms-transform: rotate(45deg) translate(0,0); transform: rotate(45deg) translate(0,0); } .Maad_nav > li > span::before{ float: left; content: ''; display: block; margin-top: 11px; width: 7px; height: 7px; margin-top: 22px; margin-right: 7px; border-top: 2px solid; border-left: 2px solid; -webkit-transform: rotate(-45deg) translate(50%,-50%); -ms-transform: rotate(-45deg) translate(50%,-50%); transform: rotate(-135deg) translate(50%,50%); opacity: .6; } #search_top{ z-index: 1001; width: 100%; height: 48px; float: right; position: relative; } #search_top > input[name="search"]{ outline: none; color: #474747; width: 100%; height: 40px; border: 1px solid #eee; padding-right: 40px; background-color: #f0f0f1; } #search_top > span{ width: 42px; position: absolute; top: 7px; right: 0px; font-size: 21px; text-align: center; color: #aaa; } .n-m-nav-d{ width: 100%; } .n-m-nav-d > img{ width: 130px; margin: 15px auto; display: block; } .n-m-nav-d > ul{ margin-top: 10px; } #n-m-o-u-l{ flex: 1; } .n-m-s-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .mm-spn li.li-dontchild:before { display: none !important; } .n-m-s-modal-content { background-color: #fefefe; width: 100%; height: 100%; } .n-m-s-close { font-size: 30px; float: left; margin: 5px; } .n-m-s-close:hover, .n-m-s-close:focus { color: #000; text-decoration: none; cursor: pointer; } .n-m-b > span, .n-m-b-b > span, .n-m-b-b-b > span, .n-m-b-b-b-b > span{ color: #ef394e; } .n-m-b::before, .n-m-b-b::before, .n-m-b-b-b::before, .n-m-b-b-b-b::before{ color: #ef394e; transform: rotate(45deg) translate(0, 0) !important; } .n-m-b > ul{ background: #eee !important; border-top-right-radius: 30px; } .n-m-b-b > ul{ background: #d5d5d5 !important; border-top-right-radius: 30px; } .n-m-b-b-b > ul{ background: #ddd !important; border-top-right-radius: 30px; } .n-m-b-b-b-b > ul{ background: #c8c8c8 !important; border-top-right-radius: 30px; } .n-m-b-b-b-b-b > ul{ background: #c8c8c8 !important; border-top-right-radius: 30px; } .n-logo{ position: static !important; } .n-header-right{ position: static !important; } .n-m-header{ float: right; width: 50px; height: 40px; line-height: 40px; text-align: center; position: absolute; right: 0; } .n-m-header a { display: block; padding: 11px; } .n-m-header a:before, .n-m-header a:after { content: ''; display: block; background: #000; height: 2px; } .n-m-header a span { background: #000; display: block; height: 2px; margin: 6px 0; } /******************************* n-header *******************************/ /******************************* Dropdown *******************************/ #sosearchpro.so-search .search{} .ui.dropdown { cursor: pointer; position: relative; display: inline-block; outline: none; text-align: left; -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /******************************* Content *******************************/ /*-------------- Menu ---------------*/ .ui.dropdown { padding: 0px !important; height: 30px !important; width: 100%; border-radius: 0; background-color: #f83347 !important; direction: rtl; text-align: center; z-index: 1001; } .ui.dropdown .menu { cursor: auto; position: absolute; display: none; outline: none; top: 100%; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; margin: 0em; padding: 0em 0em; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; z-index: 11; will-change: transform, opacity; } .ui.dropdown .menu > * { white-space: nowrap; } /*-------------- Hidden Input ---------------*/ .ui.dropdown > input:not(.search):first-child, .ui.dropdown > select { display: none !important; } /*-------------- Dropdown Icon ---------------*/ .ui.dropdown > .dropdown.icon { position: relative; width: auto; font-size: 0.85714286em; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon { width: auto; float: right; margin: 0em 0em 0em 1em; } .ui.dropdown .menu > .item .dropdown.icon + .text { margin-right: 1em; } /*-------------- Text ---------------*/ .ui.dropdown > .text { display: inline-block; -webkit-transition: none; transition: none; margin-top:5px; } /*-------------- Menu Item ---------------*/ .ui.dropdown .menu > .item { position: relative; cursor: pointer; display: block; border: none; height: auto; text-align: right; border-top: none; line-height: 1em; color: rgba(0, 0, 0, 0.87); padding: 0.78571429rem 1.14285714rem !important; font-size: 10pt; text-transform: none; font-weight: normal; -webkit-box-shadow: none; box-shadow: none; -webkit-touch-callout: none; } } .ui.dropdown .menu > .item:first-child { border-top-width: 0px; } /*-------------- Floated Content ---------------*/ .ui.dropdown > .text > [class*="right floated"], .ui.dropdown .menu .item > [class*="right floated"] { float: right !important; margin-right: 0em !important; margin-left: 1em !important; } .ui.dropdown > .text > [class*="left floated"], .ui.dropdown .menu .item > [class*="left floated"] { float: left !important; margin-left: 0em !important; margin-right: 1em !important; } .ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated { margin-top: 0em; } /*-------------- Menu Divider ---------------*/ .ui.dropdown .menu > .header { margin: 1rem 0rem 0.75rem; padding: 0em 1.14285714rem; color: rgba(0, 0, 0, 0.85); font-size: 0.78571429em; font-weight: bold; text-transform: uppercase; } .ui.dropdown .menu > .divider { border-top: 1px solid rgba(34, 36, 38, 0.1); height: 0em; margin: 0.5em 0em; } .ui.dropdown.dropdown .menu > .input { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 1.14285714rem 0.78571429rem; min-width: 10rem; } .ui.dropdown .menu > .header + .input { margin-top: 0em; } .ui.dropdown .menu > .input:not(.transparent) input { padding: 0.5em 1em; } .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label { padding-top: 0.5em; padding-bottom: 0.5em; } /*----------------- Item Description -------------------*/ .ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description { float: right; margin: 0em 0em 0em 1em; color: rgba(0, 0, 0, 0.4); } /*----------------- Message -------------------*/ .ui.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; font-weight: normal; } .ui.dropdown .menu > .message:not(.ui) { color: rgba(0, 0, 0, 0.4); } /*-------------- Sub Menu ---------------*/ .ui.dropdown .menu .menu { top: 0% !important; left: 100%; right: auto; margin: 0em 0em 0em -0.5em !important; border-radius: 0.28571429rem !important; z-index: 21 !important; } /* Hide Arrow */ .ui.dropdown .menu .menu:after { display: none; } /*-------------- Sub Elements ---------------*/ /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image { margin-top: 0em; } .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-top: 0em; } .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { margin-left: 0em; float: none; margin-right: 0.78571429rem; } /*-------------- Image ---------------*/ .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img { display: inline-block; vertical-align: top; width: auto; margin-top: -0.5em; margin-bottom: -0.5em; max-height: 2em; } /******************************* Coupling *******************************/ /*-------------- Menu ---------------*/ /* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before { display: none; } /* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item { border-left: none; } /* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.menu .right.dropdown.item .menu, .ui.buttons > .ui.dropdown:last-child .menu { left: auto; right: 0em; } /*-------------- Label ---------------*/ /* Dropdown Menu */ .ui.label.dropdown .menu { min-width: 100%; } /*-------------- Button ---------------*/ /* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon { margin: 0em; } .ui.button.dropdown .menu { min-width: 100%; } /******************************* Types *******************************/ /*-------------- Selection ---------------*/ /* Displays like a select box */ .ui.selection.dropdown { cursor: pointer; word-wrap: break-word; line-height: 1em; white-space: normal; outline: 0; -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); min-width: 14em; min-height: 2.71428571em; background: #FFFFFF; display: inline-block; padding: 0.78571429em 2.1em 0.78571429em 1em; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: none; box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem; -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; transition: width 0.1s ease, -webkit-box-shadow 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease; transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease; } .ui.selection.dropdown.visible, .ui.selection.dropdown.active { z-index: 10; } select.ui.dropdown { height: 38px; padding: 0.5em; border: 1px solid rgba(34, 36, 38, 0.15); visibility: visible; } .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon { cursor: pointer; position: absolute; width: auto; height: auto; line-height: 1.21428571em; top: 0.78571429em; right: 1em; z-index: 3; margin: -0.78571429em; padding: 0.91666667em; opacity: 0.8; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } /* Compact */ .ui.compact.selection.dropdown { min-width: 0px; } /* Selection Menu */ .ui.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; border-top-width: 0px !important; width: auto; outline: none; margin: 0px -1px; min-width: calc(100% + 2px ); width: calc(100% + 2px ); border-radius: 0em 0em 0.28571429rem 0.28571429rem; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before { display: none; } /*-------------- Message ---------------*/ .ui.selection.dropdown .menu > .message { padding: 0.78571429rem 1.14285714rem; } @media only screen and (max-width: 767px) { .ui.selection.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.selection.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.selection.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.selection.dropdown .menu { max-height: 21.37142857rem; } } /* Menu Item */ .ui.selection.dropdown .menu > .item { border-top: 1px solid #FAFAFA; padding: 0.78571429rem 1.14285714rem !important; white-space: normal; word-wrap: normal; } /* User Item */ .ui.selection.dropdown .menu > .hidden.addition.item { display: none; } /* Hover */ .ui.selection.dropdown:hover { border-color: rgba(34, 36, 38, 0.35); -webkit-box-shadow: none; box-shadow: none; } /* Active */ .ui.selection.active.dropdown { border-color: #96C8DA; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown .menu { border-color: #96C8DA; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Focus */ .ui.selection.dropdown:focus { border-color: #96C8DA; -webkit-box-shadow: none; box-shadow: none; } .ui.selection.dropdown:focus .menu { border-color: #96C8DA; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Visible */ .ui.selection.visible.dropdown > .text:not(.default) { font-weight: normal; color: rgba(0, 0, 0, 0.8); } /* Visible Hover */ .ui.selection.active.dropdown:hover { border-color: #96C8DA; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } .ui.selection.active.dropdown:hover .menu { border-color: #96C8DA; -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15); } /* Dropdown Icon */ .ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon { opacity: 1; z-index: 3; } /* Connecting Border */ .ui.active.selection.dropdown { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } /* Empty Connecting Border */ .ui.active.empty.selection.dropdown { border-radius: 0.28571429rem !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .ui.active.empty.selection.dropdown .menu { border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } /*-------------- Searchable ---------------*/ /* Search Selection */ .ui.search.dropdown { min-width: ''; } /* Search Dropdown */ .ui.search.dropdown > input.search { background: none transparent !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; cursor: text; top: 0em; left: 1px; width: 100%; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; } /* Text Layering */ .ui.search.dropdown > input.search { position: absolute; z-index: 2; } .ui.search.dropdown > .text { cursor: text; position: relative; left: 1px; z-index: 3; } /* Search Selection */ .ui.search.selection.dropdown > input.search { line-height: 1.21428571em; padding: 0.67857143em 2.1em 0.67857143em 1em; } /* Used to size multi select input to character width */ .ui.search.selection.dropdown > span.sizer { line-height: 1.21428571em; padding: 0.67857143em 2.1em 0.67857143em 1em; display: none; white-space: pre; } /* Active/Visible Search */ .ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search { cursor: auto; } .ui.search.dropdown.active > .text, .ui.search.dropdown.visible > .text { pointer-events: none; } /* Filtered Text */ .ui.active.search.dropdown input.search:focus + .text .icon, .ui.active.search.dropdown input.search:focus + .text .flag { opacity: 0.45; } .ui.active.search.dropdown input.search:focus + .text { color: rgba(115, 115, 115, 0.87) !important; } /* Search Menu */ .ui.search.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { .ui.search.dropdown .menu { max-height: 8.01428571rem; } } @media only screen and (min-width: 768px) { .ui.search.dropdown .menu { max-height: 10.68571429rem; } } @media only screen and (min-width: 992px) { .ui.search.dropdown .menu { max-height: 16.02857143rem; } } @media only screen and (min-width: 1920px) { .ui.search.dropdown .menu { max-height: 21.37142857rem; } } /*-------------- Multiple ---------------*/ /* Multiple Selection */ .ui.multiple.dropdown { padding: 0.22619048em 2.1em 0.22619048em 0.35714286em; } .ui.multiple.dropdown .menu { cursor: auto; } /* Multiple Search Selection */ .ui.multiple.search.dropdown, .ui.multiple.search.dropdown > input.search { cursor: text; } /* Selection Label */ .ui.multiple.dropdown > .label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; vertical-align: top; white-space: normal; font-size: 1em; padding: 0.35714286em 0.78571429em; margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em; -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; } /* Dropdown Icon */ .ui.multiple.dropdown .dropdown.icon { margin: ''; padding: ''; } /* Text */ .ui.multiple.dropdown > .text { position: static; padding: 0; max-width: 100%; margin: 0.45238095em 0em 0.45238095em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.dropdown > .label ~ input.search { margin-left: 0.14285714em !important; } .ui.multiple.dropdown > .label ~ .text { display: none; } /*----------------- Multiple Search -----------------*/ /* Prompt Text */ .ui.multiple.search.dropdown > .text { display: inline-block; position: absolute; top: 0; left: 0; padding: inherit; margin: 0.45238095em 0em 0.45238095em 0.64285714em; line-height: 1.21428571em; } .ui.multiple.search.dropdown > .label ~ .text { display: none; } /* Search */ .ui.multiple.search.dropdown > input.search { position: static; padding: 0; max-width: 100%; margin: 0.45238095em 0em 0.45238095em 0.64285714em; width: 2.2em; line-height: 1.21428571em; } /*-------------- Inline ---------------*/ .ui.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon { margin: 0em 0.5em 0em 0.21428571em; vertical-align: baseline; } .ui.inline.dropdown > .text { font-weight: bold; } .ui.inline.dropdown .menu { cursor: auto; margin-top: 0.21428571em; border-radius: 0.28571429rem; } /******************************* States *******************************/ /*-------------------- Active ----------------------*/ /* Menu Item Active */ .ui.dropdown .menu .active.item { background: transparent; font-weight: bold; color: rgba(0, 0, 0, 0.95); -webkit-box-shadow: none; box-shadow: none; z-index: 12; } /*-------------------- Hover ----------------------*/ /* Menu Item Hover */ .ui.dropdown .menu > .item:hover { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.95); z-index: 13; } /*-------------------- Loading ---------------------*/ .ui.loading.dropdown > i.icon { height: 1em !important; } .ui.loading.selection.dropdown > i.icon { padding: 1.5em 1.28571429em !important; } .ui.loading.dropdown > i.icon:before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.dropdown > i.icon:after { position: absolute; content: ''; top: 50%; left: 50%; -webkit-box-shadow: 0px 0px 0px 1px transparent; box-shadow: 0px 0px 0px 1px transparent; margin: -0.64285714em 0em 0em -0.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: dropdown-spin 0.6s linear; animation: dropdown-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 500rem; border-color: #767676 transparent transparent; border-style: solid; border-width: 0.2em; } /* Coupling */ .ui.loading.dropdown.button > i.icon:before, .ui.loading.dropdown.button > i.icon:after { display: none; } @-webkit-keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes dropdown-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------- Default Text ----------------------*/ .ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text { color: rgba(191, 191, 191, 0.87); } .ui.dropdown:not(.button) > input:focus ~ .default.text, .ui.default.dropdown:not(.button) > input:focus ~ .text { color: rgba(115, 115, 115, 0.87); } /*-------------------- Loading ----------------------*/ .ui.loading.dropdown > .text { -webkit-transition: none; transition: none; } /* Used To Check Position */ .ui.dropdown .loading.menu { display: block; visibility: hidden; z-index: -1; } .ui.dropdown > .loading.menu { left: 0px !important; right: auto !important; } .ui.dropdown > .menu .loading.menu { left: 100% !important; right: auto !important; } /*-------------------- Keyboard Select ----------------------*/ /* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.95); } /*-------------------- Search Filtered ----------------------*/ /* Filtered Item */ .ui.dropdown > .filtered.text { visibility: hidden; } .ui.dropdown .filtered.item { display: none !important; } /*-------------------- Error ----------------------*/ .ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text { color: #9F3A38; } .ui.selection.dropdown.error { background: #FFF6F6; border-color: #E0B4B4; } .ui.selection.dropdown.error:hover { border-color: #E0B4B4; } .ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu { border-color: #E0B4B4; } .ui.dropdown.error > .menu > .item { color: #9F3A38; } .ui.multiple.selection.error.dropdown > .label { border-color: #E0B4B4; } /* Item Hover */ .ui.dropdown.error > .menu > .item:hover { background-color: #FFF2F2; } /* Item Active */ .ui.dropdown.error > .menu .active.item { background-color: #FDCFCF; } /*-------------------- Disabled ----------------------*/ /* Disabled */ .ui.disabled.dropdown, .ui.dropdown .menu > .disabled.item { cursor: default; pointer-events: none; opacity: 0.45; } /******************************* Variations *******************************/ /*-------------- Direction ---------------*/ /* Flyout Direction */ .ui.dropdown .menu { left: 0px; } /* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu { left: 100% !important; right: auto !important; border-radius: 0.28571429rem !important; } /* Leftward Opening Menu */ .ui.dropdown > .left.menu { left: auto !important; right: 0px !important; } .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu { left: auto; right: 100%; margin: 0em -0.5em 0em 0em !important; border-radius: 0.28571429rem !important; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon { width: auto; float: left; margin: 0em 0em 0em 0em; } .ui.dropdown .item .left.dropdown.icon + .text, .ui.dropdown .left.menu .item .dropdown.icon + .text { margin-left: 1em; margin-right: 0em; } /*-------------- Upward ---------------*/ /* Upward Main Menu */ .ui.upward.dropdown > .menu { top: auto; bottom: 100%; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Upward Sub Menu */ .ui.dropdown .upward.menu { top: auto !important; bottom: 0 !important; } /* Active Upward */ .ui.simple.upward.active.dropdown, .ui.simple.upward.dropdown:hover { border-radius: 0.28571429rem 0.28571429rem 0em 0em !important; } .ui.upward.dropdown.button:not(.pointing):not(.floating).active { border-radius: 0.28571429rem 0.28571429rem 0em 0em; } /* Selection */ .ui.upward.selection.dropdown .menu { border-top-width: 1px !important; border-bottom-width: 0px !important; -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } .ui.upward.selection.dropdown:hover { -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); } /* Active Upward */ .ui.active.upward.selection.dropdown { border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Upward */ .ui.upward.selection.dropdown.visible { -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); border-radius: 0em 0em 0.28571429rem 0.28571429rem !important; } /* Visible Hover Upward */ .ui.upward.active.selection.dropdown:hover { -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); } .ui.upward.active.selection.dropdown:hover .menu { -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); } /*-------------- Simple ---------------*/ /* Selection Menu */ .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { overflow-x: hidden; overflow-y: auto; } .ui.scrolling.dropdown .menu { overflow-x: hidden; overflow-y: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-overflow-scrolling: touch; min-width: 100% !important; width: auto !important; } .ui.dropdown .scrolling.menu { position: static; overflow-y: auto; border: none; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; min-width: 100% !important; width: auto !important; border-top: 1px solid rgba(34, 36, 38, 0.15); } .ui.scrolling.dropdown .menu .item.item.item, .ui.dropdown .scrolling.menu > .item.item.item { border-top: none; } .ui.scrolling.dropdown .menu .item:first-child, .ui.dropdown .scrolling.menu .item:first-child { border-top: none; } .ui.dropdown > .animating.menu .scrolling.menu, .ui.dropdown > .visible.menu .scrolling.menu { display: block; } /* Scrollbar in IE */ @media all and (-ms-high-contrast: none) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { min-width: calc(100% - 17px ); } } @media only screen and (max-width: 767px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 10.28571429rem; } } @media only screen and (min-width: 768px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 15.42857143rem; } } @media only screen and (min-width: 992px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } } @media only screen and (min-width: 1920px) { .ui.scrolling.dropdown .menu, .ui.dropdown .scrolling.menu { max-height: 20.57142857rem; } } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after { display: none; } .ui.simple.dropdown .menu { position: absolute; display: block; overflow: hidden; top: -9999px !important; opacity: 0; width: 0; height: 0; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; } .ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0em !important; border-bottom-right-radius: 0em !important; } .ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu { overflow: visible; width: auto; height: auto; top: 100% !important; opacity: 1; } .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown:hover > .menu > .item:hover > .menu { overflow: visible; width: auto; height: auto; top: 0% !important; left: 100% !important; opacity: 1; } .ui.simple.disabled.dropdown:hover .menu { display: none; height: 0px; width: 0px; overflow: hidden; } /* Visible */ .ui.simple.visible.dropdown > .menu { display: block; } /*-------------- Fluid ---------------*/ .ui.fluid.dropdown { display: block; width: 100%; min-width: 0em; } .ui.fluid.dropdown > .dropdown.icon { float: right; } /*-------------- Floating ---------------*/ .ui.floating.dropdown .menu { left: 0; right: auto; -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important; border-radius: 0.28571429rem !important; z-index:1000; } .ui.floating.dropdown > .menu { margin-top: 0.5em !important; border-radius: 0.28571429rem !important; z-index : 1000 !important; } /*-------------- Pointing ---------------*/ .ui.pointing.dropdown > .menu { top: 100%; margin-top: 0.78571429rem; border-radius: 0.28571429rem; } .ui.pointing.dropdown > .menu:after { display: block; position: absolute; pointer-events: none; content: ''; visibility: visible; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 0.5em; height: 0.5em; -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); background: #FFFFFF; z-index: 2; } .ui.pointing.dropdown > .menu:after { top: -0.25em; left: 50%; margin: 0em 0em 0em -0.25em; } /* Top Left Pointing */ .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu { top: 100%; bottom: auto; left: 0%; right: auto; margin: 1em 0em 0em; } .ui.top.left.pointing.dropdown > .menu:after { top: -0.25em; left: 1em; right: auto; margin: 0em; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu { top: 100%; bottom: auto; right: 0%; left: auto; margin: 1em 0em 0em; } .ui.top.pointing.dropdown > .left.menu:after, .ui.top.right.pointing.dropdown > .menu:after { top: -0.25em; left: auto !important; right: 1em !important; margin: 0em; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* Left Pointing */ .ui.left.pointing.dropdown > .menu { top: 0%; left: 100%; right: auto; margin: 0em 0em 0em 1em; } .ui.left.pointing.dropdown > .menu:after { top: 1em; left: -0.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { left: auto !important; right: 100% !important; margin: 0em 1em 0em 0em; } .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { top: 1em; left: auto; right: -0.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } /* Right Pointing */ .ui.right.pointing.dropdown > .menu { top: 0%; left: auto; right: 100%; margin: 0em 1em 0em 0em; } .ui.right.pointing.dropdown > .menu:after { top: 1em; left: auto; right: -0.25em; margin: 0em 0em 0em 0em; -webkit-transform: rotate(135deg); transform: rotate(135deg); } /* Bottom Pointing */ .ui.bottom.pointing.dropdown > .menu { top: auto; bottom: 100%; left: 0%; right: auto; margin: 0em 0em 1em; } .ui.bottom.pointing.dropdown > .menu:after { top: auto; bottom: -0.25em; right: auto; margin: 0em; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } /* Reverse Sub-Menu Direction */ .ui.bottom.pointing.dropdown > .menu .menu { top: auto !important; bottom: 0px !important; } /* Bottom Left */ .ui.bottom.left.pointing.dropdown > .menu { left: 0%; right: auto; } .ui.bottom.left.pointing.dropdown > .menu:after { left: 1em; right: auto; } /* Bottom Right */ .ui.bottom.right.pointing.dropdown > .menu { right: 0%; left: auto; } .ui.bottom.right.pointing.dropdown > .menu:after { left: auto; right: 1em; } /* Upward pointing */ .ui.pointing.upward.dropdown .menu, .ui.top.pointing.upward.dropdown .menu { top: auto !important; bottom: 100% !important; margin: 0em 0em 0.78571429rem; border-radius: 0.28571429rem; } .ui.pointing.upward.dropdown .menu:after, .ui.top.pointing.upward.dropdown .menu:after { top: 100% !important; bottom: auto !important; -webkit-box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15); margin: -0.25em 0em 0em; } /* Right Pointing Upward */ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 1em 0em 0em; } .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /* Left Pointing Upward */ .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { top: auto !important; bottom: 0 !important; margin: 0em 0em 0em 1em; } .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { top: auto !important; bottom: 0 !important; margin: 0em 0em 1em 0em; -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15); } /******************************* Theme Overrides *******************************/ /* Dropdown Carets */ @font-face { font-family: 'Dropdown'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); font-weight: normal; font-style: normal; } .ui.dropdown > .dropdown.icon { font-family: 'Dropdown'; line-height: 1; height: 1em; width: 1.23em; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-weight: normal; font-style: normal; text-align: center; } .ui.dropdown > .dropdown.icon { width: auto; } .ui.dropdown > .dropdown.icon:before { content: '\f0d7'; } /* Sub Menu */ .ui.dropdown .menu .item .dropdown.icon:before { content: '\f0da' /*rtl:'\f0d9'*/; } .ui.dropdown .item .left.dropdown.icon:before, .ui.dropdown .left.menu .item .dropdown.icon:before { content: "\f0d9" /*rtl:"\f0da"*/; } /* Vertical Menu Dropdown */ .ui.vertical.menu .dropdown.item > .dropdown.icon:before { content: "\f0da" /*rtl:"\f0d9"*/; } /* Icons for Reference .dropdown.down.icon { content: "\f0d7"; } .dropdown.up.icon { content: "\f0d8"; } .dropdown.left.icon { content: "\f0d9"; } .dropdown.icon.icon { content: "\f0da"; } */ /******************************* User Overrides *******************************/ /*! * # Semantic UI 2.3.1 - Transition * http://github.com/semantic-org/semantic-ui/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Transitions *******************************/ .transition { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /******************************* States *******************************/ /* Animating */ .animating.transition { -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; } /* Loading */ .loading.transition { position: absolute; top: -99999px; left: -99999px; } /* Hidden */ .hidden.transition { display: none; visibility: hidden; } /* Visible */ .visible.transition { display: block !important; visibility: visible !important; /* backface-visibility: @backfaceVisibility; transform: @use3DAcceleration;*/ } /* Disabled */ .disabled.transition { -webkit-animation-play-state: paused; animation-play-state: paused; } /******************************* Variations *******************************/ .looping.transition { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /******************************* Transitions *******************************/ /* Some transitions adapted from Animate CSS https://github.com/daneden/animate.css Additional transitions adapted from Glide by Nick Pettit - https://github.com/nickpettit/glide */ /*-------------- Browse ---------------*/ .transition.browse { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .transition.browse.in { -webkit-animation-name: browseIn; animation-name: browseIn; } .transition.browse.out, .transition.browse.left.out { -webkit-animation-name: browseOutLeft; animation-name: browseOutLeft; } .transition.browse.right.out { -webkit-animation-name: browseOutRight; animation-name: browseOutRight; } /* In */ @-webkit-keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } @keyframes browseIn { 0% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; } 10% { -webkit-transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px); z-index: -1; opacity: 0.7; } 80% { -webkit-transform: scale(1.05) translateZ(0px); transform: scale(1.05) translateZ(0px); opacity: 1; z-index: 999; } 100% { -webkit-transform: scale(1) translateZ(0px); transform: scale(1) translateZ(0px); z-index: 999; } } /* Out */ @-webkit-keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutLeft { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: -1; -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: -1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @-webkit-keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } @keyframes browseOutRight { 0% { z-index: 999; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg); } 50% { z-index: 1; -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); } 80% { opacity: 1; } 100% { z-index: 1; -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); opacity: 0; } } /*-------------- Drop ---------------*/ .drop.transition { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-duration: 400ms; animation-duration: 400ms; -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } .drop.transition.in { -webkit-animation-name: dropIn; animation-name: dropIn; } .drop.transition.out { -webkit-animation-name: dropOut; animation-name: dropOut; } /* Drop */ @-webkit-keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes dropIn { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes dropOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } /*-------------- Fade ---------------*/ .transition.fade.in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .transition[class*="fade up"].in { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .transition[class*="fade down"].in { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .transition[class*="fade left"].in { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } .transition[class*="fade right"].in { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .transition.fade.out { -webkit-animation-name: fadeOut; animation-name: fadeOut; } .transition[class*="fade up"].out { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } .transition[class*="fade down"].out { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } .transition[class*="fade left"].out { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .transition[class*="fade right"].out { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /* In */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-10%); transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(-10%); transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } /* Out */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(5%); transform: translateY(5%); } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 0; -webkit-transform: translateY(-5%); transform: translateY(-5%); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(5%); transform: translateX(5%); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { opacity: 0; -webkit-transform: translateX(-5%); transform: translateX(-5%); } } /*-------------- Flips ---------------*/ .flip.transition.in, .flip.transition.out { -webkit-animation-duration: 600ms; animation-duration: 600ms; } .horizontal.flip.transition.in { -webkit-animation-name: horizontalFlipIn; animation-name: horizontalFlipIn; } .horizontal.flip.transition.out { -webkit-animation-name: horizontalFlipOut; animation-name: horizontalFlipOut; } .vertical.flip.transition.in { -webkit-animation-name: verticalFlipIn; animation-name: verticalFlipIn; } .vertical.flip.transition.out { -webkit-animation-name: verticalFlipOut; animation-name: verticalFlipOut; } /* In */ @-webkit-keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @keyframes horizontalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateY(-90deg); transform: perspective(2000px) rotateY(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } @keyframes verticalFlipIn { 0% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } 100% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } } /* Out */ @-webkit-keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @keyframes horizontalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateY(0deg); transform: perspective(2000px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateY(90deg); transform: perspective(2000px) rotateY(90deg); opacity: 0; } } @-webkit-keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } @keyframes verticalFlipOut { 0% { -webkit-transform: perspective(2000px) rotateX(0deg); transform: perspective(2000px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(2000px) rotateX(-90deg); transform: perspective(2000px) rotateX(-90deg); opacity: 0; } } /*-------------- Scale ---------------*/ .scale.transition.in { -webkit-animation-name: scaleIn; animation-name: scaleIn; } .scale.transition.out { -webkit-animation-name: scaleOut; animation-name: scaleOut; } @-webkit-keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /* Out */ @-webkit-keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scaleOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } } /*-------------- Fly ---------------*/ /* Inward */ .transition.fly { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .transition.fly.in { -webkit-animation-name: flyIn; animation-name: flyIn; } .transition[class*="fly up"].in { -webkit-animation-name: flyInUp; animation-name: flyInUp; } .transition[class*="fly down"].in { -webkit-animation-name: flyInDown; animation-name: flyInDown; } .transition[class*="fly left"].in { -webkit-animation-name: flyInLeft; animation-name: flyInLeft; } .transition[class*="fly right"].in { -webkit-animation-name: flyInRight; animation-name: flyInRight; } /* Outward */ .transition.fly.out { -webkit-animation-name: flyOut; animation-name: flyOut; } .transition[class*="fly up"].out { -webkit-animation-name: flyOutUp; animation-name: flyOutUp; } .transition[class*="fly down"].out { -webkit-animation-name: flyOutDown; animation-name: flyOutDown; } .transition[class*="fly left"].out { -webkit-animation-name: flyOutLeft; animation-name: flyOutLeft; } .transition[class*="fly right"].out { -webkit-animation-name: flyOutRight; animation-name: flyOutRight; } /* In */ @-webkit-keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes flyIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 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); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 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); } 100% { -webkit-transform: none; transform: none; } } @-webkit-keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 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); } 100% { -webkit-transform: none; transform: none; } } @keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 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); } 100% { -webkit-transform: none; transform: none; } } /* Out */ @-webkit-keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes flyOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes flyOutUp { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes flyOutUp { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes flyOutDown { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes flyOutDown { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes flyOutRight { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes flyOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } /*-------------- Slide ---------------*/ .transition.slide.in, .transition[class*="slide down"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].in { -webkit-animation-name: slideInY; animation-name: slideInY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].in { -webkit-animation-name: slideInX; animation-name: slideInX; -webkit-transform-origin: center left; transform-origin: center left; } .transition.slide.out, .transition[class*="slide down"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="slide up"].out { -webkit-animation-name: slideOutY; animation-name: slideOutY; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="slide left"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="slide right"].out { -webkit-animation-name: slideOutX; animation-name: slideOutX; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes slideInY { 0% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes slideInX { 0% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } /* Out */ @-webkit-keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @keyframes slideOutY { 0% { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes slideOutX { 0% { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } } /*-------------- Swing ---------------*/ .transition.swing { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .transition[class*="swing down"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].in { -webkit-animation-name: swingInX; animation-name: swingInX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].in { -webkit-animation-name: swingInY; animation-name: swingInY; -webkit-transform-origin: center left; transform-origin: center left; } .transition.swing.out, .transition[class*="swing down"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: top center; transform-origin: top center; } .transition[class*="swing up"].out { -webkit-animation-name: swingOutX; animation-name: swingOutX; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .transition[class*="swing left"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center right; transform-origin: center right; } .transition[class*="swing right"].out { -webkit-animation-name: swingOutY; animation-name: swingOutY; -webkit-transform-origin: center left; transform-origin: center left; } /* In */ @-webkit-keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @keyframes swingInX { 0% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateX(15deg); transform: perspective(1000px) rotateX(15deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } } @-webkit-keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } @keyframes swingInY { 0% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 60% { -webkit-transform: perspective(1000px) rotateY(-17.5deg); transform: perspective(1000px) rotateY(-17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 100% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } } /* Out */ @-webkit-keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @keyframes swingOutX { 0% { -webkit-transform: perspective(1000px) rotateX(0deg); transform: perspective(1000px) rotateX(0deg); } 40% { -webkit-transform: perspective(1000px) rotateX(-7.5deg); transform: perspective(1000px) rotateX(-7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateX(17.5deg); transform: perspective(1000px) rotateX(17.5deg); } 80% { -webkit-transform: perspective(1000px) rotateX(-30deg); transform: perspective(1000px) rotateX(-30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateX(90deg); transform: perspective(1000px) rotateX(90deg); opacity: 0; } } @-webkit-keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } @keyframes swingOutY { 0% { -webkit-transform: perspective(1000px) rotateY(0deg); transform: perspective(1000px) rotateY(0deg); } 40% { -webkit-transform: perspective(1000px) rotateY(7.5deg); transform: perspective(1000px) rotateY(7.5deg); } 60% { -webkit-transform: perspective(1000px) rotateY(-10deg); transform: perspective(1000px) rotateY(-10deg); } 80% { -webkit-transform: perspective(1000px) rotateY(30deg); transform: perspective(1000px) rotateY(30deg); opacity: 1; } 100% { -webkit-transform: perspective(1000px) rotateY(-90deg); transform: perspective(1000px) rotateY(-90deg); opacity: 0; } } /*-------------- Zoom ---------------*/ .transition.zoom.in { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .transition.zoom.out { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomIn { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes zoomIn { 0% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } } @keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 1; -webkit-transform: scale(0); transform: scale(0); } } /******************************* Static Animations *******************************/ /*-------------- Emphasis ---------------*/ .flash.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: flash; animation-name: flash; } .shake.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: shake; animation-name: shake; } .bounce.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: bounce; animation-name: bounce; } .tada.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: tada; animation-name: tada; } .pulse.transition { -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-name: pulse; animation-name: pulse; } .jiggle.transition { -webkit-animation-duration: 750ms; animation-duration: 750ms; -webkit-animation-name: jiggle; animation-name: jiggle; } .transition.glow { -webkit-animation-duration: 2000ms; animation-duration: 2000ms; -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .transition.glow { -webkit-animation-name: glow; animation-name: glow; } /* Flash */ @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } /* Shake */ @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } /* Bounce */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } /* Tada */ @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } /* Pulse */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.7; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* Jiggle */ @-webkit-keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jiggle { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* Glow */ @-webkit-keyframes glow { 0% { background-color: #FCFCFD; } 30% { background-color: #FFF6CD; } 100% { background-color: #FCFCFD; } } @keyframes glow { 0% { background-color: #FCFCFD; } 30% { background-color: #FFF6CD; } 100% { background-color: #FCFCFD; } } /******************************* Site Overrides *******************************/