.vote-box {
    display: flex;
    justify-content: center;
    position: relative;
}

.vote-box h3 {
    margin-top: -79px;
    padding: 14px;
    font-family: 'vidaloka-regular';
    z-index: 999;
    text-transform: uppercase;
    color: black;
    text-align: center;
    font-size: 19px;
    font-weight: 100;
    letter-spacing: 2px;
    position: relative;
}

.vote-box-bg {
    background: white;
    position: relative;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
}

.vote-link .bg {
    position: absolute;
    background: #e6e6e6;
    height: 100%;
    width: 0;
    left: 0;
    top: 0;
    transition: all .3s;
}

.vote-link:hover .bg {
    width: 100%;
}

/*
cookiebar
*/
#cookie-bar {background: rgba(0,0,0,0.6); height:auto; color:#fff; text-align:center; padding:3px 0;}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:5px auto; padding:0; width: 90%;}
#cookie-bar a{ font-size: 1em; padding: 0; margin: 0; display: inline; color: #86b1d1;}
#cookie-bar a[class^=cb] {color:#ffffff; display:inline-block;padding:6px; margin: 0 5px;}
#cookie-bar .cb-enable {background:#86b1d1;}
#cookie-bar .cb-enable:hover {background:#86b1d1;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#86b1d1;}
#cookie-bar .cb-policy:hover {background:#86b1d1;}


