body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

.cta-wrapper {
    display: inline-block;
    margin-top: 20px;
}

.cta {
    display:inline-block;
    border: 1px solid #8C6239;
    padding: 15px 25px;
    color:#0D3440;
    transition:.3s;
    box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.1);
}
.cta:hover{
    text-decoration:none;
    transform:scale(.99);
    transition:.3s;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.3);
}

img {
    width: 100%;
}

p {
    font-weight: 200;
}



.divider {
    height: 1px;
    z-index: 5;
    background: #000;
    margin: 50px auto 50px;
    position: relative;
    max-width: 50%;
    background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(50, 50, 50) 50%, rgb(255, 255, 255) 100%);
}

.title{
    font-weight:700;
}

.modal-dialog{
    width:70%;
}

.hero {
    background-color: rgba(217, 185, 154, 0.2);
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 2%;
    /* max-height:40vw; */
}

.hero-grid-left {
    align-self: center;
    max-width: 700px;
    padding:0 50px;
}

.hero-grid-left h1 {
    font-weight: 200;
}

.hero-grid-center {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
    justify-self: flex-start;
    display: grid;
    margin: 30px 0 0 -50px;
}

#overlay-img {
    grid-column: 1/2;
    grid-row: 1/2;
}

#overlay-text {
    grid-column: 1/2;
    grid-row: 1/2;
    align-self: flex-end;
    justify-self: center;
    margin-bottom: 2vw;
    letter-spacing:10px;
    z-index: 2;
    text-align:center;
}
#overlay-text h2{
    margin:1vw;
}

.hero-grid-right {
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: flex-end;
    /* max-height:40vw; */
    object-fit: cover;
}

.section1 {
    padding: 5% 2% 2%;
}

.sec1-wrapper{
    max-width:1400px;
    display:grid;
    grid-template-columns: repeat(2, 50%);
    margin:0 auto;
    align-items:center;
}

.types-section{
    padding-top:20px;
    background-color: #fafafa;
}

.flex-group{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap:wrap;
}

.flex-item{
    max-width:400px;
    text-align: center;
}

.sec3-header {
    text-align: center;
    margin: 0 auto 0px;
    max-width: 1400px;
    padding: 0 3%;
}

.sec3-wrapper {
    margin: 0 auto;
    padding: 0 5%;
    /* min-height:40vw; */
}

.style-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgba(217, 185, 154, 0.2);
    border-top: 1px solid #000;
    margin: 3% 0;
}

.description {
    place-self: center;
    max-width: 80%;
    margin: 0 auto;
}

.description h2 {
    text-transform: uppercase;
    font-weight: 200;
}

.section4 {
    margin: 5% auto;
    padding: 0 4%;
}
.sec4-header{
    text-align: center;
}
.sec4-wrapper{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:50px;
}
.sec4-right{
    display:grid;
    align-items:center;
}
.collage-grid {
    position: relative;
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(50px, 75px)); */
    align-self: center;
    max-width: 800px;
}

.collage-grid img {
    margin: 3%;
    border: 4px solid #fafafa;
    display: inline;
}

.collage-text {
    display: inline;
}

.collage-left {
    grid-column: 1/4;
    grid-row: 3/6;
    position: relative;
}

.collage-right {
    grid-column: 4/7;
    grid-row: 3/16;
    position: relative;
}

.collage-top {
    grid-column: 2/5;
    grid-row: 1/4;
}

.collage-bottom {
    grid-column: 2/5;
    grid-row: 5 / 8;
    position: relative;

}

.call-collage-top {
    transform: translate(30px, 142px) scale(0);
}

.call-collage-right {
    transform: translate(-200px, 0px) scale(0);
}

.call-collage-bottom {
    transform: translate(0px, -266px) scale(0);
}

.call-collage-left {
    transform: translate(210px, -70px) scale(0);
}

.play-collage-top {
    animation: collage-anim 2s linear .2s forwards;
}

.play-collage-right {
    animation: collage-anim 2s linear 0.6s forwards;
}

.play-collage-bottom {
    animation: collage-anim 2s linear 1s forwards;
}

.play-collage-left {
    animation: collage-anim 2s linear .5s forwards;
}

@keyframes collage-anim {
    from {}

    to {
        transform: translate(0px, 0px) scale(1);
    }
}
@media screen and (max-width:1200px) {
    .sec4-wrapper{
        display:block;
        text-align:center;
    }
    .section4 ul li{
        list-style-type: none;
    }
    .collage-grid{
        margin:0 auto;
    }
}
@media screen and (max-width:1100px) {
    .hero-grid-right {
        grid-column: 2/4;
    }
    #overlay-text{
        margin-bottom:20px;
    }
    #overlay-text h2{
        margin:0;
        font-size:1.5rem;
    }
    .description{
        grid-column:1/-1;
        grid-row:2/3;
        padding:3%;
    }
    .left{
        justify-self:center;
        text-align:center;
        grid-column:1/-1;
    }
    .right{
        justify-self:center;
        text-align:center;
        grid-column:1/-1;
    }
   
}
@media screen and (max-width:992px) {
    .hero-grid-left {
        grid-column:1/-1 ;
        grid-row:1/2;
        justify-self:center;
        text-align:center;
    }
    .cta-wrapper{
        margin-top:10px;
        margin-bottom:10px;
    }
    .hero-grid-center,.hero-grid-right{
        grid-column:1/-1 ;
        grid-row:2/3;
        justify-self: center;
        margin-left:0;
    }
    .hero-grid-right img{
        max-width:70vw!important;
    }
    #overlay-text h2{
        margin:0;
        font-size:1rem;
        letter-spacing:5px;
    }
    .sec1-wrapper{
        display:block;
text-align:center;
    }
ul li{
        list-style-type: none;
    }
}
@media screen and (max-width:600px) {
    #overlay-text h2{
        display:none;
    }
    .collage-grid{
        display:block;
    }
    .collage-right,.collage-left,.collage-top{
        display:none;
    }
.modal-dialog{
        width:95%;
        text-align: center;
    }
}