@charset "UTF-8";


/* COLOURS

Main Brown Type #544123 

font-family: 'Crimson Text', serif;
font-family: 'Mrs Saint Delafield', cursive;



*/



/*------------------------- Main  */
html, body{
	width: 100%;
	height: 100%;
	background-color: #FFFAE8;
	font-family: 'Crimson Text', serif;
    font-weight: 400;
	font-size: 10pt;
	letter-spacing: 1px;
}

span{
    display: block;
}

#abboent{
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 300px;
}


p {
    color: #544123;
    font-size: 14px;
    font-family: 'Crimson Text', serif;
}

a {
    color: #544123;
    text-decoration: none;
    cursor: pointer;
}

.button{
    border: 1px #544123 solid;
    padding: 12px 36px;
    font-size: 18px;
    margin-top: 30px;
    position: relative;
    display: inline-block;
}

.button:hover{
    color: #AF8849;
    border-color: #AF8849;
}


h1 {
    font-size: 2.8em;
    color: #544123;
    line-height: 40px;
    margin-bottom: 30px;
}

h2 {
    margin-top: 36px;
    font-size: 1.6em;
    color: #544123;
    line-height: 1.2em;
}

h3 {
    font-size: 6em;
    font-family: 'Mrs Saint Delafield', cursive;
    color: #544123;
}


.c{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.left{
    float: left;
}

.right{
    float: right;
}

.margin_spacing{
    margin-left: 24px;
    margin-bottom: 30px;
    margin-top: 16px;
}

.script{
    width: 500px;
    height: 100px;
    right: 100px;
    bottom: 140px;
    position: fixed;
    text-align: right;
    z-index: 3;
}

#script_underline_A{
    width: 350px;
    border-top: 1px solid #544123;
    height: 20px;
    right: 0px;
    bottom: 140px;
    position: fixed;
    z-index: 3;
}

#script_underline_D{
    width: 500px;
    border-top: 1px solid #544123;
    height: 20px;
    right: 0px;
    bottom: 140px;
    position: fixed;
    z-index: 3;
}


#script_underline_M{
    width: 500px;
    border-top: 1px solid #544123;
    height: 20px;
    right: 0px;
    bottom: 140px;
    position: fixed;
    z-index: 3;
}


#script_underline_C{
    width: 360px;
    border-top: 1px solid #544123;
    height: 20px;
    right: 0px;
    bottom: 140px;
    position: fixed;
    z-index: 3;
}

#Pattern_A, #Pattern_D, #Pattern_M, #Pattern_C {
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}

/*------------------------- TopNav */


.mainLogo {
    position: absolute;
    left: 100px;
    margin-top: 54px;
    cursor: pointer;
}

#maclogo img{
    width: 290px;
    z-index: 100000;
}

.mobileMainLogo{
    top: 20px;
    width: 162px;
    height: 40px;
    margin-left: 10%;
    margin-top: 15px;
    cursor: pointer;
}

li{
    line-height: 0;
}

#topMenu{
    width: 100%;
    height: auto;
    z-index: 10000;
    position: absolute;
}

#topNav {
    list-style-type: none;
    margin-top: 70px;
    height: 100px;
    display: inline-block;
    float: right;
    margin-right: 100px;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    z-index: 10000;
}

#topNav li{
    display: inline-block;
    right: 10px;
    margin-left: 10px;
    float: left;
}

#topNav li a{
    right: 10px;
    color: #544123;
    margin-left: 12px;
  	font-size: 18px;
}

#topNav li a:hover, #footerNav li a:hover{
    color: #AF8849;
    opacity: 1;
    -webkit-transition: opacity .2s ease-in;
    -moz-transition: opacity .2s ease-in;
    -o-transition: opacity .2s ease-in;
    -ms-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
}

/*Current Page Underline Styling*/

body.about a.about_nav, body.debt a.debt_nav, body.make a.make_nav, body.contact a.contact_nav{
    border-bottom: 1px solid #785928;
    padding-bottom: 6px;
}

body.about a.about_nav:hover, body.debt a.debt_nav:hover, body.make a.make_nav:hover, body.contact a.contact_nav:hover{
    border-bottom: 1px solid #AF8849;
}
/*----------------------------------*/

