@charset "UTF-8";
body {
  width: 100%;
    line-height: 2;
    background-color: #ffffff;
background-attachment: fixed;
    background-image:
url("../img/linex.png") ,
url("../img/liney.png");
    background-repeat: repeat-x,repeat-y;
    background-position: 0px 120px,left top;
        background-size: auto,auto;
    background-attachment: scroll,scroll;
}
wrapper{
    display: flex;
    flex-direction: column;
}
header{
}
.maintitle{
    padding: 50px 50px 50px 0;
    text-align: right;
    font-size: 150%;
    font-weight: 600;
    color: red;
}
article{
    padding: 20px 20px 20px 40px;
}
.subtitle{
    margin-bottom:2em;
    font-size: 130%;
    font-weight: 600;
    color: #444;
}
.img_1hero{
    width: 100%;
    margin-bottom: 30px;
}
.img_2left{
    float: left;
    width: 40%;
    margin: 0 20px 20px 0;
}
.img_3right{
    float: right;
    width: 40%;
    margin: 0 0 20px 20px;
}
.img_4center{
    display: block;
    width: 85%;
    margin: 50px auto;
}
p{
    margin-bottom: 50px;
}
p:after{
      content: "";
  display: block;
  clear: both;
}
strong{
 background: linear-gradient(transparent 75%, #cceeff 75%);
    color: #ee0000;
}
hr{
    border: 0;
    border-bottom: 1px solid #ffc0c0;
    margin: 3em;
}
nav{
    padding: 20px;
  margin: 0 auto;
    border-top: dotted 10px #ffc0c0;
}
    nav a{
        display: block;
        padding: 20px;
        margin-bottom: 20px;
        font-size: 90%;
        line-height: 1.4;
    }
footer {
  margin-top: 80px;
    color: #666;
  text-align: left;
    padding: 20px;
    font-weight: 600;
    border-top: dotted 10px #ffc0c0;
}


@media (min-width:950px){
    body{
    background-image:
url("../img/linex.png") ,
url("../img/liney.png") ,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(268,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23FFA4A4'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='17' height='17' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='8.5' cy='8.5' r='8.5'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.14'/%3E%3C/svg%3E");
    background-repeat: repeat-x,repeat-y,repeat-y;
    background-position: 0px 120px,right top,left top;
        background-size: auto,auto,calc(100% - 1200px);
    }
    header{
                margin:0 300px 0 auto;
        width: 100%;
        max-width: 800px;
    }
    wrapper{
        flex-direction: row;
        margin:0 0 0 auto;
        width: 100%;
        max-width: 1200px;
    }
    article{
        flex-grow: 2;
        padding: 20px;
    }
.maintitle{
    font-size: 200%;
}
    nav{
        flex-shrink: 0;
        width: 300px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 165px);
        border-top: 0;
    }
    footer{
                margin:auto 20px 0 20px;
        max-width: 1200px;
        padding: 20px 0;
    }
}