/**
*
* LOADING ANIMATION
*
*/
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: absolute;
}

.loader {
    max-width: 15rem;
    width: 100%;
    height: auto;
    stroke-linecap: round;
}

circle {
    fill: none;
    stroke-width: 4.0;
    animation-name: preloader;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: 170px 170px;
    will-change: transform;
}
circle:nth-of-type(1) {
    stroke-dasharray: 550px;
    animation-delay: -0.15s;
}

circle:nth-of-type(2) {
    stroke-dasharray: 500px;
    animation-delay: -0.30s;
}

circle:nth-of-type(3) {
    stroke-dasharray: 450px;
    animation-delay: -0.45s;
}

circle:nth-of-type(4) {
    stroke-dasharray: 300px;
    animation-delay: -0.60s;
}
@keyframes preloader {
    50% {
        transform: rotate(360deg);
    }
}

@keyframes fall-down {
    0% {
        transform: translate3d(0, 0, 0px);
        /*animation-timing-function: ease-in;*/
    }
    50% {
        transform: translate3d(0, -50px, 0px);
    }
    100% {
        transform: translate3d(0, 5000px, 0px);
    }
}
.fall-down {
    animation: fall-down 1.5s 1;
}
@keyframes fall-left {
    0% {
        transform: translate3d(0, 0, 0px);
    }
    50% {
        transform: translate3d(50px, 0, 0px);
    }
    100% {
        transform: translate3d(-5000px, 0, 0px);
    }
}
.fall-left {
    animation: fall-left 1.5s 1;
}


body {
    font-family: 'Montserrat', sans-serif;
    width: 1080px !important;
    height: 1920px !important;
    overflow: hidden;
}

.content {
    display: none;
    position: relative;
}

/**
*
* LANG SELECTOR
*
*/
.lang-change {
    position: absolute;
    right: 30px;
    top: 20px;
    height: 200px;
    z-index: 1000;
}
.lang-change .lang {
    background: url(/assets/webpage/lang_flags_sprite.png) no-repeat 0 -66px;
    height: 65px;
    width: 65px;
    display: inline-block;
    margin: 0 6px 0 0;
}
.lang-change .lang.lang-hu {
    background-position: 0 -67px;
}
.lang-change .lang.lang-hu.active, .lang-change .lang.lang-hu:hover, .lang-change .lang.lang-hu:active {
    background-position: 0 0;
}
.lang-change .lang.lang-en {
    background-position: -70px -67px;
    animation-delay: 0.1s;
}
.lang-change .lang.lang-en.active, .lang-change .lang.lang-en:hover, .lang-change .lang.lang-en:active {
    background-position: -70px 0;
}
.lang-change .lang.lang-de {
    background-position: -138px -67px;
    animation-delay: 0.2s;
}
.lang-change .lang.lang-de.active, .lang-change .lang.lang-de:hover, .lang-change .lang.lang-de:active {
    background-position: -138px 0;
}

/**
*
* MAIN
*
*/
.main {
    color: #FFFFFF;
}
.main .bg {
    height: 638px;
    width: 100%;
    position: relative;
    margin: 0 0 2px 0;
}
.main .bg-purple {
    background: url(/assets/webpage/main/bg-purple.jpg?v=2) no-repeat 0 0;
}
.main .bg-blue {
    background: url(/assets/webpage/main/bg-blue.png) no-repeat 0 0;
    margin: -34px 0 2px 0;
    padding: 34px 0 0 0;
    height: 708px;
}
.main .bg-green {
    background: url(/assets/webpage/main/bg-green.jpg?v=2) no-repeat 0 0;
    margin: -34px 0 0 0;
}

