/*
Theme Name: Jadrija100
Theme URI: https://www.jadrija100.com/
Author: EGO MEDIA
Author URI: http://www.egomedia.hr/
Description: Jadrija 100
Version: 1.0
License: Copyright © Ego Media, Tezacka 47, 22000 Sibenik - Croatia
License URI: http://www.egomedia.hr/
Tags: css, egomedia, ego, media, jadrija, 100, jadrija100
Text Domain: jadrija100
Note: Date: 06.08.2022.  
-------------------------------------------------------*/

@import url("../fonts/font-awesome/css/font-awesome.css");

/******************************************************
/// Osnovni stilovi
******************************************************/
html { overflow-x: hidden; padding: 0; margin: 0; background: #fff; }
html:before { content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 15px rgba(0,0,0,.8); box-shadow: 0px 0px 15px rgba(0,0,0,.8); z-index: 9999999; }
body { font-family:"Jost", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 400; color: #606060; line-height: 36px; padding: 0; display: none; }

.p-padding-custom { padding: 105px 150px; }
.orange-bg { background: #ef9c2e;  }
.blue-bg { background: #00587a; position:relative; z-index:9; }
.green-bg { background: #199b5e; }
.red-bg { background: #e44c3b; }
.blue-bg hr { border-color: #ef9c2e; border-style: dashed; border-width: 2px; }
.bg-cover { background-size: cover; background-position: 100% 100% ; background-attachment:scroll; }
a, a:hover { text-decoration:none; -webkit-transition: .3s; transition: .3s; }
.text-light a { color:#ffffff; }
.p-title { display: inline-block; font-size: 12px; margin-bottom: 20px; font-weight: bold; letter-spacing: 2px; line-height: 10px; text-transform: uppercase; }
.small-border { width: 100px; height: 3px; border-top:solid 2px #fff; border-left: none; border-right: none; display: block; margin: 0 auto; margin-bottom: 30px; }
.small-border.sm-left { margin-left: 0; }

a.btn-custom { position: relative; top: -5px; left: 8px; padding: 11px 40px 11px 55px!important; font-size: 16px!important; }
a.btn-custom:hover, .btn-custom:hover { color: #fff; -webkit-box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3); -moz-box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3); box-shadow: 2px 2px 20px 0px rgba(20,20,20, 0.3); }
a.btn-custom i { position:relative; left:-18px; top:6px; font-size: 28px; border-radius:50%; background:#ef9c2e; padding:13px 13px 13px 15px; border: 5px solid #000; box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);transform: scale(1); animation: pulse 2s infinite; }
a.btn-custom:hover i { background:#fff; border: 5px solid #000; color:#000; }

@keyframes pulse { 
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 
}

a.btn-custom, .btn-custom { font-family: "Jost"; font-size: 12px; min-width: 120px; }
a.btn-custom,a.btn-custom:active,a.btn-custom:focus,a.btn-custom:visited,
.btn-custom { color: #fff; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; outline:0; font-weight:bold; text-decoration:none; padding: 11px 30px; min-width: 120px; text-transform:uppercase; font-size:12px; letter-spacing: 2px;position: relative; }
a.btn-custom.btn-black { background: #000; }

.mt0 { margin-top: 0; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; } .mt50 { margin-top: 50px; } .mt60 { margin-top: 60px; } .mt70 { margin-top: 70px; } .mt80 { margin-top: 80px; } .mt90 { margin-top: 90px; } .mt100 { margin-top: 100px; } .mb0 { margin-bottom: 0; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; } .mb50 { margin-bottom: 50px; } .mb60 { margin-bottom: 60px; } .mb70 { margin-bottom: 70px; } .mb80 { margin-bottom: 80px; } .mb90 { margin-bottom: 90px; } .mb100 { margin-bottom: 100px; } .mb0 { margin-bottom: 0; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; } .mb50 { margin-bottom: 50px; } .mb60 { margin-bottom: 60px; } .mb70 { margin-bottom: 70px; } .mb80 { margin-bottom: 80px; } .mb90 { margin-bottom: 90px; } .mb100 { margin-bottom: 100px; } .ml0 { margin-left: 0; } .ml10 { margin-left: 10px; } .ml20 { margin-left: 20px; } .ml30 { margin-left: 30px; } .ml40 { margin-left: 40px; } .ml50 { margin-left: 50px; } .ml60 { margin-left: 60px; } .ml70 { margin-left: 70px; } .ml80 { margin-left: 80px; } .ml90 { margin-left: 90px; } .ml100 { margin-left: 100px; } .mr0 { margin-right: 0; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; } .mr30 { margin-right: 30px; } .mr40 { margin-right: 40px; } .mr50 { margin-right: 50px; } .mr60 { margin-right: 60px; } .mr70 { margin-right: 70px; } .mr80 { margin-right: 80px; } .mr90 { margin-right: 90px; } .mr100 { margin-right: 100px; } .mb-100 { margin-bottom: -100px; } .padding10 { padding: 10px; } .padding20 { padding: 20px; } .padding30 { padding: 30px; } .padding40 { padding: 40px; } .padding50 { padding: 50px; } .padding60 { padding: 60px; } .padding70 { padding: 70px; } .padding80 { padding: 80px; } .padding100 { padding: 100px; } .pt0 { padding-top: 0; } .pt10 { padding-top: 10px; } .pt20 { padding-top: 20px; } .pt30 { padding-top: 30px; } .pt40 { padding-top: 40px; } .pt50 { padding-top: 50px; } .pt60 { padding-top: 60px; } .pt70 { padding-top: 70px; } .pt80 { padding-top: 80px; } .pb0 { padding-bottom: 0; } .pb10 { padding-bottom: 10px; } .pb20 { padding-bottom: 20px; } .pb30 { padding-bottom: 30px; } .pb40 { padding-bottom: 40px; } .pb50 { padding-bottom: 50px; } .pb60 { padding-bottom: 60px; } .pb80 { padding-bottom: 80px; } .pl130 { padding-left: 130px; } .pr20 { padding-right:20px; } .mt-10 { margin-top: -10px; } .mt-20 { margin-top: -20px; } .mt-30 { margin-top: -30px; } .mt-40 { margin-top: -40px; } .mt-50 { margin-top: -50px; } .mt-60 { margin-top: -60px; } .mt-70 { margin-top: -70px; } .mt-80 { margin-top: -80px; } .mt-90 { margin-top: -90px; } .mt-100 { margin-top: -100px; } .absolute { position: absolute; z-index: 1; } .relative { position: relative; z-index: 1; }
hr { display: block; clear: both; border-top: solid 1px #ddd; margin: 40px 0 40px 0; }
h1, h2, h4, h3, h5, h6, .h1,.h2,.h3,.h4,.h5,.h6 { margin-top:0; font-family: "Jost"; font-weight: 600; color: #111111; }
h2.text-light { color: #fff; }
h1, .h1 { font-size: 48px; margin-bottom:20px; line-height:56px; letter-spacing:-1px; }
h2 { margin-top:0; margin-bottom:10px; font-size: 36px; line-height:42px; letter-spacing:-1px; display:inline-block; overflow:hidden; position:relative; left: 0; right: 0; }
h3 { font-size: 22px; margin-bottom: 25px; }
h4 { font-size: 20px; margin-top: 0; margin-bottom: 10px; }
h5 { font-size:18px; }
.text-light { color: #ffffff; }
.text-dark { color:#223044; }
.text-white { color: #fff; }
.text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6 { color: #fff; }
.text-white h1, .text-white h2, .text-white h4, .text-white h4, .text-white h5, .text-white h6 { color: #fff; }

.no-bottom { margin-bottom: 0; padding-bottom: 0 !important; }
.no-top { padding-top: 0 !important; }
.no-margin { margin: 0 !important; }
.nopadding { padding: 0; margin: 0; }
p { margin-bottom: 20px; }
p.intro { color: #555; font-size: 16px; line-height: 1.5em; }
.image-slider { cursor: move; }
.no-padding, section.no-padding { padding: 0; }
.float-left { float: left; }
.wow { visibility: hidden; }

/******************************************************
/// Preloader
******************************************************/
#preloader { display:table; position: fixed; z-index: 20000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.6); text-align: center; }
.spinner { display:table-cell; vertical-align:middle; margin: 10px auto 0; width: 270px; text-align: center; }
.spinner > div {  width: 64px; height:64px; background-color: #ef9c2e; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner > div span { font-size: 53px; font-weight: 600; color: #fff; position:relative; top:15px; }
.spinner .bounce1 {  -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
@keyframes sk-bouncedelay { 0%, 80%, 100% {  -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }

/******************************************************
/// Struktura
******************************************************/
#wrapper { overflow: hidden; }
.container-fluid { padding: 0px; margin: 0px; }
#subheader { text-align: center; overflow: hidden; padding: 380px 0 380px 0; }
#content { width: 100%; background: #fff; padding: 90px 0 90px 0; z-index: 100; }
#content { background: #ffffff; }
section { padding: 90px 0 90px 0; position: relative; }
section.wide { padding: 180px 0 180px 0; }
section:not(.relative) {  }
section.no-bg, #content.no-bg { background:none !important; }

/******************************************************
/// Header
******************************************************/
header { width: 100%; position: absolute; left: 0; z-index: 1001; background: #ef9c2e; margin:0; height:130px; border-bottom:solid 15px rgba(255,255,255,1); }
header.autoshow { top: -120px; height: 70px !important; }
header.autoshow.scrollOn, header.autoshow.scrollOff { -o-transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; transition: .5s; outline: none; }
header.autoshow.scrollOn { top: 0; }
header.autoshow.scrollOff { top: -120px; }
header div#logo { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: relative; top: 28px; }
header div#logo img { width: 180px; }
header .logo-2 { display: none; }
header nav a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
header nav a:hover { color: #555; }
header .header-col.mid { float:right; }

/* topbar */
#topbar { pos-top:fixed; z-index:1000; width:100%; padding:0 30px; overflow:hidden; top:0; background:#111111; }
#topbar.topbar-dark { background:#202020; }
#topbar a { text-decoration:none; color:#ef9c2e; text-transform: uppercase; }
#topbar a:hover, #topbar a:focus, #topbar a.active { color: #fff; }
.topbar-left,.topbar-right { display:flex; }
.topbar-right { float:right; }
.topbar-left { float:left; }
.topbar-widget { font-size:15px; color: #ef9c2e; display:flex; padding:3px 15px; font-weight:600; height:40px; }

#mainmenu { font-family: "Jost"; font-size: 19px; float:none; text-transform: uppercase; }
#mainmenu ul { margin: 0px 0px; padding: 0px; height: 30px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; overflow:hidden; background: #ffffff; -webkit-box-shadow: 2px 2px 30px 0px rgba(20,20,20, 0.1); -moz-box-shadow: 2px 2px 30px 0px rgba(20,20,20, 0.1); box-shadow: 2px 2px 30px 0px rgba(20,20,20, 0.1); }
#mainmenu li { margin: 0px 0px; padding: 0px 0px; float: left; display: inline; list-style: none; position: relative; }
#mainmenu > li { letter-spacing: 2px; font-weight:600; }
#mainmenu a { position: relative; display: inline-block; padding:30px 18px; text-decoration: none; color: #fff; text-align: center; outline: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
#mainmenu li::after { content: ""; position: absolute; top: 37px; right: 8px; width: 3px; color: #fff; height: 78px; line-height: 60px; background: #fff; transform: rotate(15deg); }
#mainmenu li:last-child::after { display:none; }
#mainmenu li a:hover, #mainmenu li.active a { color: #000; }
#mainmenu ul li:hover>a { color: #fff; background: #1a8b49; }

/* menu mobile */
#menu-btn { display: none; float: right; margin-top: 0px; width: 50px; height: 46px; padding: 6px; text-align: center; cursor: pointer; color:#fff; margin-left:0px; position: absolute; top:5px; border-radius: 6px; }
#menu-btn:before { font-family: FontAwesome; content: "\f0c9"; font-size: 28px; }
#menu-btn:hover { background: #fff; }
#menu-btn:hover:before { color: #222; }
header.header-mobile { position:absolute; background:#fff; top:0; height:90px; }
header.header-mobile.has-topbar { height:100px; }
header.header-mobile.has-topbar .header-row, header.header-mobile.has-topbar #topbar { margin-top:-15px; padding:0; }
header.header-mobile nav { float:none; }
header.header-mobile .logo { display: none; }
header.header-mobile .logo-2 { display: inline-block; }
header.header-mobile #mainmenu ul { padding:0; }

/******************************************************
/// Header - Sliding panel
******************************************************/
.offcanvas-toggler { cursor: pointer; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }
.sliding-panel { position: fixed; width: 100%; top: 0; min-height: 100vh; right: -100%; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 99999999; opacity: 0; visibility: hidden; }
.sliding-panel.prikazi-panel { right: 0px; visibility: visible; opacity: 1; }
.sliding-panel .overly { position: fixed; height: 100vh; width: 100%; z-index: 98; background-color: #000; left: 0; top: 0; -webkit-transition: all 0.4s; transition: all 0.4s; cursor: pointer; opacity: 0; visibility: hidden; }
.sliding-panel .overly.prikazi-overly { visibility: visible; opacity: 0.5; }
.panel-wrap { background-color: #fff; width: 100%; height: 100vh; padding: 0px 0px; position: relative; z-index: 99; overflow-x: hidden; overflow-y: scroll; }
.panel-wrap button.panel-zatvori { background: transparent; position: absolute; right: 20px; top: 18px; font-size: 48px; color: #ef9c2e; border: none; z-index: 9; }
.panel-wrap button.panel-zatvori:hover { color: #000; }
.panel-wrap button.panel-zatvori span { display:block; font-size: 18px; font-weight:600; color: #000; }

/******************************************************
/// Slider
******************************************************/
.tp-bgimg::before { content: ""; height: 30%; background-color: transparent; background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#222222)); background: -webkit-linear-gradient(top, transparent, #222222); background: -moz-linear-gradient(top, transparent, #222222); background: -ms-linear-gradient(top, transparent, #d3bfdd); background: -o-linear-gradient(top, transparent, #222222); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; overflow: hidden; opacity: 0.85; width: 100%; position: absolute; bottom: 0%; left: 0px; right: 0px; }

#revolution-slider { background: #222; }
.tp-caption { color: #fff; font-weight: 400; }
.tp-caption.teaser { letter-spacing: 5px; }
.tp-caption br { margin-bottom: 5px; }
.tparrows { top: 50%; }
.med { font-size: 24px; letter-spacing: -.5px; }
.med-white { color: #fff; font-size: 24px; letter-spacing: -.5px; }
.med-green { color: #1a8b49; font-size: 24px; letter-spacing: -.5px; }
.small-white { color: #fff; line-height: 1.7em; }
.big-black { font-size: 52px; letter-spacing: -3px; color: #222; }
.big-white { font-size: 16px; color: #fff; line-height: normal; font-weight: 400; text-transform: uppercase; letter-spacing: 6px; }

/******************************************************
/// Stranice
******************************************************/
.site-title h1 { font-family: "Jost"; font-size: 200px!important; color: #000; font-weight: 700; letter-spacing: 36px; display:block; margin:0; position:absolute; z-index:999; bottom:10px; right:0px; background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #000, transparent, transparent);   -webkit-background-clip: text; background-clip: text; animation: reveal 4000ms ease-in-out forwards 2000ms; }
@keyframes reveal {
	80% { letter-spacing: 8px; } 100% { background-size: 300% 300%; }
}
.site-title h1 span { font-family: "Jost"; font-size: 50px!important; color: #000; font-weight: 700; letter-spacing: 1px; display:block; margin:0; position:relative; z-index:99; bottom:70px; right:0px; }
.site-title h1.smaller { font-size: 110px!important; font-size: 110px!important; color: #000; font-weight: 700; letter-spacing: 6px; display:block; margin:0; position:absolute; z-index:99; bottom:58px; left:40px; }
.site-title h3 {  margin-left:30%; margin-top:0px; display:block; }

.intro-text  { position: relative; z-index: 99; }
.intro-text h3 { font-size: 34px; }

.kontakt-page { padding-top:250px; }
.kontakt { margin-right: 40px;padding: 40px; border: 2px dashed #fff; }
.kontakt img { max-width: 100px; margin-bottom:30px; }

.program-bg { padding: 40px 0; z-index:9; position:relative; border-bottom-left-radius: 50px; border-left: 30px solid #ef9c2e; }
section.full-bg { width:100%; height:100vh; padding:280px 0 280px 0; background-position: center center; background-repeat: no-repeat; background-attachment: scroll; background-size: cover; }

.flex-wrapper { top: -130px; width: 100%; position: relative; z-index: 1; padding: 0; }
.flex-bg { background: url(../images/bg/jadrija_old.jpg); background-position: center right; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; }
.flex-wrapper:after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: -moz-linear-gradient(left, rgba(248, 247, 241, 0) 0%, #f8f7f1 45%, #f8f7f1 100%); background: -webkit-linear-gradient(left, rgba(248, 247, 241, 0) 0%, #f8f7f1 45%, #f8f7f1 100%); background: linear-gradient(to right, rgba(248, 247, 241, 0) 0%, #f8f7f1 45%, #f8f7f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f8f7f1', endColorstr='#f8f7f1',GradientType=1 ); }

.swing { animation: swing ease-in-out 1s infinite alternate; transform-origin: center -20px; float:left; box-shadow: 5px 5px 10px rgba(0,0,0,0.5); }
.swing img { border: 5px solid #f8f8f8; display: block; }
.swing:after { content: ''; position: absolute;   width: 20px; height: 20px;  border: 1px solid #999; top: -10px; left: 45%; z-index: 0; border-bottom: none; border-right: none; transform: rotate(45deg); }
.swing:before { content: ''; position: absolute; width: 5px; height: 5px; top: -14px;left: 48%; z-index: 5; border-radius: 50% 50%; background: #000; }
@keyframes swing { 0% { transform: rotate(3deg); } 100% { transform: rotate(-3deg); } }

.de_count { padding: 50px 0 50px 0;   }
.de_count h3 { font-size: 60px; letter-spacing: 0px; margin:0; padding:0; margin-bottom:15px; line-height:.5em; }
.de_count h5 { font-size: 40px; font-weight: 500; }
.de_count h3 span { font-size: 60px; }
.de_count.big h3 { font-size:120px; }
.de_count span { font-size: 12px; text-transform:uppercase; }
.de_count i { display: block; font-size: 30px; margin: 0 auto; margin-bottom: 0px; width: 100%; font-weight: lighter; }
.de_count.small h4 { font-size:28px; margin-bottom:0;  }
.de_count.ultra-big h3 { font-size: 70px; line-height:1em; color:#fff; }
.de_count.ultra-big span { font-size:18px; font-weight:bold; letter-spacing:6px; padding:0; }
.de_count.ultra-big.s2 { box-shadow: -1px 0px 44px -15px rgba(0,0,0,0.75); padding: 40px 30px; border-radius: 10px; } 
.de_count.ultra-big.s2plus { box-shadow: -1px 0px 44px -15px rgba(0,0,0,0.75); padding: 70px 60px; border-radius: 10px; } 
.de_count.ultra-big.s2 h3 { letter-spacing: 0; } 
.de_count.ultra-big.s2 span { font-size: 18px; letter-spacing: 3px; color:#fff; } 
.de_count.ultra-big.s2plus h3 { letter-spacing: 0; font-size:115px; } 
.de_count.ultra-big.s2plus span { font-size: 24px; letter-spacing: 3px; color:#fff; }

.de-flex { display: flex; justify-content: space-between; }
.de-flex > .de-flex-col { display: flex; justify-content: center; align-items: center; }

.de-images { position:relative; width:100%; }
.de-images img, .di-text { -webkit-box-shadow: 2px 20px 30px 0px rgba(20,20,20, 0.3); -moz-box-shadow: 2px 20px 30px 0px rgba(20,20,20, 0.3); box-shadow: 2px 20px 30px 0px rgba(20,20,20, 0.3); border-radius: 10px; }
.di-small { position:absolute; width:40%; height:40%; top:-10%; left:-10%; z-index:1; }
.di-small-2 { position:absolute; width:40%; height:40%; right:-10%; bottom:-10%; z-index:1; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); }
.di-small-1 { position:absolute; width:40%; top: 30%; left:-10%; z-index:1; text-align: center; padding: 0; border-bottom-left-radius: 20px; }
.di-text { position:absolute; width:40%; top:85%; left:-25%; z-index:1; text-align: center; padding:10% 0; border-radius: 10px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); }
.di-text h1 { font-size: 4vw; margin: 0; }

.services { padding:0; }
.services__left { height: 640px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.services__left .play-btn { font-size: 26px; color: #fff; height: 100px; width: 100px; border-radius: 50%; background: #ef9c2e; display: block; line-height: 100px; text-align: center; position: relative; z-index: 1; border:5px solid #ef9c2e; margin: -160px auto 50px auto; }
.services__left .play-btn:before { position: absolute; left: 12px; top: -170px; height: 238px; width: 68px; background: #ef9c2e; content: ""; z-index: -1; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;  }
.services__left .play-btn i { position: relative; top: -3px; left: 4px; }
.services__left .play-btn:after { position: absolute; left: 12px; top: 12px; height: 68px; width: 68px; background: #00587a; border-radius: 50%; content: ""; z-index: -1; border:0px solid #fff; overflow:hidden; box-shadow: 0 0 0 0 rgba(0, 88, 122, 1); transform: scale(1); animation: pulse 2s infinite; }
.services__list { margin: 0; }
.service__item { height: 320px; display:block; width:100%; background-position: top center; overflow: hidden; position: relative; }
.service__item.xl { height: 450px; }

.over { position:absolute; left:0; top:0; right:0; bottom:0; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); z-index:1; }
.program_item .service__item:hover { border-radius:10px; z-index:9; position:absolute; width:100%; box-shadow: -1px 0px 44px -15px rgba(0,0,0,1); -webkit-transform: rotate(-3deg) scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(-3deg) scale(1.6); /* IE 9 */ transform: rotate(-3deg) scale(1.6); /* Firefox 16+, IE 10+, Opera */ transition: 0.25s; }
.program_item .service__item:hover h4 { text-shadow: 0px 0px 1px #000000;  font-size: 16px; }
.program_item:hover .over { display: none; }
.service__item .play-btn { font-size: 26px; color: #fff; height: 55px; width: 55px; border-radius: 50%; background: #ef9c2e; display:block; line-height: 50px; text-align: center; position: relative; z-index: 9; top: 80px; border: 5px solid #fff;  }
.service__item .play-btn i { position: relative; top: -2px; left: 3px; }
.service__item.deep-bg { background: #ef9c2e; }
.service__item.aap-bg { background: #199b5e; }
.service__item.beep-bg { background: #00587a; }
.service__item h4 { font-size: 20px; color: #ffffff; font-weight: 700; text-align:center; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 20px; display:block; z-index:1; width: 270px; }
.service__item p { color: #ffffff; margin-bottom: 0; line-height: 28px; }
.social_big a i { font-size:170px; color: #b5b5b6; }
.social_big a:hover i {  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); perspective: 1000px; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-2px, 0, 0); } 40%, 60% { transform: translate3d(2px, 0, 0); } }

/******************************************************
/// Footer
******************************************************/
footer { background: #fff; color:#000; padding: 0; }
footer a { color: #ffffff; text-decoration:none !important; }
.subfooter { margin-top: 100px; padding: 20px 0 80px 0; }
.footer-izbornik { float: left; width: 100%; }
.footer-izbornik ul { float: left; width: 100%; margin-top: 70px; margin-bottom: 70px; padding: 0; border-top:2px dashed #ef9c2e; border-bottom: 2px dashed #ef9c2e; padding:20px 0; }
.footer-izbornik ul li { display: inline-block; padding: 0 10px; list-style: none; }
.footer-izbornik ul li::after { content: "/"; position: relative; top: 1px; bottom: 1px; right: -10px; width: 5px; color: #ef9c2e; }
.footer-izbornik ul li:last-child::after { display:none; }
.footer-izbornik ul li a { color: #00587a; font-size: 14px; font-weight: 500; position: relative;  text-transform: uppercase; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.footer-izbornik ul li a:hover:before { opacity: 1; visibility: visible; width: 100%; left: 0; }
.footer-izbornik ul li a:hover { color: #ef9c2e; }
.copyright { float: left; width: 100%; text-align:center; }
.copyright p { color: #00587a; font-weight: 600; margin-bottom: 0; }
.copyright p small { padding-top:30px; display:inline-block; }
.copyright img { float: none;  text-align:center; }

/******************************************************
/// To Top
******************************************************/
#back-to-top { background: #ef9c2e; position: fixed; bottom: -40px; right: 20px; z-index: 1020; width: 40px; height: 40px; text-align: center; line-height: 30px; cursor: pointer; border: 0; border-radius: 50%; text-decoration: none; transition: opacity 0.2s ease-out; outline: none; opacity: 0; padding-top: 4px; }
#back-to-top:hover { color: #ffffff; background: #000; }
#back-to-top.show { bottom: 20px; opacity: 1; }
#back-to-top.hide { bottom: -40px; }
#back-to-top:before { font-family: "FontAwesome"; font-size: 32px; content: "\f106"; color: #ffffff; position: relative; }


/******************************************************
/// Popup
******************************************************/
.popup-frame { opacity: 0; padding: 30px; pointer-events: none; background-color: rgba(35, 31, 32, 0.9); width: 100%; height: 100vh; display: flex; z-index: 999999; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: 0.4s ease-in-out; }
.popup-frame .popup-body { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); transform: scale(0.8); opacity: 0; display: flex; position: relative; background-color: #ef9c2e; font-weight: 300; width: 100%; max-width: 680px; transition: 0.4s ease-in-out; transition-delay: 0s; overflow: hidden; border-radius:10px; }
.popup-frame .popup-body .close-popup { position: absolute; z-index: 999; top: 15px; right: 30px; font-size: 32px; transform: rotate(45deg); cursor: pointer; transition: 0.3s ease-in-out; }
.popup-frame .popup-body .close-popup:hover { transform: scale(1.1) rotate(45deg); }
.popup-frame.active-popup { display: flex; opacity: 1; pointer-events: all; }
.popup-frame.active-popup .popup-body { transform: scale(1); opacity: 1; transition-delay: 0.3s; }
.popup-content { width: 100%; align-items: center; display: flex; }
.popup-content .popup-text { padding: 30px; width: 100%; }
.content-frame { box-shadow: 0 0 0 2px #FFFFFF; padding: 30px; background-color: #F9FAFC; overflow: hidden; }
.content-frame .popup-content { position: relative; }
.content-frame .popup-content .popup-text { padding: 0; position: relative; z-index: 1; }
.popup-text .info { background: transparent; border-radius: 0px; padding: 30px 0px; }
.popup-text .info p { padding: 10px 0px 10px 0; color:#000; font-weight: 700; }
.popup-text .info p span { display:block; font-weight: 400; }

/* mouse scroll icon close */
@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); transform: translateY(-15px); } }
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } }
.bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }

/******************************************************
/// Responsive
******************************************************/
@media only screen and (min-width: 1280px) {
	.container { min-width:1200px; }

}

@media(min-width:980px) and (max-width: 1199px) { 
	mainmenu li a:after { margin-left: 15px; }
	#mainmenu { font-size: 15px; }
	#mainmenu a { padding: 30px 15px;}
	.site-title h1 { font-size: 160px!important; letter-spacing: 22px; }
	.intro-text h3 { font-size: 36px; text-align: center; }
	.p-padding-custom { padding: 55px 55px; }
	.p-padding-custom p { font-size:18px; line-height:30px; }
}

@media only screen and (max-width: 992px) {
	.hidden-m { display:none; } 
	.mb-sm-30 { margin-bottom:30px; }
	header .header-col.mid { position:absolute; top:70px; width:100%; padding:0 0 0 0; }
	#menu-btn { display: block; background: #ef9c2e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
	#menu-btn:hover { background: #199b5e; }
	.sm-pt10 { padding-top: 10px; }
	.header-col-mid { position:absolute; top:90px; width:100%; padding:0 0 0 0; }
	header div#logo img { max-width: 70px; height: auto; }
	header div#logo { line-height:32px; top:-5px; }
	header { display: none; }
	header { display: block; position: inherit; margin: 0; padding: 0; margin-top: 0; height: auto; background: #111111; padding: 15px 0 15px 0; } 
	header.autoshow { height: auto; top: 0; }
	header.autoshow #mainmenu li a { background: none; }
	#subheader { padding: 150px 0; } 
	#subheader h1 { margin-top:0; }
	#subheader span { display: none; }
	#logo { vertical-align: middle; height: auto; } 
	nav { height:0; }
	#mainmenu { float: none; z-index: 200; width: 100%; margin: 0; padding: 0; }
	#mainmenu a { text-align: left; padding-left: 0; padding-top: 10px; padding-bottom: 10px; }
	#mainmenu a:hover { background: #000; }
	#mainmenu a:hover { background: #000; }
	#mainmenu li { border-bottom: solid 1px #eee; margin: 0; width: 100%; display: block; }
	#mainmenu li a:after { display: none; }
	#mainmenu li:last-child { margin-bottom: 30px; }
	#mainmenu li a { color: #eceff3; }
	header.header-mobile { overflow:hidden; position:relative; }
	header.header-mobile #mainmenu { float: none; z-index: 200; width: 100%; margin: 0; padding: 0; text-align:left; padding-right:30px; }
	header.header-mobile #mainmenu a { text-align: left; padding-top: 10px; padding-bottom: 10px; }
	header.header-mobile #mainmenu a:hover { background: none; }
	header.header-mobile #mainmenu li ul { display: block; position: inherit; margin: 0; width: 100%; }
	header.header-mobile #mainmenu li { border-bottom: solid 1px #eee;; margin: 0; width: 100%; display: block; }
	header.header-mobile #mainmenu li ul.mega ul { height: auto; }
	header.header-mobile #mainmenu li a:after { display: none; }
	header.header-mobile #mainmenu li:last-child { margin-bottom: 30px; }
	header.header-mobile #mainmenu li ul { border-top: none; top: auto; }
	header.header-mobile #mainmenu li ul a { width: 100%; background: none; border: none; }
	header.header-mobile #mainmenu li a { color: #888; }
	header.header-mobile #mainmenu li a:hover { color: #333; }
	header.header-mobile #mainmenu li li a:hover { color: #888; }
	.sm-hide,.md-hide { display: none; } 
	.site-title h1 { font-size: 140px!important; letter-spacing: 26px; }
	.intro-text h3 { font-size: 30px; text-align: center; }
}

@media only screen and (max-width: 767px) { header .container { min-width:100%; }
	.hidden-m { display:none; } 
	header div#logo img { max-width: 70px; height: auto; }
	.xs-hide { display: none; }
	.container { padding-left: 30px; padding-right: 30px; }
	h1.big, h1_big { font-size:8vw; line-height:10vw; }
	.site-title { display:block; padding:30px 0; position: relative; bottom:0; height:auto; text-align:center; } 
	.site-title h1 { font-size: 65px!important; letter-spacing: 10px; display:block; margin:0; text-align:center; position:relative; z-index:999; bottom:-70px; right:0%; margin-right:-50%; background: none; -webkit-background-clip: none; background-clip: none; animation: none; width:100%; }
	.site-title h1 span { font-size: 50px!important; color: #000; font-weight: 700; letter-spacing: 1px; display:block; margin:0; position:relative; z-index:99; bottom: 10px; right:0px;}
	.site-title h1.smaller { font-size: 110px!important; font-size: 110px!important; color: #000; font-weight: 700; letter-spacing: 6px; display:block; margin:0; position:absolute; z-index:99; bottom:58px; left:40px; }
	.intro-text h3 { font-size: 30px; text-align: center; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.hidden-m { display:none; } 
	header div#logo img { max-width: 70px; height: auto; }
	.container { padding-left: 30px; padding-right: 30px; }
	header div#logo img { max-width: 70px; height: auto; } 
	.site-title { display:block; padding:30px 0; position: relative; bottom:0; height:auto; text-align:center; } 
	.site-title h1 { font-size: 65px!important; letter-spacing: 10px; display:block; margin:0; text-align:center; position:relative; z-index:999; bottom:-70px; right:0%; margin-right:-50%; background: none;   -webkit-background-clip: none; background-clip: none; animation: none; width:100%;  }
	.site-title h1 span { font-size: 50px!important; color: #000; font-weight: 700; letter-spacing: 1px; display:block; margin:0; position:relative; z-index:99; bottom: 10px; right:0px;}
	.site-title h1.smaller { font-size: 110px!important; font-size: 110px!important; color: #000; font-weight: 700; letter-spacing: 6px; display:block; margin:0; position:absolute; z-index:99; bottom:58px; left:40px; }
	.intro-text h3 { font-size: 30px; text-align: center; }
}

@media only screen and (max-width: 480px) {
	.hidden-m { display:none; } 
	header div#logo img { max-width: 70px; height: auto; }
	.site-title { display:block; padding:30px 0; position: relative; bottom:0; height:auto; text-align:center; } 
	.site-title h1 { font-size: 65px!important; letter-spacing: 10px; display:block; margin:0; text-align:center; position:relative; z-index:999; bottom:-70px; right:0%; margin-right:-50%;
	background: none; -webkit-background-clip: none; background-clip: none; animation: none; width:100%;  }
	.site-title h1 span { font-family: "Jost"; font-size: 50px!important; color: #000; font-weight: 700; letter-spacing: 1px; display:block; margin:0; position:relative; z-index:99; bottom: 10px; right:0px;}
	.site-title h1.smaller { font-size: 110px!important; font-size: 110px!important; color: #000; font-weight: 700; letter-spacing: 6px; display:block; margin:0; position:absolute; z-index:99; bottom:58px; left:40px; }
	#topbar { padding: 0; }
	.topbar-left, .topbar-right { float: left; width: 100%; }
	.topbar-widget { font-size: 15px; color: #ef9c2e; display: inline-block; padding: 3px 11px; font-weight: 600; height: 40px; }
	.program-bg { padding: 40px 0; z-index:9; position:relative; border-bottom-left-radius: 0px; border-left: 0px solid #ef9c2e; } 
	.kontakt-page { padding-top: 100px; }
	.program_item .service__item:hover { border-radius:0px; -webkit-transform: rotate(0deg) scale(1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(0deg) scale(1); /* IE 9 */ transform: rotate(0deg) scale(1); /* Firefox 16+, IE 10+, Opera */ transition: 0.25s; */  } 
	a.btn-custom { left: 0; }
	.services__left { height: 400px; background-position: center center; }
	.intro-text h3 { font-size: 30px; text-align: center; }
	.p-padding-custom { padding: 50px; }
	.kontakt { margin-bottom: 50px; }
	.de-images img { margin-bottom: 20px; } 
	.di-text { position: relative; width: 100%; top: 0; left: 0; font-size:28px; }
	.di-text h1 { font-size: 15vw; margin: 0; }
	.di-small-2 { position: absolute; width: 50%; height: auto; }
	.footer-izbornik ul li { display: block; padding: 0 10px; list-style: none; }
	.footer-izbornik ul li::after { display:none; }
	.footer-izbornik ul li:last-child::after { display:none; }
}

/* section control */
@media only screen and (min-device-width: 768) and (max-device-width: 1024) and (orientation: portrait) {
	section { -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; background-attachment:scroll; }
}

@media only screen and (max-width: 992px) { 
	section { -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; background-attachment:scroll; }
}