﻿/*
    Hosted genApp CSS
    Version 1.0.0.5
    www.MyGenApp.com
    Copyright 2018 SilverStreak Digital Media - All Rights Reserved.
*/

/*#region PAGE FORMATTING */

/*#region BASIC HTML */

/*#region GENERAL SETUP */
* {
    box-sizing: border-box;
}

html {
    min-height: 100%; /* make sure it is at least as tall as the viewport */
    position: relative;
    min-width: 100%;
}

body {
    margin: 0px;
    /* SET FONT */
    font-family: sans-serif;
    /* FONT STANDARDIZATION FOR MS AND APPLE */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* STANDARDIZE LINE HIEGHT ACROSS BROWSERS */
    line-height: 1.40;
    height: 100%;
}

pre {
    margin: 0px;
}
/*#endregion*/

/*#region TEXT ALIGNMENT */

.gaRight {
    text-align: right;
}

.gaLeft {
    text-align: left;
}

.gaJustify {
    text-align: justify;
}

.gaCenter {
    text-align: center;
}

/*#endregion*/

/*#region STYLE FIXES */
/* REMOVE THE BORDER ON ACCTIVE AND HOVERED LINKS */
a {
    text-decoration: none;
}

    /* REMOVE THE OUTLINE THAT APPEARS ON LINKS IN SOME BROWSERS */
    a:active, a:hover {
        outline-width: 0;
    }

/* SAFARI DOUBLE BOLD FIX */
b, strong {
    /*font-weight: inherit;*/
}

/* REMOVE THE MARGIN FROM HEADERS & LISTS FOR DESIGN CONTROL */
h1, h2, h3, h4, h5, h6, ul, ol {
    margin: 0px 0px 0px 0px;
}
/*#endregion*/

/*#region MEDIA QUERY - IE Fixes */
@media screen and (-ms-high-contrast: none) {

    /*#region IE10+ SPECIFIC STYLES */
    img {
        border: 0px;
    }
    /*#endregion */

    /*#region IE11+ SPECIFIC STYLES */
    *::-ms-backdrop {
        position: relative;
    }

    *::-ms-backdrop {
        position: relative;
    }

    img {
        border: 0px;
    }
    /*#endregion */

}

/* Retina Media Query */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
/*#endregion */


/*#endregion*/

/*#region genApp ROWS & COLUMNS */
/*#region ROWS */
.gaRow {
    width: 100%;
}
    /* Clear floats after the columns */
    .gaRow:after {
        content: "";
        display: table;
        clear: both;
    }
/*#endregion */

/*#region COLUMNS */
[class*="col-"] {
    float: left;
    max-width: 100%;
    max-height: 100%;
    padding: 1px;
}

/*#region NEWER COMPUTERS AND LARGE WIDESCREENS */

.col-lg-0 {
    width: 0%;
}

.col-lg-1 {
    width: 8.33%;
}

.col-lg-2 {
    width: 16.66%;
}

.col-lg-3 {
    width: 25%;
}

.col-lg-4 {
    width: 33.33%;
}

.col-lg-5 {
    width: 41.66%;
}

.col-lg-6 {
    width: 50%;
}

.col-lg-7 {
    width: 58.33%;
}

.col-lg-8 {
    width: 66.66%;
}

.col-lg-9 {
    width: 75%;
}

.col-lg-10 {
    width: 83.33%;
}

.col-lg-11 {
    width: 91.66%;
}

.col-lg-12 {
    width: 100%;
}

/*#endregion */

/*#region OLDER COMPUTERS AND TABLETS IN LANDSCAPE */

.col-md-0 {
    width: 0%;
}

.col-md-1 {
    width: 8.33%;
}

.col-md-2 {
    width: 16.66%;
}

.col-md-3 {
    width: 25%;
}

.col-md-4 {
    width: 33.33%;
}

.col-md-5 {
    width: 41.66%;
}

.col-md-6 {
    width: 50%;
}

.col-md-7 {
    width: 58.33%;
}

.col-md-8 {
    width: 66.66%;
}

.col-md-9 {
    width: 75%;
}

.col-md-10 {
    width: 83.33%;
}

