@charset "UTF-8";
/* CSS Document */

/* RESET
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body{
    height:100%;
    font-family: 'anton', sans-serif;
    background-color: #c7d3db;
}
button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
/* VARIABLES
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
:root {
  --col-yellow: #f8c822;
  --col-red:    #ff3b00;
  --col-blue:   #0066ff;
  --col-green:  #009d4c;
  --col-green2: #06aa70;
  --col-orange: #f58f0c;
  --col-white:  #ffffff;
  --col-black:  #231f20;
  --col-grey:   #c7d3db;
  --mx-width:   1600px;
  --in-width:   1340px;
  --m-top-lrg:  80px;
  --p-top-lrg:  80px;
  --m-mid:      40px;
  --txt-lrg:    80px;
  --txt-mid:    35px;
  --txt-sml:    25px;
  --lh-sml:     35px;
  --pad-lrg:    100px;
  --pad-img:    20%;
  --pad-lrg:    50px;
  --pad-sml:    25px;
}
/* WIDTHS
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.wrap{
    width: 90%;
}
.container{
    width: 100%;
    max-width: var(--mx-width);
    background-color: var(--col-white);
}
.inner{
    width: 90%;
}
.wFull{
    width: 100%;
}
.w75{
    width: 75%;
}
.w90{
    width: 90%;
    padding: 5%;
}
.flex-wrap{
    /*width: 90%;*/
    display: flex;
}
.flex_cen{
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-25{
    width: 25%;
}
.flex-40{
    width: 40%;
}
.flex-50{
    width: 50%;
}
.flex-60{
    width: 60%;
}
.flex-75{
    width: 75%;
}
/* MARGINS, PADDING AND FLOATS
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.fLeft{
    float: left;
}
.fRight{
    float: right;
}
.fAuto{
    margin: auto;
}
.m_top{
    margin-top: var(--m-top-lrg);
}
.p_btm{
    padding-bottom: var(--m-top-lrg);
}
.p_top{
    padding-top: var(--m-top-lrg);
}
.pad_sml{
    padding: var(--pad-sml);
}
.pad_btm_sml{
    padding-bottom: var(--pad-sml);
}
.pad_lrg{
    padding: var(--pad-lrg);
}
.p_img{
    padding: var(--pad-img);
}
.p_10{
    padding: 5%;
}
.d_block{
    display: block;
}
/* HEADER
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.header{
    max-width: var(--mx-width);
    margin-top: var(--m-top-lrg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.header_img{
    max-width: 100%;
    max-height:100%;
}
.header_txt{
    color: var(--col-black);
}
.txt_lrg{
    font-size: var(--txt-lrg);
}
.txt_mid{
    font-size: var(--txt-mid);
}
/* COLOUR
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.col_white{
    color: var(--col-white);
}
.col_black{
    color: var(--col-black);
}
.bg_col_yellow{
    background-color: var(--col-yellow);
}
.bg_col_black{
    background-color: var(--col-black);
}
.bg_col_green{
    background-color: var(--col-green2);
}
/* TEXT
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.body {
  font-family: "Poppins", serif;
}
.b_500{
    font-weight: 500;
}
.b_700{
    font-weight: 700;
}
.b_sml{
  font-style: normal;
  font-size: var(--txt-sml);
  line-height: var(--lh-sml);   
}
.b_itl{
    font-style: italic;
}
.cen_txt{
    text-align: center;
}
.upp_txt{
    text-transform: uppercase;
}
.brd_txt{
    -webkit-box-shadow:inset 0px 0px 0px 10px var(--col-black);
    -moz-box-shadow:inset 0px 0px 0px 10px var(--col-black);
    box-shadow:inset 0px 0px 0px 10px var(--col-black);
}
.body_lrg{
    font-size: var(--txt-mid);
}
/* BLOCKS
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.block_blue{
    background-color: var(--col-blue);
}
.block_green{
    background-color: var(--col-green);
}
.block_orange{
    background-color: var(--col-orange);
}
/* BUTTONS
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
.button{
    width: 100%;
}
.button_mint{
}
.button_mint a{
    font-size: var(--txt-lrg);
    background-color: var(--col-red);
    padding: var(--pad-sml);
    color: var(--col-white);
    text-decoration: none;
    text-align: center;
}
.button_mint a:hover{
    background-color: var(--col-black);
}

/* RESPONSIVE
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
*/
/* Large devices (desktops, 990px and up) */
@media only screen and (max-width: 990px)
{
    :root {
      --mx-width:   100%;
      --in-width:   90%;
      --txt-lrg:    40px;
      --m-top-lrg:  20px;
      --pad-lrg:    0%;
      --pad-sml:    15px;
      --txt-sml:    20px;
      --lh-sml:    25px;
    }    
    .flex-25{
        width: 100%;
    }
    .flex-40{
        width: 100%;
    }
    .flex-50{
        width: 100%;
    }
    .flex-60{
        width: 100%;
    }
    .flex-75{
        width: 100%;
    }
    .flex-wrap{
        display: block;
    }
    .flex_cen{
        display: block;
    }
    .button{
        padding-top: 5%;
    }
}