/*

    jquery.box.css.css 1.3
    basic styles thickbox need to run...

    author:     joachim.wendenburg@sixt.de

 */

    #box-window {
        position: fixed;
        left: 25%;
        top: 25%;
        width: 50%;
        height: 50%;
        margin: 0;

        background: #ffffff;
        z-index: 20100;
        border: 0px solid #ffffff;
        text-align: left;
        overflow: hidden;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #box-window.box-window-iframe {
        left: 20%;
        top: 20%;
        width: 60%;
        height: 60%;
    }

    #box-window.box-window-jalert {
        left: 35%;
        top: 25%;
        width: 30%;
        height: 50%;
    }

    #box-header,
    #box-image-header {
        height: 55px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border-bottom: 1px solid #ff7d19;
    }

    #box-image-header {
        background: none;
    }

    #box-back,
    #box-next,
    #box-close {
        width: 20px;
        height: 55px;
        float: right;
        margin: 0 2% 0 6px;
        padding: 0;
        cursor: pointer;
    }

    #box-back {
        background: transparent url(icons/jquerybox-back.png) no-repeat 50% 50%;
    }

    #box-next {
        background: transparent url(icons/jquerybox-next.png) no-repeat 50% 50%;
    }

    #box-close {
        background: transparent url(icons/jquerybox-close.png) no-repeat 50% 50%;
    }

    #box-back span,
    #box-next span,
    #box-close span {
        display: none;
    }

    #box-title {
        font: normal normal normal 18px Roboto, Arial, Verdana, "Liberation Sans", "Bitstream Vera", sans-serif;
        clear: none;
        margin: 0 0 0 0;
        padding: 16px 4% 0 4%;
        color: #000;
        font-weight: lighter;
        text-transform: uppercase;
    }

    #box-content {
        clear: both;
        height:100%;
        width: 100%;
        padding: 55px 0 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #box-content.box-window-gallery #box-content {
        padding: 55px 0 0 0;
    }

    #box-content.box-window-gallery #box-content.box-image-no-title {
        padding: 0;
    }

    #box-content > div {
        height: 100%;
        width: 100%;
        padding: 3% 4% 3% 4%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        overflow: auto;
    }

    #box-content > div#box-image-content {
        text-align: center;
        position: relative;
    }

    #box-window.box-window-iframe #box-content > div {
        -webkit-overflow-scrolling: touch !important;
    }

    #box-image-content img {
        border: 1px solid #333333;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        vertical-align: middle;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #box-image-content span {
        display: inline-block;
        width: 0;
        height: 100%;
        overflow: hidden;
        font-size: 0;
        vertical-align: middle;
    }

    #box-content #box-iframe {
        height: 100%;
        width: 100%;
        overflow: auto;
        margin: auto;
    }

    #box-image-title {

        background: #ffffff;
        filter: alpha(opacity=80);

        background: rgba(256, 256, 256, 0.6);
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        transition: left 1s ease-in-out;
    }

    #box-image-title p {
        padding: 15px 50px 15px 15px;
        min-height: 60px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #box-image-title.box-image-title-hidden {
        left: -100%;
    }

    #box-window #box-image-title span {
        border-color: transparent #ff6600 transparent transparent;
        border-style: solid;
        border-width: 30px;
        content: " ";
        cursor: pointer;
        height: 0;
        left: 100%;
        margin: -30px 0 0 -60px;
        position: absolute;
        top: 50%;
        width: 0;
    }

    #box-window #box-image-title.box-image-title-hidden span {
        border-color: transparent transparent transparent #ff6600;
        border-style: solid;
        border-width: 30px;
        margin: -30px 0 0;
    }

    #box-window #box-image-title span::after {
        color: #ffffff;
        content: "i";
        font-size: 22px;
        font-style: italic;
        font-weight: bold;
        left: 16px;
        position: absolute;
        top: -16px;
    }

    #box-window #box-image-title.box-image-title-hidden span::after {
        left: -25px;
    }

    /* ++++++++++++++++++++++++++++++++++++++
    // overlay and animated svg vor waiter
    ++++++++++++++++++++++++++++++++++++++ */
    #box-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 20000;
        overflow: hidden;
        text-align: center;
    }

    #box-overlay::before {
        content: ' ';
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }

    #box-overlay .loader-logo {
        width: 101px;
        height: 41px;
        display: inline-block;
        vertical-align: middle;
        margin: auto;
        background: transparent url('/static/frontendbase/corporate/svg/logo.svg') no-repeat 0 0;
    }

    #box-overlay * {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    #box-overlay .loader-circle {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
        margin-left: -80px;
        margin-top: -80px;
    }

    #box-overlay .loader-line-mask {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 80px;
        height: 160px;
        margin-left: -80px;
        margin-top: -80px;
        overflow: hidden;
        -webkit-transform-origin: 80px 80px;
        -moz-transform-origin: 80px 80px;
        -o-transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        transform-origin: 80px 80px;
        -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
        -webkit-animation: rotate 1.2s infinite linear;
        -moz-animation: rotate 1.2s infinite linear;
        -o-animation: rotate 1.2s infinite linear;
        animation: rotate 1.2s infinite linear;
    }

    #box-overlay .loader-line-mask .loader-line {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px #FF7D19;
    }

    .ie7 #box-overlay,
    .ie8 #box-overlay {
        background: none;
        filter: alpha(opacity=75);
    }

    /* stupids dont know svg */
    .ie7 #box-overlay *,
    .ie8 #box-overlay * {
        display: none;
    }

    /* display animation only if waiter */
    #box-overlay.box-overlay-content * {
        display: none;
    }

    .jalert-button-wrapper {
        overflow: hidden;
        padding: 6% 0 3% 0;
        text-align: right;
    }

    @media (max-width: 899px) {
        .jalert-button-wrapper {
            padding: 10% 0 5% 0;
        }
    }

    .jalert-button-gray {
        font: normal 13px Roboto,Verdana,Arial,Helvetica,Geneva,sans-serif;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        cursor: pointer;
        line-height: normal;
        padding: 8px 20px;
        font-weight: bold;
        background: #ff7d19;
        color: #ffffff;
        display: inline-block;
        min-width: 200px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .jalert-button-gray:hover {
        background: #fc903d;
    }

    /* ++++++++++++++++++++++++++++++++++++++
    // define box's size by window's size
    // set box sizes by percent
    ++++++++++++++++++++++++++++++++++++++ */
    @media (max-width: 1200px) {
        #box-window {
            left: 15%;
            width: 70%;
        }
        #box-window.box-window-iframe {
            left: 15%;
            width: 70%;
        }
        #box-window.box-window-jalert {
            left: 15%;
            width: 70%;
        }
    }

    @media (max-width: 899px) {
        #box-window {
            left: 5%;
            width: 90%;
        }
        #box-window.box-window-iframe {
            left: 5%;
            width: 90%;
        }
    }

    /* height */
    @media (max-height: 1200px) {
        #box-window {
            top: 15%;
            height: 70%;
        }
    }

    @media (max-height: 899px) {
        #box-window {
            top: 5%;
            height: 90%;
        }
        #box-window.box-window-iframe {
            top: 5%;
            height: 90%;
        }
        #box-window.box-window-jalert {
            top: 20%;
            height: 60%;
        }
    }

    @media (max-height: 499px) {
        #box-window.box-window-jalert {
            top: 5%;
            height: 90%;
        }
    }

    * + html #box-content {
        height: 80%;
    }

    * + html #box-content > div {
        height: 96%;
        width: 96%;
    }

    * + html #box-image-title p {
        color: #333333;
    }

    * + html #box-image-content img {
        border: none;
    }

    * + html #box-window {
        height: 70%;
        width: 60%;
        top: 15%;
        left: 20%;
    }








    @-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
    @-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
    @-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
    @keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);};}

    @-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}
    @-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}
    @-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}
    @keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);};}

    @-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;};}

    @-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}
    @keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;};}

    @-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;};}

    @-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}
    @keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;};}