/*FUENTES*/
@font-face{
    font-family: "conthrax-sb";
    src: url(../font/conthrax-sb.ttf);
}

/*GENERAL*/
body{
    background:url(../img/bg-gray.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
    font-family: "conthrax-sb";
}
.contain{padding: 2rem 5rem;}
.outlinenone {
   outline: none;
   background-color: #dfe;
   border: 0;
 }
figure{ margin-bottom: 0;}
.card-header {
    padding: 0;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
    text-align: center;
    background-color: #fff;
}
.card {
    border:0;
    border-radius: 0;
    background: transparent;
}
  

/*NAVBAR*/
nav { position: relative;}
nav.bg-nav{ z-index: 10;}
nav #navbar ul.navbar-nav li.nav-item {
    align-self: flex-end;
    width: 205px;
}
nav #navbar ul.navbar-nav .nav-item a {
    border:4px solid #fff;
    border-image-source: linear-gradient(to bottom, #c5c4c0, #fff, #c5c4c0, #fff);
    border-image-slice: 10;
    text-transform: uppercase;
    color: #939393;
    text-align: center;
    background: linear-gradient(to bottom, #bebfc1,#fefefe 100%);
    margin: 0 .4rem;
    padding: 5px 12px;
    font-size: 22px;
    position: relative;
    top: -1rem;
    transition: background .8s ease;
    transition: color .8s ease;
}
nav #navbar ul.navbar-nav .nav-item a:hover {
    background: transparent;
    color: #fff;
    transition: background .6s ease;
    transition: color 1.1s ease;
}
nav .bg-top-nav{
    position: absolute;
    background-color: rgba(62,139,193,0.25);
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 4.2rem;
}
/*Catalogo*/
nav #navbar ul.navbar-nav li.nav-item-catalogue{
    width: 260px;
}
nav #navbar ul.navbar-nav li.nav-item-catalogue a{
    color: #3e8bc0;
    font-size: 28px;
    border:4px solid #fff;
    border-radius: 0 0 15px 15px;
    top: -0rem;
    transition: all .7s ease;
}
nav #navbar ul.navbar-nav li.nav-item-catalogue a img{
    padding: .3rem 2.5rem;
    animation: run 5s ease-in-out;
}
nav #navbar ul.navbar-nav li.nav-item-catalogue a:hover{
    color: #3e8bc0;
    background: linear-gradient(to bottom, #bebfc1,#fefefe 100%);
    border:4px solid rgba(62,139,192, 0.65);
    border-image-slice: 10;
    border-radius: 0 0 15px 15px;
    transition: all .7s ease;
}

/*---------- Header-----*/
/*CATALOGUE*/    
header .catalogue-title{margin: 1.6rem 0;}
header .catalogue-title h1{
    color: #a6a6a6;
    font-size: 1.38em;
    line-height: 1.38em;
    letter-spacing: 3px;
    background: linear-gradient(to bottom, #e0e1e3, #fff, #f5f5f5, #b7b8ba 100%);
    padding: .5rem;
    margin-bottom: 0;
}

/*---------- Article-----*/
/*INDEX*/
/*slogan*/
article.slogan{
    background-color: rgba(62,139,192,0.25);
    padding: 5rem 2rem 3rem 2rem;
    position: relative;
    top: -2.2rem;
}
article.slogan h1{
    font-family: "conthrax-sb";
    font-size: 28px;
}


/*---------- Section-----*/
/*INDEX*/
/*slide*/
section.slide{
    border-bottom: .6rem solid #3e8bc0;
    border-top: .6rem solid #3e8bc0; 
    position: relative;
    bottom: 2.7rem;
}
section #carousel-home a span.carousel-control-next-icon, section #carousel-home a span.carousel-control-prev-icon{
    width: 30px;
    height: 30px;
}

