/*!
Theme Name: PrintPool
Theme URI: http://underscores.me/
Author: Katie Lester
Author URI: http://katiemlester.co.uk
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: printpool
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PrintPool is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*MENU NAVIGATION CSS*/

.sitenav{ 
	position:relative; 
	z-index:9999; 
}
.sitenav ul {
	margin:0; 
	padding:0; 
	font-family: inherit; /*check inherit*/
	font-size:1em !important; /*check this*/
	font-weight:700; 
	text-transform:none;
	text-align: center;
}
.sitenav ul li{ 
	display:inline-block; 
	position:relative; 
	line-height:normal;
	margin-right:5px;
}
.sitenav ul li a{
	padding:20px 15px; 
	display:block; 
	text-align:center; 
	color:#fff; 
	position:relative; 
	transition:0.5s all;
	text-decoration: none;
}
.sitenav ul li ul li a:hover{
	color:#000 !important; /*check important*/
}

.sitenav ul li:hover ul li:hover, .sitenav ul li:hover ul li{
	background-color:#fff !important; /*check important*/
}

/* = Navigation hover and active menu css
-------------------------------------------------------------- */
.header_right{ 
	float:right; 
	margin:15px 0;
}
.header_right a{ 
	background-color:green;
	color:#ffffff;
	text-transform:uppercase;
	padding:14px 20px; 
}
.header_right a:hover{
	background-color:pink;
}

@media screen and (min-width: 800px) and (max-width: 1159px) {
    .container {
        width: 95%;
    }
    .header .header-inner {
        width: 95%;
    }
	.sitenav ul{
		font-size:12px;
	}
	.sitenav ul li:hover > ul{
		top:52px;
	}
	#navigation{
		width:auto;
	}
}

@media screen and (min-width: 800px) {
/* = Navigation 2nd level css
All non tablet devices
-------------------------------------------------------------- */
.toggle{
	display: none;
}
.sitenav ul li ul li {
        display: block;
        position: relative;
        float: none;
    }
.sitenav ul li ul li a {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px #313131 solid;
    }
.sitenav ul li ul {
	color: #fff;
	opacity: 0;
	padding:0;
	position: absolute;
	right: 9999rem;
	top: calc(100% + 2rem);
	transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
	transform: translateY(0.6rem);
	width: 20rem;
	z-index: 1;
}
.sitenav ul li.menu-item-has-children:hover > ul,
.sitenav ul li.menu-item-has-children:focus > ul,
.sitenav ul li.menu-item-has-children.focus > ul {
	left: 0;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.15s linear, transform 0.15s linear;
	background-color:#4f6dcd;
	top:49px;
}

.sitenav ul li ul li{
	display:block; 
	position:relative; 
	float:none; 
	top:1px; 
	line-height:18px; 
	margin-left:0;
	margin-right:0; 
}
.sitenav ul li ul li a{
	display:block; 
	padding:10px; 
	position:relative; 
	top:0; 
	text-align:left;
}

/* = Navigation 3rd level css
-------------------------------------------------------------- */
.sitenav ul li:hover ul li:hover > ul,
.sitenav ul li:hover ul li:focus > ul{
	display:block; 
	position:absolute; 
	left:200px; 
	top:-1px; 
	-moz-animation: fadeInRight .3s ease-in-out; 
	-webkit-animation: fadeInRight .3s ease-in-out; 
	animation:fadeInRight .3s ease-in-out; 
}
.sitenav ul li.menu-item-has-children.focus ul li.menu-item-has-children.focus ul {
	left:inherit !important; 
	top:-1px !important;
	right: -174px !important;
}
}