#nav_underline_A{
    position: fixed;
    width: 84px;
    height: 1px;
    background-color: #785928;
    right: 513px;
    top: 86px;
    z-index: 10;
}

#hamburger{
    text-align: center;
    color: white;
    float: right;
    margin-top: 18px;
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
    display: none;
}

#mobileMenu{
    position: fixed;
    z-index: 50;
    height: 100%;
    width: 100%;
    top: -22px;
    background-color: #FFFAE8;
}


#mobileMenuNav{
    margin-top: 100px;
    text-align: center;
    text-transform: uppercase;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 9999999;
}

#mobileMenuNav li{
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #999;
    list-style-type: none;
}

#mobileMenuNav li:last-child{
    border-bottom: none;
}

#footer{
    position: fixed;
    height: 50px;
    font-size: 12px;
    bottom: 0px;
    right: 160px;
    z-index: 3;
}

#footer_p{
    font-size: 12px;
}


#BBB_Logo{
    height: 60px;
    display: inline-block;
    position: fixed;
    right: 50px;
    bottom: 0px;
    z-index: 3;
    opacity: 0.6;
}

#Large_A{
    height: 106%;
    right: -90px;
    top: -20px;
}

#Large_D{
    height: 106%;
    right: -100px;
    top: -20px;
}

#Large_M{
    height: 106%;
    right: -320px;
    top: -20px;
}

#Large_C{
    height: 106%;
    right: -26px;
    top: -20px;
}

.large_letters{
    position: fixed;
    z-index: 2;
}

.block{
    z-index: 10;
    width: 500px;
    position: absolute;
    left: 100px;
    top: 33%;
    animation: fadein 2.5s;
    -moz-animation: fadein 2.5s; /* Firefox */
    -webkit-animation: fadein 2.5s; /* Safari and Chrome */
    -o-animation: fadein 2.5s; /* Opera */
}

#makeapayment_block{
    z-index: 10;
    width: 530px;
    position: absolute;
    left: 100px;
    top: 18%;
    animation: fadein 2.5s;
    -moz-animation: fadein 2.5s; /* Firefox */
    -webkit-animation: fadein 2.5s; /* Safari and Chrome */
    -o-animation: fadein 2.5s; /* Opera */
}

#makeapayment_h1{
    margin-bottom: 55px;
}

.details p{
    font-size: 11px;
    font-family: 'Nunito Sans', sans-serif;
    margin-bottom: 4px;
}

#bank_logo_holder{
    margin-top: 30px;
    margin-bottom: 150px;
    margin-left: 24px;
}

.bank_logo{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 30px;
    opacity: 0.7;
}

.bank_logo:hover{
    opacity: 1;
}

#privacy_block{
    margin-top: -140px;
}

#maclogo_mobile{
    display: none;
}

#hamburger{
    text-align: center;
    color: #544123;
    float: right;
    margin-top: 18px;
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;

}

#mobileMenu{
    display: none;
}

#topMenuMobile{
    display: none;
    height: 72px;
    background-color: #FFFAE8;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border: 0;
    z-index: 100000;
    margin: 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}

#footer_mobile{
    display: none;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 1;
    background-color: #FFFAE8;
}

.footer_p_mobile{
    font-size: 9px;
}



/***************** Animations ****************************/


.pattern{
    animation-name: ckw;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes ckw {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*****************     RESPONSIVE DESIGN - HEIGHT   ************************/


@media screen and (min-height: 750px) {

                                    #Large_A{
                                        right: -300px;
                                    }

                                    #Large_D{
                                        right: -180px;
                                    }

                                    #Large_M{
                                        height: 90%;
                                        right: -40%;
                                        top: 10%;
                                    }

                                    #Large_C{
                                        right: -26px;
                                    }

}

        @media screen and (min-height: 1000px) {

                                            #Large_A{
                                                right: -10%;
                                                height: 60%;
                                                top: 20%;
                                            }

                                            #Large_D{
                                                right: -10%;
                                                height: 60%;
                                                top: 20%;
                                            }

                                            #Large_M{
                                                right: -30%;
                                                height: 60%;
                                                top: 20%;
                                            }

                                            #Large_C{
                                                right: -2%;
                                                height: 60%;
                                                top: 20%;
                                            }
}

