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

@font-face {
  font-family: Graphen-Regular;  
  src: url('../fonts/Graphen.otf'),  
       url('../fonts/Graphen.ttf') format('truetype');
  font-weight: 400; 
}

@font-face {
  font-family: Graphen-Bold;  
  src: url('../fonts/GraphenBold.otf'), 
       url('../fonts/GraphenBold.ttf') format('truetype');
  font-weight: normal; 
  font-style: normal; 
}

@font-face {
  font-family: Graphen-Light;  
  src: url('../fonts/GraphenLight.otf'), 
       url('../fonts/GraphenLight.ttf') format('truetype');
  font-weight: 300; 
   
}

/**************
*GENERAL
***************/
*{outline: none;}
.center-block{display: block; margin: 0 auto;}
.center-text{text-align: center;}
.left-text{text-align: left;}
.right-text{text-align: right;}
.no-padding{padding: 0;}
.wrap-absolute{ position: absolute;}
.wrap-relative{ position: relative;}
.field-hide, #thank-you-form{ display: none;}
#thank-you-form h3{ color: #9ce4f0; font-family: "PT Sans", sans-serif; font-size: 3.7rem; text-align: center; font-weight: bold;}

body{font-family: 'PT Sans', sans-serif; }
 .menu-footer{ display: none !important; }
.no-padding-right{ padding-right: 0; }

.center { text-align: center; }

.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-bottom-30 { margin-bottom: 30px !important; }
.margin-bottom-40 { margin-bottom: 40px !important; }
.margin-bottom-50 { margin-bottom: 50px !important; }

