* {
  box-sizing: border-box;
}

body {
  background-attachment: fixed;
  background-position: top center;
  background-image: url("../img/bg.jpg");
  background-size: cover;
  font-family: 'Open Sans', sans-serif;

  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;

  overflow-x: hidden;
}

*:focus { outline: none; }
a {
  cursor: pointer;
  color: rgba(0, 0, 0, 1);
  position: relative;
}
p a:after{
  position: absolute;
  content: '';
  height: 2px;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  transition: all .2s ease;
}
p a:hover:after {
  bottom: 2px;
  background-color: rgba(0, 0, 0, 1);
  transition: all .2s ease;
}
i { margin: 0 5px; }

.container {
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  position: relative;

  background-color: rgba(255, 205, 23, 1); /* yellow sparta */
  box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .3);

  width: 100%;
  margin-bottom: 20px;
  border-bottom: .5rem solid rgba(0, 0, 0, 1) /* black */;
  padding: 10px 0;
}

.hidden { display: none; }
img { width: 100%; }
#list { font-size: 12px; }
.list-item { margin: .3em 0; }

/*** COLUMN ***/

.col-12, .col-md-6, .col-xl-8, .col-xl-4 { display: inline-block; vertical-align: top; }
.col-12 { width: 100%; }
.col-hidden { display: none; }

@media screen and (min-width: 768px) {
  .col-md-6 { width: 49%; }
  .col-hidden { display: inline-block; }
}

@media screen and (min-width: 1080px) {
  .col-xl-8 { width: 66%; }
  .col-xl-4 { width: 33%; }
  .col-hidden { display: inline-block; }
}

/*** INPUT FIELD ***/

.input {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-size: .75rem;
}

input {
  display: block;

  background-color: transparent;
  font-size: 1rem;

  width: 100%;
  border-width: 0 0 1px 0;
  border-color: rgba(0, 0, 0, 1); /* black */
  padding: 10px 0;
}

small.help {
  font-size: .75rem;
  color: rgba(0, 0, 0, .5);
}

small.help.error {
  color: rgba(200, 0, 0, 1);
}

button {
  background-color: rgba(0, 0, 0, 1) /* black */;
  font-size: 1rem;
  color: white;
  
  margin: 0;
  padding: 10px 15px;
  border: 0px;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
  
  cursor: pointer;
}

button:hover, button:focus {
  background-color: rgba(0, 0, 0, .8);
  
  transition: .2s;
  -webkit-transition: .2s; /* safari and chrome */
  -moz-transition: .2s; /* mozilla */
  -o-transition: .2s; /* opera */
  -ms-transition: .2s; /* ie 10 */
  transition-timing-function: ease;
}

input[type=radio] {
  display: inline-block;
  -webkit-appearance: unset;
  -moz-appearance: unset;
  appearance: unset;
  
  background: radial-gradient(transparent 40%, transparent 41%) /* black */;
  
  height: 1.25em;
  width: 1.25em;
  margin: .25em .25em .25em 0;
  border: 2px solid rgba(0, 0, 0, .5) /* black */;
  border-radius: 1.5em;
  padding: 0;

  cursor: pointer;
}

input[type=radio]:focus {
  border: 2px solid rgba(0, 0, 0, 1) /* black */;
}

input[type=radio]:checked {
  background: radial-gradient(rgba(0, 0, 0, 1) 40%, transparent 41%) /* black */;
}

.radio-label {
  display: table-cell;
  vertical-align: middle;
}

label.radio-item {
  margin: .2rem 0;
  display: table;
  font-size: inherit;
  
  cursor: pointer;
}

textarea {  
  font-family: 'Open Sans';
  background-color: transparent;

  width: 100%;
  height: 3rem;
  border: 0;
  border-bottom: 1px solid black;
}