/* 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, figure {
    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 {
    font-family: 'widescreen-ex', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    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;
    }
}

.photos img,
.photos figure img {
    width:100%;
    height:auto;
}

figcaption {
    display: block;
    font-family: 'widescreen-ex', sans-serif;
    color:var(--paper-white);
    letter-spacing: 4.5px;
    line-height: 125%;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    padding-top:15px;
}

figcaption span {
    
    display: block;
    font-weight:400;
    font-size:.75rem;
}

.photos figure {
    margin-bottom:10vw;
}


@keyframes slideInFromLeft {
    0% {
        transform: translate3d(-100px,0,0);
      opacity: 0;
    }
    100% {
        transform: translate3d(0,0,0);
        opacity:1;
    }
  }
  
  #m-icon {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 3s ease 0s 1 slideInFromLeft;
  }