@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap);
@import url(jconfirm.css);


@font-face{
    font-family: 'GiorgioSansBold';
    src         :
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/GiorgioSansBold.eot) format('embedded-opentype'),
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/GiorgioSansBold.ttf) format('ttf'),
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/GiorgioSansBold.woff2) format('woff2')
}

@font-face{
    font-family : 'UniversLTPro-55Roman';
    src         :
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/UniversLTPro-55Roman.eot) format('embedded-opentype'),
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/UniversLTPro-55Roman.ttf) format('ttf'),
            url(https://showcdn.vivaticket.com/soccer/fci/fonts/UniversLTPro-55Roman.woff2) format('woff2')
}

*{
    font-family : "UniversLTPro-55Roman", sans-serif;

}


*:focus{
    outline : none !important;
}

header{
    z-index : 10;
}

body{
    min-height : 100vh;
}

.clear{
    clear : both;
}

.relative{
    position : relative;
}

h5{
    font-size   : 1.0rem !important;
    font-weight : 600 !important;
}

.spacer-5{
    width  : 100%;
    height : 5px;
}

.spacer-10{
    width  : 100%;
    height : 10px;
}

.spacer-20{
    width  : 100%;
    height : 20px;
}

.spacer-30{
    width  : 100%;
    height : 30px;
}

.spacer-40{
    width  : 100%;
    height : 40px;
}

.spacer-50{
    width  : 100%;
    height : 50px;
}

a{
    background-color : transparent;
}

.text-black{
    color : #282828;
}

.global-errors{
    color        : #e50000;
    padding-left : 1rem !important;
    margin-top   : 10px;
}

.banner-match-img{
    /* max-width: 50%;*/
}

/*--------------
   BTN STYLE
--------------*/
.btn-standard{
    border           : 1px solid #C3C3C3;
    background-color : transparent;
    color            : #FFFFFF;
}

.btn-standard:hover{
    border           : 1px solid #C3C3C3;
    color            : #000000;
}

.btn-rounded{
    border-radius : 22px;
}

.btn-modal{
    width     : 100%;
    font-size : 12px !important;
}

.btn-primary:hover{
    color : #FFFFFF !important;
}

a.btn-primary{
    text-decoration : none !important;
    padding-top     : 10px;
    color           : #000000 !important;
    font-size       : 16px !important;
}

.btn-primary:hover,
.btn-secondary:hover{
    background : #001ea0;
    border     : 1px solid #001ea0;
}

.btn-secondary{
    background : #001ea0;
    border     : 1px solid #001ea0;
}

.btn-success,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:hover{
    background-color : #A19161;
    border           : 1px solid #A19161;
}

.customization-select:after{
    content       : "";
    border-top    : .2em solid;
    border-right  : .2em solid transparent;
    border-bottom : 0;
    border-left   : .2em solid transparent;
    position      : absolute;
    top           : 50%;
    right         : 5px;
}

[type=reset], [type=submit], button, html [type=button]{
    -webkit-appearance : initial;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance : none;
    margin             : 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number]{
    -moz-appearance : textfield; /* Firefox */
}

/*--------------
   FLAGS LANG
--------------*/
.flag{
    display : inline-block;
    width   : 30px;
    height  : 18px;
}

.flag.flag-gb{
    background          : url(assets/images/flags_en.png);
    background-position : center;
    background-size     : cover;
    cursor              : pointer;
}

.flag.flag-it{
    background          : url(assets/images/flags_it.png);
    background-position : center;
    background-size     : cover;
    cursor              : pointer;
    margin-right        : 5px;
}

.collapsing{
    -webkit-transition-delay : 0s;
    transition-delay         : 0s;
    visibility               : hidden;
    transition               : unset !important;
}

.collapse.show{
    -webkit-transition-delay : 0s;
    transition-delay         : 0s;
    visibility               : visible;
}

/*--------------
   MAP CONTAINER
--------------*/
#viewer-container{
    height     : calc(100vh - 385px);
    background : #f4f4f4;
    position   : relative;
}

#viewerTreD{
    height : calc(100vh - 385px);
}

/*--------------
   MAP MOBILE OVERLAY
--------------*/
#mobile-overlay{
    height   : 100%;
    position : absolute;
    width    : 100%;
    z-index  : 99999;
}

