/* ---------------------- Ipad Test Home CSS ---------------------- */

/* ------- Removal of default padding, margin & list style ------- */
* {	margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; }

h1, h2 {
	font-family: impact; font-size: 58pt; font-weight: 400; letter-spacing: 1.5px;
	position: relative; opacity: 0;
	animation: fade-slide 1s; animation-fill-mode: forwards;
	animation-delay: 0.5s;
}

p, a {
	font-family: montserrat-light; font-size: 16pt; font-weight: 400;
	letter-spacing: .5px; opacity: 0; animation: fade-text 1s;
	animation-fill-mode: forwards; animation-delay: 0.5s;
}

em {
	/*color: rgb(140,10,10); RED*/ color: rgb(85,160,255); font-style: normal;
}

@font-face {
    font-family: impact; src: url(IMPACT.ttf);
}
@font-face {
    font-family: centurygothic; src: url(GOTHIC.ttf);
}
@font-face {
    font-family: bebasneue-regular; src: url(BEBASNEUE-REGULAR.ttf);
}
@font-face {
    font-family: montserrat-light; src: url(MONTSERRAT-LIGHT.ttf);
}

body {
	width: 100vw; height: 500vh; overflow-x: hidden;
}
main {
	width: 100vw; height: 100%; position: fixed; top: 0; transition: .3s cubic-bezier(.35,.88,.5,.93);
}

article {
	width: 100vw; height: 100%; position: relative; transition: .3s cubic-bezier(.35,.88,.5,.93);
}

#scroll-reminder {
	height: calc(100% - 50px); width: 100%; padding: 50px 0 0; position: fixed; 
	top: 0px; left: 0px; z-index: 4; text-align: center; display: none;
	background-image: linear-gradient(to top,#b9bfb0 0%,#e4e7e0 100%); 
}
#scroll-reminder h4 {
	margin: 0 50px; font-size: 52pt; letter-spacing: 1.5px; font-family: bebasneue-regular;
	color: white; text-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}


#scroll-icon {
	width: 120px; height: 210px; margin: 50px 0 0; box-shadow: inset 0 0 0 4px #fff, 0px 0px 20px rgba(0,0,0,0.1);
	border-radius: 75px; display: inline-block; position: relative;
}
#scroll-icon:before {
  content: ''; width: 20px; height: 20px; background: #fff; margin-left: -10px; top: 100px;
  border-radius: 10px; animation-duration: 1.5s; position: absolute; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  animation-iteration-count: infinite; animation-name: scroll-down;
}

@keyframes scroll-down {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px); }
}

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

nav {
	width: 100%; transition: .5s; position: fixed; 
	top: 0px; z-index: 3; background-color: rgba(0,0,0,0.7);
}
nav b {
	display: none;
}

#logo {
	padding: 0px; font-size: 0pt;
}

#logo::after {
	content: ""; height: 60px; width: 320px; background-image: url("ITNOVA_WEB_LOGO.png");
	background-size: cover; background-position: center; display: inline-block; transition: .2s;
}
#logo:hover::after {
	transform: scale(1.1);
}

.nav-sel a {
	padding: 15px 25px 15px 25px; font-family: bebasneue-regular; font-size: 16pt; 
	color: white; border-bottom: solid 3px rgba(0,0,0,0);
	transition: .3s; float: left;
}
.nav-sel a:hover {
	color: rgb(192,38,44); text-shadow: 0px 0px 10px rgb(192,38,44);
}

.nav-sel div {
	float: right;
}

.nav-sel p {
	display: none;
}


/* -------- About -------- */

.banner {
	background-color: rgba(255,255,255,0.7); text-align: center;
}
.banner p {
	display: none;
}

.banner, .nav-sel {
	padding: 0 25px;
}


