/* ------------- 
    slightly related to colors... 
    these things were not working so good with hover colors,
    so we went with a scale instead.
------------------ */


.arrow-a svg {
    transform: scale(1);
    transform-origin: center;
    transition: all 0.3s;
}

.has_link .arrow-a:hover  {
    cursor: pointer;
}
.has_link .arrow-a:hover svg {
    transform: scale(1.15);
}

.has_link .arrow-a:hover span {
    transition: all .4s;
    transform-origin: left;
}
.has_link .arrow-a:hover span {
    font-weight: 800;
/*    transform: scale(1.05);*/
}
.has_link .arrow-a .c-image {
    transition: all 0.3s ease;
}
.has_link .arrow-a:hover .c-image {
    transform: scale(1.02);
}

/*.has_no_link .arrow-a:hover {
    cursor: initial;
}
.has_no_link .arrow-a:hover .c-image {
    transform: scale(1);
}
.has_no_link .arrow-a:hover span {
    font-weight: 600;
}*/



/* ------------- like if some color themes have 
a section with also a different bg color --------- */




.black-bg * {
    color: white;
}
.black-bg {
    background-color: black;
}
.black-bg .bttn1 {
    border-color: white;
}

body {
    --gray-link-hover: #B8B8B8;
    --white-link-hover: white;
}


/* ------------- .color-theme-black ------------------ */

.color-theme-black {
    /*    bg*/
    --bg: black;
    /*    text*/
    --txt: white;
    /*    bttn bg*/
    --bttn: white;
    background-color: var(--bg); 
}
.color-theme-black .gform_wrapper label,
.color-theme-black * {
    color: var(--txt);
}
.color-theme-black .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-black .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-black .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-black .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-black .arrow-link span {
    color: var(--bttn);
}
.color-theme-black .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-black .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-black .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-black .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-black .arrow-a:hover svg path {
    fill: var(--bttn);
}*/
.color-theme-black .line {
    border-bottom-color: var(--bttn);
}
.color-theme-black .top-line {
    border-top-color: var(--bttn);
}
.color-theme-black .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-black a {
    color: var(--bttn);
}
.color-theme-black a:hover {
    color: var(--gray-link-hover);
}





/* ------------- .color-theme-green ------------------ */

.color-theme-green {
    /*    bg*/
    --bg: #016555;
    /*    text*/
    --txt: #A1F779;
    /*    bttn bg*/
    --bttn: #A1F779;
    background-color: var(--bg);
}
.color-theme-green * {
    color: var(--txt);
}
.color-theme-green .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-green .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-green .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-green .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-green .arrow-link span {
    color: var(--bttn);
}
.color-theme-green .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-green .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-green .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-green .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-green .arrow-a:hover svg path {
    fill: var(--bttn);
}*/
.color-theme-green .line {
    border-bottom-color: var(--bttn);
}
.color-theme-green .top-line {
    border-top-color: var(--bttn);
}
.color-theme-green .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-green a {
    color: var(--bttn);
}
.color-theme-green a:hover {
    color: var(--white-link-hover);
}








/* ------------- .color-theme-white ------------------ */

.color-theme-white {
    /*    bg*/
    --bg: #ffffff;
    /*    text*/
    --txt: #000000;
    /*    bttn bg*/
    --bttn: #000000;
    --other: #B8B8B8;
    background-color: var(--bg);
}
.color-theme-white * {
    color: var(--txt);
}
.color-theme-white .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-white .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-white .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-white .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-white .arrow-link span {
    color: var(--bttn);
}
.color-theme-white .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-white .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-white .arrow-link:hover span {
    color: var(--bttn);
}
.color-theme-white .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-white .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-white .line {
    border-bottom-color: var(--bttn);
}
.color-theme-white .top-line {
    border-top-color: var(--bttn);
}
.color-theme-white .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-white a {
    color: var(--bttn);
}
.color-theme-white a:hover {
    color: var(--gray-link-hover);
}















/* ------------- .color-theme-neon-green ------------------ */