/*--------------
   MODAL COMPONENTS
--------------*/
.modal{
    font-size : 14px;
    color     : #4a4a4a;
}

.ticketing .modal-content{
    border-radius : 0.5rem;
}

.ticketing .modal-width{
    max-width : 395px;
}

.ticketing .modal-header{
    font-size     : 14px;
    border-bottom : none;
}

.dvm-viewer3d-wrapper .glide__arrow{
    display : none !important;
}

/*--------------
   SPINNER COMPONENTS
--------------*/
#loader{
    position        : fixed;
    z-index         : 5000000;
    top             : 0px;
    left            : 0px;
    width           : 100%;
    height          : 100vh;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(0, 0, 0, .6);
}

.loader{
    /*position      : fixed;*/
    border-radius : 50%;
    animation     : spin .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite
}

#maploader{
    width              : 100%;
    height             : 100%;
    position           : absolute;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    z-index            : 999;
    visibility         : visible;
    opacity            : 1;
    -webkit-transition : .2s all;
    transition         : .2s all;
}

#maploader .logo-image-container{
    width             : 71px;
    height            : 66px;
    position          : absolute;
    top               : 0;
    bottom            : 0;
    right             : 0;
    left              : 0;
    margin            : auto;
    -webkit-transform : translateZ(0);
    border-radius     : 50%;
}

#maploader .logo-image-container .logo{
    position : absolute;
    top      : 0;
    bottom   : 0;
    right    : 0;
    left     : 0;
    height   : 100%;
    width    : 100%;
}

#maploader .logo-image-container .logo.first{
    background-image : url(../images/loader/new_loader_ext.png);
}

#maploader .logo-image-container .logo.second{
    background-image : url(../images/loader/loader_02.svg);
}

#maploader .logo-image-container .logo.third{
    background-image  : url(../images/loader/new_loader_int.png);
    -webkit-animation : rotatingY 2s linear infinite;
    animation         : rotatingY 2s linear infinite;
}

#maploader .logo-image-container .logo.fourth{
    background-image  : url(../images/loader/loader_04.svg);
    -webkit-animation : rotatingYRev 2s linear infinite;
    animation         : rotatingYRev 2s linear infinite;
}

@-webkit-keyframes rotating{
    from{
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    to{
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg)
    }
}

@keyframes rotating{
    from{
        -ms-transform     : rotate(0);
        -webkit-transform : rotate(0);
        transform         : rotate(0)
    }
    to{
        -ms-transform     : rotate(360deg);
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg)
    }
}

