.banr{widows:100%; background:#FFFFFF}
.banrm{widows:100%; background:#FFFFFF ;}

.banr2{widows:100%; background:url(../images/001_03.png) repeat-x bottom}

*,

*:after,

*::before {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}


@font-face {

  font-family: "ww";

  src: url("font/12.eot?") format("eot"),

url("font/12.woff") format("woff"),

url("font/12.ttf") format("truetype");

}
.c9{ padding:5px; color:#000; font-family:"ww", tahoma; font-size:18px; text-align:justify; text-decoration:none}

.mobar{
	  color:#fff; background:#000; width:100%; margin-top:-20px;
	 font-family:"ww",tahoma;
	 height:20vw;
	 opacity:0.8;
	 font-size:5vw;
	 margin-bottom:10px;}

.copyr{

	font-family: "ww";

	font-size:12px;

	padding:5px;

	color:#3c4634;

	

	}







nav a {

	position: relative;

	display: inline-block;

	margin:5px;

	outline: none;

	color: #04aafd;

	text-decoration: none;

	text-transform: uppercase;

	letter-spacing: 1px;

	 font-family: "ww";

	text-shadow: 0 0 1px rgba(255,255,255,0.3);

	font-size: 1.35em;

}



nav a:hover,

nav a:focus {

	outline: none;
	

}







/* Effect 21: borders slight translate */

.cl-effect-21 a {

	padding: 8px;

	color: #04aafd;
 
	 font-family: "ww";

	text-shadow: none;

	font-style:oblique;

	-webkit-transition: color 0.3s;

	-moz-transition: color 0.3s;

	transition: color 0.3s;

}


.welcm{
	padding:20px;
	color: #04aafd;

	text-decoration: none;

	text-transform: uppercase;

	letter-spacing: 1px;

	 font-family: "ww";

	text-shadow: 0 0 1px rgba(255,255,255,0.3);

	font-size:4vw;}



.cl-effect-21 a::before,

.cl-effect-21 a::after {

	position: absolute;

	left: 0;

	width: 100%;

	height: 2px;

	background: #04aafd;

	content: '';

	opacity: 0;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

	-moz-transition: opacity 0.3s, -moz-transform 0.3s;

	transition: opacity 0.3s, transform 0.3s;

	-webkit-transform: translateY(-10px);

	-moz-transform: translateY(-10px);

	transform: translateY(-10px);

}



.cl-effect-21 a::before {

	top: 0;

	-webkit-transform: translateY(-10px);

	-moz-transform: translateY(-10px);

	transform: translateY(-10px);

}



.cl-effect-21 a::after {

	bottom: 0;

	-webkit-transform: translateY(10px);

	-moz-transform: translateY(10px);

	transform: translateY(10px);

}



.cl-effect-21 a:hover,

.cl-effect-21 a:focus {

	color: #04aafd;

}



.cl-effect-21 a:hover::before,

.cl-effect-21 a:focus::before,

.cl-effect-21 a:hover::after,

.cl-effect-21 a:focus::after {

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}





@charset "utf-8";

 .slider1 div { position: relative; margin: 0px; padding: 0px; }

 

   .share-icon {

                    display: inline-block;

                    float: left;

                    margin: 4px;

                    width: 32px;

                    height: 32px;

                    cursor: pointer;

                    vertical-align: middle;

                    background-image: url(../img/share/share-icons.png);

                }



                .share-facebook {

                    background-position: 0px 0px;

                }



                    .share-facebook:hover {

                        background-position: 0px -40px;

                    }



        .share-twitter {

            background-position: -40px 0px;

        }



            .share-twitter:hover {

                background-position: -40px -40px;

            }



        .share-pinterest {

            background-position: -80px 0px;

        }



            .share-pinterest:hover {

                background-position: -80px -40px;

            }



                .share-linkedin {

                    background-position: -240px 0px;

                }



                    .share-linkedin:hover {

                        background-position: -240px -40px;

                    }





                .share-googleplus {

                    background-position: -120px 0px;

                }



                    .share-googleplus:hover {

                        background-position: -120px -40px;

                    }





        .share-stumbleupon {

            background-position: -360px 0px;

        }



            .share-stumbleupon:hover {

                background-position: -360px -40px;

            }



                .share-email {

                    background-position: -320px 0px;

                }



                    .share-email:hover {

                        background-position: -320px -40px;

                    }

					

.captionOrange, .captionBlack

        {

            color: #fff;

				font-family: 'ww', Arial, sans-serif;

            font-size: 20px;

            line-height: 30px;

            text-align: center;

            border-radius: 4px;

        }

        .captionOrange

        {

            background: #5cb8e6;

				font-family: 'ww', Arial, sans-serif;

            background-color: rgba(29, 184, 230, 0.6);

        }

        .captionBlack

        {

        	font-size:16px;

            background: #000;

            background-color: rgba(0, 0, 0, 0.4);

        }

        a.captionOrange, A.captionOrange:active, A.captionOrange:visited

        {

        	color: #ffffff;

			font-family: 'ww', Arial, sans-serif;

        	text-decoration: none;

        }

        a.captionOrange:hover

        {

            color: #eb5100;

            text-decoration: underline;

            background-color: #eeeeee;

            background-color: rgba(238, 238, 238, 0.7);

        }

        .bricon

        {

            background: url(../img/browser-icons.png);

        }

		

		     /* jssor slider bullet navigator skin 03 css */

            /*

            .jssorb03 div           (normal)

            .jssorb03 div:hover     (normal mouseover)

            .jssorb03 .av           (active)

            .jssorb03 .av:hover     (active mouseover)

            .jssorb03 .dn           (mousedown)

            */

            .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av

            {

                background: url(../img/b03.png) no-repeat;

                overflow:hidden;

                cursor: pointer;

            }

            .jssorb03 div { background-position: -5px -4px; }

            .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }

            .jssorb03 .av { background-position: -65px -4px; }

            .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }

			

			 /* jssor slider arrow navigator skin 20 css */

            /*

            .jssora20l              (normal)

            .jssora20r              (normal)

            .jssora20l:hover        (normal mouseover)

            .jssora20r:hover        (normal mouseover)

            .jssora20ldn            (mousedown)

            .jssora20rdn            (mousedown)

            */

            .jssora20l, .jssora20r, .jssora20ldn, .jssora20rdn

            {

            	position: absolute;

            	cursor: pointer;

            	display: block;

                background: url(../img/a20.png) no-repeat;

                overflow:hidden;

            }

            .jssora20l { background-position: -3px -33px; }

            .jssora20r { background-position: -63px -33px; }

            .jssora20l:hover { background-position: -123px -33px; }

            .jssora20r:hover { background-position: -183px -33px; }

            .jssora20ldn { background-position: -243px -33px; }

            .jssora20rdn { background-position: -303px -33px; }







.ch-grid {

	margin: 2px;

	padding: 0;

	list-style: none;

	display: block;

	text-align: center;

	width: 100%;

	}



.ch-grid:after,

.ch-item:before {

	content: '';

    display: table;

	

}



.ch-grid:after {

	clear: both;

}



.ch-grid li {

	width: 220px;

	height: 220px;

	display: inline-block;

	margin: 10px;

	 

	

}







.ch-item {

	width: 100%;

	height: 100%;

	border-radius: 50%;

	position: relative;

	cursor: default;

 

	-webkit-perspective: 900px;

	-moz-perspective: 900px;

	-o-perspective: 900px;

	-ms-perspective: 900px;

	perspective: 900px;

}

.ch-info{

	position: absolute;

	width: 100%;

	height: 100%;

	 

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	-o-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d;

	transform-style: preserve-3d;

}

.ch-info > div {

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

	border-radius: 50%;

	border:4px solid #FFF;

	background-position: center center;

	-webkit-transition: all 0.4s linear;

	-moz-transition: all 0.4s linear;

	-o-transition: all 0.4s linear;

	-ms-transition: all 0.4s linear;

	transition: all 0.4s linear;

	-webkit-transform-origin: 50% 0%;

	-moz-transform-origin: 50% 0%;

	-o-transform-origin: 50% 0%;

	-ms-transform-origin: 50% 0%;

	transform-origin: 50% 0%;

}



.ch-info .ch-info-front {

	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);

}



