/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

a,
a:visited,
a:link,
a:active,
a:hover{
    outline: none;
}

h1,h2,h3,h4,h4{
    margin: 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

img{
    width: 100%;
    height: 100%;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


@font-face {
  font-family: "ProximaNova";
  src: url("../font/proxima_nova-regular-webfont.eot");
  src: url("../font/proxima_nova-regular-webfont.eot?#iefix") format("embedded-opentype"),
       url("../font/proxima_nova-regular-webfont.ttf") format("truetype"), 
       url("../font/proxima_nova-regular-webfont.svg") format("svg"), 
       url("../font/proxima_nova-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "ProximaNovaBold";
  src: url("../font/proxima_nova-bold-webfont.eot");
  src: url("../font/proxima_nova-bold-webfont.eot?#iefix") format("embedded-opentype"),
       url("../font/proxima_nova-bold-webfont.ttf") format("truetype"), 
       url("../font/proxima_nova-bold-webfont.svg") format("svg"), 
       url("../font/proxima_nova-bold-webfont.woff") format("woff");
}

@font-face {
  font-family: "ProximaNovaLight";
  src: url("../font/proxima_nova-light-webfont.eot");
  src: url("../font/proxima_nova-light-webfont.eot?#iefix") format("embedded-opentype"), 
        url("../font/proxima_nova-light-webfont.ttf") format("truetype"), 
        url("../font/proxima_nova-light-webfont.svg") format("svg"), 
        url("../font/proxima_nova-light-webfont.woff") format("woff");
  font-weight: 100;
}


/* ===== Initializr Styles ==================================================
   
   ========================================================================== */

*{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    -webkit-font-smoothing: antialiased !important;
}

body {
    margin: 0;
    padding: 0;
    color: #2e3138;
    font-size: 10px;
    font-family:  "ProximaNova", Helvetica, Helvetica Neue, Arial;
}

.wrapper {
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
}


/* ===== Shared Styles ==================================================
   
   ========================================================================== */

.servicesNavEn li:nth-child(3) a,
.servicesNavEn li:nth-child(4) a,
.servicesNavEn li:nth-child(5) a,
.servicesNavEn li:nth-child(6) a,
.servicesNavEn li:nth-child(7) a,
.servicesNavEn li:nth-child(8) a{
    
    padding-left: 25px;
    font-size: 0.9em;
}


.servicesNavEs li:nth-child(3) a,
.servicesNavEs li:nth-child(4) a,
.servicesNavEs li:nth-child(5) a,
.servicesNavEs li:nth-child(6) a,
.servicesNavEs li:nth-child(7) a,
.servicesNavEs li:nth-child(8) a,
.servicesNavEs li:nth-child(9) a,
.servicesNavEs li:nth-child(10) a{
    
    padding-left: 25px;
    font-size: 0.9em;
}


.linkactive:after{
    content: ' ';
    position: absolute;
    display: block;
    width: 2px;
    height: 30px;
    top: 13px;
    bottom: 0;
    left: 25px;
    background-color: #6197CD;
    margin: 0.2em auto;

}

ul.side-nav.full li, 
ul.side-nav.fixed li{
    position: relative;
}


#plusBtn{
    position: absolute;
    top: 650px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 2;
    font-size: 2em;
}


.parallax-Container #plusBtn{
    top: 770px;
}


.title{
    margin-bottom: 1em;
    font-weight: 100;
    font-size: 5em;
    text-transform: uppercase;
    text-align: center;

}

.title:after {
    content: ' ';
    display: block;
    width: 150px;
    height: 4px;
    background-color: #376C8A;
    margin: 0.2em auto;
}

.twitter-icon {
    background-position: 0 -75px;
}


.gPlus-icon {
    background-position: 0 -151px;
}

.youtube-icon {
    background-position: 0 -226px;
}

.linkedin-icon {
    background-position: 0 -301px;
}


 .mailCis {
    font-size: 1.6em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 0.7em;
}


.parallax-container {
      height: 200px;
}


.captionbg{
    width: 99%;
    height: 98%;
    margin: 0 auto;
    margin-top: 1em;
    background-color: rgba(0, 0, 0, 0.4);
    /*background-color: rgba(255, 255, 255, 0.4);*/
    border: 1px solid rgba(255, 255, 255, 0.07);
}


footer{
    width: 100%;
    height: 10em;
    background-color: #2e3138;
}


footer p {
    float: right;
    margin-top: 3.5em;
    text-align: right;
    font-size: 1.2em;
    color: #626262;

}

/*Contact Form*/


#contact .invalidText {
  display: none;
}

#contact .HBField {
  display: none;
}

