@font-face {
  font-family: ivy;
  src: url("fonts/ivyora-display-regular.ttf") format("truetype");
}
@font-face {
  font-family: om;
  src: url("fonts/OpenSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: ob;
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
}

:root {
--blue:#6d81a0;
--orange:#bb726c;
--lightgrey:#fffbf8;
--width:1400px;
--gap:56px;
}

body,html{margin:0;padding:0; scroll-behavior: smooth; scroll-padding-top: 50px; background-color: var(--lightgrey);} *,*::before,*::after{box-sizing:border-box; position:relative; color:var(--blue)}

img,svg{width: 100%; display: block;}


body,html{font-family: "om";}
p,h1,h2,h3,a,ul{margin: 0; padding: 0; max-width: 550px;}
.wider{max-width: 850px;}

.mw{max-width: var(--width);}
.mw2{max-width: calc(var(--width) * .6);}

.center{margin: 0 auto;}
.tcenter{text-align: center;}


p,ul,.button{text-wrap: pretty; font-size: 13pt; line-height: 23pt;}
p.pb{font-size: 17pt; line-height: 26pt;}
ul{ padding: 0; padding-left: 1rem; margin: 0;}
h3,h1{text-wrap: balance}
h3{font-size: 11pt;}
h1{font-size: 35pt; font-family: ivy; }
h1.hsmall{font-size: 30pt;}
strong,.strong{font-family: ob;}
.fcenter{display:flex;align-items:center; justify-content:center;}
.wrap{word-wrap: break-word;}

.noselect{user-select: none;}

.pm{padding: var(--gap);}
.pl1{padding-left: 1rem; padding-right: 1rem;}
.pb1{padding-bottom: 1rem;}
.pt1{padding-top: 1rem;}
.p1{padding: 1rem;}
.pl2{padding-left: 2rem; padding-right: 2rem;}
.pb2{padding-bottom: 2rem;}
.pt2{padding-top: 2rem;}
.p2{padding: 2rem;}
.pl4{padding-left: 4rem; padding-right: 4rem;}
.pb4{padding-bottom: 4rem;}
.pt4{padding-top: 4rem;}
.p4{padding: 4rem;}
.pl8{padding-left: 8rem; padding-right: 8rem;}
.pb8{padding-bottom: 8rem;}
.pt8{padding-top: 8rem;}
.p8{padding: 8rem;}


a{color:inherit}
a:hover{color: var(--orange);}
a.button{display: inline-block;}

.fw{color: var(--lightgrey);}
.fb{color: var(--blue);}
.fo{color: var(--orange);}

.bgo{background-color: var(--orange) !important;}
.bgb{background-color: var(--blue);}
.bgb *{color:var(--lightgrey)}


.g2 img.round{width: 100%;aspect-ratio: 1/1; object-fit: cover; object-position: center; border-radius: var(--gap); max-width: 600px;}

button,.button{cursor: pointer; border: none; text-align: center; text-decoration: none;  background: none; font-family: inherit; color: inherit; padding: .3rem 1.2rem .4rem 1.2rem; background-color: var(--blue); color: var(--lightgrey); border-radius: 1000px; transition: all 0.3s ease;
font-size: 1.2rem;
}

button:hover,.button:hover{background-color: var(--orange); color:var(--lightgrey)}
button.bgo:hover,.button.bgo:hover{background-color: var(--lightgrey) !important; color:var(--blue)}

#menu{display: flex; justify-content: space-between;width: 100%; align-items: center;}
.menuitems{display: flex; gap: calc(var(--gap) * .5); align-items: center;}
.menuitems a{text-decoration: none; font-size: 1rem !important;}
.menuitems a.active{text-decoration: underline; color:var(--orange)}
.logo{width: 250px;}

.g2{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: calc(var(--gap) * 1);
}

.sb{align-self: flex-end;}
.st{align-self: flex-start;}
.sc{align-self: center;}

.symbol img{width: 300px;}

#footer{display: grid;gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
#footer img{width: 50px;}
.endfooter{text-align: right;}

.mobile{display: none;}

@keyframes fadeFrom {
  from{opacity: 0; transform: translateY(120px);}
  to{opacity: 1; transform: translateY(0px);}
}
.g2 > * {animation: fadeFrom both; animation-duration: .1s; animation-timeline: view(); animation-range: entry 20% cover 50%;}

@media (max-width:1000px) {
.logo{width: 186px;}

  .mobile{display: block;}
  #footer{grid-template-columns: 1fr; }
  #footer *{text-align: center !important;}
  .g2.invert >div:nth-child(1){order: 2;}
  .g2.invert >div:nth-child(2){order: 1;}
  .desktop{display: none;}
  .g2{grid-template-columns: 1fr;}
 :root{--gap:30px;}
h1{font-size: 25pt; }
h1.hsmall{font-size: 20pt; }
.menuitems{width:100%;height:100dvh;left:0;top:0; position: fixed; z-index: 10000; background-color: var(--blue); display: grid; place-items: center; padding: 8rem 1rem; transform: translateX(100%); transition: all .3s ease; padding-top: 2rem;}
.menuitems.active{transform: translateX(0%);}
.menuitems span{margin-bottom: 4rem;}
#menu span{cursor: pointer;}
.menuitems *{color: var(--lightgrey);}
.menuitems .button{background-color: var(--orange);}
p.pb{font-size: 15pt; line-height: 20pt;}

}