/*

Solutions 
  - The target audience 
    - Store Owners
    - Optometrists
    - ?


Features 

  - Web Bookings




  - End to End Fullfillment? 
        End to End Solution? execution? implementation?

*/


html {
 
}


body, html {
  height: 100%;
   -webkit-font-smoothing: antialiased;
}



body {
  background: black;
}
.fullscreenBgImg {
  background-image: url("../images/bg.jpg");
     
  height: 100%;
  object-fit: fill;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  opacity: 0.5;

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;


}


.fullscreenBgImg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
}


  








/*
.backgroundContentFullScreenTesting {
  opacity: 0.5; 
  width: 100%;
  height: 100%;
  max-height: 100vh;
  margin: 0px;
  padding: 0px;
  z-index: -1000
}
*/



.behind {
  z-index: -1;
}





:root {
  --large-hero-responsive-font-size-primary: min(10em, max(3.5vw, 5vmin)); 

  --medium-hero-responsive-font-size-primary: min(8em, max(2.0vw, 4vmin)); 

} 



.handWritten-text { 
font-family: 'Edu QLD Beginner', cursive;
 }


/*

Add break points of laptop and smaller 
Maving the .topSpacer smaller and smaller

*/



.mainContentSpacer {

}


.extraLeftSpace {
  margin-left: 1rem;
}

.extraRightSpace {
  margin-right: 1rem;
}


.roboto {
  font-family: 'Roboto', sans-serif;
}







.leftAlign {
  float: left;
}

.rightAlign {
  float: right;
}



.leftText {
  text-align: left;
}

.rightText {
  text-align: right;
}

.textCenter {
  text-align: center;
}




.maxWidth50 {
  width: 50%; 
}

.maxWidth40 {
  width: 40%; 
}

.maxWidth30 {
  width: 30%; 
}



.maxWidth1500 {
  max-width: 1500px;
}


.w-80 {
  width: 80%;  
  /* width: min(80%, 1000px); */
  margin: auto;
  z-index: 1;
  position: absolute;
}

.w-60 {
  width: 60%
}

.w-60 .collection {
}


.w-40 {
  width: 40%;
  z-index: 0;
}

.size1dot5 {
  font-size: 1.5em;
}