#contact .invalidHB p {
  display: block;
}

#contact .invalidHB .invalidText {
  display: block;
}

#contact .invalidMail p {
  display: block;
}

#contact .invalidMail .invalidText {
  display: block;
}

#contact .invalidName p {
  display: block;
}

#contact .invalidName .invalidText {
  display: block;
}

#contact .invalidSubj p {
  display: block;
}

#contact .invalidSubj .invalidText {
  display: block;
}

#contact .invalidMsj p {
  display: block;
}

#contact .invalidMsj .invalidText {
  display: block;
}

#contact .mssContent {
    max-height: 5em;
    display: inline-block;
}


#contact .mssContent .errorText,
#contact .mssContent .sendText {
    font-size: 1.8em;
    margin: 0;
    padding: 1em;
    text-align: left;
}

#contact .mssContent .errorText {
  color: red;
  display: block;
}

#contact .mssContent .sendText {
  color: #8dc63f;
  display: block;
}

ul.side-nav.full.right-aligned, 
ul.side-nav.fixed.right-aligned {

        overflow-y: auto; 
}


/* ==========================================================================
   Custom styles
   ========================================================================== */

header{
    position: absolute;
    width: 100%;
    height: 8em;
    margin: 0;
    padding: 1em 0;
    z-index:3;
    background-color: transparent;
}


header #logo{
    position: absolute;    
    width: 95%;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}

header #logo img{
    max-width: 400px;
    height: auto;
}

header #logo a{
    width: 100%;
    height: 100%;
    font-size: 0.7em;
}

header .button-collapse {
    margin-top: 0.3em;
    font-size: 2.5em;
    z-index: 5;
    text-align: center;
    width: 50px;
    height:35px;
    background-color: #376C8A;
    position: fixed;
    z-index: 9999;
    right: 50px;

}

#slide-out{
    z-index: 9999;
}

.fixedBtn{
        position: fixed;
        right: 3%;

}

header .lang{
    float: right;
    margin-right:5%;
    font-size: 1.6em;
    color: #fff;
   
}

header .lang li{

    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;

}

header .lang li a{
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    padding: 5px;
    color: #fff;
}

header .esp a:after {
    content: '│';
    margin: 0.2em;
    margin-left: 18px;
}


header nav{
    width: 100%;
    height: 100%;
}

header nav ul.side-nav > li{
    font-size: 1.7em;
}


header nav ul.side-nav > li:first-child{
    border-bottom: 1px solid #ededed;
    text-align: center;
    cursor: default;
}

header nav ul.side-nav > li:first-child:hover{
    background-color: inherit;
}

header nav ul.side-nav > li img{
    width: 150px;
    padding: 1em;
  
}

header nav ul.side-nav > li:hover{

}

header nav ul.side-nav > li div{
    margin:0;
    padding: 0;
}

header nav ul.side-nav > li a i{
    margin: 0;

}

header nav  ul.side-nav .collapsible-body li a{
    color: #f78f1e;
}


header nav ul.side-nav > li.social{
        border-top: 1px solid #ededed;
        text-align: center;

}

header nav ul.side-nav > li.social a{
    display: inline-block;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    text-indent: -99999px;
}

header nav ul.side-nav > li.social .fb{
    
    background-image: url(../img/fb.png);
}

header nav ul.side-nav > li.social .tw{
     background-image: url(../img/tw.png);

}

header nav ul.side-nav > li.social .yt{
     background-image: url(../img/yt.png);

}

header nav ul.side-nav > li.social .in{
     background-image: url(../img/in.png);

}


#homeTop{
    position: relative;
    height: 900px!important;
}

.slider h2{
    /*color:  rgba(40, 108, 140, 0.9);*/
    color:  rgba(255, 255, 255, 0.9);
    font-size: 7em;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "ProximaNovaBold";

}

/*.slider h2:after {
    content: ' ';
    display: block;
    width: 60%;
    height: 1px;
    box-shadow: 0px -7px 0px #fff;
    background-color: rgba(255,255,255,1);
    margin: 0.2em auto;
}

*/


.slider p{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-top: 1em;
    font-size: 2em;
    line-height: 1.3em;
    /*color: #9FA739;*/
    color: #FFF;
    /*color: rgb(40, 108, 140);*/
    font-style: italic;
    /*border-top: 1px solid rgba(40,108,140,0.5); */
    border-top: 1px solid rgba(255,255,255,0.5); 
    font-family: "ProximaNova";

}


