/*
Website: 68°Noord – Kingcrabs
Author:      Ebi Fleck
Author URI:  http://cdp-unit.com
*/

/**************************************
 * Base
 *************************************/
* {
    box-sizing: border-box;
      margin-top: 0;
}
html {
font-size: 62.5%;    
}

body {font-family: 'IBM Plex Sans', sans-serif;line-height: 1.4; color:var(--primary-blue);}


/**************************************
 * Colors
 *************************************/
:root {
  --primary-white: #fff;
  --primary-blue: #123257;    
  --primary-orange: #f74805;
  --dark-blue: #000f2c;
  --light-blue:#eff8ff;
  --btn-blue:#3f66ca;        
}


.bg-light-blue {background-color: var(--light-blue)}
.bg-dark-blue {background-color: var(--dark-blue)}
.white {color: var(--primary-white);}
/**************************************
 * Header & Navigation
 *************************************/
.nav {
	position: absolute;
	top: 15px;
	z-index: 99;
	left: 0;
	right: 0;
}

.uk-navbar-nav>li>a {
	color:#fff;
	font-size: 1.4rem;
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	letter-spacing:0.1em;
	opacity:0.8;
    min-height: 40px;
	}

.uk-navbar-nav>li>a:hover {
	color:#fff;
    border-bottom:1px solid var(--primary-orange);
	}

li.shop {
    padding-left: 15px;
}

.uk-logo img {
	height: 80px;
    margin-top:2em;
}

.btn-outline {
    border: 1px solid var(--primary-orange);
}

li.EN {   
margin-left:30px; 
opacity:0.3;    
}
.vertical-line{
        display: inline-block;
        border-left: 1px solid #ccc;
        height: 40px;
    opacity: 0.3;
    }
li.EN:hover {opacity: 1}
li.DE {opacity:0.3;}
li.DE:hover {opacity: 1}

/* ============== > mobile-menu offcanvas <=============*/
.uk-offcanvas-bar{
    background-color: var(--dark-blue)
}

#offcanvas-nav > div > ul > li > a {
    font-size: 1.4rem;
}

.uk-navbar-toggle {
    color:var(--primary-white);
}

/**************************************
 * Typography
 *************************************/
h1, h2, h3 {
font-family: 'Raleway', sans-serif;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
h2 {
    color:var(--primary-blue);
    font-size: 4rem;
	hyphens:auto;
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1em;
}
/* ============== > h2 start responsive<=============*/
@media (min-width:960px){
h2 {font-size: 4.9rem;}    
}
/* ============== > h2 end responsive  <=============*/

h3 {
    color:var(--primary-blue);
    font-size: 3.8rem;
	hyphens:auto;
    font-weight: 700;
    line-height:1.2;
    margin-bottom:1em;
}

.rezepte h3 {
    margin-bottom: 0.4em;
}
p {   
    color:var(--primary-blue);
    font-size: 2rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.01em;
    word-spacing: 0.01em;
    margin-bottom:1.4em;
    margin-top: 0;
}

p:last-child {
  margin-bottom:0;  
}

.p-small {font-size: 1.5rem;margin-top:1em;}

/* ============== > start responsive p <=============*/
@media (min-width:960px){
p {font-size: 2.2rem;}    
}
/* ============== > end responsive p <=============*/
a.bigger-white {
color: white;
font-size: 2rem;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.01em;
word-spacing: 0.01em;  
}

.white a {
    color: white;
}
/**************************************
 * > UIkit Modify
 *************************************/
.uk-slideshow { margin-bottom: 7em;}
.uk-button {text-transform:none;font-size: 1.8rem;transition-property: none;
padding:15px 35px;line-height:130%;
}
.uk-button-primary {
    background-color: var(--btn-blue);
    color: #fff;
    border: 1px solid transparent;
}
button.uk-button.uk-button-primary:hover {
    transition:all 2s ease-in-out;
    background-color: var(--primary-orange);
}

.uk-link, a {
    color:var(--primary-blue);
    font-size: 1.8rem;
    font-weight:600;
    text-decoration: underline;
    cursor: pointer;
}

.uk-link, a:hover {
    transition:all 2s ease;
    color:var(--primary-orange);
}
.uk-button a {color: white;text-decoration: none;}
.uk-button a:hover {text-decoration: none;}

.uk-hr, hr {
   
}

/**************************************
 * Homepage > HERO
 *************************************/
#hero {
height: 100vh; 
display: flex; align-items: center; justify-content: center;flex-direction: column;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/hero-home.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center;
text-align: center;    
}
/* ============ > Hero h1 <=============*/
#hero h1 {
    color:var(--primary-white);
    font-size: 3.0rem;
    hyphens: auto;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 3em;
    margin:0;
}
@media (min-width:960px){
#hero h1 {font-size: 7.7rem;}    
}
/* ============ > Hero h3 <=============*/
#hero h3 {
    color:var(--primary-white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 2.0rem;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin:0;
}
@media (min-width:960px;){
#hero h3 {
    color:var(--primary-white);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 2.3rem;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin:0;
}
}    
/* ============ > Hero h3 <=============*/

