
/*  SECTIONS  ============================================================================= */
.mytitle {
padding: 20px;
    color: #fff;
    background-color: rgba(31,37,44,.75);
    border: solid 3px #FFD54F;
    border-radius: 4px;
    font-size: 24px;
    text-align: justify;
    
    font-family: 'Fjalla One', sans-serif;
}
.bigbg {
/*padding: 20px 20px 0 20px;*/
background-color: white;
border: solid 3px #FFD54F;
border-radius: 4px;
}
.bigbg p {
text-transform: uppercase;
font-family: 'Fjalla One', sans-serif;
font-size: 30px;
color: #FF5722;
font-size: 1.8em;
text-align: justify;
padding: 5px;
}

.section {
	clear: both;
	padding: 20px;
	
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	background: #ccc; 
	padding:1em; 
	text-align:center;
	background-image: url(../img/core/liners.png);
}

.col h2 { color: #282828;
    font-family: 'Fjalla One', sans-serif;
    font-size: 18px;
    margin-bottom: 4px;
    text-align: left !important;
	}
.col h1 { color: #282828;
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 23px;
    margin-bottom: 5px;
    text-align: left !important;
	}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

.probm {padding: 18px; overflow: hidden; text-align: left; background: #FFF;}

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.section {
	padding: 0;
	
}
	.col { 
		margin: 1% 0 1% 0%;
	}
	.bigbg p {
		font-size: 16px;
color: #FF5722;
text-align: justify;
padding: 5px;
}
}

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}
.span_1_of_z {
	width: 20.98%; 
	/* border: 4px white solid; */
	
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
	.span_1_of_z {
		width: 100%; 
	}
}
/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 32.26%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}
/*  GRID OF SIX   ============================================================================= */


.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}
.span_1_of_6 h3 {
  	color: #282828;
    font-family: 'Fjalla One', sans-serif;
    font-size: 16.5px;
    margin-bottom: 5px;
    text-align: center !important;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_6_of_6 {
		width: 100%; 
	}
	.span_5_of_6 {
		width: 100%; 
	}
	.span_4_of_6 {
		width: 100%; 
	}
	.span_3_of_6 {
		width: 100%; 
	}
	.span_2_of_6 {
		width: 100%; 
	}
	.span_1_of_6 {
		width: 100%; 
	}
}

/*  GRID OF NINE   ============================================================================= */


.span_9_of_9 {
	width: 100%;
}

.span_8_of_9 {
	width: 88.71%;
}

.span_7_of_9 {
	width: 77.42%; 
}

.span_6_of_9 {
	width: 66.13%; 
}

.span_5_of_9 {
	width: 54.84%; 
}

.span_4_of_9 {
	width: 43.55%; 
}

.span_3_of_9 {
	width: 32.26%;
}

.span_2_of_9 {
	width: 20.97%; 
}

.span_1_of_9 {
	width: 9.68%; 
	padding: 0 !important;
    color: #282828;
    font-family: 'Fjalla One', sans-serif;
    font-size: 21px;
	text-transform: uppercase;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_9_of_9 {
		width: 100%; 
	}
	.span_8_of_9 {
		width: 100%; 
	}
	.span_7_of_9 {
		width: 100%; 
	}
	.span_6_of_9 {
		width: 100%; 
	}
	.span_5_of_9 {
		width: 100%; 
	}
	.span_4_of_9 {
		width: 100%; 
	}
	.span_3_of_9 {
		width: 100%; 
	}
	.span_2_of_9 {
		width: 100%; 
	}
	.span_1_of_9 {
		width: 32.5%; 
		margin: 1px !important;
		font-size: 16px;
	}
}

/*  GRID OF FOUR   ============================================================================= */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
	padding: 0 !important;
    color: #282828;
    font-family: 'Fjalla One', sans-serif;
    font-size: 16px;
	text-transform: uppercase;
}

.span_1_of_4:hover{
	color: white;  
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
		width: 49.2%; 
		margin: 1px !important;
		font-size: 12px;
	}
}


