/****************/
 /* basic colors */
/****************/

.bg-primary{
    background-color: #ea0079!important;
}
.text-primary, .text-primary a{
    color: #ea0079!important;
}
.border-primary{
    border-color: #ea0079!important;
}

.bg-secondary{
    background-color: #f04da1!important;
}
.text-secondary, .text-secondary a{
    color: #f04da1!important;
}
.border-secondary{
    border-color: #f04da1!important;
}

.bg-dark{
    background-color: #2f9cbf!important;
}
.text-dark, .text-dark a{
    color: #2f9cbf!important;
}
.border-dark{
    border-color: #2f9cbf!important;
}

.bg-light{
    background-color: #ebebeb!important;
}
.text-light, .text-light a{
    color: #ebebeb!important;
}
.border-light{
    border-color: #ebebeb!important;
}

a.hovercolor:hover{
    text-decoration: none;
    transition: 0.4s;
    color: #ff0 !important;
}
a.hovercolor:hover>*{
	transition: 0.4s;
    color: #ff0 !important;
}


  /**********************/
 /* General typography */
/**********************/

body{
    font-family: 'Lato', sans-serif;
    font-size:  1.15rem;
    line-height: 1.35em;
    color:  #1c1c1c;
    background-color: #fff;
}

h1{
    font-size:2.2rem;
}

h1.section-title{
    margin-bottom:  0.8em;
    text-align: left;
    letter-spacing: 1px;
    font-weight: 600;
}

p, li{
    text-align: justify;
}

strong{
    font-weight: 900;
}

div.dotted-separator{
    height: 1px;
    width: 60%;
    border-bottom: 2px dotted #1c1c1c;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

  /************/
 /*  header  */
/************/

#main-nav .navbar-toggler {
    color: rgba(255,255,255,.8);
    border-color: rgba(255,255,255,0.6);
    margin-top: 1rem;
    outline: none;
}

header{
    position: relative;
}

div#raniseptol-link{
    background-color: #f1602a;
    text-align: center;    
}

div#raniseptol-link a{
    display: inline-block;
    text-decoration: none;
    padding:    0.4em 1em;    
}
div#raniseptol-link a:hover{
    text-decoration: none;
}
div#raniseptol-link a h5{
    display: inline-block;
    transition: 0.4s;
}

div#raniseptol-link a:hover h5{
    color:  yellow !important;
}

header .container-fluid.main-nav-wrapper{
    max-width: 1280px;
    position: absolute;
    width:  100%;
    top:    0;
    left:   50%;
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index:    99;
}

nav#main-nav .nav-link{
    transition: 0.4s;
    font-weight: 600;
}

section.slider-top.only-one-slide a[role=button], section.slider-top.only-one-slide ol.carousel-indicators{
    display:    none;
}

.slider-top .carousel-item{
    min-height: 450px;
    background-color: #481e34;
    background-image: url('../img/header-bg.jpg');
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.slider-top .carousel-caption {
    width: 100%;
    max-width: 1280px;
    left: 50%;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    bottom: 0;
    -ms-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}

.slider-top .carousel-caption h1{
    font-family: 'Khand', sans-serif;
    font-size:  4.8vw;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.15em;
}
.slider-top .carousel-caption .header-packshot{
    position: relative;
    width:  32vw;
}

.slider-top .carousel-caption .header-packshot img{
    position: relative;
    bottom: 10px;
}

.slider-top .carousel-caption a.cumpara-button{
    position: relative;
    display: block;
    padding:    0.4em 1em;
    font-family: 'Khand', sans-serif;
    font-size: 2rem;
    line-height: 1em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.slider-top .carousel-caption a.cumpara-button:hover{
    text-decoration: none;
    color:  #fff571 !important;
    filter: brightness(1.15);
}
.slider-top .carousel-caption a.cumpara-button:before{
    position: absolute;
    content: '';
    display: block;
    left: -10%;
    right: -8%;
    top: 0;
    bottom: 0;
    background-image: url('../img/cumpara-bg.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}


  /************/
 /*  footer  */
/************/

footer p{
    text-align: center;
}

footer #contact, footer #copyright{
    padding:    2rem 1.25rem;
}
footer #contact h4{
    font-weight: 600;
}
footer #contact p{
    font-size:  1.1rem;
    font-weight: 700;
    line-height: 1.2em;
}
footer  p:last-of-type{
    margin-bottom: 0;
}

.cc-banner{
    border-top: 1px solid rgba(72,30,52,0.6);
}

div#gotop{
	position:	fixed;
	right:	30px;
	bottom:	30px;
	display:	none;
	width:	50px;
	height:	50px;
	z-index:	999;
	border-width: 1px;
        border-style: solid;
        transition: background-color 0.4s, color 0.4s;;
}

div#gotop:hover{
    background-color:   rgba(73,186,47,0.8);
    border-color:   #fff;

}

