@font-face {
    font-family: 'poppins_regular';
    src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppins_light';
    src: url('../fonts/poppins-light-webfont.woff2') format('woff2'),
         url('../fonts/poppins-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppins_semiBold';
    src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppins_italic';
    src: url('../fonts/poppins-italic-webfont.woff2') format('woff2'),
         url('../fonts/poppins-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppins_semiBoldItalic';
    src: url('../fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/poppins-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family: 'poppins_regular';
}

.container{
	margin-left:auto;
	margin-right:auto;
}

header{
	display: none;
	position: fixed;
	z-index: 5;
	width: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,.75);
}

nav a{
	color:rgba(58,12,163,1);
	text-decoration: none;
}

.identity{
	position: absolute;
	display: block;
	background-size: cover;
	background-image: url("../images/identityMark.png");
}

.logoAnimation{
	animation: logoAnimation 1s ease-in-out;
}

@keyframes logoAnimation{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(180deg);
	}
}

.initialFade{
	display: none;
}

.secondParagraph span{
	color:rgba(58,12,163,1);
}

.image-container {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    display: none;
}

.scrolling-image {
	width: 200%; /* Adjust this percentage as needed */
    height: auto;
    display: inline-block;
}

.scrollDirection{
	--animation-direction: reverse;
}

@keyframes scroll {
		to {
			transform: translate(-50%);
		}
}

#about{
	display: none;
}

#quiz{
	display: none;
}

#pledge{
	display: none;
}

#social{
	display: none;
	position: relative;
}

footer{
	display: none;
}

.semiBold{
	font-family: 'poppins_semiBold';
}

.button{
	display: block;
	cursor: pointer;
	background-color: rgba(58,12,163,1);
	color: rgba(255,255,255,1);
	text-decoration: none;
	border-radius: 50vw;
	text-align: center;
	box-shadow: 0px 3px 5px rgba(0,0,0, 0.45);

	transition: box-shadow 500ms ease-in;
		
}

#about h1{
	color:rgba(58,12,163,1);
}

#pledge h1{
	color:rgba(58,12,163,1);
}

#quiz h1{
	color:rgba(58,12,163,1);
}

/*////////collapsable///////////*/

.collapsableHolder{
	background-color: rgba(58,12,163,1);
	color: white;
	border-radius:4vw;
}

.content{
	display: none;
}

.collapsible{
	cursor: pointer;
}

.collapsible h3{
	font-family: "poppins_semiBoldItalic";
}

.two .startingHeight {
	box-sizing: border-box;
	border-top: 2px white solid;
}

.three .startingHeight{
	box-sizing: border-box;
	border-top: 2px white solid;
}

/*////////QUIZ STYLES///////////*/

.quizTitle{
	color:rgba(58,12,163,1);
}

.quizFlexParent{
	display: flex;
	margin-left: auto;
	margin-right: auto;
}

.answerHolder{
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	transform: scale(1);
	transition: transform 500ms ease-out;
}

.photo{
	margin-left: auto;
	margin-right: auto;
	background-size: 100%;
}

.answer{
	display: block;
	text-align: center;	
	font-family: 'poppins_semiBold';

	color:rgba(58,12,163,1);
	text-decoration: none;
}

.trueFalse{
	margin-left: auto;
	margin-right: auto;

	cursor: pointer;
	background-color: rgba(58,12,163,1);
	color: rgba(255,255,255,1);
	text-decoration: none;
	border-radius: 50vw;
	text-align: center;
	box-shadow: 0px 3px 5px rgba(0,0,0, 0.45);

	transition: box-shadow 500ms ease-in;
}

.question1Screen{
	display: none;
}

.question2Screen{
	display: none;
}

.question3Screen{
	display: none;
}

.question4Screen{
	display: none;
}

.correctScreenOne{
	display: none;
}

.correctScreenTwo{
	display: none;
}

.correctScreenThree{
	display: none;
}

.correctScreenFour{
	display: none;
}

.noAgeBiasScreen{

	display: none;
}

.finalQuiz{
	display: none;
}

.doctor{
	 background-image:url("../images/desktop/XL_doctor.png");
}

.sue{
	 background-image:url("../images/desktop/XL_sue.png");
}

.coworker{
	 background-image:url("../images/desktop/XL_coworker.png");
}

.mark{
	 background-image:url("../images/desktop/XL_mark.png");
}

.troy{
	 background-image:url("../images/desktop/XL_troy.png");
}

.dancers{
	 background-image:url("../images/desktop/XL_dancer.png");
}

