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

#header{ position: fixed; bottom: 0; left: 0; width: 100%; height: 4.5em; display: block; margin: 0; z-index: 542; background-color: #000; box-shadow: -2px -30px 120px rgba(0,0,0,0.55); }

#header .page-title{ width: 2.4em; height: 1.6em; background-image:url(images/alexandre_duarte_logo.svg); background-size: auto 80%; background-repeat: no-repeat; background-position: 50% 50%; /*transition: all 0.5s ease-in-out; background-color: #000; border-radius: 2.2em;*/ } /* Logo */

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

/* Menu structure */

#main-nav{ position: fixed; left: 50%; bottom: 0.5em; width: auto; margin: 0 0 0 -1.4em; 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: none; }

#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{ /*position: fixed; top: 1.9em; left: 9em; z-index: 765;*/ font-family: 'Oxygen', sans-serif; text-align: center; text-decoration: none; /*color: #000; background-color: #F8DC30;*/ color: #000; background-color: #F8DC30; border: 8px solid #000; } /* Toggle label */

.wrapper-dropdown a.btn-open,
.wrapper-dropdown.active a.btn-open{ font-size: 0.5em; font-weight: 700; width: 3em; height: 3em; padding: 1.2em; border-radius: 0.2em; display: block; /*box-shadow: 0 3px 1px 1px rgba(0,0,0,0.25);*/ } /* 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; bottom: 7em; left: -200vw; z-index: 666; margin: 30% 0 0 2em; padding: 0; width: auto; /*height: 100vh;*/ /*background-color: #000; */ text-align: left; }

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

/* 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{ font-family: 'Oxygen', sans-serif; font-size: 2.9em; line-height: 1em; font-weight: 700; letter-spacing: -0.015em; color: #fff; text-align: auto; margin: 0; padding: 0; width: auto; display: block; }

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

#main-nav .dropdown li a:hover{ /* No hover state */ }

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

/* Copyright */

#main-nav div.copyright{ position: fixed; left: 0; bottom: 7em; width: 100%; font-size: 0.7em; line-height: 1.5em; text-align: center; 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 (-webkit-min-device-pixel-ratio: 2)      and (max-device-width: 1080px) and (max-width: 1080px) ,
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-device-width: 1080px) and (max-width: 1080px) ,
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-device-width: 1080px) and (max-width: 1080px) ,
only screen and (        min-device-pixel-ratio: 2)      and (max-device-width: 1080px) and (max-width: 1080px) ,
only screen and (                min-resolution: 192dpi) and (max-device-width: 1080px) and (max-width: 1080px) ,
only screen and (                min-resolution: 2dppx)  and (max-device-width: 1080px) and (max-width: 1080px) { 

    .works-list li{ width: 50%;}
}

/* Mouseover each Job */

.works-list a .job-info,
.works-list a .black-bg,
.works-list a:hover .job-info,
.works-list a:hover .black-bg{
    display: none;
}


/******************** 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: 380px; 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; }

.work-images h2{ margin: 1em auto 1em auto; width: 70%; vertical-align: top; }
.work-images{ width: 100%; margin: 0; padding: 0;}
.work-details{ margin: 0 auto;  padding: 5em 0 1em 0;} /* Same padding and margin as .row */  
.work-description{ width: auto; margin: 0 2em 2em; padding: 2em; display: block; }

.work-description::after{ display: none; }

.work-technical-info{ width: auto; min-width: none; margin: 0 2em 8em 2em; padding: 2em; display: block; }
.work-images .icon{ font-size: 2em; position: absolute; top: 1.5em; z-index: 111; display: block; }
.work-images .icon-arrow-left{ left: 0.4em; }
.work-images .icon-arrow-right{ right: 0.3em; }

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

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

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

#contact-page{
    height: 100vh;
    padding-top: 7vh;
    background-image: url(images/graphics/contato-top-right.png);
    background-size: 430px auto;
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

/*#contact-page{ background-image:url(images/contact-page-background.jpg); background-size: auto 100%; background-repeat: repeat-x; background-position: 0 0; }*/

#contact-page h2{ font-size: 2.1em; text-transform: none; letter-spacing: -0.03em; margin-bottom: 1.4em; }
#contact-page h6{ font-size: 1.3em; }
#contact-page p{ width: auto; padding: 0 0 1.2em 0; /*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{
    padding-top: 14vh;
    padding-bottom: 10vh;
    background-image: url(images/graphics/about-me-top-right.png), url(images/graphics/about-me-bottom-left.png);
    background-size: 420px auto, 280px auto;
    background-repeat: no-repeat, no-repeat;
    background-position: 100% -60px, 0% 96.5%;
}

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

#aboutme-page .icon-greetings{ width: 56px; height: 56px; margin-left: 16px; 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; }

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

#language-selector{ position: fixed; bottom: 0; right: 0; width: auto; height: auto; display: block; z-index: 765; }
#language-selector select{ width: auto; height: auto; line-height: 1.2em; padding: 0.4em 2.2em 0.4em 0.8em; border-radius: 0.2em; color: #000; background-color: #fff !important; background-position: 82% 50%; background-size: auto 52%; border: 4px solid #000; font-weight: 700; font-size: 1.2em; }