/* Start custom form CSS generated by https://jennamolby.com/pardot-form-style-generator/ */
/* Load the custom font */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
@font-face {
    font-family: 'Gotham Rounded';
    src: url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.eot');
    src: url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.woff2') format('woff2'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.woff') format('woff'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.ttf') format('truetype'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Medium.svg#GothamRounded-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded Book';
    src: url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.eot');
    src: url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.woff2') format('woff2'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.woff') format('woff'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.ttf') format('truetype'),
        url('https://www.imagicle.com/wp-content/themes/imagicle/assets/fonts/Gotham/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*-----------------------------------------*/
/* Use this section to change your colors! */
/*-----------------------------------------*/
:root {
    --field-labels: #00225A;
    --field-background:transparent;
    --field-border: #00225A;
    --field-text: #5C6B7A;
    --button-background-normal: #00225A;
    --button-text-normal: #ffffff;
    --button-background-hover: #FFFFFF;
    --button-text-hover: #00225A;
    --button-border-hover: 2px #00225A;
    --form-background: #FFFFFF;
    --main-header: #00225A;
    --sub-header: #00225A;
    --content-background: #ffffff;
}
/*----------------------------------*/
/*           GENERAL Styling           */
/*----------------------------------*/
body {
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: calc(100vh - 60px);
    font-size: 18px;
    color: #5C6B7A;
    background-image: url('https://discover.imagicle.com/l/925773/2021-06-03/29h2/925773/1622734379TEmhTFhS/1_elementi_grafici_form.svg');
    background-position: center 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e9edf3;
}
body.licenseCloud {
    background-color: #fff;
}
body.pardot {
    background-color: #fff;
    background-image: none;
}
h1, h2, h3, h4, h5 {
    font-family: 'Gotham Rounded';
    color: var(--main-header);
    margin: 0;
}

h1 {
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    padding: 20px 0;
    padding-top: 0;
}

h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.15;
    padding-bottom: 20px;
}

h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

h4 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
}

h5 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
}

h6 {
    font-size: 22px;
    font-weight: 450;
    line-height: 1.3;
}
.subhead {
    font-size: 32px;
    line-height: 1.3;
}


#header{
    width:100%;
    background-color:#00b7f1;
    display:flex;
    height:78px;
    align-content: center;
    align-items: center;

}

#headerContent{
    width:70%;
    min-width:1160px;
    display:block;
    margin:0 auto;
    max-width:1300px;
}

.extraButton{
    font-size:16px;
    font-weight:700;
    width:200px;
    height:60px;
    color:var(--button-text-normal);
    background-color:var(--button-background-normal);
    border-width:0;
    border-radius:4px;
    line-height:60px;
    display:block;
    margin:20px 0!important;
    float:right;
    text-decoration:none;
    text-align:center;
}

.extraButton:hover{
    color:var(--button-text-hover);
    background-color:var(--button-background-hover);
}

#logo{
    width:auto;
    height:36px;
    float:left;
    display:block;
    margin:0;
}

#title{
    width:100%;
    min-height:240px;
    display:block;
    overflow:visible;
    background-image: url('https://discover.imagicle.com/l/925773/2021-05-20/y2x/925773/1621507373IpOnfNGT/general_banner.png');
    background-repeat: no-repeat;
    background-size:cover;
}

#hero{
    width:100%;
    height:0px;
    overflow:visible;
    position:relative;
    z-index:-2;
}

#titleImage{
    background-image: url('https://discover.imagicle.com/l/925773/2021-05-20/y2x/925773/1621507373IpOnfNGT/general_banner.png');
    background-repeat: no-repeat;
    background-size:cover;
    min-height:250px;
    position:relative;
    z-index:1;
    display:block;
}

#titleImage::before{
    content:"";
    position:relative;
    z-index:5;
    width:100%;
    height:100%;
    display:block;
    min-height:250px;
}

#titleContent{
    width:70%;
    min-width:1160px;
    margin:0 auto;
    position:relative;
    max-width:1300px;

}

#bodyMain{
    width:100%;
    display: inline-block;
    overflow:visible;
    padding-bottom:30px;
}

#bodyMain.sfondo-blu {
    background-image: url("https://www.imagicle.com/wp-content/themes/imagicle/assets/img/landing_webinar_desktop_sfondo.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
#bodyMain.sfondo-blu #bodyMainContent .intestazione {
    color: #fff;
    padding: 40px 0;
}

#bodyMainContent{
    width:70%;
    min-width:1160px;
    max-width:1300px;
    margin:0 auto;
}

