body{
margin:0;
background:#853d02;
font-family:sans-serif;
font-size:20px;
}
*{
box-sizing:border-box;
}
a, a:hover, a:visited{
text-decoration:none;
color:#853d02;
}
h2{
font-size:1.1em;
font-weight:bold;
margin:5px 0;
}
.block{
padding:15px;
}
@media only screen and (max-device-width:819px){
.block{
width:100%;
}
.block:nth-child(odd){
background:inherit;
}
.block:nth-child(even){
background:#db9842;
}
}
@media only screen and (min-device-width:820px){
.block{
border-radius:3px;
width:50%;
margin-bottom:10px;
}
.block.block--fullwidth{
width:100%;
}
.block:nth-child(4n){
background:inherit;
}
.block:nth-child(4n+1){
background:#db9842;
}
.block:nth-child(4n+2){
background:#db9842;
}
.block:nth-child(4n+3){
background:inherit;
}
}
.block__title{
font-size:1.2em;
font-weight:bold;
margin:5px 0;
}
.container{
}
.content{
width:85%;
min-width:320px;
max-width:1000px;
margin:auto;
margin-top:5px;
margin-bottom:10px;
background:#fbdb8e;
color:#000;
border-radius:3px;
display:flex;
flex-wrap:wrap;
}
@media only screen and (min-device-width:820px){
.content{
padding:10px;
}
}
.image{
width:100%;
}
.image__content{
display:block;
max-width:100%;
height:auto;
margin:0 auto;
}
.intro{
padding:10px;
display:flex;
width:100%;
}
@media only screen and (max-device-width:819px){
.intro{
flex-direction:column;
}
.intro__logo{
margin:0 auto;
width:300px;
}
}
@media only screen and (min-device-width:820px){
.intro{
flex-direction:row;
}
.intro__text{
max-width:700px;
margin-left:10px;
}
.intro__logo{
width:300px;
}
}
.intro__title{
font-size:1.4em;
font-weight:bold;
margin:5px 0;
}
.youtube{
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
margin:0;
}
.youtube__embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}