/* * Table of content: * * 1. normalize.css v8.0.1 * 2. Magnific Popup v1.1.0 * 3. Font Awesome Free v5.5.0 * 4. animsition v4.0.2 * 5. Swiper v4.0.7 */ /* 1. * normalize.css v8.0.1 * MIT License * github.com/necolas/normalize.css */ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none} /* 2. * Magnific Popup * Version: 1.1.0 - 2016-02-20 * http://dimsemenov.com/plugins/magnific-popup/ * Copyright (c) 2016 Dmitry Semenov; * License: MIT License (MIT) */ .mfp-bg,.mfp-wrap{position:fixed;left:0;top:0}.mfp-bg,.mfp-container,.mfp-wrap{height:100%;width:100%}.mfp-arrow:after,.mfp-arrow:before,.mfp-container:before,.mfp-figure:after{content:''}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.8}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-close,.mfp-preloader a:hover{color:#FFF}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}.mfp-figure:after,.mfp-iframe-scaler iframe{box-shadow:0 0 8px rgba(0,0,0,.6);position:absolute;left:0}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;opacity:.65;margin:-55px 0 0;top:50%;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #FFF;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3F3F3F}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #FFF;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3F3F3F}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{display:block;top:0;width:100%;height:100%;background:#000}.mfp-figure:after,img.mfp-img{width:auto;height:auto;display:block}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{top:40px;bottom:40px;right:0;z-index:-1;background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}} /* 4. * animsition * Version: 4.0.2 * http://blivesta.github.io/animsition * License : MIT * Author : blivesta (http://blivesta.com/) */ .animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-overlay-slide{position:fixed;z-index:1;width:100%;height:100%;background-color:#ddd}.animsition-loading,.animsition-loading:after{width:32px;height:32px;position:fixed;top:50%;left:50%;margin-top:-16px;margin-left:-16px;border-radius:50%;z-index:2}.animsition-loading{background-color:transparent;border-top:5px solid rgba(0,0,0,.2);border-right:5px solid rgba(0,0,0,.2);border-bottom:5px solid rgba(0,0,0,.2);border-left:5px solid #eee;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-name:animsition-loading;animation-name:animsition-loading}@-webkit-keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes animsition-loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in}@-webkit-keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out}@-webkit-keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up{-webkit-animation-name:fade-in-up;animation-name:fade-in-up}@-webkit-keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}@keyframes fade-out-up{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}.fade-out-up{-webkit-animation-name:fade-out-up;animation-name:fade-out-up}@-webkit-keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-sm{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-sm{-webkit-animation-name:fade-in-up-sm;animation-name:fade-in-up-sm}@-webkit-keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}@keyframes fade-out-up-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}.fade-out-up-sm{-webkit-animation-name:fade-out-up-sm;animation-name:fade-out-up-sm}@-webkit-keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-up-lg{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-lg{-webkit-animation-name:fade-in-up-lg;animation-name:fade-in-up-lg}@-webkit-keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes fade-out-up-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}.fade-out-up-lg{-webkit-animation-name:fade-out-up-lg;animation-name:fade-out-up-lg}@-webkit-keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}@keyframes fade-out-down{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}.fade-out-down{-webkit-animation-name:fade-out-down;animation-name:fade-out-down}@-webkit-keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-down-sm{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down-sm{-webkit-animation-name:fade-in-down-sm;animation-name:fade-in-down-sm}@-webkit-keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}@keyframes fade-out-down-sm{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}.fade-out-down-sm{-webkit-animation-name:fade-out-down-sm;animation-name:fade-out-down-sm}.fade-in-down-lg{-webkit-animation-name:fade-in-down;animation-name:fade-in-down}@-webkit-keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes fade-out-down-lg{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}.fade-out-down-lg{-webkit-animation-name:fade-out-down-lg;animation-name:fade-out-down-lg}@-webkit-keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left{-webkit-animation-name:fade-in-left;animation-name:fade-in-left}@-webkit-keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}@keyframes fade-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}.fade-out-left{-webkit-animation-name:fade-out-left;animation-name:fade-out-left}@-webkit-keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-sm{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-sm{-webkit-animation-name:fade-in-left-sm;animation-name:fade-in-left-sm}@-webkit-keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}@keyframes fade-out-left-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}.fade-out-left-sm{-webkit-animation-name:fade-out-left-sm;animation-name:fade-out-left-sm}@-webkit-keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-left-lg{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-lg{-webkit-animation-name:fade-in-left-lg;animation-name:fade-in-left-lg}@-webkit-keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}@keyframes fade-out-left-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}.fade-out-left-lg{-webkit-animation-name:fade-out-left-lg;animation-name:fade-out-left-lg}@-webkit-keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right{-webkit-animation-name:fade-in-right;animation-name:fade-in-right}@-webkit-keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}@keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}.fade-out-right{-webkit-animation-name:fade-out-right;animation-name:fade-out-right}@-webkit-keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-sm{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-sm{-webkit-animation-name:fade-in-right-sm;animation-name:fade-in-right-sm}@-webkit-keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}@keyframes fade-out-right-sm{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}.fade-out-right-sm{-webkit-animation-name:fade-out-right-sm;animation-name:fade-out-right-sm}@-webkit-keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes fade-in-right-lg{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-lg{-webkit-animation-name:fade-in-right-lg;animation-name:fade-in-right-lg}@-webkit-keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}@keyframes fade-out-right-lg{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}.fade-out-right-lg{-webkit-animation-name:fade-out-right-lg;animation-name:fade-out-right-lg}@-webkit-keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in{-webkit-animation-name:rotate-in;animation-name:rotate-in}@-webkit-keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}@keyframes rotate-out{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}.rotate-out{-webkit-animation-name:rotate-out;animation-name:rotate-out}@-webkit-keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-sm{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-sm{-webkit-animation-name:rotate-in-sm;animation-name:rotate-in-sm}@-webkit-keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-sm{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}.rotate-out-sm{-webkit-animation-name:rotate-out-sm;animation-name:rotate-out-sm}@-webkit-keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes rotate-in-lg{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-lg{-webkit-animation-name:rotate-in-lg;animation-name:rotate-in-lg}@-webkit-keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}@keyframes rotate-out-lg{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}.rotate-out-lg{-webkit-animation-name:rotate-out-lg;animation-name:rotate-out-lg}@-webkit-keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}@keyframes flip-in-x{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}.flip-in-x{-webkit-animation-name:flip-in-x;animation-name:flip-in-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}@keyframes flip-out-x{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}.flip-out-x{-webkit-animation-name:flip-out-x;animation-name:flip-out-x;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-nr{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}.flip-in-x-nr{-webkit-animation-name:flip-in-x-nr;animation-name:flip-in-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-nr{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}.flip-out-x-nr{-webkit-animation-name:flip-out-x-nr;animation-name:flip-out-x-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}@keyframes flip-in-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}.flip-in-x-fr{-webkit-animation-name:flip-in-x-fr;animation-name:flip-in-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes flip-out-x-fr{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}.flip-out-x-fr{-webkit-animation-name:flip-out-x-fr;animation-name:flip-out-x-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}@keyframes flip-in-y{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}.flip-in-y{-webkit-animation-name:flip-in-y;animation-name:flip-in-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}@keyframes flip-out-y{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}.flip-out-y{-webkit-animation-name:flip-out-y;animation-name:flip-out-y;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-nr{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}.flip-in-y-nr{-webkit-animation-name:flip-in-y-nr;animation-name:flip-in-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-nr{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}.flip-out-y-nr{-webkit-animation-name:flip-out-y-nr;animation-name:flip-out-y-nr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}@keyframes flip-in-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}.flip-in-y-fr{-webkit-animation-name:flip-in-y-fr;animation-name:flip-in-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}@keyframes flip-out-y-fr{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}.flip-out-y-fr{-webkit-animation-name:flip-out-y-fr;animation-name:flip-out-y-fr;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}@keyframes zoom-in{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}.zoom-in{-webkit-animation-name:zoom-in;animation-name:zoom-in}@-webkit-keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}@keyframes zoom-out{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}.zoom-out{-webkit-animation-name:zoom-out;animation-name:zoom-out}@-webkit-keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}@keyframes zoom-in-sm{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}.zoom-in-sm{-webkit-animation-name:zoom-in-sm;animation-name:zoom-in-sm}@-webkit-keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}@keyframes zoom-out-sm{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}.zoom-out-sm{-webkit-animation-name:zoom-out-sm;animation-name:zoom-out-sm}@-webkit-keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}@keyframes zoom-in-lg{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}.zoom-in-lg{-webkit-animation-name:zoom-in-lg;animation-name:zoom-in-lg}@-webkit-keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}@keyframes zoom-out-lg{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}.zoom-out-lg{-webkit-animation-name:zoom-out-lg;animation-name:zoom-out-lg}@-webkit-keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-top{0%{height:100%}to{height:0}}.overlay-slide-in-top{top:0;height:0;-webkit-animation-name:overlay-slide-in-top;animation-name:overlay-slide-in-top}@-webkit-keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-top{0%{height:0}to{height:100%}}.overlay-slide-out-top{top:0;height:100%;-webkit-animation-name:overlay-slide-out-top;animation-name:overlay-slide-out-top}@-webkit-keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}@keyframes overlay-slide-in-bottom{0%{height:100%}to{height:0}}.overlay-slide-in-bottom{bottom:0;height:0;-webkit-animation-name:overlay-slide-in-bottom;animation-name:overlay-slide-in-bottom}@-webkit-keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}@keyframes overlay-slide-out-bottom{0%{height:0}to{height:100%}}.overlay-slide-out-bottom{bottom:0;height:100%;-webkit-animation-name:overlay-slide-out-bottom;animation-name:overlay-slide-out-bottom}@-webkit-keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-left{0%{width:100%}to{width:0}}.overlay-slide-in-left{width:0;-webkit-animation-name:overlay-slide-in-left;animation-name:overlay-slide-in-left}@-webkit-keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-left{0%{width:0}to{width:100%}}.overlay-slide-out-left{left:0;width:100%;-webkit-animation-name:overlay-slide-out-left;animation-name:overlay-slide-out-left}@-webkit-keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}@keyframes overlay-slide-in-right{0%{width:100%}to{width:0}}.overlay-slide-in-right{right:0;width:0;-webkit-animation-name:overlay-slide-in-right;animation-name:overlay-slide-in-right}@-webkit-keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}@keyframes overlay-slide-out-right{0%{width:0}to{width:100%}}.overlay-slide-out-right{right:0;width:100%;-webkit-animation-name:overlay-slide-out-right;animation-name:overlay-slide-out-right} /* 5. * Swiper 4.0.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://www.idangero.us/swiper/ * * Copyright 2014-2017 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 28, 2017 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-invisible-blank-slide{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px} /******************************************************** 1. Basics 1.1. Helpers 1.2. Custom grid 1.3. Forms 2. Custom mouse cursor 3. Animsition preloader 3.1. Animsition-overlay 3.2. Loading animation 3.3. Add class after preloader 4. Header 4.1. Header logo 4.2. Header menu-open 4.3. MidnightHeader 4.4. Headroom 5. Navigation 5.1. Navigation logo 5.2. Navigation close icon 5.3. Navigation menu 5.4. Navigation links 5.5. Navigation backgrounds 5.6. Navigation backgrounds overlay 5.7. Drop down menu 5.8. Drop down close 6. Colors 6.1. Bg colors 6.2. Text colors 7. Typography 8. Buttons 8.1. To top button 8.2. Border button 8.3. Flip button 8.4. Arrow button 8.5. Scroll button 8.6. Overlay Button 9. Animations 9.1. Loading animations 9.1.1. Loading overlay animation #1 9.1.2. Loading overlay animation #2 9.1.3. Loading fade animation 9.1.4. Loading title fill animation 9.2. Scroll animations 9.2.1. Scroll overlay animation #1 9.2.2. Scroll overlay animation #2 9.2.3. Scroll fade animation 9.2.4. Scroll title fill animation 10. Hovers 11. Footer 12. Magnific popup 12.1. Popup arrows 12.2. Popup counter 12.3. Popup close 13. Min-height flex center (IE11-fix) 14. Page-head 15. Swiper slider 15.1. Home slider 15.1.1. Home slider title fill effect 15.1.2. Home slider overlay effect 15.1.3. Home slider overlay #2 effect 15.1.4. Home slider fade effect 15.2. Testimonials slider 15.3. About slider 15.4. Swiper pagination 15.4.1. Home slider pagination 15.4.2. Testimonials slider pagination 15.4.3. Portfolio full screen slider pagination 15.5. Swiper arrows 15.5.1. Home slider arrows 15.5.2. About slider arrows 15.5.3. Portfolio full screen slider arrows 15.5.4. Portfolio slider arrows 15.5.5. Portfolio columns slider arrows 15.5.6. Fullscreen home slider arrows 15.6. Portfolio full screen slider 15.6.1. Portfolio slider overlay animations 15.6.2. Portfolio slider fade animations 15.7. Portfolio slider 15.8. Portfolio columns slider 15.8.1. Portfolio columns slider hover effects 15.9. Fullscreen home slider 16. List dots 17. Services 18. Progress bar 19. Portfolio 20. Project 21. About 21.1. Team 22. Our clients 23. Video content 24. Blog 24.1. Sidebar 24.1.1. Search form 24.1.2. Categories 24.1.3. Recent-posts 24.1.4. Tegs 24.1.5. Widget-instagram 24.2. Single post 24.2.1. Post autor 24.2.2. Post comments 24.2.3. Comment form 25. Contact 25.1. Contact form 26. Video background 27. Portfolio grid 27.1. isotope buttons 27.2. Isotope item 27.3. Isotope hover 28. Typewriter home 29. Particles home 30. Price table 30.1. Price button ********************************************************/ /*-------------------------------------------------------------- 1. Basics --------------------------------------------------------------*/ ::-moz-selection { background: none; color: #65E5DB; } ::selection { background: none; color: #65E5DB; } html { padding: 0; margin: 0; } body { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Oswald", sans-serif; color: #262626; font-weight: 400; margin: 0; } blockquote, ul, ol { margin: 0px; padding: 0; } ul li, ol li { margin-bottom: 0px; } li { list-style: none; } img { vertical-align: middle; max-width: 100%; border-style: none; width: 100%; } a, i { border: none; } button { padding: 0; } button, input, select, textarea { font-size: 14px; line-height: 1.75; font-family: 'Oswald', sans-serif; } a:hover { text-decoration: none; } button, button:focus, button:hover { background: none; /*border: none;*/ } a:focus, button:focus { outline: none; } p { margin: 30px 0 0 0; font-family: 'Open Sans', sans-serif; } a { font-family: 'Oswald', sans-serif; text-decoration: none; color: inherit; } table { border-collapse: collapse; border-spacing: 0px; } td, th { padding: 5px; border: 1px solid black; text-align: center; } code, pre { padding: 10px; padding-bottom: 0; border-left: 3px solid #6FBF71; border-bottom: 1px solid transparent; overflow-x: scroll; } pre { display: block; word-break: break-all; word-wrap: break-word; } pre code { white-space: pre-wrap; } h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; margin: 0; line-height: 1.3; } h1, h2, h3 { font-weight: 700; } h4, h5 { font-weight: 600; } h6 { font-weight: 500; } h1 { font-size: 42px; } h2 { font-size: 30px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 14px; } @media only screen and (max-width: 999px) { h1 { font-size: 38px; } h2 { font-size: 28px; } h3 { font-size: 24px; } } @media only screen and (max-width: 767px) { h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 24px; } } @media only screen and (max-width: 549px) { h1 { font-size: 34px; } } /* 1.1. Helpers */ .rel-pos { position: relative; } .d-block { display: block; } .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .d-flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .flex-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .top-bottom-padding-120 { padding-top: 120px; padding-bottom: 120px; } .top-padding-120 { padding-top: 120px; } .bottom-padding-120 { padding-bottom: 120px; } .top-bottom-padding-90 { padding-top: 90px; padding-bottom: 90px; } .top-padding-90 { padding-top: 90px; } .bottom-padding-90 { padding-bottom: 90px; } .top-bottom-padding-60 { padding-top: 60px; padding-bottom: 60px; } .top-padding-60 { padding-top: 60px; } .bottom-padding-60 { padding-bottom: 60px; } .top-bottom-padding-50 { padding-top: 50px; padding-bottom: 50px; } .top-padding-50 { padding-top: 50px; } .bottom-padding-50 { padding-bottom: 50px; } .top-bottom-padding-40 { padding-top: 40px; padding-bottom: 40px; } .top-padding-40 { padding-top: 40px; } .bottom-padding-40 { padding-bottom: 40px; } .top-bottom-padding-30 { padding-top: 30px; padding-bottom: 30px; } .top-padding-30 { padding-top: 30px; } .bottom-padding-30 { padding-bottom: 30px; } .top-bottom-padding-20 { padding-top: 20px; padding-bottom: 20px; } .top-padding-20 { padding-top: 20px; } .bottom-padding-20 { padding-bottom: 20px; } .top-bottom-padding-15 { padding-top: 15px; padding-bottom: 15px; } .top-padding-15 { padding-top: 15px; } .bottom-padding-15 { padding-bottom: 15px; } .top-bottom-padding-10 { padding-top: 10px; padding-bottom: 10px; } .top-padding-10 { padding-top: 10px; } .bottom-padding-10 { padding-bottom: 10px; } .top-bottom-padding-5 { padding-top: 5px; padding-bottom: 5px; } .top-padding-5 { padding-top: 5px; } .bottom-padding-5 { padding-bottom: 5px; } .top-bottom-margin-30 { margin-top: 30px; margin-bottom: 30px; } .bottom-margin-30 { margin-bottom: 30px; } .top-margin-30 { margin-top: 30px; } .top-bottom-margin-25 { margin-top: 25px; margin-bottom: 25px; } .bottom-margin-25 { margin-bottom: 25px; } .top-margin-25 { margin-top: 25px; } .top-bottom-margin-20 { margin-top: 20px; margin-bottom: 20px; } .bottom-margin-20 { margin-bottom: 20px; } .top-margin-20 { margin-top: 20px; } .top-bottom-margin-15 { margin-top: 15px; margin-bottom: 15px; } .bottom-margin-15 { margin-bottom: 15px; } .top-margin-15 { margin-top: 15px; } .top-bottom-margin-10 { margin-top: 10px; margin-bottom: 10px; } .bottom-margin-10 { margin-bottom: 10px; } .top-margin-10 { margin-top: 10px; } .top-bottom-margin-5 { margin-top: 5px; margin-bottom: 5px; } .bottom-margin-5 { margin-bottom: 5px; } .top-margin-5 { margin-top: 5px; } .top-margin-80 { margin-top: 80px; } .top-margin-50 { margin-top: 50px; } .content-left-right-margin-50 { margin-left: 50px; margin-right: 50px; } .content-right-margin-50 { margin-right: 50px; } .content-left-margin-50 { margin-left: 50px; } .content-left-right-margin-45 { margin-left: 45px; margin-right: 45px; } .content-right-margin-45 { margin-right: 45px; } .content-left-margin-45 { margin-left: 45px; } .content-left-right-margin-40 { margin-left: 40px; margin-right: 40px; } .content-right-margin-40 { margin-right: 40px; } .content-left-margin-40 { margin-left: 40px; } .content-left-right-margin-35 { margin-left: 35px; margin-right: 35px; } .content-right-margin-35 { margin-right: 35px; } .content-left-margin-35 { margin-left: 35px; } .content-left-right-margin-30 { margin-left: 30px; margin-right: 30px; } .content-right-margin-30 { margin-right: 30px; } .content-left-margin-30 { margin-left: 30px; } .content-left-right-margin-25 { margin-left: 25px; margin-right: 25px; } .content-right-margin-25 { margin-right: 25px; } .content-left-margin-25 { margin-left: 25px; } .content-left-right-margin-20 { margin-left: 20px; margin-right: 20px; } .content-right-margin-20 { margin-right: 20px; } .content-left-margin-20 { margin-left: 20px; } .content-left-right-margin-15 { margin-left: 15px; margin-right: 15px; } .content-right-margin-15 { margin-right: 15px; } .content-left-margin-15 { margin-left: 15px; } .content-left-right-margin-10 { margin-left: 10px; margin-right: 10px; } .content-right-margin-10 { margin-right: 10px; } .content-left-margin-10 { margin-left: 10px; } .content-left-right-margin-5 { margin-left: 5px; margin-right: 5px; } .content-right-margin-5 { margin-right: 5px; } .content-left-margin-5 { margin-left: 5px; } .content-padding-l-r-20 { padding-left: 20px; padding-right: 20px; } .content-padding-bottom-20 { padding-bottom: 20px; } @media only screen and (max-width: 999px) { .response-999 .content-left-right-margin-50, .response-999 .content-left-right-margin-45, .response-999 .content-left-right-margin-40, .response-999 .content-left-right-margin-35, .response-999 .content-left-right-margin-30, .response-999 .content-left-right-margin-25, .response-999 .content-left-right-margin-20, .response-999 .content-left-right-margin-15, .response-999 .content-left-right-margin-10, .response-999 .content-left-right-margin-5 { margin-left: 0; margin-right: 0; } .response-999 .content-right-margin-50, .response-999 .content-right-margin-45, .response-999 .content-right-margin-40, .response-999 .content-right-margin-35, .response-999 .content-right-margin-30, .response-999 .content-right-margin-25, .response-999 .content-right-margin-20, .response-999 .content-right-margin-15, .response-999 .content-right-margin-10, .response-999 .content-right-margin-5 { margin-right: 0; } .response-999 .content-left-margin-50, .response-999 .content-left-margin-45, .response-999 .content-left-margin-40, .response-999 .content-left-margin-35, .response-999 .content-left-margin-30, .response-999 .content-left-margin-25, .response-999 .content-left-margin-20, .response-999 .content-left-margin-15, .response-999 .content-left-margin-10, .response-999 .content-left-margin-5 { margin-left: 0; } } @media only screen and (max-width: 767px) { .content-left-right-margin-50, .content-left-right-margin-45, .content-left-right-margin-40, .content-left-right-margin-35, .content-left-right-margin-30, .content-left-right-margin-25, .content-left-right-margin-20, .content-left-right-margin-15, .content-left-right-margin-10, .content-left-right-margin-5 { margin-left: 0; margin-right: 0; } .content-right-margin-50, .content-right-margin-45, .content-right-margin-40, .content-right-margin-35, .content-right-margin-30, .content-right-margin-25, .content-right-margin-20, .content-right-margin-15, .content-right-margin-10, .content-right-margin-5 { margin-right: 0; } .content-left-margin-50, .content-left-margin-45, .content-left-margin-40, .content-left-margin-35, .content-left-margin-30, .content-left-margin-25, .content-left-margin-20, .content-left-margin-15, .content-left-margin-10, .content-left-margin-5 { margin-left: 0; } .response-549 .content-left-right-margin-50 { margin-left: 50px; margin-right: 50px; } .response-549 .content-right-margin-50 { margin-right: 50px; } .response-549 .content-left-margin-50 { margin-left: 50px; } .response-549 .content-left-right-margin-45 { margin-left: 45px; margin-right: 45px; } .response-549 .content-right-margin-45 { margin-right: 45px; } .response-549 .content-left-margin-45 { margin-left: 45px; } .response-549 .content-left-right-margin-40 { margin-left: 40px; margin-right: 40px; } .response-549 .content-right-margin-40 { margin-right: 40px; } .response-549 .content-left-margin-40 { margin-left: 40px; } .response-549 .content-left-right-margin-35 { margin-left: 35px; margin-right: 35px; } .response-549 .content-right-margin-35 { margin-right: 35px; } .response-549 .content-left-margin-35 { margin-left: 35px; } .response-549 .content-left-right-margin-30 { margin-left: 30px; margin-right: 30px; } .response-549 .content-right-margin-30 { margin-right: 30px; } .response-549 .content-left-margin-30 { margin-left: 30px; } .response-549 .content-left-right-margin-25 { margin-left: 25px; margin-right: 25px; } .response-549 .content-right-margin-25 { margin-right: 25px; } .response-549 .content-left-margin-25 { margin-left: 25px; } .response-549 .content-left-right-margin-20 { margin-left: 20px; margin-right: 20px; } .response-549 .content-right-margin-20 { margin-right: 20px; } .response-549 .content-left-margin-20 { margin-left: 20px; } .response-549 .content-left-right-margin-15 { margin-left: 15px; margin-right: 15px; } .response-549 .content-right-margin-15 { margin-right: 15px; } .response-549 .content-left-margin-15 { margin-left: 15px; } .response-549 .content-left-right-margin-10 { margin-left: 10px; margin-right: 10px; } .response-549 .content-right-margin-10 { margin-right: 10px; } .response-549 .content-left-margin-10 { margin-left: 10px; } .response-549 .content-left-right-margin-5 { margin-left: 5px; margin-right: 5px; } .response-549 .content-right-margin-5 { margin-right: 5px; } .response-549 .content-left-margin-5 { margin-left: 5px; } } @media only screen and (max-width: 549px) { .response-549 .content-left-right-margin-50, .response-549 .content-left-right-margin-45, .response-549 .content-left-right-margin-40, .response-549 .content-left-right-margin-35, .response-549 .content-left-right-margin-30, .response-549 .content-left-right-margin-25, .response-549 .content-left-right-margin-20, .response-549 .content-left-right-margin-15, .response-549 .content-left-right-margin-10, .response-549 .content-left-right-margin-5 { margin-left: 0; margin-right: 0; } .response-549 .content-right-margin-50, .response-549 .content-right-margin-45, .response-549 .content-right-margin-40, .response-549 .content-right-margin-35, .response-549 .content-right-margin-30, .response-549 .content-right-margin-25, .response-549 .content-right-margin-20, .response-549 .content-right-margin-15, .response-549 .content-right-margin-10, .response-549 .content-right-margin-5 { margin-right: 0; } .response-549 .content-left-margin-50, .response-549 .content-left-margin-45, .response-549 .content-left-margin-40, .response-549 .content-left-margin-35, .response-549 .content-left-margin-30, .response-549 .content-left-margin-25, .response-549 .content-left-margin-20, .response-549 .content-left-margin-15, .response-549 .content-left-margin-10, .response-549 .content-left-margin-5 { margin-left: 0; } .content-padding-l-r-20 { padding-left: 10px; padding-right: 10px; } } /* 1.2. Custom grid */ .container { max-width: 1350px; width: calc(100% - 80px); margin-left: auto; margin-right: auto; height: auto; position: relative; } .container.full { max-width: 100%; } .container.small { max-width: 960px; } .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .flex-container.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-flow: wrap-reverse; flex-flow: wrap-reverse; } .one-column, .two-columns, .three-columns, .four-columns, .five-columns, .six-columns, .seven-columns, .eight-columns, .nine-columns, .ten-columns, .eleven-columns, .twelve-columns { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; } .one-column { -ms-flex-preferred-size: 8.33%; flex-basis: 8.33%; } .two-columns { -ms-flex-preferred-size: 16.66%; flex-basis: 16.66%; } .three-columns { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .four-columns { -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } .five-columns { -ms-flex-preferred-size: 41.66%; flex-basis: 41.66%; } .six-columns { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .seven-columns { -ms-flex-preferred-size: 58.33%; flex-basis: 58.33%; } .eight-columns { -ms-flex-preferred-size: 66.66%; flex-basis: 66.66%; } .nine-columns { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .ten-columns { -ms-flex-preferred-size: 83.33%; flex-basis: 83.33%; } .eleven-columns { -ms-flex-preferred-size: 91.66%; flex-basis: 91.66%; } .twelve-columns { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .one-offset { margin-left: 8.33%; } .two-offset { margin-left: 16.66%; } .three-offset { margin-left: 25%; } .four-offset { margin-left: 33.33%; } .five-offset { margin-left: 41.66%; } .six-offset { margin-left: 50%; } .seven-offset { margin-left: 58.33%; } .eight-offset { margin-left: 66.66%; } .nine-offset { margin-left: 75%; } .ten-offset { margin-left: 83.33%; } .eleven-offset { margin-left: 91.66%; } @media only screen and (max-width: 999px) { .container { width: calc(100% - 40px); } .response-999 .one-column, .response-999 .two-columns, .response-999 .three-columns, .response-999 .four-columns, .response-999 .five-columns, .response-999 .six-columns, .response-999 .seven-columns, .response-999 .eight-columns, .response-999 .nine-columns, .response-999 .ten-columns, .response-999 .eleven-columns, .response-999 .twelve-columns { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .response-999 .one-offset, .response-999 .two-offset, .response-999 .three-offset, .response-999 .four-offset, .response-999 .five-offset, .response-999 .six-offset, .response-999 .seven-offset, .response-999 .eight-offset, .response-999 .nine-offset, .response-999 .ten-offset, .response-999 .eleven-offset { margin-left: 0; } } @media only screen and (max-width: 767px) { .one-column, .two-columns, .three-columns, .four-columns, .five-columns, .six-columns, .seven-columns, .eight-columns, .nine-columns, .ten-columns, .eleven-columns, .twelve-columns { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .one-offset, .two-offset, .three-offset, .four-offset, .five-offset, .six-offset, .seven-offset, .eight-offset, .nine-offset, .ten-offset, .eleven-offset { margin-left: 0; } .response-549 .one-column { -ms-flex-preferred-size: 8.33%; flex-basis: 8.33%; } .response-549 .two-columns { -ms-flex-preferred-size: 16.66%; flex-basis: 16.66%; } .response-549 .three-columns { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .response-549 .four-columns { -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } .response-549 .five-columns { -ms-flex-preferred-size: 41.66%; flex-basis: 41.66%; } .response-549 .six-columns { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .response-549 .seven-columns { -ms-flex-preferred-size: 58.33%; flex-basis: 58.33%; } .response-549 .eight-columns { -ms-flex-preferred-size: 66.66%; flex-basis: 66.66%; } .response-549 .nine-columns { -ms-flex-preferred-size: 75%; flex-basis: 75%; } .response-549 .ten-columns { -ms-flex-preferred-size: 83.33%; flex-basis: 83.33%; } .response-549 .eleven-columns { -ms-flex-preferred-size: 91.66%; flex-basis: 91.66%; } .response-549 .twelve-columns { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .response-549 .one-offset { margin-left: 8.33%; } .response-549 .two-offset { margin-left: 16.66%; } .response-549 .three-offset { margin-left: 25%; } .response-549 .four-offset { margin-left: 33.33%; } .response-549 .five-offset { margin-left: 41.66%; } .response-549 .six-offset { margin-left: 50%; } .response-549 .seven-offset { margin-left: 58.33%; } .response-549 .eight-offset { margin-left: 66.66%; } .response-549 .nine-offset { margin-left: 75%; } .response-549 .ten-offset { margin-left: 83.33%; } .response-549 .eleven-offset { margin-left: 91.66%; } } @media only screen and (max-width: 549px) { .container { width: calc(100% - 20px); } .response-549 .one-column, .response-549 .two-columns, .response-549 .three-columns, .response-549 .four-columns, .response-549 .five-columns, .response-549 .six-columns, .response-549 .seven-columns, .response-549 .eight-columns, .response-549 .nine-columns, .response-549 .ten-columns, .response-549 .eleven-columns, .response-549 .twelve-columns { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .response-549 .one-offset, .response-549 .two-offset, .response-549 .three-offset, .response-549 .four-offset, .response-549 .five-offset, .response-549 .six-offset, .response-549 .seven-offset, .response-549 .eight-offset, .response-549 .nine-offset, .response-549 .ten-offset, .response-549 .eleven-offset { margin-left: 0; } } /* 1.3. Forms */ textarea{ background: none; resize:vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { vertical-align:middle; outline: none; background: none; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus { outline: none; } input[type="submit"] { text-decoration: none; border:none; background: none; outline: none; } input[type="submit"]:hover { background: none; outline: none; } ::-webkit-input-placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } :-moz-placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } ::-moz-placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } :-ms-input-placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } ::-ms-input-placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } ::placeholder { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 12px; font-weight: 400; letter-spacing: 2px; opacity: 1; color: #b6b7b8; } /*-------------------------------------------------------------- 2. Custom mouse cursor --------------------------------------------------------------*/ .pointer { position: fixed; top: 50%; left: -100px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 9999; -webkit-transition-property: width, height, background; -o-transition-property: width, height, background; transition-property: width, height, background; -webkit-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(.2, .96, .34, 1); -o-transition-timing-function: cubic-bezier(.2, .96, .34, 1); transition-timing-function: cubic-bezier(.2, .96, .34, 1); border-radius: 50%; background: #ef0d33; overflow: hidden; } body.out .pointer { width: 0; height: 0; } .pointer.large { width: 65px; height: 65px; background: rgba(239,13,51,.15); -webkit-box-shadow: 0 0 30px rgba(239,13,51, 0.8); box-shadow: 0 0 30px rgba(239,13,51, 0.8); } .pointer.small { width: 25px; height: 25px; background: rgba(239,13,51,0); -webkit-box-shadow: 0 0 30px #ef0d33; box-shadow: 0 0 30px #ef0d33; } .pointer.right { width: 70px; height: 70px; background: rgba(239,13,51,0); border: 2px solid #ef0d33; } .pointer.zoom, .pointer.open { width: 80px; height: 80px; background: rgba(239,13,51,0); border: 2px solid #ef0d33; } .pointer .fa-long-arrow-alt-right, .pointer .fa-search, .pointer .fa-link { color: #ef0d33; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-100%, -50%); -ms-transform: translate(-100%, -50%); transform: translate(-100%, -50%); opacity: 0; -webkit-transition: .4s cubic-bezier(.23, 1, .32, 1); -o-transition: .4s cubic-bezier(.23, 1, .32, 1); transition: .4s cubic-bezier(.23, 1, .32, 1); } .pointer .fa-search, .pointer .fa-link { -webkit-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } .pointer.right .fa-long-arrow-alt-right { opacity: 1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .pointer.zoom .fa-search, .pointer.open .fa-link { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .pointer.black { background: #1b2a2f; } .pointer.black.large { background: rgba(27,42,47,.4); -webkit-box-shadow: 0 0 30px black; box-shadow: 0 0 30px black; } .pointer.black.small { background: rgba(27,42,47,.5); -webkit-box-shadow: 0 0 30px black; box-shadow: 0 0 30px black; } .pointer.black.right { background: rgba(27,42,47,0); border: 2px solid #1b2a2f; } .pointer.black.zoom, .pointer.black.open { background: rgba(27,42,47,0); border: 2px solid #1b2a2f; } .pointer.black .fa-long-arrow-alt-right, .pointer.black .fa-search, .pointer.black .fa-link { color: #1b2a2f; } .touch .pointer { display: none; } /*-------------------------------------------------------------- 3. Animsition preloader --------------------------------------------------------------*/ body, .animsition-overlay { overflow: hidden; } .animsition-overlay { z-index: 2; } /* 3.1. Animsition-overlay */ .animsition-overlay-slide { background-color: transparent; } .loader:before, .loader:after { content: ''; width: 100%; height: 100%; position: fixed; top: 0; z-index: 99; background: #111517; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); } .loader:before { left: 100%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } .loader:after { left: -100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); visibility: hidden; -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } /* 3.2. Loading animation */ .loading { position: fixed; top: calc(50% - 50px); left: calc(50% - 50px); visibility: visible; -webkit-transition: .5s cubic-bezier(.755, .05, .855, .06); -o-transition: .5s cubic-bezier(.755, .05, .855, .06); transition: .5s cubic-bezier(.755, .05, .855, .06); z-index: 101; width: 120px; height: 120px; } .loading:before { content: ''; width: 100%; height: 100%; border: 1px solid #111517; border-left-color: #65E5DB; -webkit-animation: 1.2s loading-anim cubic-bezier(.77, 0, .175, 1) infinite both; animation: 1.2s loading-anim cubic-bezier(.77, 0, .175, 1) infinite both; border-radius: 50%; display: block; } .logo-loading { width: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes loading-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-anim { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 3.3. Add class after preloader */ body.in { overflow: visible; overflow-x: hidden; } .loader.in:before { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); visibility: hidden; } .loader.out:after { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); visibility: visible; } body.in .loading { opacity: 0; visibility: hidden; } /*-------------------------------------------------------------- 4. Header --------------------------------------------------------------*/ .fixed-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; width: 100%; height: auto; } .header-flex-box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* 4.1. Header logo */ .logo { width: 100px; margin: 20px 0 0 40px; } .logo-img-box { position: relative; overflow: hidden; } .logo img { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: .5s cubic-bezier(.77, 0, .175, 1); -o-transition: .5s cubic-bezier(.77, 0, .175, 1); transition: .5s cubic-bezier(.77, 0, .175, 1); } body.active .logo img { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /* 4.2. Header menu-open */ .menu-open { width: 40px; height: 22px; margin: 40px 40px 0 0; cursor: pointer; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: .5s cubic-bezier(.77, 0, .175, 1); -o-transition: .5s cubic-bezier(.77, 0, .175, 1); transition: .5s cubic-bezier(.77, 0, .175, 1); } body.active .menu-open { cursor: pointer; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .menu-open:before { content: ''; position: absolute; width: 40px; height: 2px; left: 0; top: 50%; cursor: pointer; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: translateY(-50%) scaleX(0); -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); -webkit-transition: .4s cubic-bezier(.77, 0, .175, 1); -o-transition: .4s cubic-bezier(.77, 0, .175, 1); transition: .4s cubic-bezier(.77, 0, .175, 1); } body.active .menu-open:before { -webkit-transform: translateY(-50%) scaleX(1); -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } .hamburger:before, .hamburger:after { content: ''; position: absolute; width: 40px; height: 2px; -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); left: 0; top: 0; -webkit-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } .hamburger:after { top: auto; bottom: 0; } .menu-open.active .hamburger:after { -webkit-transition: .3s cubic-bezier(.23, 1, .32, 1); -o-transition: .3s cubic-bezier(.23, 1, .32, 1); transition: .3s cubic-bezier(.23, 1, .32, 1); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .menu-open.active .hamburger:before { -webkit-transition: .3s cubic-bezier(.23, 1, .32, 1); -o-transition: .3s cubic-bezier(.23, 1, .32, 1); transition: .3s cubic-bezier(.23, 1, .32, 1); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } /* 4.3. MidnightHeader */ .logo-black { position: absolute; top: 0; left: 0; z-index: 2; } .midnightHeader.default .logo-black, .midnightHeader.black .logo-white { opacity: 0; } .midnightHeader.black .logo-black, .midnightHeader.default .logo-white { opacity: 1; } .midnightHeader.default .menu-open:before, .midnightHeader.default .hamburger:before, .midnightHeader.default .hamburger:after { background: #50007F; } .midnightHeader.black .menu-open:before, .midnightHeader.black .hamburger:before, .midnightHeader.black .hamburger:after { background: black; } /* 4.4. Headroom */ .headroom { -webkit-transition: -webkit-transform .6s cubic-bezier(.755, .05, .855, .06); transition: -webkit-transform .6s cubic-bezier(.755, .05, .855, .06); -o-transition: transform .6s cubic-bezier(.755, .05, .855, .06); transition: transform .6s cubic-bezier(.755, .05, .855, .06); transition: transform .6s cubic-bezier(.755, .05, .855, .06), -webkit-transform .6s cubic-bezier(.755, .05, .855, .06); will-change: transform; } .headroom--pinned { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .headroom--unpinned { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } @media only screen and (max-width: 999px) { .logo { margin: 20px 0 0 20px; } .menu-open { margin: 20px 20px 0 0; } } @media only screen and (max-width: 549px) { .logo { margin: 10px 0 0 10px; } .menu-open { margin: 10px 10px 0 0; } } /*-------------------------------------------------------------- 5. Navigation --------------------------------------------------------------*/ .nav-container { width: 100%; height: 100%; min-height: 100vh; overflow: hidden; margin: 0; padding: 0; position: fixed; top: 0; left: 100%; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 100; -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav-container.active { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* 5.1. Navigation logo */ .nav-logo { position: absolute; width: 100px; top: 20px; left: calc(50% + 40px); overflow: hidden; z-index: 3; } .nav-logo img { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: .7s cubic-bezier(.77, 0, .175, 1); -o-transition: .7s cubic-bezier(.77, 0, .175, 1); transition: .7s cubic-bezier(.77, 0, .175, 1); } .nav-container.active .nav-logo img { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } body.out .nav-container.active .nav-logo img { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* 5.2. Navigation close icon */ .menu-close { position: absolute; top: 60px; right: 40px; width: 40px; height: 22px; z-index: 3; -webkit-transition: .5s cubic-bezier(.77, 0, .175, 1); -o-transition: .5s cubic-bezier(.77, 0, .175, 1); transition: .5s cubic-bezier(.77, 0, .175, 1); } body.out .nav-container.active .menu-close { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .menu-close:before, .menu-close:after { content: ''; width: 40px; height: 2px; background: white; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition: .7s cubic-bezier(.77, 0, .175, 1); -o-transition: .7s cubic-bezier(.77, 0, .175, 1); transition: .7s cubic-bezier(.77, 0, .175, 1); } .nav-container.active .menu-close:before { cursor: pointer; -webkit-transform: translateY(-50%) rotate(225deg); -ms-transform: translateY(-50%) rotate(225deg); transform: translateY(-50%) rotate(225deg); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .nav-container.active .menu-close:after { cursor: pointer; -webkit-transform: translateY(-50%) rotate(135deg); -ms-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } body.out .nav-container.active .menu-close:after, body.out .nav-container.active .menu-close:before { -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* 5.3. Navigation menu */ .nav-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50%; height: 100%; margin-left: calc(50% - 2px); position: relative; border-left: 2px solid #111517; } .nav-box { margin: 8px 0; padding: 0; overflow: hidden; } /* 5.4. Navigation links */ .nav-box a { -webkit-transform: translateY(104%); -ms-transform: translateY(104%); transform: translateY(104%); -webkit-transition: .7s cubic-bezier(.77, 0, .175, 1); -o-transition: .7s cubic-bezier(.77, 0, .175, 1); transition: .7s cubic-bezier(.77, 0, .175, 1); margin: 0; padding: 0; display: inline-block; } .nav-container li:nth-last-child(1) a, .nav-container li li:nth-last-child(1) a { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .nav-container li:nth-last-child(2) a, .nav-container li li:nth-last-child(2) a { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .nav-container li:nth-last-child(3) a, .nav-container li li:nth-last-child(3) a { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .nav-container li:nth-last-child(4) a, .nav-container li li:nth-last-child(4) a { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .nav-container li:nth-last-child(5) a, .nav-container li li:nth-last-child(5) a { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .nav-container li:nth-last-child(6) a, .nav-container li li:nth-last-child(6) a { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .nav-container li:nth-last-child(7) a, .nav-container li li:nth-last-child(7) a { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .nav-container li:nth-last-child(8) a, .nav-container li li:nth-last-child(8) a { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .nav-container li:nth-last-child(9) a, .nav-container li li:nth-last-child(9) a { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .nav-container li:nth-last-child(10) a, .nav-container li li:nth-last-child(10) a { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .nav-container li:nth-last-child(11) a, .nav-container li li:nth-last-child(11) a { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .nav-container li:nth-last-child(12) a, .nav-container li li:nth-last-child(12) a { -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } .nav-container.active a { -webkit-transition: 1.5s cubic-bezier(.23, 1, .32, 1); -o-transition: 1.5s cubic-bezier(.23, 1, .32, 1); transition: 1.5s cubic-bezier(.23, 1, .32, 1); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .nav-container.active li:nth-child(1) a, .nav-container.active li li:nth-child(1) a { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .nav-container.active li:nth-child(2) a, .nav-container.active li li:nth-child(2) a { -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } .nav-container.active li:nth-child(3) a, .nav-container.active li li:nth-child(3) a { -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .nav-container.active li:nth-child(4) a, .nav-container.active li li:nth-child(4) a { -webkit-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } .nav-container.active li:nth-child(5) a, .nav-container.active li li:nth-child(5) a { -webkit-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } .nav-container.active li:nth-child(6) a, .nav-container.active li li:nth-child(6) a { -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } .nav-container.active li:nth-child(7) a, .nav-container.active li li:nth-child(7) a { -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } .nav-container.active li:nth-child(8) a, .nav-container.active li li:nth-child(8) a { -webkit-transition-delay: 1.7s; -o-transition-delay: 1.7s; transition-delay: 1.7s; } .nav-container.active li:nth-child(9) a, .nav-container.active li li:nth-child(9) a { -webkit-transition-delay: 1.8s; -o-transition-delay: 1.8s; transition-delay: 1.8s; } .nav-container.active li:nth-child(10) a, .nav-container.active li li:nth-child(10) a { -webkit-transition-delay: 1.9s; -o-transition-delay: 1.9s; transition-delay: 1.9s; } .nav-container.active li:nth-child(11) a, .nav-container.active li li:nth-child(11) a { -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } .nav-container.active li:nth-child(12) a, .nav-container.active li li:nth-child(12) a { -webkit-transition-delay: 2.1s; -o-transition-delay: 2.1s; transition-delay: 2.1s; } body.out .nav-container.active a { -webkit-transition: 1s cubic-bezier(.755, .05, .855, .06); -o-transition: 1s cubic-bezier(.755, .05, .855, .06); transition: 1s cubic-bezier(.755, .05, .855, .06); -webkit-transform: translateY(104%); -ms-transform: translateY(104%); transform: translateY(104%); } body.out .nav-container.active li:nth-last-child(1) a, body.out .nav-container.active li li:nth-last-child(1) a { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } body.out .nav-container.active li:nth-last-child(2) a, body.out .nav-container.active li li:nth-last-child(2) a { -webkit-transition-delay: .04s; -o-transition-delay: .04s; transition-delay: .04s; } body.out .nav-container.active li:nth-last-child(3) a, body.out .nav-container.active li li:nth-last-child(3) a { -webkit-transition-delay: .08s; -o-transition-delay: .08s; transition-delay: .08s; } body.out .nav-container.active li:nth-last-child(4) a, body.out .nav-container.active li li:nth-last-child(4) a { -webkit-transition-delay: .12s; -o-transition-delay: .12s; transition-delay: .12s; } body.out .nav-container.active li:nth-last-child(5) a, body.out .nav-container.active li li:nth-last-child(5) a { -webkit-transition-delay: .16s; -o-transition-delay: .16s; transition-delay: .16s; } body.out .nav-container.active li:nth-last-child(6) a, body.out .nav-container.active li li:nth-last-child(6) a { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } body.out .nav-container.active li:nth-last-child(7) a, body.out .nav-container.active li li:nth-last-child(7) a { -webkit-transition-delay: .24s; -o-transition-delay: .24s; transition-delay: .24s; } body.out .nav-container.active li:nth-last-child(8) a, body.out .nav-container.active li li:nth-last-child(8) a { -webkit-transition-delay: .28s; -o-transition-delay: .28s; transition-delay: .28s; } body.out .nav-container.active li:nth-last-child(9) a, body.out .nav-container.active li li:nth-last-child(9) a { -webkit-transition-delay: .32s; -o-transition-delay: .32s; transition-delay: .32s; } body.out .nav-container.active li:nth-last-child(10) a, body.out .nav-container.active li li:nth-last-child(10) a { -webkit-transition-delay: .36s; -o-transition-delay: .36s; transition-delay: .36s; } body.out .nav-container.active li:nth-last-child(11) a, body.out .nav-container.active li li:nth-last-child(11) a { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } body.out .nav-container.active li:nth-last-child(12) a, body.out .nav-container.active li li:nth-last-child(12) a { -webkit-transition-delay: .44s; -o-transition-delay: .44s; transition-delay: .44s; } .nav-btn { position: relative; text-transform: uppercase; margin: 0; padding: 0; font-size: 55px; line-height: 1; font-weight: 500; font-family: 'Oswald', sans-serif; color: white; white-space: nowrap; } .nav-btn:before { content: attr(data-text); position: absolute; top: 50%; color: #65E5DB; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: .5s cubic-bezier(.755, .05, .855, .06); -o-transition: .5s cubic-bezier(.755, .05, .855, .06); transition: .5s cubic-bezier(.755, .05, .855, .06); width: 0%; white-space: nowrap; overflow: hidden; } .nav-btn.active:before { width: 100%; } a:hover .nav-btn:before { width: 100%; } /* 5.5. Navigation backgrounds */ .nav-bg { position: absolute; top: 0; right: 100%; width: calc(100% - 1px); height: 100%; pointer-events: none; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: -2; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 0; -webkit-transition: .9s cubic-bezier(.77, 0, .175, 1); -o-transition: .9s cubic-bezier(.77, 0, .175, 1); transition: .9s cubic-bezier(.77, 0, .175, 1); } .nav-bg-change.active .nav-bg { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* 5.6. Navigation backgrounds overlay */ .nav-menu:before { content: ''; width: 103%; height: 100%; position: absolute; top: 0; left: 0; background: #111517; -webkit-transition: .7s cubic-bezier(.86, 0, .07, 1); -o-transition: .7s cubic-bezier(.86, 0, .07, 1); transition: .7s cubic-bezier(.86, 0, .07, 1); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; z-index: -1; -webkit-transform: translateX(-100%) translateY(0); -ms-transform: translateX(-100%) translateY(0); transform: translateX(-100%) translateY(0); } .nav-container.active .nav-menu:before { -webkit-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } body.out .nav-container.active .nav-menu:before { -webkit-transform: translateX(-100%) translateY(0); -ms-transform: translateX(-100%) translateY(0); transform: translateX(-100%) translateY(0); -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } /* 5.7. Drop down menu */ .dropdown { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; pointer-events: none; z-index: 2; } .dropdown.active { pointer-events: auto; } .dropdown .nav-btn { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); pointer-events: none; display: inline-block; } .dropdown.active .nav-btn { pointer-events: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .nav-link .nav-btn { -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: inline-block; } .nav-link.done .nav-btn { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .nav-link.done { pointer-events: none; } li:nth-last-child(1) .nav-link.done .nav-btn, .dropdown li:nth-last-child(1) .nav-btn { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } li:nth-last-child(2) .nav-link.done .nav-btn, .dropdown li:nth-last-child(2) .nav-btn { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } li:nth-last-child(3) .nav-link.done .nav-btn, .dropdown li:nth-last-child(3) .nav-btn { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } li:nth-last-child(4) .nav-link.done .nav-btn, .dropdown li:nth-last-child(4) .nav-btn { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } li:nth-last-child(5) .nav-link.done .nav-btn, .dropdown li:nth-last-child(5) .nav-btn { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } li:nth-last-child(6) .nav-link.done .nav-btn, .dropdown li:nth-last-child(6) .nav-btn { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } li:nth-last-child(7) .nav-link.done .nav-btn, .dropdown li:nth-last-child(7) .nav-btn { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } li:nth-last-child(8) .nav-link.done .nav-btn, .dropdown li:nth-last-child(8) .nav-btn { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } li:nth-last-child(9) .nav-link.done .nav-btn, .dropdown li:nth-last-child(9) .nav-btn { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } li:nth-last-child(10) .nav-link.done .nav-btn, .dropdown li:nth-last-child(10) .nav-btn { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } li:nth-last-child(11) .nav-link.done .nav-btn, .dropdown li:nth-last-child(11) .nav-btn { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } li:nth-last-child(12) .nav-link.done .nav-btn, .dropdown li:nth-last-child(12) .nav-btn { -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } li:nth-last-child(1) .nav-link .nav-btn, .dropdown.active li:nth-last-child(1) .nav-btn { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } li:nth-last-child(2) .nav-link .nav-btn, .dropdown.active li:nth-last-child(2) .nav-btn { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } li:nth-last-child(3) .nav-link .nav-btn, .dropdown.active li:nth-last-child(3) .nav-btn { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } li:nth-last-child(4) .nav-link .nav-btn, .dropdown.active li:nth-last-child(4) .nav-btn { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } li:nth-last-child(5) .nav-link .nav-btn, .dropdown.active li:nth-last-child(5) .nav-btn { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } li:nth-last-child(6) .nav-link .nav-btn, .dropdown.active li:nth-last-child(6) .nav-btn { -webkit-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } li:nth-last-child(7) .nav-link .nav-btn, .dropdown.active li:nth-last-child(7) .nav-btn { -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } li:nth-last-child(8) .nav-link .nav-btn, .dropdown.active li:nth-last-child(8) .nav-btn { -webkit-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } li:nth-last-child(9) .nav-link .nav-btn, .dropdown.active li:nth-last-child(9) .nav-btn { -webkit-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } li:nth-last-child(10) .nav-link .nav-btn, .dropdown.active li:nth-last-child(10) .nav-btn { -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } li:nth-last-child(11) .nav-link .nav-btn, .dropdown.active li:nth-last-child(11) .nav-btn { -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } li:nth-last-child(12) .nav-link .nav-btn, .dropdown.active li:nth-last-child(12) .nav-btn { -webkit-transition-delay: 1.7s; -o-transition-delay: 1.7s; transition-delay: 1.7s; } /* 5.8. Drop down close */ .dropdown-close-box { width: 60px; height: 30px; position: absolute; left: calc(50% + 40px); top: 50%; z-index: 3; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; } .dropdown-close { width: 100%; height: 100%; position: relative; overflow: hidden; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: .5s cubic-bezier(.165, .84, .44, 1); -o-transition: .5s cubic-bezier(.165, .84, .44, 1); transition: .5s cubic-bezier(.165, .84, .44, 1); } .nav-container.active .dropdown-close.active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } body.out .nav-container.active .dropdown-close.active { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .dropdown-close span { width: 100%; height: 100%; position: relative; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); -webkit-transform: translateX(22px); -ms-transform: translateX(22px); transform: translateX(22px); z-index: 3; display: block; } .dropdown-close-box:hover .dropdown-close span { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .dropdown-close span:before { content: ''; width: 18px; height: 18px; border-bottom: 2px solid #ef0d33; border-left: 2px solid #ef0d33; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 5px; left: 4px; display: block; } .dropdown-close span:after { content: ''; width: 100%; height: 2px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; position: absolute; top: 50%; left: 0; background: #ef0d33; } .dropdown-close:before { content: ''; width: 2px; height: 50%; position: absolute; top: 50%; right: 0; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: .5s cubic-bezier(.165, .84, .44, 1); -o-transition: .5s cubic-bezier(.165, .84, .44, 1); transition: .5s cubic-bezier(.165, .84, .44, 1); background: #ef0d33; } .dropdown-close-box:hover .dropdown-close:before { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } @media only screen and (max-width: 1399px) { .nav-box { margin: 6px 0; } .nav-btn { font-size: 50px; } } @media only screen and (max-width: 1199px) { .nav-box { margin: 5px 0; } .nav-btn { font-size: 45px; } } @media only screen and (max-width: 999px) { .nav-logo { left: 20px; } .menu-close { right: 20px; } .dropdown-close-box { left: calc(50% + 20px); top: 20px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .nav-box { margin: 4px 0; } .nav-btn { font-size: 40px; } } @media only screen and (max-width: 767px) { .nav-btn { font-size: 30px; } } @media only screen and (max-width: 549px) { .nav-logo { left: 10px; top: 10px; } .menu-close { right: 10px; top: 10px; } .dropdown-close-box { left: calc(50% + 10px); top: 10px; } .nav-btn { font-size: 25px; } } @media only screen and (orientation: portrait) { .nav-logo { left: 40px; } .nav-menu { width: 100%; height: 50%; margin-left: 0; margin-bottom: calc(50% - 2px); border-left: none; border-bottom: 2px solid #111517; } .nav-bg { top: 100%; right: 0; width: 100%; height: calc(100% - 1px); } .dropdown-close-box { left: 40px; top: 25%; } .nav-menu:before { width: 100%; height: 103%; top: 100%; -webkit-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } .nav-container.active .nav-menu:before { -webkit-transform: translateX(0) translateY(-100%); -ms-transform: translateX(0) translateY(-100%); transform: translateX(0) translateY(-100%); } body.out .nav-container.active .nav-menu:before { -webkit-transform: translateX(0) translateY(0); -ms-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } } @media only screen and (max-width: 999px) and (orientation: portrait) { .nav-logo { left: 20px; } .dropdown-close-box { left: 20px; } } @media only screen and (max-width: 549px) and (orientation: portrait) { .nav-logo { left: 10px; } .dropdown-close-box { left: 10px; top: 50%; } .nav-menu { height: 100%; margin-left: 0; margin-bottom: 0; border-bottom: none; } .nav-bg { display: none; } .nav-menu:before { content: normal; } } /*-------------------------------------------------------------- 6. Colors --------------------------------------------------------------*/ body, .animsition-overlay { background: #ffffff; } /* 6.1. Bg colors */ .light-bg-1 { background: #f5f5f5; } .light-bg-2 { background: #f0f0f0; } .dark-bg-1 { background: #111517; } .dark-bg-2 { background: #1b2a2f; } .dark-bg-3 { background: #50007F; } .red-bg { background: #ef0d33; } .white-bg { background: #fff; } /* 6.2. Text colors */ .text-color-0 { color: black; } .text-color-1 { color: #262626; } .text-color-2 { color: #888888; } .text-color-3 { color: #b6b7b8; } .text-color-4 { color: white; } .text-color-5 { color: #bcbdbd; } .text-color-6 { color: #dae9f4; } .text-color-7 { color: #50007F; } .text-color-8 { color: #65E5DB; } .red-color { color: #ef0d33; } .horse { width: 32px; height: 36px; background-repeat: no-repeat; } .white-horse { width: 59px; height: 62px; margin-bottom: 10px; background-repeat: no-repeat; } /*-------------------------------------------------------------- 7. Typography --------------------------------------------------------------*/ .italic-text { font-style: italic; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-up { text-transform: uppercase; } .bold700-text { font-weight: 700 !important; } .bold600-text { font-weight: 600 !important; } .medium-text { font-weight: 500 !important; } .regular-text { font-weight: 400 !important; } .light-text { font-weight: 300 !important; } .open-sans-text { font-family: 'Open Sans', sans-serif !important; } .oswald-text { font-family: 'Oswald', sans-serif !important; } .text-trans-none { text-transform: none !important; } .text-spacing1 { letter-spacing: 1px !important; } .text-spacing2 { letter-spacing: 2px !important; } .text-spacing3 { letter-spacing: 3px !important; } .text-spacing4 { letter-spacing: 4px !important; } .text-spacing5 { letter-spacing: 5px !important; } .text-spacing0 { letter-spacing: 0px !important; } .text-spacing-1 { letter-spacing: -1px !important; } .text-spacing-2 { letter-spacing: -2px !important; } .text-height-05 { line-height: .5 !important; } .text-height-06 { line-height: .6 !important; } .text-height-07 { line-height: .7 !important; } .text-height-08 { line-height: .8 !important; } .text-height-09 { line-height: .9 !important; } .text-height-10 { line-height: 1 !important; } .text-height-11 { line-height: 1.1 !important; } .text-height-12 { line-height: 1.2 !important; } .text-height-13 { line-height: 1.3 !important; } .text-height-14 { line-height: 1.4 !important; } .text-height-15 { line-height: 1.5 !important; } .text-height-16 { line-height: 1.6 !important; } .text-height-17 { line-height: 1.7 !important; } .text-height-18 { line-height: 1.8 !important; } .text-height-19 { line-height: 1.9 !important; } .text-height-20 { line-height: 2 !important; } .title-style { text-transform: uppercase; font-weight: 500; letter-spacing: 2px; font-family: 'Oswald', sans-serif; line-height: 1; font-size: 32px; } .small-title { text-transform: uppercase; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0px; font-family: 'Open Sans', sans-serif; } .small-title-oswald { text-transform: uppercase; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0px; font-family: 'Oswald', sans-serif; } .xsmall-title-oswald { text-transform: uppercase; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: 1px; font-family: 'Oswald', sans-serif; } .medium-title { text-transform: uppercase; font-size: 50px; line-height: 1.13; font-weight: 500; letter-spacing: 3px; font-family: 'Oswald', sans-serif; } .large-title { text-transform: uppercase; font-size: 70px; line-height: 1; font-weight: 600; letter-spacing: -2px; font-family: 'Oswald', sans-serif; } .large-title-bold { text-transform: uppercase; font-size: 70px; line-height: 1; font-weight: 700; letter-spacing: -2px; font-family: 'Oswald', sans-serif; } .xlarge-title { text-transform: uppercase; font-size: 75px; line-height: 1; font-weight: 700; letter-spacing: -2px; font-family: 'Oswald', sans-serif; } .xxlarge-title { text-transform: uppercase; font-size: 100px; line-height: 1; font-weight: 700; letter-spacing: -2px; font-family: 'Oswald', sans-serif; } .p-style-xsmall { font-size: 13px; line-height: 2.35; font-weight: 300; letter-spacing: 0px; font-family: 'Open Sans', sans-serif; } .p-style-small { font-size: 14px; line-height: 2.15; font-weight: 400; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } .p-style-medium { font-size: 16px; line-height: 1.8; font-weight: 600; letter-spacing: 0px; font-family: 'Open Sans', sans-serif; } .p-style-large { font-size: 18px; line-height: 1.8; font-weight: 400; letter-spacing: 0px; font-family: 'Open Sans', sans-serif; } .p-style-bold { font-size: 20px; line-height: 1.6; font-weight: 600; letter-spacing: 1px; font-family: 'Oswald', sans-serif; } .p-style-bold-up { text-transform: uppercase; font-size: 14px; line-height: 1.5; font-weight: 700; letter-spacing: 1px; font-family: 'Open Sans', sans-serif; } .p-letter-style { text-transform: uppercase; font-size: 10px; line-height: 1; font-weight: 400; letter-spacing: 5px; font-family: 'Oswald', sans-serif; } @media only screen and (max-width: 1199px) { .title-style { font-size: 28px; } .medium-title { font-size: 38px; } .large-title, .large-title-bold { font-size: 55px; } .xlarge-title { font-size: 65px; } .xxlarge-title { font-size: 85px; } } @media only screen and (max-width: 999px) { .title-style { font-size: 26px; } .medium-title { font-size: 35px; } .large-title, .large-title-bold { font-size: 50px; } .xlarge-title { font-size: 55px; } .xxlarge-title { font-size: 70px; } .p-style-bold { font-size: 18px; } .p-style-bold-up { font-size: 13px; } } @media only screen and (max-width: 767px) { .title-style { font-size: 25px; } .small-title-oswald { font-size: 13px; } .xsmall-title-oswald { font-size: 11px; } .medium-title { font-size: 30px; } .large-title, .large-title-bold { font-size: 40px; } .xlarge-title { font-size: 45px; } .xxlarge-title { font-size: 50px; } .p-style-large { font-size: 16px; } .p-style-medium { font-size: 15px; } .p-style-bold { font-size: 16px; } .p-style-bold-up { font-size: 12px; } } @media only screen and (max-width: 549px) { .title-style { font-size: 23px; } .small-title-oswald { font-size: 12px; } .xsmall-title-oswald { font-size: 10px; } .medium-title { font-size: 25px; } .large-title, .large-title-bold { font-size: 35px; } .xlarge-title { font-size: 38px; } .xxlarge-title { font-size: 42px; } .p-style-medium { font-size: 14px; } .p-style-large { font-size: 15px; } .p-style-bold { font-size: 14px; } } /*-------------------------------------------------------------- 8. Buttons --------------------------------------------------------------*/ /* 8.1. To top button */ .to-top-btn { position: fixed; bottom: 40px; right: 40px; overflow: hidden; width: 40px; height: 40px; z-index: 9; -webkit-transition-property: visibility; -o-transition-property: visibility; transition-property: visibility; -webkit-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .to-top-btn.mPS2id-highlight { visibility: hidden; -webkit-transition-property: visibility; -o-transition-property: visibility; transition-property: visibility; -webkit-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .to-top-btn:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111517; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: .6s cubic-bezier(.86, 0, .07, 1); -o-transition: .6s cubic-bezier(.86, 0, .07, 1); transition: .6s cubic-bezier(.86, 0, .07, 1); } .to-top-btn.mPS2id-highlight:before { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .to-top-arrow { width: 10px; height: 25px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -15%); -ms-transform: translate(-50%, -15%); transform: translate(-50%, -15%); -webkit-transition: .6s cubic-bezier(.86, 0, .07, 1); -o-transition: .6s cubic-bezier(.86, 0, .07, 1); transition: .6s cubic-bezier(.86, 0, .07, 1); } .to-top-btn.mPS2id-highlight .to-top-arrow, .to-top-btn.mPS2id-highlight:hover .to-top-arrow { -webkit-transform: translate(-50%, -180%); -ms-transform: translate(-50%, -180%); transform: translate(-50%, -180%); } .to-top-btn:hover .to-top-arrow { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .to-top-arrow:before { content: ''; width: 8px; height: 8px; border-right: 2px solid #bcbdbd; border-top: 2px solid #bcbdbd; position: absolute; top: 1px; left: 50%; -webkit-transform: translateX(-50%) rotate(-45deg); -ms-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); -webkit-transition: .6s cubic-bezier(.86, 0, .07, 1); -o-transition: .6s cubic-bezier(.86, 0, .07, 1); transition: .6s cubic-bezier(.86, 0, .07, 1); } .to-top-arrow:after { content: ''; position: absolute; height: 100%; width: 2px; top: 0; left: 50%; -webkit-transform: scaleY(0) translateX(-50%); -ms-transform: scaleY(0) translateX(-50%); transform: scaleY(0) translateX(-50%); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; background: #bcbdbd; -webkit-transition: .6s cubic-bezier(.86, 0, .07, 1); -o-transition: .6s cubic-bezier(.86, 0, .07, 1); transition: .6s cubic-bezier(.86, 0, .07, 1); } .to-top-btn:hover .to-top-arrow:before { border-right: 2px solid #ef0d33; border-top: 2px solid #ef0d33; } .to-top-btn:hover .to-top-arrow:after { -webkit-transform: scaleY(1) translateX(-50%); -ms-transform: scaleY(1) translateX(-50%); transform: scaleY(1) translateX(-50%); background: #ef0d33; } @media only screen and (max-width: 999px) { .to-top-btn { right: 20px; } } @media only screen and (max-width: 549px) { .to-top-btn { right: 10px; } } /* 8.2. Border button */ .border-btn-box { position: relative; border: 1px solid #ffffff; text-align: center; display: inline-block; } .border-btn-inner { overflow: hidden; } .border-btn-box:before, .border-btn-inner:after { position: absolute; width: calc(100% + 1px); height: 1px; content: ''; background: #65E5DB; top: -1px; left: 0; -webkit-transition: 0.5s cubic-bezier(.755, .05, .855, .06); -o-transition: 0.5s cubic-bezier(.755, .05, .855, .06); transition: 0.5s cubic-bezier(.755, .05, .855, .06); -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; } .border-btn-box:after, .border-btn-inner:before { position: absolute; width: 1px; height: calc(100% + 2px); content: ''; background: #65E5DB; top: -1px; right: -1px; -webkit-transition: 0.5s cubic-bezier(.755, .05, .855, .06); -o-transition: 0.5s cubic-bezier(.755, .05, .855, .06); transition: 0.5s cubic-bezier(.755, .05, .855, .06); -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; } .border-btn-inner:before { top: auto; right: auto; bottom: -1px; left: -1px; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; } .border-btn-inner:after { top: auto; left: auto; bottom: -1px; right: 0; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } .border-btn-box:hover:before, .border-btn-box:hover .border-btn-inner:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .border-btn-box:hover:after, .border-btn-box:hover .border-btn-inner:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } .border-btn { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 6px; font-size: 12px; line-height: 60px; font-weight: 400; position: relative; color: transparent; padding: 0 60px; } .border-btn:before, .border-btn:after { color: #ffffff; content: attr(data-text); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); width: 100%; -webkit-transition: .96s cubic-bezier(.77, 0, .175, 1); -o-transition: .96s cubic-bezier(.77, 0, .175, 1); transition: .96s cubic-bezier(.77, 0, .175, 1); } .border-btn:after { color: #65E5DB; -webkit-transform: translateY(-50%) translateX(30px); -ms-transform: translateY(-50%) translateX(30px); transform: translateY(-50%) translateX(30px); opacity: 0; } .border-btn-box:hover .border-btn:before { -webkit-transform: translateY(-50%) translateX(-30px); -ms-transform: translateY(-50%) translateX(-30px); transform: translateY(-50%) translateX(-30px); opacity: 0; } .border-btn-box:hover .border-btn:after { -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); opacity: 1; } .dark-bg-1 .border-btn-box, .dark-bg-2 .border-btn-box { border: 1px solid #dae9f4; } .dark-bg-1 .border-btn:before, .dark-bg-2 .border-btn:before { color: white; } .red-bg .border-btn-box { border: 1px solid #262626; } .red-bg .border-btn:before { color: #262626; } .red-bg .border-btn:after { color: white; } .red-bg .border-btn-box:before, .red-bg .border-btn-inner:after, .red-bg .border-btn-box:after, .red-bg .border-btn-inner:before { background: white; } .border-btn-red.border-btn-box { border: 1px solid #ef0d33; } .border-btn-red.border-btn-box:before, .border-btn-red .border-btn-inner:after, .border-btn-red.border-btn-box:after, .border-btn-red .border-btn-inner:before { background: white; } .border-btn-red .border-btn:before, .border-btn-red .border-btn:after { color: #ef0d33; } .border-btn-red .border-btn:after { color: white; } @media only screen and (max-width: 767px) { .border-btn { line-height: 55px; padding: 0 55px; } } @media only screen and (max-width: 549px) { .border-btn { line-height: 50px; padding: 0 50px; } } /* 8.3. Flip button */ .flip-btn-box { overflow: hidden; display: inline-block; } .flip-btn { position: relative; color: transparent; font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1; text-transform: uppercase; font-weight: 400; letter-spacing: 3px; display: block; } .flip-btn:before, .flip-btn:after { color: #262626; content: attr(data-text); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; display: block; -webkit-transition: .4s cubic-bezier(.86, 0, .07, 1); -o-transition: .4s cubic-bezier(.86, 0, .07, 1); transition: .4s cubic-bezier(.86, 0, .07, 1); } .flip-btn:after { -webkit-transform: translateY(-170%); -ms-transform: translateY(-170%); transform: translateY(-170%); color: #ef0d33; } .flip-btn:hover:before { -webkit-transform: translateY(52%); -ms-transform: translateY(52%); transform: translateY(52%); } .flip-btn:hover:after { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .flip-btn.flip-large { font-size: 19px; font-weight: 600; letter-spacing: 0px; } .dark-bg-1 .flip-btn:before, .dark-bg-2 .flip-btn:before { color: white; } .red-bg .flip-btn:after { color: white; } /* 8.4. Arrow button */ .arrow-btn-box { display: inline-block; position: relative; } .arrow-btn { padding: 25px 60px 25px 40px; border: 2px solid #65E5DB; color: #1b2a2f; background-color: #65E5DB; -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); display: inline-block; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 5px; } .arrow-btn-box:hover .arrow-btn { padding: 25px 90px 25px 40px; background: transparent; } .arrow-btn:before { content: ''; position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%) scaleX(0); -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); width: 30px; height: 2px; -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; background: #1b2a2f; } .arrow-btn:after { content: ''; position: absolute; top: 50%; right: 40px; width: 7px; height: 7px; border-right: 2px solid #1b2a2f; border-top: 2px solid #1b2a2f; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); } .arrow-btn-box:hover .arrow-btn:before { -webkit-transform: translateY(-50%) scaleX(1); -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1); } .arrow-btn-box:hover .arrow-btn:after { border-right: 2px solid #1b2a2f; border-top: 2px solid #1b2a2f; } .price-table .arrow-btn, .official-section .arrow-btn { color: #1b2a2f; } .price-table .arrow-btn:after, .official-section .arrow-btn:after { color: #65E5DB; } .price-table .arrow-btn-box:hover .arrow-btn:after, .official-section .arrow-btn-box:hover .arrow-btn:after { border-right: 2px solid #65E5DB; border-top: 2px solid #65E5DB; } .price-table .arrow-btn-box:hover .arrow-btn, .official-section .arrow-btn-box:hover .arrow-btn { color: #65E5DB; } .price-table .arrow-btn-box:hover .arrow-btn:before, .official-section .arrow-btn-box:hover .arrow-btn:before { background: #65E5DB; } .dark-bg-1 .arrow-btn, .dark-bg-2 .arrow-btn { background: #f5f5f5; color: #262626; } .dark-bg-1 .arrow-btn:after, .dark-bg-2 .arrow-btn:after { border-right: 2px solid #262626; border-top: 2px solid #262626; } .red-bg .arrow-btn { color: #ef0d33; } .red-bg .arrow-btn:after { border-right: 2px solid #ef0d33; border-top: 2px solid #ef0d33; } /* 8.5. Scroll button */ .scroll-btn { position: absolute; left: 75%; bottom: 40px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 60px; overflow: hidden; z-index: 3; } .scroll-btn-flip-box { overflow: hidden; display: inline-block; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } body.anim .scroll-btn-flip-box { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .scroll-btn-flip { position: relative; color: transparent; display: block; font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1; text-transform: uppercase; font-weight: 400; letter-spacing: 3px; margin-right: -3px; } .scroll-btn-flip:before, .scroll-btn-flip:after { color: #50007F; content: attr(data-text); display: block; position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); } .scroll-btn-flip:before { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .scroll-btn-flip:after { -webkit-transform: translateY(-170%); -ms-transform: translateY(-170%); transform: translateY(-170%); color: #232323; } .scroll-btn:hover .scroll-btn-flip:before { -webkit-transform: translateY(52%); -ms-transform: translateY(52%); transform: translateY(52%); } .scroll-btn:hover .scroll-btn-flip:after { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .scroll-arrow-box { position: absolute; left: 50%; bottom: 0; width: 20px; height: 30px; -webkit-transform: translateX(-50%) translateY(30px); -ms-transform: translateX(-50%) translateY(30px); transform: translateX(-50%) translateY(30px); -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); } body.anim .scroll-arrow-box { -webkit-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .scroll-arrow { position: absolute; left: 0; top: 0; -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); width: 100%; height: 100%; -webkit-transition: 1s cubic-bezier(.23, 1, .32, 1); -o-transition: 1s cubic-bezier(.23, 1, .32, 1); transition: 1s cubic-bezier(.23, 1, .32, 1); } .scroll-btn:hover .scroll-arrow { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .scroll-arrow:before { content: ''; width: 14px; height: 14px; border-right: 2px solid #50007F; border-bottom: 2px solid #50007F; position: absolute; bottom: 2px; left: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .6s cubic-bezier(.23, 1, .32, 1); -o-transition: .6s cubic-bezier(.23, 1, .32, 1); transition: .6s cubic-bezier(.23, 1, .32, 1); } .scroll-btn:hover .scroll-arrow:before{ border-right: 2px solid #232323; border-bottom: 2px solid #232323; } .scroll-arrow:after { content: ''; width: 2px; height: 100%; background: #232323; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) scaleY(0); -ms-transform: translateX(-50%) scaleY(0); transform: translateX(-50%) scaleY(0); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: 1s cubic-bezier(.23, 1, .32, 1); -o-transition: 1s cubic-bezier(.23, 1, .32, 1); transition: 1s cubic-bezier(.23, 1, .32, 1); } .scroll-btn:hover .scroll-arrow:after { -webkit-transform: translateX(-50%) scaleY(1); -ms-transform: translateX(-50%) scaleY(1); transform: translateX(-50%) scaleY(1); } @media only screen and (max-width: 999px) { .scroll-btn { left: 50%; } } @media only screen and (min-width: 1000px) { .red-bg .scroll-btn-flip:after { color: #262626; } .red-bg .scroll-btn:hover .scroll-arrow:before{ border-right: 2px solid #262626; border-bottom: 2px solid #262626; } .red-bg .scroll-arrow:after { background: #262626; } } /* 8.6. Overlay Button */ .overlay-btn-box { position: relative; padding: 10px 20px; display: inline-block; } .overlay-btn-box:before { content: ''; background: #1b2a2f; width: 100%; height: 100%; position: absolute; top: 0; right: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transition: .6s cubic-bezier(.77, 0, .175, 1); -o-transition: .6s cubic-bezier(.77, 0, .175, 1); transition: .6s cubic-bezier(.77, 0, .175, 1); } .overlay-btn-box:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .overlay-btn { text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-family: 'Oswald', sans-serif; line-height: 1; font-size: 55px; color: #262626; position: relative; white-space: nowrap; } .overlay-btn:before { content: attr(data-text); position: absolute; top: 50%; color: #ef0d33; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: .6s cubic-bezier(.77, 0, .175, 1); -o-transition: .6s cubic-bezier(.77, 0, .175, 1); transition: .6s cubic-bezier(.77, 0, .175, 1); width: 0%; white-space: nowrap; overflow: hidden; } .overlay-btn-box:hover .overlay-btn:before { width: 100%; } @media only screen and (max-width: 767px) { .overlay-btn { font-size: 50px; } } @media only screen and (max-width: 549px) { .overlay-btn { font-size: 40px; } } @media only screen and (max-width: 399px) { .overlay-btn { font-size: 30px; } } /*-------------------------------------------------------------- 9. Animations --------------------------------------------------------------*/ .animated { -webkit-animation-fill-mode: both; animation-fill-mode: both; } [data-animation]:before, [data-animation]:after, [data-animation] { opacity: 0; } [data-animation].animated:before, [data-animation].animated:after, [data-animation].animated { opacity: 1; } .tr-delay01, .tr-delay01:before, .tr-delay01:after { -webkit-transition-delay: .1s !important; -o-transition-delay: .1s !important; transition-delay: .1s !important; } .tr-delay02, .tr-delay02:before, .tr-delay02:after { -webkit-transition-delay: .2s !important; -o-transition-delay: .2s !important; transition-delay: .2s !important; } .tr-delay03, .tr-delay03:before, .tr-delay03:after { -webkit-transition-delay: .3s !important; -o-transition-delay: .3s !important; transition-delay: .3s !important; } .tr-delay04, .tr-delay04:before, .tr-delay04:after { -webkit-transition-delay: .4s !important; -o-transition-delay: .4s !important; transition-delay: .4s !important; } .tr-delay05, .tr-delay05:before, .tr-delay05:after { -webkit-transition-delay: .5s !important; -o-transition-delay: .5s !important; transition-delay: .5s !important; } .tr-delay06, .tr-delay06:before, .tr-delay06:after { -webkit-transition-delay: .6s !important; -o-transition-delay: .6s !important; transition-delay: .6s !important; } .tr-delay07, .tr-delay07:before, .tr-delay07:after { -webkit-transition-delay: .7s !important; -o-transition-delay: .7s !important; transition-delay: .7s !important; } .tr-delay08, .tr-delay08:before, .tr-delay08:after { -webkit-transition-delay: .8s !important; -o-transition-delay: .8s !important; transition-delay: .8s !important; } .tr-delay09, .tr-delay09:before, .tr-delay09:after { -webkit-transition-delay: .9s !important; -o-transition-delay: .9s !important; transition-delay: .9s !important; } .tr-delay10, .tr-delay10:before, .tr-delay10:after { -webkit-transition-delay: 1s !important; -o-transition-delay: 1s !important; transition-delay: 1s !important; } .overlay-light-bg-1:before { background: #f5f5f5 !important; } .overlay-light-bg-2:before { background: #f0f0f0 !important; } .overlay-dark-bg-1:before { background: #111517 !important; } .overlay-dark-bg-2:before { background: #1b2a2f !important; } .overlay-red-bg:before { background: #ef0d33 !important; } .red-color.overlay-anim-box2:before, .red-color.overlay-anim-box:before, .red-color.overlay-loading:before, .red-color.overlay-loading2:before, .red-color .overlay-anim-box2:before, .red-color .overlay-anim-box:before, .red-color .overlay-loading:before, .red-color .overlay-loading2:before { background: #ef0d33 !important; } /* 9.1. Loading animations */ /* 9.1.1. Loading overlay animation #1 */ .overlay-loading { display: inline-block; overflow: hidden; position: relative; } .overlay-loading:before { content: ''; width: 100%; height: 100%; background: #1b2a2f; position: absolute; top: 0; left: 100%; -webkit-transition: 1.8s cubic-bezier(.77, 0, .175, 1); -o-transition: 1.8s cubic-bezier(.77, 0, .175, 1); transition: 1.8s cubic-bezier(.77, 0, .175, 1); z-index: 3; -webkit-transform: translateX(-202%); -ms-transform: translateX(-202%); transform: translateX(-202%); } body.anim .overlay-loading:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); } .loading-opacity-anim { opacity: 0; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; -webkit-transition-delay: .86s; -o-transition-delay: .86s; transition-delay: .86s; } body.anim .loading-opacity-anim { opacity: 1; } .dark-bg-1 .overlay-loading:before, .dark-bg-2 .overlay-loading:before { background: #f5f5f5; } .tr-delay01 .loading-opacity-anim { -webkit-transition-delay: .96s; -o-transition-delay: .96s; transition-delay: .96s; } .tr-delay02 .loading-opacity-anim { -webkit-transition-delay: 1.06s; -o-transition-delay: 1.06s; transition-delay: 1.06s; } .tr-delay03 .loading-opacity-anim { -webkit-transition-delay: 1.16s; -o-transition-delay: 1.16s; transition-delay: 1.16s; } .tr-delay04 .loading-opacity-anim { -webkit-transition-delay: 1.26s; -o-transition-delay: 1.26s; transition-delay: 1.26s; } .tr-delay05 .loading-opacity-anim { -webkit-transition-delay: 1.36s; -o-transition-delay: 1.36s; transition-delay: 1.36s; } .tr-delay06 .loading-opacity-anim { -webkit-transition-delay: 1.46s; -o-transition-delay: 1.46s; transition-delay: 1.46s; } .tr-delay07 .loading-opacity-anim { -webkit-transition-delay: 1.56s; -o-transition-delay: 1.56s; transition-delay: 1.56s; } .tr-delay08 .loading-opacity-anim { -webkit-transition-delay: 1.66s; -o-transition-delay: 1.66s; transition-delay: 1.66s; } .tr-delay09 .loading-opacity-anim { -webkit-transition-delay: 1.76s; -o-transition-delay: 1.76s; transition-delay: 1.76s; } .tr-delay10 .loading-opacity-anim { -webkit-transition-delay: 1.86s; -o-transition-delay: 1.86s; transition-delay: 1.86s; } /* 9.1.2. Loading overlay animation #2 */ .overlay-loading2 { display: inline-block; overflow: hidden; position: relative; } .overlay-loading2:before { content: ''; background: #f5f5f5; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 3; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } body.anim .overlay-loading2:before { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .light-bg-2 .overlay-loading2:before { background: #f0f0f0; } .dark-bg-1 .overlay-loading2:before { background: #111517; } .dark-bg-2 .overlay-loading2:before { background: #1b2a2f; } .red-bg .overlay-loading2:before { background: #ef0d33; } /* 9.1.3. Loading fade animation */ .fade-loading { display: inline-block; opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); } body.anim .fade-loading { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* 9.1.4. Loading title fill animation */ .load-title-fill { white-space: nowrap; color: transparent; position: relative; display: inline-block; } .load-title-fill:before, .load-title-fill:after { content: attr(data-text); position: absolute; top: 50%; color: #262626; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); width: 0%; white-space: nowrap; overflow: hidden; } .load-title-fill:after { color: #ef0d33; background: #f5f5f5; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } body.anim .load-title-fill:before, body.anim .load-title-fill:after { width: 100%; } .dark-bg-1 .load-title-fill:before, .dark-bg-2 .load-title-fill:before { color: white; } .red-bg .load-title-fill:before { color: #262626; } .light-bg-2 .load-title-fill:after { background: #f0f0f0; } .dark-bg-1 .load-title-fill:after { background: #111517; } .dark-bg-2 .load-title-fill:after { background: #1b2a2f; } .red-bg .load-title-fill:after { background: #1b2a2f; } .tr-delay01.load-title-fill:after { -webkit-transition-delay: .4s !important; -o-transition-delay: .4s !important; transition-delay: .4s !important; } .tr-delay02.load-title-fill:after { -webkit-transition-delay: .5s !important; -o-transition-delay: .5s !important; transition-delay: .5s !important; } .tr-delay03.load-title-fill:after { -webkit-transition-delay: .6s !important; -o-transition-delay: .6s !important; transition-delay: .6s !important; } .tr-delay04.load-title-fill:after { -webkit-transition-delay: .7s !important; -o-transition-delay: .7s !important; transition-delay: .7s !important; } .tr-delay05.load-title-fill:after { -webkit-transition-delay: .8s !important; -o-transition-delay: .8s !important; transition-delay: .8s !important; } .tr-delay06.load-title-fill:after { -webkit-transition-delay: .9s !important; -o-transition-delay: .9s !important; transition-delay: .9s !important; } .tr-delay07.load-title-fill:after { -webkit-transition-delay: 1s !important; -o-transition-delay: 1s !important; transition-delay: 1s !important; } .tr-delay08.load-title-fill:after { -webkit-transition-delay: 1.1s !important; -o-transition-delay: 1.1s !important; transition-delay: 1.1s !important; } .tr-delay09.load-title-fill:after { -webkit-transition-delay: 1.2s !important; -o-transition-delay: 1.2s !important; transition-delay: 1.2s !important; } .tr-delay10.load-title-fill:after { -webkit-transition-delay: 1.3s !important; -o-transition-delay: 1.3s !important; transition-delay: 1.3s !important; } /* 9.2. Scroll animations */ /* 9.2.1. Scroll overlay animation #1 */ [data-animation].overlay-anim-box:before, [data-animation].overlay-anim-box:after, [data-animation].overlay-anim-box { opacity: 1; } .overlay-anim-box { display: inline-block; overflow: hidden; position: relative; } .overlay-anim-box:before { content: ''; width: 100%; height: 100%; background: #1b2a2f; position: absolute; top: 0; left: 100%; -webkit-transition: 1.8s cubic-bezier(.77, 0, .175, 1); -o-transition: 1.8s cubic-bezier(.77, 0, .175, 1); transition: 1.8s cubic-bezier(.77, 0, .175, 1); z-index: 3; -webkit-transform: translateX(-202%); -ms-transform: translateX(-202%); transform: translateX(-202%); } .overlay-anim-box.overlay-anim:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); } .overlay-opacity-anim { opacity: 0; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; -webkit-transition-delay: .86s; -o-transition-delay: .86s; transition-delay: .86s; } .overlay-anim .overlay-opacity-anim { opacity: 1; } .dark-bg-1 .overlay-anim-box:before, .dark-bg-2 .overlay-anim-box:before { background: #f5f5f5; } .tr-delay01 .overlay-opacity-anim { -webkit-transition-delay: .96s; -o-transition-delay: .96s; transition-delay: .96s; } .tr-delay02 .overlay-opacity-anim { -webkit-transition-delay: 1.06s; -o-transition-delay: 1.06s; transition-delay: 1.06s; } .tr-delay03 .overlay-opacity-anim { -webkit-transition-delay: 1.16s; -o-transition-delay: 1.16s; transition-delay: 1.16s; } .tr-delay04 .overlay-opacity-anim { -webkit-transition-delay: 1.26s; -o-transition-delay: 1.26s; transition-delay: 1.26s; } .tr-delay05 .overlay-opacity-anim { -webkit-transition-delay: 1.36s; -o-transition-delay: 1.36s; transition-delay: 1.36s; } .tr-delay06 .overlay-opacity-anim { -webkit-transition-delay: 1.46s; -o-transition-delay: 1.46s; transition-delay: 1.46s; } .tr-delay07 .overlay-opacity-anim { -webkit-transition-delay: 1.56s; -o-transition-delay: 1.56s; transition-delay: 1.56s; } .tr-delay08 .overlay-opacity-anim { -webkit-transition-delay: 1.66s; -o-transition-delay: 1.66s; transition-delay: 1.66s; } .tr-delay09 .overlay-opacity-anim { -webkit-transition-delay: 1.76s; -o-transition-delay: 1.76s; transition-delay: 1.76s; } .tr-delay10 .overlay-opacity-anim { -webkit-transition-delay: 1.86s; -o-transition-delay: 1.86s; transition-delay: 1.86s; } /* 9.2.2. Scroll overlay animation #2 */ [data-animation].overlay-anim-box2:before, [data-animation].overlay-anim-box2:after, [data-animation].overlay-anim-box2 { opacity: 1; } .overlay-anim-box2 { display: inline-block; overflow: hidden; position: relative; } .overlay-anim-box2:before { content: ''; background: #ffffff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 3; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .price-table .overlay-anim-box2:before { background: #50007F; } .overlay-anim-box2.overlay-anim2:before { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .light-bg-2 .overlay-anim-box2:before { background: #f0f0f0; } .dark-bg-1 .overlay-anim-box2:before { background: #111517; } .dark-bg-2 .overlay-anim-box2:before { background: #1b2a2f; } .red-bg .overlay-anim-box2:before { background: #ef0d33; } /* 9.2.3. Scroll fade animation */ .fade-anim-box { display: inline-block; opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); } .fade-anim-box.fade-anim { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* 9.2.4. Scroll title fill animation */ [data-animation].title-fill:before, [data-animation].title-fill:after, [data-animation].title-fill { opacity: 1; } .title-fill { white-space: nowrap; color: transparent; position: relative; display: inline-block; } .title-fill:before, .title-fill:after { content: attr(data-text); position: absolute; top: 50%; color: #262626; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); width: 0%; white-space: nowrap; overflow: hidden; } .title-fill:after { color: #262626; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .about-section h2.large-title > .title-fill:after, .ticket-section h2.large-title.title-fill:after { color: #fff !important; } .about-page .title-fill:after, .gallery .title-fill:after, .contact-us .title-fill:after { color: #50007F !important; } .title-fill.title-fill-anim:before, .title-fill.title-fill-anim:after { width: 100%; } .dark-bg-1 .title-fill:before, .dark-bg-2 .title-fill:before { color: white; } .dark-bg-1 .title-fill:after, .dark-bg-2 .title-fill:after { color: white; } .thank-you-container .title-fill:after { color: #65E5DB; } .red-bg .title-fill:before { color: #262626; } .light-bg-2 .title-fill:after { background: #f0f0f0; } .dark-bg-1 .title-fill:after { background: #111517; } .dark-bg-2 .title-fill:after { background: #1b2a2f; } .red-bg .title-fill:after { background: #1b2a2f; } .tr-delay01.title-fill:after { -webkit-transition-delay: .4s !important; -o-transition-delay: .4s !important; transition-delay: .4s !important; } .tr-delay02.title-fill:after { -webkit-transition-delay: .5s !important; -o-transition-delay: .5s !important; transition-delay: .5s !important; } .tr-delay03.title-fill:after { -webkit-transition-delay: .6s !important; -o-transition-delay: .6s !important; transition-delay: .6s !important; } .tr-delay04.title-fill:after { -webkit-transition-delay: .7s !important; -o-transition-delay: .7s !important; transition-delay: .7s !important; } .tr-delay05.title-fill:after { -webkit-transition-delay: .8s !important; -o-transition-delay: .8s !important; transition-delay: .8s !important; } .tr-delay06.title-fill:after { -webkit-transition-delay: .9s !important; -o-transition-delay: .9s !important; transition-delay: .9s !important; } .tr-delay07.title-fill:after { -webkit-transition-delay: 1s !important; -o-transition-delay: 1s !important; transition-delay: 1s !important; } .tr-delay08.title-fill:after { -webkit-transition-delay: 1.1s !important; -o-transition-delay: 1.1s !important; transition-delay: 1.1s !important; } .tr-delay09.title-fill:after { -webkit-transition-delay: 1.2s !important; -o-transition-delay: 1.2s !important; transition-delay: 1.2s !important; } .tr-delay10.title-fill:after { -webkit-transition-delay: 1.3s !important; -o-transition-delay: 1.3s !important; transition-delay: 1.3s !important; } /*-------------------------------------------------------------- 10. Hovers --------------------------------------------------------------*/ .hover-content { -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); display: inline-block; } .hover-box:hover .hover-content { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } .hover-img { -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); } .hover-box:hover .hover-img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .hidden-box { overflow: hidden; } .hover-fill-effect { position: relative; white-space: nowrap; display: inline-block; } .hover-fill-effect:before { content: attr(data-text); position: absolute; top: 0; color: #ef0d33; left: 0; -webkit-transition: .8s cubic-bezier(.86, 0, .07, 1); -o-transition: .8s cubic-bezier(.86, 0, .07, 1); transition: .8s cubic-bezier(.86, 0, .07, 1); width: 0%; white-space: nowrap; z-index: 2; background: #f5f5f5; overflow: hidden; } .hover-box:hover .hover-fill-effect:before { width: 100%; } .hover-fill-effect:after { content: ''; width: 40px; height: 2px; position: absolute; right: -60px; top: 50%; -webkit-transform: translateY(-50%) scaleX(0); -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; background: #ef0d33; -webkit-transition: 1.2s cubic-bezier(.165, .84, .44, 1); -o-transition: 1.2s cubic-bezier(.165, .84, .44, 1); transition: 1.2s cubic-bezier(.165, .84, .44, 1); } .hover-box:hover .hover-fill-effect:after { -webkit-transform: translateY(-50%) scaleX(1); -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1); } .hover-color { -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .hover-color:hover { color: #ef0d33; } .light-bg-2 .hover-fill-effect:before { background: #f0f0f0; } .dark-bg-1 .hover-fill-effect:before { background: #111517; } .dark-bg-2 .hover-fill-effect:before { background: #1b2a2f; } .red-bg .hover-fill-effect:before { background: #1b2a2f; } .red-bg .hover-fill-effect:after { background: #262626; } .tr-delay01 .hover-img { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .tr-delay02 .hover-img { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .tr-delay03 .hover-img { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .tr-delay04 .hover-img { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .tr-delay05 .hover-img { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .tr-delay06 .hover-img { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .tr-delay07 .hover-img { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .tr-delay08 .hover-img { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .tr-delay09 .hover-img { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .tr-delay10 .hover-img { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /*============================== Countdown Area ====================================*/ .countdown-style-1 .timer-grid > div { /*display: inline-flex; margin: 0 30px;*/ } @media only screen and (max-width: 575px) { .countdown-style-1 .timer-grid > div { /*margin: 0 50px;*/ /*-ms-flex-wrap: wrap;*/ /*flex-wrap: wrap;*/ } } .countdown-style-1 .timer-grid > div span.ht-count { /*margin: 0 15px;*/ text-align: center; } @media only screen and (max-width: 575px) { .countdown-style-1 .timer-grid > div span.time-count { padding-bottom: 10px !important; } .maintanence-form > a, .countdown-style-1 .timer-grid > div span.count-inner p { font-size: 14px !important; } .countdown-style-1 .timer-grid > div span.time-count { font-size: 30px !important; } .countdown-style-1 .timer-grid > div span.ht-count { margin: 0; flex-basis: 25% !important; /*margin-bottom: 30px;*/ } } .countdown-style-1 .timer-grid > div span.time-count { display: inline-block; padding: 31px 0px 25px 0px; font-size: 50px; width: 70px; text-align: center; color: #50007F; font-weight: 600; } .maintanence-form > a, .countdown-style-1 .timer-grid > div span.count-inner p { margin: 0; font-weight: 600; font-size: 20px; color: #000; } .countdown-style-1.bg-solid-grey .timer-grid > div span.time-count { /*background: #f3f3f3;*/ color: #fff; } .countdown-style-1.bg-solid-theme .timer-grid > div span.time-count { background: #C27433; color: #ffffff; } .countdown-style-1.font-lg-size .timer-grid > div .second span.time-count { color: #C27433; } .countdown-style-1.font-lg-size .timer-grid > div span.time-count { color: #222222; font-size: 67px; padding: 0px 4px; width: auto; display: block; line-height: 1; font-weight: 400; margin-bottom: 10px; } @media only screen and (max-width: 767px) { .countdown-style-1.font-lg-size .timer-grid > div span.time-count { font-size: 40px; margin-bottom: 4px; } } .time-circles .countdown { display: inline-block; width: 770px !important; max-width: 100%; } .time_circles { position: relative; width: 100%; height: 100%; } .time_circles > div { position: absolute; text-align: center; } .time_circles > div > h4 { margin: 0px; padding: 0px; text-align: center; text-transform: capitalize; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -31px; font-size: 14px !important; color: #999; font-family: "BigCaslon-Medium", sans-serif; } .time_circles > div > span { display: block; width: 100%; text-align: center; font-size: 30px !important; margin-top: 14px; font-weight: 500; } .time_circles .textDiv_Days, .textDiv_Hours, .textDiv_Minutes, .textDiv_Seconds { color: #222222; font-size: 30px; } @media only screen and (max-width: 767px) { .time_circles > div > h4 { bottom: -27px; font-size: 14px !important; } .time_circles > div > span { font-size: 18px !important; position: absolute; bottom: -9px; } .time-circles .countdown { display: block; width: 799px !important; max-width: 100%; } } @media only screen and (max-width: 575px) { .time_circles > div > h4 { font-size: 10px !important; } .time_circles > div > span { font-size: 15px !important; } } /*-------------------------------------------------------------- 11. Footer --------------------------------------------------------------*/ .footer-section { background-image:url('footer_bg.png'); background-size: cover; background-repeat: no-repeat; } .footer { width: 100%; min-width: 100%; max-width: 100%; position: relative; } /*.footer:before {*/ /*content: '';*/ /*width: 100%;*/ /*height: 10px;*/ /*background: #111517;*/ /*position: absolute;*/ /*top: -8px;*/ /*left: 0;*/ /*}*/ .footer-logo { width: 125px; height: 100%; } .footer-menu a.active { color: #ef0d33; } .footer-menu li { margin-bottom: 5px; } .footer-social li { margin-bottom: 12px; } .footer-information li { margin-bottom: 15px; } .footer-menu li:last-child, .footer-social li:last-child, .footer-information li:last-child { margin-bottom: 0; } .footer-information i { width: 30px; font-size: 12px; } .footer-information span { margin-left: 30px; } .footer-copyright { margin-top: 0; text-align: right; line-height: 1.7; } @media only screen and (max-width: 767px) { .footer-center-mobile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-menu, .footer-social { text-align: center; } .footer #site_name { display: none; } } /*-------------------------------------------------------------- 12. Magnific popup --------------------------------------------------------------*/ .mfp-bg { background: #1b2a2f; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); -o-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); transition: all 0.8s cubic-bezier(.86, 0, .07, 1); } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.9; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); -o-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); transition: all 0.8s cubic-bezier(.86, 0, .07, 1); } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.9; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; -webkit-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); -o-transition: all 0.8s cubic-bezier(.86, 0, .07, 1); transition: all 0.8s cubic-bezier(.86, 0, .07, 1); } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } .mfp-figure:after, .mfp-iframe-scaler iframe { box-shadow: none; } /* 12.1. Popup arrows */ .mfp-arrow { opacity: 1; margin: 0; } .mfp-arrow:active { margin-top: 0; } .mfp-arrow:before, .mfp-arrow:after { margin-top: 0; } .mfp-arrow:after { border-top-width: 0; border-bottom-width: 0; } .mfp-arrow:before { border-top-width: 0; border-bottom-width: 0; opacity: 1; } .mfp-arrow-left:after { border-right: none; margin-left: 0; } .mfp-arrow-left:before { margin-left: 0; border-right: none; } .mfp-arrow-right { right: 40px; } .mfp-arrow-right:after { border-left: none; margin-left: 0; } .mfp-arrow-right:before { border-left: none; } button.mfp-arrow, .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close, .mfp-close, .mfp-zoom, .mfp-gallery .mfp-image-holder .mfp-figure { cursor: none !important; } .mfp-arrow-left, .mfp-arrow-right { width: 50px; height: 25px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mfp-arrow-left { left: 40px; } .mfp-arrow-left:before { content: ''; position: absolute; top: 50%; left: 1px; width: 16px; height: 16px; border-bottom: 2px solid white; border-left: 2px solid white; -webkit-transform: translateY(-50%) translateX(24px) rotate(45deg); -ms-transform: translateY(-50%) translateX(24px) rotate(45deg); transform: translateY(-50%) translateX(24px) rotate(45deg); -webkit-transition: .5s cubic-bezier(.23, 1, .32, 1); -o-transition: .5s cubic-bezier(.23, 1, .32, 1); transition: .5s cubic-bezier(.23, 1, .32, 1); } .mfp-arrow-right:before { content: ''; position: absolute; top: 50%; right: 1px; left: auto; width: 16px; height: 16px; border-top: 2px solid white; border-right: 2px solid white; -webkit-transform: translateY(-50%) translateX(-24px) rotate(45deg); -ms-transform: translateY(-50%) translateX(-24px) rotate(45deg); transform: translateY(-50%) translateX(-24px) rotate(45deg); -webkit-transition: .5s cubic-bezier(.23, 1, .32, 1); -o-transition: .5s cubic-bezier(.23, 1, .32, 1); transition: .5s cubic-bezier(.23, 1, .32, 1); } .mfp-arrow-left:hover:before { -webkit-transform: translateY(-50%) translateX(0) rotate(45deg); -ms-transform: translateY(-50%) translateX(0) rotate(45deg); transform: translateY(-50%) translateX(0) rotate(45deg); border-bottom: 2px solid #ef0d33; border-left: 2px solid #ef0d33; } .mfp-arrow-right:hover:before { -webkit-transform: translateY(-50%) translateX(0) rotate(45deg); -ms-transform: translateY(-50%) translateX(0) rotate(45deg); transform: translateY(-50%) translateX(0) rotate(45deg); border-top: 2px solid #ef0d33; border-right: 2px solid #ef0d33; } .mfp-arrow-left:after, .mfp-arrow-right:after { content: ''; width: 100%; height: 3px; background: #ef0d33; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scaleX(0); -ms-transform: translate(-50%, -50%) scaleX(0); transform: translate(-50%, -50%) scaleX(0); -webkit-transition: .5s cubic-bezier(.23, 1, .32, 1); -o-transition: .5s cubic-bezier(.23, 1, .32, 1); transition: .5s cubic-bezier(.23, 1, .32, 1); } .mfp-arrow-left:hover:after, .mfp-arrow-right:hover:after { -webkit-transform: translate(-50%, -50%) scaleX(1); -ms-transform: translate(-50%, -50%) scaleX(1); transform: translate(-50%, -50%) scaleX(1); } @media only screen and (max-width: 999px) { .mfp-arrow-right { right: 20px; } .mfp-arrow-left { left: 20px; } } @media only screen and (max-width: 549px) { .mfp-arrow-right { right: 10px; } .mfp-arrow-left { left: 10px; } } /* 12.2. Popup counter */ .mfp-counter { color: white; font-family: 'Oswald', sans-serif; font-size: 14px; right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); } /* 12.3. Popup close */ button.mfp-close { position: absolute; right: 0; top: 40px; background: rgba(27,42,47,.5); } .mfp-close:before, .mfp-close:after { content: ''; position: absolute; width: 15px; height: 2px; -webkit-transition: .4s cubic-bezier(.77, 0, .175, 1); -o-transition: .4s cubic-bezier(.77, 0, .175, 1); transition: .4s cubic-bezier(.77, 0, .175, 1); left: 5px; top: 50%; background: white; } .mfp-close:before { -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .mfp-close:after { -webkit-transform: translateY(-50%) rotate(315deg); -ms-transform: translateY(-50%) rotate(315deg); transform: translateY(-50%) rotate(315deg); } .mfp-close:hover:before { -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .mfp-close:hover:after { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .mfp-close { width: 25px; height: 25px; -webkit-transition: .8s cubic-bezier(.86, 0, .07, 1); -o-transition: .8s cubic-bezier(.86, 0, .07, 1); transition: .8s cubic-bezier(.86, 0, .07, 1); opacity: 1; padding: 0; color: rgba(0,0,0,0); } .mfp-close:active { top: 40px; } .mfp-close-btn-in .mfp-close { color: rgba(0,0,0,0); } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: rgba(0,0,0,0); right: 0; padding-right: 0; width: 25px; } .mfp-iframe-holder .mfp-close { top: -30px; } /*-------------------------------------------------------------- 13. Min-height flex center (IE11-fix) --------------------------------------------------------------*/ .flex-min-height-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .flex-min-height-inner { width: 100%; height: 100%; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /*-------------------------------------------------------------- 14. Page-head --------------------------------------------------------------*/ .page-head-bg { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: 0; } .page-head h2 span, .page-head h3 span, .page-head .medium-title { margin-bottom: 2px; } .page-head h2 span:last-child, .page-head h2 span span, .page-head h3 span:last-child, .page-head h3 span span { margin-bottom: 0; } .page-head .p-style-bold-up span { padding-right: 4px; } .page-head .small-title-oswald { margin-right: 30px; padding-right: 15px; } .page-head .small-title-oswald:last-child { margin-right: 0; } .page-head h2 .load-title-fill { line-height: 1.2; padding-right: 55px; } @media only screen and (max-width: 999px) { .page-head-bg { width: 100%; } } /*-------------------------------------------------------------- 15. Swiper slider --------------------------------------------------------------*/ /* 15.1. Home slider */ .home-slide { overflow: hidden; } .home-slider { height: 100%; width: 100%; overflow: hidden; position: relative; background: #111517; } .home-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.39, 0, .07, 1); -o-transition-timing-function: cubic-bezier(.39, 0, .07, 1); transition-timing-function: cubic-bezier(.39, 0, .07, 1); } .slide-bg { position: absolute; width: 50%; height: 100%; left: 0; top: 0; background-size: 50%; background-position: left center; background-repeat: no-repeat; z-index: 0; } .red-slide .slide-bg { left: 50%; } .red-slide .small-title-oswald span { padding-right: 15px; margin-right: 15px; } .red-slide .small-title-oswald span:last-child { margin-right: 0; } .home-slider-content.dark-bg-1 .p-style-bold-up span { padding-right: 5px; } .home-slider h2 .slider-title-fill { line-height: 1.2; padding-right: 10px; } .home-slider h2 span, .home-slider h3 span, .home-slider .medium-title { margin-bottom: 2px; } .home-slider h2 span:last-child, .home-slider h2 span span, .home-slider h3 span:last-child, .home-slider h3 span span { margin-bottom: 0; } .slider-tr-delay01, .slider-tr-delay01:before { -webkit-transition-delay: 1.1s !important; -o-transition-delay: 1.1s !important; transition-delay: 1.1s !important; } .slider-tr-delay02, .slider-tr-delay02:before { -webkit-transition-delay: 1.2s !important; -o-transition-delay: 1.2s !important; transition-delay: 1.2s !important; } .slider-tr-delay03, .slider-tr-delay03:before { -webkit-transition-delay: 1.3s !important; -o-transition-delay: 1.3s !important; transition-delay: 1.3s !important; } .slider-tr-delay04, .slider-tr-delay04:before { -webkit-transition-delay: 1.4s !important; -o-transition-delay: 1.4s !important; transition-delay: 1.4s !important; } .slider-tr-delay05, .slider-tr-delay05:before { -webkit-transition-delay: 1.5s !important; -o-transition-delay: 1.5s !important; transition-delay: 1.5s !important; } .slider-tr-delay06, .slider-tr-delay06:before { -webkit-transition-delay: 1.6s !important; -o-transition-delay: 1.6s !important; transition-delay: 1.6s !important; } .slider-tr-delay07, .slider-tr-delay07:before { -webkit-transition-delay: 1.7s !important; -o-transition-delay: 1.7s !important; transition-delay: 1.7s !important; } .slider-tr-delay08, .slider-tr-delay08:before { -webkit-transition-delay: 1.8s !important; -o-transition-delay: 1.8s !important; transition-delay: 1.8s !important; } .slider-tr-delay09, .slider-tr-delay09:before { -webkit-transition-delay: 1.9s !important; -o-transition-delay: 1.9s !important; transition-delay: 1.9s !important; } .slider-tr-delay10, .slider-tr-delay10:before { -webkit-transition-delay: 2s !important; -o-transition-delay: 2s !important; transition-delay: 2s !important; } @media only screen and (max-width: 999px) { .slide-bg { width: 100%; background-size: auto !important; } .red-slide .slide-bg { left: 0; } } /* 15.1.1. Home slider title fill effect */ .slider-title-fill { white-space: nowrap; color: transparent; position: relative; display: inline-block; } .slider-title-fill:before, .slider-title-fill:after { content: attr(data-text); position: absolute; top: 50%; color: #262626; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); width: 0%; white-space: nowrap; overflow: hidden; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .slider-title-fill:after { color: #50007F; -webkit-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } .swiper-slide-active .slider-title-fill:before, .swiper-slide-active .slider-title-fill:after { width: 100%; } .dark-bg-1 .slider-title-fill:before, .dark-bg-2 .slider-title-fill:before { color: white; } .red-bg .slider-title-fill:before { color: #262626; } .light-bg-2 .slider-title-fill:after { background: #f0f0f0; } .home-slider .slider-title-fill:after { background: #fff; } .dark-bg-1 .slider-title-fill:after { background: #111517; } .dark-bg-2 .slider-title-fill:after { background: #1b2a2f; } .red-bg .slider-title-fill:after { background: #1b2a2f; } .slider-tr-delay01.slider-title-fill:after { -webkit-transition-delay: 1.4s !important; -o-transition-delay: 1.4s !important; transition-delay: 1.4s !important; } .slider-tr-delay02.slider-title-fill:after { -webkit-transition-delay: 1.5s !important; -o-transition-delay: 1.5s !important; transition-delay: 1.5s !important; } .slider-tr-delay03.slider-title-fill:after { -webkit-transition-delay: 1.6s !important; -o-transition-delay: 1.6s !important; transition-delay: 1.6s !important; } .slider-tr-delay04.slider-title-fill:after { -webkit-transition-delay: 1.7s !important; -o-transition-delay: 1.7s !important; transition-delay: 1.7s !important; } .slider-tr-delay05.slider-title-fill:after { -webkit-transition-delay: 1.8s !important; -o-transition-delay: 1.8s !important; transition-delay: 1.8s !important; } .slider-tr-delay06.slider-title-fill:after { -webkit-transition-delay: 1.9s !important; -o-transition-delay: 1.9s !important; transition-delay: 1.9s !important; } .slider-tr-delay07.slider-title-fill:after { -webkit-transition-delay: 2s !important; -o-transition-delay: 2s !important; transition-delay: 2s !important; } .slider-tr-delay08.slider-title-fill:after { -webkit-transition-delay: 2.1s !important; -o-transition-delay: 2.1s !important; transition-delay: 2.1s !important; } .slider-tr-delay09.slider-title-fill:after { -webkit-transition-delay: 2.2s !important; -o-transition-delay: 2.2s !important; transition-delay: 2.2s !important; } .slider-tr-delay10.slider-title-fill:after { -webkit-transition-delay: 2.3s !important; -o-transition-delay: 2.3s !important; transition-delay: 2.3s !important; } /* 15.1.2. Home slider overlay effect */ .slider-overlay { display: inline-block; overflow: hidden; position: relative; } .slider-overlay:before { content: ''; width: 100%; height: 100%; background: #f5f5f5; position: absolute; top: 0; left: 100%; -webkit-transition: 1.8s cubic-bezier(.77, 0, .175, 1); -o-transition: 1.8s cubic-bezier(.77, 0, .175, 1); transition: 1.8s cubic-bezier(.77, 0, .175, 1); z-index: 3; -webkit-transform: translateX(-202%); -ms-transform: translateX(-202%); transform: translateX(-202%); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .swiper-slide-active .slider-overlay:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); } .slider-overlay-opacity { opacity: 0; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; -webkit-transition-delay: 1.86s; -o-transition-delay: 1.86s; transition-delay: 1.86s; } .swiper-slide-active .slider-overlay-opacity { opacity: 1; } .slider-tr-delay01 .slider-overlay-opacity { -webkit-transition-delay: 1.96s; -o-transition-delay: 1.96s; transition-delay: 1.96s; } .slider-tr-delay02 .slider-overlay-opacity { -webkit-transition-delay: 2.06s; -o-transition-delay: 2.06s; transition-delay: 2.06s; } .slider-tr-delay03 .slider-overlay-opacity { -webkit-transition-delay: 2.16s; -o-transition-delay: 2.16s; transition-delay: 2.16s; } .slider-tr-delay04 .slider-overlay-opacity { -webkit-transition-delay: 2.26s; -o-transition-delay: 2.26s; transition-delay: 2.26s; } .slider-tr-delay05 .slider-overlay-opacity { -webkit-transition-delay: 2.36s; -o-transition-delay: 2.36s; transition-delay: 2.36s; } .slider-tr-delay06 .slider-overlay-opacity { -webkit-transition-delay: 2.46s; -o-transition-delay: 2.46s; transition-delay: 2.46s; } .slider-tr-delay07 .slider-overlay-opacity { -webkit-transition-delay: 2.56s; -o-transition-delay: 2.56s; transition-delay: 2.56s; } .slider-tr-delay08 .slider-overlay-opacity { -webkit-transition-delay: 2.66s; -o-transition-delay: 2.66s; transition-delay: 2.66s; } .slider-tr-delay09 .slider-overlay-opacity { -webkit-transition-delay: 2.76s; -o-transition-delay: 2.76s; transition-delay: 2.76s; } .slider-tr-delay10 .slider-overlay-opacity { -webkit-transition-delay: 2.86s; -o-transition-delay: 2.86s; transition-delay: 2.86s; } /* 15.1.3. Home slider overlay #2 effect */ .slider-overlay2 { display: inline-block; overflow: hidden; position: relative; } .slider-overlay2:before { content: ''; width: 101%; height: 100%; background: #f5f5f5; position: absolute; top: 0; left: 100%; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 3; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .red-color.slider-overlay2:before { background: #ef0d33; } .red-bg .slider-overlay2:before { background: #ef0d33; } .swiper-slide-active .slider-overlay2:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); } /* 15.1.4. Home slider fade effect */ .slider-fade { display: inline-block; opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .swiper-slide-active .slider-fade { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* 15.2. Testimonials slider */ .testimonials-slider { /*height: 100%;*/ /*overflow: hidden;*/ /*padding-bottom: 45px;*/ } .testimonials-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1); -o-transition-timing-function: cubic-bezier(.77, 0, .175, 1); transition-timing-function: cubic-bezier(.77, 0, .175, 1); } .testimonials-slider .swiper-slide { width: 100%; } .testimonials-slider img { width: 230px; border-radius: 50%; } .upcoming-matches img { width: 300px; border-radius: 50%; } .upcoming-matches .p-style-large { margin: 10px 0 0 0; font-style: italic; font-size: 18px; line-height: 2.15; letter-spacing: 1px; } .testimonials-content p { margin-top: 0; text-align: justify; } .testimonials-content { padding: 20px; margin: 42px 0 30px 0; position: relative; } /* 15.3. About slider */ .ticket-section { background-image:url('ticket_reservation.png'); background-size: cover; background-repeat: no-repeat; } .about-section { background-image:url('about_bg.png'); background-size: cover; background-repeat: no-repeat; } .score-section { background-image:url('score-bg.png'); background-size: cover; background-repeat: no-repeat; } .official-section { background-image:url('official-bg.png'); background-size: cover; background-repeat: no-repeat; } .rider1 { background-image:url('rider_match1.png'); background-size: cover; background-repeat: no-repeat; } .rider2 { background-image:url('rider_match2.png'); background-size: cover; background-repeat: no-repeat; } .rider1 .p-style-small { margin-right: 100px; margin-top: 10px; } .rider2 .p-style-small { margin-left: 100px; margin-top: 10px; } table.table.scores { width: 100%; } table.table.scores td, th{ padding: 20px; border: 1px solid #fff; } table.table.scores th{ color: #fff; background-color: #50007F; } .text-left { text-align: left; } .about-slider { width: 100%; height: 100%; position: relative; } .about-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1); -o-transition-timing-function: cubic-bezier(.77, 0, .175, 1); transition-timing-function: cubic-bezier(.77, 0, .175, 1); } @media only screen and (max-width: 767px) { .about-slider { width: calc(100% - 40px); margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 549px) { .about-slider { width: calc(100% - 20px); margin-left: auto; margin-right: auto; } } /* 15.4. Swiper pagination */ .swiper-pagination-clickable .swiper-pagination-bullet { cursor: none; } .swiper-pagination-bullets { outline: none; z-index: 8; } /* 15.4.1. Home slider pagination */ .home-slider .swiper-pagination { bottom: 40px; right: 40px; left: auto; width: auto; overflow: hidden; } .home-slider .swiper-pagination-bullet { width: 30px; height: 30px; opacity: 1; border-radius: 0; position: relative; overflow: hidden; background: transparent; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); } .home-slider .swiper-pagination-bullet { margin: 0 5px !important; } .home-slider .swiper-pagination-bullet:first-child { margin-left: 0 !important; } .home-slider .swiper-pagination-bullet:last-child { margin-right: 0 !important; } body.anim .home-slider .swiper-pagination-bullet { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } body.anim .home-slider .swiper-pagination-bullet:nth-child(2) { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } body.anim .home-slider .swiper-pagination-bullet:nth-child(3) { -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } body.anim .home-slider .swiper-pagination-bullet:nth-child(4) { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .home-slider .swiper-pagination-bullet:before, .home-slider .swiper-pagination-bullet:after { content: '01'; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); color: white; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 1px; font-family: 'Oswald', sans-serif; -webkit-transition: .6s cubic-bezier(.2, .96, .34, 1); -o-transition: .6s cubic-bezier(.2, .96, .34, 1); transition: .6s cubic-bezier(.2, .96, .34, 1); } .home-slider .swiper-pagination-bullet:after { -webkit-transform: translateX(-50%) translateY(-30px); -ms-transform: translateX(-50%) translateY(-30px); transform: translateX(-50%) translateY(-30px); color: #50007F; font-size: 20px; } .home-slider .swiper-pagination-bullet:hover:before { color: #232323; -webkit-transition: .6s cubic-bezier(.165, .84, .44, 1); -o-transition: .6s cubic-bezier(.165, .84, .44, 1); transition: .6s cubic-bezier(.165, .84, .44, 1); } .home-slider .swiper-pagination-bullet-active:before { -webkit-transform: translateX(-50%) translateY(16px); -ms-transform: translateX(-50%) translateY(16px); transform: translateX(-50%) translateY(16px); } .home-slider .swiper-pagination-bullet-active:after { -webkit-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } .home-slider .swiper-pagination-bullet:nth-child(2):before, .home-slider .swiper-pagination-bullet:nth-child(2):after { content: '02'; } .home-slider .swiper-pagination-bullet:nth-child(3):before, .home-slider .swiper-pagination-bullet:nth-child(3):after { content: '03'; } .home-slider .swiper-pagination-bullet:nth-child(4):before, .home-slider .swiper-pagination-bullet:nth-child(4):after { content: '04'; } /* 15.4.2. Testimonials slider pagination */ .testimonials-slider .swiper-pagination-bullets { bottom: 0 !important; } .testimonials-slider .swiper-pagination-bullet { margin: 0 10px !important; width: 10px; height: 10px; background: #50007F; opacity: 1; -webkit-transition: .8s cubic-bezier(.23, 1, .32, 1); -o-transition: .8s cubic-bezier(.23, 1, .32, 1); transition: .8s cubic-bezier(.23, 1, .32, 1); -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } .testimonials-slider .swiper-pagination-bullet-active { margin: 0 30px !important; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .testimonials-slider .swiper-pagination-bullet:first-child, .testimonials-slider .swiper-pagination-bullet-active:first-child { margin-left: 0 !important; } .testimonials-slider .swiper-pagination-bullet:last-child, .testimonials-slider .swiper-pagination-bullet-active:last-child { margin-right: 0 !important; } /* 15.4.3. Portfolio full screen slider pagination */ .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { right: 40px; width: 30px; overflow: hidden; } .portfolio-slider .swiper-pagination-bullet { width: 30px; height: 30px; opacity: 1; border-radius: 0; position: relative; overflow: hidden; background: transparent; -webkit-transform: translateX(-100%) scale(0.33); -ms-transform: translateX(-100%) scale(0.33); transform: translateX(-100%) scale(0.33); -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1) !important; -o-transition: 1s cubic-bezier(.165, .84, .44, 1) !important; transition: 1s cubic-bezier(.165, .84, .44, 1) !important; } .portfolio-slider .swiper-pagination-bullet { margin: 5px 0 !important; } .portfolio-slider .swiper-pagination-bullet:first-child { margin-top: 0 !important; } .portfolio-slider .swiper-pagination-bullet:last-child { margin-bottom: 0 !important; } .portfolio-slider .swiper-pagination-bullet:before, .portfolio-slider .swiper-pagination-bullet:after { content: '01'; position: absolute; top: 50%; right: 0; -webkit-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); color: white; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: 1px; font-family: 'Oswald', sans-serif; -webkit-transition: 1s cubic-bezier(.2, .96, .34, 1); -o-transition: 1s cubic-bezier(.2, .96, .34, 1); transition: 1s cubic-bezier(.2, .96, .34, 1); } .portfolio-slider .swiper-pagination-bullet:after { -webkit-transform: translateX(-30px) translateY(-50%); -ms-transform: translateX(-30px) translateY(-50%); transform: translateX(-30px) translateY(-50%); color: #ef0d33; } .portfolio-slider .swiper-pagination-bullet:hover:before { color: #ef0d33; -webkit-transition: .6s cubic-bezier(.165, .84, .44, 1); -o-transition: .6s cubic-bezier(.165, .84, .44, 1); transition: .6s cubic-bezier(.165, .84, .44, 1); } .portfolio-slider .swiper-pagination-bullet-active:before { -webkit-transform: translateX(30px) translateY(-50%); -ms-transform: translateX(30px) translateY(-50%); transform: translateX(30px) translateY(-50%); } .portfolio-slider .swiper-pagination-bullet-active:after { -webkit-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } .portfolio-slider .swiper-pagination-bullet:nth-child(2):before, .portfolio-slider .swiper-pagination-bullet:nth-child(2):after { content: '02'; } .portfolio-slider .swiper-pagination-bullet:nth-child(3):before, .portfolio-slider .swiper-pagination-bullet:nth-child(3):after { content: '03'; } .portfolio-slider .swiper-pagination-bullet:nth-child(4):before, .portfolio-slider .swiper-pagination-bullet:nth-child(4):after { content: '04'; } .portfolio-slider .swiper-pagination-bullet:nth-child(5):before, .portfolio-slider .swiper-pagination-bullet:nth-child(5):after { content: '05'; } .portfolio-slider .swiper-pagination-bullet:nth-child(6):before, .portfolio-slider .swiper-pagination-bullet:nth-child(6):after { content: '06'; } .portfolio-slider .swiper-pagination-bullet:nth-child(7):before, .portfolio-slider .swiper-pagination-bullet:nth-child(7):after { content: '07'; } .portfolio-slider .swiper-pagination-bullet:nth-child(8):before, .portfolio-slider .swiper-pagination-bullet:nth-child(8):after { content: '08'; } .portfolio-slider .swiper-pagination-bullet:nth-child(9):before, .portfolio-slider .swiper-pagination-bullet:nth-child(9):after { content: '09'; } .portfolio-slider .swiper-pagination-bullet:nth-child(10):before, .portfolio-slider .swiper-pagination-bullet:nth-child(10):after { content: '10'; } .portfolio-slider .swiper-pagination-bullet:nth-child(11):before, .portfolio-slider .swiper-pagination-bullet:nth-child(11):after { content: '11'; } .portfolio-slider .swiper-pagination-bullet:nth-child(12):before, .portfolio-slider .swiper-pagination-bullet:nth-child(12):after { content: '12'; } body.anim .portfolio-slider .swiper-pagination-bullet { -webkit-transform: scale(0.33) translateX(0); -ms-transform: scale(0.33) translateX(0); transform: scale(0.33) translateX(0); position: relative; } body.anim .portfolio-slider .swiper-pagination-bullet-active { -webkit-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } body.anim .portfolio-slider .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66) translateX(0); -ms-transform: scale(0.66) translateX(0); transform: scale(0.66) translateX(0); } body.anim .portfolio-slider .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33) translateX(0); -ms-transform: scale(0.33) translateX(0); transform: scale(0.33) translateX(0); } body.anim .portfolio-slider .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66) translateX(0); -ms-transform: scale(0.66) translateX(0); transform: scale(0.66) translateX(0); } body.anim .portfolio-slider .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33) translateX(0); -ms-transform: scale(0.33) translateX(0); transform: scale(0.33) translateX(0); } body.anim.out .portfolio-slider .swiper-pagination-bullet { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } @media only screen and (max-width: 999px) { .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { right: 20px; } } @media only screen and (max-width: 549px) { .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { right: 10px; } } /* 15.5. Swiper arrows */ /* 15.5.1. Home slider arrows */ .swiper-button-prev, .swiper-button-next { top: auto; bottom: 40px; width: 50px; height: 26px; margin-top: 0; cursor: none; background-image: none; overflow: hidden; } .swiper-button-prev { left: calc(50% + 40px); } .swiper-button-next { right: auto; left: calc(50% + 90px); } .slider-arrow-prev-box, .slider-arrow-next-box { position: relative; -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); -webkit-transform: translateY(27px); -ms-transform: translateY(27px); transform: translateY(27px); -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; width: 100%; height: 100%; } .slider-arrow-next-box { -webkit-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } body.anim .slider-arrow-prev-box, body.anim .slider-arrow-next-box { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slider-arrow-prev, .slider-arrow-next { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); display: inline-block; -webkit-transition: .7s cubic-bezier(.2, .96, .34, 1); -o-transition: .7s cubic-bezier(.2, .96, .34, 1); transition: .7s cubic-bezier(.2, .96, .34, 1); } .slider-arrow-next { left: auto; right: 0; -webkit-transform: translateX(-18px); -ms-transform: translateX(-18px); transform: translateX(-18px); } .swiper-button-prev:hover .slider-arrow-prev, .swiper-button-next:hover .slider-arrow-next { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slider-arrow-prev:before, .slider-arrow-next:before { content: ''; position: absolute; top: 4px; left: 6px; width: 16px; height: 16px; border-bottom: 2px solid #50007F; border-left: 2px solid #50007F; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .7s cubic-bezier(.2, .96, .34, 1); -o-transition: .7s cubic-bezier(.2, .96, .34, 1); transition: .7s cubic-bezier(.2, .96, .34, 1); } .slider-arrow-next:before { left: auto; right: 6px; border: none; border-top: 2px solid #50007F; border-right: 2px solid #50007F; } .swiper-button-prev:hover .slider-arrow-prev:before { border-bottom: 2px solid #232323; border-left: 2px solid #232323; } .swiper-button-next:hover .slider-arrow-next:before { border-top: 2px solid #232323; border-right: 2px solid #232323; } .slider-arrow-prev:after, .slider-arrow-next:after { content: ''; position: absolute; top: 50%; left: 2px; -webkit-transform: translateY(-50%) scaleX(0); -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; width: 48px; height: 2px; background: #232323; -webkit-transition: .7s cubic-bezier(.2, .96, .34, 1); -o-transition: .7s cubic-bezier(.2, .96, .34, 1); transition: .7s cubic-bezier(.2, .96, .34, 1); } .slider-arrow-next:after { left: auto; right: 2px; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } .swiper-button-prev:hover .slider-arrow-prev:after, .swiper-button-next:hover .slider-arrow-next:after { -webkit-transform: translateY(-50%) scaleX(1); -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1); } /* 15.5.2. About slider arrows */ .about-slider .swiper-button-prev { left: calc(50% - 50px); bottom: 0; } .about-slider .swiper-button-next { left: auto; right: calc(50% - 50px); bottom: 0; } .about-slider .slider-arrow-prev:before, .about-slider .slider-arrow-next:before { border-bottom: 2px solid #262626; border-left: 2px solid #262626; } .about-slider .slider-arrow-next:before { border: none; border-top: 2px solid #262626; border-right: 2px solid #262626; } @media only screen and (max-width: 999px) { .home-slider .swiper-pagination { right: 20px; } .swiper-button-prev { left: 20px; } .swiper-button-next { left: 70px; } } @media only screen and (max-width: 549px) { .home-slider .swiper-pagination { right: 10px; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; } .swiper-button-prev { left: 10px; } .swiper-button-next { left: 60px; } } /* 15.5.3. Portfolio full screen slider arrows */ .portfolio-slider .swiper-button-prev { left: auto; right: 90px; } .portfolio-slider .swiper-button-next { right: 40px; left: auto; } body.out .portfolio-slider .slider-arrow-prev-box, body.out .portfolio-slider .slider-arrow-next-box { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } @media only screen and (max-width: 999px) { .portfolio-slider .swiper-button-prev { right: 70px; } .portfolio-slider .swiper-button-next { right: 20px; } } @media only screen and (max-width: 549px) { .portfolio-slider .swiper-button-prev { right: 60px; bottom: 20px; } .portfolio-slider .swiper-button-next { right: 10px; bottom: 20px; } } /* 15.5.4. Portfolio slider arrows */ .portfolio-slider2 .swiper-button-prev, .portfolio-slider2 .swiper-button-next { bottom: 0; } .portfolio-slider2 .swiper-button-prev { left: auto; right: 50%; } .portfolio-slider2 .swiper-button-next { right: auto; left: 50%; } /* 15.5.5. Portfolio columns slider arrows */ .left-arrow-back { width: 70px; height: 46px; position: absolute; bottom: 30px; left: 30px; z-index: 3; } .right-arrow-back { width: 70px; height: 46px; position: absolute; bottom: 30px; right: 30px; z-index: 3; } .portfolio-column-slider .swiper-button-prev { left: 40px; right: auto; z-index: 4; } .portfolio-column-slider .swiper-button-next { right: 40px; left: auto; z-index: 4; } body.out .portfolio-column-slider .slider-arrow-prev-box, body.out .portfolio-column-slider .slider-arrow-next-box { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } @media only screen and (max-width: 999px) { .portfolio-column-slider .swiper-button-prev { left: 20px; } .portfolio-column-slider .swiper-button-next { right: 20px; } .left-arrow-back { left: 10px; } .right-arrow-back { right: 10px; } } @media only screen and (max-width: 549px) { .portfolio-column-slider .swiper-button-prev { left: 10px; bottom: 20px; } .portfolio-column-slider .swiper-button-next { right: 10px; bottom: 20px; } .left-arrow-back { left: 0; bottom: 10px; } .right-arrow-back { right: 0; bottom: 10px; } } /* 15.5.6. Fullscreen home slider arrows */ .fullscreen-home-slider .swiper-button-prev { left: 40px; } .fullscreen-home-slider .swiper-button-next { left: 90px; } @media only screen and (max-width: 999px) { .fullscreen-home-slider .swiper-button-prev { left: 20px; } .fullscreen-home-slider .swiper-button-next { left: 70px; } } @media only screen and (max-width: 549px) { .fullscreen-home-slider .swiper-button-prev { left: 10px; } .fullscreen-home-slider .swiper-button-next { left: 60px; } } /* 15.6. Portfolio full screen slider */ .portfolio-slider { height: 100vh; width: 100%; } .swiper-image { width: 100%; height: 100%; } .swiper-image-inner { background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; } .portfolio-slider .swiper-slide { overflow: hidden; } .portfolio-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.2, 0, .07, 1); -o-transition-timing-function: cubic-bezier(.2, 0, .07, 1); transition-timing-function: cubic-bezier(.2, 0, .07, 1); } .portfolio-slider-content { height: 100%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .portfolio-slider-overlay-box { position: absolute; bottom: 40px; left: 40px; overflow: hidden; } @media only screen and (max-width: 999px) { .portfolio-slider-overlay-box { left: 20px; } } @media only screen and (max-width: 549px) { .portfolio-slider-overlay-box { bottom: 20px; left: 10px; } } /* 15.6.1. Portfolio slider overlay animations */ .portfolio-slider-overlay { display: inline-block; overflow: hidden; position: relative; -webkit-transition: .8s cubic-bezier(.86, 0, .07, 1); -o-transition: .8s cubic-bezier(.86, 0, .07, 1); transition: .8s cubic-bezier(.86, 0, .07, 1); -webkit-transform: translateX(-101%); -ms-transform: translateX(-101%); transform: translateX(-101%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .swiper-slide-active .portfolio-slider-overlay { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .portfolio-slider-overlay:before { content: ''; width: calc(100% + 1px); height: 100%; background: white; position: absolute; top: 0; left: 100%; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 3; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .swiper-slide-active .portfolio-slider-overlay:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } body.out .swiper-slide-active .portfolio-slider-overlay { -webkit-transform: translateX(-101%); -ms-transform: translateX(-101%); transform: translateX(-101%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* 15.6.2. Portfolio slider fade animations */ .portfolio-slider-fade { display: inline-block; overflow: hidden; position: relative; -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .swiper-slide-active .portfolio-slider-fade { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 1.6s cubic-bezier(.165, .84, .44, 1); -o-transition: 1.6s cubic-bezier(.165, .84, .44, 1); transition: 1.6s cubic-bezier(.165, .84, .44, 1); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } body.out .swiper-slide-active .portfolio-slider-fade { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .swiper-slide-active .portfolio-slider-fade.portfolio-slider-tr-01 { -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .swiper-slide-active .portfolio-slider-fade.portfolio-slider-tr-02 { -webkit-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } .swiper-slide-active .portfolio-slider-fade.portfolio-slider-tr-03 { -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } /* 15.7. Portfolio slider */ .portfolio-slider2 { position: relative; } .portfolio-slider2 .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1); -o-transition-timing-function: cubic-bezier(.77, 0, .175, 1); transition-timing-function: cubic-bezier(.77, 0, .175, 1); } .portfolio-slider2 .swiper-slide { position: relative; } .portfolio-slider2 .portfolio-slider2-content { position: absolute; bottom: 20px; left: 20px; overflow: hidden; width: calc(100% - 40px); } .portfolio-slider2 .portfolio-slider-overlay:before { background: #ef0d33; } .portfolio-slider2 .swiper-slide { display: block; } @media only screen and (max-width: 999px) { .portfolio-slider2 { margin: 0 20px; } } @media only screen and (max-width: 549px) { .portfolio-slider2 { margin: 0 10px; } } /* 15.8. Portfolio columns slider */ .portfolio-column-slider { width: 100%; height: 100vh; } .portfolio-column-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1); -o-transition-timing-function: cubic-bezier(.77, 0, .175, 1); transition-timing-function: cubic-bezier(.77, 0, .175, 1); } .portfolio-column-bg { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .portfolio-column-content { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - 40px); } /* 15.8.1. Portfolio columns slider hover effects */ .portfolio-column-fade { -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1); -o-transition: 1s cubic-bezier(.77, 0, .175, 1); transition: 1s cubic-bezier(.77, 0, .175, 1); display: inline-block; } .hover-box:hover .portfolio-column-fade { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 1.6s cubic-bezier(.165, .84, .44, 1); -o-transition: 1.6s cubic-bezier(.165, .84, .44, 1); transition: 1.6s cubic-bezier(.165, .84, .44, 1); } .hover-box:hover .portfolio-column-bg { opacity: .5; } .touch body.anim .portfolio-column-slider .portfolio-column-fade { -webkit-transition: 1.6s cubic-bezier(.165, .84, .44, 1); -o-transition: 1.6s cubic-bezier(.165, .84, .44, 1); transition: 1.6s cubic-bezier(.165, .84, .44, 1); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .touch body.anim.out .portfolio-column-slider .portfolio-column-fade { -webkit-transition: 1s cubic-bezier(.165, .84, .44, 1); -o-transition: 1s cubic-bezier(.165, .84, .44, 1); transition: 1s cubic-bezier(.165, .84, .44, 1); -webkit-transform: translateY(101%); -ms-transform: translateY(101%); transform: translateY(101%); } /* 15.9. Fullscreen home slider */ .fullscreen-home-slider .slide-bg { width: 100%; } .home-slider.fullscreen-home-slider .swiper-wrapper { -webkit-transition-timing-function: cubic-bezier(.2, 0, .07, 1); -o-transition-timing-function: cubic-bezier(.2, 0, .07, 1); transition-timing-function: cubic-bezier(.2, 0, .07, 1); } .fullscreen-home-slider .scroll-btn { left: 50%; } /*-------------------------------------------------------------- 16. List dots --------------------------------------------------------------*/ .list-dots li { padding-left: 20px; position: relative; } .list-dots li:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #262626; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .about-section .list-dots li:before { background: #fff; } /*-------------------------------------------------------------- 17. Services --------------------------------------------------------------*/ ol.notes > li { list-style: inherit; } .services-bg { width: 100%; height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .services-content h2, .services-content h3 span { margin-bottom: 2px; } .services-content h3 span:last-child { margin-bottom: 0; } .services-content p { /*margin-top: 0;*/ } .services-content ul { margin-top: 30px; } .services-content li { margin-bottom: 10px; } .services-content li p { margin-top: 0; } .services-content li:last-child { margin-bottom: 0; } .expertise-img-box { width: 100%; } .expertise p { margin-top: 10px; } .expertise { margin-top: 20px; } @media only screen and (max-width: 999px) { .services-content p { margin-top: 30px; } } /*-------------------------------------------------------------- 18. Progress bar --------------------------------------------------------------*/ .progress-container .container , .progress-container .six-columns { position: static; } .progress-bg { position: absolute; width: 50%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 0; } .progress-box { position: relative; overflow: hidden; margin-bottom: 20px; } .progress-box:last-child { margin-bottom: 0; } .progress-box div { font-size: 12px; min-width: 250px; margin-top: 20px; } .progress-counter { position: absolute; top: 0px; right: 0px; display: block; margin-right: 0px; } .progress-zero { position: relative; overflow: hidden; height: 1px; margin-top: 6px; background: rgba(250,250,250,.1); } .progress-full { position: absolute; left: 0px; top: 0px; height: 1px; width: 0; background-color: white; z-index: 2; } .progress-full.progress-full-red { background-color: #ef0d33; z-index: 3; } .event-section { background-image:url('bg-championship.png'); background-size: 750px; background-position: bottom left; background-repeat: no-repeat; } .slide-progress{ -webkit-animation-name: slide-progress; animation-name: slide-progress; -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1); animation-timing-function: cubic-bezier(.23, 1, .32, 1); } @-webkit-keyframes slide-progress { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide-progress { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @media only screen and (max-width: 767px) { .progress-container .six-columns, .progress-container .container { position: relative; } .progress-bg { position: static; width: 100%; height: 100vh; } } /*-------------------------------------------------------------- 19. Portfolio --------------------------------------------------------------*/ .portfolio-content .portfolio-content-inner { min-height: 65vh; } .portfolio-content .six-columns, .portfolio-content .container { position: static; } .portfolio-content-bg-box { position: absolute; width: 50%; height: 100%; left: 50%; top: 0; display: inline-block; z-index: 2; } .reverse .portfolio-content-bg-box { left: 0; } .portfolio-content-bg { width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } .portfolio-content h2 span, .portfolio-content span { margin-bottom: 2px; } .portfolio-content h2 span:last-child { margin-bottom: 0; } @media only screen and (max-width: 767px) { .portfolio-content .six-columns, .portfolio-content .container { position: relative; } .portfolio-content .six-columns { text-align: center; } .portfolio-content .six-columns .horse { width: auto; background-position: center; } .portfolio-content .six-columns.top-padding-60 { display: none; } .portfolio-content-bg-box { position: static; width: 100%; left: 0; } .portfolio-content-bg { height: 100vh; } } /*-------------------------------------------------------------- 20. Project --------------------------------------------------------------*/ .project-content p { margin-top: 0; } .project-content li { margin-top: 13px; } .project-content h2, .project-content2 h2 { line-height: 1.5; } .project-content2 { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .project-quot h5 { line-height: 2; } .project-quot h5 span { font-weight: 300; } @media only screen and (max-width: 767px) { .project-quot h5 { text-align: center; } .project-quot blockquote { margin-bottom: 30px; } } /*-------------------------------------------------------------- 21. About --------------------------------------------------------------*/ .about-page p { margin-top: 0; } .about-page ul li { margin-top: 10px; } .about-page ul li p { line-height: 1.3; margin-top: 0; } @media only screen and (max-width: 767px) { .about-page p { margin-top: 30px; } } /* 21.1. Team */ .team-img-box { width: 100%; } .team-content p { margin-top: 10px; } .team-content { margin-top: 20px; } .team-title-box h2, .team-title-box h3 span { margin-bottom: 2px; } .team-title-box h3 span:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- 22. Our clients --------------------------------------------------------------*/ .client-list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .client-list li { -ms-flex-preferred-size: 25%; flex-basis: 25%; text-align: center; height: 220px; } .client-list li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 1px solid #888888; border-right: 1px solid #888888; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .client-list.timer li a { border: none; } .client-list li:nth-child(4n) a { border-right: none; } .client-list li:nth-last-child(1) a, .client-list li:nth-last-child(2) a, .client-list li:nth-last-child(3) a, .client-list li:nth-last-child(4) a { border-bottom: none; } .client-list .brand-box { /*height: 150px;*/ width: 150px; position: relative; } .hover-opac-img { -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .opac-img { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .client-list li:hover .opac-img { opacity: 1; } .client-list li:hover .hover-opac-img { opacity: 0; } .empty-spot { position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; } .empty-spot:before, .empty-spot:after { content: ''; width: 1px; height: calc(100% - 40px); background: #ef0d33; position: absolute; right: 20px; bottom: 20px; -webkit-transform: scaleY(.4) scaleX(1); -ms-transform: scaleY(.4) scaleX(1); transform: scaleY(.4) scaleX(1); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); } .empty-spot:after { width: calc(100% - 40px); height: 1px; -webkit-transform: scaleY(1) scaleX(.4); -ms-transform: scaleY(1) scaleX(.4); transform: scaleY(1) scaleX(.4); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } .empty-spot-box { position: relative; } .empty-spot-box:before, .empty-spot-box:after { content: ''; width: 1px; height: calc(100% - 40px); background: #ef0d33; position: absolute; left: 20px; top: 20px; -webkit-transform: scaleY(.4) scaleX(1); -ms-transform: scaleY(.4) scaleX(1); transform: scaleY(.4) scaleX(1); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; -webkit-transition: .5s cubic-bezier(.86, 0, .07, 1); -o-transition: .5s cubic-bezier(.86, 0, .07, 1); transition: .5s cubic-bezier(.86, 0, .07, 1); } .empty-spot-box:after { width: calc(100% - 40px); height: 1px; -webkit-transform: scaleY(1) scaleX(.4); -ms-transform: scaleY(1) scaleX(.4); transform: scaleY(1) scaleX(.4); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; } .empty-spot-box:hover:before, .empty-spot-box:hover:after, .client-list li:hover .empty-spot:before, .client-list li:hover .empty-spot:after { -webkit-transform: scaleX(1) scaleY(1); -ms-transform: scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); } .client-list.timer p.small-title-oswald { margin-top: 0px; } @media only screen and (max-width: 999px) { .client-list li { height: 190px; } } @media only screen and (max-width: 767px) { .client-list li { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .client-list.timer li { -ms-flex-preferred-size: 25%; flex-basis: 25%; } .client-list li:nth-child(2n) a { border-right: none; } .client-list li:nth-last-child(3) a, .client-list li:nth-last-child(4) a { border-bottom: 1px solid #888888; } .client-list.timer li:nth-last-child(3) a, .client-list.timer li:nth-last-child(4) a { border-bottom: none; } } @media only screen and (max-width: 549px) { .client-list .brand-box { height: 120px; width: 120px; } .client-list li { height: 170px; } .client-list.timer .brand-box { width: auto; } } /*-------------------------------------------------------------- 23. Video content --------------------------------------------------------------*/ .video-content-bg { position: relative; width: 100%; height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .video-play-button { position: absolute; z-index: 3; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-box-sizing: content-box; box-sizing: content-box; display: block; width: 32px; height: 44px; border-radius: 50%; padding: 18px 20px 18px 28px; } .video-play-button:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background: #ef0d33; border-radius: 50%; -webkit-animation: pulse-border 1.5s cubic-bezier(.77, 0, .175, 1) infinite; animation: pulse-border 1.5s cubic-bezier(.77, 0, .175, 1) infinite; } .video-play-button:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; background: #ef0d33; border-radius: 50%; } .video-play-button span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 32px solid #1b2a2f; border-top: 22px solid transparent; border-bottom: 22px solid transparent; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*-------------------------------------------------------------- 24. Blog --------------------------------------------------------------*/ .blog-title span { margin-bottom: 2px; } .blog-title span:last-child { margin-bottom: 0; } .blog-category, .blog-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .blog-category li, .blog-tags li { margin-left: 10px; } .blog-category li:first-child, .blog-tags li:first-child { margin-left: 20px; margin-right: 10px; } .blog-category li i, .blog-tags li i { font-size: 12px; } .blog-autor-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* 24.1. Sidebar */ .sidebar-box { padding: 0 20px; } .sidebar-box h4 { line-height: 2.5; padding-right: 25px; padding-left: 10px; background: #65E5DB; } /* 24.1.1. Search form */ .form-search { padding: 10px 20px; position: relative; border: 1px solid #1b2a2f; background: #1b2a2f; } .search-control { color: white; width: calc(100% - 50px); border: none; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 1px; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .search-btn { text-align: center; font-size: 13px; line-height: 13px; position: absolute; top: 50%; right: 0; height: 100%; width: 50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border: none; color: #65E5DB; background: #1b2a2f; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .search-btn:hover { background: #65E5DB; color: #262626; } /* 24.1.2. Categories */ .widget-categories li { margin-bottom: 10px; } .widget-categories li:last-child { margin-bottom: 0; } .widget-categories a { font-size: 15px; padding-right: 15px; padding-left: 10px; line-height: 2; background: #1b2a2f; display: inline-block; } /* 24.1.3. Recent-posts */ .recent-entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 30px; background: #1b2a2f; } .recent-entry:last-child { margin-bottom: 0; } .recent-entry .recent-entry-img-box { width: 100px; } .recent-desc { padding: 0px 15px 15px 15px; } @media only screen and (min-width: 768px) and (max-width: 999px) { .recent-entry { display: block; } } /* 24.1.4. Tegs */ .widget-tags li { margin-right: 5px; margin-bottom: 5px; } .widget-tags li a { font-size: 15px; padding-right: 15px; line-height: 2; background: #1b2a2f; display: inline-block; } /* 24.1.5. Widget-instagram */ .widget-instagram li { -ms-flex-preferred-size: 50%; flex-basis: 50%; } .widget-instagram li:nth-child(1) div, .widget-instagram li:nth-child(2) div { margin-bottom: 20px; } .widget-instagram li:nth-child(1) div, .widget-instagram li:nth-child(3) div { margin-right: 10px; } .widget-instagram li:nth-child(2) div, .widget-instagram li:nth-child(4) div { margin-left: 10px; } /* 24.2. Single post */ .content-margin-block { margin: 0 40px; } .quote-content { margin-top: 30px; padding: 20px; position: relative; background: #ef0d33; } .quote-content:before { content: ''; width: 24px; height: 24px; background: #ef0d33; position: absolute; right: 30px; bottom: -11px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .quote-content p { margin-top: 0; } .post-img-flex { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .post-img-box { margin-top: 20px; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .post-img-box:nth-child(odd) div { margin-right: 10px; } .post-img-box:nth-child(even) div { margin-left: 10px; } .post-share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 30px 0; } .post-share-social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .post-share-social li { margin-left: 20px; } .post-share-social li a { font-size: 15px; } @media only screen and (max-width: 999px) { .content-margin-block { margin: 0 20px; } } @media only screen and (max-width: 549px) { .content-margin-block { margin: 0 10px; } .post-img-box { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .post-img-box:nth-child(odd) div { margin-right: 0; } .post-img-box:nth-child(even) div { margin-left: 0; } } /* 24.2.1. Post autor */ .autor-img { -ms-flex-preferred-size: 130px; flex-basis: 130px; } .autor-bio-flex { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 30px; padding-bottom: 30px; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .autor-bio-desc { margin-left: 20px; -ms-flex-preferred-size: calc(100% - 150px); flex-basis: calc(100% - 150px); } .autor-bio-desc p { margin-top: 20px; } .autor-social { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 10px; } .autor-social li { margin-right: 20px; } .autor-social li a { font-size: 14px; } @media only screen and (max-width: 549px) { .autor-img { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .autor-bio-desc { margin-left: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-top: 20px; } } /* 24.2.2. Post comments */ .comments-list { width: 100%; } .comments-list li { border-bottom: 1px solid #bcbdbd; padding-bottom: 20px; margin-bottom: 30px; } .comments-list li:last-child { border-bottom: none; } .comment-children { margin: 20px 0 0 90px; padding-top: 30px; border-top: 1px solid #bcbdbd; } .comment-children li:last-child { margin-bottom: 0; padding-bottom: 0 } .comment-content { position: relative; } .comment-avatar { position: absolute; top: 0; left: 0; width: 70px; } .post-comment { padding-left: 90px; } .comments-box .date { margin-top: 10px; } .comments-box p { margin-top: 20px; } .reply { position: absolute; top: 0; right: 0; } @media only screen and (max-width: 999px) { .comment-children { margin: 20px 0 0 0; } } @media only screen and (max-width: 399px) { .reply { position: static; } .comments-box p { margin-bottom: 20px; } } /* 24.2.3. Comment form */ .comments-form { width: 100%; text-align: center; } .comment-form-control { width: 100%; margin-bottom: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #8c8b8b; border-color: #bcbdbd; border-style: solid; border-width: 1px; padding: 20px; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 1px; text-transform: uppercase; font-family: 'Oswald', sans-serif; } .comments-form textarea { height: 200px; } /*-------------------------------------------------------------- 25. Contact --------------------------------------------------------------*/ .contact-box p { margin-top: 0; margin-bottom: 2px; } .contact-box p span, .contact-box h6 span { margin-bottom: 2px; } .contact-box p:last-child, .contact-box p span:last-child, .contact-box h6 span:last-child { margin-bottom: 0; } .contact-box .flip-btn-box { margin-top: 30px; margin-right: 20px; line-height: 1.2; } .contact-box .flip-btn { white-space: nowrap; line-height: 1.2; } /* 25.1. Contact form */ .contact-form-box { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; } .bg-overlay { position: absolute; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; } .contact-form-box .border-btn-box { border: 1px solid white; } .contact-form-box .border-btn:before { color: white; } .contact-form-control { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border: none; border-bottom: 1px solid rgba(250,250,250,.4); padding: 0 0 10px 0; margin-bottom: 40px; font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: 1px; text-transform: uppercase; color: white; font-family: 'Oswald', sans-serif; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .contact-form-box textarea { height: 100px; margin-bottom: 0; } .contact-form-control:focus { border-bottom: 1px solid white; } /*-------------------------------------------------------------- 26. Video background --------------------------------------------------------------*/ .page-head video { min-height: 100%; min-width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video-bg-box .scroll-btn { left: 50%; } /*-------------------------------------------------------------- 27. Portfolio grid --------------------------------------------------------------*/ /* 27.1. isotope buttons */ .filter-buttons { text-align: center; margin-bottom: 30px; } .filter-button-box { overflow: hidden; display: inline-block; margin-bottom: 10px; border: 1px solid white; } .filter-button-flip { border: 0; background: transparent; margin: 0 15px; cursor: none; outline: 0; position: relative; color: transparent; font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1; text-transform: uppercase; font-weight: 400; letter-spacing: 3px; display: block; } .filter-button-flip:before, .filter-button-flip:after { color: #262626; content: attr(data-text); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; display: block; -webkit-transition: .4s cubic-bezier(.86, 0, .07, 1); -o-transition: .4s cubic-bezier(.86, 0, .07, 1); transition: .4s cubic-bezier(.86, 0, .07, 1); } .filter-button-flip:after { -webkit-transform: translateY(-170%); -ms-transform: translateY(-170%); transform: translateY(-170%); color: #50007F; } .filter-button-box.active .filter-button-flip:before { -webkit-transform: translateY(52%); -ms-transform: translateY(52%); transform: translateY(52%); } .filter-button-box.active .filter-button-flip:after { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .dark-bg-1 .filter-button-flip:before, .dark-bg-2 .filter-button-flip:before { color: white; } .red-bg .filter-button-flip:after { color: white; } /* 27.2. Isotope item */ .grid-item { width: 33.33%; display: block; } .work_item { margin: 20px 10px 0 10px; position: relative; background: #111517; } .works-content { position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px); overflow: hidden; } .works-content span { margin-top: 1px; } /* 27.3. Isotope hover */ .work-title-overlay { display: inline-block; overflow: hidden; position: relative; -webkit-transition: .8s cubic-bezier(.86, 0, .07, 1); -o-transition: .8s cubic-bezier(.86, 0, .07, 1); transition: .8s cubic-bezier(.86, 0, .07, 1); -webkit-transform: translateX(-101%); -ms-transform: translateX(-101%); transform: translateX(-101%); -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .work-title-delay01.work-title-overlay { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .work-title-delay02.work-title-overlay { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .work-title-delay03.work-title-overlay { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .work-title-delay04.work-title-overlay { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .hover-box:hover .work-title-overlay { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .hover-box:hover .work-title-delay01.work-title-overlay { -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .hover-box:hover .work-title-delay02.work-title-overlay { -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .hover-box:hover .work-title-delay03.work-title-overlay { -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .hover-box:hover .work-title-delay04.work-title-overlay { -webkit-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .work-title-overlay:before { content: ''; width: calc(100% + 1px); height: 100%; position: absolute; top: 0; left: 100%; -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1); -o-transition: 1s cubic-bezier(.86, 0, .07, 1); transition: 1s cubic-bezier(.86, 0, .07, 1); z-index: 3; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .red-color.work-title-overlay:before { background: #ef0d33; } .hover-box:hover .work-title-overlay:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); -webkit-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .hover-box:hover .work-title-delay01.work-title-overlay:before { -webkit-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .hover-box:hover .work-title-delay02.work-title-overlay:before { -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .hover-box:hover .work-title-delay03.work-title-overlay:before { -webkit-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .hover-box:hover .work-title-delay04.work-title-overlay:before { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .works .hover-box:hover .hover-img { opacity: .5; } .touch .works .work-title-overlay { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .touch .works .work-title-overlay:before { -webkit-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); } @media only screen and (max-width: 999px) { .grid-item { width: 50%; } } @media only screen and (max-width: 767px) { .grid-item { width: 100%; } .work_item { margin: 20px 0 0 0; } } /*-------------------------------------------------------------- 28. Typewriter home --------------------------------------------------------------*/ .typewriter-home .page-head-bg { width: 100%; } .typewriter-home .scroll-btn { left: 50%; } .Typewriter__cursor { width: 30px; height: 5px; display: inline-block; background: #ef0d33; overflow: hidden; } @media only screen and (max-width: 999px) { .Typewriter__cursor { width: 23px; height: 4px; } } @media only screen and (max-width: 549px) { .Typewriter__cursor { width: 15px; height: 3px; } } /*-------------------------------------------------------------- 29. Particles home --------------------------------------------------------------*/ .particles-home .page-head-bg { width: 100%; } .particles-home .scroll-btn { left: 50%; } /*-------------------------------------------------------------- 30. Price table --------------------------------------------------------------*/ .price-table img { min-height: 450px; } .price-details { border-radius: 8px; overflow: hidden; padding-bottom: 60px; text-align: center; } .pricing-title { background: #ef0d33; padding: 20px 0; } .pricing-title.price-title-paddings { padding: 40px 0; } .price-details-margins { margin-top: 20px; } .price-content { margin: 30px 20px 0 20px; } .price-list { margin: 60px 20px; } .price-list li { padding-left: 20px; position: relative; margin-bottom: 10px; } .price-list li:last-child { margin-bottom: 0; } .price-list li:before { content: ""; width: 6px; height: 3px; border-bottom: 2px solid #ef0d33; border-left: 2px solid #ef0d33; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } /* 30.1. Price button */ .round-btn { padding: 0 40px; color: #50007F; border: 1px solid #50007F; border-radius: 25px; text-transform: uppercase; line-height: 50px; font-size: 14px; font-weight: 500; letter-spacing: 2px; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .price-btn-box { height: 50px; border: 1px solid white; /*border-radius: 25px;*/ display: inline-block; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .price-btn-box:hover { border: 1px solid #65E5DB; background: #65E5DB; color: #fff; } .price-btn { padding: 0 40px; color: #65E5DB; text-transform: uppercase; line-height: 50px; font-size: 14px; font-weight: 500; letter-spacing: 2px; -webkit-transition: .7s cubic-bezier(.165, .84, .44, 1); -o-transition: .7s cubic-bezier(.165, .84, .44, 1); transition: .7s cubic-bezier(.165, .84, .44, 1); } .price-btn-box:hover .price-btn { color: black; } .price-btn-box.price-btn-bg { background: #ef0d33; border: 1px solid #ef0d33; } .price-btn-box.price-btn-bg .price-btn { color: black; } @media only screen and (max-width: 767px) { .price-details-margins { margin-top: 0; } } .social-share-button .ssb-icon { background-position: center center; background-repeat: no-repeat; background-size: 18px 18px; display: inline-block; height: 18px; width: 18px; } .social-share-button .ssb-twitter { background-image: url(/assets/social-share-button/twitter-7b64ce0117a85c5d52ed45c27707af61d9b0e0d590284baa287cfe87867b9ae1.svg); } .social-share-button .ssb-facebook { background-image: url(/assets/social-share-button/facebook-03210e1663ee772e93ed5d344cdb36657b68342821aaebe982f2f984915990b3.svg); } .social-share-button .ssb-google_bookmark { background-image: url(/assets/social-share-button/google_bookmark-bb4c960c0421cb7dce602d10e744692bcc1c54f323410f4965d508f96e2255ce.svg); } .social-share-button .ssb-google_plus { background-image: url(/assets/social-share-button/google_plus-50c049fbb29cd3346f1bf9349017b644bcd00a53b56bd156728850f57bd85c0a.svg); } .social-share-button .ssb-weibo { background-image: url(/assets/social-share-button/weibo-a345a6ca554e6f388da9eb35746bb0425cb018c16408ba82852c66d375245d6f.svg); } .social-share-button .ssb-qq { background-image: url(/assets/social-share-button/qq-4dbae8223fc7823f6d73bc7fbe113eb894f4c174ec3ae93103ca382c78a2bf67.svg); } .social-share-button .ssb-delicious { background-image: url(/assets/social-share-button/delicious-0c55f72f821aae5352691f13eb64bf3435573e2169d0720477ed367b2f1ed28e.svg); } .social-share-button .ssb-linkedin { background-image: url(/assets/social-share-button/linkedin-b7fd42895b291003c444a9c2acf867ea813671e0b725a5d7c05dbb13f5c0fdd3.svg); } .social-share-button .ssb-tumblr { background-image: url(/assets/social-share-button/tumblr-330a37f93cce7c27a750188d0bfdbed3a22f566b807e64d21131dcdc94e08ec3.svg); } .social-share-button .ssb-pinterest { background-image: url(/assets/social-share-button/pinterest-86203d156197cce4087fee058b920d275c535df5fd59d8caa83da0ef41d1ec7f.svg); } .social-share-button .ssb-douban { background-image: url(/assets/social-share-button/douban-46298c27e3bc6d59951c0bbc464339a5ba1b44e3b25b571874f1baacd7af2495.svg); } .social-share-button .ssb-wechat { background-image: url(/assets/social-share-button/wechat-d8852cc3396a7a53eba39595d2e9f638c93a34ab1a0f41bae4ff391b63815f56.svg); } .social-share-button .ssb-vkontakte { background-image: url(/assets/social-share-button/vkontakte-0c2b68277fade991d74efcbdb6f7b359a35e65156cbada9625a3fe8f73151c14.svg); } .social-share-button .ssb-odnoklassniki { background-image: url(/assets/social-share-button/odnoklassniki-579bf782bd70fe94748254cac2c8c3dc150cceb0d2a143399e3062246b5ecb39.svg); } .social-share-button .ssb-xing { background-image: url(/assets/social-share-button/xing-0ebccb4042c8c7220e471c4f569df2bf27da227db425525819b6848c86a1603e.svg); } .social-share-button .ssb-email { background-image: url(/assets/social-share-button/email-7067143cbe69d9d8cf25e67fda1a315d133c2b79074a09088bd712cc5c81135d.svg); } .social-share-button .ssb-reddit { background-image: url(/assets/social-share-button/reddit-730429c239b6990b67d0d4aaaeb6e9fe48c62267f889a412e81f5f1066ec625f.svg); } .social-share-button .ssb-hacker_news { background-image: url(/assets/social-share-button/hacker_news-d89b13fec49355a787389a776f2e03a0a38314abf93777b8865f8c5f146eaf8d.svg); } .social-share-button .ssb-telegram { background-image: url(/assets/social-share-button/telegram-a6b5607917f3e3efbcf35c3ed43356b05622fcfc533d2fbf5066621b78c1dbe4.svg); } .social-share-button .ssb-whatsapp_app, .social-share-button .ssb-whatsapp_web { background-image: url(/assets/social-share-button/whatsapp-766099d1a3ea095e9c8a8628e0505159b7f336b8036a8f70ad5fe60c29233959.svg); } .ss-wechat-dialog { width: 300px; position: fixed; background: #fff; padding: 15px; border-radius: 3px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); z-index: 11001; font-size: 14px; line-height: 1.2em; } .ss-wechat-dialog .wechat-popup-header { font-weight: bold; } .ss-wechat-dialog .wechat-dialog-qr { text-align: center; margin: 25px 0; } .ss-wechat-dialog .wechat-popup-close { width: 16px; height: 16px; position: absolute; right: 10px; top: 10px; color: #999; text-decoration: none; font-size: 16px; } .ss-wechat-dialog .wechat-popup-footer { text-align: left; line-height: 22px; color: #666; } /*! * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa, .fas, .far, .fal, .fab { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -.0667em; } .fa-xs { font-size: .75em; } .fa-sm { font-size: .875em; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0; } .fa-ul>li { position: relative; } .fa-li { left: -2em; position: absolute; text-align: center; width: 2em; line-height: inherit; } .fa-border { border: solid 0.08em #eee; border-radius: .1em; padding: .2em .25em .15em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left, .fas.fa-pull-left, .far.fa-pull-left, .fal.fa-pull-left, .fab.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, .fal.fa-pull-right, .fab.fa-pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); transform: scale(1, -1); } .fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { -webkit-filter: none; filter: none; } .fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; } .fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #fff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-500px:before { content: "\f26e"; } .fa-accessible-icon:before { content: "\f368"; } .fa-accusoft:before { content: "\f369"; } .fa-acquisitions-incorporated:before { content: "\f6af"; } .fa-ad:before { content: "\f641"; } .fa-address-book:before { content: "\f2b9"; } .fa-address-card:before { content: "\f2bb"; } .fa-adjust:before { content: "\f042"; } .fa-adn:before { content: "\f170"; } .fa-adversal:before { content: "\f36a"; } .fa-affiliatetheme:before { content: "\f36b"; } .fa-air-freshener:before { content: "\f5d0"; } .fa-algolia:before { content: "\f36c"; } .fa-align-center:before { content: "\f037"; } .fa-align-justify:before { content: "\f039"; } .fa-align-left:before { content: "\f036"; } .fa-align-right:before { content: "\f038"; } .fa-alipay:before { content: "\f642"; } .fa-allergies:before { content: "\f461"; } .fa-amazon:before { content: "\f270"; } .fa-amazon-pay:before { content: "\f42c"; } .fa-ambulance:before { content: "\f0f9"; } .fa-american-sign-language-interpreting:before { content: "\f2a3"; } .fa-amilia:before { content: "\f36d"; } .fa-anchor:before { content: "\f13d"; } .fa-android:before { content: "\f17b"; } .fa-angellist:before { content: "\f209"; } .fa-angle-double-down:before { content: "\f103"; } .fa-angle-double-left:before { content: "\f100"; } .fa-angle-double-right:before { content: "\f101"; } .fa-angle-double-up:before { content: "\f102"; } .fa-angle-down:before { content: "\f107"; } .fa-angle-left:before { content: "\f104"; } .fa-angle-right:before { content: "\f105"; } .fa-angle-up:before { content: "\f106"; } .fa-angry:before { content: "\f556"; } .fa-angrycreative:before { content: "\f36e"; } .fa-angular:before { content: "\f420"; } .fa-ankh:before { content: "\f644"; } .fa-app-store:before { content: "\f36f"; } .fa-app-store-ios:before { content: "\f370"; } .fa-apper:before { content: "\f371"; } .fa-apple:before { content: "\f179"; } .fa-apple-alt:before { content: "\f5d1"; } .fa-apple-pay:before { content: "\f415"; } .fa-archive:before { content: "\f187"; } .fa-archway:before { content: "\f557"; } .fa-arrow-alt-circle-down:before { content: "\f358"; } .fa-arrow-alt-circle-left:before { content: "\f359"; } .fa-arrow-alt-circle-right:before { content: "\f35a"; } .fa-arrow-alt-circle-up:before { content: "\f35b"; } .fa-arrow-circle-down:before { content: "\f0ab"; } .fa-arrow-circle-left:before { content: "\f0a8"; } .fa-arrow-circle-right:before { content: "\f0a9"; } .fa-arrow-circle-up:before { content: "\f0aa"; } .fa-arrow-down:before { content: "\f063"; } .fa-arrow-left:before { content: "\f060"; } .fa-arrow-right:before { content: "\f061"; } .fa-arrow-up:before { content: "\f062"; } .fa-arrows-alt:before { content: "\f0b2"; } .fa-arrows-alt-h:before { content: "\f337"; } .fa-arrows-alt-v:before { content: "\f338"; } .fa-assistive-listening-systems:before { content: "\f2a2"; } .fa-asterisk:before { content: "\f069"; } .fa-asymmetrik:before { content: "\f372"; } .fa-at:before { content: "\f1fa"; } .fa-atlas:before { content: "\f558"; } .fa-atom:before { content: "\f5d2"; } .fa-audible:before { content: "\f373"; } .fa-audio-description:before { content: "\f29e"; } .fa-autoprefixer:before { content: "\f41c"; } .fa-avianex:before { content: "\f374"; } .fa-aviato:before { content: "\f421"; } .fa-award:before { content: "\f559"; } .fa-aws:before { content: "\f375"; } .fa-backspace:before { content: "\f55a"; } .fa-backward:before { content: "\f04a"; } .fa-balance-scale:before { content: "\f24e"; } .fa-ban:before { content: "\f05e"; } .fa-band-aid:before { content: "\f462"; } .fa-bandcamp:before { content: "\f2d5"; } .fa-barcode:before { content: "\f02a"; } .fa-bars:before { content: "\f0c9"; } .fa-baseball-ball:before { content: "\f433"; } .fa-basketball-ball:before { content: "\f434"; } .fa-bath:before { content: "\f2cd"; } .fa-battery-empty:before { content: "\f244"; } .fa-battery-full:before { content: "\f240"; } .fa-battery-half:before { content: "\f242"; } .fa-battery-quarter:before { content: "\f243"; } .fa-battery-three-quarters:before { content: "\f241"; } .fa-bed:before { content: "\f236"; } .fa-beer:before { content: "\f0fc"; } .fa-behance:before { content: "\f1b4"; } .fa-behance-square:before { content: "\f1b5"; } .fa-bell:before { content: "\f0f3"; } .fa-bell-slash:before { content: "\f1f6"; } .fa-bezier-curve:before { content: "\f55b"; } .fa-bible:before { content: "\f647"; } .fa-bicycle:before { content: "\f206"; } .fa-bimobject:before { content: "\f378"; } .fa-binoculars:before { content: "\f1e5"; } .fa-birthday-cake:before { content: "\f1fd"; } .fa-bitbucket:before { content: "\f171"; } .fa-bitcoin:before { content: "\f379"; } .fa-bity:before { content: "\f37a"; } .fa-black-tie:before { content: "\f27e"; } .fa-blackberry:before { content: "\f37b"; } .fa-blender:before { content: "\f517"; } .fa-blender-phone:before { content: "\f6b6"; } .fa-blind:before { content: "\f29d"; } .fa-blogger:before { content: "\f37c"; } .fa-blogger-b:before { content: "\f37d"; } .fa-bluetooth:before { content: "\f293"; } .fa-bluetooth-b:before { content: "\f294"; } .fa-bold:before { content: "\f032"; } .fa-bolt:before { content: "\f0e7"; } .fa-bomb:before { content: "\f1e2"; } .fa-bone:before { content: "\f5d7"; } .fa-bong:before { content: "\f55c"; } .fa-book:before { content: "\f02d"; } .fa-book-dead:before { content: "\f6b7"; } .fa-book-open:before { content: "\f518"; } .fa-book-reader:before { content: "\f5da"; } .fa-bookmark:before { content: "\f02e"; } .fa-bowling-ball:before { content: "\f436"; } .fa-box:before { content: "\f466"; } .fa-box-open:before { content: "\f49e"; } .fa-boxes:before { content: "\f468"; } .fa-braille:before { content: "\f2a1"; } .fa-brain:before { content: "\f5dc"; } .fa-briefcase:before { content: "\f0b1"; } .fa-briefcase-medical:before { content: "\f469"; } .fa-broadcast-tower:before { content: "\f519"; } .fa-broom:before { content: "\f51a"; } .fa-brush:before { content: "\f55d"; } .fa-btc:before { content: "\f15a"; } .fa-bug:before { content: "\f188"; } .fa-building:before { content: "\f1ad"; } .fa-bullhorn:before { content: "\f0a1"; } .fa-bullseye:before { content: "\f140"; } .fa-burn:before { content: "\f46a"; } .fa-buromobelexperte:before { content: "\f37f"; } .fa-bus:before { content: "\f207"; } .fa-bus-alt:before { content: "\f55e"; } .fa-business-time:before { content: "\f64a"; } .fa-buysellads:before { content: "\f20d"; } .fa-calculator:before { content: "\f1ec"; } .fa-calendar:before { content: "\f133"; } .fa-calendar-alt:before { content: "\f073"; } .fa-calendar-check:before { content: "\f274"; } .fa-calendar-minus:before { content: "\f272"; } .fa-calendar-plus:before { content: "\f271"; } .fa-calendar-times:before { content: "\f273"; } .fa-camera:before { content: "\f030"; } .fa-camera-retro:before { content: "\f083"; } .fa-campground:before { content: "\f6bb"; } .fa-cannabis:before { content: "\f55f"; } .fa-capsules:before { content: "\f46b"; } .fa-car:before { content: "\f1b9"; } .fa-car-alt:before { content: "\f5de"; } .fa-car-battery:before { content: "\f5df"; } .fa-car-crash:before { content: "\f5e1"; } .fa-car-side:before { content: "\f5e4"; } .fa-caret-down:before { content: "\f0d7"; } .fa-caret-left:before { content: "\f0d9"; } .fa-caret-right:before { content: "\f0da"; } .fa-caret-square-down:before { content: "\f150"; } .fa-caret-square-left:before { content: "\f191"; } .fa-caret-square-right:before { content: "\f152"; } .fa-caret-square-up:before { content: "\f151"; } .fa-caret-up:before { content: "\f0d8"; } .fa-cart-arrow-down:before { content: "\f218"; } .fa-cart-plus:before { content: "\f217"; } .fa-cat:before { content: "\f6be"; } .fa-cc-amazon-pay:before { content: "\f42d"; } .fa-cc-amex:before { content: "\f1f3"; } .fa-cc-apple-pay:before { content: "\f416"; } .fa-cc-diners-club:before { content: "\f24c"; } .fa-cc-discover:before { content: "\f1f2"; } .fa-cc-jcb:before { content: "\f24b"; } .fa-cc-mastercard:before { content: "\f1f1"; } .fa-cc-paypal:before { content: "\f1f4"; } .fa-cc-stripe:before { content: "\f1f5"; } .fa-cc-visa:before { content: "\f1f0"; } .fa-centercode:before { content: "\f380"; } .fa-certificate:before { content: "\f0a3"; } .fa-chair:before { content: "\f6c0"; } .fa-chalkboard:before { content: "\f51b"; } .fa-chalkboard-teacher:before { content: "\f51c"; } .fa-charging-station:before { content: "\f5e7"; } .fa-chart-area:before { content: "\f1fe"; } .fa-chart-bar:before { content: "\f080"; } .fa-chart-line:before { content: "\f201"; } .fa-chart-pie:before { content: "\f200"; } .fa-check:before { content: "\f00c"; } .fa-check-circle:before { content: "\f058"; } .fa-check-double:before { content: "\f560"; } .fa-check-square:before { content: "\f14a"; } .fa-chess:before { content: "\f439"; } .fa-chess-bishop:before { content: "\f43a"; } .fa-chess-board:before { content: "\f43c"; } .fa-chess-king:before { content: "\f43f"; } .fa-chess-knight:before { content: "\f441"; } .fa-chess-pawn:before { content: "\f443"; } .fa-chess-queen:before { content: "\f445"; } .fa-chess-rook:before { content: "\f447"; } .fa-chevron-circle-down:before { content: "\f13a"; } .fa-chevron-circle-left:before { content: "\f137"; } .fa-chevron-circle-right:before { content: "\f138"; } .fa-chevron-circle-up:before { content: "\f139"; } .fa-chevron-down:before { content: "\f078"; } .fa-chevron-left:before { content: "\f053"; } .fa-chevron-right:before { content: "\f054"; } .fa-chevron-up:before { content: "\f077"; } .fa-child:before { content: "\f1ae"; } .fa-chrome:before { content: "\f268"; } .fa-church:before { content: "\f51d"; } .fa-circle:before { content: "\f111"; } .fa-circle-notch:before { content: "\f1ce"; } .fa-city:before { content: "\f64f"; } .fa-clipboard:before { content: "\f328"; } .fa-clipboard-check:before { content: "\f46c"; } .fa-clipboard-list:before { content: "\f46d"; } .fa-clock:before { content: "\f017"; } .fa-clone:before { content: "\f24d"; } .fa-closed-captioning:before { content: "\f20a"; } .fa-cloud:before { content: "\f0c2"; } .fa-cloud-download-alt:before { content: "\f381"; } .fa-cloud-meatball:before { content: "\f73b"; } .fa-cloud-moon:before { content: "\f6c3"; } .fa-cloud-moon-rain:before { content: "\f73c"; } .fa-cloud-rain:before { content: "\f73d"; } .fa-cloud-showers-heavy:before { content: "\f740"; } .fa-cloud-sun:before { content: "\f6c4"; } .fa-cloud-sun-rain:before { content: "\f743"; } .fa-cloud-upload-alt:before { content: "\f382"; } .fa-cloudscale:before { content: "\f383"; } .fa-cloudsmith:before { content: "\f384"; } .fa-cloudversify:before { content: "\f385"; } .fa-cocktail:before { content: "\f561"; } .fa-code:before { content: "\f121"; } .fa-code-branch:before { content: "\f126"; } .fa-codepen:before { content: "\f1cb"; } .fa-codiepie:before { content: "\f284"; } .fa-coffee:before { content: "\f0f4"; } .fa-cog:before { content: "\f013"; } .fa-cogs:before { content: "\f085"; } .fa-coins:before { content: "\f51e"; } .fa-columns:before { content: "\f0db"; } .fa-comment:before { content: "\f075"; } .fa-comment-alt:before { content: "\f27a"; } .fa-comment-dollar:before { content: "\f651"; } .fa-comment-dots:before { content: "\f4ad"; } .fa-comment-slash:before { content: "\f4b3"; } .fa-comments:before { content: "\f086"; } .fa-comments-dollar:before { content: "\f653"; } .fa-compact-disc:before { content: "\f51f"; } .fa-compass:before { content: "\f14e"; } .fa-compress:before { content: "\f066"; } .fa-concierge-bell:before { content: "\f562"; } .fa-connectdevelop:before { content: "\f20e"; } .fa-contao:before { content: "\f26d"; } .fa-cookie:before { content: "\f563"; } .fa-cookie-bite:before { content: "\f564"; } .fa-copy:before { content: "\f0c5"; } .fa-copyright:before { content: "\f1f9"; } .fa-couch:before { content: "\f4b8"; } .fa-cpanel:before { content: "\f388"; } .fa-creative-commons:before { content: "\f25e"; } .fa-creative-commons-by:before { content: "\f4e7"; } .fa-creative-commons-nc:before { content: "\f4e8"; } .fa-creative-commons-nc-eu:before { content: "\f4e9"; } .fa-creative-commons-nc-jp:before { content: "\f4ea"; } .fa-creative-commons-nd:before { content: "\f4eb"; } .fa-creative-commons-pd:before { content: "\f4ec"; } .fa-creative-commons-pd-alt:before { content: "\f4ed"; } .fa-creative-commons-remix:before { content: "\f4ee"; } .fa-creative-commons-sa:before { content: "\f4ef"; } .fa-creative-commons-sampling:before { content: "\f4f0"; } .fa-creative-commons-sampling-plus:before { content: "\f4f1"; } .fa-creative-commons-share:before { content: "\f4f2"; } .fa-creative-commons-zero:before { content: "\f4f3"; } .fa-credit-card:before { content: "\f09d"; } .fa-critical-role:before { content: "\f6c9"; } .fa-crop:before { content: "\f125"; } .fa-crop-alt:before { content: "\f565"; } .fa-cross:before { content: "\f654"; } .fa-crosshairs:before { content: "\f05b"; } .fa-crow:before { content: "\f520"; } .fa-crown:before { content: "\f521"; } .fa-css3:before { content: "\f13c"; } .fa-css3-alt:before { content: "\f38b"; } .fa-cube:before { content: "\f1b2"; } .fa-cubes:before { content: "\f1b3"; } .fa-cut:before { content: "\f0c4"; } .fa-cuttlefish:before { content: "\f38c"; } .fa-d-and-d:before { content: "\f38d"; } .fa-d-and-d-beyond:before { content: "\f6ca"; } .fa-dashcube:before { content: "\f210"; } .fa-database:before { content: "\f1c0"; } .fa-deaf:before { content: "\f2a4"; } .fa-delicious:before { content: "\f1a5"; } .fa-democrat:before { content: "\f747"; } .fa-deploydog:before { content: "\f38e"; } .fa-deskpro:before { content: "\f38f"; } .fa-desktop:before { content: "\f108"; } .fa-dev:before { content: "\f6cc"; } .fa-deviantart:before { content: "\f1bd"; } .fa-dharmachakra:before { content: "\f655"; } .fa-diagnoses:before { content: "\f470"; } .fa-dice:before { content: "\f522"; } .fa-dice-d20:before { content: "\f6cf"; } .fa-dice-d6:before { content: "\f6d1"; } .fa-dice-five:before { content: "\f523"; } .fa-dice-four:before { content: "\f524"; } .fa-dice-one:before { content: "\f525"; } .fa-dice-six:before { content: "\f526"; } .fa-dice-three:before { content: "\f527"; } .fa-dice-two:before { content: "\f528"; } .fa-digg:before { content: "\f1a6"; } .fa-digital-ocean:before { content: "\f391"; } .fa-digital-tachograph:before { content: "\f566"; } .fa-directions:before { content: "\f5eb"; } .fa-discord:before { content: "\f392"; } .fa-discourse:before { content: "\f393"; } .fa-divide:before { content: "\f529"; } .fa-dizzy:before { content: "\f567"; } .fa-dna:before { content: "\f471"; } .fa-dochub:before { content: "\f394"; } .fa-docker:before { content: "\f395"; } .fa-dog:before { content: "\f6d3"; } .fa-dollar-sign:before { content: "\f155"; } .fa-dolly:before { content: "\f472"; } .fa-dolly-flatbed:before { content: "\f474"; } .fa-donate:before { content: "\f4b9"; } .fa-door-closed:before { content: "\f52a"; } .fa-door-open:before { content: "\f52b"; } .fa-dot-circle:before { content: "\f192"; } .fa-dove:before { content: "\f4ba"; } .fa-download:before { content: "\f019"; } .fa-draft2digital:before { content: "\f396"; } .fa-drafting-compass:before { content: "\f568"; } .fa-dragon:before { content: "\f6d5"; } .fa-draw-polygon:before { content: "\f5ee"; } .fa-dribbble:before { content: "\f17d"; } .fa-dribbble-square:before { content: "\f397"; } .fa-dropbox:before { content: "\f16b"; } .fa-drum:before { content: "\f569"; } .fa-drum-steelpan:before { content: "\f56a"; } .fa-drumstick-bite:before { content: "\f6d7"; } .fa-drupal:before { content: "\f1a9"; } .fa-dumbbell:before { content: "\f44b"; } .fa-dungeon:before { content: "\f6d9"; } .fa-dyalog:before { content: "\f399"; } .fa-earlybirds:before { content: "\f39a"; } .fa-ebay:before { content: "\f4f4"; } .fa-edge:before { content: "\f282"; } .fa-edit:before { content: "\f044"; } .fa-eject:before { content: "\f052"; } .fa-elementor:before { content: "\f430"; } .fa-ellipsis-h:before { content: "\f141"; } .fa-ellipsis-v:before { content: "\f142"; } .fa-ello:before { content: "\f5f1"; } .fa-ember:before { content: "\f423"; } .fa-empire:before { content: "\f1d1"; } .fa-envelope:before { content: "\f0e0"; } .fa-envelope-open:before { content: "\f2b6"; } .fa-envelope-open-text:before { content: "\f658"; } .fa-envelope-square:before { content: "\f199"; } .fa-envira:before { content: "\f299"; } .fa-equals:before { content: "\f52c"; } .fa-eraser:before { content: "\f12d"; } .fa-erlang:before { content: "\f39d"; } .fa-ethereum:before { content: "\f42e"; } .fa-etsy:before { content: "\f2d7"; } .fa-euro-sign:before { content: "\f153"; } .fa-exchange-alt:before { content: "\f362"; } .fa-exclamation:before { content: "\f12a"; } .fa-exclamation-circle:before { content: "\f06a"; } .fa-exclamation-triangle:before { content: "\f071"; } .fa-expand:before { content: "\f065"; } .fa-expand-arrows-alt:before { content: "\f31e"; } .fa-expeditedssl:before { content: "\f23e"; } .fa-external-link-alt:before { content: "\f35d"; } .fa-external-link-square-alt:before { content: "\f360"; } .fa-eye:before { content: "\f06e"; } .fa-eye-dropper:before { content: "\f1fb"; } .fa-eye-slash:before { content: "\f070"; } .fa-facebook:before { content: "\f09a"; } .fa-facebook-f:before { content: "\f39e"; } .fa-facebook-messenger:before { content: "\f39f"; } .fa-facebook-square:before { content: "\f082"; } .fa-fantasy-flight-games:before { content: "\f6dc"; } .fa-fast-backward:before { content: "\f049"; } .fa-fast-forward:before { content: "\f050"; } .fa-fax:before { content: "\f1ac"; } .fa-feather:before { content: "\f52d"; } .fa-feather-alt:before { content: "\f56b"; } .fa-female:before { content: "\f182"; } .fa-fighter-jet:before { content: "\f0fb"; } .fa-file:before { content: "\f15b"; } .fa-file-alt:before { content: "\f15c"; } .fa-file-archive:before { content: "\f1c6"; } .fa-file-audio:before { content: "\f1c7"; } .fa-file-code:before { content: "\f1c9"; } .fa-file-contract:before { content: "\f56c"; } .fa-file-csv:before { content: "\f6dd"; } .fa-file-download:before { content: "\f56d"; } .fa-file-excel:before { content: "\f1c3"; } .fa-file-export:before { content: "\f56e"; } .fa-file-image:before { content: "\f1c5"; } .fa-file-import:before { content: "\f56f"; } .fa-file-invoice:before { content: "\f570"; } .fa-file-invoice-dollar:before { content: "\f571"; } .fa-file-medical:before { content: "\f477"; } .fa-file-medical-alt:before { content: "\f478"; } .fa-file-pdf:before { content: "\f1c1"; } .fa-file-powerpoint:before { content: "\f1c4"; } .fa-file-prescription:before { content: "\f572"; } .fa-file-signature:before { content: "\f573"; } .fa-file-upload:before { content: "\f574"; } .fa-file-video:before { content: "\f1c8"; } .fa-file-word:before { content: "\f1c2"; } .fa-fill:before { content: "\f575"; } .fa-fill-drip:before { content: "\f576"; } .fa-film:before { content: "\f008"; } .fa-filter:before { content: "\f0b0"; } .fa-fingerprint:before { content: "\f577"; } .fa-fire:before { content: "\f06d"; } .fa-fire-extinguisher:before { content: "\f134"; } .fa-firefox:before { content: "\f269"; } .fa-first-aid:before { content: "\f479"; } .fa-first-order:before { content: "\f2b0"; } .fa-first-order-alt:before { content: "\f50a"; } .fa-firstdraft:before { content: "\f3a1"; } .fa-fish:before { content: "\f578"; } .fa-fist-raised:before { content: "\f6de"; } .fa-flag:before { content: "\f024"; } .fa-flag-checkered:before { content: "\f11e"; } .fa-flag-usa:before { content: "\f74d"; } .fa-flask:before { content: "\f0c3"; } .fa-flickr:before { content: "\f16e"; } .fa-flipboard:before { content: "\f44d"; } .fa-flushed:before { content: "\f579"; } .fa-fly:before { content: "\f417"; } .fa-folder:before { content: "\f07b"; } .fa-folder-minus:before { content: "\f65d"; } .fa-folder-open:before { content: "\f07c"; } .fa-folder-plus:before { content: "\f65e"; } .fa-font:before { content: "\f031"; } .fa-font-awesome:before { content: "\f2b4"; } .fa-font-awesome-alt:before { content: "\f35c"; } .fa-font-awesome-flag:before { content: "\f425"; } .fa-font-awesome-logo-full:before { content: "\f4e6"; } .fa-fonticons:before { content: "\f280"; } .fa-fonticons-fi:before { content: "\f3a2"; } .fa-football-ball:before { content: "\f44e"; } .fa-fort-awesome:before { content: "\f286"; } .fa-fort-awesome-alt:before { content: "\f3a3"; } .fa-forumbee:before { content: "\f211"; } .fa-forward:before { content: "\f04e"; } .fa-foursquare:before { content: "\f180"; } .fa-free-code-camp:before { content: "\f2c5"; } .fa-freebsd:before { content: "\f3a4"; } .fa-frog:before { content: "\f52e"; } .fa-frown:before { content: "\f119"; } .fa-frown-open:before { content: "\f57a"; } .fa-fulcrum:before { content: "\f50b"; } .fa-funnel-dollar:before { content: "\f662"; } .fa-futbol:before { content: "\f1e3"; } .fa-galactic-republic:before { content: "\f50c"; } .fa-galactic-senate:before { content: "\f50d"; } .fa-gamepad:before { content: "\f11b"; } .fa-gas-pump:before { content: "\f52f"; } .fa-gavel:before { content: "\f0e3"; } .fa-gem:before { content: "\f3a5"; } .fa-genderless:before { content: "\f22d"; } .fa-get-pocket:before { content: "\f265"; } .fa-gg:before { content: "\f260"; } .fa-gg-circle:before { content: "\f261"; } .fa-ghost:before { content: "\f6e2"; } .fa-gift:before { content: "\f06b"; } .fa-git:before { content: "\f1d3"; } .fa-git-square:before { content: "\f1d2"; } .fa-github:before { content: "\f09b"; } .fa-github-alt:before { content: "\f113"; } .fa-github-square:before { content: "\f092"; } .fa-gitkraken:before { content: "\f3a6"; } .fa-gitlab:before { content: "\f296"; } .fa-gitter:before { content: "\f426"; } .fa-glass-martini:before { content: "\f000"; } .fa-glass-martini-alt:before { content: "\f57b"; } .fa-glasses:before { content: "\f530"; } .fa-glide:before { content: "\f2a5"; } .fa-glide-g:before { content: "\f2a6"; } .fa-globe:before { content: "\f0ac"; } .fa-globe-africa:before { content: "\f57c"; } .fa-globe-americas:before { content: "\f57d"; } .fa-globe-asia:before { content: "\f57e"; } .fa-gofore:before { content: "\f3a7"; } .fa-golf-ball:before { content: "\f450"; } .fa-goodreads:before { content: "\f3a8"; } .fa-goodreads-g:before { content: "\f3a9"; } .fa-google:before { content: "\f1a0"; } .fa-google-drive:before { content: "\f3aa"; } .fa-google-play:before { content: "\f3ab"; } .fa-google-plus:before { content: "\f2b3"; } .fa-google-plus-g:before { content: "\f0d5"; } .fa-google-plus-square:before { content: "\f0d4"; } .fa-google-wallet:before { content: "\f1ee"; } .fa-gopuram:before { content: "\f664"; } .fa-graduation-cap:before { content: "\f19d"; } .fa-gratipay:before { content: "\f184"; } .fa-grav:before { content: "\f2d6"; } .fa-greater-than:before { content: "\f531"; } .fa-greater-than-equal:before { content: "\f532"; } .fa-grimace:before { content: "\f57f"; } .fa-grin:before { content: "\f580"; } .fa-grin-alt:before { content: "\f581"; } .fa-grin-beam:before { content: "\f582"; } .fa-grin-beam-sweat:before { content: "\f583"; } .fa-grin-hearts:before { content: "\f584"; } .fa-grin-squint:before { content: "\f585"; } .fa-grin-squint-tears:before { content: "\f586"; } .fa-grin-stars:before { content: "\f587"; } .fa-grin-tears:before { content: "\f588"; } .fa-grin-tongue:before { content: "\f589"; } .fa-grin-tongue-squint:before { content: "\f58a"; } .fa-grin-tongue-wink:before { content: "\f58b"; } .fa-grin-wink:before { content: "\f58c"; } .fa-grip-horizontal:before { content: "\f58d"; } .fa-grip-vertical:before { content: "\f58e"; } .fa-gripfire:before { content: "\f3ac"; } .fa-grunt:before { content: "\f3ad"; } .fa-gulp:before { content: "\f3ae"; } .fa-h-square:before { content: "\f0fd"; } .fa-hacker-news:before { content: "\f1d4"; } .fa-hacker-news-square:before { content: "\f3af"; } .fa-hackerrank:before { content: "\f5f7"; } .fa-hammer:before { content: "\f6e3"; } .fa-hamsa:before { content: "\f665"; } .fa-hand-holding:before { content: "\f4bd"; } .fa-hand-holding-heart:before { content: "\f4be"; } .fa-hand-holding-usd:before { content: "\f4c0"; } .fa-hand-lizard:before { content: "\f258"; } .fa-hand-paper:before { content: "\f256"; } .fa-hand-peace:before { content: "\f25b"; } .fa-hand-point-down:before { content: "\f0a7"; } .fa-hand-point-left:before { content: "\f0a5"; } .fa-hand-point-right:before { content: "\f0a4"; } .fa-hand-point-up:before { content: "\f0a6"; } .fa-hand-pointer:before { content: "\f25a"; } .fa-hand-rock:before { content: "\f255"; } .fa-hand-scissors:before { content: "\f257"; } .fa-hand-spock:before { content: "\f259"; } .fa-hands:before { content: "\f4c2"; } .fa-hands-helping:before { content: "\f4c4"; } .fa-handshake:before { content: "\f2b5"; } .fa-hanukiah:before { content: "\f6e6"; } .fa-hashtag:before { content: "\f292"; } .fa-hat-wizard:before { content: "\f6e8"; } .fa-haykal:before { content: "\f666"; } .fa-hdd:before { content: "\f0a0"; } .fa-heading:before { content: "\f1dc"; } .fa-headphones:before { content: "\f025"; } .fa-headphones-alt:before { content: "\f58f"; } .fa-headset:before { content: "\f590"; } .fa-heart:before { content: "\f004"; } .fa-heartbeat:before { content: "\f21e"; } .fa-helicopter:before { content: "\f533"; } .fa-highlighter:before { content: "\f591"; } .fa-hiking:before { content: "\f6ec"; } .fa-hippo:before { content: "\f6ed"; } .fa-hips:before { content: "\f452"; } .fa-hire-a-helper:before { content: "\f3b0"; } .fa-history:before { content: "\f1da"; } .fa-hockey-puck:before { content: "\f453"; } .fa-home:before { content: "\f015"; } .fa-hooli:before { content: "\f427"; } .fa-hornbill:before { content: "\f592"; } .fa-horse:before { content: "\f6f0"; } .fa-hospital:before { content: "\f0f8"; } .fa-hospital-alt:before { content: "\f47d"; } .fa-hospital-symbol:before { content: "\f47e"; } .fa-hot-tub:before { content: "\f593"; } .fa-hotel:before { content: "\f594"; } .fa-hotjar:before { content: "\f3b1"; } .fa-hourglass:before { content: "\f254"; } .fa-hourglass-end:before { content: "\f253"; } .fa-hourglass-half:before { content: "\f252"; } .fa-hourglass-start:before { content: "\f251"; } .fa-house-damage:before { content: "\f6f1"; } .fa-houzz:before { content: "\f27c"; } .fa-hryvnia:before { content: "\f6f2"; } .fa-html5:before { content: "\f13b"; } .fa-hubspot:before { content: "\f3b2"; } .fa-i-cursor:before { content: "\f246"; } .fa-id-badge:before { content: "\f2c1"; } .fa-id-card:before { content: "\f2c2"; } .fa-id-card-alt:before { content: "\f47f"; } .fa-image:before { content: "\f03e"; } .fa-images:before { content: "\f302"; } .fa-imdb:before { content: "\f2d8"; } .fa-inbox:before { content: "\f01c"; } .fa-indent:before { content: "\f03c"; } .fa-industry:before { content: "\f275"; } .fa-infinity:before { content: "\f534"; } .fa-info:before { content: "\f129"; } .fa-info-circle:before { content: "\f05a"; } .fa-instagram:before { content: "\f16d"; } .fa-internet-explorer:before { content: "\f26b"; } .fa-ioxhost:before { content: "\f208"; } .fa-italic:before { content: "\f033"; } .fa-itunes:before { content: "\f3b4"; } .fa-itunes-note:before { content: "\f3b5"; } .fa-java:before { content: "\f4e4"; } .fa-jedi:before { content: "\f669"; } .fa-jedi-order:before { content: "\f50e"; } .fa-jenkins:before { content: "\f3b6"; } .fa-joget:before { content: "\f3b7"; } .fa-joint:before { content: "\f595"; } .fa-joomla:before { content: "\f1aa"; } .fa-journal-whills:before { content: "\f66a"; } .fa-js:before { content: "\f3b8"; } .fa-js-square:before { content: "\f3b9"; } .fa-jsfiddle:before { content: "\f1cc"; } .fa-kaaba:before { content: "\f66b"; } .fa-kaggle:before { content: "\f5fa"; } .fa-key:before { content: "\f084"; } .fa-keybase:before { content: "\f4f5"; } .fa-keyboard:before { content: "\f11c"; } .fa-keycdn:before { content: "\f3ba"; } .fa-khanda:before { content: "\f66d"; } .fa-kickstarter:before { content: "\f3bb"; } .fa-kickstarter-k:before { content: "\f3bc"; } .fa-kiss:before { content: "\f596"; } .fa-kiss-beam:before { content: "\f597"; } .fa-kiss-wink-heart:before { content: "\f598"; } .fa-kiwi-bird:before { content: "\f535"; } .fa-korvue:before { content: "\f42f"; } .fa-landmark:before { content: "\f66f"; } .fa-language:before { content: "\f1ab"; } .fa-laptop:before { content: "\f109"; } .fa-laptop-code:before { content: "\f5fc"; } .fa-laravel:before { content: "\f3bd"; } .fa-lastfm:before { content: "\f202"; } .fa-lastfm-square:before { content: "\f203"; } .fa-laugh:before { content: "\f599"; } .fa-laugh-beam:before { content: "\f59a"; } .fa-laugh-squint:before { content: "\f59b"; } .fa-laugh-wink:before { content: "\f59c"; } .fa-layer-group:before { content: "\f5fd"; } .fa-leaf:before { content: "\f06c"; } .fa-leanpub:before { content: "\f212"; } .fa-lemon:before { content: "\f094"; } .fa-less:before { content: "\f41d"; } .fa-less-than:before { content: "\f536"; } .fa-less-than-equal:before { content: "\f537"; } .fa-level-down-alt:before { content: "\f3be"; } .fa-level-up-alt:before { content: "\f3bf"; } .fa-life-ring:before { content: "\f1cd"; } .fa-lightbulb:before { content: "\f0eb"; } .fa-line:before { content: "\f3c0"; } .fa-link:before { content: "\f0c1"; } .fa-linkedin:before { content: "\f08c"; } .fa-linkedin-in:before { content: "\f0e1"; } .fa-linode:before { content: "\f2b8"; } .fa-linux:before { content: "\f17c"; } .fa-lira-sign:before { content: "\f195"; } .fa-list:before { content: "\f03a"; } .fa-list-alt:before { content: "\f022"; } .fa-list-ol:before { content: "\f0cb"; } .fa-list-ul:before { content: "\f0ca"; } .fa-location-arrow:before { content: "\f124"; } .fa-lock:before { content: "\f023"; } .fa-lock-open:before { content: "\f3c1"; } .fa-long-arrow-alt-down:before { content: "\f309"; } .fa-long-arrow-alt-left:before { content: "\f30a"; } .fa-long-arrow-alt-right:before { content: "\f30b"; } .fa-long-arrow-alt-up:before { content: "\f30c"; } .fa-low-vision:before { content: "\f2a8"; } .fa-luggage-cart:before { content: "\f59d"; } .fa-lyft:before { content: "\f3c3"; } .fa-magento:before { content: "\f3c4"; } .fa-magic:before { content: "\f0d0"; } .fa-magnet:before { content: "\f076"; } .fa-mail-bulk:before { content: "\f674"; } .fa-mailchimp:before { content: "\f59e"; } .fa-male:before { content: "\f183"; } .fa-mandalorian:before { content: "\f50f"; } .fa-map:before { content: "\f279"; } .fa-map-marked:before { content: "\f59f"; } .fa-map-marked-alt:before { content: "\f5a0"; } .fa-map-marker:before { content: "\f041"; } .fa-map-marker-alt:before { content: "\f3c5"; } .fa-map-pin:before { content: "\f276"; } .fa-map-signs:before { content: "\f277"; } .fa-markdown:before { content: "\f60f"; } .fa-marker:before { content: "\f5a1"; } .fa-mars:before { content: "\f222"; } .fa-mars-double:before { content: "\f227"; } .fa-mars-stroke:before { content: "\f229"; } .fa-mars-stroke-h:before { content: "\f22b"; } .fa-mars-stroke-v:before { content: "\f22a"; } .fa-mask:before { content: "\f6fa"; } .fa-mastodon:before { content: "\f4f6"; } .fa-maxcdn:before { content: "\f136"; } .fa-medal:before { content: "\f5a2"; } .fa-medapps:before { content: "\f3c6"; } .fa-medium:before { content: "\f23a"; } .fa-medium-m:before { content: "\f3c7"; } .fa-medkit:before { content: "\f0fa"; } .fa-medrt:before { content: "\f3c8"; } .fa-meetup:before { content: "\f2e0"; } .fa-megaport:before { content: "\f5a3"; } .fa-meh:before { content: "\f11a"; } .fa-meh-blank:before { content: "\f5a4"; } .fa-meh-rolling-eyes:before { content: "\f5a5"; } .fa-memory:before { content: "\f538"; } .fa-menorah:before { content: "\f676"; } .fa-mercury:before { content: "\f223"; } .fa-meteor:before { content: "\f753"; } .fa-microchip:before { content: "\f2db"; } .fa-microphone:before { content: "\f130"; } .fa-microphone-alt:before { content: "\f3c9"; } .fa-microphone-alt-slash:before { content: "\f539"; } .fa-microphone-slash:before { content: "\f131"; } .fa-microscope:before { content: "\f610"; } .fa-microsoft:before { content: "\f3ca"; } .fa-minus:before { content: "\f068"; } .fa-minus-circle:before { content: "\f056"; } .fa-minus-square:before { content: "\f146"; } .fa-mix:before { content: "\f3cb"; } .fa-mixcloud:before { content: "\f289"; } .fa-mizuni:before { content: "\f3cc"; } .fa-mobile:before { content: "\f10b"; } .fa-mobile-alt:before { content: "\f3cd"; } .fa-modx:before { content: "\f285"; } .fa-monero:before { content: "\f3d0"; } .fa-money-bill:before { content: "\f0d6"; } .fa-money-bill-alt:before { content: "\f3d1"; } .fa-money-bill-wave:before { content: "\f53a"; } .fa-money-bill-wave-alt:before { content: "\f53b"; } .fa-money-check:before { content: "\f53c"; } .fa-money-check-alt:before { content: "\f53d"; } .fa-monument:before { content: "\f5a6"; } .fa-moon:before { content: "\f186"; } .fa-mortar-pestle:before { content: "\f5a7"; } .fa-mosque:before { content: "\f678"; } .fa-motorcycle:before { content: "\f21c"; } .fa-mountain:before { content: "\f6fc"; } .fa-mouse-pointer:before { content: "\f245"; } .fa-music:before { content: "\f001"; } .fa-napster:before { content: "\f3d2"; } .fa-neos:before { content: "\f612"; } .fa-network-wired:before { content: "\f6ff"; } .fa-neuter:before { content: "\f22c"; } .fa-newspaper:before { content: "\f1ea"; } .fa-nimblr:before { content: "\f5a8"; } .fa-nintendo-switch:before { content: "\f418"; } .fa-node:before { content: "\f419"; } .fa-node-js:before { content: "\f3d3"; } .fa-not-equal:before { content: "\f53e"; } .fa-notes-medical:before { content: "\f481"; } .fa-npm:before { content: "\f3d4"; } .fa-ns8:before { content: "\f3d5"; } .fa-nutritionix:before { content: "\f3d6"; } .fa-object-group:before { content: "\f247"; } .fa-object-ungroup:before { content: "\f248"; } .fa-odnoklassniki:before { content: "\f263"; } .fa-odnoklassniki-square:before { content: "\f264"; } .fa-oil-can:before { content: "\f613"; } .fa-old-republic:before { content: "\f510"; } .fa-om:before { content: "\f679"; } .fa-opencart:before { content: "\f23d"; } .fa-openid:before { content: "\f19b"; } .fa-opera:before { content: "\f26a"; } .fa-optin-monster:before { content: "\f23c"; } .fa-osi:before { content: "\f41a"; } .fa-otter:before { content: "\f700"; } .fa-outdent:before { content: "\f03b"; } .fa-page4:before { content: "\f3d7"; } .fa-pagelines:before { content: "\f18c"; } .fa-paint-brush:before { content: "\f1fc"; } .fa-paint-roller:before { content: "\f5aa"; } .fa-palette:before { content: "\f53f"; } .fa-palfed:before { content: "\f3d8"; } .fa-pallet:before { content: "\f482"; } .fa-paper-plane:before { content: "\f1d8"; } .fa-paperclip:before { content: "\f0c6"; } .fa-parachute-box:before { content: "\f4cd"; } .fa-paragraph:before { content: "\f1dd"; } .fa-parking:before { content: "\f540"; } .fa-passport:before { content: "\f5ab"; } .fa-pastafarianism:before { content: "\f67b"; } .fa-paste:before { content: "\f0ea"; } .fa-patreon:before { content: "\f3d9"; } .fa-pause:before { content: "\f04c"; } .fa-pause-circle:before { content: "\f28b"; } .fa-paw:before { content: "\f1b0"; } .fa-paypal:before { content: "\f1ed"; } .fa-peace:before { content: "\f67c"; } .fa-pen:before { content: "\f304"; } .fa-pen-alt:before { content: "\f305"; } .fa-pen-fancy:before { content: "\f5ac"; } .fa-pen-nib:before { content: "\f5ad"; } .fa-pen-square:before { content: "\f14b"; } .fa-pencil-alt:before { content: "\f303"; } .fa-pencil-ruler:before { content: "\f5ae"; } .fa-penny-arcade:before { content: "\f704"; } .fa-people-carry:before { content: "\f4ce"; } .fa-percent:before { content: "\f295"; } .fa-percentage:before { content: "\f541"; } .fa-periscope:before { content: "\f3da"; } .fa-person-booth:before { content: "\f756"; } .fa-phabricator:before { content: "\f3db"; } .fa-phoenix-framework:before { content: "\f3dc"; } .fa-phoenix-squadron:before { content: "\f511"; } .fa-phone:before { content: "\f095"; } .fa-phone-slash:before { content: "\f3dd"; } .fa-phone-square:before { content: "\f098"; } .fa-phone-volume:before { content: "\f2a0"; } .fa-php:before { content: "\f457"; } .fa-pied-piper:before { content: "\f2ae"; } .fa-pied-piper-alt:before { content: "\f1a8"; } .fa-pied-piper-hat:before { content: "\f4e5"; } .fa-pied-piper-pp:before { content: "\f1a7"; } .fa-piggy-bank:before { content: "\f4d3"; } .fa-pills:before { content: "\f484"; } .fa-pinterest:before { content: "\f0d2"; } .fa-pinterest-p:before { content: "\f231"; } .fa-pinterest-square:before { content: "\f0d3"; } .fa-place-of-worship:before { content: "\f67f"; } .fa-plane:before { content: "\f072"; } .fa-plane-arrival:before { content: "\f5af"; } .fa-plane-departure:before { content: "\f5b0"; } .fa-play:before { content: "\f04b"; } .fa-play-circle:before { content: "\f144"; } .fa-playstation:before { content: "\f3df"; } .fa-plug:before { content: "\f1e6"; } .fa-plus:before { content: "\f067"; } .fa-plus-circle:before { content: "\f055"; } .fa-plus-square:before { content: "\f0fe"; } .fa-podcast:before { content: "\f2ce"; } .fa-poll:before { content: "\f681"; } .fa-poll-h:before { content: "\f682"; } .fa-poo:before { content: "\f2fe"; } .fa-poo-storm:before { content: "\f75a"; } .fa-poop:before { content: "\f619"; } .fa-portrait:before { content: "\f3e0"; } .fa-pound-sign:before { content: "\f154"; } .fa-power-off:before { content: "\f011"; } .fa-pray:before { content: "\f683"; } .fa-praying-hands:before { content: "\f684"; } .fa-prescription:before { content: "\f5b1"; } .fa-prescription-bottle:before { content: "\f485"; } .fa-prescription-bottle-alt:before { content: "\f486"; } .fa-print:before { content: "\f02f"; } .fa-procedures:before { content: "\f487"; } .fa-product-hunt:before { content: "\f288"; } .fa-project-diagram:before { content: "\f542"; } .fa-pushed:before { content: "\f3e1"; } .fa-puzzle-piece:before { content: "\f12e"; } .fa-python:before { content: "\f3e2"; } .fa-qq:before { content: "\f1d6"; } .fa-qrcode:before { content: "\f029"; } .fa-question:before { content: "\f128"; } .fa-question-circle:before { content: "\f059"; } .fa-quidditch:before { content: "\f458"; } .fa-quinscape:before { content: "\f459"; } .fa-quora:before { content: "\f2c4"; } .fa-quote-left:before { content: "\f10d"; } .fa-quote-right:before { content: "\f10e"; } .fa-quran:before { content: "\f687"; } .fa-r-project:before { content: "\f4f7"; } .fa-rainbow:before { content: "\f75b"; } .fa-random:before { content: "\f074"; } .fa-ravelry:before { content: "\f2d9"; } .fa-react:before { content: "\f41b"; } .fa-reacteurope:before { content: "\f75d"; } .fa-readme:before { content: "\f4d5"; } .fa-rebel:before { content: "\f1d0"; } .fa-receipt:before { content: "\f543"; } .fa-recycle:before { content: "\f1b8"; } .fa-red-river:before { content: "\f3e3"; } .fa-reddit:before { content: "\f1a1"; } .fa-reddit-alien:before { content: "\f281"; } .fa-reddit-square:before { content: "\f1a2"; } .fa-redo:before { content: "\f01e"; } .fa-redo-alt:before { content: "\f2f9"; } .fa-registered:before { content: "\f25d"; } .fa-renren:before { content: "\f18b"; } .fa-reply:before { content: "\f3e5"; } .fa-reply-all:before { content: "\f122"; } .fa-replyd:before { content: "\f3e6"; } .fa-republican:before { content: "\f75e"; } .fa-researchgate:before { content: "\f4f8"; } .fa-resolving:before { content: "\f3e7"; } .fa-retweet:before { content: "\f079"; } .fa-rev:before { content: "\f5b2"; } .fa-ribbon:before { content: "\f4d6"; } .fa-ring:before { content: "\f70b"; } .fa-road:before { content: "\f018"; } .fa-robot:before { content: "\f544"; } .fa-rocket:before { content: "\f135"; } .fa-rocketchat:before { content: "\f3e8"; } .fa-rockrms:before { content: "\f3e9"; } .fa-route:before { content: "\f4d7"; } .fa-rss:before { content: "\f09e"; } .fa-rss-square:before { content: "\f143"; } .fa-ruble-sign:before { content: "\f158"; } .fa-ruler:before { content: "\f545"; } .fa-ruler-combined:before { content: "\f546"; } .fa-ruler-horizontal:before { content: "\f547"; } .fa-ruler-vertical:before { content: "\f548"; } .fa-running:before { content: "\f70c"; } .fa-rupee-sign:before { content: "\f156"; } .fa-sad-cry:before { content: "\f5b3"; } .fa-sad-tear:before { content: "\f5b4"; } .fa-safari:before { content: "\f267"; } .fa-sass:before { content: "\f41e"; } .fa-save:before { content: "\f0c7"; } .fa-schlix:before { content: "\f3ea"; } .fa-school:before { content: "\f549"; } .fa-screwdriver:before { content: "\f54a"; } .fa-scribd:before { content: "\f28a"; } .fa-scroll:before { content: "\f70e"; } .fa-search:before { content: "\f002"; } .fa-search-dollar:before { content: "\f688"; } .fa-search-location:before { content: "\f689"; } .fa-search-minus:before { content: "\f010"; } .fa-search-plus:before { content: "\f00e"; } .fa-searchengin:before { content: "\f3eb"; } .fa-seedling:before { content: "\f4d8"; } .fa-sellcast:before { content: "\f2da"; } .fa-sellsy:before { content: "\f213"; } .fa-server:before { content: "\f233"; } .fa-servicestack:before { content: "\f3ec"; } .fa-shapes:before { content: "\f61f"; } .fa-share:before { content: "\f064"; } .fa-share-alt:before { content: "\f1e0"; } .fa-share-alt-square:before { content: "\f1e1"; } .fa-share-square:before { content: "\f14d"; } .fa-shekel-sign:before { content: "\f20b"; } .fa-shield-alt:before { content: "\f3ed"; } .fa-ship:before { content: "\f21a"; } .fa-shipping-fast:before { content: "\f48b"; } .fa-shirtsinbulk:before { content: "\f214"; } .fa-shoe-prints:before { content: "\f54b"; } .fa-shopping-bag:before { content: "\f290"; } .fa-shopping-basket:before { content: "\f291"; } .fa-shopping-cart:before { content: "\f07a"; } .fa-shopware:before { content: "\f5b5"; } .fa-shower:before { content: "\f2cc"; } .fa-shuttle-van:before { content: "\f5b6"; } .fa-sign:before { content: "\f4d9"; } .fa-sign-in-alt:before { content: "\f2f6"; } .fa-sign-language:before { content: "\f2a7"; } .fa-sign-out-alt:before { content: "\f2f5"; } .fa-signal:before { content: "\f012"; } .fa-signature:before { content: "\f5b7"; } .fa-simplybuilt:before { content: "\f215"; } .fa-sistrix:before { content: "\f3ee"; } .fa-sitemap:before { content: "\f0e8"; } .fa-sith:before { content: "\f512"; } .fa-skull:before { content: "\f54c"; } .fa-skull-crossbones:before { content: "\f714"; } .fa-skyatlas:before { content: "\f216"; } .fa-skype:before { content: "\f17e"; } .fa-slack:before { content: "\f198"; } .fa-slack-hash:before { content: "\f3ef"; } .fa-slash:before { content: "\f715"; } .fa-sliders-h:before { content: "\f1de"; } .fa-slideshare:before { content: "\f1e7"; } .fa-smile:before { content: "\f118"; } .fa-smile-beam:before { content: "\f5b8"; } .fa-smile-wink:before { content: "\f4da"; } .fa-smog:before { content: "\f75f"; } .fa-smoking:before { content: "\f48d"; } .fa-smoking-ban:before { content: "\f54d"; } .fa-snapchat:before { content: "\f2ab"; } .fa-snapchat-ghost:before { content: "\f2ac"; } .fa-snapchat-square:before { content: "\f2ad"; } .fa-snowflake:before { content: "\f2dc"; } .fa-socks:before { content: "\f696"; } .fa-solar-panel:before { content: "\f5ba"; } .fa-sort:before { content: "\f0dc"; } .fa-sort-alpha-down:before { content: "\f15d"; } .fa-sort-alpha-up:before { content: "\f15e"; } .fa-sort-amount-down:before { content: "\f160"; } .fa-sort-amount-up:before { content: "\f161"; } .fa-sort-down:before { content: "\f0dd"; } .fa-sort-numeric-down:before { content: "\f162"; } .fa-sort-numeric-up:before { content: "\f163"; } .fa-sort-up:before { content: "\f0de"; } .fa-soundcloud:before { content: "\f1be"; } .fa-spa:before { content: "\f5bb"; } .fa-space-shuttle:before { content: "\f197"; } .fa-speakap:before { content: "\f3f3"; } .fa-spider:before { content: "\f717"; } .fa-spinner:before { content: "\f110"; } .fa-splotch:before { content: "\f5bc"; } .fa-spotify:before { content: "\f1bc"; } .fa-spray-can:before { content: "\f5bd"; } .fa-square:before { content: "\f0c8"; } .fa-square-full:before { content: "\f45c"; } .fa-square-root-alt:before { content: "\f698"; } .fa-squarespace:before { content: "\f5be"; } .fa-stack-exchange:before { content: "\f18d"; } .fa-stack-overflow:before { content: "\f16c"; } .fa-stamp:before { content: "\f5bf"; } .fa-star:before { content: "\f005"; } .fa-star-and-crescent:before { content: "\f699"; } .fa-star-half:before { content: "\f089"; } .fa-star-half-alt:before { content: "\f5c0"; } .fa-star-of-david:before { content: "\f69a"; } .fa-star-of-life:before { content: "\f621"; } .fa-staylinked:before { content: "\f3f5"; } .fa-steam:before { content: "\f1b6"; } .fa-steam-square:before { content: "\f1b7"; } .fa-steam-symbol:before { content: "\f3f6"; } .fa-step-backward:before { content: "\f048"; } .fa-step-forward:before { content: "\f051"; } .fa-stethoscope:before { content: "\f0f1"; } .fa-sticker-mule:before { content: "\f3f7"; } .fa-sticky-note:before { content: "\f249"; } .fa-stop:before { content: "\f04d"; } .fa-stop-circle:before { content: "\f28d"; } .fa-stopwatch:before { content: "\f2f2"; } .fa-store:before { content: "\f54e"; } .fa-store-alt:before { content: "\f54f"; } .fa-strava:before { content: "\f428"; } .fa-stream:before { content: "\f550"; } .fa-street-view:before { content: "\f21d"; } .fa-strikethrough:before { content: "\f0cc"; } .fa-stripe:before { content: "\f429"; } .fa-stripe-s:before { content: "\f42a"; } .fa-stroopwafel:before { content: "\f551"; } .fa-studiovinari:before { content: "\f3f8"; } .fa-stumbleupon:before { content: "\f1a4"; } .fa-stumbleupon-circle:before { content: "\f1a3"; } .fa-subscript:before { content: "\f12c"; } .fa-subway:before { content: "\f239"; } .fa-suitcase:before { content: "\f0f2"; } .fa-suitcase-rolling:before { content: "\f5c1"; } .fa-sun:before { content: "\f185"; } .fa-superpowers:before { content: "\f2dd"; } .fa-superscript:before { content: "\f12b"; } .fa-supple:before { content: "\f3f9"; } .fa-surprise:before { content: "\f5c2"; } .fa-swatchbook:before { content: "\f5c3"; } .fa-swimmer:before { content: "\f5c4"; } .fa-swimming-pool:before { content: "\f5c5"; } .fa-synagogue:before { content: "\f69b"; } .fa-sync:before { content: "\f021"; } .fa-sync-alt:before { content: "\f2f1"; } .fa-syringe:before { content: "\f48e"; } .fa-table:before { content: "\f0ce"; } .fa-table-tennis:before { content: "\f45d"; } .fa-tablet:before { content: "\f10a"; } .fa-tablet-alt:before { content: "\f3fa"; } .fa-tablets:before { content: "\f490"; } .fa-tachometer-alt:before { content: "\f3fd"; } .fa-tag:before { content: "\f02b"; } .fa-tags:before { content: "\f02c"; } .fa-tape:before { content: "\f4db"; } .fa-tasks:before { content: "\f0ae"; } .fa-taxi:before { content: "\f1ba"; } .fa-teamspeak:before { content: "\f4f9"; } .fa-teeth:before { content: "\f62e"; } .fa-teeth-open:before { content: "\f62f"; } .fa-telegram:before { content: "\f2c6"; } .fa-telegram-plane:before { content: "\f3fe"; } .fa-temperature-high:before { content: "\f769"; } .fa-temperature-low:before { content: "\f76b"; } .fa-tencent-weibo:before { content: "\f1d5"; } .fa-terminal:before { content: "\f120"; } .fa-text-height:before { content: "\f034"; } .fa-text-width:before { content: "\f035"; } .fa-th:before { content: "\f00a"; } .fa-th-large:before { content: "\f009"; } .fa-th-list:before { content: "\f00b"; } .fa-the-red-yeti:before { content: "\f69d"; } .fa-theater-masks:before { content: "\f630"; } .fa-themeco:before { content: "\f5c6"; } .fa-themeisle:before { content: "\f2b2"; } .fa-thermometer:before { content: "\f491"; } .fa-thermometer-empty:before { content: "\f2cb"; } .fa-thermometer-full:before { content: "\f2c7"; } .fa-thermometer-half:before { content: "\f2c9"; } .fa-thermometer-quarter:before { content: "\f2ca"; } .fa-thermometer-three-quarters:before { content: "\f2c8"; } .fa-think-peaks:before { content: "\f731"; } .fa-thumbs-down:before { content: "\f165"; } .fa-thumbs-up:before { content: "\f164"; } .fa-thumbtack:before { content: "\f08d"; } .fa-ticket-alt:before { content: "\f3ff"; } .fa-times:before { content: "\f00d"; } .fa-times-circle:before { content: "\f057"; } .fa-tint:before { content: "\f043"; } .fa-tint-slash:before { content: "\f5c7"; } .fa-tired:before { content: "\f5c8"; } .fa-toggle-off:before { content: "\f204"; } .fa-toggle-on:before { content: "\f205"; } .fa-toilet-paper:before { content: "\f71e"; } .fa-toolbox:before { content: "\f552"; } .fa-tooth:before { content: "\f5c9"; } .fa-torah:before { content: "\f6a0"; } .fa-torii-gate:before { content: "\f6a1"; } .fa-tractor:before { content: "\f722"; } .fa-trade-federation:before { content: "\f513"; } .fa-trademark:before { content: "\f25c"; } .fa-traffic-light:before { content: "\f637"; } .fa-train:before { content: "\f238"; } .fa-transgender:before { content: "\f224"; } .fa-transgender-alt:before { content: "\f225"; } .fa-trash:before { content: "\f1f8"; } .fa-trash-alt:before { content: "\f2ed"; } .fa-tree:before { content: "\f1bb"; } .fa-trello:before { content: "\f181"; } .fa-tripadvisor:before { content: "\f262"; } .fa-trophy:before { content: "\f091"; } .fa-truck:before { content: "\f0d1"; } .fa-truck-loading:before { content: "\f4de"; } .fa-truck-monster:before { content: "\f63b"; } .fa-truck-moving:before { content: "\f4df"; } .fa-truck-pickup:before { content: "\f63c"; } .fa-tshirt:before { content: "\f553"; } .fa-tty:before { content: "\f1e4"; } .fa-tumblr:before { content: "\f173"; } .fa-tumblr-square:before { content: "\f174"; } .fa-tv:before { content: "\f26c"; } .fa-twitch:before { content: "\f1e8"; } .fa-twitter:before { content: "\f099"; } .fa-twitter-square:before { content: "\f081"; } .fa-typo3:before { content: "\f42b"; } .fa-uber:before { content: "\f402"; } .fa-uikit:before { content: "\f403"; } .fa-umbrella:before { content: "\f0e9"; } .fa-umbrella-beach:before { content: "\f5ca"; } .fa-underline:before { content: "\f0cd"; } .fa-undo:before { content: "\f0e2"; } .fa-undo-alt:before { content: "\f2ea"; } .fa-uniregistry:before { content: "\f404"; } .fa-universal-access:before { content: "\f29a"; } .fa-university:before { content: "\f19c"; } .fa-unlink:before { content: "\f127"; } .fa-unlock:before { content: "\f09c"; } .fa-unlock-alt:before { content: "\f13e"; } .fa-untappd:before { content: "\f405"; } .fa-upload:before { content: "\f093"; } .fa-usb:before { content: "\f287"; } .fa-user:before { content: "\f007"; } .fa-user-alt:before { content: "\f406"; } .fa-user-alt-slash:before { content: "\f4fa"; } .fa-user-astronaut:before { content: "\f4fb"; } .fa-user-check:before { content: "\f4fc"; } .fa-user-circle:before { content: "\f2bd"; } .fa-user-clock:before { content: "\f4fd"; } .fa-user-cog:before { content: "\f4fe"; } .fa-user-edit:before { content: "\f4ff"; } .fa-user-friends:before { content: "\f500"; } .fa-user-graduate:before { content: "\f501"; } .fa-user-injured:before { content: "\f728"; } .fa-user-lock:before { content: "\f502"; } .fa-user-md:before { content: "\f0f0"; } .fa-user-minus:before { content: "\f503"; } .fa-user-ninja:before { content: "\f504"; } .fa-user-plus:before { content: "\f234"; } .fa-user-secret:before { content: "\f21b"; } .fa-user-shield:before { content: "\f505"; } .fa-user-slash:before { content: "\f506"; } .fa-user-tag:before { content: "\f507"; } .fa-user-tie:before { content: "\f508"; } .fa-user-times:before { content: "\f235"; } .fa-users:before { content: "\f0c0"; } .fa-users-cog:before { content: "\f509"; } .fa-ussunnah:before { content: "\f407"; } .fa-utensil-spoon:before { content: "\f2e5"; } .fa-utensils:before { content: "\f2e7"; } .fa-vaadin:before { content: "\f408"; } .fa-vector-square:before { content: "\f5cb"; } .fa-venus:before { content: "\f221"; } .fa-venus-double:before { content: "\f226"; } .fa-venus-mars:before { content: "\f228"; } .fa-viacoin:before { content: "\f237"; } .fa-viadeo:before { content: "\f2a9"; } .fa-viadeo-square:before { content: "\f2aa"; } .fa-vial:before { content: "\f492"; } .fa-vials:before { content: "\f493"; } .fa-viber:before { content: "\f409"; } .fa-video:before { content: "\f03d"; } .fa-video-slash:before { content: "\f4e2"; } .fa-vihara:before { content: "\f6a7"; } .fa-vimeo:before { content: "\f40a"; } .fa-vimeo-square:before { content: "\f194"; } .fa-vimeo-v:before { content: "\f27d"; } .fa-vine:before { content: "\f1ca"; } .fa-vk:before { content: "\f189"; } .fa-vnv:before { content: "\f40b"; } .fa-volleyball-ball:before { content: "\f45f"; } .fa-volume-down:before { content: "\f027"; } .fa-volume-mute:before { content: "\f6a9"; } .fa-volume-off:before { content: "\f026"; } .fa-volume-up:before { content: "\f028"; } .fa-vote-yea:before { content: "\f772"; } .fa-vr-cardboard:before { content: "\f729"; } .fa-vuejs:before { content: "\f41f"; } .fa-walking:before { content: "\f554"; } .fa-wallet:before { content: "\f555"; } .fa-warehouse:before { content: "\f494"; } .fa-water:before { content: "\f773"; } .fa-weebly:before { content: "\f5cc"; } .fa-weibo:before { content: "\f18a"; } .fa-weight:before { content: "\f496"; } .fa-weight-hanging:before { content: "\f5cd"; } .fa-weixin:before { content: "\f1d7"; } .fa-whatsapp:before { content: "\f232"; } .fa-whatsapp-square:before { content: "\f40c"; } .fa-wheelchair:before { content: "\f193"; } .fa-whmcs:before { content: "\f40d"; } .fa-wifi:before { content: "\f1eb"; } .fa-wikipedia-w:before { content: "\f266"; } .fa-wind:before { content: "\f72e"; } .fa-window-close:before { content: "\f410"; } .fa-window-maximize:before { content: "\f2d0"; } .fa-window-minimize:before { content: "\f2d1"; } .fa-window-restore:before { content: "\f2d2"; } .fa-windows:before { content: "\f17a"; } .fa-wine-bottle:before { content: "\f72f"; } .fa-wine-glass:before { content: "\f4e3"; } .fa-wine-glass-alt:before { content: "\f5ce"; } .fa-wix:before { content: "\f5cf"; } .fa-wizards-of-the-coast:before { content: "\f730"; } .fa-wolf-pack-battalion:before { content: "\f514"; } .fa-won-sign:before { content: "\f159"; } .fa-wordpress:before { content: "\f19a"; } .fa-wordpress-simple:before { content: "\f411"; } .fa-wpbeginner:before { content: "\f297"; } .fa-wpexplorer:before { content: "\f2de"; } .fa-wpforms:before { content: "\f298"; } .fa-wpressr:before { content: "\f3e4"; } .fa-wrench:before { content: "\f0ad"; } .fa-x-ray:before { content: "\f497"; } .fa-xbox:before { content: "\f412"; } .fa-xing:before { content: "\f168"; } .fa-xing-square:before { content: "\f169"; } .fa-y-combinator:before { content: "\f23b"; } .fa-yahoo:before { content: "\f19e"; } .fa-yandex:before { content: "\f413"; } .fa-yandex-international:before { content: "\f414"; } .fa-yelp:before { content: "\f1e9"; } .fa-yen-sign:before { content: "\f157"; } .fa-yin-yang:before { content: "\f6ad"; } .fa-yoast:before { content: "\f2b1"; } .fa-youtube:before { content: "\f167"; } .fa-youtube-square:before { content: "\f431"; } .fa-zhihu:before { content: "\f63f"; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } @font-face { font-family: 'Font Awesome 5 Brands'; font-style: normal; font-weight: normal; src: url("fa-brands-400.eot"); src: url("fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fa-brands-400.woff2") format("woff2"), url("fa-brands-400.woff") format("woff"), url("fa-brands-400.ttf") format("truetype"), url("fa-brands-400.svg#fontawesome") format("svg"); } .fab { font-family: 'Font Awesome 5 Brands'; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 400; src: url("fa-regular-400.eot"); src: url("fa-regular-400.eot?#iefix") format("embedded-opentype"), url("fa-regular-400.woff2") format("woff2"), url("fa-regular-400.woff") format("woff"), url("fa-regular-400.ttf") format("truetype"), url("fa-regular-400.svg#fontawesome") format("svg"); } .far { font-family: 'Font Awesome 5 Free'; font-weight: 400; } @font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url("fa-solid-900.eot"); src: url("fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fa-solid-900.woff2") format("woff2"), url("fa-solid-900.woff") format("woff"), url("fa-solid-900.ttf") format("truetype"), url("fa-solid-900.svg#fontawesome") format("svg"); } .fa, .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2'), url(MaterialIcons-Regular.woff) format('woff'), url(MaterialIcons-Regular.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .dtp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 2000; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dtp > .dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); max-height: 520px; position: relative; left: 50%; } .dtp > .dtp-content > .dtp-date-view > header.dtp-header { background: #689F38; color: #fff; text-align: center; padding: 0.3em; } .dtp div.dtp-date, .dtp div.dtp-time { background: #8BC34A; text-align: center; color: #fff; padding: 10px; } .dtp div.dtp-date > div { padding: 0; margin: 0; } .dtp div.dtp-actual-month { font-size: 1.5em; } .dtp div.dtp-actual-num { font-size: 3em; line-height: 0.9; } .dtp div.dtp-actual-maxtime { font-size: 3em; line-height: 0.9; } .dtp div.dtp-actual-year { font-size: 1.5em; color: #DCEDC8; } .dtp div.dtp-picker { padding: 1em; text-align: center; } .dtp div.dtp-picker-month, .dtp div.dtp-actual-time { font-weight: 500; text-align: center; } .dtp div.dtp-picker-month { padding-bottom:20px!important; text-transform: uppercase!important; } .dtp .dtp-close { position: absolute; top: 0.5em; right: 1em; } .dtp .dtp-close > a { color: #fff; } .dtp .dtp-close > a > i { font-size: 1em; } .dtp table.dtp-picker-days { margin: 0; min-height: 251px;} .dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, .dtp table.dtp-picker-days tr > td { border: none; } .dtp table.dtp-picker-days tr > td { font-weight: 700; font-size: 0.8em; text-align: center; padding: 0.5em 0.3em; } .dtp table.dtp-picker-days tr > td > span.dtp-select-day { color: #BDBDBD!important; padding: 0.4em 0.5em 0.5em 0.6em;} .dtp table.dtp-picker-days tr > td > a, .dtp .dtp-picker-time > a { color: #212121; text-decoration: none; padding: 0.4em 0.5em 0.5em 0.6em; border-radius: 50%!important; } .dtp table.dtp-picker-days tr > td > a.selected{ background: #8BC34A; color: #fff; } .dtp table.dtp-picker-days tr > th { color: #757575; text-align: center; font-weight: 700; padding: 0.4em 0.3em; } .dtp .p10 > a { color: #689F38; text-decoration: none; } .dtp .p10 { width: 10%; display: inline-block; } .dtp .p20 { width: 20%; display: inline-block; } .dtp .p60 { width: 60%; display: inline-block; } .dtp .p80 { width: 80%; display: inline-block; } .dtp a.dtp-meridien-am, .dtp a.dtp-meridien-pm { position: relative; top: 10px; color: #212121; font-weight: 500; padding: 0.7em 0.5em; border-radius: 50%!important;text-decoration: none; background: #eee; font-size:1em; } .dtp .dtp-actual-meridien a.selected { background: #689F38; color: #fff; } .dtp .dtp-picker-time > .dtp-select-hour { cursor: pointer; } .dtp .dtp-picker-time > .dtp-select-minute { cursor: pointer; } .dtp .dtp-buttons { padding: 0 1em 1em 1em; text-align: right; } .dtp.hidden, .dtp .hidden { display: none; } .dtp .invisible { visibility: hidden; } .dtp .left { float: left; } .dtp .right { float: right; } .dtp .clearfix { clear: both; } .dtp .center { text-align: center; } .dtp-picker-year{ margin-bottom: 1px; } .year-picker-item{ text-align: center; padding-top: 5px; font-size: large; cursor: pointer; margin: 0 auto; } .dtp-actual-year:hover{ cursor: pointer; } .dtp-actual-year.disabled:hover{ cursor: inherit; } .year-picker-item:hover{ color:#689F38; } .year-picker-item.active{ color:#689F38; font-weight: bold; } .dtp-select-year-range{ display: inline-block; text-align: center; width: 100%; } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ .alert-success { color: #65E5DB; } .alert-danger { color: red; } .table { width: 100%; } .btn-sm { margin: 0 20px; padding: 0 10px; }