@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* { padding: 0 0; marign: 0 0; box-sizing: border-box; }
body { background: #F2FAFF; color: #394955; font-size: 1rem; font-weight: 400; line-height: 1.55; font-family: 'Poppins', sans-serif; margin: 0 0; margin-top: 6.5rem; }
.dark-theme { background: #394955; color: #F2FAFF; }

a { color: #50AAE2; font-size: 1.125rem; transition: .3s ease; }
a.callto { display: inline-block; padding: 15px 25px; border-radius: 15%; background: #50AAE2; color: #F2FAFF; text-decoration: none; transition: .3s ease; }
a.callto:hover { transform: scale(1.04); background: #394955; }
.dark-theme a.callto:hover { background: #F2FAFF; color: #50AAE2; }
a.secondarycallto { display: inline-block; padding: 15px 25px; border-radius: 15%; background: #394955; color: #F2FAFF; text-decoration: none; transition: .3s ease; }
.dark-theme a.secondarycallto { background: #F2FAFF; color: #394955; }
a.secondarycallto:hover { transform: scale(1.04); background: #50AAE2; color: #F2FAFF; }
a.tertiarycallto { display: inline-block; padding: 15px 25px; border-radius: 15%; background: #F2FAFF; border: 1px solid #9DADBC; color: #394955; text-decoration: none; transition: .3s ease; }
a.tertiarycallto:hover { transform: scale(1.04); background: #394955; border: 1px solid #394955; color: #F2FAFF; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.3; }
p { font-size: 1.125rem; }

.wrapper { max-width: 1312px; margin: 0 auto; text-align: center; }
.wide { max-width: 1512px; }
.narrow { max-width: 1112px; }
.hold { width: 100%; float: left; text-align: left; }
.section { width: 100%; float: left; margin-top: 7.8125rem; }
.section h2 { font-size: 3.4375rem; margin-bottom: 2.5rem; text-align: center; }
.mainline { width: 50%; margin: 0 25%; background: #9DADBC; height: 1px; float: left; margin-bottom: 7.8125rem; }

.btn-toggle { cursor: pointer; padding: 29px 29px; background: url(/images/dark-mode.svg) center no-repeat, #F2FAFF; background-size: 1.25rem 1.25rem, auto; border-radius: 15%; border: 0px solid transparent; float: left; margin-right: 1rem; transition:.3s ease; }
.btn-toggle:hover { background: url(/images/dark-mode.svg) center no-repeat, #DDE7EE; background-size: 1.25rem 1.25rem, auto; }
.dark-theme .btn-toggle { background: url(/images/light-mode.svg) center no-repeat, #394955; background-size: 1.25rem 1.25rem, auto; }
.dark-theme .btn-toggle:hover { background: url(/images/light-mode.svg) center no-repeat, #677580; background-size: 1.25rem 1.25rem, auto; }

/* top bar and navigation */
#topbar { transition: .3s ease; position: fixed; top: 0; }
.top { background: #F2FAFF; width: 100%; float: left; position: fixed; top: 0; left: 0; padding: 1.5625rem 0; z-index: 999 !important; }
.dark-theme .top { background: #394955; }
.top .mobile { display: none; width: 32%; float: left; margin-right: 2%; animation: top 2s ease forwards; position: relative; top: 0; }
.top .mobile .the-menu { display: inline-block; cursor: pointer; position: relative; top: 1rem; }
.line1, .line2, .line3 { width: 35px; height: 3px; background: #394955; margin-bottom: 8px; transition: 0.3s; transition-delay: 0s; }
.line3 { margin-bottom: 0; }
.dark-theme .line1, .dark-theme .line2, .dark-theme .line3 { background: #F2FAFF; }
.top .mobile .change .line1 { -webkit-transform: rotate(-45deg) translate(-25%, 6px) ; transform: rotate(-45deg) translate(-25%, 6px) ; transition: 0.3s; }
.top .mobile .change .line2 { opacity: 0; transition: 0.3s; }
.top .mobile .change .line3 { -webkit-transform: rotate(45deg) translate(-25%, -6px) ; transform: rotate(45deg) translate(-25%, -6px) ; transition: 0.3s; }
.top .logo { width: 104px; float: left; margin-right: 4.6875rem; margin-top: 10px; animation: top 2s ease forwards; position: relative; top: 0; }
.top .logo svg { width: 100%; float: left; }
.dark-theme .top .logo svg .cls-1 { fill: #F2FAFF !important; }
.top .nav { width: auto; float: left; position: relative; top: 0; }
.top .nav ul { list-style: none; padding: 0 0; margin: 0 0; }
.top .nav li { display: inline-block; float: left; margin-right: 1.5625rem; color: #394955; transition: .3s ease; position: relative; top: 0; }
.top .nav li:first-child { animation: top 2.1s ease forwards; }
.top .nav li:nth-of-type(2n) { animation: top 2.2s ease forwards; }
.top .nav li:nth-of-type(3n) { animation: top 2.3s ease forwards; }
.top .nav li:last-child { animation: top 2.4s ease forwards; }
.top .nav li a:hover { background: #DDE7EE; }
.dark-theme .top .nav li a:hover { background: rgba(221,231,238,.25); }
.top .nav a { padding: 15px 25px; float: left; color: #394955; text-decoration: none; border-radius: 15%; }
.dark-theme .top .nav a { color: #F2FAFF; }
.top .start { float: right; animation: top 2.5s ease forwards; position: relative; top: 0; }
.top .start .material-symbols-outlined { display: none; }
@keyframes top {
	0% { top: -6.25rem; }
	66% { top: -6.25rem; }
	100% { top: 0; }
}

/* dropdown hovers */
.top .nav ul ul { display: none; }
.top .nav ul li.aboutnav ul.aboutshow { width: 100vw; padding: 0 0 3.125rem; background: #F2FAFF; position: fixed; top: 5.2rem; left: 0; z-index: 998 !important; animation: menus .3s ease forwards; box-shadow: 0 15px 15px rgba(57,73,85,.2); }
.dark-theme .top .nav ul li.aboutnav ul.aboutshow { background: #394955; box-shadow: 0 15px 15px rgba(221,231,238,.1); }
.top .nav ul li.servicenav ul.serviceshow { width: 100vw; padding: 0 0 3.125rem; background: #F2FAFF; position: fixed; top: 5.2rem; left: 0; z-index: 998 !important; animation: menus .3s ease forwards; box-shadow: 0 15px 15px rgba(57,73,85,.2); }
.dark-theme .top .nav ul li.servicenav ul.serviceshow { background: #394955; box-shadow: 0 15px 15px rgba(221,231,238,.1); }
@keyframes menus {
	0% { opacity: 0; top: 7.8rem; }
	100% { opacity: ; top: ; }
}
.top .nav ul li.aboutnav:hover ul.aboutshow, .top .nav ul li.servicenav:hover ul.serviceshow { display: block; }
.top .nav .aboutshow .linelength, .top .nav .serviceshow .linelength { width: 100%; height: 1px; background: #9DADBC; margin-top: 1.6rem; margin-bottom: 3.125rem; }
.dark-theme .top .nav .aboutshow .linelength, .dark-theme .top .nav .serviceshow .linelength { background: rgba(221,231,238,.5); }
.top .nav .aboutshow .links { width: 45%; float: left; margin-right: 10%; }
.top .nav .aboutshow .links li { display: block; width: 100%; float: left; margin-bottom: 1.25rem; font-weight: 500; animation: drop .3s ease forwards; }
.top .nav .aboutshow .links li a { padding: 0 0; font-size: 4.5rem; transition: .3s ease; }
.top .nav .aboutshow .links li a:hover { background: #F2FAFF; padding-left: .5rem; transform: skewX(-5deg); }
.dark-theme .top .nav .aboutshow .links li a:hover { background: none; }
.top .nav .aboutshow .img { width: 45%; float: left; }
.top .nav .aboutshow .img img { width: 100%; float: left; border-radius: 1rem; }
.top .nav .serviceshow li { width: 30%; float: left; margin-right: 5%; margin-bottom: 1.5625rem; animation: drop .3s ease forwards; }
.top .nav .serviceshow li:nth-of-type(3n) { margin-right: 0; }
.top .nav .serviceshow li a { padding: 0 0; }
.top .nav .serviceshow li img { width: 70px; height: 70px; float: left; margin-right: 1rem; background: rgba(57,73,85,.05); border-radius: .5rem; padding: 10px; transition: .3s ease; }
.top .nav .serviceshow li a:hover img { background: rgba(57,73,85,.075); transform: scale(1.05); }
.dark-theme .top .nav .serviceshow li img { background: rgba(221,231,238,.25); }
.dark-theme .top .nav .serviceshow li a:hover img { background: rgba(221,231,238,.5); }
.top .nav .serviceshow li .txt { width: calc(100% - 86px); float: left; }
.top .nav .serviceshow li .txt .menuhead { width: 100%; float: left; font-size: 1.125rem; font-weight: 500; margin-top: .7rem; transition: .3s ease; position: relative; left: 0; }
.top .nav .serviceshow li a:hover .txt .menuhead { transform: skewX(-7deg); left: .25rem; }
.top .nav .serviceshow li .txt .menusub { width: 100%; float: left; font-size: .7rem; position: relative; left: 0; transition: .3s ease; }
.top .nav .serviceshow li a:hover .txt .menusub { left: .25rem; }
.top .nav .serviceshow li a:hover { background: none; }
.top .nav .serviceshow .fulllink { width: 100%; float: left; margin-top: 1.5625rem; text-align: center; }
.top .nav .serviceshow .fulllink a.tertiarycallto { display: inline-block; padding: 15px 25px; border-radius: 15%; background: #F2FAFF; border: 1px solid #9DADBC; color: #394955; text-decoration: none; transition: .3s ease; float: none; }
.top .nav .serviceshow .fulllink a.tertiarycallto:hover { transform: scale(1.04); background: #394955; border: 1px solid #394955; color: #F2FAFF; }
.dark-theme .top .nav .serviceshow .fulllink a.tertiarycallto:hover { background: #50AAE2; }
@keyframes drop {
	0% { opacity: 0; top: 0; }
	100% { opacity: 1; top: 0; }
}

#themenu { display: none; width: 100vw; height: 100vh; overflow-y: scroll; position: fixed; top: 0; left: 0; z-index: 998 !important; padding-top: 7rem; background: #F2FAFF; }
.dark-theme #themenu { background: #394955; }
#themenu .mobilemenu { width: 100%; float: left; margin-bottom: 3.125rem; }
#themenu ul { list-style: none; }
#themenu li, #themenu a { width: 100%; float: left; cursor: pointer; }
#themenu a { padding: 1.125rem; border-bottom: 1px solid #9DADBC; text-decoration: none; font-weight: 500; font-size: 1.25rem; color: #394955; }
.dark-theme #themenu a { border-bottom: 1px solid #9DADBC; color: #F2FAFF; }
#themenu li:last-child a, #themenu li.last a { border-bottom: 1px solid transparent; }
#themenu a .material-symbols-outlined { float: right; position: relative; top: 3px; }
#themenu a.callto { color: #F2FAFF; margin-top: 1.5625rem; }
.dark-theme #themenu a.callto:hover { background: #F2FAFF; color: #50AAE2; }
#aboutmenu, #servicemenu { display: none; }
#aboutmenu li, #servicemenu li { animation: mobilemenushow .5s ease forwards; margin-top: 0; }
@keyframes mobilemenushow {
	0% { margin-top: -68px; }
	100% { margin-top: 0; }
}
#themenu .notflipped { transition: .3s ease; }
#themenu .flip .notflipped { transform: rotate(180deg); }
#themenu .flip a { background: #DDE7EE; }
.dark-theme #themenu .flip a { background: #677580; }
#themenu .flip li.last-sub a { border-bottom-right-radius: 15%; border-bottom-left-radius: 15%; }

/* end of top bar and navigation */

/* page content */

.header { width: 100%; float: left; margin-top: 6.25rem; }
.header h1 { font-size: 3.4375rem; margin-bottom: 2.5rem; }
.header h1 .wone { animation: heading .3s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wtwo { animation: heading .45s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wthree { animation: heading .6s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wfour { animation: heading .75s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wfive { animation: heading .9s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wsix { animation: heading 1.05s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wseven { animation: heading 1.2s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .weight { animation: heading 1.35s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wnine { animation: heading 1.5s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .wten { animation: heading 1.65s ease forwards; position: relative; top: 0; display: inline-block; }
.header h1 .weleven { animation: heading 1.8s ease forwards; position: relative; top: 0; display: inline-block; }
@keyframes heading {
	0% { opacity: 0; top: 1.5rem; transform: skewY(2deg) rotate(2deg); }
	33% { opacity: 0; top: 1.5rem; transform: skewY(2deg) rotate(2deg); }
	100% { opacity: ; top: 0; transform: skewY(0) rotate(0); }
}
.header a { animation: headinglink 1.95s ease forwards; position: relative; top: 0; }
@keyframes headinglink {
	0% { top: 2rem; opacity: 0; }
	50% { top: 2rem; opacity: 0; }
	100% { top: 0; opacity: ; }
}

.video { width: 100%; float: left; margin-top: 7.8125rem; animation: videoframe 1.95s ease forwards; position: relative; top: 0; overflow: hidden; border-radius: 1rem; }
@keyframes videoframe { 
	0% { opacity: 0; transform: scale(.75); top: 4.4375rem; }
	50% { opacity: 0; transform: scale(.75); top: 4.4375rem; }
	100% { opacity: ; transform: scale(1); } 
}
.video video { width: 100%; float: left; animation: video 2.25s ease forwards; position: relative; top: 0; border-radius: 1rem; }
@keyframes video { 
	0% { opacity: 0; transform: scale(1.25); top: 4.4375rem; }
	33% { opacity: 0; transform: scale(1.25); top: 4.4375rem; }
	100% { opacity: ; transform: scale(1); } 
}
.play { background-image:url(/images/play.svg); background-repeat:no-repeat; width: 16%; height:25%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center; transition: .3s ease; }
.play:hover { opacity: .85; transform: scale(1.25); }
#videoopen { display:none; position:fixed; top:0; left:0; padding: 0 15%; background:rgba(57,73,85,.8); z-index: 9999 !important; width:100vw; height:100vh; }
#videoopen .video-container { margin-top: 50vh; transform: translateY(-50%); position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
#videoopen .video-container iframe, #videoopen .video-container object, #videoopen .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.services { width: 100%; float: left; margin-top: 7.8125rem; }
.services .img { width: 50%; height: 80vh; position: sticky; top: 15vh; float: left; margin-right: 7.5%; }
.services .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 1rem; }
.services .txt { width: 42.5%; float: left; }
.services .txt ul { list-style: none; }
.services .txt ul li { margin-bottom: 3.125rem; width: 100%; float: left; }
.services .txt ul li:last-child { margin-bottom: 0; }
.services .txt ul li a { color: #394955; font-size: 1.75rem; font-weight: 500; width: 100%; float: left; cursor: pointer; }
.dark-theme .services .txt ul li a { color: #F2FAFF; }
.services .txt ul li .fit { width: 100%; float: left; }
.services .txt ul li .material-symbols-outlined { position: relative; top: 6px; font-size: 1.75rem; float: right; transition: .3s ease; }
.services .txt ul li .fit:hover .material-symbols-outlined { color: #50AAE2; }
.services .txt ul li .skew { display: inline-block; position: relative; left: 0; transition: .3s ease; }
.services .txt ul li .fit:hover .skew { transform: skewX(-5deg); left: .33rem; }
.services .txt p { margin-top: 1.5625rem; margin-bottom: 0; width: 100%; float: left; animation: servicepara .3s ease forwards; }
#ur, #ux, #wd, #br, #gd, #dv { display: none; }
.services .notflipped { transition: .5s ease; }
.services .flip .notflipped { transform: rotate(180deg); }
@keyframes servicepara {
	0% { opacity: 0; line-height: 0.1; margin-top: 0; }
	100% { opacity: ; line-height: ; margin-top: ; }
}

/* four zero four 404 page */
.fourzerofour { width: 100%; float: left; margin-top: 6.25rem; }
.fourzerofour .img { width: 100%; float: left; margin-bottom: 2.25rem; }
.fourzerofour .img img { width: 6.5rem; height: 6.5rem; float: left; position: relative; left: 0; animation: tumbleweed 2.5s ease forwards infinite; animation-delay: 1s; opacity: 0; }
@keyframes tumbleweed {
	0% { opacity: 0; left: -6.5rem; transform: rotate(0deg); }
	20% { opacity: 1; }
	70% { opacity: 1; }
	90% { opacity: 0; left: 30vw; transform: rotate(540deg); }
	100% { opacity: 0; left: 30vw; transform: rotate(540deg); }
}
.fourzerofour h1 { font-size: 3.4375rem; margin-bottom: 2.5rem; }
.fourzerofour p { margin-bottom: 2.5rem; float: left; width: 61%; margin-right: 39%; }
.fourzerofour .wone { animation: heading .3s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wtwo { animation: heading .45s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wthree { animation: heading .6s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wfour { animation: heading .75s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wfive { animation: heading .9s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wsix { animation: heading 1.05s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wseven { animation: heading 1.2s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .weight { animation: heading 1.35s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wnine { animation: heading 1.5s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .wten { animation: heading 1.65s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour .weleven { animation: heading 1.8s ease forwards; position: relative; top: 0; display: inline; }
.fourzerofour a { animation: headinglink 1.95s ease forwards; position: relative; top: 0; }

/* end of page content */



/* footer call to action */

.footercall { width: 100%; float: left; text-align: center; }

/* end of footer call to action */



/* footer */

.footer { width: 100%; float: left; background: #DDE7EE; padding: 4.6875rem 0; margin: 0 0; font-size: 1.125rem; margin-top: 7.8125rem; }
.dark-theme .footer { background: #677580; }
.footer a { color: #394955; text-decoration: none; }
.dark-theme .footer a { color: #F2FAFF; }
.footer ul { list-style: none; }
.footer .itm { width: 30%; float: left; margin-right: 5%; }
.footer .itm:nth-of-type(3n) { margin-right: 0; }
.footer .itm li { margin-bottom: 1.25rem; width: 100%; float: left; }
.footer .itm a { font-weight: 500; }
.footer .itm a .material-symbols-outlined, .footer .itm a svg { position: relative; top: 1px; left: -0.25rem; transition: .3s ease; opacity: 0; }
.footer .itm a:hover .material-symbols-outlined, .footer .itm a:hover svg { left: .75rem; opacity: 1; }
.footer .itm a svg { width: 1.125rem; height: 1.125rem; }
.dark-theme .footer .itm a svg .facebook-1, .dark-theme .footer .itm a svg .twitter-1, .dark-theme .footer .itm a svg .instagram-1, .dark-theme .footer .itm a svg .linkedin-1 { fill: #F2FAFF; }
.footer .itm a .italic { float: left; transition: .3s ease; position: relative; left: 0; }
.footer .itm a:hover .italic { transform: skewX(-7deg); left: .25rem; }
.footer .copy { width: 100%; float: left; margin-top: 4.6875rem; }
.footer .copy li { display: inline-block; }
.footer .copy .links { float: right; text-align: right; }
.footer .copy .links ul { padding: 0 0; margin: 0 0; }
.footer .copy .links li { margin-left: 2.25rem; }
.footer .copy .links li a { border-bottom: 1px solid #DDE7EE; }
.dark-theme .footer .copy .links li a { border-bottom: 1px solid #677580; }
.footer .copy .links li a:hover { border-bottom: 1px solid #9DADBC; }
.footer .copy .txt { float: left; }

/* end of footer */



/* changes in styles for different screen sizes */

@media only screen and (max-width: 1562px) {
	.wide { max-width: 95%; }
}

@media only screen and (max-width: 1362px) {
	.wrapper { max-width: 90%; }
}

@media only screen and (max-width: 1150px) {
	.mainline { width: 60%; margin: 0 20%; margin-bottom: 7.8125rem; }
	.top .nav .aboutshow .links li { margin-bottom: 1rem; }
	.top .nav .aboutshow .links li a { padding: 0 0; font-size: 3.125rem; transition: .3s ease; }
	#videoopen { padding: 0 10%; }
}

@media only screen and (max-width: 1090px) {
	.top .start .material-symbols-outlined { display: inline-block; float: left; margin-top: -3px; }
	.top .start .txt { display: none; }
	a.headercall { padding: 18px 17px; }
	.top { padding: 1.25rem 0 1rem; }
}

@media only screen and (max-width: 1075px) {
	.top .nav .serviceshow li .txt .menuhead { margin-top: 1.35rem; }
	.top .nav .serviceshow li .txt .menusub { display: none; }
}

@media only screen and (max-width: 1010px) {
	.top .mobile { display: block; }
	.top .logo { width: 32%; text-align: center; margin-right: 2%; animation: top 2.1s ease forwards; }
	.top .logo svg { max-height: 40px; display: inline-block; float: left; }
	.top .nav { display: none; }
	.top .start { animation: top 2.2s ease forwards; }
	.section h2 br { display: none; }
	.header h1 br { display: none; }
	.services .img { width: 100%; height: 200px; position: relative; top: 0; margin-right: 0; margin-bottom: 3.125rem; }
	.services .txt { width: 100%; float: left; }
	.services .txt ul li .fit:hover .material-symbols-outlined { color: #394955; }
	.dark-theme .services .txt ul li .fit:hover .material-symbols-outlined { color: #F2FAFF; }
	.services .txt ul li .fit:hover .skew { transform: skewX(0); left: 0; }

	@keyframes tumbleweed {
		0% { opacity: 0; left: -6.5rem; transform: rotate(0deg); }
		20% { opacity: 1; }
		70% { opacity: 1; }
		90% { opacity: 0; left: 30vw; transform: rotate(450deg); }
		100% { opacity: 0; left: 30vw; transform: rotate(450deg); }
	}
	.fourzerofour p { width: 100%; margin-right: 0; }
}

@media only screen and (max-width: 800px) {
	.footer, .section, .video, .services { margin-top: 4.6875rem; }
	.header, .fourzerofour { margin-top: 3.125rem; }
	.mainline { width: 70%; margin: 0 15%; margin-bottom: 4.6875rem; }
	.footer .itm { width: 47.5%; margin-right: 5%; margin-bottom: 3.125rem; }
	.footer .itm:nth-of-type(2n) { margin-right: 0; }
	.footer .itm:nth-of-type(3n) { margin-bottom: 0; margin-right: 5%; }
	.footer .itm a .material-symbols-outlined, .footer .itm a svg { left: .75rem; opacity: 1; }
	.footer .copy { width: 47.5%; margin-top: 0; }
	.footer .copy li { display: block; width: 100%; float: left; margin-bottom: 1.125rem; margin-top: .7rem; }
	.footer .copy .links { float: left; text-align: left; }
	.footer .copy .links li { margin-left: 0; }
	.header h1, .section h2, .fourzerofour h1 { font-size: 2.75rem; }
	.fourzerofour .img { margin-bottom: 1.75rem; }
	.fourzerofour .img img { width: 3.125rem; height: 3.125rem; }
	@keyframes tumbleweed {
		0% { opacity: 0; left: -3.125rem; transform: rotate(0deg); }
		20% { opacity: 1; }
		70% { opacity: 1; }
		90% { opacity: 0; left: 30vw; transform: rotate(360deg); }
		100% { opacity: 0; left: 30vw; transform: rotate(360deg); }
	}
	.fourzerofour h1 { margin-bottom: 1.5rem; }
	.fourzerofour p { margin-bottom: 2rem; }
}

@media only screen and (max-width: 700px) {
	body { margin-top: 4rem; }
	.wrapper { max-width: 85%; }
	#themenu { padding-top: 5rem; }
	a.headercall { padding: 12px; }
	.btn-toggle { padding: 22px 24px 23px; }
	.wide { max-width: 100%; }
	.top { padding: .75rem 0 .5rem; }
	.top .mobile .the-menu { top: .7rem; }
	.top .start .material-symbols-outlined { display: inline-block; float: left; margin-top: -3px; }
	.top .start .txt { display: none; }
	.top .logo { margin-top: 7px; }
	.top .logo svg { max-height: 35px; position: relative; }
	.video, .video video { border-radius: 0; }
	.play { background-repeat:no-repeat; width: 21%; height:30%; }
	#videoopen { padding: 0 5%; }
}

@media only screen and (max-width: 600px) {
	.services { margin-top: 2rem; }
	.video { margin-bottom: -2rem; }
	.header, .fourzerofour { margin-top: 3.125rem; }
	.mainline { margin-bottom: 3.125rem; }
	.footer .itm { width: 100%; margin-right: 0; margin-bottom: 3.125rem; }
	.footer .itm:nth-of-type(3n) { margin-bottom: 0; margin-right: 0; }
	.footer .itm li, .footer .copy li { text-align: center; }
	.footer .itm a, .footer .copy a { display: inline; }
	.footer .itm a .italic { float: none; }
	.footer .itm a .material-symbols-outlined { top: 5px; }
	.footer .copy { width: 100%; margin-top: 3.125rem; }
	.footer .copy li { margin-top: 0; }
	.footer .copy .links { margin-bottom: 3.125rem; }
	.footer .copy .links, .footer .copy .txt { width: 100%; }
	.footer .copy .txt { text-align: center; }
	.header h1, .section h2, .fourzerofour h1 { font-size: 1.75rem; }
	.services .txt ul li { margin-bottom: 2.575rem; }
	.services .txt ul li a { font-size: 1.125rem; }
	.services .txt ul li .material-symbols-outlined { font-size: 1.3125rem; }
	#themenu .mobilemenu { width: 100%; float: left; margin-bottom: 12.5rem; }
	.top .btn-toggle { display: none; visibility: hidden; }
	.btn-toggle { padding: 25px; border: 1px solid #394955; box-shadow: 0px 0px 12px rgba(57,73,85,.25); }
	.dark-theme .btn-toggle { border: 1px solid #F2FAFF; box-shadow: 0px 0px 12px rgba(242,250,255,.25); }
	#new-btn { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); }
	#new-btn .btn-toggle { margin-right: 0; }
}