/*-------------------- 4. Sections --------------------*/ .section-title h2 { font-size: 55px; color: #323237; font-weight: 500; position: relative; margin-bottom: 20px; padding-bottom: 15px; } .section-title h2:after { left: 50%; z-index: 1; width: 40px; height: 2px; content: " "; bottom: -5px; margin-left: -20px; text-align: center; position: absolute; background: #23AD21; } .text-light .section-title h2 { color: #fff; } .section-title p { font-size: 16px; font-weight: 300; line-height: 25px; margin: 20px 100px 60px 100px; } /*-------------------- 4.1. Features --------------------*/ .features-item { width: 22%; float: left; margin: 15px 15px; text-align: center; } .features-item h3 { font-weight: 500; font-size: 19px; text-transform: uppercase; color: #000000; letter-spacing: 2px; margin-bottom: 20px; } .text-light .features-item h3 { color: #FFFFFF; } .features-item p { font-size: 14px; font-weight: 300; line-height: 22px; color: #969696; } .ot-circle { height: 95px; width: 95px; text-align: center; line-height: 98px; color: #FFFFFF; /* border: 3px solid #000; */ border-radius: 100px; background-color: #23AD21; margin: 0 2px 4px; font-size: 24px; } /*-------------------- 4.3. Portfolio --------------------*/ .ot-portfolio-item { width: 388px; float: left; } figure { position: relative; float: left; overflow: hidden; margin: 0 1px 1px 0; /* min-width: 320px; max-width: 480px; max-height: 360px; */ background: #726FB9; text-align: center; cursor: pointer; } figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ot-portfolio-item figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .ot-portfolio-item figure figcaption, .ot-portfolio-item figure figcaption > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure.effect-bubba { background: #000; margin-bottom: 1px; } figure.effect-bubba img { /* opacity: 0.95; */ -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-bubba:hover img { opacity: 0.4; } figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } figure.effect-bubba figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1); } figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); } figure.effect-bubba h2 { opacity: 0; color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; padding-top: 30%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); } figure.effect-bubba p { color: #fff; font-size: 13px; font-weight: 500; padding: 20px 2.5em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); } figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } figure.effect-bubba:hover h2, figure.effect-bubba:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /*-------------------- 4.6. Team --------------------*/ .team-item { width: 350px; float: left; margin: 15px 15px; text-align: center; background-color: #fff; } .team-item h3 { font-size: 16px; font-weight: 800; text-transform: uppercase; color: #2D2D2D; } .team-item .team-position { color: #989898; font-size: 12px; margin: 15px 0 10px; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; } .team-item p { font-size: 13px; font-weight: 400; color: #292929; padding: 5px 10px 20px 10px; } /*-------------------- 4.7. Contacts --------------------*/ .contact h3 { margin-bottom: 30px; } .contact p { font-size: 13px; } #contact .section-text p { font-size: 14px; margin-bottom: 0px; } #contact .section-text { margin-bottom: 20px; } .contact .day { display: inline-block; width: 80px; } #contact i { margin-right: 5px; } /*-------------------- Slick Slider --------------------*/ .slick-slider { position: relative; margin-bottom: 30px; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -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); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slick Slider Theme */ .slick-loading .slick-list { background: #fff url('ajax-loader.gif') center center no-repeat; } /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 40px; height: 40px; padding: 0; margin-top: -10px\9; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 100; cursor: pointer; color: transparent; border: 2px solid #EFEFEF; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'FontAwesome'; font-size: 20px; line-height: 1; opacity: .75; color: #DEDEDE; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: 10px; padding: 10px 0px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: "\f053"; } [dir='rtl'] .slick-prev:before { content: "\f053"; } .slick-next { right: 10px; padding: 10px 13px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: "\f054"; } [dir='rtl'] .slick-next:before { content: "\f054"; }