/* Start searchbox */
 .box {
	 margin: 30px 0;
	 width: 100%;
	 height: auto;
}
 .container-1 {
	 width: 100%;
	 margin-left: 0px;
	 vertical-align: middle;
	 white-space: nowrap;
	 position: relative;
}
 .outputContainer {
	 width: 50%;
	 height: 50px;
	 vertical-align: middle;
	 position: relative;
	 margin-left: auto;
	 margin-right: auto;
	 margin-bottom: 40px;
}
 .container-1 input#search {
	 width: 50%;
	 height: 40px;
	 background: #2b303b;
	 border: none;
	 font-size: 12pt;
	 text-align: center;
	 color: #63717f;
	 opacity: 0.8;
	 padding-left: 0px;
	 -webkit-border-radius: 25px;
	 -moz-border-radius: 25px;
	 border-radius: 25px;
	 -webkit-transition: background 0.2s ease;
	 -moz-transition: background 0.2s ease;
	 -ms-transition: background 0.2s ease;
	 -o-transition: background 0.2s ease;
	 transition: background 0.2s ease;
}
 .container-1 input#search::-webkit-input-placeholder {
	 color: #65737e;
}
 .container-1 input#search:-moz-placeholder {
	/* Firefox 18- */
	 color: #65737e;
}
 .container-1 input#search::-moz-placeholder {
	/* Firefox 19+ */
	 color: #65737e;
}
 .container-1 input#search:-ms-input-placeholder {
	 color: #65737e;
}
 .container-1 .icon {
	 position: absolute;
	 top: 50%;
	 margin-left: 17px;
	 margin-top: 17px;
	 z-index: 1;
	 color: #4f5b66;
}
 .container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active {
	 outline: none;
	 background: #fff;
}
/* End searchbox */
/* Output text */
 .outputtext {
	 font-family: Roboto;
	;
	 color: #fff;
	 width: 100%;
	 text-align: center;
	 height: 100px;
	 line-height: 50px;
	 font-size: 30px;
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 margin: auto;
}
 .outputtext .content {
	 display: inline;
}
 .outputtext dash {
	 display: inline-block;
	 height: 3px;
	 width: 20px;
	 background-color: #3498db;
	 animation: blink 0.5s infinite linear;
}
 @keyframes blink {
	 0% {
		 opacity: 1;
	}
	 99% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}
