/*
 * 	Globals
 */


body {
  	font-family: 'Roboto Mono', Courier, Helvetica, sans-serif;
  	background-color: #FFFFFF;
  	color: #4B4B4B;
}

h1, .h1 {
  	margin-top: 0;
  	font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
  	font-weight: 700;
  	color: #353535;
}

h2, .h2 {
  	margin-top: 0;
  	font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
  	font-weight: 700;
  	color: #CAD2D4;
}

img {
	width: calc(100% + 30px);
	max-width: 576px;
	margin-right: -15px;
	margin-left: -15px;
	margin-bottom: 15px;
	border-radius: 0px;
}

@media (min-width: 576px) {
  img {
  	width: calc(100% + 50px);
  	max-width: 650px;
  	margin-right: -25px;
	margin-left: -25px;
    border-radius: 8px;

  }
}

ul {
  margin: 0px 0px 25px 0px;
  padding-left: 15px;
}

li {
  margin: 0px;
  padding: 0px;
}


/*
 * 	Header
 */

.blackbox {
	background-color: #353535;
	color: #CAD2D4;
	border: 1px solid #353535;
	border-radius: 0px;
	padding: 15px;
	text-decoration: none;
	margin-bottom: 50px;
}

@media (min-width: 576px) {
  .blackbox {
    border-radius: 14px;
    margin-top: 50px;
	margin-bottom: 70px;
	padding-right: 25px;
	padding-left: 25px;
  }
}

.blackbox a {
	color: #CAD2D4;
	text-decoration: none;
}

.blackbox a:hover {
	background-color: #000000;
	color: #CAD2D4;
	text-decoration: none;
}


.blog-title {
	font-family: 'Roboto Mono', Courier, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #CAD2D4;
	line-height: 21px;
	text-decoration: none;
}

.blog-title a {
	font-family: 'Roboto Mono', Courier, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #CAD2D4;
	line-height: 21px;
	text-decoration: none;
}

.blog-title a:hover {
	font-family: 'Roboto Mono', Courier, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #CAD2D4;
	line-height: 21px;
	text-decoration: none;
}

.cursor {
	margin-left: 3px;
	padding-right: 1px;
	padding-top: 0px;
	background-color: #CAD2D4;
	border-radius: 1px;
	font-size: 16px;
	line-height: 16px;
}


/*
 * Blogpost
 */

 .blog-post {
 	padding-left: 15px;
  	padding-right: 15px;
 }

 @media (min-width: 576px) {
  .blog-post {
 	padding-left: 25px;
  	padding-right: 25px;
  }
}

.blog-post-title {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 700;
  	letter-spacing: -1.5px;
  	-webkit-font-smoothing: antialiased;
  	color: #353535;
  	margin-bottom: 35px;
  	font-size: 30px;
}

.blog-post-title a {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 700;
  	-webkit-font-smoothing: antialiased;
  	color: #353535;
  	margin-bottom: 35px;
  	text-decoration: none;
}

.blog-post-title a:hover {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 700;
  	-webkit-font-smoothing: antialiased;
  	color: #000000;
  	margin-bottom: 35px;
  	text-decoration: none;
}

.blog-post-text .blog-post-subtitle {
	font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 500;
  	letter-spacing: -1.5px;
  	-webkit-font-smoothing: antialiased;
  	color: #CAD2D4;
  	margin-top: -30px;
  	margin-bottom: 35px;
  	font-size: 20px;
}

.blog-post-text {
 	font-family: 'Roboto Mono', 'Courier', 'Helvetica', sans-serif;
 	-webkit-font-smoothing: antialiased;
	color: #4B4B4B;
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
 }


.blog-post-text a {
	color: #4B4B4B;
	text-decoration: none;
  	background-color: #F2E39B;
  	padding: 1px 5px;
  	border-radius:2px 2px 2px 2px;
  	-moz-border-radius:2px 2px 2px 2px;
  	-webkit-box-decoration-break: clone;
  	box-decoration-break: clone;
 }


.blog-post-text a[href^="http://julian.digital"] {
	color: #4B4B4B;
	text-decoration: none;
  	background-color: #CAD2D4;
  	padding: 1px 5px;
  	border-radius:2px 2px 2px 2px;
  	-moz-border-radius:2px 2px 2px 2px;
  	-webkit-box-decoration-break: clone;
  	box-decoration-break: clone;
 }

.blog-post-text a:hover {
	color: #353535;
	text-decoration: none;
  	background-color: #DDD3A5;
  	padding: 1px 5px;
  	border-radius:2px 2px 2px 2px;
  	-moz-border-radius:2px 2px 2px 2px;
  	-webkit-box-decoration-break: clone;
  	box-decoration-break: clone;
 }

.blog-post-text a[href^="http://julian.digital"]:hover {
	color: #353535;
	text-decoration: none;
  	background-color: #C4C9CA;
  	padding: 1px 5px;
  	border-radius:2px 2px 2px 2px;
  	-moz-border-radius:2px 2px 2px 2px;
  	-webkit-box-decoration-break: clone;
  	box-decoration-break: clone;
 }

.blog-post-text p {
 	margin-bottom: 20px;
 }

.section {
	font-family: 'Roboto Mono', 'Courier', 'Helvetica', sans-serif;
 	-webkit-font-smoothing: antialiased;
	color: #4B4B4B;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
}

.blog-post-bottom {
	margin-bottom: 45px;
	margin-left: -15px;
	margin-right: -15px;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 45px;
	border-bottom: 1px solid #C8CACA;
	text-transform: uppercase;
}

.passive {
	font-weight: normal;
	color: #CAD2D4;
}

.blog-post-text .passive a {
	font-weight: normal;
	text-decoration: underline;
	color: #CAD2D4;
	background-color: #FFFFFF;
	padding: 0px;
}

.blog-post-text .passive a:hover {
	font-weight: normal;
	text-decoration: underline;
	color: #353535;
	background-color: #FFFFFF;
	padding: 0px;
}


/*
 * 	Single Pages
 */


.blog-post-bottom-single {
	margin-top: 70px;
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 70px;
	padding-top: 20px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 20px;
	border-top: 1px solid #C8CACA;
	border-bottom: 1px solid #C8CACA;
	text-transform: uppercase;
}

/*
 *  Meta
 */

.meta {
	font-family: 'Roboto Mono', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 400;
  	-webkit-font-smoothing: antialiased;
  	font-size: 13px;
  	letter-spacing: 1px;
	color: #4B4B4B;
	text-transform: uppercase;
}

.meta a {
	font-family: 'Roboto Mono', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 400;
  	-webkit-font-smoothing: antialiased;
  	letter-spacing: 1px;
	color: #C8CACA;
	text-decoration: none;
}


.meta a:hover {
	font-family: 'Roboto Mono', 'Helvetica Neue', Arial, sans-serif;
  	font-weight: 400;
  	-webkit-font-smoothing: antialiased;
  	letter-spacing: 1px;
	color: #4B4B4B;
}


/*
 *  Subscription Box
 */


.subs-box {
	background-color: #CAD2D4;
	border-radius: 0px;
	padding: 15px 15px 15px 20px;
	text-decoration: none;
	margin-top: 50px;
	margin-bottom: 20px;
}

@media (min-width: 576px) {
  .subs-box {
    border-radius: 8px;
  }
}


/*
 * 	Footer
 */

.blog-footer {
	margin-top: 25px;
	margin-bottom: 50px;
	text-align: center;
}