:root{
	--color--primary-green:hsl(84, 55%, 51%);
	--color--primary-cyan:hsl(196, 100%, 47%);
	--color--light-gray:hsl(0, 0%, 85%);
	--color--mid-gray:hsl(0, 0%, 50%);
	--color--dark-gray:hsl(0, 0%, 10%);
	--color--success:#2ecc71;
	--color--danger:#f44336;
	--color--purple:#9575cd;
	--page__bg-color:#fff;
	--text__color:#332121;
	--link__color--hover:var(--color--primary-cyan);
	--text--vertical-margin:1.25em;
	--input__color:var(--color--mid-gray);
	--input__border-color:currentColor;
	--input-placeholder__color:var(--color--light-gray);
	--button__bg-color:#eee;

	--padding-side:1.875rem;
	--header__height:5rem;
	--container__width:100%;
	--container-aside__width:initial;
	--color-primary:var(--color--primary-green);
	--color-green:var(--color--primary-green);
	--state-info:var(--color--primary-cyan);
	--link-color:var(--color--primary-green);

	--font-size-value:16;
	font-size:3.33334vw;
}
*{
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased !important;
}
html, body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	color:var(--text__color);
	font-family:'Roboto', sans-serif;
	font-size:1rem;
	line-height:1.25;
	min-width:var(--container__width);
}
table > thead > tr > th, table > thead > tr > td{
				font-weight:bold;
			}
table th, table td{
		word-wrap:break-word;
	}
table caption{
		caption-side:top;
		padding-bottom:var(--table-spacing-y);
	}
input[type="number"]{
	padding-right:0;
}
input[type="checkbox"], input[type="radio"]{
	vertical-align:middle;
}
[data-before-content]::before{
	content:attr(data-before-content);
}
[data-after-content]::after{
	content:attr(data-after-content);
}
.svg-symbol{
	fill:currentColor;
	vertical-align:middle;
}
.svg-symbol--md-icon{
		width:calc(24 / var(--font-size-value) * 1em);
		height:calc(24 / var(--font-size-value) * 1em);
	}
.svg-symbol--no-image{
		stroke:currentColor;
		width:calc(133 / var(--font-size-value) * 1em);
		height:calc(103 / var(--font-size-value) * 1em);
	}
.svg-symbol--close{
		width:calc(30 / var(--font-size-value) * 1em);
		height:calc(30 / var(--font-size-value) * 1em);
	}
.page{
	display:flex;
	flex-direction:column;
	//overflow:hidden;
	position:relative;
	min-height:100%;
	background:var(--page__bg-color);
}
.app-name{
	font-size:2em;
}
.app-name img{
		max-width:10rem;
	}
.user-links{
  list-style:none;
  margin:0;
  padding:0;
	display:flex;
	align-items:center;
}
.user-links__link{
		padding:.5rem 0;
		cursor:pointer;
	}
.user-links__link + .user-links__link{
			margin-left:.875rem;
		}
.user-links a{
		text-decoration:none;
	}
.page-header{
	background:var(--color--dark-gray);
	color:hsl(0, 0%, 100%);
}
.page-header__container{
		display:grid;
		grid-template-columns:repeat(12, 1fr);
		justify-content:space-between;
		align-items:center;
		height:100%;
	}
.page-header__app-name{
		padding-top:.5rem;
		padding-bottom:.5rem;
		grid-column:span 12;
	}
.page-header__cart{
		margin-bottom:.25rem;
		grid-column-end:span 2;
	}
.page-header__user-links{
		grid-column:-3 / span 2;
		justify-self:end;
	}
.page-main{
	flex:1 0 0;
}
.page-main__header{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		align-items:center;
		margin:1.25rem 0;
	}
.page-main__title{
		margin:1.25rem 0 1rem;
	}
.page-footer{
	padding:2em 0 1em;
}
body.body--nav-active .page-main__bottom{
				display:none;
			}
@media (min-width: 768px){
	:root{
		--padding-side:30px;
		font-size:1rem;
	}
.page-header__container{
			grid-column-gap:var(--padding-side)
	}
.page-header__app-name{
			grid-column:span 6
	}
.page-header__cart{
			grid-column-start:-5;
			justify-self:end
	}
}
@media  (min-width: 768px) and (max-width: 991px){
	:root{
		--container__width:735px;
		--footer__height:228px;
	}
}
@media (min-width: 992px) and (max-width: 1199px){
	:root{
		--container__width:940px;
		--header__height:100px;
		--container-aside__width:243px;
		--footer__height:auto;
	}
}
@media (min-width: 1200px){
	:root{
		--container__width:1140px;
		--container-aside__width:263px;
		--header__height:100px;
		--footer__height:auto;
	}
[data-before-content-xl]::before{
		content:attr(data-before-content-xl)
}
[data-after-content-xl]::after{
		content:attr(data-after-content-xl)
}
}
@media (max-width: 991px){
body.body--nav-active .page{
			height:100%
	}
body.body--nav-active .page-main__container{
					padding:0
			}
body.body--nav-active .page-footer{
				display:none
		}
body.body--nav-active .page-user-panel{
				display:none
		}
		}
/*# sourceMappingURL=template.css.map */