* {
    box-sizing: border-box;
}

body{
    background-image: url(../images_icons/body_bgr.png);
    background-repeat: repeat;
}

.div_menu {
    margin:0;
    padding:0 15px 0 15px;
    line-height: 2.5;
    vertical-align:middle;
    border-bottom: 1px solid #CDE0E4;
    background-color: #000000;
    color: #FFFFFF
}

.menu-background {
    background-image: url(../images_icons/menu_background.png);
    background-repeat: repeat;
}

.bg-a{
    background-image: url(../images_icons/menu_background.png);
    background-repeat: repeat;
}
.bg-white{
    background-image: url(../images_icons/bg_white.png);
    background-repeat: repeat;
}


.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 10px;
}





html {
    font-family: "Lucida Sans", sans-serif;
}



.header {
    /*background-color:#FFEAD1;*/
    color: #ffffff;
    padding: 15px;
}


.div_banner {
    margin-top:0px;
    width: 100%;
    height: auto;
    /* Magic! */
}

.etelfutar_logo {
    width:100%;
    height:auto;
    max-width:260px;
    max-height: 20vh;
    margin:-30px auto 20px auto

}

.banner_left_right {
    width:100%;
    height:auto;
}
.banner_right {
    width:100%;
    height:auto;
}

.banner_left {
    width:100%;
    height:auto;
    /*background-image: url(../images/menu_background.png);*/
    /*background-repeat: repeat;*/
    /*background-image: url(../images/bgr_left.png);*/
    /*background-position: top; */
    /*background-repeat: no-repeat;*/
    /*background-origin: inherit*/
}


.righ_side {
    padding: 10px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    padding: 15px;
}



div.input_group {
    border-radius:6px;margin:20px auto;background:white;
    padding:30px;
    width:600px;
    -webkit-box-shadow: 2px 7px 29px -4px rgba(0,0,0,1);
    -moz-box-shadow: 2px 7px 29px -4px rgba(0,0,0,1);
    box-shadow: 2px 7px 29px -4px rgba(0,0,0,1);
}


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.67%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;height:auto;}

.col-hidden { visibility: hidden}
.col-none { display: none}
.col_right { float: right; }



select {
    font-size: 105%
}


a { text-decoration: none }


.msg_red,.msg_green, .msg_orange{
    padding: 10px;
    color: white;
    margin-bottom: 10px;
    border-radius:6px;
    width: 90%;
    margin:0 auto 15px auto;
}
.msg_red {
    background-color: #CC0000; /* Red */
}
.msg_green {
    background-color: #009900;
}
.msg_orange {
    background-color: #FF9900;
}
.closebtn {
    position:relative;
    top:-30px;
    right:-30px;
    color: #000;
    width:26px;
    height:26px;
    float: right;
    line-height:22px;
    font-size:22px;
    border:2px solid #000;
    border-radius:50%;
    text-align: center;
    background-color: #fff;
    vertical-align: middle;
    font-weight: bold

}
.closebtn:hover {
    cursor:pointer;
}


.lablec{
    background-image: url(../images_icons/menu_background.png);
    background-repeat: repeat;
    border-top: 2px solid #E5EFF1
}


.form_etlap_button {
    text-align: center;
    background-color: #E00036;
    border:none;
    color: #FFFFFF;
    cursor:pointer;
    line-height: 2;
    padding:0 20px 0 20px;
    margin: 0;
    font-size: medium;
    border-radius:15px;
}

.form_etlap_button:hover {
    background-color: #B2002A;
}

.form_etlap_button_2 {
    text-align: center;
    background-color:transparent;
    border:none;
    color: #E00036;
    cursor:pointer;
    margin: 0;
    font-weight: bold;
    font-size: x-large
}

td.etterem_etlap_bal_cella {
    background-color:#E00036;
    width:15px;
}
td.etterem_etlap_bal_cella:hover {
    background-color: #FF0000;
}




td.kosar_pm {
    padding:5px;
    width:50px;
    text-align: center;
}

td.form_kosar {
    padding:5px;
}


.form_kosar_pm {
    width:35px;
    color: #FFFFFF;
    cursor:pointer;
    text-align: center;
    background-color: #339933;
    border:none;
}

.kosar_rendel_button {
    text-align: center;
    background-color:#006600;
    border:none;
    color: #FFFFFF;
    cursor:pointer;
    line-height: 2;
    padding:0 25px 0 25px;
}

