/* #PAGE STYLES */

#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 9999;
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(../images/preload.gif);
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
}



/* #MENU
================================================== */
	#navigation {
		background: rgba(0,0,0,.9);
		position: relative;	
		width: 100%;
		height: 80px;
		z-index: 2000;
		box-shadow: 0 3px 6px rgba(0,0,0,.2);
	}
	
	.logo {
		float:left;
		margin-left:30px;
		margin-top:15px;
		width: 130px;
		height:50px;
	}
	


	#navigation ul {
		padding-top:30px;
		float:right;
		margin-right:20px;		
	}
	
	#navigation ul li {
		display: inline;
		margin-right:30px;
		font-family: "trajan-pro-3", serif;
		font-weight: 400;
	}
	
	#navigation a, #navigation a:active, #navigation a:visited {
		color:#fff;
		padding-top:25px;
		height:70px;		
		text-transform:uppercase;
		font-weight:bold;
		font-size:14px;
		padding-bottom:10px;
	}

	#navigation ul li:hover a {
		color: #CC0000;
	}
	



/* #EMAIL
================================================== */
        .fixed-right {
            position: fixed;
            top: 100px;
			z-index: 999; 
            right: 0;
            width: 100%;
            height: 100%;
			max-width: 300px;
            color: white;
            padding: 10px;
            box-sizing: border-box;
        }

        @media (max-width: 600px) {
            .fixed-right {
                width: 100%;
                height: auto;
                top: 0;
                right: 0;
            }
        }	

        .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            background-color: transparent;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }	
	
	
/* #Home
================================================== */

#home{
	background: url(../images/mainbackground1920.jpg) no-repeat center center fixed;
	margin: 0 auto;
	text-align:center;
	position: relative; 
	width: 100%;
	overflow:hidden;
}
		#maximage {	
		display:none;
		position:absolute!important;
		background:#000;
		}	
	div.mc-image {
	/*NOTE: Mozilla flickers when fading and using 'all', so we have to be specific with what property we want to transition:
	 	If you are using fading transitions, use 'opacity: */
	-webkit-transition: opacity 1s ease-in-out; 
	-moz-transition: opacity 1s ease-in-out; 
	-o-transition: opacity 1s ease-in-out; 
	transition: opacity 1s ease-in-out;
	
	/*If you are using horizontal slide transitions, use the following CSS:
	-webkit-transition: left 1s ease-in-out; 
	-moz-transition: left 1s ease-in-out; 
	-o-transition: left 1s ease-in-out; 
	transition: left 1s ease-in-out;*/
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center center;
	background-repeat:no-repeat;
	height:100%;
	overflow:hidden;
	width:100%;
}	
			#arrow_left {
				top:50%;
				height:72px;
				position:absolute;
				margin-top:-36px;
				opacity:.6;
				-webkit-transition : all 0.2s ease-out;
				-moz-transition : all 0.2s ease-out;
				-o-transition :all 0.2s ease-out;
				transition : all 0.2s ease-out;
				left:10px;
				width:36px;
				z-index:1000;
			}
			#arrow_right {
				top:50%;
				height:72px;
				position:absolute;
				margin-top:-36px;
				opacity:.6;
				-webkit-transition : all 0.2s ease-out;
				-moz-transition : all 0.2s ease-out;
				-o-transition :all 0.2s ease-out;
				transition : all 0.2s ease-out;
				right:10px;
				width:36px;
				z-index:1000;
			}

			#arrow_left:hover, #arrow_right:hover {
				opacity:1;
			}
			#arrow_left:active, #arrow_right:active {
				opacity:1;
			}


.ca-menu{
    width: 684px;
	position:relative;
	height:200px;
	top:50%;
	left:50%;
	margin-left:-340px;
	text-align:center;
	margin-top:64px;
	margin-bottom: 40px;
	z-index:90;
}

.ca-menu img{
	opacity: 0.1;
	display: inline-block;
}

.ca-menu img:hover{
	opacity: 0.4;
	display: inline-block;
}

.ca-menu li{
    width: 132px;
    height: 132px;
    overflow: hidden;
    position: relative;
    float:left;
    background: rgba(250,250,250,0);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0);
    box-shadow: 1px 1px 2px rgba(0,0,0,0);
    margin-right: 5px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'FontAwesome';
    font-size: 40px;
    color: #fff;
    text-shadow: 0px 0px 1px #333;
    line-height: 80px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}

