@media screen{

	body, html {    
    	overflow-x: visible;        
	}

	body{
		color : #3f3f3f;
  	 	font-family: 'Nunito', sans-serif;
		font-size : 1em;
		margin:0 auto;
		padding:0;
		height:100%;
	}
	
	*{
   		margin: 0;
    	box-sizing: border-box;
	}

	h1, h2, h3, h4{
	
	    font-family: 'Ubuntu', sans-serif;
		padding: 5px;
		color:black;
	}

	p{
		margin:5px 0;
		padding: 5px;
	}
	
	ul{
		padding-top:5px;
		padding-bottom:10px;
	}

	hr{
		clear:both;
	}
	
	img{
		border:none;
		max-width:100%;
		height:auto;

	}
	
	a{
		text-decoration:none;
	}

	.wp-block-image {
    background: #fff;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 0;
	font-size: 0.85em;
	}
	
	figcaption{
		text-align:center;
	}
	
	[class*="col-"] {
   		float: left;
    	/*padding: 5px;*/
	}

	.row::after {
    	content: "";
    	clear: both;
    	display: table;
	}

	.clearboth{
		clear:both;
	}

	/* The sticky class is added to the header with JS when it reaches its scroll position */
	.sticky {
		position: fixed;
		top: 0;
		width: 100%
	}

	/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
	.sticky + .contentrow {
		padding-top: 102px;
	}
	
	.container{
		margin:auto;
	}
	
	/* HEADER */
	header{
		position:sticky;
		top:0;
		background: white;
		z-index:10;
  		margin-bottom: 0px;
	}
	
	header + * {
		margin-top: 0px;
	}	
	
	#header-logo{
		background-color:#fff;
		padding:10px;
		float:left;
	}
	
	.logo{
		/*padding:5px 5px 5px 0;*/
	}
	
	
	/* MAVIGATION */
	
	.mainmenu{
		background-color:#fff;
	}
	
	nav{
		/*background-color:#865B36;*/
	    font-family: 'Ubuntu', sans-serif;
		z-index:20;
		/*width: 100%;*/
	}
	
	nav a{
		color: #5b5b5b;
		list-style:none;
	}

	nav a:hover, .megamenu .dropbtn:hover{
		color: #fff;
		background-color:#8b572a;
	}
	
  	
	.megamenu .dropbtn {
		padding:0;
		display:block;
		border:none;
  		outline: none;
  		background-color: inherit;
  		font: inherit; /* Important for vertical align on mobile phones */
  		margin: 0; /* Important for vertical align on mobile phones */
  		width:100%;
  		text-align:left;
		position: relative;
	}

	.drop-icon-fix{
		margin-right:3px;
	}
	
	/* PAGINATION BAR */
	nav.pagination{
		background-color: #865B36;
    	color: #ffffff;
	}
	
	nav.pagination a{
		color: #fff !important;
    	width: 100px;
    	padding: 0 10px;
    	text-align: center;
    	text-decoration: none;
    	line-height: 40px;
    	font-weight: normal;
    	letter-spacing: 1px;
	}
	
	/*RESPONSIVE NAVBAR MENU STARTS */
	/* CHECKBOX HACK */
	input[type=checkbox]{
		 display: none;
	} 
	
	/*HAMBURGER MENU*/
	.hamburger {
		font-size: 44px;
		user-select: none;
	}


	/* CONTENT AREA - GENERAL STYLES */
	
	#content{
		clear:both;
		overflow:hidden !important; /* overflow added to stop menu being pushed upwards*/
	}

	#content a{
		font-weight:bold;
		text-decoration:none;
		color: #0267bd;
	}
	
	#content a:hover{
		color:#8db1cf;
	}

	#content a.readmorebtn{
		background-color: #455868;
		color: white;
		padding: 5px;
		margin-top:10px;
		text-shadow: 1px 1px 0px #283744;
	}
	
	#content a.readmorebtn:hover{
		background-color: #8c99a4;
	}

	/* CONTENT - HOMEPAGE */
	
	#homepage-latest-posts{
		background-color: #e5f7f7;
	}
	
	#homepage-derbyshire-posts{
		background-color: #d2ecd2;
	}
	
	#homepage-blackpool-posts{
		background-color: #fdf6eb;
	}
	
	#homepage-prague-posts{
		background-color: #eaf1ff;
	}
	
	.landing-post, .landing-post-main{
		padding:5px;
	}
	
	.landing-post-image{
		position: relative;
	}
	
	.landing-post-details{
		position: absolute;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: white;	
		background-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    	padding: 20px 10px;
	}
	
	.landing-post-title span{
		font-size: 2em;
	}
	
	.landing-post h3{
		padding:10px 0;
	}

	.landing-post-main h3{
		padding: 0 10px;
	}
	
	.landing-post-text p{
		padding:5px 0;
	}
	
	
	/* CONTENT - POST */

	/* FOOTER */
	footer{
		color:#ffffff;	
	}
	
	footer a{
		color:#fff;
	}
	
	footer ul{
		margin:0;
		padding:5px;
		list-style:none;
	}
	
	#footer-main{
		background-color:#442e1c;
		font-size:0.9em;
	}
	
	#footer-copyright, #footer-social{
		padding:5px;
	}
	
	#footer-copyright{
		background:black;
		font-size:0.8em;
	}
	
	#footer-social{
		font-size:2em;
	}
	
}

@media screen and (min-width : 320px){

	.logo{
		height:auto;
	}

	.mainmenu{
		clear:both;
	}

}

