/*::::::::::::::::::::::::::::::::::::::::::::::.FONT DEKLARÁCIÓ.::::::::::::::::::::::::::::::::::::::::::::::*/

@font-face {
    font-family: MyLuckyPenny;
    src: url('../../template/style/MyLuckyPenny.ttf');
}

@font-face {

    font-family: MyLuckyPenny_Eot;
    src: url('../../template/style/MyLuckyPenny.eot');

}

@font-face {
    font-family: Corbel;
    src: url('../../template/style/corbel.ttf');
}

@font-face {
    font-family: Babiole;
    src: url('../../template/style/babie.ttf');
}

/*::::::::::::::::::::::::::::::::::::::::::::::.BODY.::::::::::::::::::::::::::::::::::::::::::::::*/

body {
    font-family: Verdana;
    margin: 0px;
    background-color: #b8c92e;

}

/*::::::::::::::::::::::::::::::::::::::::::::::.KIFUTÓK.::::::::::::::::::::::::::::::::::::::::::::::*/

#kifuto_bal {

    width: 50%;
    height: 920px;
    float: left;
    margin: 0px;
    padding: 0px;
    background-image: url('../../template/style/kifuto-bal.jpg');
    background-repeat: repeat-x;

}

#kifuto_jobb {

    width: 50%;
    height: 920px;
    float: right;
    margin: 0px;
    padding: 0px;
    background-image: url('../../template/style/kifuto-jobb.jpg');
    background-repeat: repeat-x;

}

.clear {

    clear: both;

}

/*::::::::::::::::::::::::::::::::::::::::::::::.TARTALOM.::::::::::::::::::::::::::::::::::::::::::::::*/

#body {

    width: 1200px;
    height: 920px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
    z-index: 20;

}

#background {

    position: absolute;
    left: 0px;
    top: 0px;

}

/*::::::::::::::::::::::::::::::::::::::::::::::.SZLOGEN.::::::::::::::::::::::::::::::::::::::::::::::*/

#slogan {

    font-family: Corbel;
    color: #3a547a;

}

.slogan_hu {

    font-size: 19.3pt;

    position: absolute;
    top: 156px;
    left: 439px;

}

.slogan_en {

    font-size: 19.3pt;

    position: absolute;
    top: 156px;
    left: 444px;

}

.slogan_de {

    font-size: 13.6pt;
    font-weight: bold;

    position: absolute;
    top: 160px;
    left: 415px;

}

/*::::::::::::::::::::::::::::::::::::::::::::::.SZÖVEGBUBORÉKOK.::::::::::::::::::::::::::::::::::::::::::::::*/

#in_water, #on_sand, #in_garden, #in_mountain {
    font-size: 17pt;
}

.bubble{
    background: #fff;
    -webkit-box-shadow:  0px 0px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:  0px 0px 5px rgba(0,0,0,0.4);
    box-shadow:  0px 0px 5px rgba(0,0,0,0.4);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.bubble.left{
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-left-radius: 0px;
}

.bubble.left a:before{
    z-index: 1;
    position: absolute;
    left: 5px;
    bottom: -21px;
    content: '▲';
    color: #fff;
    transform: rotate(206deg);
    width: 0;
    height: 0;
    font-size: 20px;
    -webkit-text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}
.bubble.left a:after{
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
    height: 5px;
    background: #fff;
    width: 14px;
    height: 10px;
}


.bubble.right{
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
}

.bubble.right a:before{
    z-index: 1;
    position: absolute;
    right: -13px;
    bottom: -13px;
    content: '▲';
    color: #fff;
    transform: rotate(154deg);
    width: 0;
    height: 0;
    font-size: 20px;
    -webkit-text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    -moz-text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    text-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}
.bubble.right a:after{
    content: '';
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    height: 5px;
    background: #fff;
    width: 14px;
    height: 10px;
}

#in_water a, #on_sand a, #in_garden a, #in_mountain a{
    display: block;
    cursor: pointer;
    line-height: 23pt;
    padding: 5px;
    position: relative;
    z-index: 3;
}

