/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/*===============MOBILE AND UP===============*/
/*general css*/
.majorquest-button {
    font-weight: 500;
    padding: 10px 20px;
	font-size: 18px;
    border-radius: 15px 0 15px 0;
}
.button-solid-inverted {
    color: #275D38;
    background-color: #fff;
}
.jumbo header {
	padding: 0 !important;
}
.text-34 {
	font-size: 34px;
}

/*HEADING CSS*/
.majorquest-lines-heading {
	position: relative;
}
.majorquest-lines-heading:before {
	content: "";
    position: absolute;
    background: url(/innovation/major-quest/images/majorquest.svg) no-repeat;
    width: 100%;
    background-size: 300px;
    height: 30px;
    top: -42px;
	left: 0;
}

/*tagline css*/
.majorquest-tagline {
    text-align: center;
}

/*majorquest explanation section*/
.majorquest-explain-heading {
    border-radius: 8px;
	position: relative;
    padding: 40px;
    background-color: #429838;
}
.majorquest-explain-heading:before {
	content: "";
    position: absolute;
    background: url(/innovation/major-quest/images/lined-square.svg) no-repeat;
    background-size: 125px;
    width: 125px;
    height: 125px;
    right: -10px;
    top: -89px;
}
.majorquest-explain-heading h2 {
    margin: 0;
    text-align: center;
}
.majorquest-explain-info {
    background-color: #fff;
	position: relative;
    padding: 30px;
    border-radius: 8px;
}
.majorquest-explain-info:after {
	content: "";
    position: absolute;
    background: url(/innovation/major-quest/images/lined-circle.svg) no-repeat;
    background-size: 125px;
    width: 125px;
    height: 125px;
    left: -10px;
    bottom: -100px;
}

