/*
Theme Name: Twenty Twenty Child
Description: Twenty Twenty Child Theme
Template: twentytwenty
Version: 1.0.0
Text Domain: twentytwenty-child
*/ 
/* Custom CSS goes after this line */
.top-header {
   background-image: url('/wp-content/themes/funwithlearning/assets/headerBg.png');
   background-size: cover;
   min-height: 500px;
}
.container {
    width: 1200px;
    margin: auto;
    margin-top: 20px;
}
.wordings {
    color: #fff;
    width: 57%;
}
.header-cnt .wordings h1 { font-size: 54px; margin-top: 35px; }
.header-cnt .wordings p {     
    font-size: 40px;
    line-height: 50px; 
}
.fl { float: left; }
.fr { float: right; }
.tab-view {
    position: absolute;
}
.tab-view img {
    width: 85%;
}
.top-footer {
  background-image: linear-gradient(#F69A06, #F58B00);
  min-height: 480px;
  padding: 10px;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.top-footer .wordings {
    width: 38%;
    z-index: 999;
    position: relative;
}
.top-footer .wordings h4 {
    font-size: 2.8rem;
    margin-top: 8px;
}
.top-footer .app-link img {
    z-index: 999;
    display: inline-block;
    width: 200px;
}
.top-footer .app-link img.google {
   width: 235px; 
}
#site-footer {
    background: #843D8C;
    color: white;
    padding: 10px 0;
}
#site-footer .section-inner {
    display: block;
}
.footer-credits {
    display: block;
    text-align: center;
}
.footer-copyright {
    font-weight: 400;
    font-size: 14px;
}

.flex {
    display: flex;
}
.second-fold {
    background: #fff;
}
.second-fold h3 {
    color: #F58C00;
    font-size: 28px;
}
.second-fold ul li,
.second-fold p {
    color: #333;
    font-size: 18px;
}
.second-fold .text {
    width: 80%;
}
.second-fold .mascot {
    width: 130%;
}
.second-fold ul li {
    list-style: none;
    margin-left: 3rem;
    text-indent: -3rem;
}
.second-fold ul li::before {
    height: 10px;
    width: 10px;
    content: url('/wp-content/themes/funwithlearning/assets/coin.png');
    vertical-align: sub;
    margin-left: -3rem;
    margin-right: 10px;
}

.third-fold.flex div.img {
    width: 50%;
    /*background: url('/wp-content/themes/funwithlearning/assets/mom-and-child-with-tablet-img.png');*/
    /*background-size: contain;*/
}
.third-fold.flex .text {
    background: url('/wp-content/themes/funwithlearning/assets/textBg.png');
    color: #fff;
    width: 50%;
}
.third-fold .text-cnt {
    width: 60%;
    margin: auto;
}
.third-fold .text-cnt {
    font-size: 16px;
}
.third-fold.flex,
.forth-fold.flex {
    padding: 0;
}
.forth-fold.flex img {
    width: 25%;
}

@media only screen and (max-width: 600px) {
  .top-header { min-height: 600px; }
  .container { width: 375px; }
  .fr { float: unset; width: fit-content; }
  .header-cnt .wordings h1 {
	  font-size: 3em;
    text-align: center;
  }
  .header-cnt .wordings p { font-size: 1.6em; }
  .top-footer { min-height: 700px; }
  .top-footer .wordings {
	  width: fit-content;
    MARGIN-TOP: 40%;
  }
  .app-link { text-align: center; }
  
  .second-fold { display: grid; }
  .second-fold div {
	  order: 1;
    text-align: center;
    width: 100%;
  }
  .second-fold .mascot {
	  width: 80%;
    order: 0;
    margin: auto;
  }
  .second-fold .text {
	  width: 90%;
    margin: auto;
  }
  
  .third-fold.flex {
	  display: grid;
  }
  .third-fold.flex div.img { width: 100%;  }
  .third-fold.flex .text { width: 100%; }
  .third-fold .text-cnt { width: 90%; }
  
}