@import "tools/_settings.scss";
@include g-generate_classes ( );
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@font-face {
	font-family: 'MuseoSans-100';
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.eot'); /* IE9 Compatibility Modes */
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.eot') format('embedded-opentype'), /* IE6-IE8 */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.otf') format('opentype'),
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.woff') format('woff'), /* Modern Browsers */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.ttf') format('truetype'), /* Safari, Android, iOS */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-100/MuseoSans-100.svg#MuseoSans-100') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MuseoSans-300';
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.eot'); /* IE9 Compatibility Modes */
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.eot') format('embedded-opentype'), /* IE6-IE8 */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.otf') format('opentype'),
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.woff') format('woff'), /* Modern Browsers */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.ttf') format('truetype'), /* Safari, Android, iOS */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-300/MuseoSans-300.svg#MuseoSans-300') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MuseoSans-500';
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.eot'); /* IE9 Compatibility Modes */
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.eot') format('embedded-opentype'), /* IE6-IE8 */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.otf') format('opentype'),
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.woff') format('woff'), /* Modern Browsers */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.ttf') format('truetype'), /* Safari, Android, iOS */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-500/MuseoSans-500.svg#MuseoSans-500') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MuseoSans-700';
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.eot'); /* IE9 Compatibility Modes */
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.eot') format('embedded-opentype'), /* IE6-IE8 */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.otf') format('opentype'),
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.woff') format('woff'), /* Modern Browsers */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.ttf') format('truetype'), /* Safari, Android, iOS */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-700/MuseoSans-700.svg#MuseoSans-700') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MuseoSans-900';
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.eot'); /* IE9 Compatibility Modes */
	src: url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.eot') format('embedded-opentype'), /* IE6-IE8 */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.otf') format('opentype'),
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.woff') format('woff'), /* Modern Browsers */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.ttf') format('truetype'), /* Safari, Android, iOS */
	url('https://cdn.remington-europe.com/fonts/MuseoSans/MuseoSans-900/MuseoSans-900.svg#MuseoSans-900') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

$global_dark: black;
$global_light: white;
$global_grey: #f3f3f3;
$global_color1: #ee3124;
$global_color2: #47B765;
$global_color3: #EFAE12;
$global_color4: #35A5CF;
$dark_grey: #767676;
$m100: 'MuseoSans-100';
$m300: 'MuseoSans-300';
$m500: 'MuseoSans-500';
$m700: 'MuseoSans-700';
$m900: 'MuseoSans-900';



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	margin:0;
	padding:0;
	font-family:$m300;
	text-transform:uppercase;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	color: #000;

}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.header {
	.middle {
		padding:15px 0;
		img {
			width:200px;
		}
		.status-checkout {
			font-size:.85em;
			i {
				font-size:1.2em;
			}
		}
	}
	.top {
	font-family: $m100;
	color:$global_grey;
	height:30px;
	line-height:30px;
	background: $global_dark;
	text-transform:uppercase;
	font-size: .9em;

	
		.row {
			margin:0 10px;
			* {
				padding:0 20px;
			}
		}
		.icons-support {
			text-align:right;
		}

		.myaccount {
			display: inline-block;
			cursor:default;
		}
		a {
			display: inline-block;
			color:$global_grey;
			text-decoration: none;
		}
	}
}
strong {
	font-family: $m700;
}
.footer {
	min-height:40px;
	background: $global_grey;
	position: relative;
	p {
		position: absolute;
		top:50%;
		transform: translateY(-50%);
	}
}
.info {
	border-top:4px solid $global_grey;
	width:90%;
	margin:0 auto;
	.row {
		padding:10px 0;
	}
	.info-text {
		text-transform:none;
		font-size:.9em;
		strong {
			text-transform: uppercase;
		}
	}
}

.breadcrumbs {
	height:30px;
	line-height:30px;
	background: $global_dark;
	text-transform:uppercase;
	text-align: center;
	color:$global_grey;
	font-size:0.8em;
	a {
		color:$global_color1;
		text-decoration:none;
		padding:0 0px 0 14px;
		position: relative;
		&:before {
			content: '/';
			position: absolute;
			left:3px;
			color:#767676;
		}
	}
}
.text-right {
	text-align:right;
}
.container {
    max-width: 1240px;
    margin: 0 auto;
    width:90%;
}

