/* Style sheet 2.0 layout - www.lopezmarcos.com - 04/11/2014 - */

	
	/* MY PREFERENCES

Typographies:
GENERAL : Arial, Helvetica, sans-serif;  
TITLE: Arial, Helvetica, sans-serif;

Colors:
#000000 BLACK
#ffffff WHITE

	*/

	/*  general rules */


em	{
	font-weight: bold;
	font-style: normal;

	}

	
img	{
	display: block;
	border: 0;
	}


	/*  General layout parameters  */

body	{
	background: #80dfff;
	margin: 0;
	padding: 0;
	border: 0;
	}


	/* Styles for the website container  */


#container	{
	background: #fff center;
	margin: 0px auto;
	padding: 0;
	width: auto;  /* bmh */
	}


html>#container	{
	width: auto;	
	} 


	/* Styles for the page body  */

#pagebody	{
	padding: 0;
	top: 0px;
	left: 0px;
	border: 0;
	background: #fff;
	clear: both;
	width: auto;
	height: auto;	
	}
	
html>#pagebody	{
	width: auto;	
	} 

	/* styles for TITLE - LAYER FOR UPPER TITLE*/

#TITLE	{
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	padding: 0;
	height: auto;
	width: 100%;
	} 
	
	/*  Shapes */

#TITLE hr {
    height: 0px;
	clear: both;
	align: center;
    color: #000;
	border: 1px solid;
	margin: 0px 0px 0 0px;
    }


	
	
	/* styles for RTITLE - layer for the upper RIGHT TITLE */

#RTITLE	{
	float: right;  
	margin: 20% 0 0 0;
    padding: 1%;
	border: 0;
	height: auto;
	width: 62%;
	margin-left: auto;
	margin-right: auto;  
    border-radius: 25px 0 0 25px;
    background: #FFF;
  	opacity: 0.9;
  
	} 

		
	/*  Shapes */

#RTITLE hr {
	height: 0px;
	width: 50%;
	clear: both;
	align: center;
	color: #FFF;
	border: 0.5px solid;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
    }


	/* styles for LTITLE - layer for the upper LEFT TITLE */

#LTITLE	{
	position: fixed;
	float: left;
	top: 35%;
	left: 0px;
	padding: 0;
	border: 0;
	height: auto;
	width: auto;
	background-color: #0086b3;
	opacity: 0.5;
	} 
	
#LTITLESOCIAL	{
	padding: 0;
	margin: 1em 1em 1em 1em;
	padding: 0;
	border: 0;
	background-color: transparent;
	} 
	
#LTITLESOCIAL image{
    width: 1em;
    height: 1em;
	} 
		
#LTITLE2	{
	position: fixed;
	float: left;
	top: 20%;
	left: 0px;
	padding: 0;
	border: 0;
	height: auto;
	width: auto;
	background-color: #0086b3;
	opacity: 0.5;
	} 
	
#LTITLE2SOCIAL	{
	padding: 0;
	margin: 20px 20px 20px 20px;
	padding: 0;
	border: 0;
	background-color: transparent;
	} 
	


	/* styles for MENUTITLE - layer for the left Navigation Menu*/

#MENUTITLE	{
	float: right;  
	margin: 0;
    padding: 1%;
	border: 0;
	height: auto;
	width: 56%;
	margin-left: auto;
	margin-right: auto;  
    border-radius: 0 0 0 25px;
    background: #4dd2ff;
  	opacity: 0.9;
	}


	/*  Typography */
	
#MENUTITLE h3	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 2.2vw;
    }
	

html>#MENUTITLE h3 	{
	font-size: 2.2vw;
	}


#MENUTITLE a:link	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.8vw;
    }
	
html>#MENUTITLE a:link 	{
	font-size: 1.8vw;
	} 

#MENUTITLE a:hover {
	color: #0099CC;
	background: transparent; 
	}
	



	/*  Shapes */

#RTITLE hr {
	height: 0px;
	clear: both;
	align-items: center;
	color: #66d9ff;
	border: 0.5px solid;
	margin: 0px 0px 0 0px;
    }


	/*  Typography */
	
#RTITLE h1	{
	padding: 0;
	margin: 1% 1% 0 1%;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;  
	text-align: center;
	color: #4dd2ff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 3.0vw;
	}

html>#RTITLE h1 	{
	font-size: 3.0vw;
	}

#RTITLE h2	{
	padding: 0;
	margin: 8px 10px 0px 5px;
	text-decoration: none;
	text-shadow: 2px 2px #80dfff;
	font-weight: bold;
	letter-spacing: 1.5px;
	line-height: 0.4em;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	text-align: center;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.6em;
    }
	

html>#RTITLE h2 	{
	font-size: 1.6em;
	}


#RTITLE h3	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #4dd2ff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 2.0vw;
    }
	

html>#RTITLE h3 	{
	font-size: 2.0vw;
	}

	
