body {
    display:block;
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    background:#f7f5f5;
}

body, h1, h2, h3, .feature, .stm_button {
   font-family: 'Lato', sans-serif;
}

.a_container {
    padding:0;
    margin:0;
    align-items: center;
    display: flex;
    justify-content: center;
    width:100%;
    height:100%;
}

.r_container {
    height:min(50vw, 100vh);
    width:min(50vw, 100vh);
    max-width: 2048px;
    max-height: 1024px;
}

.panel {
    display: inline-block;
    height:min(50vw, 100vh);
    width:min(50vw, 100vh);
    float:left;
    padding:0;
    margin:0;
}

.layout {
  height:min(50vw, 100vh);
  flex-direction: column;
  justify-content: space-between;
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.logo, .feature, .offsite {
  margin-left:10%;
  width:90%;
  display:inline-block;
}

.logo {
    margin-top:50px;
    width:min(203px, 30vw, 15vh);
    height:min(96px, 14.187vw, 7.094vh);
    background-image:url("../img/stm-logo.png");
    background-repeat: no-repeat;
    background-size:contain;
}

.logo span {
    display: none
}

.offsite {
    margin-bottom:25px;
}

.feature {
   font-size:min(131px, 6vw, 12vh); 
   font-weight:900;
   margin-bottom:10%;
}

#slideshow {
   width:90%;
   height:90%;
   margin:5%;
   justify-content: center;
}

#slideshow div {
   height:100%;   
   width:100%;
   align-items: center;
   display: block;
   font-family: 'Lato', sans-serif;
   font-weight:900;
   font-size:min(30px, 5vw, 3vh);
   text-align:center;
}
#slideshow div img {
   height:100%;   
   width:100%;
}


.print_design {
    color:#c83192;
}

.digital_design {
    color:#e73e50;
}

.button {
   float:left;
   font-size:min(20px, 4.5vw, 2.25vh);
   padding:3px 0;
   border: 4px solid;
   width:150px;
   text-align:center;
   margin-right:20px;
   margin-top:20px
}

.button a {
   font-weight:900;
   text-decoration:none;
   text-transform:lowercase;
}

.folio {
   color:#00abc7;
   border-color:#00abc7;
}

.folio a {
   color:#00abc7;
}

.folio a:hover {
    color:#2c3585;
}

.contact {
  color:#2c3585;
  border-color:#2c3585;
}

.contact a {
   color:#2c3585;
}
.contact a:hover {
   color:#00abc7;
}

.offsite div {
    height:26px;
    float:left;
    margin-right:8px;
}

#facebook {
    width:13px;
    background-image:url("../img/stm-facebook.png");
    background-repeat: no-repeat;
    background-size:contain;
}
  
#instagram {
    width:27px;
    background-image:url("../img/stm-instagram.png");
    background-repeat: no-repeat;
    background-size:contain;
}
.offsite div a {
    width:100%;
    height:100%;
    display: inline-block;
}
.offsite div a span {
    display:none;
}
#copyright {
   font-size:10px;
   line-height:26px;
}

/* Modal */

div.modal h2 {
   font-family: 'Lato', sans-serif;
   font-weight:900;
   font-size:min(30px, 5vw, 3vh);
}

div.modal h3 {
   font-family: 'Lato', sans-serif;
   font-weight:900;
   font-size:min(24px, 4vw, 2.6vh);
}

div.modal p {
   font-family: 'Lato', sans-serif;
   font-size:min(24px, 4vw, 2.6vh);
}

div.modal p a {
   text-decoration:none;
   text-transform:lowercase;
   color:#000000;
}

div.modal p a:hover {
   text-decoration:none;
   text-transform:lowercase;
   color:#333333;
}

/* Edge */
@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}
/* Firefox */

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}
/* IE effing support */

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up { 
        property: value; 
    }
}

/* IE effing support */

@supports not (display: flex) {

  body {
     background:blue;
  }
  
  .r_container {
    height:50%;
    width:100%;
    max-height:
  }

  .panel {
     background:blue;
    height: vm;
    width: vm;
  }

  .layout {
    height:min(50vw, 100vh);
    flex-direction: column;
    justify-content: space-between;
  
  }

  .logo, .feature, .offsite {
    margin-left:10%;
    width:90%;
    display:inline-block;
  }

  .logo {
    width:203px;
    height:96px;
  }

  .feature {
   font-size:131px; 
  }
} 
/* Responsive */

@media screen and (orientation:portrait) {

   body {
       height:auto;
   }

  .a_container {
    width:100%;
    height:auto;
    align-items: center;
    display: flex;
    justify-content: flex-start;
  }

  .r_container {
      width:100vw;
      height:200vw;
  }

  .logo {
    display: block;
    clear: both;
    width:min(203px, 30vw);
    height:min(96px, 14.188vw);
  }

  .container {
    height:200vw;
    width:100vw;
  }
  
  .panel {
    margin:0;
    width:100%;
    height:auto;
  }
  
  .layout {
      height: auto;
  }
  
  .feature {
   font-size:min(131px, 12vw); 
  }
}