@charset "utf-8";
/* CSS Document */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Lato', 'Arial', sans-serif;
}

::-webkit-scrollbar {
	width: 10px;
	background: #434343;
	border: 1.5px solid #434343;
	filter: drop-shadow(2px 2px 2px);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #F85529; 
	border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #A64D00;
}

html{
	scroll-behavior: smooth;
}
body{
	background-color: #181818;
     color:white;
     overflow-x: hidden;
}
/*=========== HEADER STYLES ===========*/
header {
	height: 80px;
	width:100vw;
	margin: 0 auto;
	background-color: #2F2F2F;
	position: fixed;
	float:left;
	z-index: 9999;
	/* overflow: hidden; */
	top:0;
}


header img {
	position:absolute;
	margin-left: -1000px;
	height: 80px;
	margin-top:-15px;
	transform: scale(1);
	transition: all 0.3s;
}
header img:hover {
	padding-left:10px;
	float: left;
	transform: scale(1.1);
	transition: all 0.3s;
}
/*=========== NAV STYLES ===========*/
nav{
	margin-top:10px;
}
.nav ul {
	list-style-type: none;
	margin-left: 650px;
	font-size: 20px;
}

.nav li {
	display: inline-block;
	float: left;
	padding-top: 20px;
	margin-bottom: 10px;
	color:white;
    margin-left: 15px;
	transform: scale(0.8);
	transition: all 0.3s;
}

.nav li:hover {
	padding-bottom: 5px;
	transform: scale(0.9);
}

.nav li input[type=text]:hover {
	transform: scale(0.95);
}

.nav li input[type=text]:focus::placeholder {
	color: transparent;
	transform: scale(0.5);
}

.nav li a {
	text-decoration: none;
	text-align: center;
	color:white;	
	transition: all 0.3s;
}
.nav li a:hover {	
	color:orange;
}

.nav input[type=text], input[type=password]{
	float: right;
  	padding: 15px;
  	border: none;
	border-bottom: solid 3px orange;
	border-radius: 5px;
  	margin-right: 10px;
	margin-top: -20px;
  	font-size: 17px;
	width:300px;
	color:white;
	background-color: transparent;
	transition: all 0.3s;
}
.nav input[type=text]::placeholder, input[type=password]::placeholder{
	color:#D0D0D0;
	transition: all 0.3s;
}
.nav input:focus, .nav input[type=password]:focus {
	outline:none;
  	border-bottom: solid 3px orange;
	transform: scale(1.05);
}


.log-in-card{
	position: absolute;
	width: 17vw;
	height: 31vh;
	background-color: rgba(0, 0, 0, 0.55);
	transform: translate(-50%);
	margin-left: 60%;
    top: 90px;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
	backdrop-filter: blur(5px);
	opacity: 0;
	display:none;
	transition: all 0.3s;
}

.log-in-card-active{
	display:block;
	opacity: 1;
	transition: all 0.3s;
}


.login-form{
	transform: scale(0.85);
	margin-right: 0px;
	margin-top: 0px;
}

.login-form h4{
	position: absolute;
	top:0;
	right:0;
	transform: scale(1.5);
}

.login-form h4:hover{
	cursor: pointer;
}

.login-form input[type=text], input[type=password]{
	margin-right: 0px;
	margin-top: 20px;
}

.login-btn{
	background-color: white;
	border: none;
	border: 2px solid #FFF;
	background-color: transparent;
	padding: 12px 70px;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 300;
	color: white;
	box-shadow: 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0);
	margin: 10px;
	margin-top: 40px;
	outline:none;
	transition: all 0.3s;
}

.login-btn:hover{
	background-color: #FFF;
	color: black;
	box-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.24);
	cursor: pointer;
}

.login-form a{
	text-decoration: none;
	color:white;
}

.login-form a:hover{
	text-decoration: underline;
	color:white;
}
/*=========== MASTHEAD AREA ===========*/

#container{
     height:450px;
     margin:auto;
     overflow:hidden;
     position:relative;
}
.background-image {
	 background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)), url("../img/Computer 1.jpg");
	 background-size:cover;
	 background-attachment: fixed;
	 background-position: 0% 90%;
	 transform: scale(1.05);
	 filter: blur(8px) saturate(2);
	 z-index: 1;
     display: block;
     width:110%;
     height:450px;
}