.main .bg a {
    position: absolute;
    width: 332px;
    height: 332px;
    top: 154px;
    left: 375px;
    z-index: 10;
}
.main .bg-purple a {
    background: url(/assets/webpage/main/tovabb-purple.png);
}
.main .bg-purple a:hover, .main .bg-purple a:active {
    background: url(/assets/webpage/main/tovabb-purple-touch.png);
}
.main .bg-blue a {
    background: url(/assets/webpage/main/tovabb-blue.png);
    top: 187px;
    animation-delay: 0.1s;
}
.main .bg-blue a:hover, .main .bg-blue a:active {
    background: url(/assets/webpage/main/tovabb-blue-touch.png);
}
.main .bg-green a {
    animation-delay: 0.2s;
    background: url(/assets/webpage/main/tovabb-green.png);
}
.main .bg-green a:hover, .main .bg-green a:active {
    background: url(/assets/webpage/main/tovabb-green-touch.png);
}

.main .bg h2 {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 30px;
}

.main .bg-purple h2 {
    left: 908px;
    width: 343px;
}

.main .bg-blue h2 {
    text-align: right;
    left: 251px;
}

.main .bg-green h2 {
    left: 908px;
    width: 343px;
}

/**
*
* Innen pages
*
*/
.head {
    height: 390px;
}
.head a.back {
    width: 332px;
    height: 332px;
    display: block;
    position: absolute;
    top: 19px;
    left: 20px;
    z-index: 9;
}
.head .title-bar {
    position: absolute;
    width: 100%;
    height: 170px;
    top: 100px;
}
.head h1 {
    padding: 157px 0 0 367px;
    font-size: 44px;
    font-weight: bold;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    position: relative;
}
/**
*
* POSTCARD
*
*/
.postcard {
    background: url(/assets/webpage/postcard/bg-kepeslap.jpg?v=3);
    height: 1920px;
}
.postcard .head a.back {
    background: url(/assets/webpage/postcard/blue-back.png);
}
.postcard .head a.back:hover, .postcard .head a.back:active {
    background: url(/assets/webpage/postcard/blue-back-touch.png);
}

.postcard form {}
.postcard form .form-group {}
.postcard form .form-group label {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.2px;
    color: #0c486c;
}
.postcard form .form-group.postcard-group-template {
    position: relative;
}
.postcard form .form-group.postcard-group-template label {
    padding: 123px 50px 0px 84px;
    text-align: center;
    line-height: 35px;
}
.postcard form .form-group .postcard-templates {
    margin: 25px 5px 0 40px;
    position: relative;
}
.postcard form .form-group .postcard-templates div.postcard-template-wrapper {
    display: inline-block;
    position: relative;
    margin: 0 0 41px 0;
}

.postcard form .form-group .postcard-templates a.postcard-template {
    display: inline-block;
    margin: 0 17px 0 0;
}
.postcard form .form-group .postcard-templates a.postcard-template.active {
    border: 3px solid #FF0000;
}

.postcard form .form-group .postcard-templates a.postcard-template img {
    width: 480px;
    height: 281px;
}
.postcard form .form-group .postcard-templates a.postcard-template.active img {
    border-width: 7px;
    width: 476px;
    height: 278px;
}
.postcard form .form-group .postcard-templates div.postcard-template-wrapper img.icon-zoom {
    display: none !important;
    border: none;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: -42px;
    left: 98px;
}
.postcard form .form-group.postcard-group-addressee {
    padding: 0 39px 0 0;
    margin: 0 0 0 -36px;
}
.postcard form .form-group.postcard-group-addressee label {
    display: block;
}
.postcard form .form-group .form-row {
    padding: 25px 6px 0 46px;
}
.postcard form .form-group .form-row input {
    width: 480px;
    border-radius: 0;
    background: #FFF;
    color: #3f86a6;
    border: none;
    height: 57px;
    padding: 0 0 0 18px;
    font-weight: lighter;
    font-size: 14px;
    margin: 0 0 40px 0;
}
.postcard form .form-group .form-row input::placeholder {
    color: #3F86A6;
}
.postcard form .form-group .form-row input.error {
    background: #ffe0e0;
    border: 1px solid #ff0000;
    transition: background-color .30s ease-in-out,border-color .30s ease-in-out,box-shadow .30s ease-in-out;
}
.postcard form .form-group .form-row input#postcard_sender_name {
    width: 643px;
    margin: 0;
}

