*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

.container {
	width: 1024px;
	margin: 0 auto;
	padding: 0px;
	position: relative;
}

.principal {
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	position: relative;
}

.container:after, .container:before {
	content: " ";
	display: table;
}

.container:after {
	clear: both;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3, .grid-1-2, .grid-8-1, .grid-5-1, .grid-6-1 {
	float: left;	
	margin-left: 10px;
	margin-right: 10px;

}

.grid-1 	{width: 40px;}
.grid-2 	{width: 100px;}
.grid-3 	{width: 160px;}
.grid-4 	{width: 220px;}
.grid-5 	{width: 280px;}
.grid-5-1	{width: 300px;}
.grid-6 	{width: 340px;}
.grid-6-1	{width: 320px;}
.grid-7 	{width: 400px;}
.grid-8 	{width: 460px;}
.grid-8-1	{width: 490px;}
.grid-9 	{width: 520px;}
.grid-10 	{width: 580px;}
.grid-11 	{width: 640px;}
.grid-12 	{width: 700px;}
.grid-13 	{width: 760px;}
.grid-14 	{width: 820px;}
.grid-15 	{width: 880px;}
.grid-16 	{width: 940px;}
.grid-17	{width: 1023px;}
.grid-1-3	{width: 300px;}


/*Estilo para tablets-pro*/
@media only screen and (min-width: 769px) and (max-width: 1024px) 
    {
    
        .menu_down h3 {
          font-size: 32px;
          color: #fff;
          margin-bottom: 30px;
          margin-top: 30px;
        }
        .menu_down ul li {
          display: inline-block;
          margin: 10px;
          color: #fff;
        }
        .menu_down li {
          display: inline;
          color: #fff;
          font-size: 14px;
          text-transform: uppercase;
          transition: all 0.5s;
        }
        /*
        .menu_down li:hover {
          background: #8d8d8d;
        }
        */

        .verde, .orange, .azul, .rosa, .amarelo {
          margin-left: 5px;
          margin-right: 5px;
          padding: 10px;
        }
        .container {
            width: 768px;
        }
        
        .grid-1 	{width: 40px;}
        .grid-2 	{width: 100px;}
        .grid-3 	{width: 160px;}
        .grid-4 	{width: 220px;}
        .grid-5 	{width: 280px;}
        .grid-5-1	{width: 300px;}
        .grid-6 	{width: 340px;}
        .grid-6-1	{width: 320px;}
        .grid-7 	{width: 400px;}
        .grid-8 	{width: 361px;}
        .grid-8-1	{width: 490px;}
        .grid-9 	{width: 500px;}
        .grid-9-1 	{width: 520px;}
        .grid-10 	{width: 580px;}
        .grid-10-1 	{width: 363px;}
        .grid-11 	{width: 408px;}
        .grid-12 	{width: 700px;}
        .grid-13 	{width: 528px;}
        .grid-14 	{width: 588px;}
        .grid-15 	{width: 648px;}
        .grid-16 	{width: 708px;}
        .grid-17	{width: 768px;}
        .grid-1-3	{width: 300px;}
    
    }


@media only screen and (min-width: 768px) and (max-width: 959px) {

.container {
	width: 768px;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3, .grid-1-2, .grid-8-1, .grid-5-1, .grid-6-1 {
	float: none;
	margin: 0 auto;

}

.grid-1		{width: 28px;}
.grid-2		{width: 76px;}
.grid-3		{width: 124px;}
.grid-4		{width: 172px;}
.grid-5		{width: 220px;}
.grid-5-1	{width: 240px;}
.grid-6		{width: 268px;}
.grid-6-1	{width: 296px;}
.grid-7		{width: 316px;}
.grid-8		{width: 364px;}
.grid-8-1	{width: 394px}
.grid-9		{width: 412px;}
.grid-10	{width: 460px;}
.grid-11	{width: 508px;}
.grid-12	{width: 556px;}
.grid-13	{width: 604px;}
.grid-14	{width: 652px;}
.grid-15	{width: 700px;}
.grid-16	{width: 748px;}
.grid-1-3	{width: 236px;}

}

@media only screen and (max-width: 767px) {
.container {
	width: 300px;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3, .grid-1-2, .grid-8-1, .grid-5-1, .grid-6-1 {
	width: 300px;
	margin: 0 0 20px 0;
	float: none;
}

}