@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
scroll-padding-top: 2rem;
scroll-behavior: smooth;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
:root{
--bg-color: #ffffff;
--text-color: #ffffff;
--main-color: #ff0000;
--big-font: 4.5rem;
--h2-font: 3.3rem;
--h3-font: 2rem;
--normal-font: 1rem;
}
:root {
--duration: 1.5s;
--container-size: 250px;
--box-size: 33px;
--box-border-radius: 15%;
}
.custom-link {
display: inline-block;
background-image: url('../img/SAL_1.webp');
background-size: 100% 100%;
width: 12rem;
height: 3rem;
text-decoration: none;
}
.custom-link:hover {
cursor: pointer;
}
.custom-link2 {
display: inline-block;
background-image: url('../img/SAL_2.webp');
background-size: 100% 100%;
width: 12rem;
height: 3rem;
text-decoration: none;
}
.custom-link2:hover {
cursor: pointer;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ffe1a9;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.logo-container3 {
text-align: center;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.container3 {
width: var(--container-size);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
@keyframes slide {
0% {
background-color: #ffd417;
transform: translatex(0vw);
}
100% {
background-color: #fbc923;
transform: translatex(
calc(var(--container-size) - (var(--box-size) * 1.25))
);
}
}
@keyframes color-change {
0% {
background-color: #ff4d17;
}
100% {
background-color: #fbc123;
}
}
@keyframes flip-1 {
0%,
15% {
transform: rotate(0);
}
35%,
100% {
transform: rotate(-180deg);
}
}
@keyframes squidge-1 {
5% {
transform-origin: center bottom;
transform: scalex(1) scaley(1);
}
15% {
transform-origin: center bottom;
transform: scalex(1.3) scaley(0.7);
}
25%,
20% {
transform-origin: center bottom;
transform: scalex(0.8) scaley(1.4);
}
55%,
100% {
transform-origin: center top;
transform: scalex(1) scaley(1);
}
40% {
transform-origin: center top;
transform: scalex(1.3) scaley(0.7);
}
}
@keyframes flip-2 {
0%,
30% {
transform: rotate(0);
}
50%,
100% {
transform: rotate(-180deg);
}
}
@keyframes squidge-2 {
20% {
transform-origin: center bottom;
transform: scalex(1) scaley(1);
}
30% {
transform-origin: center bottom;
transform: scalex(1.3) scaley(0.7);
}
40%,
35% {
transform-origin: center bottom;
transform: scalex(0.8) scaley(1.4);
}
70%,
100% {
transform-origin: center top;
transform: scalex(1) scaley(1);
}
55% {
transform-origin: center top;
transform: scalex(1.3) scaley(0.7);
}
}
@keyframes flip-3 {
0%,
45% {
transform: rotate(0);
}
65%,
100% {
transform: rotate(-180deg);
}
}
@keyframes squidge-3 {
35% {
transform-origin: center bottom;
transform: scalex(1) scaley(1);
}
45% {
transform-origin: center bottom;
transform: scalex(1.3) scaley(0.7);
}
55%,
50% {
transform-origin: center bottom;
transform: scalex(0.8) scaley(1.4);
}
85%,
100% {
transform-origin: center top;
transform: scalex(1) scaley(1);
}
70% {
transform-origin: center top;
transform: scalex(1.3) scaley(0.7);
}
}
@keyframes flip-4 {
0%,
60% {
transform: rotate(0);
}
80%,
100% {
transform: rotate(-180deg);
}
}
@keyframes squidge-4 {
50% {
transform-origin: center bottom;
transform: scalex(1) scaley(1);
}
60% {
transform-origin: center bottom;
transform: scalex(1.3) scaley(0.7);
}
70%,
65% {
transform-origin: center bottom;
transform: scalex(0.8) scaley(1.4);
}
100%,
100% {
transform-origin: center top;
transform: scalex(1) scaley(1);
}
85% {
transform-origin: center top;
transform: scalex(1.3) scaley(0.7);
}
}
body{
color: var(--text-color);
background-image: url('https://artitech.ro:85/assets/fnafbg.webp');
background-size: cover;
position: relative;
background-attachment: fixed;
}
@keyframes banner-animation {
0% {
transform: translateX(80%);
}
100% {
transform: translateX(-30%);
}
}
.container{
max-width: 1068px;
margin: auto;
width: 100%;
}
.thumbnail-small {
width: 40px;
height: 40px;
object-fit: cover;
margin-right: 10px;
}
.clear-icon {
font-size: 35px;
color: #000000;
cursor: pointer;
margin-left: 5px;
}
.product-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestions {
position: absolute;
width: 30%;
right: 4%;
top: calc(100% + 5px);
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.page-navigation {
display: flex;
flex-direction: column;
align-items: center;
}
.page-navigation ul {
display: flex;
list-style-type: none;
padding: 0;
}
.page-navigation ul li {
margin: 0 5px;
}
.page-navigation .page-link {
text-decoration: none;
color: black;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.page-navigation .page-link.active {
background-color: #ff8800;
color: white;
border-color: #ff8800;
}
.page-navigation .dots {
padding: 5px 10px;
}
.pagination-input {
margin-top: 10px;
display: flex;
align-items: center;
}.unique-category-item img {
width: 200%;
max-width: 170px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
transition: all 0.3s ease-in-out;
border: 0px solid #000;
border-radius: 15px;
}
.unique-category-item1 {
margin: 10px;
text-align: center;
transition: transform 0.3s ease-in-out;
position: relative;
}
.unique-category-item1 img {
width: 200%;
max-width: 170px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
transition: all 0.3s ease-in-out;
border: 0px solid #000;
border-radius: 15px;
}
#timer2, #timer3, #timer4 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.1rem;
color: white;
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius: 10px;
font-family: Arial, sans-serif;
z-index: 2;
text-align: center;
line-height: 1.2;
width: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.unique-product-category {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
background-image: url('../img/banner.webp');
}
.unique-category-item:hover {
transform: scale(1.1);
filter: brightness(160%);
}
.unique-category-item1:hover {
transform: scale(1.1);
filter: brightness(160%);
}
.unique-category-item img {
width: 200%;
max-width: 300px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
transition: all 0.3s ease-in-out;
border: 0px solid #000;
border-radius: 15px;
filter: brightness(50%);
transition: filter 0.5s ease-in-out;
}
.unique-category-item1 img {
width: 200%;
max-width: 300px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
transition: all 0.3s ease-in-out;
border: 0px solid #000;
border-radius: 15px;
}
.unique-category-item1 img:hover {
transform: scale(1.005);
filter: brightness(170%);
}
.unique-category-item img:hover {
transform: scale(1.005);
filter: brightness(170%);
}
.unique-category-item5 img {
  width: 200%;
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border: 2px solid #000;
  border-radius: 15px;
}
.unique-category-item5 img:hover {
  transform: scale(1.005);
  filter: brightness(170%);
  }
.pagination-input input[type="number"] {
width: 100px;
padding: 8px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.pagination-input button {
padding: 8px 15px;
border: 1px solid #ff8800;
background-color: #ff8800;
color: white;
border-radius: 4px;
cursor: pointer;
}
#openButton{
font-size: 2rem !important;
}
.pagination-input button:hover {
background-color: #ff5100;
}
.suggestion-item {
padding: 10px;
display: flex;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
left: -30px;
right: -30px;
border: 1px dashed #000000;
}
.suggestion-item:hover {
background-color: #ff8800;
}
#slider-value {
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #666;
}
.sale-ribbon {
position: absolute;
top: 0;
right: 0;
background-color: red;
color: white;
padding: 5px;
transform: rotate(0deg);
transform-origin: 0 0;
border-radius: 5px;
animation: colorchange 2s infinite;
}
@keyframes colorchange {
0%   {background: red;}
50%  {background: rgb(255, 94, 0);}
100% {background: red;}
}
.old-price, .new-price {
display: inline-block;
border-radius: 50%;
padding: 5px;
}
.old-price {
text-decoration: line-through;
border-radius: 20px;
padding: 7px;
background-color: #f0f0f0;
}
.new-price {
color: red;
font-weight: 500;
background-color: #ffe5d9d0;
border-radius: 20px;
padding: 7px;
}
.search-input {
border: none;
background: none;
font-size: 16px;
padding: 8px;
color: #333;
outline: none;
}
.highlighted-collection {
margin: 20px auto;
max-width: 100%;
text-align: center;
position: relative;
}
.highlighted-collection h2 {
color: #ff8c00;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.products-container {
position: relative;
display: flex;
overflow: hidden;
padding: 20px;
background-color: #0d0d0d4f;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
z-index: 2;
}
.products-wrapper {
display: flex;
transition: transform 0.3s ease;
}
.navigation {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
pointer-events: none;
}
.arrow {
pointer-events: all;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 50%;
color: white;
}
#prev-arrow {
position: absolute;
left: -40px;
}
#next-arrow {
position: absolute;
right: -40px;
}
.product {
  flex: 0 0 calc(20% - 10px); /* Adjusted for 5 products */
  border-radius: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  margin: 0 5px; /* Adjust the margin as needed */
  box-sizing: border-box;
}

.product:last-child {
margin-right: 0;
}
.product:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.product h3 {
font-size: 10px;
margin-bottom: 5px;
color: #ffffff;
}
.product img {
width: 80%;
height: auto;
border-radius: 4px;
margin-bottom: 5px;
}
.productsuggested {
flex: 0 0 calc(25% - 15px);
margin-right: 20px;
background-color: #ffffff;
padding: 20px;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: transform 0.3s;
}
.productsuggested {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.productsuggested:last-child {
margin-right: 0;
}
.productsuggested:hover {
transform: scale(1.01);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#suggested-text {
font-size: 20px;
font-weight: bold;
color: #333;
text-align: center;
padding: 10px;
background-color: #ffc526;
border-radius: 5px;
margin-bottom: 20px;
}
.productsuggested h3 {
font-size: 14px;
margin-bottom: 5px;
color: #ffffff;
}
.productsuggested img {
width: 50%;
height: auto;
border-radius: 4px;
margin-right: 5px;
}
.productsuggested .add-to-cart{
display: flex;
margin: 1.5rem auto 0 auto;
padding: 12px 20px;
border: none;
background: #ffbb00;
color: var(--bg-color);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
border-radius: 20px;
transition: all .35s ease;
}
.productsuggested .add-to-cart:hover{
background: #ff0000;
transform: translateY(-5px);
}
.product-name{
color: #000000;
position: relative;
font-size: 20px;
font-weight: 300;
bottom: 7px;
}
.navigation {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.arrow {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #ff8c00;
color: #ffffff;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.highlighted-collection h2 {
color: #ff9100;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
background-color: #000000f2;
}
.arrow:not(:last-child) {
margin-right: 10px;
}
.arrow:hover {
background-color: #ff6f00;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.page-navigation {
display: flex;
justify-content: center;
margin-top: 20px;
}
.page-navigation ul {
list-style: none;
display: flex;
}
.page-navigation li {
margin: 0 10px;
}
.custom-link{
  border-radius:1rem;
}
.page-navigation li a {
display: block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
text-decoration: none;
background-color: #fff;
color: #333;
margin-bottom: 20px;
}
.video-container video {
background-color: transparent;
width: 412px;
height: 126px;
position: fixed;
bottom: 0;
right: 0;
z-index: 10;
pointer-events: none;
margin-right:20px;
margin-bottom:3rem;
cursor: pointer;
border-radius: 10px 30px 10px 30px;
}
.video-container video::-webkit-media-controls {
display:none !important;
}
.video-container video::-webkit-media-controls-enclosure {
display:none !important;
}
.video-container video::-webkit-media-controls-panel {
display:none !important;
}
.video-container video::-webkit-media-controls-play-button {
display:none !important;
}
.video-container video::-webkit-media-controls-timeline {
display:none !important;
}
.video-container video::-webkit-media-controls-volume-slider {
display:none !important;
}
.video-container video::-webkit-media-controls-mute-button {
display:none !important;
}
.page-navigation li a:hover {
background-color: #f1f1f1;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
label {
margin-right: 10px;
}
select {
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
select:hover {
background-color: #ddd;
}
select:focus {
outline: none;
box-shadow: 0px 0px 5px #bbb;
}
header{
position: fixed;
top :0;
left: 0;
width: 100%;
z-index: 100;
}
.nav-wrapper {
background: rgba(255, 255, 255, 0);
width: 100%;
}
section{
padding: 100px 14%;
}
.home{
min-height: 100vh;
width: 100%;
background-size: cover;
background-position: center top;
position: relative;
display: grid;
grid-template-columns: repeat(1, 1fr);
align-items: center;
border-radius: 30px;
}
.home-text h1{
font-size: var(--big-font);
font-weight: 800;
line-height: 1.2;
letter-spacing: .6rem;
margin-bottom: 1.4rem;
}
.home-text span{
font-size: var(--h2-font);
}
.home-text p{
font-size: var(--normal-font);
font-weight: 500;
margin-bottom: 3rem;
letter-spacing: .2rem;
}
.btn{
display: inline-block;
padding: 13px 25px;
background: rgb(255, 0, 0);
color: var(--bg-color);
font-size: 15px;
letter-spacing: 1px;
font-weight: 600;
border-radius: 5px;
transition: all .35s ease;
}
.btn:hover{
transform: translateY(-5px);
background: var(--text-color);
color:#000;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin: 0 auto;
}
#account-icon{
margin-right:14px;
color:#fff;
}
.logo{
font-size: 1.1rem;
color: #ffffff;
font-weight: 400;
font-weight: bold;
white-space: nowrap;
margin-right:5px;
}
#cart-icon{
font-size: 1.8rem;
cursor: pointer;
color:#fff;
}
#account-icon{
font-size: 1.8rem;
cursor: pointer;
}
#delivery-icon{
font-size: 1.5rem;
cursor: pointer;
color:#fff;
}
#week-icon{
font-size: 1.5rem;
cursor: pointer;
}
#card-icon{
font-size: 1.5rem;
cursor: pointer;
color: #fff;
}
#all-icon{
font-size: 1.5rem;
cursor: pointer;
color:#fff;
}
#contact-icon{
font-size: 1.5rem;
cursor: pointer;
color:#fff;
}
.modal {
display: none;
position: fixed;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
padding: 20px;
border-radius: 10px;
width: 70%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
position: relative;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
animation: animate 0.5s;
z-index: 2;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}
@keyframes animate {
0% {transform: translateY(-50px); opacity: 0;}
100% {transform: translateY(0); opacity: 1;}
}
.cart{
position: fixed;
top: 0;
right: -100%;
width: 360px;
min-height: 100vh;
padding:20px;
background: var(--bg-color);
box-shadow: -2px 0 4px hsl(0 4% 15% / 10%);
transition: 0.3s;
max-height: 500px;
overflow-y: auto;
}
.cart.active{
right:0;
}
.cart-box{
display: grid;
grid-template-columns: 32% 50% 18%;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.cart-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 1rem;
}
.detail-box{
display: grid;
row-gap: 0.5rem;
}
.cart-product-title{
font-size:1rem;
text-transform: uppercase;
color:#000;
}
.cart-price{
font-weight: 500;
color:#000;
}
.cart-quantity{
border:1px solid #000;
outline-color:var(--main-color);
width: 2.4rem;
text-align: center;
font-size:1rem;
border-radius:5px;
}
.cart-remove{
font-size:24px;
color: var(--main-color);
cursor: pointer;
}
.total{
display:flex;
justify-content: flex-end;
margin-top: 1.5rem;
border-top: 1px solid #000;
}
.total-price{
margin-left: 0.5rem;
color:#000;
}
.total-title{
  font-size: 1rem;
  font-weight: 600;
  color:#000;
}
.btn-buy{
display: flex;
margin: 1.5rem auto 0 auto;
padding: 12px 20px;
border: none;
background: #ff5e00;
color: var(--bg-color);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
border-radius: 20px;
transition: all .35s ease;
}
.btn-buy:hover{
background: #ff0000;
transform: translateY(-5px);
}
#close-cart{
position: absolute;
top: 1rem;
right: 0.8rem;
font-size: 2rem;
color: #000;
cursor: pointer;
}
.cart-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
}
.section-title{
font-size: 1.5rem;
font-weight: 600;
text-align:center;
margin-bottom: 1.5rem;
background-color:#ff3d02;
border-radius:20px;
color:#fff;
}
#uniqueSidebar {
height: 100%;
width: 250px;
position: fixed;
z-index: 9990;
top: 0;
left: 0;
background: linear-gradient(145deg, #991e1e, #ff8800);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
overflow-x: hidden;
transition: width 0.5s;
padding-top: 60px;
}
.sidebarLink h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#uniqueSidebar .sidebarLink {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 15px;
color: #ffffff;
display: block;
transition: color 0.3s, transform 0.3s;
}
#uniqueSidebar .sidebarLink:hover {
color: #f1f1f1;
transform: translateX(10px);
}
#uniqueSidebar .closeButton {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #ffffff;
cursor: pointer;
}
.sidebarcat{
background-color: #d87829;
border-radius: 2rem;
}
#openButton {
font-size: 20px;
cursor: pointer;
background-color: #ffffff00;
padding-right:20px;
color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
}
#openButton:hover {
background-color: #33333341;
}
.shop-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
gap: 1.5rem;
border-radius:20px;
padding-top:1rem;
}
.unique-product-category {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-image: url('../img/banner.webp');
}
.unique-category-item {
margin: 10px;
text-align: center;
transition: transform 0.3s ease-in-out;
position: relative;
}
.unique-category-item:hover {
transform: scale(1.1);
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.animated-button {
display: inline-block;
font-size: 1.2rem;
padding: 10px 20px;
color: #fff;
background-color: #ff3d02;
text-decoration: none;
border-radius: 20px;
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
margin-bottom: 2rem;
margin-top:1rem;
}
.animated-button:hover {
background-color: #ff6e40;
transform: scale(1.1);
}
.unique-category-item img {
width: 200%;
max-width: 300px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
border: 2px solid #000;
border-radius: 15px;
}
.unique-category-item img:hover {
transform: scale(1.1);
filter: brightness(80%);
}


/* Loading Screen Styles */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://artitech.ro:85/assets/fnaf-background.webp');
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  z-index: 9990;
  filter: contrast(110%);
  background-size: cover;
}

