/* 
Theme Name:		 KSPG TwentyTwenty
Description:	 Theme by Phalla Lay
Author:			   Phalla Lay
Author URI:		 phalla.info
Version:		   2.3.64
Text Domain: kspg_twentytwenty;
-------------------------------------------------------------- */
/* =Theme customization starts here
------------------------------------------------------- */

@font-face {
    font-family: 'Koh-Santepheap-Head';
    src: url('fonts/KohSantepheapHead.eot');
    src: local('Koh Santepheap Head'), local('KohSantepheapHead'),
        url('fonts/KohSantepheapHead.eot?#iefix') format('embedded-opentype'),
        url('fonts/KohSantepheapHead.woff2') format('woff2'),
        url('fonts/KohSantepheapHead.woff') format('woff'),
        url('fonts/KohSantepheapHead.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Koh-SantepheapLight';
    src: url('fonts/KohSantepheapLight.eot');
    src: local('Koh Santepheap Light'), local('KohSantepheapLight'),
        url('fonts/KohSantepheapLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/KohSantepheapLight.woff2') format('woff2'),
        url('fonts/KohSantepheapLight.woff') format('woff'),
        url('fonts/KohSantepheapLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Koh-Santepheap-Body';
    src: url('fonts/KohSantepheapBody.eot');
    src: local('Koh Santepheap Body'), local('KohSantepheapBody'),
        url('fonts/KohSantepheapBody.eot?#iefix') format('embedded-opentype'),
        url('fonts/KohSantepheapBody.woff2') format('woff2'),
        url('fonts/KohSantepheapBody.woff') format('woff'),
        url('fonts/KohSantepheapBody.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Koh-Santepheap-Body-Bold';
    src: url('fonts/KohSantepheapBody-Bold.eot');
    src: local('Koh Santepheap Body Bold'), local('KohSantepheapBody-Bold'),
        url('fonts/KohSantepheapBody-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/KohSantepheapBody-Bold.woff2') format('woff2'),
        url('fonts/KohSantepheapBody-Bold.woff') format('woff'),
        url('fonts/KohSantepheapBody-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

* {
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
}

iframe {
    overflow: hidden;
    max-width: 100%;
}

.signin legend {
  display: none;
}

#load_more_wrapper .submit-wrapper {
  text-align: center;
}

#takeover {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    position: fixed;
    left: 0;
    top: 0;
    filter: alpha(opacity=80);
    opacity: 0.8;
}
#takeover-ads {
    z-index: 1001;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -240px;
    color: #FFF;
}
#takeover-ads .close,
#bannerFooter .close {
	width: 15px;
	height: 15px;
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.7);
}
#bannerFooter .close {
	top: 0;
	right: 15px;
}
#takeover-ads .close:before,
#takeover-ads .close:after,
#bannerFooter .close:before, #bannerFooter .close:after {
	background-color: #fff;
}

.close-wrapper {
	position:absolute; 
	top: -13px; 
	right: -40px;
}

@media screen and (max-width: 768px) {
	#takeover-ads {
		width: 320px;
		left: 50%;
    	top: 50%;
    	margin-left: -160px;
    	margin-top: -120px;
	}
}

@media screen and (max-width: 340px) {
	.close-wrapper {
		top: 0; 
		right: 0;
	}
}