@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');


body {margin: 0; font-family: 'Open Sans', sans-serif; font-size: 17px; position: relative;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always; overflow-x: hidden }

a {transition: all 400ms ease; color: rgba(61,79,41,1.00)}

h2 {margin: 0;  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-style: italic}

nav {position: fixed; top:0; left:0; height: 80px; background: #fff; width: 100%; z-index: 100; box-shadow: 0 0 100px 0 rgba(0,0,0,0.5)}

nav ul {position: absolute; right:32px; top: 40px; list-style: none; margin: 0; padding: 0;}
nav li {display: inline; margin-left: 6px; float: left}
nav li a {float: left; padding: 4px 8px 12px; color:#333; text-decoration: none; font-size: 18px}
nav li a:hover { background: #f5c22c}

#buttons {position: absolute; right:40px; top: 0px; }
#buttons a {color:#fff; background:#4c5e37; font-size: 19px; font-weight:bolder; display:inline-block; padding: 0 15px ; line-height: 34px; margin: 0 0 0 3px; text-decoration: none; }
#buttons a:hover {color:#f5c22c }
#buttons a.fb {background: #4267B2 url("imz/fb.png") no-repeat center center; background-size: 100%; height: 34px; width: 34px; padding: 0!important; float: right}

#logo {height: 110px;width: 250px; margin: 10px 0 -30px 40px; display: block}
#logo img {height: 100%; width: auto}

#myVideo { position: fixed; object-fit: cover; bottom:0; right: 0; width: 100vw;  height: 100vh; z-index: 0!important; }
#vidcover { position: relative; object-fit: cover; top:0; right: 0; width: 100vw;  height: 100vh; z-index: 1; background: url("imz/screen.png"); box-shadow: inset 0 0 100px rgba(0,0,0,0.5); }
#vidcover h1 {color:white; font-size: 75px; font-weight: 400; margin: 0; position: absolute; bottom: 150px; width:60vw; text-align: right;}

section {position: relative; z-index: 20; background: white; width: 100%; margin: 0}
.wrapper  {padding: 40px; max-width: 1400px; margin: auto; position: relative}
.clear {clear: both; float: none}

.message {margin-top: -85px; }

#quotebars {background: #DDD;}
.bar {background: #EEE; border: solid 2px white; padding:20px 33px; margin: 25px; float: left; width: calc(50% - 120px); position: relative; border-top-left-radius: 50px}
.bar em {font-size: 120%; font-weight: 300}
.bar img {position: absolute; right: -30px; bottom:-30px; width: 100px!important; height: auto!important; border: solid 2px white; border-radius:50%}

.oscar {width: 30%; height: auto; margin-left: 40px;  border: solid 2px white; box-shadow: 0 0 40px rgba(0,0,0,0.4); position: absolute; bottom: 40px; right: 40px;}
.block {width: 60%; float: left; text-align: right; font-size: 105%}

#news {background: #ccc url("imz/napa-bg.jpg") fixed; background-size: cover}
article {background: #EEE; border: solid 2px white; padding:33px; margin: 25px; float: left; width: calc(33% - 120px); position: relative; }
article img {margin: -33px -33px 0; width: calc(100% + 66px); height: auto; opacity: .85; transition: all 500ms ease;}
article a {text-decoration: none; color: #333; width: 100%; display: block; transition: all 500ms ease; }
article strong {color: rgba(76,94,56,1.00); transition: all 500ms ease;}
article a:hover h3{color:rgba(76,94,56,1.00)}
article a strong:hover {text-decoration: underline}
article a:hover img {opacity: 1}

footer {background: rgba(76,94,56,1.00); color: white; text-align: center; position: relative; z-index: 20; width: 100% }
.baselogo img {width: 300px; height: auto; display:block; margin: 0 auto 30px}
.top {position: absolute; top:50%; right:40px; margin-top: -20px}


header {width: 100%; height: 50vh; min-height: 300px; max-height: 420px; position: relative; z-index: 0; display: block;  }
header .wrapper {min-height: 100%;}
header h1 {color:white; font-size: 60px; font-weight: 400; margin: 0; position: absolute; bottom: 100px; }
.topper {display: block; position: relative; z-index: 1; height: 80px}
#p1 {background: #999 url("imz/p1.jpg") fixed; background-size: cover }
#p2 {background: #999 url("imz/p2.jpg") fixed; background-size: cover }
#p3 {background: #999 url("imz/p3.jpg") fixed; background-size: cover }
#p4 {background: #999 url("imz/p4.jpg") fixed; background-size: cover }
#p5 {background: #999 url("imz/p5.jpg") fixed; background-size: cover }
#p6 {background: #999 url("imz/p6.jpg") fixed; background-size: cover }

.left {width: 330px; float: left;}
.left img {width: 100%; height: auto;}
.left .sidenav a {display: block; margin-top: 9px; font-weight: bolder}
.left .sidenav a:hover {text-decoration: none}

.right {float: right; width: calc(100% - 370px)}
.right img {float: right; margin: 0 0 25px 25px; width: 45%; height: auto; max-width: 350px; min-width: 200px}

#deep::before, #beginnings::before, #career::before, #family::before, #commitment::before { content: ''; display: block; height: 100px; margin-top: -100px; visibility: hidden;}

.test p {display: block; padding-top: 30px; border-top: solid 2px #BBB; font-size: 114%; font-weight: 300; line-height: 160%; font-style: italic}
.test p img {float:left; border-radius: 50%; border: solid 1px #999; margin: 0 22px 12px 0; width: 100px!important; min-width: 100px; max-width: 100px!important; height: 100%!important}
.test ul {list-style: url("imz/dash.jpg"); margin: 0; }



@media only screen and (max-width: 780px) {
    
body {font-size: 15px;}
    
.hideme {display: none}

nav {position: absolute; height: 120px; box-shadow: 0 0 50px 0 rgba(0,0,0,0.5); background: rgba(245,194,44,1.00) }

nav ul {position: absolute; right:auto; left:17px; top: 80px;}
nav li {margin-left: 0px; }
nav li a {padding: 4px 8px 4px; font-size: 15px}

#buttons {right:0px; top: 0px; }
#buttons a {color: #4C5E38; background:#fff; font-size: 15px; padding: 0 10px ; line-height: 26px; margin: 2px; text-decoration: none; display: block}
#buttons a.fb {display: none}

#logo {height: 76px; margin: 0px;}
#logo img {height: 100%; width: auto}

.wrapper  {padding: 25px;}
.message {margin-top: -330px; }
    
#myVideo { position: fixed; object-fit: cover; bottom:auto; top:0px; right: 0; width: 100%;  height: 100%; max-height: 70%; z-index: 0!important; }

.bar {padding:15px 20px; margin: 15px; width: calc(100% - 70px); position: relative; border-top-left-radius: 40px}
.bar em {font-size: 110%; }
.bar img {right: -15px; bottom:-15px; width: 90px; }

.oscar {width: 30%; height: auto; float: right; margin: -100px 0 20px 25px;  box-shadow: 0 0 20px rgba(0,0,0,0.3); position: static; bottom: auto; right:auto;}
.block {width: auto; float: none; text-align: left; font-size: 100%}

#news {background: #ccc url(none) }
article {width: calc(100% - 120px); padding-bottom: 8px }


.baselogo img {width: 150px;}
.top {right:25px;}

h2 {font-size: 19px}


#vidcover h1 {font-size: 42px; font-weight: 600; margin: 0; position: absolute; bottom: auto; top:155px; width:90vw; text-align: right;}

header h1 {font-size: 35px; font-weight: 600}
    header {height: 29vh; min-height: 180px}
   
.left, .right {float: none; margin-bottom: 30px; width: 100% }
    .right img {float:none; width: 100%; margin: 0 0 15px 0}
    
.left img {width: 120px; float: left}
.left .sidenav {float: left; margin:  0 0 0 15px}
.left .sidenav a {margin-top:4px}    
    
    
#p1 {background: url("imz/p1.jpg") scroll; background-size: 140%}
#p2 {background: url("imz/p2.jpg") scroll; background-size: 140% }
#p3 {background: url("imz/p3.jpg") scroll; background-size: 140% }
#p4 {background: url("imz/p4.jpg") scroll; background-size: 140% }
#p5 {background: url("imz/p5.jpg") scroll; background-size: 140% }
#p6 {background: url("imz/p6.jpg") scroll; background-size: 140% }

    
}