/* Table of Content ================================================== 1.0 - Transition 2.0 - Image Caption 3.0 - Browser Fix 4.0 - Default Color 5.0 - Responsive*/ /*-------------------------------------------------------------- 1.0 - Transition --------------------------------------------------------------*/ .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper:before, .dt-sc-image-caption.type2 .dt-sc-image-content, .dt-sc-image-caption.type5, .dt-sc-image-caption.type6, .dt-sc-image-caption.type6 .dt-sc-image-wrapper img, .dt-sc-image-caption.type6:hover:before, .dt-sc-image-caption.type8 .dt-sc-image-wrapper img, .dt-sc-image-caption.type9 .dt-sc-image-overlay, .dt-sc-image-caption.type9 .dt-sc-image-content, .dt-sc-image-caption.type4 .dt-sc-image-content, .dt-sc-image-caption.type4 .dt-sc-image-content h3, .dt-sc-image-caption.type4 .dt-sc-button span, .dt-sc-image-caption.type8 .dt-sc-image-content, .dt-sc-image-caption.type8 *, .dt-sc-image-caption.type8 *:before, .dt-sc-image-caption.type7 *:before, .dt-sc-image-caption.type7 *:after, .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type4, .dt-sc-image-caption.type4 *, .dt-sc-image-caption.type4 *:before, .dt-sc-image-caption.type4 *:after, .dt-sc-image-caption.type9 .dt-sc-image-title, .dt-sc-image-caption.type9 .dt-sc-image-content, .dt-sc-image-caption.type3, .dt-sc-image-caption.type3 *, .dt-sc-image-caption.type3 *:after, .dt-sc-image-caption.with-separator .dt-sc-image-title:before, .dt-sc-image-caption.with-separator .dt-sc-image-title:after { -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; } /*-------------------------------------------------------------- 2.0 - Image Caption --------------------------------------------------------------*/ .dt-sc-image-caption { float:left; clear:both; width:100%; margin:0px; padding:0px; } .dt-sc-image-caption .dt-sc-image-wrapper { position:relative; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper { position:absolute; bottom:0px; right:0px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper span { font-size:36px; margin:0px 20px 20px 0px; display:inline-block; position:relative; z-index:1; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper:before { content:""; position:absolute; right:0px; bottom:0px; width:0px; height:0px; border-bottom:130px solid; border-left:130px solid transparent; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper:after { content:""; position:absolute; left:-14px; bottom:-32px; width:7px; height:200px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .dt-sc-image-caption .dt-sc-image-content { display:inline-block; clear:both; margin:30px 0px 0px; } .dt-sc-image-caption .dt-sc-image-title { margin-bottom:30px; display:inline-block; width:100%; } .dt-sc-image-caption .dt-sc-image-title h3 { font-weight:600; text-transform:uppercase; margin-bottom:5px; position:relative; top:-2px; } .dt-sc-image-caption .dt-sc-image-title h6 { text-transform:uppercase; font-size:12px; margin-bottom:0px; } .dt-sc-image-caption .dt-sc-image-content a { margin-top:20px; } .dt-sc-image-caption.with-separator { margin-bottom: 50px; } .dt-sc-image-caption.with-separator .dt-sc-image-title * { text-transform: inherit; } .dt-sc-image-caption.with-separator .dt-sc-image-title { width: 100%; float: left; position: relative; } .dt-sc-image-caption.with-separator .dt-sc-image-title h4 { font-size: 22px; } .dt-sc-image-caption.with-separator .dt-sc-image-title:before { position: absolute; content: ""; display: block; bottom: -12px; left: 0; width: 50px; height: 3px; background: #ebebeb; } .dt-sc-image-caption.with-separator .dt-sc-image-title:after { position: absolute; content: ""; display: block; bottom: -12px; left: 0; width: 0; height: 3px; opacity: 0; } .wpb_column .vc_column-inner .dt-sc-image-caption.with-separator:last-child { margin-bottom: 0; } .dt-sc-image-caption.with-separator:hover .dt-sc-image-title:before { opacity: 0; width:0; } .dt-sc-image-caption.with-separator:hover .dt-sc-image-title:after { width: 75px; opacity: 1; } .dt-sc-image-caption.with-separator.aligncenter .dt-sc-image-title:before, .dt-sc-image-caption.with-separator.aligncenter .dt-sc-image-title:after { right: 0; margin: 0 auto; } .dt-sc-image-caption.with-separator.alignright .dt-sc-image-title:before, .dt-sc-image-caption.with-separator.alignright .dt-sc-image-title:after { right: 0; left: auto; } .dt-sc-image-caption.type2 { padding:0px 1px 0px 0px; position:relative; z-index:9; } .dt-sc-image-caption.type2 .dt-sc-image-content { border-top:2px solid; text-align:center; padding:18px 20px; margin:0px; float:left; width:100%; position:relative; } .dt-sc-image-caption.type2 .dt-sc-image-title { margin-top:12px; } .dt-sc-image-caption.type2 .dt-sc-image-content h3 { font-size:16px; } .dt-sc-image-caption.type2 .dt-sc-image-wrapper { clear:both; overflow:hidden; } .dt-sc-image-caption.type2:hover .dt-sc-image-wrapper img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .dt-sc-image-caption.type2 .dt-sc-image-content { height:78px; } .dt-sc-image-caption.type2:hover .dt-sc-image-content { height:148px; margin-top:-70px; } .dt-sc-image-caption.type2 .dt-sc-image-content p { opacity: 0; position: absolute; top: 53px; left: 20px; right: 20px; margin: auto; } .dt-sc-image-caption.type2:hover .dt-sc-image-content p { opacity:1; } .dt-sc-image-caption.type2.alignleft .dt-sc-image-content { text-align: left; } .dt-sc-image-caption.type2.alignright .dt-sc-image-content { text-align: right; } .dt-sc-image-caption.type3 { text-align: center; margin-bottom: 50px; border-radius: 3px; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.075); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.075); background: #fff; } .dt-sc-image-caption.type3:hover, .dt-sc-image-caption.type3:hover .dt-sc-image-wrapper .icon-wrapper span { color: #fff; } .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper { background: none; border: none; display: inline-block; position: inherit; text-align: center; width: 100%; } .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper span {margin: 0px 0px 20px 0px;} .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper img { position: relative; top: -25px; width: 35px; z-index: 1; } .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper:before {border: 0px;} .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper:after { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); border-radius: 50%; bottom: 0; content: ""; height: 80px; left: 0px; margin: auto; position: absolute; right: 0px; transform: rotate(90deg); width: 80px; } .dt-sc-image-caption.type3 .dt-sc-image-content h3 {font-size: 18px;} .dt-sc-image-caption.type3:hover .dt-sc-image-content * {color: #fff !important} .dt-sc-image-caption.type3 .dt-sc-image-content { margin-top: 0; padding: 0 30px 30px; } .dt-sc-image-caption.type3 .dt-sc-image-title {margin-bottom: 15px;} .dt-sc-image-caption.type3.alignright, .dt-sc-image-caption.type3.alignright .dt-sc-image-wrapper .icon-wrapper {text-align: right;} .dt-sc-image-caption.type3.alignright .dt-sc-image-wrapper .icon-wrapper:after { left: auto; right: 8px; } .dt-sc-image-caption.type3.alignright .dt-sc-image-wrapper .icon-wrapper img {right: 23px;} .dt-sc-image-caption.type3.alignleft, .dt-sc-image-caption.type3.alignleft .dt-sc-image-wrapper .icon-wrapper {text-align: left;} .dt-sc-image-caption.type3.alignleft .dt-sc-image-wrapper .icon-wrapper:after { left: 8px; right: auto; } .dt-sc-image-caption.type3.alignleft .dt-sc-image-wrapper .icon-wrapper img {left: 23px;} .ult-item-wrap > div.dt-sc-image-caption.type3 {margin-bottom: 50px !important;} .dt-sc-image-caption.type4 { margin-bottom: 35px; position: relative; } .dt-sc-image-caption.type4.last {margin-bottom: 0;} .dt-sc-image-caption.type4 .dt-sc-image-content { -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; margin: 0 auto; padding: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 80%; } .dt-sc-image-caption.type4 .dt-sc-image-content p {margin-bottom: 0;} .dt-sc-image-caption.type4 .dt-sc-image-content h3 { font-size: 20px; font-weight: 800; margin-bottom: 0; padding-bottom: 30px; position: relative; text-transform: inherit; top: auto; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:before { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 50px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 0; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper { float: left; overflow: hidden; position: relative; width: 100%; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper img { float: left; width: 100%; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper:before { background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%,rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%,rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255,0.6)), color-stop(100%,rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%,rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%,rgba(255, 255, 255, 0) 100%); content: ""; display: block; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); height: 50%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; } .dt-sc-image-caption.type4 .dt-sc-image-content { opacity: 0; visibility: hidden; z-index: 10; } .dt-sc-image-caption.type4:hover .dt-sc-image-content { opacity: 1; visibility: visible; } .dt-sc-image-caption.type4:hover .dt-sc-image-wrapper:before {height: 100%;} .dt-sc-image-caption.type4:hover .dt-sc-image-content h3:before {width: 0;} .dt-sc-image-caption.type4:hover .dt-sc-image-content h3:after {width: 50px;} .dt-sc-image-caption.type4 .dt-sc-button {margin-top: 0;} .dt-sc-image-caption.type4:hover .dt-sc-image-content a {background: none;} .dt-sc-image-caption.type4:hover .dt-sc-image-content a:before {content: none;} .dt-sc-image-caption.type5 { float:left; clear:both; margin:0px 0px 40px; width:100%; } .dt-sc-image-caption.type5 .dt-sc-image-content { margin-top:30px; } .dt-sc-image-caption.type5 .dt-sc-image-content p { margin: 20px 0px 0px; clear: both; font-weight: 300; } .dt-sc-image-caption.type5 .dt-sc-image-title { margin-bottom: 0; } .dt-sc-image-caption.type5 .dt-sc-image-title h3 { display: inline-block; margin: 0px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 2px; } .dt-sc-image-caption.type5 .dt-sc-image-title h6 { text-transform: inherit; font-weight: 700; font-size: 20px; color: #4D4D4D; line-height: normal; } .dt-sc-image-caption.type5 .dt-sc-image-wrapper img { border-radius: 10px; } .dt-sc-image-caption.type5:hover .dt-sc-image-wrapper img { border-radius: 30px; } .dt-sc-image-caption.type5.aligncenter { text-align: center; padding:6px 25px 5px; } .dt-sc-image-caption.type5.alignright { text-align: right; } .dt-sc-image-caption.type5.alignleft h3, .dt-sc-image-caption.type5.alignright h3 { padding:6px 0 5px; } .dt-sc-image-caption.type5 .dt-sc-image-content a.dt-sc-button { margin-top: 0; } .dt-sc-image-caption.type5:hover .dt-sc-image-content a { background: none; } .dt-sc-image-caption.type6 { padding-bottom: 36px; position: relative; text-align: center; overflow: hidden; } .dt-sc-image-caption.type6:before { content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:2; background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); /* FF3.6+ */ background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0,0)), color-stop(100%,rgba(0, 0, 0, 0.7))); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); /* Chrome10+,Safari5.1+ */ background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); /* Opera 11.10+ */ background:-ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); /* IE10+ */ background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.7) 100%); /* W3C */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } .dt-sc-image-caption.type6 .dt-sc-image-wrapper { padding:85px 0px 0px; position:inherit; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { position:absolute; top:0px; opacity:0.2; height: auto; width: 100%; max-width:none; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper .icon-wrapper { position:inherit; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper .icon-wrapper:before, .dt-sc-image-caption.type6 .dt-sc-image-wrapper .icon-wrapper:after { border:none; background:none; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper .icon-wrapper span { margin:0px; z-index:3; position:relative; } .dt-sc-image-caption.type6 .dt-sc-image-content { color:#ffffff; padding:0px 40px; width:100%; float:left; margin-top:20px; } .dt-sc-image-caption.type6 .dt-sc-image-title { margin-bottom:25px; } .dt-sc-image-caption.type6 h3 { color:#ffffff; font-size:18px; position:relative; z-index:3; } .dt-sc-image-caption.type6 h3:before { content:""; position:absolute; height:2px; width:70px; left:0px; right:0px; margin:auto; bottom:-20px; background:#ffffff; } .dt-sc-image-caption.type6 p { font-size:14px; line-height:27px; position:relative; z-index:3; } .dt-sc-image-caption.type6:hover { z-index:9; } .dt-sc-image-caption.type6:hover:before { top:-23px; -webkit-transform:scale(1.15); -moz-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); } .dt-sc-image-caption.type6:hover .dt-sc-image-wrapper img { top:-23px; -webkit-transform:scale(1.15); -moz-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); opacity:1; z-index:1; } .dt-sc-image-caption.type6.purple { background:#521d6d; } .dt-sc-image-caption.type6.blue { background:#25b9f3; } .dt-sc-image-caption.type6.green { background:#598527; } .dt-sc-image-caption.type6.yellow { background:#fcdb34; } .dt-sc-image-caption.type6.alignleft { text-align: left; } .dt-sc-image-caption.type6.alignright { text-align: right; } .dt-sc-image-caption.type6.alignleft .dt-sc-image-wrapper .icon-wrapper { right: auto; left: 40px; } .dt-sc-image-caption.type6.alignright .dt-sc-image-wrapper .icon-wrapper { left: auto; right: 40px; } .dt-sc-image-caption.type6.alignleft h3:before { left: 0; right: auto; } .dt-sc-image-caption.type6.alignright h3:before { right: 0; left: auto; } .dt-sc-image-caption.type7 { box-sizing: border-box; display: inline-block; float: none; margin: 0 auto 50px; position: relative; width: 92%; } .dt-sc-image-caption.type7:last-child {margin-bottom: 0;} .dt-sc-image-caption.type7 .dt-sc-image-wrapper { background: none; border-radius: 50%; float: left; left: 0; overflow: hidden; position: absolute; top: 0; width: 170px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper img { border-radius: 50%; height: auto; width: 170px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper { height: 40px; left: 0; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper img { border-radius: 0; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; width: 40px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper span { font-size: 24px; margin: 0px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper img, .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper span { -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); top: 50%; transform: translateY(-50%); } .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper:before, .dt-sc-image-caption.type7 .dt-sc-image-wrapper .icon-wrapper:after {content: none;} .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper img { -moz-box-shadow: 0px 0px 0px 20px #fff; -moz-transform: scale(0.7); -ms-transform: scale(0.7); -webkit-box-shadow: 0px 0px 0px 20px #fff; -webkit-transform: scale(0.7); box-shadow: 0px 0px 0px 20px #fff; transform: scale(0.7); } .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper .icon-wrapper {height: 100%;} .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper .icon-wrapper span { font-size: 32px; margin: 0; } .dt-sc-image-caption.type7 .dt-sc-image-content { box-sizing: border-box; clear: none; float: left; font-weight: 300; margin: 0; padding: 0 0 0 200px; position: relative; text-align: left; width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-title {margin-bottom: 10px;} .dt-sc-image-caption.type7 .dt-sc-image-content h3 { font-size: 24px; font-weight: 500; line-height: 30px; margin-bottom: 15px; padding-bottom: 26px; position: relative; text-transform: none; } .dt-sc-image-caption.type7 .dt-sc-image-content h3:before { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 50px; } .dt-sc-image-caption.type7 .dt-sc-image-content h3:after { bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: 0; } .dt-sc-image-caption.type7:hover .dt-sc-image-content h3:before {width: 0;} .dt-sc-image-caption.type7:hover .dt-sc-image-content h3:after {width: 50px;} .dt-sc-image-caption.type7.bottom-content .dt-sc-image-wrapper { margin: 0px; width: 100%; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-wrapper:before { border-bottom: 15px solid #ffffff; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 0px; bottom: 0px; left: 0px; right: 0px; top: inherit; width: 0px; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 90px; width: 100%; } .dt-sc-image-caption.type7.left-content .dt-sc-image-wrapper { float: right; left: auto; margin: 0px 0px 0px 3%; position: absolute; right: 0; } .dt-sc-image-caption.type7.left-content .dt-sc-image-wrapper:before { border-left: 15px solid #ffffff; border-right: 0px; left: 0px; right: inherit; } .dt-sc-image-caption.type7.left-content .dt-sc-image-content h3:before, .dt-sc-image-caption.type7.left-content .dt-sc-image-content h3:after { left: auto; right: 0; } .dt-sc-image-caption.type7.left-content .dt-sc-image-content { padding: 0 200px 0 0; text-align: right; } .dt-sc-image-caption.type7.top-content .dt-sc-image-wrapper { margin: 0px; width: 100%; } .dt-sc-image-caption.type7.top-content .dt-sc-image-wrapper:before { border-bottom: 0px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #ffffff; bottom: inherit; left: 0px; right: 0px; top: 0px; width: 0px; } .dt-sc-image-caption.type7.top-content .dt-sc-image-content { margin-bottom: 90px; margin-top: 70px; width: 100%; } .wpb_column.vc_column_container.vc_col-sm-3 .dt-sc-image-caption.type7, .wpb_column.vc_column_container.vc_col-sm-2 .dt-sc-image-caption.type7 { float: left; padding: 30px; width: 100%; } .wpb_column.vc_column_container.vc_col-sm-3 .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .wpb_column.vc_column_container.vc_col-sm-2 .dt-sc-image-caption.type7 .dt-sc-image-wrapper { position: static; width: 170px; } .wpb_column.vc_column_container.vc_col-sm-3 .dt-sc-image-caption.type7 .dt-sc-image-wrapper img, .wpb_column.vc_column_container.vc_col-sm-2 .dt-sc-image-caption.type7 .dt-sc-image-wrapper img {float: left;} .wpb_column.vc_column_container.vc_col-sm-3 .dt-sc-image-caption.type7 .dt-sc-image-content, .wpb_column.vc_column_container.vc_col-sm-2 .dt-sc-image-caption.type7 .dt-sc-image-content { padding: 50px 0 0; width: 100%; } .dt-sc-image-caption.type8 .dt-sc-image-content { position:relative; margin-top:0px; padding: 30px; text-align:center; width:100%; color: #ffffff; } .dt-sc-image-caption.type8 .dt-sc-image-content h3 { font-size: 28px; font-weight: bold; text-transform: none; position: relative; top: 0; margin-bottom: 15px; padding-bottom: 35px; color: #fff; } .dt-sc-image-caption.type8 .dt-sc-image-content h3:before { position: absolute; content: ""; display: block; left: 0; right: 0; bottom: 0; margin:0 auto; width: 35px; height: 4px; background: #ffffff; } .dt-sc-image-caption.type8.alignleft .dt-sc-image-content h3:before { right: auto; } .dt-sc-image-caption.type8.alignright .dt-sc-image-content h3:before { left: auto; right: 0; } .dt-sc-image-caption.type8 .dt-sc-image-content h5 { font-weight: 600; float: none; display: inline-block; margin-top: 20px; } .dt-sc-image-caption.type8 .dt-sc-image-content img { float: none; display: inline-block; margin-right: 20px; } .dt-sc-image-caption.type8 .dt-sc-image-content img:last-child { margin-right: 0; } .dt-sc-image-caption.type8:hover, .dt-sc-image-caption.type8:hover .dt-sc-image-title h6, .dt-sc-image-caption.type8:hover .dt-sc-image-content h5, .dt-sc-image-caption.type8:hover .dt-sc-image-content h3, .dt-sc-image-caption.type8:hover .dt-sc-image-content h3 a, .dt-sc-image-caption.type8:hover .dt-sc-image-content p, .dt-sc-image-caption.type8:hover .dt-sc-image-wrapper .icon-wrapper span { color: #4d4d4d; } .dt-sc-image-caption.type8:hover .dt-sc-image-content h3:before { background: #4d4d4d; width: 60px; } .dt-sc-image-caption.type8 .dt-sc-image-title { margin-bottom: 20px; position:relative; } .dt-sc-image-caption.type8 .dt-sc-image-title h6 { font-size: 18px; text-transform: inherit; color:#ffffff; margin-top: 20px; float: none; display: inline-block; } .dt-sc-image-caption.type8:hover .dt-sc-image-content h3 a { background:none; color:#4d4d4d; } .dt-sc-image-caption.type8 .dt-sc-image-wrapper { overflow:hidden; } .dt-sc-image-caption.type8 .dt-sc-image-wrapper a { display:block; line-height:0px; } .dt-sc-image-caption.type8 .dt-sc-image-wrapper img { display:block; } .dt-sc-image-caption.type8 .dt-sc-image-wrapper .icon-wrapper:after { display: none; } .dt-sc-image-caption.type8:hover .dt-sc-image-wrapper img { -webkit-filter: grayscale(1); filter: grayscale(1); } .dt-sc-image-caption.type8.alignleft .dt-sc-image-content { text-align: left; } .dt-sc-image-caption.type8.alignright .dt-sc-image-content { text-align: right; } .dt-sc-image-caption.type9 { position:relative; overflow: hidden; margin-bottom: 30px; } .dt-sc-image-caption.type9 .dt-sc-image-wrapper { position:relative; } .dt-sc-image-caption.type9 .dt-sc-image-overlay { opacity: 1; background: rgba(0, 0, 0, 0.75); position: absolute; top: 0px; left: 0; width: 100%; height: 100%; margin: 0px; color: #fff; } .dt-sc-image-caption.type9 .dt-sc-image-overlay p, .dt-sc-image-caption.type9 .dt-sc-image-overlay ul.dt-sc-fancy-list { color: #ffffff; position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); padding: 30px; text-align: center; } .dt-sc-image-caption.type9 .dt-sc-image-overlay .dt-sc-button { font-size:14px; letter-spacing:1px; margin:15px 0px 0px; } .dt-sc-image-caption.type9 .dt-sc-image-content h3 { font-size: 24px; text-transform: none; line-height: 30px; } .dt-sc-image-caption.type9 .dt-sc-image-content h6 { font-size: 14px; color: #4d4d4d; font-weight: 100; text-transform: inherit; } .dt-sc-image-caption.type9 .dt-sc-image-content { opacity: 0; position: absolute; bottom: 0; left: 0px; padding: 15px 30px; height: 100%; width: 100%; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .dt-sc-image-caption.type9 .dt-sc-image-title { opacity: 0; margin-bottom: 0; position: absolute; bottom: 20px; text-align: right; width: 70%; right: -20px; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .dt-sc-image-caption.type9:hover .dt-sc-image-overlay { opacity:0; left: -100%; } .dt-sc-image-caption.type9:hover .dt-sc-image-content { opacity: 1; } .dt-sc-image-caption.type9:hover .dt-sc-image-title { opacity: 1; right: 20px; } .dt-sc-image-caption.type9 .dt-sc-image-overlay .dt-sc-button:hover { background:#ffffff; color:#4d4d4d; } .dt-sc-image-caption.type9 .dt-sc-image-overlay:empty { display: none; } .dt-sc-image-caption.type9.last { margin-bottom: 0; } .dt-sc-image-caption.type9.alignright { text-align: right; } .dt-sc-image-caption.type9.alignleft { text-align: left; } .dt-sc-image-caption.type9.middle-content .dt-sc-image-title { right: 0; left: 0; margin: 0 auto; bottom: auto; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); text-align: center; } /*-------------------------------------------------------------- 3.0 - Browser Fix --------------------------------------------------------------*/ /* IE9 and above */ @media screen and (min-width:0\0) { .type8.dt-sc-image-caption .dt-sc-image-content::before { border: none; box-shadow: 0 0 0 7px #fff; -ms-box-shadow: 0 0 0 7px #fff; top: -24px; } } /*-------------------------------------------------------------- 4.0 - Default Colors --------------------------------------------------------------*/ .dt-sc-image-caption .dt-sc-image-title span, .dt-sc-image-caption.type4:hover .dt-sc-image-content a { color:#4d4d4d; } .dt-sc-image-caption:hover .dt-sc-image-wrapper .icon-wrapper span, .dt-sc-image-caption:hover .dt-sc-image-content a, .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper span, .dt-sc-image-caption.type2 .dt-sc-image-content, .dt-sc-image-caption.type2 .dt-sc-image-content h3, .dt-sc-image-caption.type2:hover .dt-sc-image-content p { color:#ffffff; } .dt-sc-image-caption .dt-sc-image-title h6 { color:rgba(0, 0, 0, 0.5); } .dt-sc-image-caption.type4 .dt-sc-button { color:#5b5b5b; } .dt-sc-image-caption.type2 .dt-sc-image-content p { color:rgba(255, 255, 255, 0.5); } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper:after { background:#ffffff; } .dt-sc-image-caption:hover .dt-sc-image-content a { background:#4d4d4d; } .dt-sc-image-caption.type2 .dt-sc-image-content { background:rgba(0, 0, 0, 0.9); } .dt-sc-image-caption.type4:hover .dt-sc-image-content { background: rgba(255,255,255,0.5); } .dt-sc-image-caption:hover .dt-sc-image-wrapper .icon-wrapper:before, .dt-sc-image-caption .dt-sc-image-title span { border-bottom-color:#4d4d4d; } /*-------------------------------------------------------------- 5.0 - Responsive --------------------------------------------------------------*/ /*----*****---- << Desktop >> ----*****----*/ @media only screen and (min-width:1200px) and (max-width:1280px) { .dt-sc-image-caption.type2 .dt-sc-image-content h3 { font-size: 14px; } .dt-sc-image-caption.type6 { overflow: hidden; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper { padding: 45px 0 0; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-height: none; width: 100%; } .dt-sc-image-caption.type6:hover:before { top: 0; } .dt-sc-image-caption.type6 .dt-sc-image-content p { display: none; } } /* Note: Design for a width of 960px */ @media only screen and (min-width:992px) and (max-width:1199px) { /** Image Caption **/ .dt-sc-image-caption.type2 .dt-sc-image-content { padding: 20px 15px; height: 82px; } .dt-sc-image-caption .dt-sc-image-title h3 { font-size: 20px; } .dt-sc-image-caption.type2 .dt-sc-image-content h3 { font-size: 12px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3 { font-size: 16px; margin-bottom: 10px; line-height: normal; } .dt-sc-image-caption.type5 img { width: 100%; } .dt-sc-image-caption.type6 { overflow: hidden; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper { padding: 30px 0px 0px; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-height: none; width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-content { margin-top: 35px; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 55px; } .dt-sc-image-caption.type8 .dt-sc-image-content > img { width: 40%; } .dt-sc-image-caption.type2 .dt-sc-image-content p { font-size: 10px; } .dt-sc-image-caption.type9 .dt-sc-image-overlay p, .dt-sc-image-caption.type9 .dt-sc-image-overlay ul.dt-sc-fancy-list { font-size: 12px; } .vc_col-sm-4 .dt-sc-image-caption.type4 .dt-sc-image-content, .vc_col-sm-2 .dt-sc-image-caption.type4 .dt-sc-image-content, .vc_col-sm-2 .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 20px; width: 100%; height: 100%; } } /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:991px) { /** Image Caption **/ .dt-sc-image-caption .dt-sc-image-title h3 { font-size: 20px; line-height: normal; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper::before { border-bottom-width: 100px; border-left-width: 100px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper::after { left: 6px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper span { font-size: 30px; margin: 0 15px 15px 0; } .dt-sc-image-caption.type2 .dt-sc-image-content h3 { text-transform:capitalize; font-size:14px; } .dt-sc-image-caption.type2 .dt-sc-image-content { padding:18px 10px 15px; } .dt-sc-image-caption.type2 .dt-sc-image-title { margin-bottom:0; } .dt-sc-image-caption.type2 .dt-sc-image-content p { top:57px; } .dt-sc-image-caption.type4 { margin-bottom: 21px; } .dt-sc-image-caption.type4 .dt-sc-image-content a { margin-top: 5px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3 { font-size: 14px; margin-bottom: 0px; line-height: normal; padding-bottom: 15px; } .vc_col-sm-4 .dt-sc-image-caption.type4 .dt-sc-image-content, .vc_col-sm-2 .dt-sc-image-caption.type4 .dt-sc-image-content, .vc_col-sm-2 .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 20px; width: 100%; height: 100%; } .dt-sc-image-caption.type5 .dt-sc-image-content, .dt-sc-image-caption.type5 .dt-sc-image-title, .dt-sc-image-caption.type5 .dt-sc-image-title h3 { width: 100%; } .dt-sc-image-caption.type6 { overflow: hidden; padding-bottom: 40px; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-height: none; } .dt-sc-image-caption.type6 h3 { font-size: 20px; } .dt-sc-image-caption.type6 p, .dt-sc-image-caption.type6 .dt-sc-image-content p { display: none; } .dt-sc-image-caption.type6:hover:before { top: -18px; } .dt-sc-image-caption.type6:hover .dt-sc-image-wrapper img { top: -20px; } .dt-sc-image-caption.type7 .dt-sc-image-content { margin-top: 10px; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 30px; } .dt-sc-image-caption.type8 .dt-sc-image-title h6 { line-height: normal; } .dt-sc-image-caption.type9 .dt-sc-image-content .dt-sc-image-title h3 {text-transform:capitalize; } .dt-sc-image-caption.type9 .dt-sc-image-overlay p { overflow: hidden; font-size: 10px; line-height: 24px; } .dt-sc-image-caption.type9 .dt-sc-image-content h3 { font-size: 20px; } .dt-sc-image-caption.type9 .dt-sc-image-content h6 { font-size: 16px; } .rs_col-sm-6 .dt-sc-image-caption.type2 { margin-bottom: 30px; } } /* Common Styles for the devices below 767px width */ @media only screen and (max-width: 767px) { /** Image Caption **/ .dt-sc-image-caption .dt-sc-image-wrapper > img, .dt-sc-image-caption .dt-sc-image-content { width: 100%; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-width: 100%; height: auto; width: 100%; } .dt-sc-image-caption.type6 { padding-bottom: 28px; } .dt-sc-image-caption.type7 { margin: 0 0 30px; } .dt-sc-image-caption.type7 .dt-sc-image-content { margin: 0; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 50px; } } /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) { /** Image Caption **/ .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper::before { border-bottom-width: 100px; border-left-width: 100px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper::after { left: 7px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper span { font-size: 30px; margin: 0 15px 15px 0; } .dt-sc-image-caption.type5 h3 { font-size: 22px; } .dt-sc-image-caption.type2 .dt-sc-image-content p { font-size: 12px; } .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 20px; width: 100%; height: 100%; } .dt-sc-image-caption.type4 .dt-sc-image-content h3 { line-height: normal; font-size: 16px; margin-bottom: 0px; padding-bottom: 20px; } .dt-sc-image-caption.type4 .dt-sc-button { margin-top: 10px; } .dt-sc-image-caption.type6 { min-height: 190px; padding-bottom: 0; } .dt-sc-image-caption.type6 h3 { font-size: 14px; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper { padding: 35px 0 0; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-height: 190px; } .dt-sc-image-caption.type6 .dt-sc-image-content { margin-top: 20px; } .dt-sc-image-caption.type6 .dt-sc-image-content p { display: none; } .dt-sc-image-caption.type6:hover:before { top: -14px; } .dt-sc-image-caption.type6:hover .dt-sc-image-wrapper img { top: -15px; } .dt-sc-image-caption.type7 .dt-sc-image-content, .dt-sc-image-caption.type7.left-content .dt-sc-image-content { margin-right: 0; width: 100%; padding: 0; margin-top: 30px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7.left-content .dt-sc-image-wrapper, .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { position: static; width: 170px; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 40px; } .dt-sc-image-caption.type8 .dt-sc-image-title h6 { line-height: normal; } .dt-sc-image-caption.type9 .dt-sc-image-overlay p { font-size: 12px; line-height: 24px; } .dt-sc-image-caption.type9 .dt-sc-image-title h3 { margin-bottom: 0; top: 0; } .dt-sc-image-caption.type9 .dt-sc-image-content h3 { font-size: 16px; } .dt-sc-image-caption.type9 .dt-sc-image-content h6 { font-size: 12px; } .dt-sc-image-caption.type9 .dt-sc-image-content { padding: 10px 15px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 319px) { /** Image Caption **/ .dt-sc-image-caption.type2 .dt-sc-image-content p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-sc-image-caption.type5 h3 { font-size: 16px; padding: 6px 15px 5px; border-radius: 5px; } .dt-sc-image-caption.type6 { min-height: 140px; padding-bottom: 0; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper { padding: 15px 0 0; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-height: 140px; } .dt-sc-image-caption.type6 .dt-sc-image-content { margin-top: 10px; } .dt-sc-image-caption.type6:hover:before, .dt-sc-image-caption.type6:hover .dt-sc-image-wrapper img { top: 0; } .dt-sc-image-caption.type9 .dt-sc-image-overlay { padding: 20px 15px; } }