html, body{
	background-color: #222;
	overflow-x: hidden;
}
h1,h2 {
	color:white;
}

/*header*/
#top{
	height: 1080px;
}
.top-banner{
	position:relative;
}
.research-title{
	position: absolute;
	width: 100%;
	top:50%;
	transform: translateY(-50%);
}
.research-title h1 {
	font-size: 80px;	
}
.research-title p {
	color:#FF7700;
	font-size: 30px;
}
.arrow{
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 50px;
	animation-name: arrow-down;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@keyframes arrow-down{
	0%{top:0;opacity: 1}
	100%{top:100px;opacity: 0}}
@media(max-width:1280px){
	#top{height: 800px;}
	#top img{width: 1280px;}
	.research-title h1 {font-size: 60px;}
	.research-title p {font-size: 20px;}	}
@media(max-width:991px){
	.research-title h1,p {text-align: center;}
	.research-title{width: initial;}
	}
@media(max-width:768px){
	.arrow{display: none;}
	.research-title h1 {font-size: 40px}
}
/*what-is-brinno-time-lapse*/
#what-is-brinno-time-lapse{
	height: 1080px;
	position: relative;

}
#what-is-brinno-time-lapse p{
	color:#FFF;
	font-size: 20px
}
#what-is-brinno-time-lapse h1{
	font-size: 60px;
	color:#FFF;
}
#what-is-brinno-time-lapse .row{
	position: absolute;
    top: 50%;
    transform: translateY(-50%) 
}
.what-is-brinno-time-lapse-text{
	padding-left: 200px;
}
#what-is-brinno-time-lapse img{
	  position: absolute;
    transform: translateY(-30%);
}
@media(max-width:1400px){
	#what-is-brinno-time-lapse img{
		width: 90%;
	}
}
@media(max-width:1280px){
	#what-is-brinno-time-lapse{height: 768px;}
	#what-is-brinno-time-lapse h1{font-size:40px;}
	#what-is-brinno-time-lapse p {font-size: 16px;}
	.what-is-brinno-time-lapse-text{padding-left: 100px}
	
}
@media(max-width:991px){
	.what-is-brinno-time-lapse-text{padding: 50px;text-align: center}
	#what-is-brinno-time-lapse .row{bottom: -40%;}
	#what-is-brinno-time-lapse img{width: 50%; left:50%;transform: translateX(-50%) translateY(0%);}
}
/*show off your skills and talents*/
#use{
	height: 1080px;
	position: relative;
}
#use .container{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
#use h1 {
	font-size: 60px;
   	color:#FFF;
}
#use p {
	color: #e0e0e0;
	text-align: center;
	margin-top: 20px;
	font-size:20px;
}
.icon-rwd {display:none;}
@media(max-width:1280px){
	#use{height: 768px;}
	#use h1{font-size:40px;}
	#use p {font-size: 16px;}
}
@media(max-width: 991px){
	.icon-rwd {display:initial;}
}
@media(max-width:768px){
	#use .container{
		position: relative;
		top:0px;
		left: 0px;
		transform: translateY(0%) translateX(0%);}}
/*analysis-tool*/
#analysis-tool{
	height: 1080px;
	padding-bottom:300px;
}
#analysis-tool .container{
	margin-top: -100px;
}
#analysis-tool h1{
	font-size: 60px;
   	color:#FFF;
}
#analysis-tool p{
	text-align: center;
	margin-top: 20px;
	color: #e0e0e0;
	font-size:20px;
}
@media(max-width: 991px){
	#analysis-tool h1{font-size: 40px; color:#FF7700;-webkit-text-stroke-width: 0px;}
	#analysis-tool p{font-size: 16px}
	#analysis-tool img{width: 60%}
	#analysis-tool .container{margin-top: 0px;}}
@media(max-width: 768px){
	#analysis-tool{
	height: initial;
	padding-bottom:0px;}
	#analysis-tool h1{font-size: 20px;}
}
/*case-study*/
#case-study{
	height: 1080px;
	position: relative;
	background-color: #F7F7F7;
}
#case-study h1{
	color:#222;
	font-size: 60px;
}
.article-title{
	color:#222;
	font-size: 30px;
}
#case-study .container{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
#case-study  img{
	position: absolute;
	top:0px;
	left: 0px; 
	width:100%;
	opacity: 1;
	padding: 5px 4px;
}
.article{
	padding: 40px;
    text-align: center;
    height: 350px;
    outline: solid 1px #222;
    outline-offset: -10px;
    position: relative; 
    overflow: hidden;
}
.cover-title{
	color:#FFF;
	font-size: 40px;
	text-shadow: 0px 0px 5px #222 ;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
} 

