@media (max-width:1680px){
    
.container{width: 100%;padding: 0 15px;}
nav ul li {padding: 0 35px;}
.vision-inn p {font-size: 14px;line-height: 19px;}
    
    
}

@media (max-width:1500px){
    
}

@media (max-width:1300px){
   
    
}

@media (max-width:1200px){
    
.mackup ul li img {width: 100%;height: 200px;}
.mac-bre{width:50%;}  
.hand ul li {}
.hand-inn img {width: 100%;}   
.hand ul li img{width: 100%;}    
 .hand-inn{display: inline-block;width: 50%;}   
}

@media (max-width:1024px){
    
.representative-inn h3 {font-size: 60px;line-height: 66px;}

    
    
}

@media (max-width:991px){
.footer-inn {padding: 0 0px 0 0;}
.trending3:before{right: 20px;}  
.debra h1 {font-size: 44.47px;line-height: 49px; }  
nav ul li {padding: 0 30px;}
.header-main {padding: 35px 0 35px 0px;}
.hello-blk {margin: 0 0 20px 0;} 
.service-inn {margin: 0 0px 30px 0;}
.service-blk{padding: 30px 0;}
.vision-inn h5 {font-size: 35px;line-height: 40px;}
.methodology-inn h3 {font-size: 60px;line-height: 64px;}
.methodology {padding: 30px 0 0 0;} 
    
.phase1{padding: 0 0 25px 0;}   
.phase2{padding: 0 0 25px 0;}   
.phase3{padding: 0 0 25px 0;}   
    
.phase1 h5:before{left: 20%;top: 65px;}  
.phase1 h5:after{right: 20%;top: 65px;} 
.phase2 h5:before{left: 20%;top: 65px;}  
.phase2 h5:after{right: 20%;top: 65px;} 
.phase3 h5:before{left: 20%;top: 65px;}  
.phase3 h5:after{right: 20%;top: 65px;} 
.phase p {font-size: 40.17px;line-height: 43px;}    
.phase p em {font-size: 40.17px;line-height: 43px;}    
 
.about-us{padding: 35px 0 0 0;}
.about-in h3{padding: 0px 0 25px 0;}
.wellesley {padding: 20px 15px 20px 15px;}
.gail1{padding: 0 0 25px 0;}
.about-in h3 {font-size: 50px;line-height: 54px;}    
.about-in p {font-size: 34px;line-height: 38px;}
.about-in p span {font-size: 20.21px;line-height: 23px;}
.wellesley-rlt p{font-size: 25px;line-height: 28px;}   
.wellesley-lft{width: 100%;text-align: center;margin: 0 0 0 0;}
.wellesley-rlt{width: 100%;padding: 25px 0 0 0;}
.wellesley-rlt p:before{margin: 7px 0 0 0;}   
  
.brand-inn{background: url(../images/circle.png) no-repeat center center;width: 100%;height: 378px;content: '';left: 0;right: 0;margin: 0 auto;background-size: 100% 100%;object-fit: cover;}  
.brand{padding: 0 0 35px 0;}    
 br{display: none;}   
    
}

