*{
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
		
	/* BRANDED  */
	:root {
			--color1: #222222; 
			--color2: #007dc3; 
			--color3: #4292cf; 
			--color4: #e8f2fd;
	}
		
	html, body {
		font-family: "Barlow", serif;
		font-style: normal;
		margin: 0;
	}
	
	small {
		font-size: 0.75em;
	}

	body {
		color:  var(--color1);
		font-size: 18px;
    	line-height: 1.5;
	}
		
	a {
		color:  var(--color2);	
		text-decoration: underline;
	}
	a:hover {
		text-decoration: none;
	}
	
	.row {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: 1fr auto;
		column-gap: 60px;
		row-gap: 1em;
		
		max-width: 960px;
		margin: 0 auto;
	}
		
	[class*="grid-"] {
		/*display: grid;*/
		/*margin: 0 1em;*/
	}
		
	.grid-one {
		grid-column: auto / span 12;
	}
		
	.grid-fourth {
		grid-column: auto / span 3;
	}

	.grid-third {
		grid-column: auto / span 4;
	}
		
	.grid-icon {
		background: var(--color4);
		text-align: center;
		border-radius: 50%;
		width: 280px;
		height: 280px;
		align-items: center;
		display: grid;
		padding: 1em;
		margin: 0 auto;
	}
	
	.m3 {
		margin-bottom: 3em;	
		padding: 0 1em;
	}
		
	.grid-icon img {
		max-width: 150px;
		margin: 1em auto 0;
	}
		
	.grid-icon h3 {
		font-size: 1.5em;
		/*color:  var(--color2);	*/
    	text-transform: uppercase;
    	margin: 0 0 1.5em;
	}

	.grid-two-thirds {
		grid-column: auto / span 8;
	}

	.grid-half {
		grid-column: auto / span 6;
	}

	.grid-three-fourths {
		grid-column: auto / span 9;
	}
	
	.grid-text {
		max-width: 600px;
		margin: 0 auto;
		padding: 4em 1em 2em;
	}
	
	.footer {
		background: var(--color2);
		background-repeat: no-repeat;
		color: #ffffff;
		max-width: 100%;
		overflow: hidden;
		text-align: center;
		padding: 2em 1em;
		margin: 2em auto 0;
	}
	.footer a {
		color: #ffffff;
	}

	@media only screen and (min-width: 1150px) {
		.footer {
			background: var(--color2) url("../images/bg-dot.png") top -100px right -350px;
			background-repeat: no-repeat;
		}
	}
		
	@media only screen and (max-width: 660px) {
		.row {
			
			display: block;
		}
		.grid-icon {
			margin: 0 auto 2em;
		}
	}
	
	@media only screen and (max-width: 959px) {
		.row {
			/*padding: 0 1em;*/
		}
		.grid-icon {
			margin: 0 auto 2em;
		}
	}
		
		
	/* container */
	.responsive-three-column-grid {
		display:block;
	}

	/* columns */
	.responsive-three-column-grid > * {
		padding:1rem;
	}

	/* tablet breakpoint */
	@media (min-width:880px) {
		.responsive-three-column-grid {
			display: grid;
			grid-auto-rows: 1fr;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

		
		
	h1{
		font-size:2.2em;
		line-height:1.2em;
		margin:0 0 .25em
	}
	h2{
		font-size:1.5em;
		margin:0 0 1em
	}
	h3{
		font-size:1.3em
	}

	h4,h5{
		margin:0 0 .6em
	}

	h4{
		font-size:1.2em
	}
	h5{
		font-size:1.1em
	}
	h6{
		font-size:1.1em;
		margin:0 0 .3em
	}
	@media only screen and (min-width:768px){
		h1{
			font-size:2.4em
		}
		h2{
			font-size:1.8em
		}
		h3{
			font-size:1.5em
		}
		h4{
			font-size:1.2em
		}
		h5{
			font-size:1.1em
		}
		h6{
			font-size:1.1em
		}
	}
	h1+h2,h1+h3,h1+h4,h2+h3,h3+h4,h4+h5,h5+h6{
		margin-top:1em
	}
	p+h2,p+h3,p+h4,p+h5{
		margin-top:2.5em
	}
	p, ul{
		margin-bottom: 1em
	}
	ol,ul{
		margin:0 0 3em 2em
	}
	li{
		margin-bottom:.5em
	}
	p+ol, p+ul{
		margin:- 1em 0 3em 2em;
	}
		
		/*  */
		
	.wrapper{
	  position: relative;
	  /*width: 960px;
	  height: 400px;*/
		max-width: 960px;
		width: 100%;
		height: 400px;
	}
	.wrapper .img{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}
	.wrapper .img img{
	  height: 100%;
	  width: 100%;
	  object-fit: cover;
	  clip-path: circle(0% at 0% 100%);
	  transition: all 0.7s;
	  border-radius: 0 150px 0 150px;
	}
	#one:checked ~ .img-1 img{
	  clip-path: circle(150% at 0% 100%);
	}
	#two:checked ~ .img-1 img,
	#two:checked ~ .img-2 img{
	  clip-path: circle(150% at 0% 100%);
	}
	#three:checked ~ .img-1 img,
	#three:checked ~ .img-2 img,
	#three:checked ~ .img-3 img{
	  clip-path: circle(150% at 0% 100%);
	}
	#four:checked ~ .img-1 img,
	#four:checked ~ .img-2 img,
	#four:checked ~ .img-3 img,
	#four:checked ~ .img-4 img{
	  clip-path: circle(150% at 0% 100%);
	}
	#five:checked ~ .img-1 img,
	#five:checked ~ .img-2 img,
	#five:checked ~ .img-3 img,
	#five:checked ~ .img-4 img,
	#five:checked ~ .img-5 img{
	  clip-path: circle(150% at 0% 100%);
	}
	.wrapper .sliders{
	  position: absolute;
	  bottom: 20px;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 99;
	  display: flex;
	}
	.wrapper .sliders label{
	  border: 2px solid var(--color4);
	  width: 13px;
	  height: 13px;
	  margin: 0 3px;
	  border-radius: 50%;
	  cursor: pointer;
	  transition: all 0.3s ease;
	}
	#one:checked ~ .sliders label.one,
	#two:checked ~ .sliders label.two,
	#three:checked ~ .sliders label.three,
	#four:checked ~ .sliders label.four,
	#five:checked ~ .sliders label.five{
	  width: 35px;
	  border-radius: 14px;
	  background: var(--color4);
	}
	.sliders label:hover{
	  background: var(--color4);
	}
	input[type="radio"]{
	  display: none;
	}
		
	body{scrollbar-color:var(--color2);}
	body::-webkit-scrollbar{width:20px}
	body::-webkit-scrollbar-track{background:#ffffff}
	body::-webkit-scrollbar-thumb{background-color:var(--color2);border:3px solid #ffffff}

	.h2-anima {
		font-size:2.2em;
		line-height:1.2em;
		margin:0 0 .25em;
		/*color: var(--color2);*/
			
		max-width: 760px;
		margin: 0 auto;
		padding: 0 1em 2em;
		text-align: center;
		text-wrap: balance;
	}
		
		.navbar {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  height: 100%;
		  width: 100%;
		  margin: auto;
		  padding: 0 1em;
		}
		
		.navbar h1 {
			margin: 0;
		}

		.navbar ul {
		  	display: flex;
			margin: 0;
		}

		.navbar {
		  	justify-content: space-between;
		 	margin: 0.5em 0;
		}

		.navbar ul li {
		  list-style-type: none;
		}

		.navbar ul li {
		  padding: 10px;
		  margin: 0 10px;
		}

		.navbar a {
		  	font-weight: bold;
			text-decoration: none;
		}

		.navbar a:hover {
		  color: var(--color1);
		}

		/* Responsive section for small screen like mobile devices */

		@media screen and (min-width: 200px) and (max-width: 767px) {
		  .container {
			height: 100%;
		  }

		  .navbar {
			flex-direction: column;
			margin: 0.5em 0;
		  }
		}
	
	
	figure {
		  border: thin #c0c0c0 solid;
		  display: flex;
		  flex-flow: column;
		  padding: 5px;
		  max-width: 450px;
		  margin: 1em;
		}

		figcaption {
		  background-color: #222;
		  color: #fff;
		  font: italic smaller sans-serif;
		  padding: 3px;
		  text-align: center;
		}