/* ..-. .- - .... --- --

padding						5, 10, 20, 30, 90
font sizes				15, 18, 28, 46
font family				system sans 400, 600, 700, 900

dark					#1a202c
medium			#4a5568
alt						#718096
light					#a0aec0
lightest			#edf2f7 or #e2e8f0
purple				#533feb
green				#8efdd2
red						#eb3f5f

*/



.responsive {
  width: 100%;
  height: auto;
}
img.img-zoom {
  cursor: zoom-in;
}
@keyframes zooom-fade {
  0% {
    opacity: 0;
  }
}
#zooom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  cursor: zoom-out;
  animation: zooom-fade 0.3s;
}
.zooom-wrap, .zooom-img {
  position: relative;
  z-index: 102;
  cursor: zoom-out;
  transition: all 0.3s;
}








/* = structure 			..-. .- - .... --- -- */

* { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; border: none; outline: none; box-sizing: border-box; text-decoration: none; font-size: 100%; font-weight: 400; vertical-align: baseline; }

html, body { background: #fff; height: 100%; }
body { font-size: 16px; line-height: 1.5; color: #4a5568; text-align: center; display: grid; align-items: center; }

.aff { text-align: left; max-width: 1100px; margin: 0 auto; }
	.aff-cols { display: grid; grid-gap: 60px; grid-template-columns: 4.75fr 5fr; }
.section { margin-bottom: 30px; }

.testim-cols { display: grid; grid-gap: 60px; grid-template-columns: 1fr 1fr 1fr; margin-top: 30px; }

header { margin-top: 10px; }

	header svg { transition: ease transform 0.2s; margin-left: -10px;}
	header svg:hover { transform: scale(1.4); }
	header span { display: inline-block; text-indent: -9999em; }

.grid-wrap { position: relative; }
.grid { display: grid; grid-gap: 10px; border: 5px solid #e2e8f0; padding: 30px; }
	.grid-two { grid-template-columns: repeat(2, 1fr); }
	.grid-header { background: #fff; padding: 5px 10px; position: absolute; top: -11px; left: 25px; z-index: 100; font-size: 11px; text-transform: uppercase; font-weight: 500; }






/* = typography			..-. .- - .... --- -- */

h1, h2, h3 { color: #1a202c; }

h2 { font-size: 27px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; margin-bottom: 60px; }
p {}
	article p { padding-bottom: 20px; }
	.testim-cols p { font-size: 13px; font-weight: 500; }
	
small { font-size: 13px; color: #718096; display: block; }
	small a { color: #718096; text-decoration: underline; font-weight: 500; }
	.no-space { margin-top: 10px; }
	
strong { font-weight: 600; color: #1a202c; }

img { max-width: 100%; }
	img.round { border-radius: 5px; }

	img.testim { border-radius: 100px; overflow: hidden; width: 60px; height: 60px; margin: 0 0 20px 20px; display: block; float: right; }

	
a { transition: ease color 0.2s; }
	p a { font-weight: 600; color: #533feb; text-decoration: underline; }
	p a:hover { color: #718096; }
	a.button, button { padding: 12px 30px; border-radius: 5px; font-size: 15px; line-height: 1.6; font-weight: 400; margin-right: 10px; text-decoration: none; transition: ease background 0.2s; display: block; text-align: center; }
	.main { background: #533feb; color: #fff; }
	.main:hover { background: #718096; color: #fff; }
	.alt { background: #edf2f7; color: #718096; }
	.alt:hover { background: #cbd5e0; color: #718096; }

.highlight { background-image: linear-gradient(120deg, rgba(142,253,210,.4) 0%, rgba(142,253,210,.4) 100%); background-repeat: no-repeat; background-size: 100% 6px; background-position: 0 60%; transition: ease background-size .2s; padding: 0 4px; margin: 0 -2px; font-weight: inherit;  }








/* = media queries	..-. .- - .... --- -- */

@media screen and (max-width: 1150px) {
	body { padding: 20px; font-size: 15px; display: block; }
	header { margin-top: 0; }
	.section { margin-bottom: 30px; }
	h2 { font-size: 19px; letter-spacing: 0; }
	a.button, button, input { width: 100%; margin-bottom: 10px; display: block; text-align: center;}

	.aff-cols, .testim-cols { display: block; }
		.col-side, testim-cols .col { margin-bottom: 30px; }
	img.testim { margin: 20px 0; display: block; float: none; }

	.grid { display: block; border: none; padding: 0; }
	.grid-header { background: none; padding: 0 0 10px 0; position: relative; top: 0; left: 0; z-index: 100; }

}

@media screen and (min-height: 750px) {
	body { padding: 60px 20px; }
	.testim-cols { margin-bottom: 60px; }
}