@import url('https://fonts.googleapis.com/css?family=Proxima+Soft|PT+Sans|Maven+Pro&display=swap');


html {
    font-family: "Maven Pro";/*PT Sans";*/
    margin:30px 200px 30px 200px;
    font-size:20px;
}

img {
    border-radius: 4%;
    border: 1px solid rgb(202, 204, 204);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

h1 {
    font-weight:normal;
}

h3 {
    font-weight:normal;
    color:#CF0101;
    text-align:center;
}

li {
    float:left;
    display:inline;
}

p {
    margin:0;
    font-size:18px;
}

.header {
    font-family: "Maven Pro";
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
}

.top {
    font-family: "Maven Pro";
    font-size:15px;
    display:block;
    text-align:center;
    padding:30px 32px 30px 32px;
    text-decoration:none;
    color:#212122;
    font-weight: normal;
}

.top a:hover {
    /*background-color:#212122;
    color:white;*/
    font-weight: bold;
}

.table {
    display: table;
    margin: 0 auto;
}

.topics {
    text-decoration: none;
    color: #000000;
    font-weight: normal;
   /* font-size: larger;*/
    text-align: center;
    margin:auto;
    padding:0 0 70px 0;
}

/*.page_c {
    font-weight: bold;
    color:#CF0101;
}*/

.label_c {
    font-size:13px;
    margin:0;
    color:#CF0101;
}

.label_p {
    font-size:15px;
    margin:0;
    color:#CF0101;
}

.date {
    padding:30px 0 0 0;
    font-size:13px;
    margin:0;
    padding: 60px 0 10px 0;
}

.topics a:hover {
    font-weight:bold;
}

.portf {
    float:center;
    width:100%;
    padding:30px 35px 35px 35px;
    background-color: white;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.15);*/
    margin-bottom: 25px;
}

.portf_title {
    text-align: center;
    padding: 10px 20px;
  }

#subt {
    font-family: "Maven Pro";
    font-size:15px;
    justify-content:center;
    text-align:center;
    margin-bottom:0;
    display:block;
}

/* Removing menu button from desktop */
/* #subt {display:none;} */
#myNav {display:none;}
#menu {display:none;}


 /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
 @media screen and (max-width: 450px) {

    /* Including menu button to mobile device */
    #myNav {display: block;}
    #menu {display:block;}

    .table .top {
        display:none;
    }
    
    html {
        margin:0;
    }

        /* The Overlay (background) */
    .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS below) */   
        height: 100%;
        width: 0;
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        background-color: rgb(0,0,0); /* Black fallback color */
        background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }
    
    /* Position the content inside the overlay */
    .overlay-content {
        position: relative;
        top: 25%; /* 25% from the top */
        width: 100%; /* 100% width */
        text-align: center; /* Centered text/links */
        margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }
    
    /* The navigation links inside the overlay */
    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 20px;
        color: #818181;
        display: block; /* Display block instead of inline */
        transition: 0.3s; /* Transition effects on hover (color) */
    }
    
    /* When you mouse over the navigation links, change their color */
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    /* Position the close button (top right corner) */
    .overlay .closebtn {
        position: absolute;
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    

}