.ch-info .ch-info-back {

	-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	 

	opacity: 0;

}





.ch-info h3 {

	color: #fff;

	margin: 0 15px;

	padding: 50px 0 0 0;

 	font-family: 'ww', Arial, sans-serif;

}



.ch-info p {

	color: #fff;

	padding: 10px 5px;

	font-style: italic;

	margin: 0 30px;

	font-size: 12px;

	

}



.ch-info p a {

	color: #fff;

	text-decoration:none;

	font-style: normal;

	text-transform: uppercase;

	font-size: 10px;

	letter-spacing: 1px;

	padding-top: 4px;

	font-family: 'ww', Arial, sans-serif;

}



.ch-info p a:hover {

	color: #fff222;

	color: rgba(255,242,34, 0.8);

}



.ch-item:hover .ch-info-front {

	-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	opacity: 0;

}



.ch-item:hover .ch-info-back {

	-webkit-transform: rotate3d(1,0,0,0deg);

	-moz-transform: rotate3d(1,0,0,0deg);

	-o-transform: rotate3d(1,0,0,0deg);

	-ms-transform: rotate3d(1,0,0,0deg);

	transform: rotate3d(1,0,0,0deg);

	opacity: 1;

}

.title{ color: #f80948;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:30px;

	}
	.titlem{ color: #f80948;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:5vw;

	}



