@charset "UTF-8";
/*------------------------   
1. GLOBAL
1.B. LOADER
2. NAVBAR
3. HERO
4 TEXT MEDIA QUERY
5. PARA SECTION
6. IMAGE GALLERY
7. TYPED JS
9. FOOTER
10. BUTTON
11. CONTACT
12. COMPARISON TABLE
17. ACCORDION
18. CARD
18.B. PRICE CARD
19. MODAL
20. OWL CAROUSEL HERO

22. GOOGLE MAPS
23. DOCUMENTS SECTION
24. CHECKBOX
25. DROPDOWN FORM
26. TRANSPORT TABLE
27. TABLE


------------------------*/

/* GLOBAL
----------------------*/

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


body {
    font-family: 'Rubik', sans-serif;
    position: relative;
}


.grecaptcha-badge { 
    visibility: hidden;
}

a {
    color: #e85a4f;
    outline: 0;
}

a:hover,
a:focus {
    color: #e85a4f;
    text-decoration: none;
    outline: 0;
}

h1 {
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    color: #14021c;
}

h2 {
    font-size: 45px;
    font-weight: 300;
    color: #14021c;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

h3 {
    color: #14021c;
    font-size: 33px;
    font-weight: 500;
}

h4 {
    font-size: 20px;
    font-weight: 400;
    color: #14021c;
}

h5 {
    font-size: 28px;
    font-weight: 300;
    color: #14021c;
    margin-bottom: 0.7rem;
}

p {
    color: #3f3b3e;
}

p.lead {
    color: #e85a4f;
    margin-bottom: 2rem;
}

.text-primary {
    color: #e85a4f !important;
}

.light-font {
    font-weight: 300;
}

.fas-container {
    background: linear-gradient(230deg, #000000, e98074, #e85a4f, #5a6359);
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.fa,
.fas,
.fab,
.far {
    color: white;
}

.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title small {
    color: #e85a4f;
}

@media (max-width:767px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 30px;
    }
}

::selection {
    background: #e85a4f;
}

::-moz-selection {
    background: #e85a4f;
}

p::selection {
    background: e98074;
}

p::-moz-selection {
    background: e98074;
}

small::selection {
    background: #3f3b3e;
}

small::-moz-selection {
    background: #3f3b3e;
}

.white-text{
    color: white;
}
.red-text{
    color: rgb(182, 47, 47);
}

/* 1.B. LOADER
----------------------*/
.loader {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00283A;
    display: flex;
    justify-content: center;
    align-items: center;
}



  .slider{
    position:absolute;
    width:300px;
    height:2px;
  }
  .line{
    top: 100px;
    left: -15px;
    position:absolute;
    background:#ffffff;
    width:300px;
    height:2px;
    
  }
  .break{
    top: 100px;
    left: -15px;
    position:absolute;
    background:#222;
    width:6px;
    height:2px;  
  }
  
  .dot1{ animation: loading 2s infinite;}
  .dot2{ animation: loading 2s 0.5s infinite; }
  .dot3{ animation: loading 2s 1s infinite; }
  
  @keyframes loading {
   from { left: 0; }
   to { left: 300px; }
  }

#loader-img{
    position: absolute;
    height: 100%;
    object-fit: contain;
}

.loader.hidden {
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.thumb {
    height: 100px;
    border: 1px solid black;
    margin: 10px;
}

/* 2. NAVBAR
----------------------*/

.nav-menu {
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.nav-menu.is-scrolling,
.nav-menu.menu-is-open {
    background-color: #800080;
    -webkit-box-shadow: 0px 5px 23px 0px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0px 5px 23px 0px rgba(0, 0, 0, 0.9);
    box-shadow: 0px 5px 23px 0px rgba(0, 0, 0, 0.9);
}

@media screen and (max-width: 992px) {
    .nav-menu.menu-is-open {
        overflow-y: auto;
        height: 100vh;
        align-items: flex-start;
    }

    .navbar-nav.is-scrolling {
        padding-bottom: 1rem;
    }

    .navbar-nav .nav-item {
        text-align: center;
    }

    .navbar-nav .nav-link {
        font-size: 4vh;
        color: white !important;
    
      
    }
}

.nav-menu.is-scrolling {
    padding: 0;
}

.navbar-nav .nav-link {
    position: relative;
}

.dropdown-item.active{
    background-color: rgb(109, 3, 109);
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 14px;
    }

    .dropdown-item.active, .dropdown-item, .dropdown-menu{
        background-color:rgb(109, 3, 109);
    }

}

#navbar a{
    color: white;
}

#navbar a:hover{
    color: #e85a4f;

    
}

