/*Computer*/
* {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
}

#content
{
	display: flex;
	flex-direction: column;
}
/*Header & Logo*/
.topheader {
	text-align: center;
	padding: 2vh;
	background-color: white;
}
.topheader h2 {
	padding: 1vh;
}
/*Wrapper List*/
.navbar {
	width: 100%;
	background-color: white;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.dropbutton {
	display: none;
}
.navitem {
	display: block;
	text-decoration: none;
	font-size: 1.5vh;
	color: #282828;
	padding: 2vh 1.5vw;
	text-transform: uppercase;
	text-align: center;
}
.navitem:hover {
	color: rgb(14,94,195);
}
#navimg {
	display: none;
	height: 5vh;
	padding: 0.5vh 1.5vw 0 1.5vw;
}
#navftrial {
	background-color: rgb(14, 95, 194);
	color: white;
}
#navftrial:hover {
	background-color: #006be5;
}
/*Introduction Info*/
.info {
	text-align: center;
	padding: 1vh 2vw 7vh 2vw;
	background-color: #EAEAEA;
}
.info p {
	font-size: 2.25vh;
	padding: 2.5vh 12vw;
	line-height: 2;
}
#abovebutton {
	padding-bottom: 5vh;
}
.button {
	background-color: rgb(14,95,194);
	color: white;
	padding: 2vh;
	text-align: center;
	font-size: 2vh;
	border-radius: 0.5vh;
	border-style: none;
	text-decoration: none;
	margin-top: 2vh;
}
.button:hover {
	background-color: #006be5;
}
.button:active
{
	background-color: #429aff;
	transform: scale(1.1,1.1);
}
/*Slider 1*/
.slider {
	background: white;
	width: 90%;
	margin: auto;
	position: relative;
	height: 85vh;
	display: flex;
	justify-content: center;
	border-top: 0.5vh solid #181818;
	border-bottom: 0.5vh solid #181818;
	background-color: #EAEAEA;
}
.container1, .container2 {
	display: none;
	justify-content: center;
}
.enable {
	background-color: rgb(14, 95, 194);
}
.dot1:hover, .dot2:hover  {
	background-color: #006be5;
}
.fade {
	animation: fadeIn 1.5s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*Section Headings*/
.heading {
	padding: 10vh 0 7.5vh 0;
}
h1 {
	text-align: center;
	font-weight: bold;
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 5.5vh;
	padding: 1vh;
}
.subtxt {
	text-align: center;
	font-size: 2vh;
}
/*Features*/
#features {
	background-color: white;
}
.featurelists {
	padding: 2vh;
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.listbox {
	width: 32vw;
}
.listheading {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.icon {
	height: 13vh;
}
.flist {
	list-style-type: disc;
	padding: 4vh;
	line-height: 1.8;
	font-size: calc(12px + 0.8vh);
}
.flist li {
	color: #56595e;
	margin: 2vh 0;
}
.subflist {
	list-style-type: circle;
	line-height: 1.4;
	margin-left: 2vw;
}
.subflist li {
	color: #56595e;
}
h3 {
	font-size: 2.5vh;
	color: #282828;
	text-align: center;
	padding-top: 2.5vh;
}
/*Tutorial Videos*/
#tvideos {
	padding: 0 4.5vh 4.5vh 4.5vh;
	background-color: #EAEAEA;
	text-align: center;
}
.tvideosbuttons {
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.vidbutton {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 25%;
	text-align: center;
	padding: 0 4vh 8vh 4vh;
}
.vidbuttxt {
	color: #56595e;
	font-size: 1.8vh;
	padding-top: 2vh;
}
.expl {
	display: none;
}
/*Pricing*/
.pricetxt {
	font-size: 2.5vh;
	line-height: 2em;
}
.pricetxt ul {
	margin-left: 7.5vh;
}
/*About*/
#about {
	background-color: #EAEAEA;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 4.5vh 4.5vh 4.5vh;
}
.aboutbody {
	display: flex;
	justify-content: center;
	flex-direction: row;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
.aboutimgs {
	width: 40%;
	display: flex;
	flex-direction: column;
}
.aboutimg {
	width: 85%;
	height: auto;
	object-fit: contain;
	padding-top: 8vh;
}
.abouttxt {
	color: #56595e;
	width: 60%;
	line-height: 1.6;
	font-size: 1.8vh;
}
.abouttxt p {
	margin-top: 2vh;
}
.abouttxt p a {
	color: #56595e;
}
.abouttxt li {
	margin-top: 1vh;
	margin-left: 6vh;
}
.bolded {
	font-weight: bold;
}
/*Contact Us*/
#contact {
}
.contacttot {
	display: flex;
	justify-content: center;
	position: relative;
}
#contact h1 {
	text-align: center;
	text-transform: uppercase;
	font-size: 5.5vh;
	color: white;
	padding: 1vh;
}
.subtxt2 {
	text-align: center;
	font-size: 2vh;
	color: white;
}
.heading2 {
	padding-top: 10vh;
	position: absolute;
}
.contimg {
	filter: brightness(.25);
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.contactbody {
	position: absolute;
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding-top: 32vh;
}
.contactinfo {
	color: white;
	font-size: 2.6vh;
	line-height: 1.6;
	padding: 0 5vw;
	margin-right: auto;
	margin-left: auto;
}
.contactinfo p {
	margin-bottom: 4vh;
}
.contactinfo p a {
	 color: white;
}
.contactinput {
	display: flex;
	flex-direction: column;
	width: 35%;
	padding: 0 5vw;
	margin-right: auto;
	margin-left: auto;
}
.normaltxt {
	width: 100%;
	height: 6vh;
	border-radius: 0.5vh;
	box-sizing: border-box;
	margin-bottom: 2vh;
	padding: 1vh 1vw;
	font-size: 2vh;
	color: #56595e;
	border: 1px solid #999999;
}
.messagetxt {
	width: 100%;
	height: 15vh;
	border-radius: 0.5vh;
	box-sizing: border-box;
	resize: none;
	padding: 1vh 1vw;
	font-size: 2vh;
	color: #56595e;
	border: 1px solid #999999;
}
/*Vertical Phone*/
@media only screen and (max-width: 1000px) {
/*Header & Logo*/
	.topheader {
		padding:  16vw 4vw 4vw 4vw;
		margin-left: auto;
		margin-right: auto;
	}
	.topheader h2 {
		padding: 4vw 2vw 2vw 2vw;
		font-size: 2em;
	}
	.topheader img {
		width: 80vw;
	}
/*Dropdown Menu*/
	.dropbutton {
		display: inherit;
		position: fixed;
		top: 1vw;
		right: 1vw;
		border-radius: 2vw;
		font-size: 2em;
		background-color: rgb(14,95,194);
		color: white;
		border-style: none;
		text-decoration: none;
		padding: 2vw;
		z-index: 2;
	}
	.navbar {
		display: none;
		position: fixed;
		height: 100%;
		right: 0;
		width: 33%;
		border-left: 0.5vw solid rgb(14,95,194);
		background-color: rgba(255, 255, 255, 1);
	}
	.navitem {
		font-size: 1em;
		padding: 8vw 2vw;
	}
	#navimgsupersede {
		display: none;
	}
	.show {
		display: block;
	}
	.hide {
		display: none;
	}
/*Introduction Information*/
	.info {
		padding: 2vw 4vw 12vw 4vw;
	}
	.infobox {
		padding-bottom: 6vw;
	}
	.info p {
		font-size: 1.5em;
		padding: 2vw 10vw;
	}
	#abovebutton {
		padding-bottom: 8vw;
	}
	.heading {
	 padding: 10vw 0;
	}
	h1 {
		font-size: 3em;
		padding: 4vw;
	}
	.subtxt {
		font-size: 5vw;
	}
