/*@media (min-width: 0) and (max-width: 1366px) {body{font-size:100%;}}*/ /*1366x768*/
/*@media (min-width: 1366px) and (max-width: 1600px) {body{font-size:120%;}}*/ /*1600x900*/
/*@media (min-width: 1600px) and (max-width: 1920px) {body{font-size:150%;}}*/ /*1920x1200*/
/*@media (min-width: 1920px) and (max-width: 2048px) {body{font-size:200%;}}*/
/*@media (min-width: 2048px) and (max-width: 3072px) {body{font-size:250%;}}*/
/*@media (min-width: 3072px) and (max-width: 4096px) {body{font-size:300%;}}*/
/*@media (min-width: 4096px) {body{font-size:400%;}}*/ /*4096x2160*/

html {
	/* font-size: 62.5%; / 1rem = 10px; / */
	/* 62.5%:10px, 68.75%:11px, 75%:12px, 81.25%:13px, 87.5%:14px */
	/*font-size: 1px;*/ /* 1rem = 1px; */
	/*font-size: 87.5%;*/
    font-size: 16px;
}
html, body {
	height: 100%;
}
body {
    /*min-width: 1024px;*/
	font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
	color: #516c7b;

    /* These are technically the same, but use both */
	overflow-wrap: break-word;
	/*word-wrap: break-all;*/
	word-wrap: break-word;

	/*-ms-word-break: break-all;*/
	/*This is the dangerous one in WebKit, as it breaks things wherever*/
	/*word-break: break-all;*/
	/*Instead use this non-standard one:*/
	/*word-break: break-word;*/
}

