/*
*  Custom styles for DC Landing page template.
*/

/***** Custom fonts (fontface) **********/
@font-face {
    font-family: 'latobold';
    src: url('../woff2/lato-bold-webfont.woff2') format('woff2'),
         url('../woff/lato-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold_italic';
    src: url('../woff2/lato-bolditalic-webfont.woff2') format('woff2'),
         url('../woff/lato-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoheavy';
    src: url('../woff2/lato-heavy-webfont.woff2') format('woff2'),
         url('../woff/lato-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoheavy_italic';
    src: url('../woff2/lato-heavyitalic-webfont.woff2') format('woff2'),
         url('../woff/lato-heavyitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoitalic';
    src: url('../woff2/lato-italic-webfont.woff2') format('woff2'),
         url('../woff/lato-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latolight';
    src: url('../woff2/lato-light-webfont.woff2') format('woff2'),
         url('../woff/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latolight_italic';
    src: url('../woff2/lato-lightitalic-webfont.woff2') format('woff2'),
         url('../woff/lato-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latomedium';
    src: url('../woff2/lato-medium-webfont.woff2') format('woff2'),
         url('../woff/lato-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latomedium_italic';
    src: url('../woff2/lato-mediumitalic-webfont.woff2') format('woff2'),
         url('../woff/lato-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoregular';
    src: url('../woff2/lato-regular-webfont.woff2') format('woff2'),
         url('../woff/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latosemibold';
    src: url('../woff2/lato-semibold-webfont.woff2') format('woff2'),
         url('../woff/lato-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latosemibold_italic';
    src: url('../woff2/lato-semibolditalic-webfont.woff2') format('woff2'),
         url('../woff/lato-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoblack';
    src: url('../woff2/lato-black-webfont.woff2') format('woff2'),
         url('../woff/lato-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoblack_italic';
    src: url('../woff2/lato-blackitalic-webfont.woff2') format('woff2'),
         url('../woff/lato-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*
    font-family: 'latoitalic';
    font-family: 'latolight';
    font-family: 'latolight_italic';
    font-family: 'latoregular';
    font-family: 'latomedium';
    font-family: 'latomedium_italic';
    font-family: 'latosemibold';
    font-family: 'latosemibold_italic';
    font-family: 'latoblack';
    font-family: 'latoblack_italic';
    font-family: 'latobold';
    font-family: 'latobold_italic';
    font-family: 'latoheavy';
    font-family: 'latoheavy_italic';

******* end Custom fonts (fontface) *****/


.single-dc-landing #content:after {
    content: ' ';
    display: table;
    clear: both;
}

.single-dc-landing .dgo-quote,
.single-dc-landing  #content p,
.single-dc-landing  #content ol,
.single-dc-landing  #content ul,
.single-dc-landing .dgo-form,
.single-dc-landing .dgo-form form,
.single-dc-landing .dgo-form ul,
.single-dc-landing .dgo-form li,
.single-dc-landing .dgo-form label {
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

:target {
  display: block;
  position: relative;
  top: -103px; 
  visibility: hidden;
}

.single-dc-landing .edit-link {
    display: none;
}

.single-dc-landing #dgo-sect-1 {
    height: 358px;
}

.single-dc-landing .dgo-quote {
    position: relative;
    width: 92%;
    max-width: 540px;
    margin: 0 auto;
    padding: 100px 4% 0;
    background: url(../png/quote.png) center 50px no-repeat;
}

.single-dc-landing .dgo-quote p {
    font-family: 'latomedium_italic';
    font-size: 26px;
    font-size: 2.6rem;
    color: #e6e6e6;
    line-height: 1.8;
    margin-bottom: 25px;
}

.single-dc-landing .dgo-quote-author,
.single-dc-landing .dgo-quote-author-meta {
    display: block;
    font-family: 'latoregular';
    font-size: 20px;
    font-size: 2rem;
    color: #d3d3d3;
    text-align: right;
    line-height: 1.4;
    padding-right: 80px;
}

.single-dc-landing .dgo-quote-author {
}

.single-dc-landing .dgo-quote-author-meta {
}

/***** general page content **********/
.single-dc-landing p,
.single-dc-landing ol,
.single-dc-landing ul {
    position: relative;
}

.single-dc-landing p,
.single-dc-landing ul {
}

.single-dc-landing img,
.single-dc-landing img:hover {
    border: none;
    box-shadow: none;
}

.single-dc-landing #container {
    margin: 0 auto;
}

.single-dc-landing #content {
    width: 100%;
    padding: 45px 0;
}

.single-dc-landing #content h1 {
    clear: none;
    line-height: 1.4;
    max-width: 590px;
    margin: 0 0 25px;
    padding: 0;
}

.single-dc-landing #content p {
    line-height: 1.6;
    max-width: 420px;
    margin: 0;
    padding: 0;
}

.single-dc-landing .product-img {
    position: absolute;
    z-index: 8;
    left: 525px;
    top: -75px;
}

.single-dc-landing #content ol {
    position: relative;
    z-index: 7;
    background: #d9e5eb;
    margin: 30px 0;
    padding: 20px 0 6px 16px;
    overflow: visible;
}

.single-dc-landing #content ol:after {
    content: ' ';
    display: table;
    clear: left;
}

.single-dc-landing #content ol li {
    position: relative;
    float: left;
    clear: left;
    list-style-type: none;
    font-family: 'Cuprum', sans-serif;
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
    min-width: 180px;
    padding-left: 42px;
    background: url(../png/bullet-vegan.png) left 3px no-repeat;
    margin-bottom: 12px;
}

.single-dc-landing #content ul {
    margin: 25px 0 30px 22px;
    padding: 0;
}

.single-dc-landing #content ul li {
    list-style-type: disc;
    list-style-position: outside;
    font-size: 19px;
    line-height: 1.6;
}

.single-dc-landing #content h2 {
    font-size: 24px;
    font-weight: 600;
    color: #296a73;
    text-transform: none;
    text-align: center;
    max-width: 595px;
    margin: 40px 0 15px 8%;
}

.single-dc-landing #content h2 sup {
    color: #296a73;
}

.single-dc-landing .dgo-phone .phone a sup {
    top: auto;
}

.single-dc-landing sup {
    font-size: 0.5em;
    top: -0.8em;
}
/***** end general page content ******/


/***** Contact form ******************/
.single-dc-landing .wpcf7 {
    max-width: none;
}

.single-dc-landing .wpcf7:before {
    content: url(../png/arrow-request-right.png);
    position: absolute;
    left: 425px;
    top: 325px;
    z-index: 999;
}

.single-dc-landing .dgo-form {
    position: relative;
    float: right;
    z-index: 9;
    width: 100%;
    max-width: 287px;
    top: 5px;
    background: #a7a6a8;
    padding: 14px 11px 0;
    margin: 0 0 15px 2%;
}

.single-dc-landing #dgo-form-2 {
    display: none;
}

.single-dc-landing .wpcf7 p {
    line-height: 1;
    max-width: none;
    margin: 0;
}

.single-dc-landing .wpcf7 br {
    display: none;
}

.single-dc-landing .wpcf7-form-control-wrap {
    display: block;
    margin: 0 0 13px;
}

.single-dc-landing #content .wpcf7-form-control-wrap input,
.single-dc-landing #content .wpcf7-form-control-wrap select,
.single-dc-landing #content .wpcf7-form-control-wrap textarea {
    display: block;
    width: 100%;
    height: auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #3e3e3e;
    border: #ddd 1px solid;
    padding: 11px 20px;
}

.single-dc-landing .wpcf7-form-control-wrap input::placeholder,
.single-dc-landing .wpcf7-form-control-wrap select::placeholder,
.single-dc-landing .wpcf7-form-control-wrap textarea::placeholder {
    color: #3e3e3e;
}

.single-dc-landing .wpcf7-form-control-wrap.your-first-name:before,
.single-dc-landing .wpcf7-form-control-wrap.your-last-name:before,
.single-dc-landing .wpcf7-form-control-wrap.your-email:before,
.single-dc-landing .wpcf7-form-control-wrap.your-phone:before,
.single-dc-landing .wpcf7-form-control-wrap.your-address:before,
.single-dc-landing .wpcf7-form-control-wrap.your-city:before,
.single-dc-landing .wpcf7-form-control-wrap.your-state:before,
.single-dc-landing .wpcf7-form-control-wrap.your-zip:before {
    content: '*';
    position: absolute;
    margin: 9px 0 0 5px;
    font-family: 'latosemibold';
    font-size: 15px;
    color: #4ab6b8;
    z-index: 9;
}

.single-dc-landing .wpcf7-form-control-wrap option {
    padding: 0;
    line-height: normal;
}

.single-dc-landing .wpcf7-form-control-wrap textarea {
    max-height: 150px;
}

.single-dc-landing .wpcf7 .wpcf7-recaptcha iframe {
    max-width: 287px;
}

.single-dc-landing #content .wpcf7-submit {
    display: block;
    width: auto;
    margin: 45px auto 30px;
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    background-color: #13a89e;
    border: #fff 1px solid;
    padding: 8px 45px;
}

