/************************ HEADER ************************/

#header{ position: fixed; top: 0; left: 2.9em; width: 100%; height: 50px; display: block; margin: 0; z-index: 542; }

#header .page-title{ position: absolute; left: 0; top: 0; width: 1.35em; height: 1.1em; background-image:url(images/alexandre_duarte_logo.svg); background-size: auto 68%; background-repeat: no-repeat; background-position: 0.35em 50%; transition: all 0.5s ease-in-out; background-color: #000; /*border-bottom-right-radius: 5px;*/ } /* Logo */

#header .page-title:hover{}
#header .page-title:hover span::after{ position: absolute; left: 6em; top: 0.3em; font-size: 0.25em; font-weight: 400; line-height: 1.3em; width: auto; min-width: 176px; height: auto; color: #fff; background-color: #000; content: "Alexandre Duarte UX UI Designer Portfolio"; padding: 0.6em 0.8em; border-radius: 0.1em; }

/********************* MENU OPENED **********************/

/* Menu structure */

#main-nav{ position: fixed; left: 0; top: 0; width: auto; margin: 0; padding: 0; display: block; transition: all 0.2s linear; z-index: 500; }
#main-nav{ font-size: 1.5em; line-height: 1.3em; }

#overlay-white{ display: block; } /* Animated in desktop by js/interaction-functions.js */

#main-nav{ cursor: pointer; outline: none; }
#main-nav.active::after{ }

/* Toggle button */

