/*
Author       : Hash Theme.
Template Name: Brome - Responsive Html5 Digital Agency Template
Version      : 1.0
*/

/* Large Layouts */

/*
@media only screen and (min-width: 2048px) {
	.svg-object {
		border: 1px solid yellow;
		padding: 2vw 3vw;
	}
}
*/

@media only screen and (min-width: 1201px) and (orientation: portrait) {
	html {
		font-size: 18px;
	}
	.svg-object {
		/* border: 1px solid blue; */
		padding: 1rem 0rem;
	}
}


@media only screen and (min-width: 1400px) and (orientation: landscape) {
	.svg-object {
		/* border: 1px solid orange; */
		padding: 1rem 0rem;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {}

@media only screen and (min-width: 1201px) and (max-width: 1340px) {
    video {
		height: 100%;
	}
}

@media only screen and (max-width: 1200px) {
	:root {
		--be-nav-offset: 104px;
	}

	html {
		font-size: 14px;
	}

	#mainNav {
		padding: 18px;
	}
	#mainNav.navbar-shrink {
		padding: 8px;
	}
	#mainNav .navbar-brand img {
		height: 56px;
	}
	#mainNav .navbar-nav>li>a {
		padding: 8px 10px;
		font-size: 0.8rem;
	}
	#mainNav .navbar-nav>li.quote-btn>a {
		padding: 0;
		margin-left: 0;
		text-align: left;
	}
	.owl-theme.home-slider .owl-dots {
		width: 932px;
	}
	.single-about-icon {
		margin-right: 32px;
	}
	.single-service-main {
		height: 363px;
	}
	.single-blog-details-ho span {
		padding-right: 10px;
	}
	.single-blog-details-ho span a {
		padding-left: 5px;
	}
}

@media only screen and (max-width: 1140px) {
	#mainNav .navbar-nav>li>a {
		padding: 8px 8px;
	}
	.single-service {
		padding: 60px;
	}
	.custom-container {
		max-width: 1100px;
	}

	.accordion-box .block .acc-btn .icon-outer {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}
	.single-price-list {
		padding: 0 15px 15px 15px;
	}

	.single-price-list p {
        font-size: 0.9rem;
        padding: 0 0 1rem 0;
    }
}

@media only screen and (max-width: 1023px) {
	#mainNav .navbar-nav>li>a {
		padding: 8px 6px;
	}

	#newsModal .modal-body {
		padding-top: 0px !important;
	}

	#newsModal .modal-title {
		letter-spacing: 0px;
	}
	.news-modal-image-header {
		width: 100%;
		display: block;
	}
	.news-modal-image {
		display: none;
	}
	.news-content {
		font-size: 0.8rem;
		letter-spacing: -1px;
	}
}

/* portrait layout with wide screen - not mobile phones */ 
@media (min-width: 768px) and (orientation: portrait) {
	.svg-object {
		/* border: 1px solid blue; */
		padding: 1rem 0rem;
	}
}


/* Tablet Layout: 768px. */


@media only screen and (max-width: 992px) {
	.right-border {
		border-right: none;
		padding-bottom: 1rem;
		/* border-bottom: 0.15rem solid #93989B; */
	}

	.w-100-portrait {
		width: 100% !important;
	}

	.w-90-portrait {
		width: 90% !important;
        margin: auto;
	}

	.w-75-portrait {
		width: 75% !important;
        margin: auto;
	}

	.w-50-portrait {
		width: 50% !important;
        margin: auto;
	}


}


