/*------------------------------------*\
    BASE
\*------------------------------------*/

iframe {
    max-width: 100%;
}

html {
    overflow-x: hidden;
    width: 100%;
}

/*------------------------------------*\
    SITE IDENTITY
\*------------------------------------*/

.CL-site-identity {
    max-width: 100%;
}

/*------------------------------------*\
    IMAGE & SLIDER
\*------------------------------------*/

.CL-image-slider,
.CL-box-content-image,
.CL-article-image-item,
.CL-gallery-single-image-wrapper,
.CL-gallery-single-image-wrapper .CL-gallery-image {
    height: auto !important;
}

.CL-gallery-single-image-wrapper {
    max-width: 100%;
}

.CL-image-slider img {
    max-width: 100%;
}

.CL-article-image-item,
.CL-portlet-image .CL-image-slider img {
    max-width: 100%;
}

/*------------------------------------*\
    CALENDAR
\*------------------------------------*/

.CL-calendar-container {
    max-width: 100%;
    min-width: inherit;
}

/*------------------------------------*\
    CONTACT & BOOKING
\*------------------------------------*/

.CL-contact-form,
.CL-booking-form,
.CL-contact-form input,
.CL-booking-form input,
.CL-contact-form textarea,
.CL-booking-form textarea {
    max-width: 100%;
}

.CL-contact-form,
.CL-booking-form {
    width: 100% !important;
}

/*------------------------------------*\
    SEARCH RESULT
\*------------------------------------*/

.CL-search-result-item,
.CL-search-result-item a {
    width: auto;
    height: auto;
}

.CL-search-result-group {
    max-width: 100%;
}


