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

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

.bg-secondary{
    background-color: #99c8d6!important;
}
.text-secondary, .text-secondary a{
    color: #99c8d6!important;
}
.border-secondary{
    border-color: #99c8d6!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: #f8f9fa!important;
}
.text-light, .text-light a{
    color: #f8f9fa!important;
}
.border-light{
    border-color: #f8f9fa!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;
}



  /************/
 /*  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: #5fc5c2;
    background-image: url('../img/header-bg.png');
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

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

.slider-top .carousel-caption:before {
    content:    '';
    position: absolute;
    width:  194px;
    height: 219px;
    left:   30px;;
    bottom: 5%;
    background-image: url('../img/header-recomendat.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.slider-top .carousel-caption h1{
    font-family: 'Khand', sans-serif;
    font-size:  4.3rem;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1em;
}
.slider-top .carousel-caption .header-packshot{
    position: relative;
    width:  205px;
}
.slider-top .carousel-caption .header-packshot:before{
    content:    '';
    position: absolute;
    width:  220%;
    height: 20%;
    left:   -70%;
    bottom: -5%;
    background-image: url('../img/header-packshot-shadow.png');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: -1;
}
.slider-top .carousel-caption .header-packshot:after{
    content:    '';
    position: absolute;
    width:  600%;
    height: 20%;
    left:   -100%;
    bottom: -7%;
    background-image: url('../img/header-desk.png');
    background-size: auto;
    background-position: left bottom;
    background-repeat: no-repeat;
    z-index: -2;
}

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

.homepage footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    z-index: 99;
}

footer p{
    text-align: center;
    font-size: 0.9rem;
}

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

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;
}

.homepage section#page-content{
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    padding-bottom: 145px;
    overflow: hidden;
    z-index: 1;
/*    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;*/
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;    
}
.non-homepage section#page-content{
    min-height: calc(100vh - 172px);
}

div#main-section{
    position: relative;
    height: 100%;
    padding-top:    0;
    padding-bottom: 1.5rem;
}

div.main-interior{
    position: relative;
    height: 100%;
    padding-top:    2rem;
    background-image: url(../img/info-bg.jpg);
    background-size: cover;
    background-position: right top;    
}

div.main-interior:before{
    content:    '';
    position: absolute;
    width:  300%;
    height: 14px;
    top:    0;
    right:  0;
    background-color: #f1602a;
}
div.main-interior>.row{
    height: 100%;
}
div.main-interior>.row>.col{
    height: 100%;
}

div#main-section a{
	display:	block;
	height:	100%;
        text-align: center;
}

div#main-section a img{
    max-height: 100%;
    width: auto;
    margin-left:    auto;
    margin-right:   auto;
    transition: 0.4s;
}

div#main-section a:hover img{
    -webkit-filter: saturate(2) brightness(1.05);
    filter: saturate(2) brightness(1.05);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

div#main-section div.inside-row{
    width:  90%;
    height: 60%;
    max-height:50vw;
    margin-left: auto;
    margin-right: auto;
}

div#main-section div.inside-row>div{
    height:  100%;
}

div#main-section div.packshot-wrapper{

}

#page-content{
    background-image: url(../img/info-bg.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#page-content:before{
    content:    '';
    position: absolute;
    width:  300%;
    height: 14px;
    top:    0;
    right:  0;
    background-color: #f1602a;
}


    /*******************************************/
   /*                                         */
  /*              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){
    div#main-section a img{
        max-width: 240px;
    }
}


@media screen and (max-width: 991px) {
    .homepage section#page-content{
        position: relative;
        padding-bottom: 0;
    }
    div.main-interior{
        -webkit-background-size: auto 50%;
        background-size: auto 70%;
        background-attachment: fixed;
        background-position: center 70%;
        background-repeat: no-repeat;
    }
    div#main-section div.inside-row{
        max-height: 100%;
    }
    .homepage footer{
        position: static;
    }
    div#main-section a img{
        height: auto;
        max-width: 280px;
    }
    div#main-section div[class^="raniseptol"] img{
        max-width: 220px;
    }
    #copyright p{
        font-size: 1.1rem;
    }
}


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

}


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

}

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

}


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


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


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

}

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

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

}