/* General styles for the modal */

/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}

.md-perspective body  {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.container {
	background: #e74c3c;
	min-height: 100%;
}

.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 60%;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-content {
	width:100%;
	height:auto;
	padding-bottom:30px;
	border-bottom:1px solid #FFF;
	margin-bottom:30px;
}

.md-download {
	width:100%;
	height:auto;
	font-size:1.2em;
}

.md-download-btn {
	margin-top:30px;
	width:200px;
	padding:10px 15px 10px 15px;
	text-align:center;
	background:#FFF;
	font-size:0.9em;
}

.md-download-btn:hover {
	border-radius:10px;
	-webkit-transition:0.3s ease-in;
}

#md-contact {
	width:47.5%;
	height:auto;
	margin-right:2.5%;
	float:left;
	font-size:1.2em;
}

.contact-title {
	height:auto;
	width:300px;
	margin-bottom:15px;
}

#md-contact-form {
	width:47.5%;
	height:auto;
	margin-left:2.5%;
	float:left;
}

#md-contact-mobile {
	width:100%;
	height:auto;
	font-size:1.2em;
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(250,172,53,0.95);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Input styles */

input[type="text"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: 'Source Sans Pro';
  color:#FFF;
  padding-left:10px;
  
  font-size: 1.2em;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  background:none;
  border:1px solid #FFF;
  padding-top:15px;
  padding-bottom:15px;
  margin-top:15px;
  margin-bottom:15px;
}

input[type="submit"] {
  display: block;
  margin: 0;
  width: 125px;
  font-family: 'Source Sans Pro';
  color:#FFF;
  font-weight:400;
  font-size:1.2em;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  background:none;
  border:1px solid #FFF;
  padding-top:10px;
  padding-bottom:8px;
  margin-top:25px;
}
input[type="submit"]:hover {
  border-radius:10px;
  -webkit-transition:0.7s ease;
  background:#FFF;
  color:#fcb135;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family: 'Source Sans Pro';
    color:    #FFF;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-family: 'Source Sans Pro';
   color:    #FFF;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-family: 'Source Sans Pro';
   color:    #FFF;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-family: 'Source Sans Pro';
   color:    #FFF;
}

input[type="email"] {
	float:left;
	width:47.5%;
	margin-left:2.5%;
	
	display: block;
    font-family: 'Source Sans Pro';
  	color:#FFF;
  	padding-left:10px;
  	font-size: 1.2em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: none;
  	background:none;
  	border:1px solid #FFF;
  	padding-top:15px;
  	padding-bottom:15px;
  	margin-top:15px;
  	margin-bottom:15px;
}

input[type="phone"] {
	float:left;
	width:47.5%;
	margin-right:2.5%;
	
	display: block;
    font-family: 'Source Sans Pro';
  	color:#FFF;
  	padding-left:10px;
  	font-size: 1.2em;
  	appearance: none;
  	box-shadow: none;
  	border-radius: none;
  	background:none;
  	border:1px solid #FFF;
  	padding-top:15px;
  	padding-bottom:15px;
  	margin-top:15px;
  	margin-bottom:15px; 
}

/* Individual modal styles with animations/transitions */

/* Effect 12:  Just me */
.md-effect-12 .md-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
	background: rgba(250,172,53,0.99);
} 

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
	background: transparent;
}

.md-show.md-effect-12 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}