@font-face {
    font-family: header;
    src: url(../fonts/BORG.TTF);
}

body{
    background-image    : url("../img/mobile_background.jpg"); /* The image used */
    background-color    : #edeef0; /* Used if the image is unavailable */
    background-position : center; /* Center the image */
    background-repeat   : no-repeat; /* Do not repeat the image */
    background-size : cover; /* Resize the background image to cover the entire container */    
    min-height      : 100vh;
    max-height      : 100vh;
    overflow        : hidden;
}

@media(min-width: 800px) and (min-height: 800px){
        body{
                background-image    : url("../img/background.jpg"); /* The image used */
                background-color    : #edeef0; /* Used if the image is unavailable */
                background-position : center; /* Center the image */
                background-repeat   : no-repeat; /* Do not repeat the image */
                background-size     : cover; /* Resize the background image to cover the entire container */ 
        }
}

div.main_body{
        margin  : 0px;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* LATOP / COMPUTER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

div.form_circle{
        display : none;
        position: absolute;
        left    : 50%;
        top     : calc(50% - 125px);
        transform   : translate(-50%,-50%);
        border-radius: 50%;
        behavior: url(PIE.htc); /* remove if you don't care about IE8 */    
        background-color: #ffba00;
        width       : 700px;
        height      : 700px;
        border      : 20px solid #ffffff;
        overflow    : hidden;
        animation   : circle 2s linear 1;
}

@media(min-width: 800px) and (min-height: 800px){
        div.form_circle{
                display : block;
        }
}

@keyframes circle{
        0%{
                width   : 0px;
                height  : 0px;
                top     : 50%;
        }
        25%{
                width   : 700px;
                height  : 700px;
                top     : 50%;
        }
        100%{
                top     : calc(50% - 125px);
        }        
}

div.form_circle div.form_content{
        width   : 700px;
        height  : 700px;
        position: absolute;
        left    : 50%;
        top     : 50%;
        transform   : translate(-50%,-50%);
 }

div.form_circle div.form_header{
        clear       : both;
        width       : 100%;
        font-family : header;
        font-size   : 120px;
        color       : #000000;
        text-align  : center;
        padding     : 50px 0px 0px 20px;
        margin-bottom   : -15px;
}

div.form_circle div.form_tag_line{
        clear       : both;
        width       : 100%;    
        text-align  : right;
        font-style  : italic;
        font-size   : 23px;
        padding-right   : 130px;
        color       : #006940;
        font-family : 'Work Sans', sans-serif;
        font-weight : bold;
}

div.form_circle div.form_desc{
        clear       : both;
        width       : 100%;    
        text-align  : center;
        font-size   : 18px;
        color       : #000000;
        font-family : 'Work Sans', sans-serif;
        padding     : 30px 50px;
        line-height : 35px;
}

div.form_circle div.form_form{
        clear       : both;
        width       : 100%;    
}

div.form_circle div.form_label, div.form_circle div.form_field{
        float       : left;
        width       : 50%;    
        text-align  : right;
        padding     : 20px 20px;
        font-size   : 22px;
        color       : #000000;
        font-family : 'Work Sans', sans-serif;        
}

div.form_circle div.form_field{
        text-align  : left;
}

div.form_circle select.form_country, div.form_circle select.form_provider{
        background-color    : #ffd973;
        height              : 35px;
        border              : 2px solid #ffffff;
        font-family         : 'Work Sans', sans-serif;        
        font-size           : 18px;
        margin-top          : -4px;
}

div.form_circle div.form_buttons{
        clear       : both;
        width       : 100%;    
}

div.form_circle div.form_buttons input{
        position    : relative;
        left        : 50%;
        transform   : translateX(-50%);
        clear       : both;
        width       : 250px;
        font-size   : 20px;
        color       : #ffffff;
        font-family : 'Work Sans', sans-serif;        
        border-radius   : 5px;        
        height      : 50px;
        padding     : 10px;
        background-color    : #000000;
        margin      : 15px 0px;
}


div.footer{
        display     : none;
        clear       : both;
        width       : 100%;    
        height      : 150px;
        background-color    : #000000; /* Used if the image is unavailable */
        color       : #ffffff;
        font-family : 'Work Sans', sans-serif;        
        position    : absolute;
        bottom      : 0px;
        animation   : footer 2s linear 1;
        padding     : 0px 20px;
}

@media(min-width: 800px) and (min-height: 800px){
        div.footer{
                display : block;
        }
}

@keyframes footer{

        0%{
                bottom      : -150px;
        }
        25%{
                bottom      : -150px;
        }
        100%{
                bottom      : 0px;
        }        
}

div.footer p{
        margin-top  : 10px;
}

div.footer div.semi_circle{
        position: absolute;
        width   : 100px;
        height  : 100px;
        left    : 50%;
        top     : -50px;
        transform   : translateX(-50%);
        border-radius: 50%;
        behavior: url(PIE.htc); /* remove if you don't care about IE8 */    
        background-color: #000000;
}

div.footer div.semi_circle div.i_circle{
        position    : absolute;
        left        : 50%;
        top         : 15%;
        transform   : translate(-50%);
        width       : 40px;
        height      : 40px;
        -webkit-border-radius   : 25px;
        -moz-border-radius      : 25px;
        border-radius           : 25px;
        background-color        : #006940;
        color       : #ffffff;
        font-family : "Courier New", monospace;
        font-weight : bold;
        padding-left: 15px;
        padding-top : 10px;                 
}

div.footer div.calling_rates{
        width   : 50%;
        float   : left;
        padding-right   : 60px;
}

div.footer div.calling_rates p{
        font-size   : 20px;
}

div.footer div.calling_rates span.calling_rates_provider{
        font-size   : 16px;
        width       : 100px;
        float       : left;
}

div.footer div.calling_rates span.calling_rates_value{
        font-size   : 16px;
        width       : calc(100% - 100px);
        float       : left;    
}

div.footer div.interested{
        width   : 30%;
        float   : left;
        padding-left    : 50px;
}

div.footer div.interested p{
        font-size   : 20px;
}

div.footer div.interested span.interested_icon{
        font-size   : 16px;
        width       : 30px;
        float       : left;        
}

div.footer div.interested span.interested_icon i{
        color       : #ffba00;
}

div.footer div.interested span.interested_value{
        font-size   : 16px;
        width       : calc(100% - 30px);
        float       : left;    
}

div.footer div.interested span.interested_value a{
        color       : #ffffff;
}

div.footer div.flag{
        width       : 20%;
        float       : left;
        text-align  : right;
        padding-left: 10px;
        margin-top  : 25px;
}

div.footer div.credit{
        position    : absolute;
        right       : 20px;
        bottom      : 5px;
        font-size   : 10px;
}

div.footer div.credit a{
        color       : #ffffff;
        text-decoration : none;
}



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* MOBILE / TABLET XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

div.form_rectangle{
        position: absolute;
        left    : 50%;
        top     : calc(50% - 60px);
        transform   : translate(-50%,-50%);
        background-color: #ffba00;
        width       : 600px;
        max-width   : 90%;
        height      : calc(100vh - 150px);
        border      : 10px solid #ffffff;
        overflow    : hidden;
        animation   : rectangle 2s linear 1;
        opacity     : 0.9;
}

@media(min-width: 800px) and (min-height: 800px){
        div.form_rectangle{
                display : none;
        }
}

@keyframes rectangle{
        0%{
                width   : 0px;
                height  : 0px;
                top     : 50%;
        }
        25%{
                width   : 600px;
                height  : calc(100vh - 150px);
                top     : 50%;
        }
        100%{
                top     : calc(50% - 60px);
        }        
}

div.form_rectangle div.form_content{
        width       : 600px;
        max-width   : 90%;
        /*height      : calc(100vh - 200px);*/
        position: absolute;
        left    : 50%;
        top     : 50%;
        transform   : translate(-50%,-50%);
 }

div.form_rectangle div.form_header{
        clear       : both;
        width       : 100%;
        font-family : header;
        font-size   : 120px;
        color       : #000000;
        text-align  : center;
        padding     : 50px 0px 0px 20px;
        margin-bottom   : -15px;
}

@media(max-width: 600px){
        div.form_rectangle div.form_header{
                font-size   : 80px;
        }
}

@media(max-width: 450px){
        div.form_rectangle div.form_header{
                font-size   : 60px;
                padding     : 0px 0px 0px 20px;
                margin-top  : -10px;
        }
}

div.form_rectangle div.form_tag_line{
        clear       : both;
        width       : 100%;    
        text-align  : center;
        font-style  : italic;
        font-size   : 23px;
        color       : #006940;
        font-family : 'Work Sans', sans-serif;
        font-weight : bold;
}

@media(max-width: 600px){
        div.form_rectangle div.form_tag_line{
                padding-top : 10px;
                font-size   : 18px;
        }
}

@media(max-width: 450px){
        div.form_rectangle div.form_tag_line{
                padding-top : 10px;
                font-size   : 14px;
        }
}

div.form_rectangle div.form_desc{
        clear       : both;
        width       : 100%;    
        text-align  : center;
        font-size   : 18px;
        color       : #000000;
        font-family : 'Work Sans', sans-serif;
        padding     : 30px 50px;
        line-height : 35px;
}

@media(max-width: 600px){
        div.form_rectangle div.form_desc{
                padding     : 30px 30px;
        }
}

@media(max-width: 450px){
        div.form_rectangle div.form_desc{
                padding     : 10px 10px;
                font-size   : 14px;
                line-height : 25px;
        }
}

div.form_rectangle div.form_form{
        clear       : both;
        width       : 100%;    
}

div.form_rectangle div.form_label, div.form_rectangle div.form_field{
        float       : left;
        width       : 50%;    
        text-align  : right;
        padding     : 20px 20px;
        font-size   : 22px;
        color       : #000000;
        font-family : 'Work Sans', sans-serif;        
}

@media(max-width: 600px){
        div.form_rectangle div.form_label, div.form_rectangle div.form_field{
                font-size   : 18px;
        }
}

@media(max-width: 450px){
        div.form_rectangle div.form_label, div.form_rectangle div.form_field{
                clear   : both;
                width   : 100%;    
                text-align  : center;
                padding     : 5px 5px;
                font-size   : 16px;
        }
}

div.form_rectangle div.form_field{
        text-align  : left;
}

@media(max-width: 450px){
        div.form_rectangle div.form_field{
                text-align  : center;
        }
}

div.form_rectangle select.form_country, div.form_rectangle select.form_provider{
        background-color    : #ffd973;
        height              : 35px;
        border              : 2px solid #ffffff;
        font-family         : 'Work Sans', sans-serif;        
        font-size           : 18px;
        margin-top          : -4px;
}

@media(max-width: 600px){
        div.form_rectangle select.form_country, div.form_rectangle select.form_provider{
                font-size   : 16px;
                width       : 150px;
        }
}

@media(max-width: 450px){
        div.form_rectangle select.form_country, div.form_rectangle select.form_provider{
                font-size   : 14px;
                height      : 28px;
        }
}

div.form_rectangle div.form_buttons{
        clear       : both;
        width       : 100%;    
}

div.form_rectangle div.form_buttons input{
        position    : relative;
        left        : 50%;
        transform   : translateX(-50%);
        clear       : both;
        width       : 250px;
        font-size   : 20px;
        color       : #ffffff;
        font-family : 'Work Sans', sans-serif;        
        border-radius   : 5px;        
        height      : 50px;
        padding     : 10px;
        background-color    : #000000;
        margin      : 15px 0px;
}

@media(max-width: 600px){
        div.form_rectangle div.form_buttons input{
                font-size   : 16px;
                width       : 200px;
                height      : 40px;
        }
}

@media(max-width: 450px){
        div.form_rectangle div.form_buttons input{
                font-size   : 14px;
                padding     : 5px;
                height      : 30px;
                margin      : 10px 0px;
        }
}

div.footer_mobile{
        display     : block;
        clear       : both;
        width       : 100%;    
        height      : 100px;
        background-color    : #000000; /* Used if the image is unavailable */
        color       : #ffffff;
        font-family : 'Work Sans', sans-serif;        
        position    : absolute;
        bottom      : 0px;
        animation   : footer_mobile 2s linear 1;
        padding     : 0px 10px;
}

@media(min-width: 800px) and (min-height: 800px){
        div.footer_mobile{
                display : none;
        }
}

@keyframes footer_mobile{

        0%{
                bottom      : -100px;
        }
        25%{
                bottom      : -100px;
        }
        100%{
                bottom      : 0px;
        }        
}

div.footer_mobile p{
        margin-top  : 5px;
}


div.footer_mobile div.calling_rates{
        width   : 60%;
        float   : left;
}

@media(max-width: 600px){
        div.footer_mobile div.calling_rates{
                width   : 100%;
                clear   : both;
        }
}

div.footer_mobile div.calling_rates p.large{
        font-size   : 15px;
}

div.footer_mobile div.calling_rates p{
        font-size   : 12px;
}

div.footer_mobile div.interested{
        width   : 60%;
        float   : left;
}

@media(max-width: 600px){
        div.footer_mobile div.interested{
                width   : 100%;
                clear   : both;
        }
}

div.footer_mobile div.interested p.large{
        font-size   : 15px;
}

div.footer_mobile div.interested i{
        color       : #ffba00;
}

div.footer_mobile div.interested a{
        color       : #ffffff;
}

div.footer_mobile img{
        float   : right;
        height  : 90px;
        margin-top  : 5px;
}

@media(max-width: 600px){
        div.footer_mobile img{
                position: absolute;
                height  : 30px;
                width   : auto;
                left    : 50%;
                top     : -38px;
                transform   : translateX(-50%);
                border  : 2px solid #000000;
        }
}