/** GLOBAL CSS FILE **/
/* Global style rules that apply to most, if not all, pages */
:root{
	--color-light:#F2FAFF;
	--color-main:#2483B7;
	--color-dark:#394855;
	--color-white:white;
}
html, body {
	height: 100%;
	max-width: 100%;
	color:var(--color-dark);
	margin: 0;
	font-style: normal;
	font-family:"Rubik", sans-serif;
	background:var(--color-light);
}
body{
	overflow: hidden;
	overflow-y: auto;
}
h1, h2, h3, h4, h5, h6{
	font-family: "Baskerville-URW", serif;
	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 0em;
	text-align: left;
	color:var(--color-main);
	margin-top:0;
}
.message-overlay{
	display: flex;
    position: fixed;
    z-index: 1060;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .625em;
    overflow-x: hidden;
    transition: background-color .1s;
	background: #333333;
	opacity: .5;
}
.message{
	position: fixed;
	top:50%;
	left:50%;
	width:600px;
	transform:translate(-50%, -50%);
	background:var(--color-white);
	box-shadow: 0px 20px 40px rgba(36, 131, 183, 0.2);
	border-radius: 10px;
	padding:20px;
	z-index: 1061;
	max-width:calc(100% - 30px);
}
.message button{
	float:right;
	background: #2483B7;
	border-radius: 6px;
	border:none;
	color:var(--color-white);
	font-size: 18px;
	line-height: 21px;
	padding:15px 20px;
	margin-top:24px;
}

.title{
	padding-bottom:0;
	margin-bottom:-24px;
}
.relative{
	position: relative;
}
.center, .center *{
	text-align: center;
}
.column-2 > *{
	display: inline-block;
	width:calc(50% - 10px);
}
.column-2 > *:first-child{
	margin-right:20px;
	
}
.line-through::before{
	content: '';
	display:block;
	border-top:2px solid var(--color-dark);
	margin-bottom:-8px;
	margin-top:8px;
}
.line-through *{
	background:
		local;
	display: inline-block;
	padding-right:10px;
}
.line-through h3 {
	background: var(--color-white);
}
.background-light .line-through h3 {
	background: var(--color-light);
}
h1.line{
	color:var(--color-dark);
	font-family:"Rubik", sans-serif;
	font-size:30px;
}
h1.line span{
	display: inline-block;
	vertical-align: middle;
	border-bottom: 2px solid var(--color-dark);
	width:200px;
}
h2.light{
	color:var(--color-white);
}
h3{
	font-family: "Rubik", sans-serif;
	font-weight:500;
	font-size:18px;
	line-height: 20px;
	color:var(--color-dark);
	margin:0;
}
hr.h3-underline{
	display:inline-block;
	width:120px;
	border-bottom:2px solid var(--color-dark);
	margin-top:15px;
	
}
h4{
	font-family: "Rubik", sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: left;
	color:var(--color-dark);
}
h5{
	font-family: "Rubik", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 28px;
	margin:20px 0;

}
h6{
	color:var(--color-light);
	font-size: 20px;
	line-height: 24px;
	margin-top:30px;
	opacity:60%;
}
p, label{
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0em;
	text-align: left;
	line-height:1.3em;
}
ul.list-unstyled li {
	font-size: 16px;
}
p.full{
	max-width: 1000px;
	margin:auto;
}
.dark-button, .light-button{
	background: #2483B7;
	box-shadow: 0px 20px 40px rgba(36, 131, 183, 0.2);
	border-radius: 6px;
	border:none;
	color:var(--color-white);
	font-family: "Baskerville-URW", serif;
	font-size: 18px;
	line-height: 21px;
	padding:15px;
	margin-bottom:24px;
	margin-top:24px;
}
.light-button{
	box-shadow: 0px 30px 40px rgba(255, 255, 255, 0.15);
	color:var(--color-dark);
	background:var(--color-white);
}
.error {
	border: 1px solid red !important;
	outline-color: red !important; 
}
.no-text-decoration, .no-text-decoration *, .no-text-decoration:hover {
	text-decoration: none !important;
}
.flex {
	display: flex;
	justify-content: center;
}
.mt-12 {
	margin-top: 12px;
}
.mt-24 {
	margin-top: 24px;
}
/** HEADING {**/
nav{
	position:fixed;
	height:92px;
	left:0;
	right:0;
	z-index: 2;
}
nav ol{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:var(--color-light);
	z-index:3;
	list-style:none;
	padding:0;
	display:none;
	margin: 0;
}
nav ol a{
	position: relative;
}
nav ol a:first-of-type{
	display:block;
	margin-top:calc(50vh - 160px);
}
nav ol.show-menu{
	display: block;
}
nav ol li{
	text-align: center;
	width:auto;
	padding:20px 0;
	color:var(--color-dark);
}
nav ol a:hover, nav ol li:active, nav ol li:focus, nav ol li:hover{
	text-decoration: none;
	color:var(--color-main);
}
nav ol li.active{
	color:var(--color-main);
}
.main-logo{
	position:absolute;
	top:16px;
	width:60px;
	left:50%;
	margin-left:-30px;
}
.main-logo img{
	width:100%;
}
.cart-button{
	position:absolute;
	top:24px;
	right:24px;
}
.menu-button{
	position:absolute;
	top:24px;
	left:24px;
}
.close-button{
	position: absolute;
	top:24px;
	right:24px;
}
.loading {
	display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
}
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    margin: 0px auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
	border-left: 6px solid rgba(230, 246, 255,1);
    border-right: 6px solid rgba(230, 246, 255,1);
    border-bottom: 6px solid rgba(230, 246, 255,1);
    border-top: 6px solid rgba(9, 103, 210, .8);
    border-radius: 100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}
