@charset "UTF-8";

@import url("https://use.typekit.net/iai0gsv.css");



body {
    background-color: #f595a6;
}


/*TOP*/

#top {
    width: 100%;
    margin: 0 auto;
    background-color: #ed1260;
}

/*TOP NAV*/
#top-nav {
    width: 100%;
    background-color: #af0049;
}

header {
    width: 100%;
    max-width: 1600px;
    text-align: right;
    margin: 0 auto;
}

ul {
    width: 90%;
    margin: 0 auto;
}

li {
	font-family: "rooney-sans", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 1.5em;
    display: inline-block;
    margin-left: 3em;
    letter-spacing: .05em;
    line-height: 2.5em;
    text-transform: uppercase;
}

ul li:first-child {
    margin-left: 0;
}

a {
    color: white;
}

a:hover {
    color: #ed1260;
}

/*TOP TITLE*/
#top-title {
    width: 100%;
    line-height: 10em;
    margin: 0 auto;
    background-color: #ed1260;
}

.top-rach-world {
    width: 57%;
    float: left;
    background-color: #ed1260;
}

h1 {
    font-family: "rooney-sans", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 6em;
    margin-left: 5%;
    color: white;
}

.top-port {
    width: 34%;
    float: right;
    background-color: #ed1260;
}

h3 {
    font-family: "rooney-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 4em;
    margin-right: 8%;
    float: right;
    color: white;
}

.top-gif {
    width: 100%;
    background-color: #af0049;
    overflow: hidden;
    display: flex;
}

h4 {
    font-family: "rooney-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.75em;
    letter-spacing: .05em;
    line-height: 2em;
    text-transform: uppercase;
    color: white;
    overflow: hidden;
    margin: auto;
    animation: float 15s linear infinite;
}


/*ANIMATION*/

@keyframes float {
    0% {
        transform: translateX(100%)
    }
    
    100% {
        transform: translateX(-100%)
    }
}

/*PROFILE*/

#profile {
    width: 100%;
    margin: 0 auto;
}

#pro-title {
    width: 38%;
    background-color: #af0049;
    margin: 3% auto -5% 0;
    text-align: center;
    line-height: 6em;
    /*border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;*/
}

#cutouts {
    width: 31%;
    float: left;
    margin: 10% 0 auto 5%;
}

.cutout1 {
    width: 20%;
    height: 18em;
    float: left;
    margin: 0 auto;
    padding: 3%;
    background-color: #af0049;
    border: 2px solid #ed1260;
    background-image: url(../images/me1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 90% auto;
    /*animation: cutout1 3s infinite;*/
}

/*.cutout1 img {
    width: 100%;
}*/

.cutout2 {
    width: 20%;
    height: 18em;
    float: left;
    margin: 5% auto 0 9%;
    padding: 3%;
    background-color: #ed1260;
    border: 2px solid #af0049;
    background-image: url(../images/me2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 90% auto;
}

/*.cutout2 img {
    width: 100%;
}*/

.cutout3 {
    width: 20%;
    height: 18em;
    float: right;
    margin: 0 auto;
    padding: 3%;
    background-color: #af0049;
    border: 2px solid #ed1260;
    background-image: url(../images/me7.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 90% auto;
}

/*.cutout3 img {
    width: 100%;
}*/

/*CUTOUT ROLLOVER*/

.cutout1:hover {
    background-image: url("../images/me3.png");
}

.cutout2:hover {
    background-image: url("../images/me10.png");
}

.cutout3:hover {
    background-image: url("../images/me4.png");
}

/*CUTOUT ANIMATION

@keyframes cutout1 {
    from{background-image: url(../images/me1.png);}
    to{background-image: url("../images/me10.png");}
}*/

#procard {
    width: 50%;
    float: right;
    margin: 5% 5% auto 5%;
    padding: 2% 2% 2% 2%;
    background-color: #ed1260;
}

#procard:hover {
    background-color: #af0049;
    color: #ed1260;
}

.pro-pic {
    width: 40%;
}

.pro-pic img{
    width: 80%;
    margin: 6% 6% 6% 1%;
    float: left;
    border: 2px solid white;
    border-radius: 5%;
}

.pro-name {
    width: 60%;
    text-align: center;
    float: left;
}

h2 {
    font-family: "rooney-sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 3.5em;
    margin: 3% auto;
    color: white;   
}

.pro-edu {
    width: 60%;
    float: left;
    padding: 3% 0 4% 1%;
    background-color: #af0049;
    border: 2px solid white;
}

.pro-edu p {
    font-family: "rooney-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.75em;
    color: white;
}

blockquote {
    font-family: "rooney-sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2em;
    color: white; 
}

/*WORK*/

#work {
    width: 100%;
    margin: 3% auto;
}

