/* ---------------------- SUNSHINE IT HEADER CSS ---------------------- */

/* ------- Removal of default padding, margin & list style ------- */

* {	margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; }
html { min-height: 100%; min-width: 100%; position: relative; }

body { overflow-x: hidden; }

html, body {
  /* Prevents trackpad and mobile swipes from triggering history back/forward */
  overscroll-behavior-x: none;
}

/*h1, h2 {
	font-family: impact; font-size: 32pt; text-align: center; letter-spacing: 2px;
	position: relative; opacity: 0;	animation: fade-slide 1s; font-weight: 400;
	animation-fill-mode: forwards; animation-delay: 0.5s; color: #0056b3;
}

h2 { font-family: fivosans-bold; font-size: 14pt; text-align: left;}*/


nav p, nav a {
	font-family: opensans-light; font-size: 12pt; opacity: 0; 
	animation: fade-text 1s; animation-fill-mode: forwards; animation-delay: 0.5s;
}

input {
	border-radius: 0; -webkit-appearance: none;
    -moz-appearance: none; appearance: none;
}



@font-face {
    font-family: fa-solid-900; src: url(fonts/fa-solid-900.ttf);
}

@font-face {
    font-family: fivosans-bold; src: url(FONTS/FIVOSANS-BOLD.otf);
}
@font-face {
	font-family: opensans-light; src: url(FONTS/OPENSANS-LIGHT.ttf);
}
@font-face {
	font-family: opensans-regular; src: url(FONTS/OPENSANS-REGULAR.ttf);
}
@font-face {
	font-family: impact; src: url(FONTS/IMPACT.ttf);
}

@font-face {
	font-family: gilc; src: url(FONTS/GILC.ttf);
}

@font-face {
    font-family: msyi; src: url(FONTS/MSYI.ttf);
}
@font-face {
    font-family: calibril; src: url(FONTS/CALIBRIL.TTF);
}


/* -------- Nav -------- */

nav {
	width: calc(100% - 50px); height: 70px; padding: 0 25px; position: absolute;
	top: 0px; z-index: 2; background-color: rgba(0,0,0,.7); transition: .5s;
}
nav img {
	height: 60px; margin: 5px 0; transition: .3s;
}
nav img:hover {
	transform: scale(1.05);
}
nav span {
	display: none;
}

nav b, #close-nav, #bycar-mobfunc, #close-store-opts p {
	display: none;
}
#nav-sel a, #nav-sel p {
	padding: 7px 30px; margin: 17px 0px; color: white;
	display: inline-block; border-right: solid 1px #d6ab60; transition: .3s;
}
#nav-sel a:hover, #nav-sel p:hover {
	color: #d6ab60; cursor: pointer;
}
#nav-sel a:last-child {
	border: none;
}
#nav-sel {
	float: right;
}

/* -------- nav-services, nav-products -------- */

/*#nav-prods {
	position: relative;
}
#nav-prods:hover::after {
	height: 150px; top: 53px; left: -50px; opacity: 1;
}

#nav-prods::after{
	content: ""; height: 0; width: 364px; position: absolute; top: 43px;
	background-color: white; display: block; opacity: 0; transition: opacity .3s, top .3s;
}*/

#nav-services, #nav-products {
	float: left;
}


#nav-services:hover #service-opts {
	height: 100px; opacity: 1;
}
#nav-products:hover #product-opts {
	height: 200px; opacity: 1;
}
	
	
#nav-services:hover #service-opts li, #nav-products:hover #product-opts li {
	display: block;
}


#service-opts, #product-opts {
	width: 450px; height: 0px; position: absolute; top: 70px;
	right: 0; background-color: white; opacity: 0; transition: .3s;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 20px 0px;
}

#service-opts {
	width: 350px; margin: 0 100px 0;
}
#service-opts, #product-opts {
	display: flex; flex-wrap: wrap;
}


#service-opts li, #product-opts li {
	display: none;
}



#service-opts a, #product-opts a {
	color: black; animation-delay: 0s;
	text-align: center;
}






/* -------- Item -------- */

/* -------- Footer -------- */

footer {
	width: 1200px; padding: 25px calc(50% - 600px);
	background-color: #00254d; display: flow-root;
}
footer p, footer a {
	font-family: opensans-light; font-size: 12px;
	font-weight: 400; color: white;	letter-spacing: 1px;
}

footer a {
	margin: 8px 0 0; padding: 1px 0; display: inline-block;
	border-top: 1px solid; border-image-slice: 1;
	border-image-source: linear-gradient(to left, #009eed, white); transition: .3s;
}
footer a:hover {
	color: #d6ab60; cursor: pointer;
}


footer #banner {
	width: 50%; float: left;
}
footer #banner img {
	width: 250px;
}
footer #banner p {
	width: 300px; margin: 10px;
}



