/* 
--------------------------------
DESIGN FRAMEWORK
--------------------------------
- ALIGN
- BACKGROUND
- BLOCK
- FLEX
- HEIGHT
- POSITION
--------------------------------
José María Sánchez Escoto
--------------------------------

*/

/* ---------------------------------------------------------------- ALIGN */

/* general */
.d_align_left {text-align:left}
.d_align_right {text-align:right}
.d_align_center {text-align:center}
.d_align_justiy {text-align:justify}

/* ON XS */

/* to center */
.d_align_left_xs-center {text-align:left}
.d_align_right_xs-center {text-align:right}
.d_align_justiy_xs-center {text-align:justify}

/* center to */
.d_align_center_xs-left {text-align:center}
.d_align_center_xs-right {text-align:center}
.d_align_center_xs-justify {text-align:center}

/* ON SM */

/* to center */
.d_align_left_sm-center {text-align:left}
.d_align_right_sm-center {text-align:right}
.d_align_justiy_sm-center {text-align:justify}


/* Md Tablets*/
@media (max-width: 1099.98px) {
	
/* to center */
.d_align_left_sm-center {text-align:center}
.d_align_right_sm-center {text-align:center}
.d_align_justiy_sm-center {text-align:center}

}

/* SM landscape phones */
@media (max-width: 767.98px) {
		
/* to center */
.d_align_left_xs-center {text-align:center}
.d_align_right_xs-center {text-align:center}
.d_align_justiy_xs-center {text-align:center}

/* center to */
.d_align_center_xs-left {text-align:left}
.d_align_center_xs-right {text-align:right}
.d_align_center_xs-justify {text-align:justify}

}

/* ----------------------------------------------------------- BACKGROUND */

.df_bg_test-1 {background:#0F0}
.df_bg_test-2 {background:#C0F}
.df_bg_test-3 {background:#39F}

/*----------------------------------------------------------------- BLOCK */

.d_block {display:block}
.d_block_inline {display:inline-block}

.d_block_wraper {
	display:block;
	position:relative;
}
.d_block_wraper:after {
	height:0;
	clear:both;
	content: ".";
	display:block;
	visibility:hidden;
}

/*------------------------------------------------------------------ FLEX */

.d_flex {display:flex}

/* behaviors */
.d_flex_between {justify-content:space-between}
.d_flex_center {margin:auto}
.d_flex_grid {flex-wrap:wrap}
.d_flex_vertical {flex-direction:column}

/* sizes */
.d_flex_proportion-1 {flex:1}
.d_flex_proportion-2 {flex:2}
.d_flex_proportion-3 {flex:3}
.d_flex_proportion-4 {flex:4}
.d_flex_proportion-5 {flex:5}
.d_flex_proportion-6 {flex:6}
.d_flex_proportion-7 {flex:7}
.d_flex_proportion-8 {flex:8}
.d_flex_proportion-9 {flex:9}
.d_flex_proportion-10 {flex:10}

/* order */
.d_flex_order-1 {order:1}
.d_flex_order-2 {order:2}
.d_flex_order-3 {order:3}
.d_flex_order-4 {order:4}
.d_flex_order-5 {order:5}
.d_flex_order-6 {order:6}
.d_flex_order-7 {order:7}
.d_flex_order-8 {order:8}
.d_flex_order-9 {order:9}
.d_flex_order-10 {order:10}

/* width */
.d_flex_width-5 {flex-basis:5%}
.d_flex_width-10 {flex-basis:10%}
.d_flex_width-15 {flex-basis:15%}
.d_flex_width-20 {flex-basis:20%}
.d_flex_width-25 {flex-basis:25%}
.d_flex_width-30 {flex-basis:30%}
.d_flex_width-35 {flex-basis:35%}
.d_flex_width-40 {flex-basis:40%}
.d_flex_width-45 {flex-basis:45%}
.d_flex_width-50 {flex-basis:50%}
.d_flex_width-55 {flex-basis:55%}
.d_flex_width-60 {flex-basis:60%}
.d_flex_width-65 {flex-basis:65%}
.d_flex_width-70 {flex-basis:70%}
.d_flex_width-75 {flex-basis:75%}
.d_flex_width-80 {flex-basis:80%}
.d_flex_width-85 {flex-basis:85%}
.d_flex_width-90 {flex-basis:90%}
.d_flex_width-95 {flex-basis:95%}
.d_flex_width-full {flex-basis:100%}

/*---------------------------------------------------------------- HEIGHT */

.d_height_px-5 {height:5px}
.d_height_px-10 {height:10px}
.d_height_px-15 {height:15px}
.d_height_px-20 {height:20px}
.d_height_px-25 {height:25px}
.d_height_px-30 {height:30px}
.d_height_px-35 {height:35px}
.d_height_px-40 {height:40px}
.d_height_px-45 {height:45px}
.d_height_px-50 {height:50px}
.d_height_px-55 {height:55px}
.d_height_px-60 {height:60px}
.d_height_px-65 {height:65px}
.d_height_px-70 {height:70px}
.d_height_px-75 {height:75px}
.d_height_px-80 {height:80px}
.d_height_px-85 {height:85px}
.d_height_px-90 {height:90px}
.d_height_px-95 {height:95px}
.d_height_px-100 {height:100px}

/*-------------------------------------------------------------- POSITION */

.d_position_relative {position:relative}
.d_position_absolute {position:absolute}