#RTITLE h4	{
	padding: 0;
	margin: 10px 0px 10px 0px;
	text-decoration: none;
	text-shadow: 1px 1px #333;
	font-weight: normal;
	letter-spacing: 1.5px;
	line-height: 0.1em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	text-align: center;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 0.8em;
    }
	

html>#RTITLE h4 	{
	font-size: 0.8em; 
	}


#RTITLE h5	{
	padding: 0;
	margin: 0 0 0 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #66d9ff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 2.1vw;
    }
	

html>#RTITLE h5 	{
	font-size: 2.1vw; 
	}


#RTITLE a:link	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: auto-flow;
	line-height: auto-flow;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #4dd2ff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.8vw;
    }
	
html>#RTITLE a:link 	{
	font-size: 1.8vw;
	} 

#RTITLE a:hover {
	color: #f30;
	background: transparent; 
	}
	
#RTITLE img	{
	padding: 0;
	margin: 20px auto;
	margin-left: auto;
	margin-right: auto;
    }
		
	
	/* styles for slideshow - layer for the slideshow*/

.slideshow-container1 {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	background-image: url(../images/total_pictures_ceramic2019_20_2/20F.jpg);
	background-size: 100%;
	}
	
.slideshow-container2 {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	background-color: #80dfff;
	}
		
.slideshow-container3 {
	position: relative;
	width: auto;
	height: auto;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	background-image: url(../images/total_pictures_ceramic2019_20/1C.jpg);
	background-size: 100%;
	}
		
.mySlides img{
    width: 100%;
    height: 100%;
	} 


.mySlides h5	{
	padding: 0;
	margin: 0 20px 0 20px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	text-align: right;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 0.8vw;
    }

html>.mySlides h5	{
	font-size: 0.8vw;
	} 



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5.0s;
  animation-name: fade;
  animation-duration: 5.0s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


	/* styles for UPINTRO - layer for main picture*/

#UPINTRO	{
	position: relative;
    width: 100%;
    height: 100%;
	float:left;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	scroll-behavior: smooth;
	} 
	

#UPINTRO	img{
    width: 100%;
    height: 100%;
	opacity: 1;
	} 
	



	/* styles for DOWNINTRO - layer for the artwork pictures*/

#DOWNINTRO	{
	position: relative;
	float:left;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	scroll-behavior: smooth;
	} 
	

#IDOWNINTRO	{
	position: relative;
	float:left;
	left: Opx;
    width: auto; 
    height: auto;
	margin: 0;
	padding: 0;
	background-color: transparent;
	} 
	
	
#IDOWNINTRO	img{
    width: 100%;
    height: 100%;
	opacity: 1;
	} 
	
		
#IDOWNINTRO2	{
	position: relative;
	float: left;
	left: Opx;
	width: auto;
	height: auto;
	margin: 0 5vw 0 5vw;
	padding: 0;
	background-color: #transparent;
	} 
	
	
#IDOWNINTRO2	img{
    width: 100%;
    height: 100%;
	} 
	

#IDOWNINTRO3	{
	position: relative;
	float:left;
	left: Opx;
    width: 50%; 
    height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0;
	background-color: transparent;
	} 
	
	
#IDOWNINTRO3	img{
    width: 100%;
    height: auto;
	} 
	
	
#IDOWNINTRO3 a:link	{
	background: transparent; 	
    }
	
html>#IDOWNINTRO3 a:link 	{
	background: transparent; 	
	} 

#IDOWNINTRO3 a:hover {
	opacity: 0.5;
	} 
	
#IDOWNINTRO4	{
	position: relative;
	float: left;
	left: Opx;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background-color: #transparent;
	} 
	
		
	/*  Typography */
	
#UPINTRO h1	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Times;
	text-align: left;
	color: #80dfff;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#UPINTRO h1 	{
	font-size: 12px; 
	} 

#UPINTRO h2	{
	padding: 0;
	margin: 0 0 0 0px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align: left;
	color: #666;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 12px;
    }

html>#UPINTRO h2 	{
	font-size: 12px; 
	} 

#DOWNINTRO h1	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1em;
	font-family: "Times New Roman", Times, serif;
	text-align: right;
	color: #80dfff;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#DOWNINTRO h1 	{
	font-size: 12px; 
	} 

#IDOWNINTRO2 h1	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1em;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 3.0vw;
    }

html>#IDOWNINTRO2 h1	{
	font-size: 3.0vw;
	} 
	

#IDOWNINTRO2 h2	{
	padding: 0;
	margin: 0 0 10px 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-style: italic;
	text-align: center;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.2vw;
    }

html>#IDOWNINTRO2 h2	{
	font-size: 1.2vw;
	} 
	

#IDOWNINTRO2 h3	{
	padding: 0;
	margin: 10px 0px 0 0px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.5vw;
    }

html>#IDOWNINTRO2 h3	{
	font-size: 1.5vw;
	} 
	

#IDOWNINTRO2 h4	{
	padding: 0;
	margin: 20px 0 0 0;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1em;
	font-family: "Copperplate", fantasy;
	font-style: italic;
	text-align: center;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.5vw;
    }

