@font-face {
    font-family: 'Della Respira';
    src: url('../f/dellarespira-regular.woff2') format('woff2'),
         url('../f/dellarespira-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000-5FF;
}

* {
margin: 0;
padding: 0;
border: 0;
}

:root {
--gold:#fc0;
--red:#c03;
--green:#390;
--darkgreen:#060;
--blue:#065D89;
--white:#fff;
}

:focus-visible {
outline: 3px solid black;
box-shadow: 0 0 0 6px white;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.2em;
line-height: 1.5;
text-align: left;
color: #000;
background-color: #fff;
background-image: url(../images/top-lights.png), url(../images/expert-back-30.svg);
background-repeat: no-repeat, repeat-x;
background-position: 50% -10px, 0 0;
background-size: auto, 250px auto;
}

a { 
text-decoration: underline;
color: var(--blue);
}
	
a:visited, a:hover { 
color: var(--red);
}

h1, h2, h3, h4 {
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-weight: 400;
}

header, footer, main {
max-width: 1400px;
margin: 0 10%;
}

header {
font-family: 'Della Respira', Baskerville, Georgia, serif;
margin-top: 3em;
margin-bottom: 3em;
display: flex;
flex-flow: row wrap;
}

header #photo {
flex: 2;
}

header #photo img {
display: block;
margin: 0 auto;
border: solid #fff;
border-width: .7em .7em 1.8em .7em;
box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5);
box-shadow: 0 0.2rem 1.2rem rgb(0 0 0 / 20%);
width: 70%;
height: auto;
transform: rotate(-5deg);
}

#headerinfo {
flex: 4;
text-align: left;
padding-top: 3em;
}

h1 {
font-size: 3.44vw;
}

header p {
font-size: 1.45vw;
margin-bottom: 0;
}

h2, h3, p {
margin-bottom: .5em;
}

.center {
font-family: 'Della Respira', Baskerville, Georgia, serif;
text-align: center;
font-size: 170%;
}

ul {
margin: 0 0 1em 0;
}

ol {
margin: 0 0 1em .5em;
}

ul li {
list-style: none;
background: url(../images/snowflake2.svg) no-repeat 0 50%;
background-size: 30px auto;
padding: 10px 0 10px 40px;
margin-bottom: 10px;
}

ul.nobullet li {
background: none;
padding-left: 0;
}

h2 {
font-size: 3vw;
margin: 1em 0 .5em 0;
text-align: center;
}

h3 {
font-size: 1.1em;
margin-top: 1em;
}

h4 {
font-size: 1.3em;
margin: .5em 0;
}

hr {
border-top: 8px dotted var(--blue);
height: 0;
width: 200px;
margin: 1em auto;
}

#about {
display: flex;
flex-flow: row wrap;
margin-bottom: 2em;
}

#aboutinfo {
flex: 3;
margin-right: 2em;
}

#aboutimg {
flex: 3;
}

#about img {
width: 100%;
height: auto;
}

#media {
margin-top: 4em;
margin-bottom: 3em;
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
width: auto;
padding: 3em 1em 4.5em 1em;
    
color: #fff;
text-shadow: 2px 2px 8px #000;

background: var(--blue) url(../images/image-back.svg) repeat 50% 50%;
background-size: 250px auto;
background-attachment: fixed;
box-shadow: 0 0 50px rgba(0,0,0,.5) inset;
}

#logos {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
margin: 0 auto 2em auto;
max-width: 1300px;
}

#logos li {
width: 13%;
margin: .5em auto 0 auto;
}

#logos img {
width: 100%;
height: auto;
box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
border-radius: 5px;
}

footer {
margin: 50px 0 25px 0;
text-align: center;
font-family: 'Della Respira', Baskerville, Georgia, serif;
}

footer a {
color: #000;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

/* basic form CSS */

button, input, select, textarea {
font-family: inherit;
}

label {
margin:0 0 3px 0;
padding:0;
display:block;
font-weight: bold!important;
color: #000!important;
}
input[type=text], 
input[type=date],
input[type=datetime],
input[type=number],
input[type=search],
input[type=time],
input[type=url],
input[type=email],
textarea, select{
box-sizing: border-box;
background: #fff;
color: #111;
padding: 10px 15px;
margin:0;
border: 1px solid var(--blue);
outline: none;	
font-size: inherit;
}
input[type=text]:focus, 
input[type=date]:focus,
input[type=datetime]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=email]:focus,
textarea:focus, 
select:focus{
border: 1px solid var(--red);
}
input[type="checkbox"],input[type='radio'] {
width: 1.5em;
height: 1.5em;
margin-right: 0.5em;
vertical-align: text-top;
}
select{
width: 100%;
}
textarea{
min-height: 150px!important;
}
button, input[type=submit], input[type=button]{
background: var(--blue);
color: #fff;
padding: 12px 18px;
border: none;
font-size: inherit;
}
button:hover, input[type=submit]:hover, input[type=button]:hover{
background: var(--red);
}
.cog-form {
margin-bottom: 2em!important;
}
.cog-confirmation__message {
font-style: italic;
}
.cog-form [aria-hidden="true"], .cog-form [data-a11y-toggle]:not([aria-controls]) {
display: inline!important;
}


/* media queries */

@media (max-width: 920px) {

header, footer, main {
margin-left: 7%;
margin-right: 7%;
}

header #photo {
flex: 2;
}

header #photo img {
width: 150px;
height: 150px;
border-width: .5em .5em 1.4em .5em;
}

#headerinfo {
flex: 5;
padding-top: 1.5em;
padding-left: 1em;
}

h1 {
font-size: 4vw;
}

header p {
font-size: 1.7vw;
}

h2 {
font-size: 3.5vw;
}

#aboutinfo {
flex: 1 100%;
margin-right: 0;
order: 1;
}

#aboutimg {
flex: 1 100%;
margin-right: 0;
order:2;
text-align: center;
}

#about img {
max-width: 500px;
}

#logos {
margin: 0 0 2em 0;
}

#logos li {
width: 27%;
}

.center {
font-size: 140%;
}

}



@media (max-width: 750px) {

body {
font-size: 1.1em;
}

header #photo {
flex: 1 100%;
margin: 0 auto 1em auto;
}

#headerinfo {
flex: 1 100%;
padding: 1em 0 0 0;
text-align: center;
}

h1 {
font-size: 6vw;
}

header p {
font-size: 4.5vw;
}

h2 {
font-size: 6vw;
margin: 1em 0 .5em 0;
}

#media {
padding-left: 1.5em;
padding-right: 1.5em;
}

#logos li {
width: 37%;
}

.center {
font-size: 120%;
}

footer {
font-size: .7em;
}

}


@media print {

#contact {
display: none;
}

a:link, a:visited {
color: #000;
text-decoration: none;
}

ul li {
list-style: circle;
background: none;
padding: 0;
margin-bottom: 5px;
}

header {
margin: 0 0 1em 0;
padding: 0;
}

header #photo {
flex: 2;
}

#headerinfo {
flex: 4;
text-align: left;
padding: 2em 0 0 1em;
margin: 0;
}

h1 {
font-size: 1.5em;
}

header p {
font-size: 0.65em;
}

h2 {
font-size: 1.5em;
}

#aboutinfo {
flex: 1 100%;
margin-right: 0;
order:1;
}

#aboutimg {
display: none;
}

#about img {
width: 100%;
}

#media {
margin: 3em 0;
padding: 0;
box-shadow: none;
text-shadow: none;
}

#logos li {
list-style: none;
width: 13%;
}

footer {
margin-top: 25px;
text-align: left;
}

}