@charset "UTF-8";
/* CSS Document */

/* reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;}
ul[role='list'],
ol[role='list'] {
  list-style: none;}
html:focus-within {
  scroll-behavior: smooth;}
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;}
a:not([class]) {
  text-decoration-skip-ink: auto;}
img,
picture {
  max-width: 100%;
  display: block;}
input,
button,
textarea,
select {
  font: inherit;}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;}
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;}
}

body,html { background-color:#666; }
a:link      {color:#FFF; }
a:active    {color:#000; }
a:focus     {color:#666; }
a:hover     {color:#8F2426; }
a:visited   {color:#D1CECE; }
a:visited:hover {color:#8F2426;}

* {margin:0; padding:0;
}

/* TYPOGRAPHY*/

h1 {font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.45em; color:#F6F6F6; }
h2 {font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; color:#F6F6F6; margin-top: .3em; }
h3 {font-family:Georgia, "Times New Roman", Times, serif; font-size:1.1em; color:#F6F6F6; }

p  {font-family:Arial, Helvetica, sans-serif; font-size:.8rem; color:#F6F6F6; }
ul {color:#FFF;}
a  {text-decoration:none;}
body {background-color: #666; }



/* Header */
header {
  margin: auto;
    background-color:#4572A4;
    padding: .4em;
    max-width: 880px;
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-around;
    margin-top: .5em; 
    }
 

.logo img {flex: 3; margin: 0em; }

.logo-text {flex: 1; margin-left: .8em; margin-right: .4em; flex-grow: 1;}

/*Header Media Queries*/
@media (max-width:880px) {
  .logo img {flex: 263px; height: 22vmax; 
}}
@media (max-width:880px) {
  h1 {font-size: 1.2em;}
  p {font-size: .75em;}
}

@media (max-width:700px) {
  header {flex-direction:column; max-width: 350px; 
    border-style: solid;
    border-width: .17em;
    border-color: #fff;  
  
    
}}
@media (max-width:700px) {
  .logo img {width:350px ; height: auto; margin-bottom: .5em;}
.logo-text {max-width: 348px; margin-right: .2em; margin-left: .3em;}
h1 {font-size: 1em;}
}

/*Navigation*/
.navigation {max-width:880px;  
margin: auto;
margin-top: .5em;
border-style: solid;
border-width: 1px;
border-color: #fff transparent #fff transparent;
}
ul {
  margin:0; padding:0;list-style: none; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding-left: .6em;
  padding-right: .6em;
}
label {display: none;}

/*Navigation Media Queries*/

@media (max-width:700px) {
  .navigation {border-width: 0em; width: 350px; margin:auto; padding:0; text-align: center; 
  border-color: #FFF;
  }
  
  ul {
    margin:0; padding:0;list-style: none; 
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    padding-left: 0;
    align-items: center;
  } 
 ul li p {display: none;}
 ul li {display: none;}

label {font-size: 40px; color: #fff;}
label {display: inline;
  cursor: pointer;}
  #toggle {display: none;}
  #toggle:checked + ul li {display: inline; text-align: center;}

}

@media (min-width:700px)
{
#toggle {display: none;}
}
/*End Navigation*/

/*Main Content*/
.main-content {display:flex;
flex-wrap: wrap;
margin: auto;
max-width:880px; 
justify-content:space-between; 
column-gap: .5em;

}
.item 
{
  flex: 1 1 346.5px;
  max-width: 435px;
  min-width: 346.5px;
  margin-top: .5em;
  border-style: solid;
  border-width: .3em;
  border-color: #fff;
  padding: .5em;
  
}
@media (max-width:700px) {
  .main-content {justify-content: center;
  }
  .item { max-width:350px; border-width: .17em; margin-top: 0; margin-bottom: .3em;
    
  }
}

/*Footer*/
.footer {max-width:880px;  
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-top: .3em;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
#one {order: 1;}
#two {order: 2;}
#three {order: 3;}
#four {order: 4; }

/*Footer Media Queries*/
@media (max-width:700px) {
  .footer 
  {max-width: 350px;
  justify-content:baseline; 
  margin-top: .17em;
  }
  
  
  #one {order: 2;}
  #two {order: 1;}
  #three {order: 4;}
  #four {order: 3; }

}