.nayok{
	width:100%;
}
.nayok .text{
	/* margin-top:15px; */
	color:#000;
	/* text-align:justify; */
	/* font:20px/24px 'thaisanslite', Arial, sans-serif; */
	padding: 15px;
	font-size: 15px;
	background: #f7f7f7;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.nayok .pic{
	width:100%;	
}
.nayok .pic img{
	max-width:100%;
	height:auto;	
}


.mayor-new{
	margin: 37px 0 0px 0;
	padding: 0 0 50px 0;
	min-height: 460px;
	background: url(../images/content-new/mayor-new/bg.png) bottom center no-repeat;
}
.mayor-new .mayor-left{
	position:relative;
}
.mayor-new .mayor-left .mayor-pic{
	position:absolute;
	top: 30px;
	left: 110px;
	/* z-index:1; */
	position: relative;
	z-index: 1;
}
.mayor-new .mayor-left .mayor-pic img{
	max-width:100%;
	height:auto;
}
.mayor-new .mayor-left .mayor-name{
	position: absolute;
	top: 293px;
	left: 100px;
	width: max-content;
	height: 92px;
	z-index: 1;
	padding-top: 10px;
	padding-left: 70px;
	padding-right: 70px;
	font: 21px/21px 'Kanit', Arial, sans-serif;
	color: #ffffff;
	/* background: #3490d9; */
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2928dc+0,db37db+100 */
	/* background: #2928dc; */ /* Old browsers */
	background: -moz-linear-gradient(left,  #2928dc 0%, #db37db 100%); /* FF3.6-15 */
	/* background: -webkit-linear-gradient(left,  #2928dc 0%,#db37db 100%); */ /* Chrome10-25,Safari5.1-6 */
	/* background: linear-gradient(to right,  #2928dc 0%,#db37db 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: rgb(134,214,98);
	background: linear-gradient(270deg, rgba(134,214,98,1) 0%, rgba(24,176,75,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2928dc', endColorstr='#db37db',GradientType=1 ); /* IE6-9 */
	border: #ffffff 5px solid;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-left-radius: 20px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomleft: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.mayor-new .mayor-left .mayor-position{
	font: 16px/21px 'Kanit', Arial, sans-serif;
	color: #ffffff;
}
.mayor-new .mayor-right{
	position:relative;
}
.mayor-new .mayor-right .logo{
	/* position:absolute; */
	/* top:0; */
	/* left:50%; */
	/* margin-left:-60px; */
	text-align: center;
}
.mayor-new .mayor-right .logo img{
	max-width:100%;
	height:auto;
}
.mayor-new .mayor-right .slogan{
	/* position:absolute; */
	/* top: 140px; */
	/* left:0; */
	margin-top: 0;
	width:100%;
	text-align:center;
	font: 18px/31px 'Kanit', Arial, sans-serif;
	color: #000000;
}

.nayok .col-2{
	display:none;
}
@media (max-width: 424px) { 
.mayor-new{
	background:none;	
}
.mayor-new .col-lg-3{
	display:block;	
}
.mayor-new .mayor-left .mayor-pic{
	position:relative;
	top:0;
	left:0;
	margin-left:0;
	text-align: center;
}
.mayor-new .mayor-left .mayor-name{
	    width: 100%;
	    position: relative;
	    top: 0;
	    left: 0px;
	    margin-left: 0;
	    padding-left: 17px;
	    text-align: center;
	    background-position: 0% 0%;
}
.mayor-new .mayor-right .logo {
	top: 10px;
	margin-top: 15px;
}
.mayor-new .mayor-right .slogan{
	    font: 16px/31px 'Kanit', Arial, sans-serif;
}
 }
@media (min-width: 425px) and (max-width: 575px) { 
.mayor-new{
	background:none;	
}
.mayor-new .col-lg-3{
	display:block;	
}
.mayor-new .mayor-left .mayor-pic{
	position:relative;
	top:0;
	left:0;
	margin-left:0;
	text-align: center;
}
.mayor-new .mayor-left .mayor-name{
	    width: 350px;
	    position: relative;
	    top: -11px;
	    left: -7px;
	    margin-left: 0;
	    padding-left: 29px;
	    text-align: center;
}
.mayor-new .mayor-right .logo {
	top: 10px;
}

 }
@media (min-width: 576px) and (max-width: 767px) { 
.mayor-new{
	background:none;	
}
.mayor-new .col-lg-3{
	display:block;	
}
.mayor-new .mayor-left .mayor-pic{
	position:relative;
	top:0;
	left:0;
	margin-left:0;
}
.mayor-new .mayor-left .mayor-name{
	    width: 350px;
	position: relative;
    top: 0;
    left: -7px;
    margin-left: 0;
    padding-left: 17px;
}
.mayor-new .mayor-right .logo {
	top: 10px;
}

 }
@media (min-width: 768px) and (max-width: 991px) {
	.mayor-new{
		    background-size: 160%;	
	}
	.mayor-new .col-lg-3{
	display:block;	
}
.mayor-new .mayor-left .mayor-pic{
	position:relative;
	top: 50px;
	left:0;
	margin-left:0;
}
.mayor-new .mayor-left .mayor-name{
	  width: 280px;
    position: relative;
       top: 19px;
    left: 45px;
    margin-left: 0;
    padding-left: 37px;
}
.mayor-new .mayor-left .mayor-pic img{
	    max-width: 118%;
    height: auto;
}
	 }
@media (min-width: 992px) and (max-width: 1199px) { 
.mayor-new .mayor-left .mayor-name {
	top: 323px;
    left: 100px;
}
.mayor-new .mayor-left .mayor-pic{
	    top: 10px;
    left: 60px;	
}
.mayor-new .mayor-left .mayor-pic img{
	    max-width: 130%;
    height: auto;	
}
 }
@media (min-width: 1200px) { ... }