@charset "UTF-8";
@layer fonts {
	@font-face {font-display: optional; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/templates/css/open-sans-v44-latin-regular.woff2') format('woff2');}
	@font-face {font-display: optional; font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('/templates/css/open-sans-v44-latin-600.woff2') format('woff2');}
	@font-face {font-display: optional; font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('/templates/css/open-sans-v44-latin-800.woff2') format('woff2');}
}

@layer globals {
	html {scroll-behavior: smooth; max-width:2560px; margin:0 auto;}
	*, *::before, *::after {box-sizing:border-box; min-width: 0;}
	body {margin:0; font-family:'Open Sans', sans-serif; font-weight:400;}
	img {display:block; max-width:100%; height:auto;}
	input {font-family:'Open Sans', Arial, Helvetica, sans-serif;}
	a{}
}

@layer colors {
    :root {
        --c-white: #FFFFFF;
        --c-gray: #bd2323;
        --c-lightgray: #F9F9F9;
        --c-darkgray: #F2F4F8;
        --c-black: #000000;
        --c-blue: #006080;
    }
    .bg_gray{background-color:var(--c-gray); color:var(--c-black);}	

	h1{color:red;}
	h2{color:blue;}
	h3{color:green;}
}

@layer typography {

    :root {
        --f-headline: 'Open Sans', sans-serif;
        --f-subheadline: 'Open Sans', sans-serif;
        --f-normal: 'Open Sans', sans-serif;
    }
}

@layer elements {
	.btn_blue{color:var(--c-white); background-color:var(--c-blue); border:1px solid var(--c-blue); padding:8px 16px; text-decoration:none !important; text-align:center; display:inline-block; border:1px solid #FFFFFF; border-radius:8px;}
	.btn_blue:hover{color:var(--c-blue); background-color:var(--c-white); border:1px solid var(--c-blue);}
}

@layer wrappers {
	:root {
        --lo-padding:40px;
		--main-width:1400px;
		--sub-width:1100px;
	}

	.mainWrapper{display:grid; grid-template-columns:var(--lo-padding) 1fr var(--lo-padding); position:relative;}
	.mainWrapper > * {grid-column:2 / 3;}
	.mainWrapper > .fullBleed {grid-column: 1 / -1; background-color:green;}
	@media (width >= 1400px){
		.mainWrapper{grid-template-columns: minmax(var(--lo-padding), 1fr) minmax(auto, var(--main-width)) minmax(var(--lo-padding), 1fr);}
	}

	.subWrapper{display:grid; grid-template-columns:var(--lo-padding) 1fr var(--lo-padding); position:relative;}
	.subWrapper > * {grid-column:2 / 3;}
	.subWrapper > .fullBleed {grid-column: 1 / -1; background-color:green;}
	@media (width >= 1100px){
		.subWrapper{grid-template-columns: minmax(var(--lo-padding), 1fr) minmax(auto, var(--sub-width)) minmax(var(--lo-padding), 1fr);}
	}
}

@layer rows {
	#hero{background-color:yellow;}

	#usa{background-color:var(--c-lightgray);}
		.usaBlock{display:flex; flex-direction:row;}
		.usaBox{flex:1;}
		.usaBox{padding:32px 0; display:flex; flex:1; flex-direction:column;}

	#newsrow{background-color:var(--c-white);}
		.newsWrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem; /* optional spacing */
		}

		.newsItem {
		flex: 1 1 300px;   /* flex-grow | flex-shrink | flex-basis */
		min-width: 250px;  /* minimum allowed width */
		max-width: 500px;  /* maximum allowed width */
		border:1px solid #dddddd;
		padding: 1rem;
		}


	#looking{background-color:var(--c-lightgray); font-family:var(--f-normal);}
		.lookingBlock{display: block; text-align: center; padding: 32px 0;}
		.lookingBlock h2{padding:0 0 10px 0; margin: 0;}

	#preview{background-color:var(--c-darkgray); font-family:var(--f-normal);}
		.previewLogo{padding:30px 0;}
		.previewBlock{display:flex; flex-direction:row; border-top:1px solid #C1C7CD;}
		.previewBox{flex:1;}
		.previewBox{padding:32px 0; display:flex; flex:1; flex-direction:column;}
		.previewBox h2{padding:0 0 10px 0; margin: 0;}
		.previewBox a{color:black;}
		.previewBox a:hover{color:red;}
		.previewBox ul {list-style-type: none; padding:0; margin:0;}
		.previewBox li {padding:5px;}
	
	#copy{background-color:var(--c-darkgray); font-family:var(--f-normal);}
		.copyBlock{display:flex; flex-direction:row; border-top:1px solid #C1C7CD;}
		.copyBlock .copyBox:last-child {justify-content:flex-end;}
		.copyBox{padding:32px 0; display:flex; flex:1;}
		.copyBox a{color:black;}
		.copyBox a:hover{color:red;}
		.copyBox ul {list-style-type: none; padding:0; margin:0; display: flex;}
		.copyBox li {padding: 5px;}

}