/* Setting the font adding margin to card and font size */
.card-container {
  font-size: 16px;/* The card size can be chaged simply by changing the font size to another value, the card will keep its aspect ratio and wont break, but the media queries should be modified at the bottom of the css file to keep the full responsivness of the card*/
  font-family: 'Roboto', Arial, sans-serif;
  display: inline-block;
}

/* Sizing everything in the card so it doesnt change size when padding is added */
.card-four * {
  box-sizing: border-box;
}

/* Card border, size, margin */
.card-four {
  width: 24em;
  height: 36em;
  overflow: hidden;
  border-radius: 30px;
  margin: 1em;
  -webkit-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 28px 0px rgba(0, 0, 0, 0.75);
}

/* Top part of the card positioning and styling */
.card-four-top {
  width: 100%;
  height: 64%;
  background-color: #f2f2f2;
  position: relative;
}

/* Adding background and positioning */
.card-four-top-overlay {
  background-image: url(/img/profile2.png );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 3;
  transition: 0.5s;
}

/* Making the info gradient and positioning it */
.four-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12em;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.6) 54%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  padding-top: 3.5em;
  transition: 0.3s;
}

/* username size and weight */
.four-info h2 {
  text-align: center;
  font-size: 2em;
  font-weight: 300;
  margin: 0 0 20px 0;
}

/* Styles for the buttons */
.card-four-btn {
  background: rgb(255, 65, 108);
  background: linear-gradient(90deg, rgba(255, 65, 108, 1) 0%, rgba(255, 75, 43, 1) 100%);
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  position: absolute;
  transition: 0.5s;
}

/* Styles for button when hovered over */
.card-four-btn:hover {
  background: #fff;
  color: #FF416C;
}

/* Moving buttons out of the card so that they can appear when the card opens */
.four-btn-left {
  left: -9.3em;
  padding: 0.9em 2em;
  left: -12em;

}

.four-btn-right {
  right: -9.3em;
  right: -12em;
  padding: 0.9em 3em;
}

/* My work section */
.four-work {
	width: 337%;
	height: 14em;
	text-align: left;
	position: absolute;
	top: 9.5em;
}

/* Styles for the three projects */
.four-project{
  display: inline-block;
  width: 35%;
  max-width: 24em;
  height: 100%;
  background-position: center;
  background-size: cover;
}

/* style for projects when hovered over */
.four-project:hover {
  opacity: 0.7;
  cursor: pointer;
}

/* Adding images to projects */
.four-project1 {
  background-image: url(images/project1.jpg);
}

.four-project2 {
  background-image: url(images/project2.jpg);
}

.four-project3 {
  background-image: url(images/project3.jpg);
}

/* Bottom part of the card size centering and background */
.card-four-bottom {
  position: relative;
  padding: 3em 0.0em;
  text-align: center;
  width: 100%;
  height: 30%;
  background-color: #fff;
}

.card-four-bottom p {
  margin: 0;
} 

.card-four-bottom-img {
  position: relative;
  padding: 1em 0.0em;
  text-align: center;
  width: 100%;
  height: 20%;
  background-color: #fff;
}
.logo-img{
  /* transition: 0.3s; */
  transition:visibility 0.2s linear,opacity 0.2s linear;
}
.hidden-link:hover{
  cursor: none;

}
/* Circle + button that opens the card styles */
.card-four-btn-circle {
  background: rgb(255, 65, 108);
  background: linear-gradient(90deg, rgba(255, 65, 108, 1) 0%, rgba(255, 75, 43, 1) 100%);
  width: 5.2em;
  height: 5.2em;
  border: none;
  border-radius: 50%;
  position: absolute;
  top: -2.8em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #fff;
  cursor: pointer;
  padding-top: 0.7em;
}

/* Making the button text larger */
.four-btn-text {
  font-size: 3em;
}

/* Margin for views, likes and followers */
.four-views,
.four-followers,
.four-likes {
  display: inline-block;
  margin: 0 2em;
}

/* positioning social media icons */
.four-social-media {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 5px;
}

.four-social-media a {
  margin: 0 0.5em;
  font-size: 2em;
}

/* Adding colors to icons */
/* .four-left-icons a:nth-child(1) {
  color: #3b5998;
}
.four-left-icons a:nth-child(2) {
  color: #cd486b;
}
.four-right-icons a:nth-child(1) {
  color: #000;
}
.four-right-icons a:nth-child(2) {
  color: #0057e7;
} */

.facebook {
  color: #3b5998;
}
.instagram {
  color: #cd486b;
}
.twitter {
  color: #00acee;
}
.share {
  color: #666;
}
.linkedin {
  color: #0E76A8;
}
.whatsapp {
  color: #075E54;
}

.ad {
  text-align: center !important; 
  font-size: 10.5pt; 
  margin-top:1%; 
  
}

.ad a {
  color: black; 
  text-decoration: unset;
}

#contact {
  position: fixed;
  z-index: 1000;
  margin: 10px 20px;
  font-size: 35px;
  color: rgba(255, 75, 43, 1);
}

.four-left-icons {
  float: left;
  margin: 1em 2em 1em 2em;
}

.four-center-icons {
  float: none;
  margin: 1em 2em 1em 2em;
  text-align: center;
}

.four-right-icons {
  float: right;
  margin: 1em 2em 1em 2em;
}

.four-icon {
  font-size: 1.3em;
  color: #6F757D;
}

/* Classes for the slide animations when the card opens */
/* .four-btn-left-slide {
  left: 15px;
} */
.four-btn-left-slide {
  left: 6em;
  z-index: 2;
}
.four-btn-right-slide {
  right: 15px;
}
/* .v1
.four-overlay-slide {
  height: 9.5em;
} */
/* v2 */
.four-overlay-slide {
  height: 9.5em;
  background-image: url( /img/logo3.png );
  background-size: 200%;
}
.four-info-slide {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 10%, rgba(0, 0, 0, 0.6) 54%, rgba(0, 0, 0, .8) 100%);
  height: 100%;
  padding-top: 1em; 
}

/* media queries can be added here, or you can modify these for the size of the card that has ben changed */

/* The default font size is 16px and these two media queries will make it shrink from the 16px font size to 14px and 12px when the screen hits the size of 430px and 370px */

/* But if the font size is changed to something other than the default 16px then the max width and card container font size values in the media query must be changed or another one must be aded to keep the cards responsiveness*/

@media screen and (max-width: 430px) {
  .card-container {
    font-size: 14px;
  }
}

 @media screen and (max-width: 370px) {
  .card-container {
    font-size: 12px;
  } 
}
.title {
  font-size: 15px;
}
.fa-twitter {
}
.fa-mail {
}
.fa-email {
}
.fa-facebook {
}
.fa-send {
}