@import url("https://use.typekit.net/tmz4gcf.css");

$pink:#ffe5e5;
$blue:#b4e7ff;
$font3: 'adage-script-jf', sans-serif;
$font2: 'mr-eaves-sans', sans-serif;
$font1:'gioviale', sans-serif;
$color:#e60012;

@mixin fontlight{
font-family: mr-eaves-sans, sans-serif;
font-weight: 200;
font-style: normal;
}

@mixin flex{
	display: inline-flex;
	display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
	box-sizing: border-box;
}

@mixin giji{
    content: "";
    position: absolute;
}

@mixin font1{
    font-family: 'gioviale', sans-serif;
    line-height: 1.2em;
}

li{list-style: none;}



body{
	background: url("../img/1912christmas_bg.jpg");
	letter-spacing: 0.07em;
	margin: 0;
	padding: 0;
}

@media screen and (min-width:641px) {
.fade-in {
	-webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 /*---ナビメニュー---*/
    
  .controls{
      
        margin: 10px 0;
       
        padding: 10px 0;
    }
    
.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 1100px;
  margin: 0;
  padding: 0;
	display: inline-block;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  /*width: 23%;*/
  float: left;
  margin: 0 10px 0 0;
  padding: 0;
  text-align: center;
box-sizing: border-box;
/*border: 1px solid #6E6E6E;*/
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #FFF;
  color: #000;
    font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;
	border: none;
    
}
.dropmenu li ul li a{
  padding: 8px 10px 8px 0;
    box-sizing: border-box;
  text-align: left;
}
.dropmenu li:hover > a{
  background:#FDD6D7;
}
/*.dropmenu li a:hover{
  background:#73d0f2;
}*/

#fade-in2 li ul{
  opacity: 0;
  top: 50%;
  visibility: hidden;
  transition: .5s;
    
}
#fade-in2 li:hover ul{
  top: 100%;
  visibility: visible;
  opacity: 1;
}

button{
	padding: 8px;
  border-top: 1px solid #dddddd;
  background: #a10608;
    margin: 0;
  text-align: left;
	font-size: 18px;
	width:100%;
    color: #fff;
    box-sizing: border-box;
	cursor: pointer;
	box-shadow: none;
    font-weight: 400;
	border-bottom: none;
	border-left: none;
	border-right: none;
	}
button:hover{
		background-color:#D92E31;
	}

/*button.active{
  background:#8E7039;
	
}*/

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}
	
	button.base{
		font-style: $font1;
		font-size: 18px;
		text-align: center;
        border: 1px solid #a00000;
		/*border-top: none;*/
		background: #ffffff !important;
        color:#000;
	}
	button.base:hover{
		background: #D92E31;
	}
	button.base1{
		font-style: $font1;
		font-size: 18px;
		text-align: center;
		border-top: none;
        color: #fff;
		background: #BB0003;
	}
	button.base1:hover{
		background: #CF4345;
	}
	button.base1.active{
  /*background:#FDD6D7;*/
        font-size: 18px;
	}
	
    
 /*mix it up*/
.container{
    
  padding: 0 20px;
  text-align: left;
  font-size: 0.1px;
  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
    position: relative;
  display: inline-block;
  width: 24%;
	box-sizing: border-box;
	text-align: center;
	padding: 0;
}

.container .mix{
	position: relative;
  text-align: center;
  margin-bottom: 2%;
    margin-right: 7px;
  display: none;
    /*background: #e8e8e8;*/
    padding: 8px 8px 10px;
    /*p{font-size: 12px;
    margin: 5px 0;}*/
    .rank{
        @include giji;
        width: 53px;
        height: 51px;
        background-size: cover;
        top:0px;
        left:0px;
        z-index: 999;
        img{width: 53px}
    }
    .rank2{
        @include giji;
        width: 35px;
        height: 98px;
        background-size: cover;
        top:2px;
        right:2px;
        z-index: 999;
        img{width: 35px}
    }
}

/*.container .mix img {
	position: relative;
  width: 100%;
  height: auto;
	z-index: 1;

}*/

.container .mix:before{
  content: '';
  display: inline-block;
}
       
.menu2021{
@include flex;
justify-content: space-between;
/*width: 95%;*/
flex-wrap: wrap;
width: 95%;
margin: 0 0 0 -33px;
li{width: 24%;
img{width: 100%;}}
} 
    