.container {
	.top {
		h1 {
			text-transform:uppercase;
			font-family: $m900;
			font-size:3.2em;
			padding:25px 0;
		}	
		padding:10px 0 30px 0;
	}
	.middle {
		.single-product {
			padding:20px 0;
			&:last-child {
				border-bottom:2px solid $global_grey;
			}
		}
		.order-summary {
			h2 {
				text-transform:uppercase;
				font-family:$m900;
				font-size:1.4em;
			}
			.product-summary {
				padding:10px;
				width:80%;
				margin:12px auto;
				background: #fff;

				.product-info {
					padding:5px;
					.title {
						font-family:$m700;
					}
					.model {
						padding:0 0 8px 0;
						font-size:.92em;
					}
					.quantity {

					}
					.price {
						font-family: $m700;
						.oldprice {
							font-family: $m300;
							color:$global_color1;
							text-decoration:line-through;
							padding:0 8px 0 0;
						}
					}
					.action {
						margin-top:10px;
						a {
							padding:0 10px 0 0;
						}
						.edit {
							color:black;
						}
						.remove {
							color:$global_color1;
						}
					}
				}
				.product-img {
					img {
						max-width:100%;
					}
				}
			}
			padding:20px 10px;
			min-height:400px;
			background: $global_grey;
		}
	}
	
}
.total {
	padding:20px 0;
	width:85%;
	margin:0 auto;
	font-family: $m900;
	color:$global_color1;
	border-bottom:2px solid black;
	.row {
		margin:0 auto;
		width:90%;
	}
}
.cards {
	padding:20px 10px;
	img {
		margin:0 15px;
		width:100px;
		border-radius:3px;
	    @include g-state( mobile ) {
			width:80px;
			margin:0 2px;
		}
	}	
}
.svg-spectrum-logo {
	width:100px;
	display: inline-block;
}
.shop-action {
	width:90%;
	text-align:center;
	font-family: $m700;
	margin:0 auto;
	.extra {
		padding:10px 0;
		font-size:.8em;
		font-family: $m100;;
	}
	.button {
		padding:12px 5px;
		color:white;
		margin:0px 0;
		position: relative;
	}
	a {
		text-decoration:none;
	}
	i {
		font-size:1.6em;
		padding-left:20px;		
	}
	.checkout {
		background: $global_color1;
	}
	.paypal {
		background: #009cdd;
	}
}
.assistance {
	margin-top:35px;
	border:2px solid $global_grey;
	background: $global_grey;
	.panel-head {
		padding:25px 0;
		width:90%;	
		margin: 0 auto;
		h2 {
			font-family: $m900;
			font-size: 1.1em;
		}
	}
	.panel-container {
		background: #fff;
		text-transform:none;
		.text-container {
			padding:25px 5px;
			margin: 0 auto;
			width:90%;
			.row {
				margin:20px 0;
			}
			.gr-1 {
				text-align:center;
				i {
					font-size:1.5em;
				}
			}
			.gr-11 {
				padding-left:15px;
			}
		}
		.opening-times {
			font-size:.85em;
			.fa-clock-o {
				font-size:1.2em;
			}
			.times {
				color:#BBBBBB;
			}
		}
	}
}
.form-start {
	border:2px solid $global_grey;

		// width:90%;
		// 	float:right;
			margin:0 auto;
	.form-head {
		background: $global_grey;
		font-family: $m700;
		font-size:1.15em;
		padding:18px 5%;
		.status {
			font-size:.9em;
			position: relative;
			margin-right:45px;
			i {
				font-size:2.4em;
				top:-8px;
				right:-49px;
				position: absolute;
			}
			a {
				color:black;
				font-family: $m300;
			}
		}
	}
	.form-container {
		width:90%;
		margin:0 auto;
		.alert {
			width:70%;
		}
		h2 {
			font-family: $m100;
			font-size:1.15em;
			padding:20px 0 0 0;
			&.extra-pad{
				padding:20px 0;
			}
		}
		form {
			padding:15px 0;
			box-sizing:border-box;
		}
		input[type='text'], input[type='email'] {
			padding:10px 10px;
			width:70%;
			text-transform:uppercase;
			font-family: $m300;
			border:1px solid black;
			&.has-errors {
				border:2px solid $global_color1;
			}
			&.has-empty-field {

			}
		}
		label {
			font-size:.8em;
			display: block;
			padding:11px 0;
		}
		.input-field {
			position: relative;
			width:100%;

			i {
				font-size:1.5em;
				text-align:right;
			}
			.correct, .errors {
				position: absolute;
				bottom:10px;
				right:10px;
			}
			.errors {
				background-color:$global_color1;
				color:white;
				display: block;
				width:25px;
				text-align:center;
				top:50%;
				height:25px;
			}
			
		}
		.btn-submit {
			padding:30px 0;
		}
		button[type='submit'] {
			background: #000;
		 	color: #fff;
		 	font-family: $m100;
		 	font-size:1.15em;
		 	padding:15px 40px;
		 	text-align:center;
		 	text-transform:uppercase;
		 	border:none;
		 	outline:none;
		}
 		fieldset {
			padding: 0px;
			position: relative;
			width:30%;
			@include g-state(mobile) {
				width:100%;
			}
			select {
				text-transform:uppercase;
				font-family: $m300;
				width:100%;
				-webkit-appearance: none;
				-moz-appearance: none;
				padding: 10px 50px 10px 10px;

			}
			&:after {
				width:40px;
				height:100%;
				background: #000;
				color:white;
				text-align:center;
				line-height:36px;
				font-family:'FontAwesome';
				content: '\f0d7';
				display: block;
				top:0;
				right:0;
				z-index:0;
				pointer-events: none;
				position: absolute;
			}
		}
	}
}