.animated-icon1 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.animated-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.animated-icon1 span {
    background: #e85a4f;
}

.animated-icon1 span:nth-child(1) {
    top: 0px;
}

.animated-icon1 span:nth-child(2) {
    top: 10px;
}

.animated-icon1 span:nth-child(3) {
    top: 20px;
}

.animated-icon1.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown-menu {
    background:  rgb(109, 3, 109);
    white-space: nowrap;
    width: 250px;
    text-align: left;
    left: 0;
    right: 0;
    overflow: hidden;
    border: none;
}

@media (max-width: 992px) {
    .dropdown-menu {
        width: 100%;
        text-align: center;
    }
}

.dropdown {
    text-align: center;
}

a.dropdown-item {
    color: rgb(255, 255, 255);
    
}

a.dropdown-item:nth-child(2), a.dropdown-item:nth-child(3){
    margin-top: 20px;
}

a.dropdown-item:hover {
    color: lightgray;
    background-color: transparent;

}

.dropdown-menu > li > a {
    color: #fff;
}

/* 5. PARA SECTION
    
    background-image: url("../img/b.jpg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
272E36 - szürke


----------------------*/

#para {
    background-color: #27243A;
}


#szel {
    background-color: #272E36;

}

/* HERO
----------------------*/
header.masthead {
    height: 100vh;
    padding-bottom: 50px;
    position: relative;
    width: 100%;
    padding-top: 70px;
    color: white;
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.masthead-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(0, 0, 0);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    top: 0;
    left: 0;
}

.fog-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
    top: 0;
    left: 0;
  }
  
  .fog-img {
    position: absolute;
    height: 100vh;
    width: 300vw;
    z-index: 4;    top: 0;
    left: 0;
  }
  
  .fog-img-first {
    background: url("../img/owl/fog-1.png");
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    animation: marquee 60s linear infinite;
  }
  
  .fog-img-second {
    background: url("../img/owl/fog-2.png");
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    animation: marquee 30s linear infinite;
  }
  
  @keyframes marquee {
    0% {
      transform: translate3d(0, 0, 0);
    }
  
    100% {
      transform: translate3d(-200vw, 0, 0);
    }
  }

@media (min-width: 991px) and (min-height: 550px) {
    .masthead {
        height: 100vh;
    }
}

.header-h1 {
    text-shadow: 11px 11px 1px rgba(0, 0, 0, 0.1);
}

