html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	color: #000;
	/* font-family: 'Oswald', sans-serif; */
	font-family: 'Lato', sans-serif;
	font-size:13px;

	overflow: hidden;
	position:fixed;

	background-color: #ccc; /* fall back for ie11 */
	background: var(--navBackground);
	
	/* overscroll-behavior-y: contain; /* Disables pull-to-refresh but allows overscroll glow effects. */
	overscroll-behavior-y: none; /* Disables pull-to-refresh and overscroll glow effect. Still keeps swipe navigations. */
	overscroll-behavior-x: none; /* Disables swipe navigations. */
}

.progress-striped .bar { /* loading bar color*/
	background-color: var(--buttonColor);
}

#info { /* Info bar across the top of the page */
	position: absolute;
	top: 0px;
	left: 0px;
	width: calc(100% - 300px);
	padding: 4px;
	padding-top: 2px;
	text-align:center;
	font-size: 15px;
	color: var(--bannerTextColor);
	box-sizing: border-box;
	height: 48px;
	background: top left/auto 100%;
	background: var(--bannerBackground);
}
#info #logo { vertical-align: top; position: relative; height: 90%; width: auto; padding-top: 2px; }
#info .tool-name { 
	position: relative;
	top: 9px;
	margin-left: 3px;
	font-size: 17px;
	font-weight: bold;
}

#helpButton {
	color: #666;
	color: var(--buttonColor);
	position: absolute; top: 10px; left: 8px; font-size: 1.75em;
	z-index: 1004;
	cursor: pointer;
	mix-blend-mode: difference;
	opacity: 50%;
}
#helpButton:hover { color:#444; color: var(--buttonHoverColor); }
#helpOverlay {
	opacity: 0;
	display: none;
	transition: visibility 0s 0.2s, opacity 0.5s linear;
	
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:#333;
	z-index:1003;
}
#help {
	opacity: 0;
	display: none;
	transition: visibility 0s 0.2s, opacity 0.2s ease;
	font-size:1.5em;
	
	box-sizing: border-box;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	min-width:250px;
	max-width:400px;
	padding: 1em 2em;
	background-color:#ddd;
	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	border-radius: 4px;
	z-index:1005;
	box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 1.2em;
	border: 3px solid #999;
}
#help #closeHelpButton {
	color: #999;
	font-size: 1.5em;
	position: absolute;
	top: 4px;
	right: 5px;
	cursor: pointer;
}
#help h1 {
	font-size: 1.25em;
	font-weight: bold;
	color: #666;
	position: relative;
	margin-bottom: 0;
	line-height: 1.2em;
}
#help h2 {
	font-size: 1.1em;
	color: #666;
	margin-top: 0;
	line-height: 1.2em;
}
#help p, #help ol, #help ul {
	text-align: left;
	font-size: 0.75em;
	line-height: 1.2em;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: Verdana, Arial, sans-serif;
}
#help a {
	color: #666; font-size: 0.55em; text-decoration: none;
	font-family: Verdana, Arial, sans-serif;
	/* position: absolute; box-sizing: border-box; display: block; width: auto; bottom: 25px; */
}

#help a { display: block; }
#help .fa-cubes { text-decoration: none!important; font-size: 275%; line-height: 25px; color: #999; display: block; margin-top: 10px; margin-left: auto; margin-right: auto; }
#help a:hover { color: #333; }
#help a:hover .fa-cubes { color: #666; }
#help a:hover span { text-decoration: underline; }


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw!important;
	height: 100vh!important;
	pointer-events: none;
	opacity: 0.7;
	z-index: 1000;
	box-sizing: border-box;
}

#viewport3D {
	z-index: 0;
	width: calc(100% - 300px);
	height: calc(100vh - 48px);
	top: 48px;
	position: absolute;
}

#popupContainer {
	z-index: 1001;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
