body{
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    font-family: "Sitka Small";


}
tbody{
    font-family: "Sitka Small";
    color: #feffff;

}

.resume-container{
    width: 80%;
    height: 1030px;
    box-sizing: border-box;
    padding: 15px 0 15px 0;
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    background-color: #feffff;
    max-width: 1090px;

}



.left-pannel{
    width: 25%;
    height: 1000px;
    /*border: 1px solid black;*/
    margin-left: 2%;
    background-color: #2b7a78;
    text-align: center;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
    border-radius: 1.5%;

    -webkit-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    -moz-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
}

.right-pannel{
    width: 65%;
    height: 1000px;
    /*border: 1px solid black;*/
    margin-right: 2%;
    background-color: #3aafa9;
    box-sizing: border-box;
    padding: 10px 15px 10px 15px ;
    border-radius: 1%;
    -webkit-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    -moz-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);

}

p{
    color: #feffff;

}

.space{
    width: 5%;
}
.image-container1{

    margin: auto;
    width: 50%;
    height: 200px;

}

.image-container2{
    width: 0%;
    height: 0%;
}

.image-container2>img{
    width: 0%;
    height: 0%;
}

.image-container1>img{
    width:100% ;
    height: 200px;
    background-color: #edf5e1;
    margin: 0 auto;
    border-radius: 20%;
}

.contact-card,.education-card,.expertise-card{
    -webkit-box-shadow: 10px 10px 17px -7px rgba(5,5,5,1);
    -moz-box-shadow: 10px 10px 17px -7px rgba(5,5,5,1);
    box-shadow: 10px 10px 17px -7px rgba(5,5,5,1);
    text-align: center;
    width:50%;
    margin: auto;
    background-color: #3aafa9;

}

.name{
    width: 99%;
    height: 200px;


    -webkit-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    -moz-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);
    box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);

}
.name-card{
    height: 100%;
    width: 100%;
    /*-webkit-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);*/
    /*-moz-box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);*/
    /*box-shadow: 10px 10px 20px -3px rgba(5,5,5,0.8);*/
    background-color: #2b7a78;

}

.name-card>h1{

    /*display: inline-block;*/
    margin: 0 auto;
    text-align: center;
    color: #feffff;
    font-size: 50px;
    font-family: "Source Sans Pro Black";
    transform: translateY(100%);
    /*transform: translateX(50%);*/
}


.about-me>article{
    color: #feffff;
    text-align: justify;

}

progress {
    -webkit-appearance:none;

}

::-webkit-progress-bar {
   background-color: #feffff;
    width: 200%;


}


::-webkit-progress-value {
    background-color: #2b7a78;

}

@media screen and (max-width: 1150px){
    .resume-container{
        width: 90%;

    }
}

@media screen and (max-width: 1010px){
    .resume-container{
        width: 100%;

    }
}

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

   /*.left-pannel{*/
       /*width: 90%;*/
       /*height: 300px;*/
       /*display: flex;*/
       /*flex-wrap: wrap;*/

   /*}*/

    /*.right-pannel{*/

        /*width: 90%;*/
        /*height: 500px;*/
    /*}*/

    /*.name-card{*/
        /*order: 7;*/
    /*}*/

    /*.image-container{*/
        /*width: 20%;*/
    /*}*/

    /*.contact{*/
        /*width: 30%;*/

        /*order: 3;*/
    /*}*/

    /*.education {*/
        /*width: 30%;*/

        /*order: 2;*/
    /*}*/

    /*.expertise{*/
        /*width: 30%;*/

        /*order: 4;*/
    /*}*/

/*}*/

@media screen and (max-width: 920px){


    .resume-container{

        width:100% ;
        height:1350px ;
    }
    .right-pannel{
        width: 90%;
        height: 1020px;
        order: 1;
        margin: 0 auto;
        /*border-bottom-radius: 0px ;*/
        border-bottom-right-radius: 0%;
        border-bottom-left-radius: 0%;
    }

    .image-container2{
        width: 20%;
        height: 200px;
        display: inline-block;

    }

    .image-container2>img{

        width:100% ;
        height: 200px;
        background-color: #edf5e1;
        margin: 0 auto;
        border-radius: 5%;

    }

    .name-card{
        display: flex;
        flex-wrap: wrap;
    }

    .name-card>h1{

        /*display: inline-block;*/

        text-align: center;
        color: #feffff;
        font-size: 40px;
        font-family: "Source Sans Pro Black";

        transform: translateX(0%);
        transform: translateY(40%);
    }

    .left-pannel{
        width: 90%;
        height: 320px;
        order: 2;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto ;
        margin-bottom: 2%;

        border-top-left-radius: 0%;
        border-top-right-radius: 0%;
    }

    .space{
        width: 0%;
    }

    .image-container1{
        width: 0%;
        height: 0%;
    }

    .image-container1>img{
        width: 0%;
        height: 0%;
    }

    .contact{
        width: 33%;
        height: 90%;
        box-sizing: border-box;
        padding: 2px;
        border-right: 0.5px solid grey;
        font-size: smaller;
    }

    .education{
        width: 33%;
        height: 90%;
        box-sizing: border-box;
        padding: 2px;
        border-right: 0.5px solid grey;
        font-size: smaller;
    }

    .expertise{
        width: 33%;
        height: 90%;
        box-sizing: border-box;
        padding: 2px;
        font-size: smaller;
    }

}

@media screen and (max-width: 610px){

    .resume-container{

        width:100% ;
        height:1400px ;
    }

    .right-pannel{
        height: 1050px;
    }

}

@media screen and (max-width: 590px){

    .resume-container{

        width:100% ;
        height:1420px ;
    }

    .right-pannel{
        height: 1100px;
    }

}

@media screen and (max-width: 565px){

    .right-pannel{
        height:1150px ;
    }
}

@media screen and (max-width: 495px){

    .right-pannel{
        height: 1100px;
    }

    .name{
        width: 100%;
        height: 150px;
    }

    .name-card>h1{
        font-size: x-large;
    }

    h2{
        font-size: large;
    }

    .image-container2{
        height: 150px;
    }

    .image-container2>img{
        height: 150px;
    }

}

@media screen and (max-width: 460px){


    .resume-container{
        height: 1200px;
    }
    .right-pannel{
        height: 900px;
    }

    .contact-card,.education-card,.expertise-card {
        width: 70%;

    }

    h4{
        font-size: small;
    }

    progress {
        -webkit-appearance:none;

    }


    ::-webkit-progress-bar {
        background-color: #feffff;
        width: 100%;

    }

    p,article{
        font-size: smaller;
    }
}


@media screen and (max-width: 415px){

    .right-pannel{
        height: 1000px;
    }

}

@media screen and (max-width: 315px){

    .right-pannel{
        height: 1050px;
    }

}