/*
	DO NOT EDIT. This file is generic.
	For site specific styles, create a different css file to be called
	after this file, and after dft-media.css
*/

*
{
	box-sizing: border-box; 
}

body
{
	font-family: "Open Sans", sans-serif;
	padding: 0px;
	margin: 0px;
}

#headerLogo
{
	width: 100%;
}

nav ul {
	margin-top: 0;
	margin-bottom: 0;
}
nav ul li {
	display: inline-block;
}
nav ul li:not(:last-child)::after {
	content: "|";
	margin-left: 10px; /* Space between text and pipe */
	color: #ffffff; /* Optional: pipe color */
}

h1
{
	font-weight: normal;
	font-size: 3em;
	text-align: center;
	margin-top: 0;
}

h2
{
	font-weight: normal;
	font-size: 2em;
	text-align: left;
}

dt
{
	font-weight: bold;
	text-align: left;
}

a
{
	text-decoration: none;
	font-weight: 600;
}

.row
{
	width: 100%;
	text-align: center;
	background-color: #dddddd;
}

.row.header
{
	margin-bottom: 1em;
}

form .row, form .col, form .content
{
	padding-top: 0;
	padding-bottom: 0;
}
form .row
{
	padding-bottom: 0.375em;
}

form input,form textarea,form select
{
	width: 100%;
	max-width: 640px;
}

.content
{
	width: 1170px;
	max-width: 100%;
	text-align: center;
	margin: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	background-color: #999999;
}

.content90
{
	width: 90%;
	text-align: center;
	margin: auto;
	background-color: #555555;
}

.col
{
	margin: auto;
	display: inline-block;
	vertical-align: top;
	border: 0px solid black;
	background-color: #eeeeee;
	padding: 1em;
}

p
{
	text-align: left;
	width: 100%;
	padding: 0.5em;
	font-size: 1.2em;
	line-height: 1.5;
}

.float-left
{
	float: left;
}

.float-right
{
	float: right;
}

.float-none
{
	float: none;
}

/*
	Values are off by 1% to avoid wrapping
*/
.col-100
{
	width: 100%;
}

.col-90
{
	width: 89%;
}

.col-80
{
	width: 79%;
}

.col-60
{
	width: 59%;
}

.col-40
{
	width: 39%;
}

.col-75
{
	width: 74%;
}

.col-66
{
	width: 65%;
}

.col-50
{
	width: 49%;
}

.col-33
{
	width: 32%;
}

.col-25
{
	width: 24%;
}

.col-20
{
	width: 19%;
}

.col-10
{
	width: 9.5%;
}

#dtf-hamburger, #dtf-mobileMenu
{
	display: none;
}

/* // https://stackoverflow.com/questions/11021766/how-do-i-center-javascript-css-popup-div-no-matter-what-the-screen-resolution
position:absolute;
top:50%;
left:50%;
width:400px;
height:400px;
margin-left:-200px;
margin-top:-200px;
*/

.screenModal
{
	display: none;
	position: fixed; /* instead of fixed, so we can scroll it */
	overflow-y: scroll;
	z-index:13;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000000bf;
	text-shadow: none!important;
}

.screenModalBox
{
	display:none;
	position: absolute;
	z-index:14;
	top:50px;
	left:50%;
	width: 100%;
	max-width: 500px;
	min-width: 320px;
	margin: auto;
	background-color: white;
	padding: 2em;
	border-radius: 20px;
	border: 6px solid #920000;
	margin-left:-250px;
	margin-bottom: 50px;
}
.screenModalCloseBox
{
	cursor: pointer;
	position: absolute;
	top: -10px;
	right: -10px;
	background-color: #39dc397f;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	line-height: 36px;
	font-size: 40px;
	text-align: center;
	border: 2px solid #39dc3900;
}
.screenModalCloseBox:hover
{
	background-color: white;
	border: 2px solid #39dc39;
}

.screenModalBox p, .screenModalBox h2
{
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
.screenModalBox .content
{
	width: 100%;
}
.text-align-left
{
	text-align: left;
}
.text-align-right
{
	text-align: right;
}

.text-align-center
{
	text-align: center;
}

input, select
{
	border-radius: 6px;
	font-size: 1.8em;
}

input
{
	width: 100%;
}

input[type="text"],input[type="password"]
{
	padding-left: 0.5em;
}

input[type="radio"],input[type="checkbox"]
{
	width: initial;
}

.position-relative
{
	position: relative;
}

.position-absolute
{
	position: absolute;
}

.no-side-padding
{
	padding-left: 0;
	padding-right: 0;
}

.no-top-margin
{
	margin-top: 0;
}

.no-padding
{
	padding: 0;
}

.no-top-padding
{
	padding-top: 0 !important;
}

.no-bottom-padding
{
	padding-bottom: 0 !important;
}

.no-vertical-padding
{
	padding-top: 0;
	padding-bottom: 0;
}

.no-vertical-padding-important
{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.no-bottom-margin
{
	margin-bottom: 0;
}

.middle-align
{
	vertical-align: middle;
}

.empty
{
	height: 1px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin: 0 !important;
}

.width-100
{
	width: 100%;
}

.width-50
{
	width: 50%;
}

.no-wrap
{
	white-space: nowrap;
}

.vertical-align-middle
{
	vertical-align:middle;
}

.cursor-pointer
{
	cursor: pointer;
}

.cursor-default
{
	cursor: default;
}

.cursor-auto
{
	cursor: auto;
}

.cursor-default-important
{
	cursor: default !important;
}

.mobile-show-inline
{
	display: none !important;
}

.no-select {
  -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 */
}

.inline-block
{
	display: inline-block;
}

.display-none
{
	display: none;
}

.bold
{
	font-weight: bold;
}

.blinkPrompt
{
		animation:blinkPromptElem 2s infinite;
}
@keyframes blinkPromptElem
{
		0%{     color: #fff;    }
		80%{    color: #fff; }
		90%{    color: transparent; }
		100%{   color: #fff;    }
}

.clear-both
{
	clear: both;
}


.vertical-align-bottom
{
	vertical-align: bottom;
}

.width100p {
    width: 100%;
}