@-webkit-keyframes menucollapsefade {
 0%,60%,100% {
  opacity:1
 }
 20%,40% {
  opacity:0
 }
}
@keyframes menucollapsefade {
 0%,60%,100% {
  opacity:1
 }
 20%,40% {
  opacity:0
 }
}
@-webkit-keyframes bounce {
 0%,100% {
  -webkit-transform:scale(0)
 }
 50% {
  -webkit-transform:scale(1)
 }
}
@keyframes bounce {
 0%,100% {
  transform:scale(0);
  -webkit-transform:scale(0)
 }
 50% {
  transform:scale(1);
  -webkit-transform:scale(1)
 }
}
body * {
 font-family:roboto,Arial,Helvetica,sans-serif
 transition:1s;
}
a,button,select,input {
 outline:none!important
}
.loading-container {
 position:fixed;
 left:0;
 top:0;
 width:100%;
 height:100%;
 z-index:99999!important
}
.loading-container .bounce-container {
 position:relative;
 width:40px;
 height:40px;
 top:calc(50% - 20px);
 left:calc(50% - 20px)
}
.loading-container .bounce-container .bounce1,.loading-container .bounce-container .bounce2 {
 width:100%;
 height:100%;
 border-radius:50%;
 opacity:.6;
 position:absolute;
 top:0;
 left:0;
 -webkit-animation:bounce 2s infinite ease-in-out;
 animation:bounce 2s infinite ease-in-out
}
.loading-container .bounce-container .bounce2 {
 -webkit-animation-delay:-1s;
 animation-delay:-1s
}
.animated {
 animation-duration:.5s
}
.pages {
 position:fixed;
 left:50px;
 width:calc(100% - 50px);
 height:100%;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
.pages .sub-pages {
 position:absolute;
 margin:30px auto;
 left:0;
 right:0;
 width:calc(100% - 60px);
 height:calc(100% - 60px);
 max-width:1240px
}
.pages .sub-pages .section {
 opacity:0;
 position:absolute;
 width:100%;
 height:100%;
 z-index:9
}
.pages .sub-pages .section.active {
 opacity:1;
 z-index:10
}
.pages .sub-pages .section .main-container {
 padding:50px
}
.pages .sub-pages .section .main-container .main-title {
 text-align:center;
 font-weight:700;
 font-size:46px;
 line-height:86px;
 margin-top:-15px;
}
.pages .sub-pages .section .main-container .main-desc {
 font-size:19px;
 text-align:center;
 line-height:24px;
 /*! margin-top:-11px; */
}
.pages .sub-pages .section .main-container .content-group {
 margin-top:50px
}
.pages .sub-pages .section .main-container .content-group .title {
 font-size:16px;
 padding:12px 15px 10px
}
body.left-side-menu-expand .pages {
 width:calc(100% - 240px);
 left:240px
}
.mfp-container {
 padding:0
}
.mfp-wrap.popup-box-inline {
 max-width:720px;
 left:50%;
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
 -webkit-transform:translateX(-50%);
 transform:translateX(-50%)
}
.mfp-wrap.popup-box-inline .mfp-close {
 font-size:40px
}
.mfp-wrap.popup-box-inline .popup-box {
 height:600px
}
.mfp-wrap.popup-box-inline .popup-box .image-area img {
 max-width:100%
}
.mfp-wrap.popup-box-inline .popup-box .btn-area {
 text-align:right
}
.mfp-wrap.popup-box-inline .popup-box .btn-area a {
 font-weight:700;
 text-decoration:none;
 height:45px;
 min-width:45px;
 line-height:43px;
 text-align:center;
 display:inline-block;
 padding:0 25px;
 cursor:pointer;
 background-color:transparent;
 -webkit-border-radius:50px;
 -moz-border-radius:50px;
 -ms-border-radius:50px;
 border-radius:50px;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
.mfp-wrap.popup-box-inline .popup-box .btn-area a i {
 font-size:24px;
 margin-left:6px;
 position:relative;
 top:4px
}
.mfp-wrap.popup-box-inline .popup-box .content-area {
 padding:25px;
 font-size:14px
}
.mfp-wrap.popup-box-inline .popup-box .content-area .title {
 font-weight:700;
 font-size:16px
}
.mfp-wrap.popup-box-inline .popup-box .content-area .category {
 font-size:12px
}
.mfp-wrap.popup-box-inline .popup-box .content-area .content {
 margin-top:20px;
 text-align:justify
}
.mfp-wrap.popup-box-inline .popup-box .content-area .content blockquote {
 padding:10px 20px;
 font-style:italic
}
header {
 position:fixed;
 top:0;
 left:0;
 width:50px;
 height:100%;
 z-index:2;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
header .logo-area {
 padding:10px 0;
 position:relative;
 margin-bottom:1px
}
header .logo-area a {
 width:50px;
 display:block;
 text-align:center;
 text-decoration:none
}
header .logo-area a .avatar img {
 width:36px;
 height:36px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%
}
header .logo-area:after {
 content:" ";
 position:absolute;
 left:10px;
 bottom:0;
 width:calc(100% - 20px);
 height:1px
}
header .links-area ul {
 margin:0;
 padding:0;
 list-style:none
}
header .links-area ul li a {
 display:block;
 position:relative;
 padding:4px 12px 4px 9px;
 font-size:25px;
 text-decoration:none;
 white-space:nowrap;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
header .expand-area {
 position:absolute;
 left:0;
 bottom:0;
 right:0
}
header .expand-area .expand-collapse {
 display:block;
 position:relative;
 text-align:right;
 padding:8px 15px 4px;
 font-size:18px;
 cursor:pointer;
 text-decoration:none;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
header .expand-area .expand-collapse span {
 position:absolute;
 top:0;
 opacity:0;
 visibility:hidden;
 text-align:center
}
header .expand-area .expand-collapse i:before {
 content:"\f10e"
}
header .logo-area a span,header .links-area a span,header .expand-area a span {
 min-width:75px;
 position:absolute;
 z-index:9;
 left:120%;
 top:8px;
 font-size:12px;
 padding:5px 9px;
 pointer-events:none;
 opacity:0;
 visibility:hidden;
 text-align:center;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-border-radius:3px;
 -moz-border-radius:3px;
 -ms-border-radius:3px;
 border-radius:3px
}
header .logo-area a:hover span,header .links-area a:hover span,header .expand-area a:hover span {
 opacity:1;
 visibility:visible
}
header.menufade .logo-area,header.menufade .links-area,header.menufade .expand-area {
 animation:menucollapsefade 2s ease-in-out
}
body.left-side-menu-expand header {
 width:240px;
 overflow:hidden
}
body.left-side-menu-expand header .logo-area a {
 width:100%;
 text-align:left;
 padding-left:12px
}
body.left-side-menu-expand header .logo-area a .avatar {
 width:40px;
 display:inline-block
}
body.left-side-menu-expand header .logo-area a span {
 font-weight:600;
 opacity:1;
 visibility:visible;
 position:relative;
 left:-5px;
 top:1px;
 font-size:15px;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
body.left-side-menu-expand header .links-area ul li a {
 display:block;
 width:100%;
 text-align:left;
 padding-left:12px
}
body.left-side-menu-expand header .links-area ul li a span {
 opacity:1;
 visibility:visible;
 position:relative;
 left:-5px;
 top:-4px;
 font-size:14px;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
body.left-side-menu-expand header .expand-area {
 text-align:right
}
body.left-side-menu-expand header .expand-area .expand-collapse {
 display:block
}
body.left-side-menu-expand header .expand-area .expand-collapse i:before {
 content:"\f10d"
}
body.left-side-menu-expand header .expand-area .expand-collapse span {
 visibility:hidden;
 opacity:0
}
body.mobile-device header .links-area ul li a span {
 visibility:hidden
}
body.mobile-device.left-side-menu-expand header .links-area ul li a span {
 visibility:visible
}
.mobile-header {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:50px
}
#home {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-size:cover;
 background:url(../images/main_bg.jpg);
 background-repeat:no-repeat;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#home:after {
 position:absolute;
 content:" ";
 left:0;
 top:0;
 right:0;
 bottom:0;
 width:100%;
 height:100%
}
#home .center {
 display:table;
 table-layout:fixed;
 height:100%;
 width:100%;
 padding-left:12%;
 position:relative;
 z-index:2
}
#home .center .vertical-middle {
 display:table-cell;
 vertical-align:middle;
 opacity:0
}
#home .center .vertical-middle.active {
 opacity:1
}
#home .center .vertical-middle .title {
 font-size:64px;
 font-weight:600
}
#home .center .vertical-middle .subtitle {
 font-size:24px
}
#about .main-container .button-groups {
 margin-top:50px;
 text-align:center
}
#about .main-container .button-groups ul {
 padding:0;
 margin:0;
 list-style:none
}
#about .main-container .button-groups ul li {
 display:inline-block;
 margin:0 5px
}
#about .main-container .button-groups ul li span {
 padding:0 24px;
 position:relative;
 top:-4px;
}
#about .main-container .button-groups ul li span .la {
 position:relative;
 top:4px
}
#about .main-container .button-groups ul li a {
 font-weight:700;
 text-decoration:none;
 height:45px;
 min-width:45px;
 line-height:40px;
 text-align:center;
 display:inline-block;
 -webkit-border-radius:50px;
 -moz-border-radius:50px;
 -ms-border-radius:50px;
 border-radius:50px;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#about .main-container .button-groups ul li a:hover {
 border-color:transparent
}
#about .main-container .button-groups ul li a .la {
 font-size:26px
}
#about .main-container .content-group .service-container .card {
 border:none;
 margin-top:25px
}
#about .main-container .content-group .service-container .card .card-body {
 padding:0
}
#about .main-container .content-group .service-container .card .card-body .icon-area {
 margin-bottom:10px
}
#about .main-container .content-group .service-container .card .card-body .icon-area .la {
 font-size:40px
}
#about .main-container .content-group .service-container .card .card-body .name {
 font-weight:600
}
#about .main-container .content-group .service-container .card .card-body .description {
 text-align:justify;
 font-size:13px
}
#about .main-container .content-group .pricing-container .card {
 margin-top:25px;
 border:none
}
#about .main-container .content-group .pricing-container .card .card-header {
 padding:0;
 text-align:center;
 background-color:transparent;
 border:none
}
#about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
 font-size:48px
}
#about .main-container .content-group .pricing-container .card .card-header .title {
 border:none;
 background-color:transparent;
 font-weight:600;
 font-size:16px;
 padding:7px 0 0
}
#about .main-container .content-group .pricing-container .card .card-header .amount .currency {
 font-size:18px;
 position:relative;
 font-weight:500;
 top:-15px
}
#about .main-container .content-group .pricing-container .card .card-header .amount .number {
 font-size:36px;
 font-weight:700;
 margin:0 3px
}
#about .main-container .content-group .pricing-container .card .card-header .amount .timing {
 font-size:15px;
 position:relative;
 font-weight:500;
 bottom:3px
}
#about .main-container .content-group .pricing-container .card .card-body ul {
 margin:0;
 padding:0;
 list-style:none;
 text-align:center
}
#about .main-container .content-group .pricing-container .card .card-body ul li {
 line-height:28px;
 font-size:15px
}
#about .main-container .content-group .pricing-container .card .card-body ul li.disable {
 text-decoration:line-through
}
#about .main-container .content-group .pricing-container .card .card-footer {
 background-color:transparent;
 border:none;
 text-align:center
}
#about .main-container .content-group .pricing-container .card .card-footer a {
 font-weight:700;
 text-decoration:none;
 padding:8px;
 min-width:200px;
 text-align:center;
 display:inline-block;
 -webkit-border-radius:50px;
 -moz-border-radius:50px;
 -ms-border-radius:50px;
 border-radius:50px;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#about .main-container .content-group .pricing-container .card .card-footer a:hover {
 border-color:transparent
}
#about .main-container .content-group .fun-facts-container .card {
 border:none;
 margin-top:25px;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#about .main-container .content-group .fun-facts-container .card .card-body .icon-area {
 margin-bottom:5px
}
#about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
 font-size:42px
}
#about .main-container .content-group .fun-facts-container .card .card-body .text {
 font-size:14px
}
#about .main-container .content-group .fun-facts-container .card .card-body .text b {
 display:block;
 font-size:26px;
 margin-right:5px
}
#about .main-container .content-group .clients-container {
 margin-top:25px;
 margin-bottom:-25px
}
#about .main-container .content-group .clients-container .col {
 text-align:center
}
#about .main-container .content-group .clients-container .col a {
 font-size:92px;
 opacity:.45;
 text-decoration:none;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#about .main-container .content-group .clients-container .col a img {
 height:96px
}
#about .main-container .content-group .clients-container .col a:hover {
 opacity:1
}
#about .main-container .content-group .testimonials-container {
 margin-top:25px
}
#about .main-container .content-group .testimonials-container .card {
 border:none
}
#about .main-container .content-group .testimonials-container .card .card-header {
 background:0 0;
 text-align:center;
 border:none
}
#about .main-container .content-group .testimonials-container .card .card-header img {
 width:82px;
 margin:0 auto;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%
}
#about .main-container .content-group .testimonials-container .card .card-body p {
 font-size:15px;
 text-align:center;
 margin-bottom:0
}
#about .main-container .content-group .testimonials-container .card .card-footer {
 padding:0;
 text-align:center;
 border:none;
 background:0 0
}
#about .main-container .content-group .testimonials-container .card .card-footer .name {
 font-weight:700;
 font-size:18px
}
#about .main-container .content-group .testimonials-container .card .card-footer .title {
 border:none;
 background:0 0;
 font-size:14px;
 padding:0
}
#about .main-container .content-group .testimonials-container .owl-dots {
 text-align:center;
 margin-top:20px
}
#about .main-container .content-group .testimonials-container .owl-dots .owl-dot {
 width:12px;
 height:12px;
 margin:0 3px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 -ms-border-radius:50%;
 border-radius:50%
}
#resume .main-container .content-group .education-container .card,#resume .main-container .content-group .experience-container .card {
 border:none;
 margin-top:25px
}
#resume .main-container .content-group .education-container .card-header,#resume .main-container .content-group .education-container .card-footer,#resume .main-container .content-group .experience-container .card-header,#resume .main-container .content-group .experience-container .card-footer {
 background-color:transparent;
 border:none
}
#resume .main-container .content-group .education-container .card-header,#resume .main-container .content-group .experience-container .card-header {
 font-weight:600;
 font-size:16px;
 padding:0
}
#resume .main-container .content-group .education-container .card-body,#resume .main-container .content-group .experience-container .card-body {
 font-size:12px;
 padding:0 0 8px
}
#resume .main-container .content-group .education-container .card-footer,#resume .main-container .content-group .experience-container .card-footer {
 text-align:justify;
 font-size:14px;
 padding:0
}
#resume .main-container .content-group .coding-skills-container ul,#resume .main-container .content-group .personal-skills-container ul {
 margin:0;
 padding:0;
 list-style:none
}
#resume .main-container .content-group .coding-skills-container ul li,#resume .main-container .content-group .personal-skills-container ul li {
 margin-top:16px
}
#resume .main-container .content-group .coding-skills-container ul li .label,#resume .main-container .content-group .personal-skills-container ul li .label {
 font-size:14px;
 font-weight:600
}
#resume .main-container .content-group .coding-skills-container ul li .progress,#resume .main-container .content-group .personal-skills-container ul li .progress {
 height:12px;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#F .filter {
 text-align:right;
 margin-top:25px;
 margin-bottom:-25px
}
#portfolio .filter .f_btn {
 display:inline-block;
 margin-left:15px
}
#portfolio .filter .f_btn label {
 font-weight:700;
 cursor:pointer
}
#portfolio .filter .f_btn label input {
 display:none
}
#portfolio .main-container .grid-items {
 margin-top:10px
}
#portfolio .main-container .grid-items .card {
 border:none;
 margin-top:30px
}
#portfolio .main-container .grid-items .card .card-body,#portfolio .main-container .grid-items .card .card-footer {
 padding:0
}
#portfolio .main-container .grid-items .card .card-body .image-area {
 position:relative;
 overflow:hidden
}
#portfolio .main-container .grid-items .card .card-body .image-area img {
 max-width:100%;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#portfolio .main-container .grid-items .card .card-body .image-area span {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 opacity:0;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#portfolio .main-container .grid-items .card .card-body .image-area span .la {
 position:absolute;
 top:calc(50% - 30px);
 left:calc(50% - 30px);
 font-size:60px
}
#portfolio .main-container .grid-items .card .card-footer {
 text-align:center;
 padding:10px 0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#portfolio .main-container .grid-items .card .card-footer a {
 font-weight:700;
 text-decoration:none
}
#portfolio .main-container .grid-items .card .card-footer .category {
 font-size:12px
}
#portfolio .main-container .grid-items .card:hover .card-body .image-area span {
 opacity:.5
}
#portfolio .main-container .grid-items .card:hover .card-body .image-area img {
 -moz-transform:scale(1.08);
 -ms-transform:scale(1.08);
 -o-transform:scale(1.08);
 -webkit-transform:scale(1.08);
 transform:scale(1.08)
}