.slides li{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.slides li:nth-child(1){
    background-image: url(../slides/1.jpg);
  
}

.slides li:nth-child(2){
    background-image: url(../slides/2.jpg);
  
}
.slides li:nth-child(3){
    background-image: url(../slides/3.jpg);
  
}

.slider ul.indicators{
    position: absolute;
    bottom: 150px;
    z-index: 2;
}

.slider ul.slides li .caption{
    top:40%;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}



.slider ul.slides li:first-child .caption{
    opacity: 1!important; 
    transform: translateY(0px) translateX(0px)!important;
      -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;

}

.main section{
    padding: 10em 0;
}


.main  #about{
    background-image: url(../img/bg-pattern.png);
}

.main #about .wrapper > div {
		margin: 0 auto;
		

}

.main #about .wrapper > div h3 {
	/*float:left;*/
	margin: 1em 0;
    font-weight: 100;
    font-size: 3em;
    font-family: 'ProximaNovaLight';
    text-transform: uppercase;
    text-align: center;
}

.main #about .wrapper > div ul{
	float:left;
	width:50%;
	padding:0 4em;
	text-align:right;
}

.main #about .wrapper > div ul:last-child li {
	text-align:left;
}



.main #about .wrapper > div h3:after{
    content: ' ';
    display: block;
    width: 150px;
    height: 3px;
    background-color: #8CC53F;
    margin: 0.2em auto;
}



.main #about .wrapper > div ul li{
	
	margin-bottom: 0.5em;
	font-size:2em;
	font-family: 'ProximaNovaLight';
	color:#555;
	text-transform: uppercase;
	text-align:right;
	/*border-left: 3px solid rgb(145, 191, 77);*/
	
}



.main #about .wrapper > div ul li i {
	color: rgb(145, 191, 77);
	padding-right:10px;
}

.main #about .wrapper > div h3 + ul li i {
	padding-left:10px;
}

.main  #customers{
  padding: 1em 0;
  background: #FFF;
}

.main  #customers h2{
    padding: 1em 0 0 0;    
   /* font-size: 2em;
    font-family: "ProximaNova";
    font-weight: bold;
    text-transform: uppercase;*/
}

.main  #customers h2:after{
    /*color: #fff;
    background-color: #fff;*/

}
.main  #workUs{
    background-image: url(../img/blurBg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}

.main  #works,
.main #contact{
    background-image: url(../img/bg-pattern5.png);
}

.main #contact button.btn{
        margin-left: 10px; 
}

.main #about p,
.main #workUs p,
.main #contact p{  
    margin: 0 auto;
    padding: 1em 0;
    color: #555;
    font-family: "ProximaNovaLight";
    font-size: 2.5em;
    text-align: center;
}


.main #workUs .title,
.main #workUs p{
    color: #fff;
}


.main #services{
    background-color: #376C8A;
    color: #fff;
    margin-bottom: 0;
}

.main #services .title:after {
    background-color: #fff;
}

.main #services article {
    height: auto;
    margin: 1em 0;
}

.main #services article h3{
    font-size: 2em;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
}

.main #services  article i {
    float: left;
    display: block;
    margin: 0 auto;
    height: 94px;
    margin:1em;
}

.main #services article p{
    height: auto;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    font-size: 1.6em;
    font-family: "ProximaNovaLight";
}

.main #services article .plusbtn {
    float: right;
    /*  width: 90px;*/
    padding: 0.5em 0.5em;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    background-color: transparent;
    text-align: right;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

.main #services2{
    background-image: url(../img/bg-pattern.png);
    margin-bottom: 0;
}

.main #services2 article {
    height: auto;
    margin: 1em 0;
}

.main #services2 article h3{
    font-size: 2em;
    text-align: left;
    text-transform: uppercase;
}

.main #services2  article i {
    float: left;
    display: block;
    margin: 0 auto;
    height: 94px;
    margin:1em;
}

.main #services2 article p{
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1.6em;
    font-family: "ProximaNovaLight";
}

.main #services2 article .plusbtn {
    float: right;
    /*  width: 90px;*/
    padding: 0.5em 0.5em;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    background-color: transparent;
    text-align: right;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

.main #services3{
    background-color: #376C8A;
    color: #fff;
    margin-bottom: 0;
}

.main #services3 .title:after {
    background-color: #fff;
}

.main #services3 article {
    height: auto;
    margin: 1em 0;
}

.main #services3 article h3{
    font-size: 2em;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
}

.main #services3  article i {
    float: left;
    display: block;
    margin: 0 auto;
    height: 94px;
    margin:1em;
}

.main #services3 article p{
    height: auto;
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    font-size: 1.6em;
    font-family: "ProximaNovaLight";
}

