(Blanked the page) |
Eric Huang (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | body { | ||
+ | background: #ffffff; | ||
+ | font-family: 'Source Sans Pro', sans-serif; | ||
+ | font-style: normal; | ||
+ | font-weight: 300; | ||
+ | position: relative; | ||
+ | } | ||
+ | html,body { | ||
+ | width: 100%; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Typography | ||
+ | ------------------------------------- */ | ||
+ | |||
+ | h1,h2,h3,h4 { | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 0.3rem; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #000; | ||
+ | font-size: 1.8rem; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #ffffff; | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #444; | ||
+ | font-size: 14px; | ||
+ | letter-spacing: 4px; | ||
+ | } | ||
+ | |||
+ | h5 { | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | color: #777; | ||
+ | font-size: 16px; | ||
+ | line-height: 28px; | ||
+ | word-spacing: 1px; | ||
+ | letter-spacing: 1px; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | outline: none; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a, | ||
+ | a:hover, | ||
+ | a:focus { | ||
+ | color: inherit; | ||
+ | text-decoration: none; | ||
+ | outline: 0; | ||
+ | -webkit-transition: all 0.25s ease-out; | ||
+ | -moz-transition: all 0.25s ease-out; | ||
+ | -ms-transition: all 0.25s ease-out; | ||
+ | -o-transition: all 0.25s ease-out; | ||
+ | transition: all 0.25s ease-out; | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | width: 100%; | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* preloader styles | ||
+ | /* ========================================== */ | ||
+ | .preloader { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 99999; | ||
+ | display: flex; | ||
+ | flex-flow: row nowrap; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | background: none repeat scroll 0 0 #fff; | ||
+ | } | ||
+ | |||
+ | .sk-spinner-pulse { | ||
+ | width: 60px; | ||
+ | height: 60px; | ||
+ | background-color: #111112; | ||
+ | border-radius: 100%; | ||
+ | -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; | ||
+ | animation: sk-pulseScaleOut 1s infinite ease-in-out; } | ||
+ | |||
+ | @-webkit-keyframes sk-pulseScaleOut { | ||
+ | 0% { | ||
+ | -webkit-transform: scale(0); | ||
+ | transform: scale(0); } | ||
+ | 100% { | ||
+ | -webkit-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | opacity: 0; } } | ||
+ | |||
+ | @keyframes sk-pulseScaleOut { | ||
+ | 0% { | ||
+ | -webkit-transform: scale(0); | ||
+ | transform: scale(0); } | ||
+ | 100% { | ||
+ | -webkit-transform: scale(1); | ||
+ | transform: scale(1); | ||
+ | opacity: 0; } } | ||
+ | |||
+ | |||
+ | |||
+ | /* navigation styles | ||
+ | /* ========================================== */ | ||
+ | .nav-container, | ||
+ | nav { | ||
+ | overflow: visible; | ||
+ | transition: all 0.3s ease; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | nav { | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | transition: all 0.3s ease; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | nav a { | ||
+ | color: #333333; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | background: transparent; | ||
+ | height: 94px; | ||
+ | max-height: 94px; | ||
+ | margin: 0; | ||
+ | border-radius: 0; | ||
+ | transition: all 0.3s ease; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | } | ||
+ | |||
+ | .brand { | ||
+ | float: left; | ||
+ | padding: 30px 0 0; | ||
+ | transition: all 0.3s ease; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 0.3rem; | ||
+ | } | ||
+ | .brand a { | ||
+ | color: #333; | ||
+ | font-size: 24px; | ||
+ | font-weight: 700; | ||
+ | opacity: 1; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .navicon { | ||
+ | position: relative; | ||
+ | right: 0; | ||
+ | display: -webkit-flex; | ||
+ | display: -ms-flexbox; | ||
+ | display: flex; | ||
+ | -webkit-justify-content: flex-end; | ||
+ | -ms-flex-pack: end; | ||
+ | justify-content: flex-end; | ||
+ | padding: 20px 0 0; | ||
+ | } | ||
+ | |||
+ | nav ul { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | nav ul.right { | ||
+ | float: right; | ||
+ | right: 0 | ||
+ | } | ||
+ | |||
+ | #nav-menu a { | ||
+ | font-weight: 300; | ||
+ | font-size: 26px; | ||
+ | color: #ffffff; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 0.3rem; | ||
+ | } | ||
+ | |||
+ | #nav-menu li { | ||
+ | list-style: none; | ||
+ | padding: 6px; | ||
+ | } | ||
+ | |||
+ | .nav-text-light a { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | .sticky .nav-text-light a { | ||
+ | color: #555555; | ||
+ | } | ||
+ | |||
+ | .sticky nav.nav-inner .navbar { | ||
+ | height: 70px; | ||
+ | max-height: 70px; | ||
+ | margin: 0; | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | |||
+ | .sticky nav.transparent .navbar { | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | @media all and (max-width: 990px) { | ||
+ | .nav-text-light a { | ||
+ | color: #555555; | ||
+ | } | ||
+ | .nav-inner { | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | .transparent { | ||
+ | background: transparent; | ||
+ | } | ||
+ | .navicon { | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | nav ul.right { | ||
+ | float: left; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | a.icon { | ||
+ | font-size: 32px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | .intro-inner { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translate(-50%, -50%); | ||
+ | -ms-transform: translate(-50%, -50%); | ||
+ | transform: translate(-50%, -50%); | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .close { | ||
+ | font-family: inherit; | ||
+ | font-size: 32px; | ||
+ | font-weight: 300; | ||
+ | text-shadow: none; | ||
+ | } | ||
+ | .close:focus { | ||
+ | outline: 0px auto -webkit-focus-ring-color; | ||
+ | } | ||
+ | |||
+ | .circle { | ||
+ | width: 45px; | ||
+ | height: 45px; | ||
+ | text-align: center; | ||
+ | margin: 0 auto; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin-top: -40px; | ||
+ | margin-left: -40px; | ||
+ | border-radius: 50%; | ||
+ | transition: all 0.3s ease; | ||
+ | -webkit-transition: all 0.3s ease; | ||
+ | -moz-transition: all 0.3s ease; | ||
+ | cursor: pointer; | ||
+ | z-index: 99; | ||
+ | padding: 4px 0 0; | ||
+ | } | ||
+ | |||
+ | .circle i { | ||
+ | font-size: 36px; | ||
+ | color: #111112; | ||
+ | } | ||
+ | |||
+ | .circle.dark { | ||
+ | border-color: #292929; | ||
+ | } | ||
+ | |||
+ | .circle.dark:before { | ||
+ | border-color: transparent transparent transparent #292929; | ||
+ | } | ||
+ | |||
+ | .circle.large { | ||
+ | height: 120px; | ||
+ | width: 120px; | ||
+ | margin-top: -60px; | ||
+ | margin-left: -60px; | ||
+ | } | ||
+ | |||
+ | .circle.large:before { | ||
+ | margin-top: -18px; | ||
+ | margin-left: -10px; | ||
+ | content: ''; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-style: solid; | ||
+ | border-width: 20px 0 20px 31.0px; | ||
+ | border-color: transparent transparent transparent #ffffff; | ||
+ | } | ||
+ | |||
+ | .circle.large.dark:before { | ||
+ | border-color: transparent transparent transparent #292929; | ||
+ | } | ||
+ | |||
+ | .circle.inline { | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | margin-top: 0; | ||
+ | margin-left: 0; | ||
+ | display: inline-block; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | @media all and (max-width: 767px) { | ||
+ | .circle.large { | ||
+ | width: 90px; | ||
+ | height: 90px; | ||
+ | margin-top: -45px; | ||
+ | } | ||
+ | .circle.large:before { | ||
+ | margin-top: -14px; | ||
+ | margin-left: -8px; | ||
+ | content: ''; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-style: solid; | ||
+ | border-width: 15px 0 15px 25.0px; | ||
+ | border-color: transparent transparent transparent #fff; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .list-menu { | ||
+ | position: fixed; | ||
+ | visibility: hidden; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 9999999; | ||
+ | background: rgba(0, 0, 0, 0.9); | ||
+ | transition: all 0.6s ease; | ||
+ | -webkit-transition: all 0.6s ease; | ||
+ | -moz-transition: all 0.6s ease; | ||
+ | opacity: 0; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .list-menu.reveal-modal { | ||
+ | opacity: 1; | ||
+ | z-index: 999999; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .list-menu .ion-close-round { | ||
+ | font-size: 31px; | ||
+ | position: absolute; | ||
+ | top: 32px; | ||
+ | right: 32px; | ||
+ | color: #fff; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* header section styles | ||
+ | /* ========================================== */ | ||
+ | #header { | ||
+ | -webkit-background-size: cover; | ||
+ | background-size: cover; | ||
+ | background-position: center center; | ||
+ | text-align: center; | ||
+ | padding-top: 130px; | ||
+ | padding-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | #header .header-thumb { | ||
+ | background: #ffffff; | ||
+ | border: 10px solid #f9f9f9; | ||
+ | padding: 62px 20px 62px 20px; | ||
+ | } | ||
+ | |||
+ | .header-one .header-thumb, | ||
+ | .header-two .header-thumb, | ||
+ | .header-three .header-thumb, | ||
+ | .header-four .header-thumb, | ||
+ | .header-five .header-thumb { | ||
+ | padding: 32px 20px 32px 20px !important; | ||
+ | } | ||
+ | |||
+ | .header-one, .header-two, | ||
+ | .header-three, .header-four, | ||
+ | .header-five { | ||
+ | height: 42vh !important; | ||
+ | min-height: 420px; | ||
+ | padding-top: 120px !important; | ||
+ | } | ||
+ | |||
+ | .header-one { | ||
+ | background: url('../images/header-bg.jpg') no-repeat; | ||
+ | height: 60vh !important; | ||
+ | min-height: 520px; | ||
+ | padding-top: 150px !important; | ||
+ | } | ||
+ | .header-two { | ||
+ | background: url('../images/header-bg.jpg') no-repeat; | ||
+ | } | ||
+ | .header-three { | ||
+ | background: url('../images/header-three-bg.jpg') no-repeat; | ||
+ | } | ||
+ | .header-four { | ||
+ | background: url('../images/header-four-bg.jpg') no-repeat; | ||
+ | } | ||
+ | .header-five { | ||
+ | background: url('../images/header-five-bg.jpg') no-repeat; | ||
+ | } | ||
+ | |||
+ | /* Portfolio section styles | ||
+ | /* ========================================== */ | ||
+ | #portfolio { | ||
+ | text-align: center; | ||
+ | padding-top: 3rem; | ||
+ | padding-bottom: 6rem; | ||
+ | } | ||
+ | |||
+ | #portfolio img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #portfolio .portfolio-thumb { | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #portfolio .portfolio-thumb .portfolio-overlay { | ||
+ | background: #141414; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.4s ease-in-out; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #portfolio .portfolio-thumb:hover .portfolio-overlay { | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | |||
+ | #portfolio .portfolio-thumb .portfolio-overlay .portfolio-item { | ||
+ | text-align: center; | ||
+ | padding: 30% 20px 20px; | ||
+ | } | ||
+ | |||
+ | #portfolio .portfolio-thumb .portfolio-overlay .fa { | ||
+ | background: #f9f9f9; | ||
+ | border-radius: 100px; | ||
+ | color: #141414; | ||
+ | font-size: 1.3rem; | ||
+ | display: inline-block; | ||
+ | width: 3.5rem; | ||
+ | height: 3.5rem; | ||
+ | line-height: 3.5rem; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | margin-bottom: 4px; | ||
+ | } | ||
+ | |||
+ | /*filter css*/ | ||
+ | .filter-wrapper { | ||
+ | width: 100%; | ||
+ | margin-bottom: 32px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .filter-wrapper li { | ||
+ | display: inline-block; | ||
+ | margin: 4px; | ||
+ | } | ||
+ | |||
+ | .filter-wrapper li a { | ||
+ | color: #666; | ||
+ | font-size: 13px; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 2px; | ||
+ | padding: 8px 17px; | ||
+ | margin-right: 2px; | ||
+ | margin-left: 2px; | ||
+ | text-transform: uppercase; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | .filter-wrapper li a:active { | ||
+ | background: #111112 !important; | ||
+ | } | ||
+ | .filter-wrapper li a:hover, | ||
+ | .filter-wrapper li a:focus { | ||
+ | background: #111112; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | /*isotope box css*/ | ||
+ | .iso-box-section { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .iso-box-wrapper { | ||
+ | width: 100%; | ||
+ | padding: 0; | ||
+ | clear: both; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .iso-box { | ||
+ | position: relative; | ||
+ | min-height: 50px; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | margin-bottom: 25px; | ||
+ | } | ||
+ | |||
+ | .iso-box > a { | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .fluid-img { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* single project section styles | ||
+ | /* ========================================== */ | ||
+ | #single-project { | ||
+ | padding-top: 4rem; | ||
+ | padding-bottom: 6rem; | ||
+ | } | ||
+ | |||
+ | #single-project .project-info { | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #single-project img { | ||
+ | padding-top: 14px; | ||
+ | } | ||
+ | |||
+ | /* about section styles | ||
+ | /* ========================================== */ | ||
+ | #about { | ||
+ | padding-top: 5rem; | ||
+ | padding-bottom: 8rem; | ||
+ | } | ||
+ | |||
+ | #about .col-md-4 { | ||
+ | padding-top: 16px; | ||
+ | padding-bottom: 32px; | ||
+ | } | ||
+ | |||
+ | #about img { | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #about blockquote { | ||
+ | letter-spacing: 2px; | ||
+ | margin-top: 20px; | ||
+ | } | ||
+ | |||
+ | /* blog & single post section styles | ||
+ | /* ========================================== */ | ||
+ | #blog, | ||
+ | #single-post { | ||
+ | padding-top: 4rem; | ||
+ | padding-bottom: 6rem; | ||
+ | } | ||
+ | |||
+ | #blog .blog-thumb { | ||
+ | padding-top: 60px; | ||
+ | padding-bottom: 40px; | ||
+ | } | ||
+ | |||
+ | #blog .post-format, | ||
+ | #single-post .post-format { | ||
+ | padding-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #blog .post-format span, | ||
+ | #single-post .post-format span { | ||
+ | color: #888; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 1px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | #blog .blog-thumb .btn { | ||
+ | border-radius: 0px; | ||
+ | padding: 10px 32px; | ||
+ | letter-spacing: 2px; | ||
+ | text-transform: uppercase; | ||
+ | margin-top: 22px; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | #blog .blog-thumb .btn:hover { | ||
+ | background: #111112; | ||
+ | border-color: transparent; | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | |||
+ | #single-post blockquote { | ||
+ | margin-top: 32px; | ||
+ | letter-spacing: 2px; | ||
+ | } | ||
+ | |||
+ | .post-image { | ||
+ | margin: 25px 0px; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment, | ||
+ | #single-post .blog-comment-form { | ||
+ | margin-top: 62px; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment h3, | ||
+ | #single-post .blog-comment-form h3 { | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment .media { | ||
+ | padding-bottom: 22px; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment .media img { | ||
+ | padding-right: 14px; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment h4 { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment-form .form-control { | ||
+ | background: transparent; | ||
+ | border: 1px solid #eee; | ||
+ | border-radius: 0px; | ||
+ | box-shadow: none; | ||
+ | font-size: 16px; | ||
+ | margin-bottom: 16px; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #single-post .blog-comment-form input[type="submit"] { | ||
+ | background: #111112; | ||
+ | border-color: transparent; | ||
+ | color: #ffffff; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* contact section styles | ||
+ | /* ========================================== */ | ||
+ | #contact { | ||
+ | padding-top: 5rem; | ||
+ | padding-bottom: 0rem; | ||
+ | } | ||
+ | |||
+ | #contact .fa { | ||
+ | font-size: 32px; | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | |||
+ | #contact #map-canvas { | ||
+ | border: none; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | margin-top: 40px; | ||
+ | } | ||
+ | |||
+ | #contact .contact-form { | ||
+ | padding-top: 14px; | ||
+ | } | ||
+ | |||
+ | #contact .form-control { | ||
+ | background: transparent; | ||
+ | border: 1px solid #eee; | ||
+ | border-radius: 0px; | ||
+ | box-shadow: none; | ||
+ | font-size: 16px; | ||
+ | margin-bottom: 16px; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #contact .form-control:hover { | ||
+ | border-color: #f0f0f0; | ||
+ | } | ||
+ | |||
+ | #contact textarea {min-height: 100px;} | ||
+ | |||
+ | #contact input {height: 50px;} | ||
+ | |||
+ | #contact input[type='submit'] { | ||
+ | background: #111112; | ||
+ | color: #ffffff; | ||
+ | font-size: 15px; | ||
+ | font-weight: 400; | ||
+ | letter-spacing: 2px; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | |||
+ | #contact input[type='submit']:hover { | ||
+ | background: #444; | ||
+ | } | ||
+ | |||
+ | .contact-submit { | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | #contact .col-md-4 { | ||
+ | background: #fff; | ||
+ | padding: 62px 0px 32px 42px; | ||
+ | position: relative; | ||
+ | bottom: -50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* footer section styles | ||
+ | /* ========================================== */ | ||
+ | footer { | ||
+ | background: #141414; | ||
+ | padding-top: 120px; | ||
+ | padding-bottom: 120px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* social icon */ | ||
+ | .social-icon { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .social-icon li { | ||
+ | list-style: none; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .social-icon li a { | ||
+ | border-radius: 100px; | ||
+ | border: 1px solid transparent; | ||
+ | color: #909090; | ||
+ | font-size: 18px; | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | line-height: 48px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | text-decoration: none; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | padding: 0px; | ||
+ | margin-top: 14px; | ||
+ | margin-right: 8px; | ||
+ | margin-left: 8px; | ||
+ | position: relative; | ||
+ | top: 0px; | ||
+ | } | ||
+ | .social-icon li a:hover { | ||
+ | background: #ffffff; | ||
+ | } | ||
+ | |||
+ | /* Responsive Mobile styles | ||
+ | /* ========================================== */ | ||
+ | @media (max-width: 980px) { | ||
+ | |||
+ | .intro-inner {top: 30%;} | ||
+ | |||
+ | #contact .col-md-4 { | ||
+ | padding: 62px 20px 42px 32px; | ||
+ | } | ||
+ | |||
+ | #contact .col-md-4 p { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | |||
+ | #contact #map-canvas { | ||
+ | margin-bottom: 60px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | @media (max-width: 768px) { | ||
+ | |||
+ | .brand { | ||
+ | padding-left: 24px; | ||
+ | } | ||
+ | |||
+ | .header-one, .header-two, | ||
+ | .header-three, .header-four, | ||
+ | .header-five { | ||
+ | min-height: 380px; | ||
+ | padding-top: 80px !important; | ||
+ | } | ||
+ | |||
+ | #about .col-md-4, | ||
+ | #single-project .col-md-3 { | ||
+ | padding-bottom: 32px; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media (max-width: 700px) { | ||
+ | |||
+ | h1 { | ||
+ | font-size: 1.3rem; | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 13px; | ||
+ | letter-spacing: 3px; | ||
+ | } | ||
+ | |||
+ | .filter-wrapper { | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | #contact { | ||
+ | padding-bottom: 4rem; | ||
+ | } | ||
+ | |||
+ | #contact .col-md-4 { | ||
+ | padding: 32px 20px 22px 62px; | ||
+ | } | ||
+ | .contact-submit { | ||
+ | width: 70%; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | @media (max-width: 450px) { | ||
+ | .intro-inner {top: 50%;} | ||
+ | } |
Revision as of 02:31, 19 July 2017
body { background: #ffffff;
font-family: 'Source Sans Pro', sans-serif; font-style: normal; font-weight: 300; position: relative;
}
html,body {
width: 100%; overflow-x: hidden;
}
html {
font-size: 100%;
}
/* Typography
*/
h1,h2,h3,h4 {
font-weight: 400; letter-spacing: 0.3rem; text-transform: uppercase;
}
h1 {
color: #000; font-size: 1.8rem; font-weight: 700;
}
h2 {
color: #ffffff; font-size: 1rem;
}
h3 {
color: #444; font-size: 14px; letter-spacing: 4px;
}
h5 {
font-weight: 400; letter-spacing: 1px;
}
p {
color: #777; font-size: 16px; line-height: 28px; word-spacing: 1px; letter-spacing: 1px;
}
a {
outline: none; text-decoration: none;
} a, a:hover, a:focus {
color: inherit; text-decoration: none; outline: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out;
}
img {
width: 100%; max-width: 100%;
}
/* preloader styles
/* ========================================== */
.preloader {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background: none repeat scroll 0 0 #fff;
}
.sk-spinner-pulse {
width: 60px; height: 60px; background-color: #111112; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; }
@-webkit-keyframes sk-pulseScaleOut {
0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes sk-pulseScaleOut {
0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
/* navigation styles /* ========================================== */ .nav-container, nav {
overflow: visible; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}
nav {
-webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}
nav a {
color: #333333;
}
.navbar {
background: transparent; height: 94px; max-height: 94px; margin: 0; border-radius: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}
.brand {
float: left; padding: 30px 0 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.3rem;
} .brand a {
color: #333; font-size: 24px; font-weight: 700; opacity: 1; text-decoration: none;
}
.navicon {
position: relative; right: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 20px 0 0;
}
nav ul {
display: inline-block;
}
nav ul.right {
float: right; right: 0
}
- nav-menu a {
font-weight: 300; font-size: 26px; color: #ffffff; text-transform: uppercase; letter-spacing: 0.3rem;
}
- nav-menu li {
list-style: none; padding: 6px;
}
.nav-text-light a {
color: #ffffff;
}
.sticky .nav-text-light a {
color: #555555;
}
.sticky nav.nav-inner .navbar {
height: 70px; max-height: 70px; margin: 0; background: #ffffff;
}
.sticky nav.transparent .navbar {
background: transparent;
}
@media all and (max-width: 990px) {
.nav-text-light a { color: #555555; } .nav-inner { background: #ffffff; } .transparent { background: transparent; } .navicon { padding-right: 10px; } nav ul.right { float: left; }
}
a.icon {
font-size: 32px; padding-right: 20px;
}
.intro-inner {
position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; text-align: center;
}
.close {
font-family: inherit; font-size: 32px; font-weight: 300; text-shadow: none;
} .close:focus {
outline: 0px auto -webkit-focus-ring-color;
}
.circle {
width: 45px; height: 45px; text-align: center; margin: 0 auto; position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; border-radius: 50%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; cursor: pointer; z-index: 99; padding: 4px 0 0;
}
.circle i {
font-size: 36px; color: #111112;
}
.circle.dark {
border-color: #292929;
}
.circle.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.large {
height: 120px; width: 120px; margin-top: -60px; margin-left: -60px;
}
.circle.large:before {
margin-top: -18px; margin-left: -10px; content: ; width: 0; height: 0; border-style: solid; border-width: 20px 0 20px 31.0px; border-color: transparent transparent transparent #ffffff;
}
.circle.large.dark:before {
border-color: transparent transparent transparent #292929;
}
.circle.inline {
position: relative; top: 0; left: 0; margin-top: 0; margin-left: 0; display: inline-block; z-index: 0;
}
@media all and (max-width: 767px) {
.circle.large { width: 90px; height: 90px; margin-top: -45px; } .circle.large:before { margin-top: -14px; margin-left: -8px; content: ; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 25.0px; border-color: transparent transparent transparent #fff; }
}
.list-menu {
position: fixed; visibility: hidden; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999999; background: rgba(0, 0, 0, 0.9); transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; opacity: 0; z-index: -1;
}
.list-menu.reveal-modal {
opacity: 1; z-index: 999999; visibility: visible;
}
.list-menu .ion-close-round {
font-size: 31px; position: absolute; top: 32px; right: 32px; color: #fff; cursor: pointer;
}
/* header section styles /* ========================================== */
- header {
-webkit-background-size: cover; background-size: cover; background-position: center center; text-align: center; padding-top: 130px; padding-bottom: 100px;
}
- header .header-thumb {
background: #ffffff; border: 10px solid #f9f9f9; padding: 62px 20px 62px 20px;
}
.header-one .header-thumb, .header-two .header-thumb, .header-three .header-thumb, .header-four .header-thumb, .header-five .header-thumb {
padding: 32px 20px 32px 20px !important;
}
.header-one, .header-two, .header-three, .header-four, .header-five {
height: 42vh !important; min-height: 420px; padding-top: 120px !important;
}
.header-one {
background: url('../images/header-bg.jpg') no-repeat; height: 60vh !important; min-height: 520px; padding-top: 150px !important;
} .header-two {
background: url('../images/header-bg.jpg') no-repeat;
} .header-three {
background: url('../images/header-three-bg.jpg') no-repeat;
} .header-four {
background: url('../images/header-four-bg.jpg') no-repeat;
} .header-five {
background: url('../images/header-five-bg.jpg') no-repeat;
}
/* Portfolio section styles /* ========================================== */
- portfolio {
text-align: center; padding-top: 3rem; padding-bottom: 6rem;
}
- portfolio img {
width: 100%;
}
- portfolio .portfolio-thumb {
position: relative; overflow: hidden; margin: 0;
}
- portfolio .portfolio-thumb .portfolio-overlay {
background: #141414; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
- portfolio .portfolio-thumb:hover .portfolio-overlay {
opacity: 0.9;
}
- portfolio .portfolio-thumb .portfolio-overlay .portfolio-item {
text-align: center; padding: 30% 20px 20px;
}
- portfolio .portfolio-thumb .portfolio-overlay .fa {
background: #f9f9f9; border-radius: 100px; color: #141414; font-size: 1.3rem; display: inline-block; width: 3.5rem; height: 3.5rem; line-height: 3.5rem; text-align: center; text-decoration: none; margin-bottom: 4px;
}
/*filter css*/ .filter-wrapper {
width: 100%; margin-bottom: 32px; overflow: hidden;
}
.filter-wrapper li {
display: inline-block; margin: 4px;
}
.filter-wrapper li a {
color: #666; font-size: 13px; font-weight: 400; letter-spacing: 2px; padding: 8px 17px; margin-right: 2px; margin-left: 2px; text-transform: uppercase; display: block; text-decoration: none; transition: all 0.4s ease-in-out;
} .filter-wrapper li a:active {
background: #111112 !important;
} .filter-wrapper li a:hover, .filter-wrapper li a:focus {
background: #111112; color: #ffffff;
}
/*isotope box css*/ .iso-box-section {
width: 100%;
}
.iso-box-wrapper {
width: 100%; padding: 0; clear: both; position: relative;
}
.iso-box {
position: relative; min-height: 50px; float: left; overflow: hidden; margin-bottom: 25px;
}
.iso-box > a {
display: block; width: 100%; height: 100%; overflow: hidden;
}
.fluid-img {
width: 100%; display: block;
}
/* single project section styles /* ========================================== */
- single-project {
padding-top: 4rem; padding-bottom: 6rem;
}
- single-project .project-info {
padding-bottom: 10px;
}
- single-project img {
padding-top: 14px;
}
/* about section styles /* ========================================== */
- about {
padding-top: 5rem; padding-bottom: 8rem;
}
- about .col-md-4 {
padding-top: 16px; padding-bottom: 32px;
}
- about img {
padding-bottom: 20px;
}
- about blockquote {
letter-spacing: 2px; margin-top: 20px;
}
/* blog & single post section styles /* ========================================== */
- blog,
- single-post {
padding-top: 4rem; padding-bottom: 6rem;
}
- blog .blog-thumb {
padding-top: 60px; padding-bottom: 40px;
}
- blog .post-format,
- single-post .post-format {
padding-bottom: 10px;
}
- blog .post-format span,
- single-post .post-format span {
color: #888; font-weight: 400; letter-spacing: 1px; padding-right: 10px;
}
- blog .blog-thumb .btn {
border-radius: 0px; padding: 10px 32px; letter-spacing: 2px; text-transform: uppercase; margin-top: 22px; transition: all 0.4s ease-in-out;
}
- blog .blog-thumb .btn:hover {
background: #111112; border-color: transparent; color: #ffffff;
}
- single-post blockquote {
margin-top: 32px; letter-spacing: 2px;
}
.post-image { margin: 25px 0px; }
- single-post .blog-comment,
- single-post .blog-comment-form {
margin-top: 62px;
}
- single-post .blog-comment h3,
- single-post .blog-comment-form h3 {
padding-bottom: 20px;
}
- single-post .blog-comment .media {
padding-bottom: 22px;
}
- single-post .blog-comment .media img {
padding-right: 14px;
}
- single-post .blog-comment h4 {
font-weight: 700;
}
- single-post .blog-comment-form .form-control {
background: transparent; border: 1px solid #eee; border-radius: 0px; box-shadow: none; font-size: 16px; margin-bottom: 16px; transition: all 0.4s ease-in-out;
}
- single-post .blog-comment-form input[type="submit"] {
background: #111112; border-color: transparent; color: #ffffff; height: 50px;
}
/* contact section styles
/* ========================================== */
- contact {
padding-top: 5rem; padding-bottom: 0rem;
}
- contact .fa {
font-size: 32px; padding-right: 10px;
}
- contact #map-canvas {
border: none; width: 100%; height: 300px; margin-top: 40px;
}
- contact .contact-form {
padding-top: 14px;
}
- contact .form-control {
background: transparent; border: 1px solid #eee; border-radius: 0px; box-shadow: none; font-size: 16px; margin-bottom: 16px; transition: all 0.4s ease-in-out;
}
- contact .form-control:hover {
border-color: #f0f0f0;
}
- contact textarea {min-height: 100px;}
- contact input {height: 50px;}
- contact input[type='submit'] {
background: #111112; color: #ffffff; font-size: 15px; font-weight: 400; letter-spacing: 2px; transition: all 0.4s ease-in-out; margin-top: 10px;
}
- contact input[type='submit']:hover {
background: #444;
}
.contact-submit { width: 50%; }
- contact .col-md-4 {
background: #fff; padding: 62px 0px 32px 42px; position: relative; bottom: -50px;
}
/* footer section styles /* ========================================== */ footer {
background: #141414; padding-top: 120px; padding-bottom: 120px; text-align: center;
}
/* social icon */
.social-icon {
padding: 0; margin: 0;
} .social-icon li {
list-style: none; display: inline-block;
} .social-icon li a {
border-radius: 100px; border: 1px solid transparent; color: #909090; font-size: 18px; width: 50px; height: 50px; line-height: 48px; text-align: center; vertical-align: middle; text-decoration: none; transition: all 0.4s ease-in-out; padding: 0px; margin-top: 14px; margin-right: 8px; margin-left: 8px; position: relative; top: 0px;
} .social-icon li a:hover {
background: #ffffff;
}
/* Responsive Mobile styles /* ========================================== */ @media (max-width: 980px) {
.intro-inner {top: 30%;}
#contact .col-md-4 { padding: 62px 20px 42px 32px; }
#contact .col-md-4 p { font-size: 12px; }
#contact #map-canvas { margin-bottom: 60px; }
}
@media (max-width: 768px) {
.brand { padding-left: 24px; }
.header-one, .header-two, .header-three, .header-four, .header-five { min-height: 380px;
padding-top: 80px !important;
}
#about .col-md-4, #single-project .col-md-3 { padding-bottom: 32px; }
}
@media (max-width: 700px) {
h1 { font-size: 1.3rem; } h3 { font-size: 13px; letter-spacing: 3px; }
.filter-wrapper { padding: 0px; }
#contact { padding-bottom: 4rem; }
#contact .col-md-4 { padding: 32px 20px 22px 62px; } .contact-submit {
width: 70%;
}
}
@media (max-width: 450px) {
.intro-inner {top: 50%;}
}