/*

Theme Name: sara and miel
Theme URI: www.sara-and-miel.com
Author: Miel Wellens
Author URI: www.mielwellens.com
Description: theme for sara and miel by mielwellens


as the shared URL: public_html -> http://mielwell.wwwsg1-ss19.a2hosted.com/domain.com


*/

:root {
    /* Font Family */
    --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-secondary: "Helvetice Neue", Helvetica, Arial, sans-serif;

    --color-darkgrey: #474544;
    --color-lightgreywarm: #e4e4e4;
    --color-lightgreycold: #f6f9fb;
    --color-lightgreycold-transparent: #eef3f7;
    --color-darkgreycold: #4a4d53;
    --color-red: #bd504e;
    --color-niceblue: #4a93e8;

    --box-shadow-short:
        0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.028),
        0px 1px 2.5px rgba(0, 0, 0, 0.035),
        0px 1.8px 4.5px rgba(0, 0, 0, 0.042),
        0px 3.3px 8.4px rgba(0, 0, 0, 0.05),
        0px 8px 20px rgba(0, 0, 0, 0.07)
        ;

    --box-shadow-long:
        0px 0.6px 1.1px rgba(0, 0, 0, 0.02),
        0px 1.3px 2.7px rgba(0, 0, 0, 0.028),
        0px 2.5px 5px rgba(0, 0, 0, 0.035),
        0px 4.5px 8.9px rgba(0, 0, 0, 0.042),
        0px 8.4px 16.7px rgba(0, 0, 0, 0.05),
        0px 20px 40px rgba(0, 0, 0, 0.07)
        ;

}

*{
    box-sizing: border-box;
}

a{
    color: inherit;
}

h1, h2, h3, h4, h5, h6,
b, strong{
    font-weight: 600;
}

h2{
    font-size: 22px;
    font-weight:200;
    margin:0;
    padding:0;

    position: relative;

    letter-spacing:1px;
}

h3{
    font-size: 24px;
    margin:0;
    padding:0;

    text-transform: uppercase;

    line-height:120%;
}

/*fontsizes golden ratio:
https://grtcalculator.com

42, 33, 26, 20, 16
44, 33, 25, xx, 16

lineheight for titillium: 1.875 @ 16px font
*/


*{
    transition: all .14s ease-in-out;
}

html {
    background-color: var(--color-lightgreycold);

    font-family: var(--font-primary);
    font-weight: 200;

    color: var(--color-darkgrey);
    font-size: 16px;
    line-height: 1.875;
}

.wrapper{

    position: relative;
    max-width: 1004px;
    width: auto;
    margin: 0px auto;

}



/* HEADER */
header {
    position: relative;
    padding-top: 23px;


}

header a{
    font-size: 26px;
    color: var(--color-darkgrey);
    text-decoration: none;
    padding: 0;
    margin:0;

}


header ul{
    list-style: none;

    margin:0;
    padding:0;

    text-align:center;

}

header li{
    display: inline-block;
    padding: 0px 0px ;
    margin: 0px 16px;
}

header li:first-of-type{
    margin-left:0;
    border-bottom: 1px solid var(--color-lightgreycold);
}

header li:last-of-type{
    margin-right:0;
    display:none;
}

header ul li.ornavigation,
header ul li:nth-of-type(2),
header ul li:nth-of-type(4){
    font-size: 26px;
    margin: 0px 6px;
}

header ul li.ornavigation:hover{
    border-bottom: 0px solid var(--color-darkgrey);
}

header li.active{
    font-weight: 600;
    border-bottom: 1px solid var(--color-darkgrey);
}

header li:hover{
    border-bottom: 1px solid var(--color-darkgrey);
}



/* content */

.section{
    padding: 34px;
}

.section-services ul{
    list-style:none;
}

.section-services li{
    font-weight: 600;
    font-size:18px;
    margin:0;
    padding:0;

    line-height: 130%;
}

.column-2{
    position: relative;

    width: 50%;
    display:block;
    float:left;
}

.column-2:nth-of-type(even){
    float:right;
}

.section-content .column-2,
.section-portfolio .column-2,
footer .column-2{
    position: relative;
    padding: 0px calc(50%/6);
}




.image-contain{
    object-fit: contain;
    width:100%;
    height: 100%;
}



.portfolio-item{
    position: relative;
    margin: 40px 0px;
    background: white;
}

.portfolio-item:first-of-type{
    margin: 10px 0px;
    background: white;
}

.section-portfolio a{
    font-size:28px;
    color: var(--color-niceblue) !important;
    
    line-height:100%;

}

.portfolio-item-special{
    position: relative;
    background:none;
}

.portfolio-item-special img:nth-of-type(1){
    visibility:hidden;
}

