body{font-family: 'Noto Sans JP', sans-serif;}

ul {display: flex;
}
li {margin-right: 10px;}

ul li a{font-size: 10pt;}
.max100{max-width: 100%;}
.maxHeight100{max-height: 100;}
.nav-item .nav-link{font-size: 10pt;text-align: center;}
.centerText{
    text-align: center;
}
.centerImage{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.whiteDiv{
    background-color: white;
}

.indexSection1{
  background-color:#343a40;
}

.indexOfferSection{
    padding-top: 6%; 
    padding-bottom: 6%;
}
.margin10{margin-top: 10%;  margin-bottom: 10%;}
.comp1{margin-left: -20%;}
.comp2{margin-left: 20%;}
.indexSection2{ padding: 4%; background-color:  #fff;color: #fff;}
footer{background-color: #343a40;padding-top: 2%; color: #fff;margin-top: 5%;}
.card{background-color: #fff;color: #343a40;}

.indexSection4{background-color: #343a40;color: #fff;padding: 7%;}

.noPad{padding-left: 0px;padding-right: 0px;}

.prodText{font-size: 14pt;}
.prodImgRow{margin-top:3%;margin-bottom: 3%;}
.prodTitle{background-color: #343a40;}




/*Lightbox*/

  * {
    box-sizing: border-box;
  }
  
  .row > .column {
    padding: 0 8px;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .column {
    float: left;
    width: 25%;
  }
  
  /* The Modal (background) */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
  }
  
  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
  }
  
  /* The Close Button */
  .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  .mySlides {
    display: none;
  }
  
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  img {
    margin-bottom: -4px;
  }
  
  .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
  }
  
  .demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  }
  
  img.hover-shadow {
    transition: 0.3s;
  }
  
  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }



  /*Index*/

  .indexLgImg, .aboutLgImg,.prodAcmImg,.prodImg{width:75%;height:70vh;}
  .offerText{margin-bottom: 10%;}
  .indexOfferImg{display: block;margin-left: auto;margin-right: auto; width: 100%; text-align: center;height: 80%;}
/*About*/
.aboutTitle,.aboutText{padding-bottom: 6%;}
.recentWork{font-size: 32pt; margin-top: -5%; margin-bottom: 5%;}

/*ProdACM*/
.acmTitle{text-align: center; margin: 5% 0%;}


/*Contact*/
.contactText{margin-top: 5%;margin-bottom: 5%;}
.mapAddr{color: #343a40;}
.contRadioText{font-size: 14pt; color: #343a40;}
  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /*Index*/
  .comp1{margin-left: 20%; margin-top: 4%;}
  .comp2{margin-left: 20%;margin-top: 4%;}
  .indexInstructions{font-size: 10pt;}
  .indexLgImg,.aboutLgImg,.prodImg,.contactLgImg{height: 40vh;padding-top: 10%;}
  .businessQuote{font-size: 14pt;}
  .indexOfferPic{height: 40%;}
  .offerText{font-size: 24pt;}
  /*about*/
  .aboutTitle{font-size: 24pt;}
  .aboutText{font-size: 14pt;margin-top: 6%;}
  .recentWork{font-size: 24pt;}
  .aboutRecentLg,.prodHoverText{font-size: 16pt;}
  /*Prod*/
  .prodMargin{margin-top:10%;
  margin-bottom: 5%;}
  /*prodACM*/
  .acmTitle{font-size: 24pt;margin: 15% 0%;}
/*Contact*/
.contactLgImg{margin-bottom: 20%;}
.mapAddr{font-size: 14pt;}
}
.formTitle{font-size: 14pt; margin-top: 5%;}
.contRadioText{font-size: 10pt;}
.box{font-size: 12pt; margin-left: 10%;}

div#comparison,div#comparison2 { 
  width: 60vw;
  height: 60vw;
  max-width: 600px;
  max-height: 600px;
  overflow: hidden; }
div#comparison figure,div#comparison2 figure { 
  background-image: url("../images/before.jpg"); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison2 figure{background-image: url("../images/before2.jpg");}
div#comparison figure > img, div#comparison2 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison figure div, div#comparison2 figure div{ 
  background-image: url("../images/after.jpg");
  background-size: cover;
  position: absolute;
  width: 100%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}
div#comparison2 figure div{background-image: url("../images/after2.jpg");}

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -2rem; left: -2%;
  background-color: rgba(255,255,255,0.1);
  width: 102%; 
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: #343A40; 
    position: relative;
    outline: none;    
 }
input[type=range]::active { 
  border: none; 
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 20px; height: 15px;   
    background: #fff;
    border-radius: 0;
   }
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 20px;
  height: 15px;
  background: #fff;
  border-radius: 0;
     }   
input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(255,255,255,0.5);
   }
input[type=range]:focus::-moz-range-thumb {
    background: rgba(255,255,255,0.5);
   }



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}