@charset "utf-8";
/* CSS Document */
body {
  margin: 0px;
  background-color:#e1ebe8;
  display: block;
}
#header {
	width: 100%;
	margin: 0 0 -8px;
	position: fixed;
	z-index: 200;

}

#wrapper{
	display: block;
}

h1{
	font-size: 1.375em;
	line-height: 1;
	margin-bottom: 16px;
	vertical-align: top;
}

.header-container {
	width: 100%;
	margin: 0px;
	padding: 3px;
	background: #333;
	display: block;
	position: fixed;
	z-index: 1000;
	top: 0px;
}


.cf::before, .cf::after{
	content:" ";
	display: table;
}
.cf::after{
	clear:both;
}

#navbar-collapse-1 iframe{
  float: left;
  margin-top: 16.5px;
}

#logo {
	float: left;
	margin: 0px 10px 12px 10px;
	padding: 5px;
	display: block;
	vertical-align: top;
	position: absolute;
}
a.home {
	margin:0px 12px;
}

.big-title {
	margin-right: -170;
	margin-left: 10;
	margin-bottom: 0;
	font-weight: 700;
	display: inline-block;
	font-size:25px;
	background-color: #333;
	color: white;
	position: relative;
}


/*
.nav{
	margin: 8px 0px 0px 0px;
	float: right;
	display:inline-block;
	vertical-align: top;
	text-align: right;
}

ul.navbar{
	list-style-type: none;
	display:block;
	margin:0px;
	padding:0px;
	overflow:hidden;
	background-color: #333;
	text-align: right;

}

li.navbar{
	display:inline-block;
	color: white;
	font-size: px;
	padding: 10px;
	margin: 0px;
}
*/


#content{
	margin:0;
}

#fullpage{

}

.section{
  border-style: none;
  position: relative;
  height: 100vh;
}

/*.cover-video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(thubnail4.jpg) no-repeat;
  background-size: cover;
}*/



.cover{
  background-image: url("Images/COVER_BACKGROUND.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin:0px 0px 0px 0px;
	position: relative;
	width:100%;
	min-height: 100vh;
	display: inline-block;
	z-index: 10;
	/*background-image: url("Thumbnail4.jpg");*/
	background-repeat:no-repeat;
	background-size:cover;
	background-position: 50% 50%;
}

#intro1{
  background-image: url("Images/Intro1_background_2.jpg");
  background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

#intro2{
  background-image: url("Images/Intro2_background_4.jpg");
  background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

#intro3{
  background-image: url("Images/Intro3_background_2.jpg");
  background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

}


.title{
  position: absolute;
  top: 40%;
  left: 15%;
  font-family:"NSimSun", "STSong", "微軟正黑體";
  color: white;
  text-align:   center;
  border-style: solid;
  padding: 5px 15px;
}



#intro1 .intro-title{
  top:20%;
  left:0%;
  padding-left: 5rem;
  max-width: 700px;
}

#intro2 .intro-title{
  top: 20%;
  left: 0%;
  padding-left: 5rem;
  max-width: 500px;
}

#intro3 .intro-title{
  top:20%;
  left:0;
  padding-left: 5rem;
}


h4.infographics-m{
  font-size: 3vh;
}

p.infographics-m{
  font-size: 2vh;
}

#intro-infographics{
  top:50px;
}

ul.info{
  list-style: none;
  margin-top: 10%;
}

@media screen and (max-width:990px){
  #intro-infographics p{
    visibility: hidden;
    display: none;
  }
  #intro-infographics h1{
    font-size: 2.7vh;
    font-weight: 500;
  }
  #intro-infographics {
    right:0%;
  }

  p.card-text{
    font-size: 2vh;
  }

}

@media screen and (max-width: 375px){
  .info{
    visibility: hidden;
    display: none;
  }
}

@media screen and (min-width:376px){
  .info-m{
    visibility: hidden;
    display: none;
  }
}

.info-m{
  margin-top: 50px;
}

.intro-title{
  color: white;
 position: absolute;
 font-family: "NSimSun", "STSong", "微軟正黑體";
 background-color: #235652;
 padding: 0rem 2.5rem;

}

.intro-title h1{
  font-size: 5vh;
  text-align: left;
  font-weight: 600
}

.intro-title p{
  font-size: 2vh;
}

.infographics{
  padding: 0rem;
	position: relative;
	width:100%;
  height: 100vh;
}



h1.cover-title{
	font-size: 4rem;
	z-index: 0;
  font-weight: 700;
}

h2.cover-title{
  font-size: 2.2rem;
}

.daily-log{
  margin: 8px 0px 0px 0px;
	position: relative;
	width: 100%;
	height: 100vh;
}



.info-container{
	display: flex;
	align-items: center
}

