/*
Site Name: Mr. Diggles
Site URL: http://www.movu.me
Description: A site designed for Marky Mark and the Funky Bunch...
Version: 2.0
Author: Mr. Diggles
Author URI: http://www.mrdiggles.com/
*/


/******      GLOBAL COMMAND CENTRAL     ******/

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
}


body {
    font-family: 'FertigoProRegular', Helvetica Neue, Arial, sans-serif;
    font-size: small;
    cursor: default;
    color: #fff;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-color: #585858;
}

.backstretch {
    display: none;
}

@supports not (-webkit-touch-callout: none) {
    #bg {
        display: none;
    }

        #bg img {
            display: none;
        }

    div.bg {
        display: none;
    }
}

/* ----------- iOS Device Specific (Since iOS has to make everything difficult...) ----------- */
@supports (-webkit-touch-callout: none) {
    body {
        background: none;
    }

    #bg {
        position: fixed;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
    }

        #bg img {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            min-width: 50%;
            min-height: 50%;
        }

    div.bg {
        display: block;
    }

    #head {
        position: relative;
    }

    .wrap {
        position: relative;
    }

    #footer {
        position: relative;
    }

    #legal {
        position: relative;
    }
}

@font-face {
    font-family: 'FertigoProRegular';
    src: url('fertigo_pro-webfont.eot');
    src: url('fertigo_pro-webfont.eot?iefix') format('eot'), url('fertigo_pro-webfont.woff') format('woff'), url('fertigo_pro-webfont.ttf') format('truetype'), url('fertigo_pro-webfont.svg#webfontTiWjh9hx') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2.introduction {
    padding: 0px 0px 50px 0px;
    width: 700px;
    text-align: center;
    margin: 0px auto;
    text-shadow: 1px 1px 1px #333;
    font-size: 20px;
    font-weight: 100 !important;
    line-height: 1.7em;
}


a {
    text-decoration: none;
}

div.clear {
    clear: both;
}


img {
    display: block;
    border: none;
}

.wrap {
    margin: 0px auto;
    width: 960px;
}

#head {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    background: url(/img/light2.png) top left repeat;
}

.collapsible {
    background: none;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-bottom: 1px solid #444;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
}

    .active, .collapsible:hover {
        background-color: #63a5ba;
    }

    .collapsible:after {
        content: '\002B';
        color: #000;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.individual_reviews {
    height: 750px;
    overflow-y: auto;
}

.individual_reviews p {
    border-top: 1px dashed #aaa;
    padding-top: 10px;
}

    .individual_reviews p span {
        color: #000;
        font-weight: bold;
    }


div.logo {
    float: left;
    margin-left: 10px;
}

    div.logo img {
        width: 238px;
    }

div.book {
    float: right;
    padding-right: 20px;
    padding-top: 10px;
    margin-bottom: -5px;
}

div.review {
    float: right;
    padding-right: 0px;
    padding-top: 25px;
    margin-bottom: -5px;
}

