html,
body {
  /*background-image: url("");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;*/
  background-color: white;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Section Styles */

#editors {
margin-bottom: -35px;
}

article {
  margin: 1em auto;
  max-width: 850px;
  position: relative;
}

.orange-bg {
  padding: 10px;
  background: #f27029;
  margin-top: 0px;
  margin: auto;
}

.orange-box {
  width: 100%;
  background: #fce2d4;
  padding: 20px;
  border: solid 2px #f27029;
  margin: auto;
  max-width: 850px;
}

p.subhead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.8em;
  line-height: 1.5em;
  margin: 1em 0;
  color: #000;
  text-align: center;
}

p.subsubhead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.4em;
  line-height: 1.3em;
  margin: 1em 0;
  color: #000;
  text-align: left;
}

p.subhead-white {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.8em;
  line-height: 1.5em;
  margin: 1em 0;
  color: white;
  text-align: center;
}

.date-container {
  width: 100%;
  background: black;
  padding: 30px;
}

.white-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1.8em;
  letter-spacing: 0;
  text-align: center;
  color: white;
  margin-bottom: 0;
  transition: all 0.2s;
}


.spots-text{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.6em;
  line-height: 1.8em;
  letter-spacing: 0;
  text-align: center;
  color: white;
  margin-bottom: 0;
  transition: all 0.2s;
}

.black-container {
  width: 100%;
  background: black;
}

.green-container {
  width: 100%;
  background: rgb(216,251,189);
background: linear-gradient(90deg, rgba(216,251,189,1) 0%, rgba(255,255,255,1) 97%);
}

.yellow-container {
  width: 100%;
  background: rgb(255,255,204);
  background: linear-gradient(90deg, rgba(255,255,204,1) 0%, rgba(255,255,255,1) 97%);
}


/* Top Arrow Styles */
.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #fff;
	fill: transparent;
	stroke-width: 3px;
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}


/* Headline Styles */

.eyebrow {
  width: 100%;
  background: #00ade6;
  padding: 10px 5% 10px 5% !important;
  margin-bottom: 0 !important;
}

.eyebrow h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1.2em;
  letter-spacing: 0;
  text-align: center;
  color: white;
  margin-bottom: 0;
  transition: all 0.2s;
}

header {
  width: 100%;
  /*background-color: ;*/
}


.header-container {
   position: relative;
   text-align: center;
   color: rgb(64, 11, 124);
   width: 100%;
   background: #f8fceb;
}

.center {
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translate(-50%, -50%);
}

h1.headline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1em;
  letter-spacing: 0;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  margin-top: 2.4em;
  color: black;
  transition: all 0.2s;
  text-transform: uppercase;
}

h2.subhead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 4.4em;
  letter-spacing: 0;
  max-width: 900px;
  margin: .25em auto;
  text-align: center;
  color: black;
  transition: all 0.2s;
  text-transform: uppercase;
  margin: 0 auto;
}

h3.subhead {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1.6em;
  letter-spacing: 0;
  max-width: 900px;
  margin: .5em auto;
  text-align: center;
  color: grey;
  transition: all 0.2s;
  padding: 0 5%;
}



/* Universal Styles */

p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.5em;
  margin: 1em 0;
  color: #000;
  font-weight: 400;
}

a {
  color: rgba(158, 22, 65, 1);
}

strong {
  font-weight: 900;
}
.callout {
  color: red;
}

.center {
  text-align: center;
}

mark {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1em;
  font-weight: 900 !important;
  background-color: yellow !important;
}

hr {
  margin-top: 2em;
}


/* Quote Styles */

/* The Main quote block box */
blockquote {
  font-family: 'Roboto', sans-serif;
  font-size: 1.4em;
  position: relative;
  width: 80%;
  margin: 1em auto !important;
  padding: 1em 2em !important;
  background-color: #e1ecf1;
  border-radius: .25rem;
  transition: all 0.2s;
}

/* The Byline Style */
cite {
  display:block;
  margin: 1em 0 0 0;
  font-size: .8em;
  color: black;
  font-style: italic;
}

/* List Styles */

ul {
padding: 0 0 0 2em;
margin: 1.5em 0;
list-style: none;
}