@media screen and (max-width: 990px){
  #intro-tech{
    right:0%;
    }
  #intro-tech h1{
    font-size: 2.7vh;
    font-weight: 500;
  }
}

.crime1, .crime2, .crime3{
	display:block;
	width: 30%;
	height:40vh;
	text-align: center;
	margin: 0px 5px;
	border-style:solid;
	border-radius: 12%
}

#timeline-embed{
}


#tech .intro-title{
    top:50px;
    margin-bottom: 10px;
}

#in1 .intro-title{
  top: 50px;
  padding-left: 5rem;
}

#in2 .intro-title{
  top: 50px;
  padding-left: 5rem;
}

#in3 .intro-title{
  top: 50px;
  padding-left: 5rem;
}

@media screen and (max-width:990px){
  #in1 .intro-title h1{
    font-size: 2.7vh;
    font-weight: 500;
  }

  #in2 .intro-title h1{
    font-size: 2.7vh;
    font-weight: 500;
  }

  #in3 .intro-title h1{
    font-size: 2.7vh;
    font-weight: 500;
  }

  #in1 .intro-title{left:0%; width: 15%; padding-left: 5%;}

  #in2 .intro-title{left:0%; width: 15%; padding-left: 5%;}

  #in3 .intro-title{left:0%; width: 15%; padding-left: 5%;}
}


.map{
	width: 100%;
	height: 100vh;
	position: relative;
}



.summary-paragraph{
  text-align: center;
  top: 15%;
  bottom:15%;
  margin: 8rem 20% 10rem;
}

.articles1{
  margin-top: 12px;
	width:100%;
	height: 100vh;
	border-top-style: solid;
	border-bottom-style: solid;
}

.interview{
	display: flex;
	margin: 20px 0px ;
	max-height: 27vh;
	width:100%;
}

.intro-interview{
	width:100%;
	height:27vh;
	padding: 0px 10px;
}

#intro-interview1{
	text-align:left;
	float:left;
}

#intro-interview2{
	text-align: right;
	float:right;
}

#interview3{
	text-align:left;
	float:left;
}

.inteview-video{
	position: relative;
	width:auto;
	height: auto;
	max-height: 30vh;
	margin:5px;
}

p.article-intro{
	/*max-width:600px;*/

}


button{
	background-color: transparent;
	border-style: solid;
	border-color: black;
	color:black;
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: linear;
	transition-delay: initial;
}

.article-button1{
	position: absolute;
	text-align: center;
	left: 20vw;
	height: 50px;
	width: 10%

}

.article-button2{
	position: absolute;
	text-align: center;
	right: 20vw;
	height: 50px;
	width: 10%

}

.article-button3{
	position: absolute;
	text-align: center;
	left: 20vw;
	height: 50px;
	width: 10%

}






#info1{
    background-image: url(info_1.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#info2{
    background-image: url(info_2.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#info3{
    background-image: url(info_3.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#info3{
    background-image: url(info_3.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#info4{
    background-image: url(info_3.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}


/*
.carousel-inner > .item > img,.carousel-inner > .item > a > img{
    margin:auto;
    width: 50%;
}
*/

.card-img-top{
    width:15vw;
}

.card{
    margin-right: auto;
    margin-left: auto;
    margin: auto;
}



.modal .modal-dialog .modal-content{
    /*width:50%;
    margin:0 auto;*/
    /*add what you want here*/
    padding: 25px 45px 20px 45px;
    font-size: 1.5rem;
    font-family: "NSimSun", "STSong", "微軟正黑體";
    background-color: #e1ebe8;
}



.end{
  background-color: #D8D8D8;
}

.credits{
  padding: 5rem 0rem;
  text-align: center;
  color: black;
  list-style: none;
}

.credits li{
  margin: 0.5rem;
  padding: 1rem;
  font-size: 1.3rem;
}


#boxes{
    padding-top: 300px;
}


.rows{
  display:inline-block;
}

.arrowUp, .arrowDown{
  position:fixed;
  z-index:99;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-left: -38px;
  right: 0%;

}

.arrowDown{
    bottom: 20px;
    border-width: 18px 15px 0 18px;
    border-color: #928b8b transparent transparent transparent;
}

.arrowUp{
    top: 110px;
    border-width: 0 18px 15px 18px;
    border-color: transparent transparent #928b8b transparent;
}

@media screen and (min-width: 376px){
  .arrowUp, .arrowDown{
    visibility: hidden;
    display: none;
  }
}

/*
.carousel-inner{
    width:80%;
    margin:0 auto;
}
*/

/*
.card-image{
    min-height: 80px;
    min-width: 80px;
}
*/

/*
#gallery{
    margin: 8px 0px 10px 0px;
	position: relative;
	width: 100%;
	height: 100vh;
}
*/


/*
#carousel-1{
    width:50%;
    height; 50px;
}
*/