/* ———————————— Complimentary Wine | Brandi Cameron / 2018 ———————————— */





/* ———————————— GENERAL SETTINGS ———————————— */

@font-face {
font-family: bebasneue;
src: url(assets/bebasneue.otf);
}



p {
font-family: lato, sans-serif;
text-align: center;
font-weight: bold;
font-size: .9em;
letter-spacing: .1em;
color: white;
}

p::selection { 
background: yellow;
}


h1 {
font-family: bebasneue, sans-serif;
color: white;
font-size: 8em;
letter-spacing: 0.01em;
}


h2 {
font-family: bebasneue, sans-serif;
font-size: 5em;
text-align: center;
letter-spacing: .02em;
}


h3 {
font-family: lato, sans-serif;
text-align: center;
font-weight: 700;
letter-spacing: .1em;
font-size: .8em;
color: #fff;
font-size: 1.05em; 
}

h4 {
font-family: bebasneue, sans-serif;
text-align: center;
letter-spacing: .02em;
font-size: 3em;
color: #292728; 
}


li {
font-family: lato;
text-align: center;
font-weight: bold;
font-size: .9em;
letter-spacing: .2em;
color: white;
}


figcaption {
text-align: center;
font-family: lato, sans-serif;
font-weight: bold;
font-size: .9em;
letter-spacing: .04em;
margin-top: -70px;
}


/* RESET STYLES */
* {
margin:0;
padding:0;
}


/* ———————————— RED BROWSER BORDER & SKIP NAV LINK ———————————— */


p.skipnavigation a {
position: absolute;
left: -10000px;
}


#bottom-nav-bar {
position: fixed;
top: 36px;
height: 4px;
width: 100%;
background: rgb(127, 0, 0);
}


#bar {
position: fixed;
top: 0px;
right: 90px;
height: 39px;
width: 4px;
background: rgb(127, 0, 0);
}


#top {
    position: fixed;
    top: 0px;
    height: 4px;
    background: #7f0000;
    width: 100%;
}


#bottom {
    position: fixed;
    bottom: 0px;
    height: 4px;
    background: #7f0000;
    width: 100%;
}

#left {
    position: fixed;
    left: 0px;
    width: 4px;
    background: #7f0000;
    height: 100%;
}


#right {
    position: fixed;
    right: 0px;
    width: 4px;
    background: #7f0000;
    height: 100%;
}



#top, #bottom, #left, #right, #bottom-nav-bar, #bar {
    z-index: 1000;
    animation: border-color-fade-in 2.5s;
    animation-delay: .7s;
}


@keyframes border-color-fade-in {
  0% {
    background: #7f0000;
  }
  50% {
    background: #e6b1b8;
  }

  100% {
    background: #7f0000;
  }
}




/* ———————————— LOGO ———————————— */

.logo {
padding: 0 35px;
z-index: 1000;
position: absolute;
position: fixed;
top: 0px;
z-index: 9999;
}

.logo-mobile {
padding-top: 5px;
z-index: 1000;
position: absolute;
position: fixed;
z-index: 999;
display: none;
}



/* ———————————— MOBILE NAVIGATION ———————————— */


.mobile-navigation {
position: fixed;
border: 4px solid #7f0000;
width: 100%;
right: 0;
display: none;
top: 55px;
z-index: 99;  
}

.mobile-navigation p a {
font-family: lato;
font-weight: 700;
font-size: 1.5em;
color: black;
}

nav.mobile-navigation p {
display: flex;
justify-content: center;
align-items: center;
margin-top: -1px;
}

