/*Taustan väri */
body {
    background-color: #f4eee7;}

/*Etusivu: Pääotsikko*/
header {
    background-image:url("kansikuva.jpg");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    margin: auto;
    filter: opacity(70%)}

header h1{
    text-align: center;
    color: #f4eee7;
    text-align: center;
    margin: auto;
    text-shadow: 2px 2px 4px #000000;}

/*Navigaatiopalkki */
ul {
    list-style-type: none;
    width: 50%;
    margin: auto;
    overflow: hidden;
    background-color:#ad947e;}

li a {
    display: block;
    color: #f4eee7;
    font: 18px "Playfair Display";
    padding: 14px 16px;
    text-decoration: none;}

li a:hover:not(.active) {
    background-color: #412f26;}

li a.active {
    background-color: #412f26;}

/*Etusivu: Väliotsikot*/
.etusivu h2 {
    color:#412f26;
    font: 28px "Playfair Display";
    margin: auto;}

/*Alkuteksti pääotsikon jälkeen*/
.lead {
    margin: auto;
    color:#8F6F55;
    font: 20px "Playfair Display";
    padding: 30px;
    text-align: justify;
    font-style: italic;}

#huom {
    font: 15px "Playfair Display";
    font-variant: small-caps;
    font-weight: bold;
    color:#412f26}

/*Leipäteksti*/
.content {
    margin: auto;
    padding: 20px;
    color:#8F6F55;
    font: 17px "Playfair Display";
    text-align: justify;}

.column img {
    clip-path: circle();}

/*Palvelut-sivun pääotsikko */
.palvelut {
    background-image:url("lehdet.jpg");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    margin: auto;
    filter: opacity(70%)}

.palvelut h1{
    text-align: center;
    color: #f4eee7;
    text-align: center;
    margin: auto;
    text-shadow: 2px 2px 4px #000000;}

.palvelut2 h2{
    color:#412f26;
    font: 28px "Playfair Display";
    margin: auto;}


/*Palvelut-sivun taulukko */
#taulukko, td, th {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 8px;
    height: 40px;}

#taulukko tr:nth-child(even) {   /*Muotoillaan taulukon joka toinen rivi tummemmaksi*/
  background-color: #8F6F55;
  color: #f4eee7;}


/*Yhteystieto -sivun pääotsikko*/
.yhteystiedot {
    background-image:url("lehdet.jpg");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    margin: auto;
    filter: opacity(70%)}

.yhteystiedot h1{
    text-align: center;
    color: #f4eee7;
    text-align: center;
    margin: auto;
    text-shadow: 2px 2px 4px #000000;}

#yhteystiedot h2{
    color:#412f26;
    font: 28px "Playfair Display";
    margin: auto;}

#kartta {
    width: 300px;
    height:200px;
    }

/*Kännykkä*/
@media only screen and (max-width: 767px) {
    nav{ 
        margin: auto;}
    .column img {
        width: 300px;
        height: 200px;}
    header {
        padding: 60px 30px 60px 30px;
        width: 80%;}
    header h1{
        font: 40px "Playfair Display";}
    .etusivu h2 {
        width: 80%;
        text-align: center;}  
    .lead {
        width: 80%;
        text-align: center;}
    ul {
        width: 60%;}
    .content {
        width: 80%;
        text-align: center;}
    #kipukuva {
        width: 80%;
        position: absolute;}

    .palvelut {
        padding: 60px 30px 60px 30px;
        width: 80%;}
    .palvelut h1{
        font: 40px "Playfair Display";}
    .palvelut2 h2{
        width: 80%;
        text-align: center;}
    
    .yhteystiedot {
        padding: 60px 30px 60px 30px;
        width: 80%;}
    .yhteystiedot h1{
        font: 40px "Playfair Display";}
    #yhteystiedot h2{
        width: 80%;
        text-align: center;}
    #kartta {
        width: 200px;
        height:100px;}   
    }

/*Tabletti*/
@media only screen and (min-width: 768px) {
    li {
        float: left;}
    .column {
        float: left; }
    .row:after {
        content: "";
        display: table;
        clear: both;}
    .column img {
        width: 350px;
        height:200px;}
    header {
        padding: 130px 80px 130px 80px;
        width: 70%;}
    header h1{
        font: 55px "Playfair Display";}
    .etusivu h2 {
        width: 60%;}  
    .lead {
        width: 60%;}
    ul {
        width: 60%;}
    .content {
        width: 60%;}
    .column {
        width: 50%;}
    #esittely {
        width: 50%;}
    #kipukuva {
        width:10%;}

    .palvelut {
        padding: 130px 80px 130px 80px;
        width: 70%;}
    .palvelut h1{
        font: 55px "Playfair Display";}
    .palvelut2 h2{
        width: 60%;}
    #taulukko{
        width: 100%;} 
    #jalat{
        width: 10%;}
    
    .yhteystiedot {
        padding: 130px 80px 130px 80px;
        width: 70%;}
    .yhteystiedot h1{
        font: 55px "Playfair Display";}
    #yhteystiedot h2{
        width: 60%;}
    }

/*Tietokoneen näyttö*/
@media only screen and (min-width: 1025px) {
    .column img {
        width: 450px;
        height:300px;}
    header {
        padding: 200px 80px 200px 80px;
        width: 90%;}
    header h1{
        font: 60px "Playfair Display";}
    .etusivu h2 {
        width: 70%;}  
    .lead {
        width: 70%;}
    ul {
        width: 70%;}
    .content {
        width: 70%;}
    .column {
        width: 50%;}
    #esittely {
        width: 50%;}
    #kipukuva {
        width: 40%;}

    .palvelut {
        padding: 200px 80px 200px 80px;
        width: 90%;}
    .palvelut h1{
        font: 60px "Playfair Display";}
    .palvelut2 h2{
        width: 70%;}
    #taulukko{
        width: 90%;} 
    #jalat{
        width: 10%;}
    
    .yhteystiedot {
        padding: 200px 80px 200px 80px;
        width: 90%;}
    .yhteystiedot h1{
        font: 60px "Playfair Display";}
    #yhteystiedot h2{
        width: 70%;}    
    }