/* Telefones em paisagem e abaixo */
@media (max-width: 480px) { 
    /* estilos aqui */

    .envioMaterial{
        padding: 0;
        margin-left: -5px;
        margin-right: -5px;
    }

    .titulo-video {
        margin-top: 0.6em;
        font-size: 1.25em;
        font-weight: bold;
    }

    .linkVideo {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border: none;
        box-shadow: none;
    }

    .msg-box-body {
        width: 90%;
        margin-left: 5%;
    }

    .mural {
        font-size: 1.3em;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px;
        text-align: left;
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
        height: 7%;
        border-radius: .5em;
        border: #BDBDBD solid 1px;
        background-color: #FBFBEF;
        box-shadow: 2px 2px 2px #E6E6E6;
    }

    .linkAtividade {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border-radius: .5em;
        border: #BDBDBD solid 1px;
        box-shadow: 2px 2px 2px #E6E6E6;
    }
    

    .datapost{
        margin-top: -10px;
        float: none!important
    }

    .videos {
        margin-top: 5%;
        text-align: center;
        margin-bottom: 25%;
    }

    .video-principal video {
        width: 100%;
    }

    .linkVideo video {
        width: 100%;
    }

    .linkVideo {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border: none;
        box-shadow: none;
    }

    .destitulo{
        width: 100%;
        text-align: center;
        margin-bottom: 5%;
    }

    .navbar-custom-menu>.navbar-nav>li {
        position: static;
        color: white;
    }

    .header-black ul, #menu, .breadcrumb{
		display: none;
    }   

    .content-header > .breadcrumb{
        display: none;
    }

    #logo-nav {
		left: 18%;
        width: 49%;
        z-index: 10;
        transition: 1s
    }
    
    header.open-menu #logo-nav {
        transform: rotate(360deg);
    } 
    
    #btn-bars {
		color: #fff;
		font-size: 22px;
		position: absolute;
		top: 4px;
		background: none;
		border: none;
		display: block;
    }
    
	#btn-bars {
		left: 6px;
    }

    #btn-bars i {
        color: #AAA;
        font-size: 1.5em;
    }

    header .header-black {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9;
	}
    
    header #menu-mobile {
		position: fixed;
		top: 40px;
		background-color: rgba(50,50,50,.8);
		width: 80%;
		height: 100%;
		left:-80%;
		transition: 1s;
		z-index: 5;
    }

     header.open-menu #menu-mobile {
		left: 0;
    }

    header.open-menu #menu-mobile-mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 4;
    }

    header.open-menu #logo-nav {
        position: fixed;
        top: 41px;
        left: calc(40% - 97px);
        width: 34%;
    }
       
    header.open-menu #menu-mobile ul {
		margin: 20px;
		margin-top: 100px;
	}
	header.open-menu #menu-mobile li {
		text-align: center;
		border-top: #CCC 1px solid;
	}
	header.open-menu #menu-mobile li:last-child {
		border-bottom: #CCC 1px solid;
	}
	header.open-menu #menu-mobile li a {
        color: #ffffff;
        font-family: inherit;
        font-weight: bold;
        font-size: 18px;
        padding: 20px;
        display: block;
	}
	header.open-menu .bar-close {
		position: absolute;
		bottom: 40px;
		background-color: #261c30;
		height: 40px;
		width: 100%;
	}
	header.open-menu .bar-close .btn-close {
		background:none;
		border: none;
		color: #fff;
		font-size: 22px;
    }
    
    .lema-section{
        font-size: 1.3em;
    }

    .content-projetos {
        display: block;
        padding: 5px;
        
    }

    .projeto-pedagogico, .estrutura, .nivel-ensino {
        padding: 20px;
        text-align: center;
        width: 100%;
    }

    .content-projetos h3{
        font-size: 2em;
    }

    .content-projetos p{
        font-size: 1em;
    }

    .content-footer {
        display: block;
    }      

    #propaganda, #menu-bottom, #links {
        padding: 5px;
        width: 100%;
    }

    .links address,
    .links p {
        margin-left: 5%;
        margin-bottom: 5%;
    }

    #btn-envio-atividade{
        text-align: center;
    }

    
    #envio-atividade-aluno{
        text-align: center;
        margin-top: 6%;
        margin-left: -2%;
    }
    

}


