/*fonts */

@font-face {
  font-family: 'ahellya';
  src: url('assets/fonts/ahellya-webfont.eot');
  src: url('assets/fonts/ahellya-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/ahellya-webfont.woff') format('woff'), url('../fonts/ahellya-webfont.ttf') format('truetype'), url('assets/fonts/ahellya-webfont.svg#ahellyaregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'colaborate';
  src: url('assets/fonts/colablig-webfont.eot');
  src: url('assets/fonts/colablig-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/colablig-webfont.woff') format('woff'), url('../fonts/colablig-webfont.ttf') format('truetype'), url('assets/fonts/colablig-webfont.svg#colaboratelightregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'colaborate-med';
  src: url('assets/fonts/colabmed-webfont.eot');
  src: url('assets/fonts/colabmed-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/colabmed-webfont.woff') format('woff'), url('../fonts/colabmed-webfont.ttf') format('truetype'), url('assets/fonts/colabmed-webfont.svg#colaborate-mediumregular') format('svg');
  font-weight: medium;
  font-style: normal;
}
@font-face {
  font-family: 'colaborate-bold';
  src: url('assets/fonts/colabreg-webfont.eot');
  src: url('assets/fonts/colabreg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/colabreg-webfont.woff') format('woff'), url('../fonts/colabreg-webfont.ttf') format('truetype'), url('assets/fonts/colabreg-webfont.svg#colaborate-regularregular') format('svg');
  font-weight: bold;
  font-style: normal;
}

/*structural */

.greyed {
  background-color: #e1e1e1;
}
@media (min-width:550px) {
  body {
    overflow-x: hidden;
  }
  .body, .container, .wrapper {
    display: flex;
    flex-direction: column;
  }
  .container {
    align-items: flex-start;
  }
  .wrapper {
    align-items: flex-end;
    margin-bottom: 4em;
  }
  .shift-right {
    width: 200%;
  }
  .shift-left {
    width: 300%;
    align-items: flex-end;
    position: relative;
    right: 200%;
  }
  .blank {
    width: 87.5vw;
    max-width: 1440px;
  }
  .left {
    margin-right: 6em;
  }
}
.title, .title-right {
  margin-top: 2.6em;
  position: relative;
  right: 2%;
}
.title-right {
  margin-left: 4em !important;
}

#aboutbox, #servicebox, #contactbox, #portfoliobox, #blogbox {
  width: 87.5vw;
  max-width: 1440px;
  position: relative;
  right:2%;
}

#servicebox *
{
width: 86.25%;
}

/*　Includes */

#heading {
  margin-top: 2.6em;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#heading img {
  height: 12em;
  margin-bottom: 1.5em;
}
#heading p {
  font-family: 'ahellya';
  color: #242424;
  letter-spacing: 0.3px;
}
#heading a {
  color: #242424;
  text-decoration: none;
}
#heading a:hover {
  color: #aa8447;
}
#footer {
  width: 100%;
  background-color: #aa8447;
  color: white;
  padding-left: 12.5%;
  line-height: 0;
  padding-top: 2em;
  padding-bottom: 2em;
  margin-bottom: 0;
}
#social img {
  height: 1.5em;
  margin-right: 0.2em;
}

/* homepage */

#homebox {
  display: -webkit-flex;
  display: flex;
  flex-align: row;
  -webkit-flex-align: row;
  width: 87.5vw;
  max-width: 1440px;
  align-items: center;
}

.homebox-image-holder
{
  max-width: 45em;
  max-height: 45em;
  overflow:hidden;
}

.homebox-image-holder img {
  position: relative;
  right:50%;
}
.mob-hide img
{
bottom: 8em;
}


.homebox-text, .aboutbox-text {
  display: -webkit-flex;
  display: flex;
  flex-direction:column;
  -webkit-flex-direction: column;
  -webkit-align-items: left;
  align-items: left;
  -webkit-justify-content: center;
  justify-content: center;
  width: 66.666666666666667%;
}

#hometextcontent {
  float: right;
  min-width: 12em;
  width: 100%;
  max-width: 40em;
}
.homebox-image-holder {
  line-height: 0;
}
.blank .three {
  max-height: 20em;
  overflow: hidden;
}

#instafeed
{
  white-space: nowrap;
  float: none;
}

#instafeed img
{
  margin-left: 4%;
  position: relative;
  right: 4%;
}

/*about */

.aboutbox-text h5
{
  margin-bottom:0.1rem;
}

.aboutbox-image-holder {
margin-right: 5%;
 margin-bottom: 5em;
  height: 25em;
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: cover;
}

#abouttextcontent {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-bottom:5em;

}

/*services*/

