/*
Theme Name: Kokken & Co
Author: InternetFactory ApS
Author URI: http://internetfactory.dk/
Version: 1.0.5
*/
@import url("editor-style.css");

/* General */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    outline: none;
    box-sizing: border-box;        
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: rgba(255,255,255,.15); }
::-webkit-scrollbar-thumb { background-color: #ddd; }

input[type=text], input[type=tel], input[type=number], input[type=email] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=number] {
    appearance:textfield;
}

/* Html+body */
html { position: relative; height:100%; overscroll-behavior-x: none; }
body { background: #fff; color:#006633; width:100%; height:100%; padding:0; margin:0; overflow-x:hidden; font-weight: 300; font-family: 'Massilia'; }

.pagewidth { width: 100%; max-width: 1400px; position: relative; }
.textcenter { text-align:center; }
.center { margin:0 auto; }
.clickable { cursor:pointer; }
.fullheightgrid { height:100%; display: grid; grid-template-rows: 1fr auto; }

.main { height:100%; display:grid; grid-template-rows: 86px 1fr auto auto; }
.page-template-page-forside2 .main { grid-template-rows: 86px auto 1fr auto auto; }
.top { position: relative; background:#fee7d0; }
.topbar { width:100%; height:86px; background:#fff; padding:22px 32px; transition: all .3s ease-in-out; box-shadow: 0 1px 0 0 #00000011; }
.topbar>div { display:grid; grid-template-columns:auto 1fr 150px; grid-gap:24px; } 
.topbar>div>div { display: flex; align-items: center; position: relative ;} 

.topbar .logo { height:42px; display:block; animation: fadeIn 1s ease-in-out; }
.topbar .menu { animation: fadeIn .3s ease-in-out; }
.topbar .banner {
    background: #006633;
    color: #fff;
    padding: 24px 16px 20px;
    position: absolute;
    right: 0;
    top: -32px;    
    min-height:86px;
    white-space: nowrap;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
    z-index: 10;
    animation: fadeInDown .3s ease-in-out;
}

.topbar .banner td>h2,
.topbar .banner td>h2.Underoverskrift { margin:10px 0 0 0; }
.topbar .banner td { line-height:1.3em }
.topbar .mobilemenubtn { 
    display:none; 
    font-size:24px;
    font-weight: 400;
    animation: fadeIn 1s ease-in-out;
    cursor:pointer;
}


/* Scrolled */
.scrolled .topbar { padding:20px 32px; height:auto; position:fixed; top: 0; left: 0; z-index: 98; animation: fadeInDown .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 5px 0 0 #00000011; }
.scrolled .topbar .logo { height:30px; animation: fadeInUp .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);  }
.scrolled .topbar .menu { animation: fadeInUp .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);  }
.scrolled .topbar .mobilemenubtn { animation: fadeInUp .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);  }
.scrolled .topbar .banner { display:none; }
.scrolled #main_menu>li.active:after { top:calc(100% + 26px); }

/* Main menu */
#main_menu>li>a {
    font-size: 1em;
    font-weight: 700;    
    text-align: center;
    /* letter-spacing: 1px; */
    margin-right: 0 !important;        
    color: #006633;
    padding:0 1.5em;
    transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#main_menu>li>a:hover { transform: translateY(-3px); }
#main_menu>li.active:after {
    content: '';
    width: calc(100% - 24px);
    height: 2px;
    border-radius: 3px;         
    background:#006633;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: fadeIn .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
    animation-delay:.5s;
    z-index: 1;
}

#main_menu>li:last-child>a { background: none; }
#main_menu>li>a.sf-with-ul, #main_menu>li:first-child>a.sf-with-ul { padding-left: 20px; padding-right: 23px; }
#main_menu>li>a.sf-with-ul:after { right: 6px !important; top: 28px !important; border-top-color: rgba(255,255,255,.5) !important; }

