html {
font-size: calc(15px + 0.390625vw);}


.bg {
  /* Location of the image */

  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  /*background-position: center top;*/

  /* Image doesn't repeat */
  background-repeat: no-repeat;

  /* Makes the image fixed in the viewport so that it doesn't move when
     the content height is greater than the image height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;

  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;

  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
}
.bgSizeCover {
  background-image: url(/images/main.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}
.navbar {
  background-color: chocolate;
  position: fixed;
  top: 0px;
  left:0px;
  width:100%;
}
.navbar .inner a {
  color: black;
text-decoration: none;
font-size: larger;
}
.navbar .inner a:hover{
  color: white;
text-decoration: none;
font-size: larger;
font-weight: bold;
}


.navbar .inner li {
  display:inline-block;
  /*width:12%;*/
  padding-right:15px;
}
.navbar  .inner a.active{
  color: white;
}

.navbar_bacnotan {
  background-color: chocolate;
  position: relative;
  top: 0px;
  left:0px;
  width:100%;
  height:80px
}

.navbar_bacnotan .inner a {
  color: black;
text-decoration: none;
font-size: larger;
}
.navbar_bacnotan .inner a:hover{
  color: white;
text-decoration: none;
font-size: larger;
font-weight: bold;
}
.navbar_bacnotan .inner li {
  display:inline-block;
  /*width:12%;*/
  padding-right:15px;
}
.navbar_bacnotan .inner a.active{
  color: white;
}

.content_nav {
  background-color: #4ed78a;
  width:100%;
}
.content_nav a {
  color: black;
text-decoration: none;
font-size: larger;
}
.content_nav a:hover{
  color: white;
text-decoration: none;
font-size: larger;
font-weight: bold;
}
.content_nav li {
  display:inline-block;
  /*width:12%;*/
  padding-right:15px;
}

.content_nav a.active{
  color: white;
}


.fullscreen {
	min-width: 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color:#130909;
}
.fullscreen_white {
	min-width: 100%;
  /*height: 100%;*/
  width: 100%;
/*  position: fixed;*/
  top: 0;
  left: 0;
  background-color:white;
  margin:0;
}
.main_bg {
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  top:2%;
}


article .content {
    position: fixed;
    top: 10%;
    color: white;
    width: 100%;
}
article .content .inner {
    margin-left: auto;
    margin-right: auto;
    width: 80%;

}
article .content_whitebg {
    position: relative;
    /*top: 40px;*/
    color: black;
    width: 100%;
    /*z-index:-1;*/
}
article .content_whitebg .inner {
    margin-left: auto;
    margin-right: auto;
    width: 80%;

}
article .content_whitebg .inner .col_1f{
/*    width: 50%;*/
    float:left;
    width:100%;

}
article .content_whitebg .inner .col_1{
/*    width: 50%;*/
    float:left;


}
article .content_whitebg .inner .col_2{
/*    width: 50%;*/
    float:left;

}
/* Clear floats after the columns */
article .content_whitebg .inner section::after {
  content: "";
  display: table;
  clear: both;
  /*float:left;*/

}
.prop_img {
  width:100%;
}
.youtube_video {
  width:780px;
  height:428px;
}
/* For mobile devices */


@media screen and (max-width: 992px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 768px) {
}
@media (max-width:800px) {
}
@media (min-width: 992px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 1170px) {
}
/* ipad landscape */
@media only screen and (min-device-height: 768px) and (max-device-width: 1024px) and (orientation : landscape) {

    .main_bg {
      top:15%;

    }
    .youtube_video {
      width:780px;
      height:428px;
    }
    .navbar .inner a {
    font-size: larger;
    }
    .navbar .inner a:hover{
    font-size: larger;
    }
    .navbar_bacnotan .inner a {
    font-size: larger;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: larger;
    }

}

@media only screen and (max-device-height: 810px)  and (orientation : landscape) {

    .main_bg {
      width:80%;
      left:10%;
      top:9%
    }
    .youtube_video {
      width:590px;
      height:400px;
    }
}
@media only screen and (max-device-height: 412px)  and (orientation : landscape) {

    .main_bg {
      width:76%;
      left:10%;
      top:10%;
    }
    .youtube_video {
      width:590px;
      height:400px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }

    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }
}
@media only screen and (max-device-height: 384px)  and (orientation : landscape) {

    .main_bg {
      width:74%;
      left:10%;
      top:10%
    }
    .youtube_video {
      width:590px;
      height:400px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

}
@media only screen and (max-device-height: 375px)  and (orientation : landscape) {

    .main_bg {
      width:74%;
      left:10%;
      top:10%
    }
    .youtube_video {
      width:400px;
      height:300px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

}
@media only screen and (max-device-height: 360px)  and (orientation : landscape) {

    .main_bg {
      width:77%;
      left:10%
    }
    .youtube_video {
      width:590px;
      height:400px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

}

@media only screen and (max-device-height: 360px) and (max-device-width: 520px) and (orientation : landscape) {

    .main_bg {
      width:100%;
      left:0%
    }
    .youtube_video {
      width:780px;
      height:428px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

}


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

    .main_bg {
      top:25%;

    }
    .youtube_video {
      width:600px;
      height:300px;
    }
/*    article .content_whitebg {
        top: 60px;*/

}
@media only screen and (max-device-width: 570px) and (orientation : portrait) {

  .youtube_video {
    width:280px;
    height:200px;
  }
  /*  article .content_whitebg {
        top: 60px;*/
        .navbar .inner a {
        font-size: small;
        }
        .navbar .inner a:hover{
        font-size: small;
        }
        .navbar_bacnotan .inner a {
        font-size: small;
        }
        .navbar_bacnotan .inner a:hover{
        font-size: small;
        }

}
@media only screen and (max-device-height: 500px) and (orientation : portrait) {

  .youtube_video {
    width:280px;
    height:200px;
  }
  /*  article .content_whitebg {
        top: 60px;*/
        .navbar .inner a {
        font-size: small;
        }
        .navbar .inner a:hover{
        font-size: small;
        }
        .navbar_bacnotan .inner a {
        font-size: small;
        }
        .navbar_bacnotan .inner a:hover{
        font-size: small;
        }

}
@media only screen and  (max-device-width: 428px) and (orientation : portrait) {

    .main_bg {
      top:25%;

    }
    .youtube_video {
      width:280px;
      height:200px;
    }
/*    article .content_whitebg {
        top: 60px;*/

        .navbar .inner a {
        font-size: small;
        }
        .navbar .inner a:hover{
        font-size: small;
        }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

}
@media only screen and  (max-device-width: 375px) and (orientation : portrait) {

    .main_bg {
      top:25%;

    }
    .youtube_video {
      width:280px;
      height:200px;
    }
    .navbar .inner a {
    font-size: small;
    }
    .navbar .inner a:hover{
    font-size: small;
    }
    .navbar_bacnotan .inner a {
    font-size: small;
    }
    .navbar_bacnotan .inner a:hover{
    font-size: small;
    }

/*    article .content_whitebg {
        top: 60px;*/
    }