/* owl.carousel.min.css */ /** * Owl Carousel v2.2.1 * Copyright 2013-2017 David Deutsch * Licensed under () */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* custome.css */ .newstyles,.myModal,.nav-mobile,.modal.left{font-family: 'Poppins', sans-serif;} .container-new{max-width: 1280px !important; width: 1280px;} .f-8{font-size: 8px !important;} .f-9{font-size: 8px !important;} .f-10{font-size: 10px !important;} .f-11{font-size: 11px !important;} .f-12{font-size: 12px !important;} .f-14{font-size: 14px !important;} .f-16{font-size: 16px !important;} .f-18{font-size: 18px !important;} .f-20{font-size: 20px !important;} .f-22{font-size: 22px !important;} .f-24{font-size: 24px !important;} .f-26{font-size: 26px !important;} .f-28{font-size: 28px !important;} .f-30{font-size: 30px !important;} .f-32{font-size: 32px !important;} .f-34{font-size: 34px !important;} .f-36{font-size: 36px !important;} .f-40{font-size: 40px !important;} .f-42{font-size: 42px !important;} .f-46{font-size: 46px !important;} .f-8:before{font-size: 8px !important;} .f-10:before{font-size: 10px !important;} .f-12:before{font-size: 12px !important;} .f-14:before{font-size: 14px !important;} .f-16:before{font-size: 16px !important;} .f-18:before{font-size: 18px !important;} .f-20:before{font-size: 20px !important;} .f-22:before{font-size: 22px !important;} .f-24:before{font-size: 24px !important;} .f-26:before{font-size: 26px !important;} .f-28:before{font-size: 28px !important;} .f-30:before{font-size: 30px !important;} .f-32:before{font-size: 32px !important;} .f-34:before{font-size: 34px !important;} .f-36:before{font-size: 36px !important;} .f-40:before{font-size: 40px !important;} .f-42:before{font-size: 42px !important;} .f-46:before{font-size: 46px !important;} .f-72:before{font-size: 72px !important;} .mb-0{margin-bottom: 0px !important;} .mb-5{margin-bottom: 5px !important;} .mb-10{margin-bottom: 10px !important;} .mb-15{margin-bottom: 15px !important;} .mb-20{margin-bottom: 20px !important;} .mb-25{margin-bottom: 25px !important;} .mb-30{margin-bottom: 30px !important;} .mb-35{margin-bottom: 35px !important;} .mb-40{margin-bottom: 40px !important;} .mb-50{margin-bottom: 50px !important;} .mt-0{margin-top: 0px;} .mt-5{margin-top: 5px;} .mt-10{margin-top: 10px;} .mt-15{margin-top: 15px;} .mt-20{margin-top: 20px;} .mt-25{margin-top: 25px;} .mt-30{margin-top: 30px;} .mt-35{margin-top: 35px;} .mt-40{margin-top: 40px;} .mt-50{margin-top: 50px;} .ml-0{margin-left: 0px;} .ml-5{margin-left: 5px;} .ml-10{margin-left: 10px;} .ml-15{margin-left: 15px;} .ml-20{margin-left: 20px;} .ml-25{margin-left: 25px;} .ml-30{margin-left: 30px;} .ml-35{margin-left: 35px;} .ml-40{margin-left: 40px;} .ml-50{margin-left: 50px;} .mr-0{margin-right: 0px;} .mr-5{margin-right: 5px;} .mr-10{margin-right: 10px;} .mr-15{margin-right: 15px;} .mr-20{margin-right: 20px;} .mr-25{margin-right: 25px;} .mr-30{margin-right: 30px;} .mr-35{margin-right: 35px;} .mr-40{margin-right: 40px;} .mr-50{margin-right: 50px;} .pb-0{padding-bottom: 0px;} .pb-5{padding-bottom: 5px;} .pb-10{padding-bottom: 10px;} .pb-15{padding-bottom: 15px;} .pb-20{padding-bottom: 20px;} .pb-25{padding-bottom: 25px;} .pb-30{padding-bottom: 30px;} .pb-35{padding-bottom: 35px;} .pb-40{padding-bottom: 40px;} .pb-50{padding-bottom: 50px;} .pt-0{padding-top: 0px;} .pt-5{padding-top: 5px;} .pt-10{padding-top: 10px;} .pt-15{padding-top: 15px;} .pt-20{padding-top: 20px;} .pt-25{padding-top: 25px;} .pt-30{padding-top: 30px;} .pt-35{padding-top: 35px;} .pt-40{padding-top: 40px;} .pt-50{padding-top: 50px;} .pl-0{padding-left: 0px;} .pl-5{padding-left: 5px;} .pl-10{padding-left: 10px;} .pl-15{padding-left: 15px;} .pl-20{padding-left: 20px !important;} .pl-25{padding-left: 25px !important;} .pl-30{padding-left: 30px !important;} .pl-35{padding-left: 35px !important;} .pl-40{padding-left: 40px !important;} .pl-50{padding-left: 50px !important;} .pr-0{padding-right: 0px;} .pr-5{padding-right: 5px;} .pr-10{padding-right: 10px !important;} .pr-15{padding-right: 15px !important;} .pr-20{padding-right: 20px !important;} .pr-25{padding-right: 25px !important;} .pr-30{padding-right: 30px !important;} .pr-35{padding-right: 35px !important;} .pr-40{padding-right: 40px !important;} .pr-50{padding-right: 50px !important;} .m-0{margin:0px;} .m-5{margin: 5px;} .m-10{margin: 10px;} .m-15{margin: 15px;} .m-20{margin: 20px;} .m-25{margin: 25px;} .m-30{margin: 30px;} .p-0{padding:0px;} .p-5{padding: 5px;} .p-10{padding: 10px;} .p-15{padding: 15px;} .p-20{padding: 20px;} .p-25{padding: 25px;} .p-30{padding: 30px;} .fw-3{font-weight: 300;} .fw-4{font-weight: 400;} .fw-5{font-weight: 500;} .fw-6{font-weight: 600;} .fw-7{font-weight: 700;} .w-100{width: 100%;} .h-100{height: 100%;} .text-transform{text-transform: uppercase;} .d-flex{display: flex;} .items-center{align-items: center;} .flex-wrap{flex-flow: wrap;} .content-center{justify-content: center;} .d-block{display: block;} .cursor{cursor: pointer;} .overflow{overflow: auto;} .text-white{color:#fff;} .text-grey{color: rgba(255,255,255,0.8);} .text-danger{color:#ff0000;} .text-light{color:#93959f;} .text-secondary { color: #745700!important; } .radius-0{border-radius: 0px !important;} .radius-5{border-radius: 5px;} .radius-10{border-radius: 10px;} .radius-15{border-radius: 15px;} .radius-20{border-radius: 20px;} .radius-25{border-radius: 25px;} .radius-50{border-radius: 50%;} .border{border:1px solid #ddd;} .border-top{border-top:1px solid #ddd;} .border-top-0{border-top:none !important} .border-left-0{border-left:none !important} .border-bottom{border-bottom:1px solid #ddd;} .border-right{border-right:1px solid #ddd;} .border-left{border-left:1px solid #ddd;} .rounded { border-radius: 10em; } .btn-rounded { border-radius: 10em; } .btn-outline-primary { color: #4285f4 !important; background-color: transparent !important; border: 1px solid #4285f4 !important; } .btn-outline-default { color: #2bbbad !important; background-color: transparent !important; border: 1px solid #2bbbad !important; } .btn-outline-secondary { color: #a6c !important; background-color: transparent !important; border: 1px solid #a6c !important; } .btn-outline-success { color: #2D9B0A !important; background-color: transparent !important; border: 1px solid #ddd !important; } .btn-outline-info { color: #33b5e5 !important; background-color: transparent !important; border: 1px solid #33b5e5 !important; } .btn-outline-warning { color: #fb3 !important; background-color: transparent !important; border: 1px solid #fb3 !important; } .btn-outline-danger { color: #ff3547 !important; background-color: transparent !important; border: 1px solid #ff3547 !important; } .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; } .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; } .label-outline-primary{border:1px solid #066E8F; border-radius: 25px; color: #066E8F; padding: 5px 15px; font-weight: normal; box-shadow: 0 0 1px rgba(0, 0, 0, 0);} .label-outline-danger{border:1px solid #f00; border-radius: 25px; color: #f00; padding: 5px 15px; font-weight: normal; box-shadow: 0 0 1px rgba(0, 0, 0, 0);} .label-outline-success{border:1px solid #2D9B0A ; border-radius: 25px; color: #2D9B0A ; padding: 5px 15px; font-weight: normal; box-shadow: 0 0 1px rgba(0, 0, 0, 0);} .label-primary{background: #066E8F !important; border-radius: 25px;} .label-primary,.label-success{ border-radius: 25px !important;padding: 8px 15px !important; font-weight: normal;} .btn:hover{ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; } .btn.ripple { position: relative; text-align: center; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .btn.ripple:after { content: ""; background: rgba(36, 163, 227, 0.3); display: block; position: absolute; padding-top: 300%; padding-left: 350%; left:0; margin-top: -120%; opacity: 0; transition: all 0.8s } .btn.ripple:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } .btn,a:focus,.btn,a:active{outline: none !important;} .fliters .panel-heading { padding: 0; border:0; } .fliters .panel-title>a, .fliters .panel-title>a:active{ display:block; padding:10px 15px; color:#555; font-weight:600; text-decoration:none; font-size: 13px; } .fliters .panel-heading{background: #fff;} .fliters .panel-heading.active{background: #f8f8f8;} .fliters .panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color: #fff; padding: 5px 15px;} .fliters .panel-heading a:before { font-family: 'Flaticon'; content: "\f140"; float: right; transition: all 0.5s; } .fliters .panel-heading.active a:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .panel-group.fliters .panel+.panel{margin-top: -1px;} .panel-group.fliters .panel{border-radius: 0px;} .fliters .panel-body{max-height: 280px;} .fliters.fliters1 .panel-body{height: auto; max-height: inherit;} .fliters1 .panel-default>.panel-heading+.panel-collapse>.panel-body,.fliters1 .panel{border:none;} /*.fliters1 .panel-default,.fliters1 .panel-body {border-bottom: 1px solid #ddd !important;}*/ .fliters1 .panel{box-shadow: none !important;} .fliters1 .panel-group.fliters .panel+.panel{margin-top: 0px;} .customeChk { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 12px; font-weight: 500; margin-bottom: 11px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .customeChk input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .customeChk .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #fff; border-radius: 3px; border:1px solid #ddd; transition: 0.5s; } /* On mouse-over, add a grey background color */ .customeChk:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .customeChk input:checked ~ .checkmark { background-color: #2D9B0A !important; } /* Create the checkmark/indicator (hidden when not checked) */ .customeChk .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .customeChk input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .customeChk .checkmark:after { left: 4px; top: 2px; width: 5px; height: 10px; font-family: 'Flaticon'; content: "\f118"; color: #fff; font-size: 11px; font-weight: 800; /* border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);*/ } .radiochk input:checked ~ .checkmark { background-color: #2D9B0A !important; } .radiochk .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: 50%; } .radiochk .checkmark:after { top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: white; content: ""; } .leftsidebar{width:285px;} @-webkit-keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hvr-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active { -webkit-animation-name: hvr-pulse-shrink; animation-name: hvr-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); } @-webkit-keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes hvr-pulse-shrink { to { -webkit-transform: scale(0.9); transform: scale(0.9); } } /* Let's get this party started */ ::-webkit-scrollbar { width:5px; } /* Track */ ::-webkit-scrollbar-track { -webkit-border-radius: 5px; border-radius: 5px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius:5px; border-radius: 5px; background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.4); } .stickyfilters { /* position: -webkit-sticky;*/ position: sticky; top: 0; } .affix { top: 0; /* width: 19%; */ z-index: 9999 !important; left: 1; } .custmize{display: none;} .number{width:83px; border:1px solid #ddd; float: right; border-radius: 8px;} .AddOns{width:142px;} .number.AddOns {margin-top:10px !important;} .number span {cursor:pointer; } .minus, .plus{ width:20px; height:29px; padding:2px 5px 5px 5px; display: inline-block; vertical-align: middle; text-align: center; font-size: 18px; color: #000; background: #eee; } .minus{border-radius: 8px 0px 0px 8px;} .plus{border-radius: 0px 8px 8px 0px;} .minus:hover,.plus:hover{color: #25b30d;} .number input{ height:30px; width:40px; text-align: center; font-size: 13px; display: inline-block; vertical-align: middle; border:none; } .number.AddOns input{width:100px; font-size: 12px;} .outofstockimg{width: 200px;} .cartNumber{border-radius:0px; width: 75px;} .cartNumber input{width:25px;} .cartNumber .minus, .cartNumber .plus{border-radius: 0px; background: none;} .minus:hover{color: #ff0000;} /**************** category images*************/ .ribbon.off { background-color: #2D9B0A !important; } .ribbon { color: #fff; display: inline-block; font-size: 1rem; line-height: 1; position: absolute; top:8px; right:5px; padding: 7px 8px 4px 8px; font-weight: 600; min-width: 40px; z-index: 9; } .strip figure a.strip_info small { position: absolute; background-color: #e10000; left: 5px; top: 8px; text-transform: uppercase; color: #fff; font-weight: 600; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 6px 8px 4px 8px; line-height: 1; font-size: 11px; font-size: 9px; z-index: 999; } .strip {position: relative; margin:10px 0px;} .strip figure { margin-bottom: 5px; overflow: hidden; position: relative; height: 170px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } .item_title { z-index: 9; width: 100%; position: absolute; bottom: 0; left: 0; padding: 65px 15px 10px 15px; background: -moz-linear-gradient(top, transparent 5%, #000 100%); background: -webkit-linear-gradient(top, transparent 5%, #000 100%); background: linear-gradient(to bottom, transparent 5%, #000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); } .item_title_text{transition: 0.5s;} .itemCart:hover .item_title_text{transform: translateY(-30px);} .noItem:hover .item_title_text{transform: translateY(0px);} .noItem:hover .symbols{display: none;} .strip figure img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; width: 100%; z-index: 0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .strip figure:hover img{-webkit-transform:translate(-50%, -50%) scale(1.1);-moz-transform:translate(-50%, -50%) scale(1.1);-ms-transform:translate(-50%, -50%) scale(1.1);-o-transform:translate(-50%, -50%) scale(1.1);transform:translate(-50%, -50%) scale(1.1)} .strip figure .item_title h3 { font-size: 16px; font-size: 1.4rem; margin: 0; font-weight: 500; color: #fff; margin: 10px 0 5px; padding: 0; line-height: 1; } .btn-sm{padding: 3px 7px !important;} .itemCart{border:1px solid #fff; margin-bottom: 20px; position: relative;} .itemCart:hover{border-color:#d3d5df;box-shadow:0 4px 7px 0 rgba(218,220,230,.6);} .quickview{visibility: hidden;} .itemCart:hover .quickview{visibility: visible;} .symbols { position: absolute; bottom:5px; z-index: 9999999; color: #fff; display: none; } .symbols>a:hover{color: rgba(255,255,255,0.8); text-decoration: none;} .itemCart:hover .symbols{display: block;} .btn-select { position: relative; padding: 0; min-width: 100%; width: 100%; border-radius: 0; margin-bottom: 20px; } .btn-select .btn-select-value { padding: 6px 12px; display: block; position: absolute; left: 0; right: 34px; text-align: left; text-overflow: ellipsis; overflow: hidden; border-top: none !important; border-bottom: none !important; border-left: none !important; font-size: 1.1rem; } .btn-select .btn-select-arrow { float: right; line-height: 16px; padding: 6px 10px; top: 0; } .btn-select ul { display: none; background-color: white; color: black; clear: both; list-style: none; padding: 0; margin: 0; border-top: none !important; position: absolute; left: -1px; right: -1px; top: 30px; z-index: 9999999; font-size: 1.1rem; min-height: 40px; max-height: 80px; overflow: auto; border: 1px solid #ddd; } .btn-select ul li { padding: 3px 6px; text-align: left; } .btn-select ul li:hover { background-color: #f4f4f4; } .btn-select ul li.selected { color: white; } /* Default Start */ .btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active { border-color: #ccc; background: #fff; } .btn-select.btn-default ul li.selected { background-color: #ccc; } .btn-select.btn-default ul, .btn-select.btn-default .btn-select-value { background-color: white; /* border: #ccc 1px solid;*/ } /*.btn-select.btn-default:hover, .btn-select.btn-default.active { background-color: #e6e6e6; } */ .popover{font-family: 'Poppins', sans-serif;width:480px !important; max-width: 480px !important; border-radius:0px; border:none; box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; padding: 15px;z-index: 999999; animation: slideLeft 0.5s; position: absolute;} /*@keyframes slideLeft{ from{margin-left: -120px;} to{margin-left: 0px;} }*/ /*.popover.in{margin-left: 200px !important;}*/ /*.popover.fade.right{transition: 0.5s;}*/ /*.popover.fade.right.in{ transform: translate(0px, 0px) !important;}*/ .popoverContent .btn-select{min-width: 100%;} .popoverContent .btn-select ul{min-height: 120px;} .popover.right>.arrow:after,.popover.right>.arrow,.popover.left>.arrow:after,.popover.left>.arrow{display: none;} .myModal .modal-content{border-radius: 0px;} .closeBtn{background: #fff !important; position: fixed; top: -10px; right: -10px; padding: 4px 8px !important; opacity: 1; border-radius:50%;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} .closeBtn:hover{opacity: 1; color: #f00;} .myModal .modal-body{padding: 50px 80px;} .itemtitle{color: #333; font-weight: 500; font-size: 13px; padding-top: 6px; margin-bottom: 3px;} .itemlist{padding: 0px; margin:0px;} .itemlist>li{display: inline-block; font-size: 12px; color:#686b78; list-style: none;} .itemcard:hover{text-decoration: none;} .itemlist{margin:0px; padding:0px;} .itemlist>li{display: inline-block;} .itemlist>li>a{background: #f4f4f4; display: block; padding: 6px 10px; border-radius: 50%; color: #686b78;} .itemlist>li>a>i.flaticon:before{margin-left: 0px !important;} .addcart{display: none;} .itemCart1:hover .addcart{display: block !important;} .itemsize .btn-outline-success.active {background:#2D9B0A !important; color:#fff !important;} .allfilters{background: #fff; padding:5px 0px; border-radius: 5px; margin: 10px 0px; border:1px solid #eee;} .outoffstack{pointer-events: none;opacity: 0.4;} .noItem{position: relative;} .outoffstackContnt { position: absolute; top: 28%; z-index: 999; bottom: 0; right: 0; margin: auto; left: 50%; transform: translate(-50%, 0); font-weight: 700; } .categoryList{padding:0px;} .categoryList>li{list-style: none;} .categoryList>li>a{color: #575757; font-size: 12px; padding:5px; display: block; font-weight: 500; transition: 0.5s;} .categoryList>li>a:hover{padding-left: 10px; text-decoration:none; color: #333;} .btn-success{background: #2D9B0A !important;} /************** responisve menu***********/ .nav-mobile { color: #FFF; padding: 0; margin: 0; cursor: auto; font-size: 18px; list-style-type: none; } .nav-mobile:after { content: ""; display: table; clear: both; } .nav-mobile svg { height: 45px; width: 65px; padding: 9px; } .nav-mobile svg path { fill: #fff; } .nav-mobile svg.icon-close { display: none; padding: 15px; } .nav-mobile li { width: 100%; height: 45px; line-height: 46px; text-align: center; float: left; } .nav-mobile li a { display: block; color: #333; width: 100%; height: 100%; text-decoration: none; } .nav-mobile .menu-button { position: absolute; top: 9px; left: 7px; width: 100%; height: 100%; margin: 0; cursor: pointer; display: block; } .nav-mobile .menu-button:after { opacity: 0; top: 0px; content: ""; width: 100vw; display: block; position: fixed; height: 100vh; background: rgba(0, 0, 0, 0.5); content: ""; pointer-events: none; transition: opacity 0.2s cubic-bezier(0, 0, 0.3, 1); transition-delay: 0.1s; z-index: 99; } .nav-mobile #menu-toggle { display: none; } .nav-mobile #menu-toggle.active ~ .menu-button .icon-close, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-close { display: block; } .nav-mobile #menu-toggle.active ~ .menu-button .icon-open, .nav-mobile #menu-toggle:checked ~ .menu-button .icon-open { display: none; } .nav-mobile #menu-toggle.active ~ .menu-button:after, .nav-mobile #menu-toggle:checked ~ .menu-button:after { opacity: 1; pointer-events: auto; transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); } .nav-mobile #menu-toggle.active ~ .menu-sidebar, .nav-mobile #menu-toggle:checked ~ .menu-sidebar { transform: translateX(0); transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1); } .nav-mobile .menu-container { width: 65px; float: left; cursor: pointer; position: absolute; } .nav-mobile .menu-container .menu-sidebar { box-shadow: 5px 0 5px -5px #333; display: block; width: 75vw; bottom: 0; background: white; color: #333; position: fixed; transform: translateX(-405px); transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1); top:0px; z-index: 99999; list-style-type: none; padding:35px 0; max-width: 400px; } .nav-mobile .menu-container .menu-sidebar .arrow { position: absolute; line-height: 50px; font-size: 32px; color: #555; top: -7px; z-index: 0; } .nav-mobile .menu-container .menu-sidebar .arrow.left { left:10px; } .nav-mobile .menu-container .menu-sidebar .arrow.right { right: 10px; } .nav-mobile .menu-container .menu-sidebar li { /* height: 55px; line-height: 55px;*/ font-size: 14px; text-align: left; position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: 10px; } .nav-mobile .menu-container .menu-sidebar li:hover { background: #eee; } .nav-mobile .menu-container .menu-sidebar li label{font-weight:500;} .nav-mobile .menu-container .menu-sidebar li .menu-sub { position: fixed; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden; background: white; visibility: hidden; transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); border-left: 1px solid #ccc; list-style-type: none; padding: 0; margin: 0; z-index: 2; max-width: 400px; } .nav-mobile .menu-container .menu-sidebar li .menu-sub li { overflow: hidden; } .nav-mobile .menu-container .menu-sidebar li .menu-sub .menu-sub-title { padding-left: 50px; } .nav-mobile .menu-container .menu-sidebar li .submenu-label { cursor: pointer; width: 100%; height: 100%; display: block; } .nav-mobile .menu-container .menu-sidebar li .submenu-toggle { display: none; } .nav-mobile .menu-container .menu-sidebar li .submenu-toggle.active ~ .menu-sub, .nav-mobile .menu-container .menu-sidebar li .submenu-toggle:checked ~ .menu-sub { width: 65vw; visibility: visible; z-index: 1; transition: width 0.35s cubic-bezier(0, 0, 0.3, 1); } .icon-close{position: fixed;z-index: 999999999999999;top: 10px;left: 225px; display: none; opacity: 0.5;} /**********************menu end**************/ /* .waves-effect { position: relative; cursor: pointer; display: inline-block; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; vertical-align: middle; z-index: 1; will-change: opacity, transform; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; transition: all 0.1s ease-out; } .waves-effect .waves-ripple { position: absolute; border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; opacity: 0; background: rgba(0, 0, 0, 0.2); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); pointer-events: none; } .waves-effect.waves-light .waves-ripple { background-color: rgba(255, 255, 255, 0.45); } .waves-effect.waves-red .waves-ripple { background-color: rgba(244, 67, 54, 0.7); } .waves-effect.waves-yellow .waves-ripple { background-color: rgba(255, 235, 59, 0.7); } .waves-effect.waves-orange .waves-ripple { background-color: rgba(255, 152, 0, 0.7); } .waves-effect.waves-purple .waves-ripple { background-color: rgba(156, 39, 176, 0.7); } .waves-effect.waves-green .waves-ripple { background-color: rgba(76, 175, 80, 0.7); } .waves-effect.waves-teal .waves-ripple { background-color: rgba(0, 150, 136, 0.7); } a.waves-effect .waves-ripple { z-index: -1; }*/ /*.popover{ margin-left:-100px; transition: 0.5s;}*/ .closepop{display: none;} .bg-white{background: #fff;} .m9{box-shadow: 0px 5px 7px 0px rgba(0,0,0,0.11); z-index: 9999999999; border-color: transparent; position: relative; background: #fff; padding-bottom: 20px;} /******** Cart Css********/ .nice-select .list:hover .option:not(:hover){background-color:transparent !important}.margin_60_40{padding-top:60px;padding-bottom:40px}.bg_gray{background-color:#f4f4f4}.bg_gray.pattern{background:#f4f4f4 url(https://trishanfood.jettysoft.com/assets/img/v2/pattern_icons.svg) repeat}.mb_5{margin-bottom:5px}a.btn_1,.btn_1{border:none;background:#589442;outline:none;cursor:pointer;display:inline-block;text-decoration:none;padding:8px 25px;color:#fff;font-weight:500;text-align:center;font-size:14px;font-size:0.875rem;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;line-height:normal}a.btn_1:focus,.btn_1:focus{outline:none}a.btn_1:hover,.btn_1:hover{-webkit-filter:brightness(115%);filter:brightness(115%)}a.btn_1.full-width,.btn_1.full-width{display:block;width:100%;text-align:center}.container_radio{display:block;position:relative;padding-left:30px;line-height:1.6;margin-bottom:8px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container_radio input{position:absolute;opacity:0}.container_radio input:checked ~ .checkmark:after{opacity:1}.container_radio .checkmark{position:absolute;top:0;left:0;height:20px;width:20px;border:1px solid #d2d8dd;background-color:#fff;border-radius:50%}.container_radio .checkmark:after{display:block;content:"";position:absolute;opacity:0;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#589442;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} .form-control{padding:10px;height:40px;font-size:14px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #d2d8dd}.form-control:focus{border-color:#ccc;outline:0;box-shadow:0 0 0 0.2rem rgba(0,0,0,0.05)}.form-group{position:relative} .box_booking{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;margin-bottom:25px;background-color:#fff}.box_booking .head{padding:23px 20px 18px 20px;background-color:#fff;border-bottom:1px dotted #d2d8dd}.box_booking .head h3{font-size:24px;font-size:1.5rem;margin:0}.box_booking .main{padding:25px 15px;}.box_booking .main ul{list-style:none;padding:0}.box_booking .main ul li{margin-bottom:15px; font-size: 12px;}.box_booking .main ul li.total{font-size:18px;font-size:1.125rem;font-weight:600;color:#e74747;text-transform:uppercase}.box_booking .main ul li a{padding-left:30px;color:#444;display:inline-block;position:relative}.box_booking .main ul li a:before{font-family:"FontAwesome";content:"\f147";font-size:21px;font-size:1.8rem;position:absolute;left:0;top:2px;line-height:1}.box_booking .main ul li a:hover{color:#e74747}.box_booking .main ul li span{font-weight:500} .box_booking_2,.sign_up{margin-bottom:25px;background-color:#fff;-webkit-box-shadow:0px 0px 30px 0px rgba(0,0,0,0.3);-moz-box-shadow:0px 0px 30px 0px rgba(0,0,0,0.3);box-shadow:0px 0px 30px 0px rgba(0,0,0,0.3);overflow:hidden}.box_booking_2 .head,.sign_up .head{text-align:center;padding:23px 20px 18px 20px;background-color:#589442;color:#fff}.box_booking_2 .head h3,.sign_up .head h3{font-size:24px;font-size:1.5rem;margin:0;color:#fff}.box_booking_2 .head small,.sign_up .head small{display:block}.box_booking_2 .head a,.sign_up .head a{color:#fff;text-decoration:underline}.box_booking_2 .main,.sign_up .main{padding:25px}.box_booking_2 .main ul,.sign_up .main ul{list-style:none;padding:0}.box_booking_2 .main ul li,.sign_up .main ul li{font-weight:500;margin-bottom:5px}.box_booking_2 .main ul li span,.sign_up .main ul li span{float:right;font-weight:400}.box_booking_2 .main ul li.total,.sign_up .main ul li.total{font-size:16px;font-size:1rem;font-weight:600;color:#e74747;text-transform:uppercase}.box_booking_2 .main ul li.total span,.sign_up .main ul li.total span{font-weight:600}.box_booking_2 .form-group input,.sign_up .form-group input{/*padding-right:40px*/}.box_booking_2 .form-group i,.sign_up .form-group i{font-size:16px;font-size:1rem;position:absolute;right:3px;top:12px;color:#ccc;width:25px;height:25px;display:block;font-weight:400 !important}.box_booking_2 .form-group i.icon_mail,.sign_up .form-group i.icon_mail{top:10px}.box_booking_2.style_2 .head{text-align:left;padding:15px 20px 12px 25px}.box_booking_2.style_2 .head h3{font-size:21px;font-size:1.3125rem}.box_booking_2.style_2 .main{padding:20px 25px 10px 25px}.payment_select{background-color:#f0f0f0;padding:15px 15px 10px 15px;margin-bottom:20px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}.payment_select label{font-size:16px;display:inline-block;margin-bottom:0}.payment_select i{float:right;font-size:24px}.payment_select#paypal{background:#f0f0f0 url(https://trishanfood.jettysoft.com/assets/img/v2/paypal_2.svg) center right no-repeat}#confirm{text-align:center;padding:60px 15px}@-webkit-keyframes checkmark{0%{stroke-dashoffset:50px}100%{stroke-dashoffset:0}}@-ms-keyframes checkmark{0%{stroke-dashoffset:50px}100%{stroke-dashoffset:0}}@keyframes checkmark{0%{stroke-dashoffset:50px}100%{stroke-dashoffset:0}}@-webkit-keyframes checkmark-circle{0%{stroke-dashoffset:240px}100%{stroke-dashoffset:480px}}@-ms-keyframes checkmark-circle{0%{stroke-dashoffset:240px}100%{stroke-dashoffset:480px}}@keyframes checkmark-circle{0%{stroke-dashoffset:240px}100%{stroke-dashoffset:480px}}.inlinesvg .svg svg{display:inline}.icon--order-success svg path{-webkit-animation:checkmark 0.25s ease-in-out 0.7s backwards;animation:checkmark 0.25s ease-in-out 0.7s backwards}.icon--order-success svg circle{-webkit-animation:checkmark-circle 0.6s ease-in-out backwards;animation:checkmark-circle 0.6s ease-in-out backwards} .youLikes{border:1px dashed #adabab; padding:10px;} .coupon{border:1px dashed #a9abb2; padding: 10px; display: block; color: #333;} .form-group {position:relative; } .form .form-group {margin-top: -1px;} .form-label { position: absolute; left: 10px; top: 20px; color: #999; background-color: #fff; z-index: 10; transition: transform 150ms ease-out, font-size 150ms ease-out; font-weight: 400; } .focused .form-label { transform: translateY(-125%); font-size: .75em; } .form-input { position: relative; padding: 20px 12px; width: 100%; outline: 0; border: 0; border:1px solid #e5e5e5; transition: box-shadow 150ms ease-out; &:focus { box-shadow: 0 2px 0 0 blue; } } .form-input.filled { box-shadow: 0 2px 0 0 lightgreen; } .ccbills{padding: 15px 0px 15px 15px !important;} .ccbills>li>a{color: #333 !important; font-size: 14px; border-radius: 0px; margin-right: 0px;padding: 20px 10px; transition: 0.5s; border:none;} .ccbills>li>a:hover,.ccbills>li>a:focus{background: none; box-shadow:none; border:none; } .ccbills>li.active>a{ font-size: 15px; border:none !important;} .bankBtn>i.fa{color:#dfdfdf;} .bankBtn:focus>i.fa{color:#2D9B0A !important;} .addAddress{border:1px dashed #dddddf; padding: 25px; display: block;} .addAddress:hover{text-decoration: none;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} /***************** cart css end*********/ /******* modal left sidebar************/ .modal.left .modal-dialog, .modal.right .modal-dialog { position: fixed; margin: auto; width: 320px; height: 100%; -webkit-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .modal.left .modal-content, .modal.right .modal-content { height: 100%; overflow-y: auto; } .modal.left .modal-body, .modal.right .modal-body { padding: 15px 15px 80px; } /*Left*/ .modal.left.fade .modal-dialog{ left: -320px; -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; -moz-transition: opacity 0.3s linear, left 0.3s ease-out; -o-transition: opacity 0.3s linear, left 0.3s ease-out; transition: opacity 0.3s linear, left 0.3s ease-out; } .modal.left.fade.in .modal-dialog{ left: 0; } /*Right*/ .modal.right.fade .modal-dialog { right: -320px; -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; -moz-transition: opacity 0.3s linear, right 0.3s ease-out; -o-transition: opacity 0.3s linear, right 0.3s ease-out; transition: opacity 0.3s linear, right 0.3s ease-out; } .modal.right.fade.in .modal-dialog { right: 0; } /* ----- MODAL STYLE ----- */ .modal.left .modal-content { border-radius: 0; border: none; width: 560px; } .modal.left .modal-header { border-bottom-color: #EEEEEE; background-color: #FAFAFA; } .demo { padding-top: 60px; padding-bottom: 110px; } .btn-demo { border-radius: 0; background-color: #FFFFFF; } .btn-demo:focus { outline: 0; } .demo-footer { position: fixed; bottom: 0; width: 100%; padding: 15px; background-color: #212121; text-align: center; } .demo-footer > a { text-decoration: none; font-weight: bold; font-size: 16px; color: #fff; } /********* modal left sidebar end**********/ .cartCard{border:none !important; border-radius: 0px !important;} .cartCard>.panel-heading{background: #fff;} .cartTitle h3{font-size:20px;float: left;display: contents;} .cartTitle p{font-size: 13px; padding-top: 5px;} .cartTitle>a:hover,.cartTitle>a:active,.cartTitle>a:focus{text-decoration: none;} .accordion_icon{float: right;} @media screen and (min-width:320px) and (max-width:479px) { .m-xs-6{ width:96% !important; margin-left: 2%;} .popover{width: 98% !important;max-width: 98% !important; left:1% !important; z-index: 999999;} .popover.left{margin-left: 0px;} .wrapper.center-block.pl-30.pr-10 {padding-left: 0px;} .container-new{max-width:100% !important; width: 100%;} .strip figure{height: 190px;} .itemCart .item_title_text {transform: translateY(-30px);} .noItem .item_title_text {transform: translateY(0px);} .noItem .symbols{display:none;} .symbols{display: block;} .itemCart {border: 1px solid transparent;} .itemCart{margin-bottom: 10px;} .popoverDiv{width:100% !important; z-index: 99999999999999999999999 !important; left: 0px !important; padding:30px 15px 15px !important;} .closepop{display: block;position: absolute;right: 0px;top: -18px;background: #fff !important;padding: 4px 10px;border-radius: 50px; font-size: 18px;color: #f00; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} } @media screen and (min-width:480px) and (max-width:600px) { .container-new{max-width:100% !important; width: 100%;} .m-xs-6{ width:96% !important; margin-left: 2%;} .popover{width: 98% !important;max-width: 98% !important;left:1% !important; z-index: 999999;} .popover.left{margin-left: 0px;} .wrapper.center-block.pl-30.pr-10 {padding-left: 0px;} .strip figure{height: 190px;} .itemCart .item_title_text {transform: translateY(-30px);} .noItem .item_title_text {transform: translateY(0px);} .noItem .symbols{display:none;} .symbols{display: block;} .itemCart {border: 1px solid transparent;} .itemCart{margin-bottom: 10px;} .popoverDiv{width:100% !important; z-index: 99999999999999999999999 !important; left: 0px !important; padding:30px 15px 15px !important;} .closepop{display: block; position: absolute; right: 0px; top: -18px; background: #fff !important; padding: 4px 10px; border-radius: 50px; font-size: 18px; color: #f00; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;} } @media screen and (min-width:600px) and (max-width:767px) { .container-new{max-width:100% !important; width: 100%;} .itemCart {border: 1px solid transparent;} .noItem .item_title_text {transform: translateY(0px);} .noItem .symbols{display:none;} .itemCart{margin-bottom: 10px;} /* .popoverDiv{width:100% !important; z-index: 99999999999999999999999 !important; left: 0px !important; padding:30px 15px 15px !important;} .closepop{display: block; position: absolute; right: 0px; top: -18px; background: #fff !important; padding: 4px 10px; border-radius: 50px; font-size: 18px; color: #f00; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}*/ } @media screen and (min-width:1024px) and (max-width:1200px) { .container-new{width:inherit;} #viewtype2.popoverDiv,#viewtype5.popoverDiv,#viewtype8.popoverDiv{right: 90%; left: auto !important;padding: 15px 40px 15px 15px;} } @media screen and (min-width:1200px) and (max-width:1560px) { .popoverDiv{width: 430px !important;} } @media screen and (min-width:1560px) and (max-width:1920px) { } @media (min-width: 1200px){ .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } } @media screen and (min-width:992px) and (max-width:1024px) { .container-new{width:inherit;} #viewtype2.popoverDiv,#viewtype5.popoverDiv,#viewtype8.popoverDiv{right: 0%; left: 0% !important; padding: 15px 40px 15px 15px; top: 100%; height: 100%; overflow: auto} } @media screen and (min-width:768px) and (max-width:991px) { .container-new{max-width:100% !important; width: 100%;} .strip figure{height: 190px;} .itemCart .item_title_text {transform: translateY(-30px);} .noItem .item_title_text {transform: translateY(0px);} .noItem .symbols{display:none;} .symbols{display: block;} #viewtype2.popoverDiv,#viewtype8.popoverDiv{right: 95%; left: auto !important;padding: 15px 40px 15px 15px;} #viewtype3.popoverDiv,#viewtype5.popoverDiv{left: 95% !important; right: auto !important;padding: 15px 15px 15px 40px;} } /* animate.css */ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* flaticon.css */ @font-face{font-family:"Flaticon";src:url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.eot");src:url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.eot?#iefix") format("embedded-opentype"), url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.woff2") format("woff2"), url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.woff") format("woff"), url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.ttf") format("truetype"), url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.svg#Flaticon") format("svg");font-weight:normal;font-style:normal;} @media screen and (-webkit-min-device-pixel-ratio:0){@font-face{font-family:"Flaticon";src:url("https://trishanfood.jettysoft.com/assets/css/v2/flaticons/font/Flaticon.svg#Flaticon") format("svg");} } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after{font-family:Flaticon;font-size:20px;font-style:normal;margin-left:5px;} .flaticon-home:before{content:"\f100";} .flaticon-home-1:before{content:"\f101";} .flaticon-real-estate:before{content:"\f102";} .flaticon-restaurant:before{content:"\f103";} .flaticon-menu:before{content:"\f104";} .flaticon-information-desk:before{content:"\f105";} .flaticon-receptionist:before{content:"\f106";} .flaticon-track:before{content:"\f107";} .flaticon-track-1:before{content:"\f108";} .flaticon-cooking:before{content:"\f109";} .flaticon-bar:before{content:"\f10a";} .flaticon-shopping-cart:before{content:"\f10b";} .flaticon-shopping-cart-1:before{content:"\f10c";} .flaticon-order:before{content:"\f10d";} .flaticon-bargain:before{content:"\f10e";} .flaticon-fire-1:before{content:"\f10f";} .flaticon-grill:before{content:"\f110";} .flaticon-heart:before{content:"\f111";} .flaticon-heart-1:before{content:"\f112";} .flaticon-coupon:before{content:"\f113";} .flaticon-coupon-1:before{content:"\f114";} .flaticon-place:before{content:"\f115";} .flaticon-pin:before{content:"\f116";} .flaticon-lock:before{content:"\f117";} .flaticon-tick:before{content:"\f118";} .flaticon-binary:before{content:"\f119";} .flaticon-negotiation:before{content:"\f11a";} .flaticon-career:before{content:"\f11b";} .flaticon-content:before{content:"\f11c";} .flaticon-blog:before{content:"\f11d";} .flaticon-computer:before{content:"\f11e";} .flaticon-software:before{content:"\f11f";} .flaticon-international:before{content:"\f120";} .flaticon-outsource:before{content:"\f121";} .flaticon-consultation:before{content:"\f122";} .flaticon-consultant:before{content:"\f123";} .flaticon-education:before{content:"\f124";} .flaticon-work:before{content:"\f125";} .flaticon-lecture:before{content:"\f126";} .flaticon-content-1:before{content:"\f127";} .flaticon-builder:before{content:"\f128";} .flaticon-shopping-cart-3:before{content:"\f129";} .flaticon-dashboard:before{content:"\f12a";} .flaticon-piggy-bank:before{content:"\f12b";} .flaticon-doctor:before{content:"\f12c";} .flaticon-support:before{content:"\f12d";} .flaticon-life-insurance:before{content:"\f12e";} .flaticon-meeting:before{content:"\f12f";} .flaticon-customer-service:before{content:"\f130";} .flaticon-promotion:before{content:"\f131";} .flaticon-email:before{content:"\f132";} .flaticon-complain:before{content:"\f133";} .flaticon-location:before{content:"\f134";} .flaticon-location-1:before{content:"\f135";} .flaticon-target:before{content:"\f136";} .flaticon-customer:before{content:"\f137";} .flaticon-cloud-computing:before{content:"\f138";} .flaticon-internet-of-things:before{content:"\f139";} .flaticon-artificial-intelligence:before{content:"\f13a";} .flaticon-artificial-intelligence-1:before{content:"\f13b";} .flaticon-azure:before{content:"\f13c";} .flaticon-big-data:before{content:"\f13d";} .flaticon-left-arrow:before{content:"\f13e";} .flaticon-down-arrow:before{content:"\f13f";} .flaticon-down-arrow-1:before{content:"\f140";} .flaticon-next:before{content:"\f141";} .flaticon-left-arrow-1:before{content:"\f142";} .flaticon-right-arrow:before{content:"\f143";} .flaticon-search:before{content:"\f144";} .flaticon-up-arrow:before{content:"\f145";} .flaticon-up-chevron:before{content:"\f146";} .flaticon-shopping-cart-2:before{content:"\f147";} .flaticon-shopping-cart-4:before{content:"\f148";} .flaticon-pizza:before{content:"\f149";} .flaticon-pizza-1:before{content:"\f14a";} .flaticon-percentage:before{content:"\f14b";} .flaticon-like:before{content:"\f14c";} .flaticon-smartphone:before{content:"\f14d";} .flaticon-envelope:before{content:"\f14e";} .flaticon-loader:before{content:"\f14f";}