mystyle.css

body {
background-color: #000000;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 10px;
}
h1 {
  padding-left: 10px;
  margin: 0;
}
a {
  /*color: white;*/
}
a:focus a:hover {
  color: #9d9d9d;
  text-decoration: underline;
}
.modal {
  overflow-y: auto;
  width: 70%;
  left: 15%;
}
body.modal-open {
  overflow: visible;
}


.gitlinks {
  margin-top: 50px;
  padding-top: 50px;
}

.container {
  position: relative;
  width: 100% !important;
  padding: 0;
}
/*main intro section*/
/*#############################################*/
.box-0 {
  background-image: url("images/circutBackground.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow-x: hidden;
  color: white;
  margin-top: 56px;
  padding: 100px 0 100px 0;
  text-align: center;
  font-weight: 900;
  font-size: 60px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #02498B;
  letter-spacing: 5px;
  line-height: 120px;
  min-height: 950px;
  min-width: 100%;
}
@media only screen and (max-width: 480px) {
  .box-0 {
    min-height: 500px !important;
  }
}
@media only screen and (max-width: 768px) {
    .myNameIs {
      font-size: 30px;
    }
    .jobTitle {
      font-size: 30px;
    }
}
/*Mobile media queries*/
/*##############################################*/
@media only screen and (max-width: 480px) {
    .myNameIs {
      font-size: 20px;
    }
    .jobTitle {
      font-size: 20px;
    }
    .modal:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;
    }
    .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }

    img.matthew {
      max-width: 300px;
    }
}
.col-md-4.col-sm-6.col-xs-12 {
  padding: 0;
}
.col-md-6 {
  padding: 0 !important;
}

/*About me box*/
/*###########################################*/
#box-1 {
  background-color: white;
  color: #000000;
  float: center;
  width: 100%;
  min-height: 750px;
  font-size: 17px;
  padding: 25px 100px 0 0;
  line-height: normal;
}
.about {

}
.about-title {
  max-width: 100%;
  background-color: white;
  text-align: center;
  font-size: 36px;
  padding: 5px
}
img.matthew {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  border-bottom: none;
  -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
img.matthew:hover {
  filter: none;
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
}

@media only screen and (max-width: 480px) {

  #box-1.imgBox {
    min-height: 500px;
  }
  #box-1 {
    padding: 20px 20px 0 20px;
  }
}
@media only screen and (max-width: 990px) {
  #box-1.imgBox {
    min-height: 500px;
    padding: o;
  }
  #box-1 {
    padding: 0 20px 0 25px;
  }
}


/*Contact Box*/
/*###############################################*/
.box-4 {
  background-image: url('images/contactfiber.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  font-size: 25px;
  float: center;
  width: 100%;
  padding-left: 5%;
  padding-top: 10px;
  padding-bottom: 15px;
}
.box-4.row{
  margin-right: 0;
  margin: 0;
}
.formStyle {
  color: white;
  font-size: 25px;
  padding-left: 30px;
  min-height: 625px;
  position: relative;
}
.form-control {
  width: 75%;
}
.emailButton {
  text-align: center;
  background-color: black;
}
.infoBox {
  position: absolute;
  bottom: 0;
}
@media only screen and (max-width: 480px)  {
  .infoBox {
    position: relative;
    bottom: auto;
  }
  .formStyle {
    min-height: inherit;
  }
}





#box-6 {
  background-color: #000000;
  color: #FFFFFF;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 15px;
}

/*Skill section*/
/*########################################*/
#box-3 {
  background-color: #FFFFFF;
  color: white;
  float: center;
  font-size: 25px;
  text-shadow: .5px .5px 1px #9D9D9D;
  width: 100%;
  padding-top: 10px;
  min-height: 450px;
  background-image: url("images/pc-hardware-background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.bx-wrapper {
  background: none;
  border: none;
  box-shadow: none;
  padding: 30px 0 0 0;
}
.bxslider.one {

}
.bxslider.two {

}
.title {
  text-align: center;
  font-size: 75px;
  margin-bottom: 125px;
  margin-top: 125px;
}
.row {
  margin: 0 0 0 0 !important;
}
@media only screen and (max-width: 480px){
  .title {
    font-size: 45px;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .bx-wrapper {
    margin: 0;
    padding-bottom: 40px;
  }
  #box-3 {
    min-height: 300px;
  }
}

