/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1000px) {
	div.flexboxcolwrap{width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items: stretch; align-content: flex-start; justify-content: space-between;}
	div.flexboxcolitem { width:300px;  border:#000 solid 1px;  margin:0px 10px 20px 0px;}
	div.flexboxcolitemimg{float:left;width:100%; height:225px; overflow:hidden; display:flex; align-items: center; justify-content:center; margin:0px 0px 10px 0px;}
	div.flexboxcolitemimg img{width:100%; height:auto;}
	div.flexboxcolitemtext{width:100%; padding:20px;}

	div.flexboxcolpackwrap{width:100%; height:1020px /*Wrap column is float on Y-axis. Therefore height value is required*/; display:flex; flex-wrap:wrap; flex-direction:column; align-items: flex-start; justify-content:flex-start;}
	div.flexboxcolpackitem {width:31%; border:#000 solid 1px; margin:0px 0px 20px 0px; }
	div.flexboxcolpackitemimg{width:100%;}
	div.flexboxcolpackitemimg img{width:100%; height:auto;}
	div.flexboxcolpackitemtext{width:100%; padding:20px;}

	div.flexboxrowcolswapstraight{margin:0px 0px 50px 0px; width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items: stretch; align-content: flex-start; justify-content: space-between;}
	div.flexboxrowcolswapreverse{margin:10px 0px 50px 0px; width:100%; display:flex; flex-wrap:wrap; flex-direction:row-reverse; align-items: stretch; align-content: flex-start; justify-content: space-between;}
	div.flexboxrowcolswap1{width:40%;}
	div.flexboxrowcolswap1 img{width:100%; height:auto;}
	div.flexboxrowcolswap2{width:56%;}
	
	/*Image align to center*/
	.flexcentrecentre{display:flex;justify-content: center; align-items: center; width:400px; height:400px; border: 1px  solid #000; overflow:hidden;}
	.flexcentrecentre img{width:80%; height:auto;}
	
}

/* ========================================================================== */
/* ========================================================================== */
	/*Tablet - Mobile. 360,375,414,768(666)*/
@media (min-width: 667px) and (max-width: 999px){
	/*Tablet. Width is 768px*/
}

@media (min-width: 414px) and (max-width: 666px){
	/*Mobile iphone XS  + Samsung Note 9. Width is 414px.*/
}

@media (min-width: 375px) and (max-width: 413px){
	/*Mobile iphone 6/7/8/X/XS. Width is 375px*/
}

@media (min-width: 0px) and (max-width: 374px){
	/*Mobile Samsung S9/S9+. Width is 360px*/
}

@media (min-width: 0px) and (max-width: 666px){
	/*Tablet to Mobile Range*/
}

/* ========================================================================== */
/* ========================================================================== */


/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){

	div.flexboxcolwrap{float:left; width:100%;}
	div.flexboxcolitem { width:100%;  border:#000 solid 1px;  margin:0px 0px 20px 0px;}
	div.flexboxcolitemimg{float:left;width:100%; margin:0px 0px 10px 0px;}
	div.flexboxcolitemimg img{width:100%; height:auto;}
	div.flexboxcolitemtext{width:100%; padding:20px;}

	div.flexboxcolpackwrap{float:left; width:100%;}
	div.flexboxcolpackitem {width:100%; border:#000 solid 1px; margin:0px 0px 20px 0px; }
	div.flexboxcolpackitemimg{width:100%;}
	div.flexboxcolpackitemimg img{width:100%; height:auto;}
	div.flexboxcolpackitemtext{width:100%; padding:20px;}

	div.flexboxrowcolswapstraight{margin:0px 0px 40px 0px; width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items: stretch; align-content: flex-start; justify-content: space-between;}
	div.flexboxrowcolswapreverse{margin:10px 0px 40px 0px; width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items: stretch; align-content: flex-start; justify-content: space-between;}
	div.flexboxrowcolswap1{width:100%;}
	div.flexboxrowcolswap1 img{width:100%; height:auto;}
	div.flexboxrowcolswap2{width:100%; margin:20px 0px 0px 0px;}
	
		/*Image align to center*/
	.flexcentrecentre{display:flex; justify-content: center; align-items: center; width:100%; height:500px; border: 1px  solid #000; overflow:hidden;}
	.flexcentrecentre img{width:auto; height:90%; }

}

/* ==========================================================================
   Share CSS
   ========================================================================== */

/* ========================================================================== */
/*Flexbox https://www.w3schools.com/css/css3_flexbox.asp*/
/* ========================================================================== */
div.flexboxwrap{
	display: flex;
	min-height:600px;
	background-color:#CCC;
	flex-wrap: wrap /*wrap | nowrap | wrap-reverse*/;
	flex-direction: row /*column | column-reverse | row | row-reverse*/;
	justify-content: center /*center | flex-start | flex-end | space-around | space-between | space-evenly | end*/;
	align-items: baseline /*center | flex-start | flex-end | stretch | baseline*/;
	align-content: center /*space-between | space-around | stretch | center | flex-start | flex-end*/;
	
	/* Perfect Centering
	  justify-content: center;
	  align-items: center;
	 */
}

div.flexboxitem{
	background-color: #f1f1f1;
	margin: 10px;
	padding:10px;
	text-align: left;
	line-height:1.5em;
	font-size: 12px;
	/*https://developer.mozilla.org/en-US/docs/Web/CSS/align-self	
	/* Positional alignment */
	/*
	align-self: center; 
	align-self: start; 
	align-self: end; 
	align-self: self-start;
	align-self: self-end; 
	align-self: flex-start;
	align-self: flex-end; 
	*/
}

/*Flex Header*/
.flexheader {background-color:#eeeeee; display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%;}
.flexheaderleft{ width:60%; display:flex; flex-wrap:wrap; flex-direction:row; justify-content: space-between; border:solid 1px #F00;}
.flexheaderleft div {}
.flexheaderright{ display:flex;  flex-direction:row; align-items:center; border: solid 1px #0C6;}
.flexheaderright img{width:auto; height:40px;}