/* MAIN SETTINGS */
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Montserrat:wght@800&family=Nanum+Gothic:wght@700&display=swap');
/* COLORS */
:root{
--orange: #E88831;
--fontgray: #2B2D2F;
--darkgray: #707070;
--gray: #BCBCB4;
--lightgray: #DFDCD9;
--lightblack: #2B2D2F;
--darkcolor: #191919;
}
/* STYLES OF PAGE */
.container{
width: 100vw;
height: 100vh;
overflow-x: hidden;
}
.menu{
width: 100vw;
height: 80px;
background-color: var(--orange);
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
position: fixed;
z-index: 1;
}
.logo{
width: 163px;
height: 60px;
margin-right: 300px;
}
.emr{
-webkit-tap-highlight-color: transparent;
}
.menu_icon{
display: none;
-webkit-tap-highlight-color: transparent;
}
.menu img:hover{
cursor: pointer;
}
.menu_element{
margin-right: 70px;
font-family:'Lucida Sans';
font-size: 20px;
font-weight: bold;
color: var(--fontgray);
}
.button{
color: var(--fontgray);
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
position: relative;
}
.button::after{
content: '';
position: absolute;
bottom: 5px;
left: 10%;
width: 0%;
height: 4%;
border-radius: 100px;
background-color: var(--fontgray);
transition: ease-in-out .3s;
}
.button:hover::after{
width: 80%;
}
/* INNA WERSJA HOVERA ZE ZMIANA TLA Z PADDINGAMI */
/* .button:hover{
color: var(--orange);
cursor: pointer;
background-color: var(--fontgray);
box-shadow: var(--fontgray) 0px 3px 8px;
transition: ease-in .3s;
} */
.button_mobile{
text-decoration: none;
width: 100%;
height: 16vh;
line-height: 16vh;
text-align: center;
font-family:'Lucida Sans';
font-size: 17px;
font-weight: bold;
color: whitesmoke;
transition: ease-in-out .1s;
-webkit-tap-highlight-color: transparent;
}
.button_mobile:active{
background-color: var(--darkgray);
}
.button_mobile:nth-child(1){
margin-top: 1vh;
}
.button_mobile:last-child{
margin-bottom: 1.4vh;
}
.menu_mobile{
position: absolute;
right: 0;
top: 120px;
background-color: var(--fontgray);
opacity: 0%;
width: 65vw;
height: 100vh;
transform: translate(100%);
transition: ease-in-out .3s;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.menu_mobile_active{
transform: translate(0%);
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
}
.main{
width: 100vw;
min-height: 100%;
top: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.menu_title{
width: 35vw;
height: 110vh;
background-color: var(--lightgray);
}
.title{
font-family: 'Montserrat', sans-serif;
font-size: 72px;
font-weight: bold;
color: var(--darkgray);
text-align: center;
position: relative;
top: 45vh;
}
hr{
width: 70%;
height: 1px;
background-color: var(--darkgray);
}
.content{
width: 65vw;
height: 110vh;
background-color: whitesmoke;
display: flex;
}
.article{
position: relative;
top: 130px; /* 80px wysokosc diva + 50px "padding" */
left: 70px;
font-family: 'Arimo', sans-serif;
font-size: 24px;
font-weight: 300;
color: var(--lightblack);
letter-spacing: 0.1px;
height: 100vh;
}
.section{
width: 40vw;
margin-bottom: 3.5vh;
}
.section:nth-child(1){
font-weight: bold;
}
.link{
cursor: pointer;
color: var(--lightblack);
}
.link:hover{
color: #E88831;
}
.image{
width: 178px;
height: 178px;
position: relative;
top: 130px;
left: 200px;
}
.footer{
width: 100vw;
height: 7vh;
background-color: var(--darkcolor);
color: var(--darkgray);
font-family: 'Arimo', sans-serif;
font-size: 14px;
font-weight: 300;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.foot{
margin: 0;
padding: 0;
}
/* MEDIA QUERIES */
/* 1920px */
@media only screen and (max-width: 1920px){
@media only screen and (max-height: 970px){
.article{
font-size: 21.5px;
}
}
@media only screen and (max-height: 770px){
.article{
font-size: 19.5px;
top: 100px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 18px;
top: 90px;
}
.section{
margin-bottom: 3vh;
}
.image{
width: 150px;
height: 150px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 17px;
top: 88px;
}
.image{
width: 130px;
height: 130px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 15px;
height: 50vh;
}
.image{
width: 110px;
height: 110px;
}
.footer{
font-size: 12px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 14px;
}
.section{
margin-bottom: -0.6vh;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 450px){
.article{
top: 82px;
font-size: 13px;
height: 35vh;
}
.section{
margin-bottom: -1.2vh;
}
.image{
width: 95px;
height: 95px;
}
}
@media only screen and (max-height: 400px){
.article{
top: 80px;
font-size: 12px;
}
.image{
width: 90px;
height: 90px;
}
.footer{
font-size: 10px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11.5px;
}
.section{
margin-bottom: -2vh;
}
.image{
width: 82px;
height: 82px;
}
.footer{
font-size: 9px;
}
.title{
font-size: 60px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1vh;
}
.image{
width: 80px;
height: 80px;
}
.footer{
font-size: 6.5px;
}
.title{
font-size: 50px;
}
}
}
/* 1720px */
@media only screen and (max-width: 1720px){
.section{
width: 43vw;
}
.image{
left: 150px;
}
}
/* 1700px */
@media only screen and (max-width: 1700px){
.menu{
height: 72px;
}
.article{
top: 122px;
left: 65px;
font-size: 22px;
}
.logo{
margin-left: 100px;
width: 149px;
height: 55px;
}
.menu_element{
font-size: 19px;
margin-right: 64px;
}
.button{
border-radius: 9px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 28px;
padding-right: 28px;
}
@media only screen and (max-height: 790px){
.article{
font-size: 19.5px;
top: 100px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 18px;
top: 90px;
}
.section{
margin-bottom: 3vh;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 17px;
top: 88px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 15px;
height: 50vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 14px;
}
.section{
margin-bottom: -0.6vh;
}
}
@media only screen and (max-height: 450px){
.article{
top: 82px;
font-size: 12.5px;
height: 25vh;
}
.section{
margin-bottom: -1.2vh;
}
}
@media only screen and (max-height: 400px){
.article{
top: 80px;
font-size: 12px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11.5px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1vh;
}
}
}
/* 1630px */
@media only screen and (max-width: 1630px){
.menu_element{
font-size: 18px;
margin-right: 60px;
}
.logo{
margin-right: 220px;
}
.image{
left: 130px;
}
@media only screen and (max-height: 690px){
.article{
top: 90px;
}
}
@media only screen and (max-height: 610px){
.article{
top: 85px;
}
}
@media only screen and (max-height: 450px){
.article{
top: 81px;
}
}
@media only screen and (max-height: 400px){
.article{
top: 80px;
font-size: 12px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1vh;
}
}
}
/* 1600px */
@media only screen and (max-width: 1600px){
.article{
font-size: 21px;
letter-spacing: normal;
}
@media only screen and (max-height: 825px){
.article{
font-size: 21px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 20px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 18px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 15.5px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 14.6px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 13px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 12px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11.5px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1vh;
}
}
}
/* 1540px */
@media only screen and (max-width: 1540px){
.image{
left: 110px;
}
.logo{
margin-right: 170px;
}
@media only screen and (max-height: 350px){
.article{
font-size: 10.2px;
}
.section{
margin-bottom: -1.5vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1vh;
}
}
}
/* 1500px */
@media only screen and (max-width: 1500px){
.image{
left: 105px;
}
@media only screen and (max-height: 825px){
.article{
font-size: 20.5px;
}
}
@media only screen and (max-height: 725px){
.article{
font-size: 20px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 19px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 15px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 14.3px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 12px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11px;
}
.section{
margin-bottom: -2.2vh;
}
}
@media only screen and (max-height: 300px){
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -1.3vh;
}
}
}
}
/* 1460px */
@media only screen and (max-width: 1460px){
.logo{
margin-right: 130px;
}
.menu_element{
margin-right: 45px;
}
}
/* 1435px */
@media only screen and (max-width: 1435px){
.article{
font-size: 20px;
}
.title{
font-size: 68px;
}
.image{
left: 100px;
}
@media only screen and (max-height: 825px){
.article{
font-size: 19px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 18px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 15px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 14.6px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 13.7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 12.6px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 11px;
}
.title{
font-size: 60px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.title{
font-size: 50px;
}
}
}
/* 1380px */
@media only screen and (max-width: 1380px){
.article{
left: 55px;
}
.image{
left: 92px;
}
}
/* 1370px */
@media only screen and (max-width: 1370px){
.menu{
height: 69px;
}
.article{
top: 100px;
}
.logo{
margin-left: 60px;
margin-right: 130px;
height: 50px;
width: 135px;
}
.menu_element{
font-size: 17px;
margin-right: 35px;
}
@media only screen and (max-height: 650px){
.article{
top: 90px;
}
}
@media only screen and (max-height: 550px){
.article{
top: 80px;
}
}
@media only screen and (max-height: 350px){
.article{
top: 70px;
}
}
}
/* 1340px */
@media only screen and (max-width: 1340px){
.main{
min-height: 90%;
}
.article{
font-size: 19px;
height: 90vh;
}
.image{
left: 85px;
height: 150px;
width: 150px;
}
.title{
font-size: 62px;
top: 45vh;
}
.menu_title{
height: 100vh;
}
.content{
height: 100vh;
}
@media only screen and (max-height: 825px){
.article{
font-size: 18px;
top: 90px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 17px;
top: 80px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 16.5px;
}
.image{
width: 140px;
height: 140px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 15px;
top: 75px;
}
.image{
width: 130px;
height: 130px;
}
.title{
font-size: 60px;
}
.section{
margin-bottom: -0.1vh;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 14.2px;
}
.section{
margin-bottom: -0.3vh;
}
.image{
width: 110px;
height: 110px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 13.3px;
top: 72px;
}
.section{
margin-bottom: -1vh;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12px;
top: 70px;
}
.section{
margin-bottom: -1.5vh;
}
.image{
width: 95px;
height: 95px;
}
.title{
font-size: 53px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11px;
height: 40vh;
}
.image{
width: 90px;
height: 90px;
}
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.5px;
height: 35vh;
}
.image{
width: 82px;
height: 82px;
}
.title{
font-size: 47px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.image{
width: 80px;
height: 80px;
}
.title{
font-size: 44px;
}
}
}
/* 1325px */
@media only screen and (max-width: 1325px){
.article{
left: 45px;
}
.image{
left: 80px;
}
@media only screen and (max-height: 750px){
}
@media only screen and (max-height: 750px){
}
@media only screen and (max-height: 600px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 14.8px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 13.7px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 1277px */
@media only screen and (max-width: 1277px){
.article{
font-size: 18px;
}
.image{
left: 73px;
}
@media only screen and (max-height: 850px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 15.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 15.2px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 14.6px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 13.7px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 1220px */
@media only screen and (max-width: 1220px){
.article{
left: 40px;
font-size: 17.5px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 15.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 14px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 13.3px;
}
.title{
font-size: 55px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.5px;
}
.title{
font-size: 50px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.3px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 1210px */
@media only screen and (max-width: 1210px){
.logo{
margin-right: 100px;
}
.image{
left: 69px;
width: 130px;
height: 130px;
}
.title{
font-size: 58px;
}
@media only screen and (max-height: 850px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 15.8px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 15.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 14.5px;
}
.image{
width: 110px;
height: 110px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 13.5px;
}
.title{
font-size: 55px;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.5px;
}
.title{
font-size: 50px;
}
.image{
width: 95px;
height: 95px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.3px;
}
.image{
width: 90px;
height: 90px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.image{
width: 82px;
height: 82px;
}
.title{
font-size: 46px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.image{
width: 80px;
height: 80px;
}
.title{
font-size: 42px;
}
}
}
/* 1175px */
@media only screen and (max-width: 1175px){
.menu_element{
margin-right: 20px;
}
.button{
padding-left: 20px;
padding-right: 20px;
}
.logo{
margin-left: 30px;
}
.article{
font-size: 16.5px;
height: 70vh;
}
.menu_title{
height: 95vh;
}
.title{
top: 42vh;
}
.content{
height: 95vh;
}
.main{
min-height: 80%;
}
@media only screen and (max-height: 870px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 15.5px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 14.7px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 14.3px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13.5px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.6px;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11.3px;
}
.image{
width: 95px;
height: 95px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 10.5px;
}
.image{
width: 90px;
height: 90px;
}
.title{
font-size: 48px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.image{
width: 82px;
height: 82px;
}
.title{
font-size: 42px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.image{
width: 80px;
height: 80px;
}
.title{
font-size: 40px;
}
}
}
/* 1120px */
@media only screen and (max-width: 1120px){
@media only screen and (max-height: 600px){
}
@media only screen and (max-height: 500px){
}
@media only screen and (max-height: 400px){
}
}
/* 1110px */
@media only screen and (max-width: 1110px){
.logo{
margin-left: 0px;
margin-right: 100px;
}
.menu_element{
margin-right: 10px;
}
.article{
font-size: 16px;
}
@media only screen and (max-height: 820px){
.article{
font-size: 15px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 14.5px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 14.2px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 14px;
}
.image{
width: 130px;
height: 130px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13px;
}
.image{
width: 110px;
height: 110px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.3px;
}
.image{
width: 100px;
height: 100px;
}
.title{
font-size: 48px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11.5px;
}
.image{
width: 95px;
height: 95px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 10.4px;
}
.image{
width: 90px;
height: 90px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.image{
width: 82px;
height: 82px;
}
.title{
font-size: 42px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.image{
width: 80px;
height: 80px;
}
}
}
/* 1060px */
@media only screen and (max-width: 1060px){
.article{
font-size: 16px;
}
.image{
width: 115px;
height: 115px;
}
@media only screen and (max-height: 830px){
.article{
font-size: 15px;
}
.section{
margin-bottom: 3vh;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 14.5px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 14px;
}
.image{
width: 110px;
height: 110px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 13px;
}
.section{
margin-bottom: 2.5vh;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 12.5px;
}
.section{
margin-bottom: 2vh;
}
.image{
width: 95px;
height: 95px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 11.4px;
}
.section{
margin-bottom: 1.5vh;
}
.image{
width: 90px;
height: 90px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11px;
}
.section{
margin-bottom: -1vh;
}
.image{
width: 82px;
height: 82px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 10.2px;
}
.section{
margin-bottom: -1.5vh;
}
.image{
width: 77px;
height: 77px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.section{
margin-bottom: -2vh;
}
.image{
width: 70px;
height: 70px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.section{
margin-bottom: -2.3vh;
}
.image{
width: 65px;
height: 65px;
}
}
}
/* 1010px */
@media only screen and (max-width: 1010px){
.article{
font-size: 16px;
height: 60vh;
}
.title{
font-size: 54px;
}
.image{
left: 62px;
}
.menu_title{
height: 95vh;
}
.title{
top: 43vh;
}
.content{
height: 95vh;
}
.main{
min-height: 76%;
}
@media only screen and (max-height: 750px){
.article{
font-size: 14px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 13px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 12px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 10px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.3px;
}
.title{
font-size: 42px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.6px;
}
.title{
font-size: 38px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.title{
font-size: 37px;
}
}
}
/* 980px */
@media only screen and (max-width: 980px){
.menu_element{
font-size: 16px;
}
.logo{
margin-right: 70px;
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.3px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.9px;
}
}
}
/* 955px */
@media only screen and (max-width: 955px){
.article{
font-size: 15.2px;
}
.image{
height: 105px;
width: 105px;
left: 57px;
}
.title{
font-size: 48px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 14px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10.5px;
}
.image{
width: 100px;
height: 100px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.8px;
}
.image{
width: 90px;
height: 90px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.3px;
}
.title{
font-size: 42px;
}
.image{
width: 80px;
height: 80px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.2px;
}
.title{
font-size: 38px;
}
.image{
width: 75px;
height: 75px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.8px;
}
.title{
font-size: 37px;
}
.image{
width: 68px;
height: 68px;
}
}
}
/* 910px */
@media only screen and (max-width: 910px){
.logo{
margin-right: 83px;
}
.menu_element{
font-size: 15px;
}
.button{
padding-left: 17px;
padding-right: 17px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 13px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10.2px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.3px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.1px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.5px;
}
}
}
/* 900px */
@media only screen and (max-width: 900px){
.section{
margin-bottom: 3vh;
}
@media only screen and (max-height: 690px){
.section{
margin-bottom: 2.7vh;
}
}
@media only screen and (max-height: 600px){
.section{
margin-bottom: 2.5vh;
}
}
@media only screen and (max-height: 550px){
.section{
margin-bottom: 2vh;
}
}
@media only screen and (max-height: 500px){
.section{
margin-bottom: 1.5vh;
}
}
@media only screen and (max-height: 450px){
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 400px){
.section{
margin-bottom: -1.5vh;
}
}
@media only screen and (max-height: 350px){
.section{
margin-bottom: -2vh;
}
}
@media only screen and (max-height: 300px){
.section{
margin-bottom: -2.3vh;
}
}
}
/* 850px */
@media only screen and (max-width: 850px){
.article{
left: 35px;
font-size: 14.3px;
}
.image{
height: 95px;
width: 95px;
left: 50px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 12px;
}
.image{
width: 90px;
height: 90px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11px;
}
.image{
width: 84px;
height: 84px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 10.6px;
}
.image{
width: 80px;
height: 80px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10px;
}
.image{
width: 74px;
height: 74px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.4px;
}
.image{
width: 69px;
height: 69px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.2px;
}
.image{
width: 62px;
height: 62px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7.8px;
}
.image{
width: 60px;
height: 60px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.3px;
}
.image{
width: 55px;
height: 55px;
}
}
}
/* 830px */
@media only screen and (max-width: 830px){
.button{
padding-left: 15px;
padding-right: 15px;
}
}
/* 800px */
@media only screen and (max-width: 800px){
.article{
font-size: 14px;
}
.image{
height: 90px;
width: 90px;
left: 45px;
}
.menu_title{
height: 94vh;
}
.title{
top: 43vh;
}
.content{
height: 94vh;
}
.main{
min-height: 70%;
}
@media only screen and (max-height: 750px){
.article{
font-size: 11.74px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 11.4px;
}
.image{
width: 80px;
height: 80px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 10.4px;
}
.image{
width: 72px;
height: 72px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 10px;
}
.image{
width: 65px;
height: 65px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 9.1px;
}
.image{
width: 60px;
height: 60px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 8.6px;
}
.image{
width: 57px;
height: 57px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 8px;
}
.image{
width: 54px;
height: 54px;
}
.title{
font-size: 38px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7.1px;
}
.image{
width: 50px;
height: 50px;
}
.title{
font-size: 35px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.6px;
}
}
}
/* 790px */
@media only screen and (max-width: 790px){
.button{
padding-left: 14px;
padding-right: 14px;
}
.logo{
margin-right: 70px;
}
}
/* 770px */
@media only screen and (max-width: 770px){
.menu_element{
font-size: 14px;
}
.logo{
margin-right: 60px;
}
.article{
font-size: 13.4px;
}
.image{
height: 82px;
width: 82px;
left: 50px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 11.3px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 11.1px;
}
.image{
width: 80px;
height: 80px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 10.5px;
}
.image{
width: 72px;
height: 72px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 10.2px;
}
.image{
width: 65px;
height: 65px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 9.7px;
}
.image{
width: 60px;
height: 60px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.5px;
}
.image{
width: 57px;
height: 57px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.2px;
}
.image{
width: 54px;
height: 54px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.9px;
}
.image{
width: 50px;
height: 50px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 750px */
@media only screen and (max-width: 750px){
@media only screen and (max-height: 750px){
}
@media only screen and (max-height: 690px){
}
@media only screen and (max-height: 600px){
.article{
font-size: 10.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 10.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 9.7px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.4px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.1px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.7px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 740px */
@media only screen and (max-width: 740px){
.menu{
height: 120px;
align-items: center;
justify-content: space-between;
}
.menu_mobile{
opacity: 97%;
}
.logo{
height: 90px;
width: 243px;
margin-right: 0px;
}
.menu_element{
display: none;
}
.menu_icon{
display: block;
width: 15vw;
height: 100px;
margin-right: 40px;
background: transparent;
border: none;
outline: none;
cursor: pointer;
}
.menu_icon_active .line:nth-child(1){
transform: translateY(22px) rotate(-405deg);
}
.menu_icon_active .line:nth-child(2){
transform: translateX(200px);
}
.menu_icon_active .line:nth-child(3){
transform: translateY(-22px) rotate(405deg);
}
.line{
width: 100%;
height: 11px;
background-color: var(--lightblack);
margin: 11px;
align-items: center;
justify-content: center;
border-radius: 20px;
transition: .3s ease-in-out;
}
.main{
display: flex;
flex-direction: column;
}
.menu_title{
width: 100vw;
height: 35vh;
}
.title{
top: 20vh;
}
.content{
width: 100vw;
height: 77vh;
}
.article{
position: static;
margin: 0 auto;
font-size: 18px;
text-align: left;
margin-top: 3vh;
}
.section{
width: 85vw;
margin-bottom: 3vh;
}
.image{
position: static;
display: none;
}
@media only screen and (max-height: 950px){
.menu_title{
height: 40vh;
}
.title{
top: 22vh;
}
.article{
font-size: 16.7px;
margin-top: 1.5vh;
}
}
@media only screen and (max-height: 800px){
.article{
font-size: 16.5px;
}
.section{
margin-bottom: 2.5vh;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 15px;
}
.section{
margin-bottom: 2vh;
}
.title{
font-size: 43px;
top: 23vh;
}
hr{
width: 60vw;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 14.5px;
}
.title{
font-size: 40px;
top: 24vh;
}
hr{
width: 55vw;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 14px;
}
.section{
margin-bottom: -0.5vh;
}
.title{
font-size: 36px;
top: 25vh;
}
hr{
width: 50vw;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13.2px;
}
.section{
margin-bottom: -0.8vh;
}
.menu_title{
height: 45vh;
}
.title{
font-size: 34px;
top: 28vh;
}
hr{
width: 50vw;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.7px;
}
.section{
margin-bottom: -1vh;
}
.menu_title{
height: 50vh;
}
.title{
font-size: 34px;
top: 31vh;
}
hr{
width: 48vw;
}
.button_mobile{
height: 15vh;
line-height: 15vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12px;
}
.section{
margin-bottom: -1.7vh;
}
.menu_title{
height: 55vh;
}
.title{
font-size: 34px;
top: 34vh;
}
hr{
width: 46vw;
}
.button_mobile{
height: 14vh;
line-height: 14vh;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.2px;
}
.section{
margin-bottom: -1.9vh;
}
.menu_title{
height: 55vh;
}
.title{
font-size: 30px;
top: 36vh;
}
hr{
width: 44vw;
}
.button_mobile{
height: 13vh;
line-height: 13vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 10px;
}
.menu_title{
height: 60vh;
}
.title{
font-size: 28px;
top: 40vh;
}
hr{
width: 44vw;
}
.button_mobile{
height: 12vh;
line-height: 12vh;
font-size: 16.5px;
}
.footer{
font-size: 8px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 9px;
}
.menu_title{
height: 65vh;
}
.title{
font-size: 25px;
top: 44vh;
}
hr{
width: 44vw;
}
.button_mobile{
height: 11vh;
line-height: 11vh;
font-size: 16px;
}
.footer{
font-size: 7.2px;
}
}
}
/* 700px */
@media only screen and (max-width: 700px){
.article{
font-size: 17px;
}
@media only screen and (max-height: 800px){
.article{
font-size: 17px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 16px;
}
}
@media only screen and (max-height: 690px){
.article{
font-size: 15px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 14.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 14px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.7px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 12.2px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.footer{
font-size: 7px;
}
}
}
/* 667px */
@media only screen and (max-width: 667px){
.article{
font-size: 16.2px;
}
.menu_title{
height: 40vh;
}
.title{
top: 22vh;
font-size: 46px;
}
.footer{
font-size: 13px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 15.7px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 15px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 14.3px;
}
.title{
font-size: 40px;
top: 24vh;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 13.8px;
}
.title{
font-size: 36px;
top: 25vh;
}
.footer{
font-size: 11px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13.3px;
}
.title{
font-size: 30px;
top: 27vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.4px;
}
.title{
font-size: 30px;
top: 31vh;
}
.menu_title{
height: 47vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11.8px;
}
.title{
font-size: 27px;
top: 33.5vh;
}
.menu_title{
height: 50vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11px;
}
.title{
font-size: 26px;
top: 37vh;
}
.menu_title{
height: 55vh;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.2px;
}
.title{
font-size: 25px;
top: 41vh;
}
.menu_title{
height: 60vh;
}
.footer{
font-size: 8px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8.7px;
}
.title{
font-size: 24px;
top: 46vh;
}
.menu_title{
height: 66vh;
}
.footer{
font-size: 7px;
}
}
}
/* 600px */
@media only screen and (max-width: 600px){
.article{
font-size: 15.8px;
}
@media only screen and (max-height: 700px){
}
@media only screen and (max-height: 650px){
.article{
font-size: 13.7px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 13.2px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 13px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12.4px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11.8px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8.3px;
}
}
}
/* 550px */
@media only screen and (max-width: 550px){
.article{
font-size: 15.5px;
}
.footer{
font-size: 12px;
}
@media only screen and (max-height: 850px){
.section{
margin-bottom: 2vh;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 14.8px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 14.2px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 13.7px;
}
.footer{
font-size: 10.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 13.2px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 12.5px;
}
.section{
margin-bottom: -0.8vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 12px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11.5px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 10px;
}
.section{
margin-bottom: -1.2vh;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9.2px;
}
.footer{
font-size: 8.2px;
}
.section{
margin-bottom: -1.6vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8.3px;
}
.footer{
font-size: 7.6px;
}
.section{
margin-bottom: -2vh;
}
}
}
/* 520px */
@media only screen and (max-width: 520px){
@media only screen and (max-height: 860px){
.section{
margin-bottom: 2vh;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.8px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 10px;
}
.section{
margin-bottom: -0.7vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9.5px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.9px;
}
.section{
margin-bottom: -1.6vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
.footer{
font-size: 7px;
}
}
}
/* 495px */
@media only screen and (max-width: 495px){
.article{
font-size: 15px;
}
.section{
margin-bottom: 2.5vh;
}
@media only screen and (max-height: 750px){
.article{
font-size: 14.5px;
}
.section{
margin-bottom: 2vh;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 14px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 13.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 12.7px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 12.2px;
}
.section{
margin-bottom: -0.2vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 11.5px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 11px;
}
.section{
margin-bottom: -0.8vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 10px;
}
.section{
margin-bottom: -1.2vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 9px;
}
.section{
margin-bottom: -1.6vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 8px;
}
}
}
/* 475px */
@media only screen and (max-width: 475px){
.article{
font-size: 14.2px;
}
.content{
height: 70vh;
}
.footer{
font-size: 11.2px;
}
@media only screen and (max-height: 850px){
.section{
margin-bottom: 2vh;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 13.7px;
}
.section{
margin-bottom: 1.2vh;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 13.2px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.2px;
}
.footer{
font-size: 10.5px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10.3px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 10px;
}
.footer{
font-size: 10px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 9px;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8px;
}
.footer{
font-size: 8.2px;
}
.section{
margin-bottom: -1.6vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.2px;
}
.footer{
font-size: 7px;
}
}
}
/* 460px */
@media only screen and (max-width: 460px){
.button_mobile{
font-size: 15px;
}
.article{
font-size: 13.5px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 13.2px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 13px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11.7px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10.3px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 10px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 8.8px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 8.1px;
}
.section{
margin-bottom: -1.6vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.1px;
}
}
}
/* 440px */
@media only screen and (max-width: 440px){
.logo{
height: 82px;
width: 222px;
}
.menu_icon{
height: 75px;
width: 75px;
}
.article{
font-size: 13.3px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 12.8px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 12.5px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 12px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 11.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 11.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 10.2px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 8.8px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7.8px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7.1px;
}
}
}
/* 420px */
@media only screen and (max-width: 420px){
@media only screen and (max-height: 750px){
}
@media only screen and (max-height: 700px){
}
@media only screen and (max-height: 650px){
}
@media only screen and (max-height: 600px){
}
@media only screen and (max-height: 550px){
}
@media only screen and (max-height: 500px){
}
@media only screen and (max-height: 450px){
.article{
font-size: 8.8px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 8.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7.5px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 7px;
}
}
}
/* 418px */
@media only screen and (max-width: 418px){
.button_mobile{
font-size: 14px;
}
}
/* 407px */
@media only screen and (max-width: 407px){
.logo{
height: 77px;
width: 210px;
}
.menu_icon{
height: 70px;
width: 70px;
}
.article{
font-size: 12.4px;
}
.content{
height: 62vh;
}
.footer{
font-size: 10.3px;
}
@media only screen and (max-height: 940px){
.section{
margin-bottom: 2.2vh;
}
}
@media only screen and (max-height: 850px){
.section{
margin-bottom: 1.8vh;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 11.7px;
}
.section{
margin-bottom: 1.5vh;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 11.4px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 10.3px;
}
.footer{
font-size: 10px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 9.3px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.6px;
}
.footer{
font-size: 9px;
}
.section{
margin-bottom: -0.3vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 8.2px;
}
.footer{
font-size: 8.7px;
}
.section{
margin-bottom: -0.8vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7.9px;
}
.footer{
font-size: 8.1px;
}
.section{
margin-bottom: -1.2vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7px;
}
.footer{
font-size: 7.7px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.7px;
}
.footer{
font-size: 7px;
}
.section{
margin-bottom: -1.5vh;
}
}
}
/* 395px */
@media only screen and (max-width: 395px){
.article{
font-size: 12.2px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 12px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 10.3px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 9.8px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 9.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.5px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 8px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7.2px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6.7px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.2px;
}
}
}
/* 385px */
@media only screen and (max-width: 385px){
.menu{
height: 110px;
}
.menu_mobile{
top: 110px
}
.article{
font-size: 11.8px;
}
@media only screen and (max-height: 750px){
.article{
font-size: 12px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 10.3px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 10.1px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 9.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 9px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 8.6px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 8px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.2px;
}
}
}
/* 360px */
@media only screen and (max-width: 360px){
.button_mobile{
font-size: 13px;
}
.article{
font-size: 11.5px;
}
@media only screen and (max-height: 800px){
.article{
font-size: 11.2px;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 10.6px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 10px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 9.2px;
}
.footer{
font-size: 8.5px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.2px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 7.8px;
}
.footer{
font-size: 8px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7.4px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6.9px;
}
.footer{
font-size: 7.7px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.5px;
}
.footer{
font-size: 7px;
}
}
}
/* 350px */
@media only screen and (max-width: 350px){
.article{
font-size: 11.5px;
}
.title{
font-size: 41px;
}
@media only screen and (max-height: 800px){
.article{
font-size: 11.2px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 11px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 10.6px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 10px;
}
.title{
font-size: 38px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 9.2px;
}
.title{
font-size: 36px;
top: 24vh;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8.7px;
}
.title{
font-size: 32px;
top: 25vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.2px;
}
.title{
font-size: 30px;
top: 29vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 8px;
}
.title{
font-size: 28px;
top: 32vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7.7px;
}
.title{
font-size: 26px;
top: 35vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 7px;
}
.title{
font-size: 24px;
top: 39vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6.5px;
}
.title{
font-size: 20px;
top: 45vh;
}
}
}
/* 340px */
@media only screen and (max-width: 340px){
.logo{
height: 68px;
width: 185px;
}
.line{
height: 10px;
}
.menu_icon_active .line:nth-child(1){
transform: translateY(21px) rotate(-405deg);
}
.menu_icon_active .line:nth-child(2){
transform: translateX(200px);
}
.menu_icon_active .line:nth-child(3){
transform: translateY(-21px) rotate(405deg);
}
.article{
font-size: 11.3px;
}
.section{
margin-bottom: 2vh;
}
.footer{
font-size: 10px;
}
@media only screen and (max-height: 800px){
.article{
font-size: 11px;
}
.footer{
font-size: 9px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 10.8px;
}
.footer{
font-size: 8.7px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 10.3px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 9.5px;
}
.section{
margin-bottom: 1.2vh;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 9.4px;
}
.footer{
font-size: 8.3px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8.7px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.2px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 7.3px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7.1px;
}
.footer{
font-size: 7.7px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6.4px;
}
.footer{
font-size: 7.4px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6px;
}
.footer{
font-size: 7px;
}
}
}
/* 327px */
@media only screen and (max-width: 327px){
.menu{
height: 105px;
}
.menu_mobile{
top: 105px;
}
.footer{
font-size: 9.6px;
}
@media only screen and (max-height: 800px){
.footer{
font-size: 9.2px;
}
}
@media only screen and (max-height: 750px){
.footer{
font-size: 8.7px;
}
}
@media only screen and (max-height: 700px){
.footer{
font-size: 8.4px;
}
}
@media only screen and (max-height: 600px){
.footer{
font-size: 8.2px;
}
.section{
margin-bottom: -0.1vh;
}
}
@media only screen and (max-height: 550px){
.footer{
font-size: 8px;
}
}
@media only screen and (max-height: 500px){
.footer{
font-size: 7.8px;
}
}
@media only screen and (max-height: 400px){
.footer{
font-size: 7.4px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 350px){
.footer{
font-size: 7.1px;
}
.section{
margin-bottom: -0.8vh;
}
}
@media only screen and (max-height: 300px){
.footer{
font-size: 6.8px;
}
.section{
margin-bottom: -1.1vh;
}
}
}
/* 317px */
@media only screen and (max-width: 317px){
.section{
margin-bottom: 1.8vh;
}
@media only screen and (max-height: 600px){
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 350px){
.section{
margin-bottom: -0.8vh;
}
}
}
/* 300px */
@media only screen and (max-width: 300px){
@media only screen and (max-height: 800px){
}
@media only screen and (max-height: 750px){
.article{
font-size: 10.3px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 10px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 9.2px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8.7px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.2px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 7.5px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6.4px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6px;
}
}
}
/* 281px */
@media only screen and (max-width: 281px){
.logo{
width: 165px;
height: 61px;
}
.line{
height: 9px;
}
.menu_icon_active .line:nth-child(1){
transform: translateY(20px) rotate(-405deg);
}
.menu_icon_active .line:nth-child(2){
transform: translateX(200px);
}
.menu_icon_active .line:nth-child(3){
transform: translateY(-20px) rotate(405deg);
}
.title{
font-size: 39px;
}
@media only screen and (max-height: 800px){
.article{
font-size: 10.2px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 9.8px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 9.4px;
}
.title{
font-size: 36px;
top: 23vh;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 9.1px;
}
.title{
font-size: 32px;
top: 24vh;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 8.8px;
}
.title{
font-size: 30px;
top: 25vh;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8.5px;
}
.title{
font-size: 26px;
top: 26vh;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 8.2px;
}
.title{
font-size: 26px;
top: 30vh;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 7.5px;
}
.title{
font-size: 23px;
top: 32vh;
}
.footer{
font-size: 7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 7px;
}
.title{
font-size: 21px;
top: 36vh;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6.2px;
}
.title{
font-size: 20px;
top: 40vh;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 6px;
}
.title{
font-size: 18px;
top: 45vh;
}
}
}
/* 270px */
@media only screen and (max-width: 270px){
.section{
margin-bottom: 1.5vh;
}
@media only screen and (max-height: 750px){
}
@media only screen and (max-height: 550px){
.footer{
font-size: 7.5px;
}
.section{
margin-bottom: -0.1vh;
}
}
@media only screen and (max-height: 500px){
.footer{
font-size: 7.2px;
}
.section{
margin-bottom: -0.5vh;
}
}
@media only screen and (max-height: 400px){
.footer{
font-size: 7px;
}
}
@media only screen and (max-height: 350px){
.footer{
font-size: 6.8px;
}
.section{
margin-bottom: -1vh;
}
}
@media only screen and (max-height: 300px){
.footer{
font-size: 6.6px;
}
}
}
/* 260px */
@media only screen and (max-width: 260px){
.logo{
width: 150px;
height: 55px;
}
.line{
height: 8px;
}
.menu_icon_active .line:nth-child(1){
transform: translateY(19px) rotate(-405deg);
}
.menu_icon_active .line:nth-child(2){
transform: translateX(200px);
}
.menu_icon_active .line:nth-child(3){
transform: translateY(-19px) rotate(405deg);
}
@media only screen and (max-height: 600px){
.article{
font-size: 8.5px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8.2px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 7.5px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 7.1px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 6.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 5.5px;
}
}
}
/* 247px */
@media only screen and (max-width: 247px){
.section{
margin-bottom: 1.2vh;
}
.article{
font-size: 10.6px;
}
@media only screen and (max-height: 800px){
.section{
margin-bottom: 0.6vh;
}
.article{
font-size: 10px;
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 9.1px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 8.7px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 8.2px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 8px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 7.3px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 6.9px;
}
.footer{
font-size: 7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 6.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 5.7px;
}
.footer{
font-size: 6.6px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 5.7px;
}
.section{
margin-bottom: -1vh;
}
}
}
/* 236px */
@media only screen and (max-width: 236px){
.section{
margin-bottom: 1vh;
}
@media only screen and (max-height: 800px){
.section{
margin-bottom: 0.6vh;
}
}
@media only screen and (max-height: 400px){
.section{
margin-bottom: -0.6vh;
}
}
@media only screen and (max-height: 400px){
.footer{
font-size: 6.4px;
}
}
}
/* 225px */
@media only screen and (max-width: 225px){
.article{
font-size: 10.5px;
}
.section{
margin-bottom: 0.9vh;
}
.footer{
font-size: 9.3px;
}
@media only screen and (max-height: 800px){
.section{
margin-bottom: 0.6vh;
}
.article{
font-size: 10px
}
}
@media only screen and (max-height: 750px){
.article{
font-size: 9.5px;
}
}
@media only screen and (max-height: 700px){
.article{
font-size: 9.1px;
}
}
@media only screen and (max-height: 650px){
.article{
font-size: 8.4px;
}
.footer{
font-size: 8.9px;
}
}
@media only screen and (max-height: 600px){
.article{
font-size: 8px;
}
.footer{
font-size: 8px;
}
}
@media only screen and (max-height: 550px){
.article{
font-size: 7.4px;
}
}
@media only screen and (max-height: 500px){
.article{
font-size: 7.1px;
}
}
@media only screen and (max-height: 450px){
.article{
font-size: 6.8px;
}
.footer{
font-size: 7px;
}
}
@media only screen and (max-height: 400px){
.article{
font-size: 6.5px;
}
.section{
margin-bottom: -0.5vh;
}
.footer{
font-size: 6.5px;
}
}
@media only screen and (max-height: 350px){
.article{
font-size: 6px;
}
.footer{
font-size: 6px;
}
}
@media only screen and (max-height: 300px){
.article{
font-size: 5.3px;
}
.footer{
font-size: 6px;
}
}
}