/*
Theme Name: Jennulator 2018
Description: Styles for the.jennula.com
Author: Jenny Hannula
Author URI: http://www.jennula.com
Template: x-portfolio
*/
/* Imports the original x-portfolio css */
@import url("../x-portfolio/style.css");
@import url("https://fonts.googleapis.com/css?family=Covered+By+Your+Grace");

a{
	color: #FF3588 !important;
}
a:hover{
	text-decoration: underline !important;
}
h1, .grid-item .title{
	font-family: 'Covered By Your Grace';
}

[class*='col-']{
	padding-left:10px;
}
.single .entry-header h1{
	font-size:2em;
	text-transform: none;
}
.widget-area input[type="submit"] {
		background: #FF3588;
		color: #fff;
	}
.widget-area input, .widget-area select{
		border-color: #FF3588;
	}
	.widget-area input[type="submit"]:hover {
		background: #FF86B8;
		border-color: #FF86B8;
		color: #fff;
	}
		.widget-area input, .widget-area select{
		height: 32px;
	}
	.widget{
		margin: 0 0 1em;
	}
	.post-pagination h4{
		border-color: #FF3588;
		border-radius: 8px;
	}
	.post-navigation .nav-previous, .post-navigation .nav-next{
		border-color: #FF3588;
		width:auto;
	}
	.post-navigation .nav-previous a, .post-navigation .nav-next a{
				border-radius: 8px;
	}
	#site-navigation{
		padding: 1em 0;
	}
	.kofi_top{
		display: none;
	}
	#secondary ul li{
		border-bottom: none;
		padding: 0.25em 0 0.25em 0;
	}
	.widget-title{
		margin-bottom: 0;
	}
	.grid-item .overbox{
		width:90%;
		padding: 0 5%;
	}
	#page{
		background: #fff;
	}
	#colophon{
		background: #0F7C62;
	}
	#colophon  .footerSocialMedia a{
		color: #fff !important;
		text-decoration: underline;
	}
	.site-footer .site-info p{
		color: #fff;
	}
	
@media only screen and (min-width : 768px) {
	.widget{
		margin: 0 0 2.5em;
	}
	.kofi_top{
		display: block;
	}
	.single .entry-header h1{
		font-size:50px;
		line-height: 50px;
	}
	.col-10-12{
		width: 75%;
		padding-right:10px;
	}
	.col-1-6, .col-2-12{
		width: 25%;
		padding-left:10px;
	}
	.widget-area input[type="submit"] {
		width: 37%;
		float: right;
	}
	.widget-area .search-field{
		width: 60%;
	}
}

@media only screen and (min-width : 1179px) {
	body{
		background-color: #00BD91;
		background-image: url('img/left.jpg'), url('img/right.jpg');
		background-position: top left, top right;
		background-repeat: no-repeat;
	}
	#page{
		box-shadow: 0 0 24px rgba(0,0,0,.2);
	}
	#colophon{
		box-shadow: 0 -2px 24px rgba(0,0,0,.2);
	}
}