body
{
    width: 99%;
    margin: auto;
}

.flex
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.main_container, .container 
{
    top:0px;
    width: 90%;
    padding: 3% 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container
{
    justify-content: space-evenly;
    padding: 0px;
}

.direction
{
    flex-direction: row; /* default */
}

.row
{
    flex-direction: row;
}

.col
{
    flex-direction: column;
}

.full-width
{
    width: 98%;
}

.w-90
{
    width: 90%;
}

.w-80
{
    width: 80%;
}

.w-70
{
    width: 70%;
}

.w-60
{
    width: 60%;
}

.w-50
{
    width: 50%;
}

.w-49
{
    width: 49%;
}

.w-48
{
    width: 48%;
}

.w-45
{
    width: 45%;
}

.w-42
{
    width: 42%;
}

.w-40
{
    width: 40%;
}

.w-30
{
    width: 30%;
}

.w-20
{
    width: 20%;
}

.col-marg_1vh
{
    margin: 1vh auto;
    
}

.col-marg_0_5vh
{
    margin: 0.5vh auto;
    
}

.section
{
    /* background-color: antiquewhite; */
    /* margin: 1%; */
    padding: inherit;
    flex-grow: 1;
    flex-basis: 90%;
}

/* raduis */
.radius-t-l
{
    border-radius: 25px 0 0 0;
}

.radius-t-r
{
    border-radius: 0px 25px 0 0;
}

.radius-b-l
{
    border-radius: 0 0 0 25px;
}

.radius-b-r
{
    border-radius: 0 0 25px 0;
}

/* end raduis */

/* ////////////////////////////// start text //////////////////////////////////////// */

.text_center
{
    text-align: center;
}

/* ////////////////////////////// start text //////////////////////////////////////// */

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

/* ////////////////////////////////////// start @media (orientation: portrait) ///////////////////////////////////// */
@media (orientation: portrait)
{
    .direction
    {
        flex-direction: row; /* default */
    }

    .w-20,.w-30, .w-40, .w-42, .w-45, .w-48, .w-49, .w-50, .w-50, .w-60, .w-70, .w-80, .w-90
    {
        width: 98%;
        margin: 0.5vh auto;
    }
    
    .column-reverse
    {
        flex-direction: column-reverse;
    }
}

/* //////////////////////////////////////   end @media (orientation: portrait) ///////////////////////////////////// */