/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #4e4e4e;
}

body { font-size: 1em; line-height: 1.4; font-family:'Open Sans', sans-serif; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
hr.lh2 { border:none; background:#4e4e4e; height:2px; margin:-15px 0 0; }
hr.lh1 { border:none; background:#4e4e4e; margin:4px 10px 0; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img { vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */

fieldset { border: 0; margin: 0; padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */

textarea { resize: vertical; }

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* main elements ------------------------------------------------------------ */
.container { width:960px; margin:10px auto; }
#footer { height:150px; }
/* end main elements -------------------------------------------------------- */

/* header elements ---------------------------------------------------------- */
#header { margin:0 10px 21px; }

.logo { padding-bottom:77px; text-align:center; }
.navigation_wrapper-m { visibility:hidden; display:none; }

.top_navigation { text-align:center; padding-bottom:10px; position:relative; background:#fff; /*border-bottom:1px solid #bdb5bb;*/ }
.f-nav .top_navigation { padding:5px 0; }

.top_navigation ul { margin:0; padding:0; list-style:none; }
.top_navigation li { display:inline-block; }
.top_navigation a { display:block; line-height:30px; height:30px; padding:0 25px; font-size:14px; font-weight:bold; font-family:'Open Sans'; color:#4e4e4e; text-decoration:none; }
.top_navigation a:hover,
.top_navigation li.active a { border-radius:3px; background-color:#ebf7fa; text-shadow:1px 1px #fff; }
.top_navigation:before,
.top_navigation:after { content:""; position:absolute; z-index:-2; }
.top_navigation:before { top:50%; bottom:0px; left:10px; right:10px; -webkit-box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; -moz-box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
.f-nav { position:fixed !important; top:0; left:0; width:100%; z-index:101; -webkit-box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; -moz-box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; box-shadow:0 7px 9px rgba(196,0,171,0.13), 0 2px 9px #ccc; }
.top_navigation.f-nav:before,
.top_navigation.f-nav:after { display:none; }
/* end header elements ------------------------------------------------------ */

/* content elements --------------------------------------------------------- */
#content { margin-top:15px; margin-bottom:90px; }
#content a.external { padding-right:13px; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) right center no-repeat; }
#content a:hover { text-decoration:underline; }
#content .mb0 { margin-bottom:0; }
#content .mt0 { margin-top:0; }
#content .mlr10 { margin-left:10px; margin-right:10px; }

.banners-box { margin:0 10px 42px; }

.content-box {}
.content-box .header { margin:55px 10px 30px; text-align:center; font-size:24px; line-height:30px; font-weight:bold; color:#4e4e4e; }
.content-box .header span { background-color:#fff; padding:0 8px; }

/* 1 projects */
#project-details { margin:0 10px; }
#project-details .image { float:left; display:inline; width:380px; }
#project-details .image img { width:380px; margin:8px 0 20px; }
#project-details .image .link { display:inline-block; color:#d55a83; line-height:25px; height:25px; text-decoration:underline; font-size:14px; padding-left:40px; background:url(/images/design/earth-icon_bg.png) left center no-repeat; }
#project-details .image .link:hover {}

#project-details .description { margin-left:480px; }
#project-details .description h3 { margin:0 0 1em; font-size:20px; font-weight:bold; }
#project-details .description ul { list-style-image:url(/images/design/romb_li_item.png); }
#project-details .description li { font-size:14px; }
#project-details .description p { margin:1em 0; font-size:14px; }

/* projects list */
#projects-list {}
#projects-list .project-item { float:left; /*width:220px; height:220px;*/ position:relative; overflow:hidden; margin:10px; box-shadow:0 0 6px 1px rgba(0,0,0,0.28); }
#projects-list .project-item a { text-decoration:none; display:block; }
#projects-list .project-item img {
	 box-shadow:0 0 6px 1px rgba(0,0,0,0.5);
	-moz-transition: margin 1s;
	-webkit-transition: margin 1s;
	-o-transition: margin 1s;
	transition: margin 1s;
}
#projects-list .project-item:hover img { margin-top:-60px; }

#projects-list .project-item .caption {
	height:0;
	padding:0 20px 0 0;
	background:url(/images/design/project-item_caption_bg.png) right center no-repeat #f5f5f5;
	-moz-transition: height 1s;
	-webkit-transition: height 1s;
	-o-transition: height 1s;
	transition: height 1s;
}
#projects-list .project-item:hover .caption { height:60px; }

#projects-list .project-item .name { font-size:18px; color:#ca2259; padding:8px 0 0 10px; display:block; }
#projects-list .project-item .tag { font-size:14px; color:#6f6f6f; padding-left:10px; display:block; }

/* filter */
#filter-options { color:#a2a1a1; font-size:14px; margin:50px 10px 10px; }
#filter-options a { color:#a2a1a1; font-size:14px; text-decoration:none; margin:0 8px; }
#filter-options a:first-child { margin-left:0; }
#filter-options a:hover,
#filter-options a.active { color:#009bc2; text-decoration:underline; }

/* service */
.container_wide {}
.container_wide .header { width:960px; margin:55px auto 30px; }
.container_wide .text { width:940px; margin:0 auto; padding:0 10px; }
.container_wide .caption { font-size:24px; width:960px; margin:0 auto; }
.container_wide .caption span { display:inline; background:#f6f6f6; }
.container_wide .service-list { width:960px; margin:90px auto 0; }
.container_wide .c-wrapper { background:url(/images/design/gadget-pattern.png) fixed center repeat; padding:110px 0; border-bottom:7px solid #badade; border-top:7px solid #badade; margin-top:40px; }

.container_wide .service-list a,
.container_wide .service-list p { font-size:14px; line-height:24px; }

.container_wide .service-list h5 { font-size:18px; font-weight:bold; margin-top:0; }
.container_wide .service-list a { font-weight:bold; }

.container_wide .service-item { margin-bottom:60px; }
.container_wide .item-image { width:206px; height:206px; line-height:206px; border-radius:50%; border:7px solid #e6f6ff; background-color:#ceedff; float:left; margin-right:100px; text-align:center; }
.container_wide .item-image img { vertical-align:middle; }
.container_wide .item-description { margin-left:320px; width:auto; }


/* text */
.text { margin:0 10px; }
.text h3 { font-size:18px; }
.text p { font-size:14px; line-height:24px; }
.text ul { list-style-image:url(/images/design/romb_li_item.png); }
.text li { line-height:24px; }
.text a,
.container_wide .item-description a { color:#ca2259; }
.text .fs16 { font-size:16px; }
.text .caption { font-style:italic; font-size:18px; color:#4e4e4e; line-height:24px; padding:28px 10px; margin:55px 0 40px; background:#f6f6f6; }
.text .caption strong { font-style:normal; }

/* contacts & feedback */
#feedback { float:left; display:inline; width:360px; padding:10px; margin-top:5px; background:#f6f6f6; box-shadow:0 0 16px 1px rgba(0,0,0,0.13); border-radius:5px; }
#feedback .caption { text-transform:uppercase; text-align:center; font-size:18px; font-weight:bold; color:#5a5a5a; background:url(/images/design/feedback_caption_bg.png) center center no-repeat; margin-top:10px; }
#feedback label { display:block; margin-top:25px; font-size:14px; font-weight:bold; color:#918e8e; }
#feedback input[type="email"],
#feedback input[type="text"],
#feedback textarea { color:#918e8e; border-radius:3px; border:1px solid #c4c4c4; box-shadow:0 2px 4px 1px rgba(103,135,161,0.18) inset, 0 0 3px 3px #eaeaea; display:block; outline:none; margin:10px 0; padding:8px 10px; resize:none; }
#feedback input[type="email"]:focus,
#feedback input[type="text"]:focus,
#feedback textarea:focus { color:#5a5a5a; box-shadow:0 2px 4px 1px rgba(226,241,245,0.18) inset, 0 0 3px 3px #e2f1f5; }
#feedback .error { box-shadow:0 2px 4px 1px rgba(226,241,245,0.18) inset, 0 0 3px 3px #f5e2e2 !important; }
#feedback .error_text { color:#ff4141; }
#feedback .success { color:#090; }
#feedback .small { font-size:12px; line-height:14px; }

#feedback input[type="submit"] { box-shadow:0 1px 0 0 #fff inset, 0 1px 1px 0 #fff; border:1px solid #c4c4c4; border-radius:3px; background:#eaeaea; text-transform:uppercase; text-align:center; font-size:16px; font-weight:bold; color:#4f4f4f; height:48px; line-height:48px; margin:30px 0; }
#feedback input[type="submit"]:hover { box-shadow:0 1px 0 0 #e2f1f5 inset, 0 1px 1px 0 #e2f1f5; }

#feedback input[type="email"],
#feedback input[type="text"] { width:338px; }
#feedback input[type="submit"] { width:360px; }
#feedback textarea { width:338px; }

#contact { margin-left:480px; }
#contact .left { float:left; display:inline; }
#contact .left div { color:#4e4e4e; font-size:16px; margin-bottom:28px; padding-left:30px; background:url(/images/design/contact-sprite_bg.png) no-repeat; }
#contact .phone { background-position:0 4px !important; }
#contact .email { background-position:0 -16px !important; }
#contact .skype { background-position:0 -34px !important; }

#contact .right { margin-left:230px; width:145px; }
#contact .right .item { float:left; display:inline-block; width:52px; height:52px; margin:0 10px 20px; }
#contact .right a { display:block; height:52px; }

.lt-ie9 #contact .right object { display:none; }
.lt-ie9 #contact .right a { background:url(/images/design/social-srite_52color.png) no-repeat; }
.lt-ie9 #contact .right .vk { background-position:0 0 !important; }
.lt-ie9 #contact .right .facebook { background-position:-70px 0 !important; }
.lt-ie9 #contact .right .twitter { background-position:-140px 0 !important; }
.lt-ie9 #contact .right .behance { background-position:-210px 0 !important; }

/* mobile test */
#mobile_test { float:left; display:inline; width:280px; padding:10px; margin-top:5px; background:#f6f6f6; box-shadow:0 0 16px 1px rgba(0,0,0,0.13); border-radius:5px; }
#mobile_test .caption { text-transform:uppercase; text-align:center; font-size:18px; font-weight:bold; color:#5a5a5a; background:url(/images/design/feedback_caption_bg.png) center center no-repeat; margin-top:10px; }
#mobile_test label { display:block; margin-top:25px; font-size:14px; font-weight:bold; color:#918e8e; }

#mobile_test input[type="email"],
#mobile_test input[type="text"],
#mobile_test textarea { color:#918e8e; border-radius:3px; border:1px solid #c4c4c4; box-shadow:0 2px 4px 1px rgba(103,135,161,0.18) inset, 0 0 3px 3px #eaeaea; display:block; outline:none; margin:10px 0; padding:8px 10px; resize:none; }
#mobile_test input[type="email"]:focus,
#mobile_test input[type="text"]:focus,
#mobile_test textarea:focus { color:#5a5a5a; box-shadow:0 2px 4px 1px rgba(226,241,245,0.18) inset, 0 0 3px 3px #e2f1f5; }
#mobile_test .error { box-shadow:0 2px 4px 1px rgba(226,241,245,0.18) inset, 0 0 3px 3px #f5e2e2 !important; }
#mobile_test .error_text { color:#ff4141; }
#mobile_test .success { color:#090; }
#mobile_test .small { font-size:12px; line-height:14px; }

#mobile_test .select { width:278px; height:57px; position:relative; }
#mobile_test .options { list-style:none; color:#918e8e; border-radius:3px; border:1px solid #c4c4c4; box-shadow:0 2px 4px 1px rgba(103,135,161,0.18) inset, 0 0 3px 3px #eaeaea; display:block; outline:none; margin:10px 0; padding:0; position:absolute; top:0; left:0; z-index:10; width:100%; background:url(/images/m/top_navigation_bg.png) 260px 4px no-repeat #fff; }
#mobile_test .options li { padding:8px 10px; display:none; border-top:1px solid #c4c4c4; }
#mobile_test .options li:first-child { border-top:none; }
#mobile_test .options li.current { display:block; margin-top:-1px; }
#mobile_test .options a { cursor:pointer; text-decoration:none; font-weight:normal; display:block; }
#mobile_test .options li:last-child a { padding-bottom:0; }

#mobile_test input[type="submit"] { box-shadow:0 1px 0 0 #fff inset, 0 1px 1px 0 #fff; border:1px solid #c4c4c4; border-radius:3px; background:#eaeaea; text-transform:uppercase; text-align:center; font-size:16px; font-weight:bold; color:#4f4f4f; height:48px; line-height:48px; margin:30px 0; }
#mobile_test input[type="submit"]:hover { box-shadow:0 1px 0 0 #e2f1f5 inset, 0 1px 1px 0 #e2f1f5; }

#mobile_test input[type="email"],
#mobile_test input[type="text"] { width:258px; }
#mobile_test input[type="submit"] { width:280px; }
#mobile_test textarea { width:258px; }

#mobile_test .result label { margin-bottom:10px; }
#mobile_test .result > div { float:left; display:inline; padding-top:5px; }
#mobile_test .test_result:after { content:'%'; }

#mobile_test .result p { font-size:14px; font-weight:bold; color:#5a5a5a; margin-left:110px; margin-top:0; }
#mobile_test .result p span { display:block; font-size:30px; line-height:30px; color:#d83515; }
#mobile_test .result p span.middle { color:#d8bf15; }
#mobile_test .result p span.full { color:#b1d815; }
#mobile_test .full_list { cursor:pointer; color:#009bc2; font-size:18px; text-decoration:underline; }

#mobile_test .social {}
#mobile_test .social .small { color:#5a5a5a; font-size:14px; font-weight:bold; }
#mobile_test .social .item { float:left; display:inline; margin-right:20px; }

/* картинка телефон */
#mobile_phone { margin-left:380px; min-height:907px; position:relative; }
#mobile_phone .light { min-height:907px; }
#mobile_phone .frame { z-index:10; }

/*nokia*/
#mobile_phone.nokia { margin-left:420px; background:url(/images/design/nokia.png) 0 70px no-repeat; }
#mobile_phone.nokia .light { background:url(/images/design/nokia_light.png) 38px 71px no-repeat; }
#mobile_phone.nokia .frame { width:320px; height:483px; position:absolute; top:142px; left:67px; }
#mobile_phone.nokia .fake_input { width:210px; height:34px; position:absolute; top:632px; left:122px; padding:0 10px; line-height:34px; font-size:15px; color:#000; }
#mobile_phone.nokia .fake_refresh { width:43px; height:37px; position:absolute; top:630px; left:73px; }

/*samsung*/
#mobile_phone.samsung { margin-left:440px; background:url(/images/design/samsung.png) 0 90px no-repeat; }
#mobile_phone.samsung .light { background:url(/images/design/samsung_light.png) 87px 95px no-repeat; }
#mobile_phone.samsung .frame { width:320px; height:521px; position:absolute; top:195px; left:40px; }
#mobile_phone.samsung .fake_input { width:170px; height:30px; position:absolute; top:159px; left:48px; padding:0 10px; line-height:30px; font-size:15px; color:#000; }
#mobile_phone.samsung .fake_refresh { width:30px; height:30px; position:absolute; top:159px; left:238px; }

/*apple*/
#mobile_phone.apple { margin-left:385px; background:url(/images/design/apple.png) 0 0 no-repeat; }
#mobile_phone.apple .light { background:url(/images/design/apple_light.png) 222px 13px no-repeat; }
#mobile_phone.apple .frame { width:320px; height:448px; position:absolute; top:198px; left:89px; }
#mobile_phone.apple .fake_input { width:150px; height:30px; position:absolute; top:160px; left:95px; padding:0 10px; line-height:30px; font-size:15px; color:#000; }
#mobile_phone.apple .fake_refresh { width:30px; height:30px; position:absolute; top:160px; left:263px; }

/*всплывашка аудита*/
#free_audit { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); z-index:1002; }
#free_audit #feedback { width:440px; height:830px; position:fixed; left:50%; top:50%; margin:-425px 0 0 -320px; padding:10px 90px; }
#free_audit #feedback .caption { background:url(/images/design/free_audit_caption_bg.png) center center no-repeat; }
#free_audit .test_number { text-align:center; }
#free_audit .test_number span { font-size:36px; display:block; }
#free_audit .test_number strong { font-size:48px; font-weight:bold; display:block; }
#free_audit .offer p { font-size:12px; }
#free_audit .small { text-align:center; }

#free_audit input[type="email"],
#free_audit input[type="text"] { width:418px; }
#free_audit input[type="submit"] { width:440px; }
#free_audit textarea { width:418px; }


/* end content elements ----------------------------------------------------- */


/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 100%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.overflow { overflow:hidden; }

/* ajax loader */
.ajax_loading_box { position:fixed; height:100%; width:100%; z-index:1001; /*background:rgba(255,225,161,0.2);*/ top:0; left:0; }
.bokeh { font-size: 100px; width: 1em; height: 1em; position: relative; margin: 20% auto 0; padding:0; border-radius: 50%; border: .01em solid rgba(48,48,48,0.1);  list-style: none; }
.bokeh li { position: absolute; width: .2em; height: .2em; border-radius: 50%; }
.bokeh li:nth-child(1) {
	left: 50%;
	top: 0;
	margin: 0 0 0 -.1em;
	background: rgba(170,250,66,0.5);
	-webkit-transform-origin: 50% 250%;
	-moz-transform-origin: 50% 250%;
	-ms-transform-origin: 50% 250%;
	-o-transform-origin: 50% 250%;
	transform-origin: 50% 250%;
	-webkit-animation: rota 1.13s linear infinite/*, opa 3.67s ease-in-out infinite alternate*/;
	-moz-animation: rota 1.13s linear infinite/*, opa 3.67s ease-in-out infinite alternate*/;
	-ms-animation: rota 1.13s linear infinite/*, opa 3.67s ease-in-out infinite alternate*/;
	-o-animation: rota 1.13s linear infinite/*, opa 3.67s ease-in-out infinite alternate*/;
	animation: rota 1.13s linear infinite/*, opa 3.67s ease-in-out infinite alternate*/;
}
.bokeh li:nth-child(2) {
	top: 50%;
	right: 0;
	margin: -.1em 0 0 0;
	background: rgba(255,65,65,0.5);
	-webkit-transform-origin: -150% 50%;
	-moz-transform-origin: -150% 50%;
	-ms-transform-origin: -150% 50%;
	-o-transform-origin: -150% 50%;
	transform-origin: -150% 50%;
	-webkit-animation: rota 1.86s linear infinite/*, opa 4.29s ease-in-out infinite alternate*/;
	-moz-animation: rota 1.86s linear infinite/*, opa 4.29s ease-in-out infinite alternate*/;
	-ms-animation: rota 1.86s linear infinite/*, opa 4.29s ease-in-out infinite alternate*/;
	-o-animation: rota 1.86s linear infinite/*, opa 4.29s ease-in-out infinite alternate*/;
	animation: rota 1.86s linear infinite/*, opa 4.29s ease-in-out infinite alternate*/;
}
.bokeh li:nth-child(3) {
	left: 50%;
	bottom: 0;
	margin: 0 0 0 -.1em;
	background: rgba(255,249,85,0.5);
	-webkit-transform-origin: 50% -150%;
	-moz-transform-origin: 50% -150%;
	-ms-transform-origin: 50% -150%;
	-o-transform-origin: 50% -150%;
	transform-origin: 50% -150%;
	-webkit-animation: rota 1.45s linear infinite/*, opa 5.12s ease-in-out infinite alternate*/;
	-moz-animation: rota 1.45s linear infinite/*, opa 5.12s ease-in-out infinite alternate*/;
	-ms-animation: rota 1.45s linear infinite/*, opa 5.12s ease-in-out infinite alternate*/;
	-o-animation: rota 1.45s linear infinite/*, opa 5.12s ease-in-out infinite alternate*/;
	animation: rota 1.45s linear infinite/*, opa 5.12s ease-in-out infinite alternate*/;
}
.bokeh li:nth-child(4) {
	top: 50%;
	margin: -.1em 0 0 0;
	background: rgba(69,235,255,0.5);
	-webkit-transform-origin: 250% 50%;
	-moz-transform-origin: 250% 50%;
	-ms-transform-origin: 250% 50%;
	-o-transform-origin: 250% 50%;
	transform-origin: 250% 50%;
	-webkit-animation: rota 1.72s linear infinite/*, opa 5.25s ease-in-out infinite alternate*/;
	-moz-animation: rota 1.72s linear infinite/*, opa 5.25s ease-in-out infinite alternate*/;
	-ms-animation: rota 1.72s linear infinite/*, opa 5.25s ease-in-out infinite alternate*/;
	-o-animation: rota 1.72s linear infinite/*, opa 5.25s ease-in-out infinite alternate*/;
	animation: rota 1.72s linear infinite/*, opa 5.25s ease-in-out infinite alternate*/;
}
@-webkit-keyframes rota {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rota {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rota {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes rota {
    to { -o-transform: rotate(360deg); }
}

@keyframes rota {
    to { transform: rotate(360deg); }
}
/*
@-webkit-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-moz-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-ms-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@-o-keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes opa {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}
*/
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media screen and (max-width: 1030px) {
	#projects-list .project-item { width:220px; margin:10px; }
}
@media screen and (max-width: 964px) {
.container { width:98%; margin:10px 1%; }
.logo { padding-bottom:20px; text-align:center; }
#content { margin-top:5px; }

/* content */
.content-box .header { margin:15px 10px 10px; background:url(/images/m/content-box_header_bg.png) center 15px no-repeat; }

/* filters */
#filter-options { margin:15px 0; padding:5px 55px 5px 20px; background:#f7f7f7; }
#filter-options a { word-break:break-all; }
#filter-options a:last-child { margin-left:0; }

/* project list */
#projects-list .project-item { width:23%; margin:1%; }

/* text */
.text .caption { margin:25px 0 10px; }

.container_wide .header { width:98%; margin:10px 1%; padding:0; }
.container_wide .text { width:98%; margin:10px 1%; padding:0; }
.container_wide .service-list { width:98%; margin:10px 1%; }
.container_wide .caption { font-size:24px; width:98%; margin:10px 1%; padding:0; }

/* contacts & feedback */
#contact { margin-left:420px; }
}

@media screen and (max-width: 860px) {
/* project list */
#projects-list .project-item { width:23%; margin:1%; }
#projects-list .project-item .name,
#projects-list .project-item .tag { font-size:14px; }

/* contacts & feedback */
#contact .left { float:none; display:block; margin:0 10px; }
#contact .right { margin-left:0; }
}

@media screen and (max-width: 740px) {
/* 1 projects */
#project-details .image { float:left; display:inline; width:300px; }
#project-details .image img { width:300px; margin:8px 0 20px; }
#project-details .description { margin-left:320px; }

#projects-list .project-item .name,
#projects-list .project-item .tag { font-size:12px; }

/* contacts & feedback */
#contact { margin-left:400px; }
#contact .left div { padding-left:20px; }
}

@media screen and (max-width: 610px) {
/* top navigation */
.top_navigation { position:relative; height:30px; padding-bottom:0; color:#918e8e; border-radius:3px; border:1px solid #c4c4c4; box-shadow:0 2px 4px 1px rgba(103,135,161,0.28) inset, 0 0 3px 3px #eaeaea; overflow:hidden; background:url(/images/m/top_navigation_bg.png) 98% 2px no-repeat #fff; margin-bottom:5px;  }
.top_navigation:hover { overflow:visible; z-index:15; box-shadow:0 2px 4px 1px rgba(226,241,245,0.28) inset, 0 0 3px 3px #e2f1f5; background-position:98% -30px; }
.top_navigation:before,
.top_navigation:after { display:none; }
.top_navigation:hover ul { }
.top_navigation ul { padding:5px 0; margin-top:30px; width:99%; background:#fff; border-radius:0 0 3px 3px; border:1px solid #c4c4c4; }
.top_navigation li { display:block; text-align:left; margin:0 5px; }
.top_navigation a { padding:0 5px; }
.top_navigation li.active { position:absolute; left:0; top:0; }
.top_navigation li.active a { background:none; }

.navigation_wrapper { visibility:hidden; display:none; }
.navigation_wrapper-m { display:block; visibility:visible; background:#fff; }
.navigation_wrapper-m .top_navigation { width:100%; padding:3px; color: #000; outline: none; }
.navigation_wrapper-m.f-nav .top_navigation { margin:5px 2%; width: 96%; }

/* 1 projects */
#project-details .image { float:none; display:block; width:380px; }
#project-details .image img { width:380px; margin-bottom:10px; }
#project-details .description { margin:15px 10px 0 0; }

/* project list */
#projects-list .project-item { width:46%; max-width:220px; margin:2%; }
#projects-list .project-item .name,
#projects-list .project-item .tag { font-size:16px; }

/* contacts & feedback */
#feedback { width:320px; }
#feedback input[type="email"],
#feedback input[type="text"] { width:298px; }
#feedback input[type="submit"] { width:320px; margin:15px 0 10px; }
#feedback textarea { width:298px; }

#contact { margin-left:360px; }

.container_wide .item-image { float:none; margin:0 auto 40px; }
.container_wide .item-description { margin-left:0; }
}

@media screen and (max-width: 480px) {
.logo img { height:93px; }
/* project list */
#projects-list .project-item { width:46%; margin:2%; }
#projects-list .project-item .name,
#projects-list .project-item .tag { font-size:14px; }

/* 1 projects */
#project-details .image { float:none; display:block; width:100%; }
#project-details .image img { width:100%; max-width:380px; margin-bottom:10px; }
#project-details .description { margin:15px 10px 0 0; }

/* contacts & feedback */
#feedback { float:none; display:block; width:94%; padding:10px 3%; margin-top:20px; }
#feedback .caption { margin-top:0; }
#feedback label { margin-top:15px; }
#feedback input[type="email"],
#feedback input[type="text"] { width:94%; padding:8px 3%; }
#feedback input[type="submit"] { width:100%; margin:15px 0 10px; }
#feedback textarea { width:94%; padding:8px 3%; }

#contact { margin:20px 0 10px; }
#contact .left { float:left; display:inline; width:49%; }
#contact .right { margin-left:51%; width:49%; }

.container_wide .item-image { float:none; margin:0 auto 40px; }
.container_wide .item-description { margin-left:0; }
}

@media screen and (max-width: 320px) {
/* project list */
#projects-list .project-item {  width:46%; max-width:140px; margin:2%; }
#projects-list .project-item .name,
#projects-list .project-item .tag { font-size:12px; }

/* 1 projects */
#project-details .image { float:none; display:block; }
#project-details .image img { width:100%; max-width:300px; margin-bottom:10px; }
#project-details .description { margin:15px 10px 0 0; }

/* contacts & feedback */
#feedback { float:none; display:block; width:280px; }
#feedback .caption { margin-top:0; }
#feedback label { margin-top:15px; }
#feedback input[type="email"],
#feedback input[type="text"] { width:258px; }
#feedback input[type="submit"] { width:280px; margin:15px 0 10px; }
#feedback textarea { width:258px; }

#contact { margin:20px 0 10px; }
#contact .left { float:none; display:block; width:100%; }
#contact .right { margin-left:0; width:100%; }

.container_wide .item-image { float:none; margin:0 auto 40px; }
.container_wide .item-description { margin-left:0; }
}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}