/* end outputtext */
/* Box loader */
 .loader {
	 margin-top: 100px;
	 width: 150px;
	 height: 150px;
	 display: inline-table;
	 box-sizing: border-box;
	 position: relative;
	 border-spacing: 0.2em;
}
 .loader row {
	 display: table-row;
}
 .loader row span {
	 display: table-cell;
	 position: relative;
	 background: #fdfdfd;
	 opacity: 0;
	 -webkit-animation: flicker 0.8s ease-out infinite alternate;
}
 @-webkit-keyframes flicker {
	 from, 20% {
		 opacity: 0;
		 -webkit-filter: blur(0.5px);
	}
	 100%, to {
		 opacity: 1;
	}
}
 .loader row:nth-child(1) span:nth-child(1) {
	 -webkit-animation-delay: 1.75s;
}
 .loader row:nth-child(1) span:nth-child(2) {
	 -webkit-animation-delay: 1.875s;
}
 .loader row:nth-child(1) span:nth-child(3) {
	 -webkit-animation-delay: 1.25s;
}
 .loader row:nth-child(1) span:nth-child(4) {
	 -webkit-animation-delay: 0.5s;
}
 .loader row:nth-child(2) span:nth-child(1) {
	 -webkit-animation-delay: 2s;
}
 .loader row:nth-child(2) span:nth-child(2) {
	 -webkit-animation-delay: 1.5s;
}
 .loader row:nth-child(2) span:nth-child(3) {
	 -webkit-animation-delay: 2.125s;
}
 .loader row:nth-child(2) span:nth-child(4) {
	 -webkit-animation-delay: 1s;
}
 .loader row:nth-child(3) span:nth-child(1) {
	 -webkit-animation-delay: 2.375s;
}
 .loader row:nth-child(3) span:nth-child(2) {
	 -webkit-animation-delay: 1s;
}
 .loader row:nth-child(3) span:nth-child(3) {
	 -webkit-animation-delay: 2.75s;
}
 .loader row:nth-child(3) span:nth-child(4) {
	 -webkit-animation-delay: 1.125s;
}
 .loader row:nth-child(4) span:nth-child(1) {
	 -webkit-animation-delay: 2.125s;
}
 .loader row:nth-child(4) span:nth-child(2) {
	 -webkit-animation-delay: 0.75s;
}
 .loader row:nth-child(4) span:nth-child(3) {
	 -webkit-animation-delay: 1.125s;
}
 .loader row:nth-child(4) span:nth-child(4) {
	 -webkit-animation-delay: 1.875s;
}
/* End box loader */
/* // new loader .loader {
	 width: 150px;
	 height: 95px;
	 margin-top: 50px;
	 margin-bottom: 50px;
}
 .circle {
	 margin: 20 auto;
	 border-radius: 50%;
	 border: 10px solid rgba(0,0,0,0);
	 border-top-color: #fff;
}
 .circle1-1, .circle1-2, .circle1-3, .circle1-4, .circle1-5, .circle1-6 {
	 height: 100px;
	 width: 100px;
	 margin-top: 15px;
}
 .circle2-1, .circle2-2, .circle2-3, .circle2-4, .circle2-5, .circle2-6 {
	 height: 70px;
	 width: 70px;
	 margin-top: 5px;
}
 .circle3-1, .circle3-2, .circle3-3, .circle3-4, .circle3-5, .circle3-6 {
	 height: 40px;
	 width: 40px;
	 margin-top: 5px;
}
 .circle1 {
	 -webkit-animation: load1 8s infinite;
}
 .circle2 {
	 -webkit-animation: load2 8s infinite;
}
 .circle3 {
	 -webkit-animation: load3 8s infinite;
}
 .circle4 {
	 -webkit-animation: load4 8s infinite;
}
 .circle5 {
	 -webkit-animation: load5 16s infinite;
}
 @-webkit-keyframes load5 {
	 0%{
		-webkit-transform: rotate(0);
	}
	 10% {
		-webkit-transform: rotate(45deg);
	}
	 20%{
		-webkit-transform: rotate(20deg);
	}
	 30%{
		-webkit-transform: rotate(90deg);
	}
	 40%{
		-webkit-transform: rotate(40deg);
	}
	 50%{
		-webkit-transform: rotate(120deg);
	}
	 60%{
		-webkit-transform: rotate(90deg);
	}
	 70%{
		-webkit-transform: rotate(160deg);
	}
	 80%{
		-webkit-transform: rotate(140deg);
	}
	 90%{
		-webkit-transform: rotate(120deg);
	}
	 100%{
		-webkit-transform: rotate(360deg);
	}
}
 end new loader */
 #fade h1 {
	 margin-top: 10px;
	 font-size: 20px;
	 text-align: center;
	 animation: fadein 1s;
	 -moz-animation: fadein 1s;
	/* Firefox */
	 -webkit-animation: fadein 1s;
	/* Safari and 
	/*Chrome */
	 -o-animation: fadein 2s;
	/* Opera */
}
 @keyframes fadein {
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
 @-moz-keyframes fadein {
	/* Firefox */
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
 @-webkit-keyframes fadein {
	/* Safari and Chrome */
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
 @-o-keyframes fadein {
	/* Opera */
	 from {
		 opacity: 0;
	}
	 to {
		 opacity: 1;
	}
}
/* Document download */
/*style="
visibility:visible"
 */
 .face-button {
	/*visibility: hidden;
	*/
	 margin-top: 10px;
	 margin-bottom: 50px;
	 opacity: 0.8;
	 height: 40px;
	 display: inline-block;
	 border: 3px solid #fff;
	 font-family: Roboto, sans-serif;
	 font-size: 20px;
	 font-weight: 500;
	 text-align: center;
	 text-decoration: none;
	 color: #fff;
	 overflow: hidden;
	 -webkit-border-radius: 10px;
	 -moz-border-radius: 10px;
	 border-radius: 10px;
}
 .face-button .icon {
	 margin-right: 6px;
}
 .face-button .face-primary, .face-button .face-secondary {
	 display: block;
	 padding: 0 32px;
	 line-height: 40px;
	 transition: margin 0.4s;
}
 .face-button .face-primary {
	 background-color: #fff;
	 color: #343d46;
}
 .face-button:hover .face-primary {
	 margin-top: -40px;
}
/*end Download button */
/* Social table */
 * {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 outline: 0;
}
 socialdiv {
	 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	 width: 100%;
	 height: 100%;
	 background-color: #171717;
	 color: white;
}
 h1 {
	 text-align: center;
}
 .elements-wrapper {
	 width: auto;
	 margin: 0 auto;
	 height: 100%;
}
 .elements-wrapper #linkedin {
	 transition: all 0.4s ease;
	 color: #197171;
}
 .elements-wrapper #linkedin:hover {
	 transition: all 0.4s ease;
	 color: white;
	 background-color: #197171;
}
 .elements-wrapper #codepen {
	 transition: all 0.4s ease;
	 color: #ff8c59;
}
 .elements-wrapper #codepen:hover {
	 transition: all 0.4s ease;
	 color: white;
	 background-color: #ff8c59;
}
 .elements-wrapper #google {
	 transition: all 0.4s ease;
	 color: #bf4440;
}
 .elements-wrapper #google:hover {
	 transition: all 0.4s ease;
	 color: white;
	 background-color: #bf4440;
}
 .elements-wrapper #facebook {
	 transition: all 0.4s ease;
	 color: #3732bf;
}
 .elements-wrapper #facebook:hover {
	 transition: all 0.4s ease;
	 color: white;
	 background-color: #3732bf;
}
 .elements-wrapper #flickr {
	 transition: all 0.4s ease;
	 color: #cf6da4;
}
 .elements-wrapper #flickr:hover {
	 transition: all 0.4s ease;
	 color: white;
	 background-color: #cf6da4;
}
 .element {
	 margin-top: 20px;
	 display: inline-block;
	 border: 2px solid white;
	 height: 200px;
	 width: 132px;
}
 .e-id {
	 padding: 3px;
	 text-align: right;
}
 .e-name {
	 font-size: 79px;
	 margin-top: 20px;
}
 .e-fname, .e-anumber, .e-name {
	 text-align: center;
}
 .e-fname {
	 margin-top: 10px;
	 font-size: 19px;
}
 .e-anumber {
	 font-size: 9px;
}
/* Triangle loader */
 canvas {
	 margin-top: 50px;
	 display: aligned;
	 position: relative;
}
/* end triangle loader */