.col-md-11 {
    width: 91.66%;
}

.col-md-12 {
    width: 100%;
}


/*#endregion */

/*#region PHONES LANDSCAPE AND TABLETS PORTRAIT */

.col-sl-0 {
    width: 0%;
}

.col-sl-1 {
    width: 8.33%;
}

.col-sl-2 {
    width: 16.66%;
}

.col-sl-3 {
    width: 25%;
}

.col-sl-4 {
    width: 33.33%;
}

.col-sl-5 {
    width: 41.66%;
}

.col-sl-6 {
    width: 50%;
}

.col-sl-7 {
    width: 58.33%;
}

.col-sl-8 {
    width: 66.66%;
}

.col-sl-9 {
    width: 75%;
}

.col-sl-10 {
    width: 83.33%;
}

.col-sl-11 {
    width: 91.66%;
}

.col-sl-12 {
    width: 100%;
}

/*#endregion */

/*#region PHONES PORTRAIT */

.col-sp-0 {
    width: 0%;
    overflow:hidden;
}

.col-sp-1 {
    width: 8.33%;
}

.col-sp-2 {
    width: 16.66%;
}

.col-sp-3 {
    width: 25%;
}

.col-sp-4 {
    width: 33.33%;
}

.col-sp-5 {
    width: 41.66%;
}

.col-sp-6 {
    width: 50%;
}

.col-sp-7 {
    width: 58.33%;
}

.col-sp-8 {
    width: 66.66%;
}

.col-sp-9 {
    width: 75%;
}

.col-sp-10 {
    width: 83.33%;
}

.col-sp-11 {
    width: 91.66%;
}

.col-sp-12 {
    width: 100%;
}

/*#endregion */


/*#endregion */

/*#endregion */

/*#region genApp PAGE STYLES */

/*#region BASIC PAGE STYLES */
/* THE CONTAINER THAT HOLDS ALL THE CONTENT ON THE PAGE - USE THIS TO BUILD PADDING IN YOUR CONTENT */
.gaPageContainer {
    /*background-color: none;*/
    height: 100%;
    padding: 0;
    margin: 0;
}

/* HOLDS THE HEADER */
.gaHeaderContainer {
    top: 0px;
    width: 100%;
    height: auto;
    z-index:10;
}

/* CREATES A RESPONSIVE HEADER ACROSS THE TOP OF THE PAGE THAT WILL GROW IN HEIGHT BASED ON CONTENT */
.gaHeader {
    float: left;
    height: 100%;
    width: 100%;
}

/* A LARGE HEADER GRAPHIC - DEFAULT STYLE IS THE SAME AS gaImg */
.gaHeaderImg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: auto;
}

/* AJUSTS TO THE HEIGHT OF THE HEADER WHEN THE HEADER IS STICKY*/
.gaHeaderOffset {
}

/* HOLDS ALL THE CONTENET OTHER THAN THE HEADER AND FOOTER */
.gaPageBody {
    padding: 0px;
}

/* THE CONTAINER THAT HOLDS THE FOOTER */
.gaFooterContainer {
    bottom: 0px;
    /*background-color: white;*/
    width: 100%;
}

/* CREATES A RESPONSIVE FOOTER ACROSS THE BOTTOM OF THE PAGE THAT WILL GROW IN HEIGHT BASED ON CONTENT */
.gaFooter {
    display: flex;
    max-width: 100%;
    width: 100%;
    font-size:12px;
    padding: 0px 5px;
}

/* A LARGE HEADER GRAPHIC - DEFAULT STYLE IS THE SAME AS gaImg */
.gaFooterImg {
    max-width: 100%;
    max-height: 100%;
}

/* AJUSTS TO THE HEIGHT OF THE FOOTER WHEN THE FOOTER IS STICKY*/
.gaFooterOffset {
}

/* SETS THE ELEMENT TO AN FIXED POSITIONING */
.gaSticky {
    position: fixed;
}

/* TOP LEVEL THEME FOR THE SITE */
.gaTheme {
    background: linear-gradient(rgba(255, 255, 255,0.4), rgba(0, 0, 0,0.4));
}

