/* /* a. Webfonts and Iconfonts /* =================================================================== */ @import url("fonts.css"); @import url("font-awesome/css/font-awesome.min.css"); @import url("simple-line-icons/simple-line-icons.css"); /* /* b. Document Setup /* =================================================================== */ /* Body ---------------------------------------------------------------------- */ body { background: #0e1015; font: 15px/30px "merriweather-regular", serif; font-weight: normal; color: #575859; } /* Links ---------------------------------------------------------------------- */ a, a:visited { color: #f26522; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus { color: black; } /* Typography --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: "raleway-bold", sans-serif; color: #252525; font-style: normal; text-rendering: optimizeLegibility; margin: 18px 0 15px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 30px; line-height: 36px; margin-top: 0; letter-spacing: -1px; } h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 20px; line-height: 30px; } h4 { font-size: 17px; line-height: 30px; } h5 { font-size: 14px; line-height: 30px; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; } h6 { font-size: 13px; line-height: 30px; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; } p { margin: 15px 0 15px 0; } p img { margin: 0; } p.lead { font: 17px/33px "merriweather-light", serif; color: #707273; } em { font: 15px/30px "merriweather-italic", serif; font-style: normal; } strong, b { font: 15px/30px "merriweather-bold", serif; font-weight: normal; } small { font-size: 11px; line-height: inherit; } blockquote { margin: 18px 0px; padding-left: 40px; position: relative; } blockquote:before { content: "\201C"; opacity: 0.45; font-size: 80px; line-height: 0px; margin: 0; font-family: arial, sans-serif; position: absolute; top: 30px; left: 0; } blockquote p { font-family: georgia, serif; font-style: italic; padding: 0; font-size: 18px; line-height: 30px; } blockquote cite { display: block; font-size: 12px; font-style: normal; line-height: 18px; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #707273; border: none; } abbr { font-family: "merriweather-bold", serif; font-variant: small-caps; text-transform: lowercase; letter-spacing: .5px; color: #7d7e80; } pre, code { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } code { padding: 3px; background: #ecf0f1; color: #707273; border-radius: 3px; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } mark { background: #FFF49B; color: #000; } hr { border: solid white; border-width: 1px 0 0; clear: both; margin: 23px 0 12px; height: 0; } /* Lists --------------------------------------------------------------------- */ ul, ol { margin-top: 15px; margin-bottom: 15px; } ul { list-style: disc; margin-left: 17px; } dl { margin: 0 0 15px 0; } dt { margin: 0; color: #f26522; } dd { margin: 0 0 0 20px; } /* Floated Image --------------------------------------------------------------------- */ img.pull-right { margin: 12px 0px 0px 18px; } img.pull-left { margin: 12px 18px 0px 0px; } /* /* c. Forms /* =================================================================== */ form { margin-bottom: 24px; } fieldset { margin: 0 0 24px 0; padding: 0; border: none; } input, button { -webkit-font-smoothing: antialiased; } input[type="text"], input[type="password"], input[type="email"], textarea, select { display: block; padding: 12px 15px; margin: 0 0 12px 0; border: 0; outline: none; vertical-align: middle; color: #a3a4a6; font-family: "raleway-regular", sans-serif; font-size: 14px; line-height: 24px; border-radius: 3px; max-width: 100%; background: transparent; border: 3px solid #a9aaab; } textarea { min-height: 162px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { background: white; } label, legend { font: 15px/30px "raleway-bold", sans-serif; margin: 12px 0; color: #252525; display: block; } label span, legend span { color: #575859; font: 15px/30px "merriweather-bold", serif; } input[type="checkbox"], input[type="radio"] { font-size: 15px; color: #575859; } input[type="checkbox"] { display: inline; } /* /* d. Preloader /* =================================================================== */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #12151b; z-index: 99999; height: 100%; } .no-js #preloader { display: none; } #status { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0; } #status img { display: none; } .loader { margin: 0 auto; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #f26522; -webkit-animation: load 1.1s infinite linear; animation: load 1.1s infinite linear; } .loader, .loader:after { border-radius: 50%; width: 60px; height: 60px; } @-webkit-keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* for ie8 */ .ie8 #status img { display: block; } .ie8 .loader { display: none; } /* /* e. Buttons /* =================================================================== */ .button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font: 15px/30px "raleway-bold", sans-serif; padding: 9px 16px; margin: 0 3px 6px 0; background: #818fab; color: white; text-decoration: none; cursor: pointer; height: auto; text-align: center; border: none; border-radius: 3px; -webkit-appearance: none; -webkit-font-smoothing: inherit; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background: #647495; color: white; } .button.primary, button.primary { background: #f26522; } .button.primary:hover, button.primary:hover { background: #e3520d; } button.medium, .button.medium { font: 15px/30px "raleway-bold", sans-serif; padding: 12px 18px !important; } button.large, .button.large { font: 15px/30px "raleway-bold", sans-serif; padding: 15px 20px !important; } button.round, .button.round { padding-left: 20px !important; padding-right: 20px !important; border-radius: 1000px; background-clip: padding-box; } button.stroke, .button.stroke { background: transparent !important; border: 3px solid transparent; } button.full-width, .button.full-width { width: 100%; margin-right: 0; } .button.pink { background: #ffadcb; } .button.pink:hover { background: #ff94bb; } .button.blue { background: #72bbf0; } .button.blue:hover { background: #5bb0ee; } .button.black { background: #2e3236; } .button.black:hover { background: #222528; } .button.yellow { background: #ffd900; } .button.yellow:hover { background: #f0cc00; } .button.red { background: #ff6163; } .button.red:hover { background: #ff474a; } .button.green { background: #9bc724; } .button.green:hover { background: #8ab120; } .button.grey { background: #8d8e91; } .button.grey:hover { background: #808184; } .button.purple { background: #b482c9; } .button.purple:hover { background: #a970c1; } .button.orange { background: #f5731c; } .button.orange:hover { background-color: #ed650a; } .button.stroke.pink { border-color: #ffadcb; color: #ffadcb; } .button.stroke.pink:hover { background: #ffadcb !important; color: #fff; } .button.stroke.blue { border-color: #72bbf0; color: #72bbf0; } .button.stroke.blue:hover { background: #72bbf0 !important; color: #fff; } .button.stroke.black { border-color: #2e3236; color: #2e3236; } .button.stroke.black:hover { background: #2e3236 !important; color: #fff; } .button.stroke.yellow { border-color: #ffd900; color: #ffd900; } .button.stroke.yellow:hover { background: #ffd900 !important; color: #fff; } .button.stroke.red { border-color: #ff6163; color: #ff6163; } .button.stroke.red:hover { background: #ff6163 !important; color: #fff; } .button.stroke.green { border-color: #9bc724; color: #9bc724; } .button.stroke.green:hover { background: #9bc724 !important; color: #fff; } .button.stroke.grey { border-color: #8d8e91; color: #8d8e91; } .button.stroke.grey:hover { background: #8d8e91 !important; color: #fff; } .button.stroke.purple { border-color: #b482c9; color: #b482c9; } .button.stroke.purple:hover { background: #b482c9 !important; color: #fff; } .button.stroke.orange { border-color: #f5731c; color: #f5731c; } .button.stroke.orange:hover { background: #f5731c !important; color: #fff; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* /* f. Other Components /* ================================================================== */ /* Alert Boxes /* ------------------------------------------------------------------ */ .alert-box { padding: 21px 40px 21px 30px; position: relative; margin-bottom: 24px; border-radius: 3px; background-clip: padding-box; font-family: "raleway-semibold", sans-serif; } .error { background-color: #ffd1d2; color: #e65153; } .success { background-color: #c8e675; color: #758c36; } .info { background-color: #d7ecfb; color: #4a95cc; } .notice { background-color: #fff099; color: #c16527; } .close { position: absolute; right: 18px; top: 18px; cursor: pointer; } /* Drop Cap /* ------------------------------------------------------------------ */ .drop-cap:first-letter { float: left; margin: 0; padding: 14px 6px 0 0; font-size: 84px; font-family: "raleway-bold", sans-serif; line-height: 60px; text-indent: 0; background: transparent; color: inherit; } /* Line Definition Style Markup /* ------------------------------------------------------------------ */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; } .lining dd + dd:before { content: ", "; } .lining dd + dd:before { content: ", "; } .lining dd:before { content: ":"; margin-left: -0.2em; } /* Dictionary Definition Style Markup /* ------------------------------------------------------------------ */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt + dt:before { content: ", "; margin-left: -0.2em; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions, decimal) ". "; } /* /* Pull Quotes Markup /* /* /* --------------------------------------------------------------------- */ .pull-quote { position: relative; padding: 18px 30px 18px 0px; } .pull-quote:before, .pull-quote:after { height: 1em; opacity: 0.45; position: absolute; font-size: 80px; font-family: Arial, Sans-Serif; } .pull-quote:before { content: "\201C"; top: 33px; left: 0; } .pull-quote:after { content: '\201D'; bottom: -33px; right: 0; } .pull-quote blockquote { margin: 0; } .pull-quote blockquote:before { content: none; } /* /* Stats Tab Markup
/* /* --------------------------------------------------------------------- */ .stats-tabs { padding: 0; margin: 24px 0; } .stats-tabs li { display: inline-block; margin: 0 10px 18px 0; padding: 0 10px 0 0; border-right: 1px solid #ccc; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 24px; font-family: "raleway-bold", sans-serif; border: none; color: #252525; } .stats-tabs li a:hover { color: #f26522; } .stats-tabs li a em { display: block; margin: 6px 0 0 0; font-size: 14px; font-family: "raleway-regular", sans-serif; color: #7d7e80; } /* Pagination /* ------------------------------------------------------------------ */ .pagination { margin: 30px auto; text-align: center; } .pagination ul li { display: inline-block; margin: 0; padding: 0; } .pagination .page-numbers { font: 15px/24px "raleway-bold", sans-serif; display: inline-block; padding: 6px 12px; height: 36px; margin-right: 3px; margin-bottom: 6px; color: #707273; background-color: #dde4e6; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border-radius: 3px; background-clip: padding-box; } .pagination .page-numbers:hover { background: #94aab0; color: white; } .pagination .current, .pagination .current:hover { background-color: #f26522; color: white; } .pagination .inactive, .pagination .inactive:hover { background-color: #ecf0f1; color: #a3a4a6; } /* /* g. Header Styles /* =================================================================== */ header { height: 72px; width: 100%; position: fixed; left: 0; top: 0; z-index: 990; text-align: center; background: white; //background: #12151B; //background: rgba(18, 21, 27, 0.5); -moz-transition: background 0.5s ease-in-out; -o-transition: background 0.5s ease-in-out; -webkit-transition: background 0.5s ease-in-out; -ms-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } header .logo { display: inline-block; vertical-align: middle; margin: 0; padding: 0; margin-right: 15px; /* add position relative since z-index only applies to elements that have been given an explicit position */ position: relative; z-index: 992; } header .logo a { display: block; margin: 0 20px 0 0; padding: 0; border: none; outline: none; font: 0/0 a; text-shadow: none; color: transparent; width: 160px; height: 33px; background-repeat: no-repeat; background-position: 0 0; background-image: url("../images/logo.png"); background-size: contain; } .opaque { background: #12151b; } /* primary navigation --------------------------------------------------------------------- */ #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a { margin: 0; padding: 0; border: none; outline: none; } /* nav-wrap */ #nav-wrap { font: 11px "raleway-heavy", sans-serif; text-transform: uppercase; letter-spacing: 1.5px; display: inline-block; } /* hide toggle button */ #nav-wrap > a { display: none; } ul#nav { min-height: 72px; width: auto; /* left align the menu */ text-align: left; } ul#nav li { position: relative; list-style: none; height: 72px; display: inline-block; } ul#nav li a { display: inline-block; padding: 17px 12px; line-height: 38px; text-decoration: none; color: #c0cdd1; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul#nav li a:hover { color: black; } ul#nav li a:active { background-color: transparent !important; } ul#nav li.current a { background: #f26522; color: white; } /* /* h. Content Styles /* =================================================================== */ #content { background: white; padding-top: 66px; padding-bottom: 102px; } #content #main { padding-top: 6px; } #content #sidebar { padding-top: 12px; padding-left: 30px; } /* sibebar styles -------------------------------------------------------------------- */ #sidebar h5 { font: 14px/24px "raleway-heavy", sans-serif; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; } #sidebar .widget { margin-bottom: 15px; } /* search */ #sidebar .widget_search { padding-top: 0; margin-bottom: 24px; } #sidebar .widget_search h5 { display: none; } #sidebar .widget_search form { position: relative; margin: 0; } #sidebar .widget_search .text-search { padding-right: 40px; width: 100%; min-width: 150px; border-radius: 3px; background: white; } #sidebar .widget_search .submit-search { display: none; } /* link list */ #sidebar .widget_categories ul { margin-top: 15px; margin-bottom: 18px; } #sidebar .link-list { padding: 0; margin: 15px 10px 24px 0; list-style: none; } #sidebar .link-list li { font: 14px/24px "merriweather-regular", sans-serif; padding: 8px 0 8px 3px; margin: 0; } #sidebar .link-list li a { color: #7d7e80; } #sidebar .link-list li a:hover { color: #f26522; } /* tag cloud */ #sidebar .tagcloud { margin: 18px 0 24px -12px; padding: 0; font-size: 17px; } #sidebar .tagcloud a { font: 12px/24px "raleway-heavy", sans-serif !important; display: inline-block; float: left; margin: 0 0 12px 12px; padding: 6px 15px; position: relative; text-transform: uppercase; letter-spacing: 1px; border-radius: 3px; background: #ecf0f1; text-decoration: none; letter-spacing: .5px; color: #707273; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #sidebar .tagcloud a:hover { color: white; background: #f26522; } /* photostream */ #sidebar .photostream { list-style: none; margin: 15px 0 24px -15px; padding: 0; overflow: hidden; } #sidebar .photostream li { display: inline-block; margin: 0 0 12px 12px; padding: 0; } #sidebar .photostream li a { display: block; height: 66px; width: 66px; background: #fff; padding: 9px; border: 1px solid #e3e9eb; border-radius: 3px; } #sidebar .photostream li a img { vertical-align: bottom; } /* /* i. Footer Styles /* =================================================================== */ footer { padding-top: 36px; padding-bottom: 42px; font-size: 13px; line-height: 24px; position: relative; color: #3C4142; } footer a, footer a:visited { color: #a43b0a; } footer a:hover, footer a:focus { color: white; } footer h3 { font: 13px/24px "raleway-bold", sans-serif; margin-bottom: 0; color: white; text-transform: uppercase; letter-spacing: 1px; } footer p { margin: 12px 0; } footer .footer-about { padding-right: 60px; } footer .right-cols .columns { width: 50%; word-wrap: break-word; } footer ul { margin: 12px 0; padding: 0; list-style: none; } footer ul li { margin: 0; padding-left: 0; line-height: 24px; } footer ul li a, footer ul li a:visited { color: #3C4142; } footer .copyright { margin: 0; padding: 24px 18px 6px 18px; clear: both; } /* back to top */ footer #go-top { position: fixed; bottom: 0; right: 30px; z-index: 900; display: none; } footer #go-top a { display: block; padding: 12px 30px; background: #d44d0d; color: white; text-align: center; font: 12px/24px "raleway-heavy", sans-serif; text-transform: uppercase; letter-spacing: 2px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } footer #go-top a span { margin-right: 10px; } footer #go-top a:hover { background: #faec09; color: #252525; } /* /* j. Common and shared styles /* =================================================================== */ hr { border: solid #f26522; border-width: 3px 0 0; width: 90px; margin: 11px auto 15px; height: 0; clear: both; text-align: center; } /* section head ---------------------------------------------------------------------- */ .section-head { text-align: center; } .section-head h1 { font: 15px/24px "raleway-heavy", sans-serif; text-transform: uppercase; letter-spacing: 2.5px; color: #252525; margin-bottom: 18px; } .section-head h1 span { color: #f26522; } .section-head p { font: 18px/36px "merriweather-light", sans-serif; width: 95%; color: #707273; margin-left: auto; margin-right: auto; } /* page title ---------------------------------------------------------------------- */ #page-title { background: #12151b url(../images/hero-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important; padding-top: 108px; padding-bottom: 60px; text-align: center; } #page-title .row { max-width: 724px; } #page-title h1 { font: 54px/1.3 "raleway-bold", sans-serif; color: white; letter-spacing: -1px; margin-bottom: 0; text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); } #page-title h1 span { color: #f26522; } #page-title p { color: #cfd9db; margin: 0; text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); } /* entry ---------------------------------------------------------------------- */ .entry { padding-bottom: 12px; margin-bottom: 24px; } .entry header { height: auto; position: static; background: transparent; text-align: left; } .entry header h1 { font: 30px/36px "raleway-bold", sans-serif; margin-bottom: 6px; } .entry header h1 a { color: #252525; } .entry .entry-meta ul { margin: 0 0 6px 3px; color: #8f9091; line-height: 24px; } .entry .entry-meta ul li { display: inline; margin: 0; padding: 0; font-size: 11px; letter-spacing: 1px; font-family: "raleway-regular", sans-serif; text-transform: uppercase; } .entry .entry-meta ul li a { color: #8f9091; } .entry .entry-meta ul .meta-sep { margin: 0 5px; color: #c0cdd1; } .entry .entry-content-media { margin: 24px 0 18px; } /* pagenav ---------------------------------------------------------------------- */ .pagenav { margin: 18px 0 6px; padding: 12px 0 0 0; font: 15px/30px "raleway-regular", sans-serif; } .pagenav a { font: 0/0 a; text-shadow: none; color: transparent; } .pagenav a[rel="next"]:after, .pagenav a[rel="prev"]:before { float: left; text-align: center; display: inline-block; background: transparent; color: #f26522; border-radius: 3px; border: 3px solid #f26522; font-family: 'FontAwesome'; font-size: 16px; padding: 21px 15px; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .pagenav a[rel="next"]:after { content: "\f054"; } .pagenav a[rel="prev"]:before { content: "\f053"; margin-right: 6px; } .pagenav a[rel="next"]:hover:after, .pagenav a[rel="prev"]:hover:before { color: white; background: #f26522; } .entries .pagenav { margin-top: -18px; } /* /* k. Hero Section /* =================================================================== */ #hero { margin-top:-27px; background: #12151b url(../images/hero-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important; padding-top: 66px; padding-bottom: 90px; width: 100%; text-align: center; position: relative; } .ie8 #hero { background: #12151b; } /* Flex slider settings /* ------------------------------------------------------------------ */ .flexslider a:active, .flexslider a:focus { outline: none; } .slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .slides li { margin: 0; padding: 0; } /* Necessary Styles */ .flexslider { position: relative; zoom: 1; margin: 0; padding: 0; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Suggested container for slide animation setups. Can replace this with your own */ .flex-container { zoom: 1; position: relative; } /* Clearfix for .slides */ .slides:before, .slides:after { content: " "; display: table; } .slides:after { clear: both; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child { display: block; } /* Slider Styles */ .slides { zoom: 1; } .slides > li { overflow: hidden; } /* hero slider /* ------------------------------------------------------------------ */ #hero-slider { margin: 108px auto 30px; } #hero-slider .flex-caption { margin: 0 15%; } #hero-slider .flex-caption h1 { font: 54px/1.3 "raleway-semibold", sans-serif; color: white; letter-spacing: -1px; margin-bottom: 36px; text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); } #hero-slider .flex-caption h1 span, #hero-slider .flex-caption h1 a { color: white; display: inline-block; border-bottom: 1px solid #a43b0a; } #hero-slider .flex-caption h1 span:hover, #hero-slider .flex-caption h1 a:hover { border-color: #9a9103; } #hero-slider .flex-caption .button.stroke { margin: 0; padding: 9px 20px; width: auto; text-transform: uppercase; letter-spacing: 1.5px; border-color: #d44d0d; color: white; white-space: nowrap; text-shadow: 0 0px 5px black; -webkit-box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); } #hero-slider .flex-caption .button.stroke:hover { color: white; text-shadow: none; background: #d44d0d !important; } /* Slider Control Nav */ .hero-content .flex-control-nav { width: 80%; margin: 0 auto; display: block; z-index: 889; position: relative; } .hero-content .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .hero-content .flex-control-paging li a { width: 15px; height: 15px; display: block; cursor: pointer; border-radius: 100%; border: 3px solid white; background: transparent; box-shadow: none !important; font: 0/0 a; text-shadow: none; color: transparent; -webkit-box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.5); } .hero-content .flex-control-paging li a:hover { border-color: #f26522; } .hero-content .flex-control-paging li a.flex-active { border-color: #f26522; cursor: default; } /* /* l. Portfolio Section /* =================================================================== */ #portfolio { background: white; padding-top: 120px; } .ie #portfolio .row.items { width: 1140px; } #portfolio .row.items { max-width: 1200px; } /* Portfolio wrapper */ #portfolio-wrapper { margin-top: 36px; } /* portfolio items */ .item .item-wrap { overflow: hidden; position: relative; } .item .item-wrap a { display: block; cursor: pointer; } .item .item-wrap .overlay { background: #ed560e; position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .item .item-wrap img { vertical-align: bottom; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .item .item-wrap .portfolio-item-meta { position: absolute; top: 10%; left: 10%; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; zoom: 1; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .item .item-wrap .portfolio-item-meta h5 { font: 15px/21px "raleway-heavy", sans-serif; margin: 0; color: white; word-wrap: break-word; } .item .item-wrap .portfolio-item-meta p { font: 14px/18px "raleway-semibold", sans-serif; color: #fbcab3; margin: 0; } /* on item hover */ .item:hover .overlay { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } .item:hover .portfolio-item-meta { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; zoom: 1; } .item:hover .item-wrap img { -moz-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } /* /* m. Services Section /* =================================================================== */ #infrastructure { background: #ecf0f1; padding-top: 120px; padding-bottom: 100px; text-align: center; } .service-list { margin: 15px -22px 0 -22px; } .service-list .bgrid { margin-top: 15px; margin-bottom: 15px; padding: 0 22px; } .service-list .icon-part { background: white; color: white; width: 150px; padding: 15px 3px; font-size: 40px; border-radius: 3px; margin: 0 auto; } .service-list h3 { font: 16px/24px "raleway-heavy", sans-serif; padding: 0; } .service-list p { color: #707273; position: relative; top: -6px; } /* /* m. Services Section /* =================================================================== */ #services { background: white; padding-top: 100px; padding-bottom: 50px; text-align: center; } .service-list { margin: 15px -22px 0 -22px; } .service-list .bgrid { margin-top: 15px; margin-bottom: 15px; padding: 0 22px; } .service-list .icon-part { background: white; color: white; width: 150px; padding: 15px 3px; font-size: 40px; border-radius: 3px; margin: 0 auto; } .service-list h3 { font: 12px/24px "raleway-heavy", sans-serif; padding: 0; } .service-list p { color: #707273; position: relative; top: -6px; } /* /* n. About Section /* =================================================================== */ #company { background: #ecf0f1; padding-top: 120px; padding-bottom: 100px; text-align: center; } #company .about-content { max-width: 934px; } #company h3 { font: 16px/36px "raleway-heavy", sans-serif; text-transform: none; padding: 0; margin-bottom: 0; } #company p { color: #707273; } #company .left { padding-right: 30px; } #company .right { padding-left: 30px; } /* Team Section /* -------------------------------------------------------------------- */ #company #team { background: #ecf0f1; margin-top: 66px; padding-top: 78px; padding-bottom: 120px; } #team-wrapper { margin: 24px -18px 0 -18px; } #team-wrapper .bgrid { padding: 0 18px; } #team-wrapper .member { margin-top: 18px; margin-bottom: 36px; } #team-wrapper .member-header { position: relative; margin-bottom: 15px; } #team-wrapper .member-pic { width: 78px; height: 78px; display: inline-block; position: relative; top: 12px; } #team-wrapper .member-pic img { border-radius: 100%; } #team-wrapper .member-name { display: inline-block; padding-top: 9px; margin-left: 12px; } #team-wrapper .member-name h3 { line-height: 24px; margin-top: 0; margin-bottom: 6px; } #team-wrapper .member-name span { position: relative; top: -6px; font-size: 13px; line-height: 18px; color: #f26522; display: block; } #team-wrapper .member-social { font-size: 18px; font-weight: normal; line-height: 24px; margin: 12px 0 0 0; padding: 0; } #team-wrapper .member-social li { display: inline-block; margin-right: 15px; } #team-wrapper .member-social li a { color: #252525; } #team-wrapper .member-social li a:hover { color: #f26522; } /* =================================================================== */ #team { background: white; padding-top: 100px; padding-bottom: 50px; text-align: center; } #team .about-content { max-width: 934px; } #team h3 { font: 16px/36px "raleway-heavy", sans-serif; text-transform: none; padding: 0; margin-bottom: 0; } #team p { color: #707273; } #team .left { padding-right: 30px; } #team .right { padding-left: 30px; } /* /* o. Journal Section /* =================================================================== */ #journal { color:white; background: #a43b0a url(../images/blog-bg.jpg) no-repeat bottom center fixed; -webkit-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important; padding-top: 120px; padding-bottom: 108px; width: 100%; } #journal h1, #journal h3, #journal h3 a { color: white; } #journal h3 { font: 16px/27px "raleway-heavy", sans-serif; padding: 0; margin: 0; } #journal h5 { font-size: 13px; color: #f26522; margin: 0; } #journal p { color: #fffcfb; } #journal #blog-wrapper { margin: 24px 0 0 0; } #journal #blog-wrapper .bgrid { padding: 0 18px; } #journal #blog-wrapper article { margin-bottom: 24px; } /* /* p. Contact Section /* =================================================================== */ #contact { background: #12151b; padding-top: 120px; padding-bottom: 102px; overflow: hidden; } #contact .row { max-width: 784px; } #contact h1 { color: white; } /* contact form */ #contact form { margin-top: 30px; margin-bottom: 30px; } #contact label { font: 14px/30px "raleway-heavy", sans-serif; color: #7d7e80; display: none; } #contact label span { color: #f26522; display: inline-block; } #contact input, #contact textarea, #contact select { padding: 18px 20px; margin-bottom: 42px; font-size: 15px; width: 100%; background: #12151b; border: 3px solid #575859; } #contact textarea { height: 252px; } #contact input:focus, #contact textarea:focus, #contact select:focus { color: white; border-color: white; } #contact button.submit { text-transform: uppercase; letter-spacing: 3px; padding: 18px 20px; margin-bottom: 36px; line-height: 24px; display: block; border: 3px solid #f26522; color: #f26522; background: transparent; } #contact button.submit:hover { color: white; background: #f26522; } /* for ie9 and lower */ .ie #contact label { display: block; } .ie #contact input, .ie #contact select { margin-bottom: 6px; } .ie #contact textarea { margin-bottom: 48px; } /* messages */ #message-warning, #message-success { display: none; background: black; padding: 24px 24px; margin-bottom: 42px; border-radius: 3px; } #message-warning { color: #ff6163; } #message-success { color: #ffd900; } #message-warning i, #message-success i { margin-right: 10px; } #image-loader { display: none; text-align: center; } #image-loader img { height: 44px; width: 44px; } /* Style Placeholder Text */ ::-webkit-input-placeholder { color: #575859; } :-moz-placeholder { /* Firefox 18- */ color: #575859; } ::-moz-placeholder { /* Firefox 19+ */ color: #575859; } :-ms-input-placeholder { color: #575859; } .placeholder { color: #575859 !important; } /* /* q. Blog Entry /* =================================================================== */ .entry .tags { margin-top: 18px; font-family: "raleway-regular", sans-serif; color: #707273; } .entry .tags a { font-family: "raleway-heavy", sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #f26522; } .entry .tags a:hover { color: #12151b; } /* comments -------------------------------------------------------------------- */ #comments { padding-top: 12px; padding-bottom: 12px; } #comments h3 { font: 20px/30px "raleway-bold", sans-serif; margin-bottom: 6px; } .commentlist { margin: 30px 0 54px 0; padding: 0; } .commentlist > li { position: relative; list-style: none; margin: 0; padding: 18px 0 18px 0; padding-left: 14%; } .commentlist li .avatar { position: absolute; left: 0px; display: block; height: 48px; width: 48px; } .commentlist li .avatar img { margin-top: 6px; height: 48px; width: 48px; border-radius: 100%; } .commentlist li .comment-info cite { font: 14px/30px "raleway-heavy", sans-serif; color: #252525; } .commentlist li .comment-info .comment-meta { font-size: 13px; line-height: 24px; display: block; color: #707273; } .commentlist li .comment-info .comment-meta .reply { font-family: "raleway-bold", sans-serif; } .commentlist li .comment-info .comment-meta .sep { margin: 0 5px; color: #7d7e80; } .commentlist li .comment-text { clear: both; margin: 18px 0 0 0; padding: 0; } .commentlist li ul.children { margin: 0; padding: 18px 0 0 0; list-style: none; } .commentlist li ul.children li { padding-left: 5%; padding-top: 18px; } /* comment form -------------------------------------------------------------------- */ #comments form { margin-top: 36px; } #comments form fieldset { padding: 0; } #comments form label { padding-left: 24px; width: 41.66667%; float: right; } #comments form div { margin: 12px 0 18px 0; } #comments form input, #comments form textarea, #comments form select { width: 58.33333%; float: left; } #comments form .message label { display: none; } #comments form textarea { width: 100%; } #comments form span.required { color: #f26522; font-size: 15px; } #comments form button { padding-left: 24px; padding-right: 24px; color: #f26522 !important; border-color: #f26522 !important; text-transform: uppercase; letter-spacing: 1px; margin: 0; } #comments form button:hover { color: white !important; background: #f26522 !important; } /* /* r. Portfolio Entry /* =================================================================== */ .portfolio-content .entry header { text-align: center; } .portfolio-content .entry .entry-content-media { margin: 30px 0 0; } .portfolio-content .entry .entry-content-media img { margin-bottom: 24px; } .portfolio-content .entry .pagenav { margin-top: 0; } .portfolio-content .entry .pagenav a[rel="next"]:after { float: right; } /* more projects /* ------------------------------------------------------------------- */ .more-projects { margin-top: 60px; } .more-projects h1 { font: 30px/36px "raleway-bold", sans-serif; text-align: center; margin-bottom: 0; } .more-projects .portfolio-wrapper { text-align: left; }