@charset "utf-8";
/* CSS Document */

/*Importing fonts from word*/
@import url('https://fonts.googleapis.com/css2?family=Allan&family=Fredericka+the+Great&family=Graduate&family=Lato&family=Libre+Barcode+39+Text&family=Noto+Sans+JP&family=Roboto:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Faster+One&family=Libre+Barcode+39+Text&family=Uncial+Antiqua&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Faster+One&family=Ubuntu&family=Uncial+Antiqua&display=swap');

/****** Globals ****************/
/*generic elements prenet on most pages*/

html, body {
	box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
/*navigation background*/
header {
	background-color: aliceblue;
}
/*preparing generic divs*/
div, header, footer, body {
	border: none;
	margin: 0px;
	padding: 0px;
}
/*making sure all a look the same*/
a {
	cursor: pointer;
	text-decoration: none;
	color: black;
}
/*used for categories and prices*/
.label {
  	color: white;
  	padding: 3px 7px;
	display:inline-block;
}
/*limit the size of the container according to width*/
.size-container {
	width: 95%;
	margin: auto;
}

@media screen and (min-width: 1008px){
    .size-container {
        width: 1000px;
        margin: auto;
    }
}
/*resets the sizes after colomns*/
.clear:after {
  content: "";
  clear: both;
  display: table;
}
/*removes any horizontal line*/
.site-wrapper {
    overflow: hidden;
}


/***********************************************
*********** FONT MANAGEMENT ******************
**********************************************/
/*all in one place styling of all fonts in the 3 different breakpoints*/
/*MOBILE FIST*/
/*Main titles begin of sections*/
h1{
	text-align: center;/*aligns text in the centre*/
	font-family: Lato, Arial, "sans-serif";/* choose fonts from downloaded and provide altenatives*/
	font-size: 45px; /*size of fonts*/
	font-weight:bolder; /*makes fonts very bold*/
	text-shadow: 1px 1px 5px #FF0000; /* set shadow */
}

/* Head of lists (market, footer)*/
h2{
        font-family: Lato, Arial, "sans-serif";
        font-size: 26px;
        font-weight:bolder;
    }

/*SUbtitles*/
h3 {
    text-align: center;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 22px;
}

/*Title in cards*/
h4 {
	margin-top: 20px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding: 0;
	text-align: left;
}

/*text on images*/
 h5 {
    text-align: center;
    color: white;
    font-family: 'Hammersmith One', sans-serif; 
    font-size: 40px;
    letter-spacing: 3px;
    }

/*text of Labels*/
  h6 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
    letter-spacing: 2px;
}

/*general medium button*/
.btn-font-medium {
    color: white;
    padding: 10px 0px;
  	text-align: center;
	font-family: Lato, Arial, "sans-serif";
	font-size: 20px;
}
/*font to be used in medium size forms*/
form.frm-font-medium input[type=text] {
        font-size: 20px;
    }

/*font to be used in medium size forms button*/
form.frm-font-medium button {
        font-size: 20px;
}
/*fonts in the header options*/
.nav-options a {
    font-family: Lato, Arial, "sans-serif";
    font-size: 13px;
    margin: 0;
    padding: 0;
    }

/*general paragraph*/
p {
	margin-top: 20px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 0;
	text-align: left;
	letter-spacing: 1px;
}
/*general lists*/
li {
	margin-top: 20px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 0;
	text-align: left;
	letter-spacing: 1px;
}
/*quotes for the quote show*/
q {
	font-size: 4vw;/* set fonts to a percentage of window size*/
	font-style: italic;
}
/*paragraph in quote show (AUTHOR)*/
.quote p {
	text-align: center;
    font-family:fantasy;
    font-size: 2vw;
}
/*quote author*/
.quote-author {color: cornflowerblue;}

