/*MOBILE STYLES*/
@media screen and (max-width: 428px) {
	/* RESET & GLOBAL */
	.content {
		width: 100%;
	}
	section {
		padding:  0;
	}
	.clearfix {
		clear:none; /* floats are removed*/
	}
	/*TYPOGRAPHY */
	
	#pagelabel h1 {
		font-size: 28px;
	}
	p.text-mobile {
		display: block; /*shoq hidden mobile specific text*/
		margin: 15px 0;
	}

	/* SECTION*/
      .content {
        width: 100%;
      }

      .hero-image {
      	padding: 10px;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
            margin-top:150px;
      }

      .hero-text {
        align-self: center;
        font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 20px;
        margin-top: 20px;
        padding: 5px;
        margin: 20%;
        text-align: left;
        margin-left: 20px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
      }

      .hero-text button {
        border: none;
          border-radius: 25px;
        outline: 0;
        display: inline-block;
        padding: 10px 25px;
        color: black;
        background-color: #419337;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
      }

      .hero-text button:hover {
        background-color: white;
        color: #419337;
      }

      #pagelabel {
          background-image: url(../images/banner.jpg);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
      }

      #pagelabel h1 {
         font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 40px;
        text-transform: capitalize;
        text-align: center;
        margin: 60px;
        color: #ffffff;
      }

	/* HEADER AND NAVIGATION*/
	header {
		text-align: center;
	}
	#logo, nav {
		float: none;
	}
	#logo img {
		height: 50px;
		margin: 0 auto;
		align-self: center;
	}
	nav {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;		
		text-align: center;	
	}
	nav ul {
		display: flex; 
		flex-direction: column;		
		text-align: center;	
	}
	nav ul li {
		width: 100%;
		list-style: none;
		text-align: center;
	}
	nav ul li a {
		font-size: 0.95em;
		text-align: center;
	}

/* ABOUT*/
      #about {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 500px vw;
      }

      .about-image1 {
        height: 100%;
        width: 100%;
      }

      .about-h3{
      	align-self: center;
        font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 100%;
        margin-top: 10px;
      }

      .about-p{
      	align-self: center;
       font-family: "Varela Round", system-ui;
        font-weight: 400;
        font-size: 15px vw;
        margin-left: 20px;
        flex-flow: wrap;
        margin: 10px;

}

/* NEWS*/
 #news {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 500px vw;
        margin-top: 20px;
      }
 .news-image1 {
        width: 100%;
        width: 30%;
        margin: 20px;
           flex: 40%;
      }
 .news-h2{
        font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 20px;
        margin-top: 20px;
        padding: 5px;
      }

 .news-h3{
        font-family: "Varela Round", system-ui;
        font-weight: 800;
        font-size: 15px;
        padding: 5px;
      }

 .news-p{
       font-family: "Varela Round", system-ui;
        font-weight: 400;
        font-size: 10px vw;
        margin: 20px;
        flex-flow: wrap;
        padding: 5px;
}


/* FEATURED LESSON*/
 #partnerships {
     flex-direction: row;
		flex-wrap: wrap;
		margin-left: 0;
		margin-top:20px
		flex: 1 1 auto;
		width: 100%;
      }

    .card-container {
        flex-direction: column;
		margin-left: 0;
		margin-top:20px
		flex: 1 1 auto;
		width: 100%;
    }

    .card {
    	flex-direction: column;
		margin-left: 0;
		margin-top:20px
		flex: 1 1 auto;
		width: 100%;
	}

	.event-container{
		flex-direction: row;
		flex-wrap: wrap;
		margin-left: 0;
		margin-top:20px
		flex: 1 1 auto;
		width: 100%;

	}
	.event-card {
		flex-direction: column;
		margin-left: 0;
		margin-top:20px
		flex: 1 1 auto;
		width: 100%;
	}

/*CONTACT*/
	 .content {
        width: 100%;
      }

      .hero-image {
      	padding: 10px;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
            margin-top:150px;
      }

      .hero-text {
        align-self: center;
        font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 20px;
        margin-top: 20px;
        padding: 5px;
        margin: 20%;
        text-align: left;
        margin-left: 20px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
      }

      .hero-text button {
        border: none;
          border-radius: 25px;
        outline: 0;
        display: inline-block;
        padding: 10px 25px;
        color: black;
        background-color: #419337;
        text-align: center;
        color: #ffffff;
        cursor: pointer;
      }

      .hero-text button:hover {
        background-color: white;
        color: #419337;
      }

      #pagelabel {
          background-image: url(../images/banner.jpg);
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
      }

      #pagelabel h1 {
         font-family: "Varela", system-ui;
        font-weight: 800;
        font-size: 40px;
        text-transform: capitalize;
        text-align: center;
        margin: 60px;
        color: #ffffff;
      }

/*FOOTER*/
	footer {
		text-align: center;
	}
	footer img {
		float: none;
		width: 150px;
		margin: 0 auto 15px;
		display: block;
	}
	#copyright, #designer {
		float: none;
		margin-left: 0;
		margin-top: 10px;
		width: 100%;
		display: block;
	}
	  #inquiry
      {
        float: none;
		width: 150px;
		margin: 0 auto 15px;
		display: block;
      }
	/*FORM*/
	.form-group {
		font-size: 1.1em;		
	}
	.form row {
		margin-bottom: 10px;
	}
	#skill-level-options {
		flex-direction: column;
		gap: 10px;
	}
	#skill-level-options .form-row {
		margin-bottom: 6px;
	}
	.form-groupselect {
		font-size: 0.8em;
		height: 44px;
		line-height: 44px;
	}
	/*UGC*/
	#ugc .ugc-feed {
		grid-template-columns: 1fr;
	}
	#ugc .ugc-form-iframe {
		height: 920px;
	}
	#ugc .ugc-avatar {
		width:40px;
		height: 40px;
	}
	#ugc .ugc-card {
		padding: 16px;
	}
}