@font-face {
  font-family: bebas;
  src: url(bebas_neue/BebasNeue-Regular.woff);
}
:root{
  --naranja:#f58104;
  --azul:#0062d0;
  --verde:#3dbc75;
  --azul_cielo: #00b9f2;
  --negro: #444444;
}
body,html{ overflow-x:hidden;}
body { overflow-x: hidden !important;}

ul{ padding: 0; margin: 0; list-style: none;}

a{ text-decoration: none; color: #2f2f2f;}
a:hover{ text-decoration:none;}
a:focus{ outline: none; text-decoration: none;}

h1, h2, h3,h4,h5,h6{   text-transform:uppercase; }

h1 { font-size:4.5em; line-height:60px; color:var(--naranja); font-weight: lighter; font-family:bebas;}

img{ border:none;}

/*button{ background:#204b9b; color:#FFF; font-size:1em; padding:10px 40px; font-weight:bolder}
button i{ margin-right:10px}*/

/* Preloader */
#preloader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#000; /* change if the mask should have another color then white */
  z-index:99999; /* makes sure it stays on top */
}

#status {
  width:200px;
  height:200px;
  position:absolute;
  left:50%; /* centers the loading animation horizontally one the screen */
  top:50%; /* centers the loading animation vertically one the screen */
  background-image:url(../img/status.GIF); /* path to your loading animation */
  background-repeat:no-repeat;
  background-position:center;
  margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/*scrol to top*/

.scrollToTop {
  background: url("../img/bootom-top-arrow.png") no-repeat scroll 13px 12px #ffffff;
  border: 3px solid #f0f1f3;
  border-radius: 5px;
  bottom: 20px;
  display: inline-block;
  height: 54px;
  opacity: 0;
  position: fixed;
  right: 20px;
  text-align: center;
  width: 54px;
  z-index: 100;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

}
.scrollToTop:hover{
  background-position: 13px -50px;  
  text-decoration: none;
  outline: none;
}

/*--------------------*/
/* HOME HEADER */
/*--------------------*/

