body { 
    margin: 0;
    padding: 0; 
    background-image: url("img/bg.png");
    background-repeat: repeat;
}
h1{
    font-size: 1.7rem;
    font-family: Montserrat;   
    font-weight: 900;
    line-height:15px;
}
h2{
    font-size: 1.1rem;
    font-family: Montserrat;
    font-weight: 700;
    line-height:5px;
}
h3{
    font-size: 0.9rem;
    font-family: Montserrat;
    font-weight: 700;
    line-height:5px;
}
p{
    font-size: 0.9rem;
    font-family: Montserrat;
    font-weight: 500;
    line-height:25px;
}
.textlink{
    font-size: 0.9rem;
    font-family: Montserrat;
    font-weight: 500;
    color: rgb(218, 69, 0);
    text-decoration:none;
    cursor:pointer;
}
.textlink:visited {color: rgb(218, 69, 0);}
.textlink:hover {color: rgb(187, 61, 3);font-style:italic}
.textlink:active {color: rgb(161, 51, 0)}

/*Scroll Bar*/
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: rgb(184, 184, 184);}
::-webkit-scrollbar-thumb:hover {background: rgb(150, 150, 150);}
::-webkit-scrollbar-thumb:active {background: rgb(126, 126, 126);}

/*Main Container*/
.container {
    width:900px;margin:0 auto;
}
@media screen and (max-width: 900px) {
    .container {
        width:100%;
    }
}

/*Attach Image*/
.fileconti {
    width:100%;
}

#custom-button, #custom-button2 {
    overflow:hidden;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1.1em;
    color: #000000;
    background-color:#e9e9e9;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    font-weight:600
}

#custom-button:hover, #custom-button2:hover {
    background-color:#d8d8d8;
}
#custom-button:active, #custom-button2:active {
    background-color:rgb(218, 69, 0);color:rgb(240, 240, 240);
}

/*Listings*/
.listingcontainer {
    height:150px;
    display:flex;
    background-color: rgba(243, 243, 243, 0.493);
    border-radius: 12px;
    overflow:hidden;
    margin-bottom:10px;
}
.listingcontainer h1{
    font-size:1.2em;
    line-height:20px;
}
.listingcontainerimg {
    height:100%;
    width:250px;
    flex-grow: 0;     /* do not grow   - initial value: 0 */
    flex-shrink: 0;   /* do not shrink - initial value: 1 */
    background-color:rgba(0, 0, 0, 0.048);
    overflow:hidden;
}
.listingcontainerimg img {margin:0 auto;}
@media screen and (max-width: 900px) {
    .listingcontainer {
        height:100px;
        margin:10px;
    }
    .listingcontainer h1 {
        font-size:1.1em;
    }
    .listingcontainer h2 {
        font-size:1em;
    }
    .listingcontainer p {
        font-size:0.7em;
    }
    .listingcontainerimg {
        width:30%;
    }
}

/*ModalForm*/
.formi {
    padding:20px;    
}
.modal {    
    background: #f7f7f7;
    border-radius: 6px;
    position:absolute;     
}
@media screen and (max-height: 700px) {
    .modalform{        
        top:0px;
        margin-top:20px; 
        margin-bottom:20px;              
    }
}
.formi input, textarea, select {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    width:100%;
    padding:10px;
    border-radius: 5px;
    font-size: 1.1em;
    color: #000000;
    background-color:#e9e9e9;
    border: none;
    display: block;
    resize: vertical;
}
.formi button {
    width:100%;
    padding:15px;
    color: white;
    background: rgb(226, 72, 0);
    border: none;
    font-size: 1.2em;
    border-radius: 6px;
    font-weight: 600;
    cursor:pointer;
}
.formi button:hover {background: rgb(218, 69, 0)}
.formi button:active {background: rgb(212, 67, 0)}
.closeform {
    cursor:pointer;
    position:absolute;
    top:25px;
    right:20px;
    z-index:999;
    width:30px;
    height:30px;
    font-size:50px;
    line-height:28px;
    font-weight:600
}
.closeform:hover {color:red}
.closeform:active {color:rgb(201, 3, 3)}
/*
div { outline: 1px solid red }
p { outline: 1px solid red }
h1 { outline: 1px solid red }
*/