.wrapper{
	width: 1200px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	/*background: #7d0303;*/
    box-sizing: border-box;
	
}

    header{
        position: relative;
        text-align: center;
        margin: 0 auto 30px;
        width: 1200px;
		background: url("../img/christmas_headerbg_pc.png")no-repeat;
		padding-bottom: 50px;
    }
	/*header:after{
	position: absolute;
	content: "";
	background: url("../img/christmas_line.jpg") no-repeat;
	width: 1200px;
	height: 12px;
	top:0;
	left:0;
	}
	header:before{
	position: absolute;
	content: "";
	background: url("../img/christmas_line.jpg") no-repeat;
	width: 1200px;
	height: 12px;
	bottom:0;
	left:0;
	}*/
.headerpc{
		position: absolute;
		content:"";
		bottom:70px;
		right: 0px;
		}
    .header_txt{
        position: absolute;
        content: "";
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        bottom: 135px;
        left: 35%;
    }
	
	.bngift{margin: 30px auto 5px;
	p{font-size: 14px;
	color: #fff;}}
    h1{
        p{font-size: 16px;
        color: #8C0002;
        font-weight: 400;}
        position: relative;
        font-size: 2.3rem;
        color: #305806;
        font-weight: 600;
        margin: 20px 0;
        span{z-index: 500;
            padding: 0 5px;
            position: relative;
            background: #f8f9fd;}
        .bg2{z-index: 500;
            padding: 0 5px;
            position: relative;
            background: #ece6e4;
        display: inline-block;}
    }
    h1:after{position: absolute;
    content: "";
    border-bottom: 2px solid #305806;
    width: 80%;
    left: 10%;
    top:50px;}
    
    
    .bigmenu01{
        margin-top: 0px;
        padding-top: 10px;
        position: relative;
		background: url("../img/2112christmas_menu01_bg.jpg") no-repeat;
        /*background: url("../img/1912christmas_menu01_bg.jpg") no-repeat;*/
        width: 1200px;
        height: 404px;
        
    }
    .bigmenu01_01{
        position: absolute;
        content: "";
        width: 432px;
        height: 210px;
        top:130px;
        left: 40px;
    }
    .bigmenu01_02{
        position: absolute;
        content: "";
        width: 332px;
        height: 210px;
        top:130px;
        left: 495px;
    }
     .bigmenu01_03{
        position: absolute;
        content: "";
        width: 290px;
        height: 210px;
        top:130px;
        left: 845px;
    }
    
    
    .bigmenu03{
        padding-top: 5px;
        position: relative;
        background: url("../img/1912christmas_menu02_bg.jpg") repeat-y;
        width: 1200px;
    
    }
    .bigmenu02{
        margin-top: 30px;
        padding-top: 5px;
        position: relative;
        background: url("../img/1912christmas_menu02_bg.jpg") no-repeat;
        width: 1200px;
        height: 322px; 
        
        .btn01{background: #BB0003;
            display: inline-block;
            padding: 5px 10px;
            font-size: 1.2rem;
            a{color:#ffffff;}}
        
        .ladymen{
            margin-top: 17px;
            @include flex;
            width: 1000px;
            justify-content: space-between;
            /*li{padding: 10px 0;}*/
            .lady{width: 710px;
                padding:5px;
            background: #f6c3c5;
             p{font-size: 1rem;
                 /*padding: 5px;*/
                 margin: 0;
                 font-weight: 600;
                color: #8a050a;}
                .lady_menu{
                    @include flex;
                    width: 675px;
                    justify-content: space-between;
                    li{width: 215px;
                    box-sizing: border-box;}
                }
            }
            .ladyli{
                        /*padding: 5px 0;*/
                    font-size: 1.2rem; 
                    /*border: 1px solid #a40000;*/
                    background: #fff;
            box-sizing: border-box;}
            .men{width: 250px;
                padding:5px;
                background: #a4e1f4;
                p{font-size: 1rem;
                    /*padding: 5px;*/
                    font-weight: 600;
                color: #033293;}
                .men_menu{
                    @include flex;
                    width: 215px;
                    justify-content: space-between;
                    a{color:#fff;}
                    li{width: 215px;
                       text-align: center;
                    font-size: 1.2rem; 
                    }
                }
                .menli{/*border: 1px solid #033293;*/
                    background: #033293;
                    text-align: center;}
            }
        }
    }
    
     section{
             width: 1200px;
            box-sizing: border-box;
            background: #f6f1ed;
            padding: 3px;}
        .outline{border: 1px solid #b7aa00;}
    .brandbox{
        position: relative;
        border: 1px solid #b7aa00;
        background: #ffffff;
        padding-bottom: 50px;
    text-align: center;}
    
    h2{p{font-size: 14px;}
        margin: 8px 0 0;
        padding: 0;
        img{width: 200px;}
    }
    
    .itemphoto{
        @include flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 98%;
        li{position: relative;
            width: 49%;
            img{width: 80%;}
            .cate{font-size: 16px;
            font-weight: 600;}
        }
         
        li:first-child{width: 85%;
            margin: 5px 20px;
            p{font-size: 12px;
            margin: 10px 0 2px;
                }
            .price{color: #C40003;
                font-size: 1.2rem;
                font-weight: 600;
                span{font-size: 11px;}
                }
            
            img{width: 100%;
            margin-bottom: 5px;}}
    li:nth-child(2){margin-bottom: 5px;}
    }
    h4{font-size: 14px;
    margin: 5px 0;}
    .iconlist{
        @include flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{margin: 0px 2px 2px 0px;}
        .mr{margin-right: 0px;}
        .mb{margin-bottom: 22px;}
    }
    .per{font-size: 12px;
        color: #C80003;
        font-weight: 600;
        margin: 0;
    }
    
    
    .btn_cate{
        font-family: $font2;
        background: #e7e1ab;
		width: 80%;
		margin: 0 auto;
		padding: 2px 4px;
        a{font-size: 1rem;
        font-weight: 600;
            color:#000000;
			display:block;
        letter-spacing: 0.1em;}
    }
	.btn_cate:hover{background: #9C974F;
	transition: 0.5s;}
    .btn{
        position: absolute;
        bottom: 10px;
        right: 8%;
        
        width: 80%;
        font-size: 14px;
        background: #850c0d;
        padding: 5px;
    }
    .btn a{color: #fff;
    display: block;}
    .btn:hover{background: #B10A0D;}
    
    .title{
        position: relative;
        font-size: 1.8rem;
        width: 100% !important;
        display: block;
       padding-bottom: -30px;
          p{font-size: 1rem;}
        span{font-size:14px;}
        .en{font-family: $font3;
            color:#a90f0f;
        font-size: 3rem;}
    }
    .title:after{
        border-bottom: 2px solid #a40000;
        @include giji;
        width: 98%;
        left:0;
        top:68px;
    }
    
    
    .btn_all{
        width: 100% !important;
        font-size: 1.2rem;
        display: block;
        a{color: #fff;
            padding: 10px;
        background: #AD0002;}
          p{font-size: 1rem;}
        span{font-size:14px;}
        
    }
	.brandall{
	width: 100% !important;
	display: block;
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	}
	.brandall_list{
		width: 98% !important;
        display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 0 auto;
		li{width: 12%;
		margin:5px 5px 15px 0;
		
		img{width: 90%;
		height: auto;}}
		li:nth-child(8n){margin-right: 0;
		border-right:none;}
		li + li {
    border-right:1px solid #ddd;
}
li:first-child {
    border-right:1px solid #ddd;
}
	}
}


/*-------------SP用-------------*/
@media screen and (max-width:640px) {
.fade-in {
	-webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
 /*mix it up*/
.container{
    
  padding: 0;
  text-align: center;
  font-size: 0.1px;
  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
    position: relative;
  display: inline-block;
  width: 48%;
    
	box-sizing: border-box;
	text-align: center;
	padding: 0;
}

.container .mix{
	position: relative;
  text-align: center;
  margin-bottom: 2%;
    margin-right: 1%;
  display: none;
    /*background: #e8e8e8;*/
    /*padding: 8px 8px 10px;*/
    /*p{font-size: 12px;
    margin: 5px 0;}*/
    .rank{
        @include giji;
        width: 50px;
        height: 50px;
        background-size: cover;
        top:0px;
        left:0px;
        z-index: 999;
        img{width: 50px}
    }
    .rank2{
        @include giji;
        width: 35px;
        height: 98px;
        background-size: cover;
        top:2px;
        right:2px;
        z-index: 999;
        img{width: 35px}
    }
}
    .container .mix:nth-child(2n){
        margin-right: 0;
    }
/*.container .mix img {
	position: relative;
  width: 100%;
  height: auto;
	z-index: 1;

}*/

.container .mix:before{
  content: '';
  display: inline-block;
}
       
  .btn01{background: #BB0003;
            display: inline-block;
			width: 80%;
			margin: 0 0 15px;
            padding: 5px 10px;
            font-size: 1.2rem;
            a{color:#ffffff;}}  
  .bngift{p{font-size: 12px;
  color: #fff;}
  margin-bottom: 30px;}
    
/*---ナビメニュー---*/
    
    
button{
	padding: 8px;
  border-top: 1px solid #dddddd;
  background: #a10608;
  text-align: left;
	font-size: 18px;
	width:100%;
    color: #fff;
    box-sizing: border-box;
	cursor: pointer;
	box-shadow: none;
    font-weight: 400;
	border-bottom: none;
	border-left: none;
	border-right: none;
	}
button:hover{
		background-color:#D92E31;
	}

/*button.active{
  background:#8E7039;
	
}*/

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}
	
	button.base{
		font-style: $font1;
		font-size: 18px;
		text-align: center;
        border: 1px solid #a00000;
		/*border-top: none;*/
		background: #ffffff !important;
        color:#000;
	}
	button.base:hover{
		background: #D92E31;
	}
	button.base1{
		font-style: $font1;
		font-size: 18px;
		text-align: center;
		border-top: none;
        color: #fff;
		background: #BB0003;
	}
	button.base1:hover{
		background: #CF4345;
	}
	button.base1.active{
  /*background:#FDD6D7;*/
        font-size: 18px;
	}
	
   
    
    
.controls{
    width: 100%;
    box-sizing: border-box;
    
        margin: 0;
    text-align: center;
    }
.cp_actab {
	position: relative;
	overflow: hidden;
	width: 80%;
	margin: 0 10%;
	color: #ffffff;
}
.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 3;
	position: relative;
	display: block;
	padding: 0 0 0 0;
	cursor: pointer;
	margin: 0 0 1px 0;
	font-family: $font1;
	text-align: center;
	font-size: 16px;
	background: #FD8183;
}
.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.80s;
	transition: max-height 0.80s;
	color: #333333;
	
}
    
    .mencolor{background: #1B80C0 !important;}
    .xmascolor{background: #C00003 !important;}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 30em;
}
/* Icon */
.cp_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
	content: "▼";
    top: 0;
	right: 0;
	font-size: 16px;
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(180deg);
}
    .mt{margin-top: 15px;} 
    .title_men{
        margin-top: 10px;
        color: #005DB4;
        font-size: 16px;
        font-weight: 600;
    }
    .title_lady{
        color:#EC2E6F;
        font-size: 16px;
        font-weight: 600;
    }
    
    .wrapper{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
    box-sizing: border-box;
}



.menu2021{
@include flex;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
li{width: 48%;
margin-top: 10px;}
} 


    header{
        position: relative;
        text-align: center;
        margin: 0 auto;
		padding: 50px 0 0;
        width: 100%;
		background: url("../img/2021_xmas_headerbn_sp.png")no-repeat center;
		background-size: contain;
    }
	
	.headersp{
		position: absolute;
        content: "";
        bottom: 50px;
		margin-top: 50px;
        /*left: 50%;
		right:50%;*/
	}

    .header_txt{
        position: absolute;
        content: "";
        font-size: 14px;
        font-weight: 400;
        color: #fff;
        bottom: 35px;
        left: 35px;
    }
    h1{
        p{font-size: 14px;
        color: #8C0002;
        font-weight: 400;}
        position: relative;
        font-size: 1.8rem;
        color: #305806;
        font-weight: 600;
        margin: 20px 0;
        span{z-index: 500;
            padding: 0 5px;
            position: relative;
            background: #f8f9fd;}
        .bg2{z-index: 500;
            padding: 0 5px;
            position: relative;
            background: #ece6e4;
        display: inline-block;}
    }
    h1:after{position: absolute;
    content: "";
    border-bottom: 2px solid #305806;
    width: 80%;
    left: 10%;
    top:70px;}
    
    
    .bigmenu01{
        overflow: hidden;
        position: relative;
        margin: -20px 0 50px;;
        padding: 10px 0;
        position: relative;
        background: url("../img/1912christmas_menu_bg.gif") repeat;
        width: 100%;   
    }
    
    .bigmenu01:after{
        position: absolute;
        content: "";
        background: url("../img/menu_sp_after.gif")no-repeat;
        width: 100%;
        height: 16px;
        top:0;
        left: 0;
    }
    .bigmenu01:before{
        content: "";
        position: absolute;
        background: url("../img/menu_sp_after.gif")no-repeat;
        width: 100%;
        height: 16px;
        bottom: -5px;
        left: 0;
    }
    .bigmenu01_01{
       width: 65%;
        display: block;
        margin: 0 20% 20px;
    }
    .bigmenu01_02{
        width: 48%;
        float: left;
        margin-left: 3%;
    }
     .bigmenu01_03{
        width: 42%;
         float: left;
    }
    
    .bigmenu02{
        position: relative;
        margin: 0px 0 50px;
        padding: 5px 0 30px;
        position: relative;
        background: url("../img/1912christmas_menu_bg.gif") repeat;
        width: 100%;   
    }
    
    .bigmenu02:after{
        position: absolute;
        content: "";
        background: url("../img/menu_sp_after.gif")no-repeat;
        width: 100%;
        height: 16px;
        top:0;
        left: 0;
    }
    .bigmenu02:before{
        content: "";
        position: absolute;
        background: url("../img/menu_sp_after.gif")no-repeat;
        width: 100%;
        height: 16px;
        bottom: -15px;
        left: 0;
    }
    
     section{
             width: 98%;
            box-sizing: border-box;
            background: #f6f1ed;
         margin: 0 1%;
            padding: 3px;}
        .outline{border: 1px solid #b7aa00;}
    .brandbox{
        position: relative;
        border: 1px solid #b7aa00;
        background: #ffffff;
        padding-bottom: 50px;
    text-align: center;}
    
    h2{p{font-size: 12px;}
        margin: 8px 0 0;
        padding: 0;
        img{width: 80%;}
    }
    
    .itemphoto{
        @include flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        
        li{position: relative;
            width: 49%;
            img{width: 90%;}
        }
          .cate{font-size: 14px;
            font-weight: 600;}
         li:after{
                position: absolute;
                 content: "";
                background: url("../img/tumi_icon_zoom.png")no-repeat;
                width:19px;
                 height: 19px;;
                top:3px;
                left:3px;
            }
        li:first-child{width: 100%;
            margin: 5px 20px;
            .price{color: #C40003;
                font-size: 1.2rem;
                font-weight: 600;
                span{font-size: 11px;}
                }
            p{font-size: 12px;
            margin: 10px 0 2px;}
            img{width: 100%;
            margin-bottom: 5px;}}
    li:nth-child(2){margin-bottom: 5px;}
    }
    h4{font-size: 14px;
    margin: 5px 0;}
    .iconlist{
        @include flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{margin: 0px 2px 2px 0px;}
        .mr{margin-right: 0px;}
        .mb{margin-bottom: 22px;}
    }
    .per{font-size: 12px;
        color: #C80003;
        font-weight: 600;
        margin: 0;
    }
    
    .btn_cate{
        font-family: $font2;
        background: #e7e1ab;
        a{font-size: 14px;
        font-weight: 600;
            color:#000000;
        letter-spacing: 0.05em;}
    }
    .btn{
        position: absolute;
        bottom: 10px;
        right: 8%;
        
        width: 80%;
        font-size: 14px;
        background: #850c0d;
        padding: 5px;
    }
    .btn a{color: #fff;
    display: block;}
    .btn:hover{background: #B10A0D;}
    
    .title{
        position: relative;
        font-size: 1.8rem;
        width: 100% !important;
        display: block;
       padding-bottom: -30px;
          p{font-size: 1rem;}
        span{font-size:14px;}
        .en{font-family: $font3;
            color:#a90f0f;
        font-size: 2rem;}
    }
    .title:after{
        border-bottom: 2px solid #a40000;
        @include giji;
        width: 98%;
        left:0;
        top:68px;
    }
	
    .btn_all{
        margin-top: 30px;
        width: 100% !important;
        font-size: 1.2rem;
        display: block;
        a{color: #fff;
            padding: 10px;
        background: #AD0002;}
          p{font-size: 1rem;}
        span{font-size:14px;}
        
    }
		.brandall{
	width: 100% !important;
	display: block;
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	}
	.brandall_list{
		width: 98% !important;
        display: flex;
		box-sizing: border-box;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 0 auto;
		li{width: 24%;
		margin:5px 2px 15px 0;
		
		img{width: 90%;
		height: auto;}}
		li:nth-child(4n){margin-right: 0;
		border-right:none;}
		li + li {
    border-right:1px solid #ddd;
}
li:first-child {
    border-right:1px solid #ddd;
}
	}
	
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-22 11:52:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}