@import url('https://fonts.googleapis.com/css?family=Acme|Lobster&display=swap');


html {		overflow-y: scroll;
}

body {		background-color: black;
		color: #fffafa;
		margin: .5em;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: normal;
		line-height: 1.3em;
}



h2 {		color: #778899;
		border-bottom: double;
		padding-bottom: .2em;
		/*margin-bottom: -.15em;*/
}

h3 {		color: #d3d3d3;
		margin-bottom: 0em;
		border-bottom: solid;
		border-bottom-width: .01em;
		padding-bottom: .2em;
}

#container {	width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
		margin-bottom: 1em;
}

p.service {	margin-top: .3em;
		text-align: justify;
}

p.error {	color: #dc143c;
}


.art_types {	width: 50%;
		margin-left: auto;
		margin-right: auto;
		/*font-size: small;*/
		text-align: center;
}

ul.menu {	list-style-type: none;
        
		margin-left: auto;
		margin-right: auto;
		width: 700px;
		/*width="60%";*/
}

li.menu {	display: inline;
		float: left;
		font-size: large;
		margin-left: 1em;
		margin-right: 1em;
		margin-bottom: 1.5em;
}

div.main {	clear: both;
		width: 600px;
		/*width="100%";*/
		margin-left: auto;
		margin-right: auto;
		border-bottom: double;
		border-color: #778899;
		padding-bottom: .25em;
}


#hdr1 p{
    margin-left: auto;
	margin-right: auto;
    font-family: 'Lobster', sans-serif;
    font-size: 70px;
    font-style: italic;
    text-align: center;
    letter-spacing: 3px;
    margin: .5;
    padding: 0;
}

#hdr2 p{
    margin-left: auto;
	margin-right: auto;
    font-family: 'Lobster', sans-serif ;
    font-size: 30px;
    font-style: italic;
    text-align: center;
    margin: 5;
    padding: 5;
}



.example {
  background-color: yellow;
  padding: 20px;
}

p.footer {	width: 50%;
		margin-left: auto;
		margin-right: auto;
		font-size: small;
		text-align: center;
}

label {		width: 5em;
		float: left;
		text-align: left;
		margin-right: 0.5em;
		display: block
}

.submit {	margin-left: 5.5em;
		padding-top: 0em;
		margin-top: .5em;
}

.form {		padding-top: 0em;
		padding-bottom: 0em;
		margin-top: .5em;
		margin-bottom: .5em;
}

a:link {	color: #6495ed;
		text-decoration: none;
		background-color: transparent
}

a:visited {	color: #9966cc;
		text-decoration: none;
		background-color: transparent
}

a:hover {	color: #ffa500;
		text-decoration: none;
		background-color: transparent
}

a:active {	color: #ffa500;
		text-decoration: none;
		background-color: transparent
}


/* style for slider */

* {box-sizing: border-box;}
/*body {font-family: Verdana, sans-serif;}*/
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  /*padding: 8px 12px;*/
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* 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.6s ease;
}

.active {
  background-color: #717171;
}

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

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

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


@media (max-width: 750px) {

#container ul { 
    /*float: left;*/
   width: auto;
}

#container li { 
    /*float: left;*/
    /*width: 100%;*/
    width: auto;
}

/*img {
    float: right;
    display: inline;
}*/




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


/* end of style for slider */

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

@-ms-viewport {
  width: device-width ;
}


}