@charset "UTF-8";
/* CSS Document */
.vwi_container {
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

.vwi_row {
	box-sizing: border-box;
	margin-bottom: 20px;
	margin-left: -15px;
	margin-right: -15px;
}

.vwi_row:last-of-type {
	margin-bottom: 0px;
}
.viw_ui-modal-preview-block .vwi_row {
	min-height:200px;
}
.vwi_row:after {
  content: "";
  display: table;
  clear: both;
}

/* GRID with margin (4%) or not : by default no margin ?
------------------------------ */
.vwi_col {
	float: left;
	position: relative;
	min-height: 1px;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
	
	padding-left: 15px;
	padding-right: 15px;
}
.vwi_col.vwi_sml-1{
	width: 8.3333%;
}
.vwi_col.vwi_sml-2{
	width: 16.6666%;
}
.vwi_col.vwi_sml-3{
	width: 25%;
}
.vwi_col.vwi_sml-4{
	width: 33.3333%;
}
.vwi_col.vwi_sml-5 {
	width: 41.6666%;
}
.vwi_col.vwi_sml-6 {
	width: 50%;
}
.vwi_col.vwi_sml-7 {
	width: 58.3333%;
}
.vwi_col.vwi_sml-8 {
	width: 66.6666%;
}
.vwi_col.vwi_sml-9 {
	width: 75%;
}
.vwi_col.vwi_sml-10 {
	width: 83.3333%;
}
.vwi_col.vwi_sml-11 {
	width: 91.6666%;
}
.vwi_col.vwi_sml-12 {
	width: 100%;
}
/* percent */
.vwi_col.vwi_sml_pc-1-1 {
	width: 100%;
}
.vwi_col.vwi_sml_pc-1-2 {
	width: 50%;
}
.vwi_col.vwi_sml_pc-1-3 {
	width: 33.3333%;
}
.vwi_col.vwi_sml_pc-1-4 {
	width: 25%;
}
.vwi_col.vwi_sml_pc-1-5 {
	width: 20%;
}
.vwi_col.vwi_sml_pc-1-6 {
	width: 16.6666%;
}
.vwi_col.vwi_sml_pc-1-7 {
	width: 14.2857%;
}
.vwi_col.vwi_sml_pc-1-8 {
	width: 12.5%;
}
.vwi_col.vwi_sml_pc-1-9 {
	width: 11.1111%;
}
.vwi_col.vwi_sml_pc-1-10 {
	width: 10%;
}

@media (min-width: 768px) {
	.vwi_col.vwi_med-1 {
		width: 8.3333%;
	}
	.vwi_col.vwi_med-2 {
		width: 16.6666%;
	}
	.vwi_col.vwi_med-3 {
		width: 25%;
	}
	.vwi_col.vwi_med-4 {
		width: 33.3333%;
	}
	.vwi_col.vwi_med-5 {
		width: 41.6666%;
	}
	.vwi_col.vwi_med-6 {
		width: 50%;
	}
	.vwi_col.vwi_med-7 {
		width: 58.3333%;
	}
	.vwi_col.vwi_med-8{
		width: 66.6666%;
	}
	.vwi_col.vwi_med-9 {
		width: 75%;
	}
	.vwi_col.vwi_med-10{
		width: 83.3333%;
	}
	.vwi_col.vwi_med-11 {
		width: 91.6666%;
	}
	.vwi_col.vwi_med-12{
		width: 100%;
	}
	
	/* percent */
	.vwi_col.vwi_med_pc-1-1 {
		width: 100%;
	}
	.vwi_col.vwi_med_pc-1-2 {
		width: 50%;
	}
	.vwi_col.vwi_med_pc-1-3 {
		width: 33.3333%;
	}
	.vwi_col.vwi_med_pc-1-4 {
		width: 25%;
	}
	.vwi_col.vwi_med_pc-1-5 {
		width: 20%;
	}
	.vwi_col.vwi_med_pc-1-6 {
		width: 16.6666%;
	}
	.vwi_col.vwi_med_pc-1-7 {
		width: 14.2857%;
	}
	.vwi_col.vwi_med_pc-1-8 {
		width: 12.5%;
	}
	.vwi_col.vwi_med_pc-1-9 {
		width: 11.1111%;
	}
	.vwi_col.vwi_med_pc-1-10 {
		width: 10%;
	}
}

@media (min-width: 1024px) {
	.vwi_col.vwi_lrg-1 {
		width: 8.3333%;
	}
	.vwi_col.vwi_lrg-2{
		width: 16.6666%;
	}
	.vwi_col.vwi_lrg-3 {
		width: 25%;
	}
	.vwi_col.vwi_lrg-4 {
		width: 33.3333%;
	}
	.vwi_col.vwi_lrg-5 {
		width: 41.6666%;
	}
	.vwi_col.vwi_lrg-6 {
		width: 50%;
	}
	.vwi_col.vwi_lrg-7 {
		width: 58.3333%;
	}
	.vwi_col.vwi_lrg-8 {
		width: 66.6666%;
	}
	.vwi_col.vwi_lrg-9 {
		width: 75%;
	}
	.vwi_col.vwi_lrg-10 {
		width: 83.3333%;
	}
	.vwi_col.vwi_lrg-11 {
		width: 91.6666%;
	}
	.vwi_col.vwi_lrg-12 {
		width: 100%;
	}
	
	/* percent */
	.vwi_col.vwi_lrg_pc-1-1 {
		width: 100%;
	}
	.vwi_col.vwi_lrg_pc-1-2 {
		width: 50%;
	}
	.vwi_col.vwi_lrg_pc-1-3 {
		width: 33.3333%;
	}
	.vwi_col.vwi_lrg_pc-1-4 {
		width: 25%;
	}
	.vwi_col.vwi_lrg_pc-1-5 {
		width: 20%;
	}
	.vwi_col.vwi_lrg_pc-1-6 {
		width: 16.6666%;
	}
	.vwi_col.vwi_lrg_pc-1-7 {
		width: 14.2857%;
	}
	.vwi_col.vwi_lrg_pc-1-8 {
		width: 12.5%;
	}
	.vwi_col.vwi_lrg_pc-1-9 {
		width: 11.1111%;
	}
	.vwi_col.vwi_lrg_pc-1-10 {
		width: 10%;
	}
}

/* hidden widget
------------------------------ */

/*
	'h-sml' => "PC and tablet",
	'h-med' => "PC and mobile",
	'h-lrg' => "Tablet and mobile",
	'h-med h-lrg' => "Mobile only",
	'h-sml h-lrg' => "Tablet only",
	'h-sml h-med' => "PC only",
	'h-sml h-med h-lrg' => "No device",
*/

@media (max-width: 767px) {
	.vwi_section .vwi_h-sml {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1023px){
	.vwi_section .vwi_h-med  {
		display: none !important;
	}	
}
@media (min-width: 1024px) {
	.vwi_section .vwi_h-lrg {
		display: none !important;
	}
}

/* vertical spacing for columns 

https://coderwall.com/p/0jezca/vertical-spacing-for-bootstrap-columns
https://www.w3schools.com/css/tryit.asp?filename=trycss_sel_attribute_contain
.first[class*="first_"] {
    background: yellow;
}
<div class="first  first_test">The first div element.</div>
------------------------------ */


/*
.vwi_row .vwi_col + .vwi_col {
    margin-top: 15px;
}

@media (max-width: 767px) {
	.row.row-grid [class*="vwi_sml-"] + [class*="vwi_sml-"] {
        margin-top: 0;
    }	
}
@media (min-width: 768px) and (max-width: 1023px){
	.row .vwi_col[class*="vwi_med-"] + .vwi_col[class*="vwi_med-"] {
        margin-top: 0;
    }
}
@media (min-width: 1024px) {
	.row .vwi_col[class*="vwi_lrg-"] + .vwi_col[class*="vwi_lrg-"] {
        margin-top: 0;
    }
}

.row .vwi_col[class*=".vwi_sml-"] + .vwi_col.vwi_sml-12 {
    margin-top: 15px;
}

@media (min-width: 768px) {
    .vwi_row .vwi_col[class*="vwi_med-"] + .vwi_col.vwi_med-12 {
		margin-top: 15px;
	}
}

@media (min-width: 1024px) {
    .vwi_row .vwi_col[class*="vwi_lrg-"] + .vwi_col.vwi_sml-12 {
		margin-top: 15px;
	}
}
*/

/*

La logique tablet peut etre (l'idée etant de faire des cassures justes sur tablet)
	
	small : col12 tout le temps
	
	
	- logique tablet 
		- col >3 sur tablet passe en full
		- analyse les 1 et les 2 concatainer les possibilités sur une ligne
			- je compte le nbre de col dans le block a suivre
				- dès que l'on atteind 3 on créé une ligne
				
				
				A) si a suivre col 3 - 3               	-> 6 - 6
				B) si premiere col  >= 3 				-> 12
				C) si a suivre col 1 - 1 - 1 - 1		-> 3 - 3 - 3 - 3
				D) si a suivre col 1 - 1 - 1			-> 4 - 4 - 4
				E) si a suivre col 2 - 2               	-> 6 - 6
				F) si a suivre col 1 - 2 				-> 4 - 8
				G) si suivant  col 2 - 1 				-> 8 - 4
				
				
				
				
				et ainsi de suite jusquau bout du raw en traitant tous les cas
				
				exception c'est a l'utilsateur de fixer
				
	ex:
	4 - 8 				-> 12 - 12
	8 - 4 				-> 12 - 12
	2 - 8 - 2			-> 12 - 12 - 12
	2 - 2 - 8			-> 6 - 6 - 12
	3 - 3 - 3 - 3 		-> 6 - 6 - 6 - 6
	1 - 2 - 9 			-> 4 - 8 - 12
	2 - 1 - 9 			-> 8 - 4 - 12
	2 - 9 - 1 			-> 12 - 12 - 12
	1 - 1 - 1 - 9 		-> 4 - 4 - 4 - 12
	9 - 1 - 1 - 1 		-> 12 - 4 - 4 - 4
	1 - 1 - 1 - 1 - 6 	-> 4 - 4 - 4 - 12 - 12
	6 - 1 - 1 - 1 - 1 	-> 12 - 3 - 3 - 3 - 3
	



*/

@media (max-width: 767px) {
	.vwi_row .vwi_col + .vwi_col {
		margin-top: 15px;
	}	
}
@media (min-width: 768px) and (max-width: 1023px){
	/*.vwi_row .vwi_col + .vwi_col {
		margin-top: 15px;
	}*/
	.vwi_row .vwi_med-colnotontop {
		margin-top: 15px;
	}
}