#popup {
	display: none;
	position: absolute;
	top: 100px;
	left: 100px;
	width: calc(300px - 10px - 4px);

	background-color: rgba(55,55,55,0.75);
	border-radius: 5px;
	color: white;
	/*box-sizing: border-box;*/
	margin: 15px;
	border: 2px solid #ccc;
	/*padding: 15px;*/
	padding: 5px;
	font-size: 1.25em;
	text-align: center;
	z-index: 1002;
	
	max-height: calc(85% - 40px);
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#popup .scrollContainer {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}
#popup .scrollContainer::-webkit-scrollbar { width: 8px; margin-left:50px; } /* width */
#popup .scrollContainer::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
#popup .scrollContainer::-webkit-scrollbar-thumb { background: #888; } /* Handle */
#popup .scrollContainer::-webkit-scrollbar-thumb:hover { background: #aaa; } /* Handle on hover */

#popup:hover { background-color: rgba(50,50,50,0.8); border: 2px solid #ddd; cursor: move; }
#popup input { font-size: 1.2em; line-height: 1.5em; width: 25%; margin: 5px; position: relative; top: -2px; font-size: 1.1em; line-height: auto; padding-left: 2px; padding-right: 2px; text-align: center; }
#popup input.inches { width: 30%; }
#popup .btn {padding-top: 0.2em; font-size: 0.85em; margin-top: 10px; }
#popup .btn i { font-size: 1.2em; position: relative; top: 1px;}
#popup #rotateLeftButton.btn, #popup #rotateRightButton.btn { margin-bottom: 10px; }
#popup .row { border-bottom: 1px solid #888; margin-left: auto; display: block; }
#popup .row select { width: auto; margin-top: 5px; margin-bottom: 5px; }
#popup .checkbox { padding-top: 5px; }
#popup .checkbox label { display: inline; font-size: 0.7em; position: relative; top: -3px; }
#popup .checkbox input { float: none; top: -1; width: 40px; text-align: center; margin-left: 15px; }
#popup .checkbox label, #popup .checkbox input { transform: scale(1.5); display: inline-block; padding-left: 10px; padding-right: 10px; }
#closePopupWindowButton {
	position: absolute;
	top: -4px;
	right: -6px;
	color: #dedede;
	border-radius: 10%;
	background-color: #333;
	cursor: pointer;
}
#closePopupWindowButton:hover {
	color: white;
}

#oldie { /* Container for WebGL unsupported message */
	font-size: 30px!important;
	padding: 50px 0 0 0!important;
	width: auto!important;
	font-family: 'Oswald', sans-serif!important;
}

a {
	color: #0af;
}

#print { width: 100%; padding: 10px 5% 10px 5%; display: none; position: absolute; top: 0; }
#print h1 { text-align: center; font-size: 26px; display: block; margin-top: 35px; margin-bottom: 35px; }
#print img#printLogo { width: 250px; height: auto; margin-left: auto; margin-right: auto;  display: block; }
#print #printImage img { width: auto; height: auto; max-width: 100%; max-height: 400px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 10px; display: block; }
#print #specs { font-size: 12px; font-weight: normal; line-height: 16px; }
#print #specs h2 { font-size: 18px!important; line-height: 18px!important; }
#print #specs .column { width: 24%; margin-right: 1%; background-color: #eee; float: left; padding: 0 1% 1% 1%; min-height: 250px; box-sizing: border-box; }
#print #specs .column:first-child { margin-left: 0.5%; }
#print #specs .column:last-child { margin-right: 0; }
#print #printFooter { position: absolute; top: 100%; width: 90%; }
#print #printLink { position: absolute; left: 0; top: -0px; font-color: #333; font-size: 0.7em; width: 100%; }
#print ul { margin: 0; padding: 0; display: block; width: 100%; font-size: 20px; margin-top: 30px; padding-top: 10px; padding-bottom: 10px; list-style: disc; border-top: 1px solid #666; border-bottom: 1px solid #666; text-align: center; }
#print ul li { display: inline; padding-right: 26px; list-style: disc; position: relative; }
#print ul li::before { content: "\2022"; font-size: 24px; position: absolute; left: -20px; top: -4px; }
#print ul li:first-child::before { content: ""; }
#print ul li:first-child { list-style-type: none; }
#print ul li:last-child { padding-right: 0; }
#print h3 { text-align: center; font-size: 23px; display: block; font-weight: normal; line-height: 23px; }
@media print {
    /*#builder, #navigation, #navBtn, #info, .dg { display: none; }*/
    body * { display: none; }
    body #print, body #print * { display: block; }
    html, body { width: 100%; min-width: 8in; max-width: 11in; min-height: 8in; max-height: 11in; background: none; }
}




