/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light'), local('Raleway-Light'),
       url('../fonts/raleway-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('../fonts/raleway-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Raleway Medium'), local('Raleway-Medium'),
       url('../fonts/raleway-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
       url('../fonts/raleway-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('../fonts/raleway-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	font:100% 'Open Sans', sans-serif;
	position:relative;
	color:#555;
}
body.pushed {
	overflow:hidden;
}
#header {
	text-align:center;
	position:relative;
	overflow:hidden;
	z-index:1;
}
#header .container,
#header .images {
	background:rgba(22,22,22,0.7);
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;
}
#header .images {
	background:none;
	z-index:0;
	line-height:100%;
}
#header .images img {
	vertical-align:middle;
	position:absolute;
	left:50%;
	top:50%;
	opacity:0;
}
#header .images .active {
	opacity:1;
}
#header .social {
	position:absolute;
	width:50%;
	left:25%;
	opacity:0;
	bottom:-200px;
	margin-bottom:-165px;
	text-align:center;
	padding:20px;
}
.social li {
	display:inline-block;
	margin:0 2px;
}
.social li a {
	color: #fff;
    height: 40px;
    line-height: 40px;
    position: relative;
    text-decoration: none;
    width: 40px;
	font-size:1.5rem;
	opacity:0.4;
}
.social li a:before {
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:40px;
	border-radius:100%;
	/*border:1px solid #FFF;*/
}
.social li a:hover {
	opacity:1;
}
#nav {
	position:fixed;
	top:50px;
	left:50px;
	width:50px;
	height:50px;
	background:#c41718;
	z-index:99;
	cursor:pointer;
}
#nav:after,
#nav:before {
	content:"";
	position:absolute;
	top:18px;
	left:10px;
	right:10px;
	border-top:2px solid #FFF;
	height:5px;
	border-bottom:2px solid #FFF;
}
#nav:before {
	top:32px;
	border-bottom:0;
}
#nav li {
	opacity:0;
	height:0;
	width:200px;
	/*overflow:hidden;*/
	list-style:none;
}
#nav li:first-child {
	margin-top:100px;
}
#nav li a {
	display:block;
	color:#222;
	font-size:1.5rem;
	text-decoration:none;
}
#nav li.active a {
	font-weight:bold;
}
#logo {
	width:196px;
	height:190px;
	border-radius:4px;
	/*background:rgba(255,255,255,1);*/
	display:block;
	opacity:0;
	position:absolute;
	left:50%;
	margin-left:-95px;
}
#header h1,
#header h2 {
	font-family: 'Raleway', sans-serif;
	font-size:5rem;
	font-weight:900;
	color:#FFF;
	text-transform:uppercase;
	position:absolute;
	width:100%;
	opacity:0;
	bottom:-200px;
	margin-bottom:-145px;
}
#header h2 {
	font-size:3rem;
}
#profile {
	width:400px;
	height:400px;
	overflow:hidden;
	border-radius:100%;
	margin:100px auto 0;
	border:8px solid rgba(222,222,222,0.8);
}
#profile img {
	width:100%;
}
section {
	position:relative;
	z-index:2;
	clear:both;
}
section .container {
	width:670px;
	margin:auto;
	clear:both;
}
section .container.background {
	padding:100px 0;
}
section .centered {
	text-align:center;
}
section h2,
section h3,
section h4,
section h5,
section h6 {
	margin:100px 0 70px;
	font-size:3rem;
	text-transform:uppercase;
	font-family: 'Raleway', sans-serif;
	text-align:center;
	position:relative;
	color:#111;
}
section h2:after,
section h3:after,
section h4:after,
section h5:after,
section h6:after {
	width:250px;
	content:"";
	height:1px;
	background:#c41718;
	position:absolute;
	bottom:-34px;
	left:50%;
	margin-left:-125px;
}
section .important {
	color:#111;
}
section p {
	margin:0 0 20px;
	line-height:1.5rem;
}
#about .container:after {
	clear:both;
	content:"";
	height:70px;
	display:block;
}
#about details {
	margin:40px 0;
	padding-bottom:60px;
	width:100%;
	float:left;
}
#about details summary {
	font-weight:bold;
	padding:0 0 20px;
	display:block;
}
#about details dt,
#about details dd {
	float:left;
	font-size:0.8rem;
	width:50%;
	line-height:30px;
	border-bottom:1px solid #EEE;
}
#about details dt {
	color:#222;
	font-weight:bold;
}
#about details dd {
	margin-left:-30px;
}
#about details dd:before {
	content:": ";
}
#about .buttons .button {
	width:29%;
	margin:0 2% 0 0;
	box-sizing:border-box;
	padding:10px 20px;
	background:#EEE;
	border-bottom:1px solid #DDD;
	border-radius:3px;
	text-decoration:none;
	color:#c41718;
}
section.grey {
	background:#EEE;
}
#milestones {
	background:url("../img/pictures/milestones.jpg") center center no-repeat;
	background-size:cover;
}
#work {
	background:url("../img/pictures/work.jpg") center center no-repeat;
	background-size:cover;
	text-align:center;
}
#slogan {
	background:url("../img/pictures/slogan.jpg") center center no-repeat;
	background-size:cover;
	text-align:center;
}
#slogan h2,
#slogan h3,
#slogan h4,
#slogan h5,
#slogan h6 {
	font-size:2.5rem;
}
.milestone {
	display:inline-block;
	width:164px;
	text-align:center;
	margin:0 0 25px;
}
.milestone i {
	background:rgba(255,255,255,0.8);
	color:#222;
	padding:20px;
	border-radius:100%;
	font-size:3rem;
}
.milestone .count {
	font-weight:bold;
	margin:15px 0 8px;
}

