body {
    padding: 0px;
    margin: 0px;
    background-color: #c2dfff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #666666;
    overflow: overlay;
}

h1, h2, h3 {
    margin:20px 0px 10px 0px;
}

h3 {font-size: 24px}

img{border-radius: 10px}

/***************************************************
    header 
***************************************************/

header{
    height:50px;
    display: flex;
    justify-content: center;
    background-color: #fff;
}

/* header - menu button */
header [data-btn='menu']{
    all: unset;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 5px 15px;
    opacity: 0;
    pointer-events:none;
    cursor: pointer;  
}

header [data-btn='menu'] span{
    background: #7f7f7f;
    height: 2px;
    width: 30px;
    position: absolute;
    border-radius: 10px;
    left: 5px;
    transform: none;
    transform-origin:center;

    transition:0.3s
}

header [data-btn='menu'] span:nth-child(1){top:25%}
header [data-btn='menu'] span:nth-child(2){top:50%}
header [data-btn='menu'] span:nth-child(3){top:75%}

header [data-btn='menu'][data-state='x'] span{top:50%}

header [data-btn='menu'][data-state='x'] span:nth-child(1),
header [data-btn='menu'][data-state='x'] span:nth-child(2){
    transform:rotate(-45deg)
}
header [data-btn='menu'][data-state='x'] span:nth-child(3){transform:rotate(45deg)}

/* header - logo */
header .logo{
    height: 50px;
    padding: 15px;
    box-sizing: border-box;
    color: #777;
    text-decoration:none;
    font-size: 18px;
    line-height: 20px;
}

/* menu */
header nav{
    display: flex;
    list-style: none;
}

header nav a{text-decoration: none}
header nav li{
    line-height: 50px;
    color: #7f7f7f;
    padding: 0px 20px;
    font-size: 14px;
    transition: 0.3s
}

nav li:hover{font-size: 16px}
nav li.selected{background:#c2dfff}

/* menu (mobile) */
@media only screen and (max-width: 900px) {
    header [data-btn='menu']{
        opacity:1;
        pointer-events: initial;
    }

    header nav{
        display: block;
        position: fixed;
        top: 50px;
        left: 0px;
        width: 100%;
        height:200px;
        overflow: hidden;
        opacity:1;
        background: #fff;
        box-shadow: 0px 15px 15px -10px;
        text-align: center;
        transition:0.3s
    }

    header nav[data-state="hidden"]{
        height:0px;
        opacity:0;
    }
}

/***************************************************
    contact button
***************************************************/

[data-btn="contact"]{
    position: fixed;
    bottom: 15px;
    right: 15px;
    height: 70px;
    min-width: 70px;
    color: #000;
    text-transform: uppercase;
    line-height: 80px;
    text-align:center;
    box-shadow: 0px 10px 15px -5px;
    background: #fff;
    border-radius: 35px;
    cursor: pointer;
    z-index:1;
}

[data-btn="contact"] img{
    height:20px;
    border-radius: 0px;
}

/***************************************************
    page 
***************************************************/

/* page content */
.page{
    min-height: Calc(100vh - 180px);
    padding: 10px 70px;
    box-sizing: border-box;
}

.page[data-cols]{display:flex}
.page[data-cols] .col{padding:0px 10px}

@media only screen and (max-width: 800px) {
    .page[data-cols]{
        display:block;
    }
}

/* row (used on homepage */
.page .row{display:flex}
.page .row .col{padding:0px 10px}

@media only screen and (max-width: 800px) {
    .page .row{
        display:block;
    }
}

.index_photo{height:400px}

/***************************************************
    footer 
***************************************************/

footer{
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    background: #fff;
}

footer .sx-verified-seal{
    display:inline-block !important;
}

footer .footnote {
    font-size: 12px;
    color: #888888;
    margin: 0px;
}

footer .footnote a {
    font-weight:bold;
    color: #888888
}