/* 织梦帮（dedesos.com）做最好的织梦整站模板下载网站 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Correct inline-block display not defined in IE 8/9.
* 2. Normalize vertical alignment of progress in Chrome, Firefox, and Opera.
*/
audio, canvas, progress, video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying audio without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address [hidden] styling not present in IE 8/9/10.
* Hide the template element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden], template {
display: none;
}
/**
* 1. Address margins set differently in Firefox 4+, Safari, and Chrome.
* 2. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 3. Correct font properties not being inherited.
*/
button, input, optgroup, select, textarea {
padding: 0;
margin: 0; /* 1 */
color: inherit; /* 2 */
font: inherit; /* 3 */
}
/**
* Address overflow set to hidden in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent text-transform inheritance for button and select.
* All other form control elements do not inherit text-transform values.
* Correct button style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct select style inheritance in Firefox.
*/
button, select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native audio
* and video controls.
* 2. Correct inability to style clickable input types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* input and others.
*/
button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
padding: 0;
border: 0;
}
/**
* Address Firefox 4+ setting line-height on input using !important in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to content-box in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* font-size values of the input, it causes the cursor style of the
* decrement button to change from default to text.
*/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address appearance set to searchfield in Safari and Chrome.
* 2. Address box-sizing set to border-box in Safari and Chrome
* (include -moz to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-webkit-box-sizing: content-box; /* 2 */
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and textfield appearance).
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Always force vertical scroll
* 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
* 3. For animations
*/
html {
overflow-y: scroll; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-font-smoothing: antialiased;
overflow-x: hidden; /* 3 */
}
/**
* Name: grid.css
*
* The grid the template is build on.
*
* T.O.C
*
* =Base grid
* =Extra small devices: Phones (< 768px)
* =Portrait and landscape
* =Landscape
* =Small devices: Tablets (>= 768px)
* =Medium devices: Desktops (>= 992px )
* =Large devices: Desktops (>= 1200px )
* =Clearing
*
*/
/* ==========================================================================
=Base grid
========================================================================== */
.container, .container-fluid {
position: relative;
margin-right: auto;
margin-left: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
padding-right: 15px;
padding-left: 15px;
}
.row {
position: relative;
margin-right: -15px;
margin-left: -15px;
}
/**
* Automatically clear rows
*/
.row:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@media (min-width: 768px) {
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
}
.span12 {
width: 100%;
}
.span11 {
width: 91.66666667%;
}
.span10 {
width: 83.33333333%;
}
.span9 {
width: 75%;
}
.span8 {
width: 66.66666667%;
}
.span7 {
width: 58.33333333%;
}
.span6 {
width: 50%;
}
.span5 {
width: 41.66666667%;
}
.span4 {
width: 33.33333333%;
}
.span3 {
width: 25%;
}
.span2 {
width: 16.66666667%;
}
.span1 {
width: 8.33333333%;
}
.offset12 {
margin-left: 100%;
}
.offset11 {
margin-left: 91.66666667%;
}
.offset10 {
margin-left: 83.33333333%;
}
.offset9 {
margin-left: 75%;
}
.offset8 {
margin-left: 66.66666667%;
}
.offset7 {
margin-left: 58.33333333%;
}
.offset6 {
margin-left: 50%;
}
.offset5 {
margin-left: 41.66666667%;
}
.offset4 {
margin-left: 33.33333333%;
}
.offset3 {
margin-left: 25%;
}
.offset2 {
margin-left: 16.66666667%;
}
.offset1 {
margin-left: 8.33333333%;
}
.offset0 {
margin-left: 0%;
}
}
.visible-phone, .visible-tablet, .visible-desktop, .visible-desktop-large {
display: none !important;
}
.visible-phone-block, .visible-phone-inline, .visible-phone-inline-block, .visible-tablet-block, .visible-tablet-inline, .visible-tablet-inline-block, .visible-desktop-block, .visible-desktop-inline, .visible-desktop-inline-block, .visible-desktop-large-block, .visible-desktop-large-inline, .visible-desktop-large-inline-block {
display: none !important;
}
/* ==========================================================================
=Extra small devices: Phones (< 768px)
========================================================================== */
/* =Portrait and landscape
========================================================================== */
@media (max-width: 767px) {
.container {
width: auto;
}
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
width: 100%;
}
.visible-phone {
display: block !important;
}
table.visible-phone {
display: table;
}
tr.visible-phone {
display: table-row !important;
}
th.visible-phone, td.visible-phone {
display: table-cell !important;
}
.visible-phone-block {
display: block !important;
}
.visible-phone-inline {
display: inline !important;
}
.visible-phone-inline-block {
display: inline-block !important;
}
.hidden-phone {
display: none !important;
}
}
/* =Landscape
========================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* ==========================================================================
=Small devices: Tablets (>= 768px)
========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 750px;
}
.visible-tablet {
display: block !important;
}
table.visible-tablet {
display: table;
}
tr.visible-tablet {
display: table-row !important;
}
th.visible-tablet, td.visible-tablet {
display: table-cell !important;
}
.visible-tablet-block {
display: block !important;
}
.visible-tablet-inline {
display: inline !important;
}
.visible-tablet-inline-block {
display: inline-block !important;
}
.hidden-tablet {
display: none !important;
}
}
/* ==========================================================================
=Medium devices: Desktops (>= 992px )
========================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
.container {
width: 970px;
}
.visible-desktop {
display: block !important;
}
table.visible-desktop {
display: table;
}
tr.visible-desktop {
display: table-row !important;
}
th.visible-desktop, td.visible-desktop {
display: table-cell !important;
}
.visible-desktop-block {
display: block !important;
}
.visible-desktop-inline {
display: inline !important;
}
.visible-desktop-inline-block {
display: inline-block !important;
}
.hidden-desktop {
display: none !important;
}
}
/* ==========================================================================
=Large devices: Desktops (>= 1200px )
========================================================================== */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
.visible-desktop-large {
display: block !important;
}
table.visible-desktop-large {
display: table;
}
tr.visible-desktop-large {
display: table-row !important;
}
th.visible-desktop-large, td.visible-desktop-large {
display: table-cell !important;
}
.visible-desktop-large-block {
display: block !important;
}
.visible-desktop-large-inline {
display: inline !important;
}
.visible-desktop-large-inline-block {
display: inline-block !important;
}
.hidden-desktop-large {
display: none !important;
}
}
/* ==========================================================================
=Clearing
========================================================================== */
/**
* ClearFix Hack
* Usage: add class="fixed" to parents of floated elements
*/
.fixed:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**
* Clear content
* Usage:
*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/**
* Name: elements.css
*
* Styling for all html5 elements
*
* T.O.C
*
* =Typography
* =Links
* =Lists
* =Custom lists
* =Images
* =Tables
* =Forms
* =Responsive Form Inputs
*
*/
/* ==========================================================================
=Typography
========================================================================== */
body {
background-color: #fff;
color: #222;
font: 14px "Open Sans", Arial, sans-serif;
line-height: 25px;
letter-spacing: 0.25px;
}
@media (max-width: 767px) {
/**
* 1. Hide background on mobile devices
*/
body {
background: none; /* 1 */
background-color: #fff;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Microsoft Yahei', Arial, sans-serif;
font-weight: 700;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;
}
h1 {
margin-bottom: 14px;
font-size: 28px;
line-height: 50px;
}
h2 {
margin-bottom: 10px;
font-size: 22px;
line-height: 40px;
}
h3 {
margin-bottom: 8px;
font-size: 18px;
line-height: 34px;
}
h4 {
margin-bottom: 4px;
font-size: 16px;
line-height: 30px;
}
h5 {
font-size: 14px;
line-height: 24px;
}
h6 {
font-size: 12px;
line-height: 21px;
}
p {
margin-bottom: 20px;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}
small {
font-size: 90%;
}
big {
font-size: 125%;
}
sub {
vertical-align: sub;
font-size: 75%;
}
sup {
vertical-align: super;
font-size: 75%;
}
abbr[title] {
border-bottom: 1px dotted #888;
cursor: help;
}
address {
display: block;
margin-bottom: 20px;
}
blockquote {
padding-left: 20px;
border-left: 3px solid #f9b125;
}
blockquote p {
font-weight: 600;
font-style: italic;
}
hr {
height: 0;
border: solid #e6e6e6;
border-width: 1px 0 0 0;
margin: 30px 0;
}
kbd, tt, var, samp, code, pre {
font-family: Monaco, Menlo, Consolas, "Courier New", 'Microsoft Yahei', monospace;
}
code {
padding: 1px 4px;
border: 1px solid #e6e6e6;
border-radius: 3px;
background-color: #f3f3f3;
color: #ff3225;
}
pre {
overflow-x: auto;
display: block;
padding: 20px;
border: 1px solid #e6e6e6;
border-radius: 3px;
margin-bottom: 20px;
background-color: #f3f3f3;
white-space: pre-wrap;
}
mark, ins {
padding: 1px 4px;
border: 1px solid #e6e6e6;
border-radius: 3px;
background-color: #f3f3f3;
text-decoration: none;
}
s, del {
text-decoration: line-through;
}
/* Typography Helper Classes */
/**
* acts like an
*/
.hr {
border-top: 1px solid #e6e6e6;
margin: 30px 0;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-uppercase {
text-transform: uppercase;
}
.text-highlight {
color: #f9b125;
}
.mute {
color: #888;
}
.no-margin-bottom, .last {
margin-bottom: 0 !important;
}
@media (max-width: 767px) {
.last {
margin-bottom: 20px !important;
}
.text-right {
text-align: left;
}
}
/* ==========================================================================
=Links
========================================================================== */
a, a:visited {
color: #f9b125;
text-decoration: none;
}
/**
* 1. Remove the gray background color from active links in IE 10.
*/
a:active {
background: transparent; /* 1 */
}
a:active, a:hover, a:focus {
outline: 0;
text-decoration: underline;
}
/* ==========================================================================
=Lists
========================================================================== */
ul, ol {
margin-bottom: 20px;
list-style-position: inside;
}
li > ul, li > ol {
margin-bottom: 0;
margin-left: 30px;
}
li {
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dl {
margin-bottom: 20px;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 20px;
}
/* List Helper Classes */
ul.last, ol.last, dl.last {
margin-bottom: 0;
}
@media (max-width: 767px) {
ul.last, ol.last {
margin-bottom: 20px;
}
}
/* =Custom lists
========================================================================== */
/**
* Custom lists
*
* 1. unstyled list
* 2. list with squares for bullets
* 3. list with discs for bullets
*
*/
ul.unstyled {
list-style-type: none;
} /* 1 */
ul.square {
list-style-type: square;
} /* 2 */
ul.circle {
list-style-type: circle;
} /* 3 */
/**
* FontAwesome lists
*
* 1. Arrow list
*
*/
ul.arrow {
list-style: none;
} /* 1 */
ul.arrow li:before {
position: relative;
top: 2px;
width: auto;
height: auto;
margin-right: 12px;
color: #f9b125;
font-family: 'FontAwesome';
font-size: 16px;
font-weight: 400;
}
ul.arrow li:before {
content: "\f054";
}
ul.arrow li {
margin-bottom: 10px;
}
ul.arrow li:last-child {
margin-bottom: 0;
}
/* ==========================================================================
=Images
========================================================================== */
img {
max-width: 100%;
height: auto;
border: none;
vertical-align: middle;
}
.round-img {
border-radius: 50%;
}
/* ==========================================================================
=Tables
========================================================================== */
/*
table,
th,
td { border: 1px solid #e6e6e6; }
*/
/**
* 1. Prevents HTML tables from becoming too wide
*/
/*
table {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
margin-bottom: 20px;
table-layout: fixed;
width: 100%;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
caption { margin-bottom: 20px; }
th {
border-width: 0 1px 1px 0;
font-weight: 700;
}
td { border-width: 0 1px 1px 0; }
th,
td { padding: 8px; }*/
@media (max-width: 480px) {
/**
* 1. Force table to not be like tables anymore
*/
table, thead, tbody, th, td, tr {
display: block; /* 1 */
}
/**
* Hide table headers
*/
th {
position: absolute;
top: -9999px;
left: -9999px;
}
td:first-child {
border-top: none !important;
}
}
/* ==========================================================================
=Forms
========================================================================== */
form {
}
fieldset {
}
fieldset legend {
padding: 0 10px;
margin: 0;
margin-left: -2px;
background: #fff;
font-weight: 700;
}
::-moz-placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder {
color: #888;
}
label {
display: block;
margin-bottom: 5px;
}
/**
* 1. we need to supply the font color for situations when you place the inputs in a div that has color:#fff
* normally because of the #fff the text in inputs would not be visible but giving the color explicitly here ovrwrites that
*/
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea {
display: block;
width: 100%;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 20px;
border: 2px solid #e6e6e6;
margin-bottom: 25px;
background-color: #fff;
color: #222; /* 1 */
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {
border-color: #f9b125;
outline: none;
}
input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="color"]:disabled, textarea:disabled {
background-color: #f3f3f3;
cursor: not-allowed;
}
input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"], input[type="password"][disabled], input[type="password"][readonly], fieldset[disabled] input[type="password"], input[type="date"][disabled], input[type="date"][readonly], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], input[type="datetime"][readonly], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], input[type="datetime-local"][readonly], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], input[type="month"][readonly], fieldset[disabled] input[type="month"], input[type="week"][disabled], input[type="week"][readonly], fieldset[disabled] input[type="week"], input[type="email"][disabled], input[type="email"][readonly], fieldset[disabled] input[type="email"], input[type="number"][disabled], input[type="number"][readonly], fieldset[disabled] input[type="number"], input[type="search"][disabled], input[type="search"][readonly], fieldset[disabled] input[type="search"], input[type="tel"][disabled], input[type="tel"][readonly], fieldset[disabled] input[type="tel"], input[type="time"][disabled], input[type="time"][readonly], fieldset[disabled] input[type="time"], input[type="url"][disabled], input[type="url"][readonly], fieldset[disabled] input[type="url"], input[type="color"][disabled], input[type="color"][readonly], fieldset[disabled] input[type="color"], textarea[disabled], textarea[readonly], fieldset[disabled] textarea {
background-color: #f3f3f3;
cursor: not-allowed;
}
textarea[rows] {
height: auto;
}
/**
* 1. Disallow resize out of parent
*/
textarea {
max-width: 100%; /* 1 */
}
/**
* 1. we need to supply the font color for situations when you place the inputs in a div that has color:#fff
* normally because of the #fff the text in inputs would not be visible but giving the color explicitly here ovrwrites that
*/
select {
padding: 10px 20px;
height: 42px;
width: 100%;
border: 1px solid #e6e6e6;
background-color: #fff;
-webkit-appearance: none !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #222; /* 1 */
}
select:disabled {
background-color: #f3f3f3;
cursor: not-allowed;
}
select:focus {
border-color: #bbb;
}
select[multiple] {
height: auto;
}
input[type="range"] {
width: 100%;
}
input[type="file"], input[type="checkbox"], input[type="radio"], select {
margin: 0 0 10px;
}
input[type="checkbox"] + label, input[type="radio"] + label {
display: inline-block;
margin-right: 10px;
margin-bottom: 0;
margin-left: 5px;
vertical-align: baseline;
}
input[type="file"] {
width: 100%;
}
button, input[type="reset"], input[type="submit"], input[type="button"] {
position: relative;
display: inline-block;
padding: 12px 25px;
border: 1px solid #f9b125;
background-color: #f9b125;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
color: #fff;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
}
input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
background-color: #ee9f23;
}
/* =Responsive Form Inputs
========================================================================== */
/**
* 1. Reset float inherited from .span*
* 2. Change padding inherited from .span* with the one set for inputs
*/
button[class*="span"], input[type="reset"][class*="span"], input[type="submit"][class*="span"], input[type="button"][class*="span"], input[type="range"][class*="span"], input[type="color"][class*="span"], input[type="text"][class*="span"], input[type="password"][class*="span"], input[type="date"][class*="span"], input[type="datetime"][class*="span"], input[type="datetime-local"][class*="span"], input[type="month"][class*="span"], input[type="week"][class*="span"], input[type="email"][class*="span"], input[type="number"][class*="span"], input[type="search"][class*="span"], input[type="tel"][class*="span"], input[type="time"][class*="span"], input[type="url"][class*="span"], textarea[class*="span"], select[class*="span"] {
float: none; /* 1 */
padding: 10px 20px; /* 2 */
}
@media (min-width: 767px) {
button.span12, input[type="range"].span12, input[type="color"].span12, input[type="reset"].span12, input[type="submit"].span12, input[type="button"].span12, input[type="text"].span12, input[type="password"].span12, input[type="date"].span12, input[type="datetime"].span12, input[type="datetime-local"].span12, input[type="month"].span12, input[type="week"].span12, input[type="email"].span12, input[type="number"].span12, input[type="search"].span12, input[type="tel"].span12, input[type="time"].span12, input[type="url"].span12, textarea.span12, select.span12 {
width: 100%;
}
button.span11, input[type="range"].span11, input[type="color"].span11, input[type="reset"].span11, input[type="submit"].span11, input[type="button"].span11, input[type="text"].span11, input[type="password"].span11, input[type="date"].span11, input[type="datetime"].span11, input[type="datetime-local"].span11, input[type="month"].span11, input[type="week"].span11, input[type="email"].span11, input[type="number"].span11, input[type="search"].span11, input[type="tel"].span11, input[type="time"].span11, input[type="url"].span11, textarea.span11, select.span11 {
width: 91.66666667%;
}
button.span10, input[type="range"].span10, input[type="color"].span10, input[type="reset"].span10, input[type="submit"].span10, input[type="button"].span10, input[type="text"].span10, input[type="password"].span10, input[type="date"].span10, input[type="datetime"].span10, input[type="datetime-local"].span10, input[type="month"].span10, input[type="week"].span10, input[type="email"].span10, input[type="number"].span10, input[type="search"].span10, input[type="tel"].span10, input[type="time"].span10, input[type="url"].span10, textarea.span10, select.span10 {
width: 83.33333333%;
}
button.span9, input[type="range"].span9, input[type="color"].span9, input[type="reset"].span9, input[type="submit"].span9, input[type="button"].span9, input[type="text"].span9, input[type="password"].span9, input[type="date"].span9, input[type="datetime"].span9, input[type="datetime-local"].span9, input[type="month"].span9, input[type="week"].span9, input[type="email"].span9, input[type="number"].span9, input[type="search"].span9, input[type="tel"].span9, input[type="time"].span9, input[type="url"].span9, textarea.span9, select.span9 {
width: 75%;
}
button.span8, input[type="range"].span8, input[type="color"].span8, input[type="reset"].span8, input[type="submit"].span8, input[type="button"].span8, input[type="text"].span8, input[type="password"].span8, input[type="date"].span8, input[type="datetime"].span8, input[type="datetime-local"].span8, input[type="month"].span8, input[type="week"].span8, input[type="email"].span8, input[type="number"].span8, input[type="search"].span8, input[type="tel"].span8, input[type="time"].span8, input[type="url"].span8, textarea.span8, select.span8 {
width: 66.66666667%;
}
button.span7, input[type="range"].span7, input[type="color"].span7, input[type="reset"].span7, input[type="submit"].span7, input[type="button"].span7, input[type="text"].span7, input[type="password"].span7, input[type="date"].span7, input[type="datetime"].span7, input[type="datetime-local"].span7, input[type="month"].span7, input[type="week"].span7, input[type="email"].span7, input[type="number"].span7, input[type="search"].span7, input[type="tel"].span7, input[type="time"].span7, input[type="url"].span7, textarea.span7, select.span7 {
width: 58.33333333%;
}
button.span6, input[type="range"].span6, input[type="color"].span6, input[type="reset"].span6, input[type="submit"].span6, input[type="button"].span6, input[type="text"].span6, input[type="password"].span6, input[type="date"].span6, input[type="datetime"].span6, input[type="datetime-local"].span6, input[type="month"].span6, input[type="week"].span6, input[type="email"].span6, input[type="number"].span6, input[type="search"].span6, input[type="tel"].span6, input[type="time"].span6, input[type="url"].span6, textarea.span6, select.span6 {
width: 50%;
}
button.span5, input[type="range"].span5, input[type="color"].span5, input[type="reset"].span5, input[type="submit"].span5, input[type="button"].span5, input[type="text"].span5, input[type="password"].span5, input[type="date"].span5, input[type="datetime"].span5, input[type="datetime-local"].span5, input[type="month"].span5, input[type="week"].span5, input[type="email"].span5, input[type="number"].span5, input[type="search"].span5, input[type="tel"].span5, input[type="time"].span5, input[type="url"].span5, textarea.span5, select.span5 {
width: 41.66666667%;
}
button.span4, input[type="range"].span4, input[type="color"].span4, input[type="reset"].span4, input[type="submit"].span4, input[type="button"].span4, input[type="text"].span4, input[type="password"].span4, input[type="date"].span4, input[type="datetime"].span4, input[type="datetime-local"].span4, input[type="month"].span4, input[type="week"].span4, input[type="email"].span4, input[type="number"].span4, input[type="search"].span4, input[type="tel"].span4, input[type="time"].span4, input[type="url"].span4, textarea.span4, select.span4 {
width: 33.33333333%;
}
button.span3, input[type="range"].span3, input[type="color"].span3, input[type="reset"].span3, input[type="submit"].span3, input[type="button"].span3, input[type="text"].span3, input[type="password"].span3, input[type="date"].span3, input[type="datetime"].span3, input[type="datetime-local"].span3, input[type="month"].span3, input[type="week"].span3, input[type="email"].span3, input[type="number"].span3, input[type="search"].span3, input[type="tel"].span3, input[type="time"].span3, input[type="url"].span3, textarea.span3, select.span3 {
width: 25%;
}
button.span2, input[type="range"].span2, input[type="color"].span2, input[type="reset"].span2, input[type="submit"].span2, input[type="button"].span2, input[type="text"].span2, input[type="password"].span2, input[type="date"].span2, input[type="datetime"].span2, input[type="datetime-local"].span2, input[type="month"].span2, input[type="week"].span2, input[type="email"].span2, input[type="number"].span2, input[type="search"].span2, input[type="tel"].span2, input[type="time"].span2, input[type="url"].span2, textarea.span2, select.span2 {
width: 16.66666667%;
}
button.span1, input[type="range"].span1, input[type="color"].span1, input[type="reset"].span1, input[type="submit"].span1, input[type="button"].span1, input[type="text"].span1, input[type="password"].span1, input[type="date"].span1, input[type="datetime"].span1, input[type="datetime-local"].span1, input[type="month"].span1, input[type="week"].span1, input[type="email"].span1, input[type="number"].span1, input[type="search"].span1, input[type="tel"].span1, input[type="time"].span1, input[type="url"].span1, textarea.span1, select.span1 {
width: 8.33333333%;
}
}
/**
* Name: layout.css
*
* Styling for the layout of the pages - header, footer, page sections etc.
*
* T.O.C
*
* =Wrap
* =Header Top
* =Header
* =Logo
* =Menu
* =Menu Basics
* =Menu Skin
* =DropDown
* =Mega Menu Section
* =Menu Arrows
* =Mobile Menu
* =Mobile menu trigger
* =Custom search form
* =Sticky Header
* =Content
* =Page Header
* =Fullwidth Section
* =Footer Top
* =Footer
* =Footer Bottom
* =Back to top
* =Misc
*
*/
/* ==========================================================================
=Wrap
========================================================================== */
#wrap {
position: relative;
background-color: #fff;
}
@media (max-width: 767px) {
#wrap {
}
}
/* ==========================================================================
=Header Top
========================================================================== */
#header-top {
padding: 10px 0;
background-color: #f3f3f3;
}
@media (max-width: 767px) {
#header-top {
}
}
/* ==========================================================================
=Header
========================================================================== */
#header {
margin: 0 auto;
}
/* ==========================================================================
=Logo
========================================================================== */
#logo {
padding: 44px 0 79px 0;
}
/**
* 1. we need the to be only the size of it's child ![]()
element
* 2. it shouldn't extend beyond the size of it's parent if it's child ![]()
is very large e.g 1000x1000 px
*/
#logo a {
display: inline-block; /* 1 */
max-width: 100%; /* 2 */
}
#logo img {
display: block;
}
@media (min-width: 768px) and (max-width: 991px) {
#logo {
padding: 25px 0;
}
}
@media (max-width: 767px) {
/**
* 1. on mobile devices logo padding right needs to be the width of the
* mobile menu trigger + some spacing so as to not let the logo
* overlap the mobile menu trigger
*/
#logo {
padding: 25px 50px 25px 0; /* 1 */
}
}
/* ==========================================================================
=Menu
========================================================================== */
/* =Menu Basics
========================================================================== */
.sf-menu, .sf-menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.sf-menu > li {
float: left;
}
.sf-menu > li > a {
position: relative;
display: block;
}
/**
* 1. z-index is 1025 because the sticky menu is 1020
*/
.sf-menu .sf-mega, .sf-menu li.dropdown ul {
position: absolute;
z-index: 1025; /* 1 */
top: 100%;
left: 0;
display: none;
}
.sf-menu li.dropdown {
position: relative;
}
.sf-menu li.dropdown ul ul {
top: -20px;
left: 100%;
}
.sf-menu li:hover > .sf-mega, .sf-menu li.sfHover > .sf-mega, .sf-menu li.dropdown:hover > ul, .sf-menu li.dropdown.sfHover > ul {
display: block;
}
/* =Menu Skin
========================================================================== */
.sf-menu {
float: right;
}
.sf-menu a {
display: block;
padding: 10px 0;
border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
font: 14px 'Open Sans', Arial, sans-serif;
letter-spacing: 0.5px;
color: #fff;
text-decoration: none;
}
.sf-menu li.dropdown a {
padding: 10px 40px;
}
.sf-menu li:last-child > a {
border-bottom: none;
}
.sf-menu > li > a, .sf-menu > li.dropdown > a {
padding: 76px 0 77px 0;
border: none;
margin-right: 10px;
color: #4d4d4d;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.sf-menu > li:last-child > a, .sf-menu > li:last-child.dropdown > a {
margin-right: 0;
}
.sf-menu > li > a span {
display: inline-block;
padding: 10px 15px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.sf-menu > li a i {
margin-right: 5px;
}
.sf-menu > li.current > a span, .sf-menu li.sfHover > a span, .sf-menu a:hover span, .sf-menu li.sfHover a:hover span {
background-color: #f9b125;
color: #fff;
text-decoration: none;
}
/* =DropDown
========================================================================== */
/**
* 1. allow long menu items to determine submenu width
*/
.sf-menu li.dropdown ul {
min-width: 230px; /* 1 */
padding: 20px 0;
background-color: #222;
}
.sf-menu > li.dropdown ul {
border-bottom: 10px solid #f9b125;
}
.sf-menu > li.dropdown ul li.sfHover > a, .sf-menu > li.dropdown ul li a:hover {
color: #f9b125;
}
/* =Mega Menu Section
========================================================================== */
.sf-mega {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 0;
border-bottom: 10px solid #f9b125;
background-color: #222;
color: #fff;
}
.sf-mega-section {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 30px;
}
.sf-mega-section:last-child {
border-right: none;
}
/**
* 1. set mega menu section size, as a percentage of the mega menu width
*/
.sf-mega.sf-mega-1-col .sf-mega-section {
width: 100%;
} /* 1 */
.sf-mega.sf-mega-2-col .sf-mega-section {
width: 50%;
}
.sf-mega.sf-mega-3-col .sf-mega-section {
width: 33.3333333333%;
}
.sf-mega.sf-mega-4-col .sf-mega-section {
width: 25%;
}
.sf-mega-section-title {
margin: 10px 0 20px 0;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.sf-mega-section ul li a:hover {
color: #f9b125;
}
/* =Menu Arrows
========================================================================== */
.sf-arrows .sf-with-ul:after {
position: absolute;
top: 50%;
right: 5px;
display: none;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #888;
margin-top: -2px;
content: "";
}
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after, .sf-arrows > .current > .sf-with-ul:after {
border-top-color: #fff;
}
.sf-arrows ul .sf-with-ul:after {
display: block;
border-color: transparent;
border-left-color: #fff;
margin-top: -5px;
margin-right: 10px;
}
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color: #f9b125;
}
@media (min-width: 768px) and (max-width: 991px) {
#menu {
display: none;
}
}
@media (max-width: 767px) {
#menu {
display: none;
}
}
/* ==========================================================================
=Mobile Menu
========================================================================== */
#mobile-menu {
border-bottom: 1px solid #fff;
margin-bottom: 0;
background-color: #f9b125;
color: #fff;
}
#mobile-menu li {
display: block;
margin: 0;
}
#mobile-menu > li > ul, #mobile-menu > li > ul > li > ul {
display: none;
margin-left: 0;
}
#mobile-menu .sf-mega {
display: none;
padding: 0;
border: none;
margin: 0;
background-color: #f9b125;
color: #fff;
}
#mobile-menu .sf-mega-section {
float: none;
width: 100%;
padding: 0;
border: none;
}
#mobile-menu .sf-mega-section-title {
padding: 15px 20px;
border-top: 1px solid #fff;
}
#mobile-menu .sf-mega-section ul {
margin-left: 0;
}
#mobile-menu li a {
position: relative;
display: block;
padding: 15px 25px;
border-top: 1px solid #fff;
color: #fff;
font-size: 13px;
text-align: left;
text-decoration: none;
}
#mobile-menu ul {
margin-bottom: 0;
}
#mobile-menu ul a {
padding-left: 45px;
}
#mobile-menu ul li ul a {
padding-left: 65px;
}
#mobile-menu .mobile-menu-submenu-arrow {
position: absolute;
top: 0;
right: 0;
width: 70px;
height: 100%;
border-left: 1px solid #fff;
color: #fff;
font-size: 20px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#mobile-menu .mobile-menu-submenu-arrow:hover {
background-color: #ee9f23;
}
#mobile-menu li a:hover {
}
#mobile-menu {
display: none;
}
/* ==========================================================================
=Mobile menu trigger
========================================================================== */
#mobile-menu-trigger {
float: right;
display: none;
font-size: 32px;
}
@media (min-width: 768px) and (max-width: 991px) {
#mobile-menu-trigger {
display: block;
margin-top: 55px;
margin-right: 0;
}
}
@media (max-width: 767px) {
#mobile-menu-trigger {
position: absolute;
top: 45px;
right: 5px;
display: block;
padding: 10px;
margin-top: 0;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#mobile-menu-trigger {
}
}
/* ==========================================================================
=Custom search form
========================================================================== */
#custom-search-form + nav {
margin-right: 40px;
}
#custom-search-form {
position: absolute;
top: 71px;
right: 0;
z-index: 15;
}
#custom-search-form #s {
height: 46px;
width: 34px;
padding-right: 0;
border: none;
background: #fff url(../images/bg-search.png) no-repeat 10px 15px;
color: #022b36;
}
#custom-search-form #s:hover {
cursor: pointer;
}
#custom-search-form #s.open {
border: 2px solid #e6e6e6;
background: #fff;
}
#custom-search-submit {
position: absolute;
top: 0;
right: 0;
background: #f9b125 url(../images/bg-search-2.png) no-repeat center center;
display: none;
}
#custom-search-form #s.open + #custom-search-submit {
display: block;
}
@media (min-width: 768px) and (max-width: 991px) {
#custom-search-form {
top: 50px;
right: 60px;
}
}
@media (max-width: 767px) {
/**
* Hide search on mobile
*/
/**
* 1. !important is needed to overwrite the display:block added by the js
*/
#custom-search-form {
display: none !important; /* 1 */
}
}
/* ==========================================================================
=Sticky Header
========================================================================== */
@media (min-width: 1025px) {
/**
* 1. The height of the #header-wrap should be increased or decreased to accommodate the logo
*/
#header-wrap {
position: relative;
height: 190px; /* 1 */
}
#header {
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
}
/**
* 1. The z-index has to be 1020 so it is bigger than the back to top buttons z-index that is 1010
*/
#header.stuck {
position: fixed;
z-index: 1020; /* 1 */
top: 0;
width: 100%;
padding: 5px 0 0 0;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #fff;
-webkit-transition: padding 0.3s;
transition: padding 0.3s;
}
#header.stuck #logo {
padding: 5px 0 15px 0;
}
#header.stuck .sf-menu > li > a, #header.stuck .sf-menu > li.dropdown > a {
padding: 35px 0 40px;
}
#header.stuck .sf-arrows .sf-with-ul:after {
margin-top: -5px;
}
#header.stuck #custom-search-button {
top: 12px;
}
#header.stuck #custom-search-form {
top: 30px;
}
}
/* ==========================================================================
=Content
========================================================================== */
#content {
padding-bottom: 40px;
}
/* ==========================================================================
=Page Header
========================================================================== */
#page-header {
padding: 30px 0;
margin-bottom: 100px;
background: url(../images/bg-page-header.jpg) no-repeat center center;
text-align: center;
}
#page-header h5 {
margin-bottom: 0;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ==========================================================================
=Fullwidth Section
========================================================================== */
/**
* Full width section
*
* 1. background-image must be supplied using inline css as it is different for every .fullwidth-section
*
*/
.fullwidth-section {
position: relative;
overflow: hidden;
z-index: 0;
padding: 40px 0;
margin-bottom: 100px;
background-color: #f6f6f6;
background-attachment: scroll;
background-repeat: no-repeat; /* 1 */
background-position: 50% 0;
}
.fullwidth-section-content {
position: relative;
z-index: 3;
}
.fullwidth-section-overlay {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
background-position: 0 0;
background-color: rgba(0, 0, 0, 0.5);
}
.fullwidth-section-video {
position: absolute;
overflow: hidden;
z-index: 1;
top: 0;
width: 100%;
height: 100%;
}
.yt-player {
display: none;
}
/**
*
* 1. We add background-size cover so the parallax looks ok if you provide smaller images
*
*/
.parallax.parallax-enabled {
background-attachment: fixed !important;
-webkit-background-size: cover;
background-size: cover; /* 1 */
}
.horizontal-parallax {
background-repeat: repeat;
}
.animated-parallax {
background-repeat: repeat;
}
@media (max-width: 767px) {
.fullwidth-section {
-webkit-background-size: cover;
background-size: cover;
}
}
/* ==========================================================================
=Footer Top
========================================================================== */
#footer-top {
padding: 40px 0;
background: #f9b125 url(../images/bg-footer-top.jpg) no-repeat center center;
color: #fff;
}
#footer-top a {
color: #fff;
}
#footer-top-widget-area-1 {
}
#footer-top-widget-area-2 {
}
#footer-top-widget-area-3 {
}
#footer-top-widget-area-4 {
}
/* ==========================================================================
=Footer
========================================================================== */
#footer {
padding: 85px 0;
background-color: #222;
color: #888;
font-size: 13px;
}
#footer a {
color: #888;
}
#footer-widget-area-1 {
}
#footer-widget-area-2 {
}
#footer-widget-area-3 {
}
#footer-widget-area-4 {
}
/* ==========================================================================
=Footer Bottom
========================================================================== */
#footer-bottom {
padding: 20px 0;
background-color: #1a1a1a;
color: #3e3e3e;
font-size: 13px;
}
#footer-bottom a {
color: #3e3e3e;
}
#footer-bottom-widget-area-1 {
}
#footer-bottom-widget-area-2 {
}
#footer-bottom-widget-area-3 {
}
#footer-bottom-widget-area-4 {
}
/* ==========================================================================
=Back to top
========================================================================== */
#back-to-top {
position: fixed;
z-index: 1010;
right: -40px;
bottom: 20px;
width: 40px;
height: 40px;
background-color: #222;
color: #fafafa;
font-size: 30px;
text-align: center;
text-decoration: none;
opacity: 0.7;
cursor: pointer;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
#back-to-top i {
font-size: 22px;
line-height: 40px;
font-weight: normal;
vertical-align: top;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
#back-to-top:hover {
background-color: rgba(0, 0, 0, 0.7);
}
#back-to-top:hover i {
color: #fff;
}
#back-to-top.visible {
right: 40px;
}
#back-to-top.gone {
right: -40px;
}
/* ==========================================================================
=Misc
========================================================================== */
.javascript-required, .modern-browser-required {
padding: 15px 0;
background-color: #ff3225;
color: #fff;
font-weight: 700;
text-align: center;
}
/**
* Name: components.css
*
* Styling for the components that create the page content: accordion, tabs, pie charts etc.
*
* T.O.C
*
* =Accordions and Toggles
* =Alerts
* =Animations
* =Boxes
* =Buttons
* =Callouts
* =Clients logo
* =Contact form
* =Dividers
* =Dropcaps
* =Galleries
* =Google Maps
* =Headlines
* =Icon Boxes
* =Image Box
* =Info box
* =Milestones
* =Modal window
* =Our Process
* =Pie charts
* =Pricing Tables
* =Progress Bar
* =Revolution Slider
* =Social Media
* =Tabs
* =Testimonials
* =Team Member
* =Portfolio Item
* =Portfolio Filter
* =Portfolio Pagination
* =Portfolio Grid
* =Bx Slider
*
*/
/* ==========================================================================
=Accordions and Toggles
========================================================================== */
/* =Accordion
========================================================================== */
.accordion {
margin-bottom: 50px;
}
.accordion-item {
position: relative;
display: block;
padding: 15px 30px;
border: 2px solid #e6e6e6;
margin-bottom: 25px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.accordion-item {
color: #222;
}
.accordion-item:after {
position: absolute;
top: 15px;
right: 15px;
font-size: 18px;
content: "+";
}
.accordion-item.active:after {
content: "-";
}
.accordion-item:hover, .accordion-item.active {
border-color: #f9b125;
background-color: #f9b125;
color: #fff;
text-decoration: none;
}
.accordion-item-content {
display: none;
padding: 10px 0 40px 0;
}
.accordion-item-content > *:last-child {
margin-bottom: 0;
}
/*
* 1. Clearfix hack
*/
.accordion-item-content:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* =Toggle
========================================================================== */
.toggle {
margin-bottom: 30px;
}
.toggle-item {
position: relative;
display: block;
padding: 15px 30px;
border: 2px solid #e6e6e6;
margin-bottom: 25px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.toggle-item {
color: #222;
}
.toggle-item:after {
position: absolute;
top: 15px;
right: 15px;
font-size: 18px;
content: "+";
}
.toggle-item.active:after {
content: "-";
}
.toggle-item:hover, .toggle-item.active {
border-color: #f9b125;
background-color: #f9b125;
color: #fff;
text-decoration: none;
}
.toggle-item-content {
display: none;
padding: 10px 0 40px 0;
}
.toggle-item-content > *:last-child {
margin-bottom: 0;
}
/*
* 1. Clearfix hack
*/
.toggle-item-content:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* ==========================================================================
=Alerts
========================================================================== */
.alert {
padding: 15px 15px 15px 30px;
margin-bottom: 30px;
background-color: #4b4b4b;
color: #fff;
}
.alert i {
position: relative;
top: 2px;
margin-right: 10px;
font-size: 20px;
}
.alert.info {
background-color: #f6f6f6;
color: #222;
}
.alert.success {
background-color: #e5e5e5;
color: #222;
}
.alert.error {
background-color: #ff3225;
}
.alert.warning {
background-color: #ee9f21;
}
/* ==========================================================================
=Animations
========================================================================== */
.animate {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.animate.visible {
visibility: visible;
}
.animate.hidden {
visibility: hidden;
}
/* ==========================================================================
=Boxes
========================================================================== */
.box {
padding: 30px;
margin-bottom: 30px;
}
.box > *:last-child {
margin-bottom: 0;
}
.box.box-style-1 {
border-radius: 2px;
border: 1px solid #e6e6e6;
}
.box.box-style-2 {
background-color: #f3f3f3;
color: #222;
}
/*
* 1. Clearfix hack
*/
.box:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* ==========================================================================
=Buttons
========================================================================== */
/* =Default Button
========================================================================== */
.btn {
position: relative;
display: inline-block;
padding: 12px 25px 12px 45px;
margin: 0 5px 20px 0;
background-color: #ee9f23;
color: #fff;
font-size: 12px;
line-height: 18px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none !important;
text-transform: uppercase;
vertical-align: middle;
cursor: pointer;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.btn:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 30px solid #f9b125;
content: "";
-webkit-transition: border-left-color 0.3s;
transition: border-left-color 0.3s;
}
a.btn {
color: #fff;
}
.btn:focus {
outline: 0;
}
.btn-large {
padding: 15px 35px 15px 50px;
font-size: 14px;
}
.btn-large:before {
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
}
.btn i, .btn-large i {
float: left;
margin: 2px 8px 0 -4px;
font-size: 14px;
line-height: 14px;
}
.btn:hover {
background: #f9b125;
}
.btn:hover:before {
border-left-color: #ee9f23;
}
/* ==========================================================================
=Callouts
========================================================================== */
.callout {
padding: 30px 0 35px 40px;
border-left: 7px solid #ee9f23;
margin-bottom: 30px;
}
.callout-content {
font-weight: 600;
}
.callout-content h3 {
text-transform: uppercase;
}
.callout-action {
text-align: right;
}
.callout-action .btn {
margin-top: 28px;
}
.callout-content > *:last-child, .callout-action > *:last-child {
margin-bottom: 0;
}
/*
* 1. Clearfix hack
*/
.callout:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
@media (max-width: 767px) {
.callout-action {
text-align: left;
}
}
/* ==========================================================================
=Clients logos
========================================================================== */
.clients-logos {
margin: 50px 0;
list-style: none;
text-align: center;
}
.clients-logos li {
float: left;
width: 20%;
}
/*
* 1. Clearfix hack
*/
.clients-logos:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
@media (max-width: 767px) {
.clients-logos li {
float: none;
width: 100%;
margin-bottom: 10px;
}
.clients-logos li:last-child {
margin-bottom: 0;
}
}
/* ==========================================================================
=Contact form
========================================================================== */
#contact-form {
overflow: hidden;
margin: 40px 0;
}
#contact-form fieldset {
}
label.validation-error {
color: #ff3225;
}
input.validation-error, textarea.validation-error, select.validation-error {
border: 1px solid #e6e6e6;
}
#contact-form #formstatus {
}
#contact-form textarea {
}
/*
* 1. Clearfix hack
*/
#contact-form:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* ==========================================================================
=Dividers
========================================================================== */
.divider {
margin: 30px 0;
}
.divider.single-line {
border-top: 2px solid #e6e6e6;
}
.divider.double-line {
border-top: 4px double #e6e6e6;
}
/* ==========================================================================
=Dropcaps
========================================================================== */
.dropcap {
float: left;
display: block;
margin: 5px 10px 0 0;
font-size: 34px;
line-height: 36px;
}
.dropcap.dropcap-square {
width: 42px;
height: 42px;
border-radius: 2px;
background-color: #f9b125;
color: #ffffff;
font-size: 20px;
line-height: 42px;
text-align: center;
}
.dropcap.dropcap-circle {
width: 42px;
height: 42px;
border-radius: 50%;
background-color: #f9b125;
color: #ffffff;
font-size: 20px;
line-height: 42px;
text-align: center;
}
/* ==========================================================================
=Galleries
========================================================================== */
/* ==========================================================================
=Google Maps
========================================================================== */
.google-map {
width: 100%;
height: 400px;
border-top: 7px solid #f9b125;
}
/**
* 1. needed so that Google Maps controls are not distorted
*/
.google-map img {
max-width: none;
} /* 1 */
.map {
position: relative;
border-top: 7px solid #ee9f23;
margin-bottom: 100px;
}
.map:before {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 0;
height: 0;
border-top: 30px solid #ee9f23;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
content: "";
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
@media (max-width: 767px) {
.map {
padding: 0 20px;
}
.row .map {
padding: 0;
}
}
/* ==========================================================================
=Headlines
========================================================================== */
.headline {
position: relative;
padding-bottom: 10px;
margin-bottom: 100px;
text-align: center;
}
.headline h2 {
margin-bottom: 0;
}
.headline:before {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 80px;
border-bottom: 3px solid #ee9f23;
margin-left: -53px;
content: "";
}
.headline:after {
position: absolute;
bottom: 0;
right: 50%;
display: block;
width: 20px;
border-bottom: 3px solid #ffd694;
margin-right: -52px;
content: "";
}
.headline-2 {
position: relative;
padding-bottom: 10px;
margin-bottom: 50px;
}
.headline-2 h2 {
margin-bottom: 0;
}
.headline-2:before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 80px;
border-bottom: 3px solid #ee9f23;
content: "";
}
.headline-2:after {
position: absolute;
bottom: 0;
left: 85px;
display: block;
width: 20px;
border-bottom: 3px solid #ffd694;
content: "";
}
h1.error-page {
color: #ffd694;
font-size: 340px;
line-height: 220px;
}
h2.error-page {
width: 245px;
height: 245px;
border-radius: 50%;
margin: 0 auto 20px;
background-color: #f9b125;
color: #fff;
font-size: 72px;
line-height: 245px;
text-align: center;
}
h3.error-page {
display: inline-block;
padding: 15px 45px;
margin: 50px 0 100px 0;
background-color: #464646;
color: #fff;
text-transform: uppercase;
}
@media (min-width: 768px) and (max-width: 991px) {
h1.error-page {
font-size: 280px;
line-height: 185px;
}
h2.error-page {
width: 200px;
height: 200px;
line-height: 200px;
}
}
@media (max-width: 767px) {
h1.error-page {
margin-bottom: 50px;
font-size: 280px;
line-height: 185px;
text-align: center;
}
h2.error-page {
width: 200px;
height: 200px;
line-height: 200px;
}
}
/* ==========================================================================
=Icon Boxes
========================================================================== */
/* =Icon Box 1
========================================================================== */
.icon-box-1 {
position: relative;
margin-bottom: 50px;
}
.icon-box-1 > i {
display: block;
margin-bottom: 30px;
color: #f9b125;
font-size: 32px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.icon-box-1 h5 {
position: relative;
padding-bottom: 20px;
margin-bottom: 40px;
text-transform: uppercase;
}
.icon-box-1 h5:before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 80px;
border-bottom: 3px solid #ee9f23;
content: "";
}
.icon-box-1 h5:after {
position: absolute;
bottom: 0;
left: 85px;
display: block;
width: 20px;
border-bottom: 3px solid #f9b125;
content: "";
}
.icon-box-1 h5 a {
color: #222;
}
.icon-box-1 h5 a:hover {
color: #f9b125;
text-decoration: none;
}
.icon-box-1 .icon-box-content {
}
.icon-box-1:hover > i {
color: #222;
}
/* =Icon Box 2
========================================================================== */
.icon-box-2 {
position: relative;
margin-bottom: 50px;
text-align: center;
}
.icon-box-2 > i {
display: block;
margin-bottom: 30px;
color: #f9b125;
font-size: 32px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.icon-box-2 h5 {
margin-bottom: 25px;
text-transform: uppercase;
}
.icon-box-2 h5 a {
color: #222;
}
.icon-box-2 h5 a:hover {
color: #f9b125;
text-decoration: none;
}
.icon-box-2 .icon-box-content {
}
.icon-box-2:hover > i {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/* =Icon Box 3
========================================================================== */
.icon-box-3 {
position: relative;
margin-bottom: 60px;
}
.icon-box-3 > i {
float: left;
margin-right: 20px;
color: #f9b125;
font-size: 32px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.icon-box-3 h5 {
padding-top: 10px;
margin-bottom: 15px;
text-transform: uppercase;
}
.icon-box-3 h5 a {
color: #222;
}
.icon-box-3 h5 a:hover {
color: #f9b125;
text-decoration: none;
}
.icon-box-3 .icon-box-content {
}
.icon-box-3:hover > i {
color: #222;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/* =Icon Box 4
========================================================================== */
.icon-box-4 {
position: relative;
margin-bottom: 60px;
}
.icon-box-4 > i {
float: right;
margin-left: 20px;
color: #f9b125;
font-size: 32px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.icon-box-4 h5 {
padding-top: 10px;
margin-bottom: 15px;
text-align: right;
text-transform: uppercase;
}
.icon-box-4 h5 a {
color: #222;
}
.icon-box-4 h5 a:hover {
color: #f9b125;
text-decoration: none;
}
.icon-box-4 .icon-box-content {
}
.icon-box-4:hover > i {
color: #222;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/* ==========================================================================
=Image Box
========================================================================== */
.image-box {
margin-bottom: 30px;
}
.image-box-img {
margin-bottom: 40px;
}
.image-box-img img {
display: block;
width: 100%;
}
.image-box > *:last-child {
margin-bottom: 0;
}
/* ==========================================================================
=Info box
========================================================================== */
.info-box {
position: relative;
overflow: hidden;
padding: 110px 0 60px 0;
margin-top: 80px;
background-color: #f7f7f7;
}
.info-box-bg-left-right {
margin-bottom: 100px;
}
.info-box-img {
position: absolute;
z-index: 0;
top: 0;
width: 50%;
height: 100%;
}
.info-box-img-left, .info-box-img-right {
position: absolute;
z-index: 0;
top: 0;
width: 25%;
height: 100%;
}
.info-box-bg-left .info-box-img {
left: 0;
background: no-repeat center right;
}
.info-box-bg-right .info-box-img {
right: 0;
background: no-repeat center left;
}
.info-box-img-left {
left: 0;
background: no-repeat center right;
}
.info-box-img-right {
right: 0;
background: no-repeat center left;
}
.info-box-img-left img, .info-box-img-right img, .info-box-img img {
display: none;
}
@media (max-width: 767px) {
.info-box-img-left, .info-box-img-right, .info-box-img {
position: relative;
width: 100%;
background: none !important;
}
.info-box-img-left img, .info-box-img-right img, .info-box-img img {
display: block;
width: 100%;
margin-bottom: 20px;
}
}
/* ==========================================================================
=Milestones
========================================================================== */
.milestone {
position: relative;
margin-bottom: 30px;
}
/*
* 1. Clearfix hack
*/
.milestone:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
.milestone i {
z-index: 2;
margin-right: 10px;
font-size: 32px;
}
.milestone .milestone-content {
z-index: 1;
font-size: 60px;
font-weight: 700;
}
.milestone .milestone-description {
position: relative;
padding-bottom: 15px;
margin-bottom: 45px;
font-size: 18px;
line-height: 34px;
font-weight: 800;
text-transform: uppercase;
}
.milestone .milestone-description:before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 80px;
border-bottom: 3px solid #ee9f23;
content: "";
}
.milestone .milestone-description:after {
position: absolute;
bottom: 0;
left: 85px;
display: block;
width: 20px;
border-bottom: 3px solid #f9b125;
content: "";
}
/* ==========================================================================
=Modal window
========================================================================== */
.white-popup {
position: relative;
width: auto;
max-width: 500px;
padding: 20px;
margin: 20px auto;
background: #fff;
}
/* ==========================================================================
=Our Process
========================================================================== */
/* =Horizontal process
========================================================================== */
.horizontal-process-builder {
position: relative;
margin-bottom: 50px;
list-style: none;
text-align: center;
}
.horizontal-process-builder:before {
position: absolute;
z-index: 1;
top: 65px;
left: 130px;
display: block;
width: 75%;
border-top: 2px solid #222;
content: "";
}
.horizontal-process-builder li {
float: left;
width: 25%;
}
.horizontal-process-builder li i, .horizontal-process-builder li h1, .horizontal-process-builder li img {
position: relative;
z-index: 2;
display: block;
width: 130px;
height: 130px;
overflow: hidden;
border-radius: 50%;
margin: 0 auto 35px;
outline: 20px solid #fff;
background-color: #222;
background-clip: padding-box;
color: #fff;
font-size: 48px;
line-height: 130px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.horizontal-process-builder li:hover i, .horizontal-process-builder li:hover h1 {
background-color: #f9b125;
}
.horizontal-process-builder.three-items li {
width: 33.3333333333%;
}
.horizontal-process-builder.four-items li {
width: 25%;
}
.horizontal-process-builder.five-items li {
width: 20%;
}
.process-description {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.horizontal-process-builder li:hover .process-description {
color: #f9b125;
}
/*
* 1. Clearfix hack
*/
.horizontal-process-builder:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
@media (max-width: 767px) {
.horizontal-process-builder li {
float: none;
width: 100%;
margin-bottom: 40px;
}
.horizontal-process-builder:before {
content: none;
}
.horizontal-process-builder.three-items li {
width: 100%;
}
.horizontal-process-builder.four-items li {
width: 100%;
}
.horizontal-process-builder.five-items li {
width: 100%;
}
}
/* =Vertical process
========================================================================== */
.vertical-process-builder {
position: relative;
margin: 50px 0;
list-style: none;
}
.vertical-process-builder li {
position: relative;
padding-left: 60px;
margin-bottom: 15px;
}
.vertical-process-builder li:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 20px;
height: 20px;
border: 2px solid #f9b125;
border-radius: 50%;
content: "";
}
.vertical-process-builder li:after {
position: absolute;
top: 7px;
left: 7px;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f9b125;
content: "";
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-process-description {
position: relative;
padding-bottom: 10px;
}
.vertical-process-description:before {
position: absolute;
top: 35px;
bottom: 0;
left: -49px;
display: block;
border-left: 2px solid #f9b125;
content: "";
}
.vertical-process-description:after {
position: absolute;
bottom: -10px;
left: -53.5px;
color: #f9b125;
font-family: "FontAwesome";
font-size: 12px;
content: "\f078";
}
.vertical-process-description h5 {
color: #f9b125;
}
.vertical-process-builder li:last-child .vertical-process-description:before, .vertical-process-builder li:last-child .vertical-process-description:after {
display: none;
}
.vertical-process-description > *:last-child {
margin-bottom: 0;
}
.vertical-process-builder li:hover:after {
top: 0;
left: 0;
padding: 7px;
}
/* ==========================================================================
=Pie charts
========================================================================== */
.pie-chart {
position: relative;
margin: 0 auto 30px;
text-align: center;
}
.pie-chart canvas {
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.pie-chart i, .pie-chart .pie-chart-custom-text, .pie-chart .pie-chart-percent {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
text-align: center;
}
.pie-chart img {
max-width: 100%;
vertical-align: middle;
}
.pie-chart .pie-chart-custom-text {
font-size: 18px;
}
.pie-chart .pie-chart-percent {
font-size: 30px;
}
.pie-chart-description {
display: block;
margin-bottom: 30px;
font-size: 14px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
}
/* ==========================================================================
=Pricing Tables
========================================================================== */
.pricing-table {
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 30px 20px 30px;
border: 2px solid #ccc;
margin-bottom: 30px;
text-align: center;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
.pricing-table-header {
}
.pricing-table-header h1 {
display: inline-block;
padding: 30px 20px 20px 20px;
margin-top: -80px;
background-color: #ee9f23;
color: #fff;
font-size: 72px;
line-height: 40px;
font-weight: 400;
letter-spacing: -0.75px;
text-align: center;
}
.pricing-table-header h1 sub {
margin-left: -45px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.pricing-table-header h1 small {
margin-right: -20px;
font-size: 36px;
}
.pricing-table-header h1 sup {
margin-left: -20px;
font-size: 24px;
letter-spacing: 1px;
vertical-align: text-top;
}
.pricing-table-header h4 {
padding: 30px 0 110px 0;
margin: 0 -30px;
background-color: #ccc;
color: #fff;
text-transform: uppercase;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.pricing-table-offer {
margin-bottom: 40px;
}
.pricing-table-offer ul {
list-style: none;
}
.pricing-table-offer ul li {
padding: 12px 0;
border-bottom: 2px solid #ccc;
letter-spacing: 1px;
}
.pricing-table-offer ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}
.pricing-table:hover {
border-color: #f9b125;
}
.pricing-table:hover .pricing-table-header h4 {
background-color: #f9b125;
}
/* ==========================================================================
=Progress Bar
========================================================================== */
.progress-bar-description {
display: inline-block;
padding: 10px 20px;
margin-bottom: 15px;
background-color: #f9b125;
color: #fff;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.progress-percentage {
position: absolute;
top: -40px;
right: 0;
font-weight: 800;
letter-spacing: 1px;
}
.progress-bar {
position: relative;
display: block;
height: 7px;
margin-bottom: 15px;
background-color: #222;
}
.progress-bar .progress-bar-outer {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #f9b125;
}
.progress-bar .progress-bar-outer .progress-bar-inner {
position: absolute;
z-index: 1;
overflow: hidden;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
}
/* ==========================================================================
=Revolution Slider
========================================================================== */
/* =Rev Slider Basics
========================================================================== */
.fullwidthbanner-container {
position: relative;
overflow: hidden;
width: 100% !important;
padding: 0;
margin: 0;
}
.fullwidthbanner-container ul {
list-style: none;
}
.fullwidthbanner-container .fullwidthbanner {
position: relative;
width: 100% !important;
}
/**
* 1. We apply the max-height using an extra class to make the transition to WP more easy
* If we apply the max-heigh directly to .fullwidthbanner-container, in WP, it would overwrite the height setting you make in the plugin
*/
.slider-revolution.fullwidthbanner-container {
max-height: 600px !important; /* 1 */
margin-bottom: 120px;
}
.slider-revolution.fullwidthbanner-container .fullwidthbanner {
max-height: 600px !important; /* 1 */
}
/* =Rev Slider Pager
========================================================================== */
/**
* 1. changing the z-index from 1000 so that the bullets don't go over the sticky menu
*/
.tp-bullets {
z-index: 100; /* 1 */
}
.tp-bullets.simplebullets.round .bullet {
width: 6px;
height: 6px;
border: 1px solid #222;
border-radius: 50px;
margin: 0 3px;
background: transparent;
}
.tp-bullets.simplebullets.round .bullet:hover, .tp-bullets.simplebullets.round .bullet.selected {
background: #222;
}
/* =Rev Slider navigation
========================================================================== */
.tp-leftarrow.default, .tp-rightarrow.default {
width: 60px;
height: 60px;
opacity: 0.5;
}
.tp-leftarrow.default:hover, .tp-rightarrow.default:hover {
opacity: 1;
}
.tp-leftarrow.default {
background: url(../images/left.png) no-repeat center center;
}
.tp-rightarrow.default {
background: url(../images/right.png) no-repeat center center;
}
/* =Rev Slider Typography
========================================================================== */
.caption.title {
color: #fff;
font-size: 48px;
line-height: 60px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 2px 2px #888;
}
.caption.subtitle {
color: #fff;
font-size: 30px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.caption.subtitle-bg {
max-width: 100% !important;
border-top: 10px solid #f9b125;
padding: 20px 40px 30px 40px;
background-color: #ee9f23;
color: #fff;
font-size: 30px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.caption.text {
max-width: 100% !important;
color: #fff;
font-size: 14px;
letter-spacing: 0.5px;
}
.caption.text-bg {
padding: 30px 40px 20px 40px;
background-color: rgba(255, 255, 255, 0.85);
color: #222;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
}
.caption .btn:hover {
color: #fff;
}
@media (min-width: 768px) and (max-width: 991px) {
.tp-leftarrow.default, .tp-rightarrow.default {
display: none;
}
.caption .btn {
padding: 8px 15px 8px 30px;
font-size: 10px;
}
.caption .btn:before {
border-top-width: 17px;
border-bottom-width: 17px;
border-left-width: 25px;
}
}
@media (max-width: 767px) {
.tp-leftarrow.default, .tp-rightarrow.default {
display: none;
}
.tp-bullets {
bottom: 0 !important;
}
.caption .btn {
padding: 0 5px 0 15px;
font-size: 5px;
line-height: 16px;
}
.caption .btn:before {
border-top-width: 8px;
border-bottom-width: 8px;
border-left-width: 12px;
}
.caption.text-bg {
background-color: transparent;
color: #fff;
}
}
/* ==========================================================================
=Social Media
========================================================================== */
a.social-icon {
display: inline-block;
margin-right: 20px;
margin-bottom: 1px;
color: #888;
text-align: center;
}
a.social-icon:last-child {
margin-right: 0;
}
a.social-icon i {
font-size: 20px;
}
a.social-icon:hover {
text-decoration: none;
}
a.facebook-icon:hover {
color: #0e59a0 !important;
}
a.twitter-icon:hover {
color: #0ea4ff !important;
}
a.dribble-icon:hover {
color: #ea73a0 !important;
}
a.pinterest-icon:hover {
color: #d73532 !important;
}
a.googleplus-icon:hover {
color: #282927 !important;
}
a.tumblr-icon:hover {
color: #586980 !important;
}
a.instagram-icon:hover {
color: #82685a !important;
}
a.rss-icon:hover {
color: #f79638 !important;
}
a.linkedin-icon:hover {
color: #018faf !important;
}
a.skype-icon:hover {
color: #00b0f6 !important;
}
a.flickr-icon:hover {
color: #0061db !important;
}
a.vimeo-icon:hover {
color: #63879c !important;
}
a.github-icon:hover {
color: #3b3b3b !important;
}
a.youtube-icon:hover {
color: #cc181e !important;
}
a.windows-icon:hover {
color: #6dc2e9 !important;
}
a.dropbox-icon:hover {
color: #007ee5 !important;
}
a.xing-icon:hover {
color: #026566 !important;
}
a.adn-icon:hover {
color: #1ea076 !important;
}
a.android-icon:hover {
color: #98cb02 !important;
}
a.apple-icon:hover {
color: #000000 !important;
}
a.behance-icon:hover {
color: #2d9ad2 !important;
}
a.bitbucket-icon:hover {
color: #214f81 !important;
}
a.bitcoin-icon:hover {
color: #f7931b !important;
}
a.codepan-icon:hover {
color: #000000 !important;
}
a.css3-icon:hover {
color: #3289ce !important;
}
a.delicious-icon:hover {
color: #3399fe !important;
}
a.deviantart-icon:hover {
color: #c8da30 !important;
}
a.digg-icon:hover {
color: #0080c2 !important;
}
a.drupal-icon:hover {
color: #0077b9 !important;
}
a.empire-icon:hover {
color: #000000 !important;
}
a.foursquare-icon:hover {
color: #daecb0 !important;
}
a.git-icon:hover {
color: #f34f29 !important;
}
a.gitti-icon:hover {
color: #634c3e !important;
}
a.hacker-news-icon:hover {
color: #f18642 !important;
}
a.html5-icon:hover {
color: #e54c1f !important;
}
a.joomla-icon:hover {
color: #016fb9 !important;
}
a.jsfiddle-icon:hover {
color: #4679a4 !important;
}
a.linux-icon:hover {
color: #fece0e !important;
}
a.maxcdn-icon:hover {
color: #f36f20 !important;
}
a.openid-icon:hover {
color: #fe6101 !important;
}
a.pagelines-icon:hover {
color: #3783e3 !important;
}
a.pied-piper-icon:hover {
color: #0c7b48 !important;
}
a.qq-icon:hover {
color: #23286c !important;
}
a.rebel-icon:hover {
color: #000000 !important;
}
a.reddit-icon:hover {
color: #cee3f8 !important;
}
a.renren-icon:hover {
color: #0d81e4 !important;
}
a.share-icon:hover {
color: #252525 !important;
}
a.slack-icon:hover {
color: #453744 !important;
}
a.soundcloud-icon:hover {
color: #fe4e00 !important;
}
a.spotify-icon:hover {
color: #80bb41 !important;
}
a.stack-exchange-icon:hover {
color: #265a93 !important;
}
a.stackoverflow-icon:hover {
color: #fea501 !important;
}
a.steam-icon:hover {
color: #191919 !important;
}
a.stumbleupon-icon:hover {
color: #f04f23 !important;
}
a.tencent-weibo-icon:hover {
color: #0063a7 !important;
}
a.trello-icon:hover {
color: #226784 !important;
}
a.vine-icon:hover {
color: #00b081 !important;
}
a.vk-icon:hover {
color: #50769d !important;
}
a.wechat-icon:hover {
color: #a4dc31 !important;
}
a.weibo-icon:hover {
color: #d82828 !important;
}
a.wordpress-icon:hover {
color: #454442 !important;
}
a.yahoo-icon:hover {
color: #4b04a8 !important;
}
/* ==========================================================================
=Tabs
========================================================================== */
/* =Horizontal tabs
========================================================================== */
/*
* 1. Wraps around a horizontal tab group
*/
.tabs-container {
margin-bottom: 40px;
} /* 1 */
.tabs-container .tabs-menu {
border-bottom: 1px solid #e6e6e6;
margin-top: 10px;
margin-bottom: 0;
list-style: none;
}
.tabs-container .tabs-menu li {
display: inline;
}
.tabs-container .tabs-menu li a {
float: left;
display: block;
padding: 10px 20px;
border: 1px solid #e6e6e6;
border-left: none;
margin-bottom: -1px;
color: #222;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tabs-container .tabs-menu li a:hover {
text-decoration: none;
}
.tabs-container .tabs-menu li:first-child a {
border-left: 1px solid #e6e6e6;
}
.tabs-container .tabs-menu li a:hover, .tabs-container .tabs-menu li.active a {
border-bottom-color: #fff;
background-color: #f9b125;
color: #fff;
}
.tabs-container .tabs {
border: 1px solid #e6e6e6;
border-top: none;
margin-bottom: 30px;
}
.tabs-container .tab-content {
padding: 25px;
}
.tabs-container .tab-content > *:last-child {
margin-bottom: 0;
}
/*
* 1. Clearfix hack
*/
.tabs-container .tabs-menu:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* =Vertical tabs
========================================================================== */
.vertical-tabs-container {
position: relative;
margin-bottom: 40px;
}
.vertical-tabs-container .tabs-menu {
float: left;
width: 180px;
margin-bottom: 0;
list-style: none;
}
.vertical-tabs-container .tabs-menu li a {
display: block;
padding: 15px 25px;
color: #222;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-tabs-container .tabs-menu li a:hover, .vertical-tabs-container .tabs-menu li.active a {
background-color: #f9b125;
color: #fff;
}
.vertical-tabs-container .tabs {
border-left: 1px solid #e6e6e6;
margin-left: 180px;
}
.vertical-tabs-container .tab-content {
padding: 58px 25px 58px 50px;
}
.vertical-tabs-container .tab-content *:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.tabs-container .tabs-menu {
border-bottom: none;
}
.tabs-container .tabs-menu li {
display: block;
}
.tabs-container .tabs-menu li a {
float: none;
display: block;
padding: 20px 25px;
border: 1px solid #e6e6e6;
border-top: none;
margin: 0;
}
.tabs-container .tabs-menu li a:hover {
text-decoration: none;
}
.tabs-container .tabs-menu li:first-child a {
border-top: 1px solid #e6e6e6;
}
.tabs-container .tabs-menu li.active a {
padding: 20px 25px;
border-bottom-color: #bbb;
margin: 0;
background-color: #fff;
color: #222;
}
.vertical-tabs-container .tabs-menu {
float: none;
width: 100%;
border: 1px solid #e6e6e6;
border-bottom: none;
}
.vertical-tabs-container .tabs-menu li a {
border-bottom: 1px solid #e6e6e6;
}
.vertical-tabs-container .tabs-menu li:last-child a {
border-bottom: none;
}
.vertical-tabs-container .tabs {
border: 1px solid #e6e6e6;
margin-left: 0;
}
.vertical-tabs-container .tab-content {
padding: 25px;
}
.vertical-tabs-container .tabs-menu li a {
padding: 20px 25px;
border-right: none;
margin-right: 0;
}
.vertical-tabs-container .tabs-menu li.active a {
border-bottom-color: #bbb;
}
}
/* ==========================================================================
=Testimonials
========================================================================== */
.testimonial {
margin-bottom: 30px;
text-align: center;
}
.testimonial:before {
display: block;
width: 55px;
height: 55px;
margin: 0 auto 50px auto;
background-color: #f9b125;
color: #fff;
font-size: 36px;
line-height: 70px;
letter-spacing: 1px;
content: "\201c";
}
.testimonial blockquote {
padding-left: 0;
border-left: none;
margin-bottom: 30px;
}
.testimonial blockquote p {
}
.testimonial h5 {
color: #f9b125;
letter-spacing: 1px;
}
.testimonial h6 {
font-weight: 600;
letter-spacing: 2px;
}
/*
* 1. Clearfix hack
*/
.testimonial:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* ==========================================================================
=Team Member
========================================================================== */
.team-member {
margin-bottom: 30px;
text-align: center;
}
.team-member-img {
position: relative;
overflow: hidden;
display: inline-block;
max-width: 100%;
border-radius: 50%;
margin-bottom: 40px;
}
.team-member-img:after {
position: absolute;
bottom: -50%;
left: 0;
right: 0;
height: 50%;
background-color: #f9b125;
content: "";
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.team-member img {
}
.team-member h5 {
margin-bottom: 10px;
text-transform: uppercase;
}
.team-member p {
margin-bottom: 10px;
color: #888;
}
.team-member .social-media {
margin-bottom: 40px;
}
.team-member:hover .team-member-img:after {
bottom: 0;
}
/* ==========================================================================
=Portfolio Item
========================================================================== */
.portfolio-item {
position: relative;
margin-bottom: 30px;
}
.portfolio-item-preview {
position: relative;
}
.portfolio-item-preview > img {
display: block;
width: 100%;
}
.portfolio-item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.portfolio-item-overlay:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 35px;
opacity: 0;
background-color: #f9b125;
content: "";
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s 0.1s;
transition: all 0.3s 0.1s;
}
.portfolio-item-overlay-actions {
position: absolute;
top: 50%;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: -30px;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}
.portfolio-item-overlay-actions .portfolio-item-zoom {
display: inline-block;
padding: 10px;
text-decoration: none;
}
.portfolio-item-overlay-actions .portfolio-item-zoom i {
color: #fff;
font-size: 32px;
}
.portfolio-item-description > *:last-child {
margin-bottom: 0;
}
.portfolio-item-overlay .portfolio-item-description {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 35px;
color: #fff;
text-align: center;
opacity: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}
.portfolio-item-overlay .portfolio-item-description h3 {
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.portfolio-item-overlay .portfolio-item-description h3, .portfolio-item-overlay .portfolio-item-description a {
color: #fff;
}
.portfolio-item-overlay .portfolio-item-description a:hover {
color: #222;
text-decoration: none;
}
.portfolio-item-preview + .portfolio-item-description {
margin: 30px 0;
}
.portfolio-item-description h5 {
margin-bottom: 5px;
color: #f9b125;
}
.portfolio-item-description h5 a {
color: #222;
text-transform: uppercase;
letter-spacing: 1px;
}
.portfolio-item-description h5 a:hover {
color: #f9b125;
text-decoration: none;
}
.portfolio-item:hover .portfolio-item-overlay {
opacity: 1;
}
.portfolio-item:hover .portfolio-item-overlay:before {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.portfolio-item:hover .portfolio-item-overlay .portfolio-item-description {
opacity: 1;
}
.portfolio-item:hover .portfolio-item-overlay-actions {
opacity: 1;
}
/* ==========================================================================
=Portfolio Filter
========================================================================== */
.portfolio-filter ul {
margin-bottom: 100px;
list-style: none;
text-align: center;
}
.portfolio-filter ul li {
display: inline-block;
margin-right: 10px;
}
.portfolio-filter ul li:last-child {
margin-right: 0;
}
.portfolio-filter ul li a {
display: inline-block;
padding: 10px 20px;
color: #222;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.portfolio-filter ul li a:hover, .portfolio-filter ul li a.active {
background-color: #f9b125;
color: #fff;
}
@media (max-width: 767px) {
.portfolio-filter ul li {
display: block;
margin-bottom: 10px;
}
.portfolio-filter ul li:last-child {
margin-bottom: 0;
}
}
/* ==========================================================================
=Portfolio Pagination
========================================================================== */
.portfolio-pagination {
margin-bottom: 50px;
}
/*
* 1. Clearfix hack
*/
.portfolio-pagination:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
.portfolio-pagination .nav-links {
}
.portfolio-pagination .page-numbers {
display: inline-block;
width: 36px;
height: 36px;
border: 2px solid #f9b125;
margin-right: 5px;
font-size: 14px;
line-height: 36px;
font-weight: 700;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.portfolio-pagination .page-numbers:last-child {
margin-right: 0;
}
.portfolio-pagination .page-numbers:hover, .portfolio-pagination .page-numbers.current {
background-color: #f9b125;
color: #fff;
}
.portfolio-pagination .current {
}
.portfolio-pagination .page-numbers.dots {
border: none;
}
.portfolio-pagination .page-numbers.dots:hover {
background-color: transparent;
color: #f9b125;
}
.portfolio-pagination .prev, .portfolio-pagination .next {
}
.portfolio-pagination .prev:before, .portfolio-pagination .next:before {
font-family: "FontAwesome";
}
.portfolio-pagination .prev:hover, .portfolio-pagination .prev:focus, .portfolio-pagination .next:hover, .portfolio-pagination .next:focus {
}
.portfolio-pagination .prev {
}
.portfolio-pagination .prev:before {
content: "\f104";
}
.portfolio-pagination .next {
}
.portfolio-pagination .next:before {
content: "\f105";
}
/* ==========================================================================
=Portfolio Grid
========================================================================== */
.portfolio-grid {
margin-bottom: 100px;
list-style: none;
}
.portfolio-grid.gutter {
margin: -15px -15px 85px -15px;
}
.portfolio-grid .item {
float: left;
width: 33.33333%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.portfolio-grid.gutter .item {
padding: 15px;
}
.portfolio-grid.gutter .portfolio-item-preview + .portfolio-item-description {
margin-bottom: 0;
}
.portfolio-grid .portfolio-item {
margin-bottom: 0;
}
.portfolio-grid.three-cols .item {
width: 33.33333%;
}
.portfolio-grid.four-cols .item {
width: 33.33333%;
}
.portfolio-grid.five-cols .item {
width: 25%;
}
/*
* 1. Clearfix hack
*/
.portfolio-grid:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
@media (min-width: 1200px) {
.portfolio-grid.four-cols .item {
width: 25%;
}
.portfolio-grid.five-cols .item {
width: 20%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.portfolio-grid.three-cols .item, .portfolio-grid.four-cols .item, .portfolio-grid.five-cols .item {
width: 50%;
}
}
@media (max-width: 767px) {
.portfolio-grid .item {
float: none;
width: 100%;
}
.portfolio-grid.three-cols .item, .portfolio-grid.four-cols .item, .portfolio-grid.five-cols .item {
width: 100%;
}
}
/* ==========================================================================
=Bx Slider
========================================================================== */
/* =Bx Slider reset
========================================================================== */
.bx-wrapper {
margin: 0 auto 40px;
}
.bx-pager, .bx-controls-auto, .bx-controls-direction {
z-index: 100;
}
.slides {
list-style: none;
}
/* =Bx Slider theme
========================================================================== */
.bx-wrapper {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
}
/* =Bx Slider Pager
========================================================================== */
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: -30px;
}
.bx-wrapper .bx-pager.bx-default-pager a, .bx-wrapper .bx-pager.bx-default-pager a:focus {
width: 6px;
height: 6px;
border: 1px solid #222;
border-radius: 50%;
background: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #222;
}
/* =Bx Slider Dir Nav
========================================================================== */
.bx-wrapper .bx-prev {
left: 0;
background: #222 url(../images/left.png) no-repeat center center;
}
.bx-wrapper .bx-next {
right: 0;
background: #222 url(../images/right.png) no-repeat center center;
}
.bx-wrapper .bx-prev:hover, .bx-wrapper .bx-next:hover {
background-position: center center;
}
/*
* 1. We are changing the original z-index from 9999 to 1000 so that it doesn't overlap other elements that need to be above this one
*/
.bx-wrapper .bx-controls-direction a {
width: 48px;
height: 48px;
z-index: 1000; /* 1 */
}
.slides li img {
margin: 0 auto;
}
#images-slider-2-pager {
margin: 0 -10px 30px -10px;
text-align: center;
}
#images-slider-2-pager a {
float: left;
display: block;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
#images-slider-2-pager a img {
border: 5px solid transparent;
}
#images-slider-2-pager a.active img, #images-slider-2-pager a:hover img {
border-color: #f9b125;
}
/*
* 1. Clearfix hack
*/
#images-slider-2-pager:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* ==========================================================================
=Fullwidth Section
========================================================================== */
.fullwidth-section.custom-color-selected {
background-color: #000;
color: #fff;
}
.fullwidth-section.custom-color-selected a, .fullwidth-section.custom-color-selected ul.arrow li:before, .fullwidth-section.custom-color-selected .icon-box-1:hover > i, .fullwidth-section.custom-color-selected .icon-box-3:hover > i, .fullwidth-section.custom-color-selected .icon-box-4:hover > i, .fullwidth-section.custom-color-selected .tabs-container .tabs-menu li a, .fullwidth-section.custom-color-selected .vertical-tabs-container .tabs-menu li a {
color: inherit;
}
.fullwidth-section.custom-color-selected .accordion-item:hover, .fullwidth-section.custom-color-selected .accordion-item.active, .fullwidth-section.custom-color-selected .toggle-item:hover, .fullwidth-section.custom-color-selected .toggle-item.active, .fullwidth-section.custom-color-selected .horizontal-process-builder:before {
border-color: inherit;
}
.fullwidth-section .horizontal-process-builder li i, .fullwidth-section .horizontal-process-builder li h1, .fullwidth-section .horizontal-process-builder li img {
outline: none;
}
#bg-1 {
padding: 70px 0 20px 0;
background-color: #f9b125;
}
#bg-2 {
padding-top: 100px;
padding-bottom: 0;
margin-top: 70px;
}
#bg-3 {
padding: 100px 0 60px 0;
margin-top: 70px;
margin-bottom: 0;
}
#bg-4 {
padding-bottom: 0;
margin-top: 70px;
margin-bottom: 0;
}
#bg-5 {
background-color: #f9b125;
}
#bg-6 {
padding: 100px 0 50px 0;
margin-top: 100px;
background-image: url(../images/1920x1080-1.jpg);
}
#bg-7 {
padding: 120px 0 100px 0;
margin-top: 70px;
}
#bg-8 {
padding: 120px 0 70px 0;
margin-top: 70px;
}
#bg-9 {
padding: 100px 0 80px 0;
margin-top: 50px;
margin-bottom: -50px;
background-image: url(../images/1920x1080-2.jpg);
color: #222;
}
#bg-10 {
padding: 100px 0 50px 0;
margin-top: 80px;
background-image: url(../images/1920x1080-3.jpg);
}
/**
* Name: wordpress.css
*
* Styling for WordPress widgets, blog posts, standard wordpress classes. Useful if you want to convert the template to a WordPress theme
*
* T.O.C
*
* =WordPress Default Classes
* =WordPress Post(s)
* =WordPress pagination and navigation
* =WordPress Comments
* =WordPress Comments Navigation
* =WordPress Comment Form
* =WordPress Widgets
* =Widgets default
* =Text Widget
* =Search Widget
* =Recent Entries Widget
* =Pages Widget
* =Archive Widget
* =Categories Widget
* =Meta Widget
* =Recent Comments Widget
* =Tag Cloud Widget
* =Calendar Widget
* =Nav Menu Widget
* =RSS Widget
* =WordPress Custom Widgets
* =EWF Twitter widget
* =EWF Flickr widget
* =EWF Contact Info widget
* =EWF Newsletter subscribe widget
* =EWF Latest posts widget
* =EWF Navigation widget
* =EWF Social media widget
*
*/
/* ==========================================================================
=WordPress Default Classes
========================================================================== */
.ewf-inline-style {
display: none;
}
/* Align */
.alignleft {
float: left;
display: inline;
}
.alignright {
float: right;
display: inline;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
blockquote.alignleft, .wp-caption.alignleft, .caption.alignleft, img.alignleft {
margin: 5px 20px 20px 0;
}
blockquote.alignright, .wp-caption.alignright, .caption.alignright, img.alignright {
margin: 5px 0 20px 20px;
}
blockquote.aligncenter, .wp-caption.aligncenter, .caption.aligncenter, img.aligncenter {
margin-top: 5px;
margin-bottom: 20px;
clear: both;
}
.wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter, .caption.alignleft, .caption.alignright, .caption.aligncenter {
margin-bottom: 20px;
}
/* Caption */
.caption, .wp-caption {
max-width: 100%;
margin-bottom: 20px;
}
.wp-caption img[class*="wp-image-"] {
margin: 0;
}
.caption-text, .wp-caption-text {
padding: 10px 0;
color: #bbbbbb;
}
/* Gallery */
.gallery {
margin-bottom: 20px;
}
.gallery-item {
float: left;
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1.79104477%;
text-align: center;
vertical-align: top;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-icon img {
margin: 0 auto;
}
.gallery-caption {
display: block;
padding: 10px 0;
color: #bbbbbb;
}
.gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption {
display: none;
}
/* Text meant only for screen readers */
.says, .screen-reader-text {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
}
/* ==========================================================================
=WordPress Post(s)
========================================================================== */
.post {
position: relative;
margin-bottom: 100px;
text-align: center;
}
.post + .post {
margin-top: 100px;
}
.post-thumbnail {
display: block;
margin-bottom: 60px;
}
.post-thumbnail img {
display: block;
}
a.post-thumbnail {
}
.sticky {
padding: 60px 40px 40px;
border: 1px solid #e6e6e6;
}
.sticky.has-post-thumbnail .post-thumbnail {
margin-right: -40px;
margin-left: -40px;
}
.sticky-post {
position: absolute;
top: 0;
left: 50%;
padding: 3px 6px;
background-color: #f9b125;
color: #fff;
font-weight: 700;
text-transform: uppercase;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.sticky-post:after {
display: none;
}
.post-header {
padding: 0;
margin-bottom: 60px;
}
.post-header > span:after {
position: relative;
top: -2px;
margin-left: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.post-header > span:last-child:after {
display: none;
}
.post-title {
margin-bottom: 25px;
text-transform: uppercase;
}
.post-title a {
color: #222;
}
.post-title a:hover {
color: #f9b125;
text-decoration: none;
}
.post-content, .post-summary {
text-align: left;
}
/*
* 1. Clearfix hack
*/
.post-content:after, .post-summary:after { /* 1 */
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.post-content > :last-child, .post-summary > :last-child {
margin-bottom: 0;
}
.post-content iframe {
max-width: 100%;
}
.post-content .more-link {
margin-top: 50px;
}
.post-content .more-link, .post-summary .more-link:after {
white-space: nowrap;
}
.post-content .more-link:after, .post-summary .more-link:after {
}
.post-footer {
padding: 0;
}
/*
* 1. Clearfix hack
*/
.post-header:after, .post-content:after, .post-summary:after, .post-footer:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
.sticky .posted-on {
display: none;
}
.posted-on, .byline, .cat-links, .tags-links, .comments-link, .post-format, .full-size-link {
margin-right: 10px;
color: #f9b125;
font-weight: 700;
}
.comments-link, .edit-link {
white-space: nowrap;
}
.format-standard .post-format:before {
font-family: 'FontAwesome';
content: "\f0f6";
}
.format-aside .post-format:before {
font-family: 'FontAwesome';
content: "\f10c";
}
.format-image .post-format:before {
font-family: 'FontAwesome';
content: "\f03e";
}
.format-gallery .post-format:before {
font-family: 'FontAwesome';
content: "\f00a";
}
.format-video .post-format:before {
font-family: 'FontAwesome';
content: "\f1c8";
}
.format-status .post-format:before {
font-family: 'FontAwesome';
content: "\f044";
}
.format-quote .post-format:before {
font-family: 'FontAwesome';
content: "\f10e";
}
.format-link .post-format:before {
font-family: 'FontAwesome';
content: "\f0c1";
}
.format-chat .post-format:before {
font-family: 'FontAwesome';
content: "\f18d";
}
.format-audio .post-format:before {
font-family: 'FontAwesome';
content: "\f027";
}
.format-aside {
}
.format-image {
}
.format-video {
}
.format-quote {
}
.format-gallery {
}
.format-status {
}
.format-link {
}
.format-audio {
}
.format-chat {
}
/* ==========================================================================
=WordPress pagination and navigation
========================================================================== */
.pagination {
margin-bottom: 50px;
}
/*
* 1. Clearfix hack
*/
.pagination:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
.pagination .nav-links {
}
.pagination .page-numbers {
display: inline-block;
width: 36px;
height: 36px;
border: 2px solid #f9b125;
margin-right: 5px;
font-size: 14px;
line-height: 36px;
font-weight: 700;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.pagination .page-numbers:last-child {
margin-right: 0;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current {
background-color: #f9b125;
color: #fff;
}
.pagination .current {
}
.pagination .page-numbers.dots {
border: none;
}
.pagination .page-numbers.dots:hover {
background-color: transparent;
color: #f9b125;
}
.pagination .prev, .pagination .next {
}
.pagination .prev:before, .pagination .next:before {
font-family: "FontAwesome";
}
.pagination .prev:hover, .pagination .prev:focus, .pagination .next:hover, .pagination .next:focus {
}
.pagination .prev {
}
.pagination .prev:before {
content: "\f104";
}
.pagination .next {
}
.pagination .next:before {
content: "\f105";
}
/* ==========================================================================
=WordPress Comments
========================================================================== */
.comments-area {
margin-top: 100px;
}
.comments-area > :last-child {
margin-bottom: 0;
}
.comment-list + .comment-respond {
}
.comment-list + .comment-respond, .comment-navigation + .comment-respond {
padding-top: 20px;
}
.comments-title, .comment-reply-title {
letter-spacing: 1px;
text-transform: uppercase;
}
.comments-title {
margin: 20px 0;
}
.comment-list {
margin: 0;
margin-bottom: 100px;
list-style: none;
}
.comment-list > li > .comment-body .comment-author .avatar {
border-left: 5px solid #f9b125;
}
.comment-list .pingback, .comment-list .trackback {
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
}
.comment-list .children {
margin: 0;
list-style: none;
}
.comment-list .children > li {
padding-left: 95px;
}
.comment-body {
position: relative;
padding-left: 125px;
margin-bottom: 50px;
}
.comment-author {
display: inline-block;
margin-right: 5px;
}
.comment-author a {
color: #222;
font-weight: 700;
text-transform: uppercase;
}
.comment-author a:hover {
}
.comment-author .avatar {
position: absolute;
top: 5px;
left: 0;
width: 95px;
height: 95px;
margin-right: 10px;
}
.comment-meta {
display: inline-block;
margin-bottom: 10px;
}
.comment-meta, .pingback .edit-link {
}
.comment-meta a, .pingback .edit-link a {
color: #222;
font-weight: 700;
}
.comment-meta a:hover, .pingback .edit-link a:hover {
}
.comment-meta a:hover, .comment-meta a:focus, .pingback .edit-link a:hover, .pingback .edit-link a:focus {
}
.comment-meta .edit-link {
margin-left: 15px;
}
.pingback .edit-link {
margin-left: 15px;
}
.pingback .edit-link:before {
top: 0;
}
.comment-content ul, .comment-content ol {
margin: 0 0 20px 20px;
}
.comment-content li > ul, .comment-content li > ol {
margin-bottom: 0;
}
.comment-content > :last-child {
margin-bottom: 0;
}
.comment-list .reply {
margin-bottom: 20px;
}
.comment-list .reply a {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.comment-list .reply a:hover, .comment-list .reply a:focus {
}
@media (max-width: 767px) {
.comment-body {
padding-left: 0;
}
.comment-author {
display: block;
}
.comment-author .avatar {
position: relative;
display: block;
margin-bottom: 15px;
}
.comment-list .children > li {
padding-left: 0;
}
}
/* ==========================================================================
=WordPress Comments Navigation
========================================================================== */
.comment-navigation {
text-transform: uppercase;
}
.comment-navigation a {
}
.comment-navigation a:hover, .comment-navigation a:focus {
}
.comment-navigation .nav-previous:not(:empty), .comment-navigation .nav-next:not(:empty) {
display: inline-block;
}
.comment-navigation .nav-previous:not(:empty) + .nav-next:not(:empty):before {
margin: 0 10px;
font-weight: 400;
content: "\2215";
}
.comment-navigation .nav-previous a:before {
position: relative;
margin-right: 3px;
font-family: "FontAwesome";
content: "\f104";
}
.comment-navigation .nav-next a:after {
position: relative;
margin-left: 3px;
font-family: "FontAwesome";
content: "\f105";
}
.comment-navigation {
padding: 20px 0;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
.comments-title + .comment-navigation {
border-bottom: 0;
}
/* ==========================================================================
=WordPress Comment Form
========================================================================== */
.comment-form {
padding-top: 20px;
margin: 50px 0;
}
.comment-form label {
}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
width: 100%;
}
.comment-notes, .comment-awaiting-moderation, .logged-in-as, .form-allowed-tags {
}
.logged-in-as a:hover {
}
.no-comments {
border-top: 1px solid #e6e6e6;
padding-top: 20px;
}
.comment-navigation + .no-comments {
border-top: 0;
}
.form-allowed-tags code {
}
.form-submit {
margin-bottom: 0;
}
.required {
color: #ff3225;
}
.comment-reply-title small {
}
.comment-reply-title small a {
}
/* ==========================================================================
=WordPress Widgets
========================================================================== */
/* =Widgets default
========================================================================== */
.widget {
margin-bottom: 70px;
}
#footer-top .widget:last-child, #footer .widget:last-child, #footer-bottom .widget:last-child {
margin-bottom: 0;
}
/**
* 1. The last element of every widget shouldn't have a margin bottom. used for spacing purposes
*/
.widget > :last-child {
margin-bottom: 0; /* 1 */
}
.widget-title {
position: relative;
margin-bottom: 40px;
line-height: 18px;
letter-spacing: 1px;
text-transform: uppercase;
}
#footer .widget-title {
padding-bottom: 15px;
color: #fff;
}
#footer .widget-title:before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 80px;
border-bottom: 3px solid #ee9f23;
content: "";
}
#footer .widget-title:after {
position: absolute;
bottom: 0;
left: 85px;
display: block;
width: 20px;
border-bottom: 3px solid #f9b125;
content: "";
}
#footer .widget:first-child .widget-title {
margin-top: 33px;
}
/* =Text Widget
========================================================================== */
.widget_text {
}
.textwidget {
}
/**
* 1. The last element inside text widget shouldn't have margin bottom
*/
.textwidget > :last-child {
margin-bottom: 0; /* 1 */
}
.textwidget .author {
padding-left: 20px;
border-left: 3px solid #f9b125;
}
.textwidget .author img {
float: left;
display: block;
border-radius: 50%;
margin-right: 20px;
}
.textwidget .author h5 {
padding-top: 15px;
text-transform: uppercase;
}
.textwidget .author h6 {
margin-bottom: 20px;
color: #f9b125;
}
@media (min-width: 768px) and (max-width: 991px) {
.textwidget .author img {
float: none;
}
}
/* =Search Widget
========================================================================== */
.widget_search {
}
#searchform {
position: relative;
}
#s {
display: inline-block;
width: 100%;
height: 45px;
padding-right: 65px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#searchsubmit {
position: absolute;
top: 0;
right: 0;
height: 45px;
background: #f9b125 url(../images/bg-search-2.png) no-repeat center center;
vertical-align: inherit;
}
/* =Recent Entries Widget
========================================================================== */
.widget_recent_entries {
}
.widget_recent_entries ul {
list-style: none;
}
.widget_recent_entries ul li {
padding-bottom: 20px;
}
.widget_recent_entries ul li:last-child {
padding-bottom: 0;
}
.widget_recent_entries ul li a {
}
.widget_recent_entries ul li .post-date {
display: block;
}
/* =Pages Widget
========================================================================== */
.widget_pages {
}
.widget_pages ul {
margin-left: 15px;
list-style: none;
}
.widget_pages ul li {
margin-bottom: 10px;
}
.widget_pages ul li:last-child {
margin-bottom: 0;
}
.widget_pages a {
color: #222;
}
.widget_pages a:before {
position: relative;
top: -2px;
margin-right: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.widget_pages a:hover {
text-decoration: none;
}
.widget_pages a:hover:before {
color: #f9b125;
}
.widget_pages .children {
}
#footer-bottom .widget_pages ul {
text-align: right;
}
#footer-bottom .widget_pages ul li {
display: inline-block;
margin-right: 15px;
margin-bottom: 0;
}
#footer-bottom .widget_pages ul li:last-child {
margin-right: 0;
}
#footer-bottom .widget_pages ul li a:before {
display: none;
}
/* =Archive Widget
========================================================================== */
.widget_archive {
}
.widget_archive ul {
margin-left: 15px;
list-style: none;
}
.widget_archive ul li {
margin-bottom: 10px;
}
.widget_archive ul li:last-child {
margin-bottom: 0;
}
.widget_archive a {
color: #222;
}
.widget_archive a:before {
position: relative;
top: -2px;
margin-right: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.widget_archive a:hover {
text-decoration: none;
}
.widget_archive a:hover:before {
color: #f9b125;
}
.widget_archive select {
}
.widget_archive option {
}
/* =Categories Widget
========================================================================== */
.widget_categories {
}
.widget_categories ul {
margin-left: 15px;
list-style: none;
}
.widget_categories ul li {
margin-bottom: 10px;
}
.widget_categories ul li:last-child {
margin-bottom: 0;
}
.widget_categories a {
color: #222;
}
.widget_categories a:before {
position: relative;
top: -2px;
margin-right: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.widget_categories a:hover {
text-decoration: none;
}
.widget_categories a:hover:before {
color: #f9b125;
}
.widget_categories ul ul.children {
}
.widget_categories select {
}
.widget_categories select#cat {
}
.widget_categories select.postform {
}
.widget_categories option {
}
.widget_categories .level-0 {
}
.widget_categories .level-1 {
}
.widget_categories .level-2 {
}
.widget_categories .level-3 {
}
/* =Meta Widget
========================================================================== */
.widget_meta {
}
.widget_meta ul {
margin-left: 15px;
list-style: none;
}
.widget_meta ul li {
margin-bottom: 10px;
}
.widget_meta ul li:last-child {
margin-bottom: 0;
}
.widget_meta a {
color: #222;
}
.widget_meta a:before {
position: relative;
top: -2px;
margin-right: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.widget_meta a:hover {
text-decoration: none;
}
.widget_meta a:hover:before {
color: #f9b125;
}
/* =Recent Comments Widget
========================================================================== */
.widget_recent_comments {
}
#recentcomments {
list-style: none;
}
#recentcomments li {
}
#recentcomments li a {
}
.recentcomments {
}
/* =Tag Cloud Widget
========================================================================== */
.widget_tag_cloud {
}
.widget_tag_cloud a {
display: inline-block;
padding: 3px 15px;
border: 1px solid #888;
margin: 0 5px 10px 0;
color: #222;
font-size: 13px;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.widget_tag_cloud a:hover {
background-color: #888;
color: #fff;
}
.widget_tag_cloud a:after {
}
.widget_tag_cloud a:before {
}
#footer .widget_tag_cloud a:hover, #footer-bottom .widget_tag_cloud a:hover {
color: #fff;
}
/* =Calendar Widget
========================================================================== */
.widget_calendar {
}
#calendar_wrap {
}
#calendar_wrap th, #calendar_wrap td {
padding: 0;
line-height: 2.5;
text-align: center;
}
#wp-calendar tr td {
}
#wp-calendar caption {
font-weight: 700;
text-transform: uppercase;
}
#wp-calendar tbody a {
display: block;
background-color: #f9b125;
color: #fff;
font-weight: 700;
}
#wp-calendar #today {
}
#wp-calendar #prev {
}
#wp-calendar #next {
}
#wp-calendar #next a {
}
#wp-calendar #prev a {
}
/* =Nav Menu Widget
========================================================================== */
.widget_nav_menu {
}
.widget_nav_menu ul {
margin-left: 15px;
list-style: none;
}
.widget_nav_menu ul li {
margin-bottom: 10px;
}
.widget_nav_menu ul li:last-child {
margin-bottom: 0;
}
.widget_nav_menu a {
color: #222;
}
.widget_nav_menu a:before {
position: relative;
top: -2px;
margin-right: 10px;
font-family: "FontAwesome";
font-size: 8px;
content: "\f111";
}
.widget_nav_menu a:hover {
text-decoration: none;
}
.widget_nav_menu a:hover:before {
color: #f9b125;
}
.widget_nav_menu .sub-menu {
}
/* =RSS Widget
========================================================================== */
.widget_rss {
}
.widget_rss ul {
margin: 0;
list-style: none;
}
.widget_rss li {
margin-bottom: 20px;
}
.widget_rss ul:last-child, .widget_rss li:last-child {
margin-bottom: 0;
}
.widget_rss .rsswidget {
}
.widget_rss .rsswidget img {
margin-top: -4px;
}
.widget_rss .rss-date, .widget_rss cite {
display: block;
line-height: 3;
font-weight: 700;
}
/* ==========================================================================
=WordPress Custom Widgets
========================================================================== */
/* =EWF Twitter widget
========================================================================== */
.ewf_widget_latest_tweets {
}
.ewf-tweet-list .tweet {
word-wrap: break-word;
}
.ewf-tweet-list ul {
list-style: none;
}
.ewf-tweet-list .interact {
text-align: center;
}
.ewf-tweet-list .interact a {
margin-right: 10px;
}
.ewf-tweet-list .interact a:last-child {
margin-right: 0;
}
/* =EWF Flickr widget
========================================================================== */
.ewf_widget_flickr {
}
.flickr-feed {
}
.flickr-feed .flickr_badge_image {
display: inline;
}
.flickr-feed img {
width: 60px;
height: auto;
padding: 0 10px 10px 0;
border: none;
}
@media (min-width: 1200px) {
.flickr-feed img {
width: 75px;
}
}
/* =EWF Contact Info widget
========================================================================== */
.ewf_widget_contact_info {
}
.ewf_widget_contact_info ul {
list-style: none;
}
.ewf_widget_contact_info ul li {
padding-bottom: 25px;
border-bottom: 1px solid #888;
margin-bottom: 25px;
}
.ewf_widget_contact_info ul li:last-child {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
.ewf_widget_contact_info ul li:last-child {
margin-bottom: 0;
}
.ewf_widget_contact_info ul li a {
}
/* =EWF Newsletter subscribe widget
========================================================================== */
.ewf_widget_newsletter {
}
#newsletter-subscribe-form {
}
#newsletter-subscribe-form input[type="text"] {
}
#newsletter-subscribe-form input[type="submit"] {
}
/* =EWF Latest posts widget
========================================================================== */
.ewf_widget_latest_posts {
}
.ewf_widget_latest_posts ul {
list-style: none;
font-size: 13px;
line-height: 24px;
}
.ewf_widget_latest_posts ul li {
margin-bottom: 25px;
}
.ewf_widget_latest_posts ul li:last-child {
margin-bottom: 0;
}
.ewf_widget_latest_posts ul li img {
float: left;
margin: 5px 15px 0 0;
}
.ewf_widget_latest_posts ul li a {
font-size: 12px;
}
.ewf_widget_latest_posts ul li .title {
text-transform: uppercase;
font-weight: 700;
}
.ewf_widget_latest_posts ul li p {
margin-bottom: 0;
}
#footer .ewf_widget_latest_posts ul li {
padding-bottom: 25px;
border-bottom: 1px solid #888;
margin-bottom: 25px;
}
#footer .ewf_widget_latest_posts ul li:last-child {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
#footer .ewf_widget_latest_posts ul li a {
color: #f9b125;
}
/*
* 1. Clearfix hack
*/
.ewf_widget_latest_posts ul li:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
@media (min-width: 768px) and (max-width: 991px) {
.ewf_widget_latest_posts ul li img {
display: none;
}
}
/* =EWF Navigation widget
========================================================================== */
.ewf_widget_navigation {
}
.ewf_widget_navigation ul {
list-style-type: none;
list-style-position: outside;
}
.ewf_widget_navigation li {
border-bottom: 1px solid #e6e6e6;
}
.ewf_widget_navigation li:last-child {
border-bottom: none;
}
.ewf_widget_navigation li a {
display: block;
padding: 10px 0;
}
.ewf_widget_navigation li a:hover {
text-decoration: none;
}
/* =EWF Social media widget
========================================================================== */
.ewf_widget_social_media {
}
/*
* 1. Clearfix hack
*/
.ewf_widget_social_media:after { /* 1 */
visibility: hidden;
display: block;
height: 0;
font-size: 0;
content: " ";
clear: both;
}
/* =EWF Slider widget
========================================================================== */
.ewf_widget_slider {
}