/**************************************
 * Homepage > SPECIAL TASTE
 *************************************/
#special-taste > div > div.uk-slideshow > button {
    margin-top:3em;
    margin-left:auto;
    margin-right:auto;
    display: block;
}
#special-taste > div > div.text-box {margin-bottom:4em;}
#special-taste>div.uk-slideshow {
    margin-top: 3em;
}

@media (min-width:960px){
#special-taste {}
#special-taste > div > div.text-box {width: 50%;padding-right:8em;}
#special-taste > div.uk-container {display:flex;} 
#special-taste > div > div.uk-slideshow {width: 50%;}     
    
}


/**************************************
 * Homepage > FJORD-TO-HOME
 *************************************/
.box-fishing-boat {
height:55vh;
width:100vw;   
background-image: url("../img/fishing-boat-norway-2.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center;  
}
.box-dark-blue {
    background-color: var(--dark-blue);
    padding:6em 3em;
} 
/* ============ > responsive box <=============*/
@media (min-width:960px){
#fjord-to-home {display: flex;padding-top: 0;}
.box-fishing-boat {width:50vw;height:auto;}
.box-dark-blue {
width:50vw;
min-height:75vh;
padding:0 5em;

display:flex; 
flex-direction:column; 
justify-content:center;}
}

/**************************************
 * Homepage > Royal Delight
 *************************************/
@media (min-width:960px){
#royal-delight {text-align: center;}    
}

/**************************************
 * Homepage > ABOUT-US
 *************************************/
.box-photo-us {
height:55vh;
width:100vw;   
background-image: url("../img/tims.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center;  
}
.box-light-grey {
    background-color: #fafafa;
    padding:6em 3em;
} 
/* ============ > responsive box <=============*/
@media (min-width:960px){
#about-us-home {display: flex;padding-top: 0;}
.box-photo-us {width:50vw;height:auto;}
.box-light-grey {
width:50vw;
min-height:75vh;
padding:0 5em;

display:flex; 
flex-direction:column; 
justify-content:center;}
}

/**************************************
 * Homepage > Shop CTA
 *************************************/
#shop-cta img {margin-bottom: 2.5vh;height:100%;width:100%;}
#shop-cta img:last-of-type {margin-bottom: 0;}
@media (min-width:700px){
#shop-cta {text-align: center;}    
.shop-cta-box {display: flex;justify-content: center;} 
.shop-cta-box img {flex-basis: 30%;margin-right: 2.5vw;}
.shop-cta-box img:last-of-type {margin-right: 0;}    

}


/**************************************
 * Page > Die Koenigskrabbe
 *************************************/
#hero-kingcrab {
height: 100vh; 
display: flex;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/hero-kingcrab.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: 70% 50% ; 
}

/* ========= BEST CATCH >Section 2< ====== */
@media (min-width:700px){
#best-catch-norway {text-align: center;}
.uk-container.uk-container-medium.md-flex {
    display: flex;
    justify-content: center;
}    
} 

/* ========= FULL WIDTH FISHING BOAT > Section 3< ====== */
#fishing-boat-kingcrab {
height: 45vh; 
display: flex;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/kingcrab-catch-4.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center; 
}

/* ========= NUTRITION FACTS > Section 4< ====== */
#kingcrab-nutrition-facts{}


@media (min-width:700px){ 
#kingcrab-nutrition-facts{text-align: center;}    
}