/*general button fonts*/
.btn {
    font-family: Lato, Arial, "sans-serif";
    font-size: 15px;
}
/*Product button*/
.ho-product-btn {
    font-family: Lato, Arial, "sans-serif";
   font-size: 16px;
}
/*blog button*/
.btn-blog-category {
    font-family: Lato, Arial, "sans-serif";
   font-size: 16px;
}
/*lists in footer*/
.lists-wrapper li{
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: center;
    margin: 0;
    padding: 4px;
}
/****SLide shows slides*****/
/*Slide 1-6 title*/
.ma-show-mtext1 {
    font-family: 'Fredericka the Great', cursive;
    font-size: 25px;
}
/*Slide 1 sub*/
.ma-show-stext1 {
    font-family: 'Allan', cursive;
    font-size:14px;
}
/*Slide 2 title*/
.ma-show-mtext2 {
    font-family: 'Bungee Inline', cursive;
    font-size: 25px;
}
/*Slide 2 sub*/
.ma-show-stext2 {
    font-family: Lato, Arial, "sans-serif";
    font-size:14px;
}
/*Slide 3 title*/
.ma-show-mtext3 {
    font-family: 'Libre Barcode 39 Text', cursive;
    font-size: 30px;
}
/*Slide 3-6 sub*/
.ma-show-stext3 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 1000;
    letter-spacing: 3px;
    font-size:14px;
}
/*Slide 4 title*/
.ma-show-mtext4 {
    font-family: 'Uncial Antiqua', cursive;
    font-size: 30px;
}
/*Slide 4 sub*/
.ma-show-stext4 {
    font-family: 'Ubuntu', sans-serif;
    font-size:14px;
}
/*Slide 5 title*/
.ma-show-mtext5 {
    font-family: 'Faster One', cursive;
    font-size: 30px;
}
/*Slide 5 sub*/
.ma-show-stext5 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: bolder;
    letter-spacing: 3px;
    font-style: italic;
    font-size:16px;
}
/*Default blog articles*/
#blogArticle-content-target {
	margin-top: 20px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 0;
	text-align: left;
	letter-spacing: 1px;
}

/*MEDIUM SCREENS 750px - 1008px*/
/*Main titles begin of sections*/
@media screen and (min-width: 750px) {
    
    h1{
        text-align: center;
        font-family: Lato, Arial, "sans-serif";
        font-size: 45px;
        font-weight:bolder;
        text-shadow: 2px 2px 5px #FF0000;
    }
    /*SUbtitles*/
    h3 {
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 25px;
    }
    /*Title in cards*/
    h4 {
        margin-top: 20px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 20px;
        text-align: left;
    }
    /*text on images*/
    h5 {
        text-align: center;
        color: white;
        font-family: 'Hammersmith One', sans-serif; 
        font-size: 35px;
        letter-spacing: 2px;
    }
    /*text of Labels*/
      h6 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 15px;
        margin: 0;
        padding: 0;
        letter-spacing: 2px;
    }
    /*general medium button*/
    .btn-font-medium {
        color: white;
        padding: 7px 6px;
        text-align: center;
        font-family: Lato, Arial, "sans-serif";
        font-size: 25px;
    }
    /*fonts in the header options*/
    .nav-options a {
        font-family: Lato, Arial, "sans-serif";
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
/*general paragraph*/
    p {
        margin-top: 20px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 16px;
        padding: 0;
        text-align: left;
        letter-spacing: 1px;
    }
    /*general lists*/
   li {
        margin-top: 20px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 16px;
        padding: 0;
        text-align: left;
        letter-spacing: 1px;
    }
    /*font to be used in medium size forms*/
    form.frm-font-medium input[type=text] {
        font-size: 15px;
    }
    /*font to be used in medium size forms button*/
    form.frm-font-medium button {
        font-size: 15px;
    }
    /*quotes for the quote show leave the browser use the set quote fonts*/
    q {
	   font-size: 2vw;
	   font-style: italic;
        text-align: center;
    }
    /*paragraph in quote show (AUTHOR)*/
    .quote p {
	   text-align: center;
        font-family:fantasy;
        font-size: 1.8vw;
    }
    /*general button fonts*/
    .btn {
        font-family: Lato, Arial, "sans-serif";
	   font-size: 16px;
    }
    /*Product button*/
    .ho-product-btn {
        font-family: Lato, Arial, "sans-serif";
	   font-size: 16px;
    }
    /* discalimar footing*/
    .disclaimer p {
        text-align: center;
	   padding: 5px;
	   font-family: 'Roboto', Arial, Helvetica, sans-serif;
	   color: white;
	   font-size: 0.6em;
    }
    /*blog button*/
    .btn-blog-category {
        font-family: Lato, Arial, "sans-serif";
        font-size: 18px;
    }
    /*links in the prodcuts in market page*/
    .prodPage-column a {
        font-family: Lato, Arial, "sans-serif";
        font-size: 14px;
        margin: 0;
        padding: 0;
    }
    /*lists in footer*/
    .lists-wrapper li{
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-align: center;
        margin: 0;
        padding: 3px;
    }
    /****SLide shows slides*****/
    /*Slide 1-6 title*/
    .ma-show-mtext1 {
        font-family: 'Fredericka the Great', cursive;
        font-size: 40px;
    }
    /*Slide 1 sub*/
    .ma-show-stext1 {
        font-family: 'Allan', cursive;
        font-size:20px;
    }
    /*Slide 2 title*/
    .ma-show-mtext2 {
        font-family: 'Bungee Inline', cursive;
        font-size: 40px;
    }
    /*Slide 2 sub*/
    .ma-show-stext2 {
        font-family: Lato, Arial, "sans-serif";
        font-size:20px;
    }
    /*Slide 3 title*/
    .ma-show-mtext3 {
        font-family: 'Libre Barcode 39 Text', cursive;
        font-size: 60px;
    }
    /*Slide 3-6 sub*/
    .ma-show-stext3 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 1000;
        letter-spacing: 3px;
        font-size:20px;
    }
    /*Slide 4 title*/
    .ma-show-mtext4 {
        font-family: 'Uncial Antiqua', cursive;
        font-size: 60px;
    }
    /*Slide 4 sub*/
    .ma-show-stext4 {
        font-family: 'Ubuntu', sans-serif;
        font-size:20px;
    }
    /*Slide 5 title*/
    .ma-show-mtext5 {
        font-family: 'Faster One', cursive;
        font-size: 60px;
    }
    /*Slide 5 sub*/
    .ma-show-stext5 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: bolder;
        letter-spacing: 3px;
        font-style: italic;
        font-size:25px;
    }
    /*Default blog articles*/
    #blogArticle-content-target {
	   font-size: 2vw;
	   font-style: italic;
        text-align: center;
    }
}

