:root {
    --main: #2E5CD0;
    --secondary: #272736;
    --black: #000;
    --white: #fff;
    --text: #555;
    --grey: #DDD;
    --sizebig: 64px;  
    --size: 32px;
    --sizesmall: 16px;
    --sizetiny: 8px;
    --radius: 0;
}

.row {
  --bs-gutter-x: 32px;
}

/* Uniwersalne style */
h1, h2, h3, h4, h5, h6 {font-weight: 600; color: var( --black );}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {color: var( --main );}
h1 {font-size: 52px; margin-bottom: var( --size ); line-height: 1.1;}
h2 {font-size: 35px; margin-bottom: var( --size );  line-height: 1.1;}
h3 {font-size: 24px; margin-bottom: var( --size );}
h4 {font-size: 19px; margin-bottom: var( --size );}
h5 {font-size: 16px; margin-bottom: var( --sizesmall );}
h6 {font-size: 14px; margin-bottom: var( --sizesmall );}

.container {padding-top: var( --size ); padding-bottom: var( --size ); }
img {max-width: 100%; height: auto; border-radius: var( --radius );}
a {text-decoration: none; color: var( --main );}
a:hover {text-decoration: underline;}
p {line-height: 1.5;}
ul {margin: var( --size ) 0 var( --size ) 0.7em; padding: 0; list-style-type: square;}
ul li::marker {color: var( --main );}
ul li {padding: 2px 0;}

.btn {padding: 7px 16px; background: var( --main ); color: var( --white ); font-weight: bold; font-size: inherit; border-radius: var( --radius );}
.btn:hover {background: var( --secondary ); color: var( --white ); text-decoration: none;}
.btn:hover a {text-decoration: none;}
.btn svg {margin-left: var( --sizetiny );}
.btn svg path {fill: var( --white ); }
.btn:hover svg path, .btn:hover a svg path {fill: var( --white );}

html {overflow-x: hidden;}
body {font-family: Calibri, Helvetica, Arial, sans-serif; color: var( --text ); font-size: 16px; overflow-x: hidden;}

/* Główne style strony (Core) */
header {padding-top: 0 !important;}
header .row {margin: 0 -2em; height: 651px; background: url( '../images/raitech-hero.jpg' ) no-repeat; background-size: cover;}
header .logo {display: inline-block; padding: 22px 28px; background: var( --white );}

main h1 {text-transform: uppercase;}
main h1 span {display: block; color: var( --main );}
main p:first-of-type {margin-bottom: var( --size ); font-size: 1.85em; color: var( --black ); line-height: 1.3;}
main p strong {display: block; margin: var( --size ) 0 var( --sizesmall ) 0; font-size: 1.3em; color: var( --black );}

main form {margin-top: -17.5em; padding: var( --size ); background: var( --main ); color: var( --white );}
main form h2 {margin-bottom: 0; color: var( --white ); font-weight: normal;}
main form p:first-of-type {margin: 5px 0 0 0; font-size: 1.5em; }
main form p {margin: 0 0 var( --sizesmall ) 0; font-size: 1.5em; color: inherit !important;}
main form p a {color: inherit;}
main form p.small {font-size: 0.75em; line-height: 1.2;}
main form .btn {background: var( --white ); color: var( --main ); }
main form .btn svg path {fill: var( --main );}
main form .form-control {margin-bottom: var( --sizesmall ); border-radius: var( --radius );}
main form .form-check-label {font-size: 0.85em; line-height: 1.2;}
main form .form-check {margin-bottom: 8px;}
main form .alert.alert-danger {font-size: 0.75em;}
main form .alert.alert-danger p {margin: 0;}

hr {width: 250px; max-width: 50%; height: 4px; display: block; margin: var( --size ) auto; background: var( --grey ); border: 0; opacity: 1;}

.content ul {width: max-content; max-width: 100%; margin: 0 auto; font-size: 1.3em; list-style-type: square; text-align: left;}
.content ul li {padding: 6px 0; line-height: 1.3;}
.content ul li::marker {color: var( --main );}
.content img {margin-bottom: var( --size );}
.content a h2 span {display: block; clear: both;}

.main-products .text-center h2 {margin-bottom: var( --sizebig ); }
.main-products .product {display: flex; flex-direction: column;}
.main-products .product span {font-size: 24px; color: var( --black ); font-weight: bold;}
.main-products .product h2 {color: var( --main );}
.main-products .product .frame {height: 100%; padding: var( --size ); background: var( --main ); color: var( --white );}
.main-products .product .frame ul {margin: 0 0 var( --size ) 0.7em; padding: 0; list-style-type: square;}
.main-products .product .frame ul li::marker {color: var( --white );}
.main-products .product .frame ul li {padding: 2px 0; line-height: 1.2;}
.main-products .product .frame .btn {background: var( --white ); color: var( --main ); }
.main-products .product .frame .btn svg path {fill: var( --main );}

