/*  CSS for screens */
@import url('https://fonts.googleapis.com/css?family=Pacifico');

body {
   font-size: 16px;
   font-family: serif;
}

#page { max-width: 1200px; margin: 0 auto; position: relative;}

/*  Text */
h1 {
   font-family: 'Pacifico', cursive;
   font-size: 2.8em;
   margin: 0 0 1em 0;
   font-weight: 700;

}

h2 {
   font-family: 'Pacifico', cursive;
   font-size: 1.6em;
   margin: 0 0 .5em 0;
   font-weight: 700;
   line-height: 1.1em;
}

h3 {
   font-family: 'Pacifico', cursive;
   font-size: 1.3em;
   margin: 0 0 .5em 0;
   font-weight: 700;

}

h4 {
   font-family: 'Pacifico', cursive;
   font-size: 1em;
   margin: 0 0 1.5em 0;
   font-weight: 700;

}

p { margin: 0 0 1em 0; }

a { color: #007eff;}
a:visited { color: #65b1ff;}

a.btn {
    color: #fff;
    font-size: 1.2em;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 4px 15px;
    transition: background-color .5s;
}

a.btn:hover { background-color: rgba(0,0,0,.3);}

/* Header */

header {
    height: 430px;
    background: #6C3C9D url(../images/banner_1200.jpg) no-repeat center bottom;
    position: relative;
}

header a.logo {
    z-index: 1;
    position: absolute;
    /* display: block; width: 160px; height: 66px; */
    display: block; width: 100px; height: 100px;
    background: url(../images/logo.svg) no-repeat 0 0; background-size: contain;
    top: 10px; left: 20px;
}

header a.logo span { display: none; }

header h1.companyName {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #9C9D36;
    /* line-height: .9em; */
    font-size: 2.3em;
}

header div.hero {
    position: absolute;
    width: 30%; top: 130px; left: 55%;
    background-color: rgba(48,15,80,.75);
    padding: 50px;
}

header div.hero h1 { font-size: 1.9em; line-height: 1.2em; margin: 0 0 30px 0; color: #9C9D36;}

/* Section All */
section {padding: 0 30px;}

section::after {content: ''; display: block; clear: both;}


/* Section Main  */

section.main { margin-top: 20px; magin-bottom: 30px; padding: 0; }

section.main aside { width: 33%; float: left; text-align: center;}

section.main .content { margin: 15px;
    background: no-repeat center top;
    background-size: 75px 75px;
    padding-top: 85px;
}
section.main aside h3 a { color: #000; text-decoration: none;}

section.main aside h3 a:hover { text-decoration: underline;}

section.main aside .content.trending { background-image: url(../images/icon_images_blk_tree.svg);}
section.main aside .content.dream-catchers { background-image: url(../images/icon_images_blk_dreamcatcher.svg);}
section.main aside .content.custom-orders { background-image: url(../images/icon_images_blk_flower.svg);}

/* Section  - Atmosphere */

section.atmosphere {
    background-color: #9C9D3C;
    padding-top: 30px; padding-bottom: 30px;
    color: #300F50;
}

section.atmosphere article {
    padding: 0 20px 0 515px;
    background: url(../images/face_Preview.jpeg) no-repeat 0 5px;
    min-height: 281px;

}

section.atmosphere a {
    color: #fff;
    text-decoration: none;
}

/* Section How-To */


section.how-to {
    background-color: #796BA9; position: relative;

}

section.how-to aside { width: 30%; float: left; margin-right: 10px;}

section.how-to aside .content { padding: 30px 30px 20px 0;}

section.how-to aside .content img {
    display: block;
    margin-bottom: 15px;
    width: 70%;
}

section.how-to aside .content h4 {
    margin-bottom: 0;
}

section.how-to aside .content p {
    margin-bottom: .5em;
}

section.how-to aside .content a {
    display: inline-block;
    color: #300F50;
    font-weight: 700;
}

section.how-to blockquote {
    margin: 0; width: 32%;
    color: #444;
    background-color: #fff;
    position: absolute; bottom: 0; right: 4%;
}

section.how-to blockquote p { margin: 30px 30px 20px 50px; }

section.how-to blockquote p.quote {font-style: italic; font-size: 1.2em;}

section.how-to blockquote p.credit {
    color: #777;
    font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em;
    position: relative;

}

section.how-to blockquote::before {
    content: '\201c'; color: #300F50;
    position: absolute;
    top: 10px; left: 8px;
    font-size: 5em; font-family: serif;
 }

section.how-to blockquote p.quote::after {
    content: '\201d'; font-family: serif;
}

section.how-to blockquote p.credit::before {
    content: '\2014';
    position: absolute;
    top: -1px;
    left: 0;
}

/* Navigation */
nav {
    background-color: rgba(48, 15, 80, .75);
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 50px 0 0 0;
    width: 100%;
}

nav::after { content: ''; display: block; clear: both;}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

nav ul li:hover { background-color: rgba(48, 15, 80, .75);}

nav ul li:hover > ul { display: block;}

nav ul li a {
    display: inline-block;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    width: 125px;
    position: relative;
}

nav ul li a:visited {color: #fff;}

nav ul li a:hover { background-color: rgba(48, 15, 80, .75);}

nav ul ul { position: absolute; top: 100%; background-color: rgba(48, 15, 80, .75); display: none;}

nav ul ul li { position: relative; }

nav ul ul ul { left: 100%; top: 0px; }


/* top-level */

nav > ul { padding-right: 150px; }

nav > ul > li { float: right; }

nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px;}

/* nav a[aria-haspopup="true"]::after {
    content: '';
    display: block; width: 0px; height: 0px;
    position: absolute;
    top: 16px; right: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #fff;
}

nav > ul > li > a[aria-haspopup="true"]::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    left: 20px; right: auto;
    bottom: 6px; top: auto;
} */

/* Footer */

footer {
    font-size: .8em;
    margin: 40px;
    color: #999;
}

footer .content { display: inline;}

footer a { margin-left: 30px; color: #777;}
footer a:visited { color: #777;}
footer a:hover { color: #000;}



/* Media Queries */

@media screen and (max-width: 1000px) {
    h1 { font-size: 2.4em;}

    /* Header */
    header div.hero { left: 56%; }
    header div.hero h1 { margin-bottom: : 20px;}

    /* Section - Atmosphere */
    section.atmosphere article { padding-left: 400px; background-size: 375px auto;}


}

@media screen and (max-width: 825px) {
    h1 { font-size: 2.2em;}

    /* header */
    header { height: 300px; background-image: url(../images/banner_825.jpg);}
    header div.hero { top: 120px; left: 48%;}

    /* Section Atmosphere */
    section.atmosphere article { padding-left: 325px; background-size: 300px auto; }

    /* Section - How To */
    section.how-to blockquote p.quote { font-size: 1.1em; line-height: 1.2em;}
    section.how-to blockquote p.credit { font-size: .85em;}
}

@media screen and (max-width: 760px) {
    h1 { font-size: 1.8em;}
    h2 { font-size: 1.4em;}
    h3 { font-size: 1.1em;}
    a.btn { font-size: 1em;}

    /* Header */
    header a.logo { width145px; height: 60px; }
    header div.hero { top: 140px; left: 48%; }

    /* Main */
    section.main { margin-top: 10px; margin-bottom: 10px;}
    section.main aside div.content { background-size: 55px 55px; padding-top: 60px;}

    /* Section How To */
    section.how-to aside div.content img { width: 85%; }

    /* Navigation */
    nav { padding-top: 80px; }
    nav > ul { padding-left: 10px; }
}

@media screen and (max-width: 625px) {

    h1 { font-size: 1em; }
    h3 { margin-bottom: 0px; }
    a.btn { font-size: .9em; }

    /* Header */
    header { height: 160px; background-image: url(../images/banner_625.jpg); background-position: left top; }
    header a.logo {
        width: 100%; height: 66px;
        left: 0px; top: 0px;
        background-color: rgba(0,0,0,.65);
        background-size: 112px 46px;
        background-position: 20px center;
    }
    header div.hero { width: 300px; top: 85px; left: 130px; }
    header div.hero h1 { margin-bottom: 10px; }

    /* Section Main */
    section.main aside { width: 100%; float: none; text-align: left;}
    section.main aside div.content {
        margin: 8px 20px 8px 0;
        padding: 5px 0px 10px 85px;
        background-size: 50px 50px;
        background-position: 20px 5px;
    }

    /* Section Atmosphere */
    section.atmosphere article { padding: 160px 20px 0px 0px; background-size: 300px auto; min-height: initial; }

    /* Section How To */
    section.how-to aside { width: 100%; float: none; margin: 0; position: relative; }

    section.how-to aside div.content { padding: 20px 20px 20px 150px; }

    section.how-to aside div.content p { font-size: .9em;}

    section.how-to aside div.content img {
        display: inline-block;
        width: 125px;
        position: absolute;
        top: 30px; left: 0px;
    }

    section.how-to blockquote {
        margin: 0 20px 0 40px;
        width: 90%;
        padding: 1px 0px 20px 0px;
        position: relative;
    }

    section.how-to blockquote p.credit { margin-bottom: 0; }

    /* Navigation */
    nav { position: static; width: auto; padding: 20px 15px; background-color: #796BA9; }

    nav ul,
    nav ul ul,
    nav ul ul ul { display: block; position: static;}

    nav > ul { padding: 0;}
    nav > ul >li { float: none; margin-top: 25px;}

    nav ul li:hover { background: none;}

    nav ul li a {
        width: auto;
        display: block;
        margin: 8px 10px;
        padding: 8px 15px;
        border: 1px solid rgba(255,255,255,.25);
     }


     nav ul li a:hover { background-color: rgba(255,255,255,.2);}

     nav ul ul { background: none;}

     nav ul ul li a { margin-left: 30px;}
     nav ul ul ul li a { margin-left: 60px;}

     nav a[aria-haspopup="true"]::after { display: none;}

     /* Footer */
     footer.div.content { display: block; margin-top: 15px;}

     footer.div.content a { margin: 0 20px 0 0;}

}

@media screen and (max-width: 425px){

    /* Header */
    header { height: 140px; background-image: url(../images/banner_425.jpg); }

    header a.logo {

         background:  url(../images/logo.svg) no-repeat center center;
        background-size: contain;
        margin-top: 20px;
    }

    h1.companyName {
        padding-top: 70px;
    }

    header div.hero { width: 100%; height: 60px; left: 0px; top: 0px; text-align: center; }

    header div.hero span { display: none; }

    header div.hero h1 { display: none; }

    header div.hero a.btn { display: none; }

    /* header div.hero a.btn span { display: none; } */
    section.main aside .content.trending {
        margin-top: 50px;
    }

    /* How-To */

    section.how-to aside div.content { padding: 140px 20px 20px 0px; }
    section.how-to aside div.content img { width: auto; height: 100px; top: 30px;}

    section.how-to blockquote { margin: 10px 40px 0 20px; }
    nav {
        background-color: #796BA9;
    }
    /* Footer */

    footer::after { content:''; display: block; clear: both; }

    footer div.content a {
        display: inline-block; margin: 10px 0 0 0;
        float: left;
        clear: both;
    }

}