#backdrop {
	width: 850px; height: 100%; float: left;
}
#backdrop a {
	width: 300px; padding: 0px 50px; font-size: 42pt; position: relative;
	font-family: bebasneue-regular; color: white; text-align: right; position: absolute;
	left: 50vw; bottom: 50px; background-color: #DE054E; z-index: 2;
}
#backdrop a:hover {
	cursor: pointer;
}
#backdrop svg{
	height: 100%; position: absolute; z-index: 2;
}
.st0{fill:#DE054E;} .st1{fill:#A5A6A5;} .st3{fill:#DE054E;}


#about {
	width: 3922px;
}

#about-group {
	position: relative; transition: .3s cubic-bezier(.35,.88,.5,.93);
}
#about-group {
	width: 2040px; height: 100%; 
	position: relative; float: left;
}

#about-group section {
	width: 360px; margin: 50px 75px;
	float: left;
}

#about-group section div {
	margin: 25px 0 0; box-shadow: 2px 2px 15px rgb(0 0 0 / 50%);
	position: relative;
}
#about-group section div:hover .about-item {
	opacity: 1; bottom: 0px;
}

#about-group section div h1 {
	width: 360px; height: 83px; padding: 0 15px; color: white; font-family: bebasneue-regular;
	background-color: #A5A6A5; animation: none; opacity: 1; font-size: 20pt;
	font-weight: 400; display: table-cell; vertical-align: middle; text-align: center;
}

#about-group section div img {
	width: 100%; height: 270; object-fit: cover;
}

.about-item {
	width: calc(100% - 20px); padding: 10px; position: absolute; bottom: -15px; left: 0px;
	background-color: rgba(0,0,0,0.7); opacity: 0; transition: .3s;
}
.about-item h3 {
	font-family: bebasneue-regular; font-size: 22pt; color: white;
	font-weight: 400; text-align: center;
}
.about-item li {
	width: 50%; float: left; color: white;
}



/* -------- Home -------- */

#home img {
	width: 100vw; height: 100%; object-fit: cover;
	z-index: -1;
}
#home::before {
    content: ""; width: 100vw; height: 100%; position: absolute;
    right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);
}
#home div {
	height: 350px; width: 150px; margin: 0 0 0 250px; padding: 100px 0 0;
	position: absolute; bottom: 0px; color: white;
	background-color: rgba(255,0,0,0.5); display: block; transition: .3s;
}
#home div h1 {
	width: 850px; margin: 0 0 0 50px; 
	color: white; font-family: impact;
}
#home span {
    width: 132px; margin: 0 calc(50vw - 66px); color: white;
    position: absolute; bottom: 15px; display: block;
    animation: expand-services 1.5s 4s infinite;
}
#home span h2 {
	position: relative; font-size: 32pt; font-family: impact; text-align: center; 
	opacity: 0; animation: fade-fall 3s 1.5s; animation-fill-mode: forwards;
}
#home span h2::after {
	content: "\276d \276d"; transform: rotate(90deg); font-size: 42pt;
	display: block; position: relative; top: -15px;
}


/* -------- Services -------- */

#services {
	width: 250vw;
}
#services a:hover {
	cursor: pointer;
}
#services::before {
	content: ""; width: 100vw; height: 100%; position: absolute;
	background-image: url(Heroimg.png); background-size: cover;
	background-repeat: no-repeat; background-position: center;
}

#services-options {
	width: calc(50vw - 200px); height: 650px; transition: .5s cubic-bezier(.35,.88,.5,.93);
	margin: calc(50vh - 325px) 0 calc(50vh - 325px) 200px; float: left;
}
#services-options h1 {
    margin: 25px 0 0; font-family: bebasneue-regular;
    color: white;
}
#services-options a, #faqs a, #opt-extend a, #faqs-extend a {
	width: 300px; padding: 0px 50px; font-size: 58pt; 
	position: relative; font-family: bebasneue-regular; color: white;
    text-align: right; background-color: #DE054E; float: left;
}
#services-options a::before {
	width: 0; border-bottom: 50px solid transparent; border-right: 50px solid #c4c6ca;
    border-top: 50px solid transparent; content: ""; height: 0; position: absolute;
    right: 100%;
}


