/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}


/* Banner */

#banner {
    font-size: 13pt;
    font-weight: 300;
    line-height: 1.65;
    padding: 6em 0 6em 0;
    background-image: 
        linear-gradient(
          rgba(0, 0, 0, 0.0),
          rgba(0, 0, 0, 0.2),
          rgba(0, 0, 0, 0.0)
        ),
        url('../Img/AVSS2019_DSC_2436.jpg');
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border-top: 0.5em solid #5385c1;
    
}

    #banner h1 {
        font-size: 3em;
        font-weight: 100;
        text-align: center;
        color: #fff;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height: 1em;
        margin: 0 0 0.5em 5pt;
        padding: 0;
    }
    #banner h0 {
        font-size: 3em;
        font-weight: 100;
        text-align: center;
        color: #fff;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height: 1em;
        margin: 0 0 0.5em 5pt;
        padding: 0;
    }
    #banner h2 {
        font-size: 1.5em;
        font-weight: 100;
        text-align: left;
        color: #fff;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height: 1em;
        margin: 0 0 0.5em 50pt;
        padding: 0;
    }
    #banner h3 {
        font-size: 1.5em;
        font-weight: 100;
        text-align: center;
        color: #fff;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height: 1em;
        margin: 0 100pt 0.5em 100pt;
        padding: 0;
    }

    #banner p {
        font-size: 1em;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 1.75em;
    }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

    #banner {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 1280px) {

    #banner {
        padding: 10em 2em 8em 2em;
    }
}

@media screen and (max-width: 980px) {

    #banner {
        background-attachment: scroll;
    }
}

@media screen and (max-width: 736px) {

    #banner {
        padding: 8em 1.5em 6em 1.5em;
    }
        #banner h1 {
            font-size: 2.5em;
        }
        #banner h2 {
            font-size: 1.5em;
        }
        #banner h3 {
            font-size: 1.5em;
        }

        #banner p {
            font-size: .9em;
        }
}

@media screen and (max-width: 480px) {

    #banner {
        padding: 6em 1.5em 4em 1.5em;
    }
}

/* ===================================================================
 *  03. grid - (_grid.scss)
 *
 * ------------------------------------------------------------------- */

.row {
    width: 94%;
    max-width: 1170px;
    margin: 0 auto;
}

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .row .row {
        width: auto;
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
    }

[class*="col-"],
.bgrid {
    float: left;
}

    [class*="col-"] + [class*="col-"].end {
        float: right;
    }

[class*="col-"] {
    padding: 0 20px;
}

.col-one {
    width: 8.33333%;
}

.col-two,
.col-1-6 {
    width: 16.66667%;
}

.col-three,
.col-1-4 {
    width: 25%;
}

.col-four,
.col-1-3 {
    width: 33.33333%;
}

.col-five {
    width: 41.66667%;
}

.col-six,
.col-1-2 {
    width: 50%;
}

.col-seven {
    width: 58.33333%;
}

.col-eight,
.col-2-3 {
    width: 66.66667%;
}

.col-nine,
.col-3-4 {
    width: 75%;
}

.col-ten,
.col-5-6 {
    width: 83.33333%;
}

.col-eleven {
    width: 91.66667%;
}

.col-twelve,
.col-full {
    width: 100%;
}


/* ------------------------------------------------------------------- 
 * small mobile devices - (_grid.scss)
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 400px) {
    .row .row {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    [class*="col-"] {
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

        [class*="col-"] + [class*="col-"].end {
            float: none;
        }
}
@media only screen and (max-width: 1024px) {
    [class*="col-"] {
        max-width: 800px;
        text-align: center;
    }
}
    

@media screen and (max-width : 1920px){
 .desk{
  visibility:visible;
  display:block
  }
  .div-only-mobile{
  visibility:hidden;
  display:none
  }
}
@media screen and (max-width : 906px){
 .desk{
  visibility:hidden;
  display:none
  }
 .div-only-mobile{
  visibility:visible;
  display:block
  }
}