@charset "UTF-8";
/*Simplify width and height calculations */
html {
	box-sizing: border-box;
}
*, *:before,
*:after {
	box-sizing: inherit;
}
header {
    background-color: #313A3D;
}
body {
    margin: 0;
    color: #443B3B;
	font-family: 'Open Sans Condensed', sans-serif;
    font-weight: normal|bold;
    font-weight: 300|700;
    font-size: 1.7vw;
    background-color: #FFFFFF;
}
main {
	margin: 2vw}
}
#wrapper {
    width: 100%;
     margin-left: auto;
	margin-right: auto; 
    background-color: transparent;
}
a {
    font-weight: bold;
    text-decoration: none;
}
a:link {
    color: #03A5F2;
}
a:visited {
    color: #03A5F2;
}
a:hover {
    color: #B90707;
}
li{
  list-style-type: none;
  /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
  margin: 0 2vw; 
}
nav{
    width: 100vw;
    text-transform: uppercase;
}
ul{
  margin: 0;
  padding: 0;
  
  /*this option by default dispose the elements in a row (flex-direction: row)*/
  display: flex;
}
	
#wrapper header h1 {
    font-weight: 800;
    color: #CFCFCF;
    font-size: 3.5vw;
	margin-left: 2vw;
}
#wrapper header h3 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 2vw;
	margin-left: 2vw;
}
#wrapper header h4 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 1.8vw;
	margin-left: 2vw;
}
#navlinks {
    margin: 0 (all sides);
    padding: 0 (all sides);
    width: 100%;
    text-align: left;
    font-size: 1.8vw;
}

main ol li { margin-bottom: 8px; padding-left: 0px; list-style-type: decimal;
}
/* On screens that are 992px or less, my settings */
@media screen and (max-width: 992px) {
    body {
    margin: 0vw;
    color: #443B3B;
   font-family: 'Open Sans Condensed', sans-serif;
    font-weight: normal|bold;
    font-weight: 300|700;
    font-size: 2.5vw;
    background-color: #FFFFFF;
}
	main {
	margin-left: 3vw;
		margin-right: 3vw;
	}
	#wrapper header h1 {
    font-weight: 800;
    color: #CFCFCF;
    font-size: 5vw;
	margin-left: 2vw;
}
#wrapper header h3 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 3.7vw;
	margin-left: 2vw;
}
	#wrapper header h4 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 3.3vw;
	margin-left: 2vw;
}
#navlinks {
    margin: 0 (all sides);
    padding: 0 (all sides);
    width: 100%;
    text-align: left;
    font-size: 3vw;
    text-transform: uppercase;
}
li{
  list-style-type: none;
  /*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
  margin: 1.3vw 2vw; 
}
nav{
    width: 100vw;
    text-transform: uppercase;
}
ul{
  margin: 0;
  padding: 0;
  
  /*this option by default dispose the elements in a row (flex-direction: row)*/
  display: flex;
	flex-direction:column;
}
}

/* On screens that are 600px or less, my settings */
@media screen and (max-width: 600px) {
  body {
    margin: 1vw;
    color: #443B3B;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: normal|bold;
    font-weight: 300|700;
    font-size: 5vw;
    background-color: #FFFFFF;
}
	main {
	margin: 1vw
	}
	#wrapper header h1 {
    font-weight: 800;
    color: #CFCFCF;
    font-size: 6vw;
	margin-left: 2vw;
}
#wrapper header h3 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 5vw;
	margin-left: 2vw;
}
	#wrapper header h4 {
    font-weight: 400;
    color: #CFCFCF;
    font-size: 4vw;
	margin-left: 2vw;
}
#navlinks {
    margin: 0 (all sides);
    padding: 0 (all sides);
    width: 100%;
    text-align: left;
    font-size: 4.5vw;
    text-transform: uppercase;
}
	ul{
  margin: 0;
  padding: 0;
  
  /*this option by default dispose the elements in a row (flex-direction: row)*/
  display: flex;
	flex-direction:column;
}
}