.menu_area{
  float: left;
  display: inline;
  width: 100%;
}
.navbar-default .navbar-brand {
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  margin-top: 15px; 
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
  background-color: transparent;
  color: #fff;
}
.navbar-default {
  background-color: #FFF;
  border-color: transparent;
}
#navbar{overflow-x: hidden;}
.navbar-default .navbar-nav > li > a {
  color: #222;
  padding: 30px 15px;
  text-transform: uppercase;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  background-color: transparent;
}
.navbar-nav > li > .dropdown-menu {
  background-color: #48575a; 
}
.navbar-nav > li > .dropdown-menu:before { 
  border-bottom: 15px solid #48575a; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  content: "";
  height: 0;
  position: absolute;
  right: 25px;
  top: -15px;
  width: 0;
}
.navbar-nav > li > .dropdown-menu li a {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  color: #fff;
  display: block;  
  opacity: 0.8;
  padding: 10px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.navbar-nav > li > .dropdown-menu > li:last-child a {
  border-bottom: medium none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
  background-color:transparent;  
  text-decoration: none;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
  background-color: transparent;  
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
  background-color: transparent;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
  background-color: transparent;
}

/*--------------------*/
/* HOME SLIDER SECTION */
/*--------------------*/

#slider{  width: 100%;}
.slider_area {
  background-color: #ccc;
  display: inline;
  float: left;
  margin-top: 80px;
  width: 100%;
}
.slider_caption {
  left: 5%;
  position: absolute;
  top: 5%;
  width: 20%;
}
.slider_right_caption{
  left: 10%;
}
.slider_caption h2 {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px;
  text-align:center;
}
.slider_caption p {
  background-color: rgba(231, 183, 24, 0.7);
  color: #333;
  font-family: "Varela",sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
  text-align:center;
  text-transform: uppercase;
  height:150px
}
.slider_btn {  
  background: rgba(49, 59, 61, 0.6);
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  font-family: "Varela",sans-serif;
  margin-top: 10px;
  padding: 9px 15px;
  text-decoration: none;
  -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
}
.slider_btn:hover,.slider_btn:focus{ text-decoration: none; outline: none;}
.next,.prev{  display: none !important;  }
.slider_area:hover .next{  display: block !important;}
.slider_area:hover .prev{ display: block !important;}

.slide_text2 { margin:0; background:rgba(0,0,0,0); height:100%;}
.slide_text2 > div{ margin: 0; position:absolute; top:35%; width:50%; left:5%}
.slide_text2 h4{ font-size:2em; color:var(--negro); text-transform:uppercase; padding:0; font-family:bebas; letter-spacing:3px}

.logo{ height:80px; width:auto}
.section{ padding:100px 0}
.content{ margin:60px 0; font-size:2rem}
.content p{ margin:20px 0;}
.img_round{ border-radius:30px}

.seccion { color: white; font-size: 14px; width: 200px; height: 50px; background: var(--naranja); display:inline-block; text-align: center; line-height: 50px; text-transform: uppercase; position: relative; margin-top:30px;}
.seccion i { color: white;}
a.seccion::after { content: ""; width: 185px; height: 15px; background: url('../img/or.png'); display: block; position: absolute; top: -15px; z-index: 1; background-size: 100% 100%;}

.labels{padding: 10px 40px; display: inline-block; color:white; font-size: 3rem; font-family: inherit; border-radius:5px}
.l_naranja{background: var(--naranja);}
.l_verde{background: var(--verde);}
.l_azul{background: var(--azul_cielo);}
.l_white{ background: white; color:var(--naranja) !important}

#div_servicios div{ text-align: center; padding:20px; border-radius:10px; background: #FCFCFC;}
#div_servicios div img{ width:40%; transition: all 0.3s linear; height: auto; padding:10px; border-radius:50% 50%; border:5px solid orange}
#div_servicios div h4{ text-align: center; color: var(--naranja);}
#div_servicios div p{ font-size:2rem}

#div_servicios div:hover{ background: var(--naranja); color:white; transition: all 0.3s ease-in; height: auto}
#div_servicios div:hover h4{ color: var(--negro)}
#div_servicios div:hover img{ transition: all 0.3s linear;border:5px solid white}

#licencias{ background: var(--negro);}

.caracteristicas{ width: 70%;}
.caracteristicas tr{ background: none !important;}
.caracteristicas tr td{ padding:10px;}

.planes__header{padding:10px; color:white}
.planes__header h2{ font-weight: bolder; font-size:4rem}
.planes__header h2 small{ font-weight: bolder; color:white; font-size:2rem}
.planes__body{ background:white; padding:30px 0}
.planes__body h5{ font-style:italic; padding:15px; color:var(--naranja);}

.timbrado div{ background:url('../img/fondos/fondo_timbres.png') #FFF no-repeat; border-radius:20px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3); position:relative; background-size: 47%; background-position: top right;}
.timbrado div:hover{ box-shadow: 0 4px 5px var(--naranja);}
.timbrado div i{ font-size:5rem; color:var(--negro); margin:10px 0}
.timbrado div h4{ color:var(--negro); padding:20px 0}
.timbrado div h3{ position: absolute; color:white; transform: rotate(45deg); top: 25px; right: 8px; padding: 0;margin: 0;}
.timbrado div h3 small{ display: block; font-size:10px; color:#EEE}
.timbrado div h2{ color: var(--naranja); font-size: 3.5rem; font-weight: bolder; padding: 10px 0; margin:0; border-radius:0 0 5px 5px}
.timbrado div h2 label{ font-size:1.5rem; display: block;}


#footer{ width: 100%;}
#footer h3{	color:#f6a419; margin:10px 0; text-transform:uppercase}
#footer p{	color:#EEE;}
.footer_top{ width: 100%; background-color:var(--negro); padding: 40px 0px;}

#fondo{ width:100%; height:100%; top:0; left:0; position: fixed; background: rgba(0,0,0,0.5); z-index: 1003;}
#fondo:hover{ cursor:pointer;}

#modal{ background:url(../img/fondos/back.jpg) #FFF no-repeat center !important; border-radius:0 !important; z-index: 1044 !important;}
#modal, 
#modal2{ width: 90%; left: 5%; top: 5%; max-height: 90%; overflow: auto; z-index: 103; position:absolute; background:#333; border-radius:10px;}

#modal:before, 
#modal:after, 
#modal2:before, 
#modal2:after{ content: ''; position: absolute; z-index: -2; }
#modal .contenido2{  padding: 7px 0px 40px 0px; background-size:cover; }