@import "mixin";
.content-search{
			position: fixed;
			top: 0;
			left: 0;
			visibility: hidden;
			opacity: 0;
			width: 100%;
			height: 100%;
			background: #fff;
    		-webkit-transition: all 0.3s ease 0s;
    		transition: all 0.3s ease 0s;
    		padding-top: 140px;
    		padding-bottom: 130px;
    		display: inline-block;
    		z-index: 9999;
    		.container-100{
    			padding-right: 100px;
    			padding-left: 100px;
    			width: 100%;
    			.fa-times-circle{
    				cursor: pointer;
    				position: absolute;
    				top: 30px;
    				right: 100px;
    				font-size: 50px;
    				color: #ddd;
    				-webkit-transition: all 0.3s ease 0s;
    				transition: all 0.3s ease 0s;
    				&:hover{color:black;}
    			}
    			h3{
    				padding-bottom: 232px;
    				@include font-face(Poppins,50px,bold);
    				line-height: 70px;
    				max-width: 400px;
    				margin: 0 auto;
    				text-transform: uppercase;
    			}
    			form{
    				max-width: 850px;
   					 margin: 0 auto;
    				input{
    					@include input-defaut;
    					border-bottom: 1px solid #ddd;
    					@include font-face(Poppins,30px,400);
    					&::-webkit-input-placeholder{@include font-face(Poppins,30px,400); color: #ddd;}

    				}
    				.button_search{
    					@include btn-shopnow;
   						 text-transform: uppercase;
   						 width: 130px;
   						 height: 45px;
   						 padding: 0;
   						 position: absolute;
   						 top: -12px;
   						 right: 0;
   						 
    				}
    			}
    		}
		}
@media (max-width: 812px) and (max-height: 414px){
    .content-search{
            padding-top: 30px;
            padding-bottom: 30px;
            .container-100{
                h3{
                        padding-bottom: 85px;
                }
            }
        }
}
@media (max-width: 568px) and (max-height: 320px){
    .content-search{
            padding-top: 30px;
            padding-bottom: 30px;
            .container-100{
                .fa-times-circle{
                    right: 30px;
                }
                h3{
                    padding-bottom: 36px;
                    line-height: 45px;
                }
            }
        }
}
@media (max-width: 567px){
    .content-search{
            padding-top: 66px;
            .container-100{
                .fa-times-circle{
                    right: 30px;
                }
                h3{
                    padding-bottom: 70px;
                }
                form{
                    input{
                        &::-webkit-input-placeholder{font-size:20px;}
                    }
                    .button_search{
                        top: 50px;
                        right: 45px;
                    }
                }
            }
        }
}
@media (max-width: 320px){
    .content-search{
            .container-100{
                h3{
                    font-size: 40px;line-height: 55px;
                }
                form{
                    input{
                        &::-webkit-input-placeholder{font-size:14px;}
                    }
                    .button_search{
                        
                        right: 0;
                    }
                }
            }
        }
}