#searchform-fullscreen {
	visibility:hidden;
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
	&.active {
	visibility: visible;
	}
    .container {
    	position: relative;
    	max-width: 550px;
    	height: 100%;
    }

    a.search-fullscreen-close {
    	position: absolute;
	    top: 30px;
	    right:30px;
	    width: 50px;
	    height: 50px;
	    background-color: rgba(255,255,255,0.2);
	    text-align: center;
	    @include border-radius( 25px);

    	&:hover {
    		background-color: rgba(255,255,255,0.3);
    	}

    	span {
    		position: relative;
		    display: inline-block;
		    width: 24px;
		    height: 24px;

		    &:before,
		    &:after {
		    	content: '';
			    position: absolute;
			    top: 50%;
			    left: 0;
			    height: 3px;
			    width: 100%;
			    margin-top: 12px;
			    background-color: $color-1;
		    	@include border-radius( 5px );
		    }

		    &:before {
			    @include transform( rotate(45deg) );
		    }

		    &:after {
			    @include transform( rotate(-45deg) );
		    }
    	}
    }

    form {
    	position: absolute;
	    top: 50%;
	    left: 0;
	    margin-top: -33px;
	    width: 100%;
	    text-align: center;

	    input, label {
	    	font-size: 25px;
		    line-height: 1.3;
		    padding: 18px 0;
		    margin: 0;
		    min-height: 50px;
		    color: $color-1;
		    letter-spacing: 1px;
	    }

	    input {
	    	position: relative;
		    border: 0;
		    background-color: transparent;
		    border-bottom: 1px solid $color-14;
		    z-index: 2;
			@include border-radius( 0px );
		    @include transition( border-color .3s ease );

		    &:hover {
		    	border-color: $color-15;
		    }

		    &:focus {
		    	border-color: $color-1;
		    }
	    }

		label {
		    display: block;
			position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    cursor: text;
		    @include opacity( .5 );
		    z-index: 1;

		    i {
		    	display: inline-block;
			    background-color: $color-1;
			    width: 3px;
			    height: 3px;
			    margin-left: 3px;
			    @include animation( blink 1s linear infinite );
		    }

		    i+i {
			    @include animation-delay( .2s );
			}

			i+i+i {
			    @include animation-delay( .4s );
			}
		}

		&.search-filled label {
			@include opacity( 0 );
		    @include transition-duration( 150ms );
		}
    }
}

body.admin-bar #searchform-fullscreen a.search-fullscreen-close {
	top:62px;
}

/*------------------------------------*
	All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
			
	/* header > search fulscreen */
	#searchform-fullscreen {
		display: none !important;
	}
	
}

.magictime {
    animation-duration: 1s;
    animation-fill-mode: both;
	animation-delay: 0.2s;
}

.swashIn {
  animation-name: swashIn;
}
@keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}
.swashOut {
  animation-name: swashOut;
}
.tinLeftIn {
  animation-name: tinLeftIn;
}
@keyframes tinLeftIn {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateX(-900%);
  }

  50%, 70%, 90% {
    opacity: 1;
    transform: scale(1.1, 1.1) translateX(0);
  }

  60%, 80%, 100% {
    opacity: 1;
    transform: scale(1, 1) translateX(0);
  }
}
.spaceInDown {
  animation-name: spaceInDown;
}
@keyframes spaceInDown {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(.2) translate(0%, 200%);
  }

  100% {
    opacity: 1;
    transform-origin: 50% 100%;
    transform: scale(1) translate(0%, 0%);
  }
}
.spaceInLeft {
  animation-name: spaceInLeft;
}
@keyframes spaceInLeft {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(.2) translate(-200%, 0%);
  }

  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}
