* {
    box-sizing: border-box;
    /* border-radius: 2px; */
}

::selection {
    color: red;
  }

body {
    background-color: black;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: white;
}

#logo {
    text-align: center;
    margin: 4rem 0 .5rem 0;
}

#logo svg {
    max-height: 125px;
    width: auto;
    margin: 0 10px;
}

#ildottore #logo svg {
    margin: 25px 0;
}

#domenico #logo svg {
    max-height: 175px;
}

#logo svg path {
    transition: all 100ms ease-in;
}

.copy {
    font-size: 14px;
    letter-spacing: 1px;
    color: rgb(106, 106, 106);
    text-align: center;
    padding: 8px;
}

#tagline {
    margin: 4.5rem 0 3rem 0;
    line-height: 1.6;
    color: white;
    font-size: 14px;
    /* letter-spacing: 1px; */
    padding: 8px;
}

#tagline-small {
    margin: 4.5rem 0 3rem 0;
    line-height: 1.6;
    /* color: #afafaf; */
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    /* letter-spacing: 1px; */
    text-transform: uppercase;
    padding: 8px;
    letter-spacing: 1px;
    text-align: center;
    /* border-bottom: 1px solid #262626; */
}


.email {
    margin: 6rem 0;
}

/* .email a {
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid #262626;
    color: rgb(106, 106, 106);
}

.email a:hover {
    color: white;
    border-color: white;
} */

.nowrap {
    white-space:nowrap;
}

h2 {
    /* border-top: 1px solid white; */
    border-bottom: 1px solid #262626;
    padding: 10px 0;
    max-width: 1180px;
    margin: 10px auto;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: .15em;
    animation: fadein .25s ease-in 1;
    animation-fill-mode: forwards;
    text-align: center;
    transition: 200ms all;
}
h2.expand:hover {
    border-bottom: 1px solid white;
}

header {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    opacity: 0;
    animation: fadein .25s ease-in 1;
    animation-fill-mode: forwards;
}


footer {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding-bottom: 5rem;
}

.heading {
    padding: 10px;
}

.social-icons {
    text-align: center;
}

.social-icons a {
    position: relative;
    height: 43px;
    width: 43px;
    border-radius: 1px;
    margin: 0 10px;
    padding: 9px;
    display: inline-block;
}

.social-icons .icon {
    fill: white;
    transition: all 100ms ease-in;
    height: 100%;
    width: 100%;
    pointer-events: none;
}




.social-icons a::before,
.social-icons a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
    height: 42px;
    border: 1px solid #262626;
	content: '';
	transition: transform 0.2s, opacity 0.2s;
}

.social-icons a::after  {
	border-color: #fff;
	opacity: 0;
	transform: translateY(-7px) translateX(6px);
}

.social-icons a:hover::before {
	opacity: 0;
	transform: translateY(5px) translateX(-5px);
}

.social-icons a:hover::after  {
	opacity: 1;
	transform: translateY(0px) translateX(0px);
}

.social-icons .soundcloud::after {
    border-color: #ff8800;
}

.social-icons .twitter::after {
    border-color: #00aced;
}

.social-icons .youtube::after {
    border-color: #ff0000;
}

.social-icons .facebook::after {
    border-color: #3b5998;
}

.social-icons .instagram::after {
    border-color: #c13584;
}

.social-icons .spotify::after {
    border-color: #1DB954;
}

.social-icons .apple::after {
    border-color: #a3aaae;
}

.social-icons .ted::after {
    border-color: #e62b1e;
}

.social-icons .splice::after {
    border-color: #03f;
}
.social-icons .twitch::after {
    border-color: #6441A4;
}

.social-icons .discord::after {
    border-color: #5865F2;
}


.social-icons use {
    pointer-events: none;
}


.social-icons .soundcloud:hover svg {
    fill: #ff8800;
}

.social-icons .twitter:hover svg  {
    fill: #00aced;
}

.social-icons .youtube:hover svg  {
    fill: #ff0000;
}

.social-icons .facebook:hover svg  {
    fill: #3b5998;
}

.social-icons .instagram:hover svg  {
    fill: #c13584;
}

.social-icons .spotify:hover svg  {
    fill: #1DB954;
}

.social-icons .apple:hover svg  {
    fill: #a3aaae;
}

