@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700');
body {
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
}
.row {
	margin-right: -5px;
	margin-left: -5px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, 
.col-3, .col-4, .col-5, .col-6, .col-7, .col-8, 
.col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, 
.col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, 
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, 
.col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, 
.col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, 
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, 
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, 
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, 
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, 
.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, 
.col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, 
.col-xl-8, .col-xl-9, .col-xl-auto {
	padding-right: 5px;
	padding-left: 5px;
}

/******************************
* Change the Background Image from here.
* Just put your Image name in 'url' attribute.
******************************/
.wrapper {
	background: url(https://craig.mayhew.io/imgs/bg.jpg) no-repeat fixed center center / cover;
	position: relative;
	min-height: 100vh;
}

/******************************
* For changing the background opacity 
* Please change the "opacity" attribute below
******************************/
.overlay:after{
	background-color: rgb(31, 34, 35);
	opacity: .78;
	content: '';
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
}

/******************************
* Those are the Box color. 
* To Create a new Box color, Just 
* Copy One of this. 
* Give a class name.
* Use the class name on Box.
******************************/
.royal_blue {
	background-color: #2b83ed;
	background-clip: content-box;
}
.maroon_flush {
	background-color: #b71c44;
	background-clip: content-box;
}
.crusta {
	background-color: #fe852c;
	background-clip: content-box;
}
.purple_heart {
	background-color: #5434af;
	background-clip: content-box;
}
.charcoal {
	background-color: #36454f;
	background-clip: content-box;
}

/******** Box Color End *********/

.container {
	display: block;
	max-width: 980px;
	width: 100%;
}
.homeContent,
.postBox,
.page_title,
.copyText {
	position: relative;
	z-index: 2;
}
.blockThumb {
	position: relative;
	overflow-y: hidden;
}
.blockThumb img {
	width: 100%;
	display: block;
	max-width: 100%;
}
.blockThumb h4 {margin: 0}
.blockThumb h4 a {
	font-size: 16px;
	line-height: 18px;
	color: #fff;
	font-weight: 600;
	position: absolute;
	top: 38px;
	left: 23px;
	margin-right: 6px;
	max-width: 240px;
	text-transform: uppercase;
}
.blockThumb h4 a span {text-transform: lowercase;}
.blockThumb h4 a::after {
	content: '\f105';
	position: absolute;
	top: 0px;
	right: 0;
	font-family: fontAwesome;
	width: 18px;
	height: 18px;
	line-height: 15px;
	border: 1px solid;
	border-radius: 50%;
	text-align: center;
	transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
}
.blockThumb h4 a:hover:after {right: -5px;} 
.page_title,
.page_title a {
	font-size: 39px;
	font-weight: 400;
	color: #fff;
	line-height: 50px;
	padding: 45px 0 33px;
	margin: 0;
}
.page_title a:hover {text-decoration: none;}
.block {
	padding: 19px 17px;
}
.blockFullHeight {
	padding: 0 23px;
}
.block i {
	font-size: 33px;
	text-align: center;
	display: block;
	padding: 11px 0 6px;
}
.block img {
	margin: auto;
	display: block;
	padding: 11px 0 6px;
}
.block h4 {
	font-size: 16px;
	line-height: 18px;
	color: #fff;
	font-weight: 600;
}
.block p {
	font-size: 11px;
	line-height: 14px;
	margin: 5px 0;
}
.block a {
	font-size: 13px;
	color: #fff;
	font-weight: 600;
}
.block a i.fa-angle-right{
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 1px solid #fff;
	border-radius: 50%;
	padding: 0;
	vertical-align: middle;
	margin-left: 5px;
	font-size: 15px;
	position: relative;
	right: 0;
	transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
}
.block a:hover {
	text-decoration: none;
}
.block a:hover i {
	right: -5px;
}
.block.video {
	padding: 0;
	height: auto;
}
.block iframe {
	width: 100%;
	height: 100%;
}
.right_block .royal_blue .block h4 {
	line-height: 19px;
	margin-top: 8px;
	margin-bottom: 0;
	text-transform: uppercase;
}
.right_block .block img {
	margin: auto;
	display: block;
	padding: 8px 0 6px;
}
.padRgt-6 {
	padding: 19px 6px 19px 17px;
}
.blockWithThumb {
	padding-top: 14px;
	padding-bottom: 15px;
}
.blockWithThumb span {
	display: inline-block;
	float: left;
	margin-right: 18px;
}
.blockWithThumb span img {
	padding: 0;
}
.mb10 {margin-bottom: 10px;}
.mb5 {margin-bottom: 5px;}
.social_icons a {
	width: 70px;
	height: 70px;
	display: inline-block;
	text-align: center;
	color: #fff;
	font-size: 25px;
	line-height: 70px;
}
.social_icons a:nth-child(1), 
.social_icons a:nth-child(2) {
	margin-bottom: 10px;
} 
.social_icons a:nth-child(odd) {
	margin-right: 5px;
}
.social_icons a.github{background-color: #24292e;}
.social_icons a.twitter{background-color: #40bff5;}
.social_icons a.linkedin{background-color: #0077B5;}
.social_icons a.twitch{background-color: #4b367c;}
.copyText {margin-top: 75px}

.postBox {
	position: relative;
	background-color: #fff;
	margin-bottom: 15px;
}
.postHead h2 {
	color: #1b1b1b;
	font-size: 26px;
	line-height: 26.2px;
	font-weight: 700;
	margin: 0;
}
.postHead {
	color: #1b1b1b;
	border-bottom: 1px solid #dedede;
	position: relative;
	padding: 25px 82px 7px;
	margin-bottom: 17px;
}
.postBody {
	padding: 0 82px 95px;
	color: #373737;
}
.postBody h3 a{
	text-decoration:none;
	color: #1b1b1b;
}
.postBody h3 a:hover{text-decoration:none;}

.postBody p,
.postBody ol li {
	font-size: 15px;
	line-height: 2em;
}
.postBody img {
	width: 100%;
	display: block;
	height: auto;
	margin-bottom: 22px;
}
.postHead span {
	font-size: 15px;
	line-height: 26.2px;
	display: block;
}
.date {
	position: absolute;
	left: 0;
	top: 0;
	background: #0179B6;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 24px;
	padding: 15px 8px;
	text-align: center;
	height: 100%;
}
.date span {
	font-size: 50px;
	line-height: 26px;
	margin-bottom: 10px;
}

.sharePost {
	background-color: #16283E;
	position: absolute;
	right: 100%;
	top: 84px;
	padding: 30px 12px 27px;
}
.sidebar {
	position: absolute;
	right: 0;
	top: 128px;
	background: rgba(26, 31, 31, .80);
	z-index: 1;
	max-width: 273px;
	width: 100%;
	padding: 33px 59px 51px;
}
.widget {
	margin-bottom: 28px;
}
.widget h3 {
	font-size: 25px;
	font-weight: 400;
	color: #fff;
}
.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.widget li {
	position: relative;
	padding-left: 18px;
	transition: .5s;
	-ms-transition: .5s;
	-webkit-transition: .5s;
}
.widget li::after {
	content: '';
	background-image: url(https://craig.mayhew.io/images/arrow.png);
	left: 0;
	top: 50%;
	position: absolute;
	width: 7px;
	height: 7px;
	transform: translateY(-50%);
}
.widget li a {
	font-size: 15px;
	color: #fff;
	line-height: 35px;
}
.widget li:hover {padding-left: 20px;}
.widget li:hover a{text-decoration:none;}
.backHome {
	display: block;
	font-size: 17px;
	color: #fff;
	position: relative;
	padding-left: 45px;
	margin-top: 62px;
}
.backHome:before {
	position: absolute;
	content: '';
	background-image: url(https://craig.mayhew.io/images/round-arrow.png);
	width: 33px;
	height: 33px;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: .3s;
	-ms-transition: .3s;
	-webkit-transition: .3s;
}
.backHome:hover {
	color: #fff;
	text-decoration: none;
}
.backHome:hover:before {
	left: -5px;
}

.height150 {
	height: 150px;
}
.height70 {
	height: 70px;
}

/* youtube responsive resize */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
	
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/****** Responsive ******/
@media screen and (max-width: 1100px) {
	.sharePost {
		width: 100%;
		right: 0;
		top: auto;
		bottom: 0;
		padding: 20px 12px 15px;
		text-align: center;
	}
	.sharePost li {
		margin-bottom: 0;
		display: inline-block;
		margin-right: 10px;
		margin-left: 10px;
	}
}
@media screen and (max-width: 1023px) {
	.sidebar {
		max-width: 25%;
		padding: 33px 32px 51px;
	}
}
@media screen and (max-width: 991px) {	
	.widget h3 {
		font-size: 21px;
	}
	.widget li a {
		font-size: 13px;
		line-height: 30px;
	}
	.postHead {
		padding: 25px 65px 7px;
	}
	.postBody {
		padding: 0 65px 90px;
		color: #373737;
	}
	.postHead span {
		font-size: 13px;
	}
	.date {
		font-size: 12px;
	}
	.date span {
		font-size: 30px;
	}
	.backHome {
		font-size: 14px;
		padding-left: 38px;
		margin-top: 42px;
	}
	.block.video, .block iframe {
		height: 100%;
	}
	.homeContent .col-sm-6,
	.homeContent .col-sm-3{
		margin-bottom: 10px;
	}
	.mb5 {margin-bottom: 10px;}
	.social_icons {margin-top: 10px;}
	.social_icons a {
		width: 49px;
		height: 49px;
		line-height: 49px;
		margin-right: 10px;
	}
	.social_icons a:nth-child(2n+1) {margin-right: 10px}
	.right_block .royal_blue .block h4 {text-align: center}
}
@media screen and (max-width: 767px) {
	.sidebar {
		position: relative;
		top: 0;
		max-width: 100%;
		width: 100%;
	}
	.block h4 {font-size: 15px;}
}
@media screen and (max-width: 639px) {
	.page_title,
	.page_title a{font-size: 32px}
	.postHead h2 {font-size: 20px}
	.postHead span {
		font-size: 13px;
		line-height: 18px;
	}
	.date span {font-size: 30px}
}
@media screen and (max-width: 575px) {
	.social_icons {text-align: center}
	.left_block .col-sm:first-child,
	.right_block .col-sm:first-child{margin-bottom: 10px}
}
@media screen and (max-width: 479px) {
	.page_title,
	.page_title a {font-size: 29px}
	.postHead {padding: 15px 15px 15px 65px}
	.postHead h2 {
		font-size: 17px;
		line-height: 21.2px;
	}
	.postHead span {
		font-size: 12px;
		line-height: 14px;
	}
	.date span {font-size: 24px}
	.postBody {padding: 0 15px 90px}
}
@media screen and (max-width: 360px) {
	.block h4 {font-size: 14px}
	.sharePost li {
		margin-right: 5px;
		margin-left: 5px;
	}
}