/*Browser Clear*/
HTML, body {
margin: 0px;
padding: 0px;
  border: 0px;
}

/*Fonts*/


/*Styles*/

*{
    margin:0;
    padding:0;
}

/*top nav bar*/

.topbanner{
    width: 100%;
    height: 90px;
    background-color:white;
}

.logo{
    height:65px;
    margin-left: 30px;
    margin-top: 10px;
}

.banner{
    width:100%;
    height:360px;
    background-color: #a5a7aa;
    
    
}

.therest{
    width:100%;
    height:500px;
    background-color: #e6e6e6;
}


/*menu icon*/
.container {
    display: inline-block;
    cursor: pointer;
    float:right;
    margin-right: 35px;
    margin-top: 30px;
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: #353538;
    margin: 5px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-4px, 4px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-7px, -8px);
}


/*Menu*/

.responsive-menu ul {
    list-style-type: none;
    margin-top: 0px;
    width: 250px;
    padding-right:25px;
    margin-top:0px;
}

.responsive-menu ul li a{
    text-decoration: none;
    color:#353538;
    font-family:"Oswald", "open-sans","sans-serif";
    font-size: 2.3em;
    width: 100%;
}

.responsive-menu ul li a:hover{
    color:#f25e60;
}

.responsive-menu{
    display:none;
}

.expand{
    display:block;
    position: absolute;
    top:90px;
    right:0px;
    bottom:250px;
    width;58%;
    background-color:white;
    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.2);
    padding:20px;
    z-index: 200;
}



/*banner*/

.banner{
    overflow: hidden;
    position: relative;
}

.clack{
    position:absolute;
    width:100%;
    top:0px;
    filter:grayscale(80%)
    
}

.slogan{
    font-family:"Oswald",sans-serif;
    color:#f25e60;
    font-size:100px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    
}

/*bottom collumns*/

#thebox{
    position: absolute;
    left: 450px;
    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;
    
}

/*Social Media tab*/
.socialmediatab{
    position: absolute;
    top:10px;
    left:35px;
}

.insta{
    font-size:45px;
    position: absolute;
    top:60px;
    color:#353538;
    text-decoration: none;
    left:0px; 
}

.insta:hover{
    color:#f25e60;
}

.link{
    font-size:45px;
    position: absolute;
    top:120px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.link:hover{
    color:#f25e60;
}

.tweet{
    font-size:45px;
    position: absolute;
    top:180px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.tweet:hover{
    color:#f25e60;
}

/*Recent work box*/
.recentwork{
    position: absolute;
     position: absolute;
    top:10px;
    left:35px;
    
}

.digian{
    font-size:45px;
    position: absolute;
    top:60px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.digian:hover{
    color:#f25e60;
}

.photoan{
    font-size:45px;
    position: absolute;
    top:120px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.photoan:hover{
    color:#f25e60;
}

.videoan{
    font-size:45px;
    position: absolute;
    top:180px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.videoan:hover{
    color:#f25e60;
}

.designan{
    font-size:45px;
    position: absolute;
    top:240px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.designan:hover{
    color:#f25e60;
}

.phonean{
    font-size:45px;
    position: absolute;
    top:60px;
    color:#353538;
    text-decoration: none;
    left:0;
}

.phonean:hover{
    color:#f25e60;
}

.emailan{
    font-size:45px;
    position: absolute;
    top:120px;
    color:#353538;
    text-decoration: none;
    left:0px;
}

.emailan:hover{
    color:#f25e60;
}
/*GraphicDesign page*/


.print{
    color:#f25e60;
    font-family:"Oswald", sans-serif;
    font-size: 35px;
    padding-top: 30px;
    padding-left:30px;
    padding-bottom: 30px;
    background-color:#353538;
    margin-top: 10px;
}

.conbox{
    height:400px;
    width:400px;
    margin-bottom: 20px;
    border: 5px solid #353538;
    overflow: hidden;
}

.conbox2{
    height:400px;
    width:400px;
    margin-bottom: 20px;
    border: 5px solid #353538;
    overflow: hidden;
}


/*portfolio work boxes*/

#rpcbox{
    position:absolute;
    top:225px;
    left:20px;
    
}

#rpcicon{
    position: absolute;
    top:0px;
    left:0px;
    height: 150%;
    opacity: 0.7;
    
}

#rpcicon:hover{
    opacity: 1;
}

#canIcon{
     position: absolute;
    top:0px;
    height: 100%;
    opacity: 0.7;
}

#canIcon:hover{
    opacity: 1;
}


#pandgbox{
    position:absolute;
    top:225px;
    left:440px;
}