#in_water a:hover, #on_sand a:hover, #in_garden a:hover, #in_mountain a:hover {
    text-decoration: none;
}

#in_water {

    font-family: MyLuckyPenny;
    color: #493e0e;
    text-align: center;
    position: absolute;
    top: 352px;
    left: 50%;
    margin-left: -498px;
    transform: translateY(-100%);

}

#on_sand {
    font-family: MyLuckyPenny;
    color: #493e0e;
    text-align: center;
    position: absolute;
    top: 352px;
    left: 50%;
    margin-left: -80px;
    transform: translate(-100%, -100%);
}

#in_garden {
    font-family: MyLuckyPenny;
    color: #493e0e;
    text-align: center;
    position: absolute;
    top: 335px;
    left: 50%;
    margin-left: 360px;
    transform: translate(-100%, -100%);
}

#in_mountain {
    color: #40460e;
    font-family: MyLuckyPenny;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 222px;
    margin-left: -224px;
    transform: translate(-100%, -100%);
}

/*::::::::::::::::::::::::::::::::::::::::::::::.LINKEK.::::::::::::::::::::::::::::::::::::::::::::::*/

#zaszlo {
    font-family: MyLuckyPenny;
    color: #fff;
    font-weight: bold;
    text-align: center;
    left: 191px;
    position: absolute;
    top: 58px;
    min-height: 42px;
    width: 151px;
    line-height: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}
#zaszlo:hover {
    text-decoration: none;
}
#zaszlo span{
    transform: rotate(-7deg);
    display: block;
}

#rules {

    position: absolute;
    top: 830px;
    left: 640px;

}
#rules span{
    position: absolute;
    top: 13px;
    left: 47px;
    width: 40px;
    font-size: 9px;
    transform: rotate(37deg);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

#rules {
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;

    transform: rotate(0);
}
#rules:hover {
    transform: rotate(-26deg);
}

#honlapkeszites {

    color: #505147;
    font-size: 11px;
    position: absolute;
    top: 838px;
    left: 1006px;

}

#honlapkeszites:active, #honlapkeszites:hover {

    text-decoration: none;

}

#facebook {
    position: absolute;
    margin-top: -22px;
    font-size: 14px;
    color: #505147;
}

.facebook_hu {

    font-size: 11px;
    position: absolute;
    top: 859px;
    left: 753px;

}

.facebook_en {

    font-size: 11px;
    position: absolute;
    top: 859px;
    left: 770px;

}

.facebook_de {

    font-size: 8px;
    position: absolute;
    top: 863px;
    left: 763px;

}

#facebook:active, #facebook:hover {

    text-decoration: none;

}

/*::::::::::::::::::::::::::::::::::::::::::::::.COPYRIGHT.::::::::::::::::::::::::::::::::::::::::::::::*/

#copyright {

    font-family: Verdana;
    font-size: 7pt;
    color: #f0ff76;

}

.copyright_hu {

    position: absolute;
    top: 889px;
    left: 838px;

}

.copyright_en, .copyright_de {

    position: absolute;
    top: 889px;
    left: 944px;

}

