/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   body{
    background-color: #FFF;
    color:#FFF;
   }

a.nav-expander {
  /*background: none repeat scroll 0 0 #000000;*/
  color: #FFFFFF;
  display: block;
  font-size: 15px;
  font-weight: 400;
  height: 50px;
  margin-right: 0;
  padding: 1em 1.6em 2em;
  position: absolute;
  right: 0;
  text-decoration: none;
  text-transform: uppercase;
  /*top: 0;*/
  transition: right 0.3s ease-in-out 0s;
  /*width: 50px;*/
  z-index: 12;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}

.img_menu
{
  width: auto;
}





.creatividad{
  background-color:#FFC627;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}

.branding{
  background-color:#00B3AF;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}
.comunicacion_corporativa{
  background-color:#ED3025;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}
.diseno{
  background-color:#00AE6E;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}
.web_movil_ti{
  background-color:#6A1B32;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}
.produccion{
  background-color:#00586F;
  text-align: center;
  cursor: pointer;
  padding-top: 10px;
}

.creatividad:hover,.creatividad:focus
{
  background-color:#FFF;
  
}
.branding:hover{
  background-color:#FFF;
  color:#00B3AF;
}
.comunicacion_corporativa:hover{
  background-color:#FFF;
  color:#ED3025;
}
.diseno:hover{
  background-color:#FFF;
  color:#00AE6E;
}
.web_movil_ti:hover{
  background-color:#FFF;
  color:#6A1B32;
}
.produccion:hover,.produccion:focus{
  background-color:#FFF;
  color:#00586F;
}


.text_menu{
  padding:25px 0 25px 0;
  background-color:#FFF;
  width:100%;
  text-align:center;
  color:#464646;
  margin-top:10px; 
}
.text_servicios{
  padding:25px 0 25px 0;
  width:100%;
  text-align:center;
  font-size: 24px;
  color:#FFF;
}

.magenta_fuerte{
  background-color:#6A1B32;
}
.magenta_ligero{
  background-color:#821B32;
}

.servicios{
  background-color: #FFC627;
  text-align: center;
  padding-top: 10px;
}
.portafolio{
  background-color: #00B3AF;
  text-align: center;
  padding-top: 10px;
}
.contacto{
  background-color: #ED3025;
  text-align: center;
  padding-top: 10px;
}
.joinus{
  background-color: #00AE6E;
  text-align: center;
  padding-top: 10px;
}


.servicios:hover,
.portafolio:hover,
.contacto:hover,
.joinus:hover
{
  background-color:#FFF;
  
}

a.nav-expander:hover {
  cursor: pointer;
}

a.nav-expander.fixed {
  position: fixed;
}

.nav-expanded a.nav-expander.fixed {
    right: 20em;
}

nav {
  background: #2d2f33;
  display: block;
  height: 100%;
  overflow: auto;
  position: fixed;
  right: -20em;
  font-size: 15px;
  top: 0;
  width: 20em;
  z-index: 2000;
  
  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}
.nav-expanded nav {
  right: 0;
}

body.nav-expanded {
  margin-left: 0em;
  transition: right 0.4s ease-in-out 0s;
  -webkit-transition: right 0.4s ease-in-out 0s;
  -moz-transition: right 0.4s ease-in-out 0s;
  -o-transition: right 0.4s ease-in-out 0s;
}

#nav-close {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  font-size: 24px;
  padding-right: 10px;
}

.main-menu {
  padding-top: 12px;
}

.main-menu li {
  border-bottom: 1px solid #323949;
  margin-left: 20px;
  font-size: 18px;
  padding: 12px;
}

.main-menu li a {
  color: #6F7D8C;
  text-decoration: none;
}

.main-menu li a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.main-menu li .sub-nav {
  border-bottom: 0px;
  padding: 4px;
}

.main-menu a .caret {
	width: 0;
	height: 0;
	display: inline-block;
	vertical-align: top;
	border-top: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
    margin-top: 8px;
}

.main-menu a:hover .caret {
	border-top-color: #4f5963;
}

.main-menu li.open > a > .caret {
	border-top: none;
	border-bottom: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.main-menu li.open > a:hover > .caret {
	border-bottom-color: #4f5963;
}

.icon:before {
  font-family: 'FontAwesome';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  content: '\f105';
}

.main-menu li > a > span.icon {
  float: right;
  margin: 0.1em 1.7em -0.1em 0;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}

.main-menu li > a:hover > span.icon {
  float: right;
  margin: 0.1em 0.8em -0.1em 0;
  opacity: 1;
}

/**   MODAL CONTACTO ***/

.modalnew {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modalnew-content {
    background-color: transparent;
    margin-left:auto;
    margin-right:auto; 
    /*padding: 20px;*/
    /*border: 1px solid #888;*/
    width: 612px; 
    margin-top:2500px;
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/**   MODAL CONTACTO FIN ***/

/**   MODAL JOIN US ***/

.modaljoin {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modaljoin-content {
    background-color: transparent;
    margin-left:auto;
    margin-right:auto; 
    /*padding: 20px;*/
    /*border: 1px solid #888;*/
    width: 473px; 
    margin-top:2500px;
}


.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/**   MODAL JOIN US FIN ***/


      .img_sobre{
        width: 100%;
      }

.form_contacto{
  margin-top:-300px;width:50%;margin-left:auto;margin-right:auto;  
}

.form_join{
  margin-top:-380px;width:50%;margin-left:auto;margin-right:auto;  
}

.img_joinus{
  width: 538px;
}
.img_portafolio
{
  width: 90%;
}
.img_item_portafolio
{
  width: auto;
}
.img_100
{
  width: 100%;
}

.slide_logo{
  text-align:center;
  padding-top:20%;
  padding-bottom:10%;
  color:#000;
}
.slide_descripcion
{
  color:#000;
  padding:10% 10%;
}

.filtro_servicio{
  padding-top:1%;
  padding-bottom:1%;
  text-align:center;
}

.iframe_slide {
  width: 640px;
  height: 483px;
}

.img_responsiva{
  width: auto;
}


/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
      .container
      {
        width:100%;
       margin-top: 30px;
      }
       .liberamos
      {
        padding:180px 70px;
      }
      .navbar{
        padding:0px 0 0px 0;
      }
      .img_logo
      {
        width: 100%;
        margin-top: 10px;
      }
      .img_menu
      {
        width: 80%;
      }
      .modalnew-content{
         width: 90%; 
      }
      .form_contacto{
         margin-top:-180px;
      }
      .form_join{
         margin-top:-320px;
      }

      .modaljoin-content {
        width: 90%;
      }
      .img_joinus{
        width: 90%;
      }
      .slide_logo{  
        padding-top:0px;
        padding-bottom:0px;  
      }
      .slide_descripcion
      {  
        padding:1% 1%;
      }
      .filtro_servicio
      {
        padding:0;       
      }

      .img_item_portafolio
      {
        width: 85%;
      }

      .iframe_slide {
        width: 320px;
        height: 241px;
      }
      .img_responsiva{
        width: 90%;
      }
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
      .container
      {
        width:100%;
        margin-top: 30px;

      }
       .liberamos
      {
        padding:170px 70px;
      }
      .navbar{
        padding:0px 0 0px 0;
      }
      .img_logo
      {
        width: 161px;
        margin-top: 0px;
      }
      .img_menu
      {
        width: auto;
      }
      .modalnew-content{
         width: 90%; 
      }
      .form_contacto{
         margin-top:-320px;
      }
      .form_join{
         margin-top:-460px;
      }

      .form_contacto_row{
        margin-bottom: 5px;
      }

      .modaljoin-content {
        width: 473px; 
      }
      .img_joinus{
       width: 90%;
      }

      .slide_logo{  
        padding-top:0%;
        padding-bottom:0px; 
      }
      .slide_descripcion
      {  
        padding:1% 1%;
      }
      .filtro_servicio
      {
        padding:0;
      }
      .img_item_portafolio
      {
        width: auto;
      }
      .iframe_slide {
        width: 460px;
        height: 340px;
      }
      .img_responsiva{
        width: 90%;
      }

    }
    @media only screen and (min-width : 500px) {
      .img_responsiva{
        width: 100%;
      }
    }


    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
      .container
      {
        width:100%;
      }
        .liberamos
      {
        padding:160px 70px;
      }
      .img_logo
      {
        width: 161px;
        margin-top: 0px;
      }
       .img_menu
      {
        width: auto;
      }

      .modalnew-content{
         width: 612px; 
      }
       .form_contacto{
         margin-top:-450px;
      }
     .modaljoin-content {
        width: 473px; 
      }
      .form_join{
         margin-top:-460px;
      }

      .img_joinus{
        width: 538px;
      }

      .slide_logo{  
        padding-top:20%;
        padding-bottom:10%; 
      }
      .slide_descripcion
      {  
        padding:10% 10%;
      }
      .filtro_servicio
      {
        padding-top:2%;
        padding-bottom:2%;
      }
      .img_item_portafolio
      {
        width: auto;
      }
      .iframe_slide {
        width: 640px;
        height: 483px;
      }
      .img_responsiva{
        width: 100%;
      }
      

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
      .container
      {
        width:90%;
        max-width: 1000px;
        margin-top: 85px;
      }

       .liberamos
      {
        padding:160px 70px;
      }
      .navbar{
        padding:25px 0 25px 0;
      }
      .img_logo
      {
        width: 161px;
      }
      .img_logo
      {
        width: 161px;
        margin-top: 0px;
      }
       .img_menu
      {
        width: auto;
      }
      .modalnew-content{
         width: 612px; 
      }
       .form_contacto{
         margin-top:-450px;
      }

      .modaljoin-content {
        width: 473px; 
      }
      .form_join{
         margin-top:-460px;
      }
      .img_joinus{
       width: 538px;
      }

      .slide_logo{  
        padding-top:20%;
        padding-bottom:10%; 
      }
      .slide_descripcion
      {  
        padding:10% 10%;
      }
      .filtro_servicio
      {
        padding-top:2%;
        padding-bottom:2%;
      }

      .iframe_slide {
        width: 640px;
        height: 483px;
      }
      

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
      .container
      {
        width:90%;
        max-width: 1000px;
        margin-top: 85px;
      }

      .liberamos
      {
        padding:160px 70px;
      }

      .navbar{
        padding:25px 0 25px 0;
      }

      .img_logo
      {
        width: 161px;
        margin-top: 0px;
      }
       .img_menu
      {
        width: auto;
      }
      

      .modalnew-content{
         width: 612px; 
      }

      .form_contacto{
         margin-top:-450px;
      }

      .modaljoin-content {
        width: 473px; 
      }
      .form_join{
         margin-top:-460px;
      }
      input.input_form{
        width: 100%;
      }
      .img_joinus{
         width: 538px;
      }
      .slide_logo{  
        padding-top:20%;
        padding-bottom:10%; 
      }
      .slide_descripcion
      {  
        padding:10% 10%;
      }

      .filtro_servicio
      {
        padding-top:2%;
        padding-bottom:2%;
      }     

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }
.affix{
  padding: 0;
}

.slider_portafolio{
  height: auto;
  width:745px;
  margin:0 auto;
}

/* jssor slider bullet navigator skin 13 css */
/*
            .jssorb13 div           (normal)
            .jssorb13 div:hover     (normal mouseover)
            .jssorb13 .av           (active)
            .jssorb13 .av:hover     (active mouseover)
            .jssorb13 .dn           (mousedown)
            */
            .jssorb13 {
                position: absolute;
            }
            .jssorb13 div, .jssorb13 div:hover, .jssorb13 .av {
                position: absolute;
                /* size of bullet elment */
                width: 21px;
                height: 21px;
                background: url(../images/b05.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
            }
            .jssorb13 div { background-position: -5px -5px; }
            .jssorb13 div:hover, .jssorb13 .av:hover { background-position: -35px -5px; }
            .jssorb13 .av { background-position: -65px -5px; }
            .jssorb13 .dn, .jssorb13 .dn:hover { background-position: -95px -5px; }