/* atlas of drowned towns standard colors and fonts */

 .atlasbody {
    font-family: 'Josefin Sans', Montserrat;
    font-size: 1rem;
    /*font-weight: 700;*/
    padding: 0;
 }

 .atlastitletext {
   font-family: 'Josefin Sans', Montserrat;
   font-weight: 700;
   font-size: 2.5vw;
   color: black;
   text-align: center;
   /*color: #37372d;*/
}

 .atlastext {
   font-family: 'Josefin Sans', Montserrat;
   /*font-weight: 700;*/
   font-size: 1.2vw;
   color: black;
   /*color: #27271f;*/
   text-align: justify;
   text-justify: inter-word;
}

 .caption {
/*
   font-family: 'Josefin Sans', Montserrat;
   font-size: 1.2vw;
   color: black;
   text-align: center;
   text-justify: inter-word;
   margin: auto;
*/
   padding-top: 2vh;
   font-weight: normal;
   font-size: 11px;
   line-height: 11px;
   align: center;
   text-align: center; font-family: 'montserrat'; margin-bottom: 0;
}


 .container-fluid {
}

.about_container {
  margin: auto;
  width: 100%;
  /*border: solid;*/
}

 .atlas_nav_logo {
    position: relative;
    float: left;
    padding-left: 3vw;
 }

 .atlasbodytext {
    font-family: 'Josefin Sans', Montserrat;
    font-size: 1.25vw;
    margin: 2vw auto auto auto;
    /*font-weight: 700;*/
 }

 /* colors to use */
/*
  natural background is white.
  main area on top is #D3D1C3
  card color is: #F2F1ED
  green color 1: #C1D8C3;
  green color 2 light: #E9EFE5; 
  dark color green: #89845a;
  table head: #f2f1ed;
  */

 .aboutleft { 
	 display: inline-block;
     background-color: #D3D1C3;
     width: 55%;
     height: 100%;
	 vertical-align: middle;
  }

 .aboutright { 
     background-color: #D3D1C3;
     padding: 0vw;
     padding-left: 0vw;
     width: 40%;
     display: inline-block;
     /*border: solid black;*/
     margin: 1vw;
     top: 0;
 }
 .hometopleft { 
	 display: inline-block;
     margin: auto 3vw auto auto;
     background-color: #D3D1C3;
     width: 35%;
     height: 100%;
      vertical-align: middle;
  }

 .homeleft { 
	 display: inline-block;
     margin: auto;
     text-align: left;
     padding-left: 10vw;
     background-color: #D3D1C3;
     width: 40%;
     height: 100%;
      vertical-align: middle;
  }

 .homeleft img {
   width: 100%;
   object-fit: contain;
  }
 .hometopright { 
     background-color: #D3D1C3;
     padding: 0vw;
     padding-left: 0vw;
     width: 60%;
     display: inline-block;
     /*border: solid black;*/
     //margin-left: 3vw;
     top: 0;
      vertical-align: middle;
 }
.homeright { 
     background-color: #D3D1C3;
     padding: 0vw;
     padding-left: 0vw;
     width: 40%;
     display: inline-block;
     /*border: solid black;*/
     margin-left: 10vw;
     top: 0;
      vertical-align: middle;
 }
.learnimg 
{ 
     background-color: #D3D1C3;
     padding: 0vw;
     padding-left: 4vw;
     width: 55%;
     display: inline-block;
     /*border: solid black;*/
     margin-left: 4vw;
     top: 0;
      vertical-align: middle;
 }
 .homeright img {
   width: 100%;
   object-fit: contain;
  }


 .learnimg img
{
   width: 70%;
   object-fit: contain;
  }

 .homebot{
   padding-top: 2vh;
   width: 100%;
   text-align: center;
  }

 .atlasheader {
    /*font-family: 'Montserrat';*/
    font-size: 1.5rem;
    color: #37372d;
 }

 .hometext {
    /*font-family: 'Montserrat';*/
    font-size: 2.5vw;
    font-weight: 700;
    color: #37372d;
 }

 .atlasimg {
	 width: 20vw;
	 height: 20vh;
	 object-fit: cover;
 }
 .atlasimgbig {
	 width: 90%;
	 object-fit: cover;
 }

 .atlascolor {
     background-color: #D3D1C2;
 }

 /* a row that is centered across the pag*/
 .atlasrow {
     background-color: #D3D1C3;
     /*border-style: solid;*/
     text-align: left;
     display: block;
 }

 .atlas_dr_row
 {
     /*border-style: solid;*/
     text-align: left;
     margin: auto;
 }

 .atlasblock {
     background-color: #D3D1C3;
     /*border-style: solid ;*/
     border-color: #8a8354;
     /*border-width: 1.5vw;*/
     text-align: left;
     width: 100%;
     margin: auto;
     padding: 5vw;
 }

 .atlasblockwhite {
     background-color: white;
     /*border-style: solid ;*/
     border-color: #8a8354;
     /*border-width: 1.5vw;*/
     text-align: left;
 }

 .atlasbutton {
    /*background-color: black;*/
    color: white;
 }

 .imgblock {
     max-width: 20vw;
     max-height: 10vh;
     border: none;
     border-color: black;
     margin: 1vh;
 }

 .sysimgblock {
     max-width: 15vw;
     max-height: 20vh;
     width: 50vw;
     height: 50vh;
     border: none;
     border-color: black;
     margin: 1vh;
     object-fit: cover;
     border-radius: 1vw;
 }

 .blogblock {
        margin: auto;
	/*
	padding: 0px;
       	margin: auto;*/
 }

.tutorial {
  position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
/*
    margin-top: -50px;
    margin-left: -50px;
    width: 60vw;
    height: 50vh;*/
}

.storylist {
    display: grid;
    grid-template-columns: auto auto;
    gap: 5vh 4vw;
    margin: auto;
    width: 80vw;
}

.nav_sys_button {
    background-color: black;
    color: white;
    border-radius: 0.5vw;
}

.home_button {
display: table;
 vertical-align: middle;
 text-align: center;
 font-size: 1.6vw;
 background-color: black;
 color: white;
 border-radius: 0.5vw;
 width: 15vw;
}

.home_link {
font-size: 1.7vw; padding: 0.25vh 0.5vw 0.25vh 0.5vw; display: table-cell; vertical-align: middle; color: black;
}

.home_proj_img {
    width: 35vw;
    height: 35vh;
   object-fit: cover;
     border-radius: 1vw;
   
}
.home_proj_img img {
    width: 35vw;
    height: 35vh;
   object-fit: cover;
     border-radius: 1vw;
   
}
 .home_ban_img 
{
    width: 100%;
    height: 40vh;
   object-fit: contain;
}

.story_box {
background-color: #c1d8c3;
 /*height: 18vh;*/
  border-radius: 1vw; 
  width: 21vw;
font-size: 1.15vw;
text-align: center;
padding: 1.0vh 1vw 1vh 1vw;
font-weight: 700;
margin: auto auto auto auto;
}
.story_box p {
font-size: clamp(9px, 1.15vw, 20px);
margin: auto auto auto auto;
/*display: flex;
justify-content: center;
align-content: center;
flex-direction: column;*/
}