/*  Styling unique ONLY to the Intro Page    */

.gkFnt {font-family: 'GFS Didot', serif;}


/* ----------------------Tooltip related styling: --------------------*/
.tooltip {
  position: relative;
  border-bottom: 1px dotted green;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ------- */



.introPixCoffee {
  width: 100%;
}
.introPixSm {
  float: right;
}
#problem {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 75vh;
  min-height: 400px;
  position: relative;
  background-image: url("/-images/introBlk-2048px-BrokenGlass72.jpg");
  background-attachment: fixed;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: auto;
}
#innerProb {
  background: rgba(0, 0, 0, 0.5);
  margin: 0% 3% 0 3%;
  border: 0;
  padding: 3% 3% 3% 3%; 
  border-radius: 15px 50px;    
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#solutnMethodSum {
  height: 75vh;
  min-height: 400px;
  position: relative;
  background-image: url("/-images/intro-SunThruTrees2048.jpg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: auto;
}
#innerSolutn {
  background: rgba(255, 255, 255, 0.3);
  margin: 0% 3% 0 3%;
  border: 0;
  padding: 3% 3% 3% 3%; 
  border-radius: 15px 50px;    
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#stepsRequiredIntro {
  background-image: url("/-images/bkgdLeaves-1920-72.jpg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
#innerStepsRequiredIntro {
  background: rgba(0, 0, 0, 0.5);
  margin: 0% 3% 0 3%;
  border: 0;
  padding: 3% 3% 3% 3%; 
  border-radius: 15px 50px; 
}


#fourCompSum {
/*  background: rgba(0, 0, 0, 0.5);
  margin: 0% 3% 0 3%;
  border: 0;
  padding: 3% 3% 3% 3%; 
  border-radius: 15px 50px;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  */
}


#innerfourCompSum {
}

#qualTrainCnt {
  background-image: url("/-images/bkgdTreeRings2brn65.jpg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}
#innerQualTrainCnt {
  background: rgba(0, 0, 0, 0.5);
  margin: 0% 3% 0 3%;
  border: 0;
  padding: 3% 3% 3% 3%; 
  border-radius: 15px 50px;
}


@supports (display: grid) {
#introContents  {
}
#methodSum { 
}
#loveRequired { 
}
#stepsintro {
}
#stepsIntroLft {
}
#stepsIntroRt {
}
#teamHuddle {
}
#stepsMetaphor {
}
#fiveLittleSteps {
}




#relsRev {
}

#introStrategy {
}
#introStrategyLft {
}
#introStrategyRt {
}
#crownThorns {
}
#livStrtgy {
}
#contentIntro {
}
#introcourses {
}
}



#fiveRingsImgLappy {display: none;}
#livStrtgyImg {display: none;}




/* --------------600px and Up (portrait tablets, large phones and up)------------ */
@media only screen and (min-width: 600px) { 

#fiveRingsImgLappy {
  display: inherit;
}


#fiveRingsImgCell {display: none;}
#livingCellsImg {display: none;}
#livStrtgyImg {display: inherit;}

}




@media only screen and (min-width: 900px) { 
}

@media only screen and (min-width: 1200px) { 
}

@media only screen and (min-width: 1500px) { 
}