/* CSS Document */

/*state list for map*/

.map-wrap li {
    list-style: none
}
.map-wrap {
    position: relative
}

.map-wrap img {
    display: none
}

.mobileshow_768 {
	display: inline;
}
.mobilehide_768 {
    display: none;
}

@media(min-width: /*48em*/768px) {
    .map-wrap img {
        display: block;
        width: 100%;
    }
	 .mobilehide_768 {
        display: inline;
    }
	.mobileshow_768 {
		display: none;
	}
}


.state-list > li {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1em;
    border-bottom: 1px solid silver;
    padding-bottom: 1em;
    line-height: 1.2;
}

@media(max-width: 767px) {
    .state-list > li .name {
        color: #00A7E1;
    }
}



@media(min-width: 48em) {
    .state-list > li {
        position: absolute;
        color: #fff
    }
}

@media(min-width: 48em) {
    .state-list > li {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
        cursor: default;
        font-size: 1.25rem
    }
}

@media(min-width: 64em) {
    .state-list > li {
        font-size: 1.5rem
    }
}

.state-list > li .name {
    line-height: 1;
    display: inline-block
}

@media(min-width: 768px) {
    .state-list > li .name {
        margin-top: 8px;
        margin-left: -4px;
    }
}

@media(min-width: 1024px) {
    .state-list > li .name {
        margin-top: 15px;
    }
}

@media(min-width: 48em) {
    .state-list > li .touchpoint div {
        display: none
    }
}

.state-list > li .touchpoint {
    border-radius: 1rem;
    margin: 0 auto;
    font-size: .8em;
    line-height: 1.3
}

@media(min-width: 48em) {
    .state-list > li .touchpoint {
        height: 0;
        /* text-indent: -99999%; */
        width: .9rem;
        height: .9rem;
        margin-top: 1em
    }
}

@media(min-width: 48em) {
    .state-list > li .touchpoint ul {
       margin-left: 1em;
    }
}

@media(min-width: 48em) {
    .state-list > li:hover {
        z-index: 1;
        /* transform: scale(1.2, 1.2); */
        /* color: #40AE49; */
        color: #00A7E1;
    }
    .state-list > li:hover .touchpoint div {
        text-indent: 1px;
        display: block;
        width: 200px;
        font-size: 1.25rem;
        text-align: left;
        padding: 1rem;
        position: relative;
        /* top: -1.5em; */
        background-color: #0B3860;
        color: #fff;
        border-radius: 6px;
        opacity: 0.9;
    }
    .state-list > li:hover .touchpoint div::after {
        content: "";
        position: absolute;
        top: 30px;
        left: 100%;
        margin-top: -10px;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent transparent #0B3860;
        opacity: 0.9;
      }
}

@media(min-width: 48em) {
    .state-list > li:hover .touchpoint div {
        bottom: 50px;
        right: 225px;
    }
}


@media(min-width: 48em)and (min-width: 64em) {
    .state-list > li:hover .touchpoint div {
        left: auto
    }
}

.state-list > li li {
    margin-bottom: 2px;
    padding-left: 0;
    list-style-type: square; 
    text-indent: 18px;
}

@media(min-width: 48em) {
    .state-list > li li {
        text-indent: 0;
    }
}


.state-list .ny {
    top: 24.5%;
    left: 85%
}

.state-list .wi {
    top: 18%;
    left: 59%
}

.state-list .io {
    top: 28.5%;
    left: 54%
}

.state-list .sc {
    left: 75.5%;
    top: 62%
}

.state-list .co {
    left: 32.5%;
    TOP: 41%
}

.state-list .il {
    top: 36.5%;
    left: 61%
}

.state-list .in {
    top: 36.5%;
    left: 66%
}

.state-list .mo {
    top: 43.5%;
    left: 55%
}

.state-list .ky {
    top: 47.5%;
    left: 68%
}

.state-list .ma {
    left: 94%;
    top: 26%;
    color: #4b5763
}

.state-list .ma .touchpoint {
    background: #4b5763;
    color: #fff
}

.state-list .ma .name {
    border-color: #4b5763
}

.state-list .mn {
    left: 51.5%;
    top: 11%
}


.state-list .nd {
    top: 4%;
    left: 41.5%
}

.state-list .oh {
    top: 36.5%;
    left: 71.5%
}

.state-list .nc {
    top: 55.5%;
    left: 78%
}

.state-list .md {
    top: 47.5%;
    left: 78%
}

.state-list .sd {
    top: 17.5%;
    left: 41.5%
}

.state-list .ct {
    top: 35%;
    left: 90%;
    color: #4b5763
}

.state-list .ct .touchpoint {
    background: #4b5763;
    color: #fff
}

.state-list .ct .name {
    border-color: #4b5763
}

.state-list .tx {
    top: 70%;
    left: 44%
}

.state-list .al {
    top: 65%;
    left: 65%
}

.state-list .ar {
    top: 58%;
    left: 55%
}

.state-list .tn {
    top: 54.5%;
    left: 66%
}

.state-list .ms {
    top: 65%;
    left: 60%
}

.touchpoint h3 {
    font-size: .8rem;
    margin-bottom: .4rem;
    font-style: italic;
    font-weight: 500;
}

/*eda steps*/
.col-sm-5ths {
    margin:0;
    padding:0;
}


@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
        margin-left: 0;
    }
}

 /*iPhone */

.step-image {
    width: 30vw;
    margin-left: 8px;
    margin-right: 8px;
    float: left;
    height: auto;
}

.step-text {
    height: 33vw;
    width: 65vw;
    font-weight: bold;
    color: #0B3860;
    font-size: .85em;
    display: inline-block;
    background-color: #fff;
    padding: 8px 8px 0 8px;
    margin-bottom: 8px;
    display: table;
}

.step-image p,
.step-text p {
    display: table-cell;
    vertical-align: middle;
}

.step-image img {
    width: 100%; 
    height: auto;
}

.step-image .lg_icon {
    display: none;
}

#last {
    height: 34.8vw;
}


/* iPad */

@media only screen and (min-width: 768px) {
    .row {
        margin: 0;
    }
    .step-image .sm_icon {
        display: none;
    }
    .step-image .lg_icon {
        display: block;
    }
    .step-image  {
        width: 100%;
        margin-left:0;
        margin-bottom: 10px;
        font-size: 1em;
    } 
    .step-text {
        width: 94%;
        text-align: center;
        font-size: 1em;
        height: 300px;
    } 
    #last {
        width: 100%;
        height: 300px;
    }
}

/* iPad Pro */

@media only screen and (min-width: 1024px) {
    .step-text {
        height: 230px;
    } 
    #last {
        height: 230px;
    }
}