/* ============================================================================================== */
/* ------------------------------ Info Media queries ---------------------------------------------*/
/* ============================================================================================== */

/** Large devices (large desktops, 1200px and up)                                                 */
/**  @media (min-width: @screen-lg-min) { ... }                                                   */

/** Medium devices (desktops, 992px and up)                                                       */
/**  @media (min-width: @screen-md-min) { ... }                                                   */

/** Small devices (tablets, 768px and up)                                                         */
/**  @media (min-width: @screen-sm-min) { ... }                                                   */

/** Extra small devices (phones, less than 768px)                                                 */
/** No media query since this is the default                                                      */

/* ============================================================================================== */
@-webkit-viewport{
    width: device-width;
}
@-moz-viewport{
    width: device-width;
}
@-ms-viewport{
    width: device-width;
}
@-o-viewport{
    width: device-width;
}
@viewport{
    width: device-width;
}


/**
 * Typography variables
 */

@font-face {
  font-family: 'Roboto-Regular';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Robot-Regular'), url(assets/fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: 'Roboto-Thin';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(assets/fonts/Roboto-Thin.ttf);
}

@font-face {
  font-family: 'Montserrat-Bold';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(assets/fonts/Montserrat-Bold.ttf);
}

/**
 * Typography variables
 */
html, body{
  font-family: 'Roboto-Regular', sans-serif;
  font-size: 17px;
  color: #FFF;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
  font-family: 'Montserrat-Bold';
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer .h1, footer .h2, footer .h3, footer .h4, footer .h5, footer .h6{
  font-family: 'Roboto-regular';
}

.page-header h1, .page-header h2, .page-header h3, .page-header h4, .page-header h5, .page-header h6, .page-header .h1, .page-header .h2, .page-header .h3, .page-header .h4, .page-header .h5, .page-header .h6{
/*  font-family: 'Montserrat-Bold';
*/  text-transform: uppercase;
}

/* --- All Pages ---- */

body > div.container-fluid{
  padding:0;
}
/*.page-container >.ui.grid{
  margin:0;
}*/
.page-container{
    color: #464646;
}

.page-container .cover-image{
    position: relative;
    text-align: center;
    height: 400px;
    overflow: hidden;
    z-index: auto!important; /* Must be important because backstretch.js reset this value */
    background: rgba(0,0,0,0.3)!important; /* Must be important because backstretch.js reset this value */
}

.page-container .cover-image .title {
    position: absolute;
    top: 50%;
    text-align: center;
    margin-top: -36px;
    letter-spacing: 5px;
    color: #FFF;
    width: 100%;
}

.page-container .cover-image .title h1{
    margin-bottom: 10px;
}

.page-container .cover-image .title h4{
    margin-top: 5px;
}

/**
 * Basic
 */
/*  @brand-primary : #0088B7;
  @box-blue-primary : #003366;
  @box-darkblue-primary : @brand-primary;
  @box-green-primary : #2D441C;
  @page-primary : #f8f8f8;
  @page-color:#535e64;*/