/* --- REST CODE --- */
/* ----------------- */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --- REST CODE CUSTOM --- */
/* ------------------------ */
* { border-radius: 0;}

strong { font-weight: bold;}

img { width: 100%; height: auto;}

/* --- TEXT --- */
/* ------------ */
body {font-family: 'Roboto Condensed', sans-serif; font-size: 1rem; font-weight: 400; color: black;} 
p { line-height: 1.6rem;}
footer {font-size: 0.8rem;}

/* --- HEADING --- */
h1 { font-size: 2rem;}
h1 span { display: block; font-size: 60%; color: #c5a060 !important;} 

h2 { font-size: 1.6rem;}

h1, h2 { font-weight: 700; text-transform: uppercase;}

/* --- TEXT RESPONSIVE --- */

/* --- MOBILE --- */
@media only screen and (min-width: 600px) {
  h1 { font-size: 2.4rem;}
  h2 { font-size: 2rem;}
}

/* --- DESKTOP HD et FULL HD --- */
@media only screen and (min-width: 1366px) {
  body {font-size: 1.2rem;}
  footer {font-size: 1rem;}
  p { line-height: 1.8rem;}
  h1 { font-size: 3.2rem;}
  h2 { font-size: 2.4rem;}
}

/* --- DESKTOP FULL HD --- */
@media only screen and (min-width: 1920px) {
  body {font-size: 1.4rem;}
  footer {font-size: 1.2rem;}
  p { line-height: 2rem;}
  h1 { font-size: 4rem;}
  h2 { font-size: 3.2rem;}
}

/* --- DESKTOP 4K --- */
@media only screen and (min-width: 2560px) {
  body {font-size: 2rem;}
  footer {font-size: 1.8rem;}
  p { line-height: 2.6rem;}
  h1 { font-size: 5.4rem;}
  h2 { font-size: 4.8rem;}
}

@media (orientation: landscape) {
  p, h1, h2 { padding-bottom: 2vh;}
}
@media (orientation: portrait) {
  p, h1, h2 { padding-bottom: 4vw;}
}

/* --- LINK --- */
/* ------------ */
/* --- NORMAL --- */
a { color: black; text-decoration: none; transition:all .4s ease;}
a:hover, a:focus, a:active { color: black; text-decoration: underline;}

/* --- STRUCTURE --- */
/* ----------------- */
body { background: #FFF; height: 100vh; background: url(../img/bg-mobile.jpg); background-size: cover; background-repeat: no-repeat;}

@media only screen and (min-width: 737px) {
  body { background: url(../img/bg.jpg);}
}

/* --- HEADER --- */
header .container {position:relative; padding: 4vh;}
.logo { display: block; width: 30vw; margin: 0 auto;}
.switch-language { position:absolute; display: inline-block;}
.switch-language a { padding: 10px; text-align: center; text-transform: uppercase; text-decoration: none; color: black; background: #ffdf1c; border:1px solid #ebbf73; 
-webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.35);
}
.switch-language a:hover { text-decoration: underline; color: black; background: #ffdf1c; border:1px solid black;
-webkit-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
}

.switch-language a:focus { color: black; background: #ffdf1c; border:1px solid black;
-webkit-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.7);
}

@media (orientation: landscape) {
  .logo { width: 50vh;}
  .switch-language { top: 8vh; right: 0;}
}
@media (orientation: portrait) {
  .logo { width: 50vw;}
  .switch-language { top: 4vh; right: 0;}
}

/* --- MAIN --- */
.table { display: table; width: 100%;}
.cell { padding: 20vh 5vw 7vh 5vw; display: table-cell; width: 50%;}

.cell-left { color: #FFF; background-image: url(../img/bg-col-left.png);}
.cell-right { color: #000; background-image: url(../img/bg-col-right.png);}

.cell-left, .cell-right { text-align: center; background-size: cover;}

ul { padding: 0;}
ul li { list-style: none;}

hr { width: 20%; border: 1px solid #000;}

@media only screen and (max-width: 736px) {
body {background-repeat: repeat;}
.switch-language { right: 2vw;}
.cell {  display: block; padding: 5vh 5vw 5vh 5vw; width: 100%;}
.cell-left { background-color: rgba(21, 101, 192, 0.8);}
.cell-right { background-color: rgba(253, 216, 53, 0.8);}
.cell-left, .cell-right { background-image: none;}
}

/* --- FOOTER --- */
footer .content { float: none; margin: 0 auto; padding: 20px; text-align: center; background: #FFF;}
footer p { padding-bottom:0;}

/* --- HELPER CLASS --- */
/* -------------------- */
.no-break { white-space: nowrap;}

/* --- GRID LAYOUT --- */
/* ------------------- */
* { box-sizing: border-box;}

.row::after { content: ""; clear: both; display: table;}
[class*="col-"] { float: left; padding: 0 15px;}

/* --- MOBILE --- */
.container { width: 100%;}

[class*="col-"] { width: 100%;}

@media only screen and (min-width: 600px) {
.container { width: 90%; margin: 0 auto;}

    .col-s-0 { width: 0%; padding: 0;}
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

/* --- TABLET --- */
@media only screen and (min-width: 1024px) {
.container { width: 90%; margin: 0 auto;}

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* --- DESKTOP HD et FULL HD --- */
@media only screen and (min-width: 1366px) {
.container { width: 75%}
}

/* --- DESKTOP 4K --- */
@media only screen and (min-width: 2560px) {
.container { width: 60%}
}

/** --- @section  ANIMATION --- **/
/** --------------------------- **/
.cell-left, .cell-right, footer {
    opacity: 0;
}
.cell-left {
    -webkit-animation: fade-effect 2s forwards;
    -moz-animation: fade-effect 2s forwards;
    animation: fade-effect 2s forwards;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.cell-right {
    -webkit-animation: fade-effect 2s forwards;
    -moz-animation: fade-effect 2s forwards;
    animation: fade-effect 2s forwards;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

footer {
    -webkit-animation: fade-effect 2s forwards;
    -moz-animation: fade-effect 2s forwards;
    animation: fade-effect 2s forwards;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

@-webkit-keyframes fade-effect {
 0% {
transform: translateY(0px);
opacity: 0;
}
 100% {
transform: translateY(0px);
opacity: 1;
}
}
 @-moz-keyframes fade-effect {
 0% {
transform: translateY(0px);
opacity: 0;
}
 100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes fade-effect {
 0% {
transform: translateY(0px);
opacity: 0;
}
 100% {
transform: translateY(0px);
opacity: 1;
}
}