﻿
/*-Body Controls-*/

body {
	font-family: 'Fira Sans', sans-serif;
	font-size: medium;
	 text-rendering: optimizeLegibility;
	color: #4c5c64;
    box-sizing:border-box;
}

div {
    box-sizing:border-box;
}

a{
    text-decoration: none;
    color:inherit;
}
a:hover {
    text-decoration:none;
    color:inherit;
    filter:brightness(110%);
}

a:visited {
    text-decoration:none;
    color:inherit;
}

    a.linked {

        color: inherit !important; 
    }

        a.linked:hover {

            background-color: #e7eff2 !important;
            border-radius:4px;
        }

.linked-nobright:hover {
    filter: brightness(100%) !important;
}

    a.linked-color {
        color: #05b0ee !important;
    }

        a.linked-color:hover {
            color: #BC3908 !important;
        }

    a.linked-white-color {
        color: white !important;
    }

        a.linked-white-color:hover {
            color: #BC3908 !important;
        }

    a.linked-foot {
        color: inherit !important;
        margin:10px 0;
        display:block;
    }

        a.linked-foot:hover {
            color: #BC3908 !important;

        }


}

.selectrow {
    padding: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 6px;
    border-bottom: solid 1px #eeeeee;
}

    .selectrow:hover {
        background-color: #efefef;
    }

.selectrow2 {
}

    .selectrow2:hover {
        background-color: #f2f2f2;
    }






.headingfont {
    font-family: 'Anton', sans-serif;
    letter-spacing: 1px;
}

.bodyfont {
    font-family: 'Roboto', sans-serif;
}

.condensed {
    font-family: 'Fira Sans Extra Condensed' !important;
}

.textshadow {
    text-shadow:2px 2px 4px #363537;
}

.underline {
    text-decoration: underline !important;
}

.bold {
    font-weight: 600 !important;
}

