/* Banner Image: Για το μέγιστο χώρο του Banner Image */
.mybanner {
  min-width: 100%;
}

/* Menu */

/* Override the lila background with white: Δηλαδή χρωματίζουμε όλο το χώρο του Container της κορυφής άσπρο */
.container-header {
    background-color: white;
    background-image: none;
}

/* Text should now be blue: Επειδή τα γράμματα ήταν άσπρα, σε άσπρο φόντο δεν θα φαίνονταν, γι αυτό τους αλλάζουμε χρώμα */
.container-header .mod-menu {
    color: #0088cc;
}

/* We add padding and radius so that on hover there is a nice background: Δηλαδή αλλάζει μέγεθος όταν περνάει πάνω του το ποντίκι*/
.container-header .mod-menu a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px; 
    padding: 3px 15px;
    color: #0088cc;
}

/* On hover there should be a gray background: δηλαδή αλλάζει χρώμα όταν περνάει πάνω του το ποντίκι */
.container-header .mod-menu a:hover {
    background-color: #eee;
}

/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler {
    color: #0088cc;
    border: 1px solid #0088cc;
}

/*Δημιουργία πλαισίου Frame γύρω από το περιεχόμενο του Site: Για να το κάνουμε αυτό χρωματίζουμε όλα τα στοιχεία του background γκρίζα*/
.site-grid {
    background-color: #f4f6f7;
}

.header {
    background-color: #f4f6f7;
}

/*Μετά δίνουμε στα στοιχεία που περιέχουν περιεχόμενο (αυτά στο κέντρο) ένα άσπρο χρώμα στο background τους και περισσότερο εσωτερικό χώρο inner space:*/
.grid-child {
    padding: 3px 15px;
    background-color: white;
}

.footer {
    background-color: #f4f6f7;
    background-image: none;
}