/* ADJUST HEADER 1 (A1 PC CARE) PROPERTIES*/
.sect1 h1{
	font-family: 'Arial', sans-serif;
	font-size: 60px;
	color: white;
}

 .sect1 {
     z-index: 99;
     position:absolute;
	 margin-left: auto;
	 margin-right: auto;
	 left: 0;
	 right: 0;
	 margin-top: 140px;
	 text-align: center;
}

/*=========== MASTHEAD BUTTONS ===========*/
	 
.btn{
	background-color: #FFB460;
	padding: 12px 35px;
	border-radius: 3px;
	text-decoration: none;/*=========== MASTER BUTTON CLASS ===========*/
	font-weight: 300;
	color: white;
	box-shadow: 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0);
	margin: 10px;
	transition: all 0.3s;
}

.btn:hover{
	background-color: #77D7FF;
	box-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.24);
}

.btn1{
	background-color: #FF8C74;
}

.btn2{
	background-color: #73E6A1;
}
/*=========== ABOUT US SECTION ===========*/
.site-content{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    vertical-align: baseline;
    position:relative;
	float: left;
}

.site-content h1{
	font-family: 'Arial', sans-serif;
	font-size: 36px;
	color: white;
}

.site-content{
	margin-top:50px;
	 text-align: center;
}

.about{
	font-family: 'Lato', sans-serif;
	display: flex;
	justify-content: center;

}
.features h2{
	font-size: 1.2em;
}

/*=========== ABOUT COLUMNS ===========*/
.f1{
	width:15%;
	margin: 15px;
	font-size: 1.2em;
}
.f2{
	width:15%;
	margin: 15px;
	font-size: 1.2em;
}
.f3{
	width:15%;
	margin: 15px;
	font-size: 1.2em;
}

.fs p{
    text-align: center;
    padding: 0 20px;
}

.fs h2{
	font-size: 1.15em;
}

.icons1{
	width: 30px;
	height: 30px;
	margin-bottom:10px;
}

.border-stroke{
	border-bottom: 2px solid #e67e22;
	width: 80px;
	margin: auto;
	margin-top:10px;
}

/*=========== SLIDER SECTION ===========*/

.slider{
    position:relative;
	float: left;
	margin-top: 90px;
	left: 50%;
	transform: translateX(-50%);
}

.slider h1{
	font-size: 46px;
	letter-spacing: 3px;
	font-family: 'Arial', sans-serif;
	margin-left:510px;
}

.caroImg{
	height: 550px;
	width: 1520px;
	object-fit: cover;
}