p {padding-bottom:15px;margin:0;}
h1,h2,h3,h4,h5,h6 {color:#2b3941;font-weight:normal;padding:0;margin:0;}

h1 {font-size:65px;font-weight:bold;color:#2b3941;}
h2 {font-family:'Roboto Condensed';font-size:32px;font-weight:bold;color:#2b3941;padding-top:20px;padding-bottom:20px;}
h3 {font-family:'Roboto Condensed';font-size:38px;font-weight:bold;color:#2b3941;text-align:center;text-transform:uppercase;padding-bottom:30px;}
h4 {font-family:'Roboto Condensed';font-size:25px;color:#2b3941;padding-bottom:5px;}
h6 {font-family:'Roboto Condensed';font-size:19px;font-weight:bold;color:#2b3941;}

a {color:#516c7b;}
a:hover {color:#29b3ec;}
a:focus, a:active, a:hover {outline:none;}

/*
a:hover {
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% { color: #0168a3; }
  12% { color: #1159a3; }
  25% { color: #224aa3; }
  37% { color: #4f6fb6; }
  50% { color: #001F3F; }
  62% { color: #432da3; }
  75% { color: #541ea3; }
  87% { color: #5c17a3; }
  100% { color: #7601a3; }
}
*/

dl, dt, dd {padding:0;margin:0;}
ul, ol, ul > li, ol > li {list-style:none;padding:0;margin:0;}

table {outline:none;}
th, td {vertical-align:top;}
s, ins {text-decoration:none;}
pre {font-family:'Roboto',sans-serif;overflow:hidden;white-space:pre-wrap;padding:0;margin:0;}

.clear:after,
.navigation .wrapper:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.wrapper {min-width:300px;max-width:950px;padding:0 20px 50px;margin:0 auto;}
.navigation {position:fixed;z-index:3;top:0;left:0;right:0;font-family:'Roboto Condensed';font-size:18px;height:72px;line-height:72px;font-weight:400;text-transform:uppercase;background-color:#2b3a42;border-bottom:solid 3px rgba(255,255,255,.8);}
.navigation .wrapper {padding-bottom:0;}
.navigation a {float:left;display:block;color:white;text-decoration:none;margin-right:30px;}
.navigation a:hover {opacity:.8;}
.navigation a.active {color:#ff530d;}
.navigation a.current {color:#ff530d;border-bottom:solid 3px #ff530d;margin-bottom:-3px;}
.navigation a.lang {float:right;margin-left:20px;margin-right:0;}
.navigation .magic-line {position:absolute;left:0;bottom:-3px;display:block;height:3px;overflow:hidden;background-color:#ff530d;margin-left:0;}
.navigation {
    -webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
section.header .wrapper {
    -webkit-transition: padding-top .2s ease-in-out;
	transition: padding-top .2s ease-in-out;
}
section.header {text-align:center;}
section.header .wrapper {min-width:320px;max-width:none;padding:140px 0 30px 0;}
section.header .logo {display:inline-block;padding-bottom:30px;}
section.header .logo img {width:220px;}
section.header .logo img {
	-webkit-animation: spin 30s linear infinite;
	animation: spin 30s linear infinite;
}
section.header .logo img:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
@-webkit-keyframes spin {100% {-webkit-transform:rotate(360deg);}}
@keyframes spin {100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
.scroll-out .navigation {opacity:.9;height:52px;line-height:52px;}
.scroll-out section.header .wrapper {padding-top:120px;}
.scroll-down .navigation {opacity:0;}
section.about {text-align:center;}
section.about .wrapper {max-width:none;}
section.about h6 {padding-bottom:90px;}
section.about p {text-align:justify;}
section.about article {max-width:950px;margin:0 auto;}
section.about article {
    -webkit-columns: 2 300px;
    -moz-columns: 2 300px;
    columns: 2 300px;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
	column-gap: 3em;
    -webkit-column-rule: 1px solid #e6ecef;
    -moz-column-rule: 1px solid #e6ecef;
	column-rule: 1px solid #e6ecef;
}
section.projects {background-color:#e6ecef;}
section.projects .wrapper {padding-top:30px;padding-bottom:0;}
section.projects .menu {overflow:hidden;margin-left:440px;}
section.projects .menu > li {display:inline-block;margin-left:15px;}
section.projects .menu > li a {display:block;color:#2b3941;font-weight:normal;text-decoration:none;border-radius:10px;padding:8px 20px;}
section.projects .menu > li a:hover {color:#29b3ec;}
section.projects .menu > li.active a {color:#2b3941;background-color:#fff;opacity:1;pointer-events:none;}
section.projects h6 {font-family:'Roboto',sans-serif;font-size:18px;color:#2b3a42;text-transform:uppercase;padding-bottom:15px;}
section.projects .project {overflow:hidden;font-family:'Roboto',sans-serif;font-size:16px;font-weight:300;line-height:1.7;color:#516c7b;white-space:normal;}
section.projects .project .text {float:left;width:calc(100% - 530px);padding-bottom:10px;}
section.projects .project .image {float:right;max-width:510px;/*background:url(/img/mac-book.png) no-repeat;*/margin-left:20px;}
section.projects .project .image img {display:block;width:100%!important;height:auto!important;/*margin-left:19px;margin-top:22px;*/}
.scrollable {overflow:hidden;margin-top:48px;margin-left:-10px;margin-right:-10px;}
.scrollable .items {font:0/0 a;text-shadow:none;color:transparent;white-space:nowrap;}
.scrollable .items {
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.scrollable .items > div {display:inline-block;vertical-align:top;width:calc(100% - 20px);padding:0 10px;}
section.stats {text-align:center;padding-top:80px;padding-bottom:60px;}
/*
section.stats {
    background-image: url(/img/bg-map.gif);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
*/
section.stats .wrapper {min-height:225px;background:url(/img/stats-bg.png) center center no-repeat;padding-bottom:0;}
section.stats h3 {font-size:100px;color:#2b3941;line-height:1;padding-top:40px;padding-bottom:20px;}
section.stats h6 {color:#516c7a;line-height:1.3;font-weight:normal;padding-bottom:0;}
section.technologies {text-align:center;overflow:hidden;}
section.technologies .wrapper {padding-bottom:20px;}
section.technologies h3 {padding-top:20px;padding-bottom:20px;}
section.technologies h4 {padding-bottom:5px;}
section.technologies h4 a {color:#2b3941;text-decoration:none;pointer-events:none;}
section.technologies h6 {padding-bottom:48px;}
section.technologies .navi {text-align:left;margin-left:20px;margin-right:20px;}
section.technologies .navi li {position:relative;padding-left:90px;padding-bottom:30px;}
section.technologies .navi li:before {position:absolute;left:0;top:0;content:'';display:block;}
section.technologies .navi li.mongo:before {width:60px;height:65px;background:url(/img/icon-sprites.png) left 0 no-repeat;margin-top:-5px;}
section.technologies .navi li.asp-mvc:before {width:61px;height:58px;background:url(/img/icon-sprites.png) left -66px no-repeat;}
section.technologies .navi li.amazon:before {width:64px;height:49px;background:url(/img/icon-sprites.png) left -125px no-repeat;}
section.technologies .navi li.html5:before {width:58px;height:64px;background:url(/img/icon-sprites.png) left -175px no-repeat;}
section.technologies .navi li.angular:before {width:60px;height:63px;background:url(/img/icon-sprites.png) left -240px no-repeat;}
section.technologies .navi li.bootstrap:before {width:61px;height:61px;background:url(/img/icon-sprites.png) left -304px no-repeat;}
section.technologies .navi li.java:before {width:62px;height:56px;background:url(/img/icon-sprites.png) left -366px no-repeat;}
section.technologies .navi li.objective-c:before {width:61px;height:61px;background:url(/img/icon-sprites.png) left -423px no-repeat;}
section.technologies .navi li.swift:before {width:61px;height:61px;background:url(/img/icon-sprites.png) left -485px no-repeat;}
/*
section.technologies .navi li h5 a:hover,
section.technologies .navi li h5 a:active {color:#29b3ec;}
*/
section.technologies .navi li:last-of-type {padding-bottom:0;}
section.technologies .text {text-align:left;padding:5%;}
section.technologies .text > li {display:none;}
section.technologies .text > li.amazon {display:block;}
/*section.technologies .flex .cell:nth-of-type(2) {background-color:#e6ecef;}*/
section.technologies .separator {display:block;}
section.technologies .flex .cell {padding-bottom:30px;}
section.articles  {background-color:#e6ecef;}
section.articles .wrapper {padding-top:30px;padding-bottom:30px;}
section.articles ul {overflow:hidden;}
section.articles ul li {float:left;width:calc(33.33% - 15px);margin-left:20px;}
section.articles ul li:first-child {margin-left:0;}
section.poster {
    min-height: 600px;
    /*background: transparent;*/
    background-size: cover;
    background-image: url(/img/vancouver-fixed.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
footer {
    background-size: cover;
    background-image: url(/img/bg-map.jpg);
    background-position: center center;
    background-repeat: no-repeat;
}
footer .wrapper {overflow:hidden;text-align:center;padding-top:50px;padding-bottom:70px;}
footer .logo img {width:175px!important;height:auto!important;}
footer .contacts {color:#2b3a42;text-align:left;}
footer .contacts li {position:relative;padding-left:60px;padding-bottom:20px;}
footer .contacts li:before {position:absolute;left:0;top:0;content:'';display:block;}
footer .contacts li.email:before {width:34px;height:22px;background:url(/img/icon-sprites.png) -64px top no-repeat;margin-top:8px;}
footer .contacts li.skype:before {width:34px;height:35px;background:url(/img/icon-sprites.png) -64px -23px no-repeat;}
footer .contacts li.phone:before {width:22px;height:36px;background:url(/img/icon-sprites.png) -64px -59px no-repeat;margin-top:2px;margin-left:6px;}
footer .info {font-size:18px;display:block;padding-top:5px;}
footer .text {font-size:16px;margin-left:5px;}
footer .map {}
footer .map img {display:block;width:100%!important;height:auto!important;box-shadow:2px 2px 5px rgba(0,0,0,.2);}
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
}
.flex .cell {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 300px;
    -ms-flex: 1 0 300px;
    flex: 1 0 300px;
    min-width: 260px;
}
.j-grid {display:block;text-align:justify;font:0/0 a;text-shadow:none;color:transparent;}
.j-grid:after {display:inline-block;content:'';width:100%;}
.j-grid .j-item {display:inline-block;font-family:'Roboto',sans-serif;font-size:16px;line-height:1.7;color:#2b3a42;font-weight:300;vertical-align:middle;}