@font-face { font-family: 'robotoblack'; src: url('fonts/roboto-black-webfont.eot'); src: url('fonts/roboto-black-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-black-webfont.woff2') format('woff2'), url('fonts/roboto-black-webfont.woff') format('woff'), url('fonts/roboto-black-webfont.ttf') format('truetype'), url('fonts/roboto-black-webfont.svg#robotoblack') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'robotobold'; src: url('fonts/roboto-bold-webfont.eot'); src: url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-bold-webfont.woff2') format('woff2'), url('fonts/roboto-bold-webfont.woff') format('woff'), url('fonts/roboto-bold-webfont.ttf') format('truetype'), url('fonts/roboto-bold-webfont.svg#robotobold') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'robotomedium'; src: url('fonts/roboto-medium-webfont.eot'); src: url('fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-medium-webfont.woff2') format('woff2'), url('fonts/roboto-medium-webfont.woff') format('woff'), url('fonts/roboto-medium-webfont.ttf') format('truetype'), url('fonts/roboto-medium-webfont.svg#robotomedium') format('svg'); font-weight: normal; font-style: normal; }

@font-face { font-family: 'robotoregular'; src: url('fonts/roboto-regular-webfont.eot'); src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-regular-webfont.woff2') format('woff2'), url('fonts/roboto-regular-webfont.woff') format('woff'), url('fonts/roboto-regular-webfont.ttf') format('truetype'), url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; }


/* HTML5 ready **/
article, aside, audio, canvas, datalist, details, dialog, figure, footer, header, menu, nav, section, video { display: block; }

abbr, eventsource, mark, meter, time, progress, output { display: inline; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

/* 1. RESET */
img { border: 0; image-rendering: optimizeQuality; vertical-align: middle; -ms-interpolation-mode: bicubic; }

ul, ol, li { list-style: none; }

p { margin: 0}

fieldset { border: 0; }

table, table td { border-spacing: 0; border-collapse: collapse; }

input:focus { outline: none; }

input[type="search"] { -webkit-appearance: none; -webkit-border-radius: 0; }

input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; }

img, table, td, blockquote, code, pre, textarea, input { height: auto; max-width: 100%; }

/* Mixins */
.italic { font-style: italic; }

.bold { font-weight: bold; }

.left { text-align: left; }

.center { text-align: center; }

.right { float: right; }

.flexRow { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; }

.flexCol { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }

.flexColReverse { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

.flexJustAround { -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; }

.flexJustBetween { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

.flexJustCenter { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

.flexStretch { -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }

.flexCenter { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

.flexWeight { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }

.flexEnd { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; }

.flexWrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.anim { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.anim1500 { -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; }

.anim3000 { -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; -ms-transition: all 3s ease-in-out; transition: all 3s ease-in-out; }

.anim300 { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.anim800 { -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }


/**************************** LOADER ************************/

div#pageLoader > div { position: fixed; z-index: 5000; top: 0px; left: 0px; height: 100%; width: 100%; background-color: #1e303e; }

div#pageLoader > img { position: fixed; z-index: 5000; left: calc(50% - 22px); top: calc(50% - 22px)}


/**************************** COMMON ************************/

.v  {color:#217fc3}
.vf {color:#217fc3}
.g {color:#525252}
.gc{color:#c9c9c9}
.bgdeg{
    background: rgb(4 90 165);
    background: -moz-linear-gradient(left, rgba(11,87,162,1) 0%, rgba(29, 128,193,1) 50%, rgba(2,93,164,1) 100%);
    background: -webkit-linear-gradient(left, rgb(11 87 162) 0%, rgb(29 128 193) 50%, rgb(2 93 164) 100%);
    background: linear-gradient(to right, rgb(11 88 156) 0%, rgb(30 127 195) 50%, rgb(7 91 164) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#217fc3', endColorstr='#1d80c1',GradientType=1 );
}

.button{display: inline-block; text-decoration: none; color: #fff; background: #217fc3; padding: 12px; font-family: 'robotobold'; text-transform: uppercase; font-size: 0.9em; }
.lnkmore{font-family: 'robotoblack';color:#217fc3}

/************************************** STRUCTURE ************************************/

html, body { -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }

html { box-sizing: border-box; height: 100%; }

*, *::after, *::before { box-sizing: inherit }

body { height: 100%; margin: 0; padding: 0; width: 100%; font-family: 'robotoregular'}

#global { height: 100%; opacity: 0; margin: 0 auto; position: relative; min-height: 100%; padding-bottom: 326px; }

h1, h2, h3, h4, h5, h6 { font-family: 'robotoblack'; font-weight: normal; }

h1 { }

h2 { }

h3 { }

p {margin-bottom: 0.5em;}

a { }

em { }

strong, b { }

p {text-align:justify}


/****************************************** HEADER ************************************/

header {padding: 0px 0px 10px 20px;border-bottom:1px solid #217fc3;position:relative}
.logo { display: inline-block}
.logo > a > img, .logo > a > div { display: inline-block; vertical-align: middle; }
header .logo > a > img { margin-right: 16px;width:140px }
.logo > a > div { line-height: 1.2em; }
.logo > a { text-decoration: none; }
.logo > a > div > h1, .logo > a > div > h2 { text-transform: uppercase }
.logo > a > div > h1 { color: #1d80c3; font-size: 2.4em;text-align:left}
.logo > a > div > h2 { color:#045ba8; font-family: 'robotomedium'; font-size: 1.2em; letter-spacing: 0.55em; padding-left: 2px; }

header > nav {text-align: right;position: relative;top: -27px}
header > nav > ul > li { display: inline-block; }
header > nav > ul > li > a { font-size: 15px;display: inline-block; position: relative; text-decoration: none; text-transform: uppercase; color: #000; font-family: 'robotobold'; padding: 0px 12px 0px 12px; background: url(../images/ui/puce.png) left center no-repeat; }
header > nav > ul > li > a:after { content: "  "; display: block; width: 0; height: 2px; background: #217fc3; transition: width .3s; }
header > nav > ul > li > a:hover:after { width: 100%; }
header > div#private { right: 0px; top:20px; position: absolute; }
header > div#private > a { display: inline-block; text-decoration: none; color: #fff;background: #217fc3 url(../images/ui/user.png) 14px 16px no-repeat;padding: 18px 20px 20px 50px;font-family: 'robotobold'; text-transform: uppercase; font-size: 0.9em; }


#nav-icon1 {display:none; width:35px; height:45px; position:absolute; left:17px;top:20px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out; cursor:pointer; z-index:500}
#nav-icon1 span {display:block; position:absolute; height:4px; width:100%; background:#217fc3; border-radius:2px; opacity:1; left:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out}
#nav-icon1 span:nth-child(1) {top:0px}
#nav-icon1 span:nth-child(2) {top:10px}
#nav-icon1 span:nth-child(3) {top:20px}
#nav-icon1.open span:nth-child(1) {top:10px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg)}
#nav-icon1.open span:nth-child(2) {opacity:0; left:-60px}
#nav-icon1.open span:nth-child(3) {top:10px; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg)}


@media only screen 
and (max-width:1279px) {
header {text-align:center;margin-top:10px;padding: 0px 0px 10px 20px;}
#nav-icon1 {display:block}
header > nav  {display:none}
.logo {width:388px}
.logo > a > img {width: 20%;margin-right: 10px}
.logo > a > div {text-align: left;width: 250px;line-height: 0.7em}
.logo > a > div > h1 {text-align: left;font-size: 1.4em;}
.logo > a > div > h2 {font-size: 0.8em;letter-spacing: 0.4em}
header > nav > ul {margin:0 auto; position:relative;text-align:center; padding-right:0px;margin-top: 30px;}
header > nav > ul > li {padding:16px 10px 16px 10px; display:block}
header > nav > ul > li > a {margin:auto}
header > div#private > a  {padding: 13px 20px 23px 26px;background: #217fc3 url(../images/ui/user.png) 14px 7px no-repeat}
header > div#private > a > span {display:none}
}

@media only screen and (max-width:900px){
.logo {width:258px}
.logo > a > img {width: 14%;max-width: 40px;margin-right:0px}
#nav-icon1{top:8px}
header > div#private{top:3px}
.logo > a > div {width: 200px}
.logo > a > div > h1 {font-size: 1.1em;}
.logo > a > div > h2 {letter-spacing: 0.18em}
}

/****************************************** FOOTER ************************************/

footer {padding-top:30px;position:relative;width:100%;background:#eff2f6}
footer > div {display:inline-block;width:25%;vertical-align:top}
footer > div > h3 {text-align:center}
footer > div:first-of-type > ul {margin:30px 0px 60px 140px;text-align:left}
footer > div:first-of-type > ul *{text-decoration:none;text-transform:uppercase;color:#000;font-size:0.9em;font-family:'robotoblack'}
footer > div:first-of-type > ul > li {padding:8px}
footer > div:nth-of-type(2) {width:50%;text-align:center}
footer > div:nth-of-type(2) > div.logo {padding: 0 0 20px 0}
footer > div:nth-of-type(2) > div:nth-of-type(2){margin:0 auto;font-family:'robotoblack'}
footer > div:nth-of-type(2) > div:nth-of-type(2) span {text-align:center;font-size:1.2em}
footer > div:nth-of-type(2) > div:nth-of-type(2) a {text-decoration:none;color:#000;font-size:1em}
footer > div:nth-of-type(2) > div:nth-of-type(2) a.button {color:#fff}
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2),
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:first-of-type   {display:inline-block;width:210px;text-align:left;vertical-align:top}
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) {font-size:1.4em}
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > i {font-size:0.7em}
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3),
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:last-of-type  {margin:40px auto}
footer > div:nth-of-type(2) > div:nth-of-type(2) > div:last-of-type  {margin-bottom:80px}
footer > div:first-of-type, footer > div:nth-of-type(3)  {text-align:center}
footer > div:nth-of-type(3)  p {text-align:center}
footer > div:last-of-type {background:#4f4f4f;position:absolute;display:block;width:100%;color:#fff;text-align:center;font-size:0.7em;bottom:0px;height: 30px;padding-top: 7px;}
footer > div:last-of-type a {color:#fff;text-decoration:none}


@media only screen 
and (max-width:1440px) {
footer > div:nth-of-type(2) > div.logo {margin-bottom: 20px;padding-right:0px}

}

@media only screen 
and (max-width:1280px) {
footer > div:first-of-type > ul {margin: 30px 0px 60px 60px}}

@media only screen 
and (max-width:900px) {
footer > div:first-of-type, footer > div:nth-of-type(3) {display:none}
footer > div {width:100% !important;margin-bottom:20px}
footer > div:last-of-type {padding-bottom: 7px;height:inherit}
}