body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 64px;
  color: #000;
  position: absolute;
  top: 480px;
  left: 19.5%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #8c8c8c;
  position: absolute;
  top: 600px;
  left: 20%;
  width: 50%;
}

.footer {
  position: absolute;
  top: 1600px;
  left: 0%;
}


  /*RESPONSIVE*/
@media (min-width: 240px) and (max-width: 359.98px) and (orientation: portrait)  { 
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}


.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  color: #000;
  position: absolute;
  top: 240px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #8c8c8c;
  position: absolute;
  top: 290px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1100px;
  left: 0%
}
}
  
@media (min-width: 360px) and (max-width: 575.98px) and (orientation: portrait) {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 210px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}


.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #000;
  position: absolute;
  top: 250px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  position: absolute;
  top: 320px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1250px;
  left: 0%
}
}

@media (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 240px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  color: #000;
  position: absolute;
  top: 280px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 360px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1300px;
  left: 0%
}
}
     
@media  (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  color: #000;
  position: absolute;
  top: 300px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #8c8c8c;
  position: absolute;
  top: 390px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1400px;
  left: 0%
}
}
     
@media (min-width: 992px) and (max-width: 1199.98px) and (orientation: portrait)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 350px;
  left: 4.5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #8c8c8c;
  position: absolute;
  top: 450px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.footer {
  position: absolute;
  top: 1450px;
  left: 0%
}
}

@media  (min-width: 1200px) and (max-width: 1399.98px)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 48px;
  color: #000;
  position: absolute;
  top: 370px;
  left: 14.5%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 470px;
  left: 15%;
  width: 60%;
}

.footer {
  position: absolute;
  top: 1350px;
  left: 0%;
}  
}
     
@media  (min-width: 1400px) and (max-width: 1599.98px)  { 
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 48px;
  color: #000;
  position: absolute;
  top: 370px;
  left: 14.5%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 470px;
  left: 15%;
  width: 60%;
}

.footer {
  position: absolute;
  top: 1350px;
  left: 0%;
}     
}
     
@media  (min-width: 3840px) and (max-width: 7679.98px)  {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 800px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 128px;
  color: #000;
  position: absolute;
  top: 960px;
  left: 19.5%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  color: #8c8c8c;
  position: absolute;
  top: 1200px;
  left: 20%;
  width: 50%;
}

.footer {
  position: absolute;
  top: 3200px;
  left: 0%;
}  
}
     
@media  (min-width: 7680px) and (max-width: 7681px) {
body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 1600px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}     

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 256px;
  color: #000;
  position: absolute;
  top: 1920px;
  left: 19.5%;
}

.text {
  font-family: 'Open Sans', sans-serif;
  font-size: 80px;
  color: #8c8c8c;
  position: absolute;
  top: 2400px;
  left: 20%;
  width: 50%;
}

.footer {
  position: absolute;
  top: 6400px;
  left: 0%;
}    
}





/* LANDSCAPE RESPONSIVE*/
@media (min-width: 500px) and (max-width: 639.98px) and (orientation: landscape) {
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 210px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}


.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 26px;
  color: #000;
  position: absolute;
  top: 250px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #8c8c8c;
  position: absolute;
  top: 320px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1250px;
  left: 0%
}
}

@media (min-width: 640px) and (max-width: 811.98px) and (orientation: landscape) {
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 240px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 36px;
  color: #000;
  position: absolute;
  top: 280px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #8c8c8c;
  position: absolute;
  top: 360px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1300px;
  left: 0%
}
}

@media (min-width: 812px) and (max-width: 959.98px) and (orientation: landscape) {
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 250px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  color: #000;
  position: absolute;
  top: 300px;
  left: 5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  color: #8c8c8c;
  position: absolute;
  top: 390px;
  left: 5%;
  width: 90%;
  text-align: justify;
}


.footer {
  position: absolute;
  top: 1400px;
  left: 0%
}
}

@media (min-width: 960px) and (max-width: 999.98px) and (orientation: landscape) {
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 350px;
  left: 4.5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #8c8c8c;
  position: absolute;
  top: 450px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.footer {
  position: absolute;
  top: 1450px;
  left: 0%
}
}

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {
    body {
  background-color: #fff;
}

.banner-container {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 1;
}

.banner-shadow {
  background-image: linear-gradient(to bottom, #000, #00000000);
  width: 100%;
  height: 20%;
  position: absolute;
  top: 0px;
  left: 0%;
  z-index: 98;
}

.banner-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  object-fit: cover;
}

.header {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  color: #000;
  position: absolute;
  top: 350px;
  left: 4.5%;
}

.text { 
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #8c8c8c;
  position: absolute;
  top: 450px;
  left: 5%;
  width: 90%;
  text-align: justify;
}

.footer {
  position: absolute;
  top: 1450px;
  left: 0%
}
}