/* Blue #424E63 rgba(66,78,99,1) */

.preload{
        background-image:url('/imageserver/Reusable/custom-builders/booth/carousel1-min.png'),url('/imageserver/Reusable/custom-builders/booth/carousel2-min.png'),url('/imageserver/Reusable/custom-builders/booth/carousel3-min.png'),url('/imageserver/Reusable/custom-builders/booth/carousel4-min.png');
    }
    .preload2{
        background-image:url('/imageserver/Reusable/custom-builders/booth/house1-lg.png'),url('/imageserver/Reusable/custom-builders/booth/house2-lg.png'),url('/imageserver/Reusable/custom-builders/booth/house3-lg.png'),url('/imageserver/Reusable/custom-builders/booth/house4-lg.png'),url('/imageserver/Reusable/custom-builders/booth/house5-lg.png'),url('/imageserver/Reusable/custom-builders/booth/house6-lg.png');
    }
.maincontent{
    max-width:100%;
}

.html ,body{
    font-size:18px;
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.row{
    margin:0 !important;
    padding:0 !important;
}
h1, h2, h3, h4{
    font-family: 'Noto Sans JP', sans-serif;
}
p, h5{
    font-family: 'Roboto', sans-serif;
}
h1{
font-size: calc(4vw + 1rem);
}

h2{
    font-size:3.2rem;
}
h3{
    font-size:2.5rem;
}
h4{
    font-size:2rem;
}
h5{
    font-size:1.5rem;
}
p{
    font-size:1rem;
}
ul li{
    list-style-type: none;
}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}

[class*="col-"] {
    float: left;
    padding:0 !important;
    margin:0 !important;
    
  }
.myButton {
    margin-top:20px;
	background-color:#fff;
	border-radius:28px;
	border:1px solid #402c1a;
	display:inline-block;
	cursor:pointer;
	color:#402c1a;
    font-family: 'Acme', sans-serif;
	font-size:1.2rem;
    letter-spacing:1.2px;
	padding:14px 31px;
	text-decoration:none;
    transition:.1s;
	text-shadow:0px 1px 0px #fff;
    -webkit-box-shadow: 3px 5px 4px -3px #000000; 
box-shadow: 3px 5px 4px -3px #000000;
}
.myButton:hover {
    background-color:#c7b299;
    text-shadow:0px 0px 0px #fff;
    color:#fff;
    -webkit-box-shadow: 3px 2px 1px -3px #000000; 
box-shadow: 3px 2px 1px -3px #000000;
transform:scale(0.98);
}
.myButton:active {
	position:relative;
	top:1px;
}
.st1{
    stroke: #ececec;
}

