/* boats */

/* Banner */
#banner { position: fixed; width: 100%; height: 100vh; z-index: -1; overflow: hidden; }
#banner .bg { width: 100%; height: 100vh; background-image: url('../images/banner-bgnew.jpg'); background-position: top center; background-size: cover; will-change: scale, transform; position: relative; top: 0; z-index: -1; overflow: hidden; }

#banner img { /* display: none;  opacity: 0; */}

.boats {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
}
.singleboat > img{ max-width: 100%; }
.singleboat.boat-one{position: absolute;
    top: 50%; z-index: 9; left: 50%; }
.singleboat.boat-two{position: absolute;
    top: 50%; z-index: 1; left: 50%;}
.singleboat.boat-three{position: absolute;
    top: 50%; z-index: 99; right: 50%; }
.water-one{ position: absolute; top: 50%; left: 50%; z-index: 999; }
.water-two{ position: absolute; top: 50%; right: 50%; z-index: 999; }
.water-two > img {
    width: 100% !important;
}
#our-services .row.servicebox {
    display: block;
}
.singleboat > img{ width: 100%;}

#banner .boats .boat-one, #banner .boats .boat-two, #banner .boats .boat-three{  visibility: hidden;  }

@media only screen and (min-width: 1300px){

    .boats.medium-boats .boat-one, .boats.larger-boats .boat-one {
        width: 60%;
    }
    .boats.medium-boats .boat-two, .boats.larger-boats .boat-two {
        width: 70%;
    }
    .boats.medium-boats .boat-three, .boats.larger-boats .boat-three {
        width: 50%;
    }

}

@media only screen and (max-width: 1300px){

    .boats.medium-boats .boat-one {
        width: 80%;
    }
    .boats.medium-boats .boat-two {
        width: 80%;
    }
    .boats.medium-boats .boat-three {
        width: 70%;
    }

}
@media only screen and (max-width: 1200px){
    .singleboat > img{ width: 100%; }

    .boats.smaller-boats .boat-one {
        width: 80%;
    }
    .boats.smaller-boats .boat-two {
        width: 80%;
    }
    .boats.smaller-boats .boat-three {
        width: 70%;
    }
}
@media only screen and (max-width: 980px){
    #banner{ height: 600px; }
    body.pg100 #main-content {
        margin-top: 600px;
    }
    #banner h1 { font-size: 30px;}
    #banner h1 span { font-size: 15px; }

    .boats.smaller-boats .boat-one {
        width: 60%;
    }
    .boats.smaller-boats .boat-two {
        width: 60%;
    }
    .boats.smaller-boats .boat-three {
        width: 50%;
    }

}
@media only screen and (max-width: 980px) and (min-width: 820px){
    #banner h1 { font-size: 30px; top: 170px !important;}
}
@media only screen and (max-width: 768px){
    #our-services .row{display: inline}
}
@media only screen and (max-width: 639px){

    .boats.larger-boats .boat-one, .boats.smallest-boats .boat-one {
        width: 60%;
    }
    .boats.larger-boats .boat-two, .boats.smallest-boats .boat-two {
        width: 60%;
    }
    .boats.larger-boats .boat-three, .boats.smallest-boats .boat-three {
        width: 50%;
    }
    #banner{ height: 500px; }
    body.pg100 #main-content {
        margin-top: 500px;
    }
    body.pg100 #main-content:before {
        height: 129px;
        top: -80px;
    }
    #banner h1 {
        font-size: 25px;
    }

}

@media only screen and (max-width: 576px){
    /*.singleboat.boat-one {
        position: absolute;
        top: 55%;
        z-index: 9;
        width: 130%;
    }*/

}




@media screen and (max-width: 1050px) and (min-width: 1000px) and (max-height: 790px) and (min-height: 450px){
 #banner h1 {   margin-top: -40px; font-size: 32px;z-index: 100; }
 #banner h1 span {   display: none; }
}

@media screen and (max-width: 1300px) and (min-width: 1250px) and (max-height: 790px) and (min-height: 500px){
 #banner h1 {   margin-top: -40px; font-size: 32px;z-index: 100; }
 #banner h1 span {   display: none; }
}