.arrows{
	position: absolute;
    width: 30px;
	height:auto;
	margin-top: 265px;
	transform: scale(1);
	filter: drop-shadow(2px 2px 3px #222);
	transition: all 0.2s;
}
.arrow1{
    right: 25px;
}

.arrow2{
    left: 25px;
}

.arrows:hover{
	transform: scale(1.1);
	filter: drop-shadow(5px 5px 5px #222);
}

/*=========== CAROUSELL INDICATOR ===========*/

#caroIndicator{
	margin-bottom: 80px;
}

.container{
	display: inline-block;
	position: relative;
	padding-left: 20px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	user-select: none;
}
/* Hide the browser's default radio button */
.container input {
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 17px;
	width: 17px;
	border: solid 1px grey;
	background-color: #eee;
	border-radius: 50%;
	margin-left:650px;
	margin-top: 20px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
	background-color: #ccc;
	border: solid 1px grey;
	
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
	background-color: #FF8C74;
	border: solid 1px grey;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
	display: inline-block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 10%;
	background: none;
	
}


/*=========== TOP SELLERS SECTION ===========*/

.products-container{
	display: flex;
	width:100%;
	height:100%;
	flex-direction: column;
/*	border: 2px solid red;*/
	justify-content: center;
    align-items: center;
}

.products-container h2{
	text-align: center;
	font-size: 3em;
	margin-bottom: 80px;
}

.products{
	display: flex;
	justify-content: center;
 	align-items: center;
/*	border: 4px solid blue;*/
	margin: 0px 20px;
}

.prods{
	display: block;
	height:600px;
	padding: 20px;
	width:100%;
	border-radius: 10px;
	text-align: center;
	color:white;
	transition: all 0.3s;
	margin-top:50px;
	margin: 0px 20px;
}
.prods:hover{
	margin-top:-50px;
	height:650px;
	cursor: pointer;
}

.prodsimg{
	width:300px;
	margin-top: 50px;
	transition: all 0.3s;
}
/*
.prods:hover .prodsimg{
	margin-top:50px;
}

*/
@keyframes prodHover {
  from {
    margin-top:50px;
	filter: drop-shadow(0px 11px 6px rgba(0,0,0,0.1));
  }

  to {
    margin-top:20px;
	filter: drop-shadow(0px 11px 6px rgba(0,0,0,0.5));
  }
}

.prods:hover .prodsimg{
	animation-name: prodHover;
	animation-duration: 1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


.prod1{
	background-color: #FED337;
}
.prod2{
	background-color: #BFAFAC;
}
.prod3{
	background-color: #E58216;
}
.prod4{
	background-color: #F9BD51;
}


/*=========== SCHEDULE NOW BANNER ===========*/

.schedule-container2{
     margin-top: 200px;
      overflow: hidden;
      /* height:300px; */
 }
 
 .schedule-img2 {
      background-image:linear-gradient(rgba(56, 204, 0, 0.3), rgba(0, 166, 0, 0.2)), url("../img/Computer 3.jpg");
      background-size:cover;
      background-attachment: fixed;
      background-position: 0% 90%;
      transform: scale(1.1);
      filter: blur(6px) saturate(2);
      z-index: 1;
      display: block;
      width:100%;
      height:500px;
      margin-top: -80px;
      overflow: hidden;
 }
 
 .schedule-content2{
      position: relative;
      z-index: 99;
      text-align: center;
 }
 
 .schedule-content2 h1{ 
     margin-top: 79px;
      transform: translate(-50%);
     margin-left: 50%;
     position: absolute;
      font-size: 1.5em;
 }
 
 .btn3{
      position: absolute;
      margin-top: 150px;
      margin-left: -70px;
      background-color: #14A168;
      box-shadow: 0 6px 6px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.24);
 }

/*=========== CONTACT US HEADER ===========*/

.contact-header{
	position: relative;
	text-align: center;
	height:200px;
	width:100%;
	background-color: #181818;
	z-index: 50;
	font-size: 1.5em;
	letter-spacing: 3px;
	margin-top: -150px;
}
.contact-header h1{
	position: relative;
	margin:auto;
	top:70px;
}


/*------------------CONTACT IMAGE---------------*/
.schedule-container{
	overflow: hidden;
	height:450px;
	width:100%;
}

.contact-img{
	background-image:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url("../img/Computer 4.jpg");
	background-size:cover;
	background-attachment: fixed;
	background-position: 0% 60%;
	filter: blur(6px) saturate(2);
	transform: scale(1.1);
	z-index: 1;
	display: block;
	width:95%;
	height:750px;
	margin-top: 0px;
	overflow: hidden;
}

.contact-content{
	position: absolute;
	z-index: 50;
}

.contact-form{
	margin-left: 500px;
	margin-top: 50px;
	letter-spacing: 1.5px;
}
.contact-form h3{
	font-size:1em;
}
.contact-form p{
	margin-bottom:70px;
	font-size:1.5em;
	margin-left: 100px;
}
.contact-input{
	margin-top:10px;
	padding:12px 10px;
	width:600px;
	border-radius: 3px;
}
.cTextarea{
	margin: 0px;
	margin-top:10px;
	height: 130px;
	width: 1000px;
	border-radius: 3px;
}
.btn4{
	position: absolute;
	margin-top: 160px;
	margin-left: -110px;
	background-color: #FF8C74;
	cursor:pointer;
	border: none;
}


/*
========================================
============ SERVICES PAGES ============
========================================
*/
























/*=========== FOOTER ===========*/

footer{
	margin-top:40px;
	position: relative;
	z-index: 99;
	width:100%;
	height:200px;
	background-color: black;
}

.footer-container{
	margin: auto;
	text-align: center;
	width:90%;
	height:90%;
}

.footer-columns{
	width:10%;
	margin:10px;
	margin-left: 100px;
	height:90%;
	float:left;
}

.temp p{
	margin-top: -20px;
}

.footer-column1{
    margin-left: 300px;
}

.footer-column1 img{
	transform: scale(0.4);
}

.footer-column2 img{
	margin:40px;;
}

.footer-column3 img{
	margin:40px;;
}

.footer-column4{
	width:20%;
}

.socials{
	margin-top:40px;
}

.socials li {
    display: inline-block;
    margin: 5px;
}

.socials img{
	height:30px;
	width:30px;
}

.footer-column4 a{
	text-decoration: none;
	font-weight: 400;
	color: #F1927E;
}



/*=========== BACK TO TOP BUTTON ===========*/

#back-to-top2{
	position: fixed;
	width:50px;
	height:50px;
	border-radius: 50px;
	background-color: #F85529;
	z-index: 9999;
    margin-left: 1780px;
	bottom:50px;
	transition: all 0.2s;
	display:none
}
#back-to-top2:hover{
	filter: drop-shadow(6px 6px 11px #000000);
}
@keyframes hover {
  from {
    bottom:50px;
  }

  to {
    bottom:55px;
  }
}