/*MEDIUM SCREENS ABOVE 1008px*/
/*Main titles begin of sections*/
@media screen and (min-width: 1008px) {
    h1{
        text-align: center;
        font-family: Lato, Arial, "sans-serif";
        font-size: 60px;
        font-weight:bolder;
        text-shadow: 2px 2px 5px #FF0000;
    }
    
   
    *SUbtitles*/
    h3 {
        text-align: center;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 23px;
    }
    /*Title in cards*/
    h4 {
	   margin-top: 20px;
	   font-family: 'Roboto', Arial, Helvetica, sans-serif;
	   font-size: 30px;
	   padding: 0;
	   text-align: left;
    }
    /*text on images*/
    h5 {
        text-align: center;
        text-align: center;
        color: white;
        font-family: 'Hammersmith One', sans-serif; 
        font-size: 35px;
        letter-spacing: 5px;
    }
    /*text of Labels*/
    h6 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 17px;
        margin: 0;
        padding: 0;
        letter-spacing: 2px;
    }
    
    .label {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 17px;
        margin: 0;
        padding: 3px 7px;
        letter-spacing: 2px;
    }
 /*general medium button*/
    .btn-font-medium {
        padding: 10px 5px;
        color: white;
        text-align: center;
        font-family: Lato, Arial, "sans-serif";
        font-size: 20px;
    }
    /*fonts in the header options*/
    .nav-options a {
        font-family: Lato, Arial, "sans-serif";
        font-size: 16px;
        margin: 0;
        padding: 0;
    }
    /*general paragraph*/
    p {
        margin-top: 20px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 20px;
        padding: 0;
        text-align: left;
        letter-spacing: 2px;
    }
    /*general lists*/
    li {
        margin-top: 20px;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 20px;
        padding: 0;
        text-align: left;
        letter-spacing: 2px;
    }
    /*Links in main navigation*/
    .navigation a {
	   color: black;
	   display: inline-block;
	   font-family: 'Roboto', Arial, Helvetica, sans-serif;
	   font-size: 25px;
	   margin: 0px 0 0 5px;
	   padding: 0px 0px 0px 3px;
	   letter-spacing: 3px;
    }
    /*Links in navigation sticky*/
    .navigation-sticky a{
	   font-family: lato, Arial, Helvetica, sans-serif;
	   font-size: 18px;
	   margin: 0px 0px 0 0px;
	   padding: 0px 0px 0px 5px;
        letter-spacing: 1px;
    }
    /*font to be used in medium size forms*/
    form.frm-font-medium input[type=text] {
        font-size: 15px;
    }
    /*font to be used in buttons medium size forms*/
    form.frm-font-medium button {
        font-size: 15px;
    }
    /*general medium button*/
    .btn {
        font-family: Lato, Arial, "sans-serif";
	   font-size: 18px;
    }
    /*Product button*/
    .ho-product-btn {
        font-family: Lato, Arial, "sans-serif";
	   font-size: 17px;
    }
    /*blog button*/
    .btn-blog-category {
        font-family: Lato, Arial, "sans-serif";
	   font-size: 22px;
    }
    /*links in the prodcuts in market page*/
    .prodPage-column a {
        font-family: Lato, Arial, "sans-serif";
        font-size: 16px;
        margin: 0;
        padding: 0;
    }
     /*lists in footer*/
    .lists-wrapper li{
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 17px;
        text-align: center;
        margin: 0;
        padding: 3px;
    }
    /****SLide shows slides*****/
    /*Slide 1-6 title*/
    .ma-show-mtext1 {
        font-family: 'Fredericka the Great', cursive;
        font-size: 60px;
    }
     /*Slide 1 sub*/
    .ma-show-stext1 {
        font-family: 'Allan', cursive;
        font-size:35px;
    }
    /*Slide 2 title*/
    .ma-show-mtext2 {
        font-family: 'Bungee Inline', cursive;
        font-size: 60px;
    }
    /*Slide 2 sub*/
    .ma-show-stext2 {
        font-family: Lato, Arial, "sans-serif";
        font-size:35px;
    }
    /*Slide 3 title*/
    .ma-show-mtext3 {
        font-family: 'Libre Barcode 39 Text', cursive;
        font-size: 60px;
    }
    /*Slide 3-6 sub*/
    .ma-show-stext3 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 1000;
        letter-spacing: 3px;
        font-size:35px;
    }
    /*Slide 4 title*/
    .ma-show-mtext4 {
        font-family: 'Uncial Antiqua', cursive;
        font-size: 60px;
    }
    /*Slide 4 sub*/
    .ma-show-stext4 {
        font-family: 'Ubuntu', sans-serif;
        font-size:35px;
    }
    /*Slide 5 title*/
    .ma-show-mtext5 {
        font-family: 'Faster One', cursive;
        font-size: 60px;
    }
    /*Slide 5 sub*/
    .ma-show-stext5 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: bolder;
        letter-spacing: 3px;
        font-style: italic;
        font-size:45px;
    }
}

