@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600,700,800&display=swap&subset=latin-ext');
body{
    background-repeat: no-repeat;
    background-size: cover;

    color: #fff;
    background: -webkit-linear-gradient(-70deg, #93B7BE 30%, rgba(0, 0, 0, 0) 30%), url('../img/paintbrush.jpg');
    background: -o-linear-gradient(-70deg, #93B7BE 30%, rgba(0, 0, 0, 0) 30%), url('../img/paintbrush.jpg');
    background: -moz-linear-gradient(-70deg, #93B7BE 30%, rgba(0, 0, 0, 0) 30%), url('../img/paintbrush.jpg');
    background: linear-gradient(-70deg, #93B7BE 30%, rgba(0, 0, 0, 0) 30%), url('../img/paintbrush.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: 50% 21%;
    text-align: right;


}
.marka{
    color: #f6f1ed;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.7),
			     0px 8px 13px rgba(0,0,0,0.1),
			     0px 18px 23px rgba(0,0,0,0.05);
}

.nav-link{
    color: white;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4);
}
a:hover{
    color: #4F4F4F;
}
.navbar.scrolled{
    
    background: -webkit-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
    background: -o-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
    background: -moz-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
    background: linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f7c331 60%, #D1263F 60%);
    
    color: #f6f1ed;
    transition: background 500ms;
}
.title{
    color: white;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px black, 2px 4px 8px black;

}


#content{
    text-align: right;
    padding-top: 25%;
    padding-bottom: 20%;
    
}
.gombinverz{
    background-color: #93B7BE;
    text-align: center;
    border: 5px;
}
.gomb{
    background-color: #f7c331;
    color: white;
    text-align: center;
    border: 5px;
    border-radius: 12px;
}
.gomb:hover{
    background-color: #93B7BE;
    border: 5px;
}
.gombinverz:hover{
    background-color: #93B7BE;
    border: 5px;
}

.szoveg1{
    background-color: white;
    color: #777;
    text-align: center;
    position: scroll;
    margin-bottom: 2%;
}
.szoveg1 .p{
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.5rem;
}
h3{
    color: #141519;
}

h4 {
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    font: 28px 'Work Sans', sans serif;
    color: #111;
    font-weight: 200;
    margin-bottom: 15px;
    margin-top: 25px;
}
.hatter2 .hatter3{
    position: relaitve;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.hatter2{
    background-image: url("../img/paint.jpg");
    height: 500px;
    background-size: cover;
    height: 70%;
}
.service-item{
    cursor:pointer;
    background-color:#DCDCDC;
    text-align:center;
    padding:30px 20px;
    transition:all 0.7s;
    box-shadow:0px 0px 10px #cdcdcd;
    height: 8rem;
    border-radius: 12px;
}
.service-item:hover{
    background-color:#93B7BE}
.service-item h4{
    font-size:16px;
    font-weight:700;
    letter-spacing:0.5px;
    margin-bottom:15px;
    margin-top:25px}
.service-item:hover h4{
    color:#fff}
.service-item:hover p{color:#fff}

#workingon{
    background-color: rgba(255, 255, 255, 0.719);
    margin: 0;
}
.cardjelen{
    background-color: rgb(39, 39, 39);
}

#works{
    background-color: rgb(39, 39, 39);

}
.card{
    margin: 5px;
    border: 0;
    border-radius: 12px;
}
.nevjegykartya img{
    position: absolute;
    top: 5%;
    left: 35%;
    width: 30%;
}
.card-img-top{
    border-radius: 12px 12px 0 0;
}

.card-title{
    color: #93B7BE;

}
.card-text{
    color: rgb(39, 39, 39);
}

.eszkozok h5{
    text-align: left;
}
.eszkozok .card-text{
    text-align: left;
}
#munkasok{
    background-color: rgba(0, 0, 0, 0.5);

}

.kartya {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 12px; /* 5px rounded corners */
    width: 60px;
    height: 200px;
    margin: 5px;
}
  
  /* On mouse-over, add a deeper shadow */
.kartya:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  
  /* Add some padding inside the card container */
.container {
    padding: 2px 16px;
}
.nevjegykartya h4{
    padding-top: 2rem;
}
.nevjegykartya p{
    padding-bottom: 2.5rem;
}
.kartyacim{
    font-size: 1rem;
}
.card-text{
    text-align: center;
}

.kartya img {
    border: 0;
    display: inline-block;
    position: relative;
    border-radius: 12px 12px 0 0;
    width: 60px;
    height: 150px;
}
.tanusitvanyok{
    background-color: white;
    height: fit-content;
}
.tanus-logo img{
    width: 40%;
    margin-right: 30%;
    margin-top: 5%;
    margin-bottom: 5%;
}


.videok{
    background-color: rgb(39, 39, 39);
    padding-bottom: 5%;
}
.btnvideok{
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.2rem;
}
.videok video{
    margin: 0;
    padding: 0;
}
.vidframe{
    margin: 0 auto;
    border: 8px inset #93B7BE;
}


#kapcsolat{
    background-color: rgba(0, 0, 0, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
    margin-bottom: auto;
}
.csillag{
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

#kuld{
    padding-top: 20px;
    padding-bottom: 20px;
}
form{
    margin-top: 50px;
    margin-bottom: 30px;
    color: white;
    transition: all 4s ease-in-out;
}
.form-control{
    width: 600px;
    background: rgba(0,0,0,0.65);
    color: black;
    margin-bottom: 16px;

}
.kuldgomb{
    background-color: #141519;
    color: white;
    padding: 2px;
    width: 600px;
    height: auto;
    border-radius: 8px;

}

.lablec{
    background-color:#26272b;
    padding:45px 0 20px;
    font-size:15px;
    line-height:24px;
    color:#737373;
    }

.lablec hr{
    border-top-color:#bbb;
    opacity:0.5;
}

.lablec h6{
    color:#fff;
    font-size:16px;
    text-transform:uppercase;
    margin-top:5px;
    letter-spacing:2px;
}
.lablec a{
    color: white;
}
.footer-links{
  padding-left:0;
  list-style:none;
}
.footer-links li{
  display:block;
}

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

    .inner {
        max-width: 90%;
    }

}
@media only screen and (max-width: 991px) {
    body{
        background-image: url('../img/mobilehatter.jpg');
    }
    .navbar{
        background: -webkit-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
        background: -o-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
        background: -moz-linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #E0CE34 60%, #D1263F 60%);
        background: linear-gradient(70deg, #93B7BE  30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f7c331 60%, #D1263F 60%);
        color: #f6f1ed;
    }
    .navbar-toggler-icon{
        height: 25px;
        width: 25px;
    }
    #logokep{
        width: 50px;
    }
    #markanev{
        font-size: x-small;
    }
    #kezdolap{
        background-color: rgba(0, 0, 0, 0.5);

    }
    .tanus-logo img{
        width: 80%;
        margin-right: 10%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    
    .gomb, .gombinverz{
        background-color: #93B7BE;
        color: white;
    }
    .title{
        display: none;
    }
    h3{
        color: white;
        font-size: 18px;
    }
    #content{
        text-align: center;
    }
    .eszkozok img{
        width: 60%;
        margin-left: 30%;
    }
    .card-deck .card{
        width: 80%;
        left: 10%;
    }
    .nevjegykartya img{
        left: 40%;
        width: 20%;
    }
    .service-item{
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        height: min-content;
        background-color: #f7c331;
        color: white;
    }
    .csillag{
        font-size: small;
    }

    .kuldgomb{
        width: 300px;
    }
    .form-control{
        width: 300px;
    }

    .inner {
        max-width: 85%;
    }
}