@import url(http://fonts.googleapis.com/css?family=Coming+Soon);





#example { display:block; height:100px; margin-bottom:30px; }



#example1, #example2 {

  display:inline-block;

  vertical-align:top;

   height:100px;

   width:500px;

    padding-top:20px;





     }







.arrow, .arrow2 { position:absolute; margin:3em 15em; font-family:tahoma; font-size:12px; color:#3f3f3f; }

.arrow2 { margin-left:26em; }

.arrow img, .arrow2 img { vertical-align: middle; }

.wrapper-simple {

	position:relative; text-align:center; margin:0 auto; display:block;

	width:60px; height:45px; padding:10px 5px;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));

	background-image: -webkit-linear-gradient(top, #f5fafe, #e2edf4);

	background-image:    -moz-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:     -ms-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:      -o-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:         linear-gradient(to bottom, #f5fafe, #e2edf4);

	border-radius:5px;

	box-shadow:inset rgba(255, 254, 255, 1) 0 0.1em 2px, #9bb6c9 0 1px 2px;

}

.wrapper1, .wrapper2 {

	display:block; width:300px; margin:0 auto;

	-webkit-perspective:1200px; -moz-perspective:1200px;

	-ms-perspective:1200px; perspective:1200px;

}

.wrapper-simple input[type=submit] {

	position:relative; vertical-align:top; margin-top:0; z-index:2;

	height:43px; font-family:tahoma; min-width:55px; max-width:55px; cursor:pointer;

	border-radius:3px; border:1px solid #aa7818;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));

	background-image: -webkit-linear-gradient(top, #ffb700, #ff8c00);

	background-image:    -moz-linear-gradient(top, #ffb700, #ff8c00);

   background-image:     -ms-linear-gradient(top, #ffb700, #ff8c00);

   background-image:      -o-linear-gradient(top, #ffb700, #ff8c00);

   background-image:         linear-gradient(to bottom, #ffb700, #ff8c00);

	box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;

}

.wrapper-simple input[type=submit]:active { box-shadow: inset rgba(0,0,0,.4) 0 1px 1px; }

.wrapper-simple img { position:absolute; top:1.5em; left:1.6em; z-index:4; pointer-events:none; }

.search-button1, .search-button2 {

	position:absolute; display:block; width:50px; height:30px;

	border: 1px solid #aa7818;

	border-bottom: 1px solid rgba(255,255,255,0.2);

	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));

	background-image: -webkit-linear-gradient(top, #ffb700, #ff8c00);

	background-image:    -moz-linear-gradient(top, #ffb700, #ff8c00);

   background-image:     -ms-linear-gradient(top, #ffb700, #ff8c00);

   background-image:      -o-linear-gradient(top, #ffb700, #ff8c00);

   background-image:         linear-gradient(to bottom, #ffb700, #ff8c00);

	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #8e620e 0 0.5em 0, rgba(0, 0, 0, 0.2) 0 0.9em 3px;

	padding:10px 6px; border-radius:5px; cursor:pointer; z-index:1;

	-webkit-transform:translateZ(45px); -moz-transform:translateZ(45px); -ms-transform:translateZ(45px);

	transform:  translateZ(45px);

}

.search-button1 { width:300px; }

.search-button1 span, .search-button2 span {

 display:block; margin:0 auto; width:30px; height:30px;

 background:#643904; border-radius:30px;

 box-shadow:rgba(255,255,255,.3) 0 1px 0px;

}

.search-button1 span img, .search-button2 span img { vertical-align:middle; padding-top:7px; }

.search-button1:hover, .search-button2:hover, .wrapper-simple input[type=submit]:hover {

		background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));

		background-image: -webkit-linear-gradient(top, #ffcb48, #ff9c23);

		background-image:    -moz-linear-gradient(top, #ffcb48, #ff9c23);

   	background-image:     -ms-linear-gradient(top, #ffcb48, #ff9c23);

   	background-image:      -o-linear-gradient(top, #ffcb48, #ff9c23);

   	background-image:         linear-gradient(to bottom, #ffcb48, #ff9c23);

}

.search-button1:active, .search-button2:active {

		margin-top: 0.2em; box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #8e620e 0 0.3em 0, rgba(0, 0, 0, 0.2) 0 0.5em 3px;

}

.search-box1, .search-box2 {

	margin-top:-.6em; display:none; position:absolute;

	width:300px; height:50px; padding:10px 6px;

	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));

	background-image: -webkit-linear-gradient(top, #f5fafe, #e2edf4);

	background-image:    -moz-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:     -ms-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:      -o-linear-gradient(top, #f5fafe, #e2edf4);

   background-image:         linear-gradient(to bottom, #f5fafe, #e2edf4);

	border: 1px solid #9bb6c9; border-bottom: 1px solid rgba(255,255,255,0.2); border-radius: 5px;

	box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em, #899faf 0 .5em 0px, rgba(0, 0, 0, 0.2) 0 .9em 3px;

	-webkit-transform:	rotate3d(1,0,0,90deg) translateZ(20px);

	-moz-transform:	rotate3d(1,0,0,90deg) translateZ(20px);

	-ms-transform:	rotate3d(1,0,0,90deg) translateZ(20px);

	transform:	rotate3d(1,0,0,90deg) translateZ(20px);

}

.search-box1 input, .search-box2 input, .wrapper-simple input[type=text] {

		font:14 tahoma; font-weight:bold; color:#1a3d51; text-align:right;

		padding:10px 10px 15px 10px; width:250px; border:0;

		text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px; box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;

		background: #d8e6ef; border-radius:2px;

}

.search-box1 input:focus, .search-box2 input:focus, .wrapper-simple input[type=text]:focus { outline:none; }

input::-webkit-input-placeholder {

			font-family:tahoma; font-weight:bold; color:#1a3d51;

			text-shadow:rgba(255, 255, 255, 0.7) 1px 1px 1px;

}

input:-moz-placeholder {

			font-family:tahoma; font-weight:bold; color:#1a3d51;

			text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;

}

.wrapper-simple input[type=text] {

 position:absolute; width:1px; z-index:2;

 padding-right:2em; margin-right:.2em; margin-top:0;

}

.search-box1 img, .search-box2 img {

		position:absolute; margin:.6em 0 0 -19em; cursor:pointer; opacity:.5;

		-webkit-transition:0.5s linear; -moz-transition:0.5s linear;

		-ms-transition:0.5s linear; -o-transition:0.5s linear; transition:0.5s linear;

}

.search-box1 img:hover, .search-box2 img:hover { opacity: 1; }

.hide-search-button { display: none; }

.show-search-button { display: block; }

.show-search-box { display: block; }

.showed-search-box { display: block;

	-webkit-transform: rotate3d(1,0,0,0deg); -moz-transform: rotate3d(1,0,0,0deg);

	-ms-transform: rotate3d(1,0,0,0deg); transform: rotate3d(1,0,0,0deg);

}

.hidden-search-box {

	-webkit-transform:	rotate3d(1,0,0,90deg) translateZ(25px); -moz-transform:	rotate3d(1,0,0,90deg) translateZ(25px);

	-ms-transform:	rotate3d(1,0,0,90deg) translateZ(25px); transform:	rotate3d(1,0,0,90deg) translateZ(25px);

}

.switch-show { height: 50px;

	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d; transform-style: preserve-3d;

	-webkit-animation: showBox 0.5s ease-in-out; -moz-animation: showBox 0.5s ease-in-out; -ms-animation: showBox 0.5s ease-in-out;

}

.switch-hide { height: 50px;

	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d; transform-style: preserve-3d;

	-webkit-animation: hideBox 0.5s ease-in-out; -moz-animation: hideBox 0.5s ease-in-out; -ms-animation: hideBox 0.5s ease-in-out;

}

.switch-show { height: 50px;

	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d; transform-style: preserve-3d;

	-webkit-animation: showBox 0.5s ease-in-out; -moz-animation: showBox 0.5s ease-in-out; -ms-animation: showBox 0.5s ease-in-out;

}

.switch-hide { height: 50px;

	-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d; transform-style: preserve-3d;

	-webkit-animation: hideBox 0.5s ease-in-out; -moz-animation: hideBox 0.5s ease-in-out; -ms-animation: hideBox 0.5s ease-in-out;

}

@-webkit-keyframes showBox{

	0% { -webkit-transform: rotate3d(1,0,0,0); }

	100% { -webkit-transform: rotate3d(1,0,0,-90deg); }

}

@-moz-keyframes showBox{

	0% { -moz-transform: rotate3d(1,0,0,0); }

	100% { -moz-transform: rotate3d(1,0,0,-90deg); }

}

@-ms-keyframes showBox{

	0% { -ms-transform: rotate3d(1,0,0,0); }

	100% { -ms-transform: rotate3d(1,0,0,-90deg); }

}

@-webkit-keyframes hideBox{

	0% { -webkit-transform: rotate3d(1,0,0,-90deg); }

	100% { -webkit-transform: rotate3d(1,0,0,0); }

}

@-moz-keyframes hideBox{

	0% { -moz-transform: rotate3d(1,0,0,-90deg); }

	100% { -moz-transform: rotate3d(1,0,0,0); }

}

@-ms-keyframes hideBox{

	0% { -ms-transform: rotate3d(1,0,0,-90deg); }

	100% { -ms-transform: rotate3d(1,0,0,0); }

}