"Clients"
Bootstrap 4.1.1 Snippet by saikrishna99666

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="section5" class="section one-page-section"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="btHeading bt-md"> <div class="bottomHeading">B</div> <div class="top-heading">OUR CLIENTS</div> </div> </div> </div> <div class="row pad-top-50 pad-bot-100"> <!-- Client Grid --> <div class="col-md-12"> <ul class="clients-grid grid-4 clients-border clients-opacity clearfix"> <li> <a href="#"><img class="img-responsive" src="images/logos/1.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/2.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/3.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/4.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/5.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/6.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/2.png" alt="image"></a> </li> <li> <a href="#"><img class="img-responsive" src="images/logos/5.png" alt="image"></a> </li> </ul> </div><!-- End of Client Grid --> </div> </div> </div>
/* ========================================================================== Revelo's Main Style Sheet Version: 1.0 Created By: Amazyne Themes ============================================================================= */ @charset "utf-8"; html { max-width:100%; overflow-x:hidden; } body { font-family: 'Open Sans',sans-serif; color: #747474; max-width:100%; overflow-x:hidden; } h1, h2, h3, h4, h5, h6 { color:#333; font-family: 'Montserrat', sans-serif; } a { color: #009c77; font-weight:500; } a:hover, a:focus, a:active { text-decoration: none; opacity:0.9; color: #009c77; } *:focus { outline-style:none !important; } button:focus { outline:0 !important; } iframe { border:none; } img { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility:hidden; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); filter:none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); } /* ========================================================================== Page Content Selection Style ============================================================================= */ ::-moz-selection { /* Code for Firefox */ color:#fff; background: #009c77; } ::selection { color:#fff; background: #009c77; } /* ========================================================================== Page Loader ============================================================================= */ .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 10000; background: #fff; } .spinner { margin: auto; width: 50px; height: 30px; text-align: center; font-size: 10px; position: absolute; top: 0; left: 0; bottom: 0px; right: 0; margin: auto auto; } .spinner > div { background-color: #e6e6e6; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } /* ========================================================================== Bootstrap ============================================================================= */ /*Border Radius*/ .img-thumbnail, .panel, .form-control, .modal-content, .panel-group .panel, .dropdown-menu, .alert, .label, .well, .nav > li > a, code, kbd, pre { border-radius: 0; } /*Panel*/ .panel-heading { border-top-left-radius: 0px; border-top-right-radius: 0px; } /*Modal*/ .modal { z-index: 10000; } .modal-open { padding-right: 0 !important; } /*Pagination*/ .pagination { margin-bottom:0; } .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span, .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span, .pagination>li:first-child>a, .pagination>li:first-child>span { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #009c77; border-color: #009c77; } .pagination > li > a, .pagination > li > span { color: #009c77; } /*Label*/ .label-theme{ background-color: #009c77; line-height: 25px; } .form-horizontal.form-horizontal-small .control-label { padding-top: 10px; margin-bottom: 0; text-align: left; font-size: 12px; } .form-horizontal.form-horizontal-align-left .control-label { text-align: left; } /* ========================================================================== Revolution Slider ============================================================================= */ .tp-loader { z-index:auto; } .tp-static-layers { z-index:10000; transform: none !important; } /* ========================================================================== Font Awesome ============================================================================= */ .fa-border { border-radius:0; } /* ========================================================================== Nivo-Lightbox ============================================================================= */ .nivo-lightbox-theme-default .nivo-lightbox-title { border-radius: 0; } .nivo-lightbox-theme-default .nivo-lightbox-close { width:22px; height:22px; top:20px; right:25px; } /* ========================================================================== Nivo-Slider ============================================================================= */ .theme-nivo .nivo-directionNav a { color:#fff; background-color:rgba(0,0,0,0.5); visibility:hidden; } .theme-nivo.slider-wrapper .nivoSlider:hover .nivo-directionNav a { visibility:visible; } .theme-nivo .nivo-directionNav a:hover { background-color:rgba(0,0,0,0.7); } .theme-nivo .nivo-directionNav a.nivo-nextNav { padding: 10px 12px 10px 15px; } .theme-nivo .nivo-directionNav a.nivo-prevNav { padding: 10px 15px 10px 12px; } .theme-nivo .nivo-controlNav a:before { font-family:'FontAwesome'; content:"\f1db"; visibility:visible; color:#555; } .theme-nivo .nivo-controlNav a.active:before { content:"\f111"; font-weight:normal; } .theme-nivo .nivo-controlNav a { visibility:hidden; } .theme-nivo .nivo-caption { padding:10px; } .theme-nivo .nivo-caption a { color:#aaa; } .theme-nivo .nivo-caption a:hover { color:#fff; text-decoration:underline; } /*With Thumbnails*/ .theme-nivo.theme-nivo-thumbs .nivo-controlNav a:before { display:none } .theme-nivo.theme-nivo-thumbs .nivo-controlNav a { visibility:visible; } .theme-nivo.theme-nivo-thumbs .nivo-controlNav.nivo-thumbs-enabled .nivo-control img { width: 10%; opacity:0.4; } .theme-nivo.theme-nivo-thumbs .nivo-controlNav.nivo-thumbs-enabled .nivo-control.active img { opacity:1; } /******************************************************************** Top Header ********************************************************************/ .top-header { height: 50px; max-height: 50px; background-color: #f6f6f6; border-bottom: 1px solid #ddd; } /****Top Header Contact Links*****/ .top-header .top-contact { height: 50px; padding-top: 15px; width: auto; margin-right:10px; } .top-header .top-contact.left { float:left; } .top-header .top-contact.right { float:right; } .top-header .top-contact .text { color: #333; font-size: 12px; } .top-header .top-contact .top-contact-link { color: #333; } .top-header .top-contact .top-contact-link:hover { color: #009c77; } /****Top Header Social Icons*****/ .top-header .top-social { height: 50px; text-align:right; width:auto; } .top-header .top-social.left { float:left; } .top-header .top-social.right { float:right; } .top-header .top-social ul { padding-top: 7px; } .top-header .top-social ul.si-6, .top-header .top-social ul.si-6-white { padding-top: 12px; } .top-header .top-social ul.si-6.color, .top-header .top-social ul.si-6-white.color { padding-top: 7px; } /****Top Header Welcome Text*****/ .top-header .top-welcome-text { height: 50px; padding-top: 15px; text-align:right; width:auto; } .top-header .top-welcome-text.left { float:left; } .top-header .top-welcome-text.right { float:right; } .top-header .top-welcome-text span { font-size:12px; color:#333; font-weight: 700; letter-spacing: 1px; } .top-header .text .icon-space { padding-right: 5px; } /****Top Header Links*****/ .top-header .top-links { height: 50px; padding-top: 15px; text-align:right; width:auto; } .top-header .top-links.left { float:left; } .top-header .top-links.right { float:right; } .top-header .top-links .links-top a:before { content: '|'; margin-right:15px; color:#ddd; } .top-header .top-links .links-top li:first-child a:before { content: ''; margin-right:0px; } .top-header .top-links .links-top a { color:#333; font-size:12px; } .top-header .top-links .links-top a:hover { color: #009c77; text-decoration: none; } /*Top Header Dropdowns*/ .top-header .top-dropdown { margin:10px 10px 0 0; } .top-header .top-dropdown .dropdown-menu { z-index:100000; font-size:12px; } .top-header .top-dropdown .dropdown-menu { z-index:100000; font-size:12px; padding:0; } .top-header .top-dropdown .dropdown-menu li a { padding:5px 20px; } .top-header .top-dropdown .dropdown-menu.dm-language img { width:20px; height:auto; margin-right:5px; margin-top:-2.6px; } .top-header .top-dropdown .dropdown-menu.dm-currency i.fa { margin-right:5px; } .top-header .top-dropdown .btn { padding: 5px 10px; font-size: 12px; background-color:#fff; } .top-header .top-dropdown .btn > i.fa { margin-left:5px; } .top-header.dark .top-dropdown .btn { background-color:#333; color:#ccc; } .top-header.dark .top-dropdown .btn:hover { color:#eee; } .top-header .top-dropdown.left { float:left; } .top-header .top-dropdown.right { float:right; } /****Top Header Search*****/ .top-header .top-search { float:right; width:405px; } .searchbox{ position:relative; min-width:50px; width:0%; height:50px; float:right; overflow:hidden; -webkit-transition: width 0.2s; -moz-transition: width 0.2s; -ms-transition: width 0.2s; -o-transition: width 0.2s; transition: width 0.2s; } .searchbox-input{ top:0; right:0; border:0; outline:0; background:#fff; border-bottom: 1px solid #ddd; width:100%; height:50px; margin:0; padding:0px 55px 0px 20px; font-size:13px; color:#747474; letter-spacing: 1px; } .searchbox-input::-webkit-input-placeholder { color: #747474; } .searchbox-input:-moz-placeholder { color: #747474; } .searchbox-input::-moz-placeholder { color: #747474; } .searchbox-input:-ms-input-placeholder { color: #747474; } .searchbox-icon, .searchbox-submit{ width:50px; height:50px; display:block; position:absolute; top:0; font-size:13px; right:0; padding:0; margin:0; border:0; outline:0; line-height:50px; text-align:center; cursor:pointer; color:#fff; background:#009c77; } .searchbox-open{ width:100%; } .searchbox-reset { position:absolute; right:65px; top:14px; background-color:transparent; border:none; color: #747474; } /****Top Header Transparent Background*****/ .top-header.transparent { background-color: transparent; border-bottom: 0px; position:absolute; top:0; left:0; width: 100%; z-index:100; } .top-header.transparent .top-contact .text { color: #fff; } .top-header.transparent .top-contact .top-contact-link { color: #ddd; } .top-header.transparent .top-contact .top-contact-link:hover { color: #fff; } .top-header.transparent ul.social-icons-top li a:hover { color: #009c77; } .top-header.transparent .top-welcome-text span { color:#fff; } .top-header.transparent .top-links .links-top a { color:#ddd; font-size:12px; } .top-header.transparent .top-links .links-top a:hover, .top-header.transparent .top-links .links-top a:focus, .top-header.transparent .top-links .links-top a:visited { color: #fff; text-decoration: none; } .top-header.transparent .top-search input { background-color:#1a1a1a; border-bottom:0; } /****Top Header Dark Background*****/ .top-header.dark { background-color: #1a1a1a; border-bottom: 0; } .top-header.dark .top-contact .text { color: #fff; } .top-header.dark .top-contact .top-contact-link { color: #ddd; } .top-header.dark .top-contact .top-contact-link:hover { color: #fff; } .top-header.dark ul.social-icons-top li a:hover { color: #009c77; } .top-header.dark .top-welcome-text span { color:#fff; } .top-header.dark .top-links .links-top a { color:#ddd; font-size:12px; } .top-header.dark .top-links .links-top a:hover { color: #fff; text-decoration: none; } .top-header.dark .top-search input { background-color:#1a1a1a; border-bottom:0; } @media (max-width: 767px) { .top-header { margin: auto; text-align:center; } .top-header .top-contact { display:inline-block; } .top-header .top-contact.left { float:none; } .top-header .top-contact.right { float:none; } .top-header .top-dropdown.left { float:none; display:inline-block; } .top-header .top-dropdown.right { float:none; display:inline-block; } .top-header .top-social { display:none; } .top-header .top-search { display:none; } .top-header .top-links { display:none; } .top-header.transparent { } } @media (max-width: 380px) { .top-header .top-contact.mail { display:none; } .top-dropdown-text { display:none; } } /******************************************************************** Header ********************************************************************/ .navigation { min-height:60px; z-index:9999; } .main-nav { height: 100px; max-height: 100px; border-bottom: 1px solid #eee; background-color: #fff; } .main-nav > .container > .nav, .main-nav > .container > .navbar-default { background-color: transparent; border: none; } .main-nav.shrink { position:fixed; top: -100px; width: 100%; height: 60px; background-color: #fff; z-index: 9999; } .main-nav.shrink-visible, .main-nav.shrink-visible .navbar-nav { visibility:hidden; } .main-nav.shrink.shrink-visible, .main-nav.shrink.shrink-visible .navbar-nav { visibility:visible; } .main-nav.slide-in { top:0px; -webkit-transition: top .3s ease; -moz-transition: top .3s ease; -o-transition: top .3s ease; transition: top .3s ease; } .main-nav .navbar-container { height: 100px; } .main-nav.shrink .container { height: 60px; } .main-nav.shrink .navbar-container { height: 60px; } .main-nav .navbar.navbar-default { z-index: 9999; border-radius: 0; margin-bottom:0; border:0; background-color:transparent; } .main-nav.shrink .navbar.navbar-default { height: 60px; } .main-nav a.logo { position: absolute; padding-top: 25px; } .main-nav.shrink a.logo { padding-top: 15px; } .main-nav a.logo img { height: 50px; } .main-nav.shrink a.logo img { height: 30px; } .main-nav .navbar-nav .dropdown-menu { border: none; border-radius: 0px; padding:0; } .main-nav .navbar-nav > li > a { color: #333; } .main-nav .dropdown-menu > li > a { padding: 10px 30px 10px 20px; } .main-nav .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { display: none; } .main-nav .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { display: block; padding-bottom: 10px; } .main-nav .dropdown-submenu { position: relative; } .main-nav .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: -1px; } .main-nav .dropdown-submenu > a:focus { background-color: transparent; } .main-nav .dropdown-submenu>a:after { float: right; font-family:'FontAwesome'; content:"\f105"; font-weight:600; color:inherit; position: absolute; top: 11px; right: 20px; } .main-nav .dropdown-submenu>a:hover:after { border-left-color: #fff !important; } .main-nav .nav .dropdown-submenu:hover >a:after { border-left-color: #fff !important; } .main-nav .menu-large { position:static!important; } .main-nav .megamenu{ padding: 20px 0px; min-width: 100%; width:100%; max-width: 1200px; } .main-nav .megamenu> li > ul { padding: 0; margin: 0; } .main-nav .megamenu> li > ul > li { list-style: none; } .main-nav .megamenu> li > ul > li > a { display: block; padding: 7px 10px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } @media (max-width: 991px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.in { overflow-y: auto!important; } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .main-nav .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav > li { float: none; } .navbar-nav> li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } .main-nav > .container { padding-left: 0px; padding-right: 0px; } .main-nav .logo { padding-left: 30px; } .main-nav .nav.navbar-nav > li.dropdown > a:after, .main-nav .nav.navbar-nav > li.with-dropdown > a:after { font-family:'FontAwesome'; content:"\f105"; position: absolute; top: 12px; right: 15px; } .main-nav .navbar-toggle { margin-top: 34px; margin-bottom: 30px; margin-right:30px; border-radius:0; } .main-nav.shrink .navbar-toggle { margin-top: 12px; margin-bottom: 12px; } .main-nav .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .main-nav .navbar-default .navbar-toggle.collapsed { background-color: #fff; } .main-nav .navbar-default .navbar-toggle, .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:active { background-color: #fff; } .main-nav .navbar-default .navbar-toggle:hover { background-color: #222; } .main-nav .navbar-default .navbar-toggle:hover > .icon-bar { background-color: #fff; } .main-nav .navbar-container { background-color: #222; height: auto; } .main-nav.shrink .navbar-container { height: auto; } .main-nav .collapsing-nav { max-height: 300px; padding-right: 17px; position:relative; z-index: 999; } .main-nav .navbar-nav > li { border-bottom: 1px solid #333; margin-left:15px; margin-right:15px; } .main-nav .navbar-nav > li > a { font-size:13px; text-transform: uppercase; font-weight: 600; } .main-nav .dropdown-menu > li > a { color: #fff; font-size: 13px; } .main-nav .navbar-nav > li > a:hover > .caret { color:#fff; } .main-nav .nav > li.dropdown.open > a, .main-nav .nav > li.open:hover > a, .main-nav .nav > li.open:focus > a { background-color: transparent; } .main-nav .navbar-nav .open .dropdown-menu > li { border-bottom:1px solid #333; margin-left:15px; } .main-nav .navbar-nav .open .dropdown-menu > li:last-child { border-bottom:0; } .main-nav .navbar-nav .open .dropdown-menu > li > a, .main-nav .navbar-nav .open .dropdown-menu .dropdown-header { padding: 10px 20px 10px 15px; } .main-nav .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { display: block; padding-bottom: 0px; } .main-nav .dropdown-menu > li > .dropdown-menu > li > a { color: #fff; font-size: 12px; } .main-nav .navbar-default .navbar-nav > .open .dropdown-menu > li > a { color: #fff; } .main-nav .navbar-default .navbar-nav > .open .dropdown-menu > li > a:hover { color: #009c77; background-color:transparent; } .main-nav .navbar-default .navbar-nav > li > a, .main-nav .navbar-default .navbar-nav > li > a:visited { color: #fff; } .main-nav .navbar-default .navbar-nav > .dropdown > a:hover{ color: #009c77; } .main-nav .navbar-default .navbar-nav > li.active > a, .main-nav .navbar-default .navbar-nav > li.active:hover > a { background-color: transparent; color: #009c77; } .main-nav .navbar-default .navbar-nav > .active > a, .main-nav .navbar-default .navbar-nav > .active > a:hover, .main-nav .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; } .main-nav .nav .open > a, .main-nav .nav .open > a:focus { background-color: transparent; color: #fff; } .main-nav .nav ul.dropdown-menu { padding-left: 15px; } .main-nav .dropdown-submenu>a:after { font-family:'FontAwesome'; content:"\f107"; margin-top: 1px; margin-right: -2px; } .main-nav .megamenu { padding: 0; } .main-nav .navbar-nav .open .dropdown-menu.megamenu > li { border-bottom: 0; margin-left:0; } .main-nav .navbar-nav .open .dropdown-menu.megamenu > li.col-sm-3 { padding: 0; margin-left:20px; } .main-nav .megamenu > li:hover { background-color: transparent; } .main-nav .megamenu > li > ul > li { font-size: 13px; } .main-nav .megamenu > li > ul > li > a { text-decoration: none; } .main-nav .megamenu > li > ul > li > a:hover { color: #009c77;; } .main-nav .megamenu> li > ul > li > a { color: #eee; margin-left: 30px; } .main-nav .megamenu> li ul > li > a >.fa { padding-right:25px; } .main-nav .megamenu .dropdown-header { padding-top: 15px; font-size: 13px; font-weight: 800; color: #eee; border-bottom:1px solid #333; margin-bottom:10px; } .main-nav .megamenu .dropdown-header i { display:none; } } @media (min-width: 992px) { .main-nav .navbar-nav .dropdown:hover { cursor: pointer; } .main-nav .navbar-container { width: 100%; float: right; } .main-nav .collapsing-nav { padding-left:0; padding-right:0; } .main-nav .navbar-nav .dropdown-menu { min-width:170px; padding:0; } .main-nav .navbar-nav > li > .dropdown-menu.menu-left { margin-left:160px; } .main-nav .main-nav .navbar-nav .caret { display:none; } .main-nav .dropdown-menu > .dropdown-submenu:hover > a { background-color: #f8f8f8; color:#333; } .main-nav .dropdown-submenu:hover> a:after { border-left-color: #555; } .main-nav .dropdown-menu > li > a:hover { background-color: #f8f8f8; color:#333; } .main-nav .navbar-nav li a { font-size: 13px; } .main-nav .navbar-nav > li > a > .caret { display:none; } .main-nav .navbar-nav .dropdown:hover > .dropdown-menu { border-bottom: 5px solid #009c77; color: #fff; } .main-nav .navbar-nav .dropdown:hover > .dropdown-menu > .dropdown-submenu > .dropdown-menu { border-bottom: 5px solid #009c77; color: #fff; } .main-nav .navbar-nav .dropdown:hover > .dropdown-menu { display: block; } .main-nav .dropdown-submenu:hover>.dropdown-menu { display: block; } .main-nav .dropdown-submenu > .dropdown-menu.menu-left { margin-left:-320px; } .main-nav .navbar-nav.navbar-right:last-child { margin-right:0; padding-right:0; } .header-search-box .navbar-nav.nav-search .dropdown > a { padding-right:0; } .header-account .navbar-nav.nav-account .dropdown > a { padding-right:0; } .main-nav .navbar-nav.navbar-right { margin-left:5px; } .main-nav .navbar-nav li:hover > .megamenu { padding:0; visibility:visible; } .main-nav .navbar-nav .megamenu { display:table!important; visibility:hidden; } .main-nav .megamenu > li { display:table-cell; height:100%; min-height:100%; float:none; padding: 20px 0; vertical-align:top; } .main-nav .megamenu > li.menu-image { padding:0; } .main-nav .megamenu > li.bordered { border-left: 1px solid #ddd; } .main-nav .megamenu > li.bordered:first-child { border-left: 0; } .main-nav .megamenu> li > ul { padding: 0 20px; } .main-nav .megamenu > li.menu-image > ul { padding:0; } .main-nav .megamenu> li ul > li > a { font-size:13px; } .main-nav .megamenu> li ul > li > a >.fa { padding-right:25px; } .main-nav .megamenu> li ul > li > a:hover { text-decoration: none; background-color: #f8f8f8; color:#333; } .main-nav .megamenu.disabled > a, .main-nav .megamenu.disabled > a:hover, .main-nav .megamenu.disabled > a:focus { color: #999999; } .main-nav .megamenu.disabled > a:hover, .main-nav .megamenu.disabled > a:focus { text-decoration: none; cursor: not-allowed; } .main-nav .megamenu .dropdown-header { color: #009c77; font-size:13px; width:100%; border-bottom:1px solid #eee; margin-bottom:15px; margin-top:10px; padding:5px 10px; text-transform:uppercase; font-weight:600; } .main-nav .megamenu li:first-child.dropdown-header { margin-top:0; } .main-nav .megamenu .dropdown-header i { float:right; } .main-nav .navbar-nav.nav-account .dropdown-menu, .main-nav .navbar-nav.nav-shop .dropdown-menu, .main-nav .navbar-nav.nav-search .dropdown-menu { cursor:auto; } } /******************************************************************** Header Link Styles ********************************************************************/ @media (min-width: 992px) { /*Border*/ .main-nav.shrink.nav-border .nav > li { height: 60px; padding-top: 5px; } .main-nav.shrink.nav-border .nav > li > a { height: 50px; margin-top:0; } .nav-border .navbar-nav > .active { border-bottom: 4px solid #009c77; background-color: transparent; } .nav-border .navbar-nav > li:hover, .nav-border .navbar-nav > li:focus, .nav-border .navbar-nav > li:active { border-bottom: 4px solid #009c77; background-color:transparent; } .nav-border .navbar-nav > li > a, .nav-border .navbar-nav > li > a:focus, .nav-border .navbar-nav > li > a:active { color: #333; } .nav-border .navbar-nav > .active > a, .nav-border .navbar-default .navbar-nav > .active > a:hover, .nav-border .navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #333; } .nav-border .nav > li > .dropdown-menu { margin-top: 4px; } .nav-border .nav > li > .dropdown-menu.megamenu { margin-top: 0px; } /*Blocks*/ .main-nav.shrink.nav-block .nav > li { height: 60px; } .main-nav.shrink.nav-block .nav > li > a { height: 60px; margin-top: 0; padding-top: 20px; } .nav-block .navbar-nav > li:hover, .nav-block .navbar-nav > li:focus, .nav-block .navbar-nav > li:active { background-color: #009c77; } .nav-block .navbar-nav > li > a:hover{ color: #fff; } .nav-block .navbar-nav > .active { background-color: #009c77; } .nav-block .navbar-nav > .active > a { background-color: transparent; color: #fff; } .nav-block .navbar-nav > .active > a, .nav-block .navbar-default .navbar-nav > .active > a:hover, .nav-block .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: transparent; } .nav-block .navbar-nav > li:hover > a, .nav-block .navbar-nav > li:focus > a, .nav-block .navbar-nav > li:active > a{ background-color: #009c77; color: #fff; } .nav-block .nav > li > .dropdown-menu { margin-top: 0px; } .nav-block .nav > li > .dropdown-menu.megamenu { margin-top: 0px; } /*Pills*/ .nav-pill .nav > li { background-color: transparent; padding-right: 5px; } .nav-pill .nav > li:last-child { padding-right: 0px; } .main-nav.nav-pill .nav > li > a { border-radius: 0px; height: 40px; margin-top: 30px ; padding-top: 10px; padding-bottom: 10px; } .nav-pill.shrink .nav > li { height:60px; padding-top: 5px; } .main-nav.nav-pill.shrink .nav > li > a { height: 40px; margin-top:5px!important; } .nav-pill .navbar-nav > li:hover > a, .nav-pill .navbar-nav > li:focus, .nav-pill .navbar-nav > li:active { background-color: #009c77; color: #fff; border-radius:0; } .nav-pill .navbar-nav > li, .nav-pill .navbar-nav > li:focus, .nav-pill .navbar-nav > li:active { background-color: transparent; color: #fff; } .nav-pill .navbar-nav > .active > a, .nav-pill .navbar-nav > .active > a:hover, .nav-pill .navbar-nav > .active > a:focus { color: #fff; background-color: #009c77; border-radius:0; } .nav-pill .navbar-nav > li.current > a { background-color: #009c77; color: #fff; border-radius:0; } .nav-pill .navbar-nav > li.current:hover > a { color: #fff; } .shrink.nav-pill .nav > li > .dropdown-menu.megamenu { margin-top: 0px; } /*Slashes*/ .nav-slash .caret { display:none; } .nav-slash .nav > li > a:after { content: "/"; color: #333; padding-left: 10px; } .nav-slash .nav > li > a:before { content: ""; padding-left: 10px; } .nav-slash .nav > li:first-child > a:before { content: ""; padding-left: 0; } .nav-slash .nav > li:last-child > a:after { content: ""; color: #333; padding-left: 0px; } .nav-slash .navbar-nav > li:hover > a, .nav-slash .navbar-nav > li:focus, .nav-slash .navbar-nav > li:active { background-color: transparent; color: #009c77; } .nav-slash .navbar-nav > .active > a, .nav-slash .navbar-default .navbar-nav > .active > a:hover, .nav-slash .navbar-default .navbar-nav > .active > a:focus { color: #009c77; background-color: transparent; } .nav-slash .navbar-nav > li.current > a { background-color: #009c77; color: #fff; } .nav-slash .navbar-nav > li.current:hover > a { color: #fff; } .nav-slash .nav > li { background-color: transparent; } .nav-slash .nav > li > a { padding-left:0; padding-right:0; } .nav-slash .nav.nav-search > li > a { padding-left:15px; padding-right:15px; } .nav-slash.shrink .nav > li { height: 60px; padding-top: 5px; } .nav-slash.shrink .nav > li > a { height: 50px; margin-top: 0px; } .nav-slash .nav > li > .dropdown-menu.megamenu { margin-top: 0px; } .nav-slash.shrink .nav > li > .dropdown-menu.megamenu { margin-top: 0px; } /*Highlight*/ .nav-highlight .navbar-nav > li:hover > a, .nav-highlight .navbar-nav > li:focus, .nav-highlight .navbar-nav > li:active { background-color: transparent; color: #009c77; } .nav-highlight .navbar-nav > .active > a, .nav-highlight .navbar-default .navbar-nav > .active > a:hover, .nav-highlight .navbar-default .navbar-nav > .active > a:focus { color: #009c77; background-color: transparent; } .nav-highlight .nav > li:last-child > a { padding-right: 0px; } .nav-highlight.shrink .nav > li { height:60px; padding-top: 5px; } .nav-highlight .nav > li > a { text-transform:uppercase; font-weight:700; } .nav-highlight.shrink .nav > li > a { height: 50px; margin-top:0; } .nav-highlight .nav > li > .dropdown-menu.megamenu { margin-top: 0; } .nav-highlight .nav > li > .dropdown-menu a { text-transform:uppercase; font-weight:600; font-size:11px; } .nav-highlight .megamenu .dropdown-header { text-transform:uppercase; } /*Hollow*/ .nav-hollow .navbar-nav > li:hover > a { background-color: transparent; color: #009c77; border:1px solid #009c77; } .nav-hollow .navbar-nav > .active > a, .nav-hollow .navbar-nav > .active > a:focus, .nav-hollow .navbar-default .navbar-nav > .active > a:hover { color: #009c77; background-color: transparent; border:1px solid #009c77; } .nav-hollow.shrink .nav > li { height:60px; padding-top: 5px; } .nav-hollow .nav > li > a { border:1px solid transparent; } .nav-hollow .nav > li { margin-right:5px; } .nav-hollow .nav > li:last-child { margin-right:0px; } .nav-hollow.shrink .nav > li > a { height: 50px; margin-top:0; } .nav-hollow .nav > li > .dropdown-menu.megamenu { margin-top: 0; } } /******************************************************************** Header with Search Bar ********************************************************************/ .header-search .collapsing-nav form[role="search"] { position: absolute; top: 0px; right: -60px; width: 100%; padding: 0px; margin: 0px; z-index: 0; float:right; margin-left: 50px; } .header-search .collapsing-nav form[role="search"] button, .header-search .collapsing-nav form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: #333; font-size:13px; box-shadow: none; outline: none; } .header-search .collapsing-nav form[role="search"] button { margin-right:0px; } .header-search .collapsing-nav form[role="search"] search-button:focus { border: none; } @media (max-width: 991px) { .header-search .navbar-nav { padding-top: 30px; } .header-search .collapsing-nav { padding-right: 25px; } .header-search .search .input-group { width: 100%; background-color: #fff; } .header-search .collapsing-nav form[role="search"] input { width: 86%; height:40px; } .header-search .collapsing-nav form[role="search"] button { float: right; } .header-search .collapsing-nav form[role="search"] button { height:40px; } .header-search .collapsing-nav form[role="search"] { right: 0; margin-left: 0; } } @media (min-width: 992px) { .header-search .collapsing-nav { padding-top: 0px; padding-right: 60px; float: right; } .header-search .navbar-default { height: 100px; } .header-search .nav > li { height: 100px; } .header-search .nav > li > a { height: 50px; margin-top: 25px; } .header-search .search { height: 50px; position:relative; width:0; float: right; } .header-search .collapsing-nav form[role="search"] { width: 38px; } .header-search .collapsing-nav form[role="search"] button, .header-search .collapsing-nav form[role="search"] input { padding: 15px 12px; height: 100px; color:#333; } .header-search.shrink .collapsing-nav form[role="search"] button, .header-search.shrink .collapsing-nav form[role="search"] input { height: 60px; } .header-search .collapsing-nav form[role="search"] button { position:absolute; right:0; top:0; background:transparent; } .header-search .collapsing-nav form[role="search"] input { padding: 0; opacity: 0; display: none; width: 100%; margin-right: 60px; } .header-search .collapsing-nav form[role="search"].active { width: 700px; } .header-search .collapsing-nav form[role="search"].active button, .header-search .collapsing-nav form[role="search"].active input { display: table-cell; opacity: 1; } .header-search .collapsing-nav form[role="search"].active input { width: 900px; text-align: right; border-bottom: 1px solid #eee; font-size:13px; letter-spacing: 2px; color: #333; } } @media screen and (min-width: 991px) and (max-width: 1200px) { .header-search .collapsing-nav form[role="search"].active input { width: 750px; } } @media screen and (max-width: 470px) { .header-search .collapsing-nav form[role="search"] input { width: 75%; } } /******************************************************************** Header with Search Box ********************************************************************/ .header-search-box .nav.nav-search button { background-color:#009c77 } .header-search-box .nav.nav-search button i { color: #fff; } @media (max-width: 991px) { .header-search-box .navbar-nav { margin: 7.5px -15px 0; } .header-search-box .navbar-nav.nav-search { margin: 0 -15px 7.5px; } .header-search-box .search-icon { display:none; } .header-search-box .nav-search .dropdown-menu { width: 100%; } .header-search-box .navbar-nav.nav-search .search-box-container { padding: 10px 30px 20px 0; } .header-search-box .nav-search form { width: 100%; } } @media (min-width: 992px) { .header-search-box .navbar-container { width: 100%; float: right; } .header-search-box .navbar-default { height: 100px; } .header-search-box .nav > li { height: 100px; } .header-search-box .nav > li > a { height: 50px; margin-top: 25px; margin-right:0; color: #333; } .nav-highlight.header-search-box .nav-search > li > a { margin-left:10px; } .header-search-box .collapsing-nav { float: right; } .header-search-box .navbar-nav.nav-search .search-box-container { padding: 20px 20px 10px; } .header-search-box .navbar-nav.nav-search .dropdown-menu { width: 250px; } .header-search-box .navbar-nav.nav-search .dropdown.open .dropdown-menu a { background-color:transparent; } .header-search-box.nav-slash .navbar-nav.nav-search .dropdown a { padding-right: 0px; } .header-search-box .navbar-nav.nav-search .dropdown > a{ color: #333; height: 100px; margin-top: 0; padding-top: 39px; } .navigation.transparent .header-search-box .navbar-nav.nav-search .dropdown > a, .header-search-box.shrink .navbar-nav.nav-search .dropdown > a{ height:60px; padding-top: 10px; } .header-search-box .nav-search .mob-visible { display:none; } } /******************************************************************** Header with Sliding Search Box ********************************************************************/ @media (max-width: 991px) { .header-sliding-search .mid-menu { visibility:hidden; opacity: 0; height:0; } } @media (min-width: 992px) { .header-sliding-search .collapsing-nav { float: right; } .header-sliding-search .navbar-container { height: 50px; } .header-sliding-search.nav-highlight .collapsing-nav { padding-right:0; } .header-sliding-search .caret { display:none; } .header-sliding-search .mid-menu { display:block; width: 500px; float:right; text-align: right; z-index: 999999; text-indent:-9999; opacity:1; height: 50px; visibility:visible; } .header-sliding-search .mid-menu .menu-list { margin-top: 5px; margin-bottom: 0; height:45px; } .header-sliding-search .mid-menu .menu-list > li { padding: 10px 15px 0 0; } .header-sliding-search .mid-menu .menu-list > li:last-child { padding-right:0; } .header-sliding-search .mid-menu .sliding-box { font-size:12px; height:30px; width: 80px; border-radius:0; padding:6px 20px; } .header-sliding-search.shrink .mid-menu .sliding-box { height:0px; } .header-sliding-search .mid-menu .menu-list a.links { font-size: 12px; font-weight:bold; color: #333; } .header-sliding-search .mid-menu .menu-list a.links:hover{ color: #009c77; } .header-sliding-search .nav > li > a { height: 50px; border-radius: 4px; } .header-sliding-search .navbar-default { height: 100px; } .main-nav.shrink.header-sliding-search .mid-menu { visibility:hidden; opacity: 0; height:0; } .main-nav.shrink.header-sliding-search .navbar.navbar-default { height: 60px; } .main-nav.shrink.header-sliding-search .nav > li > a { height: 50px; } } /******************************************************************** Simple Header ********************************************************************/ @media (min-width: 992px) { .header-right .navbar-default { height: 100px; } .header-right .collapsing-nav { float: right; } .header-right .nav > li { height: 100px; } .header-right .nav > li > a { height: 50px; border-radius: 0px; margin-top: 25px; color: #000; } } /******************************************************************** Header with Social Icons ********************************************************************/ .social-icons-nav li{ padding: 5px 0 0 5px; font-size: 14px; } ul.social-icons-nav li { margin: 0px 1px 5px 0; padding: 0; } ul.social-icons-nav li a { display: block; width: 25px; text-align: center; color: #009c77; } ul.social-icons-nav li a:hover { color: #333; } @media (max-width: 991px) { .header-social .social-nav { width: 100%; text-align:center; height: 40px; padding: 7.5px 0; } ul.social-icons-nav li a { color: #fff; } ul.social-icons-nav li a:hover { color: #009c77; } } @media (min-width: 992px) { .header-social .navbar-container { width: 100%; float: right; } .header-social .collapsing-nav { float: right; padding-right:0; } .header-social .navbar-default { height: 100px; } .header-social .nav > li { height: 100px; } .header-social .nav > li > a { height: 50px; margin-top: 25px; color: #333; } .header-social .social-nav { padding-top: 37px; float:right; text-align:right; padding-left:10px; } .header-social.nav-highlight .social-nav, .header-social.nav-slash .social-nav { padding-left:30px; } .main-nav.shrink.header-social .social-nav { padding-top: 18px; } } /******************************************************************** Centered Header ********************************************************************/ @media (max-width: 991px) { .header-center .navbar-nav { margin: 7.5px -15px 0; } .header-center .navbar-nav.nav-search { margin: 0 -15px 7.5px; } .header-center .search-icon { display:none; } .header-center .nav-search .dropdown-menu { width: 100%; } .header-center .nav-search .mob-visible { display:block; } .header-center .navbar-nav.nav-search .search-box-container { padding: 10px 30px 20px 0; } .header-center .nav-search form { width: 100%; } .header-center .search-box-container input { border-radius:0; height:40px; } .header-center .search-box-container button { background-color:#009c77; color:#fff; height:40px; } } @media (min-width: 992px) { .header-center { height: 140px; max-height: 140px; border-bottom:0; } .header-center.shrink { height: 60px; max-height: 60px; border-bottom:1px solid #eee; } .header-center .navbar.navbar-default { height: 140px; border-left:1px solid #eee; border-right:1px solid #eee; } .header-center.shrink .navbar.navbar-default { border-left:0; border-right:0; } .header-center .navbar-header { width:100%; text-align:center; padding-top:20px; padding-bottom: 20px; height: auto; } .header-center.shrink .navbar-header { width: 0; } .header-center a.logo { text-align:center; width: 100%; padding-top: 15px; height: 74px; position:relative } .header-center.shrink a.logo { display:none; } .header-center .navbar .navbar-nav { float: left; width:auto; } .header-center .navbar-container { height: 50px; border: 1px solid #eee; } .header-center.shrink .navbar-container { width: 100%; height: 60px; border-top:0; float:left; } .header-center .nav > li { height: 49px; border-right: 1px solid #eee; } .header-center.shrink .nav > li { padding-top:0px; } .header-center.shrink .nav.nav-search { float:right; } .header-center .nav.nav-search > li { border-left: 0; border-right: 0; } .header-center .nav.nav-search > li { border-left: 1px solid #eee; } .header-center.shrink .nav.nav-search > li { border-right: 1px solid #eee; } .header-center .nav > li > a { padding-top: 15px; height: 49px; } .header-center .nav.nav-search .mob-visible { display:none; } .header-center .nav.nav-search > li.open > a { color: #fff; background-color: #009c77; } .header-center .nav.nav-search > li > .dropdown-menu { width: 250px; border-bottom: 4px solid #009c77; } .header-center .nav.nav-search .search-box-container { padding: 20px 20px 10px; } .header-center .nav.nav-search .search-box-container input, .main-nav.header-center .nav.nav-search .search-box-container button { height: 40px; border-radius:0; font-size:13px; } .header-center .nav.nav-search .search-box-container button:hover { background-color:#009c77; color:#fff; } } /******************************************************************** Header Centered Version 2 ********************************************************************/ .header-magazine-center .nav > li > .dropdown-menu { margin-top:-1px !important; } .header-magazine-center .nav > li > .dropdown-menu.megamenu { margin-top:-4px !important; } @media (max-width: 991px) { .header-magazine-center .navbar-nav { margin: 7.5px -15px 0; } .header-magazine-center .navbar-nav.nav-search { margin: 0 -15px 7.5px; } .header-magazine-center .search-icon { display:none; } .header-magazine-center .nav-search .dropdown-menu { width: 100%; } .header-magazine-center .nav-search .mob-visible { display:block; } .header-magazine-center .navbar-nav.nav-search .search-box-container { padding: 10px 30px 20px 0; } .header-magazine-center .nav-search form { width: 100%; } .header-magazine-center .search-box-container input { border-radius:0; height:40px; } .header-magazine-center .search-box-container button { background-color:#009c77; color:#fff; height:40px; } } @media (min-width: 992px) { .header-magazine-center { height: 170px; max-height: 170px; border-bottom: 0; } .header-magazine-center.shrink { height: 60px; border-bottom:1px solid #ddd; } .header-magazine-center .navbar-default { height: 170px; } .header-magazine-center .navbar-container { float:left; width:auto; height:60px; width:100%; } .header-magazine-center .collapsing-nav { float: left; padding-left: 0; width:100%; text-align:center; border-bottom: 2px solid #222; border-top: 1px solid #222; height:60px!important; } .header-magazine-center .nav.navbar-nav { float:none !important; display:inline-block; } .header-magazine-center .navbar-header { width: 100%; text-align:center; padding-top:28px; padding-bottom:28px; } .header-magazine-center.shrink .collapsing-nav { border: none; height: 60px; } .header-magazine-center a.logo { position:relative; margin-top:0; } .header-magazine-center.shrink .navbar-header { display:none; } .header-magazine-center .nav > li > a { height: 50px; } .header-magazine-center .nav > li { height: 60px; padding-top:5px; } .header-magazine-center.shrink .nav > li > a { padding-left: 15px; } .header-magazine-center.shrink .nav.navbar-nav > li > .dropdown-menu { margin-top: 0px; } .header-magazine-center .navbar-nav .dropdown.open > .dropdown-menu { border-bottom: 5px solid #009c77; color: #fff; } .header-magazine-center.shrink .navbar-nav.nav-search { padding-left: 15px; } .header-magazine-center .navbar-nav.nav-search > li > a{ background-color:transparent; padding-top:15px; } .header-magazine-center .navbar-nav.nav-search .dropdown-menu { width: 250px; margin-top:0 !important; } .header-magazine-center .navbar-nav.nav-search .dropdown.open a { background-color: transparent; color: #009c77; } .header-magazine-center .navbar-nav.nav-search .search-box-container { padding: 20px 20px 10px; } .header-magazine-center .navbar-nav.nav-search .search-box-container input, .header-magazine-center .navbar-nav.nav-search .search-box-container button { height: 40px; border-radius:0; font-size:13px; } .header-magazine-center .navbar-nav.nav-search .search-box-container button:hover { background-color:#009c77; color:#fff; } } /******************************************************************** Header Sign In + Signed In ********************************************************************/ .header-account .navbar-nav.nav-account .dropdown-menu .login-form input, .header-account .navbar-nav.nav-account .dropdown-menu .login-form button { font-size:13px; width:45%; } .nav-highlight.header-account .navbar-nav.nav-account .dropdown-menu .login-form button { width:auto; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form input { margin-bottom: 20px; width: 100%; } @media (max-width: 991px) { .header-account .navbar-nav { margin: 7.5px -15px 0; } .header-account .navbar-nav.nav-account { margin: 0 -15px 7.5px; } .header-account .navbar-nav.nav-account .account-icon{ display:none; } .header-account .navbar-nav.nav-account > .dropdown > .dropdown-menu .login-form{ text-align: center; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form{ border: 0; margin: 0; padding:15px 30px 15px 0; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form .form-group{ padding-bottom: 0; margin-bottom: 0; width:100%; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form .form-group input{ margin-bottom: 15px; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form button, .nav-highlight.header-account .navbar-nav.nav-account .dropdown-menu .login-form button{ width:50%; } .header-account .navbar-nav.nav-account .dropdown-menu a.forgot { display:block; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form .form-group .form-control.account-input .left { width: 47%; float:left; margin-left: 2%; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form .form-group .form-control.account-input .right { width: 47%; float:right; margin-right: 2%; } .header-account .navbar-nav.nav-account .dropdown-menu .forgot{ color: #ddd; margin-left: 10px; margin-top:10px; } .header-account .navbar-nav.nav-account .dropdown-menu .forgot:hover { text-decoration:none; } .header-account .navbar-nav.nav-account .sign-up { text-align: center; color: #fff; padding-top: 10px; padding-bottom:10px; margin-right:30px; } .header-account .navbar-nav.nav-account .sign-up .link { color: #009c77; } .header-account .my-account { padding:15px 30px 15px 0; } .header-account .my-account .user .user-img { width: 100%; text-align: center; } .header-account .my-account .user .user-img img { height: 80px; border: 5px solid; border-color: rgba(255,255,255, 0.2); border-radius: 50%; } .header-account .my-account .user .user-info { padding-top: 10px; text-align: center; } .header-account .my-account .user .user-info .name { font-size: 14px; color: #fff; font-weight:600; margin-bottom: 0px; } .header-account .my-account .user .user-info .desig { font-size: 14px; color: #ddd; } .header-account .my-account .account-links { padding: 0px 10px 10px; } .header-account .my-account .account-links .btn-account { width:80px; margin-right:5px; font-weight: 600; font-size: 13px; } .header-account .my-account .account-links .btn-logout { width:80px; margin-left:5px; font-weight: 600; font-size: 13px; } .header-account .navbar-nav.nav-account .sign-up .link { color: #ddd; margin-left:5px; } } @media (min-width: 992px) { .header-account .collapsing-nav { float: right; } .header-account .navbar-default { height: 100px; } .header-account .nav > li { height: 100px; } .header-account .nav > li > a { height: 50px; margin-top: 25px; } .header-account .navbar-nav.nav-account .account-icon { padding-left: 10px; } .header-account .navbar-nav.nav-account .caret{ display:none; } .header-account .navbar-nav.nav-account .dropdown-menu { width: 250px; padding-top: 0; } .header-account .navbar-nav.nav-account { padding-left: 0px; } .header-account.nav-border .nav-account > li:hover, .header-account.nav-border .nav-account > li:focus, .header-account.nav-border .nav-account > li:active { border-bottom: 4px solid #009c77; } .header-account.nav-slash .navbar-nav.nav-account > li > a, .header-account.nav-highlight .navbar-nav.nav-account > li > a { padding-left:30px; } .header-account.nav-pill .navbar-nav.nav-account .dropdown{ padding-right:0; } .header-account .navbar-nav.nav-account .dropdown-menu .login-form { width: 100%; padding: 20px 20px 10px 20px; } .header-account .navbar-nav.nav-account .dropdown-menu a.forgot { float: right; margin-top: 7.5px; font-size:13px; } .header-account .navbar-nav.nav-account .dropdown-menu a.forgot:hover{ text-decoration:none; color:#009c77; } .header-account .navbar-nav.nav-account .dropdown-menu .form-group, .header-account .navbar-nav.nav-login .dropdown-menu .form-control { width: 100%; } .header-account .my-account .user { padding: 10px 0; background-color: #009c77; } .header-account .my-account .user .user-img { width: 100%; text-align: center; margin-top:10px; } .header-account .my-account .user .user-img img { height: 80px; border: 5px solid; border-color: rgba(255,255,255, 0.2); border-radius: 50%; } .header-account .my-account .user .user-info { padding-top: 10px; text-align: center; } .header-account .my-account .user .user-info .name { font-size: 14px; color: #fff; font-weight:600; margin-bottom: 0px; } .header-account .my-account .user .user-info .desig { font-size: 12px; color: #eee; } .header-account .my-account .account-links { margin: 10px 10px 3px 10px; height: 40px; } .header-account .my-account .account-links .btn-account { float:left; font-weight: 600; font-size: 13px; } .header-account .my-account .account-links .btn-logout { float:right; font-weight: 600; font-size: 13px; } .header-account .navbar-nav.nav-account .sign-up { text-align: center; color: #333; font-size: 13px; font-weight:600; padding-top: 20px; padding-bottom:10px; } .header-account .navbar-nav.nav-account .sign-up .link { color: #009c77; padding:0; } } @media (max-width: 350px){ .header-account .navbar-nav.nav-account .dropdown-menu a.forgot { font-size:11px; } } /******************************************************************** Header with Modal Icons ********************************************************************/ .modal-icons-nav li{ padding: 5px 0 0 5px; border-left: 1px solid #ddd; } ul.modal-icons-nav { margin: 0; padding: 0; width: auto; } ul.modal-icons-nav li { margin: 0px 1px 5px 0; padding: 0; } ul.modal-icons-nav li a { display: block; font-size: 13px; text-align: center; color: #009c77; padding: 0 10px 0 15px; } ul.modal-icons-nav li:last-child { border-right: none; padding-right:0; } ul.modal-icons-nav li a:hover { color: #000; } @media (max-width: 991px) { .header-icons .navbar-nav { margin: 7.5px -15px 0; } .header-icons .modal-nav { width: 100%; text-align:center; padding: 15px 0; } ul.modal-icons-nav li a { color: #fff; font-size: 12px; padding: 0 15px; } ul.modal-icons-nav li a:hover { color: #ddd; } ul.modal-icons-nav li:first-child { border-left: none; } } @media (min-width: 992px) { .header-icons .navbar-container { width: 100%; float: right; } .header-icons .collapsing-nav { float: right; } .header-icons .navbar-default { height: 100px; } .header-icons .nav > li { height: 100px; } .header-icons .nav > li > a { height: 50px; margin-top: 25px; } .header-icons .modal-nav { padding-top: 37.5px; float:right; text-align:right; font-size: 16px; } .main-nav.shrink.header-icons .modal-nav { padding-top: 18px; } .header-icons.nav-slash .modal-nav > ul > li:first-child { margin-left:30px; } .header-icons .modal-nav > ul > li > a { outline:none; } .header-icons.nav-slash .modal-nav, .header-icons.nav-highlight .modal-nav { padding-left:30px; } } /******************************************************************** Header with Shopping Cart ********************************************************************/ .header-shop .nav-shop .dropdown a { font-weight: inherit; } .header-shop .navbar-nav.nav-shop .shop-icon { font-size: 20px; color: #333; } .navigation.dark .header-shop .navbar-nav.nav-shop .shop-icon, .navigation.transparent .header-shop .navbar-nav.nav-shop .shop-icon { color: #fff; } .header-shop .navbar-nav.nav-shop span.product-num { position: absolute; top: 0; right: 0; background-color: #009c77; color: #fff; padding: 1px 6px; font-weight: bold; } .modal-body .shopping-cart .product { display:inline-block; vertical-align:middle; width: 100%; margin: 20px 0 0; border-bottom: 1px solid #ddd; } .modal-body .shopping-cart .product:last-child { border-bottom:0; } .header-shop .shopping-cart .product .info, .modal-body .shopping-cart .product .info { float: left; } .header-shop .shopping-cart .product .thumbnail, .modal-body .shopping-cart .product .thumbnail { width: 72px; height: 72px; background: transparent; border-radius: 0; border:none; float:left; padding:0; } .header-shop .shopping-cart .product .thumbnail img, .modal-body .shopping-cart .product .thumbnail img { width: auto; height: 100%; background: transparent; margin-left:0; } .header-shop .shopping-cart .product .name, .modal-body .shopping-cart .product .name { padding-top: 0px; margin: 0 0 5px 0; font-weight: 600; text-transform: capitalize; } .header-shop .shopping-cart .product .quantity, .modal-body .shopping-cart .product .quantity { margin: 0 0 5px 0; font-size:12px; color: #333; } .header-shop .shopping-cart .product .price, .modal-body .shopping-cart .product .price { margin: 0px 0px 5px 0; font-size:12px; color: #333; } .header-shop .shopping-cart .product .remove, .modal-body .shopping-cart .product .remove { float: right; margin: 20px 0px 5px 0; } .header-shop .link { padding: 0 15px; } .header-shop .link .btn, .modal-body .link .btn { margin-bottom: 10px; width:100%; font-weight: 600; font-size: 13px; } .modal-body-cart .product { display:inline-block; vertical-align:middle; width: 100%; margin: 20px 0 0; border-bottom: 1px solid #ddd; } .modal-body .shopping-cart .product:last-child { border-bottom:0; } .header-shop a.cart-btn{ display:block; text-align: center; height: 32px; line-height: 30px; margin-top:0; margin-bottom:15px; } .header-shop a.cart-btn, .header-shop a.cart-btn:focus{ color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; } .header-shop a.cart-btn:hover { color: #fff !important; opacity:0.8 !important; } @media (max-width: 767px) { .modal-body .shopping-cart .product .thumbnail { display:none; } } @media (max-width: 991px) { .header-shop .navbar-nav { margin: 7.5px -15px 0; } .header-shop .navbar-nav.nav-shop { margin: 0 -15px 7.5px; } .header-shop .navbar-nav.nav-shop span.product-num { position: inherit; background-color: transparent; font-weight: 600; padding:0; } .header-shop .navbar-nav.nav-shop span.product-num:before { content:'Cart ('; } .header-shop .navbar-nav.nav-shop span.product-num:after { content:')'; } .header-shop .navbar-nav.nav-shop .dropdown > a:hover .caret { color:#fff; } .header-shop .navbar-nav.nav-shop .shop-icon{ display:none; } .header-shop .shopping-cart .product { padding: 10px 0 5px; min-height: 60px; } .header-shop .shopping-cart .product:last-child { padding-bottom:0; } .header-shop .link { padding: 0; } .header-shop .shopping-cart .product .thumbnail { margin:0 20px 20px 0; } .header-shop .shopping-cart .product .name a { color: #fff; font-weight:600; } .header-shop .shopping-cart .product .quantity { color: #fff; } .header-shop .shopping-cart .product .price { color: #fff; } .header-shop .shopping-cart .product .remove i { color:#fff; } } @media (min-width: 992px) { .header-shop .navbar-container { width: 100%; float: right; } .header-shop .collapsing-nav { float: right; } .header-shop .navbar-default { height: 100px; } .header-shop .nav > li { height: 100px; } .header-shop .nav > li > a { height: 50px; margin-top: 25px; } .header-shop.shrink .nav > li > a { margin-top: 0; } .header-shop .navbar-nav.nav-shop .dropdown-menu { width: 250px; } .header-shop .navbar-nav.nav-shop .dropdown > a .caret { display:none; } .header-shop.nav-slash .nav-shop > li > a, .header-shop.nav-highlight .nav-shop > li > a { padding-left:30px; padding-right:15px; } .nav-border .nav.nav-shop > li > .dropdown-menu { margin-top:0; } .header-shop .shopping-cart { padding: 0 15px 0; } .header-shop .cart-item { overflow: hidden; zoom: 1; margin: 20px 0 0 20px; text-align:left; } .header-shop .shopping-cart .product { display:inline-block; vertical-align:middle; width: 100%; margin: 20px 0 0; border-bottom: 1px solid #ddd; } .header-shop .shopping-cart .product:last-child { border-bottom:0; } } @media screen and (max-width: 400px) { .header-shop .shopping-cart .product .thumbnail { display:none; } } /******************************************************************** Header with Slogan ********************************************************************/ @media (max-width: 991px) { .header-slogan .mid-menu { display:none; } } @media (min-width: 992px) { .header-slogan .navbar-default { height: 100px; } .header-slogan .mid-menu { display:block; width: 800px; float:right; margin-top:14px; text-align: right; height: 36px; z-index:9999; } .header-slogan.shrink .mid-menu { height: 0px; margin:0; } .header-slogan .mid-menu .slogan{ font-weight:600; font-size: 15px; color: #333; font-style:italic; padding: 10px 15px 0; margin: 0; opacity:1; height: 26px; z-index:99999; } .header-slogan.shrink .mid-menu .slogan { opacity:0; margin-bottom:0; height: 0; } .header-slogan .navbar-container { height: 50px; } .header-slogan .nav > li { height: 50px; } .header-slogan .collapsing-nav { float: right; } .header-slogan .nav > li > a { height: 50px; } .header-slogan .nav > li:last-child > a { padding-right:15px; } } /******************************************************************** Header with Subheadings ********************************************************************/ .main-nav.header-subheadings .navbar-container { margin-top: 0px; } .main-nav.shrink.header-subheadings { background-color: #fff; } @media (max-width: 991px) { .header-subheadings .nav > li > a > .subheading { display:none; } } @media (min-width: 992px) { .header-subheadings .navbar-default { height: 100px; } .header-subheadings .collapsing-nav { float: right; } .header-subheadings .nav > li { height: 100px; background-color: transparent; padding: 0 10px 35px; } .header-subheadings .nav > li > a { height: 50px; padding-top: 8px; border-radius: 4px; font-weight: 600; font-size: 14px; text-align:center; margin-top:25px; text-transform:none; } .header-subheadings.shrink .nav > li > a { padding-top: 15px; font-size:14px; } .header-subheadings.shrink .nav > li > a:hover { font-size:14px; } .header-subheadings.nav-highlight .nav > li > .dropdown-menu a { text-transform:none; font-weight:400; font-size: 13px; } .header-subheadings .nav > li > a > .subheading { font-weight: 500; font-size: 12px; text-align:center; height:20px; opacity:1; } .header-subheadings.shrink .nav > li > a > .subheading { height:0px; opacity:0; margin-bottom:0; } .header-subheadings .navbar-nav > .active > a { font-weight: 600; text-align:center; padding-bottom: 25px; } } /******************************************************************** Magazine Header ********************************************************************/ .main-nav.shrink.header-magazine { background-color: #fff; } @media (max-width: 991px) { .header-magazine .advert { display:none; } .header-magazine .search-icon { display: none; } .header-magazine .navbar-nav { margin: 7.5px -15px 0; } .header-magazine .navbar-nav.nav-search { margin: 0 -15px 7.5px; } .header-magazine .search-icon { display:none; } .header-magazine .nav-search .dropdown-menu { width: 100%; } .header-magazine .navbar-nav.nav-search .search-box-container { padding: 10px 30px 20px 0; } .header-magazine .nav-search form { width: 100%; } } @media (min-width: 992px) { .header-magazine { height: 170px; max-height: 170px; } .header-magazine .navbar-default { height: 170px; } .header-magazine .navbar-container { float:left; width:auto; height:60px; width:100%; } .header-magazine .collapsing-nav { float: left; padding-left: 0; width:100%; } .header-magazine .navbar-header { height:90px; position:relative; float:left; width:300px; margin-top:20px; } .header-magazine .nav > li > a { height: 60px; } .header-magazine .nav > li { height: 60px; padding-top:5px; } .header-magazine .nav>li:first-child>a { position: relative; display: block; padding-left: 0px; } .header-magazine .nav-search>li:first-child>a { position: relative; display: block; padding-left: 15px; } .header-magazine .advert { float:right; z-index: 999; opacity:1; overflow:hidden; margin-top: 15px; margin-bottom: 0; height:90px; width: 720px; } .header-magazine .advert img { height:90px; width: 720px; } .header-magazine.shrink .advert img { height:0px; width: 0px; } .main-nav.header-magazine.shrink { height: 60px; margin:0; } .main-nav.header-magazine.shrink .navbar-header { padding: 0; margin:0; width:auto; height:auto; position:absolute; } .main-nav.header-magazine a.logo { padding-top: 7.5px; } .main-nav.header-magazine a.logo img { height:75px; } .main-nav.header-magazine.shrink a.logo { padding-top: 15px; } .main-nav.header-magazine.shrink a.logo img { height:30px; } .main-nav.header-magazine.shrink .navbar-container { float:right; padding-top: 0; width: auto; } .main-nav.shrink.header-magazine .advert { height: 0; opacity: 0; margin:0; width:0; } .main-nav.shrink.header-magazine .navbar-default { height: 60px; } .main-nav.shrink.header-magazine .navbar-container { margin-top: 0; } .header-magazine .navbar-nav.nav-search { padding-left: 20px; } .header-magazine .navbar-nav.nav-search .dropdown-menu { width: 250px; } .header-magazine .navbar-nav.nav-search .dropdown.open a { background-color:transparent; color: #009c77; } .header-magazine.nav-border .navbar-nav.nav-search .dropdown.open { border-bottom: 4px solid #009c77; } .header-magazine.nav-border .navbar-nav.nav-search .dropdown.open a { background-color: transparent; color: #333; } .header-magazine.nav-block .navbar-nav.nav-search .dropdown a{ color: #333; } .header-magazine.nav-block .navbar-nav.nav-search .dropdown:hover > a{ color: #fff; } .header-magazine.nav-block .navbar-nav.nav-search .dropdown.open{ background-color:#009c77; } .header-magazine.nav-block .navbar-nav.nav-search .dropdown.open a{ background-color:transparent; color: #fff; } .header-magazine .navbar-nav .dropdown.open > .dropdown-menu { border-bottom: 5px solid #009c77; color: #fff; } .header-magazine .navbar-nav.nav-search .search-box-container { padding: 20px 20px 10px; } .header-magazine .navbar-nav.nav-search .dropdown-menu { width: 250px; } } @media (min-width: 992px) and (max-width: 1200px) { .main-nav.header-magazine .navbar-header { width:auto; } .main-nav.header-magazine a.logo { padding-top: 15px; } .main-nav.header-magazine a.logo img { height:50px; } .main-nav.header-magazine.shrink a.logo img { height:30px; } } /******************************************************************** Magazine Header Version 2 ********************************************************************/ .magazine-advert { background-color:#222; height: 150px; padding: 30px 0; } .magazine-advert .banner { width:740px; padding:0 20px 0 0; } .magazine-advert .banner img { width:720px; height: 90px; } @media (max-width: 991px) { .magazine-advert .banner { display:none; } } /******************************************************************** Detached Header ********************************************************************/ @media (min-width: 1200px) { .navigation.detached .main-nav { max-width:1200px; margin: 0 auto; } .navigation.detached .main-nav.shrink { width:100%; max-width: 100%; } } @media (min-width: 992px) { .navigation.detached { background-color: transparent; border-bottom: none; position:absolute; top:40px; left:0; width:100% } .navigation.detached .main-nav { background-color: transparent; border-bottom: none; width:100% } .navigation.detached .main-nav.shrink { background-color: #fff; width:100%; } .navigation.detached .main-nav .navbar { background-color: #fff; -webkit-box-shadow: 0 7px 5px -6px #333; -moz-box-shadow: 0 7px 5px -6px #333; box-shadow: 0 7px 5px -6px #333; } .navigation.detached .main-nav.shrink .navbar { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color:transparent; } .navigation.detached .main-nav a.logo { padding-left:30px; } .navigation.detached .main-nav.nav-block .collapsing-nav, .navigation.detached .nav-border .collapsing-nav{ padding-right: 0; } .navigation.detached .main-nav.header-search .collapsing-nav { padding-right:60px; } .navigation.detached .main-nav.nav-pill .collapsing-nav { padding-right:25px; } .navigation.detached .main-nav .navbar-nav:last-child > li:last-child { margin-right:30px; } .navigation.detached .main-nav.nav-pill .navbar-nav:last-child > li:last-child { margin-right:0; } } /******************************************************************** Transparent Header ********************************************************************/ .main-nav.shrink.transparent { background-color: #fff; } .top-header.transparent { background-color: transparent; } .top-header.transparent .top-search input { background-color:transparent; } .top-header.transparent .searchbox-input, .top-header.transparent .searchbox-reset { color:#fff; } @media (max-width: 991px) { .navigation.transparent { background-color: transparent; position:absolute; top:50px; left:0; width:100%; height: 60px; } .navigation.transparent.no-top-header { top:20px; } .navigation.transparent .main-nav.shrink { position:fixed; background-color: rgba(0,0,0,0.8); } .navigation.transparent .main-nav { height: 60px; background-color:transparent; border-bottom: 0; } .navigation.transparent .navbar-collapse { border-top:0; } } @media (min-width: 992px) { .navigation.transparent { background-color: transparent; position:absolute; top:50px; left:0; width:100%; height: 60px; } .navigation.transparent.no-top-header { top:30px; } .navigation.transparent .main-nav { height: 60px; background-color:transparent; border-bottom: 0; } .navigation.transparent .main-nav.shrink { position:fixed; background-color: rgba(0,0,0,0.8); } .navigation.transparent .main-nav a.logo { margin-top:5px; padding-top: 0; } .navigation.transparent .main-nav.shrink a.logo { margin-top:0; padding-top: 15px; } .navigation.transparent .main-nav .navbar-default { height: 60px; } .navigation.transparent .main-nav.shrink .navbar-default { height: 60px; } .navigation.transparent .main-nav .navbar-container { height: 60px; } .navigation.transparent .main-nav.shrink .navbar-container { height: 60px; } .navigation.transparent .main-nav .collapsing-nav { height: 60px; } .navigation.transparent .main-nav.shrink .collapsing-nav { height: 60px; } .transparent .collapsing-nav { float: right; } .navigation.transparent .main-nav .navbar-nav > li > a { color: #fff; margin-top: 5px; } .navigation.transparent .main-nav.shrink .navbar-nav > li > a { color: #fff; margin-top: 0px; } .navigation.transparent .main-nav .nav > li { height: 60px; } .navigation.transparent .main-nav.shrink .nav > li { height: 60px; } .navigation.transparent .main-nav .navbar-nav > li.active > a { color: #009c77; } .navigation.transparent .main-nav .navbar-nav > li:hover > a { color: #009c77; } .navigation.transparent .main-nav.nav-block li.active > a, .navigation.transparent .main-nav.nav-block li:hover > a, .navigation.transparent .main-nav.nav-pill li.active > a, .navigation.transparent .main-nav.nav-pill li:hover > a, .navigation.transparent .main-nav.nav-border li.active > a, .navigation.transparent .main-nav.nav-border li:hover > a{ color: #fff; } .navigation.transparent .main-nav.nav-block .dropdown-menu li:hover > a, .navigation.transparent .main-nav.nav-pill .dropdown-menu li:hover > a, .navigation.transparent .main-nav.nav-border .dropdown-menu li:hover > a { color: #333; } .navigation.transparent.dark-dropdown .main-nav.nav-block .dropdown-menu li:hover > a, .navigation.transparent.dark-dropdown .main-nav.nav-pill .dropdown-menu li:hover > a, .navigation.transparent.dark-dropdown .main-nav.nav-border .dropdown-menu li:hover > a { color: #eee; } .navigation.transparent .nav-slash .nav > li > a:after { color:#fff; } .navigation.transparent .main-nav.nav-block .navbar-nav > li.dropdown:hover > a, .navigation.transparent .main-nav.nav-pill .navbar-nav > li.dropdown:hover > a { color: #fff; } .navigation.transparent .header-search .collapsing-nav form[role="search"] button, .navigation.transparent .header-search .collapsing-nav form[role="search"] input { height: 60px; } } /******************************************************************** Full Width Header ********************************************************************/ @media (min-width: 992px) { .main-nav.full-width > .navbar-default > .container { width: 100%; padding-left:30px; padding-right:30px; } .header-search.full-width .collapsing-nav form[role="search"].active input { width:900px; } } @media (min-width: 992px) and (max-width: 1200px) { .header-search.full-width .collapsing-nav form[role="search"].active input { width:750px; } } @media (min-width: 768px) and (max-width: 991px) { .header-search.full-width .collapsing-nav form[role="search"].active input { width:600px; } } /******************************************************************** Header with Glass Effect ********************************************************************/ .navigation.glass { background-color: transparent; position:absolute; top:0; left:0; width:100%; } .navigation.glass .main-nav { background-color: rgba(255,255,255,0.6); border-bottom: 0; width:100%; } .navigation.glass.dark .main-nav { background-color: rgba(0,0,0,0.6); } .navigation.glass .main-nav.shrink { background-color: rgba(255,255,255,0.8); position:fixed; width:100%; } .navigation.glass.dark .main-nav.shrink { background-color: rgba(0,0,0,0.6); } @media (max-width: 991px) { .navigation.glass .main-nav .collapsing-nav{ border: 0; } } @media (min-width: 992px) { .navigation.glass .main-nav a.logo { height: 100px; padding: 25px 25px 0; background-color: rgba(255,255,255,0.8); margin-top:0; } .navigation.glass.dark .main-nav a.logo { background-color: rgba(0,0,0,0.6); } .navigation.glass .main-nav.shrink a.logo { height: 60px; padding: 15px 25px 15px; margin-top:0; } .navigation.glass .main-nav .nav > li > a { color: #333; } .navigation.glass.dark .main-nav .nav > li > a { color: #fff; } .navigation.glass .main-nav .nav > .active > a, .navigation.glass .main-nav .nav > li > a:hover, .navigation.glass .main-nav .nav > li > a:focus, .navigation.glass .main-nav .nav > li:hover > a { color: #fff; } .navigation.glass .main-nav.nav-hollow .nav > .active > a, .navigation.glass .main-nav.nav-hollow .nav > li > a:hover, .navigation.glass .main-nav.nav-hollow .nav > li > a:focus, .navigation.glass .main-nav.nav-hollow .nav > li:hover > a, .navigation.glass .main-nav.nav-highlight .nav > .active > a, .navigation.glass .main-nav.nav-highlight .nav > li > a:hover, .navigation.glass .main-nav.nav-highlight .nav > li:hover > a, .navigation.glass .main-nav.nav-slash .nav > .active > a, .navigation.glass .main-nav.nav-slash .nav > li > a:hover, .navigation.glass .main-nav.nav-slash .nav > li:hover > a{ color: #009c77; } .navigation.glass .main-nav.nav-border .nav > .active > a, .navigation.glass .main-nav.nav-border .nav > li > a:hover, .navigation.glass .main-nav.nav-border .nav > li:hover > a{ color: #333; } .navigation.glass.dark .main-nav.nav-border .nav > .active > a, .navigation.glass.dark .main-nav.nav-border .nav > li > a:hover, .navigation.glass.dark .main-nav.nav-border .nav > li:hover > a, .navigation.glass.dark .main-nav.nav-hollow .nav > .active > a, .navigation.glass.dark .main-nav.nav-hollow .nav > li > a:hover, .navigation.glass.dark .main-nav.nav-hollow .nav > li:hover > a{ color: #fff; } } /******************************************************************** Dark Navigation Styles ********************************************************************/ .navigation.dark { background-color: #222; } .navigation.dark.detached, .navigation.dark.glass { background-color: transparent; } .navigation.dark .header-search .collapsing-nav form[role="search"].active input { width: 900px; text-align: right; border-bottom: 1px solid #222; font-size:13px; letter-spacing: 2px; color: #eee; background-color:#222; } .navigation.dark.header-magazine-center .nav.navbar-nav > li > .dropdown-menu { margin-top: -1px; } .navigation.dark .header-icons .modal-nav > ul > li > a{ color: #fff; } .navigation.dark .header-icons .modal-nav > ul > li > a:hover { color: #009c77; } @media (max-width: 991px) { .navigation.dark .main-nav { background-color: #222; border-bottom: 0; } .navigation.dark .main-nav .collapsing-nav{ border: 0; } } @media (min-width: 992px) { .navigation.dark .main-nav { background-color: #222; border-bottom: 0; } .navigation.dark .main-nav.shrink { background-color: #222; } .navigation.dark .main-nav .navbar-nav .dropdown a{ color: #eee; } .navigation.dark .main-nav .dropdown-menu > li > a:focus { background-color: #333; } .navigation.dark-dropdown .main-nav .dropdown-menu, .navigation.dark-dropdown .main-nav .dropdown-menu > .dropdown-submenu{ background-color:#222; } .navigation.dark .main-nav .dropdown-menu li a, .navigation.dark-dropdown .main-nav .dropdown-menu li a { color:#eee; } .navigation.dark .main-nav .dropdown-menu > .dropdown-submenu:hover > a, .navigation.dark-dropdown .main-nav .dropdown-menu > .dropdown-submenu:hover > a{ background-color: #333; } .navigation.dark .main-nav .megamenu> li ul > li > a:hover, .navigation.dark-dropdown .main-nav .megamenu> li ul > li > a:hover{ background-color:#333; } .navigation.dark .main-nav .navbar-nav .dropdown .dropdown-menu a:hover, .navigation.dark-dropdown .main-nav .navbar-nav .dropdown .dropdown-menu a:hover{ background-color: #333; } .navigation.dark .main-nav .navbar-nav.nav-shop .dropdown .product .name a, .navigation.dark-dropdown .main-nav .navbar-nav.nav-shop .dropdown .product .name a{ color: #ddd; background-color:transparent; } .navigation.dark .main-nav .navbar-nav.nav-shop .dropdown .product .name a:hover, .navigation.dark-dropdown .main-nav .navbar-nav.nav-shop .dropdown .product .name a:hover{ color: #fff; } .navigation.dark .header-shop .shopping-cart .product, .navigation.dark-dropdown .header-shop .shopping-cart .product { border-color:#333; } .navigation.dark .main-nav .navbar-nav li.dropdown .dropdown-menu { background-color: #222; } .navigation.dark .main-nav .dropdown-submenu>.dropdown-menu, .navigation.dark-dropdown .main-nav .dropdown-submenu>.dropdown-menu{ -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.4); box-shadow: 0 6px 12px rgba(0,0,0,.4); } .navigation.dark .main-nav li > a { color: #fff; } .navigation.dark .main-nav.header-social li > a { color: inherit; } .navigation.dark .main-nav li.active > a { color: #fff; } .navigation.dark .main-nav li:hover > a { color: #fff; } .navigation.dark .main-nav .collapsing-nav .search .navbar-form button[type="submit"] span { color: #fff } .navigation.dark .main-nav .dropdown-submenu>a:after { border-left-color: #ddd; } .navigation.dark .main-nav .collapsing-nav .search .navbar-form input { background-color: #222; color: #fff; border-bottom: none; } .navigation.dark .main-nav .megamenu .dropdown-header, .navigation.dark-dropdown .main-nav .megamenu .dropdown-header{ border-bottom: 1px solid #333; color:#999; } .navigation.dark .nav-border .navbar-nav > .active { border-bottom: 4px solid #009c77; } .navigation.dark .nav-border .navbar-nav > li:hover, .navigation.dark .nav-border .navbar-nav > li:focus, .navigation.dark .nav-border .navbar-nav > li:active { border-bottom: 4px solid #009c77; } .navigation.dark .nav-border .navbar-nav > li > a:hover, .navigation.dark .nav-border .navbar-nav > li > a:focus, .navigation.dark .nav-border .navbar-nav > li > a:active, .navigation.dark .nav-border .navbar-nav > li.active > a:focus { color:#fff; } .navigation.dark .nav-border .nav > li > .dropdown-menu { margin-top: 4px; } .navigation.dark .nav-border .nav > li > .megamenu { margin-top: 0; } .navigation.dark .nav-slash .nav > li > a:after { color: #ddd; } .navigation.dark .nav-slash .nav > li.active > a { color: #009c77; } .navigation.dark .nav-slash .nav > li > a:hover { color: #009c77; } .navigation.dark .nav-highlight .nav > li.active > a{ color: #009c77; } .navigation.dark .main-nav.nav-highlight .nav > li > a:hover, .navigation.dark .main-nav.nav-highlight .nav > li:hover > a{ color: #009c77; } .navigation.dark .nav-hollow .navbar-nav > li:hover > a { border:1px solid #009c77; } .navigation.dark .nav-hollow .navbar-nav > .active > a, .navigation.dark .nav-hollow .navbar-default .navbar-nav > .active > a:hover, .nav-hollow.dark .navbar-default .navbar-nav > .active > a:focus { border:1px solid #009c77; } .navigation.dark input, .navigation.dark-dropdown input { color: #fff; background-color:#222; border:1px solid #555; } .navigation.dark .header-sliding-search .mid-menu .menu-list a.links { color: #eee; } .navigation.dark .header-sliding-search .mid-menu .menu-list a.links:hover{ color: #009c77; } .navigation.dark .header-center .nav > li { border-color: #333; } .navigation.dark .header-center .navbar.navbar-default { border-left:1px solid #333; border-right:1px solid #333; } .navigation.dark .header-center .navbar-container { border-top:1px solid #333; border-bottom:1px solid #333; } .navigation.dark .header-center.shrink .navbar-container { border-top:0; } .navigation.dark .header-center.shrink .nav.nav-search > li { border-right:1px solid #333; } .navigation.dark .header-account .navbar-nav.nav-account .dropdown-menu a:hover, .navigation.dark-dropdown .header-account .navbar-nav.nav-account .dropdown-menu a:hover { background-color:transparent; } .navigation.dark .header-account .navbar-nav.nav-account .login-text { color: #fff; } .navigation.dark .header-account .navbar-nav.nav-account .login-form input { color: #ddd; background-color: #222; } .navigation.dark .header-account .navbar-nav.nav-account .login-form button[type="submit"] { color: #ddd; background-color: #222; } .navigation.dark .header-account .navbar-nav.nav-account .sign-up, .navigation.dark-dropdown .header-account .navbar-nav.nav-account .sign-up{ color: #fff; } .navigation.dark .header-account .navbar-nav.nav-account .sign-up .link { color: #fff; font-weight:700; } .navigation.dark .header-account .navbar-nav.nav-account .sign-up .link:hover { color: #009c77; } .navigation.dark .header-account .navbar-nav.nav-account .link button[type="button"] { color: #ddd; background-color: #222; } .navigation.dark-dropdown .header-account .navbar-nav.nav-account .dropdown-menu a { color:#eee; } .navigation.dark-dropdown .header-account .navbar-nav.nav-account .dropdown-menu a:hover { color:#009c77; } .navigation.dark .main-nav .navbar-nav .dropdown .dropdown-menu .product a:hover, .navigation.dark .main-nav .navbar-nav .dropdown .dropdown-menu .product a:focus, .navigation.dark-dropdown .main-nav .navbar-nav .dropdown .dropdown-menu .product a:hover, .navigation.dark-dropdown .main-nav .navbar-nav .dropdown .dropdown-menu .product a:focus { background-color:transparent; } .navigation.dark .header-shop .shopping-cart .product .quantity, .navigation.dark-dropdown .header-shop .shopping-cart .product .quantity{ color: #aaa; } .navigation.dark .header-shop .shopping-cart .product .price, .navigation.dark-dropdown .header-shop .shopping-cart .product .price { color: #aaa; } .navigation.dark .header-shop .shopping-cart .product .remove a, .navigation.dark-dropdown .header-shop .shopping-cart .product .remove a { color: #aaa; } .navigation.dark .navbar-right .shopping-cart .product .remove a:hover, .navigation.dark-dropdown .navbar-right .shopping-cart .product .remove a:hover { color: #009c77; } .navigation.dark .header-shop .shopping-cart .link button[type="button"] { background-color: #222; color: #ddd; } .navigation.detached.dark .main-nav { background-color: transparent; } .navigation.detached.dark .main-nav .navbar-default { background-color: #222; } .navigation.detached.dark .main-nav.shrink { background-color: #222; } .navigation.detached.dark .main-nav.shrink .navbar-default { background-color: transparent; } .navigation.dark .header-slogan .mid-menu .slogan { color: #ddd; } .navigation.dark .header-magazine-center .collapsing-nav { border-top: 1px solid #aaa; border-bottom: none; } } /******************************************************************** Navigation - Right (Search, Account and Cart Dropdowns) ********************************************************************/ @media (min-width: 992px) { .navigation.glass .navbar-nav.navbar-right .dropdown > a { color:#333; } .nav-block .navbar-nav.navbar-right .dropdown > a:hover, .nav-block .navbar-nav.navbar-right .dropdown.open > a, .nav-block .navbar-nav.navbar-right > li:hover > a, .nav-block .navbar-nav.navbar-right > li:hover, .nav-block .navbar-nav.navbar-right > li:focus, .navigation.glass .main-nav.nav-block .navbar-nav.navbar-right> li > a:focus, .nav-block .navbar-nav.navbar-right > li:active, .nav-border .navbar-nav.navbar-right .dropdown > a:hover, .nav-border .navbar-nav.navbar-right .dropdown.open > a, .nav-border .navbar-nav.navbar-right > li:hover > a, .nav-border .navbar-nav.navbar-right > li:hover, .nav-border .navbar-nav.navbar-right > li:focus, .nav-border .navbar-nav.navbar-right > li:active, .nav-pill .navbar-nav.navbar-right .dropdown > a:hover, .nav-pill .navbar-nav.navbar-right .dropdown.open > a, .nav-pill .navbar-nav.navbar-right > li:hover > a, .nav-pill .navbar-nav.navbar-right > li:hover, .nav-pill .navbar-nav.navbar-right > li:focus, .nav-pill .navbar-nav.navbar-right > li:active, .nav-slash .navbar-nav.navbar-right .dropdown > a:hover, .nav-slash .navbar-nav.navbar-right .dropdown.open > a, .nav-slash .navbar-nav.navbar-right > li:hover > a, .nav-slash .navbar-nav.navbar-right > li:hover, .nav-slash .navbar-nav.navbar-right > li:focus, .nav-slash .navbar-nav.navbar-right > li:active, .nav-highlight .navbar-nav.navbar-right .dropdown > a:hover, .nav-highlight .navbar-nav.navbar-right .dropdown.open > a, .nav-highlight .navbar-nav.navbar-right > li:hover > a, .nav-highlight .navbar-nav.navbar-right > li:hover, .nav-highlight .navbar-nav.navbar-right > li:focus, .nav-highlight .navbar-nav.navbar-right > li:active { background-color: transparent !important; color: #009c77 !important; border:none !important; } .nav-hollow .navbar-nav.navbar-right .dropdown > a:hover, .nav-hollow .navbar-nav.navbar-right .dropdown.open > a, .nav-hollow .navbar-nav.navbar-right > li:hover > a, .nav-hollow .navbar-nav.navbar-right > li:hover, .nav-hollow .navbar-nav.navbar-right > li:focus, .nav-hollow .navbar-nav.navbar-right > li:active{ background-color: transparent; color: #009c77 !important; border-color:transparent !important; } .nav-border .navbar-nav.navbar-right > li > .dropdown-menu { margin-top:0 !important; } .navbar-nav.navbar-right .dropdown > .dropdown-menu { border-bottom: 5px solid #009c77; } } /******************************************************************** Navigation - Right - Multi-Icons ********************************************************************/ @media (min-width: 992px) { .main-nav .navbar-nav.navbar-right.nav-multi-icons { padding-left: 20px; margin-left:0; } .navigation.transparent .main-nav .navbar-nav.navbar-right.nav-multi-icons { padding-top:5px; } .navigation.transparent .main-nav.shrink .navbar-nav.navbar-right.nav-multi-icons { padding-top:0px; } .navigation.transparent .main-nav.shrink.nav-block .navbar-nav.navbar-right.nav-multi-icons { padding-top:5px; } .main-nav .navbar-nav.navbar-right.nav-multi-icons .dropdown > a{ height: 100px; margin-top: 0; padding-top: 39px; } .main-nav .navbar-nav.navbar-right.nav-multi-icons .dropdown > a.search-box { margin-top:-1.5px; } .navigation.transparent .main-nav .navbar-nav.navbar-right.nav-multi-icons .dropdown > a, .shrink.main-nav .navbar-nav.navbar-right.nav-multi-icons .dropdown > a{ height:60px; padding-top: 15px; } .main-nav .navbar-nav.navbar-right.nav-multi-icons > li > a { padding-left:10px !important; padding-right:10px !important; margin-left: 0!important; } .main-nav .navbar-nav.navbar-right.nav-multi-icons > li:last-child> a { padding-right:0px !important; } .main-nav .navbar-nav.navbar-right.nav-multi-icons .account-icon { padding-left: 0px; font-size: 15px; padding-top: 3px; } .nav-slash .navbar-nav.nav-search.nav-multi-icons .dropdown a:before { content: none; padding-right: 0; } .nav-slash .navbar-nav.nav-search.nav-multi-icons li.dropdown > a:after { content: none; padding-left: 0; } .header-shop .navbar-nav.nav-multi-icons .shop-icon { font-size:16px; } .navbar-nav.nav-multi-icons .shop-icon{ width:21px; } .main-nav .navbar-nav.navbar-right.nav-multi-icons > li:last-child > a .shop-icon{ width:31px; } .navbar-nav.nav-multi-icons span.product-num { margin-top: 25px; } .shrink.main-nav .navbar-nav.nav-multi-icons span.product-num, .navigation.transparent .main-nav .navbar-nav.nav-multi-icons span.product-num{ margin-top: 0; } } /******************************************************************** Side Menu with Icons ********************************************************************/ @media (min-width: 992px) and (max-width: 1434px) { .smo-left .container, .smo-right .container { width:100%; } } @media (min-width: 992px) and (max-width: 1254px) { .smi-left .container, .smi-right .container { width:100%; } } @media (min-width: 992px) { .side-menu .main-nav .navbar.navbar-default, .side-menu-icons .main-nav .navbar.navbar-default{ position:relative; height:100%; } .side-menu .main-nav .navbar.navbar-default .container-fluid { padding:0; } .navigation.side-menu-icons { min-height: 0; } .navigation.side-menu-icons .main-nav { max-height: 100%; height: auto; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height: 100%; z-index:999; border-bottom:0; } .side-menu-icons .container { background: #f6f6f6; position: fixed; height: 100%; width: 250px; z-index: 100; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow-x:hidden; overflow-y:hidden; padding-left:0; padding-right:0; } .side-menu-icons.dark .container { background: #222; } .side-menu-icons.left .container { margin-left: -250px; left: 70px; } .side-menu-icons.right .container { margin-right: -250px; right: 70px; } .side-menu-icons .main-nav .navbar.navbar-default .container-fluid { width:267px; overflow-y:visible; overflow-x:hidden; height:100%; padding:0; } .side-menu-icons .main-nav .navbar.navbar-default { width:250px; padding-left:0; padding-right:0; } .side-menu-icons .main-nav .navbar-container { height: auto; width:100%; } .side-menu-icons.left.active .container { left: 250px; } .side-menu-icons.right.active .container { right: 250px; } .side-menu-icons .nav.navbar-nav > li { display: block; float: left; text-decoration: none; width: 250px; line-height: 40px; text-indent: 20px; background: #f6f6f6; border-top: 1px solid #ddd; } .side-menu-icons .nav.navbar-nav > li:last-child { border-bottom: 1px solid #ddd ; } .side-menu-icons.dark .nav.navbar-nav > li { background: #222; border-top: 1px solid #1A1A1A; border-bottom: 1px solid #1A1A1A; } .side-menu-icons.dark .nav.navbar-nav > li:last-child { border-bottom: 1px solid #1A1A1A; } .side-menu-icons.right .nav.navbar-nav > li { text-align:right; } .side-menu-icons.right .nav.navbar-nav > li > a, .side-menu-icons.right .nav.navbar-nav > li > .menu-dropdown > li > a{ padding-right:25px; } .side-menu-icons .nav.navbar-nav > li > a{ color: #333333; display: block; text-decoration: none; } .side-menu-icons.dark .nav.navbar-nav > li > a{ color: #f6f6f6; } .side-menu-icons .nav.navbar-nav > li.active > a, .side-menu-icons .nav.navbar-nav > li.active > a:hover, .side-menu-icons .nav.navbar-nav > li > a:hover{ color: #333; background: #eee; } .side-menu-icons.dark .nav.navbar-nav > li.active > a, .side-menu-icons.dark .nav.navbar-nav > li.active > a:hover, .side-menu-icons.dark .nav.navbar-nav > li > a:hover, .side-menu-icons.dark .nav.navbar-nav > li > a:focus{ color:#f6f6f6; background: #333; } .side-menu-icons .nav.navbar-nav > li:hover > a { color: #333; background: #eee; text-decoration: none; } .side-menu-icons.dark .nav.navbar-nav > li:hover > a { color: #f6f6f6; background: #333; text-decoration: none; } .side-menu-icons .nav.navbar-nav > li:hover > ul { text-decoration: none; background: transparent; text-decoration: none; } .side-menu-icons .nav.navbar-nav > li:hover > ul > li > a:hover { color: #fff; background: #009c77; } .side-menu-icons .nav.navbar-nav > li > .menu-dropdown { list-style:none; padding-left:0; } .side-menu-icons .nav.navbar-nav > li > .menu-dropdown > li > a { position:relative; display:block; padding:15px; height:50px; line-height:20px; font-size:12px; color: #333333; font-weight:600; text-decoration: none; } .side-menu-icons.dark .nav.navbar-nav > li > .menu-dropdown > li > a { color:#f6f6f6; } .side-menu-icons .navbar-header { height: 60px; width:100%; line-height: 60px; font-size: 18px; -webkit-transition: height .3s ease; -moz-transition: height .3s ease; -o-transition: height .3s ease; transition: height .3s ease; z-index:101; } .side-menu-icons.active .navbar-header { height: 150px; } .side-menu-icons .navbar-header a.logo { position:absolute; text-align: center; padding: 5px 0px; width:100%; top:38px; } .side-menu-icons .navbar-header a.logo img { height: 20px; width:auto; -webkit-transition: height .3s ease, margin .3s ease; -moz-transition: height .3s ease, margin .3s ease; -o-transition: height .3s ease, margin .3s ease; transition: height .3s ease, margin .3s ease; } .side-menu-icons.active .navbar-header a.logo img { height:50px; } /* Icons Side Menu - Trigger */ .side-menu-icons .nav-icons-trigger { cursor: pointer; display: block; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .side-menu-icons .nav-icons-trigger .bar-icon-wrapper { padding: 21px 27.5px; z-index:999; color: #333; height:60px; position: absolute; top:0; z-index:111; color: #333; -webkit-transform: translate3d(0, 0, 0); /* The zoom: 1; of new browsers */ } .side-menu-icons.left .nav-icons-trigger .bar-icon-wrapper { right:0; } .side-menu-icons.right .nav-icons-trigger .bar-icon-wrapper { left:0; } .side-menu-icons .nav-icons-trigger .bar-icon { height: 3px; width: 17px; background: #333; display: block; opacity: 1; margin-top: 4px; -webkit-transition: -webkit-transform 0.15s linear; -o-transition: -o-transform 0.15s linear; -ms-transition: -ms-transform 0.15s linear; -moz-transition: -moz-transform 0.15s linear; transition: transform 0.15s linear; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } .side-menu-icons .nav-icons-trigger .bar-icon:nth-child(1){ margin-top:0; } .side-menu-icons.dark .nav-icons-trigger .bar-icon { background: #f6f6f6; } .side-menu-icons .nav-icons-trigger .bar-icon:nth-child(2) { -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; -ms-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .side-menu-icons.active .bar-icon:nth-child(1) { -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0); -o-transform: rotate(45deg) translate3d(5px, 5px, 0); -ms-transform: rotate(45deg) translate3d(5px, 5px, 0); -moz-transform: rotate(45deg) translate3d(5px, 5px, 0); transform: rotate(45deg) translate3d(5px, 5px, 0); } .side-menu-icons.active .bar-icon:nth-child(2) { opacity: 0; } .side-menu-icons.active .bar-icon:nth-child(3) { -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0); -o-transform: rotate(-45deg) translate3d(5px, -5px, 0); -ms-transform: rotate(-45deg) translate3d(5px, -5px, 0); -moz-transform: rotate(-45deg) translate3d(5px, -5px, 0); transform: rotate(-45deg) translate3d(5px, -5px, 0); } .side-menu-icons.left .menu-icon { float:right; padding-right: 15px; padding-top:3px; } .side-menu-icons.right .menu-icon { float:left; padding-left: 0px; padding-top:3px; margin-left:-5px; } .smi-left { margin-left:70px; } .smi-right { margin-right:70px; } /*Side Menu - Bottom - Social Icons + Copyright*/ .side-menu-bottom { position:absolute; bottom:0; width:250px; margin-bottom:20px; text-align:center; } .side-menu-bottom .text { visibility:hidden; font-size:12px; } .dark .side-menu-bottom .text { visibility:hidden; font-size:12px; color: #f6f6f6; } .side-menu-icons.active .side-menu-bottom .text, .side-menu.active .side-menu-bottom .text, .side-menu.static .side-menu-bottom .text { visibility:visible; } .side-menu ul.side-menu-social { visibility:hidden; } .side-menu-icons ul.side-menu-social{ visibility:visible; position: absolute; right: 20px; bottom: 0; } .side-menu-icons.right ul.side-menu-social{ position: absolute; right: inherit; left:30px; bottom: 0; } ul.social-icons.side-menu-social li{ margin-bottom:25px; display:block; } ul.social-icons.side-menu-social li:last-child{ margin-bottom:0; } .side-menu-icons.active ul.side-menu-social, .side-menu-icons.right.active ul.side-menu-social, .side-menu.active ul.side-menu-social, .side-menu.static ul.side-menu-social { visibility:visible; position: absolute; bottom: 0; top: auto; right:inherit; clear: both; width:250px; text-align:center; padding: 0; margin-bottom:25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .side-menu-icons.right.active ul.side-menu-social { left:inherit; } .side-menu-icons.active ul.social-icons.side-menu-social li, .side-menu.active ul.social-icons.side-menu-social li, .side-menu.static ul.social-icons.side-menu-social li{ display:inline-block; padding-bottom:0; margin-bottom:15px; } } @media (max-width: 991px) { .side-menu-icons .nav-icons-trigger { display:none; } .side-menu-icons .nav.navbar-nav > li > a{ color: #fff; font-size:13px; } .side-menu-icons .nav.navbar-nav > li > a:hover{ color: #009c77; } .side-menu-icons .nav.navbar-nav > li > ul > li > a{ color: #fff; font-size:12px; } .side-menu-icons .nav.navbar-nav > li > ul > li > a:hover, .side-menu-icons .nav.navbar-nav > li > ul > li > a:focus{ color: #009c77; background-color:transparent; } .side-menu-icons .nav.navbar-nav > li > a{ color: #fff; } .side-menu-icons .nav > li > .menu-dropdown { list-style:none; padding-left:0; } .side-menu-icons .nav > li > .menu-dropdown > li { border-bottom: 1px solid #333; margin-left:15px; } .side-menu-icons .nav > li > .menu-dropdown > li:last-child { border-bottom: 0; } .side-menu-icons .nav > li > .menu-dropdown > li > a { line-height:20px; display: block; padding:10px 15px 10px 25px; clear: both; font-weight: 400; line-height: 20px; color: #333; white-space: nowrap; } .menu-container { left: 70px; } .side-menu-icons .menu-icon { display:none; } .side-menu-bottom { display:none; } } /******************************************************************** Side Menu ********************************************************************/ .navigation.side-menu.dark .main-nav { background:#222; } @media (min-width: 992px) { .navigation.side-menu { min-height: 0; } .navigation.side-menu .main-nav { max-height: 100%; height: auto; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; height: 100%; z-index:999; border-bottom:0; } .side-menu .container { background: #f6f6f6; position: fixed; height: 100%; width: 250px; z-index: 100; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow-x:hidden; overflow-y:hidden; padding-left:0; padding-right:0; } .side-menu.dark .container { background:#222; } .side-menu.left .container { margin-left: -250px; left: 0px; } .side-menu.left.static .container { margin-left: 0px; left: 0px; transition:none; } .side-menu.right .container { margin-right: -250px; right: 0px; } .side-menu.right.static .container { margin-right: 0px; right: 0px; transition:none; } .side-menu .container-inner { width:267px; overflow-y:visible; overflow-x:hidden; height:100%; } .side-menu .main-nav .navbar.navbar-default { width:250px; padding-left:0; padding-right:0; } .side-menu .main-nav .navbar-container { height: auto; width:100%; } .side-menu.left.active .container { left: 250px; } .side-menu.right.active .container { right: 250px; } .side-menu .nav.navbar-nav > li { display: block; float: left; text-decoration: none; width: 250px; line-height: 40px; text-indent: 20px; background: #f6f6f6; border-top: 1px solid #ddd; } .side-menu .nav.navbar-nav > li:last-child { border-bottom: 1px solid #ddd ; } .side-menu.dark .nav.navbar-nav > li { background: #222; border-top: 1px solid #1A1A1A; } .side-menu.dark .nav.navbar-nav > li:last-child { border-bottom: 1px solid #1A1A1A; } .side-menu .nav.navbar-nav > li.external > a { font-weight:700; color:#333; } .side-menu.dark .nav.navbar-nav > li.external > a { color:#ddd; } .side-menu.right .nav.navbar-nav > li { text-align:right; } .side-menu.right .nav.navbar-nav > li > a, .side-menu.right .nav.navbar-nav > li > .menu-dropdown > li > a{ padding-right:25px; } .side-menu .nav.navbar-nav > li > a{ color: #333333; display: block; text-decoration: none; } .side-menu.dark .nav.navbar-nav > li > a{ color: #f6f6f6; } .side-menu .nav.navbar-nav > li > a > i{ float:right; padding-right:15px; padding-top:5px; } .side-menu .nav.navbar-nav > li.active > a, .side-menu .nav.navbar-nav > li:hover > a{ color: #333; background: #eee; text-decoration:none; } .side-menu.dark .nav.navbar-nav > li.active > a, .side-menu.dark .nav.navbar-nav > li:hover > a{ color: #eee; background: #333; text-decoration:none; } .side-menu .nav.navbar-nav > li:hover > ul { text-decoration: none; background: transparent; text-decoration: none; } .side-menu .nav.navbar-nav > li:hover > ul > li > a:hover { color: #fff; background: #009c77; } .side-menu .nav.navbar-nav > li > .menu-dropdown { list-style:none; padding-left:0; } .side-menu .nav.navbar-nav > li > .menu-dropdown > li > a { position:relative; display:block; padding:15px; height:50px; line-height:20px; font-size:12px; color: #333333; font-weight:600; text-decoration: none; } .side-menu.dark .nav.navbar-nav > li > .menu-dropdown > li > a { color:#f6f6f6; } .side-menu li.with-dropdown > a.menu-dropdown-link:after { font-family:'FontAwesome'; content:"\f067"; position: absolute; top: 15px; right: 30px; } .side-menu.right li.with-dropdown > a.menu-dropdown-link:after { right:inherit; left:5px; } .side-menu li.with-dropdown > a.menu-dropdown-link.active-dropdown:after { content:"\f068"; } .side-menu .navbar-header { height: 60px; width:100%; line-height: 60px; font-size: 18px; -webkit-transition: height .3s ease; -moz-transition: height .3s ease; -o-transition: height .3s ease; transition: height .3s ease; z-index:101; } .side-menu.active .navbar-header { height: 150px; } .side-menu.static .navbar-header { height: 150px; } .side-menu .navbar-header a.logo { position:absolute; text-align: center; width:100%; } .side-menu.left .navbar-header a.logo { padding: 5px 15px; } .side-menu.right .navbar-header a.logo { padding: 5px 0px; } .side-menu .navbar-header a.logo img { height: 20px; width:auto; -webkit-transition: height .3s ease, margin .3s ease; -moz-transition: height .3s ease, margin .3s ease; -o-transition: height .3s ease, margin .3s ease; transition: height .3s ease, margin .3s ease; } .side-menu.active.left .navbar-header a.logo img { height:50px; margin-top:50px; } .side-menu.active.right .navbar-header a.logo img { height:50px; margin-top:50px; } .side-menu.static .navbar-header a.logo img { height: 50px; width:auto; margin-top:50px; transition:none; } /* Side Menu - Trigger */ .side-menu.left .nav-trigger { position:fixed; left: 25px; top:25px; z-index:111; -webkit-transition: left .3s ease; -moz-transition: left .3s ease; -o-transition: left .3s ease; transition: left .3s ease; } .side-menu.left.active .nav-trigger { left:275px; } .side-menu.right .nav-trigger { position:fixed; right: 100px; top:25px; z-index:111; -webkit-transition: right .3s ease; -moz-transition: right .3s ease; -o-transition: right .3s ease; transition: right .3s ease; } .side-menu.right.active .nav-trigger { right:345px; } .side-menu .nav-trigger { cursor: pointer; display: block; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .side-menu .nav-trigger .bar-icon-wrapper { position: absolute; top: 50%; left: 50%; margin-left: 0px; margin-top: 0px; padding: 16px 22px; z-index:111; color: #333; background-color:#f6f6f6; -webkit-transform: translate3d(0, 0, 0); /* The zoom: 1; of new browsers */ } .side-menu.dark .nav-trigger .bar-icon-wrapper { background-color:#222; } .side-menu .nav-trigger .bar-icon { height: 3px; width: 17px; background: #444; display: block; opacity: 1; margin-top: 4px; -webkit-transition: -webkit-transform 0.15s linear; -o-transition: -o-transform 0.15s linear; -ms-transition: -ms-transform 0.15s linear; -moz-transition: -moz-transform 0.15s linear; transition: transform 0.15s linear; -webkit-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; transform-origin: 50% 50%; } .side-menu .nav-trigger .bar-icon:nth-child(1){ margin-top:0; } .side-menu.dark .nav-trigger .bar-icon { background: #f6f6f6; } .side-menu .nav-trigger .bar-icon:nth-child(2) { -webkit-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; -ms-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .side-menu.active .bar-icon:nth-child(1) { -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0); -o-transform: rotate(45deg) translate3d(5px, 5px, 0); -ms-transform: rotate(45deg) translate3d(5px, 5px, 0); -moz-transform: rotate(45deg) translate3d(5px, 5px, 0); transform: rotate(45deg) translate3d(5px, 5px, 0); } .side-menu.active .bar-icon:nth-child(2) { opacity: 0; } .side-menu.active .bar-icon:nth-child(3) { -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0); -o-transform: rotate(-45deg) translate3d(5px, -5px, 0); -ms-transform: rotate(-45deg) translate3d(5px, -5px, 0); -moz-transform: rotate(-45deg) translate3d(5px, -5px, 0); transform: rotate(-45deg) translate3d(5px, -5px, 0); } .side-menu.static .nav-trigger { display:none; } .side-menu.left .menu-icon { float:right; padding-right: 15px; padding-top:3px; } .side-menu.right .menu-icon { float:left; padding-left: 0px; padding-top:3px; margin-left:-5px; } .wrap-left { margin-left:70px; } .wrap-right { margin-right:70px; } .smo-left { padding-left:250px; } .smo-right { padding-right:250px; } } @media (max-width: 991px) { .side-menu .collapsing-nav { border:0; } .side-menu .nav-trigger { display:none; } .side-menu .nav.navbar-nav > li > a{ color: #fff; font-size:13px; } .side-menu .nav.navbar-nav > li > a:hover{ color: #009c77; } .side-menu .nav.navbar-nav > li > ul { } .side-menu .nav.navbar-nav > li > ul > li > a{ color: #fff; font-size:12px; } .side-menu .nav.navbar-nav > li > ul > li > a:hover, .side-menu .nav.navbar-nav > li > ul > li > a:focus{ color: #009c77; background-color:transparent; } .side-menu .nav.navbar-nav > li > a{ color: #fff; } .side-menu .nav.navbar-nav > li > a > i{ float:right; } .side-menu .nav > li > .menu-dropdown { list-style:none; padding-left:0; } .side-menu .nav > li > .menu-dropdown > li { border-bottom: 1px solid #333; margin-left:15px; } .side-menu .nav > li > .menu-dropdown > li:last-child { border-bottom: 0; } .side-menu .nav > li > .menu-dropdown > li > a { line-height:20px; display: block; padding:10px 15px 10px 25px; clear: both; font-weight: 400; line-height: 20px; color: #333; white-space: nowrap; } .menu-container { left: 70px; } .side-menu .menu-icon { display:none; } } /******************************************************************** "To" Top Arrow & Floating Contact Form ********************************************************************/ .floating-contact { display:block; z-index:9999; width: 40px; height: 40px; position: fixed; bottom: 25px; right: 25px; background-color: #222; opacity:0.6; transition: right .3s ease; } .floating-contact.left { left: 25px; transition: left .3s ease; } .floating-contact.active { right: 75px; } .floating-contact.left.active { left: 75px; } .floating-contact-panel { display:none; z-index:9999; position:fixed; bottom:80px; right:25px; width:250px; background-color:#eee; padding:20px 5px; transition: right .3s ease; -webkit-box-shadow: -7px -1px 21px -5px rgba(0,0,0,0.19); -moz-box-shadow: -7px -1px 21px -5px rgba(0,0,0,0.19); box-shadow: -7px -1px 21px -5px rgba(0,0,0,0.19); } .floating-contact-panel.left { left:25px; transition: left .3s ease; } .floating-contact-panel.active { right: 75px; } .floating-contact-panel.left.active { left: 75px; } .floating-contact-panel:after{ top: 100%; left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: #eee; border-width: 10px; margin-left:-32.5px } .floating-contact-panel.left:after{ margin-left:-237.5px } .floating-contact-panel .form-md .form-text-area { height: 80px; } .floating-contact-panel .form-response { margin-top: 15px; padding: 10px; text-align: center; font-size: 13px; font-weight: 600; } .to-top { display:block; z-index:9999; width: 40px; height: 40px; position: fixed; bottom: 25px; right: -75px; background-color: #222; opacity:0.6; transition: right .3s ease; } .to-top.active { right: 25px; } .to-top.left { left: -75px; transition: left .3s ease; } .to-top.left.active { left: 25px; } .to-top .icon { color:#fff; font-size: 30px; padding: 5px 10px; } .floating-contact .icon { color:#fff; font-size:16px; padding: 12px; } .to-top:hover, .floating-contact:hover { opacity:1; } /******************************************************************** One Pager ********************************************************************/ .one-page-menu .section { padding-top: 50px; } a.jump.jump-slider { font-size:50px; background-color: #fff; padding: 0 20px; opacity: 0.7; color: #333; } a.jump.jump-slider-dark { font-size:50px; background-color: #000; padding: 0 20px; opacity: 0.7; color: #fff; } a.jump.jump-slider:hover, a.jump.jump-slider-dark:hover { opacity: 1; } .one-pager.push { padding-top: 100px; } .one-page-intro-jump { position:absolute; bottom:15px; left:0; right:0; text-align:center; animation: bobble 2s infinite; -webkit-animation: bobble 2s infinite; } .one-page-intro-jump a:hover { opacity:1; } .one-page-intro-jump .intro-center { display:inline-block; } @keyframes bobble { 0% { bottom:15px; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } 50% { bottom:25px; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; } 100% { bottom:15px; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } } /******************************************************************** Split Screen ********************************************************************/ #multiscroll-nav span { width: 10px; height:10px; } .light-bullets #multiscroll-nav span { border: 1px solid #fff; } .light-bullets #multiscroll-nav li .active span { background: #fff; } .ms-tableCell { padding:50px; } .ms-section-left{ background-position: right top !important; background-repeat: no-repeat; } .ms-section-right{ background-position: left top !important; background-repeat: no-repeat; } @media (max-width: 991px) { .ms-left { width: 100% !important; z-index: 10; } .ms-section-left{ background-position: center; background-size: cover; } .ms-right { width: 100% !important; z-index: 1; } } /* ========================================================================== Page Top - Breadcrumbs ============================================================================= */ .page-top, .page-top-light { background-color: #333; border-bottom: 5px solid #009c77; margin-bottom: 100px; min-height: 50px; padding: 30px 0 35px 0; position: relative; text-align: left; } .page-subtitle { margin-bottom:0; } .page-top .page-subtitle { color: #999; } .page-top-light { background-color: #f6f6f6; } .page-top-light .page-subtitle { color: #333; } .page-top.no-breadcrumb-top { border-bottom: none; margin-bottom: 0; } .page-top-grey { background-color: #f6f6f6; padding: 10px 0; } .page-top-grey-bottom { background-color: #f6f6f6; border-bottom: 5px solid #009c77; padding: 10px 0; margin-bottom: 35px; } .no-pt-heading { border-bottom: 3px solid #009c77; border-top: none; margin-bottom: 35px; } .page-top ul.breadcrumb, .page-top-light ul.breadcrumb, .page-top-grey ul.breadcrumb, .page-top-grey-bottom ul.breadcrumb { background: none; margin: 3px 0 0; padding: 0; font-size:13px; } ul.breadcrumb a { color:#999; } .page-top-light ul.breadcrumb a, .page-top-grey ul.breadcrumb a, .page-top-grey-bottom ul.breadcrumb a { color:#333; } .page-top ul.breadcrumb > li, .page-top-light ul.breadcrumb > li, .page-top-grey ul.breadcrumb > li, .page-top-grey-bottom ul.breadcrumb > li { text-shadow: none; } .page-top ul.breadcrumb.b2, .page-top-light ul.breadcrumb.b2, .page-top-grey ul.breadcrumb.b2, .page-top-grey-bottom ul.breadcrumb.b2 { position: absolute; top: 40%; right:15px; margin:0; } .page-top .page-title, .page-top-light .page-title { color: #FFF; display: inline-block; font-weight: 200; margin: 0; max-height: 37px; line-height: 46px; padding: 0; position: relative; font-size: 24px; letter-spacing: 1px; text-transform: uppercase; } .page-top-light .page-title { color: #333; } /* ========================================================================== Page Custom Headers ============================================================================= */ section.page-custom-header { padding: 100px 0; margin-top: 0; } .page-custom-header.with-overlay { padding: 0; } .page-custom-header .subtitle { text-transform: uppercase; font-weight: 600; word-spacing: 5px; } .page-custom-header h1, .page-custom-header h2, .page-custom-header h3, .page-custom-header h4, .page-custom-header h5, .page-custom-header h6 { margin: 0 } .page-custom-header .fancy-heading { margin-bottom: 30px; } .page-custom-header .breadcrumb { background-color: transparent; margin: 0 0 -5px; padding: 0 15px; } .page-custom-header .breadcrumb.light a { color: #fff; } .page-custom-header .breadcrumb.light>.active, .page-custom-header .breadcrumb.light a:hover { color: #ccc; } /* ========================================================================== Sidebars ============================================================================= */ ul.category-list { margin:0px; padding-left: 0px; font-size:13px; } ul.category-list li { border-bottom: 1px solid #e0dede; padding:10px 0; } ul.category-list li a { color:#333; font-size:13px; } ul.category-list li a:hover { color:#009c77; } ul.category-list li a:before { font-family: FontAwesome; content: '\f105 '; margin-right: 5px; font-weight:bold; } ul.category-list li:first-child { padding-top: 0px; } ul.category-list li:last-child { padding-bottom: 0px; border-bottom:none; } ul.category-list li i { padding-right: 5px; } .theme-form .form-control{ border-radius: 0px; } ul.category-list-dark li { border-color:#333; } ul.category-list-dark li a { color:#999; } /*Sidebar Links*/ .sidebar-border-right { border-right: 1px solid #e0dede; } .sidebar-border-left { border-left: 1px solid #e0dede; text-align: right; } .sidebar-border-left.sidebar-links { padding-left: 0; } .sidebar-links ul.category-list li a:before { display:none; } .sidebar-links ul li { border-bottom: 1px solid #e0dede; } .sidebar-links ul li:first-child { border-top: 1px solid #e0dede; padding-top: 10px; } .sidebar-links ul li:last-child { border-bottom: 1px solid #e0dede; padding-bottom: 10px; } .sidebar-links ul li a { color: #747474; } .sidebar-border-right.sidebar-links ul li.active { border-right: 3px solid #009c77; } .sidebar-border-left.sidebar-links ul li.active { border-left: 3px solid #009c77; } .sidebar-links ul li.active a{ color: #009c77; font-weight:600; } .sidebar-border-right.sidebar-links-dark, .sidebar-border-left.sidebar-links-dark, .sidebar-border-left.sidebar-links-dark, .sidebar-links-dark ul.category-list li a:before, .sidebar-links-dark ul li, .sidebar-links-dark ul li:first-child, .sidebar-links-dark ul li:last-child { border-color: #333; } .sidebar-links-dark ul li a { color:#999; } /* ========================================================================== Sticky Element ============================================================================= */ .stickTop { position:fixed; top:80px; z-index:9999; } .main-nav span.menu-label { float:right; color:#fff; text-transform: uppercase; font-weight: 600; font-size: 11px; padding-left:5px; padding-right:5px; line-height:20px; margin: -1px 0 0; } .main-nav.nav-highlight span.menu-label { margin-top:-2px; } /******************************************************************** SiteMap ********************************************************************/ .sitemap-container { display:table; width:100%; margin-bottom:20px; } .sitemap-container .cell { display:table-cell; border-right:1px solid #ddd; float:none; } .sitemap-container .cell.cell-last { border-right:none; } .sitemap-container .cell .heading { font-size:16px; text-transform:uppercase; color:#000; font-weight:600; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 2px solid #333; } .sitemap-container .cell li>a p { padding-bottom:10px; border-bottom:1px solid #ddd; font-size:13px; } /******************************************************************** Documentation ********************************************************************/ .doc h1 { border-bottom: 1px solid #ddd; margin-left: 15px; margin-right:15px; margin-bottom:15px; padding-bottom:15px; font-size:24px; font-weight:700; } .doc h1.title { font-size:26px; font-weight:800; color:#fff; } .doc span.code-block { background-color:#009c77; color:#fff; padding-left:10px; padding-right:10px; } .doc span.code-block.error { background-color:#DC2528; } .doc span.code-block.highlight { padding:5px 10px; } .doc p.sub-heading { font-weight:600; font-size:16px; margin-top: 20px; } .doc p { padding-left:15px; padding-right:15px; font-size:13px; } .doc .content { background-color:#fff; height:100%; padding:0 15px 0 25px; } .doc .content.intro { background:url(../Documentation/images/wild_oliva.png) top left repeat; color:#ddd; padding:50px 15px 50px 25px; } .doc .has-code { padding-right:30px; border-right:0; } .doc .code { color:#ddd } .doc .menu-dropdown { list-style:none; } .doc .document-base { background-color:#222; padding-left:250px; } .doc pre { background-color:transparent; color: #ddd; border-radius:0; margin-bottom:0; } .doc ul.documentation-list li { padding-bottom:5px; font-size: 13px; } .doc ul.steps li { padding-bottom:15px; } .doc .row.special-note { margin-bottom: 50px; } /******************************************************************** Top Sliding Panel ********************************************************************/ .sliding-panel { position:absolute; width:100%; height: auto; background-color:#333; z-index:99999; } .sliding-panel .sliding-panel-content{ display:none; padding-top:50px; padding-bottom:50px; color:#fff; } .sliding-panel .panel-icon { position:absolute; width: 0; height: 0; border-top: 50px solid #333; } .sliding-panel .panel-icon.left { left:0; border-right: 50px solid transparent; } .sliding-panel .panel-icon.right { right:0; border-left: 50px solid transparent; } .sliding-panel .panel-icon a { position:absolute; top: -50px; } .sliding-panel .panel-icon.right a { right:0; } .slide-panel { padding:15px; display:inline-block; position:absolute; right:5%; top:0; } .sliding-panel .panel-icon.left .slide-panel { left:5%; } .sliding-panel .panel-trigger-button { cursor:pointer; } .slide-panel::before { position: absolute; top: 50%; left: 50%; width: 15px; height: 1px; background: #fff; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .slide-panel::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 15px; background: #fff; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .slide-panel.panel-close::before { top:50%; opacity: 0.5; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } .slide-panel.panel-close::after { top:50%; opacity: 0.5; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); } /******************************************************************** Custom Form Validation ********************************************************************/ #errors { padding:0; } #errors p { margin:0; } #errors li { list-style-type: none; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; background-color: #f2dede; border-color: #ebccd1; color: #a94442; } #error { border-left: 5px solid #a94442; padding-left: 15px; } #error li { list-style-type: none; } #error li:before { content: '\b7\a0'; } /*Footer Help Blocks*/ .footer form .form-group.has-error .help-block { color: #f07373; } .footer.footer-theme form .form-group.has-error .help-block { color: #ae0000; } .footer.footer-light form .form-group.has-error .help-block { color: #a94442; } /*form-md & form-big Feedback Icons*/ .form-md .has-feedback .form-control-feedback { top: 3px; right: 0; } .form-big .has-feedback .form-control-feedback { top: 10.5px; right: 0; } .form-md .feedback-text-area.has-feedback .form-control-feedback, .form-big .feedback-text-area.has-feedback .form-control-feedback { top: 0px; right: 0; } /*Form Response Message*/ .form-response { display:none; padding:15px; } .form-response.success { color: #468847; border: 1px solid #468847; } .form-response.error { color: #b94a48; border: 1px solid #b94a48; } /*Form Loader*/ .form-loader { display:none; padding-left: 10px; } /******************************************************************** Vertically Centred Divs ********************************************************************/ @media (min-width:992px) { .vertical-center-box { display: -webkit-box; -webkit-box-align: center; display: flex; -moz-box-align: center; display: -ms-flexbox; -ms-flex-align: center; display: box; box-align: center; -webkit-align-items: center; align-items: center; } } @media (min-width:768px) and (max-width:991px) { .vertical-center-box-tablet { display: -webkit-box; -webkit-box-align: center; display: flex; -moz-box-align: center; display: -ms-flexbox; -ms-flex-align: center; display: box; box-align: center; -webkit-align-items: center; align-items: center; } } /******************************************************************** Theme Background Section ********************************************************************/ .theme-background-section { background-size: cover; background-position: top left; position:relative; background-repeat; no-repeat; } .theme-background-section .video-bg-div { display:table-row-group; } .theme-background-section .video-bg { position: absolute; right: 0; bottom: 0; top: inherit; min-width: 100%; min-height: 100%; width: auto; height: auto; background-size: cover; } .theme-background-section .map { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; } .theme-background-section.parallax { background-attachment: fixed; } .theme-background-section.fs-overlay:before { position:absolute; top:0; left:0; width:100%; height: 100%; content:''; background: rgba(0,0,0,0.6); z-index:1; } .theme-background-section.fs-overlay.light:before { background: rgba(255,255,255,0.75); } .theme-background-section .content-container { display: table; table-layout: fixed; width: 100%; height: 100%; overflow: hidden; position: relative; z-index:2; } .theme-background-section .content-inner-container { display: table-cell; vertical-align: middle; max-width: 450px; margin: -150px auto 0 auto; display: table-cell; vertical-align: middle; padding: 100px 8%; } .theme-background-section .content-inner-container.top { vertical-align: top; } .theme-background-section .content-inner-container.bottom { vertical-align: bottom; } /******************************************************************** Widgets ********************************************************************/ /*Contact*/ .contact { list-style: none; margin: 0; padding: 0; font-size:13px; } .contact i { display: block; float: left; font-size: 1.2em; width: 16px; } .contact span { display: block; padding-left: 25px; } /*Spam*/ .spam { font-size: 12px; } /*Flickr*/ .flickr_badge_image { margin:0px; display:inline; } .flickr_badge_image img { border: 0px solid #666666 !important; margin: 0 3% 3% 0; width: 30%; height: auto; } #flickr_badge_wrapper { width:100%; } /*Instagram*/ #widget-instagram img { width:33.33%; } /*Dribbble*/ ul.shots { list-style:none; padding:0; margin:0; } ul.shots li{ display:inline; } ul.shots img { width:33.33%; } /*Popular Posts & Comments*/ .popular-posts, .popular-comments { margin: 0px; padding: 0px; } .popular-posts li, .popular-comments li { list-style: none; margin: 20px 0; clear: both; display: block; min-height: 60px; } .popular-posts li p{ font-style: italic; font-size: 12px; } .popular-posts li img, .popular-comments li img { float: left; margin-right: 10px; width: 60px; height: 60px; } .popular-comments a { color: #000; font-size: 13px; } .popular-comments a:hover { color: #009c77; } .popular-comments h5 { font-weight: bold; } .popular-comments p { font-style: italic; } /*Tags*/ .page-tags { border: 1px solid #009c77; line-height:2.5; color:#333; font-weight:600; } a:hover .page-tags { background-color:#009c77; color:#fff; } /*Dark Theme Tags*/ .page-tags-dark { border: 1px solid #fff; line-height:2.5; color:#fff; font-weight:600; } a:hover .page-tags-dark { background-color:#009c77; border-color:#009c77; color:#fff; } /******************************************************************** Promo Bar ********************************************************************/ .promo-bar { height:40px; background-color: #009c77; width:100%; padding:12px; } .promo-bar .start { color: #fff; float:left; margin-right:5px; font-size: 13px; font-weight: 600; } .promo-bar .text { color: #eee; float:left; font-size: 13px; margin-right:5px; } .promo-bar .text.promo-carousel { width: 750px; } .promo-bar .promo-link { color: #fff; float:left; font-size: 13px; font-weight: 600; } .promo-bar .promo-link a{ color: #fff; font-weight: 600; } .promo-bar .promo-close { color:#fff; float:right; font-size:13px; padding-right:8px; } /* ========================================================================== Trending News Rotator ============================================================================= */ .trending-carousel .t-heading { text-transform:uppercase; font-weight:600; color:#009c77; padding:15px 0 5px; border-bottom:3px solid #009c77; } .trending-carousel .t-news a { font-size:13px; color:#777; } .trending-carousel .t-news a:hover { color:#009c77; } .owl-carousel.t-news { padding:13px 0 2px; border-bottom: 3px solid #eee; } .owl-carousel.t-news .item { padding:0 15px; } /*Trending -VTicker*/ .trending-vticker { padding: 10px; width:100%; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; color: #009c77; font-size:13px; } .trending-vticker .container { height:18px; } .trending-vticker #dateToday { float: right; width: auto; padding-right: 5px; font-weight: 600; text-transform:uppercase; } .trending-vticker .t-heading { float:left; background-color: #009c77; color: #fff; font-weight:600; margin-top: -10px; margin-right:10px; padding: 10px; text-transform:uppercase; } .trending-vticker .t-news { height:20px; overflow:hidden; } /******************************************************************** Career ********************************************************************/ .company-name { font-weight: 600; } .career-filter .job-search-form { color: #fff; } .job-search-form .btn-search { margin-top: 25px; width: 100%; } .search-count { text-align: center; font-size: 30px; margin-top: 15px; } .search-count .count { font-size: 36px; background-color: #009c77; color: #fff; padding: 10px; margin-right: 10px; } .table.table-career { margin-top: 20px; } .table-career thead { background-color: #333; color: #fff; text-transform: uppercase; } .table-career>thead>tr>th { border-color: #333; } .table.table-career .no-border { border-top: none; } .table.table-career tbody>tr>td:last-child { text-align: center; } .table.table-career tbody>tr>td:last-child:hover { background-color: #333; } .table.table-career tbody>tr>td:last-child:hover a { color: #fff; } .table.table-career-2 { margin-bottom: 50px; background-color: #fbfbfb; border: 1px solid #eee; } .table.table-career-2 tbody>tr>td { padding-left: 15px; padding-right: 15px; } .table.table-career-2 tbody>tr>td { border-color: #eee; } .table.table-career-2 tbody>tr:first-child>td { border-top: none; } .table.table-career-2 tbody>tr>td:first-child { width: 25%; } .table.table-career-2 tbody>tr:last-child { background-color: #333; color: #fff; } .table.table-career-2 tbody>tr:last-child a{ color: #fff; } .table.table-career-2 tbody>tr:last-child a:hover{ text-decoration: underline; } .hidden-field { display:none; } .container.career-apply { background-color: #f9f9f9; border-left: 1px solid #eee; border-right: 1px solid #eee; padding-left:30px; padding-right:30px; } .form-section { margin-bottom: 50px; border-bottom: 1px solid #eee; padding-bottom: 50px; } .single-line .form-control-feedback { position: static; display: inline-block; float:right; margin-top: -35px; } /* ========================================================================== Portfolio ============================================================================= */ /*Filter Style*/ .portfolioFilter a { margin: 20px 10px 50px 0; display: inline-block; padding: 5px 10px; background-color: transparent; color: #333; border: 1px solid #333; } .portfolioFilter a:last-child { margin-right: 0; } .portfolioFilter a:hover, .portfolioFilter a:active, .portfolioFilter a:focus, .portfolioFilter a.current { color: #fff; background-color: #009c77; border-color: #009c77; } .text-light .portfolioFilter a { border: 1px solid #fff; } .text-light .portfolioFilter a:hover, .text-light .portfolioFilter a:active, .text-light .portfolioFilter a:focus, .text-light .portfolioFilter a.current { color: #fff; background-color: #009c77; border-color: #009c77; } .col-2 figure, .col-3 figure, .col-4 figure { margin-bottom: 30px; } /* Common style */ .portfolio figure { position: relative; display: inline-block; overflow: hidden; background: #009c77; text-align: center; cursor: pointer; } .portfolio figure img { position: relative; display: block; opacity: 0.8; } .portfolio figure figcaption { color: #fff; text-transform: uppercase; font-size: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: 'Montserrat', sans-serif; } .portfolio figure figcaption::before, .portfolio figure figcaption::after { pointer-events: none; } .portfolio figure figcaption{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .portfolio figure h3,.portfolio figure h4, .portfolio figure h5 { word-spacing: -3.6px; font-weight: 300; } .portfolio figure h3, .portfolio figure h4, .portfolio figure h5, .portfolio figure p { margin: 0; } .portfolio figure p { letter-spacing: 1px; font-size: 68.5%; line-height: 17px; } .fig-caption-center { display: table; width: 100%; height: 100%; } /* Effect 1 */ figure.effect-1 figcaption { top: auto; bottom: 0; padding: 16px; height: 67.5px; background: #fff; color: #3c4a50; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } figure.effect-1 h3, figure.effect-1 h4, figure.effect-1 h5 { float: left; line-height: 33px; word-spacing:2px; width: auto; display: inline-block; } figure.effect-1 figcaption > span { float: right; line-height: 15px; margin-right: -10px; } figure.effect-1 figcaption > span:last-child { margin-right: 0; } figure.effect-1 h3, figure.effect-1 h4, figure.effect-1 h5, figure.effect-1 figcaption > span > a > i { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,200%,0); transform: translate3d(0,200%,0); } figure.effect-1 figcaption > span > a > i::before { display: inline-block; padding: 8px 10px; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } figure.effect-1:hover img { opacity: 0.5; } figure.effect-1:hover figcaption, figure.effect-1:hover h3, figure.effect-1:hover h4, figure.effect-1:hover h5, figure.effect-1:hover figcaption > span > a> i{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } figure.effect-1:hover h3, figure.effect-1:hover h4, figure.effect-1:hover h5 { -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } figure.effect-1:hover figcaption > span:nth-child(4) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-1:hover figcaption > span:nth-child(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } figure.effect-1:hover figcaption > span:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } /*4 Column*/ .col-4 figure.effect-1 figcaption > span { font-size: 15px; } /*5 Column Grid*/ .grid-5 figure.effect-1 h3, .grid-5 figure.effect-1 h4, .grid-5 figure.effect-1 h5 { font-size:15px; } .grid-5 figure.effect-1 figcaption > span { margin-right: -5px; } .grid-5 figure.effect-1 figcaption > span:last-child { margin-right: 0; } .grid-5 figure.effect-1 figcaption { height: 63px; padding: 18px; } .grid-5 figure.effect-1 figcaption > span > a > i::before { padding: 8px 5px; } /* Effect 2 */ figure.effect-2 { background: #009c77; } figure.effect-2 img { opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-2 figcaption::before, figure.effect-2 p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0); transform: scale(0); } figure.effect-2 p, figure.effect-3 .fig-caption-center > div { display: table-cell; vertical-align: middle; } figure.effect-2:hover figcaption::before, figure.effect-2:hover p { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-2:hover img { opacity: 0 !important; } figure.effect-2 span .btn { margin-bottom: 10px; } .grid-5 figure.effect-2 span.tags { line-height: 0px; font-size: 10px; } .grid-5 figure .btn { font-size: 12px; } /* Effect 3 */ figure.effect-3 img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.12); transform: scale(1.12); opacity: 0.5; } figure.effect-3 { background: #333; } figure.effect-3:hover img { opacity: 0.9; -webkit-transform: scale(1); transform: scale(1); } figure.effect-3 h3 { letter-spacing: 5px; color:#fff; font-weight: bold; } figure.effect-3 p { text-transform: none; letter-spacing: 0; } /* Portfolio Grid */ ul.grid, ul.grid-4, ul.grid-5{ margin-bottom: -1px; overflow: hidden; } .grid li, .grid-4 li, .grid-5 li { float: left; } .portfolio figure { display: block; } .grid li:nth-child(odd) { clear: left; } /* Portfolio - Masonry */ .masonry-col { max-width: 1170px; margin: 0 auto; } .masonry-grid.portfolio { margin: 0 0 -1px; } .masonry-grid .item { float: left; width: 25%; } .masonry-col .item { width: 32.7%; padding-bottom: 10px; } .item span.masonry-effect { visibility: hidden; background-color: #009c77; position: absolute; bottom: 0; left: 0; width: 100%; line-height: 50px; margin-bottom: 20px; } .masonry-grid .item span.masonry-effect { visibility: hidden; background-color: #009c77; position: absolute; bottom: 0; left: 0; width: 100%; line-height: 40px; margin-bottom: 0; padding: 5px 0; text-align: center; } .item span.masonry-effect a:first-child { margin-right: 10px; } .item span.masonry-effect a:after { display: none; } .item span.masonry-effect a { color: #fff; } .item:hover span.masonry-effect { visibility: visible; } .item:hover img { opacity: 0.7; } /* Portfolio With Excerpt */ .portfolio-excerpt { border:1px solid #eee; margin-bottom:30px; padding-bottom: 15px; text-align:left; } .grid .portfolio-excerpt, .masonry-grid .portfolio-excerpt, .masonry-col .portfolio-excerpt, .owl-carousel .item .portfolio-excerpt { margin-bottom:0; } .portfolio-excerpt figure{ margin-bottom: 25px; } .portfolio-excerpt-heading, .portfolio-excerpt-tag, .portfolio-excerpt-content { padding: 0 15px; } .portfolio-excerpt-heading, .portfolio-excerpt-tag { font-weight: 600; text-transform:uppercase; } .portfolio-excerpt-tag { color:#666; } .portfolio-excerpt-content { color:#999; } /* Single Portfolio Page */ .project-single h2 { padding-top: 15px; color: #009c77; } .project-info { padding-top: 15px; } .project-info h5 { padding-top: 10px; } .project-info p { font-size: 13px; color: #009c77; } .project-info .btn { margin-top: 10px; } .project-info li { font-size: 13px; color: #009c77; } .project-info hr { margin-bottom: 5px; margin-top: 20px; } .project-info-box { background-color:#f9f9f9; border:1px solid #eee; padding: 15px; margin-top:20px; } /* ========================================================================== Blog ============================================================================= */ .post-title { margin:0; text-transform: uppercase; padding-bottom: 20px; letter-spacing: 1px; font-weight: bold; } h4.post-title { padding-bottom: 10px; color: #333; } .post-title a { color: #333; } .post-subtitle { color:#777; padding-bottom:20px; } .post-summary-footer { padding: 20px 0 0; } .blog article { margin: 0 0 50px; } ul.post-data { list-style: none; padding: 5px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 12px; margin: 10px 0; } ul.post-data li { display: inline; padding-left: 5px; } ul.post-data li:first-child { border: none; padding-left: 0px; } ul.post-data li:last-child { padding-right: 0px; } ul.post-data.post-data-v2 { border:none; } ul.post-data.post-data-v2 a.label{ text-transform:uppercase; position: relative; top: -2px; } img.author-img { width:150px; } /*Blog Style - Side*/ .blog-style-side { margin-top: -13px; } .blog-style-side ul.post-data { margin:0px 0px 20px 0px; border: none; } .blog-style-side ul.post-data li { float: none; list-style: none; margin:0px; padding: 5px 0px 0px 0px; border: none; font-size: 12px; display: table; } .blog-style-side .label-theme { font-size: 16px; line-height: 55px; border-left: 5px solid #000; } .blog-style-side ul.post-data i, .blog-style-side ul.post-data span { display: table-cell; } .blog-style-side ul.post-data span { padding-left: 5px; } /*Blog Feature - Stacked Icons*/ .blog-feature { margin: 10px; } .blog-feature .blog-feature-text { padding-left: 90px; top: 0; text-align: left; color: #333; } .blog-feature.blog-feature-small .blog-feature-text { padding-left: 80px; } .blog-feature.blog-feature-large .blog-feature-text { padding-left: 110px; } .blog-feature .post-title { margin-top: 0; padding-bottom: 0; } .calendar-text { margin-top: 4px; } .stacked-title { font-weight:600; } .stacked-icons { text-align: center; color: #fff; float: left; background-color: #009c77; display: inline-block; padding: 20px 10px 15px; } .stacked-icons-dark { background-color:#222; } .stacked-title-dark a { color:#333; } .stacked-icons-light { background-color:#eee; color:#333; } .blog-feature-small .stacked-icons { padding-bottom: 0; } .blog-feature-large .stacked-icons { padding: 20px 10px 25px; } .fa-stack { margin-bottom: 40px; } /*Block Blog*/ .blog article.blog-style-block { border:1px solid #eee; margin-bottom: 50px; padding-top:30px; } .blog-style-block img { padding-bottom:20px; } .blog-style-block .post-summary-footer .btn { margin-bottom:30px; } .blog-block { padding: 0 30px; } .blog-style-block .block-data { background-color:#f6f6f6; border-top:1px solid #eee; color:#999; margin:0; } .blog-style-block .block-data a { color:#999; opacity:1; display:block; margin-top:15px; padding-bottom:5px; } .blog-style-block .block-data a:hover { opacity:0.7; } .block-data-col { border-right:1px solid #eee; } .block-data-col:last-child { border-right:none; } .masonry-grid.masonry-blog.blog-style-block .item { box-shadow:none; } /*Masonry Blog*/ .masonry-grid { margin: 0 -15px -30px; } .masonry-grid.masonry-blog .item{ width: 33.33%; } .masonry-grid.masonry-blog .item .blog-style-block{ border: 1px solid #ddd; margin: 0 15px 30px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .masonry-grid.masonry-blog .item img.post-images { padding:0 15px; } .masonry-grid.masonry-blog .blog-block { padding: 30px 30px 0; } .masonry-grid.masonry-blog .item .masonry-blog-content { padding:15px 15px 30px; } .masonry-grid.masonry-blog.masonry-blog-big { margin: 0 -25px -50px; } .masonry-grid.masonry-blog.masonry-blog-big .item{ width: 50%; } .masonry-grid.masonry-blog.masonry-blog-big .item .blog-style-block{ margin:25px; } .masonry-blog .title-bg { padding-bottom: 0; } .masonry-blog ul { font-size: 12px; } .masonry-grid.masonry-blog.masonry-blog-big .item img { padding:0 25px; } .masonry-grid.masonry-blog.masonry-blog-big .item .masonry-blog-content { padding:25px 25px 50px; } /* ========================================================================== Timeline ============================================================================= */ .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #f6f6f6; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li.date, .timeline > li.year { margin-bottom: 100px; } .timeline > li > .timeline-panel { width: 40%; float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel.left { margin-left: 50px; } .timeline > li > .timeline-panel.right { margin-right: 50px; } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #009c77; z-index: 100; } .timeline > li > .timeline-badge p { font-size: 14px; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-body.blog .post-summary-footer{ margin-bottom: 0; } .timeline-body.blog ul.post-data li:first-child { padding-bottom: 0; } .timeline-body.blog article { margin: 0; } .timeline-body figure.effect-2 figcaption { padding: 2em; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .date .timeline-badge, .load-more .timeline-badge { width: 100px !important; background-color: #fff !important; color: #000 !important; font-size: 12px !important; left:48% !important; font-weight: bold; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .year .timeline-badge { background-color: #000 !important; color: #fff !important; font-size: 14px !important; line-height: 52px !important; font-weight: bold; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; } /* ========================================================================== Shop ============================================================================= */ /*Front Page*/ .product h2 { margin-bottom: 0px; font-weight: bold; } .result { color: #999; margin-bottom: 25px; } .product .dropdown { margin-bottom: 35px; } .product .dropdown .btn { font-size:13px; } .product .dropdown .btn i.fa { margin-left: 5px; } .product .dropdown ul.dropdown-menu { font-size:13px; padding:0; } .product .dropdown ul.dropdown-menu>li>a { padding:5px 20px; } .product .product-thumbnail { border: 1px solid #ddd; margin: 0 auto 50px; max-width: 500px; height: auto; background-color: #fff; } .product .product-thumbnail .product-info { padding: 0 15px; } .product-info h3 { font-size: 16px; margin-top: 15px; font-weight: bold; } .product-info p { margin-bottom: 15px; } .product-info .price { color: #009c77; font-weight:600; font-size:14px; } strike.sale-strike { color: #999; font-size: 13px; } .product a { color: #333; } .product a:hover { color: #009c77; } .product-image { position: relative; } .thumbnail-btns { position: absolute; bottom: 0; width: 100%; display: table; } .product-image img { opaacity:1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; -webkit-transform: translateX(0); } .product-image:hover img { opacity: 0.5; } .product-image:hover .thumbnail-btns a { display: table-cell; color:#fff; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .product-image .thumbnail-btns a { display:none; color: #fff; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } /*Sale, New, Top Labels*/ .label-tags { position: absolute; font-size: 12px; font-weight: 600; z-index: 10; padding: 15px; line-height: 15px; } /*Filters*/ .shop h5 { text-transform: uppercase; font-weight: bold; } .shop .checkbox label { font-size: 12px; } .shop .radio label { font-size: 12px; } .offers { border: 1px solid #009c77; padding: 5px 10px 5px 10px; background-color: #009c77; } .shop p { font-size: 12px; } .filters-colors span { box-shadow: 1px 1px 1px #CCC; display: inline-block; height: 15px; margin-right: 5px; margin-top: 3px; vertical-align: top; width: 15px; } .multicolor-code { background: -moz-linear-gradient(-45deg, #f79999 0%, #9f98f7 17%, #f49af4 35%, #99edf7 50%, #99f59e 68%, #f5f49a 84%, #f7bb99 100%); background: -webkit-gradient( linear, left top, right bottom, color-stop(0%,#f79999), color-stop(17%,#9f98f7), color-stop(35%,#f49af4), color-stop(50%,#99edf7), color-stop(68%,#99f59e), color-stop(84%,#f5f49a), color-stop(100%,#f7bb99)); background: -webkit-linear-gradient(-45deg, #f79999 0%, #9f98f7 17%, #f49af4 35%, #99edf7 50%, #99f59e 68%, #f5f49a 84%, #f7bb99 100%); background: -o-linear-gradient(-45deg, #f79999 0%, #9f98f7 17%, #f49af4 35%, #99edf7 50%, #99f59e 68%, #f5f49a 84%, #f7bb99 100%); background: -ms-linear-gradient(-45deg, #f79999 0%, #9f98f7 17%, #f49af4 35%, #99edf7 50%, #99f59e 68%, #f5f49a 84%, #f7bb99 100%); background: linear-gradient(135deg, #f79999 0%, #9f98f7 17%, #f49af4 35%, #99edf7 50%, #99f59e 68%, #f5f49a 84%, #f7bb99 100%); } .filters-size a{ border: 1px solid #A9A9A9; border-radius: 3px 3px 3px 3px; box-shadow: 2px 2px 0 #ddd; color: #222; display: inline-block; float: left; font-size: 11px; margin: 0 6px 8px 0; padding: 2px 8px; text-transform: uppercase; } .filters-size a.disabled { background-color: #ddd; } /*Shop - Inner Page*/ .product-header { margin-bottom: 20px; } .thumbnail.shop { padding: 20px; border-radius: 0; } .thumbnail.shop .filters-colors { padding-bottom: 15px; } .thumbnail.shop .cart-btn, .thumbnail.shop .save-btn { display: block; text-transform: uppercase; font-weight: bold; } .thumbnail.shop .save-btn { font-weight: normal; } p.size-text { font-size: 10px; } /*Sale Label*/ .sale-label { float: left; margin-right: 5px; } h4.wlabel { margin-top: -2px; } /*Shop Carousel*/ .shop-carousel.theme-default .nivo-controlNav.nivo-thumbs-enabled img { width: 50px; } .shop-carousel .nivo-controlNav a.active img { -webkit-box-shadow: 0 0 1px 1px #009c77; -moz-box-shadow: 0 0 1px 1px #009c77; box-shadow: 0 0 1px 1px #009c77; } /*Counter Button*/ #myform .btn { padding: 1px 6px; } .qty { width: 40px; height: 25px; text-align: center; } input.qtyminus, input.qtyplus { width:25px; height:25px; margin-bottom: 2px; background-color: #009c77; color: #fff; border: 1px solid #009c77; } input.qtyminus:hover, input.qtyplus:hover { opacity:0.9; } .cart-btn { margin-top: 20px; margin-bottom: 20px; } /*Product Information*/ tr.shop-first-row td:first-child, tr.shop-first-row td:last-child{ border-top: none; } .shop-table tr td:last-child { width: 100%; padding-left: 20px; } .table.shop-table { width: auto; max-width: auto; } /*Sidebar Products*/ .sidebar-products .owl-carousel .item { color: #333; } .sidebar-products h5 { margin-top: 20px; } .sidebar-products .name a{ font-weight: bold; text-transform: uppercase; color: #666; } .sidebar-products .name{ margin: 5px 0; } .sidebar-products h5.price { margin: 5px 0 20px; } .sidebar-products h5.price > span { color: #009c77; font-weight: bold; padding-left: 2px; } /*Shopping Cart*/ .cart { margin-top:30px; } .cart .btn.btn-back i { font-size:14px; } table.table-cart { border-collapse: collapse; text-align:center; } table.table-cart > tbody > tr > th { text-align:center; border-top:none; text-transform:uppercase; } table.table-cart > tbody > tr > td { vertical-align:middle; font-size:13px; } table.table-cart { margin-bottom:0; } table.table-cart > tbody > tr > th:first-child { text-align:left; } .cart-item-details { max-width: 150px; margin-right: 7px; } .cart-item { overflow: hidden; zoom: 1; margin: 20px 20px 0 0; text-align:left; } .cart-item .item.thumbnail { width: 56px; height: 72px; margin-right: 10px; border: 0; padding:0; } .cart-item .item.thumbnail img { height: 100%; width: auto; } .cart-item-container { overflow: hidden; float:right; text-align:right; } .cart-item-name { margin: 0 0 5px; font-size:13px; } .cart-item-name a{ color: #333; } .cart-item-name a:hover{ color: #009c77; } .cart-item-brand { margin: 0 0 5px; font-size:13px; } .cart-item-size { margin: 0 0 5px; color: #666; } .cart-item-size span{ font-weight: 600; color: #333; } .cart-item-price { background: #f6f6f6; } .cart-item-quantity { background: #f9f9f9; } .shipping { padding: 10px 5px; margin: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 13px; } .shipping .date { color: #009c77; font-weight: 600; } .cart-review { padding:20px 20px 20px; margin-top:-20px; background-color:#f9f9f9; } .cart-review .inner { padding: 20px; } .cart-review .cart-item { margin-right:0; } .cart-review .heading { padding: 5px 0; margin: 0 15px; color: #333; font-size:14px; border-bottom: 1px solid #ddd; font-weight:600; text-transform:uppercase; } .cart-review .heading.coupon { padding: 0; color:#333; border-bottom:0; } .cart-review a.coupon-close { display:none; } .cart-review .inner.coupon-code { padding: 20px 20px 0; display:none; } .coupon-input { border-radius:0; font-size:13px; } .cart-review .rows { display:inline-block; height: 30px; vertical-align:middle; width: 100% ; font-size:13px; } .cart-review .rows.shipping-cost { color: #2EB031; font-weight:bold; text-transform:uppercase; } .cart-review .btn.btn-cart { width: 100%; font-size:13px; border-radius: 0; margin-top: 10px; } /*Shop Checkout*/ .checkout .panel-icon { padding-right: 8px; color:#009c77; } .checkout .card-type { width: 29.6%; } .checkout .btn-submit { width: 150px; } .checkout .btn-margin { margin-left: 12.5%; } .checkout .btn-left { text-align:left; } .checkout-select { margin-top:20px !important; } .checkout-select p { margin-top:10px; margin-left:20px; font-size:85%; } /* Order Review */ .review-cart-heading { margin: 0; } .review-cart-heading span { width: 100%; text-align: center; background-color: #333; text-transform: uppercase; font-weight: bold; } .cart-review.checkout-review { margin-top: 0; padding-top: 0; padding-bottom: 0; } .cart-review.checkout-review { padding-top: 20px; } .cart-review.checkout-review .cart-item{ border-bottom:1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px; margin-top: 0; font-size: 12px; } .cart-review.checkout-review .cart-item p { margin-bottom: 0; } .cart-review.checkout-review .cart-item .cart-item-name { font-size: 12px; } .cart-review.checkout-review .cart-item .cart-item-brand { font-size: 12px; margin-bottom: 10px; } .cart-review.checkout-review .cart-item .item.thumbnail { width: auto; height: 100px; margin-bottom: 0; margin-top: 0; } .cart-item-container .filters-colors span { margin: 0 0 -1px 2px; } /*Continue Shopping*/ .continue-shopping { padding-left: 0px; padding-right: 0px; padding-bottom: 20px; } .continue-shopping .icon { padding-right: 5px; } /* ========================================================================== Comments ============================================================================= */ .comments ul { padding: 0px; margin-top: 40px; } .comments ul li { list-style: none; padding: 20px; margin-bottom: 40px; border:1px solid #eee; background-color: #fff; } .comments ul li:last-child { margin-bottom:0; } .comments ul li.reply { margin-left: 50px; background-color: #f9f9f9; margin-top: -41px; } .comments ul li img { height: 60px; width: 60px; margin:0px 10px 10px 0px; } .comment-name, .comment-title { font-weight: bold; text-transform:uppercase; } .comment-name { border-right: 2px solid #333; padding-right: 5px; margin-right: 2px; } .comment-name, .comment-date { position:relative; bottom:-18px; } .comment-date { clear: both; color:#777; font-size: 12px; } .comment-reply { float:right; margin-top:25px; } .comment-content { clear:both; padding-top:10px; } /* ========================================================================== Rating ============================================================================= */ .rating { float:left; } .rating:not(:checked) > input { display: none; } .rating:not(:checked) > label { float:right; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:16px; margin-right:2px; line-height:1.2; color:#ddd; } .rating:not(:checked) > label:before { font-family: FontAwesome; content: '\f005 '; } .rating > input:checked ~ label { color: #009c77; } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #009c77; } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color: #009c77; } span.user-rating { display: block; font-size: 12px; } span.user-rating .fa, span.user-rating-big .fa { color: #009c77; } span.user.rating-big { font-size: 14px; } /* ========================================================================== Headings ============================================================================= */ .fancy-heading { margin: 0 0 50px; } /*Bottom - Top Heading Style*/ .btHeading { text-align: center; position: relative; max-width: 100%; width: auto; height: auto; margin-bottom:25px; } .btHeading.bt-md { margin-bottom:30px; } .btHeading.bt-sm { margin-bottom:35px; } .top-heading{ font-size: 49px; color:#333; line-height: 50px; position: absolute; font-weight: 900; letter-spacing: -2px; z-index: 1; top: 40.5%; width: 100%; } .bt-md .top-heading{ font-size: 29px; line-height: 30px; top: 41%; } .bt-sm .top-heading{ font-size: 19px; line-height: 20px; top: 41.5%; } .bottomHeading { font-size: 232px; line-height: 232px; font-weight: 700; color:#747474; opacity: .15; } .bt-md .bottomHeading { font-size: 152px; line-height: 152px; } .bt-sm .bottomHeading { font-size: 92px; line-height: 92px; } .bt-light .top-heading { color:#eee; } .bt-light .bottomHeading { opacity:0.6; } /*Small Line*/ .small-line:after { content: ""; position: absolute; bottom: 0; width: 50px; height: 3px; left: 0; background-color: #009c77; } .small-line.small-line-dark:after { background-color: #333; } .small-line-light { color:#fff; } .small-line.small-line-light:after { background-color: #fff; } .text-center.small-line { margin-left:auto; margin-right:auto; } .text-center.small-line:after { margin-left: -24px; left:50%!important; } .text-right.small-line { margin-left: auto; } .text-right.small-line:after { margin-left: -53px; left: 100%!important; } .small-line { position: relative; padding-bottom: 50px; display:table; } /*Full Line*/ .full-line { border-bottom: 2px solid #009c77; padding-bottom: 25px; } .full-line.full-line-light { border-color:#fff; color:#fff !important; } /*Double Line*/ .full-double-line { border-bottom: 6px double #009c77; padding-bottom: 25px; } .full-double-line.full-double-line-light { border-color:#fff; color:#fff !important; } /*Link With Fade in Background*/ .link-fadeinbg a { border-bottom: 1px solid #009c77; font-weight: 500; padding:0 5px; -webkit-transition: background-color 0.3s, border-color 0.3s; transition: background-color 0.3s, border-color 0.3s; } .link-fadeinbg a:hover, .link-fadeinbg a:focus { border-color: #009c77; background-color: #009c77; color: #fff; } .link-fadeinbg .fancy-heading { margin-bottom: 55px; } /*Bordered*/ .bordered { color: #009c77; display: inline-block; min-height: 37px; line-height: 46px; padding: 5px 20px 5px 20px; border: 5px solid #009c77; } .bordered.bordered-light { border-color:#fff; color:#fff; } /*Double Bordered*/ .double.bordered { border: 5px double #009c77; } .double.bordered.double-light { border-color:#fff; color:#fff; } /*Block*/ .blocked { color: #fff; background-color: #009c77; display: inline-block; min-height: 37px; line-height: 46px; padding: 5px 20px 5px 20px; } .blocked.blocked-light { background-color:#fff; color:#009c77; } /* ========================================================================== Vertical Dividers ============================================================================= */ .vertical-divider-left { border-left: 1px solid #eee; } .vertical-divider-right { border-right: 1px solid #eee; } .vdl-dashed { border-left: 1px dashed #eee; } .vdr-dashed { border-right: 1px dashed #eee; } .vdl-double { border-left: 6px double #eee; } .vdr-double { border-right: 6px double #eee; } .vdl-colored { border-left: 2px solid #009c77; } .vdr-colored { border-right: 2px solid #009c77; } /* ========================================================================== Horizontal Rules ============================================================================= */ hr{ margin-bottom: 100px; margin-top: 100px; } /*Faded*/ hr.faded { clear: both; float: none; width: 100%; height: 1px; border: none; background: #ddd; background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0, rgb(255,255,255)), color-stop(0.1, rgb(221,221,221)), color-stop(0.9, rgb(221,221,221)), color-stop(1, rgb(255,255,255)) ); background-image: -moz-linear-gradient( left center, rgb(255,255,255) 0%, rgb(221,221,221) 10%, rgb(221,221,221) 90%, rgb(255,255,255) 100% ); } hr.light.faded { clear: both; float: none; width: 100%; height: 1px; border: none; background: #ddd; background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0, rgb(34,34,34)), color-stop(0.1, rgb(68,68,68)), color-stop(0.9, rgb(68,68,68)), color-stop(1, rgb(34,34,34)) ); background-image: -moz-linear-gradient( left center, rgb(34,34,34) 0%, rgb(68,68,68) 10%, rgb(68,68,68) 90%, rgb(34,34,34) 100% ); } /*Colored*/ hr.colored { height: 2px; background: #009c77; border-top: none; } /*Double*/ hr.double { padding: 0; border: none; border-top: 4px double #333; color: #333; } /*Dotted*/ hr.dotted { border: 0; background: transparent; border-bottom: 2px dotted #ddd; } /*Dashed*/ hr.dashed { border: 0; background: transparent; border-bottom: 2px dashed #ddd; } /*With Icon*/ .symbol i { display: inline-block; position: relative; top: 1.1em; font-size: 1.5em; background: #fff; padding: 0 0.25em; color: #e1e1e1; } .symbol.symbol-theme i { background: #009c77; } .symbol.symbol-light i { color: #444; background:#222; } .symbol.small i { left: 35%; } .symbol.small.text-right i { left: -35%; } .symbol hr { border-top: 1px solid #e1e1e1; margin-top: 10px; margin-bottom: 40px; } .symbol.symbol-light hr { border-color:#444; } /*Small Horizontal Rules*/ hr.small { width: 25%; height: 2px; } hr.light { border-color:#444; } hr.lighter { border-color:#fff; } /******************************************************************** Modal ********************************************************************/ .modal-content.modal-background { border-radius:0; } .modal-close { position:absolute; top:5px; background-color:transparent; border:none; right:0; color:#333 } button.modal-close i { font-size:20px; } .modal-heading { font-size:24px; font-weight:900; text-transform:uppercase; } /* Modal Centred*/ .modal-dialog-center { margin: 0; position: absolute; top: 50%; left: 50%; } .modal-body { overflow-y: auto; } .modal-footer { margin-top: 0; } /******************************************************************** Google Maps ********************************************************************/ .map { width: 100%; height: 350px; margin-bottom: 20px; } /******************************************************************** Form Styles ********************************************************************/ .form-theme input, .form-theme textarea, .form-theme select { border-radius:0; } .form-control { border-radius: 0; font-size:13px; } #footerNewsletterForm .form-control-feedback { top: 0; right: 55px; } .popover { border-radius:0 !important; } .input-group-addon { border-radius: 0; } .input-group-btn>.btn:hover, .input-group-btn>.btn:focus, .input-group-btn>.btn:active { z-index: 1; } .form-theme .form-text-area { height: 83px; } .form-theme .form-control { box-shadow:none; } .form-theme .form-control:focus { border-color: #009c77; } .has-error .form-control:focus { border-color: #843534; } .has-success .form-control:focus { border-color: #2b542c; } .form-theme input[type="checkbox"], .form-control input[type="checkbox"] { height: auto; } /*White Form*/ .form-white .form-control { background-color: #fff; color: #333; border: 1px solid #fff; } /*Grey Form*/ .form-grey .form-control { background-color: #f6f6f6; color: #000; border: 1px solid #f6f6f6; } /*Dark Form*/ .form-dark .form-control { background-color: #333; color: #eee; border: 1px solid #333; } /*Line Form*/ .form-line .form-control { background-color: transparent; border-bottom: 1px solid #ddd; border-top:transparent; border-left:transparent; border-right:transparent; } .form-line-light .form-control{ color:#fff; } /*Form With Icons*/ .form-theme-icons .input-group-addon{ background-color: #009c77; color: #fff; border: 1px solid #009c77; } .form-light-icons .input-group-addon { background-color: #fff; color: #333; border: 1px solid #ddd; } .form-dark-icons .input-group-addon { background-color: #333; color: #fff; border: 1px solid #333; } /*Big From*/ .form-big .form-control{ height: 55px; font-size:14px; } .form-big .input-group-addon { font-size: 18px; padding: 6px 20px; } .form-big .input-group-btn .btn { padding: 17px 20px; height: 55px; } .form-big .form-text-area { height:125px; } .form-big .form-submit { height: 55px; font-size: 20px; line-height: 40px; } /*Medium Form*/ .form-md .form-control{ height: 40px; } .form-md .input-group-btn .btn { padding: 9px 12px; height: 40px; } .form-md .form-text-area { height: 95px; } .form-md .form-submit { height: 40px; line-height: 25px; } /*Transparent Form*/ .form-theme.form-transparent .form-control, .form-theme.form-transparent .input-group-addon { background-color: transparent; border: 1px solid #fff; color: #fff; box-shadow: none; } .form-theme.form-transparent input::-webkit-input-placeholder, .form-theme.form-transparent textarea::-webkit-input-placeholder, .form-theme.form-line-light input::-webkit-input-placeholder, .form-theme.form-line-light textarea::-webkit-input-placeholder { color: #fff; } .form-theme.form-transparent input:-moz-placeholder, .form-theme.form-transparent textarea:-moz-placeholder, .form-theme.form-line-light input:-moz-placeholder, .form-theme.form-line-light textarea:-moz-placeholder { color: #fff; } .form-theme.form-transparent input::-moz-placeholder, .form-theme.form-transparent textarea::-moz-placeholder, .form-theme.form-line-light input::-moz-placeholder, .form-theme.form-line-light textarea::-moz-placeholder { color: #fff; } .form-theme.form-transparent input:-ms-input-placeholder, .form-theme.form-transparent textarea:-ms-input-placeholder, .form-theme.form-line-light input:-ms-input-placeholder, .form-theme.form-line-light textarea:-ms-input-placeholder { color: #fff; } .form-theme.form-transparent-dark .form-control, .form-theme.form-transparent-dark .input-group-addon { background-color: transparent; border: 1px solid #333; color: #333; box-shadow: none; } .form-theme.form-transparent .fc-right, .form-theme.form-transparent .iga-right, .form-theme.form-transparent-dark .fc-right, .form-theme.form-transparent-dark .iga-right, .form-theme.form-theme .fc-right, .form-theme.form-theme .iga-right { border-right-color: transparent; } .form-control.text-area-normal { height: auto; } /* ========================================================================== Mailchimp Form ============================================================================= */ #mc_embed_signup{background:transparent; clear:left; } #mc_embed_signup .button { background-color:#009c77; padding:6px 12px; border: none; color:#fff; margin-top:5px; } #mc_embed_signup .button:hover { opacity:0.8 !important; } #mc_embed_signup .mc-field-group input { font-size:13px; padding: 7px 13px; width:100%; border: 1px solid #ddd; } #mc_embed_signup .response { margin: 10px 0 5px 0; } #mc_embed_signup #mce-success-response { color: #2b542c; } #mc_embed_signup #mce-error-response { color: #843534; } /* ========================================================================== Buttons ============================================================================= */ .btn:focus, .btn:active:focus, .btn.active:focus { outline: none; } .tp-caption .btn { font-family:'Open Sans'; color:#fff; } .tp-caption .btn:hover { color: #fff !important; } .btn { border-radius: 0px; } .btn:active, .btn.active { box-shadow: none; } .btn-default, .btn-default:focus, .tp-caption .btn-default, .tp-caption .btn-default:focus { color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; } .btn-default:hover, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default, .tp-caption .btn-default:hover, .tp-caption .btn-default:active, .tp-caption .btn-default.active, .open > .tp-caption .dropdown-toggle.btn-default { color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; } .btn-theme, .btn-theme:focus, .tp-caption .btn-theme, .tp-caption .btn-theme:focus { color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; } .btn-theme:hover, .btn-theme:active, .btn-theme.active, .open > .dropdown-toggle.btn-theme, .tp-caption .btn-theme:hover, .tp-caption .btn-theme:active, .tp-caption .btn-theme.active, .open > .tp-caption .dropdown-toggle.btn-theme { color: #fff !important; opacity:0.8 !important; } .btn-theme-inverse, .btn-theme-inverse:focus, .tp-caption .btn-theme-inverse, .tp-caption .btn-theme-inverse:focus { color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; opacity:0.8 !important; } .btn-theme-inverse:hover, .btn-theme-inverse:active, .btn-theme-inverse.active, .open > .dropdown-toggle.btn-theme-inverse, .tp-caption .btn-theme-inverse:hover, .tp-caption .btn-theme-inverse:active, .tp-caption .btn-theme-inverse.active, .open > .tp-caption .dropdown-toggle.btn-theme-inverse { color: #fff !important; background-color: #009c77 !important; border: 1px solid #009c77 !important; opacity:1 !important; } .btn-light, .btn-light:focus, .tp-caption .btn-light, .tp-caption .btn-light:focus { color: #333 !important; background-color: #fff !important; border: 1px solid #fff !important; } .btn-dark, .btn-dark:focus, .tp-caption .btn-dark, .tp-caption .btn-dark:focus { color: #fff !important; background-color: #333 !important; border: 1px solid #333 !important; } .btn-dark:hover, .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark, .tp-caption .btn-dark:hover, .tp-caption .btn-dark:active, .tp-caption .btn-dark.active, .open > .tp-caption .dropdown-toggle.btn-dark { color: #fff !important; } .btn-dark.btn-theme:hover, .btn-light.btn-theme:hover, .btn-dark.btn-theme:active, .btn-light.btn-theme:active, .tp-caption .btn-dark.btn-theme:hover, .tp-caption .btn-light.btn-theme:hover, .tp-caption .btn-dark.btn-theme:active, .tp-caption .btn-light.btn-theme:active { background-color: #009c77 !important; border: 1px solid #009c77 !important; } .btn-hollow:hover, .btn-hollow:active, .btn-hollow.active, .open > .dropdown-toggle.btn-hollow, .tp-caption .btn-hollow:hover, .tp-caption .btn-hollow:active, .tp-caption .btn-hollow.active, .open > .tp-caption .dropdown-toggle.btn-hollow { color: #333 !important; background-color: #fff !important; } .btn-hollow, .btn-hollow:focus, .btn-hollow.hollow-theme:focus, .tp-caption .btn-hollow, .tp-caption .btn-hollow:focus, .tp-caption .btn-hollow.hollow-theme:focus { background-color: transparent !important; border: 1px solid #fff !important; color: #fff !important; } .btn-hollow-dark:hover, .btn-hollow-dark:active, .btn-hollow-dark.active, .open > .dropdown-toggle.btn-hollow-dark, .tp-caption .btn-hollow-dark:hover, .tp-caption .btn-hollow-dark:active, .tp-caption .btn-hollow-dark.active, .open > .tp-caption .dropdown-toggle.btn-hollow-dark { color: #fff !important; background-color: #333 !important; border: 1px solid #333 !important; } .btn-hollow-dark, .btn-hollow-dark:focus, .btn-hollow-dark.hollow-theme:focus, .tp-caption .btn-hollow-dark, .tp-caption .btn-hollow-dark:focus, .tp-caption .btn-hollow-dark.hollow-theme:focus { background-color: transparent !important; border: 1px solid #333 !important; color: #333 !important; } .btn-hollow.hollow-theme:hover, .btn-hollow.hollow-theme:active, .btn-hollow.hollow-theme.active, .open > .dropdown-toggle.btn-hollow.hollow-theme, .tp-caption .btn-hollow.hollow-theme:hover, .tp-caption .btn-hollow.hollow-theme:active, .tp-caption .btn-hollow.hollow-theme.active, .open > .tp-caption .dropdown-toggle.btn-hollow.hollow-theme, .btn-hollow-dark.hollow-theme:hover, .btn-hollow-dark.hollow-theme:active, .btn-hollow-dark.hollow-theme.active, .open > .dropdown-toggle.btn-hollow-dark.hollow-theme, .tp-caption .btn-hollow-dark.hollow-theme:hover, .tp-caption .btn-hollow-dark.hollow-theme:active, .tp-caption .btn-hollow-dark.hollow-theme.active, .open > .tp-caption .dropdown-toggle.btn-hollow-dark.hollow-theme { color: #fff !important; background-color: #009c77 !important; border-color: #009c77 !important; } .btn-hollow-theme, .btn-hollow-theme:focus, .tp-caption .btn-hollow-theme, .tp-caption .btn-hollow-theme:focus { background-color: transparent !important; border: 1px solid #009c77 !important; color: #009c77 !important; } .btn-hollow-theme:hover, .btn-hollow-theme:focus, .btn-hollow-theme:active, .btn-hollow-theme.active, .open > .dropdown-toggle.btn-hollow-theme, .tp-caption .btn-hollow-theme:hover, .tp-caption .btn-hollow-theme:focus, .tp-caption .btn-hollow-theme:active, .tp-caption .btn-hollow-theme.active, .open > .tp-caption .dropdown-toggle.btn-hollow-theme { color: #fff !important; background-color: #009c77 !important; } .btn-full-width { width: 100%; } /* ========================================================================== Dropcaps ============================================================================= */ /*Simple*/ .dropcap { display: block; float: left; font-size: 38px; line-height: 32px; margin: 4px 8px 0 0; color: #009c77; } /*Square*/ .dropcap.dropcap-square { color: #fff; background-color: #009c77; height: 35px; width: 35px; text-align: center; font-size: 24px; line-height: 35px; } /* ========================================================================== Service Boxes ============================================================================= */ .fb-clear { color: #009c77; } .fb-dark { color: #333; } .fb-square { background: #009c77; color: #FFF; display: inline-block; height: 65px; line-height: 65px; position: relative; text-align: center; width: 65px; } .fb-circular { display:block; width:70px; height:70px; border-radius:50px; font-size:30px; color:#fff; line-height:70px; text-align:center; background:#009c77; } .text-center .fb-circular { margin-left: auto; margin-right: auto; } .text-right .fb-circular { margin-left: auto; } /*Service Tile*/ .tile { background-color: transparent; position: relative; margin: 50px 0; } .tile.hover-box { padding: 30px; } .tile p { font-size: 14px; margin: 15px auto; } .tile-title { font-size: 20px; margin: 0; font-weight: bold; } .tile i.fa, .tile img { margin-bottom: 20px; } .tile:hover .fb-circular, .tile:hover .fb-square, .tile.active-tile .fb-circular, .tile.active-tile .fb-square { text-decoration:none; background:#333; } .tile:hover .fb-clear, .tile.active-tile .fb-clear { color: #333; } .tile.hover-box:hover, .tile.hover-box.active-tile { background-color: #009c77; color: #fff; } .tile.hover-box:hover .tile-title, .tile.hover-box.active-tile .tile-title{ color: #fff; } .tile.hover-box:hover .fb-dark, .tile.hover-box.active-tile .fb-dark { color: #fff; } .tile.hover-box:hover .btn-hollow-dark, .tile.hover-box.active-tile .btn-hollow-dark { border: 1px solid #fff !important; color: #fff !important; } .tile.hover-box:hover .btn-hollow-dark:hover, .tile.hover-box:hover .btn-hollow-dark:focus, .tile.hover-box:hover .btn-hollow-dark:active, .tile.hover-box:hover .btn-hollow-dark.active, .tile.hover-box.active-tile .btn-hollow-dark:hover, .tile.hover-box.active-tile.btn-hollow-dark:focus, .tile.hover-box.active-tile .btn-hollow-dark:active, .tile.hover-box.active-tile .btn-hollow-dark.active { color: #009c77 !important; border: 1px solid #fff !important; background-color: #fff !important; } .tile-left { padding-left:100px; } .tile-left i { position:absolute; left:0; } .tile-right { padding-right:100px; text-align:right; } .tile-right i { position:absolute; right:0; } /* ========================================================================== Feature Boxes ============================================================================= */ .feature-box { clear: both; margin-bottom:25px; } .feature-box .feature-box-icon { background: #009c77; border: 35px; color: #FFF; display: inline-block; float: left; height: 35px; line-height: 35px; margin-right: 10px; position: relative; text-align: center; top: 2px; width: 35px; } /*Big*/ .feature-box.big { margin-bottom:50px; } .feature-box.big .feature-box-icon { font-size: 35px; background: #009c77; border: 75px; color: #FFF; display: inline-block; float: left; height: 75px; line-height: 75px; margin-right: 20px; position: relative; text-align: center; top: 2px; width: 75px; } /*Right*/ .feature-box.right .feature-box-icon, .feature-box.big.right .feature-box-icon { float: right; margin-right:0; } /*No Background*/ .feature-box .feature-box-icon.no-bg { background-color: transparent; border: 0; color: #009c77; line-height: 14px; } .feature-box.big .feature-box-icon.no-bg { font-size: 40px; line-height: 0px; } /*Circle*/ .feature-box .feature-box-icon.bg-circle { border-radius: 35px; } .feature-box.big .feature-box-icon.bg-circle { border-radius: 75px; font-size: 30px; } /*Dark*/ .feature-box .feature-box-icon.dark { background-color: #333; } .feature-box .feature-box-icon.no-bg.dark { background-color: transparent; color: #333; } /*Border*/ .feature-box .feature-box-icon.bg-border { background-color: transparent; color: #009c77; border: 1px solid #009c77; } .feature-box .feature-box-icon.dark.bg-border { color:#333; border: 1px solid #333; } /*Feature Box Info*/ .feature-box .feature-box-info { padding-left: 50px; } .feature-box.big .feature-box-info { padding-left: 100px; } .feature-box.big.right .feature-box-info { padding-left: 0px; padding-right: 110px; } .feature-box.right .feature-box-info { padding-left: 0; padding-right: 60px; } .feature-box-info > h4 { font-weight: bold; } .feature-box-line .feature-box{ position: relative; min-height: 100px; margin-bottom: 20px; } .feature-box-line .feature-box.big{ min-height: 150px; } .feature-box-line .feature-box:after { position: absolute; top: 50%; margin-top: 6px; left: 18px; height: 50px; content: ""; } .feature-box-line .feature-box.right:after { left: inherit; right: 17px; } .feature-box-line .feature-box.big:after { top:50%; margin-top:18px; left: 38px; height: 65px; } .feature-box-line .feature-box.big.right:after { left: inherit; right: 37px; height: 65px; } .feature-box-line.fbl-theme .feature-box:after { border-left: 1px solid #009c77; } .feature-box-line.fbl-dark .feature-box:after { border-left: 1px solid #333; } .feature-box-line.fbl-light .feature-box:after { border-left: 1px solid #ddd; } .feature-box-line .feature-box:last-child:after { border-left: none; } /* ========================================================================== Lists ============================================================================= */ ul.list li { padding: 10px 0; } ul.list li > i.fa { margin-right: 5px; color: #009c77; } ul.list.square li > i.fa { color: #fff; background: #009c77; border: 25px; color: #FFF; display: inline-block; height: 25px; line-height: 25px; text-align: center; width: 25px; } ul.list.circle li > i.fa { color: #fff; background: #009c77; border: 25px; border-radius: 25px; color: #FFF; display: inline-block; height: 25px; line-height: 25px; text-align: center; width: 25px; } ul.list.square.hollow li > i.fa, ul.list.circle.hollow li > i.fa { background: transparent; color: #009c77; border: 1px solid #009c77; } ul.list.padding-big li { padding: 25px 0; } ul.list.dashed-border li{ border-bottom: 1px dashed #ccc; } ul.list.solid-border li{ border-bottom: 1px solid #777; } /*List Box*/ .list-box { background-color: #009c77; color: #fff; padding: 20px 30px; } .list-box-no-padding { padding:0; } ul.list-box-no-padding li { padding:20px 30px; } ul.list-box li > i.fa { color: #fff; } ul.list-box.square.hollow li > i.fa, ul.list-box.circle.hollow li > i.fa { border-color: #fff; color: #fff; } ul.list-box.square li > i.fa, ul.list-box.circle li > i.fa { color: #009c77; background-color: #fff; } ul.list-box.dashed-border li:last-child { border-bottom: none; } ul.list-box.solid-border li:last-child { border-bottom: none; } /* ========================================================================== Accordion ============================================================================= */ .panel-heading { cursor: pointer; } .panel-icon-right .panel-title { padding-right: 27px; position:relative; } .panel-icon-left .panel-title { padding-left: 28px; position:relative; } /*Directional Icons*/ /* CSS Method for adding Font Awesome Chevron Icons */ .chevron.accordion-toggle:after, .chevron-left.accordion-toggle:after { /* symbol for "closed" panels */ font-family:'FontAwesome'; content:"\f106"; font-size:20px; position: absolute; right: 0; margin-top:-4px; color: inherit; } .no-border.no-color .chevron.accordion-toggle:after, .no-border.no-color .chevron-left.accordion-toggle:after { right: -1px; } .panel-heading.collapsed .chevron.accordion-toggle:after, .panel-heading.collapsed .chevron-left.accordion-toggle:after { /* symbol for "open" panels */ content:"\f107"; } /* CSS Method for adding Font Awesome Plus-Minus Icons */ .plus.accordion-toggle:after, .plus-left.accordion-toggle:after { /* symbol for "close" panels */ font-family:'ElegantIcons'; content:"\4b"; font-size:18px; font-weight:bold; position: absolute; right: 0; top:0; color: inherit; } .panel-heading.collapsed .plus.accordion-toggle:after, .panel-heading.collapsed .plus-left.accordion-toggle:after { /* symbol for "open" panels */ content:"\4c"; } /*Left Directional Icons*/ .chevron-left.accordion-toggle:after, .plus-left.accordion-toggle:after { position: absolute; right: inherit; left:0; } .no-border.no-color .chevron-left.accordion-toggle:after { left:0px; } .no-border.no-color .plus-left.accordion-toggle:after { top:-2.5px; } /*Directional Icons For Borderless & Transparent Accordion*/ .no-border.no-color.panel-icon-left .panel-heading .panel-title { padding-left: 30px; } .no-border.no-color.panel-icon-right .panel-heading .panel-title { padding-right: 20px; } .no-border.no-color .panel-heading .panel-title:hover { color: #009c77; } .no-border.no-color .chevron-left.accordion-toggle:after, .no-border.no-color .chevron.accordion-toggle:after, .no-border.no-color .plus.accordion-toggle:after, .no-border.no-color .plus-left.accordion-toggle:after { /* symbol for "close" panels */ color: #009c77; } .no-border.no-color .panel-heading.collapsed .chevron.accordion-toggle:after, .no-border.no-color .panel-heading.collapsed .chevron-left.accordion-toggle:after, .no-border.no-color .panel-heading.collapsed .plus.accordion-toggle:after, .no-border.no-color .panel-heading.collapsed .plus-left.accordion-toggle:after { /* symbol for "open" panels */ color: inherit; } /*Default Accordion*/ .panel-group { margin:0; } .panel-heading a:hover { text-decoration: none; } .panel-title{ color: #fff; font-size: 14px; } .panel-group .panel { font-family: 'Open Sans',san-serif; font-size: 14px; background-color: transparent; } .panel-heading { background-color: #009c77 !important; } .panel-group .panel { -webkit-box-shadow: none; box-shadow: none; } /*Borderless Panel Body*/ .no-border .panel-default { border:none; -webkit-box-shadow: none; box-shadow: none; } .no-border .panel-heading+.panel-collapse>.panel-body { border-top: none; } /*Transparent Background*/ .no-border.clear-panel .panel-heading { border: 1px solid #ddd; } .clear-panel .panel-title { color: #333; font-size:16px; } .clear-panel .panel-heading { background-color: transparent !important; } /*Borderless + Transparent Background*/ .no-color .panel-heading { background-color: transparent !important; padding-left: 0px; padding-right:0px; border-bottom: none; } .no-color .panel-heading.collapsed { border-bottom: 1px solid #ddd; background-color: transparent !important; padding-left: 0px; padding-right:0; color: #333; } .no-color.panel-group .panel-heading+.panel-collapse>.panel-body { border-top: none; border-bottom: 1px solid #ddd; padding-right: 0; padding-left: 0; } .no-color .panel-heading.collapsed .panel-title { color: #333; } .no-color .panel-heading .panel-title { color: #009c77; } /* ========================================================================== Tabs ============================================================================= */ .nav-tabs { margin-bottom:-1px; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #333; font-weight: 600; } .nav-tabs>li>a:focus { background-color:transparent; } .tab-content > .active { padding: 10px; border: 1px solid #ddd; border-top-color: transparent; border-bottom: 3px solid #009c77; } .nav-tabs>li>a { margin-right: 0; font-weight: 600; } .nav.nav-tabs>li>a:hover, .nav.nav-pills>li>a:hover { border-color: #009c77; background-color: #009c77; color: #fff; } /*Tabs Pills*/ .tab-pills .tab-content > .active { padding: 10px; border-left-style: none; border-right-style: none; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #ffffff; background-color: #009c77; } .tab-pills-below .tab-content > .active { border-bottom: none; border-top: 3px solid #009c77; } /*Justified Tabs*/ .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 0px; } /*Left Tabs*/ .tabs-left { display: inline-block; } .tabs-left > .nav-tabs > li, .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eee #ddd #eee #eee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; } .tabs-left > .nav-tabs { border-bottom: 0; } .tabs-left .tab-content > .active { padding: 10px; border-style: none; border-right: 3px solid #009c77; } /*Tabs Below*/ .tabs-below > .nav-tabs{ border-bottom: 0; } .tabs-below > .nav-tabs { border-top: 1px solid #ddd; } .tabs-below .nav-tabs.nav-justified { border-top: none; } .tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } .tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus , .tabs-below .nav-tabs.nav-justified > li > a{ border-top-color: #ddd; border-bottom-color: transparent; } .tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus, .tabs-below .nav-tabs.nav-justified> .active> a, .tabs-below .nav-tabs.nav-justified> .active> a:hover, .tabs-below .nav-tabs.nav-justified> .active> a:focus { border-color: transparent #ddd #ddd #ddd; } .tabs-below .tab-content > .active, .tabs-below .tab-content > .active { border-bottom: none; border-top: 3px solid #009c77; } /*Right Tabs*/ .tabs-right { display: inline-block; width:100%; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; border-bottom: none; } .tabs-right > .nav-tabs > li > a { margin-left: -1px; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { border-color: #eee #eee #ddd; } .tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: #ddd; border-left-color: #fff; } .tabs-right .tab-content > .active { border-left: 3px solid #009c77; border-right: none; border-bottom: none; border-top: none; } .tabs-left .tab-content > .active, .tabs-right .tab-content > .active { display: table; } /*Left & Top Tabs Without Border Boxes*/ .no-border-boxes > .nav-tabs, .no-border-boxes .tab-content > .active, .no-border-boxes-top .nav-tabs, .no-border-boxes-top .nav-tabs > li.active > a, .no-border-boxes-top .tab-content > .active { border: none; } .no-border-boxes > .tab-content > .active { padding:0; } .tabs-left.no-border-boxes > .nav-tabs > li { margin-right:20px; } .no-border-boxes > .nav-tabs > li > a, .no-border-boxes > .nav-tabs > li > a:hover, .no-border-boxes > .nav-tabs > li > a:focus, .no-border-boxes-top .nav-tabs > li> a, .no-border-boxes-top .nav-tabs > li> a:hover { background-color: #f6f6f6; color: #333; padding: 20px 30px; margin-bottom: 35px; border: none; } .no-border-boxes > .nav-tabs > li > a > p, .no-border-boxes-top > .nav-tabs > li > a > p { margin-bottom: 0; } .no-border-boxes-top .nav-tabs>li>a, .no-border-boxes-top .nav-tabs>li>a:hover { margin-bottom: 10px; display: inline-block; } .no-border-boxes > .nav-tabs .active > a, .no-border-boxes > .nav-tabs .active > a:hover, .no-border-boxes > .nav-tabs .active > a:focus, .no-border-boxes-top .nav-tabs > li.active > a, .no-border-boxes-top .nav-tabs > li.active > a:hover, .no-border-boxes-top .nav-tabs > li.active > a:focus { background-color: #009c77; color: #fff; } .no-border-boxes-top .tab-content > .active { padding: 20px 0; } .no-border-boxes-top .nav-tabs.nav-justified> .active> a, .no-border-boxes-top .nav-tabs.nav-justified > .active> a:hover, .no-border-boxes-top .nav-tabs.nav-justified > .active> a:focus { border: none; } .tabs-right.no-border-boxes > .nav-tabs, .tabs-right.no-border-boxes .tab-content > .active { padding-left: 0; border-left: none; } .tabs-right.no-border-boxes > .nav-tabs > li { margin-left:20px; } /*Left & Top Tabs Without Border Boxes - Plain*/ .no-border-boxes.no-border-boxes-plain .nav-tabs li a, .no-border-boxes-top.no-border-boxes-plain .nav-tabs li a{ background-color:transparent; color:#a7a7a7; padding: 0 20px 0 0; } .no-border-boxes-top.no-border-boxes-plain .nav-tabs.text-center li a{ padding: 0 20px; } .no-border-boxes-top.no-border-boxes-plain .nav-tabs.text-center{ display: table; margin-left:auto; margin-right:auto; } .no-border-boxes-top.no-border-boxes-plain .nav-tabs.text-right{ display: table; margin-left:auto; } .no-border-boxes.no-border-boxes-plain .nav-tabs li.active a, .no-border-boxes-top.no-border-boxes-plain .nav-tabs li.active a{ color:#333; background-color: transparent; } .tabs-right.no-border-boxes.no-border-boxes-plain .nav-tabs > li { text-align:right; } /* ========================================================================== Alerts ============================================================================= */ /*Theme*/ .alert-theme { color: #fff; background-color: #009c77; border-color: #009c77; } /*Double Border*/ .alert-double-border { padding:5px; border-width: 2px; border-style: solid; margin-bottom: 20px; } .alert-double-border.db-theme { border-color: #009c77; } .alert-double-border.db-info { border-color: #c5eff7; } .alert-double-border.db-success { border-color: #c8f7c5; } .alert-double-border.db-warning { border-color: #fde3a7; } .alert-double-border.db-danger { border-color: #fcc9b9; } .alert-double-border .alert { margin-bottom: 0; } /*Big*/ .alert-big { padding-top:30px; padding-bottom: 30px; } /*Theme Alert Colors*/ .alert-theme-success { background-color: #c8f7c5; border-color: #c8f7c5; color: #1e824c; } .alert-theme-danger { background-color: #fcc9b9; border-color: #fcc9b9; color: #c3272b; } .alert-theme-warning { background-color: #fde3a7; border-color: #fde3a7; color: #d35400; } .alert-theme-info { background-color: #c5eff7; border-color: #c5eff7; color: #3a539b; } .alert-icon i.fa { float: left; margin-right: 15px; padding-top: 5px; } /*Content*/ .alert-content { margin-left: 35px; } .alert-theme .close { opacity: 1; } .alert-theme .close:hover { color: #333; opacity: 0.5; } /*Alert Title*/ h1.alert-title, h2.alert-title, h3.alert-title, h4.alert-title, h5.alert-title, h6.alert-title { background-color: #333; color: #fff; text-transform: uppercase; font-weight: 600; padding: 15px; position: relative; top: -16px; left: -16px; margin-right: -31px; margin-bottom: 0; } .alert-dismissible h1.alert-title, .alert-dismissible h2.alert-title, .alert-dismissible h3.alert-title, .alert-dismissible h4.alert-title, .alert-dismissible h5.alert-title, .alert-dismissible h6.alert-title { margin-right: -51px; } .alert-theme-success .alert-title { background-color: #1e824c; } .alert-theme-danger .alert-title { background-color: #c3272b; } .alert-theme-warning .alert-title { background-color: #d35400; } .alert-theme-info .alert-title { background-color: #3a539b; } /* ========================================================================== Owl Carousel ============================================================================= */ /*Theme Pagination*/ .owl-theme-color.owl-theme .owl-controls .owl-page span { background-color: #009c77; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*Light Pagination*/ .owl-theme-light.owl-theme .owl-controls .owl-page span { background-color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*Dark Pagination*/ .owl-theme-dark.owl-theme .owl-controls .owl-page span { background-color: #333; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*Default Theme Settings*/ .owl-theme .owl-controls { margin-top: 0; } .owl-carousel .item{ padding: 50px 0; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .owl-carousel .item:hover img { opacity: 1; } /*Blog Carousel*/ .owl-carousel.blog .item{ color:#333; margin: 0 10px; } /*Client Carousel*/ .owl-carousel.client-carousel img { margin-left: auto; margin-right: auto; padding: 0 30px; } /*Testimonial Carousel*/ .owl-carousel.testimonial .item { margin:10px; } .owl-carousel.testimonial .item .testimonial{ margin:0; } /*Text Testimonial Carousel*/ .text-testimonial.owl-carousel .item { padding: 0; } .text-testimonial.owl-theme .owl-controls { margin-bottom: 0; } .text-testimonial p, .text-testimonial-light p{ color: #747474; font-style: italic; line-height: 30px; } .text-testimonial .fa, .text-testimonial-light .fa { color: #747474; line-height: 30px; } .text-testimonial h5, .text-testimonial-light h5 { color: #747474; margin-top: 15px; font-weight: bold; line-height: 20px; } .text-testimonial-light p, .text-testimonial-light h5, .text-testimonial-light a, .text-testimonial-light .fa { color: #fff; } .text-testimonial img, .text-testimonial-light img { width: 100px; height: auto; } .text-testimonial.owl-theme .owl-controls .owl-buttons div .fa { color:inherit; } /*Product Carousel*/ .owl-carousel .item.product { padding: 20px 10px; } .owl-arrow-sides .item.product, .owl-arrow-top-sides .item.product { padding: 0; } .owl-arrow-top-sides .item.product { margin: 10px; } .owl-carousel .product .product-thumbnail { margin:0 auto; color: #333; } .owl-carousel .product.item .product-image:hover img { opacity: 0.5; } /*Arrow Sides*/ .owl-arrow-sides { padding: 0 50px; } .owl-arrow-sides .item, .owl-arrow-top-sides .item { margin: 0 15px; } .owl-arrow-top-sides-heading { padding-right:90px; } .sidebar-products .owl-arrow-top-sides .item { margin: 0; padding:0; } .sidebar-products .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-prev, .sidebar-products .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-next { top:-66px; } .owl-theme .owl-controls .owl-buttons div{ background: #333; border-radius: 0; font-size:18px; } .owl-theme .owl-controls .owl-buttons .owl-next { padding: 3px 11px 3px 12px; } .owl-theme .owl-controls .owl-buttons .owl-prev { padding: 3px 12px 3px 11px; } .owl-theme.owl-arrow-sides .owl-controls .owl-buttons .owl-next{ position: absolute; top: 50%; margin-top:-15.5px; right: 0; } .owl-theme.owl-arrow-sides .owl-controls .owl-buttons .owl-prev { position: absolute; top: 50%; margin-top:-15.5px; left: 0; } .container .owl-theme.owl-arrow-sides.arrows-with-pagination .owl-controls .owl-buttons .owl-next, .container .owl-theme.owl-arrow-sides.arrows-with-pagination .owl-controls .owl-buttons .owl-prev { margin-top:-29px; } .owl-theme.owl-arrow-sides.arrows-with-pagination .owl-controls .owl-buttons .owl-next, .owl-theme.owl-arrow-sides.arrows-with-pagination .owl-controls .owl-buttons .owl-prev { margin-top:-29px; } /*Arrow Top - Right Side*/ .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-next { position: absolute; top:-91px; right: 0; } .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-prev { position: absolute; top:-91px; right: 40px; } /*Portfolio - Arrow Sides*/ .owl-theme.owl-arrow-sides.portfolio .item, .owl-theme.owl-arrow-top-sides.portfolio .item { margin: 0; } /*Testimonial Carousel*/ .owl-arrow-sides .testimonial { padding: 0 25px; } .owl-arrow-top-sides .testimonial { margin: 0; } .owl-arrow-sides.testimonial .owl-controls .owl-buttons .owl-next, .owl-arrow-sides.testimonial .owl-controls .owl-buttons .owl-prev { top:40%; } /*Arrow Sides - Inside Container*/ .container .owl-arrow-sides .testimonial { padding: 0 20px; } /*Arrow Sides On Hover*/ .owl-theme.owl-arrow-sides.owl-arrow-on-hover .owl-controls .owl-buttons { opacity: 0; } .owl-theme.owl-arrow-sides.owl-arrow-on-hover:hover .owl-controls .owl-buttons { opacity: 1; } /*Project Section Carousel*/ .owl-theme.owl-project-section .owl-controls .owl-buttons .owl-prev, .owl-theme.owl-project-section .owl-controls .owl-buttons .owl-next{ top:50% !important; } /*Arrow Styles*/ .owl-theme.owl-arrow-color .owl-controls .owl-buttons div { background-color:#333; opacity: 1; } .owl-theme-light.owl-theme.owl-arrow-color .owl-controls .owl-buttons div { background-color:#fff; color:#333; opacity: 1; } .owl-theme-light.owl-theme.owl-arrow-color .owl-controls .owl-buttons div .fa { color: #333; } .owl-theme.owl-arrow-color .owl-controls .owl-buttons div:hover { background-color:#009c77; } .owl-theme-light.owl-theme.owl-arrow-color .owl-controls .owl-buttons div:hover, .owl-theme-light.owl-theme.owl-arrow-color .owl-controls .owl-buttons div:hover .fa { color:#fff; } .owl-theme.owl-arrow-hollow .owl-controls .owl-buttons div { background-color:transparent; border: 2px solid #333; color:#333; opacity: 1; } .owl-theme-light.owl-theme.owl-arrow-hollow .owl-controls .owl-buttons div { border-color:#fff; color:#fff; } .owl-theme.owl-arrow-hollow .owl-controls .owl-buttons div:hover, .owl-theme.owl-arrow-hollow .owl-controls .owl-buttons div:hover .fa { border-color:#009c77; color:#009c77; } .owl-theme .owl-controls .owl-buttons .fa { line-height:inherit; } /* ========================================================================== Steps ============================================================================= */ /*Arrow Boxes*/ ul.arrow-box { display: table; margin: 40px 0; } .arrow-box li{ display: table-cell; vertical-align: middle; position: relative; background: #009c77; width: 25%; padding: 0 15px 20px 25px; color: #fff; margin-right: -2.9px; border-color: #009c77; font-size: 13px; } .arrow-box a { color: #fff; } .arrow-box .fa { padding-top: 25px; } .arrow-box li:after, .arrow-box li:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 10; } .arrow-box li:after { border-left-color: inherit; border-width: 15px; margin-top: -15px; } .arrow-box li:last-child:after{ display: none; } .arrow-box-3 li { width: 33.33%; } .arrow-box-2 li { width: 50%; } /*Process Tabs*/ .no-border-boxes-top.process-tab .nav-tabs a { font-size: 28px; } .no-border-boxes-top.process-tab .nav-tabs>li>a { padding: 10px 25px; background-color: #222; color: #fff; } .no-border-boxes-top.process-tab .nav-tabs>li.active>a, .no-border-boxes-top.process-tab .nav-tabs>li>a:hover, .no-border-boxes-top.process-tab .nav-tabs.nav-justified> .active> a, .no-border-boxes-top.process-tab .nav-tabs.nav-justified > .active> a:hover, .no-border-boxes-top.process-tab .nav-tabs.nav-justified > .active> a:focus { background-color: #009c77; color: #fff; padding: 10px 25px; } .no-border-boxes-top.process-tab .nav-tabs>li>a i.fa, .no-border-boxes-top.process-tab .nav-tabs>li>a:hover i.fa { padding: 10px 0; } .no-border-boxes-top.process-tab .nav-tabs>li>h5 { margin:5px 0 30px; font-weight: bold; } .no-border-boxes-top.process-tab .nav-tabs>li.active>h5, .no-border-boxes-top.process-tab .nav-tabs>li:hover h5 { color: #009c77; } .no-border-boxes-top.process-tab .nav-tabs li:after { left: auto; right: 0; margin: 0 -26px 0 0; } .no-border-boxes-top.process-tab .nav-tabs li:before { content: ''; position: absolute; top: 30px; left: 0; width: 50%; margin-left: -25%; border-top: 1px dashed #333; } .no-border-boxes-top.process-tab .nav-tabs li:first-child:before{ display: none; } /* ========================================================================== Team ============================================================================= */ .team-item { margin: 0 auto; max-width: 400px; } .team-item.team-large { max-width: 900px; } .team-item.team-large .social-icons { float: right; margin-top: 20px; } .team-item h3 { font-weight: bold; } .team-item img { margin-left: auto; margin-right: auto; } /* ========================================================================== Circular Progress Bar ============================================================================= */ .circular-bar { margin-bottom: 25px; min-height: 210px; } .circular-bar .knob { visibility: hidden; } .circular-bar strong { display: block; font-weight: 600; font-size: 22px; line-height: 30px; } .circular-bar label { display: block; font-weight: 100; font-size: 17px; line-height: 20px; } .circular-bar-content { margin-bottom: 70px; margin-top: -125px; text-align: center; } /* ========================================================================== Progress Bars ============================================================================= */ .progress { height:25px; border-radius: 0px; } .progress-thin { height:10px; } .progress-bar { line-height: 25px; font-weight: bold; background-color: #009c77; } .progress .progress-bar.two-sec-ease-in-out { -webkit-transition: width 2s ease-in-out; -moz-transition: width 2s ease-in-out; -ms-transition: width 2s ease-in-out; -o-transition: width 2s ease-in-out; transition: width 2s ease-in-out; } span.percentage-left { position:absolute; right: 15px; font-weight: bold; } .no-padding-side span.percentage-left, .no-padding-right span.percentage-left { right: 0; } /*Progress Bar Styles : ps-1, ps-2 & ps-3*/ .ps-1 span.percentage, .ps-2 span.percentage { float: right; display: inline-block; background-color: #ddd; color: #000; opacity: 0.6; padding: 0 10px; } .ps-3 span.percentage { position: absolute; right: 15px; display: inline-block; background-color: #ddd; color: #000; opacity: 0.6; line-height: 25px; font-size: 12px; font-weight: bold; padding: 0 10px; } .ps-2 span.text, .ps-3 span.text { float: left; display: inline-block; background-color: #ddd; color: #000; opacity: 0.6; padding: 0 10px; text-transform: uppercase; } /* ========================================================================== Testimonials ============================================================================= */ .testimonial { margin: 20px 0; } .testimonial h1{ text-align:center; text-shadow:0 1px white; } .testimonial h2{ margin:15px 0 5px; color: #000; } .testimonial h6{ margin:5px; color: #000; } .testimonial img { width: 170px; height: auto; } .left .testimonial.simple h6, .testimonial.simple h6 { font-size: 13px; margin: 40px 0 5px; font-weight: bold; color: #000; } .testimonial.simple h6 { margin:10px 0; } .left .testimonial.simple.image img, .testimonial.simple.image img { margin-top: 20px; width: 60px; height:60px; } .testimonial p { padding-left: 10px; padding-bottom: 0; } .testimonial blockquote{ margin:0; padding:30px; width:auto; background-color: #009c77; color:white; position:relative; transition: background-color 0.6s linear; } .testimonial.simple blockquote { background-color: #f6f6f6; color: #747474; font-size: 13px; padding: 20px; font-style: italic; } .testimonial blockquote:after, .left > .testimonial blockquote:after { content: " "; height: 0; width: 0; position: absolute; top: 100%; border: solid transparent; border-top-color: #009c77; border-left-color:#009c77; border-width: 10px; left: 55%; z-index:1; } .testimonial img{ margin-top: 10px; margin-left: auto; margin-right: auto; } .testimonial.simple i { color: #222; } .left .testimonial.simple i { margin-top: 30px; float: left; margin-right: 20px; } .testimonial.simple i { margin-top: 30px; } .left > .testimonial blockquote:after { left: 10%; } .left > .testimonial.simple blockquote:after { border-top-color: #f6f6f6; border-left-color: #f6f6f6; left: 5%; } .testimonial.simple blockquote:after{ border-top-color: #f6f6f6; border-left-color: #f6f6f6; left: 50%; } .left > .testimonial img{ margin-top: 0; width: 170px; float: left; margin-right: 20px; } .quotes{ position:absolute; color:rgba(255,255,255,0.5); font-size:80px; } .leftq{ top:-25px; left:10px; } .rightq{ bottom:-10px; right:5px; } .testimonial blockquote { border-left: 5px solid #009c77; } .testimonial.simple blockquote { border-left: 5px solid #f6f6f6; } /* ========================================================================== Blockquotes ============================================================================= */ .blockquote-theme { border-left: 5px solid #009c77; } .blockquote-reverse.blockquote-theme { border-right: 5px solid #009c77; border-left: none; } /* ========================================================================== Promo Boxes ============================================================================= */ .promo-box { padding: 50px 0; margin:100px 0; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.175); } .promo-heading, .promo-heading, .promo-subtitle, .promo-subtitle{ font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: bold; margin: 0; } .promo-subtitle, .promo-subtitle { margin-top:10px; text-transform: none; font-weight: normal; } .btn-promo { width:100%; } .promo-panel .panel-body { padding: 35px; } .promo-panel { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); margin: 100px 0; border-color: #ddd; } .promo-panel.promo-side-left .panel-body { border-left: 5px solid #009c77; } .promo-panel.promo-side-right .panel-body { border-right: 5px solid #009c77; } .promo-panel.promo-side-top .panel-body { border-top: 5px solid #009c77; } .promo-panel.promo-side-bottom .panel-body { border-bottom: 5px solid #009c77; } .promo-panel.promo-side-bottom, .promo-panel.promo-side-top, .promo-panel.promo-side-left, .promo-panel.promo-side-right { border: none; } .pb-icon { -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; padding-top: 15px; border: 1px solid #ddd; margin: -90px auto 50px; background: #fff; width: 90px; color: #009c77; height: 90px; text-align: center; } .promo-panel .pb-icon { margin-top: -80px; margin-bottom: 25px; } .promo-parallax { background-size: 100%; background-attachment: fixed; } /* ========================================================================== Sections ============================================================================= */ section { z-index:10; } .section-video { background-repeat: no-repeat; background-color: #000; background-position: center 0; width: 100%; margin: 100px 0; padding: 100px 0; overflow: hidden; position: relative; } .section-video.video-lg { padding: 200px 0; } .section-video .embed, .section-video object, .section-video video { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .section-video .video-overlay { background: rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; } .section-video .video-overlay.video-overlay-dark { background: rgba(0,0,0,0.5); } .video-content { z-index: 1; } .section-colored { padding-top: 100px; padding-bottom: 100px; margin: 100px 0; background-color: #009c77; } .section-colored.section-light { background-color:#eee; } .section-colored.section-dark { background-color:#222; } .section-pattern { padding-top: 100px; padding-bottom: 100px; margin: 100px 0; } .section-parallax { background-size: 100%; background-attachment: fixed; padding-top: 100px; padding-bottom: 100px; margin: 100px 0; } .section-img { background-size: 100%; padding-top: 100px; padding-bottom: 100px; margin: 100px 0; } .section-side-image { padding: 0px; position: relative; margin: 100px 0; } .section-side-image .image-container { overflow: hidden; position: absolute; height: 100%; padding: 0px; top: 0px; } .image-holder { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover !important; z-index: 0; } .section-side-image .image-container.pull-right{ right: 0; } .side-image-content { padding-top: 100px; padding-bottom: 100px; } .with-overlay { padding: 0; } .overlay { padding-top: 100px; padding-bottom: 100px; background-color: rgba(0, 0, 0, 0.6); } .overlay-light { padding-top: 100px; padding-bottom: 100px; background-color: rgba(255, 255, 255, 0.6); } /* Common style for pseudo-elements */ section.ss-style-triangles::before, section.ss-style-triangles::after { position: absolute; content: ''; pointer-events: none; } /* Section With Triangles */ .ss-style-triangles::before, .ss-style-triangles::after { left: 50%; width: 50px; height: 50px; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .ss-style-triangles::before { top: -25px; background: inherit; } .ss-style-triangles::after { bottom: -25px; background: inherit; } .ss-style-triangles.top::after { width: 0; height: 0; } .ss-style-triangles.bottom::before { width: 0; height: 0; } section.ss-style-triangles{ position: relative; padding: 100px 0; margin: 100px 0; background-color:#009c77; } section.ss-style-triangles.w-s-b{ margin-top: 150px; } section.ss-style-triangles.w-s-t{ margin-bottom: 150px; } /*Expandable Section*/ .expansion-text.cls, .expansion-trigger.up, .section-expand { display: none; } /* Zig Zag Section */ .section-zigzag, .section-zigzag-dark, .section-zigzag-light { position:relative; } .section-zigzag { background-color:#009c77 !important; } .section-zigzag-dark { background-color:#222 !important; } .section-zigzag-light { background-color:#fff !important; } .section-zigzag:before { background: linear-gradient(-45deg, #009c77 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #009c77 16px, transparent 0); background-position: left top; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; top: -20px; left:0; } .section-zigzag:after { background: linear-gradient(-45deg, transparent 16px, #009c77 0), linear-gradient(45deg, transparent 16px, #009c77 0); background-position: left bottom; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; bottom: -20px; left:0; } .section-zigzag-dark:before { background: linear-gradient(-45deg, #222 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #222 16px, transparent 0); background-position: left top; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; top: -20px; left:0; } .section-zigzag-dark:after { background: linear-gradient(-45deg, transparent 16px, #222 0), linear-gradient(45deg, transparent 16px, #222 0); background-position: left bottom; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; bottom: -20px; left:0; } .section-zigzag-light:before { background: linear-gradient(-45deg, #fff 16px, red 16px, blue 16px, transparent 0), linear-gradient(45deg, #fff 16px, transparent 0); background-position: left top; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; top: -20px; left:0; } .section-zigzag-light:after { background: linear-gradient(-45deg, transparent 16px, #fff 0), linear-gradient(45deg, transparent 16px, #fff 0); background-position: left bottom; background-repeat: repeat-x; background-size: 22px 32px; content: " "; display: block; height: 32px; width: 100%; position: absolute; bottom: -20px; left:0; } /* ========================================================================== Pricing Tables ============================================================================= */ .plan sup{ font-size: 20px; top: -45px; } .plan ul{ list-style: none; font-size: 15px; font-family:'Open Sans'; color: #9095aa; padding: 0px; margin: 0px; } .plan li{ padding: 0px; margin: 0px; text-align: center; height: 52px; line-height: 52px; } .plan { margin: 0 0 20px; } .plan{ background-color: #fff; font-size: 90px; text-align: center; } .type { height: 62px; margin-top: 20px; } .type p{ font-weight: bold; font-size: 29px; text-transform: uppercase; color: #fff; text-align: center; padding-top: 10px; } .plan-header{ padding-bottom: 39px; } .plan-header span{ font-size: 32px; } .month { font-size: 14px; padding: 0px; margin: -10px; } .price{ height:auto; } .price .btn { margin-bottom: 20px; } .ultimate-dark .type p , .ultimate-light .type p { padding-top: 30px; } .ultimate-dark .type, .ultimate-light .type { height:102px; margin-top: 0px; } /*Dark*/ .dark-plan .plan li{ border-bottom: 1px solid #494a5a; } .dark-plan .type{ background-color: #009c77; border-bottom: 3px solid #575757; } .dark-plan .plan{ background-color: #2b2937; color: #fff; } .ultimate-dark .type{ background-color: #5cb85c; border-bottom: 3px solid #575757; } .dark-plan .plan-header{ border-bottom: 1px solid #494a5a; } .dark-plan .month{ color: #575757; } /*Light*/ .light-plan .plan li{ color: #333; border-bottom: 1px solid #eee; } .light-plan .type{ background-color: #009c77; border-bottom: 3px solid #eee; } .light-plan .plan{ background-color: #fff; color: #333; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .ultimate-light .type{ background-color: #5cb85c; border-bottom: 3px solid #eee; } .light-plan .plan-header{ border-bottom: 1px solid #eee; } .light-plan .month{ color: #333; } .light-plan .btn-hollow{ border: 1px solid #009c77 !important; color: #009c77 !important; } .light-plan .btn-hollow:hover{ border: 1px solid #009c77 !important; background-color: #009c77 !important; color: #fff !important; } .ultimate-light .btn-hollow{ border: 1px solid #5cb85c !important; color: #5cb85c !important; } .ultimate-light .btn-hollow:hover{ border: 1px solid #5cb85c !important; background-color: #5cb85c !important; color: #fff !important; } /* ========================================================================== Clients ============================================================================= */ .clients .img-thumbnail { background-color: #eee; opacity: 1; display: block; border-radius: 0; margin: 20px auto; } .clients.thumbnail-opacity a .img-thumbnail { opacity: 0.5; } .clients a:hover .img-thumbnail { opacity: 1; } .clients img{ margin-left: auto; margin-right: auto; } .clients-opacity a img { opacity: 0.5; } .clients-opacity a:hover img { opacity: 1; } /*Client Grid*/ .clients-grid.grid li, .clients-grid.grid-4 li, .clients-grid.grid-5 li, .clients-grid.grid-6 li { clear: none; } ul.clients-grid { list-style: none; -webkit-padding-start: 0; margin: 0; } .clients-grid li img { margin-left: auto; margin-right: auto; max-height: 150px; width: auto; } .clients-grid li { padding: 20px; float: left; overflow: hidden; } .clients-grid.grid-6 li { width: 16.66%; } .clients-grid.grid-4 li { width: 25%; } .clients-grid.grid-5 li { width: 20%; } .clients-grid.grid-3 li { width: 33.33%; } .clients-grid.grid-2 li { width: 50%; clear: none; } /*Client Grid With Border*/ .clients-border.grid-3 li, .clients-border.grid-2 li, .clients-border.grid-4 li, .clients-border.grid-5 li, .clients-border.grid-6 li { border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .clients-border.grid-3 li, .clients-border.grid-2 li, .clients-border.grid-4 li, .clients-border.grid-5 li, .clients-border.grid-6 li { border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .clients-border.grid-6 li:nth-child(6n), .clients-border.grid-5 li:nth-child(5n), .clients-border.grid-4 li:nth-child(4n), .clients-border.grid-3 li:nth-child(3n), .clients-border.grid-2 li:nth-child(2n) { border-right: none; } .clients-border.grid-6 li:nth-last-child(-n+6), .clients-border.grid-5 li:nth-last-child(-n+5), .clients-border.grid-4 li:nth-last-child(-n+4), .clients-border.grid-3 li:nth-last-child(-n+3), .clients-border.grid-2 li:nth-last-child(-n+2) { border-bottom:none; } /* ========================================================================== Counters ============================================================================= */ .nc-style-1 .counter-icon { font-size: 30px; border: 1px solid #ddd; display: inline-block; padding: 20px; -webkit-box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); -moz-box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); margin-bottom: 20px; } .nc-style-2 .counter-icon{ position: relative; padding: 20px; border-radius: 50%; font-size: 30px; display: inline-block; background-color: #009c77; color: #fff; -webkit-box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); -moz-box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); box-shadow: 1px 10px 15px -6px rgba(0,0,0,0.75); margin-bottom: 20px; } .nc-style-1 .counter, .nc-style-2 .counter { font-size: 18px; font-weight: bold; } .nc-style-1 p, .nc-style-2 p { font-style: italic; font-size: 16px; padding-top: 10px; } .nc-style-3 { color: #fff; font-size: 26px; display: inline-block; margin: 20px 0; } .nc-style-3-dark { color: #000; font-size: 26px; display: inline-block; margin: 20px 0; } .nc-style-3 .counter-icon { font-size: 30px; padding: 20px; border: 2px solid #fff; margin-bottom: 20px; } .nc-style-3-dark .counter-icon { font-size: 30px; padding: 20px; border: 2px solid #000; margin-bottom: 20px; } .nc-style-3-circular .counter-icon { border-radius:50%; } .nc-text { font-size: 16px; font-weight: bold; } .nc-style-4 span, .nc-style-5 span { font-size: 50px; font-weight: bold; } .nc-style-4 h5, .nc-style-5 h5 { text-transform: uppercase; letter-spacing: 2px; } .nc-style-5 .counter-icon { border-bottom: 5px solid #333; padding-bottom: 30px; display: table; margin-left: auto; margin-right: auto; } .counter-border { border-right: 1px solid #e6e6e6; } /* ========================================================================== Tooltip ============================================================================= */ .tooltip-inner { border-radius: 0; } .clients .tip-top, .clients-grid .tip-top { display: block; } /* ========================================================================== Bootstrap Slider ============================================================================= */ .carousel { margin: 20px 0; } .carousel-indicators li { border-radius:0; } .carousel-inner .item:hover img { opacity: 1; } .carousel-control.left, .carousel-control.right { background-image: none; } .carousel-caption.big-caption { right: 70%; top: 0; left: 0; padding: 40px; height: 100%; z-index: 0; background-color: rgba(0,0,0,0.7); text-align: left; } .carousel-caption.small-caption { right: inherit; bottom: 20%; left: 0; z-index: 0; background-color: rgba(0,0,0,0.7); text-align: left; padding: 0 5px; text-align: center; } .carousel-control .fa { position: absolute; top: 47%; z-index: 5; display: inline-block; opacity: 0; } .carousel:hover .carousel-control .fa { opacity: 1; background-color: rgba(0,0,0,0.8); padding: 0 10px 2px 12px; } .right.carousel-control .fa { right: 0; } .left.carousel-control .fa { left: 0; } .carousel-caption.big-caption h4 { padding-bottom: 20px; color:#fff; } .carousel-caption.small-caption h4 { padding:5px; color:#fff; } .carousel-caption.big-caption p { font-size: 13px; } /******************************************************************** Fixed Bootstrap Slider ********************************************************************/ .fixed-carousel { position:fixed; height:100%; } .fixed-carousel .carousel-inner { height:100%; } .fixed-carousel .carousel-inner>.item { height: 100%; background-size:cover; background-repeat:no-repeat; } /* ========================================================================== Trailer Images ============================================================================= */ figure.trailer { position: relative; overflow: hidden; background: #009c77; text-align: center; cursor: pointer; margin: 20px auto 0; } figure.trailer img { position: relative; display: block; margin: 0 auto; opacity: 0.8; } figure.trailer figcaption { padding: 30px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure.trailer h2 { text-transform: uppercase; margin: 0; font-weight: 600; } figure.trailer .trailer-dark h2 { color:#fff; } figure.trailer p { margin: 0; } .trailer-text { display: table; width: 100%; height: 100%; color: #333; } .trailer-text .trailer-center { display: table-cell; vertical-align: middle; } .trailer-text .trailer-bottom { display: table-cell; vertical-align: bottom; } .trailer-text .trailer-top { display: table-cell; vertical-align: top; } .trailer-light { display: block; padding: 5px; background-color: rgba(255,255,255,0.8); color: #333; } .trailer-dark { display: block; padding: 5px; background-color: rgba(51,51,51,0.6); color: #fff; } .trailer-full-dark .trailer-dark, .trailer-full-light .trailer-light { background-color: transparent; } .trailer-full-dark { background-color: rgba(51,51,51,0.6); } .trailer-full-light { background-color: rgba(255,255,255,0.8); } figure.trailer figcaption.trailer-full-text { padding: 0; } /*Trailer Side*/ .trailer-side { position:relative; font-family: 'Montserrat', sans-serif; text-transform:uppercase; } .trailer-side-caption { position:absolute; top:0; width:100%; height:100%; } .trailer-side-center { display:table; width:100%; height:100%; } .ts-overlay { background-color:rgba(0,0,0,0.4); } .trailer-side-big, .trailer-side-small{ display:table-cell; vertical-align:middle; } .trailer-side-big { font-weight: bold; width:25%; text-align:center; } .tsb-text { margin:0 30px 0 0; color:#fff; font-size: 275px; line-height: 195px; letter-spacing: -25px; } .trailer-side-small { padding-left:20px; } .tss-text { font-size: 40px; border-left: 5px solid #fff; margin:0; padding-left:20px; color:#fff; } .tss-subheading { font-size:25px; } /* ========================================================================== Tables ============================================================================= */ .table-theme thead{ background-color:#009c77; color:#fff; } .table-theme>thead>tr>th { border-color:#386ece; } .table-theme { border-top-color:#386ece; } .table-theme.table-hover>tbody>tr:hover>td, .table-theme.table-hover>tbody>tr:hover>th { background-color:#009c77; color:#fff; border-color:#386ece; } .table-dark thead{ background-color:#333; color:#fff; } .table-dark tbody{ background-color:#eee; } .table-dark>thead>tr>th { border-color:#666; } .table-dark{ border-top-color:#666; } .table-dark.table-hover>tbody>tr:hover>td, .table-dark.table-hover>tbody>tr:hover>th { background-color:#333; color:#fff; border-color:#666; } .table-theme>thead>tr>th, .table-theme>thead>tr>td, .table-dark>thead>tr>th, .table-dark>thead>tr>td { border-bottom-width:1px; } .table-body-light tbody{ background-color:#fff; } /* ========================================================================== 404 Error ============================================================================= */ p.error{ font-size: 200px; color:#000; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } p.error.white{ color: #fff; } /* ========================================================================== Coming Soon ============================================================================= */ .coming-soon .sub-heading { border-bottom: 3px solid #fff; border-top: 3px solid #fff; padding: 40px 0; } .coming-soon #countdown { letter-spacing: 2px; font-weight: bold; display: inline-table; text-align:center; } .coming-soon .ticker-1 { max-width: 150px; padding-right: 20px; display: inline-block; font-size: 40px; } .coming-soon .ticker-2 { max-width: 150px; padding-left: 20px; padding-right: 20px; display: inline-block; font-size: 40px; } .coming-soon .ticker-3 { max-width: 150px; padding-left: 20px; padding-right: 20px; display: inline-block; font-size: 40px; } .coming-soon .ticker-4 { max-width: 150px; padding-left: 20px; display: inline-block; font-size: 40px; } /* ========================================================================== Search Result Page ============================================================================= */ .results-found { text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 40px; } ol.search-list { counter-reset:li; /* Initiate a counter */ margin-left:0; padding-left:0; } ol.search-list > li:before { content: counter(li); counter-increment: li; position: absolute; top: -2px; left: -2em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 45px; margin-right: 8px; padding: 10px; border: 1px solid #e1e1e1; color: #fff; color: #666; background: #fcfcfc; font-weight: bold; text-align: center; } ol.search-list > li { position: relative; margin-bottom: 30px; margin-left: 28px; padding: 0 40px; list-style: none; } /* ========================================================================== Footer ============================================================================= */ .footer { background: #222; border-top: 4px solid #009c77; font-size: 0.9em; padding: 100px 0 0; position: relative; clear: both; margin-top: 100px; } .footer > .container { margin-bottom: 90px; } .footer p, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #999; } .footer a { color:#818181; } .footer a:hover { color:#fff; } .footer .input-group a:hover { color: #FFF; } .footer .footer-title { color: #fff; font-weight: 600; margin-bottom: 25px; margin-top:0; text-shadow: 1px 1px 1px #000; } .footer ul { margin-bottom: 0; } .page-links li{ padding-bottom: 10px; } .page-links li:last-child{ padding-bottom: 0; } .footer .page-tags, .footer .page-tags-dark { line-height:2.9; } .footer .newsletter .form-group { margin-bottom: 0; } .footer .footer-copyright .row > div { margin: 25px 0; } .footer .footer-copyright img.logo-copyright { float:left; height: 15px; padding-right: 10px; padding-top:1px; } /*Latest Projects*/ .latest-projects li { float: left; width: 30%; margin: 0 3% 10px 0; } .latest-projects li img:hover { opacity: 0.7; } /*Footer Popular/Recent Posts*/ .footer .popular-posts li { border-bottom: 1px solid #333; } .footer .popular-posts li p { margin-bottom: 0; } /*Footer Contact*/ .footer .contact p { border-bottom: 1px solid #333; margin-bottom: 10px; padding-bottom: 10px; } /*Copyright*/ .footer .footer-copyright { background: #1a1a1a; border-top: 1px solid #333; } .footer .footer-copyright ul { text-align: right; } .footer .footer-copyright nav ul { list-style: none; margin: 0; padding: 0; } .footer .footer-copyright nav ul li { border-left: 1px solid #505050; display: inline-block; line-height: 12px; margin: 0; padding: 0 8px; } .footer .footer-copyright nav ul li:first-child { border: medium none; padding-left: 0; } .footer .footer-copyright nav ul li:last-child { padding-right: 0; } .footer .footer-copyright p { margin: 0; padding: 0; } .footer .footer-copyright nav ul.social-icons li { margin-top: 10px; border-left: none; } /*Only Copyright Footer*/ .footer.footer-only-copyright { padding: 0; } .footer.footer-only-copyright .footer-copyright { border: none; } .footer .footer-copyright nav ul.social-icons li:last-child { padding-right: 0; } /*Footer Style 2*/ .footer-2{ margin: -50px 0 50px; } .footer-2 .container .row > div { margin-bottom: 0; } .footer .container .footer-2 > div { margin-bottom: 0; } .footer-2 p.copyright-text { margin-bottom: 50px; } .footer-2 .footer-title h1, .footer-2 .footer-title h2, .footer-2 .footer-title h3, .footer-2 .footer-title h4, .footer-2 .footer-title h5, .footer-2 .footer-title h6, .footer-2 .footer-title p, .footer-2 .footer-title i { color: #ddd; text-transform: uppercase; font-weight: bold; } .footer-2 .footer-title i { font-weight: normal; } .footer-2 ul.social-icons li { margin-top: 0px; } /*Footer Style 2 - Version 2*/ .footer-2-v2 { margin-bottom: 0; } .footer-2-v2 .footer-copyright { border: none; background: #222; padding: 0; } .footer .footer-2-v2 .footer-copyright .row > div { margin:0; } /*Footer With Partial Background Color*/ .footer.footer-wbg > .container { margin-bottom: 0; } .footer.footer-wbg > .container .row > div { padding: 30px 0; } .footer-bg { background-color: #009c77; color: #fff; } .footer-bg-content { padding:0 30px; } .footer.footer-wbg { padding-top: 0; } .footer-bg ul li { padding-top: 20px; } .footer-bg ul li:last-child { padding-bottom: 10px; } .footer .footer-bg .contact p { color: #fff; border: none; padding-bottom: 0; } .footer .footer-bg a { color: #fff; } .footer-wbg.footer .footer-bg a:hover { color: #000; } .footer.footer-wbg .footer-copyright > .container .row > div { padding: 0; } /*Plain Footer*/ .footer-plain { background: #333; } .footer-plain .footer-title { text-shadow: none; color: #eee; margin-bottom: 20px; font-weight: bold; text-transform: uppercase; } .footer-plain a, .footer-plain .input-group a:hover, .footer-plain .footer-copyright p { color: #eee; } .footer-plain .footer-copyright { background: transparent; color: #eee; border-top: 1px solid #666; } /*Light & Theme*/ .footer-light { background: #fff; } .footer-light .footer-title, .footer-light a, .footer-light p, .footer-light .footer-copyright p { color: #333; } .footer-light a:hover{ color: #009c77; } .footer-light .footer-bg a:hover { color: #000; } .footer-light .footer-copyright { border-top: 1px solid #eee; } .footer-light .footer-copyright { background: #f6f6f6; } .footer-light .footer-bg a { color: #fff; } .footer-light .footer-title, .footer-theme .footer-title { text-shadow: none; } .footer-theme { background: #009c77; border-top: 4px solid #222; color: #eee; } .footer-theme p { color: #eee; } .footer-theme .footer-copyright { border-top: 1px solid #1a1a1a; } .footer-theme a { color:#fff; } .footer-theme a:hover{ color: #eee; } .footer-theme .footer-copyright nav ul li { border-color: #999; } .footer-theme .footer-copyright { background: #222; } .footer-theme .label-theme { background-color: #333; } .footer-theme .footer-bg{ background-color: #333; } .footer-theme.footer-wbg .footer-bg a:hover { color: #009c77; } .footer-theme .footer-2-v2 .footer-copyright, .footer-light .footer-2-v2 .footer-copyright { border: none; padding: 0; } .footer-theme .footer-2-v2 .footer-copyright{ background: #009c77; } .footer-light .footer-2-v2 .footer-copyright{ background: #fff; } .footer-light .footer-2 .footer-title h1, .footer-light .footer-2 .footer-title h2, .footer-light .footer-2 .footer-title h3, .footer-light .footer-2 .footer-title h4, .footer-light .footer-2 .footer-title h5, .footer-light .footer-2 .footer-title h6, .footer-light .footer-2 .footer-title i { color: #333; } .footer-theme .footer-2 .footer-title h1, .footer-theme .footer-2 .footer-title h2, .footer-theme .footer-2 .footer-title h3, .footer-theme .footer-2 .footer-title h4, .footer-theme .footer-2 .footer-title h5, .footer-theme .footer-2 .footer-title h6, .footer-theme .footer-2 .footer-title i { color: #fff; } .footer-theme .contact p { border-bottom: 1px solid #000; } .footer-light .contact p { border-bottom: 1px solid #eee; } .footer-plain.footer-theme .footer-copyright, .footer-plain.footer-light .footer-copyright { background: transparent; } .footer.footer-light .popular-posts li { border-color: #eee; } .footer-theme a:hover .page-tags-dark { background-color:#333; border-color:#333; } /*Uncover Footer*/ .uncover-footer-body { position:relative; z-index:0; } .uncover-footer-content { position:relative; z-index:1; background-color:#fff; } .uncover-footer-body footer { position:relative; z-index:-2; margin-top: 0; border-top:none; padding-top:0; } .uncover-footer-body .uncover-footer > .container { margin-bottom: 30px; padding-top:20px; } .uncover-footer { position:fixed; right:0; left:0; bottom:0; z-index:-1; } .uncover-footer .footer-2 { margin: 50px 0; } /*Without Copyright Footer*/ .footer-no-copyright { padding: 70px 0; } .footer-no-copyright > .container { margin-bottom:0; } .uncover-footer-body .footer-no-copyright .uncover-footer > .container { margin-bottom: 70px; margin-top:70px; } /* ========================================================================== Social Icons ============================================================================= */ .social-icons { background: transparent; } ul.social-icons { margin: 5px 0 5px -5px; } ul.social-fixed { position:fixed; top:50%%; left:10px; z-index:1; } ul.social-fixed.sf-right { right:7px; left:auto; } ul.social-fixed li a{ margin-bottom:5px; } ul.social-fixed li:last-child() a{ margin-bottom:0; } .social-icons.sm a { border: 1px solid #009c77; color: #009c77; font-size: 14px; display: inline-block; float: left; height: 27px; line-height: 26px; position: relative; text-align: center; width: 27px; } .social-icons.sm.circle a { border-radius: 27px; } .social-icons a { border: 1px solid #009c77; color: #009c77; font-size: 17px; display: inline-block; float: left; height: 35px; line-height: 34px; position: relative; text-align: center; width: 35px; } .social-icons.circle a { border-radius: 35px; } .social-icons.lg a { border: 1px solid #009c77; color: #009c77; font-size: 20px; display: inline-block; float: left; height: 50px; line-height: 49px; position: relative; text-align: center; width: 50px; } .social-icons.lg.circle a { border-radius: 50px; } .social-icons a:hover { background: #009c77; color: white; } .social-icons a, .social-icons a { margin-right: 10px; } .social-icons.si-theme-hover a:hover { color:#009c77 !important; background-color:transparent; } .social-icons.si-no-border.inverse a{ width: auto; height: 17px; line-height: 17px; } .social-icons.si-no-border.inverse .sm a{ width: auto; height: 14px; line-height: 14px; } .social-icons.si-no-border.inverse .lg a{ width: auto; height: 20px; line-height: 20px; } ul.social-icons.si-no-border.inverse { margin-left: 0; } .social-icons.si-no-border.inverse li{ padding: 0 15px 5px 0; } .social-icons.si-no-border.inverse.sm li{ padding: 0 10px 5px 0; } .social-icons.si-no-border.inverse.lg li{ padding-right: 20px; } .social-icons.si-no-border.inverse.lg li:last-child { padding-right:0; } /* Social-Icons-2 */ .social-icons.si-2.sm a, .social-icons.si-2 a, .social-icons.si-2.lg a { border: 1px solid #333; background-color: #333; color: #fff; } /* Social-Icons-3 */ .social-icons.si-3.sm a, .social-icons.si-3 a, .social-icons.si-3.lg a { border: 1px solid #aaa; color: #aaa; } .social-icons.si-3-white.sm a, .social-icons.si-3-white a, .social-icons.si-3-white.lg a { border: 1px solid #fff; color: #fff; } /* Social-Icons-4 */ .social-icons.si-4.sm a, .social-icons.si-4 a, .social-icons.si-4.lg a { border-color: #fff; background-color: #fff; color: #333; -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15); } /* Social-Icons-5 */ .social-icons.si-5.sm a:hover, .social-icons.si-5 a:hover, .social-icons.si-5.lg a:hover { position: relative; top: -2px; } /* Social-Icons-6 */ .social-icons.si-6.sm a, .social-icons.si-6 a, .social-icons.si-6.lg a { margin-right: 0; border: transparent; color: #333; } .social-icons.si-6-theme.sm a, .social-icons.si-6-theme a, .social-icons.si-6-theme.lg a { color: #009c77; margin-right: 0; border: transparent; } .social-icons.si-6-white.sm a, .social-icons.si-6-white a, .social-icons.si-6-white.lg a { color: #fff; margin-right: 0; border: transparent; } .social-icons.si-6-white.si-border li, .social-icons.si-6-theme.si-border li, .social-icons.si-6.si-border li { padding: 0; border-right: 1px solid #ccc; margin-right:-5px; } .social-icons.si-6-white.si-border li:last-child, .social-icons.si-6-theme.si-border li:last-child , .social-icons.si-6.si-border li:last-child { border-right: none; margin-right:0; } .social-icons.si-6-white.si-border.sm li, .social-icons.si-6-theme.si-border.sm li{ max-width:27px; } .social-icons.si-6-white.si-border li, .social-icons.si-6-theme.si-border li{ max-width:35px; } .social-icons.si-6-white.si-border.lg li, .social-icons.si-6-theme.si-border.lg li{ max-width:50px; } /*Last Child*/ .social-icons a:last-child { margin-right: 0!important; } .social-icons li:last-child { padding-right: 0 !important; } /*Social Colors*/ .color a.android:hover, .si-5 a.android, .inverse a.android { border-color: #a4ca39; background-color: #a4ca39; color: #fff; } .color a.behance:hover, .si-5 a.behance, .inverse a.behance { border-color: #1769ff; background-color: #1769ff; color: #fff; } .color a.css3:hover, .si-5 a.css3, .inverse a.css3 { border-color: #3388cb; background-color: #3388cb; color: #fff; } .color a.delicious:hover, .si-5 a.delicious, .inverse a.delicious { border-color: #0049cc; background-color: #0049cc; color: #fff; } .color a.deviantart:hover, .si-5 a.deviantart, .inverse a.deviantart { border-color: #c1d826; background-color: #c1d826; color: #fff; } .color a.digg:hover, .si-5 a.digg, .inverse a.digg { border-color: #1b5891; background-color: #1b5891; color: #fff; } .color a.dribbble:hover, .si-5 a.dribbble, .inverse a.dribbble { border-color: #ef6897; background-color: #ef6897; color: #fff; } .color a.dropbox:hover, .si-5 a.dropbox, .inverse a.dropbox { border-color: #007ee5; background-color: #007ee5; color: #fff; } .color a.drupal:hover, .si-5 a.drupal, .inverse a.drupal { border-color: #3677ad; background-color: #3677ad; color: #fff; } .color a.facebook:hover, .si-5 a.facebook, .inverse a.facebook { border-color: #4d67a4; background-color: #4d67a4; color: #fff; } .color a.flickr:hover, .si-5 a.flickr, .inverse a.flickr { border-color: #ff0084; background-color: #ff0084; color: #fff; } .color a.google-plus:hover, .si-5 a.google-plus, .inverse a.google-plus { border-color: #d84b35; background-color: #d84b35; color: #fff; } .color a.google-wallet:hover, .si-5 a.google-wallet, .inverse a.google-wallet { border-color: #4285f4; background-color: #4285f4; color: #fff; } .color a.hacker-news:hover, .si-5 a.hacker-news, .inverse a.hacker-news { border-color: #ff6600; background-color: #ff6600; color: #fff; } .color a.html5:hover, .si-5 a.html5, .inverse a.html5 { border-color: #e44d26; background-color: #e44d26; color: #fff; } .color a.instagram:hover, .si-5 a.instagram, .inverse a.instagram { border-color: #5d4a3b; background-color: #5d4a3b; color: #fff; } .color a.jsfiddle:hover, .si-5 a.jsfiddle, .inverse a.jsfiddle { border-color: #4679bd; background-color: #4679bd; color: #fff; } .color a.lastfm:hover, .si-5 a.lastfm, .inverse a.lastfm { border-color: #d12127; background-color: #d12127; color: #fff; } .color a.linkedin:hover, .si-5 a.linkedin, .inverse a.linkedin { border-color: #0077b4; background-color: #0077b4; color: #fff; } .color a.paypal:hover, .si-5 a.paypal, .inverse a.paypal { border-color: #053259; background-color: #053259; color: #fff; } .color a.pinterest:hover, .si-5 a.pinterest, .inverse a.pinterest { border-color: #c9181f; background-color: #c9181f; color: #fff; } .color a.share-alt:hover, .si-5 a.share-alt, .inverse a.share-alt { border-color: #02bf03; background-color: #02bf03; color: #fff; } .color a.skype:hover, .si-5 a.skype, .inverse a.skype { border-color: #09b1ef; background-color: #09b1ef; color: #fff; } .color a.slideshare:hover, .si-5 a.slideshare, .inverse a.slideshare { border-color: #e9852a; background-color: #e9852a; color: #fff; } .color a.soundcloud:hover, .si-5 a.soundcloud, .inverse a.soundcloud { border-color: #ff5500; background-color: #ff5500; color: #fff; } .color a.spotify:hover, .si-5 a.spotify, .inverse a.spotify { border-color: #81b900; background-color: #81b900; color: #fff; } .color a.stack-exchange:hover, .si-5 a.stack-exchange, .inverse a.stack-exchange { border-color: #094d99; background-color: #094d99; color: #fff; } .color a.stack-overflow:hover, .si-5 a.stack-overflow, .inverse a.stack-overflow { border-color: #ff7600; background-color: #ff7600; color: #fff; } .color a.stumbleupon:hover, .si-5 a.stumbleupon, .inverse a.stumbleupon { border-color: #ea4924; background-color: #ea4924; color: #fff; } .color a.tumblr:hover, .si-5 a.tumblr, .inverse a.tumblr { border-color: #2c4762; background-color: #2c4762; color: #fff; } .color a.twitch:hover, .si-5 a.twitch, .inverse a.twitch { border-color: #6441a5; background-color: #6441a5; color: #fff; } .color a.twitter:hover, .si-5 a.twitter, .inverse a.twitter { border-color: #55acee; background-color: #55acee; color: #fff; } .color a.vimeo-square:hover, .si-5 a.vimeo-square, .inverse a.vimeo-square { border-color: #1ab7ea; background-color: #1ab7ea; color: #fff; } .color a.vine:hover, .si-5 a.vine, .inverse a.vine { border-color: #00bf8f; background-color: #00bf8f; color: #fff; } .color a.vk:hover, .si-5 a.vk, .inverse a.vk { border-color: #44678d; background-color: #44678d; color: #fff; } .color a.windows:hover, .si-5 a.windows, .inverse a.windows { border-color: #00adf1; background-color: #00adf1; color: #fff; } .color a.wordpress:hover, .si-5 a.wordpress, .inverse a.wordpress { border-color: #106c94; background-color: #106c94; color: #fff; } .color a.xing:hover, .si-5 a.xing, .inverse a.xing { border-color: #005d5d; background-color: #005d5d; color: #fff; } .color a.yahoo:hover, .si-5 a.yahoo, .inverse a.yahoo { border-color: #65106e; background-color: #65106e; color: #fff; } .color a.yelp:hover, .si-5 a.yelp, .inverse a.yelp { border-color: #bc0d02; background-color: #bc0d02; color: #fff; } .color a.youtube:hover, .si-5 a.youtube, .inverse a.youtube { border-color: #cb2025; background-color: #cb2025; color: #fff; } .color a.rss:hover, .si-5 a.rss, .inverse a.rss { border-color: #fb7629; background-color: #fb7629; color: #fff; } .color a.cloud:hover, .si-5 a.cloud, .inverse a.cloud { border-color: #3fa2e3; background-color: #3fa2e3; color: #fff; } .color a.apple:hover, .si-5 a.apple, .inverse a.apple, .color a.codepen:hover, .si-5 a.codepen, .inverse a.codepen, .color a.linux:hover, .si-5 a.linux, .inverse a.linux, .color a.github:hover, .si-5 a.github, .inverse a.github, .color a.reddit:hover, .si-5 a.reddit, .inverse a.reddit, .color a.steam:hover, .si-5 a.steam, .inverse a.steam, .color a.download:hover, .si-5 a.download, .inverse a.download, .color a.microphone:hover, .si-5 a.microphone, .inverse a.microphone, .color a.cc:hover, .si-5 a.cc, .inverse a.cc, .color a.bookmark:hover, .si-5 a.bookmark, .inverse a.bookmark, .color a.phone:hover, .si-5 a.phone, .inverse a.phone, .color a.envelope-o:hover, .si-5 a.envelope-o, .inverse a.envelope-o, .color a.print:hover, .si-5 a.print, .inverse a.print { border-color: #000; background-color: #000; color: #fff; } /*Inverse Colors*/ .inverse a:hover { background-color: transparent; } .si-1.si-no-border.inverse a { border: none; background-color: transparent; color: #009c77; } .si-6.si-no-border.inverse a { border: none; background-color: transparent; color: #333; } .si-6-white.si-no-border.inverse a { border: none; background-color: transparent; color: #fff; } .inverse a.android:hover { color: #a4ca39; } .inverse a.behance:hover { color: #1769ff; } .inverse a.css3:hover { color: #3388cb; } .inverse a.delicious:hover { color: #0049cc; } .inverse a.deviantart:hover { color: #c1d826; } .inverse a.digg:hover { color: #1b5891; } .inverse a.dribbble:hover { color: #ef6897; } .inverse a.dropbox:hover { color: #007ee5; } .inverse a.drupal:hover { color: #3677ad; } .inverse a.facebook:hover { color: #4d67a4; } .inverse a.flickr:hover { color: #ff0084; } .inverse a.google-plus:hover { color: #d84b35; } .inverse a.google-wallet:hover { color: #4285f4; } .inverse a.hacker-news:hover { color: #ff6600; } .inverse a.html5:hover { color: #e44d26; } .inverse a.instagram:hover { color: #5d4a3b; } .inverse a.jsfiddle:hover { color: #4679bd; } .inverse a.lastfm:hover { color: #d12127; } .inverse a.linkedin:hover { color: #0077b4; } .inverse a.paypal:hover { color: #053259; } .inverse a.pinterest:hover { color: #c9181f; } .inverse a.share-alt:hover { color: #02bf03; } .inverse a.skype:hover { color: #09b1ef; } .inverse a.slideshare:hover { color: #e9852a; } .inverse a.soundcloud:hover { color: #ff5500; } .inverse a.spotify:hover { color: #81b900; } .inverse a.stack-exchange:hover { color: #094d99; } .inverse a.stack-overflow:hover { color: #ff7600; } .inverse a.stumbleupon:hover { color: #ea4924; } .inverse a.tumblr:hover { color: #2c4762; } .inverse a.twitch:hover { color: #6441a5; } .inverse a.twitter:hover { color: #55acee; } .inverse a.vimeo-square:hover { color: #1ab7ea; } .inverse a.vine:hover { color: #00bf8f; } .inverse a.vk:hover { color: #44678d; } .inverse a.windows:hover { color: #00adf1; } .inverse a.wordpress:hover { color: #106c94; } .inverse a.xing:hover { color: #005d5d; } .inverse a.yahoo:hover { color: #65106e; } .inverse a.yelp:hover { color: #bc0d02; } .inverse a.youtube:hover { color: #cb2025; } .inverse a.rss:hover { color: #fb7629; } .inverse a.cloud:hover { color: #3fa2e3; } .inverse a.apple:hover, .inverse a.codepen:hover, .inverse a.github:hover, .inverse a.linux:hover, .inverse a.reddit:hover, .inverse a.steam:hover, .inverse a.download:hover, .inverse a.microphone:hover, .inverse a.cc:hover, .inverse a.bookmark:hover, .inverse a.phone:hover, .inverse a.envelope-o:hover, .inverse a.print:hover { color: #000; } /******************************************************************** Login & SignUp ********************************************************************/ .btn-login { width:200px; text-transform:uppercase; font-size:12px; font-weight:bold; color:#fff; } .btn-login:hover, .btn-login:focus, .btn-login:active { color:#fff; } .btn.btn-facebook { background-color:#45619d; border-color: #45619d; } .btn.btn-twitter { background-color:#5eaade; border-color: #5eaade; } .btn.btn-gplus { background-color:#dd4b39; border-color: #dd4b39; } .btn-icon { margin-right: 15px; } /* ========================================================================== Text Rotator ============================================================================= */ .text-ticker ul, .text-ticker li { width:100%; } .text-ticker h1, .text-ticker h2, .text-ticker h3, .text-ticker h4, .text-ticker h5, .text-ticker h6, .text-ticker p { margin:0; } /* ========================================================================== Dark Section Font Color ============================================================================= */ .text-light { color: #fff !important; } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6{ color: #fff; } .text-light.fa { color:#fff; } .text-light a { color: #eee; } .text-light a:hover { color:#fff; } .text-light.blog a { color: #fff; opacity: 0.7; } .text-light.blog a:hover, .text-light .blog a:hover { opacity: 1; text-decoration:none; } .text-light .filter a:hover { opacity: 1; text-decoration:none; } /* Lighter */ .text-lighter { color: #aaa; } .text-lighter h1, .text-lighter h2, .text-lighter h3, .text-lighter h4, .text-lighter h5, .text-lighter h6{ color: #aaa; } .text-lighter.fa { color:#aaa; } .text-lighter a { color: #aaa; } .text-lighter a:hover { color:#fff; } .text-lighter a.btn:hover { text-decoration: none; } .text-lighter.blog a { color: #aaa; } .text-lighter.blog a:hover, .text-lighter .blog a:hover { color:#fff; } /* ========================================================================== Extra Font Style ============================================================================= */ .text-secondary { font-family: 'Montserrat', sans-serif !important; } .text-main { font-family: 'Open Sans',sans-serif !important; } .text-theme { color: #009c77 !important; } .text-dark { color:#333 !important; } .text-darker { color:#000 !important; } .text-vertical-large { line-height: 160% !important; } .weight-300 { font-weight: 300 !important; } .weight-400 { font-weight: 400 !important; } .weight-500 { font-weight: 500 !important; } .weight-600 { font-weight: 600 !important; } .weight-700 { font-weight: 700 !important; } /******************************************************************** Other Styles ********************************************************************/ .theme-background { background-color:#009c77 !important; } /* Letter Spacings */ .letter-spacing-0 { letter-spacing: 0px !important; } .letter-spacing-1 { letter-spacing: 1px !important; } .letter-spacing-2 { letter-spacing: 2px !important; } .letter-spacing-3 { letter-spacing: 3px !important; } .letter-spacing-4 { letter-spacing: 4px !important; } .letter-spacing-5 { letter-spacing: 5px !important; } .letter-spacing-10 { letter-spacing: 10px !important; } /* Word Spacings */ .word-spacing-1 { word-spacing: 1px !important; } .word-spacing-2 { word-spacing: 2px !important; } .word-spacing-3 { word-spacing: 3px !important; } .word-spacing-4 { word-spacing: 4px !important; } .word-spacing-5 { word-spacing: 5px !important; } .word-spacing-10 { word-spacing: 10px !important; } /* Margins */ .no-margin-top { margin-top: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-margin-side { margin-left: 0 !important; margin-right: 0 !important; } .no-margin { margin: 0 !important; } .mar-top-100 { margin-top: 100px !important; } .mar-top-50 { margin-top: 50px !important; } .mar-top-45 { margin-top: 45px !important; } .mar-top-40 { margin-top: 40px !important; } .mar-top-35 { margin-top: 35px !important; } .mar-top-30 { margin-top: 30px !important; } .mar-top-25 { margin-top: 25px !important; } .mar-top-20 { margin-top: 20px !important; } .mar-top-15 { margin-top: 15px !important; } .mar-top-10 { margin-top: 10px !important; } .mar-top-5 { margin-top: 5px !important; } .mar-bot-100 { margin-bottom: 100px !important; } .mar-bot-50 { margin-bottom: 50px !important; } .mar-bot-45 { margin-bottom: 45px !important; } .mar-bot-40 { margin-bottom: 40px !important; } .mar-bot-35 { margin-bottom: 35px !important; } .mar-bot-30 { margin-bottom: 30px !important; } .mar-bot-25 { margin-bottom: 25px !important; } .mar-bot-20 { margin-bottom: 20px !important; } .mar-bot-15 { margin-bottom: 15px !important; } .mar-bot-10 { margin-bottom: 10px !important; } .mar-bot-5 { margin-bottom: 5px !important; } .mar-left-100 { margin-left: 100px !important; } .mar-left-50 { margin-left: 50px !important; } .mar-left-45 { margin-left: 45px !important; } .mar-left-40 { margin-left: 40px !important; } .mar-left-35 { margin-left: 35px !important; } .mar-left-30 { margin-left: 30px !important; } .mar-left-25 { margin-left: 25px !important; } .mar-left-20 { margin-left: 20px !important; } .mar-left-15 { margin-left: 15px !important; } .mar-left-10 { margin-left: 10px !important; } .mar-left-5 { margin-left: 5px !important; } .mar-right-100 { margin-right: 100px !important; } .mar-right-50 { margin-right: 50px !important; } .mar-right-45 { margin-right: 45px !important; } .mar-right-40 { margin-right: 40px !important; } .mar-right-35 { margin-right: 35px !important; } .mar-right-30 { margin-right: 30px !important; } .mar-right-25 { margin-right: 25px !important; } .mar-right-20 { margin-right: 20px !important; } .mar-right-15 { margin-right: 15px !important; } .mar-right-10 { margin-right: 10px !important; } .mar-right-5 { margin-right: 5px !important; } /* Paddings */ .no-padding-top { padding-top: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .no-padding-side { padding-left: 0 !important; padding-right: 0 !important; } .no-padding { padding: 0 !important; } .pad-left-100 { padding-left: 100px !important; } .pad-left-50 { padding-left: 50px !important; } .pad-left-45 { padding-left: 45px !important; } .pad-left-40 { padding-left: 40px !important; } .pad-left-35 { padding-left: 35px !important; } .pad-left-30 { padding-left: 30px !important; } .pad-left-25 { padding-left: 25px !important; } .pad-left-20 { padding-left: 20px !important; } .pad-left-15 { padding-left: 15px !important; } .pad-left-10 { padding-left: 10px !important; } .pad-left-5 { padding-left: 5px !important; } .pad-right-100 { padding-right: 100px !important; } .pad-right-50 { padding-right: 50px !important; } .pad-right-45 { padding-right: 45px !important; } .pad-right-40 { padding-right: 40px !important; } .pad-right-35 { padding-right: 35px !important; } .pad-right-30 { padding-right: 30px !important; } .pad-right-25 { padding-right: 25px !important; } .pad-right-20 { padding-right: 20px !important; } .pad-right-15 { padding-right: 15px !important; } .pad-right-10 { padding-right: 10px !important; } .pad-right-5 { padding-right: 5px !important; } .pad-top-100 { padding-top: 100px !important; } .pad-top-50 { padding-top: 50px !important; } .pad-top-45 { padding-top: 45px !important; } .pad-top-40 { padding-top: 40px !important; } .pad-top-35 { padding-top: 35px !important; } .pad-top-30 { padding-top: 30px !important; } .pad-top-25 { padding-top: 25px !important; } .pad-top-20 { padding-top: 20px !important; } .pad-top-15 { padding-top: 15px !important; } .pad-top-10 { padding-top: 10px !important; } .pad-top-5 { padding-top: 5px !important; } .pad-bot-100 { padding-bottom: 100px !important; } .pad-bot-50 { padding-bottom: 50px !important; } .pad-bot-45 { padding-bottom: 45px !important; } .pad-bot-40 { padding-bottom: 40px !important; } .pad-bot-35 { padding-bottom: 35px !important; } .pad-bot-30 { padding-bottom: 30px !important; } .pad-bot-25 { padding-bottom: 25px !important; } .pad-bot-20 { padding-bottom: 20px !important; } .pad-bot-15 { padding-bottom: 15px !important; } .pad-bot-10 { padding-bottom: 10px !important; } .pad-bot-5 { padding-bottom: 5px !important; } /* Alignment */ .va-middle { vertical-align:middle; } .right-align { float: right; } .left-align { float: left; } .read-only { display:none; } /* ========================================================================== Responsive Styles - Except Header ============================================================================= */ /*Large Screens - Above 1224px*/ @media only screen and (min-width : 1224px) { /*3 Column Portfolio Grid*/ .grid li { width: 33.33%; } .grid li:nth-child(2n+1) { clear: left; } .grid li:nth-child(n+1) { clear: none; } /*4 Column Portfolio Grid*/ .grid-4 li { width: 25%; } .grid--4 li:nth-child(2n+1) { clear: left; } .grid-4 li:nth-child(n+1) { clear: none; } /*5 Column Portfolio Grid*/ .grid-5 li { width: 20%; } .grid-5 li:nth-child(2n+1) { clear: left; } .grid-5 li:nth-child(n+1) { clear: none; } /*effect 2 Portfolio*/ .col-3 figure.effect-2 span.tags, .col-4 figure.effect-2 span.tags { font-size: 10px; } } /*Medium & Large Screens - 992px to 1223px*/ @media only screen and (min-width :992px) and (max-width : 1223px) { /*3 Column Portfolio Grid*/ .grid li { width: 33.33%; } .grid li:nth-child(2n+1) { clear: left; } .grid li:nth-child(n+1) { clear: none; } /*3 Column Portfolio Grid*/ .grid-4 li { width: 25%; } .grid-4 li:nth-child(2n+1) { clear: left; } .grid-4 li:nth-child(n+1) { clear: none; } /*5 Column Portfolio Grid*/ .grid-5 li { width: 20%; } .grid-5 li:nth-child(2n+1) { clear: left; } .grid-5 li:nth-child(n+1) { clear: none; } /* 4 & 5 column Portfolio Grid - Effect 1*/ .grid-4 figure.effect-1 .fa, .grid-5 figure.effect-1 .fa { font-size: 14px; } /* 4 & 5 column Portfolio Grid - Effect 3*/ .grid-4 figure.effect-3 h3, .grid-5 figure.effect-3 h3 { font-size: 16px; } /* Portfolio - Effect 2*/ .col-3 figure.effect-2 span.tags, .col-4 figure.effect-2 span.tags { font-size: 10px; } .col-3 figure.effect-2 .btn, .col-4 figure.effect-2 .btn { margin-bottom: 5px; } } /* Medium Desktop Screens */ @media only screen and (min-width :992px) and (max-width : 1199px) { /*Trailer Side*/ .tsb-text { font-size:230px; line-height: 161px; } .tss-text { font-size:30px; } .tss-subheading { font-size:20px; } } /* Desktop Screens */ @media only screen and (min-width :992px) { /* Alignment */ .text-left-desktop { text-align:left !important; } .text-center-desktop { text-align:center !important; } .text-right-desktop { text-align:right !important; } .img-center-desktop { margin-left:auto !important; margin-right: auto !important; display:block !important; } .img-left-desktop { margin-left:inherit !important; margin-right: auto !important; display:block !important; } .img-right-desktop { margin-left:auto !important; margin-right: inherit !important; display:block !important; } /* Margins - Desktop Specific */ .no-margin-top-desktop{ margin-top: 0 !important; } .no-margin-bottom-desktop{ margin-bottom: 0 !important; } .no-margin-left-desktop{ margin-left: 0 !important; } .no-margin-right-desktop{ margin-right: 0 !important; } .no-margin-side-desktop{ margin-left: 0 !important; margin-right: 0 !important; } .no-margin-desktop{ margin: 0 !important; } .mar-top-100-desktop{ margin-top: 100px !important; } .mar-top-50-desktop{ margin-top: 50px !important; } .mar-top-45-desktop{ margin-top: 45px !important; } .mar-top-40-desktop{ margin-top: 40px !important; } .mar-top-35-desktop{ margin-top: 35px !important; } .mar-top-30-desktop{ margin-top: 30px !important; } .mar-top-25-desktop{ margin-top: 25px !important; } .mar-top-20-desktop{ margin-top: 20px !important; } .mar-top-15-desktop{ margin-top: 15px !important; } .mar-top-10-desktop{ margin-top: 10px !important; } .mar-top-5-desktop{ margin-top: 5px !important; } .mar-bot-100-desktop{ margin-bottom: 100px !important; } .mar-bot-50-desktop{ margin-bottom: 50px !important; } .mar-bot-45-desktop{ margin-bottom: 45px !important; } .mar-bot-40-desktop{ margin-bottom: 40px !important; } .mar-bot-35-desktop{ margin-bottom: 35px !important; } .mar-bot-30-desktop{ margin-bottom: 30px !important; } .mar-bot-25-desktop{ margin-bottom: 25px !important; } .mar-bot-20-desktop{ margin-bottom: 20px !important; } .mar-bot-15-desktop{ margin-bottom: 15px !important; } .mar-bot-10-desktop{ margin-bottom: 10px !important; } .mar-bot-5-desktop{ margin-bottom: 5px !important; } .mar-left-100-desktop{ margin-left: 100px !important; } .mar-left-50-desktop{ margin-left: 50px !important; } .mar-left-45-desktop{ margin-left: 45px !important; } .mar-left-40-desktop{ margin-left: 40px !important; } .mar-left-35-desktop{ margin-left: 35px !important; } .mar-left-30-desktop{ margin-left: 30px !important; } .mar-left-25-desktop{ margin-left: 25px !important; } .mar-left-20-desktop{ margin-left: 20px !important; } .mar-left-15-desktop{ margin-left: 15px !important; } .mar-left-10-desktop{ margin-left: 10px !important; } .mar-left-5-desktop{ margin-left: 5px !important; } .mar-right-100-desktop{ margin-right: 100px !important; } .mar-right-50-desktop{ margin-right: 50px !important; } .mar-right-45-desktop{ margin-right: 45px !important; } .mar-right-40-desktop{ margin-right: 40px !important; } .mar-right-35-desktop{ margin-right: 35px !important; } .mar-right-30-desktop{ margin-right: 30px !important; } .mar-right-25-desktop{ margin-right: 25px !important; } .mar-right-20-desktop{ margin-right: 20px !important; } .mar-right-15-desktop{ margin-right: 15px !important; } .mar-right-10-desktop{ margin-right: 10px !important; } .mar-right-5-desktop{ margin-right: 5px !important; } /* Paddings - Desktop Specific */ .no-padding-top-desktop{ padding-top: 0 !important; } .no-padding-bottom-desktop{ padding-bottom: 0 !important; } .no-padding-left-desktop{ padding-left: 0 !important; } .no-padding-right-desktop{ padding-right: 0 !important; } .no-padding-side-desktop{ padding-left: 0 !important; padding-right: 0 !important; } .no-padding-desktop{ padding: 0 !important; } .pad-left-100-desktop{ padding-left: 100px !important; } .pad-left-50-desktop{ padding-left: 50px !important; } .pad-left-45-desktop{ padding-left: 45px !important; } .pad-left-40-desktop{ padding-left: 40px !important; } .pad-left-35-desktop{ padding-left: 35px !important; } .pad-left-30-desktop{ padding-left: 30px !important; } .pad-left-25-desktop{ padding-left: 25px !important; } .pad-left-20-desktop{ padding-left: 20px !important; } .pad-left-15-desktop{ padding-left: 15px !important; } .pad-left-10-desktop{ padding-left: 10px !important; } .pad-left-5-desktop{ padding-left: 5px !important; } .pad-right-100-desktop{ padding-right: 100px !important; } .pad-right-50-desktop{ padding-right: 50px !important; } .pad-right-45-desktop{ padding-right: 45px !important; } .pad-right-40-desktop{ padding-right: 40px !important; } .pad-right-35-desktop{ padding-right: 35px !important; } .pad-right-30-desktop{ padding-right: 30px !important; } .pad-right-25-desktop{ padding-right: 25px !important; } .pad-right-20-desktop{ padding-right: 20px !important; } .pad-right-15-desktop{ padding-right: 15px !important; } .pad-right-10-desktop{ padding-right: 10px !important; } .pad-right-5-desktop{ padding-right: 5px !important; } .pad-top-100-desktop{ padding-top: 100px !important; } .pad-top-50-desktop{ padding-top: 50px !important; } .pad-top-45-desktop{ padding-top: 45px !important; } .pad-top-40-desktop{ padding-top: 40px !important; } .pad-top-35-desktop{ padding-top: 35px !important; } .pad-top-30-desktop{ padding-top: 30px !important; } .pad-top-25-desktop{ padding-top: 25px !important; } .pad-top-20-desktop{ padding-top: 20px !important; } .pad-top-15-desktop{ padding-top: 15px !important; } .pad-top-10-desktop{ padding-top: 10px !important; } .pad-top-5-desktop{ padding-top: 5px !important; } .pad-bot-100-desktop{ padding-bottom: 100px !important; } .pad-bot-50-desktop{ padding-bottom: 50px !important; } .pad-bot-45-desktop{ padding-bottom: 45px !important; } .pad-bot-40-desktop{ padding-bottom: 40px !important; } .pad-bot-35-desktop{ padding-bottom: 35px !important; } .pad-bot-30-desktop{ padding-bottom: 30px !important; } .pad-bot-25-desktop{ padding-bottom: 25px !important; } .pad-bot-20-desktop{ padding-bottom: 20px !important; } .pad-bot-15-desktop{ padding-bottom: 15px !important; } .pad-bot-10-desktop{ padding-bottom: 10px !important; } .pad-bot-5-desktop{ padding-bottom: 5px !important; } } /*Tablets & Mobiles*/ @media screen and (max-width:991px){ /*Body*/ body .container { width:auto; padding-left:30px; padding-right:30px; } /* True Font */ h1.true-size-tablet { font-size:36px !important; } h2.true-size-tablet { font-size:30px !important; } h3.true-size-tablet { font-size:24px !important; } h4.true-size-tablet { font-size:18px !important; } h5.true-size-tablet { font-size:14px !important; } h6.true-size-tablet { font-size:12px !important; } p.true-size-tablet, span.true-size-tablet{ font-size:14px !important; } /* Menu Label */ .main-nav span.menu-label { float:none; margin-left:15px; } /*Heading - Top & Bottom Style*/ .btHeading, .btHeading.bt-md { margin-bottom:35px; } .top-heading{ font-size: 29px; line-height: 30px; top: 41%; } .bottomHeading { font-size: 152px; line-height: 152px; } /*Documentation*/ .doc .document-base { padding-left:15px; } .doc .content { margin-bottom:-20px; padding:30px 0 20px 0; } .doc .code { color:#ddd; margin-top: 20px; padding-top: 20px; padding-bottom: 20px; } .doc .row.special-note { margin-bottom: 0px; } /*Promo Bar*/ .promo-bar, .promo-bar div, .promo-bar span { height: 0; visibility:hidden; padding:0; } /*Promo Boxes & Panels*/ .promo-box, .promo-panel { text-align: center; } .btn-promo { margin:20px auto 0; width: auto; } /*Section's & Promo Box's Parallax*/ .section-parallax, .promo-parallax { background-attachment: scroll; background-size: cover; } .section-img, .promo-box { background-size: auto; height: 100%; } /*Vertical Divider*/ .vertical-divider-left { border-top: 1px solid #eee; border-left: none; margin-top: 30px; padding-top:30px; } .vertical-divider-right { border-bottom: 1px solid #eee; border-right: none; margin-bottom: 30px; padding-bottom:30px } .vertical-divider-left.vdl-dashed { border-top: 1px dashed #eee; } .vertical-divider-right.vdr-dashed { border-bottom: 1px dashed #eee; } .vertical-divider-left.vdl-double { border-top: 6px double #eee; } .vertical-divider-right.vdr-double { border-bottom: 6px double #eee; } .vertical-divider-left.vdl-colored { border-top: 2px solid #009c77; } .vertical-divider-right.vdr-colored { border-bottom: 2px solid #009c77; } /*Trending*/ .trending-carousel, .trending-vticker{ display:none; } /*Social Fixed*/ ul.social-fixed { display:none; } /*404 Error*/ p.error { font-size: 100px; } /*Flickr Widget*/ .flickr_badge_image img { width: auto; } /*Cart Review*/ .review-cart-block { margin-top:50px; } /*Footer*/ .footer > .container .row > div, .footer-2 > .container .row > div { margin-top:50px; margin-bottom:50px; } .footer > .container .row > div:first-child, .footer > .container .row > div:last-child, .footer-2> .container .row > div:first-child, .footer-2 > .container .row > div:last-child { margin-top:30px; margin-bottom:30px; } } /*Tablet Screens*/ @media screen and (min-width :768px) and (max-width: 991px) { /* Alignment */ .text-left-tablet { text-align:left !important; } .text-center-tablet { text-align:center !important; } .text-right-tablet { text-align:right !important; } .img-center-tablet { margin-left:auto !important; margin-right: auto !important; display:block !important; } .img-left-tablet { margin-left:inherit !important; margin-right: auto !important; display:block !important; } .img-right-tablet { margin-left:auto !important; margin-right: inherit !important; display:block !important; } /* Margins - Tablet Specific */ .no-margin-top-tablet{ margin-top: 0 !important; } .no-margin-bottom-tablet{ margin-bottom: 0 !important; } .no-margin-left-tablet{ margin-left: 0 !important; } .no-margin-right-tablet{ margin-right: 0 !important; } .no-margin-side-tablet{ margin-left: 0 !important; margin-right: 0 !important; } .no-margin-tablet{ margin: 0 !important; } .mar-top-100-tablet{ margin-top: 100px !important; } .mar-top-50-tablet{ margin-top: 50px !important; } .mar-top-45-tablet{ margin-top: 45px !important; } .mar-top-40-tablet{ margin-top: 40px !important; } .mar-top-35-tablet{ margin-top: 35px !important; } .mar-top-30-tablet{ margin-top: 30px !important; } .mar-top-25-tablet{ margin-top: 25px !important; } .mar-top-20-tablet{ margin-top: 20px !important; } .mar-top-15-tablet{ margin-top: 15px !important; } .mar-top-10-tablet{ margin-top: 10px !important; } .mar-top-5-tablet{ margin-top: 5px !important; } .mar-bot-100-tablet{ margin-bottom: 100px !important; } .mar-bot-50-tablet{ margin-bottom: 50px !important; } .mar-bot-45-tablet{ margin-bottom: 45px !important; } .mar-bot-40-tablet{ margin-bottom: 40px !important; } .mar-bot-35-tablet{ margin-bottom: 35px !important; } .mar-bot-30-tablet{ margin-bottom: 30px !important; } .mar-bot-25-tablet{ margin-bottom: 25px !important; } .mar-bot-20-tablet{ margin-bottom: 20px !important; } .mar-bot-15-tablet{ margin-bottom: 15px !important; } .mar-bot-10-tablet{ margin-bottom: 10px !important; } .mar-bot-5-tablet{ margin-bottom: 5px !important; } .mar-left-100-tablet{ margin-left: 100px !important; } .mar-left-50-tablet{ margin-left: 50px !important; } .mar-left-45-tablet{ margin-left: 45px !important; } .mar-left-40-tablet{ margin-left: 40px !important; } .mar-left-35-tablet{ margin-left: 35px !important; } .mar-left-30-tablet{ margin-left: 30px !important; } .mar-left-25-tablet{ margin-left: 25px !important; } .mar-left-20-tablet{ margin-left: 20px !important; } .mar-left-15-tablet{ margin-left: 15px !important; } .mar-left-10-tablet{ margin-left: 10px !important; } .mar-left-5-tablet{ margin-left: 5px !important; } .mar-right-100-tablet{ margin-right: 100px !important; } .mar-right-50-tablet{ margin-right: 50px !important; } .mar-right-45-tablet{ margin-right: 45px !important; } .mar-right-40-tablet{ margin-right: 40px !important; } .mar-right-35-tablet{ margin-right: 35px !important; } .mar-right-30-tablet{ margin-right: 30px !important; } .mar-right-25-tablet{ margin-right: 25px !important; } .mar-right-20-tablet{ margin-right: 20px !important; } .mar-right-15-tablet{ margin-right: 15px !important; } .mar-right-10-tablet{ margin-right: 10px !important; } .mar-right-5-tablet{ margin-right: 5px !important; } /* Paddings - Tablet Specific */ .no-padding-top-tablet{ padding-top: 0 !important; } .no-padding-bottom-tablet{ padding-bottom: 0 !important; } .no-padding-left-tablet{ padding-left: 0 !important; } .no-padding-right-tablet{ padding-right: 0 !important; } .no-padding-side-tablet{ padding-left: 0 !important; padding-right: 0 !important; } .no-padding-tablet{ padding: 0 !important; } .pad-left-100-tablet{ padding-left: 100px !important; } .pad-left-50-tablet{ padding-left: 50px !important; } .pad-left-45-tablet{ padding-left: 45px !important; } .pad-left-40-tablet{ padding-left: 40px !important; } .pad-left-35-tablet{ padding-left: 35px !important; } .pad-left-30-tablet{ padding-left: 30px !important; } .pad-left-25-tablet{ padding-left: 25px !important; } .pad-left-20-tablet{ padding-left: 20px !important; } .pad-left-15-tablet{ padding-left: 15px !important; } .pad-left-10-tablet{ padding-left: 10px !important; } .pad-left-5-tablet{ padding-left: 5px !important; } .pad-right-100-tablet{ padding-right: 100px !important; } .pad-right-50-tablet{ padding-right: 50px !important; } .pad-right-45-tablet{ padding-right: 45px !important; } .pad-right-40-tablet{ padding-right: 40px !important; } .pad-right-35-tablet{ padding-right: 35px !important; } .pad-right-30-tablet{ padding-right: 30px !important; } .pad-right-25-tablet{ padding-right: 25px !important; } .pad-right-20-tablet{ padding-right: 20px !important; } .pad-right-15-tablet{ padding-right: 15px !important; } .pad-right-10-tablet{ padding-right: 10px !important; } .pad-right-5-tablet{ padding-right: 5px !important; } .pad-top-100-tablet{ padding-top: 100px !important; } .pad-top-50-tablet{ padding-top: 50px !important; } .pad-top-45-tablet{ padding-top: 45px !important; } .pad-top-40-tablet{ padding-top: 40px !important; } .pad-top-35-tablet{ padding-top: 35px !important; } .pad-top-30-tablet{ padding-top: 30px !important; } .pad-top-25-tablet{ padding-top: 25px !important; } .pad-top-20-tablet{ padding-top: 20px !important; } .pad-top-15-tablet{ padding-top: 15px !important; } .pad-top-10-tablet{ padding-top: 10px !important; } .pad-top-5-tablet{ padding-top: 5px !important; } .pad-bot-100-tablet{ padding-bottom: 100px !important; } .pad-bot-50-tablet{ padding-bottom: 50px !important; } .pad-bot-45-tablet{ padding-bottom: 45px !important; } .pad-bot-40-tablet{ padding-bottom: 40px !important; } .pad-bot-35-tablet{ padding-bottom: 35px !important; } .pad-bot-30-tablet{ padding-bottom: 30px !important; } .pad-bot-25-tablet{ padding-bottom: 25px !important; } .pad-bot-20-tablet{ padding-bottom: 20px !important; } .pad-bot-15-tablet{ padding-bottom: 15px !important; } .pad-bot-10-tablet{ padding-bottom: 10px !important; } .pad-bot-5-tablet{ padding-bottom: 5px !important; } /*Uncover Footer*/ .uncover-footer { position:inherit; z-index:auto; } .uncover-footer .footer-2 { margin:0; } .uncover-footer-body .footer-no-copyright .uncover-footer > .container { margin: 0; padding:50px 0; } /*Trailer Side*/ .tsb-text { font-size:170px; line-height: 118px; } .tss-text { font-size:25px; } .tss-subheading { font-size:20px; } /*Cart*/ .shipping { text-align: center; font-size: 14px; } .shipping .date { font-weight: 800; } /*3 Column Portfolio Grid*/ .grid li { width: 50%; } .grid li:nth-child(2n+1) { clear: left; } .grid li:nth-child(n+1) { clear: none; } .grid img { width: 100%; } .portfolio figure { display: block; } /*5 Column Portfolio Grid*/ .grid-5 li { width: 33.33%; } .grid-5 li:nth-child(2n+1) { clear: left; } .grid-5 li:nth-child(n+1) { clear: none; } /*Trailer Images*/ figure.trailer h2 { font-size:15px; } figure.trailer p { font-size:12px; } /*Timeline*/ .timeline > li > .timeline-panel.left { margin-left: 20px; } .timeline > li > .timeline-panel.right { margin-right: 20px; } } /*Mobile Screen*/ @media screen and (max-width: 767px) { /* Alignment */ .text-left-mobile { text-align:left !important; } .text-center-mobile { text-align:center !important; } .text-right-mobile { text-align:right !important; } .img-center-mobile { margin-left:auto !important; margin-right: auto !important; display:block !important; } .img-left-mobile { margin-left:inherit !important; margin-right: auto !important; display:block !important; } .img-right-mobile { margin-left:auto !important; margin-right: inherit !important; display:block !important; } /* True Font */ h1.true-size-mobile { font-size:36px !important; } h2.true-size-mobile { font-size:30px !important; } h3.true-size-mobile { font-size:24px !important; } h4.true-size-mobile { font-size:18px !important; } h5.true-size-mobile { font-size:14px !important; } h6.true-size-mobile { font-size:12px !important; } p.true-size-mobile, span.true-size-mobile{ font-size:14px !important; } /* Margins - Mobile Specific */ .no-margin-top-mobile { margin-top: 0 !important; } .no-margin-bottom-mobile { margin-bottom: 0 !important; } .no-margin-left-mobile { margin-left: 0 !important; } .no-margin-right-mobile { margin-right: 0 !important; } .no-margin-side-mobile { margin-left: 0 !important; margin-right: 0 !important; } .no-margin-mobile { margin: 0 !important; } .mar-top-100-mobile { margin-top: 100px !important; } .mar-top-50-mobile { margin-top: 50px !important; } .mar-top-45-mobile { margin-top: 45px !important; } .mar-top-40-mobile { margin-top: 40px !important; } .mar-top-35-mobile { margin-top: 35px !important; } .mar-top-30-mobile { margin-top: 30px !important; } .mar-top-25-mobile { margin-top: 25px !important; } .mar-top-20-mobile { margin-top: 20px !important; } .mar-top-15-mobile { margin-top: 15px !important; } .mar-top-10-mobile { margin-top: 10px !important; } .mar-top-5-mobile { margin-top: 5px !important; } .mar-bot-100-mobile { margin-bottom: 100px !important; } .mar-bot-50-mobile { margin-bottom: 50px !important; } .mar-bot-45-mobile { margin-bottom: 45px !important; } .mar-bot-40-mobile { margin-bottom: 40px !important; } .mar-bot-35-mobile { margin-bottom: 35px !important; } .mar-bot-30-mobile { margin-bottom: 30px !important; } .mar-bot-25-mobile { margin-bottom: 25px !important; } .mar-bot-20-mobile { margin-bottom: 20px !important; } .mar-bot-15-mobile { margin-bottom: 15px !important; } .mar-bot-10-mobile { margin-bottom: 10px !important; } .mar-bot-5-mobile { margin-bottom: 5px !important; } .mar-left-100-mobile { margin-left: 100px !important; } .mar-left-50-mobile { margin-left: 50px !important; } .mar-left-45-mobile { margin-left: 45px !important; } .mar-left-40-mobile { margin-left: 40px !important; } .mar-left-35-mobile { margin-left: 35px !important; } .mar-left-30-mobile { margin-left: 30px !important; } .mar-left-25-mobile { margin-left: 25px !important; } .mar-left-20-mobile { margin-left: 20px !important; } .mar-left-15-mobile { margin-left: 15px !important; } .mar-left-10-mobile { margin-left: 10px !important; } .mar-left-5-mobile { margin-left: 5px !important; } .mar-right-100-mobile { margin-right: 100px !important; } .mar-right-50-mobile { margin-right: 50px !important; } .mar-right-45-mobile { margin-right: 45px !important; } .mar-right-40-mobile { margin-right: 40px !important; } .mar-right-35-mobile { margin-right: 35px !important; } .mar-right-30-mobile { margin-right: 30px !important; } .mar-right-25-mobile { margin-right: 25px !important; } .mar-right-20-mobile { margin-right: 20px !important; } .mar-right-15-mobile { margin-right: 15px !important; } .mar-right-10-mobile { margin-right: 10px !important; } .mar-right-5-mobile { margin-right: 5px !important; } /* Paddings - Mobile Specific */ .no-padding-top-mobile { padding-top: 0 !important; } .no-padding-bottom-mobile { padding-bottom: 0 !important; } .no-padding-left-mobile { padding-left: 0 !important; } .no-padding-right-mobile { padding-right: 0 !important; } .no-padding-side-mobile { padding-left: 0 !important; padding-right: 0 !important; } .no-padding-mobile { padding: 0 !important; } .pad-left-100-mobile { padding-left: 100px !important; } .pad-left-50-mobile { padding-left: 50px !important; } .pad-left-45-mobile { padding-left: 45px !important; } .pad-left-40-mobile { padding-left: 40px !important; } .pad-left-35-mobile { padding-left: 35px !important; } .pad-left-30-mobile { padding-left: 30px !important; } .pad-left-25-mobile { padding-left: 25px !important; } .pad-left-20-mobile { padding-left: 20px !important; } .pad-left-15-mobile { padding-left: 15px !important; } .pad-left-10-mobile { padding-left: 10px !important; } .pad-left-5-mobile { padding-left: 5px !important; } .pad-right-100-mobile { padding-right: 100px !important; } .pad-right-50-mobile { padding-right: 50px !important; } .pad-right-45-mobile { padding-right: 45px !important; } .pad-right-40-mobile { padding-right: 40px !important; } .pad-right-35-mobile { padding-right: 35px !important; } .pad-right-30-mobile { padding-right: 30px !important; } .pad-right-25-mobile { padding-right: 25px !important; } .pad-right-20-mobile { padding-right: 20px !important; } .pad-right-15-mobile { padding-right: 15px !important; } .pad-right-10-mobile { padding-right: 10px !important; } .pad-right-5-mobile { padding-right: 5px !important; } .pad-top-100-mobile { padding-top: 100px !important; } .pad-top-50-mobile { padding-top: 50px !important; } .pad-top-45-mobile { padding-top: 45px !important; } .pad-top-40-mobile { padding-top: 40px !important; } .pad-top-35-mobile { padding-top: 35px !important; } .pad-top-30-mobile { padding-top: 30px !important; } .pad-top-25-mobile { padding-top: 25px !important; } .pad-top-20-mobile { padding-top: 20px !important; } .pad-top-15-mobile { padding-top: 15px !important; } .pad-top-10-mobile { padding-top: 10px !important; } .pad-top-5-mobile { padding-top: 5px !important; } .pad-bot-100-mobile { padding-bottom: 100px !important; } .pad-bot-50-mobile { padding-bottom: 50px !important; } .pad-bot-45-mobile { padding-bottom: 45px !important; } .pad-bot-40-mobile { padding-bottom: 40px !important; } .pad-bot-35-mobile { padding-bottom: 35px !important; } .pad-bot-30-mobile { padding-bottom: 30px !important; } .pad-bot-25-mobile { padding-bottom: 25px !important; } .pad-bot-20-mobile { padding-bottom: 20px !important; } .pad-bot-15-mobile { padding-bottom: 15px !important; } .pad-bot-10-mobile { padding-bottom: 10px !important; } .pad-bot-5-mobile { padding-bottom: 5px !important; } /* Theme Background Section */ .theme-background-section .content-inner-container { padding: 100px 8%; } /*Masonry*/ .masonry-col .item, .masonry-grid .item, .masonry-grid.masonry-blog .item, .masonry-grid.masonry-blog.masonry-blog-big .item { width: 100%; } .masonry-grid.portfolio .item img { margin:0 auto; } /*Clients*/ .clients-grid.grid-6 li, .clients-grid.grid-5 li, .clients-grid.grid-4 li, .clients-grid.grid-3 li { width: 50%; padding: 20px; } .clients-border.grid-6 li:nth-child(2n), .clients-border.grid-5 li:nth-child(5n), .clients-border.grid-4 li:nth-child(4n), .clients-border.grid li:nth-child(3n) { border-right: none; } .clients-border.grid-6 li:nth-last-child(-n+6), .clients-border.grid-5 li:nth-last-child(-n+5), .clients-border.grid-4 li:nth-last-child(-n+4), .clients-border.grid li:nth-last-child(-n+3) { border-bottom: 1px solid #eee; } .clients-border.grid-6 li:nth-last-child(-n+2), .clients-border.grid-5 li:nth-last-child(-n+5), .clients-border.grid-4 li:nth-last-child(-n+4), .clients-border.grid li:nth-last-child(-n+3) { border-bottom:none; } .clients-border.grid-5 li:nth-child(5n){ border-right: 1px solid #eee; } .clients-border.grid-5 li:nth-child(2n){ border-right: none; } .clients-border.grid-5 li:nth-last-child(-n+5){ border-bottom: 1px solid #eee; } .clients-border.grid-5 li:nth-last-child(-n+2){ border-bottom:none; } .clients-border.grid-4 li:nth-child(4n){ border-right: 1px solid #eee; } .clients-border.grid-4 li:nth-child(2n){ border-right: none; } .clients-border.grid-4 li:nth-last-child(-n+4){ border-bottom: 1px solid #eee; } .clients-border.grid-4 li:nth-last-child(-n+2){ border-bottom:none; } .clients-border.grid-3 li:nth-child(3n){ border-right: 1px solid #eee; } .clients-border.grid-3 li:nth-child(2n){ border-right: none; } .clients-border.grid-3 li:nth-last-child(-n+3){ border-bottom: 1px solid #eee; } .clients-border.grid-3 li:nth-last-child(-n+2){ border-bottom:none; } /*Heading - Top & Bottom Style*/ .top-heading, .bt-md .top-heading{ font-size: 19px; line-height: 20px; top: 41.5%; } .bottomHeading, .bt-md .bottomHeading { font-size: 92px; line-height: 92px; } /*Page Header*/ .page-top .page-title, .page-top-light .page-title { font-size: 18px; } /*Trailer Side*/ .trailer-side-big { display:none; } .tss-text { font-size:20px; } .tss-subheading { font-size:15px; } /*Modal Centred*/ .modal-dialog-center { width: 100%; } /*Sitemap*/ .sitemap-container .cell { display:block; margin-bottom:30px; border-right:none; } /*Cart*/ .cart-item > .thumbnail { display:none; } .cart-item > .thumbnail img { width: 40px; height: 40px; } .cart-item span { display: none; } .shipping { text-align: center; font-size: 14px; } .shipping .date { display:inherit; font-weight: 800; } input.quantity { display:none; } .cart-item { margin: 0; } .cart-item-container { text-align:left; float:left; } .cart-item-brand, .cart-item-size { display: none; } /*Shop Inner Page*/ .product .thumbnail { margin: 35px auto; } /*Breadcrumbs*/ .page-top ul.breadcrumb.b2, .page-top-light ul.breadcrumb.b2, .page-top-grey ul.breadcrumb.b2, .page-top-grey-bottom ul.breadcrumb.b2 { position:inherit; margin-top:15px; margin-left:15px; } /*Footer Copyright*/ .footer .footer-copyright { text-align: center; } .footer .footer-copyright nav { float: none; } .footer .footer-copyright img.logo-copyright { float:none; margin: 0 auto 10px; } /*Arrow Boxes*/ .arrow-box li { display: table; width: 100%; text-align: center; } .arrow-box li .arrow-box-content { display: table-cell; vertical-align: middle; } .arrow-box li:after, .arrow-box li:before { left: 50%; top: 100%; } .arrow-box li .fa { padding-top: 35px; } /*Process Tabs*/ .no-border-boxes-top.process-tab .nav-tabs li:before { display: none; } /*Justified Tabs*/ .nav-tabs.nav-justified > li > a{ border: 1px solid #ddd; } .tabs-below > .nav-tabs.nav-justified > .active { border-top: 1px solid #ddd; } .tabs-below > .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; } .no-border-boxes-top .nav-tabs.nav-justified > li > a{ border: none; } /*Timeline*/ ul.timeline:before { left: 40px; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 15px; margin-left: 0; top: 16px; } .date .timeline-badge { width:50px !important; left: 15px !important; margin-left: 0 !important; } .load-more .timeline-badge { width:70px !important; left: 5px !important; margin-left: 0 !important; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li > .timeline-panel.right { margin-left: 50px; margin-right: 7px; } .timeline > li > .timeline-panel.left { margin-right: 7px; } ul.timeline > li > .timeline-panel.portfolio { padding: 5px; } /*Portfolio*/ .portfolio figure h3, .portfolio figure h4, .portfolio figure h5 { font-size: 12px; } /* Owl Carousel */ .owl-arrow-sides { padding:0 15px; } } /*Mobile Screens - 400px to 767px*/ @media screen and (min-width :400px) and (max-width: 767px) { /*Portfolio*/ .portfolio figure img { width: 100%; } /*3 Column Portfolio Grid*/ .grid li { width: 100%; } .grid figure.effect-1 h3{ font-size:16px; } .grid figure.effect-1 figcaption { height: 67px; padding: 18px; } /*5 Column Portfolio Grid*/ .grid-5 li { width: 100%; } /*Trailer Images*/ figure.trailer h2 { font-size:15px; } figure.trailer p { font-size:12px; } } /* Mobile Screens - Upto 690px */ @media screen and (max-width: 690px) { /*Bootstrap Slider*/ .carousel-caption.big-caption h4 { padding-bottom: 10px; } .carousel-caption.big-caption { padding: 20px; } /*Comments*/ .comment-name, .comment-date { position:static; display:block; border:none; } .comment-reply{ float:none; } .comment-reply a{ margin-top:10px; } } /* Mobile Screens - Upto 600px */ @media (max-width: 600px) { .coming-soon .ticker-1 { width: 49%; display: inline-block; font-size: 24px; padding: 0 0 20px 0; } .coming-soon .ticker-2 { width: 49%; display: inline-block; font-size: 24px; padding: 0 0 20px 0; } .coming-soon .ticker-3 { width: 49%; display: inline-block; font-size: 24px; padding: 0 0 0 0; } .coming-soon .ticker-4 { width: 50%; display: inline-block; font-size: 24px; padding: 20px 0 0 0; } } /* Mobile Screens - Upto 590px */ @media screen and (max-width: 590px) { /*Bootstrap Slider*/ .carousel-caption.big-caption p { opacity: 0; } .carousel-caption.big-caption { padding: 10px; } } /* Mobile Screens - Upto 500px */ @media screen and (max-width: 500px) { /*Top Side Arrow Owl-Carousel*/ .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-prev, .owl-theme.owl-arrow-top-sides .owl-controls .owl-buttons .owl-next { position: inherit; } .owl-arrow-top-sides-heading { padding-right:0px; } /*Tabs Left*/ .tabs-left .tab-content > .active, .tabs-right .tab-content > .active { display: block; } /*404 Error*/ p.error { font-size: 80px; margin-top: 50px; } } /*Mobile Screens - Upto 450px*/ @media screen and (max-width: 450px) { /*Cart*/ .cart-item { text-align:center; } .cart-item > .thumbnail { display:none; } .shipping { font-size: 12px; } .shipping .date { font-size: 14px; } } /*Mobile Screens - Upto 399px*/ @media screen and (max-width: 399px) { /*Portfolio Effect 2*/ figure.effect-2 .fa-lg { font-size: 10px; } figure.effect-2 .btn { padding: 1px 10px 5px 10px; } figure.effect-2 .btn-lg { padding: 0px 10px 7px 10px; } figure.effect-2 span.tags { line-height: 0; font-size: 10px; } /*2 Column - Portfolio*/ .col-2 .col-xs-12, .col-3 .col-xs-12, .col-4 .col-xs-12 { padding: 0; } /*3 Column Portfolio Grid*/ .grid li { width: 100%; } .grid li:nth-child(2n+1) { clear: left; } .grid li:nth-child(n+1) { clear: none; } .grid figure.effect-1 h3{ line-height: 32px; } /*Testimonial Simple*/ .testimonial.simple blockquote { padding: 15px } .testimonial.simple p { padding-left: 0; } /*Trailer Images*/ figure.trailer h2 { font-size:15px; } figure.trailer p { font-size:12px; } } /* Mobile Screens - Upto 350px */ @media screen and (max-width: 350px) { .floating-contact-panel { width: 200px; } } /* Mobile Screens - Upto 320px */ @media screen and (max-width: 320px) { /*Team*/ .team-item.team-large .social-icons { float: none; } } /******************************************************************** Utility Page Demo ********************************************************************/ .show-grid [class^=col-] p{ background-color:#f6f6f6; display:block; padding:10px 5px; text-align:center; } .show-grid [class^=col-sm] p, .show-grid [class^=col-xs] p{ font-size:10px; } /*Font Awesome*/ .font-awesome-demo .fa { padding: 20px 5px 20px 0; color:#000 !important; }

Related: See More


Questions / Comments: