a:link, a:visited {color: #a1b095; text-decoration: none;}
a:hover {color: black; text-decoration: none;}
a:active {color: #a1b095; text-decoration: none;}

a.button {
  background-color: #d18fa3;
  border: none;
  color: white !important;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15pt !important;
transition: all 0.2s;
border-radius:2em;
width: 350px;
}

a.button:hover {
background-color: #b16a80 !important;
}

body {margin-top: 50px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial;
font-size: 12pt;
letter-spacing: 1px;
line-height: 15pt;
color: #9d4e69;
background-color: #ffffff;
}

td {
vertical-align: top;
}

h1 {
font-family: 'Muli', sans-serif;
}

h2 {
font-family: 'Muli', sans-serif;
}

hr {
border: 0px;
border-top: 2px dotted #9d4e69;
max-width: 80%;
}

.header {
padding: 0px;
padding-top: 20px;
font-size: 30pt;
font-weight: bold;
color: #ffffff;
background-color: white;
position: relative;
top: 0px;
vertical-align: bottom;
z-index:1;
}

.menu {
padding: 5px;
padding-bottom: 10px;
font-size: 20pt;
line-height: 30px;
font-weight: normal;
font-family: 'Muli', Arial;
letter-spacing: 5px;
color: #d18fa3;
}

a.menu:link, a.menu:visited {color: #a0b096; text-decoration: none;}
a.menu:hover {color: #412435; text-decoration: none;}
a.menu:active {color: #a0b096; text-decoration: none;}


.main {
padding-bottom: 10px;
margin-left: 15%;
margin-right: 15%;
max-width: 100%;
}

.main a:link, a:active {color: #a1b095; text-decoration: none;}
.main a:visited {color: #a1b095; text-decoration: none;}
.main a:hover {color: black; text-decoration: none;}


.gallery {
padding-bottom: 30px;
max-width: 100%;
}

.galler a:link img {
padding: 10px;
}
.galler a:visited img {
padding: 10px;
}
.galler a:hover img {
padding: 10px;
background-color: #feb4b8;
}

.gallery img {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.projects {
border: 1px solid #9e5e74;
width: 100%;
padding: 10px;
margin-bottom: 10px;
text-align: left;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.projects h2 {margin: 3px; margin-bottom: 10px;}

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 150px;
  margin: 0.2em;
  position: relative;
  width: 200px;
}

span.text-content {
  background: rgba(158,94,116,0.7);
  color: white;
  font-size: 14pt;
  font-family: 'Muli', Arial;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;  
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.image {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
font-size: 10pt;
color: #9d4e69;
}

.image h2 {
font-family: 'Muli', Arial;
margin: 0px;
margin-left: 0px;
}

.image a:link, a:active {color: #a1b095; text-decoration: none;}
.image a:visited {color: #a1b095; text-decoration: none;}
.image a:hover {color: black; text-decoration: none;}

.nextbutton {
position: fixed;
top: 50%;
right: 15px;
float: right;
}

.nextbutton a { display:block; width: 70px; height: 70px; background: url("images/next.png") 0 0 no-repeat; }
.nextbutton a:hover { background-position: 0 -70px; }
.nextbutton a:active { background-position: 0 -70px; }

.prevbutton {
position: fixed;
top: 50%;
left: 15px;
float: left;
}

.prevbutton a { display:block; width: 70px; height: 70px; background: url("images/prev.png") 0 0 no-repeat; }
.prevbutton a:hover { background-position: 0 -70px; }
.prevbutton a:active { background-position: 0 -70px; }

.footer {
height: 60px;
font-size: 11pt;
letter-spacing: 3px;
line-height: 18pt;
position: relative;
bottom: 0;
color: #feb4b8;
background-color: white;
}

a.footer:link, a.footer:visited {color: #ffe7bc; text-decoration: none;}
a.footer:hover {color: black; text-decoration: none;}
a.footer:active {color: #ffe7bc; text-decoration: none;}

.twitter-share-button {vertical-align: middle;}
.fb-share-button {vertical-align: middle; top: 0px;}

.fotgal {border:1px; border-thickness: 1px; border-color: #FF63E7;
border-style: solid;}
A:visited .fotgal {border:1px; border thickness: 1px; border-color: #FF63E7; border-style: solid}
A:hover .fotgal, A:active .fotgal {border:1px; border-thickness: 1px;
border-color: black; border-style: solid}

@media (max-width: 768px) {
    ul.img-list li.coming-soon {
        display: none;
    }
    ul.img-list li {
        max-width: 45% !important;
        height: auto;
    }
    ul.img-list li img {
        width: 100%;
        height: auto;
    }
    span.text-content {
      font-size: 14pt;
      font-family: 'Muli', Arial;
      height: auto;
      left: 0;
      position: absolute;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
    }
}

@media (min-width: 768px) {
div.gallery {
margin-right: 80px;
margin-left: 80px;
}
}

  .menu {
font-size: 20pt;
letter-spacing: 5px;
}
  .footer {
font-size: 12pt;
letter-spacing: 2px;
}
}