/*----
	Author: W3layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
---*/
html, body {
    font-family: 'Lato', sans-serif;
}

.clear {
    clear: both;
}

body a {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

body input[type="text"], body input[type="submit"], body textarea, body input[type="button"] {
    -webkit-appearance: none;
}

/*------ HEADERBG STARTS---------*/
.headerbg {
    background: url(../images/banner.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    min-height: 700px;
    width: 100%;
}

/*------ HEADER STARTS---------*/
.header {
    background: rgba(0, 0, 0, 0.24);
}

/*------ CONTAINER STARTS---------*/
.container {
    width: 70%;
}

/*------ LOGO STARTS---------*/
.logo {
    float: left;
    margin: 0.5em 0 0.5em 0em;
}

.logo a {
    color: #B5A9B7;
    font-size: 1.9em;
}

.logo a:hover {
    color: #B5A9B7;
    text-decoration: none;
}

/*------ LOGO ENDS---------*/
/*------ TOPNAV STARTS---------*/
.nav {
    float: right;
}

.nav ul li {
    display: inline-block;
    margin: 1em 1.5em 0 0;
}

.nav ul li a {
    color: #B5A9B7;
}

.nav ul li a:hover {
    color: gray;
    text-decoration: none;
}

/*------ TOPNAV ENDS---------*/
/*------ HEADER ENDS---------*/
/*------ BANNER STARTS---------*/
.banner {
    position: absolute;
    width: 86%;
}

.banner-info {
    width: 70%;
    float: right;
}

.bannerlogo {
    background: url('data:image/png;base64,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');
    background-size: cover;
    width: 48px;
    height: 48px;
    float: left;
    margin-top: 0.8em;
}

.bannerhead {
    float: right;
}

.bannerhead h2 {
    color: #C5B7B8;
    margin: 0;
    padding: 0;
}

.bannerhead h2 span {
    color: #F1E9F2;
    font-weight: bolder;
    font-size: 1.2em;
}

.bannerhead h3 {
    color: #fff;
    font-weight: bolder;
    font-size: 2.5em;
}

.bannerhead p {
    color: #F1E9F2;
}

a.downarrow span {
    height: 48px;
    width: 48px;
    background: url(../images/down.png);
    display: inline-block;
}

a.downarrow {
    display: block;
    position: absolute;
    top: 370px;
    left: 17%;
}

.bannerhead {
    position: relative;
    width: 88%;
}

.banner-info {
    position: relative;
    top: 182px;
    left: 11%;
}

/*------ About STARTS---------*/
.about {
    color: white;
    text-align: center;
    background: #281D24;
}

.header-section h2 {
    color: #C6C3C5;
    font-weight: 300;
    margin-top: 2.5em;
    margin: 0;
    padding: 2em 0 1em 0;
}

.header-section span {
    background: #8C868A;
    height: 1px;
    width: 20%;
    display: inline-block;
    vertical-align: middle;
}

.header-section span:nth-child(1) {
    margin-right: 10px;
}

.header-section span:nth-child(2) {
    margin-left: 10px;
}

.about span p {
    color: gray;
    line-height: 2em;
    margin-bottom: 4em;
    width: 71%;
    margin: 0 auto;
}

.years {
    margin-bottom: 4em;
    color: #F1F0F0;
}

.years p {
    padding-top: 1em;
    line-height: 2em;
    width: 45%;
    margin: 0 auto;
}

.labs p {
    width: 50%;
    margin: 0 auto;
}

.years h4, .years span h4 {
    margin-top: 1em;
}

.arrow span {
    height: 48px;
    width: 48px;
    background: url(../images/bwn.png);
    display: inline-block;
}

a.arrow {
    margin: 2em 0 4em 0;
    display: inline-block;
}

/*------Skill-Section STARTS---------*/
.skills {
    min-height: 900px;
    background: #20191B;
    position: relative;
}

.skill-section h2 {
    color: #C6C3C5;
    font-weight: 300;
    margin-top: 2.5em;
}

.skill-section span {
    background: #8C868A;
    height: 1px;
    width: 20%;
    display: inline-block;
    vertical-align: middle;
}

.skill-section span:nth-child(1) {
    margin-right: 10px;
}

.skill-section span:nth-child(2) {
    margin-left: 10px;
}

.skill-grids {
    padding: 3em 0;
}

.skill-grid h3 {
    color: #FFF;
    font-size: 1.8em;
}

.circle {
    color: #FFF;
}

#canvas {
    position: relative;
}

.down span {
    height: 48px;
    width: 48px;
    background: url(../images/bwn.png);
    display: inline-block;
}

a.down {
    padding: 4em 0 0 2em;
    display: inline-block;
    position: absolute;
    left: 46%;
}

#message-form .error {
    color: red;
}

