/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.

You're the boss, so have fun editing!

--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Global Styles
2.0 - Responsive media queries (mobile styles)
	2.1 - MAXIMUM width of 720 pixels (phones landscape)
	2.2 - MAXIMUM width of 350 pixels (phones portrait)
	2.3 - MINIMUM width of 721 pixels (tablets+)
	2.4 - MINIMUM width of 1040 pixels (desktops and laptops)
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 - Global Styles
--------------------------------------------------------------*/

/*
.just_an_example {
	color: black;
}
*/

body:before {
	content: '';
	opacity: 0;
	z-index: -1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

body.modal-display:before {
	opacity: 1;
	z-index: 10;
}

body.modal-display .modal.signup-modal {
	/* display: block; */
}

body.page-template form#loginform > p {
	display: flex;
	flex-direction: column;	
}

body.page-template form#loginform p.login-submit {
	align-items: center;
}

.modal.signup-modal {
	/* display: none; */
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 1000px;
	height: auto;
	background-color: #fff;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: -10;
	-webkit-transition: opacity 0.5s ease-in-out, z-index 0.01s 0.1s linear;
	-moz-transition: opacity 0.5s ease-in-out, z-index 0.01s 0.1s linear;
	-ms-transition: opacity 0.5s ease-in-out, z-index 0.01s 0.1s linear;
	-o-transition: opacity 0.5s ease-in-out, z-index 0.01s 0.1s linear;
	transition: opacity 0.5s ease-in-out, z-index 0.01s 0.1s linear;
}

.modal.signup-modal.active-modal {
	opacity: 1;
	z-index: 11;
}

.modal-form-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    position: relative;
	text-align: center;
}

.modal-form-side {
	flex: 0 1 50%;
	padding: 50px 30px;
}

.modal-form-side h3 {
	margin-bottom: 30px;
}

button.alt-btn,
#submitbtn {
	background-color: #fff;
	border-radius: 20px;
	color: #ed1c24;
	border: 2px solid #fff;
}

button.alt-btn:hover,
#submitbtn:hover {
	background-color: #ed1c24;
	color: #fff;
}

button#modalClose {
	width: 22px;
    height: 22px;
    background-color: transparent;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 1;
    padding: 0 0 0 1px;
}

button#modalClose:before {
	content: "\f00d";
}

button#modalClose span {
	display: block;
	max-height: 0;
	visibility: hidden;
}

.modal-form-side p {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 15px;
}

.modal-form-side.registration-form-container {
	background-color: #ed1c24;
	color: #fff;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
				
.modal-form-side.login-form-container h3 {
	color: #ed1c24;
}
		
.modal-form-side.registration-form-container h3,
.modal-form-side.registration-form-container p {
	color: #fff;
}
		

.modal-form-side.login-form-container {
	background-color: #fff;
	color: #ed1c24;
}

form#wp_signup_form {
	overflow: hidden;
	max-height: 0;
	width: 100%;
}

form#wp_signup_form .form-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

form#wp_signup_form .form-row input {
	background-color: #fff;
}

form#wp_signup_form.active-form {
	max-height: 1000px;
	-webkit-transition: max-height 1s ease-in-out;
	-moz-transition: max-height 1s ease-in-out;
	-ms-transition: max-height 1s ease-in-out;
	-o-transition: max-height 1s ease-in-out;
	transition: max-height 1s ease-in-out;
}

.modal-form-side form#wp_signup_form input#regSubmit {
    border: 1px solid #fff;
	border-radius: 4px;
	-webkit-transition: all .4s ease-in-out !important;
	-moz-transition: all .4s ease-in-out !important;
	-ms-transition: all .4s ease-in-out !important;
	-o-transition: all .4s ease-in-out !important;
	transition: all .4s ease-in-out !important;
}

.modal-form-side form#wp_signup_form input#regSubmit:hover {
	background-color: #fff !important;
	color: #ed1c24 !important;
}

.modal-form-side p.result-message {
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 7px 14px;
	display: none;
}

.modal-form-side.registration-form-container.success > h3,
.modal-form-side.registration-form-container.success > p,
.modal-form-side.registration-form-container.success > button {
	display: none;
	opacity: 0;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.modal-form-side.registration-form-container.success > p.alert-success {
	opacity: 1;
}
/*--------------------------------------------------------------
2.0 - Responsive media queries (mobile styles)
--------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	div#mobile-header {
		position: fixed !important;
	}

	div#panels {
		margin-top: 60px;
	}
}
/*--------------------------------------------------------------
2.1 - MAXIMUM width of 720 pixels (phones landscape)
--------------------------------------------------------------*/
@media screen and (max-width: 720px) {


	/*
	.just_an_example {
		color: black;
	}
	*/


}/* don't delete this closing bracket */





/*--------------------------------------------------------------
2.2 - MAXIMUM width of 350 pixels (phones portrait)
--------------------------------------------------------------*/
@media screen and (max-width: 350px) {


	/*
	.just_an_example {
		color: black;
	}
	*/


}/* don't delete this closing bracket */





/*--------------------------------------------------------------
2.3 - MINIMUM width of 721 pixels (tablets+)
--------------------------------------------------------------*/
@media screen and (min-width: 721px)  {


	/*
	.just_an_example {
		color: black;
	}
	*/


}/* don't delete this closing bracket */





/*--------------------------------------------------------------
2.4 - MINIMUM width of 1040 pixels (desktops and laptops)
--------------------------------------------------------------*/
@media screen and (min-width: 1040px)  {


	/*
	.just_an_example {
		color: black;
	}
	*/


}/* don't delete this closing bracket */