/**
 * Colours:
 * Text dark:          #221e22
 * Hightlight orange:  #f9a03f
 * Highlight blue:     #33658a
 * Soft gray:          #f2f2f2
 */

 /*---------------------------------------------------------------------------*\
    HTML blocks
 \*---------------------------------------------------------------------------*/

 html {
   overflow-y: scroll;
   font-size: 62.5%;
   color: #221e22;
 }

 #wrapper {
   width: 80%;
   max-width: 1000px;
   margin: auto;
 }

 header {
   margin-top: 4em;
 }

 h1 {
   font-family: 'Roboto', sans-serif;
   text-align: center;
   margin: 0;
 }

 h1.__main {
   font-size: 3.6rem;
   letter-spacing: 0.5px;
   font-weight: 500;
   margin-bottom: 0.25em;
 }

 h1.__sub {
   font-size: 2.0rem;
   font-weight: 300;
   font-style: italic;
   margin-top: 0;
 }

 nav {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.3rem;
  margin-top: 2em;
  margin-bottom: 1em;
 }

 nav ul {
   list-style: none;
 }

 nav ul, nav li {
   display: inline-block;
   margin: 0;
   padding: 0;
 }

 nav a {
   display: block;
   text-decoration: none;
   color: #221e22;
   padding: 0.5em 1em 0.5em 1em;
   margin-left: 0.1em;
   margin-right: 0.1em;
   border: 1px solid #f2f2f2;
   border-radius: 5px;
 }

 nav a:hover {
   border-color: #33658a;
 }

 nav a.active {
   border-color: #f9a03f;
 }

 aside {
   //padding-right: 2em;
 }

 aside.thumbnail {
   height: 10em;
   object-fit: cover;
 }

 aside.__portfolio {
   padding: 1em;
   margin: 1em;
   background-color: #f2f2f2;
   border-radius: 5px;
 }

 .portfolio-item {
   margin-bottom: 20px !important;
 }

 .skills-demonstrated {
   padding: 0 2em 0 2em;
 }

 .cv-section {
   margin-bottom: 30px !important;
 }

 footer {
  margin-top: 2em;
  border-top: 1px solid #f2f2f2;
  padding-top: 1em;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  text-align: right;
 }

 /*---------------------------------------------------------------------------*\
    Text
 \*---------------------------------------------------------------------------*/

 h2 {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   line-height: 1.3;
   font-size: 1.8rem;
   margin-top: 0;
 }

 h2.cv-heading {
   text-align: right;
   padding-right: 25px;
   font-size: 2.4rem;
   color: #33658a;
 }

 h2.cv-subheading {
    font-weight: 300;
 }

 h3 {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   line-height: 1.3;
   font-size: 1.5rem;
   margin-top: 0;
 }

 h4 {
   text-align: right;
   padding-right: 25px;
   font-family: 'Roboto', sans-serif;
   font-size: 1.2rem;
   font-weight: 300;
   font-style: italic;
 }

  p {
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: .25px;
    margin-top: 0;
    margin-bottom: 8;
  }

  p:last-child {
    margin-bottom: 0;
  }

  p a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    font-weight: 500;
    color: #221e22;
  }

  p a:hover {
    color: #33658a;
  }

  .skills-demonstrated ul {
    list-style-position: outside;
    padding-left: 1.4em;
  }

  .skills-demonstrated li {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    line-height: 1.5;
    padding-left: 0.5em;
    margin-bottom: 1em;
  }

  .skills-demonstrated li:last-child {
    margin-bottom: 0em;
  }

 .technologies-demonstrated ul {
    list-style-position: outside;
    padding-left: 1.4em;
  }

  .technologies-demonstrated li {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    line-height: 1.0;
    padding-left: 0.5em;
    margin-bottom: 1em;
  }

 .technologies-demonstrated li:last-child {
    margin-bottom: 0em;
  }
  .bold-orange {
    font-size: 1.8rem;
    font-weight: 600;
    color: #f9a03f;
  }

  .inline-bullets ul {
    list-style-position: outside;
    padding-left: 1.4em;
  }

  .inline-bullets li {
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1em;
  }

  .centre {
    text-align: center;
  }

 /*---------------------------------------------------------------------------*\
    Images
 \*---------------------------------------------------------------------------*/

 img {
 }

 img.--portrait {
   display: block;
   margin: 0 auto;
   border: 1px solid #33658a;
   border-radius: 5px;
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";
 }

 img.--thumbnail {
   display: block;
   border-radius: 5px;
   margin: auto;
 }

 img.portfolio-output {
  max-width: 90%;
  max-height: 460px;
  border: 1px solid #33658a;
  border-radius: 5px;
 }

 /*---------------------------------------------------------------------------*\
    Reponsive Grid System (http://www.responsivegridsystem.com)
 \*---------------------------------------------------------------------------*/

 /*  SECTIONS  */
 .section {
 	clear: both;
 	padding: 0px;
 	margin: 0px;
 }

 /*  COLUMN SETUP  */
 .col {
 	display: block;
 	float:left;
 	margin: 1% 0 1% 1.6%;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
 }
 .col:first-child { margin-left: 0; }

 /*  GROUPING  */
 .group:before,
 .group:after { content:""; display:table; }
 .group:after { clear:both;}
 .group { zoom:1; /* For IE 6/7 */ }

 /*  GRID OF TWELVE  */
 .span_12_of_12 {
 	width: 100%;
 }

 .span_11_of_12 {
   width: 91.53%;
 }
 .span_10_of_12 {
   width: 83.06%;
 }

 .span_9_of_12 {
   width: 74.6%;
 }

 .span_8_of_12 {
   width: 66.13%;
 }

 .span_7_of_12 {
   width: 57.66%;
 }

 .span_6_of_12 {
   width: 49.2%;
 }

 .span_5_of_12 {
   width: 40.73%;
 }

 .span_4_of_12 {
   width: 32.26%;
 }

 .span_3_of_12 {
   width: 23.8%;
 }

 .span_2_of_12 {
   width: 15.33%;
 }

 .span_1_of_12 {
   width: 6.866%;
 }

/*---------------------------------------------------------------------------*\
   Reponsive CSS
\*---------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  #wrapper {
    width: 93.75%;
  }
}

@media only screen and (max-width: 800px) {
	.col {
    float: none;
    margin: 0.5em auto;
  }

  .col:first-child { margin-left: auto; }

  .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12,
  .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12,
  .span_11_of_12, .span_12_of_12 {
	  width: 100%;
	}

  #wrapper {
    width: 93.75%;
  }

  aside {
    padding: 0;
  }

  img.--portrait {
    float: none;
  }

  img.--thumbnail {
    display: none;
  }

  .portfolio-item {
    margin-bottom: 0px !important;
  }

  h2 {
    margin-top: 2em;
  }

  h2.cv-heading {
    text-align: center;
  }

  h4 {
    text-align: center;
  }

@media only screen and (max-width: 480px) {
  #wrapper {
    width: 93.75%;
  }

  .col {
    float: none;
    margin: 1em auto;
  }

  nav {
    padding: 0;
  }

  nav ul, nav li {
    display: block;
    margin: 0 auto;
    margin-bottom: 1em;
    max-width: 300px;
  }

  nav li:last-child {
    margin-bottom: 0em;
  }