/* #### Desktops #### */
@media screen and (min-device-width: 640px){


body {
  background-color:#2baae1;
  font-family:"Calibri",Arial,Sans-Serif;
  font-size: 14px;
  color:#603913;
  margin: 0;
  padding: 0;
}

img {
  border: 0;
}

table {
  font-family:"Calibri",Arial,Sans-Serif;
  font-size: 14px;
  color:#603913;
  margin: 0;
  padding: 0;
  border: 0;
}

td {
vertical-align: top;
}

.main_container {
  position: absolute;
  width: 100%;
  min-width: calc(880px + 4em);
  min-width: -moz-calc(880px + 4em);
  min-width: -webkit-calc(880px + 4em);
  left:0;
  height: 100%;
  min-height: calc(400px + 2em);
  min-height: -moz-calc(400px + 2em);
  min-height: -webkit-calc(400px + 2em);
  top: 0;
}

[class*='sub_container'] {
  position: absolute;
  height: calc(100% - 5em);
  height: -moz-calc(100% - 5em);
  height: -webkit-calc(100% - 5em);
  z-index:100;
  top: 2em;
  background-color: #fff;
  box-shadow: 0px 2px 5px 2px #666;
}

.content_sub_container {
  width: calc(100% - 240px - 10em);
  width: -moz-calc(100% - 240px - 10em);
  width: -webkit-calc(100% - 240px - 10em);
  min-width: calc(480px);
  min-width:-moz-calc(480px);
  min-width:-webkit-calc(480px);
  left: 3em;
}

.side_sub_container {
  width: calc(240px + 2em);
  width: -moz-calc(240px + 2em);
  width: -webkit-calc(240px + 2em);
  right: 3em;
}

.pic {
  position: absolute;
  right: 1em;
  height: calc(100% - 4em);
  height: -moz-calc(100% - 4em);
  height: -webkit-calc(100% - 4em);
  max-height: 480px;
  top: 2em;
  box-shadow: 0px 2px 5px 2px #666;
}


[class*='_header'] {
  position: absolute;
  width: calc(100% - 2em);
  width: -moz-calc(100% - 2em);
  width: -webkit-calc(100% - 2em);
  left: 1em;
  height: calc(11.37724550898204% + 1.5em);
  height: -moz-calc(11.37724550898204% + 1.5em);
  height: -webkit-calc(11.37724550898204% + 1.5em);
  top: 0;
}

[class*='logo'] {
  position: absolute;
  bottom: 2em;
}

.main_logo {
  height: 50%;
  left: 0;
}

.start_logo1 {
  width: 94.33198380566802%;
  left: 0;
}

.start_logo2 {
  position: absolute;
  width: 5.66801619433198%;
  right: 0;
}

.main_menu {
  position: absolute;
  background-image: url('assets/MenuBackground.jpg');
  background-repeat: repeat-x;
  background-position: 0 0.75em;
  width:100%;
  left: 0;
  height: 1.5em;
  bottom: 0;
}

.main_menu ul {
  margin: 0 2px;
  padding: 0;
  list-style-type:none;
}

.main_menu ul li a {
  background-color: #fff;
  color: #603913;
  float: left;
  display: block;
  top: 0;
  margin:0 4px;
  padding:0 2px;
  text-decoration: none;
  font-weight: bold;
}

.main_menu ul li a:active {
  color: #2baae1;
}

.main_menu ul li a:hover {
  color: #2baae1;
}

.content {
  position: absolute;
  width: calc(100% - 2em);
  width: -moz-calc(100% - 2em);
  width: -webkit-calc(100% - 2em);
  left: 1em;
  height: calc(100% - 11.37724550898204% - 2.5em);
  height: -moz-calc(100% - 11.37724550898204% - 2.5em);
  height: -webkit-calc(100% - 11.37724550898204% - 2.5em);
  bottom: 1em;
  overflow: auto;
}

.divider {
  position: relative;
  background-image: url('assets/MenuBackground.jpg');
  background-repeat: repeat-x;
  background-position: 0 0;
  width:100%;
  left: 0;
  height: 0.75em;
  bottom: 0;
}

.back { 
  position:absolute; 
  width:100%;
  left: 0;
  bottom: 0;
  z-index:-1;
}

.jumpingjack { 
  position:absolute; 
  max-width: 38.43338213762811%;
  left: 0;
  max-height: 80.46875%;
  bottom: 0;
  z-index: 200;
}

.grass1 { 
  position:absolute;
  width: 33.30893118594436%;
  left: 0;
  bottom: 0;
  z-index: 201;
}

.grass2 { 
  position:absolute;
  width: 66.69106881405564%;
  right: 0;
  bottom: 0;
  z-index: 201;
}

.copyright {
  position: absolute;
  font-size: 10px;
  color:#603913;
  right: 4em;
  bottom: calc(3em - 5px);
  bottom: -moz-calc(3em - 5px);
  bottom: -webkit-calc(3em - 5px);
  margin: 0;
  padding: 0;
  z-index: 202;
}

.content_block {
  position: relative;
  width: 100%;
  min-height: 100%;
}

}




