/* Meaningful Purposeful Impactful Architecture Website */
:root {
    --prime-orange: #DB582E;
    --jetset-black: #1D1511;
    --paper-white: #fff;
    --acumen-blue: #003B4A;
    --landmark-yellow: #F2A900;
    --resolute-purple: #6A3465;
    --gold-medal: #CDB486;
    --grey: #1D151190;
    --po-m: #DB582E60;
    --po-l: #DB582E10;
    --jb-m: #1D151160;
    --jb-l: #1D151120;
}

html, body {
    margin:0;
    padding:0;
}

body {
    background-color:var(--jetset-black);
    color: var(--paper-white);
    font-family: widescreen, sans-serif;
    font-size: 18px;
    font-weight:300;
    line-height: 1.5;
}

h3 {
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom:30px;
}

#tagline-medium polygon,
#tagline-medium path,
#tagline-medium rect {
    fill:var(--paper-white);
}


.container  {
    width:80%;
    margin:0 auto;
}

#m-icon {
    width:50%;
    padding:10vw 0;
}

#mpi-logo {
    width:61%;
    padding:10vw 0;
}

#meticulous_m polygon {
    fill:var(--prime-orange);
}


a {
    color:var(--prime-orange);
    text-decoration:none;
}

a:hover {
    color:var(--gold-medal);
}

a:visited {
    color:var(--landmark-yellow);
}

@media only screen and (min-width:900px) {
    .container {
        width:50%;
        max-width:800px;
    }

    #m-icon {
        margin:0 auto;
        width:500px;
    }

    #mpi-logo {
        max-width: 640px;
    }
}


@keyframes slideInFromLeft {
    0% {
      transform: translateX(-2.5%);
    }
    90% {
      transform: translateX(2.5%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  #mpi-logo {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-in-out 0s 1 slideInFromLeft;
  }