.earth{
	background-image:url("../images/Earth.png");
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.25);

}


/*////////PLEDGE STYLES///////////*/

.pledgeCopy{
	font-family: 'poppins_italic';
}

.submittedPledgeScreen{
	display: none;
}

.badge{
	background-size: 100%;
	margin-left:auto;
	margin-right:auto;
	animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scale-in-center{
	animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    		opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    		opacity: 1;
  }
}

/*SOCIAL STYLES*/

.submit{
	font-family: 'poppins_regular';
	text-align: center;
}

.photoBubble{
	position: absolute;
	border-radius: 50vw 50vw 0px 50vw;

	font-family: 'poppins_semiBoldItalic';
	background-color: rgba(58,12,163,1);
	color: rgba(255,255, 255, 1.0);
	text-align: center;
}

.hashtagHolder{
	color: rgba(58,12,163,1);
}

footer{
	background-color: rgba(58,16,163, 1);
}

footer a{
	color: rgba(255,255,255,1);
	text-decoration: none;
}



/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}

	header{
		height: 40px;
	}

	.identity{
		top:2.5px;
		width:35px;
		height: 35px;
	}

	.navButton{
		display: block;
		width: 30px;
		height: 30px;
		background-image:url("../images/mobile/menu.png");
		background-size: cover;
		position: absolute;
		right: 3vw;
		top: 5px;
	}

	nav{
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 40px;
		left: 0px;
		padding-top: 55px;
		background-color: rgba(255,255,255, 1);
		display: none;
	}

	nav a{
		display: block;
		font-size: 24px;
		height: 40px;
		line-height: 40px;
		padding-left: 7.142857142857142%;
		text-align: left;
		margin-bottom: 20px;
	}

	.deskHero{
		display: none;
	}

	.mobileHero{
		color: rgba(58,12,163,1);
		margin-bottom: 21.428571428571429%;
		padding-top:10vw;
		/*		/////60px between sections//////*/

	}

	.marginHeroSection{
/*		/////40px//////*/
		margin-bottom:10.285714%;
	}

	.mobileHero h1{
		/*		/////font-size: 24px//////*/
		font-size: 7vw;
		font-family: 'poppins_regular';
	}

	.mobileHero .courage{
		/*		/////font-size: 40px//////*/
		font-size: 14vw;

		letter-spacing: -0.25vw;
		margin-top: 0.571429%;
		margin-bottom: 0.571429%;
		font-family: 'poppins_light' ;
	}

	.mobileHero span{
		font-family: 'poppins_semiBold';
	}

	.titleMarginBottom{
		margin-bottom: 3.08641975308642%;
	}

	.button{
		width: 46.428571428571429%;
		line-height: 9vw;
		font-size: 3.5vw;
		/*		/////font-size: 12px//////*/
	}


	#about{
		margin-bottom: 21.428571428571429%;
/*		/////60px between sections//////*/
	}

	#about .button{
		margin-bottom:14.285714285714286%;

	}

	.scrolling-image {
		animation: scroll 20s var(--animation-direction, forwards) linear infinite;
	}

	.mobileHero .top-image{
		margin-bottom:10.285714%;
	}

	#about h1{
		/*		/////font-size: 24px//////*/
		font-size: 7vw;
		margin-bottom: 3.571428571428571%;
		/*		/////margin bottom: 10px//////*/
	}

	.missionParagraph{
		width:73.214285714285714%;
		line-height: 5.25vw;
		font-size:3.5vw;
		margin-bottom: 3.571428571428571%;
		/*		/////font-size: 13ish??//////*/
		/*		/////margin-bottom: 10px//////*/
	}

	.pledgeButton{
		margin-bottom: 3.571428571428571%;
	}

	#about .secondParagraph{
		margin-bottom: 7.142857142857142%;
	}

/*	//////////Collapsible MOBILE/////////*/

	.collapsableHolder{
		width:100%;
	}

	.collapsible{
		width:85.714285714285714%;
		margin-left: auto;
		margin-right: auto;
	}

	.collapsible h3{
		font-size: 3.75vw;
	}

	.one .startingHeight{
		padding-top: 2%;
	}

	.startingHeight{
		line-height:12vw;
	}

	.content{
		padding-bottom: 8.166667%;
		font-size: 3.75vw;
		line-height: 4.75vw;
	}