@-webkit-keyframes rotatingY{
    from{
        -ms-transform     : rotate3d(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
    to{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
}

@keyframes rotatingY{
    from{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
    to{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
}

@-webkit-keyframes rotatingYRev{
    from{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
    to{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
}

@keyframes rotatingYRev{
    from{
        -ms-transform     : rotateY(360deg);
        -webkit-transform : rotateY(360deg);
        transform         : rotateY(360deg)
    }
    to{
        -ms-transform     : rotateY(0);
        -webkit-transform : rotateY(0);
        transform         : rotateY(0)
    }
}

.mapLoader_title{
    text-align  : center;
    font-weight : 600;
    font-size   : 14px;
}

.mapLoader_text{
    text-align  : center;
    font-weight : 400;
    font-size   : 12px;
    opacity     : .6;
}

.carousel-control-prev svg, .carousel-control-next svg{
    color: #ffff00;
}

@keyframes spin{
    0%{
        transform : rotate(0deg);
    }
    100%{
        transform : rotate(360deg);
    }
}

/*--------------
   SCROLLER COMPONENTS
--------------*/
#wrapper{
    position : absolute;
    z-index  : 1;
    top      : 45px;
    bottom   : 25px;
    left     : 0;
    width    : 98%;
    overflow : hidden;
}

#scroller{
    position                    : absolute;
    z-index                     : 2;
    -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
    width                       : 100%;
    -webkit-transform           : translateZ(0);
    -moz-transform              : translateZ(0);
    -ms-transform               : translateZ(0);
    -o-transform                : translateZ(0);
    transform                   : translateZ(0);
    -webkit-touch-callout       : none;
    -webkit-user-select         : none;
    -moz-user-select            : none;
    -ms-user-select             : none;
    user-select                 : none;
    -webkit-text-size-adjust    : none;
    -moz-text-size-adjust       : none;
    -ms-text-size-adjust        : none;
    -o-text-size-adjust         : none;
    text-size-adjust            : none;
}


/*MATCHES LAYOUT*/
.jbtron{
    background            : radial-gradient(circle, rgba(87, 154, 199, 0.12), rgb(36, 37, 42)), url(../images/logos/background-inter.jpg) repeat-x top center;
    background-color      : rgba(0, 0, 0, 0);
    background-attachment : scroll, scroll;
    background-origin     : padding-box, padding-box;
    background-clip       : border-box, border-box;
    overflow              : hidden;
    position              : relative;
    width                 : 100%;
    height                : 100%;
    margin-top            : 3%;
    background-repeat     : no-repeat;
    background-size       : cover;
    background-position-x : inherit;
    background-color      : #24252a;
}

.matches-wrapper,
.matchcard-body{
    background            : radial-gradient(circle, rgba(87, 154, 199, 0.6), rgb(36, 37, 42)), url(../images/logos/background-inter.jpg) repeat-x top center;
    background-color      : rgba(0, 0, 0, 0);
    background-attachment : scroll, scroll;
    background-origin     : padding-box, padding-box;
    background-clip       : border-box, border-box;
    width                 : 100%;
    height                : 100%;
    margin-top            : 3%;
    background-repeat     : no-repeat;
    background-size       : cover;
    background-position   : center;
    background-color      : #24252a;
    color                 : #ffff;
    overflow              : hidden;
    position              : relative;
    padding               : 1.25rem;
}

.matches-wrapper{
    margin-top : 0%;
    min-height : 100vh;
}

.matchcard-body{
    background          : radial-gradient(circle, rgba(87, 154, 199, 0.12), rgb(36, 37, 42)), url(../images/logos/background-inter.jpg) repeat-x top center;
    background-position : center;
    background-size     : cover;
}

.matchcard-body .match-img{
    height : 60px;
}

.matchcard-footer{
    background : #232429;
}

hr{
    border-top : 3px solid #a29161;
    margin     : 0 60px 15px;
}

/** Prelazione **/
.preModalHeader{
    background-color : #EDE2E4
}

.pre-close{
    border-radius: 4.25rem !important;
    border: 1px solid #ced4da !important;
    background: white !important;
    padding: 0 5px 0 5px !important;
    right: 34px;
    position: absolute;
    top: -12px;
}

.pre-title{
    /*position : absolute;*/
    /*top      : 80px;*/
}

.pre-modal-title h5{
    color : #fff;
}

.pre-barr{
    border-bottom : 1px solid #000000;
}

.modal-title-prelazione{
    font-family: "GiorgioSansBold", sans-serif;
    font-size: 25px;
    text-transform : uppercase;
    color: #ffffff;
}

.pre-logo{
    width: 55%;
}



.pre-subtitle{
    color: #000000;
    font-family: "GiorgioSansBold", sans-serif;
    font-size: 25px;
}

.pre-input-group{
    margin : 25px 0 0 0;
}

.pre-input-group1{
    margin : 25px 0 0 0;
}

.pre-input{
    height : calc(3.25rem + 2px);
}

.input-group-prepend{
    width : 40px !important;
    border: 1px solid #ced4da;
}

.pre-input-text{
    min-width : 45px;
    border: none !important;

}

.pre-show-popup{
    font-size : 120%;
    cursor    : pointer;
}

.pre-popover{
    top  : -3%;
    left : 66%;
}

.pre-continue{
    margin : 0 auto;
    border : 0;
}

.pre-modal-content{
    background-color : #ffffff;
    border           : 0;
    color: #000000;
}

.pre-error{
    padding-left : 50px;
    color: #e50000;
}

.input-group-prepend{
    width : 40px;
}

.pre-link{
    color       : #00b0f0;
    font-weight : bold;
    cursor      : pointer;
}

.pre-continue{
    margin : 0 auto;
    border : 0;
    width  : 95% !important;
}

.pre-modal-header{
    background : #001ea0;
}

.pre-modal-title h5{
    color : white !important;
}

.modal-footer{
    width  : 100%;
    cursor : pointer;
    border : 0;
}

/** Fine prelazione **/