.servicebox-image-holder {
  height: 50em;
  overflow: hidden;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  margin-right: 5%;
  margin-bottom: 5em;
}

#servicetextcontent h5 {
  color: #232323;
  background: none;
  font-family: "colaborate";
  padding: 0.3em 1em;
  margin-bottom: 0;
}
#servicetextcontent p {
  padding: 0.3em 1.5em;
  color: black;
}
#servicebox-text-float
{
  background-color:rgba(255,255,255,0.85);
  margin-top: -35em;
}
/*Contact*/

#contactbox-text {
  background-image: url("../images/contact/contact.jpg");
  background-size: cover;
  background-position: center;
  padding: 8%;
  height: 28.5em;
  color: white;
}
#contactbox-text p {
  margin-bottom: 0;
}
#contactbox-form
{
  margin-left: 4%;
}


#contactbox-form textarea {
  min-height: 11.5em;
}

/*portfolio*/

#portfolio-img {
  margin-left: 0;
  margin-right: 2%;
  margin-bottom: 2em;
}
#portfolio-img:hover {
  border: 4px solid #aa8447;
}
#portfolio-img img {
  width: 100%;
}

#portfoliobox .row .three
{
  width: 20%
}

#portfoliobox .row .three:first-child
{
  margin-left: 8.66666666667%;
}

#port-message
{
padding-top: 7em;
padding-bottom: 7em;
}


/*blog*/
.blog-content
{
  width: 100%;
}

/*tablet optimisation*/

@media(max-width:1024px) {
  .homebox-image-holder {
    overflow: hidden !important;
    max-height: none;
  }
  .homebox-image-holder img{
    height: 100vw;
    bottom: 0;
    max-height: none;
    min-height: 680px;
    position: relative;
    right:60%;
  }
}

/*mobile optimisation*/

@media(max-width:550px) {
  .body {
    width: 100%;
    overflow-x:hidden; 
  }
  .title {
    margin-left: 4em;
  }
  #footer {
    padding-left: 5%;
  }
  .shift-right {
    width: 100%;
  }
  .homebox-text, .homebox-image-holder, #homebox {
    display: block;
    width: 100%;
    margin-bottom: 2em;
    background: #e1e1e1;
  }
  .homebox-text {
    width: 90%;
    padding: 0 5%;
    margin-top: 2em;
  }
  #hometextcontent {
    margin-bottom: 2em;
  }

  .homebox-image-holder
  {
    max-width: none ;
  }

  .homebox-image-holder img {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    right:0;
  }
  .mob-hide {
    display: none;
  }

#instafeed
{
  white-space: normal;
}

  #instafeed img
  {
    margin-bottom: 2em !important;
    width: 100%;
    height: 90vw;
  }

  #hometextcontent, .left #hometextcontent, #aboutbox, #servicebox, #contactbox, #portfoliobox, #blogbox{
    width: 100%;
    right: 0;
  }
  .blank, .title {
    width: 90%;
    margin-left: 5%;
  }
  /*about*/
  .aboutbox-image-holder, .servicebox-image-holder, .container {
    margin: 0;
    padding: 0;
    }
  .container {
    margin-bottom: 4em;
  }
  .aboutbox-text {
    width: 90%;
    margin-left: 5%;
    margin-top: 2em;
  }
  .aboutbox-image-holder img, .servicebox-image-holder img {
    margin-bottom: 0;
  }
  
  
  #servicetextcontent p {
    padding: 0;
    width: 90%;
    margin-left: 5%;
  }
  
  .servicebox-image-holder {
  height: 25em;
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: cover;
}
  
  #servicebox-text-float
  {
	  background: none;
	  margin-top: 0;
  } 
  
  /*contact*/
  #contactbox-text {
    width: 100%;
    padding-left: 5%;
    padding-top: 8em;
  }
  #contactbox {
    width: 100%;
  }
  #contactbox-form {
    width: 100%;
    margin-top: 4em;
  }
  #portfoliobox {
    width: 90%;
    padding-left: 5%;
  }
  #contactbox-form input, #contactbox-form select, #contactbox-form textarea {
    width: 90%;
  }
#servicetextcontent h5
{
  margin-top:0.5em;
  border: none;
}
#servicebox *
{
width: 100%;
}

#servicebox p,  #servicebox .six, #contactbox .eleven, iframe
{
  width: 90%;
  margin-left: 5%;
}

.menu p
{
  font-size: 0.9em;
}
  /*portfolio*/
  #portfolio-img a {
    pointer-events: none;
    cursor: default;
  }
  #portfolio-img:hover {
    border: none;
  }
  #portfoliobox .row .three
  {
    width: 100%;
  }
  #portfoliobox .row .three:first-child
  {
    margin-left: 0;
  }

}