header .sec1, header.sec2{
	width:100%;
	overflow:visible;
	box-sizing:border-box;
}

header .sec1 .c, header .sec2 .c{
	overflow:visible;
	box-sizing:border-box;
	padding-right:7%;
	padding-left:7%;
	padding-top:0;
	padding-bottom:0;
	margin-bottom:0;
	margin-top:0;
}

header .sec1 .social, header .sec2 misc{
	overflow:visible;
	box-sizing:border-box;
	margin-top:3.5em;
}

header .sec1 .social{
	float:right;
}

header .sec2 misc{
	float:left;
	width:5em;
}

header .social a{
	width:1.4em;
	display:block;
	float:right;
	margin-left:.7em;
}

header .social a img{
	width:100%;
	opacity:.8;
}


.fieldgroup{
	margin-bottom:1.5em;
}
.fieldgroup.pairs{
	display:grid;
	grid-row-gap:.6em;
}

.fieldgroup .field{
	display:grid;
	grid-template-columns:6.5em auto;
}

.pair label{
	background-color:black;
	color:white;
	padding-right:1em;
	padding:1em 1em .7em 1.2em;
	text-transform:uppercase;
	font-weight:bold;
}

.pair input[type=text]{
	background-color:rgba(255,255,255,.87);
	color:black;
	border:0;
	border-bottom:.3em transparent solid;
	padding:1em 1em .7em 1.2em;
	
}


.pair input[type=text]:focus{
	background-color:rgba(255,255,255,1);
	border:0;
	border-bottom:.3em rgba(36,193,255,1) solid;
	outline:0;
}


@media screen and (max-width:500px){
	main.content > .c{
		padding-right:0;
		padding-left:0;
	}
	
}


@media screen and (max-width:959.999999px){
	
	.gridcontainer{
		display:grid;
		grid-row-gap:2em;
	}
}


@media screen and (min-width:960px){
	
	.gridcontainer{
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-column-gap:2em;
		grid-row-gap:2em;
		font-size:.63em;
	}
	
	.gridcontainer .checkboxes .input{ 
		transform: scale(.7);
	}
	
	/*input[type=checkbox]{transform: scale(??????????????????????????????);}*/	
			
			.gridcol2row1{
				
			}

		.gridcol2{
			
		}
}


.gridcol2row1{
	background-color:black;
	background-image:url(i/scaled/iStock-1253833506.800px.jpg);
	background-size:cover;
	background-position:center center;
}

.imgc.landscape{
	width:100%;
	padding-bottom:66.6%; /* 1.5:1 / 35mm film ratio / using padding to set width
		
		https://stackoverflow.com/questions/8894506/can-i-scale-a-divs-height-proportionally-to-its-width-using-css
		You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the parent element.
			
			CSS:

			.imageContainer {
				position: relative;
				width: 25%;
				padding-bottom: 25%;
				float: left;
				height: 0;
			}

			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
			}
	*/
	
	/*background-color:rgba(255,0,0,.5);*/
}

.gridcol2{
	/*background-color:rgba(255,0,0,.5);*/
	display:grid;
	grid-row-gap:2em;
	grid-template-rows:auto auto;
}
.gridcol1{
	display:grid;
	grid-row-gap:1em;
	grid-template-rows:minmax(max-content, max-content) auto;
}

.gridcol1 .text_wrapper{
	background-color:#a3cae2;
	color:black;
}

.gridcol2row2{
	display:grid;
}
	.gridcol2row2 .main_text{
		display:grid;
		grid-row-gap:1em;
		grid-template-rows:minmax(max-content, max-content) auto;
	}
	
	.heading_wrapper,
	.text_wrapper{
		padding:2.5em;
	}
	
	.main_text .text_wrapper{
		background-color:black;
		background-image:url(i/scaled/pool.bg.1200px.jpg);
		background-size:cover;
		color:white;
	}
	
	.heading_wrapper{
		background-color:black;
		color:white;
		padding-bottom:1.7em;
		padding-top:2.0em;
		margin-bottom:0;
	}
		.heading_wrapper h2{
			/*background-color:rgba(255,255,0,.5);*/
			margin-bottom:0;
			padding-bottom:0;
			margin-top:0;
		}


.main_text{
	margin-top:0;
	padding-top:0;
}
	.main_text .text_wrapper{
		font-size:1.15em;
	}
.main_text h2, .rfi_form h2{
	margin-top:0;
}

.main_text ul, .main_text li{
	list-style-type:square;
}

.main_text ul{
	margin-left:0;
	padding-let:0;
}

.main_text li{
	margin-left:1.3em;
}

main.content{
	padding-top:0;
	padding-bottom:0;
}

header{
	background-color:black;
	color:white;
	background-image:url(i/scaled/shutterstock_160071032.1400px.jpg);
	background-size:cover;
	background-position:center center;
	border-bottom:.4em black solid;
}

footer{
	background-color:black;
	color:white;
}

header .adj{
	overflow:auto;
	background-color:rgba(0,5,10,.2);
}

header .logo_sec > .c{
	/* logo image already contains padding (because of shadow)
	so we don't need more */
	margin-bottom:0;
	padding-bottom:0;
}


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

	header .logo_sec > .c{
		margin-left:7.5em;
	}	
	header .logo{
		width:5.5em;
		max-width:5.5em;
		margin-left:auto;
		margin-right:auto;
	}	
}
header .logo{
	width:5.5em;
	max-width:5.5em;
}

header .text1{
	margin-top:1em;
	text-align:center;
	max-width:60em;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
}

header h1{
	text-shadow:0 0 1.2em rgba(0,0,0,.9);
	margin-bottom:.5em;
}

header .text1 p{
	text-shadow:
		0 0 .3em rgba(0,0,0,.9),
		0 0 1em rgba(0,0,0,.9),
		0 0 1.6em rgba(0,0,0,.9)
	;
	width:100%;
}

.main_text{
	float:left;
}

/*
@media screen and (min-width:800px){
	.rfi_form{
		width:50%;
		margin-left:5%;
		float:right;
		clear:none;
		font-size:.8em;
	}
	.main_text{
		width:40%;
		float:left;
		clear:none;
	}										
}
*/

main{
	background-color:#fafafa;
	color:black;
}

.rfi_form{
	/*background-color:white;
	border:1px black solid;*/
	padding:0;
	overflow:auto;
}

form .checkboxes label strong{
	text-transform:uppercase;
}

input[type=text]{
	background-color:white;
	border:none;
}

input[type=submit]{
	background-color:black;
	color:white;
	text-transform:uppercase;
	border:0;
	padding:1em 1.7em;
}
	input[type=submit]:hover,
	input[type=submit]:focus{
		cursor:pointer;
		background-color:#1d2972;
	}

h1,h2{
	text-transform:uppercase;
	letter-spacing:-.02em;
}

h2,h3{
	border-bottom:.2em solid black;
	padding-bottom:.8em;
	margin-bottom:1em;
}