/*



 Theme Name:   Transports Dubacqué



 Theme URI:    http://www.dubacque.be



 Description:  Transports Dubacqué - Twenty Sixteen Child Theme



 Author:       Valéry Rougeyres



 Author URI:   http://www.r-infographie.be



 Template:     twentysixteen



 Version:      1.0.0



 License:      GNU General Public License v2 or later



 License URI:  http://www.gnu.org/licenses/gpl-2.0.html



 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready



 Text Domain:  dubacque



*/







@import 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab';

body {

	margin: 0;

	background-color: #282828;

	font-family: 'Open Sans', sans-serif;

}

#page {

	max-width: 1020px;

	margin: auto;

	position: relative;

}

.aligncenter {

	margin: auto;

	display: block;

}

h1, h2 {

	font-family: 'Roboto Slab', serif;

}

h1 {

	text-transform: uppercase;

}

p {

	margin: 0 0 12px 0

}

a {

	color: #da261e;

	text-decoration: none;

}

.fullPage {

	background-color: #e6e6e6;

	margin: 0 -15px;

	padding: 70px 15px 30px;

	position: relative;

}

.fullPage header {

	margin-left: 140px;

}

.fullPage h1 {

	margin-bottom: 2em;

}

.fullPage img {

	width: 100%;

	height: auto;

}

.fullPage:after {

	content: url(img/after-fullPage.png);

	position: absolute;

	left: 50%;

	margin-left: -42px;

	bottom: -50px;

	z-index: 2;

}

/* MENU =================================== */



#menu-toggle {

	display: none

}

@media screen and (max-width: 768px) {

	#site-header-menu{ display:none}

}

#site-header-menu {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	margin: 0 -15px;

	z-index: 2;

}

#site-header-menu ul {

	list-style-type: none;

	margin: 0;

	display: flex;

	justify-content: space-around;

	background-color: rgba(0,0,0,0.30);

	padding: 15px 0 15px 155px;

}

#site-header-menu li.current-menu-item a {

	color: #da261e;

}

#site-header-menu a {

	text-decoration: none;

	color: white;

	font-family: 'Roboto Slab', serif;

	text-transform: uppercase;

}

#site-header-menu a:hover {

	color: #da261e;

}

/* HEADER ================================= */







#header {

	background-color: #92e6ea;

	position: relative;

}

#header h1, #header h2 {

	color: #014a51;

}

#header .sow-image-container {

	position: relative;

}

#header .sow-image-container img {

	display: block;

}

img.cache {

	width: 100%;

	height: auto;

}

.visuel > div > div:after {

	content: '';

	background: url(img/cache.png) no-repeat 0 bottom;

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-size: contain

}

#header .panel-grid-cell {

	padding: 0!important;

}

.site-branding {

	position: absolute;

	top: 10px;

	left: 0;

	z-index: 10;

}

.site-info-hp{

	position:absolute;

	top:60px;

	left:150px;

}

.site-info-hp h1, .site-info-hp h2{

	margin:0;

	padding:0;

}

.site-info-hp h2{

	font-size:.9em;

}

/* CHARTS ===*/



.chart {

	position: relative;

	/*width: 100%;*/



  /*height: 230px;



  margin-top: 50px;



  margin-bottom: 50px;*/



	text-align: center;

	color: rgba(255,255,255,0.50)!important;

	text-transform: uppercase;

	padding: 80px 0;

}

.charts li {

	float: left;

	width: calc(94%/4);

	color: #575849;

	position: relative;

}

.chart strong {

	color: white!important;

	font-size: 1.2em;

}

.chart canvas {

	position: absolute;

	top: 50%;

	left: 50%;

	margin-left: -100px;

	margin-top: -100px;

}

/* MATERIEL ========================== */



#materiel {

	background-color: #92e6ea;

	position: relative;

}

.sow-headline-container {

	text-align: center;

}

#materiel h1 {

	padding: 4px 0 3px 0;

	color: #3f4035;

	position: relative;

	display: inline-block;

	margin-bottom: 40px!important;

	font-weight: normal;

}

#materiel h1:before {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	content: '';

	border-top: 1px solid rgba(63,64,53,0.25)

}

#materiel h1:after {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	content: '';

	border-bottom: 1px solid rgba(63,64,53,0.25)

}

#materiel:after {

	content: url(img/after-materiel.png);

	position: absolute;

	left: 50%;

	margin-left: -42px;

	bottom: -50px;

	z-index: 2;

}

.materiel, .actualites, .charts {

	list-style-type: none;

	overflow: hidden;

	margin: 0;

	padding: 0

}

.materiel, .actualites {

	display: flex;

	justify-content: center;

	flex-wrap:wrap;

}

.materiel li, .actualites li, .charts li, #colophon .widget-area section {

	width: calc(94%/4);

	color: #575849;

	position: relative;

	font-size: .8em;

}

@media screen and (max-width: 768px) {

	.materiel li, .actualites li, .charts li, #colophon .widget-area section {

		width: calc(98%/2);

	}

}

@media screen and (max-width: 480px) {

	.materiel li, .actualites li, .charts li, #colophon .widget-area section {

		width: 100%;

	}

}

.materiel li > a {

	position: relative;

	display: block;

}

.materiel li > a:first-child:after {

	content: url(img/plus-materiel.png);

	position: absolute;

	bottom: 2px;

	right: 2px;

}

.materiel.parc li > a:first-child:after {

	content: "";

}

.materiel.parc li img {

}

.materiel li + li, .actualites li + li, .charts li + li, #colophon .widget-area section + section {

	margin-left: 2%;

}