@media only screen and (min-width: 768px) and (max-width: 992px) {
	.preload-loader {
		left: 40%;
	}
	#mainNav {
		background: #fff;
	}
	#mainNav .navbar-nav>li>a {
		padding: 8px 0px;
		color: #333;
	}
	.navbar-brand h3.main-logo {
		color: #333;
	}
	.navbar-brand h3.main-logo span {
		color: #fff;
	}
	#mainNav .navbar-toggler {
		color: #333;
		border-color: #333;
	}
	.navbar-nav {
		margin-top: 25px;
	}
	#mainNav .navbar-nav>li>a.active:before,
	#mainNav .navbar-nav>li>a.active:after,
	#mainNav .navbar-nav>li>a:hover:before,
	#mainNav .navbar-nav>li>a:hover:after {
		width: 100%;
		left: 0;
	}
	.quote-btn {
		padding: 0;
		margin-left: 0;
		margin-top: 2px;
		text-align: left;
	}
	.quote-btn:before {
		opacity: 0;
	}
	#mainNav .navbar-nav>li.quote-btn>a:before,
	#mainNav .navbar-nav>li.quote-btn>a:after {
		opacity: 1;
	}
	#mainNav .navbar-nav>li.quote-btn>a:hover,
	#mainNav .navbar-nav>li.quote-btn>a:focus,
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a:hover,
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a:focus {
		color: #333;
	}
	#mainNav .navbar-nav>li.quote-btn>a {
		background: transparent;
		padding: 8px 0;
	}
	#mainNav.navbar-shrink.navbar-shrink .quote-btn {
		background: #fff;
	}
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a {
		background: #fff;
		color: #333;
	}
	.slider-content h2 {
		font-size: 50px;
	}
	.single-about-icon {
		margin-right: 20px;
	}
	.single-about-text {
		width: 71%;
	}
	.single-about-text h4 {
		font-size: 18px;
	}
	.owl-theme.home-slider .owl-dots {
		width: 100%;
		text-align: center;
	}
	.team-slider.owl-theme .owl-nav {
		bottom: -70px;
	}
	.section-title-left h3 {
		font-size: 25px;
	}
	.portfolio-filter-menu {
		margin-top: 30px;
		text-align: left;
	}
	.portfolio-more-btn {
		text-align: center;
	}
	.sidebar-padding-left {
		padding-left: 30px;
	}
	.single-blog-details-ho span {
		padding-right: 0;
		font-size: 13px;
	}
	.single-blog-details-ho span a {
		padding-left: 0;
	}
	.single-blog-details-ho h4 a {
		font-size: 16px;
	}
	.single-award {
		padding: 17px;
	}
	.single-award .single-award-icon {
		margin-right: 0;
	}
	.single-award .single-award-icon i {
		font-size: 30px;
	}
	.single-award .single-award-text {
		width: 100%;
	}
	.single-award .single-award-text h4 {
		font-size: 13px;
		margin: 10px 0 0;
	}
	.single-award .single-award-icon,
	.single-award .single-award-text {
		float: none;
		text-align: center;
	}
	.sidebar-padding-left-b {
		padding: 0 15px;
	}
	.widget-title:after {
		left: 4%;
	}
}


/* Mobile Layout: 320px. */

