/* * A Design by GraphBerry * Author: GraphBerry * Author URL: http://graphberry.com * License: http://graphberry.com/pages/license */ /* Table of content 1.General - This is created general styles and overide some bootstrap classes. 2.Layout 2.1 Animations 2.2 Buttons 2.3 Thumbnail - overide bootstrap thumbnail and add mased efect 2.4 Socail icons -style for social icons list 3 Sections - definition for section and subsection 3.1 Services 3.2 Portfolio 3.3 About 3.4 Clients 3.5 Price table 3.6 Newsletter 3.7 Contact 3.8 Footer 4 Responsive **********************************************************************/ /* 1. General **********************************************************************/ body { font-family:'Roboto', sans-serif; color: #FFF; line-height:1.2em; font-size:17px; line-height:20px; } a { color:#181A1C; text-decoration: none; } a:hover { color: #FECE1A; text-decoration:none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1 { margin: 10px; } p { padding: 10px; font-weight: 100; color: #fff; } .navbar { background: #181A1C; margin-bottom:0; min-height:70px; } .navbar-fixed-top { min-height:60px; height:60px; padding-top:0; } .navbar-inner { background: #181A1C; border-radius:0; -webkit-filter: none; filter: none; border: none; box-shadow: none; } .navbar .brand img { width:120px; height:40px; } .navbar .nav > li > span{ float: none; padding: 10px 15px 10px; color: #777777; text-decoration: none; text-shadow: 0 1px 0 #ffffff; } .navbar .nav > li > a, .navbar .nav > li > span { text-transform:uppercase; line-height: auto; vertical-align: middle; margin:10px 3px; -webkit-box-shadow: none; -moz-box-shadow: none; border: 1px solid #181A1C; box-shadow: none; font-size:15px; text-shadow: none; color: #fff; transition: border-color 1s ease; } .navbar .nav > li > span{ display: block; padding-top: 10px; } @media (min-width: 980px) { .navbar .nav > li:hover> a, .navbar .nav > li:hover> span, .navbar .nav > .active > a,.navbar .nav > .active > span, .navbar .nav > .active > a:hover,.navbar .nav > .active > span:hover, .navbar .nav > .active > a:focus, .navbar .nav > .active > span:focus { border: 1px solid #FECE1A; color: #fff; background-color: #181A1C; transition: border-color 1s ease; } } .nav-pills { margin-bottom: 30px; } .nav-pills > li > a { background: transparent; border-radius: 0; margin-right:5px; padding-left:25px; padding-right:25px; border: 1px solid #181A1C; } .nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { background: #181A1C; color: #fff; } .navbar .btn-navbar:hover, .navbar .btn-navbar { border-radius:0; background:#FECE1A; color: #000; } /****** 2. Layout **********************************************************************/ .centered { margin-left:auto; margin-right:auto; float: none; text-align: center; } /* Use this class if you want ceter element with span* class */ .center { float: none !important; margin: 0 auto !important; text-align: center; } .highlighted-box { background:#F4F8F9; padding:20px 30px; } .highlighted-box h1,.highlighted-box .like_h1 { margin:0px; } .large-text { line-height:1.2em; font-size: 30px; color: #181A1C; padding:20px; margin-bottom:20px; } .highlighted-box h1, .highlighted-box p{ color: #181A1C !important; } .circle-border { display: inline-block; border-radius: 500px; -khtml-border-radius: 500px; border: 3px solid #fff; } .left-align { text-align:left; } .right-align { text-align:left; } .error { color: #CF0000; display: none; } .invisible { display:none; visibility:visible; } .triangle { margin: 0 auto; text-align:center; width: 0; height: 0; border-top: 30px solid #181A1C; border-left: 585px outset transparent; border-right: 585px outset transparent; position: relative; } /* 2.1 Animations **********/ .zoom-in { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transition: all 250ms ease; } .zoom-in:hover { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); } /* 2.2 Buttons - There are buttons on a transparent background, primary and secondary color background. **********/ .button, .button:visited, .button:focus { display:inline-block; border:1px solid #181A1C; color:#181A1C; background-color:transparent; padding:15px 30px; font-size:17px; line-height:auto; } .button:hover, .button:active{ background-color:#181A1C; color:#fff; } .button-sp, .button-sp:visited, .button-sp:focus { border:none; background-color:#FECE1A; color:#181A1C; } .button-sp:hover, .button-sp:active { background-color:#181A1C; color:#FECE1A; } .button-ps, .button-ps:visited, .button-ps:focus { border:none; background-color:#181A1C; color:#FECE1A; } .button-ps:hover, .button-ps:active { background-color:#FECE1A; color:#181A1C; } /* 2.3 Thumbnails - Predefined bootstrap's thumbnail class. **********/ .thumbnail { width:100%; height:100%; padding:0; overflow: hidden; position: relative; border:0; border-radius:0; box-shadow:none; text-align:center; background: #191a1c; } .thumbnail .more { display:block; z-index:4; position:absolute; top:-100px; left:50%; margin:0 auto; margin-left:-41px; width:80px; height:80px; font-size:40px; color:#fff; text-decoration:none; line-height: 70px; text-align: center; } .thumbnail:hover .more { top:40%; margin-top:-40px; transition: all 0.3s ease-out; } .thumbnail h3, .thumbnail .like_h3, .thumbnail p { margin:0; padding:0; position:relative; z-index:4; } .thumbnail h3,.thumbnail .like_h3 { color: #FECE1A; margin-top:10px; font-size:20px; } .thumbnail > p { padding-bottom:20px; } .thumbnail .mask { opacity:0.85; filter: alpha(opacity=85); top:100%; left:0; width:100%; height:100%; background:#181A1C; position:absolute; transition: all 0.2s ease-out; } .thumbnail:hover .mask { top:0; } /* 2.4 Socail icons ************/ .social { list-style: none; float: none; position:relative; margin:5px; auto; } .social li { display:inline-block; line-height: 32px; font-family:'Porta'; font-size: 32px; padding:0 5px; } .social li a { margin:0; padding:0; width:32px; height:32px; color: #FECE1A; } .social li a:hover { color:#181A1C; } /* 3. Sections ***************************************************************************/ .section { padding-bottom: 50px; } .section .container { padding-top:50px; } .section .title { text-align: center; padding:10px; margin-bottom: 30px; } .section .title h1,.section .title .like_h1 { font-weight: normal; margin-bottom: 20px; padding: 0; } .section .title > p { font-size: 20px; color: #FFF; font-weight: lighter; } .primary-section { background:#181A1C; } .primary-section .triangle { border-top: 40px solid #FECE1A; } .primary-section .title { border-bottom: 1px solid #FFF; } .primary-section, .primary-section .title p, .primary-section h3, .primary-section .like_h3 { color: #FECE1A; } .primary-section h1,.primary-section .like_h1 { color:#FFF; } .secondary-section { background:#FECE1A; } .secondary-section .title { border-bottom: 1px solid #181A1C; } .secondary-section h1, .secondary-section .title p,.secondary-section .like_h1 { color: #181A1C; } /* Third section use bacground image */ .third-section { padding-bottom: 70px; background: #181A1C url(../images/brand-bg.png) no-repeat center; border-top:6px solid #FECE1A; } .third-section .container { padding-top:20px; position:relative; } .third-section .title { border-bottom: 1px solid #A1AAB7; color: #FECE1A; } .sub-section { margin-top:30px; } .sub-section .title { padding:0; } /******* 3.1 Services ***************************************/ .service{ margin-top:20px; } .service, .service h2 { padding-top:15px; } .service p { padding:0px 50px; height:60px; } .service img { width:150px; height:150px; } /* 3.2 Portfolio ***************************************/ .single-project { margin-bottom:30px; background:#181A1C; } .single-project img { width:100%; } .project-description { padding-right:20px; } .project-description p { padding-left:0; } .project-title { margin-top:15px; margin-bottom:15px; border-bottom:1px solid #FECE1A; } .project-title h3 { float:left; margin-top:0; padding:0; width:80%; } .project-title .close { color: #FECE1A; margin-top:10px; } .project-info span, .project-title h3 { color:#FECE1A; } .project-info { font-weight:100; padding:10px 0; } .project-info span { width: 80px; display: inline-block; } .project-info div { margin-bottom:5px; } .close { float: right; width: 40px; height: 40px; text-align: center; } #portfolio-grid .mix { opacity: 0; display: none; } /* 3.3 About ******************************************************************/ .team .thumbnail { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; border: 1px solid #fff; } .team .thumbnail:hover .social { z-index: 5; } .team .thumbnail:hover .social a { color:#fff; } .team .thumbnail .mask { background: #FECE1A; } .team .thumbnail .mask h2,.team .thumbnail .mask .like_h2 { margin-top:20%; } .team .thumbnail .mask, .team .thumbnail .mask h3, .team .thumbnail .mask p, .team .thumbnail:hover h3, .team .thumbnail:hover .social a:hover { color:#181A17; } .about-text { margin-top:30px; } .about-text p.like_h3{ font-size: 24.5px; } .about-text p { padding:0; font-size:16px; } /********************************************************************* SKILLS BAR *********************************************************************/ .skills { list-style-type: none; position: relative; margin:0px; } .skills li { margin-bottom:30px; background:#FFF; height:40px; padding:1px; } .skills li h3,.skills li .like_h3 { position: relative; font-size: 15px; padding:0; margin:0; left: 10px; z-index: 1; color: #181A1C; } .skills li .bar { height:40px; position:absolute; background-color: #FECE1A; } /* 3.4 Clients **********************************************************************/ .client-slider img { border:1px solid white; } .client-slider img:hover { background-color:#FECE1A; } .client-nav { list-style:none; margin-top:10px; } .client-nav li { float:left; display:block; margin-left:10px; } .client-nav li a { display:inherit; padding:5px; background:#FECE1A; border-radius:3px; width:20px; height:20px; } .client-nav li a:hover { background:#181A1C; } .testimonial p { color:#181A1C; background:#FECE1A; padding:15px; margin:0; } .testimonial .arrow { margin-left:10px; width:0; border-top:10px solid #FECE1A; border-left: 20px outset transparent; border-right: 20px outset transparent; } .testimonial .whopic { display:inline-block; } .testimonial .whopic img { margin-top:10px; width:50px; height:50px; float:left; } .testimonial .whopic strong { float:left; margin-top:10px; padding-left:10px; } .testimonial .whopic small { display:block; font-size:12px; } .testimonial-text{ display:block; font-size:22px; text-align:center; margin:0 auto; margin-top:30px; width:70%; line-height:1.3em; } /* 3.5 Price table ******************************************************************/ .price-table { margin-top: 70px; margin-bottom: 20px; } .price-column { background-color:white; border-radius: 10px; padding-bottom:20px; margin:0 auto; text-align:center; } .price-column h3,.price-column .like_h3 { background-color:#181A1C; text-transform:uppercase; text-align: center; color:#FECE1A; padding:40px 0px; font-size: 36px; margin-top:0px; border-radius: 10px 10px 0px 0px; } .price-column .list{ list-style:none; margin:20px 50px; } .price-column .list li{ font-weight:lighter; color:#747C89; font-size:20px; border-bottom:1px solid #747C89; padding:25px 0px; } .price-column .list li.price { text-align: center; font-size:31px; background-color:white; color:#747C89; margin-top:25px; } .price-text{ margin:30px 0 20px; font-size:20px; color: #181A1C; font-weight:normal; } /* 3.6 Newsletter ********************************************************************/ .newsletter, .newsletter h2 { color: #D7DDDE; } .newsletter .title h2 { text-align:left; padding:0; margin:0; } .newsletter form { text-align:right; } .newsletter input { margin-top:10px; padding:15px; height: auto; } .newsletter button { margin: 0 0 0 20px; } .newsletter .button-sp:hover, .newsletter .button-sp:active { background-color:#FFF; color:#181A1C; } /* 3.7 Contact ********************************************************************/ .contact { background: #FECE1A; } .contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6, .contact .section .title > p, .contact .social > li > a { color: #181A1C; } .contact textarea, .contact input[type="text"], .contact input[type="email"] { padding: 10px; line-height: 20px; height: auto; } .contact textarea { height: 120px; } .contacts, .contact .social { color: #fff; list-style: none; margin-left: 10px; } .contacts > li { margin-top: 15px; } .contacts > li > a { color: #fff; } .contact-info { margin-top:10px; margin-bottom:10px; } .contact-info p{ font-weight:normal; } .contact-info .icon { margin:10px auto; font-size:30px; } .map-wrapper { position:relative; height:500px; } .map-canvas { position:absolute; margin-bottom:20px; width:100%; height:500px; color: #29383F; position:absolute; left:0; top:0; right:0; } .contact .social { display: inline-block; margin-left:0; } .contact .social li { line-height: 32px; padding:10px 10px; font-family:'Porta'; font-size: 50px; transition: margin 0.4s; -webkit-transition: margin 0.4s; } .contact .social li a { color:#fff; } .contact .social li a:hover { color:#181A1C; } .contact-form { background:#fff; background: rgba(255, 255, 255, 0.9); z-index:110; position:relative; margin-top:-25px; padding:20px; } .contact-form h3,.contact-form .like_h3 { color:#838589; padding-bottom:20px; } #trueModal { min-width: 24%; width: auto; } .message-btn { border:1px solid #747C89; color:#747C89; background-color:transparent; padding:15px 30px; font-size:17px; } .message-btn:hover { background-color:#FECE1A; } .contact-info { text-align:center; font-size:22px; } .info-mail { border:1px solid white; width:60%; margin:0 auto; padding:15px; color:#181A1C; } .black { color:#181A1C; } /* 3.8 Footer ********************************************************************/ .footer { background: #181A1C; text-align: center; } .footer > p { color: #fff; margin:0; } .footer a{ color:#FECE1A; } .footer a:hover, .footer a:focus{ text-decoration: underline; } .scrollup { text-align:center; cursor:pointer; vertical-align:middle; width:39px; height:39px; border-radius:5px; font-size:20px; position:fixed; bottom:30px; right:20px; border:1px solid #fff; display:none; background: #FECE1A; } .scrollup > a { position:relative; top:7px; color:#fff; } /* 4 Responsible ********************************************************************/ @media (min-width: 1200px) { .thumbnail .more { margin-left:-41px; width:80px; height:80px; border-radius:40px; line-height: 80px; } } @media (min-width: 980px) { .hide-desctop{ display: none !important; } } @media (max-width: 979px) { body { padding-left:0; padding-right:0; } .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; } .navbar .nav > li > span{ display: block; padding-top: 10px; } .navbar .nav > li > span{ float: none; padding: 10px 15px 10px; color: #777777; text-decoration: none; text-shadow: 0 1px 0 #ffffff; } .navbar .nav > li > a, .navbar .nav > li > span { line-height: 20px; vertical-align: middle; } .section { padding-left:20px; padding-right:20px; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: 0px; margin-right: 0px; } .nav-collapse { clear: both; } .nav-collapse .nav { float: none; margin: 0 0 10px; } .nav-collapse .nav > li { float: none; } .nav-collapse, .nav-collapse.collapse { width: 100%; display: inherit; } .thumbnail .more { margin-left:-21px; width:40px; height:40px; border-radius:30px; line-height: 40px; } .thumbnail:hover .more { margin-top:-20px; } .newsletter form { text-align:center; } /* MOBILE MENU */ #top-navigation{ overflow: auto; max-height: calc(100vh - 100px); } #top-navigation li[parent]{ display: flex; flex-wrap: wrap; align-items: center; } #top-navigation li[parent]{ display: flex; flex-wrap: wrap; align-items: center; } #top-navigation li[parent] > .sub_m_link{ /*width: calc(100% - 80px);*/ width: 10%; } .mobile-button-open-row{ width: 35px; height: 35px; display: flex !important; align-items: center; justify-content: center; border: 2px solid rgba(254, 205, 26, 0.5); border-radius: 10px; cursor: pointer; font-size: 30px !important; color: #FECE1A; } #top-navigation a{ margin: 5px 3px; background: none; background-color: none; } #top-navigation span{ margin: 0px 15px; } #top-navigation li{ transition: 1s; border: 1px solid transparent; margin: 5px 0; border-radius: 10px; color: #fff; } #top-navigation li.open { border-bottom: 1px solid #FECE1A; } #top-navigation li.self > a{ background: #FECE1A; } #top-navigation li a:hover{ color: #fff; } #top-navigation li ul, #top-navigation li li{ width: 100%; } } @media (max-width: 767px) { .header_phone{ margin-left: 0!important; } i.fa.fa-2x.fa-phone{ display: none; } .info-mail { width:90%; padding:15px 0px; } .project-description { padding-left:20px; } .price-column, .testimonial { margin-top:30px; } #trueModal{ min-width: 100%; } .dropdown-menu li.active{ border: solid 1px#FECE1A!important; border-radius: 0px!important; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; padding: 3px!important; } #top-navigation li.lvl1.active{ border: solid 1px#FECE1A!important; border-radius: 0px!important; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; padding: 3px!important; } #top-navigation li.lvl1.active span{ margin: 0; color: #fff; } } .like_h1{ font-size: 38.5px !important; line-height: 40px; text-rendering: optimizelegibility; margin: 10px; display: block; -webkit-margin-before: 0.67em; -webkit-margin-after: 0.67em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .primary-section .highlighted-box .like_h1 { color: #181A1C !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .primary-section .like_h1 { color:#FFF !important; } .like_h2{ font-size: 31.5px !important; line-height: 40px; display: block; text-rendering: optimizelegibility; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .like_h3{ line-height: 40px; font-size: 24.5px; /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;**/ font-weight: normal; } /*ul.submenu { display: none; position: absolute; margin-left: 3px; top: 50px; } ul.submenu > li { display: block; } ul.submenu > li > a { display: block; color: white; border: 1px solid #FECE1A; color: #fff; background-color: #181A1C; transition: border-color 1s ease; padding: 10px; } ul.submenu > li > a:hover { text-decoration: underline; } ul.nav > li:hover > ul.submenu { display: block; }*/ @media (min-width: 980px) { ul.nav > li:hover > ul.dropdown-menu { display: block; margin-top: -16px; margin-left: 2px; } .dropdown-menu > li > a,.dropdown-menu > li > span{ border: 1px solid #FECE1A; color: #fff; background-color: #181A1C; transition: border-color 1s ease; padding: 10px; margin-top: -1px; } .dropdown-menu > li > span{ display: block; } .dropdown-menu > .active > a, .dropdown-menu > .active > span, .dropdown-menu > .active > a:hover,.dropdown-menu > .active > span:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > span:focus{ background: #FECE1A; color: #000; } .dropdown-menu > li > a:hover, .dropdown-menu > li > span:hover{ background: #FECE1A; color: #000; } } .dropdown-menu{ background: none; } .row-fluid .span4{ margin-left: 0; } .span4{ margin-left: 0; } .header_phone{ color: #fff; width: auto; padding-top: 20px; padding-left: 10px; float: left; } .header_phone:focus{ color: #fff; text-decoration: none; } i.fa.fa-2x.fa-phone{ margin-left: 15%; float: left; width: auto; padding-top: 15px; color: #FECE1A; } .mask .like_h2>a:hover,.mask .like_h2>a:focus{ color: #181A17; } .description_content ul.list{ padding-left: 20px; } .white{ color: #fff; } .form_zalog{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .form_zalog p.headline{ text-align: center; font-size: 1.5em; color: #000; font-weight: normal; } .navbar .nav > li > .dropdown-menu:after{ display: none; } .B_crumbBox li{ width: auto; display: inline-block; list-style-type: none; } .B_crumbBox li a{ color: #fff; } .B_crumbBox li a:hover{ color: #FECE1A; } .f_link{ margin: 15px 0; } .f_link a{ margin: 0 auto; opacity: 1; color: #fff; display: block; border: solid 1px; min-width: 15%; width: 200px; text-align: center; padding: 8px; border-radius: 5px; } .f_link a:hover{ color: #FECE1A; } .f_link a:focus{ text-decoration:none; outline: none; } .form-group textarea{ resize: none; } .jGrowl{ z-index: 99999!important; } @media (max-width: 979px){ .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a{ color: #fff; } } #trueModal{ color: #fff!important; background: #000; } #trueModal .headline{ color: #fff; } #trueModal input, #trueModal select, #trueModal textarea{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; height: auto; color: #fff; background: #000; padding: 7px; } #trueModal input:active, #trueModal select:active, #trueModal textarea:active,#trueModal input:focus, #trueModal select:focus, #trueModal textarea:focus { border-color: #FECE1A; } #trueModal input::placeholder,#trueModal select::placeholder,#trueModal textarea::placeholder{ color: #fff; } #trueModal input::-moz-placeholder,#trueModal select::-moz-placeholder,#trueModal textarea::-moz-placeholder{ color: #fff; } #trueModal .contact_attachment, #trueModal .control-label{ font-size: 16px; } .btn_close_modal{ float: right; background: none; border: none; color: #FECE1A; box-shadow: none; transition: easy 1s; } #trueModal .btn_close_modal:hover,#trueModal .btn_close_modal:active,#trueModal .btn_close_modal:focus { background: none; color: #fff; } #trueModal .file_load{ } #trueModal .btn_send{ display: block; width: 50%; background: no-repeat; border: solid 1px #FECE1A; color: #fff; padding: 15px; font-size: 16px; margin: 0 auto; text-transform: uppercase; float: none; margin: 0 auto; border-radius: 0px; } #trueModal .btn_send:hover, #trueModal .btn_send:active, #trueModal .btn_send:focus{ color: #FECE1A; } #trueModal .power_check{ /*width: 25%; float: left; display: inline-block;*/ padding-right: 10px; } #trueModal #power{ width: 20px; height: 20px; display: block; } .file-upload{ position: relative; overflow: hidden; padding: 0; color: #FECE1A; border-bottom: 2px dotted #FECE1A; width: 100px; margin: 10px; } .file-upload input[type="file"]{ display: none; } .file-upload label { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } .file-upload span { line-height: 36px; } #filename{ border:none; } .custom-select { position: relative; display: block; margin: 0 auto; border: 1px solid; /*background-color: #16013E;*/ z-index: 10; } .custom-select select { border: none; outline: none; background: transparent!important; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; margin: 0; display: block; width: 100%; padding: 12px 55px 15px 15px; font-size: 14px; color: #714BB9; } .custom-select:after { position: absolute; right: 0; display: flex; align-items: center; top: 0px; width: 30px; height: 100%; content: "\f107"; text-align: center; color: #FECE1A; z-index: -1; font: 30px FontAwesome; } .custom-select option{ background: #000; } .custom-select option:hover,.custom-select option:active, .custom-select option:focus{ background: #FECE1A; } select option:hover { box-shadow: 0 0 10px 100px #FECE1A inset; } select option:checked, select option:hover { box-shadow: 0 0 10px 100px #FECE1A inset; } #power{ display: none!important; } .custom_power{ width: 22px; height: 23px; background: #000; border: solid 1px #fff; display: inline-block; } .custom_power.active:before{ position: absolute; color: #FECE1A; margin: 2px } .power_group { margin-top: 10px; display: flex; }