h4,h3 {

    font-family: 'Lato', sans-serif;

    text-transform: capitalize;

    position: relative;

    color: #425BB5;

    font-weight: 700;

}

h4:before{

    position: absolute;

    width: 30px;

    left: -40px;

    content: "";

    display: block;

    height: 2px;

    background: #425BB5;

    top: 9px;

}

/* General

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

body {

    font-family: 'Open Sans', sans-serif;

    font-size: 16px;

    line-height: 28px;

}
.img-responsive{width:400px; height:268px}
.banner{height:400px; position:relative}
.banner img{height:400px}
.banner p{color:#FFF;margin:auto;text-align:center;position:absolute; bottom:1%; left:0; z-index:1; background-color:#333;opacity:0.5;}

.size-50 {font-size:25px;  line-height: 25px}

#about h3,#about h4{font-size:20px}

.h-50 {height:20px;}

.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}

.Projects-div li{float:left; width:28%; margin:5px; list-style:none}
.Projects-div li img{max-height:100px}
.Projects-div li span{ white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}

/* Header

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

header {

    text-align: center;

    -webkit-transition: all .5s;

    transition: all .5s;

    height: 65px;

}



nav ul {

    display: inline-block;

    padding-left: 0;

    list-style: none;

    margin-bottom: 0;

    -webkit-transition: all .5s;

    transition: all .5s;

	background: #fff;

	width:100%;

}



nav li {width:25%;text-align:center; display:inline-block; float:left}

nav li a {

    text-transform: uppercase;

    color: #444;

    font-size: 16px;

    font-weight: bold;

}



.bg-nav {

    background: #fff;

    border-bottom: 1px solid #f3f3f3

}



.bg-nav ul {

    padding: 10px;

}



a:focus {

    color: #444;

    text-decoration: none;

}



a:hover {

    color: #425BB5;

    text-decoration: none;

}



a.active {

    color: #425BB5;

}





/* home section

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



#home {

    background: url(../img/home-bg-2.jpg);

    background-size: cover;

    height: 100vh;

}



.table-cell {

    display: table-cell;

    vertical-align: middle;

}



.disply-table {

    display: table;

    height: 100vh;

}





/* about section

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



#about {

    padding: 10px 0;

}



.about-img-div img {

    margin: 0 auto;

}


/* experience section

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



#experience {

    padding: 10px 0;

    background: #f3f3f3

}



.experience-row {

    padding: 20px 0;

    border-bottom: 1px solid #ddd;

}



.experience-row h3 {

    font-family: 'Lato', sans-serif;

    text-transform: capitalize;

    letter-spacing: 2px;

    color: #425BB5;

    font-size: 16px;

    font-weight: bold

}



.experience-row p {

    color: #888;

    margin-top: 20px;

    font-size: 15px;

}



.experience-row .date {

    color: #000;

    font-size: 17px;

}



.timeline {

    padding-left: 0;

    list-style: none;

    position: relative;

}



.timeline:before {

    background-color: black;

    content: '';

    margin-left: -1px;

    position: absolute;

    top: 0;

    left: 2em;

    width: 2px;

    height: 100%;

}



.timeline-event {

    position: relative;

}



.timeline-event:hover .timeline-event-icon {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    background-color: #425BB5;

}



.timeline-event:hover .timeline-event-thumbnail {

    box-shadow: inset 40em 0 0 0 #425BB5;

}



.timeline-event-copy {

    padding: 2em;

    position: relative;

    top: -1.875em;

    left: 4em;

    width: 100%;

}



.timeline-event-copy h3 {

    font-size: 1.75em;

}



.timeline-event-copy h4 {

    font-size: 1.2em;

    margin-bottom: 1.2em;

}



.timeline-event-copy strong {

    font-weight: 700;

}



.timeline-event-copy p:not(.timeline-event-thumbnail) {

    padding-bottom: 1.2em;

}



.timeline-event-icon {

    -webkit-transition: -webkit-transform 0.2s ease-in;

    transition: -webkit-transform 0.2s ease-in;

    transition: transform 0.2s ease-in;

    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

    background-color: #425BB5;

    outline: 10px solid #f3f3f3;

    display: block;

    margin: 0.5em 0.5em 0.5em -0.5em;

    position: absolute;

    top: 0;

    left: 2em;

    width: 1em;

    height: 1em;

}



.timeline-event-thumbnail {

    -moz-transition: box-shadow 0.5s ease-in 0.1s;

    -o-transition: box-shadow 0.5s ease-in 0.1s;

    -webkit-transition: box-shadow 0.5s ease-in;

    -webkit-transition-delay: 0.1s;

    -webkit-transition: box-shadow 0.5s ease-in 0.1s;

    transition: box-shadow 0.5s ease-in 0.1s;

    color: white;

    font-size: 12px;

    font-weight: bold;

    background-color: black;

    box-shadow: inset 0 0 0 0em #425BB5;

    display: inline-block;

    margin-bottom: 1.2em;

    padding: 0.25em 1em 0.2em 1em;

}





/* projects section

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



#projects {

    padding: 10px 0;

}



.portfolio .categories-grid span {

    font-size: 30px;

    margin-bottom: 30px;

    display: inline-block;

}



.portfolio .categories-grid .categories ul li {

    list-style: none; display:inline; 

}



.portfolio .categories-grid .categories ul li a {

    display: inline-block;

    color: #60606e;

    padding: 0 10px;

    margin: 0 14px;

    -webkit-transition: all .2s ease-in-out .2s;

    transition: all .2s ease-in-out .2s;

}



.portfolio .categories-grid .categories ul li a:hover,

.portfolio .categories-grid .categories ul li a:focus {

    text-decoration: none;

}



.portfolio .categories-grid .categories ul li a.active {

    background-color: #425BB5;

    padding: 0px 20px;

    color: white;

    text-decoration: none;

}



.portfolio_filter {

    padding-left: 0;

}



.portfolio_item {

    position: relative;

    overflow: hidden;

    display: block;

    margin-bottom: 30px;

}



.portfolio_item .portfolio_item_hover {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    background-color: #425BB5;

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

    opacity: 0;

    -webkit-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    color: #333;

}



.portfolio_item .portfolio_item_hover .item_info {

    text-align: center;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    padding: 10px;

    width: 100%;

    font-weight: bold;

}



.portfolio_item .portfolio_item_hover .item_info span {

    display: block;

    color: #fff;

    font-size: 18px;

    -webkit-transform: translateY(-100px);

    transform: translateY(-100px);

    -webkit-transition: all .3s ease-in-out .3s;

    transition: all .3s ease-in-out .3s;

    opacity: 0;

}



.portfolio_item .portfolio_item_hover .item_info em {

    font-style: normal;

    display: inline-block;

    background-color: #425BB5;

    padding: 5px 20px;

    color: #fff;

    margin-top: 10px;

    -webkit-transform: translateY(100px);

    transform: translateY(100px);

    -webkit-transition: all .3s ease-in-out .3s;

    transition: all .3s ease-in-out .3s;

    opacity: 0;

    font-size: 10px;

    letter-spacing: 2px;

}



.portfolio_item:hover .portfolio_item_hover {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



.portfolio_item:hover .item_info em,

.portfolio_item:hover .item_info span {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



.portfolio .categories-grid .categories ul li {

    float: left;

}



.portfolio .categories-grid .categories ul li a {

    padding: 0 10px;

    -webkit-transition: all .2s ease-in-out .2s;

    transition: all .2s ease-in-out .2s;

}



.portfolio_filter {

    padding-left: 0;

    display: inline-block;

    margin: 0 auto;

    text-align: center;

}



.portfolio_item img {

    -webkit-filter: grayscale(100%);

    filter: grayscale(100%);

}



.portfolio-padding {

    padding: 50px 0;

}


.modal-content {

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0);

    border: none;

}



.popup-modal {

    background: #fff;

}



.close-popup-modal {

    float: right;

    margin: 20px;

    font-size: 22px;

    opacity: 0;

    cursor: pointer;

    -webkit-transition: all .3s;

    transition: all .3s;

    -webkit-transition-delay: .6s;

    transition-delay: .6s;

    position: fixed;

    z-index: 100000;

    right: 14px;

}



.animatedModal-on .close-popup-modal {

    opacity: 1;

}



.modal-content h2 {

    font-family: 'Playfair Display', serif;

    font-size: 40px;

    line-height: 50px;

}





/* contact

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



#contact {

    padding: 10px 0;

    background: #f3f3f3

}



#contact-form input,

#contact-form textarea {

    height: 50px;

    margin-bottom: 10px;

    border-radius: 0;

}



#contact-form label {

    display: block;

    margin-bottom: .2em;

    font-size: 13px;

    line-height: 13px;

    font-size: 1.3rem;

    line-height: 1.3rem;

    color: #000;

}



textarea {

    resize: none;

}



fieldset {

    border: 0px;

    margin: 0;

    padding: 0

}



.required {

    color: #e9266d

}



#success,

#error {

    display: none

}



#success p,

#error p {

    display: block;

}



#success p {

    color: #425BB5;

    font-size: 15px;

    text-align: center;

    padding: 10px;

    border: 2px solid #425BB5;

    margin-top: 10px;

}



#error p {

    color: #D33E43;

    font-size: 15px;

    text-align: center;

    padding: 10px;

    border: 2px solid #D33E43;

    margin-top: 10px;

}



#submit {

    background-color: #425BB5;

    color: #fff;

    padding: 10px 40px;

    border-radius: 0;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-weight: bold;

    width: 100%;

}



.social {

    padding-left: 0;

    list-style: none;

    margin-top: 20px;

}



.social li {

    float: left;

}



.social li a {

    color: #333;

    font-size: 35px;

    margin-right: 15px;

    transition: all .3s;

    -webkit-transition: all .3s;

}



.social li a:hover {

    color: #425BB5;

}

.col-md-4{width:33%;}

.col-md-12{margin-top:3%}

/* Responsive media queries

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

@media (min-width:640px){
#footPhone{display:none}
}

@media (max-width:640px){

#footPhone{overflow:hidden; background-color:#425BB5;position:fixed;bottom:0; left:0; width:100%;margin-bottom: 0;}

#footPhone li{display:inline-block; width:50%;text-align:center; line-height:2.5}
#footPhone #bgli{background-color:#003}
.col-md-12{margin-bottom:10%;}
#footPhone li a{color:#FFF}
.banner,.banner img{height:180px;}
.col-md-4{float:left;width:100%}
.img-responsive{width:100%; height:120px}
}



@media (max-width: 991px) {

    .portfolio .categories-grid .categories ul li a {

        padding: 0 2px;

    }

}



@media (max-width: 768px) {

    .timeline-event-copy {

        width: 90%;

        left: 2em;

    }

}



@media (max-width: 500px) {

    #home,

    .disply-table {

        height: 600px;

    }



    .portfolio .categories-grid .categories ul li {

        list-style: none;

        margin: 10px 0;

    }

}



@media (max-width: 420px) {

    nav li {

        margin: 0;

    }

    nav li a {

        font-size: 14px;

    }

}