.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}
.ca-main{
    font-size: 20px;
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	color:#FFF;
    opacity: 0.8;
    text-align: center;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-sub{
    text-align:center;
    font-size: 14px;
    color: #666;
    position: absolute;
    bottom: 0px;
    line-height: 40px;
    width: 100%;
    left: 0px;
    opacity: 0.8;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
.ca-menu li:hover{
    z-index:999;
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);  
    -ms-transform: scale(1.1);   
    -o-transform: scale(1.1);   
    transform: scale(1.1);  
}
.ca-menu li:hover .ca-icon{
    color: #fff;
    font-size: 60px;
    opacity:0.6;
}
.ca-menu li:hover .ca-icon#heart{
    -webkit-animation: smallToBig 900ms alternate infinite ease;
    -moz-animation: smallToBig 900ms alternate infinite ease;
    -ms-animation: smallToBig 900ms alternate infinite ease;
    animation: smallToBig 900ms alternate infinite ease;
}
.ca-menu li:hover .ca-main{
    color: #fff;
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
    -webkit-animation: smallToBig 300ms ease;
    -moz-animation: smallToBig 300ms ease;
    -ms-animation: smallToBig 300ms ease;
    animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    -webkit-animation: moveFromBottom 500ms ease;
    -moz-animation: moveFromBottom 500ms ease;
    -ms-animation: moveFromBottom 500ms ease;
    animation: moveFromBottom 500ms ease;
}
			
.backgr{
	position:absolute;
	width: 780px;
	height:290px;
	top:50%;
	left:50%;
	margin-left:-340px;
	text-align:center;
	margin-top:-230px;
	z-index:90;
}			

.storysection{
	position: relative;
	height: 600px;	
}

/* #Parallax
================================================== */

.parallax {
  /* The image used */
 background: url(../images/mainbackground.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxstory {
  /* The image used */
 background: url(../images/bg-story.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxguide {
  /* The image used */
 background: url(../images/bg-guide.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.parallaxheroes {
  /* The image used */
 background: url(../images/bg-heroes.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxmonsters {
  /* The image used */
 background: url(../images/bg-monsters.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxfriends {
  /* The image used */
 background: url(../images/bg-friends.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallaxgame {
  /* The image used */
 background: url(../images/bg-game2.jpg) no-repeat center center fixed;

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.monstertop{
	padding: 20px;
	margin-top: 70px;

}

.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-ms-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}



#rotator{
	position:relative;
	width: 100%;
	text-align:center;
	z-index:99;
	margin-top: 50px
}
#rotator p{
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	width: 100%;
	text-align:center;
    color: #fff;
	font-size:26px;
	line-height:30px;
}

.center-home{ 
	position:absolute;
	top:50%;
	margin-top:-30px;
	width:100%;
	text-align:center; 
	padding-top:20px;
	height:40px;
	z-index:99;
}
.list-social-home li { 
	width: 40px;
    list-style: none; 
    margin:0 auto; 
    text-align: center; 
    display: inline-block;
}

.list-social-home li.icon-soc-home a {
	font-family: 'FontAwesome';
	font-size: 22px;
	line-height: 40px;
	color: #fff; 
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out; 
}
.list-social-home li.icon-soc-home a:hover {
	color: #CC0000;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 

.fadeIn {
 
	/* CSS needed for animation
	---------------------------------------------------- */
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
 
/* Animation Times - Time for image to fade in
---------------------------------------------------- */
.fadeIn-4s {
	-webkit-animation-duration:4s;
	-moz-animation-duration:4s;
	-o-animation-duration:4s;
	animation-duration:4s;
}
 
/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.fadeIn-Delay-4s {
	-webkit-animation-delay:2s;
	-moz-animation-delay:2s;
	-o-animation-delay:2s;
	animation-delay:2s;
}

/* #Friends
================================================== */

#friends{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#friends h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#friends h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#friends h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#friends hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#friends h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}



#friends a{
	color:#f5f5f5;
}
#friends a:hover{
	color:#DA5049;
}


/* #Monsters
================================================== */

#monsters{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#monsters h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#monsters h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#monsters h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#monsters hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#monsters h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}



#monsters a{
	color:#f5f5f5;
}
#monsters a:hover{
	color:#DA5049;
}





/* #Story
================================================== */

#story{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#story h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#story h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#story h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#story hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#story h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}

#story a{
	color:#f5f5f5;
}
#story a:hover{
	color:#DA5049;
}



/* #Guide
================================================== */

#guide{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#guide h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#guide h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#guide h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#guide hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#guide h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}

#guide a{
	color:#f5f5f5;
}
#guide a:hover{
	color:#DA5049;
}



/* #Heroes
================================================== */

#heroes{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#heroes h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#heroes h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#heroes h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#heroes hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#heroes h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}



#heroes a{
	color:#f5f5f5;
}
#heroes a:hover{
	color:#DA5049;
}


/* #The Game
================================================== */

#game{
	position: relative; 
	width: 100%;
	padding-bottom:40px;
	margin: 0 auto;
	padding-top: 120px;
}
#game h1:before {  
    content: "";  
	left:10px;
    width: 100%;  
    position: absolute;  
    z-index: 1;  
}  
  
