/* ========================================================================== =CssReset ========================================================================== */ 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, menu, nav, section { 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. Always force vertical scroll * 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. * 3. For animations */ html { font-size: 100%; overflow-y: scroll; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ -webkit-font-smoothing: antialiased; overflow-x: hidden; /* 3 */ } /* ========================================================================== =Typography ========================================================================== */ body { background-color: #fff; color: #1c1c1c; font: 15px "PT Sans", Arial, sans-serif; line-height: 25px; font-weight: 300; letter-spacing: 0.5px; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", Arial, sans-serif; letter-spacing: 0.5px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #1c1c1c; font-weight: inherit; } h1 { margin-bottom: 14px; font-size: 36px; line-height: 64px; } h2 { margin-bottom: 10px; font-size: 24px; line-height: 42px; } 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%; } sub { vertical-align: sub; font-size: 75%; } sup { vertical-align: super; font-size: 75%; } abbr[title] { border-bottom: 1px dotted #999; cursor: help; } address { display: block; margin-bottom: 20px; } blockquote {} blockquote p { font-style: italic; } blockquote span { display: block; margin-top: 5px; color: #999999; } blockquote span:before { content: "\2013 \00A0"; } hr { height: 0; border: solid #a0a0a0; border-width: 1px 0 0 0; margin: 30px 0; } code, pre { border-radius: 3px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; } code { padding: 1px 4px; border: 1px solid #a0a0a0; background-color: #f3f3f3; color: #d50f25; } pre { overflow-x: auto; display: block; padding: 20px; border: 1px solid #a0a0a0; margin-bottom: 20px; white-space: pre-wrap; background-color: #f3f3f3; } /* Typography Helper Classes */ /** *
acts like an
*/ .hr { border-top: 1px solid #a0a0a0; margin: 30px 0; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-highlight { padding: 1px 5px; border-radius: 2px; background-color: #245dc1; color: #fff; } .text-uppercase { text-transform: uppercase; } .mute { color: #808080; } p.last, h1.last, h2.last, h3.last, h4.last, h5.last, address.last { margin-bottom: 0; } @media (max-width: 767px) { /** * 1. Hide background on mobile devices */ body { background: none; /* 1 */ background-color: #fff; } p.last, h1.last, h2.last, h3.last, h4.last, h5.last, address.last { margin-bottom: 20px; } .text-right { text-align: left; } } /* ========================================================================== =Typography - Links ========================================================================== */ a, a:visited { color: #1c1c1c; text-decoration: none; } /** * 1. Remove the gray background color from active links in IE 10. */ a:active { background: transparent; /* 1 */ } a:hover, a:focus { outline: 0; text-decoration: underline; } /* ========================================================================== =Typography - Lists ========================================================================== */ ul, ol { margin-bottom: 20px; list-style-position: inside; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; margin-left: 30px; } li {} ul { list-style-type: disc; } ol { list-style-type: decimal; } /* List Helper Classes */ ul.last, ol.last { margin-bottom: 0; } @media (max-width: 767px) { ul.last, ol.last { margin-bottom: 20px; } } /* ========================================================================== =Typography - Images ========================================================================== */ img { max-width: 100%; height: auto; border: none; } /* Images Helper Classes */ .img-align-left { float: left; margin: 5px 10px 0 0; } .img-align-right { float: right; margin: 5px 0 0 10px; } /* ========================================================================== =Typography - Tables ========================================================================== */ table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; background-color: transparent; } caption { margin: 20px 0; font-weight: 700; text-align: center; } table th, table td { padding: 8px; border-top: 1px solid #a0a0a0; text-align: left; vertical-align: top; } table th { border-top: 0; font-weight: 700; } table thead th { vertical-align: bottom; } /* ========================================================================== =Typography - Forms ========================================================================== */ form {} fieldset {} form p {} label { display: block; margin-bottom: 5px; } label span { color: #d50f25; } select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; } /* * 1. stop safari from overwriting input styles. Needs more testing */ input, textarea, select { /* -webkit-appearance: none; 1 */ display: block; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 6px 10px; border: 1px solid #a0a0a0; margin-bottom: 10px; background: #fff; color: #1c1c1c; font: 13px "PT Sans", Arial, sans-serif; line-height: 21px; letter-spacing: 1px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus { border-color: #1c1c1c; outline: 0; } select { height: 40px; } select:focus { outline: thin dotted #bbb; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } textarea { min-height: 100px; overflow: auto; } .radio, .checkbox { min-height: 18px; padding-left: 18px; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; margin-left: -18px; } input:-moz-placeholder, textarea:-moz-placeholder { color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; } /* ========================================================================== =Misc ========================================================================== */ .javascript-required, .modern-browser-required{ padding: 15px 0; background-color: #d50f25; color: #fff; text-align: center; font-weight: 700; } /* ========================================================================== =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; } .container1 { padding-right: 15px; padding-left: 15px; } .row { position: relative; margin-right: -15px; margin-left: -15px; } .row1 { position: relative; margin-right: -15px; margin-left: -85px; } .img1 { margin-right: 65px; } .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { width: 100%; 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; } .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: 1200px; } .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; } } /* ========================================================================== =Align ========================================================================== */ .float-left { float: left; } .float-right { float: right; } /* ========================================================================== =Clearing ========================================================================== */ /** * Automatically Clear Fix rows */ .row:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /** * Clear Fix hack * Usage: add class="fixed" to div's that have floated elements in them */ .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; } /* ========================================================================== =ResponsiveFormInputs ========================================================================== */ /** * 1. Reset float inherited from .span* * 2. Change padding inherited from .span* with the one set in base.css for inputs */ input.span1, textarea.span1, select.span1, input.span2, textarea.span2, select.span2, input.span3, textarea.span3, select.span3, input.span4, textarea.span4, select.span4, input.span5, textarea.span5, select.span5, input.span6, textarea.span6, select.span6, input.span7, textarea.span7, select.span7, input.span8, textarea.span8, select.span8, input.span9, textarea.span9, select.span9, input.span10, textarea.span10, select.span10, input.span11, textarea.span11, select.span11, input.span12, textarea.span12, select.span12 { float: none; /* 1 */ padding: 6px 10px; /* 2 */ } /* ========================================================================== =Wrap ========================================================================== */ #wrap { position: relative; background-color: #fff; } @media (max-width: 767px) { #wrap {} } /* ========================================================================== =Header Wrap ========================================================================== */ .header-style-1 #header-wrap, .header-style-2 #header-wrap { max-width: 1570px; margin: 0 auto; } .header-style-3 #header-wrap { margin-bottom: 120px; background: #1c1c1c url(../../content/backgrounds/1920x1080.jpg) no-repeat center center; } .header-style-3 #header-wrap { height: 365px; } #index.header-style-3 #header-wrap { height: auto; margin-bottom: 0; background: none; } @media (max-width: 767px) { .header-style-3 #header-wrap { background-image: none; } } /* ========================================================================== =Header ========================================================================== */ #header { margin: 0 auto; } /** * 1. z-index is 205 because the .tp-bannertimer is 200 */ .header-style-3 #header { position: absolute; z-index: 205; top: 0; right: 0; left: 0; margin: 0 auto; color: #fff; } @media (max-width: 767px) { .header-style-3 #header { position: relative; background-color: #1c1c1c; } } /* ========================================================================== =Logo ========================================================================== */ #logo { padding: 70px 0 0px 0; } #logo.hidden { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } #logo h2 { font-size: 18px; line-height: 30px; letter-spacing: 0px; text-transform: uppercase; } #logo h2 a { color: #1c1c1c; text-decoration: none; } #logo h2 small { display: block; font-family: "PT Sans", Arial, sans-serif; font-size: 10px; line-height: 18px; letter-spacing: 4px; } .header-style-2 #logo { padding: 85px 0 35px 0; } .header-style-2 #logo h2 { font-size: 26px; line-height: 36px; letter-spacing: 12px; text-align: center; } .header-style-2 #logo h2 small { color: #cacaca; line-height: 26px; } .header-style-3 #logo { margin-left: 50px; } .header-style-3 #logo h2 { font-size: 26px; line-height: 36px; letter-spacing: 8px; } .header-style-3 #logo h2 a { color: #fff; } @media (min-width: 768px) and (max-width: 991px) { #logo { padding-right: 30px; padding-left: 0px;/* 1 */ max-width: 100%; } } @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-top: 40px; padding-right: 50px; padding-left: 0px;/* 1 */ max-width: 80%; } .header-style-2 #logo h2, .header-style-3 #logo h2 { font-size: 60px; line-height: 60px; letter-spacing: 60px; text-align: left; } } /* ========================================================================== =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 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: -1px; left: 100%; } .sf-menu .sf-mega { position: absolute; z-index: 1025; /* 1 */ top: 100%; left: 0; right: 0; display: none; margin: 0 15px; } .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; margin-top: 95px; } .header-style-2 .sf-menu { float: none; margin-top: 0; text-align: center; } .header-style-2 .sf-menu > li { float: none; display: inline-block; margin-right: 25px; } .header-style-2 .sf-menu > li:last-child { margin-right: 0; } .sf-menu a { position: relative; display: block; padding: 10px; font: 15px "Playfair Display", Arial, sans-serif; color: #1c1c1c; text-decoration: none; } .header-style-2 .sf-menu a { text-align: left; } .header-style-2 .sf-menu > li > a:before { position: absolute; z-index: 1; top: -1px; right: -31px; display: inline-block; width: 0; height: 0; border-top: 39px solid #e0e0e0; border-right: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-style-2 .sf-menu > li > a:after { position: absolute; z-index: 1; top: -1px; right: -30px; display: inline-block; width: 0; height: 0; border-top: 39px solid #fff; border-right: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-style-2 .sf-menu > li:last-child > a:before, .header-style-2 .sf-menu > li:last-child > a:after { display: none; } .sf-menu > li > a, .sf-menu > li.dropdown > a { padding: 10px 0 105px; margin-right: 5px; color: #1c1c1c; font-size: 14px; text-transform: uppercase; } .header-style-2 .sf-menu > li > a, .header-style-2 .sf-menu > li.dropdown > a { padding-bottom: 65px; margin-right: 0; } .sf-menu > li:last-child > a, .sf-menu > li.dropdown:last-child > a { margin-right: 0; } .sf-menu > li > a span, .sf-menu > li.dropdown > a span { position: relative; padding: 10px; border: 1px solid transparent; border-radius: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; } .header-style-2 .sf-menu > li > a span, .header-style-2 .sf-menu > li.dropdown > a span { padding: 10px 15px 10px; border-radius: 0; } .header-style-2 .sf-menu > li > a span:before, .header-style-2 .sf-menu > li.dropdown > a span:before { position: absolute; z-index: 4; top: 0; left: -30px; display: inline-block; width: 0; height: 0; border-bottom: 39px solid transparent; border-left: 29px solid transparent; content: ""; -moz-transform: scale(0.9999); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-style-2 .sf-menu > li > a span:after, .header-style-2 .sf-menu > li.dropdown > a span:after { position: absolute; z-index: 4; top: -1px; right: -30px; display: inline-block; width: 0; height: 0; border-top: 39px solid transparent; border-right: 29px solid transparent; content: ""; -moz-transform: scale(0.9999); -webkit-transition: all 0.3s; transition: all 0.3s; } .header-style-2 .sf-menu > li > a:hover span:before, .header-style-2 .sf-menu > li.active > a span:before, .header-style-2 .sf-menu > li.sfHover > a span:before { border-bottom-color: #1c1c1c; } .header-style-2 .sf-menu > li > a:hover span:after, .header-style-2 .sf-menu > li.active > a span:after, .header-style-2 .sf-menu > li.sfHover > a span:after { border-top-color: #1c1c1c; } .sf-menu > li a i { margin-right: 5px; } .sf-menu > li.active > a span, .sf-menu > li.active > a:focus span, .sf-menu > li > a:hover span, .sf-menu > li.sfHover > a span { border-color: #cca352; text-decoration: none; } .sf-menu > li > a:focus span { border-color: transparent; } .header-style-2 .sf-menu > li.active > a span, .header-style-2 .sf-menu > li > a:hover span, .header-style-2 .sf-menu > li.sfHover > a span { border-color: transparent; background-color: #1c1c1c; color: #fff; } .sf-menu > li.sfHover ul li a:hover, .sf-menu > li.sfHover ul li.sfHover > a { color: #808080; } /* =DropDown ========================================================================== */ /** * 1. allow long menu items to determine submenu width */ .sf-menu li.dropdown ul { min-width: 180px; /* 1 */ border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; } .sf-menu > li.dropdown > ul { border-top: 3px solid #1c1c1c; } /* =Mega Menu Section ========================================================================== */ .sf-mega { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px 0; border: 1px solid rgba(0, 0, 0, 0.1); border-top: 3px solid #1c1c1c; background-color: #fff; } .sf-mega-section { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-right: 1px solid #a0a0a0; } .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%; } /* =Menu Arrows ========================================================================== */ .sf-arrows ul .sf-with-ul:after { position: absolute; top: 50%; right: 0; display: block; border: 4px solid transparent; border-left-color: #1c1c1c; margin-top: -2px; margin-right: 10px; content: ""; } .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: rgba(0, 0, 0, 0.3); } @media (min-width: 1200px) { .sf-menu > li > a span, .sf-menu > li.dropdown > a span { padding: 10px 15px 10px; } .header-style-2 .sf-menu > li > a span, .header-style-2 .sf-menu > li.dropdown > a span { padding: 10px 30px 10px; } } @media (min-width: 768px) and (max-width: 991px) { #menu { display: none; } } @media (max-width: 767px) { #menu { display: none; } } /* ========================================================================== =Menu From Left ========================================================================== */ a.menu-collaps { position: absolute; top: 55px; left: 15px; display: block; margin-top: 40px; color: #fff; } .menu-collaps i { font-size: 28px; line-height: 28px; } .nav { position: fixed; z-index: 1; top: 0; left: -100%; height: 100%; width: 375px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 80px; background-color: #1c1c1c; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav.nav-open { left: 0; } .nav h2 { font-size: 26px; line-height: 36px; letter-spacing: 8px; text-transform: uppercase; } .nav h2 a { color: #fff; text-decoration: none; } .nav h2 a small { display: block; font-family: "PT Sans", Arial, sans-serif; font-size: 10px; line-height: 18px; letter-spacing: 4px; } .nav .close-menu { position: absolute; z-index: 1; top: 25px; right: 25px; display: block; padding: 5px; color: #fff; font-size: 20px; text-align: center; text-decoration: none; } .sfl-menu { padding: 0; margin: 0; margin-top: 80px; list-style: none; } .sfl-menu li a { display: block; padding: 10px 0; color: #fff; font-size: 14px; text-decoration: none; text-transform: uppercase; } .sfl-menu li a:hover, .sfl-menu li.active a { color: #bbb; } @media (max-width: 767px) { .nav { width: 100%; overflow: auto; } .nav h2 { font-size: 20px; line-height: 28px; letter-spacing: 5px; text-align: left; } } /* ========================================================================== =Mobile Menu ========================================================================== */ #mobile-menu { border-bottom: 1px solid #a0a0a0; margin-bottom: 0; } #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; } #mobile-menu .sf-mega-section { float: none; width: 100%; padding: 0; border: none; } #mobile-menu .sf-mega-section ul { margin-left: 0; } #mobile-menu li a { position: relative; display: block; padding: 15px 25px; border-top: 1px solid #a0a0a0; color: #1c1c1c; font-size: 13px; text-align: left; text-decoration: none; } #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 #a0a0a0; color: #1c1c1c; font-size: 20px; line-height: 50px; text-align: center; cursor: pointer; } #mobile-menu .mobile-menu-submenu-arrow:hover { background-color: #f3f3f3; } #mobile-menu li a:hover {} #mobile-menu { display: none; } /* ========================================================================== =Mobile menu trigger ========================================================================== */ #mobile-menu-trigger { float: right; display: none; color: #1c1c1c; font-size: 32px; } @media (min-width: 768px) and (max-width: 991px) { #mobile-menu-trigger { display: block; margin-top: 97px; margin-right: 0; } .header-style-2 #mobile-menu-trigger { margin-top: -106px; } } @media (max-width: 767px) { #mobile-menu-trigger { position: absolute; top: 60px; right: 25px; display: block; padding: 10px; margin-top: 0; } .header-style-2 #mobile-menu-trigger { top: -127px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-style-2 #mobile-menu-trigger { top: -113px; } } /* ========================================================================== =Custom search form ========================================================================== */ #custom-search-button + nav { margin-right: 40px; } #custom-search-button { position: absolute; top: 105px; right: 25px; display: block; width: 16px; height: 18px; background: url(../images/bg-search.png) no-repeat center center; } /** * 1. z-index is 1030 because the dropdown menu has a z-index of 1025 */ #custom-search-form { position: absolute; z-index: 1030; /* 1 */ top: 160px; right: 15px; display: none; } #custom-search-form:before { position: absolute; z-index: 1; top: -9px; right: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #a0a0a0; content:""; } #custom-search-form:after { position: absolute; z-index: 2; top: -7px; right: 10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #fff; content:""; } #custom-search-submit { display: none; } #custom-search-form #s { width: 220px; padding: 8px 10px; border-radius: 0; background-color: #fff; } #custom-search-form #s:focus { border-color: #a0a0a0; } @media (min-width: 768px) and (max-width: 991px) { #custom-search-button { right: 75px; } #custom-search-form { right: 65px; } } @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 */ } #custom-search-button { display: none; } } /* ========================================================================== =Sticky Header ========================================================================== */ @media (min-width: 1025px) { /** * 1. The height of the #header-wrap can be increased or decreased to accommodate the logo */ #header-wrap { position: relative; height: 228px; /* 1 */ } .header-style-2 #header-wrap { height: 285px; /* 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; left: 0; right: 0; padding: 5px 0 0 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); margin: 0 auto; background-color: rgba(255, 255, 255, 1); -webkit-transition: padding 0.3s; transition: padding 0.3s; } #header.stuck #logo { padding: 15px 0 10px 0; } .header-style-1 #header.stuck #logo h2 { font-size: 18px; line-height: 24px; } .header-style-1 #header.stuck #logo h2 small { display: none; } .header-style-2 #header.stuck #logo { display: none; } #header.stuck .sf-menu { margin-top: 35px; } .header-style-1 #header.stuck .sf-menu { margin-top: 20px; } .header-style-2 #header.stuck .sf-menu { margin-top: 15px; } .header-style-1 #header.stuck .sf-menu > li > a, .header-style-1 #header.stuck .sf-menu > li.dropdown > a { padding-bottom: 35px; } .header-style-2 #header.stuck .sf-menu > li > a, .header-style-2 #header.stuck .sf-menu > li.dropdown > a { padding-bottom: 30px; } #header.stuck #custom-search-button { top: 28px; } #header.stuck #custom-search-form { top: 83px; } } /* ========================================================================== =Content ========================================================================== */ #content { padding-bottom: 100px; } .header-style-1 #content, .header-style-2 #content, .header-style-3 #content { max-width: 1570px; margin: 0 auto; } /* ========================================================================== =Page Header ========================================================================== */ #page-header {} /* ========================================================================== =Footer ========================================================================== */ #footer {} #footer a { color: #fff; } .header-style-1 #footer, .header-style-2 #footer, .header-style-3 #footer { max-width: 1570px; margin: 0 auto; } #footer-widget-area-1 {} #footer-widget-area-2 {} #footer-widget-area-3 {} #footer-widget-area-4 {} /* ========================================================================== =Back to top ========================================================================== */ #back-to-top { position: fixed; z-index: 1010; right: -40px; bottom: 20px; width: 40px; height: 40px; border-radius: 10px; background-color: #1c1c1c; color: #fafafa; font-size: 30px; letter-spacing: 0; text-align: center; opacity: 0.5; cursor: pointer; text-decoration: none; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } #back-to-top i { font-size: 26px; 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; } #bio { padding-top: 130px; } #gallery { padding-top: 130px; } #instagram { padding-top: 130px; } #instagram .ewf_widget_instagram { margin-bottom: 0; } #blog { padding-top: 130px; margin-bottom: 100px; } #shop { padding-top: 130px; } #shop ul.products { margin-bottom: 0; } #connect { padding-top: 130px; } #contact { padding-top: 130px; } /* ========================================================================== #Slider ========================================================================== */ .main-slider { position: relative; overflow: hidden; margin: 0 auto 60px auto; } .main-slider .main-slider__slides { margin-bottom: 0; list-style: none; position: relative; } .main-slider .main-slider__slides li { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 50px 30px; min-height: 250px; } @media (min-width: 768px) { .main-slider .main-slider__slides li { padding: 75px 15px; } } @media (min-width: 992px) { .main-slider .main-slider__slides li { padding: 75px 20px; } } @media (min-width: 1200px) { .main-slider .main-slider__slides li { padding: 100px 30px; } } .main-slider .main-slider__slides li .main-slider-slide__overlay { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.25); } .main-slider .main-slider__slides li .main-slider-slide__content { position: relative; z-index: 2; } @media (min-width: 768px) { .main-slider .main-slider__slides li .main-slider-slide__content { width: 730px; min-height: 300px; margin: 0 auto; } } @media (min-width: 992px) { .main-slider .main-slider__slides li .main-slider-slide__content { width: 940px; min-height: 350px; } } @media (min-width: 1200px) { .main-slider .main-slider__slides li .main-slider-slide__content { width: 1140px; min-height: 450px; } } @media (min-width: 768px) { .main-slider-slide__content--align-center { text-align: center; } .main-slider-slide__content--align-right { text-align: right; } } .main-slider .main-slider-slide__content-wrap *:last-child { margin-bottom: 0; } @media (min-width: 768px) { .main-slider-slide__content--valign-middle .main-slider-slide__content-wrap { position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .main-slider-slide__content--valign-bottom .main-slider-slide__content-wrap { position: absolute; bottom: 0; width: 100%; } } .main-slider-slide__content h1 { color: #fff; } .main-slider-slide__content h2 { color: #fff; } .main-slider-slide__content p { color: #fff; } .main-slider .main-slider__pager { position: absolute; width: 100%; bottom: 0; padding: 15px; z-index: 3; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 768px) { .main-slider .main-slider__pager { left: 50%; bottom: 10px; padding: 15px 0; width: 730px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 992px) { .main-slider .main-slider__pager { width: 940px; bottom: 15px; } } @media (min-width: 1200px) { .main-slider .main-slider__pager { width: 1140px; } } @media (min-width: 1400px) { .main-slider .main-slider__pager { bottom: 25px; } } .main-slider .main-slider__pager .slick-dots { list-style: none; margin-bottom: 0; } .main-slider .main-slider__pager .slick-dots:after { display: block; visibility: hidden; height: 0; font-size: 0; content: ' '; clear: both; } .main-slider .main-slider__pager.main-slider__pager--align-left .slick-dots { text-align: left; } .main-slider .main-slider__pager.main-slider__pager--align-center .slick-dots { text-align: center; } .main-slider .main-slider__pager.main-slider__pager--align-right .slick-dots { text-align: right; } .main-slider .main-slider__pager .slick-dots li { position: relative; z-index: 2; display: inline-block; border-radius: 50%; padding: 1px; margin-right: 3px; } .main-slider .main-slider__pager .slick-dots li:last-child { margin-right: 0; } .main-slider .main-slider__pager .slick-dots li button { display: block; padding: 0; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background-color: transparent; cursor: pointer; outline: none; color: transparent; font-size: 0; line-height: 0; } .main-slider .main-slider__pager .slick-dots li.slick-active button { background-color: #fff; } .main-slider .main-slider__arrows a { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 24px; text-decoration: none; } .main-slider .main-slider__arrows a:hover { color: #fff; } .main-slider .main-slider__arrows .slick-prev { left: 5px; } .main-slider .main-slider__arrows .slick-next { right: 5px; } @media (min-width: 767px) { .main-slider .main-slider__arrows a { font-size: 30px; } } @media (min-width: 992px) { .main-slider .main-slider__arrows .slick-prev { left: 10px; } .main-slider .main-slider__arrows .slick-next { right: 10px; } } @media (min-width: 1400px) { .main-slider .main-slider__arrows .slick-prev { left: 25px; } .main-slider .main-slider__arrows .slick-next { right: 25px; } } /* ========================================================================== =Accordions and Toogles ========================================================================== */ /* =Accordion ========================================================================== */ .accordion { margin-bottom: 30px; } .accordion-item { position: relative; display: block; padding: 10px 10px 10px 50px; border-bottom: 1px solid #ebebeb; color: #1c1c1c; font-family: "Prata", Arial, sans-serif; font-size: 12px; font-weight: 700; } a.accordion-item { color: #1c1c1c; } .accordion-item:after { position: absolute; top: 10px; left: 20px; font-size: 18px; content: "+"; } .accordion-item.active:after { content: "-"; } .accordion-item:hover, .accordion-item.active { text-decoration: none; } .accordion-item-content { display: none; padding: 10px 10px 10px 50px; text-align: justify; } .accordion-item-content p: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; } /* =Toogle ========================================================================== */ .toggle { margin-bottom: 30px; } .toggle-item { position: relative; display: block; padding: 10px 10px 10px 50px; border-bottom: 1px solid #ebebeb; color: #1c1c1c; font-family: "Prata", Arial, sans-serif; font-size: 12px; font-weight: 700; } a.toggle-item { color: #1c1c1c; } .toggle-item:after { position: absolute; top: 10px; left: 20px; font-size: 18px; content: "+"; } .toggle-item.active:after { content: "-"; } .toggle-item:hover, .toggle-item.active { text-decoration: none; } .toggle-item-content { display: none; padding: 10px 10px 10px 50px; text-align: justify; } .toggle-item-content p: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: 13px 15px; border: 1px solid #a0a0a0; border-radius: 3px; margin-bottom: 30px; } .alert i { position: relative; top: 1px; margin-right: 7px; font-size: 16px; } .alert.info { border: 1px solid #86cde3; background-color: #cce9f2; color: #3194b1; } .alert.success { border: 1px solid #b3cda1; background-color: #d8f1c6; color: #749958; } .alert.error { border: 1px solid #e1a1a1; background-color: #f9d9d9; color: #b55454; } .alert.warning { border: 1px solid #d1c9ae; background-color: #fbf4dd; color: #978c68; } /* ========================================================================== =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; } /* ========================================================================== =Buttons ========================================================================== */ /* =Default Button ========================================================================== */ .btn { position: relative; overflow: hidden; z-index: 2; display: inline-block; padding: 5px 25px; border-radius: 20px; margin: 0 5px 20px 0; background-color: #1c1c1c; color: #fff; font-size: 12px; line-height: 18px; vertical-align: middle; text-decoration: none !important; text-transform: uppercase; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .btn:after { position: absolute; z-index: -1; top: 0; left: 51%; width: 0; height: 100%; background-color: #cca352; color: #1c1c1c; opacity: 0; content: ""; -webkit-transform: translateX(-51%); -ms-transform: translateX(-51%); transform: translateX(-51%); -webkit-transition: all 0.3s; transition: all 0.3s; } a.btn { color: #fff; } .btn:focus { outline: 0; } .btn:hover:after { width: 100%; opacity: 1; } .btn:hover { background-color: transparent; color: #fff; } .btn-large { padding: 12px 35px; } .btn i, .btn-large i { float: left; margin: 2px 8px 0 -4px; font-size: 14px; line-height: 14px; } .btn.alt { background-color: transparent; color: #1c1c1c; } .btn.alt:after { background-color: #1c1c1c; } .btn.alt:hover { color: #fff; } /* =Colored Buttons ========================================================================== */ .btn-white { border: 1px solid #a0a0a0; background-color: #f3f3f3; color: #1c1c1c; } a.btn-white { color: #1c1c1c; } .btn-white:hover { background: #f0f0f0; } .btn-black { border: 1px solid #464646; background-color: #464646; color: #fff; } a.btn-black { color: #fff; } .btn-black:hover { background: #535353; } .btn-blue { border: 1px solid #1f70ad; background-color: #2778c8; color: #fff; } a.btn-blue { color: #fff; } .btn-blue:hover { background: #287fc8; } .btn-red { border: 1px solid #b23730; background-color: #c74039; color: #fff; } a.btn-red { color: #fff; } .btn-red:hover { background: #ce4640; } .btn-green { border: 1px solid #819633; background-color: #8da046; color: #fff; } a.btn-green{ color: #fff; } .btn-green:hover { background: #93a749; } /* ========================================================================== =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. Check list * 2. Fill circle * */ ul.check, /* 1 */ ul.fill-circle { list-style: none; } /* 2 */ ul.fill-circle li:before { position: relative; top: -1px; width: auto; height: auto; margin-right: 15px; font-family: 'FontAwesome'; font-size: 8px; font-style: normal; } ul.check li:before { display: inline-block; width: 16px; height: 16px; border: 1px solid #1c1c1c; margin-right: 15px; font-family: 'FontAwesome'; font-size: 10px; line-height: 16px; letter-spacing: 0; text-align: center; } ul.check li:before { content: ""; } ul.fill-circle li:before { content: ""; } /* ========================================================================== =Dividers ========================================================================== */ .divider { margin: 30px 0; } .divider.single-line { border-top: 1px solid #a0a0a0; } .divider.double-line { border-top: 4px double #a0a0a0; } .divider.single-dotted { height: 1px; background: url(../images/bg-single-dotted.png) repeat-x top left ; } .divider.double-dotted { height: 4px; background: url(../images/bg-double-dotted.png) repeat-x top left; } /* ========================================================================== =Google Maps ========================================================================== */ /** * 1. needed so that Google Maps controls are not distorted */ .google-map { width: 100%; height: 400px; } .google-map img { max-width: none; } /* 1 */ .map { margin-bottom: 40px; } @media (max-width: 767px) { .map { padding: 0 20px; } .row .map { padding: 0; } } /* ========================================================================== =Headlines ========================================================================== */ .headline { position: relative; margin-bottom: 70px; text-align: center; } .headline h1:after { position: absolute; top: 3px; left: 50%; display: block; height: 55px; border-left: 0px solid #808080; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .headline h1 { padding-left: 15px; margin-bottom: 0; text-transform: uppercase; letter-spacing: 15px; } .headline:before, .headline:after { display: block; width: 50px; border-top: 2px solid #cca352; margin: 0 auto; content: ""; } .subheadline { margin-bottom: 12px; text-align: center; } .subheadline:after { display: block; width: 50px; border-top: 2px solid #cca352; margin: 0 auto; content: ""; } .subheadline h4 { margin-bottom: 12px; text-transform: uppercase; letter-spacing: 7px; } @media (max-width: 767px) { .headline h1 { padding-left: 8px; font-size: 32px; letter-spacing: 8px; } } /* ========================================================================== =Icon Boxes ========================================================================== */ /* =Icon Box 1 ========================================================================== */ .icon-box-1 { position: relative; padding: 40px 30px; border: 1px solid #a0a0a0; margin-bottom: 30px; text-align: center; } .icon-box-1 > i { display: block; font-size: 50px; margin-bottom: 0px; } .icon-box-1 > img { margin-bottom: 10px; } .icon-box-1 h4 { margin-bottom: 20px; } .icon-box-1 .icon-box-content {} .icon-box-1 .icon-box-content .btn { margin-bottom: 0; } /* =Icon Box 2 ========================================================================== */ .icon-box-2 { position: relative; padding: 40px 30px; border: 1px solid #a0a0a0; margin-bottom: 30px; text-align: center; } .icon-box-2 > i { display: block; font-size: 50px; margin-bottom: 0px; } .icon-box-2 > img { margin-bottom: 10px; } .icon-box-2 h4 { margin-bottom: 0px; } .icon-box-2 .icon-box-content {} .icon-box-2 .icon-box-content .btn { margin-bottom: 0; } /* ========================================================================== =Milestones ========================================================================== */ .milestone { position: relative; padding: 40px 15px; border: 1px solid transparent; margin-bottom: 30px; text-align: center; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } /* * 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-family: "Prata", Arial, sans-serif; font-size: 72px; line-height: 94px; } .milestone .milestone-description { font-family: "PT Sans", Arial, sans-serif; font-size: 14px; line-height: 27px; } .milestone .milestone-description h4 { margin-bottom: 20px; } .milestone .milestone-description p { margin-bottom: 0; } .milestone:hover { border-color: #a0a0a0; } /* ========================================================================== =Our Process ========================================================================== */ /* =Horizontal process ========================================================================== */ .horizontal-process-builder { position: relative; margin-bottom: 40px; list-style: none; text-align: center; } .horizontal-process-builder:before { position: absolute; z-index: 1; top: 60px; left: 130px; display: block; width: 75%; border-top: 1px solid #a0a0a0; content: ""; } .horizontal-process-builder li { float: left; width: 25%; } .horizontal-process-builder li i, .horizontal-process-builder li h1 { position: relative; z-index: 2; display: block; width: 120px; height: 120px; overflow: hidden; border: 1px solid #a0a0a0; border-radius: 50%; outline: 5px solid #fff; margin: 0 auto 20px; background-color: #fff; background-clip: padding-box; color: #1c1c1c; font-size: 48px; line-height: 120px; -webkit-transition: all 0.3s; transition: all 0.3s; } .horizontal-process-builder li:hover i, .horizontal-process-builder li:hover h1 { background-color: #f3f3f3; } .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%; } @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%; } } /* ========================================================================== =Pie charts ========================================================================== */ .pie-chart { position: relative; margin: 0 auto 20px auto; 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-family: "Prata", Arial, sans-serif; font-size: 24px; font-weight: 700; } .pie-chart-description { display: block; font-size: 12px; text-align: center; } /* ========================================================================== =Pricing Tables ========================================================================== */ .pricing-table { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 50px 30px; border: 1px solid #a0a0a0; margin-bottom: 30px; text-align: center; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .pricing-table-header { margin-bottom: 20px; } .pricing-table-header h2 { margin-bottom: 30px; font-size: 36px; text-transform: uppercase; } .pricing-table-header h1 { margin-bottom: 0; font-size: 72px; } .pricing-table-header h1 sup { margin-right: -10px; font-size: 24px; vertical-align: text-top; } .pricing-table-header h1 sub { margin-left: -15px; font-size: 14px; vertical-align: baseline; } .pricing-table-header h4 {} .pricing-table-offer {} .pricing-table-offer ul { list-style: none; } .pricing-table-offer ul li:after { display: block; width: 50%; margin: 10px auto; border-bottom: 1px solid #a0a0a0; content: ""; } .pricing-table-offer ul li:last-child:after { border-bottom: none; } .pricing-table:hover { border-color: #1c1c1c; } @media (min-width: 768px) and (max-width: 991px) { .pricing-table-header h1 { font-size: 64px; } } /* ========================================================================== =Progress Bar ========================================================================== */ .progress-bar-description { position: relative; display: block; margin-bottom: 20px; font-family: "Prata", Arial, sans-serif; line-height: 14px; } .progress-bar-description span { position: absolute; top: 0; left: 0; font-family: "PT Sans", Arial, sans-serif; } .progress-bar { position: relative; display: block; height: 4px; margin-bottom: 20px; background-color: #f3f3f3; } .progress-bar .progress-bar-outer { position: absolute; top: 0; left: 0; height: 100%; background-color: #1c1c1c; } .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%; } /* ========================================================================== =Shopping ========================================================================== */ ul.products { margin: -15px -15px 70px -15px; list-style: none; } ul.products li.product { float: left; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px; text-align: center; } ul.products.four-cols li.product { width: 25%; } ul.products.three-cols li.product { width: 33.3333333333333%; } ul.products li.product a { color: #1c1c1c; text-decoration: none; } ul.products li.product img { width: 100%; border: 1px solid #e0e0e0; margin-bottom: 25px; } ul.products li.product h4 small { display: block; font-family: "PT Sans", Arial, sans-serif; text-transform: uppercase; } ul.products li.product h5.price { margin-bottom: 20px; } ul.products li.product .btn { margin: 0; color: #fff; } ul.products li.product .btn:hover { color: #1c1c1c; } .product { margin-bottom: 100px; } .product .images { overflow: hidden; float: left; width: 41.66666667%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #e0e0e0; margin-bottom: 40px; } .product .summary { float: left; width: 58.33333333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 30px; margin-bottom: 40px; } .product .summary h3 { margin-bottom: 20px; } .product .summary h3 small { display: block; font-family: "PT Sans", Arial, sans-serif; font-size: 14px; letter-spacing: 5px; text-transform: uppercase; } .product .summary select { width: 50%; margin: 20px 0; text-transform: uppercase; } .product .summary .widget_tag_cloud { margin: 40px 0; } .product .summary h3.price { display: inline-block; margin-right: 30px; vertical-align: middle; } .product .summary .social-media { margin-top: 30px; } /* * 1. Clearfix hack */ .product:after { /* 1 */ visibility: hidden; display: block; height: 0; font-size: 0; content: " "; clear: both; } .woocommerce-tabs { margin-bottom: 100px; } .shop_table { font-family: "Prata", Arial, sans-serif; font-size: 16px; } .shop_table th, .shop_table td { padding: 40px 10px; border-top: none; vertical-align: middle; } .shop_table thead th, .shop_table thead td { padding: 10px; } .shop_table th { color: #808080; font-weight: 400; } .shop_table tr { border-bottom: 1px solid #e0e0e0; } .shop_table tr:last-child { border-bottom: none; } .shop_table a { color: #1c1c1c; } .shop_table td.actions { text-align: right; } .coupon { float: left; width: 50%; text-align: left; } .coupon label { display: none; } .coupon input { display: inline-block; } .coupon input[type="submit"] { position: relative; top: 9px; margin-left: 20px; } .shop_table td.actions > input[type="submit"] { margin-top: 9px; } .shop_table tfoot { border-top: 1px solid #e0e0e0; } .cart-collaterals {} .cart_totals { float: right; width: 35%; } .cart_totals h3 { margin-bottom: 20px; } .cart_totals table { font-family: "Prata", Arial, sans-serif; font-size: 16px; } .cart_totals table th, .cart_totals table td { padding: 20px 10px; border-top: 1px solid #e0e0e0; font-weight: 400; } .cart_totals table td { text-align: right; } .login { margin-bottom: 50px; } .login input[type="text"], .login input[type="password"] { width: 100%; padding: 10px 20px; margin: 20px 0; } .login input[type="checkbox"] { display: inline-block; } .login input[type="submit"] { margin-right: 30px; vertical-align: inherit; } .login label { display: inline-block; } .login .lost_password { margin-left: 30px; display: inline-block; } .login .lost_password a { color: #1c1c1c; } #customer_details { margin-bottom: 50px; } .checkout input[type="text"], .checkout input[type="password"], .checkout select { width: 100%; margin: 20px 0; } .checkout input[type="checkbox"] { display: inline-block; margin-bottom: 20px; } .checkout label { display: inline-block; padding-left: 5px; } .payment_methods { list-style: none; margin: 40px 0; } .payment_methods li input[type="radio"] { display: inline-block; } .payment_methods li label { display: inline-block; padding-left: 5px; font-size: 16px; } @media (max-width: 767px) { ul.products li.product, ul.products.four-cols li.product, ul.products.three-cols li.product { float: none; width: 100%; } .product .images, .product .summary { float: none; width: 100%; } .product .summary { padding-left: 0; } .shop_table tr { border-bottom: none; } .shop_table th, .shop_table td { padding: 10px; } .shop_table td.actions { text-align: left; } .shop_table tfoot tr:first-child th { padding-top: 50px; } .coupon { float: none; width: 100%; } .coupon input[type="submit"] { margin-left: 0; } .cart_totals { float: none; width: 100%; } .cart_totals table tr { border-top: none; } .cart_totals table td { text-align: left; } .login label { display: block; } .login .lost_password { margin-left: 0; } } /* ========================================================================== =Social Media ========================================================================== */ a.social-icon { display: inline-block; width: 25px; height: 25px; border: 2px solid #1c1c1c; border-radius: 50%; margin-right: 25px; margin-bottom: 1px; color: #1c1c1c; text-align: center; letter-spacing: 0; } a.social-icon:last-child { margin-right: 0; } a.social-icon i { font-size: 14px; line-height: 25px; } 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; } @media (max-width: 767px) { a.social-icon { margin-right: 10px; } } /* ========================================================================== =Styled Tables ========================================================================== */ .table-bordered { border: 1px solid #a0a0a0; border-left: none; border-collapse: separate; } .table-bordered th, .table-bordered td { border-left: 1px solid #a0a0a0; } .table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: none; } .table-condensed th, .table-condensed td { padding: 4px 8px; } @media (max-width: 480px) { /** * Force table to not be like tables anymore */ table, thead, tbody, tfoot, th, td, tr { display: block; } .table-bordered { border-top: none; } /** * Hide table headers */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border-top: 1px solid #bbb; } td:first-child { border-top: none !important; } } /* ========================================================================== =Tabs ========================================================================== */ /* =Horizontal tabs ========================================================================== */ /* * 1. Wraps around a horizontal tab group */ .tabs-container {} /* 1 */ .tabs-container .tabs-menu { border-bottom: 1px solid #e0e0e0; 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 51px; border: 1px solid transparent; margin-bottom: -1px; color: #1c1c1c; font-family: "Prata", Arial, sans-serif; text-decoration: none; } .tabs-container .tabs-menu li a:hover { text-decoration: none; } .tabs-container .tabs-menu li.active a { border-color: #e0e0e0; border-bottom-color: #fff; background-color: #fff; color: #1c1c1c; } .tabs-container .tabs { border: 1px solid #e0e0e0; border-top: none; margin-bottom: 80px; } .tabs-container .tab-content { padding: 25px 35px; background-color: #fff; text-align: justify; } .tabs-container .tab-content p: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 #e0e0e0; 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 #e0e0e0; } .tabs-container .tabs-menu li.active a { padding: 20px 25px; border-bottom-color: #bbb; margin: 0; background-color: #fff; color: #1c1c1c; } } /* ========================================================================== =Testimonials ========================================================================== */ .testimonial { margin-bottom: 30px; text-align: center; } .testimonial blockquote { position: relative; margin-bottom: 20px; } .testimonial blockquote:before { display: block; margin-bottom: -25px; color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 72px; line-height: 72px; content: "\201c"; } .testimonial blockquote p { margin-bottom: 0; font-style: normal; } .testimonial img { float: left; border-radius: 50%; margin-right: 20px; } .testimonial h5 { margin-top: 40px; } .testimonial a {} .testimonial h5 span { color: #999; } /* ========================================================================== =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(5, 9, 18, 0.78); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .portfolio-item-overlay:before { position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -22px; color: #fff; font-family: "Prata", Arial, sans-serif; font-size: 72px; line-height: 72px; opacity: 0; content: "+"; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s 0.2s; transition: all 0.3s 0.2s; } .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-overlay-actions { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: -22px; text-align: center; } /* ========================================================================== =Portfolio Filter ========================================================================== */ .portfolio-filter ul { margin-bottom: 90px; list-style: none; text-align: center; } .portfolio-filter ul li { position: relative; display: inline; margin-right: 24px; } .portfolio-filter ul li:last-child { margin-right: 0; } .portfolio-filter ul li:after { position: absolute; z-index: 2; top: -10px; right: -26px; display: inline-block; width: 0; height: 0; border-top: 39px solid #e0e0e0; border-right: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); } .portfolio-filter ul li:before { position: absolute; z-index: 3; top: -10px; right: -25px; display: inline-block; width: 0; height: 0; border-top: 39px solid #fff; border-right: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); } .portfolio-filter ul li:last-child:after, .portfolio-filter ul li:last-child:before { display: none; } .portfolio-filter ul li a { position: relative; display: inline-block; color: #1c1c1c; padding: 7px 20px; font-size: 12px; letter-spacing: 3px; text-decoration: none; text-transform: uppercase; } .portfolio-filter ul li a:before { position: absolute; z-index: 4; top: 0; left: -29px; display: inline-block; width: 0; height: 0; border-bottom: 39px solid transparent; border-left: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); } .portfolio-filter ul li a:after { position: absolute; z-index: 4; top: 0; right: -29px; display: inline-block; width: 0; height: 0; border-top: 39px solid transparent; border-right: 30px solid transparent; content: ""; -moz-transform: scale(0.9999); } .portfolio-filter ul li a.active, .portfolio-filter ul li a:hover { background-color: #1c1c1c; color: #fff; } .portfolio-filter ul li a.active:before, .portfolio-filter ul li a:hover:before { border-bottom-color: #1c1c1c; } .portfolio-filter ul li a.active:after, .portfolio-filter ul li a:hover:after { border-top-color: #1c1c1c; } @media (max-width: 767px) { .portfolio-filter ul li { display: block; margin-right: 0; margin-bottom: 15px; } .portfolio-filter ul li:after, .portfolio-filter ul li:before { display: none; } } /* ========================================================================== =Portfolio Pagination ========================================================================== */ .pagination { list-style: none; text-align: center; } .pagination li { display: inline-block; } .pagination a { display: block; width: 30px; height: 30px; border: 2px solid #1c1c1c; border-radius: 50%; margin-right: 10px; margin-bottom: 2px; color: #1c1c1c; font-family: "Prata", Arial, sans-serif; line-height: 30px; letter-spacing: 0; text-align: center; text-decoration: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .pagination li:last-child a { margin-right: 0; } .pagination li a:hover, .pagination li.current a { background-color: #1c1c1c; color: #fff; } /* ========================================================================== =Portfolio Columns ========================================================================== */ .portfolio-columns { margin: -15px -15px 15px -15px; list-style: none; } .portfolio-columns .item { float: left; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; } .portfolio-columns .item .portfolio-item { margin-bottom: 0; } @media (min-width: 1200px) { .portfolio-columns .item {} } @media (min-width: 768px) and (max-width: 991px) { .portfolio-columns .item { width: 33.3333333333%; padding: 7.5px; } } @media (max-width: 767px) { .portfolio-columns .item { float: none; width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .portfolio-columns .item { float: left; width: 50%; } } /* ========================================================================== =Portfolio Grid ========================================================================== */ .portfolio-grid { margin: -15px -15px 100px -15px; list-style: none; } .portfolio-grid .item { float: left; width: 25%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px; } .portfolio-grid .portfolio-item { margin-bottom: 0; } @media (min-width: 768px) and (max-width: 991px) { .portfolio-grid .item { width: 33.3333333333%; } } @media (max-width: 767px) { .portfolio-grid .item { float: none; width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .portfolio-grid .item { float: left; width: 50%; } } /* ========================================================================== =Portfolio Strip ========================================================================== */ .portfolio-strip { margin-bottom: 30px; list-style: none; } .portfolio-strip .item { float: left; width: 25%; } .portfolio-strip .item:last-child { display: none; } .portfolio-strip .portfolio-item { margin-bottom: 0; } @media (min-width: 1200px) { .portfolio-strip .item { width: 20%; } .portfolio-strip .item:last-child { display: block; } } @media (min-width: 768px) and (max-width: 991px) { .portfolio-strip .item { width: 33.3333333333%; } .portfolio-strip .item:last-child { display: block; } } @media (max-width: 767px) { .portfolio-strip .item { float: none; width: 100%; } .portfolio-strip .item:last-child { display: block; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .portfolio-strip .item { float: left; width: 50%; } } /* ========================================================================== =Contact form ========================================================================== */ #contact-form { overflow: hidden; margin-bottom: 30px; } #contact-form fieldset {} label.validation-error { color: #d50f25; } input.validation-error, textarea.validation-error, select.validation-error { border: 1px solid #a0a0a0; } #contact-form #formstatus {} #contact-form textarea {} /* ========================================================================== =Blog ========================================================================== */ .blog-post { margin-bottom: 100px; text-align: left; } .blog-post-title { width: 85%; margin: 0 auto 40px auto; } .blog-post-title h2 { margin: 20px 0; } .blog-post-title h2 a { color: #1c1c1c; } .blog-post-title h2:before, .blog-post-title h2:after { display: block; width: 25px; border-top: 2px solid #1c1c1c; margin: 5px auto; content: ""; } .blog-post-title h6 { text-transform: uppercase; color: #808080; } .blog-post-title h6 a { color: #808080; } .blog-post-thumb { margin-bottom: 45px; } .blog-post-thumb img { max-width: 100%; height: auto; display: block; } .blog-post-thumb blockquote { padding: 100px 50px 80px 50px; background-color: #1c1c1c; color: #fff; text-align: center; text-transform: uppercase; } .blog-post-thumb blockquote:before { display: block; font-size: 140px; line-height: 80px; font-weight: 700; content: "\201c"; } .blog-post-thumb blockquote h1 { margin-bottom: 40px; font-size: 60px; line-height: 72px; font-weight: 700; } .blog-post-thumb blockquote h3:before, .blog-post-thumb blockquote h3:after { margin: 0 5px; content: "-"; } .blog-post-info { width: 85%; margin: 0 auto; } .blog-post-info .btn { margin: 20px 0 40px 0; } .blog-post-info blockquote { position: relative; padding-top: 50px; margin: 50px 0; } .blog-post-info blockquote:before { position: absolute; top: 0; left: 50%; display: block; margin-left: -15px; color: #808080; font-size: 100px; line-height: 60px; content: "\201c"; } .blog-post-readmore {} .blog-post-2 { padding: 80px 0; text-align: center; } .blog-post-2.with-image { background: no-repeat center center; color: #fff; } .blog-post-2 .blog-post-title { width: 75%; margin: 0 auto; } .blog-post-2 .btn { border-color: #fff; margin-top: 40px; margin-bottom: 0; background-color: transparent; } .blog-post-2.with-image .blog-post-title h2 a, .blog-post-2.with-image .blog-post-title h6, .blog-post-2.with-image .blog-post-title h6 a { color: #fff; } .blog-post-2.with-image .blog-post-title h2:before, .blog-post-2.with-image .blog-post-title h2:after { border-color: #fff; } @media (max-width: 767px) { .blog-post-title { width: 100%; } .blog-post-info { width: 100%; } .blog-post-thumb blockquote { padding: 100px 15px 80px 15px; } .blog-post-thumb blockquote h1 { font-size: 28px; line-height: 42px; } .blog-post-2 .blog-post-title { width: 100%; } } /* ========================================================================== =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: 30px 0; margin-bottom: 30px; color: #fff; background-color: #333; 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; } .fullwidth-section-video { position: absolute; overflow: hidden; z-index: 1; top: 0; width: 100%; height: 100%; } /** * * 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-x; } .animated-parallax { background-repeat: repeat-x; } .fullwidth-section a, .fullwidth-section .tabs-container .tabs-menu li a, .fullwidth-section .portfolio-filter ul li a { color: #fff; } .fullwidth-section .btn.alt { border-color: #fff; color: #fff; } .fullwidth-section .btn.alt:hover { border-color: #1c1c1c; } .fullwidth-section ul.check li:before, .fullwidth-section .headline h1:before, .fullwidth-section .headline h1:after, .fullwidth-section .pricing-table:hover, .fullwidth-section a.social-icon, .fullwidth-section .blog-post-title h2:before, .fullwidth-section .blog-post-title h2:after { border-color: #fff; } .fullwidth-section .horizontal-process-builder li i, .fullwidth-section .horizontal-process-builder li h1 { outline: 0; } .fullwidth-section .tabs-container .tab-content, .fullwidth-section .tabs-container .tabs-menu li.active a { color: #1c1c1c; } /* Backgrounds for fullwidth section */ #bg-video { padding: 400px 0 250px 0; margin-top: 30px; margin: 0; background-image: url(../../content/backgrounds/1920x1080.jpg); } @media (max-width: 767px) { .fullwidth-section { -webkit-background-size: cover; background-size: cover; } } /* ========================================================================== =WordPress Default Classes ========================================================================== */ .ewf-inline-style { display: none; } .wp-caption {} .wp-caption-text {} .sticky { padding: 10px; border: 1px solid #a0a0a0; background-color: #f3f3f3; } .gallery-caption {} .alignright {} .alignleft {} .aligncenter {} .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-right: auto; margin-left: auto; } /** * 1. Image does not overflow the content area */ .wp-caption { max-width: 96%; /* 1 */ padding: 5px 3px 10px; border: 1px solid #a0a0a0; background: #fff; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { max-width: 98.5%; width: auto; height: auto; padding: 0; border: none; margin: 0; } .wp-caption p.wp-caption-text { padding: 0 4px 5px 4px; margin: 0; font-size: 11px; line-height: 17px; } /* ========================================================================== =WordPress Widgets ========================================================================== */ /* =Widgets default ========================================================================== */ .widget { margin-bottom: 60px; } .widget-title { margin-bottom: 45px; line-height: 18px; text-transform: uppercase; } #footer .widget:last-child { margin-bottom: 0; } /* =Text Widget ========================================================================== */ .widget_text {} .textwidget {} .copyright { width: 35%; padding: 60px 0; margin: 0 auto; background-color: #050912; color: #fff; text-align: center; } .copyright h1 { font-family: "Sacramento", Arial, sans-serif; line-height: 27px; } .copyright h1 small { font-size: 24px; } .copyright i { margin-bottom: 20px; font-size: 14px; } .copyright p { margin-bottom: 0; } @media (min-width: 768px) and (max-width: 991px) { .copyright { width: 50%; } } @media (max-width: 767px) { .copyright { width: 100%; } } /* =Search Widget ========================================================================== */ .widget_search {} #searchform { position: relative; } .screen-reader-text { display: none; } #s { display: inline-block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 0; } #searchsubmit { position: absolute; top: 0; right: 5px; border: none; background: url(../images/bg-search.png) no-repeat center center; vertical-align: inherit; } /* =Recent Entries Widget ========================================================================== */ .widget_recent_entries {} .widget_recent_entries ul { margin-bottom: 0; list-style: none; } .widget_recent_entries ul li {} .widget_recent_entries ul li a { color: #1c1c1c; } .widget_recent_entries ul li .post-date { color: #808080; } /* =Pages Widget ========================================================================== */ .widget_pages {} .widget_pages ul { margin-bottom: 0; list-style: none; } .widget_pages ul li {} .widget_pages ul li a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; } .widget_pages ul li a:before { position: relative; top: -3px; margin-right: 10px; font-family: 'FontAwesome'; font-size: 6px; font-style: normal; content: ""; } .widget_pages ul li a:hover { color: #1c1c1c; text-decoration: none; } /* =Archive Widget ========================================================================== */ .widget_archive {} .widget_archive ul { margin-bottom: 0; list-style: none; } .widget_archive ul li {} .widget_archive ul li a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; } .widget_archive ul li a:before { position: relative; top: -3px; margin-right: 10px; font-family: 'FontAwesome'; font-size: 6px; font-style: normal; content: ""; } .widget_archive ul li a:hover { color: #1c1c1c; text-decoration: none; } .widget_archive select {} .widget_archive option {} /* =Categories Widget ========================================================================== */ .widget_categories {} .widget_categories ul { margin-bottom: 0; list-style: none; } .widget_categories ul li { margin-bottom: 10px; } .widget_categories ul li:last-child { margin-bottom: 0; } .widget_categories a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; text-transform: uppercase; } .widget_categories a:hover { color: #1c1c1c; text-decoration: none; } .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-bottom: 0; list-style: none; } .widget_meta ul li {} .widget_meta ul li a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; } .widget_meta ul li a:before { position: relative; top: -3px; margin-right: 10px; font-family: 'FontAwesome'; font-size: 6px; font-style: normal; content: ""; } .widget_meta ul li a:hover { color: #1c1c1c; text-decoration: none; } /* =Recent Comments Widget ========================================================================== */ .widget_recent_comments {} #recentcomments { margin-bottom: 0; list-style: none; } #recentcomments li {} #recentcomments li a { color: #808080; } .recentcomments {} /* =Tag Cloud Widget ========================================================================== */ .widget_tag_cloud {} .widget_tag_cloud a { position: relative; overflow: hidden; z-index: 2; display: inline-block; padding: 3px 15px; border: 2px solid #1c1c1c; border-radius: 20px; margin-bottom: 10px; background-color: #1c1c1c; color: #fff; font-size: 12px; line-height: 18px; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_tag_cloud a:after { position: absolute; z-index: -1; top: 0; left: 51%; width: 0; height: 100%; background-color: #fff; color: #1c1c1c; opacity: 0; content: ""; -webkit-transform: translateX(-51%); -ms-transform: translateX(-51%); transform: translateX(-51%); -webkit-transition: all 0.3s; transition: all 0.3s; } .widget_tag_cloud a:hover:after { width: 100%; opacity: 1; } .widget_tag_cloud a:hover { background-color: transparent; color: #1c1c1c; } /* =Calendar Widget ========================================================================== */ .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #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-bottom: 0; list-style: none; } .widget_nav_menu ul li {} .widget_nav_menu ul li a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; } .widget_nav_menu ul li a:before { position: relative; top: -3px; margin-right: 10px; font-family: 'FontAwesome'; font-size: 6px; font-style: normal; content: ""; } .widget_nav_menu ul li a:hover { color: #1c1c1c; text-decoration: none; } /* =RSS Widget ========================================================================== */ .widget_rss {} .widget_rss ul { margin-bottom: 0; list-style: none; } /* ========================================================================== =WordPress Custom Widgets ========================================================================== */ /* =EWF Twitter widget ========================================================================== */ .ewf_widget_latest_tweets {} .ewf-tweet-list .tweet { font-size: 16px; text-align: center; 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 { float: left; display: block; width: 71px; height: auto; padding: 0 2px 2px 0; border: none; } /* * 1. Clearfix hack */ .flickr-feed:after { /* 1 */ visibility: hidden; display: block; height: 0; font-size: 0; content: " "; clear: both; } @media (min-width: 1200px) { .flickr-feed img { width: 88px; } } /* =EWF Instagram widget ========================================================================== */ .ewf_widget_instagram { position: relative; } .instagram-details { display: table-cell; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 30px; text-align: center; vertical-align: middle; } #instafeed { margin: -15px; } .instagram-details + #instafeed { display: table-cell; width: 50%; } #instafeed a { float: left; display: block; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px; } #instafeed a img { display: block; width: 100%; height: auto; } /* * 1. Clearfix hack */ #instafeed:after { /* 1 */ visibility: hidden; display: block; height: 0; font-size: 0; content: " "; clear: both; } @media (max-width: 767px) { .instagram-details { display: block; width: 100%; padding-right: 0; } .instagram-details + #instafeed { display: block; width: 100%; margin: 0; } } /* =EWF Facebook widget ========================================================================== */ .ewf_widget_facebook {} /* =EWF Contact Info widget ========================================================================== */ .ewf_widget_contact_info {} .ewf_widget_contact_info ul { margin-bottom: 0; list-style: none; } .ewf_widget_contact_info ul li { position: relative; margin-bottom: 10px; } .ewf_widget_contact_info ul li:last-child { margin-bottom: 0; } .ewf_widget_contact_info ul li i { position: absolute; top: 7px; left: 0; } /* =EWF Newsletter subscribe widget ========================================================================== */ .ewf_widget_newsletter {} #newsletter-subscribe-form {} #newsletter-subscribe-form input[type="text"] { width: 100%; } #newsletter-subscribe-form input[type="submit"] { margin: 0; } #newsletter-subscribe-form input[type="submit"]:hover { background-color: #fff; } /* =EWF Latest posts widget ========================================================================== */ .ewf_widget_latest_posts {} .ewf_widget_latest_posts ul { margin-bottom: 0; list-style: none; } .ewf_widget_latest_posts ul li { margin-bottom: 30px; } .ewf_widget_latest_posts ul li:last-child { margin-bottom: 0; } .ewf_widget_latest_posts ul li img { float: left; margin: 5px 10px 0 0; } .ewf_widget_latest_posts ul li .title { color: #1c1c1c; font-family: "Prata", Arial, sans-serif; text-transform: uppercase; } /* * 1. Clearfix hack */ .ewf_widget_latest_posts ul li:after { /* 1 */ visibility: hidden; display: block; height: 0; font-size: 0; content: " "; clear: both; } /* =EWF Navigation widget ========================================================================== */ .ewf_widget_navigation {} .ewf_widget_navigation ul { margin-bottom: 0; list-style: none; } .ewf_widget_navigation ul li { margin-bottom: 10px; } .ewf_widget_navigation ul li:last-child { margin-bottom: 0; } .ewf_widget_navigation a { color: #808080; font-family: "Prata", Arial, sans-serif; font-size: 12px; text-transform: uppercase; } .ewf_widget_navigation a:hover { color: #1c1c1c; 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; } /* ========================================================================== =WordPress Comments ========================================================================== */ .comments-title { text-transform: uppercase; } .comment-reply-title {} .commentlist .reply {} .commentlist .reply a {} .commentlist .reply a { position: relative; overflow: hidden; z-index: 2; display: inline-block; padding: 5px 25px; border: 2px solid #1c1c1c; border-radius: 20px; background-color: #1c1c1c; color: #fff; font-size: 12px; line-height: 18px; vertical-align: middle; text-decoration: none; text-transform: uppercase; -webkit-transition: all 0.3s; transition: all 0.3s; } .commentlist .reply a:after { position: absolute; z-index: -1; top: 0; left: 51%; width: 0; height: 100%; background-color: #fff; color: #1c1c1c; opacity: 0; content: ""; -webkit-transform: translateX(-51%); -ms-transform: translateX(-51%); transform: translateX(-51%); -webkit-transition: all 0.3s; transition: all 0.3s; } .commentlist .reply a:hover:after { width: 100%; opacity: 1; } .commentlist .reply a:hover { background-color: transparent; color: #1c1c1c; } .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says { display: none; } .commentlist .vcard img.photo {} .commentlist .vcard img.avatar { position: absolute; top: 0; left: 0; border-radius: 50%; } .commentlist .vcard cite.fn a.url { color: #1c1c1c; font-family: "Prata", Arial, sans-serif; font-size: 16px; text-transform: uppercase; } .commentlist .comment-meta { margin-bottom: 25px; } .commentlist .comment-meta a { color: #1c1c1c; font-size: 12px; text-transform: uppercase; } .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist { margin: 30px 0 90px 0; list-style: none; } .commentlist li {} .commentlist li .comment-body { position: relative; padding: 15px 0 0 110px; margin-bottom: 75px; } .commentlist li p {} .commentlist li ul.children { margin-left: 0; list-style: none; } .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} #cancel-comment-reply {} #cancel-comment-reply a {} @media (max-width: 767px) { .commentlist .vcard img.avatar { position: relative; display: block; margin-bottom: 15px; } .commentlist li .comment-body { padding: 0; } } /* ========================================================================== =WordPress Comment Form ========================================================================== */ .section-heading { text-transform: uppercase; } .nocomments {} .must-log-in {} .logged-in-as {} #commentform { margin: 40px 0; } .comment-notes {} .comment-form-author {} .comment-form-author label {} .comment-form-author input#author { padding: 10px; } .comment-form-email {} .comment-form-email label {} .comment-form-email input#email { padding: 10px; } .comment-form-url {} .comment-form-url label {} .comment-form-url input#url { padding: 10px; } #commentform .required {} .comment-form-comment {} .comment-form-comment label {} .comment-form-comment textarea#comment { padding: 10px; } .form-allowed-tags {} .form-allowed-tags code {} .form-submit {} #commentform #submit {} #commentform #submit:hover { background-color: #fff; }