/* ========= FULL WIDTH KINGCRAB LEGS > Section 5< ====== */
#kingcrab-legs {
height: 66vh; 
display: flex;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/kingcrab-legs.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center; 
}

/* ========= DELIVERY TO GERMANY > Section 6 < ====== */
@media (min-width:700px){
#delivery-chain{text-align: center;}
}    

/**************************************
 * Page > REZEPTE
 *************************************/
#hero-recipes {
height: 100vh; 
display: flex; align-items: center; justify-content: center;flex-direction: column;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/hero-rezepte.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: 40% 50%; 
}

.rezepte > div > ul > li > a > button {
    margin-bottom: 2em;
}
ul.cooking-ingredients {
padding-left: 2em;
}
.cooking-ingredients > li {
     color:var(--primary-blue);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom:0.4em;
    margin-top: 0;
}

ul.cooking-info {
padding-left: 2em;
}

.cooking-info > li {
     color:var(--primary-blue);
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom:2em;
    margin-top: 0;
    list-style-type: decimal;
}

/* ========= DELIVERY TO GERMANY > Section 6 < ====== */
@media (min-width:700px){
#rezepte-intro{text-align: center;}
} 


/**************************************
 * Page > UEBER UNS
 *************************************/
#hero-ueberuns {
height: 100vh; 
display: flex; align-items: center; justify-content: flex-end;flex-direction: column;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/TimEisel-TimLangeheine.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center; 
}

#hero-ueberuns h2 {
text-align: center;
margin-bottom: 3em;
background-color: #fff;    
}

@media (min-width:960px){
#hero-ueberuns h2 {
padding:0.2em 0.9em;    
margin-bottom: 3em;
background-color: #fff; }
}

@media (min-width:960px){
#hamburger-werte {text-align: center;}    
}

@media (min-width:960px){
#banner-probieren {text-align: center;}  
#banner-probieren h2 {max-width: 700px;margin: 0 auto 5vh auto;}    
}

/* ======================== FoodProfis ===================  */
.dark-blue-box {
background-color: var(--dark-blue);
padding: 6em 3em;    
}
.dark-blue-box h3 {color:#fff;}
.dark-blue-box p {color:#fff;}
.dark-blue-box a {color:#fff;}

.tims-box {
text-align: center;    
padding: 6em 3em; 
border:1px solid var(--dark-blue);    
}

@media (min-width:960px){
#food-profis > div:nth-child(1) {display: flex;}
.dark-blue-box{padding: 6em 6em;flex-basis: 50%;display: flex; align-items: center; justify-content: center;flex-direction: column; }        
.tims-box {flex-basis: 50%; display: flex; align-items: center; justify-content: center;flex-direction: column;}    
}
/* ======================== Tims History ===================  */
#tims-history {background-color: #fafafa;}
/*--> uk-container */#tims-history > div:nth-child(1) {margin-bottom:4em;} 

@media (min-width:960px){
/*--> uk-container */#tims-history > div:nth-child(1) {display: flex;max-width: 1000px;} 
/*--> slides */#tims-history > div > div {flex-basis: 40%;margin-right:7em;}  
/*--> text */#tims-history > div > p {flex-basis: 60%;display: flex; justify-content: center;flex-direction: column;}
/*--------  Tim L Below  -----------------------------------*/
/*--> uk-container */#tims-history > div:nth-child(2) {display: flex;max-width: 1000px;}   
/*--> slides */#tims-history > div:nth-child(2) > div {margin-left:7em;margin-right:0}   
}
/**************************************
 * Page > KONTAKT
 *************************************/
#hero-kontakt {
height: 100vh; 
display: flex; align-items: center; justify-content: center;flex-direction: column;       
background-blend-mode: multiply;    
background-color: rgba(1, 15, 43, 0.18);  
background-image: url("../img/hero-hamburg-kontakt.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: 25% 50%; 
}
/* ======================== Intro Kontakt ===================  */
@media (min-width:960px){
#intro-kontakt {text-align: center;}    
}

/* ==================== Kontakt Formular =========================== */
#kontakt-formular {
background-color: var(--dark-blue);
}
#kontakt-formular p {
color:#fff;
margin-bottom:0.2em;
font-size:1.8rem;
opacity: 0.8;    
}

#kontakt-formular input {margin-bottom: 3em;}

/**************************************
 * > FOOTER
 *************************************/
img#arrow-to-top {
    max-width: 3em;
    margin-right: 1em;
    opacity: .5;
}

