/*
 * [Table of contents]
 *
 * [&. Content / #key]
 * [Let press Ctrl + f and type of paste the key, then press Enter to search the content ]
 *
 * Summary:
 *
 *  1. GLOBAL STYLE
 *
 *
 *  2. BANNER
 * 
 * 
 *  3. LIST DEMO
 *
 * 
 *  4. FOOTER
 *
 *
 */


/*=================================
======     GLOBAL STYLE     ======
=================================*/
	html * {
	    outline: 0 !important;
	}

	html,
	body {
	    height: 100%;
	    margin: 0 auto;
	    padding: 0;

	    -wenkit-font-smoothing: subpixel-antialiased;
	}

	html {
	    font-size: 14px;
	}

	body {
	    font-family: 'roboto', Helvetica, Arial, sans-serif;
	    font-weight: 400;
	    line-height: 24px;

	    color: #50545c;
	    background-color: #ffffff;
	}

	a {
	    -webkit-transition: all .3s ease;
	       -moz-transition: all .3s ease;
	         -o-transition: all .3s ease;
	            transition: all .3s ease;
	}

	a:hover,
	a:active,
	a:focus {
	    text-decoration: none;

	    border-bottom: none;
	}

	.row {
		margin: 0 -30px;
	}

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

	.body-wrapper {
	    position: relative;

	    //overflow: hidden;
	}

	.fa-custom:before {
	    font: normal normal normal 14px/1 FontAwesome;
	    font-size: inherit;

	    display: inline-block;

	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	    text-rendering: auto;
	}
	
	#back-top .link {
	    font-size: 24px;
	    line-height: 36px;

	    position: fixed;
	    z-index: 100;
	    right: 20px;
	    bottom: 20px;

	    visibility: hidden;

	    width: 40px;
	    height: 40px;

	    -webkit-transition: all .5s ease;
	       -moz-transition: all .5s ease;
	         -o-transition: all .5s ease;
	            transition: all .5s ease;
	    -webkit-transform: translateY(-40px);
	       -moz-transform: translateY(-40px);
	        -ms-transform: translateY(-40px);
	         -o-transform: translateY(-40px);
	            transform: translateY(-40px);
	    text-align: center;

	    opacity: 0;
	    color: #ed421c;
	    border: 2px solid #ed421c;
	    background-color: transparent;
	}

	#back-top .link.show-btn {
	    visibility: visible;

	    -webkit-transform: translateY(0px);
	       -moz-transform: translateY(0px);
	        -ms-transform: translateY(0px);
	         -o-transform: translateY(0px);
	            transform: translateY(0px);

	    opacity: 1;
	}

	#back-top .link:hover {
	    -webkit-transform: translateY(-15px);
	       -moz-transform: translateY(-15px);
	        -ms-transform: translateY(-15px);
	         -o-transform: translateY(-15px);
	            transform: translateY(-15px);

	    color: #020b1f;
	    border: 2px solid #020b1f;
	    background-color: #ed421c;
	}
/*=================================
======   END GLOBAL STYLE   ======
=================================*/



