/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11/Nov/2015, 14:00:04
    Author     : Pedro Rodrigues
*/
.modalBox > form{
    width: 70%; 
    float: left; 
    text-align: left;
}

.modalBox > form > input, 
.modalBox > form > label > p,
.modalBox > form > textarea{
    width: 95%;
    float: left;
}
.modalSplashScreenBg{
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 10000;
}
.modalBox{
    width: 500px;
    height: auto;
    position: relative;
    margin: 3% auto;
    padding: 25px;
    display: table !important;
    background-color: #fff;
}
.btnModalBox, .btnBackToShopBox{
    width: auto;
    height: 33px;
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 0px;
}
.modalBox > img{
    width: 150px; 
    float: right;
    position: absolute;
    right: 5px;
}
/*.processingStatusBox{
    width: 100%; 
    height: auto; 
    margin-top: 0px;
    float: left; 
    display: none;
    text-align: right;
}*/
.processingStatusBox > img, 
.processingStatusBox > span{
    display : none;
    float: left; 
}

input#contactCapchaId{
    width: 30%;
    
}
.captchaImgBox{
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-raidus: 3px;
    float: left;
    margin-left: 5px;
    margin-top: 3px;
}
.msgSendStatusMessageBox, .processingStatusBox{
    width: 100% !important; 
    height: 20px;
    margin-right: 28px;
    float: left;
    text-align: left;
    display: table;
}
@media only screen and (max-width: 1023px){
    .modalBox, 
    .modalBox > img,
    #contactInputFullNameId{
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;        
    }
}
@media only screen and (max-width: 630px){
    .modalBox{
        width: 420px;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;         
    }
    .modalBox > form{
        width: 100%; 
    }
    #contactInputFullNameId{
        width: 55% !important;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
    }    
    
    .modalBox > img{
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
        float: left;
        width: 85px;
        position: absolute;
        right: 20px;
        top: 30px;
    }
}
@media only screen and (max-width: 545px){
    .modalBox{
        width: 400px;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;         
    }
}
@media only screen and (max-width: 530px){
    .modalBox{
        width: 365px;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;         
    }
}
@media only screen and (max-width: 490px){
    .modalBox{
        width: 345px;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;         
    }
    .modalBox > img{
        width: 115px !important;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
        right: 5px;
        top: 77px;
        
    }
}
@media only screen and (max-width: 449px){
    .modalBox{
        width: 70%;
        height: auto;
        display: table !important;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease;         
    }
    .btnModalBox, .btnBackToShopBox{
        width: 100%;
        margin-top: 5px;
    }
    .processingStatusBox{
        width: 45%;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
        margin-top: 0px;
    }

}
@media only screen and (max-width: 400px){
    .modalBox > img{
        width: 80px !important;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
        right: 25px;
        top: 65px;
        
    }
    #contactInputFullNameId{
        width: 95% !important;
        -webkit-transition: width 0.5s ease; /* For Safari 3.1 to 6.0 */
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        -ms-transition: width 0.5s ease;
        transition: width 0.5s ease; 
    } 
}