.contact{ header{ color: white; border-bottom: 1px solid #707070; } &__form{ &--name{ width: 70%; } } &__info{ &--data{ margin-bottom: 30px; width: 48%; h2{ color: #9CDF52; } p{ color: #D3D3D3; } } &--map{ width: 100%; height: 300px; position: relative; padding-top: 20px; border-top: 1px solid #707070; img { transform: scale(0.4); } } } &__tab{ margin-bottom: 30px; border-radius: 10px !important; border: 1px solid #4DD35B; button{ width: 50%; padding: 10px 0px; border: none; background-color: inherit; border-radius: 10px !important; color: #4DD35B; } &--active{ background-color: #4DD35B !important; color: white !important; } } } @media screen and (min-width: 1441px) { .contact{ main{ max-width: 1350px; padding-top: 60px; header{ padding-bottom: 30px; h1{ font-size: 44px; } } } &__form{ flex: 0.5; margin-left: 40px; } &__info{ flex: 0.5; margin-right: 40px; &--data{ h2{ font-size: 22px; } p{ font-size: 17px; } } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: 20px; background-color: #272727; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 22px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #272727; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: 16px; } .Mui-focused { color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .contact{ main{ max-width: 1250px; padding: 40px 10px; header{ padding-bottom: 20px; h1{ font-size: calc(100vw / 45); } } } &__form{ flex: 0.5; margin-left: 20px; } &__info{ flex: 0.5; margin-right: 20px; &--data{ h2{ font-size: calc(100vw / 70); } p{ font-size: calc(100vw / 90); } } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: calc(100vw / 80); background-color: #272727; color: #84de56; line-height: 1.5; border-radius: 10px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 18px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #272727; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: 16px; } .Mui-focused { // color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (min-width: 641px) and (max-width: 1007px) { .contact{ background : black; main{ max-width: 900px; padding: 30px 20px; header{ padding-bottom: 20px; h1{ font-size: calc(100vw / 27); } } } &__tab{ button{ font-size: calc(100vw / 37); } } &__form{ &--name{ width: 100%; } button{ // width: 100%; } } &__info{ &--data{ width : 100% !important; background-color: #83de564b; padding: 10px; border-radius: 10px; h2{ font-size: calc(100vw / 35); color: #4DD35B; } p{ text-align: center; margin-top: 10px; font-size: calc(100vw / 40); } } &--map{ border : none; padding-top: 0px; height: 260px; } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: calc(100vw / 40); background-color: #272727; color: #84de56; line-height: 1.5; border-radius: 10px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 15px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #272727; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 40); } .Mui-focused { // color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } } @media screen and (max-width: 640px) { .contact{ background : black; main{ max-width: 500px; padding: 40px 10px; header{ padding-bottom: 20px; h1{ font-size: calc(100vw / 18); } } } &__tab{ button{ font-size: calc(100vw / 30); } } &__form{ &--name{ width: 100%; } button{ // width: 100%; } } &__info{ &--data{ width : 100% !important; background-color: #83de564b; padding: 10px; border-radius: 10px; h2{ font-size: calc(100vw / 27); color: #4DD35B; } p{ text-align: center; margin-top: 10px; font-size: calc(100vw / 32); } } &--map{ border : none; padding-top: 0px; height: 260px; } } .MuiFormControl-root { width: 100%; margin: 10px auto !important; .MuiSelect-iconOutlined { display: none; } .MuiSelect-outlined.MuiSelect-outlined { padding-right: 15px; } color: #797979 !important; } .MuiOutlinedInput-notchedOutline { top: 0px !important; } .MuiOutlinedInput-notchedOutline { border-color: #666666 !important; border-width: 1px !important; color: green !important; border-radius: 10px !important; } .MuiOutlinedInput-input { padding: 15px 14px !important; font-family: numeralLight; font-size: calc(100vw / 30); background-color: #272727; color: #84de56; line-height: 1.5; border-radius: 10px; &:focus{ border: 0.2px solid #84de56 !important; border-radius: 10px; transform : translateY(0.5px); } } .MuiInputLabel-outlined { font-family: numeralLight !important; display: inline !important; position: absolute; text-align: right !important; right: 15px; top: 15px; padding: 0px !important; transform: translate(0px, 0px) scale(1) !important; } .MuiInputLabel-shrink { text-align: center !important; display: inline; position: absolute; right: 0px; top: -8px; transform: translate(0px, 0px) scale(0.85) !important; padding: 0px 10px !important; } label { background-color: #272727; width: fit-content; text-align: center; color: #B5B5B5 !important; letter-spacing: -1px; font-size: calc(100vw / 30); } .Mui-focused { // color: rgba(0, 0, 0, 1) !important; border-color: #84de56 !important; // background-color: white; color: #84de56 !important; } .MuiInputBase-input { height: auto !important; } } }