/* ------------------------------------------------------------------------------------------ */
/* -------------------------------            STYLE           ------------------------------- */
/* -------------------------        MASHAD  INDUSTRIAL GROUP        ------------------------- */
/* -------------------------------        Version  0.1        ------------------------------- */
/* ------------------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------------------ */
/*                                            RESET                                           */
/* ------------------------------------------------------------------------------------------ */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

*,
*:before,
*:after {
	outline: medium none !important;
}

a,
a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: medium none !important;
}

/* Remove Gray Highlight When Tapping Links in Mobile */
textarea,
input,
select,
button,
label,
span,
td,
th,
a,
.offCanvasOverlay {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}


/* ------------------------------------------------------------------------------------------ */
/*                                           GENERAL                                          */
/* ------------------------------------------------------------------------------------------ */
body {
	overflow-x: hidden;
}


/* ------------------------------------------------------------------------------------------ */
/*                                           HELPER                                           */
/* ------------------------------------------------------------------------------------------ */
.margin-maximize {
	margin: 30px;
}
.margin-normalize {
	margin: 20px;
}
.margin-minimize {
	margin: 10px;
}

.padding-maximize {
	padding: 30px;
}
.padding-normalize {
	padding: 20px;
}
.padding-minimize {
	padding: 10px;
}

.centerSOFT {
	float: none;
	margin-right: auto;
	margin-left: auto;
}
.centerHARD {
	display: table;
	float: none;
	margin-right: auto;
	margin-left: auto;
}


/* ------------------------------------------------------------------------------------------ */
/*                                        LIST: SIMPLE                                        */
/* ------------------------------------------------------------------------------------------ */

/* --------------------------------------  HORIZONTAL  -------------------------------------- */

/* -----------    SIDE: DEFAULT   ----------- */
.listHD {
	margin: 0;
	padding: 0;
}
.listHD:after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}
.listHD > li {
	float: right;
	list-style: none outside none;
}

/* -----------   SIDE: OPPOSITE   ----------- */
.listHO {
	margin: 0;
	padding: 0;
}
.listHO:after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}
.listHO > li {
	float: left;
	list-style: none outside none;
}

/* --------------------------------------   VERTICAL   -------------------------------------- */
.listV {
	margin: 0;
	padding: 0;
}
.listV > li {
	list-style: none outside none;
}


/* ------------------------------------------------------------------------------------------ */
/*                                            GRID                                            */
/* ------------------------------------------------------------------------------------------ */
.xRow {
	max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}
.xRow::before,
.xRow::after {
    content: "" !important;
    display: table !important;
    float: none !important;
    clear: both !important;
	height: 0 !important;
}

.xRow.collapse > .xColumn,
.xRow.collapse > .xColumns {
    padding-right: 0;
    padding-left: 0;
}
.xRow .xRow {
    margin-right: -.625rem;
    margin-left: -.625rem;
}