.input-error {
	border: 2px solid #D8000C !important;
}
.error-text {
  color: #D8000C;
  font-weight: 600;
}
.loader {
  width: 30px;
  height: 30px;
  border: 3px solid #333;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(51,51,51,.75);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.dot-flashing {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: rgba(118, 150, 189, 1);
  color: rgba(118, 150, 189, 1);
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
  margin-left: 24px;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -15px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: rgba(118, 150, 189, 1);
  color: rgba(118, 150, 189, 1);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing::after {
  left: 15px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: rgba(118, 150, 189, 1);
  color: rgba(118, 150, 189, 1);
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: rgba(118, 150, 189, 1);
  }
  50%, 100% {
    background-color: rgba(118, 150, 189, .35);
  }
}
#loading-message {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
#loading-text {
  color: #ffffff;
  font-size: 18px;
}
.hidden {
  display: none !important;
}
/* desktop only */
@media (min-width:576px){
	header{
		background:var(--color-light);
	}
	header::before{
		display: block;
		height:24px;
		background:var(--color-main);
		content:'';
	}
	nav{
		position:relative;
		width:calc(100% - 48px);
		max-width:1500px;
		margin:auto;
		height:92;
	}
}
@media (min-width:850px){
	.main-logo{
		position: static;
		display:inline-block;
		margin:0;
		margin-top:-12px;
		width:130px;
		vertical-align: top;
	}
	.menu-button, .close-button{
		display:none;
	}
	nav{
		height:auto;
		margin-top:24px;
	}
	nav ol, nav ol.show-menu{
		position:static;
		display: inline;
		margin-left:24px;
	}
	nav ol a, nav ol a:first-of-type{
		display:inline;
		padding:0 24px;
		margin-top:0;
	}
	nav ol li{
		display: inline;
		padding:0;
	}
	nav ol li.active{
		padding-bottom:4px;
		border-bottom:1px solid var(--color-main);
	}
	.cart-button{
		position: absolute;
		right:0;
		top:0;
	}
}

