/* ######################### */
/* print
/* ######################### */
@media print {

    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    header, .public_topnav, #ltAccordion, .accordion-expand-holder, #divPagerInner {
        display: none;
    }
    #content_pages{margin-top: 0px; }
    
    
   

    h1, h2, h3, h4, h5 {
        page-break-after: avoid;
    }

    .ui-accordion-header {
        page-break-after: avoid;
    }

    @page {
        margin: 2cm;
        size: A4;
    }
}


/* ######################### */
/* responsive css
/* ######################### */
@media screen and (max-width: 960px) {
   
    #wrap_pages {
        width: 100%;
        float: left;
    }

   .footer_wrap
     {
        width: 100% !important;
        float: left;
    }

    .footer_content, .footer_content_right 
    {
        width:100%;
        float:left;
        text-align: left; 
    }


    #content_pages {
        padding-left: 10px;
        padding-right: 10px;
    }

      #content {
      margin: 50px 0 0 0;
     }



    
}


@media screen and (max-width: 690px) {
    #content {
    margin: 20px 0 0 0;
}
     #footer{
        padding: 0 10px;
    }

    #framework a{font-size:0.955em;}
  
    #wrap {
        width: 100%;
        float: left;
    }

    .login_container{
        width:50% !important;
    }
        

    .image_two, .image_three{
        width: 25% !important;
    }
   
                      
    .topnav a:not(:first-child) {
        display: none;
    }

   

    .topnav a.icon {
        float: right !important;
        display: block;
        font-size: 20px !important; 
        font-weight: bold; 
    }

    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;  
            
        }

        .topnav.responsive a {
            float:none !important;
            display: block;
            text-align: left;
            
        }

        #content_pages {
        padding-left: 7px;
        padding-right: 7px;
    }

    h1 {
        font-size: 1.143em;
            margin: 10px 0 10px 0;
    }

    h2 {
        font-size: 1em;
            margin: 10px 0 10px 0;
    }
 
    h3, h4, h5 {
        font-size: 0.857em;
            margin: 10px 0 10px 0;
    }

    p, span, .btnShowBabyGender, a {
        font-size: 0.857em;
        line-height: 1.2em;
    }

    blockquote p {
        font-size: 1em;
        line-height: 1.4em;
        padding: 0 10px;
    }

    .btnShowBabyGender {
        font-size: 0.857em;
        width: 140px;
    }

    #accordion .ui-accordion-header {
        font-size: 1em !important;
    }

    .ltAnalys {
        font-size: 1em !important;
    }
    .ltResultat {
        font-size: 1em !important;
    }

    .ltResultatValue {
        font-size: 1em !important;
    }

    #accordion .referralInfo .colLeft {
        width: 100% !important;
        padding-right: 0;
    }

    #accordion .referralInfo .colRight {
        width: 100% !important;
        padding-left: 0 !important;
    }
}

@media screen and (max-width: 650px) {
    
    .login_container {
        width: 54% !important;
    }
        

    .image_two, .image_three{
        width:22% !important;
    }
   
}

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

   

    .login_container{
        width:60% !important;
    }
        

    .image_two, .image_three{
        width:20% !important;
    }
   
}

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

   

    .login_container{
        width:70% !important;
    }
        

    .image_two, .image_three{
        width:15% !important;
    }
   
}

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

   

    .login_container{
        width:80% !important;
    }
        

    .image_two, .image_three{
        width:10% !important;
    }
   
}

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

    .image_one {
   width:150px;
   height:150px;
   
    margin: 0 25% 0 0;
    
}

    .image_four {
     width:150px;
   height:150px;
    margin: 0 0 0 25%;
  
}
   

    .login_container{
        width:100% !important;
    }
        

    .image_two, .image_three{
        display:none;
    }
   
}

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

    .image_one {
   
   
    margin: 0 20% 0 0;
    
}

    .image_four {

    margin: 0 0 0 20%;
   
  
}
   

    .login_container{
        width:100% !important;
    }
        

    .image_two, .image_three{
        display:none;
    }
   
}