/* =============================================================

   GENERAL STYLES

 ============================================================ */

  @font-face {

    font-family: "arial";

    src: url(../fonts/arial.ttf) format("truetype");

}



  @font-face {

    font-family: "jennasue";

    src: url(../fonts/jennasue.ttf) format("truetype");

}



  @font-face {

    font-family: "century";

    src: url(../fonts/century.ttf) format("truetype");

}



body {

    font-size: 16px;

    font-family: "arial";

    background-color: rgb(0, 66, 104);;

    background-repeat: no-repeat, no-repeat;

    -moz-background-repeat: no-repeat, no-repeat;

    -webkit-background-repeat: no-repeat, no-repeat;

    background-repeat: no-repeat, no-repeat;

    -webkit-background-size: 100% 100% ;

    -moz-background-size: 100% 100% ;

    background-size: 100% 100% ;

    -o-background-size: 100% 100% ;

    background-size:100% 100% ;

    width: 100% !important;

    height: 100%;

}



.padlr{

    padding-left: 0px;

    padding-right: 0px;

}



.padl{

padding-left: 0px;

}



.padr{

    padding-right: 0px;

}



.padslo{

    padding-top: 30px;

}

.conteeaderprin{

  position: relative;

    z-index: 10;

    width: 95%;

    float: right;

    padding-right: 5%;

}

.textoheader{

position: relative;

    z-index: 10;

    width: 65%;

    float: left;

}

.textotelhea{

  position: relative;

    z-index: 10;

    width: 35%;

    float: right;

}

.textotelhea span{

    color: #FFF;

    display: inline-block;

    width: 100%;

    font-size: 14px;

    text-align: right;

    padding: 5px 4%;

}

.textotelhea span i{

  padding: 0px 5px;

}

.textoheader h3{

color:#FFF;

text-transform: uppercase;

}

.textoheader p{

  color: #FFF;

  font-family: "arial";

  font-size: 14px;

}

.imagenheader{

        background: url("../img/inicio/barra superior.jpg");

    background-repeat: no-repeat, no-repeat;

    -moz-background-repeat: no-repeat, no-repeat;

    -webkit-background-repeat: no-repeat, no-repeat;

    background-repeat: no-repeat, no-repeat;



    background-attachment: fixed;

        padding: 25px 0px;

}

.textonoso{

    padding: 30px;

    background-color: #FFF;

}

.textonoso h3{

color: rgb(0, 171, 228);

text-align: left;

}

.textonoso p{

    font-size: 16px;

    text-align: justify;

    font-weight: bold;

}

.textonoso2{

    padding: 30px;

    }

.textonoso2 h3{

color: rgb(0, 171, 228);

text-align: left;

}

.textonoso2 p{

    color: #FFF;

    font-size: 16px;

    text-align: justify;

}

.princnos{

       padding: 60px 60px 30px 60px;

    background-color: #FFF;

}

.imagp{

 

    padding: 60px 0px;

}

.imagp img{

  margin: 0px auto;

}

.textonoso2 ul li{

    color: #FFF;

}

.textonoso{

    padding: 30px;

    background-color: #FFF;

}

.textonoso h3{

color: rgb(0, 171, 228);

text-align: left;

}



.textonoso p{

  font-family: "arial";

    font-size: 18px;

    text-align: justify;

    font-weight: bold;

}

.cambinos{

    padding: 30px 60px 30px 60px;

}

.servite{



}

.servite h3{

color: rgb(0, 171, 228);

text-align: left;

}

.servite ul.listaservi{



}

.sistemat{



}

.sistemat p{

    font-size: 16px;

    text-align: justify;

}

.sistemat h3{

color: rgb(0, 171, 228);

text-align: left;

}

.sistemat h4{

color: rgb(0, 171, 228);

text-align: left;

}

.sistemat ul li{

font-size: 14px;

}

.tobosisstg{

 padding: 60px;

}

