@keyframes dobozok{
    0%{
        transform: scale(0,0);
        /*transform: perspective(1000px) rotateY(0deg);*/
    }
    50%{
        transform: scale(1.3,1.3);
        /*transform: perspective(1000px) rotateY(0deg);*/
    }     
    100%{
        transform: scale(1,1);
        /*transform: perspective(1000px) rotateY(360deg);*/
    }
}

@keyframes container{
    0%{
        opacity:0;
        transform: perspective(500px) rotateZ(90deg) scale(0.0,0.0);
    }     
       
    100%{
        transform: perspective(500px) rotateZ(0deg) scale(1,1);
        opacity:1;
    }
}

.szm_main_full_container{
    overflow:hidden;    
    width:100%;    
}

.szm_main_container_animation{
    animation-name: container;
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.szm_main_container_noanimation{
    transform: perspective(500px) rotateZ(0deg) scale(1,1);
    animation-name: none;
    opacity:1 !important;
}

.szm_main_container{
    /*transform: perspective(500px) rotateY(90deg) scale(0.8,0.8);*/
    opacity:0;
    width:90%;
    padding-top:70px;
    padding-bottom:100px;
    margin:0 auto;        
    overflow-y:visible;
    height:auto;     
}

.szm_main_container h1{
    font-size:40px;
    font-weight:400;
    margin-top:10px;
}

.szm_main_container:after{
    clear:both;
    content:"";
    display:block;
}

.szm_doboz_kulso{
    width:20%;
    float:left;
}

.szm_doboz_belso{
    position: relative;    
    font-family: 'Lato', sans-serif;  
    width:80%;
    border:5px solid #EFEFEF;
    height:300px;
    margin:20px auto;
    padding:20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color:#FFFFFF;
    -webkit-box-shadow:  0px 0px 10px #AAAAAA;
    -moz-box-shadow:  0px 0px 10px #AAAAAA;
    box-shadow:  0px 0px 10px #AAAAAA; 
    
    /*animation-name: dobozok;
    animation-duration: 1s;
    animation-fill-mode: forwards;*/
}

.szm_doboz_belso h2{
    padding:0px;
    margin:0px;
    font-family: 'Lato', sans-serif;  
    font-weight:300;
    font-size:28px;
    color:#D97816;
}

.szamok_mutat_alul{
    position:absolute;
    bottom:0px;
    right:0px;
    width:100%;
    height:180px;
    padding:0px 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align:right;
}

.szamok_mutat_alul div{
    margin-bottom:10px;
    color:#579bb7;
}

.szamsor{
    font-size:20px;
}

.szamsor_kicsi{
    font-size: 20px;
}

.szamsor_kicsi span{
    font-size: 30px !important;
}

.szamok_mutat_alul span{
    font-size:40px;
    font-weight:500;
    color:#555555;
}

.figydoboz_container{
    position:absolute;
    z-index:9;
    width:100%;
    margin-top:0px;
}

.figydoboz_container:after{
    clear:both;
    display:block;
    content:"";    
}

.figy_doboz_kulso{
    width:20%;
    float:right;
    height:70px;
    overflow:visible;
}

.figy_doboz_belso{
    position: relative;    
    font-family: 'Lato', sans-serif;  
    width:80%;
    border:5px solid #EFEFEF;
    height:64px;
    margin:3px auto;
    padding:10px;
    font-size:26px;
    font-weight:300;
    text-align:center;
    color:#579bb7;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color:#FFFFFF;
    -webkit-box-shadow:  0px 0px 10px #AAAAAA;
    -moz-box-shadow:  0px 0px 10px #AAAAAA;
    box-shadow:  0px 0px 10px #AAAAAA;
    cursor:pointer;
    
}

.figy_doboz_belso:hover{
    background-color: #3b85a3;
    color:#FFFFFF;
}

.figy_doboz_kulso:hover .figy_doboz_legordulo{
    visibility: visible;
    min-height:60px;
    max-height:360px;
    height:auto;
    opacity:1;    
}

.figy_doboz_legordulo_container::-webkit-scrollbar {
    width: 3px;
}

/* Track */
.figy_doboz_legordulo_container::-webkit-scrollbar-track {
    background: #f7f7f7; 
}

/* Handle */
.figy_doboz_legordulo_container::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
.figy_doboz_legordulo_container::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


.figy_doboz_legordulo{
    z-index:9;
    visibility: hidden;
    height:0px;
    opacity:0;
    width:80%;
    margin:0 auto;
    margin-top:-5px;
    padding:20px;
    
    background-color:#FFFFFF;
    overflow:hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-shadow:  0px 0px 10px #AAAAAA;
    -moz-box-shadow:  0px 0px 10px #AAAAAA;
    box-shadow:  0px 0px 10px #AAAAAA; 
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.figy_doboz_legordulo_container{
    overflow:auto;
    height:auto;
    max-height:320px;
}

.figy_doboz_legordulo a{
    display:block;
    width:100%;
    font-weight:300;
    color:#222222;
    border-bottom:1px solid #EEEEEE;
    padding:10px;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor:pointer;
}

.figy_doboz_legordulo a:hover{
    background-color:#EEEEEE;
}

@keyframes pirosvillog{
    0%{
        background-color:#FF0000;
        color:#FFFFFF;
    }
    50%{
        background-color:#FFFFFF;
        color:#FF0000;
    }
    100%{
        background-color:#FF0000;
        color:#FFFFFF;
    }
}

.figyelmeztetes_piros{
    background-color:#FF0000;
    color:#FFFFFF;
    animation-name: pirosvillog;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-iteration-count: 5;
}

.figyelmeztetes_piros:hover{
    background-color:#CC0000 !important;
    color:#FFFFFF !important;
}

@keyframes megjelenes_also{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

.szm_main_container_also_animation_elso{
    animation-name: megjelenes_also;
    animation-duration: 1s;
    animation-delay: 2s;    
    animation-fill-mode: forwards;
}

.szm_main_container_also_animation_tobbi{
    animation-name: none;
    opacity:1 !important;
}

.szm_main_container_also{
    opacity:0;
    width:90%;
    padding-top:0px;
    padding-bottom:100px;    
    margin:0 auto;       
    margin-top:-60px;
    height:auto;     
}

.szm_main_container_also h1{
    font-size:40px;
    font-weight:400;
    margin-top:10px;
}

.statisztikai_adatok{
    
}

.statisztikai_adatok h2{
    
}

.ablakvalto_sor{
    margin-top:40px;
}

.ablakvalto_sor:after{
    clear:both;
    content:"";
    display:block;
}

.ablakvalto_sor a{
    display:block;
    float:left;
    background-color:#EEEEEE;
    border:1px solid #BBBBBB;    
    border-right:0px;
    padding:5px;
    min-width:130px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color:#3b85a3;
    cursor:pointer;
}


.ablakvalto_sor a:last-of-type{
    border-right:1px solid #CCCCCC;
}

.ablakvalto_sor a:hover{
    background-color:#3b85a3;
    color:#FFFFFF;
}

.ablakvalto_sor a:active{
    background-color:#3b85a3;
    color:#FFFFFF;
}

.aktivFulClass{
    background-color:#3b85a3 !important;
    color:#FFFFFF !important;
}

.fulAblak{
    display:none;
    border:1px solid #BBBBBB;
    background-color:#FFFFFF;
    padding:20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.aktivAblak{
    display:block;
}


.negyedeves_infok{
    
}

.negyedeves_infok:after{
    clear:both;
    content:"";
    display:block;
    
}

.negyedeves_infok div.oszlop{
    float:left;
}

.negyedeves_infok div.oszlop:first-of-type{
    width:35%;    
    font-family: 'Lato', sans-serif;  
    border:5px solid #EFEFEF;
    height:auto;    
    padding:20px;
    margin-right:5%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color:#FFFFFF;
    -webkit-box-shadow:  0px 0px 10px #AAAAAA;
    -moz-box-shadow:  0px 0px 10px #AAAAAA;
    box-shadow:  0px 0px 10px #AAAAAA; 
}

.negyedeves_infok div.oszlop:last-of-type{
    width:60%;    
    font-family: 'Lato', sans-serif;  
    border:5px solid #EFEFEF;
    height:auto;    
    padding:20px;
    margin-right:0%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-color:#FFFFFF;
    -webkit-box-shadow:  0px 0px 10px #AAAAAA;
    -moz-box-shadow:  0px 0px 10px #AAAAAA;
    box-shadow:  0px 0px 10px #AAAAAA; 
}

.negyedeves_infok div.oszlop h2{
    font-size:28px;
    color:#D97816;
    font-weight:300;
}

.negyedeves_infok div.oszlop div.negyedev_egysor{
    margin-left:20px;
}

.negyedeves_infok div.oszlop div.negyedev_egysor:after{
    clear:both;
    display:block;
    content:"";
}

.negyedeves_infok div.oszlop div.negyedev_egysor div{
    font-size:22px;
    color:#333333;
    font-weight:300;
    line-height:40px;
    float:left;
    width:50%;
}

.fizetetlen_szamlak{
    
}

.fizetetlen_szamlak a{
    border-left:5px solid #EEEEEE;
    font-family: 'Lato', sans-serif;
    font-weight:300;
    font-size:18px;
    color:#222222;
    text-decoration: none;
    padding:10px;
    display:block;
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom:1px solid #EEEEEE;
    cursor:pointer;
}

.fizetetlen_szamlak a.lejart{
    border-left:5px solid #FF0000;
}

.fizetetlen_szamlak a:after{
    clear:both;
    content:"";
    display:block;
}

.fizetetlen_szamlak a:hover{
    background-color:#E0E0E0 !important;
}

h2.szamlainfok_szamla_adatok{
    color:#D97816;
}

.szamlainfok_szamla_adatok_container{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #EEEEEE;
}

.szamlainfok_szamla_adatok_header{
    
}

.szamlainfok_szamla_adatok_header .egyszamlainfo_sor{
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    
}

.szamlainfok_szamla_adatok_header .egyszamlainfo_sor:after{
    clear:both;
    content:"";
    display:block;
}

.szamlainfok_szamla_adatok_header .egyszamlainfo_sor div{
    float:left;
    width:55%;
    padding:5px;
    padding-left:15px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: left;
}

.lejart_hatarido_ikon{
    
    font-weight:600;
    padding:2px 5px;
    background-color:#FF0000;
    color:#FFFFFF;
    border-radius: 20%;
}

.szamlainfok_szamla_adatok_header .egyszamlainfo_sor div:last-of-type{
    float:left;
    width:45%;
    padding-left:5px;
    text-align: left;
}

@media screen and (max-width:1920px){
    .szm_main_container{
        width:95%;
    }
    
    .szm_main_container_also{
        width:95%;
    } 
    
}

.negyedev_datum_text{
    float:left;
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.negyedev_datum_lapoz{
    float:left;
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align:right;
    font-size:14px !important;
}


.negyedev_datum_lapoz a{
    cursor:pointer;
    text-decoration: none;
    font-size:14px;
    color:#D97816;
    padding:5px;
}

.negyedev_datum_lapoz a:hover{
    background-color:#D97816;
    color:#FFFFFF;
}


@media screen and (max-width:1800px){
    
    
    .figy_doboz_kulso{
        width:25%;
        float:right;
    }
    
    .szm_main_container{
        width:95%;        
    }
    
    .szm_main_container_also{
        width:95%;
    } 
    
}

@media screen and (max-width:1600px){
    
    .szm_doboz_kulso{
        width:33%;
        float:left;        
    }
    
    .figy_doboz_kulso{
        width:33%;
        float:right;
    }
    
    .figy_doboz_kulso:first-of-type{
        margin-right: 1%;
    }
    
    .szm_main_container{
        width:90%;        
    }
    
    .szm_main_container_also{
        width:90%;
    } 
    
}

@media screen and (max-width:1150px){
    .negyedev_datum_text{
        width:100%;
    }

    .negyedev_datum_lapoz{
        width:100%;
    }
    .szm_doboz_kulso{
        width:25%;
        float:left;
    }
    .negyedeves_infok{
        padding:20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    
    .negyedeves_infok div.oszlop:first-of-type{
        width:100%;     
        margin:0px auto !important;
    }

    .negyedeves_infok div.oszlop:last-of-type{
        
        width:100%;    
        margin:30px auto !important;
    }
    
    .negyedeves_infok div.oszlop div.negyedev_egysor div{
        width:100%;
    }
    
    .negyedeves_infok div.oszlop div.negyedev_egysor div:first-of-type{
        color:#579bb7;
    }
    
    .szm_doboz_belso h2{        
        font-size:26px;        
    }
    .szm_doboz_kulso{
        width:50%;
        float:left;
    }
    
    .figy_doboz_kulso{
        width:50%;
        float:right;
    }
    
    .figy_doboz_kulso:first-of-type{
        margin-right: 0%;
    }
    
    
    .szm_main_container{
        width:90%;        
    }
    
    .szm_main_container_also{
        width:90%;
    } 
    
    .figydoboz_container{
        position: relative; 
        z-index:9;
    }
    
}

@media screen and (max-width:700px){
    
    
    
    .szm_doboz_kulso{
        width:100%;
        float:left;
    }
    
    .figydoboz_container{
        position:relative;        
    }
    
    .figy_doboz_kulso{
        width:100%;
        float:right;
    }
    
    .figy_doboz_kulso:last-of-type{
        position: absolute;
        
    }
    
    .figy_doboz_kulso:first-of-type{
        margin-right: 0%;
        margin-top:90px;
    }
    
    .szm_main_container{
        width:90%;
        animation-name: none;   
        opacity:1;
        padding-top:55px;
    }
    
    .szm_main_container_also{
        width:90%;
    } 
    
    .szm_doboz_belso{        

        animation-name: dobozok;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        
    }
    
    .szm_main_container h1{
        text-align: center;
        margin-top:25px;
        margin-bottom:80px;
    }
    
    .szm_main_container_also h1{
        text-align: center;
        margin-top:20px;
    }
    
    
    
}

@media screen and (max-width:400px){
    .szm_doboz_kulso{
        width:100%;
        float:left;
    }
    
    .figy_doboz_kulso{
        width:100%;
        float:right;
    }
    
    
    .szm_main_container{
        width:98%;        
        animation-name: none;
        opacity:1;
        padding-top:55px;
    }
    
    .szm_main_container_also{
        width:98%;
    }    
    
    
    .szm_doboz_belso{        

        animation-name: dobozok;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
    }
    
    .szm_main_container h1{
        text-align: center;
        margin-top:25px;
    }
    
    .figydoboz_container{
        position:relative;        
    }
    
}