.dermascope {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

ul.nav {
    float: right;
    list-style: none;
    margin-top: 0px;
    margin-right: 0px;
}

    ul.nav li {
        color: #dfdfdf;
        float: left;
        text-transform: uppercase;
    }

        ul.nav li a {
            text-decoration: none;
            font-size: 130%;
            padding: 35px 0px 0px 30px;
            color: #000;
            display: block;
        }

            ul.nav li a span {
                color: #63a5ba;
                font-weight: bold;
            }

div.break {
    height: 30px;
}


.service {
    float: left;
    width: 218px;
    margin-right: 29px;
    min-height: 250px;
    margin-bottom: 24px;
    position: relative;
}

.product {
    float: left;
    width: 445px;
    margin-right: 29px;
    min-height: 250px;
    margin-bottom: 24px;
    position: relative;
}

    .product img.main {
        background: url(/img/light.png) top left repeat;
        padding: 9px;
    }

    .product img.shadow {
        margin-bottom: 7px;
    }

    .product h2 {
        padding: 10px 12px 10px 12px;
        color: #fff;
        font-size: 140%;
        text-shadow: none;
        font-weight: 400;
        border-bottom: 1px solid #444;
    }

.new {
    position: absolute;
    top: 0px;
    right: 0px;
}

.clickme {
    position: absolute;
    top: 0px;
    left: 0px;
}

.clickhere {
    position: absolute;
    top: 145px;
    left: 0px;
}

iframe {
    border: 2px white solid
}

.service img.main {
    background: url(/img/light2.png) top left repeat;
    padding: 9px;
}

.service img.shadow {
    margin-bottom: 7px;
}

.aservice {
    float: left;
    width: 218px;
    margin-right: 29px;
    margin-left: 55px;
    min-height: 250px;
    margin-bottom: 24px;
    position: relative;
}

    .aservice h2 {
        padding: 10px 12px 10px 12px;
        color: #fff;
        font-size: 140%;
        text-shadow: none;
        font-weight: 400;
        border-bottom: 1px solid #444;
    }

    .aservice img.main {
        background: url(/img/light2.png) top left repeat;
        padding: 9px;
    }

    .aservice img.shadow {
        margin-bottom: 7px;
    }

.picture {
    float: left;
    width: 218px;
    margin-right: 29px;
}

    .picture img.main {
        background: url(/img/light.png) top left repeat;
        padding: 9px;
    }

    .picture img.shadow {
        margin-bottom: 7px;
    }



.desc {
    background: url(/img/light2.png) top left repeat;
}

    .desc h2 {
        padding: 10px 12px 10px 12px;
        color: #fee2c3;
        font-size: 140%;
        text-shadow: none;
        font-weight: 400;
        letter =spacing: -1px;
        border-bottom: 1px solid #444;
    }

    .desc p {
        line-height: 1.8em;
        color: #000;
        font-size: 105%;
        padding: 10px 12px 15px 12px;
        text-shadow: none;
    }

        .desc p span {
            color: #000;
            font-weight: bold;
            /*text-shadow: 1px 1px 1px #000;*/
        }

.adesc {
    background: url(/img/dark.png) top left repeat;
    width: 390px;
}

    .adesc h2 {
        padding: 10px 12px 10px 12px;
        color: #fee2c3;
        font-size: 140%;
        text-shadow: none;
        font-weight: 400;
        letter =spacing: -1px;
        border-bottom: 1px solid #444;
    }

    .adesc p {
        line-height: 1.8em;
        font-size: 105%;
        padding: 10px 12px 15px 12px;
        text-shadow: none;
    }

        .adesc p span {
            color: #D9DD51;
        }

.service h2 {
    padding: 10px 12px 10px 12px;
    color: #000;
    font-size: 140%;
    text-shadow: none;
    font-weight: 400;
    border-bottom: 1px solid #444;
    height: 40px;
}

.service h6 {
    padding: 10px 12px 1px 12px;
    color: #000;
    font-size: 135%;
    text-shadow: none;
    font-weight: 400;
}

.service h5 {
    padding: 10px 12px 10px 12px;
    color: #000;
    font-size: 80%;
    text-shadow: none;
    font-weight: 400;
    border-bottom: 1px solid #444;
    height: 9px;
}

h1.tite {
    text-align: center;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px dashed #dfdfdf;
    text-shadow: 1px 1px 1px #000;
    margin-bottom: 15px;
}

.last {
    margin-right: 0px;
}


#footer {
    border-top: 5px solid #1d1d1d;
    padding-top: 30px;
    margin-top: 10px;
    padding-bottom: 25px;
    background: url(/img/light2.png) top left repeat;
}

    #footer h3 {
        font-size: 180%;
        margin-bottom: 20px;
        margin-top: 10px;
        color: #8af5ec;
        font-weight: 100;
        text-shadow: none;
    }

.map {
    float: left;
    background: url(/img/dark.png) top left repeat;
    padding: 10px;
    margin-right: 28px;
    width: 444px;
}

#legal {
    background: url(/img/light2.png) top left repeat;
    padding: 20px 10px;
}

    #legal p.left {
        float: left;
        padding-left: 10px;
    }

        #legal p.left span {
            padding: 0px 7px;
            color: #000;
        }

    #legal p.right {
        float: right;
        padding-left: 10px;
    }

        #legal p.right a {
            text-transform: uppercase;
            padding-left: 15px;
            color: #000;
        }

            #legal p.right a span {
                color: #63a5ba;
                font-weight: bold;
            }


.tops {
    line-height: 900px !important;
}

.reviews {
    width: 950px;
    float: left;
    background: url(/img/light2.png) top left repeat;
    padding: 10px;
}

    .reviews h1 {
        font-size: 300%;
        font-weight: 100;
        color: #000;
        text-align: center
    }

    .reviews h2 {
        font-size: 160%;
        font-weight: 100;
        margin-bottom: 24px;
        color: #000;
        font-weight: bold;
        text-align: center
    }

    .reviews p {
        padding-bottom: 10px;
        color: #000;
        line-height: 1.8em;
        font-size: 110%;
        text-align: center
    }

