/*brown 8a7b64
    red f34e3a
    beige d7caa9
    blue light 99b9db
    blue 7291bf
    dark-blue 576E8F*/
* {
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6em;

}
html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  color: #444444;
}
a {
  text-decoration: none;
  color:#f34e3a;
}
i {
color:#f34e3a;
margin-right:0.2em;
}
a .fa-linkedin-square{
    color:#23559d;
}
ul {
  list-style-type: none;
  text-align:left;
}
    ul li {
        padding:0.5em;
        margin-bottom:0.2em;
        background:rgba(233, 233, 228, 0.5);
        border-radius: 3px; 
        border:thin solid rgba(233, 233, 228, 0.9);  
    }
  
h1,
h2,
h3,
h4 {
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.5em;
  color: #5e5e5e;
}
h3 {
  font-size: 1.2em;
  color: #5e5e5e;
}
h4 {
  font-size: 16px;
}
header {
  width: calc(97%);
  background: #e9e9e4; 
  padding: 2em 1.5%;
  background-color: #e9e9e4;
  background-image: -webkit-linear-gradient(bottom, #e9e9e4, #d2d0c8);
  background-image: -moz-linear-gradient(bottom, #e9e9e4, #d2d0c8);
  background-image: -o-linear-gradient(bottom, #e9e9e4, #d2d0c8);
  background-image: -ms-linear-gradient(bottom, #e9e9e4, #d2d0c8);
  background-image: linear-gradient(bottom, #e9e9e4, #d2d0c8);
  border-bottom: thin double #d7caa9;


}
header h1 {
  margin-bottom: 0;
  color:#576E8F;
  padding-left:2em;
  text-shadow: 1px 1px 1px #fff;
  display:inline-block;
}
header h2 {
  font-weight:lighter;
  margin-bottom: 0;
  color:#8a7b64;
  text-shadow: 1px 1px 1px #fff; 
  font-family: monaco, Consolas, 'Lucida Console', monospace;
}
div.login{
    display:block;
    float:right;
}
.section-header {
    font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
    font-size:1.2em;
    color:#8a7b64;
    font-weight:bold;
    margin-bottom:0.4em;
    text-align:left;
}
.label {
    background:#F6F7D0;
    border:thin solid #ddd;
    border-radius: 2px;
    padding:0.2em 0.5em;
    text-align:left;
}
.blue-col {
    color:#99b9db;
}
.btn {
  font-size: 1em;
  /*text-shadow: 1px 1px 1px #333;*/
  padding: 2px 12px;
  float: left;
  margin: 0.1em;
  border: thin solid #f34e3a;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #da2804;
  background-image: -webkit-linear-gradient(bottom, #da2804, #f34e3a);
  background-image: -moz-linear-gradient(bottom, #da2804, #f34e3a);
  background-image: -o-linear-gradient(bottom, #da2804, #f34e3a);
  background-image: -ms-linear-gradient(bottom, #da2804, #f34e3a);
  background-image: linear-gradient(bottom, #da2804, #f34e3a);
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}
.btn:hover {
  background: #da2804;
}
#container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
section {
margin:2em;
}
    section article {
        text-align:left;
        float:left;
        color:#576E8F;
    }
article p{
margin-top:0.2em;
float:right;
clear:both;
}
footer {
  color: #5e5e5e;
  width: calc(97%);
  float: left;
  height: 4em;
  padding: 1.5%;
  border-top: thin double #d2d0c8;
  font-size: 0.8em;
  text-align: center;
  margin-top:3em;
}
/*#region MODAL */

.myModal {
    width: 15em;
    background: #EDFAC5;
    border: thin solid #8E9C64;
    z-index: 1000;
    position: fixed;
    left: 50%;
    top: 20%;
    margin-left: -15em;
    padding: 2em;
    font-size: 1.2em;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.myModal .fa-spin {
        margin:0 1em 0 0.2em;
    }
.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index:999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#closeModal {
    text-align:right;
    float:right;
    width:4em;
    margin:-2em -2em 0 0;
    font-size:0.8em;
}
.myModal .un,
.myModal .pw{
    width:6em;
    display:inline-block;
}
.myModal input{
    margin:0 0 0.5em 0;
    border:thin solid #ddd;
    border-radius:2px;
    display:inline-block;
    line-height:1.7;
    height:1.7em;
    width:14em;
    padding-left:0.5em;
}
.myModal a{
    float:right;
    display:inline;
}
.fail{
    padding-top:1em;
    color:#f34e3a;
}
/*#endregion */

@media (min-width: 1025px) {
  /*desktop*/
section article {
    padding:1em;
    width:21.5%;
}
  
 
}
@media (min-width: 701px) and (max-width: 1024px) {
  /*tablet*/
  body {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-stretch: ultra-condensed;
  }
   section article {
    width: 42%;
    padding:1em;
  }
    header {
        padding: 1em 1.5%;
    }
 header h1 {
  padding-left:0.5em;
}
  header h2 {
  margin-bottom: 0;
  padding-left: 1em;
}
   
}
@media (max-width: 700px) {
  /*mobile*/
  body {
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-stretch: ultra-condensed;
  }
  section article {
    width: 100%;
    padding:0;
    padding-bottom:1em;
    padding-top:1em;
    border-bottom:thin solid #e9e9e4;
  }
  header {
        padding: 1em 1.5%;
    }
 header h1 {
  padding-left:0.5em;
}
 header h2 {
  margin-bottom: 0;
  padding-left: 1em;
}
 .myModal{
    width: 13em;
    left: 100%;
    top: 20%;
    padding: 1em;
 }
 .myModal .fa-spin {
        margin:0;
    }
 #closeModal {
    width:3em;
    margin: 0;
    font-size:0.8em;
}
 .myModal input{
     display:inline;
 }
.myModal .un,
.myModal .pw{
    display:inline-block;
    width:8em;
}
.myModal a{
    float:right;
    display:inline;
    margin-top:0.5em;
}
}