@font-face {
    font-family:"Kristall Grotesk Light";
    src:url("../webfonts/kristall-h-mfd-pro-light.eot?#iefix");
    src:url("../webfonts/kristall-h-mfd-pro-light.eot?#iefix") format("eot"),url("../webfonts/kristall-h-mfd-pro-light.woff") format("woff"),url("../webfonts/kristall-h-mfd-pro-light.svg") format("svg");
}
@font-face {
    font-family:"Kristall Grotesk Medium";
    src:url("../webfonts/kristall-h-mfd-pro-medium.eot?#iefix");
    src:url("../webfonts/kristall-h-mfd-pro-medium.eot?#iefix") format("eot"),url("../webfonts/kristall-h-mfd-pro-medium.woff") format("woff"),url("../webfonts/kristall-h-mfd-pro-medium.svg") format("svg");
}

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('../webfonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

html {
    /* height: 100%; */
    font-size: 18px;
}

body {
    background-color: #000000;
    background-image: url(../images/211204jens-gebert-weine-bg02.jpg);
    background-size: cover;
	background-repeat: no-repeat;
    background-position: center;
    font-family: "Kristall Grotesk Light";
    color: #ffffff;
}

h1 {
    font-family: "Kristall Grotesk Light";
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h2 {
    font-family: "Kristall Grotesk Light";
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

h3 {
    font-family:"Kristall Grotesk Medium";
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
}

h4 {
    font-family:"Kristall Grotesk Light";
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0;
}

h5, h6 {
    font-family:"Kristall Grotesk Medium";
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 2rem;
    margin-bottom: 0;
}

.topnav {
    color: #ffffff;
    text-align: right;
    margin-top: 1rem;
    margin-right: 1rem;
    list-style: none;
}

.topnav > li {
    display: inline;
    margin-left: 1rem;
}

.topnav a {
    color: #ffffff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border-bottom: 1px transparent dotted;
    transition: 0.3s;
}

.topnav a:focus, .topnav a:hover, .topnav a:active {
    border-bottom: 1px #ffffff dotted;
}


footer {
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 2px;
    text-align: center;
    padding-top: 2rem;
    border-top: 1px rgba(255, 255, 255, 0.2) solid;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.btn-primary {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    text-align: center;
    margin: inherit auto inherit auto;
    letter-spacing: 2px;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 0;
    transition: 0.3s;
    font-size: 1.5rem;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ffffff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
}

p {
    
}

.jg-text {
    font-size: 1.5rem;
}

.jg-text-right {
    text-align: right;
}

.jg-text-left {
    text-align: left;
}



/* -------------------------------------------------- wineContainer -------------------------------------------------- */

.wineContainer {
    margin-bottom: 4rem;
    padding: 1rem;
}

.wineContainer h4 {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}

.wineContainer h3 {
    font-family:"Kristall Grotesk Medium";
    font-size: 1.3rem;
    text-transform: uppercase;
}

.wineContainer p {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    font-size: 0.9rem;
}

/* -------------------------------------------------- Media Queries -------------------------------------------------- */

/* ---------- lg ---------- Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {

    .jg-text {
        font-size: 1.3rem;
    }

    .jg-text-right {
        text-align: right;
    }
    
    .jg-text-left {
        text-align: left;
    }
    
} /* ---------- END lg ---------- */


/* ---------- md ---------- Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {

    .jg-text-right, .jg-text-left {
        text-align: center;
    }
    
} /* ---------- END md ---------- */


/* ---------- sm ---------- Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {

    
    
} /* ---------- END sm ---------- */


/* ---------- xs ---------- Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

    
    
} /* ---------- END xs ---------- */