body, html{
	-webkit-font-smoothing: antialiased;
	font-family: 'Open Sans', sans-serif;
	max-height: 100%;
	height: auto !important;
	color: #777;
	position: unset !important;
}

h1{
	font-size: 30px;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.125em;
}

h5 {
	font-size: 1em;
}

h6 {
	margin-top: 0px;
	margin-bottom: 10px;
	font-size: 0.75em;
	line-height: 18px;
	font-weight: 700;
}

p {
	margin-bottom: 20px;
	line-height: 27px;
	font-weight: 400;
}

ul{
	padding: 0px;
	margin: 0px;
}

a, a:hover{
	color: inherit;
}

figure{
	margin: 0px;
	padding: 0px;
}

.img-full{
	width: 100%;
	height: auto;
}
/*FIM DO RESET*/
/*VARIABLES*/
/*list*/
.list-col-1{
	columns: 1;
}

.list-col-2{
	columns: 2;
}

.list-icon{
	list-style: none;
	margin-bottom: 10px;
	margin-left: 30px;
}

.icon-check:before{
	font-family: FontAwesome;
	content: "\f00c";
	margin-left: -30px;
	margin-right: 10px;
	color: #7ec700;
}

.icon-wrong:before{
	font-family: FontAwesome;
	content: "\f00d";
	margin-left: -30px;
	margin-right: 10px;
	color: #666;
}

.check-success li:before{
	color: #28a745!important;
}

.check-white li:before{
	color: white!important;
}

.list-inline-block{
	display: inline-block;
}

/*BACKGROUND*/
.bg-none{
	background-color: inherit !important;
}

/*black*/
.bg-black-30{
	background-color: rgba(0,0,0,0.3);
}

.bg-black-40{
	background-color: rgba(0,0,0,0.4);
}

.bg-black-50{
	background-color: rgba(0,0,0,0.5);
}

.bg-black-60{
	background-color: rgba(0,0,0,0.6);
}

.bg-black-70{
	background-color: rgba(0,0,0,0.7);
}

.bg-black-80{
	background-color: rgba(0,0,0,0.8);
}

.bg-black-90{
	background-color: rgba(0,0,0,0.9);
}

.bg-black{
	background-color: rgba(0,0,0,1);
}

.bg-true-black .navbar-toggler{
	color: white !important;
}

/*TEXT*/
.text-small{
	font-size: 10px;
}

.font-300{
	font-weight: 300;
}

.font-700{
	font-weight: 700;
}

.font-800{
	font-weight: 800;
}

.font-900{
	font-weight: 900;
}

.disable-item{
	color: rgba(0,0,0,0.3);
}

.border-black-20{
	border-color: rgba(0,0,0,0.2) !important;
}

.border-white-20{
	border-color: rgba(255,255,255,0.2) !important;
}

.w-80{
	width: 80%!important;
}

.mt-negative-0{
	margin-top: 0 !important;
}


.mt-negative-1{
	margin-top: -1.5rem !important;
}

.mt-negative-2{
	margin-top: -3rem !important;
}

.mt-negative-3{
	margin-top: -4.5rem !important;
}

.mt-negative-4{
	margin-top: -6rem !important;
}

.mt-negative-5{
	margin-top: -7.5rem !important;
}

/*MD CLASS*/
@media (min-width: 768px){
	.fixed-md-top{
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	.mt-md-negative-4{
		margin-top: -6rem !important;
	}

		.mt-md-negative-0{
		margin-top: 0 !important;
	}


	.mt-md-negative-1{
		margin-top: -1.5rem !important;
	}

	.mt-md-negative-2{
		margin-top: -3rem !important;
	}

	.mt-md-negative-3{
		margin-top: -4.5rem !important;
	}
}

/*FIX ISSUE MODAL IOS*/
@media (max-width: 480px) {

        .modal {
            height: 500px; /* Set a default max height of the modal (adjusted later)*/
            position: fixed; /* Display modal in the centre of your screen */
            overflow-y: scroll; /*  Ensure that the modal is scroll-able */
            -webkit-overflow-scrolling: touch; /* Avoid having to use 2 finger scroll on iOS    */
        }
        .modal.fade.in{
            top: 5px; /* Use more screen real estate */
        }
        .modal-body{
            /* Increase the max height of the modal body to try & avoid both it,
             * and the modal container having scroll bars which results in odd behavior */ 
            max-height: 2400px; 
        }   
    }

    /* Now adjust the height so it handles various screen sizes & orientations */
    /* You could make this as granular as you like, or have it more granular at common screen sizes
     * but it should start at the height we set on .modal (i.e. 500px) & work down */
    @media (max-width: 480px) and (max-height: 500px){.modal{ height: 450px}}
    @media (max-width: 480px) and (max-height: 450px){.modal{ height: 400px}}
    @media (max-width: 480px) and (max-height: 400px){.modal{ height: 350px}}
    @media (max-width: 480px) and (max-height: 350px){.modal{ height: 300px}}
    @media (max-width: 480px) and (max-height: 300px){.modal{ height: 250px}}
    @media (max-width: 480px) and (max-height: 250px){.modal{ height: 200px}}
    @media (max-width: 480px) and (max-height: 200px){.modal{ height: 150px}}