<style> 

/*----------FONT IMPORT----------*/


        @font-face {
            font-family: 'CHARLEY';
            font-style: normal;
            font-weight: normal;
            src: local('/charley-webfont/CHARLEY Regular'), url('/charley-webfont/Charley-PK4gd.woff') format('woff');
        }

/*----------GENERAL----------*/

        a {
            text-decoration: none;
            transition:0.4s;
        }

        a:hover {
            opacity:0.6;
        }


        h1 {  
            font-family:'CHARLEY';
            font-weight:normal;
        }

        h2 {
           text-transform: uppercase;
            font-style: italic;
        }


        .grad-break {
            width:100%;
            height:10px;
            margin-top:-10px;
            z-index:9;
            background: #C270AA;
            background: -webkit-linear-gradient(90deg,rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 30%, rgba(194, 112, 170, 1) 67%, rgba(67, 49, 115, 1) 100%);
            background: -moz-linear-gradient(90deg,rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 30%, rgba(194, 112, 170, 1) 67%, rgba(67, 49, 115, 1) 100%);
            background: linear-gradient(90deg,rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 30%, rgba(194, 112, 170, 1) 67%, rgba(67, 49, 115, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(
              startColorstr="#C270AA",
              endColorstr="#433173",
              GradientType=1);
        }
           
           .page-block {
               width:100%;
                background: #C270AA;
                background: -webkit-linear-gradient(144deg, rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 50%, rgba(67, 49, 115, 1) 100%);
                background: -moz-linear-gradient(144deg, rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 50%, rgba(67, 49, 115, 1) 100%);
                background: linear-gradient(144deg, rgba(194, 112, 170, 1) 0%, rgba(54, 44, 133, 1) 50%, rgba(67, 49, 115, 1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#C270AA", endColorstr="#433173", GradientType=0);
               position: relative;
               box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
               border-bottom: solid 10px #C270AA;
               
           }
           
            .page-block-bg {
                width:100%;
                height:100%;
                position:absolute;
            }
           
           .page-block-bg.radial {
                background: #433173;
                background: radial-gradient(circle,rgba(67, 49, 115, 0) 0%, rgba(15, 15, 31, 1) 99%);
               z-index:1;
           }
           
           .page-block-inner {
               width:90%;
               max-width:1000px;
               margin:0 auto 4rem;
               color:white;
                position:relative;
               z-index:2;
               padding:4rem;

           }
           
        .block-title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;
        }

        .block-title::before,
        .block-title::after {
          content: "";
          flex: 1;
          height: 4px;
          background-color: rgba(255,255,255,0.8);
          max-width: 300px;
        }

        .block-title h1 {
          font-size: 40px;
            color:white;
        }


/*----------NAVBAR----------*/

            .nav-bar {
                background: transparent;
                background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
                height:80px;
                position:fixed;
                width:100%;
                top:0px;
                z-index:10;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-bottom: 40px;
            }

            .nav-wrap {
                width: calc(100% - 3rem);
                margin:0 auto;
                display:flex;
                align-items: center;
            }

            .nav-bar img {
                width:180px;
                display: block;
                margin-right:1rem;
            }
            
            .nav-bar span {
                color: white;
                text-transform: uppercase;
                transition: 0.5s;
                text-decoration: none;
                font-size: 1em;
                font-weight: 300;
                margin: 3rem 2rem;
                text-shadow: 0 0 5px rgba(0,0,0,0.6);
            }


            @media only screen and (max-width: 600px) {  
                
                .nav-bar {
                    width:100%;
                    height:70px;
                    position:fixed;
                    bottom:0px;
                    top:auto;
                    background-color:black;
                    display:flex;
                    border-top:4px solid white;
                    box-shadow:0px -3px 7px rgba(0,0,0,0.3);
                    z-index:10;
                    padding-bottom: 12px;
                }

                .nav-wrap {
                    width: 90%;
                    margin:0 auto;
                    justify-content: center;
                }


                .nav-bar span {
                    display: none;
                    font-size:1em;
                    margin: 3rem 1rem;
                }
                

                
            }
            

/*----------FOOTER----------*/

            
            .footer {
                display:flex;
                align-items:center;
                width:100%;
                background-color:rgba(0,0,0,0.8);
                height:400px;
                color:white;
                justify-content: space-around;
                position: relative;
                z-index: 10000;
            }

            .footer > img {
                width:60%;
                max-width:230px;
                display:block;
                height:auto;
            }
            
            a.footer-link {
                text-align:left;
                display:flex;
                justify-content: flex-start;
                align-items: center;
                color:white;
            }

            .footer-link img {
                width:30px;
                height:30px;
                margin-right:1rem;
            }

            @media only screen and (max-width: 600px) {  
                
                .footer {
                    flex-direction: column;
                    padding-bottom: 6rem;
                }
                
                a.footer-link{
                    order:1;
                }
            }


</style>
