@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
/*
DM Sans
Regular 400
Medium 500
Bold 700

Noto Sans JP
100
400
500
700

Noto Serif
400
*/
@media (max-width: 500px){
    .thumbnail {
    
        
        margin-bottom: 8%;
        width: 112.5px;
        height:auto;
    }
}
@media (max-width: 640px){
    .thumbnail {

        margin-bottom: 8%;
        
        width: 360px;
        height:auto;
    }
}
@media (min-width: 641px){
    .thumbnail {

        margin-bottom: 8%;
        
        width: 450px;
        height:auto;
    }
}
/*
Github:
https://github.com/logos 

Email:
<div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

*/

/*
Styles

1. General Styles

2. Navigation Styles

3. Footer Styles 

4. Interactive Styles
   4.1 Button Styles
   4.2 Carousel Styles
*/
body {
    background-color: #F8F8F8;
    color: #333333;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    line-height: 1.6rem;
}
h1,h2,h3{
    font-weight: bold;
}
h1{
    padding: 5vh;
}
h2{
    line-height: 2.5rem;
}
#subheading {
    font-size: .85rem;
}
p {
    margin: 0;
}
a {
    color: inherit;
}
a:hover {
    text-decoration: none;
    color: #BB7272;

}
.logo {
   
    max-width: 5rem;
    height: auto;

}
.text-left {

    padding-left: 0;
}
.text-right {
    padding-right: 0;
}

/*Navigation Styles*/

header {
    font-family: 'Noto Serif', serif;
    font-size: 2rem;
    font-weight: 400;
  
}

.navbar {
    background-color: #FEFAE0;
    height: 15vh;
    padding: 0;
}
.nav-item {
    font-size: 1rem;
    font-weight: 400;
    
}

.active{
    text-decoration: line-through;
}
.nav-item:hover{
    background-color: #DCD9C3;
}


.brand {
    font-family: 'Noto Serif', serif;
    font-size: 1.75rem;
    font-weight: 500;
    

}



hr {
    width: 45%;
    background-color: #041520;
}

/*Footer Styles*/
img.icon {
    margin: 1% 1%;
    width: 2.5rem;
}

[class $= "layer"]{
    padding: 1% 3%; /*top/bot l/r*/

}
.top-layer{
    background-color: #D4D4DB;
    
}
.mid-layer{
    background-color: #BFC1D8;
}
.bot-layer{
    background-color: #AAAFD5;
}
/*Interactive Styles*/
/*Button Styles*/
.btn{
    background-color: #5563CA;
    border-color: #5563CA;
}
.btn-lg{
    padding: 1rem 2rem;
}

/*Carousel Styles*/
#carouselExampleIndicators {
    max-width: 100%;
    height: auto;
    overflow: hidden;
}
.carousel{
    display: block;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    
    
    transform-style: preserve-3d;
}
.carousel-wrapper * {
    box-sizing: border-box;
  }

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display:block;
    overflow: hidden;
  }

#carousel-fit-image{
    width: 100vw;
    height: 85vh;
    object-fit: cover;
    overflow: hidden;
}
.carousel-caption{
    /*changed from 20px in Bootstrap*/
    top: 25%;
}
    
.carousel-button{
    margin-top: 30vh;
    background-color: #5563CA;
    border-color: #5563CA;
    color: #FEFAE0;
}
/*Form Styles*/
input, select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

  
input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: rgb(0, 0, 0);
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.form {
    padding: 10vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
    background-color:#2424241a; 
}
/*Process Styles*/
.explanation {
    padding: 6%;
}
.summary {
    margin-top: 3%;
    margin-bottom: 3%;
    padding: 2%;
    background-color: #C6C8D9;
}
/*About Styles*/
#portait{
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}
.portrait{
    padding: 5% 2%;
    background-color: #E9E7DD;
}
/*Development Styles*/
.hidden{
    visibility: hidden;
}
#disclaimer{
    display: block;
    text-align: center;
    padding: 0 8%;
}
/*
ArcGIS Styles
*/
.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}

/*
Figma Styles
*/
#content {
        width: 100%;
        height: auto;
        min-height: 500px;
        margin: auto;
        display: flex;
        align-items: center;
      }