@import "styles.css";

/* Custom Extra Small Queries */ 
/* Custom Home Page Carousel Query */ 
@media (max-width:336px){
  /* Carousel Home Page Indicator move + compact */ 
  .carousel-control-next-icon{
    margin-bottom: 100px !important;
    margin-top:-1100px !important;
    margin-left:0px !important;
  }
  .carousel-control-prev-icon{
    margin-bottom: 200px !important;
    margin-top:-1100px !important;
    margin-right:0px !important;
  }
  .carousel-inner {
    padding: unset !important;
  }
  .carousel-writing {
    margin:unset !important;
  }
}
/* Custom Small Queries */ 
@media (max-width:450px){
  .carousel-inner p {
  font-size:12px !important;
  }
  /*Footer*/ 
  .powered-div {
    margin-top:5px;
    margin-bottom:0px !important;
  }
  .aa-logo {
    width:100%;
  }
  .key-logo {
    width:50%;
  }
  .ustoa-logo{
    width:30%;
  } 
}
 /* Custom Solution Diagram Query - small */ 
@media (max-width:550px){
  /* Solution Diagram */ 
  .solutions-graphic-container{
    width:300px !important;
    margin: 0 auto;
  }
  .sol-icon {
    width:200px !important;
  }
  .gcp-icon {
    width:90px !important;
  }
  .sol-diagram {
    width:120px !important;
    margin-top:20px !important;
    padding:12px !important;
    padding-bottom: unset !important;
  }
  .sol-circle {
    width:120px !important;
    padding:10px !important;
    margin-top:20px !important;
  }
  .solution-legend {
    margin-top:80px !important;
    width:145px !important;
  }
  .solution-button {
    width:145px !important;
    height:40px;
  }
  .solution-button p {
    font-size:12px!important;
    line-height:1;
  }
}
/* Custom Global Carousel + Readmore Popups Query */ 
@media (max-width:700px){
  .carousel-control-next-icon{
    margin-bottom: 100px !important;
    margin-top:-400px !important;
    margin-left:0px !important;
  }
  .carousel-control-prev-icon{
    margin-bottom: 200px !important;
    margin-top:-400px !important;
    margin-right:0px !important;
  }
  .carousel-inner p {
    font-size:12px !important;
  }
  /* Readmore Popups */ 
  .readmore-popup-container{
    flex-direction: column !important;
    align-items: center !important;
    width:100% !important;
  }
  .modal-inner-card {
    margin-right:unset !important;
    width:100% !important;
    max-width:unset !important;
    min-width:unset !important;
  }
  .border-right,.border-left {
    border-color:transparent !important;
  }
  .readmore-para {
    min-height:unset !important;
  }
  .readmore-paragraph-section2 {
    min-height:unset !important;
  }
}
/* Custom Solution Diagram Query - mid */ 
@media (min-width:767px){
  .solutions-graphic-container{
  width:500px !important;
  margin: 0 auto;
  }
  .sol-icon {
  width:200px !important;
  }
  .gcp-icon {
  width:90px !important;
  }
  .sol-diagram {
  width:280px;
  margin-top:20px !important;
  padding:12px !important;
  padding-bottom: unset !important;
  }
  .sol-circle {
  width:230px;
  padding:20px !important;
  margin-top:20px;
  }
  .solution-legend {
  margin-top:80px !important;
  width:145px !important;
  }
  .solution-button {
  width:145px !important;
  height:40px;
  }
  .solution-button p {
  font-size:12px!important;
  line-height:1;
  }
}
@media (max-width:791px){
  /* Solution Diagram */ 
  .readmore-para {
    min-height:340px;
  }
}
/* Small Devices <992px ---------- GLOBAL SMALL DEVICE QUERIES */ 
@media (max-width:992px){
  /* Font Size */
  h1 {
    font-size: 38px;
  }
  h3 {
    font-size: 30px;
  }
  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 18px;
  }
  ul li {
    font-size: 14px;
  }
  p {
    font-size: 16px;
    line-height:1.5;
  }
  /** Carousel Laptops **/
  .laptop {
    width:50% !important;
    height:auto !important;
  }
  .modal-content-laptop {
    width:100% !important;
    position: absolute;
    top:20vh;
    justify-content: center;
  }
  .carousel-control-next-icon,.carousel-control-prev-icon{
    margin-bottom: -200px !important;
    margin-top:-400px !important;
  }
  .laptop-carousel-control-prev, .laptop-carousel-control-next {
    margin-bottom:-500px !important;
  }
  .nav-link {
    padding:2px !important;
  }
  .carousel-indicators4,.carousel-indicators3,.carousel-indicators2{
    flex-direction: column;
    margin: auto;  
    align-items: center;
  }
  .laptop-carousel-buttons{
    margin:4px;
  }
  .solo-slide{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .solo-slide .quote {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .solo-slide .carousel-image {
    margin-left:unset !important;
    margin-bottom:20px !important;
  }
  .solo-slide p {
    margin:unset !important;
    padding:unset !important;
    text-align: center !important;
  }
  /* Home Page */ 
  .index-fifth .list-item-header{
    display: flex;
    justify-content: center;
  }
  .index-fifth .list-item p {
    display:flex;
    justify-content: center;
    text-align: center;
  }
  .index-slide .carousel-container {
    height:700px !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .index-slide .carousel-image {
    margin-left:unset !important;
    margin-bottom:20px !important;
  }
  .index-slide .carousel-writing {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .carousel-control-prev-icon {
    margin-right:0px;
  }
  .carousel-control-next-icon {
      margin-left:0px;
  }
  /* Solution Diagram */ 
  .solutions-graphic-container{
    width:500px;
    margin: 0 auto;
  }
  .sol-icon {
    width:140px !important;
  }
  .gcp-icon {
    width:70px !important;
  }
  .sol-diagram {
    width:180px;
    margin-top:10px !important;
    padding:15px !important;
    padding-bottom: unset !important;
  }
  .sol-circle {
    width:200px;
    padding:25px !important;
    margin-top:30px;
  }
  .solution-legend {
    margin-top:30px !important;
    width:100px !important;
  }
  .solution-button {
    width:85px !important;
    height:40px;
  }
  .solution-button p {
    font-size:12px!important;
    line-height:1;
  }
  /* Readmore Popups */ 
  .card-modal {
    width:90% !important;
  }
  .tooltip-icon {
    top:-20px;
  }
  .readmore-popup-container{
    flex-direction: row;
    align-items: start;
  }
  .readmore-para {
    min-height: 280px;
    justify-content: start !important;
  }
  .readmore-square {
    margin:20px 0px ;
    font-size:15px !important;
  }
  .modal-inner-card {
    margin-right:unset !important;
    width:80% !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  /* Product Cards */
  .product-cards .card {
   margin-right:0px !important;
  }
  .product-cards .card {
    margin-top:20px !important;
    margin-bottom:unset !important;
  }
  /* Footer */ 
  footer a, footer div{
    font-size:12px !important;
  }

}
/* Medium Devices >993px */
@media (min-width:993px){
  .laptop-carousel-control-next{
    margin-right:100px;
  }
  .laptop-carousel-control-prev {
    margin-left:100px;
  }
  .readmore-square {
    margin:0px 0px !important;
    font-size:15px !important;
  }
  .tooltip-icon {
    top:-4.5px;
    right:-4px;
  }
    /** Carousel Laptops **/
    .laptop {
      width:50% !important;
    }
    .modal-content-laptop {
      top:10vh;
    }

    .carousel-control-next-icon{
      margin-bottom: 100px !important;
      margin-left:100px !important;
    }
    .carousel-control-prev-icon{
      margin-bottom: 100px !important;
      margin-right:100px !important;
    }
   /* Index Slide */
.carousel-inner {
  height:500px !important;
}
.carousel-inner p {
  font-size:unset !important;
}
  h1 {
    font-size: 38px;
  }

  h3 {
    font-size: 30px;
  }

  h4 {
    font-size: 18px;
  }
  h5 {
    font-size: 18px;
  }

  ul li {
    font-size: 14px;
  }

  p {
    font-size: 16px;
    line-height:1.2;
  }
  .product-cards .card {
    margin-right:0px !important;
  }
  .modal-lg {
    max-width: 1000px;
  }
    /* Readmore Popups */ 
    .card-modal{
      width:80% !important;
    }
    .readmore-popup-container{
      flex-direction:row;
      align-items: start;
    }
   .modal-inner-card {
     margin-right:unset !important;
     width:70% !important;
   }
     /* Solution Diagram */ 
     .solutions-graphic-container{
      width:800px !important;
      margin: 0 auto;
    }
    .sol-icon {
      width:200px !important;
    }
    .gcp-icon {
      width:90px !important;
    }
    .sol-diagram {
      width:280px;
      margin-top:20px !important;
      padding:12px !important;
      padding-bottom: unset !important;
    }
    .sol-circle {
      width:280px ;
      padding:20px !important;
      margin-top:40px;
    }
    .solution-legend {
      margin-top:80px !important;
      width:145px !important;
    }
    .solution-button {
      width:145px !important;
      height:40px;
    }
    .solution-button p {
      font-size:12px!important;
      line-height:1;
    }
    /* Readmore Popups */ 
  .readmore-popup-container{
    flex-direction: row;
    align-items: start;
  }
  .readmore-square {
    margin:20px 0px;
    font-size:15px !important;
  }
  /* .modal-content {
    width:100% !important
  } */
 .modal-inner-card {
   margin-right:unset !important;
   width:90% !important;
   min-width: unset !important;
   max-width: unset !important;
 }
}
@media (min-width:1100px){
  .card-modal{
    width:75% !important;
  }
}
/* Large Devices >1200px */
@media (min-width:1200px){
  .tooltip-icon {
    top:2px;
    right:0px;
  }
  .modal-content-laptop {
    top:15vh !important;
  }
  .carousel-inner {
    height:unset !important;
  }
  .carousel-inner p {
    font-size:unset !important;
  }
  .product-cards .card {
    margin-right:10px !important;
  }
      /* Solution Diagram */ 
      .solutions-graphic-container{
        width:800px !important;
        margin: 0 auto;
      }
      .sol-icon {
        width:200px !important;
      }
      .gcp-icon {
        width:115px !important;
      }
      .sol-diagram {
        width:300px;
        margin-top:20px !important;
        padding:25px !important;
        padding-bottom: unset !important;
      }
      .sol-circle {
        width:300px ;
        padding:30px !important;
        margin-top:40px;
      }
      .solution-legend {

        width:120px !important;
      }
      .solution-button {
        width:200px !important;
        height:40px;
      }
      .solution-button p {
        font-size:17px!important;
        line-height:1;
      }
      .card-modal{
        width:75% !important;
      }
}
/* Average 1300px Windows Laptop */ 
@media (min-width:1300px){
  .modal-content-laptop {
    top:5vh !important;
  }
  /* Readmore Popups */ 


  .card-modal{
    width:75% !important;
  }
  .readmore-popup-container{
    flex-direction: row;
    align-items: start;
  }
 .modal-inner-card {
 

   width:70% !important;
 }
}
/* Standard 1920px lead-up */
@media (min-width:1500px){
  .modal-content-laptop {
    margin-top:-10vh;
  }
  .laptop-large {
    width:50% !important;
    transform: translate(50%,30%);
  }
  /* Readmore Popups */ 

  h1 {
    font-size: 40px;
  }

  h3 {
    font-size: 33px;
  }

  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 20px;
  }

  ul li {
    font-size: 16px;
  }

  p {
    font-size: 16px;
  }
  .card-modal{
    width:60% !important;
  }
  .readmore-popup-container{
    flex-direction: row;
    align-items: start;
    justify-content: space-evenly;
    width:100%;
    padding:unset !important;
    margin:unset !important;
  }
 .modal-inner-card {
  /* width:70% !important; */
 }
}
/* Standard 1920px lead-up */
@media (min-width:1920px){
  /* Readmore Popups */ 
  .card-modal{
    width:1000px !important;
  }
  .readmore-popup-container{
    flex-direction: row;
    align-items: start;
  }
 .modal-inner-card {
   /* margin-right:20px !important; */
   /* width:70% !important; */
   min-height: 100% !important;
 }
}