.italic {
    font-style: italic !important;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.wide100 {
    width: 100%;
}

.white {
    color: white !important;
}

.black {
    color: black !important;
}

input {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius:6px;
   
}

.wide100 {
    width: 100%;
}

/*- Text Styles -*/



.text-8 {
    font-size: 8px;
}
.text-10 {
    font-size: 10px;
}
.text-11 {
    font-size: 11px;
}
.text-12 {
    font-size: 12px;
}
.text-14 {
    font-size: 14px;
}
.text-16{
    font-size: 16px;
}
.text-20 {
    font-size: 20px;
}
.text-24 {
    font-size: 24px;
}
.text-30 {
    font-size: 30px;
}
.text-36 {
    font-size: 36px;
}
.text-42 {
    font-size: 42px;
}
.text-60 {
    font-size: 60px;
}
.text-72 {
    font-size: 72px;
}




.orange {
	color:#ed7d31 !important;
}

.orange-back {
    background-color: #ed7d31;
}

.drkorange {
    color: #BC3908 !important;
}

.drkorange-back {
    background-color: #BC3908;
}

.blue {
    color: #05b0ee !important;
}

.blue-back {
    background-color: #05b0ee;
}

.mdblue {
    color: #336699 !important;
}

.mdblue-back {
    background-color: #336699;
}

.drkblue {
    color: #1a2634 !important;
}

.drkblue-back {
    background-color: #1a2634;
}

.grey {
    color: #363537 !important;
}

.grey-back {
    background-color: #363537;
}

.drkgrey {
    color: #4c5c64 !important;
}

.drkgrey-back {
    background-color: #4c5c64;
}

.ltgrey {
    color: #cccccc !important;
}

.ltgrey-back {
    background-color: #cccccc;
}

.white {
    color: #ffffff !important;
}

.purple {
    color: #6e36a1 !important;
}

.purple-back {
    background-color: #6e36a1;
}

.plum {
    color: #941b48 !important;
}

.plum-back {
    background-color: #941b48;
}

.red {
    color: #941B0C !important;
}

.red-back {
    background-color: #941B0C;
}

.green {
    color: #0cce6b !important;
}

.green-back {
    background-color: #0cce6b;
}

.turquois {
    color: #41d3bd !important;
}

.turquois-back {
    background-color: #41d3bd;
}



/* Specialized Colors*/

.warningtext {
    color: #e7352a;
    padding: 4px;
}

.warningbox {
    padding: 4px;
    color: white;
    font-weight: bold;
    background-color: #e7352a;
    line-height: 1.5;
    box-shadow: 10px 0 0 #e7352a, -10px 0 0 #e7352a;
    border-radius: 3px;
}




.successtext {
    color: #4caa48;
    padding: 4px;
}

.successbox {
    padding: 4px;
    color: white;
    font-weight: bold;
    background-color: #4caa48;
    border-radius: 3px;
}



/* Elements  */

ul li {
    line-height: 20px;
    padding: 6px 0;
}


.checklist {
    list-style: none;
    padding-inline-start: 0px;
    line-height: 30px;
    text-indent: -44px !important;
    padding-left: 44px !important;
}

.checklist li {
    line-height: 20px;
    padding: 6px 0;
}

    .checklist li:before {
        content: "\2713";
        margin: 0 1em;
        font-weight: bold;
    }

.bulletlist {
    list-style: none;
    padding-inline-start: 0px;
    line-height: 30px;
    text-indent: -44px !important;
    padding-left: 44px !important;
}

    .bulletlist li {
        line-height: 20px;
        padding: 6px 0;
    }

        .bulletlist li:before {
            content: "\2022";
            margin: 0 1em;
            font-weight: bold;
            font-size:larger;
        }


.checklist-turquois li:before {
    color: #41d3bd !important;
    font-weight:bold;
}

dt {
    margin:16px 0 0 0;
}

dd { margin:6px 0 6px 20px}

.homecurve {
    clip-path: url(#myCurve);
}

.radinput {
    margin: 10px 0px 10px 0px;
    background-color: white !important;
    padding: 5px !important;
    border: 1px solid #a7a8aa !important;
    font-size: 16px !important;
    text-align: center;
}

.forminput {
    margin: 6px 0px 6px 0px;
    background-color: white !important;
    padding: 5px !important;
    border: 1px solid #a7a8aa !important;
    font-size: 16px !important;
}

.miniinput {
    background-color: white !important;
    padding: 2px !important;
    border: 1px solid #a7a8aa !important;
    border-radius: 2px;
}

.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}



.button0-slim {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #05b0ee;
    display: inline-block;
    background-image: linear-gradient(to right, #4c5c64, #cccccc, #4c5c64 );
    box-shadow: 0 4px 0 #363537;
    background-size: 200%;
    background-position-x: left;
    border: none;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 10px 0px 0px 00px;
}

    .button0-slim:hover {
        background-position-x: right;
    }

    .button0-slim span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button0-slim span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .button0-slim:hover span {
        padding-right: 25px;
    }

        .button0-slim:hover span:after {
            opacity: 1;
            right: 0;
        }



.button1 {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #05b0ee;
    display: inline-block;
    background-image: linear-gradient(to right, #05b0ee, #41d3bd, #05b0ee );
    box-shadow: 0 4px 0 #0495ca;
    background-size: 200%;
    background-position-x: left;
    border: none;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 20px 0px 0px 00px;
}

    .button1:hover {
        background-position-x: right;
    }

	.button1 span {
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 0.5s;
	}

        .button1 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

	.button1:hover span {
		padding-right: 25px;
	}

		.button1:hover span:after {
			opacity: 1;
			right: 0;
		}

.button1-slim {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #05b0ee;
    display: inline-block;
    background-image: linear-gradient(to right, #05b0ee, #41d3bd, #05b0ee );
    box-shadow: 0 4px 0 #0495ca;
    background-size: 200%;
    background-position-x: left;
    border: none;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding:10px 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 10px 0px 0px 00px;
}

    .button1-slim:hover {
        background-position-x: right;
    }

    .button1-slim span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button1-slim span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .button1-slim:hover span {
        padding-right: 25px;
    }

        .button1-slim:hover span:after {
            opacity: 1;
            right: 0;
        }


.button2 {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #05b0ee;
    display: inline-block;
    background-image: linear-gradient(to right, #ed7d31, #BC3908, #ed7d31);
    box-shadow: 0 4px 0 #941B0C;
    background-size: 200%;
    background-position-x: left;
    border: none;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 20px 0px 0px 00px;
}

    .button2:hover {
        background-position-x: right;
    }

    .button2 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button2 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .button2:hover span {
        padding-right: 25px;
    }

        .button2:hover span:after {
            opacity: 1;
            right: 0;
        }

.button3 {
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #05b0ee;
    display: inline-block;
    background-image: linear-gradient(to right, #6e36a1, #05b0ee, #6e36a1);
    box-shadow: 0 4px 0 #3640a2;
    background-size: 200%;
    background-position-x: left;
    border: none;
    color: #FFFFFF !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 20px 0px 0px 00px;
}

    .button3:hover {
        background-position-x: right;
    }

    .button3 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button3 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .button3:hover span {
        padding-right: 25px;
    }

        .button3:hover span:after {
            opacity: 1;
            right: 0;
        }







.button4 {
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #05b0ee;
    background-image: linear-gradient(to right, #05b0ee, #41d3bd, #0cce6b );
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 8px;
    transition: all 0.5s;
    cursor: pointer;
    box-shadow: rgba(0,0,0,0.4) 0px 0px 4px;
    
}

    .button4:hover {
        background-color: #1a2634;
        background-image: none;
    }

.button5 {
    box-sizing: border-box;
    border-radius: 8px;
    background-color: #0cce6b;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 20px 0px 0px 00px;
}

    .button5:hover {
        padding-right: 25px;
        background-color: #41d3bd;
    }


.button6 {
    box-sizing: border-box;
    border-radius: 10px;
    display: inline-block;
    border: 2px solid #336699;
    color: #336699 !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    margin: 20px 0px 0px 00px;
    background-image: linear-gradient(to right, white 50%, #336699 50% );
    background-size: 200%;
}

    .button6:hover {
        color: white !important;
        background-position-x: right;
        transition: all 0s;
    }

    .button6 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;        
    }

        .button6 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            padding-top:2px;
            transition: 0.5s;
        }

    .button6:hover span {
        padding-right: 25px;
    }

        .button6:hover span:after {
            opacity: 1;
            right: 0;
        }

.button7 {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
    color: #336699 !important;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border-radius: 0px;
    transition: all 0.5s;
    margin: 10px 4px 0px 0px;
    background-image: linear-gradient(to right, white 50%, #336699 50% );
    background-size: 200%;
}

    .button7:hover {
        color: white !important;
        background-position-x: right;
        transition: all 0s;
    }

    .button7 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button7 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            padding-top: 2px;
            transition: 0.5s;
        }

    .button7:hover span {
        padding-right: 25px;
    }

        .button7:hover span:after {
            opacity: 1;
            right: 0;
        }


.button8 {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
    color: white !important;
    width:200px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border-radius: 0px;
    transition: all 0.5s;
    margin: 10px 4px 0px 0px;
    background-color:#336699;
}

    .button8:hover {
        background-color: #224466;
        transition: all 0s;
    }

    .button8 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button8 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            padding-top: 2px;
            transition: 0.5s;
        }

    .button8:hover span {
        padding-right: 25px;
    }

        .button8:hover span:after {
            opacity: 1;
            right: 0;
        }

.button9 {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #ccc;
    color: #336699 !important;
    width: 200px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    border-radius: 0px;
    transition: all 0.5s;
    margin: 10px 4px 0px 0px;
    background-color: white;
}

    .button9:hover {
        background-color: #a1ccf6;
        transition: all 0s;
    }

    .button9 span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .button9 span:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f0da";
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            padding-top: 2px;
            transition: 0.5s;
        }

    .button9:hover span {
        padding-right: 25px;
    }

        .button9:hover span:after {
            opacity: 1;
            right: 0;
        }


.button10 {
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.2);
    padding: 6px 10px 6px 10px;
    border-radius: 20px;
    border: 1px solid white;
    margin: 8px 6px 0 0;
    display: inline-block;
    color: white !important;
    transition: all 0.5s;
    font-weight:bold;
}

    .button10:hover {
        background-color: white;
        color: #336699 !important;
        transition: all 0s;
    }

.button11 {
    box-sizing: border-box;

    padding: 6px 16px 6px 16px;
    border-radius: 20px;
    border: 1px solid #336699;
    margin: 8px 6px 0 0;
    display: inline-block;
    color: #336699 !important;
    transition: all 0.5s;
    font-weight: bold;
}

    .button11:hover {
        background-color: #336699;
        color: white !important;
        transition: all 0s;
    }



/*Accordion Menu*/
.accordion-checkbox {
    display: none;
}

.accordion-title-label {
    cursor: pointer;
    display: block;
    padding: 10px;
    background-color: rgba(255,255,255,0.8)
}

    .accordion-title-label:hover {
        background-color: #cccccc;
    }

.accordion-content {
    height: 0;
    overflow: hidden;
    line-height: 0;
    background-color: white
}

/*Click functionality*/
.accordion:checked + label {
    background-color: #cccccc;
}

.accordion-checkbox:checked + label {
    background-color: #cccccc;
}

.accordion-checkbox:checked ~ .accordion-content {
    -webkit-animation: slide-up 5s; /* Safari 4+ */
    -moz-animation: slide-up 5s; /* Fx 5+ */
    -o-animation: slide-up 5s; /* Opera 12+ */
    animation: slide-up 5s; /* IE 10+ */
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    line-height: inherit;
    overflow: visible;
    height: 100%;
}

/*Accordion Menu*/
.accordion2-checkbox {
    display: none;
}

.accordion2-title-label {
    cursor: pointer;
    display: block;
    padding: 10px;
}

    .accordion2-title-label:hover {
        background-color: #f6f6f6;
    }

.accordion2-content {
    height: 0;
    overflow: hidden;
    line-height: 0;
    background-color: white
}

/*Click functionality*/
.accordion2:checked + label {
    background-color: #f6f6f6;
}

.accordion2-checkbox:checked + label {
    background-color: #f6f6f6;
}

.accordion2-checkbox:checked ~ .accordion2-content {
    -webkit-animation: slide-up 5s; /* Safari 4+ */
    -moz-animation: slide-up 5s; /* Fx 5+ */
    -o-animation: slide-up 5s; /* Opera 12+ */
    animation: slide-up 5s; /* IE 10+ */
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    line-height: inherit;
    overflow: visible;
    height: 100%;
}


/* Menu Arrow Flip */
.accordion2-checkbox:checked + label .arrowflip {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

/* Menu Arrow Flip */
.accordion-checkbox:checked + label .arrowflip {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    /*-Animations-*/
}

    .bump:hover {
	position: relative;
	top: -5px;
}

@keyframes lifter {
    0% {transform:translate(0,30px)}
    100% {
        transform: translate(0,0)
    }
}

.lift {
    animation: lifter;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}





/*-Responsive-*/


@media only screen and (max-width: 760px) {
    .tabletorderfirst {
        order: -1;
    }
}




@media only screen and (min-width: 761px) {

    .tablethide {
        display: inherit;
    }

    .tabletshow {
        display: none;
    }

    .mobiletextshrink {
        font-size: 100%;
    }

    .logo-or {
        background-image: url(/images/images/Logo_Head-Lg-Orange.png);
        width: 150px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .logo-blue {
        background-image: url(/images/images/Logo_Head-Lg-Blue.png);
        width: 150px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .logo-grey {
        background-image: url(/images/images/Logo_Head-Lg-Grey.png);
        width: 150px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: left;
    }

    .reddelogo {
        width: 720px;
        height: 152px;
        background-image: url(/images/redde-lg.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .reddelogowhite {
        width: 640px;
        height: 158px;
        background-image: url(/images/images/Redde-Lg-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .footlinkgroup {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: nowrap;
        flex-flow: nowrap;
    }

    .footlinkdiv {
        width: 20%;
    }

    .merchantlogo {
        width: 720px;
        height: 152px;
        background-image: url(/images/merchant-services-lg.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .merchantlogowhite {
        width: 640px;
        height: 158px;
        background-image: url(/images/images/Merchant-Lg-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .patientsmslogo {
        width: 720px;
        height: 152px;
        background-image: url(/images/patient-sms-lg.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .patientsmslogowhite {
        width: 640px;
        height: 158px;
        background-image: url(/images/images/SMS-Lg-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .devices {
        width: 800px;
        height: 498px;
        background-image: url(/images/images/devices-lg.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .box-lg-orange {
        width: 450px;
        height: 600px;
        -webkit-transform: skew(-5deg);
        -moz-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        background-color: #ed7d31
    }

    .box-md-orange {
        width: 380px;
        height: 400px;
        background-color: #ed7d31;
        -webkit-transform: skew(-5deg);
        -moz-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        background-color: #ed7d31
    }


    .reddecard {
        width: 100%;
        max-width: 840px;
        min-width: 320px;
        background-image: url(/images/reddecard1-back.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .speakercard {
        width: 100%;
        max-width: 840px;
        min-width: 320px;
        background-image: linear-gradient(to right, #4c5c64, #363537 );
    }

    .homesolutionbutton {
        position: absolute;
        top: 120px;
        left: 10px;
        z-index: 1000;
    }
}

@media only screen and (min-width:446px) and (max-width: 760px)
{

    .tablethide {
        display: none !important;
    }
    .tabletshow {
        display: block !important;
    }
	.mobiletextshrink {
		font-size: 80%;
	}

    .tabletfullwidth {
        width: 100% !important;
    }

	.logo-or {
		background-image: url(/images/images/Logo_Head-Md-Orange.png);
		width: 100px;
		height: 102px;
		background-repeat: no-repeat;
		background-position: center;
	}
    .logo-blue {
        background-image: url(/images/images/Logo_Head-Md-Blue.png);
        width: 150px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: center;
    }
	.logo-grey {
		background-image: url(/images/images/Logo_Head-Md-Grey.png);
		width: 100px;
		height: 102px;
		background-repeat: no-repeat;
		background-position: left;
	}
	.reddelogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/redde-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}
    .reddelogowhite {
        width: 450px;
        height: 111px;
        background-image: url(/images/images/Redde-Md-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .footlinkgroup {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: nowrap;
        flex-flow: nowrap;
    }

    .footlinkdiv {
        width: 20%;
    }
	.merchantlogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/merchant-services-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}

    .merchantlogowhite {
        width: 450px;
        height: 111px;
        background-image: url(/images/images/Merchant-Md-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

	.patientsmslogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/patient-sms-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}

    .patientsmslogowhite {
        width: 450px;
        height: 111px;
        background-image: url(/images/images/SMS-Md-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .devices {
        width: 450px;
        height: 280px;
        background-image: url(/images/images/devices-md.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .box-lg-orange {
        width: 400px;
        height: 700px;
        background-color: #ed7d31
    }
    .box-md-orange {
        width: 340px;
        height: 400px;
        background-color: #ed7d31
    }

    .reddecard {
        width: 100%;
        max-width: 840px;
        min-width: 320px;
        background-image: url(/images/reddecard3-back.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .speakercard {
        width: 100%;
        max-width: 840px;
        min-width: 320px;
        background-image: url(/images/speakercard2-back.png);
        background-position: right;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .homesolutionbutton {
        position: absolute;
        top: 45vw;
        left: 10px;
        z-index: 1000;
    }



}

@media only screen and (max-width: 445px)
{
    .mobilehide {
        display:none !important;
    }
    .tablethide {
        display: none !important;
    }
    .tabletshow {
        display: block !important;
    }
	.mobiletextshrink {
		font-size: 60%;
	}

    .mobilefullwidth {
        width: 100% !important;
    }

    .mobilehalfwidth {
        width: 50% !important;
    }

    .tabletfullwidth {
        width: 100% !important;
    }

    .mobileorderfirst {
        order: -1;
    }
    .logo-or {
        background-image: url(/images/images/Logo_Head-Md-Orange.png);
        width: 100px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: left;
    }
    .logo-blue {
        background-image: url(/images/images/Logo_Head-Md-Blue.png);
        width: 150px;
        height: 102px;
        background-repeat: no-repeat;
        background-position: center;
    }
	.logo-grey {
		background-image: url(/images/images/Logo_Head-Md-Grey.png);
		width: 100px;
		height: 102px;
		background-repeat: no-repeat;
		background-position: left;
	}
	.reddelogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/redde-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}
    .reddelogowhite {
        width: 315px;
        height: 78px;
        background-image: url(/images/images/Redde-Sm-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .footlinkgroup {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: column !important;
        flex-flow: column !important;
    }

    .footlinkdiv {
        width: 100%;
    }

	.merchantlogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/merchant-services-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}
    .merchantlogowhite {
        width: 315px;
        height: 78px;
        background-image: url(/images/images/Merchant-Sm-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }

	.patientsmslogo {
		width: 300px;
		height: 75px;
		background-image: url(/images/patient-sms-md.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}

    .patientsmslogowhite {
        width: 315px;
        height: 78px;
        background-image: url(/images/images/SMS-Sm-White.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .devices {
        width: 300px;
        height: 187px;
        background-image: url(/images/images/devices-sm.png);
        background-repeat: no-repeat;
        margin: 0 auto;
    }
    .box-lg-orange {
        width: 300px;
        height: 700px;
        background-color: #ed7d31
    }
    .box-md-orange {
        width: 300px;
        height: 400px;
        background-color: #ed7d31
    }

    .reddecard {
        width: 280px;
        height: 340px;
        background-image: url(/images/reddecard2-back.png);
        background-position: right;
        background-repeat: no-repeat;
    }

    .speakercard {
        width: 280px;
        height: 340px;
        background-image: url(/images/speakercard2-back.png);
    }

    .mobilebottomalign {
        margin: 0;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -90%);
    }

    .homesolutionbutton {
        position: absolute;
        top: 230px;
        left: 10px;
        z-index: 1000;
    }

    .mobilemarginbottom80 {
        margin-bottom: 80px;
    }
    .mobilemarginbottom60 {
        margin-bottom: 60px;
    }

}



/* Menu */



.menubtn {
    float: right;
    padding: 42px 20px 36px 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: #4c5c64;
    transition: 0.2s;
}

    .menubtn:hover {
        background-color: rgba(0, 0, 0,0.3);
        color: white;
    }

.menubtn2 {
    padding: 24px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: white;
}

    .menubtn2:hover {
        background-color: #f1f1f1;
        color: #999999;
    }

.menubtn3 {
    font-weight: normal;
    cursor: pointer;
    position: relative;
    background-color: #f9f9f9;
}

    .menubtn3:hover {
        background-color: #cccccc;
    }
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 96px;
    right: 0px;
    background-color: #f9f9f9;
    min-width: 140px;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    z-index: 8000;
    font-weight: normal;
    font-size: smaller;
    color: #4c5c64;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: #333333;
        padding: 8px 8px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #cccccc;
        }

/* Show the dropdown menu on hover */
.menubtn:hover .dropdown-content {
    display: block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
    display: none;
    position: absolute;
    left: -10px;
    top: 60px;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 8000;
    font-weight: normal;
    color: #999999;
}

    /* Links inside the dropdown */
    .dropdown-content2 a {
        color: black;
        padding: 8px 8px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content2 a:hover {
            background-color: #cccccc;
        }

/* Show the dropdown menu on hover */
.menubtn2:hover .dropdown-content2 {
    display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
    display: none;
    position: absolute;
    left: -180px;
    top: 2px;
    background-color: #f9f9f9;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 8000;
    font-weight: normal;
    color: #999999;
}

    /* Links inside the dropdown */
    .dropdown-content3 a {
        color: black;
        padding: 8px 8px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content3 a:hover {
            background-color: #cccccc;
        }

/* Show the dropdown menu on hover */
.menubtn3:hover .dropdown-content3 {
    display: block;
}

/* Accordian Menu*/
/* Style the buttons that are used to open and close the accordion panel */
button.accordionMenu {
    background-color: white;
    color: #444;
    cursor: pointer;
    padding: 0px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    button.accordionMenu.active, button.accordionMenu:hover {
        background-color: white;
    }

/* Style the accordion panel. Note: hidden by default */
div.panelMenu {
    padding: 0 18px;
    background-color: rgba(1,1,1,0.8);
    margin-bottom: 4px;
    max-width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: nowrap;
    flex-flow: nowrap;
    display: none;
}

.cardbtn {
    float: right;
    padding: 29px 10px 29px 10px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: #4c5c64;
}

    .cardbtn:hover {
        background-color: #4c5c64;
        color: white;
    }

        /* Show the dropdown menu on hover */
        .cardbtn:hover .dropdown-content {
            display: block;
        }



/* Pay Pod Dropdown Content (Hidden by Default) */
.detailbtn {
    padding: 3px 10px 3px 10px;
    ;
    color: #336699;
    font-size: medium;
    cursor: pointer;
    position: relative;
    display: inline-block;
    background-color: white;
}

    .detailbtn:hover, .detailbtn:active {
        background-color: #999999;
        color: white;
    }

/* Dropdown Content (Hidden by Default) */
.dropdown-content-detail {
    display: none;
    position: absolute;
    top: 68px;
    left: 0px;
    background-color: #999999;
    background: -webkit-linear-gradient(#999999, #dddddd); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#999999, #dddddd); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#999999, #dddddd); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#999999, #dddddd); /* Standard syntax */
    border-bottom: 4px solid #666666;
    border-left: 1px solid #999999;
    border-right: 1px solid #999999;
    width: 288px;
    padding: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 8000;
    font-weight: normal;
    color: #666666;
    cursor: default;
}



/* Show the dropdown menu on hover */
.detailbtn:hover .dropdown-content-detail {
    display: block;
}
/* Menu Arrow Flip */
.detailbtn:hover .arrowflip {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}





/*Accordion Menu*/
.accordion-checkbox {
    display: none;
}

.accordion-title-label {
    cursor: pointer;
    display: block;
    padding: 10px;
    background-color: rgba(255,255,255,0.8)
}

    .accordion-title-label:hover {
        background-color: #cccccc;
    }

.accordion-content {
    height: 0;
    overflow: hidden;
    line-height: 0;
    background-color: white
}

/*Click functionality*/
.accordion:checked + label {
    background-color: #cccccc;
}

.accordion-checkbox:checked + label {
    background-color: #cccccc;
}

.accordion-checkbox:checked ~ .accordion-content {
    -webkit-animation: slide-up 5s; /* Safari 4+ */
    -moz-animation: slide-up 5s; /* Fx 5+ */
    -o-animation: slide-up 5s; /* Opera 12+ */
    animation: slide-up 5s; /* IE 10+ */
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
    line-height: inherit;
    overflow: visible;
    height: 100%;
}


/* Menu Arrow Flip */
.accordion-checkbox:checked + label .arrowflip {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}






.onclick-menu {
    position: relative;
    display: inline-block;
}

    .onclick-menu:before {
        content: "click me!";
    }

    .onclick-menu:focus {
        /* clicking on label should toggle the menu */
        pointer-events: none;
    }

        .onclick-menu:focus .onclick-menu-content {
            /*  opacity is 1 in opened state (see below) */
            opacity: 1;
            visibility: visible;
            /* don't let pointer-events affect descendant elements */
            pointer-events: auto;
        }

.onclick-menu-content {
    position: absolute;
    z-index: 1;
    /* use opacity to fake immediate toggle */
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}













    /* IdahoSports Menu*/
    /*Main Menu System*/
    .header-inner

{
    
}

#header-nav {
    margin: 0;
    float:right;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    *:focus, a:focus {
        outline: 0
    }

.clear {
    clear: both
}

.clearfix:after {
    content: '';
    display: block;
    font-size: 0;
    height: 0;
    clear: both
}

.hidden {
    display: none !important;
}


/* -- nav main menu -- */

.menu {
    list-style-type: none;
    margin: 0;
    clear: both;
    /*white-space: nowrap;*/
    padding-left: 0px;
    text-align: center;
}

    .menu ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

    .menu li {
        position: relative;
        /*white-space: nowrap;*/
        display: inline-block;
    }

    .menu .menu-item > a {
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        letter-spacing: 0.5px;
        font-weight: bold;
        margin: 0 ;
        padding: 42px 20px 36px 20px;
        text-decoration: none;
        display: inline-block;
        
    }



    .menu .menu-item:last-child > a {
        margin-right: 0;
    }

.menu > li > a:hover, .submenu-active, #header-nav .menu-item > a.active {
    background-color: rgba(0, 0, 0,0.3);
    color: white;
    -moz-transition: color, 0.5s, ease-in-out;
    -webkit-transition: color, 0.5s, ease-in-out;
    transition: color, 0.5s, ease-in-out;
}

.menu-item:hover > a {
    background-color: rgba(0, 0, 0,0.3);
}

    .menu .sub-drop-icon {
        margin-left: 5px;
        display: none
    }


    /* -- nav drop down menus -- */

    .menu .menu-item-has-children {
        position: relative;
    }

    .menu .sub-menu {
        background-color: rgba(255,255,255,0.95);
        box-sizing:border-box;
        position: absolute;
        z-index: 1000;
        top: 90px;
        right: 0px;
        width: 200px;
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 6px 6px rgba(0,0,0,.175);
        margin-top: 30px;
        -webkit-transition: all .35s;
        transition: all .35s
    }

        .menu .sub-menu li {
            width: 100% !important;
            height: auto;
            display: block;
        }

            .menu .sub-menu li a {
                font-size: 14px;
                color: #242424 !important;
                display: block;
                letter-spacing: 0.5px;
                margin: 0;
                display: block;
                width: 100%;
                text-align: left;
                text-decoration: none;
                position: relative;
                padding: 10px 0 10px 20px;
                border-bottom: 1px solid rgba(0,0,0,0.05);
            }

                .menu .sub-menu li a:hover {
                    background-color: #ccc !important;
                }

.menu-item-has-children:hover > .sub-menu {
    margin-top: 0px;
    opacity: 1;
    visibility: visible;

}



.sub-menu .sub-drop-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 15px;
}

.sub-menu .sub-second-tier, #nav-ul li ul li ul {
    top: -1px;
    left: 200px;
}






/* Main Menu System Tablet/Mobile Menu */
@media (max-width: 720px) {

    /* -- nav drop down button / hamburger icon -- */

    .mobile-collapse {
        max-height: 0px;
    }

    #header-navigation {
        margin-top: 0;
        border: 0;
    }

    #mobile-nav-button {
        width: 25px;
        height: 18px;
        position: absolute;
        top: 40px;
        right: 20px;
        transform: translateY(-50%);
        margin: 0;

    }

    #mobile-nav-icon {
        width: 100%;
        height: 100%;
        position: relative;
        cursor: pointer;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;

    }


        #mobile-nav-icon span {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background-color: #1a2634;
            border-radius: 2px;
            opacity: 1;
            left: 0;
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
        }

            #mobile-nav-icon span:nth-child(1) {
                top: 0;
            }

            #mobile-nav-icon span:nth-child(2), #mobile-nav-icon span:nth-child(3) {
                top: 8px;
            }

            #mobile-nav-icon span:nth-child(4) {
                top: 16px;
            }

    #mobile-nav-button.active {
        width: 33px;
        height: 32px;
        margin-right: 0px;
        padding: 8px 4px 8px 4px;
        border-radius:4px;
        background-color: #eee;
    }

        #mobile-nav-button.active #mobile-nav-icon span:nth-child(1), #mobile-nav-button.active #mobile-nav-icon span:nth-child(4) {
            top: 10px;
            width: 0;
            left: 50%
        }

        #mobile-nav-button.active #mobile-nav-icon span:nth-child(2) {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -moz-transition: rotate(45deg);
            -o-transition: rotate(45deg);
        }

        #mobile-nav-button.active #mobile-nav-icon span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -moz-transition: rotate(-45deg);
            -o-transition: rotate(-45deg);
        }


    /* -- main menu drop down -- */

    #header-nav {
        margin-top: 0px;
        width: 100%;
        text-align: center;
        display: none;
    }

    .menu .menu-item > a {
        font-size:14px;
        color: #111111;
        background-color:white;
    }
    .menu .menu-item:hover > a {
        color: #111111;
        background-color:#ccc;
    }

    .menu li {
        width: 100%;
        float: left;
        margin: 0;
        border-bottom: none;
    }

        .menu li:last-child {
            margin-right: 0px;
        }

    .menu > li:after, .menu > ul > .page_item:after {
        content: "";
        margin-top: 0;
    }

    #header-nav .menu-item > a, #header-nav .page_item > a {
        font-size: 14px;
        float: none;
        display: block;
        padding: 14px 0;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
        padding-left: 15px;
        border-bottom: 1px solid #eeeeee;
    }

    .menu > li > a:hover, .menu > .current-menu-item > a, .submenu-active {
        border-bottom: none;
    }


    /* -- sub menu drop down -- */

    .menu-item .sub-drop-icon, .page_item .sub-drop-icon {
        display: none;
    }

    .menu-item a .drop {
        display:none;
    }

    .menu-item-has-children .sub-drop-icon, .page_item_has_children .sub-drop-icon {
        font-size: 20px;
        position: absolute;
        right: 0px;
        top: 0px;
        color: #111111;
        display: block;
        padding:12px 16px;
        background-color:#f5f5f5;
    }

    .menu .sub-menu, .menu .children {
        background-color: #336699;
        position: static;
        width: auto;
        display: none;
        padding: 0 15px;
        box-shadow: 0px 0px 0px 0px;
        border-top: 0;
        -webkit-transition: none .35s;
        transition: none .35s;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }

    .menu li:last-child .sub-menu li:last-child {
        border: 0;
    }

    .menu .sub-menu li, .menu .children li {
        padding: 0;
        background-color:#f5f5f5;
    }

        .menu .sub-menu li a, .menu .children li a {
            color: #111111 !important;
            padding: 14px 0 14px 15px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }

            .menu .sub-menu li a:hover, .menu .children li a:hover {
                background-color: transparent;
            }

    .menu .sub-menu:after, .menu .children:after {
        content: '';
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
    }

    .menu .sub-menu .sub-drop-icon, .menu .children .sub-drop-icon {
        top: 0px;
    }


    /* -- mobile sidebar menu -- */

    #header-nav {
        position: fixed;
        z-index: 1000;
        height: 100%;
        width: 250px;
        top: 0;
        right: -250px;
        background-color: #ffffff;
        overflow: auto;
        display: block;
    }

    #header-top, #main-content, .header-inner, footer {
        position: relative;
        right: 0;
    }

    #header-top, #header-nav, #main-content, .header-inner, footer {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

        #header-nav.menu-active {
            right: 0;
            border-left: 1px solid #eeeeee;
            overflow-x: hidden;
            background-color:#f5f5f5;
        }

        #header-top.menu-active, .header-inner.menu-active, #main-content.menu-active, footer.menu-active {
            right: 250px;
        }
}



/* Responsive Tabs*/

.tabsr {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    justify-content:center;
    width:100%;
    background-color:white;
}

    .tabsr [class^="tab-3r"] [id^="div"] ~ label,
    .tabsr [class*=" tab-3r"] [id*=" div"] ~ label {
        cursor: pointer;
        display: block;
        text-align: center;
        box-sizing: border-box;
        padding: 8px 0;
        border-top: 1px solid white;
        width: 33.33%;
    }

    .tabsr [class^="tab-3r"] [type="radio"],
    .tabsr [class*=" tab-3r"] [type="radio"] {
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: none;
        width: 33.33%;
        margin: 0;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .tabsr [id="div3r-1"] + [type="radio"]:checked ~ [id="div3r-11"] {
        display: block;
        margin: 0;
        animation-name: example;
        animation-duration: 0.5s;
    }


    .tabsr [id="div3r-2"] + [type="radio"]:checked ~ [id="div3r-22"] {
        display: block;
        margin: 0;
        animation-name: example;
        animation-duration: 0.5s;
    }


    .tabsr [id="div3r-3"] + [type="radio"]:checked ~ [id="div3r-33"] {
        display: block;
        margin: 0;
        animation-name: example;
        animation-duration: 0.5s;
    }




    .tabsr [class^="tab-3r"] [type="radio"] ~ [id*="div3r"],
    .tabsr [class*=" tab-3r"] [type="radio"] ~ [id*="div3r"] {
        display: none;
        width: 100%;
        background-color: #f5f5f5;
        padding: 10px;
        margin-left: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .tabsr .tab-3r {
        width: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        flex-flow: row wrap;
        justify-content:center;
        align-content:stretch;
    }

        .tabsr .tab-3r [type="radio"] ~ div {
            width: 100%;
        }

    .tabsr [class^="tab-3r"] [type="radio"]:hover + label,
    .tabsr [class*=" tab-3r"] [type="radio"]:hover + label {
        color: white !important;
        background-color: #a6daed !important; /*Accent-Light Color*/
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .tabsr [class^="tab-3r"] [type="radio"]:active + label,
    .tabsr [class*=" tab-3r"] [type="radio"]:active + label {
        background-color: #941b48 !important; /*Accent-VeryLight Color*/
        color: #336699; /*Accent Color*/
    }

    .tabsr [class^="tab-3r"] [type="radio"]:checked + label,
    .tabsr [class*=" tab-3r"] [type="radio"]:checked + label {
        background-color: #336699; /*Accent-VeryLight Color*/
        color: white; /*Accent Color*/
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }










    .tabsp {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        flex-flow: row wrap;
        margin: 0;
        justify-content: center;
        width: 100%;

    }

        .tabsp [class^="tab"] [id^="div"] ~ label,
        .tabsp [class*=" tab"] [id*=" div"] ~ label {
            cursor: pointer;
            display: block;
            text-align: center;
            box-sizing: border-box;
            width: 16.66%;
            min-width: 150px;
            background-color: white;
            padding: 10px 4px;
            border: 1px dotted #ccc;
            border-radius:3px;
        }

     .tabsp [class^="tab"] [type="radio"],
     .tabsp [class*=" tab"] [type="radio"] {
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: none;
            width: 16.66%;
            margin: 0;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

     .tabsp [id="div6p-1"] + [type="radio"]:checked ~ [id="div6p-11"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }


        .tabsp [id="div6p-2"] + [type="radio"]:checked ~ [id="div6p-22"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }


        .tabsp [id="div6p-3"] + [type="radio"]:checked ~ [id="div6p-33"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }

        .tabsp [id="div6p-4"] + [type="radio"]:checked ~ [id="div6p-44"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }

        .tabsp [id="div6p-5"] + [type="radio"]:checked ~ [id="div6p-55"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }

        .tabsp [id="div6p-6"] + [type="radio"]:checked ~ [id="div6p-66"] {
            display: block;
            margin: 0;
            animation-name: example;
            animation-duration: 0.5s;
        }




        .tabsp [class^="tab"] [type="radio"] ~ [id*="div6p"],
        .tabsp [class*=" tab"] [type="radio"] ~ [id*="div6p"] {
            display: none;
            width: 100%;
            background-color: #f5f5f5;
            padding: 10px;
            margin-left: 100%;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .tabsp .tab-6p {
        width: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        flex-flow: row wrap;
        justify-content: center;
        align-content: stretch;
    }

        .tabsp .tab-6p [type="radio"] ~ div {
            width: 100%;
        }

        .tabsp [class^="tab"] [type="radio"]:hover + label,
        .tabsp [class*=" tab"] [type="radio"]:hover + label {
            background-color: #336699 !important; /*Accent-Light Color*/
            color: white !important;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

    .tabsp [class^="tab"] [type="radio"]:active + label,
    .tabsp [class*=" tab"] [type="radio"]:active + label {
        background-color: #941b48 !important; /*Accent-VeryLight Color*/
        color: #336699; /*Accent Color*/
    }

    .tabsp [class^="tab"] [type="radio"]:checked + label,
    .tabsp [class*=" tab"] [type="radio"]:checked + label {
        background-color: #336699; /*Accent-VeryLight Color*/
        color: white; /*Accent Color*/
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        /*.tabsp [class^="tab"] [type="radio"]:checked + label:after,
        .tabsp [class*=" tab"] [type="radio"]:checked + label:after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            font-size:30px;
            content: "\f0d7";
            width: 100%;
            padding-top: 4px;
            margin-top: 10px;
            box-sizing: border-box;
        }*/

        .tabsp [class^="tab"] [type="radio"]:checked + label:after,
        .tabsp [class*=" tab"] [type="radio"]:checked + label:after {
            background-color: #ed7d31;

            font-size:14px;
            content: "DETAIL BELOW";
            width: 100%;
            padding: 4px;
            margin-top: 10px;
            box-sizing: border-box;
        }
