/*css comment example*/

/* do not add to the * style */
* {
     margin:0;
     padding:0;
     box-sizing: border-box; /* this will make padding and border included in widths- this is best practice for responsive layouts*/
}

body {
     background-color: white;
     font-family: 'Helvetica', sans-serif;
     font-size: 1em;
}

#home {
     background-color: transparent;
  background: url(images/backgroundformain.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

img {
     max-width: 100%;
     display: block;
     } /* DO NOT ADD STYLE TO THIS */



a:link {
     color: black;
     text-decoration: none;
}

a:visited {
     color: black;
}

a:hover {
     color: #52847B;

}

a:active {
     color: #52847B;
}

.email p a:link {
     color: black;
}

.email p a:visited {
     color: black;
}

.email p a:hover {
     color: #52847B;
}

.email div p a:active {
     color: black;
}

header {
     background-color: white;
}

.logocenter {
     display: flex;
     justify-content: center;
     padding-top: 2em;
}


h1 {
     font-family: "Archivo", serif;
     color: black;
     text-align: center;
     width: 100%;
     padding: 1em;
     font-size: 4em;
     line-height: 60px;

}

.homeboxcolum1 h1 {
     font-family: "Oswald", serif;
}

h2 {
     font-family: "Oswald", serif;
}

p {
     font-family: "Archivo", serif;
  font-optical-sizing: auto;
  font-weight: <200>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

a {
     font-family: "Archivo", serif;
}


.worklink {
     font-family: 'Helvetica', sans-serif;
     font-size: 2.5em;
     list-style-type: none;
     padding-top: 1em;
     padding-left: 25px;
     padding-bottom: 50px;
     text-align: left;
}


 .projects {

      font-size: 2em;
      text-align: left;
      padding-left: .25em;
      padding-bottom: .5em;
      margin-top: 1em;
      
}

.styleguidepdf {

      font-size: 1.5em;
      text-align: left;
      margin-top: .5em;
      padding-left: .5em;
      padding-bottom: .5em;
      
}

.about {
     font-size: 4em;
     text-align: left;
     padding-bottom: .5em;
     padding-top: .5em;
     
}

.aboutpara {
     font-size: 1.5em;
}

.contact {
     font-size: 4em;
     text-align: left;
     padding-bottom: .5em;
     padding-top: .5em;
}


.workheaders {
     font-size: 4em;
     text-align: center;
     padding: 1em;
}

nav ul {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     list-style-type: none;
}

nav li a {
     display: block;
     text-decoration: none;
     background-color: white;
     padding: .6em 1em;
     font-size: 1.5em;
}



nav ul li {
     flex: 1 0 auto;
     text-align: center;
}



.buttonfix {
     text-align: left;
     padding-left: .5em;
     padding-right: .5em;
     padding-top: 2em;
}

.button {
     background-color: black;
       border: none;
       color: white;
       padding: 20px 34px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 20px;
       margin: 4px 2px;
       cursor: pointer;
}


.center {
     text-align: center;
}

.workparagraph {
     font-size: 1.25em;
     text-align: left;
     padding-left: .5em;
     padding-right: .5em;
     padding-top: .25em;
}

.emailparagraph {
     font-size: 1.5em;
     text-align: left;
     padding-left: .5em;
     padding-right: .5em;
     padding-top: .25em;
}

.anatomyworkparagraph {
     font-size: 1em;
     text-align: left;
     padding-left: .5em;
     padding-right: .5em;
     padding-top: .25em;
}

.homebox {
     color: #000;
     background-color: #fff;
     margin: 8px;
     box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
.homeboxtext {
     padding: 0.01em 8px;
     background-color: white;
     content: "";
     display: table;
     clear: both;
     width: 100%;
}


.homeboxcolum1 {  
     float: left;
   
}

.homeboxcolum1 h1 {
     font-size: 1em;
     padding: 0em;
     padding-left: 1em;
     margin-top: .25em;

}
.homeboxcolum2 {
     
     float: right;
     padding: 1em;
    margin-top: .15em;
    margin-right: .25em;
    
}

.button {
     padding: 6px 12px;
     border: 2px solid #ccc!important;
     border: none;
     display: inline-block;
     padding: 4px 8px;
     vertical-align: middle;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     background-color: inherit;
     text-align: center;
     cursor: pointer;
     white-space: nowrap;
     font-size: .5em;
     

}

.button:hover {
     background-color: black;
     color: white;
}

.flex1 {
     margin-bottom: 11px;
}

hr {
     border: 0;
     border-top: 1px solid white;
     margin: 10px 0;
}

#backtop {
     position: fixed;
    left:auto;right: 20px;top:auto;bottom: 20px;
     outline: none;
    overflow:hidden;
    color:#fff;
    text-align:center;
    background-color:rgba(49,79,96,0.84);
    height:40px;
    width:40px;
    line-height:40px;
    font-size:14px;
    border-radius:2px;
    cursor:pointer;
    transition:all 0.3s linear;
    z-index:999999;

    opacity:1;
    display:none;
}

.bottomspace {
     padding-bottom: 100px;
}

#backtop:hover {
    background-color:#27CFC3;
}
#backtop.mcOut {
    opacity:0;
}