/* Existing Switcher CSS */
a.switcher {
  display: block;
  position: fixed;
  text-decoration: none;
  z-index: 9990;
  right: 20px;
  bottom: 20px;
  width: 16px;
  height: 16px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}

a.switcher:hover {
  opacity: 0;
}

a.switcher:before {
  display: block;
  content: '';
  position: absolute;
  border-radius: 4px;
  width: 2px;
  height: 5px;
  background: #fff;
  top: 0;
  left: 5px;
}

/* Glitch Clock Styles */
.screen {
  position: block;
  z-index: 9990;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.figure {
  display: block;
  position: fixed;
  z-index: 9994;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 200px solid #fff;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-bottom: 0 solid transparent;
  opacity:0%
}

.figure:before {
  display: block;
  content: '';
  position: absolute;
  z-index: 99;
  width: 0;
  height: 0;
  top: -194px;
  left: -90px;
  margin: auto;
  border-top: 180px solid #111;
  border-right: 90px solid transparent;
  border-left: 90px solid transparent;
  border-bottom: 0 solid transparent;
}

.figure-mask {
  display: block;
  position: fixed;
  z-index: 9999;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 200px solid transparent;
  border-right: 100px solid #111;
  border-left: 100px solid #111;
  border-bottom: 0 solid transparent;
  opacity: 0%;
}

.clock {
  display: block;
  position: fixed;
  z-index: 9995;
  width: 720px;
  height: 128px;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  cursor: default;
}

.clock span {
  display: block;
  position: relative;
  font-size: 128px;
  line-height: 1;
}

.clock.is-off {
  -webkit-animation: is-off 2s linear infinite !important;
          animation: is-off 2s linear infinite !important;
}

.glitch:before {
  position: absolute;
  z-index: 999999;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation: bg-move 2s linear infinite;
          animation: bg-move 2s linear infinite;
  background-size: 100% 8px;
  background-image: linear-gradient(0, rgba(255,255,255,0.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 60%, transparent 60%, transparent);
}

.glitch .figure,
.glitch .figure-mask {
  transform: skewX(0deg) scaleY(1);
  -webkit-animation: tr-bag 4s linear infinite;
          animation: tr-bag 4s linear infinite;
}

.glitch .clock {
  transform: skewX(0deg) scaleY(1);
  -webkit-animation: clock-bag 4s linear infinite;
          animation: clock-bag 4s linear infinite;
}

.glitch .clock span:before,
.glitch .clock span:after {
  display: block;
  content: attr(data-time);
  position: absolute;
  top: 0;
  color: #fff;
  background: #111;
  overflow: hidden;
  width: 720px;
  height: 128px;
  clip: rect(0, 900px, 0, 0);
}

.glitch .clock span:before {
  left: -2px;
  text-shadow: 2px 0 #00f;
  animation: c2 1s infinite linear alternate-reverse;
}

.glitch .clock span:after {
  left: 3px;
  text-shadow: -2px 0 #f00;
  animation: c1 2s infinite linear alternate-reverse;
}

@-webkit-keyframes is-off {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  71% {
    transform: scaleY(1) skewX(0deg);
  }
  72% {
    transform: scaleY(3) skewX(-60deg);
  }
  73% {
    transform: scaleY(1) skewX(0deg);
  }
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0;
  }
  84% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  91% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
  92% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    color: #008000;
  }
  93% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
}
@keyframes is-off {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  56% {
    opacity: 0;
  }
  57% {
    opacity: 0;
  }
  58% {
    opacity: 1;
  }
  71% {
    transform: scaleY(1) skewX(0deg);
  }
  72% {
    transform: scaleY(3) skewX(-60deg);
  }
  73% {
    transform: scaleY(1) skewX(0deg);
  }
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0;
  }
  84% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  91% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
  92% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
    color: #008000;
  }
  93% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
    color: #fff;
  }
}
@-webkit-keyframes c1 {
  0% {
    clip: rect(60px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(45px, 9999px, 52px, 0);
  }
  10% {
    clip: rect(36px, 9999px, 21px, 0);
  }
  15.000000000000002% {
    clip: rect(25px, 9999px, 34px, 0);
  }
  20% {
    clip: rect(45px, 9999px, 80px, 0);
  }
  25% {
    clip: rect(100px, 9999px, 79px, 0);
  }
  30.000000000000004% {
    clip: rect(61px, 9999px, 50px, 0);
  }
  35.00000000000001% {
    clip: rect(44px, 9999px, 60px, 0);
  }
  40% {
    clip: rect(44px, 9999px, 70px, 0);
  }
  45% {
    clip: rect(37px, 9999px, 10px, 0);
  }
  50% {
    clip: rect(40px, 9999px, 4px, 0);
  }
  55% {
    clip: rect(78px, 9999px, 51px, 0);
  }
  60.00000000000001% {
    clip: rect(50px, 9999px, 88px, 0);
  }
  65% {
    clip: rect(47px, 9999px, 84px, 0);
  }
  70.00000000000001% {
    clip: rect(63px, 9999px, 30px, 0);
  }
  75% {
    clip: rect(94px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(19px, 9999px, 75px, 0);
  }
  85% {
    clip: rect(43px, 9999px, 2px, 0);
  }
  90% {
    clip: rect(81px, 9999px, 24px, 0);
  }
  95% {
    clip: rect(48px, 9999px, 51px, 0);
  }
  100% {
    clip: rect(47px, 9999px, 44px, 0);
  }
}
@keyframes c1 {
  0% {
    clip: rect(60px, 9999px, 11px, 0);
  }
  5% {
    clip: rect(45px, 9999px, 52px, 0);
  }
  10% {
    clip: rect(36px, 9999px, 21px, 0);
  }
  15.000000000000002% {
    clip: rect(25px, 9999px, 34px, 0);
  }
  20% {
    clip: rect(45px, 9999px, 80px, 0);
  }
  25% {
    clip: rect(100px, 9999px, 79px, 0);
  }
  30.000000000000004% {
    clip: rect(61px, 9999px, 50px, 0);
  }
  35.00000000000001% {
    clip: rect(44px, 9999px, 60px, 0);
  }
  40% {
    clip: rect(44px, 9999px, 70px, 0);
  }
  45% {
    clip: rect(37px, 9999px, 10px, 0);
  }
  50% {
    clip: rect(40px, 9999px, 4px, 0);
  }
  55% {
    clip: rect(78px, 9999px, 51px, 0);
  }
  60.00000000000001% {
    clip: rect(50px, 9999px, 88px, 0);
  }
  65% {
    clip: rect(47px, 9999px, 84px, 0);
  }
  70.00000000000001% {
    clip: rect(63px, 9999px, 30px, 0);
  }
  75% {
    clip: rect(94px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(19px, 9999px, 75px, 0);
  }
  85% {
    clip: rect(43px, 9999px, 2px, 0);
  }
  90% {
    clip: rect(81px, 9999px, 24px, 0);
  }
  95% {
    clip: rect(48px, 9999px, 51px, 0);
  }
  100% {
    clip: rect(47px, 9999px, 44px, 0);
  }
}
@-webkit-keyframes c2 {
  0% {
    clip: rect(15px, 9999px, 81px, 0);
  }
  5% {
    clip: rect(8px, 9999px, 16px, 0);
  }
  10% {
    clip: rect(31px, 9999px, 64px, 0);
  }
  15.000000000000002% {
    clip: rect(12px, 9999px, 32px, 0);
  }
  20% {
    clip: rect(46px, 9999px, 25px, 0);
  }
  25% {
    clip: rect(96px, 9999px, 27px, 0);
  }
  30.000000000000004% {
    clip: rect(27px, 9999px, 95px, 0);
  }
  35.00000000000001% {
    clip: rect(77px, 9999px, 50px, 0);
  }
  40% {
    clip: rect(29px, 9999px, 95px, 0);
  }
  45% {
    clip: rect(70px, 9999px, 54px, 0);
  }
  50% {
    clip: rect(18px, 9999px, 8px, 0);
  }
  55% {
    clip: rect(97px, 9999px, 45px, 0);
  }
  60.00000000000001% {
    clip: rect(78px, 9999px, 42px, 0);
  }
  65% {
    clip: rect(28px, 9999px, 13px, 0);
  }
  70.00000000000001% {
    clip: rect(36px, 9999px, 42px, 0);
  }
  75% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  80% {
    clip: rect(21px, 9999px, 58px, 0);
  }
  85% {
    clip: rect(45px, 9999px, 25px, 0);
  }
  90% {
    clip: rect(78px, 9999px, 44px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 4px, 0);
  }
  100% {
    clip: rect(15px, 9999px, 36px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@keyframes c2 {
  0% {
    clip: rect(15px, 9999px, 81px, 0);
  }
  5% {
    clip: rect(8px, 9999px, 16px, 0);
  }
  10% {
    clip: rect(31px, 9999px, 64px, 0);
  }
  15.000000000000002% {
    clip: rect(12px, 9999px, 32px, 0);
  }
  20% {
    clip: rect(46px, 9999px, 25px, 0);
  }
  25% {
    clip: rect(96px, 9999px, 27px, 0);
  }
  30.000000000000004% {
    clip: rect(27px, 9999px, 95px, 0);
  }
  35.00000000000001% {
    clip: rect(77px, 9999px, 50px, 0);
  }
  40% {
    clip: rect(29px, 9999px, 95px, 0);
  }
  45% {
    clip: rect(70px, 9999px, 54px, 0);
  }
  50% {
    clip: rect(18px, 9999px, 8px, 0);
  }
  55% {
    clip: rect(97px, 9999px, 45px, 0);
  }
  60.00000000000001% {
    clip: rect(78px, 9999px, 42px, 0);
  }
  65% {
    clip: rect(28px, 9999px, 13px, 0);
  }
  70.00000000000001% {
    clip: rect(36px, 9999px, 42px, 0);
  }
  75% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  80% {
    clip: rect(21px, 9999px, 58px, 0);
  }
  85% {
    clip: rect(45px, 9999px, 25px, 0);
  }
  90% {
    clip: rect(78px, 9999px, 44px, 0);
  }
  95% {
    clip: rect(59px, 9999px, 4px, 0);
  }
  100% {
    clip: rect(15px, 9999px, 36px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@-webkit-keyframes clock-bag {
  0% {
    transform: translate(4px, 1px);
  }
  2% {
    transform: translate(3px, 4px);
  }
  4% {
    transform: translate(2px, 2px);
  }
  6% {
    transform: translate(4px, 3px);
  }
  8% {
    transform: translate(5px, 2px);
  }
  10% {
    transform: translate(1px, 5px);
  }
  12% {
    transform: translate(1px, 3px);
  }
  14.000000000000002% {
    transform: translate(2px, 4px);
  }
  16% {
    transform: translate(1px, 3px);
  }
  18% {
    transform: translate(3px, 1px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 2px);
  }
  26% {
    transform: translate(4px, 4px);
  }
  28.000000000000004% {
    transform: translate(2px, 4px);
  }
  30% {
    transform: translate(2px, 4px);
  }
  32% {
    transform: translate(1px, 2px);
  }
  34% {
    transform: translate(5px, 3px);
  }
  36% {
    transform: translate(4px, 4px);
  }
  38% {
    transform: translate(1px, 3px);
  }
  40% {
    transform: translate(2px, 5px);
  }
  42% {
    transform: translate(5px, 3px);
  }
  44% {
    transform: translate(3px, 3px);
  }
  46.00000000000001% {
    transform: translate(3px, 3px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(1px, 5px);
  }
  52% {
    transform: translate(2px, 1px);
  }
  54% {
    transform: translate(4px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 1px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  62% {
    transform: translate(1px, 4px);
  }
  64% {
    transform: translate(4px, 4px);
  }
  66% {
    transform: translate(1px, 4px);
  }
  68% {
    transform: translate(4px, 4px);
  }
  70.00000000000001% {
    transform: translate(4px, 2px);
  }
  72% {
    transform: translate(3px, 2px);
  }
  74% {
    transform: translate(3px, 1px);
  }
  76% {
    transform: translate(3px, 2px);
  }
  78% {
    transform: translate(4px, 4px);
  }
  80% {
    transform: translate(1px, 1px);
  }
  82.00000000000001% {
    transform: translate(1px, 3px);
  }
  84% {
    transform: translate(3px, 4px);
  }
  86% {
    transform: translate(3px, 3px);
  }
  88% {
    transform: translate(2px, 4px);
  }
  90% {
    transform: translate(5px, 5px);
  }
  92.00000000000001% {
    transform: translate(2px, 4px);
  }
  94% {
    transform: translate(3px, 1px);
  }
  96% {
    transform: translate(5px, 5px);
  }
  98% {
    transform: translate(4px, 5px);
  }
  100% {
    transform: translate(5px, 5px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes clock-bag {
  0% {
    transform: translate(4px, 1px);
  }
  2% {
    transform: translate(3px, 4px);
  }
  4% {
    transform: translate(2px, 2px);
  }
  6% {
    transform: translate(4px, 3px);
  }
  8% {
    transform: translate(5px, 2px);
  }
  10% {
    transform: translate(1px, 5px);
  }
  12% {
    transform: translate(1px, 3px);
  }
  14.000000000000002% {
    transform: translate(2px, 4px);
  }
  16% {
    transform: translate(1px, 3px);
  }
  18% {
    transform: translate(3px, 1px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 2px);
  }
  26% {
    transform: translate(4px, 4px);
  }
  28.000000000000004% {
    transform: translate(2px, 4px);
  }
  30% {
    transform: translate(2px, 4px);
  }
  32% {
    transform: translate(1px, 2px);
  }
  34% {
    transform: translate(5px, 3px);
  }
  36% {
    transform: translate(4px, 4px);
  }
  38% {
    transform: translate(1px, 3px);
  }
  40% {
    transform: translate(2px, 5px);
  }
  42% {
    transform: translate(5px, 3px);
  }
  44% {
    transform: translate(3px, 3px);
  }
  46.00000000000001% {
    transform: translate(3px, 3px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(1px, 5px);
  }
  52% {
    transform: translate(2px, 1px);
  }
  54% {
    transform: translate(4px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 1px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  62% {
    transform: translate(1px, 4px);
  }
  64% {
    transform: translate(4px, 4px);
  }
  66% {
    transform: translate(1px, 4px);
  }
  68% {
    transform: translate(4px, 4px);
  }
  70.00000000000001% {
    transform: translate(4px, 2px);
  }
  72% {
    transform: translate(3px, 2px);
  }
  74% {
    transform: translate(3px, 1px);
  }
  76% {
    transform: translate(3px, 2px);
  }
  78% {
    transform: translate(4px, 4px);
  }
  80% {
    transform: translate(1px, 1px);
  }
  82.00000000000001% {
    transform: translate(1px, 3px);
  }
  84% {
    transform: translate(3px, 4px);
  }
  86% {
    transform: translate(3px, 3px);
  }
  88% {
    transform: translate(2px, 4px);
  }
  90% {
    transform: translate(5px, 5px);
  }
  92.00000000000001% {
    transform: translate(2px, 4px);
  }
  94% {
    transform: translate(3px, 1px);
  }
  96% {
    transform: translate(5px, 5px);
  }
  98% {
    transform: translate(4px, 5px);
  }
  100% {
    transform: translate(5px, 5px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes tr-bag {
  0% {
    transform: translate(1px, 3px);
  }
  2% {
    transform: translate(5px, 5px);
  }
  4% {
    transform: translate(1px, 4px);
  }
  6% {
    transform: translate(2px, 3px);
  }
  8% {
    transform: translate(1px, 2px);
  }
  10% {
    transform: translate(5px, 5px);
  }
  12% {
    transform: translate(4px, 4px);
  }
  14.000000000000002% {
    transform: translate(3px, 1px);
  }
  16% {
    transform: translate(3px, 5px);
  }
  18% {
    transform: translate(1px, 1px);
  }
  20% {
    transform: translate(3px, 3px);
  }
  22% {
    transform: translate(2px, 4px);
  }
  24% {
    transform: translate(1px, 1px);
  }
  26% {
    transform: translate(5px, 2px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 1px);
  }
  32% {
    transform: translate(1px, 5px);
  }
  34% {
    transform: translate(1px, 2px);
  }
  36% {
    transform: translate(3px, 2px);
  }
  38% {
    transform: translate(4px, 4px);
  }
  40% {
    transform: translate(1px, 5px);
  }
  42% {
    transform: translate(4px, 1px);
  }
  44% {
    transform: translate(5px, 5px);
  }
  46.00000000000001% {
    transform: translate(5px, 1px);
  }
  48% {
    transform: translate(1px, 5px);
  }
  50% {
    transform: translate(1px, 5px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(1px, 3px);
  }
  56.00000000000001% {
    transform: translate(2px, 4px);
  }
  58% {
    transform: translate(4px, 5px);
  }
  60% {
    transform: translate(5px, 4px);
  }
  62% {
    transform: translate(2px, 3px);
  }
  64% {
    transform: translate(2px, 5px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(1px, 4px);
  }
  70.00000000000001% {
    transform: translate(3px, 4px);
  }
  72% {
    transform: translate(5px, 2px);
  }
  74% {
    transform: translate(4px, 1px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(5px, 3px);
  }
  82.00000000000001% {
    transform: translate(1px, 5px);
  }
  84% {
    transform: translate(5px, 1px);
  }
  86% {
    transform: translate(4px, 5px);
  }
  88% {
    transform: translate(5px, 2px);
  }
  90% {
    transform: translate(4px, 4px);
  }
  92.00000000000001% {
    transform: translate(4px, 3px);
  }
  94% {
    transform: translate(3px, 2px);
  }
  96% {
    transform: translate(5px, 3px);
  }
  98% {
    transform: translate(2px, 3px);
  }
  100% {
    transform: translate(4px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes tr-bag {
  0% {
    transform: translate(1px, 3px);
  }
  2% {
    transform: translate(5px, 5px);
  }
  4% {
    transform: translate(1px, 4px);
  }
  6% {
    transform: translate(2px, 3px);
  }
  8% {
    transform: translate(1px, 2px);
  }
  10% {
    transform: translate(5px, 5px);
  }
  12% {
    transform: translate(4px, 4px);
  }
  14.000000000000002% {
    transform: translate(3px, 1px);
  }
  16% {
    transform: translate(3px, 5px);
  }
  18% {
    transform: translate(1px, 1px);
  }
  20% {
    transform: translate(3px, 3px);
  }
  22% {
    transform: translate(2px, 4px);
  }
  24% {
    transform: translate(1px, 1px);
  }
  26% {
    transform: translate(5px, 2px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 1px);
  }
  32% {
    transform: translate(1px, 5px);
  }
  34% {
    transform: translate(1px, 2px);
  }
  36% {
    transform: translate(3px, 2px);
  }
  38% {
    transform: translate(4px, 4px);
  }
  40% {
    transform: translate(1px, 5px);
  }
  42% {
    transform: translate(4px, 1px);
  }
  44% {
    transform: translate(5px, 5px);
  }
  46.00000000000001% {
    transform: translate(5px, 1px);
  }
  48% {
    transform: translate(1px, 5px);
  }
  50% {
    transform: translate(1px, 5px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(1px, 3px);
  }
  56.00000000000001% {
    transform: translate(2px, 4px);
  }
  58% {
    transform: translate(4px, 5px);
  }
  60% {
    transform: translate(5px, 4px);
  }
  62% {
    transform: translate(2px, 3px);
  }
  64% {
    transform: translate(2px, 5px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(1px, 4px);
  }
  70.00000000000001% {
    transform: translate(3px, 4px);
  }
  72% {
    transform: translate(5px, 2px);
  }
  74% {
    transform: translate(4px, 1px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(5px, 3px);
  }
  82.00000000000001% {
    transform: translate(1px, 5px);
  }
  84% {
    transform: translate(5px, 1px);
  }
  86% {
    transform: translate(4px, 5px);
  }
  88% {
    transform: translate(5px, 2px);
  }
  90% {
    transform: translate(4px, 4px);
  }
  92.00000000000001% {
    transform: translate(4px, 3px);
  }
  94% {
    transform: translate(3px, 2px);
  }
  96% {
    transform: translate(5px, 3px);
  }
  98% {
    transform: translate(2px, 3px);
  }
  100% {
    transform: translate(4px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
.container3 {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}

/* Base styles for the loading screen */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111 url('https://artitech.ro:85/assets/fnaf-background.webp') no-repeat center center/cover;
  filter: brightness(-200%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  overflow: hidden;
  animation: glitchBackground 5s infinite alternate;
  filter: contrast(100%);
}

/* Glitch Effect Animation */
@keyframes glitchBackground {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Loader styles */
.loader {
  width: fit-content;
  background: #000;
  padding: 0 8px;
  font-size: 30px;
  font-family: monospace;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  position: relative;
  animation: pulse 2s infinite;
}

.loader::before {
  content: "06:00AM";
  white-space: pre;
  animation: l8 0.3s infinite;
}

.loader::after {
  content: "";
  position: absolute;
  inset: auto auto 100% 10px;
  height: 5px;
  width: 40%;
  background: linear-gradient(90deg, red 40%, #0000 0 60%, #444 0);
}

/* Pulse effect for the loader */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Text animation */
.funny-text {
  margin-top: 2rem;
  font-size: 1.1rem;
  color: rgb(255, 255, 255);
  text-align: center;
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.section-title2{
display:flex;
font-size: 1.5rem;
font-weight: 600;
text-align:center;
margin-bottom: 1.5rem;
background-color:#ff3d02;
border-radius:20px;
color:#fff;
max-width: 50%;
justify-content: center;
align-self: center;
margin: 0 auto;
margin-top: 1rem;
margin-bottom:1.5rem;
}
.product-box{
position: relative;
z-index:2;}
.product-box:hover{
padding: 10px;
border:1px solid var(--text-color);
border-radius:20px;
transition: 0.4s;
}
.mobile-highlighted-collection {
  display: none;
}

.product-img{
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 20px;
z-index:2;
}
.product-title{
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.5rem;
background-color: #ffe5d9d0;
border-radius: 20px;
padding: 7px;
}
.price{
font-weight: 500;
background-color: #ff723bf2;
border-radius: 20px;
padding: 7px;
}
.add-cart{
position:absolute;
bottom: 0;
right: 0;
background: #ff5e00;
color: var(--bg-color);
padding: 10px;
cursor:pointer;
margin-top: 2rem;
border-radius:30px;
border: none;
}
.add-cart:hover{
background: hsl(0, 100%, 50%);
border-radius:30px;
}
.trustpilot {
padding-top: 0.5rem;
text-align: center;
}
.trustpilot img {
border-radius: 2px;
width: 100px;
height: auto;
vertical-align: middle;
background-color: #ad896b;
animation: rainbow-background 5s linear infinite;
}
@keyframes rainbow-background {
0% { background-color: #005c31; }
16% { background-color: #494949; }
33% { background-color: #0051ff; }
50% { background-color: #009400; }
66% { background-color: #aca000; }
83% { background-color: #363636; }
100% { background-color: #09005c; }
}
footer {
background: linear-gradient(135deg, #0009 0%, #06060680 100%);
padding: 30px 20px;
color: #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
max-width: 1200px;
margin: 0 auto;
}
.footer-left, .footer-center, .footer-right {
flex: 1;
padding: 10px;
box-sizing: border-box;
}
.footer-left {
text-align: left;
}
.footer-left p {
margin: 0;
font-size: 14px;
color: #fff;
}
.footer-left a {
color: #0088cc;
text-decoration: none;
display: inline;
margin-right: 10px;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.footer-left a:hover {
color: #0056a0;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.footer-center {
text-align: center;
}
.anpc-logo {
width: 100px;
margin: 0 15px;
transition: transform 0.3s ease;
}
.anpc-logo:hover {
transform: scale(1.1);
}
.footer-right {
text-align: right;
}
.footer-right h4 {
margin-top: 0;
font-size: 18px;
color: #ffffff;
font-weight: bold;
}
.footer-right p {
margin: 5px 0;
font-size: 14px;
color: #ffffff;
line-height: 1.6;
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: center;
}
.footer-left {
text-align: center;
margin-bottom: 20px;
}
.footer-left a {
display: block;
margin: 5px 0;
}
.footer-right {
text-align: center;
}
}
@media (max-width : 1596px ){
.products-container {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #0d0d0d4f;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
z-index: 2;
}
.suggestions {
position: absolute;
width: 100%;
top: calc(100% + 5px);
background-color: #ffc23e;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.nav {
padding:15px;
}
section{
padding: 3rem 0 2rem;
}
.container{
margin:0 auto;
width: 90%;
}
.logo{
font-size: 0.4rem;
color: #fff;
font-weight: 400;
font-weight: bold;
}
}
@media (max-width:360px){
.suggestions {
position: absolute;
width: 100%;
top: calc(100% + 5px);
background-color: #ffc23e;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.products-container {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #252525;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
}
.add-cart .text {
display: none;
}
.cart{
width:280px;
}
.logo{
font-size: 0.2rem;
color: #fff;
font-weight: 400;
font-weight: bold;
}
}
@media (max-width: 1000px){
.suggestions {
position: absolute;
width: 100%;
top: calc(100% + 5px);
background-color: #ffc23e;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.products-container {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #252525;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
}
header{
padding: 7px 4%;
transition: .2s;
}
section{
padding: 80px 4%;
transition: .1s;
}
.logo{
font-size: 0.6rem;
color: #fff;
font-weight: 400;
font-weight: bold;
}
}
.logo{
font-size: 0.9rem;
color: #fff;
font-weight: 400;
font-weight: bold;
}
.left-items{
display: flex;
justify-content: space-between;
}
.right-items{
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 700px) {
section{
padding: 0rem 0 3rem;
}

.figure {
  display: block;
  position: fixed;
  z-index: 9994;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 200px solid #fff;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
  border-bottom: 0 solid transparent;
  opacity:0%;
  text-align: center;
}

.figure:before {
  display: block;
  content: '';
  position: absolute;
  z-index: 99;
  width: 0;
  height: 0;
  top: -194px;
  left: -90px;
  margin: auto;
  border-top: 180px solid #111;
  border-right: 90px solid transparent;
  border-left: 90px solid transparent;
  border-bottom: 0 solid transparent;
  text-align: center;
}

.figure-mask {
  text-align: center;
  display: block;
  position: fixed;
  z-index: 9999;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 200px solid transparent;
  border-right: 100px solid #111;
  border-left: 100px solid #111;
  border-bottom: 0 solid transparent;
  opacity: 0%;
}
.clock span {
  display: block;
  position: relative;
  font-size: 50px;
  line-height: 1;
  text-align: center;
}
.clock{
  text-align: center;
  width:100%;
}
#unique-category2{
  max-width: 100%;
}
#timer2, #timer3, #timer4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  z-index: 2;
  text-align: center;
  line-height: 1.2;
  width: 40%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
.unique-category-item1 img {
  width: 200%;
  max-width: 10rem;
  height: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
  transition: all 0.3s ease-in-out;
  border: 0px solid #000;
  border-radius: 15px;
  }
.highlighted-collection {
  display: none;
}
.mobile-highlighted-collection {
  display: block;
}
/* Mobile Highlighted Collection Container */
.mobile-highlighted-collection {
  display: block;
  overflow: hidden;
  margin: 20px 0;
}
.featured{
  background-color: #000;
  color:hsl(29, 100%, 50%);
  text-align: center;
}
.mobile-products-container {
  overflow: hidden;
  width: 100%;
}

.mobile-products-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  /* Allow horizontal scrolling */
  scroll-snap-type: x mandatory;
}

.mobile-products-wrapper .product1 {
  flex: 0 0 calc(33.33% - 10px); /* 3 products per view */
  margin: 0 5px;
  box-sizing: border-box;
  cursor: pointer;
}

/* Ensuring proper layout for the image and text */
.mobile-products-wrapper .product1 img {
  width: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.mobile-products-wrapper .product1 h3 {
  font-size: 14px;
  margin: 5px 0;
}

.mobile-products-wrapper .product1 .price {
  font-size: 12px;
  color: #ffffff;
  margin: 0;
  text-align: center;
  background-color: rgb(255, 115, 0);
}

/* Smooth scroll behavior */
.mobile-products-container {
  scroll-behavior: smooth;
}
/* Navigation Arrows */
.navigation1 {
  position: absolute;
  top: 75%; /* Center the arrows vertically */
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%); /* Fine-tune to perfectly center */
  z-index: 10;
}

.arrow {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

/* Position the arrows */
#prev-arrow1 {
  left: 10px;
}

#next-arrow1 {
  right: 10px;
}
.home-text h1 {
    font-size: 3.5em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .6rem;
    margin-bottom: 1.4rem;
    margin-top: 5rem;
    margin-left: 2rem;}
    .home-text span {
        font-size: 1em;
      }
      .home-text p {
        font-size: 1em;
        font-weight: 200;
        margin-bottom: 3rem;
        letter-spacing: .2rem;
        text-align: center;
        margin-left: 1rem;
        background-color: #00000052;
      }
      .btn{margin-left:2.5rem}
.unique-product-category {
margin-top:1rem;
margin-bottom: 1rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
background-image: url('../img/banner_phone.webp');
}

.unique-category-item img {
width: 100%;
max-width: 170px;
height: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.608);
transition: all 0.3s ease-in-out;
border: 0px solid #000;
border-radius: 15px;
}
.products-container {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #252525;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 100%;
}
.suggestions {
position: absolute;
width: 100%;
left: 7px;
top: calc(100% + 5px);
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
border-radius: 30px;
}
.products-container{
background-color: #000000;
z-index:2;
}
.product {
flex: 0 0 calc(33.33% - 10px);
margin-right: 20px;
background-color: #3b3b3b;
padding: 20px;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
z-index:2;
}
.highlighted-collection h2 {
color: #ffffff;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.product h3 {
font-size: smaller;
color: #fcfcfc;
}
.add-cart .text {
display: none;
}
.shop-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, auto));
gap: 1.5rem;
border-radius:20px;
padding-top:1rem;
}
.product-box{
position: relative;
z-index:2;}
.product-box:hover{
padding: 10px;
border:1px solid var(--text-color);
border-radius:20px;
transition: 0.4s;
z-index:2;
}
.product-img{
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 20px;
}
.product-title{
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.price{
font-size: 16px;
font-weight: 500;
}
.nav{
background: #00000000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
max-width: 100%;
}
.left-items{
display:none;
}
.hidethis{
display: none;
}
.video-container video {
background-color: transparent;
width: 206px;
height: 63px;
position: fixed;
bottom: 0;
right: 0;
z-index: 10;
pointer-events: none;
margin-right:20px;
margin-bottom:3rem;
cursor: pointer;
border-radius: 10px 30px 10px 30px;
}
#cart-icon{
font-size: 1.8rem;
cursor: pointer;
}
@keyframes banner-animation {
0% {
transform: translateX(40%);
}
100% {
transform: translateX(-80%);
}
}
}