.single-dc-landing #content .wpcf7-submit:hover {
    background-color: #000;
    cursor: pointer;
}
/***** end Contact form **************/


/***** media queries *********/
@media screen and (max-width: 1180px) {
    .single-dc-landing .wpcf7:before {
        left: 36vw;
    }

    .single-dc-landing .product-img {
        left: 45vw;
    }
}

@media screen and (max-width: 1100px) {
    .single-dc-landing .wpcf7:before {
        left: 400px;
    }
}

@media screen and (max-width: 1000px) {
    .single-dc-landing .product-img {
        position: relative;
        left: calc(45% - 270px);
        top: 0;
        max-width: 270px;
        margin-bottom: 35px;
    }
    
    .single-dc-landing #content p {
        max-width: none;
    }

    .single-dc-landing #content ol {
    }

    .single-dc-landing .wpcf7:before {
        display: none;
    }

    .single-dc-landing #content ol:before {
        position: absolute;
        content: url(../png/arrow-request-up.png);
        left: auto;
        right: 120px;
        top: -40px;
    }
}

@media screen and (max-width: 910px) {
    .single-dc-landing .product-img {
        left: calc(43% - 250px);
        max-width: 250px;
    }
}

@media screen and (max-width: 850px) {
    .single-dc-landing #content p {
        line-height: 1.7;
    }

    .single-dc-landing #content h2 {
        clear: both;
    }
}