/*=================================
======        BANNER         ======
=================================*/
 	.homepage-banner {s
 		position: relative;
	    overflow: hidden;
	    width: 100%;
	    height: 100vh;
	    text-align: center;
	    background-color: #121212;
	    background-image:url(../images/photodune-16139556-italian-pizza-with-tomatoes-on-a-wooden-table-top-view-l.jpg);
	    background-repeat: repeat;
	    background-attachment: fixed;
	    background-position: center;
	    -webkit-background-size: cover;
	            background-size: cover;
 	}

 	.homepage-banner .container {
 		height: 100%;
 	}

 	.homepage-banner-warpper {
 		display: table;
 		width: 100%;
 		height: 100%;
 	}

 	.homepage-banner-warpper .homepage-banner-content {
 		display: table-cell;
 		vertical-align: middle;
 	}

 	.group-title {
 		color: #fff;
 	}

 	.group-title .logo-images {
 		display: inline-block;
 		margin: 0 auto;
 		margin-bottom: 50px;
 	}

 	.group-title .title {
 		font-family: 'antoniobold';
 		font-size: 36px;
 		text-transform: uppercase;
 		margin: 0 0 20px 0;
 		letter-spacing: 2px;
 	}

 	.group-title .text {
 		font-size: 16px;
 		max-width: 500px;
 		margin: 0 auto;
 		color: #cccccc;
 	}

 	.group-btn {
 		margin-top: 40px;
 		margin-bottom: 30px;
 	}

 	.group-btn .btn-by-now {
 		color: #fff;
 		width: 200px;
 		height: 40px;
 		line-height: 36px;
 		position: relative;
 		z-index: 2;
 		overflow: hidden;
 		display: inline-block;
 		text-transform: uppercase;
 		border: 2px solid #ff0000;
 		background-color: transparent;
 	}

 	.group-btn .btn-by-now span{
 		position: relative;
 		z-index: 50;
 	}

 	.group-btn .btn-by-now:before {
 		position: absolute;
 		content: "";
 		width: 200px;
	    height: 200px;;
    	left: 100px;
    	top: -80px;
 		background-color: #ff0000;
    	-webkit-transition: all .5s ease;
	       -moz-transition: all .5s ease;
	         -o-transition: all .5s ease;
	            transition: all .5s ease;
		-webkit-transform: rotate(30deg);
 		   -moz-transform: rotate(30deg);
		     -o-transform: rotate(30deg);
		      -ms-transform: rotate(30deg);
	         	transform: rotate(30deg);
 	}

 	.group-btn .btn-by-now:after {
 		position: absolute;
 		content: "";
	    width: 200px;
	    height: 200px;
	    right: 80px;
	    top: -150px;
 		background-color: #ff0000;
    	-webkit-transition: all .5s ease;
	       -moz-transition: all .5s ease;
	         -o-transition: all .5s ease;
	            transition: all .5s ease;
		-webkit-transform: rotate(30deg);
 		   -moz-transform: rotate(30deg);
		     -o-transform: rotate(30deg);
		      -ms-transform: rotate(-0deg);
	         	transform: rotate(30deg);
 	}

 	.group-btn .btn-by-now:hover:before {
 		left: 120%;
 	}

 	.group-btn .btn-by-now:hover:after {
 		right: 100%;
 	}

 	.btn-scroll {
	    border: 2px solid rgba(255,255,255,0.5);
	    border-radius: 16px;
	    display: block;
	    height: 50px;
	    left: 50%;
	    margin-left: -17px;
	    position: absolute;
	    width: 30px;
	    z-index: 10;
	    bottom: 30px;
	    cursor: pointer;
	    -webkit-transition: all .3s ease;
	       -moz-transition: all .3s ease;
	         -o-transition: all .3s ease;
	            transition: all .3s ease;
	}

	.btn-scroll:hover {
	    border: 2px solid rgba(255,255,255,1);
	}

	.btn-scroll .key {
	    animation-delay: 0s;
	    animation-duration: 1s;
	    animation-iteration-count: infinite;
	    animation-name: drop;
	    animation-play-state: running;
	    animation-timing-function: linear;
	}
	.btn-scroll .key {
	    background: #f5f5f5 none repeat scroll 0 0;
	    border-radius: 10px;
	    height: 10px;
	    margin-left: auto;
	    margin-right: auto;
	    position: relative;
	    top: 4px;
	    width: 4px;
	}
	@keyframes drop {
		0% {
		    opacity: 0;
		    top: 5px;
		}
		30% {
		    opacity: 1;
		    top: 10px;
		}
		100% {
		    opacity: 0;
		    top: 25px;
		}
	}
/*=================================
======      END BANNER       ======
=================================*/