/*////////QUIZ MOBILE/////////////*/

	#quiz{
		margin-bottom: 21.428571428571429%;
	}

	#quiz h1{
		font-size: 7vw;
		margin-bottom: 3.571428571428571%;
	}

	.start{
		width:28.625%;
	}

	.quizTitle{
		font-size: 7vw;
		margin-bottom: 9.571429%;
	}

	.scenario{
		width:73.214285714285714%;
		margin-bottom: 9.571429%;
		line-height: 4.75vw;
		font-size:3.25vw;
	}

	.questionHolderFour .scenario{
		width: 100%;
	}

	.answerHolder{
		width:46.428571428571429%;
		margin-right: 7.142857142857142%;
		margin-bottom: 9.571429%;	
	}

	.answerHolder:nth-of-type(2n){
		margin-right: 0;
	}

	.photo{
		width:79.230769230769231%;
		padding-top: 79.230769230769231%;
		margin-bottom: 4.571429%;
	}

	.centerImage{
		width:58.928571428571429%;
		padding-top:58.928571428571429%;
		margin-bottom: 9.571429%;	
	}

	.answer{
		font-size: 3.25vw;
	}

	.trueFalse{
		width: 65%;
		line-height: 8vw;
	}

	.selected{
		transform: scale(1.05);
	}

	.noAgeBiasScreen p{
		width:73.214285714285714%;
		line-height: 4.75vw;
		font-size:3.25vw;
		margin-bottom: 9.571429%;
	}

	.correctScreenOne p{
		width:73.214285714285714%;
		line-height: 4.75vw;
		font-size:3.25vw;
		margin-bottom: 9.571429%;
	}

	.correctScreenTwo p{
		width:73.214285714285714%;
		line-height: 4.75vw;
		font-size:3.25vw;
		margin-bottom: 9.571429%;	
	}

	.correctScreenThree p{
		width:73.214285714285714%;
		line-height: 4.75vw;
		font-size:3.25vw;
		margin-bottom: 9.571429%;	
	}

	.correctScreenFour p{
		width:73.214285714285714%;
		line-height: 4.75vw;
		font-size:3.25vw;
		margin-bottom: 9.571429%;	
	}

/*////////PLEDGE MOBILE/////////////*/
	
	#pledge{
		margin-bottom: 21.428571428571429%;
/*		/////60px between sections//////*/
	}
	.flexParentFT{
		display: none;
	}

	.mobilePledge{
		display: block;
	}

	#pledge h1{
		/*		/////font-size: 24px//////*/
		font-size: 7vw;
		margin-bottom: 1.785714285714286%;
		/*		/////margin bottom: 5x//////*/
	}

	.mobilePledge h3{
		font-size: 4vw;
		color:rgba(58,12,163,1);
	}

	.pledgeCopy{
		padding-top: 7.142857142857142%;
		padding-bottom: 6.642857%;

		width:73.214285714285714%;
		line-height: 4.85vw;
		font-size:3.5vw;
		margin-bottom: 3.571428571428571%;
	}

	input[type=text] {
		color: rgba(0,0,0,1);
	    display: block;
	    width:73.214285714285714%;
	    border: none;
	    border-bottom: 4px #3A0CA3 solid;
	    box-sizing: border-box;

	    font-family: 'poppins_regular';
	    font-size:3vw;

	    padding-left:10px;
	    margin-bottom: 3.571428571428571%;
	}

	.submit{
		font-size: 3.5vw;
		line-height: 11.25vw;
	}

	.submittedPledgeScreen p{
		font-size: 2.75vw;
		text-align: center;
	}

	.badge{
		background-image: url(../images/mobile/Mobile.png);
		width:26.785714285714286%;
		padding-top: 26.785714285714286%;
		margin-bottom: 7.142857142857142%;

	}