.bubbled {
    color: #fff;
    display: block;
    padding: 5px 15px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    position: relative;
    white-space: nowrap;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a9e2+0,0088d5+100 */
    background: #00a9e2; /* Old browsers */
    background: -moz-linear-gradient(top, #00a9e2 0%, #0088d5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #00a9e2 0%,#0088d5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #00a9e2 0%,#0088d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9e2', endColorstr='#0088d5',GradientType=0 ); /* IE6-9 */
}

.bubbled:after{
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -12px;
    bottom: -12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12.5px 0 12.5px;
    border-color: #007bff transparent transparent transparent;
}

.bubbled:before{
    content: '';
    position: absolute;
    bottom: 0;
    height: 8px;
    width: 46%;
    left: 50%;
    margin-bottom: -20px;
    z-index: 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

.bubbled:hover{
    color: #fff;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff405f+0,f82346+100 */
    background: #ff405f; /* Old browsers */
    background: -moz-linear-gradient(top, #ff405f 0%, #f82346 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff405f 0%,#f82346 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff405f 0%,#f82346 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff405f', endColorstr='#f82346',GradientType=0 ); /* IE6-9 */
}

.bubbled:hover:after{
    border-color: #f82346 transparent transparent transparent;
}

.asztal{
    font-family: Verdana;
    color: #fff;
    font-size: 14pt;
}

.asztal a:hover{
    text-decoration: none;
}

.figura{
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

/*::::::::::::::::::::::::::::::::::::::::::::::.BAL ASZTAL.::::::::::::::::::::::::::::::::::::::::::::::*/

#bal_asztal {

    width: 350px;

    position: absolute;
    top: 420px;
    left: 170px;

}

#kezdolap{
    position: relative;
}

#kezdolap a {
    display: inline-block;
    position: absolute;
    left: 242px;
    top: 20px;
    z-index: 2;
    transform: translate(-50%, -100%);
}

#kezdolap .figura{
    width: 76px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-image: url('../../template/style/menu/kezdolap/figura.png');
    background-repeat: no-repeat;
    position: relative;
    margin-left: 73px;
}

#kezdolap a:hover + .figura{
    animation: kezdolap-figura ease 1.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: kezdolap-figura ease 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: kezdolap-figura ease 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: kezdolap-figura ease 1.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: kezdolap-figura ease 1.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
}

