/*-----FONTS----------------------------------------------------*/
/*############################################################*/

@font-face {
    font-family:"centuryRegular";
    src: url("../assets/fonts/century751-no2-bt/tt1180m_.ttf")
}

@font-face {
    font-family:"centuryItalic";
    src: url("../assets/fonts/century751-no2-bt/tt1181m_.ttf")
}

@font-face {
    font-family:"centuryBold";
    src: url("../assets/fonts/century751-no2-bt/tt1184m_.ttf")
}

/*
.IowanOldStyleBTPro-Italic { 
    font-family: IowanOldStyleBTPro-Italic;
    font-weight: normal;
    font-style: normal;
}
.IowanOldStyleBTPro-Roman { 
    font-family: IowanOldStyleBTPro-Roman;
    font-weight: normal;
    font-style: normal;
}
.IowanOldStyleBTPro-Bold { 
    font-family: IowanOldStyleBTPro-Bold;
    font-weight: normal;
    font-style: normal;
}
*/

/*-----BASICS--------------------------------------------------*/
/*############################################################*/


html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

h4, h5{
    font-family: centuryRegular; 
    font-weight: normal; 
    font-style: normal;
    letter-spacing: 5px;
    font-size: 30px;
    color: #262626;
    margin-top: 30px;
    margin-bottom: 0;
}

h4 {
    margin-top: 30px;
}

h5 {
    font-family: centuryItalic;
}

p {
    font-family: 'centuryRegular'; 
    font-weight: normal; 
    font-style: normal;
    color: #262626;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: -5px;
}

ul {
    font-family: centuryRegular; 
    font-weight: normal; 
    font-style: normal;
    color: #262626;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 0;
    text-align: left;
}

ol {
    font-family: centuryRegular; 
    font-weight: normal; 
    font-style: normal;
    color: #262626;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 0;
    text-align: left;
}

.nuttg {
    border-width:1px;
    border-color: #262626;
    width: 90%;
    max-width: 240px;
    border-collapse:collapse;
    margin: 0 auto;
}

.tg-0lax {
    padding-left: 5px;
    padding-right: 5px;
    font-family: centuryRegular; 
    font-weight: normal; 
    font-style: normal;
    color: #262626;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 0;
    text-align: left;
    border-style:solid;
    border-width:1px;
    border-color: #262626;
}

/*-----NAV-----------------------------------------------------*/
/*############################################################*/


.ARnavwrapout {
    opacity: 1;
    z-index: 5;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    -webkit-box-shadow: 0px -5px 10px 8px rgba(0,0,0,0.28);
    -moz-box-shadow: 0px -5px 10px 8px rgba(0,0,0,0.28);
    box-shadow: 0px -5px 10px 8px rgba(0,0,0,0.28);

}

.ARnavwrapin {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    height: 90px;
}

.ARlogo {
    position:fixed;
    top: 0;
    background-image:url(../assets/logo.svg);
    height:74px;
    margin-top: 8px;
    margin-left: 20px;
    width:150px;
    background-size: contain;
    background-repeat: no-repeat;
}

.ARnav {
    width: 100%;
    background-color: #ffffff;
    text-align: right;
    padding-top: 60px;
}
.menu {
    background-color: #ffffff;
    margin: 0;
    margin-right: 20px;
}
.menu a {
    font-family: centuryBold;
    font-weight: normal; 
    font-style: normal;
    font-size: 12px;
    color: #262626;
    clear: right;
    text-decoration: none;
    margin-left: 20px;
    line-height: 12px;
    letter-spacing: 3px;
}

label {
    margin: 0 40px 0 0;
    font-size: 42px;
    color: #262626;
    line-height: 90px;
    display: none;
    width: 26px;
    float: right;
}
#toggle {
    display: none;
}


/*-----COVER_IMAGE---------------------------------------------*/
/*############################################################*/