.tobosisstg li{

    width: 100%;

    background-color: #82B8D0;;

    color:#FFF;

    border-top-right-radius:20px;

    border-bottom-right-radius: 20px;  

    margin: 2px 0px;

      -webkit-transition: all .5s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}



.tobosisstg li a{ 

color: #FFF;

      -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}

.tobosisstg li:hover{

    width: 100%;

    background-color: #FDE9A9;

    color:#FFF;

    border-top-right-radius:20px;

    border-bottom-right-radius: 20px;  

}

.tobosisstg li:hover a{ 

color:#82B8D0;

      -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}

.tobosisstg > li.active > a, .tobosisstg > li.active > a:hover, .tobosisstg > li.active > a:focus,.tobosisstg > li:hover > a, .tobosisstg > li:hover > a:hover, .tobosisstg > li:hover > a:focus{

    width: 100%;

    background-color:#FDE9A9;

    color:#82B8D0;

    border-top-right-radius:20px;

    border-bottom-right-radius: 20px; 

      -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease; 

}



.tobosisstg li:active a{ 

color:#82B8D0;

}

.contac {

    padding: 5px 30px;

}

#resultado h3{

color: rgb(0, 171, 228);

text-align: left;

padding: 15px;

}

.contac h4{

color: rgb(0, 171, 228);

text-align: left;

}

.contac h5{

color: rgb(0, 171, 228);

text-align: left;

padding-left: 30px;

font-weight: bold;

}

.cambiserv{

  padding: 15px;

}

/************************/

/***********************/

.logoperso{

    left: 0%;

    position: relative;

    top: 0px;

    padding: 15px 15px;

}

header { 

    position: relative;

    z-index: 12;

    top: 0px;

    right: 0px;

    width: 100%;

    display: block;

}

 

header nav {

    z-index:102;

    width:100%;

    margin:0px auto;

}

 

header nav ul {

    list-style:none;

    padding-left: 0px;

    position: relative;

    background-color: transparent;

    margin-bottom: 10px;

}

header nav ul li {

    width: 24%;

        display: inline-block;

}

header nav ul li > a {

background: transparent;

font-size: 18px;

font-family: "arial";

    color: #FFF;

    padding:10px;

    text-align: center;

    width: 100%;

    display: block;

    border-left: 1px solid #FFF;



          -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease; 



}



.nobord{

border-left: none !important;

}

header nav ul li:hover > a{

        color: #FFF;

background-color:rgb(0, 171, 228);

text-decoration: none;

      -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease; 

}



header nav ul .active{

background-color:rgb(0, 171, 228);

    color: #FFF;

text-decoration: none;



}

 



 header nav ul li  i{

  padding-left: 10px;

  padding-right: 10px;

  float: right;

 }

header nav ul li  span {

    margin-right:10px;

}

 

header nav ul li:hover .children {

    display:block;

    background:transparent;



    color: #000;

}

 

header nav ul li .children {

    display: none;

    color: #000;

    position:absolute;



    z-index:1000;



    padding: 0px;

        

}



header nav ul li .children li {

    display:block;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,.5);

        background-color: #FFF;

}

 header nav ul li .children li:hover {

    color: #fff;

 }

header nav ul li .children li a {

    display: block;

    color: #467094;

    text-align: center;

    padding: 7px 0px;

    line-height: 10px;

    margin: 0px 0px;

    width: auto; 

    font-weight: normal;    



}

 

 header nav ul li .children li a:hover {

        color: #fff;

}

 

header nav ul li .children li a span {

    float: right;

    position: relative;

    top:3px;

    margin-right:0;

    margin-left:10px;

}

 

header nav ul li .caret {

    position: relative;

    top:3px;

    margin-left:10px;

    margin-right:0px;

}

.sliabosima{

       position: absolute;

       top: 0px;

       left: 10%;

       width: 25%;

       z-index: 10;

}

