/* 
	Css Responsive Framework. 
	Created by André Inocenti and Thiago Oliveira (Schizo; Tosco;)

	Usage:
*/
@charset "utf-8";
:root{
	/* sizes */
	--max-width: 1200px;

	/* colors */
	--dark_color: #000;
	--regular_color: #333;
	--light_color: #727272;
	--lighter_color: #999999;

	--border-color: #ddd;

	--text-color: #333;

	--link: #0065b3;
	--action: #eb6231;
	--highlight: #bf064d;
	--warning: #eb3131;


	/* font sizes */
	--size-huge: 2rem;
	--size-bigger: 1.2rem;
	--size-big: 1.1rem;
	--size-normal: 1rem;
	--size-small: .9rem;
	--size-smaller: .8rem;
}


*{
	font-family: Arial, sans-serif;
	box-sizing: border-box;
}


body{
	color: var(--text-color)	
}

p{ margin: 0 0 20px 0;}

/* Content Wrapper for maximum content size */
.content-wrapper{ max-width: var(--max-width); margin: 0 auto; }



/* TITLES */
.title{
	display: block;
	font-weight: 500;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.subtitle{
	display: block;
	font-weight: 500;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
	.subtitle span{ font-weight: 300;}


/* Links */
.content-wrapper a, .link{
	color: var(--link);
	text-decoration: none;
}
	.content-wrapper a:hover, .link:hover{ text-decoration: underline; }
	.content-wrapper a.no-hover, .link.no-hover{ text-decoration: none; }




/* FONTS */
.light{ font-weight: 300; }
.normal{ font-weight: 400; }
.bold{ font-weight: 500; }

.f-dark{ color: var(--dark_color); }
.f-dark svg.ico *{ fill: var(--dark_color); }
.f-light{ color: var(--light_color); }
.f-light svg.ico *{ fill: var(--light_color); }
.f-regular{ color: var(--text-color); }
.f-regular svg.ico *{ fill: var(--text-color); }
.f-lighter{ color: var(--lighter_color); }
.f-lighter svg.ico *{ fill: var(--lighter_color); }

.text-center, .center{ text-align: center !important; justify-content: center; }
.text-right{ text-align: right !important; }
.text-left{ text-align: left !important; }

.font-huge{ font-size: var(--size-huge); }
.font-bigger{ font-size: var(--size-bigger); }
.font-big{ font-size: var(--size-big); }
.font-normal{ font-size: var(--size-normal); }
.font-small{ font-size: var(--size-small); }
.font-smaller{ font-size: var(--size-smaller); }

/* BUTTONS  */
/*
btn-action - para botões que são a ação primaria
btn-highlight - botão de destaque ou de ação que não é a ação principal
btn-link - para links
btn-info - botão informativo / que abrem mensagens
btn-danger - ações que precisam de atenção. ex: delete
 */

button{
	background: transparent;
	cursor: pointer;
}

.btn{
	display: inline-block;
	height: 2.2rem;
	line-height: 2.2rem;
	position: relative;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	font-size: .85rem;
	letter-spacing: .1px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn.small{
	height: 22px;
	line-height: 22px;
	text-transform: none;
	font-weight: 400;
}
	.btn.small .desc{
		letter-spacing: 1px;
		font-size: .9rem;
	}

.btn.big{
	height: 34px;
	line-height: 34px;
}
	.btn.big .desc{
		letter-spacing: 1px;
		font-size: .85rem;
	}


.btn > .text{ font-size: .85rem; }


.btn-default{
	background: #ededed;
	background: -moz-linear-gradient(left, #ededed 0%, #d9d9d9 100%);
	background: -webkit-linear-gradient(left, #ededed 0%,#d9d9d9 100%);
	background: linear-gradient(to right, #ededed 0%,#d9d9d9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#d9d9d9',GradientType=1 );
}

.btn-default:hover{
	background: #d9d9d9;
	background: -moz-linear-gradient(left, #d9d9d9 0%, #ccc 100%);
	background: -webkit-linear-gradient(left, #d9d9d9 0%,#ccc 100%);
	background: linear-gradient(to right, #d9d9d9 0%,#bfbfbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9d9d9', endColorstr='#ccc',GradientType=1 );
}

.btn-default-o{
	border: 1px solid var(--lighter_color);
	color: var(--lighter_color);
	background: transparent;
}

.btn-default-o:hover{border-color: var(--light_color); color: var(--light_color);}


.btn-action{
	color: #fff;
	background: #de4b58;
	background: -moz-linear-gradient(left, #ec8433 0%, #de4b58 100%);
	background: -webkit-linear-gradient(left, #ec8433 0%,#de4b58 100%);
	background: linear-gradient(to right, #ec8433 0%,#de4b58 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec8433', endColorstr='#de4b58',GradientType=1 );
}
.btn-action:hover, .btn-action-o:hover, .btn-action-o.active{
	color: #fff;
	background: #c4434e;
	background: -moz-linear-gradient(left, #de7c31 0%, #c4434e 100%);
	background: -webkit-linear-gradient(left, #de7c31 0%,#c4434e 100%);
	background: linear-gradient(to right, #de7c31 0%,#c4434e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4762f', endColorstr='#c4434e',GradientType=1 );
}
.btn-action-o, .btn-action-o.active:hover{ border: 2px solid #f1755f; color: #f1755f; background: transparent; }

.btn-default-action{
	border: 1px solid var(--lighter_color);
	color: var(--lighter_color);
	background: transparent;
}
.btn-default-action:hover{ border: 1px solid var(--action); color: var(--action); }
.btn-default-action.active{
	color: #fff;
	background: #c4434e;
	background: -moz-linear-gradient(left, #de7c31 0%, #c4434e 100%);
	background: -webkit-linear-gradient(left, #de7c31 0%,#c4434e 100%);
	background: linear-gradient(to right, #de7c31 0%,#c4434e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4762f', endColorstr='#c4434e',GradientType=1 );
}


.btn-info{
	color: #4f4f4f;
    background: #a9b3c7;
	background: -moz-linear-gradient(left, #e4e9f2 0%, #ccd8f0 100%);
	background: -webkit-linear-gradient(left, #e4e9f2 0%,#ccd8f0 100%);
	background: linear-gradient(to right, #e4e9f2 0%,#d7dff0 100%);
    cursor: pointer;
}
.btn-info:hover, .btn-info-o:hover{
	color: #fff;
    background: #a9b3c7;
	background: -moz-linear-gradient(left, #dde2eb 0%, #bfcae0 100%);
	background: -webkit-linear-gradient(left, #dde2eb 0%,#bfcae0 100%);
	background: linear-gradient(to right, #dde2eb 0%,#bfcae0 100%);
    cursor: pointer;
}
.btn-info-o{border: 2px solid #d7dff0; color: #c1c8d6; background: transparent;}


.btn-link{
	color:#fff;
    background: #0065b3;
	background: -moz-linear-gradient(left, #00a6de 0%, #0065b3 100%);
	background: -webkit-linear-gradient(left, #00a6de 0%,#0065b3 100%);
	background: linear-gradient(to right, #00a6de 0%,#0065b3 100%);
    cursor: pointer;
}
.btn-link:hover, .btn-link-o:hover{
	background: #005699;
	color: #fff;
	background: -moz-linear-gradient(left, #0092c4 0%, #005699 100%);
	background: -webkit-linear-gradient(left, #0092c4 0%,#005699 100%);
	background: linear-gradient(to right, #0092c4 0%,#005699 100%);
}

.btn-link-o, .btn-link-o{ border: 2px solid #0065b3; color: #0065b3;  background: transparent;}

.btn-danger{
	color: #fff !important;
    background: #b60606;
	background: -moz-linear-gradient(left, #f35959 0%, #b60606 100%);
	background: -webkit-linear-gradient(left, #f35959 0%,#b60606 100%);
	background: linear-gradient(to right, #f35959 0%,#b60606 100%);
}
.btn-danger:hover{
	color: #fff !important;
    background: #9c0505;
	background: -moz-linear-gradient(left, #d95050 0%, #9c0505 100%);
	background: -webkit-linear-gradient(left, #d95050 0%,#9c0505 100%);
	background: linear-gradient(to right, #d95050 0%,#9c0505 100%);
}
.btn-danger-o, .btn-danger-o{ border: 2px solid #b60606; color: #b60606; }

.btn-highlight{
	color:#fff !important;
    background: #bf064d;
	background: -moz-linear-gradient(left, #fc7eaf 0%, #bf064d 100%);
	background: -webkit-linear-gradient(left, #fc7eaf 0%,#bf064d 100%);
	background: linear-gradient(to right, #fc7eaf 0%,#bf064d 100%);
    cursor: pointer;
}
.btn-highlight:hover, .btn-highlight-o:hover{
	color: #fff;
    background: #a60543;
	background: -moz-linear-gradient(left, #e7739f 0%, #a60543 100%);
	background: -webkit-linear-gradient(left, #e7739f 0%,#a60543 100%);
	background: linear-gradient(to right, #e7739f 0%,#a60543 100%);
}


.btn-highlight-o{
	border: 2px solid #e7739f;
	color: #e7739f;
}



/* Table */
.table {
    width: 100%;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
}

.table, .table th,  .tabletd {border: none; }

.table thead { color: rgba(0,0,0,0.6); }
.table tr { border-bottom: 1px solid rgba(0,0,0,0.12); }

.table td, .table th{
    padding: 15px 10px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
}

/* Table striped */
.table.striped > tbody > tr > td{ border-radius: 0; }
.table.striped > tbody > tr:nth-child(odd) { background-color: rgba(242,242,242,0.5); }

.table.striped tr { border-bottom: none; }


/* SVG - Feather Ico and SVG Icos */
.feather, svg.ico, .svg, .svg.medium{ width: 20px; height: 20px; }
.feather.mini, svg.ico.mini, .svg.mini, .svg.small{ width: 17px; height: 17px; }
.feather.big, svg.ico.big, .svg.big{ width: 25px; height: 25px; }

	.svg svg{ display: block; }
	.svg.white *{ fill: #fff;}
	.svg *{
		width: 100%;
		height: 100%;
		fill: currentcolor;
	}

.link.ico, .link.ico *{ fill: #727272; }
.link.ico:hover, .link.ico:hover *{ fill: var(--text-color); }



/*SUBMENUs*/
.with-sub-menu{ position: relative; }

.sub-menu{
	position: absolute;
	display: none;
	background-color: #fff;
	min-width:200px;
	box-shadow:0 0px 3px rgba(0,0,0,0.3);
	top:30px;
	z-index: 100;
	right: 0;
	padding: 5px 0;
	border:1px solid #d7d7d7;
	border-radius: 3px;
}

.sub-menu.active{ display: block; }

	.sub-menu > li, .sub-menu > .item,
	.sub-menu a, 
	.sub-menu .link{
		display: block;
		width:100%;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		margin: 0;
		text-align: left;
		text-decoration: none;
		color: var(--text-color);
		white-space: nowrap;
	}	
		.sub-menu a .fa, .sub-menu .link .fa{
			margin-right: 5px;
		}

	.sub-menu a:hover, .sub-menu .item:hover, .sub-menu .link:hover{ background-color: #d7d7d7; }

/* fix css to submenu inside .btn */
.btn .sub-menu{ top: 30px; }
	.btn .sub-menu > li, .sub-menu > .item{
		text-transform: none;		
		font-weight: normal;
	}



/* IMAGES */
	picture img{ width: 100%; display: block; }

	picture .menu-options{ top: 5px; right: 5px; }
	picture .menu-options .options-action{width: 26px; height: 20px; line-height: 20px;}

	picture.portrait, picture.landscape,
	picture.wide, picture.square{
		display:flex; background: #333; align-items: center; justify-content: center; position: relative;
	}
	picture.full{ align-items: flex-start; }
	picture.portrait:before, picture.landscape:before,
	picture.wide:before, picture.square:before{
		float: left;
		content: '';
		width: 0;
		height: 0;
	}

	picture.landscape:before{ padding-top: 66.66%; } /* proporção: 3:2 */
	picture.portrait:before{ padding-top: 150%; } /* proporção: 2:3 */
	picture.wide:before{ padding-top: 50%; } /* proporção: 2:1 */
	picture.square:before{ padding-top: 100%; } /* proporção: 1:1 */

	picture.portrait:after, picture.landscape:after,
	picture.wide:after, picture.square:after{
		content:'';
		display: table;
		clear: both;
	}
	
	picture.thumb, picture.thumb img{ max-width: 75px; }
	picture.small, picture.small img{ max-width: 165px;}
	picture.medium, picture.medium img{ max-width: 380px;}
	picture.large, picture.large img{ max-width: 700px;}


/* IMAGES LIST */

.images-list{
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	margin: 0 -10px;
}

	.images-list .img{
		margin: 0 10px 20px;
		border-radius: 6px;
	}
	.images-list img{border-radius: 6px;}

		.images-list .img:hover{
			opacity: .8;
			cursor: pointer;
		}

		
/* Spacer */
.spacer{ margin: 0 -10px; }
	.spacer > .item{ margin: 0 10px 20px;}

/* Margins / Paddings */
.m-auto{ margin: 0 auto; }

.no-margin{ margin:0; }

.m-t-0{ margin-top: 0px !important; }
.m-t-5{ margin-top: 5px !important; }
.m-t-10{ margin-top: 10px !important; }
.m-t-15{ margin-top: 15px !important; }
.m-t-20{ margin-top: 20px !important; }
.m-t-30{ margin-top: 30px !important; }
.m-t-40{ margin-top: 40px !important; }
.m-t-50{ margin-top: 50px !important; }

.m-b-0{ margin-bottom: 0px !important; }
.m-b-5{ margin-bottom: 5px !important; }
.m-b-10{ margin-bottom: 10px !important; }
.m-b-15{ margin-bottom: 15px !important; }
.m-b-20{ margin-bottom: 20px !important; }
.m-b-30{ margin-bottom: 30px !important; }
.m-b-40{ margin-bottom: 40px !important; }
.m-b-50{ margin-bottom: 50px !important; }

.m-l-0{ margin-left: 0px !important; }
.m-l-5{ margin-left: 5px !important; }
.m-l-10{ margin-left: 10px !important; }
.m-l-15{ margin-left: 15px !important; }
.m-l-20{ margin-left: 20px !important; }
.m-l-30{ margin-left: 30px !important; }
.m-l-40{ margin-left: 40px !important; }
.m-l-50{ margin-left: 50px !important; }

.m-r-0{ margin-right: 0px !important; }
.m-r-5{ margin-right: 5px !important; }
.m-r-10{ margin-right: 10px !important; }
.m-r-15{ margin-right: 15px !important; }
.m-r-20{ margin-right: 20px !important; }
.m-r-30{ margin-right: 30px !important; }
.m-r-40{ margin-right: 40px !important; }
.m-r-50{ margin-right: 50px !important; }


.no-padding{ padding: 0 !important; }

.p-t-0{ padding-top: 0px !important; }
.p-t-5{ padding-top: 5px !important; }
.p-t-10{ padding-top: 10px !important; }
.p-t-15{ padding-top: 15px !important; }
.p-t-20{ padding-top: 20px !important; }
.p-t-30{ padding-top: 30px !important; }
.p-t-40{ padding-top: 40px !important; }
.p-t-50{ padding-top: 50px !important; }

.p-b-0{ padding-bottom: 0px !important; }
.p-b-5{ padding-bottom: 5px !important; }
.p-b-10{ padding-bottom: 10px !important; }
.p-b-15{ padding-bottom: 15px !important; }
.p-b-20{ padding-bottom: 20px !important; }
.p-b-30{ padding-bottom: 30px !important; }
.p-b-40{ padding-bottom: 40px !important; }
.p-b-50{ padding-bottom: 50px !important; }

.p-l-0{ padding-left: 0px !important; }
.p-l-5{ padding-left: 5px !important; }
.p-l-10{ padding-left: 10px !important; }
.p-l-15{ padding-left: 15px !important; }
.p-l-20{ padding-left: 20px !important; }
.p-l-30{ padding-left: 30px !important; }
.p-l-40{ padding-left: 40px !important; }
.p-l-50{ padding-left: 50px !important; }

.p-r-0{ padding-right: 0px !important; }
.p-r-5{ padding-right: 5px !important; }
.p-r-10{ padding-right: 10px !important; }
.p-r-15{ padding-right: 15px !important; }
.p-r-20{ padding-right: 20px !important; }
.p-r-30{ padding-right: 30px !important; }
.p-r-40{ padding-right: 40px !important; }
.p-r-50{ padding-right: 50px !important; }

.p0{ padding: 0px !important; }
.p10{ padding: 10px !important; }
.p15{ padding: 15px !important; }
.p20{ padding: 20px !important; }
.p30{ padding: 30px !important; }
.p40{ padding: 40px !important; }
.p50{ padding: 50px !important; }


/* Borders */
.border-t{ border-top: 1px solid var(--border-color); }
.border-b{ border-bottom: 1px solid var(--border-color); }
.border-l{ border-left: 1px solid var(--border-color); }
.border-r{ border-right: 1px solid var(--border-color); }

/* Lists */
.marker ul, .marker, .list-noMarker{ margin-bottom: 1em; }
.marker li{
    list-style: disc;
    margin-left: 15px;
    margin-bottom: 0.3em;
}


/* LOADING */

.wrap-loading{
	width: 100%;
	max-width: 800px;
}

.loading{
	display: block;
	width: 100%;
	min-height: 100px;
	background: url(/img/loading.svg) no-repeat center center;
}
.loading.white{ background: url(/img/loading-white.svg) no-repeat center center; }

.loading.small{
	background-size: 40px;
	min-height: 35px;
}

.loading.mini{
	background-size: 30px;
	min-height: 25px;
}

.loading.has-text{ color: transparent !important; }

.loading.svg svg{ display: none; }
.loading.fa{ display:block; color: transparent; }


/* PAGINATION */

.pagination{
    display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

    .pagination-links{
        display: flex;
    }

        .pagination-links .link{
            margin: 0 2px;
        }

            .pagination-links .link{
                cursor: pointer;
                padding: 0 5px;
                color: #000;
            }

            .pagination-links .link:not(.inactive):hover, .pagination-links .link.active{
                background-color: #f3f4f2;
            }

            .pagination-links .link.inactive{
                opacity: .4;
			}

	.pagination .desc{
		display: block;
		width: 100%;
		text-align: right;
		margin-top: .5em;
	}

	.pagination_plus_results{
		display: inline-block;
		padding: 10px 20px;
		font-weight: 500;
		text-align: center;
		cursor: pointer;
	}

		.pagination_plus_results:hover{text-decoration: underline;}

.pagination-next{
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-top: 1px solid #ddd;
	font-weight: 500;
	cursor: pointer;
}

.pagination-next:hover{
	border-color:#c4c4c4;
	color: #000;
}

/* IFRAME */
.wrap-iframe{
	width: 100%;
	background: url(/img/loading.gif) no-repeat center center;
}
.wrap-iframe.loaded { background:unset; }
	.wrap-iframe iframe{ background: transparent; opacity: 0; transition: opacity .3s ease-in-out, height .2s ease-in-out;}
	.wrap-iframe.loaded iframe{ background: #fff; opacity: 1;}
	.wrap-iframe.loaded iframe.transparent{ background: transparent; }

.iframe-inpage{
	width: 100%;
	overflow: hidden;
	min-height: 350px;
}

.iframe-modal{
	width:1000px;
	height:500px;
}



/* GERAL */

address{ font-style: normal; }

.no-shadowbox, .no-shadowbox *{ box-shadow: none !important;}

.color-white{color:#fff;}

.pointer{ cursor: pointer; }

.hide, .hidden { display: none !important; }
.opacity0 { opacity: 0 !important; }
.block{ display: block; }
.inblock, .inline-block{ display: inline-block; }

.disabled{
	opacity: .5;
}


.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radius{ border-radius: 6px; }

.stroke{
	text-shadow: 2px 0 0 rgba(0,0,0,0.7), -2px 0 0 rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.7), 0 -2px 0 rgba(0,0,0,0.7), 1px 1px rgba(0,0,0,0.7), -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7), -1px 1px 0 rgba(0,0,0,0.7), 0px 0px 8px rgba(0,0,0,1);
	-webkit-text-shadow: 2px 0 0 rgba(0,0,0,0.7), -2px 0 0 rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.7), 0 -2px 0 rgba(0,0,0,0.7), 1px 1px rgba(0,0,0,0.7), -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7), -1px 1px 0 rgba(0,0,0,0.7), 0px 0px 8px rgba(0,0,0,1);
	-moz-text-shadow: 2px 0 0 rgba(0,0,0,0.7), -2px 0 0 rgba(0,0,0,0.7), 0 2px 0 rgba(0,0,0,0.7), 0 -2px 0 rgba(0,0,0,0.7), 1px 1px rgba(0,0,0,0.7), -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7), -1px 1px 0 rgba(0,0,0,0.7), 0px 0px 8px rgba(0,0,0,1);
}

.action-text{
	display: block;
	text-align: center;
	font-weight: 500;

}

.transparent{background: transparent;}

.no-breakline{white-space: nowrap;}

.w100{ width: 100%; }
.h100{ height: 100%; position: relative ;}


/*
	NOVO GRID EM DISCUSSAO

	** grids**
	Smartphone até 540px;
	Tablets Pesquenos de 541px até 810px;
	Tablets Médios de 811px até 1080px;
	Pcs e Tablets GRANDES de 1081 ao infinito;
	Conteúdo do Site maximo até 1200px;

*/

/*
Grid - Template

Como usar

Classes de grid tem o seguinte padrão:
    .g<group>-<columns>
Onde:
    group: é o grupo de faixa de resolução
    columns: define em qunatas partes o elemento deve ser dividido
Ex.:
    .g0-4 = divisão de 4 colunas para Smartphones
    .gD-6 = divisão de 6 colunas independe do tamanho do dispositivo

Classes de coluna tem o seguinte padrão:
    .c<group>-<columns>
    Onde:
        group: é o grupo de faixa de resolução
        columns: define quantas colunas o lemento deve ocupar
    Ex.:
        .c0-4 = ocupar 4 colunas para Smartphones
        .cD-6 = ocupar 6 colunas independe do tamanho do dispositivo
*/

.grid > .field-wrap {margin: 0;}

.pD-0  {padding-left:  0px; padding-right:  0px;}
.pD-10 {padding-left: 10px; padding-right: 10px;}
.pD-20 {padding-left: 20px; padding-right: 20px;}

[class*="gD-"], [class*="g0-"], [class*="g1-"], [class*="g2-"], [class*="g3-"], [class*="g4-"] {display: grid;}
[class*="gD-"] > *, [class*="g0-"] > *, [class*="g1-"] > *, [class*="g2-"] > *, [class*="g3-"] > *, [class*="g4-"] > * {grid-column-end: span 1;}

/* Classes gD e cD são classes "default" de grid independetes de "@media query" */

.gD-1  {grid-template-columns: repeat( 1, 1fr);}
.gD-2  {grid-template-columns: repeat( 2, 1fr);}
.gD-3  {grid-template-columns: repeat( 3, 1fr);}
.gD-4  {grid-template-columns: repeat( 4, 1fr);}
.gD-5  {grid-template-columns: repeat( 5, 1fr);}
.gD-6  {grid-template-columns: repeat( 6, 1fr);}
.gD-8  {grid-template-columns: repeat( 8, 1fr);}
.gD-9  {grid-template-columns: repeat( 9, 1fr);}
.gD-10 {grid-template-columns: repeat(10, 1fr);}
.gD-12 {grid-template-columns: repeat(12, 1fr);}

.cD-1  {grid-column-end: span  1;}
.cD-2  {grid-column-end: span  2;}
.cD-3  {grid-column-end: span  3;}
.cD-4  {grid-column-end: span  4;}
.cD-5  {grid-column-end: span  5;}
.cD-6  {grid-column-end: span  6;}
.cD-7  {grid-column-end: span  7;}
.cD-8  {grid-column-end: span  8;}
.cD-9  {grid-column-end: span  9;}
.cD-10 {grid-column-end: span 10;}
.cD-11 {grid-column-end: span 11;}
.cD-12 {grid-column-end: span 12;}

.cD-full { grid-column: 1 / -1;}

@media (max-width: 540px) {
    /* g0 e c0 - Smartphones */
    .p0-0  {padding-left:  0px; padding-right:  0px;}
    .p0-10 {padding-left: 10px; padding-right: 10px;}
    .p0-20 {padding-left: 20px; padding-right: 20px;}

    .g0-1  {grid-template-columns: repeat( 1, 1fr);}
    .g0-2  {grid-template-columns: repeat( 2, 1fr);}
    .g0-3  {grid-template-columns: repeat( 3, 1fr);}
    .g0-4  {grid-template-columns: repeat( 4, 1fr);}
    .g0-5  {grid-template-columns: repeat( 5, 1fr);}
    .g0-6  {grid-template-columns: repeat( 6, 1fr);}
    .g0-8  {grid-template-columns: repeat( 8, 1fr);}
	.g0-9  {grid-template-columns: repeat( 9, 1fr);}
    .g0-10 {grid-template-columns: repeat(10, 1fr);}
    .g0-12 {grid-template-columns: repeat(12, 1fr);}

    .c0-1  {grid-column-end: span  1;}
    .c0-2  {grid-column-end: span  2;}
    .c0-3  {grid-column-end: span  3;}
    .c0-4  {grid-column-end: span  4;}
    .c0-5  {grid-column-end: span  5;}
    .c0-6  {grid-column-end: span  6;}
    .c0-7  {grid-column-end: span  7;}
    .c0-8  {grid-column-end: span  8;}
    .c0-9  {grid-column-end: span  9;}
    .c0-10 {grid-column-end: span 10;}
    .c0-11 {grid-column-end: span 11;}
    .c0-12 {grid-column-end: span 12;}

    .c0-full { grid-column: 1 / -1;}
}

@media (min-width: 541px) and (max-width: 810px) {
    /* g1 e c1 - Smal Tablets */
    .p1-0  {padding-left:  0px; padding-right:  0px;}
    .p1-10 {padding-left: 10px; padding-right: 10px;}
    .p1-20 {padding-left: 20px; padding-right: 20px;}

    .g1-1  {grid-template-columns: repeat( 1, 1fr);}
    .g1-2  {grid-template-columns: repeat( 2, 1fr);}
    .g1-3  {grid-template-columns: repeat( 3, 1fr);}
    .g1-4  {grid-template-columns: repeat( 4, 1fr);}
    .g1-5  {grid-template-columns: repeat( 5, 1fr);}
    .g1-6  {grid-template-columns: repeat( 6, 1fr);}
    .g1-8  {grid-template-columns: repeat( 8, 1fr);}
	.g1-9  {grid-template-columns: repeat( 9, 1fr);}
    .g1-10 {grid-template-columns: repeat(10, 1fr);}
    .g1-12 {grid-template-columns: repeat(12, 1fr);}

    .c1-1  {grid-column-end: span  1;}
    .c1-2  {grid-column-end: span  2;}
    .c1-3  {grid-column-end: span  3;}
    .c1-4  {grid-column-end: span  4;}
    .c1-5  {grid-column-end: span  5;}
    .c1-6  {grid-column-end: span  6;}
    .c1-7  {grid-column-end: span  7;}
    .c1-8  {grid-column-end: span  8;}
    .c1-9  {grid-column-end: span  9;}
    .c1-10 {grid-column-end: span 10;}
    .c1-11 {grid-column-end: span 11;}
    .c1-12 {grid-column-end: span 12;}

    .c1-full { grid-column: 1 / -1;}
}

@media (min-width: 811px) and (max-width: 1080px) {
    /* g2 e c2 - Large Tablets */
    .p2-0  {padding-left:  0px; padding-right:  0px;}
    .p2-10 {padding-left: 10px; padding-right: 10px;}
    .p2-20 {padding-left: 20px; padding-right: 20px;}

    .g2-1  {grid-template-columns: repeat( 1, 1fr);}
    .g2-2  {grid-template-columns: repeat( 2, 1fr);}
    .g2-3  {grid-template-columns: repeat( 3, 1fr);}
    .g2-4  {grid-template-columns: repeat( 4, 1fr);}
    .g2-5  {grid-template-columns: repeat( 5, 1fr);}
    .g2-6  {grid-template-columns: repeat( 6, 1fr);}
    .g2-8  {grid-template-columns: repeat( 8, 1fr);}
	.g2-9  {grid-template-columns: repeat( 9, 1fr);}
    .g2-10 {grid-template-columns: repeat(10, 1fr);}
    .g2-12 {grid-template-columns: repeat(12, 1fr);}

    .c2-1  {grid-column-end: span  1;}
    .c2-2  {grid-column-end: span  2;}
    .c2-3  {grid-column-end: span  3;}
    .c2-4  {grid-column-end: span  4;}
    .c2-5  {grid-column-end: span  5;}
    .c2-6  {grid-column-end: span  6;}
    .c2-7  {grid-column-end: span  7;}
    .c2-8  {grid-column-end: span  8;}
    .c2-9  {grid-column-end: span  9;}
    .c2-10 {grid-column-end: span 10;}
    .c2-11 {grid-column-end: span 11;}
    .c2-12 {grid-column-end: span 12;}

    .c2-full { grid-column: 1 / -1;}
}

@media (min-width: 1081px) {
    /* g3 e c3 - Desktop */
    .p3-0  {padding-left:  0px; padding-right:  0px;}
    .p3-10 {padding-left: 10px; padding-right: 10px;}
    .p3-20 {padding-left: 20px; padding-right: 20px;}

    .g3-1  {grid-template-columns: repeat( 1, 1fr);}
    .g3-2  {grid-template-columns: repeat( 2, 1fr);}
    .g3-3  {grid-template-columns: repeat( 3, 1fr);}
    .g3-4  {grid-template-columns: repeat( 4, 1fr);}
    .g3-5  {grid-template-columns: repeat( 5, 1fr);}
    .g3-6  {grid-template-columns: repeat( 6, 1fr);}
    .g3-8  {grid-template-columns: repeat( 8, 1fr);}
	.g3-9  {grid-template-columns: repeat( 9, 1fr);}
    .g3-10 {grid-template-columns: repeat(10, 1fr);}
    .g3-12 {grid-template-columns: repeat(12, 1fr);}

    .c3-1  {grid-column-end: span  1;}
    .c3-2  {grid-column-end: span  2;}
    .c3-3  {grid-column-end: span  3;}
    .c3-4  {grid-column-end: span  4;}
    .c3-5  {grid-column-end: span  5;}
    .c3-6  {grid-column-end: span  6;}
    .c3-7  {grid-column-end: span  7;}
    .c3-8  {grid-column-end: span  8;}
    .c3-9  {grid-column-end: span  9;}
    .c3-10 {grid-column-end: span 10;}
    .c3-11 {grid-column-end: span 11;}
    .c3-12 {grid-column-end: span 12;}

    .c3-full { grid-column: 1 / -1;}
}


/* gaps */
.gap10{ grid-gap: 10px; }
.gap15{ grid-gap: 15px; }
.gap20{ grid-gap: 20px; }
.gap30{ grid-gap: 30px; }
.gap40{ grid-gap: 40px; }
.gap50{ grid-gap: 50px; }
.gap60{ grid-gap: 60px; }
.gap70{ grid-gap: 70px; }

.gap-r-10{ grid-row-gap: 10px; }
.gap-r-15{ grid-row-gap: 15px; }
.gap-r-20{ grid-row-gap: 20px; }
.gap-r-30{ grid-row-gap: 30px; }
.gap-r-40{ grid-row-gap: 40px; }
.gap-r-50{ grid-row-gap: 50px; }
.gap-r-60{ grid-row-gap: 60px; }
.gap-r-70{ grid-row-gap: 70px; }

.gap-c-10{ grid-column-gap: 10px; }
.gap-c-15{ grid-column-gap: 15px; }
.gap-c-20{ grid-column-gap: 20px; }
.gap-c-30{ grid-column-gap: 30px; }
.gap-c-40{ grid-column-gap: 40px; }
.gap-c-50{ grid-column-gap: 50px; }
.gap-c-60{ grid-column-gap: 60px; }
.gap-c-70{ grid-column-gap: 70px; }


.grid-form {
    align-items: flex-start;
}

.grid-form .field-wrap {
    margin: 0px;
}

/* aligns */
.grid-between{ justify-content: space-between; }
.grid-space-around{ justify-content: space-around; }
.grid-evenly{ justify-content: space-evenly; }

.grid-v-center{ align-items: center; }
.grid-v-start{ align-items: start; }
.grid-v-end{ align-items: end; }

.grid-h-center{ justify-content: center; }
.grid-h-start{ justify-content: start; }
.grid-h-end{ justify-content: end; }


/* Flex Grid */
/* Responsive Grid System: Start */
.flex-grid{
	display: flex;
	flex-wrap: wrap;
}

.flex-grid > * { flex-grow: 1; }

/* For grids that doesn't change through screens */
/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
/*     |     |     |     |     |     | 7:8 /       */
/*     |     |     |     |     | 5:6 |     /       */
/*     |     |     |     | 4:5 |     |     /  8:10 */
/*     |     |     | 3:4 |     |     | 6:8 /       */
/*     |     |     | 3:4 |     |     |     /  7:10 */
/*     |     | 2:3 |     |     | 4:6 |     /       */
/*     |     |     |     |     |     | 5:8 /       */
/*     |     |     |     | 3:5 |     |     /  6:10 */
/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
/*     |     |     |     | 2:5 |     |     /  4:10 */
/*     |     |     |     |     |     | 3:8 /       */
/*     |     | 1:3 |     |     | 2:6 |     /       */
/*     |     |     |     |     |     |     /  3:10 */
/*     |     |     | 1:4 |     |     | 2:8 /       */
/*     |     |     |     | 1:5 |     |     /  2:10 */
/*     |     |     |     |     | 1:6 |     /       */
/*     |     |     |     |     |     | 1:8 /       */
/*     |     |     |     |     |     |     /  1:10 */

.f-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
.f-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
.f-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
.f-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
.f-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
.f-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
.f-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
.f-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
.f-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
.f-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
.f-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
.f-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
.f-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
.f-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
.f-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
.f-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
.f-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
.f-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
.f-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
.f-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */



@media (max-width: 540px) {
	.f0-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f0-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f0-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f0-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f0-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f0-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f0-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f0-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f0-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f0-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f0-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f0-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f0-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f0-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f0-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f0-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f0-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f0-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f0-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f0-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}


@media (min-width: 541px) and (max-width: 810px) {
	.f1-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f1-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f1-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f1-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f1-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f1-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f1-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f1-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f1-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f1-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f1-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f1-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f1-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f1-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f1-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f1-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f1-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f1-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f1-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f1-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}

@media (min-width: 811px) and (max-width: 1080px) {
	.f2-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f2-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f2-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f2-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f2-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f2-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f2-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     |     /  7:10 */
    .f2-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f2-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f2-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f2-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f2-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f2-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f2-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f2-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     |     /  3:10 */
	.f2-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f2-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f2-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f2-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f2-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     |     /  1:10 */
}


@media (min-width: 1081px) {
	.f3-00 {flex-basis: calc(100% - 40px); max-width: 100%; }       		  	/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 / 10:10 */
	.f3-90 {flex-basis: calc( 90% - 40px); max-width:90%; }         			/* 1:1 | 2:2 | 3:3 | 4:4 | 5:5 | 6:6 | 8:8 /  9:10 */
    .f3-87 {flex-basis: calc( 87.5% - 40px); max-width:87.5%; }         		/*     |     |     |     |     |     | 7:8 /       */
    .f3-83 {flex-basis: calc( 83.33333333% - 40px); max-width: 83.33333333%; }  /*     |     |     |     |     | 5:6 |     /       */
	.f3-80 {flex-basis: calc( 80% - 40px); max-width: 80%; }        			/*     |     |     |     | 4:5 |     |     /  8:10 */
	.f3-75 {flex-basis: calc( 75% - 40px); max-width: 75%; }          			/*     |     |     | 3:4 |     |     | 6:8 /       */
	.f3-70 {flex-basis: calc( 70% - 40px); max-width: 70%; }			        /*     |     |     | 3:4 |     |     | 6:8 /  7:10 */
    .f3-66 {flex-basis: calc( 66.66666666% - 40px); max-width:66.66666666%; } 	/*     |     | 2:3 |     |     | 4:6 |     /       */
    .f3-62 {flex-basis: calc( 62.5% - 40px); max-width: 62.5%}        			/*     |     |     |     |     |     | 5:8 /       */
	.f3-60 {flex-basis: calc( 60% - 40px); max-width: 60%; }          			/*     |     |     |     | 3:5 |     |     /  6:10 */
	.f3-50 {flex-basis: calc( 50% - 40px); max-width: 50%; }         			/*     | 1:2 |     | 2:4 |     | 3:6 | 4:8 /  5:10 */
	.f3-40 {flex-basis: calc( 40% - 40px); max-width: 40%; }          			/*     |     |     |     | 2:5 |     |     /  4:10 */
    .f3-37 {flex-basis: calc( 37.5% - 40px); max-width: 37.5%; }        		/*     |     |     |     |     |     | 3:8 /       */
    .f3-33 {flex-basis: calc( 33.33333333% - 40px); max-width: 33.33333333%; }  /*     |     | 1:3 |     |     | 2:6 |     /       */
	.f3-30 {flex-basis: calc( 30% - 40px); max-width: 30%; }          			/*     |     |     |     |     |     | 1:8 /  3:10 */
	.f3-25 {flex-basis: calc( 25% - 40px); max-width: 25%; }          			/*     |     |     | 1:4 |     |     | 2:8 /       */
	.f3-20 {flex-basis: calc( 20% - 40px); max-width: 20%; }          			/*     |     |     |     | 1:5 |     |     /  2:10 */
    .f3-16 {flex-basis: calc( 16.66666666% - 40px); max-width: 16.66666666%; }  /*     |     |     |     |     | 1:6 |     /       */
    .f3-12 {flex-basis: calc( 12.5% - 40px); max-width: 12.5% }        			/*     |     |     |     |     |     | 1:8 /       */
	.f3-10 {flex-basis: calc( 10% - 40px); max-width: 10%; }          			/*     |     |     |     |     |     | 1:8 /  1:10 */
}


/* Flex classes */

.flex{ display: flex; }
.flex-between{ justify-content: space-between; }
.flex-space-around{ justify-content: space-around; }
.flex-v-center{ align-items: center; }
.flex-v-start{ align-items: flex-start; }
.flex-v-end{ align-items: flex-end; }
.flex-h-center{ justify-content: center; }
.flex-h-between{ justify-content: space-between; }
.flex-h-start{ justify-content: flex-start; }
.flex-h-end{ justify-content: flex-end; }
.flex-grow{ flex-grow: 1;}
.flex-wrap{ flex-wrap: wrap;}