/* BACKGROUND THEME FOR THE SITE */
.gaBGTheme {
    background: linear-gradient(rgba(255, 255, 255,0.4),rgba(0, 0, 0,0.4));
}

/* A DIV USED TO CENTER ANOTHER DIV UP AND DOWN */
.gaCenterDiv {
    display: flex;

}

/* THE DIV THAT IS CENTERED BY gaCenterDiv */
.gaCenteredDiv {
    position: relative;
    margin: auto;
}

/* RESPONSIVE - WILL NOT EXCEED IT'S ORIGINA SIZE */
.gaImg {
    max-width: 100%;
    max-height: 100%;
}

/* RESPONSIVE - KEEPS THE IMAGE AS LARGE AS IT CAN BE, BASED ON SCREEN SIZE, WHILE KEEPING IT IN IT'S CONTAINER */
.gaResponsiveImg {
    width: 100%;
    height: auto;
}


.thinScroll {
    overflow: scroll;
    overflow-x: hidden;
}

    .thinScroll::-webkit-scrollbar {
        width: 5px;
    }

::-webkit-scrollbar-thumb {
    background-color: #333;
}

::-webkit-scrollbar-track-piece {
    background-color: #626262;
}

::-webkit-scrollbar-corner {
    background-color: white;
}

/*#endregion */

/*#region TEMPLATE BASED STYLES */

/* JSON BLOCK READ BY THE EDITOR*/
.gaJSON {
    display: none;
}

/* TEMPLATE TAG - ADDED TO THE BOTTOM OF FREE TEMPLATES */
.gaTemplateTagContainer {
    position: fixed;
    width: 100%;
    height: 15px;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    bottom: 0px;
    z-index: 900;
}

/* TEMPLATE TAG */
.gaTemplateTag {
    text-align: center;
    font-size: 10px;
    background: white;
    padding: 3px 10px 3px 10px;
    border-radius: 4px 4px 0px 0px;
    margin: auto;
    width: 300px;
}

/*#region FOR TIMES WHEN YOU JUST DON'T WANT PADDING AT ALL */
.gaNoPad {
    padding: 0px;
}

/*#endregion*/

/*#endregion*/

/*#region FORM ITEMS */

input, select, textarea {
    width: 100%;
    resize: vertical;
    padding: 6px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

    input[type=radio] {
        width: 25px;
    }

.gaButtonDiv {
    text-align: center;
    cursor: pointer;
    padding: 6px 6px;
    color: #000;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.3));
    margin: 0px 0px 0px 0px;
    border: 1px solid #808080;
    background-color: none;
}

    .gaButtonDiv:hover {
        color: #ffffff;
        background: linear-gradient(rgba(255,255,255,0.3), rgba(0,0,0,0.5));
    }

.gaFieldContainer {
    padding: 0 0 8px 0;
}

.gaFieldLable {
    text-align: left;
    padding: 5px;
    border-radius: 4px 4px 0px 0px;
    box-shadow: 3px 3px 3px rgba(128, 128, 128,0.6);
    border-top: 1px solid rgba(128, 128, 128,0.6);
    border-left: 1px solid rgba(128, 128, 128,0.6);
    border-right: 1px solid rgba(128, 128, 128,0.6);
    border-bottom: 0px solid rgba(128, 128, 128,0.6);
}

.gaFormField {
    background: white;
    box-shadow: 3px 3px 3px rgba(128, 128, 128,0.6);
    border-radius: 0px 0px 4px 4px;
}

/*#endregion */

/*#endregion*/

/*#endregion */

/*#region COMPONENT STYLS */

/*#region genApp Flip Box */

.gaFlipBox {
    background-color: transparent;
    width: 343px;
    height: 247px;
    perspective: 1000px;
}

.gaFlipBoxContainer {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.7s;
    transform-style: preserve-3d;
}

.gaFlipBox:hover .gaFlipBoxContainer {
    transform: rotateX(180deg);
}

.gaFlipBoxFront, .gaFlipBoxBack {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gaFlipBoxFront {
    background-color: #bbb;
    color: black;
}

.gaFlipBoxBack {
    transform: rotateX(180deg);
}
/*#endregion */

/*#region HTML Preview Panel */

/* THE OUTTER MOST CONTAINER FOR THE ENTIRE PREVIEW BLOCK */
.gaPreviewBlockContainer {
    padding: 0px;
}

/* WHAT CENTERS THE PREVIEW IN IT'S SPACE */
.gaHTMLPreviewBlock {
    padding: 1px;
    min-width: 520px;
    max-width: 770px;
    margin: auto;
}

/* THE PREVIEW PORTION ITSELF - INCLUDES THE gaHTMLPreviewTitleBlock AS WELL*/
.gaHTMLPreviewContainer {
    overflow: hidden;
    padding: 0px;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 0 0;
    background-color: black;
}

/* THE TITLE OF THE PREVIEW */
.gaHTMLPreviewTitleBlock {
    height: 35px;
    border: 0px solid #2e2e2e;
    border-radius: 4px 4px 0 0;
    padding: 8px 0px 3px 5px;
    background-color: #4f4f4f;
    color: white;
}

/* THIS CLASS DEFINES A GROUP OF PREVIEW OBJECT WITH A SIMULAR id TO ALLOW THE CORRECT PREVIEW SCREEN SIZE TO CHANGE WHEN NEEDED */
.gaFrameControl {
    max-height: 297px;
    padding: 0px;
}

/* THE WRAPPER THAT HOLDS THE IFRAME - THIS ELEMENT ALSO HIDES THE ASPECTS OF THE IFRAME NOT BEING USED */
.gaFrameWrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    width: 300%;
    height: 450px;
}

/* THE IFRAME THAT HOLDS THE PREVIEW PAGE */
.gaPreviewFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    border: 0;
    text-align: center;
    zoom: 0.33;
    -moz-transform: scale(0.33);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.33);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.33);
    -webkit-transform-origin: 0 0;
}