/*Features*/
	#features {
		background-color: white;
	}
	.featurelists {
		flex-direction: column;
		padding: 8vw;
	}
	.listbox {
		width: 100%;
	}
	.icon {
		height: 30vw;
	}
	.flist {
		padding: 8vw;
	}
	.flist li {
		margin: 4vw 0;
	}
	.subflist {
		margin-left: 8vw;
	}
	h3 {
		font-size: 3em;
		padding-top: 8vw;
	}
/*Tutorial Videos*/
	#tvideos {
		padding: 0 10vw 10vw 10vw;
	}
	.tvideosbuttons {
		flex-direction: column;
	}
	.vidbutton {
		width: 40vw;
		padding: 10vw 0;
		margin-left: auto;
		margin-right: auto;
	}
	.vidbutton a {
		width: 31vw;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.vidbuttxt {
		font-size: 2em
		padding-top: 4vw;
	}
	.expl {
		display: inherit;
		text-align: center;
		font-size: 2em;
		color: #56595e;
		padding-top: 12vw;
	}
/*Pricing*/
	.pictback {
		padding-bottom: 10vw;
	}
	.backimg {
		height: 170vw;
	}
	.pricetxt {
		font-size: 2em;
		line-height: 2.5;
		padding: 4vw 12vw 12vw 12vw;
	}
	.pricetxt ul {
		margin-left: 10vw;
	}
/*About*/
	#about {
		padding: 0 8vw 8vw 8vw;
	}
	.aboutbody {
		flex-direction: column;
		width: 100%;
	}
	.aboutimgs {
		width: 100%;
	}
	.aboutimg {
		width: 80vw;
		padding: 4vw 0;
		margin-left: auto;
		margin-right: auto;
	}
	.abouttxt {
		width: 100%;
	}
	.abouttxt p {
		margin-top: 10vw;
	}
	.abouttxt li {
		margin-top: 4vw;
		margin-left: 6vw;
	}
