@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../../Fonts/digitalclock/BebasNeue-webfont.eot');
    src: url('../../Fonts/digitalclock/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../Fonts/digitalclock/BebasNeue-webfont.woff') format('woff'),
         url('../../Fonts/digitalclock/BebasNeue-webfont.ttf') format('truetype'),
         url('../../Fonts/digitalclock/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* unit-icon */
.unit-icon { padding-top: 21px; color: #bbaa98; background-color: white; float: left; position: relative; height: 100%; width: 100%; cursor: pointer;}
.unit-icon span {clear: both; margin-left: -15px; left: 50%; float: left; position: relative; background-color: #bbaa98; margin-bottom: 4px; height: 4px; width: 30px;}

/* member-icon */
.member-icon {background-color: white; float: left; position: relative; height: 60px; width: 60px;}
.member-icon .head { border-color: #bbaa98; margin-left: -15%; height: 32%; width: 30%; border-style: solid; border-width: 4px; top: 24%; left: 50%; float: left; position: absolute; border-radius: 50%}
.member-icon .body { border-style: solid; border-width: 4px; border-right-color: #bbaa98; border-left-color: #bbaa98; border-top-color: #bbaa98; border-bottom-color: transparent; bottom: 15%; margin-left: -30%; height: 30%; width: 60%; float: left; position: absolute; left: 50%; border-radius: 50%}

/* cart-btn */
.cart-icon {float: none; position: relative; display: inline-block; height: 100%; width: 60px; background-color: white;}
.cart-icon .hand {top: 23%; margin-left: -12%; left: 50%; float: left; position: absolute; border-bottom-color: transparent; border-style: solid; border-width: 3px; height: 12%; width: 24%;}
.cart-icon .bag { margin-left: -24%; border-style: solid; border-width: 3px; bottom: 23%; left: 50%; float: left; position: absolute; height: 45%; width: 48%; border-radius: 2px;}
.cart-icon .cartnum {left: 10px; bottom: 10px; padding-top: 2px; color: white; background-color: #ff6666; width: 18px; height: 18px; line-height: 18px; text-align: center; float: left; position: absolute; font-size: 15px; font-family: BebasNeueRegular; border-radius: 30px;}

/* search-icon */
.search-icon {background-color: #bbaa98; float: left; position: relative; height: 100%; width: 100%;}
.search-icon .lens {border-color: white; left: 26%; top: 26%; position: absolute; border-style: solid; border-width: 4px; height: 40%; width: 40%; border-radius: 50%}
.search-icon .grip { background-color: white; right: 30%; bottom: 20%; float: left; position: absolute; height: 26%; width: 4px; border-radius: 2px;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* item btn */
.item-icon { display: inline-block; padding-left: 15px; padding-bottom: 14px; padding-right: 15px; padding-top: 16px; background-color: white; float: none; position: relative; height: 100%; width: 60px; cursor: pointer;}
.item-icon span { float: left; position: relative; background-color: #bbaa98; margin: 3px; height: 4px; width: 4px;}

/* facebook */
.facebook-icon { font-weight: bold; font-family: Lato; float: left; position: relative; text-align: center; line-height: 48px; font-size: 18px; color: white; height: 48px; width: 30px;}

/* youtube */
.youtube-icon {float: left; position: relative; height: 48px; width: 30px;}
.youtube-icon .frame {background-color: white; float: left; margin-top: -6px; margin-left: -9px; height: 12px; width: 18px; left: 50%; top: 50%; position: absolute; border-radius: 3px;}
.youtube-icon .play {margin-left: -3px; margin-top: -3px; left: 50%; top: 50%; height: auto; border-left-style: solid; border-bottom-style: solid; border-top-style: solid; border-bottom-color: transparent; border-left-width: 6px; border-bottom-width: 3px; border-top-width: 3px; float: left; position: absolute; border-left-color: #2d2d2d; border-top-color: transparent;}

/* instagram */
.instagram-icon {float: left; position: relative; height: 48px; width: 30px;}
.instagram-icon .camera {border-color: white; border-style: solid; border-width: 2px; margin-left: -8px; margin-top: -8px; left: 50%; top: 50%; float: left; position: absolute; height: 16px; width: 16px; border-radius: 2px;}
.instagram-icon .camera .head { background-color: white; float: left; position: relative; height: 4px; width: 100%;}
.instagram-icon .camera .view {right: 0px; top: 0px; z-index: 2; background-color: #2d2d2d; float: left; position: absolute; height: 3px; width: 3px;}
.instagram-icon .lens {background-color: #2d2d2d; margin-left: -5px; margin-top: -5px; z-index: 2; border-color: white; left: 50%; top: 50%; float: left; position: relative; border-style: solid; border-width: 2px; height: 10px; width: 10px; border-radius: 8px;}


/* home-icon */
.home-icon {height: 30px; width: 30px; float: left; position: relative;}
.home-icon .home-top { margin-left: -13px; border-bottom-color: #9d9d9d; border-bottom-style: solid; border-bottom-width: 9px; border-right-color: transparent; border-left-color: transparent; border-right-style: solid; border-left-style: solid; border-right-width: 13px; border-left-width: 13px; top: 4px; float: left; left: 50%; position: absolute;}
.home-icon .home-body {background-color: #9d9d9d; height: 11px; bottom: 6px; left: 50%; float: left; position: absolute; margin-left: -10px; width: 20px;}
.home-icon .home-door {background-color: white; margin-left: -2px; width: 4px; height: 8px; left: 50%; float: left; position: absolute; bottom: 6px;}
/* email-icon */

.email-icon {height: 30px; width: 30px; float: left; position: relative;}
.email-icon .mailbox {border-color: #9d9d9d; border-width: 3px; border-style: solid; margin-left: -10px; margin-top: -8px; height: 16px; width: 20px; float: left; position: absolute; left: 50%; top: 50%;  border-radius: 2px;}
.email-icon .mailmask { margin-left: -10px; margin-top: -8px; height: 16px; width: 20px; float: left; position: absolute; left: 50%; top: 50%;  border-radius: 2px; overflow: hidden;}
.email-icon .mailmask .mailopening {
	border-bottom-color: #9d9d9d;
	border-right-color: #9d9d9d;
	border-bottom-style: solid;
	border-right-style: solid;
	border-bottom-width: 3px;
	border-right-width: 3px;
	top: -17px;
	margin-left: -12px;
	float: left;
	position: absolute;
	left: 50%;
	height: 24px;
	width: 24px;
	border-radius: 2px;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* phone-icon */
.phone-icon {height: 30px; width: 30px; float: left; position: relative;}
.phone-icon .phone-body { margin-top: -5px; top: 50%; left: 50%; margin-left: -8px; float: left; position: absolute; background-color: #9d9d9d; height: 12px; width: 16px; 
	border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px;}
.phone-icon .phone-handset { margin-top: -10px; border-color: #9d9d9d; border-width: 3px; border-style: solid; top: 50%; left: 50%; float: left; position: absolute; margin-left: -10px; height: 8px; width: 20px; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;}



/* addoess-icon */
.address-icon { height: 30px; width: 30px; float: left; position: relative;}
.address-icon .address-head { margin-top: -12px; background-color: #9d9d9d; top: 50%; margin-left: -8px; left: 50%; float: left; position: absolute; height: 16px; width: 16px; border-radius: 10px;}
.address-icon .address-head .address-eye {left: 50%; top: 50%; float: left; position: absolute; margin-top: -3px; margin-left: -3px; height: 6px; width: 6px; background-color: #3e3e3e; border-radius: 4px;}
.address-icon .address-head .address-weye {background-color: white; left: 50%; top: 50%; float: left; position: absolute; margin-top: -3px; margin-left: -3px; height: 6px; width: 6px; border-radius: 4px;}
.address-icon .address-tag { 
	border-top-color: #9d9d9d; 
	margin-top: 0px; 
	margin-left: -7px; 
	border-left-color: transparent; 
	border-bottom-color: transparent; 
	border-right-color: transparent; 
	top: 50%; 
	left: 50%; 
	width: 0px; height: 0px;
	border-style: solid; 
	border-left-width: 7px; 
	border-bottom-width: 0; 
	border-right-width: 7px; 
	border-top-width: 13px; 
	position: relative; 
	float: left; 
	clear: both;
}


/* tools-icon */
.tools-icon {float: left; position: absolute; left: 50%; top: 50%; margin-left: -17px; margin-top: -17px; height: 34px; width: 34px;}
.tools-icon .tools-body { border-color: #e5e6e7; border-style: solid; border-width: 4px; margin-left: -13px; margin-top: -13px; left: 50%; top: 50%; float: left; position: absolute; height: 26px; width: 26px; border-radius: 24px;}
.tools-icon .tools-line {top: 0px; bottom: 0px; margin-left: -3px; left: 50%; float: left; position: absolute; height: 100%; width: 6px; }

.tools-icon .tools-line .ld {background-color: #e5e6e7; top: 0px; left: 0px; float: left; position: absolute; height: 8px; width: 6px; border-radius: 2px;}
.tools-icon .tools-line .rd {left: 0px; bottom: 0px; background-color: #e5e6e7; float: left; position: absolute; height: 8px; width: 6px; border-radius: 2px;}

.tools-icon .line1 {
	transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}
.tools-icon .line2 {
	transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
}
.tools-icon .line3 {
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
.tools-icon .line4 {
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}

.tools-icon:active  .tools-body {border-color: #585e60;}
.tools-icon:active  .tools-line .ld {background-color: #585e60;}
.tools-icon:active  .tools-line .rd {background-color: #585e60;}


/* prev next */
.prev-btn, .next-btn { z-index: 99999; background-color: transparent; margin-top: -24px; top: 50%; float: left; position: absolute; height: 48px; width: 48px;}

.prev-btn {left: 20px;}
.next-btn {right: 20px;}
.arrow-icon {border-left-color: white; border-top-color: white; margin-left: -15px; margin-top: -15px; left: 50%; top: 50%; float: left; position: absolute; border-left-width: 2px; border-left-style: solid; border-top-style: solid; border-top-width: 2px; height: 30px; width: 30px;}

.arrow-icon:active, .arrow-icon:hover {border-left-color: #2ade73; border-top-color: #2ade73;}
.prev-btn:active {left: 15px;}
.next-btn:active {right: 15px;}

.next-btn .next {
	-ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.prev-btn .prev {
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


@media screen and (max-width: 960px) {
	.prev-btn {left: 10px;}
	.next-btn {right: 10px;}
}