.jumbotron {
  color: #fff;
  padding-top: 80px;
  padding-bottom: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #fff;
  background-position: 50% 50%;
  position: relative;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  min-height: 100vh; }
  @media (max-width: 767px) and (orientation: landscape) {
    .jumbotron {
      min-height: 100vh; } }
  .jumbotron .container {
    position: relative;
    z-index: 1; }
  .jumbotron:before {
    position: absolute;
    display: block;
    content: "";
    opacity: 0.5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;}
  

.overlay {
  color: #fff; }
  .overlay:before {
    position: absolute;
    display: block;
    content: "";
    opacity: 0.9;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e09709;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b17607, #e09709);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b17607, #e09709);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
  .overlay.bg-white {
    color: #000; }
    .overlay.bg-white:before {
      background: #fff;
      opacity: .7; }

.text-white {
  color: #fff; }

  
.rectangle-1 {
  width: 2000px;
  height: 400px;
  opacity: 0.6;
  background: #099fe5;
  background: -webkit-linear-gradient(to right, #40b7ef, #099fe5);
  background: linear-gradient(to right, #40b7ef, #099fe5);
  transform-origin: 50% 150% 0;
  position: absolute;
  left: 0;
  z-index: 0;
  transform: scale(1) rotate(-10deg); }

.rectangle-2 {
  width: 2000px;
  height: 400px;
  opacity: 0.8;
  background: #099fe5;
  background: -webkit-linear-gradient(to right, #077cb2, #099fe5);
  background: linear-gradient(to right, #077cb2, #099fe5);
  transform-origin: 65% 100% 0;
  position: absolute;
  right: 0;
  top: -16%;
  z-index: 0;
  transform: scale(1) rotate(50deg); }

.rectangle-3 {
  width: 2000px;
  height: 400px;
  opacity: 0.8;
  background: #e39402;
  background: -webkit-linear-gradient(to right, #e19b19, #f6a91a);
  background: linear-gradient(to right, #f6a91a, #e19b19);
  transform-origin: 20% 15% 0;
  position: absolute;
  top: 15%;
  left: 0;
  z-index: 0;
  transform: scale(1) rotate(-10deg); }

/* .rectangle-3 {
  width: 2000px;
  height: 400px;
  opacity: 0.8;
  background: #077cb2;
  background: -webkit-linear-gradient(to right, #62abcc, #099fe5);
  background: linear-gradient(to right, #62abcc, #077cb2);
  transform-origin: 20% 15% 0;
  position: absolute;
  left: 0;
  z-index: 0;
  transform: scale(1) rotate(-10deg); } */

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-100vw) rotate(-15deg); }
  to {
    opacity: 1;
    transform: translateX(0) rotate(-15deg); } }

@keyframes grow1 {
  from {
    opacity: 0;
    transform: scale(2) rotate(-10deg); }
  to {
    opacity: 1;
    transform: scale(1) rotate(-10deg); } }

@keyframes grow2 {
  from {
    opacity: 0;
    transform: scale(2) rotate(50deg); }
  to {
    opacity: 1;
    transform: scale(1) rotate(50deg); } }

@keyframes fadeInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.rectangle-1 {
  opacity: 0;
  animation: grow1 ease 1s forwards;
  box-shadow: 0px 20px 30px 0px rgba(9, 21, 54, 0.25) !important; }

.rectangle-2 {
  opacity: 0;
  animation: grow2 ease 1s forwards;
  box-shadow: 0px 20px 30px 0px rgba(9, 21, 54, 0.25) !important; }

.rectangle-3 {
  opacity: 0;
  animation: grow2 ease 1s forwards;
  box-shadow: 0px 20px 30px 0px rgba(9, 21, 54, 0.25) !important; }

.rectangle-transparent-1 {
  width: 500px;
  height: 500px;
  border: 15px solid rgba(255, 255, 255, 0.06);
  position: absolute;
  left: -5%;
  bottom: -10%;
  display: block;
  animation: floating-slow ease-in-out 6s infinite; }

.rectangle-transparent-2 {
  width: 600px;
  height: 600px;
  border: 15px solid rgba(255, 255, 255, 0.06);
  position: absolute;
  right: -10%;
  top: 5%;
  display: block;
  animation: floating-slow ease-in-out 6s infinite; }

.circle-1 {
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  position: absolute;
  display: block;
  border-radius: 50%;
  transform-origin: 50% 50%;
  left: 5%;
  top: 50%;
  animation: fadeInFromTop .5s linear forwards, floating ease 4s infinite; }

.circle-2 {
  width: 70px;
  height: 70px;
  top: 20%;
  left: 83%;
  border: 2px solid #fff;
  position: absolute;
  display: block;
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 4s infinite; }

.circle-3 {
  top: 80%;
  right: 25%;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 4s infinite; }

@keyframes floating {
  0% {
    transform: translate(0%, 0%) rotate(25deg); }
  25% {
    transform: translate(5%, 15%) rotate(25deg); }
  50% {
    transform: translate(10%, 5%) rotate(25deg); }
  75% {
    transform: translate(0%, 15%) rotate(25deg); }
  100% {
    transform: translate(0%, 0%) rotate(25deg); } }

@keyframes floating-slow {
  0% {
    transform: translate(0%, 0%) rotate(25deg); }
  25% {
    transform: translate(1%, 3%) rotate(25deg); }
  50% {
    transform: translate(2%, 1%) rotate(25deg); }
  75% {
    transform: translate(0%, 3%) rotate(25deg); }
  100% {
    transform: translate(0%, 0%) rotate(25deg); } }

.triangle {
  position: absolute; }

.triangle-1 {
  right: 0;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 6s infinite; }
  .triangle-1 img {
    height: 50px;
    width: 50px;
    transform: rotate(30deg); }

.triangle-2 {
  top: 30%;
  left: 20%;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 8s infinite; }
  .triangle-2 img {
    width: 75px;
    height: 75px;
    transform: rotate(15deg); }

.triangle-3 {
  top: 80%;
  left: 15%;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 10s infinite; }
  .triangle-3 img {
    width: 45px;
    height: 45px;
    transform: rotate(40deg); }

.triangle-4 {
  top: 60%;
  right: 15%;
  animation: fadeInFromTop .5s linear forwards, floating ease-in-out 5s infinite; }
  .triangle-4 img {
    width: 45px;
    height: 45px;
    transform: rotate(-40deg); }