/*
Theme Name: Dev-2021
Theme URI: https://frontendtanfolyam.hu/
Author: the WordPress team
Author URI: https://designstreet.hu/
Description: Basic Theme by Emese Pocsik
Tags: one-column, custom-colors, custom-menu
Version: 1.1
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dev-2021

*/


.wp-caption {}

.wp-caption-text {}

.sticky {}

.screen-reader-text {}

.gallery-caption {}

.bypostauthor {}

.alignright {
    text-align: right;
}

.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

/* ================================== */

.ease {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}


html {
    font-size: 1.15vw;
}

@media screen and (min-width: 768px) and (max-width: 1360px) {
    html {
        font-size: 18px;
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 18px;
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    color: #333333;
}

a {
    color: #e2ce61;
}

p   {
    line-height: 1.5;
}

p a {
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
}

.align-center {
    text-align: center;
}

.button {

    background-color: #e2ce61;
    background-image: url(img/btn.png);
    background-image: url(img/btn.png), linear-gradient(to bottom, #f7ea53 0%, #edd048 100%);

    display: inline-block;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    padding: 0.75rem 1.5rem;
    line-height: 1;
    font-family: 'Fraunces', serif;
    border: solid 2px #cbb126;
    border-radius: 5px;
    text-transform: uppercase;

    box-shadow: inset 0px 1px 6px rgba(255, 255, 255, 0.8), 0px 1px 3px rgba(0, 0, 0, 0.2);
    text-shadow: 0px 1px 3px rgba(255, 255, 255, 0.8);
}

.read-more {
    text-transform: uppercase;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    font-family: 'Fraunces', serif;
}

h1,
h2,
h3,
h4 {
    font-family: 'Fraunces', serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.1;
    margin-top: 0;
}

h1,
h2 {
    font-size: 3rem;
    font-style: italic;
    color: #2e4165;
    position: relative;
    text-align: center;
    z-index: 1;
}

h1:before,
h2:before {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    top: -2rem;
    bottom: -1rem;
    left: 0;
    right: 0;
    background: url(img/floral.svg) bottom center no-repeat;
    background-size: auto 100%;
    opacity: 0.6;
}

h3 {
    font-size: 1.5rem;
    color: #2e4165;
}


ul li::marker,
ol li::marker {
    color: #e2ce61;
}

ol li::marker {
    font-weight: bold;
}


.content-box {
    max-width: 1440px;
    padding: 0 15px;
    margin: 0 auto;
}

#logo a svg {
    width: 12rem;
}

#logo a svg path {
    fill: #333333;
}

#logo a:hover svg path {
    fill: #2e4165;
}

#social svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5;
}

#social svg path {
    fill: #333333;
}

#top,
#copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



#menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#menu ul,
#top ul,
#copyright ul {
    margin: 0;
    padding: 0;
    display: flex;
}

#menu ul li,
#top ul li,
#copyright ul li {
    list-style-type: none;
}

#menu ul li a,
#top ul li a,
#copyright ul li a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
}


#top {
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
}

#top ul li {
    font-size: smaller;
    padding: 0.75rem 0;
}

#copyright li {

    padding: 0.75rem 0;
}

#contact li,
#copyright li {
    margin-right: 2rem;
}

#social li {
    margin-left: 2rem;
}

header,
footer {
    background: #d0e0f6;
}

#menu ul li {
    margin-left: 3vw;
    padding: 1.5rem 0;
}

#menu ul li a {
    font-weight: bold;
}

#menu ul li a:hover {
    color: #2e4165;
}


#menu ul li span {
    font-size: smaller;
    display: block;
    font-weight: normal;
    text-transform: none;
}

@media screen and (max-width: 1120px) {
    #menu {
        display: block;
    }

    #menu ul {
        justify-content: space-between;
    }

    #logo {
        text-align: center;
        di
    }

    #logo a {
        display: inline-block;
    }

    #top {
        margin-bottom: 1.5rem;
    }
}

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

    #spa img {
        max-width: 260px;
    }
    
    #logo {
        margin-bottom: 1.5rem;
    }

    #top {
        display: block;
        text-align: center;
    }

    #social,
    #contact {
        display: inline-block;
    }

    #contact li,
    #social li {
        margin: 0 1rem;
    }

    #menu ul {
        display: block;
    }

    #menu ul li {
        margin-left: 0;
        padding: 0.75rem 0;
        border-top: solid 1px rgba(0, 0, 0, 0.2);
    }

}

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

    #top ul li {

        padding: 0.3rem 0;
    }

    #contact ul {
        display: block;
    }

    #social {
        clear: both;
        display: block;
        max-width: 10rem;
        margin: 0 auto;
    }

    h1,
    h2 {
        font-size: 2rem;
    }


}