.grey-mobile-nav {background-color: #292728; color: white; height: 80px; padding: 0; margin: 0;}

.black-mobile-nav {background-color: #201e1f; height: 80px; padding: 0; margin: 0;}

.mobile-navigation p a {text-decoration: none;}

.mobile-navigation p a:link {color: white;}

.mobile-navigation p a:visited {color: white; }

.mobile-navigation p a:hover {color: #d60505;}

.mobile-navigation p a:active {color: white; border-bottom: 1px solid white;}

.mobile-navigation p a:focus {color: #d60505;}




/* ———————————— NAVIGATION ———————————— */


#main-navigation {
position: fixed;
width: 100%;
height: 36px;
background-color: #232121;
z-index: 99;
}

.slash {color: #d60505;}

ul {
display: flex;
justify-content: space-between;
width: 65%;
padding: 8px 0;
}

nav p, ul  {
font-family: lato;
font-weight: 400;
font-size: 0.8em;
letter-spacing: .1em;
color: #fff;
margin: 8px auto;
margin-top: 4px;
}

nav li {
    display: inline-block;
}

#cart {
float: right;
margin: -35px 33px 0 0;
}

a {text-decoration: none; display: block;}

a:link {color: white;}

a:visited {color: white; }

a:hover {
    color: #d60505;
    transition-duration: .2s;
    transition-timing-function: linear;
}

.submitbutton:hover {
    color: black;
    transition-duration: .2s;
    transition-timing-function: linear;
}

.joinbutton {transition: none;}

a:active {color: white; border-bottom: 1px solid white;}

a:focus {
color: #d60505;
border-bottom: 1px solid #d60505; 
}




/* ———————————— FRIENDS BACKGROUND IMAGE ———————————— */


.friendsimage {
position: relative;
background-image: url("https://independentproject.s3.amazonaws.com/hero-image-d.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height: 1250px;
-webkit-clip-path: polygon(100% 100%, 0 80%, 0 0, 100% 0);
clip-path: polygon(100% 100%, 0 80%, 0 0, 100% 0);
z-index: -997;
margin-top: -5px;
}


/* ———————————— HEADER IMAGE & TEXT ———————————— */


.pairs {
color: #d60505;
padding: 90px 0 35px 0;
letter-spacing: .15em;
}

.header-content-wrapper {
position: relative;
top: -1200px;
width: 100%;
margin: 0 auto;
text-align: center;
z-index: -99;
}

.annim {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 90%;
height: auto;
padding: 2%;
margin-top: -25px;
}


.quote-and-bottle {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: -50px;
}

.quote-and-bottle h3 {
padding-top: 220px;
margin: 0 -35px;
}

#master-wine-bottle {padding-top: 50px;}

.right-text {
position: absolute;
margin: -410px 0 0 50%;
text-align: left;
line-height: 1.7em;
padding-left: 120px;
font-size: 1em;
}



/* ———————————— FACEBOOK SECTION ———————————— */

.facebook-text {
margin-top: -1260px;
line-height: 1.05em;
padding: 0 2.5%;
}

.joinbutton {
position: relative;
margin: 30px auto 0 auto;
display: block;
width: 225px;
height: 52px;
background: url("https://independentproject.s3.amazonaws.com/facebook-double-button-d.png") no-repeat;
border: 1px solid black;
box-shadow: 8px 11px 45px rgba(0, 0, 0, 0.3);
z-index: 9;
}

.joinbutton:hover {
background-position: 0 -56px;
}



/* ———————————— RED SECTION ———————————— */


.redstripes {
float: left;
height: 1150px;
width: 50%;
background-image: linear-gradient(45deg, transparent 38.89%, #911f1f 38.89%, #911f1f 50%, transparent 50%, transparent 88.89%, #911f1f 88.89%, #911f1f 100%);
background-size: 12.73px 12.73px;
-webkit-clip-path: polygon(0 0, 100% 9.3%, 100% 90%, 0 100%);
clip-path: polygon(0 0, 100% 9.3%, 100% 90%, 0 100%);
}

.redangled {
position: relative;
height: 1150px;
width: 100%;
background-color: #810000;
-webkit-clip-path: polygon(0 0, 100% 18%, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 18%, 100% 80%, 0 100%);
z-index: -5;
}

.red-content {
position: absolute;
margin-top: -1000px;
width: 100%;
}

.red-left-content {
float: left;
width: 50%;
text-align: center;
margin-top: -40px;
}

.red-right-content {
float: right;
width: 50%;
text-align: center;
margin-top: 140px;
}

.winner {
line-height: 4em;
padding: 50px 0;
}

.winner-mobile {display: none;}

.redbutton {
    text-align: center;
    padding: 20px 0;
    margin: 4% auto;
    border: 1px solid white;
    font-family: lato;
    font-weight: bold;
    letter-spacing: .15em;
    box-shadow: 6px 9px 40px rgba(0, 0, 0, 0.5);
    min-width: 150px;
    width: 270px;
}

.redbutton a:hover {
    font-family: lato;
    font-weight: bold;
    color: white;
    font-size: 1.02em;
    letter-spacing: .15em;
}





/* ———————————— BLUSH SECTION ———————————— */


.blushstripes {
    position: relative;
    float: right;
    height: 1150px;
    width: 50%;
    background-image: linear-gradient(45deg, transparent 38.89%, #eecbd0 38.89%, #eecbd0 50%, transparent 50%, transparent 88.89%, #eecbd0 88.89%, #eecbd0 100%);
    background-size: 12.73px 12.73px;
        -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 91%);
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 91%);
}

.blushangled {
    position: relative;
    height: 1150px;
    width: 100%;
    background-color: #e6b1b8;
     -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 82%);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 82%);
    z-index: -1;
}

.blush-bkgd {
    position: relative;
    margin-top: -230px;
    z-index: -999;
}

.heart-main {
    font-family: lato;
    color: white;
    font-size: .9em;
    line-height: 3em;
    letter-spacing: .15em;
    text-align: center;
    padding-bottom: 30px;
}

.heart {
   font-family: lato;
    color: white;
    font-size: .9em;
    line-height: 4em;
    letter-spacing: .15em;
    text-align: left;
}

.blush-content {
position: absolute;
margin-top: -1000px;
width: 100%;
}

.blush-left-content {
    float: right;
    margin-top: -40px;
    width: 50%;
    text-align: center;
}

.blush-right-content {
    float: left;
    width: 50%;
    text-align: center;
    margin-top: 170px;
}

ol {
    display: inline-block;
    padding-left: 30px;
}

.blushbutton {
    text-align: center;
    padding: 20px 0;
    margin: 6% auto;
    border: 1px solid white;
    font-family: lato;
    font-weight: bold;
    letter-spacing: .15em;
    box-shadow: 6px 9px 40px rgba(0, 0, 0, 0.5);
    width: 270px;
}

.blushbutton a:hover {
    font-family: lato;
    font-weight: bold;
    color: white;
    font-size: 1.02em;
    letter-spacing: .15em;
}





/* ———————————— CHARDONNAY SECTION ———————————— */



.chardstripes {
    position: relative;
    float: left;
    height: 1100px;
    width: 50%;
    background-image: linear-gradient(45deg, transparent 38.89%, #393838 38.89%, #393838 50%, transparent 50%, transparent 88.89%, #393838 88.89%, #393838 100%);
    background-size: 12.73px 12.73px;
    -webkit-clip-path: polygon(0 0, 100% 9.3%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 9.3%, 100% 100%, 0 100%);
}

.chardangled {
    position: relative;
    height: 1103px;
    width: 100%;
    background-color: #292728;
    -webkit-clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 100%);
    z-index: -111;
}

.chard-bkgd {
    position: relative;
    z-index: -111;
    margin-top: -208px;
}

.chard-content {
position: absolute;
width: 100%;
margin-top: -920px;
}

.chard-left-content {
    float: left;
    width: 50%;
    text-align: center;
    margin-top: -40px;
}

.chard-right-content {
    float: right;
    text-align: center;
    margin-top: 110px;
    width: 50%;
}

.not {
    line-height: 4em;
    padding: 50px 0;
}

.chardbutton {
    text-align: center;
    padding: 20px 0;
    width: 270px;
    margin: auto;
    border: 1px solid white;
    font-family: lato;
    font-weight: bold;
    letter-spacing: .15em;
    box-shadow: 6px 9px 40px rgba(0, 0, 0, 0.5);
}

.chardbutton a:hover {
    font-family: lato;
    font-weight: bold;
    color: white;
    font-size: 1.02em;
    letter-spacing: .15em;
}





/* ———————————— FOOTER ———————————— */


footer {
    height: 300px;
    background-color: #292728;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 4px solid #7f0000;
    margin-top: -3px;
}

.social {
    display: flex;
    justify-content: center;
    padding-left: 5%;
}

.fb {
    background-image: url("assets/fb-1.png");
    background-repeat: no-repeat;
    padding: 2%;
    width: 39px;
    height: 37px;
    margin-left: -105%;
}

.twitter {
    background: url("assets/twitter-1.png");
    background-repeat: no-repeat;
    padding: 2%;
    width: 39px;
    height: 37px;
}

.insta {
    background: url("assets/ig-1.png");
    background-repeat: no-repeat;
    padding: 2%;
    width: 39px;
    height: 37px;
}

.fb:hover {
    background-image: url("assets/fb-2.png");
    background-repeat: no-repeat;
    transition-duration: .2s;
    transition-timing-function: linear;
}

.twitter:hover {
    background-image: url("assets/twitter-2.png");
    background-repeat: no-repeat;
    transition-duration: .2s;
    transition-timing-function: linear;
}

.insta:hover {
    background-image: url("assets/ig-2.png");
    background-repeat: no-repeat;
    transition-duration: .2s;
    transition-timing-function: linear;
}

.footer-content {
    position: absolute;
    width: 100%;
    text-align: center;
}

.copyright {
    text-transform: uppercase;
    font-size: .65em;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;
    letter-spacing: .15em;
}

.webmaster {
    font-family: lato;
    font-weight: 900;
    font-size: .55em;
    letter-spacing: .2em;
    padding: 10px;
    border: 1px solid #7f0000;
    width: 300px;
    margin: 10px auto;
    border-radius: 20px;
    opacity: .8;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
}

.webmaster:hover {font-weight: 900;}








/* ******************** SCREEN STYLES ******************** */



/* ———————————— 768 ———————————— */

@media screen and (max-width: 768px) {
    ul {width: 75%;} 
    .red-blend {margin-top: -65px;}
    .orderarrow {margin-top: -200px;}
    .your-thing {margin-top: 5%; line-height: 1em;}
    .submitbutton {margin-bottom: 80px;}
    .custom-page-main-content {margin-top: 8%;}
    
    .about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -550px;
     padding-bottom: 240px;
    }
    
    .vid-background {height: 59vh;}
    #myVideo {height: 60vh; object-fit: cover;}
    
    .nashville {padding: 0 4%; margin-top: 1000px;}
    .tour-table {margin-top: 300px;}
}




/* ———————————— 715 ———————————— */


@media screen and (max-width: 715px) {
    
#main-navigation ul {display: none;}
#main-navigation {padding: 14px 0;}
#cart {display: none;}
.logo {display: none;}
    #search-box {display: none;}
.logo-mobile {display: block; top: -6px; width: 50%; height: auto;}
h1 {font-size: 6em; line-height: 1em;}
.red-blend, .blush-title, .chard-title {
margin-top: 50px;
}
    
  
    
/*  ———————————— MOBILE NAVIGATION ———————————— */
    
#burger {
display: block;
float: right;
padding-right: 27px;
padding-top: 16px;
position: fixed;
right: 0px;
z-index: 999;
}
     
.mobile-navigation {display: block;}
nav.mobile-navigation {display: none;}
#bottom-nav-bar {top: 58px;}
#bar {height: 58px;}
}



