/**********************************************************************************

       .__          __         .__    ____                     .__
______ |  | _____ _/  |________|  |__/_   |______  ______ ____ |  |__
\____ \|  | \__  \\   __\___   /  |  \|   \_  __ \/  ___// ___\|  |  \
|  |_> >  |__/ __ \|  |  /    /|   Y  \   ||  | \/\___ \\  \___|   Y  \
|   __/|____(____  /__| /_____ \___|  /___||__|  /____  >\___  >___|  / .ch
|__|             \/           \/    \/                \/     \/

**********************************************************************************/

@font-face {
  font-family: "Socialico";
  src: url(fonts/Socialico.otf) format("otf"),
    url(fonts/Socialico.ttf) format("ttf");
  src: local("Socialico"), local(Socialico),
    url(fonts/Socialico.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}

a img {
  border: none;
}

h1,
h2,
h3 {
  font-family: "Press Start 2P", cursive;
  font-family: "Codystar", cursive;
  font-family: "Acme", sans-serif;
  text-transform: uppercase;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.7em;
}
h3 {
  font-size: 1.5em;
}

html,
body {
  width: 100%;
  font-family: "Quando", serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  line-height: 23px;
  text-align: center;
}
body {
  overflow-x: hidden;
  overflow-y: scroll;
}

div.layout {
  margin: 0;
  padding: 0;
}

aside {
  background-color: rgba(255, 255, 255, 0.1);
}
aside > * {
  margin: 0 15px;
  padding: 15px 0;
}

.wrapper {
  width: 100%;
}
.mobile {
  display: none;
}

.sidebar {
  display: inline-block;
  width: 320px;
  float: left;
  background: url(bg-pattern-green.png) repeat;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  font-family: "Acme", sans-serif;
  text-transform: uppercase;
  /*color: rgb(31,52,4);	- dark green */
  color: rgba(0, 0, 0, 0.55);
  text-align: left;
  -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
}

::selection {
  background: rgba(24, 106, 12, 0.7); /* Safari */
}

::-moz-selection {
  background: rgba(24, 106, 12, 0.7); /* Firefox */
}

/*---------------------------------------------------------------------

	Sidebar: Navigation

*/
ul.nav {
  list-style: none outside none;
  font-size: 15px;
  padding: 0;
  margin: 0;
}
ul.nav.sub {
  background-color: rgba(0, 0, 0, 0.3);
  background/*\**/: url(img/bg/black_30.png) \9;
  display: none;
}
ul.nav.sub.active {
  display: block;
}

ul.nav li {
  line-height: 40px;
  list-style: none outside none;
  padding-left: 2em;
  transition-property: background-color, padding-left;
  transition-duration: 0.7s;
}
ul.nav.sub li {
  padding-left: 2.8em;
}

ul.nav li:hover {
  background-color: rgba(255, 255, 255, 0.2);
  background/*\**/: url(img/bg/white_20.png) \9;
  *background: url(img/bg/white_20.png);
  padding-left: 2.5em;
}
ul.nav li.active {
  background-color: rgba(255, 255, 255, 0.1);
  background/*\**/: url(img/bg/white_20.png) \9;
  *background: url(img/bg/white_20.png);
}

ul.nav a,
ul.nav a:link,
ul.nav a:active,
ul.nav a:visited,
ul.nav a:hover,
ul.nav a:focus {
  color: rgb(31, 52, 4);
  text-decoration: none;
  font-size: 1.5em;
}

.main {
  display: inline-block;
  position: static;
  margin: 0 auto;
  text-align: left;
}

.header {
  display: none;
}

.header,
.content,
.footer {
  margin: 30px;
  max-width: 700px;
  background-color: rgba(0, 19, 37, 0.4);
  /* background: rgba(0,0,0,0.4); */
  background/*\**/: url(img/bg/black_40.png) \9;
  color: rgba(255, 255, 255, 0.9);
  color/*\**/: rgb(250, 250, 250) \9;
  padding: 4em;
  width: 700px;
  -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
  box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
}

.main a,
.main a:link,
.main a:active,
.main a:visited {
  /*color: rgba(20,20,20,0.9);
	background: rgba(250,250,250,0.6);*/

  /*color: rgba(255,255,255,0.8);

	background: #367e20;*/

  color: #367e20;
  text-decoration: none;
}
.main a:hover,
.main a:focus {
  /*color: rgba(20,20,20,0.9);
	text-decoration: none;
	background: rgba(250,250,250,0.5);*/

  text-decoration: underline;
  color: #367e20;
}

.content {
  min-height: 400px;
}

.logo {
  width: 220px;
  display: block;
  margin: 30px auto 10px auto;
}

.social {
  font-family: "Socialico";
  text-transform: none;
  font-size: 40px;
  text-align: center;
  line-height: 55px;
  vertical-align: top;
}

.social a,
.social a:link,
.social a:active,
.social a:visited,
.social a:hover,
.social a:focus {
  /*color: rgb(31, 52, 4); - dark green */
  color: rgba(0, 0, 0, 0.55);
  text-decoration: none;
  transition-property: opacity;
  transition-duration: 0.3s;
}
.social a:hover {
  opacity: 0.8;
}

/*---------------------------------------------------------------------

	Boxes

*/

.box2,
.box3 {
  display: inline-block;
  margin-right: 5px !important;
  vertical-align: top;
}

.box2 {
  width: 50%;
  max-width: 320px;
}

.box3 {
  width: 33%;
  max-width: 205px;
}

div + .box2,
div + box3 {
  margin: 5px !important;
}

.portfolio-tile {
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.portfolio-tile:hover {
  opacity: 0.8;
}

.portfolio-tile div {
  visibility: hidden;
  display: inline-block;
  height: 35px;
  width: 100%;
  top: 165px;
  line-height: 25px;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  background-size: 100%;
}

.portfolio-tile:hover div {
  visibility: visible;
}

span.portfolio-label {
  margin: auto 10px;
  line-height: 35px;
  height: 35px;
  display: block;
  vertical-align: middle;
  color: #fff !important;
}

@media screen and (max-width: 1500px) {
  .main {
    position: absolute;
    left: 320px;
  }
}

@media screen and (max-width: 1040px) {
  .box2 {
    width: 45%;
  }
  .box3 {
    width: 27%;
  }
  .portfolio-tile {
    width: 175px;
    height: 175px;
  }
  .portfolio-tile div {
    top: 140px;
  }
}

@media screen and (max-width: 800px) {
  .portfolio-tile {
    width: 150px;
    height: 150px;
    margin: 0 7px 7px 0;
  }
  .portfolio-tile div {
    top: 115px;
  }
}

@media screen and (max-width: 650px) {
  .portfolio-tile {
    width: 200px;
    height: 200px;
    left: 50%;
    position: relative;
    margin-left: -100px;
    display: block;
  }
  .portfolio-tile div {
    top: 165px;
    visibility: visible;
  }
}

@media screen and (max-width: 320px) {
  .box2 {
    width: 42%;
  }
  .box3 {
    width: 25%;
  }
}

/*---------------------------------------------------------------------

	Tables

*/

table {
  width: 100%;
  background-color: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.9);
  padding: 0;
  border-spacing: 0;
  /* padding: 1em; */
  margin: 0.5em 0px !important;
  overflow: auto;
}
td {
  margin: 0;
  padding: 1em;
}
thead {
  font-weight: bold;
  background: url(bg-pattern-green.png) repeat;
  text-transform: uppercase;
}

tbody tr:nth-child(even) {
  background-color: #efefef;
}

/*---------------------------------------------------------------------

	Forms

*/

input,
select,
textarea {
  padding: 0.4em;
  margin: 0.4em;
}

input[type="button"],
input[type="submit"],
button {
  background: #326a21;
  text-transform: uppercase;
  /*font-family: 'Acme',sans-serif;*/
  border-radius: 15px;
  color: #fff;
  border: none;
  font-family: inherit;
}
input[type="text"],
input[type="password"],
textarea {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
}
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: #367e20;
  cursor: pointer;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus {
  border: 1px solid #009600;
}

/*---------------------------------------------------------------------

	Swipe.js - Javascript Slider

*/

.swipe {
  margin: 1em 0;
}
.swipe ul {
  padding: 0;
}
.swipe li div {
  padding: 1em;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

/* Mobile CSS - Medium (Tablets, small Screens) */

@media screen and (max-width: 1050px) {
  .main {
    background: rgba(0, 0, 0, 0.4);
    background/*\**/: url(img/bg/black_40.png) \9;
    background-attachment: fixed;
  }
  .header,
  .content,
  .footer {
    margin: 0;
    max-width: none;
    width: auto;
    height: 100%;
    background: none;
  }
}

/* Mobile CSS - Small (Smartphones) */
@media screen and (max-width: 650px) {
  html,
  body {
    height: auto;
  }

  .main {
    background: none;
  }
  body {
    background: rgba(0, 0, 0, 0.4);
    background/*\**/: url(img/bg/black_40.png) \9;
  }

  h1 {
    font-size: 1.8em;
  }

  .mobile {
    display: block;
  }
  .nomobile {
    display: none !important;
  }
  .logo {
    height: 90px;
    width: auto;
    /*display: inline-block;
	float: left;*/
    margin: 5px auto 5px auto;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .header,
  .content,
  .footer {
    margin: 0;
    max-width: 650px;
    /*padding: 5px 10px;*/
    padding: 5px 0;
  }

  .main {
    position: relative;
    left: 0;
    width: 100%;
    overflow-x: hidden;
  }

  .header > *,
  .content > *,
  .footer > * {
    margin: 5px 10px;
  }
  .footer {
    position: relative;
    margin-bottom: 0;
    height: 40px;
  }

  ul.nav {
    margin: 0;
    text-align: center;
  }

  ul.nav.sub {
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.4);
  }

  ul.nav li,
  ul.nav.sub li {
    padding: 0 0.5em;
    margin: 0;
    display: inline-block;
    background: none;
  }
  ul.nav li:hover,
  ul.nav.sub li:hover {
    padding: 0 0.5em;
  }
}

@media screen and (max-width: 360px) {
  ul.nav.sub li {
    display: block;
  }
  .box2,
  .box3 {
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 320px) {
  ul.nav li {
    margin: 0;
    padding: 0 0.3em;
  }
  ul.nav li:hover,
  ul.nav.sub li:hover {
    padding: 0 0.3em;
  }
}

#adsense {
  text-align: center;
  display: block;
}

#adsense .adsbygoogle {
  margin-left: auto;
  margin-right: auto;
}

/*---------------------------------------------------------------------

	Cookie Control and Footer

*/

.copyright {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 60px;
}

.copyright a {
  text-decoration: underline !important;
  background: none !important;
}

.ccc-notify-buttons {
  padding-left: 20px;
}