@charset "UTF-8";

/*
Theme Name: Alexandre Duarte Portfolio
Author: Alexandre Duarte
Description: Alexandre Duarte Portfolio
Version: 0.0.1
Tags: designer, portfolio
*/

*{ margin: 0; padding: 0; outline: 0; -webkit-overflow-scrolling: touch; /*box-sizing: border-box;*/ }

/* COLORS AND FONTS: Set here the generic rules for mobile and desktop: usually the color, background-color, font-family etc */

/* Colors:
Black: #000
White: #fff
Yellow: #fde23e
Light green: #1CD893
Grey (hover link): #969696 
*/

/*********************** TYPOGRAPHY ************************/

html,
body{ margin: 0; padding: 0; }

body, *{ font-family: 'Oxygen', sans-serif; color: #000; background-color: transparent; }

a{ font-family: 'Oxygen', sans-serif; font-weight: 700; text-decoration: underline; transition: all 0.2s ease-in-out; }

strong{ font-weight: 700; }

h1, h2, h3, h4, h5, h6, p, small, ul, li{ font-family: "Oxygen", "Lucida Sans Unicode", sans-serif; text-rendering: optimizeLegibility; white-space: normal; letter-spacing: 0.03em; }

h1,h2{ font-weight: 300; text-transform: uppercase; }
h3,h4,h5,h6,p, ul, li{ font-weight: 300; letter-spacing: -0.02em; }
small, label{ font-weight: 400; }

ul{ list-style-type: none; }

input, select, textarea, label{ font-family: "Oxygen", "Lucida Sans Unicode", sans-serif; text-rendering: optimizeLegibility; white-space: normal; }

input,
select,
textarea{ font-weight: 300; transition: all .3s ease-in-out; }

/*
.text-left{ text-align: left; }
.text-centered{ text-align: center; }
.text-right{ text-align: right; }
*/

.text-shadow{ text-shadow: 2px 2px 2px #000; } /* Above background images */

/* Light container*/

.light .icon{ color: #000; }

.light a{ color: #c7ac00; /*color: #000;*/ }
.light a:hover{ color: #969696; }

.light strong{ color: #000; }

.light ::selection { background: #000; color: #fff; }

.light h1,.light h2{ color: #000; }
.light h3,.light h4,.light h5,.light h6,.light p, .light ul, .light li{ color: #000; }
.light small{ color: #000; }

.light h1 span, .light h2 span, .light h3 span, .light h4 span, .light h5 span, .light h6 span, .light p span, .light small span, .light li span{ background-color: #F8DC30; } /* Highlight on text */

.light h1 span.icon, .light h2 span.icon, .light h3 span.icon, .light h4 span.icon, .light h5 span.icon, .light h6 span.icon, .light p span.icon, .light small span.icon, .light li span.icon{ background-color: transparent; } /* Icon */

.light input,
.light select,
.light textarea{ color: #000; border: 0; /*border-top: 0; border-left:0; border-right: 0; border-bottom: 2px solid #000; box-shadow: -1px -1px 4px rgba(0,0,0,.2); */ background-color: #f5f5f5; }

.light label{ color: #000; }

/* Semidark container*/

.semidark .icon{ color: #000; }

.semidark a{ color: #000; }
.semidark a:hover{ color: #969696; }

.semidark strong{ color: #000; }

.semidark ::selection { background: #000; color: #fff; }

.semidark h1,.semidark h2{ color: #000; }
.semidark h3,.semidark h4,.semidark h5,.semidark h6,.semidark p, .semidark ul, .semidark li{ color: #000; }
.semidark small{ color: #000; }

.semidark h1 span, .semidark h2 span, .semidark h3 span, .semidark h4 span, .semidark h5 span, .semidark h6 span, .semidark p span, .semidark small span, .semidark li span{ background-color: #fff; } /* Highlight on text */

.semidark h1 span.icon, .semidark h2 span.icon, .semidark h3 span.icon, .semidark h4 span.icon, .semidark h5 span.icon, .semidark h6 span.icon, .semidark p span.icon, .semidark small span.icon, .semidark li span.icon{ background-color: transparent; } /* Icon */

.semidark input,
.semidark select,
.semidark textarea{ color: #000; border: 0; /*border-top: 0; border-left:0; border-right: 0; border-bottom: 2px solid #000; box-shadow: -1px -1px 4px rgba(0,0,0,.2); */ background-color: #f5f5f5; }

.semidark label{ color: #000; }

/* Dark container*/

.dark .icon{ color: #fff; }

.dark a{ color: #F8DC30; /*color: #fff;*/ }
.dark a:hover{ color: #969696; }

.dark strong{ color: #fff; }

.dark ::selection { background: #fff; color: #000; }

.dark h1,.dark h2{ color: #fff; }
.dark h3,.dark h4,.dark h5,.dark h6,.dark p, .dark ul, .dark li{ color: #fff; }
.dark small{ color: #fff; }

.dark h1 span, .dark h2 span, .dark h3 span, .dark h4 span, .dark h5 span, .dark h6 span, .dark p span, .dark small span, .dark li span{ background-color: #ffe95e; } /* Highlight on text */

.dark h1 span.icon, .dark h2 span.icon, .dark h3 span.icon, .dark h4 span.icon, .dark h5 span.icon, .dark h6 span.icon, .dark p span.icon, .dark small span.icon.icon, .dark li span.icon{ background-color: transparent; } /* Icon */

.dark input,
.dark select,
.dark textarea{ color: #000; border: 0; /*border-top: 0; border-left:0; border-right: 0; border-bottom: 2px solid #000; box-shadow: -1px -1px 4px rgba(0,0,0,.2); */ background-color: #f5f5f5; }

.dark label{ color: #fff; }

/************************ FORMS *************************/

input[type="email"],input[type="text"],input[type="number"],input[type="password"],select, textarea{ -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; }

input::-webkit-input-placeholder{ color: #a0a0a0; }
input::-moz-placeholder{ color: #a0a0a0; }
input:-ms-input-placeholder{ color: #a0a0a0; }
input:-moz-placeholder{ color: #a0a0a0; }
textarea::-webkit-input-placeholder{ color: #a0a0a0; }
textarea::-moz-placeholder{ color: #a0a0a0; }
textarea:-ms-input-placeholder{ color: #a0a0a0; }
textarea:-moz-placeholder{ color: #a0a0a0; }

input[type="email"]:hover,
input[type="email"]:focus,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus{ background-color: #ffee8a; }

textarea{ width: 96%; min-height: 300px; resize: none; }

select{ color: #000; background-color: #F8DC30; background-image: url("images/icons/dropdown_arrow.svg"); background-position: 98% 50%; background-size: auto 44%; background-repeat: no-repeat; } /* Default select */

.search{ color: #000; background-color: #F8DC30; background-image: url("images/icons/input_search.svg"); background-position: 92% 50%; background-size: auto 44%; background-repeat: no-repeat; } /* Default search */

/* input.typesearch{ display: inline-block; } */

input[type="checkbox"],
input[type="radio"]{ width: 1em; height: 1em; }

/*
input[type="checkbox"],
input[type="radio"]{ -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; width: 20px; height: 20px; background-color: #D23D43; }
*/

/* Alerts */

.form-alert{ margin-bottom: 1.5em; font-size: 0.88em; font-weight: 400; letter-spacing: 0.05em; line-height: 0.9em; color: #fd3e3e; display: block; }

input[type="email"].form-alert-field,
input[type="text"].form-alert-field,
input[type="number"].form-alert-field,
input[type="password"].form-alert-field,
select.form-alert-field,
textarea.form-alert-field{ -webkit-animation-name: animatedAlertFieldEmpty; animation-name: animatedAlertFieldEmpty; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; -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 animatedAlertFieldEmpty{

    0% { background-color: #f5f5f5; }
    50%{ background-color: #ffcfcf; }
    100%{ background-color: #f5f5f5; }

}

@keyframes animatedAlertFieldEmpty{

    0% { background-color: #f5f5f5; }
    50%{ background-color: #ffcfcf; }
    100%{ background-color: #f5f5f5; }

}

/*********************** BUTTONS ************************/

.btn{ font-family: 'Oxygen', sans-serif; font-weight: 300; }

.btn, .btn-icon, .btn-transparent{ border: none; text-decoration: none; text-transform: normal; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; text-rendering: optimizeLegibility; white-space: normal; vertical-align: middle; }

.btn-icon{ border-radius: 50% !important; } /* Only icon */

.btn-transparent{ font-weight: 400; background-color: transparent !important; } /* Text with icon aside with no background color */

.btn span, .btn-icon span, .btn-transparent span{ background-color: transparent !important; } /* Override the typography span rule */

/* */

.btn:hover,.btn-icon:hover, .btn-transparent:hover{ outline: 0; }

/* Light container buttons */

.light .btn, 
.light .btn:visited{ color: #000; background-color: #F8DC30; }
.light .btn:hover,
.light .btn:focus{ color: #fff; background-color: #000; }
.light .btn:hover span{ color: #fff; } /* Icon inside */

.light .btn-icon, 
.light .btn-icon:visited{ color: #000; background-color: #F8DC30; }
.light .btn-icon:hover,
.light .btn-icon:focus{ color: #fff; background-color: #000; }
.light .btn-icon:hover span{ color: #fff; } /* Icon inside */

.light .btn-transparent,
.light .btn-transparent:visited{ color: #000; }
.light .btn-transparent:hover,
.light .btn-transparent:focus{ color: #bcbcbc; }
.light .btn-transparent:hover span{ color: #bcbcbc; }

/* Semidark container buttons */

.semidark .btn, 
.semidark .btn:visited{ color: #fff; background-color: #000; }
.semidark .btn span,
.semidark .btn span:visited{ color: #fff; } /* Icon inside */
.semidark .btn:hover,
.semidark .btn:focus{ color: #000; background-color: #fff; }
.semidark .btn:hover span{ color: #000; } /* Icon inside */

.semidark .btn-icon, 
.semidark .btn-icon:visited{ color: #fff; background-color: #000; }
.semidark .btn-icon, 
.semidark .btn-icon:visited span{ color: #fff; } /* Icon inside */
.semidark .btn-icon:hover,
.semidark .btn-icon:focus{ color: #000; background-color: #fff; }
.semidark .btn-icon:hover span{ color: #000; } /* Icon inside */

.semidark .btn-transparent,
.semidark .btn-transparent:visited{ color: #000; }
.semidark .btn-transparent span,
.semidark .btn-transparent span:visited{ color: #000; } /* Icon inside */
.semidark .btn-transparent:hover,
.semidark .btn-transparent:focus{ color: #bcbcbc; }
.semidark .btn-transparent:hover span{ color: #bcbcbc; }

/* Dark container buttons */

.dark .btn, 
.dark .btn:visited{ color: #000; background-color: #F8DC30; }
.dark .btn span{ color: #000; } /* Icon inside */
.dark .btn:hover,
.dark .btn:focus{ color: #000; background-color: #fff; }
.dark .btn:hover span{ color: #000; } /* Icon inside */

.dark .btn-icon, 
.dark .btn-icon:visited{ color: #000; background-color: #F8DC30; }
.dark .btn-icon, 
.dark .btn-icon:visited span{ color: #000; } /* Icon inside */
.dark .btn-icon:hover,
.dark .btn-icon:focus{ color: #000; background-color: #fff; }
.dark .btn-icon:hover span{ color: #000; } /* Icon inside */

.dark .btn-transparent,
.dark .btn-transparent:visited{ color: #fff; }
.dark .btn-transparent span,
.dark .btn-transparent span:visited{ color: #fff; } /* Icon inside */
.dark .btn-transparent:hover,
.dark .btn-transparent:focus{ color: #bcbcbc; }
.dark .btn-transparent:hover span{ color: #bcbcbc; }

/*
a.agenda-home:hover .icon::after{ content: "Ver Agenda Completa"; }
a.agenda:hover .icon::after{ content: "Voltar"; }
a.loja:hover .icon::after{ content: "Voltar"; }
a.carrinho:hover .icon::after{ content: "Continuar comprando"; }
*/

/****************** Grid *******************/

.light{ background-color: #fff; }
.semidark{ background-color: #F8DC30; }
.dark{ background-color: #000; }

.light .col-content-left,
.light .col-content-right{ background-color: #fff; }

.semidark .col-content-left,
.semidark .col-content-right{ background-color: #F8DC30; }

.dark .col-content-left,
.dark .col-content-right{ background-color: #000; }

/******************* In common with mobile and desktop *******************/

#overlay{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.9); z-index: 541; display: none; }
#overlay.active{ display: block; cursor: pointer; }

#overlay-white{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(255,255,255,1); z-index: 531; }

#overlay-white{ display: none; } /* For this theme is disabled */


/* OLD BELOW - REVIEW EVERYTHING */


/************************ MODAL *************************/

/*For further options check: https://www.w3schools.com/howto/howto_js_lightbox.asp */

/*

.modal { display: none; position: fixed; z-index: 999; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,.8);  }

.modal-content { position: relative; background-color: #fff; margin: auto; padding: 0 2em 2em 2em; width: 90%; max-width: 600px; border-radius: 5px; }

.modal .close { cursor: pointer; cursor: pointer; position: absolute; top: 1em; right: 1em; height: 30px; }
.modal .close:hover,
.modal .close:focus { text-decoration: none; cursor: pointer; }

.modal .close .icon{ font-size: 1.8em;}

*/