Notice: Array to string conversion in /home/wwwlafou/de.lafou.net/index.php on line 110
Warning: Cannot modify header information - headers already sent by (output started at /home/wwwlafou/de.lafou.net/index.php:110) in /home/wwwlafou/de.lafou.net/index.php on line 110
@charset "utf-8";
/*------------------------------------------------------------------
[Master Stylesheet]
Project: Rhythm
Version: 2.9.7
Last change: 22.11.2017
Primary use: MultiPurpose Template
-------------------------------------------------------------------*/
@import "font-awesome.min.css";
@import "et-line.css";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,300,700);
@import url(https://fonts.googleapis.com/css?family=Dosis:300,400,700);
/*------------------------------------------------------------------
[Table of contents]
1. Common styles
2. Page loader / .page-loader
3. Typography
4. Buttons
5. Forms fields
6. Home sections / .home-section
6.1. Home content
6.2. Scroll down icon
6.3. Headings styles
7. Compact bar / .nav-bar-compact
8. Classic menu bar / .main-nav
9. Sections styles / .page-section, .small-section, .split-section
10. Alternative services / .alt-service-grid
11. Team / .team-grid
12. Features
13. Benefits (Process)
14. Counters
15. Portfolio / #portfolio
15.1. Works filter
15.2. Works grid
15.3. Works full view
16. Banner section
17. Testimonial
18.1. Logotypes
18. Post previews (news section)
19. Newsletter
20. Contact section
20.1. Contact form
21. Bottom menu / .bot-menu
22. Google maps /.google-map
23. Footer / .footer
24. Blog
24.1. Pagination
24.2. Comments
24.3. Sidebar
25. Shop
26. Pricing
27. Shortcodes
27.1. Owl Carousel
27.2. Tabs
27.3. Tabs minimal
27.4. Alert messages
27.5. Accordion
27.6. Toggle
27.7. Progress bars
27.8. Font icons examples
27.9. Intro page
28. Special demos
29. Bootstrap multicolumn grid
/*------------------------------------------------------------------
# [Color codes]
# Black (active elements, links, text) #111
# Gray (text) #777
# Dark #111
# Dark Lighter #252525
# Gray BG #f4f4f4
# Gray BG Lighter #f8f8f8
# Mid grey #5f5f5f
# Borders #e9e9e9
# */
/*------------------------------------------------------------------
[Typography]
Body: 14px/1.6 "Open Sans", arial, sans-serif;
Headers: Dosis, arial, sans-serif;
Serif: "Times New Roman", Times, serif;
Section Title: 35px/1.3 "Open Sans", arial, sans-serif;
Section Heading: 24px/1.3 "Open Sans", arial, sans-serif;
Section Text: 15px/1.7 "Open Sans", arial, sans-serif;
-------------------------------------------------------------------*/
/* ==============================
Common styles
============================== */
.align-center{ text-align:center !important; }
.align-left{ text-align:left !important;}
.align-right{ text-align:right !important; }
.left{float:left !important;}
.right{float:right !important;}
.relative{position:relative;}
.hidden{display:none;}
.inline-block{display:inline-block;}
.white{ color: #fff !important; }
.black{ color: #111 !important; }
.color{ color: #e41919 !important; }
.glass{ opacity: .5; };
.image-fullwidth img{
width: 100%;
}
.stick-fixed{
position: fixed !important;
top: 0;
left: 0;
}
.round{
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
}
::-moz-selection{ color: #fff; background:#000; }
::-webkit-selection{ color: #fff; background:#000; }
::selection{ color: #fff; background:#000; }
.animate, .animate *{
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.no-animate, .no-animate *{
-webkit-transition: 0 none !important;
-moz-transition: 0 none !important;
-ms-transition: 0 none !important;
-o-transition: 0 none !important;
transition:0 none !important;
}
.shadow{
-webkit-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
-moz-box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
box-shadow: 0px 3px 50px rgba(0, 0, 0, .15);
}
.white-shadow{
-webkit-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
-moz-box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
box-shadow: 0px 0px 200px rgba(255, 255, 255, .2);
}
.clearlist, .clearlist li {
list-style: none;
padding: 0;
margin: 0;
background: none;
}
.full-wrapper {
margin: 0 2%;
}
.container-fluid{
max-width: 1170px;
margin: 0 auto;
padding: 0 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-1400{
max-width: 1400px;
margin: 0 auto;
padding-left: 2%;
padding-right: 2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
overflow-y: scroll;
-ms-overflow-style: scrollbar;
}
html, body{
height: 100%;
-webkit-font-smoothing: antialiased;
}
.page{
overflow: hidden;
}
.body-masked{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff url(../images/loader.gif) no-repeat center center;
z-index: 100000;
}
.mask-delay{
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
animation-delay: 0.75s;
}
.mask-speed{
-webkit-animation-duration: 0.25s !important;
-moz-animation-duration: 0.25s !important;
animation-duration: 0.25s !important;
}
iframe{
border: none;
}
a, b, div, ul, li{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-moz-outline-: none;
}
a:focus,
a:active{
-moz-outline: none;
outline: none;
}
img:not([draggable]), embed, object, video{
max-width: 100%;
height: auto;
}
/* ==============================
Page loader
============================== */
.page-loader{
display:block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fefefe;
z-index: 100000;
}
.loader{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
text-indent: -12345px;
border-top: 1px solid rgba(0,0,0, 0.08);
border-right: 1px solid rgba(0,0,0, 0.08);
border-bottom: 1px solid rgba(0,0,0, 0.08);
border-left: 1px solid rgba(0,0,0, 0.5);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: spinner 700ms infinite linear;
-moz-animation: spinner 700ms infinite linear;
-ms-animation: spinner 700ms infinite linear;
-o-animation: spinner 700ms infinite linear;
animation: spinner 700ms infinite linear;
z-index: 100001;
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* ==============================
Typography
============================== */
body{
color: #111;
font-size: 14px;
font-family: "Open Sans", arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a{
color: #111;
text-decoration: underline;
}
a:hover{
color: #888;
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
margin-bottom: 1.3em;
line-height: 1.4;
font-weight: 400;
}
h1{
font-size: 32px;
}
h2{
font-size: 28px;
}
h6{
font-weight: 700;
}
p{
margin: 0 0 2em 0;
}
ul, ol{
margin: 0 0 1.5em 0;
}
blockquote{
margin: 3em 0 3em 0;
padding: 0;
border: none;
background: none;
font-style: normal;
line-height: 1.7;
color: #777;
}
blockquote p{
margin-bottom: 1em;
font-size: 24px;
font-weight: 300;
font-style: normal;
line-height: 1.6;
}
blockquote footer{
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
}
dl dt{
margin-bottom: 5px;
}
dl dd{
margin-bottom: 15px;
}
pre{
background-color: #f9f9f9;
border-color: #ddd;
}
hr{
background-color: rgba(255,255,255, .08);
}
hr.white{
border-color: rgba(255,255,255, .35);
background: rgba(255,255,255, .35);
}
hr.black{
border-color:rgba(0,0,0, .85);
background: rgba(0,0,0, .85);
}
.uppercase{
text-transform: uppercase;
letter-spacing: 1px;
}
.font-alt{
font-family: Dosis, arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.serif{
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-weight: normal;
}
.normal{
font-weight: normal;
}
.strong{
font-weight: 700 !important;
}
.lead{
margin: 1em 0 2em 0;
font-size: 140%;
line-height: 1.6;
}
.text{
font-size: 16px;
font-weight: 300;
color: #5f5f5f;
line-height: 1.8;
}
.text h1,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6{
color: #111;
}
.dropcap{
float: left;
font-size: 3em;
line-height: 1;
padding: 2px 8px 2px 0;
}
.big-icon{
display: block;
width: 90px;
height: 90px;
margin: 0 auto 20px;
border: 3px solid #fff;
text-align: center;
line-height: 88px;
font-size: 32px;
color: rgba(255,255,255, .97);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.big-icon .fa-play{
position: relative;
left: 4px;
}
.big-icon.big-icon-rs{
border: none;
width: auto;
height: auto;
font-size: 96px;
}
.big-icon-link{
display: inline-block;
text-decoration: none;
}
.big-icon-link:hover{
border-color: transparent !important;
}
.big-icon-link:hover .big-icon{
border-color: #fff;
color: #fff;
-webkit-transition: 0 none !important;
-moz-transition: 0 none !important;
-ms-transition: 0 none !important;
-o-transition: 0 none !important;
transition:0 none !important;
}
.big-icon-link:active .big-icon{
-webkit-transform: scale(0.99);
-moz-transform: scale(0.99);
-o-transform: scale(0.99);
-ms-transform: scale(0.99);
transform: scale(0.99);
}
.wide-heading{
display: block;
margin-bottom: 10px;
font-size: 48px;
font-weight: 400;
letter-spacing: 0.4em;
text-align: center;
text-transform: uppercase;
opacity: .9;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.big-icon-link:hover,
.big-icon-link:hover .wide-heading{
color: #fff;
text-decoration: none;
}
.sub-heading{
font-size: 16px;
font-style: italic;
text-align: center;
line-height: 1.3;
color: rgba(255,255,255, .75);
}
.big-icon.black{
color: #000;
border-color: rgba(0,0,0, .75);
}
.big-icon-link:hover .big-icon.black{
color: #000;
border-color: #000;
}
.wide-heading.black{
color: rgba(0,0,0, .87);
}
.big-icon-link.black:hover,
.big-icon-link:hover .wide-heading.black{
color: #000;
text-decoration: none;
}
.sub-heading.black{
color: rgba(0,0,0, .75);
}
/* ==============================
Buttons
============================== */
.btn-mod,
a.btn-mod{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 13px;
color: #fff;
background: rgba(34,34,34, .9);
border: 2px solid transparent;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod:hover,
.btn-mod:focus,
a.btn-mod:hover,
a.btn-mod:focus{
font-weight: 400;
color: rgba(255,255,255, .85);
background: rgba(0,0,0, .7);
text-decoration: none;
outline: none;
border-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-mod:active{
cursor: pointer !important;
outline: none !important;
}
.btn-mod.btn-small{
height: auto;
padding: 6px 17px;
font-size: 11px;
letter-spacing: 1px;
}
.btn-mod.btn-medium{
height: auto;
padding: 8px 37px;
font-size: 12px;
}
.btn-mod.btn-large{
height: auto;
padding: 12px 45px;
font-size: 13px;
}
.btn-mod.btn-glass{
color: rgba(255,255,255, .75);
background: rgba(0,0,0, .40);
}
.btn-mod.btn-glass:hover,
.btn-mod.btn-glass:focus{
color: rgba(255,255,255, 1);
background: rgba(0,0,0, 1);
}
.btn-mod.btn-border{
color: #151515;
border: 2px solid #151515;
background: transparent;
}
.btn-mod.btn-border:hover,
.btn-mod.btn-border:focus{
color: #fff;
border-color: transparent;
background: #000;
}
.btn-mod.btn-border-c{
color: #e41919;
border: 2px solid #e41919;
background: transparent;
}
.btn-mod.btn-border-c:hover,
.btn-mod.btn-border-c:focus{
color: #fff;
border-color: transparent;
background: #e41919;
}
.btn-mod.btn-border-w{
color: #fff;
border: 2px solid rgba(255,255,255, .75);
background: transparent;
}
.btn-mod.btn-border-w:hover,
.btn-mod.btn-border-w:focus{
color: #111;
border-color: transparent;
background: #fff;
}
.btn-mod.btn-w{
color: #111;
background: rgba(255,255,255, .8);
}
.btn-mod.btn-w:hover,
.btn-mod.btn-w:focus{
color: #111;
background: #fff;
}
.btn-mod.btn-w-color{
color: #e41919;
background: #fff;
}
.btn-mod.btn-w-color:hover,
.btn-mod.btn-w-color:focus{
color: #151515;
background: #fff;
}
.btn-mod.btn-gray{
color: #777;
background: #e5e5e5;
}
.btn-mod.btn-gray:hover,
.btn-mod.btn-gray:focus{
color: #444;
background: #d5d5d5;
}
.btn-mod.btn-color{
color: #fff;
background: #e41919;
}
.btn-mod.btn-color:hover,
.btn-mod.btn-color:focus{
color: #fff;
background: #e41919;
opacity: .85;
}
.btn-mod.btn-circle{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.btn-mod.btn-round{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.btn-icon{
position: relative;
border: none;
overflow: hidden;
}
.btn-icon.btn-small{
overflow: hidden;
}
.btn-icon > span{
width: 100%;
height: 50px;
line-height: 50px;
margin-top: -25px;
position: absolute;
top: 50%;
left: 0;
color: #777;
font-size: 48px;
opacity: .2;
-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-icon:hover > span{
opacity: 0;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
.btn-icon > span.white{
color: #fff;
}
.btn-icon > span.black{
color: #000;
}
.btn-full{
width: 100%;
}
/* ==============================
Forms fields
============================== */
.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="date"],
.form input[type="color"],
.form select{
display: inline-block;
height: 27px;
vertical-align: middle;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #777;
border: 1px solid rgba(0,0,0, .1);
padding-left: 7px;
padding-right: 7px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.form select{
font-size: 12px;
}
.form select[multiple]{
height: auto;
}
.form input[type="text"]:hover,
.form input[type="email"]:hover,
.form input[type="number"]:hover,
.form input[type="url"]:hover,
.form input[type="search"]:hover,
.form input[type="tel"]:hover,
.form input[type="password"]:hover,
.form input[type="date"]:hover,
.form input[type="color"]:hover,
.form select:hover{
border-color: rgba(0,0,0, .2);
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="password"]:focus,
.form input[type="date"]:focus,
.form input[type="color"]:focus,
.form select:focus{
color: #111;
border-color: rgba(0,0,0, .7);
-webkit-box-shadow: 0 0 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 0 3px rgba(0,0,0, .3);
box-shadow: 0 0 3px rgba(0,0,0, .3);
outline: none;
}
.form input[type="text"].input-lg,
.form input[type="email"].input-lg,
.form input[type="number"].input-lg,
.form input[type="url"].input-lg,
.form input[type="search"].input-lg,
.form input[type="tel"].input-lg,
.form input[type="password"].input-lg,
.form input[type="date"].input-lg,
.form input[type="color"].input-lg,
.form select.input-lg{
height: 46px;
padding-left: 15px;
padding-right: 15px;
font-size: 13px;
}
.form input[type="text"].input-md,
.form input[type="email"].input-md,
.form input[type="number"].input-md,
.form input[type="url"].input-md,
.form input[type="search"].input-md,
.form input[type="tel"].input-md,
.form input[type="password"].input-md,
.form input[type="date"].input-md,
.form input[type="color"].input-md,
.form select.input-md{
height: 37px;
padding-left: 13px;
padding-right: 13px;
font-size: 12px;
}
.form input[type="text"].input-sm,
.form input[type="email"].input-sm,
.form input[type="number"].input-sm,
.form input[type="url"].input-sm,
.form input[type="search"].input-sm,
.form input[type="tel"].input-sm,
.form input[type="password"].input-sm,
.form input[type="date"].input-sm,
.form input[type="color"].input-sm,
.form select.input-sm{
height: 31px;
padding-left: 10px;
padding-right: 10px;
}
.form textarea{
font-size: 12px;
font-weight: 400;
text-transform: uppercase !important;
letter-spacing: 1px;
color: #777;
border-color: rgba(0,0,0, .1);
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.form textarea:hover{
border-color: rgba(0,0,0, .2);
}
.form textarea:focus{
color: #111;
border-color: rgba(0,0,0, .7);
-webkit-box-shadow: 0 0 3px rgba(21,21,21, .3);
-moz-box-shadow: 0 0 3px rgba(21,21,21, .3);
box-shadow: 0 0 3px rgba(21,21,21, .3);
}
.form .form-group{
margin-bottom: 10px;
}
.form input.error{
border-color: #e41919;
}
.form div.error{
margin-top: 20px;
padding: 13px 20px;
text-align: center;
background: rgba(228,25,25, .75);
color: #fff;
}
.form div.success{
margin-top: 20px;
padding: 13px 20px;
text-align: center;
background: rgba(50,178,95, .75);
color: #fff;
}
.form-tip{
font-size: 11px;
color: #aaa;
}
.form-tip .fa{
font-size: 12px;
}
/* ==============================
Home sections
============================== */
/*
* Header common styles
*/
.home-section{
width: 100%;
display: block;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.home-content{
display: table;
width: 100%;
height: 100%;
text-align: center;
}
/* Home content */
.home-content{
position: relative;
}
.home-text{
display: table-cell;
height: 100%;
vertical-align: middle;
}
/* Scroll down icon */
@-webkit-keyframes scroll-down-anim {
0%{ bottom: 2px; }
50%{ bottom: 7px; }
100%{ bottom: 2px; }
}
@-moz-keyframes scroll-down-anim {
0%{ bottom: 2px; }
50%{ bottom: 7px; }
100%{ bottom: 2px; }
}
@-o-keyframes scroll-down-anim {
0%{ bottom: 2px; }
50%{ bottom: 7px; }
100%{ bottom: 2px; }
}
@keyframes scroll-down-anim {
0%{ bottom: 2px; }
50%{ bottom: 7px; }
100%{ bottom: 2px; }
}
.scroll-down{
width: 40px;
height: 40px;
margin-left: -20px;
position: absolute;
bottom: 20px;
left: 50%;
text-align: center;
text-decoration: none;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.scroll-down:before{
display: block;
content: "";
width: 20px;
height: 20px;
margin: 0 0 0 -10px;
position: absolute;
bottom: 0;
left: 50%;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
z-index: 1;
}
.scroll-down:hover:before{
opacity: .6;
}
.scroll-down-icon{
display: block;
width: 10px;
height: 10px;
margin-left: -5px;
position: absolute;
left: 50%;
bottom: 4px;
color: #111;
font-size: 15px;
-webkit-animation: scroll-down-anim 1s infinite;
-moz-animation: scroll-down-anim 1s infinite;
-o-animation: scroll-down-anim 1s infinite;
animation: scroll-down-anim 1s infinite;
z-index: 2;
}
/*
* HTML5 BG VIdeo
*/
.bg-video-wrapper{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.bg-video-overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.bg-video-wrapper video{
max-width: inherit;
height: inherit;
z-index: 0;
}
/*
* Headings styles
*/
.hs-wrap{
max-width: 570px;
margin: 0 auto;
padding: 47px 30px 53px;
position: relative;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(255,255,255, .5);
}
.hs-wrap-1{
max-width: 350px;
margin: 0 auto;
position: relative;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hs-line-1{
margin-top: 0;
position: relative;
text-transform: uppercase;
font-size: 30px;
font-weight: 400;
letter-spacing: 51px;
color: #fff;
opacity: .9;
}
.hs-line-2{
margin-top: 0;
position: relative;
font-size: 72px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.085em;
line-height: 1.3;
color: rgba(255,255,255, .85);
}
.hs-line-3{
margin-top: 0;
position: relative;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255, .7);
}
.hs-line-4{
margin-top: 0;
position: relative;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255,255,255, .85);
}
.hs-line-5{
margin-top: 0;
position: relative;
font-size: 62px;
font-weight: 400;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.32em;
opacity: .85;
}
.hs-line-6{
margin-top: 0;
position: relative;
font-size: 19px;
font-weight: 300;
line-height: 1.2;
opacity: .35;
}
.hs-line-6.no-transp{
opacity: 1;
}
.hs-line-7{
margin-top: 0;
position: relative;
font-size: 64px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.2;
}
.hs-line-8{
margin-top: 0;
position: relative;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.3em;
line-height: 1.2;
opacity: .75;
}
.hs-line-8.no-transp{
opacity: 1;
}
.hs-line-9{
margin-top: 0;
position: relative;
font-size: 96px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.2;
}
.hs-line-10{
margin-top: 0;
display: inline-block;
position: relative;
padding: 15px 24px;
background: rgba(0,0,0, .75);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255, .85);
}
.hs-line-10 > span{
margin: 0 10px;
}
.hs-line-10.highlight{
background: #e41919;
opacity: .65;
}
.hs-line-10.transparent{
background: none;
color: #aaa;
padding: 0;
}
.hs-line-11{
margin-top: 0;
position: relative;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5em;
line-height: 1.8;
opacity: .9;
}
.hs-line-12{
margin-top: 0;
position: relative;
font-size: 80px;
font-weight: 400;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.4em;
}
.hs-line-13{
margin-top: 0;
position: relative;
font-size: 96px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.3em;
}
.hs-line-14{
margin-top: 0;
position: relative;
font-size: 48px;
font-weight: 400;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.7em;
}
.hs-line-15{
margin-top: 0;
position: relative;
font-size: 36px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
line-height: 1.3;
}
.no-transp{
opacity: 1 !important;
}
.fullwidth-galley-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 25;
}
/* ==============================
Top bar
============================== */
.top-bar{
min-height: 40px;
background: #fbfbfb;
border-bottom: 1px solid rgba(0,0,0, .05);
font-size: 11px;
letter-spacing: 1px;
}
/*
* Top links
*/
.top-links{
list-style: none;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.top-links li{
float: left;
border-left: 1px solid rgba(0,0,0, .05);
}
.top-links li:last-child{
border-right: 1px solid rgba(0,0,0, .05);
}
.top-links li .fa{
font-size: 14px;
position: relative;
top: 1px;
}
.top-links li .tooltip{
text-transform: none;
letter-spacing: normal;
z-index: 2003;
}
.top-links li a{
display: block;
min-width: 40px;
height: 40px;
line-height: 40px;
padding: 0 10px;
text-decoration: none;
text-align: center;
color: #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.top-links li a:hover{
color: #555;
background-color: rgba(0,0,0, .02);
}
/*
* Top bar dark
*/
.top-bar.dark{
background-color: #333;
border-bottom: none;
}
.top-bar.dark .top-links li,
.top-bar.dark .top-links li:last-child{
border-color: rgba(255,255,255, .07);
}
.top-bar.dark .top-links li a{
color: #aaa;
}
.top-bar.dark .top-links li a:hover{
color: #ccc;
background-color: rgba(255,255,255, .05);
}
/* ==============================
Classic menu bar
============================== */
/* Logo (in navigation panel)*/
.nav-logo-wrap{
float: left;
margin-right: 20px;
}
.nav-logo-wrap .logo{
display: table-cell;
vertical-align: middle;
max-width: 118px;
height: 75px;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.nav-logo-wrap .logo img{
max-height: 100%;
}
.nav-logo-wrap .logo:before,
.nav-logo-wrap .logo:after{
display: none;
}
.logo,
a.logo:hover{
font-family: Dosis, arial, sans-serif;
font-size: 18px;
font-weight: 400 !important;
text-transform: uppercase;
letter-spacing: 0.2em;
text-decoration: none;
color: rgba(0,0,0, .9);
}
/*
* Desktop nav
*/
.main-nav{
width: 100%;
height: 75px !important;
position: relative;
top: 0;
left: 0;
text-align: left;
background: rgba(255,255,255, .97);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.05);
box-shadow: 0 1px 0 rgba(0,0,0,.05);
z-index: 1030;
-webkit-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.small-height{
height: 55px !important;
}
.small-height .inner-nav ul li a{
height: 55px !important;
line-height: 55px !important;
}
.inner-nav{
display: inline-block;
position: relative;
float: right;
}
.inner-nav ul{
float: right;
margin: auto;
font-size: 11px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
}
.inner-nav ul li {
float: left;
margin-left: 30px;
position: relative;
}
.inner-nav ul li a{
color: #777;
letter-spacing: 2px;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.inner-nav ul > li:first-child > a{
}
.inner-nav ul li a:hover,
.inner-nav ul li a.active{
color: #000;
text-decoration: none;
}
/* Menu sub */
.mn-sub{
display: none;
width: 200px;
position: absolute;
top: 100%;
left: 0;
padding: 0;
background: rgba(30,30,30, .97);
}
.mn-sub li{
display: block;
width: 100%;
margin: 0 !important;
}
.inner-nav ul li .mn-sub li a{
display: block;
width: 100%;
height: auto !important;
line-height: 1.3 !important;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 11px 15px;
font-size: 13px;
text-align: left;
text-transform: none;
border-left: none;
border-right: none;
letter-spacing: 0;
color: #b0b0b0 !important;
cursor: pointer;
}
.mobile-on .mn-has-multi > li:last-child > a{
border-bottom: 1px solid rgba(255,255,255, .065) !important;
}
.mn-sub li a:hover,
.inner-nav ul li .mn-sub li a:hover,
.mn-sub li a.active{
background: rgba(255,255,255, .09);
color: #f5f5f5 !important;
}
.mn-sub li ul{
left: 100%;
right: auto;
top: 0;
border-left: 1px solid rgba(255,255,255, .07);
}
.inner-nav > ul > li:last-child .mn-sub,
.inner-nav li .mn-sub.to-left{
left: auto;
right: 0;
}
.inner-nav li:last-child .mn-sub li ul,
.inner-nav li .mn-sub li ul.to-left{
left: auto;
right: 100%;
top: 0;
border-left: none;
border-right: 1px solid rgba(255,255,255, .07);
}
.mobile-on .inner-nav li:last-child .mn-sub li ul{
left: auto;
right: auto;
top: 0;
}
.mn-wrap{
padding: 8px;
}
/* Menu sub multi */
.mn-has-multi{
width: auto !important;
padding: 15px;
text-align: left;
white-space: nowrap;
}
.mn-sub-multi{
width: 190px !important;
overflow: hidden;
white-space: normal;
float: none !important;
display: inline-block !important;
vertical-align: top;
}
.mn-sub-multi > ul{
width: auto;
margin: 0;
padding: 0;
float: none;
}
.mn-group-title{
font-weight: 700;
text-transform: uppercase;
color: #fff !important;
}
.mn-group-title:hover{
background: none !important;
}
.mobile-on .mn-sub-multi > ul{
left: auto;
right: auto;
border: none;
}
.mobile-on .mn-sub-multi{
display: block;
width: 100% !important;
}
.mobile-on .mn-sub-multi > ul > li:last-child > a{
border: none !important;
}
.mobile-on .mn-sub > li:last-child > a{
border: none !important;
}
.mobile-on .mn-sub-multi:last-child > ul{
border-bottom: none !important;
}
/*
* Mobile nav
*/
.mobile-on .desktop-nav{
display: none;
width: 100%;
position: absolute;
top: 100%;
left: 0;
padding: 0 15px;
z-index: 100;
}
.mobile-on .full-wrapper .desktop-nav{
padding: 0;
}
.mobile-on .desktop-nav ul{
width: 100%;
float: none;
background: rgba(18,18,18, .97);
position: relative;
overflow-x: hidden;
}
.mobile-on .desktop-nav > ul{
overflow-y: auto;
}
.mobile-on .desktop-nav ul li{
display: block;
float: none !important;
overflow: hidden;
}
.mobile-on .desktop-nav ul li ul{
padding: 0;
border-bottom: 1px solid rgba(255,255,255, .1);
}
.mobile-on .desktop-nav ul li a{
display: block;
width: 100%;
height: 38px !important;
line-height: 38px !important;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
text-align: left;
border-left: none;
border-right: none;
border-bottom: 1px solid rgba(255,255,255, .065);
color: #999;
letter-spacing: 1px;
cursor: pointer;
}
.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active{
background: rgba(255,255,255, .03);
color: #ddd;
}
/* Menu sub */
.mobile-on .mn-has-sub > .fa{
display: block;
width: 18px;
height: 18px;
font-size: 14px;
line-height: 16px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
text-align: center;
border: 1px solid rgba(255,255,255, .1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.mobile-on .js-opened > .mn-has-sub > .fa{
border-color: rgba(255,255,255, .4);
line-height: 14px;
}
.mobile-on .inner-nav li{
margin: 0 !important;
}
.mobile-on .mn-sub{
display: none;
opacity: 0;
position: relative;
left: 0 !important;
right: 0;
top: 0;
bottom: 0;
border-left: none !important;
border-right: none !important;
border-top: none ;
z-index: 10;
}
.mobile-on .mn-sub li{
padding-left: 10px;
}
.inner-nav li.js-opened .mn-sub{
opacity: 1;
}
.mobile-nav{
display: none;
float: right;
vertical-align: middle;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
border-left: 1px solid rgba(0,0,0, .05);
border-right: 1px solid rgba(0,0,0, .05);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-webkit-transition-property: background, color;
-moz-transition-property: background, color;
-o-transition-property: background, color;
transition-property: background, color;
}
.mobile-nav:hover,
.mobile-nav.active{
background: #fff;
color: #777;
}
.mobile-nav:active{
-webkit-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
-moz-box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
box-shadow: 0 0 35px rgba(0,0,0,.05) inset;
}
.no-js .mobile-nav{
width: 55px;
height: 55px;
}
.mobile-on .mobile-nav{
display: table;
}
.mobile-nav .fa{
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 21px;
}
/* Menu sub multi */
.mobile-on .mn-has-multi{
width: auto;
padding: 0;
text-align: left;
white-space: normal;
}
.mobile-on .mn-sub{
width: 100%;
float: none;
position: relative;
overflow-x: hidden;
}
/*
* Dark panel style
*/
.main-nav.dark{
background-color: rgba(10,10,10, .95);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.main-nav.dark .inner-nav ul > li > a{
color: rgba(255,255,255, .7);
}
.main-nav.dark .inner-nav ul > li > a:hover,
.main-nav.dark .inner-nav ul > li > a.active{
color: #fff;
}
.main-nav.dark .mobile-nav{
background-color: transparent;
border-color: transparent;
color: rgba(255,255,255, .9);
}
.main-nav.dark .mobile-nav:hover,
.main-nav.dark .mobile-nav.active{
color: #fff;
}
.main-nav.mobile-on.dark .inner-nav{
border-top: 1px solid rgba(100,100,100, .4);
}
.main-nav.dark .logo,
.main-nav.dark a.logo:hover{
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
text-decoration: none;
color: rgba(255,255,255, .9);
}
.main-nav.dark .mn-sub{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.main-nav.dark .mn-soc-link{
border: 1px solid rgba(255,255,255, .2);
}
.main-nav.dark .mn-soc-link:hover{
border: 1px solid rgba(255,255,255, .3);
}
/*
* Transparent panel style
*/
.main-nav.transparent{
background: transparent !important;
}
.main-nav.js-transparent{
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
/*
* Centered menu
*/
.mn-centered{
text-align: center;
}
.mn-centered .inner-nav{
float: none;
}
.mn-centered .inner-nav > ul{
float: none;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.mn-centered .inner-nav > ul > li:first-child{
margin-left: 0;
}
.mn-centered .mobile-nav{
float: none;
margin-left: auto;
margin-right: auto;
}
/*
* Aligned left menu
*/
.mn-align-left{
}
.mn-align-left .inner-nav{
float: none;
width: 100%;
}
.mn-align-left .inner-nav > ul{
float: none;
margin-left: auto;
margin-right: auto;
}
.mn-align-left .inner-nav > ul > li:first-child{
margin-left: 0;
}
.mn-align-left .mobile-nav{
float: none;
margin-left: auto;
margin-right: auto;
}
/*
* Menu social links
*/
.mn-soc-link{
width: 34px;
height: 34px;
line-height: 33px;
text-align: center;
font-size: 12px;
display: inline-block;
border: 1px solid rgba(0,0,0, .1);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.mn-soc-link:hover{
border: 1px solid rgba(0,0,0, .25);
}
.main-nav .tooltip{
font-size: 12x;
text-transform: none;
letter-spacing: 0;
}
/* ==============================
Fullscreen menu
============================== */
.fm-logo-wrap{
position: absolute;
top: 30px;
left: 30px;
height: 54px;
z-index: 1030;
}
.fm-logo-wrap .logo{
display: block;
max-width: 200px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fm-button{
display: block;
position: fixed;
top: 30px;
right: 30px;
width: 54px;
height: 54px;
background: #111;
opacity: .85;
text-indent: -12345px;
z-index: 1030;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fm-button:hover{
opacity: 1;
}
.fm-button span{
display: block;
width: 22px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -11px;
-webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fm-button span:before,
.fm-button span:after{
content: "";
display: block;
width: 100%;
height: 2px;
background: #fff;
position: absolute;
top: -6px;
left: 0;
-webkit-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -webkit-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-moz-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -moz-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-o-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -o-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-ms-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -ms-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
}
.fm-button span:after{
top: auto;
bottom: -6px;
}
/* Active menu button */
.fm-button.active{
background: #222;
z-index: 2001;
}
.fm-button.active span{
background: transparent;
}
.fm-button.active span:before{
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.fm-button.active span:after{
bottom: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu wrapper */
.fm-wrapper{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
padding: 50px 30px;
overflow-x: hidden;
overflow-y: auto;
background: rgba(10,10,10, .97);
z-index: 2000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.fm-wrapper-sub{
display: table;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-o-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.1s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fm-wrapper-sub.js-active{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.fm-wrapper-sub-sub{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.fm-menu-links,
.fm-menu-links ul{
margin: 0;
padding: 10px 0;
line-height: 1.3;
text-align: center;
}
.fm-menu-links ul.fm-sub{
padding: 0;
}
.fm-menu-links a{
display: block;
position: relative;
margin: 0;
padding: 15px 20px;
color: #999;
font-size: 17px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255,255,255, .1);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
z-index: 11;
}
.no-touch .fm-menu-links a:hover,
.fm-menu-links a:active,
.fm-menu-links li.js-opened > a{
color: #d5d5d5;
text-decoration: none;
}
.fm-menu-links li{
margin: 0;
padding: 0;
position: relative;
}
.fm-menu-links li > a:active,
.fm-menu-links li.active > a,
.fm-menu-links li a.active{
color: #f5f5f5;
}
.fm-menu-links li.js-opened:before{
display: none;
}
.no-touch .fm-menu-links li.js-opened > a:hover,
.fm-menu-links li.js-opened > a:active{
color: #fff;
}
.fm-has-sub{
}
.fm-has-sub .fa{
font-size: 14px;
}
.js-opened > .fm-has-sub > .fa{
color: #fff;
}
.fm-sub{
display: none;
opacity: 0;
position: relative;
}
.fm-sub > li > a{
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 13px;
font-weight: 400;
}
.fm-menu-links li.js-opened .fm-sub{
opacity: 1;
}
.fm-search{
width: 320px;
}
.fm-search input.search-field{
background: transparent;
color: #555;
text-align: center;
border: none;
border-bottom: 1px solid rgba(255,255,255, .2);
}
.fm-search input.search-field:hover{
border: none;
border-bottom: 1px solid rgba(255,255,255, .4);
}
.fm-search input.search-field:focus{
color: #999;
border-color: rgba(255,255,255, .7);
}
.fm-search .search-button:hover{
color: #fff;
}
/* Social links */
.fm-social-links{
padding: 10px;
font-size: 14px;
text-align: center;
}
.fm-social-links > a{
display: inline-block;
margin: 0 2px;
width: 34px;
height: 34px;
line-height: 34px;
border: 1px solid rgba(255,255,255, .15);
text-align: center;
text-decoration: none;
color: #555;
-webkir-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fm-social-links > a:hover{
border-color: rgba(255,255,255, .3);
color: #999;
}
/* ==============================
Sections styles
============================== */
/*
* Common
*/
.page-section,
.small-section{
width: 100%;
display: block;
position: relative;
overflow: hidden;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 140px 0;
}
.small-section{
padding: 70px 0;
}
.small-title{
padding: 0;
margin: 0 0 30px 0;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
letter-spacing: 0.3em;
}
.section-icon{
margin-bottom: 7px;
text-align: center;
font-size: 32px;
}
.small-title .serif{
text-transform: none;
font-weight: 400;
}
.small-title.white{
color: #fff;
}
.bg-scroll{
background-attachment: scroll !important;
}
.bg-pattern{
background-repeat: repeat;
background-size: auto;
}
.bg-pattern-over:before,
.bg-pattern-over .YTPOverlay:after{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: repeat;
background-size: auto;
background-image: url(../images/pattern-bg-2.png);
}
.bg-gray{
background-color: #f4f4f4;
}
.bg-gray-lighter{
background-color: #f8f8f8;
}
.bg-dark,
.bg-dark-lighter,
.bg-dark-alfa-30,
.bg-dark-alfa-50,
.bg-dark-alfa-70,
.bg-dark-alfa-90,
.bg-dark-alfa,
.bg-color,
.bg-color-lighter,
.bg-color-alfa-30,
.bg-color-alfa-50,
.bg-color-alfa-70,
.bg-color-alfa-90,
.bg-color-alfa{
color: #fff;
}
.bg-dark a,
.bg-dark-lighter a,
.bg-dark-alfa-30 a,
.bg-dark-alfa-50 a,
.bg-dark-alfa-70 a,
.bg-dark-alfa-90 a,
.bg-dark-alfa a,
.bg-color a,
.bg-colorlighter a,
.bg-color-alfa-30 a,
.bg-color-alfa-50 a,
.bg-color-alfa-70 a,
.bg-color-alfa-90 a,
.bg-color-alfa a{
color: rgba(255,255,255, .8);
padding-bottom: 3px;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.bg-dark a:hover,
.bg-dark-lighter a:hover,
.bg-dark-alfa-30 a:hover,
.bg-dark-alfa-50 a:hover,
.bg-dark-alfa-70 a:hover,
.bg-dark-alfa-90 a:hover,
.bg-dark-alfa a:hover,
.bg-color a:hover,
.bg-color-lighter a:hover,
.bg-color-alfa-30 a:hover,
.bg-color-alfa-50 a:hover,
.bg-color-alfa-70 a:hover,
.bg-color-alfa-90 a:hover,
.bg-color-alfa a:hover{
color: rgba(255,255,255, 1);
text-decoration: none;
}
.bg-color .text,
.bg-color-lighter .text,
.bg-color-alfa-30 .text,
.bg-color-alfa-50 .text,
.bg-color-alfa-70 .text,
.bg-color-alfa-90 .text,
.bg-color-alfa .text,
.bg-color .section-text,
.bg-color-lighter .section-text,
.bg-color-alfa-30 .section-text,
.bg-color-alfa-50 .section-text,
.bg-color-alfa-70 .section-text,
.bg-color-alfa-90 .section-text,
.bg-color-alfa .section-text{
color: rgba(255,255,255, .75);
}
.bg-color .white,
.bg-color-lighter .whitet,
.bg-color-alfa-30 .white,
.bg-color-alfa-50 .white,
.bg-color-alfa-70 .white,
.bg-color-alfa-90 .white,
.bg-color-alfa .white{
color: #fff;
}
.bg-dark{
background-color: #111;
}
.bg-dark-lighter{
background-color: #252525;
}
.bg-dark-alfa:before,
.bg-dark-alfa .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(17,17,17, .97);
}
.bg-dark-alfa-30:before,
.bg-dark-alfa-30 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(34,34,34, .3);
}
.bg-dark-alfa-50:before,
.bg-dark-alfa-50 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(34,34,34, .5);
}
.bg-dark-alfa-70:before,
.bg-dark-alfa-70 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(17,17,17, .7);
}
.bg-dark-alfa-90:before,
.bg-dark-alfa-90 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(3,3,3, .9);
}
.bg-light-alfa:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(252,252,252, .97);
}
.bg-light-alfa-30:before,
.bg-light-alfa-30 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(252,252,252, .30);
}
.bg-light-alfa-50:before,
.bg-light-alfa-50 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(252,252,252, .50);
}
.bg-light-alfa-70:before,
.bg-light-alfa-70 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(252,252,252, .7);
}
.bg-light-alfa-90:before,
.bg-light-alfa-90 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(252,252,252, .9);
}
.bg-color{
background-color: #e41919;
}
.bg-color-alfa:before,
.bg-color-alfa .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e41919;
opacity: .97;
}
.bg-color-alfa-30:before,
.bg-color-alfa-30 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e41919;
opacity: .3;
}
.bg-color-alfa-50:before,
.bg-color-alfa-50 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e41919;
opacity: .5;
}
.bg-color-alfa-70:before,
.bg-color-alfa-70 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e41919;
opacity: .7;
}
.bg-color-alfa-90:before,
.bg-color-alfa-90 .YTPOverlay:before{
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #e41919;
opacity: .9;
}
.bg-orange{ background-color: #f47631 !important; }
.bg-yellow{ background-color: #ffce02 !important; }
.bg-cyan{ background-color: #27c5c3 !important; }
.bg-green{ background-color: #58bf44 !important; }
.bg-blue{ background-color: #43a5de !important; }
.bg-purple{ background-color: #375acc !important; }
.bg-red{ background-color: #e13939 !important; }
.section-title {
margin-bottom: 15px;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.5em;
line-height: 1.4;
}
.section-more{
margin-top: 7px;
color: #999;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.4em;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.section-more:hover{
text-decoration: none;
color: #000;
}
.section-more .fa{
font-size: 12px;
}
.section-heading {
margin-bottom: 15px;
font-size: 24px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.5em;
line-height: 1.3;
}
.section-line{
width: 55px;
height: 1px;
margin: 30px auto;
background: #111;
}
.section-text{
font-size: 15px;
font-weight: 300;
color: #777;
line-height: 1.7;
}
.section-text blockquote{
margin-top: -5px;
}
.section-bot-image{
margin: 140px 0 -140px;
text-align: center;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
}
.image-fullwidth img{
width: 100%;
}
/* Breadcrumbs */
.mod-breadcrumbs{
margin-top: -5px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.4em;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.mod-breadcrumbs span{
opacity: .65;
}
.mod-breadcrumbs a{
text-decoration: none;
}
.mod-breadcrumbs a:hover{
text-decoration: none;
}
.mod-breadcrumbs .fa{
font-size: 12px;
}
.mod-breadcrumbs-mini{
text-align: left;
}
.home-bot-image{
width: 100%;
position: absolute;
bottom:0;
left: 0;
text-align: center;
}
.fixed-height-large,
.fixed-height-medium,
.fixed-height-small{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fixed-height-large{
min-height: 800px;
}
.fixed-height-medium{
min-height: 700px;
}
.fixed-height-small{
min-height: 600px;
}
/*
* Split section
*/
.split-section{
width: 100%;
display: block;
position: relative;
overflow: hidden;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.split-section-headings{
width: 50%;
position: relative;
overflow: hidden;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ssh-table{
width: 100%;
min-height: 500px;
display: table;
}
.ssh-cell{
display: table-cell;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.split-section-content{
width: 50%;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.split-section-wrapper{
padding: 0 80px;
}
/* ==============================
Alternative services
============================== */
.alt-service-grid{
margin-top: -60px;
}
.alt-services-image{
text-align: center;
}
.alt-services-image > img{
display: block;
width: 100%;
}
.alt-service-item{
margin: 60px 0 0 0;
position: relative;
padding-left: 55px;
padding-top: 3px;
font-size: 13px;
font-weight: 300;
color: #999;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.alt-service-icon{
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
line-height: 40px;
text-align: center;
font-size: 28px;
color: #111;
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.alt-services-title{
margin: 0 0 10px 0;
padding: 0;
font-size: 15px;
font-weight: 400;
color: #111;
}
/* ==============================
Team
============================== */
.team-grid{
}
.team-item{
}
.team-item-image{
position: relative;
overflow: hidden;
}
.team-item-image img{
width: 100%;
}
.team-item-image:after{
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 1;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.team-item-detail{
opacity: 0;
width: 100%;
position: absolute;
top: 50%;
left: 0;
padding: 20px 23px 55px;
font-size: 14px;
font-weight: 300;
color: #777;
text-align: center;
z-index: 2;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.team-item-descr{
color: #777;
text-align:center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.team-item-name {
margin-top: 23px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.4em;
}
.team-item-role{
margin-top: 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #aaa;
}
.team-social-links{
font-size: 14px;
cursor: pointer;
}
.team-social-links a{
display: inline-block;
padding: 3px 7px;
color: rgba(0,0,0, .4);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
/* Hover state */
.no-mobile .team-item:hover .team-item-image:after{
background: rgba(255,255,255, .93);
}
.no-mobile .team-item:hover .team-item-detail{
opacity: 1;
}
.no-mobile .team-item:hover .team-item-descr{
color: #111;
}
.no-mobile .team-social-links a:hover{
color: rgba(0,0,0, .75);
}
/* Mobile touch */
.team-item.js-active .team-item-image:after{
background: rgba(255,255,255, .93);
}
.team-item.js-active .team-item-detail{
opacity: 1;
}
.team-item.js-active .team-item-descr{
color: #111;
}
.team-item.js-active .team-social-links a:hover{
color: rgba(0,0,0, .75);
}
/* ==============================
Features
============================== */
.features-item{
padding: 15px;
text-align: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.features-icon{
font-size: 48px;
line-height: 1.3;
color: rgba(255,255,255, .9);
}
.features-title{
margin-bottom: 3px;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255, .9);
}
.features-descr{
font-size: 15px;
font-weight: 300;
color: rgba(255,255,255, .75);
}
.features-icon.black{
color: rgba(0,0,0, .9);
}
.features-title.black{
color: rgba(0,0,0, .9);
}
.features-descr.black{
color: rgba(0,0,0, .75);
}
/* ==============================
Alt features
============================== */
.alt-features-grid{
margin-top: -70px;
}
.alt-features-item{
margin-top: 70px;
}
.alt-features-icon{
padding-top: 10px;
font-size: 48px;
line-height: 1.3;
color: #111;
}
.alt-features-icon img{
width: 100%;
}
.alt-features-title{
margin-bottom: 21px;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.4em;
}
.alt-features-descr {
color: #777;
font-size: 14px;
font-weight: 300;
line-height: 1.86
}
/* ==============================
Benefits
============================== */
.benefits-grid{
margin: 0 0 -40px -20px;
text-align: center;
vertical-align: top;
}
.benefit-item{
display: inline-block;
width: 264px;
margin: 0 0 40px 20px;
padding: 15px;
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
cursor: default;
}
.benefit-number{
width: 100%;
position: absolute;
top: 0;
left: -50px;
font-size: 120px;
font-weight: 700;
text-align: center;
line-height: 1;
color: rgba(0,0,0, .025);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.benefit-icon{
position: relative;
margin-bottom: 6px;
font-size: 32px;
}
.benefit-title{
position: relative;
margin: 0 0 17px 0;
padding: 0;
font-size: 14px;
text-transform: uppercase;
}
.benefits-descr{
position: relative;
font-size: 13px;
font-weight: 300;
color: #777;
}
.benefit-item:after{
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .015);
opacity: 0;
-webkit-transition: all 0.37s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.benefit-item:hover:after{
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
-ms-transform: none;
transform: none;
}
.benefit-item:hover .benefit-number{
color: rgba(0,0,0, .035);
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
/* ==============================
Counters
============================== */
.count-wrapper{
padding: 40px 20px;
border: 1px solid rgba(0,0,0, .09);
}
.count-number{
font-size: 48px;
font-weight: 300;
line-height: 1.3;
text-align: center;
}
.count-descr{
color: #999;
font-size: 11px;
text-align:center;
}
.count-descr .fa{
font-size: 14px;
}
.count-title{
margin-top: -1px;
font-size: 13px;
}
.count-separator{
height: 30px;
clear: both;
float: none;
overflow: hidden;
}
/* ==============================
Portfolio
============================== */
/*
* Works filter
*/
.works-filter{
list-style: none;
padding: 0;
margin: 0 0 45px 0;
font-size: 13px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
color: #555;
cursor: default;
}
.works-filter a{
display: inline-block;
margin: 0 27px;
color: #999;
text-decoration: none;
-webkit-transition: all 0.37s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
cursor: pointer;
}
.works-filter a:hover{
color: #111;
text-decoration: none;
}
.works-filter a.active{
color: #111;
cursor: default;
}
.works-filter a.active:hover{
color: #111;
}
/*
* Works grid
*/
.works-grid{
list-style: none;
margin: 0;
padding: 0;
}
.work-item{
width: 25%;
float: left;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.work-grid-2 .work-item{
width: 50%;
}
.work-grid-3 .work-item{
width: 33.333%;
}
.container .work-grid-3 .work-item{
width: 33.2%;
}
.work-grid-5 .work-item{
width: 20%;
}
.works-grid.work-grid-gut{
margin: 0 0 0 -10px;
}
.works-grid.work-grid-gut .work-item{
padding: 0 0 10px 10px;
}
.work-item > a{
display: block;
padding: 0 0 84px 0;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
.work-item a,
.work-item a:hover{
color: #111;
border: none;
}
.work-img{
position: relative;
overflow: hidden;
}
.work-img img{
width: 100%;
display: block;
overflow: hidden;
}
.work-intro{
width: 100%;
height: 84px;
padding: 20px 20px 0 20px;
-webkit-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
overflow: hidden;
}
.work-title{
margin: 0 0 8px 0;
padding: 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
line-height: 1.2;
}
.work-descr{
font-size: 11px;
text-align: center;
text-transform: uppercase;
color: #aaa;
line-height: 1.2;
}
.works-grid.hide-titles .work-item > a{
overflow: hidden;
padding: 0;
}
.works-grid.hide-titles .work-item .work-intro{
opacity: 0;
bottom: -94px;
}
.works-grid.hide-titles .work-item:hover .work-intro{
opacity: 1;
}
/* Work item hover state */
.work-intro{
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.work-item:hover .work-intro{
/*bottom: auto;*/
/*top: 50%;*/
color: #fff;
-webkit-transform: translateY(-99px);
-moz-transform: translateY(-99px);
transform: translateY(-99px);
z-index: 3;
}
.work-item:hover .work-title{
color: #ccc;
}
.work-item:hover .work-descr{
color: #999;
}
.work-item .work-img:after{
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(250,250,250, 0);
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.work-item:hover .work-img:after{
background: rgba(20,20,20, .85);
}
.works-grid.hover-color .work-item:hover .work-intro,
.works-grid.hover-color .work-item:hover .work-title,
.works-grid.hover-color .work-item:hover .work-descr{
color: #fff;
}
.works-grid.hover-color .work-item:hover .work-img:after{
background: #e41919;
opacity: .73;
}
.works-grid.hover-white .work-item:hover .work-intro,
.works-grid.hover-white .work-item:hover .work-title,
.works-grid.hover-white .work-item:hover .work-descr{
color: #000;
}
.works-grid.hover-white .work-item:hover .work-img:after{
background: rgba(250,250,250, .9);
}
.work-item .work-img > img{
-webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.work-item:hover .work-img > img{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
/*
* Works full view
*/
.work-full{
display: none;
width: 100%;
height: 100%;
background: #fff;
z-index: 10000;
}
.work-full-load{
padding-top: 60px;
}
.work-loader{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 10001;
}
.work-loader:after{
display: block;
content: " ";
width: 16px;
height: 16px;
position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
background: url(../images/loader.gif) no-repeat;
}
/* Work navigation */
.work-navigation{
width: 100%;
background: #fff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
z-index: 99;
}
.work-navigation .fa{
font-size: 12px;
vertical-align: middle;
}
.work-navigation .fa-times{
font-size: 16px;
margin-top: -2px;
}
.work-navigation a{
display: block;
float: left;
width: 33.33333%;
overflow: hidden;
vertical-align: middle;
text-decoration: none;
white-space: nowrap;
cursor: default;
}
.work-navigation a,
.work-navigation a:visited{
color: #555;
}
.work-navigation a:hover{
color: #111;
}
.work-navigation a span{
display: inline-block;
height: 60px;
line-height: 59px;
padding: 0 4%;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.work-navigation span:hover{
background: #f7f7f7;
}
.work-back-link{
margin: 20px 0 0;
display: block;
background: #fff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #151515;
}
.work-prev{
text-align: left;
}
.work-all{
text-align: center;
}
.work-next{
text-align: right;
}
.work-container{
padding: 50px 0;
}
.work-full-title{
margin: 0 0 10px 0;
padding: 0;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
}
.work-full-media{
margin-top: 30px;
}
.work-full-media img{
max-width: 100%;
height: auto;
}
.work-full-text{
text-align: left;
font-size: 13px;
color: #777;
}
.work-full-text h6{
margin-top: 5px;
}
.work-detail{
font-weight: 400;
}
.work-detail p:last-child{
margin-bottom: 0;
}
.work-full-detail{
font-size: 11px;
color: #777;
letter-spacing: 1px;
text-transform: uppercase;
}
.work-full-detail p{
padding: 4px 0;
margin: 0;
border-top: 1px solid rgba(0,0,0, .05);
}
.work-full-detail p:last-child{
border-bottom: 1px solid rgba(0,0,0, .05);
}
.work-full-detail p strong{
width: 100px;
display: inline-block;
}
.work-full-action{
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #eaeaea;
text-align: center;
}
/* ==============================
Banner section
============================== */
.banner-section{
overflow: visible;
border-bottom: 1px solid transparent;
}
.banner-heading{
margin-top: 0;
margin-bottom: 20px;
font-size: 18px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255, 0.9);
}
.banner-decription{
margin-bottom: 35px;
font-size: 15px;
font-weight: 300;
color: rgba(255,255,255, .7);
}
.banner-image{
margin: -40px 0 0 0;
text-align: right;
}
.banner-image img{
}
/* ==============================
Testimonial
============================== */
.testimonial{
margin: 0;
padding: 0;
background: none;
border: none;
text-align: center;
font-family: "Open Sans", arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 300;
letter-spacing: 0;
opacity: .85;
}
.testimonial p{
font-size: 18px;
}
.testimonial-author{
}
/*
* Logotypes
*/
.logo-item{
height: 80px;
text-align: center;
opacity: .75;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.logo-item:hover{
opacity: 1;
}
.logo-item img{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* ==============================
Post previews
============================== */
.post-grid{
}
.post-prev-img{
margin-bottom: 23px;
position: relative;
}
.post-prev-img a{
-webkit-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-prev-img a:hover{
opacity: .85;
}
.post-prev-img img{
width: 100%;
}
.post-prev-title{
margin-bottom: 6px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.post-prev-title a{
color: #777;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-prev-title a:hover{
color: #111;
}
.post-prev-info,
.post-prev-info a{
margin-bottom: 15px;
font-size: 11px;
text-decoration: none;
color: #aaa;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-prev-info a:hover{
color: #111;
}
.post-prev-text{
margin-bottom: 22px;
color: #777;
font-size: 15px;
font-weight: 300;
line-height: 1.75;
}
/* ==============================
Newsletter
============================== */
.newsletter-label{
margin-bottom: 15px;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.3em;
}
.form input.newsletter-field{
max-width: 293px;
}
.form input.newsletter-field:hover{
}
.form input.newsletter-field:focus{
}
.form input.newsletter-field::-webkit-input-placeholder{
color: #777;
}
.form input.newsletter-field:focus::-webkit-input-placeholder{
color: #111;
}
.form input.newsletter-field:-moz-placeholder{
color: #777;
}
.form input.newsletter-field:focus:-moz-placeholder{
color: #111;
}
.form input.newsletter-field::-moz-placeholder{
color: #777;
}
.form input.newsletter-field:focus::-moz-placeholder{
color: #111;
}
.form input.newsletter-field:-ms-input-placeholder{
color: #777;
}
.form input.newsletter-field:focus:-ms-input-placeholder{
color: #111;
}
/* ==============================
Contact section
============================== */
.contact-item{
position: relative;
padding-left: 44px;
color: #444;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.contact-item a{
color: #444;
text-decoration: none;
}
.contact-item a:hover{
color: #000;
text-decoration: none;
}
.ci-icon{
width: 23px;
height: 23px;
position: absolute;
top: 10px;
left: 3px;
color: #fff;
text-align: center;
line-height: 23px;
}
.ci-icon:before{
content: " ";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: #111;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ci-icon i,
.ci-icon span{
position: relative;
}
.ci-title{
margin-bottom: 1px;
color: #777;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.3em;
}
.ci-text{
font-size: 15px;
font-weight: 300;
}
/*
* Contact form
*/
.cf-left-col{
width: 49.4%;
float: left;
margin-right: 1.2%;
}
.cf-right-col{
width: 49.4%;
float: left;
}
.contact-form .form-group{
margin-bottom: 10px;
}
/* ==============================
Google maps
============================== */
.google-map{
position: relative;
background: #111;
}
#map-canvas{
height: 410px;
position: relative;
background-color: #111 !important;
z-index: 1;
}
.gm-style-cc{
display: none !important;
}
.gm-style-iw div{
color: #777;
}
.map-section{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 0 !important;
background: rgba(17,17,17, .93);
z-index: 2;
cursor: pointer;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.map-section:hover{
background: rgba(17,17,17, .90);
}
.map-toggle{
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
color: #fff;
text-align: center;
}
.mt-icon{
width: 27px;
height: 27px;
line-height: 27px;
margin: 6px auto 25px;
position: relative;
color: #111;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.mt-icon:before{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mt-icon i,
.mt-icon span{
position: relative;
}
.mt-text{
margin-left: 12px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.3em;
color: rgba(255,255,255, .75);
}
.mt-close{
display: none;
}
/* Map opened */
.map-section.js-active{
height: 50px;
background: rgba(17,17,17, .75);
}
.map-section.js-active:hover{
background: rgba(17,17,17, .85);
}
.map-section.js-active .mt-icon{
opacity: 0;
}
.map-section.js-active .mt-text{
position: relative;
top: -20px;
}
/* ==============================
Footer
============================== */
.footer{
text-align: center;
font-size: 12px;
}
.footer a{
color: #888;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.footer a:hover{
color: #111;
text-decoration: underline;
}
.footer-copy{
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5em;
}
.footer-made{
font-size: 11px;
color: #999;
}
.footer-social-links{
font-size: 14px;
}
.footer-social-links a{
width: 25px;
height: 25px;
line-height: 25px !important;
position: relative;
margin: 0 6px;
text-align: center;
display: inline-block;
color: #111;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.footer-social-links a i,
.footer-social-links a span{
position: relative;
top: 0;
left: 0;
}
.footer-social-links a:before{
content: "";
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #111;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.footer-social-links a:hover{
color: #fff;
}
.footer-social-links a:hover:before{
background: #111;
}
a.link-to-top{
position: absolute;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: rgba(0,0,0, .2);
font-size: 48px;
}
/* ==============================
Blog
============================== */
.blog-item{
margin-bottom: 80px;
position: relative;
}
.blog-item-date{
width: 100px;
padding: 10px;
position: absolute;
top: 0px;
left: -130px;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
color: #999;
border-right: 1px solid #eee;
}
.date-num{
display: block;
margin-bottom: 3px;
font-size: 18px;
font-weight: 400;
color: #555;
}
.blog-media{
margin-bottom: 30px;
}
.blog-media img,
.blog-media .video,
.blog-media iframe{
width: 100%;
}
.blog-item-title{
margin: 0 0 .5em 0;
padding: 0;
font-size: 24px;
font-weight: 400;
text-transform: uppercase;
}
.blog-item-title a{
color: #111;
text-decoration: none;
}
.blog-item-title a:hover{
color: #777;
text-decoration: none;
}
.blog-item-data{
margin-bottom: 30px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
color: #aaa;
}
.separator{
margin: 0 5px;
}
.blog-item-data a{
color: #aaa;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-item-data a:hover{
color: #000;
text-decoration: none;
}
.blog-post-data{
margin-top: 10px;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
color: #aaa;
}
.blog-item-body{
font-size: 16px;
font-weight: 300;
color: #5f5f5f;
line-height: 1.8;
}
.blog-item-body h1,
.blog-item-body h2,
.blog-item-body h3,
.blog-item-body h4,
.blog-item-body h5,
.blog-item-body h6{
margin: 1.3em 0 0.5em 0;
}
.blog-item-more{
border: 1px solid #eaeaea;
padding: 5px 10px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
color: #777;
letter-spacing: 1px;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-item-more:hover{
text-decoration: none;
border-color: #111;
}
a.blog-item-more{
color: #777;
text-decoration: none;
}
a.blog-item-more:hover{
color: #111;
}
.blog-item-q{
background: none;
border: none;
padding: 0;
margin: 1em 0;
}
.blog-item-q p{
position: relative;
background: #f8f8f8;
padding: 17px 20px;
font-size: 18px;
font-weight: 300;
font-style: normal;
letter-spacing: 0;
}
.blog-item-q p a{
color: #555;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-item-q:hover a,
.blog-item-q p a:hover{
text-decoration: none;
color: #777;
}
.blog-item-q p:before,
.blog-item-q p:after{
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-item-q p:before{
content: '"';
position: absolute;
top: 10px;
left: 10px;
}
.blog-item-q p:after{
content: '"';
}
.blog-item-q p:hover:before,
.blog-item-q p:hover:after{
color: #777;
}
.blog-page-title{
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Pagination
*/
.pagination{
font-size: 13px;
font-family: "Open Sans", arial, sans-serif;
}
.pagination a{
display: inline-block;
min-width: 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 7px 14px;
border: 1px solid #eaeaea;
color: #999;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.pagination .fa{
margin-top: 1px;
font-size: 16px;
}
.pagination a:hover{
text-decoration: none;
border-color: #bbb;
color: #444;
}
.pagination a.active,
.pagination a.active:hover{
border-color: #bbb;
color: #444;
cursor: default;
}
.pagination a.no-active,
.pagination a.no-active:hover{
border-color: #efefef;
color: #bbb;
cursor: default;
}
/*
* Comments
*/
.comment-list{
}
.comment-item{
padding-top: 30px !important;
border-top: 1px dotted #e9e9e9;
font-size: 14px;
overflow: hidden;
}
.comment-item:first-child{
padding-top: 0;
border-top: none;
}
.media-body{
overflow: hidden;
}
.comment-avatar{
width: 50px;
margin-right: 10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.comment-item-data{
margin: 0 0 5px;
text-transform: uppercase;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #777;
}
.comment-item-data a{
color: #777;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.comment-item-data a:hover{
color: #000;
text-decoration: none;
}
.comment-author{
display: inline-block;
margin-right: 20px;
font-size: 11px;
font-weight: 700;
}
.comment-author a{
color: #999;
}
/*
* Sidebar
*/
.sidebar{
margin-top: 10px;
}
.widget{
margin-bottom: 60px;
}
.widget .img-left{
margin: 0 10px 10px 0;
}
.widget .img-right{
margin: 0 0 10px 10px;
}
.widget-title{
margin-bottom: 20px;
padding-bottom: 5px;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
color: #777;
border-bottom: 1px solid #ccc;
}
.widget-body{
font-size: 13px;
color: #777;
}
.widget-text{
line-height: 1.7;
}
/* Search widget */
.search-wrap{
position: relative;
}
.search-field{
width: 100% !important;
height: 40px !important;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.search-button{
width: 42px;
height: 40px;
line-height: 38px;
margin-top: -20px;
position: absolute;
top: 50%;
right: 1px;
overflow: hidden;
background: transparent;
border: none;
outline: none;
color: #999;
font-size: 14px;
}
.search-button:hover{
color: #111;
}
.search-button:hover + .search-field{
border-color: #ccc;
}
/* Widget menu */
.widget-menu{
font-size: 13px;
}
.widget-menu li{
padding: 5px 0;
}
.widget-menu li a{
color: #555;
text-decoration: none;
padding-bottom: 2px;
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.widget-menu li a:hover,
.widget-menu li a.active{
color: #999;
}
.widget-menu li small{
font-size: 11px;
color: #aaa;
}
/* Widget tags */
.tags{
}
.tags a{
display: inline-block;
margin: 0 2px 5px 0;
padding: 5px 7px;
border: 1px solid #e9e9e9;
color: #777;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.tags a:hover{
text-decoration: none;
border-color: #333;
color: #111;
}
/* Comments */
.widget-comments{
color: #aaa;
}
.widget-comments li{
padding: 12px 0;
border-bottom: 1px dotted #eaeaea;
}
.widget-comments li a{
color: #555;
text-decoration: none;
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.widget-comments li a:hover{
color: #999;
}
/* Posts */
.widget-posts{
color: #aaa;
}
.widget-posts li{
font-size: 12px;
padding: 12px 0;
border-bottom: 1px dotted #eaeaea;
}
.widget-posts li a{
font-size: 13px;
display: block;
color: #555;
text-decoration: none;
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.widget-posts li a:hover{
color: #999;
}
.widget-posts-img{
float: left;
margin: 0 7px 0 0;
}
.widget-posts-descr{
overflow: hidden;
}
/* ==============================
Shop
============================== */
.shopping-cart-table{
}
.shopping-cart-table a{
text-decoration: none;
}
table.shopping-cart-table tr th,
table.shopping-cart-table tr td{
vertical-align: middle;
}
/* ==============================
Pricing
============================== */
.pricing-item{
margin: 0 0 30px;
position: relative;
text-align: center;
}
.pricing-item-inner{
border: 1px solid #eaeaea;
vertical-align: middle;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.pricing-item-inner:hover{
border-color: #aaa;
}
.main .pricing-item-inner{
border-color: #aaa;
}
.pricing-wrap{
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 30px 20px;
text-align: center;
overflow: hidden;
}
.pricing-icon{
padding-top: 10px;
padding-bottom: 5px;
position: relative;
font-size: 32px;
z-index: 1;
}
.pricing-title{
position: relative;
margin-bottom: 40px;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1;
}
.pr-list{
margin: 0 -20px 30px;
padding: 0;
color: #777;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
}
.pr-list li{
padding: 12px 20px;
list-style: none;
border-bottom: 1px solid #f1f1f1;
}
.pr-list li:first-child{
border-top: 1px solid #f1f1f1;
}
.pricing-num{
font-size: 40px;
font-weight: 300;
line-height: 1;
}
.pricing-num sup{
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: 400;
position: relative;
top: -20px;
left: -3px;
margin-left: -7px;
}
.pr-button{
margin: 30px -20px 0;
padding-top: 30px;
border-top: 1px solid #f1f1f1;
}
.pr-per{
color: #999;
font-size: 12px;
}
/* ==============================
Shortcodes
============================== */
.margin-block{
margin-bottom: 30px;
}
/*
* Owl Carousel
*/
.owl-carousel{
overflow: hidden;
}
.owl-buttons{
position: static;
}
.owl-prev,
.owl-next{
opacity: 0;
display: block;
position: absolute;
top: 50%;
margin-top: -50px;
width: 105px;
height: 105px;
line-height: 105px;
font-size: 16px;
text-align: center;
color: #111;
z-index: 6;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.owl-prev{
left: -50px;
}
.owl-next{
right: -50px;
}
.owl-prev:before,
.owl-next:before{
content: "";
display: block;
width: 66%;
height: 66%;
position: absolute;
top: 17px;
left: 0;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.owl-next:before{
left: auto;
right: 0;
}
.owl-prev .fa,
.owl-next .fa{
position: relative;
}
.owl-prev:hover,
.owl-next:hover{
-webkit-transition: 0 none !important;
-moz-transition: 0 none !important;
-ms-transition: 0 none !important;
-o-transition: 0 none !important;
transition:0 none !important;
}
.owl-prev:hover:before,
.owl-next:hover:before{
opacity: 0.87;
}
.owl-prev:active:before,
.owl-next:active:before{
opacity: 0.6;
}
.owl-carousel:hover .owl-prev{
opacity: 1;
left: -35px;
}
.owl-carousel:hover .owl-next{
opacity: 1;
right: -35px;
}
.owl-pagination{
display: block;
width: 100%;
position: absolute;
bottom: 30px;
left: 0;
text-align: center;
}
.owl-page{
display: inline-block;
padding: 6px 4px;
position: relative;
}
.owl-page span{
width: 6px;
height: 6px;
display: block;
background: rgba(255,255,255, .7);
position: relative;
z-index: 1000 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 0px rgba(0, 0, 0, .1);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.owl-page:hover span{
background: rgba(255,255,255, 1);
}
.owl-page.active span{
background: transparent;
bordeR: 1px solid rgba(255,255,255, .8);
-webkit-transform: scale(1.3333333);
-moz-transform: scale(1.3333333);
-o-transform: scale(1.3333333);
-ms-transform: scale(1.3333333);
transform: scale(1.3333333);
}
.item-carousel .owl-prev{
left: -125px;
}
.item-carousel .owl-next{
right: -125px;
}
section:hover .item-carousel.owl-carousel .owl-prev{
opacity: 1;
left: -80px;
}
section:hover .item-carousel.owl-carousel .owl-next{
opacity: 1;
right: -80px;
}
.item-carousel{
margin-bottom: -50px;
padding-bottom: 50px;
}
.item-carousel .owl-pagination{
bottom: 0;
}
.work-full-slider .owl-pagination,
.content-slider .owl-pagination{
bottom: 15px;
}
.single-carousel,
.small-item-carousel{
margin-bottom: 35px;
}
.single-carousel .owl-pagination,
.small-item-carousel .owl-pagination{
position: relative;
left: 0;
top: 35px;
margin: 0;
}
.single-carousel.black .owl-page span,
.small-item-carousel.black .owl-page span{
background: rgba(0,0,0, .15);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.single-carousel.black .owl-page:hover span,
.small-item-carousel.black .owl-page:hover span{
background: rgba(0,0,0, .4);
}
.single-carousel.black .owl-page.active span,
.small-item-carousel.black .owl-page.active span{
background: rgba(0,0,0, .4);
}
.single-carousel.black .owl-prev,
.single-carousel.black .owl-next,
.small-item-carousel.black .owl-prev,
.small-item-carousel.black .owl-next{
color: rgba(0,0,0, .2);
text-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.single-carousel.black .owl-prev:hover,
.single-carousel.black .owl-next:hover,
.small-item-carousel.black .owl-prev:hover,
.small-item-carousel.black .owl-next:hover{
color: rgba(0,0,0, .35);
}
.single-carousel .owl-prev,
.small-item-carousel .owl-prev{
left: -125px;
}
.single-carousel .owl-next,
.small-item-carousel .owl-next{
right: -125px;
}
section:hover .single-carousel .owl-prev,
section:hover .small-item-carousel .owl-prev{
opacity: 1;
left: -80px;
}
section:hover .single-carousel .owl-next,
section:hover .small-item-carousel .owl-next{
opacity: 1;
right: -80px;
}
.black-arrows .owl-prev,
.black-arrows .owl-next{
color: #fff;
}
.black-arrows .owl-prev:before,
.black-arrows .owl-next:before{
background: rgba(0,0,0, 1);
}
/*
* Tabs
*/
.tpl-tabs{
border-color: #e5e5e5;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.tpl-tabs > li > a{
text-decoration: none;
color: #777;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.tpl-tabs > li > a:hover{
background-color: #f5f5f5;
}
.tpl-tabs li.active a{
color: #000;
}
.tpl-tabs-cont{
padding: 30px 0;
color: #777;
line-height: 1.8;
}
/*
* Tabs minimal
*/
.tpl-minimal-tabs{
display: inline-block;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
border: none;
}
.tpl-minimal-tabs > li{
padding: 0 30px;
background: none !important;
}
.tpl-minimal-tabs > li > a{
padding: 6px 20px 5px;
text-decoration: none;
color: #000;
background: none;
border: 1px solid transparent;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.tpl-minimal-tabs > li > a:hover{
background: none;
border-color: #e9e9e9;
color: #777;
}
.tpl-minimal-tabs li.active a,
.tpl-minimal-tabs li.active a:hover{
border: 1px solid #222 !important;
background: none !important;
color: #000;
cursor: default;
}
.tpl-minimal-tabs-cont{
}
/*
* Tabs Alternative
*/
.tpl-alt-tabs{
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
border: none;
}
.tpl-alt-tabs > li{
width: 215px;
display: inline-block;
vertical-align: top;
float: none;
padding: 0;
background: none !important;
}
.tpl-alt-tabs > li > a{
text-decoration: none;
color: #a3a3a3;
background: none !important;
border: none !important;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: all 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.tpl-alt-tabs > li > a:hover{
background: none;
color: #111;
}
.tpl-alt-tabs li.active a,
.tpl-alt-tabs li.active a:hover,
.tpl-alt-tabs li.active a:focus{
cursor: default;
color: #111;
}
.alt-tabs-icon{
display: block;
margin-bottom: 12px;
font-size: 48px;
letter-spacing: 0;
}
.tpl-minimal-tabs-cont{
}
/*
* Alert messages
*/
.alert{
margin: 0 auto 10px;
padding: 14px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #777;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.success{
border-color: #a9e2c2;
color: #36a367;
}
.info{
border-color: #9ecdfc;
color: #297ad3;
}
.notice{
border-color: #f9ce75;
color: #e9a00a;
}
.error{
border-color: #ffbbbb;
color: #e33131;
}
/*
* Accordion
*/
.accordion > dt{
margin-bottom: 10px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.accordion > dt > a{
display: block;
position: relative;
color: #777;
text-decoration: none;
padding: 14px 20px;
border: 1px solid #e5e5e5;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.accordion > dt > a:hover{
text-decoration: none;
border-color: #ddd;
background-color: #fcfcfc;
color: #444;
}
.accordion > dt > a.active{
color: #000;
border-color: #ddd;
background-color: #fcfcfc;
cursor: default;
}
.accordion > dt > a:after{
content: "\f107";
width: 15px;
height: 15px;
margin-top: -8px;
position: absolute;
top: 50%;
right: 10px;
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 15px;
line-height: 15px;
text-align: center;
color: #999;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.accordion > dt > a.active:after,
.accordion > dt > a.active:hover:after{
content: "\f106";
color: #111;
}
.accordion > dt > a:hover:after{
color: #444;
}
.accordion > dd{
margin-bottom: 10px;
padding: 10px 20px 20px;
font-size: 14px;
line-height: 1.8;
color: #777;
}
/*
* Toggle
*/
.toggle > dt{
margin-bottom: 10px;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.toggle > dt > a{
display: block;
position: relative;
color: #777;
text-decoration: none;
padding: 14px 20px;
border: 1px solid #e5e5e5;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.toggle > dt > a:hover{
text-decoration: none;
border-color: #ddd;
background-color: #fcfcfc;
color: #444;
}
.toggle > dt > a.active{
color: #000;
border-color: #ddd;
background-color: #fcfcfc;
}
.toggle > dt > a:after{
content: "\f107";
width: 15px;
height: 15px;
margin-top: -8px;
position: absolute;
top: 50%;
right: 10px;
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-size: 15px;
line-height: 15px;
text-align: center;
color: #999;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.toggle > dt > a.active:after,
.toggle > dt > a.active:hover:after{
content: "\f106";
color: #111;
}
.toggle > dt > a:hover:after{
color: #444;
}
.toggle > dd{
margin-bottom: 10px;
padding: 10px 20px 20px;
font-size: 14px;
line-height: 1.8;
color: #777;
}
/*
* Progress bars
*/
.tpl-progress{
margin-top: 10px;
margin-bottom: 50px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
overflow: visible;
height: 2px;
background: #f0f0f0;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.tpl-progress .progress-bar{
padding-top: 2px;
position: relative;
overflow: visible;
background-color: #222;
font-size: 11px;
color: #000;
text-align: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tpl-progress .progress-bar > span{
display: inline-block;
min-width: 24px;
height: 24px;
padding: 0 3px;
position: absolute;
top: 0px;
right: -5px;
text-align: center;
line-height: 23px;
letter-spacing: 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.progress-color .progress-bar{
background-color: #e41919;
color: #e41919;
}
.progress-color .progress-bar > span{
background-color: #e41919;
color: #fff;
}
/* Alt bar */
.tpl-progress-alt{
background: #f2f2f2;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.tpl-progress-alt .progress-bar{
padding-left: 5px;
padding-right: 5px;
position: relative;
overflow: visible;
background-color: #222;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
text-align: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.highlight pre{
border-color: #eaeaea;
background: #fcfcfc;
color: #555;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
/*
* Font icons examples
*/
.fa-examples{
color: #555;
margin-left: 1px;
}
.fa-examples > div{
padding: 0;
border: 1px solid #e5e5e5;
margin: -1px 0 0 -1px;
font-size: 13px;
}
.fa-examples > div:hover{
background: #f0f0f0;
color: #000;
}
.fa-examples > div > i{
display: inline-block;
margin-right: 5px;
min-width: 40px;
min-height: 40px;
border-right: 1px solid #f1f1f1;
line-height: 40px;
text-align: center;
font-size: 14px;
}
.fa-examples > div > .muted{
margin-left: 5px;
color: #999;
font-size: 12px;
}
.fa-sm{
width: 20px;
font-size: 14px;
}
.et-examples{
color: #555;
margin-left: 1px;
vertical-align: middle;
}
.et-examples .box1{
display: block;
width: 33%;
float: left;
padding: 0;
border: 1px solid #e5e5e5;
margin: -1px 0 0 -1px;
font-size: 13px;
}
@media only screen and (max-width: 1024px) {
.et-examples .box1{
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.et-examples .box1{
width: 100%;
}
}
.et-examples .box1:hover{
background: #f8f8f8;
color: #111;
}
.et-examples .box1 > span{
display: inline-block;
margin-right: 5px;
min-width: 70px;
min-height: 70px;
border-right: 1px solid #f1f1f1;
line-height:70px;
text-align: center;
font-size: 32px;
}
/* ==============================
Intro page
============================== */
.intro-image{
width:100%;
}
.intro-label{
position: absolute;
top:7px;
right: 10px;
font-size: 17px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.label-new{
background: #f32929;
color: white;
padding: 2px 3px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.label-for-button{
position: absolute;
top: -5px;
right: -5px;
}
.intro-label-round{
width: 50px;
height: 50px;
position: absolute;
top:-5px;
right: -5px;
color: rgba(255,255,255, .85);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
letter-spacing: 1px;
line-height: 50px;
background: #f32929;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/* ==============================
Special demos
============================== */
/*
* Magazine
*/
.magazine-logo-text{
margin-top: 0;
position: relative;
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.2em;
line-height: 1.8;
}
.blog-posts-carousel-item{
padding-bottom: 20px;
}
.blog-posts-carousel-item .post-prev-title,
.blog-posts-carousel-item .post-prev-info{
padding: 0 10px;
}
.blog-post-prev-small{
color: #aaa;
font-size: 12px;
padding: 12px 0;
border-top: 1px dotted #eaeaea;
}
.blog-post-prev-small a{
font-size: 13px;
display: block;
color: #555;
text-decoration: none;
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-post-prev-small a:hover{
color: #999;
}
.blog-posts-carousel-alt li img{
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-posts-carousel-alt li:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 5s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-slide-info{
width: 100%;
padding: 30px 30px 30px 30px;
position: absolute;
bottom: 0;
left: 0;
text-transform: uppercase;
text-align: center;
font-size: 11px;
letter-spacing: 1px;
color: rgba(255,255,255, .75);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .5)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
background-color: rgba(0, 0, 0, 0);
background: rgba(0,0,0, .65);
}
.blog-slide-title{
margin-bottom: 6px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.blog-slide-title a{
display: block;
color: rgba(255,255,255, .85);
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.blog-slide-title a:hover{
color: rgba(255,255,255, 1);
}
.blog-slide-data{
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
.blog-slide-data a{
color: rgba(255,255,255, .65);
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.blog-slide-data a:hover{
color: rgba(255,255,255, 1);
text-decoration: none;
}
/*
* Landing
*/
.play-video-link{
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
color: #111;
}
.play-video-link:hover,
.play-video-link:focus{
color: #777;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.play-video-link .fa{
vertical-align: middle;
}
.download-button{
display: inline-block;
position: relative;
padding: 13px 20px 13px 55px;
border: 2px solid #111;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.download-button:hover,
.download-button:focus{
text-decoration: none;
color: #111;
opacity: .6;
}
.db-icon{
width: 40px;
height: 40px;
position: absolute;
top: 10px;
left: 10px;
font-size: 28px;
line-height: 40px;
text-align: center;
}
.db-title{
display: block;
font-size: 12px;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
}
.db-descr{
display: block;
font-size: 11px;
color: #777;
font-weight: 400;
}
/*
* Photography 1
*/
.fullwidth-slideshow{
cursor: grab;
cursor: -webkit-grab;
cursor: -moz-grab;
}
.fullwidth-slideshow-pager-wrap{
cursor: default;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 60px 0 20px 0;
z-index: 25;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .65)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
background-color: rgba(0, 0, 0, 0);
}
.fullwidth-slideshow-pager-wrap .owl-item{
opacity: .7;
-webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.fullwidth-slideshow-pager-wrap .owl-item:hover{
opacity: 1;
}
.fullwidth-slideshow-pager-wrap .owl-item.synced{
opacity: 1;
}
.fsp-item{
margin: 0 2px;
cursor: pointer;
}
.fsp-item:active{
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
-o-transform: scale(0.98);
-ms-transform: scale(0.98);
transform: scale(0.98);
}
.fsp-item img{
width: 100%;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-border-radius: 2px;
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, .75);
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, .75);
box-shadow: 0px 1px 5px rgba(0, 0, 0, .75);
}
/*
* Photography 2
*/
.side-panel-is-left{
margin-left: 270px;
}
.sp-overlay{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(10,10,10, .85);
cursor:crosshair;
z-index: 1030;
}
.side-panel{
position: fixed;
top: 0;
left: 0;
width: 270px;
height: 100%;
padding-bottom: 60px;
overflow-y: auto;
color: rgba(255,255,255, .65);
background: #151515;
text-align: center;
z-index: 1031;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sp-close-button{
display: none;
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
border: 1px solid rgba(255,255,255, .5);
opacity: .5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.17s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sp-close-button:hover{
opacity: .75;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.sp-close-button:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width:14px;
height: 2px;
margin: -1px 0 0 -7px;
background: #fff;
}
.sp-close-button:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width:2px;
height: 14px;
margin: -7px 0 0 -1px;
background: #fff;
}
/* Responsive menu button */
.sp-button{
display: none;
position: fixed;
top: 20px;
left: 20px;
width: 54px;
height: 54px;
background: #111;
opacity: .85;
text-indent: -12345px;
z-index: 1030;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: opacity 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sp-button:hover{
opacity: 1;
}
.sp-button span{
display: block;
width: 22px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -11px;
-webkit-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sp-button span:before,
.sp-button span:after{
content: "";
display: block;
width: 100%;
height: 2px;
background: #fff;
position: absolute;
top: -6px;
left: 0;
-webkit-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -webkit-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-moz-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -moz-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-o-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -o-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
-ms-transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), -ms-transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
transition: top 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), bottom 0.07s cubic-bezier(0.000, 0.000, 0.580, 1.000), transform 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000) 0.07s;
}
.sp-button span:after{
top: auto;
bottom: -6px;
}
/* Logo */
.sp-logo-wrap{
}
.sp-logo-wrap .logo{
display: block;
padding: 30px;
text-align: center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sp-logo-wrap .logo img{
max-width: 100%;
}
/* Menu */
.sp-wrapper{
}
.sp-menu-links,
.sp-menu-links ul{
margin: 0;
padding: 10px 0;
line-height: 1.3;
text-align: center;
}
.sp-menu-links ul.sp-sub{
padding: 0;
}
.sp-menu-links a{
display: block;
position: relative;
margin: 0;
padding: 15px 20px;
color: #999;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(255,255,255, .1);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
z-index: 11;
}
.no-touch .sp-menu-links a:hover,
.sp-menu-links a:active,
.sp-menu-links li.js-opened > a{
color: #d5d5d5;
text-decoration: none;
}
.no-touch .sp-menu-links a:hover{
background-color: rgba(255,255,255, .05);
}
.sp-menu-links li{
margin: 0;
padding: 0;
position: relative;
}
.sp-menu-links li > a:active,
.sp-menu-links li a.active{
color: #f5f5f5;
}
.sp-menu-links li.js-opened:before{
display: none;
}
.no-touch .sp-menu-links li.js-opened > a:hover,
.sp-menu-links li.js-opened > a:active{
color: #fff;
}
.sp-has-sub{
}
.sp-has-sub .fa{
font-size: 14px;
}
.js-opened > .sp-has-sub > .fa{
color: #fff;
}
.sp-sub{
display: none;
opacity: 0;
position: relative;
}
.sp-sub > li > a{
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 13px;
font-weight: 400;
}
.sp-menu-links li.js-opened .sp-sub{
opacity: 1;
}
.sp-search{
width: 100%;
}
.sp-search input.search-field{
background: transparent;
color: #555;
text-align: center;
border: none;
border-bottom: 1px solid rgba(255,255,255, .2);
}
.sp-search input.search-field:hover{
border: none;
border-bottom: 1px solid rgba(255,255,255, .4);
}
.sp-search input.search-field:focus{
color: #999;
border-color: rgba(255,255,255, .7);
}
.sp-search .search-button:hover{
color: #fff;
}
/* Social links */
.sp-social-links{
position: fixed;
bottom: 0;
left: 0;
width: inherit;
padding: 10px 10px 30px 10px;
font-size: 14px;
text-align: center;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1032;
}
.sp-social-links > a{
display: inline-block;
margin: 0 2px;
width: 34px;
height: 34px;
line-height: 34px;
border: 1px solid rgba(255,255,255, .15);
text-align: center;
text-decoration: none;
color: #555;
-webkir-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.sp-social-links > a:hover{
border-color: rgba(255,255,255, .3);
color: #999;
}
/* White side panel */
.side-panel.white{
color: rgba(0,0,0, .65) !important;
background: #fafafa;
border-right: 1px solid rgba(0,0,0, .07);
}
.side-panel.white .sp-close-button{
border: 1px solid rgba(0,0,0, .5);
}
.side-panel.white .sp-close-button:before{
background: #000;
}
.side-panel.white .sp-close-button:after{
background: #000;
}
.side-panel.white .sp-menu-links a{
color: #777;
-webkit-tap-highlight-color: rgba(0,0,0, .05);
}
.side-panel.white .sp-menu-links li{
border-top: 1px solid rgba(0,0,0, .04);
}
.side-panel.white .sp-menu-links li:last-child{
border-bottom: 1px solid rgba(0,0,0, .04);
}
.no-touch .side-panel.white .sp-menu-links a:hover,
.side-panel.white .sp-menu-links a:active,
.side-panel.white .sp-menu-links li.js-opened > a{
color: #111;
text-decoration: none;
}
.no-touch .side-panel.white .sp-menu-links a:hover{
background-color: rgba(0,0,0, .03);
}
.side-panel.white .sp-menu-links li > a:active,
.side-panel.white .sp-menu-links li a.active{
color: #111;
}
.no-touch .side-panel.white .sp-menu-links li.js-opened > a:hover,
.side-panel.white .sp-menu-links li.js-opened > a:active{
color: #111;
}
.side-panel.white .js-opened > .sp-has-sub > .fa{
color: #333;
}
.side-panel.white .sp-sub > li{
border: none!important;
}
.side-panel.white .sp-social-links > a{
border: 1px solid rgba(0,0,0, .15);
color: rgba(0,0,0, .4);
}
.side-panel.white .sp-social-links > a:hover{
border-color: rgba(0,0,0, .3);
color: rgba(0,0,0, .75);
}
/* Photo Tilt effect */
.tilt-wrap{
width: 100%;
position: relative;
}
.tilt{
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tilt__back, .tilt__front{
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tilt__back{
position: relative;
}
.tilt__front{
position: absolute;
top: 0;
left: 0;
}
/*
* Coming soon page
*/
.countdown{
display: inline-block;
}
.countdown > li{
float: left;
margin: 0 30px;
}
.countdown-number{
position: relative;
display: block;
width: 94px;
height: 94px;
color: #111;
font-size: 36px;
text-align: center;
line-height: 84px;
}
.countdown-number > span{
position: relative;
z-index: 2;
}
.countdown-number > b{
display: block;
width: 100%;
position: absolute;
bottom: 20px;
left: 0;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
color: #999;
z-index: 2;
}
.countdown-number:before{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255, .95);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
/* Dark Timer */
.countdown.dark .countdown-number{
color: #fff;
}
.countdown.dark .countdown-number > b{
color: #aaa;
}
.countdown.dark .countdown-number:before{
background: rgba(0,0,0, .8);
}
/* ==============================
Bootstrap multicolumn grid
============================== */
/* clear the first in row for any block that has the class "multi-columns-row" */
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; }
@media (min-width: 768px) {
/* reset previous grid */
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: none; }
/* clear first in row for small columns */
.multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 992px) {
/* reset previous grid */
.multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; }
/* clear first in row for medium columns */
.multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 1200px) {
/* reset previous grid */
.multi-columns-row .col-md-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-md-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-md-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-md-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-md-1:nth-child(12n + 13) { clear: none; }
/* clear first in row for large columns */
.multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }
}