#back-to-top2:hover {
	animation-duration: 0.5s;
	animation-name: hover;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease;
}
#back-to-top2 img{
	width:60%;
	height:60%;
    margin-left: 10px;
    margin-top: 8px;
}

@keyframes sect1-h1-anim {
	from {
	  margin-left: -300px;
	  opacity: 0;
	}
  
	to {
	  margin-left: 0px;
	  opacity: 1;
	}
  }
  
.sect1 h1{
	animation-name: sect1-h1-anim;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes sect1-h1-btn {
	from {
	  opacity: 0;
	  transform: scale(0);
	}
  
	to {
	  opacity: 1;
	  transform: scale(1);
	}
  }
  
.sect1 .btn{
	animation-name: sect1-h1-btn;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes site-content-h1 {
	from {
	  margin-left: 400px;
	  opacity: 0;
	}
  
	to {
	  margin-left: 0px;
	  opacity: 1;
	}
}
  
  .site-content h1 {
	  animation-name: site-content-h1;
	  animation-duration: 1s;
	  animation-timing-function: ease-in-out;
	  animation-fill-mode: forwards;
  }

@keyframes about {
	from {
	  opacity: 0;
	}
  
	to {
	  opacity: 1;
	}
}
  
  .about {
	  animation-name:about;
	  animation-duration: 1.2s;
	  animation-timing-function: ease-in-out;
	  animation-fill-mode: forwards;
  }

@keyframes logo {
	from {
	  margin-left: -1000px;
	}
  
	to {
		margin-left: -960px;
	}
}
  
.logo {
	  animation-name:logo;
	  animation-duration: 1.2s;
	  animation-timing-function: ease-in-out;
	  animation-fill-mode: forwards;
}


@keyframes mastImg {
	from {
		filter: brightness(0.4) blur(8px) saturate(2);
	}
  
	to {
		filter: brightness(1) blur(8px) saturate(2);
	}
}
  
.background-image {
	  animation-name:mastImg;
	  animation-duration: 1.2s;
	  animation-timing-function: ease-in-out;
	  animation-fill-mode: forwards;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


#services-body{
	overflow-y: hidden;
}





/*======== SCHEDULE BOX =========*/

#schedule-box {
	width: 100vw;
	height: 74.5vh;
	margin-top: 60px;
    margin-bottom: -50px;
}

.schedule-container {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 100px;
	width: 60vw;
	height: 600px;
	background-color: #252525;
	display: flex;
	justify-content: center;
	border-radius: 10px;
    user-select: none;
}

.schedule1-col1 {
	height: 100%;
	width: 70%;
	display: flex;
	justify-content: center;

}

.schedule1-col2 {
	height: 100%;
	width: 30%;
	display: flex;
	justify-content: center;
	background-color: #626262;
	box-shadow: -3px 0px 20px 10px rgba(0, 0, 0, 0.6);
    border-radius: 0px 10px 10px 0px;

}

/*=========== SCHEDULE 1 COLUMN 1 ==========*/

.schedule-heading {
	margin-top: 20px;
}


/*=========== SCHEDULE 1 BUTTONS ==========*/

.schedule-buttons {
	width: 600px;
	height: 70px;
	top: 140px;
	position: absolute;
	display: flex;
	justify-content: center;
	background-color: white;
	color: black;
	cursor: pointer;
	transition: all 0.2s;
}

.schedule-buttons:hover {
	margin-left: 10px;
	box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.3);
}