.marenin{

    border-top: 12px solid #82B8D0;

    border-bottom: 12px solid #82B8D0;

}



/********************************/

.marcocat{

     position: relative;

  -webkit-background-clip: padding-box;

  -moz-background-clip: padding;

  background-clip: padding-box;

  -webkit-box-shadow: inset 0 1px #fff,0 0 5px #82b8cf;

  -moz-box-shadow: inset 0 1px #fff,0 0 5px #82b8cf;

  box-shadow: inset 0 1px #fff,0 0 5px #82b8cf;

  color: inset 0 1px #fff,0 0 5px #82b8cf;

  -webkit-transition: all  1s ease;

  -moz-transition: all  1s ease;

  -o-transition: all  1s ease;

  -ms-transition: all  1s ease;

  transition: all  1s ease;

    overflow: hidden;

    z-index: 12; 

    border:6px solid #82b8cf;

    border-radius:50%;

}

.marcocat img{

        vertical-align: middle;

  text-align: center;

  position: relative;

 transform: scale(1);



      max-width: 100%;

  -webkit-transition: all  1s ease;

  -moz-transition: all  1s ease;

  -o-transition: all  1s ease;

  -ms-transition: all  1s ease;

  transition: all  1s ease;

}



.marcocat:hover{

    cursor: pointer;

  -webkit-box-shadow: inset 0px 0 #FF8E47, 0 0 50px #82b8cf;

  -moz-box-shadow: inset 0px 0 #FF8E47, 0 0 50px #82b8cf;

  -o-box-shadow: inset 0px 0 #FF8E47, 0 0 50px #82b8cf;

  -ms-box-shadow: inset 0px 0 #FF8E47, 0 0 50px #82b8cf;

  box-shadow: inset 0px 0 #FF8E47, 0 0 50px #82b8cf;

  color:   0px 0 #FF8E47, 0 0 39px #82b8cf;

  -webkit-filter: brightness(1.1);

  -moz-filter: brightness(1.1);

  -o-filter: brightness(1.1);

  -ms-filter: brightness(1.1);



-webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}

.marcocat:hover img{

      

  transform: scale(1.1);



-webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  -ms-transition: all 1s ease;

  transition: all 1s ease;

}

/***************************/





.separar1{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    float: left;

    width: 20%;

    

}

.separar2{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    

    float: left;

    width: 20%;

    

}

.separar3{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    

    float: left;

    width: 20%;

    

}

.separar4{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    float: left;

    width: 20%;

    

}

.separar5{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    

    float: left;

    width: 20%;

    

}

.separar6{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    

    float: left;

    width: 20%;

    

}



.separar1 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar2 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar3 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar1 img{

}

.separar2 img{

    

}

.separar3 img{

   

}



.separar4 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar5 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar6 h5{

    text-align: center;

    color: #82b8d0;

    font-weight: bold;

}

.separar4 img{

}

.separar5 img{

    

}

.separar6 img{

   

}

.supercont{

   position: relative;

   top: -120px;



   z-index: 10;



}

.footer {

    padding: 15px;

    background-color: rgb(0, 32, 62);

}

.footer h5{

    color: #FFF;

    font-weight:lighter;

    text-align: center;

}





/***************************/

.carousel-control.left {

  background-repeat: repeat-x;

    background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);

}

.carousel-control.right {

  right: 0;

  left: auto;

  z-index: 101;

    background-repeat: repeat-x;

    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);

}

.carousel-indicators{

    display: none;

}

/************************/

.carousel-fade .carousel-inner .item {

  -webkit-transition-property: opacity;

  transition-property: opacity;

}

.carousel-fade .carousel-inner .item,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  opacity: 0;

}

.carousel-fade .carousel-inner .active,

.carousel-fade .carousel-inner .next.left,

.carousel-fade .carousel-inner .prev.right {

  opacity: 1;

}

