@charset "UTF-8";

/*!Theme Name: Outlet Shops of Grand River
Theme URI: https://shopsofgrandriver.com/
Description: The Theme for the Outlet Shops of Grand River
Author: Jonathan Hoomes
Version: 3*/

@media screen and (prefers-reduced-motion:reduce) {
    * {
        -webkit-transition: 0s!important;
        transition: 0s!important
    }
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a {
    text-decoration: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0
}

body {
    margin: 0
}

dl,
menu,
ol,
ul {
    margin: 0;
    list-style: none
}

dd {
    margin: 0
}

menu,
ol,
ul {
    padding: 0
}

nav ol,
nav ul {
    list-style: none;
    list-style-image: none
}

img {
    border: 0;
    -ms-interpolation-mode: bicubic
}

figure {
    margin: 0
}

form {
    margin: 0
}

legend {
    border: 0;
    padding: 0;
    white-space: normal
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline
}

button,
input {
    line-height: normal
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
    border:0;
    outline:0;
}

button[disabled],
input[disabled] {
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}


html {
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    color:#181C27;
}

@media(max-width:1200px) {
    html {
        font-size: 18px
    }
}

@media(max-width:1200px) {
    html {
        font-size: 16px
    }
}

::-moz-selection {
    background: #BE5A96;
    color: #fff
}

::selection {
    background: #BE5A96;
    color: #fff
}

a:hover::-moz-selection {
    -webkit-background-clip: none!important;
    -webkit-text-fill-color: #fff!important
}

a:hover::selection {
    -webkit-background-clip: none!important;
    -webkit-text-fill-color: #fff!important
}

a {
    color: #fff
}

h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 55px;
    font-weight: 400;
    line-height: 105%;
}

@media(max-width:1480px) {
    h1 {
        font-size: 48px
    }
}
@media(max-width:1024px) {
    h1 {
        font-size: 36px
    }
}

@media(max-width:800px) {
    h1 {
        font-size: 32px
    }
}
@media(max-width:640px) {
    h1 {
        font-size: 27px
    }
}

.h2,
h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 42px;
    font-weight: 400;
    line-height:105%;
}

@media(max-width:1480px) {
    h2 {
        font-size: 34px;
    }
}
@media(max-width:1024px) {
    h2 {
        font-size: 28px;
    }
}

@media(max-width:800px) {
    h2 {
        font-size: 26px
    }
}
@media(max-width:800px) {
    h2 {
        font-size: 23px
    }
}

h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 32px;
    font-weight: 400
}

@media(max-width:1200px) {
    h3 {
        font-size: 30px
    }
}

@media(max-width:800px) {
    h3 {
        font-size: 26px
    }
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 .8rem
}

@media(max-width:1200px) {
    h4 {
        font-size: 20px
    }
}

@media(max-width:800px) {
    h4 {
        font-size: 18px
    }
}

h5 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 .5rem
}

h6 {
    font-size: 1rem;
    font-weight: 400
}

h4,
h5,
h6 {
    line-height: 1.05
}

abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none
}

b,
strong {
    font-weight: 700
}

