/****************************************************************************

                         DO NOT EDIT THIS FILE !!!!

                    Put custom CSS in the custom.css file

****************************************************************************/

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

h1, h2, h3, h4 {
    color: #000000;
    font-weight: 400;
    margin: 0;
    padding: 0 0 10px;
}

h1 {
    font-weight: 100;
    padding: 0 0 14px;
}

a:link, a:visited {
    color: #1e90ff;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

a:active {
    color: #000000;
}

p, pre {
    margin: 1em 0 0;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */


html, body {height: 100%;}

.mainWrap {min-height: 100%;}

.mainWrap {
    overflow:auto;
    padding-bottom: 180px;  /* must be same height as the footer */
}


/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

.wrapper {
    width: 90%;
    margin: 0 auto;
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 2em;
}

.main aside {
    color: white;
    padding: 0 5% 10px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Microsite default styles
   ========================================================================== */

/* General */

@font-face {
    font-family: 'Myriad Pro Condensed';
    font-style: normal;
    font-weight: normal;
    src: local('Myriad Pro Condensed'), url('fonts/MYRIADPRO-COND.woff') format('woff');
}

body {
    font: 16px/24px 'Open Sans', Helvetica, Arial, sans-serif;
}

header.wrapper {
    padding: 20px 0;
    text-align: center;
    width: 90%;
}

button {
    border:none;
    border-radius: 3px;
    font-size: 20px;
    font-weight: bold;
    padding: 11px 21px;
    margin-top: 17px;
    display: block;
    width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    border: 1px solid #A5A5A5;
    border-radius: 3px;
    color: #333333;
    font-size: 20px;
    padding: 10px;
    width: 100%;
}

.hidden-mobile {
    display: none !important;
    visibility: hidden !important;
}

.hidden-desktop {
    display: block !important;
    visibility: visible !important;
}

.italics {
    font-style: italic;
}

#banner {
    max-width: 100%;
    width: auto;
    height: auto;
}

/* pickup * and survey*/

#pickup,
#survey {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding: 10%;
    width: 90%;
}

#pickup h1,
#survey h1 {
    font-size: 24px;
    font-weight: 100;
    line-height: normal;
    padding: 0;
}
#pickup input,
#survey input,
#pickup select,
#survey select
{
    display: block;
    clear: both;
    margin-bottom: 16px;
}
#pickup label,
#survey label {
    display: block;
}

.pickup-form-error,
.pickup-failure,
.survey-form-error,
.survey-failure {
    color: #760303;
    font-size: 12px;
    background: #ea9999;
    border: 1px solid #d37c7c;
    border-radius: 3px;
    line-height: 1.4;
    padding: 15px;
    margin-top: -16px;
}

#pickup .terms-and-conditions {
    font-size: 11px;
}

.registerAnotherCode {
    display: inline-block;
    font-size: 14px;
    margin: 1em 0 0;
}

#survey .survey-form-radio {
    clear: none;
    float: left;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 6px;
    width: auto;
}
.optin {
    clear: both;
    display: block;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid #A5A5A5;
    padding: 29px 6px 30px 6px;
}

#survey .survey-form-checkbox,
#pickup .pickup-form-checkbox {
    float: left;
    margin: 7px 5px 0 0;
    width: auto;
}

/* contact sheet */

.contactsheet {
    background-color: #FFFFFF;
    border-radius: 2px;
    margin: 0 auto;
    max-width: 720px;
    text-align: center;
    width: 90%;
}

.media-grid-container {
    padding: 20px 0;
}

.media-grid-container h2 {
    font-size: 30px;
    line-height: normal;
}

.media-grid-container h3 {
    font-size: 18px;
    line-height: normal;
    padding: 0 16px 8px;
}

.media-cell {
    clear: none;
    display: inline-block;
    height: 80px;
    margin: 10px;
    max-width: 120px;
    vertical-align: top;
}

.media-cell a {
    display: block;
}

.media-cell a img {
    max-height: 80px;
    max-width: 120px;
    width: auto;
}

/* photo page */

#media, #media-overlay-img, #media-img {
    display: block;
    max-height: 560px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}


