@font-face {
    font-family: 'nimbus_sans_d_otbold_extended';
    src: url('/css/fonts/nimbus-sans-d-ot-bold-extended_32745-webfont.woff2') format('woff2'),
         url('/css/fonts/nimbus-sans-d-ot-bold-extended_32745-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
    background: #fff!important;
}

a:hover {
    opacity: 0.7!important;
}

/*a:focus {
    color: #333!important;
}*/

.container-brand .white:focus, .container-brand .white:hover {
    color: #fff!important;
}

#wrap-comingsoon {
display:none;
width:100%;
height: 100vh;
background: #fff;
}

#wrap-comingsoon .comingsoon-box h2 {
  background: #fff;
  text-align:center;
  color: #5541e1;
}
.comingsoon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#wrapper {
    display:none;
}

header {
   padding:20px; 
   text-transform:uppercase;
   font-family: 'nimbus_sans_d_otbold_extended';
   font-size: 15px;
   line-height: 15px;
   width:100%;
}

header a {
    color: #333;
    vertical-align:top;
    display: inline-block;
}

header span {
    color: #cacaca;
    display: inline-block;
    width: 100px;
    line-height: 15px;
    vertical-align:top;
    margin-left: 17px;
}

header a #author {
    width: 130px;
}

header .menu-item {
    margin-left: 90px;
    font-size: 10px;
}

header .menu-item:before {
    content: '';
    visibility:hidden;
    margin-right: 15px;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 15px;
    background: #5541e1;
}
header .dot:before {
    visibility:visible;
}

.animated-hero {
  border-right: solid 0.3vw #5541e1;
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'nimbus_sans_d_otbold_extended', monospace;  
  font-size: 6vw;
  color: #333;
  margin: 0 auto;
}

/* Animation */
.active .animated-hero {
  animation: animated-text 1.5s steps(14,end) 1s 1 normal both,
             animated-cursor 600ms steps(14,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 45vw;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: #5541e1;}
  to{border-right-color: transparent;}
}

header {
    height:30px;
    position: fixed;
    z-index: 9000;
}

header .menu-item, header #author  {
              transition: color 1s;
      -webkit-transition: color 1s;
         -moz-transition: color 1s;
}

header .white {
    color: #fff;
}

#wrap-hero {
    height: calc(100vh - 70px);
}

#wrap-hero .chat-text {
  position: absolute;
  top: 48%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.container-brand {
  width: 235px;
}

.container-brand, .container-menu {
    display: inline-block;
}

@media screen and (max-width: 1250px) {
    header .menu-item:before {
    visibility: visible;
    }
    header .menu-item:not(.dot):before {
    background:#e7e7e7;
    }
    header .menu-item:not(.dot).white:before {
    background:#8c8c8c;
    }
    header .menu-item {
    margin-left: 0px;
    width: 12px;
    font-size:0px;
    }
    .container-menu {
    float:right;
    }
    .socials {
    display:none!important;
    }
}

@media screen and (min-width: 1251px) {
.container-menu {
    position: absolute;
    left: 0;
    top:29px;
    width: 740px;
    right: 0;
    margin: auto;
}
}

section {
  display:none;
}

section.active {
  display:block;
}

#container-portfolio {
    width: 100%;
    padding:0;
    padding-top: 18vh;
}

#container-portfolio .col-md-2 {
    height:100%;
    padding:0;
}

#container-portfolio .row {
    margin:0;
}

#container-portfolio img {
    width:100%;
}

@keyframes fade-effect { 
  from{opacity: 0;}
  to{opacity: 1;}
}

.active #container-portfolio {
     animation: fade-effect 1s;
}


#wrap-studio, #wrap-about {
    width: 100vw;
    height: 100vh;
    background: #1a1d22;
    z-index: -99;
}

.studio-board {
    width: 100vw;
    height: 100vh;
    overflow:auto;
    background: url("https://www.diogomelo.pt/img/studio_bg-01.jpg") bottom center/cover no-repeat!important;
}

.active .studio-board {
    animation: fade-effect 1s;
}

.studio-logo-box {
    width: 50%;
    padding-top: 200px;
    margin: 0 auto;
}

.studio-board p {
    text-align:center;
    margin: 0 auto;
    max-width: 470px;
}

.studio-logo-box img {
    max-width: 434px;
    display:block;
    width:100%;
    margin:0 auto;
}

#canvas {
    max-height: 100vh;
}

.cta-row {
    position: absolute;
    bottom:65px;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    font-size: 12px;
    font-family: 'nimbus_sans_d_otbold_extended';
    text-transform: uppercase;
    text-align:center;
    width:100%;
    z-index:100;
}

.cta-btn-1 {
    color: #fff;
    background: #5541e1;
    padding: 18px 25px;
    border-radius: 30px;
    margin-right: 24px;
    display: inline-block;
}

