}

html, body {

width: 100%;
height: 100%;
position: relative;

}

p {

margin-bottom: 10px;
font-size: 20px;

}

ul {

text-align: justify;
margin-left: 50px;
font-size: 20px;

}

.images, .vertical_images {

text-align: center;

}

.vertical_images img {

max-width: 300px;
border-radius: 5px;
margin: 25px 0px;

}

.images img {

max-width: 600px;
border-radius: 5px;
margin: 25px 0px;

}

.codeheader {

margin-top: 25px;
margin-bottom: -1px;
padding-left: 9.5px;
text-align: left;
border-radius: 5px 5px 0px 0px;
background-color: #333333;
color: #BBBBBB;

}

.logo {

height: 38px;
max-width: initial;
border-radius: initial;
margin: initial;

}

background {

position: absolute;
bottom: 0px;
width: 100%;
height: 50%;
min-height: 300px;
overflow: hidden;

}

.home {

position: relative;
width: 100%;
height: 100%;
min-height: 600px;
background-color: #333333;

}

.home .textbox {

position: absolute;
left:50%;
top:40%;
transform: translate(-50%, -50%);
color: #FFFFFF;
text-align: center;

}

.home .textbox .title {

font-size: 50px;
font-weight: bold;
margin-bottom: 15px;

}

.home .textbox .desc {

color: #BBBBBB;
margin-bottom: 25px;
font-size: 25px;

}

.home .textbox .links a {

padding: 0px 10px;
font-size: 3em;
text-decoration: none;

}

.link {

color: #BBBBBB;

}

.hover {

color: #3379b7;

}

.page {

color: #333333;
text-align: justify;
padding: 75px 10% 75px 10%;

}

.page .cat {

text-align: center;

}

.page .cat .background {

display: inline-block;
border-radius: 5px;
text-align: center;
background-color: #333333;
margin: 2px 0px;

}

.page .cat .background .skill {

color: #FFFFFF;
margin: 5px;
font-size: 15px;

}

.highlight {

border-radius: 0px 0px 5px 5px;
text-align: left;
margin-bottom: 25px;

}

.contactBar {

position: fixed;
bottom: 0px;
width: 100%;
height: 57px;
background-color: #333333;
text-align: center;
color: #BBBBBB;
z-index: 1000;

}

.contactBar .info{

display: inline-block;
padding: 17px 20px;

}

.cat {

text-align: left;

}

.cat .background {

display: inline-block;
border-radius: 5px;
background-color: #333333;
margin: 2px 0px;

}

.cat .background .skill {

color: #FFFFFF;
margin: 5px;
font-size: 15px;

}

.unstick {

display: none;

}

.projects {

background-color: #BBBBBB;
padding: 50px 10% 75px 10%;
height: auto;
position: relative;

}

.projects .card {

height: 200px;
border-radius: 5px;
margin: 10px 10px;

}

.projects .card .overlay .content .desc{

color: #FFFFFF;
text-align: justify;
display: none;

}

.projects .card .overlay {

position: relative;
width: 100%;
height: 100%;
background-color: rgba(51,51,51,0.5);
border-radius: 5px;

}

.projects .card:hover .overlay {

background-color: rgba(51,51,51,1);

}

.projects .card:hover .overlay .content .desc{

display: block;
margin: 0px;
color: #BBBBBB;

}

.projects .card:hover .overlay .content .name{

display: none;

}

.hideProject {

display: none;

}

.unhideProject {

display: block;

}

.hidePost {

display: none;

}

.unhidePost {

display: block;

}

.arrow {

color: #333333;
padding-left: 2px;

}

.arrow:hover {

color: #3379b7;

}

.flip {

transform: rotate(180deg);
padding-left: 0px;
padding-right: 2px;

}

.blog {

background-color: #FFFFFF;
padding: 50px 10% 75px 10%;
height: auto;
position: relative;

}

.blog .post {

border-radius: 5px;
padding: 0px;
margin: 10px;

}

.blog .post:hover {

cursor: pointer;

}

.blog .post .postimg .info {

padding: 10px 10px 15px 10px;
background-color: #333333;
border-radius: 0px 0px 5px 5px;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;

}

.blog .post .postimg .info .title {

font-weight: bold;
margin-bottom: 0px;
text-align: center;
color: #BBBBBB;

}

.blog .post .postimg .info .date {

font-size: 15px;
text-align: center;
color: #BBBBBB;
margin-bottom: 10px;

}

.blog .post .postimg .info .desc {

margin: 10px 0px;
text-align: justify;
font-size: 15px;
white-space: nowrap; 
width: 100%; 
overflow: hidden;
text-overflow: ellipsis;
color: #BBBBBB;

}

.blog .post .postimg .info .cat {

text-align: center;

}

.blog .post .postimg .info .cat .background {

display: inline-block;
border-radius: 5px;
background-color: #BBBBBB;
margin: 2px 0px;

}