.step {
	/*border: 3px solid #fff;*/
    display: inline-block;
    margin: 0 8px;
    padding: 15px 0;
    text-align: center;
    width: 90px;
}
.step i {
	font-size:35px;
	margin:0 0 5px;
}
section.float {
	float:left;
	width:100%;
}
.service {
	width:335px;
	float:left;
	margin:0 0 30px;
	padding:10px;
}
.service:nth-child(2n) {
	text-align:right;
	clear:both;
}
.service .title {
	text-transform:uppercase;
	font-size:1.5rem;
	padding:0 20px 0 0;
}
.service p {
	font-size:0.8rem;
	padding:0 20px 0 0;
}
.service i {
	background:#c41718;
	color:#FFF;
	padding:10px;
	border-radius:4px;
	font-size:2.5rem;
	float:left;
	margin:40px 15px 50px;
	text-align:center;
	width:60px;
}
.service:nth-child(2n) i {
	float:right;
}

.skill {
	display:inline-block;
	width:220px;
	padding:0 10px;
	margin:0 0 30px;
	vertical-align:top;
}
.skill.small {
	width:129px;
	font-size:13px;
}
.skill .title {
	font-weight:bold;
}
.chart .circle-info-half {
	font-size:0.8rem;
	margin-top:4px;
}
.skill .chart {
	margin:0 auto;
}
.grid {
	margin-bottom:100px;
}
.grid .picture-item {
	width:333px;
	position:relative;
	overflow:hidden;
}
.grid .picture-item:hover {
	background:#F5F5F5;
	color:#000;
}
.grid .picture-item:hover .inner {
	border:0;
}
.grid .picture-item .desc,
.grid .picture-item .tags {
	margin:10px 0;
}
#about .project {
	text-align:center;
}
.grid .picture-item .tags,
.grid .picture-item .link,
#about .project .tags,
#about .project .link {
	list-style:none;
}
.grid .picture-item a,
#about .project a {
	color:#c41718;
	font-size:11px;
}
.grid .picture-item a.button,
#about .project a.button {
	color:#FFF;
	font-size:11px;
	margin:0 auto 10px;
	display:inline-block;
	background:#c41718;
	text-decoration:none;
	padding:7px;
	font-size:12px;
}
.grid .picture-item .more .desc {
	margin:0;
}
#about .project .tags {
	margin-bottom:20px;
}
.grid .picture-item .more .desc,
.grid .picture-item .more .job,
.grid .picture-item .more .company,
.grid .picture-item .more .team,
.grid .picture-item .more .agency,
.grid .picture-item .more .date,
.grid .picture-item .more .hours,
#about .project .job,
#about .project .company,
#about .project .team,
#about .project .agency,
#about .project .date,
#about .project .hours {
	font-size:11px;
	color:#555;
}