/*=================================
======       LIST DEMO       ======
=================================*/

 	.list-demo {
 		padding: 100px 0; 
 	}
 	.list-demo .title {
 		display: block;
 		text-align: center;
 	}

 	.main-title {
 		font-family: "antoniobold";
 		font-size: 40px;
 		margin: 0 auto 80px auto;
 		color: #04102a;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 		position: relative;
 		display: inline-block;
 	}

 	.main-title:before {
 		position: absolute;
 		content: "";
 		height: 1px;
 		left: 15%;
 		right: 15%;
 		bottom: 0;
 		background-color: #04102a;
 	}

 	.main-title:after {
 		position: absolute;
 		content: "";
 		height: 1px;
 		left: 0;
 		right: 0;
 		bottom: -5px;
 		background-color: #04102a;
 	}


 	.block-item {
 		overflow: hidden;
 		position: relative;
 		box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
 	}

 	.block-item .title-item {
 		text-align: center;
 		font-size: 20px;
 		padding: 17px 0 15px 0;
 		font-family: "antoniobold";
 		text-transform: capitalize;
 		color: #292f3f;
 		display: block;
 		background-color: #f5f5f5;
 	}

 	.block-item .title-item-2 {
 		z-index: 5;
 		top: 100px;
 		left: 0;
 		right: 0;
 		color: #fff;
 		display: block;
 		font-size: 20px;
 		text-align: center;
 		position: absolute;
 		padding: 17px 0 15px 0;
 		font-family: "antoniobold";
 		text-transform: capitalize;
 		background-color: #ed421c;
 		-webkit-transition: all .5s ease;
	       -moz-transition: all .5s ease;
	         -o-transition: all .5s ease;
	            transition: all .5s ease;
 	}

 	.block-item:hover .title-item-2 {
 		top: 0;
 	}

 	.block-item .main-item {
 		position: relative;
 		z-index: 9;
 	}

 	.block-item .main-item.coming-soon:before {
 		position: absolute;
 		content: "";
 		z-index: 11;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		right: 0;
 		background-color: rgba(0,0,0,0.8);
 	}

 	.block-item .main-item.coming-soon:after {
 		position: absolute;
 		content: "Coming Soon...";
 		font-family: "antoniobold";
 		font-size: 24px;
 		text-transform: uppercase;
 		letter-spacing: 2px;
 		top: 50%;
 		margin-top: -12px;
 		left: 50%;
 		margin-left: -80px;
 		color: #fff;
 		z-index: 12;
 	}

 	.block-item .hot-news {
 		position: absolute;
 		z-index: 20;
 		top: 20px;
 		left: 20px;
 		padding: 5px 20px;
 		border-radius: 50px;
 		background-color: red;
 		color: #fff;
 		text-transform: uppercase;
 	}

 	.block-item .link-demo {
 		position: absolute;
 		z-index: 10;
 		top: 0;
 		left: 0;
 		bottom: 0;
 		right: 0;
 	}

 	.row .col-sm-4.col-xs-6 .block-item {
 		margin-top: 60px;
 	}

 	.row .col-sm-4.col-xs-6:nth-child(-n + 3) .block-item {
        margin-top: 0;
    }
/*=================================
======     END LIST DEMO     ======
=================================*/



/*=================================
======         FOOTER        ======
=================================*/

	footer {
		background-color: #020b1f;
		position: relative;
		padding: 90px 0 20px; 0;
	}

	.footer-warpper {
		text-align: center;
	}

	.footer-warpper .logo-images {
		display: inline-block;
		opacity: 0.8;

	}

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

	.footer-warpper .text {
		font-size: 18px;
		color: #888d96;
		margin: 10px 0 0 0;
	}

	.footer-warpper .text i {
		margin-left: 10px;
		color: #ed421c;
	}

	.footer-warpper .text i {
		animation-delay: 0s;
	    animation-duration: 1s;
	    animation-iteration-count: infinite;
	    animation-name: heart;
	    animation-play-state: running;
	    animation-timing-function: linear;
	}

	.list-socical {
		margin: 60px 0 0 0;
	}

	.list-socical li {
		margin: 0 5px;
		padding: 0;
	}

	.list-socical li .link {
		color: #888d96;
		font-size: 16px;
		padding: 0 10px;
	}

	.list-socical li .link:hover {
		color: #fff;
	}

	@keyframes heart {
		0% {
			-webkit-transform: scale(0.8);
		       -moz-transform: scale(0.8);
			    -ms-transform: scale(0.8);
			     -o-transform: scale(0.8);
			        transform: scale(0.8);
		}
		20% {
		    -webkit-transform: scale(1);
		       -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
		}
		50% {
		    -webkit-transform: scale(1.1);
		       -moz-transform: scale(1.1);
			    -ms-transform: scale(1.1);
			     -o-transform: scale(1.1);
			        transform: scale(1.1);
		}
		80% {
		    -webkit-transform: scale(1.3);
		       -moz-transform: scale(1.3);
			    -ms-transform: scale(1.3);
			     -o-transform: scale(1.3);
			        transform: scale(1.3);
		}
		100% {
		    -webkit-transform: scale(1);
		       -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
		}
	}
/*=================================
======       END FOOTER      ======
=================================*/