div#gotop i{
	display:	block;
	position:	absolute;
	left:	50%;
	top:	50%;
	margin-left:	-20px;
	margin-top:	-22px;
	font-size:	40px;
}

div#gotop:hover i{
    color:  #fff;;
}


  /**************/
 /*  sections  */
/**************/

.section-interior.container-fluid{
    max-width: 1280px;
}

.section {
    padding: 3rem 1.25rem;
}

section#page-content{
    overflow: hidden;
}

/***********************************/
#cicatrice .section-interior{
    background-image: url('../img/cicatrice-bg.jpg');
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
}

/***********************************/

#cicatrice-2{
    background-image: url('../img/comanda-bg.png'), url('../img/cicatrice-2-bg2.png');
    background-position: center bottom;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
    min-height: 600px;
}

#cicatrice-2 .nav-pills .nav-link{
    position: relative;
    color: #343332;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 0;
    padding-bottom: 0;
}
#cicatrice-2 .nav-pills .nav-link i.fa{
    font-size:  34px;
    position: absolute;
    top:    50%;
    margin-top: -17px;
}
#cicatrice-2 .nav-pills .nav-link h4{
    font-weight: 700;
    border-bottom: 2px dotted #343332;
    padding-top: 0.7em;
    padding-bottom: 0.6em;
    padding-left: 40px;
    margin-bottom: 0;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.3s;
}
#cicatrice-2 .nav-pills .nav-link i{
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.3s;
}

#cicatrice-2 .nav-pills .nav-link:hover h4, #cicatrice-2 .nav-pills .nav-link:hover i{
    color:  #ed198a;
}

#cicatrice-2 .nav-pills .nav-link.active{
    color:  #ed198a;
    background-color: transparent;
}
#cicatrice-2 .nav-pills .nav-link.active i, #cicatrice-2 .nav-pills .nav-link:hover i{
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#cicatrice-2 .tab-content ul{
    list-style: none;
    padding-left: 22px;
}
#cicatrice-2 .tab-content ul li, #cicatrice-2 .tab-content ol li{
    position: relative;
}
#cicatrice-2 .tab-content ul li:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: -20px;
    top: 6px;
    background-color: #ea0079;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
}

#cicatrice-2 .tab-content ol{
    list-style: none;
}

#cicatrice-2 .tab-content ol>li{
    margin-bottom: 0.5em;
}

#cicatrice-2 .tab-content ol>li:before{
    content: '';
    position: absolute;
    height: 33px;
    width: 33px;
    left: -45px;
    top: -6px;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
#cicatrice-2 .tab-content ol>li:nth-of-type(1):before{
    background-image: url('../img/number-1.jpg');
}
#cicatrice-2 .tab-content ol>li:nth-of-type(2):before{
    background-image: url('../img/number-2.jpg');
}
#cicatrice-2 .tab-content ol>li:nth-of-type(3):before{
    background-image: url('../img/number-3.jpg');
}
#cicatrice-2 .tab-content ol>li:nth-of-type(4):before{
    background-image: url('../img/number-4.jpg');
}
#cicatrice-2 .tab-content ol>li:nth-of-type(5):before{
    background-image: url('../img/number-5.jpg');
}

/***********************************/
    
#suport{
    background-color: #f9f9f9;
}

#suport div[class^="suport-item-"]{
    text-align: center;
}

#suport div[class^="suport-item-"] img{
    margin-bottom: 0.8em;
}
#suport div[class^="suport-item-"] h5{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.6em;
}

/***********************************/
    
#raniseptol-cicatrice .packshots .img-wrapper{
    position: relative;
}
#raniseptol-cicatrice .packshots .img-wrapper:before{
    position: absolute;
    content: '';
    left: -40%;
    right: -10%;
    top: 0;
    bottom: 0;
    background-image: url('../img/raniseptol-cicatrice-packshot-bg.png');
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-position: center 40%;
    background-repeat: no-repeat;
    z-index: -1;
}
#raniseptol-cicatrice h4{
    font-weight: 900;
}
#raniseptol-cicatrice ul{
    list-style: none;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-left: 2.7em;
    padding-right: 1.5em;
}
#raniseptol-cicatrice ul>li{
    position: relative;
    font-weight: 900;
    margin-bottom: 1em;
    text-align: left;
}
#raniseptol-cicatrice ul>li:before{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    left: -50px;
    top: -3px;
    background-image: url('../img/bullet-1.jpg');
    background-position: center;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
}
    
/***********************************/

#utilizare{
    background-image: url('../img/utilizare-bg.jpg');
    background-position: center bottom;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#utilizare .section-interior{
    position: relative;
}
#utilizare .section-interior:before{
    content: '';
    position: absolute;
    width: 65%;
    left: 50%;
    top: 0;
    bottom: 0;
    background-image: url('../img/hands.jpg');
    background-position: left 70%;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
}