.blog .post .postimg .info .cat .background .skill {

color: #333333;
margin: 3px;
font-size: 10px;

}

.blog .post .postimg {

height: 400px;
width: 100%;
border-radius: 5px;
position: relative;

}

.blog .post .postimg .overlay {

position: relative;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: rgba(51,121,183,0.5);
display: none;

}

.blog .post:hover .postimg .overlay {

display: block;

}

.topnav {

position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
background-color: #333333;
z-index: 1000;

}

.menuBurger:link, .menuBurger:visited {

color: #BBBBBB;

}

.menuPage:link {

color: #BBBBBB;
text-decoration: none;

}

.activePage:link {

color: #3379b7;
text-decoration: none;

}

.menuBurger {

float: left;
display: none;
color: #BBBBBB;
text-align: center;
padding: 17px 16px;
text-decoration: none;
font-size: 20px;

}

.menuBurger:hover {

color: #3379b7;
text-decoration: none;

}

.menuPage {

float: left;
display: block;
color: #BBBBBB;
text-align: center;
padding: 17px 16px;
text-decoration: none;
font-size: 20px;

}

.menuPage:hover {

color: #3379b7;
text-decoration: none;

}

.activePage {

color: #3379b7;
pointer-events: none;
cursor: default;

}

.activePage:hover {

text-decoration: none;

}

.inactiveLink {

pointer-events: none;
cursor: default;

}

.inactiveLink:hover {

text-decoration: none;

}

.topnav .icon {

display: none;

}

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

#placeholderPost {
    display: none;
}

}

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

.topnav .menuPage:not(:first-child) {
    display: none;
}
.topnav .icon {
    float: right;
    display: block;
}
.topnav.responsive {
    position: fixed;
}
.topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
}
.topnav.responsive .menuPage {
    float: none;
    display: block;
    text-align: left;
}
.topnav.responsive .menuPage:hover {
    background-color: #3379b7;
    color: #333333;
}
.contactBar .infoHide {
    display: none;
}

}

.postTitle {

  text-align: left;
}

.iconLink {

color: #333333;

}

.iconLink:hover {

color: #3379b7;

}

.highlight .hll { background-color: ffffcc } .highlight { background: f5f5f5; } .highlight .c { font-style: italic } /* Comment */ .highlight .err { border: 1px solid #FF0000 } /* Error */ .highlight .k { font-weight: bold } /* Keyword */ .highlight .ch { font-style: italic } /* Comment.Hashbang */ .highlight .cm { font-style: italic } /* Comment.Multiline */ .highlight .cpf { font-style: italic } /* Comment.PreprocFile */ .highlight .c1 { font-style: italic } /* Comment.Single */ .highlight .cs { font-style: italic } /* Comment.Special */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gh { font-weight: bold } /* Generic.Heading */ .highlight .gp { font-weight: bold } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { font-weight: bold } /* Generic.Subheading */ .highlight .kc { font-weight: bold } /* Keyword.Constant */ .highlight .kd { font-weight: bold } /* Keyword.Declaration */ .highlight .kn { font-weight: bold } /* Keyword.Namespace */ .highlight .kr { font-weight: bold } /* Keyword.Reserved */ .highlight .s { font-style: italic } /* Literal.String */ .highlight .nc { font-weight: bold } /* Name.Class */ .highlight .ni { font-weight: bold } /* Name.Entity */ .highlight .ne { font-weight: bold } /* Name.Exception */ .highlight .nn { font-weight: bold } /* Name.Namespace */ .highlight .nt { font-weight: bold } /* Name.Tag */ .highlight .ow { font-weight: bold } /* Operator.Word */ .highlight .sa { font-style: italic } /* Literal.String.Affix */ .highlight .sb { font-style: italic } /* Literal.String.Backtick */ .highlight .sc { font-style: italic } /* Literal.String.Char */ .highlight .dl { font-style: italic } /* Literal.String.Delimiter */ .highlight .sd { font-style: italic } /* Literal.String.Doc */ .highlight .s2 { font-style: italic } /* Literal.String.Double */ .highlight .se { font-weight: bold; font-style: italic } /* Literal.String.Escape */ .highlight .sh { font-style: italic } /* Literal.String.Heredoc */ .highlight .si { font-weight: bold; font-style: italic } /* Literal.String.Interpol */ .highlight .sx { font-style: italic } /* Literal.String.Other */ .highlight .sr { font-style: italic } /* Literal.String.Regex */ .highlight .s1 { font-style: italic } /* Literal.String.Single */ .highlight .ss { font-style: italic } /* Literal.String.Symbol */ .highlight .na { font-weight: bold; color: #337ab7} .highlight .o { font-weight: bold;} .highlight .nf { font-weight: bold;} .highlight .nl { color: #337ab7} .highlight .bp { color: #337ab7}