.st2{
    stroke: #B09253;
}
.st3{
    stroke:#ADADAD;
}
.st4,
.outline {
    fill: none;
    stroke: #8c6239;
    stroke-width: 1.1407;
    stroke-linecap: round;
    stroke-linejoin: round
}
#outline{
    stroke: #ececec;
    stroke-width:3.416;
    fill:#424E63; 
    opacity:0;
    animation: outline 3s linear forwards;
    stroke-dasharray:2790;
    stroke-dashoffset:0;
}
@keyframes outline {
    from{
        opacity:0;
        stroke-dashoffset:2790;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
  
#floor {
    /* stroke: #8c6239; */
    stroke-width: 1.1407;
    fill: none;
    opacity:0;
    animation: floor 15s 3s linear forwards;
    -webkit-animation: floor 15s 3s linear forwards;
    stroke-dasharray:2835;
    stroke-dashoffset:2835;
}
@keyframes floor {
    0%{
        opacity:1;
        stroke-dashoffset:2835;
    }
    100%{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
  @-webkit-keyframes floor {
    0%{
        opacity:1;
        stroke-dashoffset:2835;
    }
    100%{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
#walls {
    stroke-width: 1.1407;
    fill: none;
    opacity:0;
    stroke-dasharray:4256;
    stroke-dashoffset:4256;
    animation: walls 20s 4s;
    -webkit-animation: walls 20s 4s forwards;
}
@keyframes walls {
    0%{
        opacity:1;
        stroke-dashoffset:4256;
    }
    100%{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
@-webkit-keyframes walls {
    from{
        opacity:1;
        stroke-dashoffset:4256;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
#windows {
  opacity:0;
  animation: windows 30s 4.5s linear forwards;
  -webkit-animation: windows 30s 4.5s linear forwards;
  stroke-dasharray:7210;
  stroke-dashoffset:7210;
}
@keyframes windows {
    from{
        opacity:1;
        stroke-dashoffset:7210;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
@-webkit-keyframes windows {
    from{
        opacity:1;
        stroke-dashoffset:7210;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
#roof {
  opacity:0;
  animation: roof 15s 5s linear forwards;
  -webkit-animation: roof 15s 5s linear forwards;
  stroke-dasharray:4663;
  stroke-dashoffset:4663;
}
@keyframes roof {
    from{
        opacity:1;
        stroke-dashoffset:4663;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
@-webkit-keyframes roof {
    from{
        opacity:1;
        stroke-dashoffset:4663;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
#roof-top {
  opacity:0;
  animation: roof-top 15s 5s linear forwards;
  -webkit-animation: roof-top 15s 5s linear forwards;
  stroke-dasharray:2471;
  stroke-dashoffset:2471;
}
@keyframes roof-top {
    from{
        opacity:1;
        stroke-dashoffset:2790;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
@-webkit-keyframes roof-top {
    from{
        opacity:1;
        stroke-dashoffset:2790;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }
#shingles1 {
  opacity:0;
  animation: default 3s 6s linear forwards;
  -webkit-animation: default 3s 6s linear forwards;
  stroke-dasharray:585;
  stroke-dashoffset:585;
  
}
#shingles2 {
  opacity:0;
  animation: default 6s 6s linear forwards;
  -webkit-animation: default 6s 6s linear forwards;
  stroke-dasharray:1417;
  stroke-dashoffset:1417;
}
#shingles3 {
  opacity:0;
  animation: default 6s 6s linear forwards;
  -webkit-animation: default 6s 6s linear forwards;
  stroke-dasharray:808;
  stroke-dashoffset:808;
}
#shingles4 {
  opacity:0;
  animation: default 10s 6s linear forwards;
  -webkit-animation: default 10s 6s linear forwards;
  stroke-dasharray:1489;
  stroke-dashoffset:1489;
}
#shingles5 {
  opacity:1;
  animation: default 10s 6s linear forwards;
  -webkit-animation: default 10s 6s linear forwards;
  stroke-dasharray:1489;
  stroke-dashoffset:1489;
}
@keyframes default {
    from{
        opacity:1;
    }
    to{
        opacity:1;
        stroke-dashoffset: 0;    
    }
  }


#hero-house{
    position: relative;
    z-index:2;
}
.hero-container::before{
    position: absolute;
    content:"";
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image:linear-gradient(to bottom, rgba(255,255,255,.92) 25%, rgba(66,78,99,1) 100%), url('/imageserver/Reusable/custom-builders/booth/tree-bg.png');
    background-size: 100%;
    /* background-image:linear-gradient(to bottom, rgba(255,255,255,1) 25%, rgba(66,78,99,1) 100%); */
    /* z-index:-10; */
}
.hero-container{
    position: relative;
    max-height:90vh;
}
.hero{
    max-height:100vh;
    overflow:hidden;
}
.hero-container svg{
    position: relative;
    z-index:-1;
}
#hero-logo{
    position: absolute;
    top:5%;
    right:5%;
    width:100%;
    max-width:400px;
    z-index:2;
}
.hero-text-box-overlay{
    position: absolute;
    bottom:0;
    left:5%;
    z-index:2;
}
.hero-text-box .myButton{
    position: relative;
    z-index:5;
}
.hero-container .hero-text-box{
    position: relative;
    padding:42px 25px 52px 35px;
    color:#fff;  
}
.hero-text-box h1{
    transform:rotateY(90deg) translateZ(-50px);
    perspective:500px;
    transform-origin:left;
    animation: heroH1 2s 8.5s linear forwards;
}
.hero-text-box h5{
    transform:rotateY(90deg) translateZ(-50px);
    perspective:500px;
    transform-origin:left;
    animation: heroH1 2s 9s linear forwards;
}
@keyframes heroH1{
    0%{      
    }
    100%{
        transform:rotateY(0deg) translateZ(0);
    
    }
}
.hero-text-box::before{
    position: absolute;
    content:"";
    top:0;
    left:0;
    height:75%;
    width:5px;
    background:#fff;
    transform:scaleY(0);
    animation: heroBefore 2s 7s linear forwards;
}
/* .hero-text-box::after{
    position: absolute;
    content:"";
    top:0;
    left:0;
    height:100%;
    width:0;
    border:5px solid #fff;
    border-right:0;
    border-left:0;
    animation: heroAfter 2s 7s linear forwards; 
} */
.hero-text-box h5{
    text-transform: uppercase;
}
@keyframes heroAfter {
    0%{
        width:0%
    }
    100%{
        width:30%;
    }
}
@keyframes heroBefore{
    0%{
        transform:scaleY(0);
    }
    100%{
        transform:scaleY(1);
    }
    
}
.divider{
    margin: 0;
    padding:2%;
    color:#ececec;
    background:#424E63;
    position:relative;
    overflow:hidden; 
    /* border-top:1px solid #ddd;
    border-bottom:1px solid #ddd; */
    }
    
.divider:before {
    content: ""; 
    position:absolute; 
    z-index: 1; 
    width:96%;  
    top: -10px; 
    height: 10px; 
    left: 2%; 
    border-radius: 100px / 5px; 
    box-shadow:0 0 18px rgba(0,0,0,0.6); 
    }
.divider:after {
    content: "";
    position:absolute;
    z-index: 1;
    width:96%; 
    bottom: -10px;
    height: 10px;
    left: 2%;
    border-radius: 100px / 5px;
    box-shadow:0 0 18px rgba(0,0,0,0.6);
    }
.divider img{
    float:left;
    padding:0 8px;
}
.divider h5{
    margin:8px 0 0;
    padding:0;
}
.divider .row .col-2{
    display:flex;
    justify-content:center;
    align-items:center;
}
/* ====================================== Main Section ========================================= */



.main-section-wrapper{
   padding:6% 4%;
}
.carousel-container{
    margin:5% auto ;
    left:0;
    top:0;
    max-width:600px;
    animation:animate 40s linear infinite;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    }
    .outer::before{
        content:"";
        position:absolute;
        left:-3%;
        top:-3%;
        width:30%;
        height:30%;
        background:#C7B299;
        z-index:-1;
    }
    .outer::after{
        content:"";
        position:absolute;
        right:-3%;
        bottom:-4%;
        width:30%;
        height:30%;
        background:#C7B299;
        z-index:-1;
    }
    .outer{
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:420px;
    box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -webkit-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -moz-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
    }
    .div-line{
        margin:30px auto 0;
        width:100%;
        max-width:1500px;
        text-align:center;
    }
    .div-line img{
        margin:-8px 0;
    }
    
    .carousel-container:hover{
    animation-play-state: paused;
    }
  
    @keyframes animate {
      0%,100%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel1-min.png');    
        }
        20%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel1-min.png');    
        }
        25%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel2-min.png');
        }
        45%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel2-min.png');  
        }
        50%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel3-min.png');
        }
        70%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel3-min.png');  
        }
        75%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel4-min.png');  
        }    
        95%{
          background-image:url('/imageserver/Reusable/custom-builders/booth/carousel4-min.png');  
        }    
    }

/* ========================================= Gallery Grid ======================================================= */
.gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1;
}
.grid-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  .gallery-content p{
      font-size:1.8rem;
  }
  .gallery-content {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(255, 252, 237, 0.7);
    z-index: 3;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
  }
  .gallery-content::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width:0%;
    transform:translate(-50%, -50%);
    border-top: 0.2em solid #000;
    border-bottom: 0.2em solid #000;
  }
  .gallery-content::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0%;
    transform:translate(-50%, -50%);
    border-left: 0.2em solid #000;
    border-right: 0.2em solid #000;
  }
  .gallery-content:hover::before{
    transition:.7s linear;
    height:90%;
    width:90%;
  }
  .gallery-content:hover::after {
    transition:.7s linear;
    height:90%;
    width:90%;
  }
  .grid-item:hover {
    z-index: 3;
  }
  .grid-item:hover .gallery-content {
    opacity: 1;
    transition: .7s;
  }

