style.scss

body{
	width:100%;
	height:100%;
	padding: 0;
	margin: 0;
	background-color: #f7f7f7;
	font-family: segoeuil;
	overflow-x: hidden;
}
@font-face{
    font-family: "segoeuil";
    src : url("segoeuil.ttf");
}
.wrapper1{
	width:120%;
	height: 655px;
	//border:1px solid black;
	.logo_platform{
		width:22%;
		background-color: #fff;
		height:100%;
		transition: 1s ease-out;
		float: left;
		.logo-container{
			width:35%;
			text-align: center;
			height:160px;
			//border:1px solid black;
			margin: 0 auto;
			img{
				height:120px;
				width:120px;
				margin-top:20px;
			}
		}
		.selection{
			width:83%;
			height:50px;
			margin: auto;
			//border:1px solid black;
			.department{
				width:48%;
				height: inherit;
				float: left;
				border-radius: 3px;
				background-color: #f0f0f0;
				text-align: center;
				ul{
					width:60%;
					li{
						list-style-type: none;
						font-size:13px;
						font-weight:bolder;
						color:#333;
						padding-left: 0;
						.fa{
							float:right;
							margin-top: 3px;
							color:#ff8f07;
						}
					}
				}
			}
			.my-amazon{
				@extend .department;
				margin-left: 4%
			}
		}
		.search{
			width:83%;
			height:60px;
			margin: 50px auto;
//			border-left-style: none;
//			border-right-style: none;
//			border-top-style: none;
			border-bottom:1px solid #f0f0f0;
			p{
				font-size:12px;
				margin-top: 0;
				font-weight:bolder;
			}
			input[type=text]{
				float:left;
				width:90%;
				height:25px;
				font:18px tahoma;
				border-left:2px solid #ff8f07;
				border-right:none;
				border-top:none;
				border-bottom:none;
				color:#b0b0b0;
			}
			::placeholder{
					color:#e0d7d7;
				}
			.fa{
				color:#ff8f07;
				float: right;
				margin-right: 10px;
			}
		}
		.roll{
			width:90%;
			margin: 60% auto 0 auto;
			height:90px;
			//border:1px solid red;
			p.left{
				text-align: left;
				display: inline-block;
				font-weight:bolder;
				font-size:15px;
				margin: 0;
				.fa{
					margin-right: 20px;
				}
			}
			p.right{
				text-align: right;
				margin: 0;
				margin-left: 52%;
				color:#7f7e7e;
				cursor: pointer;
				display: inline-block;
			}
			.cart{
				width:100%;
				height:69%;
				margin-top: 2%;
				background-color: #f0f0f0;
				p{
					padding-top:18px;
					.money{
						margin: 0;
						font-weight:bolder;
						font-size:20px;
						font-family: sans-serif;
						margin-left: 20px;
					}
					.view{
						float:right;
						color:#ff8f07;
						margin-right: 10px;
						font-weight:bolder;
					}
				}
			}
		}
	}
	.logo-platform2{
		@extend .logo_platform;
		//border:1px solid red;
		width:6%;
		display: none;
		.logo-container{
			width:100%;
			text-align: center;
			height:160px;
			//border:1px solid black;
			margin: 0 auto;
			img{
				height:80px;
				width:80px;
				margin-top:20px;
			}
		}
		.cart{
			width:90%;
			height:15%;
			margin:350px auto 0 auto;
			text-align: center;
			border-bottom:1px solid #f0f0f0;
			p{
				padding-top:18px;
				.money{
					margin: 0;
					font-weight:bolder;
					font-size:16px;
					font-family: sans-serif;
				}
				.view{
					color:#ff8f07;
					font-size: 12px;
					font-weight:bolder;
				}
			}
		}
		.righty{
			font-size:14px;
			color:#b0b0b0;
			cursor:pointer;
			text-align: center;
		}
	}
	.anny{
		animation: anny 1s linear 1 forwards;
	}
	@keyframes anny{
		0%{
			transform: translateX(0%);
			display:none;
		}
		100%{
			transform: translateX(-700px);
			display: none;
		}
	}
	
	.anny2{
		animation: anny2 .5s linear 1 forwards;
	}
	@keyframes anny2{
		0%{
			transform: translateX(0%)
		}
		100%{
			transform: translateX(-360px);
		}
	}
	.banner-container{
		width:78%;
		height:60%;
		//display: none;
		//border:1px solid red;
		float:left;
		.banner1{
			width:80%;
			height:100%;
			float: left;
			background-image:url(../code/gear.jpg);
			background-position: center;
			background-repeat: no-repeat;
			.text{
				width:25%;
				margin-top: 10%;
				margin-left: 7%;
				p{
					color: #fff;
					.small{
						font-size:8px;
						font-weight: bold;
					}
					.light{
						font-size: 35px;
						font-weight: lighter;
					}
					.bold{
						@extend .light;
						font-weight:bolder;
						font-family: sans-serif;
					}
				}
			}
			.slider-sign{
				width:20%;
				height: 40px;
				//border:1px solid black;
				margin-left: 7%;
				float: left;
				margin-top: 12%;
				.fa{
					color: #fff;
					font-size: 4px !important;
					float: left;
					margin-left: 17px;
					margin-top: 4px;
				}
				.active{
					border:1px solid #ff8f07;
					padding: 4px;
					margin-top: 0;
					border-radius: 100%;
				}

			}
			.shop{
				width:45%;
				background-color: #fff;
				height:80px;
				float: right;
				margin-right: 50px;
				margin-top: 60px;
				.image{
					float: left;
					//border:1px solid black;
					margin-top: 7%;
					background-image: url(gear3.jpg);
					background-size: contain;
					background-repeat: no-repeat;
					margin-left: 5%;
					width:10%;
					height:35%;

				}
				.text{
					float:left;
					width:40%;
					//border:1px solid red;
					margin-left: 4%;
					margin-top: 5%;
					p{
					color:black;
					margin: 0;
						.bold{
							font-size:15px;
							font-weight: bolder;
						}
						.small{
							font-size:15px;
							color:#b7b7b7;
						}
					}
				}
				button{
					background-color: #ff8f07;
					color:#f7f7f7;
					width:26%;
					border:none;
					filter: grayscale(10%);
					height:50%;
					margin: 5% 0 0 9%;
				}
			}
		}
		.banner2{
			float:right;
			width:18.5%;
			height:100%;
			background-color:black;
			background-image: url(../code/products/baggg.jpg);
			background-position: left;
			background-size: cover;
			.fa{
				float:right;
				margin-top: 70%;
				color:#f7f7f7;
				font-weight: lighter;
			}
		}
	}
	.produt{
		//border:1px solid red;
		//display: none;
		width:76%;
		height:40.5%;
		float: left;
		margin-left: 1.5%;
		p{
			font-weight: bolder;
			color:#7f7e7e;
			font-family: sans-serif;
		}
		.products{
			width:100%;
			height:80%;
			//border:1px solid blue;
			.sub{
				height:100%;
				float:left;
				width:13.8%;
				margin-left: 0.4%;
				background-color: #fff;
				.imag{
					width:80%;
					margin: auto;
					height:56%;
					background-image: url(../code/products/bag.jpg);
					background-size: contain;
					background-repeat: no-repeat;
				}
				.imag2{
					@extend .imag;
					background-image: url(../code/products/cap.jpg);
				}
				.imag3{
					@extend .imag;
					background-image: url(../code/products/cam%20indoor.jpg);
				}
				.imag4{
					@extend .imag;
					background-image: url(../code/products/ladies%20bag.jpg);
				}
				.imag5{
					@extend .imag;
					background-image: url(../code/products/thermometer.jpg);
				}
				.imag6{
					@extend .imag;
					background-image: url(../code/products/desk%20lamp.jpg);
				}
				.imag7{
					@extend .imag;
					background-image: url(../code/products/anker.jpg);
				}
				.text2{
					margin-left: 7%;
					margin-top: 12%;
					p{
						font-family: sans-serif;
						.bold{
							font-weight: 700;
							color: #545050;
							font-size:15px;
						}
						.small{
							color:#c4bcbc;
						}
					}
				}
			}
		}
	}
}