/*
 Classes auxiliares utlizadas em qualquer lugar
 ========================================================== */

.grecaptcha-badge {
    z-index: 3;
}

.centralize {
    margin: 0 auto;
    float: none;
}

.text-center {
    text-align: center;
}


/*
 Loaders
 ========================================================== */

.loader {
    height: 100px;
}

.loading:not(.simplefavorite-button) {
    width: 100%;
    position: relative;
    height: 100%;
    cursor: wait;
    display: none;
}

.is-loading .loading {
    display: block;
}

.loading>.loading__animation {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 100;
    background: transparent;
}

.loading>.loading__animation--orange>span {
    border: 5px solid #DCDCDC;
    border-radius: 100%;
    border-left-color: #364A93;
    left: 50%;
    top: 50%;
    position: absolute;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
}

.loading>.is-animating>span {
    animation: animate 1s cubic-bezier(0, .25, .7125, .1) infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Loading with body bg animation*/

html.is-loading body {
    width: 100wh;
    height: 90vh;
    overflow: hidden;
    background: linear-gradient(-45deg, #afafaf, #eee, #efefef, #ffffff);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

html.is-loading body>.loading {
    overflow: hidden;
    height: 100vh;
    ;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}


/*
 Transições
 ========================================================== */

.effect-transition {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.effect-opacity {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    -moz-opacity: 1;
    /* Netscape */
    opacity: 1;
    /* Good browsers */
}

.effect-opacity:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
    -moz-opacity: 0.8;
    /* Netscape */
    opacity: 0.8;
    /* Good browsers */
}


/*
 Tooltip Styles
 ========================================================== */


/* Add this attribute to the element that needs a tooltip */

.tooltip {
    position: relative;
    z-index: 8;
    cursor: pointer;
}


/* Hide the tooltip content by default */

.tooltip .tooltip-msg {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -ms-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
}

.tooltip .tooltip-icone {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
}

.tooltip:hover .tooltip-icone {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}


/* Position tooltip above the element */

.tooltip .tooltip-msg {
    position: absolute;
    /* alinhando o elemento com margin e valores absolutos */
    bottom: 150%;
    left: 50%;
    margin-bottom: 9px;
    margin-left: -59px;
    padding: 4px 0;
    width: 118px;
    height: 11px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 1;
}

.tooltip .tooltip-msg.tooltip-oeste {
    top: 50%;
    margin-top: -9px;
    left: -90%;
    margin-left: -106.2px;
    bottom: initial;
}

.tooltip .tooltip-msg.tooltip-sul {
    top: 100%;
    margin-top: 9px;
    left: 50%;
    margin-left: -59px;
    bottom: initial;
}


/* Triangle hack to make tooltip look like a speech bubble */


/*.tooltip .tooltip-msg.tooltip-norte:after {
	position     : absolute;
	bottom       : 150%;
	left         : 50%;
	margin-left  : -5px;
	width        : 0;
	border-top   : 5px solid #000;
	border-top   : 5px solid rgba(0, 0, 0, 0.9);
	border-right : 5px solid transparent;
	border-left  : 5px solid transparent;
	content      : " ";
	font-size    : 0;
	line-height  : 0;
}

.tooltip .tooltip-msg.tooltip-oeste:after {
	border-top            : 5px solid transparent;
	border-right          : 0;
	border-bottom         : 5px solid transparent;
	border-left           : 6px solid rgba(0,0,0,.9);
	content               : " ";
	font-size             : 0;
	line-height           : 0;
	position              : absolute;
	right                 : -6px;
	margin-top            : 2px;
	-webkit-border-right-radius : 2px;
	-moz-border-right-radius    : 2px;
	border-right-radius         : 2px;
}
.tooltip .tooltip-msg.tooltip-sul:after {
	border-top                  : 0;
	border-right                : 5px solid transparent;
	border-left                 : 5px solid transparent;
	border-bottom               : 6px solid rgba(0,0,0,.9);
	content                     : " ";
	font-size                   : 0;
	line-height                 : 0;
	position                    : absolute;
	right                       : -6px;
	margin-top                  : 2px;
	-webkit-border-right-radius : 2px;
	-moz-border-right-radius    : 2px;
	border-right-radius         : 2px;
}*/


/* Show tooltip content on hover */

.stts-materia:hover .tooltip .tooltip-msg {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}


/* Setas */

.ie .arrow-up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #f5f5f5;
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -10px;
    visibility: hidden;
    display: block;
}

.arrow-up {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #ccc;
    display: block;
}

.arrow-up:after,
.arrow-up:before {
    bottom: 100%;
    left: 25%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow-up:after {
    border-color: rgba(245, 245, 245, 0);
    border-bottom-color: #f5f5f5;
    border-width: 5px;
    margin-left: -5px;
}

.arrow-up:before {
    border-color: rgba(204, 204, 204, 0);
    border-bottom-color: #ccc;
    border-width: 6px;
    margin-left: -6px;
}


/* Divisores Horizontais */

.divider {
    display: block;
    height: 1px;
    width: 100%;
    padding: 0.5em 0;
    max-height: 1px;
}

.divider--pointed:after {
    border-color: rgba(204, 204, 204, 0);
    border-width: 1px;
    border-style: dotted;
    margin-top: 2px;
}


/* Vex fix font-size */

.vex-dialog-message,
.vex-dialog-buttons {
    font-size: 1.4em !important;
    line-height: 1.1428571428571428em;
}

.vex-dialog-input textarea {
    border: 1px solid #dedede !important;
    padding: 1em !important;
}

.vex .vex-content {
    max-width: 90% !important;
}

.vex.vex-theme-default .vex-content {
    font-size: 1.2em !important;
    line-height: 1.1333333333333333333333333333333em !important;
}


/* _buy.scss media */

@media only screen and (max-width: 1300px) {
    .maps__address .maps__item {
        padding: 0 5rem;
    }
}

@media only screen and (max-width: 700px) {
    .maps__address .maps__item {
        padding: 0 5rem;
        width: 50vw;
    }
}

@media only screen and (max-width: 580px) {
    .maps__address .maps__item {
        padding: 0 5rem;
        width: 100vw;
    }
}

@media only screen and (max-width: 768px) {
    section.banner-home .banner__item {
        background-position: right top;
    }
}