markup/css/style.scss

@font-face {
	font-family: 'PTSans';
	src: url('./../fonts/ptsans/PTSans-Regular.eot');
	src: url('./../fonts/ptsans/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
		 url('./../fonts/ptsans/PTSans-Regular.woff') format('woff'),
		 url('./../fonts/ptsans/PTSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Open Sans';
	src: url('./../fonts/opensans/OpenSans-Regular.eot');
	src: url('./../fonts/opensans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
		 url('./../fonts/opensans/OpenSans-Regular.woff') format('woff'),
		 url('./../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
* {
	box-sizing: border-box;
}
html {
	font-size: 10px;
}
body {
	font-size: 1.6rem;
	font-family: PTSans;
}
img {
	max-width : 100%;
}

@mixin content { 
	width: 1100px; 	
	margin: 0 auto;
}

@mixin flex-column-center {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

@mixin flex-row-center {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

@mixin hover-section {
	display: flex;
	top: 477px; 
	left: -1px;
	width: 350px;
	border: 1px solid #980052;
	border-top: none;
	position: absolute;
	background: #fff;
}

@mixin a-link {
	text-decoration: none;
	text-align: center;
}
header {
	&.slider {
		background : url(../img/combo.jpg) no-repeat;
		background-color: rgba(0,0,0,0.3);
		background-blend-mode: multiply;
		background-position: center;
	}
	div.shadowslider {
		background-color: rgba(0,0,0,0.6);
		height: 224px;

		section.content {
			@include content;
			@include flex-column-center;
			div.header-logo {
				padding-top: 30px;
				@include flex-column-center;
				img {
					height: 62px;
					margin-bottom: 4px;
				}
				p {
					font-family: Open Sans;
					font-size: 1.4rem;
					color : #fff;
					margin-bottom: 30px;
				}
			}
			li {
				display: inline;
				input {
					border: 1px solid #fff;
					background: rgba(0,0,0,0);
					color: #fff;
					height: 40px;
					width: 255px;
					font-size: 2.4rem;
				}
				input[placeholder] {
					background: url(../img/search.png) no-repeat;
					background-position: 211px;
				}
				a {
					@include a-link;
					margin-right: 60px;
					font-size: 2.4rem;
					color: #fff;
				}
				a:last-child {
					margin-right: 50px;
				}
				a:hover {
					border-bottom: 1px solid #980052;
					border-top: 1px solid #980052;
				}
			}
		}
	}
	section.content {
		@include content;
		@include flex-column-center;
		div.shop {
			display: flex;
			padding-top: 15px;
			img:nth-child(2) {
				margin: 0 20px;
			}
		}
		.arrow {
			display: flex;
			margin-top: 110px;
			width: 1100px;
			justify-content: space-between;
			h1 {
				font-size: 4.8rem;
				font-family: Open Sans;
				color: #eee;
			}
		}
		.button {
			height: 70px;
			width: 350px;
			margin: 110px 0;
			background: #980052;
			@include flex-row-center;
			a {
				color: #fff;
				font-size: 2.4rem;
				@include a-link;
			}
			a:hover {
				color: #000;
			}
		}
	}
}

main {
	&.general-inform {
		@include content;
		@include flex-column-center;
	}
	.main-logo {
		margin-top: 50px;
		margin-bottom: 30px;
		font-size: 4.8rem;
		font-family: Open Sans;
		color: #980052;
	}
	.content {
		width: 100%;	
		#stuff2 {
			margin: 0 25px;
		}
		.stuff {
			border: 1px solid #980052;
			float: left;
			width: calc(33% - 13px) ;
			padding: 10px;
			position: relative;
			article span {
				color: #666666;
				font-size: 1.8rem;
			}
			.price-info {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				margin-bottom: 10px;
				.sale {
					font-size: 1.4rem;
					background: #980052;
					color: #fff;
					text-transform: uppercase;
					margin-right: 5px;
				}
				.stuff-name {
					font-size: 2.0rem;
					color: #980052;
				}
				.key-stuff {
					font-size: 1.2rem;
				}
				.number-stuff {
					font-size: 1.6rem;
				}
			}
			.actual-price {
				@include flex-row-center;
				padding-bottom: 10px;
			.old-price {
				font-size: 2.1rem;
				color: #b8b8b8;
				text-decoration: line-through;
				}
			.old-currency {
				margin-right: 25px;
				color: #b8b8b8;
			}
			.new-price {
				font-size: 3.6rem;
				color: #980052;
				font-weight: bold;
				}
			}
			.currency {
				color: #980052;
			}
		}
		#stuff1 .actual-price{
			padding-bottom: 7px;
		}
		#hide1, #hide2, #hide3 {
			display: none;
		}
		.hide-section {
			@include flex-column-center;
			.hide-button {
				height: 60px;
				width: 220px;
				background: #980052;
				@include flex-row-center;
				a {
					color: #fff;
					font-size: 1.8rem;
					@include a-link;
					margin-left: 5px;
				}
				a:hover {
					color: #000;
				}
			}
			.hide-item {
				margin: 20px 0;
				img:nth-child(2) {
				margin: 0 40px;
				}
			}
		}
		#stuff1:hover {
			#hide1 {
				@include hover-section;
			}
			border-bottom: none;
		}
		#stuff2:hover {
			#hide2 {
				@include hover-section;
			}
			border-bottom: none;
		}
		#stuff3:hover {
			#hide3 {
				@include hover-section;
			}
			border-bottom: none;
		}
	}
	.main-button {
		height: 60px;
		width: 348px;
		border: 2px solid #980052;
		margin-top: 40px;
		margin-bottom: 70px;
		@include flex-row-center;
		a {
			color: #980052;
			font-size: 1.8rem;
			@include a-link;
		}
		a:hover {
			color: #000;
		}
	}
}

