.principal {
	float: left;
	width: 100%;	/* 633px / 960px */
}
.principal ul {
	list-style-type:none;
}

.figure {
	float: left;
	font-size: 12px;
	line-height: 1.6;
	margin: 0 4% 1.6em 0;			/* 21px / 633px */
	text-align: center;
	width: 45%;				/* 197px / 633px */	
	
}

.figure img p {
	display: block;
	margin: 0 auto 0em;
}
li#2,
li#4,
li#6,
li#8 {
	margin-right: 0;
}

.group{
	width: 100%;
	padding: 10px 0;
}

.left {
        float: left;
        width: 40%;
 }
.right {
        float: right;
        width: 60%;
}
img {
        max-width: 100%;
        height: auto;
		vertical-align:top;
		
 }
    .group:after {
        content:"";
        display: table;
        clear: both;
    }
   
.img-responsive {
    position: relative;
    max-width: 400px;
}

.text {
	text-align:left;
    max-width: 300px;
	padding-right: 10px;
	height: 55px;
	
}

@media (min-width: 400px) {
   .figure,
	li#2,#4,#6,#8 {
		margin-right: 0%;	/* 21px / 633px */
		width: 100%;	/* 306px / 633px */
	}
	li#1,
	li#3,
	li#5,
	li#7 {
		margin-right: 0;
	}
  
}

 @media screen and (max-width: 480px) {
        .left, .right {
            float: none;
            width: auto;
        }
		
		.principal
	 	{
			float: none;
			width: auto;
		}
    }