/*Button top*/
#btn-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #0074C1;
    
    color: #fff;
    cursor: pointer;
    height: 65px;
    width: 65px;
    border-radius: 100%;
    font-size: 1.1em;
    text-align: center;
    box-shadow: 0 20px 20px -15px rgba(42,51,59,0.7), inset 0 -5px rgba(42,51,59,0.4);
    transition: all .4s cubic-bezier(0,0.35,0.5,1);
}
#btn-top:hover{
    transform: scale(1.03);
    box-shadow: 0 20px 20px -15px rgba(42,51,59,0.7), inset 0 -5px rgba(42,51,59,0.4);
    background: #04578E;
}


/*----------MAIN-----*/
/*INDEX*/
/*Empresa*/
main .company h3.title{
    border:4px solid #fff;
    border-image-source: linear-gradient(to bottom, #fffffd, #acc371);
    border-image-slice: 10;
    text-transform: uppercase;
    color: #3e8bc0;
    text-align: center;
    background: linear-gradient(to bottom, #bebfc1,#fefefe 100%);
    margin: 0 .4rem;
    padding: 11px;
    transform: rotateX(0deg);
    font-size: 28px;
}
main .company .description p{
    font-size: 24px;
}
main .company .responsible-company{
    background: url(../img/circuits1.png);
    background-repeat: round;
    background-size: cover; 
    height: 280px;
    margin-bottom: 2rem;
}
main .company .responsible-company figure{  margin: 0; }
main .company .responsible-company .leaf img{
    height: 60px;
    width: auto;
}
main .company .responsible-company .text p{
    color: #e3e3e3;
    font-size: 21px;
}
/*Clientes*/
main .customers .title, 
section.contact .form-part-1 .title{
    background: linear-gradient(to bottom, #e0e1e3, #fff, #f5f5f5, #b7b8ba 100%);
    margin-bottom: 4rem;
}
main .customers .title h3,
section.contact .form-part-1 .title h3{
    color: #3e8bc0;
    text-transform: uppercase;
    padding: 1.3rem 0;
    font-size: 1.5em;
}
main .customers .image{
    padding: 2rem 0;
}
main .customers .image figure{
    justify-content: center;
    display: flex;
}
main .customers .image figure img{
    transition: all 1s ease;
}
main .customers .image figure img:hover {
    transform: scale(1.2);
}
/*Contacto*/
section.contact .form{
    width: 100%;
}
section.contact .form label{
    font-size: 20px;
    text-shadow: 0px 4px 10px #000;
    margin-bottom: 0px;
}
section.contact .form input[type="text"],
section.contact .form input[type="email"],
section.contact .form textarea{
	width: 100%;
	padding: 8px 15px;
	margin-bottom: 20px;
	font-size: 18px;
    color: #a8d1ed;
    background-color:transparent;
    border: 2px solid transparent;
    margin:.5rem;
}
section.contact .form textarea{
    min-height: 80px;
	max-height: 250px;
}
section.contact .form input[type="text"]:hover,
section.contact .form input[type="email"]:hover{
    border-bottom: 2px solid #c2c2c2;
    transition: all 1s ease;
}
section.contact .form textarea:hover {
    border-left: 2px solid #c2c2c2;
    transition: all 1s ease;
}
section.contact .form input[type="text"]:focus,
section.contact .form input[type="email"]:focus{
    box-shadow: none;
    border-bottom: 2px solid #c2c2c2;
    transition: all .6s ease;
}
section.contact .form textarea:focus {
    box-shadow: none;
    border-left: 2px solid #c2c2c2;
    transition: all .6s ease;
}
section.contact .form button[type="submit"] {
	color: #fff;
    font-size: 23px;
    text-transform: uppercase;
    border:4px solid #fff;
    border-image-source: linear-gradient(to bottom, #c5c4c0, #fff, #c5c4c0, #fff);
    border-image-slice: 10;
    background: linear-gradient(to bottom, #000, #515151 100%);
    transition: all .7s ease;
    position: relative;
    top: -1.4rem;
    padding: 9px 18px;
}
section.contact .form button[type="submit"]:hover {
	cursor: pointer;
    background: rgba(62,139,192,0.25);
    color: #000;
    transform: all .7 ease;
} 
section.contact .form-part-1{
    margin-top: 4rem;
}
section.contact .form-part-1 .bg-form {
    background-color: rgba(0,0,0,0.4);
    border-radius: 10px 10px 0 0;
    padding: .5rem 1rem;
    margin-top: 2rem;
}
section.contact .form-part-2 .bg-form {
    background-color: rgba(0,0,0,0.4);
    border-radius: 0 0 10px 10px;
    padding: .5rem 1rem;
}
section.contact .location{
    background-color: rgba(62,139,192,0.25);
    margin-bottom: 1.7rem;
}
section.contact .location .media img{
    height: 100px;
    opacity: 0.7;
    margin: 1rem 1rem 0 0;
}
section.contact .location .media .media-body p{
    color: #fff;
    font-size: 20px; 
    text-shadow: 0px 4px 10px #000;
}
#form-result{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    flex: auto;
    text-align: center; 
    font-size: 1.05em;
    align-items: center;
}
.success p{
    color: #fff;
    border-bottom: 2px solid #acc371;
    padding: 15px;
    font-size:1.02em;
}
.success p::before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f164";
    font-size: 1.05em;
    padding: 9px;
    background-color: #acc371;
    border-radius: 100%;
    margin-right: 5px;
}
.error p{
    font-size:1.01em;
    color: firebrick;
    border-bottom: 2px solid firebrick;
    padding: 15px;
}
.error p::before{
    color: #fff;
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f00d";
    font-size: 1.05em;
    padding: 8px 10px;
    background: firebrick;
    border-radius: 100%;
    margin-right: 5px;
}

/*CATALOGUE*/
main.main-catalogue{
    border-top: .5rem solid #3e8bc1;
}
main.main-catalogue .card-header .btn-link{
    color: #3e8bc1;
    text-transform: uppercase;
    padding: .75rem 1.25rem;
    width: 100%;
    font-size: .9em;
    transition: .6s ease;
    border-radius: 0;
}
main.main-catalogue .card-header .btn-link:hover,
main.main-catalogue .card-header .btn-link:focus{
    box-shadow: 10px 5px 5px rgba(0,0,0,0.5);
}
main.main-catalogue .card-header .btn-link:hover,
main.main-catalogue .card-header .btn-link:focus{
    text-decoration: none;
}
.main-catalogue .accordion-body .card-body{
    background-color: rgba(255,255,255,0.55);
    border-top: .5rem solid rgba(62,139,193,0.85);
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 6;
    position: relative;
}
.main-catalogue .accordion-body img{
    padding: 0 20px;
}
.main-catalogue .accordion-body a.card-body{
    color: #4087b7;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
}
.main-catalogue .accordion-body .card-body::after{
    content: 'PDF';
    position: absolute;
    left: 3px;
    bottom: 3px;
    color: #04578E;
    font-size: 9px;
    visibility: hidden;
    transition-delay: .2s;
    z-index: 10;
}
.main-catalogue .accordion-body .card-body::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0px; height: 0px;
    background: linear-gradient(45deg, rgba(255,255,255, 0.4) 45%, #ccc 50%, white 100%);
    transition: .6s ease; 
    z-index: 8;
}
.main-catalogue .accordion-body .card-body:hover::after{
    visibility: visible;
}
.main-catalogue .accordion-body .card-body:hover::before{
    width: 50px; height: 45px;
}

/*----------KEYFRAMES-----*/
/*Logo*/
@keyframes run{
    0%{transform: translateX(0%);}
    25%{transform: translateX(10%);}
    50%{transform: translateX(-10%);}
    75%{transform: translateX(5%);}
}
/*Btn top*/
@keyframes anim{
    0%{transform: translateY(0px);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0px);}
}