/**************
*FONTS
***************/
@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

/**************
*GENERAL
***************/
.pages #header{padding: 1.5rem 0 1.5rem;}
.absolute{ position: absolute;  top: 0; right: 0;}
.relative{ position: relative; }
.table{ display: table; } 
.h100 {height: 100%;}
.w100{ width: 100%; }
.w50{ width: 50%; }
.vAmiddle { vertical-align: middle;}
.table-cell {display: table-cell;}


/**************
*BG-SECTION
***************/
.bg-img-blue{background: #afd8e6 url("../images/Phonics-Museum-pattern.jpg") repeat; padding: 3.5rem 0 3.5rem;}
.bg-img-blue h2{color: #d05646; font-family: Graphen-Bold; font-size: 5.5rem;  line-height: 60px; margin-bottom: 4rem;}
.bg-img-blue h1{color: #d05646; font-family: Graphen-Bold; font-size: 5.5rem;  line-height: 60px; margin-bottom: 4rem;}

/**************
*GREEN-SECTION
***************/
.green-section{background-color: #399b67; padding: 6rem 0;}

/**************
*BLUE-SECTION
***************/
.bg-blue{background-color: #355ead; padding: 6rem 0;}

/**************
*BLUE-SECTION
***************/
.bg-white{background-color: #ffffff; padding: 6rem 0;}

#reading + #secundary-form,
#howitwork + #secundary-form,
#explore + #secundary-form{ display: none;}






/**************
*READING
***************/
.description-side{padding: 9rem 1.4rem 9rem; }
#reading h4{ font-size: 2.4rem; font-family: Graphen-Bold; color: #355ead;}
#reading{ font-size: 1.4rem; color: #555555; }
#reading .green-section h4{color: #ffffff;}
#reading .green-section{ color: #ffffff; }

/**************
*HOW IT WORKS
***************/
#howitwork{ font-size: 1.4rem; color: #555555; }
#howitwork .number{ font-family: Graphen-Bold; font-size: 5rem; border-radius: 50%; border: 5px solid #ffffff; 
  display: inline-block; height: 7rem; width: 7rem; text-align: center; line-height: 1.2; color: #ffffff; margin-top: 3rem;}
#howitwork .howitwork-box{ position: relative; margin-bottom: 4rem; height: 400px;}
#howitwork h4{ font-size: 2.4rem; font-family: Graphen-Bold; color: #355ead;}
#howitwork .green-section{ color: #ffffff;}
#howitwork .green-section a{  font-family: Graphen-Bold; color: #ffffff;}
#howitwork .green-section h4{ color: #ffffff; margin-bottom: 0rem;}
#howitwork .green-section h4 + br{ display: none; }

/**************
*EXPLORE
***************/
#explore{ font-size: 1.4rem; }
#explore h3{ font-size: 3.2rem; font-family: Graphen-Bold;}
#explore .slick-prev {background: url("../images/l-arrow-secondary.png") no-repeat center left; width: 2.6rem; height: 3.8rem; position: absolute;
 left: -20px; top: 12rem;}
#explore .slick-next {background: url("../images/r-arrow-secondary.png") no-repeat center left; width: 2.6rem; height: 3.8rem; position: absolute;
 right: -20px; top: 12rem;}
#explore img{margin: 0 auto;}
#explore .explore-banner{ padding-bottom: 0; }
#explore .explore-banner img{ margin-bottom: -3rem;}
#explore .sectionOne{ padding-bottom: 0; color: #555555;}
#explore .sectionOne img{ margin-bottom: -5rem;}
#explore .sectionOne .description-side{ padding-bottom: 3rem; }
#explore .bg-white.sectionOne h3{ color: #355ead; }
#explore .sectionTwo{ color: #ffffff; padding-bottom: 0;}
#explore .sectionThree{ color: #555555; }
#explore .sectionThree h3{ color: #355ead; }
#explore .sectionFour{ color: #ffffff; padding: 0; height: 333px;}
#explore .sectionFour img{position: absolute; top: -5rem ; right: 0; left: 0; margin: 0 auto; display: inline-block;}


/**************
*BLUE-SECTION
***************/
/*#blue-section{background-color: #355ead; padding: 1.5rem 0;}
#blue-section p, #green-section p, #blue-section h4, #green-section h4{color: #ffffff;}
#blue-section .description-side{padding: 17rem 1.5rem 0rem;}
.wrap-title .r-line{right: -15rem;}*/

/**************
*GRAY-SECTION
***************/
/*#gray-section{background-color: #eaeaea; padding: 90px 0px 110px;}
#gray-section h4{ color: #4c4c4c; }
#gray-section p{color: #4c4c4c; font-family: Graphen-Light; font-size: 14px; line-height: 20px; }
#gray-section p a{color: #4c4c4c; text-decoration: none; }*/

/**************
*SLIDER-SECTION
***************/
/*.bg-img-blue .content-sbg{padding: 5rem 0 10rem; position: relative;}
.slider-bg .slick-prev {background: url("../images/l-arrow-secondary.png") no-repeat center left; width: 2.6rem; height: 3.8rem; position: absolute;
 left: -20px; top: 5rem;}
.slider-bg .slick-next {background: url("../images/r-arrow-secondary.png") no-repeat center left; width: 2.6rem; height: 3.8rem; position: absolute;
 right: -20px; top: 5rem;}*/

/* .slider-bg .slick-slide img{display: block; margin: 0 auto;}



.slider-bg .slide {padding: 0 2rem; height: 273px; display: table;}

.slider-bg .slide .child-element {width: 100%; height: 273px; display: table-cell; vertical-align: middle;}

.slider-bg .slide.slick-center .child-element { max-width: initial; display: block;}

.slider-bg .slick-slide img{display: table-cell;}

.slider-bg .slide.slick-center .child-element img{ width: 19.4rem; height: 27.3rem;}*/



/*slick-slide slick-current slick-active slick-center*/

/*.slider-bg .slide.slick-center, .slider-bg .slide.slick-center .child-element{padding-left: 0; padding-right: 0;}*/



/*.slider-bg .slick-current.slick-center{padding: 0;}*/

/*.slider-bg .slide.slick-center.slick-active {padding: 0;}*/

.slider-bg .slick-slide img{margin: 0 auto;}



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

@media screen and (max-width: 960px) {
  #howitwork .howitwork-box{ height: auto !important; }
  #howitwork .howitwork-box img{ margin-bottom: 2rem; }
  #howitwork .number{ margin-bottom: 2rem; margin-top: 0;}
  #howitwork .howitwork-box .absolute{ position: relative; width: 100%; text-align: center;}
  #explore-slide{ max-width: 440px; margin: 0 auto;}
  .description-side { padding: 3rem 1.5rem 0;}
  #explore .sectionFour img{ position: relative; top: 0; margin: 0 auto; display: block;}
  #explore .sectionFour{ padding: 2rem; height: auto}

  /*.bg-section .image-side .mar-bottom{margin-bottom: 0;}
  #blue-section .description-side{padding-top: 4.5rem; padding-bottom: 4.5rem;}
  #green-section .image-side img{margin-top: 0;}
  #green-section .image-side img{ margin-top: 0; }
  #green-section .image-side img{ margin-bottom: -20px; }
  #green-section .description-side { padding: 3rem 1.4rem;}
  .slider-bg .slick-prev{top: 11rem; left: 0;}
  .slider-bg .slick-next{top: 11rem; right: 0;}
  .bg-section .content-sbg{padding-bottom: 0;}
  .bg-section .description-side{padding-top: 4rem;}*/
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .green-section + #footer.download-section{padding-top: 8.5rem;}
}



@media (max-device-width: 1024px) and (orientation: landscape) {
 
}



@media screen and (max-width: 767px) {
  .description-side { padding: 3rem 1.5rem 0;}
  .green-section, .bg-img-blue{ padding: 3rem 0; }
  #explore .sectionFour{ padding: 2rem 0rem; }







  /*.bg-section .description-side{padding-top: 4rem;}
  #blue-section .description-side{padding-top: 2rem;}
  .bg-section .content-sbg{padding-bottom: 0;}
  #green-section .description-side{padding: 4rem;}
  #green-section .image-side img{margin-top: 0;}*/
/*  .slider-bg .slide{height: 273px;}
  .slider-bg .slide .child-element{height: 273px;}*/
  .slider-bg .slick-prev{left: 0;}
  .slider-bg .slick-next{right: 0;}
  .green-section + #footer.download-section{padding-top: 8.5rem;}
}