@font-face {
    font-family: MyrianPro_Bold;
    src: url(../fonts/MyriadPro-Bold.otf);
}

@font-face {
    font-family: MyrianPro_Semi;
    src: url(../fonts/MyriadPro-BlackSemiCn.otf);
}

@font-face {
    font-family: MyrianPro_Regular;
    src: url(../fonts/Myriad\ Pro\ Regular.ttf);
}

*{
    box-sizing: border-box;
    padding:0;
    margin:0;
}

::-webkit-scrollbar {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    background: #4e4e4e; 
}
   
::-webkit-scrollbar-thumb {
    background: #a70d0d; 
}
  
::-webkit-scrollbar-thumb:hover {
    background: #a70d0d; 
}

.text-center{
    text-align:center;
}

.message {
    width:100%;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.message-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.message-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

body{
    font-family: arial;
    background-color: #000000;
    font-family: MyrianPro_Regular;
    font-weight:normal;
}

.container{
    max-width:1200px;
    width:100%;
    margin:0 auto;
}

.header {
    padding:10px 0;
}

.nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav ul{
    display:flex;
}

.nav ul li {
    margin:0 0 0 20px;
}

.nav ul li a {
    text-decoration: none;
    color: #fff;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    outline: none;
    padding: 0 8px 10px 8px;
    display: inline-block;
}

.nav ul li a.active,
.nav ul li a:hover{
    color:#d83232;
}

.header-navbar {
    display:none;
}

.logo img{
    width:248px;
}

.sugerencias {
    color:#ffffff;
    font-size:14px;
    line-height: 22px;
}

.steps{
    position:fixed;
    bottom:0;
    width:100%;
    background-color: #4e4e4e;
}

.steps ul {
    display:flex;
    list-style: none;
}

.steps ul li {
    flex:1;
    text-align: center;
}

.steps ul li a {
    font-family: MyrianPro_Bold;
    color:#000000;
    text-transform: uppercase;
    text-decoration: none;
    display:block;
    padding:10px 0;
}

.steps ul li a.active,
.steps ul li a:hover {
    color:#ffffff;
    background-color: #a70d0d;
}

.steps ul li:first-child,
.steps ul li:last-child {
    display:none;
}

.main {
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position:top left;
    height:100vh;
}

.form-control,
.form-control::placeholder {
    font-family: MyrianPro_Regular;
    background-color: #9C9C9C;
    color:#fff;
    border:0;
    outline: none;
    font-size:17px;
    width:100%;
    padding:7px 10px;
    margin:10px 0;
}

.steps-items{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:30px 0;
    width:100%; 
}

.step-tiposervicio,
.step-reserva,
.step-cliente,
.step-confirmar{
    max-width:800px;
    width:100%;
    display:none;
}

.step-tiposervicio.step-active{
    display:flex !important;
    flex-direction: column !important;
}

.step-reserva.step-active{
    display:flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-direction: row !important;
}

.step-cliente.step-active{
    display:flex !important;
    flex-direction: column !important;
}

.step-confirmar.step-active{
    display:flex !important;
    justify-content: center !important;
    align-items: center;
    flex-direction: column;
}

.step-confirmar button {
    color:#ffffff;
    background-color: #a70d0d;
    border:0;
    cursor:pointer;
    font-size:25px;
    font-family: MyrianPro_Regular;
    padding:5px 20px;
    border-radius:8px;
}

.step-confirmar button:hover {
    background-color: #444444;
}

.confirmacion{
    display:flex;
    justify-content: space-around;
    align-items: flex-start;
    color:#ffffff;
    padding:20px 0;
    width:100%;
    background-color:rgb(51, 53, 50, 0.5);
    margin-bottom:25px;
}

.confirmacion__servicio h3,
.confirmacion__datos h3,
.confirmacion__vehiculo h3 {
    margin-bottom:10px;
}

.confirmacion__servicio p,
.confirmacion__datos p,
.confirmacion__vehiculo p {
    margin: 7px 0;
}

.step-controls {
    display:flex;
    justify-content: space-between;
    align-items: center;
    max-width:1000px;
    margin:30px auto;
}

.step-arrow-left a,
.step-arrow-right a{
    font-size:40px;
    color:#ffffff;
    text-decoration: none;
}

.step-arrow-left a:hover,
.step-arrow-right a:hover{
    color:#a70d0d;
}

.step-current h2 {
    color:#ffffff;
    font-size:40px;
    text-align:center;
}

.hide {
    visibility: hidden;
}

.confirmacion {
    
}

.nav__mobile {
    display:none;
    padding-top:10px;
    background-color: #000000;
}

.nav__mobile ul {
    padding:0;
    margin:0;
    list-style: none;
    display:flex;
    flex-direction: column;
}

.nav__mobile ul li {
    text-align:center;
    border-bottom:1px solid #222222;
}

.nav__mobile ul li a {
    color:#ffffff;
    font-size:18px;
    font-family: MyrianPro_Regular;
    text-decoration: none;
    display:block;
    padding:5px 10px;
}

.nav__mobile ul li a.active,
.nav__mobile ul li a:hover{ 
    background-color: #a70d0d;
}

@media screen and (max-width: 768px) {
    
    body{
        padding-top:15px;
    }

    .nav{
        justify-content: space-around;
    }
    
    .navigation ul li {
        display: none;
    }

    .navigation ul li.header-navbar {
        display: block !important;
    }

    .main {
        padding:10px;
        height:auto;
    }
    
    .sugerencias {
        text-align:center;
    }

    .step-reserva.step-active {
        flex-direction: column !important;
    }

    .step-current h2 {
        font-size:30px;
    }

    .confirmacion {
        flex-direction: column;
        padding:20px 10px;
    }

    .confirmacion div {
        margin-bottom:10px;
    }

    .main {
        background-attachment: fixed;
        background-size: cover;
        padding-bottom:100px;
    }

    .steps ul li{
        display:none;
    }

    .steps ul li:first-child,
    .steps ul li:last-child {
        display:inline-block;
    }
}