@charset "utf-8";
/* CSS Document */

.inter-lite {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.inter-reg {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.inter-bold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.inter-italic {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
}

@font-face {
    font-family: 'joebold3medium';
    src: url('joebold3-webfont.woff2') format('woff2'),
         url('joebold3-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html { }
body { font-family: "Inter", sans-serif; font-optical-sizing: auto;  font-weight: 300;  font-style: normal; font-size:18px; line-height:25px; color:#4f7882; background-color:#FFF;padding:0; margin:0; }

header {background-color:#FFF; display:block; padding:0; margin:0; text-align:center; position:relative; width:100%; }
.masthead_holder {display:block; width:100%; margin:0px auto; position:relative; background-color:#17434d; overflow-x: hidden;}
.masthead_image {width:100%; max-width:1900px; transition: opacity 0.1s linear;  will-change: opacity;}
.top_links {position:absolute; top:50px; width:400px; left:50%; margin-left:-200px; display: flex; justify-content:space-between;}
.top_01 img {width:315px; height:auto;}
.top_02 img {Width:66px; height:auto;}
.haru_logo {}

h1 {padding:0; margin:0 auto; display:inline-block; text-align:center; position:absolute; bottom:100px; left:50%; margin-left:-239px;}
h1 img {display:block; margin:0 auto; padding:0; text-align:center;}

h2 {font-family: 'joebold3medium'; font-weight:300; letter-spacing: 0.03em; font-size: 2.3em; line-height:1em; text-transform: uppercase; color:#17434d; text-align:center; padding:0 0 30px; margin:0 auto;}

#main {padding:100px 0;}
.holder {max-width:900px; height:auto; padding:20px; margin:0 auto; text-align:center;}

.two_col {display: flex; justify-content:space-between; align-items:stretch; padding:20px 0 90px;}
.left_col {border-right:1px solid #4f7882; padding:0 40px;}
.right_col {padding:0 40px;}
p.quote {display:block; padding:0; margin:0 0 20px;}
span.quote_author {display:block; font-weight:600; font-style:italic;}
span.quote_credits {display:block; font-size:0.8em;}

.breaker {display:block; width:100%; max-width:755px; height:auto; margin:30px auto 90px; padding:0;}

.text_area {padding:20px 0 90px;}
.text_area p {display:block; padding:0 30px 0; margin:0 auto 20px; max-width:850px;}
.text_area p strong {font-weight:600;}

.image_gallery {display: flex; flex-wrap: wrap; justify-content:center; align-items:center; max-width:600px; margin:0 auto; padding: 30px 0 100px;}
.image_gallery a {margin:0 10px 20px;}
.image_gallery a img {height:auto; width:auto;}

.clear {clear:both;}

a.fade, .fade {zoom: 1; filter: alpha(opacity=100); opacity: 1.00; -webkit-transition: all 0.2s ease-out;	-moz-transition: all 0.2s ease;	-o-transition: all 0.2s ease; }
a.fade:hover, .fade:hover {filter: alpha(opacity=80); opacity: 0.80; }
a img {border:none;}

footer {background-color:#020617; color:#FFF; width:100%; heigth:auto; overflow-x: hidden;}
footer:before {content:''; display:block; background-image:url('images/footer.png'); width:100%; min-height: 572px; background-position:top center; background-repeat:no-repeat; margin-top:-80px; position:absolute; z-index:1; }
footer a {color:#ffce6e; text-decoration: none;}
footer a:hover {text-decoration:underline;}
.footer_holder {margin:0 auto; padding:150px 40px 40px; max-width:560px; position:relative; z-index:10; text-align: center;}
.footer_holder h2 {color:#FFF;}
ul.social_links {list-style-type:none; padding:0; margin:0 auto 50px; text-align:center;}
ul.social_links li { display:inline; }
ul.social_links li a {}

span.copyright {display:block; text-align:center; width:100%; padding:30px 0; margin:0 auto; font-size:0.7em;}

@media only screen and (max-width: 1200px) {
	.masthead_image {width:150%; margin-left:-25%;}
	h1 { bottom:75px; margin-left:-175px;}
	h1 img { width:350px; }
}

@media only screen and (max-width: 900px) {
	.top_links { top:30px; width:100%; left:0%; margin-left:0px;  justify-content:center;}
	.top_01 img {width:262px; height:auto; margin-right:5px;}
	.top_02 img {Width:55px; height:auto; margin-left:5px;}
	h1 { bottom:60px; margin-left:-150px;}
	h1 img { width:300px; }
}
	
@media only screen and (max-width: 480px) {
	.top_links { top:20px;}
	.top_01 img {width:210px;}
	.top_02 img {Width:44px;}
	h1 { bottom:50px; margin-left:-125px;}
	h1 img { width:250px; }
	.two_col {display: block;  padding:20px 0 90px;}
	.left_col {border-right:0px solid #4f7882; border-bottom:1px solid #4f7882; padding:0 30px 30px;}
	.right_col {padding:30px 30px 0;}
}