/* ///////////////////////////////////////////////////////////// */
/********************** >= 570px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:570px){
    .kit_logo, .medkit{width: 50%;}
    .full_page > figure, .crema > img, .spray > img, #crema, #spray{
        border-bottom: none;
        padding: 0px; 
    }
    .medkit, .crema, .spray{box-shadow: none;}
    .half{width:50%;margin:0!important;}
    .half > img{width:100% !important;}
    main{margin-top: 10%;}
/******************************* ARTICLES FONT SIZE**********************************************************************/
    article#general div, div.text,  .indicatii_tab > div > ul{ font-size: 1.5em;}
    .slice, .box{ font-size: 1.3em;}
    article#general > h1, .subtitle{ font-size: 3em;}
    .reference{font-size: 1em;}
    .compoz_section_title, .ambalare_section_title { font-size: 1.7em}
    footer .rights {
        font-size: 1.2em;
        text-align: center;
    }
    
 /***************************** START Article ****************************************************/
    /********************* tabs **********************/
    .nav-tabs, #regen .nav-tabs, #skin .nav-tabs, #control .nav-tabs{    border-bottom: 0;}
    .nav-tabs>li{width: auto;border-bottom: 1px solid #f7931e;}
    #control .nav-tabs>li{border-bottom: 1px solid #fab900;}
    #regen .nav-tabs>li{border-bottom: 1px solid #ef3219;}
    #skin .nav-tabs>li{border-bottom: 1px solid #f196b0;}
    .nav-tabs>li.active, #regen .nav-tabs>li.active, #control .nav-tabs>li.active, #skin .nav-tabs>li.active {border-bottom: 0;    margin-top: -1px;}
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        border: 1px solid #f7931e;
        border-bottom: 0;
        box-shadow: none;
        margin: 0;
    }
    .tab-content {
         box-shadow: none;; 
         padding-bottom: 0; 
    }
    
/* -------------------- COmpozitie ------------------------ */
    
    .slice:before, .box::before {border-color: #b3b3b3 #f4f4f5; }


    #control .nav-tabs>li.active>a, #control  .nav-tabs>li.active>a:focus, #control  .nav-tabs>li.active>a:hover {border: 1px solid #fab900; border-bottom:0;}
    #regen .nav-tabs>li.active>a, #regen  .nav-tabs>li.active>a:focus, #regen  .nav-tabs>li.active>a:hover {border: 1px solid #ef3219; border-bottom:0;}
    #skin .nav-tabs>li.active>a, #skin  .nav-tabs>li.active>a:focus, #skin  .nav-tabs>li.active>a:hover {border: 1px solid #f196b0; border-bottom:0;}

/* ------------------------------  FOOTER  -------------------------- */
    footer .links img{width: 60%;}
}

/* ///////////////////////////////////////////////////////////// */
/********************** >= 768px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:768px){

/***************** \\\\\ PAGE  HEADER  //////*****************************/
    header{    border-bottom: 8px solid #073479;}   
    .cover{
        text-align: center;
        background-size: cover;
        background-image: url(../img/blur.jpg);
        width: 100%;
        display: inline-block;
        text-align: left;
        padding-left: 5%;
        padding-top: 5%;
        padding-bottom: 10%;
        background-position: 0 27%;
    }
    img.logo {   max-width: inherit;    }
    .box_fill{opacity: 0;}
    /******************** \\\\ NAVIGATION //// ******************************/
    aside, #lg_nav{display: block;}
    #xs_nav{display: none;}
    .nav_icon{
        width: 50px;
        height: 50px;
    }
    .nav_link.pacient > .nav_icon{
        background-position: -56px 0;
    }
    .nav_link.contact > .nav_icon{
        background-position: 56px 0;
    }
    nav.scroll img.logo{      width: 100%;    max-width: 250px;}
    nav.scroll > a:first-child{  text-align: left;    margin-top: 30px;}
    nav.scroll .nav_link {   padding: 10px 10px;    }
    
/*********************************** ASIDE **********************************/
aside figure {    transform-origin: 170% 140%;}
/*********************************** MAIN **********************************/
    main{margin-top: 0;}
    main::after, footer::after{    opacity: .15;}
    article#general > h1, .subtitle {    font-size: 3.2em;}
    article#general div:first-child{
        border-right: 5px solid #f7931e;
        padding-right: 50px;
        margin-bottom: 0;
    }
    article#general div:last-child{   padding-left: 50px;    }
    .reference, .no_float > figure, .no_float > div{font-size: 1.1em;}

    .preview{display: inline-block;}
    .control_prev, .regen_prev{margin-top: 14px;}
    .hr_wrapper>figure>img{width: 10%;}
    .hr_wrapper>figure::before, .hr_wrapper>figure::after{width: 44%;}

    /********************* tabs **********************/
    .nav-tabs, #regen .nav-tabs, #skin .nav-tabs{   border-bottom: 1px solid #f7931e;}
    .nav-tabs>li, #regen .nav-tabs>li, #skin .nav-tabs>li, #control .nav-tabs>li{border-bottom: 0;}
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-bottom: 1px solid #f8f8f9;}
    #control .nav-tabs{    border-bottom: 1px solid #fab900;}
    #regen .nav-tabs{    border-bottom: 1px solid #ef3219;}
    #skin .nav-tabs{    border-bottom: 1px solid #f196b0;}
    .nav-tabs>li>a{font-size:1.1em;}
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{font-size:1.2em;}

    #control .nav-tabs>li.active>a, #control .nav-tabs>li.active>a:focus, #control .nav-tabs>li.active>a:hover{    border-bottom: 1px solid #f9f9f9;}
    #regen .nav-tabs>li.active>a, #regen .nav-tabs>li.active>a:focus, #regen .nav-tabs>li.active>a:hover{    border-bottom: 1px solid #f9f9f9;}
    #skin .nav-tabs>li.active>a, #skin .nav-tabs>li.active>a:focus, #skin .nav-tabs>li.active>a:hover{    border-bottom: 1px solid #f9f9f9;}
  
 /* *************************** ARTICLE - - - -  CONTROL *************************** */   
    .ctrl_half{width: 50%;}
    .crema.half > img, .spray.half > img{width: 100% !important;}
    .half > img{width: 70% !important;}
    .medkit.half{text-align: center;}

    /* --------------------------------\\\\\ PAGE FOOTER /////----------------------------------- */
    footer .links img {    width: 100%;}
    footer .links > div{border:0; margin:0; padding:0;}
}