.bg-gradient {
    background: -moz-linear-gradient(50deg, rgba(90, 99, 89, 0.9), rgba(111, 150, 0, 0.9), rgba(1, 34, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -webkit-linear-gradient(50deg, rgba(90, 99, 89, 0.9), rgba(111, 150, 0, 0.9), rgba(1, 34, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -ms-linear-gradient(50deg, rgba(90, 99, 89, 0.9), rgba(111, 150, 0, 0.9), rgba(1, 34, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: linear-gradient(50deg, rgba(90, 99, 89, 0.9), rgba(111, 150, 0, 0.9), rgba(1, 34, 50, 0.9), rgba(0, 0, 0, 0.9));
}

@media (max-width:991px) {
    .header-h1-color {
        text-align: center;
        color: #e85a4f;
    }
}

/* 4. TEXT MEDIA QUERY
----------------------*/

@media all and (min-width: 50px) {
    .header-h1 {
        font-size: 2.1em;
    }

    a.dropdown-item {
        font-size: em;
    }
}

@media all and (min-width: 100px) {
    .header-h1 {
        font-size: 2.2em;
    }
}

@media all and (min-width: 200px) {
    .header-h1 {
        font-size: 2.4em;
    }
}

@media all and (min-width: 300px) {
    .header-h1 {
        font-size: 2.6em;
    }
}

@media all and (min-width: 400px) {
    .header-h1 {
        font-size: 2.8em;
    }
}

@media all and (min-width: 500px) {
    .header-h1 {
        font-size: 3.0em;
    }
}

@media all and (min-width: 600px) {
    .header-h1 {
        font-size: 3.2em;
    }

    a.dropdown-item {
        font-size: 1.4em;
    }
}

@media all and (min-width: 700px) {
    .header-h1 {
        font-size: 3.4em;
    }
}

@media all and (min-width: 800px) {
    .header-h1 {
        font-size: 3.6em;
    }
}

@media all and (min-width: 900px) {
    .header-h1 {
        font-size: 4.0em;
    }
}

@media all and (min-width: 992px) {
    .header-h1 {
        font-size: 4.2em;
    }

    a.dropdown-item {
        font-size: 1em;
    }
}

@media all and (min-width: 1100px) {
    .header-h1 {
        font-size: 4.4em;
    }
}

@media all and (min-width: 1200px) {
    .header-h1 {
        font-size: 4.6em;
    }
}

@media all and (min-width: 1300px) {
    .header-h1 {
        font-size: 4.8em;
    }
}

@media all and (min-width: 1400px) {
    .header-h1 {
        font-size: 5.0em;
    }
}

@media all and (min-width: 1500px) {
    .header-h1 {
        font-size: 5.2em;
    }
}

@media all and (min-width: 1500px) {
    .header-h1 {
        font-size: 5.4em;
    }
}

@media all and (min-width: 1600px) {
    .header-h1 {
        font-size: 5.6em;
    }
}

@media all and (min-width: 1700px) {
    .header-h1 {
        font-size: 5.8em;
    }
}

/* 7. TYPED JS
----------------------*/
.h5-typed-js{
    color: white;
    margin-top: 50px;
    font-size: 28px;
    font-weight: 100;
    margin-left: 10px;
}


@media all and (max-height:542px) {
    .h5-typed-js{
        font-size: 20px;
        margin-top: 26px;
    }


}


/* 9. FOOTER
----------------------*/

footer{
    background-color: #800080;
    padding-top: 15px;
    -webkit-box-shadow: 0px -6px 20px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: 0px -6px 20px rgba(50, 50, 50, 0.45);
    -o-box-shadow: 0px -6px 20px rgba(50, 50, 50, 0.4);
    box-shadow: 0px -6px 20px rgba(50, 50, 50, 0.4);
}



/*  BUTTON
----------------------*/
.go-to-contact-button{
    color: white !important;
    padding: 10px 40px 10px 40px;
}
@media all and (max-width:542px){
    .go-to-contact-button{
        padding: 10px 10px 10px 10px;
    }
}

.button {
    width: 200px;
    font-size: 28px;
    height: 55px;
    font-weight: 100;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    border-radius: 5px;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    background-image: linear-gradient(45deg, #e85a4f, #e85a4f, #e85a4f, #e85a4f, #e85a4f, #dddddd, #e85a4f);
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}

.button:hover {
    background-position: 200% 0;
    color: #fff;
}

.button:focus {
    outline: none;
}

.button:active {
    
    -moz-transition: all 0s;
    -o-transition: all 0s t;
    -webkit-transition: all 0s;
    transition: all 0s;
}

@media all and (min-width:992px)
{
    .nav-button{
        width: 200px !important;
        height: 38px !important;
        margin: 0;    
    }
}

@media all and (max-width:992px){
    .card-button{
        width: 100px !important;
    }
}

#popup-send-button{
width: 320px !important;
}

@media all and (max-width:542px){
    #popup-send-button{
        width: 250px !important;
    }
}

/* 11. CONTACT
----------------------*/

.tel,
.mail {
    font-size: 5vw;
    outline: none;
    color:white;
}

@media all and (max-width:742px){
    .tel,
    .mail {
        font-size: 9vw;
        }
    }

.footer-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url("../img/contact.jpg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
}

.tel:hover,
.mail:hover {
    color: #c8cecb;
}

#contact {
    background-color: rgba(45,2,55,0.7);
    position: relative;
}



/* 17. ACCORDION
---------------------*/

.accordion-panel .accordion {
    padding-top: 30px;
}

.accordion-panel .accordion dt {
    display: block;
    padding: 25px;
    background: #800080;

    cursor: pointer;
    position: relative;
    user-select: none;
}

.accordion dt h4{
    color: white;
}

.accordion-panel .accordion p{
    color:black;
}

.accordion-panel .accordion dd {
    height: 0;
    overflow: hidden;
    transition: height .35s ease-out;
    margin-left: 0;
    margin-bottom: 20px;
    background: #F4F4F4;
}

.accordion-panel .accordion .content {
    padding: 25px;
    overflow: auto;
}

.accordion-panel .plus-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    transition: transform 0.35s ease-out;
    
    right: 35px;
    top: 50%;
    margin-top: -12px;
}

.accordion-panel .plus-icon:before,
.accordion-panel .plus-icon:after {
    content: '';
    background: white;
    position: absolute;
}

.accordion-panel .plus-icon:before {
    width: 2px;
    height: 15px;
    margin-left: -0.5px;
    left: 50%;
}

.accordion-panel .plus-icon:after {
    width: 15px;
    height: 2px;
    margin-top: -0.5px;
    top: 50%;
    opacity: 1;
    transition: opacity 0.35s ease-out;
}

.accordion-panel .is-open .plus-icon {
    transform: rotate(90deg);
}

.accordion-panel .is-open .plus-icon:after {
    opacity: 0;
}

.accordion-panel .hidden {
    display: none;
}

.accordion-panel .buttons-wrapper {
    position: relative;
}

.accordion-panel .buttons-wrapper .plus-icon {
    position: absolute;
    right: 10px;
    top: 12px;
}

/* 12. COMPARISON TABLE
---------------------*/

/*-18. CARD, TABLE
---------------------*/

.portfolio-card, .szallitas, .atvetel{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
}


#thread-para, #thead-ho, #thead-szel{
    background-color: purple;

}

.comparison-table-outer{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    scrollbar-color:rgb(194, 194, 194) white;
    height: 350px;
}

.comparison-table-outer-1{
    overflow: auto;
}
.comparison-table-outer-3{
    overflow: hidden;
}

.comparison-table-overlay{
    position: absolute;
    background-color: #F2F2F2;
    width: calc(100% - 17px);
    height: 18px;
    bottom: 0px;
    right: 17px;
    z-index: 1;
}

.comparison-table{
    position: relative;
    z-index: 2;
    border-radius: 5px;
}

.portfolio-card-white, .comparison-table-outer{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(206, 206, 206, 0.6);
    -moz-box-shadow: 0px 5px 15px 0px rgba(206, 206, 206, 0.6);
    -o-box-shadow: 0px 5px 15px 0px rgba(206, 206, 206, 0.6);
    box-shadow: 0px 5px 15px 0px rgba(206, 206, 206, 0.6);
}

.card-img-top-container {
    
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.portfolio-card:hover{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
}

.portfolio-card-white:hover, .comparison-table-outer:hover{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(216, 213, 213, 0.8);
    -moz-box-shadow: 0px 5px 15px 0px rgba(216, 213, 213, 0.8);
    -o-box-shadow: 0px 5px 15px 0px rgba(216, 213, 213, 0.8);
    box-shadow: 0px 5px 15px 0px rgba(216, 213, 213, 0.8);
}

.portfolio-link {
    overflow: hidden;
}

.portfolio-link img {
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.portfolio-link:hover img {
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.atvetel{
    margin-top: 80px ;
}
/*---------------------END Card--------------------*/

/* 18.B. PRICE CARD
------------------*/

.price-card{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
}

.price-card:hover{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.6);
}



.price-card{
    background-color: purple;
}

.price-card div h3, .price-card div h5, .price-card div h2{
    color: white;
}

/*19. MODAL
---------------*/

.close-modal{
    position: relative;
    background-size: 300% 100%;
    background-image: linear-gradient(45deg, #e85a4f, #e85a4f, #e85a4f, #e85a4f, #e85a4f, #dddddd, #e85a4f);
    float: right;
    width: 50px;
    height: 50px;
    display:block;
    border-radius: 15%;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

.close-modal:hover {
    background-position: 200% 0;
}

.close-modal:focus {
    outline: none;
}

.close-modal:after{
    content: '';
    height: 34px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(45deg);
    top: 7px;
    left:23px;  
}

.close-modal:before{
    content: '';
    height: 34px;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(-45deg);
    top: 7px;
    left:23px;
}

.portfolio-modal {
    padding-right: 0 !important;
}

.portfolio-modal .modal-dialog {
    margin: 2rem;
    max-width: 100vw;
}

.portfolio-modal .modal-dialog {
    margin: 2rem;
    max-width: 100vw;
}

.portfolio-modal .modal-content {
    text-align: center;
}

@media all and (max-width:642px){
    .portfolio-modal .modal-dialog {
        margin: 1rem;
    }
}   
/*----------END Modal-------------*/

/*20. OWL CAROUSEL HERO
---------------*/

@keyframes animate-text {
  0% {
      transform: translateX(200px);
        opacity: 0;
    }
  100% {transform: translateX(0px);
         opacity: 1;
    }
   
}
.owl--text {
  animation-name: animate-text;
  animation-duration: 2s;
}

.owl-carousel {
    position: absolute;
    height: 100vh;
    top: -70px;
}

.owl-carousel div:not(.owl-controls) {
    height: 100%;
}

.owl-carousel div.owl--text {
    position: absolute;
    bottom: 4em;
    left: 2em;
    width: 20em;
    height: 8em;
    padding: 1em;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    opacity: 1;
}

.owl-next{
    right: 5px;
}

/*23. GOOGLE MAPS
------------------------*/

.main-image{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.masterhead-phone:hover{
    text-decoration: none;
    color: white;

}

.masterhead-text{
    width: 320px;
    overflow: hidden;
    height: 30px !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#masterhead-h1-framed {
    overflow: visible;
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    display: inline-block;
    color: white;
    font-size: 4.3vw;
    font-weight: 600;
    line-height: 1;
    background-color:  rgb(128, 0, 128) ;
    padding: 3%;
}

.masterhead-button{
    padding-top: 4px;
    position: absolute;
    top: 10%;
    transform: translateY(-10%);
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    z-index:5;
}

.masterhead-button-mobile{
    padding-top: 4px;
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    background-image: linear-gradient(45deg, #800080, #800080, #800080,#800080, #800080, #dddddd, #800080);
    z-index:5;
}

.d0, .d1, .d2, .d3{
    position: absolute;
    color: white;
    padding: 7px 0px 7px 20px;
    font-weight: 300;
    line-height: 1;
    /*background-color: #800080;*/
}

#masterhead-h1 {
    overflow: visible;
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    display: inline-block;
    color: #800080;
    font-size: 6.3vw;
    font-weight: 900;
    line-height: 1;
}

#masterhead-h1-mobile{
    position: absolute;
    z-index: 10;
    color:#800080;
    font-size: 10vw;
    font-weight: 900;
    line-height: 1;
}

#masterhead-h1-mobile::after, #masterhead-h1::after{
    content: attr(data-end) ;
    color: #800080;
  }

#masterhead-h1-mobile::after, #masterhead-h1-framed::after{
    content: attr(data-end) ;
    color: #e85a4f;
  }


/*SLIDEING TEXT MOVING DOWN*/

.d0{
	animation: move-down-0  8s 0.45s linear forwards;
}
.d1{
	animation: move-down  8s 0.3s infinite linear both;
}
.d2{
	animation: move-down 8s 2.95s infinite linear both;
}
.d3{
	animation: move-down 8s  5.63s infinite linear both; 
}

@keyframes move-down-0{
	0% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
		-o-transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		}
	30% {
		transform: translateY(0%);
		-moz-transform: translateY(0%);
		-o-transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		}
	35% {
		transform: translateY(100%);
		-moz-transform: translateY(100%);
		-o-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		}
	100% {
		transform: translateY(100%);
		-moz-transform: translateY(100%);
		-o-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		}
}

@keyframes move-down{
	0% {                
		transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		}
	30% {                
		transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		}
	35% {                
		transform: translateY(0%);
		-moz-transform: translateY(0%);
		-o-transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		}
	65% {                
		transform: translateY(0%);
		-moz-transform: translateY(0%);
		-o-transform: translateY(0%);
		-webkit-transform: translateY(0%);
		-ms-transform: translateY(0%);
		}
	70% {                
		transform: translateY(100%);
		-moz-transform: translateY(100%);
		-o-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		}
	100% {                
		transform: translateY(100%);
		-moz-transform: translateY(100%);
		-o-transform: translateY(100%);
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		}
}

.rombusz{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url("/img/romb-contact.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    top: 10px;
}

/* 23. DOCUMENTS SECTION
------------------------*/
.card-downloads{
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(46, 46, 46, 0.5);
}

.card-image-downloads{
    padding: 30px 60px 0px 60px;  
}

.card-downloads:hover{
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
}

.download-button{
    position: relative;
    font-weight: 300;
    width: 120px;
    font-size: 20px;
    height: 40px;
    padding: 5px;
}

.download-button:focus{
    color: white;
}



/* 24. CHECKBOX
----------------------*/
select[disabled] {
    color: rgb(230, 230, 230);
}


/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: blueviolet solid 2px;
    border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 1px;
    width: 8px;
    height: 16px;
    border: solid rgb(184, 34, 34);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* 25. DROPDOWN FORM
----------------------*/

#side-menu-icon{
	position: fixed;
	top: 0px;
	left: 10px;
	height: 40px;
	width: 40px;
	z-index: 120;
}
#menu {
  cursor: pointer;
  padding: 22px 35px 16px 0px;
  border: solid 2px green;
}

#menu span, #menu span:before, #menu span:after {
  cursor: pointer;
  height: 2px;
  width: 35px;
  background: #FFFFFF;
  position: absolute;
  display: block;
  content: '';
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#menu span:before {
  -webkit-animation: undo-top .5s forwards;
          animation: undo-top .5s forwards;
}

#menu span:after {
  bottom: -10px;
  -webkit-animation: undo-bottom .5s;
          animation: undo-bottom .5s;
}

