/* fonts ------------------------------------------------------------------ */

    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
    /*
    font-family: 'Quicksand', sans-serif;
    */

    /*
    Font sizing with https://type-scale.com/
    */
    html{
        font-size: 100%; /*16px*/
        overflow-y:scroll;
    }

    body{
      font-weight: 400;
      line-height: 1.38;
    }

    p{margin-bottom: 1rem;}

    h1, h2, h3, h4, h5{
      margin-bottom: 1.38rem;
      font-weight: 400;
      line-height: 1.3;
    }

    h1 {
      font-size: 2.488rem;
    }

    h2 {font-size: 2.074rem;}
    h3 {font-size: 1.528rem;}
    h4 {font-size: 1.24rem;}
    h5 {font-size: 1rem;}
    small, .text_small {font-size: 0.833rem;}

/* fonts ------------------------------------------------------------ [END] */

/* common ---------------------------------------------------------------- */

    html{
/*        background-color: #caf0fb;*/
    }
    body{
        position: relative;
        padding-top: 72px;
        background: url("../img/common/moroccan-flower.gif") 0 0 repeat #e7f3dd;
        /*background-color: #cdf0ae; /* For browsers that do not support gradients 
        background-image: linear-gradient(0deg, #caf0fb, #caf0fb, #cdf0ae, #cdf0ae, #cdf0ae);*/
        font-family: 'Quicksand', sans-serif;
        color: #3d2645;
    }
    h1, h2, h3, h4, h5, h6{
        font-family: 'Nunito', sans-serif;
        color: #3d2645;
    }
    h1{
        display: none;
    }
    h2{
        margin-bottom: 0.6em;
    }
    .img-fluid{
        width: 100%;
    }
    a,
    a:link,
    a:visited,
    a:active{
        color: #1F4634;
    }
    a:hover,
    a:focus{
        color: rgba(31, 112, 72, 0.8);
    }
    
    /* accordion */
    .accordion-button:focus{
        box-shadow: none;
    }
    .accordion-button:not(.collapsed) {
        box-shadow:inset 0 -1px 0 rgba(0,0,0,.125)
    }
    .accordion-header .accordion-button{
        background-color: rgba(90,200,237,0.3);
    }
    .accordion-item{
        background-color: transparent;
    }

    /* forms */
    .form-control{
        background-color: rgba(255,255,255,0.3);
        border-color:  rgba(30,70,50,0.2);
    }
    .form-control:focus{
        background-color: rgba(255,255,255,0.8);
        box-shadow: none;
    }
    .form-control:placeholder{
        color: border-color:  rgba(30,70,50,0.8);
    }
    .btn:focus{
        box-shadow: none;
    }

    /* tables  */
    #walletContents table{
        background-color: rgb(35,35,35);
        color: rgba(0, 230, 140, 1.0);
    }
    #walletContents table thead{
        background-color: #19382a; /* For browsers that do not support gradients */
        background-image: linear-gradient(0deg, #19382a, #285943);
        border: none;
    }
    #walletContents table tbody{
        border: none;
        color: rgba(0, 230, 140, 0.95);
    }
    #walletContents table tfoot{
        background-color: #19382a; /* For browsers that do not support gradients */
        background-image: linear-gradient(0deg, #19382a, #285943);
        border: none;
    }
    #walletContents table, th, td {
        position: relative;
        border: 1px solid rgba(0, 230, 140, 0.5);
    }


/* common ---------------------------------------------------------- [END] */

