/*----RESPONSIVE GRID----*/
.responsive-grid {
/* Sets 12 column grid */
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
.small-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(80px, 1fr));
}

.single-column {
	margin-left: auto;
    margin-right: auto;
}

/*----MOBILE----*/
.column-grid, .column-grid-wide {
    display: grid;
	grid-template-columns: 100%;
    justify-content: left;
}
@media only screen and (max-width: 600px) {
	.narrowscreen, .widescreen {
		/* margin: 0px 20px 0px 20px;*/
	}
	.single-column {
		width: calc(100% - 40px);
		/* 400 */
		max-width: 370px;
	}
}
/*----TABLET----*/
@media only screen and (min-width:600px) and (max-width: 1200px) {
	.column-grid {
		grid-template-columns: repeat(auto-fill,minmax(370px, 1fr));
	}
	.column-grid-wide {
    display: grid;
	grid-template-columns: 100%;
    justify-content: left;
	}
	
	.narrowscreen, .widescreen {
		/* margin: 0px 20px 0px 20px; */
	}
	.single-column {
		/* 400 */
		width: 370px;
	}
}
/*----DESKTOP----*/
@media only screen and (min-width:1200px) {	
	.column-grid {
		grid-template-columns: repeat(auto-fill,minmax(370px, 1fr));
	}
	.column-grid-wide {
		grid-template-columns: repeat(auto-fill,minmax(470px, 1fr));
	}

	.narrowscreen, .narrowmenu	{
        margin-left: auto;
        margin-right: auto;
		/* Width lower for smooth transition*/
        max-width: 1224px;
    }
	.widescreen	{
		margin: 0px 0px 0px 0px;
	}
	.single-column {width: 500px;}
}

/*----VERTICAL NAV MENUS---- REMOVE FLEX-COLUMN AFTER REVIEWS.......*/
.column-flex, .flex-column1 {
	display: flex;
	flex-direction: column;
    justify-content: center;
}

/*----HEADER----*/

.header-menu {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}
.header-location, .header-location-code {
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
}
.header-screen {
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
	visibility: hidden;
}
.header-logo {
	grid-column: 3 / span 8;
	grid-row: 1 / span 1;
}
.header-admin {
	grid-column: 10 / span 1;
	grid-row: 1 / span 1;
}
.header-user {
	grid-column: 11 / span 1;
	grid-row: 1 / span 1;
}
/* Modal Quick Login */
.user- {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}