li {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1.5em;
  display: block;
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .5em;
  transition: all 0.2s;
}

li::before {
  position: absolute;
  content: '';							/* Enter <img> or CSS entity if you don't want border attributes to create check marks */
  top: 0;
  left: 0;
  transform: rotate(45deg);
  height: 20px;
  width: 12px;
  border-bottom: 6px solid #00ade6;		/* Gives the check marks their color */
  border-right: 6px solid #00ade6;		/* Gives the check marks their color */
  transition: all 0.2s;
}

/*  Ordered List Style with COOL numbers */

ol {
  display: block;
  list-style: none;
  counter-reset: ol;						/* Resets the counter at every new <ol> selector */
  padding: 0 0 0 2em;
  margin: 1.5em 0;
}

ol li {
  counter-increment: ol;
}

ol li::before {
  position: absolute;
  content: counter(ol);
  top: 0;
  left: 0;
  font-weight: 800;
  font-size: 1.5em;						/* Changes the font-size of the counter */
  color: #ef514d;
  transform: rotate(0deg);				/* Must set this to 0 to override the declaration in li::before */
  height: 20px;
  width: 12px;
  border-bottom: 0px solid;				/* This declaration overrides the border style in li::before */
  border-right: 0px solid;				/* This declaration overrides the border style in li::before */
  transition: all 0.2s;
}


/* Layout Styles */

#page-content {
    flex: 1 0 auto;
  margin-bottom: 1em;
}


.maintranscript {
  /*border: 1px solid grey;*/
  text-align: left;
}

#sticky-footer {
  flex-shrink: 0;
}

footer {
  width: 100%;
  background-color:#ccc;
}



/* Video Styles */

#video {
  margin: auto;
  margin-top: 1em;
    margin-bottom: 1em;
  max-width: 750px;									/* Change this width depending on video */
  /*border: 5px solid grey;							/* Uncomment if you want a border */
  transition: all 0.2s;
}


/* Video with Sidebar Layout */

.video-box{
  margin: 1em 0;
  max-width: 1000px;
  width: 100%;
  background: #ccc;
  align-items: center;
}
.video {
  padding: .25em 1em;
}
.sidebar{
  padding: 1em;
  text-align: left;
}
.sidebar ul {
  list-style: none;
  margin-left: -20px;

}
@media screen and (max-width: 768px) {
  .sidebar ul  {
    margin: 0 20px;
    }
}


/* Button Styles */

.button {
  margin: 0em auto;
  text-align: center;
}

.subscribePop {
  display: none;
}

a.subscribeButton {
  background-color: #00ade6;							/* Change this to the button color */
  padding: 0.5em 1.5em;
  margin: 0;
  border-radius:.25em;								/* Change to determing the roundness of the button */
  box-sizing: border-box;
  /*box-shadow: 0 0.125em .25em rgba(0, 0, 0, .25);		/* Adds a shadow to the button itself */
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 1px;
  color: white;
  /*text-shadow: 0 0.025em 0.25em rgba(0, 0, 0, .75);	/* Adds a shadow to the text inside the button */
  text-align: center;
  overflow: hidden;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

a.subscribeButton:before {								/* Adds a glow on the HOVER effect */
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  top: -200%;
  left: -225%;
  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
}

a.subscribeButton:hover {
  color: #FFF;
  text-decoration: none;
  transition: all .5s;
}

a.subscribeButton:hover::before {
  top: 200%;
  left: 200%;
}

a.subscribeButton:active {								/* This is the ACTIVE state when user clicks */
  transform: scale(.98) translate(0, 2px);			/* Creates a CLICK effect */
  transition: all .2s;
  background-color: rgba(237, 28, 36, 1);				/* Changes the color of the button */
}


/* Lower Testimonials on LP */

.lp-flex-container {
    display: flex;
    width: 75%;
    justify-content: center;
    align-content: space-between;
}
.lp-flex-item {
    width: calc(33% - 1em);
    padding: 1em;
    margin: .5em;
    background: #ccc;
    font-size: 1.6em;
    text-align: left;
}
@media screen and (max-width: 768px) {
  .lp-flex-container {
    width:100%;
  }
  .lp-flex-item {
    font-size: 1.4em;
  }
}
@media screen and (max-width: 425px) {
  .lp-flex-container {
      flex-flow: row wrap;
      align-items: center;
      justify-content: center;
  }
  .lp-flex-item {
      width: 90%;
  }
}



/* Sections Styles */

.intro {
  margin-top: .5em;
}

.second {
    margin-top: 4em;
    border-top:1px solid rgba(180,180,180,1);
  }
  .second h3 {
    margin: .5em auto;
    text-align: center;
        font-family: 'Roboto' , sans-serif;
        color: black;
        font-size: 3.5em;
        font-weight: 900;
    letter-spacing: 0;
    transition: all 0.2s;
      }
  .second h4 {
    margin: .5em auto;
    text-align: center;
        font-family: 'Roboto' , sans-serif;
        color: black;
        font-size: 2.5em;
        font-weight: 900;
    letter-spacing: 0;
    transition: all 0.2s;
      }



/* Side Column Quote Template */

/* Wrap the text and quote in this container */
.side-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
    align-items: center;
}

