:root{
    --layout-section-max-width: 1200px;
}
/*--------------------------------------------------------------
## Typography and Utils
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: #759256;
    clear: both;
}

h1.page-title{
    text-align: center;
}

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

.aligncenter{
    display: block;
    margin: 0 auto;
}

.gray-bg{
    background-color: #e6e6e6;
}

.box-pad{
    padding: 1em;
}

.box-pad-2{
    padding: 2em;
}

/*--------------------------------------------------------------
## Grid Overrides
--------------------------------------------------------------*/
.pure-g > div{
    box-sizing: border-box;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #759256;
    text-decoration: none;
}

a:visited {
    color: #759256;
}

a:hover, a:focus, a:active {
    color: #759256;
}

a:focus {
    outline: thin dotted;
}

a:hover, a:active {
    outline: 0;
}

/*--------------------------------------------------------------
## Forms
--------------------------------------------------------------*/
.main-section .pure-form-stacked input,
.main-section .pure-form-stacked textarea{
    width: 100%;
    border-radius: 0px;
}

.main-section .pure-form-stacked input:focus,
.main-section .pure-form-stacked textarea:focus{
    border-color: #759256;
}

.btn-green{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    color: #759256;
    background-color: transparent;
    border: 1px solid #759256;
    border-radius: 0px;
    padding: 10px 40px;
    cursor: pointer;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.site-header{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #486039;
    background-position: center center;
}

.home > .site-header{
    background-image: url("../img/vigneto.jpg");
    overflow: auto;
}

.site-branding{
    color: #fff;
    text-align: center;
    font-weight: bold;
    background-color: rgba(0,0,0,0.4);
    max-width: 750px;
    padding: 10px;
    margin: 200px auto;
    display: block;
}

@media screen and (max-width: 48em){
    .site-branding{
        margin: 80px 25px;
    }
}
/*--------------------------------------------------------------
## Top social bar
--------------------------------------------------------------*/

#top-header{
    background-color: rgba(0, 0, 0, 0.3);
    height: 35px;
    line-height: 35px;
    color: #fff;
    text-align: right;
}

#top-header > .pure-menu{
    max-width: var(--layout-section-max-width);
    margin: 0 auto;
}

#top-header .pure-menu-item{
    vertical-align: baseline;
}

#top-header ul{
    padding-right: 10px;
    margin-bottom: 0px;
}

@media screen and (min-width: 800px){
    #top-header ul{
        padding-right: 20px;
    }
}

#top-header a, #top-header a:visited, #top-header a:hover{
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

/*--------------------------------------------------------------
## Main navbar
--------------------------------------------------------------*/
.main-navbar{
    max-width: var(--layout-section-max-width);
    margin: 0 auto;
}

.pure-menu-heading{
    width: 150px;
}

.menu-toggle{
    display: none;
}

.main-navbar .pure-menu-list{
    float: right;
}

.main-navbar .pure-menu-link{
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    padding: 35px 20px;
}

.main-navbar .pure-menu-link:focus,
.main-navbar .pure-menu-link:hover{
    background-color: transparent;
}

/* Small screen */
@media screen and (max-width: 48em){
    /* Toggle button for menu */
    .menu-toggle, .menu-toggle:focus{
        outline: none;
        border: none;
        background-color: transparent;
        position: absolute;
        top: 60px;
        right: 30px;
        display: block;
    }

    .menu-toggle > div{
        width: 35px;
        height: 5px;
        background-color: #fff;
        margin: 6px 0;
        transition: 0.4s;
    }

    .main-navbar.toggled .menu-toggle{
        position: fixed;
        z-index: 10000;
    }

    .main-navbar.toggled .menu-toggle .t-bar-1{
        transform: rotate(45deg) translate(7px, 7px);
    }

    .main-navbar.toggled .menu-toggle .t-bar-2{
        opacity: 0;
    }

    .main-navbar.toggled .menu-toggle .t-bar-3{
        transform: rotate(-45deg) translate(8px, -8px);
    }

    .main-navbar .pure-menu-list{
        display: none;
    }

    .main-navbar.toggled .pure-menu-list{
        float: none;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1040;
        background-color: rgba(0, 0, 0, 0.8);
        padding-top: 120px;
        display: block;
    }

    .main-navbar .pure-menu-item{
        display: block;
        height: auto;
        padding: 20px;
        text-align: center;
    }

    .main-navbar .pure-menu-link{
        padding: 0px;
        display: inline;
    }
}

/*--------------------------------------------------------------
## Main section
--------------------------------------------------------------*/
main h1, main h2, main h3{
    text-transform: uppercase;
    font-weight: 500;
}

.pure-g.main-section{
    max-width: var(--layout-section-max-width);
    margin: 0 auto;
}

.main-section ul li{
    list-style-image: url("../img/list-marker.png");
}

.tight-section h2{
    text-transform: none;
    margin: 0px 0px 8px 0px;
}

.tight-section p{
    margin: 0px 0px 10px 0px;
    text-align: justify;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
.team-member{
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 6.4px 1.6px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 0px 6.4px 1.6px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 6.4px 1.6px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.team-member img{
    width: 100%;
}

.team-member h5{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.team-member p{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 10px;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
footer{
    text-align: center;
    color: #a2a2a2;
    padding: 20px 0px;
    background-color: #272727;
}