html{ font-size: 62.5%;}
body{ font-size: 1.4em;}

/*========= main ==========*/
.container-width{ width: 960px;}
img{ max-width: 100%; border: 0;}
a{ border: none; transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
figure{ margin: 0;}

/*========= margin ==========*/
.margin-top{ margin-top: 20px;}
.margin-bottom{ margin-bottom: 20px;}

/*========= padding ==========*/
.padding{ padding: 15px;}

/*========= display ==========*/
.display-block{ display: block;}

/*========= overflow ==========*/
.overflow-hidden{ overflow: hidden;}


@media (max-width:960px){
	.container-width{ width: 100%;}
}

/*========= color ==========*/
.bg-red{ background: #d20005;}
.bg-pink{ background: #febcb5;}
.bgdark-pink{ background: #fd7b7e;}
.bg-blue{ background: #385e97;}
.bg-pink-hue{ background: #fc2943;}
.bg-grey{ background: #E7E7E7;}
.bg-green{ background: #16B865;}
.bg-lgbt{ background: #E933FF;}

.font-white{ color: #FFFFFF;}
.font-red{ color: #d20005;}
.font-blue{ color: #385e97;}

/*========= text-align ==========*/
.text-align-center{ text-align: center;}

/*========= search ==========*/
.block-search-model{ padding: 15px 0; display: inline-block; width: 100%;}
.upload-latest{ font-size: 1.6rem; font-size: 16px;}
.search-control{ border-radius: 4px 0 0 4px !important;}
.name-post{ border-radius: 0; border-right: 0; border-left: 0;}
.name-post:hover{ border-right: 0; border-left: 0;}

@media (max-width:991px){
	.upload-latest{ text-align: center; margin-bottom: 20px; font-size: 2rem; font-size: 20px;}
	.button-latest{ width: 100%;}
	.dropdown-model{ min-width: 100%;}
}

@media (max-width:720px){
	.search-model{ width: 60%;}
}

@media (max-width:640px){
	.search-model{ width: 100%; margin-bottom: 20px;}
}

@media (max-width:592px){
	.block-search-model{ padding-bottom: 0;}
}

/*========= upload-pic ==========*/
.upload-image{ margin: 0; text-align: center;}
.upload-image a{ display: block; padding: 7px; border-radius: 4px; color: #FFFFFF; text-decoration: none;}
.upload-image a:hover{ background: #B31114;}

/*========= hover man ==========*/
.upload-image.man a:hover{ background: #1F4277;}

/*========= hover women ==========*/
.upload-image.women a:hover{ background: #BF5865;}

/*========= hover lgbt==========*/
.upload-image.lgbt a:hover{ background: #C22BD4;}

/*========= hover all-sex ==========*/
.upload-image.all-sex a:hover{ background: #058845;}

@media (max-width:592px){
	.block-select{ width: 50%; margin-bottom: 10px;}
	.block-select:nth-child(3){ width: 50%;}
}

@media (max-width:212px){
	.block-select{ width: 100%;}
}

/*========= คอนเทนเนอ รูป รายละเอียดดาวเดือน ==========*/
.detail-model{ padding: 10px;}

/*========= รูปดาวเดือน และหมายเลข ==========*/
.pic-model img{ position: relative; border: 7px solid #d20005; width: 100%; object-fit: cover; object-position: 50% 5%;}
.crown{ position: absolute; top: 3%; left: 7%;}
.crown img { max-width: 50px;}
.crown p{ text-align: center;}

@media (max-width:640px){
	.block-model{ width: 50%;}
}

@media (max-width:580px){
	.crown{ left: 11%;}
}

@media (max-width:400px){
	.crown img { max-width: 40px;}
}

@media (max-width:380px){
	.grid-item{ width: 100%;}
	.crown img { max-width: 50px;}
	.crown{ left: 7%;}
}

/*========= ชื่อดาวเดือน ==========*/
.name-model{ font-size: 1.6rem; font-size: 16px;}

/*========= ปุ่มโหวต และจำนวนโหวต ==========*/
.block-vote{ width: 60%; float: left; font-size: 1.4rem; font-size: 14px;}
.block-vote ul{ margin: 0; padding: 0; display: flex;}
.block-vote ul li{ list-style: none; border-radius: 5px; background: #d20005; padding: 10px; color: #FFFFFF; float: left;}
.block-vote ul li:first-child{ padding: 0;}
.block-vote ul li:last-child{ border-radius: 0 5px 5px 0;}
.block-vote ul li a{ background: #fd7b7e; color: #FFFFFF; border-radius: 5px 0 0 5px; display: block; text-decoration: none; padding: 10px;}
.block-vote ul li a:hover{ background: #E85A5D;}

@media (max-width:991px){
	.block-vote{ width: 100%; float: none; margin-bottom: 10px;}
	.block-vote ul li{ width: 50%; text-align: center;}
}

@media (max-width:360px){
	.block-vote ul{ display: inherit;}
	.block-vote ul li{ width: 100%; float: none; text-align: center; border-radius: 5px 5px 0 0;}
	.block-vote ul li:last-child{ border-radius: 0 0 5px 5px;}
	.block-vote ul li a{ border-radius: 5px 5px 0 0;}
}

.invite-friend{ width: 40%; float: right; font-size: 1.3rem; font-size: 13px; text-align: center;}
.invite-friend p a{ background: #fc2943; padding: 10px; border-radius: 5px; color: #FFFFFF; display: block; text-decoration: none;}
.invite-friend p a:hover{ background: #B9293B;}

@media (max-width:991px){
	.invite-friend{ width: 100%; float: none; font-size: 1.4rem; font-size: 14px;}
}

/*========= popup ==========*/
.modal-content span{ margin-right: 20px; font-size: 30px;}
.text-register{ margin-top: 40px;}
.text-register p.font-red{ font-size: 1.8rem; font-size: 18px; font-weight: bold;}
.text-register p.font-blue{ font-size: 1.6rem; font-size: 16px; font-weight: bold;}

@media (min-width:768px){
	.modal-sm{ width: 450px;}
}

/*========= facebook ==========*/
.facebook a{ display: inline-block; padding: 15px; border-radius: 5px; color: #FFFFFF;}
.facebook a:hover{ background: #1f4379;}
.facebook a span{ font-size: 1.6rem; font-size: 16px; margin-right: 0;}

/*========== back-to-top ==============*/
.gotop{ text-align:right; position:fixed; z-index:999; bottom:0; right:7%;}
.back-to-top{ bottom: 10%; color:#C00; padding:2px 5px; display:inline-block;}
.gotop a img{ max-width: 100px;}
.back-to-top:focus{ outline:none;}