Line 2: | Line 2: | ||
<style> | <style> | ||
+ | |||
+ | |||
+ | |||
+ | /* =================================================================== */ | ||
+ | /* GENERAL STYLESHEET | ||
+ | /* =================================================================== */ | ||
+ | html, | ||
+ | body { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | body { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-weight: 400; | ||
+ | line-height: 1.7; | ||
+ | } | ||
+ | p { | ||
+ | letter-spacing: 0.5px; | ||
+ | font-size: 14px; | ||
+ | line-height: 1.7; | ||
+ | color: #666; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | a { | ||
+ | color: #666; | ||
+ | font-size: 14px; | ||
+ | font-weight: 300; | ||
+ | -webkit-transition: all 0.4s; | ||
+ | -moz-transition: all 0.4s; | ||
+ | -o-transition: all 0.4s; | ||
+ | transition: all 0.4s; | ||
+ | } | ||
+ | a:hover { | ||
+ | text-decoration: none; | ||
+ | letter-spacing: 1.5px; | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | a:focus, | ||
+ | a:visited { | ||
+ | outline: none; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .lead { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | h1, | ||
+ | h2, | ||
+ | h3, | ||
+ | h4, | ||
+ | h5, | ||
+ | h6, | ||
+ | a, | ||
+ | small { | ||
+ | font-family: 'Oswald', serif; | ||
+ | } | ||
+ | h1 { | ||
+ | font-size: 80px; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 60px; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 40px; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 24px; | ||
+ | margin-bottom: 20px; | ||
+ | font-weight: 700; | ||
+ | letter-spacing: 1.5px; | ||
+ | } | ||
+ | h5 { | ||
+ | font-size: 18px; | ||
+ | letter-spacing: 1.5px; | ||
+ | } | ||
+ | h6 { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | @media (max-width: 767px) { | ||
+ | h1 { | ||
+ | font-size: 70px; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 50px; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (max-width: 480px) { | ||
+ | h1 { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | } | ||
+ | .color-black { | ||
+ | color: #000000; | ||
+ | } | ||
+ | .color-white { | ||
+ | color: #fff; | ||
+ | } | ||
+ | .color-blue { | ||
+ | color: #0088cc; | ||
+ | } | ||
+ | .color-red { | ||
+ | color: #ff1919; | ||
+ | } | ||
+ | .color-orange { | ||
+ | color: #ff6600; | ||
+ | } | ||
+ | .color-yellow { | ||
+ | color: #ffb400; | ||
+ | } | ||
+ | .color-green { | ||
+ | color: #21ba49; | ||
+ | } | ||
+ | .color-purple { | ||
+ | color: #5a3989; | ||
+ | } | ||
+ | .color-navy { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | .color-brown { | ||
+ | color: #eb8f2d; | ||
+ | } | ||
+ | .color-gray { | ||
+ | color: #666666; | ||
+ | } | ||
+ | .color-gray-light { | ||
+ | color: #f7f7f7; | ||
+ | } | ||
+ | .color-default { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | .bg-black { | ||
+ | background: #000000; | ||
+ | } | ||
+ | .bg-white { | ||
+ | background: #fff; | ||
+ | } | ||
+ | .bg-blue { | ||
+ | background: #0088cc; | ||
+ | } | ||
+ | .bg-red { | ||
+ | background: #ff1919; | ||
+ | } | ||
+ | .bg-orange { | ||
+ | background: #ff6600; | ||
+ | } | ||
+ | .bg-yellow { | ||
+ | background: #ffb400; | ||
+ | } | ||
+ | .bg-green { | ||
+ | background: #21ba49; | ||
+ | } | ||
+ | .bg-purple { | ||
+ | background: #5a3989; | ||
+ | } | ||
+ | .bg-navy { | ||
+ | background: #495d7f; | ||
+ | } | ||
+ | .bg-brown { | ||
+ | background: #eb8f2d; | ||
+ | } | ||
+ | .bg-gray { | ||
+ | background: #666666; | ||
+ | } | ||
+ | .bg-gray2 { | ||
+ | background: #efefef; | ||
+ | } | ||
+ | .bg-gray-light { | ||
+ | background: #f7f7f7; | ||
+ | } | ||
+ | .col-box { | ||
+ | padding: 20px 30px; | ||
+ | border: 1px solid #eee; | ||
+ | margin-left: -1px; | ||
+ | margin-bottom: -1px; | ||
+ | } | ||
+ | .no-padding { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .img-thumbnail { | ||
+ | border: 1px solid #eeeeee; | ||
+ | border-radius: 0; | ||
+ | } | ||
+ | ul.list-main { | ||
+ | margin: 10px; | ||
+ | } | ||
+ | ul.list-main li { | ||
+ | line-height: 2; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* NAV - NAVIGATION | ||
+ | /* =================================================================== */ | ||
+ | nav { | ||
+ | position: fixed; | ||
+ | width: 50px; | ||
+ | z-index: 999; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: -300px; | ||
+ | padding-top: 0; | ||
+ | display: block; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | background: #fff; | ||
+ | border-right: 1px solid #f7f7f7; | ||
+ | color: #000000; | ||
+ | -webkit-transition: left 0.5s; | ||
+ | -moz-transition: left 0.5s; | ||
+ | -o-transition: left 0.5s; | ||
+ | transition: left 0.5s; | ||
+ | } | ||
+ | nav.activ { | ||
+ | left: 0px; | ||
+ | } | ||
+ | nav.activ .logo { | ||
+ | visibility: visible; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | nav { | ||
+ | width: 80px; | ||
+ | padding-top: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav { | ||
+ | width: 250px; | ||
+ | padding-top: 220px; | ||
+ | padding-bottom: 80px; | ||
+ | } | ||
+ | } | ||
+ | nav .logo { | ||
+ | padding: 10px 2px 10px 2px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | nav .logo { | ||
+ | background: transparent; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 80px; | ||
+ | padding: 20px 5px 20px 5px; | ||
+ | margin: 0; | ||
+ | text-align: right; | ||
+ | display: block; | ||
+ | visibility: hidden; | ||
+ | -webkit-transition: visibility 2s; | ||
+ | -moz-transition: visibility 2s; | ||
+ | -o-transition: visibility 2s; | ||
+ | transition: visibility 2s; | ||
+ | } | ||
+ | nav .logo h1 { | ||
+ | color: #000000; | ||
+ | font-size: 13px; | ||
+ | font-weight: 600; | ||
+ | line-height: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | nav .logo span { | ||
+ | position: relative; | ||
+ | font-size: 8px; | ||
+ | line-height: 100%; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: 0; | ||
+ | margin-top: 0px; | ||
+ | padding: 0; | ||
+ | color: #666666; | ||
+ | } | ||
+ | nav .logo.logo-img { | ||
+ | padding: 20px 4px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .logo { | ||
+ | width: 250px; | ||
+ | height: 220px; | ||
+ | padding: 80px 20px 80px 0px; | ||
+ | } | ||
+ | nav .logo h1 { | ||
+ | font-size: 36px; | ||
+ | } | ||
+ | nav .logo span { | ||
+ | font-size: 12px; | ||
+ | letter-spacing: 3px; | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | nav .logo.logo-img { | ||
+ | padding: 80px 20px 80px 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | overflow-y: auto; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col { | ||
+ | width: 50px; | ||
+ | min-height: 100%; | ||
+ | padding-top: 2px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | nav .navi-scroll .navi-col { | ||
+ | width: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col { | ||
+ | width: 250px; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu { | ||
+ | position: relative; | ||
+ | padding: 1px 0px; | ||
+ | margin: 0; | ||
+ | background: transparent; | ||
+ | list-style: none; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col ul.menu { | ||
+ | margin: 0 0px 0 40px; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a { | ||
+ | position: relative; | ||
+ | letter-spacing: 1.5px; | ||
+ | font-weight: 300; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | display: block; | ||
+ | border-left: 0px; | ||
+ | border-right: 5px solid transparent; | ||
+ | padding: 10px; | ||
+ | font-size: 11px; | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | color: #343434; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | nav .navi-scroll .navi-col ul.menu li a { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col ul.menu li a { | ||
+ | text-align: right; | ||
+ | margin: 5px 0; | ||
+ | padding: 5px 0; | ||
+ | font-size: 12px; | ||
+ | padding-right: 40px; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a span { | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col ul.menu li a span { | ||
+ | position: relative; | ||
+ | display: inline; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a span::before { | ||
+ | content: attr(data-hover); | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | overflow: hidden; | ||
+ | max-width: 0; | ||
+ | background: #fff; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: 1.5px; | ||
+ | color: #495d7f; | ||
+ | white-space: nowrap; | ||
+ | -webkit-transition: max-width 0.4s ease; | ||
+ | -moz-transition: max-width 0.4s ease; | ||
+ | -o-transition: max-width 0.4s ease; | ||
+ | transition: max-width 0.4s ease; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active, | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active:hover { | ||
+ | background: transparent; | ||
+ | border-right-color: #495d7f; | ||
+ | color: #495d7f; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active span::before, | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active:hover span::before { | ||
+ | max-width: 0; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active, | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active:hover { | ||
+ | margin-right: 0px; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active i, | ||
+ | nav .navi-scroll .navi-col ul.menu li a.active:hover i { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a:hover span::before, | ||
+ | nav .navi-scroll .navi-col ul.menu li a:hover span:focus::before { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a:hover i { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu li a i { | ||
+ | -webkit-transition: all 0.1s; | ||
+ | -moz-transition: all 0.1s; | ||
+ | -o-transition: all 0.1s; | ||
+ | transition: all 0.1s; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav .navi-scroll .navi-col ul.menu li a i { | ||
+ | margin-left: 7px; | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a { | ||
+ | -webkit-transition: all 0.4s ease; | ||
+ | -moz-transition: all 0.4s ease; | ||
+ | -o-transition: all 0.4s ease; | ||
+ | transition: all 0.4s ease; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active, | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active:hover { | ||
+ | border-left: 0px; | ||
+ | background: #495d7f; | ||
+ | color: #fff; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active span::before, | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active:hover span::before { | ||
+ | background: #495d7f; | ||
+ | color: #fff; | ||
+ | -webkit-transition: background 0.4s ease; | ||
+ | -moz-transition: background 0.4s ease; | ||
+ | -o-transition: background 0.4s ease; | ||
+ | transition: background 0.4s ease; | ||
+ | } | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active i, | ||
+ | nav .navi-scroll .navi-col ul.menu.menu-v2 li a.active:hover i { | ||
+ | color: #fff; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | nav footer { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | background: transparent; | ||
+ | bottom: 0px; | ||
+ | width: 250px; | ||
+ | height: 90px; | ||
+ | text-align: center; | ||
+ | color: #666666; | ||
+ | } | ||
+ | nav footer .copyright { | ||
+ | padding: 10px 20px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | nav footer .copyright a { | ||
+ | color: #000; | ||
+ | font-size: 12px; | ||
+ | font-weight: 400; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | } | ||
+ | nav.nav-black { | ||
+ | background: #000000; | ||
+ | border-right: 1px solid #000000; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | nav.nav-black .logo h1 { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | nav.nav-black .logo-profile { | ||
+ | background: #000000; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | nav.nav-black .navi-scroll ul.menu li a { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | nav.nav-black .navi-scroll ul.menu li a span::before { | ||
+ | background: #000000; | ||
+ | } | ||
+ | nav.nav-black .navi-scroll ul.menu li a i { | ||
+ | color: #666666; | ||
+ | } | ||
+ | nav.nav-black footer { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | nav.nav-black footer a { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* PAGE-WRAPPER | ||
+ | /* =================================================================== */ | ||
+ | .page-wrapper { | ||
+ | position: absolute; | ||
+ | z-index: 1; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | margin-left: 50px; | ||
+ | -webkit-perspective: 1400px; | ||
+ | -moz-perspective: 1400px; | ||
+ | perspective: 1400px; | ||
+ | -webkit-perspective-origin: 10% 10%; | ||
+ | -moz-perspective-origin: 10% 10%; | ||
+ | perspective-origin: 10% 10%; | ||
+ | background: #fff; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .page-wrapper.page-bg-gray2 { | ||
+ | background: #fff; | ||
+ | } | ||
+ | .page-wrapper.page-bg-gray2 section { | ||
+ | background: #efefef; | ||
+ | } | ||
+ | .page-wrapper.page-bg-metalic { | ||
+ | background: #fff; | ||
+ | } | ||
+ | .page-wrapper.page-bg-metalic section { | ||
+ | background: -webkit-linear-gradient(90deg, #8e9eab 10%, #eef2f3 90%); | ||
+ | /* Chrome 10+, Saf5.1+ */ | ||
+ | background: -moz-linear-gradient(90deg, #8e9eab 10%, #eef2f3 90%); | ||
+ | /* FF3.6+ */ | ||
+ | background: -ms-linear-gradient(90deg, #8e9eab 10%, #eef2f3 90%); | ||
+ | /* IE10 */ | ||
+ | background: -o-linear-gradient(90deg, #8e9eab 10%, #eef2f3 90%); | ||
+ | /* Opera 11.10+ */ | ||
+ | background: linear-gradient(90deg, #8e9eab 10%, #eef2f3 90%); | ||
+ | /* W3C */ | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .page-wrapper { | ||
+ | margin-left: 80px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .page-wrapper { | ||
+ | margin-left: 250px; | ||
+ | } | ||
+ | } | ||
+ | .page-wrapper section { | ||
+ | position: absolute; | ||
+ | z-index: -1; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | bottom: 0; | ||
+ | right: 0; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | visibility: hidden; | ||
+ | -webkit-transform: translate3d(0, 0, 0); | ||
+ | -moz-transform: translate3d(0, 0, 0); | ||
+ | -o-transform: translate3d(0, 0, 0); | ||
+ | transform: translate3d(0, 0, 0); | ||
+ | -webkit-transform: preserve-3d; | ||
+ | -moz-transform: preserve-3d; | ||
+ | -o-transform: preserve-3d; | ||
+ | transform: preserve-3d; | ||
+ | background: #fff; | ||
+ | overflow: hidden; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .page-wrapper section.section-current { | ||
+ | visibility: visible; | ||
+ | z-index: 1; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .page-wrapper section.pt-page-ontop { | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .page-wrapper section .content { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | min-height: 100%; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | overflow-y: scroll; | ||
+ | -webkit-overflow-scrolling: touch; | ||
+ | } | ||
+ | .page-wrapper section .content.table { | ||
+ | display: table; | ||
+ | table-layout: fixed; | ||
+ | } | ||
+ | .page-wrapper section .content.table .table-middle { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .page-wrapper section .btn-prev { | ||
+ | position: fixed; | ||
+ | z-index: 999; | ||
+ | top: -1px; | ||
+ | left: -1px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .page-wrapper header { | ||
+ | position: relative; | ||
+ | padding-top: 30px; | ||
+ | padding-bottom: 25px; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .page-wrapper header { | ||
+ | padding-bottom: 50px; | ||
+ | } | ||
+ | } | ||
+ | .page-wrapper header h3 { | ||
+ | letter-spacing: 2px; | ||
+ | display: inline-block; | ||
+ | margin-right: 20px; | ||
+ | font-weight: 400; | ||
+ | border-right: 8px solid #495d7f; | ||
+ | padding: 15px 20px 15px 0; | ||
+ | color: #495d7f; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .page-wrapper header h3 small { | ||
+ | display: block; | ||
+ | text-align: right; | ||
+ | color: #f7f7f7; | ||
+ | margin-top: 10px; | ||
+ | font-weight: 300; | ||
+ | font-size: 16px; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | text-transform: lowercase; | ||
+ | } | ||
+ | .page-wrapper header h5 { | ||
+ | display: none; | ||
+ | padding-top: 20px; | ||
+ | color: #000; | ||
+ | letter-spacing: 1.5px; | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | font-weight: 300; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .page-wrapper header h5 { | ||
+ | display: inline; | ||
+ | } | ||
+ | } | ||
+ | .page-wrapper .bg-img1 { | ||
+ | background: url('../img/bg/bg-gray.jpg') center fixed no-repeat; | ||
+ | } | ||
+ | .page-wrapper .bg-img-black { | ||
+ | background: url('../img/bg/section-bg1.jpg') center fixed no-repeat; | ||
+ | color: #fff; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* HOME SECTION | ||
+ | /* =================================================================== */ | ||
+ | section#home .intro-text { | ||
+ | letter-spacing: 4px; | ||
+ | text-transform: uppercase; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* ABOUT SECTION | ||
+ | /* =================================================================== */ | ||
+ | /* =================================================================== */ | ||
+ | /* SERVICES SECTION | ||
+ | /* =================================================================== */ | ||
+ | section#services .fatures { | ||
+ | margin-bottom: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | section#services .fatures .item { | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | section#services .fatures .item .ft-icon { | ||
+ | margin: auto; | ||
+ | width: 102px; | ||
+ | line-height: 100px; | ||
+ | border-radius: 100px; | ||
+ | font-size: 42px; | ||
+ | text-align: center; | ||
+ | background: rgba(255, 255, 255, 0); | ||
+ | border: 1px solid #495d7f; | ||
+ | color: #495d7f; | ||
+ | -webkit-transition: background-color 0.3s, border-color 0.3s, color 0.3s; | ||
+ | transition: background-color 0.3s, border-color 0.3s, color 0.3s; | ||
+ | } | ||
+ | section#services .relative { | ||
+ | position: relative; | ||
+ | } | ||
+ | section#services .padding30 { | ||
+ | padding: 30px; | ||
+ | } | ||
+ | section#services .services-img01 { | ||
+ | position: absolute; | ||
+ | bottom: -60px; | ||
+ | right: -70px; | ||
+ | } | ||
+ | section#services .info-blocks { | ||
+ | margin: 20px; | ||
+ | } | ||
+ | section#services .info-blocks .icon-info-blocks { | ||
+ | float: left; | ||
+ | color: #495d7f; | ||
+ | font-size: 40px; | ||
+ | min-width: 50px; | ||
+ | margin-top: 10px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | section#services .info-blocks .info-blocks-in { | ||
+ | padding: 0 10px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | section#services .info-blocks .info-blocks-in h3 { | ||
+ | margin: 0; | ||
+ | padding-bottom: 0; | ||
+ | line-height: 100%; | ||
+ | } | ||
+ | section#services .info-blocks .info-blocks-in p { | ||
+ | line-height: 22px; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* PORTFOLIO SECTION | ||
+ | /* =================================================================== */ | ||
+ | section#portfolio .portfolio-colum { | ||
+ | position: relative; | ||
+ | margin-bottom: 30px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure { | ||
+ | position: relative; | ||
+ | padding: 6px; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | overflow: hidden; | ||
+ | color: #fff; | ||
+ | cursor: crosshair; | ||
+ | cursor: url("../img/cursor.png") 40 40, crosshair; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a img { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | max-width: 100% !important; | ||
+ | height: auto !important; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a div { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: rgba(0, 0, 0, 0.5); | ||
+ | text-align: center; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a div .name { | ||
+ | letter-spacing: none; | ||
+ | display: block; | ||
+ | padding: 5px 8px; | ||
+ | margin: 20px 20px 0; | ||
+ | text-align: left; | ||
+ | border-left: 3px solid #495d7f; | ||
+ | font-weight: 400; | ||
+ | color: rgba(255, 255, 255, 0.9); | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a div small { | ||
+ | display: block; | ||
+ | font-size: 14px; | ||
+ | margin-bottom: 0; | ||
+ | padding: 10px; | ||
+ | text-transform: none; | ||
+ | bottom: 0; | ||
+ | left: 10px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | section#portfolio .portfolio-colum figure a div i { | ||
+ | font-size: 16px; | ||
+ | height: 40px; | ||
+ | text-align: center; | ||
+ | width: 40px; | ||
+ | bottom: 0; | ||
+ | line-height: 2.4; | ||
+ | right: 0; | ||
+ | position: absolute; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* BLOG SECTION | ||
+ | /* =================================================================== */ | ||
+ | section#blog .blog-masonry { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | padding-bottom: 30px; | ||
+ | width: 100%; | ||
+ | } | ||
+ | section#blog .blog-masonry .item-sizer { | ||
+ | width: 100%; | ||
+ | } | ||
+ | section#blog .blog-masonry .item { | ||
+ | width: 100%; | ||
+ | float: left; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | section#blog .blog-masonry .item-sizer, | ||
+ | section#blog .blog-masonry .item { | ||
+ | width: 50%; | ||
+ | } | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box { | ||
+ | display: block; | ||
+ | background: none; | ||
+ | margin: 20px 5px; | ||
+ | border: solid 1px #f7f7f7; | ||
+ | background: #fff; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | section#blog .blog-masonry .blog-box { | ||
+ | margin: 15px 15px; | ||
+ | } | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-img2 img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-caption { | ||
+ | padding: 5px 20px; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-caption .title { | ||
+ | font-weight: 400; | ||
+ | text-transform: uppercase; | ||
+ | margin: 10px 0px; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-caption p a { | ||
+ | font-size: 12px; | ||
+ | margin: 0; | ||
+ | white-space: nowrap; | ||
+ | text-transform: lowercase; | ||
+ | font-weight: 300; | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-footer { | ||
+ | margin: 0; | ||
+ | border-top: solid 1px #f7f7f7; | ||
+ | padding: 10px 15px; | ||
+ | color: #666; | ||
+ | font-size: 12px; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-footer .separator { | ||
+ | margin: 0 5px; | ||
+ | color: #f7f7f7; | ||
+ | } | ||
+ | section#blog .blog-masonry .blog-box .blog-box-footer .like { | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | section#blog .blog-masonry .blog-box .blog-box-footer .like { | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | section#blog .blog-loadmore { | ||
+ | display: block; | ||
+ | margin-bottom: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | section#blog .blog-loadmore .loader { | ||
+ | display: none; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* CONTACT SECTION | ||
+ | /* =================================================================== */ | ||
+ | section#contact .contact-details { | ||
+ | background: url(../img/bg/map_bg.png) left 50px no-repeat; | ||
+ | } | ||
+ | section#contact .contact-details address { | ||
+ | margin: 30px 0; | ||
+ | } | ||
+ | section#contact .contact-details address p { | ||
+ | letter-spacing: 1px; | ||
+ | line-height: 100%; | ||
+ | padding: 10px; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | clear: both; | ||
+ | } | ||
+ | section#contact .contact-details address p i { | ||
+ | display: block; | ||
+ | vertical-align: middle; | ||
+ | color: #495d7f; | ||
+ | background: #fff; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | line-height: 50px; | ||
+ | text-align: center; | ||
+ | border: 1px solid #f7f7f7; | ||
+ | } | ||
+ | section#contact .contact-details address p span { | ||
+ | margin-top: 10px; | ||
+ | display: block; | ||
+ | vertical-align: middle; | ||
+ | height: 100%; | ||
+ | } | ||
+ | section#contact .contact-form .form-style .alert { | ||
+ | display: none; | ||
+ | color: #ff1919; | ||
+ | border-radius: 0; | ||
+ | padding: 4px 2px; | ||
+ | font-size: 14px; | ||
+ | -webkit-transition: all 0.8s; | ||
+ | -moz-transition: all 0.8s; | ||
+ | -o-transition: all 0.8s; | ||
+ | transition: all 0.8s; | ||
+ | } | ||
+ | section#contact .contact-form .form-style .form-loader { | ||
+ | margin-right: 8px; | ||
+ | display: none; | ||
+ | } | ||
+ | section#contact .contact-form .form-style button i { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | section#contact .contact-form .form-style .alert-validate-form { | ||
+ | display: none; | ||
+ | } | ||
+ | section#contact .contact-form .form-style .alert-validate-form .alert { | ||
+ | display: block; | ||
+ | background: #fd4040; | ||
+ | color: #fff; | ||
+ | font-size: 14px; | ||
+ | padding: 15px 20px; | ||
+ | border: 0; | ||
+ | } | ||
+ | section#contact .contact-form .form-style .alert-validate-form .alert.success { | ||
+ | background: #119400; | ||
+ | color: #fff; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* BLOG-POST | ||
+ | /* =================================================================== */ | ||
+ | .blog-post { | ||
+ | position: relative; | ||
+ | } | ||
+ | .blog-post .post-content { | ||
+ | margin-top: -150px; | ||
+ | background-color: #ffffff; | ||
+ | padding: 0 25px; | ||
+ | } | ||
+ | .blog-post .post-content .post-caption { | ||
+ | margin: 20px 0; | ||
+ | border: solid 1px #eeeeee; | ||
+ | padding: 10px 15px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | .blog-post .post-content .post-caption .separator { | ||
+ | margin: 0 10px; | ||
+ | color: #bbbbbb; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments { | ||
+ | margin: 30px 0; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments .media img { | ||
+ | top: 3px; | ||
+ | width: 54px; | ||
+ | height: 54px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments .media .dot { | ||
+ | margin: 0px 5px; | ||
+ | color: #666666; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments .media .small a { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments .media .media-footer { | ||
+ | color: #666666; | ||
+ | } | ||
+ | .blog-post .post-content .post-comments .media .media-footer span { | ||
+ | margin: 0 5px; | ||
+ | } | ||
+ | .blog-post .post-content .post-comment-add { | ||
+ | margin: 30px 0; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* PRELOADER | ||
+ | /* =================================================================== */ | ||
+ | .preloader { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: #fff; | ||
+ | z-index: 9999999999; | ||
+ | } | ||
+ | .preloader .spinner { | ||
+ | position: absolute; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin-left: -40px; | ||
+ | margin-top: -40px; | ||
+ | -webkit-animation: rotatee 2.0s infinite linear; | ||
+ | animation: rotatee 2.0s infinite linear; | ||
+ | } | ||
+ | .preloader .spinner .dot1, | ||
+ | .preloader .spinner .dot2 { | ||
+ | width: 60%; | ||
+ | height: 60%; | ||
+ | display: inline-block; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | border-radius: 100%; | ||
+ | -webkit-animation: bouncee 2s infinite ease-in-out; | ||
+ | animation: bouncee 2s infinite ease-in-out; | ||
+ | background: #495d7f; | ||
+ | } | ||
+ | .preloader .spinner .dot2 { | ||
+ | top: auto; | ||
+ | bottom: 0px; | ||
+ | -webkit-animation-delay: -1s; | ||
+ | animation-delay: -1s; | ||
+ | } | ||
+ | @-webkit-keyframes rotatee { | ||
+ | 100% { | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | @keyframes rotatee { | ||
+ | 100% { | ||
+ | transform: rotate(360deg); | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes bouncee { | ||
+ | 0%, | ||
+ | 100% { | ||
+ | -webkit-transform: scale(0); | ||
+ | } | ||
+ | 50% { | ||
+ | -webkit-transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | @keyframes bouncee { | ||
+ | 0%, | ||
+ | 100% { | ||
+ | transform: scale(0); | ||
+ | -webkit-transform: scale(0); | ||
+ | } | ||
+ | 50% { | ||
+ | transform: scale(1); | ||
+ | -webkit-transform: scale(1); | ||
+ | } | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* PAGE HEADER | ||
+ | /* =================================================================== */ | ||
+ | .page-header { | ||
+ | padding: 0px; | ||
+ | margin: 0; | ||
+ | margin-bottom: 20px; | ||
+ | border: 0; | ||
+ | color: #495d7f; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .page-header h1, | ||
+ | .page-header h2, | ||
+ | .page-header h3 { | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .page-header h4, | ||
+ | .page-header h5, | ||
+ | .page-header h6 { | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* SOCIAL ICONS | ||
+ | /* =================================================================== */ | ||
+ | .social-icons { | ||
+ | display: block; | ||
+ | list-style: none; | ||
+ | margin: 5px 0; | ||
+ | padding: 0; | ||
+ | background: none; | ||
+ | } | ||
+ | .social-icons li { | ||
+ | display: inline-block; | ||
+ | margin: 0 6px; | ||
+ | padding: 0; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .social-icons li a { | ||
+ | color: #495d7f; | ||
+ | -webkit-transition: all 200ms linear; | ||
+ | -moz-transition: all 200ms linear; | ||
+ | -o-transition: all 200ms linear; | ||
+ | transition: all 200ms linear; | ||
+ | } | ||
+ | .social-icons li a:hover { | ||
+ | color: rgba(73, 93, 127, 0.5); | ||
+ | letter-spacing: none; | ||
+ | } | ||
+ | .social-icons.social-v2 li a { | ||
+ | display: block; | ||
+ | color: #777; | ||
+ | width: 40px; | ||
+ | margin-bottom: 3px; | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | background-color: #eeeeee; | ||
+ | } | ||
+ | .social-icons.social-v2 li a:hover { | ||
+ | color: #fff; | ||
+ | background-color: #495d7f; | ||
+ | } | ||
+ | .social-icons.social-v3 li a { | ||
+ | display: block; | ||
+ | color: #777; | ||
+ | width: 40px; | ||
+ | margin-bottom: 3px; | ||
+ | height: 40px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | border-width: 1px; | ||
+ | border-style: solid; | ||
+ | border-color: #eeeeee; | ||
+ | } | ||
+ | .social-icons.social-v3 li a:hover { | ||
+ | color: #495d7f; | ||
+ | border-color: #495d7f; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* FORM STYLE | ||
+ | /* =================================================================== */ | ||
+ | .form-style { | ||
+ | display: block; | ||
+ | margin: 1em 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .form-style .form-group { | ||
+ | position: relative; | ||
+ | } | ||
+ | .form-style input.text-field, | ||
+ | .form-style textarea { | ||
+ | background: rgba(255, 255, 255, 0.9); | ||
+ | border: 1px solid #eeeeee; | ||
+ | letter-spacing: 1px; | ||
+ | border-radius: 0; | ||
+ | margin: 0px; | ||
+ | color: #000000; | ||
+ | height: 34px; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | -webkit-transition: all 0.4s; | ||
+ | -moz-transition: all 0.4s; | ||
+ | -o-transition: all 0.4s; | ||
+ | transition: all 0.4s; | ||
+ | } | ||
+ | .form-style textarea { | ||
+ | height: 125px; | ||
+ | } | ||
+ | .form-style .form-icon { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 15px; | ||
+ | color: #eeeeee; | ||
+ | } | ||
+ | .form-style input.text-field:hover, | ||
+ | .form-style textarea:hover { | ||
+ | border-color: #bbbbbb; | ||
+ | } | ||
+ | .form-style input.text-field:focus, | ||
+ | .form-style textarea:focus { | ||
+ | background: #eeeeee; | ||
+ | border-color: #fff; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | .form-style input.text-field:focus + .form-icon, | ||
+ | .form-style textarea:focus + .form-icon { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .form-style input.text-field, | ||
+ | .form-style textarea { | ||
+ | height: 35px; | ||
+ | font-size: 0.85em; | ||
+ | } | ||
+ | .form-style textarea { | ||
+ | height: 120px; | ||
+ | } | ||
+ | .form-style .submit { | ||
+ | text-align: right; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .form-style input.text-field, | ||
+ | .form-style textarea { | ||
+ | height: 46px; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | .form-style textarea { | ||
+ | height: 130px; | ||
+ | } | ||
+ | } | ||
+ | .form-style *::-moz-placeholder { | ||
+ | color: #666666; | ||
+ | font-weight: 300; | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | .form-style *::-ms-input-placeholder { | ||
+ | color: #666666; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .form-style *::-webkit-input-placeholder { | ||
+ | color: #666666; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* ACHIVEMENT | ||
+ | /* =================================================================== */ | ||
+ | .achivement { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .achivement .achivement-box { | ||
+ | text-align: center; | ||
+ | padding: 30px 0; | ||
+ | } | ||
+ | .achivement .achivement-box i { | ||
+ | color: #495d7f; | ||
+ | font-size: 64px; | ||
+ | } | ||
+ | .achivement .achivement-box .name { | ||
+ | margin: 10px 0; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .achivement .achivement-box .count { | ||
+ | letter-spacing: 2px; | ||
+ | display: block; | ||
+ | font-size: 36px; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* TESTIMONIAL | ||
+ | /* =================================================================== */ | ||
+ | .testimonial { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .testimonial .testimonial-item { | ||
+ | position: relative; | ||
+ | } | ||
+ | .testimonial .testimonial-item article { | ||
+ | margin: 7px 0; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .testimonial .testimonial-item article:after { | ||
+ | font-family: 'FontAwesome'; | ||
+ | content: "\f10e"; | ||
+ | right: 10px; | ||
+ | bottom: 5px; | ||
+ | position: absolute; | ||
+ | font-size: 200%; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | -o-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | } | ||
+ | .testimonial .testimonial-item article:after:hover { | ||
+ | color: #495d7f; | ||
+ | } | ||
+ | .testimonial .testimonial-item article img { | ||
+ | margin-right: 15px; | ||
+ | width: 75px; | ||
+ | height: 75px; | ||
+ | border: 1px solid #fff; | ||
+ | margin-top: 5px; | ||
+ | display: inline-block; | ||
+ | image-rendering: optimizequality; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | .testimonial .testimonial-item article p { | ||
+ | margin: 5px 0 0; | ||
+ | } | ||
+ | .testimonial .testimonial-item article .meta { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .testimonial .testimonial-item article .meta .name { | ||
+ | color: #666; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | .testimonial .testimonial-item article .meta a { | ||
+ | font-size: 12px; | ||
+ | font-style: italic; | ||
+ | color: #798184; | ||
+ | padding: 0 5px; | ||
+ | font-weight: 300; | ||
+ | text-decoration: underline; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* TIMELINE | ||
+ | /* =================================================================== */ | ||
+ | .timeline { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline .timeline-list { | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline .timeline-list:before { | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | left: 22%; | ||
+ | width: 4px; | ||
+ | content: ''; | ||
+ | background: #fff; | ||
+ | border-color: #f7f7f7; | ||
+ | border-left: 1px solid #f7f7f7; | ||
+ | border-right: 1px solid #f7f7f7; | ||
+ | position: absolute; | ||
+ | margin-left: -14px; | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline .timeline-list:before { | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | .timeline .timeline-list li { | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-date { | ||
+ | width: 15%; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | padding-right: 80px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline .timeline-list li .tl-date { | ||
+ | width: 25%; | ||
+ | min-width: 120px; | ||
+ | } | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-date span { | ||
+ | top: 9px; | ||
+ | display: block; | ||
+ | text-align: right; | ||
+ | position: relative; | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-date span:first-child { | ||
+ | color: #999; | ||
+ | font-size: 12px; | ||
+ | line-height: 0.9; | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .timeline .timeline-list li .tl-date span:first-child { | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-date span:last-child { | ||
+ | color: #585f69; | ||
+ | font-size: 12px; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline .timeline-list li .tl-date span:last-child { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | } | ||
+ | @media (min-width: 992px) { | ||
+ | .timeline .timeline-list li .tl-date span:last-child { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-icon { | ||
+ | top: 13px; | ||
+ | left: 22%; | ||
+ | width: 36px; | ||
+ | height: 36px; | ||
+ | position: absolute; | ||
+ | margin: 0 0 0 -30px; | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-box { | ||
+ | padding: 10px 20px 20px; | ||
+ | background: #fff; | ||
+ | border: 1px solid transparent; | ||
+ | line-height: 1.4; | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | margin: 0 0 20px 45px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .timeline .timeline-list li .tl-box { | ||
+ | margin: 0 0 40px 25%; | ||
+ | } | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-box::after { | ||
+ | right: 100%; | ||
+ | border: solid transparent; | ||
+ | content: " "; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | border-right-color: #fff; | ||
+ | border-width: 10px; | ||
+ | top: 18px; | ||
+ | } | ||
+ | .timeline .timeline-list li .tl-box .title { | ||
+ | color: #000; | ||
+ | font-weight: 400; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* SKILLS | ||
+ | /* =================================================================== */ | ||
+ | .skills { | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | .skills ul { | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | .skills ul li { | ||
+ | position: relative; | ||
+ | margin-top: 30px; | ||
+ | height: 28px; | ||
+ | background: #fff; | ||
+ | border: 1px solid #f7f7f7; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | -webkit-box-shadow: inset 0 1px 2px #ffffff; | ||
+ | box-shadow: inset 0 1px 2px #ffffff; | ||
+ | } | ||
+ | .skills ul li:first-child { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | .skills ul li .progress { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | overflow: visible !important; | ||
+ | background: #444; | ||
+ | } | ||
+ | .skills ul li:hover .progress-percent { | ||
+ | background: #495d7f; | ||
+ | border-color: #495d7f; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .skills ul li:hover .progress-percent:after, | ||
+ | .skills ul li:hover .progress-percent:before { | ||
+ | border-top-color: #495d7f; | ||
+ | } | ||
+ | .skills ul li .progress-percent { | ||
+ | position: absolute; | ||
+ | top: -27px; | ||
+ | right: 0; | ||
+ | background: #f7f7f7; | ||
+ | border: 1px solid #fff; | ||
+ | color: #444; | ||
+ | height: 22px; | ||
+ | line-height: 22px; | ||
+ | padding: 0px 5px; | ||
+ | font-size: 13px; | ||
+ | -webkit-border-radius: 2px; | ||
+ | -moz-border-radius: 2px; | ||
+ | border-radius: 2px; | ||
+ | -webkit-transition: all 0.2s ease; | ||
+ | -moz-transition: all 0.2s ease; | ||
+ | -o-transition: all 0.2s ease; | ||
+ | transition: all 0.2s ease; | ||
+ | } | ||
+ | .skills ul li .progress-percent:after, | ||
+ | .skills ul li .progress-percent:before { | ||
+ | top: 100%; | ||
+ | content: " "; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | .skills ul li .progress-percent:after { | ||
+ | border-top-color: #fff; | ||
+ | border-width: 4px; | ||
+ | left: 50%; | ||
+ | margin-left: -4px; | ||
+ | } | ||
+ | .skills ul li .progress-percent:before { | ||
+ | border-top-color: #fff; | ||
+ | border-width: 5px; | ||
+ | left: 50%; | ||
+ | margin-left: -5px; | ||
+ | } | ||
+ | .skills ul li span { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | padding-left: 10px; | ||
+ | height: 25px; | ||
+ | line-height: 25px; | ||
+ | font-size: 13px; | ||
+ | letter-spacing: 1px; | ||
+ | color: #FFF; | ||
+ | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* BUTTONS | ||
+ | /* =================================================================== */ | ||
+ | .btn { | ||
+ | background: #fff; | ||
+ | color: #666666; | ||
+ | border: 1px solid #f7f7f7; | ||
+ | -webkit-transition: all 0.8s ease 0s; | ||
+ | -moz-transition: all 0.8s ease 0s; | ||
+ | -o-transition: all 0.8s ease 0s; | ||
+ | transition: all 0.8s ease 0s; | ||
+ | border-radius: 0; | ||
+ | padding: 10px 15px; | ||
+ | margin: 10px 1px; | ||
+ | cursor: pointer; | ||
+ | font-family: 'Oswald', serif; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 300; | ||
+ | text-decoration: none; | ||
+ | letter-spacing: 1.5px; | ||
+ | } | ||
+ | .btn:hover { | ||
+ | background: #495d7f; | ||
+ | border-color: #495d7f; | ||
+ | color: #fff; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* ANIM | ||
+ | /* =================================================================== */ | ||
+ | .anim-shadow { | ||
+ | -webkit-transition: all 0.6s; | ||
+ | -moz-transition: all 0.6s; | ||
+ | -o-transition: all 0.6s; | ||
+ | transition: all 0.6s; | ||
+ | -webkit-box-shadow: none; | ||
+ | box-shadow: none; | ||
+ | } | ||
+ | .anim-shadow:hover { | ||
+ | -webkit-box-shadow: 0px 0px 40px 10px rgba(238, 238, 238, 0.7); | ||
+ | box-shadow: 0px 0px 40px 10px rgba(238, 238, 238, 0.7); | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* SPACING | ||
+ | /* =================================================================== */ | ||
+ | .space5 { | ||
+ | height: 5px; | ||
+ | } | ||
+ | .space10 { | ||
+ | height: 10px; | ||
+ | } | ||
+ | .space20 { | ||
+ | height: 20px; | ||
+ | } | ||
+ | .space30 { | ||
+ | height: 30px; | ||
+ | } | ||
+ | .space40 { | ||
+ | height: 40px; | ||
+ | } | ||
+ | .space50 { | ||
+ | height: 50px; | ||
+ | } | ||
+ | .space60 { | ||
+ | height: 60px; | ||
+ | } | ||
+ | .space70 { | ||
+ | height: 70px; | ||
+ | } | ||
+ | .space80 { | ||
+ | height: 80px; | ||
+ | } | ||
+ | .space100 { | ||
+ | height: 100px; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* ROTATOR (Plugin jquery.rotator.js) | ||
+ | /* =================================================================== */ | ||
+ | .rotate { | ||
+ | display: none; | ||
+ | } | ||
+ | .rotate-arena { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .rotate-arena span { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | /* =================================================================== */ | ||
+ | /* OWL-CAROUSEL | ||
+ | /* =================================================================== */ | ||
+ | .owl-theme:hover .owl-controls .owl-nav [class*='owl-']:before { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .owl-theme:hover .owl-controls .owl-nav .owl-prev:before { | ||
+ | left: 0px; | ||
+ | } | ||
+ | .owl-theme:hover .owl-controls .owl-nav .owl-next:before { | ||
+ | right: 0px; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav [class*='owl-'] { | ||
+ | color: #fff; | ||
+ | display: inline-block; | ||
+ | zoom: 1; | ||
+ | font-size: 0; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav [class*='owl-']:before { | ||
+ | background: #fff; | ||
+ | border: 1px solid #f7f7f7; | ||
+ | color: #666666; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: 40px; | ||
+ | font-family: FontAwesome; | ||
+ | font-size: 30px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | margin-top: -50px; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | -o-transition: all 0.3s ease; | ||
+ | transition: all 0.3s ease; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav [class*='owl-']:before:hover { | ||
+ | background: #495d7f; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav .owl-prev:before { | ||
+ | content: "\f104"; | ||
+ | left: -50px; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav .owl-next:before { | ||
+ | content: "\f105"; | ||
+ | right: -50px; | ||
+ | } | ||
+ | .owl-theme .owl-controls .owl-nav .disabled { | ||
+ | opacity: 0.5; | ||
+ | cursor: default; | ||
+ | } | ||
+ | .owl-theme .owl-dots .owl-dot { | ||
+ | display: inline-block; | ||
+ | zoom: 1; | ||
+ | } | ||
+ | .owl-theme .owl-dots .owl-dot.active span { | ||
+ | background: #495d7f; | ||
+ | border: 2px solid #495d7f; | ||
+ | } | ||
+ | .owl-theme .owl-dots .owl-dot:hover span { | ||
+ | background: #495d7f; | ||
+ | border: 2px solid #495d7f; | ||
+ | } | ||
+ | .owl-theme .owl-dots .owl-dot span { | ||
+ | width: 12px; | ||
+ | height: 12px; | ||
+ | margin: 0px 7px 5px 7px; | ||
+ | background: #d6d6d6; | ||
+ | border: 2px solid transparent; | ||
+ | display: block; | ||
+ | -webkit-backface-visibility: visible; | ||
+ | -webkit-transition: opacity 200ms ease; | ||
+ | -moz-transition: opacity 200ms ease; | ||
+ | -o-transition: opacity 200ms ease; | ||
+ | transition: opacity 200ms ease; | ||
+ | -webkit-border-radius: 30px; | ||
+ | -moz-border-radius: 30px; | ||
+ | border-radius: 30px; | ||
+ | } | ||
+ | .owl-theme .owl-caption { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | background: rgba(73, 93, 127, 0.8); | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | padding: 15px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .owl-theme .owl-caption { | ||
+ | display: block; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
#top-section { | #top-section { |
Revision as of 11:03, 15 June 2017