/*

	+-------------------------------------------------------------------+
	|	home.css														|
	|	Part of CSS template for Haelvoet								|
	|	Specific styles for the homepage								|
	|																	|
	|	Created by Wouter Samyn on 2013-07-23.							|
	|	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 {
  font-size: 28px;
  border: none;
  margin-bottom: 0px;
  margin-top: 0px;
}
h2 {
  font-size: 14px;
  font-weight: normal;
}
/*	CLASSES		*/
#newsWrapper {
  background: transparent url("../img/distributors/sidebar_seperator.png") 710px top repeat-y;
  padding-top: 0px;
}
#newsOverview li {
  width: 45%;
  margin-right: 5%;
  float: left;
  margin-bottom: 60px;
  position: relative;
  cursor: pointer;
}
#newsOverview li img {
  max-width: 100%;
}
#newsOverview li h3 {
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  text-transform: none;
  margin-bottom: 10px;
}
#newsOverview li.color_1 h3 {
  color: #f59c2b;
}
#newsOverview li.color_2 h3 {
  color: #ae1458;
}
#newsOverview li.color_3 h3 {
  color: #ee8078;
}
#newsOverview li p.category {
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
}
#newsOverview li p.data {
  border: 1px solid #e3e3e3;
  border-width: 1px 0px;
  font-family: 'Khand', Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
#newsOverview li p a {
  font-family: 'Khand', Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}
#newsOverview li p.data a {
  float: right;
  line-height: 30px;
}
#newsOverview li p.data span {
  display: inline-block;
  background: transparent url("../img/news/calendar_orange.png") left center no-repeat;
  padding-left: 23px;
  padding-right: 5px;
  line-height: 30px;
  border-bottom: 2px solid #2a2422;
}
#newsOverview li.color_2 p.data span {
  background-image: url("../img/news/calendar_purple.png");
}
#newsOverview li.color_3 p.data span {
  background-image: url("../img/news/calendar_pink.png");
}
#newsOverview li.color_1 a.follow {
  color: #f59c2b;
}
#newsOverview li.color_2 a.follow {
  color: #ae1458;
}
#newsOverview li.color_3 a.follow {
  color: #ee8078;
}
#sidebar h3 {
  font-size: 18px;
  font-family: 'Khand', Arial, sans-serif;
  font-weight: 500;
  padding-left: 43px;
  margin-bottom: 20px;
  margin-left: 50px;
}
#sidebar ul {
  margin-left: 50px;
}
#sidebar li {
  font-size: 14px;
  font-family: 'Khand', Arial, sans-serif;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  padding: 10px 10px 10px 45px;
}
#sidebar li.active {
  font-weight: bold;
  background-color: #f5f5f1;
}
#sidebar li:hover {
  background-color: #f5f5f1;
}
#details {
  background: transparent url("../img/distributors/sidebar_seperator.png") 105px top repeat-y;
}
#details .overview {
  width: 80px;
  float: left;
  margin-right: 60px;
}
#details .newsitem {
  width: 470px;
  float: left;
}
#details .data {
  font-family: 'Khand', Arial, sans-serif;
  font-size: 14px;
  line-height: 30px;
  border: 1px solid #e3e3e3;
  border-width: 1px 0px;
  text-transform: uppercase;
}
#details .data span {
  display: inline-block;
  background: transparent url("../img/news/calendar_orange.png") left center no-repeat;
  padding-left: 23px;
  padding-right: 5px;
}
#details .data a.cat {
  float: right;
  font-weight: bold;
  font-size: 15px;
}
#details #gallery .carousel {
  height: 330px;
}
#details #gallery .carousel li img {
  height: 330px;
}
#details h3 {
  font-family: 'Arial', sans-serif;
  font-size: 21px;
  color: #f59c2b;
  text-transform: none;
}
#details #newsDownloads {
  margin-top: 5px;
}
#details #newsDownloads li {
  background: transparent url("../img/template/arrow_right.png") 2px 4px no-repeat;
  padding-left: 15px;
}
.pages {
  font-family: 'Khand', Arial, sans-serif;
  font-size: 16px;
  float: left;
  background-color: #f5f5f1;
  padding-left: 10px;
  font-weight: 500;
}
.pages a {
  display: inline-block;
  width: 30px;
  text-align: center;
  line-height: 30px;
  font-weight: 400;
  -webkit-transition: 0.3s all;
  -o-transition: 0.3s all;
  transition: 0.3s all;
}
.pages a:hover {
  background-color: #cfd0ca;
}
.pages strong {
  display: inline-block;
  width: 30px;
  text-align: center;
  background-color: #534c3a;
  color: #fff;
  line-height: 30px;
  font-weight: 400;
}
/*
	+-------------------------------------------------------------------------------------------+
	|										MEDIA QUERIES										|
	+-------------------------------------------------------------------------------------------+	
*/
/* ========================= */
/* = SMARTPHONE - PORTRAIT = */
/* ========================= */
@media only screen and (min-width: 0px) and (max-width: 767px) {
  #sidebar {
    display: none;
  }
  #newsOverview {
    width: 100%;
    float: none;
  }
  #newsOverview li {
    width: 100%;
    margin: 0px;
    float: none;
    margin-bottom: 60px;
  }
  #details {
    width: 100%;
    float: none;
    background-image: none;
  }
  #details .overview {
    width: 100%;
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  #details .newsitem {
    width: 100%;
    float: none;
  }
}
/* ========================== */
/* = SMARTPHONE - LANDSCAPE = */
/* ========================== */
/* ===================== */
/* = TABLET - PORTRAIT = */
/* ===================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #newsWrapper {
    background-position: 565px 0px;
  }
  #details .newsitem {
    width: 340px;
    float: left;
  }
  #details #gallery .carousel {
    height: 250px;
  }
  #details #gallery .carousel li img {
    height: 250px;
  }
}
/* ================================ */
/* = TABLET - LANDSCAPE + DESKTOP = */
/* ================================ */
/* =================== */
/* = DESKTOP VERSION = */
/* =================== */
@media only screen and (min-width: 1280px) {
  #newsWrapper {
    background-position: 825px 0px;
  }
  #details .newsitem {
    width: 580px;
    float: left;
  }
}