.grid .picture-item .tags li,
.project .tags li {
	display:inline-block;
	font-size:11px;
	margin-right:10px;
	color:#888;
}
.grid .headline {
	font-weight:bold;
}
.grid .picture-item img {
	max-width:100%;
	border-radius:4px;
}
.grid .picture-item .inner {
	padding:20px;
	border-bottom:1px solid #EEE;
}
.grid .picture-item:hover .inner {
	background:none;
}
.grid .picture-item img,
.clients .client img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grid .picture-item:hover img, 
.grid .picture-item:focus img,
.grid .picture-item:active img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.clients .client:hover img, 
.clients .client:focus img, 
.clients .client:active img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.grid .picture-item .info p {
	font-size:12px;
	margin-bottom:0;
	line-height:18px;
}
ul.filter  {
	text-align:center;
	margin:15px 0 30px;
}
ul.filter li {
	display:inline-block;
	margin:0 3px 6px;
}
ul.filter li a {
	background:#EEE;
	border-radius:4px;
	padding:5px 10px;
	color:#222;
	font-size:12px;
	display:block;
	text-decoration:none;
}
ul.filter li.active a,
ul.filter li a:hover {
	color:#FFF;
	background:#c41718;
}
.fader {
	position:relative;
	margin:0 0 70px;
}
.fader .dots {
	position:absolute;
	bottom:-40px;
	width:100%;
	text-align:center;
}
.fader .dots .dot {
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:10px;
	background:#999;
	margin:0 5px;
}
.fader .dots .dot:hover {
	background:#555;
	cursor:pointer;
}
.fader .fade {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	display:none;
}
.fader .fade.active {
	display:block;
}
.feedback {
	text-align:center;
}
.feedback img {
	max-width:100px;
	border-radius:100%;
}
.feedback p {
	margin:10px 0;
}
.feedback span {
	font-size:0.8rem;
	color:#999;
}
.clients {
	margin:40px 0;
}
.clients .client {
	display:inline-block;
	width:220px;
	text-align:center;
	margin:20px 0 0;
	padding:10px;
}
.clients .client img {
	border-radius:4px;
	max-width:100%;
}

.blog {
	display:inline-block;
	width:332px;
	padding:20px;
	vertical-align:top;
	background:#EEE;
	margin:0 0 5px;
}
.blog h2,
.blog h3,
.blog h4,
.blog h5,
.blog h6 {
	margin:0;
	padding:0 0 10px 0;
	font-size:1.2rem;
	text-align:left;
	text-transform:none;
	font-weight:normal;
}
.blog h2:after,
.blog h3:after,
.blog h4:after,
.blog h5:after,
.blog h6:after {
	display:none;
}
.blog h2 a,
.blog h3 a,
.blog h4 a,
.blog h5 a,
.blog h6 a {
	color:#222;
	text-decoration:none;
}
.blog .text,
.blog .author {
	font-size:0.8rem;
}
.blog .author {
	color:#999;
	font-size:0.7rem;
}
.blog .comments {
	color:#444;
	font-size:0.8rem;
	background:#DDD;
	padding:3px 10px;
	text-decoration:none;
}
.blog img {
	max-width:100%;
	max-height:190px;
	margin:0 auto 15px;
	display:block;
}

section .dark {
	background:rgba(22,22,22,0.7);
	color:#FFF;
}
section .dark h2,
section .dark h3,
section .dark h4,
section .dark h5,
section .dark h6{
	color:#FFF;
}
section .background h2,
section .background h3,
section .background h4,
section .background h5,
section .background h6{
	margin-top:0;
}
section#portfolio .info,
section#clients .info {
	text-align:center;
}
section#portfolio .inner .info {
	text-align:left;
}
section#milestones h5 {
	font-size:14px;
	margin-top:50px;
}


