@import "../fonts/webfonts.css";

body{
  font-family: 'NeoSansPro-Light';
}

h1, h2, h3, h4, h5, h6{
  font-family: 'NeoSansStd-Bold';
  margin: 0 0 20px 0;
  color: #5c2d91;

}

header{
  background-color: #5c2d91;
  text-align: center;
  padding: 100px 0 80px 0;
  position: relative;
}

.HomePage header{
  padding: 100px 0 400px 0;
}

header .splash{
  position: absolute;
  bottom: -150px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

h1{
  font-size: 50px;

}

.navarea{
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #5c2d91;
  padding: 20px 0;
  z-index: 9999;
}

.navarea li{
  float: left;
  list-style: none;
  margin: 0 10px;
}

.navarea li a{
  color: #fff;
}

.intro{
  margin-top: 200px;
  margin-bottom: 80px;
  text-align: center;
  font-size: 22px;
}

.banner{
  width: 100%;
  padding: 70px 0;
  text-align: center;
  color: #5c2d91;
  font-size: 18px;
  position: relative;
}


.banner p{
  font-size: 18px !important;
}

.banner a{
  color: #000 !important;
}

.banner h2{
  font-size: 50px;
  margin: 0 0 15px 0;
  color: #5c2d91;
  line-height: 110%;
}

.banner h3{
  font-size: 42px;
  margin: 0;
  color: #5c2d91;
}

.banner h4{
  font-size: 22px;
  margin: 0 0 20px 0;
  color: #5c2d91;
  line-height: 135%;
}

.banner a, .banner a:hover, .banner a:visited, .banner a:active, .banner a:focus{
  color: #fff;
}

.banner.purple{
  background-color: #5c2d91;
}

.banner.pink{
  background-color: #d83d96;
}

.banner.grey{
  background-color: #eee;
}

.banner.pink, .banner.blue h1, .banner.pink h2, .banner.pink h3, .banner.pink h4, .banner.purple, .banner.purple h1, .banner.purple h2, .banner.purple h3, .banner.purple h4{
  color: #fff;
}

.banner.blue{
  background-color: #8ed8f8;
}

.banner.blue{
  color: #000;
}

.banner.blue h1, .banner.blue h2, .banner.blue h3, .banner.blue h4{
  color: #5c2d91;
}

.banner.purple .btn-primary, .banner.pink .btn-primary, .banner.blue .btn-primary{
  border: 2px solid #fff;
  color: #fff;
  margin-top: 20px;
}

.splashleft{
  position: absolute;
  left: 100px;
  top: -50px;
  z-index: 999;
}

.splashright{
  position: absolute;
  right: 100px;
  bottom: -50px;
  z-index: 999;
}

.contact{
  font-size: 42px;
  display: block;
  margin: 0 0 15px 0;
}

footer{
  width: 100%;
  background-color: #000;
  padding: 40px 0;
  color: #fff;
}

.footcol2{
  text-align: right;
}

.womeninprint{
  font-size: 12px;
  padding: 20px 0;
  display: inline-block;
  width: 200px;
}

.social{
  font-size: 38px;
}

footer a, footer a:hover, footer a:visited, footer a:active, footer a:focus{
  color: #fff;
  text-decoration: none;
}

footer .credits{
  font-size: 10px;
}

.middleColumn{
  text-align: center;
}

.btn-toolbar input, .middleColumn input{
  text-align: center;
  float: none !important;
}

.middleColumn input{
  margin: 0 auto;

}

.userform-fields .field{
  margin-bottom: 20px;
}

.white .field input, .white .field textarea{
  border: none;
  background-color: #eee;
}

.grey .field input, .grey .field textarea{
  border: none;
  background-color: #fff;
}

.btn-primary{
  background: none;
  border: 2px solid #5c2d91;
  color: #5c2d91;
  border-radius: 15px;
  padding: 12px 30px 10px;

  font-size: 20px;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited{
  background-color: #5c2d91 !important;
  color: #fff;

}

.positions h4{
  /* font-size: 32px; */
}

.positions p{
  /* font-size: 16px;
  margin-bottom: 15px; */
}

/* RESPONSIVE CSS
-------------------------------------------------- */
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1550px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width: 1199px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  header{
    overflow: hidden;
  }

  .intro{
    margin-top: 40px;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {

.logo{
  width: 80%;
  height: auto;

}

.splash{
  width: 100%;
  height: auto;
  display: none;
}

.intro{
  margin: 40px 0;
}

.HomePage header{
  padding: 100px 0 40px;
}

.banner h2, .banner h3{
  font-size: 22px;
}

.contact{
  font-size: 22px;
}

footer *{
  text-align: center !important;
}

.splashleft, .splashright{
  display: none;
}

h1{
  font-size: 32px;
}

}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {


}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}