/*	SOCIAL MOBILE*/

	.socialImage{
		width:100%;
		padding-top:70%;
		background-image:url(../images/mobile/MobileFooter.png);
		background-size: 100%;
	}

	#social .photoBubble{
		position: absolute;
		border-radius:50vw 50vw 50vw 0vw;
		width:45.571429%;
	
		top:0vw;
		right:0vw;
		line-height: 12vw;
		font-size: 3vw;
	}

	.socialMediaHolder{
		background-color: blue;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.hashtagHolder{
		position: absolute;
		bottom:5vw;
		right:2vw;
		font-size: 2vw;
		line-height: 3.75vw;
	}

	.hashtag{
		font-size: 4.25vw;
		font-family: 'poppins_semiBold';

	}

	footer{
		height: 40px;
		line-height: 40px;
	}

}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container{
		width:84.375%; /* 648 pixels at a 768 pixel screen width (iPads) */
	}

	.flexParent{
		display: flex;
	}

	header{
		height: 50px;
	}

	.identity{
		top:5px;
		width:40px;
		height: 40px;
	}

	.navButton{
		display: none;
	}

	.mobileHero{
		display: none;
	}

	nav{
		height: 100%;
		margin-left: auto;
		display: flex;
	}

	nav a{
		line-height: 50px;
		margin-left: 3vw;
		font-size: 14px;
	}

	.deskHero{
		padding-top:15vw;
		color:rgba(58,12,163,1);
		margin-bottom: 11.814815%;
		/*		margin-bottom: 96px;*/
	}

	.deskHero h1{
		font-size:3.75vw;
/*		font-size:28px;*/
	}

	.deskHero .courage{
		font-size:9.75vw;
		letter-spacing: -0.25vw;
/*		//// font-size: 87px;/////*/
	}

	.deskHero span{
		font-family: 'poppins_semiBold';
	}

	.scrolling-image {
		animation: scroll 38s var(--animation-direction, forwards) linear infinite;
	}

	.titleMarginBottom{
		margin-bottom: 3.08641975308642%;
	}

	.button{
		width: 22.222222222222222%;
		line-height: 5.25vw;
		font-size: 2vw;
		margin-bottom:11.814815%;
		/*		/////font-size: 12px//////*/
	}

	.button:hover{
		transition: box-shadow 500ms ease-out;
		box-shadow: 5px 5px 0px rgba(76,201,240,1);
	}

	.pledgeButton{
		width: 28.222222%;
	}


	#about h1{
		font-size: 4.75vw;
		margin-bottom: 1.851851851851852%;
		/*		/////margin bottom: 12px//////*/
	}

	.missionParagraph{
		width:65.432098765432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 1.851851851851852%;
		/*		/////font-size: 16ish??//////*/
		/*		/////margin-bottom: 12px//////*/
	}

	#about .secondParagraph{
		margin-bottom: 7.142857142857142%;
	}


/*/////////////COLLAPSIBLE TABLET////////////////*/

	.collapsableHolder{
		width:65.432098765432099%;
		margin-bottom: 11.814815%;
/*		margin-bottom: 96px;*/
	}

	.collapsible{
		width:80.90566%;
		margin-left: auto;
		margin-right: auto;

	}

	.collapsible h3{
		font-size: 2.25vw;
	}

	.startingHeight{
		line-height: 9vw;
	}

	.content{
		padding-bottom: 8.166667%;
		font-size: 2vw;
		line-height: 2.75vw;
	}

	.three .content{
		padding-bottom: 10.416666666666667%;
	}

	/*////////QUIZ TABLET/////////////*/

	#quiz{
		margin-bottom: 11.814815%;
	}

	#quiz h1{
		font-size: 4.75vw;
		margin-bottom: 1.851851851851852%;
	}

	.quizFlexParent{
		width: 80.493827%;
	}

	.start{
		width:18.75%;
	}

	.quizTitle{
		font-size: 4.75vw;
		margin-bottom: 1.851851851851852%;
	}

	.introQuiz .missionParagraph{
		margin-bottom: 7.142857142857142%;
	}

	.scenario{
		width:64.432099%;
		margin-bottom: 9.571429%;
		line-height: 3.25vw;
		font-size:2.25vw;
	}

	.answerHolder{
		width:38.438776%;
		margin-left: 0%;
		margin-bottom: 14%;
	}

	.answerHolder:nth-of-type(2n){
		margin-right: 0;
	}

	.photo{
		width:100%;
		padding-top: 100%;
		
		margin-bottom: 10%;

	}

	.centerImage{
		width:42.857142857142857%;
		padding-top:42.857142857142857%;
		margin-bottom: 5.851851851851852%;
		margin-left: auto;
		margin-right: auto;
	}

	.trueFalse{
		width: 94%;
    	line-height: 5vw;
	}

	.answer{
		font-size: 2.25vw;
	}

	.selected{
		transform: scale(1.05);
	}

	.answerHolder:hover{
		transform: scale(1.05);
		transition: transform 500ms ease-out;
	}

	.noAgeBiasScreen p{
		width:65.432098765432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 5.851851851851852%;
	}

	.correctScreenOne p{
		width:62.432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 5.851851851851852%;
	}

	.correctScreenTwo p{
		width:65.432098765432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 5.851851851851852%;
	}

	.correctScreenThree p{
		width:61.432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 5.851851851851852%;
	}

	.correctScreenFour p{
		width:65.432098765432099%;
		line-height: 3.25vw;
		font-size:2.25vw;
		margin-bottom: 5.851851851851852%;
	}


