.div-sec1-wrap 
{
    min-height:100vh;
    width:100%;
    background-color:#707a8a;
    overflow:hidden;
}

.div-sec1-details 
{
    position:relative;
    padding-top:15em;
    width:50em;
    margin-left:auto;
    margin-right:auto;
}

.p-sec1-name 
{
    color:white;
    font-size:70px;
    text-transform:uppercase;
    font-weight:bolder;
    font-family:'Lucida Handwriting', 'Ink Free';
    line-height:0.4em;
}

.p-sec1-jobtitle 
{
    font-size:25px;
    line-height:0.8em;
    color:white;
}

.img-prof-pic 
{
    position:fixed;
    right:0px;
}

.div-secabout-wrap 
{
    color:white;
    background-color:#333b50;
    position:relative;
    width:62em;
    margin-left:auto;
    margin-right:auto;
    padding:5em;
    top:-10em;
    border-radius:4px;
}

.div-sec2-wrap 
{
    width:100%;
    background-color:#707a8a;
    position:relative;
    background-image:url(../../../Content/imageLib/skills-bg.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.div-sec2-details 
{
    width:62em;
    margin-left:auto;
    margin-right:auto;
}

.tbl-sec2-details
{
    width:100%;
}

.tbl-sec2-details td:first-child
{
    padding-right:2em;
    width:10em;
    color:white;
    vertical-align:text-top;
}

.div-sec2-prodetails 
{
    color:white;
    display:none;
}

.lbl-sec2-header-num
{
    color:#fff991;
    font-size:50px;
    line-height: 1.3em;
    font-weight:bold;
    font-family:Lato;
    margin-right:0.3em;
}

.lbl-sec2-header 
{
    color:white;
    font-size:50px;
    line-height: 1.3em;
    font-weight:bold;
    letter-spacing:4px;
}

.lbl-sec2-subheader 
{
    color:white;
    font-size:24px;
    line-height: 1.8em;
}

.div-bar-strip 
{
    width:10em;
    height:1em;
    background-color:red;
    display:inline-block;
}

.div-sec3-wrap 
{
    min-height:100vh;
    width:100%;
    padding-top:15em;
    position:relative;
    background-color:#4d5366;
    text-align:center;
}

.div-proj-thumb-wrap 
{
    width:30em;
    display:inline-block;
    position:relative;
    margin-bottom:0.2em;
}

.img-proj-thumb 
{
    width:30em;
    cursor:pointer;
}

.div-proj-thumb 
{
    width:30em;
    height:22.5em;
    position:relative;
    display:inline-block;
}

.img-proj-thumb2
{
    position:absolute;
    width:30em;
    cursor:pointer;
    transition:0.5s;
}

.img-proj-thumb2:hover
{
    width:35em;
    box-shadow:5px 10px 8px rgba(0, 0, 0, 0.8);
    z-index:9;
}

.div-proj-name 
{
    color:white;
    font-size:1.5em;
    font-weight:600;
    position:absolute;
    bottom:3em;
    width:100%;
    text-align:center;
    background-color:#0c0c11;
    padding-top:0.5em;
    padding-bottom:0.5em;
}

.div-proj-opacity 
{
    background-color:black;
    width:30em;
    height:100%;
    opacity:0.8;
    position:absolute;
    top:0em;
    cursor:pointer;
}

.div-proj-thumb-wrap:hover .div-proj-opacity 
{
    opacity:0.2;
}

.div-proj-thumb-wrap:hover .div-proj-name 
{
    background-color:rgba(255,255,255,0.8);
    color:black;
}

.div-sec4-wrap 
{
    width:100%;
    padding-top:15em;
    background-color:#4d5366;
    position:relative;
    background-image:url(../../../Content/imageLib/mountain.jpg);
    background-repeat:no-repeat;
    background-position:top center;
    padding-bottom:20em;
}

.div-sec4-left-bar 
{
    position:absolute;
    width:2px;
    height:56em;
    background-color:#00d646;
    margin-top:0.5em;
}

.div-sec4-bardot 
{
    width:1em;
    height:1em;
    background-color:#00d646;
    border-radius:6px;
    margin-left:-0.4em;
}

.div-sec4-jobs 
{
    width:60em;
    margin-left:auto;
    margin-right:auto;
}

.div-sec4-job-wrap 
{
    width:60em;
    margin-left:auto;
    margin-right:auto;
    padding-left:1.5em;
}

.img-sec2-bg 
{
    position:absolute;
    top:0px;
}

.div-sec4-yr 
{
    color:#00d646;
    font-size:1.5em;
    font-weight:700;
    margin-bottom:0.5em;
    font-family:'Agency FB';
}

.div-sec4-company
{
    color:#fbfbfc;
    font-size:1.8em;
    margin-bottom:1em;
}

.div-sec4-position
{
    color:#fbfbfc;
    font-size:1.3em;
    font-weight:600;
}

.div-sec4-details
{
    color:#d1dbeb;
    font-size:1em;
}

.div-sec5-wrap 
{
    background-color:#333b50;
    position:relative;
    background-image:url(../../../Content/imageLib/code-bg.jpg);
    background-repeat:no-repeat;
    background-position:top center;
    padding-bottom:20em;
}

.div-contact-wrap 
{
    color:white;
    background-color:#333b50;
    position:relative;
    width:62em;
    margin-left:auto;
    margin-right:auto;
    padding:5em;
    top:-10em;
    border-radius:4px;
}

.div-left-wrap 
{
    display:inline-block;
    width:calc(50% - 32px);
    vertical-align:top;
    padding-right:2em;
}

.div-right-wrap 
{
    display:inline-block;
    width:calc(50% - 2px);
    vertical-align:top;
}

.div-lbl-contact 
{
    margin-bottom:0.5em;
}

.txt-contacts 
{
    padding:0.5em;
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    min-width:calc(100% - 20px);
    margin-bottom:1em;
    border:1px solid white;
    border-radius:4px;
}

.txt-contacts:focus 
{
    background-color:#ecfff2;
    outline:none;
    border-color:#00d646;
}

.btn-green 
{
    color:white;
    background-color:#00d646;
    border:none;
    width:100%;
    padding:1em;
    cursor:pointer;
    font-weight:600;
    letter-spacing:2px;
}

.btn-green:hover
{
    background-color:#0bbd45;
}


.div-closeproj 
{
    font-size:4em;
    position:absolute;
    top:0.1em;
    right:0.5em;
    color:white;
    cursor:pointer;
}

.div-proj-wrap 
{
    background-color:#333b50;
    padding-top:10em;
}

.div-proj-desc 
{
    color:#bec7d5;
    font-size:1.3em;
    margin-top:1em;
    margin-bottom:3em;
}

.div-imgview 
{
    position:fixed;
    top:0;
    width:100vw;
    height:100vh;
    background-color:rgba(0,0,0,0.8);
    z-index:99;
}

.div-closeview 
{
    font-size:4em;
    position:absolute;
    top:0.6em;
    right:0.5em;
    color:white;
    cursor:pointer;
}

#div-img-fullview 
{
    width:70em;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.img-proj-fullview 
{
    width:70em;
    margin-top:7em;
}


/*for tablets*/
@media screen and (max-width:1279px) {
    
}

@media screen and (max-width:959px) {
    .div-sec1-details 
    {
        width:calc(100% - 60px);
        padding-left:1em;
    }

    .p-sec1-name 
    {
        font-size:3.5em;
    }

    .div-secabout-wrap 
    {
        width:calc(100% - 2em);
        padding-left:1em;
        padding-right:1em;
    }

    .lbl-sec2-header-num
    {
        font-size:40px;
    }

    .lbl-sec2-header 
    {
        font-size:40px;
        line-height: 1.3em;
    }

    .lbl-sec2-subheader 
    {
        font-size:19px;
    }

    .div-sec2-details 
    {
        width:100%;
    }

    .tbl-sec2-details
    {
        width:calc(100% - 20px);
        margin-left:0.5em;
    }

    .tbl-sec2-details td:first-child
    {
        display:none;
    }

    .div-sec2-prodetails 
    {
        display:block;
    }

    .div-proj-opacity 
    {
        width:100%;
    }

    .div-sec4-job-wrap 
    {
        width:calc(100% - 20px);
        padding-left:0.5em;
    }

    .div-sec4-jobs 
    {
        width:100%;
    }

    .div-sec4-left-bar 
    {
        display:none;
    }

    .div-sec4-bardot 
    {
        display:none;
    }

    .div-contact-wrap 
    {
        width:calc(100% - 20px);
        padding-left:0.5em;
        padding-right:0.5em;
    }

    .div-left-wrap 
    {
        width:100%;
        padding-right:0em;
    }

    .div-right-wrap 
    {
        width:100%;
    }
}

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

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

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

/*for phones*/
@media screen and (max-width:640px) {
    .div-proj-thumb-wrap 
    {
        width:calc(100% - 20px);
        margin-left:0.3em;
        margin-bottom:0.3em;
    }

    .img-proj-thumb 
    {
        width:100%;
    }

    .div-proj-thumb 
    {
        width:100%;
    }
}

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

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

/*smallest screen for phones*/
@media screen and (max-width:420px) {
    .img-proj-thumb2
    {
        width:100%;
    }
}

/*smallest screen for phones*/
@media screen and (max-width:320px) {
    
}