/*RESPONSIVE CSS*/
@media screen and (max-width: 800px) {
	/*Styling for menu on all tablet and mobile devices*/
	.toggle{
		display: block;
	}
	.toggleMenu /*Menu button on mobile*/ {
		background-color: #000 !important;
		border-color: #000;
		border: 2px solid;
	}
	a.toggleMenu {
		 font-weight: 700 !important;
		 padding-left: 1.5em;
		}
	.toggle a{
		width:auto; 
	   	padding:10px 25px; 
		/*margin-top:5px;*/
		margin-bottom: 5px;
		font-size:1em;
		text-align:left;
		text-decoration: none;
	}
	.menubars {
		right: 1.5em;
		padding-top: 3px;
		position: absolute;
	}
	.sitenav ul {
		background: #fff;
		width: 100%;
		margin: 0 auto;
		font-weight: 700;
		}
	.menu-main-menu-container {
		float: none !important;
	}
	li.menu-item:first-child {
		border-top: none !important;
	}
	li.menu-item {
		border-color: #000 !important;
	}
	li.menu-item:last-child {
		border-bottom: 2px solid;
	}
	.menu-item a {
			padding: 5px 1.5em !important;
	}
	
	.sitenav ul li a /*pick nav link colour*/ {
		color: yellow;
	}
	.sitenav ul li a:hover /*and hover colour - check important mod*/ {
		color: red !important;
	}
	.sitenav ul li:hover /*sitenav background colour on hover*/{
		background-color: #F3BB9B !important;
	}
}

@media screen and (max-width: 800px) and (min-width: 720px) {
		.top-head-box .top-head-box-text{
		font-size:10px;
	}
    .header {
        position: inherit !important;
        padding:15px 0;
    }
    .header .header-inner {
        width: 95%;
    }
	.header_right{
		float:right;
	}
    .logo {
        float: left;
    }
    .sitenav {
        display: none;
		float:none;
    }
    #navigation{
		width:auto;
		background-color: transparent !important;
		position:relative !important;
	}
    .sitenav ul {
        background: #000000;
        color: #000;
        width: 100%;
        float: none;
        margin-top: 0;
    }
    .sitenav ul li {
        border-top: 1px #303030 solid;
        display: block;
        float: none;
        text-align: left;
    }
	.sitenav ul li ul {
		color: #fff;
		opacity: 0;
		padding:0;
		position: absolute;
		right: 9999rem;
		top: calc(100% + 2rem);
		transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
		transform: translateY(0.6rem);
		width: 20rem;
		z-index: 1;
	}
	.sitenav ul li.menu-item-has-children:hover > ul,
	.sitenav ul li.menu-item-has-children:focus > ul,
	.sitenav ul li.menu-item-has-children.focus > ul {
		left: 0;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.15s linear, transform 0.15s linear;
		background-color:#303030;
		top:0;
		position: relative;
	}
    .sitenav ul li a {
        padding: 5px 10px;
        display: block;
        color: #ffffff !important;
		text-align:left;
    }
    .sitenav ul li a:hover {
        color: #ffffff !important;
    }
    .sitenav ul li ul li a:before {
        content: "\00BB \00a0";
    }
    .sitenav ul li ul li a {
        padding-left: 20px !important;
    }
    .sitenav ul li ul li ul li a {
        padding-left: 30px !important;
    }
	.sitenav ul li:hover,
	.sitenav ul li.current_page_item{
		background-color:inherit !important;
	}
}
/* Mobile Landscape View */

