input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
     display: none;
}
 select, input[type="search"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -ms-appearance: none;
     -o-appearance: none;
     appearance: none;
     border: none;
}
 input[type="search"] {
     border-radius: 0;
     margin-top: 0;
}
 select {
     background-color: transparent;
     cursor: pointer;
}
 .cd-text-replace {
    /* replace text with image */
     color: transparent;
     text-indent: 100%;
     overflow: hidden;
     white-space: nowrap;
}


 @media only screen and (min-width: 320px) {
     #cssmenu ul li .cd-search-trigger {
         display: block;
         position: relative;
         z-index: 3;
         height: 22px;
         width: 40px;
         margin: 1.25em .5em;
         float: right;
         -webkit-transition: -webkit-transform 0.3s;
         -moz-transition: -moz-transform 0.3s;
         transition: transform 0.3s;
         padding: 0 0 0 0;
         margin: 0 0 0 0;
         top: 6px;
    }
     .cd-search-trigger::after, .cd-search-trigger:before {
        /* used to create the icon lens and the background circle */
         content: '';
         position: absolute;
    }
     .cd-search-trigger::after {
        /* icon lens */
         left: 50%;
         top: 50%;
         bottom: auto;
         right: auto;
         -webkit-transform: translateX(-50%) translateY(-50%);
         -moz-transform: translateX(-50%) translateY(-50%);
         -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
         height: 21px;
         width: 22px;
         background: url(../images/search.png) no-repeat;
         background-size:18px auto;
    }
     .cd-search-trigger::before {
        /* background circle */
         left: 50%;
         top: 50%;
         -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
         -moz-transform: translateX(-50%) translateY(-50%) scale(0);
         -ms-transform: translateX(-50%) translateY(-50%) scale(0);
         -o-transform: translateX(-50%) translateY(-50%) scale(0);
         transform: translateX(-50%) translateY(-50%) scale(0);
         height: 100%;
         width: 100%;
         background-color: #dd85ac;
         border-radius: 50%;
         -webkit-transition: -webkit-transform 0.3s;
         -moz-transition: -moz-transform 0.3s;
         transition: transform 0.3s;
    }
     .no-touch .cd-search-trigger:hover::before {
         background-color: #df8bb0;
    }
     .cd-main-search {
         position: absolute;
         z-index: 9;
         top: 95px;
         left: 0;
         right:0;
         margin:0 auto;
         height: 48px;
         width: 80%;
         background: #14151c;
         opacity: 0;
         visibility: hidden;
         -webkit-transition: opacity 0.3s, visibility 0.3s;
         -moz-transition: opacity 0.3s, visibility 0.3s;
         transition: opacity 0.3s, visibility 0.3s;
    }
     .cd-main-search form {
         position: relative;
         height: 100%;
        /* 170px (margin left) is the sum of the logo width (124px) and additional 46px margin (to separate the form form the logo) */
        /* 116px (margin right) takes into account the space occupied by the a.cd-search-trigger and a.close */
         margin: 0 calc(5% + 60px) 0 calc(5% + 40px);
    }
     .cd-main-search input[type="search"] {
         font-size: 16px;
         color:#fff;
         width:100%;
         height: 100%;
         background-color: transparent;
        /* don't overlap <select> element */
        /*padding-right: 170px;
        */
    }
     .cd-main-search .cd-select {
         display: inline-block;
         position: absolute;
         right: 0;
         top: 50%;
         bottom: auto;
         -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
         transform: translateY(-50%);
         color: #5c5d6a;
         font-size: 1.4rem;
         overflow: hidden;
    }
     .cd-main-search span {
         display: inline-block;
    }
     .cd-main-search option {
        /* style <option> elements on Firefox */
         color: #333545;
         background-color: #ffffff;
    }
     .cd-main-search select {
        /* the <select> element is not visible (if the list of options is not open) - it is covered by the .selected-value element */
         position: absolute;
         right: 0;
         top: 50%;
         bottom: auto;
         -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
         transform: translateY(-50%);
         opacity: 0;
         color: transparent;
    }
     .cd-main-search select:focus {
         outline: none;
    }
     .cd-main-search select:focus + span.selected-value {
         background-color: #3d3f4e;
    }
     .cd-main-search .selected-value {
        /* this <span> element covers the <select> element - its content is changed (using JavaScript) and set equal to the selected <option> value */
        /* its width automatically changes according to the text of the selected <option> (not possible with a <select> element) */
         color: #ffffff;
        /* clicking on this element will open the <select> drop-down list */
         pointer-events: none;
         -webkit-transition: background-color 0.3s;
         -moz-transition: background-color 0.3s;
         transition: background-color 0.3s;
    }
     .cd-main-search select, .cd-main-search .selected-value {
         padding: 0.5em 1.7em 0.5em .3em;
         font-size: 1.4rem;
         border-radius: 3px;
    }
     .no-pointerevents .cd-main-search .selected-value {
        /* if the browser doesn't support the pointer-events property, hide the .selected-value element */
         display: none;
    }
     .no-pointerevents .cd-main-search select {
        /* if the browser doesn't support the pointer-events property, show the <select> element */
         position: relative;
         color: #ffffff;
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
         transform: translateY(0);
    }
     .no-pointerevents .cd-main-search select:focus {
         background-color: #3d3f4e;
    }
     .cd-main-search .close {
        /* 'X' icon - used to close the search form */
         display: inline-block;
         position: absolute;
         right: 5%;
         top: 50%;
         height: 40px;
         width: 40px;
         -webkit-transform: translateY(-50%) scale(0);
         -moz-transform: translateY(-50%) scale(0);
         -ms-transform: translateY(-50%) scale(0);
         -o-transform: translateY(-50%) scale(0);
         transform: translateY(-50%) scale(0);
         -webkit-transition: -webkit-transform 0.3s;
         -moz-transition: -moz-transform 0.3s;
         transition: transform 0.3s;
    }
     .cd-main-search .close::before, .cd-main-search .close::after {
        /* used to create the 'X' icon in css */
         content: '';
         position: absolute;
         height: 20px;
         width: 2px;
         background-color: #ffffff;
         left: 50%;
         top: 50%;
    }
     .cd-main-search .close::before {
         -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
         -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
         -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
         -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
         transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    }
     .cd-main-search .close::after {
         -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
         -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
         -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
         -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
         transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }
     .cd-main-search.is-visible {
        /* search form open */
         opacity: 1;
         visibility: visible;
    }
     .cd-main-search.is-visible .close {
         -webkit-transform: translateY(-50%) scale(1);
         -moz-transform: translateY(-50%) scale(1);
         -ms-transform: translateY(-50%) scale(1);
         -o-transform: translateY(-50%) scale(1);
         transform: translateY(-50%) scale(1);
    }
     .animate-search .cd-main-search.is-visible {
        /* trigger search form animation if <header> has the .animate-search class */
         -webkit-animation: cd-slide-in 0.3s;
         -moz-animation: cd-slide-in 0.3s;
         animation: cd-slide-in 0.3s;
    }
}


@media (min-width: 320px) and (max-width: 767px) {
	.cd-main-search {
		top: 80px;
		height: 40px;
	}
	.cd-main-search form {
		margin: 0 calc(5% + 40px) 0 calc(5% + 10px);
	}
	.cd-main-search input[type="search"] {
		font-size: 14px;
	}
}