body {
background: #fafafa url(../images/body-light.html) 0 0 repeat;
}

.logo {
margin-top: 10px;
margin-right: 20px;
margin-left: 10px;
margin-bottom: 20px;
display: block;
width: 300px;
position:relative;
height: 55px;
border: 0px solid blue;
float: left;
}


.logo h1 {
font-size:30px;
}

.select-menu {
display: none;

}

/* NAV MENU */
#nav { margin-top:0px; float:right; margin-top:20px; } 
#nav li { position:relative; display:inline-block; margin:0 4px; } 
#nav > li:last-child { margin-right:0px; }  
#nav li a { position:relative; display:block; padding:17px; min-width:40px; text-align:center; font-size:13px; font-weight:400; z-index:300; color: #000;-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; }
#nav li a:hover, #nav li a.selected:hover, #nav li a.current { text-decoration:none; color:#fff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

/* menu level 2 */
#nav ul { display:none; position:relative; width:200px; z-index:310; margin:0; position:absolute; top:52px; left:0; padding: 10px 0 0 0; background-image: url(../images/nav-dropdown.html); background-position:18px 4px; background-repeat:no-repeat;color:#fff; }
#nav ul li { display:block; padding:0; margin:0; text-align:center; background: url(../images/texture-dark.html); }
#nav ul li a { text-align:left; padding:10px 18px; font-size:12px; border-color: #777;border-width: 1px 0 0 0;webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;border-style: dashed;text-shadow: 0 1px 0 #000;color: #bbb;position: relative;
display: block;min-width: 40px;font-weight: 400;
z-index: 300; }
#nav ul li a:hover { background:#000; }
#nav ul li:first-child a { border-top:none; }
#nav ul li:last-child a { border-bottom:none; }

/* menu level 3 */
#nav ul ul { top:0; left:auto; right:160px; padding:0 8px 0 0; background:url(../images/nav-dropdown-left.html) 160px 16px no-repeat; }

#nav li.active, #nav > li:hover, #nav ul li {
background: url(../images/texture-dark.html);
color:#fff;
}

#nav li.active a {
background: url(../images/texture-dark.html);
color:#fff;
}

#nav li a:hover, #nav li.active > a, #nav li a.selected:hover, #nav li a.current, #nav li a.selected, #nav li a.current-sub, .media-box .mask .title { color:#fff; text-shadow:0 1px 0 #000; }


/* SLIDER   
----------------------------------------------------------*/
.main-slider { margin-bottom:50px !important; }
.flex-container .flex-direction-nav li a { top:auto; bottom:6%; width:32px; height:32px; opacity:0; background-image: url(../images/slider-arrows.html); background-position: 0 0; background-repeat: no-repeat; }
.flex-container:hover .flex-direction-nav li a { opacity:1; }
.flex-container .flex-direction-nav li .next { right:0px; background-position:-32px -32px; }
.flex-container:hover .flex-direction-nav li .next { right:20px; }
.flex-container .flex-direction-nav li .next:hover { background-position:0 -32px; } 
.flex-container .flex-direction-nav li .prev { left:auto; right:72px; background-position:0 0; }
.flex-container:hover .flex-direction-nav li .prev { right:52px; }
.flex-container .flex-direction-nav li .prev:hover { background-position:-32px 0; }
input:focus, textarea:focus, .flex-container .flex-direction-nav li a, .input-append .send { background-color: #fff; }
.flex-container .flex-direction-nav li a:hover { background-color:#222; }
/* for 980px or less */

.banner_top {
border-color: #ccc;
border-width: 1px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: center;
margin-top:30px;
}

.banner_top h3 {
color: #555;
padding: 0 80px;
font-size: 25px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}


.middle_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: left;
margin-top:30px;
}

.middle_top h3 {
color: #555;
font-size: 25px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}


.services_item {
margin-top: 10px;
margin-bottom: 10px;

}

.services_item img {
display: block;
margin: 10px auto;
width: 64px;
height: 64px;
}

.services_item h3 {
font-weight: 400;
font-size: 14px;
color: #333;
text-align:center;
line-height: 150%;
margin-bottom: 10px;
text-rendering: optimizelegibility;
font: inherit;
vertical-align: baseline;
}

.services_item p {
text-align: justify;
line-height: 22px;
margin: 0 0 30px;
font-size: 13px;
}


.portfolio_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: left;
margin-top:80px;
}

