/*////////////////////////////////////////////////////////////////// [ FONT ]*/ @font-face { font-family: Poppins-Regular; src: url('../fonts/poppins/Poppins-Regular.ttf'); } @font-face { font-family: Poppins-Medium; src: url('../fonts/poppins/Poppins-Medium.ttf'); } @font-face { font-family: Poppins-Bold; src: url('../fonts/poppins/Poppins-Bold.ttf'); } /*////////////////////////////////////////////////////////////////// [ RESTYLE TAG ]*/ * { margin: 0px; padding: 0px; box-sizing: border-box; } body, html { height: 100%; font-family: Poppins-Regular, sans-serif; } /*---------------------------------------------*/ a { font-family: Poppins-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } a:focus { outline: none !important; } a:hover { text-decoration: none; color: #57b846; } /*---------------------------------------------*/ h1,h2,h3,h4,h5,h6 { margin: 0px; } p { font-family: Poppins-Regular; font-size: 14px; line-height: 1.7; color: #666666; margin: 0px; } ul, li { margin: 0px; list-style-type: none; } /*---------------------------------------------*/ input { outline: none; border: none; } textarea { outline: none; border: none; } textarea:focus, input:focus { border-color: transparent !important; } input::-webkit-input-placeholder { color: rgba(255,255,255,0.8);} input:-moz-placeholder { color: rgba(255,255,255,0.8);} input::-moz-placeholder { color: rgba(255,255,255,0.8);} input:-ms-input-placeholder { color: rgba(255,255,255,0.8);} textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.8);} textarea:-moz-placeholder { color: rgba(255,255,255,0.8);} textarea::-moz-placeholder { color: rgba(255,255,255,0.8);} textarea:-ms-input-placeholder { color: rgba(255,255,255,0.8);} /*---------------------------------------------*/ button { outline: none !important; border: none; background: transparent; } button:hover { cursor: pointer; } iframe { border: none !important; } .header_area{ background-color: gary; } /*////////////////////////////////////////////////////////////////// [ Contact 2 ]*/ .bg-contact3 { width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .container-contact3 { width: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; background: rgba(255,255,255,0); } .wrap-contact3 { width: 900px; background: #adc7e4; background: -webkit-linear-gradient(45deg, #343a40, #343a40); background: -o-linear-gradient(45deg, #343a40, #343a40); background: -moz-linear-gradient(45deg, #343a40, #343a40); background: linear-gradient(45deg, #343a40, #343a40); border-radius: 10px; overflow: hidden; padding: 72px 55px 65px 55px; } /*------------------------------------------------------------------ [ ]*/ .contact3-form { width: 100%; } .contact3-form-title { display: block; font-family: Poppins-Bold; font-size: 39px; color: #fff; line-height: 1.2; text-align: center; text-transform: uppercase; padding-bottom: 70px; } /*------------------------------------------------------------------ [ ]*/ .wrap-input3 { width: 70%; position: relative; display: flex; border-bottom: 2px solid rgba(255,255,255,0.24); margin-bottom: 27px; margin-left: 100px; } .input3 { display: block; width: 100%; background: transparent; font-family: Poppins-Regular; font-size: 18px; color: #fff; line-height: 1.2; } .focus-input3 { position: absolute; display: inline-block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input3::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #fff; } /*---------------------------------------------*/ input.input3 { height: 20px; } textarea.input3 { min-height: 115px; padding-top: 13px; padding-bottom: 13px; } .input3:focus + .focus-input3::before { width: 100%; } .has-val.input3 + .focus-input3::before { width: 100%; } /*------------------------------------------------------------------ [ ]*/ .container-contact3-form-btn { padding-top: 23px; margin-left: 70px; } .contact3-form-btn { font-family: Poppins-Medium; font-size: 16px; color: #555555; line-height: 1.2; text-transform: uppercase; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: inline-block; justify-content: center; align-items: center; padding: 0 50px; min-width: 120px; margin-left: 10%; height: 50px; border-radius: 2px; position: relative; z-index: 1; background: #fff; background: -webkit-linear-gradient(45deg, #f89d13, #f89d13); background: -o-linear-gradient(45deg, #f89d13, #f89d13); background: -moz-linear-gradient(45deg, #56ab2f, #a8e063); background: linear-gradient(45deg, #f89d13, #f89d13); -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .contact3-form-btn::before{ content: ""; display: block; position: absolute; z-index: -1; border-radius: 2px; width: 100%; height: 100%; top: 0; left: 0; background: #fff; opacity: 1; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .contact3-form-btn:hover { color: #fff; } .contact3-form-btn:hover:before { opacity: 0; } /*------------------------------------------------------------------ [ Responsive ]*/ @media (max-width: 576px) { .wrap-contact3 { padding: 72px 15px 65px 15px; } } /*------------------------------------------------------------------ [ Alert validate ]*/ .validate-input { position: relative; } .alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 2px; padding: 4px 25px 4px 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0px; pointer-events: none; font-family: Poppins-Regular; color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .alert-validate::after { content: "\f12a"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 16px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 8px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } /*------------------------------------------------------------------ [ Alert info ]*/ .show-info::before { content: attr(info-bulle); position: relative; max-width: 70%; margin-left: 270px; background-color: #fff; border: 1px solid #f89d13; border-radius: 2px; padding: 4px 25px 4px 40px; top: 40px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 8px; pointer-events: none; font-family: Poppins-Regular; color: #f89d13; font-size: 18px; line-height: 1; text-align: left; visibility: hidden; opacity: 0; display: block; -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .show-info::after { content: "\f05a"; font-family: FontAwesome; display: block; position: relative; margin-left: 270px; /*margin-top: -23px;*/ color: #f89d13; font-size: 20px; bottom: 24px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /*right: 10px;*/ } .show-info:hover:before { visibility: visible; opacity: 1; } /*@media (max-width: 992px) { .alert-info::before { visibility: visible; opacity: 1; }*/ } /*================================================================== [ Restyle Radio ]*/ .wrap-contact3-form-radio { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; padding-bottom: 37px; } .input-radio3 { display: none; } .label-radio3 { display: block; position: relative; padding-left: 28px; cursor: pointer; font-family: Poppins-Medium; font-size: 20px; color: #fff; line-height: 1.2; } .label-title { display: block; position: relative; padding-left: 0px; font-family: Poppins-Medium; font-size: 30px; color: #fff; line-height: 1.2; text-align: center; } .label-parameters { display: inline-block; position: relative; cursor: pointer; font-family: Poppins-Medium; font-size: 20px; color: #fff; line-height: 1.2; margin-right: 50px; } .label-parameters2 { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; color: #fff; line-height: 1.2; font-family: Poppins-Medium; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .label-parameters2 input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; margin-bottom: 12px; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .checks{ line-height: 1; margin-left: 50px; display: inline-block; } /* On mouse-over, add a grey background color */ .label-parameters2:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ .label-parameters2 input:checked ~ .checkmark { background-color: #f89d13; } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .label-parameters2 input:checked ~ .checkmark:after { display: block; } /* Style the checkmark/indicator */ .label-parameters2 .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .label-radio3::before { content: ""; display: block; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.1); left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .label-radio3::after { content: ""; display: block; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 6px solid transparent; background: rgba(255,255,255,0.5); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: none; } .input-radio3:checked + .label-radio3::after { display: block; } /*================================================================== [ Input3 select ]*/ .input3-select { display: inline-block; } /*////////////////////////////////////////////////////////////////// [ Restyle Select2 ]*/ .select2-container { display: block; max-width: 100% !important; width: auto !important; } .select2-container .select2-selection--single { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; background-color: transparent; border: none; height: 45px; outline: none; position: relative; } /* in select */ .select2-container .select2-selection--single .select2-selection__rendered { font-family: Poppins-Regular; font-size: 15px; color: #fff; line-height: 1.2; padding-left: 5px ; background-color: transparent; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 50%; transform: translateY(-50%); right: 10px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; justify-content: center; } .select2-selection__arrow b { display: none; } .select2-selection__arrow::before { content: ''; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid #e6e6e6; margin-bottom: 2px; } .select2-selection__arrow::after { content: ''; display: block; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #e6e6e6; } /* dropdown option */ .select2-container--open .select2-dropdown { z-index: 1251; border: 1px solid #fff; border-radius: 0px; background-color: white; } .select2-container .select2-results__option[aria-selected] { padding-top: 10px; padding-bottom: 10px; } .select2-container .select2-results__option[aria-selected="true"] { background: #f89d13; background: -webkit-linear-gradient(45deg, #f89d13, #f89d13); background: -o-linear-gradient(45deg, #f89d13, #f89d13); background: -moz-linear-gradient(45deg, #56ab2f, #a8e063); background: linear-gradient(45deg, #f89d13, #f89d13); color: white; } .select2-container .select2-results__option--highlighted[aria-selected] { background: #f89d13; background: -webkit-linear-gradient(45deg, #f89d13, #f89d13); background: -o-linear-gradient(45deg, #f89d13, #f89d13); background: -moz-linear-gradient(45deg, #56ab2f, #a8e063); background: linear-gradient(45deg, #f89d13, #f89d13); color: white; } .select2-results__options { font-family: Poppins-Regular; font-size: 15px; color: #555555; line-height: 1.2; } .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: none; font-family: Poppins-Regular; font-size: 15px; color: #555555; line-height: 1.2; } /*added*/ .label-ligne{ display: flex; }