/* ================================================= 01 - Global Style ====================================================*/ html,body { height: 100%; margin: 0; } body { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 15px; line-height: 26px; letter-spacing: 1px; color:#252525; background:#fff; position:relative; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto', sans-serif; text-transform: capitalize; margin:0 0 10px; font-weight:700; } p { margin:0; color:#555; } a { text-decoration: none; transition: all 0.4s ease; } img{ max-width: 100%; display:block; } a:hover, a:focus { color: #fff; outline: none; text-decoration: none; background:none; } ul, ul li { margin: 0; padding: 0; list-style:none; } .nav li a:focus{ background:none; outline:none; } .section { padding:70px 0; } .section-title { margin-bottom: 20px; text-align: center; } .section-title span{ font-weight:700; } .section-title h2 { font-size: 30px; text-transform: uppercase; margin: 0 0 15px; position:relative; color:#252525; font-weight:500; } .section-title p { font-weight: 400; } .button{ display: inline-block; background: #252525; color: #fff; padding: 12px 25px; text-transform: uppercase; font-size: 14px; border-radius: 5px; font-weight:500; -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); position:relative; } .button:hover{ -webkit-box-shadow: 1px 1px 6px RGBA(105, 91, 91, 0.61); -moz-box-shadow: 1px 1px 6px RGBA(105, 91, 91, 0.61); box-shadow: 1px 1px 6px RGBA(105, 91, 91, 0.61); color:#fff; } .button:hover i{ -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .button:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(246, 238, 238, 0.25); content: ""; border-radius: 5px; opacity:0; visibility:hidden; transition:all 0.4s ease; } .button:hover:after { opacity:0.4; visibility:visible; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } #breadcrumbs { text-align: center; padding: 55px 0; background: url('../images/breadcrumb-bg.jpg'); position:relative; background-repeat:no-repeat; background-attachment:fixed; } #breadcrumbs:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.8; } #breadcrumbs h2{ color:#fff; text-transform:uppercase; } #breadcrumbs ul{} #breadcrumbs ul li{ display:inline-block; } #breadcrumbs ul li a{ color:#eee; font-size:18px; text-transform:capitalize; } #breadcrumbs li + li::before { color: #b9b9b9; content: "/ "; padding: 0px; } .slicknav_nav .slicknav_item a:hover, .slicknav_nav .slicknav_item a{ background:none; } .typed-cursor { opacity: 1; -webkit-animation: blink 1s infinite; -moz-animation: blink 1s infinite; animation: blink 1s infinite; font-size: 35px; } .margin-30{ margin-top:30px; } .table { display: table; width: 100%; height: 100%; } .table-cell { display: table-cell; vertical-align: middle; } @keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } #header.personal .header-inner,#header.personal .header-inner,#header.personal.sticky,.button,#header .nav li .sub-menu,#header .search-form,#j-slider .owl-dots .owl-dot span,#testimonial .owl-dots .owl-dot span,#statics .static-single span,#service .single-service,#service .single-service .number p,#about-us .single-video:before,#about-us .single-video::after,#about-us .single-video i,#team .team-head::before,#team .team-social,#project .project-head::before,#blog .blog-head:before,#blog .blog-head span,#clients .owl-nav div,#header .social a i,#contact .form-group input,#contact .form-group textarea,#pricing .single-table .table-title,img,#blog .owl-dot span,#header.sticky .header-inner,#blog .blog-head img{ -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } #about-us .about-video,#about-us .about-main,#my-skill .single-skill,#service .single-service,#team .single-team,#testimonial .single-testimonial,#pricing .single-table,#blog .single-blog,#contact .form,.map{ margin-top:30px; } .no-margin{ margin:0; } #scrollUp { bottom: 20px; right: 20px; background: #252525; color: #fff; font-size: 30px; opacity: 0.5; padding: 4px 10px; } #scrollUp:hover { opacity:1; } .page .map, .page #particles-js{ display:none; } .loader{ position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(37, 37, 37, 0.9); z-index:4444; } .loader-inner{ position:absolute; left:50%; top:50%; margin-left:-40px; } .k-line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; } .k-line11-1 { animation: k-loadingP 2s infinite; } .k-line11-2 { animation: k-loadingP 2s infinite; animation-delay: .15s; } .k-line11-3 { animation: k-loadingP 2s infinite; animation-delay: .30s; } .k-line11-4 { animation: k-loadingP 2s infinite; animation-delay: .45s; } .k-line11-5 { animation: k-loadingP 2s infinite; animation-delay: .60s; } @keyframes k-loadingP { 0% { transform:translateY(0) } 35% { transform:translateY(0); opacity:.3 } 50% { transform:translateY(-20px); opacity:.8 } 70% { transform:translateY(3px); opacity:.8 } 85% { transform:translateY(-3px) } } /*MP Color*/ .mp-color { position: fixed; display: block; z-index: 99; text-align: center; padding: 50px 5px; width: 200px; min-height: 300px; top: 50%; right: 0px; background: #fff; box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.14); margin-top: -150px; border-bottom: 6px solid #ddd; } .mp-color .icon { width: 25px; height: 25px; background: #968A8C; margin-top:-13.5px; border-radius: 0px; top: 50%; line-height: 25px; cursor: pinter; font-size: 16px; position: absolute; bottom: -24px; left: -50px; width: 50px; height: 50px; line-height: 50px; font-size: 32px; border-radius: 6px 0 0 6px; background: #fff; color: #444; } .mp-color .icon i { color: #444; cursor: pointer; } .mp-color h4 { display: block; text-transform: uppercase; font-size: 15px; margin-bottom: 10px; } .mp-color .link{ margin-bottom:20px; } .mp-color .link li i{ margin-right:5px; } .mp-color .link li a{ color:#444; } .mp-color .button { margin: 20px 0 0; } .mp-color .button:hover{ cursor:pointer; } .mp-color .button i{ color:#fff; margin-right:5px; } .mp-color .btn { padding: 12px 25px; } .mp-color span { margin: 0 5px; width: 30px; height: 25px; border-radius: 0; cursor: pointer; display: inline-block; margin-top: 10px; } .mp-color span.color1{background-color:#F2784B} .mp-color span.color2{background-color:#D2527F} .mp-color span.color3{background-color:#BF55EC;} .mp-color span.color4{background-color:#C0392B;} .mp-color span.color5{background-color:#16A085;} .mp-color span.color6{background-color:#3065B5;} .mp-color span.color7{background-color:#59ABE3;} .mp-color span.color8{background-color:#82B440;}