@media print,
screen and (min-width: 49.0625em) {
    .xRow .xRow {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

@media print,
screen and (min-width: 62.3125em) {
    .xRow .xRow {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

@media print,
screen and (min-width: 65.0625em) {
    .xRow .xRow {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

@media screen and (min-width: 86.4375em) {
    .xRow .xRow {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

@media screen and (min-width: 101.0625em) {
    .xRow .xRow {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

.xRow .xRow.collapse {
    margin-right: 0;
    margin-left: 0;
}
.xRow.expanded {
    max-width: none;
}
.xRow.expanded .xRow {
    margin-right: auto;
    margin-left: auto;
}
.xRow:not(.expanded) .xRow {
    max-width: none;
}
.xRow.gutter-small>.xColumn,
.xRow.gutter-small>.xColumns {
    padding-right: .625rem;
    padding-left: .625rem;
}
.xRow.gutter-medium>.xColumn,
.xRow.gutter-medium>.xColumns {
    padding-right: .9375rem;
    padding-left: .9375rem;
}
.xColumn,
.xColumns {
    width: 100%;
    float: right;
    padding-right: .625rem;
    padding-left: .625rem;
}
.xColumn.xAuto,
.xColumns.xAuto {
    width: 11.11%;
}
.xColumn.xGutter,
.xColumns.xGutter {
	padding-right: 2px;
    padding-left: 2px;
}

@media print,
screen and (min-width: 49.0625em) {
    .xColumn,
    .xColumns {
        padding-right: .9375rem;
        padding-left: .9375rem;
    }
    .xColumn.xGutter,
    .xColumns.xGutter {
        padding-right: 5px;
        padding-left: 5px;
    }
}

.xColumn:last-child:not(:first-child),
.xColumns:last-child:not(:first-child) {
    float: left;
}

.xColumn.end:last-child:last-child,
.end.xColumns:last-child:last-child {
    float: right;
}

.xColumn.xRow.xRow,
.xRow.xRow.xColumns {
    float: none;
}

.xRow .xColumn.xRow.xRow,
.xRow .xRow.xRow.xColumns {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

/* -------------------------------------- MEDIA  QUERY -------------------------------------- */
/* START VIEWPORT : */
/* HD + SCROLL BAR */
@media only screen and (max-width: 1420px) {

	.xRow {
		max-width: 95vw;
	}

}
/* END VIEWPORT */

/* START VIEWPORT : */
/* TABLET + SCROLL BAR */
@media only screen and (max-width: 997px) {

	.xColumn.xAuto,
	.xColumns.xAuto {
	    width: 20%;
	}

}
/* END VIEWPORT */

/* START VIEWPORT : */
/* MOBILE + SCROLL BAR */
@media only screen and (max-width: 785px) {

	.xColumn.xAuto,
	.xColumns.xAuto {
	    width: 50%;
	}

}
/* END VIEWPORT */


/* ------------------------------------------------------------------------------------------ */
/*                                          LIST: x1                                          */
/* ------------------------------------------------------------------------------------------ */
[data-list="x1"] {
	position: relative;
	margin-top: calc( calc(100vh - 449px) / 2 );
}

[data-list="x1"] ._top {
	position: absolute;
	top: -14px;
	right: 50%;
	margin-right: -54px;
	padding: 0 20px;
	background-color: #ffffff;
	z-index: 9;
}
[data-list="x1"] ._top img {
	display: block;
}

[data-list="x1"] ._bottom {
	position: absolute;
	bottom: -10px;
	right: 50%;
	margin-right: -149px;
	padding: 0 20px;
	background-color: #ffffff;
	z-index: 9;
}
[data-list="x1"] ._bottom img {
	display: block;
}

[data-list="x1"] ._item {
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 3px solid #ef3e3a;
	border-bottom: 3px solid #ef3e3a;
}
[data-list="x1"] ._item ._image {
	display: block;
	margin: 0;
	overflow: hidden;
}
[data-list="x1"] ._item ._image a {
	display: block;
}
[data-list="x1"] ._item ._image a img {
	display: block;
	width: 100%;
	max-height: 390px;
}
[data-list="x1"] .xColumns._first ._item:before {
	content: "";
	position: absolute;
	bottom: -3px;
	right: -20px;
	width: 12px;
	height: 40px;
	border-top: 3px solid #ef3e3a;
	border-bottom: 3px solid #ef3e3a;
	border-right: 3px solid #ef3e3a;
	z-index: 9;
}
[data-list="x1"] .xColumns._first ._item:after {
	content: "";
	position: absolute;
	bottom: -3px;
	right: -8px;
	width: 8px;
	height: 3px;
	background-color: #ef3e3a;
	z-index: 9;
}
[data-list="x1"] .xColumns._last ._item:before {
	content: "";
	position: absolute;
	bottom: -3px;
	left: -20px;
	width: 12px;
	height: 40px;
	border-top: 3px solid #ef3e3a;
	border-bottom: 3px solid #ef3e3a;
	border-left: 3px solid #ef3e3a;
	z-index: 9;
}
[data-list="x1"] .xColumns._last ._item:after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: -8px;
	width: 8px;
	height: 3px;
	background-color: #ef3e3a;
	z-index: 9;
}

/* -------------------------------------- MEDIA  QUERY -------------------------------------- */
/* START VIEWPORT : */
/* HD + SCROLL BAR */
@media only screen and (max-width: 1383px) {
	[data-list="x1"] ._item ._image a img {
		width: auto;
		max-height: none;
		height: 403px;
	}
}
/* END VIEWPORT */

/* START VIEWPORT : */
/* TABLET + SCROLL BAR */
@media only screen and (max-width: 997px) {

	[data-list="x1"] {
		margin-top: 25px;
	}
	[data-list="x1"] ._bottom {
		bottom: 10px;
	}
	[data-list="x1"] ._item {
		margin-bottom: 20px;
	}
	[data-list="x1"] ._item ._image a img {
		width: 100%;
		max-height: 400px;
		height: auto;
	}
	[data-list="x1"] .xColumns._first ._item:before,
	[data-list="x1"] .xColumns._first ._item:after,
	[data-list="x1"] .xColumns._last ._item:before,
	[data-list="x1"] .xColumns._last ._item:after {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

}
/* END VIEWPORT */


/* ------------------------------------------------------------------------------------------ */
/* -------------------------------                            ------------------------------- */
/* ------------------------                    END                   ------------------------ */
/* -------------------------------                            ------------------------------- */
/* ------------------------------------------------------------------------------------------ */