.social-icons .ted:hover svg  {
    fill: #e62b1e;
}

.social-icons .splice:hover svg  {
    fill: #03f;
}
.social-icons .discord:hover svg  {
    fill: #5865F2;
}

.social-icons .twitch:hover svg  {
    fill: #6441A4;
}

#logo.soundcloud path {
    fill: #ff8800;
}

#logo.twitter path{
    fill: #00aced;
}

#logo.youtube path {
    fill: #ff0000;
}

#logo.facebook path {
    fill: #3b5998;
}

#logo.instagram path {
    fill: #c13584;
}

#logo.spotify path {
    fill: #1DB954;
}

#logo.apple path {
    fill: #a3aaae;
}

#logo.ted path {
    fill: #e62b1e;
}

#logo.splice path {
    fill: #03f;
}

#logo.discord path {
    fill: #5865F2;
}

#logo.twitch path {
    fill: #6441A4;
}

.row {
    display: flex;
}

#albums { 
    display: flex;
    flex-wrap: wrap;
}

#albums, #about {
    max-width: 1200px;
    margin: auto;
}

.spacer {
    height: 5rem;
}

#about {
    /* padding: 10px; */
    margin: 4rem 0 0 0;
}

.about-img {
    flex: 1 0 45%;
    align-self: flex-start;
    margin: 0 10px 0 10px;
    position: relative;
    
}

.about-img img {
    position: absolute;
    width: 100%;
    height: auto;
}

.about-text {
    flex: 1 0 45%;
    line-height: 1.5;
    margin: 0 10px 0 10px;
    font-size: 17px;
    line-height: 1.75;
    color: #afafaf;
    text-align: justify;
 
}
.about-text b {
    color: white;
    font-weight: 900;
}

.about-text p { margin-top: 0; }
.about-text p a, .about-text ul a {
    text-decoration: none;
    padding-bottom: 2px;
    color: white;
    border-bottom: 1px solid #262626;
    transition: all 200ms;
}

.about-text p a:hover, .about-text ul a:hover  {
    border-bottom: 1px solid white;
}

.about-text ul { list-style: none;}
.about-text ul li:before {
    content: "\2014";
    padding: 0 1.15rem 0 3px;
}

.about-text ul li {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: 14px;
    text-indent: -2rem;
    padding-left: 2rem;
}

/* .about-text p:first-child:first-letter {
    font-size: 5em;
    float: left;
    margin-top: .15em;
    line-height: .7;
    font-weight: 900;
    padding: 0 15px 0 0;
    color: #cfcfcf;
    text-shadow: 6px 6px rgba(255,255,255,.35);
}
.about-text p:first-child {
    margin-top: 0;
} */

/* #contact-button {
    text-decoration: none;
    padding: 1rem 2rem;
    width: 100%;
    display: block;
    color: white;
    text-align: center;
    margin-top: 2rem;
    letter-spacing: 2px;
    word-spacing: 5px;
} */

.contact-button{
    text-align: center;
    margin: 10px;
}

.contact-button a {
    text-decoration: none;
    padding: 1rem 2rem;
    letter-spacing: 2px;
    word-spacing: 5px;
    color: white;
    position: relative;
    height: 100%;
    width: 100%;
    /* margin-top: 1rem; */
    padding: 9px;
    display: inline-block;
}

.about-button.contact-button a {
    margin-bottom: 3rem;
}
.contact-button a:hover, #about h2.expand:hover, #about h2.expand-2:hover {
    color: red;
    transition: all 200ms ease-in;

}
#about h2.expand:hover { color: #0096FF;}
#about h2.expand-2:hover { color: green}
#about h2.expand:hover { border-color: #0096FF;}
#about h2.expand-2:hover { border-color: green;}

.contact-button .icon {
    fill: white;
    transition: all 100ms ease-in;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.contact-button a::before,
.contact-button a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height: 100%;
    /* border: 1px solid #262626; */
	content: '';
	transition: transform 0.2s, opacity 0.2s;
}

.contact-button a::after  {
	border-color: #fff;
	opacity: 0;
	transform: translateY(-7px) translateX(6px);
}

.contact-button a:hover::before {
	opacity: 0;
	transform: translateY(5px) translateX(-5px);
}

