#CPImg
{
	position: relative;
}

img.hidden {
	pointer-events: none;
	width: 100%;
	position:absolute;
	left: 0;
	top:0;

	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}   

img.opaque {
	width: 100%;
	position:absolute;
	left: 0;
	top:0;

	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	opacity:1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}   

img.special {
	width: 100%;
	position:absolute;
	left: 0;
	top:0;
	opacity:1;
}   


.smalldisplayonly
{
	margin: 0 auto;
}

.smalldisplayonly li
{
	padding: 0 0 0 5px !important;
}

@media screen and (max-width: 800px) {
	#CPImg {
		width:100%;
		padding-top: 100%;
		text-align: center;
	} 

	.largedisplayonly {
		display: none !important;
	}   
	.smalldisplayonly {
		display: block !important;
	} 

	#CPImg .content
	{
		width: 100%;
	}

	img.special, img.opaque, img.hidden
	{
		left: 0;
	}

	.spotlights > section
	{
	    display: block !important;
	}

}   
@media screen and (min-width: 800px) {

	.smalldisplayonly {
		display: none !important;
	}   
}   


#cp_tile
{
	background-color: rgba(142, 169, 232, 0.4);
}
/*
.overview_box
{
	max-width: 100%;
	margin: 0 auto;
}
*/
.inner p
{
	text-align: justify;
}



/* for CPs PAGE */
.spotlights > section {
                        display: -moz-flex;
                        display: -webkit-flex;
                        display: -ms-flex;
                        display: flex;
                        -moz-flex-direction: row; 
                        -webkit-flex-direction: row;
                        -ms-flex-direction: row;
                        flex-direction: row;
                }       
                 
                        .spotlights > section:nth-child(2n) {
                                -moz-flex-direction: row-reverse;
                                -webkit-flex-direction: row-reverse;
                                -ms-flex-direction: row-reverse;
                                flex-direction: row-reverse;
                                /*background-color: rgba(212, 212, 255, 0.06);*/
                        }       

.spotlights > section:nth-child(2n) > .content {
                                        -moz-align-items: -moz-flex-end;
                                        -webkit-align-items: -webkit-flex-end;
                                        -ms-align-items: -ms-flex-end;
                                        align-items: flex-end;
                                }

                        .spotlights > section > .content {
                                display: -moz-flex;
                                display: -webkit-flex;
                                display: -ms-flex;
                                display: flex;
                                -moz-flex-direction: column;
                                -webkit-flex-direction: column;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -moz-justify-content: center;
                                -webkit-justify-content: center;
                                -ms-justify-content: center;
                                justify-content: center;
                                -moz-align-items: center;
                                -webkit-align-items: center;
                                -ms-align-items: center;
                                align-items: center;
                                padding: 2em 3em 1em 3em ;
                        }

.spotlights > section > .content > .inner {
                                        margin: 0 auto;
                                        max-width: 100%;
                                        width: 65em;
                                }

  .spotlights > section > .image {
                                background-position: center center;
                                background-size: cover;
                                border-radius: 0;
                                display: block;
                                position: relative;
                                
                        }


#CPImg, #CPImg img
{                       
	
	max-width: 100%;
}

@media screen and (min-width: 1200px) {

	.spotlights > section > .content
	{
		width: 70%;
	}

	.spotlights > section > .image {
		width: 30%;
	}

}

@media screen and (min-width: 800px) {



	.overview_box .content
	{
		max-width: 65% !important;
	}

	.overview_box .image
	{
		min-width: 35% !important;
	}

	#CPImg, #CPImg img
        {
                
                max-height: 540px !important;
        }

}



@media screen and (min-width: 1200px) 
{
	        #CPImg, #CPImg img
        {
                height: 500px;
                max-height: 540px !important;
        }

}


@media screen and (max-width: 1190px)
{
	.spotlights > section > .content
        {
		padding: 1rem;
		width: 55%;
	}
	#CPImg
	{
		max-height: 100% !important;
		height: 450px;
		width: 45%;
	}
}




@media screen and (max-width: 940px)
{
        .spotlights > section > .content
        {
                padding: 1rem;
                width: 50%;
        }
        #CPImg
        {
                width: 50%;
        }
}


@media screen and (max-width: 800px)
{
        .spotlights > section > .content
        {
                padding-left: 0em !important;
                padding-right: 0em !important;
		width: 100%;
		
        }

	#CPImg
        {
                width: 100%;
        }

}


@media screen and (max-width: 500px)
{
        
        #CPImg
        {
                height: auto;
        }
}


#CPImg img
{
        aspect-ratio: 1;
        width: auto;
}



#CP li img
{
	width: 14pt;
	height: 14pt;
	padding-top: 5px;
}


.cpbtn
{
	padding: 0.4em 0.7em 0.4em 0.7em !important;
}

#CPs
{
	margin-left: -1em;
}