/* ----- general ----- */

:root {
    --main-color: #c24c4c;
    --dark-color: #2B2A30;
}

* {
    font-family: 'Roboto', sans-serif;
    color: #2B2A30;
    font-size: 16px;
}

body, html {
    height: 100%;
    scroll-behavior: smooth;
}

a {
    color: inherit;
}

strong {
    font-family: 'Roboto', sans-serif;
}

em {
    font-family: 'Roboto', sans-serif;
}

.row, .row .col {
    margin: 0px;
    padding: 0px;
}

img.responsive-img,
video.responsive-video {
    max-width: 90%;
    height: auto;
    border-radius: 5px;
}

/*-XL-*/ @media only screen and (min-width: 1201px) {
    .container {
        max-width: 1080px;
        width: 100%;
    }
}

/*-SML-*/ @media only screen and (max-width: 1200px) {
    .container {
        width: 90%;
    }
}

/* ----- encabezados ----- */

h1 {
    font-size: 40px;
    font-weight: 500;
}

h2 {
    font-size: 30px;
    font-weight: 500;
}

/* ----- fuentes ----- */

.ff-rob { font-family: 'Roboto', sans-serif; }

.fsize40 { font-size: 40px; }
.fsize38 { font-size: 38px; }
.fsize36 { font-size: 36px; }
.fsize34 { font-size: 34px; }
.fsize32 { font-size: 32px; }
.fsize30 { font-size: 30px; }
.fsize28 { font-size: 28px; }
.fsize26 { font-size: 26px; }
.fsize24 { font-size: 24px; }
.fsize22 { font-size: 22px; }
.fsize20 { font-size: 20px; }
.fsize18 { font-size: 18px; }
.fsize16 { font-size: 16px; }
.fsize14 { font-size: 14px; }

/* ----- font-weight ----- */

.fw300 { font-weight: 300 !important; /* light */}
.fw500 { font-weight: 500 !important; /* medium */}
.fw700 { font-weight: 700 !important; /* bold */}

/* ----- paddings & margins ----- */

.p0 { padding: 0 !important; }
.m0 { padding: 0 !important; }

.pt10 { padding-top: 10px; } .mt10 { margin-top: 10px; }
.pt20 { padding-top: 20px; } .mt20 { margin-top: 20px; }
.pt30 { padding-top: 30px; } .mt30 { margin-top: 30px; }
.pt40 { padding-top: 40px; } .mt40 { margin-top: 40px; }

.pb10 { padding-bottom: 10px; } .mb10 { margin-bottom: 10px; }
.pb20 { padding-bottom: 20px; } .mb20 { margin-bottom: 20px; }
.pb30 { padding-bottom: 30px; } .mb30 { margin-bottom: 30px; }
.pb40 { padding-bottom: 40px; } .mb40 { margin-bottom: 40px; }

.pl10 { padding-left: 10px; } .ml10 { margin-left: 10px; }
.pl20 { padding-left: 20px; } .ml20 { margin-left: 20px; }
.pl30 { padding-left: 30px; } .ml30 { margin-left: 30px; }
.pl40 { padding-left: 40px; } .ml40 { margin-left: 40px; }

.pr10 { padding-right: 10px; } .mr10 { margin-right: 10px; }
.pr20 { padding-right: 20px; } .mr20 { margin-right: 20px; }
.pr30 { padding-right: 30px; } .mr30 { margin-right: 30px; }
.pr40 { padding-right: 40px; } .mr40 { margin-right: 40px; }

.mb200 { margin-bottom: 200px; }

/* ----- more ----- */

.cpt { cursor: pointer; }
.mw25 { max-width: 25%; }
.mw50 { max-width: 50%; }
.mw75 { max-width: 75%; }
.lineh0-5 { line-height: .5; }
.lineh1 { line-height: 1; }
.lineh1-5 { line-height: 1.5; }
.cursiva { font-style: italic; }
.op25 { opacity: .25; }
.op50 { opacity: .5; }

/* ----- forms ----- */

.input-field label {
    color: #2B2A30;
}

.input-field .prefix.active {
    color: var(--main-color);
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password] {
    font-family: 'Roboto', sans-serif;
}

input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]) {
    border-bottom: 1px solid var(--main-color);
    box-shadow: 0 1px 0 0 var(--main-color);
}

input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=email]:not(.browser-default):focus:not([readonly])+label,
input[type=tel]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label {
    color: var(--main-color);
}

.dropdown-content li>span {
    color: var(--main-color);
}

.select-wrapper input.select-dropdown {
    font-family: 'Roboto', sans-serif;
}

.input-field .helper-text {
    color: #888;
    font-style: italic;
}

/* ----- buttons ----- */

.btn, .btn-small {
    background-color: var(--main-color);
}

.btn:hover, .btn-small:hover,
.btn:focus, .btn-small:focus {
    /* background-color: #335d93; */
    background-color: #a24545;
}

/* ----- tooltips ----- */

.material-tooltip {
    background-color: #323232;
}

.material-tooltip .tooltip-content {
    color: white !important;
    font-size: 13px;
}

/* ----- animations ----- */

.main-in { animation: fadein .5s ease 0s 1 normal forwards;}

@keyframes fadein {	from { transform:translateY(20px); opacity:0;}
    to   { transform:translateY(0px); opacity:1;}
}