@font-face {
    font-family: 'gooddogregular';
    src: url('../fonts/GoodDog-webfont.eot');
    src: url('../fonts/GoodDog-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GoodDog-webfont.woff') format('woff'),
         url('../fonts/GoodDog-webfont.ttf') format('truetype'),
         url('../fonts/GoodDog-webfont.svg#gooddogregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'Exo';
	src: url('../fonts/Exo-Regular.eot');
	src: url('../fonts/Exo-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Exo-Regular.woff2') format('woff2'),
		url('../fonts/Exo-Regular.woff') format('woff'),
		url('../fonts/Exo-Regular.ttf') format('truetype'),
		url('../fonts/Exo-Regular.svg#Exo-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Next Demi Condensed';
	src: url('../fonts/AvenirNextLTPro-DemiCn.eot');
	src: url('../fonts/AvenirNextLTPro-DemiCn.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AvenirNextLTPro-DemiCn.woff2') format('woff2'),
		url('../fonts/AvenirNextLTPro-DemiCn.woff') format('woff'),
		url('../fonts/AvenirNextLTPro-DemiCn.ttf') format('truetype'),
		url('../fonts/AvenirNextLTPro-DemiCn.svg#AvenirNextLTPro-DemiCn') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Next Condensed Italic';
	src: url('../fonts/AvenirNextLTPro-CnIt.eot');
	src: url('../fonts/AvenirNextLTPro-CnIt.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AvenirNextLTPro-CnIt.woff2') format('woff2'),
		url('../fonts/AvenirNextLTPro-CnIt.woff') format('woff'),
		url('../fonts/AvenirNextLTPro-CnIt.ttf') format('truetype'),
		url('../fonts/AvenirNextLTPro-CnIt.svg#AvenirNextLTPro-CnIt') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Avenir Next Regular';
	src: url('fonts/AvenirNextLTPro-Regular.eot');
	src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AvenirNextLTPro-Regular.woff2') format('woff2'),
		url('../fonts/AvenirNextLTPro-Regular.woff') format('woff'),
		url('../fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
		url('../fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Next Condensed';
	src: url('../fonts/AvenirNextLTPro-Cn.eot');
	src: url('../fonts/AvenirNextLTPro-Cn.eot?#iefix') format('embedded-opentype'),
		url('../fonts/AvenirNextLTPro-Cn.woff2') format('woff2'),
		url('../fonts/AvenirNextLTPro-Cn.woff') format('woff'),
		url('../fonts/AvenirNextLTPro-Cn.ttf') format('truetype'),
		url('../fonts/AvenirNextLTPro-Cn.svg#AvenirNextLTPro-Cn') format('svg');
	font-weight: normal;
	font-style: normal;
}

body { background-color: #fff; text-align: center; font-family: arial, sans-serif; margin: 0; padding: 0;}
.container{position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width:780px;
}
.container img{ margin-top:55px;}
h1 { font-size: 55px; text-transform: uppercase; margin:0; }
h2 { font-size: 65px; text-transform: uppercase; margin:0; margin-top:20px; }
h3{ font-size:25px; margin:0; margin-top:10px;}
p{ font-family: "Avenir Next Condensed Italic"; font-size: 15px;}
a{ font-family: "Avenir Next Regular"; font-size: 25px; color: black; text-decoration: none;}
a img{ vertical-align: middle;}
.footer{  width:100%; 
          position:fixed; 
          bottom: 65px;
          display: flex;
          justify-content: space-between;
}
.float-left{ float:left; margin-left:65px;  align-self: flex-end;}
.float-left img{margin-top: -5px;}
.float-right{float:right; margin-right: 65px;  align-self: flex-end;}
.float-right p{ float: left; margin-top: 47px; margin-right: 10px; margin-bottom: 0px;}
    
.error-404 h1, .error-500 h1{
    font-family: "Avenir Next Demi Condensed";
}
.error-404 h2{
    font-family: "gooddogregular";
    font-size: 95px;
}
.error-404 h3, .error-500 h3{
    font-family: "Avenir Next Condensed";
}

.error-500 h2{
    font-family: "Exo";
    font-size: 65px;
}
.container.error-500 img{margin-top:25px;}
.footer.error-500{ display: block;} 

@media screen and (max-width: 1024px) {
    h2{
        margin-top:0px;
    }
}
@media screen and (max-width: 991px) {
      h1 { font-size: 25px; }
    h2 { font-size: 45px; }
    h3{ font-size:20px; }
    p{ font-size: 15px;}
    a{ font-size: 15px;}
    .error-404 h2{font-size: 45px;}
    .error-500 h2{font-size: 45px;}
    .container.error-500 img{ width:450px;}
    .container.error-404 img{ width:300px;}
}
@media screen and (max-width: 768px) {
    h1 { font-size: 25px; }
    h2 { font-size: 45px; margin:0;}
    h3{ font-size:17px; margin-top:10px;}
    p{ font-size: 15px;}
    a{ font-size: 15px;}
    .error-404 h2{font-size: 45px;}
    .error-500 h2{font-size: 45px;}
    .container{width:90%; position:relative; left: 0; top: 0; transform: none; -webkit-transform: none; margin-left:auto; margin-top:50px; margin-right:auto;}
    .container.error-404 img{ margin-top:45px; width:200px;}
    .container.error-500 img{ width:90%;}
    .footer{position:relative; display:block; bottom:0; margin-top:40px;}
    .float-left{width:100%; position:relative; clear:both; margin-left:0px; margin-bottom:20px;   }
    .float-left img{ width:20px; height:20px;}
    .float-right{width: 190px; position: relative;clear: both;margin-right: auto; margin-left: auto; float: none;}
    .float-right p{ float: left;margin-top: 37px;clear: both;}
    .float-right img{ width:100px;}
}