/*  Alternate Webkit Theme 05 - V2.1 (responsive)
(C) 2015 Alternate Tools
-----------------------------------------------------

File:         theme.css
Description:  Main page CSS stylesheet

*/

/*  Custom fonts
-----------------------------------------------------*/
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: local('Asap'), local('Asap'), url(theme_files/Asap.woff) format('woff');
}
@font-face {
  font-family: 'Sintony';
  font-style: normal;
  font-weight: 400;
  src: local('Sintony'), local('Sintony'), url(theme_files/Sintony.woff) format('woff');
}

/* Body format
-------------------------------------------------------------------------------
*/
body
{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  font-family: Sintony,Arial,Tahoma,sans-serif;
  color: #0C0C0C;
  font-size: 16px;
  background-color: #363D47;
}

/* Div container formats
-------------------------------------------------------------------------------
*/
.div_upper
{
  width: 100%;
  height: 100px;
  background-color: #3A4E6B;
}
.div_upper_container
{
  width: 1000px;
  background-color: #001940;
  height: 100px;
}
.div_upper_title
{
//  width: 720px;
  padding-top: 50px;
  padding-left: 240px;
  text-align: left;
  font-family: Tahoma,Verdana,sans-serif;
  font-size: 28px;
  font-weight: bold;
  float: left;
  color: #FCFCFC;
  text-shadow: 1px  1px 2px black, 1px -1px 2px black, -1px  1px 2px black, -1px -1px 2px black;
}
.div_upper_logo
{
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: right;
  float: right;
  cursor: pointer;
}
.div_upper_space
{
  height: 8px;
  width: 100%;
  background-color: #2A3E5B;
  font-size: 4px;
}

.div_middle
{
  width: 100%;
  min-height: 400px;
// height: 400px;
  background-color: #FBF9FD;
}
.div_middle_container
{
  width: 1000px;
  background-color: #FFFFFF;
  text-align: left;
}
.div_middle_navi
{
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  float: left;
  width: 200px;
}
.div_middle_content
{
  margin-top: 10px;
  margin-left: 30px;
  margin-bottom: 10px;
  float: left;
  width: 740px;
}

.div_footer_space
{
  height: 5px;
  width: 100%;
  background-color: #505A69;
  font-size: 4px;
}

.div_footer
{
  width: 1000px;
  height: 80px;
  text-align: left;
}

.div_footer_navi
{
  width: 500px;
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  color: #FCFCFC;
  font-family: Sintony,Arial,Tahoma,sans-serif;
  font-size: 16px;
}
.div_footer_copyright
{
  width: 350px;
  margin-top: 30px;
  margin-left: 30px;
  float: left;
  text-align: right;
  font-family: Sintony,Arial,Tahoma,sans-serif;
  font-size: 13px;
  color: #ECECEC;
}

/* Navigation formats
-------------------------------------------------------------------------------
*/
a.navi_side:link, a.navi_side:visited
{
  color: #FCFCFC;
  font-family: Asap,Arial,Tahoma,sans-serif;
  background-color: #969DC7;
  font-size: 16px;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 12px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 12px;
  padding-bottom: 2px;
  height: 34px;
  float:bottom;
  width: 178px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
//  width: 180px;
}
a.navi_side:hover, a.navi_side:active
{
  color: #FCFCFC;
  font-family: Asap,Arial,Tahoma,sans-serif;
  font-size: 16px;
  text-decoration: underline;
  float: left;
  display: block;
  background-color: #666D97;
  margin-top: 12px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 12px;
  padding-bottom: 2px;
  height: 34px;
  float:bottom;
  width: 178px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
//  width: 180px;
}

a.navi_side_active:link, a.navi_side_active:visited
{
  color: #FCFCFC;
  font-family: Asap,Arial,Tahoma,sans-serif;
  background-color: #565D87;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  float: left;
  display: block;
  margin-top: 12px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  height: 29px;
  float:bottom;
  width: 178px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
//  width: 180px;
}
a.navi_side_active:hover, a.navi_side_active:active
{
  color: #FCFCFC;
  font-family: Asap,Arial,Tahoma,sans-serif;
  font-size: 16px;
  text-decoration: underline;
  float: left;
  display: block;
  font-weight: bold;
  background-color: #666D97;
  margin-top: 12px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  height: 29px;
  float:bottom;
  width: 178px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
//  width: 180px;
}