/* main-nav ------------------------------------------------------------------ */

    .navbar{
        background-color: #19382a; /* For browsers that do not support gradients */
        background-image: linear-gradient(0deg, #19382a, #285943);
    }
    .navbar .navbar-brand{
        font-family: "Nunito", sans-serif;
        font-size: 2em;
        display: inline;
        width: 21%;
        color: #ffb30f;
    }
    .navbar .navbar-brand span{
        margin: -3px 0 0 4px;
        font-family: "Nunito", sans-serif;
        font-size: 10px;
        display: block;
        letter-spacing: 0.91px;
    }
    .navbar .navbar-nav .nav-link{
        color: #63c132;
    }
    .navbar .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover{
        color: #dbf2ce;
    }

/* main-nav ------------------------------------------------------------ [END] */

/* hero ---------------------------------------------------------------- */

    .hero-top{
        background: url("../img/common/fatfrog.jpg") top right no-repeat #000;
        background-size: cover;
        padding:6% 4% 17%;
    }
    .cardano-logo{
        margin-left:60px;
    }
    .hero-top h2{
        color: #fff;
        font-size: 4.5em;
        line-height: 1;
    }
    .hero-top p{
        color: #fff;
    }

    /* Policy ID copy to clipboard  */
    .hero-btm .policy-id-wrapper{
        position: relative;
        background-color: #f9fbf0;
        border:1px solid #d4d4b6;
        margin:-35px 5% 5%;
        padding:3%;
        border-radius: 12px;
    }
    .hero-btm label{
        display:inline-block;
        font-family: "Quicksand", sans-serif;
        font-size: 22px;
        font-weight: bold;
        margin-right:45px;
        vertical-align: -3px;
    }
    .hero-btm input.policy_input{
        position: relative;
        display:inline-block;
        border: 1px solid #b5c1bc;
        border-radius: 12px;
        outline: none;
        background: #eff3e8;
        font-family: "Nunito", sans-serif;
        font-size: 16px;
        padding: 10px 15px;
        width: 90%;
        max-width: 550px;
        color: #000;
    }
    .hero-btm .copy_to_clipbord{
        position: relative;
        display: inline-block;
        top: -8px;
        left: -23px;
        color:#000;
    }
    .hero-btm .copy_to_clipbord i{
        font-size: 11px;
    }
    .hero-btm .arrow-box {
        display: none;
        width: 73px;
        position: absolute;
        top: 4px;
        left: 624px;
        padding: 2px 4px;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 4px;
        color: #fff;
    }
    .hero-btm .arrow-box:after, .arrow-box:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .hero-btm .arrow-box:after {
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #000;
        border-width: 10px;
        margin-left: -10px;
    }
    .hero-btm .arrow-box:before {
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #000;
        border-width: 11px;
        margin-left: -11px;
    }

/* hero ---------------------------------------------------------- [END] */

/* about-page ---------------------------------------------------------------- */

    .about .card{
        background-color: transparent;
        border: none;
    }
    

/* about-page ---------------------------------------------------------- [END] */

/* contact-page ---------------------------------------------------------------- */

    .contact{
        
    }

/* contact-page ---------------------------------------------------------- [END] */

/* delegate-page ------------------------------------------------------------------ */

    .delegate .delegate-hero{
        background: url("../img/common/ffr-delegate-hero.jpg") top right no-repeat;
        background-size: cover;
        padding:6% 4% 17%;
    }
    .delegate .overlay{
        display: inline-block;
        margin-top: 3rem;
        padding:2rem;
        background-color: rgba(2, 121, 63, 0.8); /*#02793f;*/
        border-radius: 12px;
    }

    /* Fat Frog Dark Green Theme */
    .accordion-item {
      border: 1px solid #25462f;
      background-color: #1e3524; /* Fallback green tone */
      color: #fff;
    }

    .accordion-button {
      background-color: #25462f; /* Match header/footer green */
      color: #fff;
    }

    .accordion-button:not(.collapsed) {
      background-color: #2c5d3f; /* Slightly lighter for expanded */
      color: #fff;
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
    }

    .accordion-button.collapsed {
      color: #fff;
    }

    .accordion-button:focus {
      border-color: #2c5d3f;
      box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25); /* green glow */
    }

    .accordion-body {
      background-color: #1e3524; /* Match item bg */
      color: #fff;
    }

    .accordion-button::after {
      filter: invert(1); /* make arrow icon white */
    }

    .custom-ol {
        counter-reset: step;
        list-style: none;
        padding-left: 0;
    }

    .custom-ol li {
        position: relative;
        padding-left: 2.5em;
        margin-bottom: 1em;
    }

    .custom-ol li::before {
        counter-increment: step;
        content: counter(step);
        position: absolute;
        left: 0;
        top: 0;
        width: 1.8em;
        height: 1.8em;
        background-color: #252525;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 27px;
        font-weight: bold;
        font-family: sans-serif;
        font-size: 0.9em;
    }

    #delegatenow{
        scroll-margin-top:100px;
    }

/* delegate-page ------------------------------------------------------------ [END] */

/* footer ------------------------------------------------------------------ */

    footer{
        background: url("../img/common/footer-accent.jpg") 0 0 repeat-x #143333;
        padding: 25px 0 15px;
        color:#f7f7f7;
    }
    footer .footer-footer-strip{
        background-color: rgb(10,10,10);
        margin-bottom:-10px;
        padding:20px 0 5px;
    }
    footer p{
        color:#f7f7f7;
    }
    footer a,
    footer a:link,
    footer a:hover,
    footer a:focus,
    footer a:visited{
        text-decoration: none;
        color:#f7f7f7;
    }
    footer a:hover,
    footer a:focus{
        opacity:0.5;
    }
    footer .list-inline{
        float:right;
    }
    footer .list-inline .list-inline-item a,
    footer .list-inline .list-inline-item a:link,
    footer .list-inline .list-inline-item a:active{
        color: #fff;
    }