@media screen and (min-width: 1300px) {
    .navigation a {
        color: black;
        display: inline-block;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 25px;
        margin: 0px 0 0 15px;
        padding: 0px 0px 0px 5px;
        letter-spacing: 2px;
    }

}

/************************************
******** Navigation ****************
************************************/

/*Wrapper of the navigation*/
.nav-wrapper {
    display: flex;/*flex grid system*/
    flex-direction: row nowrap; /* creates rows with no wrap */
}

/* The Modal (background) */
.full-page-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index:5; /* Sit on top */
  left: 0; /* all left*/
  top: 0; /* top of page */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5%; /* 5% from the top and centered */
    padding: 10px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    height: 80%;
    overflow: hidden;
}

.modal-content object{
    width: 100%;
    height: 100%;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;/* stays alway most right*/
  font-size: 28px;
  font-weight: bold;
}
/* hove on close or close lose focus*/
.close:hover, .close:focus {
  color: black;
  text-decoration: none;/*no undeline*/
  cursor: pointer;/* change cursor*/
}
/* column of flex container*/
/*hold logo image in header*/
.logo-img {
    flex-basis: 30%;/* size of column */
	padding-top: 15px;
	padding-bottom: 10px;
}
/* actual logo image in teh header*/
.logo-img img{
    width:220px; /* fix size for mobiles */
	display: block;
	bottom: 0; 
}
/* extra breakpoint for the logo*/
@media screen and (min-width: 670px) {
    .logo-img img {
        width: 270px;
        display: block;
        bottom: 0; 
    }
}
/* ,ax screen size logo image*/
@media screen and (min-width:1008px) {
    .logo-img img {
        width: 300px;
	   display: block;
	   bottom: 0;
    }
}
/* second column of header*/
.nav-central-section {
	flex-basis: 70%;/* starting column size*/
	padding: 20px;
	margin: 0 0;
}
/* at this size the main card is hidden*/
#navMain-cart {
    display:none;
}
/* top line of the column 2 in the main header*/
.top-div, .mid-line {
    display: none; /*hidden*/
	width: 100%;
}