/*Gallery*/
#gallery .filter {
 text-align:right;
 margin-top:25px;
 margin-bottom:-25px
}
#gallery .filter .f_btn {
 display:inline-block;
 margin-left:15px
}
#gallery .filter .f_btn label {
 font-weight:700;
 cursor:pointer
}
#gallery .filter .f_btn label input {
 display:none
}
#gallery .main-container .grid-items {
 margin-top:10px
}
#gallery .main-container .grid-items .card {
 border:none;
 margin-top:30px
}
#gallery .main-container .grid-items .card .card-body,#gallery .main-container .grid-items .card .card-footer {
 padding:0
}
#gallery .main-container .grid-items .card .card-body .image-area {
 position:relative;
 overflow:hidden
}
#gallery .main-container .grid-items .card .card-body .image-area img {
 max-width:100%;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#gallery .main-container .grid-items .card .card-body .image-area span {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 opacity:0;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#gallery .main-container .grid-items .card .card-body .image-area span .la {
 position:absolute;
 top:calc(50% - 30px);
 left:calc(50% - 30px);
 font-size:60px
}
#gallery .main-container .grid-items .card .card-footer {
 text-align:center;
 padding:10px 0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#gallery .main-container .grid-items .card .card-footer a {
 font-weight:700;
 text-decoration:none
}
#gallery .main-container .grid-items .card .card-footer .category {
 font-size:12px
}
#gallery .main-container .grid-items .card:hover .card-body .image-area span {
 opacity:.5
}
#gallery .main-container .grid-items .card:hover .card-body .image-area img {
 -moz-transform:scale(1.08);
 -ms-transform:scale(1.08);
 -o-transform:scale(1.08);
 -webkit-transform:scale(1.08);
 transform:scale(1.08)
}

