/*-------------------------------------------------------------------------------- SUMMARY /*-------------------------------------------------------------------------------- 00. CSS Reset + normalize 01. Document Setup 02. Grid 03. fullWidth 04. Page transition 05. preloader 06. Header & Navigation 07. vertical menu - Left & Right Position 08. Lazy loading 09. WPML 10. Social icons 11. topbar 12. Toggle Sidebar buttons 13. Toggle Sidebar Container 14. Mobile menu And Menu widget in Toggle Side bar menu 15. search widget in toggle menu 16. toggle cart bar 17. Home slider 18. button 19. video 20. Embed video 21. Showcase 22. socail Share 23. Widgets 24. Classic blog 25. Portfolio and portfolio detial / load more buttons 26. instagram animation - gallery animation - portfolio animation - products animation 27. Imagebox shortcode 28. Banner shortcode 29. Custom imagebox shortcode 30. Textbox shortcode 31. Custom textbox shortcode 32. Custom title 33. shortcode Animation 34. Icon Box shortcode 35. Custom Icon Box shortcode 36. team member shortcode 37. Horizontal separator with title 38. team member shortcode 39. Accordion shortcode 40. Tabs shorcode 41. Toggle shorcode 42. Counter box 43. Piechart 44. Image carousel 45. Parallax And Video section / Texture hover 46. Respond form 47. WP Classes 48. Blog accordion 49. Search Page 50. 404 Page 51. Pagination 52. Top button 53. Price table 54. Forms & contact form 7 style 55. Footer 56. simple-menu footer 57. Search Form 57.1. Ajax Search Form 58. Testimonials // Blockquotes 59. Blog listing/Archive 60. Blog Single 61. Horizontal progress bar 62. Map 63. text block 64. Title seperator 65. Post grid 66. Newsletter 67. Snap to scroll 68. Instagram feed 70. Gallery 70.1 carousel gallery 71. SoundCloud 72. Animated Text 73. Nice select 74. Cart Blog 75. Blog and portfolio detail social share 76. Blog and portfolio detail Navigation 77. swiper scollbar 78. Retina displays styles 79. Visual Composer reset 80. countdown shortcode 81. Cookie Law popup 82. Breadcrumb 83. Visual Composer frontend Editor 84. Instagram Hashtag 85. Popup Newsletter 86. Infinite Scroll /*-----------------------------------------------------------------------------------*/ /* 00. CSS Reset + normalize /*-----------------------------------------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border:0; font:inherit; font-size:100%; vertical-align:baseline; margin:0; padding:0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale; } .ep-section:not(.footer-widgetized) div.vc_column_container>.vc_column-inner { padding-left: 0; padding-right: 0; } .vc_column_container > .vc_column-inner { -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; } /*prevent row gap option effect on row margin */ div.vc_column-gap.vc_row { margin-left: 0; margin-right: 0; } div.vc_column-gap.vc_row .vc_row { margin-left: 0; margin-right: 0; } div.vc_row.vc_column-gap>.vc_column_container { padding-top:0; padding-bottom:0; } .wpb_text_column.wpb_content_element p span { line-height: 1.75em; } html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} pre { background: #fcfcfc; padding: 5px 5px 5px 15px; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #FFF inset; } /*-----------------------------------------------------------------------------------*/ /* 01. Document Setup /*-----------------------------------------------------------------------------------*/ body { color: #464646; font-family:Lato,sans-serif; font-size:14px; font-weight:400; line-height:22px; overflow-x:hidden; } .layout { position: relative; } .ep-section { position: relative; } .vc_row.vc_row-flex { width:100%; display:flex; } .vc_row.vc_row-o-full-height, .vc_row.vc_row-o-full-height, .vc_row.vc_row-o-full-height > .vc_column_container { min-height: 100vh !important; } img { height: auto; max-width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* Paragraph */ p{ margin: 0.85em 0; } /* hr */ hr{ display: block; height:1px; background-color: #bdbdbd; border: 0; margin: 30px 0; } ol,ul { list-style:none; } table{ border-collapse:collapse; border-spacing:0; } strong { font-weight:700; font-family: lato, sans-serif; } /* Anchor */ a { color:#cbcbcb; text-decoration:none; -moz-transition:color .5s ease 0s; -o-transition:color .5s ease 0s; -webkit-transition:color .5s ease 0s; transition:color .5s ease 0s; } a:hover{ color:#073B87; -moz-transition:color .5s ease 0s; -o-transition:color .5s ease 0s; -webkit-transition:color .5s ease 0s; transition:color .5s ease 0s; } a:focus { outline: 0; } /* Headings */ h1, h2, h3, h4, h5, h6{ margin:0 0 10px; color: #2e2e2e } h1{ font-family: Poppins, sans-serif; font-size: 60px; font-weight: 300; line-height: 1.25em;} h2{ font-family: Poppins, sans-serif; font-size: 48px; font-weight: 300; line-height: 1.25em;} h3{ font-family: Poppins, sans-serif; font-size: 40px; font-weight: 300; line-height: 1.25em;} h4{ font-family: Poppins, sans-serif; font-size: 32px; font-weight: 300; line-height: 1.25em;} h5{ font-family: Poppins, sans-serif; font-size: 24px; font-weight: 300; line-height: 1.25em;} h6{ font-family: Poppins, sans-serif; font-size: 20px; font-weight: 300; line-height: 1.25em;} .no-select { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; } /* Sections Title And Subtitle */ #header { width:100%; height: 380px; background-position: center top; background-repeat: no-repeat; background-size: cover; position:relative; } #main-content.type2_3 #header { height: 430px; } #header.hasbg:before { content:""; background:#000; opacity:.1; position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; } #header-content { width: 90%; text-align:center; position: absolute; top: 50%; left:50%; -webkit-transform: translateY(-33%) translateX(-50%); -moz-transform: translateY(-33%) translateX(-50%); -ms-transform: translateY(-33%) translateX(-50%); -o-transform: translateY(-33%) translateX(-50%); transform: translateY(-33%) translateX(-50%); z-index:2; } #header h1 { color:#101010; font-family: Poppins, sans-serif; font-weight: 700; font-size: 60px; line-height:61px; margin:0; text-transform: uppercase; } #header .subtitle { font-size: 16px; } .titleSpace .title h3 { color:#101010; font-family: Poppins, sans-serif; font-weight: 700; font-size: 48px; line-height:61px; margin:0; } .titleSpace .subtitle { font-size: 14px; color:#363636; font-weight: 400; } .titleSpace { margin:30px 15px 26px 15px; } .portfolioSection .title_container:not(.portfolio_height) .titleSpace { margin:0 !important; } /* Widgetized Bar Title */ .footer-widgetized-wrap .titleSpace { margin-bottom:65px; } /* webkit, opera, IE9 */ ::selection { background:#d7c3a8; color: #fff; } /* mozilla firefox */ ::-moz-selection { background:#073B87; color: #fff; } /* Forms */ input[type="email"]:focus, input[type="text"]:focus, textarea:focus { -moz-outline: 0; outline:0; } /*visual composer*/ .wpb_content_element { font-family: Lato,sans-serif; line-height:1.8em; font-weight:400; } .wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid>li, .last_toggle_el_margin, .wpb_buttonn{ margin-bottom:0!important; } .wpb_row .wpb_column { margin-bottom:0!important; } .wpb_row .wpb_column:after { content: " "; display: block; height: 0; clear: both; } /* Equal height background image */ .vc_row.vc_row-o-equal-height > .vc_column_container .vc_column-inner { background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .background_cover .background-img { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; } /* Float */ .float-right{ float:right !important; } /* Visibility */ .visible-phone,.hidden-desktop { display:none!important; } .visible-tablet,.visible-h-tablet { display: inherit !important; } .hidden { display:none } /* columns content - vertical Position */ .vc_column-inner.vertical_position { display: table !important; width: 100%; height: 100%; table-layout: fixed; } .vc_column-inner.vertical_position.vertical_position_middle > .wpb_wrapper { vertical-align: middle; display: table-cell; width: 100%; } .vc_column-inner.vertical_position.vertical_position_bottom > .wpb_wrapper { vertical-align: bottom; display: table-cell; width: 100%; } /* For theme-unit-test-data */ .post p em { font-style: italic; } .page-template-default:not(.woocommerce-page) .page ol, .row .page.type-page ol, .singlePost ol { padding-left: 25px; list-style: decimal; } .page-template-default:not(.woocommerce-page) .page ul, .row .page.type-page ul, .singlePost ul{ list-style: square; } .post ul { padding-left: 16px; } .singlePost .comments-list { list-style: none; padding-left: 0px!important; } .ping_list{ margin:30px 0 50px 10px; } .page-template-default:not(.woocommerce-page) .page table:not(.wishlist_table):not(.shop_attributes), .page-template-default:not(.woocommerce-page) .page th, .page-template-default:not(.woocommerce-page) .page table:not(.wishlist_table):not(.shop_attributes) td, .row .page.type-page table, .row .page.type-page th, .row .page.type-page td, .singlePost table, .singlePost th, .singlePost td { border: 1px solid rgba(0, 0, 0, 0.1); } .page-template-default:not(.woocommerce-page) .page table:not(.shop_attributes), .row .page.type-page table, .singlePost table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 24px; width: 100%; } .page-template-default:not(.woocommerce-page) .page caption, .page-template-default:not(.woocommerce-page) .page th, .page-template-default:not(.woocommerce-page) .page td, .row .page.type-page caption, .row .page.type-page th, .row .page.type-page td, .singlePost caption, .singlePost th, .singlePost td { font-weight: normal; text-align: left; } .page-template-default:not(.woocommerce-page) .page th, .row .page.type-page th, .singlePost th { border-width: 0 1px 1px 0; font-weight: bold; padding: 5px; } .page-template-default:not(.woocommerce-page) .page td, .row .page.type-page td, .singlePost td { border-width: 0 1px 1px 0; padding: 5px; } .page-template-default:not(.woocommerce-page) .page ul li ul, .row .page.type-page ul li ul, .row .page.type-page ol li ol, .singlePost ul li ul, .singlePost ol li ol { margin-left: 15px; } dl { margin-bottom: 24px; } dt { font-weight: bold; } dd { margin-bottom: 24px; } blockquote { color: #767676; font-size: 15px; font-style: italic; line-height: 1.2631578947; margin-bottom: 24px !important; quotes: "\201C""\201D""\2018""\2019"; font-weight: 400; position:relative; } blockquote:before { color: #ccc; content: open-quote; font-size: 3.5em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote:after { color: #ccc; content: close-quote; font-size: 3.5em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.6em; } blockquote p { display: inline; margin:0; } /* End For theme-unit-test-data */ #main { position:relative; overflow-x:hidden; min-height: 100vh; } #home .gmnoprint { display:none; } #home { position:absolute; top:0; left:0; height:100vh; width:100%; overflow:hidden } .hasRevSlider #home{ position:relative; } .hasRevSlider #home .slider-wrap { position:static; height:100%; } #home .slider-wrap { overflow: hidden; width: 100%; position: absolute; height:100%; height: 100vh; top:0; left:0; } #home.home-rev-slider { height: auto !important; } #home.hidehome{ height: 0; } #home .homeWrap .fullScreenImage { -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; width: 100%; position: fixed; background-position: center !important; } label { font-weight: normal; color: #313131; font-size: 1rem; } /*-----------------------------------------------------------------------------------*/ /* 02. Grid /*-----------------------------------------------------------------------------------*/ [class*="span"] { float:left; } .clearfix:before,.clearfix:after,.row:before,.row:after,.container:before,.container:after { display:table; content:""; } .clearfix:after,.row:after,.container:after { clear:both; } .container { width:940px; margin:0 auto; } .pageHasSidebar .container { width:100%; } .fullWidth .portfolioSection .container.title_container { margin:0 auto; } .container.title_container { margin-left:-15px; } /* Set Fill Portfolio in Container - in Portfolio Gutter */ .container .portfolio_wrap{ margin-left:-13px; } .fullWidth .portfolio_wrap , .fullWidth ul.products { width:100%; margin:auto; } .fullWidth .container.title_container , .portfolio_wrap { width:940px; } .ve.fullWidth .container.title_container , .portfolio_wrap { width:940px; } .wrap { width:100%; position:relative; min-width:940px; overflow:hidden; } .cblog .wrap { overflow:visible; } .homeWrap { width:100%; height:100%; position:relative; } .wrap.headerWrap , .wrap.portfoliowrap { overflow:inherit; } .pert { background-color:transparent; } .relative { position:relative } /* 960 Grid System */ .span12, .vc_column_container.span12 { width: 100%; margin-right: 0; } .span11 { width: 91.66666667%; } .span10 { width: 83.33333333%; } .span9 { width: 75%; } .span8, .vc_column_container.span8 { width: 66.66666667%; } .span7 { width: 58.33333333%; } .span6, .vc_column_container.span6 { width: 50%; } .span5 { width: 41.66666667%; } .span4, .vc_column_container.span4 { width: 33.33333333%; } .span3, .vc_column_container.span3 { width: 25%; } .span2, .vc_column_container.span2 { width: 16.66666667%; } .span1 { width: 8.33333333%; } .span1, .span2, .span3 , .span4, .span5 , .span6 , .span7 , .span8 , .span9 , .span10 , .span11 , .span12 { box-sizing: border-box; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } .vc_column_container.span2, .vc_column_container.span3, .vc_column_container.span4, .vc_column_container.span6, .vc_column_container.span8, .vc_column_container.span12 { box-sizing: border-box; min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative; } .offset12 { margin-left: 100%; } .offset11 { margin-left: 91.66666667%; } .offset10 { margin-left: 83.33333333%; } .offset9 { margin-left: 75%; } .offset8 { margin-left: 66.66666667%; } .offset7 { margin-left: 58.33333333%; } .offset6 { margin-left: 50%; } .offset5 { margin-left: 41.66666667%; } .offset4 { margin-left: 33.33333333%; } .offset3 { margin-left: 16.66666667%; } .offset2 { margin-left: 16.66666667%; } .offset1 { margin-left: 8.33333333%; } /*-----------------------------------------------------------------------------------*/ /* 03. fullWidth /*-----------------------------------------------------------------------------------*/ .fullWidth { padding:0; width: 100%; } .fullWidth .container { width:100%; } /* Remove left and right padding in fullwidth */ .fullWidth .vc_column_container:nth-of-type(1) > .vc_column-inner{ padding-left:0; } .fullWidth .vc_column_container:last-child > .vc_column-inner{ padding-right:0; } /*-----------------------------------------------------------------------------------*/ /* 04. Page transition /*-----------------------------------------------------------------------------------*/ /* no transition */ .notransition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } body.no-preloader .main-content { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 1; } body.no-preloader.no-page-transition .main-content { -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; animation: none !important; opacity: 0; } /*fade effect */ body.fade .main-content { opacity: 0; -webkit-transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity .5s cubic-bezier(0.215, 0.61, 0.355, 1); } body.fade .main-content.show { opacity: 1; } /* scale up */ body.no-preloader.scaleup .main-content { -webkit-animation: scaleupFadeOut .5s ease-in-out forwards; -moz-animation: scaleupFadeOut .5s ease-in-out forwards; -o-animation: scaleupFadeOut .5s ease-in-out forwards; animation: scaleupFadeOut .5s ease-in-out forwards; } body.no-preloader.scaleup.no-page-transition .main-content { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); opacity: 0; } body.no-preloader.scaleup .main-content.show { -webkit-animation: scaleupFadeIn .5s ease-in-out forwards; -moz-animation: scaleupFadeIn .5s ease-in-out forwards; -o-animation: scaleupFadeIn .5s ease-in-out forwards; animation: scaleupFadeIn .5s ease-in-out forwards; } @-webkit-keyframes scaleupFadeIn { from { -webkit-transform: scale(0.98); opacity:0; } to { -webkit-transform: scale(1); opacity:1;} } @keyframes scaleupFadeIn { from { transform: scale(0.98); opacity:0; } to { transform: scale(1); opacity:1;} } @-webkit-keyframes scaleupFadeOut { 0% { -webkit-transform: scale(1);opacity:1; } 100% { -webkit-transform: scale(1.02); opacity:0;} } @keyframes scaleupFadeOut { 0% { transform: scale(1);opacity:1; } 100% { transform: scale(1.02); opacity:0;} } /* fade-up/fade-down */ body.no-preloader.fade-up .main-content { -webkit-animation: fadeupFadeOut .5s ease-in-out forwards; -moz-animation: fadeupFadeOut .5s ease-in-out forwards; -o-animation: fadeupFadeOut .5s ease-in-out forwards; animation: fadeupFadeOut .5s ease-in-out forwards; } body.no-preloader.fade-up.no-page-transition .main-content { -webkit-transform: translateY(120px); -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); transform: translateY(120px); } body.no-preloader.fade-up .main-content.show { -webkit-animation: fadeupFadeIn .5s ease-in-out forwards; -moz-animation: fadeupFadeIn .5s ease-in-out forwards; -o-animation: fadeupFadeIn .5s ease-in-out forwards; animation: fadeupFadeIn .5s ease-in-out forwards; } body.no-preloader.fade-down .main-content { -webkit-animation: fadeupFadeIn .5s ease-in-out forwards; -moz-animation: fadeupFadeIn .5s ease-in-out forwards; -o-animation: fadeupFadeIn .5s ease-in-out forwards; animation: fadeupFadeIn .5s ease-in-out forwards; } body.no-preloader.fade-down.no-page-transition .main-content { -webkit-transform: translateY(-120px); -moz-transform: translateY(-120px); -ms-transform: translateY(-120px); -o-transform: translateY(-120px); transform: translateY(-120px); } body.no-preloader.fade-down .main-content.show { -webkit-animation: fadeupFadeOut .5s ease-in-out forwards; -moz-animation: fadeupFadeOut .5s ease-in-out forwards; -o-animation: fadeupFadeOut .5s ease-in-out forwards; animation: fadeupFadeOut .5s ease-in-out forwards; } @-webkit-keyframes fadeupFadeIn { from { -webkit-transform: translateY(120px); opacity:0; } to { -webkit-transform: translateY(0); opacity:1;} } @keyframes fadeupFadeIn { from { transform: translateY(120px); opacity:0; } to { transform: translateY(0); opacity:1;} } @-webkit-keyframes fadeupFadeOut { 0% { -webkit-transform: translateY(0);opacity:1; } 100% { -webkit-transform: translateY(-120px); opacity:0;} } @keyframes fadeupFadeOut { 0% { transform: translateY(0);opacity:1; } 100% { transform: translateY(-120px); opacity:0;} } /* fade-up-medium/fade-down-medium */ body.no-preloader.fade-up-medium .main-content { -webkit-animation: fadeupFadeOutMedium .5s ease-in-out forwards; -moz-animation: fadeupFadeOutMedium .5s ease-in-out forwards; -o-animation: fadeupFadeOutMedium .5s ease-in-out forwards; animation: fadeupFadeOutMedium .5s ease-in-out forwards; } body.no-preloader.fade-up-medium.no-page-transition .main-content { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } body.no-preloader.fade-up-medium .main-content.show { -webkit-animation: fadeupFadeInMedium .5s ease-in-out forwards; -moz-animation: fadeupFadeInMedium .5s ease-in-out forwards; -o-animation: fadeupFadeInMedium .5s ease-in-out forwards; animation: fadeupFadeInMedium .5s ease-in-out forwards; } body.no-preloader.fade-down-medium .main-content { -webkit-animation: fadeupFadeInMedium .5s ease-in-out forwards; -moz-animation: fadeupFadeInMedium .5s ease-in-out forwards; -o-animation: fadeupFadeInMedium .5s ease-in-out forwards; animation: fadeupFadeInMedium .5s ease-in-out forwards; } body.no-preloader.fade-down-medium.no-page-transition .main-content { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } body.no-preloader.fade-down-medium .main-content.show { -webkit-animation: fadeupFadeOutMedium .5s ease-in-out forwards; -moz-animation: fadeupFadeOutMedium .5s ease-in-out forwards; -o-animation: fadeupFadeOutMedium .5s ease-in-out forwards; animation: fadeupFadeOutMedium .5s ease-in-out forwards; } @-webkit-keyframes fadeupFadeInMedium { from { -webkit-transform: translateY(50px); opacity:0; } to { -webkit-transform: translateY(0); opacity:1;} } @keyframes fadeupFadeInMedium { from { transform: translateY(50px); opacity:0; } to { transform: translateY(0); opacity:1;} } @-webkit-keyframes fadeupFadeOutMedium { 0% { -webkit-transform: translateY(0);opacity:1; } 100% { -webkit-transform: translateY(-50px); opacity:0;} } @keyframes fadeupFadeOutMedium { 0% { transform: translateY(0);opacity:1; } 100% { transform: translateY(-50px); opacity:0;} } /* fade-left/fade-right */ body.no-preloader.fade-left .main-content { -webkit-animation: fadeleftFadeOut .5s ease-in-out forwards; -moz-animation: fadeleftFadeOut .5s ease-in-out forwards; -o-animation: fadeleftFadeOut .5s ease-in-out forwards; animation: fadeleftFadeOut .5s ease-in-out forwards; } body.no-preloader.fade-left.no-page-transition .main-content { -webkit-transform: translateX(120px); -moz-transform: translateX(120px); -ms-transform: translateX(120px); -o-transform: translateX(120px); transform: translateX(120px); } body.no-preloader.fade-left .main-content.show { -webkit-animation: fadeleftFadeIn .5s ease-in-out forwards; -moz-animation: fadeleftFadeIn .5s ease-in-out forwards; -o-animation: fadeleftFadeIn .5s ease-in-out forwards; animation: fadeleftFadeIn .5s ease-in-out forwards; } body.no-preloader.fade-right .main-content { -webkit-animation: fadeleftFadeIn .5s ease-in-out forwards; -moz-animation: fadeleftFadeIn .5s ease-in-out forwards; -o-animation: fadeleftFadeIn .5s ease-in-out forwards; animation: fadeleftFadeIn .5s ease-in-out forwards; } body.no-preloader.fade-right.no-page-transition .main-content { -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); } body.no-preloader.fade-right .main-content.show { -webkit-animation: fadeleftFadeOut .5s ease-in-out forwards; -moz-animation: fadeleftFadeOut .5s ease-in-out forwards; -o-animation: fadeleftFadeOut .5s ease-in-out forwards; animation: fadeleftFadeOut .5s ease-in-out forwards; } @-webkit-keyframes fadeleftFadeIn { from { -webkit-transform: translateX(120px); opacity:0; } to { -webkit-transform: translateX(0); opacity:1;} } @keyframes fadeleftFadeIn { from { transform: translateX(120px); opacity:0; } to { transform: translateX(0); opacity:1;} } @-webkit-keyframes fadeleftFadeOut { 0% { -webkit-transform: translateX(0);opacity:1; } 100% { -webkit-transform: translateX(-120px); opacity:0;} } @keyframes fadeleftFadeOut { 0% { transform: translateX(0);opacity:1; } 100% { transform: translateX(-120px); opacity:0;} } /* fade-up-medium/fade-down-medium */ body.no-preloader.fade-left-medium .main-content { -webkit-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; -moz-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; -o-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; animation: fadeleftFadeOutMedium .5s ease-in-out forwards; } body.no-preloader.fade-left-medium.no-page-transition .main-content { -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px); } body.no-preloader.fade-left-medium .main-content.show { -webkit-animation: fadeleftFadeInMedium .5s ease-in-out forwards; -moz-animation: fadeleftFadeInMedium .5s ease-in-out forwards; -o-animation: fadeleftFadeInMedium .5s ease-in-out forwards; animation: fadeleftFadeInMedium .5s ease-in-out forwards; } body.no-preloader.fade-right-medium .main-content { -webkit-animation: fadeleftFadeInMedium .5s ease-in-out forwards; -moz-animation: fadeleftFadeInMedium .5s ease-in-out forwards; -o-animation: fadeleftFadeInMedium .5s ease-in-out forwards; animation: fadeleftFadeInMedium .5s ease-in-out forwards; } body.no-preloader.fade-right-medium.no-page-transition .main-content { -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } body.no-preloader.fade-right-medium .main-content.show { -webkit-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; -moz-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; -o-animation: fadeleftFadeOutMedium .5s ease-in-out forwards; animation: fadeleftFadeOutMedium .5s ease-in-out forwards; } @-webkit-keyframes fadeleftFadeInMedium { from { -webkit-transform: translateX(50px); opacity:0; } to { -webkit-transform: translateX(0); opacity:1;} } @keyframes fadeleftFadeInMedium { from { transform: translateX(50px); opacity:0; } to { transform: translateX(0); opacity:1;} } @-webkit-keyframes fadeleftFadeOutMedium { 0% { -webkit-transform: translateX(0);opacity:1; } 100% { -webkit-transform: translateX(-50px); opacity:0;} } @keyframes fadeleftFadeOutMedium { 0% { transform: translateX(0);opacity:1; } 100% { transform: translateX(-50px); opacity:0;} } /* use fadeup animations in reverse direction */ body.no-preloader.fade-down .main-content, body.no-preloader.fade-down-medium .main-content, body.no-preloader.fade-right .main-content, body.no-preloader.fade-right-medium .main-content { -webkit-animation-direction: reverse !important; -moz-animation-direction: reverse !important; -o-animation-direction: reverse !important; animation-direction: reverse !important; } /*-----------------------------------------------------------------------------------*/ /* 02. preloader /*-----------------------------------------------------------------------------------*/ #preloader { position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background-color: #efefef; z-index: 99999; opacity: 1; -webkit-transition: opacity .2s ease 0s; -moz-transition: opacity .2s ease 0s; -o-transition: opacity .2s ease 0s; transition: opacity .2s ease 0s; } #preloader.firstload.hideInFirstLoad { display: none !important; } .left_menu_enabled #preloader.simple:not(.firstload) svg.preloader { right: calc( 50% - 140px ); } .left_menu_enabled #preloader.sniper:not(.firstload) .sniperloader { left: calc( 50% + 85px ); } .left_menu_enabled #preloader.circular:not(.firstload) .preloader_circular { left: calc( 50% + 140px ); } .right_menu_enabled #preloader.simple:not(.firstload) svg.preloader { right : calc( 50% + 140px ); } .right_menu_enabled #preloader.sniper:not(.firstload) .sniperloader { left: calc( 50% - 195px ); } .right_menu_enabled #preloader.circular:not(.firstload) .preloader_circular { left: calc( 50% - 140px ); } #preloader.creative , #preloader.firstload.simple , #preloader.firstload.circular , #preloader.firstload.sniper { z-index:100001; } #preloader.hide-preloader { opacity: 0; -webkit-transition: opacity .5s cubic-bezier(0.7,0,0.3,1) 0s; -moz-transition: opacity .5s cubic-bezier(0.7,0,0.3,1) 0s; -o-transition: opacity .5s cubic-bezier(0.7,0,0.3,1) 0s; transition: opacity .5s cubic-bezier(0.7,0,0.3,1) 0s; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #preloader.creative #preloader-simple , #preloader.creative #preloader-sniper , #preloader.creative #preloader-circular { display: none; } #preloader_box { position: fixed; top:calc(50% - 167px); left:calc(50% - 167px); width: 0px; height: 100px; background: #f7f7f7; z-index: 100001; -webkit-animation: preloader_box 1s cubic-bezier(0.23, 1, 0.32, 1) .5s forwards; -moz-animation: preloader_box 1s cubic-bezier(0.23, 1, 0.32, 1) .5s forwards; -o-animation: preloader_box 1s cubic-bezier(0.23, 1, 0.32, 1) .5s forwards; animation: preloader_box 1s cubic-bezier(0.23, 1, 0.32, 1) .5s forwards; } @-webkit-keyframes preloader_box { 0% {width:0px;height: 100px; left:50%; top:calc(50% - 50px);} 75% {width: 330px; height: 100px; left:calc(50% - 165px); top:calc(50% - 50px);} 100% {width: 330px; height: 330px; left:calc(50% - 165px); top:calc(50% - 165px);} } @keyframes preloader_box { 0% {width:0px;height: 100px; left:50%; top:calc(50% - 50px);} 75% {width: 330px; height: 100px; left:calc(50% - 165px); top:calc(50% - 50px);} 100% {width: 330px; height: 330px; left:calc(50% - 165px); top:calc(50% - 165px);} } #preloader_items { height: 306px; width:100%; } .preloader-items-container { position: absolute; overflow: hidden; height: 1px; width:100%; opacity: 0; margin-top:153px; -webkit-animation: preloader_cut_container .4s ease 1.3s forwards; -moz-animation: preloader_cut_container .3s ease 1.3s forwards; -o-animation: preloader_cut_container .4s ease 1.3s forwards; animation: preloader_cut_container .4s ease 1.3s forwards; } @-webkit-keyframes preloader_cut_container { 0% {height: 1px; opacity: 0; margin-top:153px;} 100% {height: 306px; opacity: 1; margin-top:0px;} } @keyframes preloader_cut_container { 0% {height: 1px; opacity: 0; margin-top:153px;} 100% {height: 306px; opacity: 1; margin-top:0px;} } .preloader-text-container { position: absolute; overflow: hidden; height: 300px; width:100%; z-index: 10000; } .preloader-text { font-family: Lato,sans-serif; font-size: 25px; position: relative; font-weight: 400; height: 70px; line-height: 30px; overflow: hidden; margin-top: 0px; padding: 8px 15px; text-align: center; color: #000; letter-spacing: 2px; opacity: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: preloader_show_anim .5s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s forwards; -moz-animation: preloader_show_anim .5s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s forwards; -o-animation: preloader_show_anim .5s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s forwards; animation: preloader_show_anim .5s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s forwards; } .preloader-image { margin: 0 auto; top: 153px; margin-top: -70px; width: 160px; position: absolute; right: 85px; height: 160px; background: none center center no-repeat transparent; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } svg.preloader { position: absolute; left: auto; right: -2px; top: 0; bottom: 0; margin: auto; -webkit-animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 1.3s forwards; -moz-animation: preloader_show_anim 1.5s cubic-bezier(0.86, 0, 0.07, 1) 1.3s forwards; -o-animation: preloader_show_anim 1.5s cubic-bezier(0.86, 0, 0.07, 1) 1.3s forwards; animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 1.3s forwards; opacity:0; } /* Fix bug of preloader border in firefox */ @-moz-document url-prefix() { svg.preloader { right: -2.5px; top: -2.5px; } } @-webkit-keyframes preloader_show_anim { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes preloader_show_anim { 0% {opacity: 0;} 100% {opacity: 1;} } .rect { /* SVG PROPERTY */ fill: none; stroke-width: .5px; stroke: #c7c7c7; stroke-dasharray: 40; stroke-dashoffset: 50%; -webkit-animation: movedash 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; -moz-animation: movedash 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; -ms-animation: movedash 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; animation: movedash 2s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; } @-webkit-keyframes movedash { to { /* SVG PROPERTY */ stroke-dashoffset: 250%; } } @keyframes movedash { to { /* SVG PROPERTY */ stroke-dashoffset: 250%; } } /* simple style */ #preloader.simple { z-index:99997; } #preloader.simple #preloader_box { display: none; } #preloader.simple svg.preloader { right: 50%; margin-right:-25px; } #preloader-simple { position: absolute; left: auto; right: -2px; top: 0; bottom: 0; margin: auto; opacity: 0; -webkit-animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards; -moz-animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards; -o-animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards; animation: preloader_show_anim .5s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards; } #preloader-simple .rect { /* SVG Property */ stroke-width: 6px; stroke : #000; -webkit-animation: movedash 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; -moz-animation: movedash 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; -ms-animation: movedash 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; animation: movedash 1.5s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s infinite; } /* Dark style */ #preloader.dark-style { background-color:#282727 } #preloader.dark-style #preloader_box { background: #2F2E2E } #preloader.dark-style .rect { stroke : #4C4C4C; } #preloader.simple.dark-style .rect { stroke : #eee; } #preloader.dark-style .preloader-text { color : #fff; } /* circular preloader */ #preloader.circular #preloader_box { display: none; } .preloader_circular { -webkit-animation: rotate 2s linear infinite; -moz-animation: rotate 2s linear infinite; -o-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 50px; left: 50%; position: absolute; top: 50%; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); width: 50px; z-index: 4; } .preloader_circular .path { /* SVG Property */ stroke-dasharray: 1, 500; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; -moz-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; -o-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; stroke: #313131; } @-webkit-keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; } } /* sniper preloader */ #preloader.sniper #preloader_box { display: none; } .sniperloader { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; width: 110px; position: relative; text-indent: -9999em; position: absolute; top: 50%; left: calc( 50% - 55px ); } .ball { border-radius: 50%; background: #313131; width: 10px; height: 10px; position: absolute; top: 0; left: 0; -webkit-animation: loading 1.2s linear infinite; -moz-animation: loading 1.2s linear infinite; -o-animation: loading 1.2s linear infinite; animation: loading 1.2s linear infinite; } .ball:nth-of-type(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; animation-delay: 0.4s; } .ball:nth-of-type(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -o-animation-delay: 0.8s; animation-delay: 0.8s; } @-webkit-keyframes loading { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 20% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: translate3d(33px, 0, 0); -moz-transform: translate3d(33px, 0, 0); -ms-transform: translate3d(33px, 0, 0); -o-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 60% { -webkit-transform: translate3d(66px, 0, 0); -moz-transform: translate3d(66px, 0, 0); -ms-transform: translate3d(66px, 0, 0); -o-transform: translate3d(66px, 0, 0); transform: translate3d(66px, 0, 0); } 80% { -webkit-transform: translate3d(99px, 0, 0); -moz-transform: translate3d(99px, 0, 0); -ms-transform: translate3d(99px, 0, 0); -o-transform: translate3d(99px, 0, 0); transform: translate3d(99px, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(99px, 0, 0) scale(0.5); -moz-transform: translate3d(99px, 0, 0) scale(0.5); -ms-transform: translate3d(99px, 0, 0) scale(0.5); -o-transform: translate3d(99px, 0, 0) scale(0.5); transform: translate3d(99px, 0, 0) scale(0.5); opacity: 0; } } @keyframes loading { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 20% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: translate3d(33px, 0, 0); -moz-transform: translate3d(33px, 0, 0); -ms-transform: translate3d(33px, 0, 0); -o-transform: translate3d(33px, 0, 0); transform: translate3d(33px, 0, 0); } 60% { -webkit-transform: translate3d(66px, 0, 0); -moz-transform: translate3d(66px, 0, 0); -ms-transform: translate3d(66px, 0, 0); -o-transform: translate3d(66px, 0, 0); transform: translate3d(66px, 0, 0); } 80% { -webkit-transform: translate3d(99px, 0, 0); -moz-transform: translate3d(99px, 0, 0); -ms-transform: translate3d(99px, 0, 0); -o-transform: translate3d(99px, 0, 0); transform: translate3d(99px, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(99px, 0, 0) scale(0.5); -moz-transform: translate3d(99px, 0, 0) scale(0.5); -ms-transform: translate3d(99px, 0, 0) scale(0.5); -o-transform: translate3d(99px, 0, 0) scale(0.5); transform: translate3d(99px, 0, 0) scale(0.5); opacity: 0; } } /*-----------------------------------------------------------------------------------*/ /* 03. Header & Navigation /*-----------------------------------------------------------------------------------*/ #epHeader { width: 100%; position: fixed; top: 0; z-index: 99998 !important; height: 58px; box-shadow: none; opacity: 1; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transition: opacity .2s ease, visibility .2s ease, top .3s ease; -moz-transition: opacity .2s ease, visibility .2s ease, top .3s ease; -o-transition: opacity .2s ease, visibility .2s ease, top .3s ease; transition: opacity .2s ease, visibility .2s ease, top .3s ease; } #epHeader #headerFirstState, #pxHeader #headerSecondState { position:fixed; width:100%; box-sizing:border-box; } #epHeader.scroll-sticky { opacity:0; visibility: hidden; } #epHeader.scroll-sticky.state2 { opacity:1; visibility: visible; } #epHeader.scroll-sticky.type1.state2 #headerFirstState, #epHeader.scroll-sticky.type2_3.state2 #headerFirstState, #epHeader.scroll-sticky.type4_5_6.state2 #headerFirstState, #epHeader.scroll-sticky.type9.state2 #headerFirstState { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } #epHeader.type1 #epHeader #epHeader.type9.scroll-sticky #headerFirstState, #epHeader.type1.epico-menu #headerFirstState , #epHeader.type9.scroll-sticky #headerSecondState, #epHeader.type4_5_6.scroll-sticky #headerFirstState, #epHeader.type2_3.epico-menu #headerFirstState , #epHeader.type9.epico-menu #headerFirstState, #epHeader.type9.epico-menu #headerSecondState, #epHeader.type1.epico-menu #headerSecondState, #epHeader.type4_5_6.epico-menu #headerSecondState, #epHeader.type2_3.epico-menu #headerSecondState { position:fixed; } #epHeader.type1.epico-menu #headerSecondState, #epHeader.type2_3.epico-menu #headerSecondState, #epHeader.type4_5_6.epico-menu #headerSecondState, #epHeader.type9.epico-menu #headerSecondState { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } #epHeader.type1.epico-menu.state2 #headerSecondState, #epHeader.type9.epico-menu.state2 #headerSecondState, #epHeader.type2_3.epico-menu.state2 #headerSecondState, #epHeader.type4_5_6.epico-menu.state2 #headerSecondState{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /*first state animation */ #epHeader.type1.epico-menu #headerFirstState, #epHeader.type9.epico-menu #headerFirstState, #epHeader.type2_3.epico-menu #headerFirstState, #epHeader.type4_5_6.epico-menu #headerFirstState { -moz-transition: opacity .5s ease-in-out .2s, visibility .5s ease-in-out .2s; -o-transition: opacity .5s ease-in-out .2s, visibility .5s ease-in-out .2s; -webkit-transition: opacity .5s ease-in-out .2s, visibility .5s ease-in-out .2s; transition: opacity .5s ease-in-out .2s, visibility .5s ease-in-out .2s; opacity: 1 !important; visibility: visible; } #epHeader.type1.epico-menu.state2 #headerFirstState, #epHeader.type9.epico-menu.state2 #headerFirstState, #epHeader.type2_3.epico-menu.state2 #headerFirstState, #epHeader.type4_5_6.epico-menu.state2 #headerFirstState { -moz-transition: opacity .25s ease, visibility .25s ease; -o-transition: opacity .25s ease, visibility .25s ease; -webkit-transition: opacity .25s ease, visibility .25s ease; transition: opacity .25s ease, visibility .25s ease; opacity: 0 !important; visibility: hidden; } /* second state animation */ #epHeader.type1.epico-menu #headerSecondState, #epHeader.type2_3.epico-menu #headerSecondState, #epHeader.type4_5_6.epico-menu #headerSecondState, #epHeader.type9.epico-menu #headerSecondState { -moz-transition: transform .1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, opacity .2s linear, visibility .2s linear,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: transform .1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, opacity .2s linear, visibility .2s linear,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: transform .1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, opacity .2s linear, visibility .2s linear,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform .1s cubic-bezier(0.165, 0.84, 0.44, 1) .2s, opacity .2s linear, visibility .2s linear,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); opacity: 0; visibility: hidden; } #epHeader.type1.epico-menu.state2 #headerSecondState, #epHeader.type4_5_6.epico-menu.state2 #headerSecondState, #epHeader.type9.epico-menu.state2 #headerSecondState, #epHeader.type2_3.epico-menu.state2 #headerSecondState { opacity: 1; visibility: visible; -moz-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s, opacity .35s ease-in-out .3s, visibility .35s ease .3s,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s, opacity .35s ease-in-out .3s, visibility .35s ease .3s,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s, opacity .35s ease-in-out .3s, visibility .35s ease .3s,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .3s, opacity .35s ease-in-out .3s, visibility .35s ease .3s,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); } #menuBgColor, .menuBgColor { position: absolute; height: 57px; top: 0; left: 0; width: 100%; z-index: -1; -moz-opacity: 1; opacity: 1; background-color: #fff; -moz-transition: background-color .4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: background-color .4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: background-color .4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: background-color .4s cubic-bezier(0.165, 0.84, 0.44, 1); } header .logo { float:left; padding-top:2px; padding-bottom:2px; } header.type2_3 .logo { margin: 0 auto; width: 100%; text-align: center; border-bottom:1px solid rgba(230,230,230,0.4); padding: 0; } header.type2_3 .logo a { display: table; min-height: 80px; } header.type2_3.type2 .logo a { width: auto; margin: 0 auto; } header.type2_3 .logo a img { margin:0; } header.type9 .logo { margin: 0 auto; float:none; display:table; } header.type2_3 #headerSecondState .logo { width: auto; margin: initial; border-bottom: none; } header.type3 #headerSecondState .logo { margin-right:15px; } header.type5 .logo { position:absolute; } header .logo img { width: auto; display: block; max-height:53px; } header.type2 .logo img { margin: 0 auto; } header.type2_3 .logo img { max-height:79px; } header.type3 .logo img{ display:initial; } header.type2_3 #headerSecondState .logo img { margin: initial; max-height: 53px; } header.type4_5_6 .logo img { max-height:82px; } header.type9 .logo img { max-height:80px; } header.type9 #headerSecondState .logo img , header.type4_5_6 #headerSecondState .logo img { margin: initial; max-height: 53px; } header .container { position:relative; } header.type4_5_6 #headerFirstState .container { max-height: 85px; height:85px; } header.type4_5_6 #headerSecondState .container { height:59px; } header.type9 #headerFirstState .container { height:85px; } header.type2_3 .container, header.type9 .container { position:relative; } /* Epico menu ( 2 state menu) */ #epHeader.epico-menu .secoundLogo { display:block; } #epHeader.epico-menu #headerFirstState , #epHeader.epico-menu #headerSecondState { position:absolute; top:0; width:100%; left:0; height:58px !important; box-sizing:border-box; } #epHeader.fixed-menu #headerFirstState, #epHeader.scroll-sticky #headerFirstState { box-sizing: border-box; } #epHeader.fixed-menu.type1 #headerFirstState, #epHeader.scroll-sticky.type1 #headerFirstState { height: 58px !important; } #epHeader.epico-menu #headerSecondState { z-index:4; top:0px; opacity:1; /* Display in all Pages expect container page */ display:block; -moz-transition: top ease 300ms,opacity ease 300ms,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: top ease 300ms,opacity ease 300ms,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: top ease 300ms,opacity ease 300ms,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top ease 300ms,opacity ease 300ms,border-bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1); } body:not(.page-template-main-page) #epHeader.epico-menu #headerFirstState { opacity:1 !important; display:block !important; } .page-template-main #epHeader.type1.epico-menu #headerSecondState { top:25px; } #epHeader.epico-menu #headerFirstState { z-index: 5; top:0; display:none; /* hide in all Pages expect container page */ -moz-transition: top ease 300ms,opacity ease 300ms; -o-transition: top ease 300ms,opacity ease 300ms; -webkit-transition: top ease 300ms,opacity ease 300ms; transition: top ease 300ms,opacity ease 300ms; } #epHeader.type2_3 #headerFirstState{ height:125px !important; } #epHeader.type9 #headerFirstState, #epHeader.type4_5_6 #headerFirstState{ height:85px !important; } .page-template-main-page #epHeader.epico-menu #headerFirstState { display:block; } /* Headert Type - 4 - 5 - 6 */ #epHeader.type4_5_6 { height: 85px; } #epHeader.type9{ height: 85px; } #epHeader.type4_5_6 #menuBgColor, #epHeader.type4_5_6 .menuBgColor , #epHeader.type9 #menuBgColor , #epHeader.type9 .menuBgColor { height: 84px; } #epHeader.type9 #headerSecondState #menuBgColor, #epHeader.type4_5_6 #headerSecondState #menuBgColor, #epHeader.type4_5_6 #headerSecondState .menuBgColor { height: 57px; } header#epHeader.fullwidthMenu .headerWrap #headerFirstState , header#epHeader.fullwidthMenu .headerWrap #headerSecondState { padding:0 20px; } header .widget.widget_woocommerce-dropdown-cart { border:1px solid #545454; box-sizing:border-box; } header.type9 .widget.widget_woocommerce-dropdown-cart , header.type1 .widget.widget_woocommerce-dropdown-cart , header.type2_3 .widget.widget_woocommerce-dropdown-cart , header.type4_5_6 .widget.widget_woocommerce-dropdown-cart { width:44px; height:44px; background-color:#1e1e1e; } header.type2_3 .container .widget.widget_woocommerce-dropdown-cart { position: absolute; right: 0; } header.type2_3.hastogglesidebar .container .widget.widget_woocommerce-dropdown-cart{ right: 43px; } #epHeader.type9 #headerSecondState .widget.widget_woocommerce-dropdown-cart, #epHeader.type4_5_6 #headerSecondState .widget.widget_woocommerce-dropdown-cart, #epHeader.type2_3 #headerSecondState .widget.widget_woocommerce-dropdown-cart { position:relative; top: 1px; margin: 0; height: 56px; width: 56px; right: 0 !important; } #epHeader.fullwidthMenu.type4_5_6 #headerSecondState .widget.widget_woocommerce-dropdown-cart, #epHeader.fullwidthMenu.type2_3 #headerSecondState .widget.widget_woocommerce-dropdown-cart { right: -20px !important; } #epHeader.hastogglesidebar.type9 #headerSecondState .widget.widget_woocommerce-dropdown-cart, #epHeader.hastogglesidebar.type4_5_6 #headerSecondState .widget.widget_woocommerce-dropdown-cart, #epHeader.hastogglesidebar.type2_3 #headerSecondState .widget.widget_woocommerce-dropdown-cart { position:relative; top: 0px; margin: 0; height: 57px; width: 57px; right: 37px !important; border-bottom:none !important; } #epHeader.hastogglesidebar.type1 #headerSecondState .container .widget.widget_woocommerce-dropdown-cart, #epHeader.hastogglesidebar.type9 #headerSecondState .container .widget.widget_woocommerce-dropdown-cart, #epHeader.hastogglesidebar.type4_5_6 #headerSecondState .container .widget.widget_woocommerce-dropdown-cart, #epHeader.hastogglesidebar.type2_3 #headerSecondState .container .widget.widget_woocommerce-dropdown-cart { right: 57px !important; } #epHeader.hastogglesidebar.type9 #headerSecondState .widget.widget_woocommerce-dropdown-cart { position: absolute; right: 57px !important; } #epHeader.type9 #headerSecondState .widget.widget_woocommerce-dropdown-cart{ position:absolute; right: 0 !important; } header.type9 #headerSecondState .widget.widget_woocommerce-dropdown-cart .header_cart, header.type4_5_6 #headerSecondState .widget.widget_woocommerce-dropdown-cart .header_cart, header.type2_3 #headerSecondState .widget.widget_woocommerce-dropdown-cart .header_cart { width: 35px; height: 35px; } header.type9 .widget.widget_woocommerce-dropdown-cart, header.fullwidthMenu.type1 .widget.widget_woocommerce-dropdown-cart, header.fullwidthMenu.type2_3 .widget.widget_woocommerce-dropdown-cart, header.fullwidthMenu.type4_5_6 .widget.widget_woocommerce-dropdown-cart { position: absolute; right: 20px; } header.hastogglesidebar.type9 .widget.widget_woocommerce-dropdown-cart, header.hastogglesidebar.fullwidthMenu.type1 .widget.widget_woocommerce-dropdown-cart, header.hastogglesidebar.fullwidthMenu.type2_3 .widget.widget_woocommerce-dropdown-cart, header.hastogglesidebar.fullwidthMenu.type4_5_6 .widget.widget_woocommerce-dropdown-cart { position: absolute; right: 64px; } header.type9 .widget.widget_woocommerce-dropdown-cart{ top:20px; } header.type2_3 .widget.widget_woocommerce-dropdown-cart { margin:34px 0; top: 3px; } header.type4_5_6 .widget.widget_woocommerce-dropdown-cart { margin:21px 0 20px; } header.type4_5_6.hastogglesidebar .container .widget.widget_woocommerce-dropdown-cart{ right:43px; } header.type4_5_6.type6 .widget.widget_woocommerce-dropdown-cart { right:0; position:relative; } header.type1 .widget.widget_woocommerce-dropdown-cart { top: 0px; margin: 0; height: 56px; height: 57px; width: 57px; right: 0 !important; border-bottom:none !important; } header.type1.hastogglesidebar .widget.widget_woocommerce-dropdown-cart{ right: 57px !important; } header.fullwidthMenu.type1.hastogglesidebar #headerSecondState .widget.widget_woocommerce-dropdown-cart{ right: 57px !important; position:absolute; } header.type1 #headerSecondState .widget.widget_woocommerce-dropdown-cart { top: 0px; margin: 0; height: 57px; width: 57px; right: 0 !important; } header.type2_3 #headerFirstState .container,#epHeader.type2_3 #menuBgColor, #epHeader.type2_3 .menuBgColor { height: 124px; } header.type2_3 #headerSecondState .container,#epHeader.type2_3 #headerSecondState #menuBgColor, #epHeader.type2_3 #headerSecondState .menuBgColor { height: 57px; } header.type1 .widget.widget_woocommerce-dropdown-cart .header_cart { width: 36px; height: 36px; } header .widget.widget_woocommerce-dropdown-cart .cartContentsCount { position: absolute; top: 0px; right: 0px; background-color:#073B87; height: 14px; min-width: 14px; line-height: 14px; text-align: center; font-size: 10px; font-weight: 400; color: #fff; z-index:1; font-family:Lato,sans-serif; pointer-events: none; } header .widget.widget_woocommerce-dropdown-cart .icon { font-size: 22px; position: absolute; line-height: 52px; text-align: center; display: block; width: 100%; height: 100%; color: #fff; pointer-events: none; } header .widget.widget_woocommerce-dropdown-cart.light .icon { color:#000; } /* Navigation */ header .navigation { float:right; font-weight: 300; display: table; height: 100%; } header.type3 .navigation , header.type2 .navigation{ height:auto; } header.type4_5_6.type4 .navigation { float:left; margin-left:25px; } header.type4_5_6.type5 .navigation { float:none; display:table; margin:0 auto; } header.type9 .navigation { position:absolute; padding:12px 15px 7px 0; left:0; } header.type4_5_6 .navigation { padding:12px 15px 1px; } header.type6.hastogglesidebar .navigation { margin-right:60px; } header.type6.hastogglesidebar.hasDropDownCart .navigation { margin-right: 60px; } header.type6.hastogglesidebar .search-button + .navigation { margin-right:100px; } header.type6.hastogglesidebar.hasDropDownCart .search-button + .navigation { margin-right: 80px; } header.type6.fullwidthMenu.hastogglesidebar.hasDropDownCart .navigation { margin-right: 100px; } header.type6.hastogglesidebar.hasDropDownCart #headerSecondState .navigation { margin-right: 0; } header.type6.hastogglesidebar .container .navigation, header.type6.hasDropDownCart .container .navigation { padding:12px 15px 1px 0; } header.type6.hastogglesidebar #headerSecondState .navigation { padding:1px 55px 1px; } header.type9 #headerSecondState .navigation, header.type4_5_6 #headerSecondState .navigation { padding: 1px 0 1px } header.type2 .navigation { float: none; margin: 0 auto; } header.type2 #headerSecondState .navigation { float:right; margin:initial; } header.type2_3 #headerSecondState .navigation{ margin:0 auto; float:none; padding: 5px 0 5px; } header.type3 .navigation { float: left; } header.type3 #headerSecondState .navigation { margin-left: 20px; } header.type1 .navigation { margin-right:9px; } header.type1.hastogglesidebar .navigation { margin-right:70px; } header.type1.fullwidthMenu .navigation{ margin-right:65px; } header.type1.fullwidthMenu.no-search .navigation{ margin-right:0; } header.type1.fullwidthMenu.hastogglesidebar .navigation , header.type1.fullwidthMenu.hasDropDownCart .navigation, header.type1.fullwidthMenu.hastogglesidebar .navigation , header.type1.fullwidthMenu.hasDropDownCart .navigation { margin-right:109px; } header.type1.fullwidthMenu.hastogglesidebar.hasDropDownCart .navigation{ margin-right:166px; } header .navigation ul { padding:0; list-style: none; } header .navigation li { float:left; position:relative } header .navigation li a { color:#000; display:block; padding:5px 5px; margin:0 8px; text-decoration:none } header .navigation > ul > li{ font-size:16px; padding-left: 15px; padding-right: 10px; -moz-transition: background-color 400ms ease, border 200ms ease-out; -o-transition: background-color 400ms ease, border 200ms ease-out; -webkit-transition: background-color 400ms ease, border 200ms ease-out; transition: background-color 400ms ease, border 200ms ease-out; } header.fillhover .navigation > ul > li { margin-left: 12px; margin-right: 12px; padding-left: 2px; padding-right: 2px; } header.borderhover .navigation > ul > li { padding-left:9px; padding-right:9px; } header.borderhover .navigation > ul > li:hover ,header.borderhover .navigation > ul > li.active ,header.borderhover .navigation:hover > ul > li:hover { -moz-transition: border-color 300ms linear; -o-transition: border-color 300ms linear; -webkit-transition: border-color 300ms linear; transition: border-color 300ms linear; } header.borderhover .navigation > ul > li > a { -moz-transition: color 150ms linear; -o-transition: color 150ms linear; -webkit-transition: color 150ms linear; transition: color 150ms linear; } header.borderhover .navigation > ul > li > a:before { content:""; position:absolute; bottom:0; left:0; width: 100%; height: 0; border-radius:2px; background-color: #000; -moz-transition: height .3s ease, opacity .3s ease, background-color .3s ease; -o-transition: height .3s ease, opacity .3s ease, background-color .3s ease; -webkit-transition: height .3s ease, opacity .3s ease, background-color .3s ease; transition: height .3s ease, opacity .3s ease, background-color .3s ease; z-index:-1; opacity:0; } header.borderhover .navigation > ul > li:hover > a:before, header.borderhover .navigation > ul > li.active > a:before, header.borderhover .navigation > ul > li.current_page_item > a:before, header.borderhover .navigation > ul > li.current-menu-ancestor > a:before { height: 100%; opacity:1; } header.underlineHover .navigation ul > li hr { height: 1px; opacity: 0; top: 0; left: 0; position: absolute; width: 100%; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); background-color: #1e1e1e; display: block; -webkit-transition: height .3s,opacity .3s,-webkit-transform .3s; -moz-transition: height .3s,opacity .3s,transform .3s; -o-transition: height .3s,opacity .3s,transform .3s; transition: height .3s,opacity .3s,transform .3s; } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:before, header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:after { content: ""; position: absolute; right: 20px; width: 4px; background: #000; height: 1px; margin-top: -2px; top: 50%; -webkit-transition: -webkit-transform .2s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: -moz-transform .2s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform .2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform .2s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: rotate(45deg) translate3d(0,0,0); -moz-transform: rotate(45deg) translate3d(0,0,0); -ms-transform: rotate(45deg) translate3d(0,0,0); -o-transform: rotate(45deg) translate3d(0,0,0); transform: rotate(45deg) translate3d(0,0,0); } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:first-child:before, header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:first-child:after { margin-top:5px; } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:last-child:before, header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:last-child:after { margin-top:-11px; } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children:after { -webkit-transform: rotate(-45deg) translate3d(-2px,2px,0); -moz-transform: rotate(-45deg) translate3d(-2px,2px,0); -ms-transform: rotate(-45deg) translate3d(-2px,2px,0); -o-transform: rotate(-45deg) translate3d(-2px,2px,0); transform: rotate(-45deg) translate3d(-2px,2px,0); } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children.hover:before { -webkit-transform: rotate(135deg) translate3d(-2px,-2px,0); -moz-transform: rotate(135deg) translate3d(-2px,-2px,0); -ms-transform: rotate(135deg) translate3d(-2px,-2px,0); -o-transform: rotate(135deg) translate3d(-2px,-2px,0); transform: rotate(135deg) translate3d(-2px,-2px,0); } header .navigation > ul > li:not(.mega-menu-parent) li.menu-item-has-children.hover:after { -webkit-transform: rotate(45deg) translate3d(0,0,0); -moz-transform: rotate(45deg) translate3d(0,0,0); -ms-transform: rotate(45deg) translate3d(0,0,0); -o-transform: rotate(45deg) translate3d(0,0,0); transform: rotate(45deg) translate3d(0,0,0); } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a span.icon, header .navigation > ul > li ul.sub-menu li:hover > a > span.icon, header .navigation > ul > li ul.sub-menu li > a > span.icon, header .navigation > ul > li > a > span.icon { font-size: 14px; line-height: 25px !important; display: inline-block; width: 24px; text-align: center; padding-right: 8px; vertical-align: middle; float:left; opacity:.8; } header .navigation > ul > li > a > span.icon { padding-right: 5px; opacity: 1; font-size: 15px; } header.underlineHover .navigation ul > li.current-menu-ancestor hr, header.underlineHover .navigation ul > li:hover hr, header.underlineHover .navigation ul > li.active hr, header.underlineHover .navigation ul > li.current_page_item hr { height: 2px; opacity: 1; -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); -moz-transform: translateY(-7px); -o-transform: translateY(-7px); transform: translateY(-7px); } header.underlineHover .navigation > ul > li > a { -o-transition: color .5s ease; -webkit-transition: color .5s ease; -moz-transition: color .5s ease; transition: color .5s ease; } header.underlineHover .navigation > ul > li.current-menu-ancestor > a, header.underlineHover .navigation > ul > li:hover > a, header.underlineHover .navigation > ul > li.active > a, header.underlineHover .navigation > ul > li.current_page_item > a { color:#1e1e1e; } /* header simple fadein hover */ header.fadeHover .navigation > ul > li .menu_title { -moz-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; -webkit-transition: opacity .25s ease-out; transition: opacity .25s ease-out; opacity: 1; } header.fadeHover .navigation > ul > li.current-menu-item > a > .menu_title_wrap > .menu_title, header.fadeHover .navigation > ul > li.current-menu-ancestor > a > .menu_title_wrap > .menu_title, header.fadeHover .navigation > ul > li.active > a > .menu_title_wrap > .menu_title, header.fadeHover .navigation > ul > li:hover > a > .menu_title_wrap > .menu_title { opacity: .6; } header .navigation > ul > li > a{ position: relative; z-index: 10; line-height: 27px; border-bottom:1px solid transparent; font-size:12px; font-family: 'Poppins', sans-serif; font-weight:600; padding:0; margin:15px 0; -moz-transition: border 300ms ease 0s , color 300ms ease 0s; -o-transition: border 300ms ease 0s , color 300ms ease 0s; -webkit-transition: border 300ms ease 0s , color 300ms ease 0s; transition: border 300ms ease 0s , color 300ms ease 0s; } header.underlineHover.type9 #headerFirstState .navigation > ul > li > a, header.fadeHover.type9 #headerFirstState .navigation > ul > li > a, header.borderhover.type9 #headerFirstState .navigation > ul > li > a, header.underlineHover.type4_5_6 .navigation > ul > li > a, header.fadeHover.type4_5_6 .navigation > ul > li > a, header.borderhover.type4_5_6 .navigation > ul > li > a { margin: 17px 0 27px; } header.borderhover .navigation > ul > li > a { padding: 0 8px; } header.type2_3 .navigation > ul > li > a { margin: 10px 0 7px; } header.borderhover.type2_3 .navigation > ul > li > a{ margin: 8px 0; } header.type2_3 #headerSecondState .navigation > ul > li > a{ margin: 8px 0 17px; } header.fillhover .navigation > ul > li ul .spanHover { display:none; } header.fillhover .navigation > ul > li > a { padding-top:15px; padding-bottom:15px; margin:0 4px; } header.type2_3.fillhover .navigation > ul > li > a{ padding-top:10px; padding-bottom: 7px; } header.type4_5_6.fillhover .navigation > ul > li > a{ padding-top:28px; } header.fillhover.type4_5_6 #headerSecondState .navigation > ul > li > a, header.fillhover.type9 #headerSecondState .navigation > ul > li > a { padding-top:14px; } header .navigation > ul > li > a > span , .navigation-mobile a span { text-transform:capitalize !important; letter-spacing: 0.05em; } header .navigation > ul > li .spanHover { height: 0; position: absolute; top: 16px; right: 0; background-color: #f83333; width: 100%; overflow: hidden; opacity: 0; -moz-transition: height 200ms ease-in-out, opacity ease-in-out 200ms; -o-transition: height 200ms ease-in-out, opacity ease-in-out 200ms; -webkit-transition: height 200ms ease-in-out, opacity ease-in-out 200ms; transition: height 200ms ease-in-out, opacity ease-in-out 200ms; } header.type2_3 .navigation > ul > li .spanHover , header.type1 .navigation > ul > li .spanHover { top:0px; } header.fillhover .navigation > ul > li.current-menu-ancestor .spanHover, header.fillhover .navigation > ul > li:hover .spanHover , header.fillhover .navigation li.active .spanHover , header.fillhover .navigation > ul > li.current_page_item .spanHover{ height:62px; opacity:1; -moz-transition:height 300ms ease-in-out , opacity 300ms ease-in-out, background-color .3s ease; -o-transition:height 300ms ease-in-out , opacity 300ms ease-in-out, background-color .3s ease; -webkit-transition:height 300ms ease-in-out , opacity 300ms ease-in-out, background-color .3s ease; transition:height 300ms ease-in-out , opacity 300ms ease-in-out, background-color .3s ease; } header.fillhover .navigation > ul > li .menu_title { -moz-transition: color 50ms ease-in-out; -o-transition: color 50ms ease-in-out; -webkit-transition: color 50ms ease-in-out; transition: color 50ms ease-in-out; } header.fillhover .navigation > ul > li.current-menu-ancestor .menu_title, header.fillhover .navigation > ul > li:hover .menu_title, header.fillhover .navigation li.active .menu_title, header.fillhover .navigation > ul > li.current_page_item .menu_title { -moz-transition: color 200ms ease-in-out 50ms; -o-transition: color 200ms ease-in-out 50ms; -webkit-transition: color 200ms ease-in-out 50ms; transition: color 200ms ease-in-out 50ms; } header.fillhover.type9 .navigation > ul > li.current-menu-ancestor .spanHover, header.fillhover.type9 .navigation > ul > li:hover .spanHover, header.fillhover.type9 .navigation li.active .spanHover, header.fillhover.type9 .navigation > ul > li.current_page_item .spanHover { height:57px; } header.type9 #headerFirstState .navigation > ul > li .spanHover { top: -16px; } header.type4_5_6 #headerFirstState .navigation > ul > li .spanHover { top: -15px; } header.type9.fillhover #headerFirstState .navigation > ul > li.current-menu-ancestor .spanHover, header.type9.fillhover #headerFirstState .navigation > ul > li:hover .spanHover , header.type9.fillhover #headerFirstState .navigation li.active .spanHover , header.type9.fillhover #headerFirstState .navigation > ul > li.current_page_item .spanHover { height:89px; } header.type4_5_6.fillhover #headerFirstState .navigation > ul > li.current-menu-ancestor .spanHover, header.type4_5_6.fillhover #headerFirstState .navigation > ul > li:hover .spanHover, header.type4_5_6.fillhover #headerFirstState .navigation li.active .spanHover, header.type4_5_6.fillhover #headerFirstState .navigation > ul > li.current_page_item .spanHover { height: 88px; } header.type9 #headerSecondState .navigation > ul > li .spanHover, header.type4_5_6 #headerSecondState .navigation > ul > li .spanHover { top: -1px; } header.type4_5_6.fillhover #headerSecondState .navigation > ul > li.current-menu-ancestor .spanHover, header.type4_5_6.fillhover #headerSecondState .navigation > ul > li:hover .spanHover , header.type4_5_6.fillhover #headerSecondState .navigation li.active .spanHover , header.type4_5_6.fillhover #headerSecondState .navigation > ul > li.current_page_item .spanHover { height: 58px; } header.type1.fillhover .navigation > ul > li.current-menu-ancestor .spanHover, header.type1.fillhover .navigation > ul > li:hover .spanHover , header.type1.fillhover .navigation li.active .spanHover , header.type1.fillhover .navigation > ul > li.current_page_item .spanHover { height:57px; } header.type2_3.fillhover #headerFirstState .navigation > ul > li.current-menu-ancestor .spanHover, header.type2_3.fillhover #headerFirstState .navigation > ul > li:hover .spanHover, header.type2_3.fillhover #headerFirstState .navigation li.active .spanHover, header.type2_3.fillhover #headerFirstState .navigation > ul > li.current_page_item .spanHover{ height:44px; } header.type2_3 #headerSecondState .navigation > ul > li .spanHover { top: -5px; } header.type2_3.fillhover #headerSecondState .navigation > ul > li.current-menu-ancestor .spanHover header.type2_3.fillhover #headerSecondState .navigation > ul > li:hover .spanHover, header.type2_3.fillhover #headerSecondState .navigation li.active .spanHover , header.type2_3.fillhover #headerSecondState .navigation > ul > li.current_page_item .spanHover{ height:58px; } header .navigation li ul { font-size: 14px; left: 0; top: 0; position: absolute; z-index: 100; width: 220px; background-color: #1b1b1b; visibility: hidden; opacity: 0; max-height: 0; -webkit-transition: opacity .25s cubic-bezier(0.215, 0.61, 0.355, 1),visibility .25s cubic-bezier(0.215, 0.61, 0.355, 1),max-height .001s linear .3s; -moz-transition: opacity .25s cubic-bezier(0.215, 0.61, 0.355, 1),visibility .25s cubic-bezier(0.215, 0.61, 0.355, 1),max-height .001s linear .3s; -o-transition: opacity .25s cubic-bezier(0.215, 0.61, 0.355, 1),visibility .25s cubic-bezier(0.215, 0.61, 0.355, 1),max-height .001s linear .3s; transition: opacity .25s cubic-bezier(0.215, 0.61, 0.355, 1),visibility .25s cubic-bezier(0.215, 0.61, 0.355, 1),max-height .001s linear .3s; } header .navigation li.hover > ul { opacity: 1; visibility: visible; max-height: 1000px; -webkit-transition: opacity .1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility .1s cubic-bezier(0.215, 0.61, 0.355, 1), max-height .001s linear; -moz-transition: opacity .1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility .1s cubic-bezier(0.215, 0.61, 0.355, 1), max-height .001s linear; -o-transition: opacity .1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility .1s cubic-bezier(0.215, 0.61, 0.355, 1), max-height .001s linear; transition: opacity .1s cubic-bezier(0.215, 0.61, 0.355, 1), visibility .1s cubic-bezier(0.215, 0.61, 0.355, 1), max-height .001s linear; } header .navigation > ul > li:not(.mega-menu-parent) ul li { background: transparent !important; } header .navigation > ul > li:not(.mega-menu-parent) ul > li:first-child { padding-top:17px; } header .navigation > ul > li:not(.mega-menu-parent) ul > li:last-child { padding-bottom:17px; } header .navigation > ul > li:not(.mega-menu-parent) > ul ul { margin-top:6px; } header .navigation > ul > li:not(.mega-menu-parent) > ul > li:first-child > ul { margin-top:14px; } header .navigation li:hover > ul{ display:block } header .navigation li li { display:block; float:none; margin:0; min-width:143px; } header .navigation li li > a { color:#a0a0a0; line-height:28px; margin:0; padding:0 29px; letter-spacing:0px; font-size:13px; font-weight: 500; } header .navigation li li a { background: none !important; opacity: 1; -webkit-transition: opacity .3s ease !important; -moz-transition: opacity .3s ease !important; -o-transition: opacity .3s ease !important; transition: opacity .3s ease !important; } header .navigation li li:hover > a { opacity: 1; } header.submenu_underlined .navigation li li > a span.menu_title { position:relative; padding-bottom: 7px; } header.submenu_underlined .navigation li li:not(.menu-item-has-children) > a span.menu_title { padding-bottom:0; } header.submenu_underlined .navigation ul li li > a span:not(.icon) span.menu_title { display:inline-block; } header.submenu_underlined .navigation ul li li > a span:not(.icon) span.menu_title:before { content: ""; position: absolute; width:100%; left:0; height: 1px; opacity: 0; bottom: -4px; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-7px); background-color: #1e1e1e; display: block; -webkit-transition: opacity .3s ease,-webkit-transform .3s ease; -moz-transition: opacity .3s ease,-moz-transform .3s ease; -o-transition: opacity .3s ease,-o-transform .3s ease; transition: opacity .3s ease,transform .3s ease; } header.submenu_underlined .navigation ul li li > a span.badge:not(.icon):before, header.submenu_underlined .navigation > ul > li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a span:not(.icon):before { display:none; } header.submenu_underlined .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type > a:before { width: calc(100% - 7px); left:0px; } header.submenu_underlined .navigation ul li li.active > a span:not(.icon) span.menu_title:before, header.submenu_underlined .navigation ul li li:hover > a span:not(.icon) span.menu_title:before { opacity: 1; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); -moz-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } header .navigation li li ul { padding-top:0; left:100%; top:0; margin-left:1px; } header .navigation > ul > li.left-submenus li ul { left:auto; right:100%; margin-right:1px; } header .sf-sub-indicator { display:none } /* Menu Button */ .menu-button { position: fixed; top: 0; right:0; z-index: 1000; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; border: none; text-indent: 2.5em; font-size: 1.5em; color: transparent; background: transparent; } .menu-button::before { position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); content: ''; } .menu-button:hover { opacity: 0.6; } /* Close Button */ .close-button { width: 16px; height: 16px; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; background: transparent; color: transparent; } .close-button::before, .close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #888; } .close-button::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .close-button::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /* Menu */ .menu-list a, .close-button { opacity: 0; -webkit-transform: translate3d(0,-200px,0); -moz-transform: translate3d(0,-200px,0); -ms-transform: translate3d(0,-200px,0); -o-transform: translate3d(0,-200px,0); transform: translate3d(0,-200px,0); -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; -moz-transition: opacity 0.4s, transform 0.4s; -o-transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .menu-list li { display:block; float:left; } .menu-list a { display: inline-block; padding: 0.8em; } .menu-list a i { vertical-align: middle; } .menu-list a span { font-family:Poppins, sans-serif; display: inline-block; margin-left: 10px; font-size: 0.75em; vertical-align: middle; font-weight: 600; } /* Mobile Navigation */ .responsive-wishlist { z-index: 10; width: 100%; height: 60px; top: 5px; right:75px; border-top: 1px solid #333; padding-top: 12px } .hastogglesidebar .responsive-wishlist { right: 111px; } .responsive-wishlist.enable_cart_widget { right: 135px; } .hastogglesidebar .responsive-wishlist.enable_cart_widget { right: 176px; } .responsive-wishlist:before, .responsive-wishlist.enable_cart_widget:after { content: ""; position: absolute; width: 1px; height: 70px; top: -5px; left: -2px; background: #eee; } .responsive-wishlist .widget.widget_woocommerce-wishlist { width: 100%; height: 100%; } .responsive-wishlist .widget.widget_woocommerce-wishlist a:before { /*font-size: 17px; top: 11px; left: 25px;*/ display:none; } .responsive-wishlist .widget.widget_woocommerce-wishlist a:hover:before { top:-38px; } .responsive-wishlist .widget.widget_woocommerce-wishlist a:after { font-size:17px; left:25px; } .responsive-wishlist .widget.widget_woocommerce-wishlist a:hover:after { top:10px; } .responsive-wishlist .widget.widget_woocommerce-wishlist a span.wishlist_items_number { font-size:11px; font-weight: 400; line-height: 16px; height: 16px; width: 16px; color: #fff; margin-top: 20px; position: absolute; left: calc(100% - 16px); } .responsive-wishlist .wishlist_text { line-height: 50px; text-align: left; width: 100%; display: block; font-size: 12px; font-weight: 600; font-size: 13px; text-transform: uppercase !important; } header .navigation-button { display: block; width: 60px; height: 60px; position: absolute; top: 5px; right: 5px; z-index: 10; } header .navigation-button:before { content: ""; position: absolute; width: 1px; height: 70px; top:-5px; left:-5px; background: #eee; } header .navigation-button span { background: #222; width: 25px; height: 2px; position: absolute; top: 28px; left: 18px; } header .navigation-button span:after, header .navigation-button span:before { content: ""; background: #222; width: 25px; height: 2px; position: absolute; top: -5px; left: 0px; } header .navigation-button span:after { top: 5px; width: 16px; } #mobile-menu-items { display:none; -webkit-overflow-scrolling: touch; overflow-y: scroll; } #mobile-menu-overlay { position: fixed; top: 70px; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); opacity: 0; visibility: hidden; z-index: 8; -webkit-transition: visibility .5s ease, opacity .5s ease; -moz-transition: visibility .5s ease, opacity .5s ease; -o-transition: visibility .5s ease, opacity .5s ease; transition: visibility .5s ease, opacity .5s ease; } #mobile-menu-overlay.active { opacity: 1; visibility: visible; } .navigation-mobile { background-color: #1e1e20 !important; position:fixed; width:100%; overflow: hidden; padding: 15px 30px 0; z-index: 10; top:71px; } .navigation-mobile.light { background-color: #FFF !important; } .navigation-mobile ul{ list-style: none; margin:0; } .navigation-mobile li a + .toggle_submneu { height: 45px; width:100%; position: absolute; right: 0px; top: 0; cursor:pointer; z-index: 3; } .navigation-mobile li a[href] + .toggle_submneu { width:45px; } .navigation-mobile li .toggle_submneu .toggle_icon { position: absolute; width: 7px; height: 7px; top: 18px; right: 20px; border-top: 1px solid #eee; border-right: 1px solid #eee; opacity: .7; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -o-transition: transform .3s ease-in-out; transition: transform .3s ease-in-out; } .navigation-mobile.light li .toggle_submneu .toggle_icon { border-top: 1px solid #2d2c2d; border-right: 1px solid #2d2c2d; } .navigation-mobile li.submenu-open > .toggle_submneu .toggle_icon { opacity: 1; } .navigation-mobile li .toggle_submneu.open .toggle_icon { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .navigation-mobile li { font-size: 12px; font-weight: 400; line-height: 45px; border-bottom:1px solid #333; position: relative; } .navigation-mobile.light li { border-bottom:1px solid #eee; } #mobile-menu-items.navigation-mobile.light .mobile-menu-login-link, .navigation-mobile.light .responsive-wishlist{ border-top:1px solid #eee; } .navigation-mobile li:last-child { border-bottom:none; } .navigation-mobile li li:last-child, .navigation-mobile li li li:last-child { margin-bottom:20px; } .navigation-mobile ul ul{ padding-left: 15px; display: none; } .navigation-mobile ul ul li{ border-bottom:none; } .navigation-mobile > ul{ padding:0; margin: 20px 0; } .navigation-mobile a{ display: block; color: #fff; width:100%; height:100%; text-decoration: none; font-size:12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .navigation-mobile.light a{ color: #333; } .navigation-mobile a:hover{ color:#073B87; } #mobile-menu-items , .mobile-menu-container { width:100%; box-sizing:border-box; } #mobile-search-form { margin:30px 0px 20px; position: relative; } .navigation-mobile.light #mobile-search-form .search-form { background: #f4f4f4; } #mobile-search-form .search-form { background: #2c2c2c; } #mobile-search-form form { padding: 0 54px 0 10px; } #mobile-search-form form:before { color: #999; right: 30px; } #mobile-search-form input[type="submit"]:focus, #mobile-search-form input[type="submit"]:focus { outline: none; } #mobile-search-form input[type="text"] { width: 100%; border: none; height: 40px; background: transparent; color:#ddd; padding: 0 25px 0 8px; font-size:14px; margin-bottom:0; } #mobile-menu-items .lang-sel { text-align: center; margin-bottom:40px; } #mobile-menu-items .lang-sel a { display: inline-block; width: auto; padding: 7px 15px; text-transform: uppercase; font-size: 13px; position: relative; margin-right: 8px; } #mobile-menu-items .lang-sel a:before { content: ""; position: absolute; width: 1px; height: 14px; background: #555; right: -6px; top: 8px; } #mobile-menu-items .lang-sel a:last-child:before { display: none; } #mobile-menu-items .mobile-menu-login-link { border-top: 1px solid #333; margin-top: 5px; line-height: 50px; } /* Mega menu*/ header .navigation li.mega-menu-parent div > ul { height: 1px; top:0px; display: table !important; background:transparent; } header .navigation li.mega-menu-parent li { width: 225px; display: inline-block; height: 100%; float:none; border-bottom: none; vertical-align: top; } header .navigation li.mega-menu-parent li.has-bg { width: 226px; min-width:226px; } header .navigation li.mega-menu-parent div > ul > li { padding:0 0 30px 0; display:table-cell; } header .navigation li.mega-menu-parent > .menu-item-wrapper.has-special-last-child > ul > li.menu-item-has-children { padding-bottom:75px !important; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) { padding: 0; -moz-transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); overflow: hidden; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) a span { opacity: 1 !important; line-height: 30px; position:relative; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) a span.menu_title { font-weight:700; } header .navigation > ul > li.mega-menu-parent.hover .menu-item-wrapper > ul, header .navigation > ul > li:not(.mega-menu-parent) li.hover > ul > li, header .navigation > ul > li:not(.mega-menu-parent).hover > ul > li { -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -ms-transform: translateY(0) !important; -o-transform: translateY(0) !important; transform: translateY(0) !important; -moz-transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .2s ease; -o-transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .2s ease; -webkit-transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .2s ease; transition: transform .2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .2s ease; -moz-opacity: 1; opacity: 1; } header .navigation > ul > li li > a span.menu_title_wrap { letter-spacing:0.015em; font-size:12px; -moz-opacity: 1; opacity: 1; line-height:14px; line-height: 16px; padding-top: 7px; padding-bottom: 7px; display:block; font-family: Poppins,sans-serif; -moz-transition: opacity 800ms ease; -o-transition: opacity 800ms ease; -webkit-transition: opacity 800ms ease; transition: opacity 800ms ease; } header .navigation > ul > li li.has-bg > a span.menu_title_wrap { padding:7px; } header .navigation > ul > li li > a span.menu_title { -moz-transition: opacity 800ms ease; -o-transition: opacity 800ms ease; -webkit-transition: opacity 800ms ease; transition: opacity 800ms ease; position:relative; } /* Heading Color input mega menu */ header .navigation > ul > li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a span span.menu_title span:not(.badge), header .navigation > ul > li ul.sub-menu li > a > span span.menu_title span:not(.badge) { opacity:1; -moz-transition: opacity 800ms ease; -o-transition: opacity 800ms ease; -webkit-transition: opacity 800ms ease; transition: opacity 800ms ease; } header:not(.submenu_underlined) .navigation > ul > li.current-menu-ancestor:not(.mega-menu-parent) ul.sub-menu li.current-menu-ancestor > a span.menu_title span:not(.badge), header:not(.submenu_underlined) .navigation > ul > li.hover:not(.mega-menu-parent) ul.sub-menu li:hover > a span.menu_title span:not(.badge), header:not(.submenu_underlined) .navigation > ul > li ul.sub-menu li.current_page_item > a span.menu_title span:not(.badge), header:not(.submenu_underlined) .navigation > ul > li ul.sub-menu li.active > a span.menu_title span:not(.badge), header:not(.submenu_underlined) .navigation > ul > li ul.sub-menu li:hover > a span.menu_title span:not(.badge) { -moz-opacity: .6; opacity: .6; -moz-transition: opacity .2s ease; -o-transition: opacity .2s ease; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a span.badge, .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li a span.badge, header .navigation ul li span.badge, header .navigation-mobile ul li span.badge { font-family:Lato,sans-serif; position: absolute !important; display: inline-block; top: -7px; right: -35px; font-size: 9px; height: 12px; text-transform: uppercase !important; padding: 0 5px; line-height: 13px; color: #fff !important; border-radius: 7px; opacity: 1; font-weight: 700 !important; letter-spacing:0.04em; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } header .navigation-mobile ul li span.badge { position: relative !important; right: -6px; top: -10px; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a span.badge { top: -5px; right: -20px; } header.fillhover .navigation > ul > li > a span.badge { top:7px; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li a span.badge header.underlineHover .navigation > ul > li:not(.mega-menu-parent) a span.badge { top:0px; } .left_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level-open > .sub-menu > li > a span.badge { top:-13px; } .left_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level-open > .sub-menu > li > a span.badge, .vertical_menu_enabled.left_menu_enabled .vertical_menu_area .vertical_menu_navigation li a span.badge { left:auto; right:auto; top:1px; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a span.menu_title { position: relative; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a span.badge { left: -35px; right: auto; } header .navigation > ul > li > a span.badge { top:-4px; margin-left:-10px; right: -20px; } header .navigation li.mega-menu-parent ul { visibility: visible !important; -webkit-transform: initial !important; -moz-transform: initial !important; -ms-transform: initial !important; -o-transform: initial !important; transform: initial !important; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 1; width: auto; } header .navigation li.mega-menu-parent li ul { left:0; display: block !important; position: relative; float: left; background: transparent; padding-top: 13px; max-height: 1000px; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li > ul { height: calc(100% - 45px); } header .navigation li.mega-menu-parent li ul.sub-menu ul.sub-menu { padding-top: 0!important; margin-top: 0 !important; left: 10px; } header .navigation li.mega-menu-parent li ul li { display: inline-block; border: none; height: auto; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type { position: absolute; /*bottom: -37px;*/ bottom:-60px; width: calc(100% - 30px); margin-left: 30px; box-sizing: border-box; padding: 8px 0 0; text-align: left; left: 0; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type:before { content: ""; position: absolute; top:0; left:0; width: 150px; height: 1px; background: #666; opacity: .1; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type > a { margin-left: 0; padding-left: 0; width: 100%; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type > a .menu_title_wrap { padding-bottom: 4px; font-size: 12px; font-weight: 700; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) span.menu_title:before, header.submenu_underlined .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type > a span.menu_title:before { display:none !important; } header .navigation li span.subtitle { display: none; } header .navigation li.mega-menu-parent > .menu-item-wrapper > ul > li.special-last-child > ul > li:last-of-type .subtitle { display: block; font-size: 11px; line-height: 11px; opacity: .9; padding-bottom: 5px; letter-spacing:0.05em; font-family:Lato,sans-serif; } header .navigation li.mega-menu-parent li ul li a { line-height: 28px; width:calc(100% - 25px); } header .navigation li.mega-menu-parent li a { width: 150px; margin-left: 25px; box-sizing: border-box; padding:0 7px; background-color: transparent !important; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a { height:100%; text-align: center; min-height: 250px; text-transform: uppercase; letter-spacing: 1px; color:#fff; padding: 0; margin: 0; width: 100% !important; opacity: 1; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a:hover { opacity: .8; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a span.menu_title_wrap { position: relative; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 25px; display: block; color:#fff; } header .navigation li.mega-menu-parent div > ul > li:not(.menu-item-has-children) > a span.icon { position: relative; top: calc(50% - 30px); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; padding-right: 0; left: 50%; opacity: 1 !important; font-size: 18px; } header #headerFirstState .navigation li.mega-menu-parent div > ul > li.menu-item-has-children.has-bg > .spanHover , header #headerSecondState .navigation li.mega-menu-parent div > ul > li.menu-item-has-children.has-bg > .spanHover { position: absolute; Height: 100% !important; width: 100%; background-color: rgba(255, 255, 255, .2) !important; top: 0; display: block; } header .navigation li.mega-menu-parent div > ul > li.menu-item-has-children > a { padding-top:18px; padding-bottom:2px; color: #eee; text-transform: uppercase; font-weight: 700; position: relative; font-family: Poppins,sans-serif; opacity: 1 !important; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; width: 98% !important; } header .navigation li.mega-menu-parent div > ul > li.menu-item-has-children > a:hover { opacity: 0.8; } header .navigation li.mega-menu-parent div > ul > li.menu-item-has-children > a:after { content: ""; background-color: #666; height: 1px; width: 150px; position: absolute; left: 0px; top: 100%; opacity: 0.1; } header .navigation li.mega-menu-parent div > ul > li.menu-item-has-children > a span.icon { font-size: 16px; } header .navigation li div.menu-item-wrapper { position: absolute; height: 0; top:58px; padding: 0; overflow: hidden; opacity: 0; max-height: 0; width: 220px; background-color: #1b1b1b; visibility: hidden; } header .navigation li.hover div.menu-item-wrapper { opacity: 1; visibility: visible; max-height: 1000px; } header .navigation > ul > li:not(.mega-menu-parent) > ul > li > ul, header .navigation > ul > li:not(.mega-menu-parent) > ul, header .navigation li .menu-item-wrapper { box-shadow:0 1px 8px rgba(0, 0, 0, 0.05); } header .navigation > ul > li:not(.mega-menu-parent) > ul { top : 58px; } header.type2_3 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type2_3 .navigation li div.menu-item-wrapper { top:44px; } header.type2_3 #headerSecondState .navigation > ul > li:not(.mega-menu-parent) > ul, header.type2_3 #headerSecondState .navigation li div.menu-item-wrapper { top:53px; } header.type4 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type5 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type6 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type9 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type4 .navigation li div.menu-item-wrapper, header.type5 .navigation li div.menu-item-wrapper, header.type6 .navigation li div.menu-item-wrapper, header.type9 .navigation li div.menu-item-wrapper { top:73px; } header.type4 #headerSecondState .navigation > ul > li:not(.mega-menu-parent) > ul, header.type5 #headerSecondState .navigation > ul > li:not(.mega-menu-parent) > ul, header.type6 #headerSecondState .navigation > ul > li:not(.mega-menu-parent) > ul, header.type9 #headerSecondState .navigation > ul > li:not(.mega-menu-parent) > ul, header.type4 #headerSecondState .navigation li div.menu-item-wrapper, header.type5 #headerSecondState .navigation li div.menu-item-wrapper, header.type6 #headerSecondState .navigation li div.menu-item-wrapper, header.type9 #headerSecondState .navigation li div.menu-item-wrapper { top:57px; } header.type9 .navigation > ul > li:not(.mega-menu-parent) > ul, header.type9 .navigation li div.menu-item-wrapper { top:73px; } header .navigation li div.menu-item-wrapper, header .navigation li ul li { background-repeat: no-repeat; -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; background-position: center !important; } header .navigation li:not(.mega-menu-parent) > ul > li a { position: relative; } /*-----------------------------------------------------------------------------------*/ /* 07. vertical menu - Left & Right Position /*-----------------------------------------------------------------------------------*/ .mp-level { position: absolute; z-index: 1; top: 1px; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transition: visibility .2s ease,opacity .2s ease; -moz-transition: visibility .2s ease,opacity .2s ease; -o-transition:visibility .2s ease,opacity .2s ease; transition: visibility .2s ease,opacity .2s ease; } .mp-level .mp-level{ top:0px; } .mp-level.mp-level-open { visibility: visible; opacity: 1; pointer-events: all; -webkit-transition: visibility 0.4s ease,opacity 0.4s ease; -moz-transition: visibility 0.4s ease,opacity 0.4s ease; -o-transition: visibility 0.4s ease,opacity 0.4s ease; transition: visibility 0.4s ease,opacity 0.4s ease; } .mp-level .mp-back { display: none !important; width: 260px !important; line-height: 40px!important; background: #454545; outline: none; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.8em; padding: 0 0 0 30px; position: relative; -webkit-transition: background 0.3s, -webkit-transform .4s ease; -moz-transition: background 0.3s, -moz-transform .4s ease; -o-transition: background 0.3s, -o-transform .4s ease; transition: background 0.3s,transform .4s ease; -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .mp-level.mp-level-open .mp-back { -moz-transform: translate3d(-10px,0,0); -ms-transform: translate3d(-10px,0,0); -o-transform: translate3d(-10px,0,0); -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); } .right_menu_enabled .mp-level .mp-back { -moz-transform: translate3d(-10px,0,0); -ms-transform: translate3d(-10px,0,0); -o-transform: translate3d(-10px,0,0); -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); } .right_menu_enabled .mp-level.mp-level-open .mp-back { -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .vertical_menu_enabled .mp-back{ display:block !important; color: #fff !important; } .right_menu_enabled .mp-back { padding: 0 30px 0 0; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation ul.sub-menu { padding:0 0 10px 0; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li ul li:first-child a hr{ opacity:0; } .verticalWrapForbuttons { position: absolute; bottom: 105px; left: 20px; } .cartSidebarbtn a{ display: none; } body.woocommerce-cart .cartSidebarbtn a, .vertical_menu_area .cartSidebarbtn a { position: absolute; display: block; width:100%; height: 100%; top:0; left:0; z-index:1; } .right_menu_enabled .verticalWrapForbuttons{ position: absolute; bottom: 105px; right: 20px; left:auto; } .verticalMenuCopyRight { position: absolute; overflow-y: hidden; bottom: 0; height: 40px; color: #cfcfcf; line-height: 40px; font-family:Lato,sans-serif; font-size:13px; width:100%; text-align:center; font-weight:500; } aside.vertical_menu_area { position: fixed; width: 280px; top: 0; left: 0; padding: 45px 40px 25px 25px; padding: 45px 0 25px; background-color: #292929; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 99998; opacity: 1; overflow: hidden; visibility: visible; -webkit-backface-visibility: hidden; -webkit-transition: opacity .2s ease, visibility .2s ease; -moz-transition: opacity .2s ease, visibility .2s ease; -o-transition: opacity .2s ease, visibility .2s ease; transition: opacity .2s ease, visibility .2s ease; } .single.single-portfolio.is_portfolio_detail_creative #topbar, .single.single-portfolio.is_portfolio_detail_creative aside.vertical_menu_area, .single.single-portfolio.is_portfolio_detail_creative #epHeader { opacity: 0; visibility: hidden; display: none; } body.removePadding #main-content { padding-left: 0; padding-right: 0; } body.disableScroll { overflow: hidden; } aside.vertical_menu_area .logo { display:block; margin-bottom:40px; margin-left:25px; margin-top:15px; z-index:6; position: absolute; height: 125px; width: calc(100% - 90px); } aside.vertical_menu_area .set_nav_center { margin-top: 100px; height: calc( 100% - 250px ); display: table; width: 280px; } aside.vertical_menu_area .nav_tablecell_elemnt { display: table-cell; width: 100%; vertical-align: middle; } .right_menu_enabled aside.vertical_menu_area { right: 0; left:auto; } .vertical_menu_enabled.left_menu_enabled .main-content { padding-left: 280px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .vertical_menu_enabled .footer-bottom { display: none !important; } .vertical_menu_enabled.right_menu_enabled .main-content , .vertical_menu_enabled.right_menu_enabled .footer-bottom { padding-right: 280px; box-sizing:border-box; } .vertical_menu_enabled .container.title_container { padding-left:0; padding-right:0; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation { text-align:left; padding:1px 0 10px 0; position:relative; z-index:6; } .left_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a > span { padding-left:20px; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .sub-menu a > span { opacity: 0; position: relative; left:25px; -moz-transition: left .4s ease-in-out .2s, opacity .4s ease-in-out .2s; -o-transition: left .4s ease-in-out .2s, opacity .4s ease-in-out .2s; -webkit-transition:left .4s ease-in-out .2s, opacity .4s ease-in-out .2s; transition: left .4s ease-in-out .2s, opacity .4s ease-in-out .2s; } .vertical_menu_enabled.right_menu_enabled .vertical_menu_area .vertical_menu_navigation .sub-menu a > span { left:-25px; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(1) a > span { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(2) a > span { -webkit-transition-delay: .1s; -moz-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(3) a > span { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(4) a > span { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(5) a > span { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(6) a > span { -webkit-transition-delay: .35s; -moz-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(7) a > span { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .49s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(8) a > span { -webkit-transition-delay: .45s; -moz-transition-delay: .45s; -o-transition-delay: .45s; transition-delay: .26s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(9) a > span { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .29s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level.mp-level-open .sub-menu li:nth-child(10) a > span { -webkit-transition-delay: .55s; -moz-transition-delay: .55s; -o-transition-delay: .55s; transition-delay: .32s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation .mp-level-open > .sub-menu > li > a span { left : 0; opacity:1; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a > span { padding-right:20px; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_navigation a > span.icon { float: right; margin-left:-5px; } .vertical_menu_enabled.right_menu_enabled .vertical_menu_area .vertical_menu_navigation { text-align:right; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a { color:#ffffff; width:100%; text-decoration:none; font-size:14px; line-height:40px; font-family: Poppins, sans-serif; font-weight:400; display:inline-block; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a .icon { float: left; height: 40px; line-height: 40px; width:30px; font-size:15px; box-sizing:border-box; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a hr { margin:0; position:absolute; top:0; width:280px; opacity:.2; background-color:#d2d2d2; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li { display: block; opacity: 1; visibility: visible; -moz-transition: background-color ease .3s,opacity .3s ease .1s, visibility .3s ease .1s; -o-transition: background-color ease .3s,opacity .3s ease .1s, visibility .3s ease .1s; -webkit-transition: background-color ease .3s,opacity .3s ease .1s, visibility .3s ease .1s; transition: background-color ease .3s,opacity .3s ease .1s, visibility .3s ease .1s; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.hide-for-submenu { opacity: 0; visibility: hidden; -moz-transition: background-color ease .3s,opacity .3s ease, visibility .3s ease; -o-transition: background-color ease .3s,opacity .3s ease, visibility .3s ease; -webkit-transition: background-color ease .3s,opacity .3s ease, visibility .3s ease; transition: background-color ease .3s,opacity .4s ease, visibility .4s ease; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li a { position:relative; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li:not(:first-child) a{ top:-1px; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children a:before , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li li.menu-item-has-children a:before , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li li li.menu-item-has-children a:before { content: "\e93c"; font-family: 'Linearicons'; position:absolute; top: 0; right: 15px; display:block; font-size: 12px; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children a:before ,.right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children li.menu-item-has-children a:before { left: 15px; content: "\e93b"; right:auto; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children a.mp-back:before { content: "\e93b"; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children a.mp-back:before { content: "\e93c"; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li:not(.menu-item-has-children) > a:before , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children li:not(.menu-item-has-children) > a:before, .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.menu-item-has-children li.menu-item-has-children li:not(.menu-item-has-children) a:before { display:none !important; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li li { background-color: transparent; -moz-transition: background-color .4s ease; -o-transition: background-color .4s ease; -webkit-transition: background-color .4s ease; transition: background-color .4s ease; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li .mp-level li { background-image: none !important; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li:hover , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.active { background-color:#454545 !important; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.removeActiveHover:hover , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.active.removeActiveHover { background-color:transparent !important; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.removeActiveHover:hover > a, .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.active.removeActiveHover > a { color:transparent !important; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.removeActiveHover:hover > a .badge, .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation li.active.removeActiveHover > a .badge { opacity: 0; } .vertical_menu_enabled .vertical_background_image { position: fixed; width: 280px; height: 100%; background-position: right top; background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; top: 0; left: 0; z-index: -1; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 0; background-color: #000; } .right_menu_enabled.vertical_menu_enabled .vertical_background_image { right:0; left:auto; } .vertical_menu_enabled .vertical_menu_social { position: absolute; bottom: 40px; width: 280px; border-bottom:1px solid rgba(169, 170, 169, 0.3); padding-left:20px; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_social{ padding-left:0px; padding-right:20px; } .vertical_menu_enabled .vertical_menu_social .social-icons span.icon { -moz-transition: color linear .2s; -o-transition: color linear .2s; -webkit-transition: color linear .2s; transition: color linear .2s; } .vertical_menu_enabled .vertical_menu_social .social-icons .custom1 span.icon, .vertical_menu_enabled .vertical_menu_social .social-icons .custom2 span.icon { top:6px; } .vertical_menu_enabled .vertical_menu_social .social-icons li { margin:5px 15px 8px 0; } .right_menu_enabled.vertical_menu_enabled .vertical_menu_social .social-icons li{ float:right; } .vertical_menu_enabled .vertical_menu_social .social-icons li a { line-height: 42px; } .vertical_menu_enabled .vertical_menu_social .socialLinkShortcode a:before { display:none; } .vertical_menu_enabled .vertical_menu_social .socialLinkShortcode.iconstyle a:hover { -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } header .navigation li a.locallink , .locallink , .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a.locallink ,.navigation-mobile a.locallink , aside.vertical_menu_area .logo.locallink , header.type9 a.locallink.logo { display:none; } header .navigation li a.externalLink , .externalLink , .navigation-mobile a.externalLink { display:block; } .vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a.externalLink { display:inline-block; } .page-template-main-page .locallink , .page-template-main-page header .navigation li a.locallink ,.page-template-main-page aside.vertical_menu_area .logo.locallink ,.page-template-main-page .navigation-mobile a.locallink { display:block; } .page-template-main-page header.type9 a.locallink.logo { display:table; } .page-template-main-page.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a.locallink { display:inline-block; } .page-template-main-page .externalLink ,.page-template-main-page .type9 .externalLink , .page-template-main-page header .navigation li a.externalLink , .page-template-main-page aside.vertical_menu_area .logo.externalLink , .page-template-main-page.vertical_menu_enabled .vertical_menu_area .vertical_menu_navigation a.externalLink, .page-template-main-page .navigation-mobile a.externalLink{ display:none; } /*-----------------------------------------------------------------------------------*/ /* 08. Lazy loading /*-----------------------------------------------------------------------------------*/ .lazy-load { background: transparent; -webkit-transition: background .2s ease; -moz-transition: background .2s ease; -o-transition: background .2s ease; transition: background .2s ease; } .lazy-load.is-loading:not(.bg-lazy-load) { background: rgba(239,239,239,0.5); } .lazy-load.is-loading.lazy-loaded:not(.bg-lazy-load) { background: transparent; } .lazy-load img { opacity: 0; -webkit-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); -moz-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); -o-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); transition: opacity .4s cubic-bezier(.445,.050,.55,.95); } .lazy-load.lazy-loaded img { opacity: 1; } .lazy-load.bg-lazy-load { opacity: 0; -webkit-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); -moz-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); -o-transition: opacity .4s cubic-bezier(.445,.050,.55,.95); transition: opacity .4s cubic-bezier(.445,.050,.55,.95); } .lazy-load.lazy-loaded.bg-lazy-load, .lazy-load.is-loading.bg-lazy-load { opacity: 1; } .lazy-load-hover-container:before, .lazy-load-hover-container:after { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -10px; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px; -webkit-animation: threeBounceDelay 1.4s infinite ease-in-out; -moz-animation: threeBounceDelay 1.4s infinite ease-in-out; -o-animation: threeBounceDelay 1.4s infinite ease-in-out; animation: threeBounceDelay 1.4s infinite ease-in-out; -o-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; background-color: #073B87; display: inline-block; z-index: 1; } .lazy-load-hover-container:before { -webkit-animation-delay: -.32s; -moz-animation-delay: -.32s; -o-animation-delay: -.32s; animation-delay: -.32s; } .lazy-load-hover-container:after { margin-left:-10px; } @-webkit-keyframes threeBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes threeBounceDelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); } 40% { transform: scale(1); -webkit-transform: scale(1); } } .lazy-load-hover-container:not(.is-loading):before, .lazy-load-hover-container:not(.is-loading):after { -moz-animation: none; -o-animation: none; -webkit-animation: none; animation: none; opacity: 0; visibility: hidden; } /* gallery: transparent gray color after image Completely load */ .lazy-load.pSlide.lazy-loaded:before { background-color:transparent; } /*-----------------------------------------------------------------------------------*/ /* 09. WPML /*-----------------------------------------------------------------------------------*/ #epHeader .widget_icl_lang_sel_widget { float:right; margin-top:13px; } #epHeader .widget_icl_lang_sel_widget h4.widget-title { color:#1F1F1F; font-size:14px; line-height:20px; } #epHeader .widget_icl_lang_sel_widget .hr-medium { margin:5px 0; } #lang_sel_footer a:hover { color:#000; } /*-----------------------------------------------------------------------------------*/ /* 10. Social icons /*-----------------------------------------------------------------------------------*/ .topbar_social .socialLinkShortcode a { -webkit-transition: -webkit-transform 0.3s; -moz-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .socialLinkShortcode a:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #a7a7a7; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; -webkit-transform: translateY(100%) translateY(-2px); -moz-transform: translateY(100%) translateY(-2px); -ms-transform: translateY(100%) translateY(-2px); -o-transform: translateY(100%) translateY(-2px); transform: translateY(100%) translateY(-2px); } .socialLinkShortcode a:hover::before { -webkit-transform: translateY(-100%) translateY(2px); -moz-transform: translateY(-100%) translateY(2px); -ms-transform: translateY(-100%) translateY(2px); -o-transform: translateY(-100%) translateY(2px); transform: translateY(-100%) translateY(2px); } .social-icons li, .socialLinkShortcode { float:left; display: block; margin-left:2px; /*margin-bottom :5px;*/ width:25px; height:35px; } #topbar .social-icons li,#topbar .socialLinkShortcode { height:32px; } .socialLinkShortcode.textstyle { padding:0 15px 0 0; } .socialLinkShortcode.textstyle a { padding:0 2px; } .socialLinkShortcode.textstyle , .socialLinkShortcode.textstyle a { width:auto; } .socialLinkShortcode.textstyle a span { text-transform:uppercase; line-height:30px; font-size:11px; font-weight: 600; display:block; height:100%; width:100%; font-family:Poppins,sans-serif; } .socialLinkShortcode.light.textstyle a span , .footer-bottom.dark .socialLinkShortcode.textstyle a span { color:#eee; } .social-icons li:first-child { margin-left:0; } .social-icons li { padding-right:7px; padding-top:7px; } #topbar .social-icons li{ padding-top:0; } .social-icons a , .socialLinkShortcode a { text-align: center; display:block; height:30px; width:22px; text-decoration: none; position:relative; overflow:hidden; border-radius:0px; } .social_share_container{ width:50%; } .socialShareContainer { width:auto; float:right; } .socialShareContainer .social-icons.dark { height:100%; float: right; } .product .socialShareContainer .social-icons.dark { float:none; } .socialShareContainer .label{ display: block; float: left; height: 54px; font-size: 14px; font-weight:500; vertical-align: middle; line-height: 54px; padding: 0 2px; position: relative; color:#333; font-family: lato,sans-serif; } .footer-bottom .social-icons a { border:none; } .footer-bottom .social-icons li { margin-left: 0; } .social-icons span , .socialLinkShortcode span { color:#3c3c3c; font-size: 16px; background-color:transparent; line-height: 30px; } .footer-bottom .socialLinkShortcode.textstyle a span { font-size: 10px; line-height: 34px; font-family: Lato, sans-serif; } .social-icons span.icon, .socialLinkShortcode span.icon { border:none !important; background-color:transparent; height:25px; width:22px; color:#fff; } .topbar_social .socialLinkShortcode span.icon { -moz-transition: color linear .2s; -o-transition: color linear .2s; -webkit-transition: color linear .2s; transition: color linear .2s; } #topbar.dark .social-icons span.icon.firstIcon, .socialLinkShortcode.dark span.icon, .social-icons.dark span.icon, .socialLinkShortcode.dark span.icon { color:#313131; } .socialLinkShortcode.light span.icon { color:#fff; } .socialLinkShortcode.twitter a::before, .socialLinkShortcode.twitter a::before { background-color:#55ACEE; } .socialLinkShortcode.twitter:hover span.icon { color:#55ACEE; } .socialLinkShortcode.facebook a::before, .socialLinkShortcode.facebook a::before { background-color:#3b5998; } .socialLinkShortcode.facebook:hover span.icon { color:#3b5998; } .socialLinkShortcode.dribbble a::before, .socialLinkShortcode.dribbble a::before { background-color:#EA4C89; } .socialLinkShortcode.dribbble:hover span.icon { color:#EA4C89; } .socialLinkShortcode.youtube-play a::before, .socialLinkShortcode.youtube-play a::before, .socialLinkShortcode.youtube a::before, .socialLinkShortcode.youtube a::before { background-color:#CD201F; } .socialLinkShortcode.youtube-play:hover span.icon, .socialLinkShortcode.youtube:hover span.icon { color:#CD201F; } .socialLinkShortcode.googleplus2 a::before, .socialLinkShortcode.googleplus2 a::before, .socialLinkShortcode.google-plus a::before, .socialLinkShortcode.google-plus a::before { background-color:#CC3732; } .socialLinkShortcode.googleplus2:hover span.icon, .socialLinkShortcode.google-plus:hover span.icon { color:#CC3732; } .socialLinkShortcode.email:hover span.icon{ color:#a7a7a7; } .socialLinkShortcode.digg a::before, .socialLinkShortcode.digg a::before { background-color:#b2b2b2; } .socialLinkShortcode.digg:hover span.icon { color:#b2b2b2; } .socialLinkShortcode.tumblr a::before, .socialLinkShortcode.tumblr a::before { background-color:#385a75; } .socialLinkShortcode.tumblr:hover span.icon { color:#385a75; } .socialLinkShortcode.linkedin a::before, .socialLinkShortcode.linkedin a::before { background-color:#5874b7; } .socialLinkShortcode.linkedin:hover span.icon { color:#5874b7; } .socialLinkShortcode.feed a::before, .socialLinkShortcode.feed a::before { background-color:#f8852e; } .socialLinkShortcode.feed:hover span.icon { color:#f8852e; } .socialLinkShortcode.flickr a::before, .socialLinkShortcode.flickr a::before { background-color:#ff0084; } .socialLinkShortcode.flickr:hover span.icon { color:#ff0084; } .socialLinkShortcode.myspace a::before, .socialLinkShortcode.myspace a::before { background-color:#008dde; } .socialLinkShortcode.myspace:hover span.icon { color:#008dde; } .socialLinkShortcode.vimeo a::before, .socialLinkShortcode.vimeo a::before { background-color:#4bf; } .socialLinkShortcode.vimeo:hover span.icon { color:#4bf; } .socialLinkShortcode.github5 a::before, .socialLinkShortcode.github5 a::before { background-color:#d0d2d4; } .socialLinkShortcode.github5:hover span.icon { color:#d0d2d4; } .socialLinkShortcode.lastfm a::before, .socialLinkShortcode.lastfm a::before { background-color:#d51007; } .socialLinkShortcode.lastfm:hover span.icon { color:#d51007; } .socialLinkShortcode.reddit-alien a::before, .socialLinkShortcode.reddit-alien a::before { background-color:#ff4500; } .socialLinkShortcode.reddit-alien:hover span.icon { color:#ff4500; } .socialLinkShortcode.deviantart a::before, .socialLinkShortcode.deviantart a::before { background-color:#4b5d50; } .socialLinkShortcode.deviantart:hover span.icon { color:#4b5d50; } .socialLinkShortcode.pinterest a::before, .socialLinkShortcode.pinterest a::before { background-color:#CC2127; } .socialLinkShortcode.pinterest:hover span.icon { color:#CC2127; } .socialLinkShortcode.blogger a::before, .socialLinkShortcode.blogger a::before { background-color:#f57d00; } .socialLinkShortcode.blogger:hover span.icon { color:#f57d00; } .socialLinkShortcode.xing a::before, .socialLinkShortcode.xing a::before { background-color:#006567; } .socialLinkShortcode.xing:hover span.icon { color:#006567; } .socialLinkShortcode.soundcloud a::before, .socialLinkShortcode.soundcloud a::before { background-color:#f60; } .socialLinkShortcode.soundcloud:hover span.icon { color:#f60; } .socialLinkShortcode.delicious a::before, .socialLinkShortcode.delicious a::before { background-color:#3274d1; } .socialLinkShortcode.delicious:hover span.icon { color:#3274d1; } .socialLinkShortcode.foursquare a::before, .socialLinkShortcode.foursquare a::before { background-color:#2398c9; } .socialLinkShortcode.foursquare:hover span.icon { color:#2398c9; } .socialLinkShortcode.instagram a::before, .socialLinkShortcode.instagram a::before { background-color:#3f729b; } .socialLinkShortcode.instagram:hover span.icon { color:#3f729b; } .socialLinkShortcode.yahoo a::before, .socialLinkShortcode.yahoo a::before { background-color:#731a8b; } .socialLinkShortcode.yahoo:hover span.icon { color:#731a8b; } .socialLinkShortcode.steam a::before, .socialLinkShortcode.steam a::before { background-color:#000; } .socialLinkShortcode.steam:hover span.icon { color:#000; } .socialLinkShortcode.stumbleupon a::before, .socialLinkShortcode.stumbleupon a::before { background-color:#eb4924; } .socialLinkShortcode.stumbleupon:hover span.icon { color:#eb4924; } .socialLinkShortcode.wordpress a::before, .socialLinkShortcode.wordpress a::before { background-color:#21759b; } .socialLinkShortcode.wordpress:hover span.icon { color:#21759b; } .socialLinkShortcode.skype a::before, .socialLinkShortcode.skype a::before { background-color:#00aff0; } .socialLinkShortcode.skype:hover span.icon { color:#00aff0; } .socialLinkShortcode.paypal a::before, .socialLinkShortcode.paypal a::before { background-color:#22bcee; } .socialLinkShortcode.paypal:hover span.icon { color:#22bcee; } .socialLinkShortcode.behance a::before, .socialLinkShortcode.behance a::before { background-color:#006ffb; } .socialLinkShortcode.behance:hover span.icon { color:#006ffb; } .socialLinkShortcode span.icon.icon-custom2, .socialLinkShortcode span.icon.icon-custom2 { display: block; background-repeat: no-repeat; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; } .socialLinkShortcode span.icon { -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; background-size: contain; display: block; } .socialLinkShortcode.custom1 span.icon-custom1, .socialLinkShortcode.custom2 span.icon-custom2 { display: block; position: absolute; -moz-transition: top linear .2s, opacity linear .2s; -o-transition: top linear .2s, opacity linear .2s; -webkit-transition: top linear .2s, opacity linear .2s; transition: top linear .2s, opacity linear .2s; background-repeat:no-repeat; } #topbar .socialLinkShortcode.custom1 a .icon, #topbar .socialLinkShortcode.custom2 a .icon { top: 6px; opacity: 1; width: 18px; height: 21px; box-sizing:border-box; } #topbar .socialLinkShortcode.custom1 a .SecoundIcon, #topbar .socialLinkShortcode.custom2 a .SecoundIcon { width: 18px; height: 21px; background-size: contain; } #topbar .socialLinkShortcode.custom1 a:hover .icon, #topbar .socialLinkShortcode.custom2 a:hover .icon { top:-20px; opacity:0; color:#fff; } #topbar .socialLinkShortcode.custom1 a:hover .SecoundIcon, #topbar .socialLinkShortcode.custom2 a:hover .SecoundIcon { top: 6px; opacity: 1; } /*-----------------------------------------------------------------------------------*/ /* 11. topbar /*-----------------------------------------------------------------------------------*/ #topbar { display:block; width:100%; height:32px; background-color:#eb473b; color:#fff; position:fixed; top:0; z-index:99999; padding:0; opacity: 1; border-bottom:1px solid #f5f5f5; visibility: visible; -webkit-transition: opacity .2s ease, visibility .2s ease,-webkit-transform 400ms ease; -moz-transition: opacity .2s ease, visibility .2s ease,-moz-transform 400ms ease; -o-transition: opacity .2s ease, visibility .2s ease,-o-transform 400ms ease; transition: opacity .2s ease, visibility .2s ease,transform 400ms ease; } .left_menu_enabled #topbar { margin-left: 280px; width: calc(100% - 280px); } .right_menu_enabled #topbar { margin-right: 280px; width: calc(100% - 280px); } #topbar.dark .topbarMessage { color:#262626; } #topbar .topbarMessage { max-width: 90%; overflow: hidden; float:left; margin-left:15px; } .topbarText , .topbarTitle , .topbarIcon { float:left; } .topbarMessage .topbarIcon { line-height: 33px; font-size: 18px; color:#fff; padding-right:8px; padding-left:2px; opacity:.9; } #topbar.dark .topbarMessage .topbarIcon { color:#262626; } .topbarTitle { line-height: 33px; font-size: 13px; font-weight: 700; padding-right: 14px; font-family: Lato,sans-serif; } .topbarText { line-height: 33px; font-size:11px; font-family: lato,sans-serif; font-weight: 600; letter-spacing: .03em; } #topbar .more-link-arrowbtn { margin-left:9px; height:34px; line-height:34px; float:left; border-radius:4px; display:block; margin-right:10px; background-color:rgba(255, 255, 255, 0.25); text-align: center; color: #fff; font-size: 12px; text-decoration: none; padding:0 19px; } .topbar_social { float:right; overflow:hidden; padding: 0 8px 0 19px; border-left-style:solid; border-left-width:1px; border-left-color:rgba(230,230,230,0.4); } .topbar_social .socialLinkShortcode a:before { display:none; } .topbar_social .social-icons span { font-size: 13px; } .topbar_social .social-icons a { width:25px; height:33px; position:relative; } .topbar_login_link { float:right; padding: 0 15px 0 35px; border-left-width:1px; border-left-style:solid; border-left-color:rgba(230,230,230,0.4); position:relative; overflow:hidden; } .topbar_login_link .topbar_login_text a { display: block; color: #fff; font-size: 11px; line-height: 32px; text-decoration: none; font-family: lato, sans-serif; font-weight: 600; text-transform: uppercase; } #topbar.dark .topbar_login_link .topbar_login_text a { color: #262626; } .topbar_login_link .topbar_login_text a:before, .topbar_login_link .topbar_login_text a:after { content: "\e71e"; font-family: 'Linearicons'; font-weight: bold; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); font-size: 12px; display: block; z-index: 1; color: #fff; position: absolute; left: 11px; -moz-transition: opacity .2s linear, top .2s linear; -o-transition: opacity .2s linear, top .2s linear; -webkit-transition: opacity .2s linear, top .2s linear; transition: opacity .2s linear, top .2s linear; } #topbar.dark .topbar_login_link .topbar_login_text a:before,#topbar.dark .topbar_login_link .topbar_login_text a:after { color: #000; } .topbar_login_link .topbar_login_text a:before { top:0; opacity:1; } .topbar_login_link:hover .topbar_login_text a:before { top:-25px; opacity:0; } .topbar_login_link .topbar_login_text a:after { top:25px; opacity:0; } .topbar_login_link:hover .topbar_login_text a:after { top:0px; opacity:1; } .topbar_login-content { display: none; left: 0; position: absolute; background-color: #fff; box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); min-width: 160px; padding: 12px 15px 5px; z-index: 1; margin-top: 1px; } .topbar_login_link:hover .topbar_login-content { display: block; } ul.topbar_login-content li a { display: block; padding: 6px 6px 10px; position: relative; transition: color .3s ease; color: #222; font-size: 13px; line-height:18px; } ul.topbar_login-content li a:after { content: ""; width: calc(100% - 12px); height: 1px; background: #f8f8f8; position: absolute; bottom: 0; left: 6px; } ul.topbar_login-content li:last-child a:after { display:none; } .topbar_social .social-icons a span.firstIcon , .topbar_social .social-icons a span.SecoundIcon { display: block; position: absolute; -moz-transition: top linear .2s, opacity linear .2s; -o-transition: top linear .2s, opacity linear .2s; -webkit-transition: top linear .2s, opacity linear .2s; transition: top linear .2s, opacity linear .2s; } .topbar_social .social-icons a span.firstIcon { top:0; opacity:1; } .topbar_social .socialLinkShortcode:hover span.firstIcon { top:-20px; opacity:0; color:#fff; } .topbar_social .dark .socialLinkShortcode:hover span.firstIcon { color:#000; } .social-icons span.SecoundIcon { display:none; } .topbar_social .social-icons a span.SecoundIcon { top: 20px; opacity:0; } .topbar_social .social-icons li:hover span.SecoundIcon { display:block; top:0px; opacity:1; } /* top bar flag - Wpml */ .topbar_lang_flag { float:right; padding:0; border-left-style:solid; border-left-width:1px; border-left-color:rgba(230,230,230,0.4); position:relative; } .topbar_lang_flag .lang-sel { position: relative; font-size: 11px; font-family: Lato, sans-serif; text-transform: uppercase; letter-spacing: 2px; overflow: visible; height: 32px; line-height: 32px; font-weight: 600; width: 50px; text-align: center; padding: 0 12px 0 21px; } .topbar_lang_flag .lang-sel a { display: block; height: 100%; line-height: inherit; text-align: center; overflow: hidden; z-index: 3; opacity: 1; color: #fff; text-decoration: none; visibility: visible; -webkit-transition: opacity .3s ease .6s, visibility .3s ease .6s,color .2s ease; -moz-transition: opacity .3s ease .6s, visibility .3s ease .6s,color .2s ease; -o-transition: opacity .3s ease .6s, visibility .3s ease .6s,color .2s ease; transition: opacity .3s ease .6s, visibility .3s ease .6s,color .2s ease; } #topbar.dark .topbar_lang_flag .lang-sel a { color:#000; } .topbar_lang_flag .lang-sel li:hover a, .lang-sel ul.lang_link > li:hover a { color:#CACACA; } .topbar_lang_flag.dark .lang-sel li:hover a { color:#454545; } .lang-sel ul.lang_link{ margin-bottom: 0; display:none; overflow: hidden; list-style: none; left: 0; z-index: 1; top:calc(100% + 1px); position: relative; height: 32px; line-height: 32px; font-weight: 600; width: 45px; text-align: center; padding: 0 19px 0 20px; } .lang-sel:hover ul.lang_link { display:block; box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); position:absolute; background-color:#fff; height: auto; -webkit-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; -moz-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; -o-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; } .lang-sel li.active, .lang-sel li{ list-style:none; } .lang-sel ul.lang_link > li { height: 32px; line-height: 32px; opacity: 0; visibility: hidden; display:block; width:100%; } .lang-sel ul.lang_link > li a{ color: #222; } .lang-sel:hover ul.lang_link li { margin-top: 0; visibility: visible; opacity: 1; } .lang-sel ul.lang_link > li a:after, .lang-sel ul.lang_link li a:after{ content: ""; width: calc(100% - 14px); height: 1px; background: #f8f8f8; position: absolute; left: 7px; top:32px; } .topbar_lang_flag:hover .lang-sel:first-child > li a:before { top:-25px; opacity:0; } .topbar_lang_flag:hover .lang-sel:first-child > li a:after { top:0px; opacity:1; } .topbar_lang_flag .lang-sel:first-child > li a:before{ top: 0; opacity: 1; } .topbar_lang_flag .lang-sel:first-child > li a:after{ top: 25px; opacity: 0; } .lang-sel ul.lang_link > li:nth-child(1) { z-index:3; top:0; transition: color .3s ease; } .lang-sel:hover ul.lang_link > li:nth-child(1) { top: 0px; transition: color .3s ease; } .lang-sel ul.lang_link > li:nth-child(2) { z-index:2; top: 0; transition: color .3s ease; } .lang-sel:hover ul.lang_link > li:nth-child(2) { top: 34px; -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out ; -o-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out ; -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out ; transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out ; } .lang-sel ul.lang_link > li:nth-child(3) { z-index:1; top: 0; -moz-transition: opacity .4s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; -o-transition: opacity .4s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; -webkit-transition: opacity .4s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; transition: opacity .4s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; } .lang-sel:hover ul.lang_link > li:nth-child(3) { -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; -o-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; transition: opacity .2s ease-in-out, visibility .2s ease-in-out, top .2s ease-in-out; top: 67px; } /***** topbar currency *****/ .topbar_currency{ float: right; border-left-width: 1px; border-left-style: solid; border-left-color: rgba(230,230,230,0.4); position: relative; font-family: Lato, sans-serif; text-transform: uppercase; letter-spacing: 1px; overflow: visible; height: 32px; text-align: center; font-size: 10px; } #topbar.dark .topbar_currency form.woocommerce-currency-switcher-form .dd-selected .dd-selected-text, #topbar.dark .topbar_currency form.woocommerce-currency-switcher-form .woocommerce-currency-switcher{ color: #262626; } #topbar.dark .topbar_currency form.woocommerce-currency-switcher-form .dd-selected .dd-selected-text:after{ color: #6a6a6a; } form.woocommerce-currency-switcher-form .woocommerce-currency-switcher { display:none !important; } .topbar_currency form.woocommerce-currency-switcher-form .woocommerce-currency-switcher { width:100%; height:32px; border:none !important; background: transparent!important; display:block !important; } .topbar_currency form.woocommerce-currency-switcher-form .dd-container{ width:100% !important; border:none !important; } .topbar_currency form.woocommerce-currency-switcher-form .dd-select, .topbar_currency form.woocommerce-currency-switcher-form .dd-options { border: none; background: transparent!important; border-radius: 0; width: auto !important; } .topbar_currency form.woocommerce-currency-switcher-form .dd-selected .dd-selected-image, .topbar_currency form.woocommerce-currency-switcher-form .dd-option .dd-option-image{ margin-left:7px; } .topbar_currency form.woocommerce-currency-switcher-form .dd-selected .dd-selected-text, .topbar_currency form.woocommerce-currency-switcher-form .woocommerce-currency-switcher { position: relative; font-size: 11px; font-family: 'Rubik', sans-serif; font-weight: 600; text-transform: uppercase; color: #FFF; padding-left: 11px; padding-right: 7px; overflow: visible; margin-right: 0; cursor: pointer; } .topbar_currency form.woocommerce-currency-switcher-form .dd-selected .dd-selected-text:after{ content: "\f0d7"; font-size: 100%; color: #FFF; font-weight: 600; font-family: Linearicons; top: 50%; -webkit-transform: translateY(-50%); margin-left:11px; transform: translateY(-50%); } .topbar_currency form.woocommerce-currency-switcher-form small, .topbar_currency form.woocommerce-currency-switcher-form .dd-pointer{ display:none; } .topbar_currency form.woocommerce-currency-switcher-form .dd-option .dd-option-text{ display: block; padding: 2px 5px; transition: color .3s ease; color: #222; font-size: 12px; line-height: 12px !important; text-transform: none; } .topbar_currency form.woocommerce-currency-switcher-form .dd-selected{ padding-top: 0; padding-bottom: 0; line-height:32px; letter-spacing: .1px; color: #474747; font-size: 12px; border-style: solid; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width:200px; width:auto; border-color: rgba(129,129,129,.2); } .topbar_currency:hover form.woocommerce-currency-switcher-form ul.dd-options{ display:block; } .topbar_currency form.woocommerce-currency-switcher-form ul.dd-options{ margin-bottom: 0; display:none; overflow: hidden; list-style: none; left: 0; top: calc(100% + 1px); font-weight: 600; max-width: 200px; text-align: center; position: relative; background-color: #fff; box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); z-index: 1; margin-top: 1px; webkit-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; -moz-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; -o-transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; transition: opacity .2s ease-in-out .2s, visibility .2s ease-in-out .2s; } form.woocommerce-currency-switcher-form .dd-option .dd-option-text:hover { cursor:pointer; } .widget form.woocommerce-currency-switcher-form .dd-selected .dd-selected-image.dd-image-right{ margin-top:15px; float:right; } .widget form.woocommerce-currency-switcher-form .dd-selected .dd-selected-image{ vertical-align: baseline; float: none; } .widget form.woocommerce-currency-switcher-form .dd-option .dd-option-image{ margin-top:10px; vertical-align: baseline; float:none; } .widget form.woocommerce-currency-switcher-form .dd-option .dd-option-image.dd-image-right{ float:right; } /*-----------------------------------------------------------------------------------*/ /* 12. Toggle Sidebar buttons /*-----------------------------------------------------------------------------------*/ header .sidebartogglebtn { position: absolute; top: 0; right: 21px; background-color:#1E1E1E; height: 44px; border: 1px solid #545454; width: 44px; line-height: 42px; margin:21px 0; cursor: pointer; box-sizing:border-box; } header.type4_5_6.hastogglesidebar .container .sidebartogglebtn { right:0; } header.type9 .sidebartogglebtn { margin: 20px 0; } #epHeader.type2_3 #headerFirstState .sidebartogglebtn { margin: 36px 0; top: 1px; } #epHeader.type2_3 #headerFirstState .container .sidebartogglebtn { right:0; } #epHeader.type1 #headerFirstState .sidebartogglebtn { top: 0; margin: 0; height: 57px; width: 58px; right: 0px !important; border-bottom:none !important; } #epHeader.type1 #headerSecondState .sidebartogglebtn, #epHeader.type9 #headerSecondState .sidebartogglebtn, #epHeader.type4_5_6 #headerSecondState .sidebartogglebtn, #epHeader.type2_3 #headerSecondState .sidebartogglebtn { top: 0px; margin: 0; height: 57px; width: 58px; right: 0px !important; border-bottom:none !important; } header .sidebartogglebtn .sidebartogglebtnlines { margin:16px 11px; } header.type1 #headerFirstState .sidebartogglebtn .sidebartogglebtnlines , header #headerSecondState .sidebartogglebtn .sidebartogglebtnlines{ margin: 22px 16px; pointer-events:all; } header .sidebartogglebtn .sidebartogglebtnlines li:not(:last-child) { margin-bottom:2px; } header.type1 #headerFirstState .sidebartogglebtn .sidebartogglebtnlines li:not(:last-child) header #headerSecondState .sidebartogglebtn .sidebartogglebtnlines li:not(:last-child) { margin-bottom:3px; } header .sidebartogglebtn .sidebartogglebtnlines li hr { width: 17px; height: 2px; background: #fff; margin: 0px; padding: 0px; } header .sidebartogglebtn.light .sidebartogglebtnlines li hr { background: #000; } header .sidebartogglebtn .sidebartogglebtnlines li:last-child hr { width: 9px; } header.type1 #headerFirstState .sidebartogglebtn .sidebartogglebtnlines li hr, header #headerSecondState .sidebartogglebtn .sidebartogglebtnlines li hr{ width:22px; } header.type1 #headerFirstState .sidebartogglebtn .sidebartogglebtnlines li:last-child hr, header #headerSecondState .sidebartogglebtn .sidebartogglebtnlines li:last-child hr { width: 11px; } header .sidebartogglebtn.sidebartogglebtnanimate .sidebartogglebtnlines li hr { -webkit-animation: togglesidebarline 700ms ease; -moz-animation: togglesidebarline 700ms ease; -o-animation: togglesidebarline 700ms ease; animation: togglesidebarline 700ms ease; } header .sidebartogglebtn:hover .sidebartogglebtnlines li:nth-child(2) hr { -webkit-animation-delay: .1s; /* Chrome, Safari, Opera */ -moz-animation-delay: .1s; -o-animation-delay: .1s; animation-delay: .1s; } header .sidebartogglebtn:hover .sidebartogglebtnlines li:nth-child(3) hr { -webkit-animation-delay: .15s; /* Chrome, Safari, Opera */ -moz-animation-delay: .15s; -o-animation-delay: .15s; animation-delay: .15s; } @-webkit-keyframes togglesidebarline { 0% { transform-origin: right top 0px; transform: matrix(1, 0, 0, 1, 0, 0); } 50% { transform-origin: right top 0px; transform: matrix(0.01, 0, 0, 1, 0, 0); } 51% { transform-origin: left top 0px; transform: matrix(0.01, 0, 0, 1, 0, 0); } 100% { transform-origin: left top 0px; transform: matrix(1, 0, 0, 1, 0, 0); } } @keyframes togglesidebarline { 0% { transform-origin: right top 0px; transform: matrix(1, 0, 0, 1, 0, 0); } 50% { transform-origin: right top 0px; transform: matrix(0.01, 0, 0, 1, 0, 0); } 51% { transform-origin: left top 0px; transform: matrix(0.01, 0, 0, 1, 0, 0); } 100% { transform-origin: left top 0px; transform: matrix(1, 0, 0, 1, 0, 0); } } /*-----------------------------------------------------------------------------------*/ /* 13. Toggle Sidebar Container /*-----------------------------------------------------------------------------------*/ .layout .toggleSidebarContainer { position: relative; top: 0; right: 0; width: 100%; background-color:#FFF; } body.single .layout .toggleSidebarContainer , body.archive .layout .toggleSidebarContainer , body.search.search-results .layout .toggleSidebarContainer { background-color:#fff; } #epHeader ~ #sidebar-open-overlay { z-index: 100001; position: fixed; top: 0; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.6); content: ''; -moz-opacity: 0; opacity: 0; visibility:hidden; -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transition: opacity 0.8s ease, visibility 0.9s ease,-moz-transform .4s eas; -o-transition: opacity 0.8s ease, visibility 0.9s ease,-o-transform .4s eas; -webkit-transition: opacity 0.8s ease, visibility 0.9s ease,-webkit-transform .4s eas; transition: opacity 0.8s ease, visibility 0.9s ease,transform .4s ease; } #epHeader.sidebarToggleOpen ~ #sidebar-open-overlay { -moz-opacity: 1; opacity: 1; visibility: visible; } .toggleSidebar { position: fixed; top: 0; right: 0; visibility: hidden; width: 300px; height: 100%; padding-bottom:750px; z-index: 999999; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); padding-top: 0; background-color:#f4f4f4; -webkit-transition: transform 1.2s ease-in-out , opacity .5s ease-in-out , visibility .5s ease-in-out; -moz-transition: transform 1.2s ease-in-out , opacity .5s ease-in-out , visibility .5s ease-in-out; -o-transition: transform 1.2s ease , opacity .5s ease-in-out , visibility .5s ease-in-out; transition: transform .35s ease , opacity .5s ease-in-out , visibility .5s ease-in-out; } .toggleSidebar .sidebar { padding:0; margin-top: 60px; } .toggleSidebarWidgetbar .widget-area .widget { margin:20px 15px 45px 30px; } .toggleSidebarWidgetbar .widget-area .widget.widget_nav_menu { margin:0; } .toggleSidebarWidgetbar .widget-area .widget.widget_epico_facebook { margin:0 10px 0 10px; } .toggleSidebarWidgetbar .widget-area .widget.widget_epico_facebook .widget-title , .toggleSidebarWidgetbar .widget-area .widget.widget_nav_menu .widget-title , .toggleSidebarWidgetbar .widget-area .widget.widget_search .widget-title { margin: 20px 15px 20px 30px; } .toggleSidebar.sidebarToggleOpen { visibility: visible; -moz-transition: transform 0.35s ease; -o-transition: transform 0.35s ease; -webkit-transition: transform 0.35s ease; transition: transform 0.35s ease; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } /*-----------------------------------------------------------------------------------*/ /* 14. Mobile menu And Menu widget in Toggle Side bar menu /*-----------------------------------------------------------------------------------*/ .toggleSidebarWidgetbar .widget-area .widget_nav_menu a { font-size:13px; font-family:Poppins, sans-serif; font-weight:500; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li:first-child a { border-top:1px solid #d2d2d2; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li li:first-child a, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li:first-child li a, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li:first-child li li a { border-top:none; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li { background-color:#f4f4f4; min-height:50px; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a { padding: 0 28px; line-height: 52px; color: #4a4a4a; width: calc( 100% - 56px ); position: relative; border-bottom: 1px solid #d2d2d2; -moz-transition: color ease 300ms; -o-transition: color ease 300ms; -webkit-transition: color ease 300ms; transition: color ease 300ms; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li:hover > a { color: #828282; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children a:before { position:absolute; top:26px; right:20px; width:12px; height:2px; background-color:#9e9e9e; content:""; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children a:after { position:absolute; top: 21px; right: 25px; width:2px; height:12px; background-color:#9e9e9e; content:""; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li.menu-item-has-children li a:after, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li.menu-item-has-children li a:before, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li a:after, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li a:before, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a:after, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a:before { display:none; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li.menu-item-has-children a:after, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children li.menu-item-has-children a:before, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children a:after, .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li.menu-item-has-children a:before { display:block; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: transform .2s ease; -o-transition: transform .2s ease; -webkit-transition: transform .2s ease; transition: transform .2s ease; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a:hover:after , .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a:hover:before { -webkit-transform:rotate(135deg) !important; -moz-transform:rotate(135deg) !important; -ms-transform:rotate(135deg) !important; -o-transform:rotate(135deg) !important; transform:rotate(135deg) !important; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a.activeSubmenu:after{ -webkit-transform:rotate(90deg) !important; -moz-transform:rotate(90deg) !important; -ms-transform:rotate(90deg) !important; -o-transform:rotate(90deg) !important; transform:rotate(90deg) !important; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li a.activeSubmenu:before{ -webkit-transform:rotate(0deg) !important; -moz-transform:rotate(0deg) !important; -ms-transform:rotate(0deg) !important; -o-transform:rotate(0deg) !important; transform:rotate(0deg) !important; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu li ul { padding:0; margin:0; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li li{ background-color:#e6e6e6; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .menu li li li{ background-color: #D2D2D2; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .sub-menu { height: 0; -moz-opacity: 0; opacity: 0; overflow:hidden; -moz-transition: opacity 500ms ease, height 500ms ease; -o-transition: opacity 500ms ease, height 500ms ease; -webkit-transition: opacity 500ms ease, height 500ms ease; transition: opacity 500ms ease, height 500ms ease; } .toggleSidebarWidgetbar .widget-area .widget_nav_menu .sub-menu.activeSubmenu { height: 150px; height:auto; -moz-opacity: 1; opacity: 1; } /*-----------------------------------------------------------------------------------*/ /* 15. search widget in toggle menu /*-----------------------------------------------------------------------------------*/ .toggleSidebarWidgetbar .widget-area .widget.widget_search { margin:0; background-color: #f4f4f4; } .toggleSidebarWidgetbar .widget-area .widget.widget_search .search-form { padding:2px 5px 3px 10px; border:none; } .toggleSidebarWidgetbar .widget-area .widget.widget_search .search-form form { padding: 5px 42px 5px 17px; } .widget-area .search-form input[type="text"] { font-size: 13px; font-family: Poppins, sans-serif; font-weight:400; } .toggleSidebarWidgetbar .widget-area .search-form input[type="text"] { padding-left: 4px; } .toggleSidebarWidgetbar .widget-area .widget.widget_search .search-form input[type="submit"]{ right:7px; } .toggleSidebarWidgetbar .widget-area .widget:last-child { margin-bottom:50px; } /*-----------------------------------------------------------------------------------*/ /* 16. toggle cart bar /*-----------------------------------------------------------------------------------*/ .toggleSidebar.cartSidebarContainer { z-index: 999999; padding-top:0; } .toggleSidebar.cartSidebarContainer .widget_shopping_cart_content { height:100%; z-index: 1; } .toggleSidebar.cartSidebarContainer .widget_shopping_cart_content ul { height:calc(100% - 148px); } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .wc-loading-bg { height:100%; width:100%; position: absolute; top:60px; left: 0; background-color: #F3F3F3; -moz-opacity: 0; opacity: 0; visibility: hidden; z-index:3; -moz-transition: opacity .3s ease .3s, visibility .3s ease .3s; -o-transition: opacity .3s ease .3s, visibility .3s ease .3s; -webkit-transition: opacity .3s ease .3s, visibility .3s ease .3s; transition: opacity .3s ease .3s, visibility .3s ease .3s; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap.updatingCart .wc-loading-bg { -moz-opacity: 1; opacity: 1; visibility: visible; -moz-transition: opacity .4s ease, visibility .4s ease; -o-transition: opacity .4s ease, visibility .4s ease; -webkit-transition: opacity .4s ease, visibility .4s ease; transition: opacity .4s ease, visibility .4s ease; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap > .wc-loading{ opacity: 0; visibility: hidden; z-index:4; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap.updatingCart > .wc-loading{ opacity: 1; visibility: visible; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap { position:relative; width:100%; height:100%; } .toggleSidebar.cartSidebarContainer .cart-bottom-box { position: absolute; bottom: 0; width: 100%; -moz-opacity: 0; opacity: 0; visibility: hidden; z-index:2; -moz-transition: opacity 700ms ease,visibility 700ms ease; -o-transition: opacity 700ms ease,visibility 700ms ease; -webkit-transition: opacity 700ms ease,visibility 700ms ease; transition: opacity 700ms ease,visibility 700ms ease; } .toggleSidebar.cartSidebarContainer.sidebarToggleOpen .cart-bottom-box{ -moz-opacity: 1; opacity: 1; visibility: visible; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons { margin:0; display:block; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons a { font-size: 13px; height: 40px; width: 50% !important; padding: 0 !important; float: left !important; margin: 0 !important; text-align: center; line-height: 34px !important; color: #8c8c8c !important; background-color: #f3f3f3 !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-transform: uppercase; display: inline-block; overflow: hidden; border-radius: 0; font-family: Poppins,sans-serif; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons a.checkout { color:#fff !important; background-color:#073B87 !important; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons a span { position: relative; display: inline-block; -o-transition: transform 0.35s; -moz-transition: transform 0.35s; -webkit-transition: transform 0.35s; transition: transform 0.35s; height: 40px; line-height: 44px; width: 100%; font-weight:500; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons a:hover span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .toggleSidebar.cartSidebarContainer .cart-bottom-box .buttons a span:before { position: absolute; top: 100%; color:#fff; content: attr(data-hover); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .toggleSidebar.cartSidebarContainer .cart-bottom-box .total { display: block; padding:14px 25px; margin: 0; height:20px; font-family:Poppins,sans-serif; background-color:#fff; } ul.cart_list li:after, ul.cart_list li:before, ul.product_list_widget li:after, ul.product_list_widget li:before { content: " "; display: table; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .total strong { display: block; float: left; text-transform:uppercase; } .toggleSidebar.cartSidebarContainer .cart-bottom-box .total .amount { display: block; float: right; font-size: 16px; color:#073B87; font-weight:500; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list { background-color:#f3f3f3; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li img.attachment-shop_thumbnail { width:80px; height:auto; float:left; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a { line-height: 14px; text-decoration: none; color: #676767; font-family: Poppins,sans-serif; font-size: 12px; display: inline-block; width: 80px; height: 80px; vertical-align: top; overflow: hidden; box-sizing: border-box; float: left; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li > span { float: left; margin-left: 10px; width: 169px; font-weight:500; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li .quantity { height: 12px; line-height: 20px; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li { -moz-transition: all ease 1200ms; -o-transition: all ease 1200ms; -webkit-transition: all ease 1200ms; transition: all ease 1200ms; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.remove { position:absolute; top:28px; height: 20px !important; right: 0px; width: 20px !important; text-align: center; line-height: 23px; padding: 0 !important; background-color:transparent !important; opacity:0; -moz-transition: transform 300ms ease , opacity 300ms ease ,right 300ms ease , color 300ms ease ; -o-transition: transform 300ms ease , opacity 300ms ease ,right 300ms ease , color 300ms ease ; -webkit-transition: transform 300ms ease , opacity 300ms ease ,right 300ms ease , color 300ms ease ; transition: transform 300ms ease , opacity 300ms ease ,right 300ms ease , color 300ms ease ; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li:hover a.remove { -moz-opacity: 1; opacity: 1; right: 12px; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.remove:after, .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.remove:before { content: ""; position: absolute; background-color: #848484; width:13px; height: 2px; top:9px; left:2px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.remove:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li:hover a.removed { -moz-opacity: 0; opacity: 0; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li.loading:hover a.remove { -moz-opacity: 0; opacity: 0; display:none; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.remove:hover { color: #333 !important; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li a.undo { height: 30px; width: 22px; top: 15px; left: 100%; opacity: 0; margin-left: -15px; -moz-transition: margin-left .3s ease, opacity .3s ease; -o-transition: margin-left .3s ease, opacity .3s ease; -webkit-transition: margin-left .3s ease, opacity .3s ease; transition: margin-left .3s ease, opacity .3s ease; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list li.removed a.undo { margin-left: -45px; width: 36px; height: 40px; line-height: 35px; opacity: 1; font-size: 20px; text-align: center; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list .empty.show-message { position: absolute; top: calc(50% + 70px); width: 100%; text-align: center; text-transform: uppercase; font-size: 12px; font-family:Poppins,sans-serif; color:#bdbdbd; font-weight:500; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list .empty.show-message:before { height:170px; content:""; width:100%; background-image:url("../img/empty_box.png"); background-position:center; background-repeat:no-repeat; position: absolute; left: 0; right: 0; bottom:0; margin-bottom:25px; } .toggleSidebar.cartSidebarContainer .cartSidebarWrap .cart_list .mini_cart_item { padding-top: 17px; padding-bottom: 17px; padding-right: 23px; padding-left: 17px; content: ""; clear: both; border-bottom: 1px solid #eaeaec; position: relative; -moz-opacity: 0; opacity: 0; min-height: 80px; -moz-transition: opacity ease 800ms,transform ease 500ms; -o-transition: opacity ease 800ms,transform ease 500ms; -webkit-transition: opacity ease 800ms,transform ease 500ms; transition: opacity ease 800ms,transform ease 500ms; } .toggleSidebar.cartSidebarContainer.sidebarToggleOpen .cartSidebarWrap .cart_list .mini_cart_item:nth-child(n) { -moz-opacity: 1; opacity: 1; -moz-transition: opacity 1s ease,transform .8s ease, height .5s ease ,min-height .5s ease, padding .5s ease; -o-transition: opacity 1s ease,transform .8s ease, height .5s ease ,min-height .5s ease, padding .5s ease; -webkit-transition: opacity 1s ease,transform .8s ease, height .5s ease ,min-height .5s ease, padding .5s ease; transition: opacity 1s ease,transform .8s ease, height .5s ease ,min-height .5s ease, padding .5s ease; } .toggleSidebar .cartSidebarWrap ul.cart_list li dl.variation { display: block; margin: 0; border-left: 0; float: left; color: #8f8f8f; padding: 0 0 0 10px; line-height: 15px; font-size: 12px; width:calc(100% - 120px); font-family:Lato,sans-serif; } .toggleSidebar .cartSidebarWrap ul.cart_list li dl.variation:after { content:""; clear:both; } .toggleSidebar .cartSidebarWrap ul.cart_list li dl.variation dt { display:block; float:left; padding:0; font-weight: 400; } .toggleSidebar .cartSidebarWrap ul.cart_list li dl.variation dd { display: inline-block; float: left; margin:0; padding: 0 0 0 5px !important; } .toggleSidebar .cartSidebarWrap ul.cart_list li dl.variation p { margin:0; } .toggleSidebar .cartSidebarWrap ul.cart_list li .quantity { float: left; font-family:Poppins,sans-serif; font-size:12px; line-height:30px; color:#404040; font-weight: 500; } .toggleSidebar ul.cart_list li .amount { color:#404040 !important; font-size:12px !important; font-weight: 600; } /* cart Header */ .toggleSidebar .cartSidebarHeader { border: 1px solid #eaeaec; font-size: 14px; font-family: Poppins, sans-serif; color: #454545; padding: 22px 20px; clear: both; margin-top: 0px; font-weight:500; text-transform: uppercase; position: relative; -moz-opacity: 0; opacity: 0; -moz-transition: opacity 1300ms ease; -o-transition: opacity 1300ms ease; -webkit-transition: opacity 1300ms ease; transition: opacity 1300ms ease; } .toggleSidebar .cartSidebarHeader .cartContentsCount { display:inline-block; background-color:#073B87; height: 14px; min-width: 16px; margin-left:3px; line-height: 14px; text-align: center; font-size: 11px; color: #fff; font-weight:500; font-family:lato,sans-serif; } .toggleSidebar.sidebarToggleOpen .cartSidebarHeader { -moz-opacity: 1; opacity: 1; } .toggleSidebar ul.cart_list li .wc-loading , .woocommerce .toggleSidebar ul.cart_list li .wc-loading{ top: 37px; right: 10px; left: auto; } .toggleSidebar.cartSidebarContainer .cartSidebarTitle{ max-width: 214px; display: inline-block; } .toggleSidebar #toggle-sidebar-close-btn, .toggleSidebar #cart-close-btn { position: absolute; height: 45px; width: 45px; top: 10px; right: 10px; display: block; cursor: pointer; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transition:-webkit-transform .4s cubic-bezier(0.55, 0.31, 0.15, 0.93); -moz-transition:-moz-transform .4s cubic-bezier(0.55, 0.31, 0.15, 0.93); -ms-transition:-ms-transform .4s cubic-bezier(0.55, 0.31, 0.15, 0.93); transition:transform .4s cubic-bezier(0.55, 0.31, 0.15, 0.93); } .toggleSidebar.toggleSidebarWidgetbar #toggle-sidebar-close-btn:before, .toggleSidebar.cartSidebarContainer #cart-close-btn:before { content: ""; position: absolute; width: 2px; height: 16px; background-color: #333; top: 15px; left: 22px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .toggleSidebar.toggleSidebarWidgetbar #toggle-sidebar-close-btn:after, .toggleSidebar.cartSidebarContainer #cart-close-btn:after { content: ""; position: absolute; width: 16px; height: 2px; background-color: #333; top: 22px; left: 15px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .toggleSidebar #toggle-sidebar-close-btn:hover, .toggleSidebar #cart-close-btn:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /*-----------------------------------------------------------------------------------*/ /* 17. Home slider /*-----------------------------------------------------------------------------------*/ #fullScreenSlider { overflow: hidden; } /* Reset left or right value for revolution slider - Bug fix for conflict between page transition and revolution slider*/ .slider-wrap .rev_slider_wrapper { left: 0 !important; right: 0 !important; } #fullScreenSlider .swiper-container { width: 100%; height: 100vh; margin: 0 auto; z-index:10; } #fullScreenSlider .swiper-slide { overflow: hidden; } #fullScreenSlider.epico .swiper-wrapper { -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } #fullScreenSlider.epico .swiper-slide { position: absolute; display: block; top: 0; left: 0; border: none; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -moz-transform-style: flat; transform-style: flat; transition-property: transform; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0 !important; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; cursor: url(../img/cursor/carousel.png) 24 5,url(../img/cursor/carousel.cur),auto; } #fullScreenSlider.epico .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-next):not(.swiper-slide-active):not(.swiper-slide-prev2):not(.swiper-slide-next2) { -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none; } #fullScreenSlider.epico .swiper-slide.swiper-slide-prev { -webkit-transition-property : -webkit-transform; -moz-transition-property : -moz-transform; -ms-transition-property : -ms-transform; -o-transition-property : -o-transform; transition-property: transform; -webkit-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); z-index:2 !important; opacity: 1 !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-next { -webkit-transition-property : -webkit-transform; -moz-transition-property : -moz-transform; -o-transition-property : -o-transform; transition-property: transform; -webkit-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function : cubic-bezier(0.645, 0.045, 0.355, 1); z-index:2 !important; opacity: 1 !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-prev2 { -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important; opacity: 0 !important; z-index:0 !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-next2 { -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important; opacity: 0 !important; z-index:0 !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-active { opacity: 1 !important; z-index:3 !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-active.fake-active:not(.have-transition) { z-index:1 !important; -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-active.fake-active:not(.have-transition):not(.has-duplicate-video) { opacity: 0 !important; } #fullScreenSlider.epico .swiper-slide-duplicate.has-duplicate-video { visibility: hidden !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-duplicate { opacity: 1 !important; } #fullScreenSlider.slide .swiper-slide:not(.has-duplicate-video) { margin:-2px 0 !important; } #fullScreenSlider.slide .swiper-slide:not(.has-duplicate-video) .swiper-slide-image { padding: 4px 0; } #fullScreenSlider.slide .swiper-slide-image { width: 100%; height: 100%; position: absolute; top:0; left:0px; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-position: center !important; } #fullScreenSlider.epico .swiper-slide-image { position: absolute; top: -3px; left: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-position: center !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-prev .swiper-slide-image { -moz-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); } #fullScreenSlider.epico .swiper-slide.swiper-slide-prev2 .swiper-slide-image { -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important; } #fullScreenSlider.epico .swiper-slide.swiper-slide-next .swiper-slide-image { -moz-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); } #fullScreenSlider.epico .swiper-slide.swiper-slide-active .swiper-slide-image { -moz-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 700ms cubic-bezier(0.645, 0.045, 0.355, 1); } #fullScreenSlider.epico .swiper-slide.swiper-slide-next2 .swiper-slide-image { -webkit-transition:none !important; -moz-transition:none !important; -o-transition:none !important; transition:none !important; } #fullScreenSlider .swiper-slide .videoWrap { position: absolute; z-index:5; } #fullScreenSlider .mejs-controls { display: none !important; } #fullScreenSlider .mejs-overlay.mejs-layer { width:100% !important; height:100% !important; } .mejs-overlay { width: 100% !important; } .mejs-overlay-loading { background: none !important; } .mejs-overlay-loading span { background: transparent url(../img/loading.gif) 50% 50% no-repeat !important; } #fullScreenSlider .swiper-slide .videoHomePreload { position: absolute; } #fullScreenSlider.epico .swiper-button-next, #fullScreenSlider.epico .swiper-button-prev { position: absolute; top: 0; width: 50%; height: 100%; z-index:6; margin-top:0; display: inline-block; background: none; } #fullScreenSlider.epico .swiper-button-prev { cursor: url(../img/cursor/prev.png) 50 3, url(../img/cursor/prev.cur), auto; left:0; } #fullScreenSlider.epico .swiper-button-next { left:50%; cursor: url(../img/cursor/next.png) 0 3, url(../img/cursor/next.cur), auto; } #fullScreenSlider.epico .light .swiper-button-prev { cursor: url(../img/cursor/prev-light.png) 50 3, url(../img/cursor/prev-light.cur), auto; } #fullScreenSlider.epico .light .swiper-button-next { cursor: url(../img/cursor/next-light.png) 0 3, url(../img/cursor/next-light.cur), auto; } .homeTexture { top: 0; position: absolute !important; z-index: 7; width: 100%; height: 100%; opacity: .5; -webkit-transform: translate3d(0px, 0px, 0px);/* trick to prevent flash on transitions */ } .fake-active:not(.has-duplicate-video) .homeTexture { opacity: 0 !important; } .homeTexture:after { opacity: 1 !important; } /* Fade effect */ #fullScreenSlider.fade .swiper-slide-image { position: absolute; top:-3px; left:0; right:0; bottom:0; background: none !important; } #fullScreenSlider.fade .swiper-slide { z-index:9; } #fullScreenSlider.fade .swiper-slide .slide-image-fade { position: absolute; width: 100%; height: 100%; top:0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective:1000; -moz-perspective:1000; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-position:center !important; } #fullScreenSlider.fade .swiper-slide .slide-image-fade, #fullScreenSlider.fade .swiper-slide .videoHomePreload, #fullScreenSlider.fade .swiper-slide .videoHome { -moz-transition: transform .001s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, opacity .001s ease 1s; -o-transition: transform .001s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, opacity .001s ease 1s; -webkit-transition: transform .001s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, opacity .001s ease 1s; transition: transform .001s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s, opacity .001s ease 1s; -webkit-transform: scale(1) translate3d(0,0,0); -moz-transform: scale(1) translate3d(0,0,0); -ms-transform: scale(1) translate3d(0,0,0); -o-transform: scale(1) translate3d(0,0,0); transform: scale(1) translate3d(0,0,0); opacity: 0; } #fullScreenSlider.fade .swiper-slide.swiper-slide-active .slide-image-fade, #fullScreenSlider.fade .swiper-slide.swiper-slide-active .videoHomePreload, #fullScreenSlider.fade .swiper-slide.swiper-slide-active .videoHome, #fullScreenSlider.fade .swiper-slide.fake-active .slide-image-fade, #fullScreenSlider.fade .swiper-slide.fake-active .videoHomePreload, #fullScreenSlider.fade .swiper-slide.fake-active .videoHome { opacity: 1; -webkit-transform: scale(1.041) translate3d(0,0,0); -moz-transform: scale(1.041) translate3d(0,0,0); -ms-transform: scale(1.041) translate3d(0,0,0); -o-transform: scale(1.041) translate3d(0,0,0); transform: scale(1.041) translate3d(0,0,0); -moz-transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity .1s ease 0s; -o-transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity .1s ease 0s; -webkit-transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity .1s ease 0s; transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity .1s ease 0s; } #fullScreenSlider.fade .swiper-slide.fake-active .slide-image-fade { display: none; } #fullScreenSlider.fade .swiper-slide.has-duplicate-video.swiper-slide-duplicate { visibility: hidden; } #fullScreenSlider.fade .swiper-button-next, #fullScreenSlider.fade .swiper-button-prev { position: absolute; top: 0; width: 50%; height: 100%; z-index:6; margin-top:0; display: inline-block; background: none; } #fullScreenSlider.fade .swiper-button-prev { cursor: url(../img/cursor/prev.png) 50 3, url(../img/cursor/prev.cur), auto; left:0; } #fullScreenSlider.fade .swiper-button-next { left:50%; cursor: url(../img/cursor/next.png) 0 3, url(../img/cursor/next.cur), auto; } #fullScreenSlider.fade .light .swiper-button-prev { cursor: url(../img/cursor/prev-light.png) 50 3, url(../img/cursor/prev-light.cur), auto; } #fullScreenSlider.fade .light .swiper-button-next { cursor: url(../img/cursor/next-light.png) 0 3, url(../img/cursor/next-light.cur), auto; } #fullScreenSlider.fade .swiper-slide.swiper-slide-active .caption-title { -moz-animation-delay: .8s !important; -o-animation-delay: .8s !important; -webkit-animation-delay: .8s !important; animation-delay: .8s !important; } #fullScreenSlider.fade .swiper-slide.swiper-slide-active .caption-subtitle { -moz-transition-delay: .8s !important; -o-transition-delay: .8s !important; -webkit-transition-delay: .8s !important; transition-delay: .8s !important; } #fullScreenSlider.fade .swiper-slide.swiper-slide-active .caption .button-container { -moz-transition: opacity .6s ease .85s, color .5s ease 0.6s; -o-transition: opacity .6s ease .85s, color .5s ease 0.6s; -webkit-transition: opacity .6s ease .85s, color .5s ease 0.6s; transition: opacity .6s ease .85s, color .5s ease 0.6s; } /* slide effect */ #fullScreenSlider.slide .swiper-wrapper { position: absolute; -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } #fullScreenSlider.slide .swiper-slide-duplicate.has-duplicate-video { visibility: hidden !important; } /* FullScreenSlider arrows */ #fullScreenSlider .arrows-button-prev, #fullScreenSlider .arrows-button-next { border: 0 !important; width: 45px; height: 45px; display: block; position: absolute; z-index: 4; cursor: pointer; top: calc(50% - 25px); border: 1px solid #e3e3e3; color: #333; font-size: 16px!important; background: rgba(255,255,255,.5); font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: background .3s ease, opacity .3s ease; -moz-transition: background .3s ease, opacity .3s ease; -o-transition: background .3s ease, opacity .3s ease; transition: background .3s ease, opacity .3s ease; } #fullScreenSlider .arrows-button-prev:hover, #fullScreenSlider .arrows-button-next:hover { background: rgba(255,255,255,1); } #fullScreenSlider .arrows-button-next { right:0; } #fullScreenSlider .arrows-button-prev { left:0; } #fullScreenSlider .arrows-button-prev:before, #fullScreenSlider .arrows-button-prev:after { content: "\f177"; } #fullScreenSlider .arrows-button-next:after, #fullScreenSlider .arrows-button-next:before { content: "\f178"; } #fullScreenSlider .arrows-button-prev:before, #fullScreenSlider .arrows-button-prev:after, #fullScreenSlider .arrows-button-next:after, #fullScreenSlider .arrows-button-next:before { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 45px; left: 0; -webkit-transition: left 0.3s ease,opacity .2s ease-in-out; -moz-transition: left 0.3s ease,opacity .2s ease-in-out; -o-transition: left 0.3s ease,opacity .2s ease-in-out; transition: left 0.3s ease,opacity .2s ease-in-out; } #fullScreenSlider .arrows-button-prev:after { left:35px; opacity: 0; } #fullScreenSlider .arrows-button-next:after { left:-35px; opacity: 0; } #fullScreenSlider .arrows-button-prev:hover:after { left:0; opacity: 1; } #fullScreenSlider .arrows-button-next:hover:after { left:0; opacity: 1; } #fullScreenSlider .arrows-button-prev:hover:before { left:-45px; opacity: 0; } #fullScreenSlider .arrows-button-next:hover:before { left:45px; opacity: 0; } /* homeslider captions */ .caption { position: absolute; width:100%; height: 100%; left:0; z-index:8; } .vertical_menu_enabled .fullScreenImage .caption{ width:calc( 100% - 255px ); } .vertical_menu_enabled #caption-start { left:calc( 50% - 127px); } .caption-container { width:1170px; margin:0 auto; } .caption-container.caption-fullwidth { width:92%; margin:0 4% !important } .swiper-slide .caption-icon, #fullScreenImage .caption-icon { width:80px; height:80px; line-height: 90px; margin: 0 auto 7px; z-index:5; font-size:60px; position: relative; display: block; opacity: 0; -webkit-transition: opacity 300ms ease; -moz-transition: opacity 300ms ease; -o-transition: opacity 300ms ease; transition: opacity 300ms ease; } .swiper-slide .caption-icon.animated , #fullScreenImage .caption-icon.animated, .swiper-slide .caption-image.animated, #fullScreenImage .caption-image.animated { -webkit-animation: iconFloat 1.5s infinite ease; -moz-animation: iconFloat 1.5s infinite ease; -o-animation: iconFloat 1.5s infinite ease; animation: iconFloat 1.5s infinite ease; } @-webkit-keyframes iconFloat{0%{top:0}50%{top:10px}100%{top:0}} @keyframes iconFloat{0%{top:0}50%{top:10px}100%{top:0}} #fullScreenImage .caption-icon{ opacity: 1; } .swiper-slide.swiper-slide-active .caption-icon { opacity: 1; -webkit-transition: opacity 700ms ease 750ms; -moz-transition: opacity 700ms ease 750ms; -o-transition: opacity 700ms ease 750ms; transition: opacity 700ms ease 750ms; } .caption.light .caption-icon { color:#fff; } .caption.dark .caption-icon { color:#333; } .swiper-slide .caption-image, #fullScreenImage .caption-image { max-width:80px; max-height:80px; margin-bottom:30px; margin-right: auto; margin-left: auto; z-index:5; position: relative; display: block; opacity: 0; -webkit-transition: opacity 300ms ease; -moz-transition: opacity 300ms ease; -o-transition: opacity 300ms ease; transition: opacity 300ms ease; } #fullScreenImage .caption-image { opacity: 1; } .swiper-slide.swiper-slide-active .caption-image { opacity: 1; -webkit-transition: opacity 700ms ease 750ms; -moz-transition: opacity 700ms ease 750ms; -o-transition: opacity 700ms ease 750ms; transition: opacity 700ms ease 750ms; } .swiper-slide .caption-title, #fullScreenImage .caption-title { font-family:Poppins, sans-serif; font-size:60px; font-weight: 700; line-height: 1.08em; z-index:5; position: relative; display: inline-block; opacity: 0; -moz-osx-font-smoothing: grayscale; -webkit-animation: caption-fadeOut 400ms ease; -moz-animation: caption-fadeOut 400ms ease; -o-animation: caption-fadeOut 400ms ease; animation: caption-fadeOut 400ms ease; } #fullScreenImage .caption-title { opacity: 1; -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; } .swiper-slide.swiper-slide-active .caption-title { -webkit-animation: caption-fadeIn 600ms ease .75s forwards; -moz-animation: caption-fadeIn 600ms ease .75s forwards; -o-animation: caption-fadeIn 600ms ease .75s forwards; animation: caption-fadeIn 600ms ease .75s forwards; animation-fill-mode : forwards !important; -ms-animation-fill-mode : forwards !important; } @-webkit-keyframes caption-fadeIn { 0%{ opacity: 0; -webkit-transform: translate3d(0,10px,0); } 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); } } @keyframes caption-fadeIn { 0% { opacity: 0; transform: translate3d(0,10px,0); } 100% { opacity: 1; transform: translate3d(0,0,0); } } @-webkit-keyframes caption-fadeOut { 0%{ opacity: 1; } 100% { opacity: 0; } } @keyframes caption-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .swiper-slide .caption-subtitle, #fullScreenImage .caption-subtitle, .swiper-slide .caption-subtitle2, #fullScreenImage .caption-subtitle2 { font-size:20px; font-weight: 400; line-height: 1.08em; padding:22px 10px 10px 0; z-index:5; position: relative; opacity: 0; font-family: Lato,sans-serif; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .swiper-slide .caption-subtitle2, #fullScreenImage .caption-subtitle2 { font-size:18px; } #fullScreenImage .caption-subtitle, #fullScreenImage .caption-subtitle2 { opacity: 1; } .swiper-slide.swiper-slide-active .caption-subtitle, .swiper-slide.swiper-slide-active .caption-subtitle2 { opacity: 1; -webkit-transition: opacity 600ms ease .75s; -moz-transition: opacity 600ms ease .75s; -o-transition: opacity 600ms ease .75s; transition: opacity 600ms ease .75s; } .caption .caption-title , .caption .caption-subtitle, .caption .caption-subtitle2 { color:#fff; } .swiper-slide .caption .button-container, #fullScreenImage .caption .button-container { z-index:7; opacity: 0; display: inline-block; position: relative; margin-top:10px !important; -webkit-transition: opacity .4s ease, color .4s ease; -moz-transition: opacity .4s ease, color .4s ease; -o-transition: opacity .4s ease, color .4s ease; transition: opacity .4s ease, color .4s ease; } .swiper-slide .caption .button-container .button, #fullScreenImage .caption .button-container .bitton { transform: translateZ(0); z-index:7; } #fullScreenImage .caption { opacity: 0; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } #fullScreenImage .caption.show, #fullScreenImage .caption .button-container { opacity: 1; } .swiper-slide.swiper-slide-active .caption .button-container { opacity: 1; -webkit-transition: opacity .6s ease .75s, color .5s ease 0s; -moz-transition: opacity .6s ease .75s, color .5s ease 0s; -o-transition: opacity .6s ease .75s, color .5s ease 0s; transition: opacity .6s ease .75s, color .5s ease 0s; } .caption .caption-scroll{ text-align: right; } #caption-start{ position: absolute; top:100%; margin-top:-80px; width: 40px; height: 60px; left:50%; margin-left:-20px; z-index:10; cursor: pointer; -webkit-animation: caption-start 1.5s ease .2s infinite; -moz-animation: caption-start 1.5s ease .2s infinite; -o-animation: caption-start 1.5s ease .2s infinite; animation: caption-start 1.5s ease .2s infinite; } body.has-topbar #caption-start { margin-top: -110px; } @-webkit-keyframes caption-start { 0%{ -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,10px,0); } 100% { -webkit-transform: translate3d(0,0,0); } } @keyframes caption-start { 0%{ transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } 50% { transform: translate3d(0,10px,0); -ms-transform: translate3d(0,10px,0); } 100% { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } } /*start button styles*/ #caption-start.style-2 { width: 25px; height: 46px; border: 2px solid #fff; border-radius: 18px; margin-left:-13px; } #caption-start.style-2 .dot { background: none repeat scroll 0 0 #FFF; border-radius: 50%; height: 5px; left: 10px; opacity: 1; position: absolute; top: 9px; width: 5px; } #caption-start.style-2 .dot:after { content:" "; background:none; border:2px solid #FFF; border-radius: 50%; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-animation:2000ms ease-in 0ms normal none infinite circle-border-scale; -moz-animation:2000ms ease-in 0ms normal none infinite circle-border-scale; -o-animation:2000ms ease-in 0ms normal none infinite circle-border-scale; animation:2000ms ease-in 0ms normal none infinite circle-border-scale; } @keyframes circle-border-scale{ 0% { width:100%; height:100%; left:0; top:0; opacity:1 } 30% { width:21px; height:21px; left:-8px; top:-8px; opacity:0; } 100% { width:21px; height:21px; left:-8px; top:-8px; opacity:0; } } @-webkit-keyframes circle-border-scale{ 0% { width:100%; height:100%; left:0; top:0; opacity:1 } 30% { width:21px; height:21px; left:-8px; top:-8px; opacity:0; } 100% { width:21px; height:21px; left:-8px; top:-8px; opacity:0; } } #caption-start.style-1:before { position: absolute; top: 80%; content: ""; width: 45px; height: 1px; border-top: 1px solid #fff; left: 0; margin-left: -26px; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } #caption-start.style-1:after { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 53px; content: ""; width: 0px; height: 1px; left: 0; margin-left: 10px; margin-top: -3px; border-style: solid; border-width: 3px 3px 3px 4px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /* caption Alignment */ .caption.left{ text-align: left; } .caption.center{ text-align: center; } .caption.right{ text-align: right; } .right .caption-icon { margin: 0 0 7px auto !important; } .right .caption-box .caption-icon { margin:0 0 7px auto; } .left .caption-icon { margin: 0 auto 7px 0 !important; } /* Style1 */ .caption.style1 .caption-subtitle { margin-bottom: 0 !important; padding-bottom: 0 !important; padding-top: 2px !important; padding-left:0 !important; padding-right:0 !important; font-size:31px; } .caption.style1 .caption-subtitle2 { padding-top: 2px !important; padding-right:0 !important; } /* Style2 */ .caption.style2 .caption-image { margin-bottom:20px; } .caption.style2 .caption-icon { margin-bottom:20px !important; } .caption.style2 .caption-title { border-top:2px solid #fff; border-bottom: 2px solid #fff; padding: 14px 0; } .caption.style2 .caption-subtitle { margin-top: -8px; padding-right:0 !important; padding-left:0 !important; } /* Style3 */ .caption.style3 .caption-image { margin-bottom:20px; } .caption.style3 .caption-icon { margin-bottom:20px !important; } .caption.style3 .caption-title { border-left:2px solid #fff; border-right: 2px solid #fff; padding: 2px 14px; } .caption.style3 .caption-subtitle { margin-top: -15px; padding-right:0 !important; padding-left:0 !important; } /* Style4 */ .swiper-slide .caption.style4 .caption-box, #fullScreenImage .caption.style4 .caption-box { display: inline-block; width:360px; background-color:#fff; box-sizing: border-box; padding: 40px; z-index:5; position: relative; opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .swiper-slide .caption.dark.style4 .caption-box, #fullScreenImage .caption.dark.style4 .caption-box { background-color:#333; } #fullScreenImage .caption.style4 .caption-box { opacity: 1; } .swiper-slide.swiper-slide-active .caption.style4 .caption-box { opacity: 1; -webkit-transition: opacity 600ms ease 750ms; -moz-transition: opacity 600ms ease 750ms; -o-transition: opacity 600ms ease 750ms; transition: opacity 600ms ease 750ms; } .caption-box .caption-icon { margin: 9px auto 25px; } .caption.style4 .caption-title { width: 100%; word-break: break-all; border-bottom: 1px solid #222; padding-bottom:15px; color:#222; } .caption.dark.style4 .caption-title { border-bottom: 1px solid #fff; color:#fff; } .caption.style4 .caption-subtitle { padding-right:0 !important; padding-left:0 !important; color:#222; } .caption.dark.style4 .caption-subtitle { color:#fff; } /* Style5 */ .swiper-slide .caption.style5 .caption-box-top, #fullScreenImage .caption.style5 .caption-box-top { background:url(../img/slider-captions/caption-bg-style5.png) 50% 40px no-repeat; margin-bottom: 10px; z-index:5; position: relative; opacity: 0; height: 95px; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .swiper-slide .caption.dark.style5 .caption-box-top, #fullScreenImage .caption.dark.style5 .caption-box-top { background:url(../img/slider-captions/caption-bg-style5-dark.png) 50% 40px no-repeat; } #fullScreenImage .caption.style5 .caption-box-top { opacity: 1; } .swiper-slide.swiper-slide-active .caption.style5 .caption-box-top { opacity: 1; -webkit-transition: opacity 600ms ease 750ms; -moz-transition: opacity 600ms ease 750ms; -o-transition: opacity 600ms ease 750ms; transition: opacity 600ms ease 750ms; } .swiper-slide .caption.style5 .caption-box-bottom, #fullScreenImage .caption.style5 .caption-box-bottom { background:url(../img/slider-captions/caption-bg-style5.png) 50% -139px no-repeat; margin-bottom: 20px; height: 100px; z-index:5; position: relative; opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .swiper-slide .caption.dark.style5 .caption-box-bottom, #fullScreenImage .caption.dark.style5 .caption-box-bottom { background:url(../img/slider-captions/caption-bg-style5-dark.png) 50% -139px no-repeat; } #fullScreenImage .caption.style5 .caption-box-bottom { opacity: 1; } .swiper-slide.swiper-slide-active .caption.style5 .caption-box-bottom { opacity: 1; -webkit-transition: opacity 600ms ease 750ms; -moz-transition: opacity 600ms ease 750ms; -o-transition: opacity 600ms ease 750ms; transition: opacity 600ms ease 750ms; } .caption.style5 .caption-subtitle { margin-bottom: 9px; padding-top: 2px; } /*-----------------------------------------------------------------------------------*/ /* 18. button /*-----------------------------------------------------------------------------------*/ .ep_button, form input[type="submit"] { font-family: lato,sans-serif; cursor: pointer; margin: 0; padding: 0 26px; min-height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; color: #a1a1a1; -moz-transition: color .7s ease; -o-transition: color .7s ease; -webkit-transition: color .7s ease; transition: color .7s ease; text-decoration: none; } .ep_button { border-radius: 4px; overflow: hidden; font-weight: 600; display: inline-block; position: relative; margin: 0 2px; font-family: lato, sans-serif; -moz-transition: color 200ms ease, background-color 350ms ease; -o-transition: color 200ms ease, background-color 350ms ease; -webkit-transition: color 200ms ease, background-color 350ms ease; transition: color 200ms ease, background-color 350ms ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .inlinestyle{ display:inline-block; vertical-align:top; margin:0 6px; } .inlinestyle.right { float:right; } .inlinestyle.center { margin:3px 0; display:flex; } .ep_button.style1 , .ep_button.style2 { border:solid 1px #000; } .ep_button.transparent { background-color:transparent; } .ep_button.separate { margin:6px 0; } .ep_button.fill:hover { background-color:transparent!important; } /* icon button */ .ep_button span.icon { float:left; padding-right:10px; vertical-align: middle; font-size:18px; position:relative; min-height:32px; min-width: 17px; width:20px; } .spaceForIcon { display:none; } .hasIcon .spaceForIcon { display:block; width:28px; float:left; height:100%; } .ep_button.button-large span.icon { font-size: 20px; min-height:40px; } .ep_button.button-small span.icon { font-size: 14px; min-height:24px; } .ep_button span.icon[data-float="right"] { float:right; padding-right:0; padding-left:10px; } .ep_button span.txt { position: relative; display: inline-block; -o-transition: transform 0.35s; -moz-transition: transform 0.35s; -webkit-transition: transform 0.35s; transition: transform 0.35s; padding:0 2px; } .ep_button:not(.disabled):hover span.txt { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .ep_button span.txt:before { position: absolute; top: 100%; content: attr(data-hover); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ep_button span.icon .hovericon, .ep_button span.icon .firsticon { top:calc( 50% - 9px ); position: absolute; -moz-transition: opacity ease-in-out 0.35s, transform 0.35s; -o-transition: opacity ease-in-out 0.35s, transform 0.35s; -webkit-transition: opacity ease-in-out 0.35s, transform 0.35s; transition: opacity ease-in-out 0.35s, transform 0.35s; } .ep_button.button-large span.icon .hovericon, .ep_button.button-large span.icon .firsticon { top:calc( 50% - 10px ); } .ep_button.button-small span.icon .hovericon, .ep_button.button-small span.icon .firsticon { top:calc( 50% - 7px ); } .ep_button span.icon .hovericon { -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } .ep_button:hover span.icon .hovericon { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .ep_button:hover span.icon .firsticon { -moz-transform: translateY(-200%); -ms-transform: translateY(-200%); -o-transform: translateY(-200%); -webkit-transform: translateY(-200%); transform: translateY(-200%); } .ep_button:hover { text-decoration: none; -moz-transition: color 200ms ease, background-color ease 350ms; -o-transition: color 200ms ease, background-color ease 350ms; -webkit-transition: color 200ms ease, background-color ease 350ms; transition: color 200ms ease, background-color ease 350ms; } form input[type="submit"] { background-color:transparent; border:1px solid #cacaca; color:#acacac; } form input[name="post_password"]{ line-height: 29px; padding: 0 10px; } .post-password-form input[type="submit"]{ border: 1px solid #a9a9a9; color: #2d2d2d; font-weight: 600; -moz-transition: color 200ms ease, background-color ease 350ms; -o-transition: color 200ms ease, background-color ease 350ms; -webkit-transition: color 200ms ease, background-color ease 350ms; transition: color 200ms ease, background-color ease 350ms; } .post-password-form input:hover[type="submit"] { color: #fff; background-color: #000; } .ep_button.right { float:right; } .ep_button.left { float:left; } .centeralignment { display:table; margin:0 auto; } .button-small { height: 24px; line-height: 24px; padding: 0px 16px; font-size: 12px; min-height:auto; } .button-large { height: 40px; line-height: 40px; padding: 0 27px; font-size: 17px; } /* button border animation */ .ep_button .frame { background-color: #acacac; } .ep_button .frame, .ep_button .frame div { position: absolute; } .ep_button .frame.top { left: 0; top: 0; width: 100%; height: 2px; } .ep_button .frame.right { right: 0; top: 0; width: 2px; height: 100%; } .ep_button .frame.bottom { right: 0; bottom: 0; width: 100%; height: 2px; } .ep_button .frame.left { left: 0; bottom: 0; width: 2px; height: 100%; } .ep_button .frame div { background-color:#272626; width:0; height:2px; } .ep_button .frame.top div, .ep_button .frame.bottom div { -webkit-transition: width 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: width 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: width 1s cubic-bezier(0.19, 1, 0.22, 1); transition: width 1s cubic-bezier(0.19, 1, 0.22, 1); } .ep_button .frame.left div, .ep_button .frame.right div { -webkit-transition: height 1s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: height 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: height 1s cubic-bezier(0.19, 1, 0.22, 1); transition: height 1s cubic-bezier(0.19, 1, 0.22, 1); } .ep_button .frame.top div { width:0; height:2px; left:0; } .ep_button .frame.bottom div { width:0; height:2px; right:0; } .ep_button .frame.left div { width:2px; height:0; top:0; } .ep_button .frame.right div { width:2px; height:0; bottom:0; } .ep_button:hover .frame.top div, .ep_button:hover .frame.bottom div { width:100%; } .ep_button:hover .frame.left div, .ep_button:hover .frame.right div { height:100%; } /*-----------------------------------------------------------------------------------*/ /* 19. video /*-----------------------------------------------------------------------------------*/ /* Responsive video container */ .video-frame { height:0; margin-bottom:20px; padding-bottom:50%; position:relative; } .footer-widgetized .video-frame { overflow:visible; } .video-frame iframe { height:100%; left:0; position:absolute; top:0; width:100% } /* Video FullWidth */ .videoColorMask { opacity: .4; } .videoMask, .videoColorMask { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; } .videoHome { position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; width: 100%; height: 100%; } .videoHome video { width:100%; height:auto; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } .videoHomePreload { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } .vc_videowrap .wpb_column { z-index:1; } /*-----------------------------------------------------------------------------------*/ /* 20. Embed video /*-----------------------------------------------------------------------------------*/ .video_embed_container { position: relative; overflow: hidden; } .video_embed_container img { width:100%; display: block; } .video_embed_container .content-container { position:absolute; top:0; left:0; bottom:0; right:0; width: 100%; height: 100%; z-index:2; text-align: center; } .video_embed_container a { position: relative; display: block; height: 100%; width: 100%; min-height:70px; min-width:70px; } /*button*/ .video_embed_container.no_video_placeholder .play-button { top:0; } .video_embed_container .play-button { position: absolute; left: calc(50% - 35px); top: calc(50% - 35px); height: 64px; width: 64px; background-color: transparent; border: solid 3px #fff; border-radius: 50%; cursor:pointer; z-index:1; -moz-transition: transform ease 300ms,border ease 300ms; -o-transition: transform ease 300ms,border ease 300ms; -webkit-transition: transform ease 300ms,border ease 300ms; transition: transform ease 300ms,border ease 300ms; } .video_embed_container .play-button.right { right: 0; left: auto; } .video_embed_container .play-button.left { left: 0; } .video_embed_container .dark.play-button { border: solid 3px #000; } .dark .video_embed_container .play-button { border-color:#000; } .video_embed_container .dark.play-button .icon { color:#272727; } .video_embed_container .play-button:hover , .inline_video .mejs-container:hover .play-button { -moz-transform: scale(0.9) translateZ(0); -ms-transform: scale(0.9) translateZ(0); -o-transform: scale(0.9) translateZ(0); -webkit-transform: scale(0.9) translateZ(0); transform: scale(0.9) translateZ(0); border:3px solid #fff; } .video_embed_container .dark.play-button:hover { border-color: #000; } .video_embed_container .play-button .icon { color:#fff; margin-left: 27px; margin-top: 20px; display: block; font-size: 23px; } .dark .video_embed_container .play-button .icon { color:#000; } .mejs-overlay-loading { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; opacity: 1; visibility: visible; -webkit-transition: top 0.3s ease, opacity 0.3s ease,visibility 0.3s ease; -moz-transition: top 0.3s ease, opacity 0.3s ease,visibility 0.3s ease; -o-transition: top 0.3s ease, opacity 0.3s ease,visibility 0.3s ease; transition: top 0.3s ease, opacity 0.3s ease,visibility 0.3s ease; } .mejs-overlay-loading:after { display: block; content: ""; height: 40px; width: 40px; border-width: 2px; border-style: solid; border-right-color: #073B87; border-bottom-color: transparent; border-left-color: transparent; border-top-color: transparent; border-radius: 100%; -moz-animation: clockwise .5s linear infinite; -o-animation: clockwise .5s linear infinite; -webkit-animation: clockwise .5s linear infinite; animation: clockwise .5s linear infinite; } .mejs-overlay-loading:before { content: ""; border: 2px solid #e1e1e1; width: 44px; height: 44px; position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; border-radius: 50%; box-sizing: border-box; -moz-animation: clockwise .5s linear infinite; -o-animation: clockwise .5s linear infinite; -webkit-animation: clockwise .5s linear infinite; animation: none; } .mejs-overlay-loading span { display:none !important; } .mejs-overlay-button { background: none !important; } /*-----------------------------------------------------------------------------------*/ /* 21. Showcase */ /*-----------------------------------------------------------------------------------*/ /*The fallowing class used for manipulating snap-to-scroll functionality and adapt it to showcase*/ .section-showcase-content { opacity: 1 !important; -webkit-transform: translateY(0) !important; -moz-transform: translateY(0) !important; -ms-transform: translateY(0) !important; -o-transform: translateY(0) !important; transform: translateY(0) !important; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .showcase { position: relative; min-height: 440px; overflow: hidden; height: 100vh; } .showcase .showcase-content-container { position: absolute; left: 0; top: 0; height: 100%; width: 100%; -moz-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; -o-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; -webkit-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; } .showcase .container { z-index: 3; position: relative; max-width: 1125px; padding: 0 25px; margin: 0 auto; } .showcase .showcase-title, .showcase .showcase-nav, .showcase .showcase-items, .showcase .showcase-backgrounds { opacity: 0; -moz-transition: opacity .7s ease 0s; -o-transition: opacity .7s ease 0s; -webkit-transition: opacity .7s ease 0s; transition: opacity .7s ease 0s; } .showcase.show .showcase-title , .showcase.show .showcase-nav, .showcase.show .showcase-items, .showcase.show .showcase-backgrounds { opacity: 1; } .showcase.show .showcase-items { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .showcase-backgrounds { display: block; position: absolute; width: 100%; height:100%; top:0; left:0; } .showcase .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:.1; z-index: 3; } .showcase .overlayMobile { display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; } .showcase-bg { background-position: center center; background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; opacity: 0; z-index: 2; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity .6s ease 0s; -moz-transition: opacity .6s ease 0s; -o-transition: opacity .6s ease 0s; transition: opacity .6s ease 0s; } .showcase-bg.active { opacity: 1; -webkit-transition: opacity 0s ease; -moz-transition: opacity 0s ease; -o-transition:opacity 0s ease; transition: opacity 0s ease; z-index:1; } .showcase h3 { padding-top: 10px; margin: 0 0 55px 0; font-weight: 600; font-size: 48px; line-height: 48px; text-align: right; -ms-word-wrap: break-word; word-wrap: break-word; } .showcase.left-align h3 { text-align: right; margin-right:-15px; } .showcase.right-align h3 { text-align: left; margin-left:-15px; } .showcase .showcase_subtitle { font-size:16px; font-weight:400; line-height:20px; display:block; margin-top:6px; color:rgba(255, 255, 255, 0.8); } .showcase.dark .showcase_subtitle { color:rgba(255, 255, 255, 0.8); } .showcase.light .showcase_subtitle { color:rgba(000, 000, 000, 0.8); } .showcase .item-list { min-height:230px; } .showcase .item-list li { height: 40px; line-height: 45px; padding: 0 20px; min-width: 100px; position: relative; display: inline-block; float: right; clear: both; cursor:pointer; overflow: hidden; background-color: transparent; -webkit-transition: background-color 0.35s ease; -moz-transition: background-color 0.35s ease; -o-transition: background-color 0.35s ease; transition: background-color 0.35s ease; } .showcase .item-list li span{ font-size: 16px; font-weight: 400; line-height:40px; display: block; color:rgba(255,255,255,0.8); -webkit-transition: color .2s ease, transform 0.25s ease; -moz-transition: color .2s ease, transform 0.25s ease; -o-transition: color .2s ease, transform 0.25s ease; transition: color 1.2s ease, transform .25s ease; } .showcase.light .item-list li span { color:rgba(000,000,000,0.8); } .showcase .item-list li.active span, .showcase .item-list li:hover span { color:#fff; -webkit-transition: color .2s ease, transform 0.25s ease; -moz-transition: color .2s ease, transform 0.25s ease; -o-transition: color .2s ease, transform 0.25s ease; transition: color .2s ease, transform .25s ease; } .showcase .item-list li span:before { position: absolute; content: ''; height: 40px; width: 0%; background-color: #073B87; margin-left: 0; z-index: -1; right: 0; display: block; -moz-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1); transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1); } .showcase.right-align .item-list li span:before { right: auto; left:0; } .showcase .item-list li.active span:before , .showcase .item-list li:hover span:before { width: 100%; } .item-list li:before { position:absolute; content:""; top:100%; margin-top: -1px; right: 0; opacity: .5; width: 600px; } .showcase.kunburn .showcase-bg.bg-animated { -webkit-animation:kunburn 11s cubic-bezier(.4,.5,.5,.6) both; -moz-animation:kunburn 11s cubic-bezier(.4,.5,.5,.6) both; -o-animation:kunburn 11s cubic-bezier(.4,.5,.5,.6) both; animation:kunburn 11s cubic-bezier(.4,.5,.5,.6) both; } .left-top { -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } .left-bottom { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; } .right-top { -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; } .right-bottom { -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; } /*kunburn effect for backgrounds*/ @-webkit-keyframes kunburn { 0% { -webkit-transform: translateZ(0) scale(1); } 100% { -webkit-transform: translateZ(0) scale(1.1); } } @keyframes kunburn { 0% { transform: translateZ(0) scale(1); } 100% { transform: translateZ(0) scale(1.1); } } /* Interactive background effect of showcase */ .interactive-background-image .showcase-bg { -moz-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s ease .7s; -o-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s ease .7s; -webkit-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s ease .7s; transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0s ease .7s; opacity: 0; z-index: 0; } .interactive-background-image .showcase-bg.active { -moz-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .7s ease 0s; -o-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .7s ease 0s; -webkit-transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .7s ease 0s; transition: transform 14s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .7s ease 0s; opacity: 1; z-index: 1; } /* .firstactive class used for displaying image immediately after page loading */ .interactive-background-image .showcase-bg.active.firstactive { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .showcase .container.container-next-showcase { position: absolute; padding: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; } .next-showcase { position: relative; display: block; height: 40px; width: 41px; border: 1px solid rgba(211,211,211,0.5); border-right: 0; border-bottom:0; left: 33.33333333333%; margin-left: -43px; } .showcase.right-align .next-showcase { float: right; right: 33.33333333%; margin-right: -43px; left: auto; border-right: 1px solid rgba(211,211,211,0.5); border-left: 0; } .next-showcase a { position: absolute; width: 100%; height: 100%; overflow: hidden; right: 0; background-color: rgba(255, 255, 255, 0.7); -moz-transition: background-color ease 200ms; -o-transition: background-color ease 200ms; -webkit-transition: background-color ease 200ms; transition: background-color ease 200ms; } .next-showcase a:hover { background-color: rgba(255, 255, 255, 1); } .next-showcase a:before, .next-showcase a:after { content: "\f175"!important; font-family: 'Linearicons'; font-weight: bold; color: #101010; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -webkit-transition: transform 0.3s ease, opacity .3s ease-in-out; -moz-transition: transform 0.3s ease, opacity .3s ease-in-out; -o-transition: transform 0.3s ease, opacity .3s ease-in-out; transition: transform 0.3s ease, opacity .3s ease-in-out; position: absolute; opacity: 1; width: 100%; height: 40px; left: 0; border-style: solid; border-width: 0; text-align: center; line-height: 40px; } .next-showcase a:after { top: 40px; } .next-showcase a:hover:before { opacity: 0; } .next-showcase a:hover:after { opacity: 1; } .next-showcase a:hover:before, .next-showcase a:hover:after { -webkit-transform:translateY(-40px); -moz-transform:translateY(-40px); -ms-transform:translateY(-56px); transform:translateY(-40px); } /*Content area*/ .showcase .showcase-items { position: relative; height: 370px; } .showcase-item { position: absolute; top:0; left:0; width:100%; height:240px; z-index:1; } .showcase-item.active { z-index:2; } .showcase-item .item-content{ position: relative; width: calc(100% - 65px); text-align: left; padding: 35px 45px 38px 55px; -webkit-transition: background-color 0.25s ease; -moz-transition: background-color 0.25s ease; -o-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } .item-content .swiper-container-vertical>.swiper-scrollbar { left:auto; right: 0; } .showcase-item:not(.active) .item-content.text_bg { background-color: transparent !important; } .showcase-item .item-content span { transform: translateY(10px); opacity: 0; -moz-transition: transform 0.001s ease, opacity 0.3s ease; -o-transition: transform 0.001s ease, opacity 0.3s ease; -webkit-transition: transform 0.001s ease, opacity 0.3s ease; transition: transform 0.001s ease, opacity 0.3s ease; -moz-transition-delay: .2s, 0s; -o-transition-delay: .2s, 0s; -webkit-transition-delay: .2s, 0s; transition-delay: .2s, 0s; } .showcase-item.active .item-content span { -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -moz-transition: transform 0.45s ease-in-out, opacity 0.35s ease-in-out; -o-transition: transform 0.45s ease-in-out, opacity 0.35s ease-in-out; -webkit-transition: transform 0.45s ease-in-out, opacity 0.35s ease-in-out; transition: transform 0.45s ease-in-out, opacity 0.35s ease-in-out; } .showcase-item .item-content p { opacity: 0; -moz-transform: translateY(9px); -ms-transform: translateY(9px); -o-transform: translateY(9px); -webkit-transform: translateY(9px); transform: translateY(9px); -moz-transition: transform 5.1s ease, opacity 0.3s ease; -o-transition: transform 5.1s ease, opacity 0.3s ease; -webkit-transition: transform 5.1s ease, opacity 0.3s ease; transition: transform 5.1s ease, opacity 0.3s ease; } .showcase-item.active .item-content p { -moz-transition: transform .45s ease-in-out, opacity 0.35s cubic-bezier(0.4, 0, 1, 1); -o-transition: transform .45s ease-in-out, opacity 0.35s cubic-bezier(0.4, 0, 1, 1); -webkit-transition: transform .45s ease-in-out, opacity 0.35s cubic-bezier(0.4, 0, 1, 1); transition: transform .45s ease-in-out, opacity 0.35s cubic-bezier(0.4, 0, 1, 1); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -moz-transition-delay: .5s, .6s; -o-transition-delay: .5s, .6s; -webkit-transition-delay: .5s, .6s; transition-delay: .5s, .6s; opacity: 1; } .showcase-item.active .item-content .showcase_item_subtitle { -moz-transition-delay: .3s, .3s; -o-transition-delay: .3s, .3s; -webkit-transition-delay: .3s, .3s; transition-delay: .3s, .3s; } .item-content p{ height: 63px; overflow-y: auto; font-size: 14px; line-height: 20px; margin:5px 0; font-weight:400; } .showcase-item .showcase-link { float: right; margin-left: 65px; margin-top: 15px; padding: 0 20px 0 10px; text-transform: uppercase; color: #101010; background: #fff; text-decoration: none; position: relative; font-size: 11px; font-weight: 500; opacity: 0; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .showcase.right-align .showcase-item .showcase-link { margin-right:65px; } .showcase .showcase-item .showcase-link:hover { color:#073B87; } .showcase-item.active .showcase-link{ opacity:1; } .showcase-item .showcase-link:after { -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; transform-origin:100% 100%; position:absolute; top:46%; content:""; width:0px; height:1px; right: 5px; margin-left: -9px; margin-top: -3px; border-style: solid; border-width: 3px 3px 3px 4px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(0, 0, 0); -webkit-transition: border-color 0.4s ease; -moz-transition: border-color 0.4s ease; -o-transition: border-color 0.4s ease; transition: border-color 0.4s ease; opacity:1; } .showcase .showcase-item .showcase-link:hover:after { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(100, 100, 100); } /*item pics*/ .showcase-item .item-pics{ opacity:0; -webkit-transition: opacity 1.3s ease; -moz-transition: opacity 1.3s ease; -o-transition: opacity 1.3s ease; transition: opacity 1.3s ease; padding: 25px 61px 0 54px; width: calc(100% - 65px); position: relative; } .showcase-item .item-pics:after { content: ""; width: calc(100% - 130px); height: 1px; border-top: 1px dashed rgba(186,186,186,.3); position: absolute; top: 0; left: 65px; } .showcase.right-align .showcase-item .item-pics { padding: 25px 65px 0 0; } .showcase-item .item-pics.had_text_bg:after { display: none; } .showcase-item.active .item-pics{ opacity:1; } .showcase-item .item-pics img { -webkit-backface-visibility: initial; -moz-backface-visibility: initial; -ms-backface-visibility: initial; backface-visibility: initial; display:block; } .swiper-wrapper.ep_lightGallery a { width: auto; height: 100%; display: block; } .swiper-slide, .swiper-wrapper { height: auto; } .showcase .swiper-wrapper { height: 100px; color: #262626; -webkit-transition-timing-function : cubic-bezier(0.19, 1, 0.22, 1) !important; -moz-transition-timing-function : cubic-bezier(0.19, 1, 0.22, 1) !important; -o-transition-timing-function : cubic-bezier(0.19, 1, 0.22, 1) !important; transition-timing-function : cubic-bezier(0.19, 1, 0.22, 1) !important; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -moz-transform-style: unset; } .showcase .swiper-button-prev, .showcase .swiper-button-next { background: none; border-color: rgba(255,255,255,0.7); border-style: solid; border-width: 2px; margin-top: 0; width: 24px; height: 24px; right: 18px; border-radius: 50%; opacity: 0; -webkit-transition: opacity .3s ease, border .3s ease; -moz-transition: opacity .3s ease, border .3s ease; -o-transition: opacity .3s ease, border .3s ease; transition: opacity .3s ease, border .3s ease; } .showcase.light .swiper-button-prev, .showcase.light .swiper-button-next { border-color: rgba(0,0,0,0.7); } .showcase .item-pics:hover .swiper-button-prev, .showcase .item-pics:hover .swiper-button-next { opacity: 1; } .showcase .item-pics:hover .swiper-button-prev:hover, .showcase .item-pics:hover .swiper-button-next:hover { border-color:#073B87; } .showcase .swiper-button-prev { right:auto; left:20px; } .showcase.right-align .swiper-button-prev { margin-left:-68px; } .showcase.right-align .swiper-button-next { right: 17px; } .showcase .swiper-button-prev:before, .showcase .swiper-button-next:before { content: ""; width: 6px; height: 6px; border-top-width: 2px; border-top-style: solid; border-right-width: 2px; border-right-style: solid; border-top-color: rgba(255,255,255,0.7); border-right-color: rgba(255,255,255,0.7); position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 8px; left: 7px; backface-visibility: hidden; -moz-transition: border ease 200ms; -o-transition: border ease 200ms; -webkit-transition: border ease 200ms; transition: border ease 200ms; } .showcase.light .swiper-button-prev:before, .showcase.light .swiper-button-next:before { border-top-color: rgba(0,0,0,0.7); border-right-color: rgba(0,0,0,0.7); } .showcase .swiper-button-prev:hover:before, .showcase .swiper-button-next:hover:before { border-top-color:#073B87; border-right-color:#073B87; } .showcase .swiper-button-prev:before { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); left: 9px; top: 8px; } /*Style*/ .showcase.light .item-list li{ color:#333; } .showcase.light .next-showcase a { color:#333; } .showcase.light p { color:#000; width:100%; } .showcase p .swiper-slide { width:100% !important; } .showcase.light h3, .showcase.light h4 { color:#333; } .showcase.dark p .swiper-wrapper, .showcase.dark h3, .showcase.dark h4, .showcase.dark p, .showcase.dark .item-list li{ color:#fff; } .showcase .showcase_item_subtitle { display: block; font-size: 20px; line-height: 9px; margin-bottom: 20px; color:#ccc; font-weight: 600; } .showcase.dark .showcase_item_subtitle { color:#fff; } .showcase.light .showcase_item_subtitle { color:#272727; } .showcase.light .overlay { background-color: #fff; } .showcase.dark .overlay { background-color: #000; } .showcase.light .next-showcase a:after, .showcase.light .next-showcase a:before { border-color: rgba(51, 51, 51, 1) rgba(51, 51, 51, 0) rgba(51, 51, 51, 0) rgba(51, 51, 51,0); } .showcase.dark .next-showcase a:after, .showcase.dark .next-showcase a:before { border-color: rgba(250, 250, 250, 1) rgba(250, 250, 250, 0) rgba(250, 250, 250, 0) rgba(250, 250, 250,0); } .showcase.light .showcase-item .item-pics { border-top: 1px dashed rgba(128, 128, 128, 0.5); } .showcase.dark .item-content.text_bg { background-color: rgba(0,0,0,.3); border-bottom:0; } .showcase.light .item-content.text_bg { background-color: rgba(255,255,255,.7); border-bottom:0; } /*Direction*/ .showcase.left-align { text-align:right; } .showcase.right-align { text-align:left; } .showcase .showcase-nav.span4:after { content: ""; position: absolute; width:1px; height:2500px; top:0; right:0; background: #d3d3d3; opacity: .5; } .showcase.right-align .showcase-nav.span4:after { right:auto; left:0; } .showcase.left-align .span4, .showcase.left-align .showcase-nav, .showcase.left-align .showcase-items{ float: left; padding-right:0; } .showcase.right-align .span4, .showcase.right-align .showcase-nav, .showcase.right-align .showcase-items { float: right; padding-left:0; } .showcase.right-align .showcase-nav, .showcase.right-align .showcase-items { float: right; padding-left:0; } .showcase.right-align .item-list li { float: left; } .showcase.right-align .item-list li:before { right: 0; left: auto; margin-left: auto; margin-right: -10px; } .showcase.right-align .showcase-item .item-content{ margin-left: -55px; padding: 35px 65px 38px 55px; } .showcase.right-align .showcase-items { margin-left:auto; } /*-----------------------------------------------------------------------------------*/ /* 22. socail Share /*-----------------------------------------------------------------------------------*/ .socailshare { padding-top:5px; } .share-item { float:left; width: 90px; } .share-item.google { float:left; width: 70px; } .share-item > a { float:left !important; } .share-item.pin{ width:60px; } .social_links { position:absolute; bottom:-90px; left:0; padding:25px 0; cursor:default; z-index:5; } .social_links a { background-color:transparent; position:relative; text-decoration:none; color:#fff; width: 20px; display: block; text-align: center; } .social_links .social_links_list li { display: block; float: left; margin-right: 27px; font-size: 19px; opacity: 0; visibility: hidden; -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -o-transform: translateX(6px); -ms-transform: translateX(6px); transform: translateX(6px); -webkit-transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .4s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .4s cubic-bezier(0.645, 0.045, 0.355, 1) , -moz-transform .4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .4s cubic-bezier(0.645, 0.045, 0.355, 1) , transform .4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .4s cubic-bezier(0.645, 0.045, 0.355, 1) ,transform .4s cubic-bezier(0.645, 0.045, 0.355, 1); } .social_links .social_links_list.openToggle li { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } /* cascade hiding */ .social_links .social_links_list li:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .social_links .social_links_list li:nth-child(2) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .social_links .social_links_list li:nth-child(3) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .social_links .social_links_list li:nth-child(4) { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .social_links .social_links_list li:nth-child(5) { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } /* cascade visibility */ .social_links .social_links_list.openToggle li:nth-last-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .social_links .social_links_list.openToggle li:nth-last-child(2) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .social_links .social_links_list.openToggle li:nth-last-child(3) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .social_links .social_links_list.openToggle li:nth-last-child(4) { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .social_links .social_links_list.openToggle li:nth-last-child(5) { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .portfolio_detail_creative .project-subtitle { text-align: right; padding-right: 85px; margin-top:15px; color: #9a9a9a; } .portfolio_detail_creative .project-subtitle a { font-size: 14px; text-transform: capitalize; padding-right: 3px; font-weight: 400; color:#777; } .pd-arrows-button-next, .pd-arrows-button-prev { display: none; } /* portfolio Detail Ajax Social Share Btns */ .portfolio_social_share .social_links , .post_social_share .social_links { position:static; padding:0; cursor:default; z-index:5; display: inline-block; } .portfolio_detail_creative .social_links .social_links_list li { margin-right:10px; } .portfolio_detail_creative .social_share_toggle .social_links { bottom: auto; top: 1px; left: auto; color: #000; padding: 0; right: 25px; } .portfolio_detail_creative .social_share_toggle > i:first-child { margin-top: 5px; } .portfolio_detail_creative .social_links a i{ color:#000; font-size:15px; -webkit-transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1); } .social_share_toggle { display: inline-block; float: right; cursor: pointer; height: 47px; overflow: hidden; } .social_share_toggle > i:first-child { background-color: #262626; color: #FFF; padding: 0; font-size: 13px; float: right; margin-top: 15px; line-height: 16px; font-weight:700; } .social_share_toggle .social_links_list { float: right; } .social_share_toggle .social_links { width:auto; } .social_share_toggle:hover .social_links, .social_share_toggle.opened .social_links { width: 170px; -webkit-transition: width .01s linear 0s; -moz-transition: width .01s linear 0s; -o-transition: width .01s linear 0s; transition: width .01s linear 0s; } .portfolio_social_share .social_links i, .post_social_share .social_links i, .bd_socail_share .social_links i { color: #000; -webkit-transition: color .6s ease 0s; -moz-transition: color .6s ease 0s; -o-transition: color .6s ease 0s; transition: color .6s ease 0s; } .portfolio_social_share .social_links_list li:first-child , .post_social_share .social_links_list li:first-child , .bd_socail_share .social_links_list li:first-child { border:none; } .portfolio_social_share .social_links .social_links_list li , .post_social_share .social_links .social_links_list li , .bd_socail_share .social_links .social_links_list li { margin-right:10px; font-size:14px; } .blog_social_share_title { font-size: 14px; float: left; font-weight: 700; font-family:Lato,sans-serif; padding-right: 10px; text-transform: uppercase; } #PDetail span.icon-icons2:hover { color: #073b87; } /*-----------------------------------------------------------------------------------*/ /* 23. Widgets /*-----------------------------------------------------------------------------------*/ .sidebar{ padding: 15px 0 15px 0; margin-bottom:20px; } .sidebar.no-widgets { padding: 0; } .widget-area { color:#737373; } .widget-area .widget-title , .widget-area .widgettitle { color: #171717; font-size: 14px; line-height: 27px; margin-bottom: 20px; font-family: Poppins, sans-serif; font-weight: 600; } .toggleSidebar .widget-area .widget-title { margin-bottom: 20px; } .widget-area .widget_archive .screen-reader-text , .widget-area .widget_categories .screen-reader-text { display:none; } .widget-area .widget { margin-bottom:55px } .main-sidebar-container .widget-area .widget, .page-sidebar-container .widget-area .widget, #woocommerce-sidebar .widget-area .widget { padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #eeeeee; } .page-sidebar-container .widget-area .widge:last-child, #woocommerce-sidebar .widget-area .widget:last-child { border-bottom:none; } .widget-area .widget .nice-select { float:none; } .widget-area .widget:last-child{ margin-bottom:0 } .footer-widgetized-gradient .footer-widgetized { min-height:580px; } .footer-widgetized-gradient { min-height:800px; } .footer-widgetized a, .widget-area a { font-size: 13px; font-weight: 400; color: #666; text-decoration: none; line-height: 22px; font-family: Poppins, sans-serif; -moz-transition: color ease .3s; -o-transition: color ease .3s; -webkit-transition: color ease .3s; transition: color ease .3s; } .footer-widgetized a:hover, .widget-area a:hover { color:#111; } .widget_pages li ul , .widget_nav_menu li ul { margin-left: 20px; } .widget_px_facebook iframe { max-width:100%; } /* Calendar */ #wp-calendar, #wp-calendar td { background-color: rgba(55,58,65,0.04); } #wp-calendar, #wp-calendar caption, #wp-calendar td { border-color: rgba(218,222,225,0.8); } .old-ie #wp-calendar, .old-ie #wp-calendar caption, .old-ie #wp-calendar td { border-color: #dadee1; } #wp-calendar td:hover { background-color: rgba(55,58,65,0.08); } #wp-calendar th, #wp-calendar caption, #wp-calendar tfoot td, #wp-calendar tfoot td a { color: #373a41; } .light #wp-calendar th, .light #wp-calendar caption, .light #wp-calendar tfoot td, .light #wp-calendar tfoot td a { color: #d0d0d0; } #wp-calendar td.act { background-color: #2a83ed; color: #ffffff; } #wp-calendar { border-style: solid; border-width: 1px; margin: 25px 0 15px 0; font-weight:400; } #wp-calendar caption { padding: 5px 0 5px 0; height: auto; border-style: solid; border-width: 1px; border-bottom: none; font-weight:bold; } #wp-calendar th{ height: 25px; } #wp-calendar td { width: 34px; height: 25px; border-style: solid; border-width: 1px; vertical-align: middle; text-align: center; line-height: 20px; cursor: default; } .light #wp-calendar td { color:#d0d0d0; } #wp-calendar td a { display: block; width: 100%; text-decoration: none; } #wp-calendar td.pad, .footer #wp-calendar td.pad { background: none !important; border: none; } #wp-calendar tfoot td { width: auto; } #wp-calendar tfoot td#prev { padding-left: 10px; text-align: left; } #wp-calendar tfoot td#next { padding-right: 10px; text-align: right; } #wp-calendar tfoot td a:hover { background: none; text-decoration: none; } /* Search */ .widget-area .search-form { padding: 0px 5px 0px 10px; border:1px solid #eee; } .widget-area .search-form input[type="text"]{ color: #111111; border:none; background-color:transparent; height:38px; padding-left: 0; width: 100%; } .widget-area .search-form input[type="submit"]{ width:32px; background-color:transparent; } .widget-area .search-form input[type="submit"]:focus , .widget-area .search-form input[type="submit"]:hover { outline: none } .widget-area .search-form input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #a6a6a6; } .widget-area .search-form input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #a6a6a6; } .widget-area .search-form input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #a6a6a6; } .widget-area .search-form input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #a6a6a6; } /* Lists */ .widget-area ul{ margin:0; list-style: none; } .widget-area li{ padding:0; } .widget-area li:first-child{ padding-top: 0; } .widget-area li:last-child{ margin-bottom: 0; } .widget-area li a{ display: inline-block; } .widget-area li ul{ margin-top:10px; padding-left:10px; } .widget-area li ul li:last-child{ border-bottom: none; padding-bottom:0; } /* Select Element */ .widget-area select{ width: 95%; } /* recent post */ .widget_recent_entries li { margin-bottom: 14px; } .footer-widgetized-wrap .textwidget, .footer-widgetized-wrap .widget_recent_entries a, .widget_recent_entries a { font-size: 14px; font-family:Poppins,sans-serif; } .widget_recent_entries .post-date { font-size: 13px; font-family:Lato,sans-serif; font-weight:400; color:#949494; display:block; } /* recent comment */ .widget_recent_comments a { font-size: 14px; font-family:Poppins,sans-serif; font-weight:500; color:#555; } .widget_recent_comments .comment-author-link { font-size: 13px; font-family:Lato,sans-serif; font-weight:400; } /* Flickr Badge */ .flickr-container{ margin-left: -5px; } .flickr-container:after { clear:both; content:""; display:table } .flickr-container .flickr_badge_image { float:left; height:50px; margin:5px; position:relative; width:50px } .flickr-container .flickr_badge_image img { -moz-transition:opacity .2s; -o-transition:opacity .2s; -webkit-transition:opacity .2s; transition:opacity .2s; } .flickr-container .flickr_badge_image img:hover { opacity:.8; } /* Instagram */ .jr-insta-thumb ul.thumbnails.jr_col_4 li a img { width: 100%; height: 100%; } /* Tag cloud widget*/ .tagcloud{ display:table; } .tagcloud a { font-size: 13px!important; line-height: 13px !important; font-family: lato,sans-serif; margin-right: 5px; margin-bottom:5px; border: 1px solid #e1e1e1; height: 12px; display: block; border-radius: 3px; float: left; padding: 4px 5px; color: #6f6f6f; -moz-transition: background-color ease 200ms, border-color 200ms ease; -o-transition: background-color ease 200ms, border-color 200ms ease; -webkit-transition: background-color ease 200ms, border-color 200ms ease; transition: background-color ease 200ms, border-color 200ms ease; } .tagcloud a:hover, .tagcloud a.current-tag { background-color: #373737; color: #fff !important; border:1px solid #373737; } /* tag cloud widget dark and light in footer */ .footer-widgetized.light .tagcloud a { color:#C5C5C5; } .textwidget{ font-size:14px; font-family:Lato,sans-serif; font-weight:400; } /*-----------------------------------------------------------------------------------*/ /* 24. Classic blog /*-----------------------------------------------------------------------------------*/ .cblog span.post-categories{ font-size: 17px; font-weight: 500; font-family: Lato, serif; } .cblog span.post-categories a { color: #073b87; text-decoration: inherit; -moz-transition: color ease 500ms; -o-transition: color ease 500ms; -webkit-transition: color ease 500ms; transition: color ease 500ms; } .cblog span.post-categories a:hover { color: #262626; text-decoration:inherit; } .cblog h2.post-title a, .cblog h2.post-title, #blogSingle h1.post-title { font-size: 40px; line-height: 38px; font-weight: bold; font-family: Poppins, serif; color: #262626; text-decoration: inherit; margin-top:10px; } .cblog h2.post-title a { -moz-transition: color ease 500ms; -o-transition: color ease 500ms; -webkit-transition: color ease 500ms; transition: color ease 500ms; } .cblog h2.post-title a:hover { color:#073B87; } .cblog .post-date{ border: none; width: auto; margin-right: 0; float: none; } .cblog .post-date , .cblog span.post-info-separator, .cblog span.post-author a, .cblog span.post-comments a{ font-size: 13px; font-weight: 500; font-family: Lato, serif; color: #4e4e4e; line-height:15px; text-decoration:inherit; padding-right:5px; } .cblog span.post-author a:hover, .cblog span.post-comments a:hover { color:#073B87; text-decoration:none; } .cblog .readmore_button{ font-family: Poppins, serif; border-color: #4e4e4e; border-radius: 20px; color: #4e4e4e; margin:30px auto 60px; font-size: 14px; -moz-transition: color .2s ease, background-color .35s ease, border-color .35s ease; -o-transition: color .2s ease, background-color .35s ease, border-color .35s ease; -webkit-transition: color .2s ease, background-color .35s ease, border-color .35s ease; transition: color .2s ease, background-color .35s ease, border-color .35s ease; } .cblog .readmore_button:hover { background-color: #073B87; border-color:transparent; } .cblog .readmore_button.ep_button span.txt:before { color:#fff; } .cblog hr { width: 100%; background-color: #e8e8e8; margin-bottom: 40px; display:flex; } .cblog .post:last-child hr { display:none; } #blogSingle hr{ margin:0px; width: 100%; background-color: #e8e8e8; } .cblog span.post-author:before, .cblog span.post-comments:before{ margin-right: 7px; } .cblog .post-content { position: relative; } /*Overlay*/ .cblog .post-content .quotePostType a:before{ display: block; background-color: #262626; opacity:0.5; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .page-template-default:not(.woocommerce-page) .page :not(ul.variations) li, .cblog .post-content li, .singlePost .post li, .cblog .post-content p, .singlePost .post p { font-family: Lato,sans-serif; font-size: 15px; line-height: 26px; font-weight: normal; color: #6e6e6e; } .cblog .quotePostType .post-image, #blogSingle .quotePostType .post-image { display: block; padding: 60px 60px 90px 60px; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; } .cblog .quotePostType a { text-decoration:inherit; } .cblog .quotePostType .post-image .quote_content h3, #blogSingle .quotePostType .post-image .quote_content h3 { font-size: 26px; font-weight: bold; font-family:Poppins,sans-serif; line-height: 40px; color: #fff; padding-top: 35px; position: relative; font-style:italic; } .cblog .quotePostType .post-image .quote_content.ep-icon:before, #blogSingle .quotePostType .post-image .quote_content.ep-icon:before{ font-size: 25px; color: #fff; position: relative; } .cblog .quotePostType .post-image .quote_author h3 , #blogSingle .quotePostType .post-image .quote_author h3 { font-size: 13px; font-family:Lato,sans-serif; font-weight: 500; color: #fff; float: right; position: relative; } .cblog .quotePostType .post-image .quote_author , #blogSingle .quotePostType .post-image .quote_author { padding-top: 30px; } .cblog .post-meta { padding:35px 0px 20px; position:relative; } .cblog .sticky .post-meta:before { border-radius:5px; color:#fff; background-color:#333; text-align:center; font-size:23px; position:absolute; top:-20px; right:30px; height:45px; width:30px; content: "\f08d"; line-height:45px; font-family:'Linearicons'; } #blogSingle .post-meta { padding:40px 0 30px; } /* blog without sidebar*/ #blogSingle .fullWidthBlog { padding : 0; } .cblog .fullWidthBlog .post-meta, #blogSingle .fullWidthBlog .post-meta{ text-align: center; } .cblog .fullWidthBlog .post-content p , #blogSingle .span12 .post-content p { text-align: center; } #blogSingle .post-meta{ text-align: left; } .cblog .fullWidthBlog .readmore_button, #blogSingle .span12 .readmore_button{ display: table; float: none; } #blogSingle.blogHasSidebar .ep-section .container, .cblog .ep-section .container { width: inherit; } .cblog .container { padding-top:50px; } .cblog .video-frame { height: auto; padding-bottom: 0; position: static; overflow: visible; margin-bottom: 0; } .cblog .flex-control-nav { display:none; } .cblog .post-content .moretag { text-decoration:none; text-transform: uppercase; color: #000; font-weight: 700; display:none; background-color:#fff; text-align: right; position: relative; padding-left:9px; float:right; position:absolute; bottom:-27px; right:0; z-index:1; -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s; } .cblog .post-content .moretag:hover { color:#ccc; -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s; } .cblog .post-content .redmore_line { width:100%; background-color:#ccc; height:3px; margin-top:24px; position:absolute; bottom:-18px; display:none; } .cblog .pageNavigation .more-link-arrow { margin:0 0 20px 0; } .cblog .swiper-wrapper { height:420px; } .cblog .swiper-wrapper .swiper-slide { background-size:cover !important; cursor:grab; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; background-position:center !important; } .blog-masonry-container .swiper-wrapper:not(.disabled_swiper) .swiper-slide { cursor:grab; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; } #blogSingle .bpSwiper { -moz-transition: 500ms ease-in-out height; -o-transition: 500ms ease-in-out height; -webkit-transition: 500ms ease-in-out height; transition: 500ms ease-in-out height; } .bpSwiper .swiper-slide img { backface-visibility:visible; } /* img alignment */ img.alignleft, .wp-caption.alignleft { margin: 12px 24px 12px 0; margin: 0.857142857rem 1.714285714rem 0.857142857rem 0; } img.alignright, .wp-caption.alignright { margin: 12px 0 12px 24px; margin: 0.857142857rem 0 0.857142857rem 1.714285714rem; } img.aligncenter, .wp-caption.aligncenter { clear: both; margin-top: 12px; margin-top: 0.857142857rem; margin-bottom: 12px; margin-bottom: 0.857142857rem; } /*-----------------------------------------------------------------------------------*/ /* 25. Portfolio and portfolio detial / load more buttons /*-----------------------------------------------------------------------------------*/ .isotope-item.noimages { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: center; } .isotope-item.noimages .postphoto .pSlide:before{ background-color:transparent; } .isotope-item.noimages.wide .pSlide ,.isotope-item.noimages.wide .postphoto { background-image: url("../img/placeholders/noImageWide.jpg"); } .isotope-item.noimages.big .pSlide,.isotope-item.noimages.big .postphoto { background-image: url("../img/placeholders/noImage.jpg"); } .isotope-item.noimages.square .pSlide, .isotope-item.noimages.square .postphoto { background-image: url("../img/placeholders/noImageSquare.jpg"); } .isotope-item.noimages.slim .pSlide,.isotope-item.noimages.slim .postphoto { background-image: url("../img/placeholders/noImageSlim.jpg"); } .isotope-item.noimages.hslim .pSlide, .isotope-item.noimages.hslim .postphoto{ background-image: url("../img/placeholders/noImageHslim.jpg"); } .isotope-item.noimages .pSlide{ padding-top:0px!important; } .postphoto img { display:block; max-width: 100% !important; height: auto !important; } div[data-layout-style="masonry"] .postphoto img { width:100%; position: absolute; top: 0; left: 0; } .postphoto .featured-image { margin:0; } .postphoto .swiper-container-fade .swiper-slide { height: 100%; -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; } .postphoto { padding:0; position:relative; overflow:hidden; width:310px; display:block; min-height:100px; } .postphoto .title ,.postphoto .skills { opacity:0; z-index:4; position: absolute; color:#fff; bottom: 5px; left: 23px; } .postphoto .title { font-size:22px; font-family: Lato,sans-serif; font-weight:400; text-transform:uppercase; line-height:22px; -moz-transition: bottom 1000ms , opacity 500ms; -o-transition: bottom 1000ms , opacity 500ms; -webkit-transition: bottom 1000ms , opacity 500ms; transition: bottom 1000ms , opacity 500ms; } .postphoto:hover .title { opacity:1; bottom: 44px; -moz-transition: bottom 500ms , opacity 1000ms; -o-transition: bottom 500ms , opacity 1000ms; -webkit-transition: bottom 500ms , opacity 1000ms; transition: bottom 500ms , opacity 1000ms; } .postphoto .skills { bottom: 0px; font-size:14px; font-family:Lato,sans-serif; text-transform:capitalize; -moz-transition: bottom 400ms , opacity 500ms; -o-transition: bottom 400ms , opacity 500ms; -webkit-transition: bottom 400ms , opacity 500ms; transition: bottom 400ms , opacity 500ms; } .postphoto:hover .skills { -moz-transition: bottom 800ms , opacity 1000ms; -o-transition: bottom 800ms , opacity 1000ms; -webkit-transition: bottom 800ms , opacity 1000ms; transition: bottom 800ms , opacity 1000ms; opacity:.7; bottom: 23px; } .postphoto .overlay { position:absolute; height:100%; width:100%; bottom:0; left:0; z-index:3; text-decoration:none; background-color:rgba(0, 0, 0, 0); visibility: hidden; -webkit-transition: background-color .4s ease-in-out, visibility .4s ease-out; -moz-transition: background-color .4s ease-in-out, visibility .4s ease-out; -o-transition: background-color .4s ease-in-out, visibility .4s ease-out; transition: background-color .4s ease-in-out, visibility .4s ease-out; } .isotope.borderType .postphoto .overlay { padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; } .isotope.borderType .postphoto:hover .overlay { visibility: visible; } .isotope.simpleType .postphoto .frame { display:none; } .postphoto:hover .overlay { background-color:rgba(0, 0, 0, 0.7); visibility: visible; } .isotope.lightStyle .postphoto .overlay { background-color:rgba(255, 255, 255, 0); } .isotope.lightStyle .postphoto:hover .overlay { background-color:rgba(255, 255, 255, 0.8); visibility: visible; } a.postlink { display:block; width: 100%; height: 100%; } .isotope-item { float: left; margin: 0; display: table; } .portfolioSection .title h3 { color:#101010; font-family: Poppins, sans-serif; font-weight: 500; font-size: 30px; line-height: 50px; margin:0; } .portfolioSection .titleSpace { margin-left:0px; margin-top:19px; } .portfolio_text.portfolioSection .titleSpace ,.portfolio_space.portfolioSection .titleSpace { margin-left:5px; } .portfolio_text .subnavigation ,.portfolio_space .subnavigation { right:10px; } .fullWidth .portfolio_space .isotope, .fullWidth .portfolio_text .isotope { margin-left:8px; } .portfolioSection .container.title_container { margin-left: -15px; } .portfolioSection .subtitle { font-size: 14px; color:#363636; font-weight: 400; } /* Gutter Portfolio */ .gridspace .isotope-item { margin:9px; } .portfolio_text .postphoto , .portfolio_space .postphoto { margin:7px; } /* text portfolio */ .portfolio_text_meta { display: none; -moz-opacity: 0; opacity: 0; } .portfolio_text_meta:not(.textVisiblity) { -moz-transition-delay: 0s !important; -o-transition-delay: 0s !important; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; } .portfolio_text .portfolio_text_meta { height: 68px; padding-top: 10px; display: table-caption; margin-left: 7px; caption-side: bottom; } .portfolio_text .portfolio_text_meta .right_meta { padding-left: 5px; padding-right: 10px; float: left; font-family:Poppins,sans-serif; position: fixed; } .portfolio_text .portfolio_text_meta .right_meta .title { font-size:18px; line-height:18px; color:#2b2b2b; font-family:Poppins,sans-serif; font-weight:700; } .portfolio_text.lightStyle .portfolio_text_meta .right_meta .title{ color:#fff; } .portfolio_text .portfolio_text_meta .right_meta .category a { font-size:12px; line-height:23px; color:#000; text-transform:capitalize; opacity:.7; font-weight:600; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .portfolio_text.lightStyle .portfolio_text_meta .right_meta .category a { color:#fff; } .portfolio_text .portfolio_text_meta .right_meta .category { color:#5b5b5b; } .portfolio_text.lightStyle .portfolio_text_meta .right_meta .category { color:#fff; } .portfolio_text .portfolio_text_meta .right_meta .category a:hover { opacity:1; text-decoration:none; } .portfolio_text.lightStyle .portfolio_text_meta .right_meta .category a:hover { opacity:1; text-decoration:none; } .portfolio_text .portfolio_text_meta .like { height: 30px; width: 30px; float: left; } .portfolio_text .portfolio_text_meta .like a { text-decoration: none; font-family: Lato,sans-serif; width: 30px; height: 50px; display: inline-block; } .portfolio_text .portfolio_text_meta .like a .no_like { font-family: Lato,sans-serif; display:block; font-size: 12px; padding-left:4px; } .portfolio_text .portfolio_text_meta .like a .count { color: #5b5b5b; display:block; text-align: center; font-size: 14px; line-height:25px; font-weight:600; -moz-transition: color .5s ease-in-out; -o-transition: color .5s ease-in-out; -webkit-transition: color .5s ease-in-out; transition: color .5s ease-in-out; } .portfolio_text.lightStyle .portfolio_text_meta .like a .count { color: #fff; } .portfolio_text .portfolio_text_meta .like a .count.no_like { display:none; } .portfolio_text.lightStyle .portfolio_text_meta .like .jm-post-like.ep-icon:before { background-color:#ffffff; color:#2b2b2b; } .portfolio_text .portfolio_text_meta .like .jm-post-like.liked.ep-icon:before { color:#073B87; } .postphoto { background-position: center; -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; } .postphoto .pSlide > div { width: 100% !important; height: 0; /* lazy loading add Padding that don't need height */ position: relative; background-position: center; -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; } .postphoto .pSlide > div.lazy-load.is-loading { opacity: 0; } .postphoto .pSlide > div.lazy-load.is-loading.lazy-loaded { opacity: 1; } .postphoto .pSlide:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; -webkit-transition: background-color .3s ease; transition: background-color .3s ease; background-color: #eee; } .portfolioswiper , .portfolioswiper .swiper-container { height:100% !important; width:100% !important; } .postphoto .hoverContent { position:relative; height:100%; width:100%; } .postphoto .overlay .center-line { height:4px; background-color:#fff; width:0; top:50%; margin:0 auto; position:relative; opacity:0; -moz-transition:width .3s cubic-bezier(.175,.885,.32,0.8), opacity .3s cubic-bezier(.175,.885,.32,0.8); -o-transition:width .3s cubic-bezier(.175,.885,.32,0.8), opacity .3s cubic-bezier(.175,.885,.32,0.8); -webkit-transition:width .3s cubic-bezier(.175,.885,.32,0.8), opacity .3s cubic-bezier(.175,.885,.32,0.8); transition:width .3s cubic-bezier(.175,.885,.32,0.8), opacity .3s cubic-bezier(.175,.885,.32,0.8); } .isotope.lightStyle .postphoto .overlay .center-line { background-color:#000; } .postphoto:hover .overlay .center-line { width:25%; opacity:1; } .wide .postphoto:hover .overlay .center-line { width:300px; } .big .postphoto:hover .overlay .center-line, .hslim .postphoto:hover .overlay .center-line { width:200px; } .title-wrap { height: 50%; width: 100%; display: block; position: absolute; top: 50%; margin-top: 2px; } .galleryItem .title-wrap { height: auto; min-height: 72px; width: 100%; display: block; position: relative; top: 50%; margin-top: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .postphoto .overlay .titleContainer { top: -8px; position:absolute; width:100%; -webkit-transition:top .3s cubic-bezier(.175,.885,.32,0.8); -moz-transition:top .3s cubic-bezier(.175,.885,.32,0.8); -o-transition:top .3s cubic-bezier(.175,.885,.32,0.8); transition:top .3s cubic-bezier(.175,.885,.32,0.8); } .postphoto:hover .overlay .titleContainer { top: 10px; -webkit-transition:top .2s cubic-bezier(.175,.885,.32,0.8); -moz-transition:top .2s cubic-bezier(.175,.885,.32,0.8); -o-transition:top .2s cubic-bezier(.175,.885,.32,0.8); transition:top .3s cubic-bezier(.175,.885,.32,0.8); } .borderType .postphoto:hover .overlay .titleContainer { top: 8px; } .postphoto .overlay .hover-title { margin:0 auto; opacity:0; color:#fff; font-size:25px; line-height:32px; text-align:center; text-transform: uppercase; font-weight:700; padding:0 5%; font-family:Poppins,sans-serif; -webkit-transition: opacity .2s ease-in; -moz-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; transition: opacity .2s cubic-bezier(0.165, 0.84, 0.44, .9); } .wide .overlay .hover-title, .big .overlay .hover-title, .hslim .overlay .hover-title { font-size: 34px; line-height:38px; } .isotope.lightStyle .postphoto .overlay .hover-title { color:#000; } .postphoto:hover .overlay .hover-title{ opacity:1; -moz-transition: opacity 300ms .3s cubic-bezier(.175,.885,.32,0.8); -o-transition: opacity 300ms .3s cubic-bezier(.175,.885,.32,0.8); -webkit-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); } .postphoto .overlay .hover-subtitle { text-transform: capitalize; margin: 0 auto; opacity: 0; color: #BEBEBE; font-size: 14px; line-height: 14px; text-align: center; font-weight: 600; -moz-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); -o-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); -webkit-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); transition: opacity .3s cubic-bezier(.175,.885,.32,0.8); } .wide .overlay .hover-subtitle, .big .overlay .hover-subtitle, .hslim .overlay .hover-subtitle { font-size: 14px; line-height:24px; } .isotope.lightStyle .postphoto .overlay .hover-subtitle { color:#5e5e5e; } .postphoto:hover .overlay .hover-subtitle { opacity:1; } .icon-wrap { height: 50%; width: 100%; overflow: hidden; display: block; position: absolute; top:0; } .postphoto .overlay .icon-type { position:absolute; opacity:0; bottom:-3px; display:block; height:40px; width:40px; border-radius:50%; left:calc(50% - 20px); background-color:#fff; background-repeat:no-repeat; -moz-transition:bottom .25s cubic-bezier(.175,.885,.32,0.8), opacity .25s cubic-bezier(.175,.885,.32,0.8); -o-transition:bottom .25s cubic-bezier(.175,.885,.32,0.8), opacity .25s cubic-bezier(.175,.885,.32,0.8); -webkit-transition:bottom .25s cubic-bezier(.175,.885,.32,0.8), opacity .25s cubic-bezier(.175,.885,.32,0.8); transition:bottom .3s cubic-bezier(.175,.885,.32,0.8), opacity .2s cubic-bezier(.175,.885,.32,0.8); } .postphoto:hover .overlay .icon-type { bottom: 15px; opacity:1; } .borderType .postphoto:hover .overlay .icon-type { bottom: 8px; } .postphoto .overlay .icon-type:before { line-height: 40px; text-align: center; width: 40px; display: block; font-size: 21px; color: #000; } .isotope.lightStyle .postphoto .overlay .icon-type { background-color:#000; } .isotope.lightStyle .overlay .icon-type:before { color: #fff; } .format-standard .postphoto .overlay .icon-type:before { content: "\e610"; } .format-gallery .postphoto .overlay .icon-type:before { content: "\e017"; } .format-video .postphoto .overlay .icon-type:before { content: "\e6f7"; } .format-audio .postphoto .overlay .icon-type:before { content: "\e6e5"; } .format-link .postphoto .overlay .icon-type:before { content: "\e917"; } .project-skill a:hover { text-decoration:none; } /* dark and light - ;load more button and Filter , portfolio title and portfolio subtitle */ .portfolioSection.lightStyle .subtitle, .portfolioSection.lightStyle .title h3, .portfolioSection.lightStyle .subnavigation .filter_item, .portfolioSection.lightStyle .subnavigation .filter_item.active, .portfolioSection.lightStyle .subnavigation .filter_item:hover, .portfolioSection.lightStyle .pLoadMore .loadMore { color: #fff; } .portfolioSection.lightStyle .filterToggle .filterLeftLine, .portfolioSection.lightStyle .filterToggle .filterRightLine, .portfolioSection.lightStyle .filterToggle .toggleLineContainer .lineBarFirst, .portfolioSection.lightStyle .filterToggle .toggleLineContainer .lineBarSecond, .portfolioSection.lightStyle .subnavigation .filterline { background-color: #fff; } .portfolioSection.lightStyle .pLoadMore .loadMore .text:before { border-top: 1px solid #fff; } /* portfolio hover like*/ .postphoto .like { height:50px; width:32px; float:left; position: absolute; bottom: 10px; left: 50%; margin-left: -16px; opacity: 0; z-index: 3; -moz-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8) .1s, bottom .3s ease; -o-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8) .1s, bottom .3s ease; -webkit-transition: opacity .3s cubic-bezier(.175,.885,.32,0.8) .1s, bottom .3s ease; transition: opacity .3s cubic-bezier(.175,.885,.32,0.8), bottom .3s ease; } .gallery_carousel .postphoto .like, .simpleGallery .postphoto .like, .portfolio_text .postphoto .like { top: calc(50% - 25px); } .hideLikeBtn .postphoto .like { display:none; } .postphoto:hover .like { opacity: 1; bottom: 0px; } .postphoto .like a { text-decoration: none; font-family:Lato,sans-serif; display: block; position:relative; } .postphoto .like a .no_like { font-family: Lato,sans-serif; display:block; font-size: 12px; padding-left:4px; } .postphoto .like a .count { color: #fff; display:block; text-align: center; font-size: 14px; line-height:25px; font-weight: 600; -moz-transition: color .5s ease-in-out; -o-transition: color .5s ease-in-out; -webkit-transition: color .5s ease-in-out; transition: color .5s ease-in-out; } .isotope.lightStyle .postphoto .like a .count { color: #1e1e1e; } .creativeType .postphoto .like a .count, .borderType .postphoto .like a .count, .simpleType .postphoto .like a .count { position: absolute; top: 0; left: 32px; padding-top: 5px; } .epicoSection.portfolio_text .postphoto .like a .count { top:auto; left:auto; padding-top:0; position:static; } .postphoto .like a .count.no_like{ display:none; } .postphoto .like .jm-post-like.ep-icon:before { font-family: 'Linearicons'; font-size: 18px; color: #fff; text-align: center; padding-top: 6px; display: block; padding-left: 1px; font-weight:600; -moz-transition: color .5s ease-in-out; -o-transition: color .5s ease-in-out; -webkit-transition: color .5s ease-in-out; transition: color .5s ease-in-out; } .isotope.lightStyle .postphoto .like .jm-post-like.ep-icon:before { color: #1e1e1e; } .simpleGallery .postphoto .like .jm-post-like.ep-icon:before { color: #fff; } .isotope.lightStyle.simpleGallery .postphoto .like .jm-post-like.ep-icon:before { color: #1e1e1e; } .simpleGallery .postphoto .like a { border-radius: 50%; line-height: 22px; height: 32px; } .postphoto .like .jm-post-like.liked.ep-icon:before, .isotope.lightStyle .postphoto .like .jm-post-like.liked.ep-icon:before { color:#073B87; } /* portfolio hover:borders */ .postphoto .overlay .frame, .postphoto .overlay .frame div { position: absolute; } .postphoto .overlay .frame.top { left: 0; top: 0; width: 100%; height: 2px; } .postphoto .overlay .frame.right { right: 1px; top: 0; width: 2px; height: 100%; } .postphoto .overlay .frame.bottom { right: 0; bottom: 0; width: 100%; height: 2px; } .postphoto .overlay .frame.left { left: 0; bottom: 0; width: 2px; height: 100%; } .postphoto .overlay .frame div { background-color:#fff; width:0; opacity: 0; height:2px; } .isotope.lightStyle .postphoto .overlay .frame div { background-color: #000; } .postphoto .overlay .frame.top div, .postphoto .overlay .frame.bottom div { -webkit-transition: width .2s cubic-bezier(.175,.885,.32,0.8); -moz-transition: width .3s cubic-bezier(.175,.885,.32,0.8); -o-transition: width .3s cubic-bezier(.175,.885,.32,0.8); transition: width .4s cubic-bezier(.175,.885,.32,0.8), opacity .4s cubic-bezier(.175,.885,.32,0.8); } .postphoto .overlay .frame.left div, .postphoto .overlay .frame.right div { -webkit-transition: height .2s cubic-bezier(.175,.885,.32,0.8); -moz-transition: height .3s cubic-bezier(.175,.885,.32,0.8); -o-transition: height .3s cubic-bezier(.175,.885,.32,0.8); transition: height .4s cubic-bezier(.175,.885,.32,0.8), opacity .4s cubic-bezier(.175,.885,.32,0.8); } .postphoto .overlay .frame.top div { width:0; height:3px; left:0; } .postphoto .overlay .frame.bottom div { width:0; height:3px; right:0; } .postphoto .overlay .frame.left div { width:3px; height:0; bottom:0; } .postphoto .overlay .frame.right div { width:3px; height:0; top:0; } .postphoto:hover .overlay .frame.top div, .postphoto:hover .overlay .frame.bottom div{ width:100%; opacity: 1; -webkit-transition: width .3s cubic-bezier(.175,.885,.32,0.9), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: width .3s cubic-bezier(.175,.885,.32,0.9), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: width .3s cubic-bezier(.175,.885,.32,0.9), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: width .3s cubic-bezier(.175,.885,.32,0.9), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .postphoto:hover .overlay .frame.left div, .postphoto:hover .overlay .frame.right div { height:100%; opacity: 1; -webkit-transition: height .3s cubic-bezier(.175,.885,.32,0.8), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: height .3s cubic-bezier(.175,.885,.32,0.8), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: height .3s cubic-bezier(.175,.885,.32,0.8), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: height .3s cubic-bezier(.175,.885,.32,0.8), opacity .15s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .big .postphoto:hover .overlay .frame.top div, .hslim .postphoto:hover .overlay .frame.bottom div { -webkit-transition: width .35s cubic-bezier(.175,.885,.32,0.9), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: width .35s cubic-bezier(.175,.885,.32,0.9), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: width .35s cubic-bezier(.175,.885,.32,0.9), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: width .35s cubic-bezier(.175,.885,.32,0.9), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .big .postphoto:hover .overlay .frame.left div, .hslim .postphoto:hover .overlay .frame.right div { -webkit-transition: height .35s cubic-bezier(.175,.885,.32,0.8), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: height .35s cubic-bezier(.175,.885,.32,0.8), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: height .35s cubic-bezier(.175,.885,.32,0.8), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: height .35s cubic-bezier(.175,.885,.32,0.8), opacity .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .wide .postphoto:hover .overlay .frame.top div, .wide .postphoto:hover .overlay .frame.bottom div { -webkit-transition: width .4s cubic-bezier(.175,.885,.32,0.9), opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: width .4s cubic-bezier(.175,.885,.32,0.9), opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: width .4s cubic-bezier(.175,.885,.32,0.9), opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: width .4s cubic-bezier(.175,.885,.32,0.9), opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } /* portfolio hover:creative */ .isotope.creativeType .postphoto { cursor: pointer; } .isotope.creativeType .postphoto .overlay { width: calc(100% - 34px); height:calc(100% - 34px); bottom:17px; left:17px; visibility: hidden; } .isotope.creativeType .postphoto:hover .overlay { background-color:rgba(0, 0, 0, 0.85); visibility: visible; } .isotope.creativeType.lightStyle .postphoto .overlay { background-color:rgba(255, 255, 255, 0); } .isotope.creativeType.lightStyle .postphoto:hover .overlay { background-color:rgba(255, 255, 255, 0.85); visibility: visible } .isotope.creativeType .title-wrap { overflow: hidden; } .isotope.creativeType .postphoto .overlay .titleContainer { top: -100px; -webkit-transition: top 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: top 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: top 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: top 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .isotope.creativeType .postphoto:hover .overlay .titleContainer { top: 8px; -webkit-transition: top .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; -moz-transition: top .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; -o-transition: top .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; transition: top .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; } .isotope.creativeType .postphoto .overlay .icon-type { bottom: -40px; opacity: 1; left:auto; right:34px; -webkit-transition: bottom .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -moz-transition: bottom .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; -o-transition: bottom .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; transition: bottom .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } .isotope.creativeType .postphoto:hover .overlay .icon-type { bottom: 8px; -webkit-transition: bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; -moz-transition: bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; -o-transition: bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; transition: bottom .4s cubic-bezier(0.165, 0.84, 0.44, 1) .2s; } .isotope.creativeType .postphoto .overlay .hover-title, .isotope.creativeType .postphoto .overlay .hover-subtitle { opacity: 1; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .isotope.creativeType .postphoto .overlay .center-line { position:absolute; left:-17px; opacity:1; height: 2px; -moz-transition:width .25s cubic-bezier(0.215, 0.61, 0.355, 1) .2s; -o-transition:width .25s cubic-bezier(0.215, 0.61, 0.355, 1) .2s; -webkit-transition:width .25s cubic-bezier(0.215, 0.61, 0.355, 1) .2s; transition:width .25s cubic-bezier(0.215, 0.61, 0.355, 1) .2s; } .isotope.creativeType .postphoto:hover .overlay .center-line { width: calc(100% - 17px); -moz-transition:width .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -o-transition:width .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition:width .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition:width .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .isotope.creativeType .wide .postphoto:hover .overlay .center-line { width: calc(50% - 17px); } .isotope.creativeType .wide .icon-wrap, .isotope.creativeType .wide .title-wrap { width: 50%; } .portfolio_text .icon-wrap , .portfolio_text .title-wrap , .portfolio_text .center-line { display:none; } .isotope.creativeType .postphoto .overlay .hover-title { padding:0 0 0 5%; text-align: right; margin-right: 34px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .isotope.creativeType .postphoto .overlay .hover-subtitle { padding:0 0 0 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: right; margin-right: 34px; } .isotope.creativeType .postphoto .overlay .frame, .isotope.creativeType .postphoto .overlay .frame div { display: none; } .isotope.creativeType .postphoto .like { bottom: -10px; } .isotope.creativeType .postphoto:hover .like { bottom: 0px; } .isotope.creativeType .wide .postphoto .like { margin-left: -58px; } /* portfolio filter styles */ .portfolio_height { min-height:124px; } .portfolio-header { position:relative; } .subnavigation { font-size:13px; position:absolute; top:-88px; right:0px; display:table; margin:0 auto 32px; z-index:2; } .subnavigation li { display:block; height: 40px; float:left; margin:0; cursor: pointer; } .portfolioSection.lightStyle .subnavigation .filter_item, .subnavigation .filter_item { position: relative; text-decoration: none; color: #999; display: block; padding: 0 22px 0 12px; text-transform: uppercase; font-size: 13px; line-height: 14px; height: 100%; overflow: hidden; font-family: Poppins, sans-serif; font-weight: 600; -moz-transition: color .7s ease; -o-transition: color .7s ease; -webkit-transition: color .7s ease; transition: color .7s ease; } .subnavigation li:last-child .filter_item { padding-right:0px; } .toggle-style .subnavigation li:last-child .filter_item { padding-right:29px; } .subnavigation .filter_item:focus { -moz-outline: 0; outline:0; } .subnavigation .filter_item.active { color:#000; display:block; } .subnavigation li:hover, .subnavigation li:hover .filter_item { color:#000; } .subnavigation .filterline { height: 16px; width: 1px; background-color: #000; position: absolute; left: 1px; top: 0; display:block; -webkit-backface-visibility: hidden; -moz-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -o-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -webkit-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; } .subnavigation li .filter_item.active .filterline { height: 40px; } .subnavigation.toggle-style.toggleClicked li .filter_item.active .filterline { height: 23px; -moz-transition: height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -o-transition: height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; -webkit-transition: height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } .subnavigation.toggle-style.openToggle.toggleClicked li .filter_item.active .filterline { height: 57px; } .subnavigation li .filter_item .post-count { position: absolute; left:-30px; display: block; padding: 2px 15px; font-size: 14px; font-family: Lato, sans-serif; font-weight: 600; color: #212121; top: 21px; opacity: 0; -moz-transition:left .35s cubic-bezier(0.215, 0.61, 0.355, .9) , opacity .35s ease 0s; -o-transition:left .35s cubic-bezier(0.215, 0.61, 0.355, .9) , opacity .35s ease 0s; -webkit-transition:left .35s cubic-bezier(0.215, 0.61, 0.355, .9) , opacity .35s ease 0s; transition:left .35s cubic-bezier(0.215, 0.61, 0.355, .9) , opacity .35s ease 0s; } .lightStyle .subnavigation li .filter_item .post-count { color: #ffffff; } .subnavigation li .filter_item.active .post-count { left:0; opacity: 1; } .subnavigation.toggle-style.toggleClicked li .filter_item.active .post-count { left: -20px; opacity: 0; -moz-transition: left 400ms cubic-bezier(0.215, 0.61, 0.355, .9) 0s, opacity 400ms ease 0s; -o-transition: left 400ms cubic-bezier(0.215, 0.61, 0.355, .9) 0s, opacity 400ms ease 0s; -webkit-transition: left 400ms cubic-bezier(0.215, 0.61, 0.355, .9) 0s, opacity 400ms ease 0s; transition: left 400ms cubic-bezier(0.215, 0.61, 0.355, .9) 0s, opacity 400ms ease 0s; } .subnavigation.toggle-style.openToggle.toggleClicked li .filter_item.active .post-count { left:0; opacity: 1; } .subnavigation.toggle-style li { opacity: 0; visibility: hidden; -webkit-transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .6s cubic-bezier(0.645, 0.045, 0.355, 1); -moz-transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .6s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: opacity .6s cubic-bezier(0.645, 0.045, 0.355, 1), visibility .6s cubic-bezier(0.645, 0.045, 0.355, 1); } .subnavigation.toggle-style.openToggle li { opacity: 1; visibility: visible; } /* cascade hiding */ .subnavigation.toggle-style li:nth-child(1) { -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .subnavigation.toggle-style li:nth-child(2) { -webkit-transition-delay: .25s; -moz-transition-delay: .25s; -o-transition-delay: .25s; transition-delay: .25s; } .subnavigation.toggle-style li:nth-child(3) { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; -o-transition-delay: .4s; transition-delay: .4s; } .subnavigation.toggle-style li:nth-child(4) { -webkit-transition-delay: .55s; -moz-transition-delay: .55s; -o-transition-delay: .55s; transition-delay: .55s; } .subnavigation.toggle-style li:nth-child(5) { -webkit-transition-delay: .7s; -moz-transition-delay: .7s; -o-transition-delay: .7s; transition-delay: .7s; } .subnavigation.toggle-style li:nth-child(6) { -moz-transition-delay: .85s; -o-transition-delay: .85s; -webkit-transition-delay: .85s; transition-delay: .85s; } .subnavigation.toggle-style li:nth-child(7) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .subnavigation.toggle-style li:nth-child(8) { -webkit-transition-delay: 1.15s; -moz-transition-delay: 1.15s; -o-transition-delay: 1.15s; transition-delay: 1.15s; } .subnavigation.toggle-style li:nth-child(9) { -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } .subnavigation.toggle-style li:nth-child(10) { -webkit-transition-delay: 1.45s; -moz-transition-delay: 1.45s; -o-transition-delay: 1.45s; transition-delay: 1.45s; } /* cascade visibility */ .subnavigation.toggle-style.openToggle li:nth-last-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .subnavigation.toggle-style.openToggle li:nth-last-child(2) { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s; } .subnavigation.toggle-style.openToggle li:nth-last-child(3) { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .subnavigation.toggle-style.openToggle li:nth-last-child(4) { -webkit-transition-delay: .45s; -moz-transition-delay: .45s; -o-transition-delay: .45s; transition-delay: .45s; } .subnavigation.toggle-style.openToggle li:nth-last-child(5) { -webkit-transition-delay: .6s; -moz-transition-delay: .6s; -o-transition-delay: .6s; transition-delay: .6s; } .subnavigation.toggle-style.openToggle li:nth-last-child(6) { -webkit-transition-delay: .75s; -moz-transition-delay: .75s; -o-transition-delay: .75s; transition-delay: .75s; } .subnavigation.toggle-style.openToggle li:nth-last-child(7) { -webkit-transition-delay: .9s; -moz-transition-delay: .9s; -o-transition-delay: .9s; transition-delay: .9s; } .subnavigation.toggle-style.openToggle li:nth-last-child(8) { -webkit-transition-delay: 1.05s; -moz-transition-delay: 1.05s; -o-transition-delay: 1.05s; transition-delay: 1.05s; } .subnavigation.toggle-style.openToggle li:nth-last-child(9) { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .subnavigation.toggle-style.openToggle li:nth-last-child(10) { -webkit-transition-delay: 1.35s; -moz-transition-delay: 1.35s; -o-transition-delay: 1.35s; transition-delay: 1.35s; } /* showing line */ .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(1) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(1) a.active .post-count { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(2) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(2) a.active .post-count { -webkit-transition-delay: .35s; -moz-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(3) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(3) a.active .post-count { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(4) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(4) a.active .post-count { -webkit-transition-delay: .65s; -moz-transition-delay: .65s; -o-transition-delay: .65s; transition-delay: .65s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(5) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(5) a.active .post-count { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(6) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(6) a.active .post-count { -webkit-transition-delay: .95s; -moz-transition-delay: .95s; -o-transition-delay: .95s; transition-delay: .95s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(7) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(7) a.active .post-count { -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(8) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(8) a.active .post-count { -webkit-transition-delay: 1.25s; -moz-transition-delay: 1.25s; -o-transition-delay: 1.25s; transition-delay: 1.25s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(9) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(9) a.active .post-count { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(10) a.active .filterline, .subnavigation.toggle-style.openToggle.toggleClicked li:nth-last-child(10) a.active .post-count { -webkit-transition-delay: 1.55s; -moz-transition-delay: 1.55s; -o-transition-delay: 1.55s; transition-delay: 1.55s; } /* cascade hiding toggle lines */ .subnavigation.toggle-style li:nth-child(1) .filterLeftLine, .subnavigation.toggle-style li:nth-child(1) .filterRightLine { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; } .subnavigation.toggle-style li:nth-child(2) .filterLeftLine, .subnavigation.toggle-style li:nth-child(2) .filterRightLine { -webkit-transition-delay: .35s; -moz-transition-delay: .35s; -o-transition-delay: .35s; transition-delay: .35s; } .subnavigation.toggle-style li:nth-child(3) .filterLeftLine, .subnavigation.toggle-style li:nth-child(3) .filterRightLine { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; transition-delay: .5s; } .subnavigation.toggle-style li:nth-child(4) .filterLeftLine, .subnavigation.toggle-style li:nth-child(4) .filterRightLine { -webkit-transition-delay: .65s; -moz-transition-delay: .65s; -o-transition-delay: .65s; transition-delay: .65s; } .subnavigation.toggle-style li:nth-child(5) .filterLeftLine, .subnavigation.toggle-style li:nth-child(5) .filterRightLine { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; } .subnavigation.toggle-style li:nth-child(6) .filterLeftLine, .subnavigation.toggle-style li:nth-child(6) .filterRightLine { -webkit-transition-delay: .95s; -moz-transition-delay: .95s; -o-transition-delay: .95s; transition-delay: .95s; } .subnavigation.toggle-style li:nth-child(7) .filterLeftLine, .subnavigation.toggle-style li:nth-child(7) .filterRightLine { -webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; -o-transition-delay: 1.1s; transition-delay: 1.1s; } .subnavigation.toggle-style li:nth-child(8) .filterLeftLine, .subnavigation.toggle-style li:nth-child(8) .filterRightLine { -webkit-transition-delay: 1.25s; -moz-transition-delay: 1.25s; -o-transition-delay: 1.25s; transition-delay: 1.25s; } .subnavigation.toggle-style li:nth-child(9) .filterLeftLine, .subnavigation.toggle-style li:nth-child(9) .filterRightLine { -webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; } .subnavigation.toggle-style li:nth-child(10) .filterLeftLine, .subnavigation.toggle-style li:nth-child(10) .filterRightLine { -webkit-transition-delay: 1.55s; -moz-transition-delay: 1.55s; -o-transition-delay: 1.55s; transition-delay: 1.55s; } .filterToggle { position: relative; opacity: 1!important; visibility: visible !important; width: 32px; padding: 0 7px; cursor: pointer; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } .filterRightLine { position: absolute; top: 0px; right:0; width:1px; height:24px; z-index:4; background-color: #000; -moz-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -o-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -webkit-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; } .filterLeftLine { position: absolute; top: 0px; left:0; width:1px; height:0px; z-index:4; background-color: #000; -moz-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -o-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; -webkit-transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; transition:height 300ms cubic-bezier(0.215, 0.61, 0.355, 1) .1s; } .filterToggle.closed .filterRightLine{ height: 0; } .filterToggle.closed .filterLeftLine{ height: 24px; } .subnavigation.toggle-style li.filterToggle.closed .filterRightLine, .subnavigation.toggle-style li.filterToggle.closed .filterLeftLine { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .filterToggle .toggleLineContainer { position: relative; width: 32px; height: 24px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease; } .filterToggle.closed .toggleLineContainer { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .filterToggle .toggleLineContainer .lineBarFirst { position: absolute; width: 20px; height: 2px; background-color: #000; top: 11px; left: 6px; } .filterToggle .toggleLineContainer .lineBarSecond { position: absolute; width: 2px; height: 20px; background-color: #000; left:15px; top:2px; } /* Portfolio Detial*/ #portfoliSingle { padding-bottom: 0px; } #portfolio-detail-parallax-container { position: absolute; top:0; left:0; width: 100%; height: 100%; } #ajaxPDetail #portfolio-detail-parallax-container { position:initial; } #PDetail span.icon-icons2 { font-size: 26px; } #PDnavigation { padding: 0 0 45px; display: none; } .portfolio_detail_full_width #PDbackToPortfolio, .portfolio_detail_boxed #PDbackToPortfolio { position: absolute; display: inline-block; width: 14%; height: 130px; z-index: 1; cursor: pointer; vertical-align: top; right: 43%; color: #000; text-align: center; line-height: 130px; font-size: 32px; text-decoration: none; opacity: 1; -moz-transition: opacity 0.9s ease; -o-transition: opacity 0.9s ease; -webkit-transition: opacity 0.9s ease; transition: opacity 0.9s ease; } .portfolio_detail_full_width #PDbackToPortfolio:hover { opacity:.7; } #portfoliSingle .portfolio-detail-full_width .like, #portfoliSingle .portfolio-detail-boxed .like{ text-align: center; padding:45px 0; border-bottom: 1px dashed #d8d8d8; } #portfoliSingle .pd-like a { text-decoration: none; font-family: Lato,sans-serif; width: 82px; display: block; margin: 0 auto; opacity: 1; padding:20px 0; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; -o-transition: opacity .2s ease; transition: opacity .2s ease; } #portfoliSingle .pd-like a .count { color: #868686; display: inline-block; font-size: 14px; line-height: 25px; padding-left: 0; text-align: center; width: 100%; font-family: Lato, serif; font-weight: 600; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: color .5s ease-in-out; -o-transition: color .5s ease-in-out; -webkit-transition: color .5s ease-in-out; transition: color .5s ease-in-out; } #ajaxPDetail .pDcontent{ position:relative; } #portfoliSingle .portfolioInnerSocialShare.like { position:absolute; top:0; right: -16px; border-left:1px solid #ecebeb; } #portfoliSingle #ajaxPDetail .portfolioInnerSocialShare.like { border-left:none; } #portfoliSingle .portfolioInnerSocialShare.like a { padding:0; } #portfoliSingle .portfolioInnerSocialShare.like .jm-post-like.ep-icon:before{ width: 60px; } #portfoliSingle .portfolioInnerSocialShare.like a, #portfoliSingle .portfolioInnerSocialShare.like a .count{ width: 60px; } #portfoliSingle .portfolioInnerSocialShare.like a .count { position: absolute; left: 0px; top: 5px; } #ajaxPDetail .socailshare.project-detail{ margin-right: 60px; margin-bottom:15px; border-bottom:none; } .portfolio_detail_creative .like span.count { line-height: 14px; } #portfoliSingle .portfolioInnerSocialShare.like .jm-post-like.ep-icon:before, #portfoliSingle .pd-like .jm-post-like.ep-icon:before { font-family: 'Linearicons'; font-size: 16px; color: #C8C8C8; padding-top: 6px; display: inline-block; position: relative; width:83px; text-align: center; -moz-transition: color .4s ease-in-out, margin-right .4s ease-in-out; -o-transition: color .4s ease-in-out, margin-right .4s ease-in-out; -webkit-transition: color .4s ease-in-out, margin-right .4s ease-in-out; transition: color .4s ease-in-out, margin-right .4s ease-in-out; } #portfoliSingle .pd-like a.jm-post-like.ep-icon:hover:before { color: #073b87; } .gallery_carousel .like a.ep-icon:before , #portfoliSingle .pd-like a.ep-icon:before , .portfolioSection .like a.ep-icon:before { content: ""; } #portfoliSingle .pd-like .jm-post-like.liked.ep-icon:before, .portfolioSection .like .jm-post-like.liked.ep-icon:before { color: #073b87; margin-right: 0px; content: ""; } #portfoliSingle .pd-like a.liked.ep-icon:hover:before { color: #c8c8c8; } /* Portfolio detail : fullwidth */ .portfolio_detail_full_width #PDetail .pDHeader { width: 100%; top:0; overflow: hidden; position: relative; min-height: 200px; } .portfolio_detail_full_width #pDSwiper .swiper-slide img { width: 100%; opacity: 0; visibility: hidden; } .portfolio_detail_full_width { margin-top:0; padding-top:0; } .portfolio_detail_full_width .pDHeader-standard .swiper-slide { width:100%; height: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-position: center !important; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; } .portfolio_detail_full_width .pDHeader-standard { width: 100%; } .portfolio_detail_full_width #PDetail .pDHeader-title { z-index: 2; margin-top: -135px; min-width: 545px; max-width: 60%; padding:10px; position: relative; display: inline-block; margin-left: -15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .portfolio_detail_full_width .pDHeader-title .textBox { padding: 27px 27px 27px 20px; width: 100%; height: 100%; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .portfolio_detail_full_width .pDHeader-title .titlebox-bg { content:""; position: absolute; height: 100%; width: 100%; background-color:#fff; opacity: 0; top:0; left:0; z-index: 0; -webkit-transition: opacity .3s ease-in-out .6s; -moz-transition: opacity .3s ease-in-out .6s; -o-transition: opacity .3s ease-in-out .6s; transition: opacity .3s ease-in-out .6s; } .portfolio_detail_full_width .pDHeader-title.bg-animated .titlebox-bg { opacity: 1; background-color:#fff; } .portfolio_detail_full_width .pDHeader-title .textBox .title { opacity: 0; color: #0e0e0e; word-wrap: break-word; font-weight: 700; font-size: 48px; letter-spacing: 0px; line-height: 57px; padding: 13px 30px; float: left; box-sizing: border-box; -moz-transition: opacity .5s ease-in-out .7s; -o-transition: opacity .5s ease-in-out .7s; -webkit-transition: opacity .5s ease-in-out .7s; transition: opacity .5s ease-in-out .7s; } .portfolio_detail_full_width .pDHeader-title.active .textBox .title { opacity:1; } .portfolio_detail_full_width .pDHeader-title .textBox .subtitle { font-size: 18px; font-weight: 400; line-height: 23px; margin-left: 3px; margin-bottom: 5px; color:#434343; opacity:0; -webkit-transition: opacity .5s ease-in-out .9s; -moz-transition: opacity .5s ease-in-out .9s; -o-transition: opacity .5s ease-in-out .9s; transition: opacity .5s ease-in-out .9s; } .portfolio_detail_full_width .pDHeader-title.active .textBox .subtitle { opacity:1; } .portfolio_detail_full_width .pDHeader-title .frame, .portfolio_detail_full_width .pDHeader-title .frame div { position: absolute; } .portfolio_detail_full_width .pDHeader-title .frame.top { left: 0; top: 0; width: 100%; height: 2px; } .portfolio_detail_full_width .pDHeader-title .frame.right { right: 0; top: 0; width: 2px; height: 100%; } .portfolio_detail_full_width .pDHeader-title .frame.bottom { right: 0; bottom: 0; width: 100%; height: 2px; } .portfolio_detail_full_width .pDHeader-title .frame.left { left: 0; bottom: 0; width: 2px; height: 100%; } .portfolio_detail_full_width .pDHeader-title .frame div { background-color:#434343; width:0; height:2px; } .portfolio_detail_full_width .pDHeader-title .frame.top div, .portfolio_detail_full_width .pDHeader-title .frame.bottom div { -webkit-transition: width .6s ease-in-out 0.6s; -moz-transition: width .6s ease-in-out 0.6s; -o-transition: width .6s ease-in-out 0.6s; transition: width .6s ease-in-out 0.6s; } .portfolio_detail_full_width .pDHeader-title .frame.left div, .portfolio_detail_full_width .pDHeader-title .frame.right div { -webkit-transition: height .6s ease-in-out 0.6s; -moz-transition: height .6s ease-in-out 0.6s; -o-transition: height .6s ease-in-out 0.6s; transition: height .6s ease-in-out 0.6s; } .portfolio_detail_full_width .pDHeader-title .frame.top div { width:0; height:2px; left:0; } .portfolio_detail_full_width .pDHeader-title .frame.bottom div { width:0; height:2px; right:0; } .portfolio_detail_full_width .pDHeader-title .frame.left div { width:2px; height:0; bottom:0; } .portfolio_detail_full_width .pDHeader-title .frame.right div { width:2px; height:0; top:0; } .portfolio_detail_full_width .pDHeader-title.active .frame.top div, .portfolio_detail_full_width .pDHeader-title.active .frame.bottom div { width:100%; } .portfolio_detail_full_width .pDHeader-title.active .frame.left div, .portfolio_detail_full_width .pDHeader-title.active .frame.right div { height:100%; } /* Portfolio detail : Boxed */ .portfolio_detail_boxed #PDetail .pDHeader { margin-bottom:15px; position: relative; top:0; overflow: hidden; padding: 0; } .portfolio_detail_boxed { margin-top:0; padding-top:0; } .portfolio_detail_boxed .pDHeader-standard .swiper-slide { width:100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-position:center !important; background-attachment: scroll !important; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; } .portfolio_detail_boxed #pDSwiper { opacity: 1; } .portfolio_detail_boxed .pDHeader-standard .swiper-container { height: 100%; margin-top:-40px; } .portfolio_detail_boxed #PDetail .pDHeader-title { text-align: center; position: relative; display: block; padding: 0 10%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .portfolio_detail_boxed .pDHeader-title .textBox { padding: 37px 22px; height: 100%; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .portfolio_detail_boxed .pDHeader-title .textBox .title { opacity: 1; word-wrap: break-word; font-weight: 700; font-size: 48px; letter-spacing: 0px; line-height: 50px; color: #0e0e0e; float: right; box-sizing: border-box; -webkit-box-sizing: border-box; } .portfolio_detail_boxed .pDHeader-title .textBox .subtitle { font-size: 18px; font-weight: 400; line-height: 23px; margin: 8px 0; opacity: 1; color: #000; } /* Portfolio deatil default*/ .portfolio_detail_default .pDHeader-title { z-index: 2; min-width: 545px; max-width: 50%; position: absolute; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .portfolio_detail_default .pDHeader-title .textBox { width: 100%; height: 100%; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .portfolio_detail_default .pDHeader-title .textBox .title { opacity: 0; -ms-word-wrap: break-word; word-wrap: break-word; font-weight: 600; font-size: 40px; color: #434343; letter-spacing: 0px; line-height: 43px; float: left; margin-top: -75px; box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transition: opacity .5s ease-in-out .4s; -moz-transition: opacity .5s ease-in-out .4s; -o-transition: opacity .5s ease-in-out .4s; transition: opacity .5s ease-in-out .4s; } .portfolio_detail_default .pDHeader-title.active .textBox .title { opacity:1; } .portfolio_detail_default .pDHeader-title .textBox .subtitle { font-size: 18px; font-weight: 400; line-height: 20px; margin-left: 3px; margin-bottom: 5px; color:#000; -webkit-transition: opacity .5s ease-in-out .4s; -moz-transition: opacity .5s ease-in-out .4s; -o-transition: opacity .5s ease-in-out .4s; transition: opacity .5s ease-in-out .4s; } .portfolio_detail_default .pDHeader-title.active .textBox .subtitle { opacity: 1; } .portfolio_detail_default .pDHeader-title .frame, .portfolio_detail_default .pDHeader-title .frame div { position: absolute; } .portfolio_detail_default .pDHeader-title .frame.top { left: 0; top: 0; width: 100%; height: 2px; } .portfolio_detail_default .pDHeader-title .frame.right { right: 0; top: 0; width: 2px; height: 100%; } .portfolio_detail_default .pDHeader-title .frame.bottom { right: 0; bottom: 0; width: 100%; height: 2px; } .portfolio_detail_default .pDHeader-title .frame.left { left: 0; bottom: 0; width: 2px; height: 100%; } .portfolio_detail_default .pDHeader-title .frame div { background-color:#000; width:0; height:2px; } .portfolio_detail_default .pDHeader-title .frame.top div, .portfolio_detail_default .pDHeader-title .frame.bottom div { -webkit-transition: width .6s ease-in-out 0.6s; -moz-transition: width .6s ease-in-out 0.6s; -o-transition: width .6s ease-in-out 0.6s; transition: width .6s ease-in-out 0.6s; } .portfolio_detail_default .pDHeader-title .frame.left div, .portfolio_detail_default .pDHeader-title .frame.right div { -webkit-transition: height .6s ease-in-out 0.6s; -moz-transition: height .6s ease-in-out 0.6s; -o-transition: height .6s ease-in-out 0.6s; transition: height .6s ease-in-out 0.6s; } .portfolio_detail_default .pDHeader-title .frame.top div { width:0; height:2px; left:0; } .portfolio_detail_default .pDHeader-title .frame.bottom div { width:0; height:2px; right:0; } .portfolio_detail_default .pDHeader-title .frame.left div { width:2px; height:0; bottom:0; } .portfolio_detail_default .pDHeader-title .frame.right div { width:2px; height:0; top:0; } .portfolio_detail_default .pDHeader-title.active .frame.top div, .portfolio_detail_default .pDHeader-title.active .frame.bottom div { width:100%; } .portfolio_detail_default .pDHeader-title.active .frame.left div, .portfolio_detail_default .pDHeader-title.active .frame.right div { height:100%; } .portfolio_detail_default .pDcontent > .span12 { padding-right:30px; } .portfolio_detail_full_width .span12.postMedia { margin: 20px 0 50px 0; padding: 0px; } .portfolio_detail_default .pDHeader-standard .swiper-slide { cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; } .portfolio_detail_default .swiper-slide img { width: 100%; backface-visibility:visible; opacity:1; visibility:visible; } .portfolio_detail_default .portfolioInnerSocialShare { line-height: 56px; right: -30px; } #pDSwiper.disabled_swiper .swiper-slide { cursor:default; } /* Portfolio detail : creative */ .portfolio_detail_creative { width:100%; height:540px; padding:0; } .portfolio_detail_creative #pDSwiper { opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .portfolio_detail_creative.show #pDSwiper{ opacity: 1; } .portfolio_detail_creative .swiper-wrapper img { height:100%; width:auto; backface-visibility:visible; opacity: 1; visibility: visible; } .portfolio_detail_creative .swiper-container { background-color:#fff; height:100%; } .portfolio_detail_creative .pd_creative_fixed_content { background-color:#fff; height:540px; width:335px; margin:0 38px 0 0; position:fixed; z-index:3; float:left; padding-left:38px; } .portfolio_detail_creative .format-video .pd_creative_fixed_content { margin-top:-20px; } .portfolio_detail_creative .pd_creative_fixed_content .title_container { background-color:#fff; top:22px; position:relative; width: calc( 100% + 45px ); text-align:right; padding:35px 0 15px; min-height:153px; } .portfolio_detail_creative .format-video .pd_creative_fixed_content .title_container { padding:0px 0 15px; } .portfolio_detail_creative .pd_creative_fixed_content .title_container .title { padding-right: 23px; padding-top: 22px; font-weight:600; font-family:Poppins,sans-serif; padding-bottom:20px; font-size:31px; line-height:30px; margin-right:85px; color:#171717; position:relative; background-color:#fff; border-right:1px solid #171717; } .portfolio_detail_creative .pd_creative_fixed_content .title_container .subtitle { font-size: 18px; line-height: 23px; margin-top: 5px; color: #171717; font-family:Lato,sans-serif; } .portfolio_detail_creative .pd_creative_fixed_content .desc { margin-right:12px; height:107px; overflow-y:hidden; font-size:14px; color:#707070; padding-top:10px; text-align: right; } .portfolio_detail_creative .pd_creative_fixed_content .desc.pd-no-social { margin-top: 65px; } .portfolio_detail_creative .pd_creative_item { height:540px; float:right; width:calc(100% - 373px); background-color:#fff; position:fixed; right:0; z-index:2; } .portfolio_detail_creative .format-video .pd_creative_item { max-width:960px; margin-left: 373px; left: 0px; right: auto; z-index: 5; } .portfolio_detail_creative #PDetail .pDHeader { position:relative; height:100%; } .portfolio_detail_creative .swiper-slide { text-align: center; color:#707070; font-weight: 400; font-size: 14px; background: transparent; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width:auto; } .portfolio_detail_creative #PDnavigation { padding-right: 51px; padding-top: 30px; display: block; position: absolute; bottom: 0; padding-bottom: 0; right: 0; } .portfolio_detail_creative .home{ font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 30px; height: 30px; color: #C8C8C8; display: block; font-size: 18px; line-height: 32px; position: absolute; bottom: 0; text-decoration: none; } .portfolio_detail_creative .home:hover { color: #073b87; } .portfolio_detail_creative .home.hide-home { display: none; } .portfolio_detail_creative #PDbackToPortfolio { position: relative; display: inline-block; width: 30px; height: 30px; z-index: 1; float: right; cursor: pointer; vertical-align: top; margin: -4px 14px; text-decoration: none; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 1; } .portfolio_detail_creative #PDbackToPortfolio:hover { opacity: .6; } .portfolio_detail_creative #PDbackToPortfolio:after { position: absolute; content: ""; border-top: 1px solid #000; width: 23px; height: 1px; top: 14px; left: 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .portfolio_detail_creative #PDbackToPortfolio:before { position: absolute; content: ""; border-top: 1px solid #000; width: 23px; height: 1px; top: 14px; left: 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio_detail_creative .noNext { margin-right: -22px !important; } .portfolio_detail_creative #PDnavigation .arrows-button-next, .portfolio_detail_creative #PDnavigation .arrows-button-prev { font-size: 14px; line-height: 21px; color:#000; text-transform:uppercase; position:relative; letter-spacing:4px; cursor: pointer; float:right; } .portfolio_detail_creative #PDnavigation .arrows-button-next:before { position:absolute; top:40%; content:""; width:0px; height:1px; right: 0; margin-right:-15px; margin-top: -3px; border-style: solid; border-width: 5px 5px 5px 6px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(000, 000, 000); } .portfolio_detail_creative #PDnavigation .arrows-button-next:after { position:absolute; top:40%; content:""; width:0px; height:1px; right: 0; margin-top: 2px; margin-right: -5px; padding-left: 0; border-top : 1px solid #000; -webkit-transition: width 0.3s ease, padding-left 0.3s ease; -moz-transition: width 0.3s ease, padding-left 0.3s ease; -o-transition: width 0.3s ease, padding-left 0.3s ease; transition: width 0.3s ease, padding-left 0.3s ease; } .portfolio_detail_creative #PDnavigation .arrows-button-next:hover:after { width: 100%; padding-left: 10px; } .portfolio_detail_creative #PDnavigation .arrows-button-prev:before { position:absolute; top:40%; content:""; width:0px; height:1px; left: 0; margin-left:-19px; margin-top: -3px; border-style: solid; border-width: 5px 5px 5px 6px; border-color: rgba(255, 255, 255, 0) rgba(000, 000, 000, 1) rgba(255, 255, 255, 0) rgba(225, 225, 225 ,0 ); } .portfolio_detail_creative #PDnavigation .arrows-button-prev:after { position:absolute; top:40%; content:""; width:0px; height:1px; left: 0; margin-top: 2px; margin-left: -8px; padding-left: 0; border-top : 1px solid #000; -webkit-transition: width 0.3s ease, padding-left 0.3s ease; -moz-transition: width 0.3s ease, padding-left 0.3s ease; -o-transition: width 0.3s ease, padding-left 0.3s ease; transition: width 0.3s ease, padding-left 0.3s ease; } .portfolio_detail_creative #PDnavigation .arrows-button-prev:hover:after { width: 100%; padding-left: 10px; } .portfolio_detail_creative .arrows-button-prev .text, .portfolio_detail_creative .arrows-button-next .text { opacity: 1; } .portfolio_detail_creative .social_share_container { position:relative; width:295px; height:54px; margin-top: 20px; margin-right: 40px; } #portfoliSingle.portfolio_detail_creative .like { padding: 0; text-align: right; position: absolute; bottom:0; } #portfoliSingle.portfolio_detail_creative .home:not(.hide-home) + .like { margin-left: 30px; } #portfoliSingle.portfolio_detail_creative .like a { width: 30px; margin-right: 34px; padding:0; } #portfoliSingle.portfolio_detail_creative .like .jm-post-like.ep-icon:before { width:30px; } /* To fix the width of visual composer container*/ #portfoliSingle.portfolio_detail_creative .container { width: 295px; } /* Naviagtion button for gallery in portfolio details*/ #pDSwiper .arrows-button-prev, #pDSwiper .arrows-button-next { border: 0 !important; width: 45px; height: 45px; display: block; position: absolute; z-index: 4; cursor: pointer; top: calc(50% - 25px); border: 1px solid #e3e3e3; color: #333; font-size: 16px!important; background: rgba(255,255,255,.5); font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; overflow: hidden; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: -1px; -webkit-transition: background .3s ease, opacity .3s ease; -moz-transition: background .3s ease, opacity .3s ease; -o-transition: background .3s ease, opacity .3s ease; transition: background .3s ease, opacity .3s ease; } #pDSwiper .arrows-button-prev:hover, #pDSwiper .arrows-button-next:hover { background: rgba(255,255,255,1); } #pDSwiper .arrows-button-next { right:0; } #pDSwiper .arrows-button-prev{ left:0; } #pDSwiper .arrows-button-prev:before, #pDSwiper .arrows-button-prev:after { content: "\f177"; } #pDSwiper .arrows-button-next:after, #pDSwiper .arrows-button-next:before { content: "\f178"; } #pDSwiper .arrows-button-prev:before, #pDSwiper .arrows-button-prev:after, #pDSwiper .arrows-button-next:after, #pDSwiper .arrows-button-next:before { position: absolute; display: block; width: 100%; height: 100%; text-align: center; line-height: 45px; left: 0; -webkit-transition: left 0.3s ease,opacity .2s ease-in-out; -moz-transition: left 0.3s ease,opacity .2s ease-in-out; -o-transition: left 0.3s ease,opacity .2s ease-in-out; transition: left 0.3s ease,opacity .2s ease-in-out; } #pDSwiper .arrows-button-prev:after{ left:35px; opacity: 0; } #pDSwiper .arrows-button-next:after{ left:-35px; opacity: 0; } #pDSwiper .arrows-button-prev:hover:after{ left:0; opacity: 1; } #pDSwiper .arrows-button-next:hover:after { left:0; opacity: 1; } #pDSwiper .arrows-button-prev:hover:before{ left:-45px; opacity: 0; } #pDSwiper .arrows-button-next:hover:before{ left:45px; opacity: 0; } /* end of creative portfolio detail*/ #portfolioDetailAjax .singlePost { padding-bottom: 0; margin-top: 0px; width: initial; position: relative; min-width: initial; overflow: initial; padding-top:100px; } #portfolioDetailAjax #PDetail .container { width:100%; } .pDWrap .navWrap { position: absolute; top: 70px; right: 0; } .pDWrap .pDNavigation { display: none; width:100%; opacity: 1; z-index:1; } .pDWrap .pDNavigation a { position: relative; display: inline-block; float: right; } .pDWrap .pDNavigation a.next { padding-right: 10px; } .pDWrap .pDNavigation a.previous { padding-left: 10px; } .pDWrap #PDclosePortfolio { position: relative; display: inline-block; width: 30px; height: 30px; z-index: 1; float: right; cursor: pointer; vertical-align: top; margin: -4px 14px; text-decoration: none; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; opacity: 1; } .pDWrap #PDclosePortfolio:hover { opacity: .6; } .pDWrap #PDclosePortfolio:after { position: absolute; content: ""; border-top: 1px solid #000; width: 23px; height: 1px; top: 14px; left: 3px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .pDWrap #PDclosePortfolio:before { position: absolute; content: ""; border-top: 1px solid #000; width: 23px; height: 1px; top: 14px; left: 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*navigation for next prev inner portfolio details*/ .pDWrap .pDNavigation .arrows-button-next,.pDWrap .pDNavigation .arrows-button-prev { font-size: 13px!important; line-height: 21px; color: #000; text-transform: uppercase; float: right; position: relative; cursor: pointer; } .pDWrap .pDNavigation .arrows-button-next:before { position:absolute; top:40%; content:""; width:0px; height:1px; right: 0; margin-right:-15px; margin-top: -3px; border-style: solid; border-width: 5px 5px 5px 6px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(000, 000, 000); } .lightStyle .pDWrap .pDNavigation .arrows-button-next:before { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255); } .pDWrap .pDNavigation .arrows-button-next:after { position:absolute; top:40%; content:""; width:0px; height:1px; right: 0; margin-top: 2px; margin-right: -5px; padding-left: 0; border-top : 1px solid #000; -webkit-transition: width 0.3s ease, padding-left 0.3s ease; -moz-transition: width 0.3s ease, padding-left 0.3s ease; -o-transition: width 0.3s ease, padding-left 0.3s ease; transition: width 0.3s ease, padding-left 0.3s ease; } .lightStyle .pDWrap .pDNavigation .arrows-button-next:after{ border-top : 1px solid #fff; } .pDWrap .pDNavigation .arrows-button-next:hover:after { width: 100%; padding-left: 10px; } .pDWrap .pDNavigation .arrows-button-prev:before { position:absolute; top:40%; content:""; width:0px; height:1px; left: 0; margin-left:-19px; margin-top: -3px; border-style: solid; border-width: 5px 5px 5px 6px; border-color: rgba(255, 255, 255, 0) rgba(000, 000, 000, 1) rgba(255, 255, 255, 0) rgba(225, 225, 225 ,0 ); } .lightStyle .pDWrap .pDNavigation .arrows-button-prev:before{ border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 1) rgba(255, 255, 255, 0) rgba(225, 225, 225 ,0 ); } .pDWrap .pDNavigation .arrows-button-prev:after { position:absolute; top:40%; content:""; width:0px; height:1px; left: 0; margin-top: 2px; margin-left: -8px; padding-left: 0; border-top : 1px solid #000; -webkit-transition: width 0.3s ease, padding-left 0.3s ease; -moz-transition: width 0.3s ease, padding-left 0.3s ease; -o-transition: width 0.3s ease, padding-left 0.3s ease; transition: width 0.3s ease, padding-left 0.3s ease; } .lightStyle .pDWrap .pDNavigation .arrows-button-prev:after { border-top : 1px solid #fff; } .pDWrap .pDNavigation .arrows-button-prev:hover:after { width: 100%; padding-left: 10px; } .pDWrap .pDNavigation .arrows-button-prev .text, .pDWrap .pDNavigation .arrows-button-next .text { opacity: 1; } .pDNavigation .portfolioSection #ajaxPDetail { padding: 30px 0; position: relative; } .portfolioSection #loader { top:calc(50% - 5px) !important; left:calc(50% - 11px) !important; position:absolute; display: none; } .portfolioSection #loader:before, .portfolioSection #loader:after { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -10px; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px; -webkit-animation: threeBounceDelay 1.4s infinite ease-in-out; -moz-animation: threeBounceDelay 1.4s infinite ease-in-out; -o-animation: threeBounceDelay 1.4s infinite ease-in-out; animation: threeBounceDelay 1.4s infinite ease-in-out; -o-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; background-color: #073B87; display: inline-block; z-index: 1; } .portfolioSection #loader:before { -webkit-animation-delay: -.32s; -moz-animation-delay: -.32s; -o-animation-delay: -.32s; animation-delay: -.32s; } .portfolioSection #loader:after { margin-left:-10px; } #pDError { display:none; } .pDWrap { position:relative; } #portfolioDetailAjax .postMedia { padding-bottom:30px; } #portfolioDetailAjax .postMedia.video-frame{ display:inline } #portfolioDetailAjax { height:0px; opacity:0; } /* portfolio filter */ ul.portfolio-filter { background-color: #FFFFFF; border: 1px solid #000000; color: #181818; letter-spacing:-1px; float: right; height: 36px; padding: 0; position: absolute; top:23px; right:30px; width: 200px; } ul.portfolio-filter li { font-weight:500; font-size: 14px; list-style: none outside none; text-transform: uppercase; } ul.portfolio-filter li > div { padding: 7px; } ul.portfolio-filter li .text { letter-spacing: 0px; } ul.portfolio-filter li .icon { float: right; font-size: 20px; margin-right: 5px; position:absolute; top:10px; right:2px; } ul.portfolio-filter li ul { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #FFFFFF; border-color: -moz-use-text-color #000000 #000000; -moz-border-image: none; -o-border-image: none; -webkit-border-image: none; border-image: none; border-right: 1px solid #000000; border-style: none solid solid; border-width: medium 1px 1px; margin-left: -1px; padding: 0; position: absolute; width: 200px; z-index: 3; } ul.portfolio-filter li ul li .filter_item { color: #000000; display: block; font-family:Lato,sans-serif; font-size: 14px; font-weight: 400; height: 28px; padding: 6px 0 0 6px; text-decoration: none; text-transform: uppercase; } ul.portfolio-filter li ul li .filter_item:hover { background-color: #000000; color: #FFFFFF; } li.project.portfolio_social_share { float: right; padding-right:5px !important; } .portfolio_detail_boxed .project-detail li:first-child{ border-top:0px; } .socailshare.project-detail { border-bottom: 1px solid #ECEBEB; padding-bottom: 15px; min-height:58px; } .portfolio_detail_full_width .socailshare.project-detail{ border-bottom: none; min-height:44px; } .portfolio_detail_default .project-detail li:last-child{ border-bottom: 0; } .project-detail li:last-child .project-subtitle a { color:#777; text-decoration:none; font-weight: 400; } .project-detail li:last-child .project-subtitle a:hover { color:#073B87; } .project-detail li.project { font-size:13px; line-height:54px; min-height:54px; display:inline-block; color:#515151; padding-right:20px; padding-top:5px; } .project-detail li.project:after { content:""; display:table; clear:both; } .project-detail li.project.portfolioSocailShare { line-height:65px; border-bottom:none } .project-detail li.project .project-title { font-weight:600; float:left; margin-right: 5px; color: #171717; } .project-detail li.project .project-subtitle { float:left; color:#555; font-weight:500; font-size:13px; } .project-detail .project-skill { text-decoration:none; } .project-detail .project-skill a{ color:#555; font-weight:500; font-size:13px; } .responsive_filter_dropdown li > ul { display:none; } /*-----------------------------------------------------------------------------------*/ /* 26. instagram animation - gallery animation - portfolio animation - products animation /*-----------------------------------------------------------------------------------*/ /*shortcodes*/ .fadeIn .isotope, .fadeIn .isotope .isotope-item, .fadeIn .isotope .carousel_item, .fadeInFromLeft .isotope, .fadeInFromLeft .isotope .isotope-item, .fadeInFromLeft .isotope .carousel_item, .fadeInFromRight .isotope, .fadeInFromRight .isotope .isotope-item, .fadeInFromRight .isotope .carousel_item, .fadeInFromTop .isotope, .fadeInFromTop .isotope .isotope-item, .fadeInFromTop .isotope .carousel_item, .fadeInFromBottom .isotope, .fadeInFromBottom .isotope .isotope-item, .fadeInFromBottom .isotope .carousel_item , .zoomIn .isotope, .zoomIn .isotope .isotope-item , .zoomIn .isotope .carousel_item, /*main shop*/ .main-shop-loop.isotope, .main-shop-loop.isotope .isotope-item, .fadeIn.isotope, .fadeIn.isotope:not(.main-shop-loop) .productwrap, .fadeIn.isotope .isotope-item, .fadeIn.isotope .carousel_item, .fadeInFromLeft.isotope, .fadeInFromLeft.isotope:not(.main-shop-loop) .productwrap, .fadeInFromLeft.isotope .isotope-item, .fadeInFromLeft.isotope .carousel_item, .fadeInFromRight.isotope, .fadeInFromRight.isotope:not(.main-shop-loop) .productwrap, .fadeInFromRight.isotope .isotope-item, .fadeInFromRight.isotope .carousel_item, .fadeInFromTop.isotope, .fadeInFromTop.isotope:not(.main-shop-loop) .productwrap, .fadeInFromTop.isotope .isotope-item, .fadeInFromTop.isotope .carousel_item, .fadeInFromBottom.isotope, .fadeInFromBottom.isotope:not(.main-shop-loop) .productwrap, .fadeInFromBottom.isotope .isotope-item, .fadeInFromBottom.isotope .carousel_item , .zoomIn.isotope, .zoomIn.isotope:not(.main-shop-loop) .productwrap, .zoomIn.isotope .isotope-item , .zoomIn.isotope .carousel_item { -webkit-transition-property: none!important; -moz-transition-property: none !important; -o-transition-property: none !important; transition-property: none !important; } .fadeIn .carousel_item, .fadeIn .productwrap, .fadeIn .swiper-slide-duplicate .productwrap, .fadeIn.instagram-feed ul li, .fadeInFromBottom.isotope .blog_item, .fadeInFromLeft .carousel_item, .fadeInFromLeft .productwrap, .fadeInFromLeft .swiper-slide-duplicate .productwrap, .fadeInFromLeft .postphoto, .fadeInFromLeft.instagram-feed ul li, .fadeInFromLeft.isotope .blog_item, .fadeInFromRight .carousel_item, .fadeInFromRight .productwrap, .fadeInFromRight .swiper-slide-duplicate .productwrap, .fadeInFromRight .postphoto, .fadeInFromRight.instagram-feed ul li, .fadeInFromRight.isotope .blog_item, .fadeInFromTop .carousel_item, .fadeInFromTop .productwrap, .fadeInFromTop .swiper-slide-duplicate .productwrap, .fadeInFromTop .postphoto, .fadeInFromTop.instagram-feed ul li, .fadeInFromTop.isotope .blog_item, .fadeInFromBottom .carousel_item, .fadeInFromBottom .productwrap, .fadeInFromBottom .swiper-slide-duplicate .productwrap, .fadeInFromBottom .postphoto , .fadeInFromBottom.instagram-feed ul li, .fadeInFromBottom.isotope .blog_item, .zoomIn .carousel_item , .zoomIn .productwrap , .zoomIn .swiper-slide-duplicate .productwrap , .zoomIn .postphoto , .zoomIn.instagram-feed ul li, .zoomIn.isotope .blog_item { -moz-opacity: 0; opacity: 0; } .fadeInFromBottom .blog_item , .fadeInFromBottom .carousel_item , .fadeInFromBottom .productwrap , .fadeInFromBottom .swiper-slide-duplicate .productwrap , .fadeInFromBottom .postphoto , .fadeInFromBottom.instagram-feed ul li { -moz-transform: matrix(1, 0, 0, 1, 0, 100); -ms-transform: matrix(1, 0, 0, 1, 0, 100); -o-transform: matrix(1, 0, 0, 1, 0, 100); -webkit-transform: matrix(1, 0, 0, 1, 0, 100); transform: matrix(1, 0, 0, 1, 0, 100); } /* form Carousels - fadeInFromBottom */ .fadeInFromBottom.instagram-feed .carousel ul li , .carousel.fadeInFromBottom .carousel_item , .carousel.fadeInFromBottom .productwrap , .carousel.fadeInFromBottom .swiper-slide-duplicate .productwrap , .carousel.fadeInFromBottom .postphoto { -moz-transform: matrix(1, 0, 0, 1, 0, 180); -ms-transform: matrix(1, 0, 0, 1, 0, 180); -o-transform: matrix(1, 0, 0, 1, 0, 180); -webkit-transform: matrix(1, 0, 0, 1, 0, 180); transform: matrix(1, 0, 0, 1, 0, 180); } .fadeInFromTop .blog_item , .fadeInFromTop .carousel_item , .fadeInFromTop .productwrap , .fadeInFromTop .swiper-slide-duplicate .productwrap , .fadeInFromTop .postphoto , .fadeInFromTop.instagram-feed ul li { -moz-transform: matrix(1, 0, 0, 1, 0, -100); -ms-transform: matrix(1, 0, 0, 1, 0, -100); -o-transform: matrix(1, 0, 0, 1, 0, -100); -webkit-transform: matrix(1, 0, 0, 1, 0, -100); transform: matrix(1, 0, 0, 1, 0, -100); } .fadeInFromRight .blog_item , .fadeInFromRight .carousel_item , .fadeInFromRight .productwrap , .fadeInFromRight .swiper-slide-duplicate .productwrap , .fadeInFromRight .postphoto , .fadeInFromRight.instagram-feed ul li { -moz-transform: matrix(1, 0, 0, 1, 100, 0); -ms-transform: matrix(1, 0, 0, 1, 100, 0); -o-transform: matrix(1, 0, 0, 1, 100, 0); -webkit-transform: matrix(1, 0, 0, 1, 100, 0); transform: matrix(1, 0, 0, 1, 100, 0); } .fadeInFromLeft .blog_item , .fadeInFromLeft .carousel_item , .fadeInFromLeft .productwrap , .fadeInFromLeft .swiper-slide-duplicate .productwrap , .fadeInFromLeft .postphoto , .fadeInFromLeft.instagram-feed ul li { -moz-transform: matrix(1, 0, 0, 1, -100, 0); -ms-transform: matrix(1, 0, 0, 1, -100, 0); -o-transform: matrix(1, 0, 0, 1, -100, 0); -webkit-transform: matrix(1, 0, 0, 1, -100, 0); transform: matrix(1, 0, 0, 1, -100, 0); } .zoomIn .blog_item , .zoomIn .carousel_item , .zoomIn .productwrap , .zoomIn .swiper-slide-duplicate .productwrap , .zoomIn .postphoto , .zoomIn.instagram-feed ul li { -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); -webkit-transform: scale(0.4); transform: scale(0.4); } .fadeIn .productwrap.isAnimated, .fadeIn .productwrap.isAnimated, .fadeIn.instagram-feed ul li.isAnimated, .fadeIn .blog_item.isAnimated, .fadeInFromLeft .productwrap.isAnimated, .fadeInFromLeft .postphoto.isAnimated, .fadeInFromLeft .carousel_item.isAnimated, .fadeInFromLeft.instagram-feed ul li.isAnimated, .fadeInFromLeft .blog_item.isAnimated, .fadeInFromRight .productwrap.isAnimated, .fadeInFromRight .postphoto.isAnimated, .fadeInFromRight .carousel_item.isAnimated, .fadeInFromRight.instagram-feed ul li.isAnimated, .fadeInFromRight .blog_item.isAnimated, .fadeInFromTop .productwrap.isAnimated, .fadeInFromTop .postphoto.isAnimated, .fadeInFromTop .carousel_item.isAnimated, .fadeInFromTop.instagram-feed ul li.isAnimated, .fadeInFromTop .blog_item.isAnimated, .fadeInFromBottom .productwrap.isAnimated, .fadeInFromBottom .postphoto.isAnimated , .fadeInFromBottom .carousel_item.isAnimated , .fadeInFromBottom.instagram-feed ul li.isAnimated, .fadeInFromBottom .blog_item.isAnimated, .zoomIn .blog_item.isAnimated, .zoomIn .productwrap.isAnimated, .zoomIn .postphoto.isAnimated , .zoomIn .carousel_item.isAnimated , .zoomIn.instagram-feed ul li.isAnimated { -moz-opacity: 1; opacity: 1; -moz-transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .fadeIn .productwrap.isAnimated { -moz-transform: matrix(1, 0, 0, 1, 0, 0); -ms-transform: matrix(1, 0, 0, 1, 0, 0); -o-transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); transform: matrix(1, 0, 0, 1, 0, 0); } .zoomIn .blog_item.isAnimated , .zoomIn .carousel_item.isAnimated , .zoomIn .productwrap.isAnimated , .zoomIn .postphoto.isAnimated , .zoomIn.instagram-feed ul li.isAnimated { -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; -webkit-transform:scale(1) ; transform:scale(1) ; } .fadeInFromLeft .blog_item.isAnimated, .fadeInFromLeft .productwrap.isAnimated, .fadeInFromLeft .postphoto.isAnimated, .fadeInFromLeft .carousel_item.isAnimated, .fadeInFromLeft.instagram-feed ul li.isAnimated, .fadeInFromRight .blog_item.isAnimated, .fadeInFromRight .productwrap.isAnimated, .fadeInFromRight .postphoto.isAnimated, .fadeInFromRight .carousel_item.isAnimated, .fadeInFromRight.instagram-feed ul li.isAnimated, .fadeInFromTop .blog_item.isAnimated, .fadeInFromTop .productwrap.isAnimated, .fadeInFromTop .postphoto.isAnimated, .fadeInFromTop .carousel_item.isAnimated, .fadeInFromBottom .blog_item.isAnimated, .fadeInFromTop.instagram-feed ul li.isAnimated, .carousel.fadeInFromBottom .carousel_item.isAnimated , .carousel.fadeInFromBottom .productwrap.isAnimated , .carousel.fadeInFromBottom .swiper-slide-duplicate .productwrap.isAnimated , .carousel.fadeInFromBottom .postphoto.isAnimated, .fadeInFromBottom .productwrap.isAnimated, .fadeInFromBottom .postphoto.isAnimated , .fadeInFromBottom .carousel_item.isAnimated , .fadeInFromBottom.instagram-feed ul li.isAnimated { -moz-transform: matrix(1, 0, 0, 1, 0, 0) ; -ms-transform: matrix(1, 0, 0, 1, 0, 0) ; -o-transform: matrix(1, 0, 0, 1, 0, 0) ; -webkit-transform: matrix(1, 0, 0, 1, 0, 0) ; transform: matrix(1, 0, 0, 1, 0, 0) ; } .textVisiblity { /* When gallery or portfolio have portfolio-text style*/ -moz-opacity: 1; opacity: 1; -webkit-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .zoomIn .productwrap.categoryReload , .zoomIn .postphoto.categoryReload , .categoryReload { -moz-opacity: 0; opacity: 0; -moz-transition-delay: 0s !important; -o-transition-delay: 0s !important; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; -moz-transform: scale(0.4) ; -ms-transform: scale(0.4) ; -o-transform: scale(0.4) ; -webkit-transform: scale(0.4) ; transform: scale(0.4) ; -moz-transition: opacity 0.35s ease,transform 0.6s ease-in; -o-transition: opacity 0.35s ease,transform 0.6s ease-in; -webkit-transition: opacity 0.35s ease,transform 0.6s ease-in; transition: opacity 0.35s ease,transform 0.6s ease-in; } .zoomIn .productwrap.categoryReload , .zoomIn .postphoto.categoryReload { -moz-transform: scale(0.4) !important; -ms-transform: scale(0.4) !important; -o-transform: scale(0.4) !important; -webkit-transform: scale(0.4) !important; transform: scale(0.4) !important; } /*-----------------------------------------------------------------------------------*/ /* 27. Imagebox shortcode /*-----------------------------------------------------------------------------------*/ .imageBox .title { font-size:25px; line-height:23px; font-weight: 500; color:#282828; text-decoration:none; float:left; border:none !important; padding-left:16px; margin-top:0px !important; width:100%; } .imageBox.disableContentBorder .title { padding:0 !important; } .imageBox .content .title a { color:inherit; text-decoration:none; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .imageBox .content .title a:hover { opacity:.6; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .imageBox .title .subtitle { display:block; color:#363636; font-size:13px; font-family:Lato,sans-serif; font-weight:400; } .imageBox .content .text { padding-top:17px; color:#252525; font-size:13px; font-family:Lato,sans-serif; } .imageBox .image { line-height:0; text-align:center; width:100%; position:relative; overflow:hidden; } .imageBox.image_hover_shadow { overflow:visible; } .imageBox.image_hover_shadow .image { -moz-transition: box-shadow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: box-shadow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: box-shadow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: box-shadow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .imageBox.image_hover_shadow .image:hover { box-shadow: 0px 20px 30px 0px rgba(152, 152, 152, 0.4); } .imageBox .image img { width:100%; } .imageBox.imageBoxleft .content { text-align:left; } .imageBox.imageBoxRight .title { float:right; } .imageBox.imageBoxCenter .content .title { padding-left:0 !important; padding-right:0 !important; } .imageBox.imageBoxRight .content{ text-align:right; } .imageBox.imageBoxCenter .content{ text-align:center; padding:15px 10px 15px 10px; } .imageBox .content { padding:15px 20px 15px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border:1px solid #000; } .imageBox:hover { text-decoration:none; } .imageBox.disableContentBorder .text { padding-left:0 !important; padding-right:0 !important; } .imageBox.disableContentBorder .content { border:none !important; } .imageBox.imageBoxRight.disableContentBorder .content { padding: 15px 0 15px 20px; } .imageBox .image , .imageBox { overflow:hidden; position:relative; display:block; } .imageBox.imgBoxHover img { width:100%; display: block; -webkit-transform: scaleX(1) scaleY(1) translateZ(0); -moz-transform: scaleX(1) scaleY(1) translateZ(0); -ms-transform: scaleX(1) scaleY(1) translateZ(0); -o-transform: scaleX(1) scaleY(1) translateZ(0); transform: scaleX(1) scaleY(1) translateZ(0); -webkit-transition: transform .4s ease; -moz-transition: transform .4s ease; -o-transition: transform .4s ease; transition: transform .4s ease; } .imageBox.imgBoxHover:hover img { -webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -moz-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -ms-transform:scaleX(1.05) scaleY(1.05) translateZ(0); -o-transform: scaleX(1.05) scaleY(1.05) translateZ(0); transform: scaleX(1.05) scaleY(1.05) translateZ(0); } .imageBox .imagebox-hover { position:absolute; top:0; left:0; bottom:0; right:0; background-color:#c0392b; opacity:0; z-index:1; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .imageBox:hover .imagebox-hover { opacity:0.4; } /* Image box hover */ .imageBox .iconhover { position:absolute; top:0; left:0; right:0; bottom:0; line-height:100%; vertical-align:middle; font-size:20px; z-index:5; background-image: url(../img/Imagebox_hover.png) ; background-repeat:no-repeat; background-position:center; opacity:0; -moz-transition:opacity 500ms ease 0s; -o-transition:opacity 500ms ease 0s; -webkit-transition:opacity 500ms ease 0s; transition:opacity 500ms ease 0s; } .imageBox:hover .iconhover { opacity:1; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; } .imageBox .imagebox_link { position:absolute; top:0; width:100%; height:100%; z-index:6; display:block; } /*-----------------------------------------------------------------------------------*/ /* 28. Banner shortcode /*-----------------------------------------------------------------------------------*/ .banner { position: relative; overflow: hidden; } .banner .title { font-size:25px; line-height:23px; font-weight: 700; color:#fff; text-decoration:none; margin:0 !important; padding: 0 15px 13px; position: relative; display: block; font-family: Poppins, sans-serif; } .banner .line:after { content: ""; position: absolute; width: 70px; height: 2px; background: #fff; left:50%; margin-left:-35px; -webkit-transition: width .3s ease, margin-left .3s ease; -moz-transition: width .3s ease, margin-left .3s ease; -o-transition: width .3s ease, margin-left .3s ease; transition: width .3s ease, margin-left .3s ease; } .banner:hover .line:after { width: 100px; margin-left:-50px; } .banner .subtitle { display:block; color:#fff; font-size:15px; margin-bottom:10px; font-weight: 500; padding: 0 15px; } .banner .hover { width: 100%; height: 100%; position: absolute; opacity: 0.15; background-color:#000; z-index:1; -webkit-transition: opacity .7s ease, background-color linear .7s; -moz-transition: opacity .7s ease, background-color linear .7s; -o-transition: opacity .7s ease, background-color linear .7s; transition: opacity .7s ease, background-color linear .7s; } .banner:hover .hover { opacity: .8; -webkit-transition: opacity .7s ease, background-color linear .7s; -moz-transition: opacity .7s ease, background-color linear .7s; -o-transition: opacity .7s ease, background-color linear .7s; transition: opacity .7s ease, background-color ease .2s; } .banner .content-container { position:absolute; top:0; left:0; bottom:0; right:0; width: 100%; height: 100%; z-index:2; text-align: center; } .banner .content { position:relative; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .banner img { width: 100%; display: block; -webkit-transform: scaleX(1.15) scaleY(1.15) translateZ(0); -moz-transform: scaleX(1.15) scaleY(1.15) translateZ(0); -ms-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -o-transform: scaleX(1.15) scaleY(1.15) translateZ(0); transform: scaleX(1.15) scaleY(1.15) translateZ(0); -moz-transition: transform .35s ease; -o-transition: transform .35s ease; -webkit-transition: transform .35s ease; transition: transform .35s ease; } .banner:hover img { -webkit-transform: scaleX(1) scaleY(1) translateZ(0); -moz-transform: scaleX(1) scaleY(1) translateZ(0); -ms-transform: scaleX(1) scaleY(1) translateZ(0); -o-transform: scaleX(1) scaleY(1) translateZ(0); transform: scaleX(1) scaleY(1) translateZ(0); } .banner a { text-decoration: none; font-size: 13px; line-height: 21px; opacity: 1; -webkit-transition: opacity .4s ease, transform .4s ease; -moz-transition: opacity .4s ease, transform .4s ease; -o-transition: opacity .4s ease, transform .4s ease; transition: opacity .4s ease, transform .4s ease; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-top: 25px !important; display: inline-block; border: 2px solid #fff; color: #fff; overflow: hidden; border-radius: 20px; } .banner a span { position: relative; display: inline-block; -o-transition: transform 0.4s ease; -moz-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; padding: 1px 13px 2px; font-weight:500; -webkit-backface-visibility: visible; backface-visibility: visible; } .banner a:hover span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .banner a span:after { position: absolute; top: 100%; content: attr(data-hover); left:0; padding: 1px 13px 2px; display: block; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .banner a:hover { border-color:#fff; color:#fff; } /*-----------------------------------------------------------------------------------*/ /* 29. Custom imagebox shortcode /*-----------------------------------------------------------------------------------*/ .custom-imageBox .image { position:relative; overflow:hidden; z-index:1; } .custom-imageBox .image img{ width: 100%; display: block; } .custom-imageBox.imgBoxHover img { width:100%; display: block; -webkit-transform: scaleX(1) scaleY(1) translateZ(0); -moz-transform: scaleX(1) scaleY(1) translateZ(0); -ms-transform: scaleX(1) scaleY(1) translateZ(0); -o-transform: scaleX(1) scaleY(1) translateZ(0); transform: scaleX(1) scaleY(1) translateZ(0); -webkit-transition: transform .6s ease; -moz-transition: transform .6s ease; -o-transition: transform .6s ease; transition: transform .6s ease; } .custom-imageBox.imgBoxHover:hover img { -webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -moz-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -ms-transform:scaleX(1.05) scaleY(1.05) translateZ(0); -o-transform: scaleX(1.05) scaleY(1.05) translateZ(0); transform: scaleX(1.05) scaleY(1.05) translateZ(0); } .custom-imageBox .overlay{ width: 100%; height:100%; z-index:2; opacity: 0; position: absolute; background-color: #000; -moz-transition : opacity .4s ease ; -o-transition : opacity .4s ease ; -webkit-transition : opacity .4s ease ; transition : opacity .4s ease ; } .custom-imageBox:hover .overlay{ opacity: .4; -moz-transition : opacity .2s ease ; -o-transition : opacity .2s ease ; -webkit-transition : opacity .2s ease ; transition : opacity .2s ease ; } .custom-imageBox .custom-textbox{ margin-top: -110px; z-index:3; } /* border animation - custom text box */ .custom-textbox .frame, .custom-textbox .frame div { position: absolute; } .custom-textbox .frame.top { left: 0; top: 0; width: 100%; height: 2px; } .custom-textbox .frame.right { right: 0; top: 0; width: 2px; height: 100%; } .custom-textbox .frame.bottom { right: 0; bottom: 0; width: 100%; height: 2px; } .custom-textbox .frame.left { left: 0; bottom: 0; width: 2px; height: 100%; } .custom-textbox .frame div { background-color:#000; width:0; height:2px; } .custom-textbox .frame.top div, .custom-textbox .frame.bottom div { -webkit-transition: width 1s ease-in-out .35s; -moz-transition: width 1s ease-in-out .35s; -o-transition: width 1s ease-in-out .35s; transition: width 1s ease-in-out .35s; } .custom-textbox .frame.left div, .custom-textbox .frame.right div { -webkit-transition: height 1s ease-in-out .35s; -moz-transition: height 1s ease-in-out .35s; -o-transition: height 1s ease-in-out .35s; transition: height 1s ease-in-out .35s; } .custom-textbox .frame.top div { width:0; height:2px; left:0; } .custom-textbox .frame.bottom div { width:0; height:2px; right:0; } .custom-textbox .frame.left div { width:2px; height:0; bottom:0; } .custom-textbox .frame.right div { width:2px; height:0; top:0; } .custom-textbox.active .frame.top div, .custom-textbox.active .frame.bottom div { width:100%; } .custom-textbox.active .frame.left div, .custom-textbox.active .frame.right div { height:100%; } .custom-imageBox.Boxleft .custom-textbox{ margin-left: -17px; } .custom-imageBox.Boxright .custom-textbox{ margin-right: -17px; } .custom-imageBox .custom-textbox.bg-animated .custom-textbox-bg { width:calc(100% - 27px); } .custom-imageBox .custom-textbox .textBox { width:calc(100% - 27px); } .custom-imageBox.Boxright .custom-textbox .textBox , .custom-imageBox.Boxright .custom-textbox.bg-animated .custom-textbox-bg { left:27px; } /*-----------------------------------------------------------------------------------*/ /* 30. Textbox shortcode /*-----------------------------------------------------------------------------------*/ .textBox .title { font-size:26px; line-height:34px; font-family:Poppins,sans-serif; font-weight: 700; color:#101010; text-decoration:none; float:left; } .textBox .title a { color:inherit; text-decoration:none; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .textBox .title a:hover { opacity:.6; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; } .textBox .subtitle { display:block; color:#363636; font-family:Lato,sans-serif; font-weight:400; } .textLeftBorder .title { border-left:solid #073B87 8px; padding-left:16px; } .textBox .text { color:#363636; font-family: Lato, sans-serif; font-weight:400; } .textBox.textRightBorder .title { border-right:2px solid #000; text-align:right; float:right; } .textBox.textRightBorder .title.no-subtitle, .textBox.textLeftBorder .title.no-subtitle { padding-bottom: 12px; } .textBox.textLeftBorder .title { border-left:2px solid #000; } .textBox.textLeftBorder:not(.disableContentBorder) .title { width:calc(100% - 20px); } .textBox.textTopBorder hr { width:50%; height:2px; background-color:#000; margin:0 0 14px; } .textBox.textBottomBorder hr { width:50%; height:2px; background-color:#000; margin:7px 0 0px; } /* Alignment for text box description */ .textBox.imageBoxleft .text { text-align:left; padding-left: 25px; } .textBox.textBoxRight .text { text-align:right; } .textBox.textBoxCenter .text { text-align:center; } /* undeline Align - top and Bottom */ .textBox.textBoxUnderCenter .title hr { margin-right:auto; margin-left:auto; max-width:140px; } .textBox.textBoxUnderCenter .title { width:100%; text-align:center; } .textBox.textBoxUnderRight .title hr { margin:20px 0 0 auto; } .textBox.textBoxUnderRight.textTopBorder .title hr { margin:0 0 20px auto; } .textBox.textBoxUnderRight .title { float:right; text-align:right; } /* text box - size 20 */ .textBox.fontSize20 .title { font-size:20px; line-height:30px; } .textBox.textRightBorder.fontSize20 .title { padding-right:21px; padding-top:12px; padding-bottom:5px; } .textBox.textLeftBorder.fontSize20 .title { padding-left:20px; padding-top:9px; padding-bottom:5px; } .textBox.textRightBorder.fontSize20.nosubtitle .title , .textBox.textLeftBorder.fontSize20.nosubtitle .title { padding-bottom:9px; } .textBox.fontSize20 .text { padding-top:15px; } .textBox.fontSize20 .subtitle { line-height:21px; font-size:13px; } .textBox.textTopBorder.fontSize20 .text { padding-top:24px; } .textBox.fontSize20.textBottomBorder .text { padding-top:23px; } /* text box - size 24 */ .textBox.fontSize24 .title { font-size:24px; line-height:35px; } .textBox.textRightBorder.fontSize24 .title { padding-right:23px; padding-top:7px; } .textBox.textLeftBorder.fontSize24 .title { padding-left:22px; padding-top:7px; } .textBox.textRightBorder.fontSize24.nosubtitle .title , .textBox.textLeftBorder.fontSize24.nosubtitle .title { padding-bottom:8px; } .textBox.fontSize24 .text { padding-top:15px; } .textBox.fontSize24 .subtitle { line-height:22px; font-size:14px; } .textBox.fontSize24.textBottomBorder .text { padding-top:18px; } /* text box - size 32 */ .textBox.fontSize32 .title { font-size:32px; line-height:44px; } .textBox.textRightBorder.fontSize32 .title { padding-right:15px; padding-top:7px; } .textBox.textLeftBorder.fontSize32 .title { padding-left:15px; padding-top:4px; } .textBox.textRightBorder.fontSize32.nosubtitle .title , .textBox.textLeftBorder.fontSize32.nosubtitle .title { padding-bottom:5px; } .textBox.fontSize32 .text { padding-top:15px; } .textBox.fontSize32 .subtitle { line-height:25px; font-size:15px; } /* text box - size 40 */ .textBox.fontSize40 .title { font-size:40px; line-height:53px; } .textBox.textRightBorder.fontSize40 .title { padding-right:23px; padding-top:16px; } .textBox.textLeftBorder.fontSize40 .title { padding-left:22px; padding-top:8px; } .textBox.textRightBorder.fontSize40.nosubtitle .title , .textBox.textLeftBorder.fontSize40.nosubtitle .title { padding-bottom:10px; } .textBox.fontSize40 .text { padding-top:16px; } .textBox.fontSize40 .subtitle { line-height:25px; padding-left:4px; padding-right:4px; font-size:16px; } .textBox.fontSize48.textBottomBorder .text { padding-top:23px; } .textBox.textTopBorder.fontSize40 .text { padding-top:15px; } /* text box - size 48 */ .textBox.fontSize48 .title { font-size:48px; line-height:60px; } .textBox.textRightBorder.fontSize48 .title { padding-right:23px; padding-top:22px; } .textBox.textLeftBorder.fontSize48 .title { padding-left:22px; padding-top:8px; } .textBox.textRightBorder.fontSize48.nosubtitle .title, .textBox.textLeftBorder.fontSize48.nosubtitle .title { padding-bottom:7px; } .textBox.fontSize48 .text { padding-top:18px; } .textBox.textTopBorder.fontSize48 .text { padding-top:15px; } .textBox.fontSize48 .subtitle { line-height:30px; padding-left:4px; padding-right:4px; font-size:18px; } /* text box - size 60 */ .textBox.fontSize60 .title { font-size:60px; line-height:70px; } .textBox.fontSize60 .text { padding-top:20px; } .textBox.textRightBorder.fontSize60 .title { padding-right:23px; padding-top:27px; } .textBox.textLeftBorder.fontSize60 .title { padding-left:23px; padding-top:15px; } .textBox.textRightBorder.fontSize60.nosubtitle .title , .textBox.textLeftBorder.fontSize60.nosubtitle .title { padding-bottom:19px; } .textBox.fontSize60 .subtitle { line-height:30px; padding-left:4px; padding-right:4px; font-size:20px; } /* text box - size 80 */ .textBox.fontSize80 .title { font-size:80px; line-height:90px; } /* text box - size 100 */ .textBox.fontSize100 .title { font-size:100px; line-height:110px; } .textBox.textRightBorder.fontSize80 .title { padding-right:23px; padding-top:20px; } .textBox.textLeftBorder.fontSize80 .title { padding-left:23px; padding-top:10px; } .textBox.textRightBorder.fontSize80.nosubtitle .title , .textBox.textLeftBorder.fontSize80.nosubtitle .title { padding-bottom:11px; } .textBox.fontSize80 .subtitle { font-size:22px; line-height:35px; } .textBox.fontSize100 .text, .textBox.fontSize80 .text { padding-top:20px; } .textBox.fontSize100 .subtitle { font-size:25px; line-height:35px; } .textBox.textBoxNoStyle .title { margin-bottom:10px; } .textBox.textBoxUnderline .title hr { height:6px; width:15%; background-color:#101010; margin:3px 0 0 0; } .textBox.fontSize32.textBoxUnderline .title hr , .textBox.fontSize45.textBoxUnderline .title hr { margin:15px 0 0; } .textBox.fontSize32.textBoxUnderline .title hr , .textBox.fontSize38.textBoxUnderline .title hr , .textBox.fontSize45.textBoxUnderline .title hr { margin-top:15px; } .textBox.fontSize25.textBoxUnderline .title hr { margin-top:10px; } .textBox.textBoxNoStyle .title hr { display:none; } .textBox .text.contentfs12 { font-size:12px; } .textBox .text.contentfs13 { font-size:13px; line-height:23px; } .textBox .text.contentfs14 { font-size:14px; line-height:24px; } .textBox .text.contentfs15 { font-size:15px; line-height:26px; } .textBox .text.contentfs16 { font-size:16px; line-height:28px; } .textBox .text.contentfs17 { font-size:17px; line-height:30px; } .textBox .text.contentfs18 { font-size:18px; line-height:32px; } .textBox .text.contentfs19 { font-size:19px; line-height:33px; } .textBox .text.contentfs20 { font-size:20px; line-height:34px; } .textBox .text.contentfs22 { font-size: 22px; line-height: 37px; } .textBox .text.contentfs24 { font-size:24px; line-height:39px; } .textLeftBorder.fontSize123 .title { border-left:15px solid #073B87; } .textLeftBorder .title hr { height:0; margin:15px 0; } .textLeftBorder.fontSize123 .title hr { height:0; margin:30px 0; } .textBox.textLeftBorder.fontSize25 .title{ font-size:25px; line-height: 25px; } .textBox.textLeftBorder.fontSize32 .title { font-size:32px; line-height: 40px; } .textBox.textLeftBorder.fontSize38 .title { font-size:38px; line-height: 35px; } .textBox.textLeftBorder.fontSize45 .title { font-size:45px; line-height:39px; } .textBox.textLeftBorder.fontSize56 .title{ font-size:56px; line-height:48px; } .textBox.textLeftBorder.fontSize123 .title { font-size: 123px; line-height: 110px; } /*-----------------------------------------------------------------------------------*/ /* 31. Custom textbox shortcode /*-----------------------------------------------------------------------------------*/ .custom-textbox .textBox { padding: 27px; width: 100%; height: 100%; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .custom-textbox { padding:10px; position: relative; margin-bottom:10px; } .custom-textbox .custom-textbox-bg { content:""; position: absolute; height: 100%; width: 0; background-color:#fff; top:0; left:0; z-index: 0; -webkit-transition: width .7s ease-in-out 0s; -moz-transition: width .7s ease-in-out 0s; -o-transition: width .7s ease-in-out 0s; transition: width .7s ease-in-out 0s; } .custom-textbox.bg-animated .custom-textbox-bg { width: 100%; } .custom-textbox .textBox .text { opacity:0; -webkit-transition: opacity .4s ease-in-out 1s; -moz-transition: opacity .4s ease-in-out 1s; -o-transition: opacity .4s ease-in-out 1s; transition: opacity .4s ease-in-out 1s; } .custom-textbox.active .textBox .text { opacity:1; } .custom-textbox .textBox .title { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: -webkit-transform .5s ease-in-out .5s, opacity .5s ease-in-out .5s; -moz-transition: -moz-transform .5s ease-in-out .5s, opacity .5s ease-in-out .5s; -o-transition: -o-transform .5s ease-in-out .5s, opacity .5s ease-in-out .5s; transition: transform .5s ease-in-out .5s, opacity .5s ease-in-out .5s; } .custom-textbox.active .textBox .title { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); word-wrap: break-word; box-sizing: border-box; width: 100%; } .custom-textbox .textBox .subtitle { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: -webkit-transform 1s ease-in-out .5s, opacity 1s ease-in-out .5s; -moz-transition: -moz-transform 1s ease-in-out .5s, opacity 1s ease-in-out .5s; -o-transition: -o-transform 1s ease-in-out .5s, opacity 1s ease-in-out .5s; transition: transform 1s ease-in-out .5s, opacity 1s ease-in-out .5s; } .custom-textbox.active .textBox .subtitle { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } /*-----------------------------------------------------------------------------------*/ /* 32. Custom title /*-----------------------------------------------------------------------------------*/ .custom-title { text-align: center; position:relative; } .custom-title .iconbackground, .custom-title .textbackground { position:absolute; left:0; width:100%; top:0; } .custom-title .title { font-family:Poppins,sans-serif; font-weight: 500; color:#101010; text-decoration:none; display: inline-block; position: relative; } .custom-title .title span { z-index: 1; position: relative; } .fontSize20 .title { font-size:20px; line-height:20px; } .fontSize20 .iconbackground, .fontSize20 .textbackground { font-size:70px; line-height:70px; } .fontSize20.iconbackgroundstyle .title, .fontSize20.textbackgroundstyle .title, .fontSize20.iconbackgroundstyle, .fontSize20.textbackgroundstyle { line-height:70px; } .fontSize24 .title { font-size:24px; line-height:24px; } .fontSize24 .iconbackground, .fontSize24 .textbackground { font-size:80px; line-height:80px; } .fontSize24.iconbackgroundstyle .title, .fontSize24.textbackgroundstyle .title, .fontSize24.iconbackgroundstyle, .fontSize24.textbackgroundstyle { line-height:80px; } .fontSize32 .title { font-size:32px; line-height:32px; } .fontSize32 .iconbackground, .fontSize32 .textbackground { font-size:120px; line-height:120px; } .fontSize32.iconbackgroundstyle .title, .fontSize32.textbackgroundstyle .title, .fontSize32.iconbackgroundstyle, .fontSize32.textbackgroundstyle { line-height:120px; } .fontSize40 .title { font-size:40px; line-height:40px; margin-bottom:5px; } .fontSize40 .iconbackground , .fontSize40 .textbackground { font-size:150px; line-height:150px; } .fontSize40.iconbackgroundstyle .title, .fontSize40.textbackgroundstyle .title, .fontSize40.iconbackgroundstyle, .fontSize40.textbackgroundstyle { line-height:150px; } .fontSize48 .title { font-size:48px; line-height:40px; } .fontSize48 .iconbackground, .fontSize48 .textbackground { font-size:150px; line-height:150px; } .fontSize48.iconbackgroundstyle .title, .fontSize48.textbackgroundstyle .title, .fontSize48.iconbackgroundstyle, .fontSize48.textbackgroundstyle { line-height:150px; } .fontSize60 .title { font-size:60px; line-height:50px; } .fontSize60 .iconbackground , .fontSize60 .textbackground { font-size:180px; line-height:180px; } .fontSize60.iconbackgroundstyle .title, .fontSize60.textbackgroundstyle .title, .fontSize60.iconbackgroundstyle, .fontSize60.textbackgroundstyle { line-height:180px; } .fontSize80 .title { font-size:80px; line-height:80px; } .fontSize80 .iconbackground, .fontSize80 .textbackground { font-size:200px; line-height:200px; } .fontSize80.iconbackgroundstyle .title, .fontSize80.textbackgroundstyle .title, .fontSize80.iconbackgroundstyle, .fontSize80.textbackgroundstyle { line-height:200px; } .fontSize100 .title { font-size:100px; line-height:100px; } .fontSize100 .iconbackground, .fontSize100 .textbackground { font-size:250px; line-height:250px; } .fontSize100.iconbackgroundstyle .title, .fontSize100.textbackgroundstyle .title, .fontSize100.iconbackgroundstyle, .fontSize100.textbackgroundstyle { line-height:250px; } .custom-textbox .title { margin-top: 0 !important; margin-bottom:0 !important; } .letterspacing0 { letter-spacing: 0px; } .letterspacing1 { letter-spacing: 2px; } .letterspacing2 { letter-spacing: 5px; } .letterspacing3 { letter-spacing: 8px; } .letterspacing4 { letter-spacing: 12px; } /* shapes */ .custom-title .shape-container{ position: absolute; left: 50%; bottom:100%; } .custom-title .shape-container .shape-line { position: absolute; width: 1px; height: 100%; top: 0; } /* Sizes */ .custom-title.fontSize100 .shape-container{ width: 110px; height: 110px; margin-bottom:55px; margin-left: -55px; } .custom-title.fontSize80 .shape-container{ width: 100px; height: 100px; margin-bottom:50px; margin-left: -50px; } .custom-title.fontSize60 .shape-container { width: 90px; height: 90px; margin-bottom:40px; margin-left: -45px; } .custom-title.fontSize48 .shape-container { width: 80px; height: 80px; margin-bottom:30px; margin-left: -40px; } .custom-title.fontSize40 .shape-container { width: 70px; height: 70px; margin-bottom:25px; margin-left: -35px; } .custom-title.fontSize32 .shape-container { width: 60px; height: 60px; margin-bottom:20px; margin-left: -30px; } .custom-title.fontSize24 .shape-container { width: 56px; height: 56px; margin-bottom:16px; margin-left: -28px; } .custom-title.fontSize20 .shape-container { width: 44px; height: 44px; margin-bottom:12px; margin-left: -22px; } /* line */ .custom-title .shape-container.line { width: 3px; margin-left: 0; bottom:100%; } .custom-title .shape-container .back-line{ position: absolute; width: 1px; height: 100%; top: 0; left: 50%; opacity: .6; background-color: #101010; } .custom-title .shape-container .hover-line{ position: absolute; width: 3px; height: 0; bottom: 0; left: 50%; margin-left: -1px; z-index:1; background-color: #073B87; -webkit-transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); -moz-transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); transition: height 1s cubic-bezier(0.23, 1, 0.32, 1); } .custom-title .title span:hover + .shape-container .hover-line{ height: 100%; } .custom-title.fontSize100 .shape-container.line{ height: 160px; } .custom-title.fontSize80 .shape-container.line { height: 160px; } .custom-title.fontSize60 .shape-container.line { height: 140px; } .custom-title.fontSize48 .shape-container.line { height: 125px; } .custom-title.fontSize40 .shape-container.line { height: 110px; } .custom-title.fontSize32 .shape-container.line { height: 95px; } .custom-title.fontSize24 .shape-container.line { height: 75px; } .custom-title.fontSize20 .shape-container.line { height: 60px; } /* Square */ .custom-title .shape-container.square .shape-line { border: 4px solid #073B87; box-sizing: border-box; width:100%; height: 100%; } /* Rptated square */ .custom-title .shape-container.rotated_square .shape-line { border: 4px solid #073B87; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* Circle */ .custom-title .shape-container.circle .shape-line { border: 4px solid #073B87; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; } /* Triangle */ .custom-title .shape-container.triangle .shape-line { border-bottom: 4px solid #073B87; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; z-index: 1; } .custom-title .shape-container.triangle .shape-line:after { content: ""; border-bottom: 4px solid #073B87; position: absolute; width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; left: 100%; } .custom-title .shape-container.triangle .shape-line:before { content: ""; position: absolute; border-bottom: 4px solid #073B87; width: 100%; height: 100%; -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; left: 0; } .custom-title .shape-container.triangle .shape-fill { width: 0; height: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-style: solid; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); bottom: 0; position: absolute; left: 0px; } .custom-title.fontSize80 .shape-container.triangle .shape-fill { border-width: 100px 50px 87px 50px } .custom-title.fontSize60 .shape-container.triangle .shape-fill { border-width: 90px 45px 78px 45px } .custom-title.fontSize48 .shape-container.triangle .shape-fill { border-width: 80px 40px 70px 40px; } .custom-title.fontSize40 .shape-container.triangle .shape-fill { border-width: 70px 35px 62px 35px; } .custom-title.fontSize32 .shape-container.triangle .shape-fill { border-width: 60px 30px 53px 30px; } .custom-title.fontSize24 .shape-container.triangle .shape-fill { border-width: 56px 28px 50px 28px; } .custom-title.fontSize20 .shape-container.triangle .shape-fill { border-width: 44px 22px 40px 22px; } /*-----------------------------------------------------------------------------------*/ /* 33. shortcode Animation /*-----------------------------------------------------------------------------------*/ .shortcodeAnimation { opacity: 0; position: relative; max-width: 100%; width: auto; height: auto; -webkit-transform: scale(1, 1) translate3D(0,0,0); -moz-transition: transform .9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .7s ease-in-out; -o-transition: transform .9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .7s ease-in-out; -webkit-transition: transform .9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .7s ease-in-out; transition: transform .9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .7s ease-in-out; } .shortcodeAnimation.row_section.fullWidth { width: 100%; } .shortcodeAnimation[data-animation="fade-in-left"] { -webkit-transform: translate3d(-50px,0,0); -o-transform: translate3d(-50px,0,0); -moz-transform: translate3d(-50px,0,0); -ms-transform: translate3d(-50px,0,0); transform: translate3d(-50px,0,0); } .shortcodeAnimation[data-animation="fade-in-right"] { -webkit-transform: translate3d(50px,0,0); -o-transform: translate3d(50px,0,0); -moz-transform: translate3d(50px,0,0); -ms-transform: translate3d(50px,0,0); transform: translate3d(50px,0,0); } .shortcodeAnimation[data-animation="fade-in-top"] { -webkit-transform: translate3d(0,-50px,0); -o-transform: translate3d(0,-50px,0); -moz-transform: translate3d(0,-50px,0); -ms-transform: translate3d(0,-50px,0); transform: translate3d(0,-50px,0); } .shortcodeAnimation[data-animation="fade-in-bottom"] { -webkit-transform: translate3d(0,50px,0); -o-transform: translate3d(0,50px,0); -moz-transform: translate3d(0,50px,0); -ms-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); } .shortcodeAnimation[data-animation="grow-in"] { -webkit-transform: scale(0.4); -o-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } .shortcodeAnimation[data-animation="none"] { opacity:1; } .shortcodeAnimation.do_animate { opacity: 1; -webkit-transform: scale(1) translate3d(0,0,0); -o-transform: scale(1) translate3d(0,0,0); -moz-transform: scale(1) translate3d(0,0,0); -ms-transform: scale(1) translate3d(0,0,0); transform: scale(1) translate3d(0,0,0); } /*-----------------------------------------------------------------------------------*/ /* 34. Icon Box shortcode /*-----------------------------------------------------------------------------------*/ .iconbox .icon { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; } .iconbox.right_alignment .icon { -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; -webkit-transform-origin: right; transform-origin: right; } .iconbox.left_alignment .icon { -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; -webkit-transform-origin: left; transform-origin: left; } .iconbox .icon:hover { -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); -webkit-transform: scale(0.9); transform: scale(0.9); } .iconbox.iconbox-top { text-align: center; } .iconbox.iconbox-top.right_alignment ,.iconbox.iconbox-top.right_alignment .icon { text-align:right; } .iconbox.iconbox-top.left_alignment, .iconbox.iconbox-top.left_alignment .icon { text-align:left; } .iconbox.iconbox-top .icon { padding-bottom: 23px; text-align: center; } .iconbox .glyph { color: #073B87; font-size: 35px; z-index: 1; position: relative; } .iconbox .title{ font-size: 16px; font-weight: 600; color:#252525; margin: 0; } .iconbox .content { color:#555; font-family:Lato,sans-serif; font-weight:400; } .iconbox.iconbox-top .title { line-height:25px; margin-bottom:5px; } .iconbox .more-link { padding-top: 10px; } .iconbox .more-link a { font-family: Lato,sans-serif; text-decoration: none; color: #787878; padding: 10px; letter-spacing: 0; -webkit-transition: letter-spacing .2s ease; -moz-transition: letter-spacing .2s ease; -o-transition: letter-spacing .2s ease; transition: letter-spacing .2s ease; } .iconbox .more-link:hover a{ color:#444; letter-spacing:1px; } .iconbox .more-link-arrow { position: relative; width:25px; display: inline-block; vertical-align: top; height: 18px; top:2px; left:5px; } .iconbox a .more-link-arrow:before { position:absolute; top:50%; content:""; width: 22px; height:1px; border-top: 1px solid #787878; left: 0; -webkit-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-top .6s ease; -moz-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-top .6s ease; -o-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-top .6s ease; transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-top .6s ease; } .iconbox a .more-link-arrow:after { position: absolute; top: 50%; content: ""; width: 3px; height: 1px; left:0; margin-left: 21px; margin-top: -2px; border-style: solid; border-width: 2px 1px 2px 4px; border-color: rgba(120, 120, 120, 0) rgba(120, 120, 120, 0) rgba(120, 120, 120, 0) rgb(120, 120, 120); -webkit-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-color .6s ease; -moz-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-color .6s ease; -o-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-color .6s ease; transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), border-color .6s ease; } .iconbox a:hover .more-link-arrow:after { margin-left: 38px; border-color: rgba(120, 120, 120, 0) rgba(120, 120, 120, 0) rgba(120, 120, 120, 0) rgb(68, 68, 68); } .iconbox a:hover .more-link-arrow:before{ width:38px; border-top: 1px solid #444; } /* iconbox rectangle */ .iconbox.rectangle .icon span.glyph { height: 70px; width: 70px; display: block; margin: 0 auto; background-color: #073B87; border:2px solid #073B87; line-height: 70px; color: #FFFFFF; font-size: 28px; border-radius:3px; } /* iconbox circle*/ .iconbox.circle .icon span.glyph { height: 75px; width: 75px; display: block; margin: 0 auto; background-color: #073B87; border: 2px solid #073B87; color: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; line-height: 75px; font-size: 30px; } .iconbox.transparentbackground .icon span.glyph { background-color: transparent !important; color: #073B87; } /* iconbox left*/ .iconbox.iconbox-left .icon{ width: 60px; float: left; padding:7px 0 0 0; padding-bottom:10px; } .iconbox.iconbox-left .title { padding-bottom:2px; line-height:25px; } .iconbox.iconbox-left .more-link{ text-align: right; float:right; } .iconbox.iconbox-left .content { padding-left:60px; } .vc_col-sm-3 .iconbox.iconbox-left .content { padding-left:0; } .span3 .iconbox.iconbox-left .icon { width: 100%; } .span3 .iconbox.iconbox-left .content-wrap{ float:left; width:100%; } .vc_col-sm-3 .iconbox.iconbox-left .icon{ width: 100%; } .vc_col-sm-6 .iconbox.iconbox-left .icon , .vc_col-sm-8 .iconbox.iconbox-left .icon , .vc_col-sm-9 .iconbox.iconbox-left .icon,.vc_col-sm-12 .iconbox.iconbox-left .icon { width:70px; padding-top: 11px; } .vc_col-sm-6 .iconbox.iconbox-left .content-wrap , .vc_col-sm-8 .iconbox.iconbox-left .content-wrap , .vc_col-sm-9 .iconbox.iconbox-left .content-wrap, .vc_col-sm-12 .iconbox.iconbox-left .content-wrap { width: 100%; padding-top: 10px; } .vc_col-sm-6 .iconbox.iconbox-left .icon .glyph , .vc_col-sm-8 .iconbox.iconbox-left .icon .glyph , .vc_col-sm-9 .iconbox.iconbox-left .icon .glyph , .vc_col-sm-12 .iconbox.iconbox-left .icon .glyph { font-size:45px; } .vc_col-sm-6 .iconbox.iconbox-left .content-wrap .content , .vc_col-sm-8 .iconbox.iconbox-left .content-wrap .content , .vc_col-sm-9 .iconbox.iconbox-left .content-wrap .content , .vc_col-sm-12 .iconbox.iconbox-left .content-wrap .content { padding-left:70px; } .vc_col-sm-6 .iconbox.iconbox-left .content-wrap .title , .vc_col-sm-8 .iconbox.iconbox-left .content-wrap .title , .vc_col-sm-9 .iconbox.iconbox-left .content-wrap .title , .vc_col-sm-12 .iconbox.iconbox-left .content-wrap .title { padding-left:70px; } /*-----------------------------------------------------------------------------------*/ /* 35. Custom Icon Box shortcode /*-----------------------------------------------------------------------------------*/ .custom-iconbox { border-radius: 1px; background-color: #fff; border: 2px solid transparent; height: 234px; position: relative; opacity: 1; -webkit-transition: border 0.4s ease,background-color 0.3s ease; -moz-transition: border 0.4s ease,background-color 0.3s ease; -o-transition: border 0.4s ease,background-color 0.3s ease; transition: border 0.4s ease,background-color 0.3s ease; } .custom-iconbox.style1:hover { background-color: transparent !important; border: 2px solid #ccc; -webkit-transition: border 0.3s ease 0s; -moz-transition: border 0.3s ease 0s; -o-transition: border 0.3s ease 0s; transition: border 0.3s ease 0s; } .custom-iconbox > .icon { padding: 10px; opacity: 1; -webkit-transition: opacity 0.7s ease .2s; -moz-transition: opacity 0.7s ease .2s; -o-transition: opacity 0.7s ease .2s; transition: opacity 0.7s ease .2s; } .custom-iconbox.style1:hover > .icon { opacity: 0; -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; -o-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .custom-iconbox.style2 > .icon .title, .custom-iconbox.style2 > .icon .glyph { -moz-transition: opacity 0.2s ease .2s; -o-transition: opacity 0.2s ease .2s; -webkit-transition: opacity 0.2s ease .2s; transition: opacity 0.2s ease .2s; } .custom-iconbox.style2:hover > .icon .title, .custom-iconbox.style2:hover > .icon .glyph { opacity: 0; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .custom-iconbox .icon-container { width: calc(100% - 20px); position: absolute; height: calc(100% - 20px); padding-top:65px; text-align: center; border: 2px solid #252525; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; border-radius: 2px; } .custom-iconbox .hover-content { width: 100%; text-align: left; opacity: 0; position: absolute; border-radius: 2px; left: -20px; top: -20px; height: 100%; background: #fff; visibility: hidden; padding: 25px; -moz-background-size: cover !important; -webkit-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; -webkit-transform: translate(20px, 20px); -moz-transform: translate(20px, 20px); -ms-transform: translate(20px, 20px); -o-transform: translate(20px, 20px); transform: translate(20px, 20px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -moz-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; -o-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; -webkit-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } .custom-iconbox.style1:hover .hover-content { visibility: visible; opacity: 1; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /*Hover style2 */ .custom-iconbox.style2, .custom-iconbox.style2:hover { border: none; } .custom-iconbox.style2:hover .hover-content { visibility: visible; opacity: 1; } .custom-iconbox.style2 .hover-content { width: 100%; text-align: left; opacity: 0; position: absolute; left: -20px; top: -20px; height: 100%; background: #fff; visibility: hidden; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; -moz-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; -webkit-transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } .custom-iconbox .hover-content .overlay { border-radius:2px; display: block; position: absolute; width:100%; height: 100%; top:0; left:0; } .custom-iconbox .hover-content .overlay:before { content: ""; display: block; position: absolute; width:100%; height: 100%; top:0; left:0; border-radius:2px; } .custom-iconbox.hasimagebackground .hover-content .overlay:before { opacity: .7; } .custom-iconbox .icon{ padding-bottom: 20px; } .custom-iconbox .glyph{ font-size: 48px; z-index: 1; position: relative; } .custom-iconbox .hover-content .glyph { color: #fff; padding-left:1px; } .custom-iconbox .title{ font-size: 16px; line-height:18px; font-weight: 600; padding-bottom:5px; color:#fff; margin: 0; } .custom-iconbox .icon-container .title { color: #333; padding-top: 10px; } .custom-iconbox .content { color:#fff; max-height: 65px; overflow: hidden; font-weight:400; } .custom-iconbox .more-link { display: inline-block; } .custom-iconbox .more-link a { text-decoration: none; color:#fff; padding: 10px 10px 10px 0; font-size: 12px; font-weight: 500; font-family:Poppins,sans-serif; } .custom-iconbox:hover .hover-content .icon { opacity: 1; transform: translateX(0px); -webkit-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.05s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .05s; -moz-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.05s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .05s; -o-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.05s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .05s; transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) 0.05s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .05s; } .custom-iconbox:hover .hover-content .title { opacity: 1; transform: translateX(0px); -moz-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s; -o-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s; -webkit-transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s; transition: opacity .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s, transform .5s cubic-bezier(0.39, 0.575, 0.565, 1) .15s; } .custom-iconbox:hover .content-wrap { opacity: 1; transform: translateX(0px); -webkit-transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s, transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s; -moz-transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s, transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s; -o-transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s, transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s; transition: opacity .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s, transform .4s cubic-bezier(0.39, 0.575, 0.565, 1) .25s; } .custom-iconbox .content-wrap, .custom-iconbox .hover-content .icon, .custom-iconbox .hover-content .title { opacity: 0; transform: translateX(15px); -webkit-transition: opacity .3s ease 0s, transform .1s ease-in-out 0s; -moz-transition: opacity .3s ease 0s, transform .1s ease-in-out 0s; -o-transition: opacity .3s ease 0s, transform .1s ease-in-out 0s; transition: opacity .3s ease 0s, transform .1s ease-in-out 0s; } /*-----------------------------------------------------------------------------------*/ /* 37. Horizontal separator with title /*-----------------------------------------------------------------------------------*/ .vc_separator { background-color:transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .hr-center { margin-left: auto; margin-right: auto; width: 75%; } .hr-medium { width:35%; } .hr-small { width:17%; } .hr-extra-small { width:5%; } .hr-margin-medium { margin-top:17px; margin-bottom:17px; } .hr-margin-small { margin-top:10px; margin-bottom:10px; } .hr-thick { height:2px; } /*-----------------------------------------------------------------------------------*/ /* 38. team member shortcode /*-----------------------------------------------------------------------------------*/ .team-member { width:100%; position: relative; overflow: visible; } .member-pic-container { width:100%; position: relative; } .member-pic { overflow: hidden; width:100%; } .team-member .member-line { position:absolute; width: 100%; height:2px; top:0; left:0; background-color: #073B87; z-index:2; -webkit-transition: height .2s ease-in-out; -moz-transition: height .2s ease-in-out; -o-transition:height .2s ease-in-out; transition: height .2s ease-in-out; } .team-member:hover .member-line{ height:6px; } .team-member .bg-image { display: block; margin: -10px 0 0 -10px; max-width: none; width: -webkit-calc(100% + 10px); width: calc(100% + 10px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -moz-transition: opacity 0.5s, -moz-transform 0.5s; -o-transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s; -webkit-transform: translate3d(10px,10px,0); -moz-transform: translate3d(10px,10px,0); -ms-transform: translate3d(10px,10px,0); -o-transform: translate3d(10px,10px,0); transform: translate3d(10px,10px,0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .team-member:hover .bg-image { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .team-member .overlay { position:absolute; width: 100%; height:100%; top:0; left:0; background-color: #000; opacity:0; z-index:1; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition:opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .team-member:hover .overlay{ opacity:0.3; } .team-member .member-plus { position:absolute; width: 37px; height:37px; bottom:-17px; right:-17px; background-color: #ececec; z-index:2; -webkit-transition: background-color .4s ease; -moz-transition: background-color .4s ease; -o-transition:background-color .4s ease; transition: background-color .4s ease; } .team-member:hover .member-plus { background-color: #073B87; } .team-member .member-plus-line { position: relative; display: block; width:100%; height:100%; top:0; left:0; -webkit-transition: -webkit-transform .3s cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: -moz-transform .3s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: -o-transform .3s cubic-bezier(0.19, 1, 0.22, 1); transition: transform .3s ease; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } .team-member:hover .member-plus-line { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .team-member .member-plus-line:after, .team-member .member-plus-line:before { content:""; position:absolute; width: 15px; height:1px; top: 18px; left: 11px; background-color: #252525; -webkit-transition: background-color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out; -o-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } .team-member:hover .member-plus-line:after, .team-member:hover .member-plus-line:before { background-color: #fff; } .team-member .member-plus-line:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .team-member .member-info .member-name { display: block; margin: 18px 0 0; font-size: 20px; font-weight: 400; line-height: 1.25em; color: #2e2e2e; font-family: Poppins , sans-serif; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } .span3 .team-member .member-info .member-name { font-size: 25px; } .team-member.light .member-info .member-name { color:#fff; } .team-member .member-info cite { font-family: Lato,sans-serif; position: relative; color: #555; font-size: 14px; font-weight:400; -webkit-transition: color 0.25s ease-in-out; -moz-transition: color 0.25s ease-in-out; -o-transition: color 0.25s ease-in-out; transition: color 0.25s ease-in-out; } .team-member.light .member-info cite { color:#ddd; } .team-member .member-info p { color: #999; display: inline; overflow: hidden; max-height: 80px; font-weight:400; font-size:14px; font-family:Lato,sans-serif; } .team-member.light .member-info p { color:#aaa; } .team-member .member-info .member-description { font-size: 14px; opacity: 0; margin-top: 10px; -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: transform 0.35s ease-in, opacity 0.3s ease-in-out; -o-transition: transform 0.35s ease-in, opacity 0.3s ease-in-out; -webkit-transition: transform 0.35s ease-in, opacity 0.3s ease-in-out; transition: transform 0.35s ease-in, opacity 0.3s ease-in-out; } .team-member:hover .member-info .member-description { opacity: 1; -ms-transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); -moz-transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; -o-transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; } .team-member .icons { list-style: none; padding: 0; display: table; position: absolute; bottom: 3px; right: 25px; z-index: 2; } .team-member .icons li { float: left; padding-left: 13px; padding: 5px 10px; opacity: 0; list-style:none; -ms-transform: translate3d(10px,10px,0); -webkit-transform: translate3d(10px,10px,0); -moz-transform: translate3d(10px,10px,0); -o-transform: translate3d(10px,10px,0); transform: translate3d(10px,10px,0); -moz-transition: transform 0.4s ease, opacity 0.4s ease; -o-transition: transform 0.4s ease, opacity 0.4s ease; -webkit-transition: transform 0.4s ease, opacity 0.4s ease; transition: transform 0.4s ease, opacity 0.4s ease; } .team-member .icons li:nth-child(1) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; } .team-member .icons li:nth-child(2) { -webkit-transition-delay: .15s; -moz-transition-delay: .15s; -o-transition-delay: .15s; transition-delay: .15s; } .team-member .icons li:nth-child(3) { -moz-transition-delay: .2s; -o-transition-delay: .2s; -webkit-transition-delay: .2s; transition-delay: .2s; } .team-member .icons li:nth-child(4) { -moz-transition-delay: .25s; -o-transition-delay: .25s; -webkit-transition-delay: .25s; transition-delay: .25s; } .team-member .icons li:nth-child(5) { -moz-transition-delay: .3s; -o-transition-delay: .3s; -webkit-transition-delay: .3s; transition-delay: .3s; } .team-member:hover .icons li { opacity: 1; -ms-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .team-member .icons li a { text-decoration: none; display: block; font-size: 16px; line-height: 1em; color: #fff; -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -moz-transition: transform 0.2s ease, color 0.2s ease; -o-transition: transform 0.2s ease, color 0.2s ease; -webkit-transition: transform 0.2s ease, color 0.2s ease; transition: transform 0.2s ease, color 0.2s ease; } .team-member .icons li:hover a { -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); color: #073B87; } .team-member .icons a span { font-size: 17px!important; } .team-member .signature { width:100%; padding-top:15px; margin-right: -17px; opacity:0; text-align: right; padding-bottom:5px; max-width:160px; float:right; -webkit-transition: opacity 0.8s ease .2s; -moz-transition: opacity 0.8s ease .2s; -o-transition: opacity 0.8s ease .2s; transition: opacity 0.8s ease .2s; } .team-member:hover .signature { opacity:1; } .team-member .more-link-arrow { color:#9f9f9f; display: inline-block; margin-left: 2px; text-decoration: none; font-size:12px; -webkit-transition: color 0.4s ease; -moz-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } /*trick to counting the height of signature( because it has float:right; ) */ .team-member .member-info .member-description:after { content: ""; clear: both; display: table; } .team-member .more-link-arrow:hover { color:#073B87; } .team-member.light .more-link-arrow:hover{ color:#fff; } /*-----------------------------------------------------------------------------------*/ /* 39. Accordion shortcode /*-----------------------------------------------------------------------------------*/ .vc_tta-accordion .vc_tta-panel-title { margin:0; } .vc_tta-accordion.vc_tta-controls-align-right .vc_tta-panel-title { text-align:right; } .vc_tta-accordion.vc_tta-controls-align-right span.vc_tta-title-text{ margin-right:30px; } .vc_tta-accordion.vc_tta-controls-align-right span.vc_tta-title-text:after { top:20px; } .vc_tta-accordion.vc_tta-controls-align-center .vc_tta-panel-title { text-align:center; } /*-----------------------------------------------------------------------------------*/ /* 39. Accordion shortcode /*-----------------------------------------------------------------------------------*/ .vc_tta-accordion .vc_tta-panel-title { margin:0; } .vc_tta-accordion .vc_tta-panel-title>a { display: block; text-decoration: none; outline: none; padding: 30px 15px 10px 0 !important; } .vc_tta-accordion .vc_tta-panel-heading, .wpb-js-composer .vc_tta.vc_general.vc_tta-accordion .vc_tta-panel-heading{ border: 0px solid transparent; border-bottom: 3px solid #d7d7d7; text-align: left; -moz-transition: border-bottom-color .5s ease; -o-transition: border-bottom-color .5s ease; -webkit-transition: border-bottom-color .5s ease; transition: border-bottom-color .5s ease; } .vc_tta-accordion .vc_tta-panel:hover .vc_tta-panel-heading { border-bottom-color:#073B87; } .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading { border-bottom-color: #073B87; } .vc_tta-accordion span.vc_tta-title-text:after{ content: ''; display: block; height: 0; width:0; border-bottom: 7px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #adadad; float: right; -moz-transition: border-top-color .5s ease; -o-transition: border-top-color .5s ease; -webkit-transition: border-top-color .5s ease; transition: border-top-color .3s ease; right:0; top:30px; position:relative; } .vc_tta-accordion .vc_tta-panel.vc_active span.vc_tta-title-text:after { border-top-color: transparent; } .vc_tta-accordion span.vc_tta-title-text { color: #adadad; font-weight: 500; font-size: 16px; line-height: 18px; -moz-transition: color ease .4s; -o-transition: color ease .4s; -webkit-transition: color ease .4s; transition: color ease .4s; padding:0 5px; } .vc_tta-accordion .vc_tta-panel:hover span.vc_tta-title-text, .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-icon , .vc_tta-accordion .vc_tta-panel.vc_active span.vc_tta-title-text { color:#073B87; } .vc_tta-icon { color: #888; font-size:16px; } .vc_tta-accordion .vc_tta-panel .vc_tta-icon, .wpb-js-composer .vc_tta-accordion .vc_tta-panel .vc_tta-icon { -moz-transition: color 400ms ease; -o-transition: color 400ms ease; -webkit-transition: color 400ms ease; transition: color 400ms ease; color: #adadad; font-size: 17px !important; line-height: 13px; left: 0; margin-left: 0; } .vc_tta-accordion .vc_tta-panel .vc_tta-panel-body { opacity: 0; -moz-transition: opacity 400ms ease-in-out; -o-transition: opacity 400ms ease-in-out; -webkit-transition: opacity 400ms ease-in-out; transition: opacity .2s ease; } .vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-body { opacity: 1; } /*-----------------------------------------------------------------------------------*/ /* 40. Tabs shorcode /*-----------------------------------------------------------------------------------*/ .vc_tta.vc_general .vc_tta-tab>a:focus, .vc_tta.vc_general .vc_tta-tab>a:hover { outline: 0; text-decoration: none; } .wpb-js-composer .vc_tta.vc_general .vc_tta-title-text:not(:empty){ margin-left:0 !important; } .wpb-js-composer .vc_tta.vc_general .vc_tta-icon{ line-height:inherit !important; } .vc_tta-shape-top .vc_tta-icon , .wpb-js-composer .vc_tta-shape-top .vc_tta-icon{ font-size:20px; position:relative; display:block !important; text-align:center; transform: translate3d(0,-5px,0); transition:transform 0.2s cubic-bezier(0.4, 0, 1, 1),color 0.2s ease; } .vc_tta-shape-right .vc_tta-icon, .wpb-js-composer .vc_tta-shape-right .vc_tta-icon { position:relative; float:right; font-size:16px; transform: translate3d(0,10px,0); transition:color ease 0.2s; } .vc_tta-shape-top .vc_tta-tab.vc_active .vc_tta-icon{ transform: translate3d(0,0,0) !important; transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1),color 0.2s ease; } .vc_tta-shape-top.vc_tta-tabs-position-top.vc_tta-style-dark ul.vc_tta-tabs-list{ border-bottom:none !important; } .vc_tta-tabs ul.vc_tta-tabs-list li, .wpb-js-composer .vc_tta-tabs ul.vc_tta-tabs-list li{ margin:auto 15px; } .vc_tta-tabs.vc_tta-shape-top ul.vc_tta-tabs-list li, .wpb-js-composer .vc_tta-tabs.vc_tta-shape-top ul.vc_tta-tabs-list li{ margin:5px 15px; } .vc_tta.vc_tta-tabs .vc_tta-panel-heading { display: none; } .vc_tta-panel-body .container, .vc_tta-panel-body .portfolio_wrap { width: 100% !important; margin-left:0 !important; } .vc_tta-tabs.vc_tta.vc_general .vc_tta-panel .vc_tta-panel-body { padding:0; box-sizing:border-box; border: 0; } .vc_tta-tabs.vc_tta-style-light .vc_tta-title-text { color:#e4e4e4; } .vc_tta-tabs.vc_tta-style-light .vc_tta-tab:hover a span, .vc_tta-tabs.vc_tta-style-light .vc_tta-tab:hover .vc_tta-icon { color: #fff; } .vc_tta-tabs-position-top.vc_tta-style-light li.vc_tta-tab:hover{ border-bottom-color: #FFF; } .vc_tta-tabs-position-bottom.vc_tta-style-light li.vc_tta-tab:hover{ border-top-color:#FFF; } .vc_tta-tabs-align-left .vc_tta-title-text { text-align: left; } .vc_tta-tabs-align-right .vc_tta-title-text { text-align: right; } .vc_tta-tabs-align-center .vc_tta-title-text { text-align: center; } .vc_tta.vc_general .vc_tta-panel-body { padding:0; border: 0; } .vc_tta-tab a span { font-family: Poppins, sans-serif; display: inline-block; line-height: 22px; background-color: transparent; padding: 9px 10px; font-size: 14px; font-weight: 500; color: #888; text-transform: uppercase; -webkit-transition: color .5s ease; -moz-transition: color .5s ease; -o-transition: color .5s ease; transition: color .5s ease; } .vc_tta-tab:hover a span, .vc_tta-tab:hover .vc_tta-icon { color: #3b3b3b; } .vc_tta-tab.vc_active a span { color: #073B87; border: 0px!important; border-bottom: 3px solid; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .vc_general:not(.vc_tta-tabs-position-top) .vc_tta-tab.vc_active a span { border-top: 0px !important; border-right: 0px !important; border-left: 0px !important; } .vc_tta-tabs-position-top.vc_tta-style-dark ul.vc_tta-tabs-list { border-bottom: 1px solid rgba(210,210,210,0.5) !important; } .vc_tta-tabs-position-top.vc_tta-style-light ul.vc_tta-tabs-list { border-bottom: 1px solid rgba(233,233,233,0.5) !important; } .vc_tta-tabs-position-bottom ul.vc_tta-tabs-list { border-top: 1px solid #E0E0E0; } .vc_tta-shape-top.vc_tta-tabs-position-bottom ul.vc_tta-tabs-list { border-top: none; } .vc_tta-controls-align-left .vc_tta-tabs-list { text-align: left; } .vc_tta-controls-align-center .vc_tta-tabs-list { text-align: center; } .vc_tta-controls-align-right .vc_tta-tabs-list { text-align: right; } .vc_tta-tabs-position-left li.vc_tta-tab, .vc_tta-tabs-position-right li.vc_tta-tab, .vc_tta-tabs-position-top li.vc_tta-tab { border-bottom: 3px solid; border-bottom-color: transparent; display: inline-block; -webkit-transition: border-bottom-color .3s ease; -moz-transition: border-bottom-color .3s ease; -o-transition: border-bottom-color .3s ease; transition: border-bottom-color .3s ease; } .vc_tta-shape-top.vc_tta-tabs-position-left li.vc_tta-tab, .vc_tta-shape-top.vc_tta-tabs-position-right li.vc_tta-tab, .vc_tta-shape-top.vc_tta-tabs-position-top li.vc_tta-tab { border-bottom: none; } .vc_tta-tabs-position-right li.vc_tta-tab:hover, .vc_tta-tabs-position-top li.vc_tta-tab:hover, .vc_tta-tabs-position-left li.vc_tta-tab:hover{ border-bottom-color: #3b3b3b; -webkit-transition: border-bottom-color .5s ease; -moz-transition: border-bottom-color .5s ease; -o-transition: border-bottom-color .5s ease; transition: border-bottom-color .5s ease; } .vc_tta-tabs-position-left li.vc_tta-tab.vc_active, .vc_tta-tabs-position-right li.vc_tta-tab.vc_active, .vc_tta-tabs-position-top li.vc_tta-tab.vc_active { border-bottom-color: #073B87; -webkit-transition: border-bottom-color .5s ease; -moz-transition: border-bottom-color .5s ease; -o-transition: border-bottom-color .5s ease; transition: border-bottom-color .5s ease; } .vc_tta-tabs-position-bottom li.vc_tta-tab { border-top: 3px solid; border-top-color: transparent; display: inline-block; -webkit-transition: border-bottom-color .3s ease; -moz-transition: border-bottom-color .3s ease; -o-transition: border-bottom-color .3s ease; transition: border-bottom-color .3s ease; } .vc_tta-shape-top.vc_tta-tabs-position-bottom li.vc_tta-tab { border-top: none; } .vc_tta-tabs-position-bottom li.vc_tta-tab:hover, .vc_tta-tabs-position-bottom li.vc_tta-tab.vc_active { border-top-color: #073B87; -webkit-transition: border-top-color .5s ease; -moz-transition: border-top-color .5s ease; -o-transition: border-top-color .5s ease; transition: border-top-color .5s ease; } .vc_tta.vc_general .vc_tta-tab>a { padding:0px !important; } .vc_tta.vc_general .vc_tta-tab.vc_active > a, .vc_tta.vc_general .vc_tta-tab > a { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .vc_tta-tabs-position-top .vc_tta-panel.vc_active , .vc_tta-tabs-position-bottom .vc_tta-panel.vc_active { opacity: 1; } .vc_tta.vc_general.vc_tta-tabs .vc_tta-panel.show { display: block; } .vc_tta.vc_general.vc_tta-tabs .vc_tta-panel { display: none; opacity: 0; -webkit-transition: opacity .3s ease-in-out 0s; -moz-transition: opacity .3s ease-in-out 0s; -o-transition: opacity .3s ease-in-out 0s; transition: opacity .3s ease-in-out 0s; } .vc_tta.vc_general.vc_tta-tabs .vc_tta-panel.vc_active { opacity: 1; } .vc_tta.vc_general.vc_tta-tabs .vc_tta-panel .vc_tta-panel-body { opacity:1 !important; } /*Tour*/ .vc_tta-tabs { overflow: hidden; } .vc_tta-container .vc_tta-panels { min-height:auto !important; } .vc_tta-tabs-position-left .vc_tta-tabs-container, .vc_tta-tabs-position-right .vc_tta-tabs-container { width:calc(30% - 60px); float:left; margin:0 30px; } .vc_tta-tabs-position-right .vc_tta-tabs-container { float: right; } .vc_tta-tabs-position-left .vc_tta-panels-container, .vc_tta-tabs-position-right .vc_tta-panels-container { width:70%; float: right } .vc_tta-tabs-position-right .vc_tta-panels-container { float: left; } .vc_tta-tabs .vc_tta-panels-container .vc_tta-panels{ height:auto !important; min-height:40px !important; } /* .vc_tta-tabs-position-left .vc_tta-title-text, .vc_tta-tabs-position-right .vc_tta-title-text { padding: 25px 0px 10px !important; display: block; } */ .vc_tta-tabs-position-left li.vc_tta-tab, .vc_tta-tabs-position-right li.vc_tta-tab { border-bottom: 2px solid; border-bottom-color: #e0e0e0; display: block; -webkit-transition: border-bottom-color .3s ease; -moz-transition: border-bottom-color .3s ease; -o-transition: border-bottom-color .3s ease; transition: border-bottom-color .3s ease; } .vc_tta-panel .portfolioSection .portfolio_wrap { opacity:0; -webkit-transition: opacity 2s ease-out 1s; -moz-transition: opacity 2s ease-out 1s; -o-transition: opacity 2s ease-out 1s; transition: opacity 2s ease-out 1s; } .vc_tta-panel.vc_active .portfolioSection .portfolio_wrap { opacity:1; } /*-----------------------------------------------------------------------------------*/ /* 41. Toggle shorcode /*-----------------------------------------------------------------------------------*/ .wpb_toggle, #content .wpb_toggle { background: none !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .wpb_toggle:before, #content h4.wpb_toggle:before { content: ""; position: absolute; width: 12px; height: 2px; background-color: #262626; top: 20px; left: 20px; } .wpb_toggle:after, #content h4.wpb_toggle:after { content: ""; position: absolute; width: 12px; height: 2px; background-color: #262626; top: 20px; left: 20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -moz-transition: transform .15s cubic-bezier(0.86, 0, 0.07, 1); -o-transition: transform .15s cubic-bezier(0.86, 0, 0.07, 1); -webkit-transition: transform .15s cubic-bezier(0.86, 0, 0.07, 1); transition: transform .15s cubic-bezier(0.86, 0, 0.07, 1); } .wpb_toggle.wpb_toggle_title_active:after, #content h4.wpb_toggle.wpb_toggle_title_active:after { background-color:#073B87; } .wpb_toggle_title_active:after, #content h4.wpb_toggle_title_active:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .wpb_toggle { position:relative; background-image:none !important; border:2px solid #eee; margin:0; padding-left:0 !important; margin-bottom:5px; font-family: Poppins,sans-serif; font-size: 32px; font-weight: 300; line-height: 1.25em; display: block; } .wpb_toggle .border-bottom { padding:0; cursor:pointer; } .wpb_toggle_content { margin:0 !important; padding:16px 26px !important; font-weight:400; } .wpb_toggle .icon.icon-plus { display:none; } .wpb_toggle .icon.icon-minus { display: none } .wpb_toggle .title { padding-left: 55px; font-size: 14px; color: #000; font-weight:600; -moz-transition: color ease 300ms; -o-transition: color ease 300ms; -webkit-transition: color ease 300ms; transition: color ease 300ms; } .wpb_toggle.wpb_toggle_title_active .title { color:#073B87; } /*-----------------------------------------------------------------------------------*/ /* 42. Counter box /*-----------------------------------------------------------------------------------*/ .counterBox { text-align:center; } .counterBox .counterBoxNumber { font-size:60px; font-family: Poppins, sans-serif; font-weight:500; line-height: 78px; color:#404040; display: block; margin-bottom: 1px; } .counterBoxDetails { font-family: Poppins, sans-serif; font-size:18px; color:#404040; padding:0 10px; display: inline-block; line-height: 17px; font-weight:500; margin:0; } .counterBoxDetails2 { opacity:.7; font-family: lato, sans-serif; font-size: 14px; line-height: 19px; font-weight:400; } /*-----------------------------------------------------------------------------------*/ /* 43. Piechart /*-----------------------------------------------------------------------------------*/ .easyPieChart { position: relative; text-align: center; height:145px; width:145px; line-height:145px; display:block; margin:0 auto; } .easyPieChart canvas { position: absolute; top: 0; left: 0; } .pieChart span { color:#101010; } .pieChart span.piechart_percent { font-size: 20px; color: inherit; top:3px; } .pieChart .perecent { font-family: Poppins, sans-serif; font-weight:700; font-size:32px; color: #073B87; } .pieChartBox { margin:5px 25px 25px 25px; display:block; } .pieChartBox p { margin:0; font-weight:700; text-align:center; } .pieChartBox .title { font-family: Poppins, sans-serif; margin-top: 25px; font-size: 16px; color: #252525; font-weight: 700; } .pieChartBox .subtitle { font-family: Lato, sans-serif; margin-top:7px; font-size:13px; color:#787878; font-weight:400; } .iconPchart span{ display:block; position:absolute; } .iconPchart .icon { font-size:22px; top: 43px; left: 0; color: #073B87; width:100%; text-align: center; } .disablepercent .iconPchart .icon { font-size: 41px; top: 55px; } .iconPchart .perecent { line-height: 0; top: 95px; left: 0px; font-size:32px; width: 100%; text-align: center; } .iconPchart span.piechart_percent { display:inline-block; } .pieChart .dot-container { width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; top: 0; left: 0; -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } .pieChart .dot-container .dot { width: 6px; height: 6px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #073B87; position: absolute; top: 0; left: 50%; margin-left: -2px; margin-top: -1px; } /*-----------------------------------------------------------------------------------*/ /* 44. Image carousel */ /*-----------------------------------------------------------------------------------*/ .carousel { position:relative; } .fullWidth .carousel { width:100%; } .vertical_menu_enabled .fullWidth .carousel { width:90%; margin:0 5%; } .carousel .swiper-slide { margin-bottom:-5px; -webkit-transform-style: unset; transform-style: unset; cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; height:auto; } .carousel .swiper-slide .image-container { position: relative; } .carousel .swiper-slide img { width: 100%; vertical-align: bottom; position: absolute; top:0; left:0; height: 100%; } .carousel.zoom-hover .swiper-slide .image-container { overflow: hidden; } .carousel.zoom-hover .swiper-slide img { -webkit-transform: scaleX(1) scaleY(1) translateZ(0); -moz-transform: scaleX(1) scaleY(1) translateZ(0); -ms-transform: scaleX(1) scaleY(1) translateZ(0); -o-transform: scaleX(1) scaleY(1) translateZ(0); transform: scaleX(1) scaleY(1) translateZ(0); -webkit-transition: transform .6s ease,opacity .4s cubic-bezier(.445,.050,.55,.95); -moz-transition: transform .6s ease,opacity .4s cubic-bezier(.445,.050,.55,.95); -o-transition: transform .6s ease,opacity .4s cubic-bezier(.445,.050,.55,.95); transition: transform .6s ease,opacity .4s cubic-bezier(.445,.050,.55,.95); } .carousel.zoom-hover .swiper-slide:hover img { -webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -moz-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -ms-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -o-transform: scaleX(1.05) scaleY(1.05) translateZ(0); transform: scaleX(1.05) scaleY(1.05) translateZ(0); } .carousel .swiper-slide .image-container:before { opacity: 0; content: ""; position: absolute; width: 100%; height: 100%; top:0; left: 0; z-index:1; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; background: #c0392b; } .carousel .swiper-slide .image-container:hover:before { opacity: 0.35; } .carousel .arrows-button-prev, .carousel .arrows-button-next { border: 0 !important; width: 45px; height: 45px; display: block; position: absolute; z-index: 4; cursor: pointer; top: calc(50% - 25px); border: 1px solid #e3e3e3; color: #333; font-size: 16px!important; background: rgba(255,255,255,.5); font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; overflow: hidden; opacity: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: background .3s ease, opacity .3s ease; -moz-transition: background .3s ease, opacity .3s ease; -o-transition: background .3s ease, opacity .3s ease; transition: background .3s ease, opacity .3s ease; } .carousel .arrows-button-prev:hover, .carousel .arrows-button-next:hover { background: rgba(255,255,255,1); } .carousel .arrows-button-next { right:0; } .carousel .arrows-button-prev { left:0; } .carousel .arrows-button-prev:before, .carousel .arrows-button-prev:after { content: "\f177"; } .carousel .arrows-button-next:after, .carousel .arrows-button-next:before { content: "\f178"; } .carousel .arrows-button-prev:before, .carousel .arrows-button-prev:after, .carousel .arrows-button-next:after, .carousel .arrows-button-next:before { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 45px; left: 0; -webkit-transition: left 0.3s ease,opacity .2s ease-in-out; -moz-transition: left 0.3s ease,opacity .2s ease-in-out; -o-transition: left 0.3s ease,opacity .2s ease-in-out; transition: left 0.3s ease,opacity .2s ease-in-out; } .carousel .arrows-button-prev:after { left:35px; opacity: 0; } .carousel .arrows-button-next:after { left:-35px; opacity: 0; } .carousel .arrows-button-prev:hover:after { left:0; opacity: 1; } .carousel .arrows-button-next:hover:after { left:0; opacity: 1; } .carousel .arrows-button-prev:hover:before { left:-45px; opacity: 0; } .carousel .arrows-button-next:hover:before { left:45px; opacity: 0; } /* Dark style */ .carousel.dark .arrows-button-prev, .carousel.dark .arrows-button-next { background: rgba(0,0,0,.5); color : #fff; border:1px solid #7D7D7D; } .carousel.dark .arrows-button-prev:hover, .carousel.dark .arrows-button-next:hover { background: rgba(0,0,0,1); } /*-----------------------------------------------------------------------------------*/ /* 45. Parallax And Video section / texture hover /*-----------------------------------------------------------------------------------*/ .parallax, .interactive-background { position: relative; width: 100%; max-height:1100px; overflow:hidden; min-height:300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .parallax .parallax-img { width: 100%; height: 170%; max-height: 1600px; position: absolute; top: -50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; background-repeat: no-repeat !important; -webkit-perspective: 1000; } .interactive-background-image:after ,.parallax:after , .videoHome.sectionOverlay:after { opacity:.9; background-color:inherit; } /* Parallax Content */ .parallax .container, .interactive-background .container { position:relative !important; z-index:1; } /* parallax texture */ .sectionOverlay { position:relative; } /* Interactive background */ .interactive-background { overflow: hidden; } .interactive-background-image img { width:100%; position: absolute; -webkit-transition: -webkit-transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(.445,.050,.55,.95); -moz-transition: -moz-transforms 1.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(.445,.050,.55,.95); -o-transition: -o-transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(.445,.050,.55,.95); transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity .4s cubic-bezier(.445,.050,.55,.95); } body.snap-to-scroll .interactive-background-image img { transform: matrix(1, 0, 0, 1, 40, 0) scale(1, 1) } .interactive-background-image { display: block; height: 100%; width: 100%; left:0; top:0; position: absolute; } .videoHome.sectionOverlay { position:absolute; } .sectionOverlay:after { position:absolute; top:0; left:0; opacity:0.9; content:''; height:100%; width:100%; z-index:0 !important; pointer-events:none; /*pass events to underneath layers*/ } #home .sectionOverlay:after { z-index:2!important; } .texture2:after, body.snap-to-scroll .texture2 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture2.png); } .texture3:after, body.snap-to-scroll .texture3 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture3.png); } .texture4:after, body.snap-to-scroll .texture4 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture4.png); } .texture5:after, body.snap-to-scroll .texture5 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture5.png); } .texture6:after, body.snap-to-scroll .texture6 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture6.png); } .texture7:after, body.snap-to-scroll .texture7 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture7.png); } .texture8:after, body.snap-to-scroll .texture8 .section-container:after { background-repeat: repeat; background-image:url(../img/texture/texture8.png); } .videoSection .videoContent { overflow:hidden; z-index:1; position:relative; } .videoSection .videoContent > .page { min-height:500px; } .videoMask.texture2 { background-repeat: repeat; background-image:url(../img/texture/texture2.png); } .videoMask.texture3 { background-repeat: repeat; background-image:url(../img/texture/texture3.png); } .videoMask.texture4 { background-repeat: repeat; background-image:url(../img/texture/texture4.png); } .videoMask.texture5 { background-repeat: repeat; background-image:url(../img/texture/texture5.png); } .videoMask.texture6 { background-repeat: repeat; background-image:url(../img/texture/texture6.png); } .videoMask.texture7 { background-repeat: repeat; background-image:url(../img/texture/texture7.png); } .videoMask.texture8 { background-repeat: repeat; background-image:url(../img/texture/texture8.png); } .videoSection .videoHomePreload { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; height: 100%; top: 0; right: 0; bottom: 0; left: 0; position: absolute; background-position: center; } .videoWrap { top: 0px; left: 0px; overflow: hidden; position: absolute; width: 100% !important; min-height:100%; } .inline_video .mejs-poster, .videoWrap .mejs-container.mejs-video { width:100% !important; height:100% !important; } .mejs-poster { opacity: 0; top: -3px !important; -moz-background-size: cover !important; -o-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; -moz-transition: opacity ease 1500ms; -o-transition: opacity ease 1500ms; -webkit-transition: opacity ease 1500ms; transition: opacity ease 1500ms; } .mejs-poster.fadeIn { opacity:1; } .inline_video video { width: 100% !important; height: 100% !important; } .inline_video .mejs-mediaelement { position:relative; } .inline_video .mejs-container { outline:none; width: 100% !important; height: 100% !important; background-color:transparent !important; } .inline_video .mejs-container .mejs-controls { bottom:6px; } .inline_video .mejs-overlay { height:100% !important; z-index:2; } .inline_video .play-button , .inline_video .mejs-poster { z-index:1; } .inline_video .play-button { opacity:0; } .inline_video .mejs-poster .play-button { opacity: 1; } .lg-outer .lg-video-object { background-color:#000; } /*-----------------------------------------------------------------------------------*/ /* 46. Respond form /*-----------------------------------------------------------------------------------*/ .comments-list #respond { margin: 0px 30px 30px 100px; padding:0; } #respond #reply-title { padding:0; } .comments-list .comment-reply-link { background-image: none !important; } #commentform .input-text { float:left; width:31.7%; margin-left: 2%; height:41px; } #commentform .input-text:first-child{ margin-left: 0; } .comments-list .children #commentform .input-text:first-child { margin-left:0%; } .comments-list .children #commentform .input-text { margin-left:1.95%; } #commentform p:first-child { font-size: 13px; font-weight: 400; font-family: Lato, serif; color: #6a6a6a; padding-top: 0px; margin-top: 0px; } #commentform .input-textarea, #commentform p:first-child, #commentform .form-fields { margin-bottom:18px; } .form-fields.clearfix { height: 100px; } #commentform .input-textarea { width:100%; height:170px; margin-bottom:40px; } #commentform .input-textarea textarea { height:90px; margin-top:10px; color: #111; line-height: 20px; font-size: 14px; font-weight:600; } #commentform .input-text input[type="text"]{ padding:0; width:100%; } form#commentform .ep_button { border-radius: 20px; border: 2px solid #252525; margin-top: 60px; } .comment-respond .form-submit .submit { display:none; } .comment-respond{ padding: 0 0 90px 0; } /* sumbit and reply styles when user is logged in*/ .comments-list p.logged-in-as ~ div.button { bottom: 0px!important; } p.logged-in-as ~ div.button { bottom: 0px!important; } .page-template-main-page-php .layout { margin-top:0px; } .commentWrap .nocomments { background-color: #fbfbfb; padding: 10px; font-weight: 600; width: auto; margin: 0 0 75px; } /*-----------------------------------------------------------------------------------*/ /* 47. WP Classes /*-----------------------------------------------------------------------------------*/ .alignleft { float: left; margin-right: 10px; } .alignright { float: right; margin-left: 10px; } .aligncenter { margin-left: auto; margin-right: auto; display: table; clear: both; } .wp-caption { max-width:100%; } .wp-caption-text { background: #fff; border: 1px solid #f0f0f0; padding: 5px 3px 10px; text-align: center; } .comments-list .comment.bypostauthor { background-color: #fcfcfc; padding-right: 10px; } .gallery-caption { margin-left: 0; } .sticky .accordion_box10 .blogTitle , .sticky .accordion_box2 .accordion_title { color:#073B87 !important; } .sticky .blogAccordion .rightBorder { border-right: 2px solid #073B87 !important; } #epHeader.type1 #headerSecondState, #epHeader.type9 #headerSecondState , #epHeader.type4_5_6 #headerSecondState , #epHeader.type2_3 #headerSecondState { top:0px; } #epHeader.menuSpaceWp.type1 #headerFirstState , #epHeader.menuSpaceWp.type9 #headerFirstState , #epHeader.menuSpaceWp.type4_5_6 #headerFirstState , #epHeader.menuSpaceWp.type2_3 #headerFirstState, #epHeader.menuSpaceWp.type1 #headerSecondState , #epHeader.menuSpaceWp.type9 #headerSecondState , #epHeader.menuSpaceWp.type4_5_6 #headerSecondState , #epHeader.menuSpaceWp.type2_3 #headerSecondState { top:32px; } #epHeader.menuSpaceNoti.type1 #headerFirstState , #epHeader.menuSpaceNoti.type9 #headerFirstState , #epHeader.menuSpaceNoti.type4_5_6 #headerFirstState , #epHeader.menuSpaceNoti.type2_3 #headerFirstState, #epHeader.menuSpaceNoti.type1 #headerSecondState , #epHeader.menuSpaceNoti.type9 #headerSecondState , #epHeader.menuSpaceNoti.type4_5_6 #headerSecondState , #epHeader.menuSpaceNoti.type2_3 #headerSecondState { top:32px; } #epHeader.menuSpaceWpNoti.type1 #headerFirstState, #epHeader.menuSpaceWpNoti.type9 #headerFirstState, #epHeader.menuSpaceWpNoti.type4_5_6 #headerFirstState, #epHeader.menuSpaceWpNoti.type2_3 #headerFirstState, #epHeader.menuSpaceWpNoti.type1 #headerSecondState, #epHeader.menuSpaceWpNoti.type9 #headerSecondState, #epHeader.menuSpaceWpNoti.type4_5_6 #headerSecondState, #epHeader.menuSpaceWpNoti.type2_3 #headerSecondState { top:64px; } #epHeader.menuSpaceWp.type1 #headerSecondState, #epHeader.menuSpaceWp.type9 #headerSecondState, #epHeader.menuSpaceWp.type2_3 #headerSecondState, #epHeader.menuSpaceWp.type4_5_6 #headerSecondState { top:28px; } #headerFirstState .menuSpaceWpNoti { top:62px !important; position:relative; } /* menu Space - width wp bar */ #headerFirstState .menuSpaceNoti { top:30px !important; position:relative; } .topbarSpaceWp { top:32px !important; position:relative; } /*-----------------------------------------------------------------------------------*/ /* 48. Blog accordion /*-----------------------------------------------------------------------------------*/ .togglePost { margin-bottom:5px; } .togglePost .container { overflow:hidden; } .blogAccordion { position: relative; height: 160px; margin-right: 0; margin-left: 0; background-position: center; background-repeat: no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; -moz-transition:all 350ms ease-in-out; -o-transition:all 350ms ease-in-out; -webkit-transition:height 350ms ease-in-out; transition:all 350ms ease-in-out; } .blogAccordion:not(.accordionClosed) { height: 520px; } .blogAccordion.quoteItem { overflow: hidden; } .blogAccordion.quoteItem .leftBorder { margin: 50px 0 30px; } .blogAccordion.quoteItem .quote_content { font-size: 23px; font-family: Lato, serif; color: #fff; font-weight: 500; line-height: 35px; padding: 10px 40px 10px 20px; position: relative; } .blogAccordion.quoteItem .quote_content , .blogAccordion.accordionClosed p { opacity:1; -moz-transition: opacity 300ms ease; -o-transition: opacity 300ms ease; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease; } .blogAccordion.accordionClosed p, .blogAccordion.quoteItem.accordionClosed .quote_content { opacity:0; } .blogAccordion.quoteItem .quote_content .icon-quotes-left { position: absolute; top: -30px; left: 20px; font-size: 30px; } .tabletBlog .moretag, .desktopBlog .moretag { display: inline-block; opacity: 1; color: #fff; text-decoration: none; font-size: 13px; font-family: Lato, serif; line-height: 17px; z-index: 5; padding:1px 10px 1px; font-weight: 400; position: relative; border:solid 1px #fff; border-radius: 20px; margin: 0 5px; -moz-transition: background-color 350ms ease-in-out, border-color 200ms ease-in-out; -o-transition: background-color 350ms ease-in-out, border-color 200ms ease-in-out; -webkit-transition: background-color 350ms ease-in-out, border-color 200ms ease-in-out; transition: background-color 350ms ease-in-out, border-color 200ms ease-in-out; } .desktopBlog .quoteItem .moretag { position: absolute; display: block; right: 0; bottom: 0; } .tabletBlog .moretag:hover, .desktopBlog .moretag:hover { background-color: #073B87; border: solid 1px #073b87; } .blogAccordion .leftBorder { margin:40px 0; padding-top:8px; position:relative; left:0px; -moz-transition:border-left-color 200ms linear, left 200ms ease-in-out; -o-transition:border-left-color 200ms linear, left 200ms ease-in-out; -webkit-transition:border-left-color 200ms linear, left 200ms ease-in-out; transition:border-left-color 200ms linear, left 200ms ease-in-out; } .blogAccordion.accordionClosed:hover .leftBorder { opacity:1; -moz-transition:opacity 700ms , left 300ms linear; -o-transition:opacity 700ms , left 300ms linear; -webkit-transition:opacity 700ms , left 300ms linear; transition:opacity 700ms , left 300ms linear; } .blogAccordion .leftBorder .monthYear { font-weight: 500; color: #fff; text-transform: uppercase; font-size: 15px; position: relative; left: 0; font-family:Lato,sans-serif; line-height: 27px; -moz-transition: left 300ms ease .1s, opacity 300ms ease; -o-transition: left 300ms ease .1s, opacity 300ms ease; -webkit-transition: left 300ms ease .1s, opacity 300ms ease; transition: left 300ms ease .1s, opacity 300ms ease; } .blogAccordion.accordionClosed .leftBorder .monthYear { -moz-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; -webkit-transition:opacity 200ms ease; transition:opacity 200ms ease; opacity:1; } .blogAccordion.accordionClosed .leftBorder .monthYear , .blogAccordion.accordionClosed .accordion_box10 .blogTitle{ left:0 !important; } .blogAccordion .grayOverlay { height:100%; width:100%; min-height:140px; background-color:rgba(0,0,0,.5); z-index:1; } .blogAccordion.accordionClosed .grayOverlay { background-color:rgba(0,0,0,.15); -moz-transition:background-color 300ms ease; -o-transition:background-color 300ms ease; -webkit-transition:background-color 300ms ease; transition:background-color 300ms ease; } .blogAccordion.accordionClosed:hover .grayOverlay{ background-color:rgba(0,0,0,.4); -moz-transition:background-color 400ms ease; -o-transition:background-color 400ms ease; -webkit-transition:background-color 400ms ease; transition:background-color 400ms ease; } .blogAccordion .accordion_title { color: #101010; font-size: 50px; height: 135px; padding: 25px 0 0; display: block; text-decoration: none; font-family: Lato,sans-serif; font-weight: 400; opacity: 0; overflow: hidden; width: 0; -moz-transition: opacity 200ms linear, width 200ms linear; -o-transition: opacity 200ms linear, width 200ms linear; -webkit-transition: opacity 200ms linear, width 200ms linear; transition: opacity 200ms linear, width 200ms linear; } .blogAccordion.accordionClosed .accordion_title { opacity: 1; width: 130px; -moz-transition: opacity 200ms ease 100ms, width 500ms ease; -o-transition: opacity 200ms ease 100ms, width 500ms ease; -webkit-transition: opacity 200ms ease 100ms, width 500ms ease; transition: opacity 200ms ease 100ms, width 500ms ease; } .blogAccordion .accordion_title .day { display: block; line-height: 50px; width: 50px; border-radius: 50px; position: relative; left: 60px; top: 24px; font-size: 25px; font-family: Poppins, sans-serif; font-weight: 600; text-align: center; background-color: #fff; color:#222222; } .blogAccordion .accordion_title .month { text-transform:capitalize; } .blogAccordion .accordion_title .month, .blogAccordion .accordion_title .year { font-size:12px; display:block; } .blogAccordion .accordion_title .year { line-height:10px; } .blogAccordion .accordion_title .monthYear { float:left; padding:11px 0 0 12px; } .accordion_box10 .image { width:76%; float:right; } .desktopBlog .blogAccordion .accordion_box10 .blogTitle { color: #fff; font-size: 32px; line-height: 35px; position: relative; left: 0; z-index: 1; font-family: Poppins,sans-serif; font-weight: 600; -moz-transition: left 500ms ease-in-out; -o-transition: left 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out; transition: left 500ms ease-in-out; } .desktopBlog .blogAccordion.accordionClosed .accordion_box10 .leftBorder .blogTitle { left:0; -moz-transition:left 500ms ease-in-out; -o-transition:left 500ms ease-in-out; -webkit-transition:left 500ms ease-in-out; transition:left 500ms ease-in-out; } .tabletBlog .blogAccordion { overflow:hidden; } .tabletBlog .container { padding-left:0; padding-right:0; width:auto; } .tabletBlog .blogAccordion .accordionBox { min-height:85px; } .tabletBlog .blogAccordion .accordion_title { float:left; width:115px; } .tabletBlog .image { position:absolute; width:100%; top:0; left:0; } .tabletBlog .blogAccordion .blogTitle { color:#101010; Font-size:31px; line-height:43px; padding:21px 0 21px 15px; z-index:2; float:left; -moz-transition:color 300ms ease 0s; -o-transition:color 300ms ease 0s; -webkit-transition:color 300ms ease 0s; transition:color 300ms ease 0s; } .tabletBlog .frameOverlayTablet{ position:absolute; width:100%; height:100%; background-color:#f0f0f0; top:0; left:0; z-index:1; opacity:0.4; } .frameTitle { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; } .tabletBlog .centerTitle { display:table; margin-left:20px; z-index:1; height:85px; } .tabletBlog .blogAccordion.accordionClosed .accordion_title ,.tabletBlog .blogAccordion.accordionClosed .blogTitle { color:#101010; } .tabletBlog .blogAccordion .rightBorder { border-right: 2px solid #101010; } .blogAccordion.accordionClosed .blogTitle { color:#b1b5b7; } .blogAccordion .image img { width:100%; } .blogAccordion:hover .minus { height:520px; width:100%; position:absolute; right:0; top: 0px; z-index:4; } .blogAccordion .minus { cursor: url(../img/cursor/blog_minus.png) 32 32, url(../img/cursor/blog_minus.cur), pointer; min-height: 0px; position: absolute; height: 100%; width: 100%; top:0; } .blogAccordion.accordionClosed .minus{ display:none; } .blogAccordion.accordionClosed:hover .plus { height:140px; width:100%; position:absolute; right:0; top: 0px; z-index:4; } .blogAccordion.accordionClosed .plus { cursor: url(../img/cursor/blog_plus.png) 32 32, url(../img/cursor/blog_plus.cur), pointer; min-height: 0px; display:block; position: absolute; height: 100%; width: 100%; top:0; } .blogAccordion.accordionClosed .accordion_content { opacity:0; -moz-transition:opacity 500ms ease .2s; -o-transition:opacity 500ms ease .2s; -webkit-transition:opacity 500ms ease .2s; transition:opacity 500ms ease .2s; } .desktopBlog .accordion_content { position: absolute; bottom: 92px; left: 0; margin: 0 3%; width: 94%; opacity: 0; -moz-transition: opacity 350ms ease; -o-transition: opacity 350ms ease; -webkit-transition: opacity 350ms ease; transition: opacity 350ms ease; } .desktopBlog .accordion_content p { font-size:15px; line-height:28px; float:left; width:100%; display:block; margin-bottom:1px; font-family:Lato,sans-serif; } .tabletBlog .accordion_content { margin:0 auto; position:relative; max-width:80%; padding:25px 5px 25px 0; } .tabletBlog .accordion_content , .desktopBlog .accordion_content { opacity:1; color:#fff; } /* read more line */ .tabletBlog .accordion_content .more-link-arrowLine, .desktopBlog .accordion_content .more-link-arrowLine { height:1px; background-color:#fff; width:85%; position:absolute; left:0; bottom:-18px; } .accordion_box2 { width:140px; float:left; } .accordion_box10 { width: calc(100% - 160px); float: left; position: relative; height: 85px; left: -10px; overflow: visible !important; } .accordion_closed { overflow:hidden; } .desktopBlog .blogClose { bottom:10px; } .tabletBlog .blogClose { bottom:-28px; } .tabletBlog .blogClose , .desktopBlog .blogClose { position:absolute; height:29px; width:29px; right:10px; background-image: url("../img/blogClose.png"); z-index:1; opacity:1; cursor:pointer; -webkit-transition:opacity 3s; -moz-transition:opacity 3s; -o-transition:opacity 3s; transition:opacity 3s .5s; } .blogAccordion.accordionClosed .blogClose { opacity:0; -webkit-transition:opacity .3s; -moz-transition:opacity .3s; -o-transition:opacity .3s; transition:opacity .3s ; } .pageNavigation .more-link-arrow { font-size:16px; letter-spacing:10px; margin:0 auto; display:table; color:#000; text-transform:uppercase; font-weight:500; padding:20px 0; cursor:pointer; -moz-transition: color 300ms ease; -o-transition: color 300ms ease; -webkit-transition: color 300ms ease; transition: color 300ms ease; } .pageNavigation .more-link-arrow:hover { color:#073B87; -moz-transition: color 250ms ease; -o-transition: color 250ms ease; -webkit-transition: color 250ms ease; transition: color 250ms ease; } .tabletBlog .accordion_content .readmoreLine, .desktopBlog .accordion_content .readmoreLine { height: 2px; background-color: #fff; width: 100%; position: absolute; left: 0; bottom: -18px; opacity: .45; -moz-transition: opacity ease 150ms; -o-transition: opacity ease 150ms; -webkit-transition: opacity ease 150ms; transition: opacity ease 150ms; } .tabletBlog .accordionClosed .accordion_content .readmoreLine, .desktopBlog .accordionClosed .accordion_content .readmoreLine { opacity:0; } .blog_social_share { height: 25px; float: right; z-index: 5; position: relative; bottom:-65px; right: 0; } .blog_social_share .social_share_toggle > i:first-child { margin-top: 2px; background-color: #fff; color: #000; width: 25px; height: 25px; border-radius: 25px; text-align: center; line-height: 25px; } .blog_social_share .social_links { position: static; padding: 0; cursor: default; z-index: 5; display: inline-block; margin-top:6px; } .blog_social_share .social_links .social_links_list li { margin-right: 15px; font-size: 17px; opacity: 1; visibility: visible; -moz-transform: translateX(0px) !important; -ms-transform: translateX(0px) !important; -o-transform: translateX(0px) !important; -webkit-transform: translateX(0px) !important; transform: translateX(0px) !important; } .blog_social_share .social_share_toggle .social_links{ width:auto; } .cblog .readmore ,.page-template-default .readmore { margin:10px 0; } .readmore .loadMore { font-size: 15px; margin: 0 auto; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 80px; color: #000; text-transform: uppercase; font-weight: 500; padding: 20px 0; cursor: pointer; text-align: center; overflow-y: hidden; position: relative; -moz-transition: color 300ms ease; -o-transition: color 300ms ease; -webkit-transition: color 300ms ease; transition: color 300ms ease; font-family: Poppins,sans-serif; } div:not(.cartBlog) .readmore .loadMore { margin:20px 0 60px; } .readmore .loadMore .text:before { position: absolute; top: 75%; content: ""; width: 0px; height: 1px; border-top: 2px solid #b5b5b5; left: 0; margin-left:0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; } .readmore .loadMore:hover .text:before { width:100%; } .readmore .loadMore .load-more-text, .readmore .loadMore .loading-text, .readmore .loadMore .no-more-text { display: table; position: relative; color:#252525; width: auto; margin: 0 auto; top: 0; height: 100%; line-height: 40px; opacity: 1; -webkit-transition: transform .4s ease, opacity .4s ease; -moz-transition: transform .4s ease, opacity .4s ease; -o-transition: transform .4s ease, opacity .4s ease; transition: transform .4s ease, opacity .4s ease; } .lightStyle .portfolio_detail_boxed .pDHeader-title .title, .lightStyle .project-detail li.project .project-title, .lightStyle .pDWrap .pDNavigation .arrows-button-next, .lightStyle .pDWrap .pDNavigation .arrows-button-prev, .lightStyle .readmore .loadMore .load-more-text, .lightStyle .readmore .loadMore .loading-text, .lightStyle .readmore .loadMore .no-more-text, .lightStyle .readmore .loadMore{ color: #fff; } .lightStyle .pDWrap #PDclosePortfolio:after, .lightStyle .pDWrap #PDclosePortfolio:before, .lightStyle .readmore .loadMore .text:before{ border-color: #fff; } /*load more*/ .readmore .loadMore.loadmoreactive .load-more-text { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; } .readmore .loadMore.loadmoreactive .loading-text { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 0; } .readmore .loadMore.loadmoreactive .no-more-text { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 0; } /* loading */ .readmore .loadMore.loadingactive .loading-text { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); opacity: 1; } .readmore .loadMore.loadingactive .load-more-text { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); opacity: 0; } .readmore .loadMore.loadingactive .no-more-text { -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); opacity: 0; } /* No more active */ .readmore .loadMore.nomoreactive .no-more-text { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); opacity: 1; } .readmore .loadMore.nomoreactive .loading-text { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); opacity: 0; } .readmore .loadMore.nomoreactive .load-more-text { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); opacity: 0; } /*-----------------------------------------------------------------------------------*/ /* 49. Search Page /*-----------------------------------------------------------------------------------*/ .search-title { text-transform: uppercase; font-size: 20px; padding: 30px 0 20px 30px; font-weight:500; } .search-item{ padding:22px 22px 12px 30px; margin-bottom: 7px; color:#9c9c9c; position:relative; } .search-item .count { float:left; font-size: 25px; min-width: 25px; color: #073B87; padding: 15px 15px 0 0; } .search-item .content{ float:left; padding: 0 0 4px 15px; border-left: 1px solid #e8e8e8; } .search-item .title{ margin:0; } .search-item .title a{ font-size: 17px; color: #464646; text-decoration: none; display: block; font-weight: 400; line-height: 24px; text-transform: capitalize; } .search-item .date{ font-size: 14px; color: #666; line-height: 12px; display: block; } .search-top-line { background-color: #e6e6e6; } .archiveBlogSingle #blogLoop > h2 { margin-bottom:60px; font-size:40px; font-weight:700; } .archiveBlogSingle .span10 h2 { text-align:center; } body.search .search-form input[type="text"] { border: transparent; width: 100%; font-size: 25px; line-height: 35px; margin-bottom: 10px; } /*-----------------------------------------------------------------------------------*/ /* 50. 404 Page /*-----------------------------------------------------------------------------------*/ .not_found_page strong { font-size:50px; line-height:100px; } .not_found_page p { font-family: Lato,sans-serif; font-size:15px; } .not_found_page .search-form form { border: 1px solid #929292; padding: 10px 5px 10px 10px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; min-width:470px; width:40%; } .not_found_page .search-form form input { border:none; } .not_found_page .search-form form input[type="text"] { min-width: 430px; } /*-----------------------------------------------------------------------------------*/ /* 51. Pagination /*-----------------------------------------------------------------------------------*/ .post-pagination{ margin:22px 0; } .post-pagination span, .post-pagination a{ color: #000 !important; font-size: 17px !important; font-family: Poppins, sans-serif; -moz-transition: color ease .2s; -o-transition: color ease .2s; -webkit-transition: color ease .2s; transition: color ease .2s; font-weight: 500; padding: 7px; text-decoration: none; } .post-pagination .prev-page-link, .post-pagination .next-page-link { font-size: 0 !important; position: relative; width: 40px; height: 23px; display: inline-block; vertical-align: top; } .post-pagination .next-page-link:before, .post-pagination .prev-page-link:before { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; content: ""; width: 18px; height: 0; border-top: 1px solid #000; left: 8px; -webkit-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; -moz-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; -o-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; } .post-pagination .prev-page-link:before { left:17px; } .post-pagination .next-page-link:after, .post-pagination .prev-page-link:after { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; top: 50%; content: ""; width: 0px; height: 1px; left: 25px; margin-top: -3px; border-style: solid; border-width: 3px 3px 3px 4px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(0, 0, 0); } .post-pagination .prev-page-link:after { border-color: rgba(255, 255, 255, 0) rgb(0, 0, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); left:10px; } .post-pagination .next-page-link:hover:before { width:22px; left: 18px; } .post-pagination .next-page-link:hover:after { left:39px; } .post-pagination .prev-page-link:hover:before { width: 22px; left: 0px; } .post-pagination .prev-page-link:hover:after { left:-7px; } /*-----------------------------------------------------------------------------------*/ /* 52. Top button /*-----------------------------------------------------------------------------------*/ .scrollToTop.visibleScrollTop { opacity: 1; visibility: visible; } .scrollToTop { position: fixed; z-index: 99995; bottom: 55px; right: 21px; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s ease, visibility .3s ease, -webkit-transform .4s ease; -moz-transition: opacity .3s ease, visibility .3s ease, -moz-transform .4s ease; -o-transition: opacity .3s ease, visibility .3s ease, transform .4s ease; transition: opacity .3s ease, visibility .3s ease, transform .4s ease; } .right_menu_enabled .scrollToTop { right: auto !important; left: 0; width: 40px; } .right_menu_enabled:not(.fixed-add-to-cart-enable) .scrollToTop { left:20px; } .scrollToTop a { display: block; width: 40px; height: 40px; border: 1px solid #CACACA; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: rgba(255,255,255,1); text-decoration: none; } .fixed-add-to-cart .scrollToTop a { border-bottom:none; } .scrollToTop a:before { border-color:rgba(000, 000, 000, 0) rgba(000, 000, 000 , 0) rgba(102, 102, 102, 1) rgba(0, 0, 0 , 0); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; opacity: 1; content: ""; width: 0px; height: 1px; left: 3px; margin-left: 13px; margin-top: -10px; border-style: solid; border-width:5px 5px 6px 5px; } .scrollToTop a:hover:before { top: -20%; opacity: 0; } .scrollToTop a:after { border-color:rgba(000, 000, 000, 0) rgba(000, 000, 000 , 0) rgba(102, 102, 102, 1) rgba(0, 0, 0 , 0); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 140%; opacity: 0; content: ""; width: 0px; height: 1px; left: 3px; margin-left: 13px; margin-top: -10px; border-style: solid; border-width:5px 5px 6px 5px; } .scrollToTop a:hover:after { top: 50%; opacity: 1; } .scrollToTop a:after, .scrollToTop a:before { -moz-transition: top 0.3s ease-in-out, opacity .3s ease-in-out; -o-transition: top 0.3s ease-in-out, opacity .3s ease-in-out; -webkit-transition: top 0.3s ease-in-out, opacity .3s ease-in-out; transition: top 0.3s ease-in-out, opacity .3s ease-in-out; } /*-----------------------------------------------------------------------------------*/ /* 53. Price table /*-----------------------------------------------------------------------------------*/ .pricing-box .plan-price { font-family: "Lato", sans-serif; } /*-----------------------------------------------------------------------------------*/ /* 54. Forms & contact form 7 style /*-----------------------------------------------------------------------------------*/ .input-text, .input-textarea { border:none; background-color: transparent; } #respond-wrap .input-text input, #respond-wrap .input-textarea textarea , #respond .input-text input, #respond .input-textarea textarea , #review_form input, #review_form textarea { border-bottom: 1px solid #d8d8d8; -moz-transition: border-bottom 100ms ease-in-out; -o-transition: border-bottom 100ms ease-in-out; -webkit-transition: border-bottom 100ms ease-in-out; transition: border-bottom 100ms ease-in-out; border-radius: 0; } #respond-wrap .input-text input:focus, #respond-wrap .input-textarea textarea:focus , #respond .input-text input:focus, #respond .input-textarea textarea:focus , #review_form input:focus, #review_form textarea:focus { border-bottom: 4px solid #073B87; } .input-text input[type="text"]{ background-color:transparent !important; border:0; color: #000; height:38px; width:98%; padding:0 2%; } .wpcf7-form-control-wrap { display: block !important; height:41px; } .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="text"], .input-text input[type="text"]{ background-color:transparent !important; font-family:Lato,sans-serif; border:0; color: #000; height:38px; width:98%; padding:0 2%; line-height:16px; font-size:14px; font-weight:600; } .light_styles .wpcf7-form-control-wrap input[type="email"], .light_styles .wpcf7-form-control-wrap input[type="text"], .light_styles .input-text input[type="text"] { color:#fff; } .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="text"]{ font-size:17px; line-height:17px; } .wpcf7-form-control-wrap input[type="email"], .wpcf7-form-control-wrap input[type="text"] , .wpcf7-form-control-wrap textarea { border-bottom:1px solid #171717; -moz-transition: border-bottom 100ms ease-in-out ; -o-transition: border-bottom 100ms ease-in-out ; -webkit-transition: border-bottom 100ms ease-in-out ; transition: border-bottom 100ms ease-in-out ; } .light_styles .wpcf7-form-control-wrap input[type="email"], .light_styles .wpcf7-form-control-wrap input[type="text"] , .light_styles .wpcf7-form-control-wrap textarea { border-bottom:1px solid #D4D4D4; } .wpcf7-form-control-wrap input[type="email"]:focus, .wpcf7-form-control-wrap input[type="text"]:focus , .wpcf7-form-control-wrap input[type="date"]:focus, .wpcf7-form-control-wrap textarea:focus { border-bottom:4px solid #073B87; } /*.wpcf7-form-control-wrap input[type="date"]:focus {*/ /*border:4px solid #073B87;*/ /*}*/ .wpcf7-form .label , #respond-wrap .label , #respond .label , #review_form .label { font-size:14px; line-height:14px; color:#171717; position:relative; text-transform:uppercase; top: 5px; opacity:0; font-weight:500; font-family: Poppins,sans-serif; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .wpcf7-form .label.inputfocus , #respond-wrap .label.inputfocus , #respond .label.inputfocus , #review_form .label.inputfocus { top:-13px; opacity: 1; color: #073B87; } .wpcf7-form .graylabel , #respond-wrap .graylabel , #respond .graylabel , #review_form .graylabel { font-size:14px; line-height:14px; color:#7c7c7c; position:relative; text-transform:uppercase; top:-30px; opacity:1; font-weight:500; font-family:Poppins,sans-serif; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } .light_styles .wpcf7-form .graylabel,.light_styles #respond-wrap .graylabel,.light_styles #respond .graylabel, #review_form .light_styles .graylabel { color:#EAEAEA; } .wpcf7-form .graylabel.inputfocus { top:-45px; opacity: 0; color: #073B87; } #respond-wrap .graylabel.inputfocus , #respond .graylabel.inputfocus , #review_form .graylabel.inputfocus { top:-18px; opacity: 0; color: #073B87; } #respond-wrap .label , #respond-wrap .graylabel , #respond .label , #respond .graylabel , #review_form .graylabel { text-align:left; display:block; width:100%; } .wpcf7-form #comment-text .label , .wpcf7-form #comment-text .graylabel { display:block; text-align:center; width:100%; } .vc_col-sm-6 .wpcf7-form #comment-text .label, .vc_col-sm-6 .wpcf7-form #comment-text .graylabel , .vc_col-sm-8 .wpcf7-form #comment-text .label, .vc_col-sm-8 .wpcf7-form #comment-text .graylabel { text-align:left; } .vc_col-sm-6 .wpcf7-form .button_wrap , .vc_col-sm-8 .wpcf7-form .button_wrap { display: table; margin: 60px auto 0; } .wpcf7-form #comment-text .graylabel { top:15px; } #respond-wrap .graylabel , #respond .graylabel { top:-7px; } #respond .comment-form-comment .graylabel { top:-13px; } #respond .comment-form-comment .graylabel.inputfocus { top:-22px; } .wpcf7-form #comment-text .label { top:65px; } #respond-wrap .label , #respond .label { top:26px; } .wpcf7-form #comment-text .label.inputfocus , #respond-wrap .label.inputfocus , #respond .label.inputfocus { top:50px; } .wpcf7-form #comment-text .graylabel.inputfocus { top:0; } #comment-text .button-large p { margin: 0; } #respond-wrap .label.inputfocus , #respond .label.inputfocus { top:6px; } #respond .comment-form-comment .label.inputfocus { top:0px; } .wpcf7-form .button_wrap { display: table; margin: 90px auto 0; } .wpcf7-form div.button_wrap.reserved { display: table; margin: 20px auto 0; } div#comment-text.reserved { margin-top: 0px !important; } div.reserved div.wpcf7-response-output { display: table!important; margin: 0 auto !important; } .light_styles div.reserved div.wpcf7-mail-sent-ok { display: table !important; margin:0 auto!important; } .wpcf7-form-control-wrap textarea, .input-textarea textarea{ background-color:transparent !important; font-family:Lato,sans-serif; border-top:0; border-left:0; border-right:0; border-bottom: 1px solid #000; padding:10px 1%; color:#000; width:98%; max-width: 98%; min-width: 98%; } .light_styles .wpcf7-form-control-wrap textarea, .light_styles .input-textarea textarea { color:#fff; } .wpcf7-form-control-wrap textarea { text-align:center; height:75px; font-size:17px; line-height:17px; } #comment-text .button.button-large { padding:0; margin:0; border:2px solid #262626; border-radius:20px; height:35px; width:125px; text-align:center; overflow:hidden; } .light_styles #comment-text .button.button-large{ border:2px solid #EAEAEA; } #comment-text .button.button-large input { position: relative; width:100%; display: inline-block; -o-transition: transform 0.35s; -moz-transition: transform 0.35s; -webkit-transition: transform 0.35s; transition: transform 0.35s; padding: 0 2px; } #comment-text .button.button-large input[type="submit"] { -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); -webkit-transform: translateY(80px); transform: translateY(80px); outline: none; border: none; margin: 0; } #comment-text .button.button-large p:not(.hoverText) input[type="submit"] { color:#fff; } .touchevents #comment-text .button.button-large input[type="submit"], #comment-text .button.button-large:hover input[type="submit"] { -moz-transform: translateY(-55px); -ms-transform: translateY(-55px); -o-transform: translateY(-55px); -webkit-transform: translateY(-55px); transform: translateY(-55px); } #comment-text .button.button-large .hoverText { position: relative; display: inline-block; height: 40px; width: 100%; margin-left: -2px; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); -o-transition: transform 0.35s; -moz-transition: transform 0.35s; -webkit-transition: transform 0.35s; transition: transform 0.35s; padding: 0 2px; } .touchevents #comment-text .button.button-large .hoverText, #comment-text .button.button-large:hover .hoverText { -moz-transform: translateY(-55px); -ms-transform: translateY(-55px); -o-transform: translateY(-55px); -webkit-transform: translateY(-55px); transform: translateY(-55px); } #comment-text .button.button-large .hoverText:before { content: attr(data-hover); font-weight: 700; } #comment-text .button.button-large { -moz-transition:background-color .3s ease, color .3s ease, border-color .3s ease; -o-transition:background-color .3s ease, color .3s ease, border-color .3s ease; -webkit-transition:background-color .3s ease, color .3s ease, border-color .3s ease; transition:background-color .3s ease, color .3s ease, border-color .3s ease; } #comment-text .button.button-large:hover { cursor: pointer; background-color: #073B87; } /* Footer CF7 Style */ #mail , #name , #subject { width: 32%; float: left; } #mail, #subject { margin-left:2%; } #reserve_date, #Person_number , #reserve_time { width : 30%; float: left; margin-right: 3%; } #wedding_services , #wedding_guests { width : 48%; float: left; } #wedding_services { padding-right: 2%; } #wedding_guests { padding-left: 1%; } #wedding_text,#wedding_email { width : 49%; float: left; } #wedding_text { padding-right: 1%; } #wedding_email { padding-left: 1%; } #wedding_text input[type='text'], #wedding_email input[type='email'] { padding: 0 0 !important; } #comment-text.wedding .button.button-large { padding: 0px 8px 0px 8px; } #comment-text.wedding .wpcf7-form-control-wrap textarea { color: #7c7c7c; } #Person_number div.nice-select ul, #reserve_time div.nice-select ul, #wedding_services div.nice-select ul, #wedding_guests div.nice-select ul { max-height: 160px; overflow-y: scroll; } #wedding_services li, #wedding_guests li { list-style: none; } #reserve_time select.wpcf7-form-control.wpcf7-select, #Person_number select.wpcf7-form-control.wpcf7-select, #wedding_services select.wpcf7-form-control.wpcf7-select, #wedding_guests select.wpcf7-form-control.wpcf7-select, span.wpcf7-form-control-wrap.Person_number, span.wpcf7-form-control-wrap.your_time, span.wpcf7-form-control-wrap.wedding_services, span.wpcf7-form-control-wrap.wedding_guests { display: none !important; } #reserve_time div.nice-select, #Person_number div.nice-select, #wedding_services div.nice-select,#wedding_guests div.nice-select{ border-top: unset; border-right: unset; border-left: unset; border-bottom: 1px solid #000000; } .wpcf7-form #comment-text .label, .wpcf7-form #comment-text .graylabel #wedding_services li, #wedding_guests li { list-style: none; } #wedding_services div.nice-select span, #wedding_guests div.nice-select span { color: #7c7c7c; } #reserve_date input[type="date"] { width: 90%; height: 40px; border-top: unset; border-right: unset; border-left: unset; } .light_styles #Person_number span.current, .light_styles #reserve_time span.current, .light_styles #reserve_date input[type="date"] , .wpcf7-form.light_styles span.graylabel { color : #FFF !important; } #Person_number span.graylabel { top:-15px !important; } #reserve_time span.graylabel { top:-15px !important; } #reserve_date span.graylabel { top:-38px !important; } #wedding_services span.graylabel, #wedding_guests span.graylabel { top:-10px !important; } #reserve_time li,#Person_number li { list-style: none; } #Person_number div.nice-select , #reserve_time div.nice-select, #wedding_services div.nice-select, #wedding_guests div.nice-select, #reserve_date input[type=date] { background-color: transparent !important; } #reserve_time div.nice-select.open, #Person_number div.nice-select.open, #wedding_services div.nice-select.open, #wedding_guests div.nice-select.open, #reserve_date input[type=date]:focus { border-bottom:4px solid #073B87; } #reserve_date input[type=date]::-webkit-inner-spin-button { padding-top: 20px !important; } input[type=date]::-webkit-calendar-picker-indicator { background-color: transparent; } #reserve_date input[type=date] { outline:0px !important; -webkit-appearance:none; } #Person_number div.nice-select, #reserve_time div.nice-select, #wedding_services div.nice-select, #wedding_guests div.nice-select { padding-left: 0px !important; } #comment-text { float:left; width:100%; margin-top:10px; } #comment-text input[type="submit"], #comment-text .button.button-large .hoverText { line-height:20px; color:#262626; border-radius:5px; font-size:13px; font-weight:700 !important; text-transform:uppercase; } .light_styles #comment-text input[type="submit"],.light_styles #comment-text .button.button-large .hoverText { color:#EAEAEA; } #comment-text input[type="submit"] { margin:0 auto; display:table; height:38px; padding:13px 50px; border:2px solid #000; margin-top:40px; } .light_styles #comment-text input[type="submit"] { border:2px solid #EAEAEA; } div.wpcf7-mail-sent-ok { border:none !important; display: block; text-align: center; color: #073B87; font-weight: 500; line-height: 47px; } .light_styles div.wpcf7-mail-sent-ok { color: #fff; } /* content form 7Place holder */ #comment-text textarea::-webkit-input-placeholder , #comment-text textarea:-moz-placeholder ,#comment-text textarea:-ms-input-placeholder { color:#073B87; opacity: 1; } #name input::-webkit-input-placeholder ,#name input:-moz-placeholder , #name input:-ms-input-placeholder { color:#bfbfbf !important; } .wpcf7-form-control-wrap textarea::-webkit-input-placeholder { color:#000 !important; } .wpcf7-form-control-wrap input::-webkit-input-placeholder { color:#000 !important; } .wpcf7-form-control-wrap textarea:-moz-placeholder { color:#000; opacity:1; } span.wpcf7-not-valid-tip-no-ajax { position: absolute; top:50%; right:1%; color: #ff4c2f; width:13px; height:20px; display: block; overflow: hidden; margin-top:-10px; } span.wpcf7-not-valid-tip { position: absolute; top: 10px; right: 12px; left:auto; text-indent: -9999px; z-index: 5; background: transparent url(../img/form_error.png) no-repeat center center; height:14px; width:14px; border: none !important; font-size: 10pt; padding: 2px; } .wpcf7-not-valid-tip-no-ajax:before{ font-family: 'Linearicons'; content:"\e0c5"; } div.wpcf7-validation-errors{ color: #ff4c2f; border: none !important; font-size: 14px; font-weight: 400; text-indent: -9999px; } div.wpcf7-response-output{ margin:0; padding:10px 0; } div.wpcf7-mail-sent-ng { border: none; color:#000; font-weight:700; text-align:center; line-height:30px; } div.wpcf7 img.ajax-loader{ content:url('../img/light_loader.gif') !important; padding-bottom: 2px; position: absolute; top: 9px; left:0; } /*-----------------------------------------------------------------------------------*/ /* 55. Footer /*-----------------------------------------------------------------------------------*/ .footer-bottom { position:relative; width:100%; background-color:#f5f5f5; } body.no-preloader.fade-up .footer-bottom { -moz-transition: transform ease 200ms; -o-transition: transform ease 200ms; -webkit-transition: transform ease 200ms; transition: transform ease 200ms; -moz-transform: translateY(120px); -ms-transform: translateY(120px); -o-transform: translateY(120px); -webkit-transform: translateY(120px); transform: translateY(120px); } body.no-preloader.fade-up .footer-bottom.fadeIssueFixed { -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .footer-bottom.dark { background-color:#1e1e1e; } .footer-bottom .copyright { line-height:40px; font-size: 12px; font-weight: 600; text-align:left; color:#838383; padding-left:40px; font-family:lato,sans-serif; letter-spacing: .03em; } .footer-bottom .copyright a { color: #8E8E8E; text-decoration: none; -moz-transition: color ease 200ms; -o-transition: color ease 200ms; -webkit-transition: color ease 200ms; transition: color ease 200ms; } .footer-bottom .copyright a:hover { color:#A09E9E; } .footer-bottom.dark .copyright { color:#E5E3E3; } .footer-bottom .social-icons { padding-left:34px; width:auto; float:right; padding-right:30px; } .footer-bottom .container .social-icons { padding-right:0; } .footer-bottom .container .copyright { padding-left:0; } .footer-widgetized .footer-widgetized-wrap { padding:65px 0 55px; } .footer-widgetized.footer-has-banner .footer-widgetized-gradient .footer-widgetized-wrap { padding:150px 0 0; } .footer-widgetized-gradient { background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 20%, rgba(255,255,255,0.92) 21%, rgba(255,255,255,0.86) 40%, rgba(255,255,255,0.76) 60%, rgba(255,255,255,0.48) 79%, rgba(255,255,255,0.46) 80%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,0.92)), color-stop(21%,rgba(255,255,255,0.92)), color-stop(40%,rgba(255,255,255,0.86)), color-stop(60%,rgba(255,255,255,0.76)), color-stop(79%,rgba(255,255,255,0.48)), color-stop(80%,rgba(255,255,255,0.46)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 20%,rgba(255,255,255,0.92) 21%,rgba(255,255,255,0.86) 40%,rgba(255,255,255,0.76) 60%,rgba(255,255,255,0.48) 79%,rgba(255,255,255,0.46) 80%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 20%,rgba(255,255,255,0.92) 21%,rgba(255,255,255,0.86) 40%,rgba(255,255,255,0.76) 60%,rgba(255,255,255,0.48) 79%,rgba(255,255,255,0.46) 80%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 20%,rgba(255,255,255,0.92) 21%,rgba(255,255,255,0.86) 40%,rgba(255,255,255,0.76) 60%,rgba(255,255,255,0.48) 79%,rgba(255,255,255,0.46) 80%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.92) 20%,rgba(255,255,255,0.92) 21%,rgba(255,255,255,0.86) 40%,rgba(255,255,255,0.76) 60%,rgba(255,255,255,0.48) 79%,rgba(255,255,255,0.46) 80%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } .footer-widgetized.ep-section.fullwidth { padding:0 30px; } .footer_content { padding: 10px 0 5px 0; min-height: 40px; } .footer_content_right, .footer_content_left{ width:auto; float:left; } .footer_content_right{ float:right; } .copyright_logo { display: inline-block; } /* Widgets */ footer .widget-area { padding:35px 0; position:relative } footer .widget-area .widget-title{ color: #656565; } footer .widget-area a{ color:#8d8d8d; } .footer-widgetized .footer-widgetized-wrap ul.product_list_widget li a{ line-height:20px; } #footer-widget-14 .footer-widgetized-wrap div:nth-child(3), #footer-widget-15 .footer-widgetized-wrap div:nth-child(3) { clear:both; } /* Lists */ footer .widget-area li{ border-bottom: 1px solid #aeaeae; } /* Recent Tweets */ footer .widget_px_twitter li { border-bottom: none; } footer .widget_px_twitter li a { display: inline; } footer .widget_px_twitter .link { color:#939393; } footer .widget_px_twitter hr.hr-twitter{ background-color: #4b4b4b; } /* Progress bar */ footer .widget_px_progress .progress{ background-color: #c8eafc; } /* Search */ footer .widget-area .search-form input[type="text"]{ color:#949494; } footer .widget-area .search-form input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color:#949494; } footer .widget-area .search-form input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#949494; } footer .widget-area .search-form input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#949494; } footer .widget-area .search-form input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#949494; } /* Custom Menu */ footer .widget_nav_menu .sub-menu{ margin: 8px 0 0 10px; } footer .widget_nav_menu a{ display: block; padding: 3px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-transition:background-color 200ms; -o-transition:background-color 200ms ; -webkit-transition:background-color 200ms; transition:background-color 200ms; } footer .widget_nav_menu a:hover{ background-color: #b3b3b3; padding-left: 10px; } .footer-widgetized .widget { padding-bottom:25px; } .footer-widgetized .progressbar .progress { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; height:21px; } .footer-widgetized .progressbar .title { position:absolute; color:#fff; top:5px; left:8px; font-weight:400; font-family: Lato,sans-serif; line-height: 11px; font-size:11px; } .footer-widgetized .progressbar { position:relative; } .footer-widgetized .flickr-container .flickr_badge_image { height:70px; width:70px; } .footer-widgetized .hr-medium { margin: 0px 0 23px 0; height: 2px; background-color:#4b4b4b; width:70px; } .footer-widgetized .widget-title { margin: 0px; display:inline-block; color: #171717 !important; font-size: 14px; line-height: 27px; text-transform: uppercase; margin-bottom: 12px; font-family: Poppins, sans-serif; font-weight: 600; padding-bottom:7px; } .footer-widgetized.light .widget-title{ color: #fff !important; } .footer-widgetized.light , .footer-widgetized.light p { color:#C5C5C5; } .footer-widgetized.light a{ color: #d0d0d0; } .footer-widgetized.light a:hover{ color:#8c8c8c; } .footer-widgetized.light .widget_product_tag_cloud.collapse .show_more_tags { color: #fff; } .footer-widgetized-gradient .footer-widgetized .widget { margin-bottom:65px; } .footer-widgetized .wpcf7-form-control-wrap textarea, .footer-widgetized .input-textarea textarea{ height:75px; } /*search input footer*/ .footer-widgetized-wrap .search-form { border: 1px solid #D9D9D9; } .footer-widgetized-wrap .search-form input[type="text"] { border:none; width:100%; background-color:transparent; height:36px; text-indent:10px; } .footer-widgetized-wrap li a { font-size: 14px; font-weight: 400; color: #737373; text-decoration: none; line-height: 32px; } .footer-widgetized-wrap li { margin-bottom:0; } .footer-widgetized.light .footer-widgetized-wrap li a{ color: #d0d0d0; } .footer-widgetized-wrap .widget_categories li { font-weight: 500; } /*-----------------------------------------------------------------------------------*/ /* 56. simple-menu footer /*-----------------------------------------------------------------------------------*/ .simple-menu { float: right; display: inline-block; padding-right:10px; } .simple-menu li { line-height: 15px; display: inline-block; padding:8px 5px; } .simple-menu li a { font-family: lato, sans-serif; font-size: 12px; color: #fff; opacity: .9; font-weight: 500; -moz-transition: opacity ease 200ms; -o-transition: opacity ease 200ms; -webkit-transition: opacity ease 200ms; transition: opacity ease 200ms; } #topbar.dark .simple-menu li a { color:#000; } .simple-menu li a:hover { opacity:1; text-decoration: none; } .simple-menu.dark li a { color: #888; } .simple-menu.dark li a:hover { color: #222; } footer .simple-menu { margin-top:8px; } footer .copyright_logo + .simple-menu li:first-child { margin-left: 10px; padding-right:10px; border-left:1px solid #bbb; padding-left:10px; } footer .copyright_logo + .simple-menu.dark li:first-child { border-left:1px solid #666; } footer .simple-menu li { padding: 0px 4px; } footer .simple-menu li a { font-family: Lato, sans-serif; font-weight: 500; } footer .simple-menu.light li a { color: #838383; } footer .simple-menu.light li a:hover { color: #333; } footer .simple-menu.dark li a { color: #fff; } footer .simple-menu.dark li a:hover { color: #dcdcdc; } /*-----------------------------------------------------------------------------------*/ /* 57. Search Form /*-----------------------------------------------------------------------------------*/ .search-button { width: 42px; height: 42px !important; text-align: center; margin-top: 0; margin-right: 2px; float: right; font-weight: 700 !important; display: table; color:#8a8a8a; font-size: 15px; line-height: 42px !important; cursor: pointer; margin: 19px 0; } header.type2_3 .search-button { position:absolute; right: 0px; top: -3px; margin:40px 0; } header.type2_3.hastogglesidebar .search-button , header.type2_3.hasDropDownCart .search-button { right: 43px; } header.type2_3.hastogglesidebar.hasDropDownCart .search-button { right: 88px; } header.fullwidthMenu.type2_3 .search-button { right: 20px; } header.fullwidthMenu.type2_3.hastogglesidebar .search-button , header.fullwidthMenu.type2_3.hasDropDownCart .search-button { right: 65px; } header.fullwidthMenu.type2_3.hastogglesidebar.hasDropDownCart .search-button { right:114px; } header.type1 .search-button { margin: 0 6px; line-height: 59px !important; position:relative; right: 0; font-weight:bold; font-size: 15px; } header.type1.hastogglesidebar .search-button { right: 55px; } header.type1 #headerSecondState .search-button, header.type4_5_6 #headerSecondState .search-button, header.type2_3 #headerSecondState .search-button { margin: 0 6px; line-height: 60px !important; position: relative; right: 1px; } header.hastogglesidebar.type1 #headerSecondState .search-button, header.hastogglesidebar.type4_5_6 #headerSecondState .search-button, header.hastogglesidebar.type2_3 #headerSecondState .search-button { right: 45px; } header.hastogglesidebar.type1 #headerSecondState .container .search-button, header.hastogglesidebar.type4_5_6 #headerSecondState .container .search-button, header.hastogglesidebar.type2_3 #headerSecondState .container .search-button { right: 55px; } header.fullwidthMenu.type1 #headerSecondState .search-button, header.fullwidthMenu.type1 #headerFirstState .search-button { position:absolute; right: 10px; } header.fullwidthMenu.type1.hastogglesidebar #headerSecondState .search-button, header.fullwidthMenu.type1.hasDropDownCart #headerSecondState .search-button, header.fullwidthMenu.type1.hastogglesidebar #headerFirstState .search-button, header.fullwidthMenu.type1.hasDropDownCart #headerFirstState .search-button { right: 65px; } header.fullwidthMenu.type1.hastogglesidebar.hasDropDownCart #headerSecondState .search-button, header.fullwidthMenu.type1.hastogglesidebar.hasDropDownCart #headerFirstState .search-button { right: 122px; } header.type4_5_6 .search-button{ margin:22px 6px; } header.type9 .search-button, header.fullwidthMenu.type4_5_6 .search-button{ margin:22px 6px; right: 10px; position:absolute; } header.type9.hastogglesidebar .search-button, header.type9.hasDropDownCart .search-button, header.fullwidthMenu.type4_5_6.hastogglesidebar .search-button , header.fullwidthMenu.type4_5_6.hasDropDownCart .search-button { right: 70px; } header.hastogglesidebar.hasDropDownCart.type9 .search-button, header.hastogglesidebar.hasDropDownCart.fullwidthMenu.type4_5_6 .search-button { right:104px; } header.hastogglesidebar.type4_5_6 .container .search-button { position:absolute; right:50px; margin: 22px 0; } header.hastogglesidebar.hasDropDownCart.type4_5_6 .container .search-button { right:90px; } header.hastogglesidebar.type9.hastogglesidebar.hasDropDownCart #headerFirstState .search-button{ right:110px; } header.hastogglesidebar.type9.hastogglesidebar.hasDropDownCart #headerSecondState .search-button{ right:120px; } header.type9 #headerSecondState .search-button { margin:8px 0; } header.type9 .search-button { top:0; } header.fullwidthMenu.type4_5_6.type6 .search-button { right:0; position:relative; } header.fullwidthMenu.type4_5_6.type6.hastogglesidebar.hasDropDownCart .search-button{ right: 90px; } header.fullwidthMenu.type4_5_6.type6.hasDropDownCart .search-button , header.fullwidthMenu.type4_5_6.type6.hastogglesidebar .search-button { right: 7px; } header.fullwidthMenu.type6.hastogglesidebar:not(.hasDropDownCart) .search-button { right: 45px; } header.fullwidthMenu.type6.hastogglesidebar:not(.hasDropDownCart) .search-button + .navigation { margin-right: 45px; } /* left/right menu*/ aside.vertical_menu_area .search-button { float: right; display: block; margin: 0; clear: none; color:#2c2c2c; } #search-form { position: fixed; width: 100%; height: 100%; display: block; top: 0; left: 0; background: rgba(245, 245, 245, 0.9); z-index: 99995 !important; opacity: 0; visibility: hidden; cursor: url(../img/cursor/search-close.png) 32 32, url(../img/cursor/search-close.cur), auto; -moz-transition: opacity .2s ease, visibility .4s ease-in; -o-transition: opacity .2s ease, visibility .4s ease-in; -webkit-transition: opacity .2s ease, visibility .4s ease-in; transition: opacity .2s ease, visibility .4s ease-in; } #search-form.showing { opacity: 1; visibility: visible; } .search-form fieldset{ border:0; margin:0; padding: 0; } .search-form form:before { content: "\e922"; position: absolute; width: 12px; height: 3px; border-radius: 50%; right: 13px; top: 11px; font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #999; font-size: 17px; } .toggleSidebar .search-form form:before { top: 17px; } /* .search-form a{ opacity: 0; visibility: hidden; pointer-events:none; display:none !important; } */ #search-form #search-caption { top: 50%; left: 15%; margin-top: 50px; position: absolute; margin-left: 62px; opacity: 0; text-transform:uppercase; font-size: 14px; font-weight: 400; } body:not(.right_menu_enabled) aside.vertical_menu_area.left_menu + #search-form #search-caption { left:300px; } #search-form.showing #search-caption { opacity: 1; -moz-transition: opacity .3s ease 0.3s; -o-transition: opacity .3s ease 0.3s; -webkit-transition: opacity .3s ease 0.3s; transition: opacity .3s ease 0.3s; } .vertical_menu_enabled #search-form input[type="text"] { left:25% !important; } .vertical_menu_enabled #search-form #search-caption { left:25% !important; } body:not(.right_menu_enabled) aside.vertical_menu_area.left_menu + #search-form input[type="text"] { left:300px !important; } #search-form .search-form input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ opacity: .6; padding-left:30px; padding-top:9px; } #search-form .search-form input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ opacity: .6; padding-left:30px; padding-top:9px; } #search-form .search-form input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ opacity: .6; padding-left:30px; padding-top:9px; } #search-form .search-form input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ opacity: .6; padding-left:30px; padding-top:9px; } .search-form input[type="submit"] { position: absolute; right: 0; top: 0; width: 42px; padding: 0; height: 100%; background: transparent; -moz-background-size: 18px 18px; -o-background-size: 18px 18px; -webkit-background-size: 18px 18px; background-size: 18px 18px; border: none; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-border-top-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-bottomleft: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #search-form .search-form input[type="submit"] { display: none; } .search-form input[type="text"]::-webkit-input-placeholder { /* WebKit browsers */ color: #838383; } .search-form input[type="text"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #838383; opacity: 1; } .search-form input[type="text"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #838383; opacity: 1; } .search-form input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #838383; } div.search-form form.searchform::before { content: unset!important; } div.search-form form.searchform input[type=text] { font-family:Poppins,sans-serif!important; font-size:13px!important; } /*-----------------------------------------------------------------------------------*/ /* 57.1. Ajax Search Form /*-----------------------------------------------------------------------------------*/ #search-form #cat_container { float: left; height: 54px; width: 225px; opacity: 0; box-shadow: 3px 4px 9px rgba(0,0,0,0.1); -webkit-transform:translateY(30px); -moz-transform:translateY(30px); -ms-transform:translateY(30px); transform:translateY(30px); -webkit-transition: -webkit-transform .3s ease 0s, opacity .3s ease 0s; -moz-transition: -moz-transform .3s ease 0s, opacity .3s ease 0s; -ms-transition: -ms-transform .3s ease 0s, opacity .3s ease 0s; transition: transform .3s ease 0s, opacity .3s ease 0s; } #search-form.showing #cat_container { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; line-height:54px; max-height:54px; -webkit-transition: -webkit-transform .3s ease 0.3s, opacity .3s ease 0.3s; -moz-transition: -moz-transform .3s ease 0.3s, opacity .3s ease 0.3s; -ms-transition: -ms-transform .3s ease 0.3s, opacity .3s ease 0.3s; -o-transition: transform .3s ease 0.3s, opacity .3s ease 0.3s; transition: transform .3s ease 0.3s, opacity .3s ease 0.3s; } .searchform.popUp { display: flex; position: fixed !important; top: 25%; left: 50%; margin-left: -470px !important; } .searchResults { position: absolute; width: 670px; max-height: 400px; background-color: #FFF; overflow-y: scroll; padding: 10px 10px 10px 30px; top: 100%; margin-top: 5px; z-index: 11; opacity: 1; box-shadow: 0 0 9px rgba(0,0,0,0.1); } #search-form .searchResults{ max-height: 350px; top: 6px; position: relative; } .searchResults.close { max-height: 0px; padding: 0px; opacity: 0; } .searchResults.close .searchItem { display: none; } #searchInputWrapper .searchResults { box-sizing: border-box; width: 100%; max-width: 823px; display: block; position: relative; margin: auto; float: none; top:6px; } #searchInputWrapper .searchResults .searchItem { width: 50%; clear: none; } #searchInputWrapper .showAllResults { box-sizing: border-box; width: 100%; max-width: 823px; display: block; position: relative; margin: auto; float: none; color: #424242; } #searchInputWrapper .showAllResults:hover { color:#3c3c3c; } .searchWrapper .showAllResults { top: 6px; position: relative; } .showAllResults .emptyResult { float: none !important; display: inline-block; } .searchResults::-webkit-scrollbar-track { display: none; } .searchResults::-webkit-scrollbar { width: 12px; background-color: #FFF; } .searchResults::-webkit-scrollbar-thumb { border-left:4px solid #EEEEEE; } .searchItem { padding-bottom: 10px; float: left; clear: both; } .searchItem > a.Link { cursor: pointer; } .searchItemDesc { position: relative; float: left; padding-left: 18px; color:#707070; } .searchItemDesc .itemName { color:#424242; } .searchItemDesc .woocommerce-Price-amount { color:#FE2742; } .searchItem .imagewrap img { width:70px; max-width:70px; height:70px; max-height:70px; opacity:1; box-sizing:border-box; } .searchItem .imageswrap { float: left; padding-top: 0 !important; width: 70px; height: 70px; max-width: 70px; max-height: 70px; } .searchItem .imageswrap.lazy-load img { opacity: 1; } .showAllResults { text-transform: capitalize; border-radius: 0 0 3px 3px; letter-spacing: .08em; position: absolute; width: 670px; max-height: 47px; top: calc(100% + 306px); line-height: 47px; text-align: center; font-size: 13px; font-family: Poppins,sans-serif; background-color: #FFF; padding-right: 10px; padding-left: 30px; border-top: 1px solid gainsboro; z-index: 11; opacity: 1; cursor: pointer; box-shadow: 3px 4px 9px rgba(0,0,0,0.1); } .showAllResults .productSearchLink { color:#707070; font-weight:bold; } .showAllResults.close { max-height: 0px; opacity: 0; padding: 0; } label.colorLabel > input, label.selectLabel > input { /* HIDE RADIO */ visibility: hidden; /* Makes input not-clickable */ position: absolute; /* Remove input from document flow */ } #search-form.showing .search-form .searchWrapper { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: -webkit-transform .3s ease 0.3s, opacity .3s ease 0.3s; -moz-transition: -moz-transform .3s ease 0.3s, opacity .3s ease 0.3s; -ms-transition: -ms-transform .3s ease 0.3s, opacity .3s ease 0.3s; -o-transition: transform .3s ease 0.3s, opacity .3s ease 0.3s; transition: transform .3s ease 0.3s, opacity .3s ease 0.3s; } #search-form .searchWrapper { opacity: 0; -webkit-transform:translateY(30px); -moz-transform:translateY(30px); -ms-transform:translateY(30px); -o-transform: translateY(30px); transform:translateY(30px); -webkit-transition: -webkit-transform .3s ease 0s, opacity .3s ease 0s; -moz-transition: -moz-transform .3s ease 0s, opacity .3s ease 0s; -ms-transition: -ms-transform .3s ease 0s, opacity .3s ease 0s; -o-transition: transform .3s ease 0s, opacity .3s ease 0s; transition: transform .3s ease 0s, opacity .3s ease 0s; } form.searchform .searchWrapper { float: left; width: 710px; margin-left: 5px; display: block; box-shadow: 3px 4px 9px rgba(0,0,0,0.1); } #search-form input[type="text"]{ width: 580px; max-width: 710px; background-color: #FFF; border-radius: 3px 0 0 3px; border:0; color:#292929; font-weight: 900; font-size:22px!important; line-height:54px; min-height:54px; height: 54px; padding: 0px 0px 0px 40px; margin-bottom: 0px; text-transform: capitalize; font-family:Poppins,Lato,sans-serif!important; float: left; } #search-form input[type="text"]::placeholder { padding-left: 0px!important; } #search-form .search-form form { margin: auto; } #searchInputWrapper div.nice-select ul.list, #search-form div.nice-select ul.list { max-height: 367px; padding-bottom: 15px; z-index: 12; overflow-y: unset!important; } .typing-indicator { background-color: #FFF; float: left; display: block; width: 35px; height: 54px; cursor: default; } .typing-indicator span { visibility: hidden; height: 10px; width: 10px; float: left; margin-right:1px; background-color: #9e9ea1; display: block; border-radius: 50%; opacity: 0.4; position: relative; top: 22px; } .typing-indicator span:nth-of-type(1) { animation: 1s blinker 0.3333s infinite!important; } .typing-indicator span:nth-of-type(2) { animation:1s blinker 0.6666s infinite !important; } .typing-indicator span:nth-of-type(3) { animation:1s blinker 0.9999s infinite !important; } @keyframes blinker { 50% { opacity: 1; } } form.searchform .searchIcon { border-radius:0 3px 3px 0; position: relative; float: left; width: 54px; height: 54px; font-size: 20px; text-align: center; background-color: #FFF; display: table; margin: auto; cursor: pointer; } #search-form div.nice-select { height: 54px; border: none; outline: none; border-radius:3px; } #search-form .nice-select:after { border-bottom: 1px solid #707070; border-right: 1px solid #707070; width:7px; height:7px; right:20px; } #search-form .icon-search{ font-size: 18px; color: #707070; display: table-cell; vertical-align: middle; } #search-form .icon-search:before { content: "\e9ea"; } #search-form span.current { line-height: 54px; text-align: center; font-family: Poppins,sans-serif; font-size: 15px; color:#707070; font-weight: 300; } #searchInputWrapper div.nice-select .option, #search-form div.nice-select .option { text-align: center; line-height: 19px; padding-top: 7px; padding-bottom: 8px; min-height: 19px; color: black !important; opacity: 0.6; font-size:13px; font-family:Poppins,sans-serif; } #searchInputWrapper div.nice-select .option:hover, #search-form div.nice-select .option:hover{ background-color: #FFF !important; opacity: 1!important; } #searchInputWrapper div.nice-select .option.focus, #search-form div.nice-select .option.focus { background-color: #FFF!important; opacity: 1!important; } /*-----------------------------------------------------------------------------------*/ /* 58. Testimonials // Blockquotes /*-----------------------------------------------------------------------------------*/ blockquote .end { background:url(assets/img/blockquote-end-dark.png) no-repeat; position:absolute; bottom:16px; right:20px; height:11px; width:16px; display: block; } blockquote .name { position:absolute; bottom:12px; right:50px; font-size: 14px; line-height: 20px; } .testimonial { position: relative; padding-bottom: 0px; padding-left: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .testimonial blockquote:after, .testimonial blockquote:before { display:none; } .testimonials .swiper-container { overflow: visible; } .testimonial blockquote{ padding: 25px 0px 10px; float: left; background: none; font-size: 15px; line-height: 25px; font-weight: 400; color:#616161; font-family:Lato,sans-serif; text-align:left; height:70px; overflow-y:hidden; quotes : none; font-style: normal; margin-bottom: 0 !important; } .testimonials blockquote{ padding: 25px 0px 10px; float:left; position: relative; right: 0; margin:20px; text-align: left !important; top:150px; width:100%; clear:both; } .testimonials .quote .author-image { position:absolute; top:0; } .testimonial .name { text-align:center; font-size: 25px; color: #565656; text-transform:capitalize; margin:0; font-family: Lato,sans-serif; font-weight: 400; } .carousel.testimonials-style2.skin-light blockquote { color:#616161; } .testimonials.skin-light .quote .name, .testimonials.skin-light .quote .job, .carousel.testimonials-style2 .quote .name, .carousel.testimonials-style2 .quote .job{ color:#FFF; } .testimonials.skin-light blockquote, .carousel.testimonials-style2 blockquote { color:#FFF; } .testimonials.skin-light .arrows-button-next:before, .testimonials.skin-light .arrows-button-prev:before { border-top: 1px solid #fff; } .testimonials.skin-light .arrows-button-prev:after, .carousel.testimonials-style2.skin-light .arrows-button-prev:after { border-color: rgba(255, 255, 255, 0) rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0); } .testimonials.skin-light .arrows-button-next:after, .carousel.testimonials-style2.skin-light .arrows-button-next:after{ border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255); } .testimonials:before { position: absolute; border-top: 3px solid #073B87; width:20px; height:0px; left:0px; top:73px; content: ""; } .testimonials:after { position: absolute; border-top: 3px solid #073B87; width: calc(100% - 170px); left: 170px; height:0px; top:73px; content: ""; } .testimonials .quot-icon-container { left: calc(100% - 47px); top:38px; position: absolute; } .testimonials .quot-icon { width:12px; height: 10px; background-color: #073B87; position: relative; display: inline-block; margin-left: 0px; } .testimonials .quot-icon:before { position: absolute; content: ""; width: 3px; height: 0px; left: 0; top: 10px; border-style: solid; border-width: 14px 7px 0px 2px; border-top-color:#073B87; border-right-color:transparent; border-bottom-color:#073B87; border-left-color:#073B87; } .testimonials .quot-icon:after { position: absolute; content: ""; width: 3px; height: 0px; left: -4px; top: 10px; border-style: solid; border-width: 0px 0px 14px 4px; border-bottom-color: #073B87; border-left-color:transparent; } .testimonials .arrow-button-divider { width: 2px; height: 7px; position: relative; float: right; right: 3px; top: 174px; background-color: #2c2c2c; } .testimonials.skin-light .arrow-button-divider { background-color: #ffffff; } .testimonials .arrows-button-next,.testimonials .arrows-button-prev { opacity: 1; cursor: pointer; position: relative; width: 45px; border: none; height: 33px; overflow: visible; right:0; z-index: 5; margin-right:0px; top:160px; text-indent:99999px; } .testimonials .arrows-button-next:before,.testimonials .arrows-button-prev:before { position:absolute; top:50%; content:""; width: 30px; height:1px; border-top: 1px solid #2c2c2c; left: 0; -webkit-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -moz-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } .testimonials .arrows-button-prev:before { left:auto; right:0; } .testimonials .arrows-button-next:after { position: absolute; top: 50%; content: ""; width: 3px; height: 1px; left: 0; margin-left: 30px; margin-top: -3px; border-style: solid; border-width: 3px 1px 3px 5px; border-color: rgba(14, 14, 14, 0) rgba(14, 14, 14, 0) rgba(14, 14, 14, 0) rgb(43, 43, 43); -webkit-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -moz-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: margin-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } .testimonials .arrows-button-prev:after { position: absolute; top: 50%; content: ""; width: 3px; height: 1px; margin-top: -3px; border-style: solid; margin-right: 30px; right: 0; border-width: 3px 5px 3px 1px; border-color: rgba(14, 14, 14, 0) rgb(44, 44, 44) rgba(14, 14, 14, 0) rgba(14, 14, 14, 0); -webkit-transition: margin-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -moz-transition: margin-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: margin-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: margin-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } .testimonials .arrows-button-next:hover:after { margin-left: 40px; } .testimonials .arrows-button-prev:hover:after { margin-right: 40px; } .testimonials .arrows-button-next:hover:before, .testimonials .arrows-button-prev:hover:before{ width:40px; } .testimonials .arrows-button-prev ,.testimonials .arrows-button-prev:hover { opacity:1; right:6px !important; background:none; float: right; } .testimonials .arrows-button-next ,.testimonials .arrows-button-next:hover{ opacity:1; background:none; float: right; } .testimonials { position: relative; padding:0 0 50px; } .testimonials .quote .author-image { background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; height: 150px; width: 150px; display: inline-block; margin-right: 40px; float: left; } .testimonials .author { position: absolute; float: left; width: 160px; top: 83px; text-align: left; left: calc(100% - 47px); padding: 0 !important; } .testimonial .quote .author-image { -webkit-animation: fadeOut 1s ease forwards; -moz-animation: fadeOut .3s ease 1.1s forwards; -o-animation: fadeOut .4s ease 0.1s forwards; animation: fadeOut .4s ease 0.1s forwards; } .testimonial.swiper-slide-active .quote .author-image { opacity: 0; -webkit-animation: fadeIn 1s ease forwards; -moz-animation: fadeIn 1s ease forwards; -o-animation: fadeIn 1s ease forwards; animation: fadeIn 1s ease forwards; } .testimonial .quote .name { -webkit-animation: fadeOutToRight 1.2s ease forwards; -moz-animation: fadeOutToRight 1.2s ease forwards; -o-animation: fadeOutToRight 1.2s ease forwards; animation: fadeOutToRight 1.2s ease forwards; } .testimonial.swiper-slide-active .quote .name { opacity: 0; -webkit-animation: fadeInFromLeft 1.2s ease forwards; -moz-animation: fadeInFromLeft 1.2s ease forwards; -o-animation: fadeInFromLeft 1.2s ease forwards; animation: fadeInFromLeft 1.2s ease forwards; } .testimonial .quote .job { -webkit-animation: fadeOut 1s ease forwards; -moz-animation: fadeOut 1s ease forwards; -o-animation: fadeOut 1s ease forwards; animation: fadeOut 1s ease forwards; } .testimonial.swiper-slide-active .quote .job { opacity: 0; -webkit-animation: fadeIn 1s ease forwards; -moz-animation: fadeIn 1s ease forwards; -o-animation: fadeIn 1s ease forwards; animation: fadeIn 1s ease forwards; } .testimonial .quote blockquote { -webkit-animation: fadeOut 1s forwards; -moz-animation: fadeOut 1s forwards; -o-animation: fadeOut 1s forwards; animation: fadeOut 1s forwards; } .testimonial.swiper-slide-active .quote blockquote { opacity: 0; -webkit-animation: fadeInFromLeft 1s forwards; -moz-animation: fadeInFromLeft 1s forwards; -o-animation: fadeInFromLeft 1s forwards; animation: fadeInFromLeft 1s forwards; } .testimonials .quote .head { width:100%; float:left; } .testimonials .quote .name{ margin-top:78px; text-align:right; font-size:22px; font-family:Poppins, sans-serif; font-weight: 500; text-transform:uppercase; color: #2b2b2b; margin:auto 0; } .testimonials .quote .job, .carousel.testimonials-style2 .quote .job{ margin-top:0px; text-align:right; font-size:14px; font-family:Lato,sans-serif; font-weight: 400; display: block; } .testimonials .quote .job{ color: #333; } .testimonials .quote .name, .testimonials .quote .job { width:160px; vertical-align: top; display: block; text-align:left; } .vc_col-sm-6 .testimonials .quote .name, .vc_col-sm-6 .testimonials .quote .job { text-align:left; } .vc_col-sm-6 .testimonials .author { float:left; } .vc_col-sm-6 .testimonials-style1 .author{ left: calc(100% - 150px) !important; } .testimonials .quote .head .headimg { display:block; width:130px; height:130px; } .carousel.testimonials-style2 .swiper-slide{ padding:20px; box-sizing:border-box; } .carousel.testimonials-style2 .quote{ display:block; border: 1px solid #4a4a4a; border-radius:5px; background-color: #282828; margin-bottom: 10px; box-sizing:border-box !important; text-align: center; align-items: center; position:relative; transition: box-shadow 0.5s ease-in-out; } .carousel.testimonials-style2.skin-light .quote{ border: 1px solid #f3f3f3; background-color: #fff; } .carousel.testimonials-style2 .quote:hover{ box-shadow: 0px 14px 32px -7px rgba(33, 33, 33, 0.15); border: 1px solid #4a4a4a; border-radius:5px; } .carousel.testimonials-style2.skin-light .quote:hover{ box-shadow: 0px 14px 32px -7px rgba(33, 33, 33, 0.13); border: 1px solid #f3f3f3; } .testimonials-style2 .swiper-slide .image-container:before{ background: #ffffff00; box-shadow: 0px 0px 40px -2px rgba(160, 160, 160, 0.7); } .carousel.testimonials-style2 .swiper-slide.testimonial .quote .head{ position:relative; display:block; } .carousel.testimonials-style2 .quote .author{ float:none; margin:10px auto; } .carousel.testimonials-style2 .quote .author-image{ animation:none; border-radius:50%; margin:auto; height: 70px; width: 70px; display:grid; float: none; background-size: cover; } .carousel.testimonials-style2 .swiper-slide.testimonial .quote .head, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-active .quote .head, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-next .quote .head, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-prev .quote .head, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-duplicate-next .quote .head, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-duplicate-prev .quote .head { margin:23px 15%; position:relative; text-align:center; } .carousel.testimonials-style2 .name, .carousel.testimonials-style2 .quote .job{ animation:none !important; clear:both; position:relative; text-align:center; } .carousel.testimonials-style2 .name{ font-size:16px; font-weight:bold; } .carousel.testimonials-style2.skin-light .name{ color: #2b2b2b; } .carousel.testimonials-style2.skin-light .quote .job{ color:rgba(51,51,51,0.7); } .carousel.testimonials-style2 .quote blockquote { box-sizing: border-box; animation:none; top:0; padding: 20px 22px !important; width: 100%; font-style:italic; text-align:center; height: auto !important; margin:10px 0; overflow:hidden; } .carousel.testimonials-style2 .quote blockquote .swiper-wrapper .swiper-slide{ width:100% !important; } .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-active .quote .author-image, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-active .quote .name, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-active .quote .job, .carousel.testimonials-style2 .swiper-slide.testimonial.swiper-slide-visible.swiper-slide-active .quote blockquote { opacity:1 !important; } .carousel.testimonials-style2 .arrows-button-prev, .carousel.testimonials-style2 .arrows-button-next{ border-radius:50%; margin:0 -15px; vertical-align:middle; } /* Span12 / Span10 view */ .vc_col-sm-12 .testimonials, .vc_col-sm-10 .testimonials { padding: 0 100px 50px 100px; } .vc_col-sm-12 .carousel.testimonials-style2 .quote, .vc_col-sm-10 .carousel.testimonials-style2 .quote { display:block; } .vc_col-sm-12 .testimonials:before, .vc_col-sm-10 .testimonials:before { left:100px; } .vc_col-sm-12 .testimonials:after, .vc_col-sm-10 .testimonials:after { width: 190px; left:270px; } .vc_col-sm-12 .testimonials .quot-icon-container, .vc_col-sm-10 .testimonials .quot-icon-container { left:430px; } .vc_col-sm-12 .testimonials blockquote, .vc_col-sm-10 .testimonials blockquote { top:0; width:auto; margin-left:40%; } .vc_col-sm-12 .testimonials .author, .vc_col-sm-10 .testimonials .author { left:20%; } .vc_col-sm-12 .testimonials .quote .head, .vc_col-sm-10 .testimonials .quote .head { width: 340px; } .vc_col-sm-12 .testimonial .quote .name, .vc_col-sm-10 .testimonial .quote .name { -webkit-animation: fadeOutToLeft 1.2s ease forwards; -moz-animation: fadeOutToLeft 1.2s ease forwards; -o-animation: fadeOutToLeft 1.2s ease forwards; animation: fadeOutToLeft 1.2s ease forwards; } .vc_col-sm-12 .testimonial.swiper-slide-active .quote .name, .vc_col-sm-10 .testimonial.swiper-slide-active .quote .name { opacity: 0; -webkit-animation: fadeInFromRight 1.2s ease forwards; -moz-animation: fadeInFromRight 1.2s ease forwards; -o-animation: fadeInFromRight 1.2s ease forwards; animation: fadeInFromRight 1.2s ease forwards; } .vc_col-sm-12 .testimonial blockquote, .vc_col-sm-10 .testimonial blockquote { padding: 50px 0 10px 27px; float: none; } .vc_col-sm-12 .testimonials .quote .author-image, .vc_col-sm-10 .testimonials .quote .author-image { margin-right: 10px; } .vc_col-sm-12 .testimonials .arrows-button-prev, .vc_col-sm-10 .testimonials .arrows-button-prev, .vc_col-sm-12 .testimonials .arrows-button-next, .vc_col-sm-10 .testimonials .arrows-button-next { margin-right:auto; top: -20px; } .vc_col-sm-12 .testimonials .arrow-button-divider, .vc_col-sm-10 .testimonials .arrow-button-divider { top:-6px;; } /* animations*/ @-webkit-keyframes fadeInFromLeft { 0% {-webkit-transform: translateX(-30px); opacity: 0;} 100% {-webkit-transform: translateX(0px); opacity: 1;} } @keyframes fadeInFromLeft { 0% {transform: translateX(-30px); opacity: 0;} 100% {transform: translateX(0px); opacity: 1;} } @-webkit-keyframes fadeOutToLeft { 0% {-webkit-transform: translateX(0px); opacity: 1;} 100% {-webkit-transform: translateX(-30px); opacity: 0;} } @keyframes fadeOutToLeft { 0% {transform: translateX(0px); opacity: 1;} 100% {transform: translateX(-30px); opacity: 0;} } @-webkit-keyframes fadeOutToRight { 0% {-webkit-transform: translateX(0px); opacity: 1;} 100% {-webkit-transform: translateX(30px); opacity: 0;} } @keyframes fadeOutToRight { 0% {transform: translateX(0px); opacity: 1;} 100% {transform: translateX(30px); opacity: 0;} } @-webkit-keyframes fadeInFromRight { 0% {-webkit-transform: translateX(30px); opacity: 0;} 100% {-webkit-transform: translateX(0px); opacity: 1;} } @keyframes fadeInFromRight { 0% {-webkit-transform: translateX(30px); opacity: 0;} 100% {-webkit-transform: translateX(0px); opacity: 1;} } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } /*-----------------------------------------------------------------------------------*/ /* 59. Blog listing/Archive /*-----------------------------------------------------------------------------------*/ body.has-topbar { margin-top:32px; } /* type1 */ .pageTopSpace.type1 { padding-top:57px; } /* type2_3 */ .pageTopSpace.type2_3 { padding-top:125px; } /* type4_5_6 & type9 */ .pageTopSpace.type4_5_6 { padding-top:85px; } /* type9 */ .pageTopSpace.type9 { padding-top: 84px; } .singlePost { min-height: 100vh; } /* top space in Blog details */ .single.single-post .post > .post-media { margin-top:15px; } .single.single-post .span8 { padding: 0px !important; box-sizing: content-box; } .post-media img { width:100%; } .blog .post-media:not(.swiper-slide) img, .single-post .post-media div:not(.swiper-slide) img { width: 100%; display: block; max-width: 100%; margin: auto; } .single-post .post-media div:not(.swiper-slide) img.vertical-image, .blog .post-media:not(.swiper-slide) img.vertical-image { width: auto; } .post-meta .hr-extra-small.hr-margin-small { background-color:#073B87; height:5px; } .singlePost .flex-control-paging { visibility:hidden; } .page-title { text-align:left; color:#101010; font-size: 48px; line-height: 60px; font-weight:700; font-family:Poppins,sans-serif; margin-top:20px; margin-bottom:40px; } .post-media .flex-direction-nav .flex-prev, .post-media .flex-direction-nav .flex-next { border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } .bpSwiper:not(.disabled_swiper) { cursor: url(../img/cursor/carousel.png) 24 5, url(../img/cursor/carousel.cur), auto; } /*-----------------------------------------------------------------------------------*/ /* 60. Blog Single /*-----------------------------------------------------------------------------------*/ #blogSingle .post-tags .tagsTitle { font-weight:600; } #blogSingle span.post-categories, #blogSingle span.post-categories a, #blogSingle .post-date, #blogSingle span.post-info-separator, #blogSingle span.post-author a, #blogSingle .post-tags { font-size: 13px; font-weight: 500; font-family: Lato, serif; color: #4e4e4e; -moz-transition: color 300ms ease; -o-transition: color 300ms ease; -webkit-transition: color 300ms ease; transition: color 300ms ease; } #blogSingle span.post-author a:hover, #blogSingle span.post-categories a:hover { color:#073B87; text-decoration:none; } #blogSingle span.post-author:before{ margin-right: 7px; font-size: 12px; font-weight: 500; color: #4e4e4e; } #blogSingle .post-content{ font-size: 12px; font-weight: normal; font-family: Lato, serif; color: #737373; } #blogSingle .post-content .quotePostType { background-color: #272727; } #blogSingle .video-frame { height: auto; padding-bottom: 0; position: static; overflow: visible; margin-bottom: 0; } /* Blog detail Tag cloud*/ #blogSingle .post-tags { float: left; width: calc(100% - 218px); font-size: 14px; align-self:center; } #blogSingle .post-tags a { padding-right: 3px; color: #4e4e4e; -moz-transition: color 200ms ease; -o-transition: color 200ms ease; -webkit-transition: color 200ms ease; transition: color 200ms ease; } #blogSingle .post-tags a:hover { text-decoration: inherit; cursor: pointer; color:#073B87; } #pings, .commentsCount, .comment-reply-title{ font-family: Poppins, serif; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #262626; padding: 30px 0 0 0; margin:0; } .comment-meta cite, .comment-meta .author-tag{ font-size: 12px; font-family: Lato, serif; color: #363636; font-weight:500; } .comments-list .comment-date{ font-size: 12px; font-family: Lato, serif; color: #6a6a6a; font-weight:lighter; padding:0 12px; text-decoration:none; } .singlePost .post .comment-text p{ padding-top: 0px; font-weight: 500; } .comments-list .comment-text { margin-left: 80px; padding-bottom: 30px; } .comments-list .line { display: none; } .comments-list .comment-text p { font-size: 14px; } .comments-list li { border-bottom: 1px #e8e8e8 solid; } .comments-list li:last-child { border-bottom: 1px #fff solid; } .comments-list .children li:first-child { border-top: 1px solid #e8e8e8!important; } .comments-list .children li:last-child { border: transparent; } .comment-reply-title small a { font-family:Lato,sans-serif; text-decoration:none; position:absolute; right:75px; font-weight: 700; text-transform: uppercase; line-height: 25px; color: #073B87; -moz-transition: color .2s ease; -o-transition: color .2s ease; -webkit-transition: color .2s ease; transition: color .2s ease; font-size: 13px; padding-top: 10px; } .comments-wrap { margin-bottom: 20px; margin-top: 30px; } /* List */ .comments-list{ list-style: none !important; padding:0; margin:0; font-weight: 400; font-size: 12px; position:relative; } .comments-list ul { list-style: none !important; } .comments-list:before { height:200px; width:300px; background-color:green; } .comments-list .comment { padding:10px 0 0; position: relative; } .comments-list .comment-image { float: left; margin: 4px 14px 4px 4px; background-color: #FFF; border: 1px solid #e5e5e5; width: 60px; min-height: 60px; border-radius: 60px; } .comments-list .comment-image img { display:block; width:100%; border-radius: 60px; } #commentform p.logged-in-as a, .comment-edit-link, .comments-list .comment-reply-link { display: inline-block; position: relative; color:#073B87; text-transform: uppercase; line-height: 40px; text-decoration: none; -moz-transition: color .2s ease; -o-transition: color .2s ease; -webkit-transition: color .2s ease; transition: color .2s ease; font-size: 12px; font-family:Lato,sans-serif; font-weight: bold; } .comments-list ul { list-style: none; padding:0; } .comments-list .children { padding: 0 0 0 70px; } #commentform p.logged-in-as a:hover,.comment-edit-link:hover , .comments-list .comment-reply-link:hover { text-decoration:none; color:#363636; } .comments-list cite{ font-style: normal; } .comment-meta { color: #111; text-transform: uppercase; font-size: 12px; font-weight: 700; margin-top:15px; } .comment-meta a:hover { text-decoration:none; } #commentform .button.button-large { margin-top: 140px; bottom: 0; margin: 0; position: relative; display: inline-block; right:0px; cursor: pointer; } /*Swiper for gallery*/ .cblog .arrows-button-prev, .cblog .arrows-button-next, #blogSingle .arrows-button-prev, #blogSingle .arrows-button-next { border: 0 !important; width: 45px; height: 45px; display: block; position: absolute; z-index: 4; cursor: pointer; top: calc(50% - 25px); border: 1px solid #e3e3e3; color: #333; font-size: 16px!important; background: rgba(255,255,255,.5); font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; overflow: hidden; opacity: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: -1px; -webkit-transition: background .3s ease, opacity .3s ease; -moz-transition: background .3s ease, opacity .3s ease; -o-transition: background .3s ease, opacity .3s ease; transition: background .3s ease, opacity .3s ease; } .cblog .arrows-button-prev:hover, .cblog .arrows-button-next:hover, #blogSingle .arrows-button-prev:hover, #blogSingle .arrows-button-next:hover { background: rgba(255,255,255,1); } .cblog .arrows-button-next, #blogSingle .arrows-button-next { right:0; } .cblog .arrows-button-prev, #blogSingle .arrows-button-prev { left:0; } .cblog .arrows-button-prev:before, .cblog .arrows-button-prev:after, #blogSingle .arrows-button-prev:before, #blogSingle .arrows-button-prev:after { content: "\f177"; } .cblog .arrows-button-next:after, .cblog .arrows-button-next:before, #blogSingle .arrows-button-next:after, #blogSingle .arrows-button-next:before { content: "\f178"; } .cblog .arrows-button-prev:before, .cblog .arrows-button-prev:after, .cblog .arrows-button-next:after, .cblog .arrows-button-next:before, #blogSingle .arrows-button-prev:before, #blogSingle .arrows-button-prev:after, #blogSingle .arrows-button-next:after, #blogSingle .arrows-button-next:before { position: absolute; display: block; width: 100%; height: 100%; text-align: center; line-height: 45px; left: 0; -webkit-transition: left 0.3s ease,opacity .2s ease-in-out; -moz-transition: left 0.3s ease,opacity .2s ease-in-out; -o-transition: left 0.3s ease,opacity .2s ease-in-out; transition: left 0.3s ease,opacity .2s ease-in-out; } .cblog .arrows-button-prev:after, #blogSingle .arrows-button-prev:after { left:35px; opacity: 0; } .cblog .arrows-button-next:after, #blogSingle .arrows-button-next:after { left:-35px; opacity: 0; } .cblog .arrows-button-prev:hover:after, #blogSingle .arrows-button-prev:hover:after { left:0; opacity: 1; } .cblog .arrows-button-next:hover:after, #blogSingle .arrows-button-next:hover:after { left:0; opacity: 1; } .cblog .arrows-button-prev:hover:before, #blogSingle .arrows-button-prev:hover:before { left:-45px; opacity: 0; } .cblog .arrows-button-next:hover:before, #blogSingle .arrows-button-next:hover:before { left:45px; opacity: 0; } /*-----------------------------------------------------------------------------------*/ /* 61. Horizontal progress bar /*-----------------------------------------------------------------------------------*/ .progress_bar { margin-bottom:20px; height:35px; width:100%; border-radius:5px; position:relative; } .progress_bar .progress_title { position:absolute; top:0; left:0px; font-size:16px; line-height:32px; color:#252525; font-family:Lato,sans-serif; font-weight:500; z-index:1; } .progress_percent_value { position:absolute; top:0; left:15px; font-size:16px; line-height:32px; color:#252525; font-family:Lato,sans-serif; font-weight:600; z-index:1; width: 100%; text-align: right; opacity: 0; -moz-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1), left 850ms ease-in-out; -o-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1), left 850ms ease-in-out; -webkit-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1), left 850ms ease-in-out; transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1), left 850ms ease-in-out; } .progress_percent_value.complete { opacity: 1; left:0px; } .progress_bar .progressbar_percent { position:absolute; height:7px; left:0px; width:0; background-color: #073B87; bottom: 0; z-index: 1; -moz-transition: width 1.4s ease; -o-transition: width 1.4s ease; -webkit-transition: width 1.4s ease; transition: width 1.4s ease; } .progress_bar .progressbar_percent:after { content: ""; position: absolute; left:100%; margin-left: 3px; width: 5px; height: 5px; top: 1px; border-radius: 50%; background-color: #073B87; } .progress_bar .progressbar_holder:after { content:""; position: absolute; bottom: 0; width:100%; height: 1px; background-color: #bbb; margin-bottom:3px; } .footer-widgetized.light span.progress_percent_value, .footer-widgetized.light span.progress_title { color:#d0d0d0; } /*-----------------------------------------------------------------------------------*/ /* 63. text block /*-----------------------------------------------------------------------------------*/ .wpb_wrapper .wpb_text_column.wpb_content_element ul { list-style:none; } .wpb_wrapper .wpb_text_column.wpb_content_element ol { padding-left: 25px; list-style-type: decimal; } .wpb_wrapper p em { font-style: italic; } /*-----------------------------------------------------------------------------------*/ /* 64. Title seperator /*-----------------------------------------------------------------------------------*/ .vc_separator .vc_sep_holder { display: table-cell; height: 1px; position: relative; vertical-align: middle; width: 50%; } .vc_separator.separator_align_left .vc_sep_holder.vc_sep_holder_l { display:none; } .vc_separator.separator_align_right .vc_sep_holder { width:100%; } .vc_separator.separator_align_right .vc_sep_holder.vc_sep_holder_r { display:none; } .vc_separator.separator_align_left .vc_sep_holder { width:100%; } .vc_separator .title { padding:0 20px; letter-spacing:0; font-weight:300; margin: 0 20px; display: inline-block; border-left: 1px solid #888; border-right: 1px solid #888; line-height: 1.1em; } .vc_separator.disable .title { border:none; font-weight:400; } .vc_separator.separator_align_left .title { border-right:none; margin: 0; } .vc_separator.separator_align_center.disable .title { padding:0; } .vc_separator.separator_align_right .title { border-left:none; margin: 0; } .vc_separator.separator_align_left.disable .title { padding-left:0; border-left:none; } .vc_separator.separator_align_right.disable .title { border-right:none; padding-right:0; } /*-----------------------------------------------------------------------------------*/ /* 65. Post grid /*-----------------------------------------------------------------------------------*/ .vc_grid-container { padding-bottom:20px; } .vc_gitem_row .vc_gitem-col { padding: 25px !important; } .vc_gitem-post-data p { font-weight: 300 !important; } .vc_gitem-post-data h4 { color: #222 !important; font-size: 28px !important; font-family: "Lato", sans-serif !important; text-transform: uppercase; } .vc_gitem-post-data.vc_gitem-post-data-source-post_title div{ font-family: Lato, sans-serif !important; font-weight: 400 !important; font-size: 28px !important; text-transform: uppercase; } .blog-masonry-container a.quote-wrap-link { width: 100%; height: 100%; display:block; } .vc_gitem-zone-mini hr { margin: 20px 0; } .vc_gitem-zone a.vc_btn3.vc_gitem-link { background: transparent !important; color:#666; padding-left: 0 !important; position: relative; } .vc_gitem-zone a.vc_btn3.vc_gitem-link:hover { background: transparent !important; color:#222; } .vc_btn3-container { margin-bottom:0 !important; } /*navigation*/ .vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-point_dots .vc_grid-owl-dot span { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-dots .vc_grid-owl-dot span { width: 12px !important; height: 2px !important; margin: 10px 5px !important; -webkit-transition: width .3s ease, margin .3s ease,opacity .2s ease !important; -moz-transition: width .3s ease, margin .3s ease,opacity .2s ease !important; -o-transition: width .3s ease, margin .3s ease,opacity .2s ease !important; transition: width .3s ease, margin .3s ease,opacity .2s ease !important; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-point_dots .vc_grid-owl-dot.active span { width: 15px !important; margin: 10px 4px !important; } /* next/prev button */ .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next, .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev { background-color: #1f1f1f; width: 81px; height: 38px !important; z-index: 1; margin-top: -19px !important; opacity: 1 !important; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next { right: -50px !important; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev { left: -50px !important; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev:before, .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next:before { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; content: ""; width: 36px; height: 1px; border-top: 1px solid #fff; right: 20px; margin-left: 5px; -webkit-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; -moz-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; -o-transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; transition: width 0.3s ease, right 0.3s ease, left 0.3s ease, margin-left 0.3s ease; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev:after, .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next:after { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; content: ""; width: 0px; height: 1px; left: 0; margin-left: 20px; margin-top: -3px; border-style: solid; border-width: 3px 3px 3px 4px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next:after { border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255 ,0) rgba(255, 255, 255, 0) rgb(255, 255, 255); left: 40px; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next:hover:before { width: 55px; right: 35px; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-next:hover:after { left: 25px; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev:after { border-color: rgba(255, 255, 255, 0) rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(0, 0, 0 , 0); border-width: 3px 4px 3px 3px; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev:hover:before { width: 60px; right: -10px; } .vc_grid.vc_grid-owl-theme .vc_grid-owl-nav .vc_grid-owl-prev:hover:after { left: 25px; margin-left: 1px; } /* load more button */ a.vc_btn.vc_grid-btn-load_more { background-color: transparent !important; color:#000 !important; text-transform: uppercase !important; position: relative !important; font-size: 16px; letter-spacing: 5px; } a.vc_btn.vc_grid-btn-load_more:hover { color:#000 !important; } a.vc_grid-btn-load_more:before { position: absolute; top: 50%; content: ""; width: 0px; height: 1px; border-top: 1px solid #000; left: 0; margin-left: -10px; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: width 0.5s ease; -moz-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.5s ease; } a.vc_grid-btn-load_more:hover:before { width: 115%; } /*-----------------------------------------------------------------------------------*/ /* 66. Newsletters /*-----------------------------------------------------------------------------------*/ /* MailPoet */ .ep-newsletter { overflow: hidden; padding-top:15px; padding-bottom:15px; } .ep-newsletter p.wysija-paragraph { width:calc(100% - 140px); float:left; position: relative; } .ep-newsletter .widget_wysija .wysija-required{ color:#C74E4E; } .ep-newsletter .widget_wysija_cont p label { position: absolute; top: -25px; left:30px; } .ep-newsletter .formError .formErrorContent{ display:none; } .ep-newsletter .widget_wysija_cont .wysija-submit { margin-top: 12px; display: inline-block; position: absolute; font-weight: bold; background-color: #1e1e1e; color: #FFF; width: auto; min-width: 125px; margin-right:15px; line-height: 34px; outline: none; -moz-transition: color .4s ease,background-color .35s ease; -o-transition: color .4s ease,background-color .35s ease; -webkit-transition: color .4s ease,background-color .35s ease; transition: color .4s ease,background-color .35s ease; } .ep-newsletter.lightStyle .widget_wysija_cont .wysija-submit { color:#fff; border-color:#fff; } .ep-newsletter .widget_wysija_cont .wysija-submit:hover { border-color: #073B87; color: #073B87; } .ep-newsletter p.wysija-paragraph input { height: 38px; border: none; background-color: #f4f4f4; width: calc(100% - 45px); float: right; margin-right: 15px; color: #333333; border: transparent solid; border-width: 0px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:500; } .ep-newsletter p.wysija-paragraph input:focus { color: #262626; } .ep-newsletter .widget_wysija_cont .updated, .ep-newsletter .widget_wysija_cont .error, .ep-newsletter .widget_wysija_cont .xdetailed-errors { font-size:12px; font-family:Poppins, sans-serif; } /* MailChimp */ .mc4wp-form-fields input[type="email"] { height: 38px; padding-left: 15px; margin-right: 5px; border: none; background-color: #f4f4f4; width: 60%; float: left; color:#d3d3d3; font-weight: lighter; } .mc4wp-form-fields input[type="submit"] { display: inherit; height: 40px; border: solid 2px #363636; font-weight: bold; color: #1e1e1e; width: 30%; max-width: 140px; min-width:100px; } .mc4wp-form-fields p { display: inline; margin: 0px !important; } .mc4wp-form-fields label { display:none; } /* newsletter widget */ .widget.widget_wysija input[type='text']{ background-color: #f9f9f9; border-bottom: transparent; font-family: Poppins,sans-serif; padding: 0 25px; border-radius: 0; font-weight: 400; border-left: none; border-right: none; border-top: none; color: #272727; height: 38px; line-height: 17px; font-size: 13px; width: 90%; } .toggleSidebar .widget.widget_wysija input[type='text'] { width: 75%; } .widget_wysija_cont .wysija-submit { color: #252525; border: 2px solid #252525; border-radius:0; padding: 0 20px; line-height: 28px; min-height: 28px; margin-top: 32px; -moz-transition: all .5s ease; -o-transition: all .5s ease; -webkit-transition: all .5s ease; transition: all .5s ease; } .widget .widget_wysija_cont .wysija-submit { border-radius: 20px; } .widget_wysija_cont .wysija-submit:hover { color: #fff !important; border: 2px solid #363636 !important; } .ep-newsletter.lightStyle .widget_wysija_cont .wysija-submit:hover { color: #363636 !important; background-color: #fff !important; border: 2px solid #fff !important; } .footer-widgetized.light input.wysija-submit.wysija-submit-field { color: #ffffff; border-color: #ffffff; } .footer-widgetized.light .widget_wysija_cont .wysija-submit:hover { color: #272727 !important; background-color: #ffffff !important; border: 2px solid #ffffff !important; } /*-----------------------------------------------------------------------------------*/ /* 67. Snap to scroll /*-----------------------------------------------------------------------------------*/ body.snap-to-scroll { overflow: hidden; } body.snap-to-scroll #main { padding-top:0 !important; } body.snap-to-scroll .pageTopSpace { padding-top: 0 !important; } body.snap-to-scroll #pageHeight { height: 100vh; min-height: 100vh; background-color:#111; } #snap-to-scroll-nav { position: fixed; height: 100%; width: 25px; padding: 100px 0; box-sizing: border-box; right: 0; top: 0; display: -webkit-flex; -webkit-justify-content: center; display: flex; justify-content: center; flex-flow: column; z-index: 1; align-items: flex-end; -webkit-align-items: flex-end; } #snap-to-scroll-nav:before { content: ""; position: absolute; width: 40%; height: 100%; right:0; background: #fff; opacity: .15; } #snap-to-scroll-nav span { width: 100%; -webkit-flex: 1; flex: 1; position: relative; cursor: pointer; } #snap-to-scroll-nav span:after, #snap-to-scroll-nav span:before { content: ""; position: absolute; width: 0; height: 100%; right:0; background: #fff; opacity: .4; -webkit-transition: width .3s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .3s cubic-bezier(0.55, 0.31, 0.15, 0.93); -moz-transition: width .3s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .3s cubic-bezier(0.55, 0.31, 0.15, 0.93); -o-transition: width .3s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .3s cubic-bezier(0.55, 0.31, 0.15, 0.93); transition: width .3s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .3s cubic-bezier(0.55, 0.31, 0.15, 0.93); } #snap-to-scroll-nav span:after { background: #fff; } .snap-to-scroll-dark-nav #snap-to-scroll-nav:before, .snap-to-scroll-dark-nav #snap-to-scroll-nav span:before { background: #222; } #snap-to-scroll-nav span:before { width:40%; } #snap-to-scroll-nav span:after { opacity: .7; } #snap-to-scroll-nav span:hover:after { width:80%; } #snap-to-scroll-nav span:hover:before { width:0%; } #snap-to-scroll-nav span.active:after { width:80%; opacity: 1; } body.snap-to-scroll .parallax .parallax-img, body.snap-to-scroll .vc_videowrap { height: 100% !important; max-height: 100%; top:0 !important; } body.snap-to-scroll .footer-bottom { position: absolute; bottom: 0; z-index:1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } body.snap-to-scroll .last-section-before-footer.visible-footer .section-container, body.snap-to-scroll .last-section-before-footer.visible-footer .section-container .section-content-container, body.snap-to-scroll .footer-bottom, body.snap-to-scroll .footer-widgetized .section-container, body.snap-to-scroll .footer-widgetized .section-container .section-content-container { -webkit-transition:-webkit-transform .6s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .6s cubic-bezier(0.55, 0.31, 0.15, 0.93); -moz-transition:-moz-transform .6s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .6s cubic-bezier(0.55, 0.31, 0.15, 0.93); -ms-transition:-ms-transform .6s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .6s cubic-bezier(0.55, 0.31, 0.15, 0.93); transition:transform .6s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .6s cubic-bezier(0.55, 0.31, 0.15, 0.93); } body.snap-to-scroll.logged-in.admin-bar .footer-bottom.showfooter { bottom:32px; } body.snap-to-scroll .ep-section { height: 100vh; min-height: 100vh; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background-color: transparent !important; } body.snap-to-scroll .ep-section.footer-widgetized { top:auto; bottom: 0; } body.snap-to-scroll .ep-section.visible { opacity: 1 !important; } body.snap-to-scroll .section-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: visible; overflow: hidden; background:#eee; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition:opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); -moz-transition:opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); -o-transition:opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); transition:opacity 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); } body.snap-to-scroll .section-container .section-content-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: visible; overflow: hidden; z-index: 1; -webkit-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; -moz-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; -o-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93), opacity .7s cubic-bezier(0.55, 0.31, 0.15, 0.93) .3s; -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); opacity: 1; } body.snap-to-scroll .section-container .section-content-container > .footer-widgetized-wrap { padding:35px 0; } body.snap-to-scroll .section-container.translateNone { opacity: 1; -webkit-transform: translateY(0) scale(1); -moz-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } body.snap-to-scroll .section-container.translateDown { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } body.snap-to-scroll .section-container.translateUp { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } body.snap-to-scroll .section-container.scaleDown { opacity: 0; -webkit-transform: scale(0.9) translateY(0); -moz-transform: scale(0.9) translateY(0); -ms-transform: scale(0.9) translateY(0); -o-transform: scale(0.9) translateY(0); transform: scale(0.9) translateY(0); } body.snap-to-scroll .last-section-before-footer .section-container.scaleDown { opacity: 1; -moz-transform: translateY(-55px); -ms-transform: translateY(-55px); -o-transform: translateY(-55px); -webkit-transform: translateY(-55px); transform: translateY(-55px); } body.snap-to-scroll .last-section-before-footer .section-container .section-content-container:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background: #000; z-index: 1; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } body.snap-to-scroll .last-section-before-footer .section-container.scaleDown .section-content-container:before { opacity: .25; } body.snap-to-scroll.snap-to-scroll-init .section-container > .interactive-background-image, body.snap-to-scroll.snap-to-scroll-init .showcase > .showcase-backgrounds, body.snap-to-scroll.snap-to-scroll-init .section-container .parallax-img, body.snap-to-scroll.snap-to-scroll-init .section-container .background-img, body.snap-to-scroll.snap-to-scroll-init .section-container .videoWrap, body.snap-to-scroll.snap-to-scroll-init .section-container .section-content-container, body.snap-to-scroll.snap-to-scroll-init .section-container { -webkit-transition-duration:0.01s !important; -ms-transition-duration:0.01s !important; -o-transition-duration:0.01s !important; transition-duration:0.01s !important; transition-delay:0s !important; } body.snap-to-scroll .ep-section.parallax.sectionOverlay:after { display: none; } body.snap-to-scroll .sectionOverlay .section-container:after { position: absolute; top: 0; left: 0; opacity: 0.5; content: ''; height: 100%; width: 100%; z-index: 0 !important; pointer-events: none; } /* Interactive background */ body.snap-to-scroll .section-container > .interactive-background-image, body.snap-to-scroll .showcase > .showcase-backgrounds, body.snap-to-scroll .section-container .parallax-img, body.snap-to-scroll .section-container .background-img, body.snap-to-scroll .section-container .videoWrap { -webkit-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); -moz-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); -o-transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); transition: transform 1s cubic-bezier(0.55, 0.31, 0.15, 0.93); -webkit-transform:translateY(0) scale3d(1.15,1.15,1.15); -moz-transform:translateY(0) scale3d(1.15,1.15,1.15); -ms-transform:translateY(0) scale3d(1.15,1.15,1.15); -o-transform:translateY(0) scale3d(1.15,1.15,1.15); transform:translateY(0) scale3d(1.15,1.15,1.15); } body.snap-to-scroll .section-container.translateDown > .interactive-background-image, body.snap-to-scroll .section-container.translateDown .showcase > .showcase-backgrounds { -webkit-transform:translateY(-75%) scale3d(1.15,1.15,1.15); -moz-transform:translateY(-75%) scale3d(1.15,1.15,1.15); -ms-transform:translateY(-75%) scale3d(1.15,1.15,1.15); -o-transform:translateY(-75%) scale3d(1.15,1.15,1.15); transform:translateY(-75%) scale3d(1.15,1.15,1.15); } body.snap-to-scroll .section-container.translateUp > .interactive-background-image, body.snap-to-scroll .section-container.translateUp .showcase > .showcase-backgrounds { -webkit-transform:translateY(75%) scale3d(1.15,1.15,1.15); -moz-transform:translateY(75%) scale3d(1.15,1.15,1.15); -ms-transform:translateY(75%) scale3d(1.15,1.15,1.15); -o-transform:translateY(75%) scale3d(1.15,1.15,1.15); transform:translateY(75%) scale3d(1.15,1.15,1.15); } /* normal parallax + video */ body.snap-to-scroll .section-container .parallax-img, body.snap-to-scroll .section-container .background-img, body.snap-to-scroll .section-container .videoWrap { -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } body.snap-to-scroll .section-container.translateDown .parallax-img, body.snap-to-scroll .section-container.translateDown .background-img, body.snap-to-scroll .section-container.translateDown .videoWrap, body.snap-to-scroll .section-container.translateDown .showcase-content-container, body.snap-to-scroll .section-container.translateDown .section-content-container { -webkit-transform:translateY(-75%); -moz-transform:translateY(-75%); -ms-transform:translateY(-75%); -o-transform:translateY(-75%); transform:translateY(-75%); } /* Special style for footer widget */ body.snap-to-scroll .footer-widgetized .section-container.translateDown .section-content-container { -webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0); } body.snap-to-scroll .section-container.translateUp .parallax-img, body.snap-to-scroll .section-container.translateUp .background-img, body.snap-to-scroll .section-container.translateUp .videoWrap, body.snap-to-scroll .section-container.translateUp .showcase-content-container, body.snap-to-scroll .section-container.translateUp .section-content-container { -webkit-transform:translateY(75%); -moz-transform:translateY(75%); -ms-transform:translateY(75%); -o-transform:translateY(75%); transform:translateY(75%); } body.snap-to-scroll .section-container.ep-section-showcase .container { padding-top:0 !important; } body.snap-to-scroll .section-container.ep-section-showcase .section-content-container { -webkit-transform:initial; -moz-transform:initial; -ms-transform:initial; -o-transform:initial; transform:initial; opacity: 1!important; } body.snap-to-scroll .section-container.translateDown .showcase-content-container, body.snap-to-scroll .section-container.translateUp .showcase-content-container, body.snap-to-scroll .section-container.translateDown .section-content-container, body.snap-to-scroll .section-container.translateUp .section-content-container { opacity: 0; } body.snap-to-scroll .videoHome.sectionOverlay , body.snap-to-scroll .ep-section.fullWidth { margin:0 !important; padding:0 !important; } /*-----------------------------------------------------------------------------------*/ /* 68. Instagram feed /*-----------------------------------------------------------------------------------*/ .instagram-feed { overflow: hidden; position:relative; } .instagram-feed .header { margin-bottom: 25px; display: inline-block; } .instagram-feed .header img { border-radius: 50%; height: 50px; width: 50px; vertical-align: bottom; } .instagram-feed .header .info-container { display: initial; } .instagram-feed .header .user { padding-left:13px; display: inline-block; } .instagram-feed .header .fallowme { color:#333; font-weight: bold; display: block; text-decoration: none; } .instagram-feed .header .username { color:#575757; font-weight: 400; } /* instagram feed in small spans*/ .instagram-feed .header .username-link { display: none; } .vc_col-sm-4 .instagram-feed .header .info, .vc_col-sm-3 .instagram-feed .header .info, .span3 .instagram-feed .header .info { float: none; display: inline-block; } .vc_col-sm-4 .instagram-feed .info span, .vc_col-sm-3 .instagram-feed .info span, .span3 .instagram-feed .info span { border-right: none; font-size: 12px; font-weight: 400; color: #a0a0a0; } .toggleSidebar .instagram-feed .user, .vc_col-sm-4 .instagram-feed .header .fallowme, .vc_col-sm-4 .instagram-feed .header .user > .username, .vc_col-sm-3 .instagram-feed .header .fallowme, .vc_col-sm-3 .instagram-feed .header .user > .username, .span3 .instagram-feed .header .fallowme, .span3 .instagram-feed .header .user > .username { display: none; } .vc_col-sm-4 .instagram-feed .header .username-link, .vc_col-sm-3 .instagram-feed .header .username-link, .span3 .instagram-feed .header .username-link { display:none; } .vc_col-sm-4 .instagram-feed .header .username-link span , .vc_col-sm-3 .instagram-feed .header .username-link span , .span3 .instagram-feed .header .username-link span { color: #333; } .vc_col-sm-4 .instagram-feed .header .info-container > .user, .vc_col-sm-3 .instagram-feed .header .info-container > .user, .span3 .instagram-feed .header .info-container > .user { float: none; display: block; padding: 0; } #woocommerce-sidebar .instagram-feed .header .info-container > .user, .main-sidebar-container .instagram-feed .header .info-container > .user, .toggleSidebar .instagram-feed .header .info-container > .user { margin-left: 45px; margin-top: -38px; margin-bottom: 25px; } .vc_col-sm-4 .instagram-feed .header .info-container, .vc_col-sm-3 .instagram-feed .header .info-container, .span3 .instagram-feed .header .info-container { float: left; display: inline-block; margin-left:15px; margin-top: 15px; } .vc_col-sm-4 .instagram-feed .header .info .value, .vc_col-sm-3 .instagram-feed .header .info .value, .span3 .instagram-feed .header .info .value { font-size: 12px; line-height: 13px; color: #444444; } .vc_col-sm-4 .instagram-feed .header img, .vc_col-sm-3 .instagram-feed .header img, .span3 .instagram-feed .header img { float: left; } .vc_col-sm-4 .instagram-feed ul li .like, .vc_col-sm-4 .instagram-feed ul li .comment, .vc_col-sm-3 .instagram-feed ul li .like, .vc_col-sm-3 .instagram-feed ul li .comment, .span3 .instagram-feed ul li .like, .span3 .instagram-feed ul li .comment { font-size:0; } .vc_col-sm-4 .instagram-feed ul li .like + .comment, .vc_col-sm-3 .instagram-feed ul li .like + .comment, .span3 .instagram-feed ul li .like + .comment { padding-left:7px; } .vc_col-sm-4 .instagram-feed ul li .like:before, .vc_col-sm-4 .instagram-feed ul li .comment:before, .vc_col-sm-3 .instagram-feed ul li .like:before, .vc_col-sm-3 .instagram-feed ul li .comment:before, .span3 .instagram-feed ul li .like:before, .span3 .instagram-feed ul li .comment:before { font-size:13px; } .vc_col-sm-4 .instagram-feed .arrows-button-next, .vc_col-sm-4 .instagram-feed .arrows-button-prev, .vc_col-sm-3 .instagram-feed .arrows-button-next, .vc_col-sm-3 .instagram-feed .arrows-button-prev, .span3 .instagram-feed .arrows-button-next, .span3 .instagram-feed .arrows-button-prev { opacity: 0 !important; } .vc_col-sm-4 .instagram-feed:hover .arrows-button-next, .vc_col-sm-4 .instagram-feed:hover .arrows-button-prev, .vc_col-sm-3 .instagram-feed:hover .arrows-button-next, .vc_col-sm-3 .instagram-feed:hover .arrows-button-prev, .span3 .instagram-feed:hover .arrows-button-next, .span3 .instagram-feed:hover .arrows-button-prev { opacity: 1 !important; } .instagram-feed .info { float:right; position:absolute; right:0; top:0; } .instagram-feed .info span{ color:#6f6f6f; font-size:13px; font-family: lato,sans-serif; display: inline-block; padding: 2px 10px 1px; border-right:1px solid #e9e9e9; text-align: center; } .footer-widgetized.light .instagram-feed .info span { color:#C5C5C5; } .instagram-feed .info > span:last-of-type{ border:none; } .instagram-feed .info .value{ font-weight: bold; display: block; color:#444; border:none; padding:0; font-size:15px; } .footer-widgetized.light .instagram-feed .info .value { color:#faf5f5; } .instagram-feed ul { float: left; width: 100%; display: block; position: relative; } .sidebar.widget-area .instagram-feed ul { float: none; overflow:hidden; } .instagram-feed ul li { display: inline-block; position: relative; float: left; overflow: hidden; } .instagram-feed li .content { position: absolute; width: 100%; height: 40px; top: 50%; left: 0; margin-top: -20px; line-height: 40px; color: #fff; text-align: center; -webkit-animation: out .4s ease-in-out; -moz-animation: out .4s ease-in-out; -o-animation: out .4s ease-in-out; animation: out .4s ease-in-out; opacity: 0; } .instagram-feed li:hover .content { -webkit-animation: in .4s ease-in-out forwards; -moz-animation: in .4s ease-in-out forwards; -o-animation: in .4s ease-in-out forwards; animation: in .4s ease-in-out forwards; } @-webkit-keyframes out { from { -webkit-transform: translateY(0); opacity:1; } to { -webkit-transform: translateY(-50%); opacity:0;} } @keyframes out { from { transform: translateY(0); opacity:1; } to { transform: translateY(-50%); opacity:0;} } @-webkit-keyframes in { 0% { -webkit-transform: translateY(50%);opacity:0; } 100% { -webkit-transform: translateY(0); opacity:1;} } @keyframes in { 0% { transform: translateY(50%);opacity:0; } 100% { transform: translateY(0); opacity:1;} } .instagram-feed li .hover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transition: opacity .6s ease; -moz-transition: opacity .6s ease; -o-transition: opacity .6s ease; transition: opacity .6s ease; } .instagram-feed li:hover .hover { opacity: .8; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } .instagram-feed ul li a { width:100%; position: relative; backface-visibility:visible; display: block; overflow:hidden; } .instagram-feed ul li img, .instagram-feed ul li video { width: 100% !important; display: block; height: 100% !important; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .5s ease, opacity .4s cubic-bezier(.445,.050,.55,.95); -moz-transition: -moz-transform .5s ease, opacity .4s cubic-bezier(.445,.050,.55,.95); -o-transition: transform .5s ease, opacity .4s cubic-bezier(.445,.050,.55,.95); transition: transform .5s ease, opacity .4s cubic-bezier(.445,.050,.55,.95); backface-visibility: visible !important; } .instagram-feed ul li:hover img, .instagram-feed ul li:hover video { -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07); transform: scale(1.07); } .vc_col-sm-4 .instagram-feed ul li:hover img, .vc_col-sm-4 .instagram-feed ul li:hover video, .vc_col-sm-3 .instagram-feed ul li:hover img, .vc_col-sm-3 .instagram-feed ul li:hover video, .span3 .instagram-feed ul li:hover img, .span3 .instagram-feed ul li:hover video { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .instagram-feed ul li .like + .comment { padding-left: 15px; } .instagram-feed ul li .like, .instagram-feed ul li .comment { position: relative; font-size:14px; z-index: 12; } .widget_epico_instagram .instagram-feed .column-4 li .content, .widget_epico_instagram .instagram-feed .column-5 li .content, .widget_epico_instagram .instagram-feed .column-6 li .content { display:none; } .instagram-feed ul li .like:before, .instagram-feed ul li .comment:before { font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-right: 4px; } .instagram-feed ul li .like:before { content: "\f08a"; } .instagram-feed ul li .comment:before { content: "\e7d6"; } /* Instagram columns with 10px as gutter */ .instagram-feed ul.column-6 li { margin: 0 10px 10px 0; width: calc(16.666666666666% - 8.3333333333px); height:auto; } .instagram-feed ul.column-5 li { margin: 0 10px 10px 0; width: calc(20% - 8px); height:auto; } .instagram-feed ul.column-4 li { margin: 0 10px 10px 0; width: calc(25% - 7.5px); height:auto; } .instagram-feed ul.column-3 li { margin: 0 10px 10px 0; width: calc(33.33333333333333333333% - 6.6666666px); height:auto; } .instagram-feed ul.column-2 li { margin: 0 10px 10px 0; width: calc(50% - 5px); height:auto; } .instagram-feed ul.column-1 li { margin: 0 0 10px 0; width: 100%; height:auto; } .instagram-feed ul.column-6:not(.carousel) li:nth-child(6n), .instagram-feed ul.column-5:not(.carousel) li:nth-child(5n), .instagram-feed ul.column-4:not(.carousel) li:nth-child(4n), .instagram-feed ul.column-3:not(.carousel) li:nth-child(3n), .instagram-feed ul.column-2:not(.carousel) li:nth-child(2n), .instagram-feed ul.column-1:not(.carousel) li:nth-child(n) { margin: 0 0px 10px 0; } /* Instagram columns with 5px as gutter */ .vc_col-sm-4 .instagram-feed ul.column-6 li, .vc_col-sm-3 .instagram-feed ul.column-6 li, .span3 .instagram-feed ul.column-6 li { margin: 0 5px 5px 0; width: calc(16.666666666666% - 4.16666667px); height:auto; } .vc_col-sm-4 .instagram-feed ul.column-5 li, .vc_col-sm-3 .instagram-feed ul.column-5 li, .span3 .instagram-feed ul.column-5 li { margin: 0 5px 5px 0; width: calc(20% - 4px); height:auto; } .vc_col-sm-4 .instagram-feed ul.column-4 li, .vc_col-sm-3 .instagram-feed ul.column-4 li, .span3 .instagram-feed ul.column-4 li { margin: 0 5px 5px 0; width: calc(25% - 3.75px); height:auto; } .vc_col-sm-4 .instagram-feed ul.column-3 li, .vc_col-sm-3 .instagram-feed ul.column-3 li, .span3 .instagram-feed ul.column-3 li { margin: 0 5px 5px 0; width: calc(33.33333333333333333333% - 3.333333333333333px); height:auto; } .vc_col-sm-4 .instagram-feed ul.column-2 li, .vc_col-sm-3 .instagram-feed ul.column-2 li, .span3 .instagram-feed ul.column-2 li { margin: 0 5px 5px 0; width: calc(50% - 2.5px); height:auto; } .vc_col-sm-4 .instagram-feed ul.column-1 li, .vc_col-sm-3 .instagram-feed ul.column-1 li, .span3 .instagram-feed ul.column-1 li { margin: 0 0 5px 0; width: 100%; height:auto; } .vc_col-sm-4 .instagram-feed ul.column-6:not(.carousel) li:nth-child(6n), .vc_col-sm-4 .instagram-feed ul.column-5:not(.carousel) li:nth-child(5n), .vc_col-sm-4 .instagram-feed ul.column-4:not(.carousel) li:nth-child(4n), .vc_col-sm-4 .instagram-feed ul.column-3:not(.carousel) li:nth-child(3n), .vc_col-sm-4 .instagram-feed ul.column-2:not(.carousel) li:nth-child(2n), .vc_col-sm-4 .instagram-feed ul.column-1:not(.carousel) li:nth-child(n) , .vc_col-sm-3 .instagram-feed ul.column-6:not(.carousel) li:nth-child(6n), .vc_col-sm-3 .instagram-feed ul.column-5:not(.carousel) li:nth-child(5n), .vc_col-sm-3 .instagram-feed ul.column-4:not(.carousel) li:nth-child(4n), .vc_col-sm-3 .instagram-feed ul.column-3:not(.carousel) li:nth-child(3n), .vc_col-sm-3 .instagram-feed ul.column-2:not(.carousel) li:nth-child(2n), .vc_col-sm-3 .instagram-feed ul.column-1:not(.carousel) li:nth-child(n) , .span3 .instagram-feed ul.column-6:not(.carousel) li:nth-child(6n), .span3 .instagram-feed ul.column-5:not(.carousel) li:nth-child(5n), .span3 .instagram-feed ul.column-4:not(.carousel) li:nth-child(4n), .span3 .instagram-feed ul.column-3:not(.carousel) li:nth-child(3n), .span3 .instagram-feed ul.column-2:not(.carousel) li:nth-child(2n), .span3 .instagram-feed ul.column-1:not(.carousel) li:nth-child(n) { margin: 0 0px 5px 0; } /* Instagram columns without gutter */ .instagram-feed ul.column-6.no-gutter li { width:16.666666666666% !important; } .instagram-feed ul.column-5.no-gutter li { width:20% !important; } .instagram-feed ul.column-4.no-gutter li { width:25% !important; } .instagram-feed ul.column-3.no-gutter li { width:33.3333333% !important; } .instagram-feed ul.column-2.no-gutter li { width:50% !important; } .instagram-feed ul.column-1.no-gutter li { width:100% !important; } .instagram-feed ul.no-gutter li{ margin: 0 !important } .instagram-feed ul.carousel li { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: block; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: baseline; align-items: baseline; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; } /*-----------------------------------------------------------------------------------*/ /* 69. Gallery /*-----------------------------------------------------------------------------------*/ .gl-open { overflow: hidden; } .lightStyle .lg-actions .lg-next,.lightStyle .lg-actions .lg-prev{ background-color: #848484 !important; } .lg-toolbar { z-index: 100081!important; background-color: transparent!important; height: 60px !important; } .lg-sub-html { color: #fff!important; z-index: 100080!important; background-color: transparent !important; opacity:1; padding:0px!important; } .lg-sub-html h4 { margin: 0!important; font-size: 14px!important; font-family: Poppins, sans-serif !important; font-weight: bold !important; color: #fff!important; width: 100% !important; background-color: rgba(0,0,0,0.3); padding: 17px 40px 15px 40px; -webkit-transition: opacity 0.35s ease-in!important; -moz-transition: opacity 0.35s ease-in!important; -o-transition: opacity 0.35s ease-in!important; transition: opacity 0.35s ease-in!important; } .lightStyle .lg-sub-html h4 { color: #1E1E1E!important; background-color: rgba(255,255,255,0.5); } .lg-sub-html p { font-size: 12px!important; font-family: Lato, sans-serif !important; font-weight: normal !important; margin: 0!important; color: #fff!important; width: 100% !important; background-color: rgba(0,0,0,0.3); padding: 0px 40px 10px 40px; -webkit-transition: opacity 0.35s ease-in!important; -moz-transition: opacity 0.35s ease-in!important; -o-transition: opacity 0.35s ease-in!important; transition: opacity 0.35s ease-in!important; } .lightStyle .lg-sub-html p{ color: #1E1E1E!important; background-color: rgba(255,255,255,0.5); } .lg-outer.lg-pull-caption-up .lg-sub-html { -moz-transition: bottom .25s cubic-bezier(0,0,.25,1) 0s !important; -o-transition: bottom .25s cubic-bezier(0,0,.25,1) 0s !important; -webkit-transition: bottom .25s cubic-bezier(0,0,.25,1) 0s !important; transition: bottom .25s cubic-bezier(0,0,.25,1) 0s !important; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 60px!important; } #lg-counter { color: #fff!important; font-size: 14px!important; padding-top: 0px !important; font-family: Poppins, sans-serif !important; z-index: 100081!important; margin-top: 20px; } .lightStyle #lg-counter { color: #000!important; } .lightStyle .lg-icon { color: #1e1e1e!important; } .lg-outer .lg-item.lg-current { z-index: 100030!important; } a#lg-download { display: none; } .lg-backdrop{ z-index:100001 !important; opacity: 0.85!important; background-color: #000 !important; } .galleryBack{ background-color: #fff !important; } .lg-outer{ z-index:100010 !important; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object{ cursor: -webkit-grab; } .lg-outer .lg-toogle-thumb { background-color: transparent!important; top: -46px!important; color: #fff!important; -moz-transition: opacity 0.3s ease!important; -o-transition: opacity 0.3s ease!important; -webkit-transition: opacity 0.3s ease!important; transition: opacity 0.3s ease!important; } .lg-outer .lg-toogle-thumb:hover { opacity:.8; } .lg-img-wrap img { object-fit: contain; } #lg-counter #lg-counter-current { margin-right:-2px; } #lg-counter #lg-counter-all { margin-left:-2px; } .lg-outer .lg-thumb-outer { bottom: -60px !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; -webkit-transform: none !important; transform: none !important; -moz-transition: bottom.25s cubic-bezier(0,0,.25,1) 0s!important; -o-transition: bottom.25s cubic-bezier(0,0,.25,1) 0s!important; -webkit-transition: bottom.25s cubic-bezier(0,0,.25,1) 0s!important; transition: bottom.25s cubic-bezier(0,0,.25,1) 0s!important; } .lg-outer.lg-thumb-open .lg-thumb-outer { bottom: 0 !important; } .lg-outer .lg-item:not(.lg-complete):before,.lg-outer .lg-item:not(.lg-complete):after { content: ""; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -10px; width: 9px; height: 9px; border-radius: 50%; margin: 0 2px; -webkit-animation: threeBounceDelay 1.4s infinite ease-in-out; animation: threeBounceDelay 1.4s infinite ease-in-out; animation-fill-mode: both; background-color: #fff; display: inline-block; z-index: 1; } .lg-outer .lg-img-wrap:before, .lg-outer .lg-item:not(.lg-complete):before { margin-left: 10px !important; -webkit-animation-delay: -.32s!important; -moz-animation-delay: -.32s!important; -o-animation-delay: -.32s!important; animation-delay: -.32s!important; } .lg-outer .lightStyle .lg-item:not(.lg-complete):before, .lg-outer .lightStyle .lg-item:not(.lg-complete):after { background-color:#272727; } /* Banner effect for gallery */ .galleryItem a img { display: none; } .postphoto:hover .pSlide, .postphoto:hover .portfolioswiper { -webkit-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -moz-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -ms-transform: scaleX(1.05) scaleY(1.05) translateZ(0); -o-transform: scaleX(1.05) scaleY(1.05) translateZ(0); transform: scaleX(1.05) scaleY(1.05) translateZ(0); } .postphoto .pSlide, .postphoto .portfolioswiper { width: 100%; display: block; background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; -webkit-transform: scaleX(1) scaleY(1) translateZ(0); -moz-transform: scaleX(1) scaleY(1) translateZ(0); -ms-transform: scaleX(1) scaleY(1) translateZ(0); -o-transform: scaleX(1) scaleY(1) translateZ(0); transform: scaleX(1) scaleY(1) translateZ(0); -moz-transition: opacity 1s ease,transform .6s ease, background-color ease .4s; -o-transition: opacity 1s ease,transform .6s ease, background-color ease .4s; -webkit-transition: opacity 1s ease,transform .6s ease, background-color ease .4s; transition: opacity 1s ease,transform .6s ease, background-color ease .4s; } .lg-outer .lg-thumb-item{ border-radius:0!important; width: auto !important; border: none !important; margin: 0 !important; -webkit-transition: opacity 0.3s ease!important; -moz-transition: opacity 0.3s ease!important; -ms-transition: opacity 0.3s ease!important; -o-transition: opacity 0.3s ease!important; transition: opacity 0.3s ease!important; } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { opacity: 0.3; } .lg-thumb-item img { height: 60px !important; width: auto!important; border-left: solid 2px transparent; } .lg-outer .lg-thumb{ padding: 0!important; } .lg-outer .lg-thumb-outer { background-color: rgba(0, 0, 0, 0.3)!important; padding: 0px !important; max-height: 60px!important; position: fixed!important; z-index: 9999999!important; } .lg-outer .lightStyle .lg-thumb-outer { background-color: rgba(255, 255, 255, 0.5)!important; } .lg-thumb-item { margin-right: 0px !important; } .lg-outer:not(.videoPopUp) .lg { margin-top: 50px; } .lg-toolbar.group { position: fixed; top: 0px; height: 30px!important; } .lg-next, .lg-prev, .lg-toolbar { opacity: 1 !important; } /* pre loader*/ .lg-outer .lg-item.wc-loading:after{ border-bottom-color: #5D5D5D!important; border-left-color: #5D5D5D!important; border-top-color:#5D5D5D!important; } .lg-outer .lg-item{ background: none !important; } /* Social Share */ img.lg-object.lg-image { display: inline-block!important; max-width: 100%; max-height: 100%; height: inherit !important; } .lg-outer .socialShareContainer { height: 40px; } .lg-item .social_links { bottom: 0!important; } .lg-outer .social_share_toggle > i:first-child{ color: #fff; margin-top: 23px!important; background-color: transparent!important; } .lg-outer .lightStyle .social_share_toggle > i:first-child{ background-color: #fff; color:#000; } .lg-outer .bd_socail_share .social_links a { color: #fff; } .lg-outer .lightStyle .bd_socail_share .social_links a{ color: #393939; } .lg-outer .bd_socail_share{ margin-right: 10px; height: 40px!important; float: right; } /*Animation of toolbar */ .lg-hide-items .lg-toolbar, .lg-hide-items .lg-next,.lg-hide-items .lg-prev{ -webkit-transform:none!important; -moz-transform:none!important; -ms-transform:none!important; -o-transform:none!important; transform:none!important; } /*icons*/ .lg-icon{ font-family:'Linearicons' !important; padding:13px 5px!important; width:auto !important; color: #fff!important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-outer .social_share_toggle i { color: #fff!important; } .lg-outer .lightStyle .social_share_toggle i { color: #1e1e1e !important; } .lg-icon:after{ -webkit-transition: opacity 0.3s ease!important; -moz-transition: opacity 0.3s ease!important; -o-transition: opacity 0.3s ease!important; transition: opacity 0.3s ease!important; } .lg-toolbar .lg-close:after { content: "\e92a"!important; font-size: 19px; margin-right: 8px; font-weight: 600; display: block; line-height: 35px; } .lg-toolbar .lg-close:hover:after { opacity:.8; } .lg-outer .lg-toogle-thumb:after { content: "\e880"!important; font-size:18px!important; } .lg-outer .lg-toogle-thumb:hover:after{ opacity:.8; } .lg-fullscreen:after { content: "\e94a"!important; font-size: 13px; vertical-align: middle; margin-right: 8px; margin-left: 8px; font-weight: 600; } .lg-fullscreen:hover:after { opacity:.8; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e94b"!important; } .lg-fullscreen-on .lg-fullscreen:hover:after { opacity:.8; } .lg-autoplay-button:after { content: "\f04b"!important; font-weight: 100; line-height: 18px; font-size: 16px; vertical-align: middle; padding-left: 5px; } .lg-autoplay-button:hover:after { opacity:.8; } .lg-show-autoplay .lg-autoplay-button:after { content: "\f04c"!important; } .lg-show-autoplay .lg-autoplay-button:hover:after { opacity:.8; } .lg-progress-bar{ position: fixed!important; } .lightStyle .lg-progress-bar { background-color: #fff!important; } .lg-progress-bar.lg-start { position: fixed!important; } .lg-progress-bar .lg-progress { background-color: #b7b7b7!important; } /* Next Previous buttons */ .lg-actions .lg-next{ right:0px!important; } .lg-actions .lg-prev { left:0px!important; } .lg-actions .lg-next, .lg-actions .lg-prev { width: 34px!important; border-radius: 0px !important; height: 34px!important; z-index: 100080!important; background-color: rgba(255,255,255,0.8)!important; -moz-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -webkit-transition: background-color 0.2s ease; transition: background-color 0.2s ease; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { background-color:rgba(255,255,255,1)!important; } .lightStyle .lg-actions .lg-next, .lightStyle .lg-actions .lg-prev { background-color:rgba(57,57,57,0.8)!important; } .lightStyle .lg-actions .lg-next:hover, .lightStyle .lg-actions .lg-prev:hover { background-color:rgba(57,57,57,1)!important; } .lg-next.lg-icon,.lg-prev.lg-icon{ padding:9px!important; font-size: 16px!important; overflow:hidden; } .lg-next.lg-icon:before, .lg-next.lg-icon:after, .lg-prev.lg-icon:before, .lg-prev.lg-icon:after { -webkit-transition: margin-left 0.3s ease, opacity .2s ease-in-out !important; -moz-transition: margin-left 0.3s ease, opacity .2s ease-in-out !important; -o-transition: margin-left 0.3s ease, opacity .2s ease-in-out !important; transition: margin-left 0.3s ease, opacity .2s ease-in-out !important; } .lg-next.lg-icon:before,.lg-next.lg-icon:after{ color: #393939!important; content: "\f178"!important; } .lightStyle .lg-next.lg-icon:before,.lightStyle .lg-next.lg-icon:after{ color: #fff!important; } .lg-next.lg-icon:before{ opacity: 0; margin-left: -30px; } .lg-next.lg-icon:after{ opacity: 1; padding-left: 30px; margin-left: -15px; } .lg-next.lg-icon:hover:before{ opacity: 1; margin-left: 0px; } .lg-next.lg-icon:hover:after{ margin-left: 15px; opacity: 0; } .lg-prev.lg-icon:before,.lg-prev.lg-icon:after{ content: "\f177"!important; color: #393939!important; } .lightStyle .lg-prev.lg-icon:before,.lightStyle .lg-prev.lg-icon:after{ color: #fff!important; } .lg-prev.lg-icon:before{ opacity: 1; margin-left: 0px; } .lg-prev.lg-icon:after{ opacity: 0; padding-left: 30px; margin-left: 15px; } .lg-prev.lg-icon:hover:before{ opacity: 0; margin-left: -47px } .lg-prev.lg-icon:hover:after{ margin-left: 0px; opacity: 1; } /* SimpleGallery */ .isotope.simpleGallery .postphoto .frame { display:none; border:0px !important; } .isotope.simpleGallery .titleContainer{ display:none; } .isotope.simpleGallery .postphoto .overlay .center-line { display: block; width: 20px !important; background-color: #000; height: 4px; } .isotope.simpleGallery .postphoto .overlay .center-line:before{ content: ''; display: block; width: 4px !important; height: 21px !important; background-color: #000; position: absolute; top: -8px; left: 8px; } .isotope.simpleGallery.darkStyle .postphoto .overlay .center-line { background-color: #fff; } .isotope.simpleGallery.darkStyle .postphoto .overlay .center-line:before{ background-color: #fff; } .isotope.simpleGallery .postphoto .overlay .icon-type { display: none; } /*-----------------------------------------------------------------------------------*/ /* 70.1 carousel gallery /*-----------------------------------------------------------------------------------*/ .galleryexternallink { font-size: 13px; line-height: 30px; padding: 4px 15px 5px; border: 2px solid #073B87; background-color: #073B87; width: auto; color: #fff; border-radius: 20px; opacity:1; -webkit-transition: opacity ease 0.3s; -moz-transition: opacity ease 0.3s; -o-transition: opacity ease 0.3s; transition: opacity ease 0.3s; } .galleryexternallink:hover { color:#fff; opacity:.7; -webkit-transition: opacity ease 0.3s; -moz-transition: opacity ease 0.3s; -o-transition: opacity ease 0.3s; transition: opacity ease 0.3s; } .galler_carousel.carousel .swiper-slide .image-container:hover:before { opacity: .8 } .gallery_carousel.carousel .swiper-slide .galleryCarouselLink { position:absolute; } .gallery_carousel.carousel .lazy-load { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .gallery_carousel .postphoto:hover .overlay { background-color:transparent; } .gallery_carousel.carousel .swiper-slide .image-container:hover:before { opacity:.8; } /*-----------------------------------------------------------------------------------*/ /* 71. SoundCloud /*-----------------------------------------------------------------------------------*/ .soundcloud_shortcode iframe { max-width:100%; max-height:100%; } /*-----------------------------------------------------------------------------------*/ /* 72. Animated Text /*-----------------------------------------------------------------------------------*/ .animatedtext{ overflow: hidden; position: relative; width: 80%; left:10%; } .animatedtext .image img{ width:100%; } span.slideshowContent { -webkit-text-shadow: 0px 0px 1px #fff; text-shadow: 0px 0px 1px #fff; } .animatedtext_content { overflow: hidden; position: relative; width: 100%; } span.slideshowContent .firstTitle, .secondTitle{ white-space: nowrap; display: inline-block; position: absolute; top:50%; bottom:50%; font-family: Poppins, sans-serif; font-weight:600; -webkit-animation: animSlidshow 16s linear 0s infinite; -moz-animation: animSlidshow 16s linear 0s infinite; -o-animation: animSlidshow 16s linear 0s infinite; animation: animSlidshow 16s linear 0s infinite; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } span.slideshowContent .firstTitle{ z-index: 1; left: -12.5%; } .wpb_column.vc_column_container.vc_col-sm-12 .animatedtext{ width: 940px; margin: 0 auto; left:0; } .wpb_column.vc_column_container.vc_col-sm-12 .slideshowContent .firstTitle{ left: 0; } .wpb_column.vc_column_container.vc_col-sm-12 .secondTitle{ left: calc((100% - 940px)/2); } @keyframes animSlidshow{ 0% { transform: translate3D(0,50%,0) translateZ(0) scale(1.000001, 1.000001); } 100% { transform: translate3D(-75%,50%,0) translateZ(0) scale(1.000001, 1.000001);} } @-webkit-keyframes animSlidshow{ 0% { -webkit-transform: translate3D(0,-50%,0) translateZ(0) scale(1.000001, 1.000001); } 100% { -webkit-transform: translate3D(-75%,-50%,0) translateZ(0) scale(1.000001, 1.000001);} } /*-----------------------------------------------------------------------------------*/ /* 73. Nice select /*-----------------------------------------------------------------------------------*/ .sidebar.widget-area .nice-select ul.list { width:auto; min-width:100%; max-height: 150px; overflow-y: scroll; } .sidebar.widget-area .menu ul.sub-menu { margin-left: 10px; padding-left:0; } .nice-select { width: 100%; -webkit-tap-highlight-color: transparent; background-color: #fff; border: solid 1px #e8e8e8; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 38px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .widget .nice-select { z-index:inherit; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999; } .nice-select:after { border-bottom: 2px solid #999; border-right: 2px solid #999; content: ''; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } .nice-select.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled:after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small:after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: #fff; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px !important; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; max-height: 200px; overflow-y: scroll !important; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; width:100%; } .variations .nice-select .list { background-color: #323232; color:#fff; margin-left:0 !important; } .woocommerce div.product form.cart .variations .nice-select .list { max-height: 150px; overflow-y: scroll; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px !important; padding-right: 29px !important; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; color:#464646; } .variations .nice-select .option:hover,.variations .nice-select .option.focus,.variations .nice-select .option.selected.focus { background-color: #3F3E3E; color:#fff; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } /*-----------------------------------------------------------------------------------*/ /* 74. Cart Blog /*-----------------------------------------------------------------------------------*/ .masonry-blog { width:100% !important; } /* 4 column */ .masonry-blog.isotope.blogcolumn4 .isotope-item { width:24.98% !important; } /* 3 column */ .masonry-blog.isotope.blogcolumn3 .isotope-item { width:33.31111% !important; } .isotope .blog-masonry-container { margin:15px; width:calc(100% - 30px); } .blog-masonry-container { float: left; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; transition: all 300ms; } .blog-masonry-container.ep_quote { background-color: #073B87; background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .blog-masonry-container.ep_quote .icon { position: absolute; top: 42px; font-size: 30px; left: 42px; } .blog-masonry-container.ep_quote .blog-masonry-content .quote-author { font-size: 13px; font-family:Lato,sans-serif; font-weight: 500; color: #fff; } .blog-masonry-container.ep_quote .blog-masonry-content .blog-excerpt { font-size: 24px; font-family: Poppins, sans-serif; font-weight:600; opacity: 1; line-height: 33px; color: #fff; font-style: italic; } .blog-masonry-container img { width:100%; position: absolute; top: 0; left: 0; } .blog-masonry-container:hover { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } .blog-masonry-container .quote-img{ margin: 40px 0 -10px 35px; } .blog-masonry-container .blog-masonry-content .link_to_details { margin: 28px 25px 35px; display:block; } .blog-masonry-container.ep_quote .blog-masonry-content .link_to_details { margin:0; } .blog-masonry-container.ep_quote .blog-masonry-content { margin: 130px 42px 95px; } .blog-masonry-container .post-author-meta { border-top:1px solid #5e5e5e; padding: 10px 15px; } .blog-masonry-container.dark .post-author-meta { border-top:1px solid #e8e8e8; } .post-author-meta span.ep-icon.icon-bubble { margin-left: 20px; margin-right: -15px; } .blog-masonry-container.dark .post-author-meta .post-author , .blog-masonry-container .post-author-meta .meta-comment-count { font-weight:500; font-size:12px; } .blog-masonry-container .post-author-meta .meta-comment-count { margin-left: 15px; } .masonry-blog .blog-masonry-container a, .blog-masonry-container .post-author-meta .meta-comment-count a { text-decoration: none; -moz-transition: color ease .2s; -o-transition: color ease .2s; -webkit-transition: color ease .2s; transition: color ease .2s; } .blog-masonry-container .blog-masonry-content .blog-cat { border-radius: 29px; font-size: 13px; font-weight: 600; line-height: 13px; margin-right: 0; padding: 5px 16px 6px; text-decoration:none; background-color:#fff; -webkit-transition: background-color ease 0.2s; -moz-transition: background-color ease 0.2s; -o-transition: background-color ease 0.2s; transition: background-color ease 0.2s; } .blog-masonry-container.dark .blog-masonry-content .blog-cat { background-color:#282828; } .blog-masonry-container .blog-masonry-content .blog-cat a { color:#282828; } .blog-masonry-container.dark .blog-masonry-content .blog-cat a { color:#fff; } .blog-masonry-container.dark .blog-masonry-content .blog-cat:hover a{ text-decoration:none; color: #282828; } .blog-masonry-container.dark .blog-masonry-content .blog-cat:hover { background-color: #fff; } .blog-masonry-container .blog-masonry-content .blog-cat:hover { background-color: #282828; } .blog-masonry-container .blog-masonry-content .blog-cat:hover a{ color: #fff; } .blog-masonry-container .blog-masonry-content .blog-date { font-size: 12px; font-weight: 500; line-height: 23px; opacity: 0.9; display:block; } .blog-masonry-container .blog-masonry-content .blog-date span { color:#9c9c9c; } .blog-masonry-container .blog-masonry-content .blog-date a, .blog-masonry-container .blog-masonry-content .blog-cat a{ font-size: 13px; } .blog-masonry-container .blog-masonry-content .blog-excerpt ,.blog-masonry-container .blog-masonry-content .blog-date a { color:#fff; } .blog-masonry-container.dark .post-author-meta .post-author, .blog-masonry-container .post-author-meta .post-author a ,.blog-masonry-container .post-author-meta .meta-comment-count a , .blog-masonry-container .post-author-meta .post-author , .blog-masonry-container .ep-icon{ color:#e4e4e4; font-weight: 500; font-size: 12px; } .blog-masonry-container.dark .blog-masonry-content .blog-excerpt ,.blog-masonry-container.dark .blog-masonry-content .blog-date a { color:#101010; } .blog-masonry-container.dark .post-author-meta .post-author, .blog-masonry-container.dark .post-author-meta .post-author a ,.blog-masonry-container.dark .post-author-meta .meta-comment-count a,.blog-masonry-container.dark .ep-icon { color:#262626; } .blog-masonry-container .post-author-meta .post-author a:hover ,.blog-masonry-container .post-author-meta .meta-comment-count a:hover { color:#073B87; } .blog-masonry-container .blog-masonry-content .blog-title { font-size: 18px; line-height: 20px; font-weight: bold; margin-top: 20px; -moz-transition: opacity .5s ease; -o-transition: opacity .5s ease; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; color: #fff; margin-bottom: 3px; opacity:1; } .blog-masonry-container.dark .blog-masonry-content .blog-title { color:#282828; } .blog-masonry-container.dark .blog-masonry-content .blog-title:hover, .blog-masonry-container .blog-masonry-content .blog-title:hover { opacity: .75; -moz-transition: opacity .3s ease; -o-transition: opacity .3s ease; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .blog-masonry-container .blog-masonry-content .blog-excerpt{ font-size: 14px; font-weight: normal; line-height: 23px; margin-top: 12px; opacity: 0.7; padding:0; } .blog-masonry-container.quote .blog-masonry-content .blog-excerpt{ margin-top: 20px; } .blog-masonry-container .blog-masonry-content .post-share{ float: left; width: 38px; height: 38px; margin-top: 35px; } .blog-masonry-container .blog-masonry-content .post-share .share { width: 36px; height: 36px; display: block; opacity: 1; -moz-transition: opacity 0.8s; -o-transition: opacity 0.8s; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; } .blog-masonry-container .blog-masonry-content .post-share .share-hover{ width: 36px; height: 36px; display: block; margin-top: -36px; opacity: 0; transition: opacity 0.8s; } .blog-masonry-container .blog-masonry-content .post-share:hover .share-hover{ opacity: 1; } .blog-masonry-container .blog-masonry-content .post-share:hover .share{ opacity: 0; } /* next and prev in gallery type */ .masonryBlog .swiper-button-next, .masonryBlog .swiper-button-prev { background-image: none; -moz-transition: opacity ease 500ms; -o-transition: opacity ease 500ms; -webkit-transition: opacity ease 500ms; transition: opacity ease 500ms; opacity: 0; } .blog_item:hover .masonryBlog .swiper-button-next,.blog_item:hover .masonryBlog .swiper-button-prev { opacity:1; } .masonryBlog .swiper-button-prev:before, .masonryBlog .swiper-button-next:before { content: ''; background-color: #676767; height: 15px; width: 3px; display: block; position: relative; top: 6px; right: -10px; -moz-transition: background-color ease 300ms; -o-transition: background-color ease 300ms; -webkit-transition: background-color ease 300ms; transition: background-color ease 300ms; -ms-transform: rotate(-45deg); /* IE 9 */ -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .masonryBlog .swiper-button-prev:after, .masonryBlog .swiper-button-next:after { content: ''; background-color: #676767; height: 15px; width: 3px; display: block; right: -10px; position: relative; -moz-transition: background-color ease 300ms; -o-transition: background-color ease 300ms; -webkit-transition: background-color ease 300ms; transition: background-color ease 300ms; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .masonryBlog .swiper-button-prev:hover:after, .masonryBlog .swiper-button-next:hover:after, .masonryBlog .swiper-button-prev:hover:before, .masonryBlog .swiper-button-next:hover:before { background-color:#073B87; } .masonryBlog .swiper-button-prev:before { -ms-transform: rotate(-135deg); /* IE 9 */ -webkit-transform: rotate(-135deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); right: -14px; top: 6px; } .masonryBlog .swiper-button-prev:after { -ms-transform: rotate(135deg); /* IE 9 */ -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); right: -14px; } /* comment btn */ .blog-masonry-container .blog-masonry-content .post-like-holder, .blog-masonry-container .blog-masonry-content .post-share{ float: right; margin: 25px 8px 22px 0; width: 36px; height: 36px; position: relative; opacity: 0.7; text-align: center; } .blog-masonry-container .blog-masonry-content .like-heart, .blog-masonry-container .blog-masonry-content .share, .blog-masonry-container .blog-masonry-content .share-hover { width: 36px; height: 36px; display: block; -moz-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; border-radius: 100%; border: 1px solid rgba(140,135,135,0.7); } .blog-masonry-container .blog-masonry-content .like-heart i, .blog-masonry-container .blog-masonry-content .share i, .blog-masonry-container .blog-masonry-content .share-hover i{ position: absolute; color: #cfcfcf; } .blog-masonry-container .blog-masonry-content .like-heart i{ right: 9px; top: 11px; font-size: 17px; } .blog-masonry-container .blog-masonry-content .share i, .blog-masonry-container .blog-masonry-content .share-hover i{ right: 11px; font-size: 16px; top: 10px; } .blog-masonry-container .blog-masonry-content .like-count{ position: absolute; top: 12px; left: 0; right: 0; margin: 0 auto; color: #fff; display: none; } .blog-masonry-container .blog-masonry-content .post-like-holder:hover i{ display: none; } .blog-masonry-container .blog-masonry-content .post-like-holder:hover .post-like-hover{ opacity: 0.7; } .blog-masonry-container .blog-masonry-content .post-like-holder:hover .post-like-hover span{ opacity: 0.7; } .blog-masonry-container .blog-masonry-content .post-like-holder:hover .post-like{ opacity: 0; } .blog-masonry-container .blog-masonry-content .post-like-holder:hover .like-count{ display: block } .blog-masonry-container .blog-masonry-content .post-like-holder:hover .like-heart{ border: none; background-color: #CFCFCF } .blog-masonry-container li.images { height: 250px; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: 50% 50%; border-top-left-radius: 4px; border-top-right-radius: 4px; } .blog-masonry-container.standard img { width: 100%; -moz-transition: all 400ms; -o-transition: all 400ms; -webkit-transition: all 400ms; transition: all 400ms; } .blog-masonry-container.video .video .video-img{ width: 100%; } .blog-masonry-container .blog-details{ position: absolute; top: 15px; left: 13px; z-index:2; } .blog-masonry-container a , .blog-masonry-container a:hover { text-decoration:none; } .blog-masonry-container .post-like-holder{ margin-right: -3px !important; } .blog-masonry-container span.blog-details { display: inline-block; position: absolute; } .inline_interaction .blog-masonry-container.ep_audio span.blog-details, .inline_interaction .blog-masonry-container.ep_video span.blog-details { position: relative; top: 11px; left: 25px; } .popup_interaction iframe{ visibility:hidden; } .blogGalleryContainer { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; padding: calc(50% - 35px) 0; background-position: center center; } .popup_interaction .soundcloud-format { position:relative; } .popup_interaction .soundcloud-format a { position: absolute; display: block; height: 100%; width: 100%; min-height: 70px; min-width: 70px; } .video-format .video_buttons_wrap { position:relative; } .video-format .video_buttons_wrap .video_embed_container { position:absolute; width:100%; height:100%; } .cartBlogAudioPlaceHolder{ padding-top: 100px; } .cartBlogPlaceHolder{ padding-top: 25px; } /* play button for popup video and sound*/ .popup_interaction .soundcloud-format .play-button-wrap { position: absolute; z-index: 1; top: calc(50% - 35px); left: calc(50% - 35px); } .blog-masonry-container.no_video_placeholder .play-button { top:0; } .blog-masonry-container .play-button, .popup_interaction .soundcloud-format .play-button{ position: absolute; left: calc(50% - 35px); top: calc(50% - 35px); height: 64px; width: 64px; background-color: transparent; border: solid 3px #fff; border-radius: 50%; cursor:pointer; z-index:1; color:#fff; -moz-transition: transform ease 300ms,border ease 300ms; -o-transition: transform ease 300ms,border ease 300ms; -webkit-transition: transform ease 300ms,border ease 300ms; transition: transform ease 300ms,border ease 300ms; } .blog-masonry-container .dark.play-button, .blog-masonry-container .dark.play-button:hover, .blog-masonry-container .dark.play-button .icon, .popup_interaction .soundcloud-format .play-button.dark, .popup_interaction .soundcloud-format .play-button.dark span:before, .popup_interaction .soundcloud-format .play-button.dark:hover { color:#272727; border-color: #272727; } .blog-masonry-container .play-button:hover , .popup_interaction .soundcloud-format .play-button:hover { -moz-transform: scale(0.9) translateZ(0); -ms-transform: scale(0.9) translateZ(0); -o-transform: scale(0.9) translateZ(0); -webkit-transform: scale(0.9) translateZ(0); transform: scale(0.9) translateZ(0); border:3px solid #fff; } .blog-masonry-container .play-button .icon{ color:#fff; margin-left: 27px; margin-top: 20px; display: block; font-size: 23px; } .popup_interaction .soundcloud-format .play-button .icon { color:#fff; margin-left: 18px; margin-top: 20px; display: block; font-size: 23px; } /*-----------------------------------------------------------------------------------*/ /* 75. Blog and portfolio detail social share /*-----------------------------------------------------------------------------------*/ #blogSingle .social_share_toggle, #portfolioDetailAjax .social_share_toggle { height:30px; margin-top: 1px; } #blogSingle .social_share_toggle > i:first-child, #PDetail .social_share_toggle > i:first-child, #portfolioDetailAjax .social_share_toggle > i:first-child{ margin-top:0px; width: 25px; height: 25px; border-radius: 30px; } #blogSingle .social_share_toggle > i:first-child:before, #PDetail .social_share_toggle > i:first-child:before{ padding-left: 5px; padding-top: 5px; display: inherit; } #blogSingle .social_links_list i.icon-pinterest:hover, #PDetail .social_links_list i.icon-pinterest:hover , #portfolioDetailAjax .social_links_list i.icon-pinterest:hover { color: #CC2127; } #blogSingle .social_links_list i.icon-facebook:hover, #PDetail .social_links_list i.icon-facebook:hover , #portfolioDetailAjax .social_links_list i.icon-facebook:hover { color: #073B87; } #blogSingle .social_links_list i.icon-twitter:hover, #PDetail .social_links_list i.icon-twitter:hover , #portfolioDetailAjax .social_links_list i.icon-twitter:hover { color: #55ACEE; } #blogSingle .social_links_list i.icon-envelope2:hover, #PDetail .social_links_list i.icon-envelope2:hover , #portfolioDetailAjax .social_links_list i.envelope2:hover { color:#a7a7a7; } #blogSingle .social_links_list i.icon-google-plus:hover, #PDetail .social_links_list i.icon-google-plus:hover , #portfolioDetailAjax .social_links_list i.icon-google-plus:hover { color: #CC3732; } #blogSingle .social-tag, #PDetail .social-tag, #portfolioDetailAjax .social-tag{ margin:100px 0 15px 0; display: flex; } #portfolioDetailAjax .social_share_toggle > i:first-child:before { margin: 5px 0px 0 6px; display: block; } .bd_socail_share { height: 30px; position: relative; float: right; padding-bottom: 15px; } .bd_socail_share .social_share_toggle .social_links { width: 220px !important; right: 18px; padding-top: 5px; position: initial; } .lg-toolbar .bd_socail_share .social_share_toggle .social_links { padding-top: 20px; } .bd_socail_share .social_links .social_links_list li { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); padding-top:0px; } .social_share_toggle .social_links_list li { padding-top: 0px; } /*-----------------------------------------------------------------------------------*/ /* 76. Blog and portfolio detail Navigation /*-----------------------------------------------------------------------------------*/ #blogSingle .nav_box{ margin: 0px; padding: 40px 0; border-bottom: 1px solid #e8e8e8; min-height: 130px; position:relative; } #PDetail .nav_box{ padding: 55px 0; } #blogSingle .nav_box div, #PDetail .nav_box div { height: 130px; width: 49%; background-position: center; background-repeat: no-repeat; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; overflow: hidden; position: relative; } #PDetail .nav_box div{ width: 43%; } #blogSingle .nav_box div.nextNav .bg, #blogSingle .nav_box div.prevNav .bg, #PDetail .nav_box div.nextNav .bg, #PDetail .nav_box div.prevNav .bg { position:absolute; height: 100%; width: 100%; opacity:1; background-position: center; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; -moz-transition: transform ease 350ms,opacity ease 350ms; -o-transition: transform ease 350ms,opacity ease 350ms; -webkit-transition: transform ease 350ms,opacity ease 350ms; transition: transform ease 350ms,opacity ease 350ms; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } #blogSingle .nav_box a:hover div.nextNav .bg, #blogSingle .nav_box a:hover div.prevNav .bg, #PDetail .nav_box a:hover div.nextNav .bg, #PDetail .nav_box a:hover div.prevNav .bg { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); opacity:1; } #blogSingle .nav_box div.nextNav, #blogSingle .nav_box div.prevNav, #PDetail .nav_box div.nextNav, #PDetail .nav_box div.prevNav{ float:right; } #blogSingle .nav_box div.nextNav{ clear:right; } #blogSingle .nav_box div.prevNav, #PDetail .nav_box div.prevNav{ float: left; } #blogSingle .nav_box a, #PDetail .nav_box a{ float: none; margin:0px; } #blogSingle .nav_box a[rel="next"]:before { right: 0; } #blogSingle .nextNav:before, #blogSingle .prevNav:before , #PDetail .nextNav:before, #PDetail .prevNav:before { -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; content: ""; width: 18px; height: 1px; border-top: 3px solid #fff; left:0; margin-left: 49px; margin-right: 62px; z-index: 1; -webkit-transition: width 0.3s ease, right 0.3s ease, margin-right 0.3s ease, margin-left 0.3s ease, border-top 0.3s ease; -moz-transition: width 0.3s ease, right 0.3s ease, margin-right 0.3s ease, margin-left 0.3s ease, border-top 0.3s ease; -o-transition: width 0.3s ease, right 0.3s ease, margin-right 0.3s ease, margin-left 0.3s ease, border-top 0.3s ease; transition: width 0.3s ease, right 0.3s ease, margin-right 0.3s ease, margin-left 0.3s ease, border-top 0.3s ease; } #blogSingle a:hover .nextNav:before , #PDetail a:hover .nextNav:before { width: 36px; margin-left: 8px; border-top: 3px solid #262626; } #blogSingle a:hover .prevNav:before, #PDetail a:hover .prevNav:before { width: 36px; margin-right: 8px; border-top: 3px solid #262626; } #blogSingle .nextNav:after, #blogSingle .prevNav:after, #PDetail .nextNav:after, #PDetail .prevNav:after{ -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; position: absolute; top: 50%; content: ""; width: 0px; height: 1px; margin: -3px 0 auto 38px; border-style: solid; border-width: 4px 6px 4px 6px; z-index: 4; -webkit-transition: margin-right 0.3s ease,margin-left 0.3s ease, border-color 0.3s ease; -moz-transition: margin-right 0.3s ease,margin-left 0.3s ease, border-color 0.3s ease; -o-transition: margin-right 0.3s ease,margin-left 0.3s ease, border-color 0.3s ease; transition: margin-right 0.3s ease,margin-left 0.3s ease, border-color 0.3s ease; } #blogSingle .nextNav:before, #PDetail .nextNav:before { left: inherit; right: 0; } #blogSingle .nextNav:after, #PDetail .nextNav:after { right: 0; left: inherit; margin-left: 0; margin-right: 50px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255,0) rgba(255, 255, 255, 0) rgb(255, 255, 255); } #blogSingle a:hover .nextNav:after, #PDetail a:hover .nextNav:after{ left: inherit; margin-left: 42px; border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255 ,0) rgba(255, 255, 255, 0) rgb(38, 38, 38); } #blogSingle a:hover .prevNav:after, #PDetail a:hover .prevNav:after{ margin-right: 42px; border-color: rgba(255, 255, 255, 0) rgb(38, 38, 38) rgba(255, 255, 255, 0) rgba(0, 0, 0 , 0); } #blogSingle .prevNav:after, #PDetail .prevNav:after{ left:0; margin-right: 80px; border-color: rgba(255, 255, 255, 0) rgb(255, 255, 255) rgba(255, 255, 255, 0) rgba(0, 0, 0 , 0); } #blogSingle .nav_box a:before, #PDetail .nav_box a:before { background-color: rgba(0,0,0,0.5); display: block; position: absolute; width: 49%; height: 130px; content: ""; z-index: 1; -webkit-transition: background-color 0.5s ease; -moz-transition: background-color 0.5s ease; -o-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } #PDetail .nav_box a:before { width: 43%; } #PDetail .nav_box a.nextPD:before { right: 0; } #blogSingle .nav_box a:hover:before, #PDetail .nav_box a:hover:before { background-color: rgba(0,0,0,.4); } #PDetail .nav_box a#PDbackToPortfolio:before, #PDetail .nav_box a#PDbackToPortfolio:hover:before { background-color: transparent; display:none; } #blogSingle .nextNav span.postTitle, #blogSingle .prevNav span.postTitle , #PDetail .nextNav span.postTitle, #PDetail .prevNav span.postTitle { font-size: 18px; line-height: 28px; font-family: Poppins, serif; color: #fff; font-weight: 600; height: 130px; width: 49%; opacity: 1; padding-right: 90px; padding-left:90px; text-align: center; position: relative; z-index: 1; box-sizing: border-box; display: table-cell; vertical-align: middle; -webkit-transition: opacity 0.3s ease ,-webkit-transform .3s ease; -moz-transition: opacity 0.3s ease,-moz-transform .3s ease; -o-transition: opacity 0.3s ease,-ms-transform .3s ease; transition: opacity 0.3s ease,transform .3s ease; } #PDetail .nextNav span.postTitle, #PDetail .prevNav span.postTitle{ width: 43%; } #blogSingle .nextNav span.postTitle, #PDetail .nextNav span.postTitle { width: 43%; opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #PDetail .nextNav span.postTitle{ width: 43%; } #blogSingle a:hover .prevNav span.postTitle, #PDetail a:hover .prevNav span.postTitle { opacity: .8; -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); transform: translateX(-5px); } #blogSingle a:hover .nextNav span.postTitle, #PDetail a:hover .nextNav span.postTitle { opacity: .8; -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); -o-transform: translateX(5px); transform: translateX(5px); } /*-----------------------------------------------------------------------------------*/ /* 77. swiper scollbar /*-----------------------------------------------------------------------------------*/ .sw-scrollbar, .sw-scrollbar > .swiper-wrapper { height: 100%; } .sw-scrollbar.swiper-container-free-mode>.swiper-wrapper { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .sw-scrollbar .swiper-slide { height: auto; min-height: 100%; } /*-----------------------------------------------------------------------------------*/ /* 78. Retina displays styles /*-----------------------------------------------------------------------------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) { } /*-----------------------------------------------------------------------------------*/ /* 79. Visual Composer reset /*-----------------------------------------------------------------------------------*/ .wpb_animate_when_almost_visible { opacity: 1; filter: alpha(opacity=1); } /*-----------------------------------------------------------------------------------*/ /* 80. countdown shortcode /*-----------------------------------------------------------------------------------*/ .countdown-timer { text-align: center; } .countdown-timer.left { text-align: left; } .countdown-timer.right { text-align: right; } .time-block { display: inline-block; padding: 5px; text-align: center; } .time-block span.number { display: block; min-width: 1.4em; line-height: 1.1em; font-weight: 600; font-size: 100%; font-family: 'Poppins',sans-serif; color:#333; } .time-block span.label { font-size: 40%; font-weight: 400; display: block; line-height: 1.1em; color:#555; } /*-----------------------------------------------------------------------------------*/ /* 81. Cookie Law bar /*-----------------------------------------------------------------------------------*/ .ep-cookies-bar { position: fixed; border:none; color:#fff; background-color:rgba(40,40,40,0.85); top: auto; left: 0; right: 0; bottom: 0; z-index: 999999; padding: 15px 30px; -webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.14); box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.14); transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); -webkit-transition: transform 0.35s ease; -webkit-transition: -webkit-transform 0.35s ease; transition: -webkit-transform 0.35s ease; transition: transform 0.35s ease; transition: transform 0.35s ease, -webkit-transform 0.35s ease; } .ep-cookies-bar.bar-hide { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .ep-cookies-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .ep-cookies-inner .cookies-buttons { margin:0 auto; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 14px; font-weight: 600; line-height: 20px; } .ep-cookies-inner .cookies-buttons a { color:#FFF; margin: 0 15px 0; } .ep-cookies-inner .cookies-info-text { -webkit-box-flex: 1; margin:0 auto; } .ep-cookies-inner .cookies-info-text:before { content: "\e955"; font-family: 'Linearicons' !important; margin-right:5px; font-size:16px; line-height:15px; } .cookies-buttons > a { margin-right: 20px; } .cookies-buttons > a:last-child { margin: auto; } .cookies-buttons .cookies-more-btn { padding:6px 0; position: relative; } .cookies-buttons .cookies-more-btn:hover:before { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; -webkit-transition-delay: 0s; transition-delay: 0s; } .cookies-buttons .cookies-more-btn:before { background-color: #ffffff; position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 2px; opacity: 1; -moz-transition: transform .7s cubic-bezier(0.2,1,0.3,1); -o-transition: transform .7s cubic-bezier(0.2,1,0.3,1); -webkit-transition: transform .7s cubic-bezier(0.2,1,0.3,1); transition: transform .7s cubic-bezier(0.2,1,0.3,1); -webkit-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); transform: scaleX(1); } .cookies-buttons .cookies-accept-btn { border-radius: 29px; border:1px solid; margin-right: 0; padding: 3px 16px 6px; text-decoration: none; -webkit-transition: background-color ease 0.2s; -moz-transition: background-color ease 0.2s; -o-transition: background-color ease 0.2s; transition: background-color ease 0.2s; } .cookies-buttons .cookies-accept-btn:hover{ background-color:#fff; color: #282828; text-decoration: none; border:none; } .ep-cookies-bar.bar-display { -moz-transform: translate3d(0, 1px, 0); -ms-transform: translate3d(0, 1px, 0); -o-transform: translate3d(0, 1px, 0); -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } /*-----------------------------------------------------------------------------------*/ /* 82. Breadcrumb /*-----------------------------------------------------------------------------------*/ .page-breadcrumb { font-size:0; } .page-breadcrumb .woocommerce-breadcrumb { font-weight:bold; margin-bottom:10px !important; } .page-breadcrumb .woocommerce-breadcrumb a{ opacity:0.8; } .woocommerce-breadcrumb { margin: 0 0 40px !important; color: #aaa; font-size: 14px !important; font-weight: 500; } .pd_top .woocommerce-breadcrumb { margin:5px 0 15px !important; } .woocommerce-breadcrumb a { text-decoration: none; -moz-transition: color ease 200ms; -o-transition: color ease 200ms; -webkit-transition: color ease 200ms; transition: color ease 200ms; } .woocommerce-breadcrumb a, .woocommerce-breadcrumb span.delimiter{ color:#717171; font-weight: 600; } .woocommerce-breadcrumb a:hover { color:#073B87 !important; } .woocommerce-breadcrumb .delimiter { padding:0 10px; } .lg-thumb-outer.lg-grab .lg-thumb.group{ width:auto !important; } /*-----------------------------------------------------------------------------------*/ /* 83. Visual Composer frontend Editor /*-----------------------------------------------------------------------------------*/ .view-mode .section-content-container >.container:hover>.vc_element:before, .compose-mode .section-content-container >.container:hover>.wpb_row>.vc_element:before { content: ''; margin: 0; padding: 0; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; outline: rgba(125,125,125,.4) dashed 1px; } /*-----------------------------------------------------------------------------------*/ /* 84. Instagram Hashtag /*-----------------------------------------------------------------------------------*/ .epico_instagram_product{ background-color:#f9f9f9; padding: 60px 0px 0; } .epico_instagram_product .product-instagram { text-align:center; font-size: 14px; margin-bottom: 45px; margin-top: 20px; } .epico_instagram_product .product-instagram h3 { color:#262626; text-transform:uppercase; font-weight: 600; font-size: 36px; } .epico_instagram_product .hover{ background-color: rgba(0, 0, 0, 0.35) !important; } /*-----------------------------------------------------------------------------------*/ /* 85. Popup Newsletter /*-----------------------------------------------------------------------------------*/ #ep-popup-newsletter { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999999; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ } .ep-popup-newsletter-close { position: absolute; width: 45px; height: 45px; cursor: pointer; right: 10px; top: 10px; display: block; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform .4s cubic-bezier(.55,.31,.15,.93); -moz-transition: -moz-transform .4s cubic-bezier(.55,.31,.15,.93); -ms-transition: -ms-transform .4s cubic-bezier(.55,.31,.15,.93); transition: transform .4s cubic-bezier(.55,.31,.15,.93); } .ep-popup-newsletter-close:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .ep-popup-newsletter-close::before { content: ""; position: absolute; width: 2px; height: 16px; background-color: #fff; top: 15px; left: 22px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ep-popup-newsletter-close::after { content: ""; position: absolute; width: 16px; height: 2px; background-color: #fff; top: 22px; left: 15px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ep-popup-newsletter-inner { position: absolute; top: 50%; transform: translateY(-15%); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 800px; min-height: 380px; opacity: 0; background-color: #FFF; -webkit-transition: -webkit-transform 0.4s ease-out, opacity 0.3s ease-out; -moz-transition: -moz-transform 0.4s ease-out, opacity 0.3s ease-out; -ms-transition: -ms-transform 0.4s ease-out, opacity 0.3s ease-out; transition: transform 0.4s ease-out, opacity 0.3s ease-out; } .show_popup { -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); opacity: 1; } .ep-popup-newsletter-image { position: absolute; width: 40%; height: 100%; background-size: cover !important; } .ep-popup-newsletter-content { position: relative; width: calc(60% - 90px); height: calc(100% - 90px); text-align: center; padding: 45px; float:right; } .ep-popup-newsletter-content h4 { width: 90%; line-height: 40px; font-size: 28px; margin: 25px auto 8px auto; } .ep-popup-newsletter-content h6 { line-height: 25px; font-size: 14px; width: 90%; margin: 0 auto 15px auto; } p.ep-popup-newsletter-text { font-size: 12px; margin-top: 5px; margin-bottom: 25px; } .ep-popup-newsletter-shortcode.ep-newsletter { padding-top: 10px; padding-bottom: 10px; } .ep-popup-newsletter-shortcode.ep-newsletter p.wysija-paragraph { width: calc(100% - 80px); right: 20px; } .ep-popup-newsletter-shortcode.ep-newsletter p.wysija-paragraph input { height: 34px; color: #adadad; } .ep-popup-newsletter-shortcode.ep-newsletter .widget_wysija_cont .wysija-submit, .ep-popup-newsletter-shortcode.ep-newsletter .widget_wysija_cont .wysija-submit:hover { margin-right: 0; right: 50px; min-width: 100px; border: none !important; font-weight: 600; font-size:14px; color:#FFF; } .no_bg_image .ep-popup-newsletter-content { width: calc(100% - 150px); height: calc(100% - 150px); padding: 75px; } .no_bg_image .ep-popup-newsletter-shortcode.ep-newsletter p.wysija-paragraph { width: 60%; right: -70px; } .no_bg_image .ep-popup-newsletter-shortcode.ep-newsletter .widget_wysija_cont .wysija-submit { right: 180px; } /*-----------------------------------------------------------------------------------*/ /* 86. Infinite Scroll /*-----------------------------------------------------------------------------------*/ .loading-next-page { border-radius: 50%; width: 30px; height: 30px; margin: 0 auto; font-size: 10px; position: relative; text-indent: -9999em; border: 3px solid #c2c2c2; border-left: 3px solid #073B87; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: shop_spinner 1.1s infinite linear; animation: shop_spinner 1.1s infinite linear; } @-webkit-keyframes shop_spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes shop_spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }