#ContainVideo{font-family: 'Roboto', sans-serif;background-color:#002441!important;position: absolute;width:100%;height:100%;}
.videodemo{text-align: center;
    
    top: 20%;
  }
.showreel{position:absolute;
	z-index:3;
	width:100%;
	height:20px;
	left:0px;
	top:15%;
	position:absolute;
	margin-left:0px;
	
	text-align:center;
	font-size:24px;
	font-family: 'Roboto', sans-serif;
	font-weight:900;
	color:#FFF;
}


#demo{	font-style: oblique;	font-family:'Vollkorn', serif;	border: solid 1px #fff;	border-radius: 180px;	width:150px;	height:30px;	text-align:center;	line-height:30px;	font-weight:100;	position: absolute;	left:50%;	margin-left:-75px;	bottom:150px;	font-size:20px;	background-image:url('demo_gif.gif');}video#bgvid {  position: fixed; right: 0; bottom: 0;  min-width: 100%; min-height: 100%;  width: auto; height: auto; z-index: 0;left: 0;    margin-left: 0;    opacity: 0.2;  background-size: cover;}
@media screen and (max-device-width: 800px) {#bgvid { display: none; }}canvas{display:block;vertical-align:bottom;}
#particles-js{position:absolute;width:100%;height:100%;background-color:#002441;background-image:url("");background-repeat:no-repeat;background-size:cover;background-position:50% 50%;}
.count-particles{background:#000022;position:absolute;top:48px;left:0;width:80px;color:#13E8E9;font-size:.8em;text-align:left;text-indent:4px;line-height:14px;padding-bottom:2px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;}
.js-count-particles{font-size:1.1em;}
#stats, .count-particles{-webkit-user-select:none;margin-top:5px;margin-left:5px;}
#stats{border-radius:3px 3px 0 0;overflow:hidden;}
.count-particles{border-radius:0 0 3px 3px;}
body{font-family:'Roboto', sans-serif;background-color:#F4F1F1;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}
.worktheme, .workthemedeep{width:700px;left:50%;margin-left:-350px;}
p{display:block;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0px;-webkit-margin-end:0px;}
#menuList{top:50%;font-style:normal;font-family:'Roboto', sans-serif;text-transform:capitalize;//text-align:center;left:50%;margin-left:-150px;font-size:25px;position:absolute;z-index:29;width:300px;}
.listMenu{text-decoration:none;color:#002441;font-weight:300;padding-left:50px;}
.cd-transition-layer{position:fixed;top:0;left:0;z-index:19;height:100%;width:100%;opacity:0;visibility:hidden;overflow:hidden;}
.cd-transition-layer .bg-layer{position:absolute;left:50%;top:50%;transform:translateY(-50%) translateX(-2%);height:100%;width:2500%;background:url(../images/sprite1.png) no-repeat 0 0;background-size:100% 100%;}
.cd-transition-layer2{position:fixed;top:0;left:0;z-index:19;height:100%;width:100%;opacity:0;visibility:hidden;overflow:hidden;}
.cd-transition-layer2 .bg-layer2{position:absolute;left:50%;top:50%;transform:translateY(-50%) translateX(-2%);height:100%;width:2500%;background:url(../images/sprite4.png) no-repeat 0 0;background-size:100% 100%;}
@keyframes cd-sequence{0%{transform:translateY(-50%) translateX(-2%);}
100%{transform:translateY(-50%) translateX(-98%);}
}
@keyframes cd-sequence2{0%{transform:translateY(-50%) translateX(-98%);}
100%{transform:translateY(-50%) translateX(-2%);}
}
.cd-transition-layer.visible{opacity:1;visibility:visible;}
.cd-transition-layer.opening .bg-layer{-webkit-animation:cd-sequence 0.8s steps(24);animation:cd-sequence 0.8s steps(24);animation-fill-mode:forwards;}
.cd-transition-layer.ending .bg-layer{-webkit-animation:cd-sequence2 0.8s steps(24);animation:cd-sequence2 0.8s steps(24);animation-fill-mode:forwards;}
.cd-transition-layer2.visible{opacity:1;visibility:visible;}
.cd-transition-layer2.opening .bg-layer2{-webkit-animation:cd-sequence 0.8s steps(24);animation:cd-sequence 0.8s steps(24);animation-fill-mode:forwards;}
.cd-transition-layer2.ending .bg-layer2{-webkit-animation:cd-sequence2 0.8s steps(24);animation:cd-sequence2 0.8s steps(24);animation-fill-mode:forwards;}
#toggle{position:fixed;z-index:20;right:50px;top:20px;display:block;width:28px;height:30px;margin:30px auto 10px;}
#toggle span:after,
#toggle span:before{content:"";position:absolute;left:0;top:-9px;}
#toggle span:after{top:9px;}
#toggle span{position:relative;display:block;}
#toggle span,
#toggle span:after,
#toggle span:before{width:100%;height:5px;background-color:#eaeaea;transition:all 0.3s;backface-visibility:hidden;border-radius:2px;}
#toggle.on span{background-color:transparent;}
#toggle.on span:before{transform:rotate(45deg) translate(5px, 5px);}
#toggle.on span:after{transform:rotate(-45deg) translate(7px, -8px);}
#Home{font-family:'Roboto', sans-serif;background-color:#002441;width:100%;height:1080px;position:relative;}
#logoHome{position:absolute;width:550px;height:550px;left:50%;top:47%;margin-left:-280px;;margin-top:-275px;}
.wording{position:absolute;width:100%;top:55%;text-align:center;color:#AAAAAA;font-size:30px;}
@-webkit-keyframes caret{0%, 100%{opacity:1}
50%{opacity:0}
}
@keyframes caret{0%, 100%{opacity:1}
50%{opacity:0}
}
#pres:after{content:"_";font-size:30px;line-height:1;display:inline-block;vertical-align:baseline;opacity:1;-webkit-animation:caret 800ms infinite;animation:caret 800ms infinite;}
#subtitle{font-style:oblique;font-family:'Vollkorn', serif;font-size:20px;color:#fff;}
.work{color:rgba(114,112,112,1.00);margin-bottom:1px;background-color:rgba(0, 36, 65, 0.59);!important;position:relative;}
#works{overflow:hidden;background-color:#002441!important;}
.work:before{z-index:11;content:"";position:absolute;display:block;width:calc(100% + 150px);height:100%;background-color:rgba(240,240,240,0.5);border-radius:0 150px 150px 0;left:0px;transition:left 0.8s;pointer-events:none;}
.work:after{z-index:10;content:"";position:absolute;display:block;width:calc(100% + 150px);height:100%;background-color:rgba(0,0,0,0.10);border-radius:0 150px 150px 0;left:0px;transition:left 0.5s;top:0px;}
.work:hover:after{left:calc(-100% + 200px);transition:left 0.8s;}
.work:hover:before{left:calc(-100% + 200px);transition:left 0.5s;}
#footer{height:150px;background-color:rgba(17,25,43,1.00);position:relative;}
.work:hover#NameNode:before{}
#Nodetitle{font-family:'Roboto', sans-serif;font-style:normal;}
#NameNode{font-family:'Vollkorn', serif;font-style:italic;opacity:0;line-height:1px;text-transform:Capitalize;top:120px;position:absolute;z-index:20;color:rgba(0, 36, 65, 0.59);left:100px;transition:opacity 1s;}
#scroll{background:url(../images/scroll.gif?d);width:60px;height:60px;background-size:cover;position:absolute;bottom:30px;left:50%;margin-left:-30px;opacity:0.4;}
#NameNode:before{content:"";display:block;width:0px;height:1px;background-color:rgba(0, 36, 65, 0.59);left:-101px;top:25px;position:absolute;transition:width 0.5s;}
.work:hover #NameNode:before{width:80px;transition:width 0.5s;}
.work:hover #NameNode{opacity:1;transition:opacity 1s;}
#NameNode>p{text-transform:uppercase;font-size:24px;}
#aboutme{background-color:#002441;height:200px;color:#fff;position:relative;}
#aboutme>span{top:50%;font-size:24px;display:block;width:50%;left:50%;margin-left:-25%;position:absolute;z-index:2;}
#abouttxt:before{content:'“';color:#11192B;font-size:500px;position:absolute;font-family:'Droid Serif', serif;z-index:-1;top:-175px;left:-140px;}
.personalLink{text-decoration:none;font-weight:100;color:rgba(213,213,213,1.00);}
#copyright{color:rgba(130,130,130,1.00);position:absolute;bottom:4px;width:100%;text-align:center;font-size:10px;}
#logoWhite{background:url(../images/logo_blanc.png) no-repeat;background-size:contain;width:50px;height:50px;position:absolute;top:25px;left:50%;margin-left:-25px;}
#logoWhite2{/*background:url(../images/logo_blanc.png) no-repeat;*/background-size:contain;width:100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}
#logoWhite:after{position:absolute;display:block;content:"";width:90px;left:-19px;top:49px;opacity:0.3;height:1px;background-color:#fff;}
#links{color:#fff;font-size:20px;width:100%;text-align:center;position:absolute;top:80px;}
.fa{margin:10px;}
.part{font-family:'Vollkorn', serif;font-style:italic;font-weight:500;padding-left:0px;font-size:35px;}
@media screen and (max-width:1020px){.worktheme, .workthemedeep{width:100%;left:0;margin-left:0px;}
#menuList{font-size:25px !important;    margin-left: -110px;}
.part{font-size:30px !important;;}
#scroll{display:none;}
#logoHome{width:100%;margin-left:0px;left:0px;background-position-x:50% !important;background-position-y:50% !important;background-size:450px 450px!important;background-repeat:no-repeat!important;}
.wording{font-size:15px;}
#subtitle{font-size:15px;color:#fff;}
#abouttxt:before{content:'“';color:#11192B;font-size:160px;position:absolute;font-family:'Droid Serif', serif;z-index:-1;top:-47px;left:-30px;}
.work:before{z-index:11;content:"";position:absolute;display:block;width:calc(100% + 150px);height:100%;background-color:rgba(200,200,200,0.30);border-radius:0 150px 150px 0;left:0px;transition:left 0.8s;pointer-events:none;}
.work:after{z-index:10;content:"";position:absolute;display:block;width:calc(100% + 150px);height:100%;background-color:rgba(0,0,0,0.10);border-radius:0 150px 150px 0;left:0px;transition:left 0.5s;top:0px;}
.work:hover:after{left:calc(-100% - 150px);transition:left 0.8s;}
.work:hover:before{left:calc(-100% - 150px);transition:left 0.5s;}
#NameNode{display:none;}
#aboutme>span{top:50%;width:60%;margin-left:-30%;font-size:15px;}
}
@media screen and (max-width:321px){#aboutme>span{font-size:13px;}
}