/* 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.type5 h3, .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 .dt-sc-image-title h3:before, .dt-sc-image-caption.type4 .dt-sc-image-content:before, .dt-sc-image-caption.type4 .dt-sc-image-content h3:after, .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title:before, .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title, .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title { -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; } .dt-sc-image-caption.type5 .dt-sc-image-content { -webkit-transition: all 0.4s ease-in 0s; transition: all 0.4s ease-in 0s; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper:before, .dt-sc-image-caption.type7 .dt-sc-image-wrapper:after, .dt-sc-image-caption.type5 .dt-sc-image-wrapper:before, .dt-sc-image-caption.type5 .dt-sc-image-wrapper img { -webkit-transition: all 0.6s ease; -moz-transition:all 0.6s ease; -o-transition:all 0.9s ease; -ms-transition:all 0.6s ease; transition:all 0.6s ease; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper img { -webkit-transition: all 0.9s ease; -moz-transition:all 0.9s ease; -o-transition:all 0.9s ease; -ms-transition: all 0.9s ease; transition:all 0.9s ease; } /*-------------------------------------------------------------- 1.1 - Image Caption --------------------------------------------------------------*/ .dt-sc-image-caption-counter-wrapper { counter-reset: image-caption-counter; } .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.type3 .dt-sc-image-wrapper .icon-wrapper span.icon, .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper span.fa, .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper span.zmdi { margin-right:0; margin-bottom: 0; } .dt-sc-image-caption .dt-sc-image-title h3 { font-weight:600; text-transform:capitalize; margin-bottom:5px; position:relative; top:0px; } .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.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:30px 20px; margin:0px; float:left; width:100%; position:relative; } .dt-sc-image-caption.type2 .dt-sc-image-title { margin-bottom:15px; } .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:70px; 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; } .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper { text-align:center; background:none; border:none; position:inherit; width:100%; display:inline-block; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .dt-sc-image-caption.type3 .dt-sc-image-wrapper .icon-wrapper img { position:relative; z-index:1; top:-15px; } .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 { content:""; position:absolute; left:0px; right:0px; bottom:-17px; margin:auto; width:70px; height:70px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .dt-sc-image-caption.type3 .dt-sc-image-content h3 { font-size:18px; } .dt-sc-image-caption.type3 .dt-sc-image-content { margin-top:15px; } .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 { right: auto; left: 8px; } .dt-sc-image-caption.type3.alignleft .dt-sc-image-wrapper .icon-wrapper img { left: 23px; } .dt-sc-image-caption.type4 { text-align:center; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper .icon-wrapper { text-align: center; border: none; position: absolute; display: block; margin: 0; background-color: rgba(0,0,0,0.65); margin: auto; left: 0; right: 0; top: 0; bottom: 0; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper .icon-wrapper img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto;} .dt-sc-image-caption.type4 .dt-sc-image-wrapper .icon-wrapper:before { border:0px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3 { font-size:25px; position:relative; text-align:center; text-transform:none; } .dt-sc-image-caption.type4 .dt-sc-image-content { margin-top:15px; position:relative; padding: 40px 30px 0px;} .dt-sc-image-caption.type4 .dt-sc-image-title { margin-bottom:15px; } .dt-sc-image-caption.type4 { counter-increment: image-caption-counter; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { content: counter(image-caption-counter, decimal-leading-zero); } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { font-size:100px; position:absolute; margin:0 auto; left:0; right:0; width:100%; text-align:center; top:100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.08; } .dt-sc-image-caption.type4 .dt-sc-image-title h6 { font-size:14px; position: relative; margin:0; width:100%; text-align:center; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper .icon-wrapper:after{ display:none; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper .icon-wrapper span { font-size: 80px; margin: 0; display: block; position: absolute; z-index: 1; color: rgba(255,255,255,0.5); top: 50%; left: 0; right: 0; margin: auto; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dt-sc-image-caption.type4:hover .dt-sc-image-content h3:after { opacity: 0.05; color: #000000; } .dt-sc-image-caption.type4.alignright, .dt-sc-image-caption.type4.alignright .dt-sc-image-wrapper .icon-wrapper { text-align: right; } .dt-sc-image-caption.type4.alignright .dt-sc-image-wrapper .icon-wrapper:after { left: auto; right: 8px; } .dt-sc-image-caption.type4.alignright .dt-sc-image-wrapper .icon-wrapper img { right: 23px; } .dt-sc-image-caption.type4.alignleft, .dt-sc-image-caption.type4.alignleft .dt-sc-image-wrapper .icon-wrapper { text-align: left; } .dt-sc-image-caption.type4.alignleft .dt-sc-image-wrapper .icon-wrapper:after { right: auto; left: 8px; } .dt-sc-image-caption.type4.alignleft .dt-sc-image-wrapper .icon-wrapper img { left: 23px; } .dt-sc-image-caption.type4 .dt-sc-image-wrapper{position:relative;} .dt-sc-image-caption.type4 .dt-sc-image-content:before{content:""; position:absolute; left:0px; right:0px; margin:0px auto; top:-15px; display:inline-block; background-color:rgba(51, 51, 51, 0.14); width:77%; height:20px; line-height:0;} .dt-sc-image-caption.type4:hover .dt-sc-image-content:before{height:0px;} .dt-sc-image-caption.type5 { float: left; clear:both; margin:0px 0px 30px; padding:0px; width:100%; overflow: hidden; position: relative; } .dt-sc-image-caption.type5 .dt-sc-image-wrapper { left: 0; right: 0; top: 0; bottom: 0; vertical-align: middle; display: table; margin: 0; } .dt-sc-image-caption.type5 .dt-sc-image-wrapper:before { content: ""; position: absolute; left:0; right:0; top:0; bottom:0; opacity: 0; background-color: rgba(0,0,0,0.5); z-index: 1; } .dt-sc-image-caption.type5 .dt-sc-image-content { position: absolute; top:0; bottom:0; left:0; right:0; border: 3px double #ffffff; opacity: 0; padding: 20px; margin: 20px; z-index: 1; display: inline-block; transform: scale(1.8); -ms-transform: scale(1.8); -webkit-transform: scale(1.8); } .dt-sc-image-caption.type5 .dt-sc-image-title { top: 50%; margin: auto; width: 100%; position: absolute; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dt-sc-image-caption.type5 .dt-sc-image-title h3 { font-size: 22px; text-transform: capitalize; font-weight: 900; letter-spacing: 1px; } .dt-sc-image-caption .dt-sc-image-title h6 { text-transform: capitalize; opacity: 0.8; letter-spacing: 1px; } .dt-sc-image-caption.type5 .dt-sc-image-content p { display: none; } .dt-sc-image-caption.type5:hover .dt-sc-image-wrapper img { transform: scale(1.3) rotate(3deg); -ms-transform: scale(1.3) rotate(3deg); -webkit-transform: scale(1.3) rotate(3deg); } .dt-sc-image-caption.type5:hover .dt-sc-image-wrapper:before { opacity: 1; } .dt-sc-image-caption.type5:hover .dt-sc-image-content { opacity: 1; transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .dt-sc-image-caption.type5 .dt-sc-image-wrapper { display: inline-block; width: 100%; } } .dt-sc-image-caption.type6 { overflow: hidden; position: relative; text-align: center; } .dt-sc-image-caption.type6:before { content:""; position:absolute; left:0px; top:0px; width:100%; height:100%; z-index: 0; 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: 0; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { opacity:0.2; } .dt-sc-image-caption.type6 .dt-sc-image-content { color:#ffffff; float:left; margin-top: 0; position: absolute; left: 0; top: 50%; padding: 0 40px; width:100%; -webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dt-sc-image-caption.type6 .dt-sc-image-content .icon-wrapper {position: relative; display: inline-block; width: 100%; } .dt-sc-image-caption.type6 .dt-sc-image-content .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-content .icon-wrapper span { margin: 0; position: relative; font-size: 60px; } .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title { margin: 25px 0 20px; position: relative; padding: 30px 0 0; text-align: center; } .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title:before {content: ""; position: absolute; top: 0; width: 2px; height: 30px; background: #ffffff; opacity: 0.4; -moz-transform: translatey(-50%); -webkit-transform: translatey(-50%); transform: translatey(-50%); } .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title h3 { color:#ffffff; font-size:20px; position:relative; } .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 { -webkit-transform:scale(1.15); -moz-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); opacity:0.5; } .dt-sc-image-caption.type6:hover .dt-sc-image-content .dt-sc-image-title:before { height: 40px; width: 2px; } .dt-sc-image-caption.type6:hover .dt-sc-image-content .dt-sc-image-title { padding-top: 40px; margin-top:35px; } .dt-sc-image-caption.type6:hover .dt-sc-image-content .dt-sc-image-title:before { opacity: 0.8; } .dt-sc-image-caption.type6 .dt-sc-image-content, .dt-sc-image-caption.type6 .dt-sc-image-content > * { color: #fff; } .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 { position: relative; overflow: hidden; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper { float:left; width:50%; margin:0px; position:relative; overflow: hidden; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper img { max-width: none; width: -webkit-calc(100% + 50px); width: calc(100% + 50px); -webkit-transform: translate3d(-40px,0, 0); transform: translate3d(-40px,0,0); } .dt-sc-image-caption.type7 .dt-sc-image-wrapper:before, .dt-sc-image-caption.type7 .dt-sc-image-wrapper:after { position: absolute; content: ''; opacity: 0; z-index: 1; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper:before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 4px double; border-bottom: 4px double; -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper:after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 4px double; border-left: 4px double; -webkit-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper img { -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); } .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper img { -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); filter: grayscale(1); } .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper:before, .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper:after {opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .dt-sc-image-caption.type7:hover .dt-sc-image-wrapper:after {-webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .dt-sc-image-caption.type7 .dt-sc-image-content { float: left; width: 50%; clear: none; text-align: center; margin: 0; position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); right: 0; padding: 50px 20px; } .dt-sc-image-caption.type7 .dt-sc-image-title { margin-bottom:0px; } .dt-sc-image-caption.type7 .dt-sc-image-content h3 { font-size: 32px; line-height: 32px; letter-spacing: 0.5px; font-weight: 900; color: #041527; text-transform: capitalize; margin-bottom: 20px; padding-bottom: 35px; top:0; } .dt-sc-image-caption.type7 .dt-sc-image-content h3 a { color: #041527; } .dt-sc-image-caption.type7 .dt-sc-image-title h6 { font-size: 34px; margin: 5px 0 5px; line-height: 20px; font-weight: 400; text-transform: capitalize; color: #b7b7b7;} .dt-sc-image-caption.type7:hover .dt-sc-image-content a { background: transparent; } .dt-sc-image-caption.type7 .dt-sc-image-title h3:before { content: ""; position: absolute; background-image: url(../../images/fork-image.png); width: 52px; height: 8px; left: 0; right: 0; margin: auto; bottom: 0; } .dt-sc-image-caption.type7:hover .dt-sc-image-title h3:before { -webkit-transform: rotatex(180deg); -moz-transform: rotatex(180deg); transform: rotatex(180deg); filter: invert(100%); -webkit-filter: invert(100%); } .dt-sc-image-caption.type7 p { display: inline-block; width: 100%; line-height: 32px; font-size: 16px; color: #505050; font-weight: 400; letter-spacing: 0.5px; margin-bottom: 30px; } .dt-sc-image-caption.type7 h4 { font-weight: 900; text-transform: uppercase; color: #3d3d3d; } .dt-sc-image-caption.type7 .caption-content { display: inline-block; width: 100%; text-align: center; } .dt-sc-image-caption.type7 .caption-content p { width: 46%; font-size: 14px; margin: 0 0 10px 20px; line-height: normal; } .dt-sc-image-caption.type7 .caption-content p:nth-child(odd) { margin-left: 0; } .dt-sc-image-caption.type7 .caption-content strong { color: #041527; font-weight: 900; } .dt-sc-image-caption.type7.left-content .dt-sc-image-wrapper { margin:0px 0px 0px 3%; float:right; } .dt-sc-image-caption.type7.left-content .dt-sc-image-content { left: 0; right: auto; } .dt-sc-image-caption.type7.alter .dt-sc-image-wrapper { width: 45%; } .dt-sc-image-caption.type7.alter .dt-sc-image-content h3 { padding-bottom: 65px; } .dt-sc-image-caption.type7.alter .dt-sc-image-content { background: none; } .dt-sc-image-caption.type7.alter .dt-sc-image-title h3:before { background-image: url(../../images/title-decor.png); width:32px; height: 32px; } .dt-sc-image-caption.type7.alter:hover .dt-sc-image-title h3:before { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); filter: invert(100%); -webkit-filter: invert(100%); } .dt-sc-image-caption.type8 .dt-sc-image-content { position:relative; background:rgba(0, 0, 0, 0.03); margin-top:0px; padding:60px 20px 20px; text-align:center; width:100%; } .dt-sc-image-caption.type8 .dt-sc-image-title { margin-bottom:10px; position:relative; } .dt-sc-image-caption.type8 .dt-sc-image-content h3 { font-size:18px; font-weight:600; text-transform:none; } .dt-sc-image-caption.type8:hover .dt-sc-image-content h3 a { background:none; color:#000000; } .dt-sc-image-caption.type8 .dt-sc-image-content:before { content:""; position:absolute; left:0px; right:0px; top:-34px; margin:auto; width:68px; height:68px; border-radius:50%; text-align:center; line-height:50px; border:7px solid #ffffff; z-index:1; } .dt-sc-image-caption.type8 .dt-sc-image-title:before, .dt-sc-image-caption.type8 .dt-sc-image-title:after { content:""; position:absolute; left:0px; right:0px; margin:auto; background:#ffffff; z-index:1; } .dt-sc-image-caption.type8 .dt-sc-image-title:before { width:1px; height:20px; top:-68px; } .dt-sc-image-caption.type8 .dt-sc-image-title:after { width:20px; height:1px; top:-59px; } .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:hover .dt-sc-image-wrapper img { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .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; } .dt-sc-image-caption.type9 .dt-sc-image-wrapper { position:relative; } .dt-sc-image-caption.type9 .dt-sc-image-overlay { opacity:0; background:rgba(0, 0, 0, 0.8); position:absolute; top:0px; left:0px; width:100%; height:100%; margin:0px; padding:30px; } .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:#999999; } .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:18px; font-weight:bold; text-transform:none; } .dt-sc-image-caption.type9 .dt-sc-image-content { margin-top:20px; } .dt-sc-image-caption.type9:hover .dt-sc-image-overlay { opacity:1; } .dt-sc-image-caption.type9 .dt-sc-image-overlay .dt-sc-button:hover { background:#ffffff; color:#000000; } .dt-sc-image-caption.type9.alignright { text-align: right; } .dt-sc-image-caption.type9.alignleft { text-align: left; } /* 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; } } /*-------------------------------------------------------------- 1.2 - Default Colors --------------------------------------------------------------*/ .dt-sc-image-caption .dt-sc-image-title span { color:#000000; } .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, .dt-sc-image-caption.type5 .dt-sc-image-title h3, .dt-sc-image-caption.type5 .dt-sc-image-title h6, .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title h6 { color:#ffffff; } .dt-sc-image-caption .dt-sc-image-title h6 { color:rgba(0, 0, 0, 0.5); } .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, .dt-sc-image-caption.type6 .dt-sc-image-wrapper { background:#000000; } .dt-sc-image-caption.type2 .dt-sc-image-content { background:rgba(0, 0, 0, 0.9); } .dt-sc-image-caption.type4 .dt-sc-image-content { border-color:rgba(0, 0, 0, 0.1); } .dt-sc-image-caption:hover .dt-sc-image-wrapper .icon-wrapper:before, .dt-sc-image-caption .dt-sc-image-title span { border-bottom-color:#000000; } /*----*****---- << Desktop >> ----*****----*/ @media only screen and (min-width:1200px) and (max-width:1380px) { .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { font-size: 70px; } .dt-sc-image-caption.type6 .dt-sc-image-content p { display: none; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7 .dt-sc-image-content { width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-content { top:0; position: relative; transform: none; padding: 50px 100px; } .dt-sc-image-caption.type7.alter .dt-sc-image-wrapper { width: 100%; } } /* 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; } .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 40px 10px 0px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3 { font-size: 22px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { font-size: 70px; } .dt-sc-image-caption.type5 img { 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.type2 .dt-sc-image-content p, .dt-sc-image-caption.type9 .dt-sc-image-overlay p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7 .dt-sc-image-content { width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-content { top:0; position: relative; transform: none; padding: 50px 100px; } .dt-sc-image-caption.type7.alter .dt-sc-image-wrapper { width: 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-wrapper .icon-wrapper:before { border-bottom-width: 100px; border-left-width: 100px; } .dt-sc-image-caption .dt-sc-image-wrapper .icon-wrapper:after { left: 5px; } .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:25px 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.type3 .dt-sc-image-wrapper .icon-wrapper:after { bottom: -20px; } .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 40px 80px 0px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { font-size: 80px; } .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.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.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; text-overflow: ellipsis; white-space: nowrap; } .rs_col-sm-6 .dt-sc-image-caption.type2 { margin-bottom: 30px; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7 .dt-sc-image-content { width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-content { top:0; position: relative; transform: none; padding: 50px 60px; } .dt-sc-image-caption.type7.alter .dt-sc-image-wrapper { width: 100%; } } /* 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.type4 .dt-sc-image-content { padding: 40px 50px 0px; } .dt-sc-image-caption.type4 .dt-sc-image-content h3:after { font-size: 80px; } .dt-sc-image-caption.type5 .dt-sc-image-content { width: auto; } .dt-sc-image-caption.type6 .dt-sc-image-wrapper img { max-width: 100%; height: auto; width: 100%; } .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; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7 .dt-sc-image-content { width: 100%; } .dt-sc-image-caption.type7 .dt-sc-image-content { top:0; position: relative; transform: none; padding: 50px 20px; } .dt-sc-image-caption.type7 .caption-content p { width: 100%; margin: 0; } .dt-sc-image-caption.type7 .dt-sc-image-title h6 { font-size: 50px; } .dt-sc-image-caption.type7 .dt-sc-image-content h3 { font-size: 25px; } .dt-sc-image-caption.type7.alter .dt-sc-image-wrapper { width: 100%; } } /* 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.type3 .dt-sc-image-wrapper .icon-wrapper:after { bottom: -20px; } .dt-sc-image-caption.type4 .dt-sc-image-content { padding: 40px 5px 0px; } .dt-sc-image-caption.type5 h3 { font-size: 22px; } .dt-sc-image-caption.type6 .dt-sc-image-content .dt-sc-image-title h3 { font-size: 16px; } .dt-sc-image-caption.type7 .dt-sc-image-content { position: static; top: auto; transform: none; -moz-transform: none; -webkit-transform: none; -ms-transform: none; } .dt-sc-image-caption.type7 .dt-sc-image-wrapper, .dt-sc-image-caption.type7 .dt-sc-image-content { margin-right:0; width:100%; } .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 { margin: 0 0 30px; } .dt-sc-image-caption.type7.bottom-content .dt-sc-image-content { margin-top: 40px; } .dt-sc-image-caption.type9 .dt-sc-image-overlay p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dt-sc-image-caption.type7 .dt-sc-image-content { padding: 10px 20px; } .dt-sc-image-caption.type7 .dt-sc-image-title h6 { font-size: 45px; } } /* 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; } }