/***************************
*
file name:		header.css
Theme Name: 	nentrium header css
Designed by: 	nentrium graphics
Description:	header decoration for all pages
*
*****************************/

/*
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/howto/howto_css_fixed_footer.asp
https://www.w3schools.com/w3css/w3css_images.asp
*/

/*****  H   H  EEEEE   AAA   DDDD   EEEEE  RRRR   *****/
/*****  H   H  E      A   A  D   D  E      R   R  *****/
/*****  HHHHH  EEEE   AAAAA  D   D  EEEE   RRRR   *****/
/*****  H   H  E      A   A  D   D  E      R  R   *****/
/*****  H   H  EEEEE  A   A  DDDD   EEEEE  R   R  *****/

header {	
	margin: 0 auto;
	width:100%;
	background-color:#ccc;	
}

header p{
	color:#444;
}

header .Xhead-nav-flex-box {
	display:flex;
	align-items:center;
	flex-direction:row;
	flex-wrap:wrap;
	justify-items:center;
}

/*
#head-flex div:nth-of-type(1) {flex-grow: 1;}
#head-flex div:nth-of-type(2) {flex-grow: 1;}
#head-flex div:nth-of-type(3) {flex-grow: 1;}
*/

.head-flex-box,
.mid-box,
.side-box,
.head-box-mid,
.head-box-side,
.box1,
.box2
{
	/* border:2px solid red; */
}

header .head-flex-box{
	display:flex;

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

	margin:auto;
	width:98%;
	height:fit-content;
}

header .head-flex-box .head-box-1{

	height:fit-content;
	margin:auto;
	width:98%;
}

header .head-flex-box .head-box-2{
	display:flex;

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

	height:fit-content;
	height: 30px;
	margin:auto;
	width:98%;
	
	text-align: center;
	vertical-align: text-top;
}

header .head-flex-box .box1 {
	/* height:80px; */
	margin: 0 auto;
	text-align: center;
	vertical-align: text-top;
	width: auto;
}

header .head-flex-box .box2 {
	/* height:50px; */
	margin: 0 auto;
	text-align: center;
	vertical-align: text-top;
	width: auto;
}

header .head-flex-box p{
	/* font attributes */
	font-family: Arial black;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}

header .head-flex-box .box1 .busname {
	color: #ff3; /* site logo color */
	font-size: 45px;
	height:inherit;
	vertical-align: text-top;
}

header .head-flex-box .box1 .sitedesc {
}

header .head-flex-box .box2 p{
	text-align: center;
}

header .head-flex-box .head-box-side{
	text-align: center;
	vertical-align: text-top;
	width: 33%;
}






















/* ------------------------------------------------ */

header .sitedesc p{
	height:inherit;
	font-size: 15px;
	padding:0;
	padding-top:20px;
	vertical-align: text-top;
}
			
header .Xhead-nav-flex-box{
	display:flex;
	
	align-items:center;			/* acts on .head-flex-box>.box */
	flex-wrap:nowrap;
	justify-items:center;		/* acts on .head-flex-box>.box */
}

header .box-info{
	width:50%;
	margin:auto;
}

header .time span, header .data p{
	color:#ff3;
}

header .but-fbk{
	
}

header .but-gog{
	
}

/*
########################################################################################################################
########################################################################################################################

########## MEDIA 900 ##########

##########
*/

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

    header .Xhead-nav-flex-box{
        display:flex;
        flex-wrap:wrap;
        justify-items:center;		/* acts on .head-flex-box>.box */
        align-items:center;			/* acts on .head-flex-box>.box */
    }

	header .box,
	header .head-flex-box>.box{
		width:100%;
	}

    header .head-flex-box{
		flex-direction:column;
		height: auto;
        margin:auto;
        /* width:85%; */
	}

	#head-flex_2 .box1 p{
		line-height: 90px;
	}

	#head-flex_2 .box2 p{
		/* line-height: 30px; */
	}

	header .Xhead-flex-box .head-box-mid{
		width: 350px;
	}

	header .Xhead-flex-box .head-box-side{
		width: 350px;
	}
	
	header .Xhead-flex-box .head-box-side p,
	header .Xhead-flex-box .head-box-side a{
		line-height: 30px;
	}
	
	header .Xhead-flex-box .box1 {
			width: 900px;
	}
	
	header .head-flex-box .Xbox2{
		height: 30px;
	}
	
	header .head-flex-box .Xbox2 p{
		line-height: 30px;
	}
	
	header .head-flex-box .Xbox2 {
		height: 30px;
		text-align: center;
		vertical-align: text-top;
	}

	/*#head-flex_1 {order: 2;}
	#head-flex_2 {order: 1;}
	#head-flex_3 {order: 3;}*/

    .sitedesc {
        padding-top:0px;
    }

    .aside, .content {
        position: inherit;
        top: 0;
    }

    .aside {
        margin:unset;
    }

}






/*  ##############################################################  */
/*  ##############################################################  */

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

}

@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) */
{
	header .head-flex-box .head-box-2{
		flex-direction:column;
		height: fit-content;
		height: 90px;
	}
	
	header .head-flex-box .head-box-2 .head-box-side{
		margin: 5px;
		width: 100%;
	}

}

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

@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) */
{

}

/*  ########## 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){

}

/*  ########## 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) */
{
	
}


/* iPhone 6, 7, & 8 Plus in portrait & landscape
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
{}
*/

@media only screen
and (max-width: 667px)
and (orientation:landscape)
and (-webkit-device-pixel-ratio : 2)
{

}

@media screen
and (max-width: 375px)
and (orientation:portrait)
/*and (-webkit-device-pixel-ratio : 2)*/
{
	
}




/*  ########## ##########  */


/* 320 x 567 iPhone 5s */
@media only screen
and (max-width : 568px)
and (orientation:landscape)
/* and (-webkit-device-pixel-ratio : 2) */
{
	html {
		/*width: 560px;*/
	}
}

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

	header .head-flex-box .head-box-side{
		width: 310px;
	}
	
	header .head-flex-box .box1 {
			width: 310px;
	}

}