@import "demo.css";@import "font-awesome.css";.wrapper-demo{margin:25px 0 0 23px;*zoom:1;font-weight:400}.wrapper-demo:after{clear:both;content:"";display:table}.wrapper-dropdown-1{position:relative;width:200px;padding:10px;margin:0 auto;background:#9bc7de;color:#fff;outline:0;cursor:pointer;font-weight:bold}.wrapper-dropdown-1:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-6px;border-width:6px 0 6px 6px;border-style:solid;border-color:transparent #fff}.wrapper-dropdown-1 .dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;list-style:none;font-weight:normal;opacity:0;pointer-events:none}.wrapper-dropdown-1 .dropdown li a{display:block;text-decoration:none;color:#9e9e9e;padding:10px 20px}.wrapper-dropdown-1 .dropdown li:hover a{background:#f3f8f8}.wrapper-dropdown-1.active .dropdown{opacity:1;pointer-events:auto}.wrapper-dropdown-1.active:after{border-color:#9bc7de transparent;border-width:6px 6px 0 6px;margin-top:-3px}.wrapper-dropdown-1.active{background:#9bc7de;background:-moz-linear-gradient(left,#9bc7de 0,#9bc7de 78%,#fff 78%,#fff 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0%,#9bc7de),color-stop(78%,#9bc7de),color-stop(78%,#fff),color-stop(100%,#fff));background:-webkit-linear-gradient(left,#9bc7de 0,#9bc7de 78%,#fff 78%,#fff 100%);background:-o-linear-gradient(left,#9bc7de 0,#9bc7de 78%,#fff 78%,#fff 100%);background:-ms-linear-gradient(left,#9bc7de 0,#9bc7de 78%,#fff 78%,#fff 100%);background:linear-gradient(to right,#9bc7de 0,#9bc7de 78%,#fff 78%,#fff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9bc7de',endColorstr='#ffffff',GradientType=1)}.no-opacity .wrapper-dropdown-1 .dropdown,.no-pointerevents .wrapper-dropdown-1 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-1.active .dropdown,.no-pointerevents .wrapper-dropdown-1.active .dropdown{display:block}.wrapper-dropdown-2{position:relative;width:200px;margin:0 auto;padding:10px 15px;background:#fff;border-left:5px solid grey;cursor:pointer;outline:0}.wrapper-dropdown-2:after{content:"";width:0;height:0;position:absolute;right:16px;top:50%;margin-top:-3px;border-width:6px 6px 0 6px;border-style:solid;border-color:grey transparent}.wrapper-dropdown-2 .dropdown{position:absolute;top:100%;left:-5px;right:0;background:white;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;list-style:none;opacity:0;pointer-events:none}.wrapper-dropdown-2 .dropdown li a{display:block;text-decoration:none;color:#333;border-left:5px solid;padding:10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-2 .dropdown li:nth-child(1) a{border-left-color:#00aced}.wrapper-dropdown-2 .dropdown li:nth-child(2) a{border-left-color:#4183c4}.wrapper-dropdown-2 .dropdown li:nth-child(3) a{border-left-color:#3b5998}.wrapper-dropdown-2 .dropdown li i{margin-right:5px;color:inherit;vertical-align:middle}.wrapper-dropdown-2 .dropdown li:hover a{color:grey}.wrapper-dropdown-2.active:after{border-width:0 6px 6px 6px}.wrapper-dropdown-2.active .dropdown{opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-2 .dropdown,.no-pointerevents .wrapper-dropdown-2 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-2.active .dropdown,.no-pointerevents .wrapper-dropdown-2.active .dropdown{display:block}.wrapper-dropdown-3{position:relative;width:200px;margin:0 auto;padding:10px;background:#fff;border-radius:7px;border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(50,50,50,0.1);cursor:pointer;outline:0;font-weight:bold;color:#8aa8bd}.wrapper-dropdown-3:after{content:"";width:0;height:0;position:absolute;right:15px;top:50%;margin-top:-3px;border-width:6px 6px 0 6px;border-style:solid;border-color:#8aa8bd transparent}.wrapper-dropdown-3 .dropdown{position:absolute;top:140%;left:0;right:0;background:white;border-radius:inherit;border:1px solid rgba(0,0,0,0.17);box-shadow:0 0 5px rgba(0,0,0,0.1);font-weight:normal;-webkit-transition:all .5s ease-in;-moz-transition:all .5s ease-in;-ms-transition:all .5s ease-in;-o-transition:all .5s ease-in;transition:all .5s ease-in;list-style:none;opacity:0;pointer-events:none}.wrapper-dropdown-3 .dropdown:after{content:"";width:0;height:0;position:absolute;bottom:100%;right:15px;border-width:0 6px 6px 6px;border-style:solid;border-color:#fff transparent}.wrapper-dropdown-3 .dropdown:before{content:"";width:0;height:0;position:absolute;bottom:100%;right:13px;border-width:0 8px 8px 8px;border-style:solid;border-color:rgba(0,0,0,0.1) transparent}.wrapper-dropdown-3 .dropdown li a{display:block;padding:10px;text-decoration:none;color:#8aa8bd;border-bottom:1px solid #e6e8ea;box-shadow:inset 0 1px 0 rgba(255,255,255,1);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-3 .dropdown li i{float:right;color:inherit}.wrapper-dropdown-3 .dropdown li:first-of-type a{border-radius:7px 7px 0 0}.wrapper-dropdown-3 .dropdown li:last-of-type a{border:0;border-radius:0 0 7px 7px}.wrapper-dropdown-3 .dropdown li:hover a{background:#f3f8f8}.wrapper-dropdown-3.active .dropdown{opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-3 .dropdown,.no-pointerevents .wrapper-dropdown-3 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-3.active .dropdown,.no-pointerevents .wrapper-dropdown-3.active .dropdown{display:block}.wrapper-dropdown-4{position:relative;width:270px;margin:0 auto;padding:10px 10px 10px 30px;background:#fff;border:1px solid silver;cursor:pointer;outline:0}.wrapper-dropdown-4:after{content:"";width:0;height:0;position:absolute;right:10px;top:50%;margin-top:-3px;border-width:6px 6px 0 6px;border-style:solid;border-color:#ffaa9f transparent}.wrapper-dropdown-4 .dropdown{position:absolute;top:100%;margin-top:1px;left:-1px;right:-1px;background:white;border:inherit;border-top:0;list-style:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;opacity:0;pointer-events:none}.wrapper-dropdown-4 .dropdown:before,.wrapper-dropdown-4:before{content:"";width:4px;height:100%;position:absolute;top:0;left:15px;border:1px solid #ffaa9f;border-top:0;border-bottom:0;z-index:2}.wrapper-dropdown-4 .dropdown li{position:relative}.wrapper-dropdown-4 .dropdown li label{display:block;padding:10px 10px 10px 30px;border-bottom:1px dotted #1ccfcf;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-4 .dropdown li:last-of-type label{border:0}.wrapper-dropdown-4 .dropdown li input{position:absolute;display:block;right:10px;top:50%;margin-top:-8px}.wrapper-dropdown-4 .dropdown li:hover label{background:#f0f0f0}.wrapper-dropdown-4 .dropdown li input:checked ~ label{color:grey;text-decoration:line-through}.wrapper-dropdown-4.active:after{border-width:0 6px 6px 6px}.wrapper-dropdown-4.active .dropdown{opacity:1;pointer-events:auto}.no-opacity wrapper-dropdown-4 .dropdown,.no-pointerevents .wrapper-dropdown-4 .dropdown{display:none;opacity:1;pointer-events:auto}.no-opacity .wrapper-dropdown-4.active .dropdown,.no-pointerevents .wrapper-dropdown-4.active .dropdown{display:block}.wrapper-dropdown-5{position:relative;width:130px;margin:0 auto;padding:8px 15px;background:#fff;border-radius:5px;box-shadow:0 1px 0 rgba(0,0,0,0.2);cursor:pointer;outline:0;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.wrapper-dropdown-5:after{content:"";width:0;height:0;position:absolute;top:50%;right:15px;margin-top:-3px;border-width:6px 6px 0 6px;border-style:solid;border-color:#c90303 transparent}.wrapper-dropdown-5 .dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:0 0 5px 5px;border:1px solid rgba(0,0,0,0.2);border-top:0;border-bottom:0;list-style:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;max-height:0;overflow:hidden}.wrapper-dropdown-5 .dropdown li{padding:0 10px}.wrapper-dropdown-5 .dropdown li a{display:block;text-decoration:none;color:#333;padding:10px 0;transition:all .3s ease-out;border-bottom:1px solid #e6e8ea}.wrapper-dropdown-5 .dropdown li:last-of-type a{border:0}.wrapper-dropdown-5 .dropdown li i{margin-right:5px;color:inherit;vertical-align:middle}.wrapper-dropdown-5 .dropdown li:hover a{color:#c90303}.wrapper-dropdown-5.active{border-radius:5px 5px 0 0;background:#c90303;box-shadow:none;border-bottom:0;color:white}.wrapper-dropdown-5.active:after{border-color:#fff transparent}.wrapper-dropdown-5.active .dropdown{border-bottom:1px solid rgba(0,0,0,0.2);max-height:400px}



#snow{
	background: none;
	font-family: Androgyne;
	background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
	height: 4700px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index:5;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}