/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    /*templates area*/
    .single-template-inner {
    	height: 154px;
    }
}



/*Medium devices - Tablet layout (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	/*common styles*/
	.section-padding {
	    padding: 50px 0;
	}

	.section-title {
	    font-size: 40px;
	}

	/*hero area*/
	.hero-area {
	    height: 500px;
	}

	.hero-area .title {
	    font-size: 50px;
	}

	.hero-area .hero-content {
		padding: 25px;
	}

	.hero-area .hero-scroll-btn {
		margin-top: 20px;
	}

	/*templates area*/
	.single-template {
		width: 50%;
	}

	.single-template-inner {
    	height: 177px;
    }
}



/*Small devices - Mobile layout (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
	/*common styles*/
	.section-heading {
	    margin-bottom: 30px;
	}

	.section-title {
	    font-size: 36px;
	    letter-spacing: 1px;
	}

	.section-padding {
	    padding: 40px 0;
	}

	/*hero area*/
	.hero-area {
	    height: 450px;
	}

	.hero-area .hero-content {
		padding: 0;
	}

	.hero-area .title {
	    font-size: 45px;
	}

	.hero-area .hero-desc {
	    font-size: 22px;
	}

	.animated-line {
	    margin-top: 10px;
	}

	.hero-scroll-btn-container {
	    display: none;
	}
	
	/*.hero-area .hero-scroll-btn {
		font-size: 22px;
		width: 40px;
		height: 80px;
		line-height: 80px;
	}*/

	/*main content*/
	.main-content {
		/*min-height: 300px;*/
		padding: 50px 0;
	}

	.stagger-visualizer {
		display: none !important;
	}

	/*templates area*/
	.template-filter-buttons {
		padding: 0;
	}

	.template-filter-buttons button {
		/*width: auto;
		height: auto;
		line-height: 1;
		background: rgba(34, 50, 68, 0.5);
	    border: 1px solid transparent;
	    border-radius: 4px;
	    padding: 8px 15px;
	    margin: 0;
	    margin-top: 15px;
	    margin-right: 12px;
	    margin: 15px 12px 0 0;*/
	    font-size: 12px;
	    width: 60px;
	    height: 60px;
	    line-height: 55px;
	    padding: 0;
	    margin: 15px 20px;
	}

	/*.template-filter-buttons button:first-child {
	    margin-left: 0;
	}*/

	/*.template-filter-buttons button:last-child {
	    margin-right: 0;
	}

	.template-filter-buttons button:hover,
	.template-filter-buttons button.mixitup-control-active {
	    background: #223244;
	}

	.template-filter-buttons button:before {
		display: none;
	}*/

	.single-template-inner {
    	height: 130px;
    }
}



/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    /*common styles*/
    body {
    	font-size: 15px;
    }

	.section-title {
	    font-size: 30px;
	}

	/*header area*/
	.header-area,
	.header-area.scrolled {
		position: absolute;
		top: 0;
		left: 0;
	}

	.logo img {
	    max-height: 60px;
	}

	/*scrolled header*/
	.header-area.scrolled {
	    padding: 10px;
	    background-color: transparent;
	    -webkit-box-shadow: none;
	            box-shadow: none;
	}

	.scrolled .logo img {
	    max-height: 60px;
	}

	/*hero area*/
	.hero-area {
		height: 375px;
	    padding-top: 100px;
	}

	.hero-area .title {
	    font-size: 36px;
	}

	.hero-area .hero-desc {
	    font-size: 18px;
	}

	.animated-line {
	    margin-top: 5px;
	}

	.hire-me {
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	        -ms-flex-direction: column;
	            flex-direction: column;
	}

	.hire-me-title {
	    font-size: 20px;
	    margin-bottom: 10px;
	}

	.hire-me-buttons a:first-child {
	    margin-left: 0;
	}

	.hire-me-buttons img {
	    height: 17px;
	}

	/*templates area*/
	/*.template-filter-buttons {
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}*/

	.template-filter-buttons button {
	    /*font-size: 13px;
	    margin-right: 10px;*/
	    font-size: 12px;
	    width: 60px;
	    height: 60px;
	    line-height: 55px;
	    padding: 0;
	    margin: 15px 17px;
	}
	
	.single-template {
		width: 100%;
	}

	.single-template-inner {
    	height: auto;
    	max-height: 262px;
    }

	/*magnific popup*/
	.mfp-image-holder .mfp-content {
	    max-width: 90% !important;
	}
	button.mfp-arrow {
		display: none;
	}

	/*copyright area*/
	.copyright small {
		font-size: 11px;
	}
}



@media (max-width: 400px) {
	/*hero area*/
	.hero-area .hero-desc {
	    font-size: 14px;
	}

	/*templates area*/
	.single-template-inner {
    	max-height: 180px;
    }

	.template-filter-buttons button:nth-last-child(-n+2) {
	    margin-top: 0;
	}
}