/*!
 * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    background-color: #000;
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}
#titulo span{
text-transform: lowercase;
}
h1 {
    font-size: 22px;
}

h2 {
    font-size: 20px;
}

p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
}
/* Extra small devices (phones, less than 768px) */
@media(max-width:767px){
	p{
		margin: 0 0 15px;
	}
	img{
		width: 150px;
		height: auto;
	}


	#virtual img{
		width: 100%;
	}

	#portfolio img{
		width: 100%;
	}
	#portfolioModal1 img, #portfolioModal2 img, #portfolioModal3 img{
		width: 100%;
	}
    #animacion-mapa #pin{
            margin-top: 70px;   
    }
	 .navbar-brand {
		width: 80%;
		font-size: 15px !important;
	}
}

/* Small devices (tablets, 768px and up) */
@media(min-width:768px) {
    p {
        margin: 0 0 35px;
        font-size: 18px;
        line-height: 1.6;
    }
    .usuario-section {
        padding: 100px 0;
    }
	#animacion-mapa #pin{
		margin-top: 50px;
	}
    .modal-body ul{
        font-size: 20px;
    }
	img{
        width: 225px;
        height: auto;
    }

    #virtual img{
        width: 100%;
    }

	#portfolio img{
        width: 100%;
    }
    #portfolioModal1 img, #portfolioModal2 img, #portfolioModal3 img{
        width: 100%;
    }
  }

a {
    color: #42dca3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #1d9b6c;
}

.light {
    font-weight: 400;
}

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(5,150,160,.8);
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
        outline: 0;

}


.dropdown-menu {
    background-color: rgb(255,255,255);    
}
.dropdown-menu   a {
    background-color: rgb(255,255,255); 
}
.dropdown-menu li.active a{
    color: black;
 
}
.dropdown-menu > .active > a {
  background-color: rgb(5,150,160);

}

.navbar-custom .nav li.active a:hover {
    color: rgb(5,150,160);
}

@media(min-width:768px) {
    .navbar-custom {
        padding: 0 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .navbar-custom.top-nav-collapse {
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        background: #000;
    }
}

/*
intro
*/

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(introFondo.jpg) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}
	img.img-icono{
		width: 64px;
		height: auto;
		 padding:10px;
	}
@media(min-width:768px) {
    .intro {
        height: 100%;
        padding: 0;
    }

    .intro .intro-body .brand-heading {
        font-size: 70px;
    }

    .intro .intro-body .intro-text {
        font-size: 36px;
    }
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 100%!important;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
.blak{
 border: 2px solid #000;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {    
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {    
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

.content-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.tituloSeccion{
    margin-bottom: 100px;
    color:  rgb(5,150,160); 
}





.usuario-section {
    width: 100%;
    padding: 50px 0;
}

.eficiente-section {
    width: 100%;
    padding: 50px 0;
}

.innovadora-section {
    width: 100%;
    padding: 50px 0;
}

#realidad a{
    color:rgb(0,77,92);

}
#realidad a:hover{
    color:rgb(255,255,255);
    
}
.caracteristicas-section {
    width: 100%;
    padding: 50px 0;
}

#caracteristicas h3{
        color:  rgb(5,150,160); 
}

#caracteristicas span {
    color: rgb(5,150,160); 
}

#map {
    width: 100%;
    height: 200px;
    margin-top: 100px;
}

@media(min-width:767px) {
    .content-section {
        padding-top: 80px;
    }

    #map {
        height: 400px;
        margin-top: 250px;
    }
    footer{
    height: 20%;
}

#contacto{
height: 80%;

}

}

.btn {
    border-radius: 0;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-default {
    border: 1px solid rgb(0,77,92);
    color: rgb(0,77,92);
    background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid rgb(0,77,92);
    outline: 0;
    color: #fff;
    background-color: rgb(0,77,92);
}

ul.banner-social-buttons {
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    ul.banner-social-buttons li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons li:last-child {
        margin-bottom: 0;
    }
}



footer #piepagina {
    display: table;
    height: 100%;
    width: 100%;
}
footer p {
    display: table-cell;
    vertical-align: middle;
    margin:0 auto;

}

