/*==================================================
    DE AMARAGUA
    Spaanse Waterhonden
    Ontwerp v2.0
==================================================*/

/*------------------------------------
    Lettertype
------------------------------------*/

@font-face {
    font-family: 'Swiss721Condensed';
    src: url('fonts/Swiss721Condensed.woff2') format('woff2'),
         url('fonts/Swiss721Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*------------------------------------
    Kleuren
------------------------------------*/

:root{

    --achtergrond:#F8F6F0;
    --achtergrond2:#EFE7D6;

    --tekst:#333333;

    --titel:#5A3B24;

    --link:#8B5A2B;
    --hover:#B47B35;

    --knop:#B47B35;
    --knop-hover:#9A6529;

    --rand:#DDD3C2;

}

/*------------------------------------
    Pagina
------------------------------------*/

body{

    margin:0;
    padding:0;

    background:var(--achtergrond);

    color:var(--tekst);

    font-family:Verdana, Arial, sans-serif;

    font-size:22px;

    line-height:1.7;

}

/*------------------------------------
    Koppen
------------------------------------*/

h1{

    font-family:Georgia, serif;

    color:var(--titel);

    font-size:2.3em;

    font-weight:normal;

    margin-top:25px;
    margin-bottom:15px;

}

h2{

    font-family:Georgia, serif;

    color:var(--titel);

    font-size:1.8em;

    font-weight:normal;

    margin-top:20px;
    margin-bottom:12px;

}

h3{

    font-family:Georgia, serif;

    color:var(--titel);

}

/*------------------------------------
    Tekst
------------------------------------*/

p{

    margin-bottom:18px;

}

strong{

    color:var(--titel);

}

/*------------------------------------
    Links
------------------------------------*/

a{

    color:var(--link);

    text-decoration:none;

    transition:all .25s;

}

a:hover{

    color:var(--hover);

    text-decoration:none;

}

/*------------------------------------
    Afbeeldingen
------------------------------------*/

img{

    max-width:100%;
    height:auto;

    border-radius:10px;

    border:5px solid white;

    box-shadow:0 3px 12px rgba(0,0,0,.15);

}

/*------------------------------------
    Tabellen
------------------------------------*/

table{

    border-collapse:collapse;

}

td{

    padding:6px;

}

/*------------------------------------
    Container
------------------------------------*/

.container{

    width:96%;

    max-width:1150px;

    margin:auto;

    padding:20px;

}

/*------------------------------------
    Knoppen
------------------------------------*/

.button{

    display:inline-block;

    background:var(--knop);

    color:white;

    padding:12px 28px;

    border-radius:8px;

    font-weight:bold;

    border:none;

    transition:.25s;

    cursor:pointer;

}

.button:hover{

    background:var(--knop-hover);

    color:white;

}

/*------------------------------------
    Formulieren
------------------------------------*/

input,
textarea,
select{

    border:1px solid var(--rand);

    border-radius:6px;

    padding:8px;

    font-size:18px;

}

/*------------------------------------
    Horizontale lijn
------------------------------------*/

hr{

    border:none;

    border-top:1px solid var(--rand);

    margin:30px 0;

}

/*------------------------------------
    Selectie
------------------------------------*/

::selection{

    background:#DCC7A1;

    color:#333;

}

/*------------------------------------
    Scrollbar (Chrome / Edge)
------------------------------------*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#C7AA7A;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#F8F6F0;

}

.header-table{
    width:100%;
    border-collapse:collapse;
    background:#F8F6F0;
}

/*------------------------------------
    Bovendste frame
------------------------------------*/


.header-table td{
    padding:12px;
    vertical-align:middle;
}

.header-dog{
    height:50%;
    width:auto;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.20);
}

.header-owner h2{
    margin:0;
    color:#5A3B24;
    font-size:2rem;
}

.header-owner p{
    margin-top:8px;
    color:#666;
    line-height:1.5;
}




@media (max-width:900px){

.header-table,
.header-table tr,
.header-table td{

    display:block;

    width:100%;

    text-align:center;

}

.header-dog{

    height:140px;

}

.scroll-photo{

    height:90px;

}

}