h1{text-indent: 100%;white-space: nowrap;overflow: hidden; height: 0 ;}
.event_box{ width: 100%; background-color: #2d2d2d; font-size:100%; font-size: 16px; line-height: 1.8em;}
.visual{ display: block;  max-width:1400px; height:0px;padding-top:32%; margin: 0 auto; background-image:url('/images/event/2017/xmasdiy/main_visual_01.png');background-repeat: no-repeat;background-size:contain;top: 50%; }
.event_rule{ display: block; max-width: 1100px; margin: 0 auto;box-sizing: border-box;background-color: #9d0222;padding: 30px 80px; box-sizing:border-box;color: #fff;position: relative;margin-top: 20px;margin-bottom: 150px;}
.event_rule:before{ display: block; content: ""; width: 100%; height: 300px;background-image: url('/images/event/2017/xmasdiy/content_bg_02.png');position: absolute; top: -105px; left: 0;background-repeat: no-repeat;}
.event_rule:after{ display: block; content: ""; width: 100%; height: 300px;background-image: url('/images/event/2017/xmasdiy/content_bg_03.png');position: absolute; bottom: -300px; left: 0;background-repeat: no-repeat;}
.event_rule h2{ font-size:30px; font-weight:500;margin-top: 30px;line-height: 1.6em;color: #8ab9a3;padding-left: 40px;}
.how_to{list-style-type: decimal;list-style-position: outside; margin-left: 20px; }
.how_to li a{ color: #fff; text-decoration: underline; }
.how_to li a:hover{color: #fdd191;}
.price {overflow: hidden;}
.price li{ display: block; width:215px;height: 380px; float: left; margin: 0 10px; }
.price li h3 , .price li h3 i{font-size:20px; font-weight:500; color:#ffa5a5; }
.price li h3 i{ color: #fff;}
.price li p{ font-size: 14px;line-height: 1.5em;}
.legal {list-style-type: decimal; max-width: 770px;}
.legal li{ list-style-position:outside; margin-bottom: 10px;margin-left: 20px;margin-top: 10px; }
.button{ display: block; width: 300px; height: 50px; border-radius:30px; background-color: #388132;text-align: center; line-height: 50px; color: #fff; font-size: 20px; margin: 0 auto; margin-top: 30px; margin-bottom: 30px;}
.button:hover{background-color: #340e0e;}
.icon01:before , .icon02:before , .icon03:before , .icon04:before{display: block; content:""; width:43px; height:42px;background-image: url('/images/event/2017/xmasdiy/icon01.png');position: absolute; left:70px;}
.icon02:before {background-image: url('/images/event/2017/xmasdiy/icon02.png');}
.icon03:before {background-image: url('/images/event/2017/xmasdiy/icon03.png');}
.icon04:before {background-image: url('/images/event/2017/xmasdiy/icon04.png');}

body {
  background:  #2d2d2d;
}

#snow {
    background-color: transparent;
    background-image: url(http://wp.agens.no/smakebit/wp-content/themes/smakebiten/img/snow1.png), url(http://wp.agens.no/smakebit/wp-content/themes/smakebiten/img/snow2.png);
    -webkit-animation: snow 30s linear infinite;
    -moz-animation: snow 30s linear infinite;
    -ms-animation: snow 30s linear infinite;
    animation: snow 30s linear infinite;
	z-index: 999;
	right: 0;
  top: 0;
  left: 0;
  bottom: 0;
	margin-top: 0;
	pointer-events: none;
	position: fixed;
}

/*¤À¨É¤¸¥ó*/
.fb_share {
    position: absolute;
    right: calc(100vw / 4);
    margin-top: 10px;
    line-height: 1;
    z-index:999;
}

/*Keyframes*/

@keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-moz-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }

    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}

@-ms-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px }
}

@media screen and (max-width:1600px)  { 
    .visual{ padding-top:43%;}  
}



@media screen and (max-width:1366px)  { 
    .visual{ padding-top:45%;}
   
}

@media screen and (max-width:1024px)  { 
    .event_rule{ display: block; max-width: 1100px; margin: 0 auto;box-sizing: border-box;background-color: #9d0222;padding: 30px; box-sizing:border-box;color: #fff;position: relative;margin-top: 20px;margin-bottom: 150px;}
    .icon01:before , .icon02:before , .icon03:before , .icon04:before{left:20px;}
   
}

@media screen and (max-width:640px) {
    .event_rule {
        margin-top: 10px;
    }

        .event_rule:before {
            display: none;
        }

        .event_rule:after {
            display: none;
        }

    .how_to li a {
        word-wrap: break-word;
    }

    .button {
        display: block;
        width: 200px;
    }
}

@media (min-width:320px) and (max-width:1366px) {
    .fb_share {
        right:0px
    }
}