small {
    font-size: 75%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

hr {
    border: 0;
    height: 5px;
    margin: 4rem 0;
}

.container{
    display: block;
    margin: 0 auto;
    width: 96%;
    max-width: 96%;
}
button{
    font-size:15px;
    text-transform: uppercase;
    font-family:Roboto;
    font-weight:700;
    color:#fff;
    letter-spacing:4px;
    display:block;
    padding:16px 0;
    min-width:200px;
    text-align:center;
    transition:all 0.4s;
}
button.purple{
    background:#BE5A96;
}
button.purple:hover{
    background:#22A169;
}
button.blue{
    background:#79C7CB;
}
button.blue:hover{
    background:#22A169;
}
@media(max-width:1024px){
    button{
        font-size:13px;letter-spacing:3px;padding:13px 0;min-width:160px;
    }
}


/*Header*/
header{
    background:#22A169 url("/img/swirls-green.png") no-repeat center center;padding:16px 0;z-index:99999999999999999999999999999999999999;
}
.menu {
    display: flex;
    align-items: center;
}
.menu-logo {
    margin-left: auto;
    margin-right: auto;
}
.menu-logo img {
    width:100%;
    max-width:334px;
}
.burger{
    margin-right:53px;
}
.burger img{height:40px;}

.other img{height:40px;margin-left:10px;}

@media(max-width:1480px){
    header{
        padding:13px 0;
    }
    .menu-logo img{
        max-width:300px;
    }
    .burger img,.other img{height:36px;}
}
@media(max-width:1024px){
    header{
        padding:12px 0;
    }
    .menu-logo img{
        max-width:230px;
    }
    .burger img,.other img{height:32px;}
}
@media(max-width:800px){
    header{
        padding:10px 0;
    }
    .menu-logo img{
        max-width:180px;
    }
    .burger img,.other img{height:28px;}
}
@media(max-width:640px){
    .burger img,.other img{
        height:0;display:none;margin:0;
    }
    header{
        position:fixed;top:0;left:0;width:100%;height:64px;
    }
    .menu-logo img{
        max-width:160px;position:absolute;left:50%;margin-left:-75px;margin-top:-20px;
    }
}
/*end Header*/

/*Nav*/
#menuToggle{
	display: block;
	position: relative;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
	margin-right:85px;
}
@media(max-width:767px){
	#menuToggle{padding-top:10px;padding-left:10px;}
}
#menuToggle a{
	transition: color 0.4s ease;
}

#menuToggle input{
	display: block;
	width: 40px;
	height: 32px;
	position: absolute;
	top: -7px;
	left: -5px;
	cursor: pointer;
	opacity: 0; /* hide this */
	z-index: 2; /* and place it over the hamburger */
	-webkit-touch-callout: none;
}
/*
 * hamburger
 */
#menuToggle span{
	display: block;
	width: 33px;
	height: 4px;
	margin-bottom: 5px;
	position: relative;
	background: #fff;
	z-index: 1;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			  opacity 0.55s ease;
}
#menuToggle span:first-child{
	transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
	transform-origin: 0% 100%;
}
/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span{
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
	background: #fff;
}

/*
 * hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3){
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
/*
 * the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2){
	transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu{
	position: fixed;
	min-width: 25%;
	width:auto;
	height:calc(100vh + 100px);
	margin: -100px 0 0 -50px;
	padding: 50px;
	padding-top: 125px;
	background: #15406D;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	/* to stop flickering of text in safari */
	transform-origin: 0% 0%;
	transform: translate(-100%, 0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li{
	font-size: 75px;
	font-family: 'DM Serif Display', serif;
}
#menu a li{
	color:#79C7CB;line-height:112%;
}
#menu a li:active,#menu a li:hover{
	color:#fff;
}
@media(max-width:1024px){
	#menu{min-width:calc(50% + 50px);}
	#menu li{font-size: 65px;}
}
@media(max-width:767px){
	#menu{min-width:calc(100% + 50px);}
	#menu li{font-size: 50px;}
}
@media(max-width:767px) and (orientation:landscape){
	#menu li{font-size: 30px;}
}

/*
 *slide it in from the left
 */
#menuToggle input:checked ~ ul{
	transform: none;
}
 
/*end Nav*/

#content{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

