html,body{
height:100%;
}
body{
color: #1d1d1b;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 20px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
body.fixed{
overflow: hidden;
}
a:hover,
a:focus{
cursor: pointer;
text-decoration: none;
color:#be1522;
}
a{
color:#be1522;
}
a:link,
a:active{
outline: none;
}
.preload-page{
display: block;
position: fixed;
z-index: 999999;
top:0;
left:0;
right:0;
bottom:0;
background: #fff;
}
.loader{
display: block;
position: relative;
margin:0 auto;
}
.preload-page .loader{
position: absolute;
top:50%;
margin:-20px 0 0 0;
width:100%;
}
.loader i{
display: block;
position: absolute;
top:50%;
left:50%;
margin-top:-20px;
margin-left:-20px;
width:40px;
height:40px;
border-radius:50%;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-moz-border-radius:50%;
border: 0.25rem solid rgba(0,0,0, 0.1);
border-top-color: #be1522;
-webkit-animation: spin .7s infinite linear;
animation: spin .7s infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes pulse {
50% {
background: white;
}
}
@keyframes pulse {
50% {
background: white;
}
}
::focus{
outline: none;
}
b{
font-weight: 700 !important;
}
.text-right{
text-align: right;
}
.text-center{
text-align: center;
}
.valign{
display: table;
width:100%;
height:100%;
}
.valign > div.middle{
display: table-cell;
vertical-align: middle;
height:100%;
}
.valign > div.bottom{
display: table-cell;
vertical-align: bottom;
height:100%;
}
.page-pagination{
display: block;
}
.page-pagination ul{
display: block;
list-style: none;
margin:0;
padding:0;
}
.page-pagination ul li {
display: inline-block;
}
.page-pagination a,
.page-pagination span{
display: block;
line-height: 40px;
padding:0 7px;
min-width: 40px;
text-align: center;
font-weight: 600;
color:#000;
}
.page-pagination a.current,
.page-pagination a.current:focus,
.page-pagination a.current:hover,
.page-pagination span.current,
.page-pagination span.current:focus,
.page-pagination span.current:hover {
z-index: 2;
color: #fff;
cursor: default;
background-color: #be1522;
border-color: #be1522;
}
.navicon{
display: block;
position: relative;
z-index: 9;
height:71px;
padding:12px 5px;
margin:0;
width:200px;
float:left;
background: #fff;
}
.navicon i{
display: block;
position: absolute;
width:30px;
height:1px;
background: #1d1d1b;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
left:50px;
}
.navicon span{
color:#1d1d1b;
display: block;
position: absolute;
top:27px;
left:90px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
}
.navicon i:nth-child(1){
top:25px;
}
.navicon i:nth-child(2){
top:30px;
}
.navicon i:nth-child(3){
top:35px;
}
.navicon i:nth-child(4){
top:40px;
}
.navicon i:nth-child(5){
top:45px;
}
.navicon.active i:nth-child(2){
top:35px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.navicon.active i:nth-child(1),
.navicon.active i:nth-child(3),
.navicon.active i:nth-child(5){
display: none;
}
.navicon.active i:nth-child(4){
top:35px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
@media(max-width:767px){
.navicon{
height:49px;
padding:12px 5px;
margin:0;
width:57px;
float:left;
background: #fff;
}
.navicon i{
left:15px;
width:28px;
}
.navicon span{
display: none;
}
.navicon i:nth-child(1){
top:15px;
}
.navicon i:nth-child(2){
top:20px;
}
.navicon i:nth-child(3){
top:25px;
}
.navicon i:nth-child(4){
top:30px;
}
.navicon i:nth-child(5){
top:35px;
}
.navicon.active i:nth-child(2){
top:25px;
}
.navicon.active i:nth-child(4){
top:25px;
}
}
.owl-nav .owl-next,
.owl-nav .owl-prev{
display: block;
position: absolute;
bottom:50%;
margin-bottom:-32px;
width:64px;
height:64px;
line-height: 60px;
color:#fff;
font-family: 'ionicons';
font-size: 40px;
background: rgba(255,255,255,.2);
}
.owl-nav .owl-next{
right:0;
}
.owl-nav .owl-next:after{
display: block;
content:"\f3d3";
text-align: center;
}
.owl-nav .owl-prev{
left:0;
}
.owl-nav .owl-prev:after{
display: block;
content:"\f3d2";
text-align: center;
}
.owl-nav .owl-next:hover,
.owl-nav .owl-prev:hover{
cursor: pointer;
color:#be1522;
background: rgba(255,255,255,.9);
}
.owl-nav .owl-next:active,
.owl-nav .owl-prev:active{
cursor: pointer;
color:#be1522;
background: rgba(255,255,255,.2);
}
@media(max-width:575px){
.owl-nav .owl-next,
.owl-nav .owl-prev{
display: none;
}
}
.owl-dots{
display: block;
margin:0 auto;
text-align: center;
position: absolute;
bottom:40px;
left:0;
right:0;
}
@media(max-width:767px){
.owl-dots{
bottom:10px;
}
}
.owl-dots .owl-dot{
display: inline-block;
width:10px;
height:10px;
background: transparent;
border:1px solid #fff;
margin:4px;
}
.owl-dots .owl-dot.active{
background: #fff;
}
.err404{
display: block;
text-align: center;
padding:250px 0 250px 0;
color:#fff;
background: #151f6d;
font-family: 'Raleway', sans-serif;
}
.err404 h1{
font-size:72px;
line-height: 72px;
color:#fff;
margin:0;
padding:0;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.err404 h1 span{
display: inline-block;
font-weight: 300;
color:#fff;
font-size:62px;
}
.err404 p{
font-size: 20px;
}
@media(max-width:575px){
.err404{
padding:150px 0 150px 0;
}
}
.cf{
padding:10px 0 0 0;
font-size: 16px;
}
.cf .row{
margin-left:-10px;
margin-right:-10px;
padding-top:14px;
}
.cf .row > *{
padding-left:10px;
padding-right:10px;
}
.cf label{
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-top:5px;
margin-bottom:5px;
}
.cf input[type=text],
.cf input[type=email],
.cf textarea,
.cf input[type=date],
.cf input[type=tel],
.cf input[type=file],
.cf select,
input.search{
display: block;
width:100%;
padding:5px 15px;
background: none;
border:none;
color:#fff;
font-weight: 300;
margin-bottom:10px;
}
.cf textarea{
height:100px;
}
.cf input[type=text]:focus,
.cf input[type=email]:focus,
.cf textarea:focus,
.cf input[type=date]:focus,
.cf input[type=tel]:focus,
.cf input[type=file]:focus,
input.search:focus,
.cf select:focus{
outline:none;
background: none;
color:#fff;
}
.cf input[type=submit],
.cf button{
border:1px solid #f2a700;
color:#fff;
padding:10px 25px;
font-family: "Raleway", sans-serif;
font-weight: 400;
letter-spacing: 2px;
font-size: 15px;
background: none;
}
.cf input[type=submit]:focus,
.cf button:focus{
background:#f2a700;
color:#fff;
outline: none;
}
.cf input[type=submit]:hover,
.cf button:hover{
background:#f2a700 !important;
color:#fff !important;
}
.cf input[type=submit].right-offset{
margin-right:-20px;
}
.cf input[type=radio]{
background: #fff;
border:1px solid #fff;
width:20px;
margin-top:10px;
margin-bottom:30px;
}
div.wpcf7-validation-errors{
border:none;
background: #1e1d1d;
color:#fff;
padding:20px 25px;
margin-left:0;
margin-right:0;
}
.cf ::-webkit-input-placeholder { color: rgba(255,255,255,.5);
opacity:1;
}
.cf ::-moz-placeholder { color: rgba(255,255,255,.5);
opacity:1;
}
.cf :-ms-input-placeholder { color:  rgba(255,255,255,.5);
opacity:1;
}
.cf :-moz-placeholder { color:  rgba(255,255,255,.5);
opacity:1;
}
.caret {
display: inline-block;
padding:10px;
margin-bottom:-7px;
}
.caret:after {
display: block;
width: 0;
height: 0;
content: "";
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
} .alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img{
max-width:100%;
width:auto;
height:auto;
}
.wp-caption-text,
.wp-caption-dd {
font-family: Verdana, Geneva, sans-serif;
text-align: left;
margin: 6px 0 26px 0;
font-size: 11px;
font-style: italic;
font-weight: normal;
line-height: 17px;
color: #444;
}
.wp-caption {
text-align: center;
max-width: 100%;
}
.wp-caption img {
max-width: 100% !important;
} body{
}
.relative{
position: relative;
}
.button{
display: inline-block;
color:#be1522;
padding:5px 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border-bottom: 1px solid #be1522;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.button:hover{
background: transparent;
color:#000;
border-color: #000;
}
.button:focus{
background: transparent;
color:#be1522;
border-color: #be1522;
}
.button.light{
color:#ccc;
border-color: #ccc;
}
.button.light:hover{
color:#be1522;
border-color: #be1522;
}
.button.outline:focus{
background: #be1522;
color:#fff;
border-color: #be1522;
}
input.button,
button.button{
border:none;
}
input.button:focus,
button.button:focus{
outline: none;
}
.hidden{
display: none !important;
}
.wrap{
width: 100%;
min-height: 100%;
position: relative;
z-index: 9;
transform: perspective(0) translateZ(0) translateX(0) rotateY(0);
-webkit-transform: perspective(0) translateZ(0) translateX(0) rotateY(0);
-ms-transform: perspective(0) translateZ(0) translateX(0) rotateY(0);
-moz-transform: perspective(0) translateZ(0) translateX(0) rotateY(0);
-webkit-transition-duration: .4s;
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.wrap.open{
position: fixed;
z-index: 7;
overflow: hidden;
cursor: pointer;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
transform: perspective(1500px) translateZ(0px) translateX(10%) rotateY(-50deg);
-webkit-transform: perspective(1500px) translateZ(0px) translateX(10%) rotateY(-50deg);
-ms-transform: perspective(1500px) translateZ(0px) translateX(10%) rotateY(-50deg);
-moz-transform: perspective(1500px) translateZ(0px) translateX(10%) rotateY(-50deg);
}
@media(max-width:991px){
.wrap.open{
transform: perspective(1500px) translateZ(0px) translateX(15%) rotateY(-55deg);
-webkit-transform: perspective(1500px) translateZ(0px) translateX(15%) rotateY(-55deg);
-ms-transform: perspective(1500px) translateZ(0px) translateX(15%) rotateY(-55deg);
-moz-transform: perspective(1500px) translateZ(0px) translateX(15%) rotateY(-55deg);
}
}
@media(max-width:767px){
.wrap.open{
transform: perspective(1500px) translateZ(0px) translateX(25%) rotateY(-60deg);
-webkit-transform: perspective(1500px) translateZ(0px) translateX(25%) rotateY(-60deg);
-ms-transform: perspective(1500px) translateZ(0px) translateX(25%) rotateY(-60deg);
-moz-transform: perspective(1500px) translateZ(0px) translateX(25%) rotateY(-60deg);
}
}
@media(max-width:575px){
.wrap.open{
transform: perspective(1500px) translateZ(0px) translateX(35%) rotateY(-80deg);
-webkit-transform: perspective(1500px) translateZ(0px) translateX(35%) rotateY(-80deg);
-ms-transform: perspective(1500px) translateZ(0px) translateX(35%) rotateY(-80deg);
-moz-transform: perspective(1500px) translateZ(0px) translateX(35%) rotateY(-80deg);
}
}
.mobileMenu{
display: block;
position: fixed;
z-index: 8;
left:0;
bottom:0;
right:0;
width:32%;
max-width: 400px;
opacity:0;
top:100px;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
}
@media(max-width:991px){
.mobileMenu{
width:40%;
}
}
@media(max-width:767px){
.mobileMenu{
width:50%;
}
}
@media(max-width:575px){
.mobileMenu{
width:70%;
}
}
.mobileMenu.anim{
opacity:1;
top:0;
}
.mobileMenu > div{
display: block;
margin:100px 50px;
}
@media(max-width:575px){
.mobileMenu > div{
display: block;
margin:50px 20px;
}
}
.mobileMenu .bluebar{
display: block;
padding:10px 20px 17px 20px;
margin-top:40px;
color:#fff;
font-size: 12px;
background: url(//hepok.ba/wp-content/themes/hepok/images/bluebar.png) top right no-repeat;
background-size: auto 100%;
}
.mobileMenu nav.main{
display: block;
}
.mobileMenu nav.main ul{
display: block;
margin:0;
padding:0;
list-style: none;
}
.mobileMenu nav.main ul > li{
display: block;
width:100%;
}
.mobileMenu nav.main ul > li > a{
display: block;
padding:10px;
font-family: 'Playfair Display', serif;
color:#000;
font-size: 20px;
border-bottom:1px solid #ccc;
}
.mobileMenu .socials{
display: block;
margin-top:40px;
}
.mobileMenu .socials:after{
display: block;
content: "";
clear: both;
}
.mobileMenu .socials > a{
display: block;
float: left;
width:34px;
height:34px;
opacity:.5;
margin-top:20px;
}
.mobileMenu .socials > a:hover{
opacity: 1;
}
.mobileMenu .socials > a.facebook{
background: url(//hepok.ba/wp-content/themes/hepok/images/soc-facebook-b.svg) center no-repeat;
background-size: contain;
margin-right:10px;
}
.mobileMenu .socials > a.instagram{
background: url(//hepok.ba/wp-content/themes/hepok/images/soc-instagram-b.svg) center no-repeat;
background-size: contain;
}
header{
display: block;
position: sticky;
z-index: 9;
top:0;
left:0;
right:0;
height:72px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
@media(max-width:767px){
header{
height:50px;
}
}
header.fixed{
background: #fff;
border-bottom: 1px solid #ccc;
}
header .booknow{
display: block;
float: left;
width:200px;
height: 72px;
line-height: 72px;
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color:#fff;
background: #be1522;
}
@media(max-width:767px){
header .booknow span{
display: none;
}
header .booknow{
width:50px;
height: 50px;
background: #be1522 url(//hepok.ba/wp-content/themes/hepok/images/icon-calendar.png) center no-repeat;
background-size: auto 20px;
}
}
header .info{
display: block;
float:right;
padding-right:35px;
}
header .info a{
display: block;
float: left;
width:24px;
height:24px;
margin:24px 15px;
}
@media(max-width:767px){
header .info{
padding-right:0;
}
header .info a{
margin:13px 10px;
}
}
header .info a.phone{
background: url(//hepok.ba/wp-content/themes/hepok/images/phone-white.png) center no-repeat;
background-size: contain;
}
header .info a.email{
background: url(//hepok.ba/wp-content/themes/hepok/images/icon-mail-white.png) center no-repeat;
background-size: contain;
}
header .info a.map{
background: url(//hepok.ba/wp-content/themes/hepok/images/icon-marker-white.png) center no-repeat;
background-size: contain;
}
header.fixed .info a.phone{
background: url(//hepok.ba/wp-content/themes/hepok/images/icon-phone.png) center no-repeat;
background-size: contain;
}
header.fixed .info a.email{
background: url(//hepok.ba/wp-content/themes/hepok/images/icon-mail.png) center no-repeat;
background-size: contain;
}
header.fixed .info a.map{
background: url(//hepok.ba/wp-content/themes/hepok/images/icon-marker.png) center no-repeat;
background-size: contain;
}
.section-title{
max-width: 500px;
margin:0 auto;
}
.section-title h4{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-title h2{
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 42px;
margin-bottom:25px;
}
@media(max-width:991px){
.section-title h2{
font-size: 32px;
line-height: 32px;
}
}
section.hero_video{
display: block;
width:100%;
height: 100%;
background: #242424;
position: relative;
margin-top:-72px;
min-height: 500px;
}
section.hero_video .player{
height:100%;
}
section.hero_video .overlay{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
section.hero_video .overlay .logo{
position: absolute;
top:150px;
left:50%;
width:200px;
text-align: center;
margin-left:-100px;
}
section.hero_video .overlay{
text-align: center;
color:#fff;
font-family: 'Playfair Display', serif;
}
section.hero_video .overlay h2{
font-weight: 300;
font-size: 62px;
line-height: 54px;
display: block;
padding-top:160px;
padding-bottom:40px;
margin:0 auto;
max-width: 600px;
}
section.hero_video .overlay h2 a{
color:#fff;
}
section.hero_video .overlay h4{
font-weight: 400;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
section.hero_video .owl-wrap{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
section.hero_video  .owl-wrap .overlay{
background: rgba(0,0,0,.6);
}
section.hero_video .owl-hv,
section.hero_video .owl-hv .owl-stage-outer,
section.hero_video .owl-hv .owl-stage,
section.hero_video .owl-hv .owl-item,
section.hero_video .owl-hv .item{
height:100%;
}
section.hero_video .owl-hv .item{
background-size: cover !important;
position: relative;
}
section.hero_video .owl-hv .item .overlay .logo {
position: relative;
top: auto;
left: auto;
width: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
}
section.hero_video .owl-hv .item .overlay h2{
padding-top:60px;
}
@media(max-width:991px){
section.hero_video .overlay h2{
margin-top:50px;
font-size: 42px;
line-height: 46px;
}
section.hero_video .owl-hv .item .overlay h2{
margin-top:auto;
}
}
@media(max-width:767px){
section.hero_video .overlay .valign{
max-width: 90%;
margin-left:auto;
margin-right:auto;
}
section.hero_video .overlay h2{
margin-top:100px;
font-size: 28px;
line-height: 28px;
}
section.hero_video .owl-hv .item .overlay h2{
margin-top:auto;
}
section.hero_video .overlay .logo{
width:100px;
margin-left:-50px;
}
section.hero_video .overlay h4{
font-size: 16px;
}
}
@media(max-width:320px){
section.hero_video .overlay h2{
margin-top:150px;
}
}
section.intro_block{
display: block;
margin:60px 0;
padding:45px 0 25px 0;
background: #f4f4f1;
}
section.intro_block .image{
position: relative;
margin-top:-65px;
}
@media(max-width:767px){
section.intro_block .image{
margin-top:10px;
}
}
section.intro_block .image .btns{
position: absolute;
top:0;
right:20px;
}
section.intro_block .image .btns > a.icon{
display: inline-block;
width:50px;
height:40px;
background: #1d1d1b;
margin-left:-2px;
margin-right:0;
}
section.intro_block .image .btns > a.icon:after{
display: block;
content: "";
width:100%;
height:100%;
}
section.intro_block .image .btns > a.icon-g:after{
background: url(//hepok.ba/wp-content/themes/hepok/images/ico-gallery.png) center no-repeat;
background-size: auto 20px;
}
section.intro_block .image .btns > a.icon-v:after{
background: url(//hepok.ba/wp-content/themes/hepok/images/ico-video.png) center no-repeat;
background-size: auto 20px;
}
section.intro_block .content{
font-size: 12px;
}
section.latest_blog_home{
margin-bottom:50px;
}
section.latest_blog_home.archive{
padding-top:100px;
}
section.latest_blog_home .col-md-4:nth-child(3n+2){
padding-right:22px;
padding-left:22px;
}
section.latest_blog_home .col-md-4:nth-child(3n+1){
padding-right:30px;
}
section.latest_blog_home .col-md-4:nth-child(3n){
padding-left:30px;
}
@media(max-width:991px){
section.latest_blog_home .col-md-4:nth-child(3n+2),
section.latest_blog_home .col-md-4:nth-child(3n+1),
section.latest_blog_home .col-md-4:nth-child(3n){
padding-left:15px;
padding-right:15px;
}
section.latest_blog_home.archive .col-md-4:nth-child(3n+2){
padding-right:22px;
padding-left:22px;
}
section.latest_blog_home.archive .col-md-4:nth-child(3n+1){
padding-right:30px;
}
section.latest_blog_home.archive .col-md-4:nth-child(3n){
padding-left:30px;
}
}
.blog-card{
display: block;
position: relative;
background-size: cover !important;
transition: all 0.3s ease;
margin-top:25px;
margin-bottom:25px;
}
.blog-card:after{
display: block;
content: "";
padding-bottom:100%;
}
.blog-card > div{
position: absolute;
z-index: 2;
top:0;
left:0;
right:0;
bottom:0;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.blog-card > div .valign{
z-index: 3;
position: relative;
}
.blog-card h3{
padding:20px;
font-family: 'Playfair Display', serif;
font-size: 30px;
line-height: 26px;
color:#fff;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.blog-card:hover h3{
color:#0f0a09;
}
.blog-card:hover > div{
background: rgba(255,255,255,0.5);
}
.blog-card.newsletter{
}
.blog-card.newsletter > div:before{
display: block;
content: "";
position: absolute;
top:10px;
left:10px;
right:0;
bottom:0;
border:1px solid #ccc;
}
.blog-card.newsletter > div:after{
display: block;
content: "";
position: absolute;
top:0;
left:0;
right:10px;
bottom:10px;
border:1px solid #ccc;
}
section.intro_block_simple{
display: block;
margin:60px 0;
}
section.intro_block_simple .content{
background: #f4f4f1;
padding:40px;
}
section.intro_block_simple .content h3{
font-size: 30px;
line-height: 30px;
font-family: 'Playfair Display', serif;
}
section.intro_block_simple .content .excerpt{
font-size: 12px;
margin:20px 0;
}
section.intro_block_simple .content img{
margin-top:-60px;
}
@media(max-width:575px){
section.intro_block_simple .content img{
display: block;
margin-top:30px;
margin-bottom:-60px;
margin-left:auto;
margin-right:auto;
}
}
section.rooms_suites_overview{
}
section.rooms_suites_overview .lists{
padding-top:40px;
padding-bottom:40px;
background: #f4f4f1;
}
.rooms-card{
display: block;
}
div:nth-child(odd) > .rooms-card{
margin-right:20px;
}
div:nth-child(even) > .rooms-card{
margin-left:20px;
}
@media(max-width:991px){
div:nth-child(odd) > .rooms-card{
margin-right:0;
}
div:nth-child(even) > .rooms-card{
margin-left:0;
}
}
.rooms-card .image{
display: block;
background-size: cover !important;
}
.rooms-card .image:after{
display: block;
content: "";
padding-bottom: 70%;
}
.rooms-card .content{
display: block;
margin:-100px 0 25px 100px;
background: #f4f4f1;
padding:30px;
}
.rooms-card .content h3{
font-size: 30px;
line-height: 30px;
font-family: 'Playfair Display', serif;
}
.rooms-card .content p{
font-size: 12px;
}
@media(max-width:767px){
.rooms-card .content{
margin:-50px 0 25px 50px;
padding:25px;
}
}
.availability_form{
display: block;
background: #be1522;
padding-top:50px;
padding-bottom:50px;
color:#fff;
}
.availability_form .hb-title{
font-size: 42px;
line-height: 42px;
font-family: 'Playfair Display', serif;
text-align: center;
margin-bottom:50px;
text-transform: uppercase;
}
.availability_form .hb-title span{
font-size: 22px;
line-height: 22px;
display: block;
margin-bottom:20px;
}
@media(max-width:991px){
.availability_form .hb-title{
font-size: 32px;
line-height: 32px;
}
.availability_form .hb-title span{
font-size: 20px;
line-height: 20px;
margin-bottom:20px;
}
}
@media(max-width:767px){
.availability_form .hb-title{
font-size: 26px;
line-height: 26px;
}
.availability_form .hb-title span{
font-size: 18px;
line-height: 18px;
margin-bottom:15px;
}
}
.availability_form .hb-search-result-title-section{
text-align: center;
}
.availability_form .hb-accom-price-caption{
margin-top:4px;
}
.availability_form .hb-check-dates-wrapper,
.availability_form .hb-people-wrapper{
text-align: center;
position: relative;
padding:50px 30px;
}
@media(max-width:767px){
.availability_form .hb-check-dates-wrapper,
.availability_form .hb-people-wrapper{
padding: 30px 20px;
}
}
.availability_form .hb-check-dates-wrapper label{
display: block;
text-align: center;
font-size: 32px;
line-height: 32px;
font-family: 'Playfair Display', serif;
}
.availability_form .hb-check-dates-wrapper input[type=text],
.availability_form .hb-people-wrapper select{
position: relative;
z-index: 9;
border: 1px solid #be1522;
color:#fff;
padding:5px;
background: none;
text-align: center;
font-size: 20px;
line-height: 20px;
font-family: 'Playfair Display', serif;
}
.availability_form .hb-check-dates-wrapper input[type=text]:focus,
.availability_form .hb-people-wrapper select:focus{
outline: none;
}
.availability_form .hb-people-wrapper select:focus{
color:#000;
}
.availability_form ::-webkit-input-placeholder { color: rgba(255,255,255,.9);
opacity:1;
}
.availability_form ::-moz-placeholder { color: rgba(255,255,255,.9);
opacity:1;
}
.availability_form :-ms-input-placeholder { color:  rgba(255,255,255,.9);
opacity:1;
}
.availability_form :-moz-placeholder { color:  rgba(255,255,255,.9);
opacity:1;
}
.availability_form .hb-check-dates-wrapper:before,
.availability_form .hb-people-wrapper:before{
display: block;
position: absolute;
z-index: 1;
content:"";
top:0;
left:0;
bottom:10px;
right:10px;
border: 1px solid rgba(255,255,255,.2);
}
.availability_form .hb-check-dates-wrapper:after,
.availability_form .hb-people-wrapper:after{
display: block;
position: absolute;
z-index: 1;
content:"";
top:10px;
left:10px;
bottom:0;
right:0;
border: 1px solid rgba(255,255,255,.2);
}
.hb-check-dates-wrapper{
width:23% !important;
}
.hb-people-wrapper{
width: 23% !important;
}
.hb-search-button-wrapper{
width:100% !important;
}
@media(max-width:767px){
.hb-check-dates-wrapper{
width:48% !important;
}
.hb-people-wrapper{
width: 48% !important;
}
}
@media(max-width:575px){
.hb-check-dates-wrapper{
width:98% !important;
}
.hb-people-wrapper{
width: 98% !important;
}
}
.hb-search-button-wrapper input[type=submit]{
display: block;
margin:40px auto 0 auto;
color: #fff;
width:200px;
padding: 8px 0;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border:none;
background: none;
border-bottom: 2px solid #fff;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.hb-search-button-wrapper input[type=submit]:focus{
outline: none;
}
.availability_form .hb-accom{
background: none;
border:none;
border-radius: 0;
padding:45px 0 15px 0;
border-top:1px solid rgba(255,255,255,.2);
}
.availability_form .hb-search-result-title-section{
margin-top:40px;
}
.availability_form .hb-accom img{
padding: 0 0 0 20px;
border-left: 1px solid rgba(255,255,255,.2);
}
@media(max-width:767px){
.availability_form .hb-accom img{
padding:0 0 20px 0;
border-left:none;
float: none;
width:100%;
height:auto;
margin:0;
}
}
.availability_form .hb-accom .hb-select-accom input[type=submit]{
display: inline-block;
color: #fff;
padding:5px 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border:none;
background: none;
border-bottom: 2px solid #fff;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.availability_form .hb-accom .hb-select-accom input[type=submit]:focus{
outline: none;
}
.availability_form .hb-accom .hb-select-accom{
margin-top:-50px;
}
@media(max-width:767px){
.availability_form .hb-accom .hb-select-accom{
margin-top:10px;
}
.availability_form .hb-accom-price-caption{
display: block;
}
}
.availability_form .hb-accom-single-choice  .hb-accom .hb-select-accom{
margin-top:20px;
}
.availability_form .hb-booking-details-form .hb-title{
padding-top:50px;
}
.availability_form .hb-booking-details-form input[type=text],
.availability_form .hb-booking-details-form input[type=email]{
border: 1px solid rgba(255,255,255,.5);
padding:5px;
color:rgba(255,255,255,.5);
background: none;
}
.availability_form .hb-booking-details-form input[type=text]:focus,
.availability_form .hb-booking-details-form input[type=email]:focus{
border: 1px solid rgba(255,255,255,1);
outline: none;
color:rgba(255,255,255,1);
}
.availability_form .hb-resa-summary-content{
background: none;
border: none;
padding-left:0;
padding-right:0;
}
.availability_form .hb-confirm-button input[type=submit]{
color: #fff;
padding: 8px 0;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border:none;
background: none;
border-bottom: 2px solid #fff;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.single-top-spacing{
height:72px;
}
.single-head{
display: block;
margin-top:-72px;
background-size: cover !important;
position: relative;
}
.single-head .overlay{
position: absolute;
background: rgba(0,0,0,.3);
top:0;
left:0;
right:0;
bottom:0;
text-align: center;
color:#fff;
font-family: 'Playfair Display', serif;
}
.single-head.nooverlay .overlay{
background: rgba(0,0,0,0);
}
.single-head .overlay .logo{
position: absolute;
z-index: 7;
top:150px;
left:50%;
width:200px;
text-align: center;
margin-left:-100px;
}
.single-head .overlay > div{
position: relative;
z-index: 5;
}
.single-head .overlay > div .col-md-6:first-child{
text-align: left;
}
.single-head .overlay > div .col-md-6:last-child{
text-align: right;
}
.single-head .breadcrumbs{
font-family: 'Open Sans', sans-serif;
font-size: 10px;
display: block;
margin-bottom:15px;
}
.single-head .breadcrumbs a{
color:#fff;
}
@media(max-height:850px){
.single-head .overlay .logo{
top:150px;
}
}
@media(max-height:767px){
.single-head .overlay .logo{
top:100px;
width:100px;
}
.single-head .overlay > div .col-md-6:first-child{
text-align: center;
}
.single-head .overlay > div .col-md-6:last-child{
text-align: center;
}
}
@media(max-width:767px){
.single-head .overlay .logo{
width:100px;
margin-left:-50px;
}
.single-head .overlay > div .col-md-6:first-child{
text-align: center;
}
.single-head .overlay > div .col-md-6:last-child{
text-align: center;
}
}
.single-head .overlay h2{
font-weight: 300;
font-size: 42px;
margin-top:200px;
}
.single-head .overlay h4{
font-weight: 300;
font-size: 26px;
}
@media(max-height:767px){
.single-head .overlay h2{
font-size: 30px;
margin-top:150px;
}
.single-head .overlay h4{
font-size: 20px;
}
}
.single-back{
display: block;
text-align: center;
font-size: 12px;
text-transform: uppercase;
color:#ccc;
padding:40px 0;
letter-spacing: 2px;
border-bottom: 1px solid #ccc;
}
.single-back:hover{
color:#000;
}
@media(max-width:767px){
.single-back{
padding:20px 0;
}
}
article.single{
display: block;
padding-top:100px;
padding-bottom:100px;
line-height: 22px;
}
@media(max-width:767px){
article.single{
padding-top:40px;
padding-bottom:40px;
}
}
article.single .logo{
display: block;
max-width: 200px;
margin:0 auto 100px auto;
}
article.single .date{
display: block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin-bottom:-20px;
color:#666;
}
article.single h1{
display: block;
margin:30px 0;
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 42px;
text-align: center;
font-style: italic;
}
article.single.accomodation ul{
display: block;
margin:20px -5px;
padding:0;
list-style: square;
}
article.single.accomodation ul:after{
display: block;
content: "";
clear: both;
}
article.single.accomodation ul li{
display: block;
float: left;
width:calc(25% - 10px);
margin:5px;
padding:10px;
background: #f4f4f1;
}
@media(max-width:991px){
article.single.accomodation ul li{
width:calc(50% - 10px);
}
}
@media(max-width:575px){
article.single.accomodation ul li{
width:calc(100% - 10px);
}
}
article.single.accomodation .owl-room{
margin-bottom:30px;
}
article.single.accomodation .owl-room .item > a{
display: block;
background-size: cover !important;
}
article.single.accomodation .owl-room .item > a:after{
display: block;
content: "";
padding-bottom: 50%;
}
article.single.accomodation .features{
display: block;
margin-bottom:20px;
}
article.single.accomodation .features .col h1{
text-align: inherit;
margin:0;
}
article.single.accomodation .features .col span{
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px;
font-size: 12px;
}
article.single.accomodation .features .col:first-child{
text-align: left;
}
article.single.accomodation .features .col:last-child{
text-align: right;
}
section.dcb{
display: block;
margin:50px 0;
}
section.dcb > div > .container{
padding-top:40px;
padding-bottom:40px;
}
section.image_carousel_block{
padding-bottom:50px;
}
section.image_carousel_block .item > a{
display: block;
background-size: cover !important;
}
section.image_carousel_block .item > a:after{
display: block;
content: "";
padding-bottom: 50%;
}
section.gallery_block{
padding-bottom:50px;
}
section.gallery_block:after{
display: block;
content: "";
clear: both;
}
section.gallery_block .container > div{
margin-left:-5px;
margin-right:-5px;
}
section.gallery_block a{
display: block;
float:left;
width:calc(20% - 10px);
margin:5px;
}
section.gallery_block a:after{
display: block;
content: "";
padding-bottom: 100%;
}
@media(max-width:991px){
section.gallery_block a{
width:calc(25% - 10px);
}
}
@media(max-width:767px){
section.gallery_block a{
width:calc(33.333% - 10px);
}
}
@media(max-width:575px){
section.gallery_block a{
width:calc(50% - 10px);
}
}
section.timeline_homepage{
background: url(//hepok.ba/wp-content/uploads/2019/04/bgd_brend.jpg) bottom center no-repeat;
background-size: cover;
color:#fff;
padding-top:50px;
}
section.timeline_homepage .section-title{
padding-bottom:100px;
}
section.timeline_homepage .section-title h4{
color:#be1522;
}
section.timeline_homepage .item{
font-size: 12px;
padding:0 0 70px 0;
}
section.timeline_homepage .item h3{
font-family: 'Playfair Display', serif;
font-size: 20px;
margin:0;
padding:0;
}
@media(max-width:767px){
section.timeline_homepage .text-right{
text-align: left !important;
}
section.timeline_homepage .section-title{
padding-bottom:50px;
}
}
section.block_with_image{
display: block;
padding-top:70px;
padding-bottom:70px;
}
section.block_with_image .section-title{
max-width: 100%;
}
@media(max-width:767px){
section.block_with_image{
text-align: center;
}
}
section.three_column_icons{
display: block;
padding-top:150px;
padding-bottom:150px;
text-align: center;
}
section.three_column_icons .item img{
display: block;
margin:0 auto 30px auto;
width:auto;
height:100px;
}
section.three_column_icons .item h3{
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
}
section.three_column_icons .item .text{
font-size: 14px;
margin:20px 0 0 0;
}
@media(max-width:767px){
section.three_column_icons{
padding-top:50px;
padding-bottom:50px;
}
section.three_column_icons .item{
padding-top:20px;
padding-bottom:20px;
}
}
section.instagram_block{
display: block;
position: relative;
}
section.instagram_block .button.instagram{
display: block;
width:200px;
position: absolute;
z-index: 8;
left:50%;
top:-25px;
margin-left:-100px;
background: #c63e25 url(//hepok.ba/wp-content/themes/hepok/images/instagram-w.svg) no-repeat;
background-position: 15px 15px;
background-size: 20px auto;
padding:15px 10px 15px 50px;
text-align: left;
color:#fff;
}
section.instagram_block .button.instagram span{
position: absolute;
top:14px;
right:10px;
font-size: 20px;
}
section.instagram_block > div{
position: relative;
z-index: 7;
}
@media(max-width:991px){
#sb_instagram.sbi_col_8 #sbi_images .sbi_item{
width:25%;
}
}
@media(max-width:575px){
#sb_instagram.sbi_col_8 #sbi_images .sbi_item{
width:50%;
max-height: 200px;
}
}
@media(max-width:320px){
#sb_instagram.sbi_col_8 #sbi_images .sbi_item{
width:50%;
max-height: 150px;
}
}
section.product_tabs{
display: block;
padding-top:40px;
padding-bottom:70px;
}
section.product_tabs.alt{
display: block;
padding-top:70px;
padding-bottom:70px;
}
section.product_tabs h2{
font-family: 'Playfair Display', serif;
font-size: 42px;
margin-top:0;
margin-bottom:50px;
}
section.product_tabs .tab-title{
border-right: 1px solid #1d1d1b;
}
section.product_tabs .tab-title a{
display: block;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
padding:20px;
color:#1d1d1b;
border-bottom: 1px solid #1d1d1b;
}
section.product_tabs .tab-title a.active{
background: #1d1d1b;
color:#fff;
}
@media(max-width:767px){
section.product_tabs .tab-title{
border-right:none;
}
section.product_tabs .tab-title a{
padding:15px 20px;
text-align: center;
}
section.product_tabs h2{
text-align: center;
font-size: 32px;
margin-bottom:30px;
}
section.product_tabs{
display: block;
padding-top:0;
padding-bottom:50px;
}
}
section.product_tabs .tab-content{
display: none;
padding:0 30px;
}
section.product_tabs .tab-content.active{
display: block;
}
section.product_tabs .tab-content .item{
display: block;
text-align: center;
background: #fff;
padding:20px;
height: 100%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
color:#1d1d1b;
}
section.product_tabs .tab-content .item:hover{
box-shadow:0 0 20px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,.2);
}
section.product_tabs .tab-content .item h3{
display: block;
font-family: 'Playfair Display', serif;
font-size: 22px;
margin:0;
padding:20px 0 5px 0;
}
section.product_tabs .tab-content .item p{
font-size: 12px;
margin:0;
}
section.product_tabs .container{
position: relative;
}
section.product_tabs .container .deco1{
display: block;
position: absolute;
left:-300px;
top:-200px;
z-index: 8;
width:320px;
height:470px;
background: url(//hepok.ba/wp-content/themes/hepok/images/deco1-l.png) center no-repeat;
background-size: cover !important;
}
section.product_tabs .container .deco2{
display: block;
position: absolute;
right:-300px;
bottom:-250px;
z-index: 8;
width:320px;
height:470px;
background: url(//hepok.ba/wp-content/themes/hepok/images/deco1-r.png) center no-repeat;
background-size: cover !important;
}
section.product_tabs.alt  .section-title{
text-align: center;
max-width: 800px;
}
section.product_tabs.alt .tab-title{
border-right: none;
text-align: center;
margin-bottom:40px;
}
section.product_tabs.alt .tab-title a{
display: inline-block;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
padding:10px 20px;
color:#1d1d1b;
border-bottom: none;
}
section.product_tabs.alt .tab-title a.active{
background: none;
border-bottom: 1px solid #1d1d1b;
color:#1d1d1b;
}
@media(max-width:991px){
section.product_tabs.alt .tab-title a{
display: block;
max-width:300px;
margin:0 auto;
}
}
section.timeline_carousel{
}
section.timeline_carousel .item{
background-size: cover !important;
position: relative;
height:300px;
padding:25px;
color:#fff;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
section.timeline_carousel .item:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
}
section.timeline_carousel .item:before{
position: absolute;
z-index: 7;
content: "";
top:0;
bottom:0;
left:0;
right:0;
background: rgba(0,0,0,.3);
}
section.timeline_carousel .item > div{
position: relative;
z-index: 9;
}
section.timeline_carousel .item h3{
font-family: 'Playfair Display', serif;
font-size: 28px;
display: block;
margin:0;
}
section.timeline_carousel .item p{
margin:0;
font-size: 14px;
}
section.tcc{
display: block;
padding-top:70px;
padding-bottom:70px;
}
section.tcc.custom_padding{
padding-top:30px;
padding-bottom:30px;
}
section.tcc .section-title{
text-align: center;
padding-bottom:50px;
}
section.tcc h3{
font-family: 'Playfair Display', serif;
font-size: 28px;
margin:0;
padding:30px 0;
}
section.tcc h4{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
section.tcc.custom_padding h4{
padding-left:24px;
padding-bottom:25px;
}
section.tcc.custom_padding ul li{
font-size: 20px;
line-height: 28px;
}
@media(max-width:767px){
section.tcc.custom_padding h4{
padding-left:0;
padding-top:20px;
}
section.tcc.custom_padding ul{
padding-left:25px;
}
}
.cta{
display: block;
margin-top:-60px;
}
.cta .container{
max-width: 1110px;
}
.cta .icon{
width:auto;
height:130px;
}
.cta .title{
font-size: 48px;
font-weight: 700;
line-height: 48px;
}
.cta .title span{
display: block;
font-size: 13px;
line-height: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta .black{
background: #1d1d1b;
color:#fff;
position: relative;
}
.cta .black > div{
padding:30px;
position: relative;
z-index: 7;
}
.cta .black > div h4{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
.cta .black > div h2{
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 42px;
margin-bottom:25px;
}
.cta .black .skew{
position: absolute;
right:calc(100% - 50px);
top:0;
bottom:0;
background: #1d1d1b;
z-index: 1;
width:100px;
transform: skew(10deg);
}
.cta.custom{
}
@media(max-width:991px){
.cta .black > div h2{
font-size: 32px;
line-height: 32px;
}
.cta .icon{
width:auto;
height:100px;
}
.cta .title{
font-size: 38px;
font-weight: 700;
line-height: 38px;
}
.cta .black .skew{
right:calc(100% - 70px);
}
}
@media(max-width:767px){
.cta .row > div{
min-height:200px;
}
.cta .black .content{
max-width:500px;
margin-left:auto;
margin-right:auto;
}
}
.contact_page{
display: block;
position: relative;
background: #fff;
}
.contact_page .before{
position: absolute;
z-index: 1;
background: #f4f4f1;
top:0;
left:0;
bottom:0;
width:50%;
}
.contact_page .before:after{
position: absolute;
content: "";
left:calc(90%);
top:0;
bottom:0;
background: #f4f4f1;
z-index: 1;
width:20%;
transform: skew(-10deg);
}
.contact_page .container{
position: relative;
z-index: 9;
}
.contact_page .content{
padding:100px 0;
}
.contact_page .content h4{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom:20px;
}
.contact_page .right .content h4{
padding:10px;
background: #f4f4f1;
}
.contact_page .right .content h4:first-child{
padding:0;
background: none;
}
.contact_page form{
margin-top:30px;
max-width: 60%;
}
.contact_page input[type=text],
.contact_page input[type=email],
.contact_page textarea{
display: block;
width:100%;
border:1px solid #fff;
background: #fff;
padding:10px;
}
.contact_page textarea{
height:200px;
}
.contact_page input[type=text]:focus,
.contact_page input[type=email]:focus,
.contact_page textarea:focus{
border-color: #be1522;
outline: none;
}
.contact_page input.button{
padding:10px 25px;
color:#fff;
background:  #be1522;
}
.contact_page div.wpcf7 .ajax-loader{
margin-right:-20px;
}
@media(max-width:1366px){
.contact_page .before:after{
left:calc(85%);
}
}
@media(max-width:991px){
.contact_page .before{
display: none;
}
.contact_page .row > div:first-child{
background: #f4f4f1;
padding-left:30px;
padding-right:30px;
}
.contact_page form{
max-width: 100%;
}
}
@media(max-width:767px){
.contact_page .content{
padding:50px 0;
}
}
#map_canvas{
width:100%;
height:100%;
top:-72px;
}
section.tccta{
display: block;
padding-top:50px;
padding-bottom:50px;
background: #e3a626;
}
section.tccta .section-title{
text-align: center;
padding-bottom:30px;
}
section.tccta h2{
text-align: right;
margin:0;
padding:0 30px 0 0;
line-height: 46px;
font-family: 'Playfair Display', serif;
font-size: 42px;
text-transform: uppercase;
position: relative;
opacity:.6;
}
section.tccta h2:after{
position: absolute;
content: "";
width:4px;
background: #fff;
top:5px;
bottom:5px;
right:-17px;
}
section.tccta p{
margin: 0;
line-height: 30px;
padding:0 0 0 30px;
}
@media(max-width:991px){
section.tccta h2:after{
right:-7px;
}
}
@media(max-width:767px){
section.tccta h2{
text-align: left;
padding:0 0 30px 0;
line-height: 36px;
font-size: 32px;
}
section.tccta h2:after{
display: none;
}
section.tccta p{
padding:0;
}
section.tccta .section-title{
text-align: left;
padding-bottom:0px;
}
}
section.multi_cta_cards{
display: block;
padding-bottom:250px;
}
section.multi_cta_cards .item{
display: block;
position: relative;
background-size: cover !important;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
overflow: hidden;
}
section.multi_cta_cards .item > div{
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
}
section.multi_cta_cards .item:hover > div{
transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
}
section.multi_cta_cards .item h4{
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
}
section.multi_cta_cards .item h2{
font-family: 'Playfair Display', serif;
font-size: 32px;
line-height: 32px;
margin-bottom:10px;
}
section.multi_cta_cards .item.i1{
background: #fff;
padding:40px;
color:#fff;
max-width:75%;
height:500px;
}
section.multi_cta_cards .item.i1 .valign{
max-width: 400px;
}
section.multi_cta_cards .item.i2{
position: absolute;
top:80%;
left:5%;
right:30%;
background: #ececeb;
max-width:75%;
box-shadow:0 0 20px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,.2);
}
section.multi_cta_cards .item.i2:after{
display: block;
content: "";
clear: both;
}
section.multi_cta_cards .item.i2 .image{
float:left;
width:33%;
position: relative;
background-size: cover !important;
}
section.multi_cta_cards .item.i2:hover .image{
margin-left:-5%;
margin-right:5%;
}
section.multi_cta_cards .item.i2 .image:after{
display: block;
content: "";
padding-bottom: 80%;
}
section.multi_cta_cards .item.i2 .right{
float:left;
width:67%;
position: relative;
height: 100%;
padding:40px 100px 0 40px;
}
section.multi_cta_cards .item.i3{
position: absolute;
top:40%;
right:0;
background: #fff;
width:35%;
box-shadow:0 0 20px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,.2);
}
section.multi_cta_cards .item.i3 .image{
background-size: cover !important;
}
section.multi_cta_cards .item.i3 .image:after{
display: block;
content: "";
padding-bottom: 60%;
}
section.multi_cta_cards .item.i3 .valign{
padding:40px;
}
@media(max-width:1199px){
section.multi_cta_cards .item.i2 .right{
padding:25px 100px 0 25px
}
section.multi_cta_cards .item h2{
font-size: 28px;
line-height: 28px;
}
section.multi_cta_cards .item.i2 .image:after{
padding-bottom:83%;
}
section.multi_cta_cards .item.i3 .valign{
padding: 25px;
}
section.multi_cta_cards .item.i3{
top:50%;
}
}
@media(max-width:991px){
section.multi_cta_cards{
padding-bottom:60px;
}
section.multi_cta_cards .item.i1{
height: 300px;
max-width: 100%;
}
section.multi_cta_cards .item.i2 {
position: relative;
top: auto;
left: auto;
right: auto;
background: #ececeb;
max-width: 100%;
margin-top: 20px;
}
section.multi_cta_cards .item.i2 .right{
padding-right:25px;
}
section.multi_cta_cards .item.i3 {
position: relative;
top: auto;
right: auto;
background: #fff;
width: 100%;
margin-top: 20px;
}
section.multi_cta_cards .item.i3:after{
display: block;
content: "";
clear: both;
}
section.multi_cta_cards .item.i3 .image{
width:33%;
float:left;
}
section.multi_cta_cards .item.i3:hover .image{
margin-left:-5%;
margin-right:5%;
}
section.multi_cta_cards .item.i3 .image:after{
padding-bottom: 83%;
}
section.multi_cta_cards .item.i3 .valign{
width:66%;
float:left;
}
}
@media(max-width:767px){
section.multi_cta_cards .item h2{
font-size: 26px;
line-height: 26px;
}
section.multi_cta_cards .item.i2 .image:after,
section.multi_cta_cards .item.i3 .image:after{
padding-bottom: 100%;
}
section.multi_cta_cards .item.i3 .valign{
padding: 25px 25px 0 25px;
}
}
@media(max-width:575px){
section.multi_cta_cards .item.i2 .image:after,
section.multi_cta_cards .item.i3 .image:after{
padding-bottom: 60%;
}
section.multi_cta_cards .item.i2 .image,
section.multi_cta_cards .item.i3 .image{
width:100%;
float:none;
}
section.multi_cta_cards .item.i2:hover .image,
section.multi_cta_cards .item.i3:hover .image{
margin-left:0;
margin-right:0;
}
section.multi_cta_cards .item.i2 .right,
section.multi_cta_cards .item.i3 .valign{
width:100%;
float:none;
padding: 30px;
}
}
section.product_details{
}
section.product_details .sticker{
position: absolute;
top:0;
right:0;
}
section.product_details .main{
display: block;
background: #fff;
padding-top: 50px;
padding-bottom:50px;
}
section.product_details .main h2{
font-family: 'Playfair Display', serif;
font-size: 42px;
line-height: 42px;
margin-bottom: 25px;
margin:0;
padding:0;
}
section.product_details .main h4{
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin:10px 0 0 0;
}
section.product_details .main h4:after{
display: block;
content: "";
width:50px;
height:3px;
background: #be1522;
margin:14px 0 30px 0;
}
section.product_details .main .details{
max-width: 550px;
font-size: 14px;
}
section.product_details .main .details .row{
padding-top:5px;
padding-bottom:5px;
}
section.product_details .main .litre{
color:#fff;
background: #1d1d1b;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
width:50px;
height:50px;
line-height: 50px;
text-align: center;
font-weight: 700;
font-size: 14px;
margin-top:20px;
}
section.product_details .specs{
padding-top:30px;
padding-bottom:30px;
background: #fbf2e0;
font-size: 11px;
line-height: 15px;
}
section.product_details .specs .d-flex{
}
section.product_details .specs .d-flex > div{
flex:1 1 auto;
align-self: center;
}
section.product_details .specs .d-flex > div > div{
flex:1 1 auto;
}
section.product_details .specs .d-flex > div > div:first-child{
width:30%;
text-align: right;
}
section.product_details .specs .d-flex > div > div:last-child{
width:70%;
max-width:80px;
}
section.product_details .specs img{
width:auto;
height:40px;
margin-right:10px;
}
@media(max-width:991px){
section.product_details .specs > div > .d-flex{
flex-wrap: wrap;
justify-content: center;
}
section.product_details .specs > div > .d-flex > div{
flex:0 0 auto;
align-self: center;
min-width: 200px;
margin-top:15px;
margin-bottom:15px;
}
}
@media(max-width:575px){
section.product_details .specs > div > .d-flex > div{
min-width: 150px;
}
}
section.cta_download{
display: block;
padding-top:40px;
padding-bottom:40px;
background: url(//hepok.ba/wp-content/themes/hepok/images/bg-download.png) center no-repeat;
background-size: cover !important;
color:#fff;
}
section.cta_download h2{
display: block;
font-weight: 300;
margin:0;
padding:0;
}
section.cta_download .button{
padding-right:32px;
position: relative;
}
section.cta_download .button i{
font-size: 38px;
display: block;
position: absolute;
bottom: -6px;
right:-2px;
}
section.cta_download .button:hover{
color:#000;
border-color:#000;
}
section.cta_download .row > div:last-child{
text-align: right;
}
@media(max-width:767px){
section.cta_download h2{
margin-bottom:15px;
}
section.cta_download .row > div,
section.cta_download .row > div:last-child{
text-align: center;
}
}
@keyframes pulse {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
footer{
display: block;
background: #07080f;
color:#fff;
padding-top:25px;
}
footer .top{
display: block;
border-bottom: 1px solid #333;
line-height: 70px;
letter-spacing: 2px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
footer #clock{
margin-right:30px;
}
footer #clock i{
font-style: normal;
opacity:0;
animation: pulse 1.5s infinite;
}
footer .top ul{
display: block;
margin:0;
padding:0;
list-style: none;
}
footer .top ul li{
display: inline-block;
}
footer .top ul li a{
display: block;
padding:0 10px;
color:#fff;
opacity: 1;
}
footer .top ul li:hover a{
opacity: .7;
}
footer .top ul li:first-child a{
padding-left: 0;
}
footer .bottom{
padding:20px 0;
font-size: 12px;
}
footer .certs{
text-align: right;
}
footer .certs img{
height:65px;
margin:5px;
}
footer .socials{
display: block;
float: right;
}
footer .socials > a{
display: block;
float: left;
width:34px;
height:34px;
opacity:.5;
margin-top:20px;
}
footer .socials > a:hover{
opacity: 1;
}
footer .socials > a.facebook{
background: url(//hepok.ba/wp-content/themes/hepok/images/soc-facebook-w.svg) center no-repeat;
background-size: contain;
margin-right:10px;
}
footer .socials > a.instagram{
background: url(//hepok.ba/wp-content/themes/hepok/images/soc-instagram-w.svg) center no-repeat;
background-size: contain;
}
@media(max-width:1199px){
footer,
footer .text-right,
footer .certs{
text-align: center !important;
}
footer .certs{
margin-top:15px;
}
footer .socials{
display: block;
float: none;
text-align:center;
margin-bottom:20px;
}
footer .socials > a{
display: inline-block;
float: none;
width:34px;
height:34px;
opacity:.5;
margin-top:20px;
}
}
@media(max-width:767px){
footer .top ul{
padding-top:10px;
padding-bottom:10px;
}
footer .top ul li{
display: block;
text-align: center;
}
footer .top ul li a{
line-height: 32px;
}
footer .top ul li:first-child a{
padding-left: 10px;
}
}