.mid-line {
	padding:  0;
	margin:  0;
}
/* subscribe container header*/
.subscribe {
	text-align: center;
	padding: 2px;
	margin: 5px;
}
/* subscibe form imput text header*/
form.fm-subscribe input[type=text] {
  padding: 5px;
  border: 1px solid grey;
  float: left;
  width: 70%; /* percentage of text to button */
  background: #f1f1f1;
}
/* subscribe butoon main header*/
form.fm-subscribe button {
  float: left;/* always stay on most left*/
  width: 30%;/* ration button-text */
  padding: 5px;
  background-color: red;
  color: white;/* text colour*/
  border: 1px solid grey;
  border-left: none;/* remove border on left*/
  cursor: pointer;
}
/* form subscribe main header*/
form.fm-subscribe button:hover {
  background-color: chocolate;/* change colour on hover*/
}
/* navigation links container*/
.navigation-wrapper {
	width: 100%;/* all width of container*/
	padding-top: 10px;
	bottom: 0;
}
/* option in navigation*/
.nav-options {
	float: right;/* most right*/
}
/* container of options*/
.nav-options div {
	display: inline-block;
	margin: 0 0px 0 10px;	
}
/* container of the links of the navigation*/
.navigation-wrapper a {
    display: none;/* hidden at this screen-size*/
}
/* navigation options on hover effect*/
.nav-options a:hover {
	text-decoration: underline;/* underline text*/
}
/* container for the subscribe bar*/
.search-wrapper {
	float: right;
}
/* actual navigaiton*/
.navigation {
	float: right;/* always most right of container*/
}
/*navigation list*/
.navigation ul {
	display: inline-block;
	padding: 0;
	margin: 0;
}

/* hove on navigation links*/
.navigation a:hover {
	color: red;
	font-weight: 700;
	text-shadow: 0 0 3px #FF0000; /* red shadow*/
}

/* different colour for active page*/
.navigation a:active {
    background-color: none;
}
/* active page undelined*/
.myact {
    text-decoration-line: underline;
}
/* icon of the menu in navigation main*/
.navigation .icon {
    display: inline-block;/* in line with the cart*/
    float: right; /* stay always on right of cart*/
    margin-top: 25%;
    margin-left: 25px;
    font-size: 25px; /* size of the icon*/
}
/* icon of the cart in navigation main*/
.navigation .icon2 {
    display: inline-block;
    float: right;
    margin-top: 25%;
    font-size: 25px;
}
/* navigation main in medium screens*/
@media screen and (min-width: 750px) {
    /* row of subscription bar */
    .mid-line {
        display: block;
        float: left; /* stay all left*/
    }
    /* icon of menu in main navigation*/
    .navigation .icon {
        display: inline-block;
        float: right;
        margin-top: 20%;
        margin-left: 30px;
        font-size: 40px;
    }
/* icon of cart in main navigaiton*/
    .navigation .icon2 {
        display: inline-block;
        float: right;
        margin-top: 20%;
        margin-right: 30px;
        font-size: 40px;
    }
}

/* main navigation on big screens*/
@media screen and (min-width: 1008px) {
    /*navigation links*/
    .navigation a {
        display: inline-block;
    }
    /*top lines in main menu*/
    .mid-line, .top-div {
        display: block;
    }
    /*icon of the menu bar */
    .navigation .icon {
        display: none;/* disabled on these screens*/
    } 
    /* icon of the cart*/
    .navigation .icon2 {
        display: none;
    }
}
/**** when menu bars icon is clicked this class is added to navigation****/
  .navigation.responsive {
      position: fixed; /* sticky doesn't scroll */
      z-index: 50; /* stay on top of all other images*/
      top: 0; /* top corner*/
      left: 0;
      height:100%; /* full heaihg of window*/
      width: 250px;/* fix width for smallest devices*/
      background-color:rgb(10,10,10); /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding: 40px 0px 20px 0px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
    }
    /* icons links in responsive menu*/
    .navigation.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    /* links in responsive menu*/
    .navigation.responsive a {
        float: none;
        display: block;
        text-align: left;
        font-size: 18px;
        background-color: black;
        color: white;
        margin: 5px;
        padding: 3px;
        border: 1px solid gray;
    }

/**************Sticky Nav*****************/

#sticky-header {
	background-color: aliceblue;
	width: 100%;
	visibility: hidden; /* invisible unless activated by js funciton*/
	z-index: 2; /* on top of normal content*/
	position: fixed; /* sticke header*/
	top: 0px;
	padding: 0px 0px 0px 10px;
	transition: 0.0s; /* transitions effect not playing well*/
}
/* logo container size for smallest device sticke header*/
.logo-wrapper-sticky {
    display: inline-block;
	width: 25%;
    margin: 0;
}
/* smaller image for small screen*/
.logo-img-small {
    width: 100%; /* all container space*/
}

.logo-img-small img {
    width: 190px;
}
/* middle section of the sticky header*/
.middle-section-sticky {
	width: 75%;
    float: right;
    position: relative; /* set a osition relative to screen*/
    top: 20px;
}

/*container of the cart icon*/
#navMain-cart-sticky {
    display: inline-block; /* in line with the bars menu*/
    float: right;
    width: 50px;
    margin-top: 15px;
    margin-right: 7%;
    margin-left: 0;
    font-size: 25px; /* size of the icon*/
}

