.introphoto {
    position: relative;
    width: calc(100% - 20px);
    padding-bottom: 70%;
    margin: 0px auto 40px;
    margin-bottom: 20px;
    background: url(../images/xim/two.JPG) rgb(250, 250, 250);
    max-width: 3000px;
}


.content:after {
    clear: both;
}

.researchpic {
	position: relative;
    float: left;
    width: calc(50% - 2.5px);
    padding-bottom: 50%;
    margin: 0px auto 10px;
    margin-bottom: 20px;
}

.gridleft {
	margin-right: 2.5px;
}

.gridright {
	margin-left: 2.5px;
}


.grid1 {
    background: url(../images/xim/Breadboard.JPG) rgb(250, 250, 250);
}

.grid2 {
    background: url(../images/xim/Organised_parts.JPG) rgb(250, 250, 250);
}

.grid3 {
    background: url(../images/xim/lid.JPG) rgb(250, 250, 250);
}

.grid4 {
    background: url(../images/xim/xim.JPG) rgb(250, 250, 250);
}



.picture {
    border-radius: 10px; 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 3000px;
}



.filler {
    height: 400px;   
}


.nextprojectpicture {
   position: relative;
    padding-bottom: 20%;
    min-height: 100px;
    background: url(../images/blockbuster/Blockbuster-wider236.png) rgb(250, 250, 250);
     background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  
}






@media(max-width: 900px) {
 

    
    .introphoto {
        width: calc(100% - 80px);
        padding-bottom: 85%;
    }
    
    
}


@media(max-width: 550px) {
    
    .introphoto {
        width: calc(100% - 20px);
        padding-bottom: 95%;
    }
    
    .white {
        padding-top: 10px;
    }
    
    h1 {
    font-size: 1.2em;
}

    h2 {
    font-size: 0.9em;
}
    
    .research, .research2 {
        width: 100%;
        
    }
    
    .introduction {
        font-size: 0.8em;
        width: 90%;
    }
    
    
    
    .name, .navigation {
        font-size: 0.8em;
    }
    
    .name {
        margin-top: 14px;
        margin-left: 10px;
    }
    
    .navigation {
        float: left;
        display: block;
        margin-top: 4px;
        margin-right: 10px;
    }
    
    
    ul li {
        
        font-size: 0.8em;
        
    }
    
    .navigation.ul {
        padding-left: 0px;
  
        
    }
    
    .underline {
        width: 35%;
    }
    
    .aboutactive {
	   margin-left: 60%;
	   width: 40%;
    }
    
    .first {
        margin-bottom: 0px;
    }
    
   
    .productdesigner {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    
    .quote {
        width: 80%;
    }
    
    .textboxme {
        padding-bottom: 20px;
        margin-bottom: 5px;
    }
    
    .aboutquote {
        padding-top: 40px;
    }
    
    .nextprojectpicture {
        width: 50%; 
        margin: 10px 0px 10px 10px;
    }
    
}
    
    
}