@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

 /*
   --txt-primary: 'Cormorant Garamond', serif;
    --txt-secondary: 'Poppins', sans-serif;
 */
 
 :root {
     --clr-primary: #001c39;
    --clr-secondary: #ffca05;
    --clr-accent: #FF5858;
    --clr-white:#ffffff;
    --clr-black:#131313;    
    --clr-gray: #808080;
    --clr-graylight: #e7e7e7;
    --clr-graydark: #4D4D4D;
    --clr-disabled: 0, 28, 57; /* for --clr-primary */
    
    --txt-primary: 'Cormorant Garamond', serif;
    --txt-secondary: 'Poppins', sans-serif;
    
    --calc-inherit: calc(100% - 2px);
    --fig-size-maxwidth: 1200px;
    --fig-radius-round: 50px;
    
    
    --fig-size-tiny: 10px;
    --fig-size-small: 12px;
    --fig-size-xsmall: 14px;
    --fig-size-normal: 16px;
    --fig-size-medium: 20px;
    --fig-size-large: 25px;
    --fig-size-xlarge: 30px;
 }
 
 
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border-width: 0;
  border-style: solid;
  padding:0px;
  margin:0px;
}

*{
  -webkit-touch-callout: none;
}

html, body {
    font-family: var(--txt-font-primary);
    font-size: var(--fig-size-normal);
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.15;
    color: var(--clr-black);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-overflow-style: scrollbar;
    scroll-behavior: smooth;
    background: -webkit-linear-gradient(
        #fff 40px,
        #fff 99%,
        transparent 0
      );
}


@-ms-viewport {
  width: device-width;
}


a,
a:active,
a:visited,
a:hover,
a:focus {
    text-decoration: none;
}

h1 {font-size: 36px; letter-spacing: 1px; word-spacing: 1px;}
h2 {font-size: 30px; letter-spacing: 1px; word-spacing: 1px;}
h3 {font-size: 24px; letter-spacing: 1px; word-spacing: 1px;}
h4 {font-size: 18px; letter-spacing: 1px; word-spacing: 1px;}
h5 {font-size: 14px; letter-spacing: 1px; word-spacing: 1px;}
h6 {font-size: 12px; letter-spacing: 1px; word-spacing: 1px;}

div,
span,
p,
ul,
ol,
li,
img,
label,
article,
aside,
dialog,
fieldset,
legend,
blockquote,
footer,
header,
main,
nav,
section {
  display: block;
}


dl dt,
dl dd,
ul li,
ol li{
    margin: 0;
    padding: 0;
    list-style-type: none !important;
}


button {
  border-radius: 0;
}
button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  -webkit-appearance: listbox;
}
textarea {
  overflow: auto;
  resize: vertical;
}


/*---------CLASSES-------------*/
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.bg_black {background-color: var(--clr-black);color: var(--clr-white);}
.bg_white {background-color: var(--clr-white);color: var(--clr-black);}
.bg_light {background-color: var(--clr-graylight);color: var(--clr-black);}
.bg_primary {background-color: var(--clr-primary);color: var(--clr-white);}
.bg_accent {background-color: var(--clr-accent);color:var(--clr-primary);}
.bg-transparent {  background-color: transparent !important;}

.strong{
    font-weight: bold;
}

.italics{
    font-style: italic;
}


.shadow{
    box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.05), 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.12);
}

.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

.border {
    border: 1px solid red;
}

.spacer{
    display: block;
    width: 100%;
    position: relative;
    margin: 40px 0px 40px 0px;
}


.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: var(--fig-size-maxwidth);
  max-width: var(--fig-size-maxwidth);
  margin: 0 auto;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

.flex{
    display: flex;
    flex:1;    
}

.flex-row{
    display: flex;
    flex-direction: row;
    gap: var(--fig-size-tiny);
}

.flex-col{
    display: flex;
    flex-direction: column;
    gap: var(--fig-size-tiny);
}

.flex-space-btwn{
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.flex-space-even{
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

.flex-space-center{
    justify-content: center;
    align-items: center;
    align-content: center;
}

.flex-space-end{
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

.flex-space-start{
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.flex-align-self-top{
    align-self: flex-start;
}

.flex-align-self-btm{
    align-self: flex-end;
}

.flex-align-self-center{
    align-self: center;
}

.flex-align-self-stretch{
    align-self: stretch;
}

.flex-align-self-base{
    align-self: baseline;
}