@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic,400italic,600italic,700,700italic,800,800italic);

.black {
  color: #000;
}

.white {
  color: #FFF;
}

/*BASIC*/
.center{
  text-align: center;
}
.servicios ul{
   padding-left: 40px;
}
ul {
  padding: 0;
  margin: 0;
 
}
h2{ 
text-align: center;
padding-bottom: 20px; 
padding-top: 10px; 
}

p {
  font-size: 14pt;
  line-height: 28px;
  font-family: 'Open Sans', sans-serif;
  text-align: justify;
  letter-spacing: 1px;
}
footer p {
  font-size: 17pt;
  line-height: 20px;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

body {
  background-color: #fff!important;
  overflow-x: hidden;
}

.templatemo-flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}


/*PARALLAX*/

[class*="bg__"] {
  height: 100vh;

  position: relative;
  /* fix background */
  background-attachment: fixed;

  /* center it */
  background-position: center center;


  /* Scale it nicely to the element */
  background-size: cover;

 
}

.bg__first {
  background-image: url(../images/first-bg.jpg);
}
.bg__first .container {
  height: 100.5vh;
  min-height: 440px;
}

.bg__second {
  border-bottom: 5px solid #fff;
  height: 45vh;
  background-image: url(../images/second-bg.jpg);
}
.bg__clientes{
  border-bottom: 5px solid #091e3b;
  height: 60vh;
  background-image: url(../images/portafoliobg.jpg);
}
.bg__appweb{
  border-bottom: 5px solid #091e3b;
  height: 60vh;
  background-image: url(../images/appweb.jpg);
}
.bg__third {
  height: 130vh;
  background-image: url(../images/third-bg.jpg);
}

.bg__fourth {
  height: 100vh;

  background-image: url(../images/fourth-bg.jpg);
}

/*HEADER*/

.navbar-brand img {
  width: 70%;
  margin-right: 5px;
}


.navbar {
  margin-bottom: 0px!important;
}

.navbar-inverse {
  background-image: none;
  background-color: #091e3b!important;
  border-radius: 0!important;
  border-color: transparent!important;
  border-bottom: 10px solid #fff!important;
  height: 85px;


}
.nav{
  margin-top: 18px;
}

.nav a {
  margin-top: 0px;
  font-size: 19px;
  color: #fff!important;
  text-shadow: none!important;
  margin-left: 10px; 
  font-family: 'Open Sans', sans-serif;
  background: #091e3b;

}

.nav a:hover {
  color: #888;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
  
}


.nav span {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-top: -10px;
  display: inline-block;
  background-color: #000;
  padding: 6px 12px;
  text-align: center;
  border-color: transparent;
}

.nav .sub-menu {
  margin-left: 10px;
  position: absolute;
  background-color: #000;
  width: 100px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 1.5s ease;
          transition: opacity 1.5s ease;
  z-index: 12;
}

.nav .sub-menu li {
  list-style: none;
  padding: 10px 0px;
  border-bottom: 1px solid #eee;
}

.nav .sub-menu li:first-child {
  border-top: 3px solid #000;
}

.nav .sub-menu li a {
  font-size: 13px;
  text-decoration: none;
}



/*Inicio*/

.left-image {
  float: right;
  overflow: hidden;
  background-size: cover;
  max-width: 100%;
}
.right-caption hr{
  margin: 20px 0 30px 0;
}
.right-caption {
  color: #fff;
  opacity: .75;
}
.inicio {
  background-color: #091e3b;
  padding: 30px;
  opacity: 0.75;
}
.right-caption h4 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.right-caption h2 {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}
.right-caption p {
  color: #fff!important;
}
.arrow {
  position: absolute;
  left: 0;
  bottom: 72px;
  width: 100%;
  text-align: center;
}
.arrow i {
  font-size: 22px;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50%;
}
.arrow i:hover {
  color: #999;
  border-color: #999;
  -webkit-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}
