* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; *behavior:url('/immerse/css/boxsizing.htc');}
html {min-height:100%; height:100%; width:100%;}

body {color:#666; font-family:'Raleway', Arial, sans-serif; font-size:20px; padding:0; margin:0; background:#ccecef;}
p {margin:0 0 15px 0; line-height:135%;}
a {color:#ff5f10;}
h3 {font-size:22px; color:rgba(0,0,0,1); }
h2 i {margin-left:10px; color:#f74f99;}

.container {max-width:1250px; width:90%; margin:0 auto; overflow:auto;}
.extraneous {display: initial;}
.topheader {background:rgba(255,255,255,1); position:fixed; top:0; right:0; left:0; z-index:10;}
.topheader .container {padding:10px 0; display: flex; border:0;}
.topheader h1 {font-size:20px; color:rgba(0,0,0,0.5); flex:0 0 200px; margin:0; padding:0;}
.topheader h1 i {opacity:0.3; margin-right:15px;}
.topheader h1 a {text-decoration: none; color:#333;}
.topheader ul {flex:1 1; text-align:right; margin:0; list-style:none; font-size:14px;}
.topheader ul li {display:inline-block; padding:3px 5px;}
/*.topheader ul li:last-of-type {border-left:1px solid rgba(0,0,0,0.2); padding-left:10px; margin-left:5px;}*/
.topheader ul li a {color:rgba(0,0,0,0.5); text-decoration: none;}

.topheader .final {display:none;}
.topheader:hover .final {display:block;}
.final h3 {text-align: center; max-width:700px; margin:0 auto 40px auto;}
.final .cols {align-items:stretch;}

.firstsubsection {margin-top:50px; padding-bottom:50px; z-index:2;position:relative;}

.immerselogo {max-width:200px; margin-right:50px; position:absolute; bottom:100px; left:50px;}

section {padding:80px 0; margin:0;}
section .container {border:0;}
section .cols {display:flex; flex-wrap:wrap;}
section .col {flex:1 1; padding:10px;}

section .col img {max-width:100%;}

.colforcewide {margin-top:150px;}

.col .paddingwhenwide {padding-left:50px; padding-right:0;}
.colright .paddingwhenwide {padding-left:0; padding-right:50px;}

.halfbar {width:50%; background:#000; height:3px; border:0;}
section h1 {color:#000; font-size:30px; font-weight:bold; padding-right:20%;}
section p {color:#000; font-size:18px; font-weight:bold; padding-right:30%; margin:20px 0;}
section h2 {color:#000; font-size:25px; font-weight:bold; padding-right:30%;}

.content p {font-weight:normal; color:#589c7d;}
span.numline {display:block; width:100%; display:flex;}
span.numline span:nth-of-type(1) {flex:0 0 30px;}
span.numline span:nth-of-type(2) {flex:1 1; background: linear-gradient(to bottom,transparent 0%, transparent 47%, #ff9c35 47%, #ff9c35 53%, transparent 53%);}

.seccard p {padding:0;}

.colright {text-align: right;}
.colright h2, .colright p, .colright .halfbar {text-align: right; padding-right:0; padding-left:50%;}

section .colright .halfbar {margin:0 0 0 50%;}

section.darker {background:#9adbe3;}
section.darker h2 {color:#fc6731;}
section.darker .halfbar {background:#fc6731;}

section.peach {background:#ffe0e0;}
section.peach h2 {color:#3f4a9c;}
section.peach .halfbar {background:#3f4a9c;}

section.pink h2 {color:#f84f9a;}
section.pink .halfbar {background:#f84f9a;}

.seccard img {animation:  fadein 2s;}
section:first-of-type {animation: fadein 1s;}
a.seccard:hover {animation: growit 0.2s;}





a.seccard {text-decoration:none; display:block;}
a.seccard:hover {border-color:#000;}
a.seccard:hover img {opacity:0.8;}

.seccard {border:10px solid #000; background:#ccc; width:100%; text-align:center; padding:30px; margin-bottom:20px;}
.seccard p {text-align:center; font-weight:bold; font-size:13px; margin:20px 0 0 0;}
.seccard img {max-width:100%;}

.seccard.gruner {background:#fcf8e9; border-color:#ffcb8e;}
.seccard.gruner p {color:#549a7c;}
.seccard.origins {background:#ffe0e0; border-color:#feada0;}
.seccard.origins p {color:#364c9f;}
.seccard.savvy {background:#fcf8e9; border-color:#f7e9a8;}
.seccard.savvy p {color:#ae87b4;}
.seccard.wild {background:#c4e9f1; border-color:#7c92c3;}
.seccard.wild p {color:#fa7044;}
.seccard.shiraz {background:#c4e9f1; border-color:#9adbe3;}
.seccard.shiraz p {color:#f759a4;}
.seccard.sparkling {background:#ffdfe0; border-color:#fc9fbd;}
.seccard.sparkling p {color:#00bdcb;}
.seccard.chardonnay {background:#f5dfff; border-color:#c6abd1;}
.seccard.chardonnay p {color:#854c9e;}
.seccard.pinot {background:#d7dfff; border-color:#a1aad2;}
.seccard.pinot p {color:#ef509d;}

.footer {overflow:auto; padding:30px 0; text-align: center;}
.footer .container {border-bottom:0;}
.footer p {font-size:14px;}
.footer span {margin:0 20px; opacity:0.2;}


.cards {width:100%; font-size:0.0000001px;
    -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;
    
    -moz-column-count: 3; -webkit-column-count: 3; column-count: 3;
    -webkit-margin-bottom-collapse: separate;}
.card {display:inline-block; background:#333; margin:0 0 30px 0; padding-bottom:15px;
       -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; width:100%;}
.card:hover {background:#000;}
.card img {width:100%;}
.card h5 {line-height:1em;  text-decoration: none; font-size:15px; margin:15px 15px 0 15px; color:#fff;}
.card p {color:#fff; font-size:12px; padding:0 15px; margin:10px 0 0 0; opacity:0.5; text-decoration: none;}
.card p.type, .card p.usertaginfo {line-height:1em; margin-top:5px; margin-bottom:0; color:#fff; opacity:0.7; font-size:11px; font-weight:300;}
.card a {text-decoration: none;}

.card img {animation:  fadein 2s;}
.card:hover {animation: growit 0.2s;}

.fatpad {padding:50px;}

@media all and (max-width: 1350px){
.immerselogo {max-width:150px; margin-right:30px; position:absolute; bottom:100px; left:30px;}
}

@media all and (max-width:950px) {
.immerselogo {max-width:120px; margin-right:20px; position:absolute; bottom:100px; left:20px;}
section h1 {font-size:20px; padding-right:10%;}
section p {font-size:16px; padding-right:20%; margin:20px 0;}
section h2 {font-size:20px; padding-right:20%;}

.col .paddingwhenwide {padding-left:0; padding-right:0;}
.colright .paddingwhenwide {padding-left:0; padding-right:0;}
.colright h2, .colright p, .colright .halfbar {padding-left:20%;}
section .col {flex:1 1 30%;}
}

@media all and (max-width:750px) {
section .colforcewide {flex:1 1 100%; padding:10px; margin-top:100px;}
section .colforcewide h1, section .colforcewide p {text-align:center; margin-right:0; padding-right:0;}
section .col {flex:1 1 47%; padding:10px;}
.extraneous, .extraneous a {display: none;}
.topheader h1 {font-size:20px; text-align:center; flex:0 0 100%;}
.topheader .container {width:100%; margin:0 10px;}
.topheader .final .cols {margin:0; padding:0;}
.topheader .final .col {margin:0; padding:0;}
.topheader .final .col p {margin:0; padding:8px;}
.topheader .final img {display:none;}
.topheader .final .seccard {border:0; padding:0; margin:0;}
.fatpad {padding:20px;}
section:last-of-type {padding-top:40px;}
.firstsubsection {margin-top:0; padding-bottom:20px;}
.content h2, .content p {padding-right:0;}
}

@media all and (max-width:650px) {
.container {width:80%;}
.immerselogo {display:none;}
.cards {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
    -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;}


/*.topheader ul {display:none;}*/

}

@media all and (max-width:500px) {
section .col {flex:1 1 100%; padding:10px;}
.cards {margin-top:30px;}
.cards {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;
    -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;}
}


/* animation */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes growit {
  from { transform: scale(1); }
  to   { transform: scale(0.97); border-radius:5px;}
}

@keyframes slideInFromLeft {
  0%   {transform: translateY(100%); opacity:0;}
  100% {transform: translateY(0);    opacity:1;}
}