.frase_typed{
  color: #FE5F55;
}

#btnToggle{
  color: #333;
  border-color: #FE5F55;
}

.text-logo{
font-family: "Times New Roman", Georgia, serif;
font-size: 26px;
 font-weight: bold;
}

#oper a{
background-color: #FFF;
font-size: 1.6em;
text-align: left;
color: #212121;
 border: 1px solid #FFCCBC;

}

#oper i{
  color: #FF5722;
}

#frase{
background-color: #607D8B;
color: #FFFFFF;
font-size: 1.5em;
}

#impoexpo i{
color: #FE5F55;
}

#estadisticas .card{
/*background-color: #607D8B;*/
border: 1px solid #FE5F55;
color: #495867;
font-size: 1.2em;

}

#estadisticas .card-title{
 font-size: 3.1em;
 font-weight: bold; 
}

.city{
  color:#6C757D;
}

.card-footer a{
  color: #FFF;
  
}

.city a{
  color: #495867;
}

.city a:hover{
  color: #F55F55;
}


.card-footer a:hover{
  color: #F55F55;
}

.city-body a{
  color: red;
}

.city:hover{
  transform: translateY(-5px);
  box-shadow: 0 12px 16px rgba(0,0,0,0.2);
  color: #5C636A;
}

.card-footer{
  background-color: #F7F7FF  !important;
  color: #F7F7FF !important;
}


 .header {
  /*background: url(img/portada.png) no-repeat center;
  background-size: cover;*/
 min-height: 70vh;
 


}

/**Animaciones **/

/**Barco 1 **/

#barco1{
    position: absolute;
    
    animation-name: ship1;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    
}

@keyframes ship1{
  0%{left: 0; bottom: 20%;}
  50%{left:70%;bottom:0% ;}
  70%{left: 90%; bottom: 10%;}
  100%{left: 0%; bottom: 20%;}

}
/** **/


/** barco2 **/
#barco2{
    position: absolute;
    
    animation-name: ship2;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}

@keyframes ship2{
  0%{left: 0; bottom: 0%;}
  50%{left:50%;bottom:20% ;}
  70%{left: 90%; bottom: 0%;}
  100%{left: 0%; bottom: 0%;}

}

/** barco3 **/
#barco3{
    position: absolute;
    
    animation-name: ship3;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}

@keyframes ship3{
  0%{right: 0; bottom: 0%;}
  50%{right:50%;bottom:15% ;}
  70%{right: 90%; bottom: 0%;}
  100%{right: 0%; bottom: 0%;}

}

/** barco4 **/
#barco4{
    position: absolute;
    
    animation-name: ship4;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}

@keyframes ship4{
  0%{right: 0; bottom: 10%;}
  50%{right:10%;bottom:20% ;}
  70%{right: 85%; bottom: 0%;}
  100%{right: 0%; bottom: 10%;}

}

/** **/
/** barco5 **/
#barco5{
    position: absolute;
    
    animation-name: ship5;
    animation-duration: 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}

@keyframes ship5{
  0%{left: 0; bottom: 5%;}
  70%{left: 85%; bottom: 0%;}
  100%{left: 0%; bottom: 5%;}

}

/** **/




/** avion1 **/
#avion1{
    position: absolute;
    
    animation-name: airplane1;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    
}

@keyframes airplane1{
  0%{left: 0; bottom: 50%;}
  30%{left: 15%; bottom: 70%;}
  60%{left: 40%; bottom: 85%;}
  90%{left: 85%; bottom: 97%;}
  

}

/** **/

/** avion2 **/
#avion2{
    position: absolute;
    
    animation-name: airplane2;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    
}

@keyframes airplane2{
  0%{right: 0; bottom: 40%;}
  30%{right: 15%; bottom: 50%;}
  90%{right: 85%; bottom: 97%;}
  

}

/** **/

#info{
  background-color: #577399;
}

#navieras a{
  color: #212529;
  text-decoration: none;
}

#almacenes a{
  color: #212529;
  text-decoration: none;  
}

#togglemb{
  color: #333;
}
.encabezado{
  background-color:#F7F7FF ;
  color: #FE5F55;

}

.mobile-menu{
  color: #FE5F55 ;
  border: 1px solid #FE5F55 ;
  border-radius: 20px;
  
}

.mobile-menu a{
  color: #495867;
  text-decoration: none;
}

.mobile-menu a:hover{
  color: #FE5F55;
  text-decoration: none;
}    


.card-selected:hover{
  color: #F7F7FF;
  text-decoration: none;
  background-color: #F55F55 ;
}

.header .navbar {
  background-color: transparent !important;
}




#btn_contact{
	background-color: #FE5F55 !important;
	color: #FFF;
}

#main_container{
	background-color: #FFFFFF;
}


#navbarSupportedContent ul{
  background-color: #FFFFFF;

}

#navbarSupportedContent a{
  color: #212121;
}

#navbarSupportedContent a:hover{
  color: #212121 !important;
  background-color: #FFCCBC !important;


}

.list-group-item.active{
  background-color: #FFCCBC !important;
  border-color: #FFCCBC !important;
  color: #495867 !important;

}

#cuentas p{
  line-height:80%;
}

.parrafos_index{
  font-size: 1.1rem;
}

  #indicadores{
    color: #FFFFFF;
    /*background-color: #E64A19;*/
    background-color: #495867;
  }


 /*Modal */ 
 .modal-header{
background-color:#495867 ; 
color: #F7F7FF;

 }

#contactoFormPc button{
  background-color: #FE5F55 ;
  color: #FFFFFF;
}

#contactoFormMb button{
  /*background-color: #FF5722 ;*/
  background-color: #FE5F55 ;


  color: #FFFFFF;
}


@media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
      border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }

    .dropdown-menu .dropdown-menu{
      margin-left:0; margin-right: 0;
    }

    .dropdown-menu li{
      position: relative;
    }
    .nav-item .submenu{ 
      display: none;
      position: absolute;
      left:100%; top:-7px;
      
    }
    .nav-item .submenu-left{ 
      right:100%; left:auto;

    }

    .nav-link{
    font-size: 1.2em !important;
    }

    .dropdown-menu > li:hover{
     background-color: #FFCCBC;
     color: #212121 !important;
     }

     .dropdown-item > li:hover{
     background-color: #FFCCBC;
     color: #212121 !important;
     }

    .dropdown-menu > li:hover > .submenu{
      display: block;
    }


#importacion {
  /*background: url(img/containers.png) no-repeat center;*/
  background: url(img/maps.svg) no-repeat center;
  background-size: cover;
 min-height: 100vh;
 
 
}



#carga_suelta {
  background: url(img/containership.svg) no-repeat center;
  background-size: cover;
 min-height: 100vh;
 
}

#puertos {
  background: url(img/ports.svg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 min-height: 100vh;
 
}

#din {
  background: url(img/document.svg) no-repeat center;
  background-size: cover;
 min-height: 100vh;
 
}



  } 

/**login **/

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/** **/