/*
Template: Devaid - MultiPage Psd Template
Author: Theme-rocket
Author URI: https://themeforest.net/user/theme-rocket/portfolio 
Version:  1.0
Description: Devaid MusicTemplate is only for your Music Industry.

*/

/*=========== MEDIA WIDTH ===========  
	max-width: 991px
	max-width: 900px
	max-width: 800px
	max-width: 767px
	max-width: 640px
	max-width: 575px 
	min-width: 320px
	max-width: 480px
	max-width: 370px

	*/

/* --------------------
  Tablet Screen 
----------------------*/

@media only screen and (min-width: 1600px) and (max-width: 1920px) {

	.hero-area {
		height: 100vh;
	}

}

@media (max-width: 992px) {
	.top-social-icon {
		display: none;
	}

	.header-nav .menu>li>a {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.hero-item h1 {
		font-size: 32px;
	}

	.top-bar-info li {
		padding-left: 10px;
		padding-right: 10px;
	}

	.portfolio-menu button {
		padding: 0 10px;
		margin-bottom: 10px;
	}

	.header-top-style2 {
		padding: 0;
	}

	.header-nav-style2 .header-nav .menu>li>a {
		padding-left: 9px !important;
		padding-right: 9px !important;
	}

	.header-logo-none {
		display: none;
	}

	.header-nav-style2 .header-nav {
		text-align: center;
	}

	.header-logo2 {
		display: block;
		padding-left: 30px;
	}

	.portfolio-item img {
		width: 100%;
	}

	.about-video {
		margin-top: 50px;
	}

	.frequently-ask-question {
		padding-bottom: 100px;
	}

	.brand-item {
		text-align: center;
	}	

	.secondary-bg.has-color {
		background-color: transparent !important;
	}

	.header-nav-style2,
	.is-sticky .header-nav-style2 {
		background-color: #00ABAB;
	}

	.hero-item h1 span::after {
		bottom: 4px;
	}

	.section-title {
		text-align: center;
	}

	.footer-top.pt-100 { 
		padding-top: 50px; 
		padding-bottom: 0;
	}

	.contact.breadcrumb-area {
		height: 400px !important;
	}

	.social-icon li a:hover,
	.header-nav .menu > li > a:hover,
	.header-nav .menu > li > a:focus,
	.header-nav .menu > li.active > a {
		color: #fff;
	}

}


@media (max-width: 800px) {
	.top-social-icon {
		display: none;
	}

	.top-bar-info {
		text-align: center;
	}

	.language-select {
		padding-bottom: 10px;
		text-align: center;
	}

	.header-nav {
		margin-top: -38px;
	}

	.lead {
		font-size: 14px;
	}

	.hero-item h1 {
		font-size: 28px;
	}

	.portfolio-menu button {
		padding: 0 12px;
		margin-bottom: 10px;
	}

	.testimonial-item p::after {
		left: 0;
		top: -35px;
	}

	.testimonial-item {
		padding: 30px
	}

	.contact-imfo {
		margin-top: 50px;
		padding-left: 0;
	}

	#hero-slider1 .owl-nav div {
		width: 60px;
		height: 60px;
		line-height: 60px
	}

	.top-bar-info {
		display: none !important;
		text-align: center;
	}

	.section-title {
		max-width: 100%;
	}

	.fun-fact-style2 {
		margin-left: 0;
		margin-right: 0;
	}

	.contact-imfo,
	.contact-form {
		padding: 0 !important;
	}

	.gap-section2 img.pt-150 {
		margin-bottom: 50px;
		padding-top: 50px;
	}

	.widget-opening ul li {
		font-size: 12px;
	}

	.is-sticky .header-nav-area {
		padding: 20px 0 !important
	}

	.header-nav {
		margin-top: -38px;
		position: absolute;
		right: 0;
		top: 22px;
		width: 100%;
	}

	.header-nav-style2 {
		padding: 20px 0 !important;
	}

	.header-nav-style2 .cssmenu>ul {
		margin-top: 15px !important;
	}

	.hero-item h1 {
		padding-top: 0;
	}

	.pricing-plan {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

}

@media (max-width: 767px) {
	.btn {
		margin-bottom: 10px;
	}

	.fun-fact-item {
		margin-bottom: 50px;
	}

	.header-nav {
		position: relative;
		margin-top: -50px;
	}

	.is-sticky .header-nav {
		margin-top: -50px;
	}

	.video-popup img {
		width: 50px;
	}

	.widget-title {
		margin-bottom: 20px !important;
	}

	.widget {
		margin-bottom: 50px;
	}

	.header-logo2 {
		max-width: 190px;
		z-index: 1;
	}

}

/* ---------------------
  Small Mobile
-----------------------*/

@media (max-width: 640px) {
	.testimonial-item p::after {
		position: relative;
		content: none;
	}

	.blog-post-thumbnail h2 {
		font-size: 22px;
	}

	.contact-form.bg-white {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.testimonial-item p.lead {
		font-size: 16px;
	}

	.post-content {
		padding: 30px;
		position: relative;
	}

	.post-content .col-md-7 {
		margin-bottom: 39px;
	}

	.blog-post-thumbnail img {
		width: 100%;
	}

	.author-thumbnail {
		width: 50px !important;
	}

	.post-content h2 {
		color: #000000 !important;
	}

	.post-content ul li {
		color: #000000 !important;
	}

	.post-content .media-body h6 {
		color: #000000 !important;
	}

	.post-content .media-body p {
		color: #000000 !important;
	}

	h2 {
		font-size: 28px !important;
		line-height: 36px;
	}

	.fun-fact-item h4,
	h4 {
		font-size: 18px !important;
		line-height: 26px;
	}

	.fun-fact-item {
		text-align: center;
	}

	.fun-fact-item h4::after {
		left: 0;
		right: auto;
		width: 100% !important;
	}

	.fun-fact-area.pb-100 {
		padding-bottom: 0;
	}

	.client-testimonial {
		margin: 0 15px
	}

	.contact-imfo-item p.lead {
		font-size: 16px;
	}

	.heading-title {
		text-align: center;
		padding-top: 20px;
	}

	.contact-form {
		padding: 30px
	}


}


@media (max-width: 575px) {}


/* -------------------------
  Large Mobile :480px. 
---------------------------*/

@media only screen and (min-width: 320px) and (max-width: 480px) {

	body p {
		font-size: 14px;
	}

	.testimonial-item {
		padding: 15px;
	}

	.gap-section h2 {
		font-size: 26px !important;
		line-height: 34px;
	}

	.post-author img {
		height: 90px;
		margin-left: 10px;
		margin-right: 10px !important;
		width: 100px;
	}

	.post-author {
		padding-right: 10px !important;
	}

	.post-author .media-body {
		padding: 10px 0;
	}

	.post-author .media-body h4 {
		font-size: 16px !important;
	}

	.post-author .media-body p {
		font-size: 12px !important;
		line-height: 22px;
	}

	.post-details .lead {
		font-size: 14px !important;
	}

}

@media only screen and (max-width: 370px) {}