/* GLOBAL STYLES
-------------------------------------------------- */

/* body */
body {
    color: #c4c4c4;
    background-color: #111111;
}

/* centered img  */
.middle{
    margin-left: auto;
    margin-right: auto;
}

#axel-upside{
    border: none;
}


@media all and (orientation:portrait){

    #home-img {
        border: none;
        margin-top: 50%;
        margin-bottom: 15%;
    }

}


@media all and(orientation:landscape){

    #home-img {
        border: none;
        margin-top: 15%;
        margin-bottom: 15%;
    }


}

/* overlay at start */
#overlay{
    height:100%;
    width: 100%;
    z-index: 100;
    position: absolute;
    background-color: #111111;
}


#overlay-img {
    border: none;
    margin-top: 50%;
    margin-bottom: 15%;
}

#overlay-text{
  text-align: center;
}

#main{

   /* visibility: hidden;*/

}


.featurette-image{
    border-style: solid;
    border-width: 1px;
    border-color: #c4c4c4;
    margin-top: 5px;
    margin-bottom: 20px;
}


footer{
    position:relative;;
    height:40px;
}


/* Img Gallery */

.modal {
    overflow: auto;
    color: #333;
}


/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper .container {
    padding-left: 0;
    padding-right: 0;
}

.navbar-wrapper .navbar {
    padding-left: 15px;
    padding-right: 15px;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Pad the edges of the mobile views a bit */
.marketing {
    padding-left: 15px;
    padding-right: 15px;
}

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    text-align: center;
    margin-bottom: 20px;
}
.marketing h2 {
    font-weight: normal;
}
.marketing .col-lg-4 p {
    margin-left: 10px;
    margin-right: 10px;
}


/* Featurettes
------------------------- */

/* Space out the Bootstrap <hr> more */
.featurette-divider {
    margin: 50px 0;
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}

/*font size*/
.featurette-heading {
    font-size: 26px;
    margin-top: 40px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */


@media (min-width: 768px) {

    /* Remove the edge padding needed for mobile */
    .marketing {
        padding-left: 0;
        padding-right: 0;
    }

    /* Navbar positioning foo */
    .navbar-wrapper {
        margin-top: 20px;
    }

    .navbar-wrapper .container {
        padding-left:  0px;
        padding-right: 0px;
    }

    .navbar-wrapper .navbar {
        padding-left:  15px;
        padding-right: 15px;
    }

    /* The navbar becomes detached from the top, so we round the corners */
    .navbar-wrapper .navbar {
        border-radius: 4px;
    }

    .featurette-heading {
        margin-top: 50px;
        font-size: 50px;
    }

}


/* @media screen */
@media (min-width: 992px) {


    #home-img {
        border: none;
        margin-top: 15%;
        margin-bottom: 15%;
    }

    #overlay-img{
        border: none;
        margin-top: 15%;
        margin-bottom: 15%;
    }

    .featurette-heading {
        margin-top: 50px;
        font-size: 50px;
    }

    .featurette-image{
        margin-bottom: 50px;
    }


}

/* Trailer iframe */

.outer_vid{
    width:100%;
    margin:auto;
}
.inner_vid{
    height:0px;
    width:100%;
    padding-top:56.25%; /* rel: 16/9 = 56.25% */
    position:relative;
}

iframe{
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
}