.kosar_rendel_button:hover {
    background-color: #009933;
}


.oldal_cim {
    font-size:60px;
    font-weight: bold

}

.text_shadown_normal {
    text-shadow: 1px 1px 3px #888888
}

.etterem_comment_icon {
    margin:30px auto -30px auto;
    display:flex;
    max-width:650px;
    min-width:320px;
    font-size: 80%;
    justify-content: center;
}

h2.cim, h2.cim_medium {
    color: #FF1414;
    /*font-family:"Comic Sans MS", cursive, sans-serif;*/
    font-size: 150%;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 1.5;
}

h2.cim_medium {
    font-size: 300%;
}


table.ettermek_list {
    width:100%;
    max-width:650px;
    margin:10px auto 20px auto;
    border-collapse: collapse;
    border-spacing: 0px;
    caption-side: top;
    empty-cells: show;
    table-layout: auto;
    border:2px solid #990000;
    border-right:2px solid #990000;
    border-bottom:2px solid #990000;
    -webkit-box-shadow: 5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    -moz-box-shadow:    5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    box-shadow:         5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    background-color: #FCFCF8;

}

table.ettermek_list td {
    border:1px solid #990000;
}

table.ettermek_list td.etterem_nev {
    padding:5px;
    color: #FF1414;
    /*font-family:"Comic Sans MS", cursive, sans-serif;*/
    font-size:140%;
    font-weight: bold;
    font-variant: normal;
    line-height: 2;
}

table.ettermek_list td.etterem_nev:hover {
    background-color: #990000;
    color:#FFF;
}

h2.ettermek_etterem_nev:hover {
    color:#FFF;
}


table.etterem_konyhak {
    width:99%;
    max-width:550px;
    margin:10px auto 40px auto;
    border-collapse: collapse;
    border-spacing: 0px;
    caption-side: top;
    empty-cells: show;
    table-layout: auto;
    border:4px solid #D4DFE2;
    /*-webkit-box-shadow: 5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    -moz-box-shadow:    5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    box-shadow:         5px 5px 10px 0px rgba(128, 128, 128, 0.5); */
    background-color: #FFFFFF;
}


table.etterem_konyhak_menu{
    width:100%;
    border-collapse: collapse;
    border-spacing: 0px;
    empty-cells: show;
    table-layout: auto;
    border:none;
 }


table.etterem_konyhak td{
    border:1px solid #BFD1D4;
    padding:2px;
}

table.etterem_konyhak_menu td{

    padding:2px;
}


table.etterem_konyhak td.etterem_nev {
    padding:5px;
    color: #FF1414;
    /*ont-family:"Comic Sans MS", cursive, sans-serif;*/
    font-size: 120%;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 1;
}


table.etterem_konyhak tr.konyhak:hover {
    background-color: #E5F9FF
}



div.etterem_konyhak_table {
    display: table;
    width:100%;
}

div.etterem_konyhak_row {
    display: table-row;
    width:100%;
}

div.etterem_konyhak_row > text {
    font-size:60%
}

div.etterem_konyhak_cell {
   display: table-cell;
   width:25%;
   text-align: center
}

.ettk_cell_text {
    font-size: 60%;
}
.ettk_cell_textb {
    font-size: 80%;
    font-weight: bold
}


.lablec:hover {
    background-color: #000000;
    color: #000033;
}

.lablec_link {
    color: #5E5E5E;
    font-size: 90%;
    padding:0 15px 5px 15px;

}
a.lablec_link {
    color: #000000
}
a.lablec_link:hover {
    color: #FFFFFF
}


div.nyito_text {
    width:99%;
    max-width:800px;
    padding:20px;
    line-height: 2;
    margin:20px auto 20px auto;
    text-align: justify;
    font-size: 110%;

}

a.top_menu_link {
    font-size:90%;
    color: #CCCCCC;
    max-width:200px;
    text-decoration: none;
}
a.top_menu_link:hover {
    color: #FCFCF8;
    text-decoration: none;
}


.jelszocsere_btn {
    background-color: #336699;
    height:40px;
    color: #FFFFFF;
    padding:10px 20px 10px 20px;
    text-decoration: none;
    float:right;
    margin:0 10px 0 0;
}