.cta-btn-1:hover, .cta-btn-1:focus {
    color: #fff!important;
}

.cta-btn-2, .cta-btn-2:hover {
    color:#333;
    display: inline-block;
    margin-top: 30px;
}

@media screen and (max-width: 927px) {
    .cta-hero {
        max-width: 430px;
    }
    .studio-logo-box {
    padding-top: 110px;
 }
}

#container-about {
    padding-top:18vh;
    z-index:88;
    position:relative;
}

.dialog {
    height: 200px;
    background: #5541e1;
}

@keyframes open-dialog { 
  from{width: 200px;}
  to{width: 100%;}
}

.active .dialog {
    animation: open-dialog 1s;
}

.dialog:before {
    content: '';
    width: 0;
    position: absolute;
    top: 95px;
    margin-left: -50px;
    height: 0;
	border-left: 50px solid transparent;
	border-right: 0px solid transparent;
	border-top: 50px solid #5541e1;
}

.row-skills {
    margin-top: 78px;
}

.skills {
    font-family: 'nimbus_sans_d_otbold_extended';
    font-size: 40px;
    line-height: 40px;
    text-align: left;
    color:#6d7586;
}

.skills span {
    color:#454b57;
}

.title-skills {
    font-family: 'nimbus_sans_d_otbold_extended';
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 22px;
    color: #6d7586;
}

.title-skills:before {
    content: '';
    height: 1px;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 16px;
    width: 40px;
    background: #5541e1;
}

@keyframes spin {
    from { transform: scale3d(2,2,1) rotateZ(390deg);  }
    to { transform: scale3d(2,2,1) rotateZ(370deg); }
}

.active .resume-gradient {
    width: 100%;
    position: absolute;
    height: 100%;
    bottom: 0;
    z-index: 1;
    background-image: -webkit-linear-gradient(
317deg
, #1d2025 50%, #21242a 50%);
    animation: spin 20s ease-out;
    animation-fill-mode: forwards;
}

.gradient-box {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.typew p {
    color: #fff;
    padding: 37px 57px;
    font-size: 25px;
}

@media screen and (min-width: 551px) and (max-width: 1200px) {
    .typew p {
        font-size:14px;
        padding: 20px 28px;
    }
    .row-skills {
      margin-left: 20px;
      margin-right: 20px;
    }

}

@media screen and (max-width: 550px) {
.typew p {
    font-size:13px;
    padding: 20px 28px;
}
    .row-skills {
      margin-left: 20px;
      margin-right: 20px;
    }
    .dialog:before {
    margin-left: -20px;
    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
    border-top: 20px solid #5541e1;
    }
}

@media screen and (min-width: 451px) and (max-width: 1200px) {
    .skills {
    font-size: 24px;
    line-height: 24px;
}
}

@media screen and (max-width: 450px) {
    .skills {
    font-size: 14px;
    line-height: 16px;
}
}

@media screen and (max-width: 550px) {
    #container-about {
    padding-top: 100px;
  }
    .row-skills {
    margin-top: 35px;
}
}

#container-about .col-md-3 img {
    width:100%;
    max-width:127px;
}

@media screen and (max-width: 927px) {
#wrap-about .cta-btn-1 {
    display: block;
    max-width: 200px;
    margin: 0 auto;
}
    #wrap-hero .cta-btn-1 {
    display: block;
    margin: 0 auto;
    max-width: 280px;
}
    .cta-row {
    bottom:35px;
    }
}


.typew {
    position: absolute;
}

#wrap-studio .login-container {
    max-width: 450px;
    margin: 0 auto;
}

#wrap-studio .login-container .white-box {
    background:transparent;
}

 #wrap-studio .cta-btn-2, #wrap-studio .cta-btn-2:hover, #wrap-about .cta-btn-2, #wrap-about .cta-btn-2:hover {
    color: #a9a9a9; 
}

#wrap-studio .cta-btn-2 {

    padding: 18px 25px;
}

#wrap-studio .btn-info, #wrap-studio .btn-info.disabled {
    border-radius: 52px;
}

#wrap-studio .form-horizontal .pull-right {
display:none;
}

#wrap-studio input#password, #wrap-studio input#email {
padding-left:10px;
}

.lity-iframe .lity-container {
    max-width: 80vw;
}

.lity-iframe .lity-wrap {
    position: initial;
    margin-top: 5vh; 
    padding-bottom: 5vh;
}

.lity-iframe-container iframe { 
    height: 8020px;
}

