:root {
    --theme-color-orange: #FF8759;
    --theme-color-blue: #A4CED8;
    --theme-color-black: #000;
    --theme-color-white: #fff;
    
    --theme-bgcolor: 82, 180, 255;  
    --theme-color-blue-rgb: 164, 206, 216;
    --theme-color-orange-rgb: 238, 136, 89;
    --theme-color-black-rgb: 0, 0, 0;
    --theme-color-white-rgb: 255, 255, 255;
}


@font-face {
  font-family: PTSans-Bold;
  src: url(../font/PTSans-Bold.ttf);
}

@font-face {
  font-family: PTSans-BoldItalic;
  src: url(../font/PTSans-BoldItalic.ttf);
}

@font-face {
  font-family: PTSans-Italic;
  src: url(../font/PTSans-Italic.ttf);
}

@font-face {
  font-family: PTSans-Regular;
  src: url(../font/PTSans-Regular.ttf);
}


body, html
{
    font-family: PTSans-Regular;
    font-size: 1em;
    color: var(--text-color-blue);
    margin: 0;
    height: 100%;
    overflow-x: hidden;
    
    
}

p
{

}

a
{
    color: var(--theme-color-black);
    text-decoration: none;
    cursor: pointer;
}

h1
{  
    font-family: PTSans-Bold;
    font-size: 52px;
    padding: 0;
    margin: 0;
    color: var(--theme-color-white);
}

h2
{
    font-family: PTSans-Bold;
    font-size: 40px;
    padding: 0;
    margin: 0;
    color: var(--theme-color-white);
}

h3
{
    font-family: PTSans-Regular;
    font-size: 26px;
    padding: 0;
    margin: 0;
    color: var(--theme-color-black);
}


h4
{
    font-family: PTSans-Regular;
    font-size: 20px;
    padding: 0;
    margin: 0;
    color: var(--theme-color-white);
}

h5
{
    font-family: PTSans-Regular;
    font-size: 17px;
    padding: 0;
    margin: 0;
    color: var(--theme-color-black);
}

.black
{
     color: var(--theme-color-black)!important;
}

.white
{
    color: var(--theme-color-white)!important;
}

.spacing
{
    padding: 0em 0em .5em 0em;
}


hr
{
    border: .1em solid var(--theme-color-orange);
}

/* LAYOUT */

.container
{
    width: 100%;
    position: relative;
}

.row
{
    display: flex;
    
}

.col
{
    flex: 0 0 calc((100% / 24) * var(--w));
    max-width: calc((100% / 24) * var(--w));
}


.block
{
    display: block;
}

.desktop
{
    display: flex;
}

.active
{
    display: block;
}

