@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Playball&display=swap');

/*@font-face {
    font-family: 'Barbershop';
    src: url('../fonts/Barbershop in Thailand.eot');
    src: local('☺'), url('../fonts/Barbershop in Thailand.woff') format('woff'), url('../fonts/Barbershop in Thailand.ttf') format('truetype'), url('../fonts/Barbershop in Thailand.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}*/



html {
	height: 100%;
	font-family: 'Montserrat', sans-serif;
	color: #777;
    font-size: 15px;
	}

h1, h2, h3, h4, h5 { font-family:  'Montserrat', serif; font-weight: 300; color: #666; line-height: 1.0}

b { font-weight: 700 }

.lh-txt-shadow-large{ text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3)  }
.lh-txt-shadow-medium{ text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3)  }
.lh-txt-shadow-small{ text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1)  }

.hero-font {font-family: 'Playball', cursive;}

.uk-white {color: #FFF}

.meia-clara {background-color: #d8c5a7}
.meia-media {background-color: #92653b}
.meia-marrom-masculina {background-color: #462a0b}
.meia-escura {background-color: #222}

.back-masculina {background-color: #00142a}

.back-yellow {background-color: rgb(255,204,0)!important}
.back-red {background-color: #822627!important}
.back-blue {background-color: #376aa9!important}


.yellow {
    color: rgb(255,204,0);
}

#produtos li:hover img {
    -ms-transform: translate(0px, -30px); /* IE 9 */
    -webkit-transform: translate(0px, -30px); /* Safari */
    transform: translate(0px, -30px);

    -webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
-webkit-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
   -moz-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
     -o-transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
        transition: all 800ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}




/* UI KIT Personal  */ 

.uk-text-bold {
    font-weight: 600
}

.uk-text-small {
    font-size: .75rem;
    line-height: 1.4;
}

.uk-text-xsmall {
    font-size: .65rem;
    line-height: 1.4;
}


.uk-navbar-container:not(.uk-navbar-transparent) {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.11);
    box-shadow: 0 2px 2px rgba(0,0,0,0.08);
}


.uk-navbar-sticky {
    border-bottom: 1px solid rgba(0,0,0,0.11);
    box-shadow: 0 2px 2px rgba(0,0,0,0.08);
}

.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle { padding: 0 25px; font-size: 1rem; }

.uk-tab > .uk-active > a { border-bottom: 2px solid #ffdd54 }
.uk-tab::before { border-color: transparent;}

.uk-button-primary, .uk-light .uk-button-primary {
    background-color: rgb(255,204,0);
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
    border: 1px solid transparent;
}
.uk-button-primary:focus, .uk-button-primary:hover, .uk-light .uk-button-primary:hover {
    background-color:#ffdd54;
    color: #fff
}

.uk-button-default {
    color: #777;
}


.uk-dotnav > * > * {
    width: 20px;
    height: 20px;
}

.uk-dotnav > * {
    padding-left: 20px
}
.uk-card-primary.uk-card-body .uk-dotnav > * > *, .uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > *, .uk-card-secondary.uk-card-body .uk-dotnav > * > *, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > *, .uk-light .uk-dotnav > * > *, .uk-offcanvas-bar .uk-dotnav > * > *, .uk-overlay-primary .uk-dotnav > * > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > * {
    background-color: rgba(255,204,0, 0.5);
    /*border: 2px solid rgb(255,204,0)*/
    border: none;
}
.uk-card-primary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > .uk-active > *, .uk-card-secondary.uk-card-body .uk-dotnav > .uk-active > *, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > .uk-active > *, .uk-light .uk-dotnav > .uk-active > *, .uk-offcanvas-bar .uk-dotnav > .uk-active > *, .uk-overlay-primary .uk-dotnav > .uk-active > *, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > .uk-active > *, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > .uk-active > * {
    background-color: rgba(255,204,0, 0.5);
    border: 4px solid rgb(255,204,0)
}

.uk-card-primary.uk-card-body .uk-dotnav > * > :focus, .uk-card-primary.uk-card-body .uk-dotnav > * > :hover, .uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > :focus, .uk-card-primary > :not([class*="uk-card-media"]) .uk-dotnav > * > :hover, .uk-card-secondary.uk-card-body .uk-dotnav > * > :focus, .uk-card-secondary.uk-card-body .uk-dotnav > * > :hover, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > :focus, .uk-card-secondary > :not([class*="uk-card-media"]) .uk-dotnav > * > :hover, .uk-light .uk-dotnav > * > :focus, .uk-light .uk-dotnav > * > :hover, .uk-offcanvas-bar .uk-dotnav > * > :focus, .uk-offcanvas-bar .uk-dotnav > * > :hover, .uk-overlay-primary .uk-dotnav > * > :focus, .uk-overlay-primary .uk-dotnav > * > :hover, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :focus, .uk-section-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :focus, .uk-section-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :focus, .uk-tile-primary:not(.uk-preserve-color) .uk-dotnav > * > :hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :focus, .uk-tile-secondary:not(.uk-preserve-color) .uk-dotnav > * > :hover {
   background-color:#ffdd54; 
}

.uk-badge-big {
    height: 44px;
    padding: 0 15px;
    border-radius: 500px;
    font-size: .875rem;
    color: #fff!important
}

/* UK FORM */

.uk-input, .uk-select, .uk-textarea { 
    border: none;
    border-bottom: 2px solid #ddd;
    font-size: 15px;
    line-height: 26px;
    color: #8A8179;
    background-color: rgba( 0,0,0, 0.03);
    /*border-radius: 10px*/
 }

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    color: #8A8179;
    border-color:rgb(255,204,0);;
    background-color: rgba( 255,255,255, 0.5);

}