/* PREVIEW ADJUSTMENT FOR SOME BROWSERS */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .gaPreviewFrame {
        zoom: 1;
    }
}

/* THE CONTAINER FOR THE BUTTONS AND DESCRIPTION INFORMATION */
.gaHTMLPreviewLayoutControls {
    background-color: #d9d9d9;
    border-width: 1px;
    border-color: #2e2e2e;
    border-style: solid;
}

/* THE CONTAINER FOR THE BUTTONS THAT ARE USED TO CHANGE THE PREVIEW SCREEN SIZE */
.gaScreenLayoutButtonContainer {
    padding: 3px 0 0 0;
}

/* BUTTONS THAT ALLOW A USER TO CHANGE THE PREVIEW SCREEN SIZE */
.gaScreenLayoutButton {
    max-width: 32px;
    border: 1px solid black;
    cursor: pointer;
}

/* THE CONTAIMER THAT HOLDS THE DATA ABOUT THE PREVIEW OPTION SELECTED */
.gaPreviewLayoutData {
    font-size: 12px;
    padding: 5px 5px 0 5px;
}

/* THE LABLE FOR THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutLabel {
    text-align: right;
    padding: 0px 0px 0px 0px;
}

/* THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutSelected {
    text-align: left;
    padding: 0 0 0 5px;
}

/* THE SELECTED LAYOUT TYPE */
.gaPreviewLayoutDescription {
    font-size: 10px;
    text-align: left;
    padding: 0 0 0 5px;
}

/* DATA ABOUT THE DESIGNER, THE TEMPLATE, AND USAGE STATS */
.gaTemplateData {
    font-size: 12px;
    padding: 0px 0 0 0;
    background-color: #a1a1a1;
    border: 1px solid #2e2e2e;
}

/* THE CONTAINER FOR THE TEMPLATES AVAILABLE OPTIONS */
.gaTemplateOptions {
    font-size: 12px;
    padding: 0px 0 0 0;
    background-color: #4f4f4f;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 10px 10px;
}

/* AN OPTIONAL BOTTOM SECTION TO THE PREVIEW PANEL */
.gaTemplatePanelBottom {
    height: 15px;
    border: 1px solid #2e2e2e;
    border-radius: 0px 0px 10px 10px;
    padding: 8px 0px 3px 5px;
    background-color: #2e2e2e;
    color: white;
    margin-bottom: 1px;
}