@media screen and (max-width: 719px) and (min-width: 480px) {
		.top-header{ 
		line-height:30px; 
		text-align:center; 
		padding:15px 0; 
	}
	.top-head-box{
		display:block;
		width:100%;
	}
	.top-head-box:first-child,
	.top-head-box:last-child{
		text-align:inherit !important;
	}
	/* Header Css */
    .header {
        position: inherit !important;
        padding: 15px 0;
    }
    .header .header-inner {
        width: 95%;
		text-align:center;
    }
    .logo {
        float: none;
        text-align: center;
		margin-bottom:30px !important;
    }
	.header_right{ 
		width:auto; 
		float:none; 
		padding:0;
		text-align:center;
	}
    .sitenav {
        display: none;
		margin-top:0;
		width:100%;
    }
    #navigation {
        width:auto;
		background-color:transparent !important;
		position:relative !important;
    }
    .sitenav ul {
        background: #000000;
        color: #000;
        width: 100%;
        float: none;
        margin-top: 0;
    }
    .sitenav ul li {
        border-top: 1px #303030 solid;
        display: block;
        float: none;
        text-align: left;
    }
	.sitenav ul li ul {
		color: #fff;
		opacity: 0;
		padding:0;
		position: absolute;
		right: 9999rem;
		top: calc(100% + 2rem);
		transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
		transform: translateY(0.6rem);
		width: 20rem;
		z-index: 1;
	}
	.sitenav ul li.menu-item-has-children:hover > ul,
	.sitenav ul li.menu-item-has-children:focus > ul,
	.sitenav ul li.menu-item-has-children.focus > ul {
		left: 0;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.15s linear, transform 0.15s linear;
		background-color:#303030;
		top:0;
		position: relative;
	}
    .sitenav ul li a {
        padding: 5px 10px;
        display: block;
        color: #ffffff !important;
		text-align:left !important;
    }
    .sitenav ul li a:hover {
        color: #ffffff !important;
    }
    .sitenav ul li ul,
    .sitenav ul li ul ul {
        display: block !important;
    }
    .sitenav ul li ul li a:before {
        content: "\00BB \00a0";
    }
    .sitenav ul li ul li a {
        padding-left: 20px !important;
    }
    .sitenav ul li ul li ul li a {
        padding-left: 30px !important;
    }
	.sitenav ul li.current_page_item a{
		background-color:transparent !important;
	}
	.sitenav ul li:hover,
	.sitenav ul li.current_page_item{
		background-color:inherit !important;
	}
}

@media screen and (max-width: 479px) {
		.top-header{ 
		line-height:30px; 
		text-align:center; 
		padding:15px 0; 
	}
	.top-head-box{
		display:block;
		width:100%;
	}
	.top-head-box:first-child,
	.top-head-box:last-child{
		text-align:inherit !important;
	}
    .header {
        position: inherit !important;
        padding: 15px 0;
    }
    .header .header-inner {
        width: 95%;
		text-align:center;
    }
    .logo {
        float: none;
        text-align: center;
		margin-bottom:30px !important;
    }
	.header_right{ 
		width:auto; 
		float:none; 
		padding:0;
		text-align:center;
	}
	#navigation{
		width:auto;
		background-color:transparent !important;
		position:relative !important;
	}
    .sitenav {
        display: none;
		margin-top:0;
		width:100%;
    }
    .sitenav ul {
        background: #000000;
        color: #000;
        width: 100%;
        float: none;
        margin-top: 0;
    }
    .sitenav ul li {
        border-top: 1px #303030 solid;
        display: block;
        float: none;
        text-align: left;
    }
	.sitenav ul li ul {
		color: #fff;
		opacity: 0;
		padding:0;
		position: absolute;
		right: 9999rem;
		top: calc(100% + 2rem);
		transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s;
		transform: translateY(0.6rem);
		width: 20rem;
		z-index: 1;
	}
	.sitenav ul li.menu-item-has-children:hover > ul,
	.sitenav ul li.menu-item-has-children:focus > ul,
	.sitenav ul li.menu-item-has-children.focus > ul {
		left: 0;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.15s linear, transform 0.15s linear;
		background-color:#303030;
		top:0;
		position: relative;
	}
    .sitenav ul li a {
        padding: 5px 10px;
        display: block;
        color: #ffffff !important;
		text-align:left;
    }
    .sitenav ul li a:hover {
        color: #ffffff !important;
    }
    .sitenav ul li ul,
    .sitenav ul li ul ul {
        display: block !important;
    }
    .sitenav ul li ul li a:before {
        content: "\00BB \00a0";
    }
    .sitenav ul li ul li a {
        padding-left: 20px !important;
    }
    .sitenav ul li ul li ul li a {
        padding-left: 30px !important;
    }
	.sitenav ul li.current_page_item a{
		background-color:transparent !important;
	}
	.sitenav ul li:hover,
	.sitenav ul li.current_page_item{
		background-color:inherit !important;
	}
}