/* 
            _____ _____ _____ _____ _   _ __  __ ______ _   _ _______   __ 
     /\    / ____/ ____|_   _/ ____| \ | |  \/  |  ____| \ | |__   __| /_ |
    /  \  | (___| (___   | || |  __|  \| | \  / | |__  |  \| |  | |     | |
   / /\ \  \___ \\___ \  | || | |_ | . ` | |\/| |  __| | . ` |  | |     | |
  / ____ \ ____) |___) |_| || |__| | |\  | |  | | |____| |\  |  | |     | |
 /_/    \_\_____/_____/|_____\_____|_| \_|_|  |_|______|_| \_|  |_|     |_|

                          ______ ______ ______ 
                         |______|______|______|   

   ___ _                _               ___ _                                
  / __\ |__   __ _ _ __| | ___  ___    / __\ |__   __ _ _ __   ___  ___ ___  
 / /  | '_ \ / _` | '__| |/ _ \/ __|  / /  | '_ \ / _` | '_ \ / _ \/ __/ _ \ 
/ /___| | | | (_| | |  | |  __/\__ \ / /___| | | | (_| | | | |  __/ (_| (_) |
\____/|_| |_|\__,_|_|  |_|\___||___/ \____/|_| |_|\__,_|_| |_|\___|\___\___/ 
                                                                             

                            DMD Section 2
                            January 28, 2019
                            Alicia Ramirez

*/

/*
   ____                                 _ 
  / ___|  ___  _ __    ___  _ __  __ _ | |
 | |  _  / _ \| '_ \  / _ \| '__|/ _` || |
 | |_| ||  __/| | | ||  __/| |  | (_| || |
  \____| \___||_| |_| \___||_|   \__,_||_|
*/

html {
    overflow-x: hidden;
}

body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    margin-top: 98px;
}

a {
    text-decoration: none;
}

a:hover {
    font-weight: bold;
    color: darkviolet;
}

p {
    line-height: 2em;
}

main {
    margin: 80px 0 130px 0;
}

.separator {
    margin: -260px 0 60px 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-bottom: 20px solid white;
    animation: refresh-separator 2s ease-in-out;
}

.separator-bottom {
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: refresh-separator-btm 2s ease-in-out;
}

/*
  _   _                   _ 
 | | | |  ___   __ _   __| |
 | |_| | / _ \ / _` | / _` |
 |  _  ||  __/| (_| || (_| |
 |_| |_| \___| \__,_| \__,_|
*/

.head-banner {
    background-color: white;
    z-index: 99;
    animation: refresh 2s ease-in-out;
}

header .row {
    padding: 25px 0 35px 0;
    border-bottom: 1px solid gray;
}

.logo {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 6px;
    color: darkviolet;
    margin: 0;
    animation: refresh-header 1.5s ease-in-out;
    transition-property: letter-spacing;
    transition-timing-function: ease-in-out;
    transition-duration: .35s;
}

.logo:hover {
    letter-spacing: 9px;
    transition: .35s ease-in-out;

}

.violet {
    color: darkviolet;
}

.red {
    color: red;
}

/*
  ____                                   
 | __ )   __ _  _ __   _ __    ___  _ __ 
 |  _ \  / _` || '_ \ | '_ \  / _ \| '__|
 | |_) || (_| || | | || | | ||  __/| |   
 |____/  \__,_||_| |_||_| |_| \___||_|   
*/


.banner {
    position: relative;
}

.banner:before {
    content: "";
    background: url("images/misc/zig-zag.png") repeat, rgba(86, 0, 110, .4);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
    animation: fade-in 2s ease-in-out;
}

.ad {
    background-size: cover;
    width: 100%;
    height: 100%
    max-width: 100%;
    z-index: -9900;
    animation: ad-move 2s ease-in-out;
    
}

.kore {
    font-family: 'Eczar', sans-serif;
    font-size: 50px;
    color: white;
    text-shadow: 2px 3px darkviolet;
    position: absolute;
    padding: 15px 30px;
    top: 30%;
    left: 7.3%;
    letter-spacing: 8px;
    animation: fade-in 2s ease-in-out;
}

