=
/* 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%;
}
.main-banner-section.style-two {
position: relative;
padding-bottom: 85px;
}
}
@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;
}
/* index page */
.main-banner-section h2 {
font-size: 54px;
}
/* index page end */
}
@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-menu .navigation>li {
margin-left: 20px;
}
.main-header .main-box .auto-container {
margin: 0px;
}
}
@media only screen and (max-width: 991px) {
/* .client-row {
margin-left: 75px;
} */
.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;
}
/* index page */
.main-banner-section.style-two .inner-container {
padding: 35px 0;
}
/* index page end */
/* contact page */
.tab button {
padding: 0;
width: 175px;
height: 50px;
margin-bottom: 5px;
}
.section-text p {
text-align: justify;
margin-bottom: 20px;
}
.progress {
margin-top: 30px;
}
.about-slider {
padding: 100px 25px;
}
.team-item {
padding: 25px 0px;
}
.multi-columns-row {
margin-top: 0;
}
.align-center {
padding: 15px 0px;
}
/* contact page end */
/* portfolio page */
.mod-breadcrumbs {
margin-top: 30px;
}
.desktop-view {
display: none;
}
.mobile-view {
display: block;
}
.page-section {
padding: 70px 0;
}
.main-footer .footer-upper {
padding: 70px 0 60px;
}
.main-footer .footer-upper .footer-column {
margin: 0;
}
.main-banner-section.style-two {
padding-bottom: 0px;
height: 100vh;
}
/* portfolio page end */
/* service-page */
.pic2 {
height: 350px;
}
.pic3 {
height: 350px;
}
.image-overlay {
top: -65px;
}
.image-overlay2 {
top: -65px;
}
/* service-page end */
}
@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: 25px 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: #000;
}
.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;
}
/* index page */
.client img {
margin: 35px 30px;
}
/* index page end */
}
@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;
}
.footer-widget.text-widget {
margin-bottom: 20px;
}
.footer-widget.links-widget {
margin-bottom: 20px;
}
.main-footer .footer-widget h2{
margin-bottom: 0;
}
}
@media only screen and (max-width: 479px) {
.clients-section.style-two .image {
width: 50%;
}
.portfolio-section .medium-column {
width: 100%;
}
/* index page */
.main-banner-section h2 {
line-height: 30px
}
.col-md-client-5 {
width: 50%;
/* float: left; */
/*padding-right: 15px;*/
/*padding-left: 15px;*/
}
.client-wrap {
height: 95px;
}
.client-row {
margin-left: 0;
}
/* index page end */
}