/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/* /////// CUSTOM BORDER RADIUS //////// */
/* /////// CUSTOM TRANSITIONS //////// */
/* /////// LINEAR GRADIENTS //////// */
/* /////// BREAKPOINTS //////// */
/* CUSTOM MIN MAX */
/* CUSTOM MAX */
/* CUSTOM MIN */
/* --------------------------------- */
/* /////// LAYOUT FRAMEWORK //////// */
/* --------------------------------- */
/* PLACEHOLDERS */
.main-content {
  position: relative; }

.main-content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.main-content, .social h2 {
  text-align: center; }

.contact-details, .social {
  width: 1200px;
  margin: 0 auto;
  text-align: left; }
  @media screen and (max-width: 1199px) {
    .contact-details, .social {
      width: 95%;
      padding-left: 2.5%;
      padding-right: 2.5%; } }

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
/* --------------------------------- */
/* /////// END LAYOUT FRAMEWORK //// */
/* --------------------------------- */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* PLACEHOLDERS */
.social h2 {
  text-transform: uppercase;
  color: #DD9CAB;
  font-size: 1.2em;
  margin-bottom: 0.5em;
  font-weight: normal; }

.contact-details h3 {
  color: #DD9CAB;
  font-size: 2em;
  margin-bottom: 0.4em; }

.contact-details p, .contact-details a {
  color: #71655A;
  font-size: 0.9em;
  line-height: 1.6em;
  margin-bottom: 0.5em; }

/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* HERO FORM */
.main-content {
  overflow: hidden;
  padding-top: 50px; }

/* CONTACT DETAILS */
.details-row {
  background-color: #b7a68f;
  margin-top: 20px; }

.contact-details {
  padding: 50px 0 100px 0; }
  .contact-details li {
    float: left;
    width: 100%;
    text-align: center; }
  .contact-details h3 {
    font-weight: normal;
    color: #fff;
    font-size: 1em;
    text-transform: uppercase; }
  .contact-details p {
    font-size: 1.5em; }
  .contact-details a {
    font-size: 1em !important; }

/* SOCIAL LINKS */
.social {
  padding: 50px 0 80px 0; }
  .social h2 {
    display: block;
    padding-bottom: 20px; }
  .social li {
    display: inline-block;
    width: 30.6666%; }
  .social h3 {
    margin: 0 auto 15px;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url("/images/contact/social-icons.png") no-repeat;
    background-size: 40px;
    text-align: center; }
  .social .pinterest h3 {
    background-position: center -220px; }
  .social .facebook h3 {
    background-position: center 0px; }
  .social .instagram h3 {
    background-position: center -150px; }
  .social p, .social a {
    text-align: center;
    font-size: 1em;
    color: #5C5C5B; }

/* MEDIA QUERIES */
@media screen and (min-width: 781px) and (max-width: 1140px) {
  .social li {
    width: 25%; } }
@media screen and (max-width: 1024px) {
  .hero-form {
    padding-top: 150px;
    height: 1000px; }

  .contact-form h1 {
    font-size: 5em; }

  .contact-details {
    padding: 80px 0; } }
@media screen and (min-width: 581px) and (max-width: 780px) {
  .social li {
    width: 31%; } }
@media screen and (max-width: 620px) {
  .contact-form fieldset span {
    margin-bottom: 30px; } }
@media screen and (max-width: 600px) {
  .contact-details p, .social a {
    font-size: 1em; } }
@media screen and (max-width: 540px) {
  .contact-form h1 {
    font-size: 4.5em; }
  .contact-form h2 {
    font-size: 1.8em; } }
@media screen and (max-width: 500px) {
  .contact-details h3 {
    margin-bottom: 30px; }
  .contact-details li {
    float: none;
    width: 100%; }
  .contact-details .contact-phone {
    background-position: center -260px;
    margin-bottom: 40px; }
  .contact-details .contact-email {
    background-position: center -360px; } }
@media screen and (max-width: 580px) {
  .social {
    padding: 80px 0; }
    .social h2 {
      margin-bottom: 40px; }
    .social li {
      display: block;
      width: auto; }
      .social li:not(:last-child) {
        margin-bottom: 30px; }
    .social h3 {
      margin: 0 auto 10px; } }
@media screen and (max-width: 414px) {
  .hero-form {
    height: 850px; } }
@media screen and (max-width: 413px) {
  .hero-form {
    padding-top: 100px;
    height: 800px; }

  .contact-form fieldset span {
    margin-bottom: 20px; }
  .contact-form h2 {
    margin-bottom: 40px;
    font-size: 1.4em; } }
@media screen and (max-width: 374px) {
  .social {
    padding: 60px 0; }
    .social h2 {
      margin-bottom: 30px; }
    .social h3 {
      font-size: 1em; } }