/* ———————————— 415 ———————————— */


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

body {height: auto;
width: 600px;
margin: 0 auto; }
    
.facebook-text {font-size: 3.5em; padding-top: 30px;}
    
.red-content, .blush-content, .chard-content {width: 140%;}
.blushbutton, .redbutton {width: 230px;}
.chardbutton {width: 250px;}
.logo-mobile {display: block; width: 60%; height: auto;}
    
    .orderarrow {display: none;}
    .your-thing {padding-top: 25%; line-height: 1em; width: 95%; margin: auto;}
    .submitbutton {margin-bottom: 80px;}
    .custom-page-main-content {margin-top: 8%;}
    .custom-print-banner-text {font-size: 2.3em;}
    .custominfo {padding: 0 5%;}
    .redbanner {width: 101%;}
    .bottom-color {width: 147%;}
    #phrase, #accent {width: 70%;}
    .checkoutsoon {padding-top: 25%;}
    
    footer {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
    .about-content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -650px;
    padding-bottom: 350px;
    }
    
    .vid-background {height: 99vh;}
    #myVideo {height: 100vh; object-fit: cover;}
    .about-content p {font-size: 1.2em;}
    .nashville {padding: 0 4%; margin-top: 900px;}
    .tour-table {margin-top: 300px; padding-bottom: 50px;}
    .freetours {padding-bottom: 40px;}
    
    .funwithcorks {padding-top: 100px;}

}




/* ———————————— 375 ———————————— */


@media screen and (max-width: 375px) {
    .red-content, .blush-content, .chard-content {width: 160%;}
    .blushbutton, .redbutton {width: 230px;}
    .bottom-color {width: 160%;}
    .haveyouever {width: 70%; margin: auto; font-size: 1.5em;}
    .custom-page-main-content {padding-top: 40px;}
    .vid-background {height: 129vh;}
    #myVideo {height: 130vh; object-fit: cover;}
    .nashville {padding: 0 4%; margin-top: 770px;}
    .about-content p {font-size: 1.3em;}
    .copyright {
        font-size: .85em; 
        width: 150%; 
        margin-left: -100px;
        padding-top: 30px;
    }
    .webmaster {font-size: .8em;}
}



/* ———————————— 320 ———————————— */


@media screen and (max-width: 320px) {
.red-content, .blush-content, .chard-content {width: 180%;}
.blushbutton, .redbutton {width: 230px;}
.bottom-color {width: 188%;}
}