/*========================================================
1. Import
=========================================================*/
@import "grid.css";
@import "sf-menu.css";
@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
/*========================================================
2. Global
=========================================================*/
a[href^="tel:"]{
color: inherit;
text-decoration: none;
}
* {
-webkit-text-size-adjust: none;
font: 14px/24px 'Open Sans';
}
:focus{
outline: medium none;
}
body{
background: url(../images/bg.jpg) repeat;
color: #464646;
font: 14px/24px 'Open Sans';
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a:hover{
text-decoration: underline;
}
h2{
color: #fff;
font: 55px/55px 'Open Sans';
text-transform: uppercase;
font-weight: 700;
}
h3{
font: 26px/26px 'Open Sans';
color: #242424;
text-transform: uppercase;
font-weight: 700;
}
h4{
font: 18px/18px 'Open Sans';
color: #272727;
text-transform: uppercase;
font-weight: 700;
}
img{
width: 100%;
height: auto;
}
.last{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/*========================================================
3. Main layout styles
=========================================================*/
.logo-wrapper{
position: absolute;
top: 50px;
left: -60px;
padding: 9px 16px 0px 15px;
background: url(../images/bg-1.jpg) repeat;
z-index: 999;
border-left: 1px solid rgba(133,133,133,0.1);
border-right: 1px solid rgba(133,133,133,0.1);
}
/* Header
========================================================*/
header{
position: relative;
background: url(../images/bg-1.jpg) repeat-x;
}
header .container{
position: relative;
}
header img{
width: inherit;
height: inherit;
}
/* Content
========================================================*/
.content-wrapper{
background: url(../images/bg-1.jpg);
}
.content-top-img{
overflow: hidden;
}
.content-top-img img{
min-width: 1500px;
}
.indent-2{
padding: 47px 0 50px;
}
.indent-3{
padding: 48px 0 25px;
}
/* Buttons
=============================================*/
a.btn:hover{
text-decoration: none;
}
.btn_wrapper{
text-align: left;
}
.btn{
display: inline-block;
margin-top: 23px;
}
.btn_slide_wrapper{
position: relative;
display: inline-block;
overflow: hidden;
}
.btn_main{
display: inline-block;
font-size: 18px;
line-height: 18px;
color: #272727;
font-weight: 700;
text-transform: uppercase;
padding: 0 0 8px;
text-align: center;
}
.btn_slide{
width: 166px;
height: 10px;
background: #fff;
position: relative;
}
.btn_slide div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: -100%;
background: #272727;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
.btn:hover .btn_slide div{
left: 0;
-webkit-transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
/* Gallery
=============================================*/
.gallery__1{
padding: 28px 0 78px;
}
.gallery__2{
padding: 35px 0 40px;
background: rgba(214,214,214,0.43);
-webkit-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
}
.gallery__2 li{
-webkit-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
}
.gallery li{
position: relative;
overflow: hidden;
}
.gallery li a{
display: block;
}
.gallery img{
position: relative;
z-index: 0
}
.gallery_hover{
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
-webkit-transition: 0.3s ease-in;
-moz-transition: 0.3s ease-in;
-ms-transition: 0.3s ease-in;
-o-transition: 0.3s ease-in;
transition: 0.3s ease-in;
margin: 0;
z-index: 9;
}
.gallery_hover h2
{
color:#fff;
display:none;
}
.gallery li a:hover .gallery_hover{
margin: 11px;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
background:rgba(39,39,39,0.8);
}
.gallery li a:hover .gallery_hover h2
{
text-decoration:none;
border:none;
display:block;
text-align:center;
margin-top:100px;
font-size:40px;
font-weight:normal;
}
.gallery li a:hover img
{
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
transition: 0.3s ease-out;
background:#666;
}
.gallery_hover div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: -11px;
border: 10px solid rgba(255,255,255,0.5);
}
.gallery_hover div h2
{
border:none;
}
/* List
=============================================*/
.list h3{
text-align: left;
margin-bottom: 29px;
}
.list li{
display: block;
position: relative;
padding-right: 25px;
color: #464646;
font-style: italic;
margin-bottom: 12px;
}
.list li a{
display: inline-block;
}
.list li a:before{
position: absolute;
top: 0;
left: 2px;
content: '';
font-family: 'FontAwesome';
font-style: normal;
color: #272727;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
text-decoration: none;
}
.list li a:hover:before{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
color: #f9ef6b;
text-decoration: none !important;
}
/* Checkbox Form
=============================================*/
.checkbox-form{
background: url(../images/bg-2.jpg) repeat;
padding: 35px 0 8px;
min-height: 200px;
-webkit-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
}
.checkbox-form h3
{
text-align:center;
}
.checkbox-reserv{
background: url(../images/bg-2.jpg) repeat;
padding: 5px 0 5px 0;
-webkit-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
}
/* Info Blocks
=============================================*/
.info-block{
padding-top: 25px;
position: relative;
}
.info-block_date{
position: absolute;
top: 35px;
left: 10px;
width: 59px;
height: 59px;
padding-top: 8px;
padding-right: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
text-align: center;
color: #272727;
font-weight: 700;
}
.info-block_date time{
font-size: 24px;
line-height: 24px;
}
.info-block_date time span{
font-size: 18px;
line-height: 9px;
text-transform: uppercase;
}
.info-block img{
-webkit-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
}
.info-block h4{
margin-top: 18px;
margin-bottom: 8px;
}
.info-blocks .thumbs_img > div{
position: relative;
}
.info-blocks .thumbs_img > div > .lbHover{
background: #272727;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.info-blocks .lbHover div{
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
background: url(../images/magnifier.png);
opacity: 0;
}
.info-blocks .thumbs_img > div:hover > .lbHover{
opacity: 0.6;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.info-blocks .thumbs_img > div:hover .lbHover div{
opacity: 0.9;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
/*==================*/
.info-blocks__gallery{
padding: 45px 0 28px;
}
.info-blocks__gallery li{
margin-bottom: 25px;
}
/*==================*/
.info-blocks__hor{
padding: 45px 0 15px;
}
.info-block__hor{
padding-top: 0;
}
.info-blocks__hor li{
margin-top: 25px;
margin-bottom: 35px;
}
.info-block__hor_text{
margin-top: -7px;
}
.info-block__hor_text time{
color: #272727;
}
.info-block__hor_text h4{
margin-top: 1px;
margin-bottom: 9px;
}
.info-block__hor_text .btn{
margin-top: 21px;
}
/*==================*/
#tabs{
text-align: center;
}
.info-blocks_tabs{
display: inline-block;
padding-top: 48px;
}
.info-blocks_tabs li{
display: inline-block;
float: left;
font-size: 16px;
line-height: 16px;
color: #272727;
font-weight: 700;
text-transform: uppercase;
margin-left: 50px;
}
.info-blocks_tabs .info-blocks_tabs_last{
margin-left: 0;
}
.info-blocks_tabs .selected{
text-decoration: underline;
}
.tab-content{
margin-bottom: 47px;
}
.tab-content li{
text-align: left;
padding-top: 40px;
}
/* Info Dated
=============================================*/
.info-date{
padding: 43px 0 0;
background: rgba(214,214,214,0.43);
-webkit-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
box-shadow: 0px 1px 10px 2px rgba(50, 50, 50, 0.15);
}
.info-date li{
margin-bottom: 45px;
}
.info-date h3{
margin-bottom: 21px;
}
.info-date_date{
float: left;
margin-top: 3px;
margin-left: 20px;
width: 59px;
height: 59px;
padding-top: 8px;
padding-left: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
text-align: center;
color: #272727;
font-weight: 700;
}
.info-date_date time{
font-size: 24px;
line-height: 24px;
}
.info-date_date time span{
font-size: 18px;
line-height: 9px;
text-transform: uppercase;
}
.info-date_text{
overflow: hidden;
}
.info-date_text h4{
margin-bottom: 10px;
word-wrap: break-word;
}
/* Qoutes
=============================================*/
.quotes h3{
text-align: left;
margin-bottom: 27px;
}
.quotes blockquote{
line-height: 30px;
padding-bottom: 20px;
}
.quotes span{
display: inline-block;
}
.quotes .quote_text{
font-style: italic;
}
.quotes > blockquote > a{
font-weight: 700;
}
.quotes > blockquote > a:hover span{
text-decoration: none;
}
/* Row Qoutes
=============================================*/
.row-quotes{
padding: 45px 0;
}
.row-quotes h3{
margin-bottom: 16px;
}
.row-quote_img{
float: left;
width: 42px;
height: 29px;
margin-right: 37px;
margin-top: 7px;
}
.row-quote_text{
overflow: hidden;
}
.row-quote_text p{
font-style: italic;
margin-bottom: 7px;
}
.row-quote_text a{
text-transform: uppercase;
font-size: 18px;
line-height: 24px;
font-weight: 700;
}
/* Cards
=============================================*/
.card{
width: 100%;
background: url(../images/bg-3.jpg);
color: #fff;
font-weight: 700;
padding: 32px 22px 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 25px;
-webkit-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
box-shadow: 2px 2px 3px 1px rgba(50, 50, 50, 0.3);
}
.card span{
display: block;
}
.card .card_text-1{
font-size: 30px;
line-height: 30px;
}
.card .card_text-2{
padding-left: 2px;
font-size: 24px;
line-height: 28px;
}
.card p{
font-weight: 400;
line-height: 14px;
padding: 11px 2px 5px;
}
.card .btn_wrapper{
position: relative;
left: -22px;
}
.card .btn{
margin-top: 3px;
}
.card .btn_main{
color: #fff;
font-weight: 700;
padding-left: 22px;
padding-bottom: 10px;
}
.card .btn_slide{
width: 196px;
}
.card__indent{
padding-top: 27px;
}
/* More Text
=============================================*/
.more-text{
padding: 50px 0;
}
.more-text h3{
margin-bottom: 25px;
}
.more-text h4{
margin-bottom: 10px;
}
.more-text p{
margin-bottom: 30px;
}
.more-text a{
text-decoration: underline;
}
.more-text a:hover{
color: #fff;
}
/* Map
=============================================*/
.map {
width: 100%;
margin-top: 30px;
}
.map iframe {
border: none;
width: 100%;
height: 360px;
}
/* Contact
=============================================*/
.contact, .feedback{
margin-top: 45px;
margin-bottom: 50px;
text-align:left;
}
.contact h3
{
text-align:left;
}
.contact-details .adrress{
font: 18px/24px 'BNazaninBold','Open Sans';
color: #272727;
font-weight: 700;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 3px;
}
.contact-details p span{
display: inline-block;
min-width: 78px;
}
.contact-details .contact_mail a{
text-decoration: underline;
}
.contact-details .contact_mail a:hover{
color: #d4a97d;
}
/* To Top Button*/
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 40px;
left: 51%;
margin-left: 600px;
overflow: hidden;
width: 45px;
height: 45px;
z-index: 20;
background-color: #f2f2f2;
border-radius: 10px;
border: 1px solid #464644;
}
#toTop i{
color: #464646;
font-size: 34px;
padding-top: 5px;
padding-left: 12px;
}
#toTop:hover i{
padding-top: 0px;
margin-top: 5px;
-webkit-transition: padding-top 0.2s linear 0s, margin-top 0.2s linear 0.2s;
-moz-transition: padding-top 0.2s linear 0s, margin-top 0.2s linear 0.2s;
-ms-transition: padding-top 0.2s linear 0s, margin-top 0.2s linear 0.2s;
-o-transition: padding-top 0.2s linear 0s, margin-top 0.2s linear 0.2s;
transition: padding-top 0.2s linear 0s, margin-top 0.2s linear 0.2s;
}
/* Footer
========================================================*/
footer{
padding: 42px 0 54px;
color: #fff;
font-weight: 300;
}
.pr-policy{
line-height: 18px;
}
.footer-brand{
font-size: 30px;
line-height: 30px;
font-weight: 400;
padding-bottom: 20px;
display: inline-block;
}
.footer_contact{
font-size: 18px;
line-height: 30px;
margin-top: -9px;
}
.s-form_title{
font-size: 18px;
line-height: 30px;
margin-top: -9px;
}
.social{
font-size: 18px;
line-height: 30px;
margin-top: -9px;
}
/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 1199px) {
.footer_contact{
font-size: 14px;
}
}
@media only screen and (max-width: 979px) {
h2{
font-size: 40px;
line-height: 40px;
}
h3{
font-size: 25px;
line-height: 25px;
}
}
@media only screen and (max-width: 767px) {
.logo-wrapper{
position: relative;
display: inline-block;
}
h2{
font-size: 20px;
line-height: 20px;
}
.gallery li{
margin-bottom: 15px;
}
.quotes h3{
margin-top: 30px;
}
.info-block__hor_text{
margin-top: 10px;
}
.row-quote{
margin-bottom: 15px;
}
#tabs{
text-align: left;
}
.info-blocks_tabs li{
float: none;
display: block;
}
footer .row > div{
margin-top: 20px;
}
}
@media only screen and (max-width: 480px) {
h2{
display: none;
}
}
@media only screen and (max-width: 320px) {
}
/*Core variables and mixins*/
/*//=========================Breadcrumb====================================//*/
.breadcrumb {
padding:8px 15px;
margin:0 0 23px;
list-style:none;
direction:ltr;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-size:20px;
font-family:tahoma;
}
.breadcrumb > li {
display:inline-block;
*display:inline;
*zoom:1;
text-shadow:0 1px 0 #fff;
}
.breadcrumb > li > .divider {
padding:0 5px;
color:#ccc;
}
.breadcrumb > .active { color:#999; }
.breadcrumb__t {
margin:0;
word-wrap:break-word;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
.breadcrumb__t li { display:inline; }
.breadcrumb__t li.divider {
font:0/0 a;
color:transparent;
text-shadow:none;
background-color:transparent;
border:0;
}
.breadcrumb__t li.divider:after {
content:' / ';
color:#333333;
font:12px/18px Arial, Helvetica, sans-serif;
padding:5px;
}
/*//=========================Bubble====================================//*/
.bubble-right {
background:#ffffff;
padding:20px; margin:20px; position:relative;
line-height:30px;
padding-right:10px;
min-height:60px;
}
.bubble-right:after {
content:""; width:0;
height:0; border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #ffffff;
right:-20px;
position: absolute;
top:15px;
}
.bubble-left {
background:#ffffff;
padding:20px; margin:20px; position:relative;
line-height:30px;
min-height:60px;
padding-right:10px;
}
.bubble-left:after {
content:""; width:0;
height:0; border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #ffffff;
left:-20px;
position: absolute;
top:15px;
}
.bubble-img-left{float:left;vertical-align:top;}
.bubble-img-right{float:right;vertical-align:top; right:0;}
.bubble-img img,.bubble-img p{text-align:center; font-family:'BNazaninBold',tahoma; font-weight:normal; font-size:15px;}
@media only screen and (max-width: 767px)
{
.bubble-img-left,.bubble-img-right
{
float:none;
}
.bubble-right:after
{
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
right:165px;
top:-40px;
}
.bubble-left:after
{
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
left:165px;
top:-40px;
}
.bubble-img-left img
{
width:100px;
margin-left:160px;
}
.bubble-img-right img
{
width:100px;
margin-left:160px;
}
}
@media only screen and (max-width: 480px) {
.bubble-img-left,.bubble-img-right
{
float:none;
}
.bubble-right:after
{
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
right:100px;
top:-40px;
}
.bubble-left:after
{
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
left:100px;
top:-40px;
}
.bubble-img-left img
{
width:100px;
margin-left:90px;
}
.bubble-img-right img
{
width:100px;
margin-left:90px;
}
}
.weather
{
background-size:cover auto;
height:240px;
}
.weather .weatherDetail
{
margin:50px 0 10px 0;
padding:10px;
background:rgba(62,65,73,0.8) repeat;
min-height:100px;
}
.weather .weatherDetail img
{
margin:5px 0 0 0;
width:120px;
}
.weather .weatherDetail h2
{
font-weight:normal;
margin:0; padding:0;
font-size:20px;
display:inline-block;color:#fff;
}
.weather .weatherDetail h2.qt
{
font-size:18px;
}
@media only screen and (max-width: 977px)
{
.weather .weatherDetail h2
{
font-size:19px;
}
.weather .weatherDetail h2.qt
{
font-size:17px;
}
.gallery li a:hover .gallery_hover h2
{
text-decoration:none;
border:none;
display:block;
text-align:center;
margin-top:50px;
font-size:20px;
font-weight:normal;
}
}
@media only screen and (max-width: 760px)
{
.weather .weatherDetail
{
margin:0;
background:rgba(62,65,73,0.5) repeat;
height:220px;
text-align:center;
}
.gallery li a:hover .gallery_hover h2
{
text-decoration:none;
border:none;
display:block;
text-align:center;
margin-top:160px;
font-size:80px;
font-weight:normal;
}
}
@media only screen and (max-width: 480px)
{
.gallery li a:hover .gallery_hover h2
{
text-decoration:none;
border:none;
display:block;
text-align:center;
margin-top:120px;
font-size:50px;
font-weight:normal;
}
}
.grid_12 h1
{
font-size:300%;
}