/* 320px a 424px */
@media (min-width: 320px) and (max-width: 424px) and (orientation:portrait) {
    body {
        /* border: 4px solid red; */
        height: auto;
    }

    .container-fluid {
        /* border: 4px solid red; */
        height: auto;
    }

    .row-container {
        /* border: 8px solid rgb(6, 214, 41); */
        display: inline-block;
        height: auto;
    }

    .col-md-4, .col-md-9 {
        /* border: 4px solid red; */

    }

    .col-sm-4, .col-sm-9 {
        /* border: 4px solid red; */

    }

    h1 {
        /* border: 4px solid red; */
        padding-left: 0px;
        text-align: left;
        padding-top: 10%;
    }

    .descricao {
        /* border: 4px solid red; */
        display: contents;
    }

    .mais {
        display: none;
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked+h5 .mais {
        display: inline;
    }

    input[type="checkbox"]:checked+h5 .mostrarmais {
        display: none;
    }


    .login-box {
        /* border: 4px solid red; */
        left: 50%;

    }

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        /* width: 90%!important; */
        margin-bottom: 5%;

    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        width: 25%;
        margin-left: 1%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 66vw;
        margin-bottom: 25%;
        height: 13vh;
    }

    #box-login .form-control {
        /* border: 2px solid blue; */
        /* border: 2px solid rgba(0, 0, 0, 0.5); */
        width: 80vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 8vh;
    }
}

/*  */
@media (min-width: 425px) and (max-width: 768px) and (orientation:portrait) {
    body {
        /* border: 4px solid red; */
        height: auto;
    }

    .container-fluid {
        /* border: 4px solid red; */
        height: auto;
    }

    .row-container {
        /* border: 8px solid rgb(6, 214, 41); */
        display: inline-block;
        height: auto;
    }

    .col-md-4, .col-md-9 {
        /* border: 4px solid red; */

    }

    .col-sm-4, .col-sm-9 {
        /* border: 4px solid red; */

    }


    h1 {
        /* border: 4px solid red; */
        padding-left: 0px;
        text-align: left;
        padding-top: 10%;
    }

    .descricao {
        /* border: 4px solid red; */
        display: contents;
    }

    .mais {
        display: none;
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked+h5 .mais {
        display: inline;
    }

    input[type="checkbox"]:checked+h5 .mostrarmais {
        display: none;
    }


    .login-box {
        /* border: 4px solid red; */
        left: 50%;

    }

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        /* width: 90%!important; */
        margin-bottom: 5%;

    }

    .col-md-9>.container {
        /* border: 2px solid red; */
        margin-left: 3%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 66vw;
        margin-bottom: 25%;
        height: 15vh;
    }

    #box-login .form-control {
        /* border: 2px solid blue; */
        /* border: 2px solid rgba(0, 0, 0, 0.5); */
        width: 80vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 8vh;
    }
}

/*  */
@media (min-width: 320px) and (max-width: 480px) and (orientation:landscape) {
    body {
        /* border: 4px solid red; */
        height: auto;

    }

    .container-fluid {
        /* border: 4px solid red; */
        height: auto;
    }

    .descricao {
        /* border: 4px solid red; */
        display: contents;
    }

    .mais {
        display: none;
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked+h5 .mais {
        display: inline;
    }

    input[type="checkbox"]:checked+h5 .mostrarmais {
        display: none;
    }

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        /* width: 90%!important; */
        margin-bottom: 5%;

    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        width: 25%;
        margin-left: 0%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 67vw;
        margin-bottom: 25%;
        height: 18vh;
    }

    #box-login .form-control {
        border: 2px solid rgba(0, 0, 0, 0.5);
        width: 86vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 10vh;
    }
}

/* ========================================================================== */

/* 481px a 768px */
@media (min-width: 481px) and (max-width: 768px) and (orientation:portrait) {
    body {
        /* border: 4px solid red; */
        height: auto;
    }

    /* .container-fluid {
        background-color: red;
        height: 200vh;
    }

    header img {
        height: 22vh;
    }

    .login-box {
        left: 49%;
        margin-top: 130vh;
        width: 80%;
    }

    h1 {
        margin-top: 10%;
        font-size: 2rem;
    }

    .descricao {
        border: 2px solid white;
        display: contents;
    }

    h5 {
        font-size: x-large;
        padding: 35px;
    } */

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        width: 90% !important;
        margin-bottom: 5%;

    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        width: 25%;
        margin-left: 5%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 60vw;
        margin-bottom: 25%;
        height: 13vh;
    }

    #box-login .form-control {
        border: 2px solid rgba(0, 0, 0, 0.5);
        width: 80vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 6vh;
    }

}