.portfolio_top h3 {
color: #555;
font-size: 25px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}

.my_footer {
width: 100%;
padding-bottom: 50px;
border-top: 9px solid #898888;
border-bottom: 1px solid #898888;
background: url("../images/footer.html") repeat scroll 0 0 #1B1B1B;
float: left;
position: relative;
margin-top:100px;

}


.theme-icon {
width: 15px;
height: 15px;
float: left;
padding-right: 10px;
background: url("../images/sprites.html") no-repeat 0 0 transparent;
vertical-align: text-top;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}

.email {
background-position: -129px -22px;
}

.phone {
background-position: -215px -22px;
}

.home {
background-position: -38px -22px;
}

.source {
color: #909090;
padding-right: 10px;
text-transform: uppercase;
width: 60px;
padding-left: 10px;
}

.detail {
width: 150px;
float: right;
}

.detail a {
color: #B7B7B7 !important;
}

.widget {
width: 28%;
margin-left: 40px;
margin-top: 30px;
float: left;
}

.widget-contact {
width: 28%;
margin-left: 40px;
margin-top: 30px;
float: left;
}

.location {
font-family: Open Sans;
}

.location p {
color: #909090;
font-size: 12px;
font-family: lato;
line-height: 24px;
margin-top: -5px;
letter-spacing: 0.3px;
}

.location > ul {
color: #B7B7B8;
float: left;
font-size: 11px;
margin: 20px 0 0;
list-style: none;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
padding: 0;
}

.location > ul li {
border-top: 1px solid #393D3E;
display: inline-block;
line-height: 13px;
margin-bottom: 0;
padding: 13px 0;
width: 100%;
}

.location > ul li a {
text-decoration:none;
}


.location li:hover .home{
	background-position:-83px -22px;
	
}
.location li:hover .phone{
	background-position:-258px -22px;
}
.location li:hover .email{
	background-position:-174px -22px;
}

.footer-title-1 {
color: #ca1d4b;
font-family: Open Sans !important;
font-size: 20px;
font-weight: lighter;
font-weight: 600;
line-height: 20px;
margin: 0;
padding: 0 0 30px;
text-transform: uppercase;
}



.footer-title {
color: #FFFFFF;

font-family: Open Sans !important;
font-weight: lighter;
font-size: 20px;
font-weight: 600;
line-height: 20px;
margin: 0;
padding: 0 0 30px;
text-transform: uppercase;
}


.contact-form {

}


.contact-form input {
height: 35px;
width: 100%;
padding: 7px 20px;
border: 4px solid #515050;
color: #717171;
float: left;
font-size: 11px;
background: none repeat 0 0 #333232;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
margin-bottom: 10px;
line-height: 20px;
}


.contact-form textarea {
padding: 7px 20px;
width: 100%;
border: 4px solid #515050;
color: #717171;
float: left;
font-size: 11px;
background: none repeat 0 0 #333232;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
margin-bottom: 10px;
line-height: 20px;
}

