@charset "utf-8";
/* CSS Document */
body {
margin : 0;
padding : 0;
background: none;
font-family:'antonioregular';
font-weight : normal;
font-size : 14px;
text-align:left;
color: #D3C484;
line-height: 1.5;
}
@font-face {
font-family: 'antonioregular';
src: url('FONTS/antonio-regular-webfont.woff2') format('woff2'),
url('FONTS/antonio-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

h1 {
color : #A0A0A0;
font-family:'antonioregular';
font-weight : bold;
font-size : 20px;
text-align:center;
}

h2 {
color : #A0A0A0;
font-family:'antonioregular';
font-weight : bold;
font-size : 16px;
}



h4 {
color: #D3C484;
font-family:'antonioregular';
font-weight : bold;
font-size : 20px;
text-align:center;
}


a:link {
 font-family:'antonioregular';
font-weight : normal;
font-size : 14px;

text-align:left;
color: #0069A0;
line-height: 1.5;
}


/* BOX_MENU names */
a:visited {
 font-family:'antonioregular';
font-weight : normal;
font-size : 14px;

text-align:left;
color: #0069A0;
line-height: 1.5;
}


/* reveal BOX_MENU picture on hover */
a:hover{
font-family:'antonioregular';
font-weight : normal;
font-size : 14px;

text-align:left;
color: #FFA4CD;
line-height: 1.5;}

/* hide BOX_MENU name on hover */
a:active {
 font-family:'antonioregular';
font-weight : normal;
font-size : 14px;
font-weight:bold;

color: #0069A0;
line-height: 1.5;}
  
.TITLE{
color : #A0A0A0;
font-family:'antonioregular';
font-weight : normal;
font-size : 15px;
}

.TITLE_2{
color: #D3C484;
font-family:'antonioregular';
font-weight : bold;
font-size : 20px;
}

.TITLE_3{
color: #D3C484;
font-family:'antonioregular';
font-weight : bold;
font-size : 20px;
text-align:center;
}

.TITLE_4 {
	font-family:'antonioregular';
font-weight : normal;
font-size : 14px;
font-weight:bold;
text-align:left;
color: #0069A0;
line-height: 1.5;
}

#WRAPPER {
	width : 100%;
	height : auto;
	margin : 0 auto;
	padding : 0;
	align-items: center;
	
	color: #069;
}
#HEADER {
background-image : ;
background-repeat : no-repeat;
background-position : center top;
background-color: #ffffff;
width : 100%;
height : 150px;
margin : 0 auto;
}
#CONTENT{
/* background-image : url(image.png); 
background-repeat : repeat-y;
background-position : center top; */
width : 1100px;
min-height: 400px;
margin : 0 auto;
align-items: center;
font-family: 'antonioregular';
}
#CONTENT_200{
/* background-image : url(image.png); 
background-repeat : repeat-y;
background-position : center top; */
width : 1100px;
min-height: 200px;
margin : 0 auto;
align-items: center;
font-family: 'antonioregular';
}
#TOP_MENU {
background-image : ;
background-repeat : no-repeat;
background-position : center top;
background-color: #ffffff;
width : 100%;
min-height : 60px;
margin : 0 auto;
align-items: center;
}
.TOP_MENU{
font-family: 'antonioregular';
color: #D3C484;
}


/* top slide down menu start */
.overlay {
  height:0%;
  width: 100%;
  position: fixed;

  
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: auto;
  transition: 0.5s;
 
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 10px;

}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px; /* change overlay menu font size here */
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 30px;

  
}


@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 30px}
  .overlay .closebtn {
  font-size: 30px;
  top: 20px;
  right: 100px;
  text-align:center;
  }
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 30px}
  .overlay .closebtn {
  font-size: 30px;
  top: 20px;
  right: 100px;
  text-align:center;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up)*/ 
@media only screen and (min-width: 600px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 20px;
  top: 20px;
  right: 100px;
  text-align:center;
  }
}


/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 30px}
  .overlay .closebtn {
  font-size: 30px;
  top: 20px;
  right: 100px;
  text-align:center;
  }
}


/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {  
.overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 25px;
  top: 20px;
  right: 100px;
  text-align:center;
  }}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {{  
.overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 20px;
  top: 20px;
  right: 100px;
  text-align:center;
  }}
/* top slide down menu end */

#SLIDESHOW_SLIDER{
width : 1100px;
height: 540px;
margin : 0 auto;
align-items: center;		
}
#SLIDESHOW {
background-image : ;
background-repeat : no-repeat;
background-position : center top;
background-color: #ffffff;
align-items: center;
text-align:center;
width : 100%;
height : 560px;
margin : 0 auto;
}
/* slideshow 1 start */
* {box-sizing: border-box;}
body {}
.mySlides {display: none; }
img {vertical-align: middle;
}

.slideshow-container {
  max-width: 1100px;
 
  padding: 10px;
  position: relative;
  margin: auto;
 border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4)
}

/* Caption text */
.text {
  font-family:'antonioregular';
  color: #D3C484;
  font-size: 45px;
  position: absolute;
  bottom: -1px;
  left: ;
  text-align:left;
  width: 100%;
}

/*.textmain{
  font-family:'antonioregular';
  color: #f1f1f1;
  font-size: 14px;
  position: absolute;
  bottom: -45px;
  text-align:left;
  width: 100%;
}*/

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.8s ease;
}