.color-theme-neon-green {
    /*    bg*/
    --bg: #A1F779;
    /*    text*/
    --txt: #016555;
    /*    bttn bg*/
    --bttn: #016555;
    background-color: var(--bg);
    --other: #B8B8B8;
}
.color-theme-neon-green * {
    color: var(--txt);
}
.color-theme-neon-green .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-neon-green .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-neon-green .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-neon-green .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-neon-green .arrow-link span {
    color: var(--bttn);
}
.color-theme-neon-green .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-neon-green .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-neon-green .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-neon-green .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-neon-green .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-neon-green .line {
    border-bottom-color: var(--bttn);
}
.color-theme-neon-green .top-line {
    border-top-color: var(--bttn);
}
.color-theme-neon-green .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-neon-green a {
    color: var(--bttn);
}
.color-theme-neon-green a:hover {
    color: var(--white-link-hover);
}









/* ------------- .color-theme-cream ------------------ */

.color-theme-cream {
    /*    bg*/
    --bg: #FFFDEA;
    /*    text*/
    --txt: #000000;
    /*    bttn bg*/
    --bttn: #000000;
    background-color: var(--bg);
    --other: #B8B8B8;
}
.color-theme-cream * {
    color: var(--txt);
}
.color-theme-cream .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-cream .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-cream .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-cream .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-cream .arrow-link span {
    color: var(--bttn);
}
.color-theme-cream .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-cream .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-cream .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-cream .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-cream .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-cream .line {
    border-bottom-color: var(--bttn);
}
.color-theme-cream .top-line {
    border-top-color: var(--bttn);
}
.color-theme-cream .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-cream a {
    color: var(--bttn);
}
.color-theme-cream a:hover {
    color: var(--white-link-hover);
}








/* ------------- .color-theme-magenta ------------------ */

.color-theme-magenta {
    /*    bg*/
    --bg: #AD216A;
    /*    text*/
    --txt: #F6CDED;
    /*    bttn bg*/
    --bttn: #F6CDED;
    background-color: var(--bg);
    --other: #B8B8B8;
}
.color-theme-magenta * {
    color: var(--txt);
}
.color-theme-magenta .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-magenta .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-magenta .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-magenta .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-magenta .arrow-link span {
    color: var(--bttn);
}
.color-theme-magenta .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-magenta .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-magenta .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-magenta .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-magenta .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-magenta .line {
    border-bottom-color: var(--bttn);
}
.color-theme-magenta .top-line {
    border-top-color: var(--bttn);
}
.color-theme-magenta .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-magenta a {
    color: var(--bttn);
}
.color-theme-magenta a:hover {
    color: var(--gray-link-hover);
}









/* ------------- .color-theme-light-pink ------------------ */

.color-theme-light-pink {
    /*    bg*/
    --bg: #F6CDED;
    /*    text*/
    --txt: #960005;
    /*    bttn bg*/
    --bttn: #960005;
    background-color: var(--bg);
    --other: #B8B8B8;
}
.color-theme-light-pink * {
    color: var(--txt);
}
.color-theme-light-pink .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-light-pink .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-light-pink .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-light-pink .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-light-pink .arrow-link span {
    color: var(--bttn);
}
.color-theme-light-pink .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-light-pink .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-light-pink .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-light-pink .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-light-pink .arrow-a:hover svg path {
    fill: var(--other);
}
*/
.color-theme-light-pink .line {
    border-bottom-color: var(--bttn);
}
.color-theme-light-pink .top-line {
    border-top-color: var(--bttn);
}
.color-theme-light-pink .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-light-pink a {
    color: var(--bttn);
}
.color-theme-light-pink a:hover {
    color: var(--white-link-hover);
}






/* ------------- .color-theme-pale-blue ------------------ */

.color-theme-pale-blue {
    /*    bg*/
    --bg: #D5F3FF;
    /*    text*/
    --txt: #035167;
    /*    bttn bg*/
    --bttn: #035167;
    background-color: var(--bg);
/*    --other: #B8B8B8;*/
}
.color-theme-pale-blue * {
    color: var(--txt);
}
.color-theme-pale-blue .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-pale-blue .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-pale-blue .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-pale-blue .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-pale-blue .arrow-link span {
    color: var(--bttn);
}
.color-theme-pale-blue .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-pale-blue .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-pale-blue .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-pale-blue .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-pale-blue .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-pale-blue .line {
    border-bottom-color: var(--bttn);
}
.color-theme-pale-blue .top-line {
    border-top-color: var(--bttn);
}
.color-theme-pale-blue .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-pale-blue a {
    color: var(--bttn);
}
.color-theme-pale-blue a:hover {
    color: var(--white-link-hover);
}





