@import url("../css/_default-banner-section.css");
@import url("../css/_contest-win-section.css");


.about-page-section{background-color: var(--black); color: var(--white); z-index: 1;}
.about-page-path{ opacity: 0.3; position: absolute; z-index: -1;}
.about-page-main{padding: 0 0 117px;}
.montgomery-text h2{margin-bottom: 18px;}
.montgomery-text .button{margin-top: 14px;}

.beer-icon{opacity: 0.3; margin-bottom: 40px; max-width: 57px;}
.brewdocking-text h2{margin-bottom: 18px;}
.brewdocking-text .button{margin-top: 14px;}
.map-icon-white{right: 82px; bottom: -51px; width: 76px; opacity: 0.3; position: absolute; z-index: -1;}

.rv-lifestyle-text h2{margin-bottom: 18px;}
.rv-lifestyle-text .button{margin-top: 8px;}

.about-nobo-title h2{margin-bottom: 19px;}
ul.nobo-features{margin: 0; padding-bottom: 5px;}
ul.nobo-features li{margin-bottom: 32px;}
ul.nobo-features li::before{display: none;}
.nobo-feature-desc strong{margin-bottom: 2px; display: block; font-size: 20px; line-height: 24px;}

/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .default-banner-section{min-height: 850px;}
    .default-banner-main{min-height: 850px; padding-bottom: 292px; align-items: flex-end; display: flex; flex-wrap: wrap;}

    .about-page-path{top: -110px; left: 0;}

    .montgomery-list{display: block; position: relative; margin-bottom: 72px;}
    .montgomery-image{width: calc(100% - 720px); top: -192px; position: absolute; z-index: 1;}
    .montgomery-image picture{min-width: 820px; margin-left: -150px;}
    .surfboard-icon{right: 192px; bottom: -23px; max-width: 86px; position: absolute; opacity: 0.3; z-index: -1;}
    .montgomery-text{width: calc(100% - 720px);margin-left: auto;padding-top: 168px;margin-right: 176px;position: relative;z-index: 2;}

    .intro-icon{right: -117px; top: -48px; opacity: 0.25; position: absolute;}

    .brewdocking-list{flex-direction: row-reverse;}
    .brewdocking-image{width: calc(100% - 720px); z-index: 1;}
    .brewdocking-text{width: 580px; margin-right: 140px;}
    .brewdocking-icon{left: 324px; top: -10px; max-width: 70px; position: absolute; opacity: 0.3; z-index: -1;}
    .brewdocking-image picture{min-width: 730px;}


    picture.rv-lifestyle-bg{height: 800px;}
    .rv-lifestyle-main{height: 100%; min-height: 800px; align-items: flex-end;}
    .rv-lifestyle-image{width: 660px;}
    .rv-lifestyle-text{width: calc(100% - 660px);}

    .about-nobo-main{padding-top: 180px; margin-bottom: 50px;}
    .about-nobo-title{max-width: 485px; margin-bottom: 29px;}
    .about-nobo-main{flex-direction: row-reverse;}
    .about-nobo-text{width: 545px; margin-right: 135px; padding-top: 52px;}
    .about-nobo-image{width: calc(100% - 680px);}
    .about-nobo-image picture{min-width: 770px;}
}
@media only screen and (min-width: 768px){
    .rv-lifestyle-pos{left: 0; right: 0; top: auto; bottom: -180px; max-width: 1300px; margin: 0 auto;}
    .rv-lifestyle-text{padding: 57px 73px 75px 67px; background-color: var(--white-90);}

    .nobo-feature-icon{width: 67px; margin-right: 28px;}
    .nobo-feature-desc{width: calc(100% - 95px);}
}
@media only screen and (max-width: 1599px) and (min-width: 1024px){
    .about-page-path{left: -90px;}
}
@media only screen and (max-width: 1299px) and (min-width: 1024px){
    .montgomery-image{width: calc(100% - 620px);}
    .montgomery-image picture{min-width: 620px;}
    .montgomery-text{width: calc(100% - 440px); padding-top: 80px; margin-right: 0;}
    .surfboard-icon{right: 75px;}
    .intro-icon{right: 57px; top: -141px;}

    .brewdocking-text{width: 520px; margin-right: 70px;}
    .brewdocking-image{width: calc(100% - 590px);}


    .rv-lifestyle-image{width: 460px;}
    .rv-lifestyle-text{width: calc(100% - 460px); padding: 47px 50px 75px;}
    .about-nobo-text{width: 525px; margin-right: 70px;}
    .about-nobo-image{width: calc(100% - 595px);}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .about-page-path{bottom: 0; left: 0;}
    .about-page-main{padding: 30px 0 93px;}

    .montgomery-list{display: block; margin-bottom: 40px; position: relative;}
    .montgomery-image{margin-bottom: 47px; width: calc(100% + 40px); left: -20px; position: relative;}
    .montgomery-text .button{margin-top: 6px;}
    .intro-icon{top: 254px; right: 9px; max-width: 53px; opacity: 0.25; position: absolute;}

    .brewdocking-list{display: block; position: relative;}
    .brewdocking-image{margin-bottom: 42px; width: calc(100% + 40px); left: -20px; position: relative;}
    .beer-icon{top: -44px; right: 99px; position: absolute;}
    .brewdocking-text .button{margin-top: 6px;}

    .rv-lifestyle-pos{position: static;}
    .rv-lifestyle-main{display: block; padding: 0 0 80px;}
    .rv-lifestyle-image{margin-top: -170px; margin-bottom: 40px;}
    .rv-lifestyle-text{padding: 0;}
    .about-nobo-main{display: block; padding: 0 0 80px;}
    .about-nobo-image{margin-bottom: 40px;}
    .about-nobo-title{margin-bottom: 30px;}
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .default-banner-section{min-height: 700px;}
    .default-banner-main{min-height: 700px; padding-bottom: 127px; align-items: flex-end; display: flex; flex-wrap: wrap;}
    h1{margin-bottom: 8px;}
    h2{font-size: 32px; line-height: 36px; letter-spacing: -0.3px;}

    .about-page-path{top: 190px; left: 15px;}
    .about-page-main{padding: 0 0 93px; margin-top: -100px;}
    .montgomery-list{display: block; margin-bottom: 40px; position: relative;}
    .montgomery-image{margin-bottom: 47px; width: calc(100% + 40px); left: -20px; position: relative;}
    .montgomery-text .button{margin-top: 6px;}
    .intro-icon{top: 154px; right: 9px; max-width: 53px; opacity: 0.25; position: absolute;}

    .brewdocking-list{display: block; position: relative;}
    .brewdocking-image{margin-bottom: 42px; width: calc(100% + 40px); left: -20px; position: relative;}
    .beer-icon{top: -44px; right: 119px; position: absolute; z-index: -1;}
    .brewdocking-text .button{margin-top: 6px;}
    .map-icon-white{bottom: -73px;}

    .rv-lifestyle-section{z-index: 1;}
    .rv-lifestyle-pos{position: static;}
    .rv-lifestyle-main{display: block; padding: 0 0 40px;}
    .rv-lifestyle-image{margin-top: -47px; margin-bottom: 21px;}

    .about-nobo-main{display: block; padding: 0 0 6px;}
    .about-nobo-image{margin-bottom: 22px;}
    .about-nobo-title{margin-bottom: 23px;}
    .about-nobo-title h2{margin-bottom: 14px;}
    ul.nobo-features li{display: block; margin-bottom: 42px;}
    .nobo-feature-icon{margin-bottom: 14px;}
}