/*
# ==================================================================================================================================================================
#	author: 		Emely Buchholt - Datamanix
#	parameters:		
#	date: 			07/01-2020
#	version: 		v 2.0.0.0
#	task:			#1616
#	purpose: 		Custom css - the css I made - to overwrite the things made from mobirise or add to it
#	note: 			This is a php file called with ajax
# ==================================================================================================================================================================
*/
/* ==================== background image on login page ===============  */
#custom-html-6{
	margin: auto;
	width: 100%;
	height: 100vh;
	padding-top: 70px;
	background-image: linear-gradient(90deg,#3475b1 10%,rgba(0,0,0,0) 100%), url(https://evtman.dk/files/eventphoto.jpg);
	background-position: right center;
	background-size: cover;
}

/* ==================== remove box shadow when btn is clicked/focus ===============  */
.btn-primary:focus{
	box-shadow: none !important;
}

/* ==================== Set date to justify to the box ===============  */
.justify_custom_con{
	width: 150px;
	margin: 0 auto;	
}

.justify_custom{
    letter-spacing: 3px !important;
    margin-right: -3px !important;
}

.justify_custom_month{
    letter-spacing: 0.2em !important;
    margin-right: -0.25em !important;
}

/* ==================== Animation on 'more events' btn ===============  */
#transistion_style{
	transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.4s !important;
}

#find_events:hover #transistion_style{
	transform: translateY(50%);
}

/* ==================== Overlay and popup style - when you are logged out ===============  */
#dm_evtman_overlay{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9000;
	cursor: pointer;
}
#popup_logout{
	z-index: 9500;
	top: 15%;
	left: 25%;
	-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
	box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.75);
}
/* ==================== Class set in javascript - to hide the content in the tabs with sort ===============  */
.hide_sort{
	display: none;
}
/* ==================== Class with fade - so the page fades in when you load ===============  */
.event_con{	
	-webkit-animation: fadein .3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein .3s; /* Firefox < 16 */
    -ms-animation: fadein .3s; /* Internet Explorer */
    -o-animation: fadein .3s; /* Opera < 12.1 */
    animation: fadein .3s;
}
/* ========= Fade keyframes to different browsers ========= */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#arrow_back{
	left: 3%;
}

.text-secondary{
	color: #848f98 !important;
}
@media (min-width: 1200px){
	.col-xl-1 {
		-ms-flex: 0 0 9.333333%;
		flex: 0 0 9.333333%;
		max-width: 9.333333%;
	}
	.col-xl-2 {
		-ms-flex: 0 0 15.666667%;
		flex: 0 0 15.666667%;
		max-width: 15.666667%;
	}
}
@media screen and (max-width: 1199px){
	#arrow_back{
		left: 2%;
	}
}

@media screen and (max-width: 991px){
	#popup_logout{
		top: 2%;
		left: 5%;
		width: 90% !important;
	}
	
	#login-form, #login-form-info{
		width: 100% !important;
	}
	
}
/* =============== TABLET SCREEN AND SMALLER ================= */
@media screen and (max-width: 768px){
	
	.nav-justified .nav-item{
	    flex-basis: 30%;
	}
	
}

@media screen and (max-width: 425px){
	#popup_logout a{
		width: 90% !important;
	}
	
	#arrow_back{
		left: 0;
	}
	.justify_custom_date{
    letter-spacing: 6px !important;
    margin-right: -6px !important;
	}
	.justify_custom_month{
	    letter-spacing: 0.2em !important;
	    margin-right: -0.25em !important;
	}
}
/* =============== Small mobile phones ================= */
@media screen and (max-width: 370px){	
	.nav-justified .nav-item{
	    flex-basis: 35%;
	}
}