.contact-form form .submit, .contact-form form .submit:focus {
padding: 5px 10px;
width: 30%;
border: 0 none;
color: #858585;
float: right;
font-size: 10px;
font-style: italic;
text-transform: uppercase;
background: none repeat 0 0 #363636;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}


.contact-form form .submit:hover {
background-color: #ca1d4b;
color:#fff;
}



.menu-footer-menu-container > ul {
border-left: 4px solid #141414;
border-top: 4px solid #141414;
float: left;
font-size: 12px;
list-style: none outside none;
margin: 0;
overflow: hidden;
text-transform: uppercase;
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
padding: 0;
}

.menu-footer-menu-container li {
    background:url("../images/footer-arrow.html") no-repeat scroll  85% center #2D2D2D;
    border-bottom:1px solid #4D4C4C;
    float:left;
    line-height:11px;
    padding:12px 20px;
    width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	
	-webkit-transition:all 0.3s ease 0.2s;
	-moz-transition:all 0.3s ease 0.2s;
	-ms-transition:all 0.3s ease 0.2s;
	-o-transition:all 0.3s ease 0.2s;
	transition:all 0.3s ease 0.2s;
}
.menu-footer-menu-container li:hover{
	background-color:#3b3a3a;
	-webkit-transition:all 0s ease 0s;
	-moz-transition:all 0s ease 0s;
	-ms-transition:all 0s ease 0s;
	-o-transition:all 0s ease 0s;
	transition:all 0s ease 0s;
	text-decoration:none;
}
.menu-footer-menu-container li a {
	float:left;
	width:100%;
    color:#909090;
	font-family:roboto;
	text-decoration:none;
}


.view a {
padding: 6px 22px;
text-shadow: 1px 1px 1px #6d6d6d;
background-color: #454545;
color: #fff;
font-style: italic;
vertical-align:top;
text-decoration: none;
box-shadow: inset 0px 0px 2px #fff;
-o-box-shadow: inset 0px 0px 2px #fff;
 -webkit-box-shadow: inset 0px 0px 2px #fff; 
-moz-box-shadow: inset 0px 0px 2px #fff;
font-size: 14px;
width:100px;
o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
border: 1px solid #4d4d4d;
border-radius: 3px;
-moz-border-radius: 3px;
}

.view a:hover {

border: 1px solid #363636;
background-image: -moz-linear-gradient(#454545, #656565);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#656565), to(#454545));
background-image: -webkit-linear-gradient(#454545, #656565);
background-image: -o-linear-gradient(#454545, #656565);
background-color: #656565;
o-transition: all 1.3s;
-moz-transition: all 1.3s;
-webkit-transition: all 1.3s;
-ms-transition: all 1.3s;
	
	
	}


.cntent {
overflow:hidden;
}


.cntent p {
line-height:22px;
padding:0 0 20px;
text-align:justify;
}

.cntentbox {
margin-bottom: 15px;
padding: 20px 50px 50px;
border: 1px solid #f8f8f8;
background-color: #f8f8f8;
box-shadow: 0 0 5px 0 rgba(178,178,178,0.75);
-moz-box-shadow: 0 0 5px 0 rgba(178,178,178,0.75);
-webkit-box-shadow: 0 0 5px 0 rgba(178,178,178,0.75);
position: relative;
z-index: 0;
text-align: center;
width: 100%;
}

.cntentbox-icon-box {
position:relative;
z-index:1;
width:161px;
height:161px;
display:inline-block;
background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(197,197,197)),
        color-stop(1, rgb(255,255,255))
        );
    padding:2px;
 border-radius:50%;
 -moz-border-radius:50%;
 -webkit-border-radius:50%;
margin-top: -109px;
margin-bottom: 35px;
}
.cntentbox-icon-box img {
margin-top: -1px;
padding: 2px;
}

.cntentbox h2 {
color: #4b4b4b;
font-size: 20px;
margin-bottom: 35px;
font-weight:bold;
text-transform:uppercase;
padding:0;

}

.cntentbox p {

margin-bottom: 30px;
line-height: 20px;
font-size: 12px;
text-align:center;

}




#mobile {
display:none;
}

.cntactpage {}
cntactpage h3 {font-size: 36px;
line-height: 36px;
margin: 0;}
.cntactpage .address {
margin-top: 20px;
font-size: 19px;
line-height: 29px;
}

.cntactpage .mobile {
margin-top: 20px;
font-size: 19px;
line-height: 29px;
}

.cntactpage .email {
margin-top: 24px;
margin-bottom:30px;
}

.cntactpage .email a {
color:#333;
font-size: 19px;
line-height: 29px;
padding-bottom: 3px;
text-decoration: none;
border-bottom: 1px solid #ca1d4b;
}


.contactform {
margin-right: 32px;
}

.contactform .input, #contacts .contactform textarea {
border: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 19px;
line-height: 29px;
padding: 5px;
margin-bottom: 20px;
color: #fff;
width: 100%;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-font-smoothing: antialiased;
}