.main #services3 article .plusbtn {
    float: right;
    /*  width: 90px;*/
    padding: 0.5em 0.5em;
    margin-right: 5px;
    text-align: center;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    background-color: transparent;
    text-align: right;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

/*.main #services article .plusbtn:hover {
  color: #f78f1e;
  border-color: #fff;
  background: #fff;

}*/

/*.main #services article{
    padding: 0 13em;
}*/

.main #workUs {
    text-align: center
}

.main #workUs a{
    margin: 2em 0;
    font-size: 1.6em;
}


.main #contactInfo {
    width: 100%;
    background-image: url(../img/blurBg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


.socialMedia {
    width: 30%;
    margin: 0 auto;
}

.socialMedia p {
    font-size: 2.2em;
    color: #2e3138;
    text-align: center;
    margin-bottom: 2em;
}

.socialMedia .socialWrapper {
    text-align: center;
}

.socialMedia .facebook-icon,
.socialMedia .twitter-icon, 
.socialMedia .gPlus-icon, 
.socialMedia .youtube-icon, 
.socialMedia .linkedin-icon {
    width: 50px;
    height: 50px;
    display: block;
    margin: 20px auto 0 auto;
    background-image: url(../img/socialSprite2.png);
    background-repeat: no-repeat;
    -webkit-transition: all 0.50s ease;
    -moz-transition: all 0.50s ease;
    -ms-transition: all 0.50s ease;
    -o-transition: all 0.50s ease;
    transition: all 0.50s ease;
}

.socialMedia li {
    cursor: pointer;
    display: inline-block;
}

.socialMedia li:hover a {
    -ms-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    transform: rotateY(360deg);
}


footer .socialMedia {
    float: left;
    width: 30%;
    margin: 0 auto;
}

footer .socialMedia .facebook-icon,
footer .socialMedia .twitter-icon, 
footer .socialMedia .gPlus-icon, 
footer .socialMedia .youtube-icon, 
footer .socialMedia .linkedin-icon {
    width: 30px;
    height: 30px;
    background-size: 30px;

}

footer .twitter-icon {
    background-position: 0 -45px;
}

footer .youtube-icon {
    background-position: 0 -135px;
}

footer .linkedin-icon {
    background-position: 0 -180px;
}



.main #contactInfo .boxesContact {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin-bottom: 4em;
    padding: 0px 20%;
}

.main #contactInfo .boxesContact .boxesEffect {
    width: 100%;
    max-width: 325px;
    margin: 0 auto;
    margin-top: 1em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.main #contactInfo .boxesContact .boxesEffect:before,
.main #contactInfo .boxesContact .boxesEffect:after {
    pointer-events: none;
}

.main #contactInfo .boxesContact .boxesEffect p {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 0, 0);    
    transform: translate3d(0, 0, 0);
}

.main #contactInfo .boxesContact .boxesEffect p:hover {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.main #contactInfo .boxesContact .boxesEffect span .b-effect {
    font-size: 1em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.main #contactInfo .boxesContact .boxesEffect span .a-effect {
    font-size: 1.6em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 0.7em;    
}

.main #contactInfo .boxesContact .boxesEffect span .a-effect::after,
.main #contactInfo .boxesContact .boxesEffect span .a-effect::before {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}


.main #contactInfo .boxesContact .boxesEffect span .a-effect::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.main #contactInfo .boxesContact .boxesEffect span .a-effect::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.main #contactInfo .boxesContact .boxesEffect span .a-effect:hover::before,
.main #contactInfo .boxesContact .boxesEffect span .a-effect:hover::after,
.main #contactInfo .boxesContact .boxesEffect span .a-effect:focus::before, 
.main #contactInfo .boxesContact .boxesEffect span .a-effect:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

.main #contactInfo .boxesContact .boxesEffect p {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-family: "ProximaNovaLight";
}

.main #contactInfo .boxesContact .boxesEffect p span.blancogrande{
    color: #FFF;
    font-size: 2em;
}

.main #contactInfo .boxesContact .boxesEffect p a {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin:0;
    padding: 0.5em;
    color: #fff;
    font-size: 3em;
    font-weight: lighter;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    border: 1px solid #fff;
}



#contact  .contactNumb{
    float: right;
    width: 50%;
    height: 100%;
    padding: 0 1em;
    text-align: right;

}

#contact  .contactNumb p{
    font-size: 1.3em;
    padding: 0;
    text-align: right;
}

#contact  .contactNumb p a{
      margin: 0;
      padding: 0;
      padding-top: 1em;
      padding-left: 0.5em;
      font-size: 1em!important;
}



/*-------------------
    Works Effect
/-------------------*/ 

.modal{
    top:5%!important;
    max-height:100%;
}