/*	///////////PLEDGE TABLET (change the margins to fit this grid)//////////////*/

	#pledge h1{
		/*		font-size:40px;*/
		font-size: 4.75vw;
		margin-bottom: 1.851851851851852%;
		/*		/////margin bottom: 12px//////*/
	}

	.mobilePledge{
		display: none;
	}

	.flexParentFT{
		display: flex;
	}

	.left{
		width:49.722222%;
		margin-right: 10.311111%;
	}

	.left h2{
		margin-bottom: 3.164556962025316%;
	}

	.left h3{
		color: rgba(58,12,163,1);
		font-size: 2.75vw;
		margin-bottom: 11.392405063291139%;
	}

	.right{
		width:39.722222222222222%;
		
	}

	input[type=text] {
		color: rgba(0,0,0,1);
	    display: block;
	    width: 93%;
	    border: none;
	    border-bottom: 4px #3A0CA3 solid;
	    box-sizing: border-box;
		font-family: 'poppins_regular';
	    font-size: 2vw;

	    padding-left:10px;
	    margin-bottom: 6.329113924050633%;
	}

	.submit{
		width: 59.222222%;
		line-height: 6vw;
	}

	.pledgeCopy{
		font-size: 2vw;
		line-height: 2.9vw;
		padding-bottom: 28.082278%;
	}

	.badge{
		background-image: url(../images/tablet/Tablet.png);
		width:26.785714285714286%;
		padding-top: 26.785714285714286%;
		margin-bottom: 7.142857142857142%;
	}

	.submittedPledgeScreen p{
		text-align: center;
		font-size: 1.75vw;
	}

/*	SOCIAL TABLET*/

	.socialImage{
		width:55.555555555555556%;
		padding-top:40.75%;
		background-image:url(../images/tablet/tabletFooter.png);
		background-size: 100%;
		position: relative;
		top:0vw;
		left:15.432098765432099%;
	}

	#social .photoBubble{
		position: absolute;
		border-radius:50vw 50vw 50vw 0vw;
		width:29.166666666666667%;
	
		top:0vw;
		right:19.432099%;
		line-height: 9vw;
		font-size: 2.25vw;
	}

	.socialMediaHolder{
		background-color: blue;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}


	.hashtagHolder{
		position: absolute;
		bottom:1.25vw;
		right:18.432099%;
		font-size: 1.5vw;
		line-height: 3vw;
	}

	.hashtag{
		font-size: 3.25vw;
		font-family: 'poppins_semiBold';

	}

	footer{
		height: 50px;
		line-height: 50px;
	}
	

}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px) and (max-width: 1699px){
	.container{
		/*width:922.5px;*/
		width:90%;
	}

	.flexParent{
		display: flex;
	}

	header{
		height: 60px;
	}

	.identity{
		top:10px;
		width:40px;
		height: 40px;
	}

	.navButton{
		display: none;
	}

	.mobileHero{
		display: none;
	}

	nav{
		height: 100%;
		margin-left: auto;
		display: flex;
	}

	nav a{
		line-height: 60px;
		margin-left: 2.5vw;
	}

	.deskHero{
		padding-top:11vw;
		color:rgba(58,12,163,1);
		margin-bottom: 9.677419354838709%;
/*				margin-bottom: 90px;*/
	}

	.top-image{
		margin-bottom: -2%;
	}

	.scrolling-image {
		animation: scroll 40s var(--animation-direction, forwards) linear infinite;
	}

	.deskHero h1{
		font-size:3.35vw;
/*		font-size: 36px;*/
	}

	.deskHero .courage{
		font-size:8.5vw;
		letter-spacing: -0.25vw;
/*		font-size: 95px;*/
	}

	.deskHero span{
		font-family: 'poppins_semiBold';
	}


	.titleMarginBottom{
		margin-bottom: 3.08641975308642%;
	}

	.button{
		width: 17.204301075268817%;
		line-height: 4.25vw;
/*		font-size: 2vw;*/
		margin-bottom: 9.677419354838709%;

/*		font-size: 16px;*/
		font-size: 1.5vw;
	}

	.button:hover{
		transition: box-shadow 500ms ease-out;
		box-shadow: 5px 5px 0px rgba(76,201,240,1);
	}

	.deskHero .button{
		font-size: 1.35vw;
		margin-bottom: 5.677419354838709%;
	}

	.pledgeButton{
		width: 20.204301%;
	}


	#about h1{
		/*		font-size:40px;*/
		font-size: 3.5vw;
		margin-bottom: 1.612903225806452%;
		/*		/////margin bottom: 15px//////*/
	}

	.missionParagraph{
		width:48.387096774193548%;
		line-height: 2.25vw;
		font-size:1.65vw;
		margin-bottom: 1.851851851851852%;
		/*		/////font-size: 16ish??//////*/
		/*		/////margin-bottom: 12px//////*/
	}

	#about .secondParagraph{
		margin-bottom: 4.838709677419355%;
