/* app css stylesheet */

/*------------------------------------
|	Global
------------------------------------*/
body {
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: url("../imgs/slider-background.gif"); /* Chrome 10-25, Safari 5.1-6 */
	background-size: cover;
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: Tahoma, Geneva, sans-serif;
}

body a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}

footer {
	text-align: center;
	padding: 1em 0;
	color: #fff;
	font-weight: 400;
	position: inherit;
	right: 0;
	bottom: 0;
	left: 0;
        margin-bottom: 50px;
}

footer p {
	margin: .5em auto;
}

input:focus, select:focus, button:focus {
	outline: 0;
}

input::-webkit-input-placeholder {
   color: #0b72ad;
}
textarea::-webkit-input-placeholder {
   color: #0b72ad;
}

input:-moz-placeholder { /* Firefox 18- */
   color: #0b72ad;  
}
input:-moz-placeholder { /* Firefox 18- */
   color: #0b72ad;  
}

input::-moz-placeholder {  /* Firefox 19+ */
   color: #0b72ad;  
}

input:-ms-input-placeholder {  
   color: #0b72ad;  
}

select::-webkit-validation-bubble-message { display: none !important; }

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

/* Error Handling */

input, select {
	transition: border .5s ease-in-out;
}

.has-error {
	border-color: #ff0033 !important;
}

/*------------------------------------
|	Home View
------------------------------------*/
.home-wrapper .main {
	display: flex;
	justify-content: center;
	align-items: center;
        /*height: 70vh;*/
	height: 500px;
}


.home-wrapper .main .content {
	background: #fff;
	border-radius: 5px;
	padding: 0.7rem;
	width: 42%;
	margin: 0 auto;
        border: 5px solid #111;
}

.home-wrapper .main .content header h1 {
	color: #757575;
	font-family: Century Gothic, sans-serif;
	font-weight: 900;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: .5em;
	background: -webkit-linear-gradient(0deg, #0b72ad, #ea5555);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-wrapper .main .content form {
	width: 60%;
	margin: 0 auto;
}

.home-wrapper .main .content form select {
	width: 100%;
	margin-bottom: 1em;
	padding: .5rem;
	background: transparent;
	border: 2px solid #0b72ad;
	border-radius: 5px;
	color: #0b72ad;
	height: 2.5em;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
	background-image: url("../imgs/download.svg");
	background-size: 12px;
	background-position-x: 97.5%;
	background-position-y: 65%;
	background-repeat: no-repeat;
}

.home-wrapper .main .content form input[type="text"], .home-wrapper .main .content form input[type="email"] {
	width: 100%;
	background: transparent;
	border: 2px solid #0b72ad;
	border-radius: 5px;
	color: #0b72ad;
	padding: .5rem;
	height: 2.5em;
	line-height: 2.5em;
	-webkit-appearance: none;
	box-sizing: border-box;
}
textarea {
	width: 100%;
	background: transparent;
	border: 2px solid #0b72ad;
	border-radius: 5px;
	color: #0b72ad;
	padding: .5rem;
	height: 6.5em;
	//line-height: 2.5em;
	-webkit-appearance: none;
	box-sizing: border-box;
}

.home-wrapper .main .content form input[type="text"]#streams_entered {
	margin-bottom: 1em;
}
.home-wrapper .main .content form input[type="email"]#streams_entered {
	margin-bottom: 1em;
}
textarea , input[type="email"] ,  input[type="text"]{
	margin-bottom: 1em;
}
/*------------------------------------
|	Email Form
------------------------------------*/
.home-wrapper .main .content form[name="emailLeadForm"] {
	width: 68%;
}

.home-wrapper .main .content form[name="emailLeadForm"] input[type="email"] {
	width: 70%;
	float: left;
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.home-wrapper .main .content form[name="emailLeadForm"] #submit {
	width: 30%;
	float: left;
	border-left: 0;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	height: 2.5em;
	padding: 0;
	text-align: center;
	color: #fff;
	background-color: #257e9e;
}

/* Custom Checkboxes */
.home-wrapper .main .content form .checkbox--item {
	margin: 0.5rem 0;
	clear: both;
}

.home-wrapper .main .content form input[type="checkbox"] {
	position: relative;
	width: 0.5rem;
	height: 1rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
	border: 0;
	background: transparent;
}

/* Target Firefox */
@-moz-document url-prefix() {

	.home-wrapper .main .content form input[type="checkbox"] {
		width: auto;
		margin-right: 0;
	}
}
/* Target IE EDGE */
@supports (-ms-ime-align:auto) {

	.home-wrapper .main .content form input[type="checkbox"] {
		width: auto;
		margin-right: 0;
	}

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

	.home-wrapper .main {
		display: block;
		margin-top: 50px;
	}

	.home-wrapper .main .content form input[type="checkbox"] {
		width: auto;
		margin-right: 0;
	}
}

.label--checkbox {
	position: relative;
	cursor: pointer;
	color: #257e9e;
}

.checkbox {
	position: relative;
	margin: 0 1rem 0 0;
	cursor: pointer;
}