.modal h3{
    margin:0;
    padding: 0;
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #ededed;
    color: #F78F1E;
}

.icon-links{
    position: absolute;
    top: -20px;
    bottom: 0;
    right: 0px;
    width: 30%;
    margin: 0;
    padding: 0; 
} 

.icon-links li{
    display: inline-block; 
    text-align: center;
} 

.icon-links .btn-floating.btn-large{
    width: 40px;
    height: 40px;
 }

.icon-links  .mdi-image-remove-red-eye:before,
.icon-links  .mdi-content-link:before{
    position: absolute;
    top: -6px;
    bottom: 2px;
    right: 0;
    left: 0;
}

.icon-eye {
    background-image: url(../img/eye.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.icon-paper-clip {
    background-image: url(../img/link.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.gridWorks {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1300px;
    list-style: none;
    text-align: center;
}

/* Common style */
.gridWorks figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    width: 30%;
    background: #fff;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(173, 173, 173, 0.12);
}

.gridWorks figure img {
    position: relative;
    display: block;
    max-width: 100%;
    opacity: 0.8;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-transition: all .6s ease;
    -webkit-backface-visibility: hidden;
}




    @-moz-document url-prefix() {
    
       .gridWorks figure img {

        filter: grayscale(100%);
       -webkit-transition: all .6s ease;
        -webkit-backface-visibility: hidden;
        }
       
       .gridWorks figure img:hover {

            filter: grayscale(0%);
           -webkit-transition: all .6s ease;
            -webkit-backface-visibility: hidden;
        }  

    }

.gridWorks figure img:hover{
    opacity:1;
    -webkit-filter: grayscale(0);
    -webkit-transition: all .6s ease;
    -webkit-backface-visibility: hidden;
}

.gridWorks figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gridWorks figure figcaption::before,
.gridWorks figure figcaption::after {
    pointer-events: none;
}

.gridWorks figure figcaption,
.gridWorks figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/*---------------
    EFFECT
---------------*/

figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 4.75em;
    background: #fff;
    color: #3c4a50;

}

figure.effect-zoe h3 {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 60px;
    margin: 0 auto;
    display: none;

}

figure.effect-zoe .icon-links a {
    float: right;
    color: #3c4a50;
    font-size: 1.4em;
    color: #fff;
    /*background-color: rgba(255,255,255,0.4);*/
}


figure.effect-zoe ul.description {
    width: 100%;

}

figure.effect-zoe ul.description li{
    display: inline-block;
    margin-left: 5px;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #656565;
    font-family: 'ProximaNova';
}


/*------Services------*/

.parallax-Container .captionbg {
    margin-top: 0;
}


.first-parallax {
    height: 800px;
    background-image: url(../img/servicesBg.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.parallax-Container img {
    display: block;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    margin-top: 23em;
    text-align: center;

}

#cloudServices img{
	max-width: 900px;
}

#rocktSales img{
    max-width: 450px;
    margin-top: 15em;
}


#arkenMail img {
    max-width: 500px;
    margin-top: 10em;
}


#rocktSales .logosWrapper{
    margin-top: 1em;
}

.first-parallax  p{
    display: block;
    width: 80%;
    margin: 0 auto;
    padding-top: 1em;
    font-size: 2em;
    line-height: 1.3em;
    color: #fff;
    font-style: italic;
    font-family: "ProximaNova";
    text-align: center;
}

.first-parallax img + p{

    border-top: 1px solid rgba(255,255,255,0.5);
    
}
.logosWrapper {
  text-align: center;
  width: 100%;
  margin-top: 5em;
}

.logosWrapper li {
  display: inline-block;
  margin-right: 20px;
  margin-top: 10px;
  font-family: 'ProximaNova';
  font-weight: 100;
  font-size: 1.6em;
  color: #fff;
}

.logosWrapper li span {
  color: #f78f1e;
}


.logosWrapper .subway-icon, 
.logosWrapper .sport-icon, 
.logosWrapper .hp-icon, 
.logosWrapper .racsa-icon, 
.logosWrapper .bancoA-icon, 
.logosWrapper .homeDep-icon,
.logosWrapper .its-icon,
.logosWrapper .monge-icon, 
.logosWrapper .centro-icon,
.logosWrapper .pensiones-icon,
.logosWrapper .presto-icon, 
.logosWrapper .fishel-icon,
.logosWrapper .economy-icon,
.logosWrapper .ekono-icon,
.logosWrapper .mastercard-icon, 
.logosWrapper .florida-icon,
.logosWrapper .gnc-icon,
.logosWrapper .bimbo-icon,
.logosWrapper .carls-icon {
  padding: 16px 46px;
  margin: 20px auto 0 auto;
  background-image: url(../img/logosprites.png);
}

