@font-face {
  font-family: 'Blacksword';
    src:  url('Blacksword.ttf.woff') format('woff'),
    url('Blacksword.ttf.svg#Blacksword') format('svg'),
    url('Blacksword.ttf.eot'),
    url('Blacksword.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

body {
    background: #bbb url("../img/wood.jpg") repeat;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center
}
body, p {
    font-family: 'Comic Neue', cursive;
    font-size: 16px;
    line-height: 140%;
}
#container {
    width:80%;
    max-width: 1024px; 
    margin: 0 auto;
    padding:32px;
    background-color: rgba(255,250,250,40%);
}

header, #menus {
    text-align: center;
    padding:0 0 24px 0;
}
#contacts {
    text-align: center;
    padding:0;
}
#contacts p {    
    font-size: 130%
}

a:link, a:visited {
    color:#da3832;
    transition:all 0.3s ease
}

h1 {
    font-family:'Blacksword'; 
    font-size:54px; 
    text-align: center; 
    color: #000; 
    padding: 40px 0; 
    margin: 0;
    line-height: 120%;
}
h1 small {
    font-size:32px; 
    color:#da3832
}
h2 {
    font-family:'Blacksword'; 
    font-size:40px; 
    text-align: center; 
    color: #333; 
    padding: 8px 0; 
    margin: 32px 0 16px 0;
    line-height: 120%
}

.button {
    display: block;
    max-width: 280px;
    text-align:center; 
    margin: 0 auto 24px auto; 
    padding: 16px 16px 16px 45px;
    background-position:8px center;
    background-repeat: no-repeat;
    font-size: 22px; 
    text-decoration: none;
}
.button:link, .button:visited {
    background-color: #222; 
    color:#fff; 
    border-radius: 24px;
}
.button:hover, .button:hover {
    background-color: #fff;
    color:#000;
}
#btnes {
    background-image: url("../img/icon-es.png");
}
#btnfr {
    background-image: url("../img/icon-fr.png");
}
#btnde {
    background-image: url("../img/icon-de.png");
}
#btnen {
    background-image: url("../img/icon-en.png");
}

section#contacts .fas {display:inline-block; padding:16px; font-size: 30px}
section#contacts .fas:link {color:#da3832}
section#contacts .fas:hover, .fas:focus {color:#000; transition:all 1s ease}

a.btn {padding: 12px 24px; border-radius: 24px; margin: 0 8px 32px; text-decoration: none; font-weight: 700}
a.btn, a.btn:link, a.btn:active, a.btn:visited {background-color:#da3832; color:#ffffff;}
a.btn:hover, a.btn:focus {background-color:#ffffff; color:#da3832;}

section#googlelinks p {font-size: 120%; line-height: 2em}

@media screen and (max-width: 680px) {
  #container {padding:16px}
  h1 {font-size:48px}
  h1 small {font-size:28px}
  h2 {font-size:34px; margin: 24px 0 8px 0;}

}
@media screen and (max-width: 480px) {
  #container {width:86%; padding:8px}
  h1 {font-size:38px; padding: 30px 0; }
  h1 small {font-size:24px}
  h2 {font-size:30px}
 .button {font-size: 18px; max-width: 266px;}
}