/**
*
* ---------------------------------------------------------------------------
*
* Template Name : Morden | personal portfolio html5 responsive template
* Template URL : http://home2globe.com/home2globe-theme/morden/
* Author : home2globe
* Version : 1.0
*
* --------------------------------------------------------------------------- 
*
*/

 /***** medium Layout *****/

 @media (min-width: 992px) and (max-width: 1200px) {
     .header-area {
         padding: 40px 0 0;
     }
     .menu-btn-close {
         top: 55px;
     }
     .contact {
         font-size: 14px;
         left: 0;
     }
     .contact::after {
         width: 80px;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 36px;
     }
     .details span {
         margin-right: 30px;
     }
     .first-letter img {
         width: 75%;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .section-title h2 {
         letter-spacing: 0;
     }
     .short-dec {
         padding: 130px 0 65px 0;
     }
     .service-dec::before {
         width: 60%;
     }
     .about-area::after {
         top: 33%;
     }
     .short-dec::before {
         left: 0;
         top: 0;
     }
     .service {
         bottom: -60px;
         padding: 0 0 10px 65px;
     }
     .overflow-box {
         padding-left: 10px;
     }
     .overflow-box > h3 {
         letter-spacing: 5px;
     }
     .member-info {
         padding: 10px 0 0 20px;
     }
     .page-title-content h2 {
         font-size: 30px;
     }
 }


 /***** Tablet Layout *****/

 @media only screen and (min-width: 768px) and (max-width: 991px) {
     body {
         font-size: 13px;
     }
     .header-area {
         padding: 40px 0 0;
     }
     .menu-btn-close {
         top: 55px;
     }
     .primary-menu ul li a {
         font-size: 20px;
     }
     .contact {
         font-size: 14px;
         left: 0;
         letter-spacing: 5px;
     }
     .contact::after {
         width: 80px;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 22px;
     }
     .details span {
         margin-right: 10px;
     }
     .first-letter img {
         width: 75%;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .social-link i.fa {
         width: 30px;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
     }
     .section-title h2 {
         letter-spacing: 0;
         font-size: 150px;
     }
     .about-title-wraper {
         margin: 0;
     }
     .about-title-wraper h2 {
         font-size: 16px;
     }
     .about-title-wraper p {
         padding-right: 10px;
     }
     .short-dec {
         padding: 65px 0;
     }
     .service-dec::before {
         width: 70%;
     }
     .about-area::after {
         top: 28%;
     }
     .short-dec::before {
         left: 0;
     }
     .short-title > h3 {
         font-size: 20px;
     }
     .service {
         bottom: -60px;
         padding: 0 0 10px 15px;
     }
     .single-project {
         width: 50%;
         height: 200px;
     }
     .single-project-list {
         height: auto !important;
     }
     .single-project img {
         height: 100%;
     }
     .project-title {
         top: 150px;
     }
     .project-overly h3 {
         font-size: 14px;
         letter-spacing: 1px;
     }
     .project-overly {
         padding: 20px 0 0 20px;
     }
     .video-title {
         top: -33px;
     }
     .video-box {
         width: 100%;
         height: 300px;
     }
     .overflow-box {
         padding-left: 10px;
         padding-top: 95px;
     }
     .overflow-box > h3 {
         letter-spacing: 1px;
         font-size: 26px;
     }
     .team-title {
         top: 35px;
     }
     .team-area::after {
         bottom: 3%;
     }
     .member-info {
         padding: 10px 0 0 20px;
     }
     .map {
         height: 175px;
     }
     .about-details {
         width: 425px;
     }
     .about-details h3 {
         font-size: 20px;
     }
     .about-details {
         right: 0;
     }
     .about-bottom-left {
         padding: 33px 35px 64px;
     }
     .single-about {
         width: 50%;
         margin: 0 auto 30px;
     }
     .brand-area {
         margin-top: 130px;
     }
     .brand-area::after {
         top: -90%;
         height: 70px;
     }
     .progress-details {
         margin-right: 0;
     }
     .single-blog-post a h2 {
         font-size: 20px;
     }
     .contact-title {
         top: 60px;
     }
     .address {
         top: 46px;
     }
     .contact-form {
         padding: 0;
     }
     .blog-comment-wraper {
         padding: 0;
     }
     .sidebar {
         margin-top: 180px;
     }

 }


 /***** Mobile Layout *****/

 @media only screen and (max-width: 767px) {
     body {
         font-size: 12px;
     }
     .section-padding {
         padding: 40px 0;
     }
     .heading {
         margin-bottom: 50px;
     }
     .header-area {
         padding: 40px 0 0;
     }
     .header-area .logo h2 {
         font-size: 18px;
     }
     .menu-btn-close {
         top: 50px;
     }
     .menu-toggle {
         width: 40px;
         height: 40px;
     }
     .menu-toggle span {
         width: 23px;
     }
     .menu-toggle span.line2 {
         width: 15px;
     }
     .menu-toggle span.line3 {
         width: 20px;
     }
     .menu-table-cell nav {
         left: 35%;
     }
     .primary-menu ul li a {
         font-size: 16px;
     }
     .primary-menu ul li ul.drop-menu {
         left: 125px;
     }
     .primary-menu ul li a::before {
         left: -10px;
     }
     .primary-menu ul li a::after {
         right: -10px;
     }
     .link-fixed {
         bottom: 0;
         right: 15px;
     }
     .contact {
         font-size: 14px;
         left: 0;
         letter-spacing: 5px;
         width: 100%;
         text-align: center;
         bottom: 18%;
         transform: rotate(0);
     }
     .contact::after {
         display: none;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 18px;
         letter-spacing: 5px;
     }
     .details {
         width: 100%;
         text-align: center;
         bottom: 30%;
     }
     .details span i.fa {
         margin-right: 5px;
     }
     .details span {
         margin-right: 5px;
         letter-spacing: 0px;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .social-link i.fa {
         width: 30px;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
     }
     .slider-wraper .owl-nav {
         display: none;
     }
     .exprience {
         display: none;
     }
     .mobile-ver {
         display: block;
         margin: 0 auto 35px;
     }
     .short-dec::before {
         display: none;
     }
     .service-dec {
         margin-top: 35px;
     }
     .about-title-wraper {
         text-align: center;
     }
     .section-title {
         display: none
     }
     .about-title-wraper h2 {
         font-size: 16px;
         display: inline-block;
     }
     .about-title-wraper p {
         padding: 0;
     }
     .short-dec {
         padding: 100px 0;
         text-align: center;
     }
     .short-dec > p {
         padding: 0 10px;
     }
     .about-area::after {
         display: none;
     }
     .short-title > h3 {
         font-size: 20px;
     }
     .service {
         padding: 0;
         position: static;
         margin-top: 35px;
     }
     .single-service {
         margin-bottom: 30px;
         text-align: center;
     }
     .single-service h2 {
         right: -14%;
     }
     .heading h2 {
         font-size: 25px;
         letter-spacing: 5px;
         text-align: center;
     }
     .single-project {
         width: 100% !important;
         height: 300px;
     }
     .single-project-list {
         height: auto !important;
     }
     .single-project img {
         height: 100%;
     }
     .project-title {
         top: 150px;
     }
     .video-box {
         width: 100%;
         height: 200px;
         padding: 24px;
         margin-top: 35px;
     }
     .video-box::before {
         width: 100px;
     }
     .overflow-box {
         padding: 20px 0;
         width: 100%;
         height: auto;
         position: static;
         text-align: center;
     }
     .overflow-box > h3 {
         letter-spacing: 1px;
         font-size: 26px;
     }
     .team-area::after {
         bottom: 2%;
         height: 30px;
     }
     .team-wraper .owl-nav {
         left: 50%;
         top: inherit;
         bottom: -70px;
         transform: translate(-50%);
         right: inherit;
     }
     .member-img {
         width: 100%;
     }
     .member-img img {
         border-radius: 50%;
         width: 50% !important;
         margin: 0 auto;
     }
     .member-info {
         padding: 20px;
         width: 100%;
         text-align: center;
     }
     .member-info h3 {
         font-size: 18px;
         letter-spacing: 1px;
         display: inline-block;
     }
     .member-info h2 {
         letter-spacing: 1px;
         font-size: 22px;
         display: inline-block;
     }
     .map {
         height: 175px;
         margin-top: 35px;
     }
     .page-title-content h2 {
         font-size: 22px;
         letter-spacing: 5px;
     }
     .about-info-img {
         padding-left: 0;
     }
     .about-details {
         width: auto;
         padding: 20px;
         position: inherit;
         margin-top: 30px;
     }
     .about-details h3 {
         font-size: 18px;
     }
     .single-about {
         margin-bottom: 30px;
     }
     .single-about img {
         width: 100%;
     }
     .about-overflow img {
         width: auto;
     }
     .about-top,
     .about-middle {
         margin-bottom: 80px;
     }
     .about-bottom-left {
         padding: 37px 10px 37px 10px;
         margin-bottom: 30px;
     }
     .brand-area::after {
         height: 70px;
         top: -110%;
     }
     .contact-form {
         padding: 0;
     }
     .iso-nav ul li img {
         display: none;
     }
     .iso-nav ul li {
         display: block;
         font-size: 14px;
         margin-bottom: 10px;
     }
     .iso-nav::before {
         display: none;
     }
     .single-project-slider .owl-nav div {
         padding: 2px 12px;
         font-size: 14px;
     }
     .progress-details {
         margin-bottom: 30px;
         width: 100%;
         text-align: center;
     }
     .single-project-details h2 {
         font-size: 22px;
         letter-spacing: 2px;
     }
     .single-blog-post a h2 {
         font-size: 18px;
         padding: 0;
     }
     .single-blog-post img {
         width: 100%;
     }
     .author-info img {
         width: auto;
     }
     .post-info {
         display: block;
     }
     .author-info,
     .post-date {
         width: 100%;
     }
     .footer-area {
         padding: 30px 0;
     }
     .share {
         margin-top: 30px;
     }
     .blog-grid-brand {
         margin-top: 130px;
     }
     .contact-page-area {
         padding-top: 80px;
     }
     .address {
         position: unset;
         width: 100%;
         height: auto;
         margin: 50px 0 0;
         padding: 30px;
         z-index: inherit;
     }
     .google-map-area {
         margin-bottom: 80px;
     }
     .blog-comment-wraper {
         padding: 0;
     }
     .comment-content span {
         font-size: 12px;
     }
     .reply-commnet-content {
         padding-left: 30px;
     }
     .sidebar {
         margin-top: 80px;
     }
     .single-widget {
         text-align: center;
     }
     .single-widget h3::before {
         left: 50%;
         transform: translate(-50%);
     }
 }


 /***** Wide Mobile Layout *****/

 @media only screen and (min-width: 480px) and (max-width: 767px) {
     .primary-menu ul li ul.drop-menu {
         left: 150px;
     }
     .primary-menu ul li a::before {
         left: -25px;
     }
     .primary-menu ul li a::after {
         right: -25px;
     }
     .brand-area::after {
         top: -80%;
     }
     .details span {
         letter-spacing: 3px;
     }
     .short-dec > p {
         padding: 0;
     }
     .single-service h2 {
         left: 15%;
     }
     .video-box {
         height: 300px;
     }
     .service-ovely-img {
         left: 0;
         text-align: center;
         width: 77%;
         margin: 0 auto;
     }
 }