/* Show desktop or mobile based on screen */
#content-desktop {
  display: block;
}
#content-mobile {
  display: none;
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}

}





.aboutpara {
  /* The image used */
  background-image: url("../img/headers/about.jpg");

  /* Set a specific height */
  min-height: 300px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	

}

	@media only screen and (max-width: 600px) {
  .aboutpara {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url("../img/mobile/aboutme.jpg");
	min-height: 100px; 
  }
}


.teampara {
  /* The image used */
  background-image: url("../img/headers/team.jpg");

  /* Set a specific height */
  min-height: 250px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	

}

	@media only screen and (max-width: 767px) {
  .teampara {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url("../img/mobile/aboutme.jpg");
	min-height: 100px; 
  }
}

.servicespara {
  /* The image used */
  background-image: url("../img/headers/services.jpg");

  /* Set a specific height */
  min-height: 250px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	

}

	@media only screen and (max-width: 767px) {
  .servicespara {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url("../img/mobile/aboutme.jpg");
	min-height: 100px; 
  }
}


.contactpara {
  /* The image used */
  background-image: url("../img/headers/contact.jpg");

  /* Set a specific height */
  min-height: 300px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	
}

	
		@media only screen and (max-width: 767px) {
  .contactpara {
    /* The file size of this background image is 93% smaller
       to improve page load speed on mobile internet connections */
    background-image: url("../img/mobile/contact.jpg");
	min-height: 100px; 
  }
}


.navbar .a{
  padding:0;
  margin:0;
}

#about .card {
  color: #026062;
}

#about .fa {
  padding-bottom: 30px;
}

#about .fab {
  padding-bottom: 30px;
}


#about .fa .fab .p {
  margin: 15px;
}

#services {
  background: #FFFFFF
}


#services .page-section {
  padding: 2rem 0;
}

#services .portfolio-item {
  right: 0;
  margin: 0 0 15px;
}

#services .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

#services .img-fluid {
  border-radius: 15px 15px 0px 0px;

}

#services .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
  border-radius: 15px 15px 0px 0px;
  background: rgba(218, 125, 117, 0.9);
}

#services .h2{
  color: white;
}

#services .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}

#services .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: #FFFFFF;
}

#services .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}

#services .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#services .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}

#services .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  border-radius: 0px 0px 15px 15px;
  background-color: rgb(164,175,149, 0.5);
}

#services .portfolio-item .portfolio-caption h4 {
  margin: 0;
  text-transform: none;
}

#services .portfolio-item .portfolio-caption p {
  font-size: 16px;
  font-style: italic;
  margin: 0;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#services * {
  z-index: 2;
}

@media (min-width: 767px) {
  #services .portfolio-item {
    margin: 0 0 30px;
  }
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.portfolio-modal .modal-content {
  padding: 100px 0;
  text-align: center;
}

.portfolio-modal .modal-content h2 {
  font-size: 3em;
  margin-bottom: 15px;
}

.portfolio-modal .modal-content p {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 20px 0 30px;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}


/* skill fa-icon hover colors */

#portfolio, #about, #contact, #services {
  max-width: 100%;
  overflow-x: hidden;

}

#skills .fa-html5:hover {
  color: #C0080A;
  transform: scale(1.1);
}
#skills .fa-css3-alt:hover {
  color: #026062;
  transform: scale(1.1);
}
#skills .fa-js-square:hover {
  transform: scale(1.1);
  color: #DE7D76;
}
#skills .fa-wordpress:hover {
  transform: scale(1.1);
  color: #C93835;
}
#skills .fa-python:hover {
  transform: scale(1.1);
  color: #E1A397;
}
#skills .fa-chart-bar:hover {
  transform: scale(1.1);
  color: #A5AF96;
}
#skills .fa-adobe:hover {
  transform: scale(1.1);
  color: #026062;
}
#skills .fa-mailchimp:hover {
  transform: scale(1.1);
  color: #C93835;
}
#skills .fa-instagram:hover {
  transform: scale(1.1);
  color: #026062;
}
#skills .fa-twitter:hover {
  transform: scale(1.1);
  color: #C93835;
}
#skills .fa-facebook:hover {
  transform: scale(1.1);
  color: #DE7D76;
}
#skills .fa-mobile-alt:hover {
  transform: scale(1.1);
  color: #026062;
}

/* contact form */

section#contact {
  background-repeat: no-repeat;
  background-position: center;
}

section#contact .section-heading {
  color: #fff;
}

section#contact .btn {
  background-color:  #026062;

}

section#contact .btn:hover {
  background-color: #A5AF96;
  transform: scale(1.1);

}

section#contact .page-section {
    padding: 8rem 0;
}
section#contact .form-group {
  margin-bottom: 25px;
  margin-left: 50px;
  margin-right: 50px;
}

section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px;
}

section#contact .form-group input.form-control {
  height: auto;
}

section#contact .form-group textarea.form-control {
  height: 248px;
}

section#contact .form-control:focus {
  border-color: #026062;
  -webkit-box-shadow: none;
  box-shadow: none;
}

section#contact ::-webkit-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

section#contact :-moz-placeholder {
  font-weight: 700;
  color: #A5AF96;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

section#contact ::-moz-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

section#contact :-ms-input-placeholder {
  font-weight: 700;
  color: #ced4da;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}