.contactform textarea {
min-height: 200px;
border: 0;
background: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 19px;
line-height: 29px;
padding: 5px;
margin-bottom: 20px;
color: #fff;
width: 100%;
border: 1px solid transparent;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-font-smoothing: antialiased;
}

.contactform .button {
padding: 6px 22px;
text-shadow: 1px 1px 1px #6d6d6d;
background-color: #454545;
color: #fff;
font-style: italic;
vertical-align:top;
text-decoration: none;
box-shadow: inset 0px 0px 2px #fff;
-o-box-shadow: inset 0px 0px 2px #fff;
 -webkit-box-shadow: inset 0px 0px 2px #fff; 
-moz-box-shadow: inset 0px 0px 2px #fff;
font-size: 18px;
width:100%;
o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
border: 1px solid #4d4d4d;
border-radius: 3px;
-moz-border-radius: 3px;
}

.contactform .button:hover {
border: 1px solid #363636;
background-image: -moz-linear-gradient(#454545, #656565);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#656565), to(#454545));
background-image: -webkit-linear-gradient(#454545, #656565);
background-image: -o-linear-gradient(#454545, #656565);
background-color: #656565;
o-transition: all 1.3s;
-moz-transition: all 1.3s;
-webkit-transition: all 1.3s;
-ms-transition: all 1.3s;
}

<!--Portfolio-->

/* for 1100px or less */
@media screen and (max-width: 1100px) {

.cntentbox {
width: 280px;

}
.cntentbox-icon-box {
width: 120px;
height: 120px;
}

.col-md-3 {
width: 25%;
}
.widget {
width: 50%;
margin-left: 20px;
margin-top: 30px;
float: left;
}


.widget-contact {
width: 280px;
margin-left: 40px;
margin-top: 30px;
float: left;
}


}


@media screen and (max-width: 980px) {


.logo {
margin-top: 10px;
margin-right: 20px;
margin-left: 10px;
display: block;
width: 100%;
position:relative;
height: 55px;
text-align:center;
border: 0px solid blue;
float: left;
}

.logo h1 {
font-size:20px;
}

#nav { margin-top:0px; float:left; } 


.middle_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: center;
margin-top:30px;
}

.middle_top h3 {
color: #555;
font-size: 20px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}


.portfolio_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: center;
margin-top:50px;
}

.portfolio_top h3 {
color: #555;
font-size: 20px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}

.widget-contact {
width: 90%;
margin-left: 40px;
margin-top: 30px;
float: left;
}

.col-sm-4 {
width: 100%;
margin-top:90px;
margin-bottom: 10px;
}

.cntentbox {
width: 500px;
margin: 0 auto;
}

.cntentbox-icon-box  {
width: 120px;
height: 120px;
}

.cntentbox-icon-box img {
width: 120px;
height: 120px;
}

.widget {
width: 280px;
margin-left: 20px;
margin-top: 30px;
float: left;
}


}



/* for 700px or less */
@media screen and (max-width: 768px) {

.logo {
margin-top: 10px;
margin-right: 20px;
margin-left: 10px;
display: block;
width: 100%;
position:relative;
height: 55px;
text-align:center;
border: 0px solid blue;
float: left;
}



.col-sm-4 {
width: 100%;
margin-top:90px;
margin-bottom: 10px;
}

.cntentbox {
width: 300px;
}
.services_item p {
text-align: center;
margin-bottom: 20px;
line-height: 22px;
margin: 0 0 9px;
font-size: 13px;
}

.logo h1 {
font-size:20px;
}

.select-menu {
margin-bottom: 22px;
margin-top: 10px;
height: auto;
width: 100%;
padding: 5px 10px;
font-weight: 800;
text-transform: uppercase;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url(../images/select-bg.html);
background-position: right center;
background-repeat: no-repeat;
display: none;
color: #999;
border-color: #ddd;
border-width: 1px;
border-style: dashed;

}


#nav { display:none; }

#mobile {
background-color: #111;
box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
display: block;
margin-top:100px;

}

#mobile #toggle-bar {
	line-height:45px;
	background-color:#000000;
	width:98%;
	margin:0 auto;
}


