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

.screen-container {
    position: relative;
    width: 95%;
    height: 100vh;
    margin: 0 auto;
}

.section1-img {

    width: 100%;
    height: 100%;
}

img {
    
    width: 100%;
}
.section1,.section2,.section3,.section4,.section5,.section6,.section7,.section8,.section9,.section10,.section11,.section12,.section13,.section14,.section15,.section16,.section17,.section18,.section19,.section20,.section21{
    position: relative;
    margin-bottom: 30px;
}

.caption {
    position: absolute;
    font-size: 14px;
   
}

button {
    background: none;
    border: none;
}

.navLinks {
    position: relative;
    height: 2em;
}
.shape1{
    background: url(../img/shape1.png) no-repeat;
}

.shape2{
    background: url(../img/shape2.png) no-repeat;
}
.shape3{
    background: url(../img/shape3.png) no-repeat;
}
.shape4{
    background: url(../img/shape4.png) no-repeat;
}
.shape5{
    background: url(../img/shape5.png) no-repeat;
}
.shape6{
    background: url(../img/shape6.png) no-repeat;
}
.shape7{
    background: url(../img/shape7.png) no-repeat;
}
.shape8{
    background: url(../img/shape8.png) no-repeat;
}
.shape9{
    background: url(../img/shape9.png) no-repeat;
}
.shape10{
    background: url(../img/shape10.png) no-repeat;
}
.shape11{
    background: url(../img/shape11.png) no-repeat;
}
.shape12{
    background: url(../img/shape12.png) no-repeat;
}
.shape13{
    background: url(../img/shape13.png) no-repeat;
}
.shape14{
    background: url(../img/shape14.png) no-repeat;
}
.shape15{
    background: url(../img/shape15.png) no-repeat;
}
.shape16{
    background: url(../img/shape16.png) no-repeat;
}
.shape17{
    background: url(../img/shape17.png) no-repeat;
}
.shape18{
    background: url(../img/shape18.png) no-repeat;
}
.shape19{
    background: url(../img/shape19.png) no-repeat;
}
.shape20{
    background: url(../img/shape20.png) no-repeat;
}
.shape21{
    background: url(../img/shape21.png) no-repeat;
}

 .display-none{
    display: none;
} 
p{
    padding-left: 10px;
}
.navLinks{
    padding-left: 10px;
}

.section12 p{
    padding-right: 15px;
    padding-left: 0px;
}
.section12 .navLinks{
    padding-right: 15px;
    padding-left: 0px;
}
.section16 p{
    padding-right: 20px;
    padding-left: 0px;
}
.section16 .navLinks{
    padding-right: 20px;
    padding-left: 0px;
}
.section1 p{
    padding-left: 0px;
}
.section1 .navLinks{
    padding-left: 0px;
}
.section10 p{
    padding-right: 20px;
    padding-left: 0px;

}
.section10 .navLinks{
    padding-right: 20px;
    padding-left: 0px;
}
.section11 p{
    padding-right: 0px;
    padding-left: 10;

}
.section11 .navLinks{
    padding-right: 0px;
    padding-left: 10;
}
.section4 p{
    padding-right: 0px;
    padding-left: 10px;

}
.section4 .navLinks{
    padding-right: 15px;
    padding-left: 0;
}
.section5 p{
    padding-right: 15px;
    padding-left: 0px;

}
.section5 .navLinks{
    padding-right: 15px;
    padding-left: 0;
}
.section6 p{
    padding-right: 0px;
    padding-left: 10px;

}
.section6 .navLinks{
    padding-right: 0px;
    padding-left: 10;
}
.section7 p{
    padding-right: 0px;
    padding-left: 0;
    padding-top: 10px;

}
.section7 .navLinks{
    padding-right: 20px;
    padding-left: 0;
}
.section9 p{
    padding-right: 20px;
    padding-left: 0;

}
.section9 .navLinks{
    padding-right: 20px;
    padding-left: 0;
}
.section13 p{
    padding-right: 0px;
    padding-left: 15px;

}
.section13 .navLinks{
    padding-right: 0px;
    padding-left: 15px;
}
.section14 p{
    padding-left: 0px;
    padding-right: 15px;

}
.section14 .navLinks{
    padding-left: 0px;
    padding-right: 15px;
}
.section19 p{
    padding-left: 0px;
    padding-right: 15px;

}
.section19 .navLinks{
    padding-left: 0px;
    padding-right: 15px;
}


/**mediaquery starts here**/

@media(min-width:1441px) and (max-width:2000px){
    .section5 .caption{
        left: 29% !important;
    }
    .section7 .caption{
        left: 82% !important;
    }
    .section9 .caption{
        left: 32% !important;
    }
    .section10 .caption{
        left: 30% !important;
    }
    .section12 .caption{
        left: 31% !important;
    }
    .section15 .caption{
        top: 73% !important;
    }
    .section16 .caption{
        left: 29% !important;
    }
    .section17 .caption{
        left: 63% !important;
        top: 77% !important;
    }
    .section18 .caption{
        left: 28% !important;
        top: 63% !important;
    }
    .section19 .caption{
        left: 32% !important;
        
    }
    .section21 .caption{
        left: 50% !important;
        top: 29% !important;
    }
}

@media(min-width:320px) and (max-width:475px){
    .section1 .shape1{
        max-width: calc(100% - 33%) !important;
        left: 33% !important;
    }
    .section1 .shape1 .beaconText div p span{
        font-size: 13px !important;
        line-height: 19px !important;
        margin-bottom: 10px !important;

    }
    .section1 .shape1 .beaconText button{
        font-size: 16px !important;
    }
    .section2 .shape2{
        max-width: calc(100% - 33%) !important;
        left: 33% !important;
    }
    .section2 .shape2 .beaconText div p span{
        font-size: 13px !important;
        line-height: 19px !important;
        margin-bottom: 10px !important;

    }
    .section2 .previous-btn1{
        font-size: 16px !important;
        margin-left: 0px !important;
    }
    .section2 .beaconText .pull-right{
        margin-right: -4px !important;
    }
    .section3 .shape3{
        left: 3% !important;
    }
}