@charset "UTF-8";



/* ===================================
    2. Navigation Bar
====================================== */

.nav {
    padding-top: 40px;
}

/* ===================================
    4. Home
====================================== */

.indent-line {
    position: relative;
    margin: 0 0 1rem 0;
    padding: 0px 0px 0px 30px;
    border-left: 1px solid rgba(10, 10, 10, 1);
    border-radius: 0;
    background-color: white;
    color: #0a0a0a; }

.line-break {
    height: 1px;
    background-color: #DFDFDF;
}

.line-break-black {
    height: 1px;
    background-color: #000000;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.hero {
    margin-top: 4rem;
}


.space-bottom {
    margin-bottom: 4rem;
}

.space {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.space-2{
    padding-top: 15rem;
    padding-bottom: 4rem;
}

::selection {
    background: #000000;
    color: #ffffff;/* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #000000;
    color: #ffffff;/* Gecko Browsers */
}

.svg-container {
  height: 40px;
  position: relative;
  width: 40px;
  
}

.svg-circle {
  height: 42px;
    width: 42px;}
  
  .svg-background {
    fill: transparent;
    stroke: #000000;
    transition: all 200ms ease;
  }
  
  .svg-foreground {
    fill: transparent;
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    stroke: #C9C9C9;
    transform-origin: 50% 50%;
    transform: rotate(-270deg);
    transition: all 800ms ease;
  }
    
.svg-background:hover  {
      stroke: transparent;
    }

.svg-foreground:hover   {
      stroke-dashoffset: 0;
      transform: rotate(-90deg);
    }

@media print, screen and (max-width: 40em) {
    
.logo-footer {
    display: none;
    }
    
.skills-desktop {
    display: none;
    }

.skills-mobile {
    text-align: center;
    padding: 3rem 1rem 0rem 1rem;    
    }

}

    @media print, screen and (max-width: 60em) {
        .social-footer{
        text-align: center;
        margin-bottom: 2rem;    
}
        .small-hide{
            display:none;
        }
}

@media print, screen and (min-width: 40em) {
    
.skills-mobile {
        display: none;
    }
}

figure.effect-selena {
	background: #000000;
}

figure.effect-selena img {
	-webkit-transition: -webkit-transform 500ms;
	transition: transform 500ms;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.995,0.99,1);
	transform: scale3d(0.995,0.99,1);
}


/* ===================================
    6. Animation
====================================== */


.animate
{
    opacity: 0;
    transition: .8s ease-out;
    -ms-transform: translate(0px,30px); 
    -webkit-transform: translate(0px,30px);
    transform: translate(0px,30px);
}

.animate.show-it
{
    opacity: 1;
    -ms-transform: translate(0px,0px); 
    -webkit-transform: translate(0px,0px);
    transform: translate(0px,0px);
}


@media print, screen and (max-width: 40em) {
.hero {
    margin-top: 2rem;
}

.space-2 {
    padding-top: 8rem;
    padding-bottom: 4rem;
}
}