/*------------------------------------------------------------------
[Table of contents]
1. Import fonts
2. General Styles
3. Common class
3.1 Parallax style
3.2 Button style
3.3 social icon style
3.4 Preloader
4 Navigation
5 Footer section
6 Swiper slider
7 Home
8 Inside
9 Gallery
10 Contact
-------------------------------------------------------------------*/
/* 1. Import fonts */
/* see fonts.css */
/* 2. General Styles
-------------------------*/
html {font-size: 62.5%;}
body {
height: 100%;
font-family: 'Raleway-Light', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #666;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
background: #fff;
transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;
}
a {color: #666;text-decoration: none;}
a:hover,a:focus {color: #000;text-decoration: none;}
img{max-width:100%;}
iframe {border: none;}
h1,h2,h3,h4,h5,h6 {margin: 1em 0;color: #999;font-weight: normal;line-height: 1.3;font-family: 'Raleway-Bold', sans-serif;text-rendering:optimizelegibility;}
h1 {font-size: 52px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 21px;}
h5 {font-size: 18px;}
h6 {font-size: 14px;}
p {margin: 0 0 1em;}
ul,ol {margin-bottom: 20px;line-height: 1.8;list-style-type:none}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.text-center{text-align:center;}
.text-right{text-align:right;}
.white{color:#fff;}
.uppercase {text-transform: uppercase;}
.non-uppercase {text-transform: none;}
.row {margin:0;/*margin-bottom: 30px;*/}
section,.section {position: relative;}
.container {
width: 80%;
margin: 0 auto;
max-width: 1100px;
}
.btn {
background: #319AC8;
padding: 0.5em 1.5em;
text-transform: uppercase;
color: #fff;
font-family: 'Raleway-Light', sans-serif;
font-size: 1.25em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;
-ms-border-radius:0.2em;
-o-border-radius:0.2em;
border-radius:0.2em;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.btn:hover {
background: #000;
}
.space10 { width: 100%; height: 2em; }
.space20 { width: 100%; height: 4em; }
.space30 { width: 100%; height: 6em; }
.clear { clear: both }
b, strong {
font-family: "Raleway-Bold";
font-weight: normal;
}
/*==========================================================*/
/* 3. common class
/*==========================================================*/
.text-color{color:#C1272D;}
.text-white{color:#fff;}
.margin0{margin:0px !important;}
.margint5{margin-top:5px !important;}
.margint10{margin-top:10px !important;}
.margint20{margin-top:20px !important;}
.margint30{margin-top:30px !important;}
.margint40{margin-top:40px !important;}
.margint50{margin-top:50px !important;}
.margint60{margin-top:60px !important;}
.margint70{margin-top:70px !important;}
.margint80{margin-top:80px !important;}
.margint90{margin-top:90px !important;}
.margint100{margin-top:100px !important;}
.margint120{margin-top:120px !important;}
.marginb10{margin-bottom:10px !important;}
.marginb20{margin-bottom:20px !important;}
.marginb30{margin-bottom:30px !important;}
.marginb40{margin-bottom:40px !important;}
.marginb60{margin-bottom:60px !important;}
.marginb80{margin-bottom:80px !important;}
.marginb90{margin-bottom:90px !important;}
.marginb100{margin-bottom:100px !important;}
.marginb120{margin-bottom:120px !important;}
.padrl20{padding:0 20px;}
.padrl50{padding:0 50px;}
.marginl20{margin-left:20px;}
.padt20{padding-top:20px;}
.padt40{padding-top:40px;}
.padt80{padding-top:80px;}
.padt60{padding-top:60px;}
.padb30{padding-bottom:30px;}
.padb40{padding-bottom:40px;}
.padb60{padding-bottom:60px;}
.padb80{padding-bottom:80px;}
.padb100{padding-bottom:100px;}
.pad5{padding:5px;}
.pad10{padding:10px;}
.pad20{padding:20px;}
.pad30{padding:30px;}
.text-center{text-align:center}
.text-right{text-align:right}
.text-left{text-align:left}
.relative-position{position:relative !important}
.desktoponly{display: block;}
.mobileonly{display: none;}
/* 3.1 Parallax
-------------------------*/
.parallax {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
padding: 0;
position: static;
text-align: center;
}
@media only screen and (max-width: 1024px) {
.parallax {
background-attachment: scroll !important;
background-position: center top !important;
}
}
/* 3.2 Preloader*/
#preloader {
background-color:#fff;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
#loading-animation {
background-image: url("../img/icns/loader.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: 15em;
height: 15em;
width: 15em;
left: 50%;
margin: -7.5em 0 0 -7.5em;
position: absolute;
top: 50%;
}
/* 4. Navigation
-------------------------*/
.navigation{}
header.navbar {
visibility: visible;
opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;-ms-opacity:1;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
font-size: 0.9em;
border:none !important;
-webkit-border-radius:0;
-moz-border-radius:0;
-ms-border-radius:0;
-o-border-radius:0;
border-radius:0;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
color: #FFF;
height: auto;
/*background: #fff;*/
padding: 1.2em 0;
margin-bottom: 0;
background: rgba(255,255,255,0.95);
box-shadow: 0 0 0.5em rgba(0,0,0,0.15);
}
header.navbar.show {
padding: 0;
}
header.navbar:after {
clear: both;
content: '';
border-bottom: 1px solid #fff;
position: absolute;
bottom: -2px;
width: 100%;
}
header.navbar .container {
width: 95%;
position: relative;
}
header.navbar .navbar-header {
float: none;
text-align: center;
}
.header-social {
position: absolute;
right: 0;
float: none;
margin-top: 0;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
header.navbar.show .header-social {
display: none;
}
header.navbar .navbar-toggle {
height: 36px;
margin: 1em 0 0;
padding: 0 12px;
-webkit-border-radius:0;
-moz-border-radius:0;
-ms-border-radius:0;
-o-border-radius:0;
border-radius:0;
border: none;
outline: none;
background: #000;
position: absolute;
right: 5%;
float: none;
}
header.navbar .navbar-toggle .icon-bar {
-webkit-border-radius:0;
-moz-border-radius:0;
-ms-border-radius:0;
-o-border-radius:0;
border-radius:0;
background: #fff;
}
header.navbar .navbar-brand {
height: auto;
float: left;
display: block;
vertical-align: middle;
padding: 1em 0 0;
font-size: 1em;
font-weight: 900;
line-height: 1;
}
header.navbar.show .navbar-brand {
margin-bottom: 1em;
}
header.navbar.show .navbar-brand img {
max-height: 3em;
}
header.navbar .navbar-brand img {
max-height: 4.5em;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
header.navbar .navbar-nav {
position: relative;
margin: 0 auto;/*1em auto 0;*/
float: none;
font-size: 1em;
letter-spacing: normal;
width: auto;
font-family: 'Raleway-Light';
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
header.navbar.show .navbar-nav {
margin: 0;
}
header.navbar .navbar-nav li {
padding: 0;
margin: 0;
line-height: normal;
float: none;
display: inline-block;
}
header.navbar .navbar-nav li a{
color: #999;
font-family: 'Raleway-Medium', Helvetica, Arial, Sans-serif;
letter-spacing: 0.125em;/*0.3em;*/
padding: 0 2em; /*3em*/
margin: 0;
line-height: normal;
border-right: 1px solid #999;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
header.navbar .navbar-nav li.active a, header.navbar .navbar-nav li a:hover,header.navbar .navbar-nav li a:active,header.navbar .navbar-nav li a:focus{
color: #000;
background: transparent;
}
header.navbar .navbar-nav li:nth-last-child(1) a{
border-right: none;
padding-right: 0;
}
/*header.navbar .navbar-nav li:nth-last-child(1) a{
border-right: none;
color: rgba(163,197,198,1);
}
header.navbar .navbar-nav li:nth-last-child(1) a:hover{
color: #000
}*/
.navbar-collapse .back {
background-color:#3CB371;
height: 54px;
position: absolute;
top: 0;
transition: background-color 0.2s ease 0s;
-webkit-transition: background-color 0.2s ease 0s;
-moz-transition: background-color 0.2s ease 0s;
-o-transition: background-color 0.2s ease 0s;
z-index: -1;
}
#toggle-navbar {
display: none;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100px;
line-height: 95px;
font-size: 2em;
font-weight: 900;
color: #fff;
text-align: center;
background: #ffcd00;
}
#toggle-navbar:hover {
cursor: pointer;
}
.navbar-collapse,
.navbar-collapse.collapse {
display: table;
float: right;
width: auto;
height: auto !important;
max-height: none;
overflow: hidden;
padding: 0;
position: relative;
text-align: center;
top: 3.5em;
right: 0;
}
.navbar.show .navbar-collapse,
.navbar.show .navbar-collapse.collapse {
top: 1.5em
}
.navbar-collapse.in {
overflow: hidden;
}
@media (max-width: 767px) {
.navbar-collapse.in {
display: none;
height: 0 !important;
}
}
header.navbar .navbar-nav>li.dropdown>.dropdown-menu {
-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;
background: transparent;
box-shadow: none;
border: 0;
padding: 1.55em 0 0;
margin: 0;
z-index: 99999;
}
@media (min-width: 768px) {
.navbar-nav>li.dropdown:hover>.dropdown-menu {
display: block;
}
}
header.navbar .navbar-nav .dropdown .dropdown-menu li {
padding: 0;
width: 100%;
text-align: left;
}
header.navbar .navbar-nav li.dropdown li a {
transition: all 0.5s ease-in-out 0s;
display: block;
color: #000;
border: none;
letter-spacing: 0.1em;
}
header.navbar .navbar-nav li.dropdown > li.active > a,
header.navbar .navbar-nav li.dropdown > li > a:hover {
color: #000;
}
header.navbar .navbar-nav .dropdown .dropdown-menu li a {
padding: 0.75em 2em 0.75em 1.25em;
background: rgba(255,255,255,0.95);
box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.05), -2px 0 4px 0 rgba(0, 0, 0, 0.05);
}
header.navbar .navbar-nav .dropdown .dropdown-menu > li > a:hover,
header.navbar .navbar-nav .dropdown .dropdown-menu > li.active > a {
background: rgba(0,0,0,0.95);
color: #fff;
box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.05), -2px 0 4px 0 rgba(0, 0, 0, 0.05);
}
.nav .caret {
border-top-color: #666;
border-bottom-color: #666;
}
header.navbar .navbar-nav .dropdown .dropdown-menu li a:hover .nav .caret {
border-top-color: #666 !important;
border-bottom-color: #666 !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: none;
padding: 0;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>.dropdown-menu li a {
color: #000
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border: none;
}
.dropdown.mobileonly > button {
height: 2em;
width: 100%;
}
.dropdown.mobileonly > .dropdown-menu {
top: 100%;/*2em;*/
width: 100%;
text-align: center;
border-radius: 0;
padding: 0;
margin-top: -1px;
}
.dropdown.mobileonly > .dropdown-menu > a {
display: block;
padding: 0.25em 0;
border-bottom: 1px solid #ccc;
}
.dropdown.mobileonly > .dropdown-menu > a:hover,
.dropdown.mobileonly > .dropdown-menu > a.active {
background-color: #000;
color: #fff
}
.menu-line {
width: 100%;
height: 0;
border-bottom: 1px solid #fff;
box-shadow: 0 0 0.5em rgba(0,0,0,0.15);
position: fixed;
top: 10.55em;
z-index: 9998;
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
.menu-line.show {
top: 7.3em;
}
/* Footer f1f2f2*/
footer { background: #fff; color: #939598; text-transform: uppercase; font-size: 0.875em; }
#footer-links { background: #fff; text-align: center; padding: 0.5em 0; display: none; }
#footer-links li { display: inline-block; width: auto; padding: 0 2em }
#footer-links li a { color: #6D6E71; }
#footer-links li a:hover { color: #000 }
footer .logo { max-height: 4.5em; }
footer a { color: #333; }
footer a:hover { text-decoration: underline; color: #333; }
footer .container .col-xs-4.text-left { padding-top: 3em }
footer .container .col-xs-4.text-right { padding-top: 2em }
.footer-social {
background: transparent;
text-indent:-9999px;
color: transparent;
width: 3.5em;
height: 3.5em;
display: inline-block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
display: inline-block;
border-width: 1.75em;
border-color: rgba(147, 149, 152, 0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
border-style: solid;
}
.footer-social:hover {
color: transparent;
border-width: 1px;
border-color: rgba(147, 149, 152, 0.9);
}
.footer-social.facebook {
background: url(../img/icns/icn-fb.png) no-repeat;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
}
.footer-social.twitter {
background: url(../img/icns/icn-tw.png) no-repeat;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
}
.footer-social.pinterest {
background: url(../img/icns/icn-pi.png) no-repeat;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
}
.footer-social.instagram {
background: url(../img/icns/icn-ig.png) no-repeat;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
}
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
/*==========================================================*/
/* 6. Swiper slider
/*==========================================================*/
#fullscreen-slider{min-height:600px !important;}
.swiper-container {overflow: hidden;}
.swiper-slide {position: relative;overflow: hidden;background-size: cover;background-position: center center;}
.swiper-slide video {position: absolute;}
.slide-bgvideo{min-width: 100%;min-height: 100%;}
/* Navigation Arrows */
.swiper-container .nav-arrow {position: absolute;top: 50%;font-size: 24px;margin-top: -20px;color: #202020;width: 30px;height: 40px;line-height: 40px;
text-align: center;z-index: 2;color: #FFFFFF;background-position: center center;background-repeat: no-repeat;}
.swiper-container .nav-left {background-image: url("../img/icns/right.png");left: 15px;}
.swiper-container .nav-right {background-image: url("../img/icns/left.png");right: 15px;}
/* Captions (fullscreen) */
.wrap {margin-top:0px; transition: opacity 0.8s ease 0s;-webkit-transition: opacity 0.8s ease 0s;-moz-transition: opacity 0.8s ease 0s;-o-transition: opacity 0.8s ease 0s;}
#fullscreen-slider .wrap {-moz-box-sizing: border-box;padding-left: 8%;padding-right: 8%; width: 100%;}
#fullscreen-slider .wrap {height: 100%;max-width: 9999px;padding-bottom: 0;padding-top: 0;position:relative;z-index:99;}
.hero-text {color: #FFFFFF;margin:0 auto;height: auto;max-width: 950px;top:50%;position: relative;text-align:center;z-index: 10;display:block;
-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);
transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;-moz-transition: all 0.2s ease-in-out 0s;-o-transition: all 0.2s ease-in-out 0s;
}
.hero-text .hero-title h1 {font-size: 48px;margin: 37px 0 13px;text-align: center;font-weight:700;line-height:1.1em;text-transform:uppercase;
width:100%;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.8);}
.hero-text {text-align: center;}
.hero-text {color: #FFFFFF;text-align: center;}
.swiper-slide p,#home-slider p {font-size: 20px;font-style: italic;font-weight: 400;margin: 0 0 20px;}
#fullscreen-slider .swiper-slide h1,#innerheader-slider .swiper-slide h1,#fullscreen-slider .swiper-slide p {
-webkit-transition: opacity 2.5s linear;
transition: opacity 2.5s linear;
-o-transition: opacity 2.5s linear;
-moz-transition: opacity 2.5s linear;
opacity: 0;-webkit-opacity: 0;
transform:scale(0.5);
-webkit-transform:scale(0.5);
}
#fullscreen-slider .swiper-slide-active h1,#innerheader-slider .swiper-slide-active h1,#fullscreen-slider .swiper-slide-active p {opacity: 1;-webkit-opacity: 1;transform:scale(1);
-webkit-transform:scale(1);}
#fullscreen-slider .swiper-slide-active .hero-logo,#innerheader-slider .swiper-slide-active .hero-logo {opacity: 1;-webkit-opacity: 1;}
.mouse-icon {background:transparent;border: 2px solid;border-radius: 15px;-webkit-border-radius: 15px;bottom: 30px;cursor: pointer;
height: 44px;left: 0;margin: 0 auto;position: absolute;right: 0;width: 30px;transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;}
.white {border-color: #FFFFFF;}
.mouse-icon:hover {opacity: 0.3 !important;transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;}
.mouse-icon .wheel {
animation: 1.7s ease 0s normal none infinite magic-mouse-icon;
border-radius: 50% 50% 50% 50%;
height: 12px;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
right: 0;
width: 12px;
}
@-moz-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% { margin-top: 18px; opacity: 0;}}
@-webkit-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% { opacity: 1;}100% {margin-top: 18px; opacity: 0;}}
@-o-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 18px;opacity: 0;}}
@keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 18px;opacity: 0; }}
.white .wheel {background-color: #FFFFFF;}
/* Fullscreen slider navigation arrows */
#nav-arrows {height: 40px;position: absolute;top: 50%;width: 100%;z-index: 10;}
#nav-arrows a {font-size: 48px;color:#fff}
#nav-arrows a.nav-left {
animation: 1s ease 1s normal none 3 hero-right;
-webkit-animation: 1s ease 1s normal none 3 hero-right;
-moz-animation: 1s ease 1s normal none 3 hero-right;
background-image: url("../img/icns/right.png");
background-position: 0 center;
background-repeat: no-repeat;
float: left;
margin-left: 2.6em;
cursor: pointer;
height: 50px;
width: 50px;
}
#nav-arrows a.nav-right {
animation: 1s ease 1s normal none 3 hero-right;
-webkit-animation: 1s ease 1s normal none 3 hero-right;
-moz-animation: 1s ease 1s normal none 3 hero-right;
background-image: url("../img/icns/left.png");
background-position: 33px center;
background-repeat: no-repeat;
float: right;
margin-right: 2.6em;
cursor: pointer;
height: 50px;
width: 50px;
}
@keyframes hero-right {0% {margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2.6em;}}
@-webkit-keyframes hero-right {0% {margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2.6em;}}
@-moz-keyframes hero-right {0% { margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2`.6em;}}
/* 7. Home
-------------------------*/
.bg {
background: #a3c5c6 url(../img/main/bg.jpg) center no-repeat;
background-size: cover;
}
.main {
width: 100%;
font-family: inherit;
font-size: 1em;
/*min-height:600px;*/
background-color:#fff;
position:relative;
z-index:999;
text-align: center;
overflow: hidden;
}
#home-main {
margin-top: 0;
background: #a3c5c6 url(../img/main/bg-home.jpg) bottom center no-repeat;
background-size: cover;
}
#home-main img { position: absolute; bottom: -10%; width: 60%; left: 20%; }
#home-main .caption {
width: 100%;
position: absolute;
z-index: 1;
bottom: 0;
text-align: center;
}
.script { font-family: "Raleway-Bold";/*"ThirstyScriptExtraboldDemo-Regular";*/ text-transform: none; }
.script span {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
}
h1 {
font-family: "Raleway-Bold";/*"ThirstyScriptExtraboldDemo-Regular"*/
font-weight: normal;
font-size: 3em;
}
h1 span {
font-family: Arial, Helvetica, sans-serif;
font-style: italic
}
h3 {
font-family: "Raleway-Bold";
font-weight: normal;
font-size: 1.5em;
letter-spacing: 0.2em;
}
#home-main .caption h1 {
color: #fff;
text-shadow: 0 0 0.3em rgba(0,0,0,0.8);
margin: 0;
}
#home-main .caption h3 {
color: #fff;
text-shadow: 0 0 0.3em rgba(0,0,0,0.8);
margin: 0;
}
.btn-down {
background: transparent url(../img/icns/icn-down.png);
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;
display: inline-block;
width: 3.5em; height: 3.5em;
border-width: 1px;
border-color: rgba(255,255,255,0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
border-style: solid;
margin-bottom: 1em;
}
.btn-down:hover {
border: 1px solid #fff;
}
.btn-book {
display: inline-block;
background-color: rgba(163,197,198,1);
color: #fff;
padding: 0.75em 1.5em;
border-radius: 0.25em;
font-family: "Raleway-Medium";
font-size: 1em;
text-transform: uppercase;
margin: 2em 0;
}
.btn-book:hover {
background-color: #000;
color: #fff
}
a.fancy-hover:hover {
border-width: 3px;
border-color: rgba(255, 255, 255, 0.9);
}
h4 {
font-family: "Raleway-Bold";
text-transform: uppercase;
font-size: 1.25em;
color: #666;
margin: 1.5em 0 1em;
}
#testimonials, #appointment {
-moz-box-shadow: inset 0 8px 8px -8px #696868,
inset 0 -8px 8px -8px #696868;
-webkit-box-shadow: inset 0 8px 8px -8px #696868,
inset 0 -8px 8px -8px #696868;
box-shadow: inset 0 8px 8px -8px #696868,
inset 0 -8px 8px -8px #696868;
}
#testimonial-slider {
text-align: center;
color: white;
background: url(../img/icns/icn-quote-left.png) top left no-repeat,
url(../img/icns/icn-quote-right.png) bottom right no-repeat;
background-size: 2.5em auto;
padding: 1em 2.7em 0.5em;
}
.testimonial-section {
font-family: "Raleway-Bold";
font-size: 1.250em;
text-shadow: 0 0 0.3em rgba(0,0,0,0.25);
line-height: 1.3;
width: 90%;
margin: 0 auto;
}
.testimonial-section-name {
/*font-family: "Raleway-Bold";*/
font-family: "MyCambria"; font-style: italic; font-weight: bold;
font-size: 1.750em;
text-shadow: 0 0 0.3em rgba(0,0,0,0.25);
margin-top: 0.5em;
}
#treatments .col-xs-4 {
padding: 2em;
}
#treatments .col-xs-4 a {
position: relative;
display: block;
border: 1px solid #eee;
padding: 0.4em;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
/*#treatments .col-xs-4 a:hover {
background: #666;
}*/
#treatments .col-xs-4 a img {
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
background: #000;
filter: none;
-webkit-filter: grayscale(0%);
}
#treatments .col-xs-4 a:hover img {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
#treatments .col-xs-4 a .caption {
position: absolute;
top: 30%;
left: 15%;
width: 70%;
height: auto;
text-align: center;
color: #fff;
font-family: "Raleway-Bold";
font-size: 2em;
text-shadow: 0 0 0.3em rgba(0,0,0,0.75);
text-transform: uppercase;
z-index: 2;
}
#treatments .col-xs-4 a .caption .btn-readmore {
margin-top: 1em;
font-size: 0.45em;
padding: 0.5em 2em;
border: 1px solid #fff;
width: auto;
display: inline-block;
box-shadow: 0 0 0.3em rgba(0,0,0,0.25);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
#treatments .col-xs-4 a:hover .caption .btn-readmore {
background: rgba(163,197,198,0.6);
}
#appointment {
padding-top: 2em;
}
#appointment h3 {
display: none;
color: #fff;
font-family: "Raleway-Bold";
text-shadow: 0 0 0.3em rgba(0,0,0,0.25);
}
.featured-logos {
text-align: center;
margin: 0;
padding: 0;
}
.featured-logos li {
display: inline-block;
height: auto;
width: 16%;
min-width: 160px;
}
.featured-logos li img {
width: 100%;
height: auto;
}
/* 8. Inside
-------------------------*/
.content h1 { font-size: 3.5em; font-family: "MyCambria", Georgia, sans-serif; /*font-style: italic;font-weight: bold; */margin: 0.25em 0 0.5em; }
#inside-content { padding-top: 8em }
#about #inside-content .col-md-8 { padding-left: 5vw; padding-top: 4vw }
.img-content { max-height: 40em; padding: 3em 5em 0 3em; }
.img-content2 { max-width: 40em; padding: 1em 0 2em 3em; }
.img-content3 { max-width: 40em; padding: 0 3em 2em 0; }
.img-full { width: 100% }
.content ul li { list-style: disc; padding-left: 1em }
/* 8. Gallery
-------------------------*/
#gallery .col-xs-4,
#gallery .col-xs-3 { margin-bottom: 3em; }
#instafeed { width: 100%; height: auto; opacity: 0; }
#instafeed .col-xs-3 { float: none; display: inline-block; padding: 0.5% 0.5%; width: 24%; }
#instafeed .col-xs-3, #gallery .col-xs-3 {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#instafeed .col-xs-3:hover, #gallery .col-xs-3:hover {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}
/* 9. Contact
-------------------------*/
#map { height: 400px; }
.gm-style-iw h4 { margin-bottom: 0 }
#contact-section { min-height: 800px }
#contact-section h1 { text-transform: uppercase; font-size: 8em; text-align: center; margin: 0.75em 0 0; color: #666; }
#contact-section hr { width: 20%; height: 0.2em; background: #666; margin: 0 auto 2em; }
.social img { width: 5em; padding: 0 0.5em; }
#frmContact { text-align: center; font-size: 1em; margin: 0 auto; width: 66% }
#frmContact table { width: 100% }
input[type=text], input[type=email], textarea { width: 100%; margin-bottom: 1em; padding: 1em 1.5em; font-size: 0.875em; color: #666; border: none; }
#frmContact .btn, .btn {
margin-top: 1em;
font-size: 0.9em;
font-family: "Raleway-Bold";
padding: 0.8em 5em;
border: 1px solid #fff;
width: auto;
display: inline-block;
text-shadow: 0 0 0.3em rgba(0,0,0,0.5);
box-shadow: 0 0 0.3em rgba(0,0,0,0.25);
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
background: transparent;
letter-spacing: 0.15em;
}
#frmContact .btn:hover, .btn:hover {
background: rgba(255,255,255,0.8);
color: #a3c5c6;
text-shadow: none;
}
.empty {
border: 1px solid red !important;
}
#popPress { display: none; }
/*nav ul ul ul li:nth-last-child(1),
nav ul ul ul ul li:nth-child(1),
nav ul ul ul ul li:nth-child(2),
nav ul ul ul ul li:nth-child(3),
nav > ul > li:nth-child(4) > ul > li:nth-child(2),*/
ul.nav.navbar-nav li:nth-child(4) ul.dropdown-menu li:nth-child(1),
ul.nav.navbar-nav li:nth-child(4) ul.dropdown-menu li:nth-child(2) {
display: none !important;
}
.price-table {
width: 60%;
text-align: center;
border:1px solid #eee
}
.price-table td {
border:1px solid #eee
}