.bio {
    width: 446px;
    float: left;
    background: url(/img/light2.png) top left repeat;
    padding: 10px;
}

    .bio h1 {
        font-size: 300%;
        font-weight: 100;
        color: #000;
        /*text-shadow: 1px 1px 1px #000;*/
    }

    .bio h2 {
        font-size: 160%;
        font-weight: 100;
        margin-bottom: 24px;
        color: #000;
        font-weight: bold;
        /*text-shadow: 1px 1px 1px #000;*/
    }

    .bio p {
        padding-bottom: 10px;
        color: #000;
        line-height: 1.8em;
        font-size: 110%;
    }

.mark {
    float: right;
    background: url(/img/light2.png) top left repeat;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

    .mark img {
        width: 436px;
    }


.contact {
    float: left;
    width: 200px;
    margin-left: 34px;
}

p.cnt {
    color: #000;
    font-weight: bold;
}

    p.cnt a {
        color: #63a5ba;
        font-weight: bold;
    }

        p.cnt a:hover {
            text-decoration: underline;
        }

.prod {
    width: 460px;
    float: left;
    padding-right: 40px;
}

.lasty {
    padding-right: 0px;
}

.prod h3 {
    font-weight: 100;
    font-size: 160%;
    padding: 13px 10px 3px 10px;
}

.prod h4 {
    font-weight: 100;
    font-size: 100%;
    color: #D9DD51;
    padding: 0px 10px 5px 10px;
}





.contact h1 {
    font-size: 150%;
    font-weight: 100;
    color: #000;
    /*text-shadow: 1px 1px 1px #000;*/
}

.contact a {
    color: #63a5ba;
    font-weight: bold;
}


    .contact a:hover {
        text-decoration: underline;
    }


.contact ul {
    margin-bottom: 20px;
}

    .contact ul li {
        line-height: 1.8em;
        font-size: 105%;
        color: #000;
        /*text-shadow: 1px 1px 1px #000;*/
    }

        .contact ul li.number {
            font-size: 130%;
            color: #000;
            /*text-shadow: 1px 1px 1px #000;*/
        }

            .contact ul li.number a {
                font-size: 130%;
                text-decoration: none;
                color: #000;
                /*text-shadow: 1px 1px 1px #000;*/
            }

.space {
    float: left;
}

    .space img {
        background: url(/img/dark.png) top left repeat;
        padding: 10px;
    }


/* Mobile/Tablet Landscape Mode */
@media only screen and (orientation:landscape) and (min-width: 320px) and (max-width: 812px) {

    html {
        width: 158%;
    }

    /*TESTING*/
/*    body {
        background: none;
    }

    .backstretch {
        display: initial;
    }*/
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    html {
        width: 126%;
    }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 139%;
    }
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 140%;
    }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 126%;
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 126%;
    }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 112%;
    }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    html {
        width: 107%;
    }
}

/*<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">*/

.w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.w3-button {
    white-space: normal
}

    .w3-button:hover {
        color: #000 !important;
        background-color: #ccc !important
    }

.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4)
}

.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.w3-animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important
}

.w3-xlarge {
    font-size: 24px !important
}

.w3-xxlarge {
    font-size: 36px !important
}

.w3-xxxlarge {
    font-size: 48px !important
}

.w3-jumbo {
    font-size: 64px !important
}

.w3-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

@media (max-width:768px) {
    .w3-modal-content {
        width: 500px
    }

    .w3-modal {
        padding-top: 50px
    }
}

@media (min-width:993px) {
    .w3-modal-content {
        width: 900px
    }

    .w3-hide-large {
        display: none !important
    }

    .w3-sidebar.w3-collapse {
        display: block !important
    }
}

@media (max-width:600px) {
    .w3-modal-content {
        margin: 0 10px;
        width: auto !important
    }

    .w3-modal {
        padding-top: 30px
    }
}


