* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box;  }
@font-face { font-family: 'BebasRegular'; src: url('../fonts/bebas.eot'); src: url('../fonts/bebas.eot') format('embedded-opentype'),  url('../fonts/bebas.woff2') format('woff2'),  url('../fonts/bebas.woff') format('woff'),  url('../fonts/bebas.ttf') format('truetype'),  url('../fonts/bebas.svg#BebasRegular') format('svg'); }
@font-face {
    font-family: 'BowlbyOneRegular';
    src: url('../fonts/bowlbyoneregular.eot');
    src: url('../fonts/bowlbyoneregular.eot') format('embedded-opentype'),
         url('../fonts/bowlbyoneregular.woff2') format('woff2'),
         url('../fonts/bowlbyoneregular.woff') format('woff'),
         url('../fonts/bowlbyoneregular.ttf') format('truetype'),
         url('../fonts/bowlbyoneregular.svg#BowlbyOneRegular') format('svg');
}

@font-face {
    font-family: 'pompiere_regular';
    src: url('../fonts/pompiere-regular-webfont.eot');
    src: url('../fonts/pompiere-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pompiere-regular-webfont.woff2') format('woff2'),
         url('../fonts/pompiere-regular-webfont.woff') format('woff'),
         url('../fonts/pompiere-regular-webfont.ttf') format('truetype'),
         url('../fonts/pompiere-regular-webfont.svg#pompiere_regular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body { background: #fff; font-size: 13px; font-family: 'Roboto', sans-serif; color: #0b0b0b; line-height: 20px; width: 100%; overflow-x: hidden; margin: 0px; padding: 0px; }
.transition, .transition:before, .transition:after, .transition:hover {transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
ul { list-style: none; }
a { color: #014858; text-decoration: none; font-size: 11px; transition: all 0.3s ease-out 0s; }
input, button { transition: all 0.3s ease-out 0s; }
input:focus { box-shadow: none; outline: none; }
a:focus { outline: none; }
a:hover { color: #333; }
h1 { text-transform: uppercase; font-weight: normal; font-size: 18px; }
h2 { text-transform: uppercase; font-weight: normal; font-size: 16px; }
h3 { text-transform: uppercase; font-weight: normal; font-size: 15px; }
img { border: none; outline: 0; vertical-align: middle; }
.wraper { width: 100%; margin: auto; }
.wraper:after { clear: both; display: block; content: ""; }
#header { min-height: 115px; position:fixed; top:0; left:0; width: 100%; background-image: url(../images/header_bg.jpg); background-repeat: repeat-x; background-color: #ffffff; background-position: bottom center; /*position:fixed; top:0;*/ z-index:2; }
.logo { display: inline-block; padding: 20px; }
.clear { clear: both; }
.header_rgt { float: right; position:relative; padding: 20px; text-align: right; width: 75%; }
.menu { display:inline-block; position:absolute;  right: 110px; top: 38px; width: 100%;vertical-align: middle; }
.menu li { display: inline-block; padding: 5px 15px; }
.menu li a { font-family: 'BebasRegular'; color: #7a7a7a; padding-bottom: 5px; font-size: 18px; background-position: center center;line-height: 28px; display:block; }
.menu li a:hover, .menu li a.active { color: #60186b; background-image: url(../images/menu_bar.png); background-repeat: no-repeat; background-position: bottom center; }
.menu_icon { padding: 13px 0; }
#menu_click { background-color: #88cd3d; display: inline-block; padding: 15px 0; text-align: center; width: 60px; }
#menu_click i { color: #fff; font-size: 30px; }
#home_page {  background-image: url(../images/home_page.jpg); background-repeat: no-repeat; background-position: 0 115px; background-size: cover; height: 100%; }
#company_page {  background-image: url(../images/company.jpg); background-repeat: no-repeat; background-position: 0 115px; background-size: cover; height: 100%; }
#members-bg { background-image: url(../images/members_bg.jpg); background-repeat: no-repeat; background-position: 0 115px; background-size: cover; height: 100%; }
#work-bg{ background-image: url(../images/work-bg.jpg); background-repeat: no-repeat; background-position: 0 115px; background-size: cover; height: 100%; }
#customers-bg{ background-image: url(../images/customers-bg.jpg); background-repeat: no-repeat;  background-position: 0 115px; background-size: cover; height: 100%; }
#contact-bg{ background-image: url(../images/contact-bg.jpg); background-repeat: no-repeat;  background-position: 0 115px; background-size: cover; height: 100%; }
#blog-bg{ background-image: url(../images/blog-bg.jpg); background-repeat: no-repeat;  background-position: 0 115px; background-size: cover; height: 100%; }

.section{ width:100%; max-width:630px;}
.big_txt{font-family: 'BowlbyOneRegular'; font-size:72px; color:#60186b; line-height:80px; text-transform:uppercase;}
.big_txt span{ color:#88cd3d;}
#home_page .section{ position:absolute; bottom:5%; left:2%;}

#company_page .section{ max-width:725px; margin-top:244px; background-color:rgba(96,24,106,0.8); margin-left:5%; float:left;}
#work-bg .section{ max-width:725px; margin-top:244px; background-color:rgba(96,24,106,0.8); margin-left:5%; float:left;}
#customers-bg .section{ max-width:780px; margin-top:244px; background-color:rgba(96,24,106,0.8); margin-left:5%; float:left;}
#blog-bg .section{ max-width:70%; margin-top:244px; margin-right:15%; background-color:rgba(96,24,106,0.8); margin-left:15%; float:left; padding-bottom:20px; margin-bottom:100px;}

#contact-bg .section{ max-width:780px; margin-top:244px; background-color:rgba(96,24,106,0.8); margin-left:5%; float:left;}

.title{ letter-spacing:1px; font-family: 'BebasRegular'; font-size:36px;color:#88cd3d; text-transform:uppercase;}
.title_icon{ margin-top:-10px; margin-left:10px; margin-right:30px;}
.dis{font-family: 'BowlbyOneRegular'; font-size:30px; line-height:36px; padding:20px; color:#fff; text-transform:uppercase;}
.roboto_m{font-family: 'Roboto', sans-serif;font-size:20px; line-height:30px;}


#members-bg .section{ max-width:90%; margin-top:244px; margin-right:5%; background-color:rgba(96,24,106,0.8); margin-left:5%; float:left; padding-bottom:100px;}
ul.member-profile{  width:100%; float:left;}
ul.member-profile li{ float:left; padding:31px 23px; color:#fff; font-size:18px; line-height:30px; font-family: 'Roboto', sans-serif; font-weight:400; text-transform:uppercase; width:48%; }
ul.member-profile li h2{padding-bottom:29px; font-family: 'BowlbyOneRegular'; color:#fff; font-size:30px;}
.member-photo:after{ background:#88cd3d; position:absolute; left:0; height:5px; top:-5px; content:""; width:100px; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.member-photo:before{ background:#88cd3d; position:absolute; right:0; height:5px; bottom:-5px; content:""; width:100px; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.member-photo{ float:left; width:220px; position:relative; margin-right:25px; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.member-txt{}
.member-main{ width:100%; float:left;}
.social-link{ padding-top:15px; width:100%; float:left;}
.social-link a i{ line-height:30px; width:30px; height:30px; text-align:center; font-size:20px; color:#fff; background:#88cd3d; display:block; margin-right:3px; float:left; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.social-link a i:hover, .social-link a i:focus{ background:#fff; color:#88cd3d;}
.member-photo:hover img{ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */}
.member-photo:hover:after{ width:100%; }
.member-photo:hover:before{  width:100%;}

.beefup-head { cursor: pointer; margin-bottom: 0; overflow: hidden; padding-right: 30px; line-height:60px; position: relative; text-overflow: ellipsis; white-space: nowrap; color:#fff; font-size:30px;  font-family: 'BowlbyOneRegular';}
.beefup-head:after { content: ""; position: absolute; right: 0; height:28px; margin-top: -13px; top: 50%; width:28px; background:url(../images/arrow-right.png) no-repeat;  }
.open > .beefup-head:after { background:url(../images/arrow-bottom.png) no-repeat; width:28px; height:28px; }
.work{ padding:40px 55px 55px 100px; float:left; width:100%;}
.beefup-body { padding: 10px 0 30px 0; }
.beefup-body h4{ color:#fff; font-size:24px; line-height:30px; font-weight:700; text-transform:uppercase;}
.beefup-body p{color:#fff; font-size:20px; line-height:30px; font-size:400; text-transform:uppercase;}
.beefup1{ min-height:50px; overflow:hidden;}

.work-bg{ background:#88cd3d; position:relative; float:left;  color:#fff; font-size:24px; line-height:36px; font-family: 'pompiere_regular'; width:100%; padding:40px 15px 30px 15px; text-transform:uppercase;}
.work-bottom{ width:660px; bottom:0; right:87px; position:fixed; }
.work-btn{background:none; border:none; padding:0; margin:0; position:absolute; top:-58px; left:-5px; cursor:pointer;}

ul.customer-logo{ padding:10px 0; width:100%; float:left;}
ul.customer-logo li{ position:relative; float:left; margin-left:10px; margin-bottom:23px;}
ul.customer-logo li:after{ height:5px; width:100px; background:#88cd3d; position:absolute; top:-5px; left:0; content:""; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
ul.customer-logo li:before{ height:5px; width:100px; background:#88cd3d; position:absolute; bottom:-5px; right:0; content:""; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}

ul.customer-logo li:hover:after, ul.customer-logo li:hover:before{ width:100%;}

ul.contact-form{ float:left; width:100%; padding:33px 84px 44px 92px;}
ul.contact-form li{ padding-bottom:10px; width:100%; float:left;}
.txt-field{ background:#fff; color:#a4a4a4; font-size:18px; width:100%; height:60px; padding:17px 15px 7px; border:none;  font-family: 'BebasRegular';}
.txt-area{ background:#fff; color:#a4a4a4; font-size:18px; width:100%; height:120px; padding:17px 15px 17px; border:none;  font-family: 'BebasRegular'; resize:none;}
.send-btn{ float:left; width:115px; height:60px; color:#fff; font-size:18px; font-family: 'BebasRegular'; cursor:pointer; border:none; background:#88cd3d; padding:9px 0 0; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.send-btn:hover, .send-btn:focus{ color:#88cd3d; background:#fff; -webkit-border-top-right-radius: 20px;-webkit-border-bottom-left-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomleft: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 20px;}

.social-connect{ float:right;}
.social-connect a{ width:65px; height:60px; line-height:60px; text-align:center; color:#fff; font-size:24px; background:#88cd3d; display:block; float:left; margin-left:10px; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.social-connect a:hover, .social-connect a:focus{ color:#88cd3d; background:#fff; -webkit-border-top-left-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-bottomright: 20px;border-top-left-radius: 20px;border-bottom-right-radius: 20px;}
.phone-number{ color:#fff; font-size:24px; line-height:36px; padding-left:30px; float:left;}

.address-number{ float:right; width:230px;}
.address-number h2{ line-height:22px; font-size:20px; padding-bottom:15px; font-family: 'pompiere_regular';}
.address-number p{ line-height:22px; font-size:16px; font-family: 'pompiere_regular';}

.subs-div{ width:726px; position:absolute; right:100px; display:none; height:80px; background-color:rgba(96,24,106,0.8); padding:10px;}
.email-field{ background:#fff; height:60px; width:500px; color:#c1c1c1; font-size:18px;  font-family: 'BebasRegular'; float:left; border:none; padding:18px 15px 9px;}
.email-btn{ float:right; color:#fff; font-size:18px; font-family: 'BebasRegular'; cursor:pointer; border:none; background:#88cd3d; padding:9px 0 0; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; width:195px; height:60px; border:none;}
.email-btn:hover, .email-btn:focus{color:#88cd3d; background:#fff;}

.blog{ width:100%; float:left;}
.blog-left{ float:left; width:63%; padding-right:24px; border-right:1px solid #b69bb9;}
ul.blog-box{ padding-top:30px; padding-left:18px; padding-right:18px; float:left; width:100%;}
ul.blog-box li{ float:left; width:100%;}

.blog-heading{ width:100%; float:left; color:#fff; font-size:24px; font-family: 'BowlbyOneRegular'; text-transform:uppercase; line-height:25px;}
.blog-date{ padding-top:5px; width:53px; height:49px; text-align:center; text-transform:uppercase; font-family: 'Roboto', sans-serif; line-height:20px; margin-right:12px; color:#fff; font-size:18px; font-weight:400; background:#88cd3d; float:left;}
.date-creation{ color:#fff; font-size:15px; font-weight:500; text-transform:uppercase; padding-top:12px; float:left; width:100%;}
.date-creation span{ color:#88cd3d;}

ul.blog-dec{ float:left; width:100%; padding-top:15px;}
ul.blog-dec li{ border-bottom:1px solid #fff; padding-bottom:22px; float:left; width:100%; position:relative;}
.blog-pic{ width:220px; position:absolute; left:0; top:0;}
.blog-pic:after{ background:#88cd3d; height:5px; width:100px; left:0; top:-5px; content:""; position:absolute; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.blog-pic:before{ background:#88cd3d; height:5px; width:100px; right:0; bottom:-5px; content:""; position:absolute; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}

.blog-pic:hover:after, .blog-pic:hover:before{ width:100%;}
.blog-description{ float:right; width:100%; padding-left:252px; color:#fff; font-size:15px; line-height:24px; font-weight:500; text-transform:uppercase;}
.read-all{ color:#fff; font-size:12px; float:left; height:35px; padding:0 10px; margin-top:15px; line-height:35px; font-weight:500; text-transform:uppercase; background:#88cd3d; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;}
.read-all:hover, .read-all:focus{ color:#88cd3d; background:#fff;}

.blog-sroller{ width:100%; margin:10px 0 0 0; float:left;}

.blog-sroller{ height:650px;}
.blog-sroller .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:7px;}
.blog-sroller  .mCSB_scrollTools .mCSB_draggerRail{	background-color: #fff; background-color: rgba(255,255,255,1); 		filter: "alpha(opacity=1)"; -ms-filter: "alpha(opacity=1)"; }
.blog-sroller .mCSB_scrollTools .mCSB_draggerRail{ width:3px;}

.blog-right{ float:right; width:34%; padding:23px 15px 0 0;}
.search-box{ width:100%; float:left; position:relative; height:40px; background:#fff;}
.search-txt{ width:100%; height:40px; padding:10px 50px 10px 15px; border:none; background:none;}
.seact-btn{ position:absolute; top:0; right:0; background:none; border:none; outline:none; cursor:pointer; color:#88cd3d; font-size:24px; font-size:24px; padding:5px 6px;}
.blog-right h3{ color:#88cd3d; font-size:23px; font-family: 'BebasRegular'; padding-bottom:15px;} 
.category{ padding-bottom:10px; float:left; width:100%; padding-top:38px;}
.cagegory-link{ color:#fff; font-size:15px; font-weight:500; display:block; line-height:24px; text-transform:uppercase;}
.title-link{ display:block; float:left; color:#fff; font-size:14px; padding:4px 15px 0 15px; line-height:30px; margin:0 7px 7px 0; background:#829f4c; text-transform:uppercase;  font-family: 'BebasRegular'; transition: 0.5s; -webkit-transition: 0.5s; -ms-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s;} 
.title-link:hover, .title-link:focus{ color:#829f4c; background:#fff;}
.cagegory-link:hover, .cagegory-link:focus{ color:#85ff00; text-decoration:underline;}