/* roboto-regular - latin-ext_latin */
/* rosario-regular - latin */
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/rosario-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/rosario-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/rosario-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/rosario-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/rosario-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/rosario-v25-latin-regular.svg#Rosario') format('svg'); /* Legacy iOS */
}

/* rosario-700 - latin */
@font-face {
  font-family: 'Rosario';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/rosario-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/rosario-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/rosario-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/rosario-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/rosario-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/rosario-v25-latin-700.svg#Rosario') format('svg'); /* Legacy iOS */
}

html {
  font-family: 'Rosario';
  font-size: 12pt;
/*  color: #0083c9; */
}
body {
   margin: 0;
   margin-left: 5vw;
   margin-right: 5vw;
   min-height: 100vh;
   display:grid;
   grid-template-areas:
        "header"
        "content"
        "footer";
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
   grid-row-gap: 1em;
}

#header {
   grid-area: header;
}
#content {
   grid-area: content;
}
#footer {
   grid-area: footer;
}

.strong {
   font-weight: 700;
}

.green {
   color: #719946;
}

.red {
   color: #f00;
}


 /* Style inputs, select elements and textareas */
input[type=text], input[type=number], input[type=email], select, textarea{
  width: 100%;
  padding: .8em;
  border: 2pt solid #ccc;
  border-radius: 4pt;
  box-sizing: border-box;
  resize: vertical;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-weight: 700;
  color: #719946;
}

/* Style the submit button */
input[type=submit] {
  margin-top: 2em;
  background-color: #ff0000; /* #04AA6D; */
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4pt;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
/*   float: right; */
}

h2.error {
  color: #f00;
}

#header {
    padding: 1em;
    text-align: center;
    border-bottom: 2pt solid #719946;
    font-family: serif;
}

#header img {
    width: 80vw;
}

#title {
    height: 2.5em;
    width: 75vw;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
    font-size: 20pt;
/*    color: #5d9b3e;*/
}
#subtitle {
    width: 75vw;
    margin-top: 12pt;
    font-size: 13pt;
    text-align: center;
/*    color: #5d9b3e; */
}
#logo {
    position: absolute;
    left: 6em;
    top: 1em;
}
#logo img {
    height: 7em;
}

h1 {
    font-size: 24pt;
    color: #719946;
}
/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}


/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

a {
  text-decoration: none;
}

section#footer {
  font-size: 10pt;
  padding-top: 1em;
  padding-bottom: 1em;
}
section#footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}
section#footer ul li {
  display: inline;
}
section#footer ul li a:visited{
  color: #000;
}

.large {
    font-size: 20pt;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  h1 {
    font-size: 18pt;
  }
  #title {
    font-size: 18pt;
  }
  #subtitle {
    font-size: 12pt;
  }
  #img img {
    height: 5em;
  }
  #header img {
    width: 80vw;
  }
  
  .large {
    font-size: 14pt;
  }

  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  input[type=submit] {
    margin-top: 2em;
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: 10pt;
  }
  h1 {
    font-size: 12pt;
  }
  #title {
    font-size: 12pt;
  }
  #subtitle {
    font-size: 10pt;
  }
  #header img {
    width: 80vw;
  }  
  #img {
    position: absolute;
    right: 2em;
    top: 1em;
  }
  #img img {
    height: 4em;
  }
  .col-25, .col-50, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  input[type=submit] {
    margin-top: 2em;
  }
  #footer {
    font-size: 7pt;
  }
}