.jelszocsere_btn:hover {
    color: #000;
    background-color: #CCCCCC

}

div.nyitolap_valaszto {
    width:100%;
    margin:20px;
    background-color:#FFFFCC;
    display: block
}

div.nyito_valaszto_menu {
    width:50%;
    float:left;
    text-align: center
}

a.nyito_valaszto_menu {
    font-size:200%;
    color: #FF1414;
    font-weight: bold;
    font-variant: small-caps;
}

a.nyito_valaszto_menu:hover {
    color: #FF0000
}



/* The container */
.ch-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 110%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.ch-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.ch-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.ch-container:hover input ~ .ch-checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.ch-container input:checked ~ .ch-checkmark {
    background-color: #009900;
}

/* Create the checkmark/indicator (hidden when not checked) */
.ch-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.ch-container input:checked ~ .ch-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.ch-container .ch-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radio-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
    background-color: #009900;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
 	top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}




/*
@media only screen and (max-width: 600px) {
    @import "../style/alap-600.css";
}
*/





/* UJ DESIGN */
@media only screen and (min-width:800px) {
    div.nyito {
        width:100%;
        height:200px;
        display:table;
        table-layout: fixed;
        border-spacing: 25px;
    }

    div.nyito_row {
        display: table-row;
        table-layout: fixed;
        border-collapse: separate;
    }

    div.nyito_cell {
        display:table-cell;
        text-align: center;
        background-color: #FFFFFF;
        /*border: 1px solid #8FAFB3;*/
        padding:10px;
        vertical-align:top;
        border-radius:15px;
        -webkit-box-shadow: 5px 5px 10px -5px rgba(0,0,0,1);
        -moz-box-shadow: 5px 10px 5x -5px rgba(0,0,0,1);
        box-shadow: 5px 5px 10px -5px rgba(0,0,0,1);
    }

    p.nyito_cell_text {
        padding:5px;
    }

    img.nyito_cell {
        min-width:50px;
        max-width:75px;
        width:100%;
        height:auto;
    }

    div.nyito_cell_bga {
    }
    div.nyito_cell_bgb {
    }
    div.nyito_cell_bgc {

    }

}

@media only screen and (max-width: 800px) {
    div.nyito {
        width:100%;
        margin:0;
        padding:0;
        text-align: left;
    }
    div.nyito_row {}

    div.nyito_cell {
        width:100%;
        text-align:center;
        background-color: #FFFFFF;
        padding:0px;
        margin:5px 0 5px 0;
        vertical-align:middle;
        float: left;
    }

    img.nyito_cell {
        min-width:25px;
        max-width:50px;
        width:100%;
        padding:35px 5px 5px 5px;
        height:auto;
        float: left;
    }

    p.nyito_cell_text {
        padding:5px;
    }

    div.nyito_cell_bga {
        /*background-color: #F0F4F5;*/
        background-color: #FFFFFF;
    }
    div.nyito_cell_bgb {
        background-color: #EDE7E5;
    }
    div.nyito_cell_bgc {
        background-color: #EDEBC4;
    }
 }



/* ettermek konyha lista */
div.ettlist_table {
    display:table;
    width:100%;
}

div.ettlist_row {
    display:table-row
}

div.ettlist_pic {
    display:table-cell;
    width:20%;
    max-width:125px;
    min-width:50px;
}

div.ettlist_cim {
    display:table-cell;
    width:100%;
    text-align: center;
    vertical-align:middle;
}

img.ettlist_logo {
    width:100%;
    max-width:125px;
    min-width:50px;
}


.arnyekol {
    -webkit-box-shadow: 5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    -moz-box-shadow:    5px 5px 10px 0px rgba(128, 128, 128, 0.5);
    box-shadow:         5px 5px 10px 0px rgba(128, 128, 128, 0.5);
}


div.ett_list_ett {
    margin:10px auto 20px auto;
    background-color:#FFFFFF;
    border:4px solid #D4DFE2;
    width:99%;
    max-width:650px;
}


.sarga_kor_mobil {
}
.sarga_kor {
    height: 20px;
    line-height:20px;
    width: 20px;
    background-color:#FFED00;
    border-radius: 50%;
    display: block;
    font-weight: bold;
    font-size: 70%;
    text-align: center;
    margin:-20px 20px;
    position: absolute;
    color: #000000;
}