/* #### Smart phones #### */
@media screen and (max-device-width: 640px){


body {
  background-color:#2baae1;
  font-family:"Calibri",Arial,Sans-Serif;
  font-size: 30px;
  color:#603913;
  margin: 0;
  padding: 0;
  font-size: 30px;
  -webkit-text-size-adjust: none;
}

img {
  border: 0;
}

table {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 30px;
}

td {
  vertical-align: top;
}

.main_container {
  position: absolute;
  width: 100%;
  left:0;
  height: 7200px;
  top: 0;
}

.content_sub_container {
  width: 100%;
  left:0;
  top: 0;
}

.side_sub_container {
  position: relative;
  width: 100%;
  left:0;
  top: 1em;
}

.pic {
  position: absolute;
  right: 0;
  height: calc(100% - 380px - 3em);
  height: -moz-calc(100% - 380px - 3em);
  height: -webkit-calc(100% - 380px - 3em);
  top: 2em;
  box-shadow: 0px 2px 5px 2px #666;
}

.content_header {
  position: absolute;
  width: calc(100% - 2em);
  width: -moz-calc(100% 2em);
  width: -webkit-calc(100% - 2em);
  left: 1em;
  height: 380px;
  top: 0;
  background-color: #fff;
  box-shadow: 0px 2px 5px 2px #666;
}

.side_header {
  visibility: hidden;
  display: none;
}

[class*='logo'] {
  position: absolute;
  bottom: 2em;
}

.main_logo {
  left: 1em;
  height: 100px;
  top: 1em;
  z-index: 201;
}

.start_logo1 {
  visibility: hidden;
  display: none;
}

.start_logo2 {
  visibility: hidden;
  display: none;
}

.main_menu {
  position: absolute;
  width: calc(100% - 2em);
  width: -moz-calc(100% 2em);
  width: -webkit-calc(100% - 2em);
  left: 1em;
  top: 100px;
  margin: 0;
  padding-left: 
  font-size: 36px;
  z-index: 201;
}

.main_menu ul {
  padding: 0 2px;
  list-style-type:none;
}

.main_menu ul li a {
  background-color: #fff;
  color: #603913;
  display: block;
  margin:0;
  padding:0 2px;
  font-size: 36px;
  text-decoration: none;
  font-weight: bold;
}

.main_menu ul li a:active {
  color: #2baae1;
}

.main_menu ul li a:hover {
  color: #2baae1;
}

.content {
  position: relative;
  width: calc(100% - 4em);
  width: -moz-calc(100% - 4em);
  width: -webkit-calc(100% - 4em);
  left: 1em;
  top: calc(380px + 1em);
  top: -moz-calc(380px + 1em);
  top: -webkit-calc(380px + 1em);
  padding: 1em;
  background-color: #fff;
  box-shadow: 0px 2px 5px 2px #666;
}

.divider {
  position: relative;
  background-image: url('assets/MenuBackground.jpg');
  background-repeat: repeat-x;
  background-position: 0 0;
  width:100%;
  left: 0;
  height: 0.75em;
  bottom: 0;
}

.back { 
  position:absolute; 
  width:100%;
  left: 0;
  bottom: 0;
  z-index:-1;
}

.jumpingjack { 
  position:absolute; 
  max-width: 38.43338213762811%;
  left: 0;
  max-height: 80.46875%;
  bottom: 0;
  z-index: 200;
}

.grass1 { 
  position:absolute;
  width: 33.30893118594436%;
  left: 0;
  bottom: 0;
  z-index: 201;
}

.grass2 { 
  position:absolute;
  width: 66.69106881405564%;
  right: 0;
  bottom: 0;
  z-index: 201;
}

.copyright {
  position: absolute;
  font-size: 10px;
  color:#603913;
  right: 1em;
  bottom: 20px;
  margin: 0;
  padding: 0;
  font-size: 24px;
  z-index: 202;
}

.content_block {
  position: relative;
  width: 100%;
}

}