.coarse, .inactive
{
    display:none;
}

    
.vertical-center
{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.align-left
{
    text-align: left;
}

.align-center
{
    text-align: center;
}

.align-right
{
    text-align: right;
}

.paginator
{
    width: 100%;
    position: absolute;
    bottom: 5em;
    text-align: center;
}

.paginator-overlay
{
    width: calc(80% - 4em);
    position: absolute;
    top: 5em;
    margin: 0 10%;
    padding: 2em;
    background-color: rgba(var(--theme-color-black-rgb),.2);
    color: var(--theme-color-white);

}

.customer-overlay
{
    width: calc(80% - 4em);
    position: relative;
    margin: 1% 10%;
    padding: 2em;
    background-color: rgba(var(--theme-color-black-rgb),.2);
    color: var(--theme-color-black);
}

.video-overlay
{
    width: calc(80% - 4em);
    top: 2em;
    position: relative;
    margin: 0% 10% 5% 10%;
    padding: 2em 2em;
    background-color: rgba(var(--theme-color-black-rgb),.2);
    color: var(--theme-color-white);
}

.dropdown-arrow
{
    float:left;
}

.video
{
    margin: 3em 35% 0% 35%;
    width: 30%;
    margin-bottom: 10em;
}

.video2
{
    float: left;
    margin: 3em 0% 0 13%;
    width: 30%;
}

.video3
{
    margin: 5% 15%;
    width: 70%;
    margin-bottom: 10em;
}

.page-overlay
{
    width: calc(90% - 4em);
    position: absolute;
    top: 1em;
    margin: 3% 5%;
    padding: 2em;
    color: var(--theme-color-white);
    background-color: rgba(var(--theme-color-black-rgb),.2);
}

.animation {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    opacity: 1;
}
        
/* FORMS */
form, select, option, input, textarea, button, label
{
     font-family: var(--font-family);
     font-size: 16px;
     color: var(--theme-color-white);
     width: 100%;
}

input, select, textarea
{
    background-color: var(--theme-color-white);
    color: var(--theme-color-black);
    outline: none;
    margin: 0.2em 0;
    border: 1px solid var(--theme-color-black);
    padding: 0.5em 1em;
    line-height: 15px;
    border-radius: 5px;
}



input:focus, input:hover, textarea:focus, textarea:hover, select:hover, select:focus
{
    border: 1px solid var(--theme-color-orange);
}

label
{
    margin-bottom: 3px;
    
}

label.radio
{
    width: 0% !important;
    max-width: 40%;
}

.form-radio
{
    width: 0% !important;
    max-width: 10%;
    margin: 5px;
}

button, .button, .button-inverted
{
    cursor: pointer;
    outline: none;
    border: 1px solid var(--theme-color-black) !important;
    padding: .2em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 28px;
    background-color:  var(--theme-color-white) !important;
    color: var(--theme-color-black);
    border-radius: 5px;
}


.button-light
{
    background-color: var(--theme-color-black) !important;
    color: white;
    border: 1px solid var(--theme-color-white) !important;
}
.button-light a, .button a, .button-inverted a
{
    color: white !important;
    cursor: pointer;
    
}

button:hover, button:focus, .button:hover, .button:focus, .button-light:hover, .button-light:focus
{
    border: 1px solid var(--theme-color-orange) !important;
    background-color: var(--theme-color-white) !important;
    color: var(--theme-color-black);
}

.button
{
    background-color: var(--theme-color-black) !important;
    color: var(--theme-color-white);
    
    
}


.button-inverted
{

    background-color: var(--theme-color-white) !important;
    color: black;
}

.button-inverted:hover, .button-inverted:focus
{
    border: 1px solid var(--theme-color-blue);
    background-color: var(--theme-color-orange) !important;
    color: white;
}

.input-table
{
    margin: 0 !important;
    border-radius: 0;
}

.input-select, .input-select-table
{
    background-color: var(---theme-color-orange);
}

.input-select-table
{
    width: 60%; 
    margin: 0 20%;
    min-width: 25px;
}

.text-black
{
    color: var(--theme-color-black) !important;
}

.text-light
{
     color: var(--theme-color-blue) !important;
}

.bg-light
{
     background-color: var(--theme-color-orange) !important;
}

.text-dark
{
     color: var(--theme-color-orange) !important;
}

.bg-dark
{
    background-color: var(--theme-color-blue) !important;
}

.bg-white
{
    background-color: white !important;
}

.text-white
{
     color: white !important;
}

.brand-line-dark
{
    background-color: var(--theme-color-orange) !important;
}

.brand-line-light
{
     background-color: var(--theme-color-orange) !important;
}

.poster
{
    border: .1em solid var(--theme-color-black);
	width: 98% !important;
	
	
}

/* TABS */

.tab
{
    margin: 0 0.1vw;
    cursor: pointer;
    border-color: var(--theme-color-blue);
    color: var(--theme-color-blue);
    font-weight: 700;
    font-family: hind;
    position: relative;
    border: 1px solid var(--theme-color-blue);
}


.tab span
{
    cursor: default;
}

.tab.label
{
    padding: 5px;
}

.tab.label.active
{
    background-color: var(--theme-color-blue);
}

.tab.label.inactive
{
    
}

.tab-pane-header, .tab-pane-footer
{
    padding: 5px;
    line-height: 10px;
    background-color: var(--theme-color-blue);
    cursor: default;
    
}

.tab-pane-header
{
    border-bottom: 1px solid var(--theme-color-blue);
}

.tab-pane-footer
{
    border-top: 1px solid var(--theme-color-blue);
}


.tab-pane-header span
{
    cursor: pointer;
}

.tab-holder
{
   padding: 1vw; 
}

.tab-row
{
    
    padding: 3px;
    line-height: 10px;
    border: 1px solid var(--theme-color-blue);
    color: var(--theme-color-orange);
    font-family: Montserrat;
    font-weight: 400;
}

.tab-row:nth-child(odd)
{
    background-color: rgba(0,0,0,.6);
}

.tab-row:nth-child(even)
{
    background-color: rgba(0,0,0,.8);
}

.tab-row:nth-child(odd):hover
{
    background-color: rgba(0,0,0,.4);
}

.tab-row:nth-child(even):hover
{
    background-color: rgba(0,0,0,.6);
}

/* SVG */
.svg-icons
{
    width: 5em;
    fill: var(--theme-color-blue);
}

.color-inverted
{
    color: var(--theme-color-blue);
}

/* PAGES */
#pageContainer
{
    /*margin-top: 6vw;*/
}

#menuHamburger
{
    padding: 2em 0;
    width: 100%;
    background-color: white;
    z-index: 9;
}

.arrow-scroll
{
    width:  100%;
    position: fixed;
    opacity: .2;
    vertical-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    z-index: 10;
    pointer-events: none;
}

.arrow-scroll:hover
{
    opacity: 1;
}

.arrow-scroll-down
{
    bottom: 2em;
}

.arrow-scroll-up
{
    top: 11vw;
    transform: rotate(180deg);
}

.screen
{
    height: 20%;
    min-height: 20%;
    transition-property: all;
    transition-duration: 7s;
    transition-timing-function: ease-in;
}

.screen-close
{
    height: 50%;
}

.arrow-scroll img
{
    pointer-events: auto;
    margin: auto;
    width: 3em;
        cursor: pointer;
    
}

.page
{
    width: 100%;

}

.page-block
{
    min-height: calc(100vh - 6em);
}

.spinner {
  animation: rotate 10s linear infinite;
  -webkit-animation: rotate 10s linear infinite;
  -moz-animation: rotate 10s linear infinite;
  width:174px;
  height:174px;
  position: relative;
}

.selectable
{
    stroke:#FF8759;
    opacity: 1 !important;
    cursor: pointer;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

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

@-moz-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.path {
  stroke-dasharray: 170;
  stroke-dashoffset: 20;
}


.page-block.dark, .dark
{
    background-color: var(--theme-color-orange) !important;
}


.page-block.brand-background
{
    background-attachment: fixed !important;
    background-size: 200%!important;
    
}


.page-block-banner
{
     background-repeat: no-repeat !important;
    background-size: cover !important;
}

.overlay-arrow
{
    position: absolute;
    top: 5vh;
    margin-left: 60vw;
    cursor: pointer;
}

.overlay
{

    background-color: rgba(var(theme-color-orange-rgb), .7);
    color: var(--theme-color-blue);
}

.overlay {
    border-radius: 50%;
    padding: 2em;
    text-align: left;
    margin-top: 3em;
}

.overlay-label
{
   
    
    border-radius: 5em;
    padding: .5vw;
    text-align: center;
}


.overlay-blank
{
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
    width: 50%;
    text-align: center;
    color: white;
}

/* TABLE */
.table-holder
{
    padding: 1vw;
    max-width: 100%; 
    width: 100%;
}

.table-header
{
    margin: 0 2vw;
}

table
{
    text-align: left;
    background-color: var(--theme-color-blue);
    width: 100%;
    max-width: 100%;
}

table th, tfoot th
{
    background-color: var(--theme-color-blue);
    border-color: var(--theme-color-blue);
    color: var(--theme-color-blue);
    font-weight: 700;
    padding: 0.5em;
    font-family: hind;
    position: relative;
    border: 0.1em solid var(--theme-color-blue);
}

table tfoot tr
{
    cursor: default;
}

table td
{
    text-overflow: ellipsis;
    overflow:hidden;
    word-break: break-all;
}


.table-header:first-child:before, .tab.label:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 0.5em solid white;
    border-right: 0.5em solid transparent;
    width: 0;
}


table tfoot th:last-child:before, .tab-pane-footer:before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    border-bottom: 0.5em solid white;
    border-left: 0.5em solid transparent;
    width: 0; 
}