#case-study .article-cover:hover{
	opacity: 0;
	transition-duration: 0.5s;
}
.read-more{
	border: solid 1px;
	display: inline-block;
	border-radius: 30px;
	padding: 10px 20px;
	background-color: #222;
	position: absolute;
    bottom: 40px;
    transform: translateX(-50px);
}
.read-more p{color:#FFF;margin-bottom: 0px}
#case-study a{text-decoration: initial;}
@media(max-width: 991px){
	#case-study{
		height: initial;
		padding-bottom: 100px;}
	#case-study .container{
		position: relative;
		transform: translateX(0%) translateY(0%);
		top:0%;
		left:0%;
		padding-top:100px}
}
@media(max-width: 500px) {
	#case-study .article-cover:hover{
		opacity:1;}
	.article{height: 200px;}
	.abstract{display: none;}
}

}
/*construction camera model*/
#model{position: relative;background-color: #F7F7F7;height: 2100px}
#model .title-box-title {
	font-size: 60px;color:#FFF;}
@media (max-width: 991px){#model .title-box-title{font-size: 40px;}}
#model .BCC2000, .BCC200, .BBT2000, .MAC200DN{
	display: flex;
	width:80%;
	height: 350px;
	margin-bottom: 100px;
}
#model .bcc2000, .bcc200, .bbt2000, .mac200dn{
	display: flex;
	background: #383838;
	width: 70%;
	height: 100%;
}
.month{
	position: relative;
	width: 30%;
	height: 100%;
	border:solid 2px #383838;
	display: block;
	text-align: center;
}
.month-2{
	height: 200%;
}
.month-text{
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}
.month-text h1{
	font-size:80px;
	color:#FFF;
}
.month-text h3{
	font-size:30px;
	color:#FFF;
}
.month-s{
	display: none;
	text-align: center;
	border:solid 1px #383838; 
	padding: 10px;
}
.month-s h1{
	color:#383838;
}
.model-info{
	display: flex;
	padding-left:20px;
}
.model-title{
	align-self: center;
}
.model-title h1 {
	align-items: center;
	justify-content: center;
	font-size: 50px;
	font-weight: 900;
	color: white;
}
#model .space{width: 30%}
.model-bcc200{float:right;}
.product-button{
	border:solid 1px #FFF;
	border-radius: 50px;
	padding: 10px 20px;
	display: inline-block;
}
.product-button a{
	color:#FFF;
}
.product-button:hover a{
	color:#FF7700;
}
.product-button:hover {
	background-color: #FFF;
}
.product-button:hover .model-bcc2000{
	transform: scale(120%);
}
ul{
	margin-left:-20px;
}
li {
	color: #FFF;
}
@media (max-width: 1400px){
	#model .space{width: 20%}
}
@media (max-width: 991px){
	#model .BCC2000, .BCC200, .BBT2000, .MAC200DN
	{float: initial;width: 100%;height: 300px;}
	#model .model-info{ width: 50%;}
	.model-title > h1{font-size: 30px}
	#model .space{width: 10%}
}
@media (max-width: 768px){
	#model .month{display: none}
	#model .space{width: 0%}
	#model .bcc2000, .bbt2000, .bcc200, .mac200dn {width: 100%;padding: 0px 45px;}
	.month-s{display:inline-block;width: 100%;}
}
@media (max-width: 600px){
	#model .product-button{padding: 5px 10px;}
	#model .bcc2000, .bbt2000, .bcc200, .mac200dn {padding: 0px 10px;}
}
@media (max-width: 414px){
	#model .product-button{display: none}
}

/*comparison chart*/
#comparison{
	background-color: #F7F7F7;
	padding: 100px 0px;
}
#comparison h1{
	color:#212121;
}
#comparison table {
	width: 100%;
	text-align: center;
}
#comparison th, td{
	text-align: center;
	border-bottom:solid 1px #9e9e9e;
	padding: 10px
}
.title{
	text-align: left;
	font-weight:700;
}
.rotate-notice{
	text-align: center;
	display: none;
}
.rotate-notice p{
	color: #FF7700;
	margin-bottom: 100px;
}
.rotate-phone{
	animation: rotate 3s infinite;
}
@keyframes rotate{
	100% {transform: rotate(-90deg)}
}
@media(max-width:732px){
	.rotate-notice{
	display: initial;}
}
/*other solution*/
#next-solution{
	background-color: #F7F7F7;
	padding: 100px 0px;
}
#next-solution h1{
	font-size: 40px;
	color: #FF7700;
	text-align: center;
	padding: 10px;
}
.solution {
	text-align: center;
}
.solution img{
	width: 100px	
}
.solution a{
	text-decoration: initial;
}
.solution:hover {
	transform: translateX(5px) translateY(5px);
	transition-duration: 0.5s;
}