@font-face{ font-family: HelveticaNeueXBlk; src: url('../misc/HelveticaNeueLTStd-XBlkCn.otf'); }
@font-face{ font-family: HelveticaNeue66Con; src: url('../misc/HelveticaNeueLTStd-MdCn.otf'); }
@font-face{ font-family: HelveticaNeue66ConO; src: url('../misc/HelveticaNeueLTStd-MdCnO.otf'); }
@font-face{ font-family: HelveticaNeueThinCon ; src: url('../misc/HelveticaNeueLTStd-ThCn.otf'); }
@font-face{ font-family: HelveticaNeueLightCon ; src: url('../misc/HelveticaNeueLTStd-LtCn.otf'); }


/********************************/
body {font-family: HelveticaNeue66Con, Helvetica, Arial, sans-serif; color: #3c3c3c; background-color:#fffef9;  margin: 0;}

p{margin: 10px;}

a{text-decoration: none;}



/*********************************/

/* #paper{width: 100%; height: 100%; background-image: url('../img/site/paper2.png'); position: fixed; mix-blend-mode: multiply; pointer-events: none; top: 0;} */
#paper{width: 100%; pointer-events: none; top: 0; z-index: 99; overflow: hidden; position: absolute; mix-blend-mode: normal;}
#paper img{display: block; mix-blend-mode: normal; opacity: 0.2;}

.blackButtonLink{
    cursor: pointer; display: block; width: 220px;  height: 48px; text-decoration: none; padding: 5px;text-align: center; line-height: 45px; margin: 15px auto;
      font-family: HelveticaNeueXBlk; letter-spacing: .6px; font-size: 18px; font-style: oblique; background-color: #3c3c3c; border: none; color: white;
      -moz-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); box-shadow: 6px 8px 0px rgba(0,0,50,0.2);
      transition: background-color 0.7s ease-in-out;
  }
.blackButtonLink:hover{background-color: #30cfd0; transition: background-color .1s ease-in-out;}




/********************************/
#logo {position: absolute; left: 30px; top: 20px; cursor: pointer;}
#social_links {position: absolute; right: 30px; top:20px; cursor: pointer; }
#social_links_footer {cursor: pointer; padding: 15px 0; }
#social_links img, #social_links_footer img{padding:0 4px 0 0; width: 28px; filter: drop-shadow(3px 4px 0px rgba(0,0,50,0.2));}

#ctaButtonPhone {
  display: none;
}
#phoneMSG{
  display: none;
  font-size: 22px; font-family: HelveticaNeueLightCon; font-style: italic; color:#575757;
}

/********************************/
.vidDiv {position: relative; border: 3px solid #575757; overflow: hidden;z-index: 100; margin: 0px auto 40px auto; width: 900;-moz-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); -webkit-box-shadow: 6px 8px 0px rgba(0,0,50,0.2); box-shadow: 6px 8px 0px rgba(0,0,50,0.2);}

.section{text-align: center; margin: 80px 0;}
.blueSection{text-align: center;  margin: 40px 0 0 0; height: 100px; background-color: #30cfd0; box-shadow:inset 0 10px 0px rgba(0,0,50,0.3);
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
   box-sizing: border-box; padding: 75px 0 0 0;
   min-width: 1170px;
   background: linear-gradient(45deg,  #ee7752, #ff0080, #23a6d5, #30cfd0);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite;

  }
.blueSectioniPad{padding: 90px 0 0 0; font-style: normal; }

.blueTextSection{display: inline-block; width: 590px; text-align: left; margin: 0 0 0 50px; vertical-align:top;}
.blueImgSection{display: inline-block; width: 335px; margin: 5px 0 0 0; vertical-align:top;}

.notesTextSection{display: inline-block; width: 250px; text-align: left; vertical-align:top;}
.notesImgSection{display: inline-block; width: 335px; vertical-align:top; margin: 6px 40px 0 -70px;}

.ipadTextSection{display: inline-block; width: 250; text-align: left; vertical-align:top;}
.ipadImgSection{display: inline-block;  vertical-align:top;  margin: -40px 0 0 -120px;}

.header1,.header1Gradient{font-size: 90px; font-family: HelveticaNeueXBlk; font-style: italic; color:#30cfd0; line-height: 80px;}
.header2{font-size: 80px;font-family: HelveticaNeueXBlk;font-style: italic;color: #575757;line-height: 56px;margin: 0;text-shadow: 5px 7px 0px rgba(0,0,50,0.2);}
.header1Gradient{ font-size: 98px; padding: 12px;
  /* background: linear-gradient(45deg, #30cfd0, #ff0080, #30cfd0,#ff0080, #30cfd0);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite; */
  background: linear-gradient(45deg,   #23a6d5,  #ff0080, #30cfd0,#a020f0,#ee7752);background-size: 300% 300%;animation: gradient 40s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;}

 
.subHeader1{font-size: 20px; font-family: HelveticaNeueThinCon; font-style: italic; color:#575757;}
.subHeader2{font-size: 26px; font-family: HelveticaNeueLightCon; font-style: italic; color:#575757; margin: 0;}

.notesipdaHeader{color: white; font-size: 26px; font-style: oblique; margin: 0;}
.notesipadSubHeader{color: white; font-size: 18px; font-family: HelveticaNeueLightCon;   margin: 15px 0;}

.amzHeader{color: white; font-size: 37px; font-style: oblique; margin: 0; line-height: 40px;}
.amzSubHeader{color: white; font-size: 17px;  font-style: oblique; margin: 30px 0;}

.faceIMG{margin-top: 10px;}
.faceIMGDiv{left: 0; position: absolute; right: 0;}

.osxButtonPaddingTop{
  -webkit-padding-before: 13px !important;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


@media only screen and (max-device-width: 600px) {
  #ctaButton {
    display: none;
  }
  #ctaButtonPhone {
    display: block;
    padding: 45px 60px 35px 60px;
    font-size: 40px;
    width: 340px;
    height: 50px;
    /* opacity: 0.3; */
  }
  #phoneMSG{
    display: block;
  }


}

/****** Slide Show ***********************************/
.fadein{
  height: 300px;
}
.fadein img {
  top:0;
  opacity: 0;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 18s;/*visible time multiply by how many slides*/
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 18s;/*visible time multiply by how many slides (3s * 4 slides = 12s)*/
}

.fadein .last{
  -webkit-animation-name: fade_last;
  animation-name: fade_last;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  10% {opacity: 1;}
  17% {opacity: 1;}/*100% divided by how many slides*/
  43% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes fade {
  0% {opacity: 0;}
  10% {opacity: 1;}
  17% {opacity: 1;}/*100% divided by how many slides*/
  43% {opacity: 0;}
  100% {opacity: 0;}
}
@-webkit-keyframes fade_last {
  0% {opacity: 0;}
  10% {opacity: 1;}
  17% {opacity: 1;}/*100% divided by how many slides*/
  33% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes fade_last {
  0% {opacity: 0;}
  10% {opacity: 1;}
  17% {opacity: 1;}/*100% divided by how many slides*/
  33% {opacity: 0;}
  100% {opacity: 0;}
}

#s1 {
}
#s2 {
  -webkit-animation-delay: 3s;/* Increment by visible time */
  animation-delay: 3s;
}
#s3 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}
#s4 {
  -webkit-animation-delay: 9s;
  animation-delay: 9s;
}
#s5 {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}
#s6 {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}