/***************************************
			Generic Edits
***************************************/
/*These edits are being applied with mobile in mind*/
/*
div {
  border: 1px solid black;
}
*/

/*Makes sure that our html element covers the whole page. Visibility is hidden so we can make some checks with JS before we display anything*/
html {
	height: 100%;
	overflow: hidden;
	visibility: hidden;
}

/*All of our other elements are in our body so we'll want to make our body have 100% height too*/
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	/*This property controls whether or not touch devices use momentum-based scrolling for a given element.
	This is really only for IOS Safari.*/
	-webkit-overflow-scrolling: touch;
}

/*Container holds all of our elements, so that way we can display none when a mobile device
is flipped into landscape mode. Since all of our page elements are also in this div it must
be 100% height as well*/
#container {
	height: 100%;
}

/*Styling for the div that holds our header and our content elements*/
#headerAndContent {
	/*Makes it so that you can scroll to the bottom of the content div*/
	overflow-y: auto;
	background: url("../images/wf-bg.jpg") no-repeat center center fixed;
	background-size: cover;
}

/*Styling for our banner at the top with our logo / phone*/
#header {
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Our phone is a link but I didn't want it to be underlined and to be colored the same as our other text*/
#header a {
	text-decoration: none;
	color: #17468f;
}

/*Giving some padding to the bottom and top of our logo so the border of our header isn't touching it*/
#wflogo {
	padding-top: .7%;
	padding-bottom: .7%;
}

/*We have two different logos, one for mobile (smaller), and one for desktop (bigger). We don't want
to display both at the same time, so in traditional view we will not display the mobile one and vice
versa for when we aqre in mobile*/
#logo {
	display: none;
}

/*Styling for our phone number*/
#phone {
	font-size: 1.10em;
	text-align: left;
	line-height: 0px;
}

/*Aligns our back button to the right of its column which is on the right side of the banner*/
#back {
	display: none;
	text-align: right;
}

/*If our html has a content div then this will be the default styling for it*/
#content {
	color: #17468f;
	background:rgba(255,255,255,0.9);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,0.19);
	text-align: center;
	width: 90vw;
	margin-top: 15%;
	margin-bottom: 7%;
}

/*Styling for the blue banner going across the bottom that includes legal info*/
#footer {
	color: #ffffff;
	text-align: center;
	background-color: #17468f;
	font-size: .6em;
}

/*This makes the cursor be a pointer finger when a mouse is hovered over it*/
#privacyStatement:hover {
	cursor: pointer;
}

/***************************************
		General Media Edits
***************************************/
/*Its better to style for the mobile version and then do media edits to adjust the desktop. The min-width
here means that screens 768px or bigger will apply the styles below.*/
@media screen and (min-width: 768px){
	#mobile-logo {
		display: none;
	}

	#logo {
		display: block;
	}

	#phone {
		font-size: 1.75em;
		text-align: center;
		line-height: 85px;
	}

	/*If our page has a back button this will style it*/
	#backBtn {
		font-size: 2em;
		line-height: 85px;
	}

	#back {
		display: block;
	}

	#content {
		width: 70vw;
		margin-top: 5%;
	}

	#footer {
		font-size: .9em;
	}
	
}

@media screen and (min-width: 1025px){
	#content {
		width: 45vw;
	}
}

/***************************************
				Modal
***************************************/
/*A modal is a form of popup window, it will hold our legal information.*/
/*Styling for the top of our modal*/
.modal-header {
	background-color: #17468f;
}

/*Styling for our title which is in our modal header*/
.modal-title {
	font-size: 1.5em;
	color: #ffffff;
}

/*Styling for the title of the modal*/
.modal-h4 {
	color: white;
	font-weight: bold;
}

/*Styling for the close button which is also in our header*/
.close {
	box-shadow: none;
	padding-right: 5%;
}

/*Styling for the middle section of our modal*/
.modal-content {
	background-color: #efefef;
}

.modal-body {
	font-size: 12pt;
}

#MinMax {
 color: red;
}

/*The accesbility button was getting in the way of the close button*/
@media screen and (max-width: 768px) {
	#payNowClose, #PayPalClose, #logInClose, #privacyClose {
		padding-right: 20%;
	}
}

/***************************************
		Unsupported Browsers
***************************************/
/*This will be displayed if a user is using IE versions 10 or below*/
/*Styling for the background*/
#unsupportedIE {
	overflow-y: auto;
	text-align: center;
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	background: url("../images/wf-bg.jpg") no-repeat center center fixed;
	background-size: cover;
}

/*Styling for our div around our text*/
#unsupportedBlock {
	color: #17468f;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,0.19);
	text-align: center;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
}