/* +----------------------------------------------------+ TABLE OF CONTENTS +----------------------------------------------------+ [1] Grid Blocks [2] Slide Top Panel Container [3] Header Wrapper [5] Slider Wrapper [6] Main Wrapper Header [7] Main Navigation & Sub Navigation [8] Footer Wrapper [9] Typography [10] Elements [11] Backgrounds and Colors [12] Dividers [16] Search Results [17] Under Construction [18] Shop Pages [19] RTL Styles [20] Responsive Media Queries [21] Data Table [22] Steps [23] Additional Classes [24] Clients [25] Page Banner */ body {background-color: #fff; color: #595959;font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility; font-size:13px; height:100%; width:100%;} a { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a:hover, a:focus { text-decoration:none;} a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {border: 0;outline : none !important;} .btn { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translate3d(0,0,0);} /*body backgrounds*/ .bg-pattern1{ background:url("../img/theme/bg/bg-pattern1.png") repeat fixed center 0;} .bg-pattern2{ background:url("../img/theme/bg/bg-pattern2.png") repeat fixed center 0;} .bg-pattern3{ background:url("../img/theme/bg/bg-pattern3.png") repeat fixed center 0;} .bg-pattern4{ background:url("../img/theme/bg/bg-pattern4.png") repeat fixed center 0;} .bg-pattern5{ background:url("../img/theme/bg/bg-pattern5.png") repeat fixed center 0;} .bg-pattern6{ background:url("../img/theme/bg/bg-pattern6.png") repeat fixed center 0;} .bg-pattern7{ background:url("../img/theme/bg/bg-pattern7.png") repeat fixed center 0;} .bg-pattern8{ background:url("../img/theme/bg/bg-pattern8.png") repeat fixed center 0;} .bg-pattern9{ background:url("../img/theme/bg/bg-pattern9.png") repeat fixed center 0;} .bg-pattern10{ background:url("../img/theme/bg/bg-pattern10.png") repeat fixed center 0;} .bg-pattern11{ background:url("../img/theme/bg/bg-pattern11.png") repeat fixed center 0;} .bg-pattern12{ background:url("../img/theme/bg/bg-pattern12.png") repeat fixed center 0;} .bg-pattern13{ background:url("../img/theme/bg/bg-pattern13.png") repeat fixed center 0;} .bg-pattern14{ background:url("../img/theme/bg/bg-pattern14.png") repeat fixed center 0;} .bg-pattern15{ background:url("../img/theme/bg/bg-pattern15.png") repeat fixed center 0;} .bg-pattern16{ background:url("../img/theme/bg/bg-pattern16.png") repeat fixed center 0;} .bg-pattern17{ background:url("../img/theme/bg/bg-pattern17.png") repeat fixed center 0;} .bg-pattern18{ background:url("../img/theme/bg/bg-pattern18.png") repeat fixed center 0;} .bg-pattern19{ background:url("../img/theme/bg/bg-pattern19.png") repeat fixed center 0;} .bg-pattern20{ background:url("../img/theme/bg/bg-pattern20.png") repeat fixed center 0;} .bg-pattern21{ background:url("../img/theme/bg/bg-pattern21.png") repeat fixed center 0;} .bg-pattern22{ background:url("../img/theme/bg/bg-pattern22.png") repeat fixed center 0;} .bg-custom{ background:url("../img/theme/bg/custom.jpg") repeat fixed center 0;} /*=============================== ========== Boostrap Overwrite ========== ===============================*/ /*=============================== ========== Grid Blocks ========== ===============================*/ .page-wrapper { background:#fff; overflow: hidden; height:auto;} /* Sections */ section{ } /* Full Width Container */ .fullsize {color: inherit; width:100% ; position:relative; height:auto;} .container-inner{ padding-top:100px; padding-bottom:100px;} /*========== Slide Top Panel Container ==========*/ .slide-pannel-wrapper{position: relative; top: 0; width: 100%; color:#FFF; } .slide-pannel-wrapper h1, .slide-pannel-wrapper h2, .slide-pannel-wrapper h3, .slide-pannel-wrapper h4, .slide-pannel-wrapper h5, .slide-pannel-wrapper h6 { color:#fff;} .page-wrapper.boxed .slide-pannel-wrapper{max-width:1210px;} #slide-panel {display: none; padding:20px 0; z-index:9999; position:relative; background:#32313b;} .slide-btn-wrapper { display:block; position:absolute; right:0; z-index:1200; text-align:center; border-style: solid; border-width: 0 40px 40px 0; border-color: transparent #32313b transparent transparent; width:40px; height:40px; } .slide-panel-btn { color: #FFFFFF; display: block; text-decoration: none; width:40px; height:40px; padding:3px 0px 0px 17px;} .slide-panel-btn:hover, .slide-panel-btn:focus {color: #fff;} .slide-panel-btn:after {content:'\f078'; font-family:'FontAwesome';} .slide-panel-btn.active:after{content:'\f077'; font-family:'FontAwesome';} .sliderr { overflow: hidden; } /*========== Header Wrapper ==========*/ .header-wrapper{position: relative; max-height:87px !important;} /*header top*/ .header-top{ background:#fff; border-bottom:1px solid #ececec; color: #555566; font-size:12px; position:relative; z-index:1150; } .header-top ul, .header-top ol, .header-top dl{font-weight:500; font-size:12px; margin-bottom:0;} .header-top ul .fa{ margin-right: 10px;} .header-top p{margin:0;} .header-top-left{ float:left; width:100%;} .header-top-right{ float:right; width:100%;} /*header top navigation */ .top-menu {list-style:none; padding-left:0; float:right;} .top-menu li:first-child { border-left:1px solid #ececec;} .top-menu li { border-right:1px solid #ececec; display:inline-block;} .top-menu li a{ color:inherit; padding:10px 12px; display:block;} .header-top .dropdown:hover .dropdown-menu {display: block;} .header-top .dropdown-menu{ border:1px solid #ececec; margin-top:0px; margin-left:-4px;} .header-top .dropdown-menu > li{ display:block; border:none;} /* social top */ .social-top{ list-style:none; padding-left:0; float:left;} .social-top li:first-child { border-left:1px solid #ececec;} .social-top li { border-right:1px solid #ececec; display:inline-block;} .social-top li a{ color:inherit; padding:8px 12px; display:block; font-size:14px;} .social-top a:hover, .social-top a:focus { text-decoration:none;} .social-top .fa{ margin-right:0 !important;} .top-menu a{ color: inherit;} .top-menu a:hover, .top-menu a:focus {text-decoration:none;} /*header main*/ .header-main{width:100%; position:relative; z-index:1100; background:#FFF; -webkit-box-shadow: 0px 3px 0px 0px rgba(214, 224, 230, 0.6); -moz-box-shadow: 0px 3px 0px 0px rgba(214, 224, 230, 0.6); box-shadow: 0px 3px 0px 0px rgba(214, 224, 230, 0.6); -webkit-transform: translateZ(0); max-height:100px !important;} .main-navigation{ position:relative;} .logo{line-height:100px;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .logo img{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;} .header-main.shrink .logo{ line-height:70px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .header-main.shrink .logo img{-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8);} /*========== Slider Wrapper ==========*/ .slider-wrapper{position: relative; z-index:1000; max-height:500px;} /* Revolution Slider Overwrite */ .tp-caption a {color:#ffffff;} .tp-caption a:hover {color:#ffffff;} .tp-caption a.btn.btn-white { color:#778899;} .tp-caption a.btn.btn-white.btn-alt { color:#ffffff;} .tp-caption a.btn.btn-white.btn-alt:hover, .tp-caption a.btn.btn-white.btn-alt:focus { color:#778899;} /*========== Main Wrapper Header ==========*/ .main-wrapper-header { padding:0px 0; background:#f8f8f8; border-bottom:0px solid #ececec;} .main-wrapper-header .page-title {} .main-wrapper-header .page-title h1, .page-title h2, .page-title h3 { margin:0; font-size:28px;line-height:2; font-family: 'Raleway', sans-serif; text-rendering: optimizelegibility; color:#fff; font-weight:600;} .main-wrapper-header .breadcrumbs-wrapper { text-align:right;} .main-wrapper-header .breadcrumbs-wrapper .breadcrumb { margin:0; line-height:2.8; background:none; padding: 8px 0;} .main-wrapper-header .breadcrumbs-wrapper .breadcrumb li { float:none; width:auto; font-family: 'Raleway', sans-serif; text-rendering: optimizelegibility;} .main-wrapper-header .breadcrumbs-wrapper .breadcrumb > li + li:before {content: "\f138";font-family: 'FontAwesome'; padding: 0 8px;} .main-wrapper-header .breadcrumbs-wrapper .breadcrumb > .active {color: #32313b;} /*========== Main Navigation ==========*/ .navbar-header{float:none;} .nav-right .navbar-header{float:right;} .nav-left .navbar-header{float:left;} .nav-left .gfx-nav{float:right; padding-top:5px;} .nav-centered .navbar-header{float:none; text-align:center;} .nav-centered .nav > li { display:inline;} .nav-centered .navbar-nav > li { float:none;} .nav-centered .gfx-nav{ width:100%; text-align:center;} @media (min-width: 768px) and (max-width: 991px) { .nav > li > a { padding-left:9px; padding-right:9px;} .navbar-nav > li > a {line-height: 20px;} } @media screen and (max-width: 767px) { .nav-right .navbar-header{float:none; width:100%; text-align:right;} .nav-left .navbar-header{float:none; width:100%; text-align:left;} .nav-right .navbar-toggle { left:0;} .nav-left .navbar-toggle { right:0;} .nav-left .gfx-nav{float:none;} } .navbar, .navbar-nav{ margin:0; background-color: #fff; top:-6px;} .navbar-collapse{ max-height:inherit; padding:0px; position:inherit; border:0px; border-radius: 5px;} .navbar-default{ background:none; border:none;} .navbar-default .navbar-nav > li > a {color: #49494c; border-top:0px solid transparent; font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 600; text-transform:uppercase; text-decoration: none; letter-spacing:1px; background-color:#fff;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background:none; background-color: #fff;} .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color: #fff;} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{ border-top:0px solid; background-color: #fff;} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{text-decoration: none; background-color: #fff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background: none; color: #32313b; background-color: #fff;} .navbar-toggle {position: absolute; cursor:pointer; top:30px; width:48px; height:48px; font-size:18px; float: none; text-align:center; right:0; margin: 0; padding: 9px 10px; background-color: #fff; color:#0087CB; border: none; border-radius: 4px;} .navbar-toggle:focus {outline: none; background-color: #fff;} .navbar-toggle:after {content:'\f0c9'; font-family:FontAwesome;} @media (min-width: 992px) { .navbar-nav > li > a {padding: 10px 10px 10px; line-height:90px; background-color: #fff; display:inline; margin-right:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* future proofing */ -khtml-border-radius: 5px; /* for old Konqueror browsers */ } .header-main.shrink .navbar-nav > li > a { line-height:41px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding-top:20px; background-color: #fff;} .navbar-nav > li > a:hover,.navbar-nav > li > a:focus { background-color:#fff;} .navbar-nav > li > a.current::before, .navbar-nav > li > a.current::after, .navbar-nav > li > a:hover::before, .navbar-nav > li > a:focus::before, .navbar-nav > li > a:hover::after, .navbar-nav > li > a:focus::after, .navbar-nav > li > a.highlighted:before, .navbar-nav > li > a.highlighted:after{opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px);} } /*========== Sub Navigation ==========*/ .navbar-subheader{float:none; height: 0px; padding-right:70px;} .nav-right .navbar-subheader{float:right;} .nav-left .navbar-subheader{float:left; list-style:none;} .nav-left .gfx-nav{float:right; padding-top:5px;} .nav-centered .navbar-subheader{float:none; text-align:center;} .nav-centered .nav-sub > li { display:inline;} .nav-centered .navbar-nav > li { float:none;} .nav-centered .gfx-nav{ width:100%; text-align:center;} @media (min-width: 768px) and (max-width: 991px) { .nav > li > a { padding-left:9px; padding-right:9px;} .navbar-sub > li > a {line-height: 10px;} } @media screen and (max-width: 767px) { .nav-right .navbar-subheader{float:none; width:100%; text-align:center; list-style:none; padding-left:70px; height: auto; margin-bottom:0px;} .nav-left .navbar-subheader{float:none; width:100%; text-align:center; list-style:none;} .nav-right .navbar-toggle { left:0;} .nav-left .navbar-toggle { right:0;} .nav-left .gfx-nav{float:none;} } .navbar-sub,.navbar-nav2{ margin:0; min-height:inherit; list-style:none;} .navbar-sub{ background:none; border:none;} .navbar-sub .navbar-nav2 > li > a {color: #18255a; border-top:0px solid transparent; font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 600; text-decoration: none;} .navbar-sub .navbar-nav2 > .active > a, .navbar-sub .navbar-nav2 > .active > a:hover, .navbar-sub .navbar-nav2 > .active > a:focus { background:none; color:#0078cb;} .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color:none;} .navbar-sub .navbar-nav2 > .active > a, .navbar-sub .navbar-nav2 > .active > a:hover, .navbar-sub .navbar-nav2 > .active > a:focus{ border-top:0px solid;} .navbar-sub .navbar-nav2 > li > a:hover, .navbar-sub .navbar-nav2 > li > a:focus{text-decoration: none; background-color:#fafafa; } .navbar-sub .navbar-nav2 > .open > a, .navbar-sub .navbar-nav2 > .open > a:hover, .navbar-sub .navbar-nav2 > .open > a:focus { background: none; color: #fafafa;} @media (min-width: 992px) { .navbar-nav2 > li > a {padding: 9px 16px 2px; line-height:30px; background-color:transparent; } .header-main.shrink .navbar-nav2 > li > a { line-height:41px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding-top:20px; background-color:transparent;} .navbar-nav2 > li > a:hover,.navbar-nav2 > li > a:focus { background-color:transparent; color:#0078cb;} .navbar-nav2 > li > a.current::before, .navbar-nav2 > li > a.current::after, .navbar-nav > li > a:hover::before, .navbar-nav > li > a:focus::before, .navbar-nav > li > a:hover::after, .navbar-nav > li > a:focus::after, .navbar-nav > li > a.highlighted:before, .navbar-nav > li > a.highlighted:after{ color:#0078cb;} } /* Mega Menu */ .gfx-mega .nav, .gfx-mega .collapse, .gfx-mega .dropup, .gfx-mega .dropdown { position: static; } .gfx-mega .container {position: relative;} .gfx-mega .dropdown-menu {left: auto;} .gfx-mega .nav.navbar-right .dropdown-menu {left: auto; right: 0;} .gfx-mega .gfx-mega-content { padding:0px 15px;} .gfx-mega .dropdown.gfx-mega-fw .dropdown-menu {left: 0; right: 0;} /* Mega Menu Elements styling*/ /* lists */ .mega-menu-list{ list-style: none; margin:0; padding:0;} .mega-menu-list > li {font-size: 11px; font-weight: 600; text-transform: uppercase;} .mega-menu-list > li > a {color: #32313b; display:block;padding: 10px;} .mega-menu-list > li.active > a {color:#ffffff !important;} .mega-menu-list > li > a:hover, .mega-menu-list > li > a:focus{background:#f2f2f2;} .mega-menu-list .title-header{ color:#778899; font-size:13px; margin-bottom:10px; display:block;} .gfx-nav h1, .gfx-nav h2, .gfx-nav h3, .gfx-nav h4, .gfx-nav h5, .gfx-nav h6{color:#778899; padding:10px 0;} /* dropdowns */ .dropdown-menu { background:#fff; padding:10px 0; border:none; top:68px; box-shadow: 0 8px 6px -6px #d0d0d1;} .dropdown-menu > li > a {color: #333; font-size: 13px; font-weight: 600;padding:5px 20px;} .dropdown-menu .divider{ background:#ececec;} .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #f2f2f2;} /*========== Slider Wrapper ==========*/ /*========== Main Wrapper ==========*/ /*========== Footer Wrapper ==========*/ /*Footer Top*/ .footer-top{ background:#32313b;} .footer-top h1, .footer-top h2, .footer-top h3, .footer-top h4, .footer-top h5, .footer-top h6 { color:#fff;} /*Footer Middle*/ .footer-middle {color:#ffffff; background: #25242c; padding:40px 0; border-bottom:1px solid #32313b;} .footer-widget .footer-title { color:#ffffff; margin-bottom:30px;} .footer-widget .list-default { margin-bottom:0;} /*Footer Bottom*/ .footer-bottom{ color:#ffffff; background: #32313B; padding:10px 0 10px 0; height:100px;} .footer-bottom a{color: inherit;} .footer-bottom a:hover {} .footer-bottom .menu-footer {padding:10px 0 0px;} .footer-bottom .menu-footer ul{margin:0; text-align:left; color:#fff;} .footer-bottom .menu-footer ul li{font-size:12px; padding-left:0px; padding-right:10px; font-family: 'Raleway', sans-serif;} .footer-bottom .menu-footer-bot {padding:5px 0 0px; color:#a2a2a2;} .footer-bottom .menu-footer-bot ul{margin:0; text-align:left;} .footer-bottom .menu-footer-bot ul li{font-size:12px;} .footer-bottom .copyright {padding:5px 0; text-align:left; } .footer-bottom .copyright p{ margin-bottom:0; line-height:1.9; font-size:10px; font-family: 'Open Sans', sans-serif; color:#818181;} .footer-bottom .social-footer { padding:10px 0 20px;} .footer-bottom .social-list { margin:0 auto; text-align:right;} .footer-bottom .social-list li{ margin-left:0px; list-style:none;} .footer-bottom .social-list li a { display: block; min-width: 20px; text-align: right; font-size:15px; color:#F90;} @media (min-width: 768px) and (max-width: 991px) { .nav > li > a { padding-left:9px; padding-right:9px;} .navbar-sub > li > a {line-height: 10px;} .footer-bottom .menu-footer ul{margin:0; text-align:left;} .footer-bottom .menu-footer ul li{font-size:13px; font-weight:600;} .footer-bottom .menu-footer-bot ul{margin:0; text-align:left;} .footer-bottom .menu-footer-bot ul li{font-size:12px;} } @media screen and (max-width: 767px) { .footer-bottom .menu-footer ol li {float:none; width:100%; text-align:center; list-style:block; height: 100%;font-size:11px;} .footer-bottom .menu-footer-bot ul li{float:none; width:100%; text-align:center; list-style:none; height: auto; margin-bottom:0px; line-height: 10px;} .footer-bottom .copyright p {float:none; width:100%; text-align:left; height: 100%; line-height: 15px; margin-top:5px;} .footer-bottom .social-list li{ display:none;} } /*=============================== ========== Typography ========== ===============================*/ p{font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} h1, h2, h3 { color:#18255a; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; text-rendering: optimizelegibility; letter-spacing:0px;} h4, h5, h6 { color:#18255a; font-family: 'Raleway', sans-serif; font-style: normal; font-weight: 600; text-rendering: optimizelegibility; letter-spacing:0px;} h1 {font-size: 58px; margin-top: 0;} h2 {font-size: 48px; margin-top: 0;} h3 {font-size: 36px; margin-top: 0;} h4 {font-size: 24px; margin-top: 0;} h5 {font-size: 20px; margin-top: 0;} h6 { margin-top: 0;} h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { color: #778899; font-weight:normal;} p {font-size:14px; font-weight: normal; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} /* Lead Paragraph*/ .lead{ font-size:13px; font-weight:normal; color:#595959; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} .lead.lead-small{ font-size:1.2em;} .lead.lead-big{ font-size:2em;} /* Special Headings */ .title-large{ font-size:72px;} .title-medium{ font-size:64px;} .script-font{font-family: 'Playball', cursive !important; letter-spacing:0 !important;} /* Fancy Title */ .fancy-title{ text-transform: none; margin-bottom:20px; } .fancy-title:after{content: ""; background:#ececec; display: block; height:1px; margin: 0; position: relative; width: 100%;} .fancy-title span:after {content: ""; display: block; height: 6px; margin: 20px 0 -3px; position: relative; width: 10%; z-index:2;} .text-center.fancy-title:after{content: ""; background:#ececec; display: block; height: 1px; margin: 0 auto; position: relative; width: 30%;} .text-center.fancy-title span:after {content: ""; display: block; height: 5px; margin: 20px auto -3px; position: relative; width: 10%;} .text-right.fancy-title:after{content: ""; background:#ececec; display: block; height: 1px; margin: 0 auto; position: relative; width: 100%;} .text-right.fancy-title span:after {content: ""; display: block; height: 5px; margin: 20px 0 -3px 90%; position: relative; width: 10%;} h5.fancy-title span:after, h6.fancy-title span:after { margin-top:10px !important;} h5.fancy-title , h6.fancy-title { margin-bottom:20px !important;} /* Font Weight */ .xlight { font-weight:100 !important;} .light { font-weight:300 !important;} .bold { font-weight:500 !important;} .xbold { font-weight:900 !important;} /* Dropcaps */ .firstletter {float: left; font-size: 2.4em; line-height: 1.2; margin-right: 0.3em; height:40px; width:40px; text-align:center;} .drop-fullround .firstletter { background-color:#848494; float: left; font-size: 2.4em; line-height: 1.6; margin-right: 0.3em; margin-top: 0.1em; height:55px; width:55px; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%;} .drop-border .firstletter {float: left; font-size: 2.4em; line-height: 1.6; margin-right: 0.3em; margin-top: 0.1em; height:55px; width:55px; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%; border:1px solid;} /*=============================== ========== Revolution Slider ========== ===============================*/ .tp-loader {z-index:9999;} .tp-loader.spinner0 {background:url(../img/theme/revolutionslider/loader.gif) no-repeat center center;} .tp-banner-container{width:100%; position:relative; padding:0;max-height: 400px !important;} .tp-banner{width:100%;position:relative; max-height: 400px !important;car} .tp-banner-fullscreen-container {width:100%;position:relative;padding:0;max-height: 400px !important;} /*=============================== ========== Team Members ========== ===============================*/ .team-wrapper{text-align:center; margin-bottom:0px; position:relative; overflow:hidden; cursor:pointer;} .team-wrapper img{width:100%; height:auto;} .team-member{ position:relative; overflow:hidden;} .team-photo{ position:relative;top:0; right:0;} .team-details{ overflow:hidden; position:absolute; top:-100%; height:100%; width:100%; display:block; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;} .team-contact{ padding:10px 0; background:#ffffff;} .team-contact ul{ margin:0;} .team-contact ul li a{ padding:5px; display:block; font-size:16px;} .team-description{ padding:20px 10px; height:100%; color:#ffffff; background:#000; /* fallback for browser that not support rgba */ background:rgb(0,0,0); background: rgba(0,0,0, .7); /* Works on all modern browsers */} .team-wrapper.cardtoggle .team-details{ right:0%; top:0} .team-info{padding:5px 2px; background:#ffffff;} .team-info .team-name {font-weight: 600; margin-bottom: 5px; font-size:16px;} .team-info .team-role { margin:0; font-size:13px;} /* Alternative 1*/ .team-wrapper-alt{cursor: default;} .team-wrapper-alt .team-info{ background:none;} /* Alternative 1*/ .team-wrapper-alt .overlay-wrapper .overlay-details { padding:10px; top:10%;} .team-wrapper-alt .overlay-wrapper:hover .overlay-details{ bottom: auto; top:10%; z-index:2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} .team-wrapper-alt:hover .overlay-wrapper .overlay-details{ bottom:auto; top:10%; z-index:2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} .team-wrapper-alt:hover .overlay-wrapper .overlay-wrapper-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */ } .team-wrapper-alt:hover .overlay-wrapper .overlay-bg{ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} .team-wrapper-alt .overlay-wrapper .overlay-details a { margin-bottom:10px;} /*=============================== ========== Elements ========== ===============================*/ /*========== Parallax ==========*/ .parallax{ background-position:70% 30%; background-attachment:fixed; background-repeat: no-repeat; position:relative; -webkit-background-size: cover !important; /* For WebKit*/ -moz-background-size: cover !important; /* Mozilla*/ -o-background-size: cover !important; /* Opera*/ background-size: cover !important; /* Generic*/ } .parallax-background1 {background-image:url(../img/content/parallax/parallax-back1.jpg);} .parallax-background2{ background-image:url(../img/content/parallax/parallax-back2.jpg);} .parallax-background3{ background-image:url(../img/content/parallax/parallax-back3.jpg);} .parallax-background4{ background-image:url(../img/content/parallax/parallax-back4.jpg);} .parallax-background5{ background-image:url(../img/content/parallax/parallax-back5.jpg);} .parallax-background6{ background-image:url(../img/content/parallax/parallax-back6.jpg);} .parallax-background7{ background-image:url(../img/content/parallax/parallax-back7.jpg);} .parallax-background8{ background-image:url(../img/content/parallax/parallax-back8.jpg);} .parallax-background9{ background-image:url(../img/content/parallax/parallax-back9.jpg);} .parallax-background10{ background-image:url(../img/content/parallax/parallax-back10.jpg);} .parallax-background11{ background-image:url(../img/content/parallax/parallax-back11.jpg);} .parallax-background12{ background-image:url(../img/content/parallax/parallax-back12.jpg); height:300px;} .parallax-background13{ background-image:url(../img/content/parallax/parallax-back13.jpg);} .parallax-background14{ background-image:url(../img/content/parallax/parallax-back14.jpg);} .parallax-background15{ background-image:url(../img/content/parallax/parallax-back15.jpg);} .parallax-background16{ background-image:url(../img/content/parallax/parallax-back16.jpg);} .parallax-background17{ background-image:url(../img/content/parallax/parallax-back17.jpg);} .parallax-background18{ background-image:url(../img/content/parallax/parallax-back18.jpg);} .parallax-breadcrumbs { background-image:url(../img/content/parallax/parallax-breadcrumbs.jpg);} .parallax-blog { background-image:url(../img/content/parallax/parallax-blog.jpg);} .parallax-about { background-image:url(../img/content/parallax/parallax-about.jpg); height:350px;} .parallax-personal { background-image:url(../img/content/parallax/parallax-back4.jpg); height:350px;} .parallax-services { background-image: url(../img/content/parallax/parallax-services.jpg) height:350px;;} .parallax-business { background-image:url(../img/content/banner/business-simply-better.jpg);} .parallax-team { background-image:url(../img/content/parallax/parallax-team.jpg);} .parallax-landing { background-image:url(../img/content/parallax/parallax-landing.jpg);} .parallax-404 { background-image:url(../img/content/parallax/parallax-404.jpg);} .parallax-search { background-image:url(../img/content/parallax/parallax-search.jpg);} .parallax-shop { background-image:url(../img/content/parallax/parallax-shop.jpg);} .parallax-portfolio{ background-image:url(../img/content/parallax/parallax-portfolio.jpg);} @media only screen and (max-width: 768px) { .parallax{ background-position:50% 50% !important; background-attachment: scroll; } } /* Background Overlay*/ .bg-overlay{display: block;height: 100%; position: absolute; top:0; width: 100%; z-index:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* Safari 1.x */ -khtml-opacity: 0.6; /* Modern browsers */opacity: 0.6;} .bg-overlay-solid{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} .bg-overlay.bg-overlay-light{background:#f4f4f4;} .bg-overlay.bg-overlay-glight{ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.3)), color-stop(50%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.6) 50%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; } .bg-overlay.bg-overlay-dark{background:#1e1e1e;} .bg-overlay.bg-overlay-gdark{ background: -moz-radial-gradient(center, ellipse cover, rgba(37,36,44,0.5) 0%, rgba(37,36,44,0.75) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(37,36,44,0.5)), color-stop(50%,rgba(37,36,44,0.75)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(37,36,44,0.5) 0%,rgba(37,36,44,0.75) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(37,36,44,0.5) 0%,rgba(37,36,44,0.75) 50%,rgba(0,0,0,1) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(37,36,44,0.5) 0%,rgba(37,36,44,0.75) 50%,rgba(0,0,0,1) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(37,36,44,0.5) 0%,rgba(37,36,44,0.75) 50%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8025242c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; } /*========== Portfolio ==========*/ .isotope-item {z-index: 2;} .isotope-hidden.isotope-item {pointer-events: none; z-index: 1;} .isotope, .isotope .isotope-item { -webkit-transition-duration: 1200ms; -moz-transition-duration: 1200ms; -ms-transition-duration: 1200ms; -o-transition-duration: 1200ms; transition-duration: 1200ms; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } ul#filters {list-style:none; margin:0 auto 40px; padding:0; text-align:center; position:relative; z-index:99;} ul#filters li{display: inline-block; padding-left: 5px; padding-right: 5px; margin-bottom:10px; } ul#filters li a.filter{ padding:8px 15px; color:#ccc; background: none; border:1px solid #ececec; display:block; font-size:12px; text-transform:uppercase; } ul#filters li a.filter.selected{ color:#fff;} .element{} .element-inner{} .element img{width: 100%; height:auto;} .portfolio-classic .element-inner{ margin-bottom:30px; padding:0 15px;} /* Start Columns */ .portfolio-1-cols .element {width: 100%;} .portfolio-2-cols .element {width: 50%;} .portfolio-3-cols .element {width: 33.3333%;} .portfolio-4-cols .element {width: 25%;} .portfolio-6-cols .element {width: 16.6667%;} .portfolio-2-cols .element.size-2x {width: 100%;} .portfolio-3-cols .element.size-2x {width: 66.60%;} .portfolio-4-cols .element.size-2x {width: 50%;} .portfolio-6-cols .element.size-2x {width: 33.3333%;} .portfolio-2-cols .element.size-3x {width: 100%;} .portfolio-3-cols .element.size-3x {width: 100%;} .portfolio-4-cols .element.size-3x {width: 75%;} .portfolio-6-cols .element.size-3x {width: 50%;} .element.size-full { width: 100%; } /* End Columns */ @media only screen and (max-width: 980px) { .element, .portfolio-1-cols .element, .portfolio-2-cols .element, .portfolio-3-cols .element, .portfolio-4-cols .element, .portfolio-6-cols .element, .portfolio-12-cols .element, .portfolio-2-cols .element.size-2x, .portfolio-3-cols .element.size-2x, .portfolio-4-cols .element.size-2x, .portfolio-6-cols .element.size-2x { width: 50%;} } @media only screen and (max-width: 480px) { .element, .portfolio-1-cols .element, .portfolio-2-cols .element, .portfolio-3-cols .element, .portfolio-4-cols .element, .portfolio-6-cols .element, .portfolio-12-cols .element, .portfolio-2-cols .element.size-2x, .portfolio-3-cols .element.size-2x, .portfolio-4-cols .element.size-2x, .portfolio-6-cols .element.size-2x { width: 100%; } } /* Colio - Basic Styles */ .colio {position: relative; height: 0;clear: both;overflow: hidden; background:#ffffff;} .colio-container {padding: 40px; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .colio-content {display: none;overflow: hidden;} .colio-close, .colio-prev, .colio-next {outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);} .colio-no-prev, .colio-no-next {cursor: ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; } /* navigation, close */ .colio-close {position: absolute;top: 10px; right: 10px;} .colio-navigation {position: absolute; top: 10px; left: 10px;} .colio-navigation a {margin-right: 5px;} /* placement */ .colio-placement-inside, .colio-placement-before {margin-bottom: 20px;} .colio-placement-after {margin:0px;} /* Colio GFX Theme Style */ /* container */ .colio-theme-gfx .colio-container {} /* colio close */ .colio-theme-gfx .colio-close span {display: block; font-size:28px; line-height:1.7;} .colio-theme-gfx .colio-close {position: absolute; color: #ffffff; height: 50px; margin-right: -25px; right: 50%; text-align: center; top: 25px; width: 50px;} .colio-theme-gfx .colio-close:hover {color: #ffffff; background:#32313B;} .colio-container {padding: 100px 0px;} /* colio navigation */ .colio-theme-gfx .colio-navigation span {display: block; font-size:28px; line-height:1.7;} .colio-theme-gfx .colio-navigation { top:auto; bottom:25px; left:50%; margin-left:-55px;} .colio-theme-gfx .colio-navigation a {float: left; margin-right: 5px; color: #ffffff; height: 50px; text-align: center; width: 50px;} .colio-theme-gfx .colio-navigation a:hover {color: #ffffff; background:#32313B;} .colio-theme-gfx .colio-prev span:before {content:'\f053'; font-family:'FontAwesome'; font-size:18px;} .colio-theme-gfx .colio-next span:before {content:'\f054'; font-family:'FontAwesome'; font-size:18px;} .colio-theme-gfx .colio-no-prev, .colio-theme-gfx .colio-no-next {color: #ffffff; background:#f2f2f2;} /* Portfolio Element */ /* Project Item */ .portfolio-item .project-meta { padding:10px;} .portfolio-item-content { padding:30px 10px; text-align:center;} .portfolio-item-title { font-size:16px; font-weight:500;} .portfolio-item-content p{margin-bottom:0;} .portfolio-item-content.panel { margin-top:-4px; padding:20px 10px;} /*========== Carousel ==========*/ .carousel .owl-item .carousel-item{ margin:0px;} .carousel .owl-controls{text-align: center;} /* Styling Next and Prev buttons */ .carousel .owl-controls .owl-buttons div{ color: #FFF; display: inline-block; zoom: 1;*display: inline;/*IE7 life-saver */ margin: 0px; padding: 5px 15px; font-size: 24px; position:absolute; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; } .carousel .owl-controls .owl-buttons .owl-prev { top:40%; left:0px;} .carousel .owl-controls .owl-buttons .owl-next { top:40%; right:0px;} /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .carousel .owl-controls.clickable .owl-buttons div:hover{filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none;} /* Styling Pagination*/ .owl-pagination { margin-top:10px;} .carousel .owl-controls .owl-page{display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */} .carousel .owl-controls .owl-page span{display: block; width: 24px; height: 10px; border:1px solid #ffffff; margin: 5px 4px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5;} .carousel .owl-controls .owl-page.active span, .carousel .owl-controls.clickable .owl-page:hover span{filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1;} .carousel .owl-controls .owl-page span.owl-numbers{ height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px;} /* preloading images */ .owl-item.loading{min-height: 150px; background: url(../img/theme/AjaxLoader.gif) no-repeat center center} /* mouse grab icon */ .grabbing { cursor:url(../img/theme/grabbing.png) 8 8, move;} .owl-item img{ width:100%; height:auto; } /* Carousel Theme */ .carousel.carousel-theme-round .owl-controls .owl-buttons div { background:none; border:2px solid #ececec; color: #ececec; padding:5px 18px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} .carousel.carousel-theme-round .owl-controls .owl-page span { height:14px; width:14px; background:none; border:2px solid #ececec; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} .carousel.carousel-theme-round .owl-controls .owl-buttons .owl-prev {left:10px;} .carousel.carousel-theme-round .owl-controls .owl-buttons .owl-next {right:10px;} .carousel.carousel-theme-round.carousel-nav-out .owl-controls .owl-buttons .owl-prev {left:-50px;} .carousel.carousel-theme-round.carousel-nav-out .owl-controls .owl-buttons .owl-next {right:-50px;} @media (max-width: 768px) { .carousel.carousel-theme-round.carousel-nav-out .owl-controls .owl-buttons .owl-prev {left:10px;} .carousel.carousel-theme-round.carousel-nav-out .owl-controls .owl-buttons .owl-next {right:10px;} } /* Carousel*/ .carousel.carousel-simple .owl-item .carousel-item{ margin:0 10px; padding-bottom:10px;} .carousel.carousel-simple .carousel.carousel-default .owl-item .carousel-item{ margin:0; padding-bottom:0;} /* Sync Carousel */ #full-sync .item{text-align: center;} #full-sync .item img{ width:100%; height:auto;} #thumb-sync .item{cursor: pointer; max-height:140px;} #thumb-sync .item img{ width:100%; height:auto; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* Safari 1.x */ -khtml-opacity: 0.5; /* Modern browsers */opacity: 0.5;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #thumb-sync .item:hover img{ /* IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";/* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} #thumb-sync .item h1{font-size: 18px;} /*========== Counters ==========*/ .counter-block{ padding:20px 10px; border: 2px dotted #ececec; margin-bottom:40px;} .timer{ margin-bottom:20px;} /*========== Testimonials ==========*/ .testimonials{ margin:0;} .testimonials .carousel{} .testimonial-item blockquote { margin:0;} .testimonial-item blockquote p{ font-style:italic;} /* Blockquote */ blockquote { border:none;} blockquote:before {content:'\f10e'; font-family:'FontAwesome'; top: 0; font-size:2em; color:#ececec; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* Safari 1.x */ -khtml-opacity: 0.6; /* Modern browsers */opacity: 0.6;} blockquote footer:before, blockquote small:before, blockquote .small:before { content:"";} blockquote footer, blockquote small, blockquote .small{ font-weight:600;} blockquote cite { font-weight:300;} /*========== Simple Slider ==========*/ .simple-slider{} /*========== Images ==========*/ .thumbnail { border:1px solid #ececec; padding:8px;} .img-thumbnail {border:0px solid #ececec; padding:0px;} .img-rounded {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} /* Align*/ .alignleft { float: left; margin: 0 20px 10px 0;} .alignright { float: right; margin: 0 0 10px 20px;} .aligncenter {display: block; margin: 0 auto; margin-bottom:20px;} .alignnone { float: none; margin: 0 auto;} /* List Images */ ul.gallery {list-style: none; overflow:hidden; padding:0; margin:0; } ul.gallery li {float:left; padding:0; margin:0;} ul.gallery li img {max-width: 100%; height: auto;} /* class for 2 columns */ ul.gallery.columns-2 li {width: 50%;} /* class for 3 columns */ ul.gallery.columns-3 li {width: 33.3%;} /* Overlay Image */ .overlay-wrapper { position:relative; overflow:hidden;} .overlay-wrapper img { width:100%; height:auto; -webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;} .overlay-wrapper .project-meta { padding:10px;} /* overlay */ .overlay-wrapper .overlay-details{display:block; color:#ffffff; position:absolute;right:0px; left:0; bottom:0; z-index:2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* Safari 1.x */ -khtml-opacity: 0; /* Modern browsers */opacity: 0; -webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-ms-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;} .overlay-wrapper-content { top:0; left:0; text-align:center; display: block; height: 100%; width: 100%;} .overlay-bg{ top:0; left:0; -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* Safari 1.x */ -khtml-opacity: 0.8; /* Modern browsers */opacity: 0.8; height:100%; width:100%; position:absolute; z-index:0; -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0);} .overlay-wrapper:hover .overlay-wrapper-content,.overlay-wrapper:focus .overlay-wrapper-content { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */} .overlay-title { position:absolute; left:0; right:0; top:-100%; margin:10px; border:2px solid #ffffff; z-index: 3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* Safari 1.x */ -khtml-opacity: 0; /* Modern browsers */opacity: 0; -webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;} .overlay-title h2, .overlay-title h3 {color:#fff; font-size: 14px; font-weight:400; letter-spacing: 1px; line-height: 1.4; margin:0; padding:10px 20px;} .overlay-wrapper:hover .overlay-title { position:absolute; top:5px; border:2px solid #ffffff; z-index: 3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} .overlay-wrapper:hover .overlay-bg, .overlay-wrapper:focus .overlay-bg{ -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} .overlay-wrapper:hover .overlay-details, .overlay-wrapper:focus .overlay-details{ bottom:40%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1;} .overlay-details a{ color:#ffffff ; font-size:22px; border:2px solid; width:48px; height:48px; margin-left:10px; line-height:1.8; display:inline-block;} .overlay-details a span.fa{ line-height:2;} .overlay-details a [class^="gfx-"]:before, .overlay-details a [class*=" gfx-"]:before{ top:0;} .overlay-details:hover, .overlay-details:focus{ color:#ffffff;} /* transparency */ .img-transparency { width:100%; height:auto;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* Safari 1.x */ -khtml-opacity: 0.4; /* Modern browsers */opacity: 0.4; -webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;} .img-transparency:hover {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */} .overlay-wrapper:hover .img-transparency, .overlay-wrapper:focus .img-transparency {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Safari 1.x */ -khtml-opacity: 1; /* Modern browsers */opacity: 1; backface-visibility: hidden; /* W3C */ -webkit-backface-visibility: hidden; /* Safari & Chrome */ -moz-backface-visibility: hidden; /* Firefox */ -ms-backface-visibility: hidden; /* Internet Explorer */ -o-backface-visibility: hidden; /* Opera */} /* zoom */ .overlay-wrapper .img-zoom { width:100%; height:auto;} .overlay-wrapper:hover .img-zoom, .overlay-wrapper:focus .img-zoom {-webkit-transform:scale(1.4); -moz-transform:scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4);} @media (max-width: 1024px) { .overlay-wrapper:hover .overlay-details, .overlay-wrapper:focus .overlay-details{} } /*========== Tooltips ==========*/ .o-tooltip{position:absolute;z-index:9999;display:block;visibility:visible;font-size:13px;} .o-tooltip-inner{padding:15px 20px;color:#fff;text-align:center;text-decoration:none;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .o-tooltip.bl,.o-tooltip.bc,.o-tooltip.br{margin-top:-12px} .o-tooltip.ml{margin-left:12px} .o-tooltip.tl,.o-tooltip.tc,.o-tooltip.tl,.o-tooltip.tr{margin-top:12px} .o-tooltip.mr{margin-left:-12px} .o-tooltip.bc .o-tooltip-arrow{left:50%;margin-left:-12px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid;} .o-tooltip.mr .o-tooltip-arrow{top:50%;right:-12px;margin-top:-12px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:12px solid;} .o-tooltip.tc .o-tooltip-arrow{left:50%;margin-left:-12px;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid;} .o-tooltip.ml .o-tooltip-arrow{top:50%;left:-12px;margin-top:-12px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:12px solid;} .o-tooltip.tl .o-tooltip-arrow{left:0;border-top:12px solid rgba(0, 0, 0, 0);border-bottom:12px solid transparent;border-left:12px solid; } .o-tooltip.bl .o-tooltip-arrow{left:0;border-top:12px solid rgba(0, 0, 0, 0);border-bottom:12px solid transparent;border-left:12px solid; } .o-tooltip.tr .o-tooltip-arrow{right:0;border-top:12px solid rgba(0, 0, 0, 0);border-bottom:12px solid transparent;border-right:12px solid;} .o-tooltip.br .o-tooltip-arrow{top:100%;right:0;margin-top:-13px;border-top:12px solid rgba(0, 0, 0, 0);border-bottom:12px solid transparent;border-right:12px solid;} /* Tooltip arrow bottom */ .o-tooltip.bl .o-tooltip-arrow, .o-tooltip.bc .o-tooltip-arrow, .o-tooltip.br .o-tooltip-arrow {bottom:-11px;} /* Tooltip arrow top */ .o-tooltip.tl .o-tooltip-arrow, .o-tooltip.tc .o-tooltip-arrow, .o-tooltip.tr .o-tooltip-arrow {top:-12px;} .o-tooltip-arrow{position:absolute;width:0;height:0;} .o-tooltip-close{position:absolute;width:15px;height:15px;background:#137861;cursor:pointer;left:100%;margin-left:-15px;-webkit-border-top-right-radius: 3px;-webkit-border-bottom-left-radius: 2px;-moz-border-radius-topright: 3px;-moz-border-radius-bottomleft: 2px;border-top-right-radius: 3px;border-bottom-left-radius: 2px;} .o-tooltip-close span{display:block;width:4px;height:4px;line-height:4px;font-size:10px;position:absolute;left:50%;top:50%;margin:-4px 0 0 -2px;color:#FFF;font-weight:bold;} .o-tooltip.mr .o-tooltip-close, .o-tooltip.tr .o-tooltip-close {left:0px;margin:0;-webkit-border-top-left-radius: 3px;-webkit-border-bottom-right-radius: 1px;-moz-border-radius-topleft: 3px;-moz-border-radius-bottomright: 1px;border-top-left-radius: 3px;border-bottom-right-radius: 1px;} /*========== Lists ==========*/ .list-default{ font-size:13px;font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} .list-default li{ padding:4px 0; line-height:1;} .list-default li a{color:#595959;} .list-default li a:hover, a:focus { text-decoration:none; color:#0087cb;} .list-default.fa-ul li .fa { line-height:1.2; padding-left:0px;} .list-default.fa-ul li .icon {line-height:1.5; padding-left:0px;} .list-default.fa-ul li .livicon{ margin-left:-2.14286em; width: 2.14286em !important;} /* Icon Lists */ .fa-ul{ list-style:none; padding-left:0;} .fa-ul li .fa{ padding-top:-4px;} /* Divider List */ .divider-list{} .divider-list li {padding:10px 0; border-top:1px solid #ececec;} .divider-list li .fa {padding:8px 0;} .divider-list li .icon {padding:8px 0;} .divider-list li:first-child {border-top:none;} /* Big-list */ .biglist li{padding:10px 0; font-size:18px;} .biglist li .fa{padding:5px 0;} .biglist li .icon{padding:5px 0;} /* Widget List */ .widget-list{} .widget-list li{ margin-bottom:12px; font-size:14px;} .widget-list li .fa{ border: 1px solid; height: 1.2em; width: 1.2em; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;} /* Recent Posts */ .recent-post { list-style:none; margin:0; padding:0;} .recent-post li{ margin-bottom:20px; display:table; width:100%;} .recent-post li a{ font-weight:500; color:#32313b;} .recent-post li img{ max-width:80px; float:left; margin-right:10px;} .recent-post li .rating{ text-align:left; position:relative; background:none; top:0; bottom:0;} /* Media Lists */ .media, .media .media{ margin-top:30px;} /* List Footer Latest */ .footer-widget .list-latest{ list-style:none; margin:0; padding:0;} .footer-widget .list-latest li{ padding:4px 0; line-height:1.8;} .footer-widget .list-latest li:first-child{ padding-top:0;} .footer-widget .list-latest li .latest-date{ display:block; color:#778899; font-size:13px;} .footer-widget .list-latest li a{ color: inherit;} .footer-widget .list-latest li a:hover, .footer-widget .list-latest li a:focus{ color: #778899;} /* Font Awesome Custom List - can be removed in production websites */ .fontawesome-icon-list {} .fontawesome-icon-list .fa-hover a{ display:block; padding:8px; font-size:12px;} .fontawesome-icon-list .fa-hover a .fa{ font-size:16px; margin-right:5px;} .fontawesome-icon-list .fa-hover:hover a{ background:#f2f2f2;} /* MyClear Icons list - can be removed in production website */ .glyphs.css-mapping{padding:30px 0 20px 30px; -webkit-border-radius:4px;border-radius:4px;} .glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden} .glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px; overflow:hidden;float:left;font-size:24px} .glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:4px;border-radius:4px;background:#fff;outline:0;float:right;} .glyphs.css-mapping input:focus{border:1px solid;} .glyphs.css-mapping input:hover{border:1px solid;} /*========== Buttons ==========*/ .btn { border: none;} .btn:hover, .btn:focus { color: #778899;} .btn:active, .btn.active {-webkit-box-shadow: none; box-shadow: none;} /*button default*/ .btn-default {color: #778899; background-color: #f4f4f4; border:none;} .btn-default:hover,.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {color: #333333; background-color: #ececec;} .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default.active[disabled], fieldset[disabled] .btn-default.active{ background-color:#f0f0f0;} /*alt*/ .btn-default.btn-alt {color: #999; border:2px solid; border-color:#ececec; background-color:transparent;} .btn-default.btn-alt:hover,.btn-default.btn-alt:focus, .btn-default.btn-alt:active, .btn-default.btn-alt.active, .open .dropdown-toggle.btn-default.btn-alt {background-color: #ececec; border:2px solid; border-color:#ececec;} /*button primary*/ .btn-primary {color: #ffffff;} .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {color: #ffffff;} .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {background-color: #ff9966;} .btn-primary .badge { color: #428bca; background-color: #ffffff;} /*alt*/ .btn-primary.btn-alt {border:2px solid; background-color:transparent;} .btn-primary.btn-alt:hover, .btn-primary.btn-alt:focus, .btn-primary.btn-alt:active, .btn-primary.btn-alt.active, .open .dropdown-toggle.btn-primary.btn-alt {color: #ffffff; border:2px solid;} /*button skyblue*/ .btn-skyblue {color: #ffffff; background-color: #0078cb; border: 1px solid #378eca;} .btn-skyblue:hover, .btn-skyblue:focus, .btn-skyblue:active, .btn-skyblue.active, .open .dropdown-toggle.btn-skyblue {color: #ffffff; background-color: #2888ca;} .btn-skyblue.disabled, .btn-skyblue[disabled], fieldset[disabled] .btn-skyblue, .btn-skyblue.disabled:hover, .btn-skyblue[disabled]:hover, fieldset[disabled] .btn-skyblue:hover, .btn-skyblue.disabled:focus, .btn-skyblue[disabled]:focus, fieldset[disabled] .btn-skyblue:focus, .btn-skyblue.disabled:active, .btn-skyblue[disabled]:active, fieldset[disabled] .btn-skyblue:active, .btn-skyblue.disabled.active, .btn-skyblue[disabled].active, fieldset[disabled] .btn-skyblue.active {background-color: #bbdb66;} .btn-skyblue .badge {color: #5cb85c; background-color: #ffffff;} /*alt*/ .btn-skyblue.btn-alt {color: #0078cb; border:2px solid; border-color:#9dd55d; background-color:transparent;} .btn-skyblue.btn-alt:hover, .btn-skyblue.btn-alt:focus, .btn-skyblue.btn-alt:active, .btn-skyblue.btn-alt.active, .open .dropdown-toggle.btn-skyblue.btn-alt {color: #ffffff; background-color: #0078cb; border:2px solid; border-color:#0078cb;} /*button success*/ .btn-success {color: #ffffff; background-color: #9dd55d;} .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {color: #ffffff; background-color: #8dbd0a;} .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active {background-color: #bbdb66;} .btn-success .badge {color: #5cb85c; background-color: #ffffff;} /*alt*/ .btn-success.btn-alt {color: #9dd55d; border:2px solid; border-color:#9dd55d; background-color:transparent;} .btn-success.btn-alt:hover, .btn-success.btn-alt:focus, .btn-success.btn-alt:active, .btn-success.btn-alt.active, .open .dropdown-toggle.btn-success.btn-alt {color: #ffffff; background-color: #9dd55d; border:2px solid; border-color:#9dd55d;} /*button info*/ .btn-info { color: #ffffff; background-color: #22d2d2;} .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {color: #ffffff; background-color: #0cc0c0;} .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active {background-color: #66eeee;} .btn-info .badge {color: #5bc0de; background-color: #ffffff;} /*alt*/ .btn-info.btn-alt { color: #22d2d2; border:2px solid; border-color:#22d2d2; background-color:transparent;} .btn-info.btn-alt:hover, .btn-info.btn-alt:focus, .btn-info.btn-alt:active, .btn-info.btn-alt.active, .open .dropdown-toggle.btn-info.btn-alt {color: #ffffff; background-color: #22d2d2; border:2px solid; border-color:#22d2d2;} /*button warning*/ .btn-warning {color: #ffffff; background-color: #f37b01;} .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {color: #ffffff; background-color: #ee8820;} .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active {background-color: #ffcc99;} .btn-warning .badge {color: #f0ad4e; background-color: #ffffff;} /*alt*/ .btn-warning.btn-alt {color: #f37b01; border:2px solid; border-color:#f37b01; background-color:transparent;} .btn-warning.btn-alt:hover, .btn-warning.btn-alt:focus, .btn-warning.btn-alt:active, .btn-warning.btn-alt.active, .open .dropdown-toggle.btn-warning.btn-alt {color: #ffffff; background-color: #f37b01; border:2px solid; border-color:#f37b01;} /*button danger*/ .btn-danger {color: #ffffff; background-color: #f33440;} .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {color: #ffffff; background-color: #dd3333;} .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active {background-color: #ff9999;} .btn-danger .badge {color: #d9534f; background-color: #ffffff;} /*alt*/ .btn-danger.btn-alt {color: #666; border:2px solid; border-color:#f33440; background-color:transparent; border-radius:10px;} .btn-danger.btn-alt:hover, .btn-danger.btn-alt:focus, .btn-danger.btn-alt:active, .btn-danger.btn-alt.active, .open .dropdown-toggle.btn-danger.btn-alt {color: #ffffff; background-color: #f33440; border:2px solid; border-color:#f33440;} /*button white*/ .btn-white {color: #778899; background-color: #fff;} .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white {background-color: #ececec;} .btn-white.disabled, .btn-white[disabled], fieldset[disabled] .btn-white, .btn-white.disabled:hover, .btn-white[disabled]:hover, fieldset[disabled] .btn-white:hover, .btn-white.disabled:focus, .btn-white[disabled]:focus, fieldset[disabled] .btn-white:focus, .btn-white.disabled:active, .btn-white[disabled]:active, fieldset[disabled] .btn-white:active, .btn-white.disabled.active, .btn-white[disabled].active, fieldset[disabled] .btn-white.active { color:#cccccc; background-color:#f5f5f5;} .btn-white .badge {color: #d9534f; background-color: #ffffff;} /*alt*/ .btn-white.btn-alt {color: #ffffff; border:2px solid; border-color:#fff; background-color:transparent;} .btn-white.btn-alt:hover, .btn-white.btn-alt:focus, .btn-white.btn-alt:active, .btn-white.btn-alt.active, .open .dropdown-toggle.btn-white.btn-alt {color: #778899; background-color: #ffffff; border:2px solid; border-color:#ffffff;} /*button green*/ .btn-green {color: #ffffff; background-color: #44a84b; border: 1px solid #378eca;} .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green {color: #ffffff; background-color: #2888ca;} .btn-green.disabled, .btn-green[disabled], fieldset[disabled] .btn-green, .btn-green.disabled:hover, .btn-green[disabled]:hover, fieldset[disabled] .btn-green:hover, .btn-green.disabled:focus, .btn-green[disabled]:focus, fieldset[disabled] .btn-green:focus, .btn-green.disabled:active, .btn-green[disabled]:active, fieldset[disabled] .btn-green:active, .btn-green.disabled.active, .btn-green[disabled].active, fieldset[disabled] .btn-green.active {background-color: #bbdb66;} .btn-green .badge {color: #5cb85c; background-color: #ffffff;} /*alt*/ .btn-green.btn-alt {color: #44a84b; border:2px solid; border-color:#9dd55d; background-color:transparent;} .btn-green.btn-alt:hover, .btn-green.btn-alt:focus, .btn-green.btn-alt:active, .btn-green.btn-alt.active, .open .dropdown-toggle.btn-green.btn-alt {color: #ffffff; background-color: #44a84b; border:2px solid; border-color:#44a84b;} /*button sizes*/ .btn {padding: 18px 28px; font-size: 14px; line-height:1;} .btn-lg,.btn-group-lg > .btn {padding: 24px 48px; font-size: 18px;} .btn-sm,.btn-group-sm > .btn {padding: 14px 20px; font-size: 14px; font-weight:bold;} .btn-xs,.btn-group-xs > .btn { padding: 8px 16px; font-size: 12px;} .btn-mini,.btn-group-mini > .btn { padding: 4px 8px; font-size: 10px;} /*========== Creative Links ==========*/ /* Effect 1: Brackets */ .cl-effect-1 a::before, .cl-effect-1 a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .cl-effect-1 a::before { margin-right: 2px; content: '['; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .cl-effect-1 a::after { margin-left: 2px; content: ']'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } .cl-effect-1 a:hover::before, .cl-effect-1 a:hover::after, .cl-effect-1 a:focus::before, .cl-effect-1 a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } /* Effect 2: second border slides up */ .cl-effect-2 { position:relative;} .cl-effect-2 a {padding: 8px 2px;} .cl-effect-2 a::before, .cl-effect-2 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 2px; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.50); -moz-transform: scale(0.50); transform: scale(0.50); } .cl-effect-2 a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s; } .cl-effect-2 a:hover::before, .cl-effect-2 a:hover::after, .cl-effect-2 a:focus::before, .cl-effect-2 a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .cl-effect-2 a:hover::after, .cl-effect-2 a:focus::after { top: 0%; opacity: 1; } /* Effect 3: circle */ .cl-effect-3 { position:relative;} .cl-effect-3 a::before, .cl-effect-3 a::after { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; border: 2px solid rgba(0,0,0,0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .cl-effect-3 a::after { width: 70px; height: 70px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .cl-effect-3 a:hover::before, .cl-effect-3 a:hover::after, .cl-effect-3 a:focus::before, .cl-effect-3 a:focus::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } /* Effect 4: three circles */ .cl-effect-4 { position:relative;} .cl-effect-4 a { -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-4 a::before { position: absolute; top: 50%; left: 50%; color: transparent; content: '\2022'; text-shadow: 0 0 transparent; font-size: 1.2em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; } .cl-effect-4 a:hover::before, .cl-effect-4 a:focus::before { } .cl-effect-4 a:hover, .cl-effect-4 a:focus { } /* Effect 5: cross */ .cl-effect-5 { position: relative; z-index: 1; } .cl-effect-5 a { padding: 0 5px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-5 a::before { position: absolute; width: 100%; left: 0; top: 80%; height: 2px; margin-top: -1px; content: ''; z-index: -1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-5 a::after { position: absolute; width: 100%; left: 0; bottom: 60%; height: 2px; margin-top: -1px; content: ''; z-index: -1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .cl-effect-5 a::before { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } .cl-effect-5 a::after { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } .cl-effect-5 a:hover, .cl-effect-5 a:focus { } .cl-effect-5 a:hover::before, .cl-effect-5 a:hover::after, .cl-effect-5 a:focus::before, .cl-effect-5 a:focus::after { opacity: 0.7; } .cl-effect-5 a:hover::before, .cl-effect-5 a:focus::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .cl-effect-5 a:hover::after, .cl-effect-5 a:focus::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* Effect 6: borders slight translate */ .cl-effect-6 { position:relative;} .cl-effect-6 a { padding: 2px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; } .cl-effect-6 a::before, .cl-effect-6 a::after { position: absolute; left: 0; width: 100%; height: 2px; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-6 a::before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .cl-effect-6 a::after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .cl-effect-6 a:hover, .cl-effect-6 a:focus { } .cl-effect-6 a:hover::before, .cl-effect-6 a:focus::before, .cl-effect-6 a:hover::after, .cl-effect-6 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /*========== Alerts ==========*/ .alert {border:none; background-color: #32313b; } .alert-clean{ background:none; border:1px solid #ececec;} .alert.alert-success {background-color: #e0f090; border:none;} .alert.alert-info {background-color: #b6e6e6; border:none; } .alert.alert-skyblue {background-color: #0087cb; border:none; } .alert.alert-warning {background-color: #ecc992; border:none; color:#cc6600; } .alert.alert-danger {background-color: #ff9999; border:none; } /* Alerts Alternative*/ .alert-alt{ padding-left:50px; position:relative;} .alert-alt.alert-clean:before{ content: "\f024"; font-family:'FontAwesome'; font-size: 18px; color:#ececec; display: block; position: absolute; left:17px; top:14px;} .alert-alt.alert-success:before{ content: "\f00c"; font-family:'FontAwesome'; font-size: 18px; color:#9dd55d; display: block; position: absolute; left:17px; top:14px;} .alert-alt.alert-info:before{ content: "\f129"; font-family:'FontAwesome'; font-size: 18px; color:#22d2d2; display: block; position: absolute; left:17px; top:14px;} .alert-alt.alert-warning:before{ content: "\f071"; font-family:'FontAwesome'; font-size: 18px; color:#f37b01; display: block; position: absolute; left:17px; top:14px;} .alert-alt.alert-danger:before{ content: "\f05e"; font-family:'FontAwesome'; font-size: 18px; color:#f33440; display: block; position: absolute; left:17px; top:14px;} /*========== Icons ==========*/ .iconleft { margin-right:14px;} .iconright { margin-left:14px;} .btn .iconleft { margin-right:14px;} .btn .iconright { margin-left:14px;} .btn-sm .iconleft, .btn-xs .iconleft { margin-right:6px;} .btn-sm .iconright, .btn-xs .iconright { margin-left:6px;} [class^="gfx-"]:before, [class*=" gfx-"]:before { vertical-align:middle; position:relative; top:-0.14em;} /*========== LivIcons ==========*/ .livicon {display: inline-block; line-height: inherit; vertical-align: middle;} /*========== Icon Boxes ==========*/ .iconbox{ padding:5px 5px 10px 0; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} .iconbox .iconbox-wrapper{ float:left; margin-right:20px; font-size:20px; line-height:1; text-align:center; } .iconbox-wrapper.pull-right{ margin-left:20px; margin-right:0;} .iconbox .iconbox-content{overflow:hidden; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} .iconbox .iconbox-content h4, h5{ font-weight:600; letter-spacing:0px; padding:0px;} .iconbox-list{ margin-bottom:0px } .iconbox-list li{ margin-top:20px; } .iconbox-list li:first-child{ margin-top:0px; } /* livicons iconbox*/ .iconbox .livicon {margin-bottom: 20px; float:left; margin-right:20px;} /* icon box vertical*/ .iconbox.vertical{ text-align:left; vertical-align:middle;} .iconbox.vertical .iconbox-wrapper{ float:none; margin:0 auto 15px;} .iconbox.vertical .livicon {margin-bottom: 6px; float:none; margin-right:0px; line-height:1;} /* icon box icon size*/ .iconbox-wrapper.iconbox-2x{font-size:38px; width:38px; height:38px; line-height:38px;} .iconbox-wrapper.iconbox-3x{font-size:60px; width:60px; height:60px; line-height:60px;} .iconbox-wrapper.iconbox-4x{font-size:90px; width:90px; height:90px; line-height:90px;} .iconbox-wrapper.iconbox-5x{font-size:110px; width:110px; height:110px; line-height:110px;} .iconbox-wrapper.iconbox-2x .livicon{ margin-bottom:8px;} .iconbox-wrapper.iconbox-3x .livicon{ margin-bottom:12px;} /* icon box circle*/ .iconbox-wrapper.circle{ background:#f2f2f2; height:36px; width:36px; line-height:36px; font-size:18px; text-align:center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;} .iconbox-wrapper.circle.border{ background: none; border:2px solid;} .iconbox-wrapper.circle.iconbox-2x{font-size:32px !important; width:68px !important; height:68px !important; line-height:68px !important;} .iconbox-wrapper.circle.iconbox-3x{font-size:60px !important; width:110px !important; height:110px !important; line-height:110px !important;} /* icon box square*/ .iconbox-wrapper.square{ background:#f2f2f2; height:36px; width:36px; line-height:36px; font-size:18px; text-align:center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;} .iconbox-wrapper.square.border{ background: none; border:2px solid;} .iconbox-wrapper.square.iconbox-2x{font-size:38px !important; width:68px !important; height:68px !important; line-height:68px !important;} .iconbox-wrapper.square.iconbox-3x{font-size:60px !important; width:110px !important; height:110px !important; line-height:110px !important;} /*========== Progress bars ==========*/ .progress { background:#f1f1f1; height: 40px; margin-bottom: 40px; border-radius: 0; -webkit-box-shadow: none; box-shadow: none;} .progress-bar { line-height: 40px; text-align:left; -webkit-box-shadow: none; box-shadow: none; } .pb-content-text { display: block; font-size: 12px; font-weight: 600; line-height: 2.5; padding: 5px 10px;} .pb-icon { float:left; padding:10px; line-height:1; font-size:18px;} .pb-slim{height: 20px; margin-bottom: 20px;} .pb-slim .pb-content-text{ line-height:1; padding:4px 10px;} .pb-slim .pb-icon { padding:2px 10px; font-size:16px;} /*progress bar align right - default is left*/ .pb-right .progress-bar {float: right;} .pb-right .pb-content-text {text-align: right;} /*progress bar colors*/ .progress-bar-success {background-color: #9dd55d !important;} .progress-bar-info {background-color: #22d2d2 !important;} .progress-bar-warning {background-color: #f37b01 !important;} .progress-bar-danger {background-color: #f33440 !important;} .progress-bar-dark {background-color: #555566 !important;} /*========== Pie Chart ==========*/ .progress-pie-wrapper { text-align:center;} .progress-pie { display:inline-block;} .progress-pie.center-block{ display:block;} .progress-pie.center-block .chart { margin:0 auto;} .progress-pie .chart { position: relative; width: 180px; height: 180px; text-align: center; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%;} .progress-pie .chart canvas { -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%;position: absolute; top: 0; left: 0;} .progress-pie .pie-content { position:absolute; height: 120px; width:120px; margin-top:30px; margin-left:30px; padding:20px 0; z-index: 2; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%;border-radius:50%; color:#ffffff; /* Fallback for web browsers that doesn't support RGBa */background: rgb(0, 0, 0) transparent; /* RGBa with 0.6 opacity */background: rgba(50, 49, 59, 0.8);} .progress-pie .pie-content .title-pie { font-size:14px; font-weight:bold; display:block; padding:0 12px;} .progress-pie .pie-content .percent { font-size:40px; display:block; padding-top:5px; line-height:1.4;} .progress-pie .pie-content .percent.icon-only { line-height:1.5; font-size:48px;} .progress-pie .pie-content .percent.counter { line-height:1.2;} /*========== Forms ==========*/ .form-control { height:50px; padding:10px 20px; background-color:transparent; border: 1px solid #ececec; color:#778899; -webkit-box-shadow: none; box-shadow: none;} .form-control:focus {-webkit-box-shadow: none; box-shadow: none;} .form-group [class*="col-sm-"], .form-group [class*="col-md-"], .form-group [class*="col-lg-"] { margin-bottom:15px;} .form-group [class*="col-sm-"]:last-child, .form-group [class*="col-md-"]:last-child, .form-group [class*="col-lg-"]:last-child { margin-bottom:0;} .form-control::-moz-placeholder {color:#cccccc;} /*dark form*/ .dark-form{} /*========== Lightbox ==========*/ .mfp-preloader { z-index:1046;} /*========== Backgrounds and Colors ==========*/ /*bg*/ .bg-color-success{ background-color:#9dd55d !important;} .bg-color-info{ background-color:#22d2d2 !important;} .bg-color-warning{ background-color:#f37b01 !important;} .bg-color-danger{ background-color:#f33440 !important;} .bg-color-light{ background-color:#dcdcdc !important;} .bg-color-dark{ background-color:#32313B !important;} .bg-color-white{ background-color:#ffffff !important;} .bg-color-none{ background-color:transparent !important} .bg-color-darkblue{ background-color:#18255a !important;} .bg-color-skyblue{ background-color:#0087cb !important} .bg-color-lightskyblue{ background-color:#0087cb; opacity:0.8; !important} .bg-color-lightgrey{ background-color:#efefef !important;} .bg-color-vlightgrey{ background-color:#fafafa !important;} .bg-color-lightblue{ background-color:#d9f0f7; !important;} .bg-color-fire{ background-color:#b81824; !important;} .bg-color-black{ background-color:#000; !important;} .bg-color-green{ background-color:#44a84b; !important;} .bg-color-footer{ background-color:#0f0d49 !important;} /*colors*/ .color-success{ color:#9dd55d !important;} .color-info{ color:#22d2d2 !important;} .color-warning{ color:#f37b01 !important;} .color-danger{ color:#f33440 !important;} .color-white{ color:#ffffff !important;} .color-dark{ color:#32313B !important;} .color-darkblue{ color:#18255a !important;} .color-skyblue{ color:#0087cb !important;} .color-lightgrey{ color:#a2a2a2 !important;} .color-vlightgrey{ color:#c3c3c3 !important;} .color-green{ color:#44a84b !important;} /*========== White Space ==========*/ .white-space {display: block; width: 100%;} .white-space.space-mini { padding:5px 0;} .white-space.space-xsmall { padding:10px 0;} .white-space.space-small { padding:20px 0;} .white-space.space-medium { padding:30px 0;} .white-space.space-big { padding:50px 0;} /*========== Dividers ==========*/ hr{ margin-top:20px; margin-bottom:5px;} /* hr fancy */ hr.hr-fancy {border: 0 solid #ececec;border-top-width: 1px;height: 0; display: block;width: 100%;position: relative;} hr.hr-fancy:after {content: " ";width: 30%;height: 5px; position: relative; bottom:3px; display:block;} hr.text-center.hr-fancy:after { margin:0 auto;} hr.text-right.hr-fancy:after { float:right;} /* hr fade margins */ hr.hr-fade { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(179,179,196,0), rgba(179,179,196,0.75), rgba(179,179,196,0)); background-image: -moz-linear-gradient(left, rgba(179,179,196,0), rgba(179,179,196,0.75), rgba(179,179,196,0)); background-image: -ms-linear-gradient(left, rgba(179,179,196,0), rgba(179,179,196,0.75), rgba(179,179,196,0)); background-image: -o-linear-gradient(left, rgba(179,179,196,0), rgba(179,179,196,0.75), rgba(179,179,196,0)); } /* hr double border */ hr.hr-double { padding: 4px; border: none; border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;} /* hr icon */ .hr-icon {position: relative; display:block;} .icon-divider{background-color: #FFFFFF; display: block; font-size: 38px; height: 50px; left: 50%; line-height: 50px; margin-left: -40px; position: absolute; text-align: center; width: 80px; top:-25px;} hr.dotted { border-style: dotted; border-top-width: 1px; } hr.dashed { border-style: dashed; border-top-width: 1px; } hr.double { border-style: double; border-top-width: 3px; } hr.shadow { border: 0 none; margin-bottom: 10px; overflow: hidden; padding-top: 10px; position: relative; } hr.shadow:after { bottom: 10px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.8); content: ""; height: 20px; left: 5%; position: absolute; right: 5%; z-index: -1; } hr.no-line { border: 0 none; height: 1px; } hr.margin-bottom { margin-top: 0; } hr.margin-top { margin-bottom: 0; } .divider { position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; overflow: hidden; margin: 3rem auto; color: #E5E5E5; width: 100%; } .divider.divider-margin-lg { margin: 5rem auto; } .divider::after, .divider::before { content: ''; -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; height: 1px; background-color: #EEE; } .divider::before { display: none; margin-right: 0.5rem; } .divider::after { margin-left: 0.5rem; } .divider.divider-thick::after, .divider.divider-thick::before { height: 3px; } .divider.divider-sm { width: 55%; } .divider.divider-xs { width: 35%; } .divider i, .divider a, .divider-text { position: relative; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 24px; max-width: 100%; line-height: 1; font-size: 18px !important; text-align: center; } .divider a, .divider-text { width: auto; color: inherit; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .divider a:hover { color: #888; } /* Divider - Icon Align Right -----------------------------------------------------------------*/ .divider.divider-right::before { display: block; } .divider.divider-right::after { display: none; } /* Divider - Icon Align Center -----------------------------------------------------------------*/ .divider.divider-center::before { display: block; } /* Divider - Rounded Icon -----------------------------------------------------------------*/ .divider.divider-rounded i, .divider.divider-border i { width: 40px; height: 40px; line-height: 40px; color: #BBB; background-color: #F5F5F5; border-radius: 50%; } .divider.divider-rounded::before, .divider.divider-border::before, .divider.divider-rounded::after, .divider.divider-border::after { margin-left: 0; margin-right: 0; } /* Divider - Rounded & Border -----------------------------------------------------------------*/ .divider.divider-border { color: #E5E5E5; } .divider.divider-border i { line-height: 38px; background-color: transparent; border: 1px solid #EEE; } /* Divider - Line Only -----------------------------------------------------------------*/ .divider.divider-line::before, .divider.divider-line::after { margin-left: 0; margin-right: 0; } /*========== Labels ==========*/ .label{ vertical-align:middle; padding:0.2em 0.6em 0.2em;} .label-default { background-color: #778899; } .label-default[href]:hover, .label-default[href]:focus { background-color: #5e5e5e; } .label-primary {} .label-primary[href]:hover, .label-primary[href]:focus { } .label-success { background-color: #9dd55d; } .label-success[href]:hover, .label-success[href]:focus { background-color: #8dbd0a; } .label-info { background-color: #22d2d2; } .label-info[href]:hover, .label-info[href]:focus { background-color: #0cc0c0; } .label-warning { background-color: #f37b01; } .label-warning[href]:hover, .label-warning[href]:focus { background-color: #ee8820; } .label-danger { background-color: #f33440; } .label-danger[href]:hover, .label-danger[href]:focus { background-color: #dd3333; } /*=============================== ========== Tabs ========== ===============================*/ .nav-tabs {border-bottom: none;} .nav-tabs > li {float: left; margin-bottom: 0px;} .nav-tabs > li > a { padding:8px 8px; margin-right: 1px; line-height: 1.42857143;border: none; border-radius: 0; background: #32313b; color: #fff; border-bottom:4px solid;} .sidebar-widget .nav-tabs > li > a { padding:15px 5px;} .nav-tabs > li > a:hover {border-color: #ececec; background:#f5f5f5;} .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #fff; cursor: default; border: 0; border-bottom:4px solid;} .nav-tabs.nav-justified { display: block;width: 100%; border-bottom: 0;} .nav-tabs.nav-justified > li { float: none;} .nav-tabs.nav-justified > li > a {margin-bottom: 5px; text-align: center;} .nav-tabs.nav-justified > .dropdown .dropdown-menu {top: auto; left: auto;} .nav-tabs.nav-hori { width: 100%; border-bottom: 0;} .nav-tabs.nav-hori > li { float: none;} .nav-tabs.nav-hori > li > a {margin-bottom: 5px; text-align: center;} .nav-tabs.nav-hori > .dropdown .dropdown-menu {top: auto; left: auto;} .nav > li > a:hover, .nav > li > a:focus {background-color: #f8f8f8;} @media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell; width: 1%; } .nav-tabs.nav-justified > li > a { margin-bottom: 0; } .nav-tabs.nav-hori > li { display: table-cell; width: 1%; } .nav-tabs.nav-hori > li > a { margin-bottom: 0; } } .nav-tabs.nav-justified > li > a {margin-right: 1px; border-radius: 0;} .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border:none; border-bottom: 4px solid;} .nav-tabs.nav-hori > li > a {margin-right: 1px; border-radius: 0;} .nav-tabs.nav-hori > .active > a, .nav-tabs.nav-hori > .active > a:hover, .nav-tabs.nav-hori > .active > a:focus { border:none; border-bottom: 4px solid;} @media (min-width: 768px) { .nav-tabs.nav-justified > li > a {border-bottom: 4px solid;border-radius: 0; } .nav-tabs.nav-justified.tabs-alt > li > a {border-bottom: transparent; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { } .nav-tabs.nav-hori > li > a {border-bottom: 4px solid;border-radius: 0; } .nav-tabs.nav-hori .tabs-alt > li > a {border-bottom: transparent; } .nav-tabs.nav-hori > .active > a, .nav-tabs.nav-hori > .active > a:hover, .nav-tabs.nav-hori > .active > a:focus { } } .nav-pills { margin-bottom:15px; margin-top:10px;} .nav-pills > li { float:left; font-weight:600;} .nav-pills > li > a {border-radius: none; margin-right:2px;color: #18255a;font-size:13px; font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility;} .nav-pills > li + li { margin-left: 2px;} .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {color: #0087cb; font-weight:600; background-color:#fff; font-size:13px;} .nav-stacked > li {float: none;} .nav-stacked > li + li { margin-top: 2px; margin-left: 0;} .nav-justified { width: 100%; } .nav-justified > li { float: none; } .nav-justified > li > a { margin-bottom: 5px; text-align: center; } .nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; } @media (min-width: 768px) { .nav-justified > li { display: table-cell; width: 1%; } .nav-justified > li > a { margin-bottom: 0; } } .nav-tabs-justified { border-bottom: 0; } .nav-tabs-justified > li > a { margin-right: 0; border-radius: 4px; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border: 1px solid #ddd; } @media (min-width: 768px) { .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { border-bottom-color: #fff; } } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; padding:30px 0px; border:1px solid #ececec;} .tab-content p {font-family: 'Open Sans', sans-serif; text-rendering: optimizelegibility; font-size:13px; text-align:justify;} .nav-tabs .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } /* Tabs Alternative */ .nav-tabs.tabs-alt > li > a { -webkit-border-radius: 4px 4px 0 0 ;-moz-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0; margin-right: -1px; margin-bottom: -1px; background:#f5f5f5; border:1px solid #ececec; color:#778899;} .nav-tabs.tabs-alt > li.active > a:after{ content:""; height:4px; position:absolute; top:-1px; left:0; display:block; z-index:1; width:100%; -webkit-border-radius: 4px 4px 0 0 ;-moz-border-radius: 4px 4px 0 0;border-radius: 4px 4px 0 0;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .nav-tabs.tabs-alt > li > a:hover { margin-right: -1px; background:#ffffff; border:1px solid #ececec; color:#778899;} .nav-tabs.tabs-alt > li.active > a {border:1px solid #ececec; border-bottom:1px solid #fff; background:#ffffff;} .nav-tabs.tabs-alt > li.active > a:hover { border:1px solid #ececec;border-bottom:1px solid #fff; background:#ffffff;} .nav-tabs.tabs-alt > li.active > a:focus { border:1px solid #ececec; border-bottom:1px solid #fff; background:#ffffff;} .tabs-alt.tab-content > .active { border:none; border-top:0px solid #ececec;} /*=============================== ========== Accordions & Toggle ========== ===============================*/ .accordion .panel {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow:none; border:none; background:none;} .accordion.panel-group{ margin:2px 0;} .accordion .panel .panel-heading {border:1px solid #ececec; padding:0; background:none;} .accordion .panel-title { font-weight:500; font-size:inherit;} .accordion .panel-title a{display:block; padding:15px;} .accordion .panel-title a .fa{margin-right:10px;} .accordion .panel-body {border:none !important;} .accordion .accordion-toggle.collapsed-icon:after{ content: "\f147"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; float:right;} .accordion .accordion-toggle.collapsed.collapsed-icon:after{ content: "\f196"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; float:right;} .accordion .accordion-toggle.collapsed-icon-left.collapsed-icon:after{float:left; margin-right:10px;} .accordion .accordion-toggle.collapsed-icon-left.collapsed.collapsed-icon:after{float:left; margin-right:10px;} /* Accordion & Toggle - default stytle */ .accordion .accordion-toggle {} .accordion .accordion-toggle.collapsed{ color:#848494;} .accordion .accordion-toggle.collapsed:hover{} /* Accordion & Toggle - alternativestytle */ .accordion.accordion-alt .panel-heading{ border:none; background: #f8f8f8;} .accordion.accordion-alt .accordion-toggle {color:#fff; } .accordion.accordion-alt .accordion-toggle.collapsed{ background: #f8f8f8; color:#848494;} .accordion.accordion-alt .accordion-toggle.collapsed:hover{ color:#fff;} /*=============================== ========== Pricing Table ========== ===============================*/ .pricing-table{ border:1px solid #ececec; text-align:center; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; margin-bottom:20px;} .pricing-table .pricing-table-head{background:#f8f8f8; padding-bottom:20px; border-bottom:1px solid #ececec;} .pricing-table .pricing-table-head .pricing-head-title{ margin: 0px 5% 20px; padding:10px 0; color:#ffffff; font-weight:600; font-size:18px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;} .pricing-table .pricing-table-head .iconbox-wrapper{ margin-bottom:20px;} .pricing-table .pricing-table-head .pricing-head-price{ font-size:72px; letter-spacing:-1px; line-height:1; color:#32313b; font-weight:400;} .pricing-table .pricing-table-head .pricing-head-price .curency{ font-size:16px; position:relative; top:-30px} .pricing-table .pricing-table-head .pricing-head-price .period{ font-size:16px; position:relative; bottom:-10px;} .pricing-table .pricing-table-head .pricing-head-description{ margin-bottom:0; padding:0 10px; font-style:italic;} .pricing-table .pricing-table-content{ padding:20px 0; text-align:left;} .pricing-table .pricing-table-content p{ padding:0 14px; margin:0;} .pricing-table .pricing-table-footer{ padding:20px 0; border-top:1px solid #ececec; background:#f8f8f8;} .pricing-table .pricing-table-content .pricing-list { list-style:none; padding:0; margin:0;} .pricing-table .pricing-table-content .pricing-list li{ padding:14px; border-top:1px solid #ececec; color:#32313b;} .pricing-table .pricing-table-content .pricing-list li:first-child{ border-top:0;} /*=============================== ========== Video Responsive ========== ===============================*/ iframe{ border:none;} .flex-video {position: relative;padding-top: 25px;padding-bottom: 56.4%;height: 0;overflow: hidden;} .flex-video.widescreen { padding-bottom: 50%; } .flex-video.vimeo { padding-top: 0; } .flex-video.youtube{ padding-top: 0; } .flex-video.html5{ padding-top: 0; } .flex-video .video-js{ width:100%;} .flex-video iframe, .flex-video object, .flex-video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } } /* Margins */ /*top*/ .margin-top0{margin-top:0px !important;} .margin-top10{margin-top:10px !important;} .margin-top20{margin-top:20px !important;} .margin-top30{margin-top:30px !important;} .margin-top40{margin-top:40px !important;} .margin-top50{margin-top:50px !important;} .margin-top60{margin-top:60px !important;} .margin-top70{margin-top:70px !important;} .margin-top80{margin-top:80px !important;} .margin-top90{margin-top:90px !important;} .margin-top100{margin-top:100px !important;} /*bottom*/ .margin-bottom0{margin-bottom:0px !important;} .margin-bottom10{margin-bottom:10px !important;} .margin-bottom20{margin-bottom:20px !important;} .margin-bottom30{margin-bottom:30px !important;} .margin-bottom40{margin-bottom:40px !important;} .margin-bottom50{margin-bottom:50px !important;} .margin-bottom60{margin-bottom:60px !important;} .margin-bottom70{margin-bottom:70px !important;} .margin-bottom80{margin-bottom:80px !important;} .margin-bottom90{margin-bottom:90px !important;} .margin-bottom100{margin-bottom:100px !important;} /* Padding */ /*top*/ .padding-top0{padding-top:0px !important;} .padding-top10{padding-top:10px !important;} .padding-top20{padding-top:20px !important;} .padding-top30{padding-top:30px !important;} .padding-top40{padding-top:40px !important;} .padding-top50{padding-top:50px !important;} .padding-top60{padding-top:60px !important;} .padding-top70{padding-top:70px !important;} .padding-top80{padding-top:80px !important;} .padding-top90{padding-top:90px !important;} .padding-top100{padding-top:100px !important;} /*bottom*/ .padding-bottom0{padding-bottom:0px !important;} .padding-bottom10{padding-bottom:10px !important;} .padding-bottom20{padding-bottom:20px !important;} .padding-bottom30{padding-bottom:30px !important;} .padding-bottom40{padding-bottom:40px !important;} .padding-bottom50{padding-bottom:50px !important;} .padding-bottom60{padding-bottom:60px !important;} .padding-bottom70{padding-bottom:70px !important;} .padding-bottom80{padding-bottom:80px !important;} .padding-bottom90{padding-bottom:90px !important;} .padding-bottom100{padding-bottom:100px !important;} /*=============================== ========== Back To Top ========== ===============================*/ .scrollup{ border:0px solid #ececec; color:#18255A; display: none; font-size: 26px; line-height:1.3; position: fixed; bottom:40px; right:10px; text-align: center; width: 40px; height:40px; z-index: 1100; background-color:#fff; opacity:0.7; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* future proofing */ -khtml-border-radius: 5px; /* for old Konqueror browsers */ } .scrollup:hover, .scrollup:focus{border:0px solid;} /*=============================== ========== Search Results ========== ===============================*/ .search-results{ border-top:1px solid #ececec;} .search-results-item { padding:40px 0 40px 60px; position:relative; border-bottom:1px solid #ececec;} .search-number { position:absolute; left:0; top:40px; width:40px; height:40px; border:1px solid #ececec; font-size:18px; text-align:center; line-height:2; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} /*=============================== ========== Responsive Media Queries ========== ===============================*/ @media (min-width: 768px) and (max-width: 991px) { .logo {line-height: 105px !important;} .gfx-nav { float:none;} ul.gallery {margin-left: 0;} ul.gallery li {width: 50% !important; /* this value + 2% should = 50% */} } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } @media (max-width: 767px) { .header-top-left{padding:0px;} .social-top{ text-align:center; float:none;} .top-menu{ float:none; text-align:center;} .top-menu li { border-top:1px solid #ececec;} .logo {line-height: 105px !important;} .gfx-nav { float:none;} .header-main.shrink .gfx-nav a { line-height:1.4;} .main-wrapper-header .breadcrumbs-wrapper { text-align:left;} .fancy-header .breadcrumbs-wrapper { text-align:center;} ul.gallery {margin-left: 0;} ul.gallery li {width: 50% !important; /* this value + 2% should = 50% */} .blog-post-side { position:relative !important; margin:0 auto; margin-bottom:20px;} .blog-post-content { margin-left:0 !important; margin-right:0 !important;} /* RTL */ html[dir="rtl"] .top-menu {float: none;text-align: center;} html[dir="rtl"] .social-top {float: none; text-align: center;} } @media (max-width: 540px) { ul.gallery {margin-left: 0;} ul.gallery li {width: 100% !important; /* this value + 2% should = 100% */} } /*=============================== ========== DATA TABLE ========== ===============================*/ .table { font-size: 13px; line-height: 16px; margin-bottom: 10px; text-align: center; } .table-sticky { font-size: 13px; line-height: 16px; text-align: center; } .table a { color:#595959; } th { text-align: center; } .table.text-left, .table.text-left th:not(.text-center) { text-align: left; } .table.text-right, .table.text-right th:not(.text-center) { text-align: right; } .table th, .table td, .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-top: 0px solid #e1e1e1; line-height: 16px; padding: 16px 10px 15px; table-layout:fixed; } .table-sticky th, .table-sticky td, .table-sticky > thead > tr > th, .table-sticky > tbody > tr > th, .table-sticky > tfoot > tr > th, .table-sticky > thead > tr > td, .table-sticky > tbody > tr > td, .table-sticky > tfoot > tr > td { border-top: 0px solid #e1e1e1; line-height: 16px; padding: 16px 10px 10px; table-layout:fixed; } .table > thead > tr > th { border-bottom: 1px solid #f9f9f9; font-size: 13px; } .table-striped thead th { background-color: #f7f7f7; } .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background: none; } .table-bordered { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 1px solid #f9f9f9; } .table-hover tbody tr > td, .table-hover tbody tr > th { -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { background-color: #fffdee; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 4px 5px; } .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot > tr > td.warning, .table > thead > tr > th.warning, .table > tbody > tr > th.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > tbody > tr.warning > td, .table > tfoot > tr.warning > td, .table > thead > tr.warning > th, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > th { background-color: #f89406; color: #fff; } .table > thead > tr > td.success, .table > tbody > tr > td.success, .table > tfoot > tr > td.success, .table > thead > tr > th.success, .table > tbody > tr > th.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > tbody > tr.success > td, .table > tfoot > tr.success > td, .table > thead > tr.success > th, .table > tbody > tr.success > th, .table > tfoot > tr.success > th { background-color: #738d00; color: #fff; } .table > thead > tr > td.danger, .table > tbody > tr > td.danger, .table > tfoot > tr > td.danger, .table > thead > tr > th.danger, .table > tbody > tr > th.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > tbody > tr.danger > td, .table > tfoot > tr.danger > td, .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { background-color: #c10841; color: #fff; } .table > thead > tr > td.info, .table > tbody > tr > td.info, .table > tfoot > tr > td.info, .table > thead > tr > th.info, .table > tbody > tr > th.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > tbody > tr.info > td, .table > tfoot > tr.info > td, .table > thead > tr.info > th, .table > tbody > tr.info > th, .table > tfoot > tr.info > th { background-color: #0098ca; color: #fff; } /*=============================== ========== Steps ========== ===============================*/ .steps { display: table; table-layout: fixed; width: 100%; } .steps .step { background: #0276c5; border: 1px solid #0276c5; display: table-cell; padding: 15px; position: relative; vertical-align: middle; } .steps .step .step-wrapper { position: relative; } .steps .step + .step { border-left: 0 none; } .steps .step:first-child { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .steps .step:last-child { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .steps .step .step-wrapper:after, .steps .step .step-wrapper:before { content: ''; position: absolute; top: 0; right: -29px; border: 7px solid transparent; border-left-color: #0276c5; z-index: 1; } .steps .step .step-wrapper:before { border-left-color: #0276c5; right: -27px; z-index: 2; } .steps .step:last-child .step-wrapper:after, .steps .step:last-child .step-wrapper:before { display: none; } .steps .step .bg-image { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; bottom: 0; left: 0; opacity: .1; filter: alpha(opacity=10); position: absolute; right: 0; top: 0; } .steps .step .bg-image ~ * { position: relative; } .steps .step.border-warning .step-wrapper:after { border-left-color: #f89406; } .steps .step.border-error .step-wrapper:after { border-left-color: #c10841; } .steps .step.border-info .step-wrapper:after { border-left-color: #0098ca; } .steps .step.border-success .step-wrapper:after { border-left-color: #738d00; } .steps .step.border-grey .step-wrapper:after { border-left-color: #777; } .steps .step.bg-warning .step-wrapper:before { border-left-color: #f89406; } .steps .step.bg-error .step-wrapper:before { border-left-color: #c10841; } .steps .step.bg-info .step-wrapper:before { border-left-color: #0098ca; } .steps .step.bg-success .step-wrapper:before { border-left-color: #738d00; } .steps .step.bg-grey { background: #777; } .steps .step.bg-grey .step-wrapper:before { border-left-color: #777; } .steps.steps-apart { display: block; width: auto; } .steps.steps-apart .step { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: block; } .steps.steps-apart .step:last-child .step-wrapper:after, .steps.steps-apart .step:last-child .step-wrapper:before { display: block; } .steps.steps-apart > [class*="col-md"]:last-child > .step .step-wrapper:after , .steps.steps-apart > [class*="col-md"]:last-child > .step .step-wrapper:before { display: none; } .steps.progress-steps { display: block; } .steps.progress-steps .step { background: none !important; border: 1px solid #e1e1e1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: block; margin: 0 0 40px; min-height: 185px; padding: 0; } .steps.progress-steps .step .step-wrapper { padding: 20px 20px 20px 260px; position: static; } .steps.progress-steps .step.step-right .step-wrapper { padding: 20px 260px 20px 20px; } .steps.progress-steps .step .number { background: #e1e1e1; bottom: 0; color: #fff; font-size: 150px; left: 0; line-height: 1.2; position: absolute; text-align: center; top: 0; width: 240px; } .steps.progress-steps .step.step-right .number { left: auto; right: 0; } .steps.progress-steps .step .step-wrapper:after, .steps.progress-steps .step .step-wrapper:before, .steps.progress-steps .step:last-child .number:after, .steps.progress-steps .step:last-child .number:before { display: none; } .steps.progress-steps .step .number:after, .steps.progress-steps .step .number:before { border: 7px solid transparent; border-top-color: #e1e1e1; bottom: -15px; content: ''; left: 50%; margin-left: -7px; position: absolute; z-index: 1; } .steps.progress-steps .step .number:before { bottom: -13px; z-index: 2; } .steps.progress-steps .step.border-warning .number:after { border-top-color: #f89406; } .steps.progress-steps .step.border-error .number:after { border-top-color: #c10841; } .steps.progress-steps .step.border-info .number:after { border-top-color: #0098ca; } .steps.progress-steps .step.border-success .number:after { border-top-color: #738d00; } .steps.progress-steps .step.bg-warning .number { background: #f89406; } .steps.progress-steps .step.bg-warning .number:before { border-top-color: #f89406; } .steps.progress-steps .step.bg-error .number { background: #c10841; } .steps.progress-steps .step.bg-error .number:before { border-top-color: #c10841; } .steps.progress-steps .step.bg-info .number { background: #0098ca; } .steps.progress-steps .step.bg-info .number:before { border-top-color: #0098ca; } .steps.progress-steps .step.bg-success .number { background: #738d00; } .steps.progress-steps .step.bg-success .number:before { border-top-color: #738d00; } .steps.progress-steps .step.border-warning .number { color: #f89406; } .steps.progress-steps .step.border-error .number { color: #c10841; } .steps.progress-steps .step.border-info .number { color: #0098ca; } .steps.progress-steps .step.border-success .number { color: #738d00; } .steps.progress-steps .step.bg-warning .number, .steps.progress-steps .step.bg-error .number, .steps.progress-steps .step.bg-info .number, .steps.progress-steps .step.bg-success .number { color: #fff; } .title-box { border-bottom-width: 1px; margin-bottom: 10px; position: relative; } .title-box.no-margin, .no-margin { margin-bottom: 0 !important; } .title-box:before { background: #1e1e1e; bottom: 0; content: ""; display: block; height: 1px; left: 0; margin: 0 0 -1px; position: absolute; width: 40px; } .title-box.text-right:before { left: auto; right: 0; } .title-box.text-center:before { left: 50%; margin-left: -20px; } .title-box .title { color: #7f7f7f; font-size: 18px; font-weight:600; margin: 0 0 12px 0; padding: 14px 0 0; } .title-box h1.title, .title-box .h1.title { font-size: 24px; } .title-box .btn { font-size: 12px; padding-left: 15px; padding-right: 15px; position: absolute; right: 0; top: 0; } .title-box .btn .glyphicon { margin: -1px 0 0 3px; } .title-box.title-white, .page-header.white { border-color: rgba(255,255,255,.3); } .title-box.title-white:before, .page-header.white .container:before { background: #fff; } .title-box.title-white .title { color: #fff; } .fancy-title-steps{ text-transform: none; margin-bottom:20px; margin-top: 10px; } .fancy-title-steps:after{content: ""; background:#ececec; display: block; height: 1px; margin: 0; position: relative; width: 100%; opacity:0.4;} .fancy-title-steps span:after {content: ""; display: block; height: 5px; margin: 20px 0 -3px; position: relative; width: 10%; z-index:2;} .text-center.fancy-title-steps:after{content: ""; background:#ececec; display: block; height: 1px; margin: 0 auto; position: relative; width: 30%;} .text-center.fancy-title-steps span:after {content: ""; display: block; height: 5px; margin: 20px auto -3px; position: relative; width: 10%;} .text-right.fancy-title-steps:after{content: ""; background:#ececec; display: block; height: 1px; margin: 0 auto; position: relative; width: 100%;} .text-right.fancy-title-steps span:after {content: ""; display: block; height: 5px; margin: 20px 0 -3px 90%; position: relative; width: 10%;} h5.fancy-title-steps span:after, h6.fancy-title-steps span:after { margin-top:10px !important;} h5.fancy-title-steps , h6.fancy-title-steps { margin-bottom:20px !important;} .bg-white { background: #fff !important; } .bg-muted { background: #555 !important; } .bg-primary { background: #428bca !important; } .bg-warning { background: #f89406 !important; } .bg-error, .bg-danger { background: #c10841 !important; } .bg-info { background: #0098ca !important; } .bg-steps { background: #0276c5 !important; } .bg-success { background: #738d00 !important; } .border-muted { border-color: #555 !important; } .border-warning { border-color: #f89406 !important; } .border-error { border-color: #c10841 !important; } .border-info { border-color: #0098ca !important; } .border-success { border-color: #738d00 !important; } .border-grey { border-color: #777 !important; } /*=============================== ========== Additional Classes === ===============================*/ .display-t { display: table; } .display-tc { display: table-cell; } .slim { font-weight: normal; } .border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .bg { background-color: #f2f2f2; } .border { border-width: 1px; } .width-auto .col-md-1, .width-auto .col-md-2, .width-auto .col-md-3, .width-auto .col-md-4, .width-auto .col-md-5, .width-auto .col-md-6, .width-auto .col-md-7, .width-auto .col-md-8, .width-auto .col-md-9, .width-auto .col-md-10, .width-auto .col-md-11, .width-auto .col-md-12 { float: left; width: auto; } .margin-center { margin: 0 auto; } .bottom-padding { margin-bottom: 30px; } .bottom-padding-mini { margin-bottom: 40px; } .bottom-padding.last { margin-bottom: 0; } .no-top-padding { padding-top: 0 !important; } .col2-set .col-1, .col2-set .col-2 { float: left; width: 48.5%; } .col2-set .col-2 { float: right; } .register{ border:1px solid #f37b01; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family: 'Raleway', sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;font-weight:bold; color: #FFFFFF; background-color: #fdad43; background-image: -webkit-gradient(linear, left top, left bottom, from(#fdad43), to(#f37b01)); background-image: -webkit-linear-gradient(top, #fdad43, #f37b01); background-image: -moz-linear-gradient(top, #fdad43, #f37b01); background-image: -ms-linear-gradient(top, #fdad43, #f37b01); background-image: -o-linear-gradient(top, #fdad43, #f37b01); background-image: linear-gradient(to bottom, #f37b01, #f37b01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fdad43, endColorstr=#f37b01); } .register a:hover{ border:1px solid #f37b01; background-color: #f37b01; background-image: -webkit-gradient(linear, left top, left bottom, from(#f37b01), to(#f37b01)); background-image: -webkit-linear-gradient(top, #f37b01, #f37b01); background-image: -moz-linear-gradient(top, #f37b01, #f37b01); background-image: -ms-linear-gradient(top, #f37b01, #f37b01); background-image: -o-linear-gradient(top, #f37b01, #f37b01); background-image: linear-gradient(to bottom, #f37b01, #f37b01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f37b01, endColorstr=#f37b01); } .login{ border:1px solid #016a9e; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:13px;font-family: 'Raleway', sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;;font-weight:bold; color: #FFFFFF; background-color: #039fed; background-image: -webkit-gradient(linear, left top, left bottom, from(#039fed), to(#0087cb)); background-image: -webkit-linear-gradient(top, #039fed, #0087cb); background-image: -moz-linear-gradient(top, #039fed, #0087cb); background-image: -ms-linear-gradient(top, #039fed, #0087cb); background-image: -o-linear-gradient(top, #039fed, #0087cb); background-image: linear-gradient(to bottom, #039fed, #0087cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#039fed, endColorstr=#0087cb); } .login a:hover{ border:1px solid #029ae6; background-color: #026190; background-image: -webkit-gradient(linear, left top, left bottom, from(#026190), to(#026190)); background-image: -webkit-linear-gradient(top, #0026190, #026190); background-image: -moz-linear-gradient(top, #026190, #026190); background-image: -ms-linear-gradient(top, #026190, #026190); background-image: -o-linear-gradient(top, #026190, #026190); background-image: linear-gradient(to bottom, #026190, #026190);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#03a7fa, endColorstr=#026190); } /*=============================== ======== Clients =============== ===============================*/ .client { background: #f7f7f7; border: 0px solid #f7f7f7; display: inline-block; margin: 0 auto 20px; max-width: 100%; text-align: center; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; width: 200px; } .client:hover { -webkit-transition: border-color .2s ease-in; transition: border-color .2s ease-in; } .client + .tooltip { font-size: 14px; z-index: 800; } .client + .tooltip .tooltip-inner { padding: 10px; } .carousel .client { margin-bottom: 0; } /*=============================== ======== Line ============ ===============================*/ .line, .double-line { clear: both; position: relative; width: 100%; margin: 4rem 0; border-top: 1px solid #cecece; } /*=============================== ======== Dotted BG ============ ===============================*/ .dotted-bg::before { content: ""; position: absolute; display: block; top: 40%; left: 35%; width: 110%; height: 120%; background-size: 12px 12px; background-position: center; transform: translate(-50%, -50%); background-image: radial-gradient(#3D80E4 14%, transparent 14%); -webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%); mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%); z-index: 0; } .dotted-bg::before { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 14%, transparent 14%); } .dotted-bg.dotted-bg-dark::before { background-image: radial-gradient(rgba(4, 4, 4, 0.2) 14%, transparent 14%); } /*=============================== ======== Slides IMG ============ ===============================*/ .slide-imgs .iphone-img { position: relative; z-index: 1; width: 330px; -webkit-transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%); transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) rotateZ(6deg) scale(0.8) translateX(50%) translateY(6%); transition: transform 0.45s cubic-bezier(0.2, 0.7, .3, 1); } .slide-imgs:hover .iphone-img { -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%); transform: perspective(1000px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(0.95) translateX(40%) translateY(8%); } .slide-imgs .card-img { position: absolute; bottom: 10px; left: -90px; width: 360px; transition: opacity 0.65s cubic-bezier(0.2, 0.7, .3, 1); z-index: 1; } /*=============================== ======== Video Wrap ============ ===============================*/ .device-video-wrap { position: relative; } .device-video-wrap img { position: relative; margin: 0 auto; max-width: 1024px; } .device-video-wrap video { position: absolute; top: 35px; left: 33%; max-width: 40%; z-index: 1; transform: translate(-50%); } .device-video-wrap::before, .dotted-bg::before { content: ""; position: absolute; display: block; top: 40%; left: 35%; width: 110%; height: 120%; background-size: 12px 12px; background-position: center; transform: translate(-50%, -50%); background-image: radial-gradient(#3D80E4 14%, transparent 14%); -webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%); mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%); z-index: 0; } .dotted-bg::before { background-image: radial-gradient(rgba(255, 255, 255, 0.2) 14%, transparent 14%); } .dotted-bg.dotted-bg-dark::before { background-image: radial-gradient(rgba(4, 4, 4, 0.2) 14%, transparent 14%); } .device-video-wrap > * { position: relative; z-index: 1; } /*=============================== ======== Feature Items ============ ===============================*/ .features-items .feature-box .fbox-icon { --f-icon-size: 42px; position: relative; margin-bottom: 34px; width: 42px; height: 42px; width: var(--f-icon-size); height: var(--f-icon-size); } .features-items .feature-box .fbox-icon i { background-color: transparent !important; color: var(--themecolor, #3D80E4); font-size: 42px; font-size: var(--f-icon-size); } .feature-box.fbox-plain .fbox-icon i { font-size: 36px; } /*=============================== ======== Featured Box ============ ===============================*/ .feature-box { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; } .feature-box:first-child { margin-top: 0; } .fbox-icon { width: 100px; height: 100px; } .fbox-icon-in { width: 150px; height: 150px; align-content: center; } .fbox-icon a, .fbox-icon i, .fbox-icon img { display: block; position: relative; width: 100%; height: 100%; color: #FFF; } .fbox-icon i, .fbox-icon img { border-radius: 50%; background-color: #1ABC9C; } .fbox-icon i { font-style: normal; font-size: 1.75rem; line-height: 4rem; text-align: center; } .fbox-content { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; max-width: 100%; } .fbox-content h3 { font-weight: 600; margin-bottom: 0; color: #333; } .fbox-content p { margin-top: 0.5rem; margin-bottom: 0px; color: #999; } .fbox-content .before-heading { font-size: 0.875rem; } .fbox-content-sm h3, .fbox-content-sm p { font-size: 0.875rem; } .fbox-content-sm .before-heading { font-size: 0.75rem; } .fbox-content-lg h3 { font-size: 1.25rem; } .fbox-content-lg p { font-size: 1.125rem; margin-top: 0.75rem; } .fbox-content-lg .before-heading { font-size: 1rem; } /* Feature Box - Icon Small -----------------------------------------------------------------*/ .fbox-sm { margin-left: -0.5rem; margin-right: -0.5rem; } .fbox-sm .fbox-icon { width: 3rem; height: 2rem; padding: 0 0.5rem; } .fbox-sm .fbox-icon i { font-size: 1rem; line-height: 2rem; } .fbox-sm .fbox-content { padding: 0 0.5rem; } /* Feature Box - Icon Large -----------------------------------------------------------------*/ .fbox-lg .fbox-icon { width: 7.5rem; height: 6rem; } .fbox-lg .fbox-icon i { font-size: 2.5rem; line-height: 6rem; } /* Feature Box - Icon X-Large -----------------------------------------------------------------*/ .fbox-xl .fbox-icon { width: 9.5rem; height: 8rem; } .fbox-xl .fbox-icon i { font-size: 4.5rem; line-height: 8rem; } /* Feature Box - Icon Outline -----------------------------------------------------------------*/ .fbox-outline .fbox-icon a { border: 1px solid #1ABC9C; padding: 0.25rem; border-radius: 50%; } .fbox-outline .fbox-icon i { line-height: 3.5rem; } /* Feature Box - Icon Outline Sizes -----------------------------------------------------------------*/ .fbox-outline.fbox-sm .fbox-icon i { line-height: 1.5rem; } .fbox-outline.fbox-lg .fbox-icon i { line-height: 5.5rem; } .fbox-outline.fbox-xl .fbox-icon i { line-height: 7.5rem; } /* Feature Box - Icon Rounded -----------------------------------------------------------------*/ .fbox-rounded .fbox-icon { border-radius: 3px !important; } .fbox-rounded .fbox-icon i, .fbox-rounded .fbox-icon img { border-radius: 3px !important; } /* Feature Box - Icon Rounded Sizes -----------------------------------------------------------------*/ .fbox-rounded.fbox-lg .fbox-icon { border-radius: 4px !important; } .fbox-rounded.fbox-lg .fbox-icon i, .fbox-rounded.fbox-lg .fbox-icon img { border-radius: 4px !important; } .fbox-rounded.fbox-xl .fbox-icon { border-radius: 6px !important; } .fbox-rounded.fbox-xl .fbox-icon i, .fbox-rounded.fbox-xl .fbox-icon img { border-radius: 6px !important; } /* Feature Box - Light Background -----------------------------------------------------------------*/ .fbox-light.fbox-outline .fbox-icon a { border-color: #E5E5E5; } .fbox-light .fbox-icon i, .fbox-light .fbox-icon img { border: 1px solid #E5E5E5; background-color: #F5F5F5; color: #444; } /* Feature Box - Dark Background -----------------------------------------------------------------*/ .fbox-dark.fbox-outline .fbox-icon a { border-color: #444; } .fbox-dark .fbox-icon i, .fbox-dark .fbox-icon img { background-color: #333; } /* Feature Box - Border -----------------------------------------------------------------*/ .fbox-border .fbox-icon a { border: 1px solid #1ABC9C; border-radius: 50%; } .fbox-border .fbox-icon i, .fbox-border .fbox-icon img { border: none; background-color: transparent !important; color: #1ABC9C; } /* Feature Box - Border - Light -----------------------------------------------------------------*/ .fbox-border.fbox-light .fbox-icon a { border-color: #E5E5E5; } .fbox-border.fbox-light .fbox-icon i, .fbox-border.fbox-light .fbox-icon img { color: #888; } /* Feature Box - Border - Dark -----------------------------------------------------------------*/ .fbox-border.fbox-dark .fbox-icon a { border-color: #333; } .fbox-border.fbox-dark .fbox-icon i, .fbox-border.fbox-dark .fbox-icon img { color: #444; } /* Feature Box - Plain -----------------------------------------------------------------*/ .fbox-plain .fbox-icon { border: none !important; } .fbox-plain .fbox-icon i, .fbox-plain .fbox-icon img { border: none; background-color: transparent !important; color: #1ABC9C; border-radius: 0; } .fbox-plain .fbox-icon i { line-height: 1; } .fbox-plain.fbox-image .fbox-icon { width: auto; } .fbox-plain.fbox-image .fbox-icon img { width: auto; display: inline-block; } .fbox-plain.fbox-light .fbox-icon i, .fbox-plain.fbox-light .fbox-icon img { color: #888; } .fbox-plain.fbox-dark .fbox-icon i, .fbox-plain.fbox-dark .fbox-icon img { color: #444; } /* Feature Box - Icon Plain Sizes -----------------------------------------------------------------*/ .fbox-plain.fbox-sm .fbox-icon i { font-size: 2rem; } .fbox-plain.fbox-lg .fbox-icon i { font-size: 4.5rem; } .fbox-plain.fbox-xl .fbox-icon i { font-size: 6rem; } /* Feature Box - Center & Large Icons -----------------------------------------------------------------*/ .fbox-center { -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; text-align: center; } .fbox-center .fbox-icon { margin-bottom: 1.5rem; } .fbox-center { -ms-flex-preferred-size: auto; } /* Feature Box - Subtitle -----------------------------------------------------------------*/ .fbox-content + .fbox-icon { margin-top: 1.5rem; margin-bottom: 0 !important; } .fbox-content h3 span.subtitle { display: block; margin-top: 5px; color: #444; font-weight: 300; text-transform: none; } .fbox-center.fbox-sep:not(.fbox-bg) h3::after { content: ''; display: block; margin: 1.25rem auto; width: 2rem; height: 2px; background-color: #555; -webkit-transition: width .3s ease; -o-transition: width .3s ease; transition: width .3s ease; } .fbox-center.fbox-sep:not(.fbox-bg):hover h3::after { width: 3rem; } .fbox-center.fbox-italic p { font-style: italic; font-family: 'Lato', sans-serif; } /* Feature Box - Background -----------------------------------------------------------------*/ .fbox-bg.fbox-center { margin-top: 2rem; margin-left: 0; margin-right: 0; padding: 0 2rem 2rem; border: 1px solid #E5E5E5; border-radius: 5px; } .fbox-bg.fbox-center .fbox-icon { margin-top: -2rem; } .fbox-bg.fbox-center .fbox-icon { background-color: #FFF; } .fbox-bg.fbox-center.fbox-lg { margin-top: 3rem; } .fbox-bg.fbox-center.fbox-lg .fbox-icon { margin-top: -3rem; } .fbox-bg.fbox-center.fbox-xl { margin-top: 4rem; } .fbox-bg.fbox-center.fbox-xl .fbox-icon { margin-top: -4rem; } /*=============================== ======== Spacing Utilities ============ ===============================*/ .m-6 { margin: 5rem !important; } .mt-6, .my-6 { margin-top: 5rem !important; } .mr-6, .mx-6 { margin-right: 5rem !important; } .mb-6, .my-6 { margin-bottom: 5rem !important; } .ml-6, .mx-6 { margin-left: 5rem !important; } .p-6 { padding: 5rem !important; } .pt-6, .py-6 { padding-top: 5rem !important; } .pr-6, .px-6 { padding-right: 5rem !important; } .pb-6, .py-6 { padding-bottom: 5rem !important; } .pl-6, .px-6 { padding-left: 5rem !important; } @media (min-width: 576px) { .m-sm-6 { margin: 5rem !important; } .mt-sm-6, .my-sm-6 { margin-top: 5rem !important; } .mr-sm-6, .mx-sm-6 { margin-right: 5rem !important; } .mb-sm-6, .my-sm-6 { margin-bottom: 5rem !important; } .ml-sm-6, .mx-sm-6 { margin-left: 5rem !important; } .p-sm-6 { padding: 5rem !important; } .pt-sm-6, .py-sm-6 { padding-top: 5rem !important; } .pr-sm-6, .px-sm-6 { padding-right: 5rem !important; } .pb-sm-6, .py-sm-6 { padding-bottom: 5rem !important; } .pl-sm-6, .px-sm-6 { padding-left: 5rem !important; } } @media (min-width: 768px) { .m-md-6 { margin: 5rem !important; } .mt-md-6, .my-md-6 { margin-top: 5rem !important; } .mr-md-6, .mx-md-6 { margin-right: 5rem !important; } .mb-md-6, .my-md-6 { margin-bottom: 5rem !important; } .ml-md-6, .mx-md-6 { margin-left: 5rem !important; } .p-md-6 { padding: 5rem !important; } .pt-md-6, .py-md-6 { padding-top: 5rem !important; } .pr-md-6, .px-md-6 { padding-right: 5rem !important; } .pb-md-6, .py-md-6 { padding-bottom: 5rem !important; } .pl-md-6, .px-md-6 { padding-left: 5rem !important; } } @media (min-width: 992px) { .m-lg-6 { margin: 5rem !important; } .mt-lg-6, .my-lg-6 { margin-top: 5rem !important; } .mr-lg-6, .mx-lg-6 { margin-right: 5rem !important; } .mb-lg-6, .my-lg-6 { margin-bottom: 5rem !important; } .ml-lg-6, .mx-lg-6 { margin-left: 5rem !important; } .p-lg-6 { padding: 5rem !important; } .pt-lg-6, .py-lg-6 { padding-top: 5rem !important; } .pr-lg-6, .px-lg-6 { padding-right: 5rem !important; } .pb-lg-6, .py-lg-6 { padding-bottom: 5rem !important; } .pl-lg-6, .px-lg-6 { padding-left: 5rem !important; } } @media (min-width: 1200px) { .m-xl-6 { margin: 5rem !important; } .mt-xl-6, .my-xl-6 { margin-top: 5rem !important; } .mr-xl-6, .mx-xl-6 { margin-right: 5rem !important; } .mb-xl-6, .my-xl-6 { margin-bottom: 5rem !important; } .ml-xl-6, .mx-xl-6 { margin-left: 5rem !important; } .p-xl-6 { padding: 5rem !important; } .pt-xl-6, .py-xl-6 { padding-top: 5rem !important; } .pr-xl-6, .px-xl-6 { padding-right: 5rem !important; } .pb-xl-6, .py-xl-6 { padding-bottom: 5rem !important; } .pl-xl-6, .px-xl-6 { padding-left: 5rem !important; } } /*=============================== ======== Page Banner ============ ===============================*/ .hero-visual-holder { position: relative; } .hero-visual { height: 100%; background: center center no-repeat; background-size: cover; } .hero-visual img { visibility: hidden; } .hero-visual-overlayer { width: 100%; position: absolute; bottom: 20%; left: 0; font-size: 14px; } .hero-visual-overlayer.text-large { font-size: 23px; } .hero-visual-overlayer.align-middle { bottom: 50%; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .hero-visual-overlayer .light-content { color: #fff; } .hero-visual-overlayer .hgroup { margin-bottom: 10px; line-height: 1; } .hero-visual-overlayer .btn-lg { font-size: 19px; } .hero-visual-overlayer.text-large h1 { font-size: 54px; } @media (max-width: 767px) { .hero-visual-holder { height: auto !important; } .hero-visual { height: 0; padding-top: 45%; } .hero-visual-overlayer { padding-top: 30px; padding-bottom: 30px; position: static; border-bottom:1px solid #d4d4d4; } .hero-visual-overlayer.text-large { font-size: 18px; } .hero-visual-overlayer.align-middle { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .hero-visual-overlayer .light-content { color: inherit; } .hero-visual-overlayer.text-large h1 { font-size: 36px; } } @media (max-width: 400px) { .hero-visual { padding-top: 65%; } .hero-visual-overlayer { padding-top: 15px; padding-bottom: 15px; } } .horizontal-num-list { padding-top: 25px; padding-bottom: 25px; background-color: #333; color: #fff;} .horizontal-num-list ol { counter-reset: horizontal-num-list; } .horizontal-num-list li { list-style: none; } .horizontal-num-list .list-item-inner { padding-top: 3px; padding-left: 20px; margin-left: 25px; position: relative; font-size: 14px; list-style: none; } .horizontal-num-list .list-item-inner:before { counter-increment: horizontal-num-list; content: counter(horizontal-num-list); padding-right: 15px; border-right: 1px solid #999; position: absolute; font-size: 25px; top: 0; left: -25px; line-height: 1; } @media (max-width: 767px) { .horizontal-num-list li + li { margin-top: 15px; } } .landing-desc-row { margin-top: 50px; } .landing-desc-row__visual { margin-bottom: 30px; text-align: center; } .landing-desc-row h2 { font-weight: normal; } .landing-desc-row .btn-cta { margin-top: 10px; } @media (max-width: 767px) { .landing-desc-row { margin-top: 25px; } .landing-desc-row .column + .column { margin-top: 30px; } } @media (max-width: 400px) { .landing-desc-row { margin-top: 15px; } } .items-scroller { max-width: 760px; margin-left: auto; margin-right: auto; overflow: hidden; font-size: 15px; overflow: hidden; } .items-scroller-contents { margin-left: -20px; overflow: hidden; } .items-scroller .item { width: 25%; margin-top: 30px; padding-left: 20px; float: left; text-align: center; } .items-scroller .item:nth-child(4) ~ .item { display: none; } .items-scroller .item__visual { padding: 0 5px; margin-bottom: 20px; } .items-scroller .item__visual img { max-width: 100%; border-radius: 5%; box-shadow: 0 0 0px 0px rgba(0,0,0,0.075); } .items-scroller-controls { margin-top: 20px; text-align: center; position: relative; color: transparent; font: 0/0 a; } .items-scroller-prev, .items-scroller-next { width: 32px; height: 32px; border-radius: 50%; display: inline-block; background-color: #212d57; line-height: 32px; text-align: center; vertical-align: top; } .items-scroller-prev { margin-right: 5px; } .items-scroller-prev:before, .items-scroller-next:before { content: ''; width: 10px; height: 17px; display: inline-block; background: url(../images/icons/arrows.png) left top no-repeat; vertical-align: middle; } .items-scroller-next:before { background-position: right top; } .items-scroller-controls .is-disabled { background-color: #e9e9e9; cursor: default; } .items-scroller-controls:before, .items-scroller-controls:after { content: ''; width: 50%; height: 1px; position: absolute; top: 50%; background-color: #e4e4e4; } .items-scroller-controls:before { left: -40px; } .items-scroller-controls:after { right: -40px; } @media (max-width: 767px) { .items-scroller .item { width: 50%; } .items-scroller .item:nth-child(odd) { clear: left; } } .biller-loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fade-in { opacity: 0; transform: translateX(-100%); transition: opacity 1s ease-in, transform 1s ease-in; } .fade-in.show { opacity: 1; transform: translateX(0); }