.container { max-width: 1200px; } .wrap-input100 { width: 500px; max-width: 100%; position: relative; background-color: transparent; height: 60px; padding-right: 80px; background-color: rgba(255, 255, 255, 0.1); } .input100 { display: block; width: 100%; height: 100%; padding: 0 15px 0 25px; background-color: rgba(255, 255, 255, 0.0); } .input100:focus { background-color: rgba(255, 255, 255, 0.12); } .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: 0px; 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: 82px; pointer-events: none; font-family: 'Poppins', sans-serif; font-weight: 500; color: #c80000; font-size: 14px; 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: "\f071"; font-family: FontAwesome; display: block; position: absolute; color: #c80000; font-size: 14px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 88px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } @media (max-width: 992px) { .alert-validate::before { visibility: visible; opacity: 1; } } .simpleslide100 { display: block; position: fixed; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; } .simpleslide100-item { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .cl0 { color: #fff; } .s1-txt1 { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; color: #fff; line-height: 1; } .s2-txt1 { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; color: #fff; line-height: 1.2; } .m1-txt1 { font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; color: #333; line-height: 1.2; } .m2-txt1 { font-family: 'Poppins', sans-serif; font-size: 24px; color: #cccccc; line-height: 1.2; } .l1-txt1 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 60px; color: #fff; line-height: 1; } .l1-txt2 { font-family: 'Playfair Display', serif; font-weight: 900; font-style: italic; font-size: 90px; color: #fff; line-height: 1.1; } .size1 { width: 100%; min-height: 100vh; } .size2 { min-width: 140px; height: 50px; } .size3 { width: 36px; height: 36px; } .size4 { width: 80px; height: 100%; } .wsize1 { width: 90px; } .wsize2 { max-width: 600px; } .bg0 { background-color: #fff; } .bg-img1 { background-position: center; background-repeat: no-repeat; background-size: cover; } .where1 { align-self: flex-start; } .where2 { padding-top: 470px; } .where3-parent { position: relative; } .where3 { position: absolute; top: 0; left: 19%; } .placeholder0::-webkit-input-placeholder { color: #fff; } .placeholder0:-moz-placeholder { color: #fff; } .placeholder0::-moz-placeholder { color: #fff; } .placeholder0:-ms-input-placeholder { color: #fff; } .overlay1 { position: relative; z-index: 1; } .overlay1::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); } .wrappic1 { display: block; flex-grow: 1; } .wrappic1 img { max-width: 100%; } .how-btn1 { padding: 0 15px; background-color: #fff; border-radius: 25px; } .how-btn1:hover { background-color: rgba(255, 255, 255, 0.12); color: #fff; } .how-social { color: #fff; font-size: 28px; background-color: transparent; } .how-social:hover { color: rgba(255, 255, 255, 0.2); } .focus-in0:focus::-webkit-input-placeholder { color: transparent; } .focus-in0:focus:-moz-placeholder { color: transparent; } .focus-in0:focus::-moz-placeholder { color: transparent; } .focus-in0:focus:-ms-input-placeholder { color: transparent; } .hov-cl0:hover { color: #fff; } .hov-bg0:hover { background-color: #fff; } .hov1:hover { background-color: rgba(255, 255, 255, 0.12); } @media (max-width: 1200px) { .m-0-xl { margin: 0; } .m-lr-0-xl { margin-left: 0; margin-right: 0; } .m-lr-15-xl { margin-left: 15px; margin-right: 15px; } .m-l-0-xl { margin-left: 0; } .m-r-0-xl { margin-right: 0; } .m-l-15-xl { margin-left: 15px; } .m-r-15-xl { margin-right: 15px; } .p-0-xl { padding: 0; } .p-lr-0-xl { padding-left: 0; padding-right: 0; } .p-lr-15-xl { padding-left: 15px; padding-right: 15px; } .p-l-0-xl { padding-left: 0; } .p-r-0-xl { padding-right: 0; } .p-l-15-xl { padding-left: 15px; } .p-r-15-xl { padding-right: 15px; } .w-full-xl { width: 100%; } } @media (max-width: 992px) { .m-lr-auto-lg { margin-right: auto; margin-left: auto; } .m-0-lg { margin: 0; } .m-lr-0-lg { margin-left: 0; margin-right: 0; } .m-lr-15-lg { margin-left: 15px; margin-right: 15px; } .m-l-0-lg { margin-left: 0; } .m-r-0-lg { margin-right: 0; } .m-l-15-lg { margin-left: 15px; } .m-r-15-lg { margin-right: 15px; } .p-0-lg { padding: 0; } .p-lr-0-lg { padding-left: 0; padding-right: 0; } .p-lr-15-lg { padding-left: 15px; padding-right: 15px; } .p-l-0-lg { padding-left: 0; } .p-r-0-lg { padding-right: 0; } .p-l-15-lg { padding-left: 15px; } .p-r-15-lg { padding-right: 15px; } .w-full-lg { width: 100%; } .respon1 { position: relative; left: unset; top: unset; max-width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; } .respon2 { flex-direction: column; justify-content: flex-start; align-items: center; padding-left: 15px; padding-right: 15px; } .respon3 { flex-direction: row; justify-content: center; padding-top: 80px; } .respon4 { align-items: center; margin-right: 15px; margin-left: 15px; } .respon5 { padding-top: 100px; padding-bottom: 30px; flex-direction: row; justify-content: center; } .respon6 { text-align: center; } } @media (max-width: 768px) { .m-0-md { margin: 0; } .m-lr-0-md { margin-left: 0; margin-right: 0; } .m-lr-15-md { margin-left: 15px; margin-right: 15px; } .m-l-0-md { margin-left: 0; } .m-r-0-md { margin-right: 0; } .m-l-15-md { margin-left: 15px; } .m-r-15-md { margin-right: 15px; } .p-0-md { padding: 0; } .p-lr-0-md { padding-left: 0; padding-right: 0; } .p-lr-15-md { padding-left: 15px; padding-right: 15px; } .p-l-0-md { padding-left: 0; } .p-r-0-md { padding-right: 0; } .p-l-15-md { padding-left: 15px; } .p-r-15-md { padding-right: 15px; } .w-full-md { width: 100%; } .respon8 { padding-bottom: 60px; } } @media (max-width: 576px) { .m-0-sm { margin: 0; } .m-lr-0-sm { margin-left: 0; margin-right: 0; } .m-lr-15-sm { margin-left: 15px; margin-right: 15px; } .m-l-0-sm { margin-left: 0; } .m-r-0-sm { margin-right: 0; } .m-l-15-sm { margin-left: 15px; } .m-r-15-sm { margin-right: 15px; } .p-0-sm { padding: 0; } .p-lr-0-sm { padding-left: 0; padding-right: 0; } .p-lr-15-sm { padding-left: 15px; padding-right: 15px; } .p-l-0-sm { padding-left: 0; } .p-r-0-sm { padding-right: 0; } .p-l-15-sm { padding-left: 15px; } .p-r-15-sm { padding-right: 15px; } .w-full-sm { width: 100%; } .respon7 { font-size: 65px; } } @media (max-width: 480px) { .m-0-ssm { margin: 0; } .m-lr-0-ssm { margin-left: 0; margin-right: 0; } .m-lr-15-ssm { margin-left: 15px; margin-right: 15px; } .m-l-0-ssm { margin-left: 0; } .m-r-0-ssm { margin-right: 0; } .m-l-15-ssm { margin-left: 15px; } .m-r-15-ssm { margin-right: 15px; } .p-0-ssm { padding: 0; } .p-lr-0-ssm { padding-left: 0; padding-right: 0; } .p-lr-15-ssm { padding-left: 15px; padding-right: 15px; } .p-l-0-ssm { padding-left: 0; } .p-r-0-ssm { padding-right: 0; } .p-l-15-ssm { padding-left: 15px; } .p-r-15-ssm { padding-right: 15px; } .w-full-ssm { width: 100%; } }