.kore-desc {
    font-family: 'Eczar', sans-serif;
    font-size: 23px;
    color: white;
    text-shadow: 2px 3px darkviolet;
    position: absolute;
    padding: 15px 30px;
    top: 44%;
    left: 7.4%;
    letter-spacing: 5px;
    animation: fade-in 2s ease-in-out;
}

.banner-men {
    position: absolute;
    padding: 15px 30px;
    top: 58%;
    left: 9%;
    background-color: white;
    box-shadow: 1px 1px 1px 1px darkviolet;
    animation: fade 2s ease-in-out;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: .4s;
}

.banner-women {
    position: absolute;
    padding: 15px 30px;
    top: 58%;
    left: 19%;
    background-color: white;
    box-shadow: 1px 1px 1px 1px darkviolet;
    animation: fade 2s ease-in-out;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: .4s;
}


.banner-men:hover,
.banner-women:hover {
    background-color: darkviolet;
    color: white;
    box-shadow: 1px 1px 1px 1px black;
    transform: scale(1.15);
}

/* 
  _   _                _                  
 | \ | |  __ _ __   __| |__    __ _  _ __ 
 |  \| | / _` |\ \ / /| '_ \  / _` || '__|
 | |\  || (_| | \ V / | |_) || (_| || |   
 |_| \_| \__,_|  \_/  |_.__/  \__,_||_|   
*/

.navbar {
    animation: refresh 1s ease-in-out;
}

.navbar a {
    padding: 15px 25px;
    margin: 0 12px;
    color: black;
    text-decoration: none;
    /*    border: 1px solid lightgray;*/
    text-transform: uppercase;
    animation: refresh-header 2s ease-in-out;
}

.navbar a:hover {
    color: black;
    font-weight: bolder;
    padding: 23px 25px;
    border-top: 2px solid darkviolet;
    border-bottom: 2px solid red;
    transition: .35s ease-in-out;
}

.navbar a:nth-child(1) {
    font-weight: bolder;
    padding: 15px 25px;
    border-left: 1px solid whitesmoke;
    border-right: 1px solid whitesmoke;
    border-top: 2px solid darkviolet;
    border-bottom: 2px solid red;
    background-color: #fbfbfb;
    color: black;
    text-decoration: none;
    /*    border: 1px solid lightgray;*/
    text-transform: uppercase;
}

.navbar a:nth-child(1):hover {
    padding: 23px 25px;
}

form {
    display: inline;
}

.search-bar {
    align-content: center;
    margin-left: 30px;
}

.search {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1em;
}

.search-button {
    background-image: url("images/icons/search.svg");
    background-color: white;
    margin-left: 15px;
    width: 18px;
    height: 18px;
    border: none;
    cursor: pointer;
}

.zindex-sticky {
    position: fixed;
    top: 0;
    width: 100%;
}


.zindex-sticky + .content {
    padding-top: 80px;
}

/*
  ____                   _               _        
 |  _ \  _ __  ___    __| | _   _   ___ | |_  ___ 
 | |_) || '__|/ _ \  / _` || | | | / __|| __|/ __|
 |  __/ | |  | (_) || (_| || |_| || (__ | |_ \__ \
 |_|    |_|   \___/  \__,_| \__,_| \___| \__||___/
*/

.bestsellers {
    margin-bottom: 30px;
}

.bestsellers-align {
    text-align: center;
}

.featured,
.bestsellers,
.colors {
    max-width: 100%;
}

.featured-head {
    font-family: 'Quicksand', sans-serif;
    font-weight: normal;
    font-size: 40px;
    margin: 0 0 60px 0;
    letter-spacing: 4px;
    background-color: white;
    text-align: center;
}

.f-fix {
    letter-spacing: 4px;
}

.buttons a {
    background-color: white;
    color: black;
}

.buttons a:hover {
    background-color: #fbfbfb;
}

.buttons a:active {
    background-color: darkviolet;
    border: 3px solid red;
    color: whitesmoke;
    font-weight: bolder;
}

.buy,
.explore {
    margin-right: 15px;
}

.buy,
.list,
.explore {
    padding: 13px 30px;
    border: 1px solid lightgray;
}