/* ------------- .color-theme-deep-blue ------------------ */

.color-theme-deep-blue {
    /*    bg*/
    --bg: #035167;
    /*    text*/
    --txt: #D5F3FF;
    /*    bttn bg*/
    --bttn: #D5F3FF;
    background-color: var(--bg);
/*    --other: #B8B8B8;*/
}
.color-theme-deep-blue * {
    color: var(--txt);
}
.color-theme-deep-blue .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-deep-blue .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-deep-blue .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-deep-blue .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-deep-blue .arrow-link span {
    color: var(--bttn);
}
.color-theme-deep-blue .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-deep-blue .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-deep-blue .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-deep-blue .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-deep-blue .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-deep-blue .line {
    border-bottom-color: var(--bttn);
}
.color-theme-deep-blue .top-line {
    border-top-color: var(--bttn);
}
.color-theme-deep-blue .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-deep-blue a {
    color: var(--bttn);
}
.color-theme-deep-blue a:hover {
    color: var(--gray-link-hover);
}







/* ------------- .color-theme-red ------------------ */

.color-theme-red {
    /*    bg*/
    --bg: #960005;
    /*    text*/
    --txt: #FF8B5A;
    /*    bttn bg*/
    --bttn: #FF8B5A;
    background-color: var(--bg);
/*    --other: #B8B8B8;*/
}
.color-theme-red * {
    color: var(--txt);
}
.color-theme-red .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-red .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-red .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-red .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-red .arrow-link span {
    color: var(--bttn);
}
.color-theme-red .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-red .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-red .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-red .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-red .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-red .line {
    border-bottom-color: var(--bttn);
}
.color-theme-red .top-line {
    border-top-color: var(--bttn);
}
.color-theme-red .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-red a {
    color: var(--bttn);
}
.color-theme-red a:hover {
    color: var(--gray-link-hover);
}





/* ------------- .color-theme-orange ------------------ */

.color-theme-orange {
    /*    bg*/
    --bg: #FF8B5A;
    /*    text*/
    --txt: #960005;
    /*    bttn bg*/
    --bttn: #960005;
    background-color: var(--bg);
/*    --other: #B8B8B8;*/
}
.color-theme-orange * {
    color: var(--txt);
}
.color-theme-orange .bttn1 {
    border-color: var(--bttn);
    color: var(--bg);
    background-color: var(--bttn);
}
.color-theme-orange .bttn1:hover {
    border-color: var(--bttn);
    color: var(--bttn);
    background-color: var(--bg);
}
.color-theme-orange .arrow-link svg path {
    fill: var(--bttn);
}
.color-theme-orange .arrow-link svg circle {
    stroke: var(--bttn);
}
.color-theme-orange .arrow-link span {
    color: var(--bttn);
}
.color-theme-orange .arrow-link:hover svg path {
    fill: var(--bg);
}
.color-theme-orange .arrow-link:hover svg circle {
    stroke: var(--bttn);
    fill: var(--bttn);
}
.color-theme-orange .arrow-link:hover span {
    color: var(--bttn);
}

.color-theme-orange .arrow-a svg path {
    fill: var(--bttn);
}
/*.color-theme-orange .arrow-a:hover svg path {
    fill: var(--other);
}*/
.color-theme-orange .line {
    border-bottom-color: var(--bttn);
}
.color-theme-orange .top-line {
    border-top-color: var(--bttn);
}
.color-theme-orange .any-path-fill svg path {
    fill: var(--bttn);
}
.color-theme-orange a {
    color: var(--bttn);
}
.color-theme-orange a:hover {
    color: var(--white-link-hover);
}










/*old color styles*/





.white-bg .arrow-link svg path {
    fill: black;
}
.white-bg .arrow-link svg circle {
    stroke: black;
}
.white-bg .arrow-link span {
    color: black;
}

.gradient-green {
    background: linear-gradient(180deg, #A1F779 -6.6%, #FFF 66.45%);
}
.gradient-orange {
    background: linear-gradient(180deg, #FF8B5A -6.6%, #FFFDEA 49.77%, #FFF 100%);
}
.gradient-blue {
    background: linear-gradient(180deg, #D5F3FF 41.83%, #FFFDEA 100%);
}
.gradient-cream {
    background: linear-gradient(180deg, #FFF 0%, #FFFDEA 100%);
}