.highlighted{background-color: #272727;}
.addspaces{white-space: pre}
.top-buffer { margin-top:-17px; padding-top: 0; border-top: 0;}
.side-buffer { width: 99%; margin-right: auto; margin-left: auto; display: block;}
.top-buffer-fix {margin-top: -17px;}
#myhov:hover{filter: brightness(1.1);}


.gal{
    height: 60px;
    overflow: hidden;
}


.mybg{
    background-size: cover;
    background-image: url("myIMG/mybg.jpg");
}

#contactSS{
    background: linear-gradient(45deg, rgba(78, 198, 166, 0.3), rgba(209, 127, 210, 0.25),rgba(26, 178, 234, 0.2));
    background-size: 200% 600%;

    -webkit-animation: contactGrad 5s ease infinite;
    -moz-animation: contactGrad 5s ease infinite;
    animation: contactGrad 5s ease infinite;

    filter: saturate(0);
}

@-webkit-keyframes contactGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes contactGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes contactGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

input[type="checkbox"][id^="music_cb"]{  display: none;  }
input[type="checkbox"][id^="code_cb"]{  display: none;  }
input[type="checkbox"][id^="design_cb"]{  display: none;  }


.gal-buffer-ind { width: 99%;  margin-right: auto; margin-left: auto; display: block; max-height: 171px;}
.gal-crop-ind { overflow: hidden; }

label.code_lbl img{
   background: url("myIMG/code_bg.jpg");
   background-size: 50%;
    background-repeat: no-repeat;
    height: 50px;

}  :checked + label.code_lbl img {
       background: url("myIMG/grad_bg.jpg");
       background-size: 50%;
       background-repeat: no-repeat;
       filter: contrast(1.2);
       height: 50px;

   }  :checked ~ #icid {
          display: none;
      }  :hover ~ #icid {
             animation: popcontent .4s;
         } :checked ~ #descriptions {
               visibility: visible;
           } #descriptions{
                 visibility: hidden;
             } #icid{transform: scale(.8,.8);}
label.design_lbl img{
    background: url("myIMG/design_bg.jpg");
    background-size: 50%;
    background-repeat: no-repeat;
    height: 50px;

}  :checked + label.design_lbl img {
       background: url("myIMG/grad_bg.jpg");
       background-size: 50%;
       background-repeat: no-repeat;
       filter: contrast(1.2);
       height: 50px;

   }  :checked ~ #icid {
          display: none;
      }  :hover ~ #icid {
             animation: popcontent .4s;
         } :checked ~ #descriptions {
               visibility: visible;
           } #descriptions{
                 visibility: hidden;
             }
label.music_lbl img {
    background: url("myIMG/music_bg.jpg");
    background-size: 50%;
    background-repeat: no-repeat;
    height: 50px;

}  :checked + label.music_lbl img {
       background: url("myIMG/grad_bg.jpg");
       background-size: 50%;
       background-repeat: no-repeat;
       filter: contrast(1.2);
       height: 50px;

   }  :checked ~ #icid {
          display: none;
      }  :hover ~ #icid {
             animation: popcontent .4s;
         } :checked ~ #descriptions {
               visibility: visible;
           } #descriptions{
                 visibility: hidden;
             }

/* xs < 768 */
@media screen and (max-width: 767px) {
    #descriptions {
        font-size: .40em;
        top: 2%;
    }
    .resp-height{
        max-height:150px;
    }
    .knowledge{
        font-size: .5em;
    }
}
/* sm */
@media screen and (min-width: 768px) {
    #descriptions {
        font-size: .75em;
        top: 0;
    }
    .resp-height{
        max-height:150px;
    }
    .knowledge{
        font-size: .6em;
    }
}
/* md */
@media screen and (min-width: 992px) {
    #descriptions {
        font-size: .75em;
        top: 4%;
    }
    .resp-height{
        max-height:150px;
    }
    .knowledge{
        font-size: .7em;
    }
}
/* lg */
@media screen and (min-width: 1200px) {
    #descriptions {
        font-size: .7em;
        top: 4%;
    }
    .resp-height{
        max-height:150px;
    }
    .knowledge{
        font-size: .7em;
    }
}


@keyframes popcontent {

    0%, 20%, 60%, 100% {
        -webkit-transform: scale(.7)translateY(-10px);
        transform: scale(.7)translateY(-10px);
    }
    40% {
        -webkit-transform: scale(1)translateY(-10px);
        transform: scale(1)translateY(-10px);
    }
    80% {
        -webkit-transform: scale(.9)translateY(-10px);
        transform: scale(.9)translateY(-10px);
    }
}

#crossgrad{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height:2px;
    position: relative;
    top: -65px;
    box-shadow: 0 0 75px 50px black;
}