@import "minireset.css";

.gold {
    color: #ad974f;
}

.black {
    color: #000;
}

.white {
    color: #fff;
}

.darkbrown {
    color: #3f382e;
}

section {
    text-align: center;
    padding-top: 50px;
}


.wrapper {
    margin: 0 auto 50px;
    max-width: 550px;
}

.menu-wrapper {
    margin: 0 auto;
    width: 90%;
}

h1 {
    font-family: "Calibri Light", Arial, sans-serif;
    font-size: 48px;
    color: #000;
    padding-bottom: 20px;
    margin-top: 15px;
}


h1 .em {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -1px;

}

h2,
.comments{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    /*padding-bottom: 15px;*/
    color: #000;
}

.blogpost {
    text-align: left;
    margin-bottom: 20px;
}

.blogpost > h1 {
    font-size: 24px;
    padding: 10px 0;
}

.blogpost > h2 > a,
.comments {
    text-decoration: none;
    color: #ad974f;
    letter-spacing: 1px;
}

p {
    font-family: "Calibri Light", sans-serif;
    font-size: 20px;
    font-weight: 100;
    line-height: 1.5em;
}

.line {
    display: inline-block;
    height: 1px;
    min-width: 50px;
   /* margin-bottom: 10px;*/
    background: #ad974f;
}

#break {
    padding: 0;
}
.wide {
    background: #bbb;
    min-width: 550px;
}

/* ----------------------------- GOMBOK --------------------------- */
.btn {
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Trebuchet MS",Arial, sans-serif;
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 1.2px;
    background: rgba(255,255,255,.2);
    color: #fff;
    margin: 40px 0 0;
    display: inline-block;
    padding: 20px;
}

.type-w {
    border-radius: 5px;
    min-width: 200px;
    border: 2px solid #fff;
    transition: all 300ms ease-in-out;
}

.type-w:hover {
    background: #fff;
    color: #ad974f;
    transition: all 300ms ease-in-out;
}

.type-w-f {
    border-radius: 5px;
    min-width: 200px;
    border: 2px solid #fff;
    background: #fff;
    color: #000;
    transition: all 300ms ease-in-out;
}

.type-w-f:hover {
    background: #ccc;
    color: #ad974f;
    border: 2px solid #ccc;
    transition: all 300ms ease-in-out;
}

.type-b {
    color: #000;
    border-radius: 5px;
    min-width: 200px;
    border: 2px solid #000;

}

.type-b:hover {
    background: #000;
    color: #ad974f;
    transition: all 300ms ease-in-out;

}






/* ------------------------- HERO --------------------------------- */

.hero1, .hero2, .hero3 {
    padding-top: 150px;
    min-height: 550px;
    background-size: cover;
}

/* azért van mindnek külön, h más képet adjon a picsum */
.hero1 {    
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://picsum.photos/1920/1080/?m') center top;
}

.hero2 {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://picsum.photos/1920/1080/?o') center top;
}

.hero3 {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://picsum.photos/1920/1080/?p') center top;
}

#agency {
    min-height:450px;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://picsum.photos/1920/1080?q') center top;
    background-size: cover;
}

#newsletter {
    min-height:450px;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://picsum.photos/1920/1080?2') center top;
    background-size: cover;
    margin-bottom: 50px;
    padding-bottom: 50px;
}

#newsletter > .wrapper {
    padding: 50px 20px;
    background: #fff;
}


/* ----------------------------   TESTIMONIALS ---------------------------------- */

#testimonials img {
    border: 1px solid #fff;
    border-radius: 64px;
    width: 128px;
    height: 128px;
    margin: 0 auto;
}

#testimonials h3 {
    margin-top: 30px;
    font-family: "Calibri Light",Arial,sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
}

#testimonials h4 {
    font-family: "Calibri Light",Arial,sans-serif;
    color: #bbbbbb;
}

/* ---------------------------- EMAIL ------------------------------*/
.emailinput {
    margin-top: 30px;
    position: relative;
}

.email-inp {
    padding: 25px;
    border: none;
    /*background: #eee;*/
    background: #eee;
    border-radius: 5px;
    font-family: "Calibri Light", Arial, sans-serif;
    font-size: 18px;
    color: #777;
    width: 100%;
}

#email-btn {
    margin-left: -4px;
    padding: 26px 26px 27px 26px;
    border-radius: 0 5px 5px 0;
    border: none;
    background: #000;
    color: white;
    font-family: "Calibri Light", Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px;
    min-width: 150px;
    transition: background 0.3s ease-out;
    position: absolute;
    right: 0;
}

#email-btn:hover {
    background: #333;
    cursor: pointer;
}

#newsletter form {
    width: 100%;
}



/* --------------------------- FOOTER ------------------------------*/
.links > li {
    text-transform: uppercase;
    font-family: "Calibri Light", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.links a {
    text-decoration: none;
    color: #181818;
    padding: 15px;
}

.links {
    max-width: 500px;
    display: flex;
    justify-content: space-between;
}

footer .wrapper {
    margin-bottom: 20px;
}

.copyright {
    color: #bbbbbb;
    font-size: 12px;
    font-family: "Calibri Light", Arial, sans-serif;
    text-align: center;
    margin: 20px;
}


/* ------------------ MENÜ ------------------------- */
.logo img {
    width: 150px;
}

.mainmenu > li {
    padding-top: 10px;
}

.mainmenu > li > a {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
    font-family: "Calibri Light", Arial, sans-serif;
    letter-spacing: 2px;
    color: #181818;
    transition: color .3s ease-out;
}

.mainmenu > li > a:hover {
    color: #888;
}

#main {
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 9999;
    border-bottom: 1px solid rgb(148, 148, 148);
}

ul.mainmenu li.logo {
    display: flex !important;
}

ul.mainmenu li.logo a {
    flex:1;
}

ul.mainmenu li:not(.logo) {
    display: none;
}
#menuToggle {
    cursor: pointer;
}

.pad-bot-20 {
    padding-bottom: 20px;
}



@media screen and (min-width: 1000px){
    #main {
        /* background: #ffffff; */
       /* transition: background .5 ease-in-out;*/
    }

    ul.mainmenu {
        display: flex;
        align-items: center;

    }
    ul.mainmenu .logo {
        flex: 1;
    }
    ul.mainmenu li.logo {
        padding-top: 10px;
    }
    #menuToggle {
        display: none;
        
    }
    ul.mainmenu li:not(.logo) {
        display: list-item !important;
    }

    .mainmenu > li > a {
        color: #181818;
    }
    .mainmenu > li {
        padding: 20px 15px 0;
    }

    .mainmenu > li > a:hover {
        color: #222;
    }

   /*  .sticky {
    background: rgba(255, 255, 255, .5) !important;
    transition: background 300ms ease-in-out;
    } */

    #blog {
        max-width: 800px;
    }
}