/*------------------------------------------------------------------------*/
/*  1500px                                                                */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 1500px) {

	body { font: normal 12px/20px "Basetica-Light"; }
	h1   { font: normal 90px/80px "Minion Pro"; letter-spacing: -3px; }
	h2   { font: normal 54px/60px "Basetica-Regular"; letter-spacing: 0; }
	h3   { font: normal 44px/40px "Minion Pro"; letter-spacing: -1px; }
	h4   { font: normal 18px/26px "Basetica-Regular"; letter-spacing: 0; }

	header {
	    width: 220px;
	}
	header #logo {
	    width: 160px;
	    height: 72px;
	}
	header #menu ul li a {
	    font: normal 26px / 34px "Basetica-Regular";
	}
	header #menu .social a.youtube,
	header #menu .social a.instagram {
	    width: 40px;
	    height: 40px;
	}

	main .content {
	    width: calc(100% - 220px);
	    padding: 0 40px;
	}

	section#humanschool .button a.login,
	.button_mob a.login {
	    font: normal 14px / 50px "Basetica-Medium";
	    background-size: auto 50px;
	    padding: 0 30px 0 50px;
	}

	section#humanschool .title p {
	    font: bold 32px / 40px "Minion Pro";
	    margin: 120px 0 0 0;
	}

	section#humanschool .title h1 {
	    margin: 0 0 20px 0;
	}
	section#humanschool .title h1 span {
	    letter-spacing: -3px;
	}

	section#humanschool .text p {
	    max-width: 720px;
	    font: normal 16px / 20px "Basetica-Regular";
	    margin: 30px 0;
	}
	section#humanschool .text p b {
	    font: bold 16px / 20px "Basetica-Medium";
	}

	section#humanschool .description span {
	    font: normal 14px / 20px "Basetica-Light";
	}
	section#humanschool .description {
	    right: 40px;
	    bottom: 40px;
	}

	section#sobre {
	    margin: 90px 0;
	}
	section#sobre .text {
	    width: calc(100% - 220px);
	    margin: 90px 0 0 0;
	    padding: 0 60px;
	}

	section#parceria .text {
	    width: 100%;
	    padding: 0 120px 0 60px;
	}

	section#como {
	    margin: 90px 0 0 0;
	}
	section#como .text {
	    width: calc(100% - 220px);
	    margin: 90px 0 0 0;
	    padding: 0 60px;
	}
	section#como .text h1 {
	    margin: 90px 0 40px 0;
	}

	section#como .steps .lista {
	    width: calc(100% - 60px);
	}
	section#como .steps {
	    height: 300px;
	}

	section#disci {
	    margin: 150px 0 0 0;
	}
	section#disci .steps {
	    height: 260px;
	    margin: 90px 0 0 0;
	}

	section#disci .steps .lista li {
	    width: 360px;
	}
	section#disci .steps .lista li p,
	section#disci .steps .lista li h3 {
	    max-width: 320px;
	}

	section#professor {
	    margin: 150px 0 0 0;
	}

	section#planos {
	    margin: 240px 0 120px 0;
	}
	section#contatos {
	    margin: 120px 0 0 0;
	}
	section#contatos .title {
	    width: 100%;
	}
	section#contatos .infos {
	    width: 100%;
	}
	section#contatos .questions .category {
	    width: 100%;
	}

	section#form .logo-compre img {
	    height: 120px;
	}
	section#form .title p {
	    font: bold 34px / 42px "Minion Pro" !important;
	}
	section#form .formulario {
	    margin: 0 auto;
	    width: 540px;
	}

}








