
<!--ipad-->
@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px){
	
	}

@media screen and (max-width:768px){
	
	body{
	width:100%;
	height:auto;
	margin:0px auto;
}

#wrapper{
	width:100%;
	height:auto;
	margin:0px auto;
}

#main_div{
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}
	
	.main_body{width:85%; height:auto;}
	
	.logo{width:15%;
	height:100%;
	
	background-color:#fcc024;
	
	position:fixed;}
	
	.logo ul{left:3%; margin-top:10%;
	list-style:none;
	position:relative;
}

.logo ul li{
	padding:60% 0px 0px 21%;
	z-index:9999;
	cursor:pointer;
}

.logo ul li a img{
	color:#fff;
	text-decoration:none;
	z-index:9999;	
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}

.logo ul li img:hover{
	cursor:pointer;
	width:60px;
	height:60px;
}


#timeline {
    position: relative;
    padding: 0;
    list-style: none;
	position:fixed;
}

#timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    
    width: 2px;
    margin-left: -30px;
    background-color: #46494a;
}

.screen_1{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;
}



#logo_img{position:fixed; 
	right:0px;
	z-index:9999;
}

#logo_img img{ width:450px;
	padding:10px;
	
}

#dog img{margin-top:-20%;}




.screen_2{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;;margin-bottom:70px;
}

#digital{margin-top:0%;}
.screen_2 h2{padding-top:-30%;}

.screen_3{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
	
}
#chik{padding-top:-10%;}
#chik img{padding-top:-10%;}
#text3{margin-top:-25%;}




.screen_4{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}
#service{margin-top:0%;}
#service img{padding-top:30%;}
#text{margin-top:-10%;}



.screen_5{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}

#roles{padding-top:20%;}

#about{margin-left:-7%; height:auto; width:5%; margin-bottom:3%;}








.screen_6{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff; padding-top:28%;
}

#prime p{height:auto; font-size:9px;}


.screen7{width:100%; height:auto;}
.trivia1{margin-top:-15%;}




#bottom{width:100%; height:40px; background-color:#4a4a4c;  position:fixed; bottom:0px; }

#bottom ul{list-style:none; line-height:40px; }

#bottom ul li{ color:#fcc024; font-size:12px; padding:0px 0px 0px 5px; float:left;}

#bottom ul li a{text-decoration:none;color:#fcc024; float:left;}


#checklist{margin-top:4px;}	
.location_page{margin-top:50px;}
}


/*phone*/

@media screen and (max-width:414px){
	body{
	width:100%;
	height:auto;
	margin:0px auto;
}

#wrapper{
	width:100%;
	height:auto;
	margin:0px auto;
}

#main_div{
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
}
	
	.main_body{width:85%; height:auto;}
	
	.logo{width:15%;
	height:100%;
	
	background-color:#fcc024;
	
	position:fixed;}
	
	.logo ul{left:-8%; margin-top:18% 0px 0px 5%;;
	list-style:none;
	position:relative;
}

.logo ul li{
	padding:58% 2% 0px 21%;
	z-index:9999;
	cursor:pointer;
}

.logo ul li a img{
	color:#fff;
	text-decoration:none;
	z-index:9999;	
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}

.logo ul li img:hover{
	cursor:pointer;
	width:50px;
	height:50px;
}


#timeline {
    position: relative;
    padding: 0;
    list-style: none;
	position:fixed;
}

#timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    
    width: 2px;
    margin-left: -55px;
    background-color: #46494a;
}

.screen_1{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;
}



#logo_img{position:fixed; 
	right:0px;
	z-index:9999;
}

#logo_img img{ width:300px;
	padding:10px 10px 0px 10px;
	
}

#dog img{margin-top:-50%;}




.screen_2{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;;margin-bottom:70px;
}

#digital{margin-top:-20%;}
.screen_2 h2{padding-top:-30%;}

.screen_3{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
	
}
#chik{margin-top:-5%;}
#chik img{ margin-bottom:50px;}





.screen_4{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}
#service{margin-top:20%;}
#service img{padding-top:50%;}
#text{margin-top:-10%;}



.screen_5{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}

#roles{padding-top:20%;}

#about{margin-left:-7%; height:auto; width:5%; margin-bottom:3%;}



.screen_6{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff; padding-top:28%;
}

#prime p{height:auto; font-size:9px;}


.screen7{width:100%; height:auto;}
.trivia1{margin-top:40%;}

#bottom{width:100%; height:40px; background-color:#4a4a4c;  position:fixed; bottom:0px;}

#bottom ul{list-style:none; line-height:40px; }

#bottom ul li{ color:#fcc024; font-size:10px; padding:0px 0px 0px 5px; float:left;}

#bottom ul li a{text-decoration:none;color:#fcc024; float:left;}
#checklist{margin-top:4px;}

}


/*normal phones*/

@media screen and (max-width:360px){
	
	body{
	width:100%;
	height:auto;
	margin:0px auto;
}

#wrapper{
	width:100%;
	height:auto;
	margin:0px auto;
}

