/* YOUR CUSTOM STYLES */
*{padding: 0px;margin: 0px}

html,body{height: 100%;width: 100%}
.b{font-weight: bolder;}
.hm-black-strong .mask{transition: .3s}
.hm-black-strong .mask:hover{background-color: rgba(0,0,0,.3) !important;}
.nomargin{margin: 0px !important}
.margin5{margin: 5px;}
.padding5{padding: 5px;}
.padding10{padding: 10px;}
.padding15{padding: 15px;}
.padding20{padding: 20px;}
.padding25{padding: 25px;}
.padding60{padding: 60px;}
.centerDiv{text-align: center;}
.img-fluid{width: 100% !important}
.heroImage{
	height: 100%;
	width: 100%;
	padding: 0px;
	background:url('../img/intro-bg.jpg');
	background-position: 0px -170px;
	background-size: cover;
	background-attachment: fixed;
}
.burgerMenu{height: 51px;width: 51px; position: fixed;background-color: rgba(255,255,255,.5);z-index: 10000;top: 20px;left: 20px;
padding-top: 15px;}
.burgerMenu div{height: 3px;width: 25px;background-color: #cc005f;position:absolute;top: 24px;left: 13px;transition: .5s}
.burgerMenu div:before{height: 3px;width: 25px;background-color: #cc005f;top: -10px;content: '';position: absolute;transition: .5s}
.burgerMenu div:after{height: 3px;width: 25px;background-color: #cc005f;top: 10px;content: '';position: absolute;transition: .5s}

.burgerMenu.active div{background-color: transparent;}
.burgerMenu.active div:before{opacity: 1;transform: rotateZ(45deg);top: 0px}
.burgerMenu.active div:after{opacity: 1;transform: rotateZ(-45deg);top: 0px}

.heroImage .row{background-color: rgba(0,0,0,.5);height: 100%;width: 100%}
.contents{position: absolute;top: 25%;width: 100%;left: 0;}
.heading{font-size: 100px}
.moreAboutMe{border: 3px solid #9e9e9e;color: #fff;padding: 15px 40px;font-size: 20px;margin-top: 20px !important;display: inline-block;transition: .3s !important}
.moreAboutMe:hover{border-color: #cc005f;color: white;}
.mySocial{margin-top:60px !important}
.mySocial a{font-size: 30px;margin-right: 30px !important;color: white;transition: .3s}
.mySocial a:hover{color: #cc005f;}

@media only screen and (max-width: 500px)
{
    .contents{top:0%;}
    .heading{font-size: 35px}
    .h4.subheading{font-size: 21px;font-weight: normal; !important;}
    .moreAboutMe{margin-top: 40px !important;padding: 12px 35px}
    .mySocial{margin-top:40px !important}

}
@media only screen and (max-width: 768px) and (min-width: 501px)
{
    .contents{top:0%;}
    .heading{font-size: 50px;font-weight: bolder;}
    .h4.subheading{font-size: 21px;font-weight: normal; !important;}
    .moreAboutMe{margin-top: 40px !important}
    .mySocial{margin-top:40px !important}

}
@media only screen and (max-width: 992px) and (min-width: 769px)
{
    .contents{top:20%;}
    .heading{font-size: 70px;font-weight: normal;;line-height: 75px}
    .h4.subheading{font-size: 21px;font-weight: normal; !important;}
    .moreAboutMe{margin-top: 40px !important}
    .mySocial{margin-top:40px !important}

}
{
    .contents{top:20%;}
    .heading{font-size: 70px;font-weight: normal;;line-height: 75px}
    .h4.subheading{font-size: 21px;font-weight: normal; !important;}
    .moreAboutMe{margin-top: 40px !important}
    .mySocial{margin-top:40px !important}

}

/*Menu*/
    .menuContainer{position: fixed;transition: .5s;top: 0px;left: 0px;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.0);transition: .5s;display: none;}
    .menuContainer.active{background-color: rgba(0,0,0,0.9);display: block;z-index: 999}
    .menuContainer ul{width: 100%;height: 100%;transition: .5s}
    .menuContainer ul li{width: 100%;text-align: center;height: 16%;transition: .5s}
    .menuContainer ul li a{color: #fff;display: block;font-size: 40px;margin-top: 10px;transition: .5s}
    .menuContainer ul li a:hover{color: #cc005f;}
/*Menu*/
/*About css*/
    .about{padding: 100px 0px;}
    .about .row .col-md-8.centerDiv.h5.b{color: #cc005f;font-weight: bolder !important;letter-spacing: 5px}
    .about .row .col-md-8.centerDiv.h1{margin-top: 20px !important;margin-bottom: 30px !important}
    .about .row .col-md-8 .container-fluid .row .col-sm-8{font-size: 20px;line-height: 35px;}
    .img-circle{border-radius: 50%}
    .aboutheading{color: #cc005f;font-weight: bolder;letter-spacing: 5px;margin-bottom: 10px !important}
    .aboutDescription{margin-bottom: 15px !important}
    .myDetails .col-sm-6 p:nth-child(odd){font-size: 18px;font-weight: bolder;margin-top: 15px !important}
    .myDetails .col-sm-6 p:nth-child(even){color:grey;}
    .myDetails .col-sm-6:nth-child(2) p:nth-child(3),.myDetails .col-sm-6:nth-child(2) p:nth-child(4),.myDetails .col-sm-6:nth-child(2) p:nth-child(5),.myDetails .col-sm-6:nth-child(2) p:nth-child(6),.myDetails .col-sm-6:nth-child(2) p:nth-child(7),.myDetails .col-sm-6:nth-child(2) p:nth-child(8){font-size: 18px;font-weight: bolder;margin-top: 15px !important}

    .progresscontainer{width: 100%;height: 5px;background-color: #e0e0e0;margin-top: 16px !important;}
    .progressbar1{width: 85%;height: 100%;background-color: #212121}
    .progressbar2{width: 75%;height: 100%;background-color: #212121}
    .progressbar3{width: 65%;height: 100%;background-color: #212121}
    .progressbar4{width: 85%;height: 100%;background-color: #212121}
    .progressbar5{width: 70%;height: 100%;background-color: #212121}
    .progressbar6{width: 70%;height: 100%;background-color: #212121}
    .myDetails .col-sm-6 .progress{}
    .smallAbout{line-height: 30px;font-size: 15px}
    .hireButton{    
    	background: transparent !important;
        border: 3px solid #2E2E2E;
        font-family: "poppins-bold", sans-serif;
        font-size: 15px;
        font-weight: bolder;
        display: inline-block;
        letter-spacing: .3rem;
        padding: 15px 80px;
        color: #313131;
        text-decoration: none;
        float: right;
        cursor: pointer;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        margin-top: 20px !important;
        text-align: center;
        width: 100%
    }
    .hireButton:hover{
    	color:#cc005f;border-color: #cc005f;
    }
    .downloadButton{    
    	background: #2E2E2E;
        font-family: "poppins-bold", sans-serif;
        font-size: 15px;
        font-weight: bolder;
        display: inline-block;
        letter-spacing: .3rem;
        padding: 18px 6px;
        color: #fff;
        text-decoration: none;
        float: left;
        cursor: pointer;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        margin-top: 20px !important;
        text-align: center;
        width: 100%
    }
    .downloadButton:hover{
    	background-color: #212121;color: white;
    }
    @media only screen and (max-width: 500px)
    {
        .hireButton{padding: 23px 60px;width: 100%;}
        .downloadButton{padding: 15px 60px;width: 100%}

    }
    @media only screen and (max-width: 768px) and (min-width: 501px)
    {
        .hireButton{padding: 15px 60px;width: 100%;}
        .downloadButton{padding: 15px 60px;width: 100%}

    }
    @media only screen and (max-width: 992px) and (min-width: 769px)
    {
        .about .row .col-md-8{padding: 0px}
        .hireButton{padding: 15px 60px;width: 100%;}
        .downloadButton{padding: 18px 60px;width: 100%}
        .myDetails .col-sm-6{padding: 0px}
    }
/*About css*/
/*RESUME CSS*/
    .resume{padding: 100px 0px;background: #ebebeb;}
    .resume .row .col-md-8 .centerDiv .h5.b{color: #cc005f;font-weight: bolder !important;letter-spacing: 5px}
    .resume .row .col-md-8 .centerDiv h3{font-size: 25px;line-height: 30px}
    .resume .row .col-md-8 .centerDiv .h1{margin-top: 20px !important;margin-bottom: 30px !important}
    .resumeContainer.education .h2{text-align: center;margin-top: 20px !important;margin-bottom: 30px !important;color: #cc005f;font-size: 25px;letter-spacing: 5px}
    .resumeContainer.education .row .col-sm-4{border-right: 1px solid grey;}
    .resumeContainer.education .row .col-sm-4 h4{letter-spacing: 2px;text-align: right;font-size: 20px;margin-right: 40px !important;font-weight: bold;margin-bottom: 15px !important}
    .resumeContainer.education .row .col-sm-4 h5{letter-spacing: 2px;text-align: right;margin-right: 40px !important;color: #6e6e6e;font-size: 18px}
    .smallScreenHiddenHeading{visibility: hidden;display: none}
    .smallScreenHiddenHeading h4{letter-spacing: 2px;margin-left: 40px !important;font-weight: bold;margin-bottom: 15px !important}
    .smallScreenHiddenHeading h5{letter-spacing: 2px;margin-left: 40px !important;color: #6e6e6e !important;font-size: 18px}
    .resumeContainer.education .row .col-sm-8 h5{letter-spacing: 2px;margin-left: 40px !important;font-weight: normal;color:#000;margin-bottom: 15px !important}
    .resumeContainer.education .row .col-sm-8 p{margin-left: 40px !important;color: #6e6e6e;margin-bottom: 15px !important}
    .resumeIcon{text-align: center;position: absolute;top: -8px;left: -20px;padding: 10px;background-color: #313131;color: white;border-radius: 50%;height: 40px;width: 40px}
    @media only screen and (max-width: 572px){
        .smallScreenHiddenHeading{visibility: visible;display: block;}
        .resumeContainer.education .row .col-sm-4{visibility: hidden;display: none}
        .resumeContainer.education .row{padding:0px 20px;}
        .resumeContainer.education .row .col-sm-8{border-left: 1px solid grey}
        .smallScreenHiddenHeading h4{margin-left: 20px !important;}
        .smallScreenHiddenHeading h5{margin-left: 20px !important;}
        .resumeContainer.education .row .col-sm-8 h5{margin-left: 20px !important;}
        .resumeContainer.education .row .col-sm-8 p{margin-left: 20px !important;}
        
    }
/*RESUME CSS*/
/*portfolio css*/
    .portfolio .container{width: 100%}
    .portfolio .container .row{padding: 50px 120px}
    .portfolio .container .row .col-sm-6{padding: 0px}
    .logo2{width: 300px}
    .logo4{width: 100px}
    @media only screen and (max-width: 768px) and (min-width: 501px)
    {
        .portfolio .container .row{padding: 50px 30px}
    }
    @media only screen and (max-width: 500px)
    {
        .portfolio .container .row{padding: 50px 0px}
    }
/*portfolio css*/
/*service CSS*/
    .service{
    	background:url('../img/bg.jpg');
    	background-position: center;
    	background-size: 100%  100%;
        background-repeat: no-repeat;color: #fff}
    .service .container-fluid.rgba-black-strong{padding: 100px 0px;}
    .service .row .col-md-8 .centerDiv .h5.b{color: #cc005f;font-weight: bolder !important;letter-spacing: 5px}
    .service .row .col-md-8 .centerDiv .h1{margin-top: 20px !important;margin-bottom: 30px !important;color: #fff}
    .service .row .col-md-8 .centerDiv .h2{margin-top: 20px !important;margin-bottom: 30px !important;color: #bdbdbd;}
    .service .row .col-md-8 .centerDiv h3{margin-top: 20px !important;margin-bottom: 30px !important;color: #bdbdbd;}
    .servicecontents{padding: 15px 50px}
    .servicecontents .centerDiv{margin-bottom: 35px !important}
    .servicecontents h3{margin-bottom: 40px !important;font-weight: bolder;}
    .servicecontents p{line-height: 30px;font-size: 20px;font-weight: normal;}
    .serviceDescription{}
    .serviceIcon1,.serviceIcon2,.serviceIcon3{height: 60px}
    @media only screen and (max-width: 992px) and (min-width: 769px)
    {
        .portfolio .container .row{padding: 50px 30px}
        .servicecontents{padding: 0px 10px}
        .servicecontents p{line-height: 30px;font-size: 15px}
    }
    @media only screen and (max-width: 768px) and (min-width: 501px)
    {
        .portfolio .container .row{padding: 50px 30px}
    }
    @media only screen and (max-width: 500px)
    {
        .servicecontents{padding: 0px;}
        .servicecontents p{font-size: 13px}
    }
/*service CSS*/
/*extra css*/
    .extra{background-color: #cc005f;}
    .extra .container-fluid{background-color: rgba(0,0,0,.25);padding: 50px}
    .extraIcon{width: 50px}
    .extraNums{color: #FFF;font-weight: bolder;letter-spacing: 2px;font-size: 42px} 
    .extraDescription{color: rgba(255, 255, 255, 0.5);font-weight: bolder;letter-spacing: 2px}
    @media only screen and (min-width: 992px)
    {
        .extra .container-fluid .row .col-lg-2.col-sm-4{border-right: 1px solid rgba(255, 255, 255, 0.3);padding: 20px}
        .extra .container-fluid .row .col-lg-2.col-sm-4:nth-child(6){border:none;}
    }
    @media only screen and (max-width: 991px) and (min-width: 576px)
    {
        .extra .container-fluid .row .col-lg-2.col-sm-4{border-right: 1px solid rgba(255, 255, 255, 0.3);padding: 20px}
        .extra .container-fluid .row .col-lg-2.col-sm-4:nth-child(3),.extra .container-fluid .row .col-lg-2.col-sm-4:nth-child(6){border:none;}
    }
    @media only screen and (max-width: 575px)
    {
        .extra .container-fluid .row .col-lg-2.col-sm-4{padding-bottom: 30px}
    }
/*extra css*/
/*contact CSS*/
    .contact{background: #151515;
        }
    .contact .container-fluid{padding: 100px 0px;}
    .contact .row .col-md-8 .centerDiv .h5.b{color: #cc005f;font-weight: bolder !important;letter-spacing: 5px}
    .contact .row .col-md-8 .centerDiv .h1{margin-top: 20px !important;margin-bottom: 30px !important;color: #fff}
    .contact .row .col-md-8 .centerDiv .h2{margin-top: 20px !important;margin-bottom: 30px !important;color: #bdbdbd;}
    .contact .row .col-md-8 .centerDiv h3{margin-top: 20px !important;margin-bottom: 30px !important;color: #bdbdbd;}
    .contactForm form div{margin-bottom: 50px !important}
    .submitButton{background-color: #cc005f;border:none;width:100%;padding:20px 0px;text-transform: uppercase;color: white;font-weight: bolder;letter-spacing: 5px;transition: .3s}
    .submitButton:hover{background-color: #a0004a;}
    .firstp{margin: 25px 0px 10px 0px!important;font-weight: bolder !important;letter-spacing: 3px !important;color:#cc005f;}
    .nextp{color: #6e6e6e;line-height: 25px;font-size: 15px}
    .footerIcon{width: 60px}
    .container.contact{padding: 30px 50px 30px 50px;width: 100%}
    .copyrightRow{padding: 50px 0px 10px 0px}
    .copyright{color: #6e6e6e;}
    .copyrightLink{color: white !important}
    .footerSocial{text-align: right;}
    .footerSocial a{color:white;font-size: 20px;margin-left: 35px !important}
    @media only screen and (max-width: 768px) and (min-width: 501px)
    {
        .copyright{text-align: center;}
        .footerSocial{margin-top: 20px !important;text-align: center;}
    }
    @media only screen and (max-width: 500px)
    {
        .copyright{text-align: center;}
        .footerSocial{margin-top: 20px !important;text-align: center;}
        .footerSocial a{font-size: 15px;margin-left: 5px !important;margin-right: 20px !important}
    }
/*contact CSS*/
.topButton{height: 70px;width: 70px;position: fixed;z-index: 1000;right: 0px;bottom: 0px;background-color: #cc005f}
.topButton img{height: 30px;margin-top: 20px !important;margin-left: 20px !important}
.chip{margin-bottom: 5px !important;}
/*MODAL CSS*/
    .menuModal{height: 100%;width: 100%}
    .menuModal .modal-dialog {
        max-width: 100% !important;
        height: 100%;
        margin: 0;
        padding: 0;
        background: rgba(0,0,0,.5) !important;
    }

    .menuModal .modal-dialog .modal-content {
        height: auto;
        width: 100%;
        min-height: 100%;
        border-radius: 0;
        background: rgba(0,0,0,.7) !important;
    }
    .menuList{text-align: center;}
    .menuList .menuItems{margin:30px 0px 30px 0px;font-size: 40px}
    .menuList .menuItems a{color: white;transition: .3s}
    .menuList .menuItems:hover a{color: rgba(255,255,255,0.3);}
    @media only screen and (max-width: 320px)
    {
        .menuList .menuItems{margin:25px 0px 20px 0px;font-size: 30px}
    }
/*MODAL CSS*/