#opt-extend a, #faqs-extend a {
	display: none;
}


#opt-extend {
	width: 450px; padding: calc(50vh - 407px) 25px 0 25px; height: 815px;
    position: absolute; left: -500px;
}

#services-group {
	width: 150vw; height: 100%; position: relative;
	transition: .3s cubic-bezier(.35,.88,.5,.93); float: left;
}

#backdrop2 {
	width: 100vw; overflow: hidden; float: left;
}
#backdrop2 svg {
	height: 100%; position: relative; opacity: 0;
    float: left;
}
.st4 {fill: #DE054E;} .st5 {fill: rgba(150,0,0,0.7);}


/* -------- Services-FAQ's -------- */

#faqs {
	width: calc(50vw - 250px); height: 90vh; padding: 10vh 100px 0 150px;
	background-color: rgba(0,0,0,.5); float: left;
}
#faqs h1, #faqs h2 {
	font-family: bebasneue-regular; font-size: 58pt;
    color: #DE054E; margin: 25px 0 0;
}
#faqs h2 {
	font-size: 42pt; color: white;
}
#faqs a:after {
	width: 0; border-bottom: 50px solid transparent; border-left: 50px solid #c4c6ca;
    border-top: 50px solid transparent; content: ""; height: 0;
    position: absolute; left: 100%;
}


#faqs-extend {
    width: 650px; height: calc(100vh - 50px); padding: 25px;
    position: absolute; right: -700px; overflow-y: scroll;
}
#faqs-extend h1 {
	font-size: 32pt; margin: 15px 0;
}
#faqs-extend b {
	margin: 10px 0 0; font-size: 24pt; color: #DE054E;
	font-family: bebasneue-regular; font-weight: 400; display: block;
}
#faqs-extend p {
	font-size: 14pt;
}

#faqs-extend span {
	display: none;
}
#faqs-extend span p {
	margin: 10px 0 0;
}

/*#home, #about, #services {
	position: relative; width: 100vw; height: 100vh;
} */


/* -------- Gallery -------- */
#gallery {
	width: 150vw;
}
#gallery h1 {
	width: 570px; height: 262px;  margin: 0 calc(50vw - 285px); position: absolute; 
	top: calc(50vh - 70px); color: 1d1d1d; font-size: 108px; 
	text-align: center;  z-index: 2;

}
#gallery div {
	width: 150vw; height: 50%; float: left; background-color: 282828;
	position: relative; transition: .3s cubic-bezier(.35,.88,.5,.93); float: left;
}
#gallery div img {
	width: calc(33.33vw - 110px); height: calc(100% - 180px);
	margin: 80px 0 0 100px; position: relative; 
	border-left: 30px solid #DE054E; object-fit: cover; z-index: 2; float: left;
}

#contact {
	width: calc(50vw - 225px); height: 90vh; margin: 10vh 150px 0 75px;
	float: left; position: absolute; right: 0px; top: 0px;
}
#contact h2 {
	font-family: bebasneue-regular; font-size: 58pt; color: #DE054E;
}
#contact h3 {
	font-family: bebasneue-regular; font-size: 38pt;
	font-weight: 400;
}
#contact p {
	margin: 15px 0 0;
}
#contact a {
	width: calc(50vw - 15px); margin: 15px 0 0; display: block;
}
#contact a svg {
	height: 30px; margin: 0 10px -8px 0;
}

#contact b {
	width: 400px; margin: 25px 0 0; padding: 0px 50px; font-size: 58pt;
	position: relative; font-family: bebasneue-regular; font-weight: 400;
	color: white; text-align: right; background-color: #DE054E; float: left;
}
#contact b:after {
	width: 0; border-bottom: 50px solid transparent; border-left: 50px solid #c4c6ca;
    border-top: 50px solid transparent; content: ""; height: 0;
    position: absolute; left: 100%;
}
#contact b:hover {
	cursor: pointer;
}
.contact-ico {
	fill: #686868;
}

