body{
  -webkit-font-smoothing: antialiased;
  margin: 6px;
}
a{
  text-decoration: none;
  color: black;
}

/* FONT SYSTEM */
@font-face {
  font-family: tobias;
  src: url(Tobias-Light.otf);
}
.montserrat {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.ubuntu-light {
font-family: "Ubuntu", serif;
font-weight: 300;
font-style: normal;
}
.ubuntu-regular {
font-family: "Ubuntu", serif;
font-weight: 400;
font-style: normal;
}
.ubuntu-medium {
font-family: "Ubuntu", serif;
font-weight: 500;
font-style: normal;
}
.ubuntu-bold {
font-family: "Ubuntu", serif;
font-weight: 700;
font-style: normal;
}
.ubuntu-light-italic {
font-family: "Ubuntu", serif;
font-weight: 300;
font-style: italic;
}
.ubuntu-regular-italic {
font-family: "Ubuntu", serif;
font-weight: 400;
font-style: italic;
}
.ubuntu-medium-italic {
font-family: "Ubuntu", serif;
font-weight: 500;
font-style: italic;
}
.ubuntu-bold-italic {
font-family: "Ubuntu", serif;
font-weight: 700;
font-style: italic;
}
.tobias{
  font-family: tobias;
}
/* 
Background Colors*/
.bg-l-grey{
  background-color: ghostwhite;
}


/* Margins 
*/
.my-xl{
  margin-top: 155px;
  margin-bottom: 155px;
}
.my-l{
margin-top: 100px;
margin-bottom: 100px;
}
.my-sm{
margin-top: 60px;
margin-bottom: 60px;
}
.mt-xl{
margin-top: 155px;
}
.mb-xxl{
margin-bottom: 255px;
}
.mb-xl{
margin-bottom: 155px;
}
.mt-l{
margin-top: 100px;
}
.mb-l{
margin-bottom: 100px;
}
.mt-sm{
margin-top: 60px;
}
.mb-sm{
margin-bottom: 60px;
}
/* Paddings 
*/
.py-xl{
padding-top: 155px;
padding-bottom: 155px;
}
.pt-xxl{
  padding-top: 215px;
}
.pt-xl{
padding-top: 155px;
}
.pb-xl{
padding-bottom: 155px;
}
.pt-l{
padding-top: 100px;
}
.pb-l{
padding-bottom: 100px;
}
.pt-sm{
padding-top: 60px;
}
.pb-sm{
padding-bottom: 60px;
}


.text-center{
  text-align: center;
}






/* Header
*/
.code {
  position: absolute;
  z-index: 99;
  
  color: white;
  font-size: 12px;
}
.fl {
  left: 0;
  top: 555px;
  rotate: -90deg;
}
.fr {
  right: 0;
  top: 37px;
  rotate: 90deg;
}
.header_top_name{
  position: absolute;
  font-family: tobias;
  font-size: 23px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  /* line-height: 28px; */
  top: 45px;
  left: 45px;
  mix-blend-mode: difference;
  color: white;
  transition-duration: .4s;
}
.m-z {
  margin: 0;
}
.header_top_name {
  letter-spacing: 2px;
  z-index: 3;
}
.header_top_name:hover {
  -webkit-font-smoothing: none;
  letter-spacing: 5px;
}
.work_profile_photos{

}
.radio {
  font-family: 'Ubuntu';
  font-weight: 400;
  position: relative;
  top: -35px;
  width: 85%;
  margin: auto;
  padding: 20px 20px;
  text-align: center;
  background-color: #efefef;
  border-radius: 10px;

  font-size: 20px;

  background: rgba(205, 205, 205, 0.26);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.7px);
  -webkit-backdrop-filter: blur(7.7px);
  border: 1px solid rgba(205, 205, 205, 0.5);
}
.radio .items {
  margin: 0 3%;
  color: black;
  text-decoration: none;
}

/**
 * Sticky navigation
 */
 .sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
  z-index: 99;
}



/* Selections of work 
*/
.title_section{
  font-size: 45px;
  margin-bottom: 35px;
}
.work-selection{
  height: 550px;
  background-color: #A8DADC;
  padding: 47px 35px;
  border-radius: 5px 5px;
  position: relative;

  transition: all 300ms ease;
}
.work-selection2{
  height: 550px;
  background-color: #C6ECAE;
  padding: 35px;

  border-radius: 5px 5px;
}
.work-selection3{
  height: 550px;
  background-color: #457b9d;
  padding: 35px;

  border-radius: 5px 5px;
}
.w-code{
  font-size: 12px;
  width: fit-content;
  rotate: -90deg;
  position: relative;
  left: -55px;
  top: 50px;
  margin: 0;
  z-index: 1;
}
.work-selection-image{
  width: -webkit-fill-available;
  height: 565px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.top-work-info{

}
.work-label{
  background-color: #fff;
  width: fit-content;
  padding: 5px 15px;
  border-radius: 5px;
}
.work-title{
  font-size: 30px;
}
.work-description{
  font-size: 35px;
  font-weight: 200;
}
.work-text {
  padding-left: 60px;
}

/* svg#smile {
  position: absolute;
  left: 85px;
  top: 75px;
} */
svg#smile {
  margin: auto;
  display: block;
  width: 20px;
  height: 20px;
  bottom: 1px;
  position: relative;
  transition: all 300ms ease;
}
.hr {
  width: 1px;
  height: 100%;
  background-color: #676767;
  position: relative;
  margin: auto;
  bottom: 0px;
}
.select-work:hover svg#smile {
  bottom: 594px;
  height: 30px;
  width: 30px;
}
.work-selection:hover{
  background-color: #98cfd1;
}

