.header-part{background: url(../img/map.svg) no-repeat center center #282b4f; position:relative; z-index:9; margin:0; padding:0; -webkit-background-size: cover;	-moz-background-size: cover; -o-background-size: cover;	background-size: cover;}
.logo{background:url("../images/ux-web-designer-and-front-end-developer.png") no-repeat center center; max-width:370px; height:54px; text-indent:-99999px; margin:0 auto}
.cell{clear:both; display:block;}
.headerRight h1{color:#f1f1f1; text-shadow:1px 1px #333333; font-family:'Lato', Arial, Helvetica, sans-serif; font-size:22px; line-height:38px; font-weight:normal; margin-top:20px}
.mainbanner{ position:relative; padding:40px 0px; max-width:1200px; margin:0 auto; min-height:400px;}
.bg{background:rgba(20,21,36,0.87); width:100%; height:100%; position:absolute; left:0; bottom:0;}

.fullwidth{ max-width:100%; height: auto;}
.clear{ clear:both; margin:0; padding:0;}
section { border:none;}
#main {position:relative; padding:0px; margin:0;}



.fxnav{width:100%; height:45px; margin:0px ; z-index:99; padding:0px; position:relative; background:#ffffff;
	background: -webkit-linear-gradient(#ffffff, #e2e2e2);
	background: -o-linear-gradient(#ffffff, #e2e2e2);
	background: -moz-linear-gradient(#ffffff, #e2e2e2); 
	background: linear-gradient(#ffffff, #e2e2e2);
}
#navigation-part{clear:both; text-align:right; max-width:1200px; margin:0px auto; padding:0 30px}
.nav{ float:right; margin:0; padding:0; width:70%}
.nav-logo{ float:left; width:30%; text-align:left; margin:0; padding:3px 0}
.mlogo{ background:url('../images/suresh-design.png') no-repeat left center; width:40px ; height:40px; display:block; text-indent:-999}
.nav li{margin:0px; list-style:none; float: none; display: inline-block; font-size:0; margin:0px; font-size:0;}
.nav li a{text-decoration: none; display: block; color:#282b4f; font:normal 17px 'RobotoRegular'; padding:13px 0 13px 50px;}
.nav li a:hover{ color:#0b0c17;}


#top{ text-indent:-9999em}
.fxnav{ padding:0;}
.inner-container{max-width:1200px; margin:0 auto;}
.section-inner {max-width:1200px; margin:0 auto; position:relative; padding:30px;
-webkit-transition:width .5s;
-moz-transition:width .5s;
-ms-transition:width .5s;
-o-transition:width .5s;
transition:width .5s;
padding-bottom:0px;
}.


h1.heading{color:#f1f1f1; text-shadow:1px 1px #333333; font-family:'Lato'; font-size:28px; text-align:ceter;}
h2.heading{text-shadow:0.5px 0.5px #656464; font-family:'Lato'; font-size:24px; font-weight:normal; text-align:ceter!important; margin:0; padding:0 0 20px 0}
.btn-home-right{text-align:center; text-decoration:none; font-size:16px; margin:1px 3px 0 0; padding:5px 10px; color:#fff; border:1px #fff solid; z-index:2}
.btn-home-right:hover{ background:#fff; color:#1b1b1b; border:1px #1b1b1b solid;}

.work-container{position:relative; padding:0 15px 30px 15px; margin:0; width:25%; float:left;}
.expertise li{padding:0 15px 15px; margin:0px; width:33.333333%; float:left;}
.expertise p{ line-height:28px}
.work-container .work-thumbnail {position:relative;}
.work-container .work-thumbnail img {width:100%}


section#expertise{background:#e7e8e8}
section#works{background:#7dc0b9}
section#expertise, section#works{padding:20px 0}

.work-container .work-info {background-repeat:no-repeat; position:relative; background-image:url('../img/works-info.png');	background-position:100% 100%; padding:25px 50px 25px 25px;  color:#282b4f; min-height:150px;}
.work-container .work-info h3{ margin:0; padding:0 0 10px 0; font-size:18px; font-weight:normal; font-family:'RobotoLight'; }
.work-container .work-info p,  .expertise p{ margin:0; padding:0; font-size:15px;}
.work-container .work-info a { text-decoration: underline; color:#282b4f; margin:0; padding:0}
.work-container .work-info .triangle {position:absolute;bottom:0;right:0;width:36px;height:36px;background-image:url('../img/works-info.png');	background-repeat:no-repeat}
.work-container.green .work-info .triangle {background-position:0 -932px}
.work-container.yellow .work-info .triangle {background-position:-36px -932px}
.work-container.red .work-info .triangle {background-position:-72px -932px}

#expertise{ clear: both; text-align:center;}
.expertise{margin-bottom:30px;}
.expertise .services{ border:1px solid #f1f1f1;}
.expertise .services h3{ margin:0;  padding:15px; font-weight:normal;}
.expertise .services p{ padding:15px 15px 20px ;}
.service-head{ border-bottom:1px rgba(20,21,36,0.5) solid; margin-bottom:20px;}
.icon{display:block; text-align:center; padding:15px 0 0 0}

#contacts {color:#ccc; background:url('../img/contacts-background.png') 50% 0}
#contacts h1 {color:#ccc; text-align:center;}
#contacts p {font-size:1.125em; text-align:center}
#contacts p#contacts-intro {margin-bottom:2em}
#contacts p#contacts-intro a {color:#f2836b; padding-right:21px; background:url('../img/external-link.png') no-repeat 100% 50%}
#contacts #email-wrapper .contact-box {display:block; margin:0 auto 1px; padding:.3em 1em; font-size:1em;color:#fff;	text-decoration:none}

#email {background:#63a69f;	color:#fff}
#skype {background:#f2836b;	color:#fff}
#skype-icon {display:inline-block; vertical-align:middle; background:url('../img/skype.png'); width:25px; height:25px; margin:0 10px 0 0}
#link-icon{display:inline-block; vertical-align:middle; background:url('../img/ex-link.png') center center no-repeat; width:25px; height:25px; margin:0 10px 0 0}
#mail-icon{display:inline-block; vertical-align:middle; background:url('../img/mail.png') center center no-repeat; width:25px; height:25px; margin:0 10px 0 0}
#email:hover{background-color:#83b9b3}
#skype:hover{background-color:#f6aa9a}
#social-wrapper{margin:2em auto 1em;width:178px;}
#social-wrapper a{margin-right:6px; width:53px; float:left; display:block; height:55px;text-indent:-999em;}
.rotate:hover {-moz-transform: rotate(80deg); -webkit-transform: rotate(80deg); -o-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transition: all .45s ease; -moz-transition: all .45s ease; -o-transition: all .45s ease; transition: all .45s ease;}
#facebook {background:url('../img/facebook.png') 0 -65px;}
#twitter {background:url('../img/twitter.png') 0 -65px;}
#dribble {background:url('../img/dribble.png') 0 -65px;}
#twitter-twit-box {position:relative; background:url('../img/overlay-background.png') 50% 0; margin:0 auto}
p#tweets {position:relative;	z-index:1;	margin:0;	padding:5px;	font-size:.9em}
#to-top-button {background: url("../img/arrow-up.png") no-repeat scroll 0 0 transparent; bottom:20px; height:40px; position: absolute; right: 20px; text-indent: -9999px; width: 40px; z-index: 200;}


.scroll-down{background: url("../img/arrow-down.png") no-repeat; clear:both; display:block; margin:20px auto 0 auto; width:40px;height:40px;}






/*2015*/

.front-works{ margin:0; padding:0; list-style:none; width:100%; position:relative;}
.front-works > li{ width:33.333%; float:left; padding:0; margin:0; overflow:hidden !important;}
.front-works > li > .thmb{width:100%; padding:2px; position:relative;}
.front-works > li img{ width:100%;}
.front-works > li a{ display:block;}

.front-works > li.count-1, .front-works > li.count-3, .front-works > li.count-5, .front-works > li.count-7{ height:388px!important;}
.front-works > li.count-2, .front-works > li.count-4, .front-works > li.count-6, .front-works > li.count-8{ height:193px!important;}

.boxinfo{display:none; position:absolute; top:2px; bottom:2px; left:2px; right:2px; padding:10px; background:#1b1b1b; background:rgba(27,27,27,0.8); z-index:2;}
.boxinfo a{text-decoration:none; color:#fff; width:100%; height:100%;}
.boxinfo a .table{ display:table; width:100%; height:100%;}
.boxinfo a .table .table-cell{ display:table-cell; text-align:center; vertical-align:middle; width:100%; height:150px;}
.boxinfo a h3{font-size:18px;margin:0; padding:0;}
.boxinfo a p{font-size:14px; margin:0; padding:0;}
.boxinfo hr{ margin:8px auto; padding:0; width:120px; border-color:#ddd;}



.shadow2{
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.20);
-moz-box-shadow:    0px 1px 1px 0px rgba(0, 0, 0, 0.20);
box-shadow:         0px 1px 1px 0px rgba(0, 0, 0, 0.20);
}

.shadow{background:#f1f1f1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: block;
    margin-bottom: 30px;
    padding: 15px 20px;
    position: relative;
}
.shadow:before,
	.shadow:after{
		position: absolute;
		bottom: 15px;
		left:  10px;
		z-index: -2;
		width: 50%;
		height: 100px;
		box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
		content: '';
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
	}

	.shadow:after {
		right: 10px;
		left: auto;
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		transform: rotate(3deg);
		-ms-transform: rotate(3deg);
	}
 

/**/
.detail{ padding:40px; float:left; width:30%; text-align:left;}
.detail p{ margin: 0 0 10px 0; padding:0}
.detail a{ color:#1b1b1b; display:block; text-decoration:none; margin-bottom:10px;}
.detail a.back{border:1px #1b1b1b solid; padding:5px 15px; display:inline-block}

.detail-right {float:left; width:70%; text-align:left; padding:40px;}
.detail-right img{max-width:100%}

@media only screen and (max-height:490px)  {
.header-part, #contacts, .mainbanner{ min-height:inherit!important; height:inherit!important}
.cell{ margin-top:0!important}	
}
@media (min-width:1024px) {
#more-content{position:relative;}
#contacts {height:350px; background-attachment:fixed; z-index:0;}
#contacts .container {width:100%; height:350px; position:fixed; bottom:0; left:0; z-index:0;
display:none;}
#contacts.disable-fixed .container {position:static; display:block}
#email-wrapper{ text-align:center; padding:20px 0}
#email-wrapper a{ width:33.33%; display:inline-block; float:left;}

}
@media (max-width:1024px) {
.expertise li, .work-container{width:50%;}
.expertise li:last-child {width:100%;}
}

@media (min-width:767px) {
	.expertise .services{ min-height:430px;}
}
@media (max-width:768px) {
.headerRight h1{ font-size:16px; line-height:22px}
.header-part, #contacts, .mainbanner{ min-height:inherit!important; height:inherit!important}
.cell{ margin-top:0!important}


ul#mcontainer{height:  inherit!important;}
.work-container, .expertise li, .front-works > li{width:100%!important; margin-bottom:10px;}
.front-works > li.count-1, .front-works > li.count-3, .front-works > li.count-5, .front-works > li.count-7, .front-works > li.count-2, .front-works > li.count-4, .front-works > li.count-6, .front-works > li.count-8{height:inherit!important; min-height:inherit!important; position: static!important;}

.boxinfo{display:block!important; position: static!important; top:0; left:0; background:rgba(27,27,27,0.8); z-index:2;}
.boxinfo a{text-decoration:none; color:#fff; width:100%; height:100%;}
.boxinfo a .table{ display:table; width:100%; height:100%;}
.boxinfo a .table .table-cell{ display:table-cell; text-align:center; vertical-align:middle; width:100%; height: auto;}
.boxinfo hr{ display:none;}


#email-wrapper a{ width:100%; float:none; clear:both;}
.detail-right, .detail {float:none; width:100%; text-align:left; padding:40px;}
	
.fxnav{width:100%;}
.nav{ float:none; width:100%; clear:both; text-align:center;}
.nav-logo{ float:none; width:100%; text-align:center; display:none;}
.mlogo{ background:url('../images/suresh-design.png') no-repeat center center; float:none; margin:0 auto}

.nav li a{padding:13px;}
.nav li.home-mobile{ display:inline-block!important;margin-bottom:-12px;}
.nav li.home-mobile a{ padding:0!important; margin-top:2px;}

.logo{background:url("../images/ux-web-designer-and-front-end-developer.png") no-repeat center center;}
#social-wrapper{text-align:center; padding:0; margin:0 auto 15px auto}
#social-wrapper a{ background-size:25px 57px; width:25px; height:26px; display:inline-block; float:none;}
#facebook {background:url('../img/facebook.png') 0 -31px;}
#twitter {background:url('../img/twitter.png') 0 -31px;}
#dribble {background:url('../img/dribble.png') 0 -31px;}
.cell, .mainbanner{ display:block!important}
.awards{ display:none!important}
.bg{background:rgba(20,21,36,1);}
}
@media (max-width:480px) {
.nav li a{ font-size:12px; padding:0px 5px!important; margin-top:15px!important;}
.nav li.home-mobile a{position:absolute; top:-11px; left:10px; }
/*.nav li.home-mobile a{ display:none}
.nav li:last-child{ display:none}*/
}
@media (max-width:440px) {
.logo{background:url("../images/ux-web-designer-and-front-end-developer-2x.png") no-repeat center center; background-size:170px 43px}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),	
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
.mlogo{ background:url('../images/suresh-design-2x.png') no-repeat center center; background-size:36px 36px}
.logo{background:url("../images/ux-web-designer-and-front-end-developer-2x.png") no-repeat center center; background-size:170px 43px}
#social-wrapper a{ background-size:25px 57px; width:25px; height:26px; display:inline-block; float:none;}
#facebook {background:url('../img/facebook.png') 0 -31px;}
#twitter {background:url('../img/twitter.png') 0 -31px;}
#dribble {background:url('../img/dribble.png') 0 -31px;}

}



@font-face {
    font-family: 'RobotoLight';
    src: url('fonts/roboto-light.eot');
    src: url('fonts/roboto-light.eot') format('embedded-opentype'),
         url('fonts/roboto-light.woff') format('woff'),
         url('fonts/roboto-light.ttf') format('truetype'),
         url('fonts/roboto-light.svg#RobotoLight') format('svg');
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('fonts/roboto-regular.eot');
    src: url('fonts/roboto-regular.eot') format('embedded-opentype'),
         url('fonts/roboto-regular.woff') format('woff'),
         url('fonts/roboto-regular.ttf') format('truetype'),
         url('fonts/roboto-regular.svg#RobotoRegular') format('svg');
}

@font-face {
        font-family: "Lato";
        src: url('fonts/204376221-LatoLig_0.eot');
        src: url('fonts/204376221-LatoLig_0.eot?#iefix') format('embedded-opentype'),
        url('fonts/204376221-LatoLig_0.svg#Lato') format('svg'),
        url('fonts/204376221-LatoLig_0.woff') format('woff'),
        url('fonts/204376221-LatoLig_0.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}