/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/*  LINEAR GRADIENTS  */
/*  BREAKPOINTS  */
/*  VISUAL STYLES  */
/*  LAYOUT FRAMEWORK  */
.contact-details, .social {
  width: 1200px;
  margin: 0 auto;
  text-align: left; }
  @media screen and (max-width: 1319px) {
    .contact-details, .social {
      width: 90%;
      margin-left: 5%;
      margin-right: 5%; } }

.ceremony-video, .ceremony-video .video-wrapper {
  position: relative; }

.ceremony-video .video-wrapper iframe {
  position: absolute; }

.social a {
  box-sizing: border-box; }

.contact-details h3 {
  text-transform: uppercase; }

/*  COLUMN FRAMEWORK  */
.social a {
  display: block;
  float: left; }

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
.social a {
  width: 30.6666%;
  margin-right: 4%; }
  .social a:nth-of-type(3n) {
    margin-right: 0; }
  .social a:nth-of-type(3n+1) {
    clear: both; }

/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* FORMS */
/* CONTENT */
.contact-details h3 {
  margin-bottom: 0.4em;
  color: #d41a62;
  font-size: 1.3em;
  font-weight: 200; }

.contact-details p, .contact-details a {
  color: #64625e;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 200;
  margin-bottom: 1.4em; }

/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* CONTACT DETAILS */
.details-row {
  background-color: #000;
  margin-top: 1.5em; }

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

/* SOCIAL LINKS */
.social-row {
  padding: 1.5em 0 100px 0; }

.social {
  padding: 40px 0; }
  .social a {
    padding: 40px 0;
    background-image: url("/images/global/social-sprite.png");
    background-repeat: no-repeat;
    background-size: 42px; }
  .social .facebook {
    background-position: center 0; }
  .social .instagram {
    background-position: center -138px; }
  .social .pinterest {
    background-position: center -395px; }

.ceremony-video .video-wrapper {
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  margin-bottom: 2em; }
  .ceremony-video .video-wrapper iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* 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 (max-width: 670px) {
  .main-content {
    display: -webkit-flex;
    /* Safari */
    -webkit-flex-wrap: wrap;
    /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap; }
  .content {
    order: 2; }
  .sidebar {
    order: 1;
    margin-bottom: 20px; } }

@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; } }