/*#endregion */

/*#region IMAGE WINDOW */
/* USED AS THE STYLE FOR THE BACKGROUND OF AN IMAGE WINDOW */
.gaImgWindowBG {
    float: left;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    padding: 0px;
}

/* USED AS THE STYLE FOR TITLE WINDOW IN THE TOP LEFT OF THE IMAGE WINDOW */
.gaWindowPop {
    position: relative;
    display: flex;
    margin: 0px;
    max-width: 300px;
    padding: 0px;
}

    .gaWindowPop h1, gaWindowPop h2, gaWindowPop h3, gaWindowPop h4 {
        padding: 0px 0px 0px 8px;
    }

    .gaWindowPop > img {
        margin: auto;
        max-width: 100%;
        height: auto;
    }

/* USED CONTAINER THAT HOLD THE DATA WITHIN THE IMAGE WINDOW */
.gaWindowData {
    padding: 3px;
}

    .gaWindowData > p {
        padding: 0px 8px 0px 8px;
        margin: 5px 0px 10px 0px;
        text-align: justify;
    }

/*#endregion */

/*#region YOUTUBE VIDEO PLAYER */

#gaVideoPlayerContainer {
    display: none;
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 250px;
    border-radius: 5px 5px 5px 5px;
    border: 0px solid #054000;
    overflow: visible;
    font-family: arial, sans-serif;
    padding-top: 3px;
    z-index: 27;
    max-width: 90vw;
}
/* THE IFRAME THAT LOADS YOUTUBE VIDEO */
.gaVideoFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


#videoScreenCover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: auto;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    font-family: arial, sans-serif;
    display: none;
    z-index: 25;
}


/*#endregion */

/*#region genApp - gaNav*/
/* gaNav STYLE */

.gaMenuIcon {
    display: none;
    padding: 12.5px 16px;
    color: black;
}

    .gaMenuIcon:hover {
        background: #808080;
        color: white;
    }


.gaNav {
    overflow: hidden;
    background-color: #b7b7b7;
    float: left;
    width: 100%;
}

    .gaNav a {
        float: left;
        display: block;
        color: #000;
        text-align: left;
        padding: 14.5px 16px;
        text-decoration: none;
        font-size: 17px;
    }

.gaCurrentNav{
    background-color: #99daff;
    color: black;
}

.dropDown {
    float: left;
    overflow: hidden;
}

    .dropDown .dropDownBtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: black;
        padding: 16px 16px;
        /*background-color: inherit;*/
        font-family: inherit;
        margin: 0;
        cursor:pointer;
        text-align:left;
    }

.dropDown-content {
    display: none;
    position: absolute;
    background-color: #f8f8f8;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropDown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

.gaNav a:hover, .dropDown:hover .dropDownBtn {
    /* background-color: #1a1a1a;*/
    color: white;
}

.dropDown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropDown:hover .dropDown-content {
    display: block;
}

/*#region genApp - gaNav media query */
@media screen and (max-width:768px) {
    .gaMenuIcon {
        position: absolute;
        right: 0;
        top: 0;
    }

    a.gaMenuIcon {
        float: right;
        display: block;
    }

    .gaNav a, .dropDown .dropDownBtn {
        display: none;
    }

    .gaNav.gaMenu {
        position: relative;
    }

        .gaNav.gaMenu a {
            float: none;
            display: block;
            text-align: left;
        }

        .gaNav.gaMenu .dropDown {
            float: none;
        }

            .gaNav.gaMenu .dropDown .dropDownBtn {
                display: block;
                width: 100%;
                text-align: left;
            }

        .gaNav.gaMenu .dropDown-content {
            position: relative;
        }

    /*#endregion */

}

/*#endregion*/

/*#region gaCarouselViewer */
/* The genApp Carousel Viewer is built on the
   Owl Carousel API and builds an image viewer
   around that.

   Owl Carousel v2.3.4
   Copyright 2013-2018 David Deutsch
   Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-bottom: 15px;
    -moz-box-shadow: 5px 5px 15px #000;
    -webkit-box-shadow: 5px 5px 15px #000;
    box-shadow: 5px 5px 15px #000;
    /* For IE 8 */
    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666');
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#666666');
}