.buy:hover,
.list:hover,
.explore:hover {
    padding: 16px 30px;
    border-top: 3px solid darkviolet;
    border-bottom: 3px solid red;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    transition: .35s ease-out;
}

.item-name {
    padding: 20px 0 15px 0;
    border-top: 1px solid darkviolet;
    border-bottom: 1px solid red;
    font-family: 'Eczar', sans-serif;
    font-weight: normal;
    font-size: 28px;
    letter-spacing: 3px;
    margin: 0 0 20px 0;
    transition-property: letter-spacing;
    transition-timing-function: ease-in-out;
    transition-duration: .75s;
}

.right .row .col-md .item-name:hover {
    color: #e50000;
    opacity: .8;
    cursor: pointer;
    letter-spacing: 5px;
    transition: .75s ease-in-out;
}

.left .row .col-md .item-name:hover {
    color: darkviolet;
    opacity: .8;
    cursor: pointer;
    letter-spacing: 5px;
    transition: .75s ease-in-out;
}

.bestseller-names {
    padding: 12px 0;
    border-top: 1px solid darkviolet;
    border-bottom: 1px solid red;
    font-family: 'Eczar', sans-serif;
    font-weight: normal;
    font-size: 28px;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    transition-property: letter-spacing;
    transition-timing-function: ease-in-out;
    transition-duration: .75s;
}

.bestseller-names:hover {
    letter-spacing: 4px;
    opacity: .75;
    cursor: pointer;
}

.item-desc {
    text-align: justify;
}

.item-desc p {
    font-family: 'Quicksand', sans-serif;
}

.image {
    padding: 0;
    margin: 0;
}

.left,
.right {
    margin-top: 70px;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.buttons {
    margin: 30px 0 0 0;
}

.colors {
    padding: 20px 0;
}

/*
  _____              _   
 |  ___|___    ___  | |_ 
 | |_  / _ \  / _ \ | __|
 |  _|| (_) || (_) || |_ 
 |_|   \___/  \___/  \__|
                         */

footer {
    margin-top: -58px;
}

.foot-links {
    list-style: none;
    padding: 0;
    margin: 50px 0;
}

.foot-links li h4 {
    font-size: 1em;
}

.foot-links li {
    font-size: .9em;
    margin: 10px 0;
    letter-spacing: .7px;
}

.foot-message {
    font-size: .85em;
}

.foot-message p {
    margin-bottom: -10px;
    text-align: justify;
}

.icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    margin: 10px;
}

.icon-facebook2 {
    color: rebeccapurple;
}

.icon-instagram {
    color: orangered;
}

.icon-twitter {
    color: dodgerblue;
}

.icon-youtube {
    color: red;
}

.social-media {
    padding-bottom: 20px;
    border-bottom: 1px solid lightgray;
    margin-top: 50px;
}

.social-media svg:hover {
    opacity: .65;
    cursor: pointer;
}


/*
     _            _                    _    _                    
    / \    _ __  (_) _ __ ___    __ _ | |_ (_)  ___   _ __   ___ 
   / _ \  | '_ \ | || '_ ` _ \  / _` || __|| | / _ \ | '_ \ / __|
  / ___ \ | | | || || | | | | || (_| || |_ | || (_) || | | |\__ \
 /_/   \_\|_| |_||_||_| |_| |_| \__,_| \__||_| \___/ |_| |_||___/
*/

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
        transform: scaleY(.7);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes ad-move {
    0% {
        opacity: 0;
        transform: scaleY(1.2);
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes refresh {
    from {
        transform: translateY(-45%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes refresh-header {
    from {
        transform: translateY(-45%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes refresh-separator {
    from {
        transform: translateY(25%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes refresh-separator-btm {
    from {
        transform: translateY(-15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes kerning {
    from {
        letter-spacing: 3px;
    }

    to {
        letter-spacing: 5px;
    }
}

/*
  __  __  _            
 |  \/  |(_) ___   ___ 
 | |\/| || |/ __| / __|
 | |  | || |\__ \| (__ 
 |_|  |_||_||___/ \___|
*/

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .kore-desc {
        font-size: 30px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .kore-desc {
        font-size: 25px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .kore-desc {
        font-size: 23px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .kore-desc {
        font-size: 20px;
    }
}