/*		margin-bottom: 45px;*/
	}

	.collapsableHolder{
		width:48.387096774193548%;
		margin-bottom: 11.814815%;
	}

	.collapsible{
		width:81.132075471698113%;
		margin-left: auto;
		margin-right: auto;
	}

	.collapsible h3{
		font-size: 1.5vw;
	}

	.startingHeight{
		line-height: 7.25vw
	}


	.content{
		padding-bottom: 8.166667%;
		font-size: 1.5vw;
		line-height: 2vw;
	}

	.three .content{
		padding-bottom: 10.416666666666667%;
	}

/*	///////QUIZ DESKTOP/////////*/

	#quiz{
		margin-bottom: 11.814815%
	}

	#quiz h1{
		font-size: 3.5vw;
		margin-bottom: 1.612903225806452%;
	}

	.quizFlexParent{
		
		width: 60.493827160493827%;
	}

	.start{
		width:18.75%;
	}

	.quizTitle{
		font-size: 3.5vw;
		margin-bottom: 1.612903225806452%;
	}

	.introQuiz .missionParagraph{
		margin-bottom: 4.838709677419355%;
	}

	.scenario{
		width: 49.387097%;
    	line-height: 2.25vw;
    	font-size: 1.65vw;
    	margin-bottom: 4.838709677419355%;
	}

	.answerHolder{
		width:39.438776%;
		margin-left: 0%;
		margin-bottom: 4.838709677419355%;
	}

	.answerHolder:nth-of-type(2n){
		margin-right: 0;
	}

	.photo{
		width:100%;
		padding-top: 100%;
		
		margin-bottom: 13%;

	}

	.centerImage{
		width:35.806452%;
		padding-top:35.806452%;
		margin-bottom: 4.838709677419355%;
		margin-left: auto;
		margin-right: auto;
	}

	.trueFalse{
		width: 77%;
    	line-height: 4.5vw;
	}

	.answer{
		font-size: 2.25vw;
	}


	.selected{
		transform: scale(1.05);
	}

	.answerHolder:hover{
		transform: scale(1.05);
		transition: transform 500ms ease-out;
	}

	.noAgeBiasScreen p{
		width:48.387096774193548%;
		line-height: 2.25vw;
    	font-size: 1.65vw;
		margin-bottom: 4.838709677419355%;
	}

	.correctScreenOne p{
		width:48.387096774193548%;
		line-height: 2.25vw;
    	font-size: 1.65vw;
		margin-bottom: 4.838709677419355%;
	}

	.correctScreenTwo p{
		width:48.387096774193548%;
		line-height: 2.25vw;
    	font-size: 1.65vw;
		margin-bottom: 4.838709677419355%;
	}

	.correctScreenThree p{
		width:49.387097%;
		line-height: 2.25vw;
    	font-size: 1.65vw;
		margin-bottom: 4.838709677419355%;
	}

	.correctScreenFour p{
		width:48.387096774193548%;
		line-height: 2.25vw;
    	font-size: 1.65vw;
		margin-bottom: 4.838709677419355%;
	}


