@import 'movingboxes.css';
@import 'movingboxes-ie.css';

body{
	background:#222 url(../images/pattern.png);
	margin:0;
  font-family: "Bitter", helvetica, arial;
}

#container{
	background:#fff;
	margin:0 auto;
	max-width:860px;
}

#content{
	padding: 0.5em 1em;
}

header{
	padding: 0.5em 1em;
}
#langselect{
	width:100%;
}

#langselect ul{
	width:100%;
	list-style:none;
}
#langselect ul li{
	display:inline-block;
	width:30%;
}

ul#jobs{
	list-style:none;
}

ul#jobs li{
	display:inline-block;
	width:30%;
	margin-bottom: 0.3em;
}

ul#jobs li span{
	background: #222;
	color: white;
	display: block;
	font-size: 16px;
	font-weight: 800;
	margin: 0;
	margin-top: -5px;
	padding: 0.5em;
	text-align: center;
}
ul#jobs li a{
	border:0;
}
ul#jobs li img{
	background:#222;
	padding:0.3em;
	width:95%;
}

ul#social{
	list-style:none;
}

ul#social li{
  display: inline-block;
  background: #222 url(../images/pattern.png);
  padding: 0.3em 0.2em;
  text-align: center;
}

ul#social li a{
  color:white;
}

.mb-wrapper{
  border-color: #333;
}
.mb-controls{
  background: #222 url(../images/pattern.png);
}
/* moving boxes */

.demo-title {
  text-align: center;
  color: #a71700;
  text-transform: uppercase;
  padding: 30px 0 0;
  font-size: 60px;
}

/* Navigation bar */
.main-nav { 
  display: block; 
  text-align: center; 
  border-bottom: 2px solid #a71700;
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
}

.main-nav a { 
  text-decoration: none;
  color: #3e63ec;
  font-size: 18px;
  margin: 0 8px;
}
.main-nav a:hover {
  color: black;
  border-bottom: 2px solid black;
}

/* Moving Boxes title image wrapper */
#title { 
  text-align: center; 
}
#title img { 
  border: 0; 
}

/* Panel images */
.mb-inside img { width: 100%; }

/* height of the placeholder until image completely loads - needed for
   webkit browsers, add this only if you don't want the height animation
   on startup. 326px measures the height of the current image when enlarged 
*/
#slider-two .current img { /* height: 326px; */ }

/* Panel links */
.mb-inside a { color: #333; text-decoration: none; border-bottom: 1px dotted #ccc; }
.mb-inside a:hover { border-bottom: 1px solid #999; }

/* Add/remove panels buttons */
.buttons { padding: 5px 10px; text-align: center; }

/* Direct link styling */
.dlinks { 
  text-align: center;
  margin: 0 0 20px 0;
}
.dlinks * {
  vertical-align: middle;
}


/* overlay */

/* the overlayed element */
#workscontainer{
    position:relative;
    display:none;
    transition: all 0.3s ease-in-out;

}
#workscontainer_inner {
 
    /* must be initially hidden */
    display:none;
    position:absolute;
 
    /* styling */
    background:#222 url(../images/pattern.png);;
    min-height:270px;
    border:0px solid #333;
    padding:4.5px!important;
    bottom:0;
    left:0;
    width:99%;
 
    /* CSS3 styling for latest browsers */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#works{

    background: #222 url(../images/pattern.png);
    border-radius: 5px;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;  
    margin-top: 0;
    padding: 1em 3em;
    margin:0 !important;
}

#works span{
  display:none;
  position: absolute;
  background: rgb(167, 20, 0);
  padding: 0.2em 0.3em;
  border-radius: 3px;
  color: white;
}
#works li{
  padding:0.5em;
  background: rgb(167, 29, 0);
  border: 1px solid rgb(83, 0, 0);
  display: inline-block;
  width: 20%;
  margin: 0.5em 0.5em;
}

#works img{
  width: 100%;
}
#works li a{
  border:none;
  color:white;
  display:block;
}
#works .tooltip{
  font-size:16px;
}

.work{
  position:absolute;
  width:100%;
  bottom: -20px;
  left:0;
}
.work img{
	width:100%;
  border-top-left-radius:4px;
}
.work figure{
	width:60%;
	margin:0;
  position: relative;
  top: -10px;
}
.work .details{
	width:37%;
}

/* close button positioned on upper right corner */
.work .close {
    background-image:url(../images/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-25px;
    cursor:pointer;
    height:35px;
    width:35px;
    z-index:100;
}

/* styling for elements inside overlay */
  .details {
  position:absolute;
  top:-5px;
  right:15px;
  font-size:11px;
  color:#fff;
  }
 
  .details h3 {
  color:#aba;
  font-size:30px;
  margin:0;
  }
  .details h4{
    font-size:18px;
    margin:0;
    margin-bottom:10px;

  }
  .details span.date{
    float: right;
    font-size: 40px;
  }
  .details span{
    font-size:18px;
  }
  .details li{
    font-size:16px;
  }
  
footer{
  max-width: 800px;
  margin: 0 auto;
  padding-top: 0.5em;
  color: white;
  text-align: center;
}

header{
  width:80%;
  background: #eee;
  margin: 0 auto;

}
header h1{
  display:inline-block;
  font-size:34px;
}
header h2{
  display: inline-block;
  font-size: 24px;
  margin-left: 0.2em;
}
header .title{
  background: #222 url(../images/pattern.png);
  color: #eee;
  padding-left: 0.8em;
  margin-bottom:1em;
}
header p{
  margin-top:0.3em;
  font-size:16px;
  letter-spacing: 0.08em;
  margin-bottom:1em;

}
header picture{
  float: right;
  margin: 1em;
  background: #222 url(../images/pattern.png);
  background-position: 428px 151px;
  padding: 1em;
  width: 25%;
  margin-top: -1em;
  margin-right: -0.05em;
}
header picture img{
  width:100%;
}

#photos{
  padding: 0;
  margin: 0;
}

#photos li{
  display: inline-block;
  width: 20%;
  margin: 1em;
  padding: 0.4em;
  text-align:center;
  background: #222 url(../images/pattern.png);
}

#photos li img{
  width:100%;
}

#photos li span{
  color:white;
  margin-top:0.2em;
}

#langselect{
  background: #888;
  border-bottom: 2px solid #bbb;
  height: 25px;
  margin-bottom: 0.8em;
  color: white;
}
#langselect li a{
  color: rgb(255, 255, 255);
  border-radius: 0.2em;
  padding: 0.2em 1em;
  line-height: 25px;
}

/* Responsive Design */

@media screen and (min-width:400px){
  #message{
    width:78%;
  }

}


form label.error{
  display:none!important;
}

input.error, textarea.error{
  border-color:red;
  background: #fff url("../images/validate.png");
  background-position-x: right;
  background-repeat: no-repeat;
  background-position-y: -2em;
  background-size:35px;

}

input.valid, textarea.valid{
  border-color:green;
  background: #fff url("../images/validate.png");
  background-position-x: right;
  background-repeat: no-repeat;
  background-position-y: 0em;
  background-size:35px;
}


textarea{
  height: 120px;
  resize:none 
}
textarea.valid{
  background-position-y: 6em;
}

form ul{
  list-style:none;
}
input{
  padding-right:2em;
}