@media (max-width:767px){
    
.debra h1{letter-spacing: 1px;word-spacing: 0;}
nav ul li {padding: 0 15px;}  
.philosophy-inn h2 {font-size: 61px;line-height: 65px;padding: 0 0 25px 0;}

.creatively{padding: 0 0 30px 0;} 
.vision ul li{width: 100%;}
.quality-inn ul li {padding: 0 0 40px 0;}
.methodology-inn h3 {font-size: 35px;line-height: 40px;}

    
.trending1:before{bottom: 0px;right: 0px;left: 0;margin: 0 auto;}
.trending1:after{right: 0px;left: 0;margin: 0 auto;}
.trending2:before{bottom: 0px;right: 0px;left: 0;margin: 0 auto;}
.trending2:after{right: 0px;left: 0;margin: 0 auto;}
.trending3:before{bottom: 0px;right: 0px;left: 0;margin: 0 auto;}
.trending3:after{right: 0px;left: 0;margin: 0 auto;}
.trending4:before{right: 0px;left: 0;margin: 0 auto;}
.trending4:after{right: 0px;left: 0;margin: 0 auto;}
.trending5:before{right: 0px;left: 0;margin: 0 auto;}
.trending5:after{right: 0px;left: 0;margin: 0 auto;}    
.phase h5 {font-size: 35px;line-height: 40px;}   
.phase h5 b{font-size:100px;line-height: 102px;}
.phase p {font-size: 20px;line-height: 22px;}    
.phase p em {font-size: 20px;line-height: 22px;}    

.phase1 h5:before{left: 20%;top: 45px;}  
.phase1 h5:after{right: 20%;top: 45px;} 
.phase2 h5:before{left: 20%;top: 45px;}  
.phase2 h5:after{right: 20%;top: 45px;} 
.phase3 h5:before{left: 20%;top: 45px;}  
.phase3 h5:after{right: 20%;top: 45px;}

.representative-inn h3 {font-size: 40px;line-height: 45px;}    
footer{text-align: center;padding: 35px 0 35px 0}
.footer-inn {padding: 0 0px 0 0px;}
.holsten-inn h3 {font-size: 28px;line-height: 32px;letter-spacing:2px;}
 

    .nav-inn{padding: 0 0 0 0;}
    .sidemenu .nav-inn{padding: 25px 0 0 0;}
    
nav ul li {display: none;}
.sidemenu nav ul li {padding: 10px 0;width: 100%;text-align: center;display: block;}
.menu {display: block;}
.menu {background: none;border: 0 none;outline: none;box-shadow: none;cursor: pointer;float: right;display: inline-block;margin: 10px 0 0 0;position: relative;top:23px;right:15px;}
.menu span {width: 40px;height:3px;background: #ffffff;display: block;}
	

	
.sidemenu{display: block;background: #ffffff;}
.wrapper{position: relative;-webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;left: 0;}
.sidemenu.header-right ul li a{}
.sidemenu .header-right-in span{max-width: 160px;}
  
    
}

@media (max-width:599px){
    
.debra h1 {font-size: 35px;line-height: 40px;}  
.debra h5 {font-size: 23px;line-height: 25px;letter-spacing: 5px;}    
.creatively span {font-size: 22.21px;line-height: 25px;}
.creatively p {font-size: 20.21px;line-height: 30px;padding: 0 0 20px 0;}
.creatively em{font-size: 22px;line-height: 28px;}   
.philosophy-inn h2 {font-size: 40px;line-height: 45px;} .philosophy-inn p {font-size: 22.21px;line-height: 28px;}
.philosophy-inn span {font-size: 22.21px;line-height: 28px;}
.mac-bre{width:100%;}    
 
.phase1 h5:before{left: 0%;top: 45px;}  
.phase1 h5:after{right: 0%;top: 45px;} 
.phase2 h5:before{left: 0%;top: 45px;}  
.phase2 h5:after{right: 0%;top: 45px;} 
.phase3 h5:before{left: 0%;top: 45px;}  
.phase3 h5:after{right: 0%;top: 45px;}    
 
.phase h5 {font-size: 20px;line-height: 25px;}   
.phase h5 b{font-size:55px;line-height:58px;}

.representative-inn h3 {font-size: 25px;line-height: 35px;}    
.projects ul li{width: 45%;padding: 0 0 45px 0;}
.projects1{padding: 0 0 0 0}
.projects2{padding: 0 0 0 0}
.projects3{padding: 0 0 0 0}
.projects4{padding: 0 0 0 0}
.projects5{padding: 0 0 0 0}
.projects6{padding: 0 0 0 0}
.projects p {font-size: 16px;line-height: 20px;}
.projects p em{font-size: 16px;line-height: 20px;}
.new-skin p{font-size: 16px;line-height: 24px;}   
.new-skin {padding: 0px 0 20px 0px;}   

.about-in h3 {font-size:38px;line-height:42px;}
.about-in p{font-size: 25px;line-height: 28px;}
.about-in p span {font-size: 20px;line-height: 22px;}   
.wellesley-rlt p {font-size: 20px;line-height: 23px;} 
.footer-inn p a {font-size: 18px;line-height: 23px;}   .holsten-inn h5 {font-size: 20.13px;
line-height: 24px;letter-spacing: 11.5px;}
.footer-blk {padding: 0 0 25px 0;}

 .brand-inn{background-size: 100% 75%;}    
.brand-inn h4:before{left: 60px;}
.brand-inn h4:after{right: 60px;}
.brand-inn h3 {font-size: 37.96px;line-height: 39px;}  
.brand-inn h4 {font-size: 37.96px;line-height: 39px;}  
.brand-inn h5 {font-size: 37.96px;line-height: 39px;}  
.brand-inn{padding: 40px 0 0 0;}   
.hand-inn {width: 100%}
 .hand ul li img {width: 100%;height: 170px;}  
    
}


@media (max-width:479px){
    
.debra h1 {font-size: 20px;line-height: 22px;}    
.philosophy-inn h2 {font-size: 30px;line-height: 35px;} 
.philosophy-inn p {font-size: 18.21px;line-height: 22px;}
.philosophy-inn span{font-size: 18.21px;line-height: 22px;}
.methodology-inn h3 {font-size: 28px;
line-height: 32px;}    
    
.phase1 h5:before{left: 0%;top: 29px;}  
.phase1 h5:after{right: 0%;top: 29px;} 
.phase2 h5:before{left: 0%;top: 29px;}  
.phase2 h5:after{right: 0%;top: 29px;} 
.phase3 h5:before{left: 0%;top: 29px;}  
.phase3 h5:after{right: 0%;top: 29px;}    
.holsten-inn h3 {font-size: 25px;line-height: 30px;letter-spacing: 1px;}    
.brand-inn h4:before{left: 20px;}
.brand-inn h4:after{right: 20px;}    
.projects ul li {width: 100%;padding: 0 0 35px 0;} 
.debra h5 {font-size: 18px;line-height: 22px;letter-spacing: 4px;}   
    
    
}