/*stackable cards css*/
h3.bold.lines-heading {
    background-color: #fff;
    padding: 10px;
}
.new-stackable .position {
    font-family: 'Rajdhani', sans-serif;
	text-align: center;
    font-size: 24px;
    margin: 0;
    font-weight: bold;
}
.new-stackable .stackable-card {
    padding: 30px;
    height: 200px;
    width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.new-stackable .stackable-card.start {
    background-color: #fff;
	color: #000;
}

.new-stackable .stackable-card.middle {
	color: #000;
    background-color: #fff;
}
.new-stackable .stackable-card.finish {
    background-color: #fff;
	color: #000;
}
.new-stackable .stackable-card.finish h3, .new-stackable .stackable-card.middle h3 {
	margin-top: 30px;
}

.new-stackable .stackable-card:before {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #fff transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    top: 9px;
    width: 350px;
    z-index: 0;
}
.new-stackable .stackable-card.start:before {
	border: none;
}
.new-stackable .stackable-card:after {
    content: "";
    position: absolute;
    border: 100px solid;
    border-color: #fff transparent transparent transparent;
    border-width: 50px 175px 0 175px;
    width: 350px;
    bottom: -39px;
    z-index: 3;
}
.new-stackable .stackable-card.start:after {
	border-color: #fff transparent transparent transparent;
}
.new-stackable .stackable-card.middle:after {
	border-color: #fff transparent transparent transparent;
}
.new-stackable .stackable-card.finish:after {
	border: none;
}
/*NEW STACKABLE*/
h3.bold.lines-heading:last-child {
        margin-top: 30px;
    width: 50%;
    text-align: right;
    float: right;
}

h3.bold.lines-heading:first-child {
    margin-bottom: 30px;
	width: 50%;
}
.new-stackable .position {
	font-size: 23px;
}
.new-stackable .stackable-card {
	background-color: #fff !important;
	color: #fff;
	text-align: center;
	font-weight: bold;
}
.new-stackable .stackable-card:before {
	    border-color: #275d38 transparent transparent transparent;
}
.new-stackable .stackable-card:after {
	border-color: #fff transparent transparent transparent;
}
.new-stackable .middle-1.stackable-card, .middle-2.stackable-card {
    padding-top: 80px;
	height: 220px;
	color: #000;
}
.new-stackable .finish.stackable-card {
    height: 250px;
}

/*LEVEL UP CARDS*/
.levelup-card {
    background-color: #fff;
    color: #000;
    display: flex;
	flex-direction: column;
	border-radius: 8px 8px 0 0;
    align-items: center;
}
.levelup-heading {
    background-color: #4ba23f;
    height: 100%;
	border-radius: 0px 0px 8px 8px;
    width: 100%;
    padding: 15px;
}
.levelup-heading h3 {
    color: #fff;
    margin: 0;
    text-align: center;
}
.levelup-content {
    padding: 20px;
}

/*POINT CARDS*/
.point-card {
    background-color: #fff;
    color: #000;
    display: flex;
	flex-direction: column;
	border-radius: 8px 8px 0 0;
    align-items: center;
}
.point-heading {
    background-color: #4ba23f;
    height: 100%;
	border-radius: 8px 8px 0px 0px;
    width: 100%;
    padding: 15px;
}
.point-heading h3 {
    color: #fff;
    margin: 0;
    text-align: center;
}
.point-content {
    padding: 20px;
}

/*EVENT CALENDAR*/
p.calendar div {
    margin: 0 auto;
}


/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	/*general css*/
	p.majorquest-logo {
		width: 50%;
        margin-bottom: 0 !important;
        margin: 0 auto;
	}
	
	/*tagline css*/
	.majorquest-tagline, .quest-acceptance .majorquest-lines-heading  {
		width: 60%;
		margin: 0 auto;
	}
	
	/*explanation section css*/
	.majorquest-explain-heading{
		width: 90%;
		margin: 0 auto;
		margin-right: 0;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.majorquest-explain-heading:before {
		right: unset;
		left: -30px;
		background-size: 150px;
		width: 150px;
		height: 150px;
	}
	.majorquest-explain-info {
		width: 90%;
		margin: 0 auto;
		margin-left: 0;
	}
	.majorquest-explain-info:after {
		left: unset;
		right: -30px;
	}
	
	
	/*NEW STACKABLE*/
	h3.bold.lines-heading:last-child, h3.bold.lines-heading:first-child {
		width: 25%;
	}
	.new-stackable .stackable-card.middle-1:after, .new-stackable .stackable-card.middle-2:before {
		content: unset;
	}
	.new-stackable .stackable-card {
		    height: 200px !important;
    padding: 20px 50px !important;
		width: 300px;
	}
	.new-stackable .stackable-card:after {
		border-color: transparent #fff transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        right: -40px;
        bottom: 10px;
        width: unset;
        z-index: 5;
	}
	.new-stackable .stackable-card.start:after {
		
		border-color: transparent #fff transparent transparent;
	}
	.new-stackable .stackable-card:before {
		border-color: transparent #275d38 transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        left: 9px;
        bottom: 10px;
        z-index: 1;
		width: unset;
        right: unset;
        top: unset;
	}
	.new-stackable .stackable-card:before {
		border-color: transparent #275d38 transparent transparent;
	}
	.new-stackable .stackable-card.finish:before {
		border-color: transparent #275d38 transparent transparent;
        border-width: 100px 50px 100px 0;
        transform: rotate(180deg);
        left: 9px;
        bottom: 10px;
        z-index: 1;
		width: unset;
        right: unset;
        top: unset;
	}
	.new-stackable .stackable-card.start, .new-stackable .stackable-card.middle-2 {
		margin-right: 0;
	}
	.new-stackable .stackable-card.finish, .new-stackable .stackable-card.middle-1 {
    margin-left: 0;
}
	.new-stackable .stackable-card.finish h3, .new-stackable .stackable-card.middle h3 {
		margin-top: 0;
	}
	
	/*LEVEL UP CARDS*/
	.levelup-card {
		flex-direction: row;
		border-radius: 8px;
		height: 150px;
		background-color: #4ba23f;
	}
	.levelup-heading {
		flex: 1;
		display: flex;
		border-radius: 8px;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	.levelup-content {
		display: flex;
		height: 100%;
		flex-direction: column;
		flex: 9;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}
	/*POINT CARDS*/
	.point-card {
    	border-radius: 0 8px 8px 0;
		flex-direction: row-reverse;
	}
	.point-heading {
		flex: 2;
        display: flex;
        border-radius: 0 8px 8px 0;
        text-align: center;
        align-items: center;
        padding: 30px;
        justify-content: center;
	}
	.point-content {
		height: 100%;
        flex: 8;
		padding; 0;
        text-align: center;
        background-color: #fff;
	}
	
}/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	/*stackable cards css*/
	h3.bold.lines-heading {
		width: 50%;
	}
	 .new-stackable .transform-grid .col-md-4 {
        width: 50%;
    }
	
	/*LEVEL UP CARDS*/
	.levelup-content {
		align-items: start;
	}
	/*POINT CARDS*/
	.point-content {
		align-items: start;
	}
	
	/*stackable cards css*/
	.new-stackable .col-md-3 {
        width: 50%;
    }
	
}/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	
	/*explanation section css*/
	.majorquest-explain-heading, .majorquest-explain-info {
		width: 80%;
	}
	
	/*stackable cards css*/
	 .new-stackable .transform-grid .col-md-4 {
        width: 33.3%;
    }
	.new-stackable .stackable-card {
		width: 100%;
	}
	.new-stackable .stackable-card {
        padding: 20px 70px;
    }
	.new-stackable .stackable-card:after, .new-stackable .stackable-card:before {
		border-width: 100px 50px 100px 0;
	}
	.new-stackable .stackable-card.middle-1:after {
		content: "";
		border-color: transparent #fff transparent transparent;
	}
	.new-stackable .stackable-card.middle-2:before {
		content: "";
		border-color: transparent #275d38 transparent transparent;
	}
	.new-stackable .stackable-card.finish:before {
		content: "";
	}
	.new-stackable .stackable-card.middle-2, .new-stackable .stackable-card.finish {
    padding: 20px 50px !important;
}
	.new-stackable .stackable-card.start, .new-stackable .stackable-card.middle-1 {
    padding: 20px 70px !important;
}
	
	/*stackable cards css*/
	.new-stackable .col-md-3 {
        width: 25%;
    }
	
	
}/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/