.yel{background-color: orange;}
.red{background-color: red;}
.green{background-color: green;}


body{
    color: #222;
}

.colorBlue{
    background-color: #F3F3F3;
  }
  
  .colorRed{
    background-color: #FF0044;
    
    
  }
  #navbar{
    
    /* background-color: #172140 !important; */
}

.redShadow{

    /* -webkit-filter: drop-shadow(0px 0px 20px #22222240);
    filter:         drop-shadow(0px 0px 20px #22222240); 
     */
    box-shadow: 3vw 3vw #FF004450;
    background-color:  #FF0044;

}

#bg1{
    /* box-shadow: 3vw 3vw #FFD43A50; */

     -webkit-filter: drop-shadow(3vw 3vw 0px #F4AC4550);
    filter:         drop-shadow(3vw 3vw 0px #F4AC4550); 
    
}

#bg2{
    /* box-shadow: 3vw 3vw #FFD43A50; */

     -webkit-filter: drop-shadow(-3vw 3vw 0px #92BFB150);
    filter:         drop-shadow(-3vw 3vw 0px #92BFB150); 
    
}

#bg3{
    -webkit-filter: drop-shadow(4vw 3vw 0px #A61C3C50   );
    filter:         drop-shadow(4vw 3vw 0px #A61C3C50); 


}

.parent {
    position: relative;
    top: 0;
    left: 0;
  }
  .image1 {
    position: relative;
    top: 30px;
    left: 0;
    /* border: 1px red solid; */
  }
  .image2 {
    position: absolute;
    top: 0px;
    left: 50px;
    /* border: 1px green solid; */
  }

  .image3 {
    position: absolute;
    top: 50px;
    /* left: 50px; */
    right: 80px;
    /* border: 1px green solid; */
  }

  .image4 {
    position: absolute;
    top: 15%;
    /* left: 50px; */
    left: 50%;
    transform:translateX(-50%);
    /* border: 1px green solid; */
  }


  .footer{
      /* background-color: #172140; */
      background-color: white;
  }

.divider{
  border-top-style: solid;
  border-color: #ffffff;
}

/* .header{
  height: 80vh;
} */

#logo{
  width: 4rem;
}


  .device{
    -webkit-filter: drop-shadow(0px 0px 20px #222222);
    filter:         drop-shadow(0px 0px 20px #222222); 
  }


/*------- MOBILE -------- */
  @media (max-width: 576px) { 

    .redShadow{

      box-shadow: none;
      background-color: transparent;

  }


  .image2{
    left: 50%;
    transform:translateX(-50%);


  }


  .image3 {
    position: absolute;
    /* top: 0px; */
    /* left: 50px; */
    /* right: 80px; */
    /* border: 1px green solid; */

      top: 0px;

    left: 50%;
    transform:translateX(-50%);
  }

  .image4{

    top: 0px;
    left: 50%;
    transform:translateX(-50%);
    /* top:0px; */
  }

  /* .col-md-6{
    padding: 50px 10px !important;
  } */

.parent{
  /* padding-top: 150px !important; */
}
.header{
  height: 100vh;
}


  }