/*Work section*/
/*#######################################*/
#box-2 {
  background-color: white;
  color: #000000;
  float: center;
  margin: auto;
}
.projectContainer {
  margin: auto;
  /*max-width: 1106px;*/
  text-align: center;
}
.projectContainer li {
	border: 5px solid white;
	display: inline-block;
	margin: 0 1em 1em 1em;
	width: 350px;
}

.projectContainer figure {
	height: 300px;
	overflow: hidden;
	position: relative;
	width: 350px;
}
.projectContainer figcaption {
	background: rgba(0,0,0,0.8);
	color: white;
	display: table;
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
}
figcaption {
  padding: 0 10px 0 10px;
}

.projectContainer figcaption p {
	display: table-cell;
	font-size: 1.5em;
	position: relative;
	top: -40px;
  height: 300px;
	width: 100%;
	vertical-align: middle;
}

.projectContainer li:hover figcaption {
	opacity: 1;
  cursor: pointer;
}
.projectContainer img {
	display: block;
	height: 300px;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	max-width: 100%;
}
iframe {
  width: 560px;
  height: 316px;
}
.modalList {
  display: inline-block;
  margin-right: 50px;
}

.modalImg {
  display: inline-block;
}
.projectContainer li:hover img {
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	transform: scale(1.4);
}
@media only screen and (max-width: 480px) {
  .projectContainer img {
    width: 90% !important;
  }
  iframe {
    width: 90%;
    height: auto;
  }
}

img.portfolioPic {
  width: 490px;
  height: 300px;
  border: 1px solid black;
}
input.portfolioPic {
  width: 275px;
  height: 225px;
  border: 1px solid black;
}
.projecttitle {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.detailsBox {
  max-width: 275px;
  display: inline-block;
  position: relative;
  text-align: center;
}
#plugin {
  z-index: 10;
}

/*BootStrap NavBar*/
.navbar {
  background-color: #000000;
  color: white;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}
.navbar-inverse {
  background-image: none;
}
.navbar-inverse .navbar-nav>li>a:hover {
  color: #005DA4;
}
.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
  color: #005DA4;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
  color: white;
  background-color: #000000;
  background-image: none;
  text-decoration: underline;
}
.navbar-inverse .navbar-nav>li>a {
  color: white;
}
.navbar-inverse .navbar-brand {
  color: white;
}
.navbar-collapse.in {
  overflow-y: hidden;
}
.resumeLink:hover {
  cursor: pointer;
}
/*BootStrap Buttons*/
.btn-success {
  background-color: #9d9d9d;
  border-color: #9d9d9d;
  background-image: none;
  box-shadow: none;
}
.btn {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border: none;
}
.btn:focus {
  outline: inherit;
}
.gameButton {
  float: right;
}

/*Social media icon*/
.social {
  margin: 0;
  padding: 0;
}
.social-footer {
  float: none;
  text-align: center;
}
.social ul {
  margin: 0;
  padding: 5px;
}

.social ul li {
  margin: 5px;
  list-style: none outside none;
  display: inline-block;
  float: right;
}
.social i {
  width: 40px;
  height: 40px;
  color: #FFF;
  font-size: 22px;
  text-align:center;
  padding-top: 12px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}

.social i:hover {
  color: #FFF;
  text-decoration: none;
  transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover { /* round facebook icon*/
  background: #4060A5;
}
.social .fa-github:hover { /* round github icon*/
  background: #343434;
  border: solid 1px white;
}
.social .fa-linkedin:hover { /* round linkedin icon*/
  background: #0094BC;
}