ul.timeline {
  position: relative;
  overflow: hidden;
  list-style: none;
  width: 670px;
  margin: 30px auto;
  padding: 0;
}
ul.timeline:after {
  content:"";
  z-index: 1;
  position: absolute;
  left: 50%;
  top:0;
  width: 4px;
  margin-left: -2px;
  min-height: 100%;
  background-color: #FFF;
}
ul.timeline li {
  z-index: 2;
  position: relative;
  width: 315px;
  padding: 20px;
  float: left;
  margin-bottom: 30px;
  background-color: #FFF;
}
ul.timeline li img{
  max-width:100%;
}
ul.timeline li.left {
  float: left;
  clear: left;
}
ul.timeline li.left:first-child {
	margin-top:40px;
}
ul.timeline li.right {
  float: right;
  clear: right;
}
ul.timeline li.highlight {
  float: none;
  clear: both;
  width: auto;
}
ul.timeline li.highlight:before {
  display:none;
}
ul.timeline li:before {
  content:"";
  z-index: 1;
  position: absolute;
  top: 14px;
  right: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  background-color: #eee;
  transform: rotate(45deg);
}
ul.timeline li.left:before {
  left: auto;
}
ul.timeline li.right + ul.timeline li.left:before,
ul.timeline li.left + ul.timeline li.right:before {
  top: 36px;
}
ul.timeline li.highlight:before {
  left: 50%;
  margin-left: -6px;
  right: auto;
  top: -6px;
}
ul.timeline li:after {
  content:"";
  z-index: 1;
  position: absolute;
  top: 14px;
  right: -27px;
  left: -27px;
  width: 8px;
  height: 8px;
  border: 3px solid #CCC;
  border-radius: 100%;
  background-color: #FFF;
  transition: .2s;
}
ul.timeline li:hover:after {
  background-color: #999;
  top: 12px;
  right: -29px;
  left: -29px;
  width: 12px;
  height: 12px;
}
ul.timeline li.left:after {
  left: auto;
}
ul.timeline li.right + ul.timeline li.left:after,
ul.timeline li.left + ul.timeline li.right:after {
  top: 36px;
}
ul.timeline li.right + ul.timeline li.left:hover:after,
ul.timeline li.left + ul.timeline li.right:hover:after {
  top: 34px;
}
ul.timeline li.right:after {
  right: auto;
}
ul.timeline li.highlight:after {
  left: 50%;
  margin-left: -7px;
  right: auto;
  top: -24px;
}
ul.timeline li.highlight:hover:after {
  margin-left: -9px;
  top: -26px;
}
ul.timeline .right {
	margin-top:20px;
}
ul.timeline .time {
	font-size:0.6rem;
	color:#999;
}
ul.timeline .title {
	font-weight:bold;
	font-size:1.4rem;
}
ul.timeline li p {
	margin-top:10px;
	color:#999;
}
ul.timeline li p.list span {
	display:block;
	margin:0 0 5px;
}
ul.timeline li p.list span:before {
	content:"-";
	padding-right:5px;
}
#contact .address,
#contact form.mail {
	display:inline-block;
	vertical-align:top;
	width:332px;
	line-height:1.5rem;
}
#contact .address .space {
	margin-top:10px;
}
#contact .address {
	width:100%;
	text-align:center;
}
#contact .address a {
	color:#222;
	text-decoration:none;
}
#contact .address a span {
	padding-left:5px;
	font-family:"Open Sans",sans-serif;
}
#contact form.mail label {
	display:inline-block;
	vertical-align:top;
	width:100px;
}
#contact form.mail .line {
	margin:0 0 10px;
}
#contact form input,
#contact form textarea {
	background:#FFF;
	border:0;
	width:150px;
	border-radius:4px;
	padding:5px 10px;
}
#contact form textarea {
	height:80px;
	width:210px;
}



