/* Stylesheet for redwinesisters.com
 * 07-Dec-2021 bb 
 */


/* grab some fonts */
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');



/* Top Menu "Nav" */
.nav a {                 /* menu links */
	text-decoration: none;
	font-size:       calc(10px + 0.6vw);   /* responsive            1.1em; */
	margin-right:    30px; /* spacing between and after */
	opacity:         1.0;
	#font-weight:     normal;
	color:           #bbb;  /* white; */
}
.nav a:hover  {color: #ddd;}
.nav a:active {color: #fff;}
.nav {
	/* `background-color` is set in the javascript for opacity effect */
	width: 100vw;
	font-family: Lato, Verdana, Arial, Helvetica, sans-serif;
	text-align: right;	
	z-index: 100;  /* always on top */
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 1px;
	#padding: 1px 800px 1px 1px; /* TRBL */
	/* display: block; */
}
.navmenu {
	padding-right: 1.5em;
}



/* body */
body {
	width:            100vw;
	background-color: black; /* #darkgrey; (for debugging) */
	font-family:      Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:   -.005em;
	text-color:       white;
	font-size:        100%;
	position:         absolute;
	overflow-x:       hidden;
	overflow-y:       auto;	
}


/* Hero section "hero" */
.hero {
    display:      block;
	height:       calc(250px + 10vw);  /* responsive *//* 350px; /* 50vh; */
    position:     relative;
    overflow:     hidden;
    #overflow-top: visible;
    width:        100vw;
	top:          -62px; /* to go up under & behind the navbar */
	#z-index:      -3;
	/* order:        -1; /* render this early */
}
.hero img {
    left:         -20px;     /* alter this to move left or right */
    position:     relative; /* # fixed; */
	width:        100vw;
	#z-index:      -3;
	/* order:        -2;    /* render early - does this work????? */
	/* height: 75vh; */
	/* `top` is set in the javascript for parallax effect */
	/* top: -20vw; /* alter this to move up or down */
	/* top= 350px; */
	/* transform: scale(0.85);	  */
	/* transform: translateZ(-1px) scale(1.5);  */
}
.hero h1 {                /* the page title */
	color:        white;
	position:     absolute;
	top:          115px; /* 16vh; */
	left:         7.5vw; /* 10 : same as .main left, below */
	font-family:  'Architects Daughter', cursive;	
	/* #font-size:    calc(16px + 3.5vw);  /* responsive */
	font-size:    calc(30px + 2vw);  /* responsive */
	word-spacing: -0.25em;
	z-index:      0;
}
.hero a {
	color:           white;
	text-decoration: none;
}
.hero a:hover {
	#cursor: crosshair;
}
.hero img:hover {
	cursor:  default;
}



/* main section */
.main {
    display:     inline-block;
    position:    relative;
    left:        7.5vw;  /* 10 */
    width:       80vw; /* 80 */
    #font-family: Lato, Verdana, Arial, Helvetica, sans-serif;
    line-height: 1.5;
    color:       #ddd; /* white; */
	z-index:     50;
}
.main a {           /* main links */
	color: #cc3300; /* medium red */
}


/* 60% width section */
.center60 img {
	width: 70vw; /* was 60 */
}
.center60 {
	position:   relative;
    text-align: center;
}


/* footer links */
.footer a        {color: #bbb;}
.footer a:hover  {color: #ddd;}
.footer a:active {color: #fff;}
.footer {
	background-color: black; /* #080808; #grey; */
	color:            #bbb;
	#font-family:      Verdana, Arial, Helvetica, sans-serif;
	font-size:        0.8em;
	letter-spacing:   -.05em;
    text-align:       center;
	position:         absolute; /* relative; */
	display:          block;
	margin:           0px 0px;  /* TB,LR */
	width:            100vw;
	height:           10vh;
	padding-top:      8vh;
	padding-bottom:   0vh;
	#padding:          3vh 0vh;  /* TB,LR */
}



/**** Extras *****/

/* contact page email link */
.main .contact a {
	color: white;
}
.contact {
	z-index: 5; /* render late? */
}


/* wine glass <--> designer link */
.hoverpop:before {
    content:          '🍷';  /* &#127863; /* '&#0x1F377;';   /* '&#127863;'  /* '🍷'; */
    display:          inline-block;
    background:       black;
    color:            white;
    padding:          3px;
	font-size:        1.5em;
	transition:       1.0s;
}
.hoverpop:hover:before {
    content:          'site design :: b•bliss';
    background-color: red;
    padding:          6px;
	border-radius:    5px;
	font-size:        1.0em;
}


/* </style> */