@import url(fonts.css);

@import url(menu.css);
@import url(lebegomenu.css);

*{
    border:0px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body.underdesct{
    margin:0px;
    background: url("../images/background.jpg") top left;
}

body{
    font-family: 'Raleway';
    margin:0px;
    background:url("../images/sgeo_back.jpg") top left;
    color:#F5F5F5;
    font-size:120%; /* Base font-size 14px */
    line-height:1.5;
    text-align:left;
}

.container{
    margin:0 auto;
    width:980px;
    clear:both;
}


.logo_header_line{
    margin:10px 0;
    margin-bottom:0px;
    height:80px;
    overflow:hidden;
}

.logo_header_line:after{
    content:'';
    display: block;
    clear:both;
}

.logo_header_line .logo{
    float:left;
    width:80px;
}

.logo_header_line .logo img{
    width:100%;
    height:auto;
}

.logo_header_line .header-side{
    float:left;
    width:900px;
    font-family:'RussoOne';
    height:80px;
}

.logo_header_line .header-side div{
    float:left;
    font-family:'RussoOne';
}

.near_logo_line{
    background-color: #00793a;
    color:#FFFFFF;
    font-size:20px;
    font-weight: 200;
    height:80px;
}


.mainHeader{
    margin:0 0;
}



.mainContent{
    line-height:25px;
    min-height:510px;
}

.mainContent .mainPicture{
    height:auto;
    width:100%;
    overflow:hidden;
    text-align: center;
}

.mainContent .mainPicture img{
    height:500px;
}


.mainContent .abovePictureDiv{
    width:440px;
    height:350px;
    position: absolute;
    top:250px;
    left:50%;
    margin-left:60px;
    background-color:unset;

    overflow:hidden;
}

.mainContent .abovePictureDiv .kocka{
    text-align: center;
    overflow: hidden;
    padding:5px;
    float:left;
    margin:10px;
    width:200px;
    height:155px;
    background-color:#0e0e0e;
    opacity: 0.8;
    cursor:pointer;
    color:#999999;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.mainContent .abovePictureDiv .kocka img{
    width:190px;
}

.mainContent .abovePictureDiv .kocka:hover{
    color:#DDDDDD;
    -webkit-transform:scale(1.1,1.1) ;
    -moz-transform:scale(1.1,1.1) ;
    -ms-transform:scale(1.1,1.1) ;
    -o-transform:scale(1.1,1.1) ;
    transform: scale(1.1,1.1);
    opacity:0.97;
}

.mainContent .abovePictureDiv .kocka:hover img{

}

.hr{
    margin:20px 0;
    background-color:#000000;
    height:2px;
    -webkit-box-shadow:  0px 0px 10px #000000;
    -moz-box-shadow:  0px 0px 10px #000000;
    box-shadow:  0px 0px 10px #000000;
}

.hr_footer{
    margin:20px 0;
    background-color:#000000;
    height:2px;
    -webkit-box-shadow:  0px 0px 15px #666666;
    -moz-box-shadow:  0px 0px 15px #666666;
    box-shadow:  0px 0px 15px #666666;
}

.hr_kep{
    margin:-8px 0;
    background-color:#000000;
    height:3px;
    -webkit-box-shadow:  0px 0px 15px #000000;
    -moz-box-shadow:  0px 0px 15px #000000;
    box-shadow:  0px 0px 15px #000000;
    margin-bottom:30px;
}

.mainContent .cimsor{
    width:100%;
    background-color:#1a1a1a;
    padding:30px;
    margin-top:0px;
    margin-bottom:40px;
}

.mainContent .cimsor h1{
    color:#00aff0;
    font-weight:200;
    font-size:200%;
    margin:0 auto;
    width:980px;
    clear:both;
}

.mainContent .error{
    text-align: center;
    width:100%;
    background-color:#FF0000;
    color:#FFFFFF;
    padding:20px 0;
}

.mainContent h2{
    color:#2fbc66;
    font-weight:500;
    font-size:150%;
    margin-top:40px;
    margin-bottom:30px;
    line-height:40px;
}

.mainContent p{
    font-size:120%;
    line-height:140%;
    font-weight:200;
    margin-bottom:3%;

}

.mainContent p.bold{
    font-weight:500;
}

.mainContent ul li p{

    margin-top:5px;
    margin-bottom:5px;
}

.mainContent p span.kiemelt{
    font-weight:500;
}

.mainContent p span.dijak{
    color:#fa5a5a;
}

.mainContent div.kiemelt{
    background-color:#1e1e1e;
    color:#AAAAAA;
    border:1px solid #333333;
    padding:20px;
}

.mainContent a{
    color:#FFFFFF;
    font-size:120%;
    line-height:140%;
    font-weight:200;
    text-decoration: none;
    transition: all 0.5s;
}

.mainContent a:hover{
    padding-left:10px;
    color:#00aff0;
}

.mainContent a.tovabbgomb{
    color:#00aff0;
    padding:10px;
    font-size:120%;
    line-height:140%;
    font-weight:200;
    text-decoration: none;
    transition: all 0.5s;
}

.mainContent a.tovabbgomb:hover{
    padding-left:10px;
    /*color:#FFFFFF;
    background-color:#00aff0;*/
}

.mainContent a.tovabbgomb_telekalakitas{
    color:#00aff0;
    padding:5px;
    font-size:100%;
    line-height:120%;
    font-weight:200;
    text-decoration: none;
    transition: all 0.5s;
}

.mainContent a.tovabbgomb_telekalakitas:hover{    
    color:#FFFFFF;
    background-color:#00aff0;
}

.mainContent .szolgaltatasok_egy_elem div a{
    opacity:1;
    transition: all 0.5s;
}

.mainContent .szolgaltatasok_egy_elem:hover div a{
    opacity:1;
}


/** ŰRLAP ELEMEK **/
.mainContent .urlap{
    color:#FFFFFF;

    font-weight:200;
    text-decoration: none;
}

.mainContent .urlap div.egysor{
    margin-bottom:10px;
    text-align: left;
}

.mainContent .urlap div.egysor:after{
    clear: both;
    content: '';
    display: block;
}

.mainContent .urlap div.egysor .left{
    padding-top:4px;
    float:left;
    width:330px;
    text-align: left;
    font-size:120%;
    line-height:140%;
}

.mainContent .urlap div.egysor .right{
    float:left;
    text-align: left;
}

.mainContent .urlap input,select,textarea{
    padding:10px;
    font-size:100%;
    font-family:Raleway;
    font-weight:300;
    color:#111111;
    opacity:0.9;
}

.mainContent .urlap input{
    width:650px;
}

.mainContent .urlap button{
    padding:0px;
    height:70px;
    font-size:160%;
    font-weight:200;
    font-family:Raleway;
    width:300px;
    cursor:pointer;
    background-color:#00aff0;
    color:#FFFFFF;
    -webkit-box-shadow: inset 0px 0px 10px #013b51;
    -moz-box-shadow: inset 0px 0px 10px #013b51;
    box-shadow: inset 0px 0px 10px #013b51;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.mainContent .urlap button:hover{

    -webkit-box-shadow: inset 0px 0px 0px #013b51;
    -moz-box-shadow: inset 0px 0px 0px #013b51;
    box-shadow: inset 0px 0px 0px #013b51;
}

.mainContent .urlap textarea{
    width:100%;
    height:250px;
}

/** ŰRLAP ELEMEK VÉGE **/

.mainFooter{
    margin-top:5%;
    color:#666666;
    margin-bottom:1%;
}

.mainFooter .footer-left{
    float:left;
    text-align:left;
    width:50%;
}

.mainFooter .footer-right{
    float:right;
    text-align:right;
    width:50%;
}

.mainFooter a{
    opacity:0.5;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.mainFooter a:hover{
    opacity:1;
}

.mainFooter a img{
    margin-top:10px;
    height:40px;
}

div.clear{
    clear: both;
}

.sideContainer{
    display:none;
}


/*********************** RENDES KÉPMÉRET VÉGE **********************************/

@media screen and (max-width: 1370px){
    body{
        font-size:100%; /* Base font-size 14px */
    }

    .sideContainer{
        display:none;
    }
}


@media screen and (max-width: 1199px) {
    body{
        font-size:100%; /* Base font-size 14px */
    }

    .sideContainer{
        display:none;
    }
}

@media screen and (max-width: 1000px) {

    .logo_header_line{
        width:100%;
        height:auto;
        margin-bottom:40px;
        padding-bottom:10px;
        border-bottom:2px solid #333333;
    }


    .logo_header_line .logo{
        width:100%;
    }

    .logo_header_line .logo img{
        width:100%;
        height:auto;
    }

    .logo_header_line .header-side{
        overflow: hidden;
        display:none;
    }

    .near_logo_line{
        display:none;
    }
    .container{
        width:90%;
    }

    .hr_kep{
        display: none;
    }

    .mainPicture{
        display:none;
    }

    .mainContent .abovePictureDiv{
        display:none;
    }

    .mainContent{
        width:100%;
        min-height:unset;
    }

    .mainContent .szolgaltatasok_egy_elem div{
        text-align: center;
        opacity:0.8;
    }
    
    .mainContent .szolgaltatasok_egy_elem div a{
        color:#FFFFFF;
        opacity:1;
    }

    .mainContent a.tovabbgomb{
        display: block;
        background-color:#00aff0;
        color:#FFFFFF;
        padding:5px;
        font-size:120%;
        line-height:140%;
        font-weight:200;
        text-decoration: none;
        transition: all 0.5s;
    }

    .mainContent a.tovabbgomb:hover{
        padding-left:5px;
        opacity:0.6;
    }


    .mainContent p{
        font-size:100%;
        line-height:140%;
        font-weight:200;
        margin-bottom:3%;
        text-align: justify;
    }

    .mainContent ul li p{
        margin-top:5px;
        margin-bottom:5px;
    }

    .mainContent a{
        color:#FFFFFF;
        font-size:100%;
        line-height:140%;
        font-weight:200;
        text-decoration: none;
        transition: all 0.5s;
    }

    .mainContent div.kiemelt{
        background-color:#1e1e1e;
        color:#AAAAAA;
        border:1px solid #333333;
        padding:5px;
        width:95%;
        margin:0 auto;
        font-size:90%;
    }


    /** FOOTER **/
    .mainFooter .footer-left{
        float:none;
        text-align:center;
        width:100%;
    }

    .mainFooter .footer-right{
        float:none;
        text-align:center;
        width:100%;
    }



    .mainFooter a img{
        margin-top:1%;
        height:40px;
    }

    .sideContainer{
        display:block;
        width:100%;

    }

    .sideContainer a{
        text-align: center;
        margin: 0 auto;
        width:100%;
        font-size:120%;
        padding:10px 20px;
        display:block;
        color:#FFFFFF;
        margin-bottom:5px;
        background-color:#333333;
    }



    /*** ŰRLAP ELEMEK ***/
    .mainContent .urlap div.egysor .left{
        width:100%;
    }

    .mainContent .urlap div.egysor .right{
        width:100%;
        float:left;
        text-align: left;
    }

    .mainContent .urlap input,select,textarea{

    }

    .mainContent .urlap input{
        width:100%;
    }

    .mainContent .urlap textarea{
        width:100%;
        height:250px;
    }

    .mainContent .cimsor{
        background-color:#1a1a1a;
        padding:30px 15px;
    }

    .mainContent .cimsor h1{
        width:100%;
    }

    .mainContent .urlap button{
        padding:0px;
        height:50px;
        font-size:130%;
        font-weight:200;
        font-family:Raleway;
        width:100%;
        cursor:pointer;
        background-color:#00aff0;
        color:#FFFFFF;
        -webkit-box-shadow: inset 0px 0px 10px #013b51;
        -moz-box-shadow: inset 0px 0px 10px #013b51;
        box-shadow: inset 0px 0px 10px #013b51;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .mainContent .urlap button:hover{
        -webkit-box-shadow: inset 0px 0px 0px #013b51;
        -moz-box-shadow: inset 0px 0px 0px #013b51;
        box-shadow: inset 0px 0px 0px #013b51;
    }

}