.loader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#111;
	/*background: radial-gradient(#333, #111);*/
	z-index:999999;
}
@-webkit-keyframes pulse {
  0% {opacity: 1;}
  16.666% {opacity: 1;}
  100% {opacity: 0;}
}
@-moz-keyframes pulse {
  0% {
    opacity: 1;
  }
  16.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  16.666% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.triangles {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 81px;
  width: 90px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.tri {
  position: absolute;
  -webkit-animation: pulse 750ms ease-in infinite;
  -moz-animation: pulse 750ms ease-in infinite;
  animation: pulse 750ms ease-in infinite;
  border-top: 27px solid #c41718;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 0px;
}
.tri.invert {
  border-top: 0px;
  border-bottom: 27px solid #c41718;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.tri:nth-child(1) {
  left: 30px;
}
.tri:nth-child(2) {
  left: 15px;
  top: 27px;
  -webkit-animation-delay: -125ms;
  -moz-animation-delay: -125ms;
  animation-delay: -125ms;
}
.tri:nth-child(3) {
  left: 30px;
  top: 27px;
}
.tri:nth-child(4) {
  left: 45px;
  top: 27px;
  -webkit-animation-delay: -625ms;
  -moz-animation-delay: -625ms;
  animation-delay: -625ms;
}
.tri:nth-child(5) {
  top: 54px;
  -webkit-animation-delay: -250ms;
  -moz-animation-delay: -250ms;
  animation-delay: -250ms;
}
.tri:nth-child(6) {
  top: 54px;
  left: 15px;
  -webkit-animation-delay: -250ms;
  -moz-animation-delay: -250ms;
  animation-delay: -250ms;
}
.tri:nth-child(7) {
  top: 54px;
  left: 30px;
  -webkit-animation-delay: -375ms;
  -moz-animation-delay: -375ms;
  animation-delay: -375ms;
}
.tri:nth-child(8) {
  top: 54px;
  left: 45px;
  -webkit-animation-delay: -500ms;
  -moz-animation-delay: -500ms;
  animation-delay: -500ms;
}
.tri:nth-child(9) {
  top: 54px;
  left: 60px;
  -webkit-animation-delay: -500ms;
  -moz-animation-delay: -500ms;
  animation-delay: -500ms;
}
#map {
	width:100%;
	height:450px;
}


.circliful {
    position: relative; 
}

.circle-text, .circle-info, .circle-text-half, .circle-info-half {
    width: 100%;
    position: absolute;
    text-align: center;
    display: inline-block;
}

.circle-info, .circle-info-half {
	color: #999;
}

.circliful .fa {
	margin: -10px 3px 0 3px;
	position: relative;
	bottom: 4px;
}
footer {
	background:#222;
	color:#FFF;
	text-align:center;
	padding:10px 0;
	color:#999;
	font-size:0.8rem;
}

@media(max-width:700px) {
	#screens img {
		max-width:100% !important;
	}
	#header h1 {
		font-size:2rem;
		margin-bottom:-85px;
	}
	#header h2 {
		font-size:1.4rem;
		margin-bottom:-60px;
	}
	#logo {
		margin-bottom:-20px;
	}
	#nav {
		top:20px;
		left:20px;
	}
	#nav li:first-child {
		margin-top:60px;
	}
	#nav li {
		width:240px;
	}
	#nav li a {
		/*font-size:1rem;*/
	}
	#profile {
		width:250px;
		height:250px;
	}
	section .container {
		width:250px;
		margin:auto;
	}
	section h2,
	section h3,
	section h4,
	section h5,
	section h6 {
		margin:70px 0 50px;
		font-size:2rem;
	}
	section h2:after,
	section h3:after,
	section h4:after,
	section h5:after,
	section h6:after {
		bottom:-24px;
	}
	body {
		margin-bottom:300px;
	}
	ul.timeline {
		width: 250px;
	}
	ul.timeline:after,
	ul.timeline li:before,
	ul.timeline li:after {
		display:none;
	}
	ul.timeline li {
		width: 250px;
		float: none !important;
	}
	#about details {
		width:100%;
		float:none;
		clear:both;
	}
	#header .social {
		width:100%;
		left:0;
		margin-bottom:0;
		opacity:1;
		bottom:10px;
	}
	.milestone {
		width:100%;
	}
	.service p {
		padding:0;
	}
	.service {
		float:none;
		width:100%;
		margin:0;
		text-align:center;
	}
	.service:nth-child(2n) {
		text-align:center;
	}
	.service i,
	.service:nth-child(2n) i {
		float:none;
		margin:20px 0 25px;
	}
	.service .title {
		padding:0;
	}
	.service:last-child {
		margin:0 0 50px;
	}
	.skill,
	.skill.small,
	.clients .client,
	.blog {
		width:100%;
	}
	.step {
		width:74px;
	}
	ul.filter li {
		margin:0 3px 3px;
	}
	ul.filter li a {
		background:none;
		padding:0;
		color:#777;
	}
	ul.filter li.active a,
	ul.filter li a:hover {
		background:none;
		color:#222;
	}
	#slogan h2, #slogan h3, #slogan h4, #slogan h5, #slogan h6 {
		font-size:1.5rem;
	}
	#contact .address, #contact form.mail {
		width:100%;
		text-align:center;
		float:none;
	}
	#contact form.mail {
		margin:30px 0 0;
	}
	.grid .picture-item {
		margin-left:15px;
		width:232px;
		margin-bottom:30px;
	}
	.grid .picture-item .inner {
		width:232px;
		padding:5px;
	}
	#logo {
		opacity:1;
		top:30px;
	}
	#header h1,
	#header h2 {
		opacity:1;
		bottom:auto;
		top:210px;
	}
	#header h2 {
		top:250px;
	}
	#map {
		height:250px;
	}
	#about .buttons .button {
		width:100%;
		display:block;
		margin:15px 0 0;
		text-align:center;
	}
}
.inlink {
	font-size:9px;
	color:#777;
	margin:10px 0 0;
}
.inlink a {
	font-size:9px !important;
}
#screens img {
	max-width:500px;
	margin:0 auto;
	display:block;
}
#about .project {
	position:relative;
}
#about #next,
#about #previous {
	position:absolute;
	top:50%;
	color:#777;
	font-size:50px;
	text-decoration:none;
	margin-top:-55px;
}
#about #next:hover,
#about #previous:hover {
	color:#222;
}
#about #next {
	right:20px;
}
#about #previous {
	left:20px;
}