/*
 * Colors
 *
 * black:       #1d1d1d
 * blue:       	#2d8cff
 * yellow:      #ebb701
 *
 */


html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-image: url(../img/mtr_confi_bg.jpg);
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
    font-family: 'Roboto', sans-serif;
    color: #000;
}

@media (min-width: 992px) {
	body {
		font-size: 1.25rem;
		line-height: 1.75rem;
		padding-top: 1.5rem;
	}
}

/*
 * Common Tags
 */
a {
    color: #1d1d1d;
    text-decoration: underline;
    outline: 0;
    transition: all 0.2s ease-in-out;
}

a:hover, 
a:active {
    color: #2d8cff;
    text-decoration: none;
}

a.more {
    text-decoration: none;
}

a.more::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f054";
    color: #ebb701;
	display: inline-block;
	padding-right: .5rem;
}

strong {
    font-weight: 600;
}

img {
    border: 0;
}

.img-fluid {
    width: 100%;
}

h1, h2, h3, h4, h5 {
    font-weight: 600;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
	padding: 1rem;
	color: #fff;
	background: rgb(110,109,222);
	background: linear-gradient(90deg, rgba(110,109,222,1) 0%, rgba(213,157,255,1) 100%);
    text-transform: uppercase;
	display: flex;
}

h1 a,
h1 a:hover, 
h1 a:active {
	text-decoration: none;
	color: #fff !important;
}

h1::after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 200;
	content: "\f3f1";
	color: #fff;
	display: inline-block;
	margin-left: auto;
}


h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

h2.big {
    font-size: 1.75rem;
    border-bottom: 5px solid #000;
}

h3 {
    font-size: 1.125rem;
}

h4 {
	font-size: 1rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    h2.big {
        font-size: 2.25rem;
    }
    h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
	h4 {
		font-size: 1.125rem;
	}
}

@media (min-width: 992px) {
    h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
    h2 {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
    h2.big {
        font-size: 3rem;
        padding-bottom: 1rem;
        margin-bottom: 3rem;
        border-bottom: 8px solid #000;
    }
    h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
	h4 {
		font-size: 1.25rem;
	}
}

@media (min-width: 1200px) {
    h1 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }
    h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    h2.big {
        font-size: 5rem;
    }
    h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
	h4 {
		font-size: 1.5rem;
	}
}


.text-small {
    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: .5rem;
}

.text-big {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .text-big {
        font-size: 1.125rem;
    }
}

@media (min-width: 992px) {
    .text-big {
        font-size: 1.25rem;
    }
}

.text-upper {
    text-transform: uppercase;
}

.text-number {
	font-size: 2rem;
	font-weight: 600;
	color: #2f8dff;
}

hr {
    border-top: 8px solid #6e6dde;
	margin: 1.5rem 0;
}


/*
 * Container
 */
.container-white {
    background: #fff;
}


/*
 * Header
 */
header {
}

header img.img-teams {
	max-height: 80px !important;
}

header img.img-ks {
	max-height: 80px !important;
}

/*
 * Main
 */
main {
    min-height: 500px;
}


/*
 * Footer
 */
footer {
    background: #6e6dde;
    color: #fff;
    font-size: 1rem;
}

footer .footer-logo {
    width: 110px;
}

footer a {
    color: #fff;
}

footer a:hover, 
footer a:active {
    color: #fff;
}


/*
 * Buttons
 */
.btn {
    color: #000;
    background: #ebb701;
    text-decoration: none;
    border: 0;
    border-radius: 0.1rem;
    padding: .5rem 2rem;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    font-size: 1.5rem;
	font-weight: 600;
}

.btn:hover {
	color: #000;
	background: #ebb701;
    opacity: .8;
}

.btn-primary::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f061";
	color: #fff;
	display: inline-block;
	padding-right: 1rem;
}

.btn-secondary {
	color: #000;
	background: transparent !important;
}

.btn-secondary:hover {
	color: #000;
	background: transparent !important;
}

.btn-secondary::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f060";
	color: #000;
	display: inline-block;
	padding-right: 1rem;
}

.btn-small {
	padding: .375rem 1.5rem;
	opacity: 1;
	transition: all 0.2s ease-in-out;
	font-size: 1.25rem;
	font-weight: 600;
}

.btn-small::after {
	font-family: "Font Awesome 5 Pro";
	content: "\f061";
	color: #fff;
	display: inline-block;
	padding-left: 1rem;
}

.btn.disabled, 
.btn:disabled {
	color: #fff;
	background-color: #999;
	border-color: #999;	
}


/*
 * Configurator
 */
.tx-sd-configurator [type=radio] { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
	
.tx-sd-configurator [type=radio] + img {
	cursor: pointer;
	outline: 5px solid #c3c3c3;
}
	
.tx-sd-configurator [type=radio]:checked + img {
	outline: 5px solid #ebb701;
}

.tx-sd-configurator img.img-product {
	
}

.tx-sd-configurator h3.big {
	font-size: 2rem;
}

.tx-sd-configurator hr {
	border-top: 5px solid #c3c3c3;
}

.tx-sd-configurator .row-products .col,
.tx-sd-configurator .row-products .col-md-6 {
	background: #f4f4f4;
	margin: 0 15px;
	padding: 20px 20px 60px 20px;
}

.tx-sd-configurator .image {
	position: relative;
	border: 5px solid #c3c3c3;
	background: #fff;
}

.tx-sd-configurator .image .btn {
	position: absolute;
	bottom: 0;
	right: 0;
	font-weight: 600;
	font-size: 1.125rem;
}

.tx-sd-configurator ul {
	padding-left: 0;
	margin-left: 1.5rem;	
}

.tx-sd-configurator .itemnumber,
.tx-sd-configurator .price,
.tx-sd-configurator .description {
	font-size: 1rem;
}

.tx-sd-configurator .description {
	padding-bottom: 4rem !important;	
}

.tx-sd-configurator .link {
	position: absolute;
	bottom: 20px;
}