/* ///////////////////////////////////////////////////////////// */
/********************** >= 1020px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:1020px){
    .kit_logo > img{width: 70%;}
    .ctrl_half{margin:0; margin-bottom: 10%;}
    #regen .medkit > img{width: 50%;margin-bottom: 20%;}
}

/* ///////////////////////////////////////////////////////////// */
/********************** >= 1200px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:1200px){
    .box_fill{display: none;}
    nav.scroll{height: 98px;}
    nav.scroll > a:first-child{margin-top: 20px;}
    article#general > h1, .subtitle{  font-size: 4em;   }
    article { padding-top: 7%;}
    .slice, .box{   font-size: 1.3em;}
    aside figure {    transform-origin: 190% 160%;}
    article#general div, div.text, .indicatii_tab > div > ul, article#general div {   font-size: 1.5em;}
    .compoz_section_title, .ambalare_section_title {   font-size: 2em;}
    .compoz_section img {   max-width: 200px;}
    .reference {   font-size: 1.1em;}
    .nav-tabs>li>a{font-size:1.13em;}
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{font-size:1.3em;}
    .medkit > img{width: 60%;}
    .half > img{width: 60% !important;}
    footer .rights {    font-size: 1.1em;    text-align: left;}
}

/* ///////////////////////////////////////////////////////////// */
/********************** >= 1500px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:1500px){
    nav {
        width: 50%;
        left: 25%;
        bottom: -60px;
    }
    footer .rights {    font-size: 1.2em;}
    nav.no_scroll .nav_link:hover {  background-color: rgba(0,0,0,.15); }
    img.logo {    width: 40%;}
    .hr_wrapper>figure>img {   width: 6%;}
    .hr_wrapper>figure::before, .hr_wrapper>figure::after{width: 46%;}
    article#general > h1, .subtitle {   font-size: 5.5em;}
    article#general div, div.text, article#general div {    font-size: 2.1em;}
    .nav_link > span:last-child {   font-size: 1.2em;}
    .subtitle{    margin-bottom: 10%;}
    .half > img, .medkit > img {    width: 50% !important;}
    #crema > img, #spray > img{    width: 70% !important;}
    #regen .medkit > img {    width: 40% !important;}
}

/* ///////////////////////////////////////////////////////////// */
/********************** >= 2000px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (min-width:2000px){
    aside{    width: 50px;}
    aside > a.start, aside > a.skin, aside > a.regen, aside > a.control{    background-size: cover; }
}

/*----------------------------------------------*/
/* ---------------   MAX WIDTH ------------ */
/* ///////////////////////////////////////////////////////////// */
/********************** < 768px ******************************/
/* ///////////////////////////////////////////////////////////// */
@media screen and (max-width:768px){
    .skin{background: #f196b0 !important;}
    .regen{background: #ef3219 !important;}
    .control{background: #fab900 !important;} 
    .start{background: #808080 !important;}
}