/*Home Hero Slider*/
#home-slider{
    margin:0;width:100%;
}
.grid-container {
    display: grid;width:100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: "hero-image slides";
    grid-gap:0;
}
.hero-image {
    grid-area: hero-image;
    background:url("/img/slide-current.jpg") no-repeat top center;background-size:cover;
    align-self:stretch;
    align-items:end;
    align-content: end;
    justify-content: end;
	min-height:50vh;
}
/*
.slider-nav{
    background:red;align-content:end;justify-content:start;display:grid;
}
.slider-nav img.rotate{
    transform:rotate(180deg);align-self:end;justify-self:end;display:grid;
}
*/
.slides {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
    grid-template-areas: "current-slide current-slide" "slide-1 slide-2";
    grid-area: slides;
}
.current-slide {
    grid-area: current-slide;background:url("/img/arrows.png") no-repeat bottom left;
}
.current-slide .wrapper{
    display:block;width:90%;margin:0 auto;max-width:690px;padding:50px 0 100px 0;
}
.current-slide h1{
    color:#BE5A96;
}
.slide-1 { 
    grid-area: slide-1;
    background:#6FC6A0 url("/img/slide-2.jpg") no-repeat top center;
}
.slide-2 { 
    grid-area: slide-2;
    background:#FF8946 url("/img/slide-3.jpg") no-repeat top center;
}
.slide-1,.slide-2{
    color:#fff;align-content:end;display:grid;
}
.slide-1 .wrapper,.slide-2 .wrapper{
    display:block;width:94%;max-width:404px;margin-left:auto;margin-right:auto;text-align:center;padding:20px 0 40px 0;
}
.current-slide p,.slide-1 p,.slide-2 p{
    font-size:25px;line-height:150%;font-weight:300;
}
.slide-1 p a,.slide-2 p a{
    text-decoration:underline;color:#fff;transition:all 0.4s;padding:0 5px;white-space:nowrap;
}
.slide-1 p a:hover,.slide-2 p a:hover{
    background:#fff;text-decoration:none;
}
.slide-1 p a:hover{
    color:#6FC6A0;
}
.slide-2 p a:hover{
    color:#FF8946;
}

@media(max-width:1480px){
    .current-slide p,.slide-1 p,.slide-2 p{
        font-size:20px;
    }
}
@media(max-width:1024px){
    .current-slide p,.slide-1 p,.slide-2 p{
        font-size:16px;font-weight:400;
    }
}
@media(max-width:800px){
    .grid-container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        grid-template-areas: "hero-image" "slides";
    }
    .current-slide .wrapper{
        padding:10px 0 30px 0;
        text-align:center;
        width:80%;
    }
    .current-slide button.purple{
        margin-left:auto;margin-right:auto;
    }  
    .current-slide {
        background:none;
    }
}
/*@media(min-width:801px){
    .slider-nav{display:none;width:0;height:0;}
}*/
@media(max-width:640px){
    #home-slider{margin-top:64px;}
}
@media(max-width:700px) and (orientation: landscape) {
	.hero-image{
		min-height:100vh;
	}
}
/*end Home Hero Slider*/

/*Home Signup Form*/
#home-signup{
    background-color:#3393A9;background-image:url("/img/swirls-blue-left.jpg"), url("/img/swirls-blue-right.jpg");background-repeat:no-repeat;background-position: center left, center right;color:#fff;text-align:center;flex-direction: column;align-items: center;justify-content: center;
}
#home-signup button,#home-signup h2,#home-signup p{
    display:block;
}
#home-signup .wrap{
	display:block;margin:50px auto;text-align:center;width:90%;max-width:700px;
}
#home-signup input[type=text]{
	line-height:34px;width:90%;max-width:500px;margin-bottom:30px;
}
#home-signup button{
	margin-left:auto;margin-right:auto;
}
@media(max-width:1024px){
	#home-signup{background-position:-300px center, right -300px center;}
}
@media(max-width:768px){
	#home-signup{background-position:-350px center, right -350px center;}
}
/*end Signup Form*/

