#logo{
	top: 0;
  padding-top: 10px;
  padding-left: 10px;
  position: absolute;
  z-index: 1;
	display: none;
}

.sublogo{
  top: 0;
  padding-top: 10px;
  padding-left: 10px;
  position: absolute;
  z-index: 1;
}

.menunormal{
  padding-top: 45px;
  padding-left: 10px;
}

.sublogoup{
  padding-top: 10px;
  padding-left: 10px;
  position: absolute;
}

.topicup{
  text-align: center;
  width: 100%;
  position: absolute;
  top: 45px;
  z-index: 1;
}

.topicup > h1{
  color: white;
  font-size: 30px;
  text-transform: uppercase;
}

.topicup > .titleImg{
	width: 30px;
	height: 30px;
	position: relative;
	top: -5px;
	margin: 0 10px;
}

.topicup > label{
	color: white;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: bold;
}

#contentpage3 .topicup{
	margin-top: 0.67em;
	margin-bottom: 0.67em;
}

.menuup{
  position: absolute;
  top: 105px;
  padding-left: 10px;
  z-index: 1;
  display: none !important;
}

.subpagefixpage2{
  margin-top: 15%;
}

.subpagefixpage3{
  margin-top: 15%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

.subpagefixpage4{
  margin-top: 15%;
  margin-left: 10%;
  margin-right: 10%;
  padding-bottom: 10%;
}

.subpagefixpage5{
  margin-top: 15%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

.subpagefixpage6{
  margin-top: 15%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
  height: 100vh;
}

/* IE10 and IE11 */
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#video-bg {
		display: none;
	}

  #bgvid{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg1.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }

  #bgvid2{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg2.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }

  #bgvid3{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg3.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }

  #bgvid4{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg4.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }

  #bgvid5{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg5.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }

  #bgvid6{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translateX(-50%) translateY(-50%);
    background: url('http://test85.szfangwei.net/ourwe/static/image/bg6.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }
}

/* C
ome and Safari (Any) */
@media screen and (-webkit-min-device-pixel-ratio:0){
  #video-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
    display: none;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg2 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg2 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg2 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg2 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg2 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg3 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg3 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg3 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg3 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg3 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg4 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg4 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg4 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg4 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg4 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg5 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg5 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg5 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg5 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg5 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg6 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg6 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg6 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg6 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg6 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }
}

/* Firefox */
@-moz-document url-prefix() {
  #video-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
    display: none;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg2 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg2 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg2 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg2 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg2 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg3 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg3 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg3 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg3 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg3 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg4 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg4 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg4 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg4 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg4 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg5 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg5 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg5 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg5 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg5 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }

  #video-bg6 {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: -2;
  }
  #video-bg6 > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg6 > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg6 > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg6 > video {
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      object-fit: cover;
    }
  }
}










@media (max-width : 767px) {
  /* Chrome and Safari (Any) */
  /*@media screen and (-webkit-min-device-pixel-ratio:0){
    #video-bg {
      background: url('http://test85.szfangwei.net/ourwe/static/image/bg1.jpg');
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;

      height: 100vh;
      width: 100vw;
      display: none;
    }
    #bgvid {
      display: none;
      overflow: hidden;
    }

    #video-bg2 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg2.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid2 {
	    display: none;
	  }

	  #video-bg3 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg3.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid3 {
	    display: none;
	  }

	  #video-bg4 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg4.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid4 {
	    display: none;
	  }

	  #video-bg5 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg5.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid5 {
	    display: none;
	  }

	  #video-bg6 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg6.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid6 {
	    display: none;
	  }
  }*/

  /* Firefox */
  /*@-moz-document url-prefix() {
    #video-bg {
      background: url('http://test85.szfangwei.net/ourwe/static/image/bg1.jpg');
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;

      height: 100vh;
      width: 100vw;
      display: none;
    }
    #bgvid {
      display: none;
      overflow: hidden;
    }

    #video-bg2 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg2.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid2 {
	    display: none;
	  }

	  #video-bg3 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg3.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid3 {
	    display: none;
	  }

	  #video-bg4 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg4.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid4 {
	    display: none;
	  }

	  #video-bg5 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg5.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid5 {
	    display: none;
	  }

	  #video-bg6 {
	    background: url('http://test85.szfangwei.net/ourwe/static/image/bg6.jpg');
	    background-position: center center;
	    background-size: cover;
	    background-repeat: no-repeat;

	    height: 100vh;
	    width: 100vw;
	  }
	  #bgvid6 {
	    display: none;
	  }
  }*/
}

