=
/* Cardiff - Portfolio HTML Template*/

@media only screen and (max-width: 6000px) {
	.page-wrapper {
		overflow: hidden;
	}
}

@media only screen and (min-width: 1200px) {
	.container,
	.container-fluid {
		padding: 0;
	}
}

@media only screen and (max-width: 1500px) {
	.portfolio-section.style-three .medium-column {
		width: 33.333%;
	}
}

@media only screen and (max-width: 1300px) {
	.main-header.mobile-visible {
		position: relative;
		top: 0px;
		opacity: 1;
		visibility: visible;
		z-index: 9999;
	}
}

@media only screen and (min-width: 1141px) {
	.gallery-item.large-column.w-75 .image {
		width: 66.66667%;
	}
}

@media only screen and (max-width: 1140px) {
	.main-header .info-box {
		display: inline-block;
		float: none;
		text-align: left;
	}
	.main-banner-section .icon-one,
	.main-banner-section .icon-two,
	.main-banner-section .icon-three,
	.main-banner-section .icon-four,
	.main-banner-section .icon-five,
	.main-banner-section .icon-six,
	.main-banner-section .icon-seven,
	.main-banner-section .icon-eight,
	.main-banner-section .icon-nine,
	.main-banner-section .icon-ten,
	.main-banner-section .icon-eleven,
	.main-banner-section .icon-twelve,
	.main-banner-section .icon-thirteen,
	.main-banner-section .icon-fourteen,
	.main-banner-section .icon-fifteen,
	.main-banner-section .icon-sixteen,
	.main-banner-section .icon-seventeen,
	.main-banner-section .icon-eighteen,
	.main-banner-section .icon-ninteen,
	.main-banner-section .icon-twenty,
	.about-me-section .icon-one,
	.about-me-section .icon-two,
	.portfolio-section .icon-one,
	.portfolio-section .icon-two,
	.portfolio-section .icon-three,
	.services-section .icon-one,
	.services-section .icon-two,
	.team-section .icon-one,
	.team-section .icon-two,
	.team-section .icon-three,
	.team-section .icon-four,
	.blog-section .icon-one,
	.blog-section .icon-two,
	.blog-section .icon-three,
	.main-footer .icon-one,
	.main-footer .icon-two,
	.main-banner-section .icon-twenty {
		display: none;
	}
	.main-banner-section .side-image {
		display: none;
	}
	.main-banner-section {
		padding-bottom: 170px;
	}
	.main-banner-section .inner-container {
		padding: 140px 0px 10px;
	}
	.main-banner-section .social-icon-one {
		left: 15px;
	}
	.social-icon-one li {
		display: inline-block;
		margin-right: 15px;
	}
	.main-header .header-lower .search-box-outer,
	.main-menu .navigation>li>a:after,
	.main-menu .navigation>li:after,
	.main-menu .navigation>li>a:before,
	.main-menu .navigation>li>a:after,
	.main-banner-section .left-curve {
		display: none;
	}
	.page-wrapper {
		padding: 0px;
	}
	.main-menu {
		padding-top: 0px;
	}
	.main-header .header-upper {
		padding: 0px 15px;
	}
	.portfolio-section .medium-column {
		width: 33.333%;
	}
	.portfolio-section .large-column.style-two,
	.portfolio-section .large-column {
		width: 66.333%;
	}
	.portfolio-section.style-three .medium-column {
		width: 50%;
	}
	.clients-section.style-two .image {
		width: 33.333%;
	}
	.comment-outer .left-column,
	.comment-outer .right-column {
		float: left;
		width: 100%;
	}
}

@media only screen and (min-width: 768px) {
	.main-menu .navigation>li>ul,
	.main-menu .navigation>li>ul>li>ul {
		display: block !important;
		visibility: hidden;
		opacity: 0;
	}
	.main-header.mobile-visible {
		display: none;
	}
}

@media only screen and (max-width: 1023px) {
	.page-title h2 .icon-sixteen {
		display: none;
	}
	.main-header .nav-outer {
		padding-right: 0px;
	}
	.main-header .header-upper .upper-right {
		position: relative;
		width: 100%;
		padding-top: 0px;
	}
	.main-menu .navigation>li a {
		background: none;
	}
	.main-header .main-box .auto-container {
		margin: 0px;
	}
}

