@font-face {

    font-family: OswaldLight;
    src: url(../CSSFonts/Oswald-Light.ttf);
}

@font-face {

    font-family: NunitoSans;
    src: url(../CSSFonts/NunitoSans_10pt-Light.ttf);
}

@font-face {

    font-family: KanitLight;
    src: url(../CSSFonts/Kanit-Light.ttf);
}

.polygon-enter-active {
    animation: 1s polygon reverse;
}
.polygon-leave-active {
    animation: 1s polygon;
}
@keyframes polygon {
    0% {
        clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
    }
    100% {
        clip-path:  polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%);
    }
}

#Small_Table_PageTitle h1,
#Small_Table_PageTitle div,
#Small_Table_PageTitle h3{
    margin: 0px;
}

#SmallPageTitleCTABox a:nth-child(1){
    margin-right: 3px;
}

#SmallProfileMainBannerBox{

    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;

}

#Small_Table_PageIntro {
    margin: auto;
    width: 90%;
}

#Small_Table_PageIntro p {

    font-family: NunitoSans;
    font-size: 20px;
    margin: 0px;

}

#Small_Table_PageIntro h2 {
    text-align: center;
    margin: 0px;
    text-decoration: underline;
    padding-bottom: 10px;

}

#SmallProfileQuoteBox{
    border-left: 10px black solid;
    width: 90%;
    margin: auto;
}

#SmallProfileQuoteBox h1{
    margin-left: 15px;
    font-family: OswaldLight;
    font-size: 40px;
}

#ProfilePageTitleGraphicBox{
    width: 30px;
    height: 30px;
}

#SmallBottomCTABox h1
{
    margin: 0px;
}

#SmallBottomCTABox{
    padding-bottom: 50px;
    padding-top: 50px;
    width: 80%;
    margin: auto;
}

.bottomCTAGetStartedCenterLink{
    width: 110px;
    display: block;
    margin: auto;
}

.bottomCTAContactCenterLink{
    width: 80px;
    display: block;
    margin: auto;
}

.centerTitle{
    text-align: center;
}

#SmallGetStartedContentSet{
    margin-bottom: 10px;
}

#SmallProfileContentArea{
    border: 1px black solid;
    padding: 10px;
    background-color: #DAB727;
    width: 80%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

#SmallProfileContentMainGraphicBox{
    width: 50px;
    height: 50px;
    margin: auto;
}

#SmallProfileContentAreaItems{
    background-color: #e5c630;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.13'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    margin: auto;
    width: 90%;
    border-radius: 5px;
    border: 1px #727201 solid;
    padding: 10px;
}

#SmallProfileContentAreaMainTitle{
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: underline;
}

.profileContentAreaItemBox{
    border-bottom: 1px black dotted;
}

.pEdit{
    color: #046499;
}

.pEdit:hover{
    text-decoration: underline;
}

#ProfileContentAreaItemsFirstNameBox,
#ProfileContentAreaItemsLastNameBox,
#ProfileContentAreaItemsAddressBox,
#ProfileContentAreaItemsUsernameBox,
#ProfileContentAreaItemsEmailBox,
#ProfileContentAreaItemsPwdBox
{
    width: 30px;
    height: 30px;
}

#SmallProfileUpdateBtn{
    margin-top: 10px;
    margin-bottom: 10px;
}

#SmallProfileAreaLoginBtn,
#SmallProfileContentUpdateBtn
{
    background: linear-gradient(#F7A005, #F7C305);
    border: 1px black solid;
    border-radius: 2px;
    padding: 5px;
    font-size: 20px;
    font-family: KanitLight;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#SmallProfileAreaLoginBtn:hover,
#SmallProfileContentUpdateBtn:hover{

    background: linear-gradient(#E58E03, #E2AD03);
    text-decoration: underline;

}

#SmallProfileAreaLoginBtn:active,
#SmallProfileContentUpdateBtn:active{

    background: linear-gradient(#BA6A02, #C49605);

}

#SmallProfileContentUpdateBox{
    margin: auto;
    width: 30px;
    height: 30px;
}

#SmallFirstNameBox,
#SmallLastNameBox,
#SmallAddressBox,
#SmallUsernameBox,
#SmallEmailBox,
#SmallPwdBox{
    padding-top: 10px;
    padding-bottom: 10px;
}

#SmallProfileAreaLoginBox{
    width: 30px;
    height: 30px;
    margin: auto;
}

#SmallProfileAreaLoginBtn{
    margin-bottom: 10px;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    background-color: #EDF794;
}

input:autofill {
    background-color: #EDF794;

}

input:-webkit-autofill {
    background-color: #EDF794;

}

#Small_ProfileContentLogin_Username,
#Small_ProfileContentLogin_Password{
    font-size: 20px;
    width: 200px;
    height: 20px;
    border: 1px black solid;
    border-radius: 10px;
    padding: 10px;
    background-color: #EDF794;
    font-family: NunitoSans;

}

#Small_ProfileContentLogin_Username:focus,
#Small_ProfileContentLogin_Password:focus{
    background-color: #EDF794;

}

#Small_ProfileContentLogin_Username{
    margin-bottom: 3.5px;
}

#Small_ProfileContentLogin_UsernameBox,
#Small_ProfileContentLogin_PasswordBox{
    width: 200px;
}

#SmallProfileLoginContainer{
    border: 1px black solid;
    border-radius: 10px;
    background-color: #C9A81F;
    width: 270px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 10px;
}

#SmallProfileContentLoginCloseBox{
    width: 30px;
    height: 30px;
    margin: auto;
}
#SmallProfileLoginCloseBtn{
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: goldenrod;
}

#SmallProfileLoginGoBtn{
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
    border: 1px black solid;
    border-radius: 10px;
    background-color: goldenrod;
}

#SmallProfileLoginCloseBtn:hover,
#SmallProfileLoginGoBtn:hover{
    background-color: #E6B400;
}

#SmallProfileLoginCloseBtn:active,
#SmallProfileLoginGoBtn:active{
    background-color: #E6CC00;
}

#SmallProfileContentLoginGoBox{
    width: 30px;
    height: 30px;
}

#SmallProfileContentLoginUserBox{
    width: 25px;
    height: 25px;
    border: 1px black solid;
    background-color: #EDF794;
    border-radius: 10px;
    padding: 5px;
}

#SmallProfileContentLoginPwdBox{
    width: 25px;
    height: 25px;
    border: 1px black solid;
    background-color: #EDF794;
    border-radius: 10px;
    padding: 5px;
}

#SmallProfileLoginArea{
    display: none;
}