/*Boxes on homepage*/
#boxes{
    color:#fff;text-align:left;flex-direction: row;flex-wrap:wrap;align-items:stretch;justify-content:center;align-content:stretch;
}
.grid2x2 {
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.grid2x2 > div {
    display: flex; 
    flex-basis: 50%;  
    justify-content: flex-start;
    flex-direction: column;
}
.grid2x2 > div > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width:780px;
    margin:60px auto 0 auto;
    padding:0 5%;
}
.box{
    margin:0;min-height:100px;
}
.box.bottom{
    padding-top:180px;
}
.box.burger{
	background:url("/img/bg-burger.jpg") no-repeat center center;background-position:cover;
}
.box.bookbag{
	background:url("/img/bg-bookbag.jpg") no-repeat center center;background-position:cover;
}
.box.rossbridge{
	background:url("/img/bg-rossbridge.jpg") no-repeat center center;background-position:cover;
}
.box.giftcard{
	background:url("/img/bg-giftcard.jpg") no-repeat center center;background-position:cover;
}
.box h1{
    margin-top:0;
}
.box .date{
    text-transform:uppercase;font-size:70%;font-weight:900;letter-spacing:3px;margin-top:-10px;
}
.box p{
    margin:35px 0 60px 0;line-height:150%;
}
.box a{
    text-decoration:underline;transition:all 0.4s;padding:0 5px;white-space:nowrap;
}
.box a:hover,.box a:active{
    background:#fff;color:#000;text-decoration:none;
}
.box.purple,.box.purple a{
    color:#BE5A96;
}
.box.purple a:active,.box.purple a:hover{
    color:#fff;text-decoration:none;background:#BE5A96;
}
.box.yellow a:active,.box.yellow a:hover{
    color:#b4c036;
}
.box.blue a:active,.box.blue a:hover{
    color:#3393A9;
}
@media(max-width:767px){
    .grid2x2 > div {
        flex-basis:100%;min-height:70vh;
    }
    .box a{
        margin-left:-4px;
    }
}
@media(max-width:666px){
    .grid2x2 > div {
        min-height:85vh;
    }
}
@media(max-width:700px) and (orientation: landscape) {
	.grid2x2 > div {
        min-height:100vh;
    }
}
/*end Boxes on homepage*/

/*Logo slider on homepage*/
#logo-slider{
    flex-direction: row;flex-wrap:nowrap;align-items:center;justify-content:center;align-content:center;
}
.grid1x4 {
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 98%;
    max-width:1700px;
    margin:50px auto;
}
.grid1x4 > a,.grid1x4 > div {
    display: flex; 
    flex-basis: 20%;  
    justify-content:center;
    flex-direction: column;
}
.grid1x4 > a.arrow-btn {
    flex-basis: 10%;
}
#logo-slider a img{
    max-width:120px;height:auto;filter:saturate(0);opacity:0.7;transition:all 0.4s;align-self:center;
}
#logo-slider a:hover img{
    filter:saturate(100%);opacity:1;
}
#logo-slider a.arrow-btn img.arrow{
    max-width:32px;height:auto;filter:saturate(100%);
}
img.arrow.next{
    transform:rotate(180deg);
}
@media(max-width:960px){
    #logo-slider a img{
        max-width:90px;
    }
    #logo-slider a.arrow-btn img.arrow{
        max-width:30px;
    }
    .grid1x4 {
        margin:40px 0;
    }
}
@media(max-width:660px){
    #logo-slider a img{
        max-width:70px;
    }
    .grid1x4 {
        margin:30px 0;
    }
    .grid1x4 > a {
        flex-basis: 25%; 
    }
    .grid1x4 > a.arrow-btn {
        flex-basis: 0;width:0;display:none;opacity:0;
    }
}