/*#pagecontainer1{
  height: 100%;
  width: 100%;
}*/

.contentpage{
/*  width: 100%;
height: 100%;*/
/*width: 100%;
position:fixed;
overflow: hidden;*/
}

.topic{
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: -1;
}

.topic > h1{
  color: white;
  font-size: 30px;
}

#contentpage1{
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#contentpage2{
  height: 100%;
  width: 100%;
  overflow: auto;
}

#contentpage3{
  height: 100%;
  width: 100%;
  overflow: auto;
}

#contentpage4{
  height: 100%;
  width: 100%;
  overflow: auto;
}

#contentpage5{
  height: 100%;
  width: 100%;
  overflow: auto;
}

#contentpage6{
  height: 100%;
  width: 100%;
  overflow: auto;
}

#contentpage7{
  height: 100%;
  width: 100%;
  overflow: auto;
}

.navButton{
  color: white;
  cursor: pointer;
  text-transform: uppercase;
}

/*.menu{
  text-align:left;
  margin-top:10px;

  font-size: 17px;
  position: relative;
  padding-left: 10px;
}*/

/*.menu-sub-page{
  text-align:left;
  font-size: 17px;
  position: absolute;
  padding-top: 60px;
  padding-left: 10px
}*/

#scrollImageFistDiv{
  width: 100vw;
  -webkit-height: 100vh;
  -moz-height: 100vh;
  text-align: center;
  position: fixed;
  margin-left: -15px;
}

.scrollFirstImage{
  width: 30px;
  height: 44px;
  position: absolute;
  bottom: 100px;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10+ specific styles go here */
   #scrollImageFistDiv{
    width: 100vw;
    text-align: center;
    position: absolute;
    margin-left: -15px;
    bottom: 0px;
  }

  .scrollFirstImage{
    width: 30px;
    height: 44px;
    position: static;
    bottom: 100px;
  }
}

.scrollImageDiv{
  width: 100%;
  text-align: center;
  -webkit-position: fixed;

  -moz-position: fixed;
  -ms-position: static;
  bottom: 10px;
  margin-left: -15px;
	display:none;
}

.scrollImage{
  width: 30px;
  /*height: 44px;*/
  height: 30px;
  -webkit-position: absolute;
  -moz-position: absolute;
  -ms-position: static;
  position: absolute;
  bottom: 10px;
  display: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10+ specific styles go here */
  .scrollImageDiv{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10px;
    margin-left: -15px;
  }

  .scrollImage{
    width: 30px;
    height: 44px;
    position: static;
    bottom: 10px;
    display: none;
  }
}

#page2ImageDivUp{
  position: relative;
  width: 100%;
  height: 100%;
}

#page2ImageDiv{

  /*background-color: yellow;*/

  /*margin-left: 10%;
  margin-right: 10%;*/

  width: 830;
  /* height: 100px; */
  margin-left: -415px;
  /* margin-top: -50px; */
  /*position:absolute;*/
  position: relative;
  /* top: 50%; */
  left: 50%;
}

/* Header Style */
.mainpage2,
.container > header {
  margin: 0 auto;
  padding-left: 10%;
  padding-right: 10%;
}

/* Main Content */
.mainpage2 {
  text-align: center;
}

