* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0;}
.headerlarge { background-color: #750c38; color: white; padding: 280px 80px; text-align: center;} /* Header/logo Title Large padding: (top/bottom) (sides) */
.headerlarge h1 { font-size: 40px;}
.headersmall { background-color: #750c38; color: white; padding: 20px 80px; text-align: center;} /* Header/logo Title Small */
.headersmall h1 { font-size: 40px;}
.header { background-color: #750c38; color: white; padding: 80px; text-align: center;} /* Header/logo Title */
.header h1 { font-size: 40px;}
.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap;} /* Column container */
.side { background-color: #f1f1f1; -ms-flex: 20%; /* IE10 */ flex: 20%; padding: 20px;} /* Sidebar/left column */
.side a { text-decoration: none; color: #025266;}
.side a:hover { text-decoration: none; color: #9e050a;}
.main { background-color: white; -ms-flex: 80%; /* IE10 */ flex: 80%; padding: 20px;} /* Main column */
.main a { text-decoration: none; color: #025266;} /*#9e050a;#c9060d;}*/
.main a:hover { text-decoration: none; color: #9e050a;}
.fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /* Fake image, for testing purposes */
.fakeimg:hover { background-color: #ddd; width: 100%; padding: 20px; color: #750c38;}
.footer { background-color: #ddd; padding: 80px; text-align: center; } /* Footer */
.footer a { text-decoration: none; color: white; }
.footer a:hover { color: red;}
.appearlarge { display: block;} /* change block <-> none when display size changes */
.appearsmall { display: none;}
.removeme { display: none;} /* make a section disappear */
.invisible { visibiity: hidden;} /* make a section invisible (still occupies its space) */
.donotprint { display: inherit;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Simple top menu: --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.navbar { background-color: #333; overflow: hidden;} /* top navigation bar */
.navbar a { color: white; float: left; display: block; text-align: center; text-decoration: none; padding: 14px 20px;}
.navbar a.right { float: right;}
.navbar a:hover { background-color: #ddd; color: black;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Subnavigation menu: ------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.subnavbar { background-color: #333; overflow: hidden; }
.subnavbar a { color: white; float: left; font-size: 16px; text-align: center; padding: 14px 16px; text-decoration: none; }
.subnavbar a:hover, .subnav:hover .subnavbtn{ background-color: #750c38; }
.subnav { float: left; overflow: hidden; }
.subnav .subnavbtn { background-color: inherit; color: white; font-size: 16px; border: none; outline: none; padding: 14px 16px; font-family: inherit; margin: 0;}
.subnav-content { display: none; position: absolute; background-color: #750c38; left: 0; width: 100%; z-index: 1;}
.subnav-content a { color: white; float: left; text-decoration: none;}
.subnav-content a:hover { background-color: #eee; color: black; }
.subnav:hover .subnav-content { display: block;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Dropdown menu: ----------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.dropdownnavbar { background-color: #333; overflow: hidden; }
.dropdownnavbar a { color: white; float: left; font-size: 16px; text-align: center; padding: 14px 16px; text-decoration: none;}
.dropdownnavbar a:hover, .dropdown:hover .dropbtn { background-color: #750c38; }
.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn { background-color: inherit; color: white; font-size: 16px; border: none; outline: none; padding: 14px 16px; font-family: inherit; margin: 0;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: black; float: none; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.dropdown-content a:hover { background-color: #ddd;}
.dropdown:hover .dropdown-content { display: block;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Side menu: --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.menuitem { background-color: #aaa; color: black; width: 100%; height: 3em; padding-top: 1em; padding-bottom: 1em; padding-left: 1em;}
.menuitem:hover { background-color: #750c38; color: white;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Side menu: grid with two columns when window is small -------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
.menu-grid2-container { display: grid; grid-template-columns: auto auto;}
.menu-grid2-element { background-color: #aaa; color: black; text-align: center; padding: 0.5em; margin: 0.3em;}
.menu-grid2-element:hover { background-color: #750c38; color: white; text-color: white;}
.menu-grid2-element a { color: black;}
.menu-grid2-element:hover a { color: white;}
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------ Responsive: -------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------------------- */
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1080px) {
.row { flex-direction: column; }
.appearlarge { display: none; } /* the idea is to change block <-> none when display size changes */
.appearsmall { display: block; }
.menuitem { text-align: center; padding-left: 0em;}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 460px) {
.headerlarge { background-color: #750c38; color: white; padding:160px 0px; text-align: center;} /* Header/logo Title */
.header { background-color: #750c38; color: white; padding: 80px 0px; text-align: center;} /* Header/logo Title */
.navbar a { float: none; width: 100%;}
/* Make a grid with two columns: */
.dropdownnavbar { display: grid; grid-template-columns: 50% 50%;}
.dropdownnavbar a { color: white; float: left; text-align: left; text-decoration: none; } /*font-size: small; }*/
.dropdown .dropbtn { min-width: 320px; text-align: left; } /*font-size: small; }*/
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 320px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: black; float: none; text-decoration: none; display: block; text-align: left;}
.dropdown-content a:hover { background-color: #ddd;}
.dropdown:hover .dropdown-content { display: block;}
.dropdown-content a:hover { background-color: #ddd;}
/* Old dropdownnavbar: one item per line
.dropdownnavbar { float: none; width: 100%; text-align: center;}
.dropdownnavbar a { float: none; width: 100%; display: block;}
.dropdown { float: none; width: 100%; text-align: center;}
.dropdown a { float: none; width: 100%; display: block;} */
.subnavbar { float: none; width: 100%; text-align: center;}
.subnavbar a { float: none; width: 100%; display: block;}
.subnav { float: none; width: 100%; text-align: center;}
.subnav a { float: none; width: 100%; display: block;}
.subnav-content { width: 60%;}
.appearlarge { display: none; } /* the idea is to change block <-> none when display size changes */
.appearsmall { display: block;}
}
@media print {
.row { display: block;} /* Firefox does not print flex stuff corretly, makes sure they are block */
.main { display: block;}
.dropdownnavbar { display: none;}
.subnavbar { display: none;}
.navbar { display: none;}
.header { display: none;}
.headerlarge { display: none;}
.headersmall { display: none;}
.side { display: none;}
.footer { display: none;}
.donotprint { display: none;}
/*.main::after { content: "Β© K.N. Anagnostopoulos, konstant@mail.ntua.gr"; display: block; text-align: center; font-size: small;}*/
}