/*Bottom navigation*/
#bottom-nav{
    flex-direction: row;flex-wrap:nowrap;align-items:center;justify-content:center;align-content:center;background:#BE5A96;padding:50px 0;
}
#bottom-nav .nav-menu{
	display: flex;
    justify-content: space-between;
    flex-direction: row;
	width: 98%;
    max-width:1700px;
    margin:0 auto;
    padding:0 5%;
	list-style:none;
	flex-wrap: wrap;
}
#bottom-nav .nav-menu li{
	display:flex;
}
#bottom-nav .nav-menu a{
	color:#fff;text-decoration:none;ffont-family: 'Open Sans', sans-serif;font-weight: 400;font-size: 14px;letter-spacing:2px;text-transform:uppercase;padding:0 5px;transition:0.4s all;white-space:nowrap;
}
#bottom-nav .nav-menu a:hover,#bottom-nav .nav-menu a:active{
	color:#BE5A96;background:#fff;
}
@media(max-width:767px){
	#bottom-nav .nav-menu{
		justify-content: center;line-height:200%;
	}
}
/*Footer*/
footer{
    flex-direction: row;flex-wrap:nowrap;background:#6D6E71;padding:50px 5%;color:#fff;font-family:"Roboto", sans-serif;font-size:13px;
}
footer .grid1x4 > div {
	justify-content: flex-start;flex-basis: auto;flex:1 1 auto;	
}
footer .footer-logo{
	max-width:125px;height:auto;width:90%;margin-top:10px;
}
footer ul{
	line-height:220%;text-indent:5px;
}
footer .grid1x4 ul li:first-child{
	text-transform:uppercase;padding-bottom:10px;letter-spacing:2px;
}
footer .grid1x4 ul li:first-child:after{
	content:'';background:#fff;height:2px;width:60px;display:block;margin-top:10px;margin-left:5px;
}
footer ul a{
	transition:all 0.4s;text-indent:0;padding:0 5px;margin-left:-5px;
}
footer ul a:hover,footer ul a:active{
	background:#fff;color:#6D6E71;
}
footer .social-links img{
	width:16px;height:auto;margin-right:10px;padding-top:5px;
}
footer .copy{
	display:flex;width:98%;margin:20px auto 0 auto;justify-content: flex-end;
}
@media(max-width:1100px){
    footer .logo-holder{flex-basis:0;padding:0;margin:0;}
    footer .footer-logo{width:0;height:0;padding:0;margin:0;}
}
@media(max-width:1024px){
    footer ul li:first-child{letter-spacing:1px;}
}
@media(max-width:900px){
    footer{padding:50px 2%;font-size:12px;}
    footer ul li:first-child{letter-spacing:0;}
}
@media(max-width:767px){
    footer .grid1x4 {min-height:0;width:0;height:0;min-width:0;margin:0;padding:0;}
    footer .grid1x4 > div {flex-basis:0;padding:0;margin:0;font-size:0;}
    footer .grid1x4 > div img{height:0;width:0;}
    footer .grid1x4 ul li:first-child:after{height:0;width:0;}
    footer .copy{
        margin:60px auto 0 auto;justify-content: center;font-size:11px;
    }
    footer .social-links{
        list-style:none;flex-direction:row;display:flex;justify-content:center;
    }
    footer .social-links img{
        width:40px;height:auto;margin:10px 12px 5px 12px;
    }
	footer .social-links a{
		font-size:0;
	}
	footer .social-links a:active,footer .social-links:hover{
		background:none;
	}
}

/*mobile menu in footer*/
@media(min-width:768px){
	#footer-mobile-menu{
		display:none;width:0;height:0;overflow:none;font-size:0;
	}
}
#footer-mobile-menu{
    font-size:14px;max-width:640px;margin-left:auto;margin-right:auto;border-bottom:2px solid #fff;
}
#footer-mobile-menu span{
    text-transform:uppercase;letter-spacing:2px;font-weight:600;line-height:40px;
}
.tabs {
	overflow: hidden;
}
.tab {
	width: 100%;
	color: white;
	overflow: hidden;
    border-top:2px solid #fff;
}
.tab:last-child{
    border-bottom:2px solid #fff;
}
.tab-label {
	display: flex;
	justify-content: space-between;
	padding: 1em;
	cursor: pointer;
    text-transform: uppercase;
    /* Icon */
}
.tab-label::after {
	content: "\276F";
	width: 1em;
	height: 1em;
	text-align: center;
	transition: all 0.35s;
}
.tab-content {
    max-height: 0;
	padding: 0 1em;
	color: #fff;
    background: #535457;
	transition: all 0.35s;
}
.tab-close {
	display: flex;
	justify-content: flex-end;
	padding: 1em;
	font-size: 0.75em;
	cursor: pointer;
}
footer input {
    visibility: none;width:0;height:0;display:none;
}
footer input:checked + .tab-label::after {
	transform: rotate(90deg);
}
footer input:checked ~ .tab-content {
	max-height: 100vh;
	padding: 1em;
}
/*end mobile menu in footer*/