.checkbox:before {
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: rotate(-45deg) scale(0, 0);
	-moz-transform: rotate(-45deg) scale(0, 0);
	-ms-transform: rotate(-45deg) scale(0, 0);
	-o-transform: rotate(-45deg) scale(0, 0);
	transform: rotate(-45deg) scale(0, 0);
	content: "";
	position: absolute;
	left: 0.1875rem;
	top: 0.2rem;
	z-index: 1;
	width: 0.75rem;
	height: 0.375rem;
	border: 2px solid #257e9e;
	border-top-style: none;
	border-right-style: none;
	color: red;
}
.checkbox:checked:before {
	-webkit-transform: rotate(-45deg) scale(1, 1);
	-moz-transform: rotate(-45deg) scale(1, 1);
	-ms-transform: rotate(-45deg) scale(1, 1);
	-o-transform: rotate(-45deg) scale(1, 1);
	transform: rotate(-45deg) scale(1, 1);
}
.checkbox:after {
	content: "";
	position: absolute;
/*	top: -0.125rem;
*/	left: 0;
	width: 1rem;
	height: 1rem;
	background: #fff;
	border: 2px solid #f2f2f2;
	cursor: pointer;
}

/* when email is posted successfully*/
.home-wrapper .main .content form .email-success {
	margin-bottom: 1em;
	color: #257e9e;
	-webkit-animation: fadeInFromNone 0.5s ease-out;
	-moz-animation: fadeInFromNone 0.5s ease-out;
	-o-animation: fadeInFromNone 0.5s ease-out;
	animation: fadeInFromNone 0.5s ease-out;
}

.home-wrapper .main .content form label a {
	color: #257e9e;
}

.home-wrapper .main .content button {
	width: 100%;
	background: transparent;
	border: 2px solid #0b72ad;
	border-radius: 5px;
	color: #0b72ad;
	box-shadow: none;
	padding: 0.4em 2em;
	text-transform: uppercase;
}

.home-wrapper .main .content #answer {
	text-align: center;
	color: #0b72ad;
	font-size: 2em;
	font-weight: 500;
	height: 45px;
	margin: 0.5em 0;
}

/*------------------------------------
|	Modal
------------------------------------*/
.modal {
	display: block;
	width: 620px;
	max-width: 100%;
	height: 400px;
	max-height: 100%;
	position: fixed;
	z-index: 100;
	left: 50%;
	top: 50%;
	/* Use this for centering if unknown width/height */
	transform: translate(-50%, -50%);
	background: white;
	box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
	-webkit-animation: fadeInFromNone 0.5s ease-out;
	-moz-animation: fadeInFromNone 0.5s ease-out;
	-o-animation: fadeInFromNone 0.5s ease-out;
	animation: fadeInFromNone 0.5s ease-out;
}

.closed {
	display: none;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	background: rgba(0, 0, 0, 0.6);
}

.modal-guts {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 0 40px;
	color: #000;
	box-sizing: border-box;;
}

.modal-guts p {
	margin-bottom: 1.5em;
}

.modal .close-button {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	border: 0;
	background: transparent;
	color: #000;
	padding: 5px 20px 5px 10px;
	font-size: 1.8rem;
}

.open-button {
	//display: block;
	color: #fff;
	font-weight: 500;
}

.open-button:hover {
	cursor: pointer;
}

/*------------------------------------
|	Media Queries
------------------------------------*/
@media only screen 
and (min-device-width : 1500px) {

	.home-wrapper .main .content{
		width: 40%;
	}

}

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1250px) {

	.home-wrapper .main .content{
		width: 50%;
	}

}

/* iPad and down */
@media only screen 
and (max-device-width : 1024px)
and (min-device-width : 737px)
and (orientation : portrait) {


	.home-wrapper .main .content{
		width: 60%;
	}

	.home-wrapper .main .content form {
		width: 70%;
	}

} /* END iPad and down */

/* iPhone 6/7 and down */
@media only screen 
and (max-device-width : 736px) 
and (orientation : portrait) { 

	.home-wrapper .main .content {
		width: 93%;
	}

	.home-wrapper .main .content form {
		width: 85%;
	}

	.modal {
		height: 100%;
	}

	footer {
		padding-bottom: 0;
		font-size: 0.9em;
	}

	footer .eitb {
		display: block;
	}

} /* END iPhone 6/7 and down */

/* iPhone 6/7 and down */
.logo{
    width:150px;
    background:white;
    border-radius:5px;
    margin-left:5px;
    margin-top:5px
}
@media only screen 
and (max-device-width : 450px) 
and (orientation : portrait) { 
        .logo{
    width:100px;
    background:white;
    border-radius:5px;
    margin-left:5px;
    margin-top:5px
}
	.home-wrapper .main {
		height: auto;
		margin-top: 50px;
	}

	.home-wrapper .main .content {
		border-radius: 0;
	}

	footer {
		position: relative;;
	}

	footer .eitb {
		display: block;
	}

}

@media only screen 
and (max-device-width : 800px) 
and (orientation : landscape) {

	.home-wrapper .main {
		height: auto;
		margin-top: 50px;
	}

	.home-wrapper .main .content {
		width: 75%;
	}

	footer {
		position: relative;;
	}

}