.carousel-fade .carousel-inner .next,

.carousel-fade .carousel-inner .prev,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  left: 0;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

}

.carousel-fade .carousel-control {

  z-index: 9;

}



.carousel,

.carousel-inner,

.carousel-inner .item {

  height: 100%;

  overflow: visible;

}

.carousel-indicators{

    display: none;

}

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

 .supercont {

    position: relative;

    top: -105px;

    z-index: 10;

    padding: 0px 0px;



}

}

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

.logoperso {

    left: 0%;

    position: relative;

    top: 0px;

    padding: 0px;

    width: 50%;

   margin: 0px auto;

  }

  .supercont {

    position: relative;

    top: -75px;

    z-index: 10;

    padding: 0px 0px;



}



.princnos {

    padding: 15px;

    background-color: rgba(255, 255, 255, 1);

}

.textonoso {

    padding: 15px 15px;

    background-color: #FFF;

}

.textonoso2 {

    padding: 15px;

}

.imagp{

 

    padding: 0px 0px;

}

}

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



header nav ul {

    list-style:none;

    padding-left: 0px;

    position: relative;

        background-color: transparent;

           margin-bottom: 0px;

    right: 0%;

 

}

.logoperso {

    left: 0%;

    position: relative;

    top: 0px;

    padding: 0px;

    width: 30%;

    margin: 0px auto;

}

.conteeaderprin{

  position: relative;

    z-index: 10;

    width: 100%;

    float: right;

    padding: 0px 1%;

}

.textoheader{

position: relative;

    z-index: 10;

    width: 65%;

    float: left;

}

.textotelhea{

  position: relative;

    z-index: 10;

    width: 35%;

    float: right;

}

.textotelhea span {

    color: #FFF;

    display: inline-block;

    width: 100%;

    font-size: 12px;

    text-align: right;

    padding: 2px 3px;

}

.textoheader h3 {

    color: #FFF;

    text-transform: uppercase;

    font-size: 18px !important;

    margin: 5px 0px 10px !important;

}

.textoheader p {

    color: #FFF;

    font-family: "arial";

    font-size: 12px !important;

    text-align: justify;

    margin: 0px !important;

}

.supercont {

    position: relative;

    top: -10px;

    z-index: 10;

    padding: 0px 0px;



}



.separar1{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0% 3%;

    float: left;

    width: 33%;

    

}

.separar2{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0% 3%;

    float: left;

    width: 33%;

    

}

.separar3{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0% 3%;

    float: left;

    width: 33%;

    

}

.separar4{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0% 3%;

    float: left;

    width: 33%;

    margin-left: 15%;

    

}

.separar5{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0% 3%;

    float: left;

    width: 33%;

    

}

.separar6{

    position: relative;

    top: 0px;

    z-index: 10;

    padding: 0px 1%;

    

    float: left;

    width: 50%;

    

}

.princnos {

    padding: 15px;

    background-color: rgba(255, 255, 255, 1);

}

.textonoso {

    padding: 15px 15px;

    background-color: #FFF;

}

.textonoso2 {

    padding: 15px;

}

.imagp{

 

    padding: 0px 0px;

}

.servite h3 {

    color: rgb(0, 171, 228);

    text-align: left;

}

.servite ul.listaservi {

    text-align: left;

   

}

header nav ul li {



   width: 24%;

}

header nav ul li:hover .children {

    display:block;

    background:transparent;



    color: #000;

    left: 0%;

}

 

header nav ul li .children {

    display: none;

    color: #000;

    position:absolute;

    z-index:1000;

    padding: 0px;

        

}



header nav ul li .children li {

    display:block;

    overflow: hidden;

    border-bottom: 1px solid rgba(255,255,255,.5);

        background-color: #FFF;

        width: 100%;

}

.footer h5 {

    color: #FFF;

    font-weight: lighter;

    text-align: center;

    font-size: 11px !important;

}



}