/* Others */
@media only screen and (min-width : 320px) and (max-width : 767px) {
	.center {
		width: auto;
	}

	header {
		background: transparent;
		position: relative;
	}

	header .center {
		height: auto;
		padding: 37px 0 0;
	}

	header h1 {
		float: none;
		margin: 25px 7px 25px;
		position: relative;
		z-index: 30;
	}

	header h1 img {
		width: 100%;
		height: auto;

	}

    .student-logo{
        width: auto;
        height: 50px;
        margin-top: -10px;
        margin-bottom: 9px;
    }

	header nav {
		position: absolute;
		top: 0;
		left: 0;
		height: 37px;
		width: 100%;
		background: #373c3f;
	}

	header nav .trigger-menu-mobile {
		display: block;
		float: right;
		background: #ff0000 url(../../img/pub/ico/menu.png) no-repeat center center;
		width: 41px;
		height: 37px;
		text-indent: -9999px;
		overflow: hidden;
	}

	header nav ul {
		background: #373c3f;
		visibility: hidden;
		position: absolute;
		top: 0;
		opacity: 0;
		width: 100%;
		padding: 5px 0;
		-webkit-transition: top 0.5s, opacity 0.5s;
		-moz-transition: top 0.5s, opacity 0.5s;
		-ms-transition: top 0.5s, opacity 0.5s;
		-o-transition: top 0.5s, opacity 0.5s;
		transition: top 0.5s, opacity 0.5s;
		z-index: 20;
	}

	header nav.open-menu ul {
		visibility: visible;
		top: 37px;
		opacity: 1;
		z-index: 40;
	}

	header nav ul li {
		float: none;
		background: transparent;
		width: auto;
		height: auto;
		border: 0;
	}

	header nav ul li a {
		background: transparent;
		position: static;
		height: auto;
		border: 0;
		color: #fff;
		line-height: 26px;
		-webkit-transition: color 0.2s;
		-moz-transition: color 0.2s;
		-ms-transition: color 0.2s;
		-o-transition: color 0.2s;
		transition: color 0.2s;
	}

	header nav ul li a span {
		background: transparent;
		padding: 0;
	}

	header nav li a:hover, header nav li a.active {
		border: 0;
		height: auto;
		width: auto;
		left: 0;
		top: 0;
	}

	header nav li a:hover span, header nav li a.active span {
		background: transparent;
		padding: 0;
	}

    header div.course-status-bar{
        top: 107px;

        width: 100%;
    }


    div.course-status-bar .progress{
        width: 45%;
    }

    .progress-label {
        left: 18%;
    }

    div.course-status-bar .profile{
        width: 30%;
        margin-right: 18px;
    }

    div.course-status-bar .mainMenu .form-submit {

        width: 30px;
        height: 29px;
        text-indent: -999px;
        position: relative;
        left: -10px;
        top: 10px;
        background-image: url("../../img/pub/ico/home.png");
        background-repeat: no-repeat;
        background-position-x: 50%;
        background-position-y: 50%;
    }

	header .login {
		float: none;
		margin: 25px 10px 0;
	}

	header .login #login-email {
		width: 100%;
	}

	header .login #login-senha {
		width: 65%;
	}

	header .login .links {
		display: none;
	}

	#main {
		padding: 0 10px;
		min-height: auto;
	}

	#main section {
		padding: 10px 0;
	}

	body[data-page="home"] #main .section-1,
	body[data-page="quem-somos"] #main .section-1 {
		display: none;
	}

    .sectionIndexClassroom{
        padding: 70px 0 !important;
    }

	#main .box {
		margin: 20px 0 0;
	}

	#main .box:first-child {
		margin: 0;
	}

	#main .box-1,
	#main .box-2 {
		float: none;
		width: auto;
	}

	#main .box-1 .content,
	#main .box-2 .content {
		height: auto;
	}

	#main .box-1 .header h3 {
		padding: 15px;
	}

	footer .social-media,
	footer .copyright {
		width: auto;
	}

	#main .box-3 .header h3 {
		text-align: center;
	}

	#main .box-3 .text {
		float: none;
		width: auto;
	}

	#main .box-3 .content img {
		float: none;
		display: block;
		margin: 0 auto;
	}

	#main .didatica .header h3 {
		line-height: 30px;
		padding: 15px;
		text-indent: 0;
		text-align: center;
	}

	#main .didatica .content li {
		margin: 0;
		background-position: center 0 !important;
		padding: 130px 0 0 !important;
	}

	#main .didatica .content li .item-content {
		background: transparent;
		box-shadow: none;
	}

	#main .didatica .content li .arrow {
		display: none;
	}

	#main .section-2 {
		background: transparent;
	}

	#main .section-2-mini {
		padding: 10px 0 20px;
	}

	#main .links {
		margin: 0;
	}

	#main .links ul {
		float: none;
		position: static;
		width: 185px;
		margin: 0 auto;
	}

	#main .links ul li {
		float: none;
		position: static;
		margin: 12px 0 0;
	}

	#main .links a {
		float: none;
		display: block;
		text-align: center;
	}

	#main .produtos .header h3 {
		text-indent: 0;
		text-align: center;
		line-height: 30px;
		padding: 15px;
	}

	#main .produtos li {
		background-position: center 0 !important;
		padding: 150px 0 0;
		margin: 0 0 30px;
	}

	#main .produtos li .image {
		width: 100%;
	}

	#main .produtos li .image img {
		height: 102px;
	}

	#main .produtos li .image .btn {
		top: 110px;
	}

	#main .produtos h4,
	#main .produtos p {
		text-align: center;
	}

	#main .contato .header h3 {
		text-indent: 0;
		text-align: center;
		line-height: 30px;
		padding: 15px;
	}

	#main .contato form {
		float: none;
		width: 100%;
		overflow: hidden;
	}

	#main .contato form .form-multiple {
		height: auto;
		overflow: hidden;
	}

	#main .contato form .form-multiple ul {
		margin: 10px 0 0;
	}

	#main .contato form .form-multiple li {
		float: none;
	}

	#main .contato form .form-multiple li label {
		line-height: 20px;
	}

	#main .contato form .form-submit {
		float: none;
		display: block;
		margin: 0 auto;
	}

	#main .contato .itens {
		float: none;
		margin: 20px 0 0;
		width: auto;
	}

	#main .contato .itens ul {
		overflow: hidden;
	}

	#main .contato .itens li {
		float: left;
		width: 30%;
		margin: 0 0 0 5%;
		min-height: 47px;
	}

	#main .contato .itens li:first-child {
		margin: 0;
	}

	#main .encontrar .mapa,
	#main .encontrar .dados {
		float: none;
		width: auto;
        margin: 0px 0px 0px -188px;
	}

	#main .box-4 {
		margin: 0 0 20px !important;
	}

	#main .box-4 .header h3 {
		text-indent: 0;
		text-align: center;
		padding: 15px 35px;
	}

	#main .diagrama {
		background: transparent;
		height: 520px;
		margin: 20px 0;
		padding: 0;
	}

	#main .diagrama h3 {
		font-size: 15px;
	}

	#main .diagrama p {
		font-size: 11px;
	}

	#main .diagrama .acesso {
		position: absolute;
		left: 0;
		top: 0;
	}

	#main .diagrama .cadastro {
		left: auto;
		right: 0;
		top: 0;
	}

	#main .diagrama .perfil {
		left: 0%;
		top: 28.8%;
	}

	#main .diagrama .video-aula {
		left: auto;
		right: 0;
		top: 30.3%;
	}

	#main .diagrama .avaliacao {
		left: 0%;
		top: 65.3%;
	}

	#main .diagrama .certificado {
		left: auto;
		right: 0;
		top: 61.5%;
		width: 125px;
	}

	#main .diagrama .certificado .big {
		display: none;
	}

	#main .diagrama .certificado .mini {
		display: block;
	}

	#main .diagrama .arrow-1,
	#main .diagrama .arrow-2 {
		display: none;
	}

	#main .diagrama .arrow-3 {
		display: block;
		position: absolute;
		top: 5.7%;
		left: 50%;
		margin: 0 0 0 -38px;
	}

	#main .diagrama .arrow-4 {
		display: block;
		position: absolute;
		top: 68.2%;
		left: 50%;
		margin: 0 0 0 -38px;
	}

	#main .diagrama .mais-1 {
		width: 30px;
		top: 22.1%;
		left: 50%;
		margin: 0 0 0 -15px;
	}

	#main .diagrama .mais-2 {
		width: 30px;
		top: 51.9%;
		left: 50%;
		margin: 0 0 0 -15px;
	}

	#main .diagrama .mais-3 {
		display: none;
	}

    body[data-page="learn"] #main .section-1,
    body[data-page="practice"] #main .section-1,
    body[data-page="build"] #main .section-1,
    body[data-page="translate"] #main .section-1,
    body[data-page="listening"] #main .section-1,
    body[data-page="speak"] #main .section-1{
        padding: 40px 0;
    }

    .enviar {
        position: absolute;
        left: 50%;
        display: block;
        margin: -53px 0px 0px -51px !important;
    }
    audio{
        display: block;
        width: 103%;
        margin-left: -3px;

    }
    #upload_form .bt-audio-enviar{
        padding-top: 45px;
    }
    .rounded-list audio{
        margin-top: 5px;
        width: 100%;
    }
    .rounded-list ul{
        display: block;
    }

    .feedbackScore{
        width: 100%;
        left: 0px;
    }

    .dacast-dock{
        width: 360px !important;
        height: 256px !important;
        position: relative;
        margin-left: -20px !important;
    }

	.dacast-dock object{
		width: 360px !important;
		height: 256px !important;
		/*position: relative;*/
	}
}