.btn1-col1 {
	width: 85%;
	height: 100%;
	background-color: white;
	display: flex;
	justify-content: center;
}

.btn1-col2 {
	width: 15%;
	height: 100%;
	background-color: #73E6A1;
	display: flex;
	justify-content: center;
}


.btn2-col1 {
	width: 85%;
	height: 100%;
	background-color: white;
	display: flex;
	justify-content: center;
}

.btn2-col2 {
	width: 15%;
	height: 100%;
	background-color: #FF8C74;
	display: flex;
	justify-content: center;
}

.schedule-btn2 {
	margin-top: 120px;
}

.btn-text span {
	margin: auto;
	font-weight: 600;
}

.btn-text span {
	margin: auto;
	font-weight: 600;
}

.button-icon {
	margin: auto 0;
	margin-left: 30px;
	font-size: 24px;
}

.btn-arrow {
	margin: auto;
	font-size: 30px;
	color: white;
}



/*=========== SCHEDULE 1 COLUMN 2 ==========*/

.dots {
	height: 30px;
	width: 30px;
	background-color: lightgray;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	margin: 5px;
	margin-top: 20px;
	clear: both;
	cursor: pointer;
}

.dots span {
	margin: auto;
	color: #2f2f2f;
}

.dot1 {
	background-color: #FF8C74;
}

.dot1 span {
	color: white;
}

.col2-content {
	display: flex;
	justify-content: center;
}

.calendar-icon {
	font-size: 170px;
	position: absolute;
	margin-top: 90px;
}

.col2-content h1 {
	position: absolute;
	margin-top: 260px;
	text-align: center;
}


.col2-content a {
	position: absolute;
	margin-top: 380px;
	color: white;
	text-decoration: none;
}

.col2-content a:nth-child(6) {
	position: absolute;
	margin-top: 360px;
}




/*=========== SCHEDULE 2 ===========*/



.back-arrow {
	position: absolute;
	font-size: 40px;
	left: 10px;
	top: 10px;
	cursor: pointer;
}

/*=========== CALENDAR CODE ==========*/

caption {
	background-color: #73E6A1;
	height: 3em;
	line-height: 3em;
	color: white;
	border-radius: 5px 5px 0px 0px;
	font-weight: 600;
}

table {
	background: #ddd;
	position: absolute;
	top: 45%;
	left: 35%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	border-collapse: collapse;
}

table,
th,
tr {
	text-align: center;
	vertical-align: middle;
}

table thead th {
	border: solid 2px white;
	width: 3em;
	height: 2em;
	font-weight: 900;
	color: black;
}

table tbody td {
	border: solid 2px white;
	height: 2.7em;
}

a {
	text-decoration: none;
}

tbody a {
	display: block;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
}


tbody a:hover {
	background-color: lightblue;
	color: white;
}

tbody a:focus {
	background-color: #2F9AFF;
	color: white;
}

.null {
	color: gray;
	cursor: not-allowed;
}




/*=======NEXT BUTTON=======*/

.next-btn {
	display: none;
	position: absolute;
	width: 200px;
	height: 50px;
	background-color: #FF8C74;
	bottom: 60px;
	border-radius: 5px;
	transition: all 0.3s;
	cursor: pointer;

}

.next-btn:hover {
	background-color: #77D7FF;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.next-btn span {
	margin: auto;
	font-weight: 600;
	font-size: 1.2em;
}






/*=========== SCHEDULE 3 ===========*/

.schedule-form input[type=text],
select,
textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	resize: vertical;
}
.schedule-form input[type=submit] {
    background-color: #73E6A1;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    margin-top: 10px;
    margin-left: 485px;
}

.schedule-form input[type=button] {
	background-color: #73E6A1;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	outline: none;
	margin-top: 10px;
	margin-left: 485px;
}

.schedule-form input[type=button]:hover {
	background-color: #45a049;
}

#subject{
	margin-top: 5px;
}

.schedule-form {
	position: absolute;
	width: 50%;
	top: 50px;
	color: white;
}




/*=========== SCHEDULE 4 ==========*/

.check-icon {
	font-size: 100px;
	position: absolute;
	top: 100px;
}

.schedule4-col2 .col2-content h1 {
	white-space: nowrap;
}

.schedule4-col1 {
	height: 100%;
	width: 70%;
	display: flex;
	justify-content: center;
	transition: all 1s;
}

