/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html { color: #3d3d3d; font-size: 16px; line-height: 1.4; border-top:6px solid #3d3d3d; }
body { font-size: 66%; font-family: Raleway, sans-serif; background: url(../img/bk-site.jpg) no-repeat bottom left } /*environ 10px*/
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection {    background: #b3d4fc;    text-shadow: none; }
::-webkit-input-placeholder{ color: #484949 }
::-moz-placeholder{ color: #484949 }
:-ms-input-placeholder { color: #484949 }

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

audio,canvas,iframe,img,svg,video { vertical-align: middle; }
fieldset {    border: 0;    margin: 0;    padding: 0;}
textarea {    resize: vertical;}
a {color: #fff; text-decoration: none }
main p a {color: #d9102f}
a:hover { text-decoration: underline;}

h1, .h1 { color: #404040; margin: 13px 0 0 0; font-size: 2.2em; line-height: 1.2em }
h2, .h2, main h1 { color: #d9102f; font-size:1.8em; margin: 0 0 10px 0; font-variant: small-caps; line-height: 1.2em }
main h1 { font-size: 3em; border-left:8px solid #404040;padding-left: 20px; padding-bottom: 10px}
h3 { font-size:1.5em; }
h4 { font-size: 1.4em; }

p {font-size:15px; line-height: 1.3em;}
ul { margin: 0; padding: 0; list-style: none; }
nav ul { text-align: center; text-align: center;}

main ul { margin: 0px 0 0 30px; padding: 0; list-style: none;font-size: 15px; }
main>ul, main>div>ul { margin-top: 10px;}
main ul h3 { display: inline; font-size:1.2em; vertical-align: middle;}
main ul ul { list-style: circle}

main>ul>li:before, main>div>ul>li:before { content: "• "; font-size:2.5em; vertical-align: middle; line-height: .8em; color: #d9102f; /* or whatever color you prefer */}
main>ul>li:before, main>div>ul>li:before { font-size:1.6em; }
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.content { width:1000px; margin: auto; box-sizing: border-box} .jus { text-align: justify } .center { text-align: center }

header {padding-bottom: 10px; background: #fff; border-top:3px solid #d9102f}
header>div {background: url(../img/bk-menu.png) no-repeat 80% 0; background-size: contain}
header .header-title {
    width: 50%; float: right; border-top:1px solid #404040; border-bottom:1px solid #404040; margin: 25px 0 14px; text-align: center;
}
	header h1, header p.h1 { font-family: 'Athene'; text-transform: uppercase;}

header nav {float: right; width: 50%}
header nav li {
    display: inline-block;  width: 25%;
    text-transform: uppercase; font-size:1.9em;
	text-align: center;
}
header nav li a { color: #404040}
header nav li a.current {text-decoration: underline; color: #d9102f}

.diaporamas { width:100%; max-width: 1400px; margin: auto; }
#dp_port, #dp_pays { position: relative; float: left; width: 23%; border-right: 1px solid #fff; box-sizing:border-box }
#dp_pays { width: 77%}
#dp_port img, #dp_pays img { width: 100% }
.actu { position: absolute; z-index:0; top: 0; left: 0; width: 30%; background: rgba(255,255,255,.65); height: 100%; padding: 40px 20px 0 20px; }
.actu time { font-size:1.7em; text-align: right; display: block}
.actu h3 { border-top:2px solid #404040; border-bottom:2px solid #404040; font-size:2.2em; padding: 20px 0; font-family: 'Athene'}
.actu p { font-size:1.7em }
main {
    box-sizing: border-box;
    width: 1050px; margin: auto;
    box-shadow: 0px 0px 10px 0.00px rgba(0, 0, 0, 0.75);
    position:relative;
    padding:30px;
    background:#fff;
}
main { margin-top: -40px }

.home main h3, main h2 { text-align: center; position: relative; z-index: 2; font-family: 'Athene'; font-size:2.6em; margin: 0; color: #d9102f; }
main h2 { font-size: 2.2em; }
.home main h3:before, main h2:before {
    content: '';
    border-bottom: 1px solid #404040;
    display: block;
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
}
.home main h3 span, main h2 span { background: #fff; padding: 0 5px; position: relative }
main aside { margin-top: 50px; }
main aside a { opacity: .7; transition: all 0.2s ease-out}
main aside a:hover { opacity: 1}
main aside .alignright { margin-top: 10px; }

main.vins .col3 img, main.vins .col2 img { display: block; margin: auto}
main.vins .col3 p { height: 170px}
main.vins .col3 h3, main.vins .col2 h3 {font-weight: bold; color: #d9102f; text-align: center; border-top:1px solid #404040; border-bottom:1px solid #404040; font-size:2em}

footer {
    width: 100%; clear:both;
    background: #404040;
    padding: 25px 0 15px; margin-top:50px;   
    box-sizing:border-box;
	color:#fff; font-size: 1.25em;
	border-top:3px solid #d9102f
}
footer p { font-size:1em; margin-top: 35px }
footer .desktop { display: inline}
footer .alpha { width: 28% }
footer .lambda { width: 23% }
footer .omega { width: 49%; text-align: right; }
#feed { border: 1px solid #d9102f; padding: 5px; text-align: center; border-left-width: 5px }
main.contact .alignleft { width: 40%}
.contact form { font-size: 1.4em; margin-bottom: 50px}
.contact input[type=text], .contact input[type=email], .contact input[type=tel], .contact textarea { width: 100%; border:1px solid #959595; margin-bottom: 10px; padding: 3px 5px;}
input[type=submit], .btn { text-transform: uppercase; font-weight: normal; border:0; background-color: #d9102f; color: #fff; transition: background-color 0.6s; text-align: center; display: inline-block; padding: 7px 30px; font-size: 1.2em }
input[type=submit]:hover, .btn:hover { background-color: #b30000; text-decoration: none }

.equipe { text-align: center; padding-bottom: 20px; }
.equipe div { width: 33%; display: inline-block; text-align: left; }
.equipe h4 { margin-bottom: 0;}

div.hideandshow { display: none; }
.transports>div.blocs, div.hideandshow.current { display: block }
/* ==========================================================================
   Helper classes
   ========================================================================== */
.alignright { float: right; }
.alignleft { float: left; }

.col2 {width: 50%; padding: 0 2%; float: left; box-sizing:border-box; }
.col3 {width: 33%; padding: 0 1%; float: left; box-sizing:border-box; }
.col4 {width: 25%; padding: 0 2%; float: left; box-sizing:border-box; }
.alpha { padding: 0 2% 0 0} .omega { padding: 0 0 0 2%}

.hidden {
    display: none;
}

.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: " ";    display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    a,
    a:visited {
        text-decoration: underline;
    }

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

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

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

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

    thead {
        display: table-header-group;
    }

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

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

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

    h2,
    h3 {
        page-break-after: avoid;
    }
    
    body>footer { display: none}
}

@font-face {
    font-family: 'Athene';
    src:url('Athene1.ttf.woff') format('woff'),
        url('Athene1.ttf.svg#Athene1') format('svg'),
        url('Athene1.ttf.eot'),
        url('Athene1.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}