/*
Theme Name: Craig Jamieson 2020
Theme URI: https://craigjamieson.com/wp-content/themes/CJ2020
Author: Craig Jamieson
Author URI: https://craigjamieson.com
Description: The 2020 Craig Jamieson theme for WordPress...
Version: 1.0
Text Domain: CJ2020
Tags: Responsive, Minimal, Portfolio
*/

/* 1. GENERAL STYLING
-------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
	font-display: block;
}

html, html a {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}


html,
body {
  height: 100%;
}

body {
	line-height: 1.6em;
	font-family: proxima-nova,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	color: rgba(255,255,255,.8);
	background-color: #2EC2C7;
	position: relative;
 /* For scrollspy */
 	margin: 0 auto!important;
 	padding: 0 50px;
 	text-rendering: optimizeLegibility;
}


h1, h2, h3, h5 {
	font-family: titling-gothic-fb-skyline,sans-serif;
	font-weight: 200;
	font-style: normal;
	text-transform: uppercase;
}

.button, nav, h4, footer, .button a, nav a, h4 a, footer a {
	font-family: proxima-nova,sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	text-decoration: none;
}

strong {
	margin: 0 auto;
	font-weight: 700;
}

h2 {
	font-size: 4.6em;
	font-weight: 300;
}

h3 {
	font-size: 4em;
	font-weight: 300;
}

h4 {
	font-weight: 300;
}

h5 {
	font-size: 3em;
	font-weight: 300;
}

h6 {
	font-size: 2em;
	line-height: 1.8em;
	font-weight: 300;
}

p {
	font-size: 1.4em;
	line-height: 1.6em;
	padding: 0 20px 20px 20px;
}

.button, nav {
	font-weight: 600;
}

.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

* {
	box-sizing: border-box;
}

p, pre {
	margin: 1.5em 0;
}

em {
	font-style: italic;
	font-weight: 300;
}
/* unvisited link */
a:link {
	color: #fff;
	text-decoration: underline;
	transition: color 1s ease-in-out;
}
/* visited link */
a:visited {
	color: #fff;
	text-decoration: underline;
}
/* mouse over link */
a:hover {
	color: rgba(255,255,255,.5);
	text-decoration: underline;
}
/* selected link */
a:active {
	color: rgba(255,255,255,.5);
	text-decoration: underline;
}

blockquote {
	border: none;
	text-align: left;
	margin: 0 auto;
	padding: 0 20px 100px 20px;
	color: rgba(255,255,255,.8);
	font-family: pt-serif-pro-extended,sans-serif;
	font-weight: 300;
	font-style: italic;
	font-size: 1.8em;
	line-height: 1.8em;
	width: calc(100vw - 40px);
	max-width: 1200px;
}

.craig, .jamieson {
	font-family: titling-gothic-fb-condensed,sans-serif;
	font-style: normal;
	text-transform: uppercase;
	text-decoration:none;
}

.craig {
	font-weight: 300;
}

.jamieson {
	font-weight: 200;
}
  
img, object, embed, video {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: block;
	vertical-align: middle;
	text-align: center;
}

.logo {
	padding-left: 40px;
	text-decoration: none;
}

.logo {
	float: left;
	padding: 30px 15px;
	font-size: 1.6em;
	line-height: 20px;
	text-decoration: none;
}

.logo:hover, .logo:focus, .logo:visited, .logo a {
	text-decoration: none;
}

.navbar-right {
	float: right;
	padding-right: 20px;
	margin: 0;
}

.nav > li > a {
	position: relative;
	display: block;
	padding: 20px 15px;
	text-decoration: none;
}

.navbar-nav > li > a {
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 20px;
	text-decoration: none;
}

/*.wp-block-image {
	max-width:200px;
	align-content:center;
	margin: 0 auto 30px auto;
}

.wp-block-image img {
	border: 2px solid white;
}*/

header#top {
	border-bottom: 1px solid rgba(255,255,255,0.4);
    margin: 0 auto;
	flex-direction: row;
	flex: 1 auto;
}

