@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("font-awesome.min.css");
@import url(http://fonts.googleapis.com/css?family=Michroma);
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Rockwell);

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/rockwell.eot');
    src: url('../fonts/rockwell.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rockwell.woff') format('woff'),
         url('../fonts/rockwell.ttf') format('truetype'),
         url('../fonts/rockwell.svg#rockwell') format('svg');
    font-weight: normal;
    font-style: normal;
}                      
                       
body, input, select, textarea   { color: #000000; font-family: Roboto, sans-serif; font-size: 16px; font-weight: 300 !important; line-height: 1.25em; text-align: justify; }
body                            { background: white; min-width: auto; }
body.home                       { background: url("../images/home.jpg") no-repeat scroll center top transparent}
a                               { border-bottom: 0 none; color: inherit; outline: 0; text-decoration: none; cursor: pointer; }
a:hover                         { border-color: transparent; }
ul, li                          { list-style: none; }
article                         { clear: both; float: none; position: unset; top: 742px; margin-top: 120px; }
article, aside, details,
figcaption, figure, footer,
header, hgroup, menu, nav,
section                         { z-index: 1; }
                       
article.home                    { top: 0; margin: 0; position: relative; }
article:nth-child(1)            { margin-top: 0px;}
article:nth-child(2)            { margin-top: 0px;}
                       
article h1                      { position: relative; text-align: center; width: 100%; font-size: 30px; margin-bottom:32px; text-transform: uppercase;  font-family: Rockwell; }
article h1:first-line           { color: black; font-weight: bold; background-color: white; }
article h1:before               { position: absolute; z-index: -1; content: ''; left: 0px; right: 0px; top: 50%; margin-top: -1px; border: 1px solid #c6c6c6; }
article h2                      { color: #c6c6c6; font-size: 24px; text-align: center; margin: 0 0 2%;  font-family: Rockwell; }
                       
.container                      { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
                       
#main                           {/*height: 100%;*/ left: 0; text-align: center; top: 0; width: 100%;}
#main:before                    {  content: ''; display: inline-block; /*height: 100%;*/ margin-right: 0; vertical-align: middle; width: 1px; }
                       
.active     { border-bottom: 4px solid #fff; }
.homeIcon   { font-family: FontAwesome; font-size: 20px; width: 25px; }
                       
header {               
    height: 131px;     
    left: 0;           
    position: fixed;   
    right: 0;          
    top: 0;            
    z-index: 100;      
    opacity: 0;        
    background: url("../images/skew_down.png") no-repeat center top transparent;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
                       
}                      
/*                     
header:after {         
    background: #86a32b;
    top: -103px;       
    right: 0;          
    content: "";       
    height: 164px;     
    position: absolute;
    -webkit-transform:skewY(-4deg);
    -moz-transform:skewY(-4deg);
    -ms-transform:skewY(-4deg);
    -o-transform:skewY(-4deg);
    transform:skewY(-4deg);
    width: 90%;        
    z-index: -1;       
    -webkit-box-shadow: 0 -7px 65px 0 rgba(50, 50, 50, 0.52);
    -moz-box-shadow:    0 -7px 65px 0 rgba(50, 50, 50, 0.52));
    box-shadow:         0 -7px 65px 0 rgba(50, 50, 50, 0.52);
    border-radius: 0 0 0 20px;
    -o-border-radius: 0 0 0 20px;
    -ms-border-radius: 0 0 0 20px;
    -moz-border-radius: 0 0 0 20px;
    -webkit-border-radius: 0 0 0 20px;
    -xv-border-radius: 0 0 0 20px;
    -khtml-border-radius: 0 0 0 20px;
*/                     
}                      
header.straight {      
    height: 100px;     
    left: 0;           
    position: fixed;   
    right: 0;          
    top: 0;            
    z-index: 100;      
}                      
header.straight:after {
    background: none repeat scroll 0 0 #86a32b;
    top: -103px;       
    left: 0;           
    content: "";       
    height: 164px;     
    position: absolute;
    width: 100%;       
    z-index: -1;       
    -webkit-box-shadow: 0 -7px 65px 0 rgba(50, 50, 50, 0.22);
    -moz-box-shadow:    0 -7px 65px 0 rgba(50, 50, 50, 0.22));
    box-shadow:         0 -7px 65px 0 rgba(50, 50, 50, 0.22);
                       
}                      
                       
header .dropdown-menu           { background-color: #86a32b; border: 0 none; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -xv-border-radius: 4px; -khtml-border-radius: 4px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;  }
header .dropdown-header         { color: #000000; }
header .dropdown-menu > li > a  { color: #ffffff}
                       
footer                      { background: url("../images/footer/bg.gif") no-repeat center top rgba(0,0,0,0.8); display: block; margin: 128px 0 0; position: relative; min-height:350px;}
footer .mask                { background: rgba(0, 0, 0, 0.87); height: 100%; min-height:350px; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; }
footer > h1                 { color: #ffffff; display: block; font-size: 1.5em; padding: 25px 10px; text-align: center; }
footer .icons               { margin: 0 auto; width: 33%; }
footer .icons .icon         { color: #fff; display: inline-block; float: left; position: relative; width: 33%; }
footer .icons .icon > span  { clear: both; float: left; text-align: center; width: 100%; font-size: 0.8em; }
footer .icons .icon > img   { margin: 0 calc(50% - 22px); margin: 0 -webkit-calc(50% - 22px); margin: 0 -moz-calc(50% - 22px); text-align: center; width: 44px; }
footer .slogan.logo         { clear: both; max-width: 1312px; margin: 0 auto; }
footer .slogan.logo p       { margin-bottom:0;color: #fff; display:block; left: -65px; top: 82%;text-align:center;}
footer .slogan.logo span       { color:black;}
footer .slogan.logo img.logo{ float: right; position: relative; right: 15px; top: 60%;width:132px;}
                       
footer .slogan.logo .skew   { background: url("../images/footer/skew.png") no-repeat scroll center bottom / contain transparent; height: 131px; position: absolute; top: 65px; width: 100%; z-index: -1; padding:90px 10% 0 10%; }
                       
                       
footer .copyright           { background: #000; clear: both; color: white; padding: 10px 0 40px; position: relative; text-align: center; top: 124px; width: 100%; font-size: 0.75em; }
                       
button .fa-bars                 { font-size: 30px; position: relative; top: 16px; color: #ffffff; }
header .margin-header{ max-width:1312px;margin:0 auto;}
nav .navbar-header              { height: 64px; float: right; height: 100%; padding: 5px 0 0 0; margin-right:15px;}
nav .top-navbar   { float: right; margin: 0; padding: 0 0 0 10px; width: 76%; }
nav .navbar-header > a > img    { width: 100%; left: 16px; margin: 0; position: relative; top: -5px; max-width: 165px; }
nav .nav > li > a               { padding: 4px 0; font-family: Rockwell; }
nav .navbar-collapse            { padding-left: 0; padding-right: 0;}
.nav > li > a:hover, .nav > li > a:focus, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; border: 0 none; color: #000000;  }
nav > div > ul > li.nav_separator { font-family: FontAwesome; font-size: 11px; margin: 0; padding: 0; min-width: 24px; width: 24px; height: 28px;  }
                       
.green      { color: #86a32b; }
.gray       { color: #c6c6c6; }
.bold       { font-weight: bold; }
.normal     { font-weight: normal; }
.uppercase  { text-transform: uppercase; }
.fifty      { float: left; width: 50%; }
                       
.logo                 { position: relative; }
.logo .hasten{ margin: -45px auto auto 30px;}
@media (max-width: 767px) {
	.logo .hasten{
		margin:-30px auto auto 10px;
	}
	.logo .hasten img{
		width:100%;
	}
}


.center               { margin: 0 auto; text-align: center; width: 65%; }
.container            { display: block; width: 100%; }
.home-menu            { position: relative; top: 450px; width: 650px; display: block; height: 128px; padding: 0; margin: 0 auto; }
.home-menu ul.menu    { display: block; margin: 0 auto; width: 100%; padding: 0 }
.home-menu ul.menu li { float: left; height: 120px; max-width: 120px; margin: 0 1%; width: 18%;  }
.home-menu ul li a    { display: block; height: 100%; width: 100%; }
                       
                       
.ninety               { width: 90%; margin: 0 auto; max-width: 960px; }
                       
li.how_us         { background: url("../images/menu_home/how_us.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.contact        { background: url("../images/menu_home/contact.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.works          { background: url("../images/menu_home/works.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.services       { background: url("../images/menu_home/services.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.products       { background: url("../images/menu_home/products.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.how_us:hover   { background: url("../images/menu_home/how_us_hover.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.contact:hover  { background: url("../images/menu_home/contact_hover.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.works:hover    { background: url("../images/menu_home/works_hover.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.services:hover { background: url("../images/menu_home/services_hover.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
li.products:hover { background: url("../images/menu_home/products_hover.png") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); }
                       
.separator {background: #86a32b; height: 5px; margin: 0 auto; position: relative; top: -25px; width: 80px; }
                       
.twoColumns         { display: block; margin: 0 auto !important; width:100%; max-width: 960px; }
.twoColumns .text   { float: left; max-width: 540px; text-align: justify; width: 45%; margin-top:4%; }
.twoColumns .image  { float: left; margin: -35px 0 35px -140px; width: 645px; overflow: hidden; }
                       
.foot_note                      { clear: both; float: left; background: #e2e2e2; box-shadow: 0 -3px 10px 0 #c6c6c6; width: 100%; padding-top: 10px; margin-top: 54px; }
.foot_note h2                   { position: relative; text-align: center; width: 100%; font-size: 30px; margin-bottom:32px; text-transform: uppercase; z-index: 0; padding-top: 30px; }
.foot_note h2:first-line        { color: black; font-weight: bold; background-color: #e2e2e2; content: "\00a0"; }
.foot_note h2:before            { position: absolute; z-index: -1; content: "\00a0"; left: 0px; right: 0px; top: 50%; margin-top: 14px; border: 1px solid #c6c6c6; height: 0; }
.foot_note h2:after             { content: "\00a0"; }
.foot_note > h3                 { color: #333; font-family: Helvetica; text-decoration: underline; text-transform: uppercase; }
.foot_note .steps               { clear: both; float: none; margin: 0 auto; list-style: none; padding: 0 }
.foot_note .steps > li          { float: left; position: relative; text-align: center; width: 25%; font-size: 30px; margin-bottom:32px; text-transform: uppercase; z-index: 0; }
.foot_note .steps li:first-line { font-weight: bold; background-color: #e2e2e2; content: "\00a0"; }
.foot_note .steps li:before     { position: absolute; z-index: -1; content: "\00a0"; left: 0px; right: 0px; top: 50%; margin-top: -1px; border: 1px solid #c6c6c6; height: 0; }
.foot_note .steps li:after      { content: "\00a0"; }
.foot_note .steps li a          { background: none repeat scroll 0 0 white; border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; -xv-border-radius: 50px; -khtml-border-radius: 50px; padding: 4px 14px; color: #c6c6c6; }
.foot_note .steps li.cur a      { background: none repeat scroll 0 0 #86a32b; border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; -ms-border-radius: 50px; -xv-border-radius: 50px; -khtml-border-radius: 50px; padding: 4px 14px; color: #ffffff; }
                       
.carousel                       { margin: 0 0 25px; display: block; min-height: 210px; position: relative; overflow: hidden }
.carousel .item                 { float: left; position: absolute; display: none; max-width: 960px; width: 90%; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out;  -o-transition: 1s ease-in-out; transition: 1s ease-in-out; }
.carousel .title                { text-align: center; float: right; width: 15%; }
.carousel .description          { width: 60%; margin: 0 0 0 5%; }
.carousel .title h4             { text-align: center; margin-bottom: 20px; }
.carousel .title .stroke        { border: 1px solid #333; left: -30px; position: relative; top: 100px; transform: rotate(-37deg); width: 260px;  -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }
.carousel .title:hover .stroke, .carousel .title.hovered .stroke { transform: rotate(-218deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }
.carousel .title .icon          { position: relative; margin:0 auto; border: 3px solid #ffffff; width: 200px; height: 200px; border-radius: 200px; -moz-border-radius: 200px; -o-border-radius: 200px; -ms-border-radius: 200px; -xv-border-radius: 200px; -khtml-border-radius: 200px; background: #e2e2e2; }
.carousel .title .fa            { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out;  -o-transition: 1s ease-in-out; transition: 1s ease-in-out; color: #fff; background-color: #86a32b;  border-radius: 200px; -moz-border-radius: 200px; -o-border-radius: 200px; -ms-border-radius: 200px; -xv-border-radius: 200px; -khtml-border-radius: 200px; font-size: 96px; line-height: 17px; margin: 17px 18px; padding: 71px 28px; width:158px; }
.carousel .title:hover:before, .carousel .title.hovered:before   { -webkit-transform: rotate(-143deg); -moz-transform: rotate(-143deg); -o-transform: rotate(-143deg); transform: rotate(-143deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; }
.carousel .title:hover .fa, .carousel .title.hovered .fa      { -webkit-transform: scale(1.218);  -moz-transform: scale(1.218);  -o-transform: scale(1.218);  transform: scale(1.218); background-color: #86a32b; }
.carousel h3                    { font-weight: bold; }
                       
.callout_1      { background: url("../images/separators/separator1.jpg") no-repeat fixed center top / cover rgba(0, 0, 0, 0); border: 0 none; color: #ffffff; display: table; height: 300px; margin: 0 auto; width: 98%; }
.callout_2      { background: url("../images/separators/separator2.jpg") no-repeat fixed center top / cover rgba(0, 0, 0, 0); border: 0 none; color: #ffffff; display: table; height: 300px; margin: 0 auto; width: 98%; }
.callout_3      { background: url("../images/separators/separator3.jpg") no-repeat fixed 73% top / cover rgba(0, 0, 0, 0); border: 0 none; color: #ffffff; display: table; height: 300px; margin: 0 auto; width: 98%; }
.callout_4      { background: url("../images/separators/separator4.jpg") no-repeat fixed center top / cover rgba(0, 0, 0, 0); border: 0 none; color: #ffffff; display: table; height: 300px; margin: 64px auto 0; width: 98%; }
                       
.callout_1 > p,        
.callout_2 > p,        
.callout_3 > p,        
.callout_4 > p  { padding:15px; background: rgba(255, 255, 255, 0.75); border-color: #85a41c #85a41c #85a41c  transparent; border-style: solid solid solid none; border-width: 3px 3px 3px 0; color: #444444; left: 0; position: relative; top: 80px; width: 50%; border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -ms-border-radius: 0 10px 10px 0; -o-border-radius: 0 10px 10px 0; -xv-border-radius: 0 10px 10px 0; -khtml-border-radius: 0 10px 10px 0; font-family: rockwell; line-height: 100%; text-align: left; padding-left: 2.5%; font-weight: 600; letter-spacing: -2px; font-size: 36px;  }
                       
/*.bg_fixed, .bg_fixed_2       { height: 300px; margin: 0 auto; overflow: hidden; padding: 0; position: relative; width: 98%; }
.bg_fixed > img,.bg_fixed_2 > img { left: 0; position: absolute; top: 0; }*/
                       
.services-icon-wrap                         { margin: 0 auto; padding: 0; text-align: center; max-width: 630px; width: 100%; }
.services-icon-wrap li                      { float: left; width: 210px; }
.services-icon-wrap .service-details        { display: none }
.services-icon-wrap li > a > img            { background: #86a32b; border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -xv-border-radius: 100px; -khtml-border-radius: 100px; }
.service-details-container                  { background: transparent; display: block; min-height: 150px; margin-top: 32px; visibility: hidden; position: relative; padding: 8px 0 0; }
.service-details-container.hover            { background: #86a32b; visibility:visible; }
/*.service-details-container .arrow-up-hover  { border-bottom: 50px solid #86a32b; border-left: 32px solid transparent;border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; -xv-border-radius: 0px; -khtml-border-radius: 0px; border-right: 50px solid transparent; position: absolute; top: -40px; width: 60px; }*/
.service-details-container .arrow-up-hover  { background: url("../images/triangulo.png") repeat scroll 0 0 transparent; height: 86px; position: absolute; top: -75px; width: 148px; }
.service-details-container > .separator     { background: #000; height: 5px; margin: 0 auto; position: relative; top: 0; width: 80px; }
.service-details-container > h3             { color: white; font-size: 1.3em; font-weight: bold; text-align: center; }
.service-details-container.hover > p        { margin: 0 auto; max-width: 630px; width: 100%; color: #ffffff; font-size: 0.95em; }
                       
#works                              { margin: 86px auto 0;  overflow: hidden; width: 90%;}
#works .swiper-container            { overflow: visible; }
#works .swiper-slide                { overflow-y: visible; padding: 1%;}
#works .controller                  { height: 60px; }
#works .controller #works-prev,
#works .controller #works-next      { position: absolute; padding: 20px; background-color: #ececec; line-height: 20px; font-weight: 300; }
#works .controller #works-prev i,
#works .controller #works-next i    { font-size: 20px; }
#works .controller #works-prev      { left: 0; }
#works .controller #works-prev i    { margin-right: 20px; }
#works .controller #works-next      { right: 0; }
#works .controller #works-next i    { margin-left: 20px; }
#works figure                       { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; width: 24%; margin: 0.5%; float: left; overflow: hidden; position: relative; }
#works figure img.photo             { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; width: 100%; z-index: 10; opacity: 1; -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -o-filter: grayscale(50%); filter: grayscale(50%); }
#works figure .figcaption           { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; position: absolute; z-index: 11; bottom: 0px; width: 100%; padding: 10px; }
#works figure .figcaption h4        { font-size:16px; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; font-weight: 600; margin: 0; color: #86a32b; }
#works figure .figcaption ul.tags   { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; padding: 0; margin: 0; list-style: none; }
#works figure .figcaption ul.tags li{ -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; font-size: 1.1rem; text-transform: uppercase; color: #000; display: inline; }
#works figure .figcaption ul.tags
li:after                            { content: ','; }
#works figure .figcaption ul.tags
li:last-child:after                 { content: ''; }
#works figure .figcaption .btn      { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; display: none; color: #86a32b; padding: 5px 40px; margin-top: 0; text-transform: none; letter-spacing: 0; border: 0; border-radius: 2px; box-shadow: inset 0 35px 0 #fff, inset 0 0 0 1px #fff; font-weight: bold; }
#works figure .figcaption .btn:hover{ box-shadow: inset 0 0px 0 #fff, inset 0 0 0 1px #fff; color: #fff; }
#works figure.hover                 {  box-shadow: 0 0 10px #000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
#works figure.hover .figcaption     { width: 100%; display: block }
#works figure.hover .figcaption h4  { font-size: 16px; color: #ffffff; }
#works figure.hover .figcaption
       ul.tags li                   { color: #000; font-size: 1.1rem; }
#works figure.hover .btn            { display: inline-block; }
#works figure.hover .background     { fill: #00d8ff; -webkit-fill: #00d8ff; opacity: 0.8; }
#works figure.reload                { background-color: #00d8ff; }
#works figure.reload img,
#works figure.reload .figcaption    { opacity: 0; }
                       
#works .layer                       { background: rgba(255,255,255,1); bottom: -160%; height: 200%; left: -54%; position: absolute; width: 200%; }
#works figure.hover .layer          { background: rgba(134,163,43,0.8); bottom: -160%; height: 200%; left: -54%; position: absolute; width: 200%; transform: rotate(28.5deg); -moz-transform: rotate(28.5deg); -webkit-transform: rotate(28.5deg); -o-transform: rotate(28.5deg);}
.no-touch #works .layer             { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
.touch    #works .layer             { -webkit-transition: all 0.51s ease-in-out; -moz-transition: all 0.51s ease-in-out; -o-transition: all 0.51s ease-in-out; transition: all 0.51s ease-in-out;  }
                       
#customers                          { margin: 86px auto 0;  overflow: hidden; background: #e2e2e2; }
#customers h1                       { position: relative; text-align: center; width: 100%; font-size: 30px; margin-bottom:32px; text-transform: uppercase; z-index: 0; padding-top: 30px; }
#customers h1:first-line            { color: black; font-weight: bold; background-color: #e2e2e2; content: "\00a0"; }
#customers h1:before                { position: absolute; z-index: -1; content: "\00a0"; left: 0px; right: 0px; top: 50%; margin-top: 14px; border: 1px solid #c6c6c6; height: 0; }
#customers h1:after                 { content: "\00a0"; }
                       
.products-icon-wrap                         { margin: 0 auto; padding: 0; text-align: center; max-width: 768px; width: 100%; }
.products-icon-wrap p                       { color: white; }
.products-icon-wrap li                      { float: left; width: 250px; }
.products-icon-wrap .service-details        { display: none }
.products-icon-wrap li > a > img            { background: #86a32b; border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -xv-border-radius: 100px; -khtml-border-radius: 100px; }
                       
.products-icon-wrap li .head                { border: 4px solid #86a32b; background: #fff; height: 126px; margin: 0 auto; overflow: visible; width: 126px; display: inline-block; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px;-khtml-border-radius: 100px; -xv-border-radius: 100px; z-index: 10}
.products-icon-wrap li .head > img          { margin: 0 auto; position: relative; text-align: center; top: 8px; width: 69%; }
.products-icon-wrap li .body                { background: #86a32b; margin: -64px 24px; padding: 68px 10px 10px; z-index: 9; font-size: 0.9em; height: 420px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;-khtml-border-radius: 10px; -xv-border-radius: 10px; }
.products-icon-wrap li .body > div          { position: relative; height: 100%; }
.products-icon-wrap li .body .btn           { width:62%; position:absolute; bottom:15px; left:0; margin: 0 0 0 19%; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; color: #86a32b; padding: 5px; margin-top: 0; text-transform: none; letter-spacing: 0; border: 0; border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -xv-border-radius: 2px; -khtml-border-radius: 2px; box-shadow: inset 0 35px 0 #fff, inset 0 0 0 1px #fff; font-weight: bold; }
.products-icon-wrap li .body .btn:hover     { box-shadow: inset 0 0px 0 #fff, inset 0 0 0 1px #fff; color: #fff; }
                       
#contact .contact_form                  { cursor:pointer; background: url("../images/contact/map.gif") no-repeat scroll center top transparent; margin-top: 0; margin-top: -90px; padding: 175px 0; }
#contact .form_layer_black              { cursor:default; background: #2f3133; color: #fff; margin: 0 auto; padding: 1px 10px; width: 33%; min-width: 320px; }
#contact .form_layer_black > h3         { text-align: center; width: 100%; }
#contact .form_layer_black > p          { font-size: 0.9em; padding: 5px 0 0; text-align: center; margin: 0 }
#contact .form_layer_black .line_form   { background: url("../images/contact/line_form.png") repeat-x scroll center top transparent; height: 9px; margin: 8px 0 0 0; }
#contact .form_layer_black form         { padding: 10px 0; }
#contact .form_layer_black input        { background: transparent; border: 1px solid #606162; color: #fff; margin: 0; padding: 0 2.5%; width: 100%; line-height: 37px }
#contact .form_layer_black textarea     { background: transparent; border: 1px solid #606162; color: #fff; margin: 0; padding: 0 2.5%; width: 100%; }
#contact .form_layer_black .left        { margin: 0 1% 0 0; padding: 0; width: 49%; float: left; }
#contact .form_layer_black .right       { margin: 0 0 0 1%; padding: 0; width: 49%; float: right; }
#contact .form_layer_black .separator   { top: 0; }
#contact .form_layer_black .sendButton  { background: url("../images/contact/arrow-right.png") no-repeat scroll 96% 12px #86a32b; border: 0 none; float: right; line-height: 42px; margin: 6px -10px; padding: 0 5px; width: 25%; }
                       
#contact .border_form                   { background: url("../images/contact/border_form.png") no-repeat scroll center -2px transparent; height: 67px; width: 100%; }
                       
#contact .footer-social                 { display:none; color: #fff; font-size: 24px; margin: -75px auto; text-align: right; width: 50%; min-width: 320px; }
#contact .footer-social span            { background: #d4d4d4; border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -xv-border-radius: 100px; -khtml-border-radius: 100px; height: 40px; width: 40px; }
#contact .footer-social span:hover      { background: #86a32b; cursor: pointer; }
#contact .footer-social .fa-twitter     { padding: 8px 8px 0 0; }
#contact .footer-social .fa-facebook    { padding: 8px 15px 0 0; }
#contact .footer-social .fa-pinterest   { padding: 8px 10px 0 0; }
#contact .footer-social .fa-google-plus { padding: 8px 8px 0 0; }
#contact .footer-social .fa-linkedin    { padding: 8px 8px 0 0; }
#contact .footer-social .fa-youtube     { padding: 8px 10px 0 0; }
                       
.touch #contact .form_layer_black input { line-height: 29px; }
                       
.touch #contact .form_layer_black .sendButton { background-position: 96% 4px; }
                       
.read-more              { margin: 7px auto !important; max-width: 960px }
.read-more > div        { background: white; color: #000000}
.read-more .image       { margin: 12px auto; text-align: center; width: 100%; }
.read-more .header      {
    background: rgb(134,163,43); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiM4NmEzMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiM4NmEzMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjODZhMzJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left, rgba(134,163,43,1) 25%, rgba(134,163,43,0.50) 50%, rgba(134,163,43,1) 90%, rgba(134,163,43,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(25%,rgba(134,163,43,1)), color-stop(50%,rgba(134,163,43,0.50)), color-stop(90%,rgba(134,163,43,1)), color-stop(100%,rgba(134,163,43,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(134,163,43,1) 25%,rgba(134,163,43,0.50) 50%,rgba(134,163,43,1) 90%,rgba(134,163,43,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(134,163,43,1) 25%,rgba(134,163,43,0.50) 50%,rgba(134,163,43,1) 90%,rgba(134,163,43,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(134,163,43,1) 25%,rgba(134,163,43,0.50) 50%,rgba(134,163,43,1) 90%,rgba(134,163,43,1) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(134,163,43,1) 25%,rgba(134,163,43,0.50) 50%,rgba(134,163,43,1) 90%,rgba(134,163,43,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86a32b', endColorstr='#86a32b',GradientType=1 ); /* IE6-8 */
    border-bottom: 2px solid #124578;
    height: 44px;      
}                      
                       
.container_news { position: relative; }
                       
.container_news ul{    
    margin:25px 25px 25px 50px;
}                      
.container_news li{    
    list-style-type: disc;
    color:#86A32B;     
    font-size: 2rem;   
}                      
.container_news li span{
    color:#000;        
    font-size: 1.2rem; 
}                      
                       
.cliente                  { float: right; }
.detalle                            { width: 70%; float:left; }
.detalle p                          { margin: 0 3% 0 5%; font-size: 12px }

                       
.cliente                            { width: 30%; padding-left: 3%; margin-bottom: 32px; }
.cliente table tr td.label   { color: #86a32b; font-size: 14px; font-weight: 600; margin: 0; }
.cliente table tr td.label span   { color: #000; font-weight: normal;}
.cliente table tr td  { padding: 0 24px;font-size: 14px; }
                       
                       
@media (min-width: 1599px) {
    footer .slogan.logo .skew   { padding:0 17%; }
}                      
@media (min-width: 1200px) and (max-width: 1599px) {
                       
    #works figure                   { width: 32.33%; }
}                      
                       
@media (min-width: 767px) and (max-width: 1199px) {
    #works .swiper-container        { overflow: visible; }
    #works figure                   { width: 49%; }
    #works figure .figcaption       { padding: 5px 10px; }
    #works figure:hover .figcaption { padding: 20px; }
}                      
                       
@media (min-width: 768px) and (max-width: 992px) {
    #works .swiper-container        { overflow: visible; }
    #works figure .figcaption       { padding: 0 20px; }
    #works figure:hover .figcaption { padding: 0 20px; }
}                      
                       
@media (min-width: 561px) and (max-width: 767px) {
    .callout_1 > p, .callout_2 > p, .callout_3 > p, .callout_4 > p { width: 95%; }
    #works figure                   { width: 50%; }
    #works figure .figcaption       { padding: 5px 10px; }
    #works figure:hover .figcaption { padding: 20px; }
}                      
                       
@media (max-width: 560px) {
    .callout_1 > p, .callout_2 > p, .callout_3 > p, .callout_4 > p { width: 95%; }
                       
    #works .swiper-slide { padding: 3%; }
}                      
                       
@media (max-width: 640px) {
    .products-icon-wrap li { margin: 0 auto 74px; width: 50%; }
}                      
                       
                       
                       
/*fcs*/                
                       
#header .navbar-collapse{
    padding:0 5%;      
}                      
                       
                       
#how_us .twoColumns .text.start{
    -webkit-animation: textin 2s;
	   -moz-animation: textin 2s;
	    -ms-animation: textin 2s;
	     -o-animation: textin 2s;
	        animation: textin 2s;
}                      
                       
#how_us .image .ipane{ 
    background: url("../images/ipane.png") no-repeat scroll center 0;
    padding: 135px 120px 0 0;
}                      
                       
                       
#how_us .image .ipane.start{
    -webkit-animation: imgin 2s;
	   -moz-animation: imgin 2s;
	    -ms-animation: imgin 2s;
	     -o-animation: imgin 2s;
	        animation: imgin 2s;
}                      
                       
                       
@keyframes textin {    
  from {               
    margin-left: -200px;
    margin-right: 200px;
  }                    
                       
  to {                 
    margin-left: 0;    
    margin-right: 0;   
  }                    
}                      
@-webkit-keyframes textin {
  from {               
    margin-left: -200px;
    margin-right: 200px;
  }                    
                       
  to {                 
    margin-left: 0;    
    margin-right: 0;   
  }                    
}                      
@keyframes imgin {     
  from {               
    padding-right: 0;  
    padding-left: 50px;
  }                    
                       
  to {                 
    padding-right: 120px;
    padding-left: 0;   
  }                    
}                      
@-webkit-keyframes imgin {
 from {                
    padding-right: 0;  
    padding-left: 50px;
  }                    
                       
  to {                 
    padding-right: 120px;
    padding-left: 0;   
  }                    
}                      
.contact_form input[type="text"], textarea{
  -webkit-transition: box-shadow 300ms;
  -moz-transition: box-shadow 300ms;
  -o-transition: box-shadow 300ms;
  -ms-transition: box-shadow 300ms;
  transition: box-shadow 300ms;
}                      
                       
.contact_form input[type="text"]:hover, textarea:hover {
  box-shadow: inset 0 -2px 0 #86A32B; }
.contact_form input[type="text"]:focus{
  box-shadow: inset 0 -37px 0 #86A32B; 
  color: #fff;         
  outline: none;       
}                      
.contact_form textarea:focus {
  box-shadow: inset 0 -73px 0 #86A32B; 
  color: #fff;         
  outline: none;       
}                      
                       
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
    color: #fff;       
}                      
                       
.read-more .skew {     
    background: url("../images/skew_down.png") no-repeat scroll center -10px / contain transparent; 
    height: 131px;     
    font-family: Rockwell;
    color:#fff;        
    font-size:3rem;    
    font-weight:bold;  
    padding:20px 0 0 30px;
}                      
.read-more .mobi {     
    background-color: #86A32B; 
    height: 65px;      
    font-family: Rockwell;
    color:#fff;        
    font-size:2.5rem;  
    font-weight:bold;  
    padding:20px 0 0 30px;
}                      
                       
/*fcs*/