:root
{
    --bs:12px;
    --br:3px;
    --w4-l-size: 36px;
    --w4-l-radius: 9px;
    --dots: silver;
    --w4hd: 450px;
    --w4hm: 225px;
    
}

/*****************************************************************************/

.div-widget01-container {
    background-color:var(--sky);
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    height:var(--w4hd);
    overflow:hidden;
}

.div-widget01-image {
    background-position: center;
    background-size: cover;
    flex:1;
    max-width:45%;
}

.div-widget01-content {
    align-items:center;
    color:var(--navy);
    display:flex;
    max-width:600px;
    flex-wrap:wrap;
    padding-left:2em;
    width:60%;
}

.div-widget01-title {
    font-size:3em;
    font-weight:bold;
}

.div-widget01-text {
    color: var(--navy);
    font-size:1.5em;
    padding-bottom:2em;
    padding-top:1em;
}

/*****************************************************************************/

.div-widget01 {
	width:100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	height: var(--w4hd);
}

.div-widget01 > input {
	display: none;
	position: absolute;
}

.div-widget01 .div-widget01-strip {
	position: absolute;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: nowrap;
	z-index: 1;
	will-change: transform;
	transform: translateX(0);
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.div-widget01 .div-widget01-strip:hover {
	animation-play-state: paused;
}

.div-widget01 .div-widget01-item {
	width: 100%;
	height: 100%;
	position:relative;
	overflow-x: hidden;
	/*box-sizing: border-box;*/
	margin:0;
	/*margin: 0 .5px 0px .5px;*/
	display:flex;
	align-items:center;
}

.div-widget01-dots,
.div-widget01-anime {
	display: flex;
	flex-wrap: nowrap;
	position: absolute;
	width: 100%;
	justify-content:center;
	bottom: 0;
	z-index: 10;
}

.div-widget01-dots label {
	position: relative;
}

.div-widget01-dots label,
.div-widget01-anime div {
	display: block;
	width: var(--bs);
	height: var(--bs);
	border-radius: var(--br);
	background-color: rgba(200,200,200,.8);
	margin: 5px;
}

.div-widget01-dots label:after {
	content: "";
	background-color: transparent;
	display: block;
	position: absolute;
	width: var(--bs);
	height: var(--bs);
	border-radius: var(--br);
	top: 0;
	left: 0;
}

.div-widget01 label.label-widget01-play {
	display: block;
	width: var(--w4-l-size);
	height: var(--w4-l-size);
	border-radius: var(--w4-l-radius);
	/*border:1px solid rgba(255,255,255,.5);*/
	position: absolute;
	margin: 0;
	z-index: 3;
	background-color: var(--red);
	cursor:pointer;
	bottom: 50%;
	left:-100%;
	transition: all 1s ease-in-out;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
	animation-name: pcf-carousel-play-btn;
	animation-duration: 5s;
	color:white;
	text-align:center;
	background-image: url("https://robertgravesonline.co.uk/rg/svg/play.svg");

	
}

.div-widget01 label.label-widget01-play:hover {
	/*border:1px solid rgba(255,255,255,.8);*/
	z-index: 3;
	background-color: var(--navy);
	animation-name: none;
}

@keyframes pcf-carousel-play-btn {  
	0% { opacity: 1; }
	40% { opacity: 1; }	
	50% { opacity: .3; }
	60% { opacity: 1; }
	100% { opacity: 1; }
}

.div-widget01 label.label-widget01-play:after {
content: "";  
	/*width: 30px;
	height: 30px;
	border-left: 6px solid rgba(255,255,255,.8);
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;*/
	position: absolute;
	top: 2px;
	left: 6px;
	z-index: 3;
}

.div-widget01-anime {
	pointer-events: none;
}

.div-widget01-dots label {
	display: block;
	width: var(--bs);
	height: var(-bs);
	border-radius: var(--br);
	background-color: var(--dots);
	margin: 5px;
	cursor: pointer;
}

.div-widget01-anime div {
	display: block;
	width: var(--bs);
	height: var(-bs);
	border-radius: var(--br);
	background-color: transparent;
	margin: 5px;
	cursor: pointer;
}

#s1:checked ~ .div-widget01-dots label:nth-child(1):after,
#s2:checked ~ .div-widget01-dots label:nth-child(2):after,
#s3:checked ~ .div-widget01-dots label:nth-child(3):after,
#s4:checked ~ .div-widget01-dots label:nth-child(4):after,
#s5:checked ~ .div-widget01-dots label:nth-child(5):after,
#s6:checked ~ .div-widget01-dots label:nth-child(6):after,
#s7:checked ~ .div-widget01-dots label:nth-child(7):after,
#s8:checked ~ .div-widget01-dots label:nth-child(8):after {
	background-color: white;
	z-index: 20;
}