table tr
{
    border-color: var(--theme-color-blue);
    color: var(--theme-color-blue);
    font-weight: 400;
    font-family: Montserrat; 
    cursor:pointer;
}

table thead tr, table thead tr th
{
    cursor: default;
}

table tbody tr
{
    color: var(--theme-color-orange);
}



table tr:last-child > td:last-of-type, table td
{
  
    padding: 0.5em;
    border: 0.1em solid var(--theme-color-blue);
    position: relative;
}

table tbody tr td:first-of-type
{

    border-left: 0.2em solid var(--theme-color-blue);
}

table tbody tr td:last-of-type
{

    border-right: 0.2em solid var(--theme-color-blue);
}


table tr:nth-child(odd) td
{
    background-color: rgba(0,0,0,.6);
}

table tr:nth-child(even) td
{
    background-color: rgba(0,0,0,.8);
}

table tr:nth-child(odd) td:hover
{
    background-color: rgba(0,0,0,.4);
}

table tr:nth-child(even) td:hover
{
    background-color: rgba(0,0,0,.6);
}

table tbody tr:hover
{
    background-color: rgba(0,0,0,1);
}



table .th-inverted
{
    font-size: 18px;
    background-color: var(--theme-color-blue);
    color: var(--theme-color-orange);
    cursor: default;
    padding: 0.3em 0em;
    border-radius: 0;
}

table .footer-keys
{
   cursor: default;
}

table .footer-keys a
{
   cursor: pointer;
}