/* video page */

#video{
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 720px;
}

/* social */
#social {
    width: 95%;
    margin: 0 auto;
}
.rrssb-buttons {
    box-sizing: border-box;
    height: auto;
    margin: 0 auto;
    padding: 4px 0 0;
    width: 100%;
}
.rrssb-buttons::after {
    clear: both;
}
.rrssb-buttons::after, .rrssb-buttons::before {
    content: " ";
    display: table;
}
.rrssb-buttons li {
    box-sizing: border-box;
    float: left;
    height: auto;
    line-height: 13px;
    list-style: outside none none;
    margin: 0;
    padding: 0 2px;
}
.rrssb-buttons .rrssb-facebook {
    padding-left: 0;
}
.rrssb-buttons .download {
    padding-right: 0;
}
.rrssb-buttons .rrssb-smugmug {
    padding-right: 0;
}
.rrssb-buttons .rrssb-sms {
    padding-right: 0;
}
.rrssb-buttons li.rrssb-email a {
    background-color: #17baff;
}
.rrssb-buttons li.rrssb-email a:hover {
    background-color: #2aa8ed;
}
.rrssb-buttons li.rrssb-facebook a {
    background-color: #306199;
}
.rrssb-buttons li.rrssb-facebook a:hover {
    background-color: #244872;
}
.rrssb-buttons li.rrssb-tumblr a {
    background-color: #32506d;
}
.rrssb-buttons li.rrssb-tumblr a:hover {
    background-color: #22364a;
}
.rrssb-buttons li.rrssb-sms a {
    background-color: #48c15c;
}
.rrssb-buttons li.rrssb-sms a:hover {
    background-color: #2aa33e;
}
.rrssb-buttons li.rrssb-twitter a {
    background-color: #000;
}
.rrssb-buttons li.rrssb-twitter a:hover {
    background-color: rgba(0,0,0,0.35);
}
.rrssb-buttons li.rrssb-instagram a {
    background-color: #0c6895;
}
.rrssb-buttons li.rrssb-instagram a:hover {
    background-color: #11517e;
}
.rrssb-buttons li.download a {
    background-color: #008BCF;
}
.rrssb-buttons li.download a:hover {
    background-color: #2470b4;
}
.rrssb-smugmug {
    width: 100%;
    margin: 50px auto 0;
    text-align: center;
}

#smugmug svg.smugmug-order-prints-button {
    width: auto;
    height: 36px;
}

.rrssb-buttons li a {
    background-color: #ccc;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    font-size: 11px;
    font-weight: 700;
    padding: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out 0s;
    width: 100%;
}
.rrssb-buttons li a .rrssb-icon {
}
.rrssb-buttons li a .rrssb-icon svg {
    height: 30px;
    width: 30px;
}
.rrssb-buttons li a .rrssb-icon svg path {
    fill: #fff;
}
.rrssb-buttons li a .rrssb-text {
    color: #fff;
}
.rrssb-buttons li a:active {
    box-shadow: 1px 3px 15px 0 rgba(22, 0, 0, 0.25) inset;
}

@media only screen and (min-width: 520px) {

    .rrssb-buttons li a .rrssb-icon svg {
        height: 50px;
        width: 50px;
    }

    .rrssb-buttons li a {
        padding: 14px 0;
    }
}

/* widgets */

.widget {
    background: white;
    clear: both;
    display: block;
    width: 100%;
    position: relative;
    padding: 1px 0 20px;
}

.widget h2 {
    font-weight: normal;
    margin-top: 15px;
}

.widget ul {
    padding: 0;
    margin: 0;
}

.widget ul li {
    list-style: none;
    margin-bottom: 10px;
}

.widget ul li input {
    margin: 0;
}

.widget label {
    color: #9F9E9E;
    display: block;
    margin-bottom: 9px;
}

.widget input[type=text],
.widget input[type=email],
.widget input[type=tel],
.widget input[type=number],
.widget textarea,
.widget label {
    font-size: 18px;
    font-weight: normal;
}