/* Smart Phone */
@media (min-width: 1px) and (max-width: 638px) {

    .wrap {
        margin: 0px auto;
        padding-left: 0px;
        width: 100%;
    }

    img.ban {
        width: 90%;
    }

    #head {
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;
        background: url(/img/light2.png) top left repeat;
    }


    div.logo {
        float: none !important;
        margin-left: 0px !important;
        text-align: center;
        margin-bottom: 20px;
    }

        div.logo img {
            width: 160px;
            margin: 0px auto;
        }


    div.book {
        float: none !important;
        padding-right: 0px;
        padding-top: 0px;
        margin: 0px auto;
        width: 148px;
    }

    div.review {
        float: none !important;
        padding-top: 0px;
        margin: 0px auto;
        width: 192px;
    }

    ul.nav {
        float: none !important;
        width: 100%;
        list-style: none;
        margin-top: 0px;
        margin-right: 0px;
    }

        ul.nav li {
            color: #dfdfdf;
            float: none !important;
            text-align: center !important;
            text-transform: uppercase;
        }

            ul.nav li a {
                text-decoration: none;
                font-size: 120%;
                padding: 6px 0px;
                text-align: center !important;
                color: #000;
                display: block;
            }

                ul.nav li a span {
                    color: #63a5ba;
                    font-weight: bold;
                }

    h2.introduction {
        padding: 0px 0px 40px 0px;
        width: 90% !important;
        text-align: center;
        margin: -10px auto;
        text-shadow: 1px 1px 1px #333;
        font-weight: 100 !important;
        line-height: 1.7em;
    }


    .service {
        float: none !important;
        width: 218px;
        margin: 0px auto 34px auto;
        min-height: 250px;
        position: relative;
    }

    .map {
        float: left;
        background: url(/img/dark.png) top left repeat;
        padding: 10px 0px;
        margin-right: 0px !important;
        width: 100% !important;
        margin-left: 0px;
        margin-bottom: 20px;
    }

    img.footimg {
        display: none;
    }

    .contact {
        float: none !important;
        width: 100%;
        margin-left: 0px;
    }

        .contact h1 {
            font-size: 150%;
            font-weight: 100;
            color: #000;
            text-align: center;
            /*text-shadow: 1px 1px 1px #000;*/
        }

        .contact a {
            color: #63a5ba;
            font-weight: bold;
        }


            .contact a:hover {
                text-decoration: underline;
            }


        .contact ul {
            margin-bottom: 20px;
        }

            .contact ul li {
                line-height: 1.8em;
                color: #000;
                font-size: 105%;
                text-align: center;
                /*text-shadow: 1px 1px 1px #000;*/
            }

                .contact ul li.number {
                    font-size: 130%;
                    color: #000;
                    /*text-shadow: 1px 1px 1px #000;*/
                }

                    .contact ul li.number a {
                        font-size: 130%;
                        text-decoration: none;
                        color: #000;
                        /*text-shadow: 1px 1px 1px #000;*/
                    }

    div.boxbottom {
        margin: 0px auto;
        width: 148px;
    }

    #footer {
        border-top: 0px solid #1d1d1d;
        padding-top: 0px;
        margin-top: 0px !important;
        padding-bottom: 25px;
        background: url(/img/light2.png) top left repeat;
    }

    #legal {
        background: url(/img/light2.png) top left repeat;
        padding: 20px 10px;
    }

        #legal p.left {
            float: none !important;
            padding-left: 0px;
            padding-bottom: 20px;
            text-align: center;
        }

            #legal p.left span {
                padding: 0px 7px;
                color: #000;
            }

        #legal p.right {
            float: none !important;
            padding-left: 10px;
            text-align: center;
        }

            #legal p.right a {
                text-transform: uppercase;
                padding: 0px 7px;
                line-height: 1.9em;
                color: #000;
            }

                #legal p.right a span {
                    color: #63a5ba;
                    font-weight: bold;
                }

    .individual_reviews {
        height: 450px;
        overflow-y: auto;
    }

    .reviews {
        width: 100%;
        float: none !important;
        background: url(/img/light2.png) top left repeat;
        padding: 0px;
    }

        .reviews h1 {
            font-size: 300%;
            text-align: center;
            font-weight: 100;
            color: #000;
            padding-top: 20px;
            /*text-shadow: 1px 1px 1px #000;*/
        }

        .reviews h2 {
            font-size: 160%;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0px;
            color: #000;
            /*text-shadow: 1px 1px 1px #000;*/
        }

        .reviews p {
            line-height: 1.8em;
            color: #000;
            font-size: 110%;
            padding: 20px;
        }

    .bio {
        width: 100%;
        float: none !important;
        background: url(/img/light2.png) top left repeat;
        padding: 0px;
    }

        .bio h1 {
            font-size: 300%;
            text-align: center;
            font-weight: 100;
            color: #000;
            padding-top: 20px;
            /*text-shadow: 1px 1px 1px #000;*/
        }

        .bio h2 {
            font-size: 160%;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0px;
            color: #000;
            /*text-shadow: 1px 1px 1px #000;*/
        }

        .bio p {
            line-height: 1.8em;
            color: #000;
            font-size: 110%;
            padding: 20px;
        }

    p.cnt {
        text-align: center;
        color: #000;
        font-weight: bold;
    }


    .mark {
        float: left;
        background: url(/img/light2.png) top left repeat;
        padding: 10px 0px;
        margin-right: 0px;
        width: 100%;
        margin-bottom: 20px;
    }

        .mark img {
            width: 100%;
        }
}