.sidemenu
{
    position: fixed;
    margin-top: 3vw;
    
}

form #website{ display:none; }

.sidemenu ul
{
    padding: 0;
    cursor: pointer;
}

.sidemenu ul li
{
    font-size: 2.5vw;
    color: var(--theme-color-blue); 
    list-style-type: none;
}

.table-header-title
{
    font-size: 22px;
   
}

/* FOOTER */
.footerHeader
{
    background-color: white; 
    width: 100%;

}

#generalUpperFooterBottomBorder
{
    background-color: white; 
}

/* MENU */
.menu-container
{
    position: sticky !important;
    
    top: 0;
    z-index: 99;
    
}

.menu-logo
{
    width: 100%;
    background-color: var(--theme-color-white) !important;
    padding: 1em 0;
    height: 6vw;
    max-height: 6vw;
}

.menu
{
    height: 2vw;
    font-size: 1.5vw!important;
    background-color: var(--theme-color-white) !important;
}

.menu-trans
{
    height: 6vw;
     max-height: 6vw;
    font-size: 1vw!important;
    background-color: transparent !important;
}

.menu-item, .menu-item-inactive
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    
    text-align: center;
    color: var(--theme-color-orange);
    
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
}

.menu-item:hover, .menu-item:focus
{
    cursor: pointer;
    color: var(--theme-color-blue); 
    /*font-size: 2vw;*/
    /*border-bottom: 0.6vw solid var(--theme-color-orange); */
}

.menu-item:hover a, .menu-item:focus a
{
    cursor: pointer;
    color: var(--theme-color-blue); 
    border-bottom: 0px solid var(--theme-color-orange); 
}

/* CLASSES */
.header-title
{
    position: relative;

    margin: 1em 1em 0 1em;
}



@media (pointer:coarse) and (orientation:portrait)  
{
    .desktop
    {
        display: none;
    }
    
    
    h2
    {
        font-size: 50px;
    }

    .video2, .video
    {
        float: left;
        margin: 3em 0% 3em 0%;
        width: 100%;
    }
    

    h5, H4
    {
        font-size: 25px;
    }
    
     label, input, form, button
    {
        font-size: 36px !important;
    }
    
    button
    {
       padding: 1em !important;   
    }
    
    .coarse, .coarse.active
    {
        display:flex;
    }
    
    .coarse.block
    {
        display:block;
    }
        
    .coarse.inactive
    {
        display:none !important;
    }

    .sidemenu
    {
        position: unset;
    }
    
    .menu
    {
        height: 4em;
        box-shadow: 0 3px 3px 0 rgba(var(--theme-color-blue-rgb), .5);   
        padding: 0.5em;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .menu-item, .menu-item-inactive
    {
        cursor: pointer;
        padding: 0 0.5em;
    }

    .page-block
    {
        min-height: calc(60vh) !important;
        
    }
    
    .overlay-arrow
    {
        position: absolute;
        top: 3vh;
        margin-left: 60vw;
        cursor: pointer;
    }
    
    .col.footer
    {
        width: 100%!Important;
    }
    
    .col.menu-item-inactive
    {
        flex: 0 0 calc((100% / 24) * var(--w));
        max-width: calc((100% / 24) * var(--w));
    }
    
    .row
    {
       
    }

}

@media (pointer:coarse) and (orientation:landscape)  
{
    
.page-block
    {
        min-height:50em !important;
        
    }
}

/* MODALS */
.modal
{    
    background-color: rgba(0,0,0,.3) !important;
    position: absolute;
    width: 100%;
    top: 0;
    min-height: 100%;
}

.modal-container
{
	background-color: var(--theme-color-blue);
	padding-bottom: 30px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
    width: 80%!important;
    margin: 0 10%;
    padding-top: 1em;
    height: 100%;
}

.modal-container label
{
	margin: 2em;
	margin-bottom: 0.5em;
	margin-left: 0.1em;
}

.modal-container input, .modal-container select, .modal-container button
{
	width: 100%;

}


.modal-content
{
    overflow: hidden;
    background-color: var(--theme-color-blue);
    overflow-y: auto;
    /*max-height: calc(100vw - 20%);*/
    padding-top: 2em;
    margin: 2.5em 25% !important;
    position: relative;
    width: 50% !important;
    border: 3px solid rgba(0,0,0,.2) !important;
}

.modal-alert
{
    margin: 2em;
}

.close
{
    cursor: pointer;
    font-size: 2rem !important;
    top: 2%;
    right: 5%;
    position: absolute;
}

#dropdownMenuService
{
    position: absolute;
    top: 4.5vw;
    
}

#dropdownMenuService > a
{
    padding: .3em;
    text-align: left;
}