@charset "UTF-8";

html, body {
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .5px;
    font-family: 'Ubuntu', sans-serif;
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
*:hover{
    -webkite-transition: all 0.5s ease-in-out;/* Chrome < 26, Safari < 7 */
    -moz-transition: all 0.5s ease-in-out;/* Firefox < 16 */
    -ms-transition: all 0.5s ease-in-out;/
    -o-transition: all 0.5s ease-in-out;/
    transition: all 0.5s ease-in-out;
}
.trans-1 {
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.trans-2 {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
{
    -webkit-hyphens: auto; /* Saf 5.1+ */
     -moz-hyphens: auto; /* Fx 6.0+ */
      -ms-hyphens: auto; /* IE 10+ */
          hyphens: auto; /* None yet */
}
/*
//no MOZ or MS prifix for clip-path property
//no ms for box-shadow, transform property(>10), border-radious, appearance, radial-gradient+linear-gradient(>10), and even for transition(>10)
//As of right now, if you’re supporting the top-two newest versions of each browser, here are the prefixes you need:
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

radial-gradient(): at syntax : Not supported by Safari and ios safari,
radial-gradient(): Double-position color, linear-gradient(): Double-position color :> Not supported by IE and Edge
Double-position color example : linear-gradient(45deg, black 25%, black 50%, white 50%, white 75%)
*/

/*
-webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)//webkit(created by Apple) rendering ingine
-moz- (Firefox(Mozilla browsers))//Gecko rendering ingine
-o- (Old, pre-WebKit, versions of Opera)
-ms- (Internet Explorer and Microsoft Edge)
*/

/*
Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine.[6] All Chromium-based browsers use Blink, as do applications built with CEF, Electron, or any other framework that embeds Chromium.

Although Apple permits third-party browsers as alternatives to Safari on iOS devices, all browsers distributed through its App Store must use WebKit as their engine. For example, Opera Mini for iOS uses WebKit, whereas all other Opera variants use Blink. (Opera formerly used its own proprietary Presto engine.)

Microsoft formerly developed its own proprietary browser engines, Trident and EdgeHTML, but now uses Blink for its Edge browser.

//  https://www.dummies.com/web-design-development/site-development/common-webkit-browsers/

//  https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
*/

a:hover{text-decoration: none}
.container, .contaoner-fluid {
    overflow: hidden;
}
section::before, section::after {
    clear: both;
}
img{
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
}
h1,
  .h1 {
    font-size: calc(1.475rem + 1.5vw);
      margin-bottom: 1rem;
  }
h1.small {
    font-size: calc(1.475rem + .4vw);
  }
h2,
  .h2 {
    font-size: calc(1.275rem + 1vw);
      margin-bottom: 1rem;
  }
h2.small {
    font-size: calc(1.275rem + .5vw);
  }
h3,
  .h3 {
    font-size: calc(1.175rem + .8vw);
      margin-bottom: .75rem;
  }
h3.small {
    font-size: calc(1.175rem + .4vw);
  }
h4,
  .h4 {
    font-size: calc(1.075rem + .5vw);
      margin-bottom: .5rem;
  }
h4.small {
    font-size: calc(1.075rem + .2vw);
  }
h5,
  .h5 {
    font-size: calc(1.050rem + .4vw);
      margin-bottom: .25rem;
  }
h6,
.h6 {
    font-size: calc(1.025rem + .2vw);
    margin-bottom: .25rem;
}
.display-1 {
    font-size: calc(1.275rem + 2.2vw);
  }
.display-2 {
    font-size: calc(1.475rem + 2.7vw);
  }
.display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
.display-4 {
    font-size: calc(1.675rem + 5.1vw);
  }
.display-5 {
    font-size: calc(1.725rem + 5.7vw);
  }

.color-prim {
    color: #ff2d29;
}
.color-sec {
    color: #0f0c33;
}
.color-white {
    color: #fff;
}
.color-light {
    color: #949494;
}

.opacity-0 {
	opacity: 0;
}
.pos-rel {
    position: relative;
}
.pos-abs {
    position: absolute;
}
.pos-fix {
    position: fixed;
}
.left-0 {
    left: 0;
}
.left-20{
    left: 20px;
}
.bottom-0 {
    bottom: 0;
}
.bottom-20{
    bottom: 20px;
}
.h-w-100 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.block-auto {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.flex-items-content-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
.bg-prim {
    background: #ff2d29;
}
.bg-sec {
    background: #0f0c33;
}
.bg-light {
    background: #f0eeee !important;
}
.bg-dark {
    background: #101017 !important;
}
.bg-hover {
	background: #f65cb1;
}
.bg-prim-gred-lin {
	-webkit-background-image: linear-gradient(180deg,#943cff 0%,#dd45d3 40.13%,#fc9a57 90%);
}
.bg-sec-gred-lin {
	-webkit-background-image:linear-gradient( to right, #ff2d29, #f65cb1 50% );
/*    background-image: linear-gradient(to right, rgb(255,220,0,.7), rgb(255,220,0,.5), rgba(255,0,0,0.03));*/
/*    background-image: linear-gradient(to right, rgba(255, 0, 0, .1), rgb(255, 220, 0, .3), rgba(255, 220, 0, .6));*/
}
.bg-prim-gred-rad {
/*    background: #083d77;*/
    
    /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#4585ce), to(#07057f));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #4585ce 30%, #4585ce 60%, #07057f);
 
  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #4585ce 30%, #4585ce 60%, #07057f);

  /* IE 10 */
  background: -ms-radial-gradient(circle, #4585ce 30%, #4585ce 60%, #07057f);
    color: #fff;
    overflow: hidden;
}
.bg-sec-gred-rad {}
.bg-prim-gred-rad-double {
    background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);
}
.overlay, .overlay-prim, .overlay-sec, .overlay-prim-gred-lin, .overlay-prim-gred-rad, .overlay-sec-gred-lin, .overlay-sec-gred-rad {
    position: relative;
}
.overlay::before, .overlay-prim::before, .overlay-sec::before, .overlay-prim-gred-lin::before, .overlay-sec-gred-lin::before, .overlay-prim-gred-rad::before, .overlay-sec-gred-rad::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.overlay-prim-gred-lin::before{
    -webkit-background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 1));
    -moz-background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 1));
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 1));
}
.overlay-prim-gred-rad::before {
    background: -moz-radial-gradient(circle, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .7));
}
{
    background: repeating-linear-gradient(transparent, #4d9f0c 40px),
            repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
}
.bg-prim-img {
    background: url(../images/bg/aqua-purple.jpg) no-repeat center top fixed;
    background-color: #8a0083;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #fff;
}
.bg-none {
	background: none;
}

.border-1, border-2 {
    border-style: solid;
}
.border-1 {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-white {
    border-color: #fff;
}
.border-prim {
    border-color: #ff2d29;
}
.border-sec {
    border-color:#f58820; 
}
.border-repeating-gradient {
    border: 10px solid #e66465;
    background-image: repeating-linear-gradient(-45deg,#e66465 0,#e66465 5px,#f6b73c 5px,#f6b73c 10px,#e66465 10px) 10 10 repeat;
}
.box-content, .content-box {
    position: relative;
    padding: .5rem;
}
.box-shadow {
	-webkit-box-shadow: 0 0 .25rem rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 .25rem rgba(0,0,0,0.3);
    box-shadow: 0 0 .25rem rgba(0,0,0,0.3);
}
.box-shadow:hover{
	-webkit-box-shadow: 0 0 .5rem rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 .5rem rgba(0,0,0,0.5);
    box-shadow: 0 0 .5rem rgba(0,0,0,0.5);
}
.box-bordered {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    border: 10px inset rgba(100, 100, 100, 0.3);
}
.services, .box-decorative-1 {
	border-top: 1px solid rgba(0,0,0,.2);
	border-left: 1px solid rgba(0,0,0,.2);
	border-right: 1px solid rgba(0,0,0,.2);
	border-bottom: 5px solid red;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.caption {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: .40rem;
    text-align: center;
}

.btn {
    border: none;
    outline: none;
    padding: .5rem 1rem;
}
.btn-primary {
	background: #dc0000;
}
.btn-primary:hover {
    background: #f00;
}
.btn-primary a {
    color: #fff;
}
.btn-secondry {
    background: #0f0c33;
}
.btn-shutter-in-horizontal, .btn-shutter-out-horizontal {
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
/*
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
*/
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}
.btn-shutter-in-horizontal::before, .btn-shutter-out-horizontal::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #020020;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}
.btn-shutter-in-horizontal::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    background: #020020;
}
.btn-shutter-out-horizontal::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
.btn-shutter-in-horizontal:hover::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
.btn-shutter-out-horizontal:hover::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.btn-big {
    font-size: calc(1.075rem + .6vw);
    padding-top: calc( .5rem + .2vw );
    padding-bottom:  calc( .5rem + .2vw );
}
.btn-form, .input-radius, {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.radius {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.radius-50 {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.rotate5 {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
}
.rotate-5 {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.rotate10 {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
}
.rotate-10 {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.rotate90, .rotate-90 {
    position: absolute;
    top: 50%;
}
.rotate90 {
    left: 100%
    -webkit-transform: translate(-38%, -58%) rotate(90deg);
    -moz-transform: translate(-38%, -58%) rotate(90deg);
    transform: translate(-38%, -58%) rotate(90deg);
}
.rotate-90 {
    -webkit-transform: translate(-38%, -58%) rotate(-90deg);
    -moz-transform: translate(-38%, -58%) rotate(-90deg);
    transform: translate(-38%, -58%) rotate(-90deg);
}
.triangle-left, .triangle-right, .arrow-full, .skew, .perspective-up, .perspective-down {
    position: relative;
}
.triangle-left::before, .triangle-right::before, .arrow-full::before, .arrow-full::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    background: #c00;
    -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
.triangle-left::before {
    left: -20px;
}
.triangle-right::before {
    right: -20px;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.arrow-full::before {
    -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 60% 50%);
    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 60% 50%);
}
.arrow-full::before {
    right: 100%;
}
.arrow-full::after {
    left: 100%;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.skew::before, .skew::after, .perspective-up::before, .perspective-up::after, .perspective-down::before, .perspective-down::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 20px;
    background: #c00;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.skewX20::before {
    left: -20px;
}
.skewX20::after {
    right: -20px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
/*    transform: rotateX(180deg) rotateY(-180deg);*/
}
.skewX-20::before {
    right: -20px;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.skewX-20::after {
    left: -20px;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.perspective-up::before {
    right: -20px;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.perspective-up::after {
    left: -20px;
}
.perspective-down::before {
    left: -20px;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.perspective-down::after {
    right: -20px;
    -webkit-transform: rotateX(-180deg) rotateY(-180deg);
    -moz-transform: rotateX(-180deg) rotateY(-180deg);
    transform: rotateX(-180deg) rotateY(-180deg);
}

/*
.skew {
    position: relative;
}
.skew::before, .skew::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 24px;
    background: #c00;
}
.skew::before {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
    -moz-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.skew::after{
    -webkit-clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%);
    -mox-clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%);
}
.skewX20::before {
    left: -22px;
}
.skewX20::after {
    right: -22px;
}
.skewX-20::before {
    right: -22px;
    transform: rotateY(-145deg);
}
.skewX-20::after {
    left: -22px;
    transform: rotateY(-145deg);
}
*/
img.scale:hover {
/*    animation: scaleit 1s ease-in-out;*/
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}
.title-l-start, .title-l-center, .title-l-s, .title-l-c {}
.title-line-start, .title-line-center, .title-line-gredient {
    position: relative;
    padding-bottom: .5rem;
}
.title-line-start::before, .title-line-center::before, .title-line-gredient::before {
    content: "";
    position: absolute;
    background: red;
    top: 100%;
    width: 5rem;
    height: 3px;
}
.title-line-start::before {
    left: 0;
}
.title-line-center::before, .title-line-gredient::before {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.title-line-gredient::before {
    height: 10px;
    width: 50%;
/*    top: calc( 100% + .3vw );*/
    overflow: visible;
    background: -webkit-radial-gradient(ellipse at 50% -50%, #c0d4ea 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: -moz-radial-gradient(ellipse at 50% -50%, #c0d4ea 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background: radial-gradient(ellipse at 50% -50%, #c0d4ea 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
{
    position: absolute;
/*
    z-index: -1;
    opacity: 0;
*/
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 74%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

}
.text-shadow {
    -webkit-text-shadow: 0 4px 3px rgba(0, 0, 222, .2);
    -moz-text-shadow: 0 4px 3px rgba(0, 0, 222, .2);
    text-shadow: 0 4px 3px rgba(0, 0, 222, .2);
}
.text-gredient {
    background: -webkit-linear-gradient(#00d0ff,#ff0000);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

ol, ul {
    margin: 0;
    padding: 0;
}
ul.tick {
    list-style: none;
    padding-left: 30px;
}
ul.tick li {
    position: relative;
}
ul.tick li::before {
    content: '';
    position: absolute;
    top: 0;
    left: -28px;
    width: 22px;
    height: 26px;
    background: url(../images/tick.jpg) no-repeat;
}
ul.big li {
    font-size: calc(1.075rem + .5vw);
/*    font-size: calc(20px + (26 - 20) * ((100vw - 300px) / (1200 - 300)));*/
}

/*
#banner-form .form-control::-webkit-input-placeholder, #form-bottom .form-control::-webkit-input-placeholder {
    color: #fff;
}
#banner-form .form-control::-moz-placeholder, #form-bottom .form-control::-moz-placeholder {
    color: #fff;
}
#banner-form .form-control:-moz-placeholder, #form-bottom .form-control:-moz-placeholder {
    color: #fff;
}
#banner-form .form-control::-ms-input-placeholder, #form-bottom .form-control::-ms-input-placeholder {
    color: #fff;
}
#banner-form .form-control:-ms-input-placeholder, #form-bottom .form-control:-ms-input-placeholder {
    color: #fff;
}
#banner-form .form-control:placeholder, #form-bottom .form-control:placeholder {
    color: #fff;
}
#banner-form .form-control, #form-bottom .form-control {
    color: #fff;
}
#banner-form .form-control:focus, #form-bottom .form-control:focus{
    background: rgba(20, 120, 255, .55);
    transition: 0.5s ease-in-out;
}
*/

/* --- Header Style --- */
.top-header{
    background: #f0eeee;
    padding: .25rem;
}
.top-header a {
    color: #4a4a4a;
}
.top-header a i {
    color: #ff2d29;
    padding-right: 8px;
    vertical-align: middle;
}
.top-header ul.social-media {
    list-style: none;
    margin-bottom: 0;
}
.top-header ul.social-media li {
    display: inline-block;
}
.midd-header {
    padding: .5rem;
}
.midd-header .triangle-left::before {
    background: #020020;
}
/*
h5.address {
	display: inline-block;
	border-top: 2px solid red;
	border-right: 2px solid red;
	border-bottom: 2px solid red;
}*/
.navigation {
	width: 100%;
    background: #020020;
    border-bottom: 2px solid #ff2d29;
}
.navigation.fixed {
    position: fixed;
    top: 0;
    z-index: 9;
}
.navbar-toggler-icon i {
    color:#fff;
    font-size:28px;
}
.navbar-nav li > a {
    color: #fff;
}
.navbar {
    padding: .25rem 1rem;
}
.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.small-logo {
	opacity: 0;
    position: relative;
    margin-right: 40px;
	transition: all 0.35s ease;
}
.logo-scrolled {
    opacity: 1;
}
.nav-left {
    position: relative;
    transition: all 0.5s ease;
    left: -100px;
}
.nav-right {
    left: 0;
}
#main-navigation > ul > li > a {
    padding: 6px 20px;
    white-space: nowrap;
    color: #fff;
}
#main-navigation > ul > li:hover > a, #main-navigation > ul > li > a.active {
    background: #dc0000;
}
#main-navigation > ul > li > a.active:hover {
    background: red;
}


/*----- Jassor Slider -----*/
.jssor-slider-wraper{}
.slider-text {
    background: rgba(255, 45, 41, 0.8);
    position:absolute;
    color: #fff;
    z-index:0;
    box-sizing:border-box;
}
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
	animation-name: jssorl-009-spin;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
/*jssor slider bullet skin 032 css*/
.jssorb032 {position:absolute;}
.jssorb032 .i {position:absolute;cursor:pointer;}
.jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
.jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
.jssorb032 .i.idn {opacity:.3;}
/*jssor slider arrow skin 051 css*/
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
/* /End jssor slider css*/

/*------- Custom -------*/
.section-header {
    padding: .5rem;
}
.section-title {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
.section-title::before {
    content: "";
    position: absolute;
    width: 5rem;
    height: 3px;
    background: red;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.section-sub-title {
    padding-bottom: .25rem;
    margin-bottom: 1rem;
}
#diseases {}
.box-bordered:hover h4 {
    color: #fff;
}
.box-bordered:hover .caption{
/*    background-color: rgba(255, 45, 41, 0.6);*/
    background-color: rgba(195, 0, 160, 0.7);
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
.caption h4 {
    margin-bottom: 0;
	font-size: calc( 20px + ( 24 - 20 ) * ( 100vw - 300px ) / ( 1200 - 300 ) );
    color: #ff2d29;
/*    color: #c3339f;*/
}
/*------ Latest Blog -------*/
#latest-blog .title-line-start::before {
    background: #c3339f;
}
/*------ Our services -------*/
#our-clinics{}
.clinic-details:hover .opacity-0 {
    -webkit-animation: scaleit 1s ease-in-out;
    -moz-animation: scaleit 1s ease-in-out;
    animation: scaleit 1s ease-in-out;
    opacity: 1;
}
.our-clinic-form-bg {
    background: #942181;
    color: #fff;
    padding: 15px;
    box-shadow: 0px 0px 9px #696666;
}
/*--------- What --------*/
#what {}
#what .what-col.one .section-title::before, #what .what-col.two .section-title::before, #contact-clinic .section-title::before {
    background: #fff;
}
.what-col.one, .what-col.two {
    height: 100%;
    color: #fff !important;
    padding: 2rem;
    position: relative;
}
.what-col.one::before, .what-col.two::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.what-col.one {
    background: url(../images/blog/sexual-disorder.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.what-col.one::before {
    background: rgba(255, 0, 170, 0.6);
}
.what-col.two {
    background: url(../images/blog/premature-ejaculation.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.what-col.two::before {
    background: rgba(255, 45, 41, 0.6);
/*    background: rgba(255, 140, 0, .7);*/
/*    background: rgba(255, 100, 0, .6);*/
}
#we-do {}
#we-do .title-line-start::before, #articles .title-line-start::before{
    background:#ff2d29; 
}
#articles {}
/*------ Testimonials -------*/
#testimonials{}
#testimonials .content {
    padding: 0 10px;
}
.testimonial-text {
    background: #f0eeee;
    padding: 1rem;
    border-radius: 10px;
    position: relative;
}
.testimonial-text::before {
    content: "";
    position: absolute;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #f0eeee;
    top: 100%;
    left: calc(30px + 4vw);
}
.testimo-image {
    max-width: calc(80px + 5vw);
    height: auto;
    float: left;
    margin-left: calc(4px + 1.5vw);
    margin-right: calc(4px + 1.5vw);
}
/*
#testimonials .owl-dot{
    border: 1px solid rgba(0, 0, 0, 0.2);
}
#testimonials .owl-dot:not(:last-child) {
    margin-right: .5rem;
}
*/
#testimonials .owl-dot.active span {
    background: red;
}

/*------- footer-upper --------*/
#footer-upper {
    color: #fff;
}
.contact-info {
    margin: .75rem 0;
}
.contact-info .icon {
    width: 50px;
    height: 50px;
    padding: .5rem;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-bottom: .5rem;
}
.contact-info .icon:last-of-type{
    margin-top: 1rem;
}
ul.footer-menu {
    list-style: none;
    text-align: center;
    margin-bottom: 0;
}
ul.footer-menu li {
    display: inline-block;
    vertical-align: middle;
}
ul.footer-menu li:not(:last-child) {
    border-right: 2px solid #ff2d29;
}
ul.footer-menu li a {
    color: #4a4a4a;
    white-space: nowrap;
    padding: .25rem .5rem;
}
ul.footer-menu li a:hover, ul.footer-menu li a.active {
    color: #ff2d29;
}
#copyright {
    color: #fff;
    text-align: center;
}

/*---- Slide Contact Form ----*/
.slide-contact-form-fix {
    position: fixed;
    width: 300px;
    background: #fbfbfb;
    border: 4px solid #cccccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 9;
}
.fix-form-left {
    top: 50%;
    left: -300px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.left-0 {
    left: 0;
}
.btn-fix-form-left-rotate {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translate(-38%, -58%) rotate(90deg);
    -moz-transform: translate(-38%, -58%) rotate(90deg);
    transform: translate(-38%, -58%) rotate(90deg);
}
.fix-form-left-open-close {
    color: #fff;
    background: red;
    padding: 5px 12px;
    font-size: 18px;
    white-space: nowrap;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    behavior: url(PIE.htc);//URL of PIE.htc File used for IE < 8,  css3pie.com
    border-radius: 10px 10px 0 0;
}
.btn-slide-contact-form-submit {
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    max-width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: .5rem 2.5rem;
    color: #fff;
}
.btn-slide-contact-form-submit:hover {
    color: #fff;
}
#form-side-fx-left,
#slide-contact-form-fx-left h4 {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
/*    margin-bottom: calc( 16px + 1vw );*/
    font-size: calc( 20px + ( 24 - 20 ) * ( ( 100vw - 300px ) / ( 1200 - 300 ) ));
}
#slide-contact-form-fx-left .form-control {
    padding-left:16px
}
#slide-contact-form-fx-left input {
    height: 40px;
    border: 2px solid #a09e9e;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
#slide-contact-form-fx-left textarea {
    border: 2px solid #a09e9e;
    height: 80px !important;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
#slide-contact-form-fx-left p {
    margin-bottom: 0;
}

/*--------- Scroll To Top ---------*/
.scrollTop {
	position: fixed;
	opacity: 0;
	z-index: 1;
	bottom: calc(1rem + .5vw);
	right: calc(1rem + 1vw);
	transition: all 0.4s ease-in-out 0s;
}
.scrollTop a i{
	font-size: calc(30px + (36 - 30) * ((100vw - 300px) / (1200 - 300)));
	color: #ff2d29;
}

@media (max-width: 767px){
    #main-navigation .nav-left {
        left: 0;
    }
}

/*--------- Pages ---------*/
.pages-banner {
    position: relative;
    background: url(../images/bg/pages-header-bg.jpg) no-repeat bottom center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.pages-banner::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
h2.page-title {
    padding-top: calc(1.075rem + 5vw);
    padding-bottom: calc(1.075rem + 5vw);
/*    font-size: calc(1.075rem + 4vw);*/
    font-size: calc(30px + (60 - 30) * (100vw - 300px) / (1200 - 300));
/*    padding: 3rem .5rem;*/
    color: #fff;
}
.content-image {
    width: calc(300px + 10vw);
    margin-right: calc(10px + 2vw);
}
i.x-big {
	font-size: calc(40px + (48 - 40) * ((100vw - 300px) / (1200 - 300)));
}
.services-text {
	padding: 1rem;
}
.services-text h1 {
	position: relative;
	padding-bottom: .75rem;
}
.services-text h1::before, .services-text h1::after{
	position: absolute;
	content: "";
	bottom: 0;
	height: 1px;
}
.services-text h1::before {
	left: 0;
	width: 30%;
	height: 2px;
	background: red;
}
.services-text h1::after {
	right: 0;
	left: 30%;
	background: rgba(0,0,0,0.3)
}

@-webkit-keyframes scaleit {
    50%{
        -webkit-transform: scale(1.2);
        -mox-transform: scale(1.2);
        transform: scale(1.2);
    }
}
@keyframes scaleit {
    50%{
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@media (min-width:1200px) {
    h1, .h1 {
		font-size: 44px;
	}
	h2, .h2 {
		font-size: 38px;
	}
	h3, .h3 {
		font-size: 30px;
	}
	h4, .h4 {
		font-size: 24px;
	}
	h5, .h5 {
		font-size: 22px;
	}
	h6, .h6 {
		font-size: 20px;
	}
    #slide-contact-form-left h4, .caption h4 {
        font-size: 24px;
    }
    .scrollTop a i {
        font-size: 36px;
    }
    h2.page-title {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}