@media (min-width: 481px) and (max-width: 768px) and (orientation:landscape) {
    .container-fluid {
        /* border: 4px solid red; */
        height: auto;
    }

    .descricao {
        /* border: 4px solid red; */
        display: contents;
    }

    .mais {
        display: none;
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked+h5 .mais {
        display: inline;
    }

    input[type="checkbox"]:checked+h5 .mostrarmais {
        display: none;
    }

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        width: 83% !important;
        margin-bottom: 3%;
        margin-left: 9%;
    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        /* width: 25%; */
        margin-left: 13%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 50vw;
        margin-bottom: 25%;
        height: 18vh;
    }

    #box-login .form-control {
        /* border: 4px solid red; */
        /* border: 2px solid rgba(0, 0, 0, 0.5); */
        width: 70vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 13vh;
    }

    .box-int>img {
        /* border: 2px solid red; */
        height: 19vh;
    }
}

/* ========================================================================== */

/* 769px a 1190px */
@media (min-width: 768px) and (max-width: 1190px) and (orientation:portrait) {

    body {
        /* border: 4px solid red; */
        height: auto;
    }

    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        width: 90% !important;
    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        width: 25%;
        margin-left: 5%;
        /* height: 30vh; */
        margin-bottom: 10%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-left: 60vw;
        margin-bottom: 25%;
        height: 14vh;
    }

    #box-login .form-control {
        border: 2px solid rgba(0, 0, 0, 0.5);
        width: 80vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 7vh;
    }


}

@media (min-width: 769px) and (max-width: 1190px) and (orientation:landscape) {

    #container {
        /* border: 11px solid red; */
        height: auto;
    }
    h1{
        /* border: 2px solid red; */
        text-align: left;
        padding-left: 34px;
        margin-top: 3%;
    }
    .col-md-3 {
        /* border: 2px solid greenyellow; */
        flex: 0 0 auto;
        width: 30% !important;
        margin-bottom: 3%;
    }

    .col-md-9 {
        /* border: 2px solid red; */
        flex: 0 0 auto;
        width: 70% !important;
        margin-bottom: 3%;
    }

    .col-md-9>.container {
        /* border: 2px solid blue; */
        margin-bottom: 10%;
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 26%;
    }

    .row-img{
        /* border: 4px solid black; */
        padding-right: 69%;
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        margin-bottom: 25%;
        height: 14vh;
    }

    #box-login .form-control {
        /* border: 2px solid red; */
        /* border: 2px solid rgba(0, 0, 0, 0.5); */
        width: 30vw;
    }

    #box-login .form-control input {
        /* border: 2px solid red; */
        background-color: #fff;
        height: 5vh;
        margin-bottom: 20px;
        width: 95%;
    }

    #box-login .form-control .btn {
        /* border: 2px solid red; */
        height: 9vh;
    }

    .box-int>img {
        /* border: 2px solid red; */
        height: 13vh;
    }
}

@media (min-width: 1191px) and (orientation:landscape) {
    body {
        /* border: 4px solid red; */
        height: auto;
    }

    h1{
        /* border: 2px solid red; */
        text-align: left;
        padding-left: 34px;
        margin-top: 3%;
    }

    .col-md-9>.container {
        /* border: 4px solid red; */
        width: 25%;
        margin-left: 30%;
        /* height: 30vh; */
        margin-bottom: 10%;
        /* display: flex; */
    }

    .col-teste>img {
        box-shadow: 1px 1px 20px #888888;
        border-radius: 50%;
        /* margin-left: 60vw; */
        margin-bottom: 25%;
        height: 11vh;
    }

    #box-login .form-control {
        /* border: 4px solid red; */
        /* width: 90%; */

    }

    .box-int>img {
        /* border: 2px solid red; */
        /* height: 10vh; */
    }
}