/* ---------------------------------
@version Beta v0.1
@date 05.Jun.2016
@author Marcio Camargo
@email marcio@marciocamargo.com.br

* Controla a divisão de colunas do sistema ajustando-se para desktop | tablet | phone

Número de colunas por dispositivo:
	DESKTOP: 12 colunas;
	TABLET: 6 colunas;
	PHONE: 4 colunas;

Limites de dispositivos:
	DESKTOP: Acima de 840px;
	TABLE: Entre 480px e 840px;
	PHONE: Abaixo de 480px;
--------------------------------- */

.col{
	
	display: -webkit-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-flex;
	display: flex;

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

	-webkit-flex-direction: row;
   	flex-direction: row;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	width: 100%;

	 display: -ms-flexbox;
    -ms-flex-pack: center;
    margin-bottom: 10px;

	}

.col-phone-1,
.col-phone-2,
.col-phone-3,
.col-phone-4,
.col-tablet-1,
.col-tablet-2,
.col-tablet-3,
.col-tablet-4,
.col-tablet-5,
.col-tablet-6,
.col-desktop-1,
.col-desktop-2,
.col-desktop-3,
.col-desktop-4,
.col-desktop-5,
.col-desktop-6,
.col-desktop-7,
.col-desktop-8,
.col-desktop-9,
.col-desktop-10,
.col-desktop-11,
.col-desktop-12,
.col-full-1,
.col-full-2,
.col-full-3,
.col-full-4,
.col-full-5,
.col-full-6,
.col-full-7,
.col-full-8,
.col-full-9,
.col-full-10,
.col-full-11,
.col-full-12,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12{
	position: relative;
	-webkit-order: 999;
	order: 999;
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0px 10px 0px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: 1s;
	}

.col-1{ 	width: calc(8.33333% - 20px); }
.col-2{ 	width: calc(16.66666% - 20px); }
.col-3{		width: calc(25% - 20px);	}
.col-4{		width: calc(33.333333% - 20px);	}
.col-5{		width: calc(41.666666% - 20px);	}
.col-6{		width: calc(50% - 20px);	}
.col-7{		width: calc(58.333333% - 20px);	}
.col-8{		width: calc(66.666666% - 20px);	}
.col-9{		width: calc(74.999999% - 20px);	}
.col-10{	width: calc(83.333333% - 20px);	}
.col-11{	width: calc(91.666666% - 20px);	}
.col-12{	width: 100%;	}

.col-order-1{ -webkit-order: 1; order: 1; }
.col-order-2{ -webkit-order: 2; order: 2; }
.col-order-3{ -webkit-order: 3; order: 3; }
.col-order-4{ -webkit-order: 4; order: 4; }
.col-order-5{ -webkit-order: 5; order: 5; }
.col-order-6{ -webkit-order: 6; order: 6; }
.col-order-7{ -webkit-order: 7; order: 7; }
.col-order-8{ -webkit-order: 8; order: 8; }
.col-order-9{ -webkit-order: 9; order: 9; }
.col-order-10{ -webkit-order: 10; order: 10; }
.col-order-11{ -webkit-order: 11; order: 11; }
.col-order-12{ -webkit-order: 12; order: 12; }
.col-order-13{ -webkit-order: 13; order: 13; }
.col-order-14{ -webkit-order: 14; order: 14; }
.col-order-15{ -webkit-order: 15; order: 15; }
.col-order-16{ -webkit-order: 16; order: 16; }


@media (max-width: 480px) {
	.col-phone-1{ 	width: calc(25% - 20px); 	}
	.col-phone-2{	width: calc(50% - 20px);	}
	.col-phone-3{	width: calc(75% - 20px);	}
	.col-phone-4{	width: 100%;	}

	.col-phone-order-1{ -webkit-order: 1; order: 1; }
	.col-phone-order-2{ -webkit-order: 2; order: 2; }
	.col-phone-order-3{ -webkit-order: 3; order: 3; }
	.col-phone-order-4{ -webkit-order: 4; order: 4; }
	.col-phone-order-5{ -webkit-order: 5; order: 5; }
	.col-phone-order-6{ -webkit-order: 6; order: 6; }
	.col-phone-order-7{ -webkit-order: 7; order: 7; }
	.col-phone-order-8{ -webkit-order: 8; order: 8; }
	.col-phone-order-9{ -webkit-order: 9; order: 9; }
	.col-phone-order-10{ -webkit-order: 10; order: 10; }
	.col-phone-order-11{ -webkit-order: 11; order: 11; }
	.col-phone-order-12{ -webkit-order: 12; order: 12; }
	.col-phone-order-13{ -webkit-order: 13; order: 13; }
	.col-phone-order-14{ -webkit-order: 14; order: 14; }
	.col-phone-order-15{ -webkit-order: 15; order: 15; }
	.col-phone-order-16{ -webkit-order: 16; order: 16; }

	.col-phone-hide{ display: none; }

	}