a.navi_bottom:link, a.navi_bottom:visited
{
  color: #FCFCFC;
  font-family: Sintony,Arial,Tahoma,sans-serif;
  font-size: 16px;
  text-align:center;
  text-decoration: none;
  float: left;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 2px;
  height: 23px;
}
a.navi_bottom:hover, a.navi_bottom:active
{
  color: #FCFCFC;
  font-family: Sintony,Arial,Tahoma,sans-serif;
  font-size: 16px;
  text-align:center;
  text-decoration: underline;
  text-align:center;
  float: left;
  display: block;
  background-color: #666D77;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  padding-left: 10px;
  padding-right: 10px;
  height: 23px;
}
.span_navi_bottom_space
{
  float: left;
}
a:link, a:visited
{
  color: #363D47;
}
a:hover, a:active
{
  color: #565D67;
}

/*  General formats

-----------------------------------------------------*/
img
{
  border: 0;
}

/* General format for other html elements
-------------------------------------------------------------------------------
*/
p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i,input
{
  font-family: Sintony,Arial,Tahoma,sans-serif;
  color: #0C0C0C;
  font-size: 16px;
}

/* Size on small devices... (responsive)
-------------------------------------------------------------------------------
*/
@media only screen and (min-width: 150px) and (max-width: 600px)
{

  body
  {
    margin: 0 auto;
  }
  .div_upper
  {
    width: 100%;
    height: 189px;
  }
  .div_upper_container
  {
    width: 100%;
    text-align: center;
    height: 200px;
	display: flex;
    flex-direction:column-reverse;
  }
  .div_upper_title
  {
    width: 100%;
    padding: 12px 0px 2px 0;
    text-align: center;
  }
  .div_upper_logo
  {
    width: 100%;
    padding: 2px 0px 2px 0;
    text-align: center;
  }
  .div_middle_container
  {
    width: 100%;
    text-align: left;
  }
  .div_middle_content
  {
    width: 96%;
    padding-left: 0px;
    margin: 5px 2% 5px 2%;
  }
  .div_middle_navi
  {
    width: 100%;
    margin: 5px 0px 5px 0px;
  }
  .div_navi_side_title
  {
    width: 100%;
    margin: 1px 0px 1px 0px;
    text-align: center;
    padding: 2px 0px 2px 0px;
  }
  a.navi_side:link, a.navi_side:visited, a.navi_side:hover, a.navi_side:active, a.navi_side_active:link, a.navi_side_active:visited, a.navi_side_active:hover, a.navi_side_active:active
  {
    width: 100%;
    margin: 1px 0px 1px 0px;
    text-align: center;
    padding: 2px 0px 2px 0px;
  }
  .div_footer
  {
    width: 100%;
  }
  .div_footer_navi
  {
    width: 100%;
//  height: 100px;
    text-align: center;
    margin: 0px 0px 0px 0px;
  }

  a.navi_bottom:link, a.navi_bottom:visited, a.navi_bottom:hover, a.navi_bottom:active
  {
    width: 100%;
    text-align: center;
    margin: 1px 0px 1px 0px;
    padding: 2px 0px 2px 0px;
  }
  .span_navi_bottom_space
  {
    visibility: hidden;
	height: 0px;
  }
  .div_footer_copyright
  {
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-left: 0px;
  }
  .div_footer_image
  {
    visibility: hidden;
    height: 0px;
  }
  /* Site input elements
  -------------------------------------------------------------------------------
  */
  .contact_name, .contact_email, .contact_message
  {
    width: 75%;
  }
  .form_input, .form_textinput
  {
    width: 75%;
  }
  .guestbook_title, .guestbook_name, .guestbook_email, .guestbook_text
  {
    width: 75%;
  }
  .site_search_term
  {
    width: 75%;
  }
  .newsletter_email
  {
    width: 75%;
  }
  .youtube_iframe
  {
	width: 85%;
  }
  .iframe
  {
	width: 85%;
  }
  .img
  {
	width: 85%;
	height: auto;
  }
}