#DER{
    position:absolute;
    top:225px;
    left:855px;
}

/*row2*/
#fantasyBox{
    position:absolute;
    top:700px;
    left:20px;
    
}

#fantasyicon{
    position: absolute;
    top:0px;
    left:0px;
    height: 150%;
    opacity: 0.7;
    
}

#fantasyicon:hover{
    opacity: 1;
}

#alephIcon{
     position: absolute;
    top:0px;
    height: 100%;
    opacity: 0.7;
}

#alephIcon:hover{
    opacity: 1;
}


#alephbox{
    position:absolute;
    top:700px;
    left:440px;
}

#Biz{
    position:absolute;
    top:700px;
    left:855px;
}

#mediIcon{
    position: absolute;
    top:0px;
    height: 400px;
    opacity: 0.7;
}

#mediIcon:hover{
    opacity: 1;
}

/*DigitalBoxes*/

#rpcbox{
    position:absolute;
    top:225px;
    left:20px;
    
}

#rpcWebImage{
    position: absolute;
    top:0px;
    left:0px;
    height:100%;
    opacity: 0.7;
    
}

#rpcicon:hover{
    opacity: 1;
}

#savageIcon{
     position: absolute;
    top:0px;
    height: 100%;
    opacity: 0.7;
}

#savageIcon:hover{
    opacity: 1;
}


#savageBox{
    position:absolute;
    top:225px;
    left:440px;
}

#DER{
    position:absolute;
    top:225px;
    left:855px;
}



/*motherBox*/
#mombox{
   position:absolute;
    top:225px;
    left:25px;

}

/*Portfolio layout*/

.portbox{
    height:1275px;
    width:100%;
    background-color:white;
    margin-bottom: 20px;
    
}

/*RPC Page*/

#rpcpic{
    position:absolute;
    top:200px;
    overflow: hidden;
}

#rpcimage{
    position: absolute;
    top:70px;
    left:350px;
    width:45%;
    
}

#rpcmockup{
    position: absolute;
    top:550px;
    left:50px;
    width:1200px;
}

#aboutrpc{
    position: absolute;
    top:45%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 35px;
    color:#353538;
}

#rpcinfo{
    position: absolute;
    top:50%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:25px;
    padding-right:10px;
    
}


/*About Page*/

#meandred{
    height: 350px;
    width: 350px;
    overflow: hidden;
    position: absolute;
    top:250px;
    left:250px
}

#sibs{
    height:500px;
}

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


/*photography*/

#lilman{
    position: absolute;
    top:270px;
    left:30%;
    width:50%;
}

#momandman{
    position: absolute;
    top:800px;
    left:350px;
    width:600px;
}

#lilbear{
    position: absolute;
    top:1335px;
    left:350px;
    width:600px;
}

#hug{
    
    position: absolute;
    top:2150px;
    left:350px;
    width:600px;
    margin-bottom: 30px;
    
}

#butterfly{
    
    position: absolute;
    top:1850px;
    left:350px;
    width:600px;
    margin-bottom: 30px;
    
}

#coco{
    
    position: absolute;
    top:2000px;
    left:350px;
    width:600px;
    margin-bottom: 30px;
    
}



/*digital style*/

#rpcsitebtn{
    font-family:"Oswald", sans-serif;
    font-size:30px;
    position: absolute;
    top:350%;
    left: 50px;
    color:#353538;
    text-decoration: none;
    margin-bottom: 30px;
}

#rpcshothome{
    position: absolute;
    top:800px;
    border-color:#353538; 
    left:30%;
    width:50%;
}


/*Dergator site pics*/

#dersite1pic{
    position: absolute;
    top:300px;
    left:350px;
    width:500px;
    
}

#dersite2pic{
    position: absolute;
    top:1150px;
    left:350px;
    width:500px;
    
}

#dersitebtn{
    font-family:"Oswald", sans-serif;
    font-size:30px;
    position: absolute;
    top:1900px;
    left: 350px;
    color:#353538;
    text-decoration: none;
    margin-bottom: 30px;
}

#dersitebtn:hover{
    font-family:"Oswald", sans-serif;
    font-size:30px;
    position: absolute;
    top:1900px;
    left: 350px;
    color:#f25e60;
    text-decoration: none;
    margin-bottom: 30px;
}

