/* . . . . . FONTS . . . . . . */

@font-face {
  font-family: "ApercuPro-Medium";
  src: url("../fonts/ApercuProMedium.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ApercuProMedium.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ApercuProMedium.otf") format("opentype"),
    /* Open Type Font */ url("../fonts/ApercuProMedium.svg") format("svg"),
    /* Legacy iOS */ url("../fonts/ApercuProMedium.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/ApercuProMedium.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ApercuProMedium.woff2") format("woff2"); /* Modern Browsers */
  /* font-weight: normal;
  font-style: normal; */
}

@font-face {
  font-family: "ApercuPro-Regular";
  src: url("../fonts/ApercuProRegular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ApercuProRegular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ApercuProRegular.otf") format("opentype"),
    /* Open Type Font */ url("../fonts/ApercuProRegular.svg") format("svg"),
    /* Legacy iOS */ url("../fonts/ApercuProRegular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/ApercuProRegular.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/ApercuProRegular.woff2") format("woff2"); /* Modern Browsers */
  /* font-weight: normal;
  font-style: normal; */
}


/* . . . . . PAGE STRUCTURES . . . . . . */
/* ///////////////////////////////////////*/

html {
  box-sizing: border-box;
  /* padding: env(safe-area-inset); */
}

* {
  box-sizing: inherit;
  /* border: 1px rgb(255, 0, 0) solid; */
}

body {
  font-family: "ApercuPro-Medium", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 1em;
  line-height: 1.15;
  color: #555;
}

h1, h2,h3, h4,.pull-quote{
  font-family: "ApercuPro-Medium", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  line-height: 1;
}

h1 {
font-size: 4rem;
  /* color: #f15822; */
}

h2 {
  font-size: 1.5em;
  line-height: 1.3;
}

h3 {
  font-size: 1.2em;
  color: #f15822;
}

h4 {
  font-size: 1.1em;
  color: #f15822;
}

p {
  font-family: "ApercuPro-Regular", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  font-size: 1.1em;
}

.pull-quote {
  font-size: 2.8rem;
  margin: .6em 0 1em 0;
}


/* / / / DEFAULT PAGE LINKS / / / */
/* ///////////////////////////////////////*/

a:link {
  text-decoration: none;
  color: rgb(109, 184, 11);
}

/*Sets default link mouseover style*/
a:hover {
  text-decoration: none;
  color: rgb(77, 77, 77);
}
 
/*Sets default link down-click style*/
a:active {
  color:  rgb(255, 171, 16);
}
/*Sets default visited link style*/
a:visited {
  color:rgb(109, 184, 11);
}



/* / / / ASK PAGE  / / / */

.ask {
  padding-left: 0;
}

.ask li {
  list-style-type: none;
  border-radius: .2rem;
  background:rgb(248, 248, 248);
  margin-bottom: 1em;
  padding: 1em .8em .4em;
  box-shadow: 0px 0px 3px 3px  rgba(146, 146, 146, 0.2);
}

.ask li a:link{
  font-size: 1em;
}

#askcontainer{
  /* background:rgb(112, 112, 112); */
  padding: 3em .5em 4em;

}


/* . . . . . SITE IMAGE BACKGROUNDS . . . . . . */


.home_bg_img { 
  background:rgb(172, 171, 171);
  background: url(../images/hero_welcome.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.default_bg_img { 
  background:rgb(172, 171, 171);
  background: url(../images/hero_default.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.shuffle_bg_img { 
  /* background:rgb(172, 171, 171); */
  background: url(../images/hero_shuffle.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* . . . . . ASK FORM . . . . . . */
/* ///////////////////////////////////////*/

select,
input, 
textarea {
  font-family: "ApercuPro-Medium, "Helvetica Neue", 
  Helvetica, Arial, sans-serif !important;
  font-style: normal;
  font-size: 1em;
  line-height: 1.15;
  color: rgb(83, 82, 82);
}

label {
  font-size: 1.3em;
}

input { /* SEND BUTTON */
  border:0;
  font-size: 1.5rem;
}

label {
  font-size: 1.3em;
}

#submit_form {
  color: #f15822;
  border-radius: .2em;
  padding: .4em .8em .4em ;
  box-shadow: 1px 1px 3px 3px  rgba(146, 146, 146, 0.3);
}

#submit_form:hover {
  color: #fff;
  background: #f15822;
  -webkit-transition: color 0.3s ease-out; 
  -moz-transition: color 0.3s ease-out; 
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out; 
  -webkit-transition: background-color 0.3s ease-out; 
  -moz-transition: background-color 0.3s ease-out; 
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out; 
}

.response_msg {
  display: none; /*invisible until called */
  font-size: 1.5em;
  padding: .5em;
  margin-top: 10px;
  border-radius: .2em;
  color: #fff;
  background: #f15822;
  box-shadow: 0px 2px 8px 2px  rgba(90, 90, 90, 0.2);
}

/* CHECKBOX — The container */

.checkcontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 1.5em; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input~.checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked~.checkmark {
    background-color: #f15822;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkcontainer .checkmark:after {
    left: 7px;
    top: 1px;
    width: 7px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* TEXT PAGES on ABOUT */
/* ///////////////////////////////////////*/

/* . . . . . Bottom Images . . . . . . */

.bg_about{
  background: url(../images/questions_pad_shot.png) no-repeat center bottom, 
  linear-gradient(0deg, #fff, #fff, #c5c5c5);
  background-size: contain;
}

.bg_ask{
  background: url(../images/ask_pad_shot.png) no-repeat center bottom, 
  linear-gradient(0deg, rgb(241, 241, 241), #c5c5c5);
  /* background: linear-gradient(0deg, #fff, #c5c5c5); */
  background-size: contain;
}

.sponslogo{
  display: block;
}
.sponslogo img{
  min-width: 250px;
  max-width: 300px;
}
.sponslogo p {
  font-size: 1em;
}
.border_top-4 {
  border-width: 3px;
}

.videoWrapper {
  position: relative;
  /* padding-bottom: 56.25%; 16:9 */
  padding-bottom: 75%; /* 4:4 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* . . . . . QUESTION PAGE . . . . . . */
/* ///////////////////////////////////////*/

#question {
  font-family: "ApercuPro-Medium", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  font-size: 5em;
  line-height: 1.06;
  /* padding: 4rem 1rem 1rem; */
  /* width: 100vw; */
}

#txtquestion {
  font-family: "ApercuPro-Medium", "Helvetica Neue", 
  Helvetica, Arial, sans-serif;
  font-size: 5em;
  line-height: 1.06;
}

.qnavigation{
  visibility:hidden;
  display: none;
  background: #ffee00;
  /* height: 30vh; */
}

/* . . . . . QUESTION ARROWS . . . . . . */

.navchildprev, .navchildnext {
  opacity: .5;
  font-size: .5em;
  color: #fff !important;
  
}


.navdivprev:hover .navchildprev {
  color: #fff;
  opacity: 1;
  
}
.navdivnext:hover .navchildnext {
  opacity: 1;
  color: #fff;
}

.fa-chevron-right:link, .fa-chevron-right:visited, 
.fa-chevron-left:link, .fa-chevron-left:visited,  {
  color: #fff;
}


#pgCnt {
  font-size: 1rem;
  text-align: center;
  margin: 0;
  /* color:#fff; */
  opacity: .8;
}

.shuffle-reset  {
  font-size: 1.8rem !important ;
  color: #fff !important;
}
  
.shuffle-reset:link, .start a:link {
  color: rgb(0, 0, 0);
  text-decoration: none;
  color: rgb(255, 255, 255);
  opacity: .4;
}

.shuffle-reset:hover, .start a:hover {
  text-decoration: none;
  opacity: 1;
}

.shuffle-reset:visited,  .start a:visited {
  text-decoration: none;
  opacity: .6;
}

/* . . . . . OUR QUESTIONS & SHUFFLE HOME . . . . . . */

#question-home {
  z-index: 2;
  /* max-height:80vh;
  width:auto; */
  box-shadow: 0px 0px 3px 3px  rgba(63, 59, 59, .4);
  transition: all .2s ease-in-out;
}
/* From style on home button 
style="max-height:80vh; width:auto; box-shadow: 3px 3px 15px 5px  rgba(63, 59, 59, .3);" */

#question-home:link {
    opacity: 1;
}
  
#question-home:hover {
  -webkit-transform: scale(1.03,1.03);
  -ms-transform: scale(1.03,1.03); /* IE 9 */
  transform: scale(1.03); /* Standard syntax */
  box-shadow: 0px 0px 20px 5px  rgba(63, 59, 59, .5);
}
  
#question-home:visited {
    opacity: 1;
}

.pagenum{
    opacity: 1;
    /* margin-top: 0; */
  }
  
.page-count {
    font-size: 1.5rem !important;
    opacity: .2;
    padding: 0;
    padding-bottom: .5rem;
    color: #000;
  }

  /* #qnum {
    display: initial;
  } */

.qnumber {
    color: white;
    opacity: 0.6;
    
    position: fixed;
    width: 100vw;
    height: 2.8rem;
    margin:0;
    padding-right: .8rem;
    padding-top: .5rem;
    z-index: 1;
    /* width: 100%; */
  }


/* ///////////////////////////////////////*/
/* . . . . . . QUESTION STYLES . . . . . . */

.blue {
  background-image: linear-gradient(0deg, #fff, #fff, #00aeef);
  color: #00aeef;
}
.pink {
  background-image: linear-gradient(0deg, #fff, #fff, #ec008c);
  color: #ec008c;
}
.orange {
  background-image: linear-gradient(0deg, #fff, #fff, #f15822);
  color: #f15822;
}
.green {
  background-image: linear-gradient(0deg, #fff, #fff, #8dbc38);
  color: #8dbc38;
}
.red {
  background-image: linear-gradient(0deg, #fff, #fff, #ef3b46);
  color: #ef3b46;
}

.yellow {
  background-image: linear-gradient(0deg, #fff9a5, #fff9a5, #ffca1a);
  color: rgb(253, 171, 66);
}

.blackfade {
  background:linear-gradient(0deg, rgb(199, 193, 193),#4d4a4a); 
  color: #ffffff;
}

.black {
  background: #000;
  color: #ffffff;
}
.black span a:link {
  color: #fff;
  opacity: 1;
}
.black span a:hover {
  color: #fff;
  opacity: .5;
}
.black span a:visited {
  color: #fff;
  opacity: 1;
}
.white {
  background: #fff;
  color: #000;
}

.blue,
.pink,
.orange,
.green,
.red,
.black,
.yellow,
.gray 
{
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  background-attachment: scroll;
  /* background: #DDD; */
}

.bluebar {
  background: #00aeef;
}
.pinkbar {
  background: #ec008c;
}
.orangebar {
  background: #f15822;
}
.greenbar {
  background: #8dbc38;
}
.redbar {
  background: #ef3b46;
}
.blackbar {
  background: rgb(63, 63, 63);
  color: #ffffff;
}
.yellowbar {
  background: #ffca1a;
}

.bluecounter {
  color: #00aeef;
}
.pinkcounter {
  color: #ec008c;
}
.orangecounter {
  color: #f15822;
}
.greencounter {
  color: #8dbc38;
}
.redcounter {
  color: #ef3b46;
}
.blackcounter {
  color: #aaa;
}
.yellowcounter {
  color: #ffca1a;
}

.image_bg { /* IMPORTANT FOR VERTICAL CENTERING*/
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  background-attachment: scroll;
}
.gray {
  background:  rgb(112, 112, 112);
  background-image: linear-gradient(0deg, rgb(112, 112, 112), #000000);
  /* background-attachment: fixed; */
}
.lightgray {
  background: rgb(241, 241, 241);
  background-image: linear-gradient(0deg, rgb(241, 241, 241), rgb(236, 155, 155));
  /* background-attachment: fixed; */
}


/* . . .  . . . . . @MEDIA . . . . . . . . */
/* ///////////////////////////////////////*/
/* //////////////////////////////////////*/

/* BOOTSTRAP BREAKPOINTS 
XS  <   576
SM  >=  576
MD  >=  768 iPad V
LG  >=  992 ipad H
XL  >=  1200

MOBILE HORIZONTAL
<   320 vertical iPhone SE
<   360 vertical All other iPhones & Galaxy
<   411 vertical Pixel 


/* EXTRA LARGE */
/* //////////////////////////////////////*/
@media only screen and (max-width: 1140px) {

  body {
    /* border-top: 5px solid black; */
  }

  .shuffle-reset  {
    font-size: .6em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }

  #question {
    font-size: 4.4rem;
    line-height: 1;
  }

}


/* LARGE HORIZONTAL
- iPhone x & 12
*/
/* //////////////////////////////////////*/
@media only screen and (max-width: 991px) {
  /* / / */
  
  body {
    /* border-top: 5px solid blue; */
  }

  .shuffle-reset  {
    font-size: .4em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
     font-size: .8em;
  }
  
  #question {
    font-size: 2.5rem;
  }

  
}


/* MEDIUM VERTICAL
NOT SURE BELOW
- iPhone 6,7,8,9 and the + models
*/ 
/* //////////////////////////////////////*/
@media only screen and (max-width: 812px) and (max-height: 375px) {

  body {
    /* border-top: 5px solid rgb(0, 255, 255); */
  }

  .shuffle-reset  {
    font-size: .4em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }

  #question {
    font-size: 2.8rem;
  }

}


/*  LARGE VERTICAL
- iPad
iphone X HORIZ
*/
/* //////////////////////////////////////*/
@media only screen and (max-width: 840px) and (max-height: 1025px) {

  body {
    /* border-top: 5px solid rgb(210, 255, 49); */
  }

  nav {
    font-size: 3rem;
  }

  .shuffle-reset  {
    font-size: .4em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .6em;
  } 
  #question {
    font-size: 4.5rem;
   }

}

/*  LARGE VERTICAL
- iPad
*/
/* //////////////////////////////////////*/
@media only screen and (max-width: 1024px) and (max-height: 768px) {

  body {
    /* border-top: 5px solid rgb(90, 255, 49); */
  }

  nav {
    font-size: 3rem;
  }

  .shuffle-reset  {
    font-size: .4em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .6em;
  }
  #question {
    font-size: 4.5rem;
  }

}


/* //////////////////////////////////////*/
/*  MEDIUM HORIZONTAL
- Surface Duo
– Pixel 2
– iphone 6/7/8 and + 
- IPHOME SE *
*/
/* //////////////////////////////////////*/
@media only screen and (max-width: 812px) and (max-height: 540px) {

  body {
    /* border-top: 5px solid rgb(145, 99, 2); */
  }

  .shuffle-reset  {
    font-size: .6em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }
  
  #question {
    font-size: 2.2rem;
  }

}



/*  iPhone 12 VERTICAL
– Pixel, 
– Surface Duo */
/* //////////////////////////////////////*/
@media only screen and (max-width: 540px) {

  body {
    /* border-top: 5px solid rgb(255, 14, 203); */
  }

  .shuffle-reset  {
    font-size: .65em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }
  
  #question {
    font-size: 2.2rem;
  }
  
}


/*  IPhone VERTICAL
- iPhone  6,7,8,9,X, 12
– Samsung Galaxy, Pixel, 
– Surface Duo */
/* //////////////////////////////////////*/
@media only screen and (max-width: 375px) and (max-height: 844px) {
 
  body {
    /* border-top: 5px solid rgb(176, 5, 255); */
  }

  nav {
    font-size: 2rem;
  }

  .shuffle-reset  {
    font-size: .6em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }
  
  #question {
    font-size: 2.4rem;
  }
}


/*  IPhone VERTICAL MED XS
- iPhone  SE */
/* //////////////////////////////////////*/
@media only screen and (max-width: 322px) and (max-height: 570px) {
 
  body {
    /* border-top: 5px solid rgb(255, 251, 5); */
  }

  nav {
    font-size: 2rem;
  }

  .shuffle-reset  {
    font-size: .5em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }
  
  #question {
    font-size: 2.1rem;
  }

}

/*  XSmall VERTICAL
- Galaxy Fold
/* //////////////////////////////////////*/
@media only screen and (max-width: 281px) {

  body {
    /* border-top: 5px solid rgb(116, 116, 116); */
  }

  #dlogo-id{
    margin-top:.2rem;
    height: 1.2rem;
}

  .shuffle-reset  {
    font-size: .6em;
  }

  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }
  
  #question {
    font-size: 2.3rem;
  }
  
}

/* //////////////////////////////////////*/
/* MOBILE WIDE   
— iPhone SE Horizontal */ 
/* //////////////////////////////////////*/

/* MOBILE WIDE  */
@media only screen and (max-width: 640px) and (max-height: 360px) {
  
  body {
    /* border-top: 5px solid plum; */
  }

  .shuffle-reset  {
    font-size: .6em;
  }


  .fa-chevron-right,
  .fa-chevron-left {
    font-size: .8em;
  }

  #question {
    font-size: 1.9rem;
  } 

}




/* UTILITY */
.bdr {
  border: 2px rgb(0, 0, 0) solid;
}

.bdr-b {
  border: 2px rgb(99, 192, 253) solid;
}

.bdr-r {
  border: 2px rgb(250, 35, 35) solid;
}

.bdr-o {
  border: 2px rgb(255, 155, 24) solid;
}

.bdr-w {
  border: 2px rgb(255, 255, 255) solid;
}

.bdr-th {
  border: 10px rgb(80, 79, 79) solid;
}