/* ========================================= Designs Section ===================================================== */
.designs-section{
    background-image:linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 100% ), url('/imageserver/Reusable/custom-builders/booth/blueprint1-min.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding:3% 6%;
    
    margin:0 auto;
}
.design-slider-container{
    padding:2% 5%;
    margin:3% 0 0;
    min-height:60vh;
}
.slider{
    padding:2%;
}
.slider-img{
    max-height:500px;
    max-width:700px;
    overflow:hidden;
    box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -webkit-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -moz-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
}
.srow {
    display: none;
    
}
.row1{
    display:block;
}
.design-grid{
    display:grid;
    max-width:2000px;
    width:100%;
    margin:0 auto;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    justify-content: center;
    align-items:center;
    /* grid-template-rows: 1; */
}
.slider-grid-item{
    /* max-height:150px; */
    /* overflow:hidden; */
    /* cursor:pointer; */
    /* transition:.5s; */
    text-align:center;
}
.show:hover{
    cursor:pointer;
}
/* .slider-grid-item:hover{
    transform:scale(1.2);
} */

/* ===============================  FAQ ================================== */
.faq-column{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
   
}
.faq-section{
    padding:4%;
    background:url('/imageserver/Reusable/custom-builders/bg3-min.png');
    background-size:cover;
    background-repeat: no-repeat;
}
.collage-grid{
    display:grid;
    width:100%;
    max-width:800px;
    margin:0 auto;
}
.collage-grid img:not(.vert-line){
    -webkit-box-shadow: 5px 5px 8px 1px rgba(0,0,0,0.46); 
box-shadow: 5px 5px 8px 1px rgba(0,0,0,0.46);
}
.vert1{
    grid-column:2/6;
    grid-row:5/9;   
}
.vert2{
    grid-column:1/4;
    grid-row:3/6
}
.vert3{
    grid-column:3/6;
    grid-row:1/5;
}
.vert-line{
    grid-column:6/7;
    grid-row:2/9
}
#faq-logo{
    align-self:center;
}
.qrow {
    display: none;
}
 input[type="radio"], input[type="checkbox"]{
    display: none;
    }
    
    .btn{
        display:none;
    } 
    
     label {
        display: block;    
        padding: 8px 22px;
        margin: 0 0 1px 0;
        cursor: pointer;
        background: #fff;
        border-radius: 3px;
        border-bottom:1px solid black;
        color: #D71920;
        transition: ease .5s;
        font-size:20px;
        position: relative;  
    }
    
    label:hover {
        background: #f2f2f2;
    }
    
    label::after {
        content: '+';
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        top: 2px;
    }
    
    input:checked + label::after {
        content: '-';
        right: 14px;
        top: 3px;
    }
    
    .content {
        background: white;
        padding: 10px 25px;
        margin: 0 0 1px 0;
        border-radius: 3px;
    }
    
    input + label + .content {
        display: none;
    }
    
    input:checked + label + .content {
        display: block;
    } 


