/*   
Theme Name: KSG
Theme URI: https://www.innovate-design.co.uk
Author: Innovate Design
Author URI: https://www.innovate-design.co.uk
Description: 
Version: 1.0.4
License: -
License URI: -
Tags: responsive-layout
Text Domain: ksg
*/

/* CSS Document */

/* Table of Content
==================================================
- Font-Face
- Base Styles (override)
- Grid (override)
- Site Styles
- Page Styles
- Media Queries
*/


/* Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
		src: url('../fonts/FontName.eot');
		src: url('../fonts/FontName.eot?iefix') format('eot'),
			url('../fonts/FontName.woff') format('woff'),
			url('../fonts/FontName.ttf') format('truetype'),
			url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
		font-weight: normal;
		font-style: normal; }
*/


/* Base Styles (override)
================================================== */
h1 { font-size: 3.5rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.4rem; }


/* Grid (override)
================================================== */
.container {
	max-width: 1400px;
}
.grid-row [class *= "grid-col"] {
}


/* Site Styles
================================================== */
/* Colours */
.error { color: #f00; }
    label.error { margin: -14px 0 10px; }
.mono { filter: grayscale(1) brightness(0.5); }
.has-light-blue-background-color { background-color: #EAF0FC; }
.has-light-blue-color { color: #EAF0FC; }
.has-mid-blue-background-color { background-color: #5285E1; }
.has-mid-blue-color { color: #5285E1; }
.has-dark-blue-background-color { background-color: #2C3444; }
.has-dark-blue-color { color: #2C3444; }
.has-white-background-color { background-color: #ffffff; }
.has-white-color { color: #ffffff; }
/* Border */
.rounded { border-radius: 15px; }

/* Video */
video{ width: 100%; height: 100%; max-width: 100%; }
.wp-video{width: 100% !important;}
.wp-video-shortcode{width: 100% !important}

/* Wrapper */
#wrapper-main {
    padding: 0 20px;
	overflow-x: hidden;
	min-height: 400px;
}

/* Containers */
#sidebar {
    position: relative;
	padding: 20px 0;
	z-index: 9999;
}
@media screen and (min-width: 768px) {
    #sidebar {
        min-height: 500px;
        height: 95vh;
    }
}

#content-top {}
#content-bottom {}



/* Main Navigation */
#menu-main {}
#menu-main ul {
    list-style: none;
    padding: 20px 0;
}
    #menu-main li {
        padding: 10px 0;
    }
    #menu-main li a {
        color: #5285E1;
        font-size: 1.9rem;
        font-weight: 500;
        line-height: 1.6rem;
        text-decoration: none;
    }
    #menu-main li.current-page-ancestor:not(.current-page-parent) a,
    #menu-main li.current-menu-item a {
        color: #2C3444;
        font-weight: 600;
    }



/* Mobile Navigation */
.slicknav_menu { display:none; background-color:#fdfdfd !important; }
.slicknav_btn { background-color:transparent !important; }
@media screen and (max-width: 767px) {
	#menu-main ul { display:none; } /* hide original menu */
	.slicknav_menu { display:block; }
}



/* Page Styles
================================================== */


/* Element Styles
================================================== */
#site-logo {
    max-width: 70%;
    margin: 0 15%;
}
#user-panel {
    position: absolute;
    width: 100%;
    bottom: 20px;
    text-align: center;
}
    #user-panel * {
        color: #5285E1;
        text-decoration: none;
    }

#breadcrumb {
    padding: 10px 20px;
}
    #breadcrumb .fa {
        font-size: 1.1em;
    }


/* DataTable */
.dt-layout-row {}
    .dt-layout-row label,
    .dt-layout-row input,
    .dt-layout-row select {
        display: inline;
        width: auto;
        margin-bottom: 0;
    }
    .dt-layout-row input {
        background-color: #fff !important;
    }
    .dt-layout-row select {
        padding-right: 15px !important;
        background-color: #fff !important;
    }
    .dt-paging-button {
        font-size: 0.85em;
    }

/* Popup Modal */
.lity {
	z-index: 65535;
	background-color: rgba(64,64,64,0.65);
}
	.lity-iframe .lity-container *,
	.lity-iframe .lity-container *,
	.lity-youtube .lity-container *, 
	.lity-vimeo .lity-container *, 
	.lity-facebookvideo .lity-container *, 
	.lity-googlemaps .lity-container * { 
    	background-color: #fff !important;
    } 
	.lity-close {
		margin: 40px 25px 0 0;
		text-shadow: 0 0 3px #000;
		/* Position close button inside content container */
		position: absolute !important;
		right: -10px !important;
		top: -30px !important;
	}
	.lity .lity-container { 
		width: 98%;
		min-width: 300px;
		max-width: 800px;
		min-height: 50vh;
		max-height: 85vh;
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden !important;
	}
		.lity-content {
			border-radius: 10px;
			overflow: hidden;
			padding: 5px;
			background-color: #fff;
			border-bottom: 20px solid #fff;
    		overflow-y:scroll;
		} 

/* Checkbox */
.ui-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .ui-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .ui-checkbox .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 28px;
        width: 28px;
        border: 2px solid #5285E1;
        border-radius: 50%;
        background-color: #F4F7FD;
    }
        .ui-checkbox .checkmark:after {
            display: none;
            content: "";
            position: absolute;
            left: 8px;
            top: 3px;
            width: 5px;
            height: 12px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    /* Checked */
    .ui-checkbox input:checked ~ .checkmark {
        background-color: #5285E1;
    }
    .ui-checkbox input:checked ~ .checkmark:after {
        display: block;
    }


/* Radio Button */
.ui-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .ui-radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    .ui-radio .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 28px;
        width: 28px;
        border: 2px solid #5285E1;
        border-radius: 50%;
        background-color: #F4F7FD;
    }
        .ui-radio .checkmark:after {
            display: none;
            content: "";
            position: absolute;
            left: 8px;
            top: 3px;
            width: 5px;
            height: 12px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    /* Checked */
    .ui-radio input:checked ~ .checkmark {
        background-color: #5285E1;
    }
    .ui-radio input:checked ~ .checkmark:after {
        display: block;
    }


/* Media Queries
================================================== */
	
/* Print specific */
@media print {    
	.no-print, .no-print * {
		display: none !important;
	}
}

/* ≥ 568px */
@media screen and (min-width: 35.5em) {}

/* ≥ 768px */
@media screen and (min-width: 48em) {}

/* ≥ 1024px */
@media screen and (min-width: 64em) {}

/* ≥ 1280px */
@media screen and (min-width: 80em) {}