#backgroundImage{
    height:0px;
    width:100%;
    overflow:visible;
    position:relative;
}

#formBox{
    float:right;
    margin-top:-140px;
    width:450px;
    background-color:var(--form-background);
    position:relative;
    z-index:5;
    border-radius: 30px;
    -webkit-box-shadow: 0px 20px 85px -45px rgba(0,34,90,0.77);
    -moz-box-shadow: 0px 20px 85px -45px rgba(0,34,90,0.77);
    box-shadow: 0px 20px 85px -45px rgba(0,34,90,0.77);
    transition: all .2s ease-in-out;
}
#formBox.center {
    float: none;
    margin: 20px auto;
    padding-top: 10px;
}
#formBox.activation {
    margin-top: 0px!important;
}
#content{
    padding-right:560px;
    margin:20px 0;
    display:block;
    min-height:700px;
}

#footer{
    width:100%;
    display:block;
    position:absolute;
    bottom:0;
    margin-bottom:-60px;
    background-color:#002159;
    height:60px;
    font-size: 15px;
}

#footerContent{
    width:80%;
    margin:0 auto;
    line-height:60px;
    text-align:center;
    color:#ffffff;
    font-family: 'Source Sans Pro', sans-serif;
}



/*----------------------------------*/
/*           Form Styling           */
/*----------------------------------*/

form.form{margin:40px; padding:0; border-radius:30px;}

