/* Trescode - www.trescode.pl */



/* --- IMPORT CZCIONKI --- */

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&subset=latin-ext');


/* --- PODSTAWOWE POPRAWKI I TYPOGRAFIA --- */

* {
    font-family: 'Montserrat', sans-serif;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    font-weight: 300;
    outline: none;
}

*:focus {
    outline: none;
}

body, html {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
}

p.mrc-page__paragraph {
    font-size: 14pt;
    text-align: justify;
    margin: 0; padding: 10px;
}

@media all and (min-width: 1920px) {
    p.mrc-page__paragraph {
        font-size: 18pt;
    }
}

.mrc-page__divider {
    border-bottom: 1px solid #eee;
    margin-top: -20px;
}

.mrc-page__header--black {
    color: #000;
    text-transform: uppercase;
    font-size: 18pt;
}

.mrc-page__header--red {
    margin: 0; padding: 2em 10px 10px;
    color: #cd003a;
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
}
.mrc-page__header--email {
    color: #000;
    text-transform: uppercase;
    font-size: 16px;
}


/* --- STRUKTURA STRONY --- */

/* główny blok strony */
.mrc-page {
    max-width: 1200px;
    margin: 64px auto 64px auto;
}
@media all and (max-width: 1240px) {
    .mrc-page {
        margin: 0 20px 10px 20px;
    }
}

@media all and (min-width: 1920px) {
    .mrc-page {
        max-width: 1800px;
    }
}

/* menu górne (pasek nawigacyjny) */
.mrc-page__nav--wrapper {
    position: fixed;
    top: 0; left: 0; right: 0; 
    
    z-index: 9999;
}

.mrc-page__nav--wrapper--bg {
    background-color: #fff;
}

.mrc-page__nav {
    display: flex;

    width: 100%;
    height: 64px;

    text-transform: uppercase;

    max-width: 1200px;
    margin: 0 auto 64px auto;
}
@media all and (max-width: 1240px) {
    .mrc-page__nav--wrapper {
        right: 21px; 
    }

    .mrc-page__nav {
        margin: 0 20px 10px 20px;
    }
}
@media all and (min-width: 1920px) {
    .mrc-page__nav {
        max-width: 1800px;
    }
}

