/*Colour Palette */
/*
    menu, buttons and expandables (alternate with granite grey): #373F51
    highlight: #23B5D3
    text: #1B1B1E
    background: #EDE6E3
    expandables (alternate with charcoal) and hover colour: #666666
*/

.contentIndex {
    background-color: #EDE6E3;
    color: #1B1B1E;
    width: 45%;
    transform: translate(60%);
    font-weight: 600;
    border: 7px;
    border-style: double;
    border-color: #373F51;
    padding: 1em;
}

.contentProgram {
    background-color: #EDE6E3;
    color: #1B1B1E;
    width: 45%;
    transform: translate(60%);
    font-weight: 600;
    border: 7px;
    border-style: double;
    border-color: #373F51;
    padding: 1em;
}

h4, h3 {
    font-weight: 600;
}

.main {
    background-color: #EDE6E3;
    color: #1B1B1E;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

div {
    text-align: center;
    word-wrap: break-word;
}

.navbar {
    background-color: #EDE6E3;
    float: none;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar a {
    float: left;
    color: #1B1B1E;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar a.active {
    background-color: #23B5D3;
    color: white;
}

.subnav {
    float: left;
}

.subnav .subnavbtn {
    font-size: 17px;
    font-weight: 600;;
    border: none;
    outline: none;
    color: #1B1B1E;
    padding: 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.subnavbtn-active {
    font-size: 17px;
    border: none;
    outline: none;
    padding: 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    background-color: #23B5D3;
    color: white;
}

.navbar a:hover, .subnav:hover .subnavbtn {
    background-color: rgb(179, 179, 179);
    color: black;
}

.subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: rgba(179, 179, 179);
    width: 100%;
    z-index: 1;
}

.subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
}

.subnav-content a:hover {
    background-color: #23B5D3;
    color: black;
}

.subnav:hover .subnav-content {
    display: block;
}

/* For Photography Portfolio */
.container{
    margin: 0 auto;
}

.container .gallery a img {
  float: left;
  width: 20%;
  height: auto;
  border: 2px solid #EDE6E3;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
}

.container .gallery a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
}

.clear {
  clear: both;
  float: none;
  width: 100%;
}

.btn {
    background-color: #666666bd;
    color: #1B1B1E;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn:hover {
    background-color: #373f51dc;
}

/* Resume Specific */

.collapsible {
    background-color: #373f51c4;
    cursor: pointer;
    padding: 18px;
    width: 50%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
}

.collapsible-alt {
    background-color: #666666bd;
    cursor: pointer;
    padding: 18px;
    width: 50%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
}

.c-active, .collapsible:hover {
    background-color: #373f51dc;
}

.c-active-alt, .collapsible-alt:hover {
    background-color: #666666bd;
}

.collapsible:after, .collapsible-alt:after {
    content: '\2B9F'; /* Unicode character for "plus" sign (+) */
    font-size: 15px;
    color: white;
    float: right;
    margin-left: 5px;
}


.c-active:after, .c-active-alt:after {
    content: "\2B9D"; /* Unicode character for "minus" sign (-) */
}


.collapse {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #EDE6E3;
    transition: ease-out;
    font-weight: 600;
}

/* Welcome Specific */
.round {
    border-radius: 50%;
    height: 15%;
    width: 15%;
}

/* Programming Portfolio */
table {
    border: 1px solid black;
    table-layout: fixed ;
    border-collapse: collapse;
    width: 75%;
    height: 100%;
    transform: translate(15%);
}

tr, td {
    width: 25%;
    border: 1px solid black;
    border-collapse: collapse;
}

/* Enquiries */

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: #666666bd;
    color: #1B1B1E;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker grey color */
  input[type=submit]:hover {
    background-color: #373f51dc;
  }
  
  /* Add a background color and some padding around the form */
  .contact {
    border-radius: 5px;
    background-color: #EDE6E3;
    padding: 100px;
    border: 7px;
    border-style: double;
    border-color: #373F51;
    width: 50%;
    transform: translate(50%);
  }

/* Generic */
ul {
    width: 70%;
    margin: auto;
}
li {
    list-style-type: none;
}
td {
    padding: 10px;
    padding-left: 5px;
    padding-right: 5px;
}