/* Files to include */
/* Perhaps in the future just condense this mixin to margin_padding */
/* Flex box */
/* 768px / 16px = 1em */
/* Extra Small Only */
/* Small Devices, Tablets */
/* Medium and above devices */
/***************************
****************************
Base Styles
****************************
***************************/
/* Base styles */
html,
body {
  /* Margin, padding, height and width settings ensure html/body extends to far reaches of window */
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  font-family: "Montserrat", arial, sans-serif; }

body {
  min-height: 100vh;
  /*If not enough content on page, ensures body at least reaches base of view...but still leaves whitespace. If do not fill the rest of the page then need to create sticky footer*/ }

h1 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px; }

h2 {
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px; }

p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px; }

a, a:hover, a:focus {
  text-decoration: none;
  color: #000;
  transition: font-weight 0.5s;
  border: none; }

a:hover {
  font-weight: bold; }

a:focus {
  outline: none; }

/***************************
****************************
Layout Styles
****************************
***************************/
[class*="col-md-"] {
  /*border:1px solid red; */
  /*height:100px;*/ }

.container,
.container-fluid {
  margin: 0 auto;
  padding: 0; }

.container {
  max-width: 960px; }

/* Ensure row stays within bounds of container */
.row {
  margin: 0; }

.col-md-6 {
  padding: 0; }

.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

/* Border at top of page */
.border {
  height: 10px;
  background-color: #000; }

/* Background class */
/* See here how to position a background image and adjust its opacity: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity */
.background {
  position: relative;
  overflow: hidden;
  height: 800px; }
  @media only screen and (max-width: 47.9375em) {
    .background {
      height: 600px; } }

.background:before {
  background: url("../images_portfolio/spiral2.jpg") no-repeat fixed center center;
  /* Note that 'fixed' property seems to break on Safari iphone 5...*/  
  background-size: cover;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.2; }
  @media only screen and (max-width: 47.9375em) {
    .background:before {
      background:url("../images_portfolio/spiral2.jpg") no-repeat center center; } }  
  
  
/* Menu/list class */
.menu, .mobile_menu {
  padding: 0;
  margin: 0;
  list-style: none; }
  .menu li, .mobile_menu li {
    display: inline-block;
    padding: 0 20px;
    text-transform: uppercase;
    /*border:1px solid red;*/ }
    @media only screen and (max-width: 47.9375em) {
      .menu li, .mobile_menu li {
        padding: 0 10px; } }

@media only screen and (max-width: 47.9375em) {
  .mobile {
    display: none; } }

@media only screen and (max-width: 47.9375em) {
  .mobile_menu li {
    display: block;
    padding: 20px 0; } }

i.fa-bars {
  display: none; }
  @media only screen and (max-width: 47.9375em) {
    i.fa-bars {
      display: block;
      font-size: 30px; } }

i.fa-long-arrow-up {
  display: none; }
  @media only screen and (max-width: 47.9375em) {
    i.fa-long-arrow-up {
      display: none;
      font-size: 30px; } }

.white_block {
  display: none; }
  @media only screen and (max-width: 47.9375em) {
    .white_block {
      display: none;
      height: 200px;
      /*background-color:#fff;*/
      background: transparent; } }

.menu-primary li i {
  font-size: 30px;
  color: #fff; }

.menu-primary li:hover {
  cursor: pointer; }

/* For photo collage */
.menu-secondary {
  padding: 0;
  margin: 0;
  list-style: none;
  /* Removes spaces between elements for inline-block*/
  font-size: 0; }
  .menu-secondary li {
    /*float:left;
        width:12.5%;    */
    display: inline-block;
    width: calc(100%/8);
    /*@include flex(0 1 12.5%);*/
    /*@include flex(1);*/ }
    @media only screen and (max-width: 47.9375em) {
      .menu-secondary li {
        width: calc(100%/4); } }
    .menu-secondary li img {
      /* Note that if set max-width:100% instead of width then images do not scale when screen width is increased */
      width: 100%;
      height: auto; }
    .menu-secondary li img:hover,
    .menu-secondary li img:focus {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.5s; }

/***************************
Header
***************************/
/* Header section */
.header {
  text-align: center;
  margin: 0;
  padding: 0;
  color: #000; }
  .header .container-fluid {
    margin: 150px 0 200px; }
    @media only screen and (max-width: 47.9375em) {
      .header .container-fluid {
        margin: 75px 25px; } }
  .header h1 {
    font-size: 26px;
    letter-spacing: 10px; }
    @media only screen and (max-width: 47.9375em) {
      .header h1 {
        line-height: 1.5;
        letter-spacing:5px; 
        width: 100%;
        margin: 0 auto 30px; } }
  .header p {
    margin-bottom: 50px; }
    @media only screen and (max-width: 47.9375em) {
      .header p {
        margin-bottom: 20px; } }

/* Supporting */
.supporting-1 h1,
.supporting-2 h1,
.portfolio h1,
.cv h1 {
  margin-bottom: 20px; }

.supporting-1 p,
.supporting-2 p,
.portfolio p,
.cv p {
  margin-bottom: 20px; }

.supporting-1 {
  background-color: #27282b;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 80px 0; }
  @media only screen and (max-width: 47.9375em) {
    .supporting-1 {
      padding: 30px 20px; } }
  .supporting-1 p.prose, .supporting-1 a {
    font-size: 14px;
    font-family: "arial", sans-serif;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
    color: #fff; }
    @media only screen and (max-width: 47.9375em) {
      .supporting-1 p.prose, .supporting-1 a {
        text-align: left; } }

.supporting-2 {
  text-align: center;
  margin: 0;
  padding: 100px 0 0; }
  @media only screen and (max-width: 47.9375em) {
    .supporting-2 {
      text-align: center;
      margin: 0;
      padding: 50px 25px 0; } }
  .supporting-2 .container {
    padding: 0 50px; }
    @media only screen and (max-width: 47.9375em) {
      .supporting-2 .container {
        padding: 0; }
        .supporting-2 .container p {
          word-wrap: break-word;
          margin: 0 auto; } }
  .supporting-2 .row {
    margin: 70px 0 80px; }
    @media only screen and (max-width: 47.9375em) {
      .supporting-2 .row {
        margin: 50px 0 40px;
        overflow: hidden; } }
  .supporting-2 .field {
    border-radius: 0;
    height: 35px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    border: none;
    box-shadow: none;
    background-color: #FAFAFA;
    margin: 0 10px; }
    @media only screen and (max-width: 47.9375em) {
      .supporting-2 .field {
        margin: 0; } }
  .supporting-2 .col-md-7,
  .supporting-2 .col-md-4,
  .supporting-2 .col-md-1 {
    padding: 0; }
  @media only screen and (max-width: 47.9375em) {
    .supporting-2 .col-md-4 {
      margin-bottom: 20px; }
    .supporting-2 .col-xs-12,
    .supporting-2 .col-md-7 {
      margin: 0;
      width: 100%; } }
  .supporting-2 .image {
    height: 250px;
    width: 280px; }

#comment {
  border: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  resize: none;
  /*Removes dots at bottom corner of textarea */
  background-color: #FAFAFA;
  margin: 0 10px; }
  @media only screen and (max-width: 47.9375em) {
    #comment {
      margin: 0; } }

#wrap {
  background-color: #FAFAFA;
  height: 232px;
  width: 50px;
  margin: 0 20px; }
  #wrap span {
    position: relative;
    top: 150px; }
  @media only screen and (max-width: 47.9375em) {
    #wrap {
      height: 20px;
      width: 100%;
      margin: 0; }
      #wrap span {
        top: 0; } }