.wrapper-dropdown a.btn-open,
.wrapper-dropdown.active a.btn-open,
.wrapper-dropdown a.btn-open:hover,
.wrapper-dropdown.active a.btn-open:hover,
.wrapper-dropdown a.btn-open:visited,
.wrapper-dropdown.active a.btn-open:visited,
.wrapper-dropdown a.btn-open:focus,
.wrapper-dropdown.active a.btn-open:focus{ font-family: 'Oxygen', sans-serif; text-align: center; text-decoration: none; /*color: #000; background-color: #F8DC30;*/ color: #000; background-color: #F8DC30; /*border: 2px solid #000;*/ } /* Toggle label */

.wrapper-dropdown a.btn-open,
.wrapper-dropdown.active a.btn-open{ position: fixed; left: 0em; top: 0em; font-size: 0.4em; font-weight: 700; width: 30px; height: 31px; z-index: 765; padding: 10px; border-radius: 0; display: block; /*box-shadow: 0 3px 1px 1px rgba(0,0,0,0.25);*/ } /* Toggle label */
/*.wrapper-dropdown.active a.btn-open{ position: fixed; left: 6.6em; top: 0.8em; font-size: 0.4em; font-weight: 700; width: 30px; height: 30px; z-index: 765; padding: 10px; border-radius: 50%; display: block; } */ /* Toggle label */

.wrapper-dropdown a.btn-open::before,
.wrapper-dropdown.active a.btn-open::before{ font-family: 'alexduarte-icons'; color: #000; } /* Toggle icon */

.wrapper-dropdown a.btn-open::before{ content: "\e909"; }
.wrapper-dropdown.active a.btn-open::before{ content: "\e908"; }

.wrapper-dropdown a.btn-open::before,
.wrapper-dropdown.active a.btn-open::before{ font-size: 2.6em; line-height: 0.2em; margin: 0.3em 0 0 0; padding: 0; display: block; } /* Toggle icon */

/* Menu opened */

#main-nav .dropdown{ margin: 0; transition: all 0.5s ease-in-out; overflow: hidden; position: fixed; top: 0; left: -200vw; z-index: 666; margin: 0; padding: 6em 3em; min-width: 300px; /*height: 100vh;*/ min-height: 100vh; /*background-color: #000; */ }

#main-nav.active .dropdown{ left: 0; cursor: default; } /* Menu opening from left */


/*
#main-nav.active .dropdown li:nth-child(1){ 

    -webkit-animation-name: animatedMenuItem1; animation-name: animatedMenuItem1;
    -webkit-animation-duration: 0.35s; animation-duration: 0.35s;
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1; animation-iteration-count: 1;	
    -webkit-animation-direction: normal; animation-direction: normal;
    -webkit-animation-delay: 0; animation-delay: 0;
    -webkit-animation-play-state: running; animation-play-state: running;
    -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
    transition: all 0.5s ease-in-out;
    outline: 1px solid yellow;

}

#main-nav.active .dropdown li:nth-child(2){ outline: 1px solid green; transition: all 0.5s ease-in-out; }
#main-nav.active .dropdown li:nth-child(3){ outline: 1px solid blue; transition: all 0.5s ease-in-out; }

 */

/* Menu itens */

#main-nav .dropdown li,
#main-nav .dropdown li a{ text-decoration: none; display: block; transition: all 0.3s linear; }

#main-nav .dropdown li div{ width: auto; font-family: 'Oxygen', sans-serif; font-size: 3.6em; line-height: 1em; letter-spacing: -0.015em; color: #fff; margin: 0; padding: 0; width: 100%; display: block; }

#main-nav .dropdown li a{ color: #fff; text-shadow: 1px 1px 1px #000; }

#main-nav .dropdown li a:hover{  margin-left: 0.5em; transition: all 0.2s ease-in-out; }

#main-nav .dropdown li a:hover,
#main-nav .dropdown li a:hover div{ color: #F8DC30; }

/* Copyright */

#main-nav div.copyright{ position: fixed; left: 6.5em; bottom: 3em; font-size: 0.5em; line-height: 1em; color: #fff; display: none; opacity: 0; } 

#main-nav.active div.copyright{ display: block; opacity: 1; }


/******************** PROJECTS PAGE ********************/

.works-list{ display: block; margin: 0; padding: 0; }

.works-list li{ margin: 0; padding: 0; float: left; display: inline-block; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; }
.works-list li img{ display: block; width: 100%; }
.works-list a{ display: block; position: relative; cursor: pointer; color: #fff; }

@media
only screen and (min-width: 1081px){ 
    
    .works-list li{ width: 25%; }
}

@media
only screen and (min-width: 1381px),
only screen and (min-width: 1381px),
only screen and (min-width: 1381px),
only screen and (min-width: 1381px),
only screen and (min-width: 1381px),
only screen and (min-width: 1381px){ 
    
    .works-list li{ width: 20%; }
    
}


/* Mouseover each Job */

.works-list a .job-info{

    position: absolute;
    z-index: 90;

    opacity: 0;
    display: block;

    overflow: hidden;

    width: 80%; height: 60%;

    padding: 30% 10% 0 10%;

    font: 700 1.2em/1.4 "Oxygen", "Lucida Sans Unicode", sans-serif;
    letter-spacing: 0.02em;

    -moz-text-shadow: 1px 1px 1px #000;
    -webkit-text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px #000;

    color: #fff;
    text-align: center;

}

/* Animação */

.works-list a:hover .job-info{

    opacity: 1;

    -webkit-animation-name: animatedJobhover;
    animation-name: animatedJobhover;

    -webkit-animation-duration: 0.35s;
    animation-duration: 0.35s;

    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;	

    -webkit-animation-direction: normal;
    animation-direction: normal;

    -webkit-animation-delay: 0;
    animation-delay: 0;

    -webkit-animation-play-state: running;
    animation-play-state: running;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    background-size: 60px auto, 60px auto;
    background-position: 50% 150%, 50% 150%;

    background-repeat: no-repeat, no-repeat;

}

@-webkit-keyframes animatedJobhover{

    0% { background-position: 50% 150%, 50% 150%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    25% { background-position: 50% 150%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    60% { background-position: 50% 80%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    80% { background-position: 50% 83%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    100% { background-position: 50% 80%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }
}

@keyframes animatedJobhover{

    0% { background-position: 50% 150%, 50% 150%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    25% { background-position: 50% 150%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    60% { background-position: 50% 80%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    80% { background-position: 50% 83%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

    100% { background-position: 50% 80%, 50% 80%; background-image: url(../images/icons/ico-ver-job-seta.svg), url(../images/icons/ico-ver-job-outline.svg); }

}

/* */

.works-list a .black-bg,
.works-list a:hover .black-bg{ width: 100%; height: 100%; background-color: rgba(0,0,0,.8); }

.works-list a .black-bg{ opacity: 0; display: block; line-height: 1.2em; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; overflow: hidden; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 80; }

.works-list a:hover .black-bg{ opacity: 1; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border: 1px solid #000; }


/******************** PROJECT DETAIL PAGE ********************/

.work-images{ text-align: center; box-shadow: inset 0px -50px 8px -10px #000; }
.work-images h2{ display: inline-block; margin-right: 0.55em; }
.work-images .slides li{ padding: 0; margin: 0; } /* Remove distance from bottom */

.work-images .slides li{ min-height: 420px; background-image: url(images/loading/loading2.gif); background-repeat: no-repeat; background-size: 60px auto; background-position: 50% 50%; }

.work-technical-info small{ margin-bottom: 0; }

/*
.work-images .flex-container{ outline: 10px solid green; }
.work-images .flexslider{ outline: 10px solid blue; }
*/

.work-description{ background-color: #fff; } /* Override the dark typography rules and apply the light rules */

.work-description h1, 
.work-description h2,
.work-description h3,
.work-description h4,
.work-description h5,
.work-description h6,
.work-description p,
.work-description small,
.work-description a,
.work-description strong,
.work-description span{ color: #000 !important; }

.work-description ::selection { background: #000; color: #fff; }


@media screen and (min-width: 1081px) and (max-width: 1499px){

    .work-images h2{ margin-top: 3em; }
    .work-images{ float: none; width: auto; margin: 0; padding: 0;}
    .work-details{ float: none; margin: 0 auto; max-width: 1180px; padding: 5em 0 1em 0;} /* Same padding and margin as .row */
       
    .work-description{ float: right; width: 69%; margin-top: 0; margin-bottom: 5em; padding: 3em 3em 2em 3em; }
    
    .work-description::after{ display: none; }
    
    .work-technical-info{ float: left; width: 14%; min-width: 250px; margin-top: 0; }
    .work-images .icon{ font-size: 2em; display: inline-block; vertical-align: top; margin-top: -0.4em; }
}

@media screen and (min-width: 1500px){

    .work-images h2{ margin-top: 3em; }
    .work-images{  float: left; width: 70vw; height: 100vh; margin: 0; padding: 0; }
    .work-details{ width: auto; height: 100vh; margin: 0; padding: 0; overflow: auto; }
    .work-details-content{ padding: 6em 2em 2em; }
    .work-description{ float: none; width: auto; margin-top: 0; padding: 2em 3.1em 1em 2.7em; }
    
    .work-description::after{ position: fixed; right: 2.8em; bottom: 1em; font-family: 'alexduarte-icons' !important; content: "\e900"; font-size: 1.4em; width: auto; height: auto; color: #000; display: block; -webkit-animation-name: animatedMoreContentArrow; animation-name: animatedMoreContentArrow; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

    @-webkit-keyframes animatedMoreContentArrow{

        0% { bottom: 1em; }
        50%{ bottom: 0.5em; }
        100%{ bottom: 1em; }

    }

    @keyframes animatedMoreContentArrow{

        0% { bottom: 1em; }
        50%{ bottom: 0.5em; }
        100%{ bottom: 1em; }

    }
    
    .work-technical-info{ float: none; border-top: 1px solid #000; width: auto; margin-top: 0; margin-bottom: 2em; padding: 2em 3em; }
    .work-images .icon{ font-size: 2em; display: inline-block; vertical-align: top; margin-top: -0.4em; }

}

/******************** Back Home ********************/

#back-home{ position: absolute; top: 1.7em; right: 5em; z-index: 566; width: auto; }
#back-home a{ text-align: center; width: auto; height: 1.4em; line-height: 1.4em; padding: 0.4em 0.7em; display: block; cursor: pointer; color: #000 !important; background-color: #fff; border-radius: 20px; text-decoration: none; }
#back-home a span{ margin-right: 0.5em; } /* Icon */

/******************** CONTACT PAGE ********************/

#contact-page{ height: 100vh; }

@media screen and (min-width: 1081px) and (max-width: 1469px){
    
    #contact-page{

        background-image: url(images/graphics/contato-bottom-right.png);
        background-size: 650px auto;
        background-repeat: no-repeat;
        background-position: bottom right;
        
        /*background-image: url(images/graphics/contact-bottom-left.png), url(images/graphics/contact-top-right.png);
        background-size: auto 207px, 254px auto;
        background-repeat: no-repeat, no-repeat;
        background-position: bottom left, top right;*/
    }  
}

@media screen and (min-width: 1470px) and (max-width: 1700px){
 
    #contact-page{
        
        background-image: url(images/graphics/contato-bottom-right.png);
        background-size: 800px auto;
        background-repeat: no-repeat;
        background-position: bottom right;
        
        /*background-image: url(images/graphics/contact-bottom-left.png), url(images/graphics/contact-top-right.png);
        background-size: auto 207px, 254px auto;
        background-repeat: no-repeat, no-repeat;
        background-position: bottom left, top right;*/
    }  
    
}

@media screen and (min-width: 1701px){
    
    #contact-page{
        
        background-image: url(images/graphics/contato-bottom-right.png);
        background-size: 1080px auto;
        background-repeat: no-repeat;
        background-position: bottom right;
        
        /*background-image: url(images/graphics/contact-bottom-left.png), url(images/graphics/contact-top-right.png);
        background-size: auto 207px, 254px auto;
        background-repeat: no-repeat, no-repeat;
        background-position: bottom left, top right;*/ 
       
    }  
    
}

/* */

#contact-page h2{ text-transform: none; letter-spacing: -0.03em; margin-bottom: 1em; }
#contact-page h6{ }
#contact-page p{ width: auto; padding: 0 0 0 1em; /*border-bottom: 2px solid #fff;*/ }
#contact-page .icon{ display: inline-block; vertical-align: middle; /* font-size: 2.4em; line-height: 0.7em; margin-right: 0.2em; */ font-size: 1.5em; line-height: 0.8em; padding: 0.3em 0.2em; margin-right: 0.4em; border-radius: 0em; background-color: #fff; }
#contact-page a{ color: #F8DC30; }
#contact-page .icon{ color: #000; }

#contact-content{ }

/******************** ABOUT ME PAGE ********************/

#aboutme-page{ height: 100vh; }

@media screen and (min-width: 1081px) and (max-width: 1469px){
    
    #aboutme-page{
        
        background-image: url(images/graphics/about-me-bottom-right.png), url(images/graphics/about-me-top-right.png);
        background-size: 144px auto, 267px auto;
        background-repeat: no-repeat, no-repeat;
        background-position: 100.5% 100.5%, 100% 0%;
    }  
}

@media screen and (min-width: 1470px) and (max-width: 1700px){
 
    #aboutme-page{
        
        background-image: url(images/graphics/about-me-bottom-left.png), url(images/graphics/about-me-bottom-right.png), url(images/graphics/about-me-top-right.png);
        background-size: 262px auto, 220px auto, 396px auto;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: -0.5% 100.5%, 100.5% 100.5%, 100% 0%;
    }  
    
}

@media screen and (min-width: 1701px){
    
    #aboutme-page{
        
        background-image: url(images/graphics/about-me-bottom-left.png), url(images/graphics/about-me-bottom-right.png), url(images/graphics/about-me-top-right.png);
        background-size: 312px auto, 270px auto, 446px auto;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: -0.5% 100.5%, 100.5% 100.5%, 100% 0%;   
       
    }  
    
}

#aboutme-page .col-7 p,
#aboutme-page .col-5 p{ background-color: #fff; }

/* */

#aboutme-page h2{ text-transform: none; letter-spacing: -0.03em; }
#aboutme-page h3{ }
#aboutme-page .profile-picture{ margin: 0 auto 1.5em auto; width: 140px; height: auto; border-radius: 50%; display: block; }

#aboutme-page .icon-greetings{ width: 22px; height: 22px; margin-left: 6px; background-color: transparent; vertical-align: middle; display: inline-block; background-image: url(images/icons/emoji_sunglasses.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; }

#aboutme-page .row div:first-child p{ padding-right: 3em; }
#aboutme-page .row div:last-child{ margin: 6em 0 0 0; }

#aboutme-page .icon{ margin: 0; }

/******************** LANGUAGE SELECT ********************/

#language-selector{ position: fixed; top: 0.5em; right: 1em; display: block; z-index: 765; }
#language-selector select{ width: auto; height: auto; line-height: 1.2em; padding: 0.5em 2.2em 0.5em 0.8em; border-radius: 0.1em; color: #000; background-color: #fff !important; background-position: 82% 50%; background-size: auto 55%; border: 2px solid #000; font-weight: 700; font-size: 0.8em; }