.logosWrapper .subway-icon {
  background-repeat: no-repeat;
}

.logosWrapper .sport-icon {
  background-position: 300px -19px;
}

.logosWrapper .hp-icon {
  background-position: 200px 6px;
}

.logosWrapper .racsa-icon {
  background-position: 522px 2px;
}

.logosWrapper .bancoA-icon {
  background-position: -5px -187px;
}

.logosWrapper .homeDep-icon {
  background-position: -232px -111px;
}

.logosWrapper .its-icon {
  background-position: -125px -112px;
}

.logosWrapper .monge-icon {
  background-position: 92px -105px;
}

.logosWrapper .pensiones-icon {
  background-position: -1px -112px;
}

.logosWrapper .presto-icon {
  background-position: -230px -207px;
}

.logosWrapper .fishel-icon {
  background-position: -338px -207px;
}

.logosWrapper .carls-icon {
  background-position: -125px -194px;
  padding-bottom: 2em;
}

.logosWrapper .centro-icon {
  background-position: 0px 213px;
  padding-right: 106px;
}

.logosWrapper .mastercard-icon {
	background-position: 195px -282px;
}

.logosWrapper .economy-icon {
	background-position: 0px 155px;
	padding-right: 106px;
}

.logosWrapper .ekono-icon {
	background-position: -344px -265px;
}
.logosWrapper .gnc-icon {
	background-position: 220px -350px;
	padding-right: 106px;
    display: none;
}

.logosWrapper .florida-icon {
    background-position: 0px 47px;
    padding-left: 58px;
}


.logosWrapper .bimbo-icon {
    background-position: -118px 49px;
    padding-left: 58px;
}


.overview .column:nth-child(1){
    width: 50%;
    padding: 2em;
    float: left; 
}

.overview .column:nth-child(2){
    width: 50%;
    padding: 2em;
    float: left;
}

.overview .column:nth-child(3){
    width: 100%;
    padding: 2em;
}


.overview h3{
    color: #f78f1e;
    padding: 0.5em 20px;
    font-size: 2em;
    font-family: "ProximaNovaBold";
    text-transform: uppercase;
}


.overview .column p{
    margin: 0 auto;
    padding: 0.5em 20px;
    color: #555;
    font-family: "ProximaNova";
    font-size: 1.5em;
    text-align: justify;
}

.overview .column p:first-child{
    padding-top: 0;

}

.overview .column p span{
    font-weight: bold;
}
        
.overview .column img{
    display: block;
   /* max-width: 350px;*/
    margin: 0 auto;
    text-align: center;
    /*border: 5px solid #fff;*/
}

.overview .column ol{
    width: 100%;
    padding: 0;
    margin-top: 3em;
    -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    -ms-column-gap:5px;
    -o-column-gap:5px;
    column-gap:5px;
    columns:2;
}
.overview .column ol li{
    margin: 0 auto;
    padding: 0.5em 20px;
    color: #555;
    font-family: "ProximaNova";
    font-size: 1.5em;
    text-align: justify;
    list-style-type: none;

}

