/* CSS Document */


/* ==========================================================================
	Base styles
	========================================================================== */

html,button,input,select,textarea { color:#222; }

body {font-family:'Open Sans',sans-serif; overflow:auto; background:#fff;  font-size:12px; line-height:1.4; }

::-moz-selection { background:#666; text-shadow:none; }
::selection      { background:#666; text-shadow:none; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

audio,canvas,img,video { vertical-align:middle; }

fieldset { border:0; margin:0; padding:0; }

textarea { resize:vertical; }

a:link    {text-decoration: none; color:#666;}
a:visited {color:#666; text-decoration: none;}
a:hover   {color:#ccc; text-decoration: none;}
a:active  {color:#ccc; text-decoration: none;} 

.wrapper                    { padding:0 1em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

/*
 * Column styles
 */

.col1                       { width:25% }
.col2                       { width:50% }
.col3                       { width:75% }
.col4                       { width:100% }
.col33             			{ width:33.333% }
.col66                      { width:66.666% }
.col1,.col2,.col3,
.col4,.col33,.col66   		{ overflow:hidden; float:left; }
	
.fil_0                      { height:0px; }
.fil_1                      { height:16px; }
.fil_2                      { height:32px; }
.fil_3                      { height:48px; }
.fil_4                      { height:64px; }
.fil_5                      { height:80px; }
.fil_6                      { height:96px; }

.fil1                       { height:208px; }
.fil2                       { height:432px; }


/* 
 * Header style 
 */

header                      	{ width:910px; height:176px; margin:0 auto; margin:0 auto; padding:0;}

.molecularspray                	{ height:40px; margin-top:40px; }

#menuTop                 		{ list-style:none; margin:19px 0 0; padding:0 34px 0 24px; height:29px; border-bottom:#ccc 1px solid; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#menuTop li			            { display:inline-block; margin:0 24px; height:30px; font-size:13px; line-height:16px; }
#menuTop a						{ color:#666; text-decoration:none; }
#menuTop a:hover         		{ color:#ccc; }
#menuTop li.active      		{ color:#ccc; }
#menuTop li.active a      		{ color:#ccc; }
#menuTop li.active a:hover		{ color:#666; }

/*
 * Table styles
 */


table{width:100%; background-color: white;}
td,th {text-align:center; padding: 0.2em;}
table{font-family:'Open Sans',sans-serif; overflow:auto; background:#fff;  font-size:14px; line-height:1.4; color:#666666; text-decoration: none;}
td.element {color: #CC9933;}
table tbody tr:hover { background-color: #ccc; }
table.narrow {width: 80%}

/* 
 * Main style 
 */

#stone                 			{ display:inline-block; width:100%; height:432px; margin:0 0 64px; background: url(../images/nice.png) repeat;}
#slate,#ceramic,#porcelain        { max-width:910px; margin:0 auto 64px; color:#666; }

#slate a,#ceramic a,#porcelain a  { color:#6666; text-decoration:none; }
#slate a:hover,
#ceramic a:hover,
#porcelain a:hover               { color:#ccc; }

#ceramic .date                { font-size:10px; font-weight:400; margin:19px 0px 2px; }
#porcelain .date                { font-size:10px; font-weight:400; margin:19px 0px 2px; }
#slate h3                    { font-size:20px; font-weight:400; line-height:24px; padding:0; margin:20px 0 14px; }
#slate p                     { margin-bottom:16px; }

#ceramic			        	{ max-width:910px; margin:0 auto 64px; color:#666; }

#ceramic .col1,
#ceramic .col33                {height:498px; overflow:hidden; margin-bottom:32px;  }



#ceramic p                  	{ font-size:12px; font-weight:400; line-height:16px; padding:0; margin:0 0 14px; }

#porcelainpubs h3				{margin:0 0 -8px;}
#slate a					{font-weight:700;}

/* 
 * FOOTER
 */

#pie             { width:96%; margin:32px auto 0; text-align:center; font-size:10px; line-height:12px; color:#999; display:block; }                  { display:none; }
#pie .activo                { color:#666 }
#pie p         { clear:both; margin:0; padding:0 1px 0 0; line-height:16px; }


/* ==========================================================================
	Media Queries
	========================================================================== */

@media only screen and (max-width:959px) and (min-width:768px) {
	.fil1                       { height:160px; }
	.fil2                       { height:368px; }
	
	/* 
	 * HEADER
	 */

	header                      { width:686px; }
		
	#menuTop              	{ padding:0 10px 0 0px; }
	#menuTop ul li         	{ padding-top:16px; }
	#menuTop ul li a       	{ color:#666; height:22px; }
	#menuTop ul li ul li a 	{ color:#999; height:22px; }
	
		
	#stone                 		{ height:100%; margin:0 auto 48px;}
	#stone .fil2           		{ height:352px; }
	#slate 						{ width:686px; margin:0 auto 48px; }
	#slate .col66				{ width:50%; }
	#slate .col33				{ width:50%; }
    #slate .col1				{ width:50%; }
	#slate .col3				{ width:50%; }
	#slate .wrapper              { padding:0 1em; }
	#ceramic,#porcelain        		{ width:686px; margin:0 auto 48px; }

	#ceramic .col1,
	#ceramic .col33                { width:50%; height:428px; overflow:hidden; margin-bottom:32px;  }

	#ceramic h3                 { font-size:16px; font-weight:400; line-height:18px; padding:0 0 12px; margin:0; }
	#ceramic p                  { font-size:12px; font-weight:400; line-height:16px; padding:0; margin:0 0 14px; }

}

@media only screen and (max-width:767px) and (min-width:568px) {

	.fil_3                      { height:0px; }
	.fil_5                      { height:32px; }
	
	.fil1                       { height:160px; }
	.fil2                       { height:400px; }

	.col33 						{ width:50% }
	.col66              		{ width:100% }
	
	header                     { width:560px; height:150px; }


	#menuTop             { padding:0; margin-top:16px; display:block;}
	#menuTop li          { margin:0 16px; height:auto; font-size:13px; line-height:16px; }

	#path                       { display:none; }
		
	#stone                 { height:auto; margin:0 auto 32px;}
	#stone .fil2           { height:400px; }
	#slate 						{ width:100%; margin:0 auto 32px; }
	#slate .col66,				
	#slate .col33,
    #slate .col1,
    #slate .col3        { width:100%; }
	#slate .wrapper              { padding:0 2em; }
	#ceramic,#porcelain        		{ width:96%; margin:0 2% 32px; }

	#ceramic .col1                { width:50%; }

	#porcelain .col33             	{ width:33%; }
	#porcelain .col66             	{ width:66%; }	
	#porcelain h3                    { font-size:14px; font-weight:400; line-height:16px; }
	
	#ceramic .col1,              
	#ceramic .col33              { height:450px; overflow:hidden; margin-bottom:32px; }

	#ceramic h3                 { font-size:16px; font-weight:400; line-height:18px; padding:0 0 12px; margin:0; }
	#ceramic p                  { font-size:12px; font-weight:400; line-height:16px; padding:0; margin:0 0 14px; }

	#porcelain .col1					{ width:100%; }
}

@media only screen and (max-width:567px) {
	

	.fil_3                      { height:0px; }
	.fil_5                      { height:32px; }

	.fil1                       { height:160px; }
	.fil2                       { height:288px; }
	
	.col33,.col66,.col1,.col3       { width:100% }

	#porcelain .col33 {display: none;}
	
	/* 
	 * HEADER 
	 */

	header                      { width:96%; height:150px; }
	
	.molecularspray                { height:32px; margin-top:32px; }

	#menuTop             { padding:0; margin-top:16px; display:block;}
	#menuTop li          { margin:0 10px; height:auto; font-size:11px; line-height:16px; }

	#path                       { display:none; }
		
	#stone                 { height:auto; margin:0 auto 32px;}
	#stone .fil2           { height:288px; }
	#slate,#ceramic,#porecelain        { width:100%; margin:0 auto 32px; }

	#ceramic .col1,
	#porcelain .col3,
	#porcelain .col1,
	#porcelain .col66                 { width:100% }
	#porcelain .col33				{width:50%;}

	#porcelain h3                    { font-size:14px; font-weight:400; line-height:16px; }
	
	#ceramic .col1              { height:auto; overflow:auto; margin-bottom:32px; }
	#ceramic .col33              { height:auto; overflow:hidden; margin-bottom:32px; }

	#ceramic h3                 { font-size:16px; font-weight:400; line-height:18px; padding:0 0 12px; margin:0; }
	#ceramic p                  { font-size:12px; font-weight:400; line-height:16px; padding:0; margin:0 0 14px; }

	

}