#container{max-width:1170px; width:100%; margin:0 auto;}
.products{ width: 100%;
position: relative;
background: rgba(255,255,255,1);
display: inline-block;
margin: 0 10px;
cursor: pointer;
color: #2c3e50;
-webkit-transition: 
background 0.4s 0.5s;
transition: background 0.4s 0.5s;
}
.products:hover{background:rgba(255,255,255,0);-webkit-transition-delay:0s;transition-delay:0s;}
.products h2{
margin: 0 3px 15px 3px;
padding: 0;
font-weight: 400;
font-size:22px;
letter-spacing:0.5px;
}
.box h3{font-family:"Ruthie", cursive;font-size:180px;line-height:370px;margin:0;font-weight:400;width:100%;}
.box span{display:block;font-weight:400;text-transform:uppercase;letter-spacing:1px;font-size:13px;padding:5px;}
.box h3,
.box span{-webkit-transition:color 0.4s 0.5s;transition:color 0.4s 0.5s;}
.products:hover h3,
.products:hover span{color:#242e60;-webkit-transition-delay:0s;transition-delay:0s;}
.products svg{position:absolute;top:0;left:0;}
.products svg line{stroke-width:3;stroke:#ecf0f1;fill:none;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
.products:hover svg line{-webkit-transition-delay:0.1s;transition-delay:0.1s;}
.box svg line.top,
.box svg line.bottom{stroke-dasharray:330 240;}
.box svg line.left,
.box svg line.right{stroke-dasharray:490 400;}
.box:hover svg line.top{-webkit-transform:translateX(-600px);transform:translateX(-600px);}
.box:hover svg line.bottom{-webkit-transform:translateX(600px);transform:translateX(600px);}
.box:hover svg line.left{-webkit-transform:translateY(920px);transform:translateY(920px);}
.box:hover svg line.right{-webkit-transform:translateY(-920px);transform:translateY(-920px);}
.demo-2 .box{box-shadow:inset 0 0 0 10px #2c3e50;}
.demo-2 .box:hover h3,
.demo-2 .box:hover span{color:#fe6f83;}
.demo-2 .box svg line{stroke-width:8;}
.demo-2 .box:hover svg line{stroke:#fe6f83;}
.demo-3 .box{background:rgba(0,0,0,0);color:#fff;box-shadow:none;-webkit-transition:background 0.3s;transition:background 0.3s;}
.demo-3 .box:hover{background:rgba(0,0,0,0.4);}
.demo-3 .box h3,
.demo-3 .box span{-webkit-transition:none;transition:none;}
.demo-3 .box svg line{-webkit-transition:all .5s;transition:all .5s;}
.demo-3 .box:hover svg line{stroke-width:10;-webkit-transition-delay:0s;transition-delay:0s;}
.demo-3 .box:hover svg line.top{-webkit-transform:translateX(-300px);transform:translateX(-300px);}
.demo-3 .box:hover svg line.bottom{-webkit-transform:translateX(300px);transform:translateX(300px);}
.demo-3 .box:hover svg line.left{-webkit-transform:translateY(460px);transform:translateY(460px);}
.demo-3 .box:hover svg line.right{-webkit-transform:translateY(-460px);transform:translateY(-460px);}
.demo-4 .box{box-shadow:none;background:rgba(0,0,0,0.4);-webkit-transition:none;transition:none;color:#fff;}
.demo-4 .box h3,
.demo-4 .box span{-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}
.demo-4 .box:hover h3,
.demo-4 .box:hover span{-webkit-transform:scale(1);transform:scale(1);}
.demo-4 .box svg line{stroke-width:30;-webkit-transition:all .4s;transition:all .4s;}
.demo-4 .box:hover svg line{-webkit-transition-delay:0s;transition-delay:0s;}
.demo-4 .box:hover svg line{stroke-width:0;}
.demo-4 .box svg line.top,
.demo-4 .box svg line.bottom{stroke-dasharray:300;}
.demo-4 .box svg line.left,
.demo-4 .box svg line.right{stroke-dasharray:460;}
.demo-4 .box:hover svg line.top{-webkit-transform:translateX(-300px);transform:translateX(-300px);}
.demo-4 .box:hover svg line.bottom{-webkit-transform:translateX(300px);transform:translateX(300px);}
.demo-4 .box:hover svg line.left{-webkit-transform:translateY(460px);transform:translateY(460px);}
.demo-4 .box:hover svg line.right{-webkit-transform:translateY(-460px);transform:translateY(-460px);}