.user-email {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.user-password {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.user-login {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.user-terms {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.user-register {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.user-forgot-password {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}

.user-logout {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.user-change-password {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}


.header-list, .header-list-count {
	grid-column: 12 / span 1;
	grid-row: 1 / span 1;
}
/* Sets header modal full width border and aligns to left or right*/
.header-menu> nav> ul, .header-menu> form> ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
}
/* Sets nav grid parameters */
.header-nav {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
/* Sets main nav menu to horizontal and centers all contents */
.header-nav> ul {
	display: flex;
	flex-direction: row;
   	justify-content: center;	
}
/*----DESKTOP----*/
@media only screen and (min-width:1200px) {
/* Sets modal to half width for desktop and restricts max width for widescreen*/
    .header-menu> nav> ul, .header-menu> form> ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 50vw;
        max-width: 900px;
	}
    .header-wishlist> nav> ul, .header-wishlist> form> ul {
        position: absolute;
        top: 0;
        right: 0;
        width: 50vw;
        max-width: 900px;
    }
	
/* Sets for screen options */
	.header-logo {
	grid-column: 4 / span 6;
	grid-row: 1 / span 1;
}
	.header-screen {
	visibility: visible;
	}
}

/* Set row reponsive grid */
.row-1 {
	grid-row: 1 / span 1;
}
.row-2 {
	grid-row: 2 / span 1;
}
.row-3 {
	grid-row: 3 / span 1;
}
.row-4 {
	grid-row: 4 / span 1;
}
.row-5 {
	grid-row: 5 / span 1;
}
.row-6 {
	grid-row: 6 / span 1;
}
.row-7 {
	grid-row: 7 / span 1;
}
.row-8 {
	grid-row: 8 / span 1;
}
.row-9 {
	grid-row: 9 / span 1;
}
.row-10 {
	grid-row: 10 / span 1;
}
.row-11 {
	grid-row: 11 / span 1;
}
.row-12 {
	grid-row: 12 / span 1;
}
.row-13 {
	grid-row: 13 / span 1;
}
.row-14 {
	grid-row: 14 / span 1;
}
.row-15 {
	grid-row: 15 / span 1;
}
.row-16 {
	grid-row: 16 / span 1;
}
.row-17 {
	grid-row: 17 / span 1;
}
.row-18 {
	grid-row: 18 / span 1;
}
.row-19 {
	grid-row: 19 / span 1;
}
.row-20 {
	grid-row: 20 / span 1;
}
.row-21 {
	grid-row: 21 / span 1;
}
.row-22 {
	grid-row: 22 / span 1;
}
.row-23 {
	grid-row: 23 / span 1;
}
.row-24 {
	grid-row: 24 / span 1;
}
.row-25 {
	grid-row: 25 / span 1;
}
.row-26 {
	grid-row: 26 / span 1;
}
.row-27 {
	grid-row: 27 / span 1;
}
.row-28 {
	grid-row: 28 / span 1;
}
.row-29 {
	grid-row: 29 / span 1;
}
.row-30 {
	grid-row: 30 / span 1;
}


/*----Move under media----*/
.heading-product-image{
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
	display: flex;
    justify-content: center;
	align-items: center;
}
.heading-product-headline {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.heading-product-lead {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.heading-product-body {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}

.heading-product-headline-label {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}
.heading-product-name-label {
	grid-column: 1 / span 8;
	grid-row: 6 / span 1;
}
.heading-product-weight-label {
	grid-column: 9 / span 2;
	grid-row: 6 / span 1;
}
.heading-product-rank-label {
	grid-column: 11 / span 2;
	grid-row: 6 / span 1;
}

.heading-product-name-value {
	grid-column: 1 / span 8;
}
.heading-product-weight-value {
	grid-column: 9 / span 2;
}
.heading-product-rank-value {
	grid-column: 11 / span 2;
}

.heading-product-bar {
	grid-column: 5 / span 4;
	grid-row: 31 / span 1;
}
.heading-product-ranking {
	grid-column: 9 / span 4;
	grid-row: 31 / span 1;
}
.heading-product-text {
	grid-column: 1 / span 4;
	grid-row: 31 / span 1;
}



/*----HEADING----*/
.heading-image, .heading-country-image {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
	display: flex;
    justify-content: center;
	align-items: center;
}
.heading-headline {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.heading-left {
	grid-column: 1 / span 3;
	grid-row: 2 / span 1;
}
.heading-right {
	grid-column: 10 / span 3;
	grid-row: 2 / span 1;
}
.heading-lead {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.heading-body {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.heading-aside {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}

/*----PAGE----*/
.page-menu {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.page-notify {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.page-list {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.page-nav {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.page-pagination {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}
.page-aside {
	grid-column: 1 / span 12;
	grid-row: 6 / span 1;
}

.menu-filter {
	grid-column: 1 / span 2;
	grid-row: 1 / span 1;
}
.menu-text {
	grid-column: 3 / span 8;
	grid-row: 1 / span 1;
}
.menu-back {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.menu-search {
	grid-column: 11 / span 2;
	grid-row: 1 / span 1;
}

.pagination-prev {
	grid-column: 1 / span 2;
	grid-row: 1 / span 1;
}
.pagination-page {
	grid-column: 3 / span 8;
	grid-row: 1 / span 1;
}
.pagination-next {
	grid-column: 11 / span 2;
	grid-row: 1 / span 1;
}
/* Navigate to different path */
.pagination-back {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}


/*----LIST----*/

/* Set to wrap around content */
.list-headline {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.list-image {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.list-lead {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.list-body {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.list-detail {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}
.list-tile {
	grid-column: 1 / span 12;
	grid-row: 6 / span 1;
}
.list-item {
	grid-column: 1 / span 12;
	grid-row: 7 / span 1;
}
.list-nav {
	grid-column: 1 / span 12;
	grid-row: 8 / span 1;
}
.list-aside {
	grid-column: 1 / span 12;
	grid-row: 9 / span 1;
}



/*----LIST INPUT----*/

.list-headline {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.list-headline-save {
	grid-column: 12 / span 1;
	grid-row: 1 / span 1;
}
.list-detail-col-1 {
	grid-column: 1 / span 12;
}
.list-detail-col-1 {
	grid-column: 1 / span 12;
}
.list-detail-col-1-1 {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.list-detail-col-1-2 {
	grid-column: 1 / span 6;
	grid-row: 3 / span 1;
}
.list-detail-col-2-2 {
	grid-column: 7 / span 6;
	grid-row: 3 / span 1;
}
.list-detail-nav {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}

/*----ITEM----*/

.item-search-image {
	grid-column: 1 / span 2;
	grid-row: 1 / span 3;
}
.item-search-headline {
	grid-column: 3 / span 9;
	grid-row: 1 / span 1;
}
.item-search-lead {
	grid-column: 3 / span 9;
	grid-row: 2 / span 1;
}
.item-search-body {
	grid-column: 3 / span 9;
	grid-row: 3 / span 1;
}
.item-search-input {
	grid-column: 12 / span 1;
	grid-row: 1 / span 3;
}

.item-view-image {
	grid-column: 1 / span 2;
	grid-row: 1 / span 1;
}
.item-view-headline {
	grid-column: 3 / span 10;
	grid-row: 1 / span 1;
}

.item-country-image {
	grid-column: 1 / span 4;
	grid-row: 1 / span 1;
}
.item-country-headline {
	grid-column: 5 / span 8;
	grid-row: 1 / span 1;
}

.item-headline {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.item-lead, .item-advice-lead {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.item-body {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.item-image, .item-section-image {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.item-palette-image {
	grid-column: 1 / span 6;
	grid-row: 4 / span 30;
}
.item-detail-image {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}
.item-bullet-image {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}
.item-bullet-headline {
	grid-column: 2 / span 11;
	grid-row: 1 / span 1;
}


.item-result-name-label {
	grid-column: 7 / span 4;
	grid-row: 4 / span 1;
}
.item-result-weight-label {
	grid-column: 11 / span 1;
	grid-row: 4 / span 1;
}
.item-result-rank-label {
	grid-column: 12 / span 1;
	grid-row: 4 / span 1;
}

.item-result-name-value {
	grid-column: 7 / span 4;
}
.item-result-weight-value {
	grid-column: 11 / span 1;
}
.item-result-rank-value {
	grid-column: 12 / span 1;
}

.item-result-bar {
	grid-column: 7 / span 3;
	grid-row: 31 / span 1;
}
.item-result-ranking {
	grid-column: 10 / span 3;
	grid-row: 31 / span 1;
}
.item-result-text {
	grid-column: 7 / span 6;
	grid-row: 32 / span 1;
}

.item-section-bar {
	grid-column: 7 / span 3;
	grid-row: 5 / span 1;
}
.item-section-ranking {
	grid-column: 10 / span 3;
	grid-row: 5 / span 1;
}
.item-section-text {
	grid-column: 1 / span 6;
	grid-row: 5 / span 1;
}

/* Product Feature Results*/
.item-link-headline {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.item-link-lead {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}

.item-link-name-label {
	grid-column: 1 / span 5;
	grid-row: 3 / span 1;
}
.item-link-cost-label {
	grid-column: 6 / span 3;
	grid-row: 3 / span 1;
}
.item-link-dmin-label {
	grid-column: 9 / span 2;
	grid-row: 3 / span 1;
}
.item-link-dmax-label {
	grid-column: 11 / span 2;
	grid-row: 3 / span 1;
}
.item-link-name-value {
	grid-column: 1 / span 5;
}
.item-link-cost-value {
	grid-column: 6 / span 3;
}
.item-link-dmin-value {
	grid-column: 9 / span 2;
}
.item-link-dmax-value {
	grid-column: 11 / span 2;
}

/* PRODUCT FEATURE */
.item-feature-image{
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
	display: flex;
    justify-content: center;
	align-items: center;
}
.item-feature-headline {
	grid-column: 1 / span 12;
	grid-row: 2 / span 1;
}
.item-feature-lead {
	grid-column: 1 / span 12;
	grid-row: 3 / span 1;
}
.item-feature-body {
	grid-column: 1 / span 12;
	grid-row: 4 / span 1;
}

.item-feature-headline-label {
	grid-column: 1 / span 12;
	grid-row: 5 / span 1;
}
.item-feature-name-label {
	grid-column: 1 / span 8;
	grid-row: 6 / span 1;
}
.item-feature-weight-label {
	grid-column: 9 / span 2;
	grid-row: 6 / span 1;
}
.item-feature-rank-label {
	grid-column: 11 / span 2;
	grid-row: 6 / span 1;
}

.item-feature-name-value {
	grid-column: 1 / span 8;
}
.item-feature-weight-value {
	grid-column: 9 / span 2;
}
.item-feature-rank-value {
	grid-column: 11 / span 2;
}

.item-feature-bar {
	grid-column: 5 / span 4;
	grid-row: 31 / span 1;
}
.item-feature-ranking {
	grid-column: 9 / span 4;
	grid-row: 31 / span 1;
}
.item-feature-text {
	grid-column: 1 / span 4;
	grid-row: 31 / span 1;
}


.item-tax-label {
	grid-column: 1 / span 12;
	grid-row: 31 / span 1;
}

.item-tax {
	grid-column: 1 / span 12;
	grid-row: 32 / span 1;
}

.item-nav {
	grid-column: 1 / span 12;
	grid-row: 33 / span 1;
}


.item-select {
	grid-column: 1 / span 12;
	grid-row: 8 / span 1;
}


.item-tile {
	grid-column: 1 / span 12;
	grid-row: 9 / span 1;
}

.item-aside {
	grid-column: 1 / span 12;
	grid-row: 10 / span 1;
}


/*----TILE----*/

.tile-headline {
	grid-column: 1 / span 12;
	grid-row: 1 / span 1;
}
.tile-headline> p {
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}
.tile-lead-left {
	grid-column: 1 / span 4;
	grid-row: 2 / span 1;
}
.tile-lead-left> p {
	text-align: center;
	font-size: 0.6em;
}
.tile-body-left {
	grid-column: 1 / span 4;
	grid-row: 3 / span 1;
}
.tile-body-left> p {
	text-align: center;
	font-size: 1em;
}

.tile-lead-mid {
	grid-column: 5 / span 4;
	grid-row: 2 / span 1;
}
.tile-lead-mid> p {
	text-align: center;
	font-size: 0.6em;
}
.tile-body-mid {
	grid-column: 5 / span 4;
	grid-row: 3 / span 1;
}
.tile-body-mid> p {
	text-align: center;
	font-size: 1em;
}
.tile-lead-right {
	grid-column: 9 / span 4;
	grid-row: 2 / span 1;
}
.tile-lead-right> p {
	text-align: center;
	font-size: 0.6em;
}
.tile-body-right {
	grid-column: 9 / span 4;
	grid-row: 3 / span 1;
}
.tile-body-right> p {
	text-align: center;
	font-size: 1em;
}

/*----FOOTER----*/

/*Sets footer menu to display in column and centers along vertical and horizonal axis */
.footer-flex {
	display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
}

/*----MOBILE----*/
@media only screen and (max-width: 600px) {

    .footer-flex> li {
        width: auto;
        list-style: none;
        text-align: center;
    }
    .footer-nav-1 {
        grid-column: 1 / span 12;
        grid-row: 1 / span 1;
        text-align: center;
    }
    .footer-nav-2 {
        grid-column: 1 / span 12;
        grid-row: 2 / span 1;
        text-align: center;
    }
    .footer-nav-3 {
        grid-column: 1 / span 12;
        grid-row: 3 / span 1;
        text-align: center;
    }
    .footer-nav-4 {
        grid-column: 1 / span 12;
        grid-row: 4 / span 1;
        text-align: center;
    }
}
/*----TABLET----*/
@media only screen and (min-width:600px) and (max-width: 1200px) {

    .footer-nav-1 {
        grid-column: 1 / span 6;
        grid-row: 1 / span 1;
    }
    .footer-nav-2 {
        grid-column: 7 / span 6;
        grid-row: 1 / span 1;
    }
    .footer-nav-3 {
        grid-column: 1 / span 6;
        grid-row: 2 / span 1;
    }
    .footer-nav-4 {
        grid-column: 7 / span 6;
        grid-row: 2 / span 1;
    }	
}

/*----DESKTOP----*/
@media only screen and (min-width:1200px) {

    .footer-nav-1 {
        grid-column: 1 / span 3;
        grid-row: 1 / span 1;
    }
    .footer-nav-2 {
        grid-column: 4 / span 3;
        grid-row: 1 / span 1;
    }
    .footer-nav-3 {
        grid-column: 7 / span 3;
        grid-row: 1 / span 1;
    }
    .footer-nav-4 {
        grid-column: 10 / span 3;
        grid-row: 1 / span 1;
    }
}

/* Displays in row and centers along vertical and horizonal axis */
.footer-social {
	grid-column: 1 / span 12;
	display: flex;
	flex-direction: row;
    justify-content: center;
	align-items: center;
}
/* Sets column space between icons */
.footer-social> a {
	margin: 0px 10px;
}
.footer-copyright {
	grid-column: 1 / span 12;
	margin: 10px;
}
.footer-cookie {
	position: fixed;
	bottom: 0px;
	height: auto;
	width: 100vw;
	padding: 0px;
    border: 0px;
	margin: 0px;
}