/*-------------------------------------
    Reset
---------------------------------------*/

/******Basic settings**********/
*{
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

*, *:before, *:after {
    box-sizing: inherit;
}
img{
  border: 0px;
}
a{
  text-decoration: none;
  color:#444;
}
body{
    font-family: 'Roboto', sans-serif; color: #ffffff;
}

#frame_one, #frame_two,#frame_three,#frame_four,#frame_five {
  width: 100%;
  height: 100%;
}

/*-------------------------------------
  Layout
---------------------------------------*/

#ad {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  font-size: 4vh;
}

#banner {
  position: absolute;
  background: #fff;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  visibility: hidden;
  border: 1px solid #444;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#clickTAG {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  cursor: pointer;
}

/*-------------------------------------
  Frame One frame duration: 3s
---------------------------------------*/

.dell-logo{
	width: 14em;
	height: auto;
	top: 8%;
	left: 50%;
	transform: translate(-50%);
    position:absolute;
    z-index: 1;
}

.f1_background{
    top: 0;
    left: 0px;
    position:absolute;
	width: 30em;
}

.frame1-text{
	position: absolute;
	font-size: 1.6em;
	font-weight: 300;
	color: #444444;
	text-align: center;
	left: 21%;
	top: 20%;
}

.title1-1{
    top: 23%;
}

.title1-2{
    top: 30%;
}

.title1-3{
    top: 37%;
}

.circle1{
	position: absolute;
	width: 15.5em;
	top:75%;
	left: 24%;
	transform: translate(-50%);
	transform: scale(1.8);
}
/*-------------------------------------
  Frame two  frame duration: 3s
---------------------------------------*/
.product1{
	position: absolute;
	left: 10%;
	top:26%;
	width:24.4em; 
	opacity: 1;
	transform: scale(1);
}

.title2{
    position: absolute;
    font-size: 1.2em;
    font-weight: 900;
    color: #444444;
    text-align: center;
    top: 6%;
	left: 50%;
	transform: translate(-50%);
}

.title2-1{
    position: absolute;
    font-size: 2em;
    font-weight: 300;
    color: #444444;
    text-align: center;
    bottom: 4%;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}


/*-------------------------------------
  Frame Three  frame duration: 3s
---------------------------------------*/
.f3_background{
    top: 0px;
    left: 300px;
    position:absolute;
}

.title3-1{
    position: absolute;
    font-size: 2em;
    font-weight: 300;
    color: #444444;
    text-align: center;
    bottom: 4%;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}

/*-------------------------------------
 Frame Four  frame duration: 3s
---------------------------------------*/
.f4_background{
    position: absolute;
    top: -20px;
    right: -5px;
}

.title4-1{
    position: absolute;
    font-size: 2em;
    font-weight: 300;
    color: #444444;
    text-align: center;
    bottom: 4%;
	left: 50%;
	transform: translate(-50%);
	z-index: 1;
}

/*-------------------------------------
 Frame Five  frame duration: 3s
---------------------------------------*/
.f5_background {
    top: -1px;
    left: -50px;
    position:absolute;
}

.circle2{
	position: absolute;
	width: 15.5em;
	top:17%;
	left: 50%;
	transform: translate(-50%);
}

.product2{
	position: absolute;
	left: 50%;
	top:26%;
	width:16.3em; 
	transform: translate(-50%);
}

.title5{
    position: absolute;
    font-size: 1.2em;
    font-weight: 900;
    color: #444444;
    text-align: center;
    top: 6%;
	left: 23%;
}

.title5-1{
    position: absolute;
    width: 100%;
    bottom: 10%;
    font-size: 1.6em;
    text-align: center;
    font-weight: 300;
    line-height: 1.1em;
    color: #444444;
	filter: blur(0px);
}

.title5-2{
    position: absolute;
    width: 100%;
    bottom: 3%;
    font-size: 1.6em;
    text-align: center;
    font-weight: 300;
    line-height: 1.1em;
    color: #444444;
	filter: blur(0px);
}

.frame6-text{
    position: absolute;
    width: 100%;
    font-size: 2.8em;
    text-align: center;
    font-weight: 300;
    line-height: 1.1em;
    color: #ffffff;
    top: 32%;
}

.title6-1{
	top:10%;
}

.title6-2{
	top:10%;
}

.title6-3{
	top:15%;
}

.logo{
	position: absolute;
	width: 30em;
    top: 0%;
	left: 0%;
	z-index: 99;
}