@charset "utf-8";
body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background-color:  #303030;
}
.header {
	height: 100vh;
	width: 100%;
	background: #303030;
	color: orange;
	font-family: APompadourTextSample;
}
h1{
	text-align: center;
	font-size: 80px;
}
h2{
	text-align: center;
	font-family: APompadourTextSample;
	color: orange;
	font-size: 40px;
	
}
.scrolldown{
	text-align: center;
	position: relative;
	z-index: -1;
}
  .arrow{
      position: relative;
      font-size: 400px;
      text-align: center;
      transform: rotate(90deg);
      animation: bouncearrow 1s infinite;
      color: #ffc728;
    }

@-webkit-keyframes bouncearrow{
    0%{top: 0px;}
    50%{top: 20px; color: #000000;}
    100%{top: 0px;}
}
.box{
	height: 100vh;
	width: 100%;
}
.single-box .div-left{
	width: 49%;
	height: auto;
	float: left;
}
.single-box .div-left2{
	width: 49%;
	height: auto;
	float: left;
	
}
.single-box .div-right{
	width: 49%;
	height: auto;
	float: right;
}
p{
	padding: 25% 15%;
	color: orange;
	font-size: 20px;
	font-family: APompadourTextSample;
	
}
.tim{
	padding: 20% 5% 0 5%;
	height: 450px;
	width: 450px;
	border-radius: 50%;
	transition: background 1s, transform 1s 1s ease;
}
.tim:hover{
	transform: rotate(360deg);
		}
.ivw{
	padding: 20% 5% 0 0%;
	height: 400px;
	width: 600px;
	}
.rotate{
  width: 200px;
  height: 280px;
  padding: 20% 0% 0 15%;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
  .transition-box {
  width: 400px;
  height: 400px;
  background: url("../images/mosaic.jpg");
  background-size: cover;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
}

.transition-box:hover {
  background: url("../images/first-web-browser.png");
  background-size: auto;
  cursor: pointer;
  -webkit-transition: background-image 2s ease-out;
  -moz-transition: background-image 2s ease-out;
  -o-transition: background-image 2s ease-out;
  transition: background-image 2s ease-out;
}
@font-face{
	font-family: "APompadourTextSample";
	src: url("../fonts/APompadourTextSample.otf");
	font-style: normal;
	font-weight: 100;
}
p.a{
	font-family: APompadourTextSample;
	color: orange;
	font-size: 20px;
}
p.b{
	font-family: APompadourTextSample;
	color: orange;
	font-size: 20px;
}
.logo1{
	margin-bottom: 20px;
	margin-left: 140px;
	margin-top: 70px;
	z-index: 1;
	position: relative;
}
.logo2{
margin-left: 120px;
margin-top: -80px;
position: relative;
z-index: 1;;
}
.logo3{
margin-left: 130px;
margin-top: -60px;
position: relative;
z-index: 1;
}
.logo4{
margin-left: 270px;
margin-top: -310px;
position: relative;
z-index: 1;
}
.logo5{
margin-left: 270px;
margin-top: -60px;
position: relative;
z-index: 1;
}
.logo6{
margin-left: 270px;
margin-top: -60px;
position: relative;
z-index: 1;
}
.scene1{
	background: url("../images/background1.jpg") center repeat;
	-webkit-background-size: cover;
}
.scene2{
	background: url("../images/background2.jpg") center repeat;
	-webkit-background-size: cover;
}
.scene3{
	background: url("../images/background3.jpg") center repeat;
	-webkit-background-size: cover;
}
.scene4{
	background: url("../images/background4.jpg") center repeat;
	-webkit-background-size: cover;}
.scene5{
	background: url("../images/background5.jpg") center repeat;
	-webkit-background-size: cover;
}
nav#dot-nav {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1; 
}
nav#dot-nav a {
  border: 1px solid #121;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: block;
  margin: 10px;
}
nav#dot-nav a.active, nav#dot-nav a:first-child {
  background: #121212;
}