@font-face{
    font-family: "Real Regular Italic";
    src: url("fonts/real-italic/1f2ec50ddc0bdd9b67ed1e4f4953904e.eot");
    src: url("fonts/real-italic/1f2ec50ddc0bdd9b67ed1e4f4953904e.eot?#iefix")format("embedded-opentype"),
        url("fonts/real-italic/1f2ec50ddc0bdd9b67ed1e4f4953904e.woff")format("woff"),
        url("fonts/real-italic/1f2ec50ddc0bdd9b67ed1e4f4953904e.woff2")format("woff2"),
        url("fonts/real-italic/1f2ec50ddc0bdd9b67ed1e4f4953904e.ttf")format("truetype");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

        
        body{
            font-family: "real-text-semilight", sans-serif;
            margin:0;
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            justify-content: space-between;
        }

        h2{
            /*color: #757780; */
            color: #AEB0BA;
            font-size: 2.2rem;
        }
        
        section{
            max-width: 1100px;
            margin-right: auto;
            margin-left: auto;
        }
        
        /* NAV */
        nav{
            margin-top: 35px;
            max-width: 1170px;
            margin-right: auto;
            margin-left: auto;
            padding-right: 70px;
            animation-name: navEntry;
            animation-duration: 2s;
        }
        
        @keyframes navEntry{
            0% {    opacity: 0; 
                
                }
            100% {  opacity: 1; 
                }
        }
        
        nav svg{
            max-width: 40px;
            margin-right: 20px;
            vertical-align: middle;
            fill: #757780;
            transition: fill 0.3s
        }
        
        #nav-name{
            font-family: 'real-head-demibold';
            letter-spacing: .07rem;
        }
        
        nav a:visited, nav a:link{
            color: inherit;
            text-decoration: none;
        }
        
        nav a:hover svg{
            fill: #28C481;
        }
        
        /* HERO */
        
        #hero-section{
            height: 30vh;
        }
        
        #hero-section h1{
            margin-top: 10vh;
            font-size: 3rem;
            animation-duration: 2s;
            animation-name: heroEntry;
            padding-right: 20px;
        }

        #plan{
            padding-right: 0;
            transition: padding-right 0.3s;
        }
        
        #plan:hover{
            /*background-color: hotpink;*/
            display: inline-block;
            color: #28C481;
            animation-name: wordHover-1;
            animation-duration: 0.3s;
            font-family: 'roustelregular', sans-serif;
            font-size: 4rem;
            margin-top: -18px;
            margin-bottom: -18px;
            padding-right: 5px;
            vertical-align: text-top;
        }
        
        #design{
            margin-right: 0;
            transition: margin-right 0.3s;
        }
        
        #design:hover{
            font-family: 'marolaregular', sans-serif;
            color: #28C481;
            animation-duration: 0.3s;
            animation-name: wordHover-2;
            padding-top: 9px;
            padding-bottom: 9px;
            font-weight: normal;
            margin-right: -0.5rem;
        }
        
        #develop{
            padding-right: 0;
            transition: padding-right 0.3s;
        }
        
        #develop:hover{
            color: #28C481;
            animation-name: wordHover-3;
            animation-duration: 0.3s;
            font-family: 'argent_pixel_cfitalic', sans-serif;
            padding-top: 9px;
            padding-right: 0.25rem;
            margin-right: -0.25rem;
        }
        
        @keyframes wordHover-1{
            0% {
                color: black;
                font-family: "real-text-semilight", sans-serif;
                font-size: 3rem;
                vertical-align: inherit;
                       }
            
            50%{
                color: white;
                font-family: "real-text-semilight", sans-serif;
                vertical-align: inherit;
                font-size: 3rem;
            }
            
            51%{
                font-family: 'roustelregular';
                font-size: 4rem;
                vertical-align: text-top;
                margin-top: -18px;
                margin-bottom: -18px;   }
            
            100%{
                color: #28C481;         }
        } 
        @keyframes wordHover-2{
            0% {
                color: black;
                font-family: "real-text-semilight", sans-serif;
                font-weight: bold;
                margin-right: 0;
            }
            
            50%{
                color: white;
                font-family: "real-text-semilight", sans-serif;
                font-weight: bold;
                margin-right: 0;
            }
            
            51%{
                font-family: 'marolaregular';
                font-weight: normal;
                padding-top: 9px;
                padding-bottom: 9px;
                margin-right: 0;
            }
            100%{
                color: #28C481;                
                font-weight: normal;
                margin-right: -0.5rem;
            }
        }
        @keyframes wordHover-3{
            0% {
                color: black;
                font-family: "real-text-semilight", sans-serif;
                margin-right: 0px;
                padding-right: 0;
            }
            
            50%{
                color: white;
                font-family: "real-text-semilight", sans-serif;
                margin-right: 0.25rem;
                padding-right: 0;        
            }
            51%{
                margin-right: 0;
                font-family: 'argent_pixel_cfitalic';
                padding-top: 9px;
                padding-bottom: 9px;
                margin-right: 0rem;
                padding-right: 0;        
            }
            100%{
                color: #28C481;
                padding-right: 0.25rem;
                margin-right: -0.25rem;
            }
        }
        
        @keyframes heroEntry{
            0% {    opacity: 0; 
                    line-height:0.1;
                    color: white;
                
                }
            100% {  opacity: 1; 
                    line-height: 1.43;
                    color: black;
                }
        }
        
        /* GALLERY */
        
        #portfolio-gallery{
            align-items: center;
            display: flex;
            flex-direction: row;
            overflow-x:scroll;
            animation: slideshow 13s;
            padding-left: 10px;
        }
        
        .img-box {
            width: 73%;
            height: 25%;
            margin: 1vw;
            padding: 0;
            position: relative;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: calc(100% - 5px);
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: rgb(50, 116, 109,0.7);
            backdrop-filter: blur(5px);
            
        }
        .img-box:hover .overlay {
            opacity: 1;
        }
        .img-box:hover img{
            filter: grayscale(1);
        }
        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        @keyframes slideshow{
            0% {margin-left: 0;}
            5% {margin-left: 0;}
            90% { margin-left: -68vw; }
            100% {margin-left: 0;}
        }
        
        /* SERVICE OFFERINGS*/
        
        .service-offerings{
            max-width: 750px;
            margin-bottom: 70px;
            margin-top: 60px;
                        text-align: justify;

        } 
        .service-offerings h3{
            cursor: pointer;
            font-family: "real-text-book", sans-serif;
            transition: color 0.5s;
            margin-bottom: 10px;
            font-size: 1.5rem;
          }
        .service-offerings h3:hover{
              color: #28C481 ;
              transition: color 0.5s;
          }
        .service-offerings h3 .material-symbols-outlined{
            font-size: 22px;
            margin-left: 5px;
            vertical-align: middle;
            transform: rotate(0deg);
            transition: transform 0.5s;
          }
        .shown {
            max-height: 300px!important;
            opacity: 1;
            animation: fadeIn 0.5s, scaleY 0.5s;
            transition: max-height 0.5s ease-out;
            color: #0C0C0C!important;
            transform-origin:top;
        }    
        .expanded {
            transform: rotate(-180deg)!important;
            transition: transform 0.5s;
        }
        .service-offerings p{
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s, color 0.5s;
            color: white;
            transform-origin:top;
            margin-top: 12px;
            margin-bottom: 26px;
        }
        
        /* CLIENTS */
        
        #clients img{
            /*filter: blur(0.35rem);*/
            transition-duration: 0.3s;
        }
        
        #clients .in-view img{
            filter: blur(0)!important;
            
        }
        
        #clients h2{
            margin-bottom: 5px;
        }
        #client-div{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 107%;
            margin-left: -3.5%;
        }
        #client-div div{
            width: 20%;
            flex-grow: 1;
            padding: 0.5% 3.5%;
            box-sizing: border-box;
        }       
        
        @keyframes fadeIn {
            from {opacity:0;}
            to {opacity:1;}
        }    
        @keyframes grow  {
            from {max-height:0;}
            to {max-height:300px;}
        }      
        @keyframes scaleY {
              from {transform: scaleY(0)}
              to {transform: scaleY(1)}
          }
        
        /* ABOUT */
        
        #about{
            background-color: #e9e9ec;
            width: 100vw;
            max-width: none;
        }
        
        #about div{
            max-width: 750px;
            margin-right: auto;
            margin-left: auto;
            padding-top: 13px;
            padding-bottom: 20px;
            padding-right: 350px;
            text-align: justify;
            font-size: 1.35rem;
        }
                
        footer{
            padding-top: 30px;
            padding-bottom: 30px;
            
        }

        footer div{
            display: inline-block;
            width: 45%;
        }

        footer a:link, footer a:visited{
            text-decoration: inherit;
            color: inherit;
        }
        
        footer #h{
            display: inline-block;
            height: auto;
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        footer #text{
            font-size: 1.1rem;
            display: inline-block;
            max-width: 390px;
        }

        #contact > span{
            font-size: 1.5rem;
            display: block;
            font-weight: bold;
            color: white;
        }
        #contact span a{
            transition: color 0.3s;
            color: white;
        }

        #contact span a:hover{
            color: #28C481;
        }    

        .case-page{
            text-align: justify;
        }

        .case-page h1{
            font-size:2.2rem;
            margin-top: 2px;
        }

        .case-page h2{
            color:black;
            margin-bottom: 0px;
            font-size: 1.5rem;
        }

        .case-page h3{
            font-size:1.5rem;
            color: #AEB0BA;
            margin-bottom: 0px;
            margin-top: 60px;
        }

        .case-page p{
            max-width: 750px;
            margin-top: 8px;
        }
        
        .case-page b{
            font-family: 'real-head-demibold';
        }

        #torin-solutions span img{
            max-width:200px; 
            box-shadow: 0px 0px 0.3vh 0.3vh rgba(100, 100, 100,0.3); 
            float:left;
            margin-top: 10px;
            margin-right: 17px;
        }

        .case-hero{
            max-width:100vw;
            width:100vw;
        }

        .case-hero div{
            max-width: 1100px;
            margin-right: auto;
            margin-left: auto;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        #highq-quote{
            font-family: "Real Regular Italic";
            text-align: center;
            margin-bottom: 0px;
            font-size:1.5rem;
        }

        #highq-quote span{
            max-width: 550px;
            display: block;
            margin-right: auto;
            margin-left: auto;
        }
        
        .highQ-pics-bottom{
            max-width: 100%!important;
        }
        .highQ-pics-bottom img:nth-child(1){
            max-width:36%;
            margin-right: 17px;
        }
        .highQ-pics-bottom img:nth-child(2){
            max-width:50%;
        }

/* M O B I L E   S T Y L E */
        @media only screen and (max-width: 1100px) {
        
            #hero-section{
                height: inherit;    
            }
            
            #hero-section h1, h2{
                font-family: 'real-text-book', sans-serif;
            }
            
            #hero-section h1{
                font-size: 4.5rem;
                margin-top: 3vh;
            }
            
            .service-offerings p{
                font-size: 1.5rem;
                width: 94%;
            }
            
            #about div{
                padding-right: 0;
                max-width: 100%;
                font-size: 1.5rem;
            }
            #about{
                width: 94vw;
            }    
                
            #clients, #about, nav, #hero-section, #offerings-section, .case-page{
                padding: 3vw;
            }
            
            #clients img{
                filter: blur(0);
            }
            #client-div div{
                width: 25%;
                max-width: 25%;
            }
            
            footer section{
                padding: 3vw;
                padding-top: 0;
            }
            
            footer section div{
                width: 100%;
            }
            
            #contact{
                margin-bottom: 40px;
            }
            
            footer #text{
                max-width: 100%;
            }
}

        @media only screen and (max-width: 640px) {
            #client-div div{
                width: 33%;
                max-width: 33%;
            }
}