/*------Skill-Section Ends---------*/
/*------Portfolio-Section STARTS---------*/
.Portfolio {
    min-height: 600px;
    background: #ffffff;
    text-align: center;
}

.Portfolio-section h2 {
    color: #91898D;
    font-size: 2em;
    padding: 2em 0 1em;
    margin: 0;
}

.Portfolio-section span {
    background: #8C868A;
    height: 1px;
    width: 20%;
    display: inline-block;
    vertical-align: middle;
}

.Portfolio-section span:nth-child(1) {
    margin-right: 10px;
}

.Portfolio-section span:nth-child(2) {
    margin-left: 10px;
}

.portfolio-grids {
    padding-top: 2em;
}

.portfolio-grid {
    display: inline-block;
}

.portfolio-grid p {
    margin: 3em 1em 0 1em;
    color: #504A4C;
    line-height: 25px;
}

.portfolio-grid img {
    width: 100%;
}

a.rightarrow span {
    height: 30px;
    width: 30.5px;
    background: url(../images/rightarw.png);
    display: inline-block;
}

a.rightarrow {
    margin-top: 1em;
    display: inline-block;
}

.portdown span {
    height: 48px;
    width: 48px;
    background: url(../images/bwn.png);
    display: inline-block;
}

a.portdown {
    margin: 4em 0 3em 1em;
    display: inline-block;
}

/*------FOOTER STARTS---------*/
.footer {
    background: url(../images/footerbg.jpg);
    position: relative;
    min-height: 567px;
    background-size: cover;
    position: relative;
}

.contact-section h2 {
    color: #D2D1D1;
    font-weight: 300;
    font-size: 2.5em;
    padding-top: 1em;
}

.contact-section span {
    background: #8C868A;
    height: 1px;
    width: 20%;
    display: inline-block;
    vertical-align: middle;
}

.contact-section span:nth-child(1) {
    margin-right: 10px;
}

.contact-section span:nth-child(2) {
    margin-left: 10px;
}

.footer-left {
    margin-top: 1em;
}

.social-icons {
}

.social-icons a img {
    margin-right: 0.5em;
}

.social-icons a img:hover {
    opacity: 0.8;
}

.footer-left p {
    color: #B5A9B7;
    width: 80%;
    margin: 2em 0 0 0em;
    line-height: 2em;
}

.footer-right {
    text-align: right;
    margin-top: 1.3em;
}

.footer-right input[type="text"], .footer-right textarea {
    background: #170F12;
    color: #B5A9B7;
    padding: 1em 0.8em;
    width: 75%;
    margin-bottom: 1em;
    outline: none;
    border: solid 1.5px;
    border-color: #9A9A9A #EEEEEE #EEEEEE #9A9A9A;
}

.footer-right textarea {
    min-height: 120px;
    resize: none;
}

.footer-right textarea {
    color: #B5A9B7;
}

.footer-right input[type="submit"] {
    text-align: center;
    float: right;
    color: #D2D1D1;
    font-size: 1.2em;
    outline: none;
    padding: 0.6em 1.5em;
    border: 1px solid #B8ABAB;
    background: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -ms-transition: 0.5s all;
    -o-transition: 0.5s all;
}

.footer-right input[type="submit"]:hover {
    border-color: #FFF;
    color: #FFF;
}

.up {
    position: absolute;
    bottom: 9%;
    left: 49%;
}

.up span {
    height: 48px;
    width: 48px;
    background: url(../images/up.png);
    margin-top: 2em;
    display: inline-block;
}

/*---- copy-right -----*/
p.copy-right {
    margin-top: 1em;
    color: #999;
    font-size: 1em;
    padding: 0.8em 0;
    text-align: right;
}

p.copy-right a {
    color: #FFF;
    text-decoration: none;
}

/*----- top-top -----*/
@media (max-width: 1280px) {
    .years p {
        width: 60%;
    }

    .portfolio-grid p {
        margin: 2em 0em 0 0em;
    }

    .footer-left p {
        width: 90%;
    }
}

@media (max-width: 1024px) {
    .container {
        width: 80%;
    }

    .years p {
        width: 80%;
    }

    .portfolio-grid p {
        margin: 2em 0em 0 0em;
    }

    .footer-left p {
        width: 90%;
    }

    .banner-info {
        width: 80%;
    }

    .footer-right input[type="text"], .footer-right textarea {
        width: 87%;
    }

    .headerbg {
        min-height: 591px;
    }

    .banner-info {
        top: 110px;
    }

    a.downarrow {
        top: 341px;
        left: 23%;
    }

    .years {
        margin-bottom: 2em;
    }

    .header-section h2 {
        padding: 1.2em 0 0.8em 0;
    }
}