.mainpage3,
.container > header {
  margin: 0 auto;
  padding-left: 10%;
  padding-right: 10%;
}

/* Main Content */
.mainpage3 {
  text-align: center;
  width: 800px;
}

/* Header Style */
.mainpage4,
.container > header {
  margin: 0 auto;
  padding-left: 10%;
  padding-right: 10%;
}

/* Main Content */
.mainpage4 {
  text-align: center;
  width: 800px;
}

/* Header Style */
.mainpage5,
.container > header {
  margin: 0 auto;
  padding-left: 10%;
  padding-right: 10%;
}

/* Main Content */
.mainpage5 {
  text-align: center;
  width: 1024px;
}

#page2Image{
  width: 830px;
  height: 450px;
}

#gridpage2{
  width: 100%;
  height: 100%;
}

#ourLoveVideoGrid1{
	height: 100%;
}

.ourLoveVideoGridContent1{
	height: 100%;
}

#ourLoveVideoGrid2{
	height: 100%;
}

.ourLoveVideoGridContent2{
	height: 33.3%;
}

#gridpage2 .padded{
	padding: inherit;
}

/*#gridpage2 .grid-12, #gridpage2 .grid-whole {
  width: 100%;
  padding-bottom: 10%;
}*/

#gridpage3{
  width: 100%;
  height: 100%;
  /*width: 75%;
  margin-left: 12%;*/
  /*height: 45%;*/
  /*padding-bottom: 10%;*/
}

#gridpage3 > .padded{
	padding: 2.4%;
}

#gridpage3 .l-grid-third {
  width: 33.3%;
  height: 33.3%;
}

@media (max-width: 736px){
  #gridpage3 .m-grid-half , #gridpage3 .s-grid-half{
  	width: 50%;
  	height: 33.3%;
	}
}

#gridpage4{
  width: 100%;
  height: 100%;
  /*position: fixed;*/
  top: 0;*/

  /*margin: 10%
  position: relative;
  top: 0;*/
}

#gridpage4 .l-grid-half{
    margin: 0;
    clear: none;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 50%;
    width: 50%;
}

@media (max-width: 736px){
	#gridpage4 .m-grid-whole, #gridpage4 .s-grid-whole {
	  width: 100%;
	  height: 25%;
	}
}

#gridpage5{
  width: 100%;
  height: 100%;
  /*position: relative;
  top: 0;*/

  /*margin: 10%
  position: relative;
  top: 0;*/
}





#gridpage5 .l-grid-half {
    width: 50%;
    height: 100%;
}

#ourActivitiesGrid1{
	height: 50%;
	margin-bottom: 8px;
}

#ourActivitiesGrid1 .padded{
	padding: inherit;
}

.ourActivitiesGridContent1{
	height: 250px;
	width: 250px;
	position: relative;
	margin: 0 auto;
}

#ourActivitiesGrid2{
	height: 50%;
	width: 75%;
	margin-left: -8px;
}

.ourActivitiesGridContent2{
	height: 50%;
}






#gridImageDiv1{
  /*background: url('../sources/video.jpg') no-repeat;
  background-size: cover;*/
}

/*  background: url('../sources/video.jpg') no-repeat;
  background-size: cover;
}

#gridImageDiv3{
  background: url('../sources/video.jpg') no-repeat;
  background-size: cover;
}

#gridImageDiv4{
  background: url('../sources/video.jpg') no-repeat;
  background-size: cover;
}

#gridImageDiv5{
  background: url('../sources/video.jpg') no-repeat;
  background-size: cover;
}

#gridImageDiv6{
  background: url('../sources/video.jpg') no-repeat;
  background-size: cover;
}*/