@media screen and (max-width: 768px) {

	.materiel li + li, .actualites li + li, .charts li + li, #colophon .widget-area section + section {

		margin-left: 0;

	}

	.materiel li:nth-child(2n), .actualites li:nth-child(2n), .charts li:nth-child(2n), #colophon .widget-area section:nth-child(2n) {

		margin-left: 2%;

	}

}

@media screen and (max-width: 480px) {

	.materiel li + li, .actualites li + li, .charts li + li, #colophon .widget-area section + section {

		margin-left: 0;

	}

	.materiel li:nth-child(2n), .actualites li:nth-child(2n), .charts li:nth-child(2n), #colophon .widget-area section:nth-child(2n) {

		margin-left: 0;

	}

}

.materiel li h3 {

	margin: 6px 0;

}

.materiel li a, .actualites li a {

	text-decoration: none;

	color: black;

}

.materiel li img, .actualites li img {

	width: 100%;

	height: auto;

}

/* DESTINATIONS =========================== */



#destinations {

	background-color: #5fcb6d;

	position: relative;

}

#destinations h1 {

	padding: 4px 0 3px 0;

	color: white;

	position: relative;

	display: inline-block;

	margin-bottom: 30px!important;

	font-weight: normal;

	z-index:3

}

#destinations h1:before {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	content: '';

	border-top: 1px solid rgba(255,255,255,0.25)

}

#destinations h1:after {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	content: '';

	border-bottom: 1px solid rgba(255,255,255,0.25)

}

#destinations:before {

	content: url(img/destinations-intro.png);

	position: absolute;

	right: 0;

	top: -10px;

	z-index: 2;

}

#destinations:after {

	content: url(img/after-destinations.png);

	position: absolute;

	left: 50%;

	margin-left: -42px;

	bottom: -50px;

	z-index: 2;

}

.siteorigin-widget-tinymce.textwidget{

	position:relative;

}

#canvas {

	width:100%!important;

	height:auto!important;

  }

/* MATERIAUX ======================== */



#materiaux, #materiauxPie {

	background-color: #4e9ca4;

	position: relative;

}

#materiaux h1 {

	padding: 4px 0 3px 0;

	color: white;

	position: relative;

	display: inline-block;

	margin-bottom: 10px!important;

	font-weight: normal;

	z-index:3;

}

#materiaux h1:before {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	content: '';

	border-top: 1px solid rgba(255,255,255,0.25)

}

#materiaux h1:after {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	content: '';

	border-bottom: 1px solid rgba(255,255,255,0.25)

}

#materiaux:before {

	content: url(img/materiaux-intro.png);

	position: absolute;

	left: 0;

	top: -10px;

	z-index: 2;

}

#materiaux:after {

	content: url(img/after-materiaux.png);

	position: absolute;

	left: 50%;

	margin-left: -42px;

	bottom: -50px;

	z-index: 2;

}

/* ACTUALITES ======================== */



#actualites {

	background-color: #ff7f78;

	position: relative;

	display:none;

}

#actualites h1 {

	padding: 4px 0 3px 0;

	color: white;

	position: relative;

	display: inline-block;

	margin-bottom: 20px!important;

	font-weight: normal;

}

#actualites h1:before {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	content: '';

	border-top: 1px solid rgba(255,255,255,0.25)

}

#actualites h1:after {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	content: '';

	border-bottom: 1px solid rgba(255,255,255,0.25)

}

#actualites:after {

	content: url(img/after-actualites.png);

	position: absolute;

	left: 50%;

	margin-left: -42px;

	bottom: -50px;

	z-index: 2;

}

.actualites {

	overflow: visible;

}

.actualites li {

	background-color: white;

	-webkit-transition: all .25s linear;

	-moz-transition: all .25s linear;

	-ms-transition: all .25s linear;

	-o-transition: all .25s linear;

	transition: all .25s linear;

}

.actualites li:hover {

	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.5);

	box-shadow: 0 0 15px 0 rgba(0,0,0,.5);

}

.actualites li:after {

	content: url(img/plus-actualite.png);

	position: absolute;

	bottom: -4px;

	right: 0px;

}

.actualites li h3 {

	margin: 6px 0;

	padding: 0 6px;

}

.actualites li p {

	padding: 0 6px;

}

.actualites li span.date {

	padding: 0 4px 0 6px;

	background-color: #ff7f78;

	color: white;

	position: absolute;

	right: 0;

	margin-top: -22px;

}

/* FOOTER ============================= */



#colophon {

	background-color: #ffb878;

	padding: 70px 20px 20px 20px;

	margin-left: -15px;

	margin-right: -15px;

	color: white;

}

#colophon .widget-area section {

	color: white;

	text-transform: uppercase

}

#colophon ul {

	list-style-type: none;

	margin: 0;

	padding: 0;

}

#colophon a {

	color: white;

	text-decoration: none;

}

#colophon .widget-area {

	display: flex;

	justify-content: center;

	flex-wrap:wrap;

}

h2.widget-title {

	padding: 4px 0 3px 0;

	color: white;

	position: relative;

	text-align: center;

	text-transform: uppercase;

	font-weight: normal;

	margin-bottom: 20px!important;

}

h2.widget-title:before {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	content: '';

	border-top: 1px solid rgba(255,255,255,0.25)

}

h2.widget-title:after {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	content: '';

	border-bottom: 1px solid rgba(255,255,255,0.25)

}

.site-info {

	padding: 20px 0 0 0;

	text-align: center;

	font-size: .75em;

}

.site-info, .site-info a {

	color: rgba(255,255,255,0.50)!important;

}