@font-face {
  font-family: Papyrus;
  src: url(PAPYRUS.TTF);
}

@font-face {
  font-family: caflish;
  src: url(caflish.otf);
}
textarea{
  overflow:auto;
  background-color: #ededed;
  border:0px;
  resize:none;

}

.background-whoiam{

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c2201+0,ad9a8e+0,724925+100 */
  background: #4c2201; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #4c2201 0%, #ad9a8e 0%, #724925 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  #4c2201 0%,#ad9a8e 0%,#724925 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  #4c2201 0%,#ad9a8e 0%,#724925 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c2201', endColorstr='#724925',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}
.papyrus {
  font-family: Papyrus;
}

.caflish {
  font-family: caflish;
}

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

body {
  overflow-x: hidden;

  padding: 0;
  /*background: url("../images/fondo4.jpg") no-repeat center center fixed;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 0px;
  padding-right: 0px;
}

/* Custom page header */
.header {
  margin: 0px;
  height: 5em;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

.media-heading-mobile {
  display: none;
}

/* Custom page footer */
.footer {
  color: #777;
  border-top: 1px solid #e5e5e5;
}

.container {
  margin-top: 1em !important;
  z-index: 10 !important;
  padding-left: 0!important;
  padding-right: 0!important;
}


.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

.foto {
  display: none;
}

.myvideo {
  width: 35em;
  height: 20em;
}

.navbar-collapse {

  position: relative;
  left: 15em;
  top: -2.7em;
}

.media-body {
  display: table-cell!important;
  vertical-align: top;
}

.bgimage {
  text-align: right;
  color: white;
  background-size: cover;
  width: 100%;
  height: 30em;
  background-position: center center;
}

.mainbox {
  text-align: center;
  position: relative;

}

ul[rn-carousel] {
  width: 100%;
  height: 30em;
  margin-top: 2px;
}

.carousel {
  margin-top: 20px;
  display: inline-block;
  text-align: center;
}

.social-buttons {
  position: absolute;
  left: 0;
  top: 0em;
  display: inline-block;
  margin-left: 0em;

}

.social-buttons li a:hover,
.social-buttons li a:focus,
.social-buttons li a:active {

}

.instagram {
  width: 2em;
  background: #c8141e;
  padding-left: 0.5em;
  margin-bottom: 1px !important;

}

.facebook {
  width: 2em;
  background: #3b5998;
  padding-left: 0.5em;
  margin-bottom: 1px !important;

}

.blog {
  width: 2em;
  background-color: #5bb3bb;
  padding-left: 0.5em;
  margin-bottom: 1px !important;

}
.linkedin {
  background-color: #0F6AB4;
  width: 2em;
  padding-left: 0.5em;
  margin-bottom: 1px !important;
}
.instagram > a > i, .facebook > a > i, .blog > a > i, .linkedin > a > i {
  color: white !important;
}

.blog:hover, .linkedin:hover, .instagram:hover, .facebook:hover {

  background-color: #5cb99f;
}


.icono-footer{
  border-radius: 3px;
  color: white !important;
  padding: 0.5em;
}


.cabecera, .pie {
  font-family: Papyrus;
  font-size: 24px;
  color: #702019;
  font-weight: bold;
  text-align: center;
}

.cuerpo {
  font-family: Papyrus;
  font-size: 20px;
  text-align: center;

}


.cliente {
  color: #702019;
  font-size: 16px;
}

/*.newsletter {*/
  /*font-family: Papyrus;*/
  /*text-decoration: none;*/
  /*font-size: 20px;*/
  /*padding-left: 5px;*/
  /*color: #702019;*/
  /*font-weight: bold;*/
  /*width: 20em;*/
  /*height: 15em;*/
 /*// background: url("../images/main/newsletter.jpg") no-repeat;*/

/*}*/

.links {
  font-family: Papyrus;
  text-align: center;
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;

  background-color: #702019;
}

.about {
  overflow-x: hidden;
  padding: 2em;

}

.technologies {

  overflow-x: hidden;
  padding-left: 6em;
  padding-top: 2em;
}

.tech {
  width: 150px !important;
  padding: 1em;
}

.tech:hover {
  transform: scale(1.5);

}

.home {
  margin-left: 1em;
  margin-top: 2em;
  padding: 10px;
}

.wrapper {
  margin: 2em;
  padding: 2em;
  background-color: #ededed;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  min-height: 40em;
}
.wrapper-whoiam {
  margin-bottom: 1em;
  margin-left: 4em;
  margin-top: 2em;
  padding: 2em;
  background-color: #ededed;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  min-height: 30em;
}

.wrapper-ancho {

  margin: 2em;
  padding: 2em;
  background-color: #ededed;
  border: 1px solid #e6e6e6;
  border-radius: 10px;

}
.wrapper-image {

  margin-right:2em ;
  margin-left:2em ;

}
.image-whoiam{
  width: 16em;
  margin-right: 2em;
  margin-left: 1em;
  margin-top: 2em;
  border-radius: 10px;

}
.image-logros{
  width: 8em;

  margin-top: 0.5em;
  margin-left: 5em;

}
.layer{
  position: relative;
  width: 100%;
}
.contactTitle {
  padding: 10px;
  color: white;

}

.contact {
  background-color: #702019;

  margin-top: 20px;
  margin-bottom: 15px;
}
.areas-title{
  font-family: Papyrus;

  color: #702019;
  font-weight: bold;
}
.areas-subtitle{
  margin-top: 1em;
  font-family: Papyrus;
  font-size: 18px;

  font-weight: bold;
}
.cuerpo-area{
  font-family: Papyrus;
  font-size: 16px;
}
.sliderText{
  color: white;
  z-index: auto;
  padding-left: 1em;
  padding-right: 1em;
  font-family: Papyrus;
}

.bandera{
  width: 6em;
  height: 6em;
  border-radius: 100px;
  margin: 1em;
  border: 3px solid #1abc9c;
}
div > h3 > span {
  position: relative;
  top: -100px;
  left:-1000px;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;

  -webkit-animation: example 6s infinite; /* Safari 4.0 - 8.0 */
  -moz-animation:    example 5s infinite;
  -o-animation:      example 5s infinite;
  animation:         example 5s infinite;


}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:-1000px;}
  25%  {left:700px;}
  50%  {left:700px;}
  100% { left:-1000px;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:-1000px;}
  25%  {left:700px;}
  50%  {left:700px;}
  100% { left:-1000px;}
}
@-moz-keyframes example {
  0%   {left:-1000px;}
  25%  {left:700px;}
  50%  {left:700px;}
  100% { left:-1000px;}
}
@-o-keyframes example {
  0%   {left:-1000px;}
  25%  {left:700px;}
  50%  {left:700px;}
  100% { left:-1000px;}
}
@keyframes rotateY {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotateY {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg);
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  .idiomas {
    display: none
  }

  .home {
    margin-left: 10em;
    margin-top: 5em;
    padding: 10px;
  }

  .navbar {
    margin: 0px;
  }

  div.container {

    width: 100% !important;
    text-align: left;

  }

  .nav {
    width: 100%;
  }

  .nav .navbar-nav {
    background-color: white;
    z-index: 1010;
  }

  .navbar-nav > li {
    width: 11%;

  }

  .navbar-nav > li > a {
    width: 66%;

    font-size: 12px;
    text-align: center;
    color: #5cb99f !important;
    background-color: white !important;
    padding: 0px !important;
    z-index: 1011;
  }

  .navbar-nav > li > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #5cb99f;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }

  .navbar-nav > li > a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }

  .foto {
    width: 70em;
    display: inline-block;
  }

  .foto2 {
    display: none;
  }

  /* Supporting marketing content */
  .marketing {
    margin: 40px 0;
  }

  .marketing p + h4 {
    margin-top: 28px;
  }

  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0em;
  }

  /* Space out the masthead */
  .header {

  }

  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }

  .contact-form {

    background-color: #ffffff;
    text-align: left;
    margin: 2em;

  }

  label {
    color: #444;
    font-size: 15px;
  }

  label span {
    color: #ff4141;
    font-size: 11px;
  }

  .formulario {
    margin: 2em;
    padding-left: 1em;
    padding-right: 1em;

    overflow: hidden;

    z-index: 20;
    background-color: #fff;
  }

  .form-btn {
    padding: 0 15px;
    height: 30px;
    font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    cursor: pointer;
    border: 1px solid #0d3d6a;
    background-color: #2F57B7;
    clear: both;
    float: right;
  }

  .form-btn:hover {
    color: #8598C6;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  }

  .column:first-of-type {
    float: left;
    position: relative;
  }

  .column:last-of-type {
    float: right;
    margin: 0 0 20px 40px;
  }

  .bg-black {
    background-color: black !important;

  }

  .foto {
    position: relative;
    width: 6em;
    display: inline-block;
  }

  .ng-scope > div.content {
    margin: 0em;
  }

  .media {
    position: relative;
    top: 1em;
    display: inline;
  }

  .right {
    position: relative;

  }

  .media-left {
    position: relative;
    left: 4em;
    top: 0em;
    display: inline-block;
  }

  .media-right {
    position: absolute;
    left: 114em;
    top: 0.3em;
    width: 10em;

  }

  .rotulo {
    position: relative;
    font-size: x-large;

  }

  .languaje {
    position: relative;
    z-index: 20;
    top: -0.3em;
  }

  .media-heading {
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    top: 0.4em;
    left: 5em;
  }

  .ng-scope > div.content {
    width: 80em;;
    margin: 4em;
    padding: 5em;

  }

  .about {
    margin-left: 6.5em;
  }

  .social-buttons-mobile > a {
    display: none;
  }

  ul[rn-carousel].frases {
    width: 100%;
    height: 5em!important;
    margin-bottom: 1em;
    margin-left: 10px;

  }
}