/*	///////PLEDGE DESKTOP (change the margins to fit this grid)/////////*/


	#pledge h1{
		/*		font-size:40px;*/
		font-size: 3.5vw;
		margin-bottom: 1.612903225806452%;
		/*		/////margin bottom: 15px//////*/
	}

	.mobilePledge{
		display: none;
	}

	.flexParentFT{
		display: flex;
	}

	.left{
		width:48.466257668711656%;
		margin-right: 8.602150537634409%;
	}

	.left h3{
		font-size: 2vw;
		color:rgba(58,12,163,1);
		margin-bottom: 7.392405%;
	}

	.right{
		width:44.854806%;
	}

	.right p{
		font-size: 1.75vw;
		font-family: 'poppins_italic';
	}

	form{
		padding-top:3%;
	}

	input[type=text] {
		color: rgba(0,0,0,1);
	    display: block;
	    width: 64.556962025316456%;
	    border: none;
	    border-bottom: 4px #3A0CA3 solid;
	    box-sizing: border-box;
	    font-family: poppins_regular;
	    font-size: 1.25vw;

	    padding-left:10px;
	    margin-bottom: 6.329113924050633%;
	}

	.submit{
		font-size: 1.25vw;

		padding-top: 5%;
		padding-bottom: 5%;
		width:48.556962%;

		line-height: 16.339869281045752%;
	}

	.pledgeCopy{
		line-height: 2.65vw;
		padding-bottom: 26.082278481012658%;
	}

	.badge{
		background-image: url(../images/desktop/Desktop.png);
		width:26.785714285714286%;
		padding-top: 26.785714285714286%;
		margin-bottom: 7.142857142857142%;
	}

	.submittedPledgeScreen p{
		text-align: center;
		font-size: 1.75vw;
		line-height: 2vw;
	}

	/*	////////////SOCIAL DESKTOP ///////////*/

	.socialImage{
		width:74.193548387096774%;
		padding-top:47%;
		background-image:url(../images/desktop/smallDeskFooter.png);
		background-size: 100%;
		position: relative;
		top:0vw;
		left:15.432098765432099%;
	}

	#social .photoBubble{
		position: absolute;
		border-radius:50vw 50vw 50vw 0vw;
		width:29.166667%;
	
		top:0vw;
		right:15.432098765432099%;
		line-height: 7vw;
		font-size: 2vw;
	}

	.socialMediaHolder{
		background-color: blue;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}


	.hashtagHolder{
		position: absolute;
		bottom:1vw;
		right:18.432099%;
		font-size: 1.2vw;
		line-height: 2.5vw;
	}

	.hashtag{
		font-size: 2.65vw;
		font-family: 'poppins_semiBold';

	}

	footer{
		height: 50px;
		line-height: 50px;
	}

}

	/* XL STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1700px){

	.container{
		width:70%;
/*		width: 1190px;*/
/*		background-color: purple;*/
	}

	.flexParent{
		display: flex;
	}

	header{
		height: 60px;
	}

	.identity{
		top:10px;
		width:40px;
		height: 40px;
	}

	.navButton{
		display: none;
	}

	.mobileHero{
		display: none;
	}

	nav{
		height: 100%;
		margin-left: auto;
		display: flex;
	}

	nav a{
		line-height: 60px;
		margin-left: 2.5vw;
		font-size:0.75vw;
	}

	.deskHero{
		padding-top:6.25vw;
		color:rgba(58,12,163,1);
		margin-bottom: 7.677419%;
/*				margin-bottom: 90px;*/

	}

	.deskHero h1{
		font-size:2vw;

	}

	.deskHero .courage{
		font-size:5vw;
		letter-spacing: -0.25vw;

	}

	.deskHero span{
		font-family: 'poppins_semiBold';
	}

	.top-image{
		margin-bottom: -1%;
	}

	.scrolling-image {
		animation: scroll 40s var(--animation-direction, forwards) linear infinite;
	}

	.titleMarginBottom{
		margin-bottom: 3.08641975308642%;
	}

	.button{
		width: 12.2%;
		line-height: 3vw;
		margin-bottom: 7.677419%;
		font-size: 0.9vw;
	}

	.button:hover{
		transition: box-shadow 500ms ease-out;
		box-shadow: 5px 5px 0px rgba(76,201,240,1);
	}

	#about h1{
		font-size: 2vw;
		margin-bottom: 1.612903225806452%;
	}

	.missionParagraph{
		width:43.5%;
		line-height: 1.35vw;
		font-size:0.91vw;
		margin-bottom: 1.851851851851852%;
	}

	#about .button{
		font-size: 0.8vw;
	}

	#about .secondParagraph{
		margin-bottom: 3.8%;
	}

	.collapsableHolder{
		width:43.5%;
		margin-bottom: 11.814815%;
		border-radius: 1.75vw;
	}

	.collapsible{
		width:81.132075471698113%;
		margin-left: auto;
		margin-right: auto;
	}

	.collapsible h3{
		font-size: 1vw;
	}

	.startingHeight{
		line-height: 4.75vw
	}


	.content{
		padding-bottom: 8.166667%;
		font-size: 0.9vw;
		line-height: 1.1vw;
	}

	.three .content{
		padding-bottom: 10.416666666666667%;
	}