/* 
  ##Device = for cramped screens
*/
@media only screen and (max-width : 768px) {
	#popupContainer { right: 0; bottom: 0; top: 0; left: 0; }
	#viewport3D {
		width: 100%;
		height: calc(45vh - 48px);
	}
	#info { width: 100%; }
	.dg.ac .dg.main {
		width: 100vw!important;
		height: 55vh!important;
		max-width: 100%!important;
		top: 45vh;
		position: absolute;
		margin-top: 0;
	}
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (max-width: 480px) {
	html { touch-action: none; }
	#popup { max-height: 40%; }
	body .dg {
		width: auto!important;
		margin:0;
		padding:0;
		position: fixed:
		top: 28px;
		left: 0;
		right: 0;
		bottom: 100%;
	}
	.dg.ac .dg.main {
		margin:0;
		padding:0;
		position: fixed;
		top: 34%;
		left: 0;
		right: 0;
		bottom: 0%;
		height; 300px;
	}
	.dg.a #guiPrint div span, .dg.a #guiShare div span, .dg.a #guiSave div span, .dg.a #guiResetCamera div span, .dg.a #guiInOut div span, .dg.a #guiStartOver div span, .dg.a #guiTopView div span, .dg.a #guiHideWalls div span { word-spacing: normal; }
}