/*==========  Mobile First Method  ==========*/
/* all your CSS before your media queries (css above here) will style your site when the viewport is less than your first break point (below) - in this example that means displays that are 767px wide and smaller */
/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 815px) {

.homeboxcolum1 h1 {
     font-size: 2em;
     margin-top: 5px;
     padding: 1em;
     
}

.homeboxcolum2 {
     width: 15%;
     float: right;
     padding-right: .3em;
     margin-top: 1.90em;
     margin-right: 3em;
    
    
}

.button {
     padding: 8px 18px;
     border: 2px solid #ccc!important;
     border: none;
     display: inline-block;
     padding: 6px 12px;
     vertical-align: middle;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     background-color: inherit;
     text-align: center;
     cursor: pointer;
     white-space: nowrap;
     font-size: .75em;
    
}


.float {
     float: left;
     width: 60%;
}

.float2 {
     float: right;
     width: 40%;
}


}

/* Tablets and larger - typical break point to use */
 @media only screen and (min-width: 816px) {

 #wrap {
      max-width: 1500px;
      margin: 0 auto;
}

body {
     font-size: 1em;
}

header {
     background-color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.logocenter {
     padding: 1em;
     margin-left: 1em;
     min-width: 130px;
}

.worklink a {
  box-shadow: inset 0 0 0 0 black;
  color: black;
  margin: 0 -.50rem;
  padding: 0 .50rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.worklink a:hover {
  box-shadow: inset 2000px 0 0 0 black;
  color: white;
}

h1 {
     text-align: left;
}

 .projects {
      text-align: left;
      font-size: 4em;
      padding-bottom: .25em;
      margin-top: .50em;
}

.styleguidepdf {
      text-align: left;
      font-size: 2em;
      padding-top: .25em;
      padding-bottom: 1em;
}

.about {
     font-size: 3em;
     text-align: center;
}

.aboutpara {
     font-size: 2em;
}


.contact {
     font-size: 4em;
     text-align: left;
}

.workheaders {
     font-size: 6em;
     text-align: center;
     margin-top: .5em;
     padding: 0em;
     margin-bottom: .5em;

}

nav, h1 {
     flex-grow: 1;
}



nav ul {
     flex-direction: row;
}

nav li a {
     font-size: 2em;
}

.grid {
     display: flex;
     flex-wrap: wrap;

}

.box-half {
     flex-grow: 1;
     flex-basis: 33.333333%;
     background-color: white;
     padding: 2em;
}


.two-across {
     width:50%;
     float:left;
     padding: 4em;
}

.two-acrosscontact {
     width:100%;
     float:left;
     padding: 4em;
}

.email {
     text-align: left;
     font-size: 3em;
}

.imagecenter {
     display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

.workparagraph {

     font-size: 2em;
     text-align: left;
     padding-top: .25em;
}

.aboutpara {
     font-size: 2em;
}

.anatomyworkparagraph {
     font-size: 2em;
     text-align: left;
     padding-top: .25em;
    
}

.emailparagraph {
     font-size: 2.5em;
     text-align: left;
     padding-top: .25em;
}


.worklink {
     font-family: 'Helvetica', sans-serif;
     font-size: 7em;
     padding-left: 25px;
     list-style-type: none;
     padding-top: .25em;
     text-align: left;
}

.buttonfix {
     text-align: left;
     padding-left: .75em;
     padding-right: .5em;
     padding-top: 2em;
}

.homeboxcolum1 h1 {
     font-size: 4em;
     margin-top: 5px;
     
}

.homebox {
     color: #000;
     background-color: #fff;
     margin: 16px;
     box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
}
.homeboxtext {
     padding: 0.01em 16px;
     background-color: white;
     content: "";
     display: table;
     clear: both;
     width: 100%;
}


.homeboxcolum1 {
     width: 80%;
     float: left;
     padding: 4em;
     padding-left: 0em;
   
}

.homeboxcolum2 {
     width: 15%;
     float: right;
     padding-right: .3em;
     margin-top: 3.8em;
     margin-right: 2em;
    
    
}

.button {
     padding: 12px 24px;
     border: 2px solid #ccc!important;
     border: none;
     display: inline-block;
     padding: 8px 16px;
     vertical-align: middle;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     background-color: inherit;
     text-align: center;
     cursor: pointer;
     white-space: nowrap;
     font-size: 1.5em;
     
     
}

.button:hover {
     background-color: black;
     color: white;
}


hr {
     border: 0;
     border-top: 1px solid white;
     margin: 20px 0;
}

.flexcontainer {
     display: flex;
     flex-wrap: wrap;
}

.flex1 {
     flex: 50%;
}

.flex2 {
     flex: 50%;
     text-align: right;
}

.allforone {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
     height: 50%;

}

.heads {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     height: 100%;
     padding: 2em;
     
}

.heads .headsimage {
  width: 50%;
}

.heads a img {
 width: calc(100% - (20px * 2));
 margin: 20px;
}

}