#location {
	width: 100%; height: 300px; border:0; margin:15px 0;
}

/* -------- Inventory -------- */

#inventory {
    position: fixed; top: 0; width: 100vw; height: 100%;
	background-color: rgba(0,0,0,.7); z-index: 2; display: none;
}
#inventory p {
	font-size: 28pt; font-weight: 600; position: absolute;
	top: 100px; right: 120px; z-index: 1;
}
#inventory p:hover {
	color: rgb(192,38,44); text-shadow: 0px 0px 10px rgb(192,38,44);
}
#inventory div {
	width: calc(100vw - 100px); height: calc(100vh - 50px); 
	margin: 0 50px 50px; overflow: hidden
}
#inventory iframe {
	position: relative; top: 50px;
}

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

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

#services-options {
	width: calc(50vw - 100px); height: 85vh;
	margin: 15vh 0 0 100px; float: left;
}

#services-options h1 {
	font-size: 52pt;
}

#contact {
	height: calc(100vh - 50); margin: 25px 150px 25px 75px;
}

}


/* --------------------------- Low Height screens -------------------------- */

/*@media screen and (max-height:890px) {

#services-options {
	width: calc(50vw - 100px); height: 85vh;
	margin: 15vh 0 0 100px;
}

#faqs {
	height: 98vh; padding: 2vh 100px 0 150px;
}

} */

@media (max-height:890px) {

#about-group section {
    margin: 30px 75px;
}
#about-group section img {
	height: 220px;
}

	
#services-options {
	width: calc(50vw - 100px); height: 85vh;
	margin: 15vh 0 0 100px;
}

#faqs {
	height: 98vh; padding: 2vh 100px 0 150px;
}

}


/* --------------------------- Smaller Desktop Support Down To (1200px By 740px) -------------------------- */

@media (max-height:890px) and (max-width:1680px) {

h1 {
    font-size: 46pt;
}
p {
    font-size: 14pt;
}

#services-options h1 {
	font-size: 52pt;
}
#services-options a {
	font-size: 52pt;
}

#opt-extend {
	width: 450px; padding: 60px 25px 0 25px;
	height: calc(100% - 60px);
}


#faqs {
	width: calc(50vw - 125px); height: calc(100% - 60px);
	padding: 60px 50px 0 75px;
}
#faqs a {
	font-size: 48pt; margin: 10px 0 0;
}
#services-options a::before {
	border-bottom: 42px solid transparent; border-right: 42px solid #c4c6ca;
    border-top: 42px solid transparent;
}
#faqs a::after {
	border-bottom: 42px solid transparent; border-left: 42px solid #c4c6ca;
    border-top: 42px solid transparent;
}

#faqs h1 {
	font-size: 48pt;
}
#faqs h2 {
	font-size: 42pt;
}

#faqs-extend {
	height: calc(100vh - 85px); padding: 60 25px 0 25px;
}


#contact {
    width: calc(50vw - 150px); height: calc(100% - 85px); 
	margin: 60px 75px 25px 75px;
}
#contact h2 {
	font-size: 46pt;
}

}

/* --------------------------- Smallest Desktop Support Down To (1200px By 640px) -------------------------- */

@media screen and (max-height:740px) and (max-width:1400px) {
	
#services-options {
	width: calc(50vw - 50px); height: 90vh; margin: 10vh 0 0 50px;
}
#services-options h1 {
	margin: 15px 0 0;
}

#faqs h1 {
	font-size: 42pt;
}
#faqs h2 {
	font-size: 38pt;
}

}


/* --------------------------- Smaller Desktop Support (1366 x 768) -------------------------- */

