/* reset browser styles */
html, body, div, span, 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%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol {
    padding-left: 1.4em;
    list-style: decimal;
}
ul {
    padding-left: 1.4em;
    list-style: square;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* end reset browser styles */
.clearfix {
    clear: both;
	
}

.marm {width:1160px;
margin-top: 50px;
padding-left:120px;
height: 360px;
position: relative;
display: block;
background-color: #dcd8d8; }

.marmoset {
width:640px;
display: inline-block;}

.captains{float: left;

   background: url("images/projects1/cap.jpg");
    width:400px;
	height:360px;
	display: inline-block;

	box-sizing: border-box;
    padding: 20px;
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
	}
	
	.captains:hover {
    background: url("images/projects1/cap-1.jpg");
    background-size: 400px 360px;
}

.captains p {
    visibility: hidden;
}
.captains:hover p {
    visibility: visible;
	text-decoration: none;
    color: #edefea;
}

.tukan{float: left;

   background: url("images/projects1/22-tukan.jpg");
    width:400px;
	height:360px;
	display: inline-block;

	box-sizing: border-box;
    padding: 20px;
	font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
	}
	
	.tukan:hover {
    background: url("images/projects1/22-1-tukan.jpg");
    background-size: 400px 360px;
}

.tukan p {
    visibility: hidden;
}
.tukan:hover p {
    visibility: visible;
	text-decoration: none;
    color: #edefea;
}

.wrapper {
    width: 1280px;

    margin: 0 auto;
}
.main-header {
    width: 1280px;
    height: 528px;
    background: url("images/header-eng.jpg") no-repeat;
    position: relative;
}
.main-logo {
    width: 210px;
    height: 210px;
    position: absolute;
    left: 115px;
    top: 45px;
    background: url("images/logo.png");
}
.main-languages {
    width: 70px;
    height: 20px;
    position: absolute;
    top: 45px;
    right: 115px;
}
.rus {
    width: 30px;
    height: 20px;
    background: url("images/rus.png") no-repeat;
    background-size: 30px 20px;
    float: left;
    margin-right: 10px;
}
.eng {
    width: 30px;
    height: 20px;
    background: url("images/eng.png") no-repeat;
    background-size: 30px 20px;
    float: left;
}
.main-contacts {
    width: 200px;
    height: 62px;
    position: absolute;
    left: 115px;
    top: 408px;
    box-sizing: border-box;
    border: 3px solid #fffeff;
    padding: auto;
}
.main-contacts a {
    color: #fffeff;
    font-size: 30px;
    text-decoration: none;
    display: block;
    height: 28px;
    width: 130px;
    margin: 10px auto;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.main-features {
    width: 1280px;
    height: 400px;
    background-color: #ffffff;
}
.main-features-wrapper {
    width: 1050px;
    margin: 0 auto;
}
.main-features-item {
    width: 300px;
    height: 400px;
    /*margin-left: px */
}
.main-features-item a {
    text-decoration: none;
}
.main-features-item:nth-child(1)  {
    float: left;
}

.main-features-item .mfi-horeca {
    background: url("images/horeca_bw.png") no-repeat;
    background-size: 120px;
}

.main-features-item:hover .mfi-horeca {
    background: url("images/horeca.png") no-repeat;
    background-size: 120px;
}

.main-features-item:nth-child(2) {
    float: left;
    margin-left: 75px;
}

.main-features-item .mfi-b2b {
    background: url("images/b2b_bw.png") no-repeat;
    background-size: 120px;
}
.main-features-item:hover .mfi-b2b {
    background: url("images/b2b.png") no-repeat;
    background-size: 120px;
}

.main-features-item:nth-child(3) {
    float: right;
}

.main-features-item .mfi-banksservices {
    background: url("images/banks_bw.png") no-repeat;
    background-size: 120px;
}

.main-features-item:hover .mfi-banksservices {
    background: url("images/banks.png") no-repeat;
    background-size: 120px;
}

.mfi-image {
    width: 120px;
    height: 120px;
    margin: 50px auto 20px;
}
.mfi-title {
    font-size: 35px;
    color: #a6a6a6;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.mfi-text {
    margin-top: 10px;
    font-size: 20px;
    color: #252525;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}
.main-cases {
    width: 1280px;
    height: 2160px;
    background-color: #f2f2f2;
    padding-top: 50px;
	
}
.main-cases .main-cases-title {
    font-size: 50px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.main-cases-wrapper {
    width: 1050px;
	height: 2095px;
    margin: 0 auto;
    margin-top: 50px;
	
}
.main-cases-item {
    width: 335px;
    height: 280px;
    background-color: #363f44;
    float: left;
    margin-left: 22px;
    margin-bottom: 22px;
    color: #edefea;
    box-sizing: border-box;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
	
}
.main-cases-item:nth-child(1), .main-cases-item:nth-child(4), .main-cases-item:nth-child(7), .main-cases-item:nth-child(10), .main-cases-item:nth-child(13), .main-cases-item:nth-child(16), .main-cases-item:nth-child(19) {
    margin-left: 0;
}
/* Начало конкретных изображений проектов*/
.main-cases-item:nth-child(1) {
    background: url("images/projects1/1-elsk-ad.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(1):hover {
    background: url("images/projects1/1-1-elsk-ad.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(2) {
    background: url("images/projects1/2-bulb.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(2):hover {
    background: url("images/projects1/2-1-bulb.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(3) {
    background: url("images/projects1/3-portrait.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(3):hover {
    background: url("images/projects1/3-1-portrait.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(4) {
    background: url("images/projects1/4-billy.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(4):hover {
    background: url("images/projects1/4-1-billy.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(5) {
    background: url("images/projects1/5-lotsman.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(5):hover {
    background: url("images/projects1/5-1-lotsman.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(6) {
    background: url("images/projects1/6-plug.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(6):hover {
    background: url("images/projects1/6-1-plug.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(7) {
    background: url("images/projects1/7-elscomp.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(7):hover {
    background: url("images/projects1/7-1-elscomp.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(8) {
    background: url("images/projects1/8-halogen.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(8):hover {
    background: url("images/projects1/8-1-halogen.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(9) {
    background: url("images/projects1/9-bike.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(9):hover {
    background: url("images/projects1/9-1-bike.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(10) {
    background: url("images/projects1/10-doll.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(10):hover {
    background: url("images/projects1/10-1-doll.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(11) {
    background: url("images/projects1/11-airport.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(11):hover {
    background: url("images/projects1/11-1-airport.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(12) {
    background: url("images/projects1/12-church.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(12):hover {
    background: url("images/projects1/12-1-church.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(13) {
    background: url("images/projects1/13-odd.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(13):hover {
    background: url("images/projects1/13-1-odd.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(14) {
    background: url("images/projects1/14-ulyot.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(14):hover {
    background: url("images/projects1/14-1-ulyot.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(15) {
    background: url("images/projects1/15-prince.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(15):hover {
    background: url("images/projects1/15-1-prince.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(16) {
    background: url("images/projects1/16-dragon.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(16):hover {
    background: url("images/projects1/16-1-dragon.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(17) {
    background: url("images/projects1/17-road.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(17):hover {
    background: url("images/projects1/17-1-road.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(18) {
    background: url("images/projects1/18-rabbit.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(18):hover {
    background: url("images/projects1/18-1-rabbit.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(19) {
    background: url("images/projects1/19-brick logo.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(19):hover {
    background: url("images/projects1/19-1-brick logo.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(20) {
    background: url("images/projects1/20-palms.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(20):hover {
    background: url("images/projects1/20-1-palms.jpg");
    background-size: 335px 280px;
}

.main-cases-item:nth-child(21) {
    background: url("images/projects1/21-kitten.jpg");
    background-size: 335px 280px;
}
.main-cases-item:nth-child(21):hover {
    background: url("images/projects1/21-1-kitten.jpg");
    background-size: 335px 280px;
}
/* Конец конкретных изображений проектов*/

.main-cases-item p {
    visibility: hidden;
}
.main-cases-item a {
    visibility: hidden;
    text-decoration: none;
    color: #edefea;

}
.podrobnee {
    color: #edefea;
    text-decoration: none;
    font-size: 30px;

}


.main-cases-item:hover {
    background-color: #252525;
    opacity: 0.8;
}
.main-cases-item:hover p, .main-cases-item:hover a {
    visibility: visible;
}
.main-cases-button {
    width: 360px;
    height: 60px;
    margin: 0 auto;
    background-color: #768e92;

}
.main-cases-button a {
    color: #f5ffff;
    text-decoration: none;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
    display:block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.main-cases-button:hover {
    background-color: #647477;
}

.main-clients {
    background-color: #ffffff;
    width: 1280px;
    height: 725px;
    box-sizing: border-box;
}
.main-clients-wrapper {
    width: 1050px;
    padding-top: 50px;
    margin: 0 auto;
}
.main-clients-wrapper h2 {
    font-size: 50px;
    color: #797979;
    text-align: center;
    display: block;
    margin-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.main-newdirections {
    width: 1280px;
    height: 720px;
    background-color: #f2f2f2;
    padding-top: 50px;
}
.main-newdirections h2 {
    font-size: 50px;
    color: #797979;
    text-align: center;
    display: block;
    margin-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.main-newdirections-wrapper {
    width: 1050px;
    margin: 0 auto;
}
.mnd-item {
    width: 335px;
    height: 510px;
    float: left;
    margin-right: 22px;
}
.mnd-item.raz {
    margin-right: 0;
}

.mnd-item-image {
    width: 335px;
    height: 285px;
    margin-bottom: 40px;
}
.mnd-3d {
    background: url("images/1_3d.jpg");
    background-size: 335px 285px;
}
.mnd-flash {
    background: url("images/2_flash.jpg");
    background-size: 335px 285px;
}
.mnd-web {
    background: url("images/3_web.jpg");
    background-size: 335px 285px;
}
.mnd-item:hover .mnd-3d {
    background: url("images/1-1_3d.jpg");
    background-size: 335px 285px;
}
.mnd-item:hover .mnd-flash {
    background: url("images/2-1_flash.jpg");
    background-size: 335px 285px;
}
.mnd-item:hover .mnd-web {
    background: url("images/3-1_web.jpg");
    background-size: 335px 285px;
}
.mnd-item-title {
    font-size: 35px;
    color: #424242;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.mnd-item-text {
    margin-top: 10px;
    font-size: 20px;
    color: #424242;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.main-footer {
    width: 1280px;
    height: 150px;
    position: relative;
    background-color: #363636;
}
.main-footer-logo {
    position: absolute;
    top: 40px;
    left: 115px;
}
.main-footer-contacts {
    position: absolute;
    left: 450px;
    top: 40px;
    color: #fcfcfc;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
.main-footer-contacts p {
    display: block;
}
.main-footer-contacts p:first-child {
    margin-bottom: 30px;
}
.main-footer-social {
    position: absolute;
    right: 115px;
    top: 40px;
    box-sizing: border-box;
}
.main-footer-social .contact-us {
    color: #fcfcfc;
    font-size: 35px;
    border: 3px solid #fcfcfc;
    text-decoration: none;
    padding: 10px;
    display: block;
    margin-bottom: 90px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.contact-us:hover {
    color: #424242;
    border: 3px solid #424242;
}

.main-footer-social .mfs-slogan {
    display: block;
    color: #fcfcfc;
    font-size: 20px;
    float: left;
    margin-right: 50px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding-top: 20px;
}
.social-icon {
    display: block;
    float: left;
    width: 60px;
    height: 60px;
    box-sizing: content-box;
    border: 1px solid #fcfcfc;
}
.social-icon:hover {
    border: 1px solid white;
}
.social-icon:first-child {
    margin-right: 10px;
}
.vk {
    background: url("images/vk.png");
    background-size: 60px 60px;
}
.fb {
    background: url("images/fb.jpg");
    background-size: 60px 60px;
}
.main-sortlist {
	height: 90px;
	padding-top: 30px;
	padding-left: 115px;
	margin: 0 auto;
}
.main-sortlist IMG {
	width: 210px;
	height: 60px;
	}