/*  600px and below  */
@media only screen and (max-width : 600px) {  
/*
	[class*="col-"] {
    	width: 100%;
	}
	
    .col-m-1 {width: 8.33% !important;}
    .col-m-2 {width: 16.66% !important;}
    .col-m-3 {width: 25% !important;}
    .col-m-4 {width: 33.33% !important;}
    .col-m-5 {width: 41.66% !important;}
    .col-m-6 {width: 50% !important;}
    .col-m-7 {width: 58.33% !important;}
    .col-m-8 {width: 66.66% !important;}
    .col-m-9 {width: 75% !important;}
    .col-m-10 {width: 83.33% !important;}
    .col-m-11 {width: 91.66% !important;}
    .col-m-12 {width: 100% !important;}


*/
}

@media only screen and (min-width : 600px){
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (max-width: 767px) {

	[class*="col-"] {
    	width: 100%;
	}
	
    .col-m-1 {width: 8.33% !important;}
    .col-m-2 {width: 16.66% !important;}
    .col-m-3 {width: 25% !important;}
    .col-m-4 {width: 33.33% !important;}
    .col-m-5 {width: 41.66% !important;}
    .col-m-6 {width: 50% !important;}
    .col-m-7 {width: 58.33% !important;}
    .col-m-8 {width: 66.66% !important;}
    .col-m-9 {width: 75% !important;}
    .col-m-10 {width: 83.33% !important;}
    .col-m-11 {width: 91.66% !important;}
    .col-m-12 {width: 100% !important;}

	.container{
		width:95%;
	}
	
	.mainmenu { 
		 display:none;
		 right: 0;
		 left: 0;
	}

	header{
		border-bottom:1px solid #a3a3a3;	
	}

	nav a{
		padding:7px 10px;
		display:block;
	}
	

	.megamenu{
		border-top:1px solid #a3a3a3;
	}
	
	.megamenu .drop-icon {
		line-height: 0;
	}
	
	.megamenu .megamenu-content{
		display:none;
	}

	.megamenu input[type="checkbox"]:checked + .megamenu-content {
		display: block;
  	}
  	

	.megamenu label.drop-icon{
		height: 1em;
		text-align: center;
		background-color: #000;
		color: #fff;
		padding: 17px 10px;
		font-size:30px;
	}

	.megamenu label.drop-icon:hover{
		background-color: #fff;
		color: #000;
	}

	.megamenu .drop-icon, 
	.megamenu label.drop-icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	a.menu-level-1, a.menu-level-1-dropbtn{
		font-size:1em;
		font-weight:bold;
	}

	a.menu-level-1{
		border-top:1px solid #a3a3a3;
	}

	a.menu-level-1-dropbtn{
		padding:7px 10px;
	}

	a.menu-level-2{
		font-size:0.9em;
		padding-left:20px;
		font-weight:bold;
	}

	a.menu-level-3{
		font-size:0.85em;
		padding-left:30px;
	
	}
	
	input[type=checkbox]:checked ~ .mainmenu,
		#checkbox_toggle_submenu input[type=checkbox]:checked ~ .mainmenu li ul,
		#checkbox_toggle_submenu input[type=checkbox]:checked ~ ul
	{
 		display: block;
	}

	.hamburger {
 		display: block;
		 text-align:right;
		 padding-top:0px;
	}

}

@media only screen and (min-width: 768px) {

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

/*}

@media only screen and (max-width: 992px) {

	input[type=checkbox]:checked ~ .mainmenu,
	#checkbox_toggle_submenu & input[type=checkbox]:checked ~ .mainmenu li ul,
	#checkbox_toggle_submenu:checked ~ .submenu
	{
		 display: block;
	}


	.hamburger {
		 display: block;
		 text-align:right;
		 padding-top:0px;
	}

}

@media only screen and (min-width: 993px) {
*/
	
	header{
		border-bottom: #dfd6cf 1px solid;
	}

	.container{
		width:80%;
	}
	
	.hamburger{
		display: none;
	}

	.mainmenu{	

	}
	
	.mainmenu a{
		padding: 20px 12px 25px;
		float:left;
	}

	.megamenu{
		float:left;
		overflow: hidden;
	}

	.megamenu .drop-icon {
		line-height: 1;
	}
	
	.megamenu .megamenu-content{
		display: none;
    	position: absolute;
		width:100%;
		left:0;
  		z-index: 1;
  	}
  	
  	.megamenu-content-container{
		margin: auto;
		width: 80%;
		background-color:white;
		border-left: #dfd6cf 1px solid;
    	border-right: #dfd6cf 1px solid;
    	border-bottom: #dfd6cf 1px solid;
    	border-top: #fff 1px solid;
  	}

	.megamenu:hover .megamenu-content {
		display: block;
	}
	
	.megamenu-box{
		float:left;
		width:16.66%;

	}
	
	.megamenu-box a{
		display: block;
		float:none;
	}
	
	a.menu-level-1{
		font-size:1em;
	}

	a.menu-level-1-dropbtn{
		padding: 20px 30px 25px 12px;
	}

	a.menu-level-2{
		font-size:0.9em;
		font-weight:bold;
		padding: 5px 12px;
	}

	a.menu-level-3{
		font-size:0.85em;
		padding: 5px 12px;
	}

	.megamenu .drop-icon, 
	.megamenu label.drop-icon {
		position: absolute;
		right: 0.7em;
		top:1.35em;
	}
	
	/* Clear floats after the columns */
	.megamenu-content-container:after {
  		content: "";
  		display: table;
  		clear: both;
	}
	
}