/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px none #ccc;
  /*background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  
  border: none;
  outline: none;
  cursor: pointer;
  /*padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;*/
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #bbb;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ddd;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* 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) */
}

.img_container {
  position: relative; 
}

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

}

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

.img_container:hover .img_image {
  opacity: 0.3;
}

.img_container:hover .img_middle {
  opacity: 1;
}

.img_title {
  color: black;
  font-size: 24px;
  padding: 16px 32px;
}

.img_project {
    color:black;
    font-size: 14px;
    padding: inherit;
}

/* [1] The container */
.img-hover-zoom {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

.back {
    padding-left: 20px;
    position: relative;
}

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.wrapper {
    margin: 0 auto;
    width: 950px;
}

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0px;   
}

.videowrapper iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
}

.imagewrapper {
    width: 100%;
    padding-top: 66,66%;
    position: relative;
}

.imagewrapperimg{
    object-fit: cover;
}

/* Style the tab content */
.portfoliocontent {
  display: none;
}