/* Table of Content ================================================== 1.0 - Title 1.1 - Default Colors 1.2 - Responsive*/ /*-------------------------------------------------------------- 1.0 - Title --------------------------------------------------------------*/ .dt-sc-title { clear:both; float:left; position:relative; } .aligncenter .dt-sc-title { width:100%; } .dt-sc-title.aligncenter { display: table; float: none; } .dt-sc-title .dt-sc-main-heading { margin-bottom: 10px; } .dt-sc-title.with-sub-title .dt-sc-main-heading { margin-bottom:10px; } .dt-sc-title.with-sub-title .dt-sc-sub-heading { font-size:14px; letter-spacing:1px; } .dt-sc-title.script-with-sub-title .dt-sc-main-heading { text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; } .dt-sc-title.script-with-sub-title h6.dt-sc-main-heading { font-size: 16px; } .dt-sc-title.script-with-sub-title .dt-sc-sub-heading { margin-bottom: 0; } .dt-sc-title.script-with-sub-title.alter .dt-sc-main-heading { color: #050505 } .dt-sc-dark-bg .dt-sc-title.script-with-sub-title.alter .dt-sc-main-heading { color: #fff; } .dt-sc-title.with-two-color-bg .dt-sc-main-heading { line-height: normal; position: relative; font-size: 40px; text-transform: uppercase; } .dt-sc-title.with-separator-top .dt-sc-main-heading, .dt-sc-title.with-separator-bottom .dt-sc-main-heading { position: relative; } .dt-sc-title.with-separator-top .dt-sc-main-heading { padding-top: 15px; } .dt-sc-title.with-separator-bottom .dt-sc-main-heading { padding-bottom: 20px; } .dt-sc-title.with-separator-top .dt-sc-main-heading:before, .dt-sc-title.with-separator-bottom .dt-sc-main-heading:after { background-color: currentColor; content: ""; display: inline-block; height: 3px; position: absolute; width: 45px; } .dt-sc-title.with-separator-top .dt-sc-main-heading:before { top: 0; } .dt-sc-title.with-separator-bottom .dt-sc-main-heading:after { bottom: 0; } .dt-sc-title.with-separator-top .dt-sc-main-heading:before, .dt-sc-title.with-separator-bottom .dt-sc-main-heading:after { left: 0; } .dt-sc-title.with-separator-top.aligncenter .dt-sc-main-heading:before, .dt-sc-title.with-separator-bottom.aligncenter .dt-sc-main-heading:after { margin: auto; left: 0; right: 0; } .dt-sc-title.with-separator-top.alignright .dt-sc-main-heading:before, .dt-sc-title.with-separator-bottom.alignright .dt-sc-main-heading:after { left: auto; right: 0; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading { display:inline-block; position: relative; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before, .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { content: ""; height: 3px; position: absolute; top: 50%; width: 75px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before { left: -100px; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { right: -100px; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before, .dt-sc-title.with-before-after-shape.alignright .dt-sc-main-heading:after { content: none; } .dt-sc-title.with-before-after-shape.aligncenter .dt-sc-main-heading:before, .dt-sc-title.with-before-after-shape.alignright .dt-sc-main-heading:before { content: ""; } .dt-sc-title.with-two-color-stripe { margin: 0 0 50px; position:relative; width:100%; } .dt-sc-title.with-two-color-stripe:before, .dt-sc-title.with-two-color-stripe:after { content:""; height:100%; position:absolute; top: 0; width:9000px; } .dt-sc-title.with-two-color-stripe:before { right: 100%; transform:skewX(-30deg) translateX(-30px); -webkit-transform: skewX(-30deg) translateX(-30px); -ms-transform: skewX(-30deg) translateX(-30px); } .dt-sc-title.with-two-color-stripe:after { left: 100%; transform:skewX(-30deg) translateX(30px); -webkit-transform:skewX(-30deg) translateX(30px); -ms-transform:skewX(-30deg) translateX(30px); } .dt-sc-title.with-two-color-stripe h3 { font-size: 20px; margin: 40px 0 -5px; letter-spacing: 1px; float:left; } .dt-sc-title.with-two-color-stripe .dt-sc-main-heading { font-size:34px; font-weight:900; letter-spacing:2px; float:left; clear:both; margin-bottom:0; } .dt-sc-title.with-two-color-stripe h5 { float:left; position:relative; padding:50px 0 40px 100px; margin:-50px 0 0; font-size: 16px; } .dt-sc-title.with-two-color-stripe h5:before { content:""; position:absolute; left:57px; height:100%; width:1px; top:-5px; -webkit-transform:skewX(-30deg); transform:skewX(-30deg); -ms-transform:skewX(-30deg); } .dt-sc-title.with-vertical-solid-line { overflow-x: hidden; width: 100%; } .dt-sc-title.with-vertical-solid-line.aligncenter { display: inline-block; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:before, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:after { background-color: rgba(0,0,0,0.035); } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:before, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:after { background-color: rgba(0,0,0,0.15); } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span { display: inline-block; position: relative; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading { width: 100%; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:before, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:after { content: ""; display: inline-block; height: 100%; position: absolute; top: 0; width: 5px; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:before { left: 0; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:after { right: 0; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span { padding: 0 25px; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:before, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:after { content: ""; display: inline-block; height: 100%; position: absolute; bottom: 0; top: 0; width: 9999px; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:before { right: 100%; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:after { left: 100%; } .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading:after, .dt-sc-title.with-vertical-solid-line.alignright .dt-sc-main-heading:before, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading span:before, .dt-sc-title.with-vertical-solid-line.alignright .dt-sc-main-heading span:after { content: none; } .dt-sc-title.with-vertical-solid-line.aligncenter .dt-sc-main-heading:after, .dt-sc-title.with-vertical-solid-line.alignright .dt-sc-main-heading:after, .dt-sc-title.with-vertical-solid-line.aligncenter .dt-sc-main-heading span:before, .dt-sc-title.with-vertical-solid-line.alignright .dt-sc-main-heading span:before { content: ""; } .dt-sc-ribbon-title .dt-sc-main-heading { background: #eee; display: inline-block; line-height: 1; margin: 1em auto 2em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ padding: 0.5em 1em; /* Adjust to suit */ position: relative; text-align: center; } .dt-sc-ribbon-title.aligncenter .dt-sc-main-heading { display: table; margin: 1em auto 2em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ } .dt-sc-ribbon-title.alignright .dt-sc-main-heading { margin: 1em 0 2em auto; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ } .dt-sc-ribbon-title .dt-sc-main-heading:before, .dt-sc-ribbon-title .dt-sc-main-heading span:before, .dt-sc-ribbon-title.alignright .dt-sc-main-heading:after, .dt-sc-ribbon-title.alignright .dt-sc-main-heading span:after { content: none; } .dt-sc-ribbon-title.aligncenter .dt-sc-main-heading:before, .dt-sc-ribbon-title.aligncenter .dt-sc-main-heading span:before, .dt-sc-ribbon-title.alignright .dt-sc-main-heading:before, .dt-sc-ribbon-title.alignright .dt-sc-main-heading span:before { content: ""; } .dt-sc-ribbon-title .dt-sc-main-heading:before, .dt-sc-ribbon-title .dt-sc-main-heading:after { background: none !important; border-color: #ddd; border-style: solid; border-width: 1em; content: ""; display: block; position: absolute; bottom: -0.75em; z-index: -1; } .dt-sc-ribbon-title .dt-sc-main-heading:before { border-right-width: 1em; border-left-color: transparent; left: -1.25em; } .dt-sc-ribbon-title .dt-sc-main-heading:after { border-left-width: 1em; border-right-color: transparent; right: -1.25em; } .dt-sc-ribbon-title .dt-sc-main-heading > span:before, .dt-sc-ribbon-title .dt-sc-main-heading > span:after { border-color: #ccc transparent transparent transparent; border-style: solid; content: ""; display: block; position: absolute; bottom: -0.75em; } .dt-sc-ribbon-title .dt-sc-main-heading > span:before { border-width: 0.75em 0 0 0.75em; left: 0; } .dt-sc-ribbon-title .dt-sc-main-heading > span:after { border-width: 0.75em 0.75em 0 0; right: 0; } .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading { color:#fff; margin: 0; padding: 0.3em 0.6em; position:relative; text-transform: none; z-index: 1; } .dt-sc-title.mz-title .mz-title-content { background-color: #f3f3f3; overflow: hidden; width: 100%; } .mz-title { float: left; overflow: hidden; width: 100%; } .mz-title .mz-title-content { clear: both; float: left; margin-bottom: 30px; position: relative; } .mz-title .mz-title-content .dt-sc-main-heading { display: inline-block; } .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading:before, .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading:after { background-color: inherit; border-style: solid; content: ""; height: 2.5em; margin: auto; position: absolute; bottom: 0; top: 0; width: 2.5em; z-index: -1; } .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading:before { border-width: 0; right: 100%; -webkit-transform:skewX(30deg) translateX(75%); transform:skewX(30deg) translateX(75%); } .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading:after { border-width: 0; left: 100%; -webkit-transform:skewX(30deg) translateX(-75%); transform:skewX(30deg) translateX(-75%); } .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading:before, .dt-sc-title.mz-title.alignright .mz-title-content .dt-sc-main-heading:after { content: none; } .dt-sc-title.mz-title.aligncenter .mz-title-content .dt-sc-main-heading:before, .dt-sc-title.mz-title.alignright .mz-title-content .dt-sc-main-heading:before { content: ""; } .dt-sc-title.mz-stripe-title .mz-stripe-title-content { background:url(../../images/title-pattern.png) repeat; width: 100%; } .dt-sc-title.mz-stripe-title .mz-stripe-title-content .dt-sc-main-heading { display: inline-block; padding: 0.25em 0.5em; text-transform: none; } .dt-sc-title.split2-title { overflow: hidden; float: left; width: 100%; } .dt-sc-title.split2-title .split2-title-content { clear: both; float: left; margin-bottom:30px; position: relative; } .dt-sc-title.split2-title .split2-title-content:after { background:url(../../images/title-pattern.png) repeat; content:""; height:100%; top:0; left:100%; position:absolute; width:9000px; } .dt-sc-title.split2-title .split2-title-content .dt-sc-main-heading { background:#000; padding:12px 15px; position:relative; z-index:1; margin:0; left:0; text-transform:uppercase; } .dt-sc-title.split2-title .split2-title-content * { color:#fff; } .dt-sc-title.with-icon-bg .icon-content { position:absolute;top:50%;margin:auto;width:100%;transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform-origin:50%; } .dt-sc-title.with-icon-bg .icon-wrapper{ font-size:140px; color:#f5f5f5; } .dt-sc-title.with-icon-bg { width: 100%; } .dt-sc-title.with-icon-bg .icon-content .dt-sc-main-heading { font-size: 40px; margin-bottom: 5px; } .dt-sc-title.with-icon-bg .icon-content h3 { font-size: 18px; margin-bottom: 0; } .dt-sc-title.decorated .dt-sc-main-heading { background-color: #fff; background-image:url(../../images/title-pattern.png); background-repeat: repeat; border: 1px solid; margin-top: 0.25em; margin-bottom: 0.5em; position: relative; padding: 0 0.5em; } .dt-sc-title.decorated.aligncenter .dt-sc-main-heading, .dt-sc-title.decorated.alignright .dt-sc-main-heading { margin-bottom: 0.25em; } .dt-sc-title.decorated .dt-sc-main-heading:before, .dt-sc-title.decorated .dt-sc-main-heading:after {background-color: currentColor; background-image: -webkit-linear-gradient(right, transparent 0%, rgba(0,0,0,.4) 100%); content: ''; display: inline-block; height: 1.5em; position: absolute; transform: skewY(8deg); -webkit-transform: skewY(8deg); width: 1.5em; z-index: -2; } .dt-sc-title.decorated .dt-sc-main-heading:before { bottom: -0.15em; left: -1px; } .dt-sc-title.decorated .dt-sc-main-heading:after { right: -1px; top: -0.15em; } /* Title 13 */ .separator-with-shape { margin-bottom: 25px; } .separator-with-shape .dt-sc-main-heading, .separator-with-shape .dt-sc-main-heading span { float: left; position: relative; width: 100%; } .separator-with-shape .dt-sc-main-heading span { padding-bottom: 15px; } .separator-with-shape .dt-sc-main-heading:before, .separator-with-shape .dt-sc-main-heading span:after { content: ""; display: block; position: absolute; } .separator-with-shape .dt-sc-main-heading:before { background: #000; height: 2px; left: 0; bottom: 0; width: 60px; } .separator-with-shape .dt-sc-main-heading span:after { border-color: #000 transparent transparent; border-style: solid; border-width: 5px 5px 0; height: 0; left: 10px; top: 100%; width: 0; } .separator-with-shape.aligncenter .dt-sc-main-heading:before, .separator-with-shape.aligncenter .dt-sc-main-heading span:after { left: 0; right: 0; margin: 0 auto; } .separator-with-shape.alignright .dt-sc-main-heading:before { left: auto; right: 0; } .separator-with-shape.alignright .dt-sc-main-heading span:after { left: auto; right: 10px; } /* Title 14 */ .animated-twin-lines { width: 100%; height: auto; margin: auto; float: none; display: inline-block; position: relative; text-align: center; margin-bottom: 45px; padding-bottom: 15px; } .animated-twin-lines:before, .animated-twin-lines:after {left: 0;right: 0;margin: 0 auto;content: '';display: block;position: absolute;width: 50px;height: 3px;-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;animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-webkit-animation-delay: 1s;background: #000;} .animated-twin-lines:before { animation: clip-one 1s linear infinite; -moz-animation: clip-one 1s linear infinite; -ms-animation: clip-one 1s linear infinite; -webkit-animation: clip-one 1s linear infinite; bottom: -2px; } .animated-twin-lines:after { animation: clip-two 1.5s linear infinite; -moz-animation: clip-two 1.5s linear infinite; -ms-animation: clip-two 1.5s linear infinite; -webkit-animation: clip-two 1.5s linear infinite; bottom: 2px; } .animated-twin-lines.alignleft { text-align: left; } .animated-twin-lines.alignright { text-align: right; } .animated-twin-lines.alignleft, .animated-twin-lines.alignright { margin-bottom: 35px; } .animated-twin-lines.alignleft:before, .animated-twin-lines.alignleft:after { right: auto; } .animated-twin-lines.alignright:before, .animated-twin-lines.alignright:after { left: auto; } .dt-sc-dark-bg .animated-twin-lines:before { background: #fff } .dt-sc-dark-bg .animated-twin-lines:after { background: #fff } @keyframes clip-one { 0% { width: 50px; } 25% { width: 20px; } 50% { width: 40px; } 75% { width: 25px; } 100% { width: 50px; } } @-webkit-keyframes clip-one { 0% { width: 50px; } 25% { width: 20px; } 50% { width: 40px; } 75% { width: 25px; } 100% { width: 50px; } } @keyframes clip-two { 0% { width: 50px; } 25% { width: 35px; } 50% { width: 15px; } 75% { width: 40px; } 100% { width: 50px; } } @-moz-keyframes clip-two { 0% { width: 50px; } 25% { width: 35px; } 50% { width: 15px; } 75% { width: 40px; } 100% { width: 50px; } } /*-------------------------------------------------------------- 1.1 - Default Colors --------------------------------------------------------------*/ .dt-sc-title.with-two-color-stripe h5 { color:rgba(0, 0, 0, 0.6); } .dt-sc-dark-bg.skin-color .dt-sc-title.script-with-sub-title .dt-sc-main-heading, .dt-sc-title.with-boxed .dt-sc-main-heading, .dt-sc-title.with-boxed .dt-sc-main-heading a { color:#ffffff; } .dt-sc-dark-bg .dt-sc-title.script-with-sub-title .dt-sc-main-heading { color:#ffffff; } .dt-sc-title.with-boxed .dt-sc-main-heading a:hover { color:rgba(0, 0, 0, 0.2); } .dt-sc-title.with-two-color-stripe:after { background:rgba(0, 0, 0, 0.1); } .dt-sc-title.with-two-color-stripe h5:before { background:rgba(0, 0, 0, 0.2); } .dt-sc-title.with-two-color-stripe:after { background:#e6e6e8; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before, .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { background:#000000; } .dt-sc-dark-bg .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before, .dt-sc-dark-bg .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { background:#ffffff; } .dt-sc-photography-style:before { background:#000000; } @media all and (min-width:0\0) and (min-resolution:.001dpcm) { .dt-sc-triangle-title:before, .dt-sc-triangle-title:after { transform: rotate(45deg) skew(10deg, 10deg); -ms-transform: rotate(45deg) skew(10deg, 10deg); } } /*-------------------------------------------------------------- 1.2 - Responsive --------------------------------------------------------------*/ @media only screen and (min-width:992px) and (max-width:1199px) { /** Headings - Titles **/ .dt-sc-title.with-two-color-stripe:before { transform:skewX(-30deg) translateX(-45px); -webkit-transform: skewX(-30deg) translateX(-45px); -ms-transform: skewX(-30deg) translateX(-45px); } .dt-sc-title.with-two-color-stripe:after { transform:skewX(-30deg) translateX(45px); -webkit-transform:skewX(-30deg) translateX(45px); -ms-transform:skewX(-30deg) translateX(45px); } .dt-sc-title.with-two-color-stripe h5 { padding: 50px 0 40px 70px; } .dt-sc-title.with-two-color-stripe h5:before { left: 50px; } .dt-sc-photography-style.vc_col-md-12 { padding-bottom: 0; } .dt-sc-title.with-two-color-stripe h1, .dt-sc-title.with-two-color-stripe .dt-sc-main-heading, .dt-sc-title.with-two-color-stripe h3, .dt-sc-title.with-two-color-stripe h4, .dt-sc-title.with-two-color-stripe h5, .dt-sc-title.with-two-color-stripe h6 { float: none; line-height: normal; } .dt-sc-title.with-two-color-stripe { text-align: center; } .dt-sc-title.with-two-color-stripe h5 { margin: 0; padding-left: 0; } .dt-sc-title.with-two-color-stripe h5 { padding: 50px 0 40px 70px; padding-left: 70px; } .dt-sc-title.with-two-color-stripe h5:before { height: 1px; left: 0; top: 25px; width: 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } /*----*****---- << Tablet (Portrait) >> ----*****----*/ /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:991px) { /** Headings - Titles **/ .dt-sc-title.with-two-color-bg:before { left: 0; } .dt-sc-title.with-two-color-bg:after { -webkit-transform: skewX(-30deg) translateX(-10px); transform: skewX(-30deg) translateX(-10px); } .dt-sc-title.with-two-color-stripe { text-align: center; } .dt-sc-title.with-two-color-stripe:before { transform:skewX(-30deg) translateX(-45px); -webkit-transform: skewX(-30deg) translateX(-45px); -ms-transform: skewX(-30deg) translateX(-45px); } .dt-sc-title.with-two-color-stripe:after { transform:skewX(-30deg) translateX(45px); -webkit-transform:skewX(-30deg) translateX(45px); -ms-transform:skewX(-30deg) translateX(45px); } .dt-sc-title.with-two-color-stripe > * { float: none !important; line-height: normal; } .dt-sc-title.with-two-color-stripe h5 { margin: 0; padding-left: 0; } .dt-sc-title.with-two-color-stripe h5:before { height: 1px; left: 0; top: 25px; width: 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .dt-sc-triangle-title { height: 390px; width: 100%; } .dt-sc-triangle-title:before { height: 195px; top: 100px; width: 195px; } .dt-sc-triangle-title:after { height: 175px; top: 110px; width: 175px; } .dt-sc-triangle-title .dt-sc-main-heading { font-size: 18px; margin-top: 150px; } .dt-sc-triangle-title p { font-size: 9px; line-height: 20px; } .dt-sc-title.with-boxed .dt-sc-main-heading { font-size: 24px; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Common Styles for the devices below 767px width */ @media only screen and (max-width: 767px) { /** Headings - Titles **/ /*.dt-sc-title.script-with-sub-title .dt-sc-main-heading strong { width: 100%; float: left; }*/ .dt-sc-title.with-two-color-bg { display: block; float: none; margin: 0 15px; text-align: center; width: auto; } .dt-sc-title.with-two-color-stripe { text-align: center; } .dt-sc-title.with-two-color-stripe:before { -webkit-transform: skewX(-30deg) translateX(-60px); transform:skewX(-30deg) translateX(-60px); } .dt-sc-title.with-two-color-stripe:after { -webkit-transform:skewX(-30deg) translateX(60px); transform:skewX(-30deg) translateX(60px); } .dt-sc-title.with-two-color-stripe > * { float: none !important; line-height: normal; } .dt-sc-title.with-two-color-stripe h5 { margin: 0; padding-left: 0; } .dt-sc-title.with-two-color-stripe h5:before { height: 1px; left: 0; top: 25px; width: 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading, .dt-sc-title.decorated .dt-sc-main-heading, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading, .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading, .dt-sc-title.mz-stripe-title .mz-stripe-title-content .dt-sc-main-heading { font-size: 2rem; } .dt-sc-title.with-before-after-shape .dt-sc-sub-heading, .dt-sc-title.decorated .dt-sc-sub-heading, .dt-sc-title.with-vertical-solid-line .dt-sc-sub-heading, .dt-sc-title.mz-title .mz-title-content .dt-sc-sub-heading, .dt-sc-title.mz-stripe-title .mz-stripe-title-content .dt-sc-sub-heading { font-size: 1.5rem; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading { padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before, .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { top: 50%; width: calc(100% - 85%); } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:before { left: 100%; } .dt-sc-title.with-before-after-shape .dt-sc-main-heading:after { right: 100%; } .dt-sc-triangle-title { width: 100%; } .dt-sc-ribbon-title { background-size: 100% auto; width: 100%; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /** Headings - Titles **/ .dt-sc-ribbon-title { line-height: 50px; } } /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) { /** Headings - Titles **/ .dt-sc-title.with-before-after-shape .dt-sc-main-heading, .dt-sc-title.decorated .dt-sc-main-heading, .dt-sc-title.with-vertical-solid-line .dt-sc-main-heading, .dt-sc-ribbon-title.aligncenter .dt-sc-main-heading, .dt-sc-title.mz-title .mz-title-content .dt-sc-main-heading, .dt-sc-title.mz-stripe-title .mz-stripe-title-content .dt-sc-main-heading { font-size: 1.5rem; } .dt-sc-title.with-before-after-shape .dt-sc-sub-heading, .dt-sc-title.decorated .dt-sc-sub-heading, .dt-sc-title.with-vertical-solid-line .dt-sc-sub-heading, .dt-sc-ribbon-title.aligncenter .dt-sc-sub-heading, .dt-sc-title.mz-title .mz-title-content .dt-sc-sub-heading, .dt-sc-title.mz-stripe-title .mz-stripe-title-content .dt-sc-sub-heading { font-size: 1rem; } .dt-sc-title.with-two-color-stripe:before { -webkit-transform: skewX(-30deg) translateX(-75px); transform:skewX(-30deg) translateX(-75px); } .dt-sc-title.with-two-color-stripe:after { -webkit-transform:skewX(-30deg) translateX(75px); transform:skewX(-30deg) translateX(75px); } .dt-sc-title.script-with-sub-title h2.dt-sc-sub-heading { font-size: 40px; } } /*----*****---- << Mobile >> ----*****----*/ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (min-width: 320px) and (max-width: 479px) { /** Headings - Titles **/ } /*----*****---- << Mobile >> ----*****----*/ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 319px) { /** Headings - Titles **/ .dt-sc-title.with-two-color-bg { margin: 0 -15px; } .dt-sc-title.with-two-color-stripe:before { transform:skewX(-30deg) translateX(-120px); -webkit-transform: skewX(-30deg) translateX(-120px); -ms-transform: skewX(-30deg) translateX(-120px); } .dt-sc-title.with-two-color-stripe:after { transform:skewX(-30deg) translateX(120px); -webkit-transform:skewX(-30deg) translateX(120px); -ms-transform:skewX(-30deg) translateX(120px); } .dt-sc-title.with-before-after-shape .dt-sc-main-heading { font-size: 18px; padding: 0 6px; } .dt-sc-title.with-before-after-shape.with-sub-title .dt-sc-main-heading { font-size: 13px; } .dt-sc-ribbon-title { font-size: 14px; line-height: 24px; } }