.schedule4-col2 {
	height: 100%;
	width: 30%;
	display: flex;
	justify-content: center;
	background-color: #626262;
	box-shadow: -3px 0px 20px 10px rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	transition: all 1s;

}


.schedule4-container:hover .schedule4-col1 {
	width: 0%;
	transition: all 1s;
}

.schedule4-container:hover .schedule4-col2 {
	width: 100%;
	transition: all 1s;
}

.active1 {
	width: 0%;
	transition: all 1s;
}

.active2 {
	width: 100%;
	transition: all 1s;
}

.schedule4-col2 a {
	color: #FF8C74;
	transition: all 0.3s;
}


.schedule4-col2 a:hover {
	color: #77D7FF;
}










.schedule1-container {
	display: flex;
}

.schedule2-container {
	display: none;
}

.schedule3-container {
	display: none;
}

.schedule4-container {
	display: none;
}

/*=========shop-container========*/

#shop-section{	
     margin-top: -20px;
      padding: 0;
      display: flex;
      justify-content: center;
     margin-bottom: 50px;
 }
 
 /*
 #contact-section h1{
      margin-top:100px;
 }
 */
 
 .shop-container{
      width:60vw;
 /*	background-color: blue;*/
      display: flex;
      margin-top:100px;
 }
 
 .shop-container h1{
     position: absolute;
     margin-left: 10px;
 }
 /*
 .prod-container{
      width: 100%;
      height:300px;
      background-color: green;
      margin: 5px;
 }
 */
 
 
 .prod-container{
      flex: 0 0 auto;
      margin: 10px;
      margin-top: 40px;
      width: 100%;
      height:350px;
      background-color: transparent;
      text-align: center;
      box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.75);
      transition: all 0.3s;
 }
 
 .prod-container:hover{
      box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.75);
 }
 
 .prod-container h3{
      margin-top: 15px;
 }
 
 .prod-container p{
      font-size: 0.9em;
      margin-top:15px;
 }
 
 .prod-container h4{
      margin-top: 15px;
 }
 
 
 
 
 .flex-products{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: start;
      align-items: auto;
      align-content: start;
     margin-top: 100px;
 }
 
 
 
 .flex-products img{
 /*	opacity: 0.7;*/
     width: 100%;
     height: auto;
     transform: scale(1.15);
     transition: transform 0.5s,opacity 0.5s;
      
 }
 .flex-products img:hover{
       opacity: 0.7;
     transform: scale(1.05);
      transition: transform 0.5s,opacity 0.5s;
      cursor: pointer;
 }
 
 .flex-products div{
      display: block;
     float: left;
     width: 210px;
      overflow:hidden;
 }
 
 .cart-icon{
      position: absolute;
      font-size: 4em;
     margin-left: -135px;
     margin-top: 50px;
      opacity: 0;
      transition: all 0.3s;
      pointer-events: none;
 }
 
 .flex-products img:hover + .cart-icon{
       opacity: 1;
 }
 
 
 
 
 
 
 
 .cart-btn{
      padding: 7px 10px;
      background-color: white;
      border: none;
      border: 2px solid #FFB460;
      background-color: transparent;
      padding: 12px 25px;
      border-radius: 3px;
      text-decoration: none;
      font-weight: 300;
      color: white;
      box-shadow: 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0);
      margin: 10px;
      outline:none;
      transition: all 0.3s;
 }
 
 .cart-btn:hover{
      background-color: #FFB460;
      box-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.24);
      cursor: pointer;
 }
 
 
 
 .cart-widget{
      position: fixed;
      width: 17vw;
      height: 31vh;
      background-color: #E58216;
     right: 35px;
     top: 220px;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.6);
      display: none;
      opacity: 0;
 }
 
 .cart-widget h2{
      margin-top: 20px;
 }
 
 .cart-widget img{
      width: 80px;
      height:80px;
      object-fit: cover;
     margin-top: 30px;
     margin-left: -200px;
 }
 
 .cart-widget h4 {
     margin-top: -75px;
     margin-left: 20px;
 }
 
 .cart-widget p {
     margin-left: 30px;
     margin-top: 20px;
 }
 
 .cart-widget h3 {
     margin-left: 5px;
     margin-top: 50px;
 }
 
 .cart-widget pre {
     font-family: 'Lato', 'Arial', sans-serif;
 }
  
 .checkout-btn{
      background-color: white;
      border: none;
      border: 2px solid #FFF;
      background-color: transparent;
      padding: 12px 70px;
      border-radius: 3px;
      text-decoration: none;
      font-weight: 300;
      color: white;
      box-shadow: 0 0px 0px rgba(0,0,0,0), 0 0px 0px rgba(0,0,0,0);
      margin: 10px;
      outline:none;
      transition: all 0.3s;
 }
 
 .checkout-btn:hover{
      background-color: #FFF;
      color: black;
      box-shadow: 0 14px 28px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.24);
      cursor: pointer;
 }
 
 
 
 .cart-widget-active{
      transition: all 0.5s;
      opacity: 1;
 }
 
 