@media (min-width: 481px) and (max-width: 840px) {

	.col-tablet-1{ 	width: calc(16.66666% - 20px); 	}
	.col-tablet-2{	width: calc(33.333333% - 20px);	}
	.col-tablet-3{	width: calc(50% - 20px);		}
	.col-tablet-4{	width: calc(66.666666% - 20px);	}
	.col-tablet-5{	width: calc(83.333333% - 20px);	}
	.col-tablet-6{	width: 100%; }

	.col-tablet-order-1{ -webkit-order: 1; order: 1; }
	.col-tablet-order-2{ -webkit-order: 2; order: 2; }
	.col-tablet-order-3{ -webkit-order: 3; order: 3; }
	.col-tablet-order-4{ -webkit-order: 4; order: 4; }
	.col-tablet-order-5{ -webkit-order: 5; order: 5; }
	.col-tablet-order-6{ -webkit-order: 6; order: 6; }
	.col-tablet-order-7{ -webkit-order: 7; order: 7; }
	.col-tablet-order-8{ -webkit-order: 8; order: 8; }
	.col-tablet-order-9{ -webkit-order: 9; order: 9; }
	.col-tablet-order-10{ -webkit-order: 10; order: 10; }
	.col-tablet-order-11{ -webkit-order: 11; order: 11; }
	.col-tablet-order-12{ -webkit-order: 12; order: 12; }
	.col-tablet-order-13{ -webkit-order: 13; order: 13; }
	.col-tablet-order-14{ -webkit-order: 14; order: 14; }
	.col-tablet-order-15{ -webkit-order: 15; order: 15; }
	.col-tablet-order-16{ -webkit-order: 16; order: 16; }

	.col-tablet-hide{ display: none; }

	}

@media (min-width: 841px) and (max-width: 1370px) {

	.col-desktop-1{ 	width: calc(8.33333% - 20px); }
	.col-desktop-2{ 	width: calc(16.66666% - 20px); }
	.col-desktop-3{		width: calc(25% - 20px);	}
	.col-desktop-4{		width: calc(33.333333% - 20px);	}
	.col-desktop-5{		width: calc(41.666666% - 20px);	}
	.col-desktop-6{		width: calc(50% - 20px);	}
	.col-desktop-7{		width: calc(58.333333% - 20px);	}
	.col-desktop-8{		width: calc(66.666666% - 20px);	}
	.col-desktop-9{		width: calc(74.999999% - 20px);	}
	.col-desktop-10{	width: calc(83.333333% - 20px);	}
	.col-desktop-11{	width: calc(91.666666% - 20px);	}
	.col-desktop-12{	width: 100%;	}

	.col-desktop-order-1{ -webkit-order: 1; order: 1; }
	.col-desktop-order-2{ -webkit-order: 2; order: 2; }
	.col-desktop-order-3{ -webkit-order: 3; order: 3; }
	.col-desktop-order-4{ -webkit-order: 4; order: 4; }
	.col-desktop-order-5{ -webkit-order: 5; order: 5; }
	.col-desktop-order-6{ -webkit-order: 6; order: 6; }
	.col-desktop-order-7{ -webkit-order: 7; order: 7; }
	.col-desktop-order-8{ -webkit-order: 8; order: 8; }
	.col-desktop-order-9{ -webkit-order: 9; order: 9; }
	.col-desktop-order-10{ -webkit-order: 10; order: 10; }
	.col-desktop-order-11{ -webkit-order: 11; order: 11; }
	.col-desktop-order-12{ -webkit-order: 12; order: 12; }
	.col-desktop-order-13{ -webkit-order: 13; order: 13; }
	.col-desktop-order-14{ -webkit-order: 14; order: 14; }
	.col-desktop-order-15{ -webkit-order: 15; order: 15; }
	.col-desktop-order-16{ -webkit-order: 16; order: 16; }

	.col-desktop-hide{ display: none; }

	}

@media (min-width: 1371px){

	.col-full-1{ 	width: calc(8.33333% - 20px); }
	.col-full-2{ 	width: calc(16.66666% - 20px); }
	.col-full-3{	width: calc(25% - 20px);	}
	.col-full-4{	width: calc(33.333333% - 20px);	}
	.col-full-5{	width: calc(41.666666% - 20px);	}
	.col-full-6{	width: calc(50% - 20px);	}
	.col-full-7{	width: calc(58.333333% - 20px);	}
	.col-full-8{	width: calc(66.666666% - 20px);	}
	.col-full-9{	width: calc(74.999999% - 20px);	}
	.col-full-10{	width: calc(83.333333% - 20px);	}
	.col-full-11{	width: calc(91.666666% - 20px);	}
	.col-full-12{	width: 100%;	}

	.col-full-order-1{ -webkit-order: 1; order: 1; }
	.col-full-order-2{ -webkit-order: 2; order: 2; }
	.col-full-order-3{ -webkit-order: 3; order: 3; }
	.col-full-order-4{ -webkit-order: 4; order: 4; }
	.col-full-order-5{ -webkit-order: 5; order: 5; }
	.col-full-order-6{ -webkit-order: 6; order: 6; }
	.col-full-order-7{ -webkit-order: 7; order: 7; }
	.col-full-order-8{ -webkit-order: 8; order: 8; }
	.col-full-order-9{ -webkit-order: 9; order: 9; }
	.col-full-order-10{ -webkit-order: 10; order: 10; }
	.col-full-order-11{ -webkit-order: 11; order: 11; }
	.col-full-order-12{ -webkit-order: 12; order: 12; }
	.col-full-order-13{ -webkit-order: 13; order: 13; }
	.col-full-order-14{ -webkit-order: 14; order: 14; }
	.col-full-order-15{ -webkit-order: 15; order: 15; }
	.col-full-order-16{ -webkit-order: 16; order: 16; }

	.col-full-hide{ display: none; }

	}