@font-face {
    font-family: HeaderFont;
    src: url(PlayfairDisplay-Bold.ttf);
}

@font-face {
    font-family: BodyFont;
    src: url(PlayfairDisplay-Regular.ttf);
}

@font-face {
    font-family: ItalicFont;
    src: url(PlayfairDisplay-Italic.ttf);
}
@font-face {
    font-family: FooterFont;
    src: url(Lato-Regular.ttf);
}

body {  
    background-image: url("img_bg.png");
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
    height: 100vh;
}

.img-class-size{
    height:25%;
    width:25%;
    margin-top:10px;
 }
@media screen and (max-width: 768px) {
    body {
        height: 100vh;
        background-image: url("img_bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .img-class-size{
        height:75%;
        width:75%;
        margin-top:10px;
        margin-bottom:30px;
     }
}
.outer {
    padding-top:5%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    /*whatever width you want*/
}
.col-padding{
    padding:100px;
}

.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
 }