@media only screen and (max-width: 769px) {
	:root {
		--be-nav-offset: 76px;
	}

	body {
		font-size: 0.9rem;
		line-height: 1.3rem;
	}
	.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
		line-height: 1.3;
	}
	.preload-loader {
		left: 29%;
	}

	.svg-object {
		/* border: 1px solid red; */
		padding: 1rem 0px;
	}

	.svg-container li {
		margin-left: 18px !important;
		margin-right: 8px !important;
		margin-top: 8px;
	}
	
	.fancybox-caption {
		padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	}

	.fancybox-caption__body {
		font-size: 0.8rem;
		line-height: 1.1rem;
	}
	.fancybox-content {
		padding: 3rem;
		border-radius: 0rem;
		border-width: 6px;
		margin: 0.6rem;
	}
	.page-title {
		color: rgb(132, 133, 135);
	}
	.page-title h1, .page-title h2 {
        font-size: 1rem !important;
	}
	.section-padding {
		padding-top: 40px;

	}
	.viewport-section {
		min-height: calc(100svh - var(--be-nav-offset));
	}
	.modern-surface {
		padding: 1.5rem 1.25rem;
	}
	.cta-inline-visuals {
		grid-template-columns: 1fr;
	}
	.cta-inline-visuals img {
		height: 180px;
	}
	.section-title {
		margin-bottom: 3vh
	}
	.section-title .content {
		margin-top: 3vh;
		text-align: left;
	}

	.section-title h6 {
		font-size: 0.65rem;
	}
	.section-title h3 {
		font-size: 1.2rem;
	}

	.single-service {
		padding: 20px 40px;
	}
	.single-service-main {
		height: 320px;
	}

	#concept .container .row.mt-4 .col-lg-12 {
		padding: 0px;
		/* border: 1px solid green; */
	}

	.content h6, .content h5 {
		font-size: 0.9rem;
	}
	.contact {
		padding: 25px 25px 15px;
	}
	.contact .form-group {
		margin-bottom: 15px;
	}
	#benefits > div.row > div > div > div.row > div {
		padding: 0;
	}
	#benefits > div.row > div {
		padding: 0;
	}

	#usp > div > div.custom-container.mt-4 > div > div > div:nth-child(2) > h5 {
		margin-top: 2rem;
	}

	p {
		line-height: 1.3rem;;
	}
	.dropdown-menu {
		border: none;
	    font-size: 0.8rem;
		line-height: 1.15rem;
		background-color: #fff;
	}
	.dropdown-item {
        margin-left: 2rem;
        margin-right: 0.3rem;
	}
	#mainNav.navbar-shrink {
		padding: 2px 15px;
	}
	.single-price-pricing {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	
	.single-price-list {
		padding-top: 5px;
	}
	.single-price-title {
		padding-bottom: 15px;
	}
	.single-price-title h4 {
		font-size: 1rem;
		padding-top: 25px;
		padding-bottom: 5px;
	}

	.single-price-pricing {
		padding-bottom: 10px;
	}

	blockquote {
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
		margin-inline-start: 20px;
		margin-inline-end: 20px;
	}

	.blockquote, .blockquote p {
		font-size: 0.75rem;
		line-height: 1.2rem;
	}

	.blockquote {
		&:before {
			font-size: 6rem !important;
			top: -1rem;
			left: -3rem;
		}
		&:after {
			font-size: 6rem !important;
			bottom: 0;
			right: -1rem;
		}
	}

	.vbox-container {
		max-width: 100%;
	}

	.vbox-title {
		height: 4vh;
        min-height: 50px;
		font-size: 0.9rem;
		display: flex;
		justify-content: center; 
		align-items: center;
	}

	.single-feature h4 {
		font-size: 1.1rem;
	}

	.our-usecase  {
		margin: 1rem 0;
	}

	.accordion-box {
		margin-left: -16px;
	}
	li.accordion {
		margin-bottom: 10px !important;
	}

	#footerone {
		padding: 25px 15px;
	}
	
	.accordion-box .block .acc-btn .icon-outer {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}

	.accordion-box .block .content, .accordion-box .block .acc-btn {
		padding-left: 46px;
		padding-right: 10px;
	}

	.accordion-box .block .acc-content ol li, .accordion-box.process .block .content ol li, .custom-container .content ol li {
		margin-left: 0.5rem !important;
		margin-top: 0.3rem;
	}

	.accordion-box .block .acc-content h6 {
		font-size: 0.85rem;
		margin-top: 1rem;
		margin-bottom: 0.5rem;
	}

	.single-price-pricing span.price .price-digit, .single-price-pricing span.price .yield-short {
		font-size: 40px;
	}

	.single-price-pricing .price {
		margin: 20px 0 10px;
	}
	
	#mainNav {
		background: #fff;
	}
	#mainNav .navbar-nav>li>a {
		padding: 8px 0px;
		color: #333;
	}
	.navbar-brand h3.main-logo {
		color: #333;
	}
	.navbar-brand h3.main-logo span {
		color: #fff;
	}
	#mainNav .navbar-toggler {
		color: #333;
		border-color: #333;
	}
	.navbar-nav {
		margin-top: 25px;
	}
	#mainNav .navbar-nav>li>a.active:before,
	#mainNav .navbar-nav>li>a.active:after,
	#mainNav .navbar-nav>li>a:hover:before,
	#mainNav .navbar-nav>li>a:hover:after {
		width: 100%;
		left: 0;
	}
	.quote-btn {
		padding: 0;
		margin-left: 0;
		margin-top: 2px;
		text-align: left;
	}
	.quote-btn:before {
		opacity: 0;
	}
	#mainNav .navbar-nav>li.quote-btn>a:before,
	#mainNav .navbar-nav>li.quote-btn>a:after {
		opacity: 1;
	}
	#mainNav .navbar-nav>li.quote-btn>a:hover,
	#mainNav .navbar-nav>li.quote-btn>a:focus,
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a:hover,
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a:focus {
		color: #333;
	}
	#mainNav .navbar-nav>li.quote-btn>a {
		background: transparent;
		padding: 8px 0;
	}
	#mainNav.navbar-shrink.navbar-shrink .quote-btn {
		background: #fff;
	}
	#mainNav.navbar-shrink .navbar-nav>li.quote-btn>a {
		background: #fff;
		color: #333;
	}
	.home-static-text,.home-particle-text {
		padding-top: 165px;
	}
	.html5-video-text h2 {
	    margin-top: 200px;
	}
	.home-static-text h2:before,
	.home-static-text h2:after,
	.html5-video-text h2:before,
	.html5-video-text h2:after,
	.home-particle-text h2:before,
	.home-particle-text h2:after {
		display: none;
	}
	.home-static-text h2,.html5-video-text h2,.home-particle-text h2 {
		font-size: 22px;
	}
	.btn-home-slider-1,.btn-home-slider-2,.btn-home-slider-3 {
		padding: 5px 18px;
		margin-bottom: 8px;
		margin-right: 0;
	}
	.btn-scroll-down {
		bottom: 0;
	}
	.slider-content h2:after {
		bottom: -25px;
	}
	.slider-content h2 {
		font-size: 24px;
		margin: 0 0 40px;
		line-height: 33px;
	}
	.slider-content h2 span {
		font-size: 18px;
	}
	.slider-content p {
		font-size: 16px;
		padding-top: 10px;
		margin-bottom: 25px;
		line-height: 24px;
	}
	.owl-theme.home-slider .owl-dots {
		width: 100%;
		text-align: center;
	}
	.owl-theme.home-slider .owl-nav.disabled + .owl-dots {
		margin: 0;
	}
	.single-about {
		margin-bottom: 20px;
	}
	.portfolio-filter-menu {
		margin-top: 30px;
		text-align: left;
	}
	.portfolio-more-btn {
		text-align: center;
	}
	.portfolio-filter-menu ul li {
		margin: 0 15px 0 0;
		font-size: 13px;
	}
	.single-team-img {
		left: 0;
		top: 0;
	}
	.single-team-dec {
		margin-left: 30px;
	}
	.team-slider.owl-theme .owl-nav {
		bottom: -70px;
	}
	.single-blog-imgh {
		margin-bottom: 20px;
	}

	.offer ul li, .overview ul li {
		padding-bottom: 0.3rem;
	}

	.feature-rounded {
		padding: 22px 15px !important;
	}
	.owl-theme.client-slider .owl-dots {
		margin-bottom: 70px;
	}
	.sidebar-padding-left {
		padding-left: 15px;
	}
	.owl-theme.services-slider .owl-nav div {
		display: none;
	}
	#footerone .row.mb-80 {
		margin-bottom: 0;
		font-size: 90%;
		padding-bottom: 0;
	}

	.footer-widget {
		margin-bottom: 25px;
	}

	#footertwo {
		font-size: 80%;
		line-height: 1.1rem;
	}
	.sidebar-padding-left-b {
		padding: 0 15px;
	}
	.content ul li {
		margin-left: 1.1rem !important;
		margin-bottom: 0.8rem;
	}

	.content ol {
		padding-inline-start: 20px;
	}

	#mainNav .navbar-brand img {
		height: 50px;
	}

	#mainNav {
		padding: 2px 15px;	}

	.modal-title {
		font-size: 100%;
	}

	.service-modal-content, .service-modal-content p, .service-modal-content ul li {
		font-size: 0.9rem;
	}

	.cookie-consent-modal .modal-content-wrap .modal-content {
		padding: 0.2rem;
	}

	.cookie-consent-modal .modal-content-wrap .modal-content .modal-header h3 {
		font-size: 1rem !important;
	}

	.service-quick-view .modal-dialog {
		max-width: 100vw;
		min-width: 100vw;
		margin: auto;
		width: 100vw;
	}

	.cookie-consent-modal .modal-content-wrap .modal-content .modal-body, .cookie-consent-modal .modal-content-wrap .modal-content .modal-footer .buttons  {
		font-size:0.85rem;
	}

	.cookie-btn-right {
		margin-left: 0;
		margin-top: 15px;
	}

	.banner-area {
		padding: 100px 0 60px;
		position: relative;
	}

	.single-blog-content {
		padding: 0px 20px 10px 20px;
		min-height: auto;
		height: auto;
	}

	.single-blog-meta p {
		margin: 6px 0 8px;
	}

	.single-blog-meta h4 {
		margin-top: 6px;
		line-height: 1rem;
	}
	.single-blog-image-box figure {
		margin-bottom: 2px;
	}
	.site-pagination {
		font-size: 0.8rem;
	}
	.site-pagination-top {
		margin-top: 0rem !important;
        margin-bottom: 1.5rem !important;
	}
	.site-pagination-bottom {
		margin-top: 0rem !important;
        margin-bottom: 3rem !important;
	}
	.single-press-item {
		padding: 12px;
		margin: 30px 12px 0px 12px;
	}
	.single-press-title h1 {
		font-size: 1.1rem;
		line-height: 1.2rem;
		margin: 0;
		letter-spacing: -0.01rem;
	}
	.single-press-image-container {
		padding: 0px 8px 0px 8px;
	}
	.single-press-image {
		padding-top: 8px;
		height: auto;
	}
	.single-press-meta {
		font-size: 0.6rem;
		padding: 3px 0px 3px 0px;
	}
	.single-press-meta span.date{
		display: none;
	}
	.single-press-content {
		letter-spacing: -0.01rem;
		height: auto;
	}

}


/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 769px) {
	.preload-loader {
		left: 40%;
	}
	.home-static-text {
		padding-top: 250px;
	}
	.slider-content h2 {
		font-size: 50px;
		margin: 0 0 40px;
	}
	.slider-content p {
		margin-bottom: 35px;
	}
}