@media screen and (max-width: 1800px){
	.stories .right{
		padding: 150px 330px 0 80px;
	}
	.causes .violence div{
		right: 10px;
	}
}
@media screen and (max-width: 1680px){
	.navbar .logo{
		width: 200px;
	}
	.hero{
		padding-top: 380px;
	}
	.hero .play-btn{
		width: 150px;
	}
	.manifesto h2{
		padding: 90px 0 85px 340px;
	}
	.manifesto .col-lg-8{
		padding: 80px 400px 100px 135px;
	}
	.stories .right{
		padding: 150px 300px 0 80px;
	}
	.stories h3{
		font-size: 2.2em;
	}
	.purpose{
		padding: 100px 300px;
	}
	.share-bg ul{
		padding: 0 27% 0 34.5%;
	}
}
@media screen and (max-width: 1600px){
	.navbar .logo{
		width: 160px;
	}
	.hero{
		height: 750px;
		padding-top: 300px;
	}
	.hero .play-btn{
		width: 120px;
	}
	.hero.story-bg{
		height: auto;
		padding: 180px 0 140px;
	}
	h2{
		font-size: 2em;
	}
	.manifesto h2{
		padding: 90px 0 80px 200px;
	}
	.manifesto .col-lg-8{
		padding: 80px 300px 100px 135px;
	}
	.stories .right{
		padding: 150px 250px 0 50px;
	}
	.causes h2{
		padding: 0 300px 60px 0;
	}
	.causes .col-lg-6 div{
		width: 380px;
	}
	.causes .violence div{
		right: 0;
	}
	.purpose{
		padding: 80px 300px;
	}
	.purpose p,
	.purpose li{
		font-size: 1em;
	}
	.purpose .mid{
		padding: 20px 20% 0;
	}
	.hero.share-bg{
		height: auto;
		padding: 150px 0 85px;
	}
	.share-bg ul{
		padding: 0px 27% 0 33%;
	}
	.modal-dialog{
		max-width: 65%;
	}
}
@media screen and (max-width: 1440px){
	body{
		font-size: 85%;
	}
	.manifesto .col-lg-8,
	.manifesto img{
		height: 450px;
	}
	.stories .left,
	.stories .right{
		height: 580px;
	}
	.causes h2{
		padding: 0 220px 60px 0;
	}
	.causes .cancer div,
	.causes .green div{
		left: 90px;
	}
	.causes .cancer{
		background-position: 75%;
	}
	.causes .violence{
		background-position: 30%;
	}
	.causes .green{
		background-position: 40%;
	}
	.ribbon{
		width: 15%;
	}
	.ribbon.bc{
		height: 100px;
		width: auto;
	}
	.purpose h3{
		margin: 20px 0 10px; 
	}
	.purpose p{
		font-size: 1.1em;
		margin-bottom: 20px;
	}
	.purpose li{
		font-size: 1.1em;
	}
}
@media screen and (max-width: 1367px){
	.navbar .logo{
		width: 150px;
	}
	.hero{
		height: 650px;
		padding-top: 250px;
	}
	.share-bg img{
		width: 40px;
	}
	.share-bg h1{
		margin: 30px 0 35px;
	}
	footer{
		padding: 40px 0;
	}
	footer .terms{
		margin-bottom: 30px;
	}
}
@media screen and (max-width: 1280px){
	.hero .slogan{
		width: 50px;
	}
	.hero.story-bg{
		padding: 150px 0 80px;
	}
	.manifesto{
		margin-bottom: 100px;
	}
	.manifesto h2{
		padding: 60px 0 60px 100px;
	}
	.manifesto img,
	.manifesto .col-lg-8{
		height: 400px;
	}
	.manifesto img{
		right: -80px;
	}
	.manifesto .col-lg-8{
		padding: 60px 200px 0px 100px;
	}
	.stories .left,
	.stories .right{
		height: 530px;
	}
	.stories .right{
		padding: 100px 200px 0 50px;
	}
	.causes .cancer div,
	.causes .green div{
		left: 55px;
	}
	.causes .violence div{
		width: 330px;
		right: 10px;
	}
	.purpose{
		padding: 80px 300px 50px;
	}
	.share form textarea{
		width: 450px;
		height: 200px;
		margin-right: 50px;
	}
	.story-output{
		width: 465px;
	}
}
@media screen and (max-width: 1200px){
	.stories .right .hero-carousel{
		padding: 30px 30px 50px;
	}
	.purpose{
		padding: 50px 200px 30px;
	}
	.hero.share-bg{
		padding: 120px 0 70px;
	}
	.share-bg ul{
		padding: 0px 20% 0 31%;
	}
	.share form textarea{
		width: 400px;
		height: 200px;
	}
}
@media screen and (max-width: 1024px){
	body{
		font-size: 70%;
	}
	.navbar .logo{
		width: 100px;
	}
	.navbar ul{
		margin: 10px 0 0 50px;
	}
	.hero{
		height: 500px;
		padding-top: 180px;
	}
	.hero img:not(.slogan){
		width: 50px;
	}
	.hero img.play-btn{
		width: 80px;
	}
	.hero.story-bg{
		padding: 120px 0 80px;
	}
	h1{
		font-size: 3em;
		margin: 30px 0;
	}
	.hero .slogan{
		width: 40px;
		right: 30px;
		bottom: 30px;
	}
	h2{
		font-size: 1.8em;
		letter-spacing: 0.25em;
	}
	.manifesto h2{
		padding: 45px 0 60px 50px;
	}
	.manifesto img,
	.manifesto .col-lg-8{
		height: 340px;
	}
	.manifesto img{
		right: -70px;
	}
	.manifesto .col-lg-8{
		padding: 50px 200px 0 100px;
	}
	.stories .left,
	.stories .right{
		height: 440px;
	}
	.stories .right{
		background-position: 0;
		padding: 70px 115px 0 50px;
	}
	.causes h2{
		padding: 0 150px 50px 0;
	}
	.causes .col-lg-6{
		height: 245px;
	}
	.causes .col-lg-6 div{
		width: 230px;
	}
	.causes .violence div{
		right: 30px;
	}
	.purpose h3{
		margin: 10px 0;
	}
	.purpose p{
		margin-bottom: 15px;
	}
	.purpose .ribbon{
		margin: 35px 0;
	}
	.story-output .content img{
		width: auto;
	}
	.hero .share-image img{
		width: auto!important;
		max-width: 70%;
		height: auto;
	}
	.modal-dialog{
		max-width: 80%;
	}
}
@media screen and (max-width: 992px){
	.navbar-toggler{
		display: block;
		padding: 30px 30px 0 0;
		outline: none!important;
	}
	.navbar ul li{
		position: static;
		display: block;
		width: 100%;
		text-align: center;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.navbar ul li::after{
		display: none;
	}
	.hero.story-bg{
		padding: 100px 0 80px;
	}
	.manifesto h2{
		padding: 60px 0 40px 50px;
	}
	.manifesto .col-lg-8{
		height: auto;
		padding: 70px 200px 60px 70px;
	}
	.manifesto img{
		display: none;
	}
	.stories .left, .stories .right{
		height: 400px;
	}
	.stories .right{
		padding: 90px 400px 0 50px;
	}
	.causes h2{
		float: none;
		padding: 0 0 40px 50px;
	}
	.causes .thumb-dv.mobile{
		display: block;
	}
	.causes .thumb-dv.desktop{
		display: none;
	}
	.causes .col-lg-6 div{
		width: 400px;
	}
	.causes .violence div{
		right: 70px;
	}
	.purpose .col-lg-6 img{
		display: none;
	}
	.purpose .mid{
		padding: 0 15px;
	}
	.share form textarea{
		display: block;
		width: 50%;
		margin: 0 auto 50px;
	}
	.share form textarea:last-of-type{
		margin: 0 auto;
	}
}
@media screen and (max-width: 768px){
	.manifesto{
		margin-bottom: 85px;
	}
	.stories{
		margin-bottom: 70px;
	}
	.stories .left{
		height: auto;
		padding: 70px 50px;
	}
	.stories .left div{
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}
	.stories .right{
		height: auto;
		padding: 50px 300px 50px 50px;
	}
	.causes h2{
		padding: 0 0 40px 35px;
	}
	.causes .col-lg-6 div{
		width: 300px;
	}
	.causes .violence div{
		right: 30px;
	}
	.purpose{
		padding: 50px 100px 30px;
	}
	.hero.share-bg{
		padding: 90px 0 70px;
	}
	.share-bg img:not(.slogan){
		width: 35px;
	}
	.share-bg p{
		margin-bottom: 30px;
	}
	.share-bg ul{
		padding: 0px 11% 0 25%;
	}
	.share form textarea{
		width: 80%;
		margin: 0 auto 30px;
	}
	.story-output{
		width: 450px;
	}
}
@media screen and (max-width: 576px){
	.navbar-toggler{
		padding: 25px 25px 0 0;
	}
	.hero{
		height: 400px;
		padding-top: 150px;
	}
	.hero img:not(.slogan){
		width: 35px;
	}
	.hero img.play-btn{
		width: 75px;
	}
	h1{
		font-size: 2.5em;
		margin: 20px 0;
	}
	.hero p{
		font-size: 1.3em;
	}
	.hero .slogan{
		width: 35px;
	}
	h2::after{
		width: 70px;
		height: 5px;
		margin-top: 15px;
	}
	.manifesto{
		margin-bottom: 30px;
	}
	.manifesto h2{
		padding: 50px 0 30px 35px;
	}
	.manifesto .col-lg-8{
		padding: 50px;
	}
	.stories .right{
		padding: 50px 210px 50px 30px;
	}
	.causes h2{
		padding: 0px 0 30px 20px;
	}
	.causes .cancer div,
	.causes .green div{
		left: 35px;
	}
	.causes .violence div{
		right: 10px;
	}
	.purpose{
		padding: 40px 40px 30px;
	}
	.purpose .ribbon{
		margin: 25px 0 35px;
	}
	.ribbon.bc{
		height: 50px;
	}
	.share-bg ul{
		padding: 0px 11% 0 15%;
	}
	.share form{
		margin: 40px 15px 0;
	}
	.share form textarea{
		width: 100%;
	}
	.story-output .content img{
		width: auto;
	}
	.hero .share-image img{
		max-width: 100%;
	}
	.modal-dialog{
		max-width: 95%;
	}
	.footer-modal h2{
		font-size: 1.5em;
	}
}
@media screen and (max-width: 500px){
	.stories .right{
		padding: 50px 137px 50px 30px;
	}
	.causes .col-lg-6 div{
		width: 250px;
	}
	.story-output{
		width: 350px;
		padding: 25px;
	}
	.story-output .content{
		padding: 30px;
	}
	.story-output .content h3{
		font-size: 2em;
	}
	.story-output .content img{
		width: 100px;
	}
	.story-output img.letter{
		width: 25px;
	}
	.story-bg .main-btn{
		margin-right: 50px;
	}
}
@media screen and (max-width: 425px){
	h1{
		font-size: 2.1em;
	}
	.hero p{
		margin-bottom: 30px;
	}
	.hero img.play-btn{
		width: 70px;
	}
	.hero .slogan{
		width: 30px;
		bottom: 20px;
		right: 20px;
	}
	.manifesto h2{
		padding: 35px 0 25px 10px;
	}
	.manifesto .col-lg-8{
		padding: 35px 25px;
	}
	.stories{
		margin-bottom: 50px;
	}
	.stories .left{
		padding: 55px 25px;
	}
	.stories .right{
		padding: 60px 30px 75px;
	}
	.causes h2{
		padding: 0 0 30px 15px;
	}
	.causes .col-lg-6{
		height: 190px;
	}
	.causes .col-lg-6 div{
		width: 200px;
	}
	.causes .cancer div,
	.causes .green div{
		left: 25px;
	}
	.purpose{
		padding: 30px 10px;
	}
	.share-bg ul{
		padding: 0 15px 0 10%;
	}
	.story-output{
		width: auto;
	}
	footer{
		padding: 30px 0;
	}
}
@media screen and (max-width: 376px){
	.causes .col-lg-6{
		height: 175px;
	}
	.causes h3{
		font-size: 1.2em;
	}
	.causes .violence div{
		right: 0;
	}
	.share-bg ul{
		padding: 0 15px;
	}
	.share form textarea{
		height: 150px;
	}
	.share form textarea::placeholder{
		font-size: 1.2em;
	}
}
@media screen and (max-width: 321px){
	body{
		font-size: 65%;
	}
	.hero.story-bg{
		padding: 100px 0 30px;
	}
	.navbar .logo{
		width: 80px;
	}
	.navbar-toggler{
		padding: 20px 20px 0 0;
	}
	.stories .right{
		padding: 40px 20px 50px;
	}
	.stories .right .hero-carousel{
		padding: 30px 30px 40px;
	}
	.stories h3{
		font-size: 2em;
	}
	.causes .col-lg-6{
		height: 140px;
	}
	.causes .col-lg-6 div{
		width: 180px;
	}
	.causes .cancer div,
	.causes .green div{
		left: 15px;
	}
	.hero.share-bg{
		padding: 70px 0 50px;
	}
	.share-bg ul{
		padding: 0;
	}
	.share form{
		margin: 30px 0 0;
	}
	.share form textarea{
		margin: 0 auto 20px;
	}
	.story-output{
		padding: 20px;
	}
	.story-output .content{
		padding: 30px 25px;
	}
	.story-bg .main-btn{
		display: block;
		margin-right: 0;
		margin-bottom: 20px;
	}
}