@keyframes slideDown { 0% { transform: translateY(-200%); opacity: 0; } 50% { transform: translateY(8%); opacity: 0.5; } 65% { transform: translateY(-4%); opacity: 0.65; } 80% { transform: translateY(4%); opacity: 0.8; } 95% { transform: translateY(-2%); opacity: 0.95; } 100% { transform: translateY(0%); opacity: 1; } } @-webkit-keyframes slideDown { 0% { transform: translateY(-200%); opacity: 0; } 50% { transform: translateY(8%); opacity: 0.5; } 65% { transform: translateY(-4%); opacity: 0.65; } 80% { transform: translateY(4%); opacity: 0.8; } 95% { transform: translateY(-2%); opacity: 0.95; } 100% { transform: translateY(0%); opacity: 1; } } @keyframes slideUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } .animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*---- -- FONTS ------*/ /*---- -- COLORS ------*/ /*---- -- FRONTEND ------*/ h1 { font-size: 20px; letter-spacing: 1px; font-weight: 300; margin-top: 10px; margin-bottom: 15px; font-family: "Lato", sans-serif; padding: 0px !important; } .f-large { font-size: 40px; } p { font-size: 12px; color: #666; line-height: 19px; } a { text-decoration: none; } .white { color: #fff; } .info { color: #999; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } h1 { padding: 15px 0; font-size: 45px; font-family: "Lato", sans-serif !important; color: #666; } h1.no-bottom { padding-bottom: 0px !important; } h2 { padding: 0px 0 8px 0; font-size: 35px; font-family: "Lato", sans-serif !important; color: #666; } h2.no-bottom { padding-bottom: 0px !important; } h2.main { text-align: center; margin-top: 10px; margin-bottom: 10px; background: #f5f5f5; border-bottom: 5px solid #eaeaea; border-top: 5px solid #eaeaea; font-weight: 900; color: #404040; padding: 20px 0; line-height: 28px; } h3 { padding: 15px 0; font-style: normal; font-size: 25px; color: #666; font-family: "Lato", sans-serif !important; } h3.no-bottom { padding-bottom: 0px !important; } h4 { padding: 15px 0; text-transform: uppercase; font-size: 15px; color: #666; font-family: "Lato", sans-serif !important; } h4.no-bottom { padding-bottom: 0px !important; } p { padding: 15px 0; font-size: 18px; line-height: 25px; font-weight: 300; color: #666; font-family: "Lato", sans-serif !important; } p.no-bottom { padding-bottom: 0px !important; } p.no-pad { padding: 0; } p a { color: #252d37 !important; } /*---- -- FONT TRANSFORMS ------*/ .uppercase { text-transform: uppercase; } .normalcase { text-transform: none; } .ft-italic { font-style: italic; } /*---- -- FONT SIZES ------*/ .ft-small { font-size: 12px !important; } .ft-para { font-size: 18px !important; } .ft-para2 { font-size: 19px !important; } .ft-normal { font-size: 15px !important; line-height: 22px; } .ft-normal2 { font-size: 20px !important; } .ft-medium { font-size: 25px !important; line-height: 28px; } .ft-medium2 { font-size: 30px !important; } .ft-large { font-size: 35px !important; } .ft-large2 { font-size: 40px !important; } .ft-large3 { font-size: 42px !important; } .ft-xlarge { font-size: 45px !important; } .ft-xlarge2 { font-size: 50px !important; } .ft-xlarge3 { font-size: 90px !important; } .ft-xxlarge { font-size: 105px !important; } .ft-xxxlarge { font-size: 155px !important; } .ft-xxxxlarge { font-size: 175px !important; } /*---- -- CIRCLE ------*/ i.circle { padding: 3px; border-radius: 100px; margin-left: 10px; margin-right: 10px; } i.margin { margin-left: 10px; margin-right: 10px; } /*---- -- LETTER SPACING ------*/ .ls-minus-two { letter-spacing: -2px; } .ls-minus-one { letter-spacing: -1px; } .ls-normal { letter-spacing: 0px; } .ls-one { letter-spacing: 1px; } .ls-two { letter-spacing: 2px; } .ls-three { letter-spacing: 3px; } /*---- -- FONT WEIGHTS ------*/ .fw-light { font-weight: 300; } .fw-normal { font-weight: 400; } .fw-bold { font-weight: 600; } .fw-xbold { font-weight: 900; } /*---- -- COLORS -------*/ .color-main-bg { background: #252d37; } .color-main-ft { color: #252d37; } .color-main-circle { background: #252d37; padding: 20px; border-radius: 100px; padding: 14px 20px; margin-top: -16px; margin-right: 10px; float: left; } .color-main-diagonal { background: #252d37; } .color-main-diagonal:before { border-color: transparent #252d37 #252d37 transparent; } .color-main-diagonal:after { border-color: transparent #252d37 transparent; } .color-main-btop { border-top: 1px solid #252d37; } .color-main-btop-thick { border-top: 4px solid #252d37 !important; } .color-main-bbottom { border-bottom: 1px solid #252d37; } .color-main-bbottom-thick { border-bottom: 3px solid #252d37; } .color-main-bright { border-right: 1px solid #252d37; } .color-main-bright-thick { border-right: 4px solid #252d37 !important; } .color-main-bleft { border-left: 1px solid #252d37; } .color-main-bleft-thick { border-left: 4px solid #252d37 !important; } .color-main-border { border: 1px solid #252d37; } .color-main-border-thick { border: 3px solid #252d37; } .color-main-border.radius { border-radius: 5px; } .color-sec-bg { background: #5d6f82; } .color-sec-ft { color: #5d6f82; } .color-sec-diagonal { background: #5d6f82; } .color-sec-diagonal:before { border-color: transparent #5d6f82 #5d6f82 transparent; } .color-sec-diagonal:after { border-color: transparent #5d6f82 transparent; } .color-sec-btop { border-top: 1px solid #5d6f82; } .color-sec-bbottom { border-bottom: 1px solid #5d6f82; } .color-sec-bright { border-right: 1px solid #5d6f82; } .color-sec-bleft { border-left: 1px solid #5d6f82; } .color-sec-border { border: 1px solid #5d6f82; } .color-xlgrey-bg { background: #f5f5f5; } .color-xlgrey-ft { color: #f5f5f5; } .color-xlgrey-diagonal { background: #f5f5f5; } .color-xlgrey-diagonal:before { border-color: transparent #f5f5f5 #f5f5f5 transparent; } .color-xlgrey-diagonal:after { border-color: transparent #f5f5f5 transparent; } .color-xlgrey-btop { border-top: 1px solid #f5f5f5; } .color-xlgrey-bbottom { border-bottom: 1px solid #f5f5f5; } .color-xlgrey-bright { border-right: 1px solid #f5f5f5; } .color-xlgrey-bleft { border-left: 1px solid #f5f5f5; } .color-xlgrey-border { border: 1px solid #f5f5f5; } .color-lgrey-bg { background: #eaeaea; } .color-lgrey-ft { color: #eaeaea; } .color-lgrey-diagonal { background: #eaeaea; } .color-lgrey-diagonal:before { border-color: transparent #eaeaea #eaeaea transparent; } .color-lgrey-diagonal:after { border-color: transparent #eaeaea transparent; } .color-lgrey-btop { border-top: 1px solid #eaeaea; } .color-lgrey-bbottom { border-bottom: 1px solid #eaeaea; } .color-lgrey-bright { border-right: 1px solid #eaeaea; } .color-lgrey-bleft { border-left: 1px solid #eaeaea; } .color-lgrey-border { border: 1px solid #eaeaea; } .color-grey-bg { background: #404040; } .color-grey-ft { color: #404040; } .color-grey-diagonal { background: #404040; } .color-grey-diagonal:before { border-color: transparent #404040 #404040 transparent; } .color-grey-diagonal:after { border-color: transparent #404040 transparent; } .color-grey-btop { border-top: 1px solid #404040; } .color-grey-bbottom { border-bottom: 1px solid #404040; } .color-grey-bright { border-right: 1px solid #404040; } .color-grey-bleft { border-left: 1px solid #404040; } .color-grey-border { border: 1px solid #404040; } .color-dgrey-bg { background: #3e3e3e; } .color-dgrey-ft { color: #3e3e3e; } .color-dgrey-diagonal { background: #3e3e3e; } .color-dgrey-diagonal:before { border-color: transparent #3e3e3e #3e3e3e transparent; } .color-dgrey-diagonal:after { border-color: transparent #3e3e3e transparent; } .color-dgrey-btop { border-top: 1px solid #3e3e3e; } .color-dgrey-bbottom { border-bottom: 1px solid #3e3e3e; } .color-dgrey-bright { border-right: 1px solid #3e3e3e; } .color-dgrey-bleft { border-left: 1px solid #3e3e3e; } .color-dgrey-border { border: 1px solid #3e3e3e; } .color-xdgrey-bg { background: #2d2d2d; } .color-xdgrey-ft { color: #2d2d2d; } .color-xdgrey-diagonal { background: #2d2d2d; } .color-xdgrey-diagonal:before { border-color: transparent #2d2d2d #2d2d2d transparent; } .color-xdgrey-diagonal:after { border-color: transparent #2d2d2d transparent; } .color-xdgrey-btop { border-top: 1px solid #2d2d2d; } .color-xdgrey-bbottom { border-bottom: 1px solid #2d2d2d; } .color-xdgrey-bright { border-right: 1px solid #2d2d2d; } .color-xdgrey-bleft { border-left: 1px solid #2d2d2d; } .color-xdgrey-border { border: 1px solid #2d2d2d; } .color-white-bg { background: #fff; } .color-white-ft { color: #fff; } .color-white-diagonal { background: #fff; } .color-white-diagonal:before { border-color: transparent #fff #fff transparent; } .color-white-diagonal:after { border-color: transparent #fff transparent; } .color-white-btop { border-top: 1px solid #fff; } .color-white-bbottom { border-bottom: 1px solid #fff; } .color-white-bright { border-right: 1px solid #fff; } .color-white-bleft { border-left: 1px solid #fff; } .color-white-border { border: 1px solid #fff; } .color-black-bg { background: #000; } .color-black-ft { color: #000; } .color-black-diagonal { background: #000; } .color-black-diagonal:before { border-color: transparent #000 #000 transparent; } .color-black-diagonal:after { border-color: transparent #000 transparent; } .color-black-btop { border-top: 1px solid #000; } .color-black-bbottom { border-bottom: 1px solid #000; } .color-black-bright { border-right: 1px solid #000; } .color-black-bleft { border-left: 1px solid #000; } .color-black-border { border: 1px solid #000; } .float-left { float: left; } .float-right { float: right; } .float-center { margin: 0 auto; } .border-right { border-right: 1px solid #ddd; } .divider { width: 50%; margin: 0 auto; clear: both; padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .divider-header:after { content: ''; height: 1px; background: rgba(255, 255, 255, 0.1); width: 60%; margin: 0 auto; margin-top: 20px; display: block; } .divider-left:after { content: ''; height: 1px; background: rgba(255, 255, 255, 0.1); width: 40%; margin-top: 20px; display: block; } .spacer { width: 100%; height: 30px; clear: both; } .shadow-top { background: url("../img/admin/shadow-top.png") no-repeat top center; background-size: contain; padding-top: 70px !important; } .shadow-bottom { background: url("../img/admin/shadow-bottom.png") no-repeat bottom center; background-size: contain; padding-bottom: 70px !important; } .height-full { height: 100%; } .yellow { color: #e6c302; } .load-me { background: url("../img/admin/ripple.gif") no-repeat center center; background-size: contain; margin-top: 100px; margin: 0 auto; width: 100px; height: 100px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .theme-one { height: 170px; } .theme-one.col-one { background: #cbe4f4; } .theme-one.col-two { background: #014d7f; } .theme-one.col-thr { background: #ff83b1; } .theme-one.col-fou { background: #ce6f0f; } .theme-one.col-fiv { background: #000000; } .theme-two { height: 170px; } .theme-two.col-one { background: #033047; } .theme-two.col-two { background: #006699; } .theme-two.col-thr { background: #ccddee; } .theme-two.col-fou { background: #cccccc; } .theme-two.col-fiv { background: #ff9900; } .theme-thr { height: 170px; } .theme-thr.col-one { background: #ff9d44; } .theme-thr.col-two { background: #aa580e; } .theme-thr.col-thr { background: #f68b29; } .theme-thr.col-fou { background: #0088aa; } .theme-thr.col-fiv { background: #29cef6; } .theme-fou { height: 170px; } .theme-fou.col-one { background: #0083b5; } .theme-fou.col-two { background: #b59b74; } .theme-fou.col-thr { background: #005577; } .theme-fou.col-fou { background: #fffb85; } .theme-fou.col-fiv { background: #ffffff; } .affilio-provider i { width: 25px; } .affilio-provider i.green { color: #afec6e; } .affilio-provider i.red { color: #ec6e6e; } .affilio-provider i.yellow { color: #ed9c3b !important; } .affilio-provider.key { margin-top: -24px; margin-bottom: -24px; } .affilio-provider .bg-grey { background: #eaeaea; } .green { color: #afec6e; } .red { color: #ec6e6e; } .yellow { color: #ed9c3b !important; } /*------- --- LIGHTBOX --------*/ .custom-lightbox { display: none; position: fixed !important; z-index: 999; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); text-align: center; } .custom-lightbox .imgholder { max-width: 60%; max-height: 60%; position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } .custom-lightbox .imgholder img { max-height: 500px; border: 4px solid #222; } /* ----- -- COMPARISON BOX -------*/ .comparison-box { position: fixed; z-index: 99999; right: 20px; bottom: -1px; transition: 1s all; width: 200px; } .comparison-box form { margin-bottom: 0px !important; } .comparison-box .compare-load { height: 0px; transition: 1s all; min-height: 0px; } .comparison-box .compare-load.active { min-height: 30px; } .comparison-box .compare-load .no { padding-top: 15px; padding-bottom: 15px; } .comparison-box .compare-item { padding: 12px 15px 0 15px !important; font-size: 12px; letter-spacing: 1px; border-bottom: 1px dotted #eaeaea; } .comparison-box .btn { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; padding: 10px; font-weight: 300; border-radius: 0; width: 100% !important; border: 0px; margin-bottom: 0px !important; } .comparison-box .btn:hover { color: #fff; background: #000; } .comparison-box .header { width: 40px; margin: 0 auto; -webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px; padding: 20px 15px 0 15px; } .comparison-box .header .icon { height: 25px; float: right; width: 30px; text-align: center; margin-top: -5px; padding-top: 5px; } .comparison-box .header .icon i { transition: 1s all linear; } .comparison-box .header .icon.active i { transform: rotate(360deg); } .tableprice .small { width: 100%; font-size: 11px; text-align: center; margin-top: 10px; color: #666; } .rankclearurl { font-size: 16px !important; } .rankhighlighted li { font-size: 15px !important; padding-top: 8px; } .rankhighlighted li i { width: 20px; } .myChart { width: 100% !important; max-width: 800px; height: auto !important; } #myChart { width: 100% !important; max-width: 880px; height: auto !important; }