﻿#root > article {
    min-height: 100%;
    max-width: 1280px;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
}

.login-opts {
    border: 1px solid #D8D8D8;
    background-color: #FFFFFF;
}

.login-opts h2 {
    color: #212121;
    font-family: "J&J Circular";
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 38px;
}

.login-opts li:not(:last-child) {
    border-bottom: 1px solid #D8D8D8;
}

.chevron::before {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
    color: #CA001B;
}

.chevron.right:before {
    left: 0;
    transform: rotate(45deg);
}

.chevron.bottom:before {
    top: 0;
    transform: rotate(135deg);
}

.chevron.left:before {
    left: 0.25em;
    transform: rotate(-135deg);
}

.body-content {
    margin-top: 50px;
}

body {
    background-color: #f4f4f4;
}

.disclaimer {
    color: #63666A;
    font-family: "J&J Circular";
    font-size: 12px;
    font-weight: 100;
    line-height: 18px;
    padding: 20px;
}

.disclaimer a {
    color: #000099;
}

.guideText {
    color: #888B8D;
    font-family: "J&J Circular";
    font-size: 16px;
    font-weight: 100;
    line-height: 26px;
}

div.login.Login {
    background-image: url('/images/photologinMain.png');
    background-repeat: no-repeat;

}

.login--headline {
    color: #000099;
    font-family: "J&J Circular";
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 55px;
}
.login--sub-header {
    color: #000099;
    font-family: "J&J Circular";
    font-size: 30px;
    font-weight: 900;
    line-height: 30px;
    padding-top: 20px;
}

ul.login-opts > li > div:nth-child(1){
    padding-right: 30px;
}

Footer {
    height: 110px !important;
}

@media (min-width: 376px){
    div.login.Login {
        padding: 80px;
    }

    .login-opts li {
        margin: 75px 75px 0px 75px;
        padding-bottom: 75px;
    }
    
    .login-opts {
        margin-top: 110px;
    }

    .login-opts h2 {
        font-size: 30px;
    }
    h1.login--headline {
        width: 370px;
    }

    div.login--sub-header{
        width: 440px;
    }
}

@media (max-width: 375px) {
    div.login.Login {
        padding: 40px;
    }

    .login-opts li {
        margin: 30px 30px 0px 30px;
        padding-bottom: 30px;
    }

    .login-opts {
        margin-top: 40px;
    }

    .login-opts h2 {
        font-size: 22px;
    }

    .guideText {
        font-size: 14px;
    }

    div.login--sub-header {
        font-size: 22px;
    }
}