.date{

	color: #07a7f7;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:20px;

	text-align:justify;

}
.datem{

	color: #07a7f7;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:5vw;

	text-align:justify;

}



.desc{ color: #000;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:20px;

	text-align:justify;

	}
	
	
	
.descm{ color: #000;

	font-family: 'ww', Arial, sans-serif;

    text-decoration: none;

	font-size:5vw;

	text-align:justify;

	}







 



  

	 









 

 

.fish{

	height: 230px;

	left: 200px;

	position: absolute;

	top: 55%;

	width: 290px;

	z-index: 90;

	left: 200px;

	z-index: 100;

	animation:swim 100s infinite linear;

	/*firefox*/

	-moz-animation:swim 100s infinite linear;

	/*webkit*/

	-webkit-animation:swim 100s infinite linear;

	

}

@keyframes swim{

	from{

		left:90%;

	}

	20%{

		left:0;

		transform:scaleX(1);

		z-index:90;

	}

	20.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	21%{

		left:80px;

	}

	42%{

		left:60%;

	}

	50%{

		z-index:28;

		top:30%;

		left:70%;

		transform:scaleX(1);

	}

	50.5%{

		transform:scaleX(1);

		z-index:100;

		left:75%;

		top:40%;

	}

	51%{

		left:50%px;

		z-index:150;

	}

	60%{

		left:30%;

		z-index:150;

	}

	64%{

		left:20%;

		z-index:150;

	}

	66%{

		left:80px;

		z-index:150;

	}

	69%{

		left:-30px;

		z-index:150;

	}

	70%{

		top:15%;

		left:-30px;

		transform:scaleX(1);

		z-index:90;

	}

	70.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	71%{

		left:40px;

	}

	80%{

		left:60%;

	}

	81%{

		left:65%;

		top:45%;

	}

	82%{

		left:76%;

		transform:scaleX(1);

	}

	82.5%{

		transform:scaleX(1);

		top:45%;

		left:77%;

	}

	84%{

		top:50%;

		left:70%;

		z-index:28;

	}

	88%{

		top:60%;

		left:75%;

		z-index:28;

	}

	to{

		left:80%;

	}

}

@-moz-keyframes swim{

	from{

		left:80%;

	}

	20%{

		left:0;

		transform:scaleX(1);

		z-index:190;

	}

	20.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	21%{

		left:80px;

	}

	42%{

		left:60%;

	}

	50%{

		z-index:28;

		top:30%;

		left:70%;

		transform:scaleX(1);

	}

	50.5%{

		transform:scaleX(1);

		z-index:100;

		left:75%;

		top:40%;

	}

	51%{

		left:50%px;

		z-index:150;

	}

	60%{

		left:30%;

		z-index:150;

	}

	64%{

		left:20%;

		z-index:150;

	}

	66%{

		left:80px;

		z-index:150;

	}

	69%{

		left:-30px;

		z-index:150;

	}

	70%{

		top:15%;

		left:-30px;

		transform:scaleX(1);

		z-index:90;

	}

	70.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	71%{

		left:40px;

	}

	80%{

		left:60%;

	}

	81%{

		left:65%;

		top:45%;

	}

	82%{

		left:76%;

		transform:scaleX(1);

	}

	82.5%{

		transform:scaleX(1);

		top:45%;

		left:77%;

	}

	84%{

		top:50%;

		left:70%;

		z-index:28;

	}

	88%{

		top:60%;

		left:75%;

		z-index:28;

	}

	to{

		left:80%;

	}

}