main {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d0e0f6+0,ffffff+7 */
    background: #d0e0f6;
    /* Old browsers */
    background: -moz-linear-gradient(top, #d0e0f6 0%, #ffffff 7%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #d0e0f6 0%, #ffffff 7%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #d0e0f6 0%, #ffffff 7%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e0f6', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */

    padding: 3rem 0;
    overflow: hidden;

}

footer {
    font-size: smaller;
    padding: 3rem 0 0 0;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    color: #2e4165;
    text-decoration: underline;
}

footer ul {
    margin: 0;
    padding: 0 0 0 1rem;
}

footer h3 {
    margin-bottom: 1rem;
}


#copyright {
    margin-top: 3rem;
    border-top: solid 1px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    footer .column-3 > div,
    footer .column-4 > div {
        width: calc(50% - 30px);
    }

}

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


    #copyright ul {
        flex-wrap: wrap;

    }

    #copyright ul li {
        width: 33.3333%;
        margin: 0;
        padding-right: 2rem;

    }

}

main section {
    padding: 3rem 0;
}

.home main {
    padding: 0;

}

#services {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#80a5c8+0,ffffff+80 */
    background: #80a5c8;
    /* Old browsers */
    background: -moz-linear-gradient(top, #80a5c8 0%, #ffffff 80%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #80a5c8 0%, #ffffff 80%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #80a5c8 0%, #ffffff 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80a5c8', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */

}

#services img, .frame img {
    margin-bottom: 1rem;
}

#services a, .frame a {
    text-decoration: none;
}

#services,
#spa, .frame  {

    text-align: center;
}

#slideshow {
    position: relative;
    padding: 0;
    border: solid 0.5rem #fff;
}

#slideshow > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#slideshow > div:first-of-type {
    position: relative;
}


#rooms {
    background: url(img/fal.jpg) bottom center no-repeat;
    background-size: 100% auto;
    padding-bottom: 14rem;
}


#hero {
    padding: 0;
    background: url(img/hero.png) bottom center no-repeat;
    background-size: 100% auto;
    min-height: calc(100vh - 100px);
}

#hero-txt {
    max-width: 30rem;
    padding: 6vw 0;

}

#hero-txt h1 {
    text-align: left;

}

#hero-txt h1:before {
    background-size: auto 6rem;
    background-position: top center;

}

@media screen and (max-width: 1024px) {
    #hero {
        min-height: 0;
    }

    #hero-txt {
        max-width: 30rem;
        padding: 6vw 0 14vw 0;
    }

}

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

    #hero-txt {
        max-width: 30rem;
        padding: 6vw 0 14rem 0;
    }

}


@media screen and (max-width: 850px) {
    #hero {

        background: url(img/hero.png) bottom right no-repeat;
        background-size: 160% auto;
        min-height: 0;
    }

}

#spa {

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e3d8d2+0,ffffff+80 */
    background: #e3d8d2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #e3d8d2 0%, #ffffff 80%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #e3d8d2 0%, #ffffff 80%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #e3d8d2 0%, #ffffff 80%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3d8d2', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */

}


.frame {
    border: 30px solid;
    border-image-width: 30px;
    border-image: url(img/frame.png) 50 round;
    padding: 0.5rem;
    box-shadow: inset 0 0 0 3px #fff;

}

.frame img {
    display: block;

}

.frame {
    padding: 0;
}

.frame > div {
    background: #fff;
    padding: 0.5rem;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.round-img {
    background: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    overflow: hidden;
}

.card img,
.card a {
    display: block;
}

.room-txt {
    padding: 1rem;
}

.room-img {
    overflow: hidden;
}



#events a {
    display: block;
    position: relative;
    height: 100%;
}

#events h3 {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    margin: 0;
    z-index: 2;
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.6);
}

#events img {
    display: block;
    object-fit: cover;
    height: 100%;
}

#events a:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #2e4165;
    opacity: 0.3;
    z-index: 1;

}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
}

.grid-5 > div:nth-of-type(2),
.grid-5 > div:nth-of-type(4) {
    grid-row: span 2 / auto;
}

#extra  {
 
    text-align: center;
}

#extra ul li {
    width: 16.6666%;
    list-style-type: none;
}

#extra   img {
    width: 6rem;
    height: 6rem; margin: 0 auto;
}