/* General */
div#topnav {display:none;}
div#contentbox {float:none; margin:0 0 5% 0; width:100%; height:auto; min-height:0;}


/* Top box */
div#topbox h1 {float:right; margin:0; padding-top:87px; font-size:38px; font-weight:normal; color:#289fcf;}

/* 4 boxes */
div#content {padding:0;}
div#contentbox {margin-top:0; margin-bottom:30px; width:100%; padding-bottom: 10px;}
div#contentbox h1 {display:none;}
div#contentbox h2 {}

div#content {display:flex; flex-wrap:wrap; justify-content: space-between;}
div#contentbox div.frame-layout-1 {width:23%; height:150px; background-color:#289fcf; box-sizing: border-box; padding:0 5px;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
}
div#contentbox div.frame-layout-1:hover {background-color:#76c8ea;}
div#contentbox div.frame-layout-1 h2,
  div#contentbox div.frame-layout-1 p {padding:0 3% 0 3%; color:#fff; text-align:center; line-height:1.5;}
div#contentbox div.frame-layout-1 h2 a {display:block; width:100%; color:#fff; text-decoration:none;}
div#contentbox div.frame-layout-1 h2 {padding:0; display: flex; align-items: center; width: 100%;}
div#contentbox div.frame-layout-1 h2 a:hover {text-decoration:none;}


/* Media queries */
@media only screen
and (max-width : 1024px) {
  div#topbox h1 {font-size:24px;}
  div#contentbox div#content {padding:0 3%;}

}

@media only screen
and (max-width:767px) {
  div#topbox h1 {padding:0; font-size:20px;}
  div#content {padding-bottom:5% !important;}
  div#contentbox div.frame-layout-1 {width:49%; margin-bottom:15px;}
  div#contentbox div.frame-layout-1 a {font-size:18px;}

  div#right h2 {line-height:28px; height:auto; margin-bottom:3%;}
}

@media only screen and (max-width : 480px) {
  div#contentbox div.frame-layout-1 {width:100%;}
}

@media only screen and (max-width : 320px) {

}