/* ------------------------------------------------
  Project:   James - Personal Portfolio Html Template
  Author:    ThemeHt
------------------------------------------------ */


/* ------------------------
    Responsive Css
------------------------*/

@media (max-width: 1200px){
h1{font-size: 60px; line-height: 70px;}
h2{font-size: 36px; line-height: 42px;}
h3 {font-size: 28px; line-height: 38px;}
h4 {font-size: 22px; line-height: 30px;}
h5 {font-size: 18px; line-height: 26px;}
h6 {font-size: 17px; line-height: 24px;}

/*Padding*/
.lg-pr-5 {padding-right: 50px !important;}

/*Margin*/
.lg-mt-3{margin-top: 30px !important;}
.lg-mt-5{margin-top: 50px !important;}
.lg-mt-7{margin-top: 70px !important;}

/*Header*/
.logo img {height: 45px;}
#header-wrap.fixed-header .logo img {height: 40px;}

/*Blog*/
.post .post-desc {padding: 20px;}

}


@media (max-width: 992px){
h1{font-size: 40px; line-height: 50px;}
h2{font-size: 34px; line-height: 40px;}
h3 {font-size: 24px; line-height: 30px;}
h4 {font-size: 18px; line-height: 26px;}


/*Margin*/
.md-mt-0{margin-top: 0 !important;}
.md-mt-1{margin-top: 10px !important;}
.md-mt-3{margin-top: 30px !important;}
.md-mt-5{margin-top: 50px !important;}
.md-mt-7{margin-top: 70px !important;}
.md-mb-3{margin-bottom: 30px !important;}
.md-mb-5{margin-bottom: 50px !important;}
.md-mb-7{margin-bottom: 70px !important;}
.md-px-2 {padding-left: 20px !important; padding-right: 20px !important;}
.md-px-3 {padding-left: 30px !important; padding-right: 30px !important;}
.md-py-3 {padding-top: 30px !important; padding-bottom: 30px !important;}
.md-py-5 {padding-top: 50px !important; padding-bottom: 50px !important;}

.md-text-center{text-align: center !important;}
.md-text-left{text-align: left !important;}


/*Header*/
.logo img {height: 35px;}
.navbar {justify-content: flex-end; width: 100%; border-radius: 0 !important;}
.navbar-brand {left: 10px; margin-right: 0; position: absolute; top: 50%; padding: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}
.navbar-toggler {background:none; padding: 0; height: 40px; width: 40px; border-radius: 0; -webkit-box-shadow: 0 18px 42px 0 rgba(28, 30, 35, 0.15); -moz-box-shadow: 0 18px 42px 0 rgba(28, 30, 35, 0.15); box-shadow: 0 18px 42px 0 rgba(28, 30, 35, 0.15);}
.navbar-nav .nav-item{margin: 0;}
.navbar-nav .nav-link{padding: 10px !important; font-size: 16px; color: #ffffff}
.navbar-nav .nav-link:before, .navbar-nav .nav-link:after{display: none;}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active,
#header-wrap.fixed-header .navbar-nav .nav-link:hover, #header-wrap.fixed-header .navbar-nav .nav-link.active{background: #ffffff; color: #ff3342 !important;}
.navbar-nav .nav-link .menu-label::before, .navbar-nav .nav-link .menu-label::after{display: none;}
.navbar-nav.sm-collapsible .has-submenu{padding-top: 10px; padding-bottom: 10px;}
.navbar-collapse {background:#ff3342; overflow: auto; border: medium none; left: 0; padding: 0; position: absolute; top: 49px; width: 100%;}

.navbar-toggler span {width: 80%; height: 2px; margin: 0 auto; display: block; background: #ff3342; transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375); transition-delay: 0.2s;}
.navbar-toggler span:first-of-type {transform: rotate(45deg) translate(2px, 2px);}
.navbar-toggler span:nth-of-type(2) {opacity: 0;}
.navbar-toggler span:last-of-type {transform: rotate(-45deg) translate(1px, -1px);}
.navbar-toggler[aria-expanded="false"] span {transform: none; opacity: 1; margin: 5px auto;}
.navbar-toggler span{margin: 0 auto}
.header-2 .navbar-toggler span{background: #ffffff;}
.header-2 .fixed-header .navbar-toggler span{background: #ff3342;}
.header-2 .fixed-header .navbar-nav .nav-link{color: #ffffff;}

#sidenav .navbar-nav .nav-link{color: #17202a}
#sidenav .navbar-nav .nav-link:hover,
#sidenav .navbar-nav .nav-link:focus,
#sidenav .navbar-nav .nav-link.active {background: #1b111b; color: #ffffff;}

/*Rtl*/
html[dir="rtl"] .navbar-brand{left: inherit; right: 10px;}
html[dir="rtl"] .navbar-collapse {text-align: right;}

/*Counter*/
.counter label {font-size: 13px;}

/*Masonry*/
.grid.columns-3 .grid-item, .masonry.columns-3 .masonry-brick {width: 50%;}
.grid.columns-4 .grid-item, .masonry.columns-4 .masonry-brick {width: 33.333333%;}
.portfolio-item .portfolio-hover {padding: 10px;}

.sidebar{margin-top: 50px;}
.contact-info li {display: inline-block; padding: 0; width: 32.9%; vertical-align: top;}

.bnr-list li {font-size: 16px; letter-spacing: 1px;}
.banner img{width: 40%;}

}

@media (max-width: 767px){
h1{font-size: 40px; line-height: 50px;}
h2{font-size: 30px;}
h3 {font-size: 22px; line-height: 30px;}
h2.title .sub-title {font-size: 16px;}
.hidden-sm{display: none !important;}
.section-title h2{font-size: 34px; line-height: 38px;}
.section-title p {font-size: 16px;}
.lead{font-size: 15px; line-height: 24px;}

/*Margin*/
.sm-mt-0{margin-top: 0 !important;}
.sm-mt-3{margin-top: 30px !important;}
.sm-mt-5{margin-top: 50px !important;}
.sm-mb-3{margin-bottom: 30px !important;}
.sm-mb-5{margin-bottom: 50px !important;}

/*Padding*/
.sm-pt-0{padding-top: 0 !important;}
.sm-pt-5{padding-top: 50px !important;}
.sm-pt-8{padding-top: 80px !important;}
.sm-pt-10{padding-top: 100px !important;}
.sm-pb-5{padding-bottom: 50px !important;}
.sm-pb-8{padding-bottom: 80px !important;}
.sm-pb-10{padding-bottom: 100px !important;}
.sm-px-3{padding-left: 30px !important; padding-right: 30px !important;}
.sm-py-3{padding-top: 30px !important; padding-bottom: 30px !important;}
.sm-py-8{padding-top: 80px !important; padding-bottom: 80px !important;}

/*Counter*/
.counter {margin: 15px 0 !important;}

/*Portfolio*/
.grid.columns-2 .grid-item, .masonry.columns-2 .masonry-brick {width: 100%;}
.grid.columns-4 .grid-item, .masonry.columns-4 .masonry-brick {width: 50%;}
.portfolio-filter button{font-size: 16px;}

.video-post{width: auto;}
.iframe-h{height: 300px !important;}
.media-holder .media-body h6{font-size: 18px;}

.contact-info li{width: 100%; display: block; margin-bottom: 20px;}
.contact-info li:last-child{margin-bottom: 0;}

}

@media (max-width: 576px){
.col-xx-12{width: 100% !important;}
h1{font-size: 32px; line-height: 40px;}
h2{font-size: 26px; line-height: 34px; margin-bottom: 10px;}
h3 {font-size: 20px; line-height: 28px;}
.section-title h2{font-size: 30px;}

/*Margin*/
.xs-mt-0{}
.xs-mt-3{margin-top: 30px !important;}
.xs-mt-5{margin-top: 50px !important;}
.xs-mb-3{margin-bottom: 30px !important;}
.xs-mb-5{margin-bottom: 50px !important;}

/*Padding*/
.xs-pt-5{padding-top: 50px !important;}
.xs-pb-5{padding-bottom: 50px !important;}
.xs-px-1{padding-left: 10px !important; padding-right: 10px !important;}
.xs-px-2{padding-left: 20px !important; padding-right: 20px !important;}
.xs-px-3{padding-left: 30px !important; padding-right: 30px !important;}
.xs-py-2{padding-top: 20px !important; padding-bottom: 20px !important;}
.xs-py-10{padding-top: 100px !important; padding-bottom: 100px !important;}

.xs-text-center{text-align: center;}

/*Banner*/
.fullscreen-banner p br{display: none;}
.sub-banner {padding-top: 180px;}
.bnr-list li{padding: 0; width: 100%;}
.bnr-list li:before{display: none;}
.banner img{display: none !important;}
.align-end{bottom: 45%; transform: translateY(50%); -webkit-transform: translateY(50%); -o-transform: translateY(50%); -ms-transform: translateY(50%); -moz-transform: translateY(50%);}

/*Button*/
.btn {padding: 10px 20px; font-size: 13px;}
.btn + .btn {margin-left: 5px;}

/*Masonry*/
.portfolio-filter button{width: 100%; padding: 10px 0;}
.portfolio-filter button + button {margin-left: 0;}
.portfolio-filter button::before{display: none;}
.grid.columns-3 .grid-item, .masonry.columns-3 .masonry-brick {width: 100%;}
.grid.columns-4 .grid-item, .masonry.columns-4 .masonry-brick {width: 100%;}

/*Blog*/
.blog-details {padding: 20px;}
blockquote {line-height: 25px; margin-left: 10px; padding: 20px;}
.media-holder .media {display: block;}
.media-holder .media.inner {padding: 20px;}
.media-body{margin-top: 15px;}
.media-holder .media-body h6{font-size: 16px;}
.comment-date {display: block; margin-left: 0; margin-top: 8px;}
.reply {margin-top: 20px; position: inherit; right: inherit; top: inherit;}

.owl-carousel.owl-theme .owl-dots .owl-dot span{margin: 0 4px}
}