/*font styles for above & below form content*/
form.form p, form.form li, form.form span, form.form h1, form.form h2, form.form h3, form.form h4{line-height:1.5em;}
form.form p, form.form li{font-size:14px; color:#00225A;}
form.form h1{font-size:32px; color:#00225A; font-weight:700; padding-bottom:20px;}
form.form h2{font-size:28px; color:#00225A;padding-bottom:20px}
form.form h3{font-size:24px; color:#00225A; font-weight:700;border-bottom: 3px solid #e9edf3;
             margin: 0 -40px;
             padding: 0 40px 20px 40px;
}
form.form h4{font-size:20px; color:#00225A;padding-bottom:20px}

/*Field stylings default to two column layout*/
form.form p label{
    line-height:1.5em;
    font-size:18px;
    color: var(--field-labels)!important;
    font-weight:400;
    width:100%!important;
    text-align:left!important;
    padding-top:0;
    padding-bottom:3px;
    display:block;

}
form.form p span span label{line-height:1em; font-size:16px; color:var(--field-labels)!important; vertical-align:bottom!important; position:relative; top:3px;}
form.form p span{margin:0!important; width:100%;}
form.form p span span{width:100%;}
form.form p.fullWidth span span{width:33%;min-width:245px;}
form.form p input.text, form.form p select, form.form p textarea.standard, form.form p input[type="text"]{
    line-height:1.5em;
    font-size:16px;
    background-color:var(--field-background);
    color:var(--field-text);
    border:2px solid var(--field-border);
    border-radius:28px;
    width:100%;
    height:40px;
    box-sizing:border-box;
    padding:7px 14px;
    font-family: 'Source Sans Pro', sans-serif;

}
/* the input fields on focus */
form.form p input.text:focus,
form.form p textarea.standard:focus,
form.form p select:focus,
form.form p input.date:focus {
    border-color:#00225A;
    outline: none;
}

form.form p label.field-label-error {color: #F05032 !important}
/*form.form p input:focus+label.field-label-error {color:var(--field-labels)!important; border: 1px solid red;}	*/
/*form.form p textarea.standard{height:80px!important;}*/
form.form p textarea.standard{height:auto; resize: none;}
form.form p label.inline {_line-height:1.5em; font-size:16px;}
form.form p.required label, form.form span.required label {background: none!important}

/*Error and Description Styling*/
form.form p.errors{display:block; width:98%;color: #F05032;font-size: 22px;margin-bottom: 5px;}
form.form p.errors.no-label{display:none;}
form.form p.error.no-label:not(.form-field):not(#resubscribeConfirmText){display:none;}

form.form span.error{margin:0 .2em!important; padding:0!important;}
form.form p span p.error{margin:0 1%;}
form.form p span.description{margin-left:.2em!important;display:inline-block;}

.red-color,form.form div.error,form.form p.error,form.form p.error label,form.form span.error {
    color: #F05032!important;
}
form.form span.error {
    display: none;
}
form.form p.form-field.email span.error {
    display: block;
}

/*Add fullWidth class in advanced tab of form builder to make field full width of form*/
form.form p.fullWidth {width:97.5%!important; margin:0 .5%!important; display:block!important;}

/*Submit button styling*/
form.form p.submit{margin:20px .5%!important; width:97.5%!important; padding-top:10px; padding-bottom:0px; text-align:center;}
form.form p input[type="submit"]{
    font-family: 'Source Sans Pro', sans-serif;
    font-size:16px;
    font-weight:600;
    width:100%;
    min-width:200px;
    height:40px;
    color:var(--button-text-normal);
    background-color:var(--button-background-normal);
    border:2px solid var(--button-background-normal);
    border-radius:30px;
    line-height:0px;
    display:block;
    margin:0 auto!important;
    padding:0!important;
    cursor:pointer;
}
form.form p input[type="submit"]:hover{padding: 7px 17px; color:var(--button-text-hover); background-color:var(--button-background-hover);}

form.form .form-field {
    margin:0;
    padding: 10px 0 0 0;
}

/* hide the regular checkbox */
.pd-checkbox input {
    opacity: 0;
    position: absolute;
}
/* position the label */
.pd-checkbox input, .pd-checkbox label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 5px 0;
    cursor: pointer;
}
.pd-checkbox label {
    position: relative;
}
.pd-checkbox:not(.single) span.value {
    display: grid!important;
    grid-template-columns: repeat(2,50%);
}

.pd-checkbox span.value label.inline {
    display: grid;
    line-height: 1.3;
    padding: 0 0 3px 0;
    text-align: left;
    grid-template-columns: 20px 0.9fr;
    grid-gap: 5px;
    align-items: start;
}

/* style the unchecked checkbox */
.pd-checkbox input+label:before {
    content: '';
    background:transparent;
    border: 2px solid #00225a;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    padding: 0px;
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: normal;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}
/* style the checked checkbox */
.pd-checkbox input:checked+label:before {
    content: "\2713";
    background: #00C0F0;
    color: #FFFFFF;
    border-color: #00C0F0;
}
form.form p.no-label {
    margin-left: 0 !important;
}

/* hide the regular radio button */
.pd-radio input {
    opacity: 0;
    position: absolute;
}
/* position the label */
.pd-radio input, .pd-radio label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    cursor: pointer;
}
.pd-radio label {
    position: relative;
}
/* style the unchecked radio button */
.pd-radio input + label:before {
    content: '';
    background: transparent;
    border: 2px solid #00225a;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    padding: 0px;
    margin-right: 5px;
    text-align: center;
    font-size: 10px;
    line-height: normal;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.pd-radio input + label:before {
    border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked + label:before {
    content: "\25CF";
    background:white;
    color: #00C0F0;
    border-color: #00C0F0;
}

@media (max-width: 1200px) {
    form.form p.form-field {width:47%!important; margin:0 .9%!important; display:inline-block; vertical-align:top;}
    form.form p.form-field.fullWidth{width:97.5%!important; margin:.5%!important;}
    form.form p label.inline {width:100%!important; display:inline-block;}
    #formBox{float:none; width:100%; margin-top:40px; margin-bottom: 50px; display: flex;}
    #headerContent{min-width:auto;}
    #bodyMainContent{min-width:auto;}
    #titleContent{min-width:auto;}
    #content{padding:0;}
}

@media (max-width: 700px) {
    form.form p.form-field.fullWidth{width:97.5%!important; margin:.5%!important;}
    form.form p.form-field{width:97.5%!important; margin:.5%!important;}
    #headerContent{width:95%;}
    #logo{max-width:45%; height:auto; max-height:25px; margin-right:0; margin-left:10px;}
    .extrabutton{width:45%;}
    #titleContent{text-align:center;}
    #titleContent table{width:100%;}
    #titleImage::before{background: linear-gradient(to right, rgba(255,255,255,0.9) 30%,rgba(255,255,255,0.9) 100%);}
    #bodyMainContent{width:100%!important; margin:0!important; padding: 10px}
    #content{margin:20px!important;}
}
@media (max-width: 480px) {
    form.form {margin:30px}
    form.form h3 {
        margin: 0 -30px;
        padding: 0 30px 20px 30px;
    }
    .pd-checkbox span.value {
        grid-template-columns: repeat(1,100%);
    }
}
@media (max-width: 400px) {
    form.form {margin:20px}
    form.form h3 {
        margin: 0 -20px;
        padding: 0 20px 20px 20px;
    }
}

@media (max-width: 320px) {
    form.form {margin:15px}
    form.form h3 {
        margin: 0 -15px;
        padding: 0 15px 15px 15px;
    }
}