/*.gridcontent{
  width: 100%;
  height: 100%;
}

.gridImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/

.gridLoveVideoContent{
  height: 100%;
  position: relative;
  background: white;
}

.gridOurPeopleTalkLive{
  text-transform: uppercase;
  color: black;
  font-size: 2em;
  margin-left: -1em;
  margin-top: -0.5em;
  position: absolute;
  top: 50%;
  left: 50%;
}

.gridLoveVideoImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridLoveVideoContentMain{
  height: 100%;
}

.gridLoveVideoImageMain{
  width: 100%;
  height: 100%;
}

/*.gridLoveVideoImage:hover {
  content: url('sources/our_love_video/THEODENT_KIDS_TOOTHPASTE.jpg');
}*/

.gridLoveVideoImageMainLabelDiv{
  position: relative;
}

.gridLoveVideoImageMainLabel1{
 text-transform: uppercase;
  font-size: 2em;
  position: absolute;
  top: 10px;
  right: 50px;
}

.gridLoveVideoImageMainLabel2{
  text-transform: uppercase;
  font-size: 2.5em;
  position: absolute;
  top: 10px;
  right: 60px;
}





/*.gridImagecontent{
  width: 100%;
  height: 200px;
}*/

.contentmain{
  margin: 0 auto;
  padding: 0em;
  max-width: 50em;
}

.contactButton{
  color: white;
  cursor: pointer;
  /*font-size: 5em;*/
  text-transform: uppercase;
  font-size:1.4em;
  word-break: break-all;
}

.gridOurLoveVideoImageContent{
	height: 100%;
  position: relative;
}

.gridOurLoveVideoImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ourLoveVideoContentVideo{
	width: 100%;
	height: 100%;
}

.gridOurPeopleTalkImageContent{
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.gridOurPeopleTalkImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
	/*max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;*/
}

.gridOurPeopleTalkPlay{
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
}

.ourPeopleTalkContentVideo{
	width: 100%;
	height: 100%;
}

.gridOurShopVisitImageContent{
  height: 100%;
  position: relative;
}

.gridOurShopVisitImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridOurShopVisitPlay{
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
}

.gridOurActivitiesContent{
  height: 100%;
  position: relative;
}

.gridOurActivitiesImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gridOurActivitiesPlay{
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.popup > div{
	text-align: center;
}

.OurActivitiesContentImg{
	/*width: 100%;
	height: 80%;*/
	width: auto;
	height: auto;
	max-width: 100%;
	height: 80%;
}

.OurActivitiesContentText{
	text-align: left;
}

.otpage2 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage2:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage2 {
  display: inline-block;
  vertical-align: middle;
  /*width: 50%;*/
  width: 53%;
  height: 50%;
  /*background: #ccc;*/
  /*max-width: 719px;*/
  max-width: 1000px;
  max-height: 540px;
}

.otpage3 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage3:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage3 {
  display: inline-block;
  vertical-align: middle;
  /*width: 70%;
  height: 70%;*/
  max-width: 725px;
  max-height: 725px;
  width: 50%
}

.wrapperpage3:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.wrapperpage3 .paginationRight{
	position: absolute;
	right: -50px;
	top: 50%;
	margin-top: -38px;
	padding-top: 50%;
}

.wrapperpage3 .paginationLeft{
	position: absolute;
	left: -50px;
	top: 50%;
	margin-top: -38px;
	padding-top: 50%;
}

.otpage4 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage4:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage4 {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  height: 70%;
  /*background: #ccc;*/
  max-width: 1024px;
  max-height: 768px;
}

.OurShopVisitContentImg{
	width: auto;
	height: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.otpage5 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage5:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage5 {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  /*background: #ccc;*/
  max-width: 700px;
  max-height: 700px;
}

.otpage6 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage6:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage6 {
  display: inline-block;
  vertical-align: middle;
  /*width: 33%;*/
  /*height: 40%;*/
	width:80%;
	height:85%;
  /*background: #ccc;*/
}

.otpage7 {
  width: 100%;
  height: 100%;
  /*border: 1px solid #FF6600;*/
  text-align: center;
  /*margin: 0 auto;*/
  /*background: blue;*/
}

.otpage7:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

.wrapperpage7 {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
  height: 80%;
  /*background: #ccc;*/
}



/*@media screen and (max-width: 45em) {
  .contactButton {
    font-size: 3em;
  }
}

@media screen and (max-width: 25em) {
  .contactButton {
    font-size: 2em;
  }
}
*/
#activityDiv{
  text-align: left;
  vertical-align: middle;
  height: 100%;
  /*width: 100%;
  height: 500px;

  margin-top: -250px;

  position:absolute;
  top:420px;*/
  overflow: hidden;
}

#activityDiv a, #activityDiv label{
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#activityDiv label{
	font-size: 1em;
}