.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px 0;

}
.flex-grid-thirds .col {
  width: 32%;
  padding: 20px;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.flex-grid-thirds .col img {
  width: 100%;
  max-height: 140px;

}



.flex-grid-thirds .col {
  width: 32%;
  padding: 20px;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}










.cards {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 margin: 0;
 padding: 0;
}

.cards__item {
 display: flex;
 padding: 1rem;
 width: 100%;
}

.cards_big_item {
 display: flex;
 padding: 1rem;
 width: 100%;
}

.allQuotes {
  display: flex;
}

.quotesFromPeople {
  width: 50%;
  padding: 13px;
}

.allUserTypes {
  display: flex;
  flex-direction: column;

}

.eachUserType {
  width: 100%;

}



@media (min-width: 31rem) {
   .cards__item {
     width: 50%;
  }

  

}


@media (min-width: 40rem) {
   .cards__item {
     width: 33.333%;
  }

  .cards_big_item {
     width: 50%;
  }

}

@media (min-width: 56rem) {
   .cards__item {
     width: 25%;
  }

  .cards_big_item {
     width: 50%;
  }

  
  .allUserTypes {
    flex-direction: row;
  }

  .eachUserType {
    width: 33%;
    margin-right: 10px;

  }



}



 .card {
   background-color: white;
   border-radius: 0.25rem;
   box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}
 .card__content {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   padding: 1rem;
}
 .card__image {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
   overflow: hidden;
   position: relative;
   transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
}
 .card__image::before {
   content: "";
   display: block;
   padding-top: 46.25%;
}
 @media (min-width: 40rem) {
   .card__image::before {
     padding-top: 56.3%;
  }
}

.card__image--calendar {
  background-image: url("../images/Calendar_Flatline.svg");
}

.card__image--calendar2 {
  background-image: url("../images/Calendar_Two_Color.svg");
}

.card__image--POS {
  background-image: url("../images/Onlinepayment_Monochromatic.svg");
}

.card__image--inventory {
  background-image: url("../images/DataArranging_Flatline.svg");
}

.card__image--startup {
  background-image: url("../images/Startup_TwoColor.svg");
}

.card__image--chat {
  background-image: url("../images/Chat_Monochromatic.svg");
}

.card__image--list {
  background-image: url("../images/Checklist_Monochromatic.svg");
}

.card__image--secruity {
  background-image: url("../images/Security_Two Color.svg");
}

.card__image--secruity {
  background-image: url("../images/Security_Two Color.svg");
}

.card__image--support {
  background-image: url("../images/IT_Support_Flatline.svg");
}

.card__image--support {
  background-image: url("../images/IT_Support_Flatline.svg");
}

.card__image--store {
  background-image: url("../images/Online_store _Monochromatic.svg");
}

.card__image--color {
  background-image: url("../images/Designer_Outline.svg");
}

.card__image--reports {
  background-image: url("../images/DataAnalyst_Flatline.svg");
}






.card__image--flowers {
   background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
   background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
   background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
   background-image: url(https://unsplash.it/800/600?image=59);
}


.card__image--chris {
   background-image: url("../images/chris-zulinov.jpg");
}

.card__image--laura {
   background-image: url("../images/laura-dowling.jpg");
}

.card__image--alan {
   background-image: url("../images/alan2.jpg");
}



 .card__title {
   color: #696969;
   font-size: 2.0em;
   font-weight: 300;
   letter-spacing: 2px;
}
 .card__text {
   flex: 1 1 auto;
   font-size: 1.175rem;
   line-height: 1.5;
   margin-bottom: 1.25rem;
}


















#mobileNavBtn {
  display: none;
}

.hideMe {
  display: none;
}


.showMe {
  display: block;
}



.mobileLeftSpace {
  display: block;
}




@media (max-width: 670px) { 


.btn-large {
    
    font-size: 20px;
   
}



  .hideOnMobile {
    display: none;
  }

  .heroScreenshotImg {
    display: none;
  }

  h4 {
    font-size: 1.5em;
  }

  .mobileLeftSpace {
    display: block;
    padding-left: 1rem;
  }


  .videohTextOverlayBlue {
    font-size: 2em;
  }



} /*End @media*/


@media (max-width: 993px) {

/*Come back and change screenshot ipad*/

.logoInTheMiddle {
  max-width: 100vw;
}



.videohTextOverlayBlue {
   font-size: 2em !important ;
}

  .w-60 {
    width: 100%;
    padding: 0.4em;
    margin-left: 1rem;
  }




  .videohTextOverlay {
    font-size: 3rem !important; 
    line-height: 3rem !important;
  }


  .videohTextOverlay span {
  color: #127ED1;
  font-size: 2rem !important;

  }

  .heroTextLarge {

  }

  .heroTextMedium {
    font-size: 2rem;

  }


  #fullMenu {
    position: absolute;
    top: 70px;
    background: black;
  }

  #fullMenu li {
    width: 100vw;
    float: none;
  }


  #mobileNavBtn {
    display: block;
    position: absolute;
    left: 10px;
  }

  #mobileNavBtnClose {
    display: block;
    position: absolute;
    left: 10px;
  }

  .flex-grid-thirds {
    display: block;
  }

  .flex-grid-thirds .col {
    width: 100%;
    padding: 20px;
    margin: 0 0 20px 0;

  }

  .extraSpaceAboveFooter {
    display: block;
    /*height: calc(5vh / 0.9);*/

    /* use calc */
    height: 1px;

  }

  .forceMiddle {
     width: 95% !important;
  }
  .w-80 {
    width: 95%;
  }



/*
  .card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s;
    border-radius: 2px;
    min-width: 100%;
  }

.card .card-image {
    position: relative;
    float: left;
    width: 36%;
    margin-right: 10px;
}
*/










} /* End @media */

/*Come back and change orientation to rows when small*/










.minHeight500 {
  min-height: 500px;
}




.heroTextLarge {
  line-height: 110%;
  margin: 2.3733333333rem 0 1.424rem 0;
  font-size: var(--large-hero-responsive-font-size-primary);
}

.heroTextMedium {
  line-height: 110%;
  margin: 0rem 0 1.424rem 0;
  font-size: 1em; 
}


.contentSpaceNormal {
  padding: 5px;
}


h3.white-text a:hover{
  background: black;
}

.page-footer {

}



.addSpaceToLeft {
  margin-left: 1em;
}



.backgroundContentFullScreen img{
  opacity: 1; 
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 100vw;
  z-index: -1;
  position: absolute;
  top: 100vh;
}

.backgroundContent {
  opacity: 1; 
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 100vw;
  z-index: -1;
  position: absolute;
  top: 100vh;
}




.backgroundContentHalfScreen:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, transparent 0%, black 100%);
}



.page-footer:before {
  margin-top: 200vh;  
 
}






.clearMe {
  clear: both;
}


.forceMiddle {
  width: 80%;
  margin: auto;
}


.logoInTheMiddle {
 /* margin: auto;
    padding-left: 20%;
    padding-right: 20%;
    width: 100%;
    margin-top: 3%;
  */

  max-width: 100%;
}




.topSpacer {
  height: 6.5vw;
}


.heroScreenshotImg {
  width: 30vw; 
}

.videohTextOverlay  {
     
    font-weight: 600;
    letter-spacing: -4px;
    font-size: 4vw;
    letter-spacing: 1px;
    line-height: 4vw;
    color: rgb(255, 255, 255);
    margin-bottom: 0.5vw;
    margin-top: 0px;
}



.videohTextOverlayBlue {
  color: #127ED1;
  font-size: 3em;
  padding-left: 0.6em;
  margin: 0px;

}



.level10 {
  z-index: 10;
}


/*
header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
*/



/* What does this do? */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}