.contact-button a:hover::after  {
	opacity: 1;
	transform: translateY(0px) translateX(0px);
}
.contact-button a {
    padding: 2rem 2rem;
    text-decoration: none;

}


#contribution-legend {
    text-align: center;
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    font-size: 14px;
}

#contribution-legend li {
    margin-bottom: .5rem;
}

#contribution-legend b {
    font-weight: 700;
}

.contribution {
    padding-left: 0;
    text-align: center;
}

.contribution li {
    display: inline-block;
    border: 1px solid #262626;
    padding: 5px;
    margin-right: .5em;
    font-size: 14px;
    font-weight: bold;
    min-width: 35px;
    text-align: center;
}


.album-container {
    flex: 1 0 21%;
    margin: 10px; 
}

.album {
    /* display: inline-block; */
    /* border-radius: 2px; */
    overflow: hidden;
    position: relative;
    /* border: 1px solid white; */
    pointer-events: none;

}


.album.new .album-art:after {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    border-radius: 2px;
    color: white;
    padding: 5px;
    text-transform: uppercase;
    content:'New Release';
    font-size: 14px;
}

@media (max-width: 700px) {
    
    .row {
        display: block;
    }
    .album {
      width: 100%;
      height: auto;
      padding: 10px;
      margin: 0;
    }
    .about-img {
        display: none;
    }

  }

  hr { 
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    border-top: 0;
 
  } 

.album.loaded {
    pointer-events: all;
}

.album-name {
    font-weight: 300;
    display: block;
    margin-bottom: 2px;
    font-size: 24px;
}

.album-artist {
    
    font-size: 14px;
}

.album-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.75;
    display: inline-block;
    margin-top: 1.5rem;
    /* position: relative; */
}



@media (max-width: 1200px) and (min-width: 700px){
    
    .album-name {
        font-size: 20px;
    }

  }

  @media (max-width: 1000px) {
    
    .album-text {
        display: none;
    }

  }

  @media (max-width: 1100px) and (min-width: 900px){
    
    .album-text {
        font-size: 10px;
    }

  }


@media (max-width: 1000px) {
    
    .album-text {
        display: none;
    }

  }

  @media (max-width: 800px) and (min-width: 700px){
    
    .album-name {
        font-size: 16px;
    }

    .album-artist {
        font-size: 14px;
    }


  }

.album-text.long {
    -webkit-mask-image: linear-gradient(to top, transparent 35%, black 65%);
    mask-image: linear-gradient(to top, transparent 35%, black 65%);
    max-height: 250px;
    
}

.longtext {
    transform: translate(0, 0);
    transition: all 1s ease-out;
    display: inline-block;
   
}

/* 
.longtext:after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: red;
    content: '';
} */

.album-text.long:hover .longtext {
    transform: translate(0, -170px);
    transition: all 10s 2s ease-out;
    
    
}

.album-release {
    position: absolute;
    bottom: 25px;
    right: 25px;
    text-transform: uppercase;
    font-size: 14px;
}


.album .album-desc {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    transition: .25s ease;
    background: linear-gradient(60deg, rgba(10,10,10,1), rgba(10,10,10,0.8));
    padding: 10px;

}

.album-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.album-desc {
    color: white;
}

.album:hover .album-desc, .album:focus .album-desc  {
    opacity: 1;
    color: #FFF;
}


.album:hover .album-box, .album:focus .album-box {
    opacity: 1;
}

.album-box {
    transition: transform 0.05s;
    -webkit-transform: translate3d(-5%,0,0);
    transform: translate3d(-5%,0,0);
}


.album:hover .album-box, .album:focus .album-box {
    transform: translate3d(0,0,0);
}






.album-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    opacity: 0;
    transition: all .25s ease-in;
    padding: 25px;
}

.album-release {
    float: right;
}

.album-art {
    padding-top:100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* transition: all 1s ease-out; */
    opacity: 0;
    /* transform: scale(.75); */

}

.loaded .album-art {
    animation: fadein 1s .6s ease-in 1, scale 1s .25s ease-in-out 1;
    animation-fill-mode: forwards;
}

.border {
    background: #262626;
    position: absolute;
}