div#navigation { position: absolute; top: 42px; left: 15px; width: 300px; max-width: calc(100% - 340px); background-color: rgba(150, 150, 150, .5); }
div#navigation .content { padding: 15px; font-size: 16px; }
div#navigation h3 { font-size: 20px; line-height: 30px; margin: 10px 0 4px 0; }
button#navBtn { position: absolute; left: 15px; top: 2px; }
.navMove { display: block; width: 100px; height: 100px; position: absolute; background-image: url("../images/TouchControls/nav.png"); }
.navMove a { position: absolute; display: block; width: 24px; height: 24px; }
.navMove img { width:24px; height:24px; opacity: 0.4; }
.navMove img:hover { width:24px; height:24px; position: absolute; opacity: 0.75; }
.navMove #navForward { top: 7px; left: calc(50% - 12px); }
.navMove #navRight   { top: calc(50% - 12px); right: 7px; }
.navMove #navBack    { bottom: 7px; left: calc(50% - 12px); }
.navMove #navLeft    { top: calc(50% - 12px); left: 7px; }
.navMove #navForward img { transform: rotate(0deg); }
.navMove #navRight img   { transform: rotate(90deg); }
.navMove #navBack img    { transform: rotate(180deg); }
.navMove #navLeft img    { transform: rotate(270deg); }
div#navigation .content button { background-color: #007ac2; color: white; display: inline-block; border: none; border-radius: 5px; padding: 0 5px; margin: 12px 4px 0 4px; line-height: 20px; height: 22px; }
div#navigation .content button { background-color: #5bbeec; }
div#navigation #navReset { position: absolute; left: 50%; transform: translate(-50%, 0); }
div#navigation #navStartOver, div#navigation #navTopView { float: right; }
.navZoom { width: 40px; height: 100px; position: absolute; position: absolute; left: 50%; transform: translate(-50%, 0); }
.navZoom #navZoomIn, .navZoom #navZoomOut { width: 30px; height: 30px; border: 3px solid; border-color: rgba(255,255,255,0.35); border-radius: 50%; position: absolute; top: 8px; left: 50%; transform: translate(-50%, 0); }
.navZoom #navZoomOut { top: 62px; }
.navZoom img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; opacity: 0.4; }
.navZoom #navZoomIn:hover, .navZoom #navZoomOut:hover { border-color: rgba(255,255,255,0.7); }
.navZoom #navZoomIn:hover img, .navZoom #navZoomOut:hover img { opacity: 0.75; }
.navRotate { width: 100px; height: 100px; position: relative; left: 165px; background-image: url("../images/TouchControls/orbit.png"); }
.navRotate a { position: absolute; display: block; width: 40px; height: 40px; border-radius: 40%; }
.navRotate a img { position: absolute; width:16px; height:16px; opacity: 0.4; }
.navRotate a:hover img { opacity: 0.75; }
.navRotate #navRotUp    { top: 0px; left: calc(50% - 20px); }
.navRotate #navRotRight { top: calc(50% - 20px); right: 0px; }
.navRotate #navRotDown  { bottom: 0px; left: calc(50% - 20px); }
.navRotate #navRotLeft  { top: calc(50% - 20px); left: 0px; }
.navRotate #navRotUp img    { transform: rotate(0deg); top: 7px; left: calc(50% - 8px); }
.navRotate #navRotRight img { transform: rotate(90deg); right: 7px; top: calc(50% - 8px); }
.navRotate #navRotDown img  { transform: rotate(180deg); bottom: 7px; left: calc(50% - 8px); }
.navRotate #navRotLeft img  { transform: rotate(270deg); left: 7px; top: calc(50% - 8px); }
/* Colors */
li.folder select { height: 26px; font-weight: bold; padding: 0; margin: 0; margin-top: -4px!important; width: 100%; border-left: 1px solid #bbb!important; }
li.folder select option { font-weight: bold; font-size: 18px; padding: 5px; text-shadow: none; }

li.folder select option[value='Hawaiian Blue']		{ background-color: #5c87a1; background-image: url(../images/color.php?c=5c87a1); color: white; }
li.folder select option[value='Crimson Red']		{ background-color: #b41d15; background-image: url(../images/color.php?c=b41d15); color: white; }
li.folder select option[value='Fern Green']		{ background-color: #173a27; background-image: url(../images/color.php?c=173a27); color: white; }
li.folder select option[value='Burnished Slate']	{ background-color: #656b63; background-image: url(../images/color.php?c=656b63); color: white; }
li.folder select option[value='Ash Gray']		{ background-color: #a3a293; background-image: url(../images/color.php?c=a3a293); color: black; }
li.folder select option[value='Saddle Tan']		{ background-color: #ceaa78; background-image: url(../images/color.php?c=ceaa78); color: black; }
li.folder select option[value='Desert Sand']		{ background-color: #d5cab2; background-image: url(../images/color.php?c=d5cab2); color: black; }
li.folder select option[value='Koko Brown']		{ background-color: #532f18; background-image: url(../images/color.php?c=532f18); color: white; }
li.folder select option[value='Charcoal Gray']		{ background-color: #5f5f62; background-image: url(../images/color.php?c=5f5f62); color: white; }
li.folder select option[value='Polar White']		{ background-color: #d8d9db; background-image: url(../images/color.php?c=d8d9db); color: black; }
li.folder select option[value='Rustic Red']		{ background-color: #933b03; background-image: url(../images/color.php?c=933b03); color: white; }
li.folder select option[value='Light Stone']		{ background-color: #dad7bd; background-image: url(../images/color.php?c=dad7bd); color: black; }
li.folder select option[value='Gallery Blue']		{ background-color: #0a5a7e; background-image: url(../images/color.php?c=0a5a7e); color: white; }
li.folder select option[value='Galvalume']		{ background-color: #bebebe; background-image: url(../images/color.php?c=bebebe); color: white; }
li.folder select option[value='Galvalume']		{ background-color: #888; background-image: url(../images/ui/galvalume.gif); color: white; text-shadow: 0px 0px 10px black;}
li.folder select option[value='Galvalume Plus']		{ background-color: #888; background-image: url(../images/ui/galvalume.gif); color: white; text-shadow: 0px 0px 10px black;}

li.folder select option[value='Slate Blue']		{ background-color: #528195; background-image: url(../images/color.php?c=528195); color: white; }
li.folder select option[value='Arctic White']		{ background-color: #edffff; background-image: url(../images/color.php?c=edffff); color: black; }
li.folder select option[value='Charcoal Gray']		{ background-color: #536161; background-image: url(../images/color.php?c=536161); color: white; }
li.folder select option[value='Buckskin Tan']		{ background-color: #d2af8f; background-image: url(../images/color.php?c=d2af8f); color: white; }
li.folder select option[value='Burnished Slate']	{ background-color: #454c44; background-image: url(../images/color.php?c=454c44); color: white; }
li.folder select option[value='Parchment']		{ background-color: #dcd8cc; background-image: url(../images/color.php?c=dcd8cc); color: black; }
li.folder select option[value='Evergreen']		{ background-color: #215443; background-image: url(../images/color.php?c=215443); color: white; }
li.folder select option[value='Ash Gray']		{ background-color: #a4aead; background-image: url(../images/color.php?c=a4aead); color: white; }
li.folder select option[value='Antique Red']		{ background-color: #94432e; background-image: url(../images/color.php?c=94432e); color: white; }
li.folder select option[value='Chocolate Brown']	{ background-color: #3c3a2e; background-image: url(../images/color.php?c=3c3a2e); color: white; }
li.folder select option[value='Harbor Blue']		{ background-color: #1c4d6b; background-image: url(../images/color.php?c=1c4d6b); color: white; }
li.folder select option[value='Light Stone']		{ background-color: #d8d3c0; background-image: url(../images/color.php?c=d8d3c0); color: black; }
li.folder select option[value='Bright Red']		{ background-color: #b4000a; background-image: url(../images/color.php?c=b4000a); color: white; }
li.folder select option[value='Black [Premium]']	{ background-color: #000000; background-image: url(../images/color.php?c=000000); color: white; }



/* repeat the colors for the parent select box - these have non-alphanumeric characters removed */
li.folder select { border: none; text-shadow: none; }

li.folder select.HawaiianBlue		{ background-color: #5c87a1; background-image: url(../images/color.php?c=5c87a1); color: white; }
li.folder select.CrimsonRed		{ background-color: #b41d15; background-image: url(../images/color.php?c=b41d15); color: white; }
li.folder select.FernGreen		{ background-color: #173a27; background-image: url(../images/color.php?c=173a27); color: white; }
li.folder select.BurnishedSlate		{ background-color: #656b63; background-image: url(../images/color.php?c=656b63); color: white; }
li.folder select.AshGray		{ background-color: #a3a293; background-image: url(../images/color.php?c=a3a293); color: black; }
li.folder select.SaddleTan		{ background-color: #ceaa78; background-image: url(../images/color.php?c=ceaa78); color: black; }
li.folder select.DesertSand		{ background-color: #d5cab2; background-image: url(../images/color.php?c=d5cab2); color: black; }
li.folder select.KokoBrown		{ background-color: #532f18; background-image: url(../images/color.php?c=532f18); color: white; }
li.folder select.CharcoalGray		{ background-color: #5f5f62; background-image: url(../images/color.php?c=5f5f62); color: white; }
li.folder select.PolarWhite		{ background-color: #d8d9db; background-image: url(../images/color.php?c=d8d9db); color: black; }
li.folder select.RusticRed		{ background-color: #933b03; background-image: url(../images/color.php?c=933b03); color: white; }
li.folder select.LightStone		{ background-color: #dad7bd; background-image: url(../images/color.php?c=dad7bd); color: black; }
li.folder select.GalleryBlue		{ background-color: #0a5a7e; background-image: url(../images/color.php?c=0a5a7e); color: white; }
li.folder select.Galvalume		{ background-color: #bebebe; background-image: url(../images/color.php?c=bebebe); color: white; }
li.folder select.Galvalume		{ background-color: #888; background-image: url(../images/ui/galvalume.gif); color: white; text-shadow: 0px 0px 10px black; }
li.folder select.GalvalumePlus		{ background-color: #888; background-image: url(../images/ui/galvalume.gif); color: white; text-shadow: 0px 0px 10px black; }

li.folder select.SlateBlue		{ background-color: #528195; background-image: url(../images/color.php?c=528195); color: white; }
li.folder select.ArcticWhite		{ background-color: #edffff; background-image: url(../images/color.php?c=edffff); color: black; }
li.folder select.CharcoalGray		{ background-color: #536161; background-image: url(../images/color.php?c=536161); color: white; }
li.folder select.BuckskinTan		{ background-color: #d2af8f; background-image: url(../images/color.php?c=d2af8f); color: white; }
li.folder select.BurnishedSlate		{ background-color: #454c44; background-image: url(../images/color.php?c=454c44); color: white; }
li.folder select.Parchment		{ background-color: #dcd8cc; background-image: url(../images/color.php?c=dcd8cc); color: black; }
li.folder select.Evergreen		{ background-color: #215443; background-image: url(../images/color.php?c=215443); color: white; }
li.folder select.AshGray		{ background-color: #a4aead; background-image: url(../images/color.php?c=a4aead); color: white; }
li.folder select.AntiqueRed		{ background-color: #94432e; background-image: url(../images/color.php?c=94432e); color: white; }
li.folder select.ChocolateBrown		{ background-color: #3c3a2e; background-image: url(../images/color.php?c=3c3a2e); color: white; }
li.folder select.HarborBlue		{ background-color: #1c4d6b; background-image: url(../images/color.php?c=1c4d6b); color: white; }
li.folder select.LightStone		{ background-color: #d8d3c0; background-image: url(../images/color.php?c=d8d3c0); color: black; }
li.folder select.BrightRed		{ background-color: #b4000a; background-image: url(../images/color.php?c=b4000a); color: white; }
li.folder select.BlackPremium		{ background-color: #000000; background-image: url(../images/color.php?c=000000); color: white; }


/* Modal Forms */
form { margin: 0; }
form label { font-size: 24.5px !important; color: #555; padding-left: 5px; padding-bottom: 10px; }
form select { font-size: 24.5px; font-weight: bold; }
form.sign-up-form input { font-size: 24.5px !important; font-weight: bold; width: calc(100% - 12px); height: auto !important; background-color: #f8f8f8 !important; color: black !important; }
form .dropdown ul { margin-left: 0; }
form .dropdown {
	width: 100%;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
	-o-transition: border linear 0.2s, box-shadow linear 0.2s;
	transition: border linear 0.2s, box-shadow linear 0.2s;
	font-size: 24.5px !important;
	font-weight: bold;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
form .dropdown li { border-bottom: 1px solid rgba(200, 200, 200, 0.8); }
form .dropdown:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
form .dropdown span, form .dropdown li { font-size: 24.5px !important; }

div.modal form label.error { color: red; font-size: 15px!important; line-height: initial; margin-bottom: 0; padding-bottom: 0; margin-top: 0; }
div.modal form input.error { background-color: #ffcccc!important; }

#loadingModal .progress-bar { background-color: var(--buttonColor); }

.modal-content { font-size: 1.25em; }

div#modal-success.modal { width: 325px; height: auto; top: 12%; background-color: rgba(91, 190, 236, 0.75); } /* was: background-color: rgba(223, 242, 191, 0.6); border: 2px solid #4F8A10; */
div#modal-success.modal button.close {
	color: white;
	width: 35px; height: 35px; border-radius: 50%;
	position: absolute;
	line-height: 0;
	top: 10px;
	right: 10px;
	opacity: 0.7;
	border: 2px solid white!important;
}
div#modal-success.modal button.close:hover { opacity: 0.85; }
div#modal-success.modal button.close strong { position: relative; top: -3px; font-size: 24px; font-weight: normal; }
div#modal-success.modal div.modal-header { background: transparent; border: none; padding: 0; text-align: center; margin-top: 12px; }
div#modal-success.modal div.modal-header h3 { text-shadow: 1px 1px 6px black; font-size: 30px; color: white; }
div#modal-success.modal div.modal-body { text-align: center; font-size: 18px; color: white; line-height: 1.35em; }
div#modal-success.modal div.modal-body .video { margin-top: 15px; width: 100%; padding-top: 56.25%; position: relative; }
div#modal-success.modal div.modal-body .video iframe { width: 100%; height: 100%; position: absolute; top:0; left: 0; bottom: 0; right: 0; }

p.success, div.error.messages { display: none; border-bottom: 1px solid; border-top: 1px solid; font-size: 20px!important; padding: 5px; text-align: center; }
p.success { color: #4F8A10!important; background-color: #DFF2BF; border-color: #4F8A10; }
div.error.messages { color: #D8000C!important; background-color: #FFBABA; border-color: #D8000C; }

/* Mobile only styles */
	/* Smartphones (portrait and landscape) ----------- */
	/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
	@media only screen and (max-width : 640px) {
		div#navigation .content { font-size: 14px; line-height: 17px; }
		div#navigation h3 { font-size: 16px; line-height: 24px; }
		div#navigation #navReset { position: relative; left: 0; transform: none; }
		div#navigation button { display: block; left: 0; position: relative; transform: none; float: none; width: calc(100% - 8px); height: auto; padding: 4px; }
	}