@media (max-width: 768px) {
    .container {
        width: 80%;
    }

    .years p {
        width: 80%;
    }

    .portfolio-grid p {
        margin: 2em 0em 0 0em;
    }

    .footer-left p {
        width: 90%;
    }

    .banner-info {
        width: 80%;
    }

    .footer-right input[type="text"], .footer-right textarea {
        width: 100%;
    }

    .headerbg {
        min-height: 500px;
    }

    .banner-info {
        top: 112px;
        width: 100%;
        left: 2%;
    }

    a.downarrow {
        top: 241px;
        left: 32%;
    }

    .years {
        margin-bottom: 2em;
    }

    .header-section h2 {
        padding: 1.2em 0 0.8em 0;
    }

    .bannerhead {
        width: 84%;
    }

    .banner {
        width: 100%;
    }

    .years h4, .years span h4 {
        margin: 0.5em 0 0 0;
    }

    .skill-grid {
        padding: 1.5em 0;
    }

    .skill-grids {
        padding: 1em 0;
    }

    a.down {
        padding: 0;
        position: absolute;
        left: 47%;
    }

    .skills {
        padding: 0 0 5em 0;
    }

    .skill-section h2 {
        margin-top: 1.5em;
    }

    a.arrow {
        margin: 1em 0 2em 0;
    }

    .portfolio-grids {
        padding-top: 1em;
    }

    .portfolio-grid {
        padding: 0 0 2em 0;
    }

    a.portdown {
        margin: 2em 0 2em 0em;
    }

    .contact-section h2 {
        padding-top: 0.5em;
    }

    .footer {
        padding: 0 0 10em;
    }
}

@media (max-width: 640px) {
    .container {
        width: 80%;
    }

    .years p {
        width: 100%;
    }

    .portfolio-grid p {
        margin: 2em 0em 0 0em;
    }

    .footer-left p {
        width: 90%;
    }

    .banner-info {
        width: 80%;
    }

    .footer-right input[type="text"], .footer-right textarea {
        width: 100%;
    }

    .headerbg {
        min-height: 500px;
    }

    .banner-info {
        top: 112px;
        width: 100%;
        left: 2%;
    }

    a.downarrow {
        top: 270px;
        left: 32%;
    }

    .years {
        margin-bottom: 2em;
    }

    .header-section h2 {
        padding: 1.2em 0 0.8em 0;
    }

    .bannerhead {
        width: 84%;
    }

    .banner {
        width: 100%;
    }

    .years h4, .years span h4 {
        margin: 0.5em 0 0 0;
    }

    .skill-grid {
        padding: 1.5em 0;
    }

    .skill-grids {
        padding: 1em 0;
    }

    a.down {
        padding: 0;
        position: absolute;
        left: 47%;
    }

    .skills {
        padding: 0 0 5em 0;
    }

    .skill-section h2 {
        margin-top: 1.5em;
    }

    a.arrow {
        margin: 1em 0 2em 0;
    }

    .portfolio-grids {
        padding-top: 1em;
    }

    .portfolio-grid {
        padding: 0 0 2em 0;
    }

    a.portdown {
        margin: 2em 0 2em 0em;
    }

    .contact-section h2 {
        padding-top: 0.5em;
    }

    .footer {
        padding: 0 0 10em;
    }

    .about span p {
        margin-bottom: 2em;
    }

    .nav ul {
        margin: 0;
        padding: 0;
    }

    .nav ul li {
        margin: 1.2em 0.5em;
    }

    .logo {
        margin: 0.3em 0 0.5em 0em;
    }

    .bannerhead h3 {
        font-size: 2em;
        margin: 0.3em 0 0.3em;
    }
}

