/*  *{outline:1px solid orange;}  */


/* nav content -------------------------------------------------- */
@-moz-document url-prefix() { 
  .nav_order{width: 100%;} 	/* Firefox */
}


.nav_order{ 
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */


-webkit-flex-flow: row wrap;
flex-flow: row wrap;

-ms-flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-align-items: flex-start;
align-items: flex-start;
position:relative;
}

.nav_order_1{
position:relative;
display:block;

-webkit-box-ordinal-group: -1;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: -1;      /* OLD - Firefox 19- */
-ms-flex-order: -1;              /* TWEENER - IE 10 */
-webkit-order: -1;
order: -1;

-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;

-webkit-align-self: flex-start;
align-self: flex-start;

}

.nav_order_2{
position:relative;
display:block;	
-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;
order: 2;

-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;
-webkit-align-self: flex-end;
align-self: flex-end;
}

.nav_order_3{
position:relative;
display:block;	
-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;
order: 2;

-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;
-webkit-align-self: flex-end;
align-self: flex-end;

}



/* layout content -------------------------------------------------- */

.order_content{ 
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */


-webkit-flex-flow: row wrap;
flex-flow: row wrap;

-ms-flex-wrap: wrap;
-ms-flex-direction: row;
-webkit-align-items: flex-start;
align-items: flex-start;
position:relative;

}


.order_title{
-webkit-box-ordinal-group: -2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: -2;      /* OLD - Firefox 19- */
-ms-flex-order: -2;              /* TWEENER - IE 10 */
-webkit-order: -2;
order: -2;

-webkit-align-self: flex-start;
align-self: flex-start;
}



.order_3{
-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;
order: 2;

-webkit-flex: none;
-ms-flex: none;
flex: none;

-webkit-align-self: flex-auto;
align-self: auto;
}

.order_4{
-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
-ms-flex-order: 3;              /* TWEENER - IE 10 */
-webkit-order: 3;
order: 3;

-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

-webkit-align-self: flex-auto;
align-self: auto;
}





/* Responsive  -------------------------------------------------- */

@media screen and (min-width: 320px) and (max-width: 980px){
	
	.nav_order_2{
		-webkit-box-ordinal-group: -1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: -1;      /* OLD - Firefox 19- */
		-ms-flex-order: -1;              /* TWEENER - IE 10 */
		-webkit-order: -1;
		order: -1;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;	
	}
	
	.nav_order_3{
		-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
		-ms-flex-order: 2;              /* TWEENER - IE 10 */
		-webkit-order: 2;
		order: 2;

		-webkit-align-self: flex-end;
		align-self: flex-end;
	}

	.nav_order_1{
		-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
		-ms-flex-order: 3;              /* TWEENER - IE 10 */
		-webkit-order: 3;
		order: 3;

		-webkit-align-self: flex-end;
		align-self: flex-end;
	}
		
}


@media screen and (min-width: 320px) and (max-width: 767px){
		
	
	.item_view .order_1{
		-webkit-box-ordinal-group: -1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: -1;      /* OLD - Firefox 19- */
		-ms-flex-order: -1;              /* TWEENER - IE 10 */
		-webkit-order: -1;
		order: -1;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}


	.item_view .order_3{
		-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
		-ms-flex-order: 1;              /* TWEENER - IE 10 */
		-webkit-order: 1;
		order: 1 ;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}


	.item_view .order_2{
		-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group:2;      /* OLD - Firefox 19- */
		-ms-flex-order: 2;              /* TWEENER - IE 10 */
		-webkit-order: 2;
		order: 2;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}	
	
	
	.item_view .order_4{
		-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
		-ms-flex-order: 3;              /* TWEENER - IE 10 */
		-webkit-order: 3;
		order: 3;	
	
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}			


	.listenback_view .order_1{
		-webkit-box-ordinal-group: -1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: -1;      /* OLD - Firefox 19- */
		-ms-flex-order: -1;              /* TWEENER - IE 10 */
		-webkit-order: -1;
		order: -1;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}

	.listenback_view .order_3{
		-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
		-ms-flex-order: 1;              /* TWEENER - IE 10 */
		-webkit-order: 1;
		order: 1 ;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}

	.listenback_view .order_2{
		-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group:2;      /* OLD - Firefox 19- */
		-ms-flex-order: 2;              /* TWEENER - IE 10 */
		-webkit-order: 2;
		order: 2;
		
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}
	
	.listenback_view .order_4{
		-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
		-ms-flex-order: 3;              /* TWEENER - IE 10 */
		-webkit-order: 3;
		order: 3;	
	
		-webkit-align-self: flex-start;
		align-self: flex-start;
	}
	
}


/* IE10 + IE11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	
	.nav_order{ 
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-direction: row;
		width:99%;
		position: relative;
	}
	
	.nav_order_1{
		position:relative;
		-ms-flex-order: -1;
		position: relative;
		height: 50px;
		left: 0;
	}
	.nav_order_2{
		-ms-flex-order: 2;
	}
	.order_content{ 
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
	}

}