.second-parallax {
    height: 250px;
    padding: 5em 0;
    background-image: url(../img/blurBg.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.second-parallax .servicesCaract p {
  
    font-family: 'ProximaNovaBold';
    font-size: 1.8em;
    text-align: center;
    color: #fff;
}

.second-parallax .servicesCaract ul {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.second-parallax .servicesCaract li {
    display: inline-block;
    margin-right: 20px;
    margin-top: 10px;
    font-family: 'ProximaNova';
    font-weight: 100;
    font-size: 1.6em;
    color: #fff;
}

.second-parallax .servicesCaract li span {
    color: #f78f1e;
}





/* ==========================================================================
   Media Queries
   ========================================================================== */

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

	.wrapper{
        max-width: 290px !important;
    }	
}

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

	.row .col {
		padding: 0px !important;
	}

	ul{
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

    .wrapper{
        max-width: 320px;
        height: 100%;
        margin:0 auto;
        /*border:1px solid red;*/

    }

    .title {
        line-height: 25px;
        font-size: 3em;
        
    }


    header #logo{
        max-width: 180px;        
        font-size:3.3em;
        max-height: 100px;
    }
		    
    ul.lang{
        margin-top: 2em;
       /* margin-right: 120px;*/
    
    }

    header .button-collapse{
        margin-top: 1em;
    }



    ul.side-nav.full, 
    ul.side-nav.fixed{
        overflow-y:auto;
    }

    #homeTop {
        position: relative;
        height: 500px!important;
    }

    .slides li,
    .main #workUs,
    .main #contactInfo,

    .first-parallax,
    .second-parallax {

        background-attachment: initial;
    }

    .slider ul.slides{
        height: 500px!important;
    }

    .slider ul.slides li .caption{
        top:30%;
    }

    .slider h2{
        font-size: 3em;
        line-height: 30px;
    }

    .slider p{
        text-align: justify;
        font-size: 1.6em;
    }

    #plusBtn {
       
        top: 470px;
    }

    .main section{
        padding: 5em 0;
    }

    .main #about p, 
    .main #workUs p,
    .main #contact p {
        font-size: 2em;
        text-align: justify;

    }

    .main #services article{
        margin: 5em 0;
    }

    .row .col.s4{
        width: 100%;
    }


    .main #services article h3,
    .main #services article p{
        text-align: center;
    }

    .main #services article i{
        float: none;
        margin:0 auto;
        text-align: center;
    }

    .main #services article .plusbtn{
        width: 100%;
        float: none;
        text-align: center;
        margin:0 auto;
    }

    .gridWorks figure {
        width: 100%;
    }

    .main #contactInfo .boxesContact .boxesEffect p a {
        
        font-size: 2em;   
    }

    .main #contactInfo .socialMedia{
        width: 100%;
    }

    .main #workUs a {

        font-size: 1.3em;
     }

    footer p{
        text-align: center;
    }

    .first-parallax p{
        font-size: 1.6em;
        text-align: justify;
    }

    .logosWrapper{
        -webkit-column-count:2;
    -moz-column-count:2;
    -ms-column-count:2;
    -o-column-count:2;
    column-count:2;
    -webkit-column-gap:5px;
    -moz-column-gap:5px;
    -ms-column-gap:5px;
    -o-column-gap:5px;
    column-gap:5px;
    columns:2;
    }

    .logosWrapper li{
        margin-bottom: 3em;
        margin-right: 5px;
    }

    .logosWrapper .ekono-icon {
        background-position: -344px -259px;
    }

    .overview .column{
        float: none;
        width: 100%;
        padding: 0;
    }

    .overview .column:nth-child(2){
        display: none;
    }

    .overview .column:nth-child(3){
        padding: 0;
    }

    .second-parallax{
        height: 300px;
        padding: 1em;
    }

    .second-parallax .servicesCaract ul{
        text-align: center;
    }

    .second-parallax .servicesCaract li{
        font-size: 1.3em;
    }

    .overview .column ol{

        -webkit-column-count:1;
        -moz-column-count:1;
        -ms-column-count:1;
        -o-column-count:1;
        column-count:1;
        -webkit-column-gap:5px;
        -moz-column-gap:5px;
        -ms-column-gap:5px;
        -o-column-gap:5px;
        column-gap:5px;
        columns:1;

    }

	.first-parallax{
		background-color:#A88C8E!important;
		background-image:none;
	}
	
	.main #about .wrapper > div ul{
		float:none;
		width:100%;
		margin: 0 auto;
		padding: 0 1em 0 3em;

	}

	.main #about .wrapper > div ul li{
		font-size:1.5em;
		text-align:left;
	}

	.main #about .wrapper > div h3 + ul li i{
		float:left;
		padding:0;
		padding-right:10px;
	}

    #contact  .contactNumb{
        float: none;
        width: 100%;
        margin-top:1em;

    }

    #contact  .contactNumb p{
        font-size: 1.3em;
        padding: 0;
        text-align: right;
    }

    .mssContent{
        display: block!important;
    }


	
}


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

    .wrapper{
        max-width: 480px;
        margin:0 auto;
        height: 100%;
        /*border:1px solid lightblue; */  

     }

    .title {
        line-height: 25px;
        font-size: 3em;
        
    }

    header{
       
    }

    header #logo{
        max-width: 180px;
        padding-top: 10px;
    }
    
    ul.lang{
        margin-top: 2em;
    
    }

    header .button-collapse{
        margin-top: 1em;
        
    }

    ul.side-nav.full, 
    ul.side-nav.fixed{
        overflow-y:auto;
    }

    #homeTop {
        position: relative;
        height: 500px!important;
    }

    .slides li,
    .main #workUs,
    .main #contactInfo,
    .first-parallax,
    .second-parallax {

        background-attachment: initial;
    }

    .slider ul.slides{
        height: 500px!important;
    }


    .slider h2{
        font-size: 3em;
        line-height: 30px;
    }

    .slider p{
        text-align: justify;
        font-size: 1.6em;
    }

    #plusBtn {
       
        top: 470px;
    }

    .main #about p, .main #workUs p, .main #contact p {
    
        font-size: 2em;
        
    }

    .row .col.s4{
        width: 100%;
    }

    .gridWorks figure{
        width: 100%;
    }

    .first-parallax{
        height: 700px;
    }

    .parallax-Container img{
        max-width: 400px;
    }
    
    .first-parallax p{
        font-size: 1.6em;
    }
    .first-parallax img + p{
        text-align: justify;
    }

    .parallax-Container #plusBtn{
        top: 670px;
    }

    .overview .column{
        float: none;
        width: 100%;
        padding: 0;
    }

    .overview .column:nth-child(2){
        display: none;
    }

    .overview .column:nth-child(3){
        padding: 0;
    }

    .second-parallax{
        padding: 1em;
    }

    .second-parallax .servicesCaract ul{
        text-align: justify;
    }

    .second-parallax .servicesCaract li{
        font-size: 1.3em;
    }

    .main #about .wrapper > div ul{
    	padding:0;
    }

     .main #about .wrapper > div ul {
     	float:none;
     	width:100%;
     	padding: 0 0em 0 12em;
     }

    .main #about .wrapper > div ul li{
    	font-size:1.5em;
    	text-align:left;
    }

    .main #about .wrapper > div h3 + ul li i{
    	float:left;
    	padding:0;
    	padding-right:10px;
    }

    #contact  .contactNumb{
        float: none;
        width: 100%;
        margin-top:1em;

    }

    #contact  .contactNumb p{
        font-size: 1.3em;
        padding: 0;
        text-align: right;
    }

    .mssContent{
        display: block!important;
    }

}