#game h1 span {  
	padding:0 20px;
    position: relative;  
    z-index: 5;  
}  
#game h1{
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
}

#game hr{
	border-bottom:1px dotted #CC0000;
	border-bottom-width: 100%;
}

#game h5{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	color: #000000;
	font-size:20px;
	line-height:34px;
	padding-bottom:10px;
	text-align:center;
}



#game a{
	color:#f5f5f5;
}
#game a:hover{
	color:#DA5049;
}

/* #Photo Gallery
================================================== */


* {
  box-sizing: border-box;
}

.photorow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.photocolumn {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.photocolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .photocolumn {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .photocolumn {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


/* #Footer
================================================== */
.form{
	position:relative;
	margin:0 auto;
	text-align:center;
	width:50%;
}


#contact{
	position:relative;
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
    background: #CC0000;
	font-size: 16px;
	color: #fff;
	margin:0 auto;
	text-align:center;
	width:100%;
	padding: 30px;
}

#contact h1{
	position:relative;
	font-family: "trajan-pro-3", serif;
	font-weight: 700;
	font-size: 30px;
	padding-top: 80px;
	color: #fff;
}	

#contact p{
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #fff;
}	

#contact a{
	color: #fff;
	font-weight: 700;
}	

#contact a:hover{
	color: #fff;
	font-weight: 700;
}	

#copyright{
	position:relative;
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
    background: #000;
	font-size: 12px;
	color: #fff;
	margin:0 auto;
	text-align:center;
	width:100%;
	padding: 20px;
}	

.center{ 
    text-align: center;
	height:32px;
}	

.border-footer{ 
	border-bottom:1px solid rgba(74,74,74,.4);
}		
/* #Media Queries
================================================== */

@media only screen and (min-width: 800px) and (max-width: 1200px) {
#home{
	background: url(../images/mainbackground1200.jpg) no-repeat center center fixed;
}
}


@media only screen and (max-width: 1080px) {
	#navigation a, #navigation a:active, #navigation a:visited {
		color:#292929;
	}
	
	#navigation ul {
		width: 250px;
		padding: 5px 0;
		position: relative;
		top: 10px;
		right: 50px;
		border: solid 1px #efefef;
		background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 3px;	
	}
		.form{
	width:90%;
}
	
	.logo {
		margin-top:10px;
	}	
	ul#menu li {
		display: none;
		margin: 0;
	}
	
	#navigation .current {
		display: block!important;
	}
	
	#navigation a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
		color: #000;
	}

	#navigation ul:hover {
		background-image: none;
	}
		
	#navigation ul:hover .current {
		background: url(../images/icon-check.png) no-repeat 10px 7px;
	}

	#navigation ul li:hover a, #navigation ul li.current a {
		color: #DA5049;
		border-bottom:: 0px;
	}
	
	#navigation a, #navigation a:active, #navigation a:visited {
		padding-top:5px;
		height:auto;		
		padding-bottom:5px;
	}	
	#navigation ul li.current a {
		color: #DA5049;
		border-bottom: 1px solid #DA5049;
		background: url(../images/ar.png) no-repeat bottom center;
	}
}	
@media only screen and (max-width: 800px) {
	
	.form{
	width:95%;
}
	
	#home{
	background: url(../images/mainbackground800.jpg) no-repeat center center fixed;
}
	
	.sectionnav{
		display: none;
		
	}
	
	.fixed-right {
        display: none;
        }

	
	.logo{
		margin-left:10px;
		margin-top:10px;
		width: 130px;
		height:50px;
	}
	
	#navigation ul {
		width: 200px;
		padding: 5px 0;
		position: relative;
		top: 10px;
		right: 20px;
		border: solid 1px #efefef;
		background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 3px;		
	}
	
	ul#menu li {
		display: none;
		margin: 0;
	}
	
	#navigation .current {
		display: block!important;
	}
	
	#navigation a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}

	#navigation ul:hover {
		background-image: none;
	}
		
	#navigation ul:hover .current {
		background: url(../images/icon-check.png) no-repeat 10px 7px;
	}

	#navigation ul li:hover a, #navigation ul li.current a {
		border-bottom:: 0px;
	}
	
	#navigation a, #navigation a:active, #navigation a:visited {
		padding-top:5px;
		height:auto;		
		padding-bottom:5px;
	}	
}	




