body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
.bgimg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('images/side.jpg');
    min-height: 100%;
}
.colorify:hover {
    transition: 2s ease;
    filter:grayscale(0%);
}

#btnEmpty {
    background-color: #ffffff;
    border: #d00000 1px solid;
    padding: 5px 10px;
    color: #d00000;
    float: right;
    text-decoration: none;
    border-radius: 3px;
    margin: 10px 0px;
}
#btnCheckout {
    background-color: #ffffff;
    border: green 1px solid;
    padding: 5px 10px;
    color: green;
    float: right;
    text-decoration: none;
    border-radius: 3px;
    margin: 10px 0px;
}


#buttonProducts {
    border: none;
    outline: 0;
    padding: 8px;
    color: #414A2F;
    background-color: #DFE0D2;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    border-radius: 3px;
}

#buttonOrder {
    border: none;
    outline: 0;
    padding: 8px;
    color: #414A2F;
    background-color: #DFE0D2;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    border-radius: 3px;
}

#buttonProducts:hover,
#buttonOrder:hover {
    /* color: #DFE0D2; */
    /* background-color: #414A2F; */
    opacity: 0.8;
}

#buttonLangEL {
    border: none;
    outline: 0;
    padding: 8px;
    color: #414A2F;
    background-color: #DFE0D2;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}

#buttonLangEN {
    border: none;
    outline: 0;
    padding: 8px;
    color: #DFE0D2;
    background-color: #414A2F;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}

#buttonContact {
    border: none;
    outline: 0;
    padding: 8px;
    color: #DFE0D2;
    background-color: #414A2F;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    border-radius: 3px;
}

#buttonNav {
    border: none;
    outline: 0;
    padding: 8px;
    color: #DFE0D2;
    background-color: #414A2F;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 38px;
}

@media (max-width: 750px) {
    #buttonNav {
        font-size: 24px;
    }
}

#buttonLangEN:hover, 
#buttonLangEL:hover,
#buttonContact:hover,
#buttonNav:hover {
    opacity: 0.8;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    /* border: 1px solid black; */
}

th, td {
    padding: 8px;
    text-align: left;
    height: 50px;
    border-bottom: 0;
    border-bottom: 1px solid #ddd;
    /* border: 1px solid black; */
}

tbody > tr:last-child > td {
    border-bottom: 0;
}

tr:hover {background-color:#f5f5f5;}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 110px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 150%;
    font-size: 14px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}







.hidden {
    display: none;
}
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -16px;
}
.col-15 {
    -ms-flex: 15%; /* IE10 */
    flex: 15%;
}
.col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}
.col-35 {
    -ms-flex: 35%; /* IE10 */
    flex: 35%;
}
.col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}
.col-65 {
    -ms-flex: 65%; /* IE10 */
    flex: 65%;
}
.col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
}
.col-85 {
    -ms-flex: 85%; /* IE10 */
    flex: 85%;
}
.col-15,
.col-25,
.col-35,
.col-50,
.col-65,
.col-75,
.col-85 {
    padding: 0 16px;
}

/* .container { */
/*     /1* background-color: #f2f2f2; *1/ */
/*     padding: 5px 20px 15px 20px; */
/*     border: 1px solid lightgrey; */
/*     border-radius: 3px; */
/* } */

input[type=text] {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

label {
    margin-bottom: 10px;
    display: block;
}

/* .icon-container { */
/*     margin-bottom: 20px; */
/*     padding: 7px 0; */
/*     font-size: 24px; */
/* } */

/* .btn { */
/*     background-color: #4CAF50; */
/*     color: white; */
/*     padding: 12px; */
/*     margin: 10px 0; */
/*     border: none; */
/*     width: 100%; */
/*     border-radius: 3px; */
/*     cursor: pointer; */
/*     font-size: 17px; */
/* } */

/* .btn:hover { */
/*     background-color: red; */
/* } */

.btnDark {
    background-color: #414A2F;
    color: #DFE0D2;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
}
.btnDark:hover {
    background-color: #DFE0D2;
    color: #414A2F;
}
.btnLight {
    background-color: #DFE0D2;
    color: #414A2F;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
}
.btnLight:hover {
    background-color: #414A2F;
    color: #DFE0D2;
}

a {
    /* color: #2196F3; */
}

hr {
    /* border: 1px solid lightgrey; */
}

span.price {
    float: right;
    color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 750px) {
    .row {
        /* flex-direction: column-reverse; */
        flex-direction: column; // Billing information on top
    }
    .col-25 {
        margin-bottom: 20px;
    }
    /* .col-65 { */
    /*     order: 3; */
    /* } */
}






/* Custom radio button */
/* The container */
.container2 {
    display: block;
    position: relative;
    padding-left: 25px;
    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 */
.container2 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

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

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

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

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

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

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



/* Custom Checkbox ******************************************************************* */
.container3 {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

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

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

/* When the checkbox is checked, add a blue background */
.container3 input:checked ~ .checkbox {
    /* background-color: green; */
    background-color: #414A2F;
}

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

/* Show the checkbox when checked */
.container3 input:checked ~ .checkbox:after {
    display: block;
}

/* Style the checkbox/indicator */
.container3 .checkbox:after {
    left: 6px;
    top: 4px;
    width: 6px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Captcha refresh icon */
.captcha-contact, .captcha-order {
    color: #414A30;
}