/*==========  Desktop First Method  ==========*/

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}
.container::after {
	display: table;
	clear: both;
	content: "";
}
.container-fluid {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.container-fluid::after {
	display: table;
	clear: both;
	content: "";
}
.row {
	margin-left: -15px;
	margin-right: -15px;
}
.row::after {
	display: table;
	clear: both;
	content: "";
}
.row.row-no-gutter,
.row[data-gutter="0"],
.row[data-gutter="none"] {
	margin: 0 !important;
}
.row.row-no-gutter > [class^="col-"],
.row[data-gutter="0"] > [class^="col-"],
.row[data-gutter="none"] > [class^="col-"] {
	padding: 0 !important;
}
.row[data-gutter="10"] {
	margin-left: -5px;
	margin-right: -5px;
}
.row[data-gutter="10"] > [class^="col-"] {
	padding-left: 5px;
	padding-right: 5px;
}
.row[data-gutter="15"] {
	margin-bottom: -15px;
	margin-left: -7.5px;
	margin-right: -7.5px;
}
.row[data-gutter="15"] > [class^="col-"] {
	padding-left: 7.5px;
	padding-right: 7.5px;
	margin-bottom: 15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-1, .col-12 {
	float: left;
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
.col-12 {
	width: 100%;
}
.col-11 {
   width: 91.66666667%;
}
.col-10 {
   width: 83.33333333%;
}
.col-9 {
	width: 75%;
}
.col-8 {
   width: 66.66666667%;
}
.col-7 {
   width: 58.33333333%;
}
.col-6 {
	width: 50%;
}
.col-5 {
   width: 41.66666667%;
}
.col-4 {
   width: 33.33333333%;
}
.col-3 {
	width: 25%;
}
.col-2 {
   width: 16.66666667%;
}
.col-1 {
   width: 8.33333333%;
}


/* = Large Devices, Wide Screens
-------------------------------------------------------------- */
@media (min-width: 1200px){
	
	.container {
		width: 1170px;
	}
	
}

/* = Medium Devices, Desktops
-------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px){
	
	.container {
		width: 970px;		
	}
	
}

/* = Small Devices, Tablets
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px){
	
	.container {
		width: 750px;	
	}
	
}


/* = Extra Small Devices, Phones
-------------------------------------------------------------- */
@media (min-width: 480px) and (max-width: 767px){
	
	.container {
		min-width: 480px; 
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-1, .col-12 {
		width: 100%;
	}
		
}

/* = Custom, iPhone Retina 
-------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 479px){
	
	.container {
		min-width: 320px;
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-1, .col-12 {
		width: 100%;
	}
	
}