/* Small devices (phones, smaller than 768px) */
@media (max-width: 767px) {

    /* site identity */
    .CL-site-identity {
        max-width: 100%;
        text-align: center;
    }

    .langwidth {
        width: 100%;
        text-align: center;
        padding: 0px !important
    }

    .langstyle {
    margin-left: -15px;
    margin-right: -15px;
    }
    /*   
    .CL-site-identity {
        width: 100% !important;
        height: auto !important;
    }
    */

    .CL-site-identity .CL-template-image,
    .CL-site-identity .CL-site-name,
    .CL-site-identity .CL-site-subtitle {
        position: static;
        text-align: center;
    }

    /*   
    .CL-site-identity .CL-template-image {
        padding-top: 10px;
    }

    .CL-site-identity .CL-site-name {
        padding: 15px 0;
    }
    .CL-site-identity .CL-site-subtitle {
        padding-bottom: 10px;
    }
    */


    /* article & box */
    .CL-article-block-group .CL-article-column {
        width: 100% !important;
    }

    .CL-article-image-item {
        margin: 0 auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .CL-article-block .CL-box-container {
        padding-left: 0;
        padding-right: 0;
    }

    .CL-box-container {
        padding: 0;
    }

    .CL-box-content-image-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }

    .CL-box-content-image-wrapper img {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* slider */
    /*   
    .theme-dark .nivo-directionNav,
    .theme-dark .nivo-controlNav {
        display: none;
    }

    .theme-dark .nivo-directionNav a {
        display: none;
    }
    .theme-dark .nivo-controlNav {
        text-align: center;
        padding-left: 0;
    }
    */

    /* video */
    .CL-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0 !important;
        width: 100% !important;
    }
    .CL-video-container object,
    .CL-video-container embed,
    .CL-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* forms */
    .CL-contact-form .CL-contact-form-item,
    .CL-booking-form .CL-contact-form-item {
        width: 100%;
    }

    .CL-form-item.CL-contact-form-item .text-input-required,
    .CL-form-item.CL-contact-form-item .text-input,
    .CL-booking-form.CL-contact-form-item .text-input-required,
    .CL-booking-form.CL-contact-form-item .text-input {
        width: 100% !important;
        float: none !important;
    }

    .CL-form-item.CL-contact-form-item textarea,
    .CL-form-item.CL-contact-form-item select {
        width: 100% !important;
    }

    /* gallery */

    .CL-gallery-wrapper {
        text-align: center;
    }

    .CL-gallery-single-image-wrapper {
        margin-left: 0;
        margin-right: 0;
        float: none;
        display: inline-block;
    }

    .CL-gallery-single-image-wrapper {
        max-width: 100%;
        /*        width: 100% !important;*/
    }

    /* calendar */
    .CL-calendar-container {
        max-width: 100%;
        width: 100% !important;
    }

    /* search */
    .CL-search-result-text {
        width:100% !important;
        margin-bottom: 5px !important;
        margin-right: 0 !important;
    }

    /*   
    .CL-search-result-toolbar .CL-search-result-scope {
        width: 40%!important;
        margin-left: 0;
    }
    */


    /* footer */
    .copyright {
        text-align: center;
    }

        #boxed-wrap {
        width: auto;
    }

    .CL-article-block-group .CL-article-column {
        width: 100% !important;
    }

    .logo {
        max-width: 100%;
    }
    .CL-site-identity {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
    }

    .CL-site-identity .CL-template-image,
    .CL-site-identity .CL-site-name,
    .CL-site-identity .CL-site-subtitle {
        position: static;
        text-align: center;
    }
    
    .CL-site-identity .CL-template-image {
        padding-top: 10px;
    }

    .CL-site-identity .CL-site-name {
        padding: 15px 0;
    }
    .CL-site-identity .CL-site-subtitle {
        padding-bottom: 10px;
    }

    .theme-dark .nivo-directionNav,
    .theme-dark .nivo-controlNav {
        display: none;
    }

    .CL-site-name {
        text-align: center;
    }

    .CL-contact-form .CL-contact-form-item,
    .CL-booking-form .CL-contact-form-item {
        width: 100%;
    }

    .CL-form-item.CL-contact-form-item .text-input-required, .CL-form-item.CL-contact-form-item .text-input,
    .CL-booking-form.CL-contact-form-item .text-input-required, .CL-booking-form.CL-contact-form-item .text-input {
        width: 100% !important;
        float: none !important;
    }

    .CL-form-item.CL-contact-form-item textarea,
    .CL-form-item.CL-contact-form-item select {
        width: 100% !important;
    }

    .CL-video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0 !important;
    }
    .CL-video-container object,
    .CL-video-container embed,
    .CL-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .CL-gallery-wrapper {
        text-align: center;
    }

    .CL-gallery-single-image-wrapper {
        margin-left: 0;
        margin-right: 0;
        float: none;
        display: inline-block;
    }

    .CL-image-slider {
        text-align: center;
    }
    
    .CL-article-block .CL-box-container {
        padding: 10px 0;
    }
    #layout_single .CL-article-block-group .CL-box-container .CL-box-content-image-wrapper {
        width: 100% !important;
        margin: 0;
        float: none;
        text-align: center;
        max-width: 100% !important;
    }
    #layout_single .CL-article-block-group .CL-box-container .CL-box-content-image-wrapper img {
        float: none;
        margin: 0 auto;
    }

    #layout_single .CL-article-block-group .CL-box-container .CL-box-text-content {
        margin: 0;
    }

    .footer.CL-video-container {
        margin: 0 auto;
    }

    div#footer-copyright,
    #boxed-wrap #header .containerHeader {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ui-datepicker {
        width: 20em;
    }

    .toggle-nav {
        display: inline-block;
        float: right;
        outline: 0;
        position: relative;
        padding: 10px;
        border: 2px solid #EEE;
        border-radius: 2px;
        text-decoration: none;
        color: #EEEEEE;
        text-decoration:none;
        transition: background-color linear 0.15s;
        text-align: right;
        font-size: 32px;
        margin-bottom: 10px;
    }

    .toggle-nav:hover,
    .toggle-nav.toggle-nav--active {
        background-color: #fff;
        color: #1E2531;
        text-decoration: none;
    }

    .toggle-nav.toggle-nav--active {

    }
    #header-menu nav.navigation {
        display: none;
        margin-bottom: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    #header-menu nav.main-nav--active {
        display: block;
    }

    /* header-menu */
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu  li:first-child:before {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header .navigation .CL-portlet-menu ul li.CL-parent-menu li.CL-parent-menu li:before {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header .navigation .CL-portlet-menu ul li:last-child li:first-child:before,
    #header .navigation .CL-portlet-menu ul li:nth-last-child(2) li:first-child:before {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }

    #header .navigation .CL-portlet-menu ul li:last-child li.CL-parent-menu li:before,
    #header .navigation .CL-portlet-menu ul li:nth-last-child(2) li.CL-parent-menu li:before {
        display: none;
    }
    #header .navigation .CL-portlet-menu ul li:last-child li.CL-parent-menu li:after,
    #header .navigation .CL-portlet-menu ul li:nth-last-child(2) li.CL-parent-menu li:after {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu ul > li {
        display: block;
        position: static;
        margin-right: 0;
    }
    #header-menu .navigation .CL-portlet-menu ul li > a {
        padding: 0 25px;
        display: block;
        border-bottom: 0;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    #header-menu .navigation ul.CL-command-options a.CL-command-option-item {

    }
    #header-menu .navigation .CL-portlet-menu ul li a span {

    }
    #header-menu .navigation .CL-portlet-menu ul ul li > a span {

    }

    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul {
        display: block;
        text-align: left;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #header-menu .CL-portlet-menu ul li.CL-parent ul li.CL-parent-menu ul {
        display: block;
    }
    #header-menu a:hover {

    }
    #header-menu nav.navigation {
        float: none;
    }

    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu a:after {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li.CL-parent-menu a:after {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li a:after {
        content: "";
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li.CL-parent-menu li a:after {
        content: "";
    }

    /*sub-menu 1*/
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul {
        position: static;
        top: auto;
        left: auto;
        z-index: 1000;
        display: block;
        float: none;
        min-width: inherit;
        padding: 0;
        margin: 2px 0 0;
        font-size: 14px;
        list-style: none;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul:before/*omogucava hover*/ {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu ul > li.CL-parent-menu ul {
        margin-top: 0;
        border-radius: 0;
        margin-right: 0;
        left: auto;
        right: auto;
        width: auto;
    }

    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li {
        display: block;
        float: none;
        width: auto;
        margin: 0;
        height: auto;
        overflow: visible;
        margin-bottom: 1px;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li:first-child a:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        height: auto;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li:last-child a:last-child,
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li:last-child a:first-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li:last-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul > li > a {
        display: block;
        font-weight: normal;
        line-height: 36px;
        padding: 0px 35px;
        font-size: 90%;
        white-space: nowrap;
        height: 36px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul {
        left: auto;
        right: 0;
        margin-right: 0;
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul li.CL-parent-menu a:after,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul li.CL-parent-menu a:after {
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul li.CL-parent-menu a:before,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul li.CL-parent-menu a:before {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul li.CL-parent-menu li a:before,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul li.CL-parent-menu li a:before {
        display: none;
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul li.CL-parent-menu ul,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul li.CL-parent-menu ul {
        left: auto !important;
        right: 100%;
        margin-right: 14px;
    }
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:last-child ul li.CL-parent-menu ul:before,
    #header-menu .navigation .CL-portlet-menu .CL-box-main ul li:nth-last-child(2) ul li.CL-parent-menu ul:before {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }

    /* otvaranje submenija na hover*/
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu:hover > ul {
        display: block;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu:hover ul ul {
        display: block
    }
    /*end sub-menu 1*/
    /* sub-sub menu*/
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu li.CL-parent-menu li > a {
        padding: 0px 45px;
        font-size: 80%;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li.CL-parent-menu > ul {
        border: 0;
        border-radius: 0;
        width: auto;
        position: static;
        top: auto;
        left: auto;
        z-index: 1000;
        display: block;
        min-width: 160px;
        margin-left: 0;
        text-align: left;
    }
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li.CL-parent-menu:hover > ul {
        display: block
    }
    #header-menu .navigation .CL-portlet-menu ul ul li.CL-parent-menu ul:before/*omogucava hover*/ {
        border: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        position: static;
        display: none;
    }
    /* end sub-sub menu */
    /* header menu end*/
    #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li.CL-parent-menu>ul {
        background: none !important;
    }

    #header-menu .navigation .CL-portlet-menu ul > li.CL-parent-menu ul {
        border: 0 !important;
        background: none !important;
    }

    #containerColumn .CL-portlet-menu .CL-box-main-content ul li > a {
        width: 100%;
    }

    #header-menu .navigation .CL-portlet-menu ul > li.CL-parent-menu ul, #header-menu .navigation .CL-portlet-menu ul li.CL-parent-menu ul li.CL-parent-menu > ul {
    border: 1px solid rgba(100, 100, 100, 0.8);
    -webkit-box-shadow: 0 0 2px 0 #000000;
    box-shadow: 0 0 0px 0 #000000;
    width: 100% !important;
}

.CL-menu-level-1 li,
.CL-menu-level-1 li a {
    min-height: 30px !important;
    line-height: 30px !important;
    width: 100% !important;
    border-bottom: 0px solid rgba(255, 255, 255, 0.3)
}

.CL-menu-level-2 li,
.CL-menu-level-2 li a {
    min-height: 30px !important;
    line-height: 30px !important;
    width: 100% !important;
    border-bottom: 0px solid rgba(255, 255, 255, 0.3)
}

}

@media (max-width: 960px) {
    #header .CL-custom-html {
    text-align: center;
    }

    .CL-follow-us--horizontal li {
    display: inline-block;
    margin: 5px 10px 0 0;
}

#footer .CL-portlet-menu {
    border-right: 0px solid #6e6e6e !important;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #boxed-wrap {
        width: 640px;
    }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #boxed-wrap {
        width: 960px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1300px) {
    #boxed-wrap {
        width: 1230px;
    }

    .marg1 {
    margin-left: 25px;
}
}

.box {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.box .CL-box-content-image-wrapper .CL-box-content-image-right img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.box .overbox {
    height: 100%;
  overflow: hidden;
  background-color: #1e2531;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  overflow: hidden;
}

.box:hover .overbox { opacity: 1; }

.box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.box .title {
  font-size: 2.5em;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
}

.box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.box .tagline {
  font-size: 0.8em;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
  padding: 15px;
}

.hoverimg .CL-box-text-content {
    font-size: 13px;
    font-weight: 300;
}

.hoverimg h3.CL-box-title {
    text-align: center;
    margin-top: 15px;
    color: #FFF !important;
}

.box:hover .tagline,
.box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}

.hoverimg .CL-box-content-image-right,
.hoverimg .CL-box-content-image-left {
    margin: 0px;
    padding: 0px;
}

.CL-text-image-wrapper.CL-text-image-left .CL-article-image-item, .CL-box-content-image-wrapper.CL-box-content-image-left .CL-box-content-image {
    padding:0;
    margin:0;
}

.CL-gallery-image img:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (min-width: 1367px) {
    .slider-wrap {
        max-width: 1230px;
        margin:0 auto;
    }
}