#utilizare .utilizare h4, #utilizare .recomendari h4{
    text-transform: uppercase;
    font-weight: 900;
}

.utilizare ol, .recomendari ul{
    list-style: none;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 45px;
}
.utilizare li, .recomendari li{
    margin-bottom: 1em;
    position: relative;
}
.recomendari li:before{
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    left: -35px;
    top: 5px;
    border-radius: 5px;
    background-color: #ea0079;
}
.utilizare li:before{
    content: '';
    position: absolute;
    height: 33px;
    width: 33px;
    left: -45px;
    top: -6px;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.utilizare li:nth-of-type(1):before{
    background-image: url('../img/number-1.jpg');
}
.utilizare li:nth-of-type(2):before{
    background-image: url('../img/number-2.jpg');
}
.utilizare li:nth-of-type(3):before{
    background-image: url('../img/number-3.jpg');
}
.utilizare li:nth-of-type(4):before{
    background-image: url('../img/number-4.jpg');
}
.utilizare li:nth-of-type(5):before{
    background-image: url('../img/number-5.jpg');
}

/***********************************/

#comanda{
    background-image: url('../img/comanda-bg.png');
    background-position: center bottom;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#comanda .img-wrapper{
    position: relative;
}
#comanda .img-wrapper img{
    position: relative;
    z-index: 1;
}
#comanda .img-wrapper:before{
    position: absolute;
    content: '';
    left: -110%;
    right: 3%;
    top: 0;
    bottom: 0;
    background-image: url('../img/raniseptol-cicatrice-packshot-bg.png');
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-position: center 95%;
    background-repeat: no-repeat;
    z-index: 0;
}

#comanda a.cumpara-button{
    position: relative;
    display: block;
    padding:    0.4em 3em;
    color:  #fff;
    font-family: 'Khand', sans-serif;
    font-size: 2rem;
    line-height: 1em;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
#comanda a.cumpara-button:hover{
    text-decoration: none;
    color:  #fff571 !important;
}
#comanda a.cumpara-button:before{
    position: absolute;
    content: '';
    display: block;
    left: -10%;
    right: -8%;
    top: 0;
    bottom: 0;
    background-image: url('../img/cumpara-bg.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}
#comanda ul{
    list-style: none;
    margin-bottom: 1em;
    padding-left: 2.7em;
    padding-right: 1.5em;
}
#comanda ul>li{
    position: relative;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1em;
    text-align: left;
}
#comanda ul>li:before{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    left: -50px;
    top: -3px;
    background-image: url('../img/bullet-1.jpg');
    background-position: center;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
}


    /*******************************************/
   /*                                         */
  /*              media queries              */
 /*                                         */
/*******************************************/



@media screen and (max-width: 1920px) {

}


@media screen and (max-width: 1279px) {

}


@media screen and (max-width: 1199px) {
    
}


@media screen and (min-width: 992px) and (max-width: 1199px){
    
}


@media screen and (max-width: 991px) {
    #main-nav .navbar-collapse{
        background-color: rgba(230,230,230,0.6);
        box-shadow: 0 0 10px 10px rgba(230,230,230,0.6);
    }    
    nav#main-nav .nav-link{
        font-size:  2rem;
        line-height: 1.3em;
        text-shadow: -4px -4px 8px rgba(24, 61, 59, 0.9), 4px -4px 8px rgba(24, 61, 59, 0.9), -4px 4px 8px rgba(24, 61, 59, 0.9), 4px 4px 8px rgba(24, 61, 59, 0.9);    
    }
    .slider-top .carousel-caption h1{
        font-size:  5.6vw;
    }
    #utilizare .section-interior:before{
        background-position: left 60%;
    }
}


@media screen and (max-width: 767px) {
    .slider-top .carousel-caption:before{
        width:  20vw;
    }
    .slider-top .carousel-caption .header-packshot{
        width:  30vw;
    }
    .slider-top .carousel-caption .header-packshot:after{
        height: 25%;
        bottom: -10%;
    }
    #cicatrice .section-interior{
        background-image: none;
    }
}


@media screen and (max-width: 575px) {    
    .slider-top .carousel-item{
        min-height: 540px;
    }    
    .slider-top .carousel-caption h1{
        font-size: 8vw;
        margin-bottom: 4vw;
    }
    .slider-top .carousel-caption .header-packshot{
        width: 100%;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 576px) {
    .slider-top .carousel-caption .header-packshot{
        flex-basis: auto;
        flex-grow: 0;
        padding-left: 0;
        padding-right: 0;
    }
}


@media screen and (min-width:768px){
    
}


@media screen and (min-width:992px){
    
}


@media screen and (min-width:1200px){

}

@media screen and (min-width:1420px){
    .slider-top .carousel-caption h1{
        font-size: 4rem;
    }
    .slider-top .carousel-caption .header-packshot {
        width: 460px;
    }    
}
@media screen and (min-width:1920px){

}