#mmenu {margin: 0 auto;
padding: 0;
font-weight: 300;
width:98%;
font-size: 1em;
line-height: 1.5em;
font-family: "PT Sans", sans-serif, Helvetica, Arial;}
/*
Toggle button #1 ("Menu")
*/

#mobile strong a {
	margin-left:30px;
	border:1px solid #444;
	padding:10px;
	color:#fff;
	text-decoration:none;
}

/*
Toggle button #2 ("Navicon")
*/

#mobile .navicon {
	float: right;
	height: 28px;
	width: 34px;
	margin: 6px;
	font-size:0;
	background-image:url(../images/menu.html);
	background-repeat:no-repeat;
	background-position:right top;
}

#mobile ul li {
	clear:both;
	list-style:none;
}

#mobile ul li a {
	display:block;
	background-color:#300;
	text-transform:uppercase;
	letter-spacing:.2em;
	margin:2px 0;
	color:#fff;
	text-decoration:none;
	padding:6px 0 6px 8px;
}

#mobile ul ul {
	font-size:small;
}

#mobile ul ul li {
	margin-left:30px;
}

#mobile ul ul a {
	background-color:#333;
	padding-left:8px;
}

#mobile ul ul a:before {
	content: "\2192";
	padding-right:8px;
}

.banner_top h3 {
color: #555;
padding: 0 80px;
font-size: 20px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}


.middle_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: center;
margin-top:30px;
}

.middle_top h3 {
color: #555;
font-size: 20px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}


.portfolio_top {
border-color: #ccc;
border-width: 0px 0px 1px 0;
border-style: dashed;
padding-top: 0px;
padding-bottom: 12px;
margin-bottom: 24px !important;
text-align: center;
margin-top:50px;
}

.portfolio_top h3 {
color: #555;
font-size: 20px;
line-height: 134%;
font-weight: 300;
vertical-align: baseline;
}

.widget-contact {
width: 90%;
margin-left: 10px;
margin-top: 30px;
float: left;
}

.widget {
width: 90%;
margin-left: 10px;
margin-top: 30px;
float: left;
}



}



/* for 480px or less */
@media screen and (max-width: 480px) {


.logo {
margin-top: 10px;
margin-right: 20px;
margin-left: 10px;
display: block;
width: 100%;
position:relative;
height: 55px;
text-align:center;
border: 0px solid blue;
float: left;
}

.logo h1 {
font-size:20px;
}

.menu {
display: inline-block;
margin-bottom: 22px;
margin-top: 10px;
height: auto;
width: 100%;
padding: 5px 10px;
font-weight: 800;
text-transform: uppercase;
border-color: #ddd;
border-style: dashed;
border-width: 1px;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url(../images/select-bg.html);
background-position: right center;
background-repeat: no-repeat;
}


#nav { display:none; }

.col-sm-4 {
width: 100%;
margin-top:90px;
margin-bottom: 10px;
}

.cntentbox {
width: 260px;
}


}