/*
Theme Name: Red Wagon Institute
Theme URI: https://www.redwagoninstitute.com
Description: Red Wagon Institute
Author: Webedelic
Author URI: http://www.webedelic.com
Description: Red Wagon Institute
Version: 1.0
Tags: Red Wagon Institute
License:
License URI:
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


html, body {
	font-size: 15px;
    font-family: "poppins", sans-serif;
	color: #000000;
	height: 100%;
	margin: 0;
  padding: 0;
  padding-top: 0px;
}

h1, h2 {
	color: #000000;
}

h1 {
	font-size: 150%;
}

h2 {
	font-size: 18px;
	font-family: "poppins", sans-serif;
	color: #000000;
	font-weight: 900;
}

img {
	max-width: 100%;
	height: auto;
}
a:link {color: #f03c4d; text-decoration: none; }
a:visited {color: #f03c4d; text-decoration: none; }
a:hover {color: #000000; text-decoration: none; }
a:active {color: #f03c4d; text-decoration: none; }






.fullnav {
	position: fixed;
	top: 0;
	z-index: 9999;

	background-color: #ffffff;
	height: 120px;
	width: 100%;
	padding: 0 3%;
	margin: 0;

	box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



.logo-left {
	width: 110px;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:40px;
	padding-left:0px;
	float: left;
	
}

.logo-right {
	width: 1000px;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	float: left;
	
}





.navline {
	padding-top:30px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	font-size: 17px;
  font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #000000;
}




.navline a:link {color: #000000; text-decoration: none; padding-top:10px; padding-bottom:10px; padding-right:10px; padding-left:10px; }
.navline a:visited {color: #000000; text-decoration: none; padding-top:10pxpx; padding-bottom:10px; padding-right:10px; padding-left:10px; }
.navline a:hover {color: #f03c4d; text-decoration: none; padding-top:10px; padding-bottom:10px; padding-right:10px; padding-left:10px;
	background-repeat: no-repeat;
    background-position: top center; }
.navline a:active {color: #000000; text-decoration: none; padding-top:10px; padding-bottom:10px; padding-right:10px; padding-left:10px; } 


.navline ul {
    list-style-type: none;
    margin: 0;
	margin-left: -26px;
} 



.navline ul li {
	position: relative;
	padding-left: 10px;
	padding-top: 10px;
	float: right;
}

.navline ul li:hover > ul {
	position: absolute;
	top: 100%;
	opacity: .96;
}

.navline ul ul {
	position: absolute;
	top: -999999px;
	left: 0;
	opacity: 0;
	text-align: left;

	width: 300px;
	padding: 8px 0;
	margin-top: 10px;

	background: #ffffff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
	text-shadow: 0 3px 6px rgba(0,0,0,.10);

	z-index: 999;
}

.navline ul ul li {
	float: none;
	padding: 0;
	margin: 0;
}

.navline ul ul a {
	display: block;
	width: 100%;
	box-sizing: border-box;

	padding: 7px 18px;
	margin: 0;

	font-size: 16px;
	line-height: 1;

	color: #222222;
	text-decoration: none;
}

.navline ul ul a:link,
.navline ul ul a:visited,
.navline ul ul a:active {
	color: #222222;
	text-decoration: none;
}

.navline ul ul a:hover {
	background: #efefef;
	color: #f03c4d;
	text-decoration: none;
}


.navline ul ul a {
	display: block;
	width: auto;

	padding: 12px 18px;
	margin: 4px 12px;

	font-size: 15px;
	line-height: 1.6;

	color: #222222;
	text-decoration: none;

	box-sizing: border-box;
}

.navline ul ul a:hover {
	background: #efefef;
	color: #f03c4d;
	text-decoration: none;
}





.headerbg {
	background-image: url(images/header-home.jpg);
	background-repeat: no-repeat;
    background-position: center;
	width: 100%;
	height: 750px;
	padding-top:240px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}

.headerbox {
	max-width: 800px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
}



.headertext1 {
	padding-top:50px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 70px;
	line-height: 75px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
	text-shadow: 0 4px 18px rgba(0,0,0,.65);
}

.headersubtext1 {
	max-width: 800px;
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 22px;
	line-height: 25px;
	font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	text-shadow: 0 3px 12px rgba(0,0,0,.60);
}




.shortwhiteline {
	background-color: #ffffff;
	width: 50px;
	height: 3px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	text-shadow: 0 3px 12px rgba(0,0,0,.60);
	margin-bottom:30px;
	
}



.shortredline {
	background-color: #f03c4d;
	width: 50px;
	height: 3px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	text-shadow: 0 3px 12px rgba(0,0,0,.60);
	margin-bottom:30px;
	
}



.red-button {
  border: none;
  color: white;
  text-align: center;
  font-size: 18px;
  margin: 2px 2px;
  opacity: 1
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  font-family: "poppins", sans-serif;
  cursor: pointer;
  margin-top: 22px;
  margin-right: 15px;
	font-weight: 400;
	text-shadow: 0px 0px #000000;
	text-shadow: 0 3px 12px rgba(0,0,0,0.2);
  
}



.red-button a:link {color: #ffffff; text-decoration: none; padding-top:20px; padding-bottom:20px; padding-right:40px; padding-left:40px;border-radius: 0px;border-style: solid; border-width: 2px; border-color: #f03c4d;  background-color: #f03c4d; }
.red-button a:visited {color: #ffffff; text-decoration: none; padding-top:20px; padding-bottom:20px; padding-right:40px; padding-left:40px;border-radius: 0px;border-style: solid; border-width: 2px; border-color: #f03c4d; background-color: #f03c4d;  }
.red-button a:hover {color: #f03c4d; text-decoration: none; padding-top:20px; padding-bottom:20px; padding-right:40px; padding-left:40px;border-radius: 0px;border-style: solid; border-width: 2px; border-color: #f03c4d;-webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease; background-color: #ffffff; }
.red-button a:active {color: #ffffff; text-decoration: none; padding-top:20px; padding-bottom:20px; padding-right:40px; padding-left:40px;border-radius: 0px;border-style: solid; border-width: 2px; border-color: #f03c4d; background-color: #f03c4d;  }








.pagetitle {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 40px;
	line-height: 50px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #000000;
	text-align: left;
	
}



.pagewtitle {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 40px;
	line-height: 50px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
	
}




.whitebg {
	background-color: #ffffff;
	width: 100%;
	height: auto;
	padding-top:50px;
	padding-bottom:50px;
	padding-right:0px;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: left;
	
}



.whiteinsidebg {
	background-color: #ffffff;
	width: 100%;
	height: auto;
	padding-top:50px;
	padding-bottom:50px;
	padding-right:0px;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: left;
	
}






.redbg {
	background-color: #f03c4d;
	width: 100%;
	height: auto;
	padding-top:30px;
	padding-bottom:30px;
	padding-right:0px;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	
}


.section1left-left {
	width: 550px;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:50px;
	padding-left:0px;
	float: left;
	
}

.section1left-right {
	width: 550px;
	padding-top:10px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	float: left;
	
}




.redwpicbg {
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #f03c4d;

	font-size: 18px;
	line-height: 1.5;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
}

/* Scope this so it does not alter .tocenter elsewhere */
.redwpicbg > .tocenter {
	display: grid;
	grid-template-columns: 42% 58%;

	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Left image area */
.redwpicbg .section2left-left {
	float: none;
	width: auto;
	min-height: 520px;
	margin: 0;
	padding: 0;

	background-image: url("images/home-learning.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Right text area */
.redwpicbg .section2left-right {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;

	padding-top: 70px;
	padding-right: clamp(40px, 8vw, 160px);
	padding-bottom: 60px;
	padding-left: clamp(55px, 5vw, 105px);

	box-sizing: border-box;
}

/* Keeps the text from becoming excessively wide */
.redwpicbg .section2left-right > * {
	max-width: 760px;
}

.redwpicbg .section2left-right p {
	margin: 0 0 20px;
}

.redwpicbg .section2left-right p:last-child {
	margin-bottom: 0;
}


/* Stack image over text */
@media screen and (max-width: 900px) {

	.redwpicbg > .tocenter {
		display: block;
	}

	.redwpicbg .section2left-left {
		width: 100%;
		min-height: 0;
		height: 42vw;

		background-position: center center;
		background-size: cover;
	}

	.redwpicbg .section2left-right {
		width: 100%;
		padding: 70px 30px 90px;
	}

	.redwpicbg .section2left-right > * {
		max-width: none;
	}
}


/* Smaller phones */
@media screen and (max-width: 600px) {

	.redwpicbg .section2left-left {
		height: 58vw;
	}

	.redwpicbg .section2left-right {
		padding: 45px 24px 60px;
	}
}




.littletitle {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 24px;
	line-height: 28px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #000000;
	text-align: left;
	
}

.courses-layout {
	display: grid;
	grid-template-columns: 42% 58%;
	align-items: stretch;
	width: 100%;
	overflow-anchor: none;
}

/* IMAGE */

.courses-image {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 50px;
}

.courses-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* GRID */

.courses-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: #ffffff;
}

.course-item {
	padding: 50px 45px;
	border-right: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	box-sizing: border-box;
}

.course-item:nth-child(2n) {
	border-right: none;
}

.course-item:nth-last-child(-n + 2) {
	border-bottom: none;
}

/* COURSE CATEGORY NAVIGATION */

.course-tabs {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #ffffff;
	overflow-anchor: none;
}

.course-tabs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.course-tabs button {
	display: block;
	padding: 22px 38px;

	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;

	color: #000000;
	background: transparent;
	text-decoration: none;

	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;

	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;

	transition:
		color 0.25s ease,
		border-color 0.25s ease;
}

/* Mouse over */

.course-tabs button:hover,
.course-tabs button:focus-visible {
	color: #000000;
	border-bottom-color: #f03c4d;
	outline: none;
}

/* Currently selected category */

.course-tabs button.active {
	color: #f03c4d;
	border-bottom-color: #f03c4d;
}

/* COURSE PANELS */

.course-panel {
	display: none;
	overflow-anchor: none;
}

.course-panel.active {
	display: grid;
	animation: coursePanelIn 0.5s ease both;
}

@keyframes coursePanelIn {

	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* MOBILE */

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

	.courses-layout {
		display: block;
	}

	.courses-image {
		margin-top: 0;
		padding: 0;
	}

	.courses-image img {
		display: block;
		width: 100%;
		height: auto;
	}

	.courses-grid {
		display: block;
	}

	.course-item {
		border-right: none;
		border-bottom: 1px solid #dddddd;
	}

	.course-item:last-child {
		border-bottom: none;
	}

	.course-tabs {
		display: block;
	}

	.course-tabs li {
		width: 100%;
	}

	.course-tabs button {
		width: 100%;
		padding: 16px 24px;
		box-sizing: border-box;
		text-align: left;
		border-bottom: 1px solid #dddddd;
	}

	.course-tabs button:hover,
	.course-tabs button:focus-visible {
		color: #000000;
		border-bottom-color: #f03c4d;
	}

	.course-tabs button.active {
		color: #f03c4d;
		border-bottom-color: #f03c4d;
	}

	.course-panel.active {
		display: block;
	}
}

/* Reduce animation for users who request it */

@media (prefers-reduced-motion: reduce) {

	.course-panel.active {
		animation: none;
	}

	.course-tabs button {
		transition: none;
	}
}





.redbg {
	background-color: #f03c4d;
	width: 100%;
	height: auto;
	padding-top:30px;
	padding-bottom:30px;
	padding-right:0px;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	
}




.quotebg {
	background-image: url(images/quote-background.jpg);
	background-repeat: no-repeat;
    background-position: center;
	width: 100%;
	height: auto;
	padding-top:100px;
	padding-bottom:100px;
	padding-right:0px;
	padding-left:0px;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
}




.quotetext {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 40px;
	line-height: 50px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
	
}

.quoteauthor {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 22px;
	line-height: 28px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
	
}




.testimonial-slider {
	position: relative;
	width: 100%;
	min-height: 455px;
	padding: 75px 65px 50px;
	box-sizing: border-box;

	background-color: #ff1948;
	background-image: url("images/testimonial-bg.jpg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;

	color: #ffffff;
	overflow: hidden;
}

.testimonial-slides {
	position: relative;
	width: 100%;
	max-width: 820px;
	min-height: 275px;
}

.testimonial-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	opacity: 0;
	visibility: hidden;
	transform: translateX(35px);

	transition:
		opacity 0.55s ease,
		transform 0.55s ease,
		visibility 0.55s ease;
}

.testimonial-slide.active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.testimonial-controls {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 28px;
}

.testimonial-arrow {
	position: relative;
	width: 28px;
	height: 42px;
	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;

	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.testimonial-arrow span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;

	border-top: 5px solid #ffffff;
	border-right: 5px solid #ffffff;

	transform-origin: center;
	transition: opacity 0.2s ease;
}

.testimonial-prev span {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.testimonial-next span {
	transform: translate(-65%, -50%) rotate(45deg);
}

.testimonial-arrow:hover span,
.testimonial-arrow:focus-visible span {
	opacity: 0.65;
}

.testimonial-arrow:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 5px;
}

/* MOBILE */

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

	.testimonial-slider {
		min-height: 0;
		padding: 50px 28px 40px;
		background-position: right top;
		background-size: auto 100%;
	}

	.testimonial-slides {
		min-height: 330px;
	}

	.quotetext {
		font-size: clamp(30px, 8vw, 46px);
		line-height: 1.25;
	}

	.quoteauthor {
		margin-top: 24px;
		font-size: 18px;
		line-height: 26px;
	}

	.testimonial-controls {
		margin-top: 24px;
	}
}

/* SMALL PHONES */

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

	.testimonial-slider {
		padding: 40px 22px 35px;
	}

	.testimonial-slides {
		min-height: 390px;
	}

	.quotetext {
		font-size: 31px;
	}

	.testimonial-controls {
		gap: 20px;
	}
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

	.testimonial-slide {
		transition: none;
	}
}




