/* ===========================================================
 * Filename: custom.css
 * Version: 0.1
 * Project:	radio-rab.hr
 * Author: web360
 * =========================================================== */

header { width: 100%; height: 700px; position: relative;}
header .slider { height: 100%;}
header .slider .bxslider { height: 100%; z-index: 555;}
header .slider .bxslider li { min-height: 700px; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;}
.buttonHeader { z-index: 9999; position: absolute; top: -30px; left: -30px; width: 60px; height: 60px; border-radius: 50%; background-color: #FACC04; display: table; }
.buttonHeader i { display: table-cell; vertical-align: middle; text-align: center; font-size: 4em; font-weight: normal; color: #000;}
.topNav { position: absolute; top: 0; right: 0; z-index: 999999; display: table; table-layout: fixed;}
.topNav ul { list-style: none;}
.topNav ul li { width: 120px; display: table-cell; text-align: center; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(left, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ padding: 15px 20px; -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;}
.topNav ul li:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
background: #eeeeee; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.topNav ul li a { text-align: center; display: block;}
.topNav ul li a span { font-size: 2em; color: #333333; display: block; padding-top: 10px; }


.categ-header { width: 100%; height: 300px; position: relative;}
.categ-header .slider { height: 100%; margin-top: 10px;}
.categ-header .slider .bxslider { height: 100%;}
.categ-header .slider .bxslider li { min-height: 300px; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important;}

header .header-wrapper { position: absolute; top: 30px; left: 0; width: 100%; height: 80px; padding: 0px 0 30px 0; z-index: 9999; text-align: center;}
header .header-wrapper #logo { width: auto; display: block; margin: 0 auto;} 
header .header-wrapper #logo img { width: 200px;} 
header .header-wrapper #logo a { color: #000; font-size: 2em;}
header .header-wrapper nav { background-color: #F2F42E; margin-top: 20px; display: inline-block; padding: 0 100px; position: relative; -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 0 0 5px 3px rgba(0,0,0,0.7);
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.7); padding-top: 10px;}
header .header-wrapper nav ul li { display: inline-block; text-align: center; margin-right: 30px; transition: .5s all ease; font-size: 1.6em; font-weight: bold;}
header .header-wrapper nav ul li:last-child { margin-right: 0; }
header .header-wrapper nav ul li a { display: block; color: #000; transition: .5s all ease-in-out; padding: 5px 0 20px 0; border-top: 2px solid transparent;}
header .header-wrapper nav ul li:hover a { border-color: #000; }

header .header-wrapper nav ul li .active { border-color: #000;}

header .header-wrapper nav .menu-icon { display: none;}

.leftBg { position: absolute; left: 0px; top: 0; }
.leftBg img { height: 51px;}

.rightBg { position: absolute; right: 0px; top: 0; }
.rightBg img { height: 51px;}

.controlsNews span { position: absolute; top: 50%; margin-top: -25px; font-size: 5em; color: #fff; text-align: center; border-radius: 50%;  -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,0.7);
    -moz-box-shadow: 0 0 5px 3px rgba(0,0,0,0.7);
    box-shadow: 0 0 5px 3px rgba(0,0,0,0.7);}
.controlsNews span a { color: #000; display: block;}
.controlsNews #slider-prev { background-color: #F2F42E; padding: 10px; width: 50px; height: 50px; left: 3%; }
.controlsNews #slider-next { background-color: #F2F42E; padding: 10px; width: 50px; height: 50px; right: 3%; }

.caption { background-color: rgba(0,0,0,0.7); position: absolute; bottom: 150px; left: 10%; font-size: 3em; font-weight: bold; color: #fff; padding: 15px 20px; }

.arrowBounce { display: none; }

.content {  position: relative; padding: 50px 0;}
.content table { max-width: 100% !important; }
.content table td { border: 1px solid #5D606A; padding: 5px;}
.content h1 { margin-bottom: 40px !important; padding: 10px 20px; background-color: #A4521D; color: #fff; display: inline-block; margin: 0 auto; }
.overley { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); }
.content .container { position: relative; z-index: 99; }
.topGradient { background: linear-gradient(to bottom, rgba(5,5,0,1) 0%,rgba(0,0,0,0) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: 99;}

.emptyDiv { min-height: 400px; position: relative; }
.emptyDiv h2 { position: absolute; bottom: 150px; line-height: 1.2em; left: 10%; color: #fff; font-size: 5em; text-shadow: 2px 3px rgba(0,0,0,0.7); transition: .5s all ease-in-out;}
.emptyDiv:hover h2 { left: 50%; }
.plitvicka { background: url('../images/backgrounds/plitvicka.jpg') no-repeat center bottom; background-size: cover; position: relative; padding: 50px 0; }
.krka { background: url('../images/backgrounds/krka.jpg') no-repeat; background-size: cover; position: relative; padding: 50px 0; }
.transfers { background: url('../images/backgrounds/transferi.jpg') no-repeat; background-size: cover; position: relative; padding: 50px 0; }

.vehicles .car { background-color: #fff; padding: 10px; position: relative;}
.vehicles .car .imgContainer { width: 100%; overflow: hidden; }
.vehicles .car img { max-width: 100%; transition: .5s all ease-in-out; }
.vehicles .car:hover img { -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25); }
.vehicles .car .details { width: 60%; position: absolute; top: 200px; padding: 15px; left: 0; right: 0; margin: 0 auto; background-color: #fff; text-align: center;}
.vehicles .car .details h2 { font-size: 2em; padding-bottom: 10px; line-height: 1em;}
.vehicles .car .details p { padding-bottom: 0; font-size: 1.2em;}
.vehicles { background: url('../images/backgrounds/5.jpg') no-repeat; background-size: cover; position: relative; padding: 100px 0 180px 0;}
.vehicles .container { position: relative; z-index: 99; }
.vehicles .overley { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(239,255,58,0.7); }
.vehicles .title h2 { position: absolute; bottom: 50px; left: 0; z-index: 1; width: 100%; text-align: center; color: #fff; font-size: 5em; text-shadow: 2px 3px rgba(0,0,0,0.3);}

.contactUs { position: fixed; top: 100px; left: 0; z-index: 9999;}
.contactUs .contactForm { width: calc(400px - 60px); padding: 30px; background-color: #000; float: left; }
.contactUs .contactForm h2 { color: #fff; margin-bottom: 20px; }
.contactForm input { height: 30px; width: 90%; padding-left: 10px; border: 0;}
.contactForm select { height: 30px; width: 93%; padding-left: 10px; border: 0;}
.contactForm textarea { height: 100px; width: calc(90% - 10px); padding: 10px; border: 0; font-size: 14px;}
.contactForm input[type="submit"] { padding: 10px; background-color: #fff; color: #000; font-weight: bold; height: auto; width: calc(90% + 10px);}
.contactUs .contactButton { padding: 20px; background-color: #000; float: left; cursor: pointer;}
.contactUs .contactButton i { font-size: 3em; color: #fff;}

.contentContact { max-width: 400px; float: left; margin-right: 60px; }
.contentContact h2 { display: none;}
.contentContact input { height: 40px; width: 90%; padding-left: 10px; border: 1px solid #000;}
.contentContact select { height: 40px; width: 93%; padding-left: 10px; border: 1px solid #000;}
.contentContact textarea { height: 100px; width: calc(90% - 10px); padding: 10px; border: 1px solid #000; font-size: 14px;}
.contentContact input[type="submit"] { padding: 10px; background-color: #000; color: #fff; font-weight: bold; height: auto; width: calc(90% + 10px);}

#languages { position: absolute; top: -60px; right: 0; }

#home { padding: 30px 0; position: relative;}
#home h1 { padding: 40px 0; color: #00ADEF; font-size: 3em;}
#home article { padding: 20px; margin-bottom: 20px; transition: .5s all ease;}
#home article h1 { color: #034221; font-size: 2.2em; padding: 0; transition: .5s all ease;}
#home article p { transition: .5s all ease;}
#home article img { width: 150px; margin: 0 20px 20px 0; float: left;}

#news { padding: 50px 0;}
#news h1 { padding: 40px 0; color: #00ADEF; font-size: 3em;}
#news article { padding: 30px; color: #034221; transition: .5s all ease; border-bottom: 1px solid #DBDBDB;}
#news article:last-child {  border-bottom: none;}
#news article a { color: #034221; display: block;}
#news article h1 { color: #034221; font-size: 2em; padding: 0; transition: .5s all ease;}
#news article small { font-size: 1.3em; padding-left: 20px; margin: 10px 0 15px 0; display: block; color: #046D35; transition: .5s all ease;}
#news article p { transition: .5s all ease;}
#news article .img-container {  float: left; width: 200px; height: 150px; overflow: hidden; margin-right: 40px; border: 2px solid #999999; transition: .5s all ease;}
#news article .img-container .article-image { min-width: 200px; min-height: 150px; width: 300px;}

#news article:hover { background: #00ADEF; color: #fff;}
#news article:hover * { color: #fff;}
#news article:hover .img-container { border-color: #fff;}

#article { padding: 60px 0;}
#article article h1 { color: #00ADEF; font-size: 2.5em; padding: 0;}
#article article small { font-size: 1.3em; padding-left: 20px; margin: 10px 0 25px 0; display: block; color: #00ADEF;}
#article article .article-text { padding: 20px;}
#article article .article-text table td { border: 1px solid #BABABA; padding: 5px;}
#article article .article-text a { color: #00ADEF;}
#article article .article-text a:hover { color: #057EAA;}
#article article p { padding-bottom: 10px;}
#article article ul,ol { font-size: 1.6em; padding-bottom: 10px; padding-left: 40px;}
#article article li { padding-bottom: 10px;}
#article article ol li ul { font-size: 1em; padding-top: 10px; padding-bottom: 10px;}
#article article table { width: 100% !important;}

#article .allNews { border-left: 1px solid #ccc; padding-left: 20px; margin-bottom: 50px;}
#article .allNews h1 { color: #4C4C4C; margin-bottom: 20px;}
#article .allNews article { margin-bottom: 10px;}
#article .allNews article a h1 { font-size: 1.4em; color: #4C4C4C;}
#article .allNews article a:hover h1 { color: #034221;}

.article-category h3 { margin-top: 15px; margin-left: 20px; }
.article-category h3 a { color: #00A2E7;}
.article-category h3 a:hover { color: #20272A;}


.fotos { padding: 30px 0;}
.fotos h2 { color: #A4521D; padding-bottom: 30px;}
.fotos a { border: 3px solid #4C4C4C; display: inline-block; margin-right: 10px; margin-bottom: 5px; width: 150px; height: 100px; overflow: hidden; transition: .5s all ease-in-out;}
.fotos a:hover { border-color: #000;}

.documents { padding-top: 30px;}
.documents h2 { color: #00ADEF; padding-bottom: 30px;}
.documents .document { width: 200px; vertical-align: top;}
.documents .document img { float: left; padding-right: 10px;}
.documents .document { display: inline-block; margin-right: 15px;}
.documents .document a { display: block;}
.documents .document h1 { font-size: 1.6em; color: #4C4C4C; padding-bottom: 5px; transition: .5s all ease-in-out;}
.documents .document small { font-size: 1.2em; color: #034221;}
.documents .document a:hover h1 { color: #00ADEF;}

.taxiBottom { text-align: center; }

footer { background-color: #F0FF3A; color: #fff; padding: 20px 0; position: relative; text-align: center;}

footer .copyright a { color: #000; font-size: 1.6em;}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #000;
}
.fa-bounce {
    display: inline-block;
    position: relative;
    -moz-animation: bounce 1s infinite linear;
    -o-animation: bounce 1s infinite linear;
    -webkit-animation: bounce 1s infinite linear;
    animation: bounce 1s infinite linear;
}

@-webkit-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}

/* GDPR */

#gdprBox { position: fixed; bottom: 0; left: 0; z-index: 9999; width: 100%; padding: 20px; text-align: center; font-size: 15px; background: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.7); }
#gdprBox .links { display: block; }
#gdprBox .buttons { display: block; margin: 15px 0; }
#gdprBox .acceptAll { display: inline-block; background: #00a1e6; padding: 10px 15px; color: #fff; transition: .5s all ease-in-out; text-decoration: none; }
#gdprBox .acceptAll:hover { background: #074f6e; color: #fff; }
#gdprBox a { color: #000; text-decoration: underline; transition: .5s all ease-in-out; margin: 0 10px; }
#gdprBox a:hover { color: #777; }

#special-text { padding: 30px 0;}
#special-text h1 { padding: 20px 0; color: #000; font-size: 3em;}
#special-text h2 { padding: 20px 0; color: #000; font-size: 2em;}
#special-text { padding: 20px; margin-bottom: 20px; transition: .5s all ease;}
#special-text p { transition: .5s all ease;}
#special-text img { width: 150px; margin: 0 20px 20px 0; float: left;}

#privacyPolicy { padding: 30px 0;}
#privacyPolicy h1 { padding: 40px 0; color: #00ADEF; font-size: 3em;}
#privacyPolicy h2 { padding: 20px 0; color: #00ADEF; font-size: 2em;}
#privacyPolicy article { padding: 20px; margin-bottom: 20px; transition: .5s all ease;}
#privacyPolicy article h1 { color: #034221; font-size: 2.2em; padding: 0; transition: .5s all ease;}
#privacyPolicy article p { transition: .5s all ease;}
#privacyPolicy article ul { padding-left: 20px; font-size: 1.6em; line-height: 1.4em; }

.switch {position: relative; display: inline-block; width: 54px; height: 28px; }
.switch input {display:none;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before {position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider {background-color: #2196F3; }
input:focus + .slider {box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round {border-radius: 34px; }
.slider.round:before {border-radius: 50%; }