/* effect on hover of sticky menu links*/
.navigation-sticky a:hover{
	color: red;
	font-weight: 500;
	text-shadow: 0 0 2px #FF0000; /* red shadow on hover*/
} 

/* navigation links hidden in small size screens*/
.navigation-sticky a {
    display: none;
}

.search-wrapper-sticky {
    display: none;
}

/* navigation container sticky menu*/
.navigation-sticky {
    float: right;
}
/* bars menu icon sticky menu*/
.navigation-sticky .icon {
    display: inline-block;
    font-size: 20px;
    margin-top: 18px;
    padding-right: 20px;
}
    
/***** Sticke menu styling medium size screens*/
@media screen and (min-width: 750px) {
    /* subscribe bar centre*/
     .search-wrapper-sticky {
        float: none;
        display: inline-block;
        margin: 10px 0 0px 15%; /* almost centre*/
        width:50%;
    }
    /* container icon cart*/
    #navMain-cart-sticky {
        display: inline-block;
        float: right;
        width: 50px;
        margin-top: 15px;
        margin-right: 7%;
        margin-left: 0;
        font-size: 30px
    } 
    /* icons of the navigation sticky*/
    .navigation-sticky .icon {
        display: inline-block;
        font-size: 30px;
        margin-top: 16px;
    }
}

/***** Sticky menu wide screens */
@media screen and (min-width: 1008px) {
    /* navigation links*/
    .navigation-sticky a {
        display: inline-block;
    }
    /* navigation container sticky menu*/
    .navigation-sticky {
        float: none;
        display: inline-block;
        padding: 0;
        margin: 20px 0px;
    }
    /* container subscribe bar*/
    .search-wrapper-sticky {
        float: right;
        display: inline-block;
        margin: 10px;
        width: 40%;
    }
    
    /* hide the icons on this scren size*/
    .navigation-sticky .icon {
        display: none
    }
    /* enable main cart icon*/
    #navMain-cart-sticky {
        display: inline-block;
        float: right;
        width: 50px;
        margin-top: 15px;
        margin-right: 0;
        margin-left: 25px;
        font-size: 25px
    }
}


/******* Side Panel ********/
/* The sidepanel menu */
.sidepanel {
  height: 100%; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 5; /* Stay on top */
  top: 0;
  right: 0;
  background-color: white; /* Black*/
  overflow: auto; /* Disable horizontal scroll */
  padding: 60px 0px 20px 0px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute; /* referers to previous positioned element*/
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* table for the shopping list*/
#items-table {
    padding: 20px; /* content 20 px from all sides*/
}

