/**
 * [Table of contents]
 *
 * [&. Content / #key]
 * [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
 *
 * Summary:
 *
 *  0. VARIABLE LESS
 *    - 0.1. Color
 *  1. RESPONSIVE SCREEN
 *    - 1.1. Media screen max width 1024px
 *    - 1.2. Media screen max width 768px
 *    - 1.3. Media screen max width 767px
 *    - 1.4. Media screen max width 600px
 *    - 1.5. Media screen max width 480px
 *    - 1.6. Media screen max width 414px
 *    - 1.7. Media screen max width 380px
 *    - 1.8. Media screen max width 320px
 */

/*=========================================
=            RESPONSIVE SCREEN            =
=========================================*/

/*----------  1.0. Media screen min width 1600px  ----------*/

@media screen and (min-width: 1600px) {

}

/*----------  1.1. Media screen max width 1024px  ----------*/

@media screen and (max-width: 1024px) {
	.row {
		margin: 0 -15px;
	}

	.col-sm-4, .col-xs-6 {
		padding: 0 15px;
	}
}


/*----------  1.2. Media screen max width 768px  ----------*/

@media screen and (max-width: 768px) {

}


/*----------  1.3. Media screen max width 767px  ----------*/

@media screen and (max-width: 767px) {
	.row .col-sm-4.col-xs-6 .block-item {
 		margin-top: 30px;
 	}

 	.row .col-sm-4.col-xs-6:nth-child(-n + 3) .block-item {
        margin-top: 30px;
    }

 	.row .col-sm-4.col-xs-6:nth-child(-n + 2) .block-item {
        margin-top: 0;
    }

    .homepage-banner {
    	min-height: 667px;
    }
}


/*----------  1.4. Media screen max width 600px  ----------*/

@media screen and (max-width: 600px) {

	.group-title .logo-images {
		max-width: 180px;
	}

	.group-title .title {
		font-size: 28px;
		line-height: 1.4;
	}

	.group-title .text {
		font-size: 14px;
	}

	.list-demo {
		padding: 70px 0;
	}

	.main-title {
		font-size: 28px;
		margin-bottom: 50px;
	}

	footer {
		padding: 70px 0 20px 0;
	}

	.footer-warpper .logo-images img {
		max-width: 180px;
	}

	.list-socical {
		margin-top: 40px;
	}
}


/*----------  1.5. Media screen max width 480px  ----------*/

@media screen and (max-width: 480px) {

}


/*----------  1.6. Media screen max width 435px  ----------*/

@media screen and (max-width: 435px) {
	.col-xs-6 {
		width: 100%;
	}

 	.row .col-sm-4.col-xs-6:nth-child(-n + 2) .block-item {
        margin-top: 30px;
    }

    .row .col-sm-4.col-xs-6:first-child .block-item {
        margin-top: 0;
    }
}


/*----------  1.7. Media screen max width 380px  ----------*/

@media screen and (max-width: 380px) {

}


/*----------  1.8. Media screen max width 320px  ----------*/

@media screen and (max-width: 320px) {

}