/*!
 * Start Bootstrap - Combined Stylesheets of 5 templates
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-blog-post/blob/master/LICENSE)
 */



html { height: 100vh; }

body {
  font-family: Raleway, Skia, Arial, sans-serif;
    min-height:100vh; 
    position:relative; 
    background-color: #faebc3;
    background-image: url("images/header_bg.jpg");
    background-repeat: repeat-x;
}


h1, h2, h3, h4, h5 {
    font-family: 'Lato', cursive,sans-serif; /*papyrus, sans-serif;  */ 
}


/* custom CSS */
#wrapper {
    max-width: 1200px;
    min-width: 375px;
    min-height: calc(100vh - 50px);
    height: auto;
    opacity: 1;
    margin: auto;  
    background-color: #faebc3;
}

.navbar-inverse {
    background-color: #222;
    border-color: #222;   /*#080808;*/
}

.navbar-brand {
    font-family: 'Lato', cursive,sans-serif;
}

.navbar {
    border-radius: 0px;
}
.content-title {
    font-family: 'Lato', cursive,sans-serif;
    font-size: 1.8em;        
}

.logo_text {
    color: orangered;
    font-weight:500;
}

.content-text-format {
    padding-left: 30px;
    padding-right:30px;
    max-width:90%;
}

/* the section of info will show or hide control by the breakpoint */
.show_hide {
    visibility: visible;
}


.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}
    

@media screen and (max-width: 580px) {
    .content-text-format {
        padding-left: 0px;
        padding-right:0px;
        max-width:100%;
    }
    
    .btn-info {
        background-color: gray;
        border-color: gray;
    }
    
    #wrapper {
        background-color: #fff;
    }
}

@media screen and (min-width: 581px) and (max-width: 768px) {
    .content-text-format {
        padding-left: 20px;
        padding-right:20px;
        max-width:95%;
    }
}
    
@media screen and (max-width: 768px) {    
    #wrapper {
        background-color: #fff;
    }
    
    .show-hide {
    display:none;
    }
}

@media screen and (max-width: 991px) {
    .content-text-format {
        padding-left: 10px;
        padding-right:10px;
        max-width:98%;
    }
    
}


footer {
    /*position: absolute;*/
    text-align: center;
    max-width:  100vw; /* 1200px */
    min-width: 375px;
    font-family: Raleway, Skia, Arial, sans-serif;
    color: white; 
    background-color: black;
    font-size: 0.9em;
    padding-top: 10px;
    left: 0 ; 
    right: 0;
    bottom: 0;
    height:50px;
    margin-bottom: 0;
}

footer a {
    color: #17a2b8;
}

footer a:hover {
    color: darkgray;
}

a {
    text-decoration: none;
}


.back { 
  font-size: 2.2em;
  text-align: right;
  padding:0px;
  margin: 0px;
}

.back a {
  text-decoration: none;
  color: darkgray;
}

.back a:hover {
  color: white;
}