/* Generated from src/style.scss (Lato contact form styling) */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

:root{
  --white:#fff;
  --grey:#ccc;
  --dark_grey:#555;
  --blue:#4f6fad;
  --pink:#ee9cb4;
}

/* Font + background */
body{
  background:url('/Pattern.png'); /* keep SCSS intent (will be overridden below by compiled values) */
  font-size:100%;
  font-family: 'Questrial', sans-serif;
  font-weight:400;
  border-radius: 10px;
}

div,textarea,input{box-sizing:border-box;}

.container{
  max-width:510px;
  min-width:324px;
  margin:50px auto 0px;
  background-color:var(--white);
  border:5px solid #d0d0d0;
  border-bottom:3px solid var(--grey);
  border-radius: 10px;
}

.row{
  width:100%;
  margin:0 0 1em 0;
  padding:0 2.5em;
}
.row.header{
  padding:1.5em 2.5em;
  border-bottom:1px solid var(--grey);
  background:url('/Pattern.png') left -80px;
  color:#fff;
  border-radius: 10px;
}
.row.body{padding:.5em 2.5em 0;}

.pull-right{float:right;}

h1{
  font-family: 'Questrial', sans-serif;
  font-weight:300;
  display:inline-block;
  font-weight:100;
  font-size:2.8125em;
  border-bottom:1px solid hsla(100%,100%,100%,0.3);
  margin:0 0 0.1em 0;
}

h3{
  font-family: 'Questrial', sans-serif;
  font-weight:400;
  font-size:1.25em;
  margin:1em 0 0.4em 0;
}

.btn{
  font-size:1.0625em;
  display:inline-block;
  padding:0.74em 1.5em;
  margin:1.5em 0 0;
  color:#fff;
  border-width:0 0 0 0;
  border-bottom:5px solid;
  text-transform:uppercase;
  font-family: 'Questrial', sans-serif;
  font-weight:300;
  background-color:#b2b2b2;
  border-bottom-color:#8c8c8c;
}

.btn:hover{
  background-color:#bfbfbf;
}

.btn.btn-submit{
  background-color:var(--blue);
  border-bottom-color:#374d78;
}

.btn.btn-submit:hover{
  background-color:#5f7cbb;
}

form{
  max-width:100%;
  display:block;
  border-radius: 10px;
}
form ul{margin:0;padding:0;list-style:none;}
form ul li{
  margin:0 0 0.25em 0;
  clear:both;
  display:inline-block;
  width:100%;
}
form ul li:last-child{margin:0;}
form ul li p{margin:0;padding:0;float:left;}
form ul li p.right{float:right;}
form ul li .divider{
  margin:0.5em 0 0.5em 0;
  border:0;
  height:1px;
  width:100%;
  display:block;
  background-color:var(--blue);
  background-image:linear-gradient(to right,var(--pink),var(--blue));
}
form ul li .req{color:var(--pink);}
.required-star { color: red; margin-left: 2px; }

form label{
  display:block;
  margin:0 0 0.5em 0;
  color:var(--blue);
  font-size:1em;
  border-radius: 10px;
}
form input{
  margin:0 0 0.5em 0;
  border:1px solid var(--grey);
  padding:6px 10px;
  color:var(--dark_grey);
  font-size:1em;
  border-radius: 10px;
}
form textarea{
  border:1px solid var(--grey);
  padding:6px 10px;
  width:100%;
  color:var(--dark_grey);
  border-radius: 10px;
}
form small{
  color:var(--blue);
  margin:0 0 0 0.5em;
}

@media only screen and (max-width:480px){
  .pull-right{float:none;}
  input{width:100%;}
  label{
    width:100%;
    float:left;
    clear:both;
  }
  li,p{width:100%;}
  input.btn{margin:1.5em 0 0.5em;}
  h1{font-size:2.25em;}
  h3{font-size:1.125em;}
  li small{display:none;}
}