@-webkit-keyframes swim{

	from{

		left:80%;

	}

	20%{

		left:0;

		transform:scaleX(1);

		z-index:90;

	}

	20.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	21%{

		left:80px;

	}

	42%{

		left:60%;

	}

	50%{

		z-index:28;

		top:30%;

		left:70%;

		transform:scaleX(1);

	}

	50.5%{

		transform:scaleX(1);

		z-index:100;

		left:75%;

		top:40%;

	}

	51%{

		left:50%px;

		z-index:150;

	}

	60%{

		left:30%;

		z-index:150;

	}

	64%{

		left:20%;

		z-index:150;

	}

	66%{

		left:80px;

		z-index:150;

	}

	69%{

		left:-30px;

		z-index:150;

	}

	70%{

		top:15%;

		left:-30px;

		transform:scaleX(1);

		z-index:90;

	}

	70.5%{

		transform:scaleX(1);

		z-index:10;

		left:-30px;

	}

	71%{

		left:40px;

	}

	80%{

		left:60%;

	}

	81%{

		left:65%;

		top:45%;

	}

	82%{

		left:76%;

		transform:scaleX(1);

	}

	82.5%{

		transform:scaleX(1);

		top:45%;

		left:77%;

	}

	84%{

		top:50%;

		left:70%;

		z-index:28;

	}

	88%{

		top:60%;

		left:75%;

		z-index:28;

	}

	to{

		left:80%;

	}

}



 

        .stage {

            position: absolute;

            top: 30%;

            left: 0;

            width: 100%;

            

            height: 100%;

            overflow: hidden;

            z-index: 100;

        }

        .far-clouds {

            background: transparent url(../img/far-clouds.png) 305px 102px repeat-x ;top:470px;

        }

        .near-clouds {

            background: transparent url(../img/near-clouds.png) 305px 162px repeat-x; top:600px

        }

        .mainContent{

			width:100%;

            position: absolute;

            top: 0;

            left: 0;

            z-index: 101;    

        }

     


 #dowar{ width:100% ; max-width:1050px}
 

 

 

	 
	 


.chm-grid {

	margin: 2px;

	padding: 0;

	list-style: none;

	display: block;

	text-align: center;

	width: 100%;

	}



.chm-grid:after,

.chm-item:before {

	content: '';

    display: table;

	

}



.chm-grid:after {

	clear: both;

}



.chm-grid li {

	width: 220px;

	height: 220px;

	display: inline-block;

	margin: 10px;

	 

	

}







.chm-item {

	width: 100%;

	height: 100%;

	border-radius: 50%;

	position: relative;

	cursor: default;

 

	-webkit-perspective: 900px;

	-moz-perspective: 900px;

	-o-perspective: 900px;

	-ms-perspective: 900px;

	perspective: 900px;

}

.chm-info{

	position: absolute;

	width: 100%;

	height: 100%;

	 

	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	-o-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d;

	transform-style: preserve-3d;

}

.chm-info > div {

	display: block;

	position: absolute;

	width: 100%;

	height: 100%;

	border-radius: 50%;

	border:4px solid #FFF;

	background-position: center center;

	-webkit-transition: all 0.4s linear;

	-moz-transition: all 0.4s linear;

	-o-transition: all 0.4s linear;

	-ms-transition: all 0.4s linear;

	transition: all 0.4s linear;

	-webkit-transform-origin: 50% 0%;

	-moz-transform-origin: 50% 0%;

	-o-transform-origin: 50% 0%;

	-ms-transform-origin: 50% 0%;

	transform-origin: 50% 0%;

}



.chm-info .ch-info-front {

	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);

}



.chm-info .ch-info-back {

	-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

	 

	opacity: 0;

}





.chm-info h3 {

	color: #fff;

	margin: 0 15px;

	padding: 50px 0 0 0;

 	font-family: 'ww', Arial, sans-serif;

}



.chm-info p {

	color: #fff;

	padding: 10px 5px;

	font-style: italic;

	margin: 0 30px;

	font-size: 12px;

	

}



.chm-info p a {

	color: #fff;

	text-decoration:none;

	font-style: normal;

	text-transform: uppercase;

	font-size: 10px;

	letter-spacing: 1px;

	padding-top: 4px;

	font-family: 'ww', Arial, sans-serif;

}



.chm-info p a:hover {

	color: #fff222;

	color: rgba(255,242,34, 0.8);

}



.chm-item:hover .ch-info-front {

	-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

	opacity: 0;

}



.chm-item:hover .ch-info-back {

	-webkit-transform: rotate3d(1,0,0,0deg);

	-moz-transform: rotate3d(1,0,0,0deg);

	-o-transform: rotate3d(1,0,0,0deg);

	-ms-transform: rotate3d(1,0,0,0deg);

	transform: rotate3d(1,0,0,0deg);

	opacity: 1;

}