.carouselItemTitle {
    font-weight: bold;
    font-size: 14px;
}
/*#endregion*/

/*#region gaExpandingTitle */

.gaExpandingTitle {
    display: inline-block;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

.gaExpandingTitle:hover {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    background: rgba(255,255,255,0.9);
    color: rgb(99,99,99);
    border: solid 1px;
}
/*#endregion */

/*#region gaImgViewer  */

.gaImgViewerBackground {
    display: flex;
    z-index: 5;
    align-items: center;
    text-align: center;
    min-width: 90vw;
    height: 90vh;
    max-width: 90vw;
    max-height: 90vh;
}

.viewedImg {
    min-width: 10vw;
    max-width: 80vw;
    min-height: 10vh;
    max-height: 85vh;
}

.gaViewerTitle {
    font-weight: bold;
    font-size: 16px;
    cursor:pointer;
}

.imgViewerTitle {
    display: inline-block;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

.imgViewerTitleClicked {
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0px;
}

/*#endregion */

/* genApp ICON SIDEBAR */
/* BASIC BROWSER PREVIEW */
.gaBrowserPreview {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.50);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    border: 1px solid black;
}

/* USED TO HAVE AN IMAGE FLY ACROSS THE SCREEN */
.gaFlyBy {
    display: none;
    position: fixed;
}

/*#endregion */

/*#region MEDIA QUERYS */
/* SCREEN SIZES LESS THAN 480PX  - SMALL (LARGER PHONES, SMALLER PADS, AND OLDER SMALL NOTEBOOKS) */
@media screen and (min-width:480px) {
    /*#region COLUMNS */

    .col-sl-0 {
        width: 0%;
    }

    .col-sl-1 {
        width: 8.33%;
    }

    .col-sl-2 {
        width: 16.66%;
    }

    .col-sl-3 {
        width: 25%;
    }

    .col-sl-4 {
        width: 33.33%;
    }

    .col-sl-5 {
        width: 41.66%;
    }

    .col-sl-6 {
        width: 50%;
    }

    .col-sl-7 {
        width: 58.33%;
    }

    .col-sl-8 {
        width: 66.66%;
    }

    .col-sl-9 {
        width: 75%;
    }

    .col-sl-10 {
        width: 83.33%;
    }

    .col-sl-11 {
        width: 91.66%;
    }

    .col-sl-12 {
        width: 100%;
    }
    /*#endregion */
}

/* SCREEN SIZES LESS THAN 768PX - MEDIUM (LARGER PADS, LAPTOPS AND OLD COMPUTERS) */
@media screen and (min-width:768px) {

    /*#region COLUMNS - OLDER COMPUTERS AND TABLETS IN LANDSCAPE */

    .col-md-0 {
        width: 0%;
    }

    .col-md-1 {
        width: 8.33%;
    }

    .col-md-2 {
        width: 16.66%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33%;
    }

    .col-md-5 {
        width: 41.66%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33%;
    }

    .col-md-8 {
        width: 66.66%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33%;
    }

    .col-md-11 {
        width: 91.66%;
    }

    .col-md-12 {
        width: 100%;
    }
    /*#endregion */


    .dropDown .dropDownBtn{
        min-width:130px;
        text-align:center;
    }

    .gaNav a {
        min-width: 130px;
        text-align: center;
    }

}

/* SCREEN SIZES LESS THAN 1224PX - LARGE (NEW COMPUTER/LAPTOPS, AND LARGE SCREENS) */
@media screen and (min-width:1224px) {

    .col-lg-0 {
        width: 0%;
    }

    /*#region COLUMNS*/
    .col-lg-1 {
        width: 8.33%;
    }

    .col-lg-2 {
        width: 16.66%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33%;
    }

    .col-lg-5 {
        width: 41.66%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.33%;
    }

    .col-lg-8 {
        width: 66.66%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-10 {
        width: 83.33%;
    }

    .col-lg-11 {
        width: 91.66%;
    }

    .col-lg-12 {
        width: 100%;
    }
    /*#endregion */

}

/*#endregion */
