@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); @import url(http://fonts.googleapis.com/css?family=Raleway:400,200,300); @import url(http://fonts.googleapis.com/css?family=PT+Sans); @import url(http://fonts.googleapis.com/css?family=Oswald:400,300); /*Preset Area*/ *{ font-family:'Open Sans', sans-serif; margin: 0px; padding: 0px; color: #333333; } #page{ overflow: hidden; } h1, h2, h3, h4, h5, h6{ color: #494D51; font-weight: 500; margin: 36px 0 12px; } h1{ font-size: 26px; line-height: 1.3846153846; } h2{ font-size: 24px; line-height: 1; } h3{ font-size: 22px; line-height: 1.0909090909; } h4{ font-size: 20px; line-height: 1.2; } h5{ font-size: 18px; line-height: 1.3333333333; } h6{ font-size: 16px; line-height: 1.5; } h3{ padding: 0; } .clear { clear:both; } a{ text-decoration: none; color: #F06557; &:hover{ text-decoration: none; } &:focus{ outline: 0; text-decoration: none; } } body{ font-family:'Open Sans', sans-serif; } /*End Preset Area*/ /*== Reset ==*/ html, body, div, span, applet, object, iframe,p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 14px; vertical-align: baseline; line-height: 20px; } p.privacy{padding: 25px 15px} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; overflow-x: hidden; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #07AD87; tr{ td{ border: 1px solid #07AD87; text-align: center; padding: 10px 0px; } th{ border: 1px solid #07AD87; padding: 10px 0px; text-align: center; color: #07AD87; } } } blockquote{ font-size: 13px; color: #333333; line-height: 22px; } p{ font-size: 13px; color: #333333; line-height: 25px; } dl{ dt{ line-height: 25px; } dd{ font-family: PT Sans; font-size: 13px; font-weight: 200; margin-left: 15px; } } /*== Global Style ==*/ body { background:#ffffff !important; } section { position:relative; width:100%; min-width:100%; } a{ text-decoration: none; } /*-- Some common issue --*/ @white: #fff; @link_color: #07AD87; @transparent_linkcolor: rgba(7, 173, 135, 0.7); /*===============================transition================================= =================================transition================================= =================================transition===============================*/ a:hover{ -webkit-transition: color 300ms ; -moz-transition: color 300ms ; -ms-transition: color 300ms ; -o-transition: color 300ms ; transition: color 300ms ; } /*===============================font size============================= =================================font size============================= =================================font size===========================*/ .navbar-nav>li span.nav-slogan{ font-size: 11px; } .header-top, .thumbnail .caption p a, .detail-address, .detail-address-other, .blog-page-main-img-bottom-layout a, .blog-page-main-img-bottom-layout span, .blog-page-main-other .blog-text, .blog-page-main-img-bottom-layout a, .blog-page-main-img-bottom-layout span, .blog-page-main-other .blog-text, .blog-detail-bottom-comment, .blog-detail-bottom-comment-other, .blog-detail-from .btn.btn-default, .blog-detail-btn .btn.btn-default, .contact-btn .btn.btn-default, p.fotter-paragraph-under-logo,span.curancy { font-size: 13px; } .we-work-section p, #first-skill .panel-body, .recent-work-project-title .btn.btn-default, .portfolio-project-title .btn.btn-default { font-size: 15px; } .call-to-action-btn-sec .btn.btn-default, .carousel-caption ul li ul.client-name li .carousel-caption ul li ul.client-name li a i, #amazing-team .team-detail-title h2 { font-size: 18px; } .footer-header-layout, .close { font-size: 20px; } .contact-info h2, .we-work-section-item h2, .rox-process h2, #first-skill .panel-heading a, #first-skill .progress-bar span, .item-body h2, #design-feature h2.design-title, ul.price-table li:first-child, ul.price-table li:last-child, .thumbnail .caption h3, .bolg-news-layout h3, .bolg-news-layout h3 { font-size: 22px; } .recent-work-project-title h1, .price p, .blog-image .date, .portfolio-project-title h1, #loadMore { font-size: 25px; } .sec-service h1{ font-size: 32px; } .we-work-section h1, #breadcumb,h1 span,span.preset-color,h2 span, #first-skill h2, .recent-work-head h1, .service-head-title h1, .design-feature-content h2, .heading h2, .portfolio-page-head h1, #rox-process h2.process-title, .amazing-title h2 { font-size: 36px; } /*===============================font family================================= =================================font family================================= =================================font family===============================*/ ul.top-info, .navbar-nav>li span.nav-slogan, .contact-info, .we-work-section, .we-work-section-item, .recent-work-head p, .recent-work-project-title h1, .service-head-title p, .item-body, .carousel-caption, .carousel-caption p, ul.price-table, .price, .blog-image .date, .thumbnail .caption p, .thumbnail .caption p a, .portfolio-page-head p, .portfolio-project-title h1, .portfolio-bottom-button .btn.btn-default, #amazing-team .team-detail-title p, .amazing-title p, .blog-page-main-img-bottom-layout a, .blog-page-main-img-bottom-layout span, .bolg-news-layout p, .blog-page-main-other .form-control, .blog-categories p, .blog-page-main-img-bottom-layout a, .blog-page-main-img-bottom-layout span, .blog-page-main-img-bottom-layout span, .blog-categories p, .blog-detail-middle-text { font-family: 'PT Sans', sans-serif; font-weight: 200; } .navbar-default, .search2, #breadcumb, .contact-info h2, .contact-info address span, .we-work-section-item h2, .rox-process h2, .rox-process p, #first-skill .panel-heading a, #first-skill .panel-body, #first-skill .progress-bar span, .recent-work-project-title .btn.btn-default, .call-to-action-btn-sec .btn.btn-default, .item-body h2, #design-feature h2.design-title, #design-feature p.design-text, .design-feature-content p, #pricetable, .thumbnail .caption h3, .top-bar-heading, ul#filters li a, .portfolio-project-title .btn.btn-default, #footer-one, #footer-two, #footer-three, #rox-process p, #amazing-team .team-detail-title h2, .blog-page-main-img, .blog-page-main-other, .blog-page-bottom-layout, .blog-page-main-other, .blog-page-bottom-layout, .blog-detail-from, .blog-detail-from-contact-page, .contact-from-contact-page, .slider-btn, .single-title, header nav ul.nav-main li a,header nav.mega-menu ul.nav-main li.rox-mega-menu-item ul.sub-menu a,.title,.sub-title,.extra-title,.sub-content h3,.sub-content span ,header div.search input#search,header nav.mega-menu ul.nav-main li.rox-mega-menu-item .mega-menu-sub-title { font-family: 'Open Sans', sans-serif; font-weight: 200; } .we-work-section h1, #first-skill h2, .recent-work-head h1, .sec-service h1, .service-head-title h1, .design-feature-content h2, .heading h2, .portfolio-page-head h1, .form-inline .btn.btn-default, #rox-process h2.process-title, .amazing-title h2, .slider-title, .slider-title-2, .slide-title, .slide-title-2 { font-family: 'Oswald', sans-serif; } /*=======font color========= =========font color========= =========font color=======*/ .navbar-default .navbar-nav>li>a, .contact-info h2 { color: #242424; } .navbar-nav>li span.nav-slogan, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus, .search, .search2 { color: #a2a2a2; } .we-work-section-item{ color: #6a6a6a; } .dropdown-menu>li>a, #breadcumb { color:#fff; } .contact-info address { color: #545454; } /*Slider Bullets Adjustment*/ .tp-bullets.simplebullets.round{margin-left: -48px !important;} /*Graphy icons*/ .bs-example-tooltips > .btn { margin-top: 5px; margin-bottom: 5px; } .bs-glyphicons { list-style: none; } .bs-glyphicons li { float: left; width: 12.5%; height: 115px; padding: 10px; margin: 0 -1px -1px 0; font-size: 12px; line-height: 1.4; text-align: center; border: 1px solid #ddd; } .bs-glyphicons { padding-left: 0; padding-bottom: 1px; margin-bottom: 20px; list-style: none; overflow: hidden; } .bs-glyphicons .glyphicon { margin-top: 5px; margin-bottom: 10px; font-size: 24px; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; line-height: 1; -moz-osx-font-smoothing: grayscale; } .bs-glyphicons .glyphicon-class { display: block; text-align: center; word-wrap: break-word; } .highlight pre{padding: 15px;} /******* Video section ********/ section.rms_video_class{ overflow: hidden; margin-bottom: -50px; } section.rms_video_class.slider-video{ margin-bottom: 0px ; } .video_overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: url('http://themeonlab.com/wp/right/wp-content/uploads/2014/06/gridtile.png') repeat; z-index: -999; } /******************************************* Header Area ***********************************************/ .header-top{ padding:0; width: 100%; color: #606060; border-bottom: 1px solid #f2f2f2; position: relative; background: #ffffff; z-index: 99999999; ul.top-info { font-style: normal; line-height: 25px; padding: 4px 0; font-family: 'PT Sans',sans-serif; font-weight: 200; margin: 0px; li{ color: #242424; font-size: 12px; i.fa-phone { font-size: 12px; padding-right: 7px; } i{ color: #242424;; font-size: 12px; padding-right: 7px; } a{ color: #242424; font-size: 12px; font-family: 'PT Sans',sans-serif; } &:first-child{ padding-left: 0px; } &:last-child{ padding-right: 0px; } } } ul.top-social { float: right; margin-right: -15px; text-align: right; li{ float: left; padding: 0; border-left: 1px solid #F2F2F2; a{ i{ font-size: 12px; height: 35px; line-height: 35px; text-align: center; width: 30px; color: #242424; } } &:first-child{ padding-left: 0px; } &:last-child{ border-right: 1px solid #F2F2F2; } } .trans_li{ width: 100px; text-aling: center; padding: 4px 0px; select{ width: 95%; padding: 2px 3px; border: 1px solid #cccccc; font-size: 13px; } } .ts_v{ a{ i{ &:hover{ background: none repeat scroll 0 0 #1D1D1D; color: #FFFFFF; } } } } .ts_l{ a{ i{ &:hover{ background: none repeat scroll 0 0 #007BB6; color: #FFFFFF; } } } } .ts_c{ a{ i{ &:hover{ background: none repeat scroll 0 0 #FE0079; color: #FFFFFF; } } } } .woo_menu{ height: 35px; padding: 0px 20px; padding-top: 7px; a{ color: #333333; font-family: Open sans; font-size: 12px; text-transform: uppercase; transition: all 700ms; span{ transition: all 700ms; } &:hover{ color: #07AD87; .amount{ color: #07AD87; } } &:focus{ outline: 0; text-decoration: none; } } } } } /*Social Icon Hover part*/ i.fa-twitter, i.fa-facebook, i.fa-google-plus, i.fa-skype, i.fa-vimeo-square, i.fa-linkedin, i.fa-flickr{ -webkit-transition: color 300ms; -moz-transition: color 300ms; -ms-transition: color 300ms; -o-transition: color 300ms; transition: color 300ms; } .header-top i.fa-twitter:hover{background: #63CDF1;color: #fff} .header-top i.fa-facebook:hover{background: #507CBE;color:#fff} .header-top i.fa-skype:hover{background: #36C4F3;color: #fff} .header-top i.fa-google-plus:hover{background: #F16261;color: #fff} header.rox-header { position: relative; } .rox-header { z-index: 15000; border-bottom: thin solid #f2f2f2; } .effect2:before, .effect2:after { &:before{ background: none repeat scroll 0 0 #000000; bottom: 16px; box-shadow: 2px 25px 50px #161616; content: ""; left: 0; margin-left: -15px; margin-right: -15px; position: absolute; top: 64%; transform: rotate(-3deg); width: 45%; z-index: -1; } &:after{ background: none repeat scroll 0 0 #000000; bottom: 16px; box-shadow: 2px 25px 50px #161616; content: ""; left: 0; margin-left: -15px; margin-right: -15px; position: absolute; top: 64%; transform: rotate(-3deg); width: 45%; z-index: -1; } &:after { left: auto; right: -16px; transform: rotate(3deg); } } .effect2 { position: relative; } .box { background: none repeat scroll 0 0 #FFFFFF; } /**************************** Menu ******************************/ header .logo { display: table-cell; margin: 0; padding: 10px 0 0; vertical-align: middle; } a.logo { background: url("../images/presets/preset1/logo.png") no-repeat scroll 50% center rgba(0, 0, 0, 0); height: 67px; width: 167px; } header div.search { float: right; height: 85px; margin: 0 -15px 0 0; position: relative; z-index: 20; } .search-visible { display: block; } .search { border-left: 1px solid #F2F2F2; border-right: 1px solid #F2F2F2; font-family: 'Raleway',sans-serif; font-weight: 600; margin-left: 20px; padding: 25px 10px 20px; } header div.search input#s { font-weight: normal; opacity: 1; color: #242424; font-family: 'PT Sans',sans-serif; font-size: 13px; width: 160px; transition: all 700ms; &:focus{ width: 200px; } } header div.search #searchsubmit{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 0px; padding-top: 8px; padding-left: 3px; opacity: .4; } header div.search input.search:first-child { border-radius: 0; font-size: 0.9em; height: 34px; padding: 6px 12px; transition: all 0.2s ease-in 0.2s; width: 170px; } .input-group .form-control { border: medium none; box-shadow: none; } header div.search button.btn-default { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: 0 none; color: #CCCCCC; position: absolute; right: 0; top: 0; } .mobile-menu { display: none; } button.btn-responsive-nav { display: none; } button.btn-responsive-nav { z-index: 200; } header div.nav-main-collapse, header div.nav-main-collapse.in { overflow-y: visible; } header nav { float: right; } a{color: #A2A2A2; } .main_nav_ul{ margin: 0px; padding: 0px; float: right; margin-right: 10px; z-index: 8888; font-family: 'PT Sans',sans-serif !important; li{ float: left; position: relative; padding-top: 23px; padding-bottom: 22px; border-top: 3px solid #ffffff; transition: all 700ms; &:hover{ background: none; border-top: 3px solid #04896A; a{ background: none; color: #07ad87; } ul{ li{ border-top: 0px; a{ color: #fff; &:hover{ color: #fff; } } ul{ li{ border-top: 0px; a{ color: #fff; &:hover{ color: #fff; } } ul{ li{ border-top: 0px; &:hover{ border-top: 0px; } a{ color: #fff; &:hover{ color: #fff; } } ul{ li{ border-top: 0px; &:hover{ border-top: 0px; } a{ color: #fff; &:hover{ color: #fff; } } ul{ li{ border-top: 0px; &:hover{ border-top: 0px; } a{ color: #fff; &:hover{ color: #fff; } } } } } } } } } } } } } a{ transition: all 700ms; text-transform: capitalize; color:#242424; font-size: 13px; font-weight: normal !important; &:hover{ background: none; color: #07ad87; } } } li.current-menu-item{ border-top: 3px solid #04896A; a{ color: #07ad87; } ul{ li{ border-top: 0px; } } } li.current-menu-parent{ a{ color: #13AC88; background: transparent; } ul{ li{ a{ color: #13AC88; } } li.current-menu-item{ color: #fff; a{ color: #fff; } } } } li.current-menu-item{ background: transparent; color: #13AC88; a{ color: #07ad87; } } } .main_nav_ul > li { &:hover{ ul{ visibility:visible; opacity:1; filter:alpha(opacity=100); li{ ul{ visibility:hidden; opacity:0; filter:alpha(opacity=0); -webkit-transition:200ms ease; -moz-transition:200ms ease; -o-transition:200ms ease; transition:200ms ease; } &:hover{ ul{ visibility:visible; opacity:1; filter:alpha(opacity=100); } } } } } } .main_nav_ul > li > ul{ min-width: 200px; max-width: 200px; position:absolute; left:0; top:100%; li{ position: relative; float: none; width: 100%; transition: all 700ms; background: #000000; padding: 2px 0; color:#fff; &:hover{ background: #13AC88; color:#fff; } a{ text-transform: capitalize; font-weight: normal !important; padding-bottom: 10px; padding-top: 10px; position: relative; text-transform: none; display: inline-block; font-size: 13px; color: #ffffff; padding-left: 15px; width: 100%; transition: all 700ms; font-family: 'PT Sans',sans-serif !important; &:hover{ background: #13AC88; padding-left: 20px; color: #ffffff; } } } } .main_nav_ul > li > ul > li > ul { position: absolute; left: 180px; top: 0px; margin-top: 0px; border-top: 2px solid #13AC88; min-width: 200px; max-width: 200px; position: absolute; background: #000000; padding-top: 15px; padding-bottom: 10px; li{ position: relative; a{ text-transform: capitalize; font-weight: normal !important; font-family: 'PT Sans',sans-serif !important; color: #fff; &:hover{ color: #fff; } } &:first-child{ border-top: 0px; } } } .main_nav_ul > li > ul > li> ul > li ul{ position: absolute; left: 200px; top: 0px; margin-top: 0px; border-top: 2px solid #13AC88; min-width: 200px; max-width: 200px; position: absolute; background: #000000; padding-top: 15px; left: -220px; display: none; z-index: 9999; padding-bottom: 10px; li{ a{ text-transform: capitalize; font-weight: normal !important; font-family: 'PT Sans',sans-serif !important; color: #fff; &:hover{ color: #fff; } } &:first-child{ border-top: 0px; } } } .main_nav_ul > li > ul.sub-menu > li > a{ color: #fff; &:hover{ color: #fff; } } /***************************** Menu **************************/ /*********************** Slider ***********************************/ .fullwidthbanner-container { max-height: 500px !important; overflow: hidden; padding: 0; position: relative; width: 100% !important; } .fullwidthbanner-container { z-index: 1; } /************************* End Slider *****************************************/ #Grid .mix{ opacity: 0; display: none; } article{ img{ max-width: 100%; } } .single_block_padding{ width: 100%; padding-top: 70px; } /*********************************** Cart Product ********************************************/ .woocommerce table.shop_table.rms_cart_table, .woocommerce-page table.shop_table.rms_cart_table{ width: 100%; box-shadow: none; border-radius: 0px; tr{ border-radius: 0px; td{ border: thin solid #f2f2f2; border-radius: 0px; a.remove{ color: #333333; display: inline-block; width: 20px; height: 20px; text-align: center; transition: all 700ms; border-radius: 0px; &:hover{ background: #07AD87; color: #ffffff; } } img.attachment-shop_thumbnail{ width: 50px; height: 50px; margin-top: 6px; } } .product-name{ a{ font-family: Open Sans; color: #222222; font-size: 12px; text-transform: uppercase; } } .product-price, .product-subtotal{ span.amount{ color: #222222; } } .product-quantity{ .quantity{ width: 100px; height: 40px; .input-text.qty.text{ width: 80px; height: 40px; border: thin solid #f2f2f2; border-radius: 0px; font-weight: normal; font-size: 16px; } .plus, .minus{ -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FFFFFF; border-color: #F2F2F2 #F2F2F2 #F2F2F2 -moz-use-text-color; border-image: none; border-radius: 0; border-style: solid solid solid none; border-width: thin thin thin medium; box-shadow: none; font-size: 20px; font-weight: normal; height: 20px; text-shadow: none; } } } .actions{ .button, .checkout-button{ color: #FFFFFF; font-size: 12px; height: 40px; text-transform: uppercase; transition: all 700ms; background: #07AD87; border: 1px solid #07AD87; &:hover{ background: #07AD87; } } .coupon{ width: 50%; float: left; #coupon_code{ border: 1px solid #F2F2F2; border-radius: 0; box-shadow: none; color: #333333; float: left; font-size: 13px; height: 40px; width: 71%; margin-right: 0px; } .button{ color: #FFFFFF; float: left; font-size: 12px; height: 40px; transition: all 700ms; text-transform: uppercase; &:hover{ background: #07AD87; } } } } } tr{ th{ border: thin solid #f2f2f2; color: #333333; font-weight: normal; font-size: 14px; text-transform: uppercase; border-radius: 0px; } } } .cart-collaterals{ .cart_totals { h2{ background: none repeat scroll 0 0 #07AD87; color: #FFFFFF; font-size: 18px; font-weight: normal; height: 40px; line-height: 2.4em; margin: 0; text-align: center; text-transform: uppercase; width: 100%; } table{ width: 100%; border-radius: 0px !important; tr{ border-radius: 0px; td{ border-radius: 0; font-size: 13px; padding: 15px 10px !important; text-align: right; text-transform: uppercase; } th{ border-radius: 0; border-right: medium none; font-size: 13px; font-weight: normal; padding: 15px 10px !important; text-align: left; text-transform: uppercase; width: 40% !important; } } } } .shipping_calculator{ padding-bottom: 50px; h2{ margin: 0px; a{ color: #FFFFFF; float: left; font-size: 12px; height: 40px; transition: all 700ms; text-transform: uppercase; background: #07AD87; padding: 10px 15px; &:hover{ background: #07AD87; } } } .shipping-calculator-form{ width: 100%; margin-top: 20px; p{ width: 50%; float: left; clear: none; select{ border: thin solid #f2f2f2; font-size: 13px; color: #333333; border-radius: 0px; padding: 4px; height: 35px; } input[type="text"]{ border: 1px solid #F2F2F2; border-radius: 0; color: #333333; font-size: 13px; height: 35px; } .button{ height: 35px; margin-top: 3px; width: 99%; background: #07AD87; &:hover{ background: #07AD87; } } } } } } .woocommerce .products .star-rating, .woocommerce-page .products .star-rating{ float: right; margin-top: 3px; } form.login, form.register{ border-radius: 0px !important; width: 100%; margin-left: auto !important; margin-right: auto !important; float: none; min-height: 396px; p{ label{ font-family: Open Sans; font-weight: normal; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; .required{ color: #07AD87 !important; font-weight: normal; } } input[type="text"], input[type="password"], input[type="email"]{ border-radius: 0px; height: 40px; &:focus{ box-shadow: none; outline: 0; } } input[type="submit"]{ width: 120px; height: 40px; margin-right: 20px; } label.inline{ input[type="checkbox"]{ margin-top: -2px; margin-right: 6px; } } } p.lost_password{ a{ font-size: 12px; color: #07AD87; text-transform: uppercase; transition: all 700ms; &:hover{ color: #333333; } } } } .custom_login_header{ width: 50%; margin-left: auto; margin-right: auto; text-align: center; } /************************************ End Cart ***********************************************/ @-webkit-keyframes drad { from { -webkit-transform:rotate(-9deg); } to{ -webkit-transform:rotate(9deg); } } @-moz-keyframes drad { from{ -moz-transform:rotate(-9deg); } to{ -moz-transform:rotate(9deg); } } .drad{ -webkit-transform-origin:50% -40px; -moz-transform-origin:50% -40px; -webkit-animation: oscillation 1s ease-in-out infinite alternate; -moz-animation: oscillation 1s ease-in-out infinite alternate; z-index:0; position:absolute; } /************************Progress Bar*********************/ .progress { background-color: rgba(0, 0, 0, 0); border-bottom: 1px solid #FFFFFF; border-radius: 0; box-shadow: none; height: 50px; margin-bottom: 15px; position: relative; .software-ico{ float: left; height: 50px; width: 50px; margin-right: 20px; } .progress_bar { line-height: 20px; background: @link_color; overflow: visible !important; span{ color: @white; line-height: 45px; font-size: 20px; z-index: 1000; font-family: Pt Sans; font-weight: 700; } } } .h-default-themed{ margin-top: 45px; } /********************************* Theme Panel *********************************************/ #themes_panel { position:fixed; top:150px; z-index:999999; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity:1; height: 50px; margin-left: -254px; select { background-color: #181818; display: inline-block; margin: 5px 0; background: none; color: #ffffff; font-size: 13px; width: 96%; padding: 4px; border: 1px solid; } .themepanelh5{ margin-top: 30px; } } #themes_panel ul, #themes_panel ol { padding:0; } #themes_panel h1,#themes_panel h2,#themes_panel h3, #themes_panel h4,#themes_panel h5,#themes_panel h6 { color:#e8e8e8; font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; text-transform:none; font-size:14px; margin-bottom:7px; letter-spacing:-1px; margin-top: 0px; } #themes_menu { float:left; width:254px; color:#444; background:#181818; box-shadow:0px 5px 30px -6px rgba(0, 0, 0, .3); } #themes_menu .segment { padding:10px; margin-bottom:10px; overflow:hidden; border-bottom:1px solid #222222; } #themes_menu h4 { font-size:18px; padding:11px 0; background:#333333; line-height:1; margin: 12px 0 0 0; } #themes_menu .segment.noborder { border:none; } #themes_menu ul.theme { margin:4px 0px 0px 0px; } #themes_menu ul.theme li { float:left; list-style: none; } #themes_menu ul.theme li a { display:block; margin:0px 5px 5px 0px; line-height:0px; border:1px solid #222; box-shadow:0px 1px 2px #111; text-decoration:none; } #themes_menu .cookie_layout_style li a,.bg-color-box li a{width:21px; height:21px;} #themes_menu ul.theme li a:hover { border:1px solid #272727; text-decoration:none; } #themes_menu label { display:inline-block; font-weight:bold; min-width:50px; } #themes_panel select { margin:5px 0; display:inline-block; } #toggle_button { margin:12px 0 0 -2px; padding:0px; float:right; width:40px; height:40px; background: url("themes_panel.png") no-repeat center center; -moz-border-top-right-radius:2px; border-top-right-radius:2px; -moz-border-bottom-right-radius:2px; border-bottom-right-radius:2px; box-shadow:1px 1px 2px rgba(0, 0, 0, .1); } #toggle_button a { display:block; padding:14px 0px; } .reset, .panel_btn { display: inline-block; margin: 10px 10px 10px 0; padding: 7px 10px; background: #414141; color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; transition: all 0.1s ease; -moz-transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -o-transition: all 0.1s ease; border-radius:2px; } .reset:hover, .reset:focus, .panel_btn:hover, .panel_btn:focus { background: #333333; color: #ffffff; transition: all 0.1s ease; -moz-transition: all 0.1s ease; -webkit-transition: all 0.1s ease; -o-transition: all 0.1s ease; } .panel_btn { padding:10px 7px; font-size:10px; color:#fffff; } .cookie_font li{ width:50%; } select#layout-switcher{width: 100%;padding: 5px;} .preset1{background: #07ad87;} .preset2{background: #21A117;} .preset3{background: #0FF160;} .preset4{background: #FF0B46;} .preset5{background: #5786E7;} .preset6{background: #619223;} .preset7{background: #D35400;} .preset8{background: #ed1f24;} .preset9{background: #493375;} .preset10{background: #009CF5;} .preset11{background: #2DB5AA;} .preset12{background: #CC0010;} .preset13{background: #F00F51;} .preset14{background: #2DCC70;} .preset15{background: #FFC406;} .preset16{background: #FF5400;} .preset17{background: #EE82EE;} .preset18{background: #9882F6;} /********************************* End Theme Panel *****************************************/ /**************** slider *************************/ .tp-caption.large_text{ font-family: 'Oswald', sans-serif !important; font-weight: 300; } .tp-bullets.simplebullets.round { margin-left: 0 !important; } .tp-bullets.simplebullets.round .bullet{ background: url(../images/bullet.png) no-repeat top left; margin-left: auto; margin-right: auto; margin-top: 9px; float: left; } .tp-bullets{ width: 100%; background: rgba(51, 51, 51, 0.4); margin-bottom: -20px; height: 40px; left: 0 !important; padding-left: 47%; } .tp-leftarrow.default{ background: url(../images/large_left.png) no-repeat 0 0 !important; width: 50px; height: 51px; left: 0px !important; } .tp-rightarrow.default { background: url(../images/large_right.png) no-repeat 0 0 !important; width: 50px; height: 51px; right: 0px !important; } span.white{ color: #fff; padding: 0 10px; } a.right-btn{ border: 1px solid #fff; color: #fff; border-radius: 0px; display: inline-block; line-height: 36px !important; width: 170px; height: 40px; padding: 0; text-align: center; background: transparent; position: relative; &::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #fff; color: #dedede; transition: all 700ms; } &:hover{ color: #4E4E4E !important; text-shadow: none !important; &::after{ height: 100%; z-index: -10; } } } /**************** enD OF THE SLIDER **************/ /**************** starT oF thE sequencE slideR *********************/ .animate-in{ .title{ bottom: 55%; font-size: 2.4em; color: #fff; text-transform: uppercase; font-weight: 400; } .subtitle{ bottom: 25%; font-size: 1.3em; a{ border: 1px solid @link_color; color: @link_color; border-radius: 0px; display: block; width: 160px; line-height: 35px; height: 40px; padding: 0; text-align: center; background: transparent; position: relative; &::after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: @link_color; color: #fff; transition: all 700ms; } &:hover{ color: #fff !important; text-shadow: none !important; &::after{ height: 100%; z-index: -10; } } } } } /**************** enD oF thE sequencE slideR *********************/ /**************** starT oF thE nivO slideR *********************/ #slider{ max-width: 100% !important; min-width: 100% !important; .nivo-caption{ p{ font-size: 16px; color: #fff; } } } /**************** enD oF thE nivO slideR *********************/ /**************** starT oF thE headeR shadoW *********************/ .effect2{ &::after, &::before{ z-index: -1; position: absolute; content: ""; bottom: 16px; left: 0; width: 45%; top: 64%; background: #000; -webkit-box-shadow: 2px 15px 25px #444; -moz-box-shadow: 2px 15px 25px #444; -o-box-shadow: 2px 15px 25px #444; box-shadow: 2px 18px 50px #161616; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); margin-left: -15px; margin-right: -15px; } &::after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: -16px; left: auto; } } #back-to-top{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); height: 40px; line-height: 45px; position: fixed; right: 50px; text-align: center; bottom: 50px; right: 50px; width: 40px; display: none; z-index: 99999999999999; i{ color: #ffffff; font-weight: bold; font-size: 25px; } } /**************** enD oF thE headeR shadoW *********************/ #header_container{ width: 100%; z-index: 9999999999; } .come-in-left { transform: translateX(-250px); animation: come-in-left 3500ms ease forwards; -webkit-animation: come-in-left 3500ms ease forwards; } @-webkit-keyframes come-in-left { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes come-in-left { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .come-in-right { transform: translateX(-250px); animation: come-in-right 3500ms ease forwards; -webkit-animation: come-in-right 3500ms ease forwards; } @-webkit-keyframes come-in-right { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes come-in-right { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .come-in-mid { transform: translateY(250px); animation: come-in-mid 2s ease forwards; -webkit-animation: come-in-mid 2s ease forwards; } @-webkit-keyframes come-in-mid { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes come-in-mid { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .come-in-title-up{ transform: translateY(-250px); animation: come-in-title-up 3500ms ease forwards; -webkit-animation: come-in-title-up 3500ms ease forwards; } @-webkit-keyframes come-in-title-up { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes come-in-title-up { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .logo_div{ z-index: 999999; } .main_nav_ul li.shortcode{ ul{ width: 400px; max-width: 400px; min-width: 400px; left: -140px; li{ width: 50%; float: left; } } } .nicescroll-rails{ z-index: 9999999999; width: 9px !important; div{ z-index: 9999999999; width: 7px !important; border: none !important; background-color: #000000 !important; right: 1px !Important; } }