.select-work {
  display: block;
}


/* Video css */
.full{
    height: 500px;
    width: 100%;

    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    position: absolute;
}
.lazyloaded {
    opacity: 1;
    transition: opacity .3s;
}
.video_sobre{
  background: linear-gradient(45deg, #ffffff, #0010f3, #ff4dfe);
  background-size: 400% 400%;
  mix-blend-mode: hard-light;
  animation: GradientBackground 10s ease infinite;
  height: 600px;
}
.video_object {
    width: 100%;
    opacity: 0.45;
    height: 600px;
    object-fit: cover;
}





/* PROFILE SECTION
*/
.text-secondary{
  color: black!important;
  font-size: 20px;
  font-weight: 200;
  line-height: 25px;
}














/* PORTFOLIO  PAGES _ SECTION
*/
.portfolio_header_top_name{
  position: absolute;
  font-family: tobias;
  font-size: 23px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  top: 45px;
  left: 45px;
  mix-blend-mode: difference;

  letter-spacing: 2px;
  z-index: 3;
  transition-duration: .4s;
}
.portfolio_header_top_name a{
  color: white;
}
.portfolio_header_top_name:hover {
  -webkit-font-smoothing: none;
  letter-spacing: 5px;
}

.top-work-selection{
  height: 550px;
  background-color: #A8DADC;
  padding: 47px 35px;
  border-radius: 5px 5px;
  position: relative;

  transition: all 300ms ease;
}
.top-work-selection:hover svg#smile {
  bottom: 594px;
  height: 30px;
  width: 30px;
}
.top-work-selection:hover{
  background-color: #98cfd1;
}

.work-label-portfolio{
  background-color: #98cfd1;
  padding: 10px  25px;
  width: fit-content;
  border-radius: 5px;
}











/* PROFILE
 */
#profile{
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}





/* FOOTER
 */
.footer{

}
.footer-links{
  display: inline-block;
}
#footer-smile {
  margin: auto;
  display: block;
  width: 30px;
  height: 30px;
  bottom: 1px;
  position: relative;
  transition: all 300ms ease;
}







/* KEYFRAME Animations
 */
@keyframes GradientBackground {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
};











/* SPLIT EFFECT */

.m-z {
	font-size: 5rem;
	position: relative;
	text-transform: uppercase;
	transition: all 300ms ease;
	width: fit-content;
	cursor: pointer;
}
.m-z:hover {
	transform: skew(10deg);
}
.m-z::before {
	content: attr(data-name);
	position: absolute;
	/* top: 0; */
	left: -20px;
	background: var(--bgcolor);
	height: 3rem;
	overflow: hidden;
	transition: all 300ms ease;
	padding-left: 20px;
}
.m-z:hover::before {
	top: -3px;
	/* left: 0px; */
	color: #1dcc9b;
}

.m-z::after {
	content: "";
	height: 1px;
	width: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: hotpink;
	transition: all 300ms ease;
}
p.m-z:hover::after {
	width: 120%;
	outline: 1px solid rgb(2, 0, 36);
}








/**
 * Tooltip Styles
 */
.to-top{
  width: fit-content;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  
}

/* Position tooltip above the element */
[data-tooltip]:before {
  width: 100px;
  position: absolute;
  bottom: 150%;
  margin-bottom: 7px;
  margin-left: -55px;
  padding: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 50px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 7px solid #000;
  border-top: 7px solid hsla(0, 0%, 20%, 0.9);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  left: 0;
}








@media only screen and (max-width: 576px){
    .img-fluid {
        width: 70% !important;
        margin-top: 30px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}

/* // Large devices (desktops, 992px and up) */
@media (max-width: 1199.98px) { 
  .work-description {
    font-size: 30px;
  } 
}

/* // Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) { 
  .work-selection-image{
    height: 460px;
  }
}

/* // Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) { 

  .video_sobre {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(0, 16, 243, 0.1), rgba(255, 77, 255, 0.1));

  }






  .work-selection-image{
    height: 260px;
  }
  .work-text {
    padding-left: 12px;
  }
  .top-work-info {
    top: -18px;
    position: relative;
    /* margin-left: 50%;
    transform: translateX(-50%); */
  }
  .work-description {
    margin-top: 20px;
    font-size: 24px;
  }
  .work-title {
    font-size: 26px;
    margin-top: 15px;
  }

  .hr {
    display: none;
  }
  svg#smile{
    display: none;
  }

  .body-portfolio{
    margin-top: 50px;
    padding-top: 50px;
  }
  .portfolio_header_top_name {
    mix-blend-mode: normal;
    position: fixed; 
    top:30px;
    left:30px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    padding: 5px 15px;
  }
  .portfolio_header_top_name a p{
    color: black;
    font-size: 20px;
  }
  .m-z::before {
    display: none;
  }
  .m-z::after {
    display: none;
  }



  .work-label {
    font-size: 14px;
    width: 155px;
    margin: auto;
  }




  .py-xl {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .my-xl {
    margin-top: 70px;
    margin-bottom: 70px;
  }

}

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  
}