@media screen and (max-width: 768px) {
  .media-heading-mobile {
    display: block;
    position: absolute;
    top: 0.4em;
    left: 0.6em;
    color: whitesmoke;
  }

  .media-heading {
    display: none;
  }
  .formulario{
    margin: 2em;
  }
  .navbar-header {
    background: #5cb99f;
    background: -moz-linear-gradient(top, #5cb99f 0%, #5cb99f 41%, #49947f 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5cb99f), color-stop(41%, #5cb99f), color-stop(100%, #49947f));
    background: -webkit-linear-gradient(top, #5cb99f 0%, #5cb99f 41%, #49947f 100%);
    background: -o-linear-gradient(top, #5cb99f 0%, #5cb99f 41%, #49947f 100%);
    background: -ms-linear-gradient(top, #5cb99f 0%, #5cb99f 41%, #49947f 100%);
    background: linear-gradient(to bottom, #5cb99f 0%, #5cb99f 41%, #49947f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb99f', endColorstr='#49947f', GradientType=0);
    z-index: 100;
    position: fixed;
    width: 100% !important;

  }

  .bgimage {
    text-align: right;
    color: white;
    background-size: cover;
    height: 10em;
    background-position: center center;
  }

  ul[rn-carousel] {
    width: 100%;
    height: 9em!important;

    margin-left: 8px;

  }

  ul[rn-carousel].frases {
    width: 100%;
    height: 5em!important;
    margin-bottom: 1em;
    margin-left: 7px;

  }


  .col-centered {
    float: none;
    margin: 0 auto;
  }
  h2{
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .ul.image.ng-scope{
    height: 4em!important;
  }

  .media-left {
    display: none
  }

  .languaje {
    display: none
  }

  .sello {
    display: none;
  }

  .social-buttons {
    display: none;
  }

  .header {
    height: 30px
  }

  .navbar {
    width: 100%;
    position: fixed;
    z-index: 12;
  }

  .navbar-collapse {
    padding-top: 0em;
    padding-left: 1.5em;
    position: fixed;
    z-index: 15;
    left: -8em;
    width: 17em;
    top: 1.3em;
  }

  .noShowMobile {
    display: none;
  }
}

.foto2 {
  width: 1.7em;
  border-radius: 3px;
}

.navbar-nav > li > a {
  border-radius: 0px;
  z-index: 1011;
}

.navbar {
  border: 0px !important;

}

.social-buttons-mobile {

  text-align: center;
  display: inline-block;

}

.social-buttons-mobile > a {
  color: darkgrey;
  margin: 5px;
}

.navbar-nav > li > a {
  color: white;
  font-size: 12px;
  background-color: #49947f;
  z-index: 1011;
  overflow: visible;
}

/* fin media */

/* media  para pantallas de pc pequeñas */
@media screen and (min-width: 1760px) {

  .navbar-nav {
    position: relative;
    left: 30em;
    top: 1em;
    width: 100%;
    z-index: 1010;
  }


}

@media screen and (min-width: 1605px) and (max-width: 1760px) {

  .navbar-nav {
    position: relative;
    left: 27em;
    top: 1em;
    width: 100%;
    z-index: 1010;
  }
}

@media screen and (min-width: 1520px) and (max-width: 1604px) {

  .navbar-nav {
    position: relative;
    left: 23em;
    top: 1em;
    width: 100%;
    z-index: 1010;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1519px) {

  .navbar-nav {
    position: relative;
    left: 20em;
    top: 1em;
    width: 100%;
    z-index: 1010;
  }
  .sliderText{
    color: white;
    z-index: auto;
    padding-left: 1em;
    padding-right: 1em;
    font-family: Papyrus;
    font-size: 20px;
  }
  .image-whoiam{
    width: 14em;
    border-radius: 10px;
  }

  div > h3 > span {
    position: relative;
    top: -100px;
    left:-1000px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 15px;

    -webkit-animation: example 6s infinite; /* Safari 4.0 - 8.0 */
    -moz-animation:    example 5s infinite;
    -o-animation:      example 5s infinite;
    animation:         example 5s infinite;


  }

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
    0%   {left:-1000px;}
    25%  {left:500px;}
    50%  {left:500px;}
    100% { left:-1000px;}
  }

  /* Standard syntax */
  @keyframes example {
    0%   {left:-1000px;}
    25%  {left:500px;}
    50%  {left:500px;}
    100% { left:-1000px;}
  }
  @-moz-keyframes example {
    0%   {left:-1000px;}
    25%  {left:500px;}
    50%  {left:500px;}
    100% { left:-1000px;}
  }
  @-o-keyframes example {
    0%   {left:-1000px;}
    25%  {left:500px;}
    50%  {left:500px;}
    100% { left:-1000px;}
  }
}

@media screen and (min-width: 769px) and (max-width: 1399px) {

  .navbar-nav {

    position: relative;
    left: 8em;
    top: 1em;
    width: 100%;
    z-index: 1010;
  }

  .sliderText{
    color: white;
    z-index: auto;
    padding-left: 1em;
    padding-right: 1em;
    font-family: Papyrus;
    font-size: 18px;
  }

  .image-whoiam{
    width: 14em;
    border-radius: 10px;
  }
  div > h3 > span {
    position: relative;
    top: -100px;
    left:-1000px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 15px;

    -webkit-animation: example 6s infinite; /* Safari 4.0 - 8.0 */
    -moz-animation:    example 5s infinite;
    -o-animation:      example 5s infinite;
    animation:         example 5s infinite;


  }
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
    0%   {left:-600px;}
    25%  {left:280px;}
    50%  {left:280px;}
    100% { left:-600px;}
  }

  /* Standard syntax */
  @keyframes example {
    0%   {left:-600px;}
    25%  {left:280px;}
    50%  {left:280px;}
    100% { left:-600px;}
  }
  @-moz-keyframes example {
    0%   {left:-600px;}
    25%  {left:280px;}
    50%  {left:280px;}
    100% { left:-600px;}
  }
  @-o-keyframes example {
    0%   {left:-600px;}
    25%  {left:280px;}
    50%  {left:280px;}
    100% { left:-600px;}
  }
}

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

  .navbar-nav {
    position: fixed;
    top: 3.2em!important;
    left: 0.9em!important;

    z-index: 1010;
  }

  .sliderText{
    color: white;
    z-index: auto;
    padding-left: 1em;
    padding-right: 1em;
    font-family: Papyrus;
    font-size: 10px;

  }
  .wrapper-whoiam {

      margin-left: 1em;
  }
  .wrapper-logros {
    margin-left: 1em;
    margin-right: 1em;


  }
  .wrapper-image{
    margin: 0;
  }

  .image-whoiam{
    width: 6em;
    margin: 1em  6em 1em;
    border-radius: 10px;
  }
  .image-logros{
    width: 6em;
    margin: 1em  6em 1em;
  }

  div > h3 > span {
    position: relative;
    top: -160px;
    left:-1000px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;

    -webkit-animation: example 6s infinite; /* Safari 4.0 - 8.0 */
    -moz-animation:    example 5s infinite;
    -o-animation:      example 5s infinite;
    animation:         example 5s infinite;


  }
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
    0%   {left:-500px;}
    25%  {left:60px;}
    50%  {left:60px;}
    100% { left:-500px;}
  }

  /* Standard syntax */
  @keyframes example {
    0%   {left:-500px;}
    25%  {left:60px;}
    50%  {left:60px;}
    100% { left:-500px;}
  }
  @-moz-keyframes example {
    0%   {left:-500px;}
    25%  {left:60px;}
    50%  {left:60px;}
    100% { left:-500px;}
  }
  @-o-keyframes example {
    0%   {left:-500px;}
    25%  {left:60px;}
    50%  {left:60px;}
    100% { left:-500px;}
  }
}