/*MOBILE*/
@media screen and (max-width: 767px) {
    .applyDesktop{
        display: none;
    }

    footer{
        background-color: #F7941D ;
    }
    .rounded-social-buttons {
        text-align: center;
    }

    .rounded-social-buttons .social-button {
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 3.125rem;
        height: 3.125rem;
        border: 0.125rem solid transparent;
        padding: 0;
        text-decoration: none;
        text-align: center;
        color: #fefefe;
        font-size: 1.5625rem;
        font-weight: normal;
        line-height: 2em;
        border-radius: 1.6875rem;
        transition: all 0.5s ease;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    .rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-youtube, .fa-instagram {
        font-size: 25px;
    }

    .rounded-social-buttons .social-button.facebook {
        background: #3b5998;
    }

    .rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
        color: #3b5998;
        background: #fefefe;
        border-color: #3b5998;
    }

    .rounded-social-buttons .social-button.twitter {
        background: #55acee;
    }

    .rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
        color: #55acee;
        background: #fefefe;
        border-color: #55acee;
    }

    .rounded-social-buttons .social-button.linkedin {
        background: #007bb5;
    }

    .rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
        color: #007bb5;
        background: #fefefe;
        border-color: #007bb5;
    }

    .rounded-social-buttons .social-button.youtube {
        background: #bb0000;
    }

    .rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
        color: #bb0000;
        background: #fefefe;
        border-color: #bb0000;
    }

    .rounded-social-buttons .social-button.instagram {
        background: #125688;
    }

    .rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
        color: #125688;
        background: #fefefe;
        border-color: #125688;
    }



    .container .card{
        position: relative;
        cursor: pointer;
    }

    .container .card .face{
        width: 338px;
        height: 200px;
        transition: 0.5s;
    }

    .container .card .face.face1{
        position: relative;
        background: #263484;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateY(100px);
    }

    .container .card:hover .face.face1{
        background: #F7941D;
        transform: translateY(0);
    }

    .container .card .face.face1 .content{
        transition: 0.5s;
    }

    .container .card:hover .face.face1 .content{

    }

    .container .card .face.face1 .content img{
        max-width: 100px;
    }

    .container .card .face.face1 .content h3{
        margin: 10px 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 1.5em;
    }

    .container .card .face.face2{
        position: relative;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;

        transform: translateY(-100px);
    }

    .container .card:hover .face.face2{
        transform: translateY(0);
    }

    .container .card .face.face2 .content p{
        margin: 0;
        padding: 0;
    }

    .container .card .face.face2 .content a{
        margin: 15px 0 0;
        display:  inline-block;
        text-decoration: none;
        font-weight: 900;
        color: #333;
        padding: 5px;
        border: 1px solid #333;
    }

    .container .card .face.face2 .content a:hover{

        color: #fff;
    }
}

/*DESKTOP*/
@media screen and (min-width: 767px) {
    .applyMobile{
        display: none;
    }
    footer{
        background-color: #F7941D ;
    }
    .rounded-social-buttons {
        text-align: center;
    }

    .rounded-social-buttons .social-button {
        display: inline-block;
        position: relative;
        cursor: pointer;
        width: 3.125rem;
        height: 3.125rem;
        border: 0.125rem solid transparent;
        padding: 0;
        text-decoration: none;
        text-align: center;
        color: #fefefe;
        font-size: 1.5625rem;
        font-weight: normal;
        line-height: 2em;
        border-radius: 1.6875rem;
        transition: all 0.5s ease;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    .rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-youtube, .fa-instagram {
        font-size: 25px;
    }

    .rounded-social-buttons .social-button.facebook {
        background: #3b5998;
    }

    .rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
        color: #3b5998;
        background: #fefefe;
        border-color: #3b5998;
    }

    .rounded-social-buttons .social-button.twitter {
        background: #55acee;
    }

    .rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
        color: #55acee;
        background: #fefefe;
        border-color: #55acee;
    }

    .rounded-social-buttons .social-button.linkedin {
        background: #007bb5;
    }

    .rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
        color: #007bb5;
        background: #fefefe;
        border-color: #007bb5;
    }

    .rounded-social-buttons .social-button.youtube {
        background: #bb0000;
    }

    .rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
        color: #bb0000;
        background: #fefefe;
        border-color: #bb0000;
    }

    .rounded-social-buttons .social-button.instagram {
        background: #125688;
    }

    .rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
        color: #125688;
        background: #fefefe;
        border-color: #125688;
    }
    .container{
        width: 1000px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    .container .card{
        position: relative;
        cursor: pointer;
    }

    .container .card .face{
        width: 300px;
        height: 200px;
        transition: 0.5s;
    }

    .container .card .face.face1{
        position: relative;
        background: #263484;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateY(100px);
    }

    .container .card:hover .face.face1{
        background: #F7941D;
        transform: translateY(0);
    }

    .container .card .face.face1 .content{
        transition: 0.5s;
    }

    .container .card:hover .face.face1 .content{
        opacity: 1;
    }

    .container .card .face.face1 .content img{
        max-width: 100px;
    }

    .container .card .face.face1 .content h3{
        margin: 10px 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 1.5em;
    }

    .container .card .face.face2{
        position: relative;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;

        transform: translateY(-100px);
    }

    .container .card:hover .face.face2{
        transform: translateY(0);
    }

    .container .card .face.face2 .content p{
        margin: 0;
        padding: 0;
    }

    .container .card .face.face2 .content a{
        margin: 15px 0 0;
        display:  inline-block;
        text-decoration: none;
        font-weight: 900;
        color: #333;
        padding: 5px;
        border: 1px solid #333;
    }

    .container .card .face.face2 .content a:hover{

        color: #fff;
    }

}