#menu.active span {
  background-color: transparent;
}

#menu.active span:before {
  top: 0;
}

#menu.active span:before {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: top-x .5s forwards;
          animation: top-x .5s forwards;
}

#menu.active span:after {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-animation: bottom-x .5s forwards;
          animation: bottom-x .5s forwards;
}

@-webkit-keyframes top-x {
  0% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
}

@keyframes top-x {
  0% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
}

@-webkit-keyframes bottom-x {
  0% { transfrom: translateY(0) rotate(0); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
}

@keyframes bottom-x {
  0% { transfrom: translateY(0) rotate(0); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
}

@-webkit-keyframes undo-top {
  0% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
}

@keyframes undo-top {
  0% { -webkit-transform: translateY(0px) rotate(45deg); transform: translateY(0px) rotate(45deg); }
  50% { -webkit-transform: translateY(0px) rotate(0); transform: translateY(0px) rotate(0); }
  100% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
}

@-webkit-keyframes undo-bottom {

  0% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { transfrom: translateY(0px) rotate(0); }
}

@keyframes undo-bottom {

  0% { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }
  50% { -webkit-transform: translateY(-10px) rotate(0); transform: translateY(-10px) rotate(0); }
  100% { transfrom: translateY(0px) rotate(0); }
}

#side-menu{
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 30%;
	background-color: #222;
	z-index: 110;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
	transform: translate(-610px,0px);
	transition: 0.3s ease-in-out;
}
#side-menu.active{
	transform: translate(0px,0px);
	transition: 0.3s ease-in-out;
}