::-moz-selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

::selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: rgba(255,255,255,.2);
}


.bg-light-gray{
    background-color:#f7f7f7
}
section h2.section-heading{
    font-size:20px;
    margin-top:0;
    margin-bottom:75px;
    color:  rgb(5,150,160); 
}
section h3.section-subheading{
    font-size:18px;
    font-family:Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform:none;
    font-style:italic;
    font-weight:400;
    margin-bottom:75px
}


.portfolio-caption h4{
    /*color:#333;*/
    color:white;
    background-color: rgb(5,150,160);

}

/*+++++++++++
porfolio
++++++++++++*/

#portfolio .portfolio-item{
    margin:0 0 15px;
    right:0;

    }

#portfolio .portfolio-item .portfolio-link{
    display:block;
    position:relative;
    max-width:400px;
    margin:0 auto
    }
.borde-imagen{
        border: 0px solid rgb(5,150,160);
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover{
    background:rgba(0,77,92,.9);
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:all ease .5s;
    -webkit-transition:all ease .5s;
    -moz-transition:all ease .5s;

    }

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{
    opacity:1
    }

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{
    position:absolute;
    width:100%;
    height:20px;
    font-size:20px;
    text-align:center;
    top:50%;
    margin-top:-12px;
    color:#fff
    }

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{
    margin-top:-12px
    }

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3, #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{
    margin:0
    }

#portfolio .portfolio-item .portfolio-caption{
    max-width:400px;
    margin:0 auto;
    /*background-color: rgb(5,150,160);*/
    text-align:center;
    /*padding:25px*/
    }

#portfolio .portfolio-item .portfolio-caption h4{
    text-transform:none;
    margin:0
    }

#portfolio .portfolio-item .portfolio-caption p{
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style:italic;
    font-size:16px;
    margin:0
    }

#portfolio *{
    z-index:2
    }

@media (min-width:767px){
    #portfolio .portfolio-item{
        margin:0 0 30px
        }
    }

/*++++++++++++++
portfolio modal 
+++++++++++++++*/


.portfolio-modal .modal-content{
    border-radius:0;
    background-clip:border-box;
    -webkit-box-shadow:none;
    box-shadow:none;
    border:0;
    min-height:100%;
    padding:100px 0;
    text-align:center;
    }
.portfolio-modal .modal-content h2{
    margin-bottom:15px;
    font-size:3em;
}
.portfolio-modal .modal-content p{
    margin-bottom:30px;
    }
.portfolio-modal .modal-content p.item-intro{
    margin:20px 0 30px;
    font-family:Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style:italic;
    font-size:16px
    }
.portfolio-modal .modal-content ul.list-inline{
    margin-bottom:30px;
    margin-top:0
    }
.portfolio-modal .modal-content img{
    margin-bottom:30px
    }
.portfolio-modal .close-modal{
    position:absolute;
    width:75px;
    height:75px;
    background-color:transparent;
    top:25px;right:25px;
    cursor:pointer
    }
.portfolio-modal .close-modal:hover{
    opacity:.3
    }
.portfolio-modal .close-modal .lr{
    height:75px;
    width:1px;
    margin-left:35px;
    background-color:#222;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    z-index:1051
    }
.portfolio-modal .close-modal .lr .rl{
    height:75px;
    width:1px;
    background-color:#222;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    z-index:1052
    }
.portfolio-modal .modal-backdrop{
    opacity:0;
    display:none
    }
::-moz-selection{
    text-shadow:none;
    background:#fed136
    }
::selection{
    text-shadow:none;
    background:#fed136
    }
img::selection{
    background:0 0}
img::-moz-selection{
    background:0 0
    }