/*=========Forums-container========*/

#forums-section{	
     margin-top: -20px;
      padding: 0;
      display: flex;
      justify-content: center;
      margin-bottom: 50px;
      /* border: 2px solid red; */
 }
 
 
 .forums-container{
      width:60vw;
      /* border: 2px solid blue; */
      display: flex;
      margin-top:100px;
      flex-direction: column;
 }
 
 
 
 .forums-box{	
      justify-content: center;
     margin-top: -30px;
      /* border: 2px solid green; */
 }
 
 .forums-rows{
      width:100%
 }
 
 .forums-rows{
      /* border: 2px solid pink; */
      flex-direction: column;
      display: flex;
 }
 
 .forums-row1{
     background-color: #252525;
      padding:7px;
      margin-top: 50px;	
     border-radius: 15px 15px 0px 0px;
 }
 
 .forums-row1 h2{
      padding:5px;
     margin-left: 15px;
 }
 
 .forums-row1 p{
      padding-left:5px;
     margin-left: 15px;
 }
 
 .forums-cols{
      border-left: 1px solid rgba(98, 98, 98, 0.3);
      padding:10px;
 }
 
 .forums-col1{
      border-left: 1px solid rgba(98, 98, 98, 0);
      /* border: 2px solid red; */
 }
 
 .forums-row2{
     background-color: #252525;
      flex-direction: row;
     user-select: none;
      /* border: 2px solid peru; */
 }
 
 .forums-row2:nth-child(2){
      border-radius: 0px 0px 15px 15px; 
 }
 
 .forums-row2:nth-child(even){
     background-color: rgb(48, 48, 48);
 }
 
 .forums-row2:last-child{
      border-radius: 0px 0px 15px 15px; 
 }
 
 
 
 
 .forums-row2 .forums-cols p{
      margin-top: 15px;
 }
 
 .forums-text{
      display: flex;
      flex-direction: column;
      margin-left: 0px;
     margin-top: 10px;
 }
 
 .forums-author{
      display: flex;
      flex-direction: row;
      margin-left: 20px;
 }
 
 .forums-date{
      display: flex;
      flex-direction: row;	
      margin-left: 20px;
 }
 
 .forums-date p{
      margin-top: 0px !important;	
      margin-left:15px;
 }
 
 .forums-profile-pic {
      width:50px;
      height: 50px;
      margin-top:15px;
      border-radius: 10px;
      transition: all 0.1s;
      margin-right:15px;
      object-fit: cover;
 }
 
 .forums-profile-pic:hover {
      width:50px;
      height: 50px;
      cursor: pointer;
      transform: scale(0.9);
 }
 
 .forums-row2 .forums-col1{
      /* border: 2px solid aqua; */
      width:70%;
      display: flex;
      flex-direction: row;
 }
 
 .forums-row2 .forums-col2{
      width:23%;
      /* border: 2px solid coral; */
      text-align: left;
 }
 
 .forums-row2 .forums-col3{
     width: 7%;
      /* border: 2px solid coral; */
      text-align: center;
 }
 
 .forums-row2:hover {
      cursor: pointer;
 }
 
 /* #FF6F51 */
 .chat-icon{
      font-size: 1.5em;
      background-color: #757575;
      padding: 10px;
      border-radius: 50px;
     margin-top: 30px;
     margin-left: 30px;
      transform: translate(-50%, -50%);
 }
 
 .forums-row2:hover .chat-icon{
      cursor: pointer;
      background-color: #FF6F51;
      padding: 10px;
      font-size: 1.9em;
 }
 
 .forums-row2 .chat-icon{
      transition: all 0.2s;
 }
 
 
