.alert {
            padding: 20px;
            background-color: #f44336;
            color: white;
            opacity: 0;
            transition: opacity 0.6s;
            margin-top: 5px;
            visibility: hidden;
        }

        .success {background-color: #4CAF50;}
        .info {background-color: #2196F3;}
        .warning {background-color: #ff9800;}

        nav .logotype{
            width: 130px;
            height: 100%;
            max-height: none;
        }

        @media only screen and (max-width: 580px) {
            nav .logotype{
                width: 90px;
            }
        }

        /* =========================
           OUR PRINCIPLES (SCOPED)
        ========================= */

        .principles-section {
          background: #050505;
          color: #fff;
          padding: 120px 0;
          width: 100%;
        }

        /* make it feel wider like premium sites */
        .principles-section .container {
          max-width: 1300px;
        }

        /* LEFT SIDE */
        .principles-section .title--overhead {
          font-size: 12px;
          letter-spacing: 2px;
          color: rgba(255,255,255,0.5);
          margin-bottom: 10px;
        }

        /* "At our core" */
        .principles-section .title--h3 {
          font-size: 34px;
          font-weight: 500;
          color: #fff;
        }

        /* RIGHT TEXT */
        .principles-intro {
          font-size: 18px;
          line-height: 1.7;
          color: rgba(255,255,255,0.75);
          max-width: 500px;
        }

        /* GRID */
        .principles-grid {
          margin-top: 80px;
        }

        /* CARDS */
        .principles-card {
          padding: 40px 30px;
          border-top: 1px solid rgba(255,255,255,0.08);
          transition: all 0.3s ease;
        }

        /* vertical grid lines */
        .principles-card:nth-child(3n+2),
        .principles-card:nth-child(3n+3) {
          border-left: 1px solid rgba(255,255,255,0.08);
        }

        /* ICON */
        .principles-card i {
          font-size: 20px;
          margin-bottom: 18px;
          display: inline-block;
          color: rgba(255,255,255,0.9);
        }

        /* TITLE */
        .principles-card h5 {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 8px;
        }

        /* TEXT */
        .principles-card p {
          font-size: 14px;
          line-height: 1.7;
          color: rgba(255,255,255,0.6);
          max-width: 260px;
        }

        /* HOVER EFFECT */
        .principles-card:hover i {
          color: #ff4d00;
        }

        .principles-card:hover {
          transform: translateY(-3px);
        }

        /* MOBILE FIX */
        @media (max-width: 768px) {

          .principles-section {
            padding: 80px 20px;
          }

          .principles-card {
            border-left: none !important;
            padding: 25px 0;
          }

          .principles-intro {
            margin-top: 20px;
          }

          .principles-card p {
            max-width: 100%;
          }
        }