btn-lgbtn-lgbtn-lg@charset "UTF-8";
/* Portfolio website CSS Document */

.heroimage .col-12 .px-0 {
	vertical-align: middle;
	width: 100%;
	object-fit: cover;
	height: 50%;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);	
}
.nav-link {
	font-size: 20px;
}
.dropdown-item {
	font-size: 18px;
}
.navbar-nav > li{
  padding-left:40px;
  padding-right:40px;
}

/*TEST*/
/* Container needed to position the button. Adjust the width as needed */
.indeximagecontainer {
  position: relative;
  width: 100%;
}

/* Make the image responsive */
.indeximagecontainer .img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.indeximagecontainer .btn {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.indeximagecontainer .btn:hover {
  background-color: #77A89D; 
  color: white;
  border: black;	
}

/*Make Button go over Image
.col-12 .px-0 .indeximagecontainer {
  position: absolute;
  top:30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding: 16px 30px;
  cursor: pointer;
  text-align: center;
}
/* Container needed to position the button. Adjust the width as needed 
 .indeximagecontainer .col-12 .px-0 {
  position: relative;
  width: 100%;
}
.indeximagecontainer .text-center .btn  {
	font-size: 25px;
	border:  1px solid;
    padding: 10px 10px;
	-webkit-transition-duration: 0.3s; /* Safari 
    transition-duration: 0.3s;
}
.indeximagecontainer .text-center .btn:hover {
  background-color: #77A89D; 
  color: white;
  border: black;	
}
*/

.footercontainer {
    display: block;
    background-color: #77A89D;
    padding: 50px;
    text-align: center;
    width: 100;
    margin-left: auto;
    margin-right: auto;
}
.text-center {
	font-size: 25px;
	color: white;
}
.resumeimage {
	height: 50%;
	width: 100%;
	object-fit: contain;
}
.jumbotron {
	background-color: #77A89D;
}
.educationtext {
	color: black;
	font-size: 25px;
	padding-bottom: 10px;
}
.degree {
	color: black;
	font-size: 18px;
}
/* Contact Me Page CSS */
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

label {
	font-size: 16px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 16px;
}

input[type=submit] {
  background-color: #77A89D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;	
}

input[type=submit]:hover {
  background-color: darkgrey;
}

.contactcontainer {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.contactheader {
	text-align: center;
	font-size: 25px;
}
/*Nav Issues - trying to move dropdown to left*/
@media (max-width : 643px ){
  .navbar-header {
    display:flex;
  }
}
@media (max-width : 643px ){
  .navbar-brand {
    order:1;
  }
}

@media (max-width:767px) {
  .navbar-toggle {
    order:0;
    margin-left:100px;
    margin-right:0;
	float: left;  
  }
}
@media (min-width: 768px) and (max-width: 991px) {
	
}
	
/*testing image overly with opacity*/
.schoolproject {
  position: relative;
  width: 50%;
}

.town {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.townmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.schoolproject:hover .town {
  opacity: 0.3;
}

.schoolproject:hover .townmiddle {
  opacity: 1;
}
.text   {
  background-color: transparent;
  color: black;
  font-size: 25px;
  padding: 16px 32px;
}
/*second image with opacity*/
.logodesign {
  position: relative;
  width: 50%;
}

.circlelogo {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.circlelogomiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.logodesign:hover .circlelogo {
  opacity: 0.3;
}

.logodesign:hover .circlelogomiddle {
  opacity: 1;
}
/*third image with opacity*/
.camerashutter {
  position: relative;
  width: 50%;
}

.circlelogo {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.cameralogomiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.camerashutter:hover .cameralogo {
  opacity: 0.3;
}

.camerashutter:hover .cameralogomiddle {
  opacity: 1;
}
/*fourth image with opacity*/
.portfoliographic {
  position: relative;
  width: 50%;
}

.portfoliothumbnail {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.portfoliothumbnailmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.portfoliographic:hover .portfoliothumbnail {
  opacity: 0.3;
}

.portfoliographic:hover .portfoliothumbnailmiddle {
  opacity: 1;
}

/*Portfolio Page*/

.portfolioheaders {
	font-size: 12px;
}
h5 {
	text-align: center;
	font-size: 20px;
	padding-bottom: 15px;
}

.col-md-4 {
	padding-top: 50px;
	text-align: center;
}
.listitems {
	font-size: 15px;
}
.schoolprojects{
	color: black;
	text-align: center;
}
.portfoliodescription {
	text-align: center;
}
.gallery {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%; }
.gallery .pics {
-webkit-transition: all 350ms ease;
transition: all 350ms ease; }
.gallery .animation {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }

@media (max-width: 450px) {
.gallery {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}

@media (max-width: 400px) {
.btn.filter {
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}
.list-unstyled {
  margin: auto;
  width: 50%;
  padding: 10px;
}

/*Resume*/
.btn   {
	font-size: 20px;
	font-size: 25px;
	border:  1px solid;
    padding: 10px 10px;
	-webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}