/* insert new fonts */
@font-face { 
    font-family: 'Oxygen';
    src: url('../fonts/Oxygen/Oxygen-Regular.ttf') format('truetype');
}
@font-face { 
    font-family: 'Oxygen';
    font-weight: lighter;
    src: url('../fonts/Oxygen/Oxygen-Light.ttf') format('truetype');
}
@font-face { 
    font-family: 'Oxygen';
    font-weight: bold;
    src: url('../fonts/Oxygen/Oxygen-Bold.ttf') format('truetype');
}
@font-face { 
    font-family: 'Raleway';
    src: url('../fonts/Raleway/Raleway-Regular.ttf') format('truetype');
}
@font-face { 
    font-family: 'Raleway';
    font-weight: lighter;
    src: url('../fonts/Raleway/Raleway-Light.ttf') format('truetype');
}
@font-face { 
    font-family: 'Raleway';
    font-weight: bold;
    src: url('../fonts/Raleway/Raleway-Bold.ttf') format('truetype');
}
@font-face { 
    font-family: 'NadiaSofia';
    src: url('../fonts/Nadia Sofia.ttf') format('truetype');
}
@font-face { 
    font-family: 'Script MT Bold';
    src: url('../fonts/SCRIPTBL.ttf') format('truetype');
}



/* define animation settings */
@-webkit-keyframes dropdown {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}
@keyframes dropdown {
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}




/* general layout settings */
body {
    background-color: #fff;
}


/* header layout settings */
#header {
    background: #7C272E;
    border: 0px solid #00ffff;
    margin: 0px;
    z-index: 1500;
    width: 100%;
}
#headerimg {
    width: inherit;
    overflow: hidden;
}
#headerimg .textbox {
    position: absolute;
    bottom: 10px;
    left: 20px;
    color: #eee;
    margin: 5px;
    text-shadow: 5px 5px 3px #222;
}


/* content layout settings */
#content {
    /*display: table;*/
    border-spacing: 0.5em;
    background: transparent;
    border: 0px solid #0000ff;
    min-height: 100px;
    
}

#content a { 
    color: #7C272E;
    transition: all 0.3s;
}
#content a:hover { 
    color: #333;
}

/* footer layout settings */
#footer {
    background-color: #7C272E;
    color: #ccc;
    border: 0px solid #7C272E;
    margin: 0px;
    padding: 20px;
}
#footer .copyright, #footer .copyright a {
    font-size: 0.8rem;
    text-align: center;
}
#footer hr {
    border-color: rgb(252,160,174);
}
#footer .socials {
    text-align: right;
}
#footer .socials img {
    margin: 5px;
}


/* general button settings */
button, a.button, input.button {
    width: auto !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    font-family: inherit !important;
    background-color: #7C272E !important;
    color: #FFFFFF !important;
    line-height: 1rem !important;
    letter-spacing: 0.1rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-color: #333;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 0px !important;
    padding: 10px 25px !important;
    transition: all 0.5s !important;
}
button:hover, a.button:hover, input.button:hover {
    text-decoration: none !important;
    box-shadow: none !important;
    color: rgb(252,160,174) !important;
}


/* default display view settings */
@media only screen and (min-width:1000px) {
    
    #header {
        height: 45rem;
        position: relative;
    }
    #header .brand {
        display: none;
    }
    #headerimg {
        height: 42rem;
    }
    #headerimg .textbox{
        width: 1200px;
        margin: 0 auto;
    }
    
    #content {
        padding-top: 50px;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }
    #content .wrapper {
        margin-bottom: 8rem;   
    }
    #content .wrapper .list-img {
        max-width: 35% !important;
        float: left;
        margin: 0px 30px 10px 0px;
    }
    #content-elements {
        width: 80%;
        float: left;
    }
    #sidebar {
        float: left;
        width: 18%;
        margin-left: 1rem;
    }
    
    #footer .container{
        width: 100%;
        max-width: 1200px;
        margin: 20px auto;
    }
    
    #footer .container .inner {
        float: left;
        width: 50%;
    }
}

/* smartphone and tablet view settings */
@media only screen and (max-width:999px) {
    iframe {
        max-width: 100%;
    }
    #header {
        height: 5rem;
        width: 100%;
        margin:0px;
        padding: 0px;
        position: fixed;
        top: 0;
        left: 0px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #333;
    }    
    #headerimg {
        display: none;
    }
    #header .brand {
        display: block;
        max-height: 4rem;
        margin: 5px 10px;
    }    
      
    #content {
        padding: 6rem 1rem 1rem 1rem;
        max-width: 100%;
        overflow: hidden;
    }
    #content .wrapper {
        margin-bottom: 5rem;   
    }
    #content .wrapper .list-img {
        max-width: 100%;
        margin: 5px 0px 10px 0px;
    }
    #content-elements {
        width: 100%;
    }
}

/* logo settings*/
p.logo {
    position: relative;
	top: 30px;
	display: inline-block;
	margin: 0px;
	padding: 0px;
}


/* error message settings*/
p.fatalerror, p.error, p.warning, p.info {
    font-weight: bold;
    border-width: 0.1rem;
    border-style: solid;
    font-size: 1rem;
    padding: 20px 15px;
    margin: 10px auto;
}
p.fatalerror {
    background-color: #F2B1B0;
    border-color: #FF0000;
    color: #FF0000;
}
p.error {
    background-color: #F2B1B0;
    border-color: #FF0000;
    color: #FF0000;
}
p.warning {
    background-color: #FFF1C4;
    border-color: #C69500;
    color: #C69500;
}
p.info {
    background-color: #E6EFC2;
    border-color: #667F00;
    color: #667F00;
}