:root {
  --background: #5a5f4b;
  --background: #4b503d;
  --text-bg: #f0e3d4;
  --text-bg-dark: #F6E7D0;
  --main-text: #778066;
  --highlight: #898f7b;
  --bglight:#727e55;
  --highlight2:#c0ce9c;
}

@font-face {
  font-family: "Raleway";
  src: url(./fonts/Raleway-Light.ttf);
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: url(./fonts/Raleway-LightItalic.ttf);
  font-style: italic;
}
@font-face {
  font-family: "Raleway";
  src: url(./fonts/Raleway-Medium.ttf);
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Raleway";
  src: url(./fonts/Raleway-MediumItalic.ttf);
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: "Raleway";
  src: url(./fonts/Raleway-Bold.ttf);
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "Italiana";
  src: url(./fonts/Italiana-Regular.ttf);
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "Imperial Script";
  src: url(./fonts/ImperialScript-Regular.ttf);
  font-style: italic;
  font-weight: normal;
}


body{
    font-family: 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: var(--text-bg);
    color: var(--main-text);
    font-size: 20px;
    letter-spacing: 1px;
    padding: 0;
    margin: 0;
}
a{
    color: var(--highlight);
}
h1{
    font-family: 'Imperial Script', 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    width: 100%;
    text-align: center;
    font-size: 80px;
    padding-top: 20px;
    text-transform: capitalize;
    text-decoration: underline 1px;
    margin-top: 0;
    font-weight: normal;
    letter-spacing: normal;
}
h2{
    font-family: 'Italiana', 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 36px;
}
h3{
    font-family: 'Italiana', 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 32px;
    margin-top: 20px;
}
h4{
    font-family: 'Italiana', 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 10px;
    text-transform: capitalize;
}
li{
    margin: 2px 10px;
}


input, textarea{
    font-family: 'Raleway', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: normal;
}
p{
    margin: 20px 40px;
    text-align: justify;
}

.wrapper{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 2fr 1fr;
}
.wrapper > div{
    text-align: center;
    margin: auto;
    width: 80%;

}
.wrapper img{
    width: 100%;
}
.content{
    margin-top: 10px;
}


/******************** BORDER **********************/
.wrapper-border{
    position: relative;
    padding: 40px;
}
.border-top, .border-right, .border-bottom, .border-left{
    position: absolute;
}
.border-top{
    height: 40px;
    background: url("../img/core-img/frame-top.png") repeat-x;
    top: 10px; left: 40px; right: 40px;  
}
.border-bottom{
    height: 40px;
    bottom: 10px; left: 40px; right: 40px;
    background: url("../img/core-img/frame-top.png") repeat-x;
    transform: scale(-1);
}
.border-right{
    width: 40px;
    right: 10px; bottom: 40px; top: 40px;
    background: url("../img/core-img/frame-sides.png") repeat-y;
    transform: scaleX(-1);
}
.border-left{
    width: 40px;
    left: 10px; bottom: 40px; top: 40px;
    background: url("../img/core-img/frame-sides.png") repeat-y;
}

.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    background: url("../img/core-img/frame-corner.png") no-repeat center / contain;
}
.corner.tl { top: 10px; left: 10px; }
.corner.tr { top: 10px; right: 10px; transform: scaleX(-1); }
.corner.br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.corner.bl { bottom: 10px; left: 10px; transform:  scaleY(-1); }




@media only screen and (max-width:1280px){
    .wrapper{
        margin:0;
        box-shadow: none;
    }
}

@media only screen and (max-width:720px){


}

@media only screen and (max-width:580px){
    body{
        font-size: 16px;
    }
    h1{
        font-size: 72px;
    }
    p{
        margin: 20px 10px;
    }
    .f-contact{
        text-align: left;
    }
    .featured{
        margin-left: 20px;
        margin-right: 20px;
    }
    .text-wrapper{
        padding: 0;
    }
    .contact-wrapper{
        padding: 0;
    }
    .wrapper-border{
        padding: 0;
    }
    .corner, .border-top, .border-right, .border-bottom, .border-left{
        display: none;
    }
}