.separator h2 {margin-top: var( --sizebig ); color: var( --main );}
.separator h3 {display: inline-block; vertical-align: middle;}
.separator .btn {margin: 0 0 var( --size ) 6px; transform: translateY( -2px );}

.products .products-description p {margin-bottom: var( --size );}
.products .products-description .btn {margin-bottom: var( --sizesmall );}
.products .products-description .btn + p {font-weight: bold; color: var( --black );}
.products h3 {margin: var( --sizesmall ) 0;}
.products ul {margin: 0 0 var( --size ) 0.7em; padding: 0;}

.sponsor {padding-top: 0;}
.sponsor hr {margin-bottom: var( --sizebig );}
.sponsor ul li {font-weight: bold;}
.sponsor .btn {margin-bottom: var( --sizesmall );}
.sponsor .btn + p {font-weight: bold; color: var( --black );}

.bottom img {width: 100%; height: 100%; object-fit: cover;}
.bottom .col-12 {padding-left: 0;}
.bottom .col-12:first-of-type {padding-left: calc(var(--bs-gutter-x)* .5); padding-right: 0;}
.bottom .frame {height: 100%; padding: var( --size ); background: var( --main ); color: var( --white );}
.bottom .frame h2 {display: inline-block; color: var( --white );}
.bottom .frame h2:after {display: block; clear: both; width: 100%; height: 4px; margin: 12px 0 0 0; background: var( --white ); content: "";}
.bottom .frame p {color: var( --white );}

.contacts h2 {display: inline-block; margin-bottom: var( --sizebig );}
.contacts h2:after {display: block; clear: both; width: 100%; height: 4px; margin: 12px 0 0 0; background: var( --grey ); content: "";}
.contacts h3 {margin-bottom: 0; color: var( --main );}
.contacts p {font-size: 20px;}
.contacts .col-lg-3 {margin-bottom: var( --sizesmall );}

footer {background: #333; color: var( --white ); position: relative;}
footer a {color: var( --white );}
footer a:hover {text-decoration: underline;}
footer ul {margin: var( --sizesmall ) 0 0 0;list-style-type: none;}
footer ul li {display: inline-block; margin-right: var( --sizesmall ); padding: 0; font-size: 20px;}
footer img {position: absolute; top: -28px; left: 50%; transform: translateX( -50% );}

.thank-you h2 {margin-top: var( --size );}

.pristine-error.text-help {display: inline-block; padding: 0 4px 1px 4px; transform: translateY( -25% ); background: #c03; color: var( --white ); font-size: 0.85em;}

@media (max-width: 1399px) {

}

@media (max-width: 1199px) {

    body {font-size: 16px;}
    h1 {font-size: 48px;}
    h2 {font-size: 32px;}
    h3 {font-size: 21px;}
    h4 {font-size: 16px;}
    h5 {font-size: 14px;}
    h6 {font-size: 12px;}

    .main-products .product img {margin-top: var( --size );}

    .products .products-description {padding-bottom: var( --size );}

}

@media (max-width: 991px) {

    body {font-size: 16px;}
    h1 {font-size: 44px;}
    h2 {font-size: 30px;}
    h3 {font-size: 23px;}
    h4 {font-size: 16px;}
    h5 {font-size: 13px;}
    h6 {font-size: 11px;}

    header .row {height: 551px;}

    main form {margin-top: var( --size ); }

}

@media (max-width: 767px) {

    header.container {width: 100%; margin: 0; padding: 0; max-width: unset;}
    header.container .row {width: 100%; max-width: unset; margin: 0 auto; height: 451px;}

    .main-products .product:first-of-type {margin-bottom: var( --sizebig );}

}

@media (max-width: 575px) {

    body {font-size: 14px;}
    h1 {font-size: 33px;}
    h2 {font-size: 24px;}
    h3 {font-size: 20px;}
    h4 {font-size: 14px;}

    header.container .row {height: 351px; background: url( '../images/raitech-hero-mobile.jpg' ) no-repeat; background-size: cover;}
    header .logo {padding: 8px 16px;;}
    header .logo svg {width: 100px;}

    main p:first-of-type {font-size: 20px;}

    .content ul {width: 100%; margin: 0; padding-left: 1em;}

    .main-products {padding-top: var( --sizesmall );}

    .separator {padding-top: 0; padding-bottom: 0;}
    .separator h2 {margin-top: var( --size ) ;}
    .separator .btn {margin-bottom: 0;}

    .products img {display: block; margin: var( --sizesmall ) auto 0 auto; height: 180px;}

    .sponsor hr {margin-top: 0;}
    
    .bottom {padding-top: 0;}
    .bottom .row {flex-direction: column-reverse;}
    .bottom .row .col-12 {padding-right: calc(var(--bs-gutter-x)* .5); padding-left: calc(var(--bs-gutter-x)* .5); }
    .bottom p {margin-bottom: 0;}

    .contacts h3, .contacts p {font-size: 16px;}

    footer ul li {font-size: 16px;}

    .thank-you img {with: 150px;}

}