/* ++++++++++++++++++++++++++++++ NORMALIZE ++++++++++++++++++++++++++++++ */
p{ box-sizing: border-box;} 
body, p, hr {margin: 0} 
body{ font-size: 70px;} 
a{ text-decoration: none; color: #000;} 
h1, h2{ margin: 0; line-height: 0;}
/* ++++++++++++++++++++++++++++++ GLOBAL +++++++++++++++++++++++++++++++++ */
main{ display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; margin: 0; font-family:'Montserrat', sans-serif; font-weight: 700; overflow-x: hidden;}
section{width: 100%; display: flex;  box-sizing: border-box; flex-grow: 1;} 
hr{ width: 100%; border: 0.5px solid #000} 
section p{ font-size: 1em; line-height: 1.3em;}
/* ++++++++++++++++++++++++++++++ TOP ++++++++++++++++++++++++++++++++++++ */
#top img{ width: 320px;} 
#top div{ width: 20%; padding: 80px; display: flex; flex-direction: column;} 
#top p { width: 80%; padding: 80px; margin-top: -20px}
.lang { font-size: 0.5em; margin-top: 135px}
/* +++++++++++++++++++++++++++++ BOTTOM ++++++++++++++++++++++++++++++++++ */
#bottom a{ padding: 80px; width: 50%; box-sizing: border-box;}
#bottom p {font-size: 0.75em; width: 80%; margin-top: 50px;}
.filet{ height: auto; width: 1px; background-color:#000;}
.north img{ position: relative; left: 4px; width: 35%;} .horde img {width: 50%;}
/* +++++++++++++++++++++++++++++ HOVER ++++++++++++++++++++++++++++++++++ */
@media(min-width: 799px){
  .horth:hover{background-color: #000; color: #fff;}
  .horth:hover img{filter: invert(100%)}
  .horth, img { transition: 0.1s;}
  .lang:hover{text-decoration: underline;}
}
/* +++++++++++++++++++++++++++++ RESPONSIVE +++++++++++++++++++++++++++++ */
@media(max-width: 1399px){
  section{ flex-direction: column;}
  #bottom a {width: 100%;}
  main{min-height: auto;}
  .horth{border-bottom: 1px solid #000}
  #top p{font-size: 0.6em; padding-top: 0; margin-top: 0}
  #bottom p{font-size: 0.5em; width: 100%;}
  #top p { padding: 50px; width: 100%;}
  #top div{padding: 50px 50px 0 50px;} 
  #bottom a{ padding: 50px;}
  .north img{ position: relative; left: 4px; width: 20%;} .horde img {width: 30%;} 
  .north p {margin-bottom: 35px;}
  .lang{ position: absolute; top: 50px; right: 50px; margin: 0;}
}
@media(min-width: 1299px){
  #bottom .horde h2 {margin-top: 30px;}
}
@media(max-width: 1099px){
  .north img{ position: relative; left: 4px; width: 40%;} .horde img {width: 60%;}
}
@media(max-width: 575px){
  img { margin-top: 15px;}
  #top img{ width: 300px;}
  #top p {font-size: 0.35em; padding: 20px; padding-top: 0; margin: 20px 0;}
  #bottom p{font-size: 0.3em; width: 100%;}
  #top div{padding: 20px 20px 0 20px;} 
  #bottom a{ padding: 20px;}
  .north img{ position: relative; left: 4px; width: 60%;} .horde img {width: 80%; left: -4%} 
  .horth p {margin-bottom: 20px; margin-top: 20px !important;}
  main {margin-top: 80px}
  .lang{ left: 20px; font-size:  0.4em}
}
@media(max-width: 380px){
  #top img{ width: 280px;}
}