/** } **/
/** FOOTER { **/
footer section, .contact-footer{
	font-size: 20px;
	color:var(--color-light);
	display:flex;
	flex-wrap: wrap;
}
footer a{
	color:inherit;
	text-decoration: none;
	display: block;
	margin-top:23px;
    overflow-wrap: break-word;
}
footer div.copyright a{
	display: inline;
	margin: 0;
}
footer a:hover, footer a:active, footer a:focus{
	opacity:80%;
	color:inherit;
	text-decoration: none;
}
footer section div{
	width:150px;
	flex-grow:1;
}
.contact-footer div{
	width: 200px;
}
footer div.mobile-full{
	width:100%;
}
footer h6 {
	color: var(--color-light);
	opacity: 1 !important;
}
.tiny-form{
	width:100%;
	flex-shrink: 0;
	background:var(--color-white);
	border-radius: 10px;
	padding:10px;
	display: flex;
	align-items: center;
	margin:20px 0;
}
.tiny-form input[type=email]{
	flex-grow: 1;
	border:none;
	outline:none;
	padding:5px 10px;
	margin: 0;
	width:0;
}
.tiny-form button{
	background:var(--color-main);
	color:white;
	border:none;
	outline:none;
	border-radius: 10px;
	padding:15px;
	font-family:"Baskerville-URW", serif;
	font-size: 18px;
	line-height: 18px;
}
.social{
	display: flex;
	justify-content: space-around;
}
.social a{
	display: block;
	padding:12px;
	font-size: 25px;
	line-height: 25px;
	background:var(--color-white);
	color:var(--color-main);
	border-radius: 10px;
	margin: 0;
	margin:30px 0;
}
.copyright{
	text-align: center;
}
.main{
	background:var(--color-white);
	padding-top:92px;
}
.background-light{
	background:var(--color-light);
}
.background-white{
	background:var(--color-white);
}
.background-main{
	background:var(--color-main);
}
.floating-message{
	position: relative;
	top:-160px;
	background: var(--color-white);
	border-radius: 10px;
	padding:40px;
	padding-top:20px;
	padding-bottom: 24px;
	box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.1);
}
.floating-message p{
	font-style: italic;
	color:var(--color-dark);
}
.space-above-floating-message{
	height:120px;
}
.hold-float{
	height:60px;
}
@media (min-width:450px) and (max-width:530px){
	.floating-message h5{
		font-size: 30px !important;
	}
}
@media (min-width:1000px){
	.floating-message{
		display: flex;
		align-items: center;
		top:-80px;
	}
	.floating-message h5{
		display: inline;
		flex-shrink: 0;
	}
	.floating-message p{
		flex-shrink:1;
		text-align: left;
		margin-left:30px;
		margin-bottom: 0;
	}
	.space-above-floating-message{
		height:20px;
	}
	
}
@media (min-width:850px){
	footer div.mobile-full{
		width:300px;
		display: block;
	}
	footer div.copyright.mobile-full{
		padding-right:270px;
		margin-top:50px;
		min-height:50px;
		flex-grow: 1;
		text-align: left;
		width: auto;
	}
	footer div.social.mobile-full{
		display: flex;
		position: absolute;
		bottom:0;
		right:0;
		width:250px;
	}
	footer hr{
		width: 100%;
		border-bottom:1px solid var(--color-light);
		opacity: 0.3;
	}
}
/** } **/
/** product selection {**/
.product-slider{
	position:relative;
	display:flex;
	align-items:flex-start;
}
.product-slider .arrow{
	position:absolute;
	top:105px;
	background:#FFFFFFDD;
	color:var(--color-dark);
	border:1px solid var(--color-dark);
	border-radius: 50%;
	width:40px;
	height:40px;
	text-align: center;
	line-height: 40px;
	font-size:24px;
	z-index: 1;
	filter: drop-shadow(0px 4px 4px rgba(57, 72, 85, 0.2));
}
.product-slider .arrow:focus, .product-slider .arrow:active{
	outline:none;
	background:white;
}
.product-slider .arrow-left{
	left:24px;
}
.product-slider .arrow-right{
	right:24px;
}
.product{
	background:var(--color-white);
	margin:0 20px;
	padding:12px;
	border-radius: 20px;
	filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.25));
	flex-grow: 1;
}
.product-images .product{
	box-shadow: 0px 15px 40px rgba(36, 131, 183, 0.05);
	filter:none;
	border-radius: 20px;
	padding:30px;
}
.product p{
	opacity:0.8;
}
.product .product-image{
	display: block;
	background-position: center;
	background-size: cover;
	width:100%;
	height:185px;
	border-radius: 20px;
	filter: drop-shadow(0px 10px 30px rgba(57, 72, 85, 0.1));
	margin-bottom: 20px;
}
.product .product-image.image-tall{
	height:400px;
	border-radius: 20px;
}
.product h4{
	display: inline-block;
	width:calc(100% - 100px);
}
.product .rating{
	color:#FECD1A;
}
 .product .rating[value="0"] > *, .product .rating[value="1"] > *:nth-child(n+2), .product .rating[value="2"] > *:nth-child(n+3), .product .rating[value="3"] > *:nth-child(n+4), .product .rating[value="4"] > *:nth-child(n+5){
	color:#394855;
	opacity:0.4;
}
.product .price, .product .quantity{
	font-family: "Rubik", sans-serif;
	font-size: 18px;
	font-weight: 300;
	color:var(--color-main);
}
.product .quantity::before{
	content: "/ ";
}
.product .quantity{
	color:var(--color-dark);
	opacity:0.4;
}
.product-slider .product:nth-of-type(n+2){
	display:none;
}
.multi-choice{
	display: inline-flex;
	border:1px solid var(--color-main);
	border-radius: 5px;
}
.multi-choice label{
	flex-grow:1;
	margin:0;
	cursor:pointer;
}
.multi-choice label span{
	display: block;
	padding:12px 0;
	text-align: center;
	color:var(--color-main);
	font-size: 16px;
}
.multi-choice label input{
	position: absolute;
  	opacity: 0;
  	cursor: pointer;
}
.multi-choice label input:checked + span{
	background:var(--color-main);
	color:var(--color-white);
}
.cart{
	box-sizing: border-box;
	border-radius: 5px;
	background:var(--color-main);
	color:var(--color-light);
	border:none;
	text-align: center;
	font-size: 16px;
	padding:12px 0;
}
@media (min-width:700px){
	/** 2 column **/
	.product{
		flex-basis: 0;
	}
	.product-slider .product:nth-of-type(2){
		display: block;
	}
}
@media (min-width:1000px){
	.product-slider .product:nth-of-type(3){
		display: block;
	}
}
/** } **/
/** OTHER GLOBAL STYLES **/
section{
	padding:24px;
	position:relative;
	z-index: 0;
}
.icon-button{
	border:1px solid var(--color-main);
	background:var(--color-light);
	border-radius:5px;
	color:var(--color-main);
	box-sizing:border-box;
	width:36px;
	height:36px;
	text-align:center;
}
.icon-button:hover, .icon-button:focus{
	border-color:var(--color-dark);
	color:var(--color-dark);
	outline:none;
}
.icon-button[data-notifications]::after{
	position:absolute;
	box-sizing: border-box;
	top:-12px;
	right:-12px;
	width:24px;
	height:24px;
	padding-top:1px;
	background:var(--color-main);
	color:var(--color-light);
	border-radius: 12px;
	content:attr(data-notifications);
	box-shadow: 0px 8px 10px rgba(36, 131, 183, 0.2);
}
.divider{
	position:relative;
	width:100%;
	height:24px;
	background:url("/assets/images/border-background-light.png");
	background-position: center;
}
.divider-mid-light, .divider-white-mid{
	background-color:var(--color-main);
}
.divider-light-white{
	background-color:var(--color-white);
}
.background-image{
	background-size: cover;
	background-position: left center;
}
.divider-light-white, .divider-white-transparent, .divider-white-mid, .divider-light{
	-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}
.divider-light {
	background-image: url("/assets/images/border-background-light.png");
}
.divider-white-transparent, .divider-transparent-white, .divider-white-mid{
	background-image:url("/assets/images/border-background-white.png");
}
.desktop{
	display:none;
}
.space{
	height:20px;
}
@media (min-width:576px){
	.floating-message h5{
		font-size: 35px;
	}
	.desktop{
		display:block;
	}
	.main{
		padding-top:0;
	}
	section{
		width:calc(100% - 48px);
		max-width:1500px;
		margin:auto;
	}
	h1{
		font-size:50px;
		line-height: 60px;
	}
	h2{
		font-size:60px;
		line-height: 72px;
	}
	p, label, ul.list-unstyled li{
		font-size:18px;
	}
	p.large-text{
		font-size: 24px;
	}
	.dark-button{
		border-radius: 10px;
		font-size: 24px;
		padding:22px;
	}
}
.cover{
	z-index: 1;
	position: relative;
}
.show-large{
	display: none;
}
@media (min-width:850px){
	.show-large{
		display: block;
	}
	h1{
		font-size: 90px;
		line-height: 90px;
		font-weight: 800;
	}
}