body
{
 background-color: #111e28;
}

#container
{
 background-color: black;
 width: 1024px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
}

#logo
{
 background-image: url(img/Tlostrony2.jpg);
 width: 1024px;
 height: 276px;
 margin-left: auto;
 margin-right: auto;
}

#menuL
{
 background-color: lightslategray;
 float: left;
 width: 670px;
 padding: 10px;
}
#menuR
{
 background-color: lightslategray;
 float: left;
 width: 314px;
 padding: 10px;
}
.optionL
{
 float: left;
 font-family: 'Abhaya Libre', serif;
 text-align: center;
 font-size: 25px;
 height: 25px;
 min-width: 100px;
 padding: 10px;
}
.optionL:hover
{
 background-color: #a3aeba;
 cursor: pointer;
}
.optionR
{
 float: right;
 text-align: center;
 font-size: 25px;
 min-width: 50px;
 height: 25px;
 padding: 10px;
}
.optionR:hover
{
 background-color: #a3aeba;
 cursor: pointer;
}
a.linkmenu
{
 color: white;
 text-decoration: none;
}

#top
{
 background-color: #111e28;
 padding: 15px;  
}

#topbar
{
 color: white;
 padding: 25px;
 font-size: 25px;
 text-align: center;
 letter-spacing: 2px;
 font-family: 'Tapestry', cursive;
}

#content
{
 background-color: #111e28;
 width: 1024px;
 height: 355px;
 margin-left: auto;
 margin-right: auto;
}
#slider
{
text-align: center;
padding-top: 25px;
}

#content1
{
 color: white;
 padding: 25px;
 font-size: 25px;
 text-align: center;
 letter-spacing: 2px;
 font-family: 'Abhaya Libre', serif;   
}

a.link
{
 color: lightskyblue;
 text-decoration: none;
}

#content2
{
 background-color: #111e28;
 width: 1024px;
 height: 300px;
 margin-left: auto;
 margin-right: auto;
}

#content3
{
 background-color: #111e28;
 width: 1024px;
 height: 300px;
 margin-left: auto;
 margin-right: auto;
}

.button
{
 display: inline-block;
 width: 244px;
 text-align: center;
 padding: 4px;
 margin-top: 90px;
 cursor: pointer;
}

.front,
.back 
{
  width: 244px;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform 0.6s linear;
}

.front {
  transform: perspective(600px) rotateY(0deg);
}

.back {
  transform: perspective(600px) rotateY(180deg);
}

.button:hover > .front {
  transform: perspective(600px) rotateY(-180deg);
}

.button:hover > .back {
  transform: perspective(600px) rotateY(0deg);
}

#con1
{
 background-color: #111e28;
 padding: 15px;  
}

#footerL
{
 float: left;   
 color: white;
 font-family: 'Merriweather', serif;
 text-align: center;
 width: 844px;
 padding: 20px;
}

#footerR
{
 float: right;
 text-align: center;
 width: 100px;
 padding: 20px;
}