/*------------------------------------------------------------------------*/
/*  480px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 480px) {

	body { font: normal 14px/22px "Basetica-Light"; }
	h1   { font: normal 60px/50px "Minion Pro"; letter-spacing: -1px; }
	h2   { font: normal 20px/40px "Basetica-Regular"; letter-spacing: 0; }
	h3   { font: normal 36px/34px "Minion Pro"; letter-spacing: 0; }
	h4   { font: normal 18px/26px "Basetica-Regular"; letter-spacing: 0; }

	header #menu,
	section#humanschool .button,
	section#cards .cards img.bottom,
	section#professor .left {
		display: none;
	}

	nav {
		display: block;
	}
	nav .social a.youtube,
	nav .social a.instagram {
	    width: 60px;
	    height: 60px;
	}

	main {
		display: inline-block;
	}
	main .content {
		width: 100%;
		float: none;
	}

	header {
		width: 100%;
		height: 130px;
		background: #0d0d0d;
	}
	header #logo {
		width: 200px;
        height: 90px;
		top: 20px;
		left: 20px;
		z-index: 10;
	}

	.button_mob {
	    display: inline-table;
	}

	.fixar_menu {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 12;
	}
	.mostrar_menu {
		transform: translate(0, 0);
	}
	.esconder_menu {
		transform: translate(0, -100%);
	}

	section#humanschool {
		height: auto;
		margin: 0;
	}
	section#humanschool .title p {
        font: bold 20px / 24px "Minion Pro";
        margin: 200px 0 0 0;
    }
	section#humanschool .title h1 {
		margin: 0 0 10px 0;
		padding: 0;
	}
	section#humanschool .text p {
        font: normal 16px / 20px "Basetica-Medium";
        margin: 20px 0;
    }
    section#humanschool .text p b {
        font: bold 16px / 20px "Basetica-Medium";
    }

    section#humanschool .selo img {
	    width: 100%;
	    height: auto;
	}
	section#humanschool .description {
		width: 100%;
		position: inherit;
		margin: 30px 0 0 0;
		padding: 0 40px;
	}

	section#sobre {
		margin: 90px 0 0 0;
	}
	section#sobre .title {
		top: 40px;
		margin: 0;
	}
	section#sobre .imagem {
		width: calc(100% + 80px);
		position: relative;
		left: -40px;
	}
	section#sobre .text {
		width: 100%;
		text-align: left;
		margin: 40px 0 0 0;
		padding: 0;
	}
	section#sobre .text h3 {
		margin: 0 0 20px 0;
	}
	section#sobre .text p {
		margin: 0 0 10px 0;
	}
	section#sobre .text span.signature {
		margin: 20px 0 0 0;
	}

	section#parceria {
    	margin: 60px 0;
	}
	section#parceria .text {
	    width: 100%;
	    margin: 0;
	    padding: 0;
	}
	section#parceria img.desk {
		display: none;
	}
	section#parceria img.mob {
		display: block;
	}

	section#como .title {
		max-width: 300px;
		top: 40px;
		margin: 0;
	}

	section#como .imagem a.play h2::after {
	    height: 2px;
	    bottom: 6px;
	}
	section#como .imagem a.play {
		bottom: 40px;
	}
	section#como .imagem a.play h2::before {
		width: 40px;
		height: 40px;
		top: 0;
		left: -50px;
	}
	section#como .text {
		width: 100%;
		text-align: left;
		margin: 40px 0 0 0;
		padding: 0;
	}
	section#como .text h3 {
		margin: 0 0 20px 0;
	}
	section#como .text p {
		margin: 0 0 10px 0;
	}
	section#como .steps,
	section#disci .steps,
	section#professor .steps {
		width: calc(100% + 80px);
		height: 400px;
		left: -40px;
	}
	section#disci .steps {
		height: 260px;
	}
	section#professor .steps {
		height: 600px;
		margin: 90px 0 0 0;
	}
	section#como .steps .lista,
	section#disci .steps .lista,
	section#professor .steps .lista {
		width: 100%;
	}
	section#como .steps .lista li,
	section#disci .steps .lista li {
		width: 300px;
	}
	section#professor .steps .lista li {
		width: 280px;
		margin: 0 30px 0 0;
	}
	section#professor .steps .lista li img {
	    width: 100%;
	}
	section#como .steps .lista li h3,
	section#disci .steps .lista li h3,
	section#como .steps .lista li p,
	section#disci .steps .lista li p {
    	max-width: 260px;
	}
	section#professor .steps .lista li h3,
	section#professor .steps .lista li p {
    	max-width: 240px;
	}
	section#como .steps .flickity-slider,
	section#disci .steps .flickity-slider,
	section#professor .steps .flickity-slider {
		margin: 0 0 0 40px;
	}

	.flickity-page-dots {
	    left: 40px;
	}

	section#disci {
        margin: 90px 0 0 0;
    }
    section#disci .title {
	    margin: 0;
	}

	section#planos {
		margin: 120px 0 0 0;
	}
	section#planos .title {
		top: -40px;
		left: 40px;
	}
	section#planos .imagem {
		width: 100%;
		left: 0;
	}
	section#planos .precos {
		width: calc(100% + 40px);
		left: 20px;
		padding: 40px 30px;
	}
	section#planos .precos .planos_menu li {
	    margin: 0 20px 0 0;
	}

	section#planos .precos .planos_menu .selo h4::after,
	section#planos .precos .planos_menu .selo_2 h4::after {
		width: 80px;
		height: 23px;
		top: -25px;
	}

	section#planos .precos .planos_menu {
	    top: 40px;
		left: 30px;
	}
	section#planos .precos .planos_menu li::after {
		height: 2px;
		bottom: -6px;
	}
	section#planos .precos .planos h2 {
		font: normal 60px/60px "Basetica-Medium";
	}
	section#planos .precos .planos h2 b {
		font-size: 40px;
		top: -14px;
	}
	section#planos .precos .planos p {
		font: normal 14px/22px "Basetica-Regular";
	}
	section#planos .precos .planos ul li {
		background-position: 0 2px;
		background-size: 11px auto;
		font: normal 10px/12px "Basetica-Regular";
		padding: 0 0 0 16px;
	}
	section#planos .precos .planos .botao a.sign {
		font: normal 14px/60px "Basetica-Medium";
	}
	section#planos .precos .planos span.info {
		font: normal 9px/12px "Basetica-Regular";
	}

	section#professor {
		margin: 90px 0 0 0;
	}
	section#professor .title {
		position: absolute;
		top: -100px;
		margin: 0;
	}
	section#professor .imagem {
		width: calc(100% + 80px);
		float: none;
		position: relative;
		left: -40px;
		margin: 80px 0 0 0;
	}
	section#professor .text {
		width: 100%;
		margin: 40px 0 0 0;
		padding: 0;
		float: none;
	}
	section#professor .text ul {
		margin: 20px 0 0 0;
		padding: 20px 0 0 20px;
	}
	section#professor .text ul li::before {
		top: 8px;
		left: -16px;
	}
	section#professor .blog {
		width: 100%;
		height: 480px;
		margin: 120px 0 0 0;
	}
	section#professor .blog p {
		font: normal 32px/42px "Basetica-Medium";
	}
	section#professor .blog p::after {
		height: 3px;
	}

	section#contatos {
		margin: 90px 0 0 0;
	}
	section#contatos .title {
		width: 100%;
		float: none;
		margin: 0 0 30px 0;
	}
	section#contatos .infos {
		width: 100%;
		height: 80px;
		float: none;
		padding: 10px;
	}
	section#contatos .infos::before {
		width: 90%;
		height: 1px;
		top: 50%;
		left: 5%;
	}
	section#contatos .infos .left,
	section#contatos .infos .right {
		width: 100%;
		height: 50%;
	}
	section#contatos .infos .right {
		padding: 20px 0 0 0;
	}
	section#contatos .infos .left h3 {
		font: normal 9px/30px "Basetica-Medium";
		letter-spacing: 0;
		margin: 0;
	}
	section#contatos .infos .right a {
		font: normal 32px/32px "Basetica-Medium";
	}
	section#contatos .infos .right a.youtube,
	section#contatos .infos .right a.instagram {
		width: 20px;
		height: 40px;
	}
	section#contatos .infos .right a.instagram {
		margin: 0 5px 0 0;
	}

	section#contatos .questions .category {
	    width: 100%;
	    float: none;
	}
	section#contatos .faq .more {
	    display: none;
	}
	section#contatos .faq .question {
	    line-height: 26px;
	}
	section#contatos .faq {
	    padding: 0 0 60px 0;
	}


	footer#subir {
	    height: 320px;
	    padding: 0 0 80px 0;
	}
	footer#subir .title h1::before,
	footer#subir .title h1::after {
		height: 8px;
	}
	footer#subir p {
		font: normal 9px/20px "Basetica-Light";
		letter-spacing: 1px;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 90px;
		margin: 0 auto;
	}

	.popup .content {
	    width: 340px;
	    padding: 20px;
	}
	.popup .content a.fechar {
	    font: normal 11px/22px "Basetica-Medium";
	    padding: 0 10px;
	    top: -20px;
	}
	.popup .content .desconto {
	    padding: 30px 0;
	}
	.popup .content .desconto h1 {
	    font: normal 80px/50px "Basetica-Medium";
	}
	.popup .content .desconto p {
	    font: normal 12px/18px "Basetica-Medium";
	    letter-spacing: 4px;
	    margin: 20px 0 0 0;
	}
	.popup .content .desconto span {
	    font: normal 30px/20px "Basetica-Medium";
	    letter-spacing: 6px;
	}
	.popup .content .text {
	    font: normal 12px/16px "Basetica-Medium";
	    margin: 20px 0;
	    padding: 0 20px;
	}
	.popup .content a.botao {
	    font: normal 18px/60px "Basetica-Medium";
	}

	section#form .content {
	    padding: 0 40px;
	}
    section#form .logo-compre img {
        height: 120px;
    }
    section#form .title p {
        font: bold 26px / 30px "Minion Pro" !important;
    }
    section#form .formulario {
        margin: 0 auto;
        width: 100%;
    }

}


/*------------------------------------------------------------------------*/
/*  400px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 400px) {

	h1 {
        font: normal 50px / 40px "Minion Pro";
    }
    h3 {
        font: normal 32px / 30px "Minion Pro";
    }
    h4 {
        font: normal 17px / 26px "Basetica-Medium";
    }

	header {
	    height: 110px;
	}
	header #logo {
	    width: 156px;
	    height: 70px;
	}
	nav ul li a {
	    font: normal 34px / 46px "Basetica-Regular";
	}
	nav .social a.youtube,
	nav .social a.instagram {
	    width: 50px;
	    height: 50px;
	}

	section#humanschool .title p {
	    font: bold 18px / 24px "Minion Pro";
	    margin: 180px 0 0 0;
	}

	section#como .steps, section#disci .steps {
	    width: calc(100% + 80px);
	}
	section#disci .steps {
	    height: 200px;
	}
	section#professor .steps {
		height: 540px;
	}

    section#planos .precos .planos_menu .selo h4::after,
    section#planos .precos .planos_menu .selo_2 h4::after {
        width: 103px;
        height: 30px;
        top: -35px;
    }

    section#planos .precos {
        padding: 30px 25px;
    }
    section#planos .precos .planos_menu {
        left: 25px;
    }

    section#form .content {
	    padding: 0 30px;
	}

}