/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

:root {
    --primary: #B19499;
    --secondary: #4A4E69;
}

.primary {
    color: var(--primary);
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:var(--primary);
    color:var(--secondary);
    text-decoration:none;
}

/* change colours to suit your needs */
table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
input, select {
    vertical-align:middle;
}

/** end of reset CSS */

/* Body */
body, html {
    margin:0;
    padding:0;
    font-family: 'Poppins', sans-serif;
    font-size:16px;
    background-color:#fff;
    overflow: hidden;
}

/* Header */
header {
    background-color:var(--secondary);
    width:100%;
    height:40vh;
    text-align:center;
    color:#fff;
}
header img.logo {
    margin: 0 auto;
    margin-top:8vh;
    object-fit: contain;
}
header hr {
    width: 80px;
    height: 2px;
    margin: 25px auto;
    border-radius: 2px;
    background-color: var(--primary);
    border: 0;
}
header p{
    max-width:800px;
    margin:0 auto;
    line-height:1.5;
    padding: 0 15px;
}


/* Contents */
section {
    height:35vh;
    width:100%;
}
section #content {
    background-color:#fff;
}
section #content p{
    line-height:25px;
}
.section #content a img{
    margin:0 auto;
}
section #content .primary{
    font-weight:bold;
}
section #content img.google-play,
section #content img.app-store {
    margin: 10px 10px 0 0px;
    object-fit: contain;
}


/* Footer */
footer {
    background-color:var(--secondary);
    height:25vh;
    width:100%;
    position:absolute;
    display:block;
    bottom:0;
}

img.InBellezza {
    position:absolute;
    overflow:visible;
    bottom:0;
    height: auto;
    object-fit: contain;
}




/* RESPONSIVE */

/* smartphones */
@media (max-width:499px) {
    body, html {
        font-size:14px;
    }
    header {
        height: min-content;
        padding-bottom: 2rem;
    }
    header img.logo {
        margin-top: 2vh;
        max-width: 120px;
    }
    header hr {
        margin: 15px auto;
    }
    header p{
        max-width:95vw;
        margin:0 auto;
        line-height: 1.35;
    font-size: 13px;
    }
    section #content{
        text-align:center;
        height:20vh;
    }
    section #content p{
        display:block;
        margin:15px auto;
        width:100%;
    }

    section #content img.google-play,
    section #content img.app-store {
        margin: 8px 10px 0 0px;
        object-fit: contain;
        max-width:38vw;
    }

    footer{
        height:30vh;
    }

    /* phone size and position */
    img.InBellezza {
        width:56vw;
        height:auto;
        left: 22vw;
        bottom:30px;
        max-height: 47vh;
    }

}

@media (max-width: 450px) and (max-height: 650px) {
    img.InBellezza {
        width:54vw;
        left: 50%;
        transform: translateX(-50%);
        max-height: 40vh;
    }
}

/* low res screen */
@media (min-width: 500px) and (max-width: 640px){
    /* phone size and position */
    img.InBellezza {
        left: 4vw;
        width: 46vw;
        max-height: 55vh;
        min-height: 30vh;
        bottom: 10vh;
    }

    /* contents */
    section #content {
        padding-top:5vh;
        padding-left:52%;
        padding-left:52vw;
        font-size:18px;
    }
}

/* tablet */
@media (min-width:641px) and (max-width:1200px){
    /* phone size and position */
    img.InBellezza {
        left: calc(20% - 125px);
        width: 40vw;
        max-height: 60vh;
        min-height: 30vh;
        bottom: 50px;
        overflow: hidden;
    }

    /* contents */
    section #content {
        padding-top:8vh;
        padding-left:43vw;
        padding-right: 3rem;
        font-size:18px;
    }
}

/* desktop */
@media (min-width:1201px){
    /* phone size and position */
    img.InBellezza {
        left: 12%;
        bottom: 8vh;
        width: 47vw;
        max-height: 60vh;
        min-height: 35vh;
    }

    /* contents */
    section #content {
        padding-top:10vh;
        padding-left:47vw;
        font-size:18px;
    }
}

/* fix phone position in widescreens */
@media screen and (min-width:1201px) and (max-height: 740px){
    img.InBellezza {
        margin-bottom:-50px;
        max-height: 72vh;
    }
}


/* hide on mobile portrait */
#rotateMe{
    width:100%;
    height:100%;
    background:black url("../img/rotate.png") no-repeat center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    display:block;
}