/***************
MEDIA FOR DEVICES
***************/
.display-none{
	display:none!important
}
.show768,
.show1024{
	display:none;
}


@media only screen and (max-width:1024px) {
	.show1024{
	  display:inherit;
	}
	
	.hide1024{
		display:none!important
	}
}


@media only screen and (max-width:768px) {
	.show768{
	  display:inherit;
	}
}




/***************
RAW
***************/
.row{
  width:100%;
  display:table;
}

/***************
POSITION RELATIVE
***************/
.pos-relative{
	position:relative;
}

/***************
CLEAR
***************/
.clear{
  clear:both;
  height:0;
  display:block;
}

/***************
COL
***************/
.col-x,
.col-1,
.col-2,
.col-3,
.col-3-nospace,
.col-4,
.col-4-nospace,
.col-5,
.col-6{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  width: 100%;
}


.flex-no-wrap{
  display: flex;
  flex-direction: row;
  flex-wrap:nowrap;
  width: 100%;
}



/** col-2 **/
.col-1 .col{
	width: calc(100% / 1);
}

.col-2 .col{
	width: calc(97% / 2);
	margin-right:3%;
}

.col-3 .col {
	width: calc(90% / 3);
	margin-right:5%;
}

.col-3-nospace .col {
	width: calc(100% / 3);
}

.col-4 .col {
	width: calc(94% / 4);
	margin-right:2%;
}

.col-4-nospace .col {
	width: calc(100% / 4);
}


.col-5 .col {
	width: calc(90% / 5);
	margin-right:2%;
}

.col-6 .col {
	width: calc(88% / 6);
	margin-right:2%;
}

.col-2 .col:nth-child(2n+2),
.col-3 .col:nth-child(3n+3),
.col-4 .col:nth-child(4n+4),
.col-5 .col:nth-child(5n+5),
.col-6 .col:nth-child(6n+6) {
  margin-right:0%;
}