@media only screen and (max-width: 991px) {
	.portfolio-section .medium-column {
		width: 50%;
	}
	.portfolio-section .large-column.w-75,
	.portfolio-section .large-column.style-two,
	.portfolio-section .large-column {
		width: 100%;
	}
	.portfolio-section.style-three .medium-column {
		width: 50%;
	}
	.about-me-section .image-box {
		margin-bottom: 80px;
	}
}

@media only screen and (max-width: 767px) {
	.main-header.mobile-visible {
		display: block;
	}
	.side-nav-two {
		display: none;
	}
	.page-wrapper.style-two {
		padding-left: 0px;
	}
	.fixed-menu-bg {
		height: 90px;
	}
	.main-header .outer-box.nav-toggler-two {
		display: none;
	}
	.main-header .outer-box.nav-toggler {
		margin-top: 20px;
	}
	.main-header .header-spacing {
		height: 90px;
	}
	.main-header .nav-outer {
		width: 100%;
		margin-top: -90px;
	}
	.main-header .logo-outer {
		padding: 24px 0;
	}
	.main-header .main-menu {
		padding-top: 0px;
		width: 100%;
		margin: 0px;
	}
	.main-menu .collapse {
		float: none;
		width: 100%;
		padding: 10px 0px 0px;
		border: none;
		margin: 0px;
		-ms-border-radius: 0px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;
	}
	.main-menu .collapse.in,
	.main-menu .collapsing {
		padding: 0px 0px 0px;
		max-height: 320px;
		border: none;
		margin: 0px 0px 15px;
		-ms-border-radius: 0px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		-o-border-radius: 0px;
		border-radius: 0px;
	}
	.main-menu .navbar-header {
		position: relative;
		float: none;
		display: block;
		text-align: right;
		width: 100%;
		padding: 34px 0px 30px;
		right: 0px;
		z-index: 12;
	}
	.main-menu .navbar-header .navbar-toggle {
		display: inline-block;
		z-index: 7;
		border: 1px solid #202020;
		float: none;
		margin: 0px 0px 0px 0px;
		border-radius: 3px;
		background: #202020;
	}
	.header-style-three .main-menu .navbar-header .navbar-toggle {
		border-color: #ffffff;
		background-color: #ffffff;
	}
	.header-style-three .main-menu .navbar-header .navbar-toggle .icon-bar {
		background-color: #202020;
	}
	.main-menu .navbar-header .navbar-toggle .icon-bar {
		background: #ffffff;
	}
	.main-menu .navbar-collapse>.navigation {
		float: none !important;
		margin: 0px !important;
		width: 100% !important;
		background: #202020;
		padding: 15px 0;
	}
	.main-menu .navbar-collapse>.navigation>li {
		margin: 0px !important;
		float: none !important;
		width: 100%;
	}
	.main-menu .navigation>li>a,
	.main-menu .navigation>li>ul:before {
		border: none;
	}
	.main-menu .navbar-collapse>.navigation>li>a {
		padding: 10px 10px !important;
		border: none !important;
	}
	.main-menu .navigation li.dropdown>a:after,
	.main-menu .navigation>li.dropdown>a:before,
	.main-menu .navigation>li>ul>li>a::before,
	.main-menu .navigation>li>ul>li>ul>li>a::before {
		color: #ffffff !important;
		right: 15px;
		font-size: 16px;
		display: none !important;
	}
	.main-menu .navbar-collapse>.navigation>li>ul,
	.main-menu .navbar-collapse>.navigation>li>ul>li>ul {
		position: relative;
		border: none;
		float: none;
		visibility: visible;
		opacity: 1;
		display: none;
		margin: 0px;
		padding: 0px;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100%;
		background: #202020;
		-webkit-border-radius: 0px;
		-ms-border-radius: 0px;
		-o-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		-o-transition: none !important;
		-moz-transition: none !important;
		box-shadow: none !important;
	}
	.main-menu .navbar-collapse>.navigation>li>ul,
	.main-menu .navbar-collapse>.navigation>li>ul>li>ul {
		padding-left: 20px;
	}
	.main-menu .navbar-collapse>.navigation>li,
	.main-menu .navbar-collapse>.navigation>li>ul>li,
	.main-menu .navbar-collapse>.navigation>li>ul>li>ul>li {
		border-bottom: none;
		opacity: 1 !important;
		top: 0px !important;
		left: 0px !important;
		visibility: visible !important;
	}
	.main-menu .navbar-collapse>.navigation>li>ul>li:last-child {
		border-bottom: none !important;
	}
	.main-menu .navbar-collapse>.navigation>li>a,
	.main-menu .navbar-collapse>.navigation>li>ul>li>a,
	.main-menu .navbar-collapse>.navigation>li>ul>li>ul>li>a {
		padding: 12px 30px !important;
		line-height: 22px;
		color: #ffffff;
		font-size: 14px;
		font-weight: 400;
		background: #202020;
		text-align: left;
		min-height: 0px;
	}
	.main-menu .navbar-collapse>.navigation>li>a:hover,
	.main-menu .navbar-collapse>.navigation>li>a:active,
	.main-menu .navbar-collapse>.navigation>li>a:focus {
		background: #202020;
	}
	.main-menu .navbar-collapse>.navigation>li:hover>a,
	.main-menu .navbar-collapse>.navigation>li>ul>li:hover>a,
	.main-menu .navbar-collapse>.navigation>li>ul>li>ul>li:hover>a,
	.main-menu .navbar-collapse>.navigation>li.current>a,
	.main-menu .navbar-collapse>.navigation>li.current-menu-item>a {
		background: #202020;
		color: #ffffff !important;
	}
	.main-menu .navbar-collapse>.navigation li.dropdown .dropdown-btn {
		display: block;
		background-color: #2f2f2f;
	}
	.main-menu .navbar-collapse>.navigation li.dropdown:after,
	.main-menu .navigation>li>ul:before,
	.main-header .info-box:after,
	.main-slider .social-icon-one {
		display: none !important;
	}
	/* end main menu */
	/* section padding */
	.sp-one {
		padding: 80px 0;
	}
	.sp-two {
		padding: 80px 0 60px;
	}
	.sp-three {
		padding: 80px 0 40px;
	}
	.sp-four {
		padding: 80px 0 0px;
	}
	.sp-five {
		padding: 0px 0 80px;
	}
	.sp-six {
		padding: 80px 0;
	}
	.sp-seven {
		padding: 80px 0 60px;
	}
	.sp-eight {
		padding: 80px 0 40px;
	}
	.sp-nine {
		padding: 80px 0 0px;
	}
	.sp-ten {
		padding: 0px 0 80px;
	}
	.sp-eleven {
		padding: 0px 0 50px;
	}
	.main-banner-section .inner-container {
		padding-top: 60px;
	}
	.main-banner-section h2 {
		font-size: 40px;
	}
	.sec-title h2 {
		font-size: 30px;
	}
	.team-block.style-two .inner-box {
		position: relative;
		display: flex;
		flex-direction: column-reverse;
	}
	.portfolio-section.style-three .medium-column {
		width: 100%;
	}
	.clients-section.style-two .image {
		background: transparent;
		line-height: 250px;
		width: 50%;
	}
	.portfolio-section .pull-right {
		float: left !important;
	}
}

@media only screen and (max-width: 599px) {
	.sec-title h2 {
		font-size: 24px;
	}
	.main-banner-section h2 {
		font-size: 30px;
	}
	.main-banner-section .text {
		font-size: 14px;
	}
	.skill-block .inner-box {
		padding-left: 200px;
	}
	.skill-block .inner-box .image {
		width: 180px;
	}
	.news-block .inner-box {
		padding-right: 0px;
	}
	.news-block .inner-box .btn-box {
		position: relative;
		top: 0;
		margin-top: 20px;
	}
	.main-footer .footer-bottom .copyright p {
		width: 100%;
	}
	.testimonial-block .inner-box {
		padding-left: 55px;
	}
	.sec-title:before {
		width: 70px;
	}
	.sec-title .title {
		padding-left: 80px;
	}
}

@media only screen and (max-width: 479px) {
	.clients-section.style-two .image {
		width: 50%;
	}
	.portfolio-section .medium-column {
		width: 100%;
	}
}