#work-title {
    width: 89%;
    float: right;
    line-height: 3em;
    background-color: #af0049;
   /* border-top-left-radius: 20%;
    border-bottom-left-radius: 20%;*/
    text-align: center;
}

#work-buttons {
    width: 100%;
    float: left;
    margin: 4% auto;
}

.work-buttons:first-child {
    margin-left: 16%;
}

.work-buttons {
    width: 23%;
    height: 2.5em;
    float: left;
    margin: auto 4% auto 10%;
    padding: 2% 2% 2% 2%;
    background-color: #ed1260;
    text-align: center;
    font-family: "rooney-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 3.5em;
    color: white;
    text-transform: uppercase;
}

.work-buttons:hover {
    background-color: #af0049;
    color: #ed1260;
}





@media (min-width: 1281px){
    .cutout4 {
        display: none;
    }
}

@media (max-width: 1280px){
    h1 {
        font-size: 5em;
    }
    
    h3 {
        font-size: 3em;
    }
    
    h4 {
        font-size: 1.5em;
    }
    
    #cutouts {
        margin-top: 7%;
    }
    
    .cutout4 {
        display: none;
    }
    
    h2 {
        font-size: 3em;
    }
    
    .pro-edu p {
        font-size: 1.5em;
    }
    
    blockquote {
        font-size: 1.75em;
    }
    
    .work-buttons {
        height: 2em;
        font-size: 3em;
    }
}

@media (max-width: 1200px){
     h4 {
        font-size: 1.25em;
    }
}

@media (max-width: 1200px){
    #top-title {
        line-height: 8em;
    }
    
     h1 {
        font-size: 3.5em;
    }
    
    h3 {
        font-size: 2em;
    }
}

@media (max-width: 1085px){
    h2 {
        font-size: 2.5em;
    }
    
    .cutout1, .cutout2, .cutout3 {
        height: 15em
    }
    
    .pro-edu p {
        font-size: 1.25em;
    }
    
    blockquote {
        font-size: 1.5em;
    }
    
    #work-title {
        line-height: 2em;
    }
    
    .work-buttons {
        font-size: 2.5em;
    }
}

@media (max-width: 1005px){
    li {
        font-size: 1.2em;
    }
    
    h4 {
        font-size: 1.2em;
    }
}

@media (max-width: 970px){
    h4 {
        font-size: 1em;
    }
}

@media (max-width: 900px){
    h2 {
        font-size: 2.2em;
    }
    
    #pro-title {
        line-height: 4em;
    }
    
    .pro-edu p {
        font-size: 1.1em;
    }
    
    blockquote {
        font-size: 1.3em;
    }
    
    .work-buttons {
        font-size: 2em;
    }
}

