You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

505 lines
11 KiB

.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;
}
}
}