section {
	&.back {
		background: url(../img/slider.jpg) no-repeat;
		background-color: rgba(0,0,0,0.3);
		background-blend-mode: multiply;
		background-position: center;
	}
	.back-content {
		@include content;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		padding-bottom: 67px;
		.back-content-yellow {
				color: #fff600;
		}
		.back-content-left {
			margin-top: 55px;
			h1 {
				font-size: 4.8rem;
				color: #fff;
				margin-bottom: 20px;
			}
			.back-content-left-insaide {
				@include flex-row-center;
				margin-bottom: 25px;
				.back-content-left-insaide-text {
					margin-left: 27px;
					font-size: 2.4rem;
					color: #fff;
				}
			}
			.back-content-left-button {
				height: 68px;
				width: 345px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #980052;
				a {
					color: #fff;
					font-size: 2.4rem;
					@include a-link;
				}
				a:hover {
					color: #000;
				}
			}
		}
		.back-content-right {
			margin-top: 80px;
			h2 {
				font-size: 2.4rem;
				color: #fff;
				margin-bottom: 20px;
			}
			.back-content-right-insaide {
				@include flex-row-center;
				margin-bottom: 31px;
				.back-content-right-insaide-text {
					margin-left: 27px;
					font-size: 2.4rem;
					color: #fff;
				}
			}
			.back-content-right-button {
				height: 68px;
				width: 345px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #980052;
				margin: 0 auto;
				a {
					color: #fff;
					font-size: 2.4rem;
					@include a-link;
				}
				a:hover {
					color: #000;
				}
			}
		}
	}
}
main#second  {
	#stuff-name {
		font-size: 1.8rem;
	}
	#stuff1 .actual-price {
		padding-bottom: 10px;
	}
}
footer {
	&.footer-bg {
		background: #d3d3d3;
	}
	.footer-content {
		@include content;
		font-size: 1.8rem;
		.footer-content-body {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			padding-top: 35px;
			.footer-content-left {
				margin-top: -30px;
				.footer-content-left-head {
					color: #4b4a4a;
					margin-bottom: 13px;
				}
				.footer-content-left-body {
					@include flex-row-center;
					color: #6a6969;
					.footer-content-left-body-left {
						margin-right: 13px;
					}
				}
			}
			.footer-content-center {
				color: #4b4a4a;
				.footer-content-center-head {
					img {
						margin-right: 5px;
					}
					padding-left: 12px;
					margin-bottom: 28px;
				}
				.footer-content-center-body {
					img {
						margin-right: 5px;
					}
					margin-bottom: 28px;
				}
				.footer-content-center-footer {
					padding-left: 12px;
					img:first-child {
						margin-right: 13px;
					}
				}
			}
			.footer-content-right {
				margin-top: -60px;
				color: #4b4a4a;
				.footer-content-center-social-media {
					@include flex-row-center;
					a {
						@include a-link;
						border-radius: 50%;
						border: 1px solid #d1d1d1;
						height: 38px;
						width: 38px;
						font-size: 1.8rem;
						margin-right: 28px;
						line-height: 2;
						color: #fff;
						background: #4d76a1;
					}
					a:first-child {
						background: #3b5998;
					}
					a:last-child {
						margin-right: 0;
						background: #55acee;
					}
					a:hover {
						color: #000;
					}
				}
				p {
					text-align: center;
					margin-bottom: 15px;
				}
			}
		}
		address {
			text-align: center;
			color: #4b4a4a;
			padding-bottom: 40px;
			padding-top: 20px;
			span {
				padding-right: 80px;
			}
		}
	}
}
// -----------------for JQ---------------------
.hide {
	display: none;
}
.show {
	display: show;
}
#relative {
	position: relative;
}
#absolute {
	position: absolute;
	right: -16px;
	bottom: -4px;
	height: 18px;
	width: 18px;
	background: #980052;
	color: #fff;
	text-align: center;
	font-size: 1.2rem;
}
//---------------------------------------------
// @media screen and (orientation: portrait) {
//    	div.header-logo {
//    		display: none;
//    	}
// }