/*
---note: these are common colors.  designer may use some one off colors in layouts, etc.

$white: #ffffff;
$black: #000000;

$darkblue: #096083;
$blue: #008cc2;
$lightblue: #0ca7e3;
$highlightblue: #00b8fc;
$red: #dc1313;
$grey: #989898;
$mediumgrey: #c5c5c5;
$light: #f1f1f1;

$viva: "Permanent Marker", cursive;//400
$avenir: "Avenir W01", Helvetica, Arial, "Lucida Grande", sans-serif;//300,500,800
$brandon: "brandon-grotesque", sans-serif;//500,900
$futuracond: "futura-pt-condensed", sans-serif;//400,500
*/
#evite-banners { overflow: hidden; margin-bottom: 2em; }

#content #evite-list { list-style: none; width: 100%; position: relative; margin: 0 2em 0 0; line-height: 1; overflow: hidden; }
@media (min-width: 768px) { #content #evite-list { float: right; width: 47.5%; margin-bottom: 0; } }
#content #evite-list .slide { overflow: hidden; width: 100%; }

#content #evite-list li { width: 100%; list-style: none; line-height: 1; margin-bottom: 1em; }
@media (min-width: 768px) { #content #evite-list li { float: left; width: 47.5%; margin-right: 2.5%; } }

#content #evite-list li a { display: block; position: relative; }

#content #evite-list li a:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; box-sizing: border-box; border: 10px solid transparent; transition: .3s; }

#content #evite-list li a:hover:before, #content #evite-list li a.active:before { border-color: #008cc2; }

#content #evite-list li a img { display: block; width: 100%; height: auto; }

#evite-preview { position: relative; margin-top: 2em; }
@media (min-width: 768px) { #evite-preview { float: left; width: 47.5%; margin: 0; } }

#evite-wrap { display: none; overflow: hidden; }
#evite-wrap img { display: block; width: 100%; height: auto; }

#evite-form { border: 0; max-width: 700px; margin-bottom: 2em; }

#evite-form label { display: block; margin: 27px 0 5px 0; color: #000000; font-size: 1.25em; text-transform: uppercase; font-weight: 900; margin-bottom: .25em; }
@media (min-width: 768px) { #evite-form label { font-size: 1.5em; } }

#evite-form textarea, #evite-form input[type="text"] { color: #000000; font-size: 16px; padding: .75em; margin-bottom: .5em; font-weight: 400; background-color: #f1f1f1; border: 0; outline: none; border-radius: 0; box-shadow: none; width: 90%; }

#evite-form textarea { height: 120px; padding-top: 10px; padding-bottom: 10px; width: 92%; line-height: 1.3; }

#evite-form label.required:after { content: '*'; color: #dc1313; }

#evite-form .form-row { overflow: hidden; }
@media (min-width: 1028px) { #evite-form .form-row { margin-bottom: 1em; } }

#evite-form .form-pair { position: relative; }

@media (min-width: 1028px) { #evite-form .form-row .form-pair { float: left; width: 47.5%; margin-left: 5%; } }
#evite-form .form-row .form-pair:first-child { margin-left: 0; }

#evite-form input[type='submit'] { margin: 1em 0 0 0; }

#evite-form label.error { margin: 0; color: #dc1313; font-size: 14px; font-weight: 400; text-transform: none; }

#evite-form div.required { position: relative; }

#content .status p { font-size: 16px; }

#carousel-pager { text-align: center; }
#carousel-pager span { text-transform: uppercase; color: #008cc2; font-size: 1.125em; cursor: pointer; transition: .3s; }
#carousel-pager span:hover { color: #0ca7e3; }
#carousel-pager span.carousel-prev { float: left; }
#carousel-pager span.carousel-next { float: right; }