#overlay{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 105;
	display: none;
	transition: 0.3 ease-in-out;
}
#overlay.active{
	display: block;
	transition: 0.3 ease-in-out;
}


/* 26. TRANSPORT TABLE
----------------------*/





.transportDiv table {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);




    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 30px;
    margin-top: 30px;
}

.transportDiv table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

.transportDiv table tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
}

.transportDiv table th,
.transportDiv table td {
    padding: .625em;
    text-align: center;
}

.transportDiv table th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    .transportDiv table {
    border: 0;
    }

    .transportDiv table caption {
    font-size: 1.3em;
    }
    
    .transportDiv table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }
    
    .transportDiv table tr {
    
    display: block;
    margin-bottom: .625em;
    }
    
    .transportDiv table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
    }
    
    .transportDiv table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    }
    
    .transportDiv table td:last-child {
    border-bottom: 0;
    }
}  

/* 26. TABLE
-----------------*/

  table {
    table-layout:fixed !important;
    width:100% !important;
}

#thead-szel tr th h5, #thead-ho tr th h5, #thread-para tr th h5{
    font-size: 20px;
    color: white;
}

@media screen and (max-width: 600px) {

    td, th{
        font-size: small;
    }

    #thead-szel tr th h5, #thead-ho tr th h5, #thread-para tr th h5{
        font-size: 16px;
        font-weight: 600;
    }

}