.supporting-4 {
  background-color: #27282b;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 40px 0; }
  .supporting-4 p {
    margin: 20px 0 0; }

.supporting-5 {
  background-color: #000;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 30px 0 20px; }
  @media only screen and (max-width: 47.9375em) {
    .supporting-5 p {
      font-size: 0.5em; } }

/* Portfolio */
/* Seems like the best way to size images is to first create a placeholder for them of set size within grid ie 
outer-box. Then scale image in separate editor (GIMP) to this size. Place within placeholder setting width to 100% and height auto */
.portfolio {
  text-align: center; }

.entry {
  margin: 0 0 65px; }
  @media only screen and (max-width: 47.9375em) {
    .entry {
      padding: 0 30px;
      margin: 0; } }

.entry-content {
  border-bottom: 2px solid #fafafa;
  padding: 0 0 40px; }
  @media only screen and (max-width: 47.9375em) {
    .entry-content {
      padding: 0; } }
  .entry-content > p {
    margin-bottom: 50px; }

.outer-box {
  width: 370px;
  height: 250px;
  display: block;
  position: relative;
  margin: 0 auto 20px;
  overflow: hidden; }
  @media only screen and (max-width: 47.9375em) {
    .outer-box {
      width: 100%;
      height: auto; } }  
  .outer-box img {
    width: 100%;
    height: 100%;
    margin: 0 auto; }
 @media only screen and (max-width: 47.9375em) {
	.outer-box img {
  		width: 100%;
  		height: 250px;   		
  	 } 
  }

.inner-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  opacity: 0;
  transition: opacity 0.5s; }
  .inner-box h4 {
    line-height: 225px; }

.inner-box:hover {
  opacity: 0.9;
  background-color: #f9f9fa;
  cursor: pointer; }

.col-md-6 a > h4 {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 30px; }
  @media only screen and (max-width: 47.9375em) {
    .col-md-6 a > h4 {
      margin-bottom: 15px; } }

/* Modal styles */
/* Set Modal position when open click on image. See here: http://stackoverflow.com/questions/20313798/bootstrap-3-modal-position */
/* Custom modal class.. using SCSS nesting below */
.modal-customise {
  /* Style and position modal close button */ }
  .modal-customise .modal-content {
    border: 2px solid #000; }
  .modal-customise .modal-dialog {
    position: relative;
    /*top: 25%;*/
    top:200px; 
    
    /* 200px also looked quite nice */ }
	@media only screen and (max-width: 47.9375em) {
    	.modal-customise .modal-dialog {
    		top:100px; 
    	}    
    }
  .modal-customise .modal-header,
  .modal-customise .modal-footer {
    border: none;
    text-align: center;
    padding: 30px; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-header,
      .modal-customise .modal-footer {
        padding: 15px; } }
  .modal-customise .modal-header h4 {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0; }
  .modal-customise .modal-header .close {
    position: absolute;
    top: -17px;
    right: -23px;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    font-size: 20px;
    opacity: 1;
    color: #fff;
    background-color: #000;
    border: 1px solid #fff; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-header .close {
        top: -10px;
        right: -10px; } }
  .modal-customise .modal-body {
    padding: 0 30px; }
    @media only screen and (max-width: 47.9375em) {
      .modal-customise .modal-body {
        padding: 0 10px; } }
    .modal-customise .modal-body p {
      line-height: 2;
      font-family: 'arial', sans-serif;
      text-transform: none;
      font-size: 12px;
      margin: 0;
      letter-spacing: 0;
      text-align: justify; }
      @media only screen and (max-width: 47.9375em) {
        .modal-customise .modal-body p {
          line-height: 1.5; } }
      .modal-customise .modal-body p span {
        font-weight: bold;
        text-decoration: none;
        padding-bottom: 0; }
  .modal-customise .modal-footer p {
    margin: 0;
    font-weight: bold; }
    
  .modal-customise .modal-link p {
  	font-weight:bold;
  	font-size:10px;   
  }
  
  @media only screen and (max-width: 47.9375em) {
        .modal-customise .modal-link p {
          font-size:8px; } }

/* CV section of Portfolio */
.cv {
  text-align: center; }
  @media only screen and (max-width: 47.9375em) {
    .cv {
      text-align: center;
      margin: 0;
      padding: 0 5px; } }
  .cv h1 {
    letter-spacing: 3px; }
  .cv h2 {
    /*margin-bottom:20px;*/ }
    @media only screen and (max-width: 47.9375em) {
      .cv h2 {
        font-size: 12px; } }
  .cv p,
  .cv li {
    font-family: "arial", sans-serif;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    font-size: 14px;
    /*margin-bottom:60px;*/ }
    @media only screen and (max-width: 47.9375em) {
      .cv p,
      .cv li {
        /*margin-bottom:45px;*/ } }
  .cv span {
    font-weight: 700; }
  .cv ul {
    list-style: none;
    width: 70%;
    margin: 0 auto;
    padding: 0; }
    @media only screen and (max-width: 47.9375em) {
      .cv ul {
        width: 100%; } }
    .cv ul li {
      margin: 0 0 10px; }
    .cv ul li:last-of-type {
      margin-bottom: 50px; }
  .cv hr {
    width: 20%;
    border: 1px solid; }
    @media only screen and (max-width: 47.9375em) {
      .cv hr {
        width: 40%; } }
  .cv .separate {
    margin: 60px 0; }
    @media only screen and (max-width: 47.9375em) {
      .cv .separate {
        margin: 45px 0; } }

/* Return to top of page block */
.return {
  position: fixed;
  height: 50px;
  width: 50px;
  background-color: #000;
  bottom: 30px;
  right: 30px;
  z-index: 1;
  text-align: center;
  padding: 12px 0;
  opacity: 1; }
  .return i {
    color: #fff;
    font-size: 25px; }

.return:hover {
  opacity: 0.7;
  cursor: pointer; }