body {
height: 100%;
font-family:'Segoe UI';
background-color: #ffffff;
overflow-x:hidden;
margin:0px;
padding:0px;
background-color: #e6f5f5;
}
#container {
border: 0px solid #000;
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
background-color: #d1ebeb;
}
.boxFoto {
display:block;
width: 100%;
height: 900px;
background-color: #55cad7;
background-image: url("../images/cover1Logo.jpg");
background-size:cover;
background-position:center center;
position: relative;
}
#header {
width:430px;
padding:10px;
font-weight:bold;
color:#fff;
background-color: #55cad7;
font-size:25px;
position:absolute;
top:35px;
left:0px;
height:34px;
}
.box1 {
width: 100px;
height: 100px;
padding:10px;
position: absolute;
top: 160px;
}
.box1.text1 {
left: -20px;
color:#fff;
font-size:20px;
}
.box1.logo {
background-image: url("../images/saxion.png");
background-repeat: no-repeat;
left: 100px;
}
.box2 {
background-color: #55cad7;
width: 150px;
height: 44px;
position: relative;
margin-left: 10px;
padding: 20px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 20px;
line-height:20px;
top:35px;
}
.box2 span {
display: none;
font-size: 16px;
font-weight: normal;
}
.box2:hover {
background-color: #8ee3ed;
}
.box2:hover span {
display: block;
}
.box2.student {
float:right;
}
.box2.docent {
float:right;    
}
.box2 a {
}
.footer {
width:120px;
bottom:20px;
right:20px;
position: absolute;
background-color:#def5f7;
color:#216a72;
padding:5px;
padding-left:10px;
padding-right:10px;
font-size:16px;
}

@media screen and (max-width: 700px) {
#header {
width:230px;
color:#fff;
font-size:15px;
}
.box2 {
width: 90px;
margin-left: 10px;
font-size: 10px;
}
}

@media screen and (max-width: 500px) {
#header {
width:170px;
color:#fff;
font-size:12px;
}
.box2 {
width: 60px;
margin-left: 10px;
font-size: 5px;
}
}