@media (max-height:770px) and (max-width:1680px) {
	
h1 {
	font-size: 42pt;
}
p {
	font-size: 14pt;
}


#about-group section {
    margin: 50px 75px;
}

#about-group section div h1 {
	height: 65px; font-size: 16pt;
}
#about-group section div img {
	height: 200px;
}

#backdrop a {
    width: 250px; font-size: 36pt;
}


#opt-extend {
	padding: 60 25px 0 25px;
}

#faqs {
	width: calc(50vw - 125px); height: calc(100% - 60px);
	padding: 60px 50px 0 75px;
}
#faqs h2 {
    font-size: 32pt;
}
#faqs h1 {
    font-size: 44pt;
}

#faqs-extend {
	width: 650px; height: calc(100vh - 85px);
	padding: 60px 25px 0 25px;
}


#gallery div img {
    width: calc(33.33vw - 55px); margin: 80px 0 0 50px;
	border-left: 15px solid #DE054E;
}


#contact {
	width: calc(50vw - 150px); height: calc(100% - 60px);
	margin: 60px 75px 0 75px;
}
#contact h2 {
	height: 50px; font-size: 42pt;
}
#contact p {
    margin: 10px 0 0;
}
#contact a {
	margin: 10px 0 0; font-size: 14pt;
}
#contact h3 {
	height: 50px;
}
#contact b {
	width: 260px; margin: 15px 0 0; font-size: 36pt;
}
#contact b:after {
	border-bottom: 31px solid transparent; border-left: 31px solid #c4c6ca;
	border-top: 31px solid transparent;
}

#location {
	height: 260px; margin: 10px 0;
}

}




/* --------------------------- Portable Devices (Tablets and Mobiles) -------------------------- */

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

@media screen and (max-width:1200px){
	
main, article, #about-group, #services-group {
	transition: none;
}
article {
	transition: height .3s;
}

#backdrop {
	width: 480px;
}
#backdrop a {
	width: auto; bottom: 80px; font-size: 36pt;
}
/*#about {
	width: calc(1530px + 480px);
}*/
#services {
	transition: .3s cubic-bezier(.35,.88,.5,.93);
}


#opt-extend a, #faqs-extend a {
	width: 200px; height: 74px; font-size: 38pt;
	height: 66px; z-index: 2; display: block;
}
#opt-extend a::before {
	width: 0; content: ""; height: 0; position: absolute; left: 100%;
	border-bottom: 33px solid transparent;  border-left: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#opt-extend h1 {
	font-size: 36pt;
}


#faqs-extend a {
    margin: 15px 0 0 33px;
}
#faqs-extend a::after {
	width: 0; content: ""; height: 0; position: absolute; right: 100%;
	border-bottom: 33px solid transparent; border-right: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#faqs {
	width: calc(50vw - 125px); height: 90vh;
    padding: 10vh 50px 0 75px;
}
#faqs a {
	width: auto;
}

#services-options a, #faqs a {
	font-size: 48pt; margin: 10px 0 0; height: 74px;
}
#services-options a::before {
	border-bottom: 42px solid transparent; border-right: 42px solid #c4c6ca;
    border-top: 42px solid transparent;
}
#faqs a::after {
	border-bottom: 42px solid transparent; border-left: 42px solid #c4c6ca;
    border-top: 42px solid transparent;
}

#gallery div img {
	width: calc(33.33vw - 25px); margin: 80px 0 0 20px; 
	border-left: 10px solid #DE054E;
}

#contact {
	height: calc(100vh - 75px); width: calc(50vw - 100px); margin: 75px 50px 0 50px;
}

#contact b {
	width: auto; font-size: 42pt;
}
#contact b:after {
	border-bottom: 37px solid transparent; border-left: 37px solid #c4c6ca;
    border-top: 37px solid transparent;
}

}

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

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

#home div {
	margin: 0;
}

#backdrop a {
	width: calc(100vw - 30px); margin: 0 15px; bottom: 45px; 
	font-size: 24pt; text-align: center; padding: 5px 0; left: 0px;
}


