@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); /*font to have a nicer look :)*/
@import url(normalize.css); /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css - just to reset styles*/

:root{--white: #f9f9f9;--black: #36383F;--grey: #85888C;}
a{text-decoration: none;}
ul{list-style: none;}
body{background-color: var(--white);font-family: "Poppins", sans-serif;}
.header{background-color: var(--black);box-shadow: 1px 1px 5px 0px var(--grey);position: sticky;top: 0;width: 100%;min-height: 70px;}
footer{background-color: var(--black);box-shadow: 1px 1px 5px 0px var(--grey);position: sticky;bottom: 0;width: 100%;min-height: 70px;}
footer a{float: left; width:100%; margin: 0 auto;}
.logo{display: inline-block;color: var(--white);font-size: 20px;margin-left: 1em;padding-top: 0.7em;}
#logo-small{max-height: 40px;float:left;width: 60px;}
.logo span{margin-top: 0.5em;display: block;float: left;}
.nav{width: 100%;height: 100%;position: fixed;background-color: var(--black);overflow: hidden;top:70px;}
.menu a, footer a{display: block;padding: 15px;color: var(--white);}
.menu a:hover{background-color: var(--grey);}
.nav{max-height: 0;transition: max-height .5s ease-out;}
.hamb{cursor: pointer;float: right;padding: 40px 20px;}
.hamb-lines{background: var(--white);display: block;height: 2px;position: relative;width: 24px;}
.hamb-lines::before, .hamb-lines::after{background: var(--white);content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.hamb-lines::before{top: 5px;}
.hamb-lines::after{top: -5px;}
.side-menu{display: none;}
.side-menu:checked ~ nav{max-height: 100%;}
.side-menu:checked ~ .hamb .hamb-lines{background: transparent;}
.side-menu:checked ~ .hamb .hamb-lines::before{transform: rotate(-45deg);top:0;}
.side-menu:checked ~ .hamb .hamb-lines::after{transform: rotate(45deg);top:0;}
.card{background-color: var(--white);color: var(--black);padding: 1em;max-height: 533px;max-width: 100%;}
.card img{  max-width: 100%;}
.cards{max-width: 1700px;margin: 0 auto;display: grid;}
h2, .main-content{margin: 1em;line-height: 1.5em;}
form > div{clear: both;overflow: hidden;padding: 1em;margin: 0 0 2em 0;}
form > div > fieldset > div > div{margin: 0 0 1em 0;}
form > div > label{width: 24%;float: left;}
form > div > div,form > div > fieldset > div{width: 75%;float: right;}
fieldset{border: 0;padding: 0;}
input[type=text],input[type=email],textarea{width: 100%;border-top: 1px solid var(--grey);border-left: 1px solid #ccc;border-right: 1px solid #eee;border-bottom: 1px solid #eee;}
input[type=text],input[type=email],textarea{width: 45%;}
input[type=text]:focus,input[type=email]:focus,textarea:focus{outline: 0;border-color: var(--grey);}
table{border: 1px solid var(--white); border-collapse: collapse; margin: 1em auto; padding: 0; width: 80%; table-layout: fixed;}
table caption{font-size: 1.5em; margin: .5em 0 .75em;}
table tr{background-color: var(--white); border: 1px solid var(--grey); padding: .35em;}
table th, table td{padding: .625em; text-align: center;}
table th{font-size: .85em;letter-spacing: .1em; text-transform: uppercase;}
li.active{background-color: var(--grey);}
@media (max-width: 395px){
  .hide-small{display:none;}
}
@media (max-width: 768px){
  #card1{order: 1;}
  #card2{order: 2;}
  #card3{order: 3;}
  #card4{order: 4;}
  footer a{width:40%; float:left; margin: 0 auto;}
  footer{height: 90px;}
  form > div{margin: 0 0 15px 0;}
  form > div > label{width: 100%;float: none;margin: 0 0 5px 0;}
  form > div > div,form > div > fieldset > div{width: 100%;float: none;}
  input[type=text],input[type=email],textarea{width: 100%;}
  table{border: 0; width:100%;}
  table caption{font-size: 1.3em;}
  table thead{border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
  table tr{border-bottom: 3px solid var(--white);display: block;margin-bottom: .625em;}
  table td{border-bottom: 1px solid var(--white);display: block;font-size: .8em;text-align: right;}
  table td::before{content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
  table td:last-child{border-bottom: 0;}  
}
@media (min-width: 768px){
  .nav{max-height: none;top: 0;position: relative;float: right;width: fit-content;background-color: transparent;margin-right: 2em;}
  footer a{float: left; width:20%; margin: 0 auto;}
  .menu li{float: left;}
  .menu a:hover{background-color: transparent;color: var(--grey);}
  .hamb{display: none;}
  .cards{ grid-template-columns: repeat(2, 1fr); }
  #card1{order: 1;}
  #card2{order: 2;}
  #card3{order: 4;}
  #card4{order: 3;}
  form > div > label{text-align: right;}
}