.lity-iframe-container iframe[src*="img/portefolio/projectsource/diogomelo_projectsource.html"] {
    height:455.9vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/mobilidadeeletrica/diogomelo_mobilidadeeletrica.html"] {
    height:211vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/maivas/diogomelo_maivas.html"] {
    height:384vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/idryl/diogomelo_idryl.html"] {
    height:273vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/mimarte/diogomelo_mimarte.html"] {
    height:211vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/onestop/diogomelo_onestop.html"] {
    height:642vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/digarc/diogomelo_digarc.html"] {
    height:172vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/nissan/diogomelo_nissan.html"] {
    height:622vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/arraial/diogomelo_arraial.html"] {
    height:262vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/pedroartilheiro/diogomelo_pedroartilheiro.html"] {
    height:285vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/renault/diogomelo_renault.html"] {
    height:1048vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/festival/diogomelo_festival.html"] {
    height:222vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/dacia/diogomelo_dacia.html"] {
    height:376vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/confiauto/diogomelo_confiauto.html"] {
    height:699vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/musadecor/diogomelo_musadecor.html"] {
    height:183vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/lupi/diogomelo_lupi.html"] {
    height:262vw!important;
}

.lity-iframe-container iframe[src*="img/portefolio/studiogo/diogomelo_studiogo.html"] {
    height:68vw!important;
}

.lity-iframe .lity-wrap:before {
    height: auto;
}

.lity-iframe {
    overflow-y: scroll;
}

.lity-iframe-container {
    padding-top: 0;
    max-height:initial!important;
    overflow: unset;
}

#wrap-studio .btn {
   background: #5541e1;
   font-family: 'nimbus_sans_d_otbold_extended';
   border: 1px solid #5541e1;
   font-size: 14px;
   padding: 16px 25px;
   margin-top: 30px;
}

.checkbox-primary input[type=checkbox]:checked + label::before {
    background-color: #5541e1;
    border-color: #5541e1;
}

.studio-board p {
    display:none;
}

a:focus, a:hover {
    color: initial;
}

.container-menu .white:focus, .container-menu .white:hover {
    color:#fff!important;
}

.scrolled {
    opacity:0;
}

header {
    opacity:1;
    transition: opacity 0.5s;
}

@media (min-width: 992px) {
    #container-portfolio {
    overflow-x: auto;
    white-space: nowrap;
    font-size:0px;
    }
.col-md-2 {
    float:none;
    display:inline-block;
    }
#container-portfolio::-webkit-scrollbar:horizontal {
    display: none;
   }
}

.disabled-link {
pointer-events: none;
}

.preloader .cssload-speeding-wheel {
    top: calc(50% - 16.5px)!important;
    left: calc(50% - 13.5px)!important;
}

#wrap-portfolio {
    background: #f3f3f3;
    height: 100vh;
}

@media (max-width: 1250px) {
     header .container-menu.mobile-01:after {
       position: absolute;
       font-size:8px;
       color: #cacaca;
       content:'START';
       right: 25px;
       top:37px;
       letter-spacing:1px;
       
}
    header .container-menu.mobile-02:after {
    position: absolute;
       font-size:8px;
       color: #cacaca;
       content:'PROJECTS';
       right: 25px;
       top:37px;
       letter-spacing:1px;
       
}
    header .container-menu.mobile-03:after {
       position: absolute;
       font-size:8px;
       color: #cacaca;
       content:'ABOUT';
       right: 25px;
       top:37px;
       letter-spacing:1px;
       
}
    header .container-menu.mobile-04:after {
       position: absolute;
       font-size:8px;
       color: #cacaca;
       content:'STUDIO';
       right: 25px;
       top:37px;
       letter-spacing:1px;
}
   .box-shadow {
    background: #202328a1;
    margin: 22px;
    margin-top: 118px;
    position: absolute;
}
    .studio-logo-box {
    padding-top: 40px;
}
   #wrap-studio .cta-row {
    bottom: 35px;
    position: unset;
    transform: unset;
    margin-top: -60px;
    height: 120px;
}
    
    #wrap-studio .login-container {
    padding: 20px;
    padding-top: 0px;

}
    .studio-logo-box {
    width: 100%;
    padding: 40px;
    padding-bottom: 0px;
}
    #wrap-studio.active .cta-btn-2 {
    margin-top: 0px;
}   
    .studio-board {
    height: 100%;
}
    .studio-board , #wrap-studio.active {
    display: block;
}
}

@media (max-width: 600px) { 
    .studio-board {
    min-height: 200vw;
}
}

.checkbox label::before {
    background-color: transparent;
}

.lity-wrap, .lity-container, .lity-content, .lity-iframe-container {
    height: auto;
}

.lity-iframe-container iframe {
    position:relative;
}

.socials { 
    display: inline-block;
    color: #dedede;
    float: right;
    font-size: 30px;
    letter-spacing: 3px;
}

header .socials.white {
    color: #454b57;
}

.socials i:hover {
    color:#5541e1;
}

.fa-linkedin:before {
    content: "\f08c";
}

#wrap-studio .cta-row {
    bottom:20px!important;
}

@media (min-width: 1251px) and (max-height: 750px) { 

    #wrap-studio .cta-row, #wrap-about .cta-row {
        display:none;
    }
}