@media screen and (max-width:1279px){
	.black-gradient{
		bottom:30px;
	}
}

@media screen and (max-width:980px){
	h2{
		font-size:40px;
	}
	.icon-sustainable2{
		max-width:500px;
		margin-left:auto;
		margin-right:auto;
	}
	.bg-president{
		background-size:100% !important;
	}
	.sec-president .content{
		width:80%;
	}
	.president-name{
		text-align:left;
	}
	.sec-president .bottom-content{
		display:block;
	}
	.director-grid{
		width:96%;
		max-width:450px;
		margin:0 auto 20px auto;
	}
	.benefit-box{
		margin-bottom:50px;
	}
	.white-gradient{
		top:60px;
	}
	.video-col{
		width:44%;
	}
	.project-col{
		width:46%;
		margin:0 2% 30px 2%;
	}
	.img-farm{
		margin-top:-70px;
		margin-bottom:-20px;
	}
	.bg-animal-shelters{
		background-position:right center !important;
	}
	.help-grid > div{
		width:46%;
		margin:0 2% 30px 2%;
	}
	.img-3col{
		display:block;
		max-width:400px;
		margin:0 auto;
	}
	.img-3col img{
		width:100%;
		border:none;
	}
	.img-right{
		max-width:400px; 
		margin-left:auto; 
		margin-right:auto;
	}
}


@media screen and (max-width:767px){
	body {
		font-size:16px;
	}
	h1{
		font-size:50px;
	}
	h1 .style1{
		font-size:40px;
	}
	h1 .style2{
		font-size: 24px;
		margin-top: 6px;
	}
	h2{
		font-size:30px;
	}
	h3{
		font-size:25px;
	}
	h4{
		font-size:20px;
	}
	.full-screen{
		padding:30px 0;
	}
	.full-width{
		padding:30px 0;
	}
	.content{
		padding:20px 0;
	}
	.content-box{
		padding:30px 5%;
	}
	.bg-main{
		background-position:right 40% center !important;
	}
	.img-president img{
		max-width:180px;
	}
	.bg-glance{
		background-position:right 45% center !important;
	}
	.icon-sustainable1{
		max-width:240px;
		margin-left:auto;
		margin-right:auto;
	}
	.icon-sustainable2{
		max-width:180px;
		margin-left:auto;
		margin-right:auto;
	}
	p.justify{
		text-align:left;
	}
	ul.list-style li{
		text-align:left;
	}
	.bg-president{
		background-size:150% !important;
	}
	.sec-president .content{
		width:90%;
	}
	.bg-ykboard{
		background-position:right 60% center !important;
	}
	.inline-director-img{
		text-align:center;
		height:200px;
	}
	.inline-director-img img{
		width:200px;
	}
	.inline-director-content{
		padding:0;
		
	}
	.director-grid h4{
		font-size:16px;
	}
	.director-grid p{
		font-size:12px;
		line-height:1.2;
	}
	.director-content{
		min-height:160px;
	}
	#yk-members{
	  overflow-x:scroll;
	}
	#yk-members img{
		width:900px;
	}
	.move-text{
		display:block;
	}
	.bg-benefit{
		background-position:right 35% center !important;
	}
	.sec-statement{
		background-image:url(../images/banner-statement2021-mobile-yayasankossan.png);
		background-size:cover;
		background-position:top center;
		height:250px;
		margin-top:-40px;
	}
	.statement-title{
		height:250px;
		width:280px;
		margin:0;
		padding:20px 5% 0 5%;
	}
	.statement-title h2{
		font-size:30px;
	}
	.white-gradient{
		top:50px;
		height:150px;
		background-size:auto 150px;
	}
	.pillar-col{
		height:600px;
	}
	.pillar-content{
		height:420px;
	}
	.pillar-col{
		background-position:center;
	}
	.pillar-col.medical{
		background-position:top 20% center;
	}
	.pillar-col.social{
		background-position:top 70% center;
	}
	.pillar-col.environment{
		background-position:bottom 20% center;
	}
	.black-gradient {
	  bottom: 27px;
	}
	.utn-col.first{
		padding-bottom:20px !important;
	}
	ul.logo-list li{
		padding:0;
		margin:0 4% 25px 4%;
		height:70px;
	}
	ul.logo-list.partners li{
		height:50px;
	}
	.bg-cultures{
		background-position:right 15% center !important;
	}
	.flexbox{
		display:block;
	}
	.img-farm{
		margin-top:-50px;
		margin-bottom:30px;
	}
	.desktop{
		display:none;
	}
	.mobile{
		display:block;
	}
	.yk-package-col{
		width:48%;
	}
	.btn-close{
		width:30px;
		top:10px;
		right:10px;
	}
}


@media screen and (max-width:599px){
	.pillar-content{
		height:360px;
	}
	.video-col{
		max-width:300px;
		width:94%;
		margin:0 auto 30px auto;
	}
	.project-col{
		width:90%;
		margin:0 auto 30px auto;
	}
	.help-grid > div{
		width:90%;
		margin:0 auto 30px auto;
	}
}


/*@media screen and (orientation:portrait){
	.bg-cultures {
		height:50vh !important;
	}
}*/