body {
  background-color: #eeeeee;
  letter-spacing: 0.03em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Korolev-Medium;
  color: #373737;
  
}

#footer, .footer {
	background-color: #fff;
	padding: 2em 0 2em 0;
	text-align: center;
  font-size: 20px;
}

.intro {
	background-color: #aba3f1;
}

.center-text, .text-center {
	text-align: center;
}

.right-text, .text-right {
	text-align: right;
}

.img-responsive {
	max-width: 100%;
}

button, .button {
    font-size: 20px;
}



/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}


/* Start Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro #InputEmail {
	width: 100%;

}

button#startQuiz{
	width: 60%;

}
button#startQuiz:disabled{
	background-color: #eeeeee;

}

.welcome-leader {
  font-size: 20px;
}

.checkbox label {
  font-size: 14px;
}
.checkbox label a {
  color: #000;
}

/* Results Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.results-header {
  background-color:#46c1be;
  padding-bottom: 30px;
}
.results-header span{
  font-size: 19px;
}

.logo.container {
	padding: 40px 0 2em 0;
}

.thanks-headline {
	margin-bottom: 2em;
}

#results-body {
	padding-top: 2em;
	padding-bottom: 2em;
  background: url('../media/white-bgdevice.png');
  background-repeat: no-repeat;
  background-position: top right;

}

#results-body .columns {
	background-color: #e1e1e1;
}


.results-cols {
	text-align: left;
    padding: 0 1.5em;
    font-size: 16px;
    margin-top: 10px;

}
.results-cols a{
  text-decoration: none;
}

.results-cols ul {
	list-style-image: url(../media/list-style-image.png);
	list-style-position: outside; 
    padding-left: 20px;
}

.results-cols p {
	margin-top: 2em;
}

#explore-further {
	background-color: #fff;
	padding: 2em 0;
}

#explore-further button {
    /*width: 20em;*/
}

#results-footer {
	padding: 2em 0;
    background-color: #373737;
}

#results-footer a{
	margin: 0 22px;
  text-decoration: none;
}

/* Questions Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.question-header {
	padding: 2em 0;
}
.question-body {
	padding: 0 0 2em 0;
	text-align: center;
}



/* Bigger than 550 */
@media (min-width: 550px) {
  
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
   
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px; 
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
  .categories {
    padding: 15rem 0 8rem;
  }


}

/* Bigger than 1000 */
@media (min-width: 1000px) {
 
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }

  .results-cols {
  	min-height: 389px;
  }
  

}


/* when hiding the thing */
.left-box.ng-hide-add, .right-box.ng-hide-add, .header-box.ng-hide-add        { 
  -webkit-animation:0.5s zoomOut ease; 
  animation:0.5s zoomOut ease; 

}

/* when showing the thing */
.header-box.ng-hide-remove      { 
  -webkit-animation:0.5s zoomIn ease; 
  animation:0.5s zoomIn ease; 
  
}
.left-box.ng-hide-remove      { 
  -webkit-animation:0.5s zoomInLeft ease; 
  animation:0.5s zoomInLeft ease; 
  
}

.right-box.ng-hide-remove      { 
  -webkit-animation:0.5s zoomInRight ease; 
  animation:0.5s zoomInRight ease; 
  
}

/* ANIMATIONS (FROM ANIMATE.CSS) */



@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}



@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}



@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}