.arrow:active .btn {
  box-shadow: none;
}

/*Nosotros*/

#nosotros-section{
  padding: 5%;
}
.left-text {
  width: 130%;
  position: absolute;
  margin-top: 18%;
  background-color: #091e3b;
  opacity: 0.75;
}
.left-text h2 {
  margin-right: 30px;
  margin-left: 30px;
  padding-top: 10px;
  padding-bottom: 15px;
  font-size: 34px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 1px;
}
.left-text  hr {
  margin: -5px 30px 10px 30px;
}
.left-text p {
  margin: 30px;
  color: #fff;
}
/*Servicios*/

.servicios {
  background-color: #091e3b;
}
.sevice-items {
  margin-top: 80px;
  color: #fff;
}
.sevice-items h2{
 font-size: 34px;
 letter-spacing: 1px;
}
.servicios-items hr{
  margin: 20px 0 30px 0;
}
.servicios-items li{
   font-size: 14pt;
  line-height: 28px;
  letter-spacing: 1px;

}
.servicios-items{
  margin-bottom: 0px;
  color: #fff;
}
.servicios-items .col-md-12{
  margin-top: 120px;
  margin-bottom: 30px;
}
.servicios-items h4{
  font-size: 34px;
}
#litigio-section img{
  width: 100%;
  padding-top: 10px;
}
#adminis-section img{
  width: 100%;
}
#consultoria-section img{
  width: 100%;
}
#optimizacion-section img{
  width: 100%;
}
#desarrollo-section img{
  width: 100%;
}
.single-item {
  text-align: center;
  margin-bottom: 20px;
}
.single-item:hover i {
  background-color: white;
  color: #fff;
  background-image: url(../images/btn-hover.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-transition: all 0.5s ease 0s;
          transition: all 0.5s ease 0s;
  border-color: transparent;
}
.single-item i {
  background-image: url(../images/btn.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 30px;
  font-size: 26px;
  color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  display: inline-block;
  text-align: center;
}
.single-item h2 {
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 1px;
  color: #fff;
  font-weight: 700;
}
.single-item p {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 20px;
}
.service-arrow  {
  text-align: center;
  margin-top: 10px;
  padding-bottom: 20px!important;
}
.service-arrow i {
  font-size: 22px;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 50%;
}
.service-arrow i:hover {
  color: #999;
  border-color: #999;
  -webkit-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}
.service-arrow:active .btn {
  box-shadow: none;
}

/*Clientes*/

.clientes img {
  width: 15%;
  padding: 20px;
  text-align: center;
}
.clientes img:hover {
  opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

.clientes-arrow  {
  text-align: center;
  margin-top: 10px;
  padding-bottom: 20px!important;
}
.clientes-arrow i {
  font-size: 22px;
  color: #091e3b;
  width: 30px;
  height: 30px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border: 1px solid #091e3b;
  border-radius: 50%;
}
.clientes-arrow i:hover {
  color: #999;
  border-color: #999;
  -webkit-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}
.clientes-arrow:active .btn {
  box-shadow: none;
}
/*app web*/
#appweb-section {
   background-color: #091e3b;
   padding: 50px 0 50px 0;
}
#appweb-section h2{
   color: white;
}
#appweb-section p{
   color: white;
   justify-content: center;
}

#appweb-section .imagen {

    background-repeat: no-repeat;
    background-position: center;
    margin-top: 30px;
    font-size: 26px;
    color: #fff; 
    border: 2px solid #e7e7e7;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  line-height: 300px;
  display: inline-block;
  text-align: center;
}
#appweb-section .btn{
  margin: 20px;
  padding: 10px 50px;
  border: 1px solid #e7e7e7;
  color: white;
}
#appweb-section .btn:hover{
  opacity: .5;
}

#appweb-section .btn a{
  color:; white;
}

/*Contacto*/

