@font-face {
     font-family: ProximaRegular;
     src: url(../typefaces/proxima/ProximaNova-Regular.woff) format("woff");
}
 @font-face {
     font-family: ProximaBold;
     src: url(../typefaces/proxima/Proxima-Nova-Bold.woff) format("woff");
}
 @font-face {
     font-family: ProximaItalic;
     src: url(../typefaces/proxima/Proxima-Nova-Alt-Regular-Italic.woff) format("woff");
}
 @font-face {
     font-family: OnsraBold;
     src: url(../typefaces/Onsra-Bold.ttf) format("ttf");
}
 @font-face {
     font-family: AveFedan;
     src: url(../typefaces/AveFedan.ttf) format("ttf");
}
 :root {
     --main-orange: #F29F4E;
     --main-blue: #006EB8;
     --main-light-blue: #bbd3fc;
     --main-off-white: #F4F4E4;
     --main-purple: #431361;
     --main-dark-purple: #000333;
     --main-off-white-blue: #efefef;
     --main-red: #e0001a;
}
 body {
     margin: 0;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: -1;
}
 html {
     width: 100%;
     height: 100%;
     background-color: var(--main-off-white-blue);
     position: fixed;
}
 h1 {
     margin: 0;
     font-size: 18px;
     padding-bottom: 10px;
     font-family: 'Playfair Display', serif;
     color: var(--main-dark-purple);
}
 h3 {
     font-size: 20px;
     letter-spacing: 6px;
     margin: 0;
     padding: 15% 2% 9% 2%;
}
 p {
     margin: 0;
     padding: 0;
}
 a:link{
     text-decoration: none;
     color: var(--main-purple);
}
 a:visited{
     text-decoration: none;
     color: var(--main-dark-purple);
}
/*Navigation*/
 .navbar-landing {
     z-index: 1;
     text-align: center;
     text-transform: capitalize;
     font-size: 20px;
     letter-spacing: 0.24em;
     font-family: 'ProximaBold', serif;
     color: var(--main-purple);
     font-weight: 700;
     padding-top: 1.25%;
     padding-left: 10%;
     padding-right: 10%;
     padding-bottom: 5px;
     height: 2%;
}
 .navbar-landing ul {
     list-style-type: none;
     padding: 0px;
     margin: 1px;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
}
 .navbar-landing li {
     display: inline;
     color: var(--main-purple);
}
 #raptor-button{
     margin: 0;
}
 #raptor-button img {
     height: 42px;
     width: 42px;
     margin-right: 3px;
     margin-left: 3px;
     padding-left: 8px;
     padding-right: 8px;
     margin-bottom: -10px;
     max-height: 100%;
}
 #work-button{
     padding-left:5px;
}
 #work-button:hover{
     cursor: pointer;
}
 #about-button:hover{
     cursor: pointer;
}
 #work-button-menu:hover{
     cursor: pointer;
}
 #about-button-menu:hover{
     cursor: pointer;
}
 #home-button:hover{
     cursor: pointer;
}
 #home-button-menu:hover{
     cursor: pointer;
}
/*/
////Landing Divs///
/*/
 .front-page-wrapper {
     height: 100%;
     width: 100%;
}
 #scroll-container{
     height: 100%;
     overflow: scroll;
}
 .jeff-container {
     display:flex;
     width: 100%;
     z-index: -100 !important;
    /* background-attachment: fixed;
     */
}
 .jeff-container-image{
     width: 100%;
     height: 100%;
     padding-top: 6%;
     padding-left: 20px;
     padding-right: 20px;
     animation: fadeIn 1.0s ease forwards;
}
 .jeff-container-image img{
     padding-left: 30%;
     padding-right: 30%;
     max-height: 40%;
     width: 40%;
}
 .jeff-title-font{
     font-family: 'Playfair Display', serif;
     font-size: 72px;
     width: 100%;
     text-align: center;
     color: var(--main-purple);
     font-weight: 900;
     letter-spacing: -0.08em;
     line-height: 80%;
     padding: 2px 0px 16px 0px;
}
 .title-subheading{
     padding-top: 18px;
     padding-bottom: 12px;
     text-align: center;
     font-style: italic;
     font-size: 32px;
     font-family: 'Playfair Display', serif;
}
 .raptor-holder {
    display: flex;
     width: 100%;
     flex-direction: column;
}
 .raptor-holder img {
     padding-left: 25%;
     padding-right: 25%;
     width: 50%;
     max-height: 40%;
}

