/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/* --------------------------------------------------------------------------------------------- */
/* Generic                                                                                       */
/* --------------------------------------------------------------------------------------------- */
html {
    font-family: "Work sans", sans-serif; 
	/* font-family: Times, "Times New Roman", Georgia, serif; */
    font-size: 18px;
}

body 
{
    display:  -ms-grid;
    display:  grid;
    -ms-grid-rows: -webkit-min-content auto auto;
    -ms-grid-rows: min-content auto auto;
    grid-template-rows: -webkit-min-content auto auto;
    grid-template-rows: min-content auto min-content;
}

body, input, textarea, button, select 
{
    font-size: 16px;
    font-family: "Work Sans",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #3d4246;
    line-height: 1.5;
}

.pageHeader
{
	display: grid;
	-webkit-box-align: center;
	-ms-grid-align: center;
	align-items: center;
	border: 1px solid white;
	grid-auto-rows: auto;
	grid-auto-flow: row;
	border-bottom: 1px solid #e8e9eb;
	
}

.madeInFrance.tooltip
{
	display: none;
}

.madeInFrance img
{
	margin: auto;
}

.headerSide
{
	text-align: center;
    align-self: center;
    grid-area: side;
	display: none;
}

.pageFooter
{
	text-align: center;
	margin-top: 2em;
}

.pageFooter > * + *
{
	margin-top: 1em;
}

@media only screen and (min-width: 1024px) 
{
	.pageHeader
	{
		justify-items: center;
		grid-template-areas: "madeIn logoNovac side" "madeIn navBar side";
		grid-template-columns: 150px 1fr 150px;
	}
	
	.madeInFrance.tooltip
	{
		grid-area: madeIn;
		display: block;
	}

	.logoNovac
	{
		padding-top: 30px;
		grid-area: logoNovac;
		justify-items: center;
		justify-content: center;
	}

	.mainNav
	{
		grid-area: navBar;
	}
	
	.headerSide
	{
		display: block;
		grid-area: side;
	}
}

