/* Theme Name: Photoflash Pro Theme URI: https://alexathemes.net/themes/photography-wordpress-theme/ Author: AlexaThemes Author URI: https://www.alexathemes.net/ Description: Photoflash is a modern and responsive photography WordPress theme that can be useful for photography, photobloggers, the portfolio makers, Wedding, and all other photography event websites. We create and present a beautiful and elegant photography WordPress theme for the photographer, photobloggers, videographers, and more. This theme comes with a nice and clean layout for photography or portfolio websites. This theme has an extremely well-coded theme options panel where you can easily change its' colors, fonts, layouts and more. By using this theme you can nicely represent your best shots in the homepage sections. By using the photo gallery of this theme you can nicely display your photo album category wise. This theme is completely responsive and well perform with all the screen resolutions. This theme is tested and very well compatible with the latest version of WordPress and many popular plugins. In this theme you can even create a shop page where you can easily sell the accessories related to your photography business. Version: pro 1.0 License: GNU General Public License version 3 License URI: license.txt Text Domain: photoflash Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-header,custom-menu,editor-style,featured-images,full-width-template, sticky-post,threaded-comments,translation-ready,theme-options Photoflash Pro WordPress Theme has been created by AlexaThemes(alexathemes.net), 2020. Photoflash Pro WordPress Theme is released under the terms of GNU GPL */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:focus{outline:none;} body{box-sizing:border-box; -ms-word-wrap:break-word; word-wrap:break-word; line-height:28px; letter-spacing:1px; margin:0; padding:0; color:#4d5257; font-size:15px; font-family:'Roboto Slab'; background-color:#ffffff; font-weight:400; } img{ margin:0; padding:0; border:none;} .bypostauthor{ margin:0; padding:0;} section img, img{ width:100%; height:auto; display:block; } h1,h2,h3,h4,h5,h6{ margin:0 0 20px; padding:0; line-height:normal; font-weight:700; color:#25282e;} h1{ font-size:40px; font-family:'Rajdhani';} h2{ font-size:35px; font-family:'Rajdhani';} h3{ font-size:25px; font-family:'Rajdhani';} h4{ font-size:22px; font-family:'Rajdhani';} h5{ font-size:20px; font-family:'Rajdhani';} h6{ font-size:17px; font-family:'Rajdhani';} .left{float:left;} .right{float:right;} blockquote{ position:relative; margin-bottom:15px; } blockquote.align-left{ padding:10px 20px; text-align:left; border-left:5px solid #d32f2f; margin-bottom:20px; color:#25282e; font:500 15px/28px 'Roboto Slab'; font-style:italic; background-color:#f5f5f5;} blockquote.align-right{ padding:10px 20px; text-align:right; border-right:5px solid #d32f2f; margin-bottom:20px; color:#25282e; font:500 15px/28px 'Roboto Slab'; font-style:italic; background-color:#f5f5f5;} hr, .hr{border-bottom:1px solid #cfd0d2 !important; clear:both; margin:30px 0; border:none; } p{ margin:0; padding:0;} a{ text-decoration:none; -webkit-transition:0.3s; -ms-transition:0.3s; transition:0.3s; } a:hover{ text-decoration:none; } a:focus{ outline:none; } ul{ list-style:none; margin:0; padding:0;} iframe{ width:100%; display:block; margin:0;} article ul, article ol{ margin:0 0 15px 15px;} article ul li{ list-style: disc;} .custom-height{ min-height:20px;} .clear{ clear:both;} .middle-align{ margin:0 auto; padding:0;} .wp-caption{ margin:0; padding:0; font-size:13px; max-width:100%;} .wp-caption-text{ margin:0; padding:0;} .sticky{ margin:0; padding:0;} .gallery-caption{ margin:0; padding:0;} .alignleft, img.alignleft { float: left; margin-right:25px; margin-top:4px; margin-bottom:6px; padding:0; height:auto; width:100%; } .alignright, img.alignright { float: right; margin-left:15px; height:auto; width:100%; margin-bottom:15px; } .aligncenter, img.aligncenter { clear:both; display:block; margin-left:auto; margin-right:auto; margin-top:0; height:auto; width:100%; margin-bottom:20px;} .comments-area{ margin-bottom:15px; margin-top:30px;} .comment-list .comment-content ul { list-style:none; margin-left:15px;} .comment-list .comment-content ul li{margin:5px;} .main-container ol{list-style-position:outside; margin-left:20px;} .main-container ol li{margin:5px 0;} .lastcols{ margin-right:0 !important;} #lastcols{ margin-right:0 !important; } .toggleMenu{display:none;} section{ padding:70px 0; position:relative; } .entry-content section { padding:50px 0;} .entry-content section.sec-overlay { padding-bottom:50px;} .boxlayout .header .container{ width:97%; margin:0 auto;} .container { width:1170px; margin:0 auto; position:relative;} .full-container{ width:100%; position:relative;} .no-padding{ padding:0 !important; } .full-container .one_half{ margin-bottom:0 !important;} /*=============================================== ** Responsive Header Css *===============================================*/ .header-responsive{ display:none; } /*=============================================== ** Sticky Header Css *===============================================*/ .sticky-header{ background-color:rgba(0,0,0,0.7); width:100%; padding:0 30px; position:fixed; top:-300px; -webkit-transition:all .3s; transition:all .3s; z-index:30000; border-bottom: 5px solid #d32f2f;} .sticky-header.show{ top:0; transition-delay:.3s; } .sticky-header .sticky-left{ float:left; width:10%; padding:17px 0;} .sticky-header .sticky-left .logo { width:100%;} .sticky-header .sticky-right{ float:right; } .sticky-header .sticky-right .sitenav { width:100%;} .sticky-header .sticky-right .sitenav ul{ border:none; } .sticky-header .sticky-right .sitenav ul li a{ border:none; padding:33px 20px; } .sticky-header .sticky-right .sitenav ul li ul li a { padding:10px;} .sticky-header .sticky-right .sitenav ul li a.parent:before{ top:50%; } .sticky-header .sticky-right .sitenav ul li a.parent:after { top: 43%;} .sticky-header .sticky-right .sitenav ul li:hover > ul{ top:100%; } .sticky-header .sticky-right .sitenav ul li:hover ul li:hover > ul { top:-8px;} .boxlayout .sticky-header { left:0; right:0; width:100%; position:fixed; margin:0 auto;} /*=============================================== ** Header Top Css *===============================================*/ .header-top { position:relative; background-color:#d32f2f; padding:8px 0;} .head-top-inner { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; justify-content:space-between; padding: 0 30px;} .head-top-left { margin-right:auto;} .header-social span { color: #ffffff;} .header-social .social-icons a { color:#25282e; border-color:#25282e;} .header-social .social-icons a:hover { color:#ffffff; border-color:#ffffff;} .head-top-right { text-align:right; color:#ffffff; margin-left:auto;} .head-top-right span { display:inline-block; padding:0 12px 0 12px;} .head-top-right i { margin-right:8px; color:#25282e;} .head-top-right a { color: #ffffff;} .head-top-right a:hover { color:#25282e;} /*=============================================== ** Header Css *===============================================*/ .header-main{ position:relative; width:100%;} .header{ position: absolute; width:100%; background-color:rgba(0, 0, 0, 0.7); top: 45px; z-index: 9;} .header .header-inner { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction:row; flex-wrap: nowrap; align-items:center; justify-content:space-between; padding:0; margin:0 auto; width:1170px;} /*=============================================== ** Site Logo Css *===============================================*/ .logo{ width:15%; position:relative; -webkit-transition:0.3s; -ms-transition:0.3s; transition:0.3s; text-transform:capitalize;} .logo img{ width:auto; height:auto; display:block;} .logo h1{ margin:0; font:400 22px/1 'Rajdhani'; color:#ffffff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .logo a{ display:block; } .logo p{ color:#ffffff; display:block; font:400 15px/18px 'Roboto Slab'; margin:5px 0 0; } /*=============================================== ** Navigation Css *===============================================*/ .toggle{ display: none; position: relative; margin:0; text-transform:uppercase; font-weight:700; } .toggle a{ width:auto; padding:28px 25px; text-align:left; border-left:1px solid #ffffff; color:#ffffff; } .toggle a:before{ content:'\f0c9'; font-family:'Font Awesome 5 Pro'; font-weight:400; position:absolute; top: 15px; font-size: 28px; left: 14px; } .sitenav{ position:relative; width:80%; text-align:right; margin-left:auto;} .sitenav ul {margin:0; padding:0; font:700 13px 'Roboto Slab'; text-transform:uppercase; display:inline-block;} .sitenav ul li{ display:inline-block; position:relative; line-height:normal; } .sitenav ul li a{ padding:40px 20px; display:block; text-align:center; color:#ffffff; position:relative; } .sitenav ul li a span{ display:block;} .sitenav ul li a::before { position:absolute; content:''; left:100%; top:calc(50% - 1px); width:0; height:1px; background-color:#d32f2f; transition:all 0.3s ease;} .sitenav ul li:hover a::before { left:0; width:15px;} /* = Navigation hover and active menu css -------------------------------------------------------------- */ .sitenav ul li.current_page_item a, .sitenav ul li a:hover{ color:#d32f2f;} .sitenav ul li a.parent:after{ content:'\f107'; position:absolute; right:5px; top:44%; font-family:'Font Awesome 5 Pro'; font-weight:400; font-size:14px; } /* = Navigation 2nd level css -------------------------------------------------------------- */ .sitenav ul li ul{display:none; z-index:9999; position:absolute; left:-9999px; border:none; } .sitenav ul li:hover > ul{display:block; width:215px; position:absolute; left:auto; top:100%; text-align:left; -ms-animation: fadeInUp .3s ease-in-out; -webkit-animation: fadeInUp .3s ease-in-out; animation:fadeInUp .3s ease-in-out;} .sitenav ul li ul li{display:block; position:relative; float:none; top:1px; line-height:18px; margin-left:0; margin-right:0; padding:3px 0px; } .sitenav ul li ul li a{display:block; padding:10px 18px; position:relative; top:0; text-align:left; border-radius:5px; } .sitenav ul li ul li a.parent:after{ content:'\f105'; position:absolute; right:10px; top:10px; font-family:'Font Awesome 5 Pro'; font-weight:400; font-size:14px;} .sitenav ul li:hover ul li a::before { content: none;} /* = Navigation 3rd level css -------------------------------------------------------------- */ .sitenav ul li:hover ul li:hover > ul{display:block; position:absolute; left:215px; top:-1px; -ms-animation: fadeInRight .3s ease-in-out; -webkit-animation: fadeInRight .3s ease-in-out; animation:fadeInRight .3s ease-in-out; } /*=============================================== ** Search Bar Header *===============================================*/ .search-form-toggle{ font-size:14px; color:#ffffff; cursor:pointer; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; position: relative; display:inline-block; right:0px; top:0px; width: 30px; height: 30px; border:2px solid #ffffff; border-radius:50%; text-align:center; line-height:27px;} .search-form-toggle i { margin-right:0; color:#ffffff;} .search-form-toggle:hover { border-radius: 0;} .head-search{ opacity:0; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.9); -webkit-transition: all 0.25s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transform: translate(0px, -100%) scale(0, 0); -ms-transform: translate(0px, -100%) scale(0, 0); transform: translate(0px, -100%) scale(0, 0); } .head-search.slow{ opacity:1; z-index:99; -webkit-transform: translate(0px, 0px) scale(1, 1); -ms-transform: translate(0px, 0px) scale(1, 1); transform: translate(0px, 0px) scale(1, 1); } .search-contain{ width:600px; left:0; right:0; position:absolute; top:42%; margin:0 auto; } .search-close { text-align:center; color:#ffffff; background-color:#d32f2f; width:30px; height:30px; border-radius:30px; float:right; line-height:30px; cursor:pointer; } .search-contain .search-form{ border-bottom:3px solid #d32f2f; margin:30px 0 0; } .search-contain .search-form .search-field{ background-color:transparent; border:none; margin-bottom:0; color:#d32f2f; font-size:24px; font-weight:bold; } .search-contain .search-form .search-submit{ background-color:transparent; font-size:0; background-image:url(images/search-icon.png); background-repeat:no-repeat; background-position:center center; padding:21px 15px; } /*=============================================== ** Slider Css *===============================================*/ .boxlayout .nivo-caption { bottom:18%;} #slider{ width:100%; margin:0; padding:0; position:relative; } #slider::before{ background-color:rgba(0,0,0,0.6); content:''; position:absolute; left:0; right:0; z-index:6; width:100%; height:100%; } .slider-main{ min-height:740px;position:relative; background-image:url(images/loading.gif); background-repeat:no-repeat; background-position:center center; } .boxlayout .slider-main{ min-height:auto; } #slider a.button{ margin-right:20px; } .boxlayout .slider-main .nivo-controlNav{ bottom:16%; } /*=============================================== ** Social Icons Css *===============================================*/ #sidebar .social-icons{ text-align:center; } .social-icons { position: relative; display: inline-block;} .social-icons a{ width:30px; height:30px; line-height:26px; display:inline-block; padding:0; -webkit-transition:0.3s; -ms-transition:0.3s; transition:0.3s; font-size:12px; color:#25282e; position:relative; margin:0 3px; text-align:center; border-radius:50%; border:2px solid #25282e;} .social-icons a:hover { border-color:#d32f2f; color:#d32f2f; border-radius:0;} .social-icons br{ display:none;} /*=============================================== ** Buttons Css *===============================================*/ a.button{ font:700 15px 'Roboto Slab'; text-transform:uppercase; padding:18px 45px; margin-bottom:4px; line-height:1; display:inline-block; text-align:center; color:#ffffff; background-color:#d32f2f; position:relative; -webkit-transition:all 0.3s linear 0s; transition:all 0.3s linear 0s; border-radius:40px; } a.button:hover{ background-color:#25282e; color:#ffffff; } a.buttonstyle1{ font:700 18px 'Rajdhani'; color:#ffffff; background-color:#25282e; padding:10px 20px; display:inline-block; margin-top:20px; -webkit-transition:0.5s; -ms-transition:0.5s; transition:0.5s;} a.buttonstyle1:hover{ background-color:#d32f2f; color:#ffffff;} .sliderbtn { background-color:#d32f2f; border:none; background-size:50%; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; font:600 16px 'Roboto Slab'; letter-spacing:0.5px; padding:10px 30px 10px; line-height:normal; display:inline-block; margin-top:10px; cursor:pointer; outline:none; position:relative; text-transform:inherit; z-index:1;} .sliderbtn.filled { color:#ffffff; border:2px solid #d32f2f;} .sliderbtn::before { position:absolute; content:''; display:block; width:15px; height:15px; border-width:2px; border-top-width:2px; border-right-width:2px; border-style:solid; border-top-style:solid; border-right-style:solid; left:-10px; bottom:-10px; border-top:none; border-right:none; border-color:#d32f2f; -webkit-transition:all .3s linear; transition:all .3s linear;} .sliderbtn::after { border-color:#d32f2f; position:absolute; content:''; display:block; width:15px; height:15px; border-width:2px; border-bottom-width:2px; border-left-width:2px; border-style:solid; border-bottom-style:solid; border-left-style:solid; right:-10px; top:-10px; border-bottom:none; border-left:none; -webkit-transition:all .3s linear; transition:all .3s linear;} .sliderbtn.filled:hover { color:#d32f2f; background:transparent;} .sliderbtn:hover::before { width:100%; height:0; left:0;} .sliderbtn:hover::after { width:100%; height:0; right:0;} a.ReadMore { font:500 14px 'Roboto Slab'; color:#25282e; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s; padding:5px 20px 5px; display:inline-block; margin-top:10px; cursor:pointer; outline:none; position:relative; text-transform:inherit; z-index:1;} a.ReadMore::before { position:absolute; content:''; display:block; width:15px; height:15px; border-width:2px; border-top-width:2px; border-right-width:2px; border-style:solid; border-top-style:solid; border-right-style:solid; left:-5px; bottom:-5px; border-top:none; border-right:none; border-color:#d32f2f; -webkit-transition:all .3s linear; transition:all .3s linear;} a.ReadMore::after { border-color:#d32f2f; position:absolute; content:''; display:block; width:15px; height:15px; border-width:2px; border-bottom-width:2px; border-left-width:2px; border-style:solid; border-bottom-style:solid; border-left-style:solid; right:-5px; top:-5px; border-bottom:none; border-left:none; -webkit-transition:all .3s linear; transition:all .3s linear;} a.ReadMore:hover::before { width:100%; height:0; left:0;} a.ReadMore:hover::after { width:100%; height:0; right:0;} a.ReadMore:hover { color:#d32f2f;} .custombtn{ margin-top:60px;} /*=============================================== ** Section Title Css *===============================================*/ .section_head{ text-align:left; margin-bottom:50px; width:50%; float: left; min-height:85px;} .section_head_text { text-align: right; margin-bottom:50px; width:50%; float:right; min-height:85px;} h2.section_title { font:700 32px/35px 'Roboto Slab'; color:#25282e; position:relative; text-transform:uppercase; padding-top:10px; letter-spacing:1px; display:inline-block; text-align:left; border-top:1px solid #d32f2f; margin-bottom: 0;} h4.section_title_small{ font:700 20px 'Courgette'; color:#d32f2f; display:block; position:relative; text-transform:capitalize; padding-bottom:5px; margin-bottom: 0;} .section_head_text p { line-height:24px;} .full-container .section_head p{ width:42%; } /*=============================================== ** Section Overlay Css *===============================================*/ .sec-overlay{ position:relative;} .sec-overlay::before{ content:''; width:100%; height:100%; background-color:rgba(0,0,0,0.6); position:absolute; top:0; left:0;} .sec-overlay h1, .sec-overlay h2, .sec-overlay h3, .sec-overlay h4, .sec-overlay h5, .sec-overlay h6 { color:#d32f2f;} .sec-overlay h2.section_title, .sec-overlay .section_head_text p, .services h2.section_title, .services .section_head_text p, .testimonials h2.section_title, .testimonials .section_head_text p { color: #ffffff;} /*=============================================== ** Section Shortcode Css *===============================================*/ .section-content{ background-repeat:no-repeat; background-position:center center; background-size:cover; background-attachment:fixed;} .section-content.sec-inn-test h2.section_title { color: #ffffff;} /*=============================================== ** Grid Columns Css *===============================================*/ .grid-col-two, .grid-col-three, .grid-col-four{ float:left;} .grid-col-two{ width:48%; margin-right:4%; margin-bottom:30px;} .grid-col-three{ width:31.3%; margin-right:3%; margin-bottom:30px;} .grid-col-four{ width:22.7%; margin-right:3%; margin-bottom:30px;} /*================================================== SECTION FIRST PAGE BOXES CSS ==================================================== */ section#pagearea { width:100%; position:relative; background-color:#f5f5f5; padding: 0; z-index:15;} .pagearea-inner { position:relative; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-direction:row; flex-wrap: nowrap;} .fourbox{ padding:45px 20px 45px; color: #ffffff; margin:0; text-align:center; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; position: relative; flex:1; } .fourbox h3{ margin:0 0 10px; padding-bottom:10px; text-transform:capitalize; display:inline-block; position:relative; font: 700 22px 'Roboto Slab'; color: #ffffff;} .fourbox h3 a { color: #ffffff;} .pagemore{ border:2px solid #ffffff; color:#ffffff ; padding:8px 20px; display:inline-block; font:600 15px 'Roboto Slab'; text-transform:uppercase;} .fourbox .iconbx { font-size:3em; margin-bottom:25px;} .fourbox:hover .iconbx { -webkit-animation:spinner 1s infinite linear; animation:spinner 1s infinite linear;} .fourbox a.ReadMore { color: #ffffff; margin-top:30px;} .fourbox a.ReadMore::before { border-color:#ffffff;} .fourbox a.ReadMore::after { border-color:#ffffff;} a.ReadMore:hover::before { width:100%; height:0; left:0;} a.ReadMore:hover::after { width:100%; height:0; right:0;} .fourbox a.ReadMore:hover { color:#ffffff;} @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } /* all other browsers */ @keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); transform: rotateY(-360deg); } } .one_column{ width:100%;} .two_column{ width:50%;} .three_column{ width:33.3%;} .four_column { width:25%;} .five_column{ width:20%;} /*=============================================== ** Section One : About Photoflash Contest *===============================================*/ .one_half.last_column.about-desc h1 { padding-top:15px; border-top:1px solid #d32f2f; display: inline-block;} .one_half.last_column.about-desc span.highlights { color: #d32f2f;} .one_half.last_column.about-desc p { margin-bottom:40px;} .one_half.about-img img { width:75%; margin: 0 auto; display:block; height:auto;} .about-box { position:relative; margin-bottom:30px;} .about-box .about-icon { float:left; margin:0 20px 20px 0; display:block; transition:all 0.5s ease 0s; font-size:20px; color:#ffffff; width:50px; height:50px; background-color:#d32f2f; position:relative; text-align:center; line-height:50px; box-shadow:4px 4px 4px rgba(0, 0, 0, 0.4); border-radius:30px;} .about-content { width:86%; float: right;} .about-content h5 { margin-bottom: 10px;} .one_half.last_column .about-box .about-content p { margin-bottom: 0;} /*=============================================== ** Section Two : About Photo Features *===============================================*/ .features { position: relative;} .features-left { width:50%; min-height:500px; float:left; position: relative; padding:55px 50px;} .features-left h2 { color:#ffffff; font-size: 30px; font-weight:700; right:-155px; letter-spacing:0; position:absolute; text-transform:uppercase; top:45%; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg);} .feature_box { position: relative; margin-bottom:11%;} .feature_box#last { margin-bottom: 0;} .fea-icon { width:70px; height:70px; line-height:83px; float:left; margin-right:15px; border-radius:50%; background-color:#ffffff; display:block; text-align:center;} .fea-icon i { font-size:35px; color:#25282e; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .feature_box:hover .fea-icon i { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); color:#d32f2f;} .fea-content { width:78%; float:left; text-align:left;} .fea-content h5 { margin-bottom: 5px;} .fea-content h5 a { color:#25282e;} .feature_box:hover .fea-content h5 a { color:#d32f2f;} .features-right { width:50%; float:right; position: relative;} .features-right img { width:100%; height:auto; min-height:500px; display:block;} /*=============================================== ** Section Three : Photo Gallery *===============================================*/ .sec-gallery .grid-col-three { width:33.33%; margin:0;} .gallery-wrap { position:relative; } .gallery { text-align:center; } .gallery-image { position:relative; overflow:hidden; border:2px solid #d32f2f;} .gallery-image img { width:100%; height:auto; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); transform:translateY(0px); -webkit-transition:all 0.50s ease 0s; transition:all 0.50s ease 0s;} .gallery:hover .gallery-image img { -webkit-transform:translateY(-13%); -ms-transform:translateY(-13%); transform:translateY(-13%);} .gallery-image:after { content:''; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6); position:absolute; top:0; left:0; opacity:0; -webkit-transition:all 0.50s ease 0s; transition:all 0.50s ease 0s;} .gallery:hover .gallery-image:after { opacity:1;} .gallery-image .gallery-title { width:100%; position:absolute; bottom:0; left:0; background-color:#d32f2f; opacity:0; transform-origin:center bottom 0; -webkit-transform:perspective(400px) rotateX(90deg); -ms-transform:perspective(400px) rotateX(90deg); transform:perspective(400px) rotateX(90deg); -webkit-transition:all 0.50s ease 0s; transition:all 0.50s ease 0s; padding:27px 0; z-index: 1;} .gallery:hover .gallery-title { opacity:1; -webkit-transform:perspective(400px) rotateX(0deg); -ms-transform:perspective(400px) rotateX(0deg); transform:perspective(400px) rotateX(0deg);} .gallery-image .gallery-title h5 { color:#ffffff; margin-bottom:0px; text-transform:capitalize;} .gallery-image .gallery-icon { width:100%; position:absolute; bottom:20%; left:0; margin:0; padding:0; list-style:none; opacity:0; z-index:1; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .gallery:hover .gallery-icon { bottom:45%; opacity:1;} .gallery-image .gallery-icon a { display:inline-block; width:45px; height:45px; line-height:45px; font-size:18px; border:2px solid #ffffff; -webkit-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s;} .gallery-image .gallery-icon a:hover { color:#ffffff; border-color:#ffffff; border-radius:50%;} .gallery-image .gallery-icon i { color:#ffffff;} /*=============================================== ** Section Four : Why Choose Us Services *===============================================*/ .services_box { width:33.33%; padding:30px 15px; position:relative; float:left;} .services-inner { padding:30px 35px; -webkit-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s;} .services-inner:hover { -webkit-box-shadow:0 1px 20px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 1px 20px rgba(0, 0, 0, 0.7); -ms-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.7); -o-box-shadow:0 1px 20px rgba(0, 0, 0, 0.7); box-shadow:0 1px 20px rgba(0, 0, 0, 0.7);} .ser-icon { margin-bottom:25px; position:relative;} .services-inner .ser-icon span:first-child { opacity:1;} .services-inner:hover .ser-icon span:first-child { opacity:0;} .services-inner:hover .ser-icon span { background:-webkit-linear-gradient(90deg, #d32f2f 0%, #c60de1 100%); background:-moz-linear-gradient(90deg, #d32f2f 0%, #c60de1 100%); background:-ms-linear-gradient(90deg, #d32f2f 0%, #c60de1 100%); background:-o-linear-gradient(90deg, #d32f2f 0%, #c60de1 100%); background:linear-gradient(90deg, #d32f2f 0%, #c60de1 100%); background-clip:border-box; -webkit-background-clip:text; -moz-background-clip:text; -ms-background-clip:text; -o-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; -moz-text-fill-color:transparent; -ms-text-fill-color:transparent; -o-text-fill-color:transparent; text-fill-color:transparent; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(211, 47, 47), endColorstr=rgb(198,13,225)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgb(211, 47, 47), endColorstr=rgb(198,13,225))";} .services-inner:hover .ser-icon span:last-child { opacity:1;} .services-inner .ser-icon span { position:relative; font-size:52px; -webkit-transition:all 0.5s ease-in-out 0s; transition:all 0.5s ease-in-out 0s; color:#ffffff; line-height:1;} .services-inner .ser-icon span:last-child { opacity:0; position:absolute; left:0; top:0;} .ser-content h5 { font-size:22px; font-weight:400; display:block; position:relative; padding-bottom:13px; -webkit-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s;} .ser-content h5 a { color:#ffffff;} .ser-content h5::before { content:''; position:absolute; left:0; bottom:0; height:2px; width:30px; background-color:#ffffff; -webkit-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s;} .services-inner:hover .ser-content h5 a { color:#d32f2f;} .services-inner:hover .ser-content h5::before { width:100%; background-color:#d32f2f;} .ser-content p { margin-top:12px; margin-bottom:0; color:#ffffff;} /*=============================================== ** Section Five : Our Creative Staff *===============================================*/ .teammember-list { position:relative;} .team-thumbnail { position:relative; overflow:hidden;} .team-thumbnail::before { content:''; background:linear-gradient(to top, #d32f2f 0%, transparent 35%, transparent 65%, #d32f2f 100%); width:100%; height:100%; opacity:0; position:absolute; top:0; left:0; z-index:1; -webkit-transition:all 0.4s ease 0.3s; transition:all 0.4s ease 0.3s;} .team-thumbnail:hover:before { opacity:1;} .team-thumbnail img { width:100%; height:auto; -webkit-transition:all 0.4s linear; transition:all 0.4s linear;} .team-thumbnail:hover img{ opacity:0.8;} .member-social-icon i { width:32px; height:32px; line-height:32px; text-align:center; color:#ffffff; -webkit-transition:all 0.35s ease; transition:all 0.35s ease;} .member-social-icon i:hover { background-color:#d32f2f; color:#ffffff; border-radius:50%;} .team-content { -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); width:100%; position:absolute; top:50%; left:0; z-index:2;} .team-content::before { position:absolute; content:'';} .team-thumbnail .team-content { -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); width:100%; position:absolute; top:50%; left:0; z-index:2;} .team-thumbnail .inner-content { color:#ffffff; background-color:#d32f2f; text-align:left; width:90%; padding:10px 10px 10px 15px; border-radius:0 10px 0 0; box-shadow:0 0 20px rgba(0, 0, 0, 0.5); -webkit-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); -webkit-transition:all 0.4s ease-in-out 0.2s; transition:all 0.4s ease-in-out 0.2s;} .team-thumbnail:hover .inner-content { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);} .team-thumbnail h4 { letter-spacing:1px; text-transform:uppercase; margin:0; position:relative;} .team-thumbnail h4 a { font-style:italic;} .team-thumbnail cite { position:relative;} .team-thumbnail .member-social-icon { background-color:#ffffff; width:70%; padding:7px 10px; margin:0; list-style:none; border-radius:0 0 0 10px; -webkit-transform:translateX(150%); -ms-transform:translateX(150%); transform:translateX(150%); -webkit-transition:all 0.35s ease 0.2s; transition:all 0.35s ease 0.2s;} .team-thumbnail:hover .member-social-icon { -webkit-transform:translateX(50%); -ms-transform:translateX(50%); transform:translateX(50%);} .team-thumbnail .member-social-icon a { display:inline-block; margin:0 2px; -webkit-transform:translateX(350px); -ms-transform:translateX(350px); transform:translateX(350px); -webkit-transition:all 0.35s; transition:all 0.35s; color:#ffffff; background-color:#25282e; font-size:15px; text-align: center; line-height:32px; height:32px; width:32px; border-radius:50%;} .team-thumbnail:hover .member-social-icon a{ transform: translateX(0); } .team-thumbnail:hover .member-social-icon a:nth-child(1) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .team-thumbnail:hover .member-social-icon a:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .team-thumbnail:hover .member-social-icon a:nth-child(3) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .team-thumbnail:hover .member-social-icon a:nth-child(4) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .team-thumbnail:hover .member-social-icon a:nth-child(5) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } /*=============================================== ** Section Six : Counter *===============================================*/ .counter-box { width:23%; margin:50px 30px 0 0; float:left; position:relative; padding:5% 15px 15px; background-color:#ffffff; border-radius:10px; border-top:10px solid #d32f2f; text-align:center; -webkit-box-shadow:0px 6px 20px -6px rgba(0,0,0,0.75); -moz-box-shadow:0px 6px 20px -6px rgba(0,0,0,0.75); box-shadow:0px 6px 20px -6px rgba(0,0,0,0.75);} .counter-box#last { margin-right:0;} .count-number { width:125px; height:125px; line-height:125px; border:10px solid #ffffff; border-radius:50%; margin:0 auto 10px; background-color:#d32f2f; position:absolute; top:-68px; left:0; right:0; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out;} .count-number span.counter { font: 700 50px 'Roboto Slab'; color:#ffffff;} .counter-box:hover .count-number { -webkit-transform:translateY(-15px); -ms-transform:translateY(-15px); transform:translateY(-15px);} .counter-box h3 { margin:10px 0; } /*=============================================== ** Section Seven : Pricing Plan *===============================================*/ .price-plan h3 { color:#4c3880; text-align:center; margin-bottom:0;} .price-plan h2 { font:700 48px 'Roboto Slab'; color:#332f40; text-align:center;} .price-box { width:30%; float:left; margin:15px 40px 0 0; padding:0px 0px 30px; text-align:center; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; border-top-left-radius:10px; border-top-right-radius:10px;} .price-box:hover { -webkit-transform:translateY(-25px); -ms-transform:translateY(-25px); transform:translateY(-25px);} .price-box#last { margin-right:0;} .price-box h3 { color:#ffffff; text-transform:uppercase; font-weight:700; padding:15px; margin-bottom:0;} .price-box h2 { font:400 55px 'Roboto Slab'; background-color: #ffffff;} .price-box ul { margin:0 0 30px 0; padding:0;} .price-box ul li { list-style:none; color:#ffffff; padding:15px; position:relative;} .price-box ul li::after { content:''; position: absolute; left:0; right:0; bottom:0; width:50px; margin:0 auto; border-bottom:2px dotted #ffffff;} .price-box a.ReadMore { color:#ffffff;} .price-box a.ReadMore::before { border-color:#ffffff;} .price-box a.ReadMore::after { border-color:#ffffff;} .price-box a.ReadMore:hover { color:#ffffff;} /*=============================================== ** Section Eight : Client Testimonials *===============================================*/ #clienttestiminials{ width:100%; } .testimonials-item { padding:0; text-align: center;} .testi-thumb { width:200px; height:200px; border-radius:50%; margin:0 auto 30px; border: 10px double #ffffff;} .testi-thumb img{ width:100%; height:auto; display:block; border-radius:50%;} .testi-hd h4 { text-transform:uppercase; margin-bottom:5px; padding-bottom: 10px; position: relative;} .testi-hd h4::after { content:''; position: absolute; left:0; right:0; bottom:0; margin:0 auto; width:50px; border-bottom: 2px solid #d32f2f;} .testi-hd span { font:400 14px 'Roboto Slab'; color:#d32f2f;} .testi-desc { padding:12px 10% 0px; position:relative;} .testi-desc p { line-height:28px; font-style:italic; color:#ffffff; margin-bottom: 5px; } /*testimonials listing*/ .tmnllisting{ margin-bottom:35px; min-height:120px;} .tmnllisting .tmnlthumb{ float:left; width:120px; height:120px; margin:0 5% 0 0; overflow:hidden;} .tmnllisting .tmnlthumb img{ width:100%; height:100%; border-radius:50%;} .tmnllisting .tmnlcont{ overflow:hidden; } .tmnllisting h6{ margin-bottom:10px; padding-top:10px; text-transform:uppercase;} #testimonials-widget h6 { margin-bottom:5px; text-transform:capitalize;} #testimonials-widget p { margin-bottom:15px; } /* Testimonials Sidebar Rotator */ #testimonials .owl-nav { text-align:left; margin-top:15px;} #testimonials .owl-carousel .owl-nav button { width:30px; height:30px; line-height:27px;} #testimonials .owl-carousel .owl-nav button.owl-prev::before, #testimonials .owl-carousel .owl-nav button.owl-next::before {line-height:27px;font-size:15px;} /*=============================================== ** Section Nine : Our Blog/Latest Articles *===============================================*/ .news-box{ position:relative;} .news-thumb { position:relative; overflow:hidden;} .news-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 0.50s ease 0s; transition:all 0.50s ease 0s;} .news-thumb:after { content:''; width:100%; height:100%; background:rgba(255,255,255,0.3); position:absolute; top:0; left:0; opacity:0; -webkit-transition: all 0.50s ease 0s; transition: all 0.50s ease 0s;} .news-box:hover .news-thumb:after { opacity:1;} .news-thumb .post-date { position:absolute; top:15px; left:15px; bottom:15px; right:15px; border:1px solid #ffffff; overflow:hidden; z-index:1; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .news-box:hover .post-date { opacity:1; box-shadow:0 0 0 20px rgba(37,40,46, 0.9);} .news-thumb span { display:inline-block; font-size:14px; color:#ffffff; letter-spacing:2px; background:rgba(37,40,46,0.9); border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; margin:0; padding:7px 15px; -webkit-transform:translate(0%, -100%); -ms-transform:translate(0%, -100%); transform:translate(0%, -100%); -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .news-box:hover span { -webkit-transform:translate(0%,0%); -ms-transform:translate(0%,0%); transform:translate(0%,0%);} .news-content, .post-content { padding:20px 0; text-align:center;} .news-content h4 { margin-bottom: 10px;} .news-content p { margin-bottom: 20px;} .post-meta { margin-bottom:10px; text-align:center;} .post-meta i { color: #d32f2f; margin-right:3px;} span.post-comnt, span.post-auth, span.post-cate { font: 400 12px 'Roboto Slab'; padding:0 5px;} /** Blog Page Css *===============================================*/ .blog-post-repeat{ width:48%; float:left; margin:0 4% 7% 0; position:relative; } .blog-post-repeat-full { width:31.3%; float:left; margin-right:3%; margin-bottom:40px; position:relative;} .post-thumb{ position:relative; overflow:hidden;} .post-thumb img { width:100%; height:auto; display:block; -webkit-transition:all 0.50s ease 0s; transition:all 0.50s ease 0s;} .post-thumb:after { content:''; width:100%; height:100%; background:rgba(255,255,255,0.3); position:absolute; top:0; left:0; opacity:0; -webkit-transition: all 0.50s ease 0s; transition: all 0.50s ease 0s;} .blog-post-repeat:hover .post-thumb:after, .blog-post-repeat-full:hover .post-thumb:after { opacity:1;} .post-thumb .post-date { position:absolute; top:15px; left:15px; bottom:15px; right:15px; border:1px solid #ffffff; overflow:hidden; z-index:1; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .blog-post-repeat:hover .post-date, .blog-post-repeat-full:hover .post-date { opacity:1; box-shadow:0 0 0 20px rgba(37,40,46, 0.9);} .post-thumb span { display:inline-block; font-size:14px; color:#ffffff; letter-spacing:2px; background:rgba(37,40,46,0.9); border-bottom:1px solid #ffffff; border-right:1px solid #ffffff; margin:0; padding:7px 15px; -webkit-transform:translate(0%, -100%); -ms-transform:translate(0%, -100%); transform:translate(0%, -100%); -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;} .blog-post-repeat:hover span, .blog-post-repeat-full:hover span { -webkit-transform:translate(0%,0%); -ms-transform:translate(0%,0%); transform:translate(0%,0%);} /** Blog Page Single *==============================================*/ .blog-post-single .post-summary h4.post-title { text-align: center; padding-top: 20px;} .blog-post-single .post-meta { margin-bottom:20px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; margin-left: 0;} .blog-post-single .post-meta a { color: #ffffff;} .blog-post-single .post-meta i { color:#ffffff;} .blog-post-single .post-meta span.post-cate, .blog-post-single .post-meta span.post-auth { font-size: 14px; color:#ffffff; width:24%; margin-right: 10px; padding: 10px 5px 5px; background-color:#d32f2f;} .blog-post-single .post-meta span.post-comnt { margin-right:0; font-size: 14px; color:#ffffff; width:24%; padding: 10px 5px 5px; background-color:#d32f2f;} .blog-post-single .post-meta span.post-date { margin-right: 10px; font-size: 14px; color:#ffffff; width:24%; padding:5px 5px 5px; background-color:#d32f2f;} /*=============================================== ** Footer Css *===============================================*/ #footer-wrapper{ background-color:#25282e; color:#ffffff; position:relative; font:400 15px/24px 'Source Sans Pro';} .footer-inner { position: relative; padding: 60px 0 0; text-align: center; border-bottom:1px solid #ffffff;} .widget-column{ width: 24%; float: left; padding-left: 1%; margin-left: 1%; margin-bottom:30px; } #footer-wrapper .widget-column:first-child{ margin-left:0;} .foo-cols { padding: 0 2%;} .foo-cols span { display: block; padding-bottom: 5px;} .foo-cols img { width:auto; margin-bottom:40px;} .foo-cols h5{ text-transform:capitalize; color:#ffffff; font:700 35px 'Source Sans Pro'; position:relative; padding-bottom:10px; display:inline-block;} .foo-cols h5::after { content:''; display:block; width:50px; margin:10px auto 0; border:2px solid #d32f2f; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; opacity:0; -webkit-transform:translate3d(-50px, 0px, 0px); -ms-transform:translate3d(-50px, 0px, 0px); transform:translate3d(-50px, 0px, 0px);} .foo-cols:hover h5::after { opacity:1; -webkit-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px);} .foo-cols ul.menu li a, .foo-cols a{ color:#ffffff; } .foo-cols ul.menu li a:hover{ color:#d32f2f; } .footer-cols-three .widget-column{ width:32%; padding-left:2%; margin-left:0; } .footer-cols-two .widget-column{ width:48%; margin-left:4%; } .foo-cols .social-icons a { color:#d32f2f; border:2px solid #d32f2f; width:30px; height:30px; line-height:26px; display:inline-block; padding:0; -webkit-transition:0.3s; -ms-transition:0.3s; transition:0.3s; font-size:12px; position:relative; margin:0 3px; text-align:center; border-radius:50%;} .foo-cols .social-icons a:hover { border-color:#ffffff; color:#ffffff; border-radius:0;} .foo-cols #footerform_main { position:relative;} .foo-cols #footerform_main p { margin-bottom:0;} .foo-cols #footerform_main input[type="text"] { margin-bottom:0; background:none; border:1px solid #ffffff; color:#ffffff;} .foo-cols #footerform_main input[type="email"] { margin-bottom:0; background:none; border:1px solid #ffffff; color:#ffffff;} .foo-cols #footerform_main textarea { margin-bottom:0; background:none; border:1px solid #ffffff; color:#ffffff; height:130px;} .foo-cols #footerform_main input[type="submit"] { width:100%; font-size:18px;} .foo-cols #footerform_main input[type="submit"]:hover { background-color:#ffffff; color:#25282e;} .foo-cols #footerform_main input[type="text"], .foo-cols #footerform_main input[type="email"], .foo-cols #footerform_main textarea { -webkit-transition:all 0.5s ease-in; transition:all 0.5s ease-in;} .foo-cols #footerform_main input[type="text"]:focus, .foo-cols #footerform_main input[type="email"]:focus, .foo-cols #footerform_main textarea:focus { border-color:#d32f2f; color:#d32f2f; box-shadow:0px 0px 15px 2px #d32f2f; outline:none;} .foo-cols #footerform_main input[type="text"]:focus:hover, .foo-cols #footerform_main input[type="email"]:focus:hover, .foo-cols #footerform_main textarea:focus:hover { outline:none; box-shadow:0px 0px 15px 2px #d32f2f;} /*=============================================== ** Footer Widget Css *===============================================*/ .foo-getintouch{ margin-top:25px; } .widget-getintouch p{ line-height:28px; } .foo-getintouch p{ margin-bottom:10px; line-height:normal; } .foo-getintouch address{ font-style:normal; display:block; margin-bottom:10px; } .foo-getintouch a { color: #ffffff;} .widget-getintouch-social{ margin-top:30px; } /*.widget-getintouch-social li{ display:inline-block; margin:0 10px; }*/ .foo-getintouch span { color:#d32f2f;} ul.footer-social{ margin:0; padding:0; } ul.footer-social li, .widget-getintouch-social li{ display:inline-block; width:40px; height:40px; line-height:40px; margin-right:8px; text-align:center; } ul.footer-social li a, .widget-getintouch-social li a{ display:block; color:#d32f2f; border:2px solid #d32f2f; -webkit-transition:0.5s; -ms-transition:0.5s; transition:0.5s;} ul.footer-social li a:hover, .widget-getintouch-social li a:hover{ color:#ffffff; border-color:#ffffff; } .footer-nav li{ text-transform:capitalize; margin-bottom:8px; line-height:normal;} .footer-nav li a{ display:block; padding-bottom:8px; position:relative; } .footer-nav li:last-child{ border:none; margin:0; } .footer-nav ul{ display:none; } .latest-posts-widget { top:5px; position:relative;} .latest-posts-row{ margin-bottom:15px; padding-bottom:12px; clear: both; overflow: hidden; border-bottom:1px solid #ffffff; } #sidebar .latest-posts-row{ border-color:#e1e1e1; } .latest-posts-row:last-child{ border:none; margin:0; padding:0; } .latest-post-thumb { width:80px; float:left; margin-right:10px; } .latest-post-thumb img { margin-bottom:0;} .latest-post-content h4{ margin:0 0 5px; line-height: 1.3; font:500 14px 'Source Sans Pro'; text-transform:capitalize;} .latest-post-content{ overflow:hidden; } .latest-post-content p{ line-height:20px; font-size:13px; } /*=============================================== ** Footer Copyright Css *===============================================*/ .copyright-wrapper{ padding:30px 0; font-weight:400; text-align:center;} .copyright-wrapper a{ color:#d32f2f; } .copyright-wrapper a:hover{ color:#ffffff; } .copyright-inner{ display:inline-block; } /*=============================================== ** About Page Css *===============================================*/ .section-content .skill-info h2 { color:#ffffff;} .skill-info { padding:50px; color:#ffffff; background-color:#d32f2f; position:relative; margin-right:60px; border-radius:30px;} .skill-info::after { left:100%; top:50%; border:solid transparent; content:''; height:0; width:0; position:absolute; pointer-events:none; border-left-color:#d32f2f; border-width:50px; margin-top:-50px;} .skill-info-bar { padding-top:25px;} .skill-info-bar .skillbar-title span { color: #ffffff;} .skill-info-bar .skill-bg { margin-top: 5px; background-color: #ffffff;} .skill-info-bar .skillbar { margin-bottom: 30px;} /*=============================================== ** Skill Bar Css *===============================================*/ .skillbar {position:relative; display:block; margin-bottom:20px; width:100%; height:40px; border-radius:3px; -ms-border-radius:3px; -webkit-border-radius:3px; -webkit-transition:0.3s linear; -ms-transition:0.3s linear; transition:0.3s linear; -webkit-transition-property:width, background-color; -ms-transition-property:width, background-color; transition-property:width, background-color; font-weight:bold; } .skillbar-title { text-transform:uppercase;} .skillbar-title span { display:block; padding:0; height:35px; font-size:13px; line-height:35px; font-family:'Roboto Slab'; letter-spacing:1px; } .skillbar-bar { height:10px; width:0px; background-color:#d32f2f; } .skillbar .skill-bar-percent { position:absolute; right:0; top:0; height:35px; line-height:35px; font-family:'Roboto Slab'; background-color: #d32f2f; padding-left: 5px; padding-right:5px; color:#ffffff;} .skill { width:46.98%; float:left;} .skill-bar { margin:60px 0 0 0; } .skill-bg{ width:100%; background-color:#25282e;} /*=============================================== ** Our Album Css *===============================================*/ .album-wrapper{ position:relative; } .album-grid{ position:relative; margin-bottom:30px; } .album-box{ position:relative; padding:10px; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); background-color:#ffffff; margin-bottom:30px; } .album-box:before,.album-box:after{ content:""; border-radius:3px; width:100%; height:100%; position:absolute; border:10px solid #fff; left:0; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); -webkit-transition:0.3s all ease-out; transition:0.3s all ease-out; } .album-box:before{ top:4px; z-index:-10; -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); } .album-box:after{ top:8px; z-index:-20; -webkit-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg); } .album-content{ padding:20px 0 15px; } .album-content h4{ margin-bottom:0; text-align:center; font-weight:normal; }.album-box:hover::before, .album-box:hover::after{ -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } /* single Album */ .album-gallery-main{ margin-top:50px; } .album-gallery-grid{ position:relative; overflow:hidden; padding:10px 10px 10px; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); background-color:#ffffff; } .album-gallery-grid a{ position:relative; display:block; margin-bottom:0; padding-top:100%; } .album-gallery-grid.col-two{ width:48%; margin-right:4%; float:left; margin-bottom:4%; } .album-gallery-grid.col-two:nth-child(2n+2){ margin-right:0; } .album-gallery-grid.col-three{ width:32%; float:left; margin-right:2%; margin-bottom:2%; } .album-gallery-grid.col-three:nth-child(3n+3){ margin-right:0; } .album-gallery-grid.col-four{ width:23.5%; margin-right:2%; float:left; margin-bottom:2%; } .album-gallery-grid.col-four:nth-child(4n+4){ margin-right:0; } .album-gallery-grid .album-gal-pic{ -webkit-background-size:cover; background-size:cover; background-position:center; background-repeat:no-repeat; }.album-gallery-main .owl-carousel .owl-stage{ margin:10px 0 20px; } .album-gallery-caption{ position:absolute; top:50%; left:0; right:0; text-align:center; width:50px; height:50px; margin:0 auto; line-height:50px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background-color:#ffffff; opacity:0; transition:all 0.4s ease-in-out; border-radius:50%; } .album-gallery-grid:hover .album-gallery-caption{ opacity:1; } /*=============================================== ** Portfolio Our Awesome Works *===============================================*/ .our_work { position: relative;} .item-dirt { position: relative; overflow:hidden; text-align:center;} .item-dirt:before { content:""; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); position:absolute; top:0; left:0; opacity:0; -webkit-transition:all 0.35s ease 0s; transition:all 0.35s ease 0s;} .item-dirt:hover:before { opacity:1;} .item-dirt img { width:100%; height:auto;} .item-dirt .port-content { width:90%; height:90%; position:absolute; top:5%; left:5%;} .item-dirt .port-content::before, .item-dirt .port-content:after { content:''; position:absolute; top:0; left:0; bottom:0; right:0; opacity:0; -webkit-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s;} .item-dirt .port-content::before { border-bottom:1px solid #ffffff; border-top:1px solid #ffffff; -webkit-transform: ;scale(0, 1); -ms-transform:scale(0, 1); transform:scale(0, 1); -webkit-transform-origin:0 0 0; -ms-transform-origin:0 0 0; transform-origin:0 0 0;} .item-dirt .port-content::after { border-left:1px solid #ffffff; border-right:1px solid #ffffff; -webkit-transform:scale(1, 0); -ms-transform:scale(1, 0); transform:scale(1, 0); -webkit-transform-origin:100% 0 0; -ms-transform-origin:100% 0 0; transform-origin:100% 0 0;} .item-dirt:hover .port-content:before, .item-dirt:hover .port-content:after { opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition-delay:0.15s; transition-delay:0.15s;} .item-dirt h5 { color:#ffffff; margin:15px 0; opacity:0; -webkit-transform:translate3d(0px, -50px, 0px); -ms-transform:translate3d(0px, -50px, 0px); transform:translate3d(0px, -50px, 0px); -webkit-transition:transform 0.5s ease 0s; transition:transform 0.5s ease 0s;} .item-dirt:hover h5 { opacity:1; -webkit-transform:translate3d(0px, 0px, 0px); -ms-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px);} .item-dirt .postcat { display:inline-block; font-size:12px; text-transform:capitalize; padding:5px 10px; background-color:#d32f2f; opacity:0; border-radius:0 19px 0 19px; -webkit-transform:translate3d(0px, -50px, 0px); -ms-transform:translate3d(0px, -50px, 0px); transform:translate3d(0px, -50px, 0px); -webkit-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s;} .item-dirt .postcat a { color:#ffffff;} .item-dirt:hover .postcat { opacity:1; -webkit-transform:translate3d(0px, 0px, 0px); -ms-transform:translate3d(0px, 0px, 0px); transform:translate3d(0px, 0px, 0px); -webkit-transition-delay:0.15s; transition-delay:0.15s; z-index:1;} .item-dirt .icon { width:100%; list-style:none; padding:0; margin:0; position:absolute; bottom:-10px; left:0; opacity:0; z-index:1; -webkit-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s;} .item-dirt:hover .icon { bottom:20px; opacity:1; -webkit-transition-delay:0.15s; transition-delay:0.15s;} .item-dirt .icon li { display:inline-block;} .item-dirt .icon li a { display:block; width:35px; height:35px; line-height:35px; border:1px solid #ffffff; border-radius:0 16px 0 16px; font-size:14px; color:#ffffff; margin-right:5px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s;} .item-dirt .icon li a:hover { background-color:#d32f2f; border-color:#d32f2f;} /* Portfolio Work Single */ .portfolio-single { position:relative;} .port-meta { width:40%; float:left; padding:5px 0;} .port-meta p { margin:0 0 10px 0; padding-bottom:10px; border-bottom: 1px solid #cccccc;} .port-meta span { color:#d32f2f; display:block;} .portfolio-thumb { width:55%; float:right;} .portfolio-thumb img { width:100%; height:auto; display:block;} .portfolio-content { padding:25px 0; margin-top: 25px; border-top: 5px double #cccccc;} .portfolio-share{ text-align:left; margin-bottom:20px;} .portfolio-share ul.social-share-post li{ border-radius:0;} .portfolio-share span { margin-bottom: 10px;} /* Related Portfolio Works */ .related-work { position: relative;} .related-work h3 { position: relative; padding-top: 10px; border-top:1px solid #d32f2f; display: inline-block;} .single-port-mix { width:25%; padding:10px; float: left;} /*=============================================== ** Owl Carousel Navigation Css *===============================================*/ .owl-carousel.owl-theme .owl-nav{ margin-top:30px; } .owl-carousel .owl-nav button{ width:40px; height:40px; line-height:37px !important; font-size:0 !important; -webkit-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; position:relative; border:2px solid #d32f2f !important; } .owl-carousel .owl-nav button:hover{ border-color:#d32f2f !important; background-color:transparent !important; } .owl-carousel .owl-nav button:hover::before{ color:#d32f2f !important; } .owl-carousel .owl-nav button.owl-prev:before, .owl-carousel .owl-nav button.owl-next:before{ -webkit-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; position:absolute; font-family:'Font Awesome 5 Pro'; font-weight:700; left:0; top:0; font-size:20px; right:0; bottom:0; line-height:37px; color:#d32f2f; } .owl-carousel .owl-nav button.owl-prev{ left:0; } .owl-carousel .owl-nav button.owl-prev:before{ content:'\f30a'; } .owl-carousel .owl-nav button.owl-next{ right:0; } .owl-carousel .owl-nav button.owl-next:before{ content:'\f30b'; } /*=============================================== ** Innerpages Css *===============================================*/ /* Innerpage title */ .innerbanner{ overflow:hidden; position:relative; text-align:center; } .innerbanner .container{ padding:13em 0 7em;} h1.innerpage-title{ display:block; text-transform:capitalize; position:relative; font-size:35px; padding:15px; background-color:rgba(0,0,0,0.7); margin-bottom: 0;} /* Innerpage Content and Sidebar*/ .content-area{ padding:50px 0;} .site-main{ width:830px; margin:0; padding:0; float:left;} .sitefull{ width:100% !important; float:none !important; } /* Pagination */ .spacer20{height:20px; clear:both;} .pagination{display:table; clear:both; margin:0 auto; } .pagination ul{list-style:none; margin:20px 0;} .pagination ul li{display:inline-block; margin-right:5px;} .pagination ul li span, .pagination ul li a{background-color:#25282e; color:#ffffff; padding:5px 15px; display:inline-block;} .pagination ul li .current, .pagination ul li a:hover{ background-color:#d32f2f; color:#ffffff !important; } /* home page posts pagination */ .navigation .page-numbers{ background-color:#25282e; color:#ffffff; padding:5px 10px; display:inline-block; } .navigation .page-numbers.current, .navigation .page-numbers:hover{ background-color:#d32f2f; color:#ffffff !important; } .taxonomy-description{ margin-bottom:20px; } /*=============================================== ** Single Posts Css *===============================================*/ .blog-post-single .post-thumb{ margin-bottom:10px; } article p{ margin:0 0 20px 0; } .post-summary{ position:relative; margin-bottom:20px; } .blog-post-single header.entry-header{ margin-bottom:20px; } .post-bottom{ border-top:1px solid #e7e7e7; padding:20px 0 0; } .post-bottom .post-tags{ float:left; } .post-bottom .post-tags a{ background-color:#ececec; text-transform:lowercase; font-size:14px !important; padding:2px 8px; margin-right:2px; display:inline-block; margin-bottom:5px; font-weight:600; } .post-bottom .social_share{ float: left; } /* Post Nav */ .post-nav{ clear:left; margin-top:40px;} .prev-page, .next-page{ margin:0; padding:0;} .prev-page a{ float:left;} .next-page a{ float:right;} .prev-page a, .next-page a{background-color:#25282e; padding:5px 10px; color:#ffffff; font:15px 'Rajdhani';} .prev-page a:hover, .next-page a:hover{ color:#ffffff; background-color:#d32f2f;} .singleright { float:left; } .singleleft { float:right; } #nav-below.post-navigation{ margin:20px 0 40px; padding:20px 0; display:-ms-flexbox; display:flex; align-items:normal; width:100%; justify-content:space-between; } .nav-previous, .nav-next{ width:50%;} .nav-next { margin-left:auto;} .nav-next a { justify-content:end;} .nav-previous { text-align:left;} .nav-next { text-align:right;} #nav-below.post-navigation a{ display:-ms-flexbox !important; display:flex !important; } #nav-below.post-navigation .meta-nav-icon{ background-color:#25282e; width:55px; text-align:center; color:#ffffff; display:inline-block; position:relative; font-size:40px; } #nav-below.post-navigation .meta-nav-icon i{ position:absolute; left:50%; top:50%; -khtml-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); } #nav-below.post-navigation .meta-nav-title{ border:1px solid #25282e; padding:10px 15px; display:inline-block; vertical-align:middle; font:400 17px 'Roboto Slab'; color:#25282e; width:84%;} #nav-below.post-navigation .meta-nav-title h4{ text-transform:uppercase; margin-bottom:10px; } /* Team testi Single */ .team-testi-post-thumb{ margin-right:30px; text-align:center; } .team-testi-post-thumb img{ border:5px solid #d32f2f; padding:10px; margin-bottom: 10px; } .team-testi-post-thumb span{ display:block; text-transform:uppercase; font-weight:700; color:#d32f2f; line-height:normal; margin:15px 0; } .team-testi-post-thumb a{ border:2px solid #d32f2f; color:#d32f2f; height:35px; width:35px; display:inline-block; border-radius:50%; line-height:32px; margin:0 5px; } .team-testi-post-thumb a:hover { border-color: #25282e; color:#25282e; border-radius: 0;} .member-info{ margin-top:30px; } .member-info ul{ margin:0; padding:0; list-style:none; } .member-info ul li{ display:inline-block; width:46%; margin-bottom:15px; padding-bottom:15px; position:relative; margin-left:10px; margin-right:10px;} .member-info ul li:before{ content:''; position:absolute; width:100%; left:0; bottom:0; height:1px; background-color:#d32f2f; } .member-info ul li strong { color:#25282e;} #sidebar.team-testi-sidebar{ float:left; padding-bottom:0; } /*=============================================== ** Contact Page Css *===============================================*/ .gmap{ position:relative; width:100%; margin-bottom:0; } .blackmap{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); display:block; } .contact-top { width:100%;} .contact-box { width:31%; float: left; margin:0 39px 40px 0; border: 1px solid #cccccc; padding:60px 30px 30px; text-align:center; position:relative;} .contact-box::before { content:''; border:1px dashed #d32f2f; position:absolute; top:5px; bottom:5px; right:5px; left:5px;} .contact-box.last { margin-right:0;} .contact-icon { width:70px; font-size:20px; height:45px; line-height:40px; position:absolute; top:-3px; left:50%; margin-left:-35px; border-radius:0% 0% 50% 50%; box-shadow:0 1px 1px rgba(0, 0, 0, 0.3); z-index:1; background-color:#d32f2f; color:#ffffff;} .contact-details { text-align:center;} .contact-details h5 { margin-bottom: 10px;} .contact-details p { line-height:30px;} .contact-details span { display:block; line-height:30px;} span.highlight-text { color:#d32f2f;} .contact-content{ width:100%; text-align:center; margin-top: 30px;} .contact-content h2 { padding-bottom:10px; margin-bottom:0;} #contactform_main { margin:30px 0 0 0; width: 75%; margin:40px auto 0;} #contactform_main input[type="text"], #contactform_main input[type="email"], #contactform_main input[type="tel"], #contactform_main input[type="url"]{ font-size:14px; border:1px solid #cccccc; -moz-transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in; -ms-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; transition:all 0.5s ease-in; font-weight:500;} #contactform_main input[type="text"]:focus, #contactform_main input[type="email"]:focus, #contactform_main input[type="tel"]:focus, #contactform_main input[type="url"]:focus, #contactform_main textarea:focus { border-color:#d32f2f; color:#d32f2f; box-shadow:0 0 15px 2px #d32f2f; outline:none;} #contactform_main input[type="text"]:focus:hover, #contactform_main input[type="email"]:focus:hover, #contactform_main input[type="tel"]:focus:hover, #contactform_main input[type="url"]:focus:hover, #contactform_main textarea:focus:hover { outline:none; box-shadow:-2px 4px 6px -2px #d32f2f;} #contactform_main textarea { height:120px; font-size:14px; font-weight:500; border:1px solid #cccccc; -moz-transition:all 0.3s ease-in-out 0s; -webkit-transition:all 0.3s ease-in-out 0s; -ms-transition:all 0.3s ease-in-out 0s; -o-transition:all 0.3s ease-in-out 0s; transition:all 0.3s ease-in-out 0s;} #contactform_main input[type="submit"] { display:inline-block; font:400 18px 'Roboto Slab'; text-transform: capitalize;} .contact-social{ padding:30px 0; text-align:center; margin-bottom:0; background-color:#25282e; } .contact-social .social-icons a{width:50px; height:50px; line-height:50px; border-radius:0; font-size:18px; color:#d32f2f; border: 2px solid #d32f2f;} .contact-social .social-icons a:hover { color: #ffffff; border-color:#ffffff; border-radius: 50%;} /*=============================================== ** Sidebar Css *===============================================*/ #sidebar{ width:300px; float:right; background-color:#ffffff; padding:0 0 30px; } .widget_content { padding:0; } .sidebar-left{ float:left !important;} #sidebar .quotes h4 { margin:10px 0; font:500 18px 'Roboto Slab'; text-transform:uppercase;} aside.widget{ margin:0; padding:0; } aside.widget ul{ list-style:disc; } h3.widget-title{ position:relative; padding:10px 15px; background-color:#25282e; font:400 22px 'Roboto Slab'; color:#ffffff; line-height:normal;} h3.widget-title span { display:block; width:100%; text-transform:capitalize; } #sidebar aside.widget{ margin:0 0 30px; padding:0; position:relative; } .flotRight{ float:right !important;} #sidebar aside.widget:first-child{ margin-top:0; } .textwidget p{ margin-bottom:20px; } #sidebar ul li{ padding:8px 0 8px 0; list-style:none; border-bottom:1px solid #ebebeb;} #sidebar ul li a{ line-height:18px; color:#25282e; position:relative; padding-left:22px;} #sidebar ul li a:hover{ color:#d32f2f;} #sidebar ul li:last-child{ border:none;} .nosidebar{ float:none !important; margin:0 auto;} #sidebar .widget_recent_entries li, #sidebar .widget_recent_comments li, #sidebar .widget_archive li, #sidebar .widget_categories li, #sidebar .widget_meta li, #sidebar ul li.cat-item{ padding: 10px 0 10px 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; list-style:none;} #sidebar .widget_recent_entries li:first-child, #sidebar .widget_recent_comments li:first-child, #sidebar .widget_archive li:first-child, #sidebar .widget_categories li:first-child, #sidebar .widget_meta li:first-child, #sidebar ul li.cat-item:first-child{ padding-top:0; } #sidebar .widget_categories li span { float:right; width:30px; height:30px; line-height:33px; text-align:center; background:transparent; border-radius:100%;} #sidebar .widget_recent_entries li a:before, #sidebar .widget_archive li a:before, #sidebar .widget_categories li a:before, #sidebar .widget_meta li a:before, #sidebar ul li.cat-item a:before{ content:'\f101'; font-family:'Font Awesome 5 Pro'; position:absolute; left:0; top:0px; color:#25282e;} #sidebar .widget_tag_cloud a{ border:1px solid; text-transform:uppercase; font-size:15px !important; border-radius:3px; padding:8px 15px; margin-right:10px; display:inline-block; margin-bottom:10px; } #sidebar .widget_tag_cloud a:hover{ color:#ffffff; background-color:#25282e; } #sidebar #wp-calendar{ width:100%; text-align: center; } #sidebar #wp-calendar caption{ font-weight:700; margin-bottom:0; background-color:black; text-transform:uppercase; padding:10px; color:#ffffff; } #sidebar #wp-calendar th{ background-color:#2c2c2c; color:#ffffff; padding:5px; } #sidebar #wp-calendar tbody td{ background-color:#f9f9f9; padding:5px; } #sidebar #wp-calendar tbody td a, #sidebar #wp-calendar tfoot td a{ display:block; background-color:#d32f2f; color:#ffffff; } #sidebar #wp-calendar tbody td a:hover, #sidebar #wp-calendar tfoot td a:hover{ background-color:#2c2c2c; } #sidebar #wp-calendar tfoot td a { padding:5px; } .sidebar-banner{ position:relative; z-index:99; padding:30% 20px; } .sidebar-banner p{ margin-bottom:30px; } /*=============================================== ** Posts Social Share Css *===============================================*/ ul.social-share-post { padding:0; margin:0; list-style:none; } ul.social-share-post li { display:inline-block; padding:0; margin:0 8px 0 0; height:40px; width:40px; line-height:40px; text-align:center; background:transparent; } ul.social-share-post li a{ display:block; color:#ffffff; } ul.social-share-post li a:hover{ color:#ffffff; box-shadow:0 0 3px 3px rgba(34,43,95,0.3); } ul.social-share-post li.social-share-twitter{ background-color:#12c4f7; } ul.social-share-post li.social-share-facebook{ background-color:#3984bd; } ul.social-share-post li.social-share-whatsapp{ background-color:#65bc54; } ul.social-share-post li.social-share-googleplus{ background-color:#e65f3d; } ul.social-share-post li.social-share-linkedin{ background-color:#0097bf; } ul.social-share-post li.social-share-pinterest{ background-color:#cd2127; } /*=============================================== ** Back to Top Css *===============================================*/ #top{ position:relative;} #back-top { position: fixed; bottom: 15px; right:25px; z-index:999;} #back-top a {width:50px; display:block; text-align:center; text-transform:uppercase; text-decoration:none; color:#000000; -webkit-transition:1s; -ms-transition:1s; transition:1s; font-size:50px; line-height:1; } #back-top a:hover{ color:#d32f2f; } #back-top span { width:50px;height:50px; display: block; margin-bottom: 7px; -webkit-transition:1s; -ms-transition:1s; transition:1s; opacity:0.8;} /*=============================================== ** Custom Css *===============================================*/ .error_msg{padding:10px; background-color:#ffffff; color:#25282e; border:2px solid #d32f2f; margin:15px 0; font-family:'Rajdhani';} .success_msg{padding:10px; background-color:#dcffc5; color:#070; border:1px #070 solid; margin:15px 0; font-family:'Rajdhani';} .customtab{ margin-top:0px;} article.tag-sticky-2{background:#f6f6f6; padding:10px;} /* = Text meant only for screen readers. -------------------------------------------------------------- */ .screen-reader-text {clip: rect(1px, 1px, 1px, 1px);position: absolute !important; height: 1px;width: 1px; overflow: hidden;} .screen-reader-text:focus { background-color:#f1f1f1; border-radius:3px; box-shadow:0 0 2px 2px rgba(0, 0, 0, 0.6); clip:auto !important; color:#21759b; display:block; font-size:14px; font-size:0.875rem; font-weight:bold; height:auto; left:5px; line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; width:100%; z-index:100000; /* Above WP toolbar. */} /* = Accordion tab section css -------------------------------------------------------------- */ .acc-content a { font-weight:bold; line-height:30px;} /* = Box Layout Css -------------------------------------------------------------- */ .boxlayout{ width:1210px; margin:0 auto; box-shadow:0 5px 10px #25282e; position:relative; overflow-x:hidden; } .boxlayout .header { top:46px;} .boxlayout .container{ padding:0 20px;} .boxlayout .content-area{ padding: 50px 0; } .boxlayout .innerbanner .container{ padding:16% 30px 110px; } /*=============================================== ** Woocommerce Css *===============================================*/ .woocommerceright{float:left;} .woocommerceleft{float:right;} .content-area .woocommercesitefull{ width:100%; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align:center; box-shadow:0 0 3px 1px #ddd; } .woocommerce .woocommerce-result-count{ font-size:16px; margin-top:12px; } .woocommerce .woocommerce-ordering{ margin-bottom:38px; position:relative; } .woocommerce-ordering:after{ content:'\f078'; font-family:'Font Awesome 5 Pro'; font-weight:400; position:absolute; top:10px; right:20px; } form.woocommerce-ordering select{ padding:10px 30px 10px 10px; color:#4d5257; font-size:15px; background-color:#ffffff; border: 1px solid #e5e5e5; font-family:'Roboto Slab'; position:relative; -webkit-appearance: none; -ms-appearance: none; appearance: none; background-image: url(...); } form.woocommerce-ordering select option { font-family: 'Roboto Slab';} .woocommerce-variation-price { margin-bottom:10px; } .woocommerce span.onsale, .woocommerce .woo-entry-new-badge, .woocommerce .sale-perc, .woocommerce .soldout{ text-transform:capitalize; font-size:15px; font-family:'Rajdhani'; position:absolute; top:0; border-radius:0; min-height:inherit; min-width:inherit; padding:8px 16px; letter-spacing:2px; line-height:1; font-weight:400; } .woocommerce ul.products li.product .onsale, .woocommerce ul.products li.product .sale-perc{ background-color:#d32f2f; color:#ffffff; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .woocommerce ul.products li.product .onsale{ margin:0; right:auto; left:0; opacity:1; } .woocommerce ul.products li.product .product-item-inner:hover .onsale{ opacity:0; } .woocommerce ul.products li.product .sale-perc{ opacity:0; } .woocommerce ul.products li.product .product-item-inner:hover .sale-perc{ opacity:1; } .woocommerce .woo-entry-new-badge, .woocommerce .soldout{ right:0; background-color:#333333; color:#ffffff; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:25px; } .woocommerce ul.products li.product .star-rating{ margin:5px auto 10px;} .woocommerce ul.products li.product .price { font-size: 18px; font-weight:700; } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price{ color:inherit !important;} .woocommerce ul.products li.product .price del, .woocommerce ul.products li.product .price ins{ display:inline-block; margin:0 5px; } .woocommerce ul.products li.product .price del{ font-size: 13px; } .woocommerce ul.products li.product .product-item-inner a.button::before, .woocommerce .return-to-shop a.button::before, .wc-proceed-to-checkout a.button::before, .woocommerce-mini-cart__buttons.buttons a.button::before { content:none;} .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce input.button, .woocommerce a.added_to_cart, .woocommerce a.button.alt, .woocommerce input.button.alt, .reset_variations{ margin-bottom:25px; background-color:#d32f2f; color:#ffffff; padding:10px 25px; font:400 14px/18px 'Roboto Slab'; display:inline-block; -ms-transition:all 0.5s ease 0s; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; margin-top:20px; text-transform: uppercase; position:relative; border-radius:30px; font-weight:bold; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce input.button:hover, .woocommerce a.added_to_cart:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover, .reset_variations:hover{ background-color:#242423; color:#ffffff; } .woocommerce ul.products li.product a img{-webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin:0; } .woocommerce .product-item-thumbnail{ overflow:hidden; position:relative;z-index:2; margin-bottom:20px; } .woocommerce .product-item-thumbnail-holder{ text-align:center; } .woocommerce .product-item-thumbnail-holder > a:last-child { position: absolute; bottom:0; margin-bottom:0; left:0; right:0; width:100%; color:#fff; padding:14px 20px; z-index:2; opacity:0; visibility: hidden; transition: all 250ms ease-out; transform: translate(0, 100%); -webkit-transform: translate(0, 100%); border-radius:0; } .woocommerce .product-item-inner:hover .product-item-thumbnail-holder > a:last-child { opacity: 1; visibility: visible; transform: translate(0, 0); -webkit-transform: translate(0, 0); } .woocommerce .product-item-thumbnail-holder .added{ display:none !important; } .woocommerce a.added_to_cart{ display: table; margin: 0 auto 15px; } #sidebar .woocommerce-mini-cart__buttons a.button { margin-right:8px; } #sidebar ul.woocommerce-mini-cart li{ list-style:none; position: relative; } #sidebar ul.woocommerce-mini-cart li a, #sidebar ul.woocommerce-mini-cart li span.quantity{ font-size:15px; padding-left:0 !important; margin-bottom:5px; } .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img{ width:50px; } .woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove{ font-size:30px !important; height: 30px; width: 30px; line-height: 30px !important; padding-left:0 !important; border-radius:0; position: absolute; left: -2px; top: 10px; float:left; margin-right:15px; } .woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total{ padding: 12px 0 10px; font-size:15px; text-transform:uppercase; } .widget .woocommerce-product-search, .widget .search-form { position: relative; } .widget .woocommerce-product-search input[type="submit"], .widget .search-form .search-submit { position: absolute; top: 0px; right: 0px; box-shadow: none; border: none; text-indent: -999px; padding: 0; outline:none; width: 46px; height:41px; z-index: 1; border-radius: 0px 3px 3px 0px; background-image: url(images/findicon.png); background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .widget .woocommerce-product-search input[type="submit"]:hover, .widget .search-form .search-submit:hover{ cursor:pointer; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle{ background-color:#d32f2f;} .woocommerce .widget_price_filter .price_slider_amount .price_label{ font-size:15px; } .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{ background-color:#242423;} .woocommerce .widget_recent_reviews li, .woocommerce .widget_products li, .woocommerce .widget_top_rated_products li, .woocommerce .widget_rating_filter li, .woocommerce .widget_recently_viewed_products li{ list-style:none !important;} .woocommerce .widget_recent_reviews a, .woocommerce .widget_products a, .woocommerce .widget_top_rated_products a, .woocommerce .widget_rating_filter a, .woocommerce .widget_recently_viewed_products a{ padding-left:0 !important;; font-size:16px !important; font-weight:700 !important; } .woocommerce ul.product_list_widget li .star-rating{ margin: 8px 0; } .woocommerce-LoopProduct-link br{ display:none; } a.reset_variations{ margin:0; } .woocommerce div.product form.cart .variations select{ max-width:50%; padding:10px; } /*=============================================== ** Show another image on hover Css *===============================================*/ img.onhover{ position:absolute; top:0; left:0; opacity:0; transition:opacity .1s; -webkit-transition:opacity .1s; -webkit-backface-visibility:hidden; backface-visibility:hidden; object-fit: cover; height: 100% !important; } .woocommerce ul.products li.product .product-item-inner:hover img.onhover{ opacity: 1; object-fit: cover; } .woocommerce ul.products li.product .product-item-inner:hover img.attachment-woocommerce_thumbnail{ opacity:0; } /*=============================================== ** Single Product Page Css *===============================================*/ .related.products{ padding:0; } .related.products h2{ text-transform:capitalize; border-bottom:1px solid #f1f1f1; padding-bottom:15px; } body.single-product #sidebar {display:none;} body.single-product .site-main{ width:100%; padding:4em; box-shadow:0 0 12px 4px #CCC; padding-bottom:0; } .single-product .product .onsale{ left:0; background-color:#d32f2f; } .woocommerce div.product div.images .flex-control-thumbs li img{ padding:10px 5px 0; } .woocommerce h1.product_title{ border-bottom:1px solid #cccccc; padding-bottom:20px !important; color:#25282e; } .woocommerce div.product p.price, .woocommerce div.product span.price { margin-bottom: 1.618em; font-size:18px; font-weight:700; color:#25282e; } .woocommerce div.product .woocommerce-product-rating{ float:right; } .woocommerce-product-details__short-description ul{ margin:20px 0;} .woocommerce-product-details__short-description ul li{ position:relative; padding-left: 25px; margin-bottom: 10px; } .woocommerce-product-details__short-description ul li:before{ content:'\f061'; font-family:'Font Awesome 5 Pro'; font-weight:400; position:absolute; left:0; font-size:16px; color:#d32f2f;} .woocommerce .quantity .qty{ width:5em; margin:15px 30px 0 0; } .woocommerce .product_meta{ border-top:1px solid #f1f1f1; padding-top:20px; font-size:16px; } .woocommerce .product_meta .posted_in{ margin-right:30px; } .woocommerce .product_meta .posted_in, .woocommerce .product_meta .tagged_as{ color:#959595; } .woocommerce div.product .woocommerce-tabs ul.tabs{ position:relative; display:inline-block; width:100%; vertical-align:middle; list-style:none; margin:0 27px 0 0; padding:0; border-bottom: 2px solid #e1e1e1; clear: both; overflow:visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before{ border:none; } .woocommerce div.product .woocommerce-tabs ul.tabs li::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before{ content:none; } .woocommerce div.product .woocommerce-tabs ul.tabs li{ border:none; font-size:20px; font-weight:700; padding:0; margin:0 10px 0 0; background-color:transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li a{ padding:13px 15px; border-radius:0; color:#25282e !important; position:relative; font:400 18px 'Rajdhani';} .woocommerce div.product .woocommerce-tabs ul.tabs li a.selected:after{ content:''; position:absolute; bottom:-2px; left:0; display:block; width:100%; height:2px; background-color: #d32f2f; } .woocommerce div.product .woocommerce-tabs .panel{ margin:37px 0 20px; } .woocommerce div.product .woocommerce-tabs .panel h2{ display:none; } .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel--description p{ margin-bottom:15px; line-height:26px;} .woocommerce #review_form #respond .comment-reply-title{ font-size: 22px; font-weight: bold; text-transform: uppercase; margin: 20px 0; display: block; color:#25282e; } .woocommerce #review_form #respond .comment-form-rating{ font-size:20px; } .woocommerce #review_form #respond p.stars{ margin-top:15px; } .woocommerce-tabs{ padding:30px 0 10px; margin-bottom:30px; } .woocommerce-product-details__short-description{ margin-bottom:20px; } #reviews.woocommerce-Reviews .comment-respond{ box-shadow:none; } .woocommerce #reviews #comments ol.commentlist li img.avatar{ width:70px; padding:0; border:none; border-radius:50px; } .woocommerce #reviews #comments ol.commentlist li .comment-text{ margin:0 0 0 90px; border:none; padding:0; } .woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{ margin:0; font-size:16px; color:#25282e; } .woocommerce #reviews #comments ol.commentlist li .star-rating{ float:none; font-size:0.8em; margin-bottom:10px; width:7em; } .woocommerce #reviews #comments ol.commentlist li .star-rating:before{ letter-spacing:5px; } .woocommerce #reviews #comments ol.commentlist li .star-rating span:before{ color:#d32f2f; letter-spacing:5px; } .woocommerce #review_form #respond textarea, .woocommerce #review_form #respond input[type=text], .woocommerce #review_form #respond input[type=email]{ position:relative; width:100%; margin:0 0 25px; padding:20px 24px; font-family:inherit; font-size:12px; font-weight:inherit; line-height: calc(60px - (20px * 2) - 2px); color:#16161b; border-radius:3.3px; border:1px solid #e1e1e1; background-color:#fafafa; outline:0; cursor:pointer; -webkit-appearance:none; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-box-shadow:none; box-shadow:none; -webkit-transition:border-color .2s ease-in-out; -o-transition:border-color .2s ease-in-out; transition:border-color .2s ease-in-out; height:auto; } .woocommerce #review_form #respond .comment-form-author, .woocommerce #review_form #respond .comment-form-email{ width:100%; } .woocommerce #review_form #respond input:focus[type="text"], .woocommerce #review_form #respond input:focus[type="email"], .woocommerce #review_form #respond textarea:focus{ background-color:transparent; border:1px solid #d32f2f;} .woocommerce div.product p.stock{ color:#ffffff; font-weight:700; padding:0 20px; } .woocommerce div.product p.stock.avail-in-stock{ background-color:#77a464; } .woocommerce div.product p.stock.few-in-stock{ background-color:#f27144; } .woocommerce div.product p.stock.out-of-stock{ background-color:red; } /*=============================================== ** Product Cart Page Css *===============================================*/ .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text{ width: 150px; height: 38px; } .woocommerce .cart-collaterals{ margin-top:50px; } .woocommerce-cart table.cart td.product-name{ font-weight:700; font-size:15px; } .woocommerce-cart .cart-collaterals .cart_totals table{ padding:20px;} .woocommerce-cart .cart-collaterals .cart_totals .cart-subtotal, .woocommerce-cart .cart-collaterals .cart_totals .order-total{ font-size:18px; } .woocommerce-cart .wc-proceed-to-checkout{ text-align:center; } .woocommerce .woocommerce-cart-form button.button{ margin:0; } /*=============================================== ** Checkout Page Css *===============================================*/ .woocommerce-checkout .woocommerce #customer_details{ margin-bottom:50px; } .woocommerce-checkout .woocommerce .woocommerce-billing-fields input{ padding:8px 12px; } .woocommerce-checkout .woocommerce .woocommerce-billing-fields .select2-container--default .select2-selection--single{ border-radius:0; } .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order th, .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order td{ border:none; } .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order .cart_item td, .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order .cart-subtotal th, .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order .cart-subtotal td{ border-bottom:1px solid #dddddd;} #add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li{ list-style:none; } .woocommerce-checkout #payment ul.payment_methods li label{ font-size:16px; } #add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row{ padding:0 1em; } .woocommerce-checkout .woocommerce .woocommerce-checkout-review-order a.about_paypal{ display:none; } #add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img{ width:auto; } /*=============================================== ** Woocommerce Pagination Css *===============================================*/ .woocommerce nav.woocommerce-pagination ul{ border:none; } .woocommerce nav.woocommerce-pagination ul li{ margin:0 5px; border:none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border-radius:50%; width: 40px; height: 40px; line-height: 25px; } /*=============================================== ** Data Tooltip Css *===============================================*/ /* Add this attribute to the element that needs a tooltip */ [data-tooltip] { position: relative; z-index: 2; cursor: pointer; } /* Hide the tooltip content by default */ [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } /* Position tooltip above the element */ [data-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 170px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } /* Triangle hack to make tooltip look like a speech bubble */ [data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } /* Show tooltip content on hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /*=============================================== ** Author Bio Box Css *===============================================*/ .author-box{ position: relative; clear: both; display: block; margin:0; padding: 2.6rem 3.2rem; background-color:#d32f2f; margin-bottom:30px; } .author-img{ margin: 0; width: 70px; height: 70px; position:absolute; } .author-bio-box{ padding-left:90px; } .author-bio-box, .author-bio-box a{ color:#ffffff; } .author-bio-box a:hover{ color:#25282e; } .author-bio-box h4.author-name{ margin: 0 0 10px 0; text-transform: uppercase; font-weight: bold; } .author-bio-box p{ margin-bottom:10px; } .author-meta a { display:inline-block; list-style: none; padding: 0; margin: 0 15px 0 0; font-size: 13px; } /*=============================================== ** Form And Input type Css *===============================================*/ form{ position:relative; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{ width:100%; margin:0 0 20px 0; padding:11px 12px; border:1px solid #cccccc; outline:0; resize:none; font-size:13px; line-height:17px; background-color:#ffffff; color:#25282e; font-family:'Roboto Slab'; font-weight:400; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } select::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */ } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus, select:focus{ border-color:#d32f2f; } button,html input[type=button],input[type=reset],input[type=submit]{ -webkit-appearance:button; cursor:pointer; font-family: 'Roboto Slab'; text-transform:uppercase; font-weight:700; border:none; outline:none; padding:12px 30px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; color:#ffffff;} .wpcf7-form label{ display:block; text-transform:uppercase; font-family:'Roboto Slab'; font-size:12px; margin:0 0 8px; color:#25282e; font-weight:700; } /*=============================================== ** Comment Form And Comment Styling Css *===============================================*/ .comments-area .comment-list{ margin-bottom: 3em; list-style:none; } .comments-area .comment-list .comment-body{ margin:0 0 1em; padding:2em 2em 2em 7em; position:relative; display:block; background-color:#f9f9f9; } .comments-area .comment-author { display:inline-block; position:absolute; left:25px; top:30px; } .comment-metadata{ position:relative; } .comment-metadata h4{ display:inline-block; margin-bottom:10px; } .comment-metadata h4 cite{ font-family: 'Roboto Slab'; font-weight:700; text-transform:capitalize; font-style:normal; font-size:16px; } .comment-metadata time{ display:inline-block; font-size:11px; } .comment-metadata .reply{ position:absolute; right:0; top:0; font-family: 'Roboto Slab'; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:12px; } .comment-metadata .reply a:before{ content:'\f122'; font-family:'Font Awesome 5 Pro'; font-weight:300; position:absolute; left:-20px; } .comment-content p{ font-family: 'Roboto Slab'; font-size:14px; margin:0; } .comments-area .comment-list ul.children{ margin-left:80px; } .comment-respond{ margin-bottom:20px; } .comments-area h3.comment-reply-title{ text-transform:capitalize; margin-bottom:10px; font-size:25px; } .comments-area h3.comment-reply-title small{ margin-left:50px; } .comments-area .comment-form p.comment-notes { margin-bottom: 2em; font-family: 'Roboto Slab'; font-weight: 400; font-size:14px; } .required { color:#c0392b; } .comment-form-author, .comment-form-email, .comment-form-url{ width:31.3%; float:left; margin-right:3% !important; } #commentform p.comment-form-url { margin-right:0 !important; } #commentform p.comment-form-url:after{ content:''; display:table; clear:both; } #commentform label { display:block; text-transform:uppercase; font-family:'Roboto Slab'; font-size:12px; margin:0 0 5px; color:#25282e; font-weight:700; } .comment-form-cookies-consent{ margin-bottom:15px; } .comment-form-cookies-consent label{ margin-left:1% !important; display:inline-block !important; } #commentform .logged-in-as{ margin-bottom:15px; } p.comment-awaiting-moderation { color: #fdac56; } /*=============================================== ** Search Form Css *===============================================*/ form.search-form{ position:relative; } form.search-form input.search-submit{ position:absolute; right:0; top:0; } /*=============================================== ** 404 Page Css *===============================================*/ .error-404 .title-404{ text-align:center; font-size:13em; font-weight:600; color:#d0d0d0; margin-bottom:80px; } .error-404 .sub-title-404 { font-size:2.4em; text-transform:uppercase; display:block; margin:0 0 30px; color:#25282e; display:block; line-height:1; } .error-404 .text-404{ font-family:'Roboto Slab'; font-size:18px; color:#9b9b9b; margin-bottom:40px; } .error-404 .search-form{ width:60%; margin:0 auto 30px; } .error-404 .search-form input[type=search]{ display:inline-block; width:70%; margin-right:20px; } /*=============================================== ** Search Result Page Css *===============================================*/ .search-result-form{ width:60%; margin:0 auto; } .search-result-form input[type="search"]{ width:82%; } .search-result-box{ border:1px solid #dddddd; margin-bottom:30px; display:table; width:100%; } .search-result-box .post-thumb{ width:250px; padding:8em 1.5em; background-position:center; background-size:cover; background-repeat:no-repeat; display:table-cell; } .search-result-box .post-summary{ overflow:hidden; padding:2em; position:relative; display:table-cell; vertical-align:middle; } .search-more a{ text-transform:uppercase; font-weight:700; letter-spacing:1px; }