/* Normal content goes in this container and takes up the remaining 60% (accounts for padding) */
.side-content {
  width: 60%;
  transition: all 0.2s;
}

/* Quote goes inside this class and takes up 30% of the container */
.side-quote {
  background: #27a69a;
  width: 36%;
  margin: 0 0 0 4%;
  vertical-align: justify;
  padding: 1.5em;
  transition: all 0.2s;
}
.side-quote p {
  color: #fff;
  font-weight: 600;
}


/* Figure Styles for Full width Images */

figure {
  margin: 1em auto !important;
  transition: all 0.2s;
}

img {
  max-width: 100%;
}

figcaption {
  display: block;
  text-align: center;
  font: .95em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #777;
  margin-top: 1em;
}

figure.eighty {width:80%;}
figure.sixty {width:60%;}
figure.fifty {width:50%;}
figure.thirty {width:30%;}


.signature {
  max-width: 250px
}

/* Images that FLOAT on Desktop */

.small-image {
  max-width: 25%;
  float: right;
  clear: both;
  padding: .5em 0 .5em .5em;
  transition: all 0.2s;
}

.medium-image {
  max-width: 40%;
  float: right;
  clear: both;
  padding: 1em 0em 2em 2em;
  transition: all 0.2s;
}

.medium-image-l {
  max-width: 40%;
  float: left;
  clear: both;
  padding: 1em 2em 2em 0em;
  transition: all 0.2s;
}


.large-image {
  max-width: 60%;
  float: right;
  clear: both;
  padding: 1em 0 1em 1em;
  transition: all 0.2s;
}

.headshot {
  padding: 0 0 .5em .5em;
}

/* Content that needs to be Flex Wrapped depending on number of colunns */

.flex-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.two-column {
  width: 50%;
  transition: all 0.2s;
}

.three-column {
  width: 33%;
  transition: all 0.2s;
}


/* Webinar Styles */


.host {
  position: absolute;
  left: 20px;											/* sets the distance between the box and the paragraph - higher no. = closer distance */
  transform: translate(-100%, 0); 					/* flushed the box left 100% regardless of how long the name is */
    background: #27a69a;
  padding: 3px 8px;
  margin: 5px 0;
  border-radius: 5px;
  color: white;
  font-size: .9em;
  font-weight: bold;
  text-transform: uppercase;
}

.guru {
  position: absolute;
  left: 20px;											/* sets the distance between the box and the paragraph */
  transform: translate(-100%, 0); 					/* flushed the box left 100% regardless of how long the name is */
  background: #ef514d;
  padding: 3px 8px;
  margin: 5px 0;
  border-radius: 5px;
  color: white;
  font-size: .9em;
  font-weight: bold;
  text-transform: uppercase;
}

/* Mobile Transcript Link Style */

.mobileTranscriptLink {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}


/* Footer Styles */

#legal {
  max-width: 1000px;
  padding: 2em 2.5%;
  margin: auto;
  box-sizing: border-box;
}

#legal p {
  text-align: justify;
  font: .85em/1.4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  margin: 0px auto;
  color: rgba(125, 125, 125, 1);
}

#legal a {
  color: rgba(180,170,160,1);
}

.legaldate {font-weight: bold};


/* Advertorial Styles */

.advertorial {
  text-align: center;
  font-size: .8em;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  margin: 5px auto;
  color: rgba(125, 125, 125, 1);
}
.advertorial-links {
  text-align: center;
  font-size: .8em;
  font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  margin: 5px auto;
}



/* MEDIA QUERIES */

@media screen and (max-width: 1024px) {

  .host {
    display: inline-block;
    transform: translate(0);
    position: relative;
    float:left;
    margin: 0 10px 0 0;
    left: 0;
  }

  .guru {
    display: inline-block;
    transform: translate(0);
    position: relative;
    float:left;
    margin: 0 10px 0 0;
    left: 0;
  }

  h1.headline {
    font-size: 1.6em;
    margin-top: 3.5em;
  }


}

@media screen and (max-width: 768px) {

  #editors {
    margin-bottom: -41px;
  }

.spots-text{
  font-size: 1.3em;
}

.date-container {
  padding: 0px;
}

  .eyebrow {
    padding: 10px !important
  }
  .eyebrow h3 {
    font-size: .8em
  }

  h1.headline {
    font-size: 1.6em;
    margin-top: 4em;
  }

  h2.subhead {
    font-size: 3em
  }

  h3.subhead {
    font-size: 1.4em
  }

  h4 {
    font-size: 1.2em
  }

  p {
    font-size: 1.2em
  }

  ul {
    padding-left: 0
  }

  li {
    font-size: 1.1em
  }

  ol {
    padding-left: 0
  }

  blockquote {
    font-size: 1.2em;
    /*margin: 1.5em 0 1.5em 1em !important;*/
  }

  article {
    max-width: 100%
  }
  .maintranscript {
    padding: 0% 5%;
  }


  figure {
    margin: 1.5em auto !important;
  }

  figure.fifty {
    width: 40%;
    margin-top: 0px;
  }

  .small-image {
    float: none;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 40%;
    padding: 0
  }
  .medium-image {
    float: none;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
    padding-right: 3em
  }
  .large-image {
    float: none;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
    padding-right: 3em
  }
  .headshot {
    max-width: 50%;
    float: right;
    padding-left: 2em;
    margin: .5em auto
  }

  #legal p {
    font-size: .8em;
  }
}

@media screen and (max-width: 425px) {

  #editors {
    margin-bottom: -25px;
  }


p.subsubhead {
  font-size: 1.2em;
}


.spots-text{
  font-size: 1.3em;
  line-height: 1.3em;
}

.orange-bg {
  display: block;
  margin-top: 0;
}

p.subhead {
  font-size: 1.6em;
  line-height: 1.3em;
}

p.subhead-white {
  font-size: 1.6em;
  line-height: 1.3em;
}

.white-text{
  font-size: .8em;
}

.banner{
  height: 225px;
}
.eyebrow h3{
  font-size: .8em;
}

  h1.headline {
    font-size: 1.3em;
    margin-top: 5em;
  }

  h2.subhead {
    font-size: 2.2em;
    line-height: 1.2em;
  }

  h3.subhead {
    font-size: 1.2em;
    line-height: 1.2em;
  }

  li {
    font-size: 1.2em
  }


  #video {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .button {
    margin: 1em auto;
  }
  a.subscribeButton {
    display: block;
    padding: .75em;
    font-size: 1.3em;
    line-height: 1.2em;
    margin: 0 5%;
  }

  blockquote {
    width: 100%;
    font-size: 1.2em;
  }

  .col-lg-12 {
    padding-right: 0;
    padding-left: 0;
  }

  .maintranscript {
    border: 0;
    box-shadow: 0 0 0;
  }

  .intro {
    margin-top: .5em;
  }

  .second {
    margin-top: 2em;
  }

  .second h3 {
    font-size: 2em;
  }

  .side-content {
    width: 100%;
  }
  .side-quote {
    width: 100%;
    margin: .5em auto;
  }

  figure {
    margin: .5em auto !important;
  }

  figure.eighty {
    width: 100%;
    margin-top: 0px;
  }


  figure.fifty {
    width: 65%;
    margin-top: 0px;
  }

  .large-image {
    max-width: 100%;
    padding: 0;
    margin: 1em auto
  }
  .small-image {
    max-width: 100%;
    padding: 0;
    margin: 1em auto
  }
  .medium-image {
    max-width: 100%;
    padding: 0;
    margin: 1em auto
  }
  .medium-image-l {
    max-width: 100%;
    padding: 0;
    margin: 1em auto
  }

  .headshot {
    float: right;
    width: 50%;
    padding: 10px 0px 10px 10px;
  }

  .two-column {
    width: 100%;
  }

  .three-column {
    width: 100%;
  }

  #legal p {
    font-size: .6em
  }
}

@media screen and (max-width: 375px) {
  .white-text{
    font-size: .7em;
  }
}



/* Exit Pop Styles and Extra Assets */

/* Overlay Background */
#pop-overlay-background,  #clickpop-overlay-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .75);
  z-index: 1100;
  transition: all 0.2s
}

/* EXITPOP Container for Positioning */
#pop-overlay-container, #clickpop-overlay-container {
  display: none;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;											/* Always centered */
  height: 70%;										/* The higher the value the higher the EXITPOP */
  z-index: 1200;
  transition: all 0.2s
}

/* Content of the EXITPOP with background and shadow*/
#pop-overlay-content {
  z-index: 1300;
  background-color: rgba(245,245,245,1);
  padding: 1em 2em;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.2em;
  line-height: 1.4em;
  position: relative;
  border-radius: 20px;
  transition: all 0.2s
}

/* EXITPOP Title */
#pop-overlay-content h1 {
  margin: .5em auto;
  font-family: 'Roboto', sans-serif;
  font-size: 3em;
  line-height: 1em;
  letter-spacing: 2px;
  font-weight: 900;
  color: black;
  text-align: center;
  text-transform: uppercase
}
#pop-overlay-content h2 {
  margin: .5em auto;
  font-family: 'Roboto', sans-serif;
  font-size: 2em;
  line-height: 1em;
  letter-spacing: 1px;
  font-weight: 900;
  color: black;
  text-align: center;
}
#pop-overlay-content h3 {
  margin: 1em auto;
  font-family: 'Roboto', sans-serif;
  font-size: 1.3em;
  line-height: 1.3em;
  font-weight: 900;
  color: black;
  text-align: center;
}


/* EXITPOP Copy */
#pop-overlay-content p {
  font-size: 1em
}

#pop-overlay-content p strong {
  font-weight: 700
}

/* Link in Copy */
#pop-overlay-content a {
  cursor: pointer;
  color: rgba(237, 28, 36, 1);
  text-decoration: none;
  transition: all 0.2s
}

#pop-overlay-content a:hover {
  color: rgba(2, 207, 255, 1)
}

/* X Button on top right */
a#exitButton {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  color: black;
  padding: 1em;
  font: .5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  font-weight: bold;
  line-height: .95em;
  border: 1px solid black;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.2s
}

a#exitButton:hover {
  color: white;
  text-decoration: none;
  background: rgba(2, 207, 255, 1);
  border: 1px solid white;
  border-radius: 50%
}

/* Centers Buttons */
#pop-overlay-button-container {
  margin: 1em auto;
  display: flex;
  align-items: center;
  text-align: center
}
/* Sets the margin of the button depending on their horizontal placement */
#pop-overlay-button-container .left-pop-button {
  margin-left: auto;
}
#pop-overlay-button-container .middle-pop-button {
  margin: auto;
}
#pop-overlay-button-container .right-pop-button {
  margin-right: auto;
}

/* Buttons are all styled the same by default but can be changed individually below */
a#exitpopplay,
a#exitpopread,
a#exitpopform {
  width: 30%;
  cursor: pointer;
  margin: 1em;
  border-radius: 18px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  color: white;
  font-family: 'Roboto', sans-serif;
  padding: 12px 22px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s
}


/* Resume Video Button */
a#exitpopplay {
  background: rgba(237, 28, 36);
}