#s1:checked ~ label.label-widget01-play,
#s2:checked ~ label.label-widget01-play,
#s3:checked ~ label.label-widget01-play,
#s4:checked ~ label.label-widget01-play,
#s5:checked ~ label.label-widget01-play,
#s6:checked ~ label.label-widget01-play,
#s7:checked ~ label.label-widget01-play,
#s8:checked ~ label.label-widget01-play {
	bottom: 50%;
	left:20px;
	transition: all 1s ease-in-out;
}
/***************************************************************************/
#s1:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel;
	transform: translateX(0);

}

.div-widget01:hover .div-widget01-anime div:nth-child(1),
.div-widget01:hover .div-widget01-anime div:nth-child(2),
.div-widget01:hover .div-widget01-anime div:nth-child(3),
.div-widget01:hover .div-widget01-anime div:nth-child(4),
.div-widget01:hover .div-widget01-anime div:nth-child(5),
.div-widget01:hover .div-widget01-anime div:nth-child(6),
.div-widget01:hover .div-widget01-anime div:nth-child(7),
.div-widget01:hover .div-widget01-anime div:nth-child(8) {
	animation-play-state: paused;
}

.div-widget01 .div-widget01-dots:hover ~ .div-widget01-strip {
	animation-play-state: paused;
}

#s1:checked ~ .div-widget01-anime div,
#s2:checked ~ .div-widget01-anime div,
#s3:checked ~ .div-widget01-anime div,
#s4:checked ~ .div-widget01-anime div,
#s5:checked ~ .div-widget01-anime div,
#s6:checked ~ .div-widget01-anime div,
#s7:checked ~ .div-widget01-anime div,
#s8:checked ~ .div-widget01-anime div {
	animation-name: pcf-carousel-clear;
}


/******************************************************************************/




.div-widget01 .div-widget01-strip {
	width: 600%;
}

.div-widget01 #s1:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel-clear;
	transform: translateX(0);
}

.div-widget01 #s2:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel-clear;
	transform: translateX(-16.667%);
}

.div-widget01 #s3:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel-clear;
	transform: translateX(-33.34%);
}

.div-widget01 #s4:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel-clear;
	transform: translateX(-50%);
}

.div-widget01 #s5:checked ~ .div-widget01-strip {
	animation-name: pcf-carousel-clear;
	transform: translateX(-66.666%);
}

.div-widget01 .div-widget01-strip {
	animation-name: w4;
    animation-duration: 30s;
}


@keyframes w4 {  
	0% { transform: translateX(0); }
	12% { transform: translateX(0); }	
    18% { transform: translateX(-16.667%); }
	28% { transform: translateX(-16.667%); }
	34% { transform: translateX(-33.34%); }
	48% { transform: translateX(-33.34%); }
    54% { transform: translateX(-50%); }
	68% { transform: translateX(-50%); }
	74% { transform: translateX(-66.666%); }
	88% { transform: translateX(-66.666%); }
	94% { transform: translateX(-83.333%); }
	100% { transform: translateX(-83.333%); }
}