.footer-bg-image {
min-height: 807px; 
background-image: url("../img/footer-bg-v2.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: 28% center; 
/*border:1px solid red;*/
}
#footer{ 
background-color: var(--dark-blue);
}

.footer-flex-box{
display: flex;
justify-content: center;
flex-direction: column;    
position: relative;
z-index: 99;
margin-top: -20em;
}

/* textbox 1*/.footer-flex-box > div:nth-child(1){
margin-bottom: 5em;   
}

/* textbox 2*/.footer-flex-box > div:nth-child(2){
margin-bottom: 5em;
}


#footer p {
	color: var(--primary-white);
	font-weight:400;
	opacity:.8
 }
#footer a:link {
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 150%;
}

#footer a:hover {
color: var(--primary-orange);
}

#footer > div > ul > li> a {
    	color: var(--primary-white);
	font-weight:200;
	opacity:.5;
        font-size: 2.2rem;
}

#footer > div > ul > li> a:hover {
    	color: var(--primary-orange);
}


/* ==================== Footer Media Query =========================== */
@media (min-width:960px){
.footer-bg-image {
min-height: 807px; 
background-image: url("../img/footer-bg-v2.jpg");
background-size:cover;
background-repeat: no-repeat;  
background-position: center; 
/*border:1px solid red;*/
}    
.footer-flex-box {flex-direction: row;}   
/* textbox 1*/.footer-flex-box > div:nth-child(1){
flex-basis: 40%;
margin-right: 10%;
margin-bottom:12em;    
}

/* textbox 2*/.footer-flex-box > div:nth-child(2){
flex-basis: 40%;
margin-left: 10%;     
}       


#footer > div > ul {display: flex; justify-content: space-between; } 
#footer > div > hr {opacity: .5; margin: 1em 0;}    
#footer > div > ul.uk-nav.nav-secondary {justify-content: flex-end;} 
#footer > div > ul.uk-nav.nav-secondary > li {margin-right: 4em;} 
#footer > div > ul.uk-nav.nav-secondary > li:last-child {margin-right: 0;} 
#footer > div > hr {
    opacity: .3;
    margin: 4em 0;
}

.uk-icon {color: var(--primary-white);opacity:.5; padding-top:1em;}

#footer > div > ul.uk-nav.nav-secondary > li > a {
    font-size: 2.2rem;
    font-weight:200;
	opacity:.5;
}
/* -End Media Query ->*/}
/* ==================== END Footer Media Query =========================== */    

/**************************************
 * > Impressum, Datenschutz, AGB
 *************************************/
.page-bg-darkblue {
background-color: var(--dark-blue);
}
.page-bg-darkblue h1 {
    font-size: 4rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1em;   
} 
    
.page-bg-darkblue p, h1 {
color:#fff;
}	
	






/* ================ imported styles ===================== */
.uk-sticky-placeholder {
	height: 0 !important;
}
.top-wrap::before, .overlay-wrap::before {
	position: absolute;
	top:0;
	right:0;
	left: 0;
	bottom: 0;
	content: '';
	z-index: 1;
	background-color: rgba(0,0,0,0.5);
}
.top-wrap-height {
	height: 80vh;
	min-height: 460px;
	transition: height 0.25s;
}
.uk-subnav-pill > * > :first-child {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.04);
}
.top-container {
	z-index: 2;
}
.subtitle-text {
	font-size: 1.2em;
	opacity: 0.7;
	font-weight: 300;
}
.logos-grid img {
	display: block;
	width: 60px;
	margin: 0 auto;
	filter:  grayscale(100%);
	transition: filter 0.25s;
}
.logos-grid img:hover {
	display: block;
	width: 60px;
	margin: 0 auto;
	filter:  grayscale(0);
}
/* == imported styles === */

/* Kontact form */

#contact-form-message {
    color: #fff;
    font-size: 16px;
    padding: 10px 15px;
    margin-top: 15px;
}
#contact-form-message.cf-error {
    background-color: #ff0000;
}
#contact-form-message.cf-success {
    background-color: #4CAF50;
}