/*	///////QUIZ XL DESKTOP/////////*/

	#quiz{
		margin-bottom: 11.814815%;
	}

	#quiz h1{
		font-size: 2vw;
		margin-bottom: 1.612903225806452%;
	}

	.quizFlexParent{
		width: 62.493827%;
	}

	.start{
		width: 12.2%;
		line-height: 3vw;
	}

	.quizTitle{
		font-size: 2vw;
		margin-bottom: 1.612903225806452%;
	}

	.introQuiz .missionParagraph{
		margin-bottom:3.8%;
	}

	.scenario{
    	width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
    	margin-bottom: 3.8%;
	}

	.answerHolder{
		width:36.438776%;
		margin-left: 0%;
		margin-bottom: 3.8%;

	}

	.answerHolder:nth-of-type(2n){
		margin-right: 0;
	}

	.photo{
		width:100%;
		padding-top: 100%;
		margin-bottom: 7%;
	}

	.centerImage{
		width:30.806452%;
		padding-top:30.806452%;
		margin-bottom: 3.8%;
		margin-left: auto;
		margin-right: auto;
	}

	.trueFalse{
		width: 70%;
    	line-height: 3.5vw;
	}

	.answer{
		font-size: 1.75vw;
	}

	.selected{
		transform: scale(1.05);
	}

	.answerHolder:hover{
		transform: scale(1.05);
		transition: transform 500ms ease-out;
	}

	.noAgeBiasScreen p{
		width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
		margin-bottom: 3.8%;
	}

	.correctScreenOne p{
		width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
		margin-bottom: 3.8%;
	}

	.correctScreenTwo p{
		width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
		margin-bottom: 3.8%;
	}

	.correctScreenThree p{
		width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
		margin-bottom: 3.8%;
	}

	.correctScreenFour p{
		width:43.5%;
		line-height: 1.25vw;
		font-size:0.91vw;
		margin-bottom: 3.8%;
	}


/*	///////PLEDGE XL DESKTOP (change the margins to fit this grid)/////////*/

	#pledge{
		margin-bottom: 2.814815%;
/*		between sections*/
	}

	#pledge h1{
		font-size: 2vw;
		margin-bottom: 1.612903225806452%;
		/*		/////margin bottom: 15px//////*/
	}

	.mobilePledge{
		display: none;
	}

	.flexParentFT{
		display: flex;
	}

	.left{
		width:44.466258%;
		margin-right: 15.602151%;
	}

	.left h3{
		font-size: 1.2vw;
		color:rgba(58,12,163,1);
		margin-bottom: 11.392405063291139%;
	}

	.right{
		width:41%;
	}

	.right p{
		font-size: 1.2vw;
		font-family: 'poppins_italic';
	}


	input[type=text] {
		color: rgba(0,0,0,1);
	    display: block;
	    width: 56.556962%;
	    border: none;
	    border-bottom: 4px #3A0CA3 solid;
	    box-sizing: border-box;
	    font-family: 'poppins_regular';
	    font-size: 1vw;

	    padding-left:10px;
	    margin-bottom: 3.329113924050633%;
	}

	.submit{
		font-size: 0.9vw;
		padding-top: 4%;
		padding-bottom: 4%;
		width:35.2%;
		line-height: 0.5vw;
	}

	.pledgeCopy{
		line-height: 1.6vw;
		padding-bottom: 21.082278481012658%;
	}

	.badge{
		background-image: url(../images/desktop/Desktop.png);
		width:26.785714285714286%;
		padding-top: 26.785714285714286%;
		margin-bottom: 7.142857142857142%;
	}

	.submittedPledgeScreen p{
		font-size: 1vw;
	}

/*	///////////////////SOCIAL AREA*/

	.socialImage{
		width:74.193548387096774%;
		padding-top:47%;
		background-image:url(../images/desktop/smallDeskFooter.png);
		background-size: 100%;
		position: relative;
		top:0vw;
		left:15.432098765432099%;
	}

	#social .photoBubble{
		position: absolute;
		border-radius:50vw 50vw 50vw 0vw;
		width:29.166667%;
	
		top:0vw;
		right:15.432098765432099%;
		line-height: 6vw;
		font-size: 1.75vw;
	}

	.socialMediaHolder{
		background-color: blue;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}


	.hashtagHolder{
		position: absolute;
		bottom:0.25vw;
		right:13.5%;
		line-height: 2.75vw;
		font-size: 1.25vw;

	}

	.hashtag{
		font-size: 2.65vw;
		font-family: 'poppins_semiBold';

	}


	footer{
		height: 50px;
		line-height: 50px;
	}

}