.border:nth-child(1) {
    top: 0;
    left: -100%;
    height: 1px;
    width: 100%;
    animation: border1 .2s ease-in 1, fadein .15s ease-in 1, fadeout .2s 1s linear 1;
    animation-fill-mode: forwards;
}

.border:nth-child(2) {
    right: 0;
    top: -100%;
    height: 100%;
    width: 1px;
    animation: border2 .1s .2s linear 1, fadeout .2s 1s linear 1;
    animation-fill-mode: forwards;
}

.border:nth-child(3) {
    bottom: 0;
    right: -100%;
    height: 1px;
    width: 100%;
    animation: border3 .1s .30s linear 1, fadeout .2s 1s linear 1;
    animation-fill-mode: forwards;
}

.border:nth-child(4) {
    left: 0;
    bottom: -100%;
    height: 100%;
    width: 1px;
    animation: border4 .2s .4s linear 1, fadeout .2s 1s linear 1;
    animation-fill-mode: forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    
    to { 
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    
    to { 
        opacity: 0;
    }
}

@keyframes scale {
    from {
        transform: scale(.75);
    }
    
    to { 
        transform: scale(1);
    }
}

@keyframes border1 {
    from {
        left: -100;
    }

    to {
        left: 0;
    }

}

@keyframes border2 {
    from {
        top: -100;
    }

    to {
        top: 0;
    }
}

@keyframes border3 {
    from {
        right: -100;
    }

    to {
        right: 0;
    }
}

@keyframes border4 {
    from {
        bottom: -100;
    }

    to {
        bottom: 0;
    }
}

.rioja {
    background-image: url(../images/visuals/rioja.jpg);
}

.no-distractions {
    background-image: url(../images/visuals/no-distractions.jpg);
}

.let-you-down {
    background-image: url(../images/visuals/let-you-down.jpg);
}

.jealous {
    background-image: url(../images/visuals/jealous.jpg);
}

.i-wanna-get-down-remix-package {
    background-image: url(../images/visuals/i-wanna-get-down-remix-package.jpg);
}

.heartless {
    background-image: url(../images/visuals/heartless.jpg);
}

.dreams-and-memories {
    background-image: url(../images/visuals/dreams-and-memories.jpg);
}

.danger-to-myself-disco-fries {
    background-image: url(../images/visuals/danger-to-myself-disco-fries.jpg);
}

.danger-to-myself-ii {
    background-image: url(../images/visuals/danger-to-myself-ii.jpg);
}

.danger-to-myself {
    background-image: url(../images/visuals/danger-to-myself.jpg);
}

.beating-for-you {
    background-image: url(../images/visuals/beating-for-you.jpg);
}

.all-i-wanna {
    background-image: url(../images/visuals/all-i-wanna.jpg);
}

.the-light {
    background-image: url(../images/visuals/the-light.jpg);
}

.this-old-cafe {
    background-image: url(../images/visuals/this-old-cafe.jpg);
}

.asylum {
    background-image: url(../images/visuals/asylum.jpg);
}

.organica-selects {
    background-image: url(../images/visuals/organica-selects.jpg);
}

.got-it-down {
    background-image: url(../images/visuals/got-it-down.jpg);
}

.toxic {
    background-image: url(../images/visuals/toxic.jpg);
}

.golden-soul {
    background-image: url(../images/visuals/golden-soul.jpg);
}

.shotgun-confidence {
    background-image: url(../images/visuals/shotgun-confidence.jpg);
}

.riveros {
    background-image: url(../images/visuals/riveros.jpg);
}

.anticipate {
    background-image: url(../images/visuals/anticipate.jpg);
}

.passionfruit {
    background-image: url(../images/visuals/passionfruit.jpg);
}

.real-good-thing {
    background-image: url(../images/visuals/real-good-thing.jpg);
}

.real-good-thing-rvmor-remix {
    background-image: url(../images/visuals/real-good-thing-rvmor-remix.jpg);
}

.real-good-thing-dream-hackers-remix {
    background-image: url(../images/visuals/real-good-thing-dream-hackers-remix.jpg);
}

.loose-ends {
    background-image: url(../images/visuals/loose-ends.jpg);
}

.ultralight-beam {
    background-image: url(../images/visuals/ultralight-beam.jpg);
}

.thats-amore {
    background-image: url(../images/visuals/thats-amore.jpg);
}

.love-tonight {
    background-image: url(../images/visuals/love-tonight.jpg);
}

.so-good {
    background-image: url(../images/visuals/so-good.jpg);
}

.goosebumps {
    background-image: url(../images/visuals/goosebumps.jpg);
}

.volare-x-sunflower {
    background-image: url(../images/visuals/volare-x-sunflower.jpg);
}

.asylum-remix {
    background-image: url(../images/visuals/asylum-remix.jpg);
}

.electric-sunrise {
    background-image: url(../images/visuals/electric-sunrise.jpg);
}

.sirens {
    background-image: url(../images/visuals/sirens.png);
}

.sirens-remix {
    background-image: url(../images/visuals/sirens-remix.png);
}

.sirens-twodb-remix {
    background-image: url(../images/visuals/sirens-twodb-remix.png);
}

.sirens-kue-remix {
    background-image: url(../images/visuals/sirens-kue-remix.png);
}

.no-scrubs-x-you-make-me-wanna {
    background-image: url(../images/visuals/no-scrubs-x-you-make-me-wanna.jpg);
}

.falling-in-love-will-kill-you {
    background-image: url(../images/visuals/falling-in-love-will-kill-you.jpg);
}

.take-a-look {
    background-image: url(../images/visuals/take-a-look.jpg);
}

.skin-domenico {
    background-image: url(../images/visuals/skin-domenico.jpg);
}

.good-without-goodbye {
    background-image: url(../images/visuals/good-without-goodbye.jpg);
}

.i-wanna-get-down {
    background-image: url(../images/visuals/i-wanna-get-down.jpg);
}

.forget-you {
    background-image: url(../images/visuals/forget-you.jpg);
}

.broken-boy {
    background-image: url(../images/visuals/broken-boy.jpg);
}

.break-it-if-you-buy-it {
    background-image: url(../images/visuals/break-it-if-you-buy-it.jpg);
}

.turnin-you-out {
    background-image: url(../images/visuals/turnin-you-out.png);
}

.walls {
    background-image: url(../images/visuals/walls.jpg);
}

.forever-love {
    background-image: url(../images/visuals/forever-love.jpeg);
}

.wake-up {
    background-image: url(../images/visuals/wake-up.jpg);
}

.colorscapes-v2 {
    background-image: url(../images/visuals/colorscapes-v2.jpg);
}
.GET-LOUD {
    background-image: url(../images/visuals/GET-LOUD.jpg);
}
.cold {
    background-image: url(../images/visuals/cold.jpg);
}
.face {
    background-image: url(../images/visuals/face.jpg);
}
.do-it-again {
    background-image: url(../images/visuals/do-it-again.jpg);
}
.half-as-much-disco {
    background-image: url(../images/visuals/half-as-much-disco.jpg);
}
.half-as-much {
    background-image: url(../images/visuals/half-as-much.jpg);
}
.half-as-much-deerock {
    background-image: url(../images/visuals/half-as-much-deerock.jpg);
}
.gone-disco {
    background-image: url(../images/visuals/gone-disco.jpg);
}
.contagious {
    background-image: url(../images/visuals/contagious.jpg);
}
.love-and-affection {
    background-image: url(../images/visuals/love-and-affection.jpg);
}
.hypnotized {
    background-image: url(../images/visuals/hypnotized.jpg);
}
.shake-it-out {
    background-image: url(../images/visuals/shake-it-out.jpg);
}
.running-for-cover {
    background-image: url(../images/visuals/running-for-cover.jpg);
}



.guilty-pleasure {
    background-image: url(../images/visuals/guilty-pleasure.jpg);
}
.glory {
    background-image: url(../images/visuals/glory.jpg);
}
.release {
    background-image: url(../images/visuals/release.jpg);
}
.higher-with-you {
    background-image: url(../images/visuals/higher-with-you.jpg);
}
.ride-this-feeling {
    background-image: url(../images/visuals/ride-this-feeling.jpg);
}
.warning-sound {
    background-image: url(../images/visuals/warning-sound.jpg);
}
.mmb {
    background-image: url(../images/visuals/mmb.jpg);
}
.pipe-dream {
    background-image: url(../images/visuals/pipe-dream.jpg);
}




*, ::after, ::before {
    box-sizing: border-box;
}

#about .expand {
    position: relative;
}
#about .expand-icon {
    position: absolute;
    right: 1rem;
}