.postcard form .form-group.postcard-group-sender {
    margin: 263px 0 170px 0;
}
.postcard form .form-group.postcard-group-sender label {
    text-align: center;
    padding: 0;
    display: block;
}
.postcard form .form-group.postcard-group-sender .form-row {
    padding: 25px 45px 0 10px;
}
.postcard form .form-group.postcard-group-send-label {
}
.postcard form .form-group.postcard-group-send-label label {
    margin: 148px 0 0 406px;
}
.postcard form .custom-control.postcard-group-terms {
    padding: 16px 0 0 31px;
    height: 89px;
}
.postcard form .custom-control.postcard-group-terms input[type=checkbox] {
    position: absolute;
    left: 284px;
    top: 36px;
}
.postcard form .custom-control.postcard-group-terms label {
    padding: 5px 0 0 14px;
    font-size: 16px;
    text-align: left;
    line-height: 19px;
    font-weight: 300;
}
.postcard form .custom-control.postcard-group-terms label a {
    color: #0c486c;
    font-weight: bold;
}
.postcard form .custom-control.postcard-group-terms label a:hover, .postcard form .custom-control.postcard-group-terms label a:active {
    text-decoration: none;
}
.postcard form .custom-control.postcard-group-terms.custom-checkbox .custom-control-label::before {
    border-radius: 0;
    width: 23px;
    height: 23px;
}
.postcard form .custom-control.postcard-group-terms.custom-checkbox .custom-control-label::after {
    width: 23px;
    height: 23px;
}
.postcard form button.postcard-send {
    margin: 6px 0 0 30px;
    width: 426px;
    border-radius: 9px;
    height: 80px;
    background-color: #0c486c;
    font-size: 31px;
    font-weight: bold;
    line-height: 80px;
    padding: 0;
    border: none;
}

.postcard form button.postcard-send .icon {
    background: #062131 url(/assets/webpage/postcard/icon-send.png) 50% 50% no-repeat;
    width: 79px;
    height: 79px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    float: left;
}

.postcard form .form_error {
    display: none;
    margin: 0 0 0 0;
    padding: 5px;
    color: #ffffff;
    background: #ff0000;
    text-align: center;
    font-weight: bold;
    width: 480px;
    position: absolute;
}
.postcard form .form_error.template_error {
    top: 90px;
    left: 55px;
}
.postcard form .form_error.addressee_error {
    top: 90px;
    left: 20px;
}
.postcard form .form_error.sender_error {
    top: 651px;
    left: 20px;
}
.postcard form .form_error.checkbox_error {
    top: -30px;
    left: 62px;
}

.postcard form .custom-control.postcard-group-terms.custom-checkbox.error .custom-control-label::before {
    background: #ffe0e0;
    border: 1px solid #ff0000;
    transition: background-color .30s ease-in-out,border-color .30s ease-in-out,box-shadow .30s ease-in-out;
}

.postcard form .form_error.checkbox_error {
    margin: 10px 0 0 -57px;
}

/**
*
* VIRTUAL TOUR
*
*/
.tour {
    background: #9365b8;
    height: 1920px;
}
.tour .title-bar {
    background-color: #765193;
}

.tour .head a.back {
    background: url(/assets/webpage/tour/purple-back.png);
}

.tour .head a.back:hover {
    background: url(/assets/webpage/tour/purple-back-touch.png);
}

.tour #virtual_tour {
    border: none;
    width: 100%;
    height: 1650px;
    margin: -120px 0 0 0;
}

.ui-pnotify-icon span {
    margin-top: 5px;
}

#postcard-preview, #postcard-preview-preview {
    width: 766px;
    height: 600px;
}

/**
*
* INFORMATIONS
*
*/
.info {
    background: #4fa787;
    height: 1920px;
}

.info .title-bar {
    background-color: #3f866c;
}

.info .head a.back {
    background: url(/assets/webpage/info/green-back.png);
}

.info .head a.back:hover {
    background: url(/assets/webpage/info/green-back-touch.png);
}

.info #informations {
    border: none;
    width: 100%;
    height: 1650px;
    margin: -120px 0 0 0;
}