ov@charset "utf-8"; /* ---------------------------------- Style.css / Version:1.0 >> Table of contents 01. Google Font 02. PreLoader 03. Reset 04. Typography 05. Icon 06. Background Colors 07. Margin and Padding 08. Scroll to top 09. Buttons 10. Navigation 11. Parallax and Hero Image 12. My Skills 13. Portfolio 14. Reviews 15. Footer 16. Custom Settings ---------------------------------- */ /* ------------------------------- 01- Google font ------------------------------- */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Ubuntu:300,400,500,700); /* ------------------------------- 02- PreLoader ------------------------------- */ .preloader {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #1d1d1d; z-index: 9999; } .preloader img {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 50px; height: 50px; margin: auto; } /* ------------------------------- 03- Reset ------------------------------- */ a{ color: #000; } a:hover{ color: #5c5c5c; text-decoration: underline;} section {padding: 98px 0px !important; } body{ line-height:22px; letter-spacing: 0.02em; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; font-size:12px; color:#646363;} input[type="text"], textarea { -webkit-appearance: none; border-radius: 0; } input:focus, textarea:focus{ border: 1px solid #818181; border-radius: 1px; } img { -webkit-backface-visibility: hidden; height:auto; max-width:100%; } textarea { padding: 8px 14px; border: 1px solid #e8e8e8; letter-spacing: 1.5px; font-size: 12px; width: 100%; height: 140px; margin-bottom: 16px; max-width: 100%; resize: none;} select::-ms-expand{ display:none; } .animated { -moz-transition-duration: 0s !important;} * { transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } .no-transition * { transition-timing-function: none; -webkit-transition-timing-function: none; -moz-transition-timing-function: none; -o-transition-timing-function: none; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; } select,input{ border: 1px solid #e8e8e8; letter-spacing: 1.5px; font-size: 12px; padding: 8px 14px; width: 100%; margin-bottom: 16px; max-width: 100%; resize: none;} ul { list-style-position: outside; margin: 0px; padding:0px; list-style: none outside none; } ::selection { color: #000; background:#d7d7d7; } ::selection { background:#d7d7d7; color: #000; } ::-webkit-scrollbar { width:9px; } ::-moz-selection { color:#000; background:#d7d7d7; } ::-webkit-scrollbar-thumb:window-inactive { background:rgba(210,210,210,.3) } ::-webkit-input-placeholder { text-overflow: ellipsis; color: #959494; } ::-moz-placeholder { opacity:1; color: #959494 !important; text-overflow: ellipsis; } :-moz-placeholder { opacity:1; color: #959494 !important; text-overflow: ellipsis; } :-ms-input-placeholder { opacity:1; color: #959494 !important; text-overflow: ellipsis;} ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2); -moz-box-shadow:inset 0 0 5px rgba(0,0,0,.2); box-shadow:inset 0 0 5px rgba(0,0,0,.2); } ::-webkit-scrollbar-thumb { background:rgba(210,210,210,.7); -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.5); -moz-box-shadow:inset 0 0 5px rgba(0,0,0,.5); box-shadow:inset 0 0 5px rgba(0,0,0,.5); } /* only ie7, ie9, ie10, ie11 */ @media screen\0 { input { /* ie7, ie9, ie10, ie11+ only */ padding: 0px 0px 18px 0px; } } /* Remove inner shadow from inputs on mobile iOS */ /* ------------------------------- 04- Typography ------------------------------- */ /* Fonts */ .head-font {font-family: 'Ubuntu', sans-serif !important; } /* Headings */ h1 { font-weight: 600; font-size: 25px; line-height: 43px; text-transform: lowercase} h2 { font-weight: 400; font-size: 23px; line-height: 29px; letter-spacing:inherit; } h3 { font-weight: 700; font-size: 18px; line-height: 27px; text-transform: lowercase; padding-bottom: 2%} h4 { font-weight: 300; font-size: 13px; line-height: 27px; letter-spacing: 1.8px; text-transform:none; } h5 { font-weight: 700; color: #434343 !important; } h6 { font-weight: 400; font-size: 12px; line-height: 19px; letter-spacing: 1.8px;} h1, h2, h3, h4, h5 { padding: 0px; color: #gray; margin: 0px; } /* Section Title */ .section-heading{ padding-bottom:19px; text-transform: lowercase; color: #000; font-size: 31px; letter-spacing: 2px; font-family: 'Ubuntu', sans-serif; } /* Text transform */ .text-upper{text-transform: uppercase !important;} .text-lower{text-transform: lowercase !important;} /* Different text size */ /* Text Colors */ .text-gray { color:#333 !important;} .name { font-weight: 600; text-transform: uppercase;} .text-black { color: #000 !important;} .text-light-gray{color: #c6c6c6 !important;} .text-md-black {color: #434343 !important;} .text-md-black {color: #434343 !important; font-weight: 700;} .text-silver{ color: #817e7e; } /* Letter spacing */ .letter-spacing1 { letter-spacing:1px !important; } /* Font Weight */ .font-weight3 { font-weight:300 !important; } .font-weight8 { font-weight:800 !important; } /* ------------------------------- 05- Icon Settings ------------------------------- */ i { color: #959595; margin: 0 3px} .icon-med { font-size:40px !important; margin-bottom: 15px !important; } .icon-sm { font-size:24px !important; margin-bottom: 15px !important; } /* ------------------------------- 06- Background Colors ------------------------------- */ .gray-bg{ background: #edecec !important; } /* ------------------------------- 07- Margin and Paddings ------------------------------- */ .margin-top3{ margin-top:3% !important; } .margin-top-8 {margin-top:8% !important; margin-bottom:0% !important;} .margin-tp-btm-1{ margin-top:1% !important; margin-bottom:1% !important;} .margin-tp-btm-2 { margin-top:2% !important; margin-bottom:2% !important;} .margin-tp-btm-3 { margin-top:3% !important; margin-bottom:3% !important;} .margin-tp-btm-5 { margin-top:5% !important; margin-bottom:5% !important;} .margin-top-5 { margin-bottom:0px !important; margin-top:5% !important;} .zero-margin-lr { margin-right: 0px !important; margin-left: 0px !important;} .zero-margin-btm { margin-bottom:0px !important;} .zero-padding {padding:0px !important;} .grid {layout-grid-line: 15px;} /* ------------------------------- 08- Scroll to top ------------------------------- */ .scrollTop { display: none; font-weight: bold; height: auto; padding: 0; position: fixed; right: 30px; text-align: center; text-decoration: none; top: 91%; width: auto; background-color: #7f817c; z-index: 555; border-radius:50%; } .scrollTop i { font-size: 13px; margin: 0px 6px; color: #fff; } .scrollTop:hover { background-color: #434343; } .scrollTop:hover i { position: relative; } /* ------------------------------- 09- Buttons ------------------------------- */ .btn {display: inline-block; letter-spacing: 2px; border:1px solid transparent } .button { margin-top:0; margin-bottom: 0} .btn.btn-small { font-size: 12px; padding: 3px 14px; letter-spacing: 1px; } .dark-btn { border:1px solid #000; display: inline-block; padding: 9px 20px 9px; font-size: 13px; color:#fff; background-color: #000; } .dark-btn:hover { background-color: transparent; border: 1px solid #000; color:#000} /* ------------------------------- 10- Navigation ------------------------------- */ .main-logo { max-width: 109px; } nav { width: 100%; z-index: 99; top: 0px;} nav .container{ height: 80px; display: table-cell; vertical-align: middle; position: relative; } .shrink-nav .container { height: 59px; } .shrink-nav { background-color: rgba(255, 255, 255, 0.95);} .fix-nav{ position: fixed; display: inline-table; top: 0px;} .fix-nav .white-logo { vertical-align: middle; display: table-cell; height: 54px;} .shrink-nav .white-logo { opacity: 0; display: none} .fix-nav .color-logo {opacity: 0; display: none} .shrink-nav .color-logo { opacity: 1; height: 54px; vertical-align: middle; display: table-cell; } .fix-nav.nav-border-bottom { border-bottom: 1px solid rgba(0,0,0,0)} .shrink-nav.nav-border-bottom { border-bottom: 1px solid rgba(0,0,0,0.1)} .navbar-default .navbar-nav > li > a{ color:#000 !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a.active {text-decoration: underline;} .shrink-nav .navbar-nav > li > a{ color:#878686 !important; } .nav-tabs > li.active > a{ border-bottom: 1px solid #434343 !important; color: #434343 !important;} .nav-tabs > li > a:hover{ border-bottom: 1px solid #434343 !important; color: #434343 !important;} .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a.active{border-bottom: none !important;} /* ------------------------------- 11- Parallax and Hero Image ------------------------------- */ .bg-fix{ background-position: center center; background-repeat: no-repeat !important; position: relative; background-size: cover !important; background-attachment: fixed !important; overflow: hidden;} .hero-text-style { width: 100%; height: 100%; position: absolute; z-index: 1; right: 0; left: 0; } .hero-text-padding { padding:0 22px; } .hero-img-txt { display: table; height: 100%; width: 100% } .hero-text-mid { display: table-cell; vertical-align: middle; } .parallax-fix{ position: relative; background-size: cover !important; overflow: hidden; background-position: center center; background-repeat: no-repeat !important; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; background-attachment: fixed !important } .bg-fix{ position: relative; background-size: cover !important; overflow: hidden; background-position: center center; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* Styles */ /* ------------------------------- 12- My Skills ------------------------------- */ .skill-name{font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 400; margin: 5px 0 15px} .skill-name strong { color: #000; font-weight: 500} .skills .progress { background-color: #dedede; height: 11px; overflow: hidden; margin-bottom: 12px; border-radius: 11px; } .skills .progress-bar { float: left; width: 0; height: 100%; font-size: 13px; line-height: 20px; color: #fff; text-align: center; background-color: #000; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .skills .skill-name{font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 400; margin: 5px 0 24px} .skills .skill-name strong { color: #000; font-weight: 500} /* ------------------------------- 13- Portfolio ------------------------------- */ .nav-portfolio li a { margin: 0px 32px} .grid { margin: 0 auto; } .nav-portfolio { height: 60px;} .nav-portfolio a { font-size: 11px; color: #9a9999; } .nav-portfolio li:first-child a{ margin-right: 32px;} .nav-portfolio li:last-child a{ margin-left: 32px;} .grid li {transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s;} .grid img { width:100%} .grid-items { clear: both; width: 100%; } .img-portfolio a { position: relative; display: block; z-index: 2;} .grid li { box-sizing: border-box; width: 25%; margin: 0px; display: inline-table; } .grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .grid-items ul { list-style: none; padding: 0; } .grid-items figure { margin: 0; position: relative } .grid-items figure img { display: block; width: 100%; opacity: 1; cursor: pointer; } figure:hover img { -ms-transform: scale(1.07,1.07); -webkit-transform: scale(1.07,1.07); transform: scale(1.07,1.07); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; cursor:url("../images/icon-zoom-white.png"), pointer; } .img-portfolio { opacity: 1; overflow: hidden; transition: all 0.3s ease 0s; } .nav-tabs > li > a { margin-top: 0px;} .col-width .grid li { width: 20%; float: left; } .gutter .grid-items ul { margin-left: -14px} .gutter .grid li { padding: 0px 0px 7px 7px;} .grid-items ul { margin-left:1px; } .videoWrapper { position: relative; padding-bottom: 50.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ------------------------------- 14- Reviews ------------------------------- */ .review-section p{ font-size:13px; line-height:22px; color: #828282} .review-section .name{ margin:20px 0px 10px; font-size:13px; display:block; width:100%; font-weight:700; text-transform: uppercase; letter-spacing: 1.8px;} .review-section img { border-radius: 50%; max-width: 120px; box-shadow: 0px #fff,0 0 0 5px #e8e8e8;} /* ------------------------------- 15- Footer ------------------------------- */ .icons-footer a { margin: 0px 13px;} .icons-footer i { font-size: 22px;} .icons-footer a i {color: #9a9999; top: 0px; position: relative; } .icons-footer a:hover i { color:#434343 !important; top: -2px; } .footer-btm { position: relative; top:1px} footer { clear:both; background: #fff} /* ------------------------------- 16- Custom Settings ------------------------------- */ /* vertical alignment */ .element { position: relative; top: 50%; transform: translateY(15%); .vertical-align-wrap { position: absolute; width: 100%; height: 100%; display: table; } .vertical-align { background: white; display: table-cell; } .vertical-align--middle { vertical-align: middle; } .vertical-align--bottom { vertical-align: bottom; } } .vcontainer { width: auto; height: 100%; display: flex; margin:auto; text-align: center; } .vparent { display: flex; margin: auto; width: 80%; height: 90%; text-align: center; } .vchild { margin: auto; padding:30px 5px; } /* opacity */ .light-opacity{ position: absolute; height: 100%; width: 100%; opacity: 0.7; z-index: 1; top:0; left: 0 } /* center col */ .center-col{ float:none !important; margin-left:auto !important; margin-right:auto !important} /* message alert */ /* type text */ #type{font-weight: 900; text-transform: uppercase; color: #000; font-size: 30px;} .typed-cursor{ opacity:0 !important; font-size: 30px !important;} /* display */ .overflow-hidden{ overflow: hidden !important} .display-block { display: block !important;} /* relative position */ .position-relative{ position: relative !important; z-index: 5 } /* top border */ .border-top { border-top: 1px solid #dedddd; } /* separator */ .sep-line { width: 46px; height: 2px; margin: 0 auto; margin:7% auto; background-color: #858484;} .sep-line-gal { width: 46px; height: 2px; margin: 0 auto; margin:1% auto; background-color: #858484;} /* overlay */ .overlay{ top: 0px; background-color:#fff; opacity: 0.6; position: absolute; height: 100%; width: 100%; } /* hightlight section typography */ .font-letter{font-size: 30px !important; letter-spacing: 2px !important;} /* media screen */ @media screen and (-webkit-min-device-pixel-ratio:0) { nav * { transition-timing-function: none; -moz-transition-timing-function: none; -webkit-transition-timing-function: none; -o-transition-timing-function: none; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; } /* =================================== 17 Counter ====================================== */ .counters .container { text-align: center; padding: 0; margin: 0;} .counters { padding: 0; border: 0px solid #f7f7f7; margin: 0;} .counters .counter { border-left: 2px solid #f7f7f7; margin: 0;} .counters .counter:first-child { border: none; } .counter-value { font-weight: 700; color: #000; font-size: 38px; float: left; text-align: center; width: 80%; } .counter-text { font-size: 12px; letter-spacing: 0.11em; margin-top: 20px; display: inline-block; } @media (max-width: 992px) { .counters .counter { margin-bottom: 40px; } .counters.demo-2 .counter:nth-child(3) { border: none; } .counters .counter:nth-child(3) { border-left: none; } .counters { padding: 0; } } }