.alert {
	font-size:0.95em;
	width:100%;
	padding:7px 10px;
	position: relative;
	color: #fff;
	&.alert-big {
		padding:17px 10px;
		margin:10px 0;
	}
	p {
		 margin-left:10px;
		 font-family: $m300;
		 text-transform:none;
		 display: inline-block;
	}
	i {
		color: #fff;
		bottom:0;
		vertical-align: middle;
		width:15px;
		display: inline-block;
	}
	&.alert-error {
		background: $global_color1;
		border:1px solid lighten($global_color1, 15);
	}
	&.alert-success {
		background: $global_color2;
		border:1px solid lighten($global_color2, 15);
	}
	&.alert-warning {
		background: $global_color3;	
		border:1px solid lighten($global_color3, 15);
	}
	&.alert-info {
		background: $global_color4;
		border:1px solid lighten($global_color4, 15);
	}
}

.form-start .form-container input[type="text"],
.form-start .form-container input[type="email"],
.form-start .form-container fieldset select {
    text-transform: none;
}

.form-start .form-container .input-field .errors,
.form-start .form-container .input-field .correct {
    display: none;
}

.form-start .form-container input[type=text],
.form-start .form-container input[type=email],
.form-start .form-container input[type=number],

.form-start .form-container textarea,
.form-start .form-container fieldset {
    -webkit-appearance: none;
}

.form-start .form-container input.has-errors:invalid,
.form-start .form-container input.has-errors:focus:invalid,
.form-start .form-container input.has-errors:placeholder-shown,
.form-start .form-container input:invalid {
    border: 2px solid #ee3124;
    outline: none;
}
.form-start .form-container input.has-errors:valid,
.form-start .form-container input.has-errors:focus:valid,
.form-start .form-container input:placeholder-shown {
    border: 1px solid black;
}

.form-start .form-container input:invalid ~ .errors,
.form-start .form-container input:focus:invalid ~ .errors,
.form-start .form-container input:valid ~ .correct,
.form-start .form-container input:focus:valid ~ .correct {
    display: inline-block;
}

.form-start .form-container input:required:focus ~ .errors,
.form-start .form-container input:required:focus ~ .correct,
.form-start .form-container input:placeholder-shown ~ .errors,
.form-start .form-container input:placeholder-shown ~ .correct {
    display: none;
}

.form-start .form-container input.has-errors:invalid ~ .errors,
.form-start .form-container input.has-errors:focus:invalid ~ .errors,
.form-start .form-container input.has-errors:placeholder-shown ~ .errors,
.form-start .form-container input.has-errors:valid ~ .correct,
.form-start .form-container input.has-errors:focus:valid ~ .correct {
    display: inline-block;
}
input[type="checkbox"] {
    padding: 0;
    width: 15px;
    height: 15px;
    line-height: 0;
    margin-bottom: 0px;
    background: #fff;
    border: 1px solid #c2c2c2;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked,input[type="radio"]:checked{
	background:#000;
}
#tabs {
	width:100%;
	p {
		text-transform:none;
		padding:15px 0;
		line-height:1.35em;
	}
	ul {
		width:100%;
	}
	.card-selection {
		img {
			width:75px;
		}
		label {
			text-align:center;
		}
	}
	a {
		text-decoration:none;
		color:black;
		display: block;
		padding:20px 15px;

		// text-transform:none;
		&:focus {
			outline:none;
		}
	}
	button {
		padding:0;
		margin:0 auto;
		font-family: $m300;
		width:90%;
		border:none;
	}
	.ui-state-active{ 
		background: $global_grey;
		input[type="checkbox"] {
			background: #000;
			padding:2px;
		}
	}
	li {
		display: inline-block;
		//margin:0 10px;
		border:2px solid $global_grey; 
		&:focus {
			outline:none;
		}
	}
}

.breadcrumb {
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    ul {
	    list-style: none;
	    margin: 5px 0;
	    li {
		    padding: 0 10px;
		    margin-top: 10px;
		    margin-bottom: 10px;
		    display: inline-block;
		    vertical-align: top;
		    position: relative;
		    a {
		    	&.active {
		    	    color: #ee3124
		    	}
    			color: #fff
		    }
		    &:after {
			    border-right: 2px solid #6a6d70;
			    position: absolute;
			    display: block;
			    height: 25px;
			    width: 5px;
			    right: -5px;
			    top: -5px;
			    transform: rotate(18deg);
			    content: ' ';
			}
			&::last-child:after {
			    border: 0;
			}
		}
	}
}