.widget .wrap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.widget .close {
    background: url("/images/close.png") repeat scroll 0 0 transparent;
    background-size: contain;
    cursor: pointer;
    display: block;
    float: right;
    height: 40px;
    margin: -10px -15px 0 0;
    width: 40px;
}

.widget .phone {
    clear: both;
    display: block;
    padding-bottom: 10px;
    width: 100%;
}

.widget .phone #area_code, .widget .phone #number1, .widget .phone #number2 {
    max-width: 65px;
    text-align: center;
}

.widget .phone #number2 {
    max-width: 80px;
}
.widget #sms_message {
    height: 100px;
}

.widget .sms_count_wrap {
    width: 100% !important;
}
.widget.open {
    z-index:99999999;
}

#sms_count {
    background-color: #DEDEDE;
    border-radius: 4px;
    color: #000000;
    margin-top: 5px;
    padding: 2px 10px;
}

.sms_status, .email_status, #smugmug_status {
    border-radius: 4px;
    color: #FFFFFF;
    padding: 5px 15px;
    text-align: center;
    margin: auto;
}

.send_sms, #send_email, #smugmug {
    margin: 15px auto 0;
    width: 75%;
}

.sms_status_sending, .email_status_sending, .smugmug_status_sending {
    background-color: #F0C000;
}
.sms_status_error, .email_status_error, .smugmug_status_error {
    background-color: #d00101;
}
.sms_status_success, .email_status_success {
    background-color: #5BBA52;
}

#emailForm .from li {
    margin-bottom: 20px;
}

/* instagram */

.instagram-widget {
    display: none;
    background: none repeat scroll 0 0 #000000;
    left: 0;
    padding: 55px 20px 20px;
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100%;
}

.instagram-widget p {
    text-align: center;
    font-size: 15px;
    color: #ffffff;
}

.instagram-widget a {
    color: #ffffff;
}

.instagram-widget .close {
    background: url("/images/close.png") repeat scroll 0 0 / contain transparent;
    cursor: pointer;
    display: block;
    height: 40px;
    position: absolute;
    right: 10px;
    top: 6px;
    width: 40px;
}

.instagram-widget img {
    display: block;
    height: auto;
    margin: 0 auto;
    width: 95%;
}

.video-widget #send_email {
    text-transform: uppercase;
}

.instructions-widget .wrap h2,
.instructions-widget .wrap p {
    text-align: center;
}

.instructions-widget img {
    display: block;
    height: auto;
    margin: 0 auto;
}

/* footer */

#footer-container {
    background-color: rgba(255, 255, 255, 0.2);
    clear: both;
    display: block;
    font-size: 14px;
    height: 180px;
    line-height: 1.8;
    /*margin: -150px auto 0;*/
    padding: 20px 5% 0;
    position: relative;
    text-align: center;
    width: 100%;
}

/* 404 page */
#error{
    background: white;
    padding: 1px 19px 19px;
}