html>#IDOWNINTRO2 h4	{
	font-size: 1.5vw;
	} 
	
#IDOWNINTRO2 h5	{
	padding: 0;
	margin: 20px 10px 0 10px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-style: italic;
	text-align: left;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.2vw;
    }

html>#IDOWNINTRO2 h5	{
	font-size: 1.2vw;
	} 
	

#IDOWNINTRO2 a:link	{
	padding: 0;
	margin: 20px 20px 40px 70px;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	text-align: left;
	color: #F00;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1em;
    }

html>#IDOWNINTRO2 a:link 	{
	font-size: 1em; 
	} 
	

#IDOWNINTRO2 a:hover {
	color: #f30;
	}
	

#IDOWNINTRO4 h1	{
	padding: 0;
	margin: 10px 0px 10px 0px;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Times New Roman Italic";
	font-style: italic;
	text-align: center;
	color: #FFF;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.2em;
    }

html>#IDOWNINTRO2 h1	{
	font-size: 1.2em; 
	} 
	
#leftDOWNINTRO h1	{
	padding: 0;
	margin: 0 0 30px 0px;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	text-align: left;
	color: #666;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 18px;
    }

html>#leftDOWNINTRO h1 	{
	font-size: 18px; 
	} 

#leftDOWNINTRO h2	{
	padding: 0;
	margin: 40px 0 20PX 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	text-align: left;
	color: #000;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#leftDOWNINTRO h2 	{
	font-size: 12px; 
	} 

#leftDOWNINTRO h3	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	text-align: left;
	color: #666;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 14px; 
    }

html>#leftDOWNINTRO h3 	{
	font-size: 14px; 
	} 

#rightDOWNINTRO h1	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	text-align: left;
	color: #000;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#rightDOWNINTRO h1 	{
	font-size: 12px; 
	} 
	
	

	/* styles for BOTTOM - LAYER FOR BOTTOM */

#BOTTOM	{
	z-index: 2;
	position: static;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #80dfff;
	height: auto;
	} 
	

#BOTTOM img	{
	padding: 0;
	margin: 50px 0px 0 0px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0.3;
    }
	
	/*  Shapes */

#BOTTOM hr {
    height: 0px;
	clear: both;
	align: center;
    color: #ccc;
	border: 1px solid;
	margin: 0px 20px 0 20px;
    }


	/*  Typography */
	
#BOTTOM h3	{
	padding: 0;
	margin: 30px 0px 20px 0px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing: lenght;
	line-height: 1.5em;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-style: normal;
	text-align: center;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 1.0vw; 
    }

html>#BOTTOM h3 	{
	font-size: 1.0vw; 
	} 


	/* styles for LBOTTOM - layer for the upper LEFT BOTTOM */

#LBOTTOM	{
	position: relative;
	float:left;
	margin: 20px 10px 20px 20px;
	padding: 0;
	border: 0;
	background-color: transparent;
	} 
	
#LBOTTOM h1	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 12px;
    }

html>#LBOTTOM h1 	{
	font-size: 12px; 
	} 
	
	
#LBOTTOM a:link	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
	color: #fff;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: 12px;
    }

html>#LBOTTOM a:link 	{
	font-size: 12px; 
	} 
	

#LBOTTOM a:hover {
	color: #f30;
	background: transparent; 
	}
	

	/* styles for RBOTTOM - layer for the upper RIGHT BOTTOM */

#RBOTTOM	{
	position: relative;
	float: left;
	top: 55px;
	left: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #80dfff;	
	} 

	/* styles for DOWNBOTTOM - layer for the down RIGHT BOTTOM */
	
#DOWNBOTTOM	{
	float: left;
	top: 0px;
	left: 0px;
	padding: 0;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	background-color: #80dfff;
	} 


	/* styles for RDOWNBOTTOM - layer for the down RIGHT BOTTOM */
	
#RDOWNBOTTOM	{
	position: relative;
	float: left;
	left: 0px;
	padding: 0;
	margin: 50px 0 50px 10px;
	padding: 0;
	border: 0;
	background-color: #80dfff;
	} 


	/*  Typography */
	
#RBOTTOM h3	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	color: #fff;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#RBOTTOM h3 	{
	font-size: 12px; 
	} 

#RDOWNBOTTOM h4	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	color: #fff;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#RDOWNBOTTOM h4 	{
	font-size: 12px; 
	} 


#RDOWNBOTTOM a:link	{
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	line-height: 1.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: right;
	color: #fff;
	voice-family: "\"}\"";   
	voice-family: inherit;   
	font-size: 12px; 
    }

html>#RDOWNBOTTOM a:link 	{
	font-size: 12px; 
	} 
	

#RDOWNBOTTOM a:hover {
	color: #f30;
	background: transparent; 
	}
	



	/* General Links  */
	
a:link, a:visited {
	background: transparent;
	text-decoration: none;
	color: #fff;
	}



a:active {
	color: #fff;
	background: transparent; 
	}