/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
::-moz-selection {background: #E2E6E7; text-shadow: none;} /*avant : #E2E6E7*/
::selection {background: #E2E6E7; text-shadow: none;}/*avant : #E2E6E7*/

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* sticky footer ************************************************************ */
* {margin: 0;}
html, body {height: 100%;}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;}

footer, .push {height: 50px; clear: both;}

/* stucture **************************************************************** */
html {overflow-y: scroll;}

body {background-color:#C3CBD0;}

header {
height:153px;
background-image: url(../img/header-footer/bg-header.png);
background-repeat:repeat-x;
width:100%;}

.shadow {
width:100%;
height:22px;
background-image:url(../img/header-footer/shadow.png);
background-repeat:no-repeat;
background-position:center;}

.main {
width:960px;
margin-right:auto;
margin-left:auto;
position:relative;}

footer {background-color:#9AA4AC; width:100%;}

/* header : logo, menu principaln menu langues *********************************************************** */
.header-content {
width:960px;
height:153px;
margin-left:auto;
margin-right:auto;
position:relative;}

.logo, ul.menu {position:absolute;}

.logo {
width:180px;
height:153px;
left:0px;
top:0px;}

ul.menu {
font-family:'Dosis', sans-serif;
font-size:16px;
list-style-type:none;
right:0;
top:84px;
margin:0;
height: 46px;}

.lt-ie6 .wrapper header nav ul.menu, .lt-ie7 .wrapper header nav ul.menu,
.lt-ie8 .wrapper header nav ul.menu, .lt-ie9 .wrapper header nav ul.menu,
.lt-ie10 .wrapper header nav ul.menu, .ie10 .wrapper header nav ul.menu {font-weight:600;}s

ul.menu li, ul.menu li a {display:block; height:46px;}
ul.menu li {float:left; position:relative;}

ul.menu li a {
line-height:46px;
padding:0 12px;
background-image: url(../img/menu/bg-menu.png);
background-repeat:repeat-x;
text-align: center;
color:#525E64;
text-transform:uppercase;}

ul.menu li.first a:before, ul.menu li.last a:before {
content: "";
position:absolute;
top:0;
width:22px;
height:46px;}

ul.menu li.first a:before {
background-image:url(../img/menu/bg-menu-00.png);
left:0;}

ul.menu li.last a:before {
background-image:url(../img/menu/bg-menu-08.png);
right:0;}

ul.menu li.current.first a:before, ul.menu li.current.first:hover a:before {background-image:url(../img/menu/bg-menu-active-00.png);}
ul.menu li.current.last a:before, ul.menu li.current.last:hover a:before{background-image:url(../img/menu/bg-menu-active-08.png);}

ul.menu li.first:hover a:before {background-image:url(../img/menu/bg-menu-hover-00.png);}
ul.menu li.last:hover a:before {background-image:url(../img/menu/bg-menu-hover-08.png);}

ul.menu li.menu1 a {padding-left:0; margin-left:22px;}
ul.menu li.menu7 a {padding-right:0; margin-right:22px;}

ul.menu li.menu1.current a, ul.menu li.menu2.current a,
ul.menu li.menu3.current a, ul.menu li.menu4.current a,
ul.menu li.menu5.current a, ul.menu li.menu6.current a, ul.menu li.menu7.current a {color:#FFF;}

.menu1 a {background-image:url(../img/menu/bg-menu1.png)}
.menu2 a {background-image:url(../img/menu/bg-menu2.png)}
.menu3 a {background-image:url(../img/menu/bg-menu3.png)}
.menu4 a {background-image:url(../img/menu/bg-menu4.png)}
.menu5 a {background-image:url(../img/menu/bg-menu5.png)}
.menu6 a {background-image:url(../img/menu/bg-menu6.png)}
.menu7 a {background-image:url(../img/menu/bg-menu7.png)}

.menu1:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu2:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu3:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu4:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu5:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu6:hover a {background-image:url(../img/menu/bg-menu-hover.png)}
.menu7:hover a {background-image:url(../img/menu/bg-menu-hover.png)}

.menu1.current a, .menu1.current:hover a {background-image:url(../img/menu/bg-menu-active-01.png);}
.menu2.current a, .menu2.current:hover a {background-image:url(../img/menu/bg-menu-active-02.png);}
.menu3.current a, .menu3.current:hover a {background-image:url(../img/menu/bg-menu-active-03.png);}
.menu4.current a, .menu4.current:hover a {background-image:url(../img/menu/bg-menu-active-04.png);}
.menu5.current a, .menu5.current:hover a {background-image:url(../img/menu/bg-menu-active-05.png);}
.menu6.current a, .menu6.current:hover a {background-image:url(../img/menu/bg-menu-active-06.png);}
.menu7.current a, .menu7.current:hover a {background-image:url(../img/menu/bg-menu-active-07.png);}

div.separation {
height:46px;
background-image:url(../img/menu/bg-menu-separation.png);
width:2px;
float:left;}

.header-content .menu div.separation.last {display:none;}

ul.nav-lang {
position:absolute;
top:18px;
right:0;
padding:0;
margin:0;}

ul.nav-lang li {
display:block;
float:left;
list-style:none;
margin-left:5px;}

ul.nav-lang li a {color:#555555; display:block; float:left;}
ul.nav-lang li.current a, ul.nav-lang li:hover a {color:#A5A5A5;}

.lang-separation {color:#FFF; float:left; margin-left:5px;}

/* index **************************************************************** */
.bg-index-slider {
width:960px;
height:428px;
margin-top:14px;
margin-left:auto;
margin-right:auto;
background-image:url(../img/header-footer/bg-slider-index.png);
background-repeat:no-repeat;
position:relative;}

.index-slider {
position:absoute;
top:11px;
left:12px;
width:936px;
height:383px;}

.index-slider img {display:none;}
.index-slider img:first-child {display:block;}

div.slider-bullets-nav-wrapper {
width:938px;
height:12px;
left:0;
bottom:55px;
margin:0 12px;
padding:0;
position: absolute;
text-align: center;
z-index: 101;}

ul.slider-bullets-nav {
display: inline-block;
margin:0;
padding:0}

.slider-bullet-on, .slider-bullet-off {
background-repeat: no-repeat;
height: 12px;
width: 12px;
display:block;
float:left;
cursor: pointer;
margin:0 6px;}

.slider-bullet-off {background-image: url('../img/slider/slider-bullet-off.gif');}
.slider-bullet-on {background-image: url('../img/slider/slider-bullet-on.gif');}

.group-sub-menu {
background-image:url(../img/sub-menu/bg-group-sub-menu.png);
width:960px;
height:38px;}

.group-sub-menu-01, .group-sub-menu-02 {
width:446px;
text-align:center;
font-family:'Dosis';
font-weight:500;
font-size:21px;
color:#F2F3F4;
letter-spacing:10px;
float:left;
margin-top:10px;}

.group-sub-menu-01 {margin-left:29px;}
.group-sub-menu-02 {margin-right:29px;}

/* sub-menu **************************************************************** */
.sub-nav {
height:201px;
width:960px;
margin-top:10px;
background-image:url(../img/sub-menu/sub-menu-shadow.png);
background-repeat:no-repeat;
background-position:bottom left;}

.sub-nav.index {height:239px;}

ul.sub-menu {
margin:0;
padding-left:12px;
padding-top:12px;
width:948px;
height:164px;
background-image:url(../img/sub-menu/bg-sub-menu.png);}

ul.sub-menu li {
list-style-type:none;
background-repeat:no-repeat;
height:153px;
width:146px;
float:left;
display:block;
margin-left:12px;}

ul.sub-menu a, ul.sub-menu span {
height:153px;
width:146px;
display:block;
text-align:center;
color:#FFF;
font-family:'Dosis', sans-serif;
font-weight:500;
font-size:18px;
line-height:255px;
text-transform: uppercase;}

.lt-ie6 ul.sub-menu a, .lt-ie7 ul.sub-menu a,
.lt-ie8 ul.sub-menu a, .lt-ie9 ul.sub-menu a,
.lt-ie10 ul.sub-menu a, .ie10 ul.sub-menu a,
.lt-ie6 ul.sub-menu span, .lt-ie7 ul.sub-menu span,
.lt-ie8 ul.sub-menu span, .lt-ie9 ul.sub-menu span,
.lt-ie10 ul.sub-menu span, .ie10 ul.sub-menu span {font-weight:600;}

ul.sub-menu li.first {margin-left:0;}
ul.sub-menu li.last {margin-right:0;}

li.sub-menu-01 {background-image:url(../img/sub-menu/sub-menu-01.png);}
li.sub-menu-02 {background-image:url(../img/sub-menu/sub-menu-02.png);}
li.sub-menu-03 {background-image:url(../img/sub-menu/sub-menu-03.png);}
li.sub-menu-04 {background-image:url(../img/sub-menu/sub-menu-04.png);}
li.sub-menu-05 {background-image:url(../img/sub-menu/sub-menu-05.png);}
li.sub-menu-06 {background-image:url(../img/sub-menu/sub-menu-06.png);}

li.sub-menu-01:hover, li.sub-menu-01.current {background-image:url(../img/sub-menu/sub-menu-hover-01.png);}
li.sub-menu-02:hover, li.sub-menu-02.current {background-image:url(../img/sub-menu/sub-menu-hover-02.png);}
li.sub-menu-03:hover, li.sub-menu-03.current {background-image:url(../img/sub-menu/sub-menu-hover-03.png);}
li.sub-menu-04:hover {background-image:url(../img/sub-menu/sub-menu-hover-04.png);}
li.sub-menu-05:hover {background-image:url(../img/sub-menu/sub-menu-hover-05.png);}
li.sub-menu-06:hover {background-image:url(../img/sub-menu/sub-menu-hover-06.png);}

li.sub-menu-04.current, li.sub-menu-04.current:hover {background-image:url(../img/sub-menu/sub-menu-hover-04-bis.png);}
li.sub-menu-05.current, li.sub-menu-05.current:hover {background-image:url(../img/sub-menu/sub-menu-hover-05.png);}
li.sub-menu-06.current, li.sub-menu-06.current:hover {background-image:url(../img/sub-menu/sub-menu-hover-06-bis.png);}

ul.sub-menu li.sub-menu-img-products {
height:153px;
width:462px;
background-image:url(../img/sub-menu/img-products.png);}

ul.sub-menu li.sub-menu-img-services {
height:153px;
width:462px;
background-image:url(../img/sub-menu/img-services.png);}

/* pages intérieures ********************************************************** */
.content {
background-color:#FFF;
padding:0;
width: 960px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
behavior: url(http://localhost/espy/addons/shared_addons/themes/espy/css/pie/PIE.htc);
margin-top:11px;}

.content.services h2 {color: #A1BECB;}

.content-shadow {
background-image:url(../img/sub-menu/sub-menu-shadow.png);
background-repeat:no-repeat;
background-position:bottom left;
width:960px;
height:25px;}

.col1{width:856px; padding:42px; padding-bottom:0;}
.col1-2, .col2-2 {width:428px; padding-top:42px;}
.col1-2 {float:left; padding-left:36px;}
.col2-2 {float:right; padding-right:36px;}

.col1-2, .col2-2 img {width:438px; margin-bottom:40px;}

.col1-3, .col2-3, .col3-3 {width:248px; float:left; padding:42px 36px;}
.col1-3 {}
.col2-3 {background-color:#F4F5F6;}
.col3-3 {}

.col1-3 img, .col2-3 img, .col3-3 img {width:248px; margin-bottom:20px;}

.bg-banner {
height:201px;
width:960px;
margin-top:10px;
background-image:url(../img/sub-menu/sub-menu-shadow.png);
background-repeat:no-repeat;
background-position:bottom left;}

.banner {
margin:0;
padding-left:12px;
padding-top:12px;
width:948px;
height:164px;
background-image:url(../img/sub-menu/bg-sub-menu.png);}

.banner img {
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
behavior: url(http://localhost/espy/addons/shared_addons/themes/espy/css/pie/PIE.htc);
display:none;}

.banner img:first-child {display:block;}

/* references ************************************************************ */
div.reference {
width:888px;
border-bottom: 1px solid #C3CBD0;
padding-bottom:20px;
margin-bottom:20px;
margin-left:36px;}

div.reference-img,
div.reference-text {float:left;}

div.reference-img {
width:247px;
border:6px solid #C3CBD0;
-webkit-box-shadow: #97A8B2 2px 2px 2px;
-moz-box-shadow: #97A8B2 2px 2px 2px;
box-shadow: #97A8B2 2px 2px 2px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
behavior: url(http://localhost/espy/addons/shared_addons/themes/espy/css/pie/PIE.htc);}

div.reference-img img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(http://localhost/espy/addons/shared_addons/themes/espy/css/pie/PIE.htc);}

div.reference-text {margin-left:31px; width:590px;}

div.reference-text h2 {
font-size:24px;
font-weight:normal;}

.lt-ie6 div.reference-text h2, .lt-ie7 div.reference-text h2, .lt-ie8 div.reference-text h2, .lt-ie9 div.reference-text h2, .lt-ie10 div.reference-text h2, .ie10 div.reference-text h2 {}

ul.pagination-references, ul.pagination-news {
float:right;
font-size:18px;
padding-right:36px;}

ul.pagination-references li, ul.pagination-news li {
float:left;
padding:0 10px 0 0;
list-style:none;
display:block;}

ul.pagination-references li a:link,
ul.pagination-references li a.visited,
ul.pagination-news li a:link,
ul.pagination-news li a.visited {color:#C3CBD0;}

ul.pagination-references li a:hover, ul.pagination-references li a.active {color:#E3246F;}
ul.pagination-news li a:hover, ul.pagination-news li a.active {color:#B07F48;}

/* news ****************************************************************** */
.bg-categories {
height:96px; /* 71 + 25 */
width:960px;
margin-top:10px;
background-image:url(../img/news/news-categories-shadow.png);
background-repeat:no-repeat;
background-position:bottom left;}

.categories {
margin:0;
width:960px;
height:61px;
padding-top:10px;
background-image:url(../img/news/bg-news-categories.png);}

ul.news-categories {
margin-left:24px;
margin-bottom:0;
font-size:20px;
width:912px;
height:50px;
text-transform:uppercase;}

.lt-ie6 ul.news-categories,
.lt-ie7 ul.news-categories,
.lt-ie8 ul.news-categories,
.lt-ie9 ul.news-categories,
.lt-ie10 ul.news-categories,
.ie10 ul.news-categories {font-family:'TitilliumText22LBold';}

ul.news-categories li {
float:left;
padding:0 20px 0 0;
list-style:none;}

ul.news-categories li a.current {text-decoration:underline;}

div.news-date, div.news-categorie {
font-size:14px;
margin-bottom:10px;
font-family:'TitilliumText22LBold';}

div.news-date {
float:left;
margin-right:10px;
color:#C3CBD0;}

/* contact **************************************************************** */
.content.contact .col1-2 {width:232px;}
.content.contact .col2-2 {width:620px; padding-bottom:42px;}

.content.contact h3, .content.contact a {color:#E6511E;}

.lt-ie6 .content.contact h3, .lt-ie7 .content.contact h3, .lt-ie8 .content.contact h3, .lt-ie9 .content.contact h3, .lt-ie10 .content.contact h3, .ie10 .content.contact h3 {font-family:'TitilliumText22LBold';}

/* partners *************************************************************** */
.content.partners .col1-2-assymetric, .content.partners .col2-2-assymetric {padding-top:42px;}

.content.partners .col1-2-assymetric {
width:643px;
float:left;
padding-left:36px;}

.content.partners .col2-2-assymetric {
width:245px;
float:right;
padding-right:36px;}

.content.partners h3, .content.partners a {color:#DEA91E;}

.partners-wrapper {
margin: 20px 40px;
height:70px;
overflow:hidden;
width:880px;}

.partners-wrapper ul {padding:0; margin:0;}

.partners-wrapper li {
list-style: none;
float:left;
height:70px;}

.lt-ie6 .content.partners h3, .lt-ie7 .content.partners h3, .lt-ie8 .content.partners h3, .lt-ie9 .content.partners h3, .lt-ie10 .content.partners h3, .ie10 .content.partners h3 {font-family:'TitilliumText22LBold';}

ul.button-partner {
font-family:'Dosis';
font-weight:500;
font-size:18px;
list-style-type:none;
right:0;
top:0px;
margin:0;
height: 46px;
float:right;}

ul.button-partner li,
.content.partners ul.button-partner li a {display:block; height:46px;}

ul.button-partner li {float:left; position:relative;}

.content.partners ul.button-partner li a {
line-height:46px;
padding:0 12px;
background-image: url(../img/menu/bg-menu-active-07.png);
background-repeat:repeat-x;
text-align: center;
text-transform:uppercase;
padding-left:0;
margin-left:22px;
padding-right:0;
margin-right:22px;
color:#FFF;}

ul.button-partner li a:before, ul.button-partner li a:after {
content: "";
position:absolute;
top:0;
width:22px;
height:46px;}

ul.button-partner li a:before {background-image:url(../img/menu/bg-menu-active-00-yellow.png); left:0;}
ul.button-partner li a:after {background-image:url(../img/menu/bg-menu-active-08.png); right:0px;}

.content.partners ul.button-partner li:hover a {background-image:url(../img/menu/bg-menu.png); color:#525E64;}

ul.button-partner li:hover a:before {background-image:url(../img/menu/bg-menu-00.png);}
ul.button-partner li:hover a:after {background-image:url(../img/menu/bg-menu-08.png);}


/* textes **************************************************************** */
html, button, input, select, textarea {color: #3E5459;}

body {font-size: 15px; line-height: 18px; font-family:'TitilliumText22LLight';}

h1, h2, h3, h4 {font-weight:normal; margin:15px 0 0 0;}

h1 {
font-family:'TitilliumText22LBold';
font-size:30px;
line-height:36px;
color:#A4A4A5;
margin-top:0;
text-transform:uppercase;}

h2 {
color:#9AA4AC;
font-family: 'TitilliumText22LRegular';
font-size: 25px;
line-height: 32px;
margin-top: 0;
text-transform: uppercase;}

.editable-content.photovoltaique h2, h2.photovoltaique {background-image:url(../img/download/picto-photovoltaique.png);}
.editable-content.cogeneration h2, h2.cogeneration {background-image:url(../img/download/picto-cogeneration.png);}
.editable-content.chaudiere-bois h2,h2.chaudiere-bois {background-image:url(../img/download/picto-chaudiere-bois.png);}
.editable-content.divers h2, h2.divers {background-image:url(../img/download/picto-divers.png);}

.editable-content.photovoltaique h2,
.editable-content.cogeneration h2,
.editable-content.chaudiere-bois h2,
.editable-content.divers h2,
h2.photovoltaique, h2.cogeneration,
h2.chaudiere-bois, h2.divers {
background-repeat:no-repeat;
padding-left:53px;
padding-top:15px;}

p {margin:10px 0 0 0;}

a {text-decoration:none;}
b, strong, .bold {font-weight: normal; font-family:'TitilliumText22LBold', sans-serif;}

ul {padding-left:20px;}

.editable-content.orange ul li, ul.orange li {list-style-image: url(../img/bullet-orange.png);color:#E6511E;}
.editable-content.blue ul li, ul.blue li {list-style-image: url(../img/bullet-blue.png);color:#172982;}
.editable-content.green ul li, ul.green li {list-style-image: url(../img/bullet-green.png);color:#00892E;}
.editable-content.light-green ul li, ul.light-green li {list-style-image: url(../img/bullet-light-green.png);color:#85AB0C;}

.editable-content.blue a, .editable-content.blue h2, a.blue {color:#172982;}
.editable-content.orange a, .editable-content.orange h2, a.orange {color:#E6511E;}
.editable-content.green a, .editable-content.green h2, a.green {color:#00892E;}
.editable-content.light-green a, .editable-content.light-green h2, a.light-green {color:#85AB0C;}
.editable-content.light-gray a, .editable-content.light-gray h2, a.light-gray {color:#A1BECB;}
.editable-content.brown a, .editable-content.brown h2, a.brown {color:#B07F48;}
.editable-content.pink a, .editable-content.pink h2, a.pink {color:#E3246F;}

a {color:#3E5459; text-decoration:none;}
a:hover {color:#9AA4AC;}

.editable-content a.blue:hover,a.blue:hover {color:#172982;}
.editable-content a.orange:hover,a.orange:hover {color:#E6511E;}
.editable-content a.green:hover, a.green:hover {color:#00892E;}
.editable-content a.light-green:hover, a.light-green:hover {color:#85AB0C;}
.editable-content a.light-gray:hover, a.light-gray:hover {color:#97B7C6;}
.editable-content a.brown:hover, a.brown:hover {color:#B07F48;}
.editable-content a.pink:hover, a.pink:hover {color:#E3246F;}

.editable-content a {font-family:'TitilliumText22LBold';}

/* bandeau news défilantes ********************************************************** */
.banner-news {
width:961px;
height:46px;
background-image: url(../img/header-footer/bg-banner-news.png);
padding-top:14px;
margin-bottom:20px;}

.banner-news .tickercontainer { /* the outer div with the black border */
width: 920px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
margin-left:40px;}

.banner-news .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 907px;
overflow: hidden;}

ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: 16px 'Dosis';
color:#54727A;
list-style-type: none;
margin: 0;
padding: 0;}

.lt-ie6 ul.newsticker, .lt-ie7 ul.newsticker,
.lt-ie8 ul.newsticker, .lt-ie9 ul.newsticker,
.lt-ie10 ul.newsticker, .ie10 ul.newsticker {font-weight:600;}

ul.newsticker li {
float: left;
margin: 0;
padding: 0;
list-style:none;}

ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #54727A;
margin: 0 50px 0 0;}

ul.newsticker span {margin: 0 10px 0 0;}
ul.newsticker span.date {color:#E95D0F; margin-left:20px;}

/* footer **************************************************************** */
.footer-content {
width:960px;
height:30px;
margin-left:auto;
margin-right:auto;
color:#FFF;
font-size:14px;
line-height:17px;}

ul.footer-item {
height:50px;
font-family:'TitilliumText22LRegular', sans-serif;
font-size:12px;
color:#FFF;
padding:0;
margin:0;}

ul.footer-item li {
display:block;
float:left;
list-style-type: none;
padding-top:18px;
padding-right:10px;}

ul.footer-item li a {color:#FFF;}
ul.footer-item li a:hover {color:#CCC;}

span.bull {padding-left:10px;}

ul.footer-item li.linkedin {padding-top:15px;}



/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;}

.hidden {
display: none !important;
visibility: hidden;}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;}

.invisible {visibility: hidden;}

.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */}

.clearfix:after {clear: both;}

.clearfix {*zoom: 1;}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;}

a, a:visited {
text-decoration: underline;}

a[href]:after {content: " (" attr(href) ")";}

abbr[title]:after {content: " (" attr(title) ")";}

.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {content: "";}

pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;}

thead {display: table-header-group; /* h5bp.com/t */}

tr, img {page-break-inside: avoid;}

img {max-width: 100% !important;}

@page {margin: 0.5cm;}

p, h2, h3 {orphans: 3; widows: 3;}

h2, h3 {page-break-after: avoid;}
}