/*****************     RESPONSIVE DESIGN - WIDTH  ************************/

		@media screen and (min-width:1600px) {
            
            #makeapayment_block{
                left: 15%;
            }

            .mainLogo{
                left: 15%;
            }

            .block{
                left: 15%;
            }

            #topNav{
                margin-right: 15%;
            }

            #footer{
                right: 18%;
            }

            #BBB_Logo{
                right: 12%;
            }

            #Large_A{
                right: 10%;
            }

            #Large_D{
                right: 10%;
            }

            #Large_M{
                right: 10%;
            }

            #Large_C{
                right: 10%;
            }

            #nav_underline_A{
                right: 513px;
            }

            #nav_underline_D{
                width: 130px;
                height: 1px;
                background-color: #785928;
                right: 365px;
                top: 86px;
                z-index: 10;
            }

            #nav_underline_M{
                width: 130px;
                height: 1px;
                background-color: #785928;
                right: 211px;
                top: 86px;
                z-index: 10;
            }

            #nav_underline_C{
                width: 90px;
                height: 1px;
                background-color: #785928;
                right: 100px;
                top: 86px;
                z-index: 10;
            }
}


														@media screen and (max-width: 1050px) {

                                                                            #Large_A{
                                                                                opacity: 0.20;
                                                                            }

                                                                            #Large_D{
                                                                                opacity: 0.20;
                                                                            }

                                                                            #Large_M{
                                                                                opacity: 0.20;
                                                                            }

                                                                            #Large_C{
                                                                                opacity: 0.20;
                                                                            }

                                                                            .script{
                                                                                display: none;
                                                                            }

                                                                            #nav_underline_M,
                                                                            #nav_underline_A,
                                                                            #nav_underline_D,
                                                                            #nav_underline_C,
                                                                            #script_underline_M,
                                                                            #script_underline_D,
                                                                            #script_underline_A,
                                                                            #script_underline_C{
                                                                                display: none;
                                                                            }

                                                                            #footer{
                                                                                display: none;
                                                                            }

                                                                            #topMenu{
                                                                                display: none;
                                                                            }

                                                                            #maclogo{
                                                                                display: none;
                                                                            }

                                                                            #maclogo_mobile{
                                                                                display: block;
                                                                                margin-left: auto;
                                                                                margin-right: auto;
                                                                                width: 100%;
                                                                                height: auto;
                                                                                margin-top: 50px;
                                                                            }

                                                                            #topMenuMobile{
                                                                                display: block;
                                                                            }

                                                                            #hamburger{
                                                                                display: block;
                                                                            }
                                                                            #footer_mobile{
                                                                                display: block;
                                                                                z-index: 10;
                                                                            }

}

																			@media screen and (max-width:760px) {
                                                                                .block, #makeapayment_block, #privacy_block{
                                                                                    text-align: center;
                                                                                    width: 80%;
                                                                                    left: 0;
                                                                                    margin-left: 10%;
                                                                                    margin-right: 10%;
                                                                                    top: 100px;
                                                                                    margin-top: 0px;
                                                                                }

                                                                                #bank_logo_holder{
                                                                                    text-align: center;
                                                                                    width: 100%;
                                                                                    display: block;
                                                                                    margin-left: 0px;
                                                                                }

                                                                                .bank_logo{
                                                                                    display: inline-block;
                                                                                    float: none;
                                                                                    width: 10%;
                                                                                    height: auto;
                                                                                    margin-top: 1%;
                                                                                    margin-right: 2%;
                                                                                    margin-left: 2%;
                                                                                    vertical-align: top;
                                                                                }

                                                                                .margin_spacing{
                                                                                    margin-left: 0px;
                                                                                }

																		
}


																					                            @media screen and (max-width: 560px){
                                                                                                                    #topNav li a{
                                                                                                                        font-size: 14px;
                                                                                                                    }
																					                            

}