#services-options h1 {
	font-size: 42pt;
}
#services-options a, #faqs a, #contact b {
	width: 230px; height: 64px; font-size: 36pt; margin: 10px 0 0;
}


#faqs {
	width: calc(50vw - 100px); height: 95vh;
    padding: 5vh 50px 0 50px;
}
#faqs h1 {
	font-size: 36pt;
}
#faqs h2 {
	font-size: 30pt;
}

#services-options a, #faqs a {
	padding: 0 25px;
}


#contact {
    width: calc(50vw - 50px); margin: 75px 25px 0 25px;
}
#contact h2 {
    font-size: 36pt;
}
#contact p, #contact a {
    font-size: 14pt
}
#contact b {
    padding: 0px 25px; font-size: 36pt; height: 64px;
}

#services-options a::before {
    border-bottom: 32px solid transparent; border-right: 32px solid #c4c6ca;
    border-top: 32px solid transparent;
}
#contact b::after, #faqs a::after {
	border-bottom: 32px solid transparent; border-left: 32px solid #c4c6ca;
    border-top: 32px solid transparent;
}

}

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

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

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

#nav-options {
	width: 0px; height: calc(100vh - 50px); display: none;
	padding: 50px 0 0; position: fixed; top: 0; left: 0; transition: .3s;
	background-color: black; overflow-x: hidden; z-index: 3;
}
#nav-options p {
	display: block; color: white; font-size: 26pt;
	position: absolute; top: 25; right: 25;
}

.nav-sel a {
	font-size: 26pt;
}

nav b {
    padding: 0 5px; display: block; color: white;
	font-size: 32pt; float: right;
}
#logo::after {
	width: 104px; height: 54px;
}


/* -------- Home -------- */

#home div {
	height: 300px; width: 150px; margin: 0; padding: 50px 0 0;
}
#home div h1 {
	width: calc(100vw - 50px); margin: 0 25px; font-size: 36pt;
}
#home span {
	display: none;
}


/* -------- About -------- */

#about {
    width: 1320px;
}
#backdrop a {
	font-size: 28pt; bottom: 85px;
}


#about-group {
    width: 1320px;
}


#about-group section {
    width: 280px; margin: 45px 25px
}

#about-group section div h1 {
    width: 250px; height: 83px; font-size: 16pt;
}
#about-group section div img {
    height: 190px;
}


#backdrop {
	width: 0px;
}
#backdrop svg {
	display: none;
}


/* -------- Services -------- */

#services {
	width: 360vw;
}
#services-group {
    width: 250vw;
}

#backdrop2 {
    width: 150vw;
}



/* -------- Services -------- */

#services-options {
	width: calc(100vw - 155px); height: calc(100vh - 140px); 
	margin: 70px 0 70px 45px;
}

#services-options h1 {
    font-size: 38pt; width: 300px;
}


#services-options a, #faqs a {
	font-size: 38pt; width: 210px;
	height: 66px; z-index: 2;
}
#services-options a::before {
	border-bottom: 33px solid transparent; border-right: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#opt-extend {
	width: calc(100vw - 50px); padding: 55px 25px 0 25px; 
	height: calc(100vh - 55px); left: -100vw;
}
#opt-extend h1 {
	font-size: 36pt;
}
#opt-extend p {
	font-size: 14pt; margin: 0 0 10px 0;
}


#opt-extend a, #faqs-extend a {
    width: 150px; font-size: 32pt; height: 55px;
}
#opt-extend a::before {
	border-bottom: 28px solid transparent; border-left: 28px solid #c4c6ca;
	border-top: 28px solid transparent;
}
#faqs-extend a::after {
	border-bottom: 28px solid transparent; border-right: 28px solid #c4c6ca;
	border-top: 28px solid transparent;
}