/*about contact*/

.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:65px;
    left:0px;
    text-decoration: none;
    color:#353538;
}

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

#aboutlin{
    position: absolute;
    top:135px;
    left:0px;
    text-decoration: none;
    color:#353538;
}

#aboutinsta:hover{
    position: absolute;
    top:65px;
    left:0px;
    color:#f25e60;
}

#abouttweet:hover{
    position: absolute;
    top:100px;
    left:0px;
    color:#f25e60;
}

#aboutlin:hover{
    position: absolute;
    top:135px;
    left:0px;
    color:#f25e60;
}

#beh{
    position: absolute;
    top:170px;
    left:0px;
    text-decoration: none;
    color:#353538;
}

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

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


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

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

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

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

.resume:hover{
    color:#f25e60; 
}

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


#pb1{
    position: absolute;
    top:1150px;
    left:250px;
}

#pb2{
   position: absolute;
    top:1150px;
    left:410px; 
}

#pb3{
    position: absolute;
    top:1150px;
    left:510px;
}



/*Neon Food Page*/

#soda{
    position: absolute;
    top:40px;
    left:300px;
    width:700px;
    
}


#chips{
    position: absolute;
    top:475px;
    left:300px;
    width:700px;
    
}


#candy{
    position: absolute;
    top:1100px;
    left:300px;
    width:700px;
    border: 1px solid gray
    
}

#neonAbout{
     position: absolute;
    top:1900px;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:25px;
    padding-right:10px;
}

#neonBox{
    position:absolute;
    top:200px;
    height:2500px;
    width:100%;
    background-color:white;
    margin-bottom: 20px;
}

#aboutNeon{
    position: absolute;
    top:72%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 35px;
    color:#353538;
}


/*FOA Page*/

#art1{
    position: absolute;
    top:70px;
    left: 200px;
    width:20%;
}

#art2{
    position: absolute;
    top:70px;
    left:500px;
    width:20%;
}

#art3{
    position: absolute;
    top:70px;
    left:805px;
    width:20%;
}

#familyTshirt{
    position: absolute;
    top:450px;
    left:350px;
    width:45%;
}

#foaInfo{
     position: absolute;
    top:72%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
    color:#353538;
}

#foaBox{
    position:absolute;
    top:200px;
    height:1400px;
    width:100%;
    background-color:white;
    margin-bottom: 20px;
}

#aboutFoa{
    position: absolute;
    top:950px;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:35px;
    padding-right:10px;
}



/*Fantasy Animal Page*/

#fantasyMainPic{
    position: absolute;
    top:45px;
    left:200px;
    width:75%;
}



#aboutFantasy{
    position: absolute;
    top:950px;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:35px;
    padding-right:10px;
}


#fantasyInfo{
     position: absolute;
    top:75%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
    color:#353538;
}



/*alepherra Page*/

#aleph1{
    position: absolute;
    top:70px;
    left: 10px;
    width:30%;
}

#aleph2{
    position: absolute;
    top:70px;
    left:425px;
    width:30%;
}

#aleph3{
    position: absolute;
    top:70px;
    left:850px;
    width:30%;
}

#aleph4{
    position: absolute;
    top:400px;
    left:350px;
    width:50%;
}

#AlephInfo{
     position: absolute;
    top:74%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
    color:#353538;
}

#foaBox{
    position:absolute;
    top:200px;
    height:1400px;
    width:100%;
    background-color:white;
    margin-bottom: 20px;
}

#aboutAleph{
    position: absolute;
    top:950px;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:35px;
    padding-right:10px;
}


/*RPC Site*/

#rpcWebInfo{
     position: absolute;
    top:250%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
    color:#353538;
}

#aboutWebrpc{
    position: absolute;
    top:240%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:35px;
    padding-right:10px;
    
}


/*Savage Modernist*/

#savageBTN{
    font-family:"Oswald", sans-serif;
    font-size:30px;
    position: absolute;
    top:300%;
    left: 50px;
    color:#353538;
    text-decoration: none;
    margin-bottom: 30px;
}

#aboutSavage{
    position: absolute;
    top:200%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size:35px;
    padding-right:10px;
}
    
#savageInfo{
     position: absolute;
    top:219%;
    left:50px;
    font-family:"Oswald", sans-serif;
    font-size: 25px;
    color:#353538;
}