/* main body*/
html, body{
    display: block;
    font-family: 'Montserrat', sans-serif;
    background-color: whitesmoke;
    box-sizing: border-box;

}
portfolio-title, .portfolio-title:visited {
    color: black;
}

/* Dropdown menu*/

.dropbtn {
   background-color: whitesmoke;
    color:  #3399ff;
    border: 0;
    display: block;
    text-align: center;
    font-size: 15px;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    float: left;
    display: block;
    text-align: center;
    margin-top: -0.14em;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 60px;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 10px;
    text-decoration: none;
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: orange;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {}


#wrapper{
    margin-bottom: -50px;
    margin: 0 auto 0 auto;
    max-width: 44em;
    
}

#header{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    text-align: center;
    margin-top: 0%;

}



h1{
    margin-bottom: 10px;
}

h2{
    font-size: 17px;
    margin-top: 15px;
}

h3 {
    font-size: 15px;
    text-align: center;
}


a {
    color: orange;
    text-decoration: none
}

a:hover {
    color: dimgray;
    border-bottom: 1px;
    text-decoration-line: underline;
}

/* navigation bar*/

ul li {
    list-style-type: none;
    font-size: 15px;
}

#header ul { 
  display: inline-block;
    margin: 0 auto 0 auto;   
 padding: 0;
  
}

#header ul li{
    float: left;
    margin: 0;
    padding: 2em
}

#header ul li a dropdown {
    font-size: 15px;
    line-height: 15px;
    display: block;
    text-align: center;
    margin-bottom: 35px;
}

img {
    margin: 3px;
    padding: 3px;
    border: 0px solid #eeeeee;
    max-width: 90% 
}

/* footer*/

footer {
    background-color: whitesmoke;
    border-top: 0.010em solid lightgrey;
    bottom: 0; /* !important helps maintain set height*/
    color: #000;   
    height: 3em; /* !important - must be < = body margin-bottom*/
    width: 100%;
    position: fixed;
    
 
}

footer a {
    padding: .20em;
    text-align: center;
}

.push {
  height: 50px;
}

img {
    margin: 3px;
    padding: 3px;
    border: 0px solid #eeeeee;
    width: 100%;
    height: auto;
    max-width: 60%;
}

.footer-col-3 {
    width: -webkit-calc(40% - (30px / 2));
    width: calc(40% - (30px / 2))
}

.footer-content {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 1px;

}

.social-media-list {
    list-style: none;
    margin-left: 0;
    width: 1.5em;
    height: 3em;
}

/* portfolio page */

#table {
    font-family: "Helvetica Neue";
    font-size: 115%;
    overflow: auto;
    width: 100%;
}

th {
    background-color: orange;
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
}

td {
    padding: 20px 30px;
}


table {
    width: 100%;
    margin-bottom: 20px;
}

table, th, td {
    border: 1px solid black;
}

#wrapper table {
    width: 100%;
}

/* Portfolio Gallery*/
 #gallerywrapper {
     width:640px;
     height:450px;
     margin:0 auto;
     position:relative;
     font-family:verdana, arial, sans-serif;
 } 

 #gallerywrapper #gallery {
     position:absolute;
     left:0;
     top:0;
     height:450px;
     width:640px;
     overflow:hidden;
     text-align:center;
 } 

 #gallerywrapper #gallery div {
     width:640px; height:900px; 
     padding-top:10px; 
     position:relative;
 } 

 #gallerywrapper #gallery div img {
     clear:both; 
     display:block; 
     margin:0 auto; 
     border:0;
 } 

 #gallerywrapper #gallery div h3 {
     padding:10px 0 0 0; 
     margin:0; 
     font-size:18px;
 } 

 #gallerywrapper #gallery div p {
     padding:5px 0; 
     margin:0; 
     font-size:12px; 
     line-height:18px;
 } 

 #gallery .previous{ 
     display:inline;
     float:left;
     margin-left:80px;
     text-decoration:none;
 } 

 #gallery .next{ 
     display:inline;
     float:right;
     margin-right:80px;
     text-decoration:none;
 }

/* Web design portfolio page */
.main {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

.main h2 {
   text-align:  center;
}



.row {
    margin: 8px -16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
/*    padding: 8px;*/
}

/* Create four equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    background-color: whitesmoke;
    padding: 10px;
    padding-bottom: 5em;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
    .column {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

table, tr,td {border: none;}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  

}

.menu {
  text-align: center;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}