/* ****
Do's and Dont's
Arrow: cssarrowplease.com
**** */

.illustration-dos-donts-large { margin-bottom: 40px; }

.illustration-dos-donts-medium .illustration-dos-donts-medium-container {  margin-bottom: 40px; }

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

.illustration-dos-donts-small {  margin-bottom: 40px; }

div[class^="illustration-dos-donts-"] div .content>p { margin-bottom: 16px !important; }
.dos .content .arrow p, .donts .content .arrow p { margin-bottom: 0;}

.dos .content .arrow, .donts .content .arrow { 
    padding: 16px;
    padding-left: 52px; 
    margin-top: 24px; 
    margin-bottom: 24px;
    background: url('../../../assets/cpc/img/icons/checkmark_do.svg') 16px 16px no-repeat #ffffff;
    position: relative;
    border-radius: 4px;
}

.dos .content .arrow {  border: 2px solid #098A00; }

.donts .content .arrow { 
    border: 2px solid #ca261a; 
    background-image: url('../../../assets/cpc/img/icons/x_dont.svg');
}

/* pre-load for print */
.dos .content .arrow p:before {
    content: url('../../../assets/cpc/img/icons/checkmark_do_gray.svg'); 
    visibility: hidden;
    position: absolute;
}

.donts .content .arrow  p:before {
    content: url('../../../assets/cpc/img/icons/x_dont_gray.svg') !important; 
    visibility: hidden;
    position: absolute;
} 
/* end pre-load for print */

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

.dos .content .arrow:after, 
.donts .content .arrow:after {
    border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	/*border-width: 12px;
    margin-left: -12px;*/
    border-width: 15px;
    margin-left: -15px;
    /*bottom: 98%;*/
    top: -27px;
}

.illustration-dos-donts-medium .dos p.arrow:after, 
.illustration-dos-donts-medium .donts p.arrow:after {
    /*bottom: 97%;*/
    top: -27px;
}

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

.donts .content .arrow:before {
	border-color: rgba(202, 38, 26, 0);
	border-bottom-color: #CA261A;
	border-width: 15px;
	margin-left: -15px;
}

.illustration-dos-donts-medium .dos .content .arrow:after, .illustration-dos-donts-medium .dos .content .arrow:before,
.illustration-dos-donts-medium .donts .content .arrow:after, .illustration-dos-donts-medium .donts .content .arrow:before {
    left: 134px /*30%*/;
}

.stand-out { margin-bottom: 0; }

.stand-out .content { 
  	overflow-x: hidden; 
	position: relative;
    border: 1px solid #666666; 
    border-radius: 4px; 
    padding: 24px 24px 24px 96px; 
    background: url('/cpc/assets/cpc/img/icons/lightbulb.svg') 24px 24px no-repeat #ffffff !important; 
    margin-bottom: 64px;
    min-height: 96px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.stand-out .content > div p:last-child { margin-bottom: 0 !important; }
.stand-out .content > div ul:last-child { margin-bottom: 0 !important; }

.stand-out .content p strong {font-weight: 500 !important;}

.stand-out .content .print-image {    
    display: none; 
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) { /*medium screens*/ 
  .illustration-dos-donts-medium .illustration-dos-donts-medium-container > .row > .columns {  margin-bottom: 40px; }
  
  .illustration-dos-donts-medium .illustration-dos-donts-medium-container {  margin-bottom: 0; }
    
    .illustration-dos-donts-large .dos, .illustration-dos-donts-large .donts { max-width: 418px;}
    
    .illustration-dos-donts-medium-container article, .illustration-dos-donts-small-container article {
        max-width: 418px;
    }

    .illustration-dos-donts-small .dos .content .arrow:after, .illustration-dos-donts-small .dos .content .arrow:before,
    .illustration-dos-donts-small .donts .content .arrow:after, .illustration-dos-donts-small .donts .content .arrow:before {
        left: 134px /*30%*/;
    }
    .dos .content .arrow:after, .donts .content .arrow:after {
        /*bottom: 99%;*/
        top: -27px;
    }

    

    .illustration-dos-donts-medium .dos .content .arrow:after, 
    .illustration-dos-donts-medium .donts .content .arrow:after {
        /*bottom: 98%;*/
        top: -27px;
    }

    .stand-out .content { background-position: 24px 24px;}

}

@media only screen and (max-width: 40em) { /*small screens*/ 
  .illustration-dos-donts-medium .illustration-dos-donts-medium-container > .row > .columns {  margin-bottom: 40px; }
  
  .illustration-dos-donts-medium .illustration-dos-donts-medium-container {  margin-bottom: 0; }
    
    .dos .content .arrow, .donts .content .arrow{ 
        border: none;
        margin: 24px 0;
        padding: 0;
        padding-left: 36px;
        background-position-x: 0px;
        background-position-y: 0px;
    }

    .dos .content .arrow:after, 
    .donts .content .arrow:after,
    .dos .content .arrow:before,
    .donts .content .arrow:before {
        border-width: 0px;
        margin-left: -11px;
    }
    .stand-out .content h5 { margin-bottom: 24px;}
    .stand-out .content { /* background-position: 24px 24px; */
        padding: 96px 24px 24px 24px; 
    }

}

@media print { /* print */
    
    .illustration-dos-donts-large,
    .illustration-dos-donts-medium,
    .illustration-dos-donts-small { margin-bottom: 27px; }

    .illustration-dos-donts-large, 
    .illustration-dos-donts-medium,
    .illustration-dos-donts-small,
    .stand-out { page-break-inside: avoid !important; }

    .illustration-dos-donts-large .dos .content .arrow:after, 
    .illustration-dos-donts-large .dos .content .arrow:before,
    .illustration-dos-donts-large .donts .content .arrow:after, 
    .illustration-dos-donts-large .donts .content .arrow:before {
        left: 209px
    }

    .illustration-dos-donts-medium .dos .content .arrow:after, 
    .illustration-dos-donts-medium .dos .content .arrow:before, 
    .illustration-dos-donts-medium .donts .content .arrow:after, 
    .illustration-dos-donts-medium .donts .content .arrow:before,
    .illustration-dos-donts-small .dos .content .arrow:after, 
    .illustration-dos-donts-small .dos .content .arrow:before, 
    .illustration-dos-donts-small .donts .content .arrow:after, 
    .illustration-dos-donts-small .donts .content .arrow:before {
        left: 134px;
    }

    .illustration-dos-donts-large-container .columns,
    .illustration-dos-donts-medium-container .columns { width: 50%;}
    .illustration-dos-donts-small-container .columns { width: 33%;}

    .illustration-dos-donts-medium-container .columns .dos,
    .illustration-dos-donts-medium-container .columns .donts  {width: 100%;}
    
    .dos .content .arrow,
    .donts .content .arrow { border-color:#333333;} 
    .dos .content .arrow:before,
    .donts .content .arrow:before {border-bottom-color:#333333;}

    .dos .content .arrow p:before {
        content: url('../../../assets/cpc/img/icons/checkmark_do_gray.svg') !important; 
        position: absolute; 
        top: 16px;
        left: 16px;
        visibility: visible;
    }

    .donts .content .arrow  p:before {
        content: url('../../../assets/cpc/img/icons/x_dont_gray.svg') !important; 
        position: absolute; 
        top: 16px;
        left: 16px;
        visibility: visible;
    } 

	.stand-out > .row > .columns > article.content {
      border: 1px solid #666666 !important;
      border-radius: 4px !important;
      padding: 24px 24px 24px 96px !important;
      background: url('/cpc/assets/cpc/img/icons/lightbulb_print.svg') 24px 24px no-repeat #ffffff !important;
	  background-size: 35px !important;
      margin: 0 0 24px 0 !important;
    }

    .dos .content .arrow p, .donts .content .arrow p { margin-bottom: 0 !important;}
}