body {
	background-color: #363636;
	font-family: 'Prompt', sans-serif
}

.doujin_link {
	text-decoration: none
}

.doujin_post {
	margin: 7px 0px 7px 0px;
	background-color: white;
	border-radius: 5px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	transition: all .3s ease;
	background-position-y: -5px
}

.doujin_post_h {
	padding-top: 140%
}

.doujin_post_h2 {
	padding-top: 150%
}

.doujin_p_tag {
	position: absolute;
	top: 0px;
	margin-left: 1px
}

.doujin_tag {
	padding: 2px;
	font-size: 70%;
	border-radius: 5px;
	font-weight: bold;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -10px;
}

.doujin_t_red {
	color: white;
	background-color: rgba(219, 36, 36, 1)
}

.doujin_t_blue {
	color: white;
	background-color: rgba(0, 123, 255, 1)
}

.doujin_t_yellow {
	color: black;
	background-color: rgba(255, 193, 7, 1)
}

.doujin_t_green {
	color: white;
	background-color: rgba(23, 162, 184, 1)
}

.doujin_t_purple {
	color: black;
	background-color: rgba(222, 229, 255, 1)
}

.doujin_frame {
	width: 100%;
	position: absolute;
	bottom: 0px;
	background: rgba(242, 242, 242, .9);
	border-radius: 0 0 5px 5px
}

.doujin_post .doujin_frame_h {
	padding: 0 5px 0 5px;
	color: #007bff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.doujin_post:hover .doujin_frame_h {
	color: blue;
	overflow: initial;
	white-space: initial;
	text-overflow: initial
}

.iframe-width {
	width: 294px;
	height: 36px
}

.iframe2-width {
	width: 350px;
	height: 250px
}

.iframe3-width {
	width: 294px;
	height: 62px
}

@media screen and (min-width:756px) {
	.iframe-width {
		width: 735px;
		height: 90px
	}
	.iframe2-width {
		width: 350px;
		height: 250px
	}
	.iframe3-width {
		width: 735px;
		height: 156px
	}
}

@media screen and (max-width:755px) {
	.iframe-width {
		width: 490px;
		height: 90px
	}
	.iframe2-width {
		width: 250px;
		height: 210px
	}
	.iframe3-width {
		width: 490px;
		height: 104px
	}
}

@media screen and (max-width:500px) {
	.iframe-width {
		width: 294px;
		height: 90px
	}
	.iframe2-width {
		width: 350px;
		height: 250px
	}
	.iframe3-width {
		width: 294px;
		height: 62px
	}
}

#doujin_p_like {
	position: absolute;
	top: 0px;
	right: 5px
}

.doujin_p_tag2 {
	position: absolute;
	top: 0px;
	margin-left: 1px
}

#doujin_p_like2 {
	position: absolute;
	top: 0px;
	right: 1px
}

.font_name {
	display: inline;
	font-size: 100%
}


/* for Ads */