.sf-menu { margin: 0 !important; }
.sf-menu ul { background: #fff !important; min-width: 180px; top: 32px !important; margin:0 !important; padding: 16px 0 0 0 !important; box-shadow: 0px 3px 0 0 #00000022; z-index: 999; 
    border-image: linear-gradient( to bottom,#00000000, #00000011) 10;
    border-width: 1px;
    border-style: solid;
}
.sf-menu>ul { padding: 10px 0 0 10px !important; }
.sf-menu>li>ul { margin: 0 0 0 5px !important; z-index: 999; }
.sf-menu ul li { background: transparent; font-size: 12px; color: #333; }
.sf-menu ul li:hover { background: rgba(0, 0, 0, 0.1); color: #333; }
.sf-menu ul li a { padding: 8px 15px; }
.sf-arrows ul .sf-with-ul:after { border-left-color: #333 !important; right: 20px !important; }

/* Mobil Menu */
.mobile_menu_header { width: 100%; height: 100px; padding: 30px; }
.mobile_menu_header>div { width:100%; height:100%; background: url('/wp-content/themes/kokkenogco/_img/logo.png?ts=2') no-repeat center center; background-size: contain; }

.sidr { box-shadow: none !important; }
.sidr a { height: 48px; line-height: 48px; }
.sidr .submenu_hidden {display:none !important;}
.sidr ul li a, .sidr ul li span { color:#006633; text-transform: none; font-size: 1.2em; font-weight: 700; }

/* Floater */
.floater { position: fixed; z-index:99; top:100px; right:0px; }
.floater>div { position:relative; background:#ddd; right:-100px; width:150px; height:50px; display:grid; grid-template-columns: 50px 1fr; place-items:center; transition: right .5s cubic-bezier(0.19, 1, 0.22, 1); margin-bottom:1px;} 
.floater>div:hover { right:0; }
.floater>div>i { font-size:20px; line-height:50px; }
.floater>div>div { width:100%; text-align: left; }

/* Slick */
.slick-next, .slick-prev { background:none; box-shadow: none; }
.slick-next:before, .slick-prev:before { color:#006633;  }
.slick-prev:before { content:''; width:32px; height:20px; margin-left: 6px; display:block; background: url('/wp-content/themes/kokkenogco/_img/pil_venstre.png') no-repeat center bottom; background-size: contain;  }
.slick-next:before { content:''; width:32px; height:20px; margin-left: 10px; display:block; background: url('/wp-content/themes/kokkenogco/_img/pil_hojre.png') no-repeat center bottom; background-size: contain;  }

.slick-dots { bottom: -40px; }
.slick-dots li.slick-active button:before { color:#006633; }
.slick-dots li button { width:40px; height:40px; }
.slick-dots li button:before {     
    font-family: slick;
    font-size: 40px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    content: '•';     }

/* Slider slides */
.heroslider { background:#fee7d0; padding:64px; max-width: 100vw; }
.heroslider .slide-item { display:grid !important; height:100%; grid-template-columns: 1fr 40%; grid-gap:32px; }
.heroslider .slide-item>div { align-self: center; padding:0 24px; }
.heroslider .slide-item img { width:100%; height:auto; box-shadow: 0px 5px 0px 0px #00000011; border-radius: 2em; }

/* Customer slides */
.customers { background:#fee7d0; padding:32px; }
.customers .pagewidth { display:grid; grid-template-columns: 50% 1fr; grid-gap:32px; }
.customers .pagewidth>div:first-child { align-self: center; padding:0 32px 0 0; }
.customers .slide-item { opacity: .5; display: flex !important; justify-content: center; align-items: center; text-align: center; height: 160px; padding:32px; transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.customers .slide-item:hover { opacity:1; }
.customers .slide-item>div { filter:grayscale(1) brightness(.5); width:100%; height:100%; background-size:contain; background-position: center center; background-repeat: no-repeat; transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.customers .slide-item>div:hover { filter:grayscale(0); }
/* .customers .slide-item { filter: invert(30%) sepia(26%) saturate(1674%) hue-rotate(103deg) brightness(94%) contrast(104%); opacity: 1; display: flex !important; justify-content: center; align-items: center; text-align: center; height: 160px; padding:32px; transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } */

/* Footer */
.bottom_upper { background:#006633; color:#fff; padding:32px; box-shadow: inset 0 32px 64px -64px #000; position: relative; overflow:hidden; }
.bottom_upper .pagewidth { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.bottom_upper p { font-size:0.9em; }
.bottom_upper a { color:#fff; text-decoration: none; }

.bottom_upper .pagewidth>div:nth-child(2) p,
.bottom_upper .pagewidth>div:nth-child(3) p {text-align:center !important;  }

.bottom_upper .pagewidth>div:nth-child(2) table,
.bottom_upper .pagewidth>div:nth-child(3) table {margin:0 auto !important;  }


.bottom_upper ul.footer_menu a { color:#fff; text-decoration: none; line-height: 1.5; }
.bottom_upper ul.footer_menu { list-style: none; padding:0; }

.bottom_lower { background:#006633; color:#fff; padding:32px; box-shadow: inset 0 32px 64px -64px #000; }
.bottom_lower .pagewidth { display:grid; grid-template-columns: 1fr 1fr 2fr; width:auto; }
.bottom_lower a { color:inherit; }

.bottom_footer { background:#006633; color:#fff; padding:16px; }

.main>.content { padding:64px 32px; background:#fff; }

.page-template-page-forside .main .dual { display:grid; grid-template-columns: 1fr 1fr; min-height:500px; height:50vh; }
.page-template-page-forside .main .dual .content { padding:32px; box-shadow:25px 0 50px -25px #00000066; color:#000; background-size:cover; background-repeat: no-repeat; background-position: center center; overflow:hidden; position: relative; }
.page-template-page-forside .main .dual .content:first-child .pagewidth { margin:0 0 0 auto; }
.page-template-page-forside .main .dual .content:last-child .pagewidth { margin:0 auto 0 0; }
.page-template-page-forside .main .dual .content .pagewidth { height:100%; max-width:700px; }
.page-template-page-forside .main .dual .content .card { margin-top: 100px; color:#fff; position: absolute; bottom: -84px; transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.page-template-page-forside .main .dual .content .card:hover { bottom:-64px !important; }
.page-template-page-forside .main .dual .content .card a { color:#fff; border-color:#fff; }
.page-template-page-forside .main .dual .content .card a.pil:after { background-image: url('/wp-content/themes/kokkenogco/_img/pil_hvid.png'); }
.page-template-page-forside .main .dual .content:first-child .card { padding:32px 32px 80px; background: #006633; transform: rotate(-3deg); animation: fadeInUpRotatedLeft 1s; animation-delay: .5s; animation-fill-mode: forwards;  }
.page-template-page-forside .main .dual .content:last-child .card { padding:32px 32px 64px; background: #333; transform: rotate(3deg); animation: fadeInUpRotatedRight 1s; animation-delay: .5s; animation-fill-mode: forwards; }

/* Paragraphs */
.paragraph_wrapper .trustpilot-widget_container { margin: 32px 0; }
.paragraph_wrapper .slick_container { margin: 32px 0; }
.paragraph_table { display:table; width:100%; }
.paragraph_table ~ .paragraph_table { margin-top:48px; }
.paragraph_table .paragraph_cell { width:50%; display:table-cell; direction: ltr; }
.paragraph_table.alm .paragraph_cell, .paragraph_table.alm2 .paragraph_cell { vertical-align: middle; }
.paragraph_table .paragraph_cell:nth-child(odd) { padding-right:32px; }
.paragraph_table .paragraph_cell:nth-child(even) { padding-left:32px; }

/* .paragraph_table:nth-child(even) { direction: rtl; }
.paragraph_table:nth-child(even) .paragraph_cell:nth-child(odd) { padding-left:32px; padding-right:0; }
.paragraph_table:nth-child(even) .paragraph_cell:nth-child(even) { padding-right:32px; padding-left:0; }
.paragraph_table:nth-child(even) .paragraph_cell .paragraph_text { padding-right:64px; padding-left:0; } */
.paragraph_table.textonly .paragraph_cell, .paragraph_table.textonly .paragraph_cell .paragraph_text { padding-left: 0 !important; padding-right: 0 !important; }
.paragraph_table.textonly { display: grid; place-items: center; }
.paragraph_image img { width:100%; height:auto; box-shadow: 0px 5px 0px 0px #00000011; border-radius: 2em; }

@media only screen and (max-width: 1024px) {
    .main { grid-template-rows: 96px 1fr auto auto; }
    .main .slides { grid-template-columns: 1fr 1fr 1fr; }
    .topbar>div { grid-template-columns:auto 1fr; } 
    .topbar .logo { height:40px; }
    .topbar .menuwrapper { padding-top:2px; }    
    .topbar .bannerwrapper { display:none; }
    /* .bottom_upper .pagewidth { grid-template-columns: 1fr 30% 30%;} */
}

@media only screen and (max-width: 768px) { 

    .main>.content { padding:32px; }

    p, a { line-height: 1.2; letter-spacing: 0px; }
    .paragraph_table .paragraph_cell { display: block; width:100%; padding-left:0; padding-right:0; }
    .paragraph_table .paragraph_cell:nth-child(odd) { padding-left:0; padding-right:0; }
    .paragraph_table .paragraph_cell:nth-child(even) { padding-left:0; padding-right:0; }
    /* .paragraph_cell~.paragraph_cell { margin-bottom:32px; } */

    .paragraph_table { display: flex; flex-flow:column; }
    .paragraph_cell { order:1; }
    .paragraph_cell.paragraph_image { order:2; margin-top:24px; }


    .customers .pagewidth>div:first-child { padding:0; }
    .customers .pagewidth { display:grid; grid-template-columns: 1fr; grid-gap:0; padding:0 16px; }
    .customers>.pagewidth>div:last-child { overflow:hidden; }

    .bottom_upper { padding:16px; }
    .bottom_lower { padding:16px; }
    .bottom_lower .pagewidth { grid-template-columns: 1fr 1fr;}
    /* .bottom_lower .pagewidth>div:last-child { display:none; }
    .bottom_lower .pagewidth>div:nth-child(2) p { text-align:right !important; }
    .bottom_lower .pagewidth>div:nth-child(2) table { margin-left:auto; margin-right:0; } */
    .bottom_upper .pagewidth { grid-template-columns: 1fr 1fr; grid-gap:10px; }
    .bottom_upper .pagewidth>div:nth-child(1) { order:1; }
    .bottom_upper .pagewidth>div:nth-child(2) { order:3; }
    .bottom_upper .pagewidth>div:nth-child(3) { order:4; text-align: right; } .bottom_upper .pagewidth>div:nth-child(3) p { text-align:right !important; } .bottom_upper .pagewidth>div:nth-child(3) table { float:right; }
    .bottom_upper .pagewidth>div:nth-child(4) { order:2; }


    /* .bottom_upper .pagewidth>div:first-child { display:none; } */
    /* .bottom_upper .pagewidth>div:last-child { text-align:left; padding-top:14px; } */
    /* .bottom_upper .pagewidth>div:last-child p { text-align:left !important; } */
}

@media only screen and (max-width: 738px) {
    
    .main { grid-template-rows: 100px 1fr auto auto; }
    .main>.content { padding:32px 16px; }
    .main .customers_slides { grid-template-columns: 1fr 1fr; }
    .main .customers_slides .slide-item>div { max-width: 200px; }
    .page-template-page-forside .main .dual { grid-template-columns: 1fr;}    

    .page-template-page-forside2 .main { grid-template-rows: 64px auto 1fr auto auto; }
 
    .heroslider { padding:24px 0; }
    .heroslider .slide-item { grid-template-columns: 1fr;}
    
    .topbar>div { grid-template-columns:auto 1fr auto; } 
    .topbar .mobilemenubtn { display:block; }
    .topbar .menu { display:none; }        
    .topbar .banner h2.Underoverskrift { font-size:20px; }       

}

@media only screen and (max-width: 640px) {

    .main { grid-template-rows: 64px 1fr auto auto; }
    .topbar { padding:16px; height:auto; }
    .scrolled .topbar { padding:16px; }    
    .topbar .logo { height:32px; }
    .customers { padding:24px 0 0 0; }

    .bottom_upper .pagewidth { grid-template-columns: 1fr; }
    .bottom_upper .pagewidth>div:nth-child(1) { order:1; }
    .bottom_upper .pagewidth>div:nth-child(2) { order:3; text-align: left; } .bottom_upper .pagewidth>div:nth-child(2) p { text-align:left !important; } .bottom_upper .pagewidth>div:nth-child(2) table { float:left; }
    .bottom_upper .pagewidth>div:nth-child(3) { order:4; text-align: left; } .bottom_upper .pagewidth>div:nth-child(3) p { text-align:left !important; } .bottom_upper .pagewidth>div:nth-child(3) table { float:left; }
    .bottom_upper .pagewidth>div:nth-child(4) { order:2; text-align: left; } .bottom_upper .pagewidth>div:nth-child(4) p { text-align:left !important; } 

}

@keyframes fadeInUpRotatedLeft {
	0% { opacity: 0; transform: rotate(-3deg) translateY(20px); }
	100% { opacity: 1; transform: rotate(-3deg) translateY(0); }
}

@keyframes fadeInUpRotatedRight {
	0% { opacity: 0; transform: rotate(3deg) translateY(20px); }
	100% { opacity: 1; transform: rotate(3deg) translateY(0); }
}