.bodyPrincipal {
    background: url('images/forest.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

body {
    background: linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url('images/forest.jpg');
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

@font-face {
    font-family: microsFont;
    src: url('grilled.ttf');
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-family: microsFont, serif;
    color: #ffbb50;
}

.box {
    height: 200px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.5em;
}

.mycenter {
    position: relative;
    float: left;
    width: 300px;
    height: 200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 600px) {
    .box {
        height: 150px;
    }
    .mycenter {
        height: 150px;
    }
}


ul li{
    font-size: 1.2em;
}

p {
    font-size: 1.2em;
    text-align: justify;
}

a{
    color: #ffbb50;
}

a:hover{
    color: #ffbb50;
}

.lateralPText{
    font-size: 1em;
    font-weight: normal;
    text-align: left;
    border-bottom: 1px solid whitesmoke;
    width: 100%;
    color: white;
    text-decoration: none;
}

.lateralPText:hover{
    color: #ffbb50;
    cursor: pointer;
    border-bottom: 1px solid #ffbb50;
    text-decoration: none;

}

.essenciaIcon{
    font-size: 5em;
    color: #ffbb50;
}

.essenciaText{
    text-align: center;
    font-weight: normal;
}

.essenciaTextBig{
    text-align: center;
    font-weight: normal;
    font-size: 1.3em;
}

.blackContainer{
    padding: 2em;
    background: linear-gradient(rgba(0,0,0,0.8),rgba(0, 0, 0, 0.8));
    width: 100%;
    color: white;
    border-radius: 10px;
}

.blackSocialContainer{
    padding: 2em 1em 2em 1em;
    background: linear-gradient(rgba(0,0,0,0.8),rgba(0, 0, 0, 0.8));
    width: 100%;
    color: white;
    border-radius: 10px;
}

.socialRow{
    transition: ease all 0.5s;
}

.socialRow:hover{
    color: #ffbb50;
    cursor: pointer;
    margin-left: 0.5em;
}

.microInfo{
    /*border: 0.1em solid white;*/
}

.microsButton{
    width: 100%;
    color: #000;
    background-color: #f0ad4e;
    border-color: #eea236;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.microsReadMoreButton{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #eea236;
  background-color: #eea236;
}

.microsReadMoreButton{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}