/*Contact Us*/
	#contact h1 {
		padding: 4vw;
	}
	.subtxt2 {
	}
	.heading2 {
		padding-top: 10vw;
	}
	.contactbody {
		flex-direction: column;
		padding-top: 48vw;
	}
	.contimg {
		height: 240vw;
	}
	.contactinfo {
		padding: 6vw 5vw;
	}
	.contactinfo p {
		margin-bottom: 6vw;
	}
	.contactinput {
		width: 70%;
		padding: 10vw 5vw 0vh;
	}
	.normaltxt {
		height: 4vw;
		border-radius: 2vw;
		margin-bottom: 4vw;
		padding: 5vw;
	}
	.messagetxt {
		height: 25vw;
		border-radius: 2vw;
		padding: 2vw 5vw;
	}
}
/*Phone Horizontal*/
@media only screen and (max-height: 500px) and (orientation: landscape)
{
/*Top Header*/
	.topheader {
		padding: 7vw 2vw 1vw 2vw;
	}
	.topheader h2 {
		padding: 2vw 1vw 1vw 1vw;
		font-size: 3vw;
	}
/*Dropdown Menu*/
	.dropbutton {
		top: 0.5vw;
		right: 0.5vw;
		border-radius: 1vw;
		font-size: 3vw;
		padding: 1vw;
	}
	.navbar {
		width: 20%;
	}
	.navitem {
		font-size: 1.5vw;
		padding: 2vw 1vw;
	}
	#navimgsupersede {
		display: none;
	}
/*Buttons*/
	.button {
		padding: 1vw;
		font-size: 2.5vw;
		border-radius: 1vw;
		margin: 1.5vw 0 0 0;
	}