/******* Main Slogan ************/
.fm-subscribe-slogan {
	width: 65%;
	margin: auto;
	margin-bottom: 20px; /* leave some space below*/
}
/* forms medium size*/
form.fm-subscribe-slogan input[type=text] {
  padding: 5px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.fm-subscribe-slogan button {
  float: left;
  width: 80%;
  padding: 5px;
  background-color: red;
  color: white;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
	height: 100%;
}
/* resize the form in bigger screens*/
@media screen and (min-width: 750px) {
    
    form.fm-subscribe-slogan input[type=text] {
      padding: 5px;
      border: 1px solid grey;
      float: left;
      width: 75%;
      background: #f1f1f1;
    }
    
    form.fm-subscribe-slogan button {
        width: 25%;
    }
}
/* change colour of the form*/
form.fm-subscribe-slogan button:hover {
  background-color: chocolate;
}
/**************Carousel NO JAVASCRIPT ***************
*****not real carousel just fix images***************/

.ho-carousel-wrapper {
	position: relative;/* set position relative */
}

.ho-carousel-container {
  width:  100%; /* all screen width*/
  position: relative; /* positioning relative*/
  margin: auto; /* centres the container*/
	display: flex; /* creates a flex container*/
	flex-flow:  column; /* display content in content for small screens*/
}
/* container of each image*/
.ho-carouselImg-wrapper {
    width:100%;
	margin: auto;
	padding: 0px;
	position: relative;
    overflow: hidden; /* remove overflow */
    background-color: black; /* background black for opacity effect*/
}

.ho-carouselImg-wrapper img {
	width: 100%; /* all size of conatiner*/
    opacity: 1; /* full opacity*/
    transition: opacity .7s; /* set transition effect and timing*/
}
/* effect darkning on hover*/
.ho-carouselImg-wrapper img:hover {
	opacity: 0.5; /* semitransparent on black background*/
}

/* display medium screens*/
@media screen and (min-width: 750px) {
    .ho-carousel-container {
      width:  100%;
      position: relative;
      margin: auto; /* centers content*/
        display: flex; /* creates flex container*/
        flex-flow:  row nowrap; /* these screens will show horizontal display*/
        justify-content:space-around; /* space images closer to each other*/
    }
    
    .ho-carouselImg-wrapper {
	   flex-basis: 25%;
	   margin: 5px;
	   padding: 0px;
	   position: relative;
        overflow: hidden;
    }
    
    .ho-carouselImg-wrapper img {
        width: 500px;
        display: block;
        position: relative;
        left: -40%;
    }
}
/* diffent breapoint for image display*/
@media screen and (min-width: 1450px) {
    .ho-carouselImg-wrapper img {
        width: 750px; /* fix size better effect on different screens*/
        display: block;
        position: relative;
        left: -40%;/* moving the image to keep it centered */
    }
}

/* Place text in the middle of the image */
.ho-carouselText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
/* place the container of the link styled as button on image*/
.btn-ho-carousel {
    width:100%;
    left: 50%;
	border: none;
  	outline: 0;
  	background-color: orangered;
  	cursor: pointer;
	border-radius: 3px; /* round corners*/
	transition: transform .3s; /* transition on button size*/
}
/* display show text on medium screens*/
@media screen and (min-width: 750px) {
    /* centering the text*/
    .ho-carouselText {
        min-width: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
/* display show text on large screens*/
@media screen and (min-width: 1008px) {
    .btn-ho-carousel {
        position: absolute;
        left: 20%;
        margin: 0;
        width: 60%;
        border: none;
        outline: 0;
        background-color: orangered;
        cursor: pointer;
        border-radius: 3px;
        transition: transform .3s
    }
    
    .ho-carouselText {
        min-width: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
/* tranform effect on hover*/
.btn-ho-carousel:hover {
	transform: scale(1.2);
}

.ho-blogImg-wrapper {
  position: relative;
}

.ho-servImg-wrapper {
  position:relative;
}

.ho-podImg-wrapper {
  position: relative;
}

.ho-prodImg-wrapper {
  position: relative;
}

/**************Quote show***********************************
reference code: /*https://www.hyde-design.co.uk
************************************************************/

/* Slideshow container */
.quote-slideshow-container {
	width: 100%;
  	position: absolute;
  	background: #f1f1f1f1;
	overflow: hidden;
	height: 5.5%;
}

.quote-slideshow-container img {
    width:100%;
}

@media screen and (min-width: 750px) {
    .quote-slideshow-container {
        height: 22%;
    }
}

/* Quotes */
.quote {
	background: #f1f1f1f1;
    top: 0;
  	position: absolute;
  	padding: 10px;
  	text-align: center;
	width: 100%;
	animation: quotes-slides 15s infinite;	/* repeat the animation in loop*/
	opacity: 0; /* starting with fully transparent*/
	-webkit-animation-name: quotes-slide; /* name of the animation*/
	-webkit-animation-duration: 15s; /* duration of the animation*/
	-webkit-animation-duration: infinite; /* repeat in loop*/
}

/* setting the keyframes for the animation*/
@keyframes quotes-slide {
	25%{
		opacity:1; /* full opaque*/
	} 
	40%{
		opacity:0; /* fully transparent*/
	}
}

@-webkit-keyframes quotes-slide {
	25%{
		opacity:1;
	} 
	40%{
		opacity:0;
	}
}
/* first quote*/
.quote-child1 {
	animation-delay: 0s; /* first to start */
	-webkit-animation-delay: 0s;
}
/* quote 2 */
.quote-child2 {
	animation-delay: 5s; /* start delay*/
	-webkit-animation-delay: 5s;
}
/* quote 3 */
.quote-child3 {
	animation-delay: 10s; /* start delay*/
	-webkit-animation-delay: 10s;
}


/***************section Featured Video ********************/

.featured-video-wrapper{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 120px;
	text-align: center;
}

.featured-video-container{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/***************Latest Blogs**************/
.latest-blog-wrapper {
    width: 100%;
    margin: 20px 0 0 0; /* margin only on left */
}

.label-blog {
	background-color: black;
}

.latest-blog-img {
    margin-top: 10px;
	display: block;
	width: 100%;
    overflow: hidden;
}

.latest-blog-img img {
	width: 500px;
    display: block;
    position: relative;
    left: -18%;
    
}

.latest-blog-card {
        background-color: white;
        display: block;
        position: relative;
        padding: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

@media screen and (min-width: 750px) {
    .latest-blog-wrapper {
        position: relative;
        width: 100%;
        margin: 70px 0 0 0;
    }
    
    .latest-blog-img {
        margin-top: 30px;
	   display: inline-block;
	   width: 50%;
        overflow: hidden;
    }
    
    .latest-blog-img img {
	   width: 600px;
        display: block;
        position: relative;
        left: -20%
    }

    .latest-blog-card {
        background-color: white;
        display: inline-block;
        position: absolute;
        top: 10%;
        left: 45%;
        padding: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
}

.divider {
	margin: 20px 20px 10px 0;
	display: block;
	width: 30%;
	left: 0;
}

.btn {
	border: none;
  	outline: 0;
  	display: inline-block;
  	padding: 10px 25px;
  	color: white;
  	background-color: orangered;
  	text-align: center;
  	cursor: pointer;
	border-radius: 3px;
}

/**************SECTION: Latest Meals Section *************/

.latest-meal-wrapper {
	width: 100%;
    margin: 20px 0 0 0;
}

.label-meal {
	background-color: gray;
}

.latest-meal-img {
	margin-top: 10px;
	display: block;
	width: 100%;
    overflow: hidden;
}

.latest-meal-img img {
    width: 500px;
    display: block;
    position: relative;
    left: -18%;
}


.latest-meal-card {
	background-color: white;
        display: block;
        position: relative;
        padding: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 750px) {
    .latest-meal-wrapper {
        position: relative;
        width: 100%;
        margin: 90px 0 0 0;
    }

    .label-meal {
        background-color: gray;
    }

    .latest-meal-img {
        display: inline-block;
        width: 33%;
        overflow: hidden;
    }

    .latest-meal-img img {
        display: block;
        position: relative;
        width: 450px;
        left: -20%;
    }


    .latest-meal-card {
        background-color: white;
        display: inline-block;
        position: absolute;
        top: 10%;
        left: 30%;
        /*border: 1px dotted black;*/
        padding: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
}


/***************SECTION: Latest Products******************/
.column-ho-market {
  margin-bottom: 16px;
  padding: 0 8px;
}

.ho-product-card{
	position: relative;
	width: 80%;
    margin: auto;
}

@media screen and (min-width: 750px) {
    .column-ho-market {
        float: left;
        width: 33.3%;
        margin-bottom: 16px;
        padding: 0 8px;
    }

    .ho-product-card{
	       position: relative;
	       width: 100%;
    }
}

.ho-product-img-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 20px;
}

.ho-product-img-wrapper img{
	display: block;
	width: 70%;
	margin: auto;
	cursor: pointer;
	transition: transform .3s;
}

.ho-product-img-wrapper img:hover{
	transform: scale(1.2) 
}


.ho-productBtn-wrapper {
	margin: 20px;
}
.ho-product-btn {
	display: block;
    width:70%;
	margin: auto;
	border-radius: 20px;
	background-color: transparent;
	border: 2px solid orangered;
	color: black;
}

.ho-product-btn:hover {
	background-color: orangered;
	color: white;
}


/***************Footer**********************************/
/* container of the lists*/
.lists-wrapper{
	display: flex; /* flex container*/
	flex-direction: column; /* display columns in small screens*/
}

@media screen and (min-width: 750px) {
    .lists-wrapper{
	   display: flex;
	   flex-direction: row; /* dispaly in row in medium/large screens*/
    }
}

footer {
	background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255,200,150,0.5));
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}
.footer-top {
    margin: 10px;
	border-top: 1px dotted black;
	border-bottom: 1px dotted black;
}

.resources-wrapper, .details-wrapper {
	flex-basis: 50%;
	text-align: center;
}

.resources-wrapper ul, .details-wrapper ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.lists-wrapper a:hover {
	color: orangered;
	font-weight: bold;
}
.copyright {
	text-align: center;
	padding: 0px;
    margin: 0;
    font-size: 1em;
}

.disclaimer {
        display: none;
        background-color: black;	
    }

@media screen and (min-width: 750px) {
    .disclaimer {
        display: block;
        background-color: black;	
    }
}

/******Sticky Socials************/

/* No sticky bar in smallest screens*/
.icon-bar {
        display: none;
}

@media screen and (min-width: 750px) {
    .icon-bar {
        display: block;
        position: fixed; /* sticky on screen*/
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
	   z-index: 40; /* top of most things except menu*/
    }

    .icon-bar a {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: white;
      font-size: 20px;
    }

    .icon-bar a:hover {
      background-color: #000;
    }

    .facebook {
      background: #3B5998;
      color: white;
    }

    .twitter {
      background: #55ACEE;
      color: white;
    }

    .google {
      background: #dd4b39;
      color: white;
    }

    .linkedin {
      background: #007bb5;
      color: white;
    }

    .youtube {
      background: #bb0000;
      color: white;
    }
}