li.icon.search {
	position: relative;
}
.sitesearch input {
    transition: all 0.15s;
}
.sitesearch.explode {
    transform: scale(1.4);
    opacity: 0;
}

.sitesearch {
	top: 0px;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    position: relative;
}
.rightnav .sitesearch {
	top: 10px;
	position: absolute;
}
.sitesearch button[type="submit"] {
	display: none;
	opacity: 0;
	cursor: pointer;
}
.sitesearch label {
    position: absolute;
	display: block;
	width: 200px;
    left: 25px;
    top: -15px;
    z-index: 5;
	text-align: left;
    font-size: .8em;
    font-weight: bold;
	opacity: 0;
}
.rightnav .sitesearch label {
	top: -23px;
    left: -190px;
	color: #ffffff;
}
.sitesearch input {
    width: 100%;
}
.sitesearch input {
	top: -5px;
    width: 20px;
    height: 20px;
    background: none;
    border: 4px solid #3d455d;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0px 1px 0px;
    font-size: .9em;
    color: #3d455d;
    z-index: 2;
    position: relative;
	
	-moz-transform: scale(.8);
	-webkit-transform: scale(.8);
	-o-transform: scale(.8);
	-ms-transform: scale(.8);
	transform: scale(.8);
}
.rightnav .sitesearch input {
	border: 4px solid #ffffff;
}
.sitesearch input:focus {
    outline: none;
}
.after {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    left: 5px;
    z-index: 1;
	
	-moz-transform: scale(.8);
	-webkit-transform: scale(.8);
	-o-transform: scale(.8);
	-ms-transform: scale(.8);
	transform: scale(.8);
}
.sitesearch.open .after {
    cursor: pointer;
}
.after:before,
.after:after { 
    content: '';
    width: 14px;
    height: 4px;
    background-color: #3d455d;
    border-radius: 3px;
    position: absolute;
    transform-origin: 100% 100%;
	
	-moz-transform: scale(.8);
	-webkit-transform: scale(.8);
	-o-transform: scale(.8);
	-ms-transform: scale(.8);
	transform: scale(.8);
}
.rightnav .after:before,
.rightnav .after:after {
	background-color: #ffffff;
}
.after:after{
    bottom: 2px;
    left: -8px;
    transform: rotate(-45deg);
}
.after:before {
    width: 14px;
    height: 4px;
    bottom: 2px;
    left: -8px;
    transform: rotate(-45deg);
}
.sitesearch input,
.sitesearch label,
.sitesearch .after,
.sitesearch .after:before,
.sitesearch .after:after,
.sitesearch button[type="submit"] {
	animation-fill-mode: forwards;
}
.sitesearch.in input {
	animation-duration: 700ms;
    animation-name: expand;
}
.rightnav .sitesearch.in input {
	animation-name: menuExpand;
}
.sitesearch.in label {
	animation-duration: 700ms;
    animation-name: fadeIn;
}
.sitesearch.in .after {
	animation-duration: 500ms;
	animation-name: moveAfter;
}
.rightnav .sitesearch.in .after {
	animation-duration: 500ms;
	animation-name: menumoveAfter;
}

.sitesearch.in .after:before {
    animation-duration: 600ms;
	animation-name: beforemagic;
}
.sitesearch.in .after:after {
	animation-duration: 590ms;
    animation-name: aftermagic;
}
.sitesearch.in button[type="submit"] {
	animation-duration: 620ms;
	animation-name: fadeIn;
}

.sitesearch.close input,
.sitesearch.close label,
.sitesearch.close .after,
.sitesearch.close .after:before,
.sitesearch.close .after:after,
.sitesearch.close button[type="submit"] {
  animation-direction: reverse;
}

.sitesearch.close input {
	animation-duration: 700ms;
    animation-name: expand;
}
.sitesearch.close label {
	animation-duration: 700ms;
    animation-name: fadeIn;
}
.rightnav .sitesearch.close input {
	animation-name: menuExpand;
}
.sitesearch.close .after {
	animation-duration: 500ms;
	animation-name: moveAfter;
}
.rightnav .sitesearch.close .after {
	animation-duration: 500ms;
	animation-name: menumoveAfter;
}

.sitesearch.close .after:before {
	animation-duration: 600ms;
    animation-name: beforemagic;
}
.sitesearch.close .after:after {
	animation-duration: 590ms;
    animation-name: aftermagic;
}

