/* ———————————— 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;
}


/* ———————————— 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;
}

#submit: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; 
}



/* ———————————— 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;}




/* ******************** CUSTOMIZE PAGE ******************** */



.your-thing {
    color: #292728; 
    text-align: center; 
    padding-top: 7%;
    font-size: 7.5em;
}

.haveyouever {
    color: black; 
    letter-spacing: .02em; 
    font-size: 1em; 
    line-height: 1.7em;
    padding: 20px 0 0 0;
}

.redbanner {
    position: relative;
    height: 350px;
    width: 100%;
    top: 100px;
    background-color: #7f0000;
    z-index: -1;
}


.custominfo {
display: flex;
justify-content: center;
margin-top: -390px;
}

.custom-print-banner-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 3em;
    line-height: 1em;
    letter-spacing: .02em;
    padding: 0 .5% 0 3%;
}

.customprice {
    font-size: 10em;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 2%;
}


.bottom-color {
    position: absolute;
    background-color: #222121;
    width: 100%;
    height: 2100px;
    margin-top: -230px;
    z-index: -9999999999;
}

.orderarrow {
    position: absolute;
    margin-left: 48%;
    margin-right: 48%;
    margin-top: -240px;
}

form {
    position: relative;
    text-align: center;
    font-family: lato;
    font-weight: 600;
    letter-spacing: .02em;
}

.phrase {padding: 75px 0 15px 0;}

legend:before {
    content: "* "
}

:before {color: #7f0000;}

#phrase {padding: 20px; font-size: 1em;}
#accent, #nameaccent, #emailaccent  {font-size: .9em; padding: 20px;}

textarea {border: 3px solid #7f0000;}

textarea:focus {border-color: #e6b1b8; outline: none;}

fieldset {border: none;}

.colorsection, label {margin-right: 1.6em;}

.accent-color-text {margin-top: 40px;}

#choose-center {margin-top: -100px;}



.radiobuttongroup {
    width: 73%;
    max-width: 1000px;
    height: 300px;
    border: 3px solid #7f0000;
    margin: auto;
    margin-top: 50px;
    padding-bottom: 55px;
    background: white;
}

legend {padding:15px 0; color: black;}

#choosered, #choosepink, #chooseyellow {margin: 7px;}

.textareagroup {
    width: 73%;
    max-width: 1000px;
    height: 330px;
    border: 3px solid #7f0000;
    margin: auto;
    margin-top: 50px;
    padding-bottom: 10px;
    background: white;
}


.checkboxgroup {
    width: 73%;
    max-width: 1000px;
    height: 200px;
    border: 3px solid #7f0000;
    margin: auto;
    margin-top: 50px;
    padding-bottom: 10px;
    background: white;
}

#wed, #birth, #anniv {margin: 8px;}


.dropdowngroup {
    width: 73%;
    max-width: 1000px;
    height: 150px;
    border: 3px solid #7f0000;
    margin: auto;
    margin-top: 50px;
    padding-top: 60px;
    background: white;
}


#submit {
    text-align: center;
    padding: 20px 70px;
    margin: 4% 25% 10% 25%;
    border: 1px solid white;
    font-family: lato;
    font-weight: 700;
    letter-spacing: .06em;
    color: black;
    background-color: white;
    font-size: 1em;
    border: 3px solid #7f0000;
    cursor:pointer;
    box-shadow: 6px 9px 40px rgba(0, 0, 0, 1);
}

#submit:hover {font-size: 1.02em;}







/* ******************** CART PAGE ******************** */


.results-container {height: 70vh;}



/* ******************** CORKS PAGE ******************** */



.cork-text {color: black; letter-spacing: .05em; padding-bottom: 7%;}
.funwithcorks {color: #292728; text-align: center; padding: 7% 0 0 0; font-size: 7em;}


.flexrows {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex: 0 0 100%;
    padding-bottom: 7%;
}




/* ******************** ABOUT US PAGE ******************** */



.vid-background {
    background-color: black;
    position: relative;
    top: -40px;
    margin-bottom: -14px;
    border-bottom: 4px solid #7f0000;
}


#myVideo {
    position: relative;
    top: -10px;
    margin-bottom: -14px;
    width: 100%; 
    opacity: .3;
}


.nashville {
    color: white;
    font-size: 6em;
}

.content {
    position: absolute;
    margin-top: -38%;
    width: 100%;
    text-align: center;
}


.freetours {padding-top: 50px;}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    padding: 3%;
    }

table {
    width: 60%;
    margin: 0 auto;
    margin-top: 2%;
    margin-bottom: 6.5%;
}

th {
    font-family: bebasneue;
    font-size: 2em;
}

td {font-family: lato, sans-serif; font-weight: 600;}




/* ******************** CONTACT US PAGE ******************** */


.call {
    color: #292728; 
    letter-spacing: .05em; 
    font-size: 1em; 
    padding-bottom: 80px;
}

 .box {
     width: 35em;
     height: 1.5em;
     border: 3px solid #7f0000;
     margin-top: .5em;
}

#contactsubmit {
    text-align: center;
    padding: 20px 70px;
    margin: 2% 25% 10% 23%;
    border: 1px solid white;
    font-family: lato;
    font-weight: 700;
    letter-spacing: .06em;
    color: black;
    background-color: white;
    font-size: 1em;
    border: 3px solid #7f0000;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0);
    cursor:pointer;
    transition-duration: .2s;
    transition-timing-function: linear;
}

#contactsubmit:hover {font-size: 1.02em;}

#accent {height: 5em;}

#thanks {
	padding: .5em;
}



/* ******************** 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;}
    
    #cart-text {font-size: 5em; width: 70%; display: block;}




/* ———————————— 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;}
}

    
    
/* ———————————— 600 ———————————— */


@media screen and (max-width: 600px) {
    
    .box {width: 25em;}
    }
    


/* ———————————— 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%;}
}
}