body{
    webkit-tap-highlight-color:#fed136
}
.modal-body ul{
    color:#333;

}

.btn-primary {
    background-color:rgb(0,77,92);

}
#portfolioModal1 h2, #portfolioModal1 p,#portfolioModal2 h2, #portfolioModal2 p,#portfolioModal3 h2, #portfolioModal3 p,#portfolioModal3 ul,#portfolioModal3 li{
    color: #333 ;

}
#portfolioModal1 ul{
list-style: none;

}

#portfolio h2{
    color: rgb(5,150,160); 
}



.circulos img{
    margin:0 auto;
}


.animacion-container{
    max-width: 1000px;
    width: 90%;
    padding: 0px 5%;
    margin: auto;
}

#animacion-mapa{
/*    padding: 130px 0px;*/
    position: relative;
    text-align: center;
}

/*#animacion-mapa img{
        width: 100%; 
    }
*/
#animacion-mapa #pin{
        max-width: 30%;
        height: auto;
        visibility: hidden;
    }

#animacion-mapa #img-map{
        background: url('../img/map.png') no-repeat center;
        height: 340px;
        width: 70%;
        margin: auto;
        background-size: contain;
        text-align: center;

    }

    /*
    ========================================
    Sección Contacto
    ========================================
    */



/*
==============================================
animacion hatch
==============================================
*/

.hatch{
    animation-name: hatch;
    -webkit-animation-name: hatch;  

    animation-duration: 3s; 
    -webkit-animation-duration: 3s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;

    transform-origin: 30% 100%;
    -ms-transform-origin: 30% 100%;
    -webkit-transform-origin: 30% 100%; 

     animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */


    visibility: visible !important;     
}

@keyframes hatch {
    0% {
        transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        transform: rotate(2deg) scaleY(1);
    }
    50% {
        transform: rotate(-2deg);
    }   
    65% {
        transform: rotate(1deg);
    }   
    80% {
        transform: rotate(-1deg);
    }       
    100% {
        transform: rotate(0deg);
    }                                   
}

@-webkit-keyframes hatch {
    0% {
        -webkit-transform: rotate(0deg) scaleY(0.6);
    }
    20% {
        -webkit-transform: rotate(-2deg) scaleY(1.05);
    }
    35% {
        -webkit-transform: rotate(2deg) scaleY(1);
    }
    50% {
        -webkit-transform: rotate(-2deg);
    }   
    65% {
        -webkit-transform: rotate(1deg);
    }   
    80% {
        -webkit-transform: rotate(-1deg);
    }       
    100% {
        -webkit-transform: rotate(0deg);
    }       
}

/*
==============================================
animacion rotate
==============================================
*/

.imagen_a_rotar {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s; /** Aquí controlamos la velocidad de la animación **/
 
-moz-transition-property: -moz-transform;
-moz-transition-duration: 3s; /** Aquí controlamos la velocidad de la animación **/

-webkit-animation-name: rotate;
-webkit-animation-duration: 3s; /** Aquí controlamos la velocidad de la animación **/
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
 
-moz-animation-name: rotate;
-moz-animation-duration: 3s; /** Aquí controlamos la velocidad de la animación **/
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);} /*** Estado inicial de la rotación ***/
to {-webkit-transform: rotate(-360deg);} /*** Estado final de la rotación ***/
}
 
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);} /*** Estado inicial de la rotación ***/
to {-moz-transform: rotate(-360deg);} /*** Estado final de la rotación ***/
}

/* Estilos impar*/

.impar {
    background-color: #f6f6f8;
}
.impar .impar-section{
    background: none;
    background-color: #f6f6f8;
	width: 100%;
    padding: 50px 0;
    color: #fff;
}
.impar img{
    width: 100%;  
}
.impar h2{
    color: rgb(5,150,160); 
}
.impar p{
     text-align: justify;
    text-justify: inter-word;
    color:#777;
}
.impar span{
    color: rgb(5,150,160);    
}

