/* WEBSITE FONTS */

@font-face
{
font-family: projectfont;
src: url(Gotham-Bold.ttf);
}

@font-face
{
font-family: Mediumfont;
src: url(Gotham-Medium.otf);
}

@font-face
{
font-family: namefont;
src: url(Starboard.otf);
}

@font-face
{
font-family: Regularfont;
src: url(Gotham-Book.otf);
}

/* UNIVERAL TEXT STYLES */

/* PROJECT NAME HEADER */
h2   {color: white;
    font-family: "Namefont";
    font-size: 60px;
    line-height: 50px;
    letter-spacing: .2em;
    margin-top: 30px;
    margin-bottom: 10px;

}

/* BODY FONT */
p    {color: white;
      font-family: "Regularfont";
      font-size: 16px;
      line-height: 22px;
      letter-spacing: .04em;
      text-align: left;
}

h4    {color: white;
      font-family: "Regularfont";
      font-size: 18px;
      line-height: 25px;
      letter-spacing: .2em;
}

h5 {color: white;
    font-family: "namefont";
    font-size: 30px;
    letter-spacing: .2em;
    text-align: left;
  

}

h6 {color: white;
    font-family: "namefont";
    font-size: 15px;
    line-height: -15px;
    letter-spacing: .2em;
    margin-top-top: -70px;
  

}

h7    {color: white;
      font-family: "Regularfont";
      font-size: 16px;
      line-height: 22px;
      letter-spacing: .04em;
      text-align: left;
}



/* NAV HEADER NAME */
h1 {color: white;
    font-family: "namefont";
    line-height: auto;
    font-size: 40px;
    letter-spacing: .4em;
    text-align: left;
    text-decoration: none;

}

/* NAV HEADER LINKS */
h3 {color: white;
    font-family: "namefont";
    font-size: 17px;
    letter-spacing: .2em;
    text-align: left;
     text-decoration: none;
 {width: 100%}

}

/*  LINKS STYLES */
a.class1 {
  transition: all 0.3s ease-out;
color:#D3D3D3;
text-decoration:none;
}

a.class2 {
  transition: all 0.3s ease-out;
color:#D3D3D3;
text-decoration: underline;
}

a.class3 {
  transition: all 0.3s ease-out;
color:white;
text-align: right;
letter-spacing: 2px;
text-decoration: none;
font-family: "namefont";
}

a.class4 {
  transition: all 0.3s ease-out;
text-decoration: none;
}


a.class2:hover {
  transition: all 0.3s ease-out;
color:#D92028;
}

a:hover {color:#D92028;
text-decoration:none;
}

a img:hover{
transition: all 0.5s ease-in-out;
opacity: .5;
border:none;
overflow: hidden; 
    
}


/* MASTER FRAME WEBSITE */

body {
  background-color: #262626;
  margin: 0px;
}

div.bigboxcenter {
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
    max-width: 1000px;
    position: fixed;
    left: 50%;
    margin-left: -500px; /* Half the width */

}

div.bigbox {
    min-width: 500px;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
    padding-left: 25px;
    padding-right: 25px;
        overflow-x: hidden;
}
div.bigbox img {
    width: 95%;
    padding-right: 20px;
}

.newspaper {
  /* Old Chrome, Safari and Opera */
  -webkit-column-count: 2;
  -webkit-column-gap: 10px;
    
 /* Old Firefox */
  -moz-column-count: 2;
  -moz-column-gap: 10px;
  
 /* Standard syntax */
  column-count: 2;
  column-gap: 10px;
}

h2 {
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}

/* HEADER FRAMES */
div.headerbox {
    color: white;
     font-family: "namefont";
     letter-spacing: .2em;
    background-image: url("logo-2.png");
  background-repeat: no-repeat, repeat;
    background-color: black;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 100px;
    max-width:100%;
    height:auto;
    position: sticky; top: 0;
    z-index: 100;
    overflow-x: hidden;
}

div.footerbox {
    background-color: black;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    max-width:100%;
    height:auto;
  }

/* DESIGN HOMEPAGE */
/* DESIGN ROLLOVER HEADER IMAGE */
div.projectbox {
    color: white;
    padding: 20px;
    max-width:100%;
    height:auto;
    position: relative;
    display:block;

}

div.projectbox img {
width:100% !important;
    display:block;

}

.projectheader {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #262626;
}

.projectheader:hover .overlay {
  opacity: .90;
}

.projectname {
  color:#D92028;
  font-family: "namefont";
  font-size: 40px;
  letter-spacing: .2em;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/* DESIGN PROJECT PAGE */

/* SUB FRAMES */
div.smallbox {
    outline-width: 1px;
    outline-color: black;
    color: white;
    padding: 25px;
    max-width:90%;
    height:auto;
    position: relative;
    display:block;

}

div.fullheader {
    color: white;
    padding-bottom: 40px;
    width:100%;
    height:auto;
    position: relative;
    display:block;
    overflow-x: hidden;
}


div.textbox {
    color: white;
    max-width:700px;
    height:auto;
    position: relative;
    display:block;


}



div.smallbox img {
width:100% !important;
    height:100% !important;
    display:block;
    margin: 10px auto;

}

.flex {
  display:flex;
  }
.flex div {
  flex:1;
  margin:2px; /* need some space ?*/
  }
  img {
    width: 100%
  }