section{
    width: 100%;
    height: 0;
    padding-bottom: 52%;
    position: relative;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
}
.dt-about{
    width: 33%;
    margin: 40px auto 0;
    line-height: 1.7em;
}
h1{color: #fff;}
h2{
    font-family: 'montserratblack';
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
}
h3{margin-bottom: 10px;}
.sec2{top: 22%;}
.sec3{text-align: left;}
.sec4{text-align: left; padding-left: 64%;}
.sec5{top: 26%; text-align: left;}
main{margin-bottom: 90px;}
.bx-joinus{
    background: #fbb813;
    color: #fff;
    height: 74px;
    line-height: 74px;
    text-align: center;
    font-size: 18px;
}
.bx-joinus a{
    color: #333;
    font-family: 'montserratblack';
    text-transform: uppercase;
    padding-left: 5px;
}
.bx-joinus a:hover{color: #fff;}
@media screen and ( max-width:1700px ) {
.dt-about{
    width: 50%;
}
}
@media screen and ( max-width:1500px ) {

}
@media screen and ( max-width:1240px ) {
.dt-about{
    width: 60%;
}
}
@media screen and ( max-width:991px ) {
main {padding-top: 60px;}
.sec3 .container{padding-right: 50%;}
.sec5 .container{padding-right: 60%;}
.dt-about { margin: 20px auto 0;}
}
@media screen and ( max-width:800px ) {
.sec2 h3 { margin-bottom: 5px;}
.sec2 .dt-about { margin: 10px auto 0;}
}
@media screen and ( max-width:768px ) {
.sec4 { padding-left: 50%;}
}
@media screen and ( max-width:500px ) {
section { padding-bottom: 70%;}
.sec4 .container{padding-left: 0;}
.sec2, .sec5 {top: 35%;}
.dt-about { width: 90%; line-height: 1.5em; margin: 10px auto 0;}
}
@media screen and ( max-width:440px ) {
.sec5 {top: 43%;}
.sec2{padding: 0 30px; top: 50%;}
.sec4 {top: 35%;}
.bx-joinus {
    height: auto;
    line-height: 34px;
    padding: 25px 20%;
}
}