@media screen and (max-width: 1107px){
    
/*index*/
    
/*banner*/
    
    .slogan{
    font-family:"Oswald",sans-serif;
    color:#f25e60;
    font-size:90px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
}
    
    /*bottom boxes*/

    #thebox{
    position: absolute;
    left: 355px;
    top: 525px;
    bottom: 10px;
    z-index: 99;
}

.col{
    width:350px;
    height:350px;
    background-color:#a5a7aa;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    color: #f25e60; 
}

#colone{
    position: relative;
    left:-310px;
    
    
}

#coltwo{
    position: relative;
    left:10px;
    top:-350px;
     
}

#colthree{
    position: relative;
    left: 350px;
    top:-700px;
    
}
    
}


@media screen and (max-width:992px){
/*index*/
    
    /*banner*/
    
    .slogan{
    font-family:"Oswald",sans-serif;
    color:#f25e60;
    font-size:60px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
}

}


@media screen and (max-width:865px){
    
    
    .slogan{
    font-family:"Oswald",sans-serif;
    color:#f25e60;
    font-size:75px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
}
    
    /*bottom boxes*/

    #thebox{
    position: absolute;
    left: 300px;
    top: 525px;
    bottom: 10px;
    z-index: 99;
}

.col{
    width:350px;
    height:350px;
    background-color:#a5a7aa;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    color: #f25e60; 
}

#colone{
    position: relative;
    left:-310px;
    
    
}

#coltwo{
    position: relative;
    left:10px;
    top:-350px;
     
}

#colthree{
    position: relative;
    left: 350px;
    top:-700px;
    
}
    
}
    


@media screen and (max-width:650px){
    
    
/*index*/

    
/*banner*/
    
.slogan{
    font-family:"Oswald",sans-serif;
    color:#f25e60;
    font-size:45px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
}
    
.clack{
    position:absolute;
    width:1400px   
}
    
/*bottom boxes*/

    #thebox{
    position: absolute;
    left: 60px;
    top: 525px;
    bottom: 10px;
    z-index: 99;

}
    
    .col{
    width:350px;
    height:350px;
    background-color:#a5a7aa;
    font-family: "Oswald", sans-serif;
    font-size: 30px;
    color: #f25e60; 
}

#colone{
    position: relative;
    left:20px;
    
    
}

#coltwo{
    position: relative;
    top:20px;
    left:20px
     
}

#colthree{
    position: relative;
    left: 20px;
    top:45px;
    
}

    
/*background*/
    
.therest{
    width:100%;
    height:1300px;
    background-color: #e6e6e6;
}
    
    
/*about page */
    
    #meandred{
    height: 350px;
    width: 350px;
    overflow: hidden;
    position: absolute;
    top:250px;
    left:80px
}
    
    
    
    #email{
        position: absolute;
        left:-175px;
        font-size:25px; 
    }

    
    .aboutuspar{
    width:350px;
    position: absolute;
    left:700px;
    top:250px;
    margin-bottom: 20px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
}
    

.infocontact{
    font-family: "Oswald", sans-serif;
    font-size:25px;
    position: absolute;
    top:625px;
    left: 250px;
    color:#353538;
    text-decoration: none;
    margin-bottom: 30px;
}

#aboutinsta{
    position: absolute;
    top:125px;
    left:-175px;
    text-decoration: none;
    color:#353538;
}

#abouttweet{
    position: absolute;
    top:175px;
    left:-175px;
    text-decoration: none;
    color:#353538;
}

#aboutlin{
    position: absolute;
    top:225px;
    left:-175px;
    text-decoration: none;
    color:#353538;
}
    
#beh{
    position: absolute;
    top:280px;
    left:-175px;
    text-decoration: none;
    color:#353538;
}

#beh:hover{
    position: absolute;
    top:280px;
    left:-175px;
    text-decoration: none;
    color:#f25e60;
}

#aboutinsta:hover{
    position: absolute;
    top:125px;
    left:-175px;
    color:#f25e60;
}

#abouttweet:hover{
    position: absolute;
    top:175px;
    left:-175px;
    color:#f25e60;
}

#aboutlin:hover{
    position: absolute;
    top:225px;
    left:-175px;
    color:#f25e60;
}


.resume{
    
    text-decoration: none;
    color:#353538;
    font-size: 25px;
    font-family: "oswald", sans-serif;
}


#pdf{
    position: absolute;
    top:1000px;
    left:80px;
}

#word{
    position: absolute;
    top:1000px;
    left:150px;
}

#jpeg{
    position: absolute;
    top:1000px;
    left:250px;
}

#resumetitle{
    text-decoration: none;
    color:#353538;
    font-size: 25px;
    font-family: "oswald", sans-serif;
    position: absolute;
    top: 960px;
    left:80px;
}

.resume:hover{
    color:#f25e60; 
}
    
    .aboutuspar{
    width:350px;
    position: absolute;
    left:70px;
    top:1100px;
    margin-bottom: 20px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
}
    
    
    
 /*portfolio*/

.sqbox{
    position: absolute;
    top:210px;
    left:50%
    
}

.sq{
    width: 300px;
    height:300px;
    background-color: #f25e60;
   
}

#sq1{
    position: absolute;
    right:-150px;
    top:325px;
    overflow: hidden;
}

#sq2{
    position: absolute;
    right:-150px;
    overflow: hidden;
}

#sq3{
    margin-bottom: 100px;
    position: absolute;
    right: -150px;
    top:650px;
    overflow: hidden;
}

#sq4{
    margin-bottom: 100px;
    position: absolute;
    right:-150px;
    top:980px;
    overflow: hidden;
}

/*Portfolio Titles*/

#digi{
    position: absolute;
    top:120px;
    left:50px;
    text-decoration: none;
    font-size:30px;
}

#photo{
    position: absolute;
    top:120px;
    left:50px;
    text-decoration: none;
    font-size: 30px;
}

#vid{
    position: absolute;
    top:120px;
    left:50px;
    text-decoration: none;
    font-size: 30px;
}

#print{
    position: absolute;
    top:120px;
    left:50px;
    text-decoration: none;
    font-size: 30px;
}

/*Box Photos*/
.cam{
    height:350px;
    opacity: 0
}

.cam:hover{
    opacity:0.5;
}

.coder{
    height:350px;
    opacity: 0;
}

.coder:hover{
    opacity: 0.5;
}

.filmbuff{
    height:350px;
    opacity: 0;
}

.filmbuff:hover{
    opacity: 0.5;
}

.gfx{
    height: 350px;
    opacity: 0;
}

.gfx:hover{
    opacity: 0.5;
}   
    
}



/*DigitalPage*/

#rpcbox{
    
}




    
   

@media screen and (max-width:480px){
  
    

}