* { margin:0; padding:0;} body { width:100%; color:#666666; font-family:Source Sans Pro;} input, button, select, textarea { font-family:Source Sans Pro;} h1 { font-size:47px;} h2 { font-size:38px; line-height:38px; font-weight:400;} h3 { font-size:28px; line-height:28px;} h4 { font-size:20px;} p { font-size:18px; font-weight:400;} .wrapper { max-width:945px; margin:0 auto;} .row-shade { background: url(../images/shadow.png) no-repeat 50% 0; height: 50px;padding:0; margin:0;} /* end of general settings */ .navigation { position: relative; height: auto; width: 100%;} #navigation { background-color:#fafafa; border-bottom:2px solid #666; position: fixed; top: 0; z-index: 100000000; min-height:70px;} #navigation .menu ul > li.current > a { color:#d926a6;} .logo h2 { font-family:Tangerine; font-weight:400; color:#666; line-height: 50px;} .menu select { display:none;} .menu ul.main-nav { float: right; list-style-type: none; } .menu ul.main-nav li { float: left; line-height: 70px; padding: 0;} .menu ul.main-nav li a { color: #bbb; display: block; font-size: 16px; line-height: 70px; padding: 0 10px; font-weight:600; text-decoration: none; text-transform: uppercase;} .menu ul.main-nav li a:hover { color:#666; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } #phone-menu { display: none;} #home { background-color:#fff; position: relative; padding-top: 72px;} .carousel { border-top: 1px solid #26354A;} .item img { margin:0 auto;} .slider-caption { max-width:945px; margin:auto; left:0; position:relative;} .slider-caption h2 { font-size: 46px; font-weight:500; color:#fff; line-height:42px;} .slider-caption h2 span { font-weight:400; color:#666; font-family:Tangerine;} .slider-caption h3 { color:#fff; font-weight:400; line-height:32px;} .slider-caption p { color:#fff; font-size: 20px; line-height: 26px; font-weight:500; margin-top: 28px;} .slider-caption p.button { background-color: #666; cursor: pointer; margin-top: 76px; text-align: center; width:235px;} .slider-caption p.button a { color: #FFFFFF; font-size: 24px; font-weight: 300; line-height: 60px; padding: 14px 40px; text-decoration: none; text-transform: uppercase;} /* end of home */ #work { background-color:#ffffff;} #work .wrapper h2 { font-weight:400; text-align:center; text-transform: uppercase;} #work .wrapper p { font-weight:400; text-align:center; line-height:25px; color: #777777;} .aligncenter { margin: 40px auto 50px; text-align: left;} ul.item-list { display: inline-block; list-style: none outside none; margin: 0;} ul.item-list li { cursor: pointer; display: inline-block; -webkit-transition: background 0.2s linear 0s; -moz-transition: background 0.2s linear 0s; -ms-transition: background 0.2s linear 0s; -o-transition: background 0.2s linear 0s; transition: background 0.2s linear 0s;} .active { border-radius: 3px;} ul.item-list li.active a { color: #FFFFFF; background-color:#bbb;} ul.item-list li a { color: #fff; display: block; font-size: 16px; font-weight: normal; padding: 14px 20px; text-decoration: none; background:#666666; border-radius:3px;} ul.item-list li a:hover { background: #bbb;} .work-list li .work-thumb { max-width: 210px; position: relative;} .item-title h3 { font-size: 20px; font-weight: 600; line-height: 22px; color:#777777;} #work .item-title p { color: #A9A9A9; font-size: 15px; line-height: 20px; margin-top: -3px; text-align: left; width: 223px;} ul.work-list { list-style: none outside none; margin: 0 auto; display: block; margin-bottom: 20px;} ul.work-list li { margin-bottom: 35px; margin-left: 14.5px; width:222px; vertical-align:top; display: inline-block;} ul.work-list li a { border: none; outline: none; display: block; position: relative;} #work .item { overflow: visible; position: relative; margin-bottom:30px} #work .item img { border:1px solid #dddddd; padding:4px 4px 4px 4px; position:relative;} #work .item:hover img { border:1px solid #262626;} #work .item .common-hover:before { content: ""; display: inline-block; vertical-align: middle;} #work .item .common-hover .common-hover-content h3 { color: #000000 !important; margin: 0px 0 0 !important;} #work .content-element { margin-bottom: 0;} #work .item .common-hover { background-color: rgba(0, 0, 0, 0.7); height: 95%; margin-left: 2%; margin-top: 2%; left: 0; opacity: 0; position: absolute; text-align: center; top: 0; width: 95%; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;} #work .item:hover .common-hover { opacity: 1; transform: translateX(0%);} #work .no-csstransforms .item .common-hover { display: none;} #work .no-csstransforms .item:hover .common-hover { display: block;} #work .item .common-hover:before { content: ""; display: inline-block; vertical-align: middle;} #work .item a { display: block;} #work .item a img ^ { float: left;} #work .item .common-hover .common-hover-content { display: inline-block; height: auto; position: relative; vertical-align: middle;} #work .item .common-hover-icon { background: none repeat scroll 0 0 #FFFFFF; border-radius: 50% 50% 50% 50%; float: left; height: 35px; line-height: 35px; margin-right: 5px; opacity: 1; text-align: center; width: 35px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s;} #work .item .icon-color { color: #FFFFFF; font-size: 12px; line-height: 35px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s;} #work .item .common-hover-icon:hover .icon-color { color: #666;} #work .item .common-hover-icon:hover { background: none repeat scroll 0 0 #B2B2B2;} #work .common-hover-content i { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); border: 2px solid #FFFFFF; border-radius: 50% 50% 50% 50%; color: #ACACA8; font-size: 12px; padding: 9px 10px; text-decoration: none;} #work-view { background-repeat: repeat; position: relative; display: none;} #work-view .wrapper { padding: 50px 0; position: relative;} .single-photo img { border: 1px solid; border-color: #DDDDDD; padding: 5px; background: #ffffff;} .single-description .btn { background: #666; color: #fff;} .single-description { text-align: left;} .single-description h2 { font-weight: 400; font-size: 34px; line-height: 34px; margin-bottom: 20px; margin-top: 0; text-transform: uppercase;} .single-description h4 { font-weight: 600; font-size: 20px; line-height: 20px; margin-top: 0; margin-bottom: 15px; text-transform: uppercase;} .single-description p { font-weight: 400; font-size: 15px; line-height: 24px; margin-bottom:15px;} .cross-button { background: url('../images/close.png'); color: red; text-decoration: none; height: 30px; width: 30px; position: absolute; top: 10px; right: 0; font-size: 16px; text-indent: -9999px;} /* end of work */ #about { background:url("../images/serhorij.png") repeat ; border-top:1px solid #dedede;} #about h2 { font-weight:400; text-align:center; margin-bottom: 27px; text-transform: uppercase;} #about p { font-weight:400; text-align:center; line-height: 20px;} .expert { border-bottom:1px solid #dddddd; box-shadow: 0 1px 0 0 #fff, 0 1px 0 0 #fff; padding: 20px 0 50px; margin-bottom:50px;} #about .expert h4 { text-transform:uppercase; font-weight:600;} #about .expert p { text-align:left; font-size:15px; line-height:23px;} .header-social-icon a { float: left; height: 32px; width: 32px !important; text-indent: -9999px; -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s;} .header-social-icon li { display: inline-block; margin: 0 2px; padding: 0;} ul.header-social-icon { display: inline-block; list-style: none outside none; margin: 0;} .footer-social-icon { margin: 25px 0 60px; text-align: center;} .header-social-icon li.facebook a { background: url("../images/facehov.png") no-repeat scroll 0 0 transparent; border-radius: 50% 50% 50% 50%;} .header-social-icon li.facebook a:hover { background: url("../images/facebook.png") no-repeat scroll 0 0px transparent;} .header-social-icon li.instagram a { background: url("../images/inshov.png") no-repeat scroll 0 0 transparent; border-radius: 50% 50% 50% 50%;} .header-social-icon li.instagram a:hover { background: url("../images/instagram.png") no-repeat scroll 0 0 transparent;} .header-social-icon li.skype a { background: url("../images/skyhov.png") no-repeat scroll 0 0 transparent; border-radius: 50% 50% 50% 50%;} .header-social-icon li.skype a:hover { background: url("../images/skype.png") no-repeat scroll 0 0 transparent;} .header-social-icon li.twitter a { background: url("../images/twhov.png") no-repeat scroll 0 0 transparent; border-radius: 50% 50% 50% 50%;} .header-social-icon li.twitter a:hover { background: url("../images/twitter.png") no-repeat scroll 0 0 transparent;} #about p.member-id { padding: 0; margin: 0; line-height: 28px;} #about p.member-id span { text-align: center; font-size: 16px; font-weight: 300; font-style: italic; color: #fff;} .team-people { -webkit-transition: all linear .5s; -moz-transition: all linear .5s; -ms-transition: all linear .5s; -o-transition: all linear .5s; transition: all linear .5s; z-index:9;} .skill-title { width: 25%; float: left; height: 22px; background: #2B4434; color: #fff;} .skill-title span { font-size: 14px; font-weight: 500; line-height: 22px; padding-left: 10px; -webkit-text-shadow:0 0 1px rgba(0, 0, 0, 0.75); -moz-text-shadow:0 0 1px rgba(0, 0, 0, 0.75); -ms-text-shadow:0 0 1px rgba(0, 0, 0, 0.75); -o-text-shadow:0 0 1px rgba(0, 0, 0, 0.75); text-shadow:0 0 1px rgba(0, 0, 0, 0.75);} .skill-bar { width: 75%; float: left;} /* End of about */ #client { background:url("../images/client.jpg") no-repeat 50% 0; height:285px;} #client h2 { font-weight:400; text-align:center; color:#fff; margin: 35px auto 20px; text-transform: uppercase;} #client p.comments { font-weight:400; font-style:italic; color:#fff; padding:0 63px; text-align:center; margin:0 auto;} #client div.carrow { background:url("../images/carrow.png") no-repeat 50% 0%; height:6px; margin-top:20px;} #client p.c-name { width:166px; height:60px; background-color:#26354a; margin:0 auto; border-radius:3px; text-align:center; font-size:15px; color:#fff;} #client p.c-name label { position:relative; top:20%;} #client p.c-name span { font-size:20px; font-weight:400;} .comments span img { margin: 0 0 0 -75px;} .comments label img { float: right; margin: -55px -60px 0 0;} /* end of clients */ #contact { position:relative; background:url("../images/serhorij.png") repeat ;} #contactcontainer { position: relative; width: 100%; height: 420px; margin: 0 auto; margin-bottom:50px; z-index: 99;} .contact-input { float: left;} .contact-row { clear: both;} #contact .marrow { background:url("../images/marrow.png") no-repeat 26% 0; height:54px; margin-top: 112px;} #contact .muparrow { background:url("../images/muparrow.png") no-repeat 27% 0; height:9px; margin:0;} #contact-icon.header-social-icon li.facebook a { background: url("../images/facebook.png") no-repeat scroll 0 0px transparent;} #contact-icon.header-social-icon li.instagram a { background: url("../images/instagram.png") no-repeat scroll 0 0 transparent;} #contact-icon.header-social-icon li.skype a { background: url("../images/skype.png") no-repeat scroll 0 0 transparent;} #contact-icon.header-social-icon li.twitter a { background: url("../images/twitter.png") no-repeat scroll 0 0 transparent;} #contact .mcont { background:#666; height:90px; width:254px; border-radius:3px; font-size:15px; color:#fff; text-align:center; margin:0;} #contact .mcont label { padding-top: 15px;} #contact .mcont span { font-size:20px; font-weight:400;} #contact .form-color { background-color:#2b4434; width:372px; /*width:944px;*/ margin:0 auto 100px auto; min-height:340px; -moz-box-shadow: 0 0 5px #2b4434; -webkit-box-shadow: 0 0 5px #2b4434; box-shadow: 0 0 5px #2b4434;} #contact .form-color .formcon p.nama { color: #FFFFFF; font-size: 15px !important; line-height: 15px; margin:0;} #contact .form-color .formcon p { color: #FFFFFF; font-size: 22px; line-height: 30px; padding: 20px 0 5px 25px;} #contact .uppercont { /*position:absolute;*/ top:60px; z-index: 99999999;} #contact .footer-social-icon { text-align:left; padding-left:25px; margin: 12px 0 30px;} #contactForm { background: #2b4434;} form .styc { background-color: rgba(255, 255, 255,0.99); border: medium none; color: #777777; height: 40px; margin: 10px 0 0; width: 150px; float:left;} form .styccc { background-color: rgba(255, 255, 255,0.99); border: medium none; color: #777777; height: 40px; margin: 10px 9px 0; width: 150px;} form p { font-size: 15px; line-height: 20px;} form .stycc { background-color: rgba(255, 255, 255, 0.99); border: medium none; color: #777777; height: 92px; margin: 10px 0; padding: 8px 0 0 8px; width: 326px; resize:none;} form .sttyc { background-color: #666; border: 0 none; color: #fff; float: right; font-size: 16px; font-weight: normal; padding: 5px 20px; text-transform: uppercase; float: left; border-radius:3px; margin-top:16px; margin-bottom: 20px;} .fotter-form { margin:30px 8px 0 19px; background: #2b4434;} .footer h2 { text-align:center; font-family: Tangerine; font-weight:400; line-height: 60px; margin:45px auto 15px; color: #3A4348;} .footer-wrap { max-width:750px; margin: 0 auto;} .footer-wrap p { font-weight:400; font-size:14px; text-transform:uppercase; text-align:center; margin-bottom:50px; padding-top:35px; border-top:1px solid #eeeeee;} .footer-wrap p span a { color: #666; text-decoration:none;} .footer-wrap p span a:hover { color: #666666;} .error-holder { width: 100%; height: auto; margin: 0; padding: 0;} #contact p#error-name, #contact p#error-email, #contact p#error-sms, #contact p#failed { font-family: 'Source Sans Pro'; font-size: 14px; font-weight: 300; line-height: 20px; color: #ffffff; padding: 0; margin: 10px 0 0 0; display: none;} #contact p#error-name span, #contact p#error-email span, #contact p#error-sms span, #contact p#failed span4 { color: #FF0000; font-size: 16px; padding-right: 10px;} #success { color: #FD6533; display: none; font-size: 25px; font-weight: 100; margin-bottom: 0; padding-top: 30px;} #error-404, #soon { min-height: 450px; padding-top: 72px; background: #2b4434; overflow:hidden;} #error-404 h2, #soon h2 { font-family: 'Source Sans Pro'; font-size: 220px; font-weight: 300; line-height: 180px; margin: 100px 0 15px; text-align: center; color: #75e0b1;} #error-404, #soon p { font-family: 'Source Sans Pro'; font-size: 24px; font-weight: 300; line-height: 30px; color: #E1EEFA; margin: 0; text-align: center;} .required.styc.invalid, .email.required.styccc.invalid, form .stycc.invalid { color: red;} #contact .form-color .formcon p#errorMessage {font-size: 14px; line-height:23px; padding-left:8px; padding-right:10px} #kontakt-danke #contact .form-color {margin-top:100px; color: #C8C8C8;padding: 20px 0 17px 20px; min-height:130px} #kontakt-danke #contact .form-color h2 {margin-bottom:25px} #kontakt-danke #contact .form-color .formcon p {padding:0 20px 0px 0; color: #C8C8C8} #policy { padding-top: 72px;} #policy .wrapper { padding-top: 30px;} #policy .wrapper h2 { text-align: center; text-transform: uppercase; font-weight: 400;} #policy .wrapper p { text-align: center;} #privacy { font-family: 'Source Sans Pro'; padding: 30px 0;} #privacy ol { list-style-type: decimal; margin-left: 20px;} #policy #privacy p { font-size: 16px; font-weight: normal; line-height: 24px; text-align: left; margin: 10px 0;} #privacy ul { list-style-type: disc; margin-left: 30px;} #privacy a { color: #666;}