*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	property-moz-box-sizing:border-box;       /*firefox */
	property-webkit-box-sizing:border-box;    /*chrome, safari */
	property-o-border-radius: border-box;  	  /*opera */
	property-ms-border-radius:border-box;     /*internet explorer */
}

/*VARIABLES*/
:root {
    --font-small: 0.875em;
    --font-normal: 1em;
    --font-medium: 1.2em;
    --font-large: 1.4em;

    --color-default: #555555;
    --color-green: #36BA9B;
    --color-blue: #39AED9;
    --color-yellow: #F5B946;
    --color-red: #D94352;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-bold: 700;
    --weight-black: 900;

    --hover-color-green: #61DDBC;
    --hover-color-blue: #66D4F1;
    --hover-color-yellow: #FCD277;
    --hover-color-red: #F76C82;
    --hover-duration: 0.3s;

    --gradient-green: linear-gradient(to right, #42E695 0%, #3BB2B8 50%, #42E695 100%);
    --gradient-blue: linear-gradient(to right, #17EAD9 0%, #6078EA 50%, #17EAD9 100%);
    --gradient-red: linear-gradient(to right, #622744 0%, #C53364 50%, #622744 100%);
    --gradient-yellow: linear-gradient(to right, #FCE38A 0%, #F38181 50%, #FCE38A 100%);

    --radius-normal: 5px;
    --radius-medium: 10px;
    --radius-large: 20px;
    --radius-round: 50%;

    --index-back: -1;
    --index-fold: 2;
    --index-menu: 3;
    --index-modal: 4;
}


/* Colors */
:root{
	--green:   #46ceac;
	--greeb_h: #35ba9b;
	--greeb_l: #61ddbc;
	
	--blue:	   #4fc0e8;
	--blue_h:  #3aadd9;
	--blue_l:  #66d4f1;	
	
	--yellow:   #fdcd56;
	--yellow_h: #f5b945;
	--yellow_l: #fbd277;	
	
	--red: 		#eb5463;
	--red_h:    #d94452;
	--red_l:    #f76c82;	
		
	--black:    #000;
	--black_h:  #333;
	--black_l:  #666;	
}

/*Elements*/
img{
	max-width:100%;	
}

img a{
	border: none;
	display:block;	
}

ul{
	list-style:none;	
}

a{
	text-decoration:none;

}

a:hover{
	text-decoration:none;	
}

.img_thumbnail{
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

/* MÍDIAS */
/* embed é um tipo de tag HTML para media, usada para incorporar arquivos multimedia de áudio e vídeo */
embed,
video,
iframe,
iframe[style] /*estilo interno do iframe*/
{
	max-width:100%;
	height:auto;
}

.embed{
	position:relative;
	padding-bottom:56.25%; /*relativo ao aspect radio dos videos atuais*/
	max-width:100%;
	height:0;
	overflow:hidden; /* vai evitar que um tamanho de media vaze ao tamanho de nossa box */
}

.embed embed,
.embed iframe
.embed object,
.embed video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
/* os elementos internos seguem os externos */
}

.strike{
	text-decoration: line-through;
}

input:-webkit-autofill {
    property-webkit-box-shadow: 0 0 0 30px white inset;
    property-webkit-text-fill-color: #555555 !important;
}

/*CONTAINER*/
.content,
.container {
    display: block;
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
}

.content{
	padding:60px 0;
}


/* BOXSTYLES e EFFECTS */
.radius{
	property--radius:4px;  /* o radius define bordas arredondadas */
	border-radius: var(--radius-normal);	
	property-moz-border-radius: var(--radius); 
	property-webkit-border-radius: var(--radius-normal);  
	property-o-border-radius: var(--radius-normal); 
	property-ms-border-radius:var(--radius-normal);  
}

.rounded{
	--radius:50%;  /* o rounded deixe o elemento todo arredontado */
	border-radius: var(--radius);	
	property-moz-border-radius: var(--radius); 
	property-webkit-border-radius: var(--radius);  
	property-o-border-radius: var(--radius); 
	property-ms-border-radius:var(--radius);  
}

.transition{
	--seconds: 0.2s;
	transition:-duration: var(--seconds);
	property-moz-border-radius: var(--seconds); 
	property-webkit-border-radius: var(--seconds);  
	property-o-border-radius: var(--seconds); 
	property-ms-border-radius:var(--seconds);
	cursor:pointer;  
}

/* BOTÃO */
.btn{
	display:inline-block;
	padding:10px 20px;
	border:none;
	cursor:pointer;	
	font-size:1em;
	font-weight:normal;
	color:#fff;
	text-shadow: 1px 1px rgba(0,0,0,0.3);
}

.btn:hover{
	color:#fff;
	tex-decoration:none;
	background:#666;	
}

.btn-small{
	font-size:0.875em;
}

.btn-big{
	font-size:1.275em;
}

.btn-green{
	background:var(--green);
}

.btn-green:hover{
	background:var(--green_h);	
}

.btn-green-out{
	color:var(--green);
	border:1px solid var(--green);
	background:none;
	text-shadow:none;	
}

.btn-green-out:hover{
	color:var(--green_h);
	border:1px solid var(--green_h);
	background:none;
	text-shadow:none;			
}

.btn-blue{
	background:var(--blue);	
}

.btn-blue:hover{
	background:var(--blue_h);	
}

.btn-blue-out{
	color:var(--blue);
	border:1px solid var(--blue);
	background:none;
	text-shadow:none;	
}

.btn-blue-out:hover{
	color:var(--blue_h);
	border:1px solid var(--blue);
	background:none;
	text-shadow:none;			
}

.btn-yellow{
	background:var(--yellow);	
}

.btn-yellow:hover{
	background:var(--yellow_h);	
}

.btn-yellow-out{
	color:var(--yellow);
	border:1px solid var(--yellow);
	background:none;
	text-shadow:none;	
}

.btn-yellow-out:hover{
	color:var(--yellow_h);
	border:1px solid var(--yellow_h);
	background:none;
	text-shadow:none;			
}

.btn-red{
	background:var(--red);	
}

.btn-red:hover{
	background:var(--red_h);	
}


.btn-red-out{
	/*color:var(--red);*/
	border:1px solid var(--red);
	background:none;
	text-shadow:none;	
	color:#fff;
}

.btn-red-out:hover{
	/*color:var(--red);*/
	border:1px solid var(--red_h);
	background:none;
	text-shadow:none;
	color:#fff;
	border:1px solid #ccc;
	
}

/* TRIGGERS  (mensagens do sistema sucesso, erro, etc) */
.trigger{
	margin-bottom:12px;
	color: #fff;
	font-size:0.875em;
	background:#888;
	text-shadow:1px 1px rgba(0,0,0,0.3);
	padding:12px;
	border:1px solid #666;	
}

.trigger-sucess{
	background: var(--green);
	border-color: var(--green_h);	
}

.trigger-info{
	background: var(--blue);
	border-color: var(--blue_h);
}

.trigger-alert{
	background: var(--yellow);
	border-color: var(--yellow_h);
}

.trigger-error{
	background: var(--red);
	border-color: var(--red_h);
}

/*GRADIENTS*/
.gradient {
    background-size: 200% auto;
    transition-duration: 0.5s;
}

.gradient-green {
    background-image: var(--gradient-green);
}

.gradient-blue {
    background-image: var(--gradient-blue);
}

.gradient-yellow {
    background-image: var(--gradient-yellow);
}

.gradient-red {
    background-image: var(--gradient-red);
}

.gradient-hover:hover {
    background-position: right center;
}



/* FLEXBOX */
.flex{
	display:flex;
	flex-wrap:wrap;	
}

/* 1 box flex */
.flex .flex-1{
	flex-basis:100%;	
}

/* 2 box flex */
.flex .flex-2{
	flex-basis:calc(50% - 40px);
	margin:20px;	
}

/* 3 box flex */
.flex .flex-3{
	flex-basis:calc(33.33% - 30px);
	margin:15px;	
}

/* 4 box flex */
.flex .flex-4{
	flex-basis:calc(25% - 20px);
	margin:10px;	
}