footer #social {
	display: inline-block;
}
footer #social ul li {
	margin: 0 15px 0 0; float: left;
}
footer #social ul li a {
	padding: 5px; border-radius: 10px; border-top: none;
}
	



#faqs, #products {
	width: 150px; margin: 0 35px; float: left;
}


footer #faqs h2, footer #products h2 {
	width: 100%; font-family: opensans-regular; 
	font-size: 11pt; color: white;
}
footer #faqs a, footer #products a {
	width: 100%;
}
footer #products h2:nth-of-type(2) {
    margin: 6px 0 0;
}


footer #copyright {
	width: 100%; margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid;
	border-image-slice: 1; border-image-source: linear-gradient(to left, #009eed, white);
	float: left;
}
footer #copyright p {
	float: left;
}
footer #copyright a {
	margin: 0 0 0 25px; border: none; float: right;
}




/* --------------------------- Medium sized screens -------------------------- */

@media screen and (max-width:1680px){
	
/* -------- Item -------- */

#product-imgs {
	width: calc(100% - 700px); height: calc(100% - 300px); margin: 150px 50px;
}

}


/* --------------------------- 1080p Laptop 150% Scale screens -------------------------- */

@media screen and (max-width:1300px){

/* -------- Item -------- */


}


/* --------------------------- Tablet sized screens -------------------------- */

@media screen and (max-width:1080px){
	
/* -------- Item -------- */



}


/* --------------------------- Smaller Tablet sized screens -------------------------- */

@media screen and (max-width:900px){
	
/* -------- Item -------- */


}


/* --------------------------- Mobile sized screens -------------------------- */

@media screen and (max-width:680px){

/* -------- Hide Nav -------- */

nav {
    width: 100%; height: 60px; padding: 0;
	text-align: center;
}
nav b {
	padding: 17px 10px; font-size: 30pt; color: whitesmoke;
	line-height: 30px; display: block; position: absolute;
}

nav img {
	height: 60px; margin: 0;
}

nav span {
	display: block;
}
nav span p {
	padding: 0 25px 10px 25px; font-size: 28px; font-weight: 600; color: white;
	position: relative; top: 15px; right: 25px; float: right;
}


#cover {
	width: 0; height: 100vh; opacity: 0; position: absolute;
	background-color: rgb(0,0,0,0.8); transition: opacity .3s; z-index: 1;
}


#nav-sel {
	width: 0; height: 100vh; background-color: rgb(50,50,50);
	transition: .3s cubic-bezier(.35,.88,.5,.93); overflow-x: hidden;
	position: fixed; top: 0; left: 0; z-index: 2; 
}
#nav-sel a, #nav-sel p {
	width: calc(100% - 60px); color: white; white-space: nowrap;
	border: none;
}



#nav-services, #nav-products {
	width: 100%; display: inline-block;
	position: relative;
}

#nav-services:hover #service-opts, #nav-products:hover #product-opts {
	height: 0px;
}


#service-opts, #product-opts {
	width: 200px; height: 0px; margin: 0;
	justify-content: center; z-index:5;
}
#service-opts a, #product-opts a {
	color: black;
}


#nav-services:hover #service-opts li, #nav-products:hover #product-opts li {
	display: none;
}
	



/* -------- footer -------- */

footer {
	width: calc(100vw - 40px); padding: 20px;
}


footer #banner {
	width: 100%; float: left;
}


footer #social {
	margin: 0 0 0 10px;
}
footer #social ul li a {
	padding: 5px 5px 2px 5px; background-color: #00677D;
}

#info {
	width: calc(100% - 20px); margin: 10px; display: inline-flex;
	flex-wrap: wrap; justify-content: space-between;
}
#faqs, #products {
	width: 150px; margin: 0;
}

footer #copyright {
	text-align: center;
}

footer #copyright a, footer #copyright p {
	margin: 0 10px; float: unset;
}


}


/* --------------------------- Small Mobile sized screens -------------------------- */

@media screen and (max-width:360px){
	

}

@keyframes fade-slide {
	from {left: -10%; opacity: 0;} to {left: 0px; opacity: 1;}
}

@keyframes fade-text {
	from {opacity: 0;} to {opacity: 1;}
}

@keyframes prefade{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes zoom{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes expand{
  0%{
	transform: scale(1);
  }

  15%{
	transform: scale(1);
  }
  
  50%{
	transform: scale(1.4);
  }
  
  65%{
	transform: scale(1.4);
  }

  100%{
    transform: scale(1);
  }

}

@keyframes drawArc1 {
  0%{
	transform: rotate(0deg);
  }
  15%{
	transform: rotate(0deg);
  }
  40%{
	transform: rotate(160deg);
  }
  50%{
	transform: rotate(180deg);
  }
  65%{
	transform: rotate(180deg);
  }
  90%{
	transform: rotate(340deg);
  }
  100%{
    transform: rotate(360deg);
  }
}