.portfolio-item-special img:nth-of-type(2){
    position:absolute;
    top:0px;
    left:-20%;

    transform: rotate(-3deg);

    max-height: 100%;
    max-width: 140%;

    width: auto;
    height: auto;

    z-index:5;
}

.column-2:nth-of-type(even) .portfolio-item-special img:nth-of-type(2){
    position: absolute;
    left:auto;
    right: -20%;

    transform: rotate(5deg);
}






.darker{
    background-color: var(--color-lightgreycold-transparent);
}


.buttons{
    text-align: center;
}

.button{
    position: relative;
    display: inline-block;
    margin:40px 10px;

    padding: 20px 40px;

    background:white;
    min-width: 240px;

    text-align: center;
    border-radius: 100px;

    text-decoration: none;
    color:inherit;
}

.button:hover{
    transform: scale(0.9);
}

.button-textonly{
    position: relative;
    display: inline-block;
    margin:40px 10px;

    padding: 20px 40px;

    background:none;
    width: auto;

    text-align: center;
    border-radius: 0px;

    text-decoration: underline;
    color:inherit;
}



ul{
    margin:0;
    padding:0;
}

ul + ul{
    margin-top: 2em;
}

footer ul + ul{
    margin-top: 1em;
}

img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;

    object-fit: cover;
}

img.picture {
    margin: 0px auto;
}

.label{
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}



/* FOOTER */
footer {
    position: relative;
    padding:100px 0px;

    background-color: var(--color-darkgreycold);
    color: var(--color-lightgreycold);

    line-height:130%;
    font-size:22px;
}

footer a{
    text-decoration: none;
}


footer *{
    margin:0;
    padding:0;
}


footer ul {
    list-style-type: none;
}

footer ul li{
    margin: 10px 0px;
}



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

footer ul a:hover{
    color:inherit;
    text-decoration: underline;
}








/* MOBILE RESPONSIVENESS */

.mobileordesktop-desktop{
    display:unset;
}

.mobileordesktop-mobile{
    display:none;
}

@media (max-width: 1024px) {
    .wrapper{
        width: 100%;
        padding: 0px 10px;
    }

    .section-services li{
        font-size: 12px;
    }

}

@media (max-width: 669px) {

    /* show two people one person */
    body{
        padding-top: 0px;
    }
    .section{
        margin:20px 0px;
        padding:0;
    }

    img.picture {
        width: 100%;
        margin: 0px auto;
    }

    .mobileordesktop-desktop{
        display:none;
    }
    .mobileordesktop-mobile{
        display:inherit;
    }

    .label{
        font-size:10px;
    }

    header{
        display:block;
    }
    header li:last-of-type{
        display:unset;
    }

    .section-services li {
        font-weight: 300;
        font-size: 14px;
        line-height: 130%;
    }

    .section-portfolio a{
        font-size:14px;
    }

    .portfolio-item-special{
        transform: scale(0.7);
    }

    .section-content .column-2,
    .section-portfolio .column-2,
    footer .column-2{
        padding: 0px 10px;
    }
    h2{
        font-size: 18px;
        font-weight:200;
        letter-spacing:1px;
    }

    h3{
        font-size: 16px;
        line-height:120%;
    }

    footer{
        padding: 20px 0px;
    }

    footer ul li{
        margin: 4px 0px;
        font-size: 13px;
    }

    .portfolio-item {
        margin: 20px 0px;
    }

    header{
        padding-top:0;
    }

    /* mobile menu updates */
    header ul{
        list-style: none;
        position: relative;
        left:0px;
        top:0px;
        width:100%;

        margin:0;
        padding:0;


        display: block;

        height:60px;
        overflow:hidden;
    }

    header ul.menu-opened{
        height:auto;
        overflow:visible;
    }

    header ul li{
        margin: 10px;
        margin-left: 10px;
        display: block;
        width:auto;

        text-align: center;
    }

    header ul li.ornavigation,
    header ul li:nth-of-type(2),
    header ul li:nth-of-type(4){
        display:inline-block;
        line-height: 130%;
        font-size: 26px;
        margin: 0px 6px;
    }



    header li:hover, header li.active{
        border-bottom:0;
    }

    header li:first-of-type {
        float: none;
        margin: 10px 10px 30px 10px;
    }

    header li:first-of-type a {
        width:100%;
        display:block;
        text-align:left;

        background: url('/img/mobilemenu_hamburger.png') right center no-repeat;
        background-size: contain;
    }

    header ul.menu-opened li:first-of-type a {
        background: url('/img/mobilemenu_close.png') right center no-repeat;
        background-size: contain;
    }

    header li:last-of-type {
        margin-right: 10px;
    }

}