.expand-content {
    position:absolute;
    top: -3000px;
    /* display: none; */
    visibility: hidden;
    margin-bottom: 7rem;
}


#ildottore-about .expand-content {
    position: relative;
    visibility: visible;
    top: 0;
    margin-bottom: 7rem;
}
.sssnext, .sssprev { display: none;}

.expand, .expand-2 {
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}



#about .expand-2 {
    position: relative;
}
#about .expand-icon-2 {
    position: absolute;
    right: 1rem;
}

.expand-content-2 {
    position:absolute;
    top: -3000px;
    /* display: none; */
    visibility: hidden;
    margin-bottom: 7rem;
}

.news-headlines span { display: block; margin-bottom: 24px; font-weight: bold;}

.news-headlines {
    list-style: none;
    text-align: center;
   
}
.news-headlines h3 {
    font-size: 16px;
display: inline-block;
    padding: 8px;
    border: 1px solid #262626;
    margin-right: 12px;
}

.news-headlines a { color: white; text-decoration: none;}

.headl-medium a:hover {color: red; transition: all 200ms ease-in;}
.headl-noct a:hover {color: blue; transition: all 200ms ease-in;}
.headl-youredm a:hover {color: limegreen; transition: all 200ms ease-in;}
.headl-cultr a:hover {color: yellow; transition: all 200ms ease-in;}
.headl-dailybeat a:hover {color: pink; transition: all 200ms ease-in;}
.headl-marketwatch a:hover {color: #4db74d; transition: all 200ms ease-in;}

.headl-medium a:hover h3 { border-color: red; background-color: red; color: black; transition: all 200ms ease-in;}
.headl-noct a:hover h3 { border-color: blue; background-color: blue; color: black; transition: all 200ms ease-in;}
.headl-youredm a:hover h3 { border-color: limegreen; background-color: limegreen; color: black; transition: all 200ms ease-in;}
.headl-cultr a:hover h3 { border-color: yellow; background-color: yellow; color: black; transition: all 200ms ease-in;}
.headl-dailybeat a:hover h3 { border-color: pink; background-color: pink; color: black; transition: all 200ms ease-in;}
.headl-marketwatch a:hover h3 { border-color: #4db74d; background-color: #4db74d; color: black; transition: all 200ms ease-in;}



/* .expand-icon:after {
    content: '< About DOMENICO';
    font-size: 14px;
    text-transform: initial;
    font-weight: 300;
    margin-left: 20px;
    opacity: 0;
    animation: blink 5s 2s linear;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
} */

/* @media (min-width: 700px) {
    .about-text p:first-child:first-letter {
        font-size: 5em;
        margin-top: 3px;
    }
} */

@media (max-width: 989px) {
    .album-container {
        flex: 1 0 30%;
    }
    .about-img {
        flex: 1 0 30%;
    }
    .about-text {
        flex-grow: 2;
    }
    .social-icons-mobile {
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
}
@media (max-width: 699px) {
    .album-container {
        flex: 1 0 45%;
    }
    .about-img {
        display: none;
    }

    .contact-button a {
        text-decoration: none;
        padding: 1rem 1rem;
        letter-spacing: initial;
        word-spacing: initial;
    }
    

}
@media (max-width: 465px) {
    .album-container {
        flex: 1 0 75%;
    }
}




@media (max-width: 550px) {
    .about-text {
        font-size: 14px;
    }

    /* .about-text p:first-child:first-letter {
        font-size: 5em;
        float: left;
        margin-top: .15em;
        line-height: .7;
        font-weight: 900;
        padding: 0 15px 0 0;
        color: #cfcfcf;
        text-shadow: 6px 6px rgba(255,255,255,.35);
    }  */
}

@media (max-width: 700px) {
    .social-icons a {
        height: 32px;
        width: 32px;
        margin: 0 6px;
        padding: 6px;
    }
    .social-icons a::before,
    .social-icons a::after  {
        width: 34px;
        height: 34px;
    }
    .social-icons a {
        margin: 0 4px;
        padding: 6px;
    }


}
@media (max-width: 320px) {
    .social-icons a {
        margin: 0 4px;
        padding: 6px;
    }
}