.margin-top-10 { margin-top: 10px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-30 { margin-top: 30px !important; }
.margin-top-40 { margin-top: 40px !important; }
.margin-top-50 { margin-top: 50px !important; }

.btn { background: white; border: 1px solid #cecece; border-radius: 3px; padding: 7px 20px; font-size: 14px; color: #565656; }

.bug-btn { display: block; margin: 10px auto 80px; padding: 10px 20px; max-width: 230px; text-align: center; font-size: 18px; font-weight: bold; color: white; background: #385DAD; border: 0px solid transparent; }

.bug-btn:hover { color: white; background: #304f92; }
.bug-btn:focus { color: white; background: #304f92; }

/**************
*HEADER
***************/
.top-bar, .top-bar ul{background: #ffffff;}
#header{padding: 2rem 0 2rem;}
.top-bar{padding: 0;}
#header .logo img{width: 37rem; height: 5.5rem; margin-top: -3px;}
#responsive-menu .menu li a{color: #464646; font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 1.6rem; padding: 0.3rem 1.6rem 0.3rem; }
#responsive-menu .menu li a:hover{color: #124ab3;}
.title-bar{background: #ffffff;}
.title-bar .menu-icon{float: right;}
.menu-icon.dark::after{width: 3.6rem; background: #494949;}
.menu-icon.dark::after{box-shadow: 0 12px 0 #494949, 0 24px 0 #494949; height: 4px;}
.menu-icon.dark:hover::after {background: #eeba2e;
    box-shadow: 0 12px 0 #eeba2e, 0 24px 0 #eeba2e; }
.menu-icon.dark{width: 3.6rem; height: 3.2rem;}

/**************
*CONTAINER REGISTER
***************/
/*#container-register{position: relative;}*/
#container-register .blue-container{margin-top: -3rem; padding: 0 6.0rem; position: relative; z-index: 20;}
#container-register .blue-box{border-radius: 0.8rem 0.8rem 0.8rem 0.8rem; background: #399b67; padding: 1.9rem 5rem 1.7rem 3.5rem; /*margin-top: -3.6rem;*/}
.description p{color: #ffffff; font-family: 'PT Sans', sans-serif; font-size: 1.9rem; font-weight: 700; line-height: 23px; margin-bottom: 0.6rem;}
.description span{color: #ffffff; font-family: 'PT Sans', sans-serif; font-size: 1.4rem; line-height: 1.6rem;}
.blue-box input{margin-top: 1rem;}
.blue-box input[type="text"]{color: #999999; border-radius: 0.6rem; font-weight: 700; height: auto; padding: 1.4rem 1.4rem 1.6rem; border: 1px solid #7b9edf;}
.blue-box input[type="submit"]{background-color: #d05646; border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; color: #ffffff; font-family: 'PT Sans', sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 18px; padding: 1.3rem 1.9rem 1.6rem; border: 1px solid #ffffff;}
.blue-box input[type="submit"]:hover{background-color: #a44539;}
#container-register .content-bluecon{z-index: 15; position: relative; margin-bottom: -8.2rem;}

/**************
*BANNER
***************/
#banner{background: #afd8e6 url("../images/Phonics-Museum-pattern.jpg") repeat;}
#yellow-message{background: #ffe984;}
#banner .banner-imgs{padding: 3.6rem 0;}
#banner .yellow-box{color: #3d61a5; font-family: Graphen-Bold; font-size: 3.2rem; line-height: 38px; padding-top: 2rem; padding-bottom: 2rem;}
#banner .gadgets{ z-index: 10; position: relative;}
#banner .top-banner{z-index: 2; margin-top: -2rem;}
#banner .left-side{/*padding-top: 4.2rem; */padding-left: 4.5rem; padding-right: 0;}
#banner .left-side h2{color: #d05646; font-family: Graphen-Bold; font-size: 5.4rem; line-height: 54px; margin: 0;}
#banner .left-side h1{color: #d05646; font-family: Graphen-Bold; font-size: 5.4rem; line-height: 54px; margin: 0;}
#banner .phrase{color: #d05646; font-family: Graphen-Regular; font-size: 3.8rem; line-height: 44px; margin: 0  0rem 2rem;}
#banner .pink-box {
  border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
  background-color: #355ead;
  color: #ffffff;
  font-family: 'PT Sans', sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 13px;
  padding: 2rem 15.2rem 2.5rem 3.3rem;
  z-index: 1;
  width: 43%;
}
#banner .pink-box span{font-size: 1.6rem;}
#banner .pink-box a{display: block; margin-top: 1rem;}
#banner .download-section .dwn a{margin-top: 0.3rem;}
@media screen and (max-width: 959px) { #banner .pink-box { width: 100%; margin-bottom: 30px;} }

/**************
*LEARN
***************/
#learn-section{ background-image: url("../images/bg-learn.2x.jpg"); background-size: cover; background-repeat: no-repeat; padding-top: 4rem; padding-bottom: 11rem;}
#learn-section video{ cursor: pointer; }
#learn-section h2{  font-family: Graphen-Bold; font-size: 4.2rem; color: #3d61a5; }
#learn-section h1{  font-family: Graphen-Bold; font-size: 4.2rem; color: #3d61a5; }
#learn-section p{ font-size: 2rem; color: #0e0e0e; }
#learn-section .video-box{ background-image: url("../images/ipad-video.2x.png"); 
background-repeat: no-repeat; background-size: 100%; padding: 5.5% 8.0% 10% 6.8%; width: 622px; max-width: 100%; margin: 0 auto; position: relative;}
#learn-section .video-box img{ position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer;}

/**************
* Explore
***************/

#explore-section{ }
#explore-section video{ cursor: pointer; }
#explore-section h2{  font-family: Graphen-Bold; font-size: 4.2rem; color: #3d61a5; }
#explore-section h1{  font-family: Graphen-Bold; font-size: 4.2rem; color: #3d61a5; }
#explore-section p{ font-size: 2rem; color: #0e0e0e; }
#explore-section .video-box{ background-image: url("../images/ipad-video.2x.png"); 
background-repeat: no-repeat; background-size: 100%; padding:  3.8% 5.6% 9% 4.5%; width: 622px; max-width: 100%; margin: 0 auto; position: relative;}
#explore-section .video-box img{ position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer;}

@media screen and (max-width: 768px) {
	#explore-section .video-box{ background-image: url("../images/ipad-video.2x.png"); 
background-repeat: no-repeat; background-size: 100%; padding: 5.5% 8.0% 10% 6.8%; width: 622px; max-width: 100%; margin: 0 auto; position: relative;}

}


/**************
*FEATURE SLIDE
***************/
#feature-slide{ background: #fda300; padding: 2rem 0 3rem;}
#feature-slide h3{ font-size: 2.4rem; color: #1d1d1d;  font-family: Graphen-Bold; margin: 2rem 0 1.2rem; line-height: 1}
#feature-slide span{ font-size: 1.6rem; color: #1d1d1d; font-family: "PT Sans", sans-serif; font-weight: 700;}
#feature-slide p{ font-size: 1.6rem; color: #1d1d1d; font-family: "PT Sans", sans-serif; font-weight: 400;}
#feature-slide .slick-arrow{ width: 49px; height: 90px; position: absolute; top: 20%; cursor: pointer;}
#feature-slide .slick-prev{ left: 0; background: url("../images/arrow-left.2x.png") no-repeat; background-size: 100%;}
#feature-slide .slick-next{ right: 0; background: url("../images/arrow-right.2x.png") no-repeat; background-size: 100%;}
#feature-slide #main-slide{ padding: 0 9rem ; }
#feature-slide .slide-element{ margin: 0rem ; }
.slick-dots li button{ font-size: 0; line-height: 0; display: block;
 width: 12px; height: 12px; padding: 5px; cursor: pointer;
 color: transparent; border: 0; outline: none;  border-radius: 50%; border: 1px solid #1d1d1d}
.slick-dots li.slick-active button{  background: #1d1d1d;}

/**************
*SLIDE TITLE
***************/
#main-slide-title{ margin-bottom: 3rem; }
#main-slide-title .button.green{ background: none; border-radius: 8px; padding: 1rem 3rem;}
#main-slide-title .button.green:hover, #main-slide-title .button.green.active{ background: #28a965; color: #ffffff;}



/**************
*QUOTE SLIDE
***************/
#quote{ background: #2c5ab6; position: relative; padding-top: 11rem; padding-bottom: 4rem; background: url("../images/bg-quote.jpg"); background-size: cover; color: #ffffff; }
#quote #title-quote{ font-size: 16.4rem; font-family: Graphen-Light; line-height: 1.4; position: absolute; top: 0; left: 0; right: 0; display: block; margin: 0 auto; text-shadow: 1px 1px 3px #111111;}
#quote h3{ font-size: 2.4rem; color: #ffffff;  font-family: Graphen-Bold; margin-top: 2rem; margin-bottom: 0; line-height: 1}
#quote span{ font-size: 1.6rem; color: #ffffff; font-family: "PT Sans", sans-serif; font-weight: 700;}
#quote p{ font-size: 1.6rem; color: #ffffff; font-family: "PT Sans", sans-serif; font-weight: 400;}

.slick-slider{ margin-bottom: 30px;}
.slick-dots{ position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; margin-left: 0}
.slick-dots li{ position: relative; display: inline-block; width: 12px; height: 12px; margin: 0 5px; padding: 0; cursor: pointer;;}
#quote .slick-dots li button{ font-size: 0; line-height: 0; display: block;
 width: 12px; height: 12px; padding: 5px; cursor: pointer;
 color: transparent; border: 0; outline: none;  border-radius: 50%; border: 1px solid #ffffff}
#quote .slick-dots li.slick-active button{  background: #ffffff;}
.slick-dots li button:before{ font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 12px; height: 12px; content: ' '; text-align: center; opacity: .25; color: black;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.quote-element{ color: #ffffff;  font-size: 1.6rem;}

/**************
*TAKE A TOUR
***************/
#take-a-tour{ font-size: 1.6rem; position: relative; padding: 4rem 0; min-height: 488px; background: #ffffff;}
#take-a-tour *{ position: relative; z-index: 2; }
#take-a-tour span{ font-size: #2056c1; font-size: 24px; font-family: Graphen-Bold; font-weight: 700; color: #2056c1;}
#take-a-tour .grey-line{ height: 90px; background-color: #e8e8e8; width: 100%; position: absolute; bottom: 0; left: 0;}
#take-a-tour .svg{ max-width: 180px; display: block; margin: 0 auto;}

#gif-section{ position: relative;}
#gif-section .p-absolute{ position: absolute; }
#gif-element-one{ top: 0; left: 0;  z-index: 3}
#gif-element-two{ top: 0; left: 0; right: 0;  display: inline-block; margin: 0 auto; z-index: 2; box-shadow: 1px 1px 3px #666666;}
#gif-element-three{ top: 106px; right: 0; z-index: 1}

/**********************
*FEATURE SECTION IMAGES
***********************/
.feature-section-images-element{  margin-top: -120px; margin-bottom: 4rem; font-size: 1.4rem}
.feature-section-images-element img{ margin-bottom: 2.4rem; }
.feature-section-images-element h3{ font-family: Graphen-Bold; font-size: 2.8rem; color: #1d1d1d;}
.button.red{ font-size: 1.6rem; font-weight: 700; border-radius: 4px; background: #d05646; display: none;}

/**************
*DOWNLOAD SECTION
***************/
/*.download-section{padding: 19.6rem 0 6.9rem 2rem;}
.download-section .coming-message{color: #e04096; font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 1.8rem; line-height: 2.3rem; padding-top: 2.2rem;}
.download-section .coming-message span{font-family: Graphen-Bold; font-size: 2.4rem; line-height: 26px;}
.download-section .dwn{display: inline-block; height: 7.0rem; vertical-align: top;}
.download-section .dwn span{color: #636363; font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 15px;}
.download-section .dwn a{display: block; margin: 0;}
*/
/**************
*WAY TO LEARN
***************/
/*#video-section{background: #fad8a4 url("../images/Phonics-Museum-learnbg.2x.jpg") no-repeat top center; background-size: cover; padding-bottom: 18rem;}
#video-section .video-content{padding: 1.8rem 4.5rem;}
.video-box {
-webkit-box-shadow: 0px 0px 18px 0px rgba(47,47,47,0.5);
-moz-box-shadow: 0px 0px 18px 0px rgba(47,47,47,0.5);
box-shadow: 0px 0px 18px 0px rgba(47,47,47,0.5);  
}
#video-section video{border-radius: 0.4rem 0.4rem 0.4rem 0.4rem; border: 2px solid #ffffff;}
.slider-content .green-bg{background: #399b67; border-radius: 0.6rem 0.6rem 0.6rem 0.6rem;}
.slider-content .information{ padding: 4.2rem 10rem 3.2rem; position: relative;}
.slider-content .information .item{width: 23rem; padding: 0 1.5rem; }
.slider-content .information h4{color: #fefefe; font-family: Graphen-Bold; font-size: 1.8rem; line-height: 22px; margin: 1.6rem 0rem 0.5rem;}
.slider-content .information p{color: #fefefe; font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 1.4rem; line-height: 1.6rem;}

.slider-content .slick-arrow{width: 2.6rem; height: 3.8rem;}
.slider-content .slick-prev{position: absolute; top: 50%; left: 2.8rem; height: 3.8rem;}
.slider-content .slick-next{position: absolute; top: 50%; right: 2.8rem; height: 3.8rem;}
.slider-content .green-bg .slick-prev{background: url("../images/Phonics-Museum-leftArrow.png") no-repeat top center;}
.slider-content .green-bg .slick-next{background: url("../images/Phonics-Museum-rightArrow.png") no-repeat top center;}
.slider-content .blue-bg .slick-prev{background: url("../images/Phonics-Museum-blueleftArrow.png") no-repeat top center;}
.slider-content .blue-bg .slick-next{background: url("../images/Phonics-Museum-bluerightArrow.png") no-repeat top center;}
.slider-content .slick-dots{list-style: none;}
.slider-content .slick-dots li {display: inline-block;} 

.slider-content .white-label{background: #ffffff; color: #409568; font-family: Graphen-Bold; font-weight: 700; padding: 2rem 6.0rem; display: inline-block; border-radius: 0.7rem 0.7rem 0.7rem 0.7rem; margin-top: -4rem;}
.slider-content .white-label h3{color: #409568; font-family: Graphen-Bold; font-size: 3.2rem; line-height: 34px; margin-bottom: 0;}
.slider-content .l-screw{top: 2.8rem; left: 1.4rem;}
.slider-content .r-screw{top: 2.8rem; right: 1.4rem;}
.slider-content .middle-position{z-index: 100; left: 0; right: 0; top: -3rem; padding: 0 1rem;}
.slider-content .content-front{margin-top: -15.8rem; position: relative; z-index: 15; 
    padding-top: 1rem;}

.notify-form{padding: 2.5rem 0;}
.notify-form .right-side{padding-top: 4.5rem;}
.notify-form .description{padding-top: 1.4rem;}
.notify-form h5{color: #e04096; font-family: Graphen-Bold; font-weight: 700; font-size: 2.8rem;  line-height: 30px; }  
.notify-form .description span{color: #355ead; font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 1.8rem; line-height: 20px;}
.notify-form input[type="text"]{border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; color: #999999; font-size: 1.4rem; font-weight: 700; height: auto; padding: 1.4rem 1.4rem 1.6rem; border: 0.1rem solid #636363;}
.notify-form input[type="submit"]{ background-color: #3d61a5; border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; color: #9ce4f0; font-family: 'PT Sans', sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 18px; padding: 1.3rem 1.9rem 1.6rem;}
.notify-form input[type="submit"]:hover{background-color: #9ce4f0; color: #3d61a5;}
.notify-form form{margin-top: 1.5rem;}*/

/**************
*EXPLORE MUSEUM
***************/
/*#explore-museum{background: #f9ece3 url("../images/Phonics-Museum-explore.2x.jpg") no-repeat top center; background-size: cover; padding-top: 50rem;}
.slider-content .white-label .blue-text{color: #3d61a5;}
.slider-content .blue-bg{background-color: #3d61a5; border-radius: 0.6rem 0.6rem 0.6rem 0.6rem;}
.slider-content .explore-slider {padding-top: 6.0rem;}
.slider-content .explore-slider .item {padding: 0 3.5rem;}
*/

/**************
*LEARN
***************/
#full-page h2 { color: #3d61a5; margin-bottom: 4rem;  font-family: Graphen-Bold;}
#full-page h1 { color: #3d61a5; margin-bottom: 4rem;  font-family: Graphen-Bold;}
#full-page h3{color: #2056c1; font-family: Graphen-Bold; font-size: 24px; font-weight: 700; margin-bottom: 0;}
#full-page p, #full-page li{ font-size: 1.6rem;  font-family: "PT Sans",sans-serif; color: #0a0a0a; margin-bottom: 5px;}
#full-page ul,
#full-page ol{margin-left: 4.25rem;}
#full-page #take-a-tour{ border-top: 12px solid #B0D6E1; margin-top: 2rem;}

/**************
*FOOTER
***************/
#secundary-form{ background: #31a266; padding: 2rem 0;}
#footer{padding-top: 2rem;}
#footer .menu-footer li{display: inline-block; padding: 0 2.2rem;}
#footer .menu-footer a{color: #464646; font-family: 'PT Sans', sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 18px;}
#footer .menu-footer a:hover{color: #3d61a5;}
#footer .logo-footer{display: inline-block; margin: 0 0 1.3rem;}
#footer .logo-footer img{width: 28.9rem; height: 10.3rem;}
#footer .logo-footer .hide-for-large{width: 23rem; height: auto;}
#footer .dwn{height: auto;}
.download-section .footer-message{padding-top: 0; color: #e04096; font-size: 1.8rem;}
.download-section .footer-message span{ font-size: 2.4rem; color: #e04096; font-family: Graphen-Bold; line-height: 10px}
.footer-message .download{ margin-top: 1rem ; }

#footer.download-section{padding-bottom: 0;}
#footer.download-section .dwn a{margin-left: 0;}


#legal-section{padding: 1.2rem 0;}
#legal-section p, #legal-section a{color: #414141; display: inline-block; font-family: 'PT Sans', sans-serif; font-weight: 400; font-size: 1.1rem; line-height: 13px; padding: 1rem 0;} 
#legal-section a{ text-decoration: underline; }
#take-a-tour .dwn{ margin-top: 1rem; margin-bottom: 2rem;}

@media screen and (max-width: 1200px) {
  #banner .gadgets img{left: 2rem;}
  #responsive-menu .menu li a{font-size: 1.4rem; padding-left: 0.6rem; padding-right: 0.6rem;}
  #footer .menu-footer li{padding: 0 1.5rem;}
  .download-section{padding-left: 0; padding-right: 0;}
  .download-section .dwn{position: relative; z-index: 30;}  
  #banner .left-side {padding-left: 1.5rem;}  
  #banner .left-side h2{font-size: 4.5rem;}
  #banner .left-side h1{font-size: 4.5rem;}
  #banner .phrase{font-size: 3rem; line-height: 30px;}
  #banner .download-section .dwn a{margin-right: 0; margin-left: 0;}
  #banner .download-section .dwn:first-child a{margin-right: 1rem; }
  
}

@media screen and (max-width: 960px) {
  .no-padding-right{ padding-right: 1.5rem; }
  #header .logo{padding-bottom: 1.2rem;}
  #banner .yellow-box{border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;}
  .download-section .coming-message, .download-section .download{text-align: center;}
  #banner .pink-box{position: relative;}  
  #banner .pink-box{padding: 2.5rem 5rem;}
  #banner .left-side{padding: 0 1.5rem;}
  #banner .gadgets{padding-bottom: 3rem;}

  #container-register .description{text-align: center;}
  #secundary-form p, #secundary-form span{ text-align: center; display: block;}

  .notify-form .right-text, .notify-form .left-text{text-align: center;}
  .notify-form .left-text{padding-bottom: 2rem;}
  .notify-form .no-padding{padding: 0 15px;}
  .blue-box input[type="submit"], .notify-form input[type="submit"]{width: 100%;}
  #container-register .blue-container{padding: 0 1rem;}
  #responsive-menu .menu li{border-bottom: 0.2rem solid #3d61a5;}
  #responsive-menu .menu li a{padding: 1.5rem;}
  /*#banner .gadgets img{ margin: 0 auto; top: -0.6rem; left: 0; right: 0; }*/
  .download-section{padding-top: 3rem; padding-bottom: 3rem; text-align: center;}

  .menu.medium-horizontal > li{display: block;}
  #responsive-menu .menu li a{padding: 1.6rem 1.4rem;}
  #responsive-menu .menu li a:hover{background: #3d61a5; color: #ffffff;}

  #footer .dwn{margin-top: 2rem;}
  #footer ul{margin-left: 0;}
  /*.slider-content .content-front{ padding-top: 7rem;}
  #explore-museum  + .slider-content .content-front{margin-top: 0;}*/
  #container-register .blue-box{padding-left: 35px; padding-right: 35px;}
  #gif-section{ min-height: 300px; text-align: center;}
  #gif-section .p-absolute{display: inline-block; margin: 0 auto;}
  #secundary-form{ position: relative; z-index: 10 }
  #gif-section{ width: 555px; margin: 0 auto; }
}

.form__label label {
    font-weight: bold !important;
    font-size: 17px;
    font-family: Graphen-Bold;
}

.contact-form {
	background: #afd8e6 url(/assets/images/Phonics-Museum-pattern.jpg) repeat; margin-bottom: -30px; position: relative; z-index: 1000;
}
.contact-form .text-center {
	max-width: 400px; margin: 0 auto;
}
.contact-form button {
	font-size: 17px;
    padding: 9px 25px;
    font-family: Graphen-Bold;
    border-radius: 3px;
}
.contact-form p, .contact-form label {
	font-size: 20px !important;
    font-family: Graphen-Bold !important;
}

.contact-form .regular-text p {
	font-size: 20px !important;
    font-family: 'PT Sans', sans-serif !important;
}

.contact-form h2 { margin-top: 2rem; margin-bottom: 1.5rem;}
.contact-form h1 { margin-top: 2rem; margin-bottom: 1.5rem;}
.contact-form a { font-weight: bold; color: #0A0A0A;}
.contact-form h3 { color: #3D61A5 !important; }

#feature-section-images .heading { margin-bottom: 130px; margin-top: -120px; text-align: center; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  
}

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

@media screen and (max-width: 767px) {
	
  #feature-section-images .heading { margin-bottom: 0px; }	
  
  h2 { font-size: 3rem; padding: 0px 20px; }
  h1 { font-size: 3rem; padding: 0px 20px; }
	
  .feature-section-images-element{ margin-top: 0; margin-bottom: 1rem; }
  #responsive-menu .menu li a{padding: 1.5rem;}
  #banner .pink-box{position: relative;}
  #banner .pink-box{padding: 2.5rem 5rem;}
  #banner .left-side{padding: 0 1.5rem;}
  .download-section .dwn{display: block; margin: 2rem auto;}
  .download-section{padding-top: 2rem; padding-bottom: 2rem;}
  .slider-content .information{padding-left: 4rem; padding-right: 4rem;}
  #feature-slide {padding-bottom: 3rem;}
  #feature-slide #main-slide{ padding: 0; }

  #footer .menu-footer li{display: block; padding: 1.2rem 2.2rem;}
  #explore-museum{background-position: center right; padding-top: 29rem;}
  .blue-box input[type="submit"], .notify-form input[type="submit"]{width: 100%;}

  
  #gif-section #gif-element-two{  width: 100px; z-index: 3;}
  #gif-section #gif-element-three{ right: -61px; }
  #take-a-tour{ padding-bottom: 0; }
  .m-padding-0{ padding: 0 ; }
  #gif-element-two{ left: 27px; }
  #gif-section { margin: 0 auto; max-width: 100%; min-height: 300px; text-align: center; width: 392px; overflow: hidden !important;}

}
@media screen and (max-width: 400px){
  #gif-section{overflow: hidden !important; width: 100% !important;} 
}
@media screen and (min-width:0\0) { 
  #banner .yellow-box,
  .download-section .coming-message span,
  .slider-content .white-label h3,
  .slider-content .white-label,
  .slider-content .information h4,
  .notify-form h5,
  .bg-section h2,
  .description-side h4,
  #banner .left-side h2{ font-family: 'Paytone One', sans-serif !important; font-weight: 700;}
  #banner .left-side h1{ font-family: 'Paytone One', sans-serif !important; font-weight: 700;}
  #banner .left-side h2{font-size: 45px;}
  #banner .left-side h1{font-size: 45px;}
  #banner .phrase{ font-family: 'Paytone One', sans-serif !important; font-size: 32px; font-weight: 300;}
  .bg-section p, #blue-section p, #green-section p{font-family: "PT Sans", sans-serif;}
}
