.wraper {
    position: absolute;
    left: -1%;
    ;
    height: 100%;
    width: 100%;
    font-family: futura;
    font-size: 1.3em;
    color: rgba(41, 63, 110);
}

.navbar {
    position: fixed;
    z-index: 1;
    top: -1%;
    display: flex;
    width: 102%;
    height: 17%;
    background-color: rgba(41, 63, 110);
    animation-name: navcolor;
    animation-duration: 2s;
}

@keyframes navcolor {
    0% {
        background-color: white;
    }
    100% {
        background-color: rgba(41, 63, 110)
    }
}

.home, .services, .contact, .testimonials, .cta {
    position: relative;
    height: 10vh;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.innerHome, .innerServices, .innerContact, .innerTestimonials, .innerCta {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

/*HOME*/

.home {
    width: 20vw;
    background-image: url(white_home.png);
    animation-name: homecolor;
    animation-duration: 2s;
}

.innerHome {
    background-image: url(lightblue_home.png);
}

.hometxt {
    display: none;
    padding-top: 3.5em;
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 1px;
    background-image: url(kontur_home.svg);
    background-size: 10em;
    background-repeat: no-repeat;
    background-position: top;
}

@keyframes homecolor {
    0% {
        background-image: url(darkblue_home.png);
    }
    100% {
        background-image: url(white_home.png);
    }
}

/*SERVICES*/

.services {
    width: 20vw;
    background-image: url(white_services.png);
}

.innerServices {
    background-image: url(lightblue_services.png);
}

.servicestxt {
    display: none;
    padding-top: 3em;
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 1px;
    background-image: url(kontur_services.svg);
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: top;
}

/* TESTIMONIALS*/

.testimonials {
    width: 20vw;
    background-image: url(white_testimonials.png);
    animation-name: testimonialscolor;
    animation-duration: 2s;
}

.innerTestimonials {
    background-image: url(lightblue_testimonials.png);
}

.testimonialstxt {
    padding-bottom: 2em;
    position: relative;
    z-index: -10;
    width: 100%;
    height: 100%;
    bottom: 1px;
    background-image: url(5stars.png);
    background-size: 10em;
    background-repeat: no-repeat;
    background-position: bottom;
    font-style: italic;
}

.paul {
    display: none;
}

.gillian {
    display: none;
}

.dave {
    display: none;
}

.jessica {
    display: none;
}

.minoo {
    display: none;
}

.neil {
    display: none;
}

.david {
    display: none;
}

.lyndsey {
    display: none;
}

.jordan {
    display: none;
}

.carly {
    display: none;
}

.allan {
    display: none;
}

.emma {
    display: none;
}

.oliver {
    display: none;
}

.ben {
    display: none;
}

@keyframes testimonialscolor {
    0% {
        background-image: url(darkblue_testimonials.png);
    }
    100% {
        background-image: url(white_testimonials.png);
    }
}

.slidefromright {
    animation-name: slideFromRight;
    animation-duration: 5s;
    animation-timing-function: ease;
}

.slidefromcenter {
    animation-name: slideFromCenter;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes slideFromCenter {
    0% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(-1300px, 0px);
    }
}

@keyframes slideFromRight {
    0% {
        transform: translate(1300px, 0px);
    }
    20% {
        transform: translate(0px, 0px);
    }
    80% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(-1300px, 0px);
    }
}

/* CONTACT*/

.contact {
    width: 20vw;
    background-image: url(white_contact.png);
    animation-name: contactcolor;
    animation-duration: 2s;
}

.innerContact {
    background-image: url(lightblue_contact.png);
}

.contacttxt {
    display: none;
    padding-top: 3.5em;
    position: relative;
    width: 100%;
    height: 100%;
    bottom: 1px;
    background-image: url(kontur_contact.svg);
    background-size: 10em;
    background-repeat: no-repeat;
    background-position: top;
}

@keyframes contactcolor {
    0% {
        background-image: url(darkblue_contact.png);
    }
    100% {
        background-image: url(white_contact.png);
    }
}

/* MAIN*/
.onof {
    opacity:100%;
}
.main {
    margin: auto;
}

.left {
    display: block;
    position: absolute;
    top: 40%;
    left: 0%;
    width:15%;
    height: 40%;
    background-image: url(Polygon1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20%;
    
    
}
.leftscreen {
    display: block;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 70%;
}

.right {
    display: block;
    position: absolute;
 
    top: 40%;
    right: -1%;
    width: 15%;
    height: 40%;
    background-image: url(Polygon2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size:20%;
    
    
}
.rightscreen {
    display: block;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 80%;
}



.logo {
    position: fixed;
    width: 23%;
    height: 23%;
    left: 38.5%;
    bottom: 52%;
    background-image: url(logo_phil_ring.png);
    background-position: center;
    background-size: 55%;
    background-repeat: no-repeat;
    animation-name: skurcz;
    animation-duration: 2s;
    animation-timing-function: ease;
    transform: scale(1.5);
}


@keyframes skurcz {
    0% {
        transform: scale(2) translate(0%, 20%);
    }
    50% {
        transform: scale(2) translate(0%, 20%);
    }
    100% {
        transform: scale(1.5) translate(0%, 0%);
    }
}

.innerlogo {
    position: relative;
    height: 100%;
    width: 100%;
    background-image: url(logo_phil_noring.png);
    background-position: center;
    background-size: 55%;
    background-repeat: no-repeat;
}

.text {
    position: fixed;
    z-index: -3;
    top: 55%;
    width: 50%;
    left: 25%;
    font-size: inherit;
    text-align: center;
    line-height: 1.8em;
}

.zoom {
    animation-name: zoom;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes zoom {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.shrink {
    animation-name: shrink;
    animation-duration: 1s;
    animation-timing-function: ease;
}

.shrinkandzoom {
    animation-name: shrinkandzoom;
    animation-duration: 1s;
    animation-timing-function: ease;
}

@keyframes shrinkandzoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.footer {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 17%;
    background-color: rgba(41, 63, 110);
    animation-name: footercolor;
    animation-duration: 2s;
}

@keyframes footercolor {
    0% {
        background-color: white;
    }
    100% {
        background-color: rgba(41, 63, 110)
    }
}

.cta {
    top: 1em;
    height: 13vh;
    width: 30vw;
    background-image: url(white_getfree.png);
    background-size: 60%;
    animation-name: ctacolor;
    animation-duration: 2s;
}

.innerCta {
    background-image: url(lightblue_getfree.png);
    background-size: 60%;
}

@keyframes ctacolor {
    0% {
        background-image: url(darkblue_getfree.png);
    }
    100% {
        background-image: url(white_getfree.png);
    }
}

.rotation1 {
    animation: rotation1;
    animation-duration: 0.7s;
    transform: rotate(0deg)scale(1.0)
}

@keyframes rotation1 {
    0% {
        transform: rotate(0deg) scale(1)
    }
    100% {
        transform: rotate(-11deg)scale(1.1)
    }
}

.rotation2 {
    animation: rotation2;
    animation-duration: 1.5s;
}

@keyframes rotation2 {
    0% {
        transform: rotate(-11deg)scale(1.1)
    }
    100% {
        transform: rotate(0deg) scale(1)
    }
}

@media (min-width:315px) and (max-width:850px) {
    .navbar {
        height: 17%;
    }
    .home, .services, .contact, .testimonials, .cta {
        width: 33%;
        background-size: 105%;
    }
    .innerHome, .innerServices, .innerContact, .innerTestimonials, .innerCta {
        background-size: 107%;
    }
    .footer {
        height: 17%;
    }
    .logo {
        width: 38%;
        height: 38%;
        left: 31%;
        bottom: 48%;
        background-size: 100%;
    }
    .innerlogo {
        background-size: 100%;
    }
    .text {
        position: fixed;
        top: 45%;
        width: 70%;
        left: 15%;
        font-size: inherit;
        text-align: center;
        font-size: 0.5em;
        line-height: 1.4em;
    }
    .servicestxt, .hometxt, .contacttxt, .testimonialstxt {
        padding-top: 5em;
        background-size: 30%;
        background-position: 50% 15%;
    }
    .testimonialstxt {
        background-size: 10em;
        background-repeat: no-repeat;
        background-position: bottom;
    }
    .cta {
        top: 0.5em;
        width: 30vw;
    }

.left {
   
    left: 3%;
    width: 10%;
    height: 30%;
 
    
    
}

.right {
    
    
    right: 3%;
    width: 10%;
    height: 30%;
  
    
    
}

}