@charset "utf-8";

#feedback{margin: 0 auto;}
#feedback .title{text-align: center; margin: 100px auto;}
#feedback .title>h3{font-size: 5rem; color: #333;}
#feedback .title>h4{font-size: 2rem; font-weight: normal; color: #999; text-transform: uppercase;}

#feedback>.display{ position: relative;z-index: 50; margin: 0 auto; padding-bottom: 100px;}
#feedback>.display .form{ margin: 0 auto;}
#feedback>.display .form .row>[class*="col-"] {padding-right: 20px;}
#feedback>.display .form .row>.group{display: block; float: left; margin-bottom: 20px;}
#feedback>.display .form .row>.group input{ display:inline-block; box-sizing:border-box; width:100%;height:auto; line-height: 3.2rem; padding:13px 20px;-webkit-appearance:none;font-family: 'Poppins', sans-serif; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left; transition: all .35s;}
#feedback>.display .form .row>.group input::-webkit-input-placeholder{ color:#999;}
#feedback>.display .form .row>.group textarea{ display:block;box-sizing:border-box; width:100%;height:auto;padding:13px 20px;-webkit-appearance:none; font-family: 'Poppins', sans-serif; line-height:3.2rem; border:1px solid #ddd; border-radius: 3px; color:#666;text-align:left;transition: all .35s;}
#feedback>.display .form .row>.group textarea::-webkit-input-placeholder{ color:#999;}
#feedback>.display .form .row>.group input:hover, #feedback>.display .form .row>.group textarea:hover{border-color: #ccc;}
#feedback>.display .form .row>.col-3{width: 30%; flex: 0 0 30%;}
#feedback>.display .form .row>.col-5{width: 50%; flex: 0 0 50%;}
#feedback>.display .form .row>.col-10{width: 100%; flex: 0 0 100%;}
#feedback>.display .form #checkimg{display:inline-block; position:absolute;z-index:3; top:50%; right:10px; margin-top:-13px; cursor:pointer;}
#feedback>.display .form .row>.button{text-align: center; padding-top: 20px;}
#feedback>.display .form .row>.button .submit{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; font-weight: bold; background: #04b8ef;padding:10px 50px; font-size: 2rem; color:#fff;  cursor:pointer; transition: all .35s;}
#feedback>.display .form .row>.button .submit:hover{background: #333;}
#feedback>.display .form .row>.button .reset{display:inline-block!important; box-sizing:border-box; border: 0!important; text-align: center; font-weight: bold; background: #666;padding:10px 50px; font-size: 2rem; color:#fff;  cursor:pointer; transition: all .35s;}
#feedback>.display .form .row>.button .reset:hover{background: #333;}

@media (max-width:1280px){


    #feedback .title>h3{font-size: 3.6rem;}





}


@media (max-width:860px){



    #feedback>.tit {font-size: 2.8rem; padding-bottom: 10px;}
    #feedback>.tit:after{width: 40px;}
}

@media (max-width:780px){


    #feedback>.display .form .row>[class*="col-"] {padding-right: 0;}
    #feedback>.display .form .row>.col-3{width: 100%; flex: 0 0 100%;}
    #feedback>.display .form .row>.col-5{width: 100%; flex: 0 0 100%;}
    #feedback>.display .form .row>.col-10{width: 100%; flex: 0 0 100%;}
    #feedback>.display .form .row>.button .submit{width: 100%; font-weight: normal;}
    #feedback>.display .form .row>.button .reset{width: 100%; font-weight: normal;margin-top: 10px;}
}



@media (max-width:640px){

    #feedback .title>h3{font-size: 2.8rem;}
    #feedback .title>h4{font-size: 1.6rem;}

    #feedback .title{margin: 30px auto;}




}