/***************************
*
#	file name:		cookie-consent.css
#	Function:		decoration for cookie popup
#	Designed by:	nentrium graphics
#
#	Description:	decoration for cookie popup
#
*/

.cookie-consent-popup {
	display: flex;

	align-content: space-around;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	justify-items: center;

	background-color: #ddcccc;
	height: 200px;
	margin: 0 auto;
	opacity: 1;/*  */
	padding: 2px;
	position: fixed;
	text-align: center;
	transition: top 2s ease;
	/*	start / end position of transition, ensure far enough off screen to not show! */
	top: 1500px;
	width: 95%;
	z-index: 3;
}

.cookie-box{
	position: absolute;
	top: 50%;
	left: 40%;							/* 50% */
	transform: translate(-30%, -50%);	/* -50%, -50% */
}

.cookie-consent-popup p{
	text-align: center;
}

.cookie-consent-hidden {
	/*	start / end position of transition, ensure far enough off screen to not show! */
	top: 1500px;
}

.cookie-consent-show {
	display:block;
	transition-delay: 2s;
	/* display position after transition */
	top:250px;
}

.cookie-consent-popup {
    /*
	bottom: 20px;
    height: 70px;
    position: fixed;
    top: unset;
	*/
}


/*  ##############################################################  */
/*  ##############################################################  */
@media screen and (max-width: 1280px)
and (orientation:landscape)
/* Sony XPERIA 1280 x 800 */
{        
	/* adjust size and position of cookie / privacy box so readers can view the T&Cs */
	.Xcookie-consent-popup {
		bottom: -200px;
		transition: bottom 2s ease;
		top:unset;
	}
		
	.Xshow {
		display:block;
		transition-delay: 2s;
		/* to place in middle 50% x screen height + 50% x cookie-consent-popup height */
		bottom:250px;
        top: unset;
	}

	.Xhidden {
		/*	start / end position of transition, ensure far enough off screen to not show! */
		bottom: -200px;
	}
}

@media screen and (max-width: 800px)
and (orientation:portrait)
/* Sony XPERIA 800 x 1280 */
{        
	/* adjust size and position of cookie / privacy box so readers can view the T&Cs */
	.Xcookie-consent-popup {
		bottom: -200px;
		transition: bottom 2s ease;
		top:unset;
	}
		
	.Xshow {
		display:block;
		transition-delay: 2s;
		bottom:500px;				/* 50% x screen height - 50% x cookie-consent-popup height */
        top: unset;
	}

	.Xhidden {
		/*	start / end position of transition, ensure far enough off screen to not show! */
		bottom: -200px;
	}
}

@media screen and (max-width: 760px) {
}

@media screen and (max-width : 740px)
	/* this line needed to work on real phone landscape orientation*/
	/*and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2) */{
}

/*  ########## MEDIA 670 ##########  */

@media screen and (max-width : 670px)
	/* this line needed to work on real phone landscape orientation*/
	and (orientation:landscape)
/* and (-webkit-device-pixel-ratio : 2) */
{
	.show {
		transition-delay: 2s;
		top:100px;
	}
}

@media screen and (max-width : 670px)
	/* this line needed to work on real phone landscape orientation*/
	and (orientation:portrait)
/*and (-webkit-device-pixel-ratio : 2) */
{
	/*.cookie-consent-popup {
		width: inherit;
	}*/
}

/*  ########## MEDIA 650 ##########	*/

@media screen and (max-width : 650px)
	/* this line needed to work on real phone landscape orientation*/
	/*and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2) */{
}

/*	########## MEDIA 568 ##########	*/

@media screen and (max-width: 568px){
	
	/*.cookie-consent-popup {
		width: 530px;
		margin: 0 auto;
	}*/
}

/*  ########## MEDIA 550 ##########  */

@media screen and (max-width : 550px)
	/* this line needed to work on real phone landscape orientation*/
	/*and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2) */{
}

/*  ########## MEDIA 375 -iPhone X ##########  */


@media only screen
and (max-width : 667px)
and (orientation:landscape)
and (-webkit-device-pixel-ratio : 2)
{
	/*.cookie-consent-popup {
		width: 95%;
	}*/

	.cookie-box{
		position: absolute;
		top: 50%;
		left: 10%;
		transform: translate(0%, -50%);
	}

	.cookie-consent-show {
		top: 120px;
	}

}


@media screen and
(max-width: 375px)
and (orientation:portrait)
and (-webkit-device-pixel-ratio : 2)
{
	/*.cookie-consent-popup {
		width: 100%;
	}*/

}

/* 320 x 567 iPhone 5s */


@media only screen
and (max-width : 567px)
and (orientation:landscape)
/* and (-webkit-device-pixel-ratio : 2) */
{
	/*.cookie-consent-popup {
		width: 95%;
	}*/
	
	.cookie-box {
		position: absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -60%);
	}

	.cookie-box{
		position: absolute;
		top: 50%;
		left: 10%;
		transform: translate(0%, -50%);
	}

	.cookie-consent-show {
		top: 120px;
	}

}


@media screen and
(max-width: 320px)
and (orientation:portrait)
/* and (-webkit-device-pixel-ratio : 2) */
{
	html {
		width: 320px;
	}
	
	header .head-flex-box .box1 {
		width: auto;
	}

	.cookie-consent-popup {
		width: 100%;
	}
	
	.content {
		padding-bottom: 0;
	}
	
	.content {
		width: inherit;
		padding: 0;
	}

}