a#exitpopplay:hover {
  background: rgba(2, 207, 255, 1);
  color: white
}

/* Read Transcript Button */
a#exitpopread {
  background: rgba(237, 28, 36);
}

a#exitpopread:hover {
  background: rgba(2, 207, 255, 1);
  color: white
}

/* Order Form Button */
a#exitpopform {
  background: rgba(237, 28, 36);
}

a#exitpopform:hover {
  background: rgba(2, 207, 255, 1);
  color: white
}


/* Sign Up Form */
#EmailCapture {
  margin: 1em auto;
}
.EmailSubmit {
  font-size: 1em;
}
.error_message {
  margin: 1em auto;
  text-align:center;
}
.disclaimer {
  text-align: justify;
  font-size: .7em;
  color: rgba(0, 0, 0, .5);
  line-height: 1.3em;
}


/* RESPONSIVE EXITPOP CSS */

/* Super Large Screens */
@media screen and (min-width: 1800px) {
  #pop-overlay-container, #clickpop-overlay-container {
    width: 30%
  }
}

/* Smaller Laptops */

@media screen and (max-width: 1024px) {
  #pop-overlay-container, #clickpop-overlay-container {
    width: 70%;
  }
}

/*Tablets */
@media screen and (max-width: 768px) {
  #pop-overlay-container, #clickpop-overlay-container {
    width: 90%;
    height: 80%;
  }

  #pop-overlay-content p {
    font-size: .8em
  }

  a#exitpopplay,
  a#exitpopread,
  a#exitpopform {
    width: 40%;
    margin: .5em auto
  }
}

/* Mobile Devices */
@media screen and (max-width: 425px) {
  #pop-overlay-container, #clickpop-overlay-container {
    width: 95%;
    top: -25%
  }

  #pop-overlay-content {
    padding: 1em;
    border-radius: 0
  }

  #pop-overlay-content h1 {
    margin-top: 1em;
    font-size: 1.5em
  }
  #pop-overlay-content h2 {
    margin-top: 1em;
    font-size: 1.3em
  }
  #pop-overlay-content h3 {
    margin-top: 1.5em;
    font-size: 1.1em;
  }


  /* Hides Content Except Buttons and Title in Mobile for Google Mobile Compliance Purposes
  #pop-overlay-content p {
    display: none
  }
  */

  #pop-overlay-button-container {
    display: block !important;
  }

  a#exitpopplay,
  a#exitpopread,
  a#exitpopform {
    display: block !important;
    width: 100% !important;
    margin: 1em auto !important;
    font-size: .8em;
    line-height: 1.2em
  }

  .EmailSubmit {
    font-size: 1rem;
  }

  .disclaimer {
    font-size: .6em;
  }
}

/* Small Mobile Divices */
@media screen and (max-width: 375px) {
  .EmailSubmit {
    font-size: .9rem;
  }
}
@media screen and (max-width: 325px) {
  .EmailSubmit {
    font-size: .75rem;
  }
}



/* COUNTDOWN TIMER Styles */

#clockDiv {
  align-items: center;
    justify-content: center;
    margin: 1em auto;
}

#clockDiv .numbers-wrapper {
    background: white;
    margin: 10px;
}

#clockDiv .numbers-title {
    text-align: center;
    margin-top: 10px;
}

#clockDiv .numbers {
    min-width: 100px;
    color: red;
    text-align: center;
    font-size: 3rem;
}

#clockLive p {
  color: red;
    text-align: center;
    font-size: 2rem;
}

/* Countdown Timer Mobile Devices  */
@media screen and (max-width: 425px) {
  #clockDiv .numbers-title {
    font-size: .9rem
  }
  #clockDiv .numbers {
    min-width: 75px;
    font-size: 2rem
  }
}
@media screen and (max-width: 375px) {
  #clockDiv .numbers-title {
    font-size: .8rem
  }
  #clockDiv .numbers {
    min-width: 65px;
  }
}
@media screen and (max-width: 320px) {
  #clockDiv .numbers-title {
    font-size: .7rem
  }
  #clockDiv .numbers {
    min-width: 50px;
  }
}