@charset "utf-8";
/* ============ resset ============ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0; background: transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* ============ groups ============ */
.icon, 
.top_line ul li.last {
    background-image: url(../images/sprite.png);
    display: inline-block;
}
.onetwo, .onethree, .onefour, .onefive, .onesix, .twothree, .button,
.top_logo,
.top_logo strong,
.top_line ul,
.top_line ul li,
.top_line ul li a,
.slideout_menu_toggle,
.contact_row .contact_email,
.hello_text,
.hello_wrap,
.latest a,
.contact_row span,
.footer_block {
	display: inline-block;
	vertical-align: top;
}
a,
.fixed_menu,
.forms input,
.forms select,
.forms textarea,
.responsive .responsive_block {
    -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -ms-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
}
.navigation, .top_logo, .top_logo .icon, .top_line ul, .top_line ul li, .top_line ul li a,
.gallery_item_text_pretitle, .gallery_item_text_title, .gallery_item_wrap img,
.contact_row .contact_email::after,
.footer_menu ul li a::after,
.top_line ul li::after {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.button {
	color: #2046f2;
	border: 2px solid #2046f2;
	padding: 20px 35px;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	margin-top: 20px;
	font-size: 1em;
    letter-spacing: .1em;
    background: none;
    -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -ms-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
}
.button:hover {
    color: #fff;
    background: #2046f2;
}
.wh {background-color: #fff;}
.gr {background-color: #f5f5f5;}
.trans {background-color: transparent; color: #fff; border-color: #fff;}
.button.trans:hover {background: #fff; color: #2046f2;}

/* ============ globals ============ */
html {

}
body {
    line-height: 1;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: .875em;
}
h1 {
    font-size: 3em;
    line-height: 1.2em;
    text-align: left;
    letter-spacing: .01em;
    font-family: 'Playfair Display', Times New Roman, serif;
}
h2 {
    font-size: 1.6em;
    font-weight: 900;
    line-height: 1.4em;
    text-align: center;
    letter-spacing: .02em;
    font-family: 'Playfair Display', Times New Roman, serif;
}
h3 {
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .05em;
}
h4 {
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .05em;
}
h5 {
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
}
h6 {
    font-size: 1.15em;
    font-weight: 700;
    color: #282528;
}
.subtitle {
	max-width: 444px;
	color: #000;
	font-style: italic;
	font-weight: 100;
	line-height: 2em;
	letter-spacing: .03em;
	font-size: 1.1em;
	text-align: center;
	margin: 0 auto;
}
a {
    color: #333;
    text-decoration: none;
}
p {
/*  -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;           */
    line-height: 1.4em;
}
.wrap {
    margin: 0 auto;
    padding: 0 2.5%;
    width: 95%;
    max-width: 1180px;
    position: relative;
}
.clear {
	clear: both;
}
.line {
	width: 77px;
	height: 4px;
	background: #2046f2;
	margin: 30px auto;
}
.wide_line {
	width: 100%;
	height: 4px;
	background: #2046f2;
	margin: 30px auto;
}
.pipa {
	font-size: 1em;
	text-transform: lowercase;
	font-weight: 300;
	font-style: italic;
	color: #aaa;
	margin: 30px 0 20px;
	display: block;
	width: auto;
	position: relative;
}
.pipa::after,
.pipa::before {
	display: inline-block;
	content: '';
	width: 30px;
	height: 1px;
	background: #ccc;
	top: -3px;
	left: 10px;
	position: relative;
}
.pipa::before {
	left: auto;
	right: 10px;
}
.filler {
	background-color: rgba(0, 0, 0, .7);
}

/* ============ forms style ============ */
.forms input,
.forms select,
.forms textarea {
    border: 1px solid #aaa;
    border-width: 0 0 1px;
    border-radius: 0;
    background: none;
    padding: 11px 0;
    font-size: 1em;
    width: 100%;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 100;
    color: #000;
    margin: 0;
}
.forms input:hover,
.forms select:hover,
.forms textarea:hover {
    border-bottom-color: #000;
}
.forms input:focus,
.forms select:focus,
.forms textarea:focus {
    border-bottom-color: #2046f2;
}
.forms label {
    font-size: .8em;
    text-transform: uppercase;
    display: block;
    margin: 10px 0 5px;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #333;
    text-align: left;
    letter-spacing: .02em;
    position: relative;
    font-weight: 700;
}
.forms .error {
	font-size: .8em;
	color: #ff0000;
	text-transform: none;
	font-weight: 700;
}
.form_error {
	font-size: 1em;
	color: #ff0000;
	text-transform: none;
	font-weight: 700;
	display: none;
}
.forms input::-webkit-input-placeholder {color: #ddd; font-weight: 100; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: .85em;}
.forms input:-moz-placeholder {color: #ddd; font-weight: 100; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: .85em;}
.forms textarea::-webkit-input-placeholder {color: #ddd; font-weight: 100; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: .85em;}
.forms textarea:-moz-placeholder {color: #ddd; font-weight: 100; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: .85em;}

/* ============ grid ============ */
.block {
    background: #fff;
    padding: 60px 0;
    text-align: center;
    position: relative;
    z-index: 10;
}
.block.wh {background: #fff;}
.block.gr {background: #f5f5f5;}
.onetwo {width: 100%;}
.onethree {width: 100%; padding-bottom: 30px;}
.onefour {width: 100%;}
.onefive {width: 100%;}
.onesix {width: 100%;}
.twothree {width: 100%;}

/* ============ mobile navigation ============ */
.slideout_menu {
	position: fixed;
	top: 0;
	left: -280px;
	width: 250px;
	height: 100%;
	background: #2046f2;
	z-index: 999;
	box-shadow: 0 0 0;
}
.slideout_menu.open {box-shadow: 3px 0 25px #000;}
.slideout_menu .top_logo {
    color: #fff;
    font-size: 14px;
    width: 90%;
    padding-top: 27px;
}
.slideout_menu .top_logo .icon {
    background-position: -55px 0; 
    width: 45px; 
    height: 45px;
    margin: -15px 5px 0 15px;
}
.slideout_menu .slideout_menu_toggle {
	position: absolute;
	top: 12px;
	right: 10px;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	color: #fff;
	font-size: 2.8em;
	text-decoration: none;
	vertical-align: top;
}
.slideout_menu ul {
    margin-top: 20px;
}
.slideout_menu ul li {

}
.slideout_menu ul li a {
	position: relative;
	display: block;
	padding: 15px;
	color: #fff;
	font-size: 1.5em;
	font-weight: 700;
}
.slideout_menu ul li a:hover {
	background: #000;
	color: #fff;
}

/* ============ header ============ */
.navigation {
    /*background: #e9edf2 url(../images/bg/main_header.jpg) repeat-x center -80px fixed;*/
    padding: 30px 0 0;
    position: fixed;
    width: 100%;
    z-index: 777;
}
.top_logo {
	text-transform: uppercase;
	font-size: 0;
	letter-spacing: .07em;
	color: #000;
	font-weight: 900;
	width: 60%;
}
.top_logo .icon {
    height: 55px;
    width: 55px;
    background-position: 0 0;
}
.top_line {text-align: center;}
.top_line .slideout_menu_toggle {
	font-size: 2em;
	width: 14%;
	text-align: left;
	margin: 13px 0 0;
	color: #000;
	height: 40px;
}
.top_line ul {
    margin-top: 8px;
    width: 14%;
    text-align: right;
}
.top_line ul li {
	display: none;
}
.top_line ul li.last {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-position: -100px 0;
}
.top_line ul li a {
    font-size: 0;
    font-weight: 900;
    letter-spacing: .05em;
    color: #000;
    display: block;
    height: 100%;
    text-align: left;
}
.top_line ul li.active a {
	color: #2046f2;
}
.fixed {
	background-color: rgba(0, 0, 0, .777);
    padding: 10px 0 0;
}
.fixed .top_logo {color: #fff;}
.fixed .top_logo .icon {background-position: -55px 0; width: 45px; height: 45px; margin-bottom: 5px;}
.fixed .top_line ul {margin-top: 16px;}
.fixed .top_line ul li a {color: #fff;}
.fixed .top_line ul li.last {background-position: -140px 0;}
.fixed .top_line .slideout_menu_toggle {color: #fff; margin-top: 9px;}

/* ============ Parallax magic ============ */
.scene {
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    background: #e9edf2 url(../images/bg/main_header_bg.jpg) repeat-x center top fixed;
}
.scene h1 {
    font-size: 4.7em;
    text-align: left;
    z-index: 99;
    padding: 150px 0 0;
    margin: 0;
}
.scene .subtitle {
    font-style: normal;
    font-size: 1em;
    letter-spacing: .04em;
    font-weight: 400;
    text-align: left;
    max-width: 100%;
    text-transform: none;
    line-height: 1.4em;
    color: #fff;
    background: #000;
    display: inline-block;
    padding: 3px 8px;
    margin: 0 0 100px;
}
/*
.fill {
    position: absolute;
    bottom: 5%;
    right: 5%;
    left: 5%;
    top: 5%;
}
.aspect {
    opacity: 0.2;
}
*/
.layer {
    width: 88%;
    margin: 4% 0 4% 8%;
    position: relative;
    z-index: 9;
}
.layer img {
	width: 100%;
	max-width: 850px;
	display: block;
	margin: 0 auto;
}

/* ============ Projects gallery ============ */
.gallery {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 60px;
}
.gallery_row {
    display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    margin-top: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top: 4px solid #fff;
	-ms-flex: 0 1 auto;
	-webkit-flex: 0 1 auto;
	flex: 0 1 auto;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.gallery_col {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
    border-right: 2px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	display: block;
	-ms-flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
	flex: 0 1 auto;
}
.gallery_col + .gallery_col {border-left: 2px solid #fff; border-right: 0;}
.gallery_col:nth-child(2n+2) .gallery_item:last-child,
.gallery_row:nth-child(2n+2) .gallery_col:nth-child(2n+2) .gallery_item:last-child {
    border: 0;
}
.gallery_item {
	-webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    float: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gallery_col .gallery_item:first-child {border-bottom: 4px solid #fff;}
.gallery_col:nth-child(2n+2) .gallery_item + .gallery_item {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
    border-left: 2px solid #fff;
}
.gallery_row:nth-child(2n+2) .gallery_col:nth-child(2n+1) .gallery_item {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}
.gallery_row:nth-child(2n+2) .gallery_col:nth-child(2n+1) .gallery_item + .gallery_item {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 50%;
    border: 0;
}
.gallery_row:nth-child(2n+2) .gallery_col .gallery_item {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}
.gallery_col:nth-child(2n+2) .gallery_item:last-child,
.gallery_row:nth-child(2n+2) .gallery_col:nth-child(2n+1) .gallery_item:last-child {border-right: 2px solid #fff; border-left: 0;}
.gallery_item_wrap {
	overflow: hidden;
    display: block;
    height: 100%;
    background: #fff;
    position: relative;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
.gallery_item_wrap img {
    min-height: 1px;
    height: auto;
    object-fit: cover;
    min-width: 100%;
    width: 100%;
    will-change: opacity;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
    vertical-align: middle;
}
.gallery_item_wrap:hover {background: #2046f2;}
.gallery_item_wrap:hover img {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: .1;
}
.gallery_item_text {
    text-align: center;
    position: absolute;
    top: 32%;
    color: #fff;
    width: 100%;
}
.gallery_item_wrap:hover .gallery_item_text {
    z-index: 99;
}
.gallery_item_text .line {background: #fff; margin-bottom: 15px;}
.gallery_item_text_pretitle {
    font-size: 1.2em;
    font-weight: 700;
    margin: -40% 0 3.3% 0;
}
.gallery_item_text_title {
    font-size: 4em;
    font-weight: 300;
    margin: 150% 0 3.3%;
    font-family: 'Playfair Display', Times New Roman, serif;
}
.gallery_item_wrap:hover .gallery_item_text_pretitle {
    margin-top: 0;
}
.gallery_item_wrap:hover .gallery_item_text_title {
    margin-top: 0;
}

/* ============ services ============ */
.services .onefour .line {
    width: 50px;
    background: #ccc;
    height: 1px;
}
.services .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
}
.services .icon.design {
    background-position: 0 -55px;
}
.services .icon.code {
    background-position: -50px -55px;
}
.services .icon.print {
    background-position: -100px -55px;
}
.services .icon.manage {
    background-position: -150px -55px;
}
.services p {
    font-weight: 300;
    line-height: 1.7em;
    max-width: 250px;
    margin: 0 auto;
    color: #666;
}

/* ============ responsive ============ */
.responsive {
    background: url(../images/phone.jpg) no-repeat center top #fff fixed;
    padding-bottom: 0;
}
.responsive h3 {
	display: inline-block;
	font-size: 2em;
	color: #333;
	font-weight: 700;
	margin-bottom: 20px;
}
.responsive h3 span {
	background: #fff;
    line-height: 1.3em;
}
.responsive .subtitle {
    background: #fff;
}
.responsive .text {
    text-align: left;
}
.responsive .responsive_block {
    display: block;
    margin: 20px 0 30px;
    padding: 20px;
}
.responsive .responsive_block {
    background-color: #f5f5f5;
}
.responsive .responsive_block .icon {
    height: 33px;
    width: 33px;
}
.responsive .responsive_block .icon.custom {background-position: -132px -105px;}
.responsive .responsive_block .icon.load {background-position: -99px -105px;}
.responsive .responsive_block .icon.context {background-position: 0px -105px;}
.responsive .responsive_block .icon.client {background-position: -66px -105px;}
.responsive .responsive_block .icon.plane {background-position: -165px -105px;}
.responsive .responsive_block .icon.goal {background-position: -33px -105px;}
.responsive .responsive_block .description {
    display: inline-block;
    padding-left: 5%;
    vertical-align: top;
    width: 78%;
}
.responsive .responsive_block .description h6 {
    margin-bottom: 7px;
}
.responsive .responsive_block:hover .description h6 {
    color: #000;
}
.responsive .responsive_block .description p {
    font-size: .9em;
    line-height: 1.9em;
    font-weight: 300;
}

/* ============ hello block ============ */
.hello {
	padding-top: 100px;
}
.hello .wrap {
}
.hello h2 {
    text-align: left;
    font-size: 3em;
    margin-bottom: 20px;
}
.hello .hello_text {
	width: 100%;
	margin: 10% 0;
	text-align: left;
	position: relative;
	z-index: 9;
}
.hello_me {
	position: absolute;
	border: 1px solid #aaa;
}
.hello .hello_text p {
	margin-bottom: 20px;
	font-weight: 300;
	line-height: 1.85em;
	font-size: 1.11em;
	letter-spacing: .04em;
}
.hello .hello_text p strong {
	display: block;
	font-weight: 700;
	margin: 10px 0;
}
.hello_wrap {
	border: 4px solid #2046f2;
	width: 66%;
	margin: 20% 15% 0 0;
}
.hello_wrap img {
	position: relative;
	right: -77px;
	top: -77px;
	display: block;
	width: 100%;
}

/* ============ i love design ============ */
.ilovedesign {
	background: #2046f2; 
	color: #fff;
}
.ilovedesign h2 {
	font-size: 2em;
	margin-bottom: 30px;
}

/* ============ Works block ============ */
.works {
	padding-top: 130px;
}

/* ============ Thanks page ============ */
.thanks {padding: 200px 0 150px;}
.thanks h1 {text-align: center; font-size: 3em; letter-spacing: .04em;}

/* ============ feedback block ============ */
.contact {padding-top: 150px;}
.contact .subtitle {margin-bottom: 50px;}
.contact_me.onetwo {padding-top: 30px;}
.contact_row {margin-top: 40px;}
.contact_row {
	font-weight: 300;
	font-size: 1.6em;
}
.contact_row .contact_email {
    position: relative;
}
.contact_row .contact_email::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 0;
    width: 0;
    height: 1px;
    background: #2046f2;
}
.contact_row .contact_email:hover {
    color: #2046f2;
}
.contact_row .contact_email:hover::after {
    width: 100%;
}
.contact p {
    font-size: 1.1em;
    line-height: 1.8em;
    font-weight: 300;
    margin-bottom: 60px;
}

/* ============ portfolio page list ============ */
.portfolio_item_title {
	padding: 150px 0 30px;
}
.portfolio_item_title .subtitle {max-width: 666px; margin-bottom: 30px;}
.portfolio_item_title h1 {
	font-size: 3em;
    font-weight: 900;
    line-height: 1.4em;
    text-align: center;
    letter-spacing: .02em;
}
.portfolio_item.website {
	background: url(../images/imac.jpg) no-repeat center top;
	width: 1100px;
	height: 836px;
	padding-top: 45px;
	margin: 0 auto;
}
.portfolio_item.website .portfolio_item_wrap {
	width: 1011px;
	height: 571px;
	overflow: hidden;
	margin: 0 45px;
}
.portfolio_item.website .portfolio_item_wrap img {
	display: block;
	width: 1125px;
	margin: -101px 0 0 -60px;
}
.portfolio_item.social.banner {padding-bottom: 60px;}
.portfolio_item.tees img,
.portfolio_item.social.banner img {
	width: 80%;
	margin: 0 auto;
	display: block;
	max-width: 777px;
	border: 0px solid #ccc;
	box-shadow: 0;
}
.portfolio_item_more {
	
}
.portfolio_item_more .wide_line {margin: 90px 0;}
.portfolio_item_more .onetwo img {width: 87%;} 
.portfolio_item_more img {width: 80%;} 
.portfolio_item_details {
	text-align: left;
	padding-top: 10%;
}
.portfolio_item_details_row {
	margin-bottom: 25px;
	padding-left: 10%;
}
.portfolio_item_details_row strong {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 1.6em;
	margin-bottom: 10px;
}
.portfolio_item_details_row em {
	font-style: italic;
	letter-spacing: .02em;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.4em;
}
.portfolio_item_fixed {
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-bottom: 0;
	background-position: center -50px;
}
.portfolio_item_fixed .filler {
	padding: 250px 0;
	background-color: rgba(0, 0, 0, .8);
}
.portfolio_item_fixed .filler h2 {
	color: #fff;
	font-size: 7.7em;
}














































/* ============ phone block ============ */
.phone.block {
    background: #2046f2 url(../images/bg/phone.jpg) no-repeat center 100px;
}
.phone_text {
    width: 383px;
    padding: 40px 0 0;
    background: #fff;
    box-shadow: 0 0 10px #666;
    float: right;
    margin: 40px 30px 40px 0;
}
.phone_text .icon {
    width: 60px;
    height: 60px;
    margin-right: 30px;
}
.phone_text .icon.one {
    background-position: -229px 0;
}
.phone_text .icon.two {
    background-position: -289px 0;
}
.phone_text .icon.three {
    background-position: -349px 0;
}
.phone_text_row {
    margin-bottom: 30px;
    padding: 0 30px;
}
.phone_text_content {
    width: 228px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}
.phone_text_content h5 {
    margin-bottom: 10px;
    line-height: 1.3em;
}
.phone_text_content p {
    font-weight: 300;
    line-height: 1.7em;
    color: #666;
}
.phone_text .button {
    background: #333;
    border: 0;
    color: #fff;
    width: 313px;
    margin-top: 0;
}

/* ============ products block ============ */
.products {
	background: #f5f5f5;
}
.products .onethree {
	text-align: left;
}
.products h5 {
	margin-bottom: 20px;
}
.products p {
	font-weight: 300;
	color: #111;
	line-height: 1.7em;
}
.products .icon {
	height: 35px;
	width: 35px;
	margin: 0 10px -11px 0;
}
.products .icon.ecommerce {
	background-position: -100px -60px;
}
.products .icon.corp {
	background-position: -135px -60px;
}
.products .icon.personal {
	background-position: -170px -60px;
}

/* ============ device block ============ */
.device {
	background: #f5f5f5 url(../images/bg/pixel_bg.png) repeat-y center top;
	text-align: left;
	position: relative;
	z-index: 11;
}
.device h2 {
	color: #fff;
	text-align: left;
	margin-bottom: 30px;
}
.device p {
	color: #fff;
	font-weight: 300;
	line-height: 1.9em;
	font-size: 1.1em;
}
.device .button {
	margin-top: 50px;
}
.device .ipad {
	height: 740px;
	width: 60%;
	background: url(../images/bg/ipad.png) no-repeat left top;
	position: absolute;
	right: 0;
	top: 300px;
	z-index: 10;
	display: none;	
}

/* ============ inside block ============ */
.inside {
	background: #f5f5f5;
}
.inside .onethree {
	text-align: left;
	margin-top: 50px;
}
.inside .icon {
	height: 60px;
	width: 60px;
	float: left;
	margin-right: 20px;
}
.inside .icon.dash {
	background-position: 0px -95px;
}
.inside .icon.chat {
	background-position: -60px -95px;
}
.inside .icon.cellphone {
	background-position: -120px -95px;
}
.inside .icon.ajus {
	background-position: -180px -95px;
}
.inside .icon.cart {
	background-position: -240px -95px;
}
.inside .icon.stat {
	background-position: -300px -95px;
}
.inside_text {
	overflow: hidden;
}
.inside_text h5 {
	margin-bottom: 10px;
}
.inside_text p {
	font-weight: 300;
	line-height: 1.8em;
	color: #333;
}

/* ============ reviews block ============ */
.reviews {
    background: #f5f5f5;
    overflow: hidden;
    padding: 0;
}
.reviews .wrap {
    display: inline-block;
    text-align: center;
}
.review {
    background: #fff;
    padding: 40px 20px;
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
}
.review_text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3em;
    font-size: 1.5em;
    font-weight: 100;
}
.review_sign {
    font-weight: 700;
    font-size: .4em;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: .05em;
    margin-top: 30px;
}
.review_sign em {
    font-weight: 300;
    font-style: italic;
    font-size: .7em;
    border-bottom: 1px solid #666;
}
.review .icon {
    height: 17px;
    width: 23px;
    position: absolute;
}
.review .quot_one {
    background-position: -411px 0;
    top: 20px;
    left: 20px;
}
.review .quot_two {
    background-position: -411px -18px;
    bottom: 20px;
    right: 20px;
}

/* ============ portfolio page ============ */
.portfolio_page {

}
.top_portfolio {
	color: #fff;
	text-align: center;
}
.top_portfolio strong {
	display: block;
	font-size: 3em;
	line-height: 1.3em;
	font-weight: 100;
	letter-spacing: .4em;
	text-transform: uppercase;
	padding: 20px 0 60px;
}
.top_portfolio em {
	display: block;
	font-size: 1.2em;
	padding-bottom: 80px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: .03em;
}
.portfolio_block {
	padding-bottom: 50px;
}
.portfolio_block:last-child {
	padding-bottom: 0px;
}
.portfolio_block.double .portfolio_image_block {
	width: 45%;
}
.portfolio_block.double .portfolio_image_block:nth-child(1) {
	margin-right: 6%;
}
.portfolio_image_block {
	width: 63%;
}
.portfolio_image_block img {
	width: 100%;
	display: block;
}
.portfolio_block.one .portfolio_text_block,
.portfolio_block.two .portfolio_image_block  {
	margin-left: 3%;
}
.portfolio_block.two .portfolio_text_block,
.portfolio_block.one .portfolio_image_block  {
	margin-right: 3%;
}
.portfolio_text_block {
	width: 30%;
	text-align: left;
}
.portfolio_text_block h4 {
	font-weight: 700;
	font-size: 2em;
}
.portfolio_text_block .line {
	width: 50px;
	background: #000;
	margin: 10px 0;
}
.portfolio_text_block p {
	margin-bottom: 30px;
	font-weight: 300;
	line-height: 1.8em;
}
.portfolio_text_block p b {
	font-weight: 400;
	color: #2046f2;
}
.portfolio_text_block_url {
	font-weight: 400;
	font-style: italic;
	font-size: .3em;
	display: inline-block;
	color: #fff;
	text-transform: none;
	border-bottom: 1px solid #666;
	margin: 15px 0;
}
.portfolio_block.some_text {
	margin: 30px auto 60px;
	padding: 30px 0;
	border: 1px solid #ccc;
	border-width: 1px 0;
	max-width: 555px;
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: 100;
}


h1.portfolio_page_name {
	padding: 60px 0;
	color: #fff;
	font-size: 4em;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
    margin: 0;
	background: rgba(0, 0, 0, 0.77);
	position: relative;
}
h1 .portfolio_page_name_tags {
    font-size: .25em;
    font-weight: 400;
    max-width: 666px;
    line-height: 1.6em;
    margin: 30px auto 0;
}
h1 .portfolio_page_name_tags b {
    color: #2046f2;
    font-weight: 600;
}
.portfolio_page_block {
	margin-bottom: 60px;
}
.portfolio_page_block_text {
	width: 100%;
	padding-top: 30px;
	border-top: 1px solid #ccc;
	text-align: left;
}
.portfolio_page_block_text em,
.portfolio_page_block_text span {
	display: block;
	margin-bottom: 20px;
}
.portfolio_page_block_text h4 {
	line-height: 1.6em;
	margin-bottom: 20px;
}
.portfolio_page_block_text strong {
	color: #aaa;
	font-style: italic;
	font-weight: 100;
	border-bottom: 1px solid #ddd;
	margin-bottom: 15px;
	display: inline-block;
}
.portfolio_page_block_text em {
	font-weight: 100;
}
.portfolio_page_block_text span {
	margin-bottom: 0;
	font-weight: 400;
	color: #000;
	font-size: 1em;
	letter-spacing: .05em;
	line-height: 1.7em;
}
.portfolio_page_block_text span b {
	font-weight: 600;
	color: #2046f2;
}
.portfolio_page_block_text span b:first-child {
	margin-left: 0;
}
.portfolio_page_block_image {
	width: 100%;
	padding-top: 40px;
}
.portfolio_page_block_image img {
	display: block;
	width: 100%;
}



/* ============ blog ============ */
h2.blog_title {
    font-size: 3em;
    font-weight: 100;
    line-height: 1.2em;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 30px 0 0;
    position: fixed;
    z-index: 2;
}
.blog_entry section {
	width: 64.5%;
	text-align: left;
	padding-left: 5%;
	border-left: 1px solid #eee;
}
.blog_entry section p {
	margin-top: 30px;
	font-weight: 300;
	line-height: 1.7em;
}
.blog_entry aside {
	width: 25%;
	margin-right: 5%;
}
.blog_entry h1 {
	text-align: left;
	position: static;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 2.5em;
	margin: 0 0 30px;
}
.blog_entry section .syntaxhighlighter {
	padding: 20px 0;
	background: #fafafa !important;
}
.blog_entry section .syntaxhighlighter .line.alt2,
.blog_entry section .syntaxhighlighter .line.alt1 {
	background: #fafafa !important;
}

/* ============ footer block ============ */
footer {
    background: #f5f5f5 url(../images/bg/footer_bg.jpg) repeat-x center 220px fixed;
    padding-bottom: 129px;
    position: relative;
    z-index: 10;
}
footer h2 {
    font-weight: 900;
    font-size: 2.5em;
    padding-top: 60px;
    letter-spacing: .05em;
}
.clouds {
    background: url(../images/bg/clouds.png) no-repeat center top;
    height: 160px;
    width: 100%;
    margin-top: -160px;
    position: relative;
    z-index: 10;
}
footer .wrap {
    background: #222;
    margin: 33px auto 0;
    padding: 4% 3% 2.5%;
    width: 92%;
    max-width: 1000px;
}
.footer_block {
    width: 49%;
    margin-bottom: 30px;
}
.footer_logo {
    height: 45px;
    width: 45px;
    background-position: -55px 0;
}
.footer_menu h5 {
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.footer_menu ul li {
    margin-bottom: 20px;
}
.footer_menu ul li a {
    color: #ccc;
    font-weight: 400;
    font-size: .9em;
    letter-spacing: .04em;
    border-bottom: 1px solid #444;
    position: relative;
}
.footer_menu ul li a:hover {
    color: #fff;
    border-bottom-color: #aaa;
}
.footer_menu ul li a::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    width: 0;
    height: 1px;
    background: #2046f2;
}
.footer_menu ul li a:hover::after {
    width: 100%;
}
.footer_block.footer_contacts {
    margin-right: 0;
    text-align: center;
    width: 100%;
}
.footer_contacts .old_logo {
    padding-top: 20px;
}
.footer_contacts .old_logo span {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 1.4em;
    text-transform: uppercase;
}
.footer_contacts .old_logo span b {
    color: #2046f2;
    font-weight: 300;
}
.footer_contact_row,
.footer_contact_row a {
    color: #ccc;
    font-weight: 300;
    letter-spacing: .05em;
    margin-bottom: 20px;
}
.footer_contact_row a {
    border-bottom: 1px solid #333;
    margin-bottom: 0;
}
.footer_contact_row a:hover {
    border-bottom-color: #aaa;
    color: #fff;
}
.footer_contact_row b {
    color: #2046f2;
    font-weight: 400;
}

/* ============ debug styles ============ */
/*
body div:empty, body span:empty,body li:empty,body p:empty,body td:empty,body th:empty {padding: 20px; border: 5px dotted yellow !important;}
body *[alt=""], body *[title=""], body *[class=""], body *[id=""], body a[href=""] {border: 5px solid yellow !important;}
body applet, body basefont, body center, body dir, body font, body isindex, body menu, body s, body strike, body u {border: 5px dotted red !important;}
body *[background], body *[bgcolor], body *[clear], body *[color], body *[compact], body *[noshade], body *[nowrap], body *[size], body *[start],body *[bottommargin], body *[leftmargin], body *[rightmargin], body *[topmargin], body *[marginheight], body *[marginwidth], body *[alink], body *[link], body *[text], body *[vlink],body *[align], body *[valign],body *[hspace], body *[vspace],body *[height], body *[width],body ul[type], body ol[type], body li[type] {border: 5px solid red !important;}
body input[type="button"], body big, body tt {border: 5px dotted #33FF00 !important;}
body *[border], body table[cellpadding], body table[cellspacing] {border: 5px solid #33FF00 !important;}
*/