.div-widget01 .div-widget01-anime div:nth-child(1) {
	animation-name: pcf-carousel-dots-5-items-dots-1;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes pcf-carousel-dots-5-items-dots-1 {  
	0% { background-color: white; }
	12% { background-color: white; }	
    18% { background-color: transparent; }
	28% { background-color: transparent; }
	34% { background-color: transparent; }
	48% { background-color: transparent; }
    54% { background-color: transparent; }
	68% { background-color: transparent; }
	74% { background-color: transparent; }
	88% { background-color: transparent; }
	94% { background-color: white; }
	100% { background-color: white; }
}

.div-widget01 .div-widget01-anime div:nth-child(2) {
	animation-name: pcf-carousel-dots-5-items-dots-2;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes pcf-carousel-dots-5-items-dots-2 {  
	0% { background-color: transparent; }
	12% { background-color: transparent; }	
    18% { background-color: white; }
	28% { background-color: white; }
	34% { background-color: transparent; }
	48% { background-color: transparent; }
	54% { background-color: transparent; }
	68% { background-color: transparent; }
	74% { background-color: transparent; }
	88% { background-color: transparent; }
	94% { background-color: transparent; }
	100% { background-color: transparent; }
}

.div-widget01 .div-widget01-anime div:nth-child(3) {
	animation-name: pcf-carousel-dots-5-items-dots-3;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes pcf-carousel-dots-5-items-dots-3 {  
	0% { background-color: transparent; }
	12% { background-color: transparent; }	
    18% { background-color: transparent; }
	28% { background-color: transparent; }
	34% { background-color: white; }
	48% { background-color: white; }
    54% { background-color: transparent; }
	68% { background-color: transparent; }
	74% { background-color: transparent; }
	88% { background-color: transparent; }
	94% { background-color: transparent; }
	100% { background-color: transparent; }
}

.div-widget01 .div-widget01-anime div:nth-child(4) {
	animation-name: pcf-carousel-dots-5-items-dots-4;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes pcf-carousel-dots-5-items-dots-4 {  
	0% { background-color: transparent; }
	12% { background-color: transparent; }	
    18% { background-color: transparent; }
	28% { background-color: transparent; }
	34% { background-color: transparent; }
	48% { background-color: transparent; }
    54% { background-color: white; }
	68% { background-color: white; }
	74% { background-color: transparent; }
	88% { background-color: transparent; }
	94% { background-color: transparent; }
	100% { background-color: transparent; }
}

.div-widget01 .div-widget01-anime div:nth-child(5) {
	animation-name: pcf-carousel-dots-5-items-dots-5;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes pcf-carousel-dots-5-items-dots-5 {  
	0% { background-color: transparent; }
	12% { background-color: transparent; }	
    18% { background-color: transparent; }
	28% { background-color: transparent; }
	34% { background-color: transparent; }
	48% { background-color: transparent; }
    54% { background-color: transparent; }
	68% { background-color: transparent; }
	74% { background-color: white; }
	88% { background-color: white; }
	94% { background-color: transparent; }
	100% { background-color: transparent; }
}

.div-widget01 #s1:checked ~ .div-widget01 .div-widget01-anime div:nth-child(1),
.div-widget01 #s2:checked ~ .div-widget01 .div-widget01-anime div:nth-child(2),
.div-widget01 #s3:checked ~ .div-widget01 .div-widget01-anime div:nth-child(3),
.div-widget01 #s4:checked ~ .div-widget01 .div-widget01-anime div:nth-child(4),
.div-widget01 #s4:checked ~ .div-widget01 .div-widget01-anime div:nth-child(5){
	animation-name: pcf-carousel-clear;
}


@media only screen and (max-width: 720px) { 

 .div-widget01-container {
    flex-wrap:wrap; 
  
    
  }   
    
    
    .div-widget01-content {

    max-width:100%;
    width:100%;
    font-size:0.7em;
    height:var(--w4hm);
    justify-content:center;
   

}

.div-widget01-title {
    font-size:2em;
}

.div-widget01-text {

    margin-right:1em;
}

.div-widget01-image {
    max-width:100%;
     height:var(--w4hm);
}

}