@keyframes kezdolap-figura{
    0% {
        transform:  translate(0px,0px)  ;
    }
    50% {
        transform:  translate(1px,-55px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes kezdolap-figura{
    0% {
        -moz-transform:  translate(0px,0px)  ;
    }
    50% {
        -moz-transform:  translate(1px,-55px)  ;
    }
    100% {
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes kezdolap-figura {
    0% {
        -webkit-transform:  translate(0px,0px)  ;
    }
    50% {
        -webkit-transform:  translate(1px,-55px)  ;
    }
    100% {
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes kezdolap-figura {
    0% {
        -o-transform:  translate(0px,0px)  ;
    }
    50% {
        -o-transform:  translate(1px,-55px)  ;
    }
    100% {
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes kezdolap-figura {
    0% {
        -ms-transform:  translate(0px,0px)  ;
    }
    50% {
        -ms-transform:  translate(1px,-55px)  ;
    }
    100% {
        -ms-transform:  translate(0px,0px)  ;
    }
}


#termekeink a {
    display: inline-block;
    position: absolute;
    left: 80px;
    top: 82px;
    transform: translate(-50%, -100%);
    z-index: 3;
}

#termekeink .figura {
    position: relative;
    top: -3px;
    left: 175px;
    z-index: 2;

    animation: termekeink-figura ease 0.75s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: termekeink-figura ease 0.75s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: termekeink-figura ease 0.75s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: termekeink-figura ease 0.75s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: termekeink-figura ease 0.75s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes termekeink-figura{
    0% {
        transform:  translate(-42px,0px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes termekeink-figura{
    0% {
        -moz-transform:  translate(-42px,0px)  ;
    }
    100% {
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes termekeink-figura {
    0% {
        -webkit-transform:  translate(-42px,0px)  ;
    }
    100% {
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes termekeink-figura {
    0% {
        -o-transform:  translate(-42px,0px)  ;
    }
    100% {
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes termekeink-figura {
    0% {
        -ms-transform:  translate(-42px,0px)  ;
    }
    100% {
        -ms-transform:  translate(0px,0px)  ;
    }
}

#termekeink a:hover + .figura{
    animation: termekeink-hover-figura ease 0.75s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: termekeink-hover-figura ease 0.75s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: termekeink-hover-figura ease 0.75s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: termekeink-hover-figura ease 0.75s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: termekeink-hover-figura ease 0.75s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes termekeink-hover-figura{
    0% {
        transform:  translate(0px,0px)  ;
    }
    100% {
        transform:  translate(-42px,0px)  ;
    }
}

@-moz-keyframes termekeink-hover-figura{
    0% {
        -moz-transform:  translate(0px,0px)  ;
    }
    100% {
        -moz-transform:  translate(-42px,0px)  ;
    }
}

@-webkit-keyframes termekeink-hover-figura {
    0% {
        -webkit-transform:  translate(0px,0px)  ;
    }
    100% {
        -webkit-transform:  translate(-42px,0px)  ;
    }
}

@-o-keyframes termekeink-hover-figura {
    0% {
        -o-transform:  translate(0px,0px)  ;
    }
    100% {
        -o-transform:  translate(-42px,0px)  ;
    }
}

@-ms-keyframes termekeink-hover-figura {
    0% {
        -ms-transform:  translate(0px,0px)  ;
    }
    100% {
        -ms-transform:  translate(-42px,0px)  ;
    }
}

#megrendeles{
    position: relative;
}

#megrendeles a {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 200px;
    z-index: 5;
    transform: translate(-50%, -100%);
}

#megrendeles .figura {

    width: 77px;
    height: 65px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-image: url('../../template/style/menu/megrendeles/figura.png');
    background-repeat: no-repeat;
    position: relative;
    z-index: 4;
    top: -25px;
    left: 64px;

}

#megrendeles a:hover + .figura {
    background-image: url('../../template/style/menu/megrendeles/figura_labda.png');
}

/*::::::::::::::::::::::::::::::::::::::::::::::.JOBB ASZTAL.::::::::::::::::::::::::::::::::::::::::::::::*/

#jobb_asztal {
    width: 400px;

    position: absolute;
    top: 420px;
    left: 700px;
}

#rolunk{
    position: relative;
}

#rolunk a {
    display: inline-block;
    position: absolute;
    left: 213px;
    top: 36px;
    z-index: 3;
    transform: translate(-50%, -100%);
}

#rolunk a + .figura{
    position: relative;
    top: 6px;
    left: 13px;
    z-index: 2;
}

#rolunk a + .figura + .figura{
    position: relative;
    top: -4px;
    left: 16px;
    z-index: 1;

    width: 40px;
    height: 8px;

    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;

    background: rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

#rolunk a:hover + .figura{
    animation: rolunk-figura ease 1.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: rolunk-figura ease 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: rolunk-figura ease 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: rolunk-figura ease 1.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: rolunk-figura ease 1.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
}

@keyframes rolunk-figura{
    0% {
        transform:  translate(0px,0px)  ;
    }
    50% {
        transform:  translate(1px,-55px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes rolunk-figura{
    0% {
        -moz-transform:  translate(0px,0px)  ;
    }
    50% {
        -moz-transform:  translate(1px,-55px)  ;
    }
    100% {
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes rolunk-figura {
    0% {
        -webkit-transform:  translate(0px,0px)  ;
    }
    50% {
        -webkit-transform:  translate(1px,-55px)  ;
    }
    100% {
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes rolunk-figura {
    0% {
        -o-transform:  translate(0px,0px)  ;
    }
    50% {
        -o-transform:  translate(1px,-55px)  ;
    }
    100% {
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes rolunk-figura {
    0% {
        -ms-transform:  translate(0px,0px)  ;
    }
    50% {
        -ms-transform:  translate(1px,-55px)  ;
    }
    100% {
        -ms-transform:  translate(0px,0px)  ;
    }
}


#galeria {
    width: 200px;
    float: left;
    position: relative;
}

#galeria a {
    position: absolute;
    display: inline-block;
    left: 68px;
    top: 32px;
    z-index: 3;
    max-width: 130px;
    white-space: normal;
    transform: translate(-50%, -100%);
}

#galeria a + .figura {
    width: 66px;
    height: 55px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-image: url(../../template/style/menu/galeria/figura.png);
    background-repeat: no-repeat;
    position: relative;
    top: 4px;
    left: 116px;
    z-index: 2;

}

#galeria a:hover + .figura {
    /*background-image: url('../../template/style/menu/galeria/figura_vaku.png');*/
}
#galeria a + .figura:before {
    content: '';
    position: absolute;
    top: -9px;
    right: 14px;
    width: 40px;
    height: 40px;
    pointer-events: none;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
#galeria a:hover + .figura:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


#hirek {
    width: 200px;
    float: right;
    position: relative;
}

#hirek a {
    display: inline-block;
    position: relative;
    left: 62px;
    top: 50px;
    z-index: 3;
    transform: translate(-50%, -100%);
}

#hirek a + .figura {

    width: 60px;
    height: 55px;
    margin: 0px;
    padding: 0px;
    float: left;
    background-image: url('../../template/style/menu/hirek/figura_jobb.png');
    background-repeat: no-repeat;
    position: relative;
    top: 1px;
    left: 31px;

}

#hirek a:hover + .figura{
    animation: hirek-figura ease 1.5s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    -webkit-animation: hirek-figura ease 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: hirek-figura ease 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: hirek-figura ease 1.5s;
    -o-animation-iteration-count: infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: hirek-figura ease 1.5s;
    -ms-animation-iteration-count: infinite;
    -ms-transform-origin: 50% 50%;
}

@keyframes hirek-figura{
    0% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        transform:  translate(0px,0px)  ;
    }
    50% {
        background-image: url('../../template/style/menu/hirek/figura_bal.png');
        transform:  translate(-31px,0px)  ;
    }
    100% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes hirek-figura{
    0% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -moz-transform:  translate(0px,0px)  ;
    }
    50% {
        background-image: url('../../template/style/menu/hirek/figura_bal.png');
        -moz-transform:  translate(-31px,0px)  ;
    }
    100% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes hirek-figura {
    0% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -webkit-transform:  translate(0px,0px)  ;
    }
    50% {
        background-image: url('../../template/style/menu/hirek/figura_bal.png');
        -webkit-transform:  translate(-31px,0px)  ;
    }
    100% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes hirek-figura {
    0% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -o-transform:  translate(0px,0px)  ;
    }
    50% {
        background-image: url('../../template/style/menu/hirek/figura_bal.png');
        -o-transform:  translate(-31px,0px)  ;
    }
    100% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes hirek-figura {
    0% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -ms-transform:  translate(0px,0px)  ;
    }
    50% {
        background-image: url('../../template/style/menu/hirek/figura_bal.png');
        -ms-transform:  translate(-31px,0px)  ;
    }
    100% {
        background-image: url('../../template/style/menu/hirek/figura_jobb.png');
        -ms-transform:  translate(0px,0px)  ;
    }
}

#linkek{
    position: relative;
}

#linkek a {
    display: inline-block;
    position: absolute;
    left: 155px;
    top: 30px;
    z-index: 5;
    transform: translate(-50%, -100%);
}

#linkek a + .figura {

    position: relative;
    top: -5px;
    left: 200px;
    z-index: 4;

    animation: linkek-figura ease 0.75s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: linkek-figura ease 0.75s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: linkek-figura ease 0.75s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: linkek-figura ease 0.75s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: linkek-figura ease 0.75s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes linkek-figura{
    0% {
        transform:  translate(43px,0px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

@-moz-keyframes linkek-figura{
    0% {
        -moz-transform:  translate(43px,0px)  ;
    }
    100% {
        -moz-transform:  translate(0px,0px)  ;
    }
}

@-webkit-keyframes linkek-figura {
    0% {
        -webkit-transform:  translate(43px,0px)  ;
    }
    100% {
        -webkit-transform:  translate(0px,0px)  ;
    }
}

@-o-keyframes linkek-figura {
    0% {
        -o-transform:  translate(43px,0px)  ;
    }
    100% {
        -o-transform:  translate(0px,0px)  ;
    }
}

@-ms-keyframes linkek-figura {
    0% {
        -ms-transform:  translate(43px,0px)  ;
    }
    100% {
        -ms-transform:  translate(0px,0px)  ;
    }
}

#linkek a:hover + .figura{
    animation: linkek-hover-figura ease 0.75s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: linkek-hover-figura ease 0.75s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
    -moz-animation: linkek-hover-figura ease 0.75s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -moz-animation-fill-mode:forwards; /*FF 5+*/
    -o-animation: linkek-hover-figura ease 0.75s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -o-animation-fill-mode:forwards; /*Not implemented yet*/
    -ms-animation: linkek-hover-figura ease 0.75s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes linkek-hover-figura{
    0% {
        transform:  translate(0px,0px)  ;
    }
    100% {
        transform:  translate(43px,0px)  ;
    }
}

@-moz-keyframes linkek-hover-figura{
    0% {
        -moz-transform:  translate(0px,0px)  ;
    }
    100% {
        -moz-transform:  translate(43px,0px)  ;
    }
}

@-webkit-keyframes linkek-hover-figura {
    0% {
        -webkit-transform:  translate(0px,0px)  ;
    }
    100% {
        -webkit-transform:  translate(43px,0px)  ;
    }
}

@-o-keyframes linkek-hover-figura {
    0% {
        -o-transform:  translate(0px,0px)  ;
    }
    100% {
        -o-transform:  translate(43px,0px)  ;
    }
}

@-ms-keyframes linkek-hover-figura {
    0% {
        -ms-transform:  translate(0px,0px)  ;
    }
    100% {
        -ms-transform:  translate(43px,0px)  ;
    }
}

#vote {
    background-color: #776d6e;
    border-radius: 20px;
    color: white;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 20px;
    width: 230px;
    font-family: Verdana;
    font-size: 14px;
}

#vote span.vote_text {
    font-family: MyLuckyPenny;
    font-size: 17px;
    line-height: 20px;
}

#vote .radio_1 {
    background: url("radio_1.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    cursor: pointer;
    display: inline-block;
    height: 20px;
    padding-left: 35px;
    margin-bottom: 4px;
}

#vote .radio_0 {
    background: url("radio_0.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    cursor: pointer;
    display: inline-block;
    min-height: 20px;
    padding-left: 35px;
    margin-bottom: 4px;
}

.vote {
    display: inline-block;
    width: 50px;
}

#vote_submit {
    background-color: #ff9500;
    border: medium none;
    border-radius: 20px;
    color: white;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 40px;
    margin: auto;
    text-align: center;
}

#vote-x {
    background: url("vote_x.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    cursor: pointer;
    height: 10px;
    left: 225px;
    position: relative;
    top: 0;
    width: 10px;
}

#news {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fed975+0,daa106+100 */
    background: url('news_back.png') no-repeat; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(254,217,117,1) 0%, rgba(218,161,6,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(254,217,117,1) 0%,rgba(218,161,6,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(254,217,117,1) 0%,rgba(218,161,6,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed975', endColorstr='#daa106',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    display: block;
    height: 536px;
    position: absolute;
    width: 536px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;

    -webkit-box-shadow:  0px 0px 10px rgba(0,0,0,0.5);
    -moz-box-shadow:  0px 0px 10px rgba(0,0,0,0.5);
    box-shadow:  0px 0px 10px rgba(0,0,0,0.5);

    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    z-index: 9999;
}

#news #news_content {
    height: 300px;
    margin: auto;
    position: relative;
    text-align: center;
    top: 120px;
    width: 425px;
    overflow: auto;
}

#news #news_content .header {
    font-family: Verdana;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 28px;
}

#news #news_close {
    bottom: -150px;
    cursor: pointer;
    position: relative;
    text-align: center;
    color:#352805;
    font-size: 14px;
    font-family: Verdana;
}


/* ------------------------------------------- */
/* Audio vezérlés - 2014.08.19. */
/* ------------------------------------------- */

.audio_controllers {
    position: absolute;
    left: 44px;
    bottom: 20px;

    padding: 10px 20px;

    background: #776D6E;
    opacity: .85;
    border-radius: .3em;

    min-height: 36px;
    min-width: 212px;

    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}

.audio_controllers:hover {
    cursor: pointer;
    opacity: 1;
}

.audio_controllers a {
    color: #fff!important;
    vertical-align: middle;
}

.audio_controllers a span {
    position: relative;
    top: -10px;
}

.audio_controllers a:hover {
    text-decoration: none;
}

.audio_controllers a[href^="#pause"] {
    display: none;
}

/* ------------------------------------------- */
/* Audio vezérlés VÉGE!!! */
/* ------------------------------------------- */