.flowplayer {
    max-height: 560px;
}
/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 728px) {

    /* ==================================
        DESKTOP: Microsite default styles
       ================================== */

    /* General */

    ::-webkit-input-placeholder {
        color: white;
    }

    :-moz-placeholder { /* Firefox 18- */
        color: white;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
        color: white;
    }

    :-ms-input-placeholder {
        color: white;
    }

    .mainWrap {
        overflow:auto;
        padding-bottom: 130px; /* must be same height as the footer */
    }

    .hidden-mobile{
        display: block !important;
        visibility: visible !important;
    }

    .hidden-desktop {
        display: none !important;
        visibility: hidden !important;
    }

    header.wrapper {
        padding: 25px 10px 40px;
        width: 100%;
    }

    #banner {
        max-width: 720px;
        width: auto;
        height: auto;
    }

    /* pickup and survey */
    #pickup,
    #survey {
        border-radius: 2px;
        margin: 0 auto;
        padding: 60px 80px;
        width: 515px;
    }

    #pickup h1,
    #survey h1 {
        margin-top: 0;
        margin-bottom: 22px;
        font-size: 28px;
    }

    #pickup label,
    #survey h1 {
        margin-top: 4px;
    }

    #pickup label .italics,
    #survey label .italics {
        font-size: 12px;
    }

    #pickup input,
    #survey input {
        margin-top: 0;
    }

    /* video */

    #video {
        width: auto;
        height: auto !important;
    }

    /*  contactsheet  */

    .media-grid-container {
        padding: 40px 0;
    }
    .media-grid-container h2 {
        font-size: 24px;
    }
    .media-grid-container h3 {
        font-size: 18px;
        padding-bottom: 20px;
    }
    .media-cell {
        height: 140px;
        max-width: none;
    }

    .media-cell a img {
        max-height: 140px;
        max-width: none;
    }

    /* phtotopage */

    .media-container {
        margin: 0 auto;
        max-width: 720px;
        width: auto;
    }

    /* social */

    #social {
        width: 100%;
        margin: 0 auto;
    }

    /* widgets */

    .widget {
        border-radius: 4px;
        margin: 0 auto;
        width: 632px;
        overflow: hidden;
    }

    .widget .wrap{
        text-align: left;
        width: 591px;
    }

    .widget .close{
        background-size: contain;
        height: 26px;
        width: 26px;
        right: 0;
        top: 0;
    }

    .widget h2{
        margin-bottom: 13px;
        text-align: left;
    }

    .widget label{
        color: black !important;
        font-size: 14px;
        font-weight: normal;
        margin-bottom: 0;
        width: 262px !important;
    }

    .widget #emailForm ul li{
        width: 280px !important;
        display: inline;
        float: left;
    }

    .widget #emailForm ul li input{
        width: 262px !important;
    }

    #emailForm #field-container-fullname{
        margin-right: 30px;
    }

    #emailForm #field-container-fullname,
    #emailForm #field-container-email{
        margin-bottom: 10px;

    }

    #emailForm #field-container-email-1,
    #emailForm #field-container-email-2,
    #emailForm #field-container-email-3,
    #emailForm #field-container-email-4 {
        margin-bottom: 10px;
    }

    #emailForm #field-container-email-1,
    #emailForm #field-container-email-3 {
        margin-right: 30px;
    }
    #sms_count {
        float: right;
        margin-top: -10px;
    }

    .send_sms, #send_email, #smugmug {
        margin: 0;
        width: auto;
    }

    .sms_status, .email_status, #smugmug_status {
        max-width: 280px;
        font-size: 14px;
    }

    /* instagram */

    .video-widget label {
        width: 422px !important;
    }

    .instructions-widget {
        width: 332px;
    }

    .instructions-widget .wrap {
        width: 291px;
    }

    /* footer */

    #footer-container {
        font-size: 12px;
        height: 100px;
        line-height: 1.2;
        margin: -100px 0 0;
        padding: 30px 0 0;
    }

    #footer-container p{
        display: inline;
    }

    #footer-container p:last-child{
        display: block;
    }

    #footer-container p br{
        display: none;
    }

}



/****************************************************************************

                     PUT CUSTOM MICROSITE STYLES HERE

                    This file is loaded after main.css

****************************************************************************/

/*
Below are sample CSS customizations.

The referenced font/image files do not exist.

Add fonts/images to the top level /public/ folder
and update the references in the CSS below.
*/

/*
@font-face {
    font-family: 'GothamHTFBold';
    src: url('../fonts/gothamhtf-bold.eot');
    src: url('../fonts/gothamhtf-bold.eot') format('embedded-opentype'),
    url('../fonts/gothamhtf-bold.woff2') format('woff2'),
    url('../fonts/gothamhtf-bold.woff') format('woff'),
    url('../fonts/gothamhtf-bold.ttf') format('truetype');
}

body {
    background-image: url("../images/back.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

#pickup h1,
#survey h1 {
    font-family: 'GothamHTFBold';
    color: #0c2c49;
}

#pickup label,
#survey label {
    font-family: 'GothamHTFBold';
    color: #0C2C49;
}

#pickup p {
    font-size: 12px;
    line-height: normal;
    font-family: 'GothamHTFBold';
}

*/

/*  *******

Add styles for all screens here

    ******* */

@media only screen and (min-width: 728px) {

    /*  *******

    Add overriding styles for *large* screens here

        ******* */
    #before_survey {
        width: 85%
    }
}