/* footer ------------------------------------------------------------ [END] */





/* media queries --------------------------------------------------------- */

/* /////////////////////////////////////////////////////////////////////// */
/* XTRA LARGE DESKTOP //////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (min-width:1400px){
        .hero-btm .arrow-box {
            left: 804px;
        }
    }

/* /////////////////////////////////////////////////////////////////////// */
/* LARGE DESKTOP ///////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (min-width:1200px) and (max-width:1399px){
        .hero-btm .arrow-box {
            left: 715px;
        }
    }

/* /////////////////////////////////////////////////////////////////////// */
/* LARGE DESKTOP /////////////////////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */


 

/* /////////////////////////////////////////////////////////////////////// */
/* SMALL DESKTOP ///////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (min-width:768px) and (max-width:991px){
        .hero-btm .arrow-box {
            left: 504px;
        }
        .cardano-logo{
            width:100px;
        }
        .hero-top h2{
            font-size: 3em;
        }
        .hero-top p{
            width:200px;
        }
    }

/* /////////////////////////////////////////////////////////////////////// */
/* SMALL DESKTOP /////////////////////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */

 


/* /////////////////////////////////////////////////////////////////////// */
/* SMALL TABLET & MOBILE ///////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (max-width:767px){
        .hero-btm .arrow-box {
            left: 416px;
        }
        .hero-top{
            background-position: right 0;
        }
        .cardano-logo{
            display:none;
        }
        .hero-top h2{
            font-size: 2em;
        }
        .hero-top p{
            width:150px;
        }
    }

/* /////////////////////////////////////////////////////////////////////// */
/* SMALL TABLET & MOBILE /////////////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */


/* /////////////////////////////////////////////////////////////////////// */
/* IPAD PORTRAIT ///////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */


    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){

    }

/* /////////////////////////////////////////////////////////////////////// */
/* IPAD PORTRAIT /////////////////////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */
    

/* /////////////////////////////////////////////////////////////////////// */
/* SMALL DESKTOP & MOBILE COMBINED /////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (max-width:991px){}

/* /////////////////////////////////////////////////////////////////////// */
/* SMALL DESKTOP & MOBILE COMBINED ///////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */




/* /////////////////////////////////////////////////////////////////////// */
/* LANDSCAPE PHONES AND DOWN ///////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (max-width:480px){
    }

/* /////////////////////////////////////////////////////////////////////// */
/* LANDSCAPE PHONES AND DOWN /////////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */




/* /////////////////////////////////////////////////////////////////////// */
/* mobile only background images, etc //////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// */

    @media (max-width:600px){
        .hero-btm .copy_to_clipbord,
        .delegate .copy_to_clipboard{
            display: none;
        }
        .hero-btm .arrow-box,
        .delegate .arrow-box{
            left: 50%;
        }


    }

    @media (max-width:360px){
        
    }

/* /////////////////////////////////////////////////////////////////////// */
/* mobile only background images /////////////////////////////////// [END] */
/* /////////////////////////////////////////////////////////////////////// */

/* media queries --------------------------------------------------- [END] */




/* ==========================================================================
Print styles.
========================================================================== */

@media print{
    *{
        background:transparent !important;
        color:#000 !important; /* Black prints faster */
        box-shadow:none !important;
        text-shadow:none !important;
    }

    .no-print{
        display:none;
    }

    a,
    a:visited{
        text-decoration:underline;
    }

    a[href]:after{
        content:" (" attr(href) ")";
    }

    abbr[title]:after{
        content:" (" attr(title) ")";
    }

    /*
    * Don't show links for images, or javascript/internal links
    */

    a[href^="javascript:"]:after,
    a[href^="#"]:after{
        content:"";
    }

    pre,
    blockquote{
        border:1px solid #999;
        page-break-inside:avoid;
    }

    thead{
        display:table-header-group;
    }

    tr,
    img{
        page-break-inside:avoid;
    }

    img{
        max-width:100% !important;
    }

    p,
    h2,
    h3{
        orphans:3;
        widows:3;
    }

    h2,
    h3{
        page-break-after:avoid;
    }
}

/* plugins.css */




