/* BOX LAYOUT */
html, body {
    padding:0;
    margin:0;
    height:100%;
    overflow: hidden;
    background:#f7f5f5;
}

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

.r_container {
    width: 2400px;
    height: 1200px;
}

.panel {
    display: inline-block;
    height:1200px;
    width:1200px;
    float:left;
    padding:0;
    margin:0;
}

.layout {
  height:1200px;
  width:1200px;
  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+ */

}

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

.layout > div {
  display:inline-block;
  margin-left:10%;
}

/* logo panel */

.logo {
    margin-top:50px;
    align:left;
}

/* highlight text panel */

.feature {
   font-size:90px; 
   font-weight:900;
   padding-bottom:10%;
}

.print_design {
    color:#c83192;
}

.digital_design {
    color:#e73e50;
}

.button {
   float:left;
   font-size:26px;
   padding:5px 0;
   border: 5px solid;
   width:190px;
   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;
}

/* bottom panel */

.offsite {
    margin-bottom:50px;
}

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

#facebook {
    width:23px;
    background-image:url("../img/stm-facebook.png");
    background-repeat: no-repeat;
    background-size:contain;
}
  
#instagram {
    width:46px;
    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:12px;
   line-height:26px;
}

/* SLIDESHOW */
#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%;
}

/* 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:#e73e50;
   font-weight: bold;
}

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

/* Responsive */

@media screen AND (orientation:portrait) {

   html, body {
       height:auto;
       overflow: auto;
   }

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

  .r_container {
      height:auto;
      width:100%;
  }

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

  .container {
    width:100%;
  }
  
  .panel {
    margin:0;
    width:100%;
//    height:auto;
  }
  
  .layout {
//      height: auto;
  }

  .feature {
   font-size:min(131px, 12vw); 
  }
}




// TODO this not used

.modal a.close-modal[class*="icon-"] {
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  background: #900;
  border: 2px solid #fff;
  -webkit-border-radius:  26px;
  -moz-border-radius:     26px;
  -o-border-radius:       26px;
  -ms-border-radius:      26px;
  -moz-box-shadow:    1px 1px 5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  box-shadow:         1px 1px 5px rgba(0,0,0,0.5);
}