h1, h2, h3 {
	margin: 0 0 17.5px;
    font-family: "Work Sans",sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

h1
{
	font-size: 34px;
}

h2 
{
    font-size: 26px;
	justify-self: stretch;
	text-align: center;
}

p {
	max-width: 720px;
	color: #69727b;
}

.article-text p{
		margin-left: auto;
		margin-right: auto;
}

img.hero-img {
    width: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

article{
	padding-top: 55px;
	padding-bottom: 55px;
}

a{
	text-decoration: inherit;
	color: inherit;
}
a::visited{
	color: inherit;
}


.styledlink{
	text-decoration: underline;
}

/* --------------------------------------------------------------------------------------------- */
/* LogoNovac                                                                                     */
/* --------------------------------------------------------------------------------------------- */

.logoNovac {
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    place-self: center;
}


/* --------------------------------------------------------------------------------------------- */
/* MainNav                                                                                       */
/* --------------------------------------------------------------------------------------------- */
nav.mainNav 
{
    display: grid;
    justify-items: center;
	justify-content: center;
	grid-auto-flow: row;
	margin: 0;
}

a.navlink 
{
    padding: 16px;
	text-decoration: none;
	color: #25282b;
}

a.navlink>img
{
	width: fit-content;
	display: inline-block;
}

a.navlink:visited 
{
    color: #25282b;
}

a.navlink:hover 
{
    color: black;
}

@media only screen and (min-width: 1024px) 
{
	nav.mainNav 
	{
		display: block;
		margin: 25px 0;
		padding-bottom: 22px;
	}
}

/* --------------------------------------------------------------------------------------------- */
/* OnePage                                                                                       */
/* --------------------------------------------------------------------------------------------- */

.pagePanel{
    /*display: grid;*/
    grid-column: auto;
    grid-template-rows: min-content auto auto;
	grid-auto-rows: auto;
	padding: 2px 16px;
	min-height: 100vh;
	max-width: 1024px;
	margin: auto;
	margin-top: 55px;
	margin-bottom: 55px;
}


/* --------------------------------------------------------------------------------------------- */
/* Range                                                                                         */
/* --------------------------------------------------------------------------------------------- */
nav.range 
{
	margin: auto;
	text-align: center;
}

nav.slideshow-container {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: Slide;
}


.button
{
	display: inline-block;
	padding: 16px;
	border: 1px solid #25282b;
	background-color: white;
	color: #25282b;
	transition: background-color 1s, color 1s;
	width: fit-content;
}

.button:hover
{
	cursor: pointer;
	color: white;
	background-color: #25282b;
}

.more{
	background-color: #2196F3;
	color: white;
}

.cart{
	background-color: #f44336;
	color: white;
	border-color: #f44336;
}
.cart:hover{
	background-color: #D42316;
}


/* --------------------------------------------------------------------------------------------- */
/* Range                                                                                         */
/* --------------------------------------------------------------------------------------------- */
a.oknife {
    background-image: url("../img/Oknife_ensemble_1.jpg");
}
a.osafe {
    background-image: url("../img/osafe.jpg");
}
a.roasteasy {
    background-image: url("../img/roasteasy.jpg");
}

/* --------------------------------------------------------------------------------------------- */
/* Cards                                                                                         */
/* --------------------------------------------------------------------------------------------- */
.card-container {
	display: grid;
	padding: 2px 16px;
	grid-gap: 1em;
	grid-template-columns: repeat(4, auto);
	justify-content: center;
	justify-items: center;
}

.card{
	display: grid;
	position: relative;
}

.card-header{
	grid-area: head;
}

.card-img{
	grid-area: img;
}

.card-img>img{
	width: 100%;
}

.card-description{
	grid-area: txt;
}

.card-inline{
	grid-area: inline;
}

.card-footer{
	grid-area: foot;
}

.card-cancel{
	grid-area: cancel;
	text-align: end;
    margin: 0;
    padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
	color: black;
}

.card-cancel::visited{
	color: black;
}

.card-cost{
	grid-area: cost;
}

.card-power{
	grid-area: power;
}

.card-link{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 2;
}
.shadowCard
{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.shadowCard:hover 
{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* --------------------------------------------------------------------------------------------- */
/* Vulkanus Layout                                                                               */
/* --------------------------------------------------------------------------------------------- */

.cardLayout-vulkanus 
{
	grid-template-areas:
		"img"
		"head"
		"cost";
	background: white;
	color: #3d4246;
	max-width: 250px;
	text-align: left;
}

.cardLayout-vulkanus>.card-description, 
.cardLayout-vulkanus>.card-footer,
.cardLayout-vulkanus>.card-power,
.cardLayout-vulkanus>.card-cancel,
.cardLayout-vulkanus>.card-inline
{
	display: none;
}

.cardLayout-vulkanus>.card-cost
{
	color: #69727b;
}

.cartCard-img {
    max-width: 150px;
}

/* --------------------------------------------------------------------------------------------- */
/* cartProcess                                                                                   */
/* --------------------------------------------------------------------------------------------- */
#cartProcess
{
	max-width: 1024px;
	margin: auto;
	padding: 2px 16px;
}

a.step
{
	color: inherit;
	text-decoration: none;
}


/* --------------------------------------------------------------------------------------------- */
/* Form and input styling                                                                        */
/* --------------------------------------------------------------------------------------------- */
.form-container {
  padding: 20px;
}

form.formCart {
    display: grid;
	 justify-items: center;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #d9d9d9;;
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

.customInput>input[type=number]
{
}

.formCart-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.formCart-actions * {
    margin-left: 10px;
}

input.cartCard-quantity {
    width: 60px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}


.inputWrapper{
	display: inline-block;
	float: left;
    padding: 2px;
	width: 100%;
}

.inputWrapper.w50{
    width: 50%;
}

/* --------------------------------------------------------------------------------------------- */
/* Table Styling                                                                                 */
/* --------------------------------------------------------------------------------------------- */
table.cartResume, table.orderTable {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    border-spacing: 0;
	margin-bottom: 22px;
}

.cartResume tr, .orderTable tr {
    border-bottom: 1px solid #e8e9eb;
    /* padding: 22px; */
}

.cartResume td, .orderTable td {
    padding-top: 22px;
    padding-bottom:  22px;
}

/* --------------------------------------------------------------------------------------------- */
/* Tooltip                                                                                       */
/* --------------------------------------------------------------------------------------------- */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 360px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 10px 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media only screen and (min-width: 1024px) 
{
	/* Tooltip text */
	.tooltip .tooltiptext 
	{
	  top: 125%;
	  left: 50%;
	  margin-left: -60px;
	}
	
	/* Tooltip arrow */
	.tooltip .tooltiptext::after {
	  left: 75px;
	  margin-left: -5px;
	}
}

/* --------------------------------------------------------------------------------------------- */
/* Flag                                                                                          */
/* --------------------------------------------------------------------------------------------- */

.flag
{
	margin: auto;
}

/* --------------------------------------------------------------------------------------------- */
/* Misc                                                                                          */
/* --------------------------------------------------------------------------------------------- */
.contact-postal {
  padding: 20px;
}
@media only screen and (min-width: 1024px) 
{
    nav.slideshow-container 
    {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }
	
	article.product 
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: min-content auto;
		grid-template-areas:
			"header header"
			"slideshow text";
	}
	
	.product-header{
			grid-area: header;
	}
	.product-header>img{
		margin: auto;
	}
	.product-slideshow{
			grid-area: slideshow;
	}
	.product-text{
			grid-area: text;
			margin-left: 32px;
	}
	
}