Template:H4Z-Hangzhou/css/style
@import url(http://fonts.useso.com/css?family=Raleway:100,200,300,400,700,800,900); @import url(http://fonts.useso.com/css?family=Volkhov:400,400italic);
- ,
- before,
- after {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 100%; }
body {
height: 100%;
color: #5c5c5c; background: #ffffff; font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 15px; text-align: center; }
- selection {
background: #1a1a1a; color: #ffffff; }
- -moz-selection {
background: #1a1a1a; color: #ffffff; }
/* ==================== 1.2 Typography ==================== */
p { font-size: 15px; line-height: 25px; margin-bottom: 25px; }
h1, h2, h3, h4, h5, h6 { color: #1a1a1a; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
h1 { font-size: 24px; line-height: 30px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 16px; line-height: 25px; }
h4 { font-size: 15px; line-height: 25px; }
h5 { font-size: 14px; line-height: 25px; }
h6 { font-size: 12px; line-height: 25px; }
h1.color, h2.color, h3.color, h4.color, h5.color, h6.color, p.color, span.color { color: #f85c37; }
h1.dark, h2.dark, h3.dark, h4.dark, h5.dark, h6.dark, p.dark, span.dark { color: #1a1a1a; }
h1.grey, h2.grey, h3.grey, h4.grey, h5.grey, h6.grey, p.grey, span.grey { color: #c0c0c0; }
h1.white, h2.white, h3.white, h4.white, h5.white, h6.white, p.white, span.white { color: #ffffff; }
a.normal, span.normal { color: #1a1a1a; }
b, strong { font-weight: 900; }
em { font-style: italic; }
small { font-size: 80%; }
ol, ul { line-height: 25px; margin-bottom: 25px; }
.script { font-family: 'Volkhov', Georgia, Times, serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} h1.fittext { margin-bottom: 10px; font-size: 100px; font-weight: 700; line-height: 100%; }
h1.hugetext { margin-bottom: 10px; font-size: 180px; font-weight: 700; line-height: 100%; }
p.uppercase { font-size: 16px; margin-bottom: 0; letter-spacing: 0.1em; text-transform: uppercase; }
/* ==================== 1.3 Links ==================== */
a, a:hover, a:focus { text-decoration: none; outline: 0; }
a { color: #f85c37; }
a:hover { color: #1a1a1a; }
a.hovercolor:hover, span.hovercolor:hover { color: #f85c37; }
a img { text-decoration: none; vertical-align: bottom; }
a.inverted { color: #1a1a1a; }
a.inverted:hover { color: #f85c37; }
/* ==================== 1.4 Buttons and Icons ==================== */
.button { color: #ffffff; background: #f85c37; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px 7px; border-radius: 0; margin: 25px 5px; }
.button-large { color: #ffffff; background: #f85c37; display: inline-block; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px 9px; border-radius: 0; margin: 25px 5px; }
.button.border, .button.white-border, .button.dark-border { padding: 6px 12px 5px; }
.button-large.border, .button-large.white-border, .button-large.dark-border { padding: 8px 16px 7px; }
.button:hover, .button-large:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
.button i.icon-left, .button-large i.icon-left { margin-right: 8px; }
.button i.icon-right, .button-large i.icon-right { margin-left: 8px; }
/* Fixing the broken box model for input / buttons */ input[type="button"].button, input[type="submit"].button, button.button { padding: 13px 14px 13px; }
input[type="button"].button-large, input[type="submit"].button-large, button.button-large { padding: 13px 18px 12px; }
input[type="button"].button.border, input[type="button"].button.white-border, input[type="button"].button.dark-border, input[type="submit"].button.border, input[type="submit"].button.white-border, input[type="submit"].button.dark-border, button.button.border, button.button.white-border, button.button.dark-border { padding: 11px 12px 11px; }
input[type="button"].button-large.border, input[type="button"].button-large.white-border, input[type="button"].button-large.dark-border, input[type="submit"].button-large.border, input[type="submit"].button-large.white-border, input[type="submit"].button-large.dark-border, button.button-large.border, button.button-large.white-border, button.button-large.dark-border { padding: 11px 18px 10px; }
/* Icons */ i.small-icon { color: #ffffff; background: #f85c37; display: inline-block; vertical-align: middle; text-align: center; width: 24px; height: 24px; font-size: 14px; line-height: 24px; margin: 25px 2px; border-radius: 50%; }
i.medium-icon { color: #ffffff; background: #f85c37; display: inline-block; vertical-align: middle; text-align: center; width: 40px; height: 40px; font-size: 18px; line-height: 38px; margin: 25px 5px; border-radius: 50%; }
i.column-icon { color: #ffffff; background: #f85c37; display: inline-block; vertical-align: middle; text-align: center; width: 60px; height: 60px; font-size: 28px; line-height: 60px; border-radius: 50%; margin-bottom: 25px; }
i.column-icon:hover { font-size: 36px; }
/* Styling for Buttons and Icons */ .white-bg { background: #ffffff!important; color: #1a1a1a; }
.white-bg:hover { color: #1a1a1a; box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); }
.dark-bg { background: #1a1a1a!important; color: #ffffff; }
.dark-bg:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
.border { background: 0!important; color: #f85c37; border: 2px solid #f85c37; }
.border:hover { color: #f85c37; box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(0,0,0,0.2); }
.white-border { background: 0!important; color: #ffffff; border: 2px solid #ffffff; outline: -2px; }
.white-border:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
.dark-border { background: 0!important; color: #1a1a1a; border: 2px solid #1a1a1a; }
.dark-border:hover { color: #1a1a1a; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
/* ==================== 1.5 Forms ==================== */
form { margin: 0; padding: 0; display: block; }
input[type=text], input[type=url], input[type=tel], input[type=number], input[type=email], textarea { width: 100%; height: 40px; display: block; border: 2px solid #ffffff; background: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 15px; padding-left: 6px; border-radius: 0; margin: 0 0 10px 0; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
textarea { padding-top: 9px; overflow: auto; vertical-align: top; resize: none; }
.placeholder { color: #808080; }
- -moz-placeholder {
color: #808080; }
- -moz-placeholder {
color: #808080; }
- -ms-input-placeholder {
color: #808080; }
- -webkit-input-placeholder {
color: #808080; }
input:focus, textarea:focus { border-color: #c0c0c0; outline: 0; color: #1a1a1a; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
input.error, textarea.error { border-color: #e53a2e; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
/* ==================== 1.6 Other General Elements ==================== */
hr { border-top: 1px solid #c0c0c0; border-right: 0; border-bottom: 1px solid #c0c0c0; border-left: 0; margin: 60px 0; }
img { max-width: 100%; height: auto; }
.image-center { margin: 0 auto; text-align: center; }
.image-circle { border-radius: 50%; }
.column-border { border-left: 2px solid #d6d6d6; padding-left: 20px; }
/* More control over margins */ .margin { margin-top: 25px!important; margin-bottom: 25px!important; } .margin-top { margin-top: 25px!important; }
.margin-bottom { margin-bottom: 25px!important; }
.no-margin { margin: 0!important; }
.no-margin-top { margin-top: 0!important; }
.no-margin-bottom { margin-bottom: 0!important; }
/* Title settings */ .title h1 { font-size: 14px; color: #c0c0c0; }
.title hr { width: 60px; margin: 20px auto 30px; border: 1px solid #c0c0c0; }
/* Headers */ .header { position: relative; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center bottom; width: 100%; height: 480px; }
.header-inherited { position: inherited; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; width: 100%; height: 480px; }
.header-center { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; width: 780px; }
/* Animation of the content inside the header */ .header-center.fade-in { zoom: 1; animation: fadeit 1s ease-out forwards; animation-iteration-count: 1; -webkit-animation: fadeit 1s; -webkit-animation-iteration-count: 1; }
@keyframes fadeit { from { top:46%; filter: alpha(opacity=0); opacity: 0; } to { top:50%; filter: alpha(opacity=100); opacity: 1; } }
@-webkit-keyframes fadeit { from { top:46%; filter: alpha(opacity=0); opacity: 0; } to { top:50%; filter: alpha(opacity=100); opacity: 1; } }
/* Text ticker */ .text-ticker { width: 100%; height: 50px; margin: 0 auto; overflow: hidden; position: absolute; top: 40%; }
.text-ticker ul { -webkit-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite; -moz-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite; -ms-animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite; animation: ticker 5s cubic-bezier(1, 0, .5, 0) infinite; }
/* Uncomment this if you want to pause the text on hover .text-ticker ul:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; }*/
.text-ticker li { font-weight: 700; color: #ffffff; letter-spacing: 0.2em; text-transform: uppercase; line-height: 50px; }
@-webkit-keyframes ticker { 0% {margin-top: 0;} 20% {margin-top: -50px;} 40% {margin-top: -100px;} 60% {margin-top: -150px;} 80% {margin-top: -200px;} 100% {margin-top: 0;} }
@-moz-keyframes ticker { 0% {margin-top: 0;} 20% {margin-top: -50px;} 40% {margin-top: -100px;} 60% {margin-top: -150px;} 80% {margin-top: -200px;} 100% {margin-top: 0;} }
@-ms-keyframes ticker { 0% {margin-top: 0;} 20% {margin-top: -50px;} 40% {margin-top: -100px;} 60% {margin-top: -150px;} 80% {margin-top: -200px;} 100% {margin-top: 0;} }
@keyframes ticker { 0% {margin-top: 0;} 20% {margin-top: -50px;} 40% {margin-top: -100px;} 60% {margin-top: -150px;} 80% {margin-top: -200px;} 100% {margin-top: 0;} }
/* Smooth hovers */ a, a:hover, i, i:hover, a img, a img:hover, input[type="button"], input[type="submit"], button { -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
a i, a i:hover { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* Pace loading bar */ .business .pace .pace-progress { background: #f85c37; position: fixed; z-index: 2000; top: 0; left: 0; height: 3px;
-webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; }
.personal .pace .pace-progress { background: #3CAEC3; position: fixed; z-index: 2000; top: 0; left: 0; height: 3px;
-webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; }
.pace-inactive { display: none; }
/* SoundCloud iframe popup */ .soundcloud-popup .mfp-iframe { height: 182px; }
/* ==================== 2.1 Navigation ==================== */
.menu { position: fixed; right: -200px; width: 260px; height: 100%; top: 0; z-index: 10; text-align: left; }
.menu-left { position: fixed; left: -200px; width: 260px; height: 100%; top: 0; z-index: 10; text-align: left; }
.menu.menu-open { right: 0px; }
.menu-left.menu-open { left: 0px; }
.menu-wrap { position: absolute; top: 0; left: 60px; background: #1a1a1a; width: 200px; height: 100%; }
.menu-left .menu-wrap { left: 0!important; }
.menu h1.logo a, .menu-left h1.logo a { font-family: 'Raleway', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 0.15em; line-height: 40px; text-transform: uppercase; color: #ffffff; margin-top: 20px; }
.menu h1.logo a:hover, .menu-left h1.logo a:hover { color: #f85c37; }
.menu img.logo, .menu-left img.logo { margin: 20px 0; max-width: 160px; }
.menu a, .menu-left a { margin-left: 20px; color: #808080; display: block; font-size: 12px; font-weight: 700; line-height: 40px; letter-spacing: 0.1em; text-transform: uppercase; }
.menu a:hover, .menu-left a:hover { color: #ffffff; }
.menu a:active, .menu-left a:active { color: #ffffff; }
.menu a > i, .menu-left a > i { float: left; display: inline-block; vertical-align: middle; text-align: left; width: 25px; font-size: 14px; line-height: 40px; margin: 25px 2px; }
.menu-left .menu-close { display: none; }
.menu-close, .menu-close-left { cursor: pointer; display: block; position: absolute; font-size: 14px; color: #808080; width: 40px; height: 40px; line-height: 40px; top: 20px; right: 5px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.menu-close:hover, .menu-close-left:hover { color: #ffffff; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
/* Push the body after clicking the menu button */ .body-push { overflow-x: hidden; position: relative; left: 0; }
.body-push-toright { left: 200px; }
.body-push-toleft { left: -200px; }
.menu, .menu-left, .body-push { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
- menuToggle {
position: absolute; top: 20px; left: 0; z-index: 11; display: block; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0,0,0,0.25); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
- menuToggleLeft {
position: absolute; top: 20px; right: 0; z-index: 11; display: block; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0,0,0,0.25); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
- menuToggle:hover,
- menuToggleLeft:hover {
color: #ffffff; background: rgba(0,0,0,0.2); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
/* ==================== 2.2 Home ==================== */
/* Slides css */
- slides {
position: relative; }
- slides .slides-container {
/*display: none;*/ margin: 0; }
- slides .scrollable {
*zoom: 1; position: relative; top: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; }
- slides .scrollable:after {
content: ""; display: table; clear: both; }
/* Slides navigation arrows */ .slides-navigation { margin: 0 auto; position: absolute; z-index: 21; width: 100%; }
.slides-navigation a { position: absolute; font-size: 28px; line-height: 28px; bottom: 21px; color: #ffffff; zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }
.slides-navigation a.prev { left: 20px; }
.slides-navigation a.next { right: 20px; }
.slides-navigation a.prev:hover, .slides-navigation a.next:hover { filter: alpha(opacity=100); opacity: 1; }
/* Slides pagination indicators */ .slides-pagination { position: absolute; z-index: 20; bottom: 30px; text-align: center; width: 100%; }
.slides-pagination a { color: #ffffff; background: #ffffff; filter: alpha(opacity=50); opacity: 0.5; width: 30px; height: 4px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; margin: 2px; overflow: hidden; text-indent: -100%; }
.slides-pagination a:hover, .slides-pagination a.current { filter: alpha(opacity=100); opacity: 1; }
/* Fullscreen fixed background */ .fullscreen-image { background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; width: 100%;
height:100%;
}
/* ==================== 2.3 Introduction ==================== */
.introduction { background: #ffffff; width: 100%; padding-top: 60px; padding-bottom: 80px; }
/* ==================== 2.4 Services ==================== */
.services { padding-top: 60px; padding-bottom: 80px; background: #f7f7f7; }
/* Services slider */
- services-slider .servicesLink {
zoom: 1; visibility: visible!important; filter: alpha(opacity=100); opacity: 1!important; }
/* Arrow controls */ .services-arrow-prev, .services-arrow-next { display: block; width: 40px; height: 40px; color: #ffffff; background: #f85c37; font-size: 28px; line-height: 38px; position: absolute; bottom: 44%; z-index: 24; }
.services-arrow-prev { text-indent: -2px; left: 0; }
.services-arrow-next { text-indent: 2px; right: 0; }
.services-arrow-prev:hover, .services-arrow-next:hover { color: #ffffff; -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
/* Circle controls */ .services-buttons { margin: 0 auto; }
.services-buttons a { display: inline-block; vertical-align: middle; text-align: center; width: 140px; height: 140px; font-size: 56px; line-height: 136px; margin: 20px 10px; color: #c0c0c0; border: 2px solid #c0c0c0; border-radius: 50%; }
.services-buttons a i { display: inline-block; vertical-align: middle; text-align: center; width: 140px; height: 140px; line-height: 136px; margin-bottom: 15px; }
.services-buttons a:hover { font-size: 70px; }
.services-buttons a.current { color: #f85c37; border: 2px solid #f85c37; }
/* ==================== 2.5 Process ==================== */
.process { color: #ffffff; background: #f85c37; width: 100%; padding-top: 60px; padding-bottom: 105px; }
.process .title hr { border: 1px solid #ffffff; }
.process h1, .process h2, .process h3, .process h4, .process h5, .process h6, .process p { color: #ffffff; }
.process h3 { margin-top: 0; }
.process p { font-size: 13px; margin-bottom: 0; }
i.process-icon { display: inline-block; vertical-align: middle; text-align: center; width: 140px; height: 140px; font-size: 56px; line-height: 136px; margin-top: 35px; margin-bottom: 15px; color: #ffffff; border: 2px solid #ffffff; border-radius: 50%; }
i.process-icon:hover { font-size: 70px; }
/* ==================== 2.6 Portfolio ==================== */
.portfolio { padding-top: 60px; padding-bottom: 80px; }
/* Styles for the textual navigation */ a.filter { cursor: pointer; color: #1a1a1a; }
a.filter.active { color: #f85c37; }
a.filter.light { color: #c0c0c0; }
a.filter.light.active { color: #c0c0c0; }
a.filter:hover, a.filter.light:hover { color: #f85c37; }
[data-filter="all"], .filtered [data-filter="all"].active { display: none; }
.filtered [data-filter="all"] { display: inline; }
/* Portfolio items */
- portfolio-grid .mix{
zoom: 1; filter: alpha(opacity=0); opacity: 0; display: none; }
.project-item { position: relative; color: #ffffff; line-height: 0; margin-top: 10px; margin-bottom: 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.project-hover { position: absolute; width: 100%; height: 100%; overflow: hidden; color: rgba(255,255,255,0.0); background: rgba(0,0,0,0.0); font-size: 16px; font-weight: 700; letter-spacing: 0.1em; line-height: 20px; text-transform: uppercase; visibility: visible; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.project-item a:hover > .project-hover { color: rgba(255,255,255,1); background: rgba(0,0,0,0.5); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.project-hover span { display: inline-block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.project-hover b { color: rgba(255,255,255,0.0); font-family: 'Volkhov', Georgia, Times, serif; font-size: 14px; font-style: italic; font-weight: normal; letter-spacing: 0; text-transform: none; padding-top: 0; display: inline-block; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.project-hover span.plus { font-size: 120px; font-weight: 100; }
.project-item a:hover > .project-hover b { color: rgba(255,255,255,0.5); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
/* ==================== 2.7 Call to Action ==================== */
.call-to-action { color: #ffffff; background: #f85c37; width: 100%; padding-top: 60px; padding-bottom: 60px; }
.call-to-action h1, .call-to-action h2, .call-to-action h3, .call-to-action h4, .call-to-action h5, .call-to-action h6 { color: #ffffff; }
.call-to-action p, .call-to-action .button, .call-to-action .button-large { margin-bottom: 0; }
/* ==================== 2.8 About Us ==================== */
.about-us { background: #f7f7f7; width: 100%; padding-top: 0px; padding-bottom: 80px; }
.about-us .header { margin-bottom: 50px; }
/* Avatars */ .row.avatars { margin: 25px auto; }
.avatars > .columns { margin-bottom: 20px; background: #ffffff; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.avatars > .columns:hover { margin-top: -25px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.avatars img { margin-bottom: 10px; }
.avatars p.script { font-size: 14px; line-height: 20px; color: grey; margin: 0 20px; }
.avatars p { font-size: 13px; line-height: 20px; margin: 0 20px; }
.avatars i { color: #ffffff; background: #c0c0c0; }
.avatars i:hover { background: #f85c37; }
/* ==================== 2.9 About Me ==================== */
.about-me { padding-top: 0; padding-bottom: 80px; }
.about-me .header { margin-bottom: 50px; }
.avatar-about-me { margin-bottom: 25px; }
/* ==================== 2.10 Resume ==================== */
.resume { background: #f7f7f7; width: 100%; padding-top: 60px; padding-bottom: 80px; }
.resume h1, .resume h2, .resume h3, .resume h4, .resume h5, .resume h6 { margin-top: 25px; }
.resume .title h1, .resume .title h2 { margin-top: 0; }
h1.years, h2.years, h3.years, h4.years, h5.years, h6.years { font-size: 24px; font-weight: 300; letter-spacing: 0; line-height: 25px; color: #c0c0c0; margin-top: 22px; }
/* ==================== 2.11 Quote ==================== */
.quote { color: #c0c0c0; background: #333333; width: 100%; padding-top: 40px; padding-bottom: 50px; }
.quote p.quote-symbol { font-family: Arial, Helvetica, sans-serif; font-size: 120px; line-height: 120px; font-weight: 400; color: #595959; margin-bottom: -80px!important; }
.quote h1, .quote h2, .quote h3, .quote h4, .quote h5, .quote h6 { font-size: 24px; font-weight: 700; color: #c0c0c0; letter-spacing: 0.1em; line-height: 30px; text-transform: uppercase; margin-top: 15px; }
.quote p { color: #808080; }
i.rating { font-size: 14px; line-height: 40px; color: #f7b736; }
/* Arrow controls */ .quote-arrow-prev, .quote-arrow-next { display: block; width: 40px; height: 40px; color: #ffffff; background: #f85c37; font-size: 28px; line-height: 38px; position: absolute; bottom: 46%; z-index: 211; }
.quote-arrow-prev { text-indent: -2px; left: 0; }
.quote-arrow-next { text-indent: 2px; right: 0; }
.quote-arrow-prev:hover, .quote-arrow-next:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
/* ==================== 2.12 Contact ==================== */
.contact { color: #ffffff; }
.contact .header-inherited { padding-top: 80px; }
.contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6, .contact p, .contact a { color: #ffffff; margin-top: 0; margin-bottom: 0; }
.contact a { color: #ffffff; }
.contact a:hover { color: #f85c37; }
.contact p.script { font-size: 14px; }
a.contactLink { cursor: pointer; margin: 0; }
/* Contact form */ .contact-form textarea { height: 140px; float: none; }
.contact-form .form-column { width: 300px; float: left; }
.contact-form .form-column:first-child { margin-right: 20px; }
/* Credits and back to top button */ .contact-bottom { position: relative; }
.credit { color: #ffffff; font-size: 11px; line-height: 25px; letter-spacing: 0.1em; text-transform: uppercase; position: absolute; bottom: 25px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.credit a { color: #ffffff; }
.credit a:hover { color: #f85c37; }
.back-to-top { display: block; width: 40px; height: 40px; color: #ffffff; background: #f85c37; font-size: 28px; line-height: 38px; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; }
.back-to-top:hover { color: #ffffff!important; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
.modal { width: 460px; background: #fff; position: fixed; top: 50%; left: 50%; margin-left: -230px; z-index: 1000; -webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2); border: 0; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 70px 0; text-align: center; height: 228px; margin-top: -114px; display: none; }
.modal h1 { margin: 0 0 30px 0; color: #333333; }
.modal p { margin-bottom: 8px; line-height: 16px; font-size: 16px; }
.modal p.modal-close { color: #b2b2b2; cursor: pointer; }
.modal p.modal-close:hover { color: #333; }
.modal-overlay { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999; display: none; }
- loader {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #212121; color: #fff; z-index: 1999; }
- loader p {
font-size: 15px; font-weight: 700; letter-spacing: 0.15em; text-align: center; text-transform: uppercase; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -40px; }
- loader img {
position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; zoom: 1; animation: loader 2s linear; animation-iteration-count: infinite; -webkit-animation: loader 2s linear; -webkit-animation-iteration-count: infinite; }
@keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@-webkit-keyframes loader { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
/* ==================== 3.1 Portfolio Header ==================== */
/* Special settings here */
/* ==================== 3.2 Portfolio Introduction ==================== */
.portfolio-introduction { padding-top: 60px; padding-bottom: 80px; }
.projectdata-ul { display: inline-block; color: #c0c0c0; text-align: left; }
.projectdata-ul i { margin-left: -0.5em; }
.projectdata-ul a { color: #c0c0c0; }
.projectdata-ul a:hover { color: #1a1a1a; }
/* ==================== 3.3 Portfolio Images Slider ==================== */
.portfolio-images { background: #f7f7f7; width: 100%; padding-top: 60px; padding-bottom: 60px; }
- portfolio-slider ul li {
border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; }
/* Arrow controls */ .portfolio-arrow-prev, .portfolio-arrow-next { display: block; width: 40px; height: 40px; color: #ffffff; background: #f85c37; font-size: 28px; line-height: 38px; position: absolute; bottom: 50%; z-index: 33; }
.portfolio-arrow-prev { text-indent: -2px; left: 0; }
.portfolio-arrow-next { text-indent: 2px; right: 0; }
.portfolio-arrow-prev:hover, .portfolio-arrow-next:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
/* Indicators below the slider */ ol.controls { line-height: 0; margin-bottom: 0; }
ol.controls li { text-indent: -9999em; display: inline-block; width: 10px; height: 10px; margin: 10px 3px 0; background: #c0c0c0; cursor: pointer; }
ol.controls li.current { background: #f85c37; }
/* ==================== 3.4 Portfolio Details ==================== */
.portfolio-details { padding-top: 60px; padding-bottom: 60px; }
/* ==================== 3.5 Portfolio Gallery ==================== */
.portfolio-gallery { padding-top: 60px; padding-bottom: 60px; background: #f7f7f7; }
/* ==================== 3.6 Portfolio Navigation ==================== */
.portfolio-navigation { position: relative; padding-top: 40px; padding-bottom: 80px; background: #333333; }
p.back-to-projects, p.prev-project, p.next-project { position: absolute; z-index: 35; }
p.back-to-projects { left: 50%; margin-left: -20px; }
p.prev-project { left: 0; }
p.next-project { right: 0; }
p.prev-project span, p.next-project span { font-size: 16px; vertical-align: text-bottom; color: #c0c0c0; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
p.prev-project span:hover, p.next-project span:hover { color: #ffffff; }
.back-to-projects i, .prev-project i, .next-project i { display: inline-block; width: 40px; height: 40px; color: #c0c0c0; background: #444444; font-size: 28px; }
.back-to-projects i { font-size: 14px; line-height: 40px; }
.prev-project i { text-indent: -2px; left: 0; margin-right: 10px; line-height: 38px; }
.next-project i { text-indent: 2px; right: 0; margin-left: 10px; line-height: 38px; }
.back-to-projects i:hover, .prev-project i:hover, .next-project i:hover { color: #ffffff; box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -moz-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); -webkit-box-shadow: inset 0px 0px 100px rgba(255,255,255,0.2); }
/* ==================== 4.1 Tablet Portrait ==================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
i.column-icon { width: 40px; height: 40px; font-size: 20px; line-height: 40px; }
i.column-icon:hover { font-size: 24px; }
.header-center { width: 580px; }
.avatars > .columns:hover { margin-top: 0; }
.contact-form .form-column { width: 220px; }
}
/* ==================== 4.2 Mobile Landscape ==================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fullscreen-image, .header, .header-inherited { background-attachment: scroll; }
.text-left, .text-right { text-align: center; }
.column-border { border-left: 0; padding-left: 0; }
.header-center { width: 390px; }
.services-arrow-prev, .services-arrow-next { bottom: -80px; }
.services-arrow-prev { left: 0; }
.services-arrow-next { right: 0; }
.services-buttons a { width: 80px; height: 80px; font-size: 30px; line-height: 78px; margin: 20px 5px; }
.services-buttons a i { width: 80px; height: 80px; line-height: 80px; }
.services-buttons a:hover { font-size: 40px; }
.project-item { margin-top: 5px; margin-bottom: 5px; }
.avatars > .columns { margin-bottom: 10px; }
.avatars > .columns:hover { margin-top: 0; }
.quote-arrow-prev, .quote-arrow-next { bottom: 30px; }
.quote-arrow-prev { left: 140px; }
.quote-arrow-next { right: 140px; }
.contact-form .form-column { width: 230px; }
.contact-form .form-column:first-child { margin-right: 10px; }
.portfolio-images { padding-top: 60px; padding-bottom: 100px; }
.portfolio-arrow-prev, .portfolio-arrow-next { bottom: -42px; }
.portfolio-arrow-prev { left: 195px; }
.portfolio-arrow-next { right: 195px; }
ol.controls li { display: none; }
p.back-to-projects span, p.prev-project span, p.next-project span { display: none; }
p.prev-project{ left: 170px; margin-right: 0; }
p.next-project { right: 170px; margin-left: 0; }
}
/* ==================== 4.3 Mobile Portrait ==================== */
@media only screen and (max-width: 479px) {
.fullscreen-image, .header, .header-inherited { background-attachment: scroll; }
.text-left, .text-right { text-align: center; }
.column-border { border-left: 0; padding-left: 0; }
.header-center { width: 300px; }
.services { padding-bottom: 100px; }
.services-arrow-prev, .services-arrow-next { bottom: -40px; }
.services-arrow-prev { left: 105px; }
.services-arrow-next { right: 105px; }
.services-buttons { display: none; }
.project-item { margin-top: 5px; margin-bottom: 5px; }
.avatars > .columns { margin-bottom: 10px; }
.avatars > .columns:hover { margin-top: 0; }
.quote-arrow-prev, .quote-arrow-next { bottom: 30px; }
.quote-arrow-prev { left: 50px; }
.quote-arrow-next { right: 50px; }
.contact .header-inherited { height: 600px; }
.contact-form .form-column { width: 300px; }
.contact-form .form-column:first-child { margin-right: 0; }
.portfolio-images { padding-top: 60px; padding-bottom: 100px; }
.portfolio-arrow-prev, .portfolio-arrow-next { bottom: -42px; }
.portfolio-arrow-prev { left: 105px; }
.portfolio-arrow-next { right: 105px; }
ol.controls li { display: none; }
p.back-to-projects span, p.prev-project span, p.next-project span { display: none; }
p.prev-project{ left: 80px; margin-right: 0; }
p.next-project { right: 80px; margin-left: 0; }
}
/* ==================== 4.4 Modernizr-Assisted Fixes ==================== */
html.touch .fullscreen-image, html.touch .header, html.touch .header-inherited { background-attachment: scroll; }