@charset "utf-8";
/* CSS Document */
/* additional styles for Oct 2025 update */
/*
* {
    outline: 1px solid red;
}
*/
/*
img {
    max-width: 100%;
    height: auto;
    display: block;
}
*/

html, body {
    overflow-x: hidden;
}

body {padding-top:0!important; font-family: Roboto, sans-serif!important; overflow-x: hidden;}
.container-fluid {max-width:1400px;}
.intro .container-fluid {max-width:1200px;}
footer .container-fluid {max-width:1250px;}
.header_wrapper {background: url("../i/2025/image_header.png") center bottom no-repeat; background-size: cover; padding:10px 0 20px;
    box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.2);}
.header_wrapper .container-fluid {background:transparent;}
.navbar {border-bottom-width: 0; background:transparent;}
.navbar #logo span {color: #D85E01;}

.home .header_wrapper {background: url("../i/2025/hiro_home.png") center bottom no-repeat;background-size: cover; padding: 20px 0 20px;}
.home h1 {font-weight:700; font-size:26px; padding: 50px 20px 130px 20px; line-height: 1.4;}
.home h1 span {font-weight:400; display: block;}

.navbar-toggle {background-color: #D85E01 !important;}

ul.nav.navbar-nav {height:30px; padding:0!important; background:#fff; border-radius:8px; margin:17px 0 0!important;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5);}
.navbar-default .navbar-nav > li > a {text-transform: none; padding-top:5px; border-bottom-width:0; font-size:1.1rem;
    padding-bottom:5px; font-weight:300;}
.navbar-default .navbar-nav > li > a:hover {border-width:0; color:#D85E01;}

.navbar-default .navbar-nav > li > a.active {background:#BB6726; color:#fff; }
.navbar-default .navbar-nav > li > a.home {border-radius:8px 0 0 8px;}
.navbar-default .navbar-nav > li > a.contact {border-radius:0 8px 8px 0;}

.bkg_header {background:#F4F4F4!important; margin-top:6px; border-bottom: 1px solid #BB6726;}
.bkg_header .container-fluid {background:#F4F4F4!important;}
.home .bkg_header {border-top: 1px solid #A0A2A1;}

.bkg_2nd_header {background:#F4F4F4!important; margin-top:6px;}
.bkg_2nd_header .container-fluid {background:#F4F4F4!important;}

.v25 h2 {padding:20px 0 20px; font-weight:600; text-align: center; font-size: 28px; color:#616161; line-height: 1.5;}
.v25 h2 span {padding:20px 0; font-weight:300;}
.v25.home h2.hidden-xs {font-size: 18px; font-weight:300; line-height:1.7; margin:50px auto; max-width:1000px; color:#000;}
.v25.home h2.hidden-xs strong {font-weight:600;}
.v25 #main p.intro {font-weight:300; font-size: 18px; color:#616161; text-align: center; padding: 30px; max-width:1085px; margin-left:auto; margin-right: auto;}

.bkg.intro {border-top:3px solid #F4F4F4;}

.v25 #main h4 {font-weight:300; font-size:24px; color:#616161; line-height: 1.4;}
.v25 #main p {font-weight:300; font-size:16px; color:#616161; margin: 5px 15px 20px;}

#home_tiles h3.hidden-xs {text-align: center; font-weight: 300; font-size:42px; padding: 20px 0 10px; color:#454545;}
#home_tiles p {text-align: center; font-weight: 300; font-size:18px; padding: 0 0 0; color:#000;}
.v25 #home_tiles a {text-align: center; text-decoration: none; color:#BB6726; font-weight:300; display: block; margin-top:25px;
    margin-bottom:40px;}
.v25 #home_tiles a h4 {font-weight:300; padding: 10px 0 30px; font-size:20px; }
.v25 #home_tiles a:hover {text-decoration: none; color:#BB6726;}
.v25 #home_tiles img {width:90%;height: auto; display: block; margin:5px auto 15px;max-width:300px;}

#project_tiles {padding-bottom: 30px;}
#project_tiles h3.hidden-xs {text-align: center; font-weight: 300; font-size:42px; padding: 20px 0 10px; color:#454545;}
#project_tiles p.intro {text-align: center; font-weight: 300; font-size:18px; padding: 0 0 0 0; color:#000;}
#project_tiles p.intro.hidden-xs {text-align: center; font-weight: 300; font-size:18px; padding: 50px 20px 70px; color:#000; line-height: 1.6;
    max-width:1000px; margin:0 auto;}
.v25 #project_tiles a {text-align: center; text-decoration: none; color:#BB6726; font-weight:300; display: block; margin-top:25px;
    margin-bottom:40px;}

.v25 #project_tiles a:hover {text-decoration: none; color:#BB6726;}
.v25 #project_tiles img {width:90%;height: auto; display: block; margin:5px auto 100px;max-width:240px;}
.v25 #project_tiles a h4 {font-weight:300; font-size:30px; color:#000; padding:0 0 10px; margin:0 0 10px; text-align: left;}
#project_tiles p.desc {font-size:15px; text-align: left; min-height:160px; color:#000;}
#project_tiles span {display: block; text-transform: uppercase; text-align: center; color:#D85E01; font-size:18px; font-weight:400;}

.photo_links {padding:20px 0;}
.photo_links img {max-width:290px; width:90%; height:auto; margin:40px auto 60px;}
.photo_links a {display: block; color: #121212; font-size:18px; font-weight:300; padding: 5px 0; }
.photo_links a:hover {text-decoration: none;}
.resume .photo_links {padding-bottom: 50px;}
.resume .photo_links a {padding-left: 0;}
.contact #main p {margin-bottom:10px;}
.contact #main p.texttop {padding-top:70px;}
.contact .photo_links {padding-bottom: 50px;}
.contact .photo_links a {padding-left: 0;}

.links {padding:20px 20px 20px 15px;}
.links img {max-width:290px; width:90%; height:auto; margin:40px auto 60px;}
.links a {display: block; color: #121212; font-size:18px; font-weight:300; padding: 5px 0; }
.links a:hover {text-decoration: none;}

.resume #main {padding:20px 10px 10px 50px;}
.resume #main h3 {font-size:34px; color:#454545;}
.resume #main h4 {font-weight:300; font-size: 36px; color:#454545; margin-bottom: 20px; margin-top: 10px;}
.resume #main h5 {margin:10px 15px 0; font-weight:500; font-size:16px; line-height: 1.6;}
.resume #main h5 span {font-weight:300;}
.resume #main h6 {margin:0 15px; font-weight:300; font-size:16px; line-height: 1.6;}
.resume #main p.compact {padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0; color:#000;}
.resume #main p.pb {margin-bottom: 20px;}
.resume #main ul {padding: 20px 20px 30px 40px;}
.resume #main li {line-height:1.6; color:#000;}
.contact #main {padding:20px 10px 10px 50px;}
.contact #main h3 {font-size:34px; color:#454545;}
.contact #main h4 {font-weight:300; font-size: 36px; color:#454545; margin-bottom: 20px; margin-top: 10px;}
.contact #main h5 {margin:10px 15px 0; font-weight:500; font-size:16px; line-height: 1.6;}
.contact #main h5 span {font-weight:300;}
.contact #main h6 {margin:0 15px; font-weight:300; font-size:16px; line-height: 1.6;}
.contact #main p.compact {padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0; color:#000;}
.contact #main p.pb {margin-bottom: 20px;}
.contact #main ul {padding: 20px 20px 30px 40px;}
.contact #main li {line-height:1.6; color:#000;}

#main p.compact {margin-bottom:5px; }
#main p.compact strong {font-weight:400;}

.illustration #main h5 {color:#616161; font-weight: 500; font-size:16px; padding: 5px 5px 0 14px;}

a.back_link {text-align: right; font-weight:300; font-size:22px; color:#BB6726; display: block; margin-top:40px;}
a.back_link:hover {text-decoration: none;}

.v25 footer {background: #BB6726; color:#fff; margin:30px 0 0; padding:10px 0 40px;}
.v25 footer .container-fluid {background:transparent;}
.v25 footer .footer_nav {text-align: left; padding-top: 40px;}
.v25 footer .footer_nav a {display: inline-block; padding: 10px 15px; color:#fff; font-weight:400; font-size: 20px; font-family: Roboto, sans-serif!important;}
.v25 footer .footer_nav a:hover {text-decoration: none;}
.v25 footer .icons {padding-top: 30px;}
.v25 footer img {margin: 5px;}
.v25 footer .instagram img {margin-top:8px; margin-right: 15px;}
.v25 footer .touch {padding-top: 10px;}
.v25 footer .touch h5 {font-size:32px; font-weight:400; color:#fff; margin-bottom:7px; padding-right: 20px;}
.v25 footer .touch a {font-size:16px; font-weight:300; color:#fff; display: block; padding-right: 20px;}
.v25 footer .touch a:hover {text-decoration: none;}
.v25 footer .touch span {}
.v25 footer .touch a[href^="tel"] {font-size:20px; font-weight:500; color:#fff; padding-right: 20px;}

.v25 footer div.hidden-xs {background: none;}
.v25 div.hidden-xs {background: none;}

.volunteer #main img.main_img {border:1px solid #967d38;}
/*.collecting #main img.main_img {border:1px solid #967d38;}*/

@media only screen and (max-width: 390px) {
    .v25 h2 {padding-top: 0; padding-bottom:15px; margin-top:0; margin-bottom: 0;}
    .v25 h2 span {font-size:30px;}
    a.back_link {font-size:18px;}
    .v25 footer .col-xs-6 {width:100%;}
    .v25 footer h5 {margin-bottom:0;}
    .v25 footer .touch a {padding-right: 0;}
    .v25.resume h2 span {font-size:22px!important;}
    .v25.contact h2 span {font-size:22px!important;}

}

@media only screen and (max-width: 600px) {
    .v25 footer .touch a {padding-right: 0!important;}
    .v25 footer .touch a[href^="tel"] {padding-top: 20px!important;}
}

@media only screen and (max-width: 767px) {
    .container-fluid {margin: 0;}
    #main img.main_img {width: 94%; margin: 3% 0 3% 3%;}
    .header_wrapper {background-image:url("../i/2025/image_header_mobile.png"); background-position: left top; background-size: cover;
        padding-bottom: 5px;}
    .home .header_wrapper {background-image: url("../i/2025/image_header_mobile.png");}
    nav .navbar-header {background-image: none!important; background-color:transparent!important;}
    ul.nav.navbar-nav {height:auto; margin-right:10px; border-radius:0; margin-bottom:20px;}
    #collapse {border: 0px solid red; padding-right:0; margin-bottom:10px;}
    ul.nav.navbar-nav li:first-child {padding-top:10px;}
    .navbar-default .navbar-nav > li > a {font-size:1.2rem; padding-top:10px; padding-bottom:10px;}
    .navbar-default .navbar-nav > li > a.contact {padding-bottom:20px;}
    .home .bkg_header {border-top-width: 0;}
    .v25 #main p.intro {padding-bottom:0;}
    .navbar #logo {font-size: 2.2rem;}
    .navbar-default .navbar-nav > li > a.active {background:#fff; color:#D85E01; }
    .v25 h2 {padding-top:5px; font-size:32px;}
    .v25 h2 span {font-size:32px;}
    #home_tiles h3.visible-xs {text-align: center; font-weight: 500; font-size:22px; color:#000; padding: 10px 20px;
        line-height: 1.5;}
    #home_tiles h3.visible-xs span {font-weight: 300;}
    .v25 #home_tiles img {max-width:360px; width:90%}

    #project_tiles h3.visible-xs {text-align: center; font-weight: 500; font-size:22px; color:#000; padding: 10px 20px;
        line-height: 1.5;}

    #project_tiles h3.visible-xs span {font-weight: 300;}
    .v25 #project_tiles img {max-width:360px; width:90%; margin:40px auto 20px;}
    .resume #main {padding:20px 10px 50px 10px;}
    .v25.resume h2 span {font-size:28px;}
    .contact #main {padding:20px 10px 50px 10px;}
    .v25.contact h2 span {font-size:28px;}
    #project_tiles p.intro.visible-xs {text-align: left; font-weight: 300; font-size:20px; padding: 30px 20px; color:#000; line-height: 1.6;
        max-width:1000px; margin:0 auto;}
    .v25 #project_tiles a h4 {font-weight:300; font-size:36px; color:#000; padding:0 20px; margin:0 0 10px; text-align: left;}
    #project_tiles p.desc {font-size:16px; text-align: left; min-height:0; padding:10px 20px; line-height: 1.6;}
    #project_tiles span {display: block; text-transform: uppercase; text-align: center; color:#D85E01; font-size:18px; font-weight:400;}
    .v25 #project_tiles a {margin-bottom: 10px;}

    .links {margin:20px;}
    .links img {max-width:290px; width:90%; height:auto; margin:40px auto 60px;}
    .links a {display: block; color: #121212; font-size:18px; font-weight:300; padding: 5px 0; text-align: center; }
    .links a:hover {text-decoration: none;}

    .resume .photo_links {padding-bottom: 0;}
    .resume .photo_links img {margin:20px 0;}
    .resume .photo_links a {font-weight:300; padding-left: 30px;}
    .contact .photo_links {padding-bottom: 0;}
    .contact .photo_links img {margin:20px 0;}
    .contact .photo_links a {font-weight:300; padding-left: 30px;}

}

@media only screen and (max-width: 991px) {
    a.back_link {text-align: center; font-weight:400;}
    .v25 footer h5 {font-size:32px; font-weight:400; color:#fff; padding:10px; text-align: center;}
    .v25 footer .icons {padding-top: 0; text-align: center;}
    .v25 footer .touch {padding-top: 8px; text-align: center;}
    .v25 footer {padding-bottom: 60px;}
    .v25 footer .touch a[href^="tel"] {padding-top:5px;}
    .resume #main {padding-top: 0!important;}
    .contact #main {padding-top: 0!important;}
}

@media only screen and (max-width: 1199px) and (min-width: 768px) {
    #project_tiles p.desc {font-size:16px; text-align: left; padding: 10px 30px 10px 0; min-height: 0;}
    #project_tiles span {text-align: left;}
    .v25 #project_tiles img {width:90%;height: auto; display: block; margin:5px auto 50px;max-width:240px;}
    #project_tiles p.intro.hidden-xs {padding-bottom: 30px;}
    .resume .photo_links a {text-align: left; padding-left:35px;}
    .contact .photo_links a {text-align: left; padding-left:35px;}

}

@media only screen and (min-width: 1200px) and (max-width: 1254px) {
    .resume .photo_links img {width:240px; text-align: center; display: block; margin:40px auto;}
    .resume .photo_links a {text-align: left; padding-left:35px; font-size:16px;}
    .contact .photo_links img {width:240px; text-align: center; display: block; margin:40px auto;}
    .contact .photo_links a {text-align: left; padding-left:35px; font-size:16px;}
}

@media only screen and (max-width: 1199px) {
    .v25 #home_tiles a {margin-bottom:0;}
    .v25 #home_tiles a h4 {padding: 10px 0 10px; }
    /*.v25 #project_tiles a {margin-bottom:0;}
    .v25 #project_tiles a h4 {padding: 10px 0 10px; }*/
    .v25.home h2.hidden-xs {padding:20px 40px;}
    .resume #main {padding:20px 20px 50px 20px;}
    .resume .photo_links {text-align: center;}
    .resume .photo_links a {font-weight:300;}
    .resume #main h4 {font-weight:300; font-size: 32px; color:#454545; margin-bottom: 20px; margin-top: 0;}
    .contact #main {padding:20px 20px 50px 20px;}
    .contact .photo_links {text-align: center;}
    .contact .photo_links a {font-weight:300;}
    .contact #main h4 {font-weight:300; font-size: 32px; color:#454545; margin-bottom: 20px; margin-top: 0;}
    .contact #main p.texttop {padding-top:0;}
    .contact .photo_links {padding-bottom: 20px;}

}

@media only screen and (min-width: 1200px) {
    .v25 #home_tiles img:hover {width:92%; margin:5px auto 10px;}

}