/*

	+-------------------------------------------------------------------+
	|	about.css														|
	|	Part of CSS template for Haelvoet								|
	|	Specific styles for the about page								|
	|																	|
	|	Created by Wouter Samyn on 2013-12-17.							|
	|	Copyright (c) 2013 Well Communications. All rights reserved.	|
	+-------------------------------------------------------------------+

	COPY-PASTE VARIABLES
	--------------------
	text grey			999389
	dark grey			2a1f06
	medium grey			534c3a
	border grey			e3e3e3

*/
/*
	+-------------------------------------------------------------------------------------------+
	|											GENERAL											|
	+-------------------------------------------------------------------------------------------+
*/
/*	ELEMENTS	*/
h1 {
  border: none;
  font-size: 28px;
  line-height: 28px;
}
.wrapper.creation {
  background: transparent url("../img/about/1024/about_creation_bg.png") right -50px no-repeat;
  margin-top: -50px;
  padding-top: 100px;
}
#subnavAbout {
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
  border-top: 1px solid #eceae8;
  width: 200px;
}
#subnavAbout li {
  border-bottom: 1px solid #eceae8;
}
#subnavAbout li.active {
  font-weight: bold;
}
#subnavAbout li a {
  display: block;
  line-height: 28px;
  font-size: 15px;
}
.borderSep {
  border-bottom: 1px solid #eceae8;
}
.quote {
  font-family: 'Manuale', serif;
  font-size: 23px;
  font-style: italic;
  line-height: 25px;
  background: transparent url("../img/about/quote_bg.png") right bottom no-repeat;
  padding: 40px 30px 50px 35px;
  max-width: 300px;
  font-weight: 300;
}
.quote span {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-size: 24px;
}
.fr #headerSupplier .quote {
  font-size: 19px;
  line-height: 23px;
  margin-top: -40px;
}
.half {
  width: 47%;
}
.halfM {
  width: 53%;
}
.halfS {
  width: 44%;
}
.left {
  float: left;
}
.right {
  float: right;
}
.intro {
  font-family: 'Manuale', serif;
  font-size: 23px;
  font-style: italic;
  line-height: 30px;
}
.description .col.two p {
  padding-right: 50px;
}
.details h2 {
  font-size: 21px;
}
.details h2 span {
  font-family: 'Manuale', serif;
  font-weight: normal;
  font-style: italic;
  text-transform: none;
  font-size: 24px;
}
#creationDetails img {
  width: 100%;
  margin-bottom: 20px;
}
#headerHistory {
  position: relative;
}
#headerHistory .quote {
  float: right;
  margin-top: 50px;
}
#headerHistory img {
  position: absolute;
  top: 15px;
  left: -50px;
}
#traditionDescr {
  background: transparent url("../img/about/about_history_visual.jpg") left bottom no-repeat;
  min-height: 580px;
}
#traditionDescr .intro {
  padding-right: 30px;
}
#productionVisual {
  min-height: 430px;
  position: relative;
}
#productionVisual .quote {
  width: 300px;
  position: absolute;
  bottom: -30px;
  left: -5px;
}
/*.wrapper.production div img { width:100%; }*/
.wrapper div.bg {
  background-color: #f5f5f1;
  padding: 50px 10% 50px 17%;
}
.wrapper div.bg h3 {
  font-family: 'Manuale', serif;
  font-size: 25px;
  text-transform: none;
  font-style: italic;
}
#headerInnovation {
  position: relative;
}
#headerInnovation .quote {
  float: right;
  margin-top: 20px;
  width: 200px;
}
#headerInnovation img {
  position: absolute;
  top: 60px;
  left: -100px;
  width: auto;
}
.wrapper.innovation div img {
  width: 100%;
}
.wrapper.innovation div.bg {
  padding-left: 5%;
}
.wrapper.innovation .images {
  overflow: hidden;
  height: 308px;
}
.wrapper.future .half {
  margin-top: 95px;
}
.wrapper.future .halfS img {
  width: 100%;
}
.wrapper.future .halfS p {
  width: 80%;
}
.wrapper.future #imgWindmills {
  max-width: 50%;
}
.wrapper.future {
  position: relative;
}
.wrapper.future #imgPEFC {
  position: absolute;
  top: 35px;
  left: 40%;
  max-height: 20rem;
}
.wrapper.future .halfM img {
  width: 100%;
}
.wrapper.service .col.two img {
  width: 100%;
}
#imgGroup {
  width: 100%;
}
/* SUPPLIERS */
#headerSupplier {
  position: relative;
}
#headerSupplier .quote {
  float: right;
  margin-top: 20px;
  width: 200px;
}
#headerSupplier img {
  z-index: -1;
  position: absolute;
  top: 0px;
  left: -100px;
  width: auto;
}
ul#suppliers li {
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 50px;
}
.logo-placeholder {
  border: 3px solid #e3e3e3;
  margin-bottom: 20px;
}
.logo-placeholder .logo {
  border: 20px solid #fff;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  -ms-background-size: contain;
  background-size: contain;
}
ul#suppliers li h3 {
  font-size: 24px;
  font-weight: bold;
  border-bottom: 1px solid #e3e3e3;
  background: transparent url("../img/template/arrow_right_large.png") right top no-repeat;
  margin-bottom: 15px;
}
ul#suppliers li a {
  display: block;
  width: 100%;
  height: 100%;
}
ul#suppliers li h3 span {
  display: inline-block;
  border-bottom: 3px solid #2a1f06;
  padding-bottom: 7px;
}
#supplier.wrapper {
  padding: 0px;
}
#supplier #description {
  margin-top: 10px;
  padding-top: 35px;
  border-top: 1px solid #e3e3e3;
  color: #767676;
}
#supplier #description .left {
  float: left;
  width: 570px;
}
#supplier #description .left p {
  margin-bottom: 40px;
  line-height: 23px;
  font-size: 14px;
}
#supplier #description a.website {
  font-size: 13px;
  font-weight: bold;
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
  color: #767676;
}
#supplier #description .right {
  float: right;
  width: 280px;
}
/*
	+-------------------------------------------------------------------------------------------+
	|										MEDIA QUERIES										|
	+-------------------------------------------------------------------------------------------+
*/
/* ========================= */
/* = SMARTPHONE - PORTRAIT = */
/* ========================= */
@media only screen and (min-width: 0px) and (max-width: 767px) {
  .col {
    width: auto;
    float: none;
  }
  .col.two {
    width: auto;
    float: none;
  }
  .half {
    width: auto;
    margin-bottom: 20px;
  }
  .halfM {
    width: 100%;
    margin-bottom: 20px;
  }
  .halfS {
    width: 100%;
    margin-bottom: 20px;
  }
  .halfM img,
  .halfS img {
    max-width: 100%;
  }
  .wrapper.creation {
    background: none;
    padding-top: 50px;
  }
  #subnavAbout {
    width: 100%;
  }
  .description .col.two p {
    padding-right: 0px;
  }
  #productionVisual {
    min-height: 0px;
    height: auto;
    -ms-background-size: contain;
    background-size: contain;
    background-position: top;
  }
  #productionVisual .quote {
    position: static;
    width: auto;
  }
  #productionVisual .quote br {
    display: none;
  }
  .wrapper.production div.bg {
    padding-left: 10%;
    width: auto;
  }
  #headerHistory img {
    position: static;
    max-width: 100%;
  }
  #headerHistory .quote br {
    display: none;
  }
  #traditionDescr {
    -ms-background-size: contain;
    background-size: contain;
    min-height: 780px;
  }
  #headerInnovation {
    position: relative;
  }
  #headerInnovation .quote {
    width: auto;
    float: none;
  }
  #headerInnovation img {
    position: static;
    max-width: 100%;
  }
  .wrapper.innovation div img {
    width: 100%;
  }
  .wrapper.innovation div.bg {
    padding-left: 5%;
    width: auto;
  }
  .wrapper.innovation .images {
    height: auto;
    overflow: normal;
  }
  .wrapper.future .half.left {
    margin-top: 0px;
  }
  .wrapper.future #imgPEFC {
    position: static;
    float: right;
  }
  .wrapper.service .intro br {
    display: none;
  }
  .wrapper.service .quote br {
    display: none;
  }
  #headerSupplier {
    position: relative;
  }
  #headerSupplier .quote {
    width: auto;
    float: none;
  }
  #headerSupplier img {
    position: static;
    max-width: 100%;
  }
  #supplier #description .left {
    float: none;
    width: auto;
  }
  #supplier #description .right {
    float: none;
    width: auto;
  }
}
/* ========================== */
/* = SMARTPHONE - LANDSCAPE = */
/* ========================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* ===================== */
/* = TABLET - PORTRAIT = */
/* ===================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .quote {
    padding-top: 20px;
  }
  #traditionDescr {
    background: transparent url("../img/about/768/about_history_visual.jpg") left bottom no-repeat;
  }
  #headerHistory img {
    width: 300px;
    top: 90px;
  }
  .wrapper.creation {
    background: transparent url("../img/about/768/about_creation_bg.png") right -50px no-repeat;
  }
  .wrapper.innovation .images {
    overflow: hidden;
    height: 200px;
  }
  .wrapper.innovation .bg {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .wrapper.innovation .bg p br {
    display: none;
  }
  .wrapper.future .half.left {
    margin-top: 20px;
  }
  .wrapper.service .quote br {
    display: none;
  }
  #headerInnovation img {
    width: 300px;
    top: 80px;
    left: -40px;
  }
  #headerSupplier img {
    width: 300px;
    top: 80px;
    left: -40px;
  }
  #supplier #description .left {
    float: left;
    width: 370px;
  }
}
/* ================================ */
/* = TABLET - LANDSCAPE + DESKTOP = */
/* ================================ */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .wrapper.innovation .images {
    overflow: hidden;
    height: 260px;
  }
}
/* =================== */
/* = DESKTOP VERSION = */
/* =================== */
@media only screen and (min-width: 1280px) {
  #supplier #description .left {
    float: left;
    width: 725px;
  }
  .wrapper.innovation div.bg {
    padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 10%;
  }
  #headerInnovation img {
    left: 0px;
  }
  #headerSupplier img {
    left: 0px;
  }
}