@charset "utf-8";
/* CSS Document */

/***** Import Reset File *****/

@import url("reset.css");

/***** General *****/

html, body {margin:0px; padding:0px;font-family: 'Lato', sans-serif; font-weight:200; color:#394c5e; text-align:left; height: 100%; background:#f8f8f8 url(../images/bg-body-square.png);}
.wrappage { width:100%; height: 100%;margin:0 auto; padding:0; position:relative;}
.container{ width:960px; margin:0 auto; position:relative;}
.left { float:left;}
.right {float:right;}
.center{ text-align:center;}
.divider{ width:100%; min-height:1px; margin:0;  display:inline-block;}
.no-float{ float:none;}
a, img , button { outline: none; }
/* http://sonspring.com/journal/clearing-floats */
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
}
button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
border: 0;
}

/***** Typography & Element *****/

h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:16px;}
h6 {font-size:14px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight:200;}
p {font-size:15px; height:auto;line-height: 1.4em; padding:0; margin:0; font-weight:200;}
.image-left {float: left;margin: 5px 20px 0 0;}
.image-right {float: right;margin: 5px  0 0 20px;}
a { color:#f14a29;}

/***** Header *****/

header {margin:0; position:fixed; top:0; left:0; z-index:999; width:100%; padding:0;font-family: 'Lato', sans-serif; font-weight:200;background:#f8f8f8 url(../images/bg-body-square.png);}
.strip_line {height:1px; background:#f14a29;}
.info_top { background:url(../images/info_img.png) top left no-repeat;}
.info_top li{padding:5px 0;height:22px; font-size:14px; width:590px; text-align:center; font-weight:200; line-height:18px;}
.strip_bottom{border-bottom:1px #e4e4e4 solid;}
.strip_top{border-top:1px #e4e4e4 solid;}
#fade {display: none; background: #394c5e; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 900;}
#contact_section,#close_cont{ display:none;  z-index:999;}
.contact_section div { margin-left:0;}
#head_side{ padding-bottom:20px;}
#google_map{height: 365px;width: 460px;margin: 20px 0;}

/***** Contact Form *****/

.style-form{ padding:20px 0 0 0;}
.style-form h3{ padding:0 0 20px 0; font-weight:200;}
#style-form{ margin:0; padding:0; position:relative;}	
.wrapper-block label{ padding:0; display:block;text-align:left; width:120px; float:left; font-size:20px; font-weight:200; }
.small-label{ display:block; font-size:13px; font-weight:normal; text-align:left; width:120px; line-height:10px; color:#f14a29; padding:5px 0 0 0;}
.wrapper-block [type="text"]{ font-size:15px; padding:10px 4px; border:solid 1px #748493; width:300px; margin:2px 0 20px 10px; background: url(../images/tr-png-w.png);}
.wrapper-block textarea{ padding:10px 4px; border:solid 1px #748493; width:300px; margin:2px 0 20px 10px; font-size:15px; overflow:hidden;}
input.btn-form{ width:310px; margin:0 0 5px 130px; padding:10px 20px; display:inline-block; font-size:20px; border:none; background:#f14a29; color: #f8f8f8;cursor:pointer;font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase;}
input.btn-form:hover{ background:#394c5e;}
#form .error-input {border-color: #f14a29;}
.sending{margin:0; padding:3px;font-size:15px; display:none; position:absolute; bottom:10px; right:20px; color:#ffffff;}
.mess {display: none; padding:40px 0 40px 0;}
.mess h5{ font-weight:400; padding:10px;}

/***** Sliders / Slogan*****/

#sliders{ height:400px;}
.nivo-caption{ left:-960px;}
.slogan_top h1{ text-align:center; font-family: 'Lato', sans-serif; font-weight:200; padding:0 0 40px 0; margin:0; font-size:24px;}
.slogan_top h1 a { font-weight:200;}
.services-entry { padding:20px 0 0 0;}
.services-entry li { width:217px; height:100px; float:left; margin-right:20px; position:relative;}
.services-entry li a{ width:217px; height:100px; text-align:center; text-transform:uppercase; background:#f14a29; bottom:-150px; position:absolute; cursor:pointer; display:block;}
.services-entry li a h3{ font-weight:200; color:#ffffff; padding:35px 0 0 0; text-shadow:1px 1px 2px #777777;}
.services-entry li a.last,.services-entry li.last{ margin-right:0;}
.services-entry li a.no-active{ background:#394c5e;}
.services-entry li span.go{ padding:0; display:block; position:absolute; bottom:15px; right:15px; color:#ffffff; z-index:10; font-size:20px;}
.services-entry li a .active { position:absolute; top:50px; left:110px; width:0px; height:0px; margin:0px; background:#f14a29;}

/***** Social link*****/

ul.socicon {margin:0;}
ul.socicon li{ display:block; padding:0; margin:0 1px 0 0; float:left;}
ul.socicon li a{ width:32px; height:32px; display:block; padding:0; margin:0; border-top:none;}
ul.socicon li a.dribbble { background:#f14a29 url(../images/social/dribbble.png) 0 0 no-repeat;}
ul.socicon li a.facebook { background:#f14a29 url(../images/social/facebook.png) 0 0 no-repeat;}
ul.socicon li a.twitter { background:#f14a29 url(../images/social/twitter.png) 0 0 no-repeat;}
ul.socicon li a.flickr { background:#f14a29 url(../images/social/flickr.png) 0 0 no-repeat;}
ul.socicon li a.linkedin { background:#f14a29 url(../images/social/linkedin.png) 0 0 no-repeat;}
ul.socicon li a.vimeo{ background:#f14a29 url(../images/social/vimeo.png) 0 0 no-repeat;}
ul.socicon li a.google{ background:#f14a29 url(../images/social/google.png) 0 0 no-repeat;}
ul.socicon li a.dribbble:hover { background:#f038c7 url(../images/social/dribbble.png) 0 0 no-repeat;}
ul.socicon li a.facebook:hover { background:#3b5997 url(../images/social/facebook.png) 0 0 no-repeat;}
ul.socicon li a.twitter:hover { background:#a6dee8 url(../images/social/twitter.png) 0 0 no-repeat;}
ul.socicon li a.flickr:hover { background:#f61697 url(../images/social/flickr.png) 0 0 no-repeat;}
ul.socicon li a.linkedin:hover { background:#56a1c4 url(../images/social/linkedin.png) 0 0 no-repeat;}
ul.socicon li a.vimeo:hover{ background:#c6e3f9 url(../images/social/vimeo.png) 0 0 no-repeat;}
ul.socicon li a.google:hover{ background:#4176e3 url(../images/social/google.png) 0 0 no-repeat;}
ul.socicon li a.contact{ width:70px; padding:5px;height:22px; color:#f8f8f8;background:#f14a29; text-align:center; text-transform: lowercase; font-size:16px; line-height:16px;}
a#close_contact{color:#ffffff;}
a#close_contact:hover{background:#ffffff;color:#f14a29;}
ul.socicon li a.contact:hover{background:#ffffff;color:#f14a29;}
ul.socicon li a.contact.grey{color:#f8f8f8;background:#f14a29;}
ul.socicon li.last{ margin-right:0;}

/***** Main Nav *****/

a.logo{ height:70px; display:block; margin:20px 0 0 0; }
.main-navigation { margin:40px 0 0 0; padding:0 0 5px 0; list-style:none; float: right;}
.main-navigation li { margin:0 20px 0 0; display:inline; }
.main-navigation li a{ padding:0 0 3px 0; text-decoration:none;text-transform: uppercase; color:#394c5e;  font-size:14px;text-align: center; font-weight:200; }
.main-navigation li a:hover{border-bottom:1px #f14a29 solid; }
.main-navigation li a.current {border-bottom:1px #f14a29 solid;}
.main-navigation li.last{ margin-right:0;}

/***** Section *****/

section {padding-top:175px;}
.section-wrapper{margin-bottom:700px;}
.header{ margin-bottom:25px; padding-bottom:30px;border-bottom:1px #e4e4e4 solid;}
.header h1{ margin:0 0 0 -300px; padding:0 20px 0 0; line-height:36px; text-transform: uppercase; font-family: 'Lato', sans-serif;font-weight:200; font-size:44px;border-right:2px #f14a29 solid; display:block; float:left;}
.header p{ margin:-100px 0 0 0; padding:0 0 0 20px; line-height:30px;font-family: 'Lato', sans-serif;font-weight:200; font-size:18px; display:block; float:left; font-style:italic; text-align:center;}
section#top{ padding:175px 0 0 0;}
#features.section-wrapper{margin-bottom:100px;}

/***** Portfolio *****/

ul#portfolio-filter{ margin-bottom:20px; padding: 0;float:left; }
ul#portfolio-filter li{ display: inline; margin:0 5px 0 0; float:left;}
ul#portfolio-filter a{ margin-right:0; padding:3px 10px;display:block;font-size: 11px; text-align:center; text-decoration: none; text-transform:uppercase; color:#949292;font-family: 'Lato', sans-serif;font-weight:400; }
ul#portfolio-filter a:hover {  color:#f14a29; }
ul#portfolio-filter li a.currents{ background:#f14a29; color: #f8f8f8;}
ul#portfolio-filter li.loading-item {width:16px;height:18px;background:#fff url(../images/loading.gif) no-repeat 0 2px;display:none;}
#containment-portfolio {position:relative;display:inline-block;}
#containment-portfolio li .block-zoom{ width:190px; height:210px; padding:20px; position: absolute; left:0; top:-400px; background: url(../images/tr-png-w.png); opacity:0; z-index:99; text-align:left;}
#containment-portfolio li .block-zoom p{ font-size:12px;margin:0 0 10px 0;}
#containment-portfolio li .block-zoom h5{ margin:0 0 10px 0; font-weight:400;}
#containment-portfolio li a.zoom {width:30px; height:30px;background:#e4e4e4 url(../images/zoom-icon.png) no-repeat top center; position:absolute; bottom:10px; left:10px; z-index:999;}
#containment-portfolio li a.link{width:30px; height:30px;background:#e4e4e4 url(../images/link.png) no-repeat top center; position:absolute; bottom:10px; left:50px;; z-index:999;}
#containment-portfolio li a.read_m{ width:70px;  background:#394c5e; padding:8px 10px; font-size:12px;position:absolute; bottom:10px; right:10px;; z-index:999; color:#ffffff; display:block; text-align:center; text-transform:uppercase;}
.portfolio-item {width:230px;height:250px;border-bottom:1px solid #f14a29;float:left;display:inline-block;margin:0 2px 20px 0;text-align:center; position:inherit;}
.portfolio-item img {float:left;width:230px;height:170px;}
.portfolio-item .info-item{float:left;text-align:center;width:230px;}
.info-item h4{margin:15px 0 0 0;font-family: 'Lato', sans-serif; font-weight:200;}
.info-item p{margin:5px 0 0 0;font-family: 'Lato', sans-serif; font-weight:200; font-style:italic; font-size:13px;}
.item_block{ display:inline-block; position:relative; padding:0 0 20px 0;}
.item_block .close { display:block; position:absolute; top:0; right:0; width:21px; height:20px; margin:0; color:#ffffff; background:#f14a29 url(../images/close.png) 50% 50% no-repeat ; font-size:12px; text-transform:uppercase; cursor:pointer;}
.item_block div{ margin-left:0;}
ul.porto-entry{font-family: 'Lato', sans-serif; padding:0 0 0 10px;}
ul.porto-entry li { margin:0 0 20px 0;}
ul.porto-entry h3,ul.porto-entry h4  { margin:10px 0 5px 0;font-weight:200; text-transform:uppercase;}
ul.porto-entry h3 { margin:0 0 5px 0;}
ul.porto-entry p { font-size:13px; font-style: italic;}
ul.porto-entry a { font-size:13px; font-style: italic;}

/***** Gallery *****/

ul#gallery-filter{ margin-bottom:20px; padding: 0;float:left; }
ul#gallery-filter li{ display: inline; margin:0 5px 0 0; float:left;}
ul#gallery-filter a{ margin-right:0; padding:3px 10px;display:block;font-size: 11px; text-align:center; text-decoration: none; text-transform:uppercase; color:#949292;font-family: 'Lato', sans-serif;font-weight:400; }
ul#gallery-filter a:hover {  color:#f14a29; }
ul#gallery-filter li a.currents{ background:#f14a29; color: #f8f8f8;}
#containment-gallery {position:relative;display:inline-block;}
#containment-gallery li .block-zoom{ width:190px; height:130px; padding:20px; position: absolute; left:0; top:-400px; background: url(../images/tr-png-p.png); opacity:0; z-index:99; text-align:left;}
#containment-gallery li a.zoom {width:230px; height:170px;background:url(../images/zoom-icon-gal.png) no-repeat 50% 50%; position:absolute; top:0px; left:0px; z-index:999;}
#containment-gallery li a.zoom-v {width:230px; height:170px;background:url(../images/zoom-icon-gal-v.png) no-repeat 50% 50%; position:absolute; top:0px; left:0px; z-index:999;}
.gallery-item {width:230px;height:250px;border-bottom:1px solid #f14a29;float:left;display:inline-block;margin:0 2px 20px 0;text-align:center; position:inherit;}
.gallery-item img {float:left;width:230px;height:170px;}
.gallery-item .info-item{float:left;text-align:center;width:230px;}
.info-item h4{margin:15px 0 0 0;font-family: 'Lato', sans-serif; font-weight:200;}
.info-item p{margin:5px 0 0 0;font-family: 'Lato', sans-serif; font-weight:200; font-style:italic; font-size:13px;}

/***** Blog *****/

ul.blog{ margin:10px 0 0 0;}
ul.blog .date-comments{width:454px; margin:0 0 10px 0; font-size:14px;border-top:1px #e4e4e4 solid;border-bottom:1px #e4e4e4 solid; padding:10px 0;}
ul.blog .date-comments a{ background:url(../images/comments.png) 0 0 no-repeat; padding:0 0 0 45px;color:#394c5e;}
ul.blog li{ width:454px; float:left; margin:0 20px 35px 0;}
ul.blog li.last{ margin-right:0;}
ul.blog li p{ margin:0 0 20px 0 ;}
ul.blog li h3 a{ margin:15px 0 10px 0; color:#394c5e; display:block;}
ul.blog li h3 a:hover,ul.blog .date-comments a:hover,ul.blog li .posted a:hover{ color:#f14a29;}
ul.blog li .posted{ width:454px; font-size:13px; margin:15px 0 0 0; padding:10px 0; display:inline-block; border-bottom:1px #e4e4e4 solid;border-top:1px #e4e4e4 solid;}
ul.blog li .posted a{color:#394c5e;}
ul.blog li .readmore{ font-size:15px; margin:10px 0 0 0;}

/***** About *****/

.about-section { font-weight:200; padding: 0;}
.about-section h3{ font-weight:200; margin:0 0 10px 0;}
.about-section h4{ font-weight:200; margin:0 0 5px 0;}
.about-section p{ margin:0 0 20px 0;}
.about-section div{ margin-right:0;}
.team{ width:612px; margin:0;}
.team-section{padding:0;}
.team-section li { width:296px; margin:0 20px 0 0;float:left; position:relative;}
.team-section li.last{ margin-right:0;}
.team-section li ul#team-section li { width:136px; height:136px; margin:0 20px 20px 0; background:#748493; float:left; padding:1px; cursor:pointer; position:relative;}
.team-section li ul#team-section li.active { background:#f14a29;}
.team-section li ul#team-section li.no-active { background:#d1d1d1;}
.team-section li ul#team-section li .more { background:#394c5e; padding:3px 5px; cursor:pointer; position:absolute; bottom:3px; right:3px; font-size:12px; z-index:10px; color:#ffffff; display:none;}
.team-section li ul#team-section li.last{ margin-right:0;}
.team-user{ display:none; position:absolute; top:0; left:0; z-index:90;}
.team-user .close{ display:block; position:absolute; top:0; right:0; width:21px; height:20px; margin:0; color:#ffffff; background:#d1d1d1 url(../images/close.png) 50% 50% no-repeat ; font-size:12px; text-transform:uppercase; cursor:pointer; z-index:91}
.team-user ul.socicon {margin:0;}
.team-user ul.socicon li{ width:32px; height:32px; display:block; padding:0; margin:0 1px 0 0; float:left;}
.team-user ul.socicon li a{ width:32px; height:32px; display:block; padding:0; margin:0; border-top:none;}
.team-user ul.socicon li a.dribbble { background:#394c5e url(../images/social/dribbble.png) 0 0 no-repeat;}
.team-user ul.socicon li a.facebook { background:#394c5e url(../images/social/facebook.png) 0 0 no-repeat;}
.team-user ul.socicon li a.twitter { background:#394c5e url(../images/social/twitter.png) 0 0 no-repeat;}
.team-user ul.socicon li a.flickr { background:#394c5e url(../images/social/flickr.png) 0 0 no-repeat;}
.team-user ul.socicon li a.linkedin { background:#394c5e url(../images/social/linkedin.png) 0 0 no-repeat;}
.team-user ul.socicon li a.vimeo{ background:#394c5e url(../images/social/vimeo.png) 0 0 no-repeat;}
.team-user ul.socicon li a.google{ background:#394c5e url(../images/social/google.png) 0 0 no-repeat;}
.team-user ul.socicon li a.dribbble:hover { background:#f038c7 url(../images/social/dribbble.png) 0 0 no-repeat;}
.team-user ul.socicon li a.facebook:hover { background:#3b5997 url(../images/social/facebook.png) 0 0 no-repeat;}
.team-user ul.socicon li a.twitter:hover { background:#a6dee8 url(../images/social/twitter.png) 0 0 no-repeat;}
.team-user ul.socicon li a.flickr:hover { background:#f61697 url(../images/social/flickr.png) 0 0 no-repeat;}
.team-user ul.socicon li a.linkedin:hover { background:#56a1c4 url(../images/social/linkedin.png) 0 0 no-repeat;}
.team-user ul.socicon li a.vimeo:hover{ background:#c6e3f9 url(../images/social/vimeo.png) 0 0 no-repeat;}
.team-user ul.socicon li a.google:hover{ background:#4176e3 url(../images/social/google.png) 0 0 no-repeat;}

/***** Skills *****/

#skill-diagram {height: 300px;width: 300px;padding:0;}
.get{ display:none;}


/***** Services *****/

ul.services{ margin:10px 0 0 0;}
ul.services li{ width:454px; float:left; margin:0 20px 35px 0;}
ul.services li.last{ margin-right:0;}
ul.services li h3{ margin:0 0 5px 0;}


/***** Footer *****/

footer{height:50px; margin:40px auto 0 auto; padding:10px 0 0 0; text-align:center;}
.tweets-team { padding:17px 0 0 0;}
.tweets{width:800px; height:44px; padding:0 0 0 50px; background:url(../images/tweets.png) 0 -2px no-repeat; font-size:12px; line-height:16px; overflow:hidden;}
.tweets ul li,.tweets p {font-size:12px; line-height:16px;color:#657089;}
.tweets ul li a{font-style:italic; font-weight:bold;font-size:12px;color:#657089;}

/***** Back to Top *****/

#toTop{ display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(../images/ui.totop.png) no-repeat left top; }
#toTopHover{ background:url(../images/ui.totop.png) no-repeat left -50px; width:50px; height:50px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus{ outline:none; }

.features p{ margin:0 0 20px 0;}
.features h3{ margin:0 0 30px 0;}
.features h4{ margin:0 0 20px 0;}
.features .strip_line{height:1px; background:#e4e4e4;margin:0 0 30px 0;}

/***** Button *****/

.button{margin: 0 0 10px;display: inline-block;padding: 12px 20px 12px;color: #ffffff;font-size: 13px;text-transform: uppercase;text-decoration: none;outline: none;cursor: pointer;background: #394c5e;}
.button:hover, .button:focus{color: #ffffff;text-decoration: none;outline: none;background: #f14a29;}
.button:active{color: #ffffff;text-decoration: none;outline: none;}
.button.small{padding: 8px 10px 8px;font-size: 12px;line-height: 12px;}
.button.large{padding: 16px 25px 16px;font-size: 16px;line-height: 16px;}
.button.biglarge{padding: 20px 30px 20px;font-size: 20px;line-height: 20px;}
.rounded{-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;}
.orange { background: #f14a29;}
.button.orange:hover { background: #394c5e;}

/***** List style *****/

ul.circle li{padding: 0 0 1px 14px;background: url(../images/circle.png) no-repeat left 2px;list-style: none outside none;font-size:13px;}
ul.square li{padding: 0 0 1px 14px;background: url(../images/square.png) no-repeat left 2px;list-style: none outside none;font-size:13px;}
ul.bullet li{padding: 0 0 1px 14px;background: url(../images/bullet.png) no-repeat left 2px;list-style: none outside none;font-size:13px;}
ul.arrow li{padding: 0 0 1px 14px;background: url(../images/arrow.png) no-repeat left 2px;list-style: none outside none;font-size:13px;}

/***** Message Boxes *****/

.message-box{position: relative;margin: 0 0 20px;padding: 10px 20px;font-size: 14px;line-height: 1.2em;border-width: 1px;border-style: solid;}
.message-box .closemsg{position: absolute;display: block;width: 9px;height: 10px;right: 12px;top: 14px;background-position: 0 0;background-repeat: no-repeat;cursor: pointer;}
.message-box.info{background-color: #dff2fa;color: #2e7893;border-color: #85cfec;}
.message-box.info .closemsg{background-image: url(../images/close-info.png);}
.message-box.note{background-color: #f8f2cb;color: #8f5c0b;border-color: #edca42;}
.message-box.note .closemsg{background-image: url(../images/close-note.png);}
.message-box.confirm{background-color: #e5f2c0;color: #4a630e;border-color: #aacf49;}
.message-box.confirm .closemsg{background-image: url(../images/close-confirm.png);}
.message-box.error{background-color: #ffd4d4;color: #cd0a0a;border-color: #d97676;}
.message-box.error .closemsg{background-image: url(../images/close-error.png);}

/***** Accordion / Toggle *****/

.open-block-acc {float: left;width: 100%;padding: 10px 0 10px 0;margin:0 0 5px 0;background:#394c5e url(../images/open-close.png) 97% 10px no-repeat;cursor:pointer;}
.open-block-acc span {padding-left: 15px; color:#FFFFFF;}
.open-block-acc.active {background:#f14a29 url(../images/open-close.png) 98% -30px no-repeat;}
.accordion-box {float: left;padding: 10px;}
.toggle-block {float: left;width: 100%;margin:0 0 5px 0;}
.open-block a {display: block;padding: 10px 10px 10px 15px;text-decoration: none;background:#394c5e url(../images/open-close.png) 97% 10px no-repeat; color:#FFFFFF;}
.open-block.active a { background:#f14a29 url(../images/open-close.png) 98% -30px no-repeat;}
.toggle-box {float: left;padding: 10px;}

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.services-entry { display:none; }
	 header {margin:0 auto; position: absolute;}
	.main-navigation { text-align:center; margin:0;}
	.main-navigation li { margin:0 20px 10px 0; display: inline-block; float:none; }
	.info_top li{width:50%px;}
	.slogan_top h1 { display:none;}
	
	
}