@font-face {
        font-family: "Normal";
        src: url(./PixelOperator.ttf);
}

body {
	background-color:#333;
	color:#BFBFBF;
	font-size:1.6em;
	font-family: 'Normal';
}

#footer {
	font-size:0.7em;
	line-height: 0.4em;
	margin:0 auto;
	width:800px;
}


.human {
	width:100px;
	text-align: center;
	margin-right: 10px;
	display: inline-block;
	line-height: 1em;
}
.human_name{
	width:100px;
	font-size:0.6em;
	text-align: center;
}

.people {
	display: flex;
	justify-content: center;
	margin:0 auto;
	margin-top:10px;
	align-content: center;
	margin-bottom: -30px;
}

#services {
	display: flex;
	justify-content: center;
	margin:0 auto;
	margin-top:10px;
	align-content: center;
	margin-bottom: -30px;
	width: 65vw;
}

.service{
	width:300px;
	height:150px;
	background-color: #4c4c4c;
	margin-right: 10px;
	display: inline-block;
}

#projects {
	margin:0 auto;
	width:800px;
	font-size:0.8em;
}

.project_line {
	width: 800px;
	height: 30px;
	margin-top: 10px;
	text-align: left;
	padding-top: 10px;
	background-color: #4c4c4c;
}

.project_name {
	padding-left: 10px;
	position: relative;
	float: left;
	text-align: left;
	width: 200px;
}

.project_info {
	position: relative;
	float: right;	
	padding-right: 10px;
	text-align: right;
	width: 400px;
}

.circleContainer {
	height: 100px;
	width: 100px;
	position: relative;	
}

.circleImage {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
}

.circleText {
	z-index: 100;
	position: absolute;
	color: white;
	font-size: 24px;
	font-weight: bold;
	left: 20px;
	top: 15px;
	visibility: hidden;
}

/*.circleImage:hover {
	filter: blur(5px);
}
.circleContainer:hover > .circleText {visibility: visible;}

.circleText:hover > .circleImage{
	filter: blur(5px);
}

.circleContainer:hover > .circleImage {
	filter: blur(5px);
}*/

.circleLink {
	z-index: 150;
	position: absolute;
	left: -1px;
	top: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	#backdrop-filter: blur(2px);
	#background-color: gray;
	#filter: blur(5px);
	#opacity: 0.4;
	visibility: hidden;
}


.row {
	margin:0 auto;
	margin-top: -20px;
	margin-bottom: -35px;
	width:800px;
	font-size:0.8em;
}

.column {
	width: 385px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: top;
}

.column>div {	
	background: #4c4c4c;
	border: 10px;
	border-color: #4c4c4c;
	height:135px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 5px;
    vertical-align: top;
}

.column>div>*, .column>div>*>* {
	margin: 0;
}

.lt {
	position: relative;
	float: left;
	text-align: left;
}

.rgt {
	position: relative;
	float: right;
	text-align: right;
}

.column>h4 {
	margin-bottom: -10px;
}

.main_align {
	margin: 0 auto;
	margin-top: 80px;
	width: 700px
}

.gallery{
  margin: auto;
  height:400px;
  width:740px;
  background:url('http://i0.kym-cdn.com/photos/images/original/000/980/975/b1e.jpg');
  background-size:cover;
}

.gallery > div{
	padding: 25px 50px;
}

/*------ IMAGE CAROUSEL STUFF, DO NOT TOUCH ------*/

.carousel-wrapper{
  height:400px;
  position:relative;
  width:740px;
  margin:0 auto;
}
.carousel-item{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:25px 50px;
  opacity:0;
  transition: all 0.5s ease-in-out;
}
.arrow{
  position:absolute;
  top:0;
  display:block;
  width:50px;
  height:100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;
}

.arrow-prev{
  left:0;
}
 
.arrow-next{
    right:0;
    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
  }

.light{
  color:white;
}

@media (max-width: 480px) {
      .arrow, .light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
      }
    }
}

/*Select every element*/
[id^="item"] {
    display: none;
  }

.item-1 {
    z-index: 2;
    opacity: 1;
  background:url('http://i0.kym-cdn.com/photos/images/original/000/980/975/b1e.jpg');
  background-size:cover;
  }
.item-2{
  background:url('https://www.ljplus.ru/img4/y/a/yarowrath/technocratic-party_rus.gif');
   background-size:cover;
}
.item-3{
  background:url('http://lurkmore.so/images/c/c6/Techno_fascist.jpg');
   background-size:cover;
}

*:target ~ .item-1 {
    opacity: 0;
  }

#item-1:target ~ .item-1 {
    opacity: 1;
  }

#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
  }
}

/*------ END OF GALLERY STUFF ------*/