@media only screen and (max-width: 479px) {
	
	.logo {
		margin-left:-10px;
		margin-top:15px;
		width: 130px;
		height:40px;
	}
	
	#navigation ul {
		width: 120px;
		padding: 5px 0;
		position: relative;
		top: 10px;
		right: 10px;
		border: solid 1px #efefef;
		background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
		border-radius: 3px;
	}
	
	ul#menu li {
		display: none;
		margin: 0;
	}
	
	#navigation .current {
		display: block!important;
	}
	
	#navigation a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}

	#navigation ul:hover {
		background-image: none;
	}
	
	#navigation ul:hover .current {
		background: url(../images/icon-check.png) no-repeat 10px 7px;
	}

	#navigation ul li:hover a, #navigation ul li.current a {
		border-top: 0px;
	}
	
	#navigation a, #navigation a:active, #navigation a:visited {
		padding-top:5px;
		height:auto;		
		padding-bottom:5px;
	}	
	
	#contact{
	font-size: 14px;
}
}	



@media only screen and (min-width: 480px) and (max-width: 767px) {
.main {
	width: 420px;
}
.center-home{ 
	margin-top:-60px;
}			
.backgr{
	width: 310px;
	height:160px;
	margin-left:-155px;
	margin-top:-145px;
}
.ca-menu{
    width: 314px;
	height:150px;
	margin-left:-157px;
	margin-top:18px;
}
.ca-menu li{
	width: 58px;
    height: 58px;
}
.ca-icon{
    font-size: 20px;
    line-height: 30px;
}
.ca-menu li:hover .ca-icon{
    font-size: 28px;
}
.ca-main{
    font-size: 10px;
	line-height:30px;
}

}

@media only screen and (min-width: 320px) and (max-width: 479px) {
.main {
	width: 300px;
}
.backgr{
	width: 310px;
	height:160px;
	margin-left:-155px;
	margin-top:-145px;
}
.ca-menu{
    width: 314px;
	height:150px;
	margin-left:-157px;
	margin-top:18px;
}
.ca-menu li{
    width: 58px;
    height: 58px;
}
.ca-icon{
    font-size: 20px;
    line-height: 30px;
}
.ca-menu li:hover .ca-icon{
    font-size: 28px;
}
.ca-main{
    font-size: 10px;
	line-height:30px;
}
}

@media only screen and (max-width: 319px) {
.main {
	width: 220px;
}

#rotator p{
	font-size:18px;
	line-height:26px;
}
.center-home{ 
	margin-top:-60px;
}			
.backgr{
	width: 310px;
	height:160px;
	margin-left:-155px;
	margin-top:-145px;
}
.ca-menu{
    width: 314px;
	height:150px;
	margin-left:-157px;
	margin-top:18px;
}
.ca-menu li{
    width: 58px;
    height: 58px;
}
.ca-icon{
    font-size: 20px;
    line-height: 30px;
}
.ca-menu li:hover .ca-icon{
    font-size: 28px;
}
.ca-main{
    font-size: 10px;
	line-height:30px;
}
}