@font-face { font-family: Rubik; src: url(/fonts/Rubik-Regular.ttf); font-weight: normal; }
@font-face { font-family: Rubik; src: url(/fonts/Rubik-Bold.ttf); font-weight: bold; }

* {box-sizing: border-box; margin: 0; padding: 0; font-family: Rubik, Arial; font-size: 18px; font-weight: normal; color: #333; }
html { min-height:101%; }
body,p,ul,li,h1,h2,h3,h4 { margin: 0; padding: 0; }
a { color: blue; text-decoration: underline; }
h1 { color: green; font-size: 2.4em; }
h2 { font-size: 1.4em; }
p { line-height: 1.6em; margin-top: 10px; margin-bottom: 10px; }
label { color: green; font-weight: bold; }

body { padding-top: 100px; padding-bottom: 150px; background: url("/images/background.jpg") top center repeat; }

#page_wrapper { max-width: 1200px; margin: 0 auto; background-color: rgba(255,255,255,0.85); padding: 200px; padding-top: 50px; box-shadow: 0px 0px 30px #333; border-radius: 2px; }

#content { margin-top: 25px; }

.box { width: 800px; margin-bottom: 25px; margin-top: 25px; position: relative; overflow: hidden; }
.box:hover .box_content { transform: translateY(0%); }
.box_content { position: absolute; left: 0; bottom: 0; transform: translateY(72%); transition: 0.3s linear; background-color: rgba(255,255,255,0.8); }
.box_header { background-color: rgba(0,128,0,0.7); padding: 15px; }
.box_header h2 { color: #fff; font-weight: bold; text-decoration: underline; text-align: center; }
.box_text { padding: 15px; }
.box_text .link { color: blue; text-decoration: underline; font-weight: bold; }

#footer { margin-top: 100px; padding-top: 25px; border-top: 1px solid silver; }
#footer ul { text-align: right; margin-top: 25px; }
#footer li { display: inline-block; }
#footer li a { font-size: 0.9em; padding: 5px 15px; display: inline-block; }

#publisher a { color: blue; text-decoration: underline; font-weight: bold; }
#publisher img { display: none; }
#publisher_employee_text p { font-size: 0.8em; }
#employee span { font-size: 1.2em; font-weight: bold; }
#legalname { display: none; }
#contact_legalname { display: none; }
#address { display: none; }

@media (max-width: 1300px) {
  #page_wrapper { max-width: 1000px; padding: 100px; }
}

@media (max-width: 1000px) {
  body { padding-top: 0px; }
  #header img { width: 100%; }
  #page_wrapper { padding: 15px; border-radius: 0; }
  .box { width: 100%; }
  .box img { width: 100%; }
  .box_content { position: unset; transform: translateY(0%); margin-top: -55px; }
  .box_header h2 { font-size: 1em; }
}