/** * Genius * Copyright 2018 - HTML.Design * Licensed under (Creative Commons 3.0) */ @font-face { font-family: "Flaticon"; src: url("fonts/Flaticon.eot"); src: url("fontsFlaticon.eot?#iefix") format("embedded-opentype"), url("fonts/Flaticon.woff") format("woff"), url("fonts/Flaticon.ttf") format("truetype"), url("fonts/Flaticon.svg#Flaticon") format("svg"); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: "Flaticon"; src: url("fonts/Flaticon.svg#Flaticon") format("svg"); } } [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after { font-family: Flaticon; font-style: normal; } .flaticon-point-mark-on-a-circle:before { content: "\f100"; } .flaticon-message:before { content: "\f101"; } .flaticon-briefcase:before { content: "\f102"; } .flaticon-coffee-cup:before { content: "\f103"; } .flaticon-emoticon-square-smiling-face-with-closed-eyes:before { content: "\f104"; } .flaticon-smiley:before { content: "\f105"; } .flaticon-computer:before { content: "\f106"; } .flaticon-people:before { content: "\f107"; } .flaticon-lightbulb-idea:before { content: "\f108"; } .flaticon-gears:before { content: "\f109"; } .flaticon-technology:before { content: "\f10a"; } .flaticon-monitor:before { content: "\f10b"; } body { background-color: #ffffff; color: #aeaeae; font-size: 15px; line-height: 1.6; font-family: "Poppins", serif; } a { color: #aeaeae; text-decoration: none; } blockquote, a h1, a h2, a h3, a h4, a h5, a h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { color: #000000; font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 1.1; } .teammembers img, .blog-box, .cop-logo img, .service-box, a { outline: none; text-decoration: none !important; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } a:hover, a:focus { color: #000000; } .check li:before { content: "\f00c"; font-family: "FontAwesome"; font-size: 16px; left: 0; padding-right: 10px; position: relative; top: 2px; } .check li { font-size: 13px; list-style: none; margin-bottom: 8px; } .check li:last-child { margin-bottom: 0; } .check { margin-left: 0; padding-left: 0 } /********************* MENU *********************/ .vertical-header { position: fixed; left: 0; z-index: 1111; top: 0; bottom: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .vertical-header-wrapper { width: 100%; height: 100%; background: rgba(0, 0, 0, 1) url("images/menubg.jpg") no-repeat scroll center center; z-index: 10; overflow-x: hidden; min-width: 260px; overflow-y: auto } .subsub-menu-wrapper, .sub-menu-wrapper { opacity: 0; visibility: hidden; background-color: #151515; position: absolute; padding: 0px 10px 0; width: 100%; top: 0; max-width: 240px; bottom: 0; left: 60%; height: 100%; display: table; -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .subsub-menu-wrapper { background-color: #191919; } .primary-menu li:hover .subsub-menu li:hover a, .primary-menu li:hover .sub-menu-wrapper li:hover a, .primary-menu li:hover a { color: rgba(255, 255, 255, 1); } .primary-menu li:hover .subsub-menu li a, .primary-menu li:hover .sub-menu-wrapper li a, .menu-search .btn, .vertical-header li a { color: rgba(255, 255, 255, 0.7); } .primary-menu li:hover .subsub-menu li a { color: rgba(255, 255, 255, 0.7) !important; } .primary-menu li:hover .subsub-menu li:hover a { color: rgba(255, 255, 255, 1) !important; } .vertical-header li { list-style: none; } .vertical-header ul { padding: 0 15px; } .sub-menu li:hover .subsub-menu-wrapper, .child-menu:hover .sub-menu-wrapper { opacity: 1; z-index: 1000; left: 100%; position: absolute; visibility: visible; } .primary-menu li a { display: block; width: 100%; position: relative; text-decoration: none !important; } .primary-menu li .fa-angle-right { position: absolute; right: 0; font-size: 14px; top: 0px; } .yamm .fa-shopping-bag, .navbar-inverse .fa-shopping-bag, .primary-menu .fa-shopping-bag { margin-left: 4px; } .primary-menu { margin-top: 78px; } .primary-menu li { text-transform: capitalize; padding: 15px 20px; border-bottom: 1px dotted rgba(255, 255, 255, 0.15); font-size: 14px; line-height: 1 !important; margin: 0 !important; text-transform: capitalize; white-space: nowrap; font-family: 'Montserrat', sans-serif; } .primary-menu li:first-child { border-top: 1px dotted rgba(255, 255, 255, 0.15); } .center-content { display: table-cell; vertical-align: middle; } .margin-block { min-height: 40px; } .logo { padding: 80px 0 0; text-align: center; } .menu-search { padding: 0 15px; } .menu-search .form-group { position: relative; margin: 0; padding: 0; } .menu-search .btn { background-color: transparent !important; position: absolute; border: 0; top: -1px; padding-right: 10px; padding-left: 10px; font-size: 12px; right: 0; } .menu-search .form-control:focus .btn { color: #f4af0b !important; } .menu-search .form-control { border-radius: 0; background-color: transparent; height: 40px; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 11px; box-shadow: none !important; border-top: 1px dotted rgba(255, 255, 255, 0.15); border-bottom: 1px dotted rgba(255, 255, 255, 0.15); } .menu-search .form-control::-moz-placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; } .menu-search .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .menu-search .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7); } .menu-social ul { margin: 0; padding: 0; } .menu-social ul li { margin-top: 0; padding-top: 0; } .menu-social ul li i { font-size: 12px; padding: 10px; border: 1px dotted rgba(255, 255, 255, 0.2); } /*! * Yamm!3 - Yet another megamenu for Bootstrap 3 * http://geedmo.github.com/yamm3 * * @geedmo - Licensed under the MIT license */ .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; right: auto; } .yamm .yamm-content { padding: 30px 30px; } .yamm .dropdown.yamm-fw .dropdown-menu { left: 0; right: 0; } .yamm-content ul { list-style: none; padding: 0; } .yamm-content ul li { padding: 5px 0 } .yamm-content ul li:hover a { padding-left: 10px; } .yamm-content ul li em { font-size: 18px; } .yamm .dropdown-menu { box-shadow: none; border-color: #030303; background-color: #030303; border-radius: 0; } .yamm .dropdown-menu li a { color: #ffffff; } .yamm-half ul { min-width: 220px; } #header { -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #header.affix { position: fixed; top: 0; width: 100%; border-color: #030303; background-color: #030303; } #header .navbar-brand { padding: 7px 20px; } .transparent-header { position: absolute; top: 30px; right: 0; padding: 15px 0; z-index: 100; left: 0; } .nav, .navbar, .navbar-nav { margin-bottom: 0 !important; } .navbar-default { border-radius: 0; border: 0; background-color: transparent; } .navbar-default .nav>li>a { display: block; font-size: 14px; padding: 15px 15px; position: relative; text-transform: capitalize; font-weight: 500; font-family: montserrat; } .navbar-nav>li>.dropdown-menu { margin-top: 15px; } .dark-header { padding: 20px 0; z-index: 1111; background-color: #030303 } .light-header { padding: 20px 0; z-index: 1111; background-color: #ffffff; } .light-header.affix { background-color: #ffffff !important; } .light-header .nav>li>a { color: #000000; } .dark-header .nav>li>a, .transparent-header .nav>li>a { color: #ffffff; } .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { background-color: transparent; } .normal-header.dark-color .nav>li>a { color: #909090; } .normal-header.dark-color .nav>li>a:hover, .transparent-header.dark-color .social i, .transparent-header.dark-color .nav>li>a { color: #030303; } #header.affix { position: fixed; top: 0; width: 100%; border-color: #030303; background-color: #030303; } #header.affix.dark-color { border-color: #ffffff !important; background-color: #ffffff !important; } /********************* MOBILE MENU *********************/ .navbar-inverse { background-color: #121212; border: 0; margin: 0; padding: 10px 0; border-radius: 0; } .navbar-collapse { box-shadow: none; } .navbar-inverse .navbar-nav>li>a { font-size: 13px; font-weight: 400; margin: 0; text-transform: capitalize; white-space: nowrap; } .navbar-inverse .nav>li>a { padding-left: 10px; padding-right: 10px; } .navbar-inverse .navbar-nav>li { padding-left: 10px; } .navbar-brand { padding: 12px 20px; } /************************************ SLIDER ************************************/ .tp-caption.WebProduct-Title, .WebProduct-Title { font-family: 'Montserrat', serif; font-weight: bold; text-transform: capitalize; color: #ffffff; letter-spacing: 0; } .dark-color, .tp-caption.dark-color { color: #000000 !important; } .WebProduct-Content, .tp-caption.WebProduct-Content { font-family: 'Poppins', serif; color: #ffffff; opacity: 0.8 !important; font-weight: 400; } .tp-caption.Small-Title-Link, .tp-caption.Small-Title, .Small-Title { background-color: transparent; border-color: transparent; border-radius: 0 0 0 0; border-style: none; border-width: 0; color: rgba(255, 255, 255, 1.00); font-family: 'Montserrat', serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 24px; padding: 0; text-decoration: none; } .Small-Title-Link a, .tp-caption.Small-Title-Link a { background-color: transparent; border-color: transparent; border-radius: 0 0 0 0; border-style: none; border-width: 0; color: rgba(255, 255, 255, 1.00); font-family: 'Poppins', serif; font-size: 16px; font-style: normal; text-transform: uppercase; font-weight: 400; line-height: 24px; font-size: 10px; padding: 0; text-decoration: none; } /********************* SECTIONS *********************/ .overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; background: url(images/pattern.png) repeat center center rgba(0, 0, 0, 0.7); } .video-section { position: relative; width: 100%; height: 100%; height: 100vh; } .container { width: 100%; max-width: 1180px; } .section { padding: 90px 30px; position: relative; overflow: hidden; display: block; background-color: #ffffff; } .section.noover { overflow: visible !important; } .section-title { margin-bottom: 45px; } .text-widget h3, .section-title h3 { margin: 0 0 25px; padding: 0; font-size: 28px; font-weight: 600; } .section-title p { max-width: 800px; margin: 0 auto; padding: 0; } .section.lb { background-color: #f7f6f6 } .section.db { background-color: #000000 } .nopadtop { padding-top: 0; } .blog-box:hover, .service-box:hover, .shadow { box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.1); } .parallax { background-attachment: fixed; background-position: 50% 0; background-repeat: no-repeat; height: 100%; position: relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .parallax.parallax-off { background-attachment: scroll; display: block; height: 100%; min-height: 100%; overflow: hidden; position: relative; background-position: top center; vertical-align: sub; width: 100%; z-index: 2; } .no-scroll-xy { overflow: hidden !important; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } /********************* PORTFOLIO *********************/ .item-h2, .item-h1 { height: 100% !important; height: auto !important; } .post-media { padding: 0 !important; } .post-media img { width: 100%; } .isotope-item { z-index: 2; padding: 0; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } .portfolio-filter ul { padding: 0 0 20px 0; z-index: 2; display: block; position: relative; margin: 0; } .case-top .portfolio-filter ul { display: none; } .case-top .open>.dropdown-menu { display: block; } .portfolio-filter ul li { border-radius: 0; display: block; margin: 0 0 10px; text-decoration: none; text-transform: uppercase; text-align: left !important; vertical-align: middle; } .portfolio-filter ul.list-inline li { display: inline-block; } .portfolio-filter ul li:last-child:after { content: ""; } .portfolio-filter ul li .btn-dark { font-weight: 400; display: block; font-size: 14px; padding: 0; margin: 0 10px; color: #bbbbbb; text-transform: none !important; background: none !important; text-align: left; box-shadow: none; -webkit-transition: color 0.2s; text-decoration: none; letter-spacing: 0; transition: color 0.2s; } .case-top { display: block; margin-bottom: 10px; } .case-top .btn-custom { box-shadow: none !important; background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important; border-bottom: 1px solid #eeeeee; border-radius: 0; color: #000 !important; text-align: left; } .case-top p { font-weight: 400; margin-bottom: 0; font-size: 13px; margin-top: 15px; } .case-top .dropdown-menu { background-clip: padding-box; background-color: #fff !important; border: 1px solid #eeeeee; border-radius: 0; box-shadow: none; float: left; font-size: 14px; left: 0; list-style: outside none none; margin: 10px 0 0; min-width: 184px; padding: 15px; position: absolute; text-align: left; top: 100%; width: 100%; z-index: 1000; } .case-top .dropdown-menu>li>a { clear: both; color: #000; display: block; font-size: 13px; background-color: #fff !important; font-weight: 400; line-height: 1; padding: 0; text-transform: capitalize; white-space: nowrap; } .case-top .dropdown-menu>li { padding: 5px 20px; background-color: #ffffff !important; } .case-top .dropdown-menu>li:last-child { margin-bottom: 0; } .with-desc .pitem { padding: 15px !important; } .with-desc .entry { position: relative; padding: 0; overflow: hidden; } .item-desc { background-color: #fff; padding: 10px 25px 15px; border: 1px solid #eee; } .item-desc h4 a, .item-desc h4 { font-size: 16px; padding: 20px 0 12px; margin: 0; font-weight: 600; } /********************* CAROUSEL *********************/ .item { position: relative; } .item img { width: 100%; } .magnifier { top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; position: absolute; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .pitem:hover .magnifier, .item:hover .magnifier { opacity: 1; z-index: 1000; left: 5%; top: 5%; right: 5%; bottom: 5%; position: absolute; visibility: visible; } .pitem:hover .magnifier { left: 0; top: 0; right: 0; bottom: 0; } .magni-desc h4 { position: absolute; top: 20px; font-size: 18px; left: 20px; font-weight: 600; } .magni-desc h4 small { display: block; margin-top: 10px; text-transform: uppercase; font-size: 10px; } .magni-desc a.goitem { position: absolute; color: #fff; bottom: 0; right: 0; margin: auto; border-radius: 2px 0 0 0; width: 35px; line-height: 35px; height: 35px; font-size: 13px; text-align: center; display: block; } .pitem .magni-desc { color: #ffffff; position: absolute; top: 30px; width: 100%; left: 30px; } .pitem .magni-desc h4 { color: #ffffff; position: relative; margin-bottom: 10px; display: block; } .pitem .golink { position: absolute; right: 30px; bottom: 30px; display: block; width: 40px; height: 40px; line-height: 41px; text-align: center; background-color: #fff; } hr.invis1 { margin: 30px 0; border: 0; } .pitem .magni-desc small { position: relative; color: rgba(255, 255, 255, 0.7); display: block; margin: 25px 0 0 22px; } .owl-theme-01 .owl-nav [class*="owl-"] { background: #000 none repeat scroll 0 0; border-radius: 2px; color: #fff; cursor: pointer; display: inline-block; font-size: 18px; height: 33px; line-height: 35px; margin: 2px; padding: 0; width: 30px; } .owl-theme-02 .owl-nav [class*="owl-"] { background: #fff none repeat scroll 0 0; border-radius: 2px; color: #000; cursor: pointer; display: inline-block; font-size: 18px; height: 33px; line-height: 35px; margin: 2px; padding: 0; width: 30px; } /********************* FOOTER *********************/ .section.footer { background-color: #000 } .section.footer.light-footer { background-color: #ffffff; } .section.footer.light-footer p { color: #aeaeae; } .section.footer.light-footer img { display: block; margin: 0 auto 30px; } .section.footer.light-footer .social-links li { border: 1px solid #aeaeae; padding: 7px 14px; margin: 30px 2px; border-radius: 100%; } .section.footer.light-footer strong { color: #000; } .social-links i { color: #aeaeae; } .copyrights { padding: 25px 0; background-color: #151515; } .newsletter-widget .form-control { border: 0 none; border-radius: 0; font-size: 13px; box-shadow: none !important; height: 46px; background: #151515; min-width: 280px; } .newsletter-widget img { display: block; max-width: 280px; margin-top: 40px; } .newsletter-widget { margin-top: 5px; } .newsletter-widget p { margin-bottom: 30px; } .newsletter-widget .btn { padding-left: 23px; padding-right: 23px; } .copyrights ul, .footer ul { list-style: none; padding: 0; } .footer ul li { margin: 10px 0; } .copyrights li { margin: 13px 0 0 !important; } .newsletter-widget .form-control::-moz-placeholder { color: rgba(255, 255, 255, 0.4); opacity: 1; } .newsletter-widget .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.4); } .newsletter-widget .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.4); } .copyrights, .footer .form-control, .footer p, .copyrights a, .footer a { color: rgba(255, 255, 255, 0.4); } .copyrights a:hover, .footer a:hover { color: rgba(255, 255, 255, 0.8); } .cop-logo img { margin-top: 9px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .teammembers img:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .teammembers img, .cop-logo img:hover { -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */ filter: grayscale(0); } .absolute-widget { position: relative; display: block; margin-top: -30%; padding: 30px; } .absolute-widget .form-control { background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; font-size: 13px; height: 40px; color: rgba(255, 255, 255, 0.7); margin-bottom: 15px; } .absolute-widget::before { border-right: 10px solid #646464; border-top: 19px solid transparent; content: ""; display: block; height: 0; left: -10px; position: absolute; top: 0; width: 7px; } .absolute-widget textarea.form-control { height: 100px; } .absolute-widget .form-control::-moz-placeholder { color: rgba(255, 255, 255, 0.7); opacity: 1; } .absolute-widget .form-control:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); } .absolute-widget .form-control::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7); } /********************* TEAM MEMBERS *********************/ .teammembers img { width: 100%; } .teammembers:hover { cursor: pointer; } teammembers .magnifier { overflow: hidden; } .teammembers .magnifier p { padding-bottom: 10px; } .teammembers:hover .magnifier, .entry:hover .magnifier { zoom: 1; filter: alpha(opacity=100); opacity: 1; } .teammembers { overflow: hidden; position: relative; } .visible-buttons { visibility: hidden; margin: 0 auto; opacity: 0; position: absolute; text-align: center; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -ms-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; bottom: 0; left: 0; right: 0; padding: 50px 20px 40px; position: absolute; text-align: center; } .visible-buttons h4 { padding: 0; margin: 0; font-size: 18px; } .teammembers:hover .visible-buttons, .entry:hover .visible-buttons { opacity: 1; bottom: 0; visibility: visible; } .teammembers .visible-buttons { background-color: #ddd !important; } .teambuttons p { padding: 0 30px 20px; color: #fff !important; } .teambuttons a { margin: 0 5px; color: #fff !important; } .teamdesc { padding: 40px 30px; background-color: #f7f6f6; } .teamdesc h4 { padding: 0; margin: 0 0 10px; font-weight: 600; font-size: 18px; } .teamdesc p { display: block; font-style: italic; padding-bottom: 0; margin: 0; } /********************* MODULES *********************/ .skills { display: block; overflow: hidden; position: relative; } .skills p { letter-spacing: 0; margin-left: 0; line-height: 1; color: #000; text-transform: capitalize; padding-bottom: 10px !important; font-weight: 600; font-size: 16px; } .progress { height: 8px; background-color: #f7f6f6; border-radius: 0; margin: 0px 0 25px; box-shadow: none; } .progress-bar { float: left; width: 0%; height: 100%; overflow: visible; font-size: 12px; line-height: 20px; color: #ffffff; text-align: center; background-color: #030303; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 1.1s ease; -o-transition: width 1.1s ease; transition: width 1.1s ease; } .progress { overflow: initial; position: relative; } .progress .progress-bar { position: absolute; z-index: 10; line-height: 20px; } .progress .progressbar-back-text { position: absolute; width: 100%; height: 100%; font-size: 12px; line-height: 20px; text-align: center; } .progress .progressbar-front-text { width: 100%; font-size: 12px; line-height: 20px; } .progress-bar span { color: #030303 !important; display: block; font-size: 14px; overflow: visible; text-align: center; position: absolute; right: 0; top: -20px; z-index: 9999; } .list-style-2 { list-style: none; padding: 0; } .list-style-2 li { margin-top: 0; margin-bottom: 15px; } .list-style-2 li i { padding-right: 8px; } .images-container { position: relative; } .images-container img { position: absolute; bottom: 10%; right: 0; top: 100%; } .custom-module h2 { font-size: 28px; font-weight: 600; line-height: 40px; margin: 0 0 30px; padding: 0; } .custom-module h4 { font-size: 21px; font-weight: 600; line-height: 40px; margin: 0 0 30px; padding: 0; } .custom-module mark { line-height: 1; padding: 0 10px; } .custom-module p { padding-bottom: 30px; margin: 0; } .home-text-wrapper { display: table; width: 100%; height: 100%; position: relative; text-align: center; z-index: 11; } .home-content { position: relative; } .home-message { display: table-cell; height: 100%; vertical-align: middle; } mark.rotate { background-color: transparent; color: #ffffff; padding: 0; margin: 0; } .home-message p { font-size: 68px; color: #ffffff; padding: 10px 0 20px; margin: 0; font-weight: bold; } .perspective-image { bottom: -94px; padding: 0; position: absolute; z-index: 0; right: -295px; } .tagline-message h3 { padding: 0; font-size: 34px; margin: 0; font-weight: bold; } .process-box { background-color: #fff; padding: 50px 20px; position: relative; overflow: hidden; } .process-end { top: 0; left: 0; right: 0; bottom: 0; padding: 30px 20px 0; visibility: hidden; opacity: 0; z-index: 10; position: absolute; -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.15s ease-in-out, opacity 0.15s ease-in-out, top 0.15s ease-in-out, bottom 0.15s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .process-box:hover .process-end { opacity: 1; z-index: 1000; left: 0; top: 0; right: 0; bottom: 0; position: absolute; visibility: visible; } .service-box { background-color: #ffffff; padding: 60px 30px; } .service-style-2 { position: relative; overflow: hidden !important; } .service-style-2 i { bottom: -60px; font-size: 130px !important; position: absolute; color: #d1d0d0 !important; right: -30px; opacity: 0.2; } .service-style-2 h3 { margin: 0 0 25px !important; } .servicebox { margin: 15px 0; position: relative; border: 1px solid #dfdfdf; padding: 60px 30px; background-color: #ffffff; } .servicebox .title h3 { font-size: 18px; font-weight: 600; padding: 0; margin: 0; } .servicebox p { padding: 20px 0; margin: 0; } .service-icon { border: 1px solid #dfdfdf; bottom: -20px; background-color: #ffffff; display: block; height: 80px; line-height: 76px; padding: 0; position: absolute; right: 20px; text-align: center; width: 80px; } .service-icon i { font-size: 34px; } .readmore { font-weight: bold; color: #222222; display: block; line-height: 1; font-size: 13px; } .process-box h3, .service-box h3 { font-size: 20px; font-weight: 600; padding: 0; line-height: 1; margin: 25px 0 25px; } .process-box h3 { margin-bottom: 0; font-size: 16px; } .process-end h3 { font-size: 18px; margin-top: 10px; margin-bottom: 15px; } .service-box p { margin-bottom: 0; padding-bottom: 0; } .process-box i, .service-box i { font-size: 44px; line-height: 1; } .service-box.m30 { margin-top: -40px; } .text-widget { position: relative; z-index: 1; } .text-widget p { margin-bottom: 20px; } .client-box { width: 20%; text-align: center; float: left; } .client-box img { margin: auto; } .testimonial { position: relative; border: 1px solid #eeeded; padding: 60px 30px; background-color: #ffffff; } .testimonial p { font-style: italic; } .testimonial p.testiname { font-style: normal; display: block; padding-bottom: 0; margin-bottom: 0; margin-top: 20px; } .testimonial p.testiname strong { font-weight: 600; letter-spacing: -0.6px; } .testimonial img { margin-right: 10px; max-width: 50px; } .testimonial:before { content: "\f10d"; background-color: #fff; padding: 5px; font-family: FontAwesome; position: absolute; top: -25px; color: #eeeded; font-size: 34px; right: 20px; } .testimonial strong { color: #000000; } .callout h3 { font-size: 90px; line-height: 90px; margin-top: 0; color: #ffffff; font-weight: bold; } .callout h4 { color: #ffffff; } .callout h3 sup { font-size: 34px; top: -0.2em; vertical-align: super; } .callout .lead { color: #ffffff; font-size: 29px; font-weight: bold; line-height: 36px; padding: 30px 8px 0; } /********************* BLOG *********************/ .blog-box { background-color: #ffffff; padding: 0; } .post-media img { width: 100%; } .post-meta { font-family: 'Montserrat', sans-serif; padding: 15px 30px 10px; margin-top: -5px; border-top: 1px dotted #e5e5e5; line-height: 1; } .post-meta a { font-size: 10px; } .post-meta li:after { content: "|"; font-size: 12px; vertical-align: middle; padding: 0 5px 0 10px; } .post-meta .list-inline>li { padding-left: 0; padding-right: 0; } .post-meta li:last-child:after { content: "" } .blog-desc { padding: 30px; display: block; position: relative; } .blog-desc h4 a, .blog-desc h4 { font-size: 20px; font-weight: 600; padding: 0 0 17px; margin: 0; } .blog-desc p { padding: 0; margin: 0; } .stat-count h3, .stat-count h4 { color: #ffffff; } .stat-count h4 { font-size: 44px; line-height: 1; padding: 0; margin: 0; } .stat-count h3 { padding: 30px 0; margin: 0; line-height: 1; font-size: 20px; } .stat-count h3 i { padding-right: 10px; border-right: 1px solid #fff; margin-right: 10px; } .stat-count p { padding: 0; margin: 0; } /********************* BUTTONS *********************/ .btn { -moz-user-select: none; background-image: none; border: 0 solid transparent; border-radius: 0; color: #ffffff; display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; padding: 13px 40px; text-align: center; white-space: nowrap; } .btn:hover, .btn:focus { opacity: 0.9; } /********************* COLORS 1 *********************/ .progress-bar, .owl-theme-02 .owl-nav [class*="owl-"]:hover, .teammembers .visible-buttons, .custom-module mark, .pitem .golink, .btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary { background-color: #01bacf !important; border-color: #01bacf !important; color: #ffffff !important; } .section.db .owl-theme-01 .owl-nav [class*="owl-"], .owl-theme-01 .owl-nav [class*="owl-"]:hover, a.goitem, .bgcolor { background-color: #01bacf; } .list-style-2 i, .social-links li:hover i, .section.footer.light-footer a, .parallax mark.rotate, .case-top .dropdown-menu>li:hover a, .navbar-default .nav>li:hover a, .yamm .fa-shopping-bag, .service-icon i, .stat-count h3, .portfolio-filter ul li a.active, .post-meta li:after, a:hover, a:focus { color: #01bacf; } .absolute-widget::before { border-right-color: #00a1b6; } .owl-theme-02 .magnifier { background-color: rgba(255, 255, 255, 0.8); } /********************* COLORS 2 (GREEN) *********************/ .bgcolor1, .btn-default:active:hover, .btn-default.active:hover, .open>.dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open>.dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open>.dropdown-toggle.btn-default.focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default { background-color: #c2d82e !important; border-color: #c2d82e !important; color: #ffffff !important; } .menu-social ul li:hover i, .menu-search .form-control:focus { border-color: #c2d82e; } .process-box:hover .process-end { background-color: #c2d82e; } .process-box i, .check li:before, .service-box i, .navbar-inverse .fa-shopping-bag, .primary-menu .fa-shopping-bag { color: #c2d82e; } .navbar-default .nav .dropdown-menu li a, .process-end p, .process-end i, .process-end h3, .section-title.light-color h3, .tagline-message h3, .magni-desc h4 a { color: #ffffff; } /********************* RESPONSIVE *********************/ @media(max-width:768px) { .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background-color: #121212; color: #ffffff; } .navbar-collapse { border: 0; box-shadow: none; } .newsletter-widget .btn { display: block; width: 100%; } .nopadtop { padding-top: 90px; } .service-box.m30 { margin: 15px 0; } .mobile-menu { display: block; } .vertical-header { display: none; } .transparent-header { left: 0; padding: 15px 0; position: relative; right: 0; top: 30px; z-index: 100; top: 0; background: #000; } #header.affix { position: relative; } } @media(min-width:768px) { .mobile-menu { display: none; } body.left-menu #wrapper { padding-left: 260px; } } @media(max-width:1198px) { .absolute-widget { margin-top: 0 !important; } .absolute-widget:before { display: none !important; } .footer .widget { margin: 30px 0; } } @media(max-width:998px) { .stat-count { margin: 15px 0; } .copyrights, .copyrights .text-right { text-align: center; } .home-message p { font-size: 48px; } } @media(max-width:550px) { .btn-wrapper .btn { display: block; } .callout .lead, .tagline-message h3 { font-size: 20px; } .home-message p { font-size: 28px; } .client-box { width: 100%; margin: 15px 0; } .client-box img { max-width: 240px; } } @media (min-width: 992px) { .dropmenu { position: relative; } .dropmenu:hover>ul { visibility: visible; opacity: 1; top: 100%; } .navbar-nav .dropmenu ul { -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out; } .dropmenu .dropdown-menu { min-width: 240px; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .dropmenu>ul { position: absolute; top: 130%; visibility: hidden; display: block; opacity: 0; left: 0; } .dropmenu>ul.start-right { right: 0; left: auto; } .dropmenu>ul li { position: relative; } .dropmenu>ul li:hover>ul { visibility: visible; opacity: 1; left: 100%; } .dropmenu>ul li:hover>ul.show-right { right: 100%; } }