body{font-family: 'Oswald', sans-serif; color: #878787;}
a:hover, a:active, a:focus{text-decoration: none; outline: none;}

.logo-cont{text-align: center;}
#logo{margin-top: 15px;}
header{margin-bottom: 40px;}
.header-top{position: relative; z-index: 9;}
#slider{position: absolute; margin-top:-80px; width: 100%; overflow: hidden;}
.owl-carousel .owl-item .item{height: 533px; width: 100%;}

#main-content{margin-top:50px; z-index: 999; position: relative;}
h1{font-family: 'vidaloka-regular'; z-index: 999; text-transform: uppercase; color: #fff; text-align: center; font-size: 34pt; margin-top: 25px; margin-bottom: 116px; background: rgba(0,0,0,0.6); padding:30px 0;}
h1 small{display: block;font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 14pt; letter-spacing: 10px;}

#news-widget{ margin-top: 15px;}
#news-widget p{color: #878787; margin: 0px;text-transform: uppercase;}
#news-widget .top{font-size: 26pt; font-weight: 700; color: #ed008c;}
#news-widget .middle{font-size: 14pt; font-weight: 300; letter-spacing: 1px;}
#news-widget .bottom{font-size: 20pt; font-weight: 700;}

#lang-container{font-weight: 300; font-size: 14pt; text-align: right; margin-top: 60px; color: #a0a0a0;}
.lang{padding: 0px 15px; color: #a0a0a0; font-weight: 400;}
.lang.active{color: #a0a0a0; color: #ed008c;}
.lang:hover{color: #000;}

h2{font-weight: 400; margin: 0px; padding: 20px 0; text-align: center; color:#fff; text-transform: uppercase; position: relative; overflow: hidden;}
h2 .bg{position: absolute; height: 100%; width:0%; left:0px; top: 0px;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
/*h2 .bg:after {left: 100%; top: 50%;	border: solid transparent; content: " "; height: 0;	width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-width: 10px;	margin-top: -10px;}*/
h2 .title{position: relative;}
h2 img{position: relative;}

.box{display: block; float: left; margin-bottom: 40px; box-shadow: 6px 6px 0 rgba(0,0,0,0.1); position: relative; visibility: hidden;}
.box:hover h2 .bg{width: 100%;}
.box .cover{width:100%;}
.box .arrow{width:50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; background: rgba(180,200,27,0.7);; display: block;
    position: absolute; bottom: 15px; left: 50%; margin-left:-25px;-webkit-backface-visibility: hidden;
}
.box .arrow img{
    -moz-transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.top-box{width:23%; margin-right: 2.6%;}
.top-box:hover .arrow img{
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.top-box h2{letter-spacing: 4px;}
#box4{margin-right: 0px;}

.bottom-box{width:19%; margin-right: 1.2%;}
.bottom-box h2{text-align: left; padding-left: 15px;}
.bottom-box h2 img{position: absolute; right:10px; top:50%; margin-top:-10px;}
#box9{margin-right: 0px;}

#box1 h2{background: #b4c81b;}
#box1 h2 .bg{background: #9eb017;}
#box1 .arrow{background: rgba(180,200,27,0.7);}
/*#box1 h2 .bg:after{border-left-color: #9eb017;}*/

#box2 h2{background: #9f97d0;}
#box2 h2 .bg{background: #8880b3;}
#box2 .arrow{background: rgba(159,151,208,0.7);}
/*#box3 h2 .bg:after{border-left-color: #8880b3;}*/

#box3 h2{background: #86b1d1;}
#box3 h2 .bg{background: #7499b4;}
#box3 .arrow{background: rgba(134,177,209,0.7);}
/*#box4 h2 .bg:after{border-left-color: #7499b4;}*/

#box4 h2{background: #d44a02;}
#box4 h2 .bg{background: #ad3e04;}
#box4 .arrow{background: rgba(212,74,2,0.7);}
/*#box5 h2 .bg:after{border-left-color: #ad3e04;}*/

#box5 h2{background: #b52467;}
#box5 h2 .bg{background: #981c55;}
/*#box6 h2 .bg:after{border-left-color: #981c55;}*/

#box6 h2{background: #b3a8a2;}
#box6 h2 .bg{background: #9c918b;}
/*#box7 h2 .bg:after{border-left-color: #9c918b;}*/

#box7 h2{background: #ed008c;}
#box7 h2 .bg{background: #cc047a;}
/*#box8 h2 .bg:after{border-left-color: #cc047a;}*/

#box8 h2{background: #8ea50f;}
#box8 h2 .bg{background: #75880f;}
/*#box9 h2 .bg:after{border-left-color: #75880f;}*/

#box9 h2{background: #dda206;}
#box9 h2 .bg{background: #c59109;}
/*#box2 h2 .bg:after{border-left-color: #c59109;}*/


footer{padding: 20px 0; text-align: center; color: #878787; font-size: 12pt; font-weight: 300;}
#webstudio-logo .hover{display: none;}
#webstudio-logo:hover .hover{display: inline-block;}
#webstudio-logo:hover .simple{display: none;}

#impresszum-btn, #adatvedelem-btn{color:#878787; cursor: pointer;}
#impresszumModal, #adatvedelemModal{font-weight: 300; font-size: 14pt;}
#impresszumModal h3, #adatvedelemModal h3{font-weight: 300; text-align: center; font-size: 24pt;}
#impresszumModal .close, #adatvedelemModal .close{font-size: 50pt; margin-top: -20px;}
footer p{margin:0px;}


@media (max-width: 1400px) {
    #main-content{margin-top:0px;}
    h1{margin-bottom: 93px; margin-top: -10px;}
    .owl-carousel .owl-item .item{height: 400px; width: 100%;}
}

/*laptop*/
@media (max-width: 1199px) {
    h1{margin-bottom: 114px;margin-top: -30px;}
    h2{font-size: 12pt;}
}

/*tablet*/
@media (max-width: 991px) {
    h1{font-size: 30pt; margin-top: 0px;}
    h1 small{font-size: 12pt; letter-spacing: 8px;}
    .owl-carousel .owl-item .item{height: 400px;}
    .top-box{width: 217px;}
    #box1, #box3{margin-right:50px; margin-left: 120px;}
    #box2, #box4{margin-right:0px;}
    #bottom-boxs-container{margin-top:50px;}
    .bottom-box{width:31%; margin-right:3%; margin-bottom: 25px;}
    #box7{margin-right:0px;}
    #box8{margin-left:125px;}
}

/*mobil*/
@media (max-width: 767px) {
    #main-content{margin-top: -24px; text-align: center;}
    #logo{margin-top:0px;}
    #lang-container{margin-top: 30px;}
    #news-widget p{text-align: center;}
    h1{font-size: 16pt; margin-top:0px; padding: 15px;}
    h1 small{font-size: 10pt; letter-spacing: 3px;}
    #lang-container{text-align: center;}
    .box{width:100%; margin:15px auto !important; float: none;}
    .top-box{max-width:217px;}

    .vote-box h3{
        margin-bottom: 0;
    }
}
.top-left-corner {
    margin-top: 30px;
        position: absolute;
        }
        
        @media (max-width: 991px) {
           .top-left-corner{position: relative; margin-top: 0; margin-bottom: -15px;}
}