.team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px 50px;
	align-items: start;
}

.team-member img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 20px;
}

.team-position {
	margin: 6px 0 20px;
	font-size: 20px;
}

.team-member p {
	margin: 0;
}

@media (max-width: 768px) {

	.team-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

}



.whitesubtitle {
	padding-top:0px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 28px;
	line-height: 34px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
}



.whitesubsubtitle {
	padding-top:20px;
	padding-bottom:20px;
	padding-right:0px;
	padding-left:0px;
	font-size: 24px;
	line-height: 30px;
	font-family: "poppins", sans-serif;
	font-weight: 600;
	color: #ffffff;
	text-align: left;
}


.contactparent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	width: 100%;
}

.contactleft {
	background-color: #f03c4d;
	padding: 3%;
	font-size: 18px;
	line-height: 22px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	box-sizing: border-box;
}

.contactright {
	background-color: #ffffff;
	padding: 3%;
	font-size: 18px;
	line-height: 22px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: #000000;
	text-align: left;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.contactparent {
		grid-template-columns: 1fr;
	}
}

.contactbg {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: auto;

	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 0;
	padding-left: 0;

	margin-top: 0;
	overflow: hidden;

	/* Remove the background image from this element */
	background: none;
}

.contactbg-pattern {
	position: absolute;

	/*
	The red content begins after the 50px top padding.
	50px + 100px makes the pattern begin 100px below it.
	*/
	top: 150px;

	left: 0;
	right: 0;
	bottom: 0;

	background-image: url("images/subfooterbg.jpg");
	background-position: top center;
	background-repeat: repeat;

	z-index: 0;
	pointer-events: none;
}

.contactbg-content {
	position: relative;
	z-index: 1;
}






.footer-left {
	width: 48%;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:2%;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	float: left;
	
}

.footer-right {
	width: 48%;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:2%;
	padding-left:0px;
	font-size: 18px;
	line-height: 22px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: #ffffff;
	text-align: right;
	float: left;
	
}


.footerbg {
	width: 100%;
	background-color: #212121;
	padding-top:40px;
	padding-bottom:40px;
	padding-right:0px;
	padding-left:0px;
}

.flexcenter {
display:flex;justify-content:center;align-items:center;
}



.alignright {
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:20px;
	float: right;
	
}

.alignleft {
	padding-top:0px;
	padding-bottom:0px;
	padding-right:20px;
	padding-left:0px;
	float: left;
	
}




.tocenter {
	max-width: 1150px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	margin-left: auto;
    margin-right: auto;
}








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

    body {
    margin:0 0 0 0;
	overflow-x:hidden;
    }











.tocenter {
	max-width: 1150px;
	padding-top:0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-left:0px;
	margin-left: auto;
    margin-right: auto;
}