/*Introdution Information*/
	.info {
		padding: 2vw 4vw 4vw 4vw
	}
	.infobox {
		padding: 0 0 1vw 0;
	}
	.info p {
		font-size: 2vw;
		padding: 2vw 10vw;
	}
	#abovebutton {
		padding-bottom: 2.5vw;
	}
/*Section Headings*/
	.heading {
		padding: 2.5vw 0;
	}
	h1 {
		font-size: 6vw;
		color: #282828;
		padding: 1vw;
	}
	.subtxt {
		font-size: 2vw;
	}
/*Features*/
	.icon {
		height: 16vw;
	}
	h3 {
		font-size: 3vw;
	}
	.flist {
		padding: 7vw;
		font-size: 2.5vw;
		font-size: 2vw;
	}
/*Tutorial Videos*/
	#tvideos {
		padding: 0 2.5vw 2.5vw 2.5vw;
	}
	.expl {
		font-size: 2.5vw;
	}
	.tvideosbuttons {
		flex-direction: row;
	}
	.vidbutton {
		padding: 2.5vw 0;
	}
	.vidbuttxt {
		font-size: 2vw;
		padding: 1.5vw 0;
	}
/*Pricing*/
	#pricing {
		height: 75vw;
	}
	.pictback {
		padding-bottom: 10vw;
	}
	.backimg {
		width: 90vw;
		height: 50vw;
	}
	.pricetxt {
		font-size: 2.4vw;
		line-height: 2.5;
		padding: 1vw 12vw 0 12vw;
	}
	.pricetxt ul {
		margin-left: 6vw;
	}
/*About*/
	#about {
		padding: 0 2vw 2vw 2vw 2vw;
	}
	.aboutimg {
		width: 70%;
		padding: 2vw 0;
	}
	.abouttxt {
		padding-bottom: 2.5vw;
		font-size: 2vw;
		width: 100%;
	}
	.abouttxt p {
		padding: 0 5vw;
	}
	.abouttxt li {
		margin-top: 2vw;
		margin-left: 8vw;
	}
/*Contact Us*/
	#contact h1 {
		font-size: 6vw;
		padding: 1vw;
	}
	.contimg {
		height: 60vw;
	}
	.subtxt2 {
		font-size: 2vw;
	}
	.heading2 {
		padding: 2.5vw;
		}
	.contactbody {
		flex-direction: row;
		padding-top: 15vw;
	}
	.contactinfo {
		font-size: 2vw;
		padding: 1.5vw 5vw;
	}
	.normaltxt {
		height: 1vw;
		border-radius: 1vw;
		margin-bottom: 1.5vw;
		padding: 1.5vw 2vw;
		font-size: 1.5vw;
	}
	.messagetxt {
		height: 10vw;
		border-radius: 1vh;
		padding: 1vw 2vw;
		font-size: 1.5vw;
	}
/*Sliders*/
	.slidecaption {
		font-size: 2vw;
		left: 50%;
		width: 30vw;
	}
}

.bubble
{
	aspect-ratio : 1 / 1;
	border-radius: 20px;
	box-shadow: 5px 5px 20px #CCC;
	padding: 1em;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
	display: flex;
	text-align: left;
	justify-content: start;
	flex-direction: column;
	background-color: white;
	width: 200px;
	margin: 1em;
	font-weight: lighter;
}

.bubbleTitle
{
	font-weight: bold;
	margin-bottom: 1em;
	margin-top: 1em;
}

.bubbleContainer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	/*max-width: 1200px;*/
	margin: 1em;
} 

#infotext1
{
	background: url("images/chassis.jpg") no-repeat fixed center;
	background-position: top;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7);
	color: white;
}

#pricing
{
	background: url("images/bucketBox.jpg") no-repeat fixed center;
	background-position: top;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,0.7);
	color: white;
}

section
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sectionInside
{
	max-width: 1200px;
	padding-top: 3em;
	padding-bottom: 3em;
}

.flexRow
{
	display: flex;
	flex-direction: row;
}