@font-face {
    font-family : "CaslonOri";
    src : url("../fonts/caslon-540-regular.eot?CID=4000");
    src : local('?'),
          url("../fonts/caslon-540-regular.eot?#iefix?CID=4000") format("embedded-opentype"),
          url("../fonts/caslon-540-regular.woff?CID=4000") format("woff"),
          url("../fonts/caslon-540-regular.ttf?CID=4000") format("truetype");
    font-weight : normal;
    font-style : normal;
}

@font-face {
    font-family : "SansOri";
    src : url("../fonts/sans-regular.eot?CID=2000");
    src : local('?'),
          url("../fonts/sans-regular.eot?#iefix?CID=2000") format("embedded-opentype"),
          url("../fonts/sans-regular.woff?CID=2000") format("woff"),
          url("../fonts/sans-regular.ttf?CID=2000") format("truetype");
    font-weight : normal;
    font-style : normal;
}

@font-face {
    font-family : "SansOri";
    src : url("../fonts/sans-bold.eot?CID=2000");
    src : local('?'),
          url("../fonts/sans-bold.eot?#iefix?CID=2000") format("embedded-opentype"),
          url("../fonts/sans-bold.woff?CID=2000") format("woff"),
          url("../fonts/sans-bold.ttf?CID=2000") format("truetype");
    font-weight : bold;
    font-style : normal;
}


html { 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    font-size : 62.5%; 
    font-size\0 : 63.0%; /* IE has again different recalc for rem units */
}
body {
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: #fff; 
    text-align: center; 
    font-family: SansOri; 
    font-size: 1.4rem; 
}
.w-error-page-shop { 
    background-position: 50% 115px; 
}

h1 { 
    margin: 30px 0 0 0; 
    padding: 0; 
    color: #282626; 
    font-size: 4rem; 
    font-family: CaslonOri; 
    font-weight: normal;
}
.w-error-page-shop .w-error-page-container h1 { 
    margin-top: 50px; 
}
 
.w-error-page-container { 
    margin: 0 auto; 
    padding: 0 0 291px; 
    width: 100%; 
    max-width: 1000px; 
    background: url('./error-page-image.jpg') 50% 100% no-repeat; 
}
.w-error-page-container p { 
    padding: 0 8%; 
    margin-bottom: 20px; 
    text-transform: uppercase;
}
p#w-error-page-logo { 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
    border-bottom: solid 1px #ccc; 
}

p[data-translate="text"]::first-letter {
    text-transform: uppercase;
}

#w-error-page-logo img { 
    margin: 0; 
    padding: 0; 
    width: 208px; 
}
.ui-error-page-btn { 
    display: inline-block; 
    margin: 0; 
    padding: 0 2rem; 
    background: #000; 
    color: #fff; 
    font-weight: bold; 
    line-height: 4.5rem; 
    vertical-align: middle;
    min-width: 278px; 
    box-sizing: border-box; 
    text-decoration: none; 
    font-weight: normal;
}
.ui-error-page-btn.disabled { 
    border-color: #ccc; 
    background-color: #ccc; 
    color: #fff; 
    cursor: default; 
}
    
/*
    Breakpoint - size 4
*/
@media only screen and (min-width: 920px) and (max-width: 1000px) {
    #w-error-page-logo { 
        max-width: 800px; 
    }
    .w-error-page-shop .w-error-page-container h1 { 
        margin-top: 39px; 
    }
}


/*
    Breakpoint - size 3
*/
@media only screen and (min-width: 768px) and (max-width: 919px) {
    #w-error-page-logo { 
        max-width: 600px; 
    }
    .w-error-page-shop .w-error-page-container h1 { 
        margin-top: 30px; 
    }
}


/*
    Breakpoint - size 1 - 2
*/
@media only screen and (max-width: 767px) {
    .w-error-page-container { 
        padding-bottom: 10px; 
        background: transparent; 
    }
    #w-error-page-logo img { 
        height: 31px; 
        width: auto; 
    }
    .w-error-page-container p { 
        text-transform: none; 
    }
    .ui-error-page-btn {
        text-transform: uppercase; 
    }
    .w-error-page-shop .w-error-page-container h1 { 
        margin-top: 26px; 
    }
}