@media only screen and (max-width: 1200px) {
    
    .row{
        margin: 0 4rem;
    }
    .span_1_of_4 {
        width:48%;
	}
	.span_1_of_2 {
        width: 100%;
        margin-left: 0;  
    }
    .main-comment{
        width: 50%;
        margin: auto;
        display: block;
    }
    
    .portfolio-image{
        width: 60%;
        height: auto;
    }
	
    
}


@media only screen and (max-width: 1024px){
    html{
        font-size: 57.5%;
    }
    .main-nav{
        display: none;
    }
    
    .topnav{
        display: block;
        margin-top: 20px;
    }

    
    .topnav a{
      display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
        
    }


    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0px;
        top: 0px;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        
    }




}


@media only screen and (max-width: 768px) {
    .span_1_of_4 {
        width:100%; 
	}
    .respon{
        width: 70%;
        margin: auto;
        display: block;
    }
    .team-section.little-description,
    .skill-section .little-description,
    .portfolio-section .little-description,
    .testimonial-section .little-description,
    .contact-section .little-description,
    .little-description{
        width: 80%;
    }
    
}

@media only screen and (max-width: 620px) {
    
    .portfoli-image{
        width: 70%;
        height: auto;
    }
    .span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
    }
    
}