footer {
	border-top: 1px solid rgba(255,255,255,0.2);
	min-height: 100px;
}

img#wpstats {
	display: none;
}

.wp-prev-next {
  display: flex;
  flex: 1 100%;
  flex-direction: row;
  flex-flow: row;
  width: 100vw ;
  padding: 0;
}

.wp-prev-next a{
	text-decoration: none;
	}

.left {
  justify-content: flex-start;
  flex: 1;
  text-align:left;
  padding: 20px;
}

.right {
  justify-content: flex-end;
  padding: 20px;
  flex: 1;
  text-align:right;
  /*border:1px solid #fff;	*/
}
.middle {
  justify-content: center;
  padding: 20px;
  flex: none;	
}

.posts-wp-prev-next {
  display: flex;
  flex: 1 100%;
  flex-direction: row;
  flex-flow: row;
  width: 100vw ;
  /*max-width: calc(100vw - 100px);*/
  padding: 0;
}

.posts-wp-prev-next a{
	text-decoration: none;
	}

.posts-left {
  justify-content: flex-start;
  flex: 1;
  text-align:left;
  padding: 20px;
}

.posts-right {
  justify-content: flex-end;
  padding: 20px;
  flex: 1;
  text-align:right;
  /*border:1px solid #fff;	*/
}
.posts-middle {
  justify-content: center;
  padding: 20px;
  flex: none;	
}


.wrapper {
	width: 100%;
}

.a {
  background: #ffddbb;
}

.b {
  background: #ddbb99;
}

.c {
  background: #bb9977;
}

.d {
  background: #997755;
}
.e {
  background: #ffddbb;
}

.f {
  background: #ddbb99;
}

.g {
  background: #bb9977;
}

.h {
  background: #997755;
}

.i {
  background: #cc7755;
}









@media (max-width: 759px) {
	
	
.about {
  display: flex;
  flex-direction: column;
  min-height: calc(100vw - 40px);
}
.photo {
  align-items: center;
  text-align: center;
  padding: 0 20px;
  flex:1;	
}
.bio {
  align-items:flex-start;
  padding: 0 0 50px 0;
  text-align: left;	
  flex:1;
  margin: 0 auto;
}

.bio p {
	padding: 0 0 30px 0;
}
	


  .nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
  }

  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    text-decoration: none;
  }

  .logo{
    float: left;
    padding: 15px 15px;
    font-size: 1.6em;
    line-height: 20px;
    text-decoration: none;
  }

  .post img {
/*padding:20px;*/;
  }

  header {
    position: relative;
    top: 0px;
    padding: 0 50px;
    margin: 0;
    max-width: 100%;
  }

  header#top {
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  /* unvisited link */
header a:link {
  text-decoration: none;
}
/* visited link */
header a:visited {
  text-decoration: none;
}
/* mouse over link */
header a:hover {
  text-decoration: none;
}
/* selected link */
header a:active {
  text-decoration: none;
}

  body {
    padding: 0 !important;
  }
  
  footer {
  border-top: 1px solid rgba(255,255,255,0.2);
 
}

#content{
  display: flex;
  min-height: calc(100vh - 265px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



blockquote {
  border: none;
  text-align: left;
  margin: 0 auto;
  padding: 0;
  font-size: 1.4em;
  line-height: 1em;
  width: 100vw;
}



}

/* 2. HEADER
-------------------------------------------------------------- */

/* 3. NAVIGATION
-------------------------------------------------------------- */

.link {
  font-size: 1.4em;
  font-weight: 200;
}
/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */



/* 4. CONTENT
-------------------------------------------------------------- */


.page article {
  text-align: center;
}


.wp-video {
  text-align: center;
	margin: 0 auto;
}

.page p {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1.4em;
  line-height: 1.6em;
  overflow: hidden;
  text-align: left;
}


.description {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1.4em;
  line-height: 1.6em;
  overflow: hidden;
  text-align: left;
}

.project article p {
	/*max-width: calc(100vw - 100px);*/
	width: 100vw;
	padding: 0 20px;
}