.raptor-pic{

}

.front-page-nav{

}
/*/
/////////////////////////// ////// WORK PAGE DIVS ///// /////////////////////////
/*/
 #work{
     position: absolute;
     overflow: scroll;
     background-color: var(--main-purple);
     width: 100%;
     height: 100%;
     top: 0px;
     z-index: 1;
     transform: translateX(100%);
     -webkit-transform: translateX(100%);
     color: var(--main-off-white-blue);
}
 #work-html{
     background-color: var(--main-purple);
     width: 100%;
     height: 100%;
     color: var(--main-off-white-blue);
}
 .work-page-wrapper{
     padding: 50px 40px 40px 40px;
     background-color: var(--main-purple);
}
 .work-page-heading{
     font-family: 'Playfair Display', serif;
     text-align: right;
     font-size: 30px;
     padding: 10px 10px 20px 0px;
     color: var(--main-off-white-blue);
}
 .work-page-item{
     color: var(--main-off-white-blue);
     font-family: 'ProximaRegular';
     font-size: 25px;
     text-transform: uppercase;
     padding: 15px 0px 15px 0px;
     letter-spacing: 9px;
}
 .work-page-item h1{
     font-family: 'Playfair Display', serif;
     font-size: 26px;
     padding: 10px 0px 6px 0px;
     letter-spacing:0.2em;
     font-weight: 900;
}
 .work-page-item a:hover{
     color: var(--main-off-white);
}
 .work-page-item p{
     font-size: 15px;
     letter-spacing: 4px;
}
 .work-page-item a{
     color: var(--main-light-blue);
}
 #work-back-button-holder {
     height: 120px;
     width: 100%;
     font-family: 'ProximaRegular', serif;
     font-size: 23px;
     color: var(--main-off-white-blue);
     font-weight: 900;
     padding-top: 10px;
   /*  letter-spacing: 7px; */
     bottom: 0px;
     background-color: var(--main-purple);
}
 #work-back-button-holder:hover {
     cursor: pointer;
}
 .back-raptor-button img {
     height: 50px;
     width: 50px;
     margin-right: 6px;
     margin-bottom:-14px;
}
 .back-lettering{
}
/*/
/////////////////////////// ////// ABOUT PAGE DIVS ///// /////////////////////////
/*/
 #about{
     position: absolute;
     background-color: white;
     width: 100%;
     height: 100%;
     top: 0px;
     transform: translateX(100%);
     -webkit-transform: translateX(100%);
     color: var(--main-purple);
     overflow: scroll;
}
 #about-html{
     background-color: white;
     width: 100%;
     height: 100%;
     color: var(--main-purple);
}
 .about-page-wrapper{
     padding: 70px 30px 10px 30px;
}
 .about-page-heading{
     font-family: 'Playfair Display', serif;
     font-size: 50px;
}
 .about-page-text-body{
     padding: 20px 0px 10px 0px;
}
 .about-page-text-body p{
     font-family: "ProximaRegular";
     font-size: 15px;
     line-height: 22px;
     padding-bottom: 20px 
}
 #about-back-button-holder {
     height: 120px;
     width: 100%;
     bottom: 0;
     font-family: 'Playfair Display', serif;
     font-size: 23px;
     color: var(--main-purple);
     font-weight: 900;
     /* letter-spacing: 7px; */
}
 #about-back-button-holder:hover {
     cursor: pointer;
}
/*/
//animations/
/*/
 .slide-in {
     animation: slide-in 0.5s forwards;
     -webkit-animation: slide-in 0.5s forwards;
}
 .slide-out {
     animation: slide-out 0.5s forwards;
     -webkit-animation: slide-out 0.5s forwards;
}
 @keyframes slide-in {
     100% {
         transform: translateX(0%);
    }
}
 @-webkit-keyframes slide-in {
     100% {
         -webkit-transform: translateX(0%);
    }
}
 @keyframes slide-out {
     0% {
         transform: translateX(0%);
    }
     100% {
         transform: translateX(100%);
    }
}
 @-webkit-keyframes slide-out {
     0% {
         -webkit-transform: translateX(0%);
    }
     100% {
         -webkit-transform: translateX(100%);
    }
}
/*/
// Phone*/
 @media screen and (max-width: 650px) {
     .raptor-holder img {
         padding-top: 3%;
         padding-left: 20%;
         padding-right: 20%;
         width: 60%;
    }
     .jeff-container img {
         padding: 15% 20% 0% 20%;
         width: 60%;
    }
     .navbar-landing{
         font-size: 25px;
         padding-top: 15px;
    }
     .raptor-button img{
         width: 35px;
         height: 35px;
    }
     .title-subheading{
         font-size: 23px;
         padding-top: 10px;
    }
     .work-page-item p{
         font-size: 10px;
         letter-spacing: 2px;
    }
     .work-page-item h1{
         font-family: 'Playfair Display', serif;
         font-size: 13px;
         padding: 4px 0px 4px 0px;
         letter-spacing:1px;
         font-weight: 200;
    }
     .about-page-wrapper{
         padding: 50px 25px 0px 25px;
    }
     .about-page-heading{
         font-size: 30px;
    }
     .about-page-text-body{
         padding-top: 15px;
    }
     .about-page-text-body p{
         font-family: "ProximaRegular";
         font-size: 12px;
         line-height: 17px;
         padding-bottom: 10px 
    }
     #about-back-button-holder {
         font-size: 15px;
    }
     #work-back-button-holder {
         font-size: 15px;
    }
     .back-raptor-button img {
         height: 20px;
         width: 20px;
         margin-right: 6px;
         margin-bottom:-4px;
    }
     .navbar-landing {
         font-size: 21px;
    }
}
/*/
/mobile landscape mode /
/*/
 @media screen and (orientation:landscape) and (max-width:1024px){
     .jeff-container{
         height: 23%;
    }
     .jeff-container-image {
         padding-top: 4%;
    }
     .title-subheading{
         font-size: 22px;
         padding-top: 2%;
    }
     .navbar-landing{
         padding-top: 0px;
         font-size: 22px;
    }
}
 @media screen and (orientation:landscape) and (max-width:900px){
     .title-subheading{
         font-size: 20px;
         padding-top: 2%;
    }
     .navbar-landing{
         padding-top: 0px;
         font-size: 20px;
    }
}
/*/
/iphone 5 landscape /
/*/
 @media screen and (max-width: 640px) and (orientation : landscape){
     .raptor-holder{
         padding-bottom: 0;
         height: 30%;
         padding-top: 5%;
    }
     .jeff-container{
         height: 20%;
    }
     .jeff-container-image{
         padding-top: 5%;
    }
}
 @media screen and (max-width: 400px){
     .jeff-container-image{
         padding-top: 10%;
    }
     .raptor-holder img{
         padding-left: 15%;
         padding-right: 15%;
         width: 70%;
    }
}
 @media screen and (max-height: 400px){
     .raptor-holder img{
         padding-left: 36%;
         padding-right: 36%;
         padding-top: 8%;
         max-width: 28%;
    }
     .img-responsive{
         padding-top: 3%;
    }
     .jeff-container-image img{
         padding-top: 2%;
    }
}
/*/
//////Moto fold///
/*/
 @media screen and (max-width: 280px){
     .navbar-landing {
         font-size: 18px;
    }
}
/*/
// table/small screen*/
 @media screen and (min-width: 1000px) {
     .raptor-holder img{
         padding-left: 30%;
         padding-right: 30%;
         padding-top: 2%;
         width: 40%;
         max-height: 40%;
    }
    /*/
    // colors */
     .bg-main-orange{
         background-color: var(--main-orange);
    }
     .bg-main-blue{
         background-color: var(--main-blue);
    }
     .bg-main-off-white{
         background-color: var(--main-off-white);
    }
     .bg-main-dark-purple{
         background-color: var(--main-dark-purple);
    }
     .txt-main-red{
         color: var(--main-red);
    }
     .txt-main-orange{
         color: var(--main-orange);
    }
     .txt-main-blue{
         color: var(--main-blue);
    }
     .txt-main-off-white{
         color: var(--main-off-white);
    }
     .txt-main-dark-purple{
         color: var(--main-dark-purple);
    }
     .txt-main-red{
         color: var(--main-red);
    }
}