@charset "utf-8";
*{margin:0; padding:0;}
body{background:#000;
    font-family: 'Dosis', sans-serif;
    overflow:auto;}
header{position:fixed;
    width:100%;
    height:80px;
    z-index:100;
    background:#000;
}
.logo{
    text-decoration:none;
    background:url(../images/collection_logo.gif) no-repeat;
    width:200px;
    height:44px;
    background-size:95%;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    float:left;
    cursor:pointer;
    position:absolute;
    left:50%;
    transform:translate(-50%,0%);
}


.top_ul{
    margin-top:20px;
    margin-right:30px;
    position:absolute;
    right:0%;
    z-index:110;
}
.top_ul li{
    list-style:none;
    float:left;
    margin:20px;
}
.top_ul li a{
    text-decoration:none;
    font-size:13px;
    color:#fff;
}
.top_ul li:hover a{color:#f5426c;
    animation-duration:0.1s;
    animation-name:iani;
    animation-iteration-count: infinite;
    animation-direction:alternate;
    -webkit-animation-duration:0.8s;
    -webkit-animation-name:iani;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction:alternate;
}
@keyframes iani{
    0%{color:#871f51;}
    25%{color:#00fffc;}
    50%{color:orange;}
    75%{color:#00ff00;}
    100%{color:#ff00b4;}
}


.main_nav{
    width:100%;
    height:40px;
    position:fixed;
    z-index:100;
    top:79px;
    background:rgba(0,0,0,0.7);
}
.main_ul{
    width:1050px;
    position:absolute;
    top:-2px;
    left:50%;
    transform:translate(-50%,0);

}
.main_ul > li{
    float:left;
    list-style:none;
    width:150px;
    height:30px;
    padding-top:9px;
    /*border-left:solid 1px #474747;*/
}
/*.main_ul li:last-child{border-right:solid 1px #474747;}*/
.main_ul li a{
    text-decoration:none;
    color:#fff;
}


.ul1,.ul2, .ul3, .ul4, .ul5{border:solid 1px #888;
    list-style:none;
    height:280px;
    width:180px;
    position:relative;
    top:10px;
    left:-30px;
    padding-left:10px;
    padding-top:10px;
    overflow:hidden;
    max-height:0;
    transition:350ms;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:all 350ms;
    -moz-transition:all 350ms;
    -o-transition:all 350ms;
}
.ul2{width:250px; height:280px;}
.ul5{width:150px; height:130px;}
.ul1 li, .ul3 li, .ul4 li, .ul5 li {width:165px; height:50px; }
.ul2 li{width:200px; height:50px;}

.ul1 li a, .ul2 li a, .ul3 li a, .ul4 li a, .ul5 li a{
    text-decoration:none;
    color:#fff;
    padding:2px 5px;
}
.main_ul li:hover .ul1, .main_ul li:hover .ul3, .main_ul li:hover .ul4{
    height:280px;
    width:180px;
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
    background:#000;
    opacity:0.9;
}
.main_ul li:hover .ul5{
    height:130px;
    width:150px;
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
    background:#000;
    opacity:0.8;
}
.main_ul li:hover .ul2{
    height:280px;
    width:250px;
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
    background:#000;
    opacity:0.8;
}
.main_ul li:hover > a{	color:#f5426c;	}
.ul1 li:hover a, .ul2 li:hover a, .ul3 li:hover a, .ul4 li:hover a, .ul5 li:hover a{
    background:#ff477b;
    text-decoration:none;
    color:#fff;
}
/* nav bar */
.main_ul .li1 .bar1{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li1:hover .bar1{width:55px;height:1px;background:#ff477b;}
.main_ul .li2 .bar2{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li2:hover .bar2{width:80px;height:1px;background:#ff477b;}
.main_ul .li3 .bar3{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li3:hover .bar3{width:68px;height:1px;background:#ff477b;}
.main_ul .li4 .bar4{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li4:hover .bar4{width:88px;height:1px;background:#ff477b;}
.main_ul .li5 .bar5{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li5:hover .bar5{width:60px;height:1px;background:#ff477b;}
.main_ul .li6 .bar6{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li6:hover .bar6{width:60px;height:1px;background:#ff477b;}
.main_ul .li7 .bar7{width:0px;height:1px;background:#ff477b; ; transition:all 0.5s ease;}
.main_ul .li7:hover .bar7{width:120px;height:1px;background:#ff477b;}

/* contents */
#collections{background:url(../images/collection_bg.png) no-repeat;
    width:100%;
    height:974px;
    position:absolute;
    overflow:hidden;
}
#collections div[class *="con"]{
    width:300px;
    height:300px;
    transform:rotate(45deg);
    position:absolute;
    overflow:hidden;
}

#collections div[class *="con"] div[class *="pic"]{
    width:300px;
    height:300px;
    position:absolute;
    overflow:hidden;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}

.con1{
    top:126px;
    left:65px;
}
#collections .con1 .pic1_top{
    background:rgba(245,66,108,.3);
    transition:all 0.3s ease;
    transform:translateX(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con1:hover .pic1_top{transform:translateX(0);}
#collections .con1 .pic1_bottom{
    background:rgba(245,66,108,.3);
    transition:all 0.3s ease;
    transform:translateX(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con1:hover .pic1_bottom{transform:translateX(0);}

#collections .con1 .pic1 .text1{
    width:180px;
    height:180px;
    padding:10px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(245,66,108,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con1 .pic1 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con1:hover .pic1 .text1{opacity:1;}
#collections .con1 .bg1{
    background:url(../images/collection_con1.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con1:hover .bg1{transform:scale(1.06);}


.con2{
    top:126px;
    left:490px;
}
#collections .con2 .pic2_top{
    background:rgba(245,159,66,.3);
    transition:all 0.3s ease;
    transform:translateY(-300px);
    z-index:2;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con2:hover .pic2_top{transform:translateX(0);}
#collections .con2 .pic2_bottom{
    background:rgba(245,159,66,.3);
    transition:all 0.3s ease;
    transform:translateY(300px);z-index:2;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con2:hover .pic2_bottom{transform:translateX(0);}

#collections .con2 .pic2 .text2{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(245,159,66,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con2 .pic2 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con2:hover .pic2 .text2{opacity:1;}
#collections .con2 .bg2{
    background:url(../images/collection_con2.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con2:hover .bg2{transform:scale(1.06);}

.con3{
    top:339px;
    left:702px;
}
#collections .con3 .pic3_top{
    background:rgba(112,56,69,.3);
    transition:all 0.3s ease;
    transform:translateX(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con3:hover .pic3_top{transform:translateX(0);}
#collections .con3 .pic3_bottom{
    background:rgba(112,56,69,.3);
    transition:all 0.3s ease;
    transform:translateX(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con3:hover .pic3_bottom{transform:translateX(0);}

#collections .con3 .pic3 .text3{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(112,56,69,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con3 .pic3 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con3:hover .pic3 .text3{opacity:1;}
#collections .con3 .bg3{
    background:url(../images/collection_con3.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con3:hover .bg3{transform:scale(1.06);}


.con4{
    top:127px;
    left:1338px;
}
#collections .con4 .pic4_top{
    background:rgba(245,66,66,.3);
    transition:all 0.3s ease;
    transform:translateY(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con4:hover .pic4_top{transform:translateX(0);}
#collections .con4 .pic4_bottom{
    background:rgba(245,66,66,.3);
    transition:all 0.3s ease;
    transform:translateY(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con4:hover .pic4_bottom{transform:translateX(0);}

#collections .con4 .pic4 .text4{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(245,66,66,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con4 .pic4 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con4:hover .pic4 .text4{opacity:1;}
#collections .con4 .bg4{
    background:url(../images/collection_con4.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con4:hover .bg4{transform:scale(1.06);}

.con5{
    top:552px;
    left:65px;
}
#collections .con5 .pic5_top{
    background:rgba(0,0,0,.3);
    transition:all 0.3s ease;
    transform:translateY(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con5:hover .pic5_top{transform:translateX(0);}
#collections .con5 .pic5_bottom{
    background:rgba(0,0,0,.3);
    transition:all 0.3s ease;
    transform:translateY(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con5:hover .pic5_bottom{transform:translateX(0);}

#collections .con5 .pic5 .text5{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(0,0,0,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con5 .pic5 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con5:hover .pic5 .text5{opacity:1;}
#collections .con5 .bg5{
    background:url(../images/collection_con5.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con5:hover .bg5{transform:scale(1.06);}


.con6{
    top:552px;
    left:490px;
}
#collections .con6 .pic6_top{
    background:rgba(245,66,108,.3);
    transition:all 0.3s ease;
    transform:translateX(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con6:hover .pic6_top{transform:translateX(0);}
#collections .con6 .pic6_bottom{
    background:rgba(245,66,108,.3);
    transition:all 0.3s ease;
    transform:translateX(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con6:hover .pic6_bottom{transform:translateX(0);}

#collections .con6 .pic6 .text6{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(245,66,108,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con6 .pic6 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con6:hover .pic6 .text6{opacity:1;}
#collections .con6 .bg6{
    background:url(../images/collection_con6.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con6:hover .bg6{transform:scale(1.06);}


.con7{
    top:552px;
    left:914px;
}
#collections .con7 .pic7_top{
    background:rgba(159,93,186,.3);
    transition:all 0.3s ease;
    transform:translateY(-300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con7:hover .pic7_top{transform:translateX(0);}
#collections .con7 .pic7_bottom{
    background:rgba(159,93,186,.3);
    transition:all 0.3s ease;
    transform:translateY(300px);
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
#collections .con7:hover .pic7_bottom{transform:translateX(0);}

#collections .con7 .pic7 .text7{
    width:180px;
    height:180px;
    padding:10px;
    font-size:15px;
    transform:rotate(-45deg);
    position:absolute;
    top:50px;
    left:50px;
    background:rgba(159,93,186,.8);
    opacity:0;
    z-index:3;
    transition:all 0.8s ease;
    text-align:center;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
}
#collections .con7 .pic7 a{color:#fff; text-decoration:none; line-height:150%;}
#collections .con7:hover .pic7 .text7{opacity:1;}
#collections .con7 .bg7{
    background:url(../images/collection_con7.png) no-repeat;
    width:300px;
    height:300px;
    top:126px;
    left:65px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
#collections .con7:hover .bg7{transform:scale(1.06);}

#collections .gif_box{
    position:absolute;
    top:127px;
    left:914px;
    width:300px;
    height:300px;
    overflow:hidden;
    transform:rotate(45deg);
    background:url(../images/collection_diamond.gif) no-repeat;
    background-size:99.7%;
    opacity:0.5;
    transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}

#collections .gif_box:hover{opacity:1;}
/*#collections .gif_box:hover .button{opacity:1;}*/
/*#collections .gif_box .button{
                                                        cursor:pointer;
                                                        text-align:center;
                                                        width:90px;
                                                        height:30px;
                                                        padding-top:10px;
                                                        color:#fff;
                                                        border:1px solid #eee;
                                                        transform:rotate(-45deg);
                                                        position:absolute;
                                                        top:200px;
                                                        left:178px;
                                                        opacity:0;
                                                        }*/

.button{
    cursor:pointer;
    transform:rotate(-45deg);
    position:absolute;
    top:200px;
    left:178px;
    width:90px;
    height:30px;
}
.button a {
    text-decoration:none;
    color: #111;
    padding: 10px;
    position:absolute;
    overflow: hidden;
    -moz-transition: ease-out 0.3s 0.3s;
    -o-transition: ease-out 0.3s 0.3s;
    -webkit-transition: ease-out 0.3s;
    -webkit-transition-delay: 0.3s;
    transition: ease-out 0.3s 0.3s;
}
.button a span::before {
    width: 100%;
    height: 2px;
    background: white;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button a span::after {
    width: 100%;
    height: 2px;
    background: white;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button a::before {
    width: 2px;
    height: 100%;
    background: white;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button a::after {
    width: 2px;
    height: 100%;
    background: white;
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0;
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

#collections .gif_box:hover .button a { color: white;}
#collections .gif_box:hover .button a::before,#collections .gif_box:hover .button a::after {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
#collections .gif_box:hover .button a span::before,#collections .gif_box:hover .button a span::after {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}



#collections	.tex1{
    width:300px;
    height:300px;
    transform:rotate(45deg);
    position:absolute;
    overflow:hidden;
    top:765px;
    left:278px;
    background:rgba(145,70,146,0.8);
}
#collections .tex1 .text_box{
    width:90px;
    height:300px;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform:translateX(-90px);
}
#collections .tex1:hover .text_box{
    width:90px;
    height:300px;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    animation-duration:0.7s;
    animation-name:textbox;
}
@keyframes textbox{
    100%{transform:translateX(380px);}
}
#collections .tex1 .text1{
    width:192px;
    height:192px;
    position:absolute;
    top:25px;
    left:25px;
    transform:rotate(-45deg);
    background:url(../images/collection_text.png) no-repeat;
}



#collections	.tex2{
    background:rgba(114,35,73,1);
    opacity:0.5;
    transition:all .6s ease;
    width:300px;
    height:300px;
    transform:rotate(45deg);
    position:absolute;
    overflow:hidden;
    top:339px;
    left:1126px;
}
#collections .tex2 .tex2_box{
    width:220px;
    height:100px;
    transform:rotate(-45deg);
    position:absolute;
    top:95px;
    left:35px;
    /*border:solid 2px rgba(255,255,255,0.6);*/
    overflow:hidden;
}
#collections .tex2 .tex2_box .text2{
    width:220px;
    height:100px;
    text-align:justify;
    position:absolute;
    top:100px;
    color:rgba(255,255,255,0.8);
    transition:all 0.4s ease-in;
    -webkit-transition:all 0.4s ease-in;
    -moz-transition:all 0.4s ease-in;
    -o-transition:all 0.4s ease-in;
}
#collections .tex2:hover{opacity:0.9;}
#collections .tex2:hover .tex2_box .text2{
    width:220px;
    height:100px;
    text-align:justify;
    position:absolute;
    top:10px;
    opacity:1;
}

#collections	.tex3{
    width:300px;
    height:300px;
    transform:rotate(45deg);
    position:absolute;
    overflow:hidden;
    top:339px;
    left:1549px;

}
#collections .tex3 .text_box{
    width:40px;
    height:300px;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform:translateX(-90px);
}
#collections .tex3:hover .text_box{
    width:90px;
    height:300px;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    animation-duration:0.7s;
    animation-name:textbox;
}