/* Estilos par*/
.par{
    background-color: #000;
}
.par .par-section{
    background: none;
    background-color: #000;
	width: 100%;
    padding: 50px 0;
    color: #fff;
}
.par img{
    width: 100%;  
}
.par h2{
    color: rgb(5,150,160); 
}
.par p{
     text-align: justify;
    text-justify: inter-word;
    color:#fff;
}
.par span{
    color: rgb(5,150,160);    
}



p[class="primerParrafo"]{
    margin-top:75px;  
}

/* usuario */
.usuario-section {
    width: 100%;
    padding: 50px 0;
    color: #fff;
    /*background: url(../img/usuario.png) no-repeat center center scroll;
    background-color: #000;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/*Eficiente*/
#eficiente{
   background-color: #f6f6f8;
}

#eficiente img{
    width: 100%;  
}

#eficiente p {
    color: #777;
}

#eficiente span {
    color: rgb(5,150,160); 
}

#innovadora h2{
    margin-bottom: 25px;
}

  .parrafoOculto{
    display: none;
}

  .parrafoVisible{
    display: block;
    border: none;

    position: center;
    margin: 0 auto;
    width:100%;
    color:#777;

}


.parrafoVisible i {
    color: rgb(5,150,160);
}
.parrafoVisible h5 {
    color: rgb(5,150,160);
}

button{
    background-color: #f6f6f8;

}

	.diana{
		width: 3.5%; 
		height: 12%;
		position: absolute;
	}
	
	.diana_image{
		width: auto; 
		height: 100%;
		border: 0; 
		top:0%;
		left:0%;
		position: absolute;
		z-index: 100;
		
	}
	#modos td{
		border:solid #fff 1.0pt;
		padding:5px;
		padding-left:15px;
		padding-right:15px;
	}
	
	

	#navegacion td{
		border:solid #fff 1.0pt;
		padding-left:15px;
		padding-right:15px;
		max-width:300px;
		
	}
	
	#navegacion td img{
		max-width:180px;
		height: auto;
	}
	
	#navegacion td p{
		margin-bottom:0;
		
	}
	
	#botones td{
		border:solid #fff 1.0pt;

		padding-left:15px;
		padding-right:15px;
		background-color: #000;
		max-width:400px;
	}
	#botones td img{
		max-width:40px;
		height: auto;
	}
	#botones td img.img-icon{
		max-width:40px;
		height: auto;
	}
	#botones td img.img-icon2{
		max-width:80px;
		height: auto;
	}
	#botones td img.img-icon3{
		max-width:180px;
		height: auto;
	}
	
	#menuinf td{
		border:solid #fff 1.0pt;

		padding-left:15px;
		padding-right:15px;
		background-color: #000;
		max-width:300px;
	}
	#menuinf td img{
		max-width:180px;
		height: auto;
	}
	#menuinf td img.img-icon{
		max-width:40px;
		height: auto;
	}
	#menuinf td img.img-icon2{
		max-width:80px;
		height: auto;
	}
	
	#compatibilidad td{
		border:solid #000 1.0pt;
		padding:5px;
		padding-left:15px;
		padding-right:15px;
		max-width:400px;
	}
	
	#compatibilidad  td img{
		max-width:180px;
		height: auto;
	}
	
	#navegavr td{
		border:solid #000 1.0pt;
		padding:5px;
		padding-left:15px;
		padding-right:15px;
		max-width:300px;
	}
	#navegavr td.detalle{
		max-width:130px;
	}
	#navegavr td.conjunto{
		max-width:300px;
	}
	
	#navegavr  td  img.detalle{
		max-width:110px;
		height: auto;
	}
	#navegavr  td  img.conjunto{
		max-width:300px;
		height: auto;
	}

	
	.table > tbody > tr > td, .table{
		border: 0px;
		
	}