#main_div{
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
	
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}
	
	.main_body{width:85%; height:auto;}
	
	.logo{width:15%;
	height:100%;
	
	background-color:#fcc024;
	
	position:fixed;}
	
	.logo ul{left:-10%; margin-top:10%;
	list-style:none;
	position:relative;
}

.logo ul li{
	padding:70% 0px 0px 21%;
	z-index:9999;
	cursor:pointer;
}

.logo ul li a img{
	color:#fff;
	text-decoration:none;
	z-index:9999;	
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}

.logo ul li img:hover{
	cursor:pointer;
	width:60px;
	height:60px;
}


#timeline {
    position: relative;
    padding: 0;
    list-style: none;
	position:fixed;
}

#timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    
    width: 2px;
    margin-left: -60px;
    background-color: #46494a;
}

.screen_1{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;
}



#logo_img{position:fixed; 
	right:0px;
	z-index:9999;
}

#logo_img img{ width:250px;
	padding:10px;
	
}

#dog img{margin-top:-80%;}




.screen_2{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;;margin-bottom:70px;
}

#digital{margin-top:-20%;}
.screen_2 h2{padding-top:-30%;}

.screen_3{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
	
}
#chik{padding-top:-10%;}
#chik img{padding-top:-10%;}
#text3{margin-top:-25%;}




.screen_4{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}
#service{margin-top:30%;}
#service img{padding-top:50%;}
#text{margin-top:-20%;}



.screen_5{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}

#roles{padding-top:20%;}

#about{margin-left:-7%; height:auto; width:5%; margin-bottom:3%;}


.screen_6{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff; padding-top:28%;
}

#prime p{height:auto; font-size:9px;}


.screen7{width:100%; height:auto;}
.trivia1{margin-top:-15%;}


#bottom{width:90%; height:40px; background-color:#4a4a4c;  position:fixed; bottom:0px; }

#bottom ul{list-style:none; line-height:40px; }

#bottom ul li{ color:#fcc024; font-size:10px; padding:0px 0px 0px 5px; float:left;}

#bottom ul li a{text-decoration:none;color:#fcc024; float:left;}
#checklist{margin-top:4px;}
}


/*iphn5*/
@media screen and (max-width:320px){
	
	
	body{
	width:100%;
	height:auto;
	margin:0px auto;
}

#wrapper{
	width:100%;
	height:auto;
	margin:0px auto;
}

#main_div{
	width:100%;
	height:100%;
	background-color:#fff;
	position:absolute;
}
	
	.main_body{width:85%; height:auto;}
	
	.logo{width:15%;
	height:100%;
	
	background-color:#fcc024;
	
	position:fixed;}
	
	.logo ul{left:-10%; margin-top:10%;
	list-style:none;
	position:relative;
}

.logo ul li{
	padding:60% 0px 0px 21%;
	z-index:9999;
	cursor:pointer;
}

.logo ul li a img{
	color:#fff;
	text-decoration:none;
	z-index:9999;	
	-webkit-transition: all 1s ease; 
	 -moz-transition: all 1s ease; 
	 -ms-transition: all 1s ease; 
	 transition: all 1s ease;
}

.logo ul li img:hover{
	cursor:pointer;
	width:60px;
	height:60px;
}


#timeline {
    position: relative;
    padding: 0;
    list-style: none;
	position:fixed;
}

#timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    
    width: 2px;
    margin-left: -60px;
    background-color: #46494a;
}

.screen_1{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;
}



#logo_img{position:fixed; 
	right:0px;
	z-index:9999;
}

#logo_img img{ width:250px;
	padding:10px;
	
}

#dog img{margin-top:-80%;}




.screen_2{
	width:100%; 
	height:auto;
	position:relative;	
	background-color:#fff;;margin-bottom:70px;
}

#digital{margin-top:-40%;}
.screen_2 h2{padding-top:-30%;}

.screen_3{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
	
}
#chik{padding-top:-10%;}
#chik img{padding-top:-10%;}
#text3{margin-top:-25%;}




.screen_4{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}
#service{margin-top:30%;}
#service img{padding-top:50%;}
#text{margin-top:-20%;}



.screen_5{
	width:100%; 
	height:auto;
	position:relative;
	background-color:#fff;
}

#roles{padding-top:20%;}

#about{margin-left:-7%; height:auto; width:-40%; margin-bottom:3%;}



.screen_6{
	width:100%; 
	height:100%;
	position:relative;
	background-color:#fff; padding-top:28%;
}

#prime p{height:auto; font-size:9px;}


.screen7{width:100%; height:auto;}
.trivia1{margin-top:-15%;}

#bottom{width:100%; height:40px; background-color:#4a4a4c;  position:fixed; bottom:0px; }

#bottom ul{list-style:none; line-height:40px;}

#bottom ul li{ color:#fcc024; font-size:10px; padding:0px 0px 0px 5px; float:left;}

#bottom ul li a{text-decoration:none;color:#fcc024; float:left;}

#checklist{margin-top:4px;}	


}