.active {
  background-color: #D3C484;
}

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

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px;}
 
}
/* slideshow 1 end */





#BOX_MENU_ZONE {
position: relative; 
background-color: #F1F2F2;
align-items: center;
text-align:center;
min-height: 400px;
min-width: 1100px;
width: 100%;
margin : 0 auto;
padding-top: 0px;
padding-bottom: 0px;
min-height: 600px;
}

th {
  background-color: #04AA6D;
  color: white;
  border-bottom: 1px solid #ddd;
}

/* BOX_MENU start*/
@import url(https://fonts.googleapis.com/css?family=Sigmar+One);

/* BOX_MENU pictures */
.BOX_MENU {
  width: 200px;
  height: 200px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 100px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 1px;
}


/* BOX_MENU names */
.BOX_MENU::after {
  width: 90%;
  height: 90%;
  display: block;
  white-space: pre;
 
  font: 15pt 'antonioregular';
  color: #ffffff;
  border: 1px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
}


/* reveal BOX_MENU picture on hover */
.BOX_MENU:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;}

/* hide BOX_MENU name on hover */
.BOX_MENU:hover::after {
  opacity: 0;
  transition: opacity .5s;}



#LIFE_OF_KATE {
  background-image: url(IMAGES/KateCoeTemnomeroff1.jpg);
  color: rgba(91, 91, 91, .5); }
#LIFE_OF_KATE::after { content: 'LIFE OF KATE'; }

#MAFONIA_PINA_PONT {
  background-image: url(IMAGES/MafoniaPinaPont1.jpg);
 color: rgba(91, 91, 91, .5); }
#MAFONIA_PINA_PONT::after { content: 'MAFONIA PINA PONT'; }

#BOOKS {
  background-image: url(IMAGES/Books1.jpg);
  color: rgba(91, 91, 91, .5); }
#BOOKS::after { content: 'BOOKS'; }

#SALES {
  background-image: url(IMAGES/Venice1.jpg);
 color: rgba(91, 91, 91, .5); }
#SALES::after { content: 'SALES'; }



#NEWS {
  background-image: url(IMAGES/KateCoeTemnomeroff2.jpg);
  color: rgba(91, 91, 91, .5); }
#NEWS::after { content: 'NEWS'; }

#EXHIBITIONS {
  background-image: url(IMAGES/WinterShowPoster1.jpg);
  color: rgba(91, 91, 91, .5); }
#EXHIBITIONS::after { content: 'EXHIBITIONS'; }

#GALLERY1885 {
  background-image: url(IMAGES/Books1.jpg);
  color: rgba(91, 91, 91, .5); }
#GALLERY1885::after { content: 'GALLERY1885'; }

#THE_CAMERA_CLUB_JOURNAL {
  background-image: url(IMAGES/TCCJournal1.jpg);
  color: rgba(91, 91, 91, .5); }
#THE_CAMERA_CLUB_JOURNAL::after { content: 'TCC JOURNAL'; }



#ARTICLES {
  background-image: url(IMAGES/KateCoeTemnomeroff1.jpg);
  color: rgba(91, 91, 91, .5); }
#ARTICLES::after { content: 'ARTICLES'; }

#ILLUSTRATIONS {
  background-image: url(IMAGES/Illustrations1.jpg);
 color: rgba(91, 91, 91, .5); }
#ILLUSTRATIONS::after { content: 'ILLUSTRATIONS'; }

#PAINTINGS {
  background-image: url(IMAGES/Paintings1.jpg);
  color: rgba(91, 91, 91, .5); }
#PAINTINGS::after { content: 'PAINTINGS'; }

#PHOTOGRAPHY {
  background-image: url(IMAGES/Venice1.jpg);
 color: rgba(91, 91, 91, .5); }
#PHOTOGRAPHY::after { content: 'PHOTOGRAPHY'; }



#THE_STORY {
  background-image: url(IMAGES/KateCoeTemnomeroff1.jpg);
  color: rgba(91, 91, 91, .5); }
#THE_STORY::after { content: 'UNDER THE SPOTLIGHT'; }

#A_TEMNOMEROFF {
  background-image: url(IMAGES/MafoniaPinaPont1.jpg);
 color: rgba(91, 91, 91, .5); }
#A_TEMNOMEROFF::after { content: 'APOLLONI TEMNOMEROFF'; }

#I_CHERNIKHOV {
  background-image: url(IMAGES/IakovChernikhov2.jpg);
  color: rgba(91, 91, 91, .5); }
#I_CHERNIKHOV::after { content: 'IAKOV CHERNIKHOV'; }

#CONTACT {
  background-image: url(IMAGES/Venice1.jpg);
 color: rgba(91, 91, 91, .5); }
#CONTACT::after { content: 'CONTACT'; }



#wrapper {
  width: 200px;
  height: 200px;
  margin:  auto;
}
/* BOX_MENU end*/




#FOOTER {
background-color: #EDDE93;
align-items: center;
text-align:center;
min-height: 180px;
width: 100%;
margin : 0 auto;
font-family:'antonioregular';
font-size:12px;
color:#999;
text-align:center;
}

#COPYRIGHT{
/* background-image : url(image.png); 
background-repeat : repeat-y;
background-position : center top; */
width : 100%;
min-height: 180px;
margin : 0 auto;
align-items: center;
padding-top: 25px;
font-family:'antonioregular';
font-size:12px;
color:#999;
text-align:center;
}