@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .wrapper{
        max-width: 768px;
        margin:0 auto;
        height: 100%;
       /* border:1px solid lightgreen;*/

     }

    .title {
        line-height: 25px;
        font-size: 3em;
        
    }

    header{
       
    }

    header #logo{
        max-width: 250px;
    }
    
    ul.lang{
        margin-top: 2em;
        /*margin-right: 130px;*/
    
    }
     header .button-collapse{
        margin-top: 1em;
    }

    #homeTop{
        height: 800px!important;
    }

     .slides li,
     .main #workUs {

        background-attachment: initial;
    }

    .slides li,
     .main #contactInfo {

        background-attachment: initial;
    }

    .slider ul.slides{
        height: 800px!important;
    }

    .slider p{
        font-size: 2em;
    }

    .row .col.s4{
        width: 50%;
    }

    .main #services article{
        margin:2em 0;
    }

    .main #services article p{
        height: 5em;
    }

    .gridWorks figure {
        width: 48%;
    }

    #plusBtn {

        top: 770px;
    }

    figure.effect-zoe ul.description li{
        font-size: 1.1em;
    }

    .parallax-Container img{
        max-width: 600px
    }

    .first-parallax img + p{
        text-align: justify;
    }

    .second-parallax{
        padding: 2em 0;
    }

    .main #about .wrapper > div ul li{
    	font-size: 1.6em;
    }

    ul.side-nav.full.right-aligned, 
    ul.side-nav.fixed.right-aligned {

        overflow-y: scroll; 
  }


}

@media only screen and (min-width : 1025px) and (max-width : 1299px) {

       .wrapper{
        max-width: 1024px;
        margin:0 auto;
        height: 100%;
       /* border:1px solid pink;  */

     }

     header .lang{
       /* margin-right: 100px;*/
     }

     .main #services article #factory-icon + h3{
        font-size: 1.8em;

     }

         #homeTop{
        height: 800px!important;
    }

    .slider ul.slides{
        height: 800px!important;
    }

    .slider ul.slides li .caption{
        top:30%;
    }


      #plusBtn {

        top: 770px;
    }

    figure.effect-zoe ul.description li {
        font-size: 1em;
    }

    ul.side-nav.full.right-aligned, 
    ul.side-nav.fixed.right-aligned {

        overflow-y: scroll; 
  }

}



@media screen and (-webkit-min-device-pixel-ratio:0) {
    
    #email.valid{
        border-bottom: 2px solid #4CAF50;
    }

    input:-webkit-autofill, 
    textarea:-webkit-autofill, 
    select:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px white inset!important;
    }

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.visible-android .parallax-Container {
    background-attachment: initial;
}



.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.error{
    text-align: left;
    font-size: 1.5em!important;
    color: red!important;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}



.drag-target{
    display: none;
}

.listanueva li{    
    list-style: circle !important;
    font-size: 1.6em;
}

.listanueva .margenizquierdo{
    margin-left: 15px;    
}

.listanueva .margenizquierdo li{
    list-style: disc !important;
}