#contacto-section .redes img{
padding-left: 10px;
}
#contacto-section .redes a:hover{
opacity: 50%;
}
#contacto-section .formulario{
  padding-top: 50px;
}
#contacto-section {
  text-align: center;
  background-color: #fff;
}
#contacto-section h1 {
  font-size: 34px;
  color: #091e3b;
  font-weight: 700;
  padding-bottom: 15px;
  border-bottom: 1px solid #000;
}
#contacto-section p {
  margin-top: 5px;
}
.submit-form {
  margin-top: 40px;
}
.submit-form input {
  color: #888;
  padding: 8px 10px;
  font-size: 13px;
  width: 100%;
  outline: none;
  border: 1px solid #ddd;
}
.submit-form select {
  color: #888;
  padding: 8px 10px;
  font-size: 13px;
  width: 100%;
  outline: none;
  border-color: #ddd;
}
#contacto-section .templatemo-submit {
  display: block;
  margin-top: 44px;
  margin-bottom: 60px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 60px;
  color: #fff;
  background-color: #091e3b;
  border: 0px;
}
.templatemo-center {
  text-align: center;
}

/*FOOTER*/

footer {
  background-color: #091e3b;
  text-align: center;
}
footer h4 {
  color: #fff;
}
.gdl{
   background-image: url(../images/gdl.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
.mx{
   background-image: url(../images/mx.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
.tj{
   background-image: url(../images/tj.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
.contacto-item {
  text-align: center;
  margin-top: 30px;

}
.contacto-item:hover i {
  colimagesor: #fff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-transition: all 0.5s ease 0s;
          transition: all 0.5s ease 0s;
  border-color: transparent;
}
.contacto-item i {
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 30px;
  font-size: 26px;
  color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  line-height: 120px;
  display: inline-block;
  text-align: center;
}
.copyright-text{
  margin-top: 50px;
  margin-bottom: 50px;
}
.copyright-text h2{
 color: #fff;
 letter-spacing: 1px;
}
.copyright-text h4{
  font-size: 28px;
}
.copyright-text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 25px;
  color: #fff;
  font-weight: 400;
  padding-bottom: 10px;
  letter-spacing: 0px;
}
.copyright-text a {
  color: #f9c9c9!important;
  text-decoration: none!important;
}

/*Flechas*/
.third-arrow  {
  text-align: center;
  padding-bottom: 40px;
}
.third-arrow i {
  font-size: 22px;
  color: #fff;
  width: 30px;
  height: 30px;
  background-color: #091e3b;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border: 1px solid #fff;
}
.third-arrow i:hover {
  -webkit-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}
.third-arrow:active .btn {
  box-shadow: none;
}

/*RESPONSIVE*/

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
.navbar-brand img{
  width: 60%;
  margin-right: 20px;
  margin-top: -80px;
}
.navbar-inverse{
  border-bottom: 5px solid #fff!important;
}
.right-caption h2 {
  font-size: 20px;
}

p {
  font-size: 10pt;
  line-height: 20px;
  }

.left-text h2 {
  font-size: 20px;

}
.left-text{
  width: 110%;
  margin-top: 40%;
}
.single-item h2{
  font-size: 15px;
}

.servicios-items h4{
  font-size: 20px;
  padding-top: 20px;
}
.servicios-items li{
  font-size: 10pt;
  line-height: 20px;
}
.servicios ul{
  padding-left:20px;
}
.clientes img{
  width: 50%;
}
#contacto-section .redes img{
  padding-left: 20px;
  width: 25%;
}
#contacto-section h1{
   font-size: 20px;
}
#appweb-section .imagen{
  width: 200px;
  height: 200px;
}
.copyright-text h4{
  font-size: 20px;
}
.bg__first {
  background-image: url(../images/first-bg-movil.jpg);
  background-attachment: inherit;}

.bg__second, .bg__third, .bg__clientes, .bg__appweb{
    background-attachment: inherit;
}



}