﻿/* Variables */
:root {
    --rcsi-red: #de1834;
    --rcsi-grey: #8996A0;
    --button-color: rgb(222, 24, 52);
    --accent-color: #5CB8B2;
    --form-width: 100%;
}
html {
    overflow-y: scroll;
}

body {
    font-family:Arial, sans-serif;
    font-size:1.2em !important;
    background-color:#dadfda;
}

a{
    text-decoration:underline;
    color:#000;
}

a:hover{
    text-decoration:none;
    color:#c60c30;
}

h1,
h2,
h3,
h4,
h5{
    color:#000;
    margin:5px 0 20px 0;
    padding:0 0 0 0;
    line-height:1.2em;
}

h1{
    font-size:2em;
}

h2{
    font-size:1.5em;
}

h3{
    font-size:1.2em;
}

h4{
    font-size:1.1em;
}

.container{
    max-width:1148px;
    margin-top:35px;
}

.container-t-and-c{
    width:1148px !important;
    margin-top:35px;
    border:red solid 1px;
}

.row{
    background:#fff;
}

.row-margin{
    margin:10px 0;
}

.row-nomargin{
    margin:0;
}

.row-no-topmargin{
    margin:0 0 10px 0;
}

.rcsi-crest {
    margin:12px 0 2px 0;
}

.red-bar-container{
    height:55px;
}

.red-bar{
    height:10px;
    background:#e01835;
    min-width:228px;
    max-width:300px;
    width:84%;
}

.strap-line{
    margin-bottom:24px;
    padding-bottom:8px !important;
    font-size:3em;
    line-height:1em;
}

.only-bottom-mp{
  margin-bottom:24px;
  padding-bottom:8px !important;
}

.the-thin-red-line{
    padding:10px 0 0 0;
    border-top:1px #c60c30 solid;
    max-width:429px;
}

.main-text p:first-child{
  font-size:1.2em;
  font-weight:bold;
}

/* Buttons and links */

a.donate:focus,
button.donate:focus,
.focused {
    /*outline: none;*/
    border: solid 1px var(--rcsi-grey);
    z-index: 9;
    border-radius:0;
}
a.donate,
button.donate {
    font-size:1.6em;
    background: var(--accent-color);
    color: white;
    border: 0;
    padding: 8px 8px;
    margin-top: 2px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-block;
    width: 100%;
	text-align:center;
	text-decoration:none;
}

a.donate:hover,
button.donate:hover {
    filter: contrast(115%);
	background: var(--rcsi-red);
}

a.donate:active,
button.donate:active {
    transform: translateY(0px) scale(0.98);
    filter: brightness(0.9);
}

a.donate:disabled,
button.donate:disabled {
    opacity: 0.5;
    cursor: none;
}


/* Media Queries */

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

    .hand-with-mobile{
        float:right;
        height:226px;
        width:231px;
        background-size:100%;
    }

}

/* Portrait tablets and small desktops */
@media (min-width: 767px) and (max-width: 991px) {

        .container{
            margin-top:10px;
        }

        .strap-line{
            font-size:2.8em;
            margin:0 0 12px 0;
        }

        .red-bar-container{
            height:25px;
        }

        .the-thin-red-line{
            padding:10px 0 0 0;
            border-top:1px #c60c30 solid;
            max-width:100%;
        }

        .footer-sprite-partners ul li,
        .footer-sprite-partners ul li a{
            margin:0 15px 0 0;
        }

}

/* Landscape phones and portrait tablets */
@media (max-width: 766px) {

        .container{
            margin-top:3px;
        }

        .strap-line{
            font-size:1.8em;
        }

        .red-bar-container{
            height:15px;
        }

        .app-store-buttons a{
            margin:0 0 10px 2px;
        }

        .footer-sprite-partners {
            overflow: hidden;
            background: #fff;
            padding: 10px 0 10px 0;
        }

        .footer-sprite-partners ul{
            overflow:hidden;
            width:100%;
            padding:0 0 0 0px;
        }

        .footer-sprite-partners ul li,
        .footer-sprite-partners ul li a{
            margin:0 10px 0 0;
        }

        .strap-line{
            margin:0 0 6px 0;
        }

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

        .strap-line{
            margin:0;
        }

        .footer-sprite-partners ul li,
        .footer-sprite-partners ul li a{
            margin:0 45px 0 0;
        }

}

/* Portrait phones and smaller */
@media (max-width: 360px) {

        .strap-line{
            margin:0;
        }

        .footer-sprite-partners ul li,
        .footer-sprite-partners ul li a{
            margin:0 72px 0 0;
        }

        .footer-sprite-partners ul li:nth-child(even),
        .footer-sprite-partners ul li a:nth-child(even){
            margin:0 0 0 0;
        }

}