/***************
COLUMNS
***************/
.col-x-12{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.col-x-12 .col-x-2 {
  max-width:20%;
  width:100%;
} 

.col-x-12 .col-x-3 {
  max-width:30%;
  width:100%;
} 

.col-x-12 .col-x-4 {
  max-width:40%;
  width:100%;
} 

.col-x-12 .col-x-5 {
  max-width:50%;
  width:100%;
} 

.col-x-12 .col-x-4 {
  max-width:40%;
  width:100%;
} 

.col-x-12 .col-x-6 {
  max-width:60%;
  width:100%;
} 

.col-x-12 .col-x-65 {
  max-width:60%;
  width:100%;
  margin-right:10%;
} 

.col-x-12 .col-x-7 {
  max-width:70%;
  width:100%;
} 

.col-x-12 .col-x-8 {
  max-width:80%;
  width:100%;
}

.col-x-12 .col-x-9 {
  max-width:90%;
  width:100%;
}




/***************
MIN-WIDTH  
***************/
.minWidth250{
	min-width:250px;
}

.minWidth300{
	min-width:300px;
}

.minWidth350{
	min-width:350px;
}



/***************
MARGINS 
***************/
.col-x-12 .mr50{
	margin-right:50px
}

.col-x-12 .mr100{
	margin-right:100px
}
 
 
/***auto**/
.mAuto{
  margin-left:auto;
  margin-right:auto;
}

/***top and bottom**/
.mtb10{
  margin-top:10px;
  margin-bottom:10px;
}

.mtb30{
  margin-top:30px;
  margin-bottom:30px;
}

/***bottom**/
.mb5{
  margin-bottom:5px;
}


.mb10{
  margin-bottom:10px;
}

.mb15{
  margin-bottom:15px;
}

.mb20{
  margin-bottom:20px;
}

.mb30{
  margin-bottom:30px;
}

.mb40{
  margin-bottom:30px;
}


.mb50{
  margin-bottom:50px;
}

.mb80{
  margin-bottom:80px;
}

.mb100{
  margin-bottom:100px;
}

.mb50:last-child{
  margin-bottom:0px;
}



/***top**/
.mt5{
  margin-top:5px;
}

.mt10{
  margin-top:10px;
}

.mt20{
  margin-top:20px;
}

.mt30{
  margin-top:30px;
}

.mt40{
  margin-top:40px;
}

.mt50{
  margin-top:50px;
}

.mt80{
  margin-top:80px;
}

.mt100{
  margin-top:100px;
}

.mt140{
  margin-top:140px;
}



/*** margin right **/
.mr5{
  margin-right:5px;
}

.mr10{
  margin-right:10px;
}

.mr20{
  margin-right:20px;
}

/*** margin left **/
.ml5{
  margin-left:5px;
}

.ml10{
  margin-left:10px;
}

.ml20{
  margin-left:20px;
}

.ml30{
  margin-left:30px;
}

.ml40{
  margin-left:40px;
}



/*** 
PADDING 
***/
.pd10tb{
	padding-top:10px;
	padding-bottom:10px;
}

.pd20tb{
	padding-top:20px;
	padding-bottom:20px;
}


.pd30tb{
	padding-top:30px;
	padding-bottom:30px;
}

.pd50tb{
	padding-top:50px;
	padding-bottom:50px;
}

/*** 
MAX WIDTHS 
***/
.maxWidth50 {
    max-width: 50px;
}

.maxWidth100 {
    max-width: 100px;
}

.maxWidth120 {
    max-width: 120px;
}


.maxWidth150 {
    max-width: 150px;
}

.maxWidth400 {
    max-width: 400px;
}


.maxWidth450{
	max-width:450px;
}

.maxWidth650{
	max-width:650px;
}


.maxWidth750{
	max-width:750px;
}



/*** DESKTOP class***/
@media screen and (min-width: 1281px) {


}

/*** BIG-TABLET class***/
@media screen  and (max-width: 1280px) {
	.col-2.big-tablet .col{
		width: calc(100% / 1);
		margin-right:0%;
	}
	 
}
 
 
 
 
/*** TABLET class***/
@media screen and (max-width: 1023px) {
	.col-2.tablet .col{
		width: calc(100% / 1);
		margin-right:0%;
	}
	
	.col-3.tablet .col {
		width: calc(100% / 1);
		margin-right:0%;
	}
	
	.col-4.tablet2-bigMobile1 .col {
		width: calc(95% / 2);
		margin-right:5%;
	 }
		
	.col-4.tablet2-bigMobile1 .col:nth-child(2n+2) {
		margin-right:0%;
	 }
	 
	 .marBotTable30{
		 margin-bottom:30px
	 }

}



/*** BIG-MOBILE class***/
@media screen and (max-width: 767px) {
	
	.col-3.big-mobile .col{
		width: calc(100% / 1);
		margin-right:0%;
		margin-bottom:20px;
	}
	
	.col-2.big-mobile .col{
		width: calc(100% / 1);
		margin-right:0%;
		margin-bottom:20px;
	}
	
	.col-4.tablet2-bigMobile1 .col {
		width: calc(100% / 1);
		margin-right:0%;
	 }
	 
	.col-2.big-mobile .col:last-child,
	.col-3.big-mobile .col:last-child{
		margin-bottom:00px;
	}
	
}





/*** MOBILE class***/
@media screen and  (max-width: 679px) {
	.col-2.mobile .col{
		width: calc(100% / 1);
		margin-right:0%;
		margin-bottom:25px;
	}
	
	.col-2.mobile .col:last-child{
		margin-bottom:0px;
	}
	 
	.col-4.tablet2-Mobile1 .col {
		width: calc(100% / 1);
		margin-right:0%;
	}
	
	.minWidth250,
	.minWidth300,
	.minWidth350{
		min-width:100%;
	}
	
	.col-3.mobile .col {
		width: calc(100% / 1);
		margin-right:0%;
	}
	
	.col-4.mobile .col{
		width: calc(90% / 2);
		margin-right: 5%;
	}
	
	.col-4.mobile .col:nth-last-child(odd){
		margin-right: 0%;
	}
}