/* 5. POSTS
-------------------------------------------------------------- */

.posts {
  padding: 20px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.3);
  width: 100vw;
}

.blog li {
  border: none;
  text-align: left;
  margin: 0 auto;
  padding: 10px 0;
  font-size: 1.6em;
  line-height: 1.6em;
  max-width: 680px;
}

.posts a {
	text-decoration: none;
}

article {
  padding-top: 0;
}

.blog {
  text-align: center;
}

::selection {
  background: rgba(0,0,0,0.5);
 /* Safari */;
}

h1::selection {
  background: transparent;
 /* Safari */;
}


a::selection {
  background: transparent;
 /* Safari */;
}


h4 {
	font-size: 1.2em;
  width: 100%;
  text-align: center;
  padding: 0;
}


.aligncenter {
  text-align: center;
}

.post {
/*background-color:#efefef;*/;
}

article {
  text-align: center;
  margin: 0 auto;
}

.blog p {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1.4em;
  line-height: 1.6em;
  overflow: hidden;
  text-align: left;
}

.blog img, .blog object, .blog embed {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.blog li {
  font-size: 1.8em;
  line-height: 1.8em;
  margin: 0 auto;
  padding: 20px;
}

.copy {
  max-width: 940px;
  margin: 0 auto;
  font-size: 1.4em;
  padding: 0 20px 30px 20px;
  color: #777;
}

.description {
  max-width: 920px;
  margin: 0 auto;
  font-size: 1.4em;
  padding: 0;
}

.contact {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.about {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 30px 20px;
}

.social {
  display: flex;
  flex-direction: row;
  max-width: 760px;
  justify-content: center;
  margin: 0 auto;
  padding: 30px 10px 60px 10px;
  align-items: center;
}


.social > div {
  flex: 1;
  padding: 20px;
}

.social-small {

  float: right;
  display: flex;
  flex-direction: row;
  justify-content: right;
  margin: 0 auto;
  padding: 10px;
  align-items: center;
  width: 50%;
  text-align:right;
  max-width:350px;
}




.social-imgs {

  float: right;
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin: 0;
  padding: 0;
  align-items: center;
  max-width:350px;
  text-align:center;
}

.twitter-tweet {
	margin: 0 auto;
  padding: 30px 10px 60px 10px;
}

.copyright {

  float: left;
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin: 0 auto;
  padding: 10px;
  align-items: center;
  text-align:left;
  width: 50%;
}

.copyright > div {
  flex: 1;
  padding: 10px;
}

.social-small > div {
  flex: 1;
  padding: 10px;
}

.portfolio {
  display: flex;
  flex-direction: row;
  max-width: calc(100vw - 100px);
  justify-content: center;
  margin: 0 auto;
  padding: 30px 10px 60px 10px;
  align-items: center;
}

.portfolio > div {
  flex: 1;
  padding: 20px;
}

.last {
  padding: 0;
  margin: 0;
}

.full-column {
  width: 100%;
  max-width: 960px;
  padding: 0;
  margin: 0;
}

.info {
  font-size: 1.4em;
  color: rgba(255,255,255,0.5);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px 40px 20px;
}

.services li {
  list-style-type: none;
}

.info li {
  list-style-type: none;
}

.instagram-media {
  margin: 0 auto!important;
  text-align: center;
}


/* 6. COMMENTS
-------------------------------------------------------------- */

/* 7. SIDEBARS & WIDGETS
-------------------------------------------------------------- */

/* 8. FOOTER
-------------------------------------------------------------- */


footer {
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 1em;
}


/* 9. PAGE TEMPLATES
-------------------------------------------------------------- */

h1 {
  text-align: center;
  /*font-size: 16em;*/
  font-size:18vw;
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1em;
  margin: 0 auto;
  padding: 40px 30px 30px 30px;
}




/* 10. MEDIA QUERIES
-------------------------------------------------------------- */

@media (min-width: 760px) and (max-width: 1023px) {
  h1 {
    font-size: 18vw;
    line-height: 0.8em;
  }
}

@media (min-width: 760px) {
  .posts-wp-prev-next {
  	display: flex;
  	flex: 1 100%;
  	flex-direction: row;
  	flex-flow: row;
  	width: 100vw ;
  	max-width: calc(100vw - 100px);
  	padding: 0;
  }
  .wp-prev-next {
  	display: flex;
  	flex: 1 100%;
  	flex-direction: row;
  	flex-flow: row;
  	width: 100vw ;
  	max-width: calc(100vw - 100px);
  	padding: 0;
  }
  .home-btn {
    visibility: hidden;
  }
  h4{font-size: 1.8em;}
  .posts{
  max-width: calc(100vw - 100px);
  }
  #content{
  display: flex;
  min-height: calc(100vh - 180px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
p {
  max-width: 960px;
  margin: 0 auto;
  font-size: 1.4em;
  line-height: 1.6em;
  overflow: hidden;
  text-align: left;
}
}


@media (max-width: 759px) {
  .logo {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    flex: 1 auto;
    text-decoration: none;
    justify-content: center;
  }
  
  .craig-photo {
	max-width: 300px;
	margin: 0 auto;
}

  .navbar-right {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    position: fixed;
    overflow: hidden;
	bottom: 0;
	left: 0;
	background: #222;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8em;
  }
  
    .contact-btn {
    visibility: hidden;
  }
  
  footer {
	  min-height: 150px;
	  display: flex;
    width: 100%; 
flex-direction: column-reverse;
	 flex: 1 auto;
	 padding: 0 0 100px 0
  }
  
  
  .social-small {

  float: right;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  padding: 10px;
  width: 100%;
}




.social-imgs {

  display: flex;
  flex-direction: row;
  justify-content: left;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  align-items: center;
  text-align:center;
  border:solid #fff 1px;
}

.copyright {

  float: left;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  text-align:left;
  width: 100%;
}

.copyright > div {
  flex: 1;
  padding: 10px;
}

.social-small > div {
  flex: 1;
  padding: 10px;
}
  
.nav > li > a {
  position: relative;
  display: block;
  padding: 20px 15px;
  text-decoration: none;
}

.navbar-nav > li > a {
  padding-top: 30px;
  padding-bottom: 30px;
  line-height: 20px;
  text-decoration: none;
	}

  /*h1 {
    padding: 10px 20px 0 20px;
    
  }
    h1 {
    font-size: 50vw;
  }
      .home h1 {
    font-size: 50vw;
  }
  */
  
  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 3em;
    font-weight: 200;
  }
  
/*  .posts {
  padding: 30px 20px 30px 20px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.3);
  width: calc(100vw - 20px);
}*/

  h5 {
    font-size: 1.1em;
  }

  h6 {
    font-size: 1.6em;
    line-height: 1.4em;
    padding: 0 20px 0 20px;
  }

  .social {
    padding: 10px 10px 40px 10px;
  }

  .social > div {
    flex: 1;
    padding: 10px;
  }

}

/* GRID */

.grid {
  border: none;
  overflow: hidden;
}

.grid li {
  border: none;
  float: left;
  overflow: hidden;
  position: relative;
  width: 33.333%;
  padding: 20px;
  font-size: 1.8em;
  box-sizing: border-box;
  transition: all .3s ease-in-out;
}

.ie7 .grid li {
  width: 19.9%;
}

.grid li a {
  display: block;
}

.grid img {
  display: block;
  height: auto;
  width: 100%;
  transition: all .3s ease-in-out;
}

@media screen and (min-width: 2001px) {
  .grid li {
    width: 25%;
  }
}

@media screen and (max-width: 1450px) {
  .grid li {
    width: 33.333%;
  }
}

@media screen and (max-width: 1000px) {
  .grid li {
    width: 50%;
  }
}

@media screen and (max-width: 750px) {
  .grid li {
    width: 100%;
  }
}

body .grid {
  margin: 0!important;
  padding: 0!important;
}