/* Landscape phones and down */
@media (max-width: 480px) { 
.hmcaption {display:none;}
.menu-nav-m {height:500px !important;}
#main {min-width:398px !important;}
.home-content  {min-width:420px !important;}


/* CLIENTS */
.client-logos li {width:15% !important;}

/* PORTFOLIO */
li.project {width:315px !important;}

/* SERVICES */

.service {width:90% !important;margin-left:-10px;}

.gallery-wrap {height:460px !important;}
.gallery-img {height:300px !important;}
.gallery-thumb {top:300px !important;}

footer {width:100%;min-width:419px !important;}
 }
 


/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
#main {width:100%;padding:150px 10px;min-width:390px;}
header {height:100px;}

.mnheader {animation-name: headermnheight;height:40px;padding-top:20px; animation-duration: .5s;}
    @keyframes headermnheight {
    from {height: 100px;padding-top:30px;}
    to {height:40px;padding-top:20px;}
    }
.mxheader {animation-name: headermxheight;height:100px;padding-top:30px; animation-duration: .5s;}
    @keyframes headermxheight {
    from {height: 40px;padding-top:20px;}
    to {height:100px;padding-top:30px;}
    }



.menunavmn {animation-name: menunavmn;top:50px;animation-duration: .5s;}
 @keyframes headerlogomn {
    from {top:-35px;}
    to {top:50px;}
    }
 .menunavmx {animation-name: menunavmx;top:77px;animation-duration: .5s;}
 @keyframes headerlogomn {
    from {top:0px;}
    to {top:77px;}
    }
    
        
    
