/* ****
Illustration
Arrow: cssarrowplease.com
**** */

.illustration-instructional-large,
.illustration-instructional-medium,
.illustration-instructional-small {  margin-bottom: 0; }

.illustration-instructional-large-container article,
.illustration-instructional-medium-container article,
.illustration-instructional-small-container article {  margin-bottom: 64px; }

.illustration-instructional-medium img { height: 138px; width: auto; max-width: 268px;}

div[class^="illustration-instructional-"] article>p,
div[class^="illustration-instructional-"] .illustration .content>p {margin-bottom: 24px; }

.illustration .content p.arrow { 
    padding: 16px;
    margin-top: 24px; 
    position: relative;
    border-radius: 4px;
}
.illustration .content p.arrow {  border: 2px solid #004990; }


.illustration .content p.arrow:after, .illustration .content p.arrow:before {
    bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.illustration .content p.arrow:after{
    border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
    border-width: 15px;
    margin-left: -15px;
    top: -27px;
}

.illustration-instructional-medium .illustration p.arrow:after{
    top: -27px;
}

.illustration .content p.arrow:before {
    border-color: rgba(9, 138, 0, 0);
    border-bottom-color: #004990;
    border-width: 15px;
	margin-left: -15px;
}


.illustration-instructional-medium .illustration .content p.arrow:after, 
.illustration-instructional-medium .illustration .content p.arrow:before {
    left: 134px /*40%*/;
}
  
.illustration-xl-75 article ul,                                
.illustration-xl-75 article ol,
.illustration-instructional-small ul,
.illustration-instructional-small ol {
    margin-left: 1rem;
    line-height: 1.5rem;
}

.illustration-xl-75 article ul li,                                
.illustration-xl-75 article ol li,
.illustration-instructional-small ul li,
.illustration-instructional-small ol li {
  	padding-left: 0.5rem;
    padding-top: 0.5rem;
  	font-weight: 300 !important;
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { /*medium screens*/ 
    
    .illustration-instructional-large .illustration,
    .illustration-instructional-medium .illustration,
    .illustration-instructional-small .illustration { max-width: 394px;}

    .illustration .content p.arrow:after,
    .illustration-instructional-medium .illustration .content p.arrow:after {
        top: -27px;
    }

    .illustration-instructional-small .illustration .content p.arrow:after, 
    .illustration-instructional-small .illustration .content p.arrow:before {
        left: 134px;
    }

    .illustration-instructional-large,
    .illustration-instructional-medium,
    .illustration-instructional-small {  margin-bottom: 0px; }


    .illustration-instructional-large .illustration .content,
    .illustration-instructional-medium .illustration .content,
    .illustration-instructional-small .illustration .content { margin-bottom: 0px; }

}

@media only screen and (max-width: 40em) { /*small screens*/ 
    .illustration-instructional-large .illustration .content p.arrow:after, 
    .illustration-instructional-large .illustration .content p.arrow:before {
        left: 209px;
    }

    .illustration-instructional-small .illustration .content p.arrow:after, 
    .illustration-instructional-small .illustration .content p.arrow:before {
        left: 134px;
    }

    .illustration-instructional-large,
    .illustration-instructional-medium,
    .illustration-instructional-small {  margin-bottom: 0px; }

    .illustration-instructional-large .illustration .content,
    .illustration-instructional-medium .illustration .content,
    .illustration-instructional-small .illustration .content { margin-bottom: 64px; }

}

@media print { /* print */
    .illustration-instructional-large,
    .illustration-instructional-medium,
    .illustration-instructional-small {  margin-bottom: 73px; }

    .illustration-instructional-large-container article,
    .illustration-instructional-medium-container article,
    .illustration-instructional-small-container article {  margin-bottom: 27px; }

    .illustration-instructional-large-container .illustration .content,
    .illustration-instructional-large-container article img,
    .illustration-instructional-medium-container article,
    .illustration-instructional-medium-container .illustration .content {
        width: 100% !important;
    }

    .illustration-instructional-medium-container .columns  {
        width: 50% !important;
    }

    .illustration .content p.arrow {  border: 1px solid #333333; }

    .illustration .content p.arrow {
        border: 1px solid #333333;
    }
    
    .illustration .content p.arrow:before {
        border-width: 14px;
        margin-left: -14px;
        top: -29px;
        border-bottom-color:  #333333
    }
    
    .illustration .content p.arrow:after {
        border-width: 14px;
        margin-left: -14px;
        top: -27px;
    }

    .illustration-instructional-large, 
    .illustration-instructional-medium,
    .illustration-instructional-small,
    .stand-out { page-break-inside: avoid; }

    .illustration .content:after, .illustration .content:before{
        left: 50%;
    }

    .illustration-instructional-medium-container .illustration .content:after, 
    .illustration-instructional-medium-container .illustration .content:before {
        left: 42.5%;
    }

    .illustration-instructional-small-container .illustration .content:after, 
    .illustration-instructional-small-container .illustration .content:before{
        left: 50%;
    }

    .illustration-instructional-large-container .columns { width: 50%;}
    .illustration-instructional-medium-container .columns .illustration  { width: 64.5%;}
    .illustration-instructional-small-container .columns { width: 33%;}
    
}