STYLE

/* Search form
================================================== */
.boxsearch {
margin: 3px;
width: 180px;
height: 30px;
cursor: pointer;
}
.container-search {
width: 180px;
vertical-align: middle;
white-space: nowrap;
position: relative;
cursor: pointer;
border-color: #f2f2f2;
}
.container-search input#search{
width: 30px;
height: 30px;
background: rgba(42, 141, 156, 0.8);;
border: 0.5px;
border-color: #2A8D9C;
font-size: 12pt;
float: right;
color: #f2f2f2;
padding-right: 10px !important;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
color: #f9f9f9;
cursor: pointer;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
.container-search input#search::-webkit-input-placeholder {
color: #f9f9f9;
padding-left: 7px;
}
 .container-search input#search:-moz-placeholder { /* Firefox 18- */
color: #f9f9f9;
padding-left: 7px;
}
 .container-search input#search::-moz-placeholder {  /* Firefox 19+ */
color: #f9f9f9;
padding-left: 7px;
}
.container-search input#search:-ms-input-placeholder {
color: #f9f9f9;
padding-left: 7px;
}
.container-search .icon{
position: absolute;
top: 50%;
margin-left: 158.4px !important;
margin-top: -0.3px !important;
z-index: 1;
color: #f2f2f2;
}
.container-search input#search:focus, .container-search input#search:active {
outline:none;
width: 180px;
}
.container-search:hover input#search {
width: 180px;
}
.container-search:hover .icon {
color: #93a2ad;
}
.container-search button.icon{
-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border: 2px !important;
border-color: #2A8D9C;
background: #2A8D9C;
height: 30px;
width: 30px;
color: #f2f2f2;
opacity: 1;
font-size: 10pt;
position: absolute;
top: 50%;
margin-left: 150px !important;
margin-top: 0px !important;
cursor: pointer;
-webkit-transition: all .55s ease;
-moz-transition: all .55s ease;
-ms-transition: all .55s ease;
-o-transition: all .55s ease;
transition: all .55s ease;
}
.container-search:hover button.icon, .container-search:active button.icon, .container-search:focus button.icon{
outline: none;
opacity: 1;
}
input[type="search"] {
padding-left: 15px;
padding-right: 15px !important;
}
/* End of Search form
================================================== */