#faqs {
    width: calc(100vw - 50px); height: calc(100vh - 45px); 
	padding: 45px 25px 0 25px;
}
#faqs h1 {
	font-size: 36pt;
}
#faqs h2 {
    font-size: 26pt;
}
#faqs a::after {
	border-bottom: 33px solid transparent; border-left: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#faqs-extend {
	height: calc(100vh - 155px); width: calc(100vw - 50px);
	padding: 55px 25px 100px 25px; right: -100vw;
}
#faqs-extend h1 {
	font-size: 26pt;
}
#faqs-extend p {
	font-size: 14pt; margin: 0 0 10px 0;
}




/*#services-options {
    width: calc(60vw - 50px); height: 600px;
    margin: calc(50vh - 300px) 0 calc(50vh - 300px) 50px;
}
#services-options h1 {
    font-size: 38pt; width: 300px;
}
#services-options a, #faqs a {
	font-size: 38pt; width: 200px;
	height: 66px; z-index: 2;
}
#services-options a::before {
	border-bottom: 33px solid transparent; border-right: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#opt-extend {
	width: calc(100vw - 50px); padding: 25px 25px 0 25px; 
	height: calc(100vh - 25px); left: -100vw;
}
#opt-extend h1 {
	font-size: 38pt;
}
#opt-extend p {
	font-size: 14pt; margin: 0 0 10px 0;
}


#faqs {
    width: calc(100vw - 100px);
}
#faqs a::after {
	border-bottom: 33px solid transparent; border-left: 33px solid #c4c6ca;
    border-top: 33px solid transparent;
}


#faqs-extend {
	width: calc(100vw - 50px); padding: 25px 25px 50px 25px; 
	height: calc(100vh - 75px); right: -100vw;
}
#faqs-extend h1 {
	font-size: 26pt;
}
#faqs-extend p {
	font-size: 14pt; margin: 0 0 10px 0;
} */


/* -------- Gallery -------- */

#gallery {
	width: 200%;
}
#gallery div {
    width: 350vw;
}
#gallery div img {
    width: calc(25% - 30px);
}
#gallery h1 {
    width: 100vw; height: 262px; margin: 0;
	font-size: 38pt;
}


#contact {
	width: calc(100vw - 50px); margin: 55px 25px 0 25px;
    height: calc(100vh - 55px);
}
#contact h2, #contact h3 {
    font-size: 32pt;
}
#contact p {
	margin: 10px 0 0; font-size: 14pt;
}
#contact a {
	width: calc(100vw - 15px);
}
#location {
	 height: 200px;
}


/* -------- Inventory -------- */

#inventory p {
    top: 50px; right: 40px;
}
#inventory div {
	height: calc(100vh - 60px); width: calc(100vw - 30px); margin: -50px 15px 0 15px;
}
#inventory iframe {
	top: 95px;
}

}


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

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

#home div {
	height: 340px;
}
#home div h1 {
	font-size: 32pt;
}


#about-group section div img {
    height: 185px;
}


#opt-extend h1 {
    font-size: 30pt;
}
#opt-extend p, #faqs-extend p {
    font-size: 12pt;
}

#faqs-extend h1 {
    font-size: 24pt;
}


#contact p, #contact a {
	font-size: 12pt;
}
#contact h2, #contact h3 {
    height: 36px; font-size: 28pt;
}
#contact b {
	height: 54px; font-size: 32pt;
}
#contact b::after {
	border-bottom: 27px solid transparent; border-left: 27px solid #c4c6ca;
	border-top: 27px solid transparent;
}


#contact a svg {
    height: 23px; margin: 0 5px -8px 0;
}

}

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

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

#scroll-reminder h4 {
	font-size: 38pt;
}

nav b {
	font-size: 22pt;
}
#logo::after {
    width: 88px; height: 42px;
    
}


#home div h1 {
	width: calc(100vw - 15px); margin: 0 15px; font-size: 28pt;
}


/* -------- About -------- */