.sitesearch.close button[type="submit"] {
	animation-duration: 620ms;
	animation-name: fadeIn;
}

/* Hold final focused state
 ****************************/
.sitesearch.open label {
    color: #3d455d;
	opacity: 1;
}
.rightnav .sitesearch.open label {
    color: #ffffff;
	opacity: 1;
}
.sitesearch.open input {
	position: relative;
	top: 1px;
    left: 0;
    height: 38px;
	width: 250px;
    color: #3d455d;
    background: #fff;
	border-radius: 30px;
	padding: 0px 0px 0px 10px;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.rightnav .sitesearch.open input {
	top: -9px;
	left: -220px;
}
.sitesearch.open .after {
	top: -19px;
    left: 5px;
    z-index: 3;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.rightnav .sitesearch.open .after {
	top: -30px;
	left: -215px;
    right: 0px;
}
.sitesearch.open .after:before {
	width: 13px;
    height: 2px;
    bottom: 4px;
    left: 0px;
    opacity: 1;
	position: absolute;
	transform: rotate(45deg);
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.sitesearch.open .after:after {
	width: 13px;
    height: 2px;
    top: 5px;
    left: 1px;
    background-color: #3d455d;
    position: absolute;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.rightnav .sitesearch.open .after:after {
	background-color: #ffffff;
}
.sitesearch.open button[type="submit"]{
    display: block;
    position: absolute;
    top: 12px;
    right: -217px;
    z-index: 5;
    border: none;
	opacity: 1;
    background: none;
}
.rightnav .sitesearch.open button[type="submit"] {
	top: 0px;
	right: 2px;
}

@keyframes fadeIn {
	0%   {
        opacity: 0;
    }
    100% {
		opacity: 1;
    }
}

@keyframes expand {
    0%   {
        background: #ffffff;
		width: 20px;
		height: 20px;
		top: -5px;
		border-radius: 10px;
		padding: 0px 0px 0px 0px;
    }
    100% {
		background: #ffffff;
        width: 250px;
		top: 1px;
        height: 38px;
		border-radius: 30px;
		padding: 0px 0px 0px 10px;
    }
}
@keyframes menuExpand {
    0%   {
        background: transparent;
		width: 20px;
		height: 20px;
		top: -5px;
		left: 0;
		border-radius: 10px;
		padding: 0px 0px 0px 0px;
    }
    100% {
		background: #ffffff;
        width: 250px;
		height: 38px;
		top: -9px;
		left: -220px;
		border-radius: 30px;
		padding: 0px 0px 0px 10px;
    }
}

@keyframes moveAfter {
    0%   {
		top: -5px;
		left: 5px;
		z-index: 3;
    }
    25% {
        top: -2px;
    }
    50% {
        top: 0px;
    }
    75% {
        top: 2px;
    }
    100% {
		top: -19px;
        left: 5px;
		z-index: 3;
    }
}
@keyframes menumoveAfter {
    0%   {
		top: -5px;
		left: 5;
		z-index: 3;
    }
	15% {
        top: -2px;
    }
    25% {
        top: 0px;
    }
    50% {
        top: -9px;
    }
    75% {
        top: -18px;
    }
    100% {
		top: -30px;
		left: -215px;
    }
}


@keyframes beforemagic {
    0% {
		width: 14px;
		height: 4px;
		bottom: 2px;
		left: -8px;
		opacity: 1;
		transform: rotate(-45deg);
	}
    30% {
		width: 29px;
		height: 4px;
		bottom: -6px;
		left: 12px;
		opacity: 1;
	}
    100% {
		width: 13px;
		height: 2px;
		bottom: 4px;
		left: 0px;
		opacity: 1;
		transform: rotate(45deg);
    }
}

@keyframes aftermagic {
    0%   {}
    10% {
		width: 14px;
        height: 4px;
		top: 2px;
		left: -8px;
        border-radius: 3px;
    }
    50% {
        width: 20px;
        top: 10px;
        right: 15px;
    }
    100% {
		width: 13px;
		height: 2px;
		top: 5px;
		left: 1px;
		border-radius: 3px;
    }
}

@keyframes menuAftermagic {
    0%   {}
    10% {
		width: 14px;
        height: 4px;
		top: 2px;
		left: -8px;
        border-radius: 3px;
    }
    50% {
        width: 20px;
        top: 10px;
        right: 15px;
    }
    100% {
		width: 13px;
		height: 2px;
		top: 5px;
		left: 1px;
		border-radius: 3px;
    }
}