/*
Theme Name: lorenzomazzotti
Description: lorenzomazzotti
Theme URI: https://andreamantegazza.it
Author: AM Dev
Version: 1.0
*/

/* 
-------------------------------------------------------------------------------*/

:root {
    --size-body: 1vw;
    --line-body: 1.2em; 
    
    --size-tab: 0.8vw;
    --line-tab: 1.2em; 
    
    --size-subtitle: 1.5vw;
    --line-subtitle: 1em; 
    
    --size-title: 3vw;
    --line-title: 1em;
    
    --color-accent: #AA5EA4;
}

html{
    overflow-y: auto;
}
body {
    font-size: var(--size-body);
    line-height: var(--line-body);
    font-family: arial;
}

/* We like off-black for text. */
body, select, input, textarea {color: #000;}

a {color: #000;}
a:hover {color: #000;}

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

p {
    margin-bottom: 1em;
}
ol {
    margin-left: 1.4em;
}

/* C O D E
-------------------------------------------------------------------------------*/
#header {
    padding: 10px;
}
#header img.main-logo {
    width: 100%;
    display: block;
}

.intro-image {
    width: 100%;
    height: 30vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-style: italic;
    color: var(--color-accent);
    font-size: var(--size-subtitle);
    line-height: var(--line-subtitle);
    background-position: center;
    background-size: cover;
}


.aboutme {
    display: flex;
    flex-direction: row;
    margin-top: 2em;
    padding-left: 20px;
    padding-right: 20px;
}

.aboutme .content{
     padding-right: 20px;
    padding-top: 20px;
    width: 50%;
    border-top: 1px solid var(--color-accent);
}
.aboutme .content .section-title {
    color: var(--color-accent);
    font-weight: bold;
    font-size: var(--size-title);
    line-height: var(--line-title);
    font-family: helvetica;
    text-transform: uppercase;
}
.aboutme .image-wrapper{
    padding-top: 20px;
    width: 50%;
    min-height: 35vw;
    background-position: center;
    background-size: cover;
    border-top: 1px solid var(--color-accent);
}





/**/
.section-services {
    padding: 0 20px;
    margin-top: 5em;
}
.section-services .section-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid var(--color-accent);
    padding: 1em 0;
}
.section-services .section-heading .section-title {
    color: var(--color-accent);
    font-weight: bold;
    font-size: var(--size-title);
    line-height: var(--line-title);
    font-family: helvetica;
    text-transform: uppercase;
}
.section-services .section-heading .section-description {
    width: 50%;
    font-size: var(--size-tab);
    line-height: var(--line-tab);
    text-transform: uppercase;
}
.section-services .section-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
/*    margin-top: 10px;*/
}
.section-services .section-list .single-service {
    border: 1px solid;
    padding: 10px 0;
    width: calc(33.33% - 10px);
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: calc(2.4em + 20px);
    font-size: var(--size-tab);
    line-height: var(--line-tab);
    margin-bottom: 20px;
    background-color: transparent;
    transition: background-color 0.2s;
}
.section-services .section-list .single-service:hover {
    background-color: var(--color-accent);
    color: #fff;
}




@media screen and (max-width: 960px) {
    
    
}