/* gallery */




#blog .main-container .card {
 border:none;
 margin-top:30px
}
#blog .main-container .card .card-body,#blog .main-container .card .card-footer {
 padding:0
}
#blog .main-container .card .card-body .image-area {
 position:relative;
 overflow:hidden
}
#blog .main-container .card .card-body .image-area img {
 max-width:100%;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#blog .main-container .card .card-body .image-area span {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 opacity:0;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#blog .main-container .card .card-body .image-area span .la {
 position:absolute;
 top:calc(50% - 30px);
 left:calc(50% - 30px);
 font-size:60px
}
#blog .main-container .card .card-body .image-area .date {
 position:absolute;
 right:15px;
 bottom:15px;
 width:50px;
 height:50px;
 font-size:12px;
 text-align:center;
 padding-top:2px
}
#blog .main-container .card .card-body .image-area .date b,#blog .main-container .card .card-body .image-area .date strong {
 display:block;
 font-size:21px;
 margin-bottom:-5px
}
#blog .main-container .card .card-footer {
 text-align:center;
 padding:10px 0;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#blog .main-container .card .card-footer a {
 font-weight:700;
 text-decoration:none
}
#blog .main-container .card .card-footer .category {
 font-size:12px
}
#blog .main-container .card:hover .card-body .image-area span {
 opacity:.5
}
#blog .main-container .card:hover .card-body .image-area img {
 -moz-transform:scale(1.08);
 -ms-transform:scale(1.08);
 -o-transform:scale(1.08);
 -webkit-transform:scale(1.08);
 transform:scale(1.08)
}
#contacts .map {
 margin-top:50px!important;
 margin-bottom:-7px
}
#contacts .map iframe {
 width:100%;
 border:none
}
#contacts .main-container .content-group .get-in-touch-container {
 margin-top:10px
}
#contacts .main-container .content-group .get-in-touch-container ul {
 margin:0;
 padding:0;
 list-style:none
}
#contacts .main-container .content-group .get-in-touch-container ul li {
 line-height:36px
}
#contacts .main-container .content-group .get-in-touch-container ul li i {
 font-size:28px;
 position:relative;
 top:5px;
 margin-right:6px
}
#contacts .main-container .content-group .get-in-touch-container ul li span {
 font-size:14px
}
#contacts .main-container .content-group .get-in-touch-container ul li a {
 font-weight:400
}
#contacts .main-container .content-group .contact-form-container {
 margin-top:20px
}
#contacts .main-container .content-group .contact-form-container .form-group {
 position:relative
}
#contacts .main-container .content-group .contact-form-container .form-group i {
 position:absolute;
 top:9px;
 right:10px;
 font-size:19px
}
#contacts .main-container .content-group .contact-form-container .form-group .form-control {
 font-size:14px;
 padding-right:35px;
 -webkit-border-radius:0;
 -moz-border-radius:0;
 -ms-border-radius:0;
 border-radius:0
}
#contacts .main-container .content-group .contact-form-container .form-group .form-control:focus {
 -webkit-box-shadow:none;
 -moz-box-shadow:none;
 -ms-box-shadow:none;
 box-shadow:none
}
#contacts .main-container .content-group .contact-form-container .form-group .no-resize {
 resize:none
}
#contacts .main-container .content-group .contact-form-container .button-area {
 text-align:right
}
#contacts .main-container .content-group .contact-form-container .button-area .btn-submit {
 font-weight:700;
 text-decoration:none;
 height:45px;
 min-width:45px;
 line-height:43px;
 text-align:center;
 display:inline-block;
 padding:0 25px;
 cursor:pointer;
 -webkit-border-radius:50px;
 -moz-border-radius:50px;
 -ms-border-radius:50px;
 border-radius:50px;
 -moz-transition:.5s;
 -o-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s
}
#contacts .main-container .content-group .contact-form-container .button-area .btn-submit i {
 font-size:24px;
 margin-left:6px;
 position:relative;
 top:4px
}
@media(min-width:1024px) and (max-width:1600px) {
 #home {
  background-position:75% 10%!important
 }
}
@media(max-width:1023px) {
 .mfp-wrap.popup-box-inline .popup-box .content-area .title {
  font-size:18px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .category {
  font-size:15px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .content * {
  font-size:15px
 }
 header {
  top:0;
  left:0;
  height:50px;
  width:100%;
  border:none!important
 }
 header.open .btn-menu-toggle .line {
  background:0 0
 }
 header.open .btn-menu-toggle .line:before {
  top:0;
  bottom:auto;
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg)
 }
 header.open .btn-menu-toggle .line:after {
  top:auto;
  bottom:0;
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg)
 }
 header.open .links-area {
  opacity:1;
  visibility:visible
 }
 header.open .links-area ul li a span {
  display:none
 }
 header .logo-area {
  padding:7px 0
 }
 header .logo-area:after {
  display:none
 }
 header .logo-area .maximize {
  font-weight:600;
  opacity:1;
  visibility:visible;
  position:absolute;
  left:45px;
  top:8px;
  font-size:15px
 }
 header .logo-area a {
  width:calc(100% - 100px);
  display:block;
  text-align:left;
  padding-left:8px;
  text-decoration:none
 }
 header .expand-area {
  display:none
 }
 header .links-area {
  position:absolute;
  left:0;
  top:50px;
  margin-top:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  text-align:center;
  -moz-transition:all .3s ease 0s;
  -o-transition:all .3s ease 0s;
  -webkit-transition:all .3s ease 0s;
  transition:all .3s ease 0s
 }
 header .links-area ul li {
  display:inline-block
 }
 header .links-area ul li a {
  display:inline-block;
  width:48px;
  height:48px;
  padding:0;
  text-align:center;
  border-left:none;
  padding-left:3px
 }
 header .links-area ul li a .la {
  margin-top:12px
 }
 header .links-area ul li a span {
  top:11px
 }
 header .btn-menu-toggle {
  position:absolute;
  top:0;
  right:0;
  width:50px;
  height:50px;
  cursor:pointer
 }
 header .btn-menu-toggle .line {
  margin:-1px 0 0 -10px;
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px
 }
 header .btn-menu-toggle .line:before,header .btn-menu-toggle .line:after {
  content:'';
  position:absolute;
  left:0;
  top:-7px;
  width:100%;
  height:2px;
  -moz-transition:all .3s ease 0s;
  -o-transition:all .3s ease 0s;
  -webkit-transition:all .3s ease 0s;
  transition:all .3s ease 0s
 }
 header .btn-menu-toggle .line:after {
  top:auto;
  bottom:-7px
 }
 .pages {
  left:0;
  width:100%
 }
 .pages .sub-pages {
  margin:50px 0 0;
  height:calc(100% - 50px);
  width:100%
 }
 .pages .sub-pages .section {
  height:100%;
  width:100%
 }
 .pages .sub-pages .section .main-container {
  padding:10px 16px 16px
 }
 .pages .sub-pages .section .main-container .content-group {
  margin-top:30px!important
 }
 .pages .sub-pages .section .main-container .main-title {
  margin-top:15px
 }
 #home {
  background-position:75% 10%!important
 }
 #home .center {
  text-align:center;
  padding:0
 }
 #home .center .vertical-middle {
  vertical-align:bottom;
  padding-bottom:20px
 }
 #home .center .vertical-middle .title {
  line-height:64px;
  margin-bottom:12px
 }
 #about .main-container .clients-container {
  margin-top:10px!important;
  margin-bottom:-10px
 }
 #about .main-container .clients-container .col a {
  opacity:1!important
 }
 #about .main-container .service-container .card {
  margin-top:15px
 }
 #about .main-container .service-container .card .card-body .name {
  font-size:18px!important
 }
 #about .main-container .service-container .card .card-body .description {
  font-size:15px!important
 }
 #about .main-container .service-container .card .card-body .icon-area .la {
  font-size:52px!important
 }
 #about .main-container .pricing-container .card .card-header .icon-area .la {
  font-size:52px!important
 }
 #about .main-container .fun-facts-container .card {
  margin-top:15px
 }
 #about .main-container .fun-facts-container .card .card-body .icon-area .la {
  font-size:52px!important
 }
 #about .main-container .fun-facts-container .card .card-body .text {
  font-size:15px!important
 }
 #about .main-container .testimonials-container .card-header {
  padding:0
 }
 #about .main-container .testimonials-container .card-footer .title {
  font-size:15px!important
 }
 #contacts .main-container .content-group .get-in-touch-container ul li span {
  font-size:15px
 }
 #contacts .map {
  margin-top:30px!important
 }
 #blog .main-container .card {
  margin-top:15px
 }
 #blog .main-container .card .card-body .image-area .date {
  font-size:15px;
  width:55px;
  height:55px
 }
 #blog .main-container .card .card-footer {
  padding:10px 12px!important
 }
 #blog .main-container .card .card-footer .name {
  font-size:18px;
  white-space:nowrap;
  -ms-text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden
 }
 #blog .main-container .card .card-footer .category {
  font-size:15px;
  white-space:nowrap;
  -ms-text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden
 }
 #blog .main-container .clearfix {
  padding:0 5px
 }
 #blog .main-container .clearfix .col {
  padding-right:8px;
  padding-left:8px
 }
 #portfolio .main-container {
  padding-bottom:0
 }
 #portfolio .main-container .col {
  padding-right:8px;
  padding-left:8px
 }
 #portfolio .main-container .filter {
  margin-bottom:5px
 }
 #portfolio .main-container .grid-items {
  margin-left:-8px;
  margin-right:-8px
 }
 #portfolio .main-container .grid-items .card {
  margin-bottom:15px;
  margin-top:0
 }
 #portfolio .main-container .grid-items .card .card-footer .name {
  font-size:18px
 }
 #portfolio .main-container .grid-items .card .card-footer .category {
  font-size:15px
 }
 #resume .content-group .card {
  margin-top:15px!important
 }
 #resume .content-group .card .card-header {
  font-size:18px!important
 }
 #resume .content-group .card .card-body,#resume .content-group .card .card-footer {
  font-size:15px!important
 }
 #resume .content-group .personal-skills-container .label,#resume .content-group .coding-skills-container .label {
  font-size:15px!important
 }
}
@media(min-width:972px) and (max-width:1023px) {
 #blog .main-container .col {
  padding-left:8px;
  padding-right:8px
 }
}
@media(min-width:481px) and (max-width:640px) {
 .mfp-wrap.popup-box-inline .popup-box .content-area .title {
  font-size:18px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .category {
  font-size:15px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .content * {
  font-size:15px
 }
 .pages .sub-pages .section .main-container {
  padding:10px 15px 15px
 }
 .pages .sub-pages .section .main-container .main-title {
  font-size:64px!important;
  line-height:64px
 }
 .pages .sub-pages .section .main-container .main-desc {
  margin-top:-20px
 }
 .pages .sub-pages .section .main-container .content-group {
  margin-top:30px!important
 }
 #contacts .main-container .main-title {
  font-size:54px
 }
 #contacts .main-container .main-desc {
  margin-top:-28px
 }
 #contacts .main-container .content-group .get-in-touch-container ul li span {
  font-size:15px
 }
 #contacts .map {
  margin-top:15px!important
 }
 #blog .main-container .card {
  margin-top:15px
 }
 #blog .main-container .card .card-body .image-area .date {
  font-size:15px;
  width:55px;
  height:55px
 }
 #blog .main-container .card .card-footer {
  padding:10px 12px
 }
 #blog .main-container .card .card-footer .name {
  font-size:18px;
  white-space:nowrap;
  -ms-text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden
 }
 #blog .main-container .card .card-footer .category {
  font-size:15px;
  white-space:nowrap;
  -ms-text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden
 }
 #blog .main-container .clearfix {
  padding:0 5px
 }
 #blog .main-container .clearfix .col {
  padding-right:8px;
  padding-left:8px
 }
 #portfolio .main-container {
  padding-bottom:0
 }
 #portfolio .main-container .main-title {
  font-size:54px
 }
 #portfolio .main-container .main-desc {
  margin-top:-28px
 }
 #portfolio .main-container .col {
  padding-right:8px;
  padding-left:8px
 }
 #portfolio .main-container .grid-items {
  margin-left:-8px;
  margin-right:-8px
 }
 #portfolio .main-container .grid-items .card {
  margin-bottom:15px
 }
 #portfolio .main-container .grid-items .card .card-footer .name {
  font-size:18px
 }
 #portfolio .main-container .grid-items .card .card-footer .category {
  font-size:15px
 }
 #about .main-container .button-groups {
  margin-top:15px
 }
 #about .main-container .button-groups ul li {
  margin:0
 }
 #about .main-container .button-groups ul li:first-child {
  display:block;
  margin-bottom:15px
 }
 #about .main-container .content-group .fun-facts-container .card {
  margin-top:15px
 }
 #about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
  font-size:52px
 }
 #about .main-container .content-group .fun-facts-container .card .card-body .text {
  font-size:15px
 }
 #about .main-container .content-group .clients-container {
  margin-top:0
 }
 #about .main-container .content-group .clients-container .col a {
  margin-top:0;
  display:inline-block
 }
 #about .main-container .content-group .testimonials-container .card-header {
  padding:0
 }
 #about .main-container .content-group .testimonials-container .card-footer .title {
  font-size:15px!important
 }
 #about .main-container .content-group .service-container .card {
  margin-top:15px
 }
 #about .main-container .content-group .service-container .card .card-body .name {
  font-size:18px
 }
 #about .main-container .content-group .service-container .card .card-body .description {
  font-size:15px
 }
 #about .main-container .content-group .service-container .card .card-body .icon-area .la {
  font-size:52px
 }
 #about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
  font-size:52px
 }
 #resume .content-group .card {
  margin-top:15px!important
 }
 #resume .content-group .card .card-header {
  font-size:18px!important
 }
 #resume .content-group .card .card-body,#resume .content-group .card .card-footer {
  font-size:15px!important
 }
 #resume .content-group .personal-skills-container .label,#resume .content-group .coding-skills-container .label {
  font-size:15px!important
 }
}
@media(max-width:480px) {
 .mfp-wrap.popup-box-inline .popup-box .content-area .title {
  font-size:18px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .category {
  font-size:15px
 }
 .mfp-wrap.popup-box-inline .popup-box .content-area .content * {
  font-size:15px
 }
 .pages .sub-pages .section .main-container {
  padding:10px 15px 15px
 }
 .pages .sub-pages .section .main-container .main-title {
  font-size:64px;
  line-height:64px
 }
 .pages .sub-pages .section .main-container .main-desc {
  margin-top:-20px
 }
 .pages .sub-pages .section .main-container .content-group {
  margin-top:30px!important
 }
 #contacts .main-container .main-title {
  font-size:54px
 }
 #contacts .main-container .main-desc {
  margin-top:-28px
 }
 #contacts .main-container .content-group .get-in-touch-container ul li span {
  font-size:15px
 }
 #contacts .map {
  margin-top:15px!important
 }
 #blog .main-container .card {
  margin-top:15px
 }
 #blog .main-container .card .card-body .image-area .date {
  font-size:15px;
  width:55px;
  height:55px
 }
 #blog .main-container .card .card-footer .name {
  font-size:18px
 }
 #blog .main-container .card .card-footer .category {
  font-size:15px
 }
 #blog .main-container .clearfix {
  padding:0 5px
 }
 #blog .main-container .clearfix .col {
  padding-right:8px;
  padding-left:8px
 }
 #portfolio .main-container {
  padding-bottom:0
 }
 #portfolio .main-container .main-title {
  font-size:54px
 }
 #portfolio .main-container .main-desc {
  margin-top:-28px
 }
 #portfolio .main-container .filter {
  margin-bottom:-10px
 }
 #portfolio .main-container .grid-items .card {
  margin-top:0
 }
 #portfolio .main-container .grid-items .card .card-footer .name {
  font-size:18px
 }
 #portfolio .main-container .grid-items .card .card-footer .category {
  font-size:15px
 }
 #about .main-container .button-groups {
  margin-top:15px
 }
 #about .main-container .button-groups ul li {
  margin:0
 }
 #about .main-container .button-groups ul li:first-child {
  display:block;
  margin-bottom:15px
 }
 #about .main-container .content-group .fun-facts-container .card {
  margin-top:15px
 }
 #about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
  font-size:52px
 }
 #about .main-container .content-group .fun-facts-container .card .card-body .text {
  font-size:15px
 }
 #about .main-container .content-group .clients-container {
  margin-top:0
 }
 #about .main-container .content-group .clients-container .col a {
  margin-top:0;
  display:inline-block
 }
 #about .main-container .content-group .testimonials-container .card-header {
  padding:0
 }
 #about .main-container .content-group .testimonials-container .card-footer .title {
  font-size:15px!important
 }
 #about .main-container .content-group .service-container .card {
  margin-top:15px
 }
 #about .main-container .content-group .service-container .card .card-body .name {
  font-size:18px
 }
 #about .main-container .content-group .service-container .card .card-body .description {
  font-size:15px
 }
 #about .main-container .content-group .service-container .card .card-body .icon-area .la {
  font-size:52px
 }
 #about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
  font-size:52px
 }
 #resume .content-group .card {
  margin-top:15px!important
 }
 #resume .content-group .card .card-header {
  font-size:18px!important
 }
 #resume .content-group .card .card-body,#resume .content-group .card .card-footer {
  font-size:15px!important
 }
 #resume .content-group .personal-skills-container .label,#resume .content-group .coding-skills-container .label {
  font-size:15px!important
 }
}