/*=========contact-container========*/

#contact-body{
	overflow-y: hidden;
}



#contact-section{	
	margin-top: -20px;
	padding: 0;
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
 }
 
 /*
 #contact-section h1{
      margin-top:100px;
 }
 */
 
 .contact-container2{
      width:60vw;
 /*	background-color: blue;*/
      display: flex;
      margin-top:100px;
 }
 
 .contact-col-1 {
     width: 45%;
     height: 100%;
 /*    border: 2px solid red;*/
     left: 0px;
     margin-right: 2%;
 }
 
 .contact-col-2{
      width: 50%;
      height: 100%;
 /*	border: 2px solid green;*/
 }
 
 input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
 }
 
 
 input[type=text]{
      width: 70%;
 }
 
.contact-form2 input[type=submit] {
    background-color: #73E6A1;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    margin-top: 10px;
}

 input[type=button] {
      background-color: #73E6A1;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      outline: none;
     margin-top: 10px;
 }
 
 input[type=button]:hover {
      background-color: #45a049;
 }
 
 #message{
    margin-top: 6px;
    height: 145px;
 }
 .contact-form2{
      width:100%;
      top:50px;
      color:white;
      margin: 0px 10px;
 }
 
 
 
 .contact-map {
     position: absolute;
     margin-top: 90px;
     margin-left: 0px;
      height: 495px;
      border-radius: 4px;
 }
 
 
 /*==========SUBMIT LIGHTBOX=========*/
 
 
 .submit-lightbox{
      position: absolute;
      height:50vh;
      width:40vw;
      background-color: #626262;
      display: none;
      justify-content: center;
      margin-top: 200px;
      border-radius: 10px;
      opacity: 0;
 }
 
 .submit-lightbox h1{
      position: absolute;
      margin-top: 250px;
 }
 
 .submit-lightbox p{
      position: absolute;
      margin-top: 330px;
 }
 
 .submit-lightbox a{
      text-decoration: none;
      color: #FF8C74;
      transition: all 0.3s;
 }
 
 .submit-lightbox a:hover{
      color: #77D7FF;
 }
 
 
 .check-icon{
      font-size: 100px;
      position: absolute;
      top:150px;
      color: #73E6A1;
 }
 
 
 
 
 
 
 
 
 /*=========TEMP CLASSES=======*/
 
 .blur-active{
      filter: blur(7px) brightness(30%);
      transition: all 0.5s;
 }
 
 .lightbox-active{
      display: flex;
      opacity: 0;
 }
 
 .lightbox-active2{
      opacity: 1;
      transition: all 0.5s;
 }
 
.login-username{
     margin-top: 55px !important;
}
 
.login-username, .login-password{
     /* float: right; */
     padding: 15px !important;
     border: none !important;
     border-bottom: solid 3px orange !important;
     border-radius: 5px !important;
     margin-right: 10px !important;
     /* margin-top: -20px !important; */
     font-size: 17px !important;
     width:300px !important;
     color:white !important;
     background-color: transparent !important;
     transition: all 0.3s !important;
 }
 
.login-username::placeholder, .login-password::placeholder{
	color:#D0D0D0;
	transition: all 0.3s;
}
.login-username:focus, .login-password:focus{
	outline:none;
  	border-bottom: solid 3px orange;
	transform: scale(1.05);
}
 
 .log-in-card{
     position: fixed !important;
     width: 17vw !important;
     height: 33vh !important;
     background-color: rgb(48 48 48) !important;
     right: -135px !important;
     top: 178px !important;
     text-align: center !important;
     padding: 10px !important;
     border-radius: 15px !important;
     backdrop-filter: blur(5px) !important;
     opacity: 0 !important;
     display:none !important;
     transition: all 0.3s !important;
     overflow: hidden !important;
}

.log-in-card-active{
	display:block !important;
	opacity: 1 !important;
	transition: all 0.3s !important;
}
 
.login-form h3{
	position: absolute;
	top:0;
	transform: scale(1.5);
	background-color: #252525;
	padding: 40px 55% 25px;
	transform: translate(-50%, -50%);
    margin-left: 50%;
	margin-bottom: 20px;
	font-size: 1.5em;
}

.login-form h4{
	position: absolute;
	margin-top: -10px;
	right:0;
	transform: scale(1.5);
}

.login-form h4:hover{
	cursor: pointer;
}