@media screen and (max-width: 805px) {
    .single-dc-landing #dgo-sect-1 {
        height: 358px;
    }
}

@media screen and (max-width: 785px) {
    .single-dc-landing .product-img {
        left: calc(40% - 208px);
        max-width: 208px;
    }
}

@media screen and (max-width: 700px) {
    .single-dc-landing #content ol:before {
        right: auto;
        left: 410px;
    }
}

@media screen and (max-width: 680px) {
    .single-dc-landing .dgo-logo,
    .single-dc-landing .dgo-logo.nav-min {
        width: 235px;
        top: -21px;
    }
}

@media screen and (max-width: 620px) {
    :target {
      top: -77px; 
    }

    .single-dc-landing #content h1 {
        margin-bottom: 30px;
    }

    .single-dc-landing .product-img {
        position: relative;
        display: block;
        left: auto;
        top: auto;
        margin: 0 auto 35px;
        width: 270px;
        max-width: 90%;
    }

    .single-dc-landing #dgo-form-1 {
        display: none;
    }

    .single-dc-landing #dgo-form-2 {
        display: block;
        float: none;
        margin: 20px auto 0;
    }

    .single-dc-landing #content ol {
        margin-top: 65px;
    }

    .single-dc-landing #content ol:before {
        position: relative;
        display: block;
        left: auto;
        top: auto;
        width: 160px;
        margin: -80px auto 20px;
    }

    .single-dc-landing #content ol {
        max-width: 338px;
        margin: 85px -5% 45px;
        padding: 20px calc((110% - 338px) / 2);
    }
}

@media screen and (max-width: 500px) {
    .single-dc-landing .dgo-phone {
        z-index: 999;
    }

    .single-dc-landing .dgo-logo,
    .single-dc-landing .dgo-logo.nav-min {
        width: 205px;
        top: -19px;
    }

    .single-dc-landing #dgo-sect-1 {
        height: 239px;
    }

    .single-dc-landing .dgo-quote {
        max-width: 314px;
        background-size: 33px;
        background-position: center 28px;
        padding-top: 65px;
    }

    .single-dc-landing .dgo-quote {
        max-width: 300px;
    }

    .single-dc-landing .dgo-quote p {
        font-size: 18px;
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .single-dc-landing .dgo-quote-author,
    .single-dc-landing .dgo-quote-author-meta {
        font-size: 13px;
        font-size: 1.3rem;
        padding-right: 0;
    }
}

@media screen and (max-width: 400px) {
    .single-dc-landing #content ol {
        max-width: 274px;
        padding: 20px calc((110% - 274px) / 2);
    }
    
    .single-dc-landing #content ol li {
        font-size: 18px;
        font-size: 1.8rem;
        background-size: 23px;
        padding-left: 31px;
        min-width: 150px;
    }

    .single-dc-landing #content ol li:nth-child(5) {
        font-size: 20px;
    }
}
/***** end media queries *****/