.head {width:100%;min-width:480px;}
.header-logo {width:100px;}
.overlay {position:fixed;z-index:88888;opacity:.8;left:0px;width:100%;height:100%;z-index:3;}
.overlay-hidden {visibility:visible;}
.header-tab {height:100%;}
.menu-tab {width:40px;margin-left:auto;display:block;z-index:4;position:relative; right:0px;cursor:pointer;}
.header-menu {visibility:hidden;}
.menu-nav-m {visibility:visible;left:0px;z-index:3;position:fixed;width:95%;margin-top:40px;height:200px;overflow-y:scroll;}
.menu-nav-m li {display:block;text-align:left;}
.menu-nav-m li a:link {padding:10px;border-bottom:1px solid #eaeaea;}
.menu-nav-m li a:hover {background:#eaeaea;color:#323232;}
.menu-nav-m li a:active {background:#eaeaea;color:#323232;}


/* HOME */
.home-content {width:100%;min-width:390px;padding:130px 0px 0px 0px;}




.home-mantra li .mantra-text, .home-mantra li .mantra-img {display:block;width:100%;}

.home-mantra li:nth-child(1) .mantra-text {width:90%;padding:0px 20px;} 
.home-mantra li:nth-child(1) .mantra-img {width:100%;}



.home-mantra li:nth-child(2) .mantra-text {display:block;width:90%;left:0px;padding:0px 20px;} 
.home-mantra li:nth-child(2) .mantra-img {display:block;width:100%;left:0px;}
.home-mantra li:nth-child(3) .mantra-text {display:block;width:90%;left:0px;padding:0px 20px;}
.home-mantra li:nth-child(3) .mantra-img {display:block;width:100%;left:0px;}


.home-mantra li:nth-child(4) {width:98%; margin:0px auto;}
.home-mantra li:nth-child(4) h2, .home-mantra li:nth-child(4) span {text-align:left;}
.home-mantra li:nth-child(4) .mantra-img {width:100%;text-align:center;margin:20px 0px;white-space:nowrap;
    overflow-x:auto;padding-bottom:5px;}
.home-mantra li:nth-child(4) .mantra-img::-webkit-scrollbar { height: 8px;}
.home-mantra li:nth-child(4) .mantra-img::-webkit-scrollbar-thumb {background:#dddddd;}
.home-mantra li:nth-child(4) .mantra-img img {display:inline;width:100px;height:auto;margin:5px;vertical-align:middle;}






/* About */
.page-sidebar {display:block;width:100%;}
.side-nav li {display:inline-block;width:200px;}
.page-content {width:100%;display:block;}


/* TEAM */
li.team-member {width:47%;}


.team-single-content {width:90%;display:block;min-width:0px;}
.team-single-img {width:100%;display:block;}
.team-single-info {display:block;padding:0px;width:100%;height:auto;}
.team-single-text{overflow:visible;padding:20px;height:auto;}
.team-single-text-gradient {display:none;}
.close-pop {right:10px;top:10px;}


/* CLIENTS */
.client {width:98%;margin:0px auto 80px auto;}
.client-logos li {width:16.5%;margin:20px 35px;}
.client-name {display:block; width:95%;}



/* PORTFOLIO */
.portfolio-title {display:block;}
.project-categories {margin-left:20px;}
.project-categories li {max-width:160px;}
li.project {width:210px;}
li.team-member:hover a > div {bottom:-80px;}


/* PORTFOLIO */

.popit {overflow-y:scroll;z-index:2;height:90%;overflow-x:hidden;min-width:0px;}
.popit::-webkit-scrollbar { width: 10px;}
.popit::-webkit-scrollbar-thumb {background:#dddddd;}
.gallery-wrap {display:block;width:100%;height:680px;}
.gallery-img {height:520px;}
.gallery-thumb {margin-left:20px;position:relative;top:520px;margin-top:0px;}
.project-info {display:block;width:100%;}
.project-info-content {overflow:visible;height:100%;width:90%;margin:0px auto;}

.project-info-content-gradient {display:none;}




/* SERVICES */
.service {width:42%;}
.service-content {overflow-y:scroll;}
.service-gradient {display:none;}

/* CONTACT */

.contact-content {width:95%;}

/* FOOTER */
footer {min-width:390px;}
.foot {width:90%;}

}






/* Portrait tablet to landscape and desktop */
@media (min-width: 767px) /*and (max-width: 979px)*/ and (max-width: 1024px) { 

header {width:100%;min-width: 600px;}
.head {width:100%;min-width: 600px;}
.menu-nav {width:78%;}

#main {width:97.5%;min-width: 600px;}
/* HOME */
.home-content {width:100%;min-width: 850px;}

.page-sidebar {display:block;width:100%;}
.side-nav li {display:inline-block;width:200px;}
.page-content {width:100%;display:block;}

/* TEAM */
li.team-member {width:47%;}

.team-single-content {width:90%;display:block;min-width:0px;}
.team-single-img {width:100%;display:block;}
.team-single-info {display:block;padding:0px;width:100%;height:auto;}
.team-single-text{overflow:visible;padding:20px;height:auto;}
.team-single-text-gradient {display:none;}
.close-pop {right:10px;top:10px;}

/* SERVICES */
.service {width:42%;}
.service-content {overflow-y:scroll;}
.service-gradient {display:none;}


/* CLIENTS */
.client-logos li {margin:20px 40px;}
.client {width:98%;margin:0px auto 80px auto;}
.client-name {display:block; width:95%;}

/* PORTFOLIO */
.portfolio-title {display:block;}


.portfolio-single .popit{margin-left:auto;margin-right:auto;}
.popit {overflow-y:scroll;z-index:2;height:90%;overflow-x:hidden;min-width:0px;}
.popit::-webkit-scrollbar { width: 10px;}
.popit::-webkit-scrollbar-thumb {background:#dddddd;}
.gallery-wrap {display:block;width:100%;height:640px;}
.gallery-thumb {margin-left:20px;position:relative;top:520px;margin-top:0px;}
.gallery-thumb img {margin-top:0px;}
.project-info {display:block;width:100%;}
.project-info-content {overflow:visible;height:100%;width:90%;margin:0px auto;}

.project-info-content-gradient {display:none;}
/*.project-width, li.project {width:48%;margin:4px;}*/
li.project {width:240px;}

/* CONTACT */

.contact-content {width:80%;}
#map-canvas {width:100%;min-width: 850px}
footer {width:100%;min-width: 850px}

 }