﻿

body
{
    margin:0;
}

/*----------------------------------------------*/

.ContentLayer
{
    width:100%;
    min-height: 80vh;
    color: #414141;
    font-family: Arial;
    padding: 50px 0;
    box-sizing:border-box;
    display: table;
}


.InfoPart
{
    width:60%;
    margin-left:3%;
    float:left;
    display:table;
    box-sizing:border-box;
}

.ImagePart
{
    width:30%;
    /*min-height:50vh;*/
    margin-left:3%;
    margin-right:3%;
    /*padding-top:50px;*/
    float:left;
    box-sizing:border-box;
}

    .ImagePart img
    {
        width:100%;
    }


.txtLayer
{
    width:100%;
    /*width:80%;
    margin-left:10%;*/
}

.validationLayer
{
    width:100%;
    /*width:80%;
    margin-left:10%;*/
    margin-top:20px;
}

/*---------------------------*/
.txtControl
{
    width:20vw;
    height:28px;
    padding-left:5px;
    margin-left:0 5px;
    box-sizing:border-box;
}

.btnControl
{
    min-width:100px;
    display:inline-block;
    color:white;
    background-color:#FF5572;
    font-weight:bold;
    border:none;
    padding: 10px 20px;
    text-align:center;
    box-sizing:border-box;
}

    .btnControl:hover
    {
        color: #FF5572;
        background-color: white;
        border: 1px solid #FF5572;
    }
/*----------------------------------------- Tablet --------------------------------------*/
@media only screen and (min-width:481px) and (max-width: 768px)
{

    .InfoPart
    {
        width: 100%;
        margin:0;
    }

    .ImagePart
    {
        width: 100%;
        min-height: 20vh;
        text-align: center;
        margin:0;
    }

        .ImagePart img
        {
            width: 60%;
            margin: 0 auto;
        }

    .txtLayer
    {
        width: 80%;
        margin-left: 10%;
    }

    .validationLayer
    {
        width: 80%;
        margin-left: 10%;
        margin-top: 20px;
    }


    /*---------------------*/
    .txtControl
    {
        width: 80%;
    }
}
/*------------------------------------------- Mobile ------------------------------------*/
@media only screen and (max-width: 480px)
{
    .InfoPart
    {
        width: 100%;
        margin:0;
    }

    .ImagePart
    {
        width: 100%;
        min-height: 20vh;
        text-align:center;
        margin:0;
    }

    .ImagePart img
    {
        width:80%;
        margin:0 auto;
    }



    .txtLayer
    {
        width: 80%;
        margin-left: 10%;
    }

    .validationLayer
    {
        width: 80%;
        margin-left: 10%;
        margin-top: 20px;
    }


    /*---------------------*/
    .txtControl
    {
        width: 80%;
    }


}