@keyframes slideInFromRight {
	0% {
		transform: translateX(+100%);
	}
	75% {
		transform: translateX(+100%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-100%);
	}
	75% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes slideInFromBottom {
	0% {
		transform: translateY(+100%);
	}
	75% {
		transform: translateY(+100%);
	}
	100% {
		transform: translateY(0);
	}
}

.sticky_frame {
	width: 366px;
	height: 205px;
}

.sticky_frame_right {
	position: fixed;
	right: 0px;
	bottom: 0px;
	z-index: 9999;
	animation: slideInFromRight 2s 1;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.7);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sticky_frame_left {
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 9999;
	animation: slideInFromLeft 2s 1;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.7);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sticky_frame_bottom {
	position: fixed;
	left: 50%;
	bottom: 0px;
	z-index: 9999;
	animation: slideInFromBottom 2s 1;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.7);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.sticky_frameiframe {
	pointer-events: none;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px auto;
}

.sticky_frame .close {
	pointer-events: auto;
	position: absolute;
	padding: 10px 15px;
	user-select: none;
	color: rgb(255, 255, 255);
	right: 0px;
	top: 0px;
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	z-index: 9999;
}

.sticky_frame:hover .close {
	background: rgba(0, 0, 0, 1);
}

.sticky_frame .close_text {
	position: relative;
	float: left;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	height: 15px;
	line-height: normal;
	font-weight: normal;
	text-decoration: underline;
}

.sticky_frame .close svg {
	height: 15px;
	width: 15px;
	fill: #FFFFFF;
	/*display: none;*/
}

.notransition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

@media only screen and (max-device-width: 480px) and (orientation:portrait) {
	.sticky_frame {
		width: 46vh;
		height: 25vh;
	}
	.sticky_frame .close {
		height: 3vh;
		padding: 0.5vh 1vh;
	}
	.sticky_frame .close_text {
		font-size: 2vh;
		height: 3vh;
	}
	.sticky_frame .close svg {
		height: 3vh;
		width: 3vw;
	}
}


/*this is for ios*/

@media only screen and (max-device-width: 480px) and (orientation:landscape) {
	.sticky_frame {
		width: 10vw;
		height: 38vh;
	}
	.sticky_frame .close {
		height: 3vh;
		padding: 0.5vh 1vh;
	}
	.sticky_frame .close_text {
		font-size: 2vh;
		height: 3vh;
	}
	.sticky_frame .close svg {
		height: 3vh;
		width: 3vw;
	}
}


/*this is for android*/

@media only screen and (max-device-height: 480px) {
	.sticky_frame {
		width: 46vw;
		height: 45vh;
	}
	.sticky_frame .close {
		height: 3vh;
		padding: 0.5vh 1vh;
	}
	.sticky_frame .close_text {
		font-size: 2vh;
		height: 3vh;
	}
	.sticky_frame .close svg {
		height: 3vh;
		width: 3vw;
	}
}


/* for tablets */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	.sticky_frame {
		width: 56vw;
		height: 26vh;
	}
	.sticky_frame .close {
		height: 3vh;
		padding: 0.5vh 1vh;
	}
	.sticky_frame .close_text {
		font-size: 2vh;
		height: 3vh;
	}
	.sticky_frame .close svg {
		height: 3vh;
		width: 3vw;
	}
}


/* for tablet landscape mode */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
	.sticky_frame {
		width: 41vw;
		height: 35.5vh;
	}
	.sticky_frame .close {
		height: 3vh;
		padding: 0.5vh 1vh;
	}
	.sticky_frame .close_text {
		font-size: 2vh;
		height: 3vh;
	}
	.sticky_frame .close svg {
		height: 3vh;
		width: 3vw;
	}
}

a.col-md-3 {
	transition: transform .3s;
	/* Animation */
}

a.col-md-3:hover {
	transform: scale(1.1);
}




@media (min-width: 768px) {
    .sidebar-banner-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem;
    }
}

/* === Slide Banner (900x300) === */
.banner-viewport {
    max-width: 900px;
    width: 100%;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 0.375rem;
    background-color: #343a40;
}
.banner-content {
    width: 900px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
@keyframes pan-banner {
    0% { left: 0; }
    50% { left: calc(100% - 900px); }
    100% { left: 0; }
}
@media (max-width: 899.98px) {
    .banner-viewport .banner-content {
        animation: pan-banner 10s ease-in-out infinite alternate;
    }
}

/* === Slide Banner (300x750) === */
.banner-viewport-side {
    max-width: 300px;
    width: 100%;
    height: 750px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 0.375rem;
    background-color: #343a40;
}
.banner-content-side {
    width: 300px;
    height: 750px;
    position: absolute;
    top: 0;
    left: 0;
}
@keyframes pan-banner-side {
    0% { left: 0; }
    50% { left: calc(100% - 300px); }
    100% { left: 0; }
}
@media (max-width: 899.98px) {
    .banner-viewport-side .banner-content-side {
        animation: pan-banner-side 10s ease-in-out infinite alternate;
    }
}