@media (max-width: 770px){
    li {
        font-size: 1em;
    }
    
     h4 {
        font-size: 0.8em;
    }
    
    h1 {
        font-size: 3em;
    }
    
    #pro-title {
        width: 55%;
        margin: 5% auto -3% auto;
        text-align: center;
        line-height: 4em;
    }
    
    .cutout1, .cutout2, .cutout3 {
        display: none;
    }
    
    #cutouts {
        width: 25%;
        height: 7em;
        margin-top: 5%;
    }
    
    .cutout4 {
        margin: 0 auto;
        width: 100%;
        float: left;
        overflow: hidden;
        display: flex;
        /*background-color: #af0049;*/
    }
    
    .cutout4:hover .group {
      animation-play-state: paused;
    }
    
    .cutout4 img {
        width: 50%;
        padding-top: 5%;
        padding-bottom: 5%;
        margin: auto 20% auto 0;
        background-color: #af0049;
    }
    
    .group {
        display: flex;
        will-change: transform;
        animation: scrolling 5s linear infinite;
  }
    
    @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
    
    #procard {
        width: 56%;
    }
    
    #work-title {
        width: 30%;
        margin-top: 4%;
        line-height: 3em;
        float: left;
        font-size: .75em;
    }
    
    #work-buttons {
        width: 70%;
        float: right;
    }
    
    .work-buttons {
        width: 23%;
        height: 2.75em;
        font-size: 1.5em;
        justify-content: center;
    }

}

@media (max-width: 700px){
    li {
        font-size: .7em;
    }
    
    #top-title {
        line-height: 6em;
    }
    
    h1 {
        font-size: 2.5em;
    }
    
    h3 {
       font-size: 1.5em; 
    }
    
    h2 {
        font-size: 1.75em;
    }
    
    #pro-title {
        width: 40%;
    }
    
    .pro-edu p {
        font-size: 0.7em;
    }
    
    blockquote {
        font-size: 0.9em;
    }
    
    .work-buttons p {
        font-size: .75em;
    }
}

@media (max-width: 625px){
    h4 {
        font-size: 0.7em;
    }
}

@media (max-width: 545px){
    h1 {
        font-size: 2em;
    }
    
    h3 {
        font-size: 1.2em;
    }
    
    h4 {
        font-size: 0.5em;
    }
    
    h2 {
        font-size: 1.3em; 
    }
    
    #work-title {
        line-height: 2em;
    }
    
    .work-buttons {
        height: 2em;
    }
}

@media (max-width: 425px){
    #top-title {
        line-height: 4em;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.1em; 
    }
    
    #pro-title {
        width: 50%;
        line-height: 3em;
    }
    
    .pro-edu p {
        font-size: 0.5em;
    }
    
    blockquote {
        font-size: 0.7em;
    }
    
    .work-buttons {
        height: 1em;
    }
    
    .work-buttons p {
        font-size: .5em;
    }
}

@media (max-width: 380px){
    h4 {
        font-size: 0.48em;
    }
}

@media (max-width: 330px){
    header {
        text-align: center;
    }
    
    #top-title {
        line-height: 3em;
    }
    
    h1 {
        font-size: 2em;
    }
    
    h3 {
        font-size: 1.25em;
        line-height: 3em;
    }
    
    h4 {
        font-size: 0.38em;
    }
    
    .cutout4, #cutouts {
        display: none;
    }
    
    #pro-title {
        width: 60%;
        line-height: 3em;
        float: none;
    }
    
    #procard {
        width: 80%;
        float: none;
        margin: 5% auto 0 auto;
        padding: 2%;
    }
    
    .pro-name h2 {
        font-size: .8em;
    }
    
    .pro-edu p {
        font-size: 0.6em;
    }
    
    blockquote {
        font-size: 0.7em;
    }
    
    #work-title {
        width: 80%;
        margin: 1% auto;
        float: none;
        line-height: 3em;
        text-align: center;
        font-size: 1.1em;
    }
    
    #work-buttons {
        width: 77%;
        float: none;
        margin: 3% auto;
    }
    
    .work-buttons {
        width: 100%;
        margin: 0 auto 2% auto; 
    }
    
    .work-buttons p {
        font-size: .75em;
    }
    
    .work-buttons:first-child {
        margin-left: 0;
    }
}

@media (max-width: 310px){
    h4 {
        font-size: 0.25em;
        animation: none;
    }
}