/* Reminders

Responsive design:
==================

Sentence to add in each div/a/etc. that are subject to changes when resized
 */
/* some parameters are changed according to screen size, see @media below */


/*
Display:
========

display: inline-block allow to set width and/or height values.
display: inline does not allow to set width and/or height values.



/* =====================*/
/* Index.php*/
/* =====================*/

div.index_first_sentence_title
{
    color: #000000;
    font-family: quicksand_medium,verdana,arial,sans-serif;
    font-size: 25px;
    text-decoration: none;
    /*
    font-weight: bold;
    */

    text-align: center;
}

div.index_second_sentence_title
{
    color: #000000;
    font-family: quicksand_medium,verdana,arial,sans-serif;
    font-size: 25px;
    font-style: italic;
    text-decoration: none;
    /*
    font-weight: bold;
    */

    text-align: center;
}

div.index_third_sentence_title
{
    color: #000000;
    font-family: "Quicksand Light",verdana,arial,sans-serif;
    font-size: 20px;
    text-decoration: none;
    /*
    font-weight: bold;
    */

    text-align: center;
}

div.index_fourth_sentence_title
{
    padding-left: 10%;
    padding-right: 10%;
    max-width: 80%;
    color: #000000;
    font-family: "Quicksand Light",verdana,arial,sans-serif;
    font-size: 20px;
    text-decoration: none;
    /*
    font-weight: bold;
    */

    text-align: center;
}

div.dv_index_main_picture_container
{
    padding-left: 10%;
    padding-right: 10%;
    display: block;
    margin: 0 auto;
    max-width: 80%;
}


img.img_index_main_picture
{
    max-width: 100%;
    border-radius: 30px;

}

div.dv_index_principle_of_operation_picture_container
{
    padding-left: 10%;
    padding-right: 10%;
    display: block;
    margin: 0 auto;
    max-width: 80%;
}


img.img_index_principle_of_operation_picture
{
    max-width: 100%;
    border-radius: 30px;

}

/* =====================*/
/* =====================*/

div.index_first_level_vertical_space
{
    height: 50px;
}

div.index_first_sentence_paragraph
{
    width:100%;
}

.index_first_sentence_paragraph p
{
    font-family: opensans_regular,verdana,arial,sans-serif;
    font-size: 17px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding-left: 250px;
    padding-right: 250px;
}

div.index_cells
{
    width: 100%;
    text-align: center;
}

div.index_cell
{
    display: inline-block;
    margin: 5px;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: bold;
    /* border-color: #9C027A; */
    /* border-color: #818181; */
    border-color: #D3D3D3;
    border-style: solid;
    border-width: 1px;
    border-radius: 45px;
    height: 180px;
    width: 180px;
    vertical-align: text-bottom;
    text-align: center;

    position:relative;
}
div.index_cell:hover
{
    border-color: #000000;
    /* background: #E0E0E0; */
}

img.index_cell_img
{
    margin-top: 10px;
    max-height: 140px;
    max-width: 150px;
}

div.index_cell_text
{
    color: #575555;
    display: inline-block;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: bold;
    vertical-align: text-bottom;
    text-align: center;
    text-decoration: none;


    position:absolute;
    left: 0;
    width: 100%;
    bottom: 5px;
}

a.index_cell_text_link
{
    color: #575555;
    display: inline;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: bold;
    vertical-align: text-bottom;
    text-align: center;
    text-decoration: none;
}
a.index_cell_text_link:visited
{
    color: #575555;
    display: inline;
    font-family: verdana,arial,sans-serif;
    font-size: 10px;
    font-weight: bold;
    vertical-align: text-bottom;
    text-align: center;
    text-decoration: none;
}
/* =====================*/
/* =====================*/

div.index_second_level_vertical_space
{
    height: 70px;
}

/* =====================*/

div.index_second_level_left_header_with_logo_and_text
{
    display: flex;
    align-items: center;
}

div.index_second_level_left_logo
{

}

div.index_second_level_left_horizontal_space
{
    width: 10px;
}

div.index_second_level_left_title
{
    color: #000000;
    font-family: roboto_regular,verdana,arial,sans-serif;
    font-size: 23px;
    text-decoration: none;
    font-weight: bold;
    text-align: left;

    display: inline-block;


}

div.index_second_level_left_paragraph
{
    display: flex;
    align-items: center;
}

div.index_second_level_left_paragraph_text
{
    font-family: opensans_regular,verdana,arial,sans-serif;
    font-size: 17px;
    color: #8c8c8c;
    text-decoration: none;
    font-weight: bold;
    text-align: left;
}

/* =====================*/

div.index_second_level_right_header_with_text_and_logo
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

div.index_second_level_right_title
{
    color: #000000;
    font-family: roboto_regular,verdana,arial,sans-serif;
    font-size: 23px;
    text-decoration: none;
    font-weight: bold;
    text-align: right;
    display: inline-block;
}

div.index_second_level_right_horizontal_space
{
    width: 10px;
}

div.index_second_level_right_logo
{

}

div.index_second_level_right_paragraph
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

div.index_second_level_right_paragraph_text
{
    font-family: opensans_regular,verdana,arial,sans-serif;
    font-size: 17px;
    color: #8c8c8c;
    text-decoration: none;
    font-weight: bold;
    text-align: right;
}


/* =====================*/

/* =====================*/
/* =====================*/
/* =====================*/

/* ******************************************** [ All except mobiles - mid and high res ] ***************************** */
@media handheld, only screen and (min-width: 800px), only screen and (min-device-width: 800px)
{

    /* =====================*/

    .index_first_sentence_paragraph p
    {
        padding-left: 250px;
        padding-right: 250px;
    }

    /* =====================*/

    div.index_second_level_left_header_with_logo_and_text
    {
        padding-left: 25%;
    }

    div.index_second_level_left_paragraph
    {
        padding-left: 25%;
    }

    div.index_second_level_left_paragraph_text
    {
        padding-left: 70px;
        max-width: 450px;
    }

    /* =====================*/

    div.index_second_level_right_header_with_text_and_logo
    {
        padding-right: 25%;
    }

    div.index_second_level_right_paragraph
    {
        padding-right: 25%;
    }

    div.index_second_level_right_paragraph_text
    {
        padding-right: 70px;
        max-width: 450px;
    }

    /* =====================*/

}

/* ******************************************** [ Mobile - low res ] **************************** */
@media handheld, only screen and (max-width: 799px), only screen and (max-device-width: 799px)
{
    /* =====================*/

    .index_first_sentence_paragraph p
    {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* =====================*/

    div.index_second_level_left_header_with_logo_and_text
    {
        padding-left: 0%;
    }

    div.index_second_level_left_paragraph
    {
        padding-left: 0%;
    }

    div.index_second_level_left_paragraph_text
    {
        padding-left: 0px;
    }

    /* =====================*/

    div.index_second_level_right_header_with_text_and_logo
    {
        padding-right: 0%;
    }

    div.index_second_level_right_paragraph
    {
        padding-right: 0%;
    }

    div.index_second_level_right_paragraph_text
    {
        padding-right: 0px;
    }

    /* =====================*/

}