#activityDiv .l-grid-third {
  width: 33.3%;
  height: 100%;
}

@media (max-width: 736px){
  #activityDiv .m-grid-half , #activityDiv .s-grid-half{
  	width: 33.3%;
  	height: 100%;
	}
}

#contactMeDiv{
	text-align: center;
}

#contactMe{
	font-size: 65px;
	line-height: initial;
	font-family: 'Arial Black', Gadget, sans-serif !important;
}

.contact_us_hr{
	width: 45px;
	margin: 10px 0;
}

#copyright{
	text-align: center;
	margin-top: 10px;
}

#copyright a{
	color: white;
}

.myFormSetting{
  text-align: left;
}

.myFormClose{
	cursor:pointer;
	color: white;
  float: right;
}

/*#contentform{
  text-align: center;
  color: white;
  text-transform: uppercase;
  font-size: 45px;
  width: 100%;
  height: 500px;

  margin-top: -250px;

  position:absolute;
  top:410px;
}

#submitbutton{
  font-size: 45px;
  letter-spacing: 1px;
  padding: 20px 26px;
  line-height: 1;
  background-color: white;
  border: 0px solid;
  color: #939598;
}

.forminput{
  background: transparent;
  border:none;
  outline: 0;
  font-size: 45px;
  color: white;
  text-align: center;
}*/

#form-error{
  color: white;
  text-transform: uppercase;
}

.close_button{
	margin-top: -24px;
	margin-left: -24px;
}

.pageloading{
	position: relative;
	z-index: 2;
	left: 50%;
	top: 50%;
	margin-left: -8px;
	margin-top: -25px;
	display: none;
}

.pageload{
	display: initial;
}

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

}*/

@media (min-width: 1681px) and (max-width: 1920px) {

}

@media (max-width: 1680px) {
	.wrapperpage2 {
	  width: 65%;
    height: 65%;
    /*max-width: 665px;*/
    max-width: 1100px;
  	max-height: 540px;
	}

	.wrapperpage6{
		width: 78%;
	}
}

@media (max-width: 1440px) {
	.wrapperpage6{
		height: 90%;
		/*height: 60%;*/
	}
}

@media (max-width: 1366px) {
  .contactButton {
    /*font-size: 4em;*/
  }

  .wrapperpage2 {
	  /*width: 60%;*/
	  width: 65%;
    height: 60%;
    /*max-width: 612px;*/
    max-width: 1000px;
  	max-height: 540px;
	}

	.wrapperpage3{
		max-width: 527px;
		max-height: 527px;
	}

	.wrapperpage4 {
	  max-width: 768px;
	  max-height: 537px;
	}

	.wrapperpage5 {
	  max-width: 500px;
	  max-height: 500px;
	}

	.wrapperpage6{
		/*width: 47%;*/
		/*height: 50%;*/
		height:80%;
		height:95%;
	}
}

@media (max-width: 1280px) {
  .contactButton {
    /*font-size: 4em;*/
	  font-size:0.6em;
  }

  .wrapperpage6{
		/*width: 37%;*/
	  	width:85%;
  }

  #contactMe{
		font-size: 53px;
	}
}