/* Telefones em paisagem a tablet em retrato */
@media (min-width: 481px) and (max-width: 767px) {
    /* estilos aqui */

    .titulo-video {
        margin-top: 0.6em;
        font-size: 1.25em;
        font-weight: bold;
    }

    .linkVideo {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border: none;
        box-shadow: none;
    }

    .msg-box-body {
        width: 90%;
        margin-left: 5%;
    }

    .mural {
        font-size: 1.3em;
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px;
        text-align: left;
        margin-left: 3%;
        margin-right: 3%;
        width: 94%;
        height: 7%;
        border-radius: .5em;
        border: #BDBDBD solid 1px;
        background-color: #FBFBEF;
        box-shadow: 2px 2px 2px #E6E6E6;
    }

    .linkAtividade {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border-radius: .5em;
        border: #BDBDBD solid 1px;
        box-shadow: 2px 2px 2px #E6E6E6;
    }

    .datapost{
        margin-top: -10px;
        float: none!important
    }

    .videos {
        margin-top: 5%;
        text-align: center;
        margin-bottom: 25%;
    }

    .video-principal video {
        width: 100%;
    }

    .linkVideo video {
        width: 100%;
    }

    .linkVideo {
        padding: 10px;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        height: 10%;
        border: none;
        box-shadow: none;
    }

    .destitulo{
        width: 100%;
        text-align: center;
        margin-bottom: 5%;
    }

    .navbar-custom-menu>.navbar-nav>li {
        position: static;
        color: white;
    }

    .header-black ul, #menu, .breadcrumb{
		display: none;
    }   

    .content-header > .breadcrumb{
        display: none;
    }

    #logo-nav {
		left: 18%;
        width: 49%;
        z-index: 10;
        transition: 1s
    }
    
    header.open-menu #logo-nav {
        transform: rotate(360deg);
    } 
    
    #btn-bars {
		color: #fff;
		font-size: 22px;
		position: absolute;
		top: 4px;
		background: none;
		border: none;
		display: block;
    }
    
	#btn-bars {
		left: 6px;
    }

    #btn-bars i {
        color: #AAA;
        font-size: 1.5em;
    }

    header .header-black {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9;
	}
    
    header #menu-mobile {
		position: fixed;
		top: 40px;
		background-color: rgba(50,50,50,.8);
		width: 80%;
		height: 100%;
		left:-80%;
		transition: 1s;
		z-index: 5;
    }

     header.open-menu #menu-mobile {
		left: 0;
    }

    header.open-menu #menu-mobile-mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 4;
    }

    header.open-menu #logo-nav {
        position: fixed;
        top: 41px;
        left: calc(40% - 97px);
        width: 34%;
    }
       
    header.open-menu #menu-mobile ul {
		margin: 20px;
		margin-top: 100px;
	}
	header.open-menu #menu-mobile li {
		text-align: center;
		border-top: #CCC 1px solid;
	}
	header.open-menu #menu-mobile li:last-child {
		border-bottom: #CCC 1px solid;
	}
	header.open-menu #menu-mobile li a {
        color: #ffffff;
        font-family: inherit;
        font-weight: bold;
        font-size: 18px;
        padding: 20px;
        display: block;
	}
	header.open-menu .bar-close {
		position: absolute;
		bottom: 40px;
		background-color: #261c30;
		height: 40px;
		width: 100%;
	}
	header.open-menu .bar-close .btn-close {
		background:none;
		border: none;
		color: #fff;
		font-size: 22px;
    }
    
    .lema-section{
        font-size: 1.3em;
    }

    .content-projetos {
        display: block;
        padding: 5px;
        
    }

    .projeto-pedagogico, .estrutura, .nivel-ensino {
        padding: 20px;
        text-align: center;
        width: 100%;
    }

    .content-projetos h3{
        font-size: 2em;
    }

    .content-projetos p{
        font-size: 1em;
    }

    .content-footer {
        display: block;
    }      

    #propaganda, #menu-bottom, #links {
        padding: 5px;
        width: 100%;
    }

    .links address,
    .links p {
        margin-left: 5%;
        margin-bottom: 5%;
    }

    #btn-envio-atividade{
        text-align: center;
    }
    
    #envio-atividade-aluno{
        text-align: center;
        margin-top: 6%;
        
    }
    
}

/* Tablet em retrato a paisagem e desktop */
@media (min-width: 768px) and (max-width: 979px) {
    /* estilos aqui */
    
    
    .header-black ul, #menu, .breadcrumb{
		display: none;
    }   

    .content-header > .breadcrumb{
        display: none;
    }
        
    #btn-envio-atividade{
        text-align: center;
    }
    
    .datapost {
    margin: 0px 0 -8px;
    }
    #btn-bars {
		color: #fff;
		font-size: 22px;
		position: absolute;
		top: 4px;
		background: none;
		border: none;
		display: block;
    }
    
	#btn-bars {
		left: 6px;
    }

    #btn-bars i {
        color: #AAA;
        font-size: 1.5em;
    }
}


/* Desktop grande */
@media (min-width: 1200px) {
 /* estilos aqui */
 #btn-envio-atividade{
    text-align: center;
}


#envio-atividade-aluno{
    text-align: center;
}

}