.mrc-page__nav_logo {
    flex: 0;
}
@media all and (max-width: 700px) {
    .mrc-page__nav_logo {
        flex: 1;
    }
}
.mrc-page__nav_logo--img {
    padding: 10px 0;
    height: calc(100% - 20px);
}
.mrc-page__nav_menu {
    flex: 1;
    white-space: nowrap;

    display: block;
    height: 64px;
    margin: 0; padding: 0;

    list-style-type: none;
}
@media all and (max-width: 1220px) {
    .mrc-page__nav_menu {
        display: none;
    }
}
.mrc-page__nav_menu li {
    display: block;
    float: left;
    height: 64px;
}
.mrc-page__nav_menu li a {
    display: block;
    line-height: 64px;
    height: 64px;
    padding: 0 20px;

    box-sizing: border-box;

    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
.mrc-page__nav_menu li a:hover {
    background-color: #f5f5f5;
}
.mrc-page__nav_menu li a.active {
    background-color: #eee;
    border-bottom: 2px solid #cd003a;
}
.mrc-page__nav_logo a {
    display: block;
    height: 64px;
    margin-right: 20px;
}
.mrc-page__nav_lang {
    flex: 0;
    white-space: nowrap;

    position: relative;
    cursor: pointer;
    z-index: 1;
}
@media all and (max-width: 1220px) {
    .mrc-page__nav_lang {
        display: none;
    }
}
.mrc-page__nav_lang_button {
    padding-left: 20px;

    height: 64px;
    line-height: 64px;
 }
.mrc-page__nav_lang_button i {
    padding: 0 10px;
}
.mrc-page__nav_lang_list {
    z-index: 9999;
    
    list-style-type: none;
    list-style-position: inside;

    position: absolute;
    left: 10px;

    padding: 0; margin: 0;

    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.24);
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    display: none;

    overflow: hidden;
}
.mrc-page__nav_lang_list li a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 10px 20px;
}
.mrc-page__nav_lang_list li a:hover {
    background-image: linear-gradient(135deg, #f5f5f5, #f0f0f0);
    
}
.mrc-page__nav_lang:hover .mrc-page__nav_lang_list,
.mrc-page__nav_lang:active .mrc-page__nav_lang_list {
    display: block;
}

.mrc-page__nav_mobile {
    flex: 0;
    white-space: nowrap;

    position: relative;
    cursor: pointer;
    z-index: 1;
}
@media all and (max-width: 1220px) {
    .mrc-page__nav_mobile {
        flex: 1;
    }
}
@media all and (max-width: 700px) {
    .mrc-page__nav_mobile {
        display: block;
    }
}
.mrc-page__nav_mobile--button {
    flex: 0;
    display: none;
    height: 64px; width: 64px;
    line-height: 78px;
    text-align: center;
    position: absolute;
    right: 0px;

}
@media all and (max-width: 1220px) {
    .mrc-page__nav_mobile--button {
        display: block;
    }
}
.mrc-page__nav_mobile--button a {
    display: block;
    padding: 0 20px;
}
.mrc-page__nav_mobile_list {
    z-index: 9999;
    
    list-style-type: none;
    list-style-position: inside;

    position: absolute;
    right: 10px;
    top: 64px;

    padding: 0; margin: 0;

    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.24);
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    display: none;

    overflow: hidden;
}
.mrc-page__nav_mobile_list li a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 10px 20px;
}
.mrc-page__nav_mobile_list li a:hover {
    background-image: linear-gradient(135deg, #f5f5f5, #f0f0f0);
    
}
.mrc-page__nav_mobile:hover .mrc-page__nav_mobile_list,
.mrc-page__nav_mobile:active .mrc-page__nav_mobile_list {
    display: block;
}

.mrc-page__nav_mobile_list--title {
    margin: 10px 20px;
    font-weight: 450;
}

/* stopka */
.mrc-page__footer {
    padding-top: 64px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-transform: uppercase; font-size: 14px;
}

@media all and (min-width: 1920px) {
    .mrc-page__footer {
        font-size: 18px;
    }
}

.mrc-page__footer_menu {
    flex: 1;
}
.mrc-page__footer_logo {
    flex: 1;
    text-align: center;
}
.mrc-page__footer_menu_list {
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    height: 64px; width: 100%;
    padding: 0; margin: 0;
}
.mrc-page__footer_menu_list li {
    flex: 0;
    white-space: nowrap;
    display: block;
}
.mrc-page__footer_menu_list li a {
    line-height: 64px;
    padding: 0 10px;
}
.mrc-page__footer_copyright {
    flex: 1;
    height: 64px;
    line-height: 64px;
    white-space: nowrap;
    text-align: center;
}

/* Unia Europejska */

.mrc-page__footer_unia{
    text-align: center;
    padding-top: 64px;
}

.mrc-page__footer_pfr{
    text-align: center;
    padding-top: 16px;
}

.mrc-page__footer_unia img, .mrc-page__footer_pfr img{
    width: 50%;
}

.unia img {
    width: 100%;
}

/* nagłówek strony głównej */
.mrc-header {
    position: relative;
}
.mrc-header__bg {
    position: absolute;
    left: calc(9px - (100vw - 1200px) / 2);

    width: calc(100vw - 20px);
    height: calc(100vh - 64px - 64px - 64px);
    
    background: url('/public/src/img/half-fly.png');
    background-attachment: scroll;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}
@media all and (max-width: 1240px) {
    .mrc-header {
        margin-top: 64px;
    }
    .mrc-header__bg {
        left: -20px;
    }
}

@media all and (min-width: 1920px){
    .mrc-header__bg {
        left: calc(9px - (100vw - 1800px) / 2);
    }
}
.mrc-header__container {
    position: relative;
    margin: 0 auto;
    height: calc(100vh - 64px - 64px - 64px)
}
@media all and (max-width: 1240px) {
    .mrc-header__container {
        height: calc(100vh - 64px - 64px - 20px)
    }
}
.mrc-header__babeczka {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: url('/public/src/img/home-withlogo.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
@media all and (max-width: 1220px) {
    .mrc-header__babeczka {
        background-image: url('/public/src/img/home-withlogo-vertical.png');
    }
}
.mrc-scrolldown__button {
    display: block;
    text-align: center;
    height: 64px;
}
.mrc-scrolldown__button--text {
    padding-bottom: 20px;
    text-transform: uppercase;
}
.mrc-scrolldown__button span {
    -webkit-animation-name: move;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite;

    position: relative;
}
@-webkit-keyframes move {
    0% {top: 0px;}
    50% {top: 10px;}
    100% {top: 0px;}
}
@keyframes move {
    0% {top: 0px;}
    50% {top: 10px;}
    100% {top: 0px;}
}

/* babeczki na stronie głównej */
.mrc-page__babeczki {
    padding-top: 64px;
}
.mrc-page__babeczki_duze, .mrc-page__babeczki_male {
    display: flex;
    flex-wrap: wrap;
}
.mrc-page__babeczka_duza {
    position: relative;

    flex: 1;
    flex-basis: 500px;

    background-size: cover;

    margin: 2px;
}
.mrc-page__babeczka_mala {
    position: relative;

    flex: 1;
    flex-basis: 300px;

    background-size: cover;

    margin: 2px;
}
.mrc-page__babeczka--sizer {
    padding-top: 100%;
}
.mrc-page__babeczka_overlay {
    opacity: 0;
    transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;

    background-color: #cd003ac4;
    color: #fff;

    display: table;

    width: 100%; height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.mrc-page__babeczka_duza:hover .mrc-page__babeczka_overlay,
.mrc-page__babeczka_duza:active .mrc-page__babeczka_overlay,
.mrc-page__babeczka_mala:hover .mrc-page__babeczka_overlay,
.mrc-page__babeczka_mala:active .mrc-page__babeczka_overlay {
    opacity: 1;
}
.mrc-page__babeczka_overlay--content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 20pt;
    text-transform: uppercase;
}
.mrc-page__babeczka_logo {
    position: absolute;
    left: 20px; bottom: 20px;
    width: 25%;
}

@media all and (max-width: 1056px){
.mrc-page__babeczka_overlay--content {
    padding: 20px;
}
}

@media all and (min-width: 1920px) {
    .mrc-page__babeczka_overlay--content {
        font-size: 22pt;
    }
}

/* strona z ofertą */

.mrc-page__offer-content {
    display: flex;
    flex-wrap: wrap;

    min-height: calc(100vh - 64px - 26.8px - 68px - 64px - 64px);

    margin-top: 80px;
}

@media all and (max-width: 1220px){
    .mrc-page__offer-content {
        margin-top: 64px;
    }
}

.mrc-page__offer-photo {
    flex: 1;
    flex-basis: 500px;

    position: relative;
    
    margin: 2px;

    background-size: cover;
    background-position: center; 

    display: flex;
    align-items: flex-end;
}

@media all and (max-width: 1064px){
    .mrc-page__offer-photo {
        flex-basis: 400px;
    }
}

.mrc-page__offer--sizer {
    padding-top: 150%;
}

.mrc-page__offer-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.mrc-page__offer-overlay--content {
    opacity: 0;
    transition: opacity .5s ease;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    -ms-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;

    background-color: rgba(255, 255, 255, 0.850);
    color: #000;

    width: 100%;
    height: 100px;
    margin-bottom: 25%;

    text-transform: uppercase;
    text-align: center;
}

.mrc-page__offer-photo:hover .mrc-page__offer-overlay--content,
.mrc-page__offer-photo:active .mrc-page__offer-overlay--content {
    opacity: 1;
}

.mrc-page__offer-content span {
    margin: 0 7.5px;
    color: #333;

    transition: 0.5s ease-in-out;
}

.mrc-page__offer-content span:hover{
    color: #cd003a;
}

.mrc-page__offer-overlay--column {
    width: 100%;
    line-height: 100px;
    float: left;
    font-weight: 400;
}

/* strona o firmie */

.mrc-page__about-content {
    min-height: calc(100vh - 64px - 26.8px - 68px - 64px - 64px);
    display: table;
    width: 100%;
}
@media all and (max-width: 1220px){
    .mrc-page__about-content {
        margin-top: 64px;
    }
}
.mrc-page__about-content--child {
    display: table-cell;
    vertical-align: middle;
}



/* strona kontaktowa */

.mrc-page__contact-content {
    min-height: calc(100vh - 64px - 26.8px - 68px - 64px - 64px);
    display: table;
    width: 100%;
}
@media all and (max-width: 1220px){
    .mrc-page__contact-content {
        margin-top: 64px;
    }
}
.mrc-page__contact-content--child {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}
.mrc-page__contact-content_flex-parent {
    display: flex;
    flex-wrap: wrap;
}
.mrc-page__contact-content_flex-child {
    flex: 1;
    padding: 10px;
}
.mrc-page__contact-form_flex-parent {
    display: flex;
    flex-wrap: wrap;
}
.mrc-page__contact-form_flex-child--narrow {
    flex: 1;
    flex-basis: 400px;
}
.mrc-page__contact-form_flex-child--wide {
    flex: 1;
    flex-basis: 1200px;
}
.mrc-page__contact-form_flex-child--full {
    flex: 1;
    flex-basis: 9999px;
}
.mrc-page__contact-form_input {
    margin: 10px;
    box-sizing: border-box;
}
.mrc-page__contact-form_input input,
.mrc-page__contact-form_input textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px;
    resize: none;
}
.mrc-page__contact-form_button {
    text-align: right;
    margin: 10px;
    box-sizing: border-box;
}
.mrc-page__contact-form_button button {
    padding: 20px;
    min-width: 200px;
    text-transform: uppercase;
    background-color: #f5f5f5;
    color: #000;
    border: solid 2px #cd003a;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    cursor: pointer;

    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
.mrc-page__contact-form_button button:hover {
    background-color: #eee;
    min-width: 220px;
}


@media all and (max-width: 700px) {
    .mrc-page__contact-form_button button {
        width: 100%;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #666;
  -webkit-text-fill-color: #000;
  box-shadow: 0 0 0px 1000px #fff inset;
}

/* Rozwiązanie problemu działania formularzy iOS */

input, input:before, input:after, textarea, textarea:before, textarea:after {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
   } 

.mrc-page__contact-form--action {
    margin: 10px;
    box-sizing: border-box;
    height: 60px;
    background-color: #f5f5f5;
    padding: 0 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    line-height: 60px;
    border: solid 2px #cd003a;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

.mrc-page__contact-form--action i {
    margin-right: 10px;   
}