/*
===================================================================

	Copyright (C) 2015 Schweizerpunkt - Aliu Media
	All rights reserved.

	Redistribution, modification and personal use of this software 
	and its source code is prohibited and protected by law.
	
===================================================================
*/
	
.csearchbox_container {
	font-family: "MainFont", sans-serif;
}
.csearchbox_container * {
	/*text-shadow: 0px 0px 5px rgba(0,0,0,0.6);*/
}
::-webkit-input-placeholder{color: #f1f1f1;font-size: 30px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
:-moz-placeholder { /* Firefox 18- */
   color: #f1f1f1;font-size: 30px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */
   color: #f1f1f1;font-size: 30px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}

:-ms-input-placeholder {  
   color: #f1f1f1;font-size: 30px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
@media all and (min-width: 641px) {
	.csearchbox_container {
		width: 			35%;
		height:			60px;
		display:		inline-block;
	}
	.ctextbox_search {
		width:			calc(100% - 0px);
		width:			-webkit-calc(100% - 0px);
		width:			-ms-calc(100% - 0px);
		width:			-o-calc(100% - 0px);
		width:			-moz-calc(100% - 0px);
		height:			40px;
		font-size:		30px;
		border-bottom: 	8px solid rgba(77, 77, 77, 0.5);
		padding-right: 35px !important;
		-webkit-transition: width 0.4s ease-in-out;
    	transition: width 0.4s ease-in-out;
	}
	.cbtn_search_go {
	    float: right;
	    margin-top: 15px;
	}
}
@media all and (min-width: 321px) and (max-width: 640px) {
	.csearchbox_container {
		width: 			70%;
		height:			50px;
	}
	.ctextbox_search {
		width:			calc(100% - 40px);
		width:			-webkit-calc(100% - 40px);
		width:			-ms-calc(100% - 40px);
		width:			-o-calc(100% - 40px);
		width:			-moz-calc(100% - 40px);
		height:			100%;
		font-size:		26px;
		border-bottom: 	8px solid rgba(77, 77, 77, 0.5);
	}
	.cbtn_search_go {
		width:			40px;
		height:			40px;
		float:			right;
	}
}
@media all and (max-width: 320px) {
	.csearchbox_container {
		width: 			100%;
		height:			50px;
	}
	.ctextbox_search {
		width:			100%;
		height:			100%;
		font-size:		26px;
		border-bottom: 	8px solid rgba(77, 77, 77, 0.5);
	}
	.cbtn_search_go {
		position:		relative;
		/*left:			50%;*/
		top:			60px;
		transform:			translateX(-50%);
		-moz-transform: 	translateX(-50%);
		-ms-transform: 		translateX(-50%);
		-o-transform: 		translateX(-50%);
		-webkit-transform: 	translateX(-50%);
		width:			40px;
		height:			40px;
		padding:		4px;
	}
}

/*
@media all and (max-width: 320px) {
	.csearchbox_container {
		width: 			100%;
		top:			calc(100% - 50px) !important;
		top: 			-webkit-calc(100% - 50px) !important;
		top: 			-ms-calc(100% - 50px) !important;
		top: 			-o-calc(100% - 50px) !important;
		top: 			-moz-calc(100% - 50px) !important;
		background:		#222;
		height:			100px;
		padding:		5px;
		box-sizing:		border-box;
		box-shadow:		0 -4 4 4 #000;
		border-bottom: 3px solid rgba(77, 77, 77, 0.5);
	}
	.ctextbox_search {
		width:			100%;
		height:			35px;
		font-size:		25px;
		padding-top:	5px;
		padding-bottom:	5px;
	}
	.cbtn_search_go {
		position:		relative;
		left:			50%;
		top:			40px;
		transform:			translateX(-50%);
		-moz-transform: 	translateX(-50%);
		-ms-transform: 		translateX(-50%);
		-o-transform: 		translateX(-50%);
		-webkit-transform: 	translateX(-50%);
		width:			40px;
		height:			40px;
		padding:		4px;
	}
}*/
	
/*#searchbox_container {
	position: 		absolute;
	left: 			50%;
	top: 			40%;
	transform:			translate(-50%, -50%);
	-moz-transform: 	translate(-50%, -50%);
	-ms-transform: 		translate(-50%, -50%);
	-o-transform: 		translate(-50%, -50%);
	-webkit-transform: 	translate(-50%, -50%);
	z-index:		21;		
	-ms-filter: 	"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter:			alpha(opacity=85);
	-moz-opacity: 	0.85;
	-khtml-opacity: 0.85;
	opacity: 		0.85;
}*/
#searchbox_container .magnifier {
	height: 100%;
	width: auto;
	font-size: 50px;
	color: #fff;
}
#textbox_search {
    position: fixed;
    top: 0px;
    left: 0;
    background: rgba(0,0,0,0);
    color: #fff;
    box-sizing: border-box;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #fff;
    padding: 0;
    margin: 0;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}
#btn_search_go {		
	cursor: pointer;
}
/*Changes*/
div#searchbox_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    transform: translate(0,0);
    background: rgba(0, 0, 0, 0.7);
    opacity: 1;
}
#searchbox_container .magnifier {
    height: 100%;
    width: auto;
    font-size: 30px;
    color: #fff;
    filter: invert(85%) !important;
}
div#searchbox_container input {
    position: absolute;
    top: 50%;
    width: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    border-bottom: 2px solid #a6a6a6;
    filter: invert(0%) !important;
    font-family: "RobotoLight";
}	
/*div#btn_search_go {
    position: absolute;
    top: 44%;
    right: 25%;
    transform: translate(0, 0);
}*/
div#btn_search_go {
    position: absolute;
    top: 51%;
    right: 35%;
    margin-top: -25px;
}
input#textbox_search {
    padding-right: 40px;
}
@media (max-width: 991px){
	div#searchbox_container input {
	    width: 50%;
	    left: 50%;
	}
	div#btn_search_go {
	    right: 25%;
	}
	.ctextbox_search{
		font-size: 20px;
	}
	::-webkit-input-placeholder{color: #f1f1f1;font-size: 26px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
	:-moz-placeholder { 
	   color: #f1f1f1;font-size: 26px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
	::-moz-placeholder { 
	   color: #f1f1f1;font-size: 26px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
	:-ms-input-placeholder {  
	   color: #f1f1f1;font-size: 26px;letter-spacing: 0.5px;font-family: "RobotoLight", sans-serif;}
	}
@media(max-width: 767px){
	div#searchbox_container input {
    	width: 50%;
	}
	input#textbox_search {
	    height: 40px !important;
	}

}
@media(max-width: 640px){
	div#searchbox_container input {
	    width: 80%;
	}
	div#btn_search_go {
    	right: 9%;
    	top: 50%;
	}
}
@media(max-width: 320px){
	div#btn_search_go {
    	right: 5%;
	}
}