/* ========================= About Section ======================= */
.about-section-wrapper{
    padding:5% 7%;
}
.about-section-wrapper .col-3{
    padding:0 1% !important;
}
.about-section-wrapper h3{
    padding:0 0 3%;
}
.about-content-item{
    width:100%;
}
.about-content-item svg{
    float:left;
    padding:0 10px 0 0;
}
#family-group{
    height:120px;
    width:120px;
    fill:transparent;
    stroke-width:1;
    stroke:#424E63;
    stroke-dasharray:650;
    stroke-dashoffset:0;
}
#family-group:hover .familyPath{
    animation: svg-anim 2s linear forwards;
}
#tools-group{
    height:120px;
    width:120px;
    fill:transparent;
    stroke-width:1;
    stroke:#E3764F;
    stroke-dasharray:650;
    stroke-dashoffset:0;
}
#tools-group:hover .toolsPath{
    animation: svg-anim 2s linear forwards;
}
#clock-group{
    height:120px;
    width:120px;
    fill:transparent;
    stroke-width:1;
    stroke:#E3764F;
    stroke-dasharray:650;
    stroke-dashoffset:0;
}
#clock-group:hover .clockPath{
    animation: svg-anim 2s linear forwards;
}
#liberty-group{
    height:120px;
    width:120px;
    fill:transparent;
    stroke-width:1;
    stroke:#E3764F;
    stroke-dasharray:650;
    stroke-dashoffset:0;
}
#liberty-group:hover .libertyPath{
    animation: svg-anim 2s linear forwards;
}
@keyframes svg-anim{
    0%{
        stroke-dashoffset:0;
    }
    100%{
        stroke-dashoffset:650;
        fill:#1E6F96;
    }
}