@media (max-width: 480px) {
    .container {
        width: 90%;
    }

    .years p {
        width: 100%;
        line-height: 1.6em;
        padding: 0.5em 0 0 0;
    }

    .portfolio-grid p {
        margin: 2em 0em 0 0em;
    }

    .footer-left p {
        width: 100%;
        margin: 0.8em 0 0 0;
    }

    .banner-info {
        width: 80%;
    }

    .footer-right input[type="text"], .footer-right textarea {
        width: 100%;
    }

    .headerbg {
        min-height: 457px;
    }

    .banner-info {
        top: 36px;
        width: 100%;
        left: 0%;
        text-align: center;
    }

    a.downarrow {
        top: 201px;
        left: 42%;
    }

    .years {
        margin-bottom: 2em;
    }

    .header-section h2 {
        padding: 0.8em 0 0.5em 0;
        line-height: 1.5em;
    }

    .bannerhead {
        width: 100%;
    }

    .banner {
        width: 100%;
    }

    .years h4, .years span h4 {
        margin: 0.5em 0 0 0;
    }

    .skill-grid {
        padding: 1.5em 0;
    }

    .skill-grids {
        padding: 1em 0;
    }

    a.down {
        padding: 0;
        position: absolute;
        left: 45%;
    }

    .skills {
        padding: 0 0 5em 0;
    }

    .skill-section h2 {
        margin-top: 0.5em;
    }

    a.arrow {
        margin: 1em 0 2em 0;
    }

    .portfolio-grids {
        padding-top: 1em;
    }

    .portfolio-grid {
        padding: 0 0 2em 0;
    }

    a.portdown {
        margin: 1em 0 2em 0em;
    }

    .contact-section h2 {
        padding-top: 0.5em;
    }

    .footer {
        padding: 0 0 6em;
    }

    .about span p {
        margin-bottom: 2em;
        width: 100%;
        line-height: 1.6em;
    }

    .nav ul {
        margin: 0;
        padding: 0;
    }

    .nav ul li {
        margin: 0.8em 0.5em;
    }

    .logo {
        margin: 0.8em 0 0em 0em;
        float: none;
        text-align: center;
    }

    .bannerhead h3 {
        font-size: 1.6em;
        margin: 0.3em 0 0.3em;
    }

    .nav {
        float: none;
        text-align: center;
    }

    .bannerlogo {
        float: none;
        margin-top: 0em;
        text-align: center;
    }

    .skill-grid h3 {
        font-size: 1.5em;
    }

    .up {
        bottom: 1%;
        left: 47%;
    }
}

@media (max-width: 320px) {
    .container {
        width: 90%;
    }

    .header div.container, .banner div.container {
        padding: 0;
    }

    .years p {
        width: 100%;
        line-height: 1.6em;
        padding: 0.5em 0 0 0;
    }

    .portfolio-grid p {
        margin: 1.2em 0em 0 0em;
        line-height: 1.5em;
    }

    .footer-left p {
        width: 100%;
        margin: 0.8em 0 0 0;
    }

    .banner-info {
        width: 80%;
    }

    .footer-right input[type="text"], .footer-right textarea {
        width: 100%;
        padding: 0.8em;
    }

    .headerbg {
        min-height: 409px;
    }

    .banner-info {
        top: 36px;
        width: 100%;
        left: 0%;
        text-align: center;
    }

    a.downarrow {
        top: 171px;
        left: 42%;
    }

    .years {
        margin-bottom: 1.5em;
    }

    .header-section h2 {
        padding: 0.8em 0 0.5em 0;
        line-height: 1.5em;
        font-size: 1.6em;
    }

    .about div.container {
        padding: 0;
    }

    .bannerhead {
        width: 100%;
    }

    .banner {
        width: 100%;
    }

    .years h4, .years span h4 {
        margin: 0.5em 0 0 0;
    }

    .skill-grid {
        padding: 1em 0;
    }

    .skill-grids {
        padding: 1em 0;
    }

    a.down {
        padding: 0;
        position: absolute;
        left: 45%;
    }

    .skills {
        padding: 0 0 5em 0;
    }

    .skill-section h2 {
        margin-top: 0.5em;
        font-size: 1.6em;
    }

    a.arrow {
        margin: 1em 0 2em 0;
    }

    .portfolio-grids {
        padding-top: 1em;
    }

    .portfolio-grid {
        padding: 0 0 2em 0;
    }

    a.portdown {
        margin: 1em 0 2em 0em;
    }

    .contact-section h2 {
        padding-top: 0.5em;
        font-size: 1.6em;
    }

    .footer {
        padding: 0 0 6em;
    }

    .about span p {
        margin-bottom: 2em;
        width: 100%;
        line-height: 1.6em;
    }

    .nav ul {
        margin: 0;
        padding: 0;
    }

    .nav ul li {
        margin: 0.5em 0.2em;
    }

    .logo {
        margin: 0.8em 0 0em 0em;
        float: none;
        text-align: center;
    }

    .bannerhead h3 {
        font-size: 1.4em;
        margin: 0.3em 0 0.3em;
    }

    .nav {
        float: none;
        text-align: center;
    }

    .bannerlogo {
        float: none;
        margin-top: 0em;
        text-align: center;
    }

    .skill-grid h3 {
        font-size: 1.5em;
    }

    .up {
        bottom: 1%;
        left: 47%;
    }

    .bannerhead h2 {
        font-size: 1.8em;
    }

    .Portfolio-section h2 {
        font-size: 1.6em;
        padding: 1em 0 0.3em;
    }

    .footer-right input[type="submit"] {
        float: none;
        width: 100%
    }
}