@media (max-width : 1024px) {
  .contactButton {
    /*font-size: 3.3em;*/
  }

	.wrapperpage2{
    height: 50%;
	}

  #page2Image{
    width: 630px;
    height: 340px;

    width: 600px;
    height: 600px;
  }

  .gridLoveVideoImageMainLabel1{
    font-size: 1em;
    top: 10px;
    right: 10px;
  }

  .gridLoveVideoImageMainLabel2{
    font-size: 1.5em;
    top: 10px;
    right: 20px;
  }

  .mainpage3,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage3 {
    text-align: center;
    width: 100%;
    max-width: 649px;
  }

  .mainpage4,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage4 {
    text-align: center;
    width: 100%;
    max-width: 649px;
  }

  .wrapperpage5 {
	  max-width: 460px;
	  max-height: 460px;
	}

  .mainpage5,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage5 {
    text-align: center;
    width: 100%;
    max-width: 649px;
  }

  .wrapperpage6{
		/*width: 57%;*/
		/*height: 56%;*/
	  height:80%;
	  	height:85%;
  }

  #contactMe{
		font-size: 63px;
	}
}

@media (max-width : 990px) {
	#contactMe{
		font-size: 50px;
	}
}

@media (max-width : 800px) {
	.wrapperpage2 {
	  width: 35.5%;
    height: 60%;
	}

	#ourLoveVideoGrid1{
		height: 50%;
	}

	#ourLoveVideoGrid2{
		height: 50%;
	}

	#contactMe{
		font-size: 47px;
	}
}

@media (max-width: 767px){
	 #activityDiv{
		line-height: 10px;
  }

  #activityDiv label{
		font-size: xx-small;
	  	
	}

  .contactButton {
    /*font-size: xx-small;*/
	  font-size:0.3em;
  }

  #page2Image {
    width: 200px;
    height: 200px;
  }

  #contactMe{
		font-size: 43px;
	}
}

@media (max-width : 736px) {
  .navButton{

  }

  .contactButton {
    /*font-size: 3em;*/
  }

  .wrapperpage2 {
	  width: 35.5%;
    height: 60%;
	}

	#ourLoveVideoGrid1{
		height: 50%;
	}

	#ourLoveVideoGrid2{
		height: 50%;
	}

  #page2Image {
    width: 500px;
    height: 500px;
  }

  .gridLoveVideoImageMainLabel1{
    font-size: 1em;
    top: 10px;
    right: 10px;
  }

  .gridLoveVideoImageMainLabel2{
    font-size: 1.5em;
    top: 10px;
    right: 20px;
  }

  .wrapperpage3{
		max-width: 300px;
		max-height: 300px;
	}

  .mainpage3,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage3 {
    text-align: center;
    width: 100%;
  }

	.wrapperpage4{
		width: 50%;
		height: 68%;
	}

	.gridOurPeopleTalkPlay{
	  width: 40px;
		height: 40px;
		margin-left: -20px;
		margin-top: -20px;
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.gridOurShopVisitPlay{
		width: 40px;
		height: 40px;
		margin-left: -20px;
		margin-top: -20px;
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.gridOurActivitiesPlay{
	  width: 40px;
		height: 40px;
		margin-left: -20px;
		margin-top: -20px;
		position: absolute;
		top: 50%;
		left: 50%;
	}

  .mainpage4,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  .wrapperpage5 {
	  max-width: 250px;
	  max-height: 250px;
	}

  /* Main Content */
  .mainpage4 {
    text-align: center;
    width: 100%;
  }

  .mainpage5,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage5 {
    text-align: center;
    width: 100%;
  }

  .wrapperpage6{
		/*width: 70%;*/
		/*height: 70%;*/
	  	width:95%;
	  	height:85%;
  }

  #contactMe{
		font-size: 55px;
	}
}

