/*

DART 450, Winter 2018
Exercise 3
Émilie Brunet

Some description of the CSS styling

*/

body {
  width: 100%;
	height: 100%;
	margin: auto;
}

#overlay1 {
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.8);
	z-index: 98;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

.hidden {

}

.btn1 {
	text-align: center;
	margin: 0 auto;
	position: absolute;
	top: 48vh;
	right: 48vw;
	font-size: 18px;
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	background: rgba(66,111,227,1.00);
	cursor: pointer;
	
}

.btn2 {
	background-color:rgba(255,255,255,0.00);
	border: solid rgba(0,0,0,0.00) 0px;
	box-shadow: none;
	color: white;
	font-family: Helvetica, sans-serif;
	font-size: 19px;
	cursor: pointer;
}

.btn3 {
	background-color: rgba(0,0,0,0.00);
	cursor: pointer;
}

#scroll1 {
	z-index: 99;
	position: absolute;
	top: 80vh;
	text-align: center;
	margin: auto;
	left: 45.5vw;
	color: white;
	    -webkit-animation: mymove 1s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 1s infinite;
	text-decoration: none;
	display: none;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {top: 80.5vh;}
    to {top: 80vh;}
}

@keyframes mymove {
    from {top: 80.5vh;}
    to {top: 80vh;}
}

#element1 {
	height: 400px;
	width: 400px;
	position:absolute;
	background-size: cover;
	top: 0%;
	left: -5%;
	background-image: url(../images/wire3.png);
	transform: rotate(180deg);
	z-index: -1;
		display: none;
}

#element2 {
	height: 50vh;
	width: 100vw;
	position:absolute;
	z-index: 12;
	background-size: cover;
	top: 48vh;
	left: 0;
	background-image: url(../images/wire4.png);
		display: none;
}

#element3 {
	height: 50vh;
	width: 50vw;
	position:absolute;
	z-index: 12;
	background-size: cover;
	top: 0px;
	left: 500px;
	background-image: url(../images/wire5.png);
	transform: rotate(180deg);
		display: none;
}

#element4 {
	height: 50vh;
	width: 50vw;
	position:absolute;
	z-index: 3;
	background-size: cover;
	top: 150px;
	left: 500px;
	background-image: url(../images/wire6.png);
		display: none;
}

#element5 {
	height: 50vh;
	width: 50vw;
	position:absolute;
	z-index: 3;
	background-size: cover;
	top: 200px;
	left: 58vw;
	background-image: url(../images/wire8.png);
	transform: rotate(-90deg);
		display: none;
}

#element6 {
	height: 200px;
	width: 300px;
	position:absolute;
	z-index: 3;
	background-size: cover;
	top: 220px;
	left: 10vw;
	background-image: url(../images/wire10.png);
		display: none;
}

#element7 {
	height: 170px;
	width: 300px;;
	position:absolute;
	z-index: 2;
	background-size: cover;
	top: 100px;
	left: 20vw;
	background-image: url(../images/wire11.png);
		display: none;
}

#s2 {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	display: none;
}

#iphone1{
	height: 700px;
	width: 450px;
	background-image: url(../images/iPhonex-mockup-moeslah.png);
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#time {
	position: absolute;
	top: 185px;
	left: 240px;
	color: white;
	font-family: Helvetica, sans-serif;
	font-size: 16px;
	display: none;
}

.end {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	position: absolute;
	top: 541px;
	left: 239px;
	cursor: pointer;
	display: none;
}

.end:hover{
	background-color:rgba(0,0,0,0.2)
}

#one {
	width: 59px;
	height: 59px;
	border-radius: 50%;
	position: absolute;
	top: 260px;
	left: 160px;
	cursor: pointer;
	display: none;
}

#one:hover {
	background-color:rgba(0,0,0,0.2)
}

#iphonebound {
	height: 700px;
	width: 450px;
	top: 102%;
	left: 29%;
	position: absolute;
	display: none;
}

#bubble1 {
		font-family: Helvetica, sans-serif;
	font-size: 19px;
	z-index: 99;
	text-align: center;
	margin: auto;
	position: relative;
	top: 40vh;
	color: white;
	display: none;
}

#bubble2{
	top: 115%;
	left: 15%;
	position: absolute;
	height: 100px;
	width: 200px;
	color: white;
	font-size: 19px;
	font-family: Helvetica, sans-serif;
	display: none;
}

#bubble3{
	top: 125%;
	left: 15%;
	position: absolute;
	height: 100px;
	width: 225px;
	color: white;
	font-size: 19px;
	font-family: Helvetica, sans-serif;
	display: none;
}

#bubble4{
	top: 143%;
	left: 15%;
	position: absolute;
	height: 100px;
	width: 225px;
	color: white;
	font-size: 19px;
	font-family: Helvetica, sans-serif;
	display: none;
}

#bubble5{
	top: 153%;
	left: 15%;
	position: absolute;
	height: 100px;
	width: 225px;
	color: white;
	font-size: 19px;
	font-family: Helvetica, sans-serif;
	display: none;
}