#about {
	width: 1200px;
}

#backdrop a {
	width: calc(100vw - 30px); margin: 0 15px;
	font-size: 24pt; text-align: center; padding: 0; left: 0px;
}


#about-group {
    width: 1200px;
}

#about-group section {
    width: 250px;
}
#about-group section div {
    margin: 15px 0 0; box-shadow: 2px 2px 10px rgb(0 0 0 / 50%);
}
#about-group section div h1 {
    width: 240px; height: 50px; padding: 0 10px; font-size: 13pt;
}
#about-group section div img {
    height: 165px;
}


/* -------- Services -------- */

#services-options {
	width: calc(100vw - 155px); height: calc(100vh - 140px); 
	margin: 70px 0 70px 45px;
}

#services-options h1 {
    font-size: 30pt; width: 250px;
}

#services-options a, #faqs a {
	width: 170px; font-size: 32pt; height: 55px;
}
#services-options a::before {
	border-bottom: 28px solid transparent; border-right: 28px solid #c4c6ca;
	border-top: 28px solid transparent;
}

#opt-extend {
    padding: 60px 25px 0 25px;
}
#opt-extend h1 {
    font-size: 24pt; line-height: 100%;
}
#opt-extend p {
    font-size: 10pt; margin: 10px 0;
}


#opt-extend a, #faqs-extend a {
    width: 150px; font-size: 32pt; height: 55px;
}
#opt-extend a::before {
	border-bottom: 28px solid transparent; border-left: 28px solid #c4c6ca;
	border-top: 28px solid transparent;
}


#faqs {
    width: calc(100vw - 50px); height: calc(100vh - 45px); 
	padding: 45px 25px 0 25px;
}
#faqs h1 {
	font-size: 32pt;
}
#faqs h2 {
    font-size: 22pt;
}

#services-options a, #opt-extend a, #faqs a, #faqs-extend a, #contact b {
	width: 150px; height: 44px; padding: 0 20px;
	font-size: 26pt;
}


#faqs a::after, #contact b::after {
    border-bottom: 22px solid transparent; border-left: 22px solid #c4c6ca;
    border-top: 22px solid transparent;
}
#faqs-extend a::after {
	border-bottom: 22px solid transparent; border-right: 22px solid #c4c6ca;
    border-top: 22px solid transparent;
}


#services-options a::before {
	border-bottom: 22px solid transparent; border-right: 22px solid #c4c6ca;
    border-top: 22px solid transparent;
}
#opt-extend a::before {
	border-bottom: 22px solid transparent; border-left: 22px solid #c4c6ca;
    border-top: 22px solid transparent;
}


#faqs-extend {
	height: calc(100vh - 175px); padding: 50px 25px 125px 25px;
}
#faqs-extend h1 {
    margin: 10px 0; font-size: 16pt;
}
#faqs-extend p {
    margin: 0 0 5px 0; font-size: 10pt;
}
#faqs-extend b {
    margin: 5px 0 0; font-size: 16pt;
}


#contact {
	width: calc(100vw - 50px); height: calc(100vh - 100px);
	margin: 50px 25px 0 50px;
}
#contact h2, #contact h3 {
	font-size: 24pt;
}
#contact p, #contact a {
	margin: 0 0 5px 0; font-size: 10pt;
}
#contact a svg {
	height: 18px; margin: 0 5px -6px 0;
}

#location {
	height: 180px; margin: 5px 0;
}



}


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

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

@keyframes fade-fall {
	0%{top: -50; opacity: 0;} 20%{top: -75; opacity: 1;} 40%{top: -50; opacity: 1;}
	60%{top: -75; opacity: 1;} 100%{top: 0px; opacity: 1;}
}

@keyframes expand-services {
	0%{transform: scale(1);} 15%{transform: scale(1);} 50%{transform: scale(1.1);}
	65%{transform: scale(1.1);} 100%{transform: scale(1);}
}