@media (max-width : 667px) {
  .navButton{

  }

  .contactButton {
    /*font-size: 2.5em;*/
  }

  #page2Image {
    width: 400px;
    height: 400px;
  }

  .gridLoveVideoImageMainLabel1{
    font-size: 1em;
    top: 10px;
    right: 10px;
  }

  .gridLoveVideoImageMainLabel2{
    font-size: 1.5em;
    top: 10px;
    right: 20px;
  }

  .wrapperpage3{
		max-width: 270px;
		max-height: 270px;
	}

  .mainpage3,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage3 {
    text-align: center;
    width: 100%;
  }

  .mainpage4,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage4 {
    text-align: center;
    width: 100%;
  }

  .wrapperpage5 {
	  max-width: 225px;
	  max-height: 225px;
	}

  .mainpage5,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage5 {
    text-align: center;
    width: 100%;
  }

  #contactMe{
		font-size: 48px;
	}
}

@media (max-width : 568px) {
  .navButton{

  }

  .contactButton {
    /*font-size: 1.8em;*/
  }

  #page2Image {
    width: 300px;
    height: 300px;
  }

  .gridLoveVideoImageMainLabel1{
    font-size: 1em;
    top: 10px;
    right: 10px;
  }

  .gridLoveVideoImageMainLabel2{
    font-size: 1.5em;
    top: 10px;
    right: 20px;
  }

  .wrapperpage3{
		max-width: 220px;
		max-height: 220px;
	}

  .mainpage3,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage3 {
    text-align: center;
    width: 100%;
  }

  .mainpage4,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage4 {
    text-align: center;
    width: 100%;
  }

  .mainpage5,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage5 {
    text-align: center;
    width: 100%;
  }

  #contactMe{
		font-size: 42px;
	}
}

@media (max-width : 480px) {
  .navButton{

  }

  .gridLoveVideoImageMainLabel1{
    font-size: 1em;
    top: 10px;
    right: 10px;
  }

  .gridLoveVideoImageMainLabel2{
    font-size: 1.5em;
    top: 10px;
    right: 20px;
  }

  .wrapperpage2 {
		width: 55%;
		height: 60%;
	}

  .wrapperpage3{
		max-width: 527px;
		max-height: 527px;
		width: 65%;
	}

  .mainpage3,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage3 {
    text-align: center;
    width: 100%;
  }

  .mainpage4,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage4 {
    text-align: center;
    width: 100%;
  }

  .mainpage5,
  .container > header {
    margin: 0 auto;
    padding-left: 0%;
    padding-right: 0%;
  }

  /* Main Content */
  .mainpage5 {
    text-align: center;
    width: 100%;
  }

  .wrapperpage6{
		/*height: 45%;*/
	  	height:85%;
  }

  #contactMe{
		font-size: 30px;
	}
}

@media (max-width : 320px) {

}

@media (max-height : 414px) {
	.wrapperpage2 {
	  width: 15%;
    height: 60%;
	}

	.wrapperpage4 {
	  width: 20%;
    height: 60%;
	}
}

/*new added code by Pay;*/
/* ✅ Adjustments for TLC Join Section on Mobile */
@media screen and (max-width: 768px) {
  .w5-left {
    padding-top: 80px; /* Add spacing below the logo */
    font-size: 12px;    /* Reduce overall font size */
  }

  .w5-l2 {
    font-size: 12px !important;  /* Heading levels - smaller */
  }

  .w5-l3 {
    font-size: 18px !important;  /* Heading levels - smaller */
  }

  .w5-l4,
  .w5-l4a,
  .w5-l5,
  .w5-l6,
  .w5-l7,
  .w5-l8 {
    font-size: 10px !important;  /* Body text - consistent smaller sizing */
    line-height: 1.5em;
  }

  .w5-l7 {
    margin-top: 14px;
    font-weight: bold;
  }

  .w5-l8 a {
    font-size: 12px;
  }
}