/* =========================== Bottom Section ============================ */
.bottom-section{
    background:url('/imageserver/Reusable/custom-builders/bottom-bg.png');
    background-size:cover;
    background-repeat:no-repeat;
    position: relative;
}

#logo-btm{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* ========================================= Media Queries ====================================================== */
    @media screen and (max-width:1400px) {
        /* .main-section-wrapper{
            padding:6% 2%;
        } */
    }
    @media screen and (max-width:1200px) {
        .col-6{
            width:100%;
            float:none;
            flex:0 0 100%;
            max-width:100%;
        }
        .slider-img{
            width:80%;
            /* max-width: 1500px; */
            margin:0 auto;
            overflow: hidden;
        }
        .col-3{
            width:50%;
            flex:0 0 50%;
            max-width:50%;
        }
        .divider img{
            margin:0 30px;
        }
        .faq-column{
            margin-top:3%;
            order:1;
        }
        .collage-grid{
            display:flex;
            max-width:100%;
            max-height:38vw;
            overflow:hidden;
        }
        /* .collage-grid img{
            display:inline;
            float:right;
        } */
        .vert-line{
            display:none;
        }
    }
    @media screen and (max-width:992px) {
        .col-3{
            width:100%;
            flex:0 0 100%;
            max-width:100%;
        }
        .divider img{
            margin:0 5px;
        }
        .divider .col-3{
            width:50%;
            flex:0 0 50%;
            max-width:50%;
        }
        .divider .row{
            display:block;
        }
        .col-2{
            width:30%;
            max-width:30%;
            min-height:75px;
            float:left;
        }
        #logo-btm{
            width:50%;
        }
    }
    @media screen and (max-width:768px) {
        .divider .col-3{
            width:100%;
            flex:0 0 100%;
            max-width:100%;
            padding:0 15vw !important;
        }
        #logo{
            top:0;
            right:0;
            max-width:300px;
        }
        
       .gallery-grid{
            display:grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 2;
    }
    .warranty-img {
        display: none;
      }
      .btn{
         display:block;
     
      }
}
    @media screen and (max-width:700px) {
        .myButton{
            font-size:14px;
            padding:12px 16px;
        }
        .hero-container .hero-text-box {
            position: relative;
            flex-direction: column;
            align-items: center;
            display: flex;
            width:100%;
            padding:0;
            color: #ececec;
        }
        .hero-text-box::after {          
            border:0;
        }
        .hero-text-box::before {          
            height:0;
        }
        .hero-text-box h1{
            animation:none;
            transform:rotateY(0deg) translateZ(0);
        }
        .hero-text-box h5{
            animation:none;
            transform:rotateY(0deg) translateZ(0);

        }
        .hero-text-box-overlay{
            left:0;
            bottom:15%;
            width:100%;
        }
        .design-slider-container{
            padding:2% 5%;
            margin:3% 0 0;
            min-height:60vh;
            text-align:center;
        }
        .vert1{
            display:none;
        }
    }
    @media screen and (max-width:500px) {
        html, body{
            font-size:14px;
        }
        #logo{
            display:none;
        }
        .divider .col-3{
            padding:0 !important;
        }
        .outer{
            height:200px;;
        }
    }
    @media screen and (max-width:400px) {
        html, body{
            font-size:12px;
        }
       .vert3, .vert2{
            display:none;
    }
}
    @media screen and (max-width:300px) {
       [title~=icons]{
        display:none;
       }
     .hero-text-box{
         text-align:center;
     }
}