.ARbg {
    /* Height */
    height: 90%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mainbg {
    background-image: url("../assets/images/cover_main.jpg");
}
.mezeinkbg {
    background-image: url("../assets/images/cover_mezeink_3.jpg");
    background-position: bottom;
}
.aboutbg {
    background-image: url("../assets/images/cover_about_3.jpg");
}
.recipesbg {
    background-image: url("../assets/images/cover_recipes.jpg");
    background-position: center bottom;
}
.mezrolbg {
    background-image: url("../assets/images/cover_mezrol_3.jpg");
}

.qcbg {
    background-image: url("../assets/images/cover_qc.jpg");
}

.mediabg {
    background-image: url("../assets/images/cover_media_2.jpg");
    height:40%;
}

.contactbg {
    background-image: url("../assets/images/cover_contact.jpg");
    height:40%;
}

.granolabg {
    background-image: url("../assets/images/cover_recipes_granola.jpg");
}

.bananbg {
    background-image: url("../assets/images/cover_recipes_banan.jpg");
}

.mcsirkebg {
    background-image: url("../assets/images/cover_recipes_mcsirke.jpg");
}

.sajttortabg {
    background-image: url("../assets/images/cover_recipes_sajttorta.jpg");
}

.shakebg {
    background-image: url("../assets/images/cover_recipes_shake.jpg");
}

.szoszbg {
    background-image: url("../assets/images/cover_recipes_szosz.jpg");
}

.teabg {
    background-image: url("../assets/images/cover_recipes_tea.jpg");
}

.couscousbg {
    background-image: url("../assets/images/cover_recipes_couscous.jpg");
}

.sutibg {
    background-image: url("../assets/images/cover_recipes_suti.jpg");
}

.gingerbreadbg {
    background-image: url("../assets/images/cover_recipes_gingerbread.jpg");
}



.ARblob {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20%;
    width: 80%;
    max-width:1200px;
    min-width: 690px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mainblob {
    background-image: url(../assets/images/blob_main.svg);
}

.aboutblob {
    background-image: url(../assets/images/blob_about.svg);
}

.recipesblob {
    background-image: url(../assets/images/blob_recipes.svg);
}

.mezrolblob {
    background-image: url(../assets/images/blob_mezrol.svg);
}

.mezeinkblob {
    background-image: url(../assets/images/blob_mezeink.svg);
}

.qcblob {
    background-image: url(../assets/images/blob_qc.svg);
}


/*-----CONTENT-------------------------------------------------*/
/*############################################################*/


.ARcontwrap {
    margin:30px auto;
    padding: 0 20px;
    max-width:800px;
    font-size:20pt;

}

.ARcontrow {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
}

.ARcontbox {
    float:left;
    padding: 0;
    text-align: center;
    margin: 0 1%;
}

.ARone {
    width:8%;
}

.ARtwo {
    width:18%;
}

.ARthree {
    width:28%;
}

.ARfour {
    width:38%;
}

.ARfive {
    width:48%;
}

.ARsix {
    width:58%;
}

.ARseven {
    width:68%;
}

.AReight {
    width:78%;
}

.ARnine {
    width:88%;
}

.ARten {
    width:98%;
}

.ARbreakline {
    height: 5px;
    width: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
}

.BLyellow {
    background-image: url(../assets/images/breakline_yellow.svg);
}

.BLbrown {
    background-image: url(../assets/images/breakline_brown.svg);
}

.BLorange {
    background-image: url(../assets/images/breakline_orange.svg);
}

.ARmainbreak {
    height: 8px;
    width: 78%;
    float: left;
    margin: 50px 11%;
    background-image: url(../assets/images/breakline_main_red.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

    .BMbrightgreen{
        background-image: url(../assets/images/breakline_main_brightgreen.svg);
    }

    .BMdarkgreen{
        background-image: url(../assets/images/breakline_main_darkgreen.svg);
    }

    .BMdullgreen{
        background-image: url(../assets/images/breakline_main_dullgreen.svg);
    }

    .BMorange{
        background-image: url(../assets/images/breakline_main_orange.svg);
    }

    .BMred{
        background-image: url(../assets/images/breakline_main_red.svg);
    }

.ARcontbox a {
    font-family: centuryBold; 
    font-weight: normal; 
    font-style: normal;
    color: #262626;
    font-size: 12px;
    letter-spacing: 3px;
    text-decoration: none;
    line-height:10px;
    margin-right: 0;
    margin-top: 0px;
}

.ARtextcenter {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;

}

.ARtextcenter p {
    text-align: justify;
}

.ARfooter {
    width: 100%;
    margin: 0 auto;
    float: left;
    text-align: center;
}

.ARfooter p {

    font-size: 12px;
    line-height: 16px;
    margin-bottom: 60px;
}

.ARdecorbeeline {
    max-width: 600px;
    margin: 0 auto;
    margin-top: -20px;
}


/*-----PRODUCTS_SPEC-------------------------------------------*/
/*############################################################*/

.mezkiemel {
    font-size: 26px;
}

    .mkakac {
        color:#73c3ed;
    }

    .mkfenyo {
        color:#006765;
    }

    .mkhars {
        color:#00ac90;
    }

    .mklepes {
        color:#f79431;
    }

    .mkvirag {
        color:#f15f3a;
    }



/*-----ABOUT_SPEC----------------------------------------------*/
/*############################################################*/

.timelinedate {
    background-image: url(../assets/images/decor_datecircle_about.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 65px;
    margin-left:-15px;
    margin-bottom: 30px;
}

.timelinedate p{
    color: #ffffff;
    line-height: 70px;
    margin: 0;
}

.timelinetext {
    margin-left: -15px;
    margin-bottom: 30px;
}

.timelinetext p {
    font-family: centuryItalic;

    margin: 0;
    margin-top: 4px;
    text-align: left;
}


/*-----RECIPES-------------------------------------------------*/
/*############################################################*/

.recipetitle {
    width: 100%;
    
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.recipetitle h4{
    margin: 0px;
}

.recipeunderline {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
}

.recipeacacia {
    background-image: url(../assets/images/recipeunderline_acacia.svg);
}

.ingredientsbox {
    background-color: #cc99cc;
    padding: 0px;
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
    margin-top: 26px;
}

.ingredientsbox p {
    text-align: center;
    font-family: centuryItalic;
    margin-top: 10px;
    margin-bottom: -8px;
    color: white;
}

.ingredientsbox ul {
    color: white;
    text-align: center;
    list-style-type: none;
    margin-right: 40px;
    margin-bottom: 15px;
}

.ingredientsheader {
    background-image: url(../assets/images/recipes_ingredients_header.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #cc99cc;
    padding: 7px;
    padding-bottom: 12px;
}

.ingredientsheader h4 {
    color: white;
    font-size: 20px;
    margin: 0px;
    text-align: center;
}

.recipeLEFT {
    text-align: left;
    background-position: left;
}

.recipeRIGHT {
    text-align: right;
    background-position: right;
}

.recipebreakline {
    height: 7px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    margin: auto;
    margin-top: 5px;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*-----MID-SIZE------------------------------------------------*/
/*############################################################*/

@media only screen and (max-width: 900px) {
    .menu a {
        margin-left: 7px;
        font-size: 9px;
    }

}



/*-----MOBILE--------------------------------------------------*/
/*############################################################*/


@media only screen and (max-width: 700px) {
    label {
        display: block;
        cursor: pointer;
        line-height: 60px;
        font-size: 35px;
    }

    .recipeLEFT {
        text-align: center;
        background-position: center;
    }

    .recipeRIGHT {
        text-align: justify;
        background-position: center;
    }

    h5 {
        font-size: 24px;
    }

    h4 {
        font-size: 24px;
    }

    p {
        margin-bottom: 6px;
    }

    .ARcontbox a {
        line-height: 45px;
    }












    .ARnavwrapin {
        height: 60px;
    }

    .ARlogo {
        height: 45px;
    }

    .ARblob {
       width: 100%;
       min-width: 100px;
    }

    .mainblob {
        background-image: url(../assets/images/blob_main_mobile.svg);
    }

    .aboutblob {
        background-image: url(../assets/images/blob_about_mobile.svg);
    }

    .recipesblob {
        background-image: url(../assets/images/blob_recipes_mobile.svg);
    }

    .mezrolblob {
        background-image: url(../assets/images/blob_mezrol_mobile.svg);
    }

    .mezeinkblob {
        background-image: url(../assets/images/blob_mezeink_mobile.svg);
    }

    .qcblob {
        background-image: url(../assets/images/blob_qc_mobile.svg);
    }

    .aboutbg {
        margin-left: -40%;
    }

    .ARnav {
        padding-top: 0px;
        height: 60px;
    }
    .menu {
        text-align: center;
        width: 100%;
        height: 100000px;
        display: none;
    }
    .menu a {
        display: block;
        font-size: 24px;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
        line-height: 70px;
    }
     
    #toggle:checked + .menu {
        display: block;
    }

    .ARcontrow {
        display: block;
    }

    .ARnobreak {
        display: flex;
    }

    .ARcontbox, .ARfive, .ARten {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .timelinedate {
        max-width: 18%;
        margin-bottom: 20px;
    }

    .timelinetext {
        max-width: 78%;
        margin-bottom: 20px;
    }
    
    
}