@charset "utf-8";
@import 'reset.css';
@import 'classes.css';
@import '../fonts/stylesheet.css';

html, body{height:100%;}

body{
	font-family: 'Gotham', serif;
	overflow-x:hidden;
}

input, button, textarea{font-family: 'Gotham', serif;}

a{
	color:inherit;
	text-decoration:none;
	display: inline-block;
}

/*
================================
>>> HEADER
================================
*/

header{
	padding:8px 20px;
	background-color:#fff;
	box-shadow:0 0px 5px rgba(0, 0, 0, 0.3);
	position:relative;
	z-index:10;
}

.ico-share svg {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.ico-share svg path{
	fill:#c4c4c4;
}

.logo{
	display:block;
	width:140px;
}

.logo>img{width:100%; height:auto;}

/*
================================
>>> MAP
================================
*/

.map{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
}

#map{
	width:100%;
	height:100%;
}

/*
================================
>>> SECTION
================================
*/

section.contenido{
	width:70%;
	max-width:720px;
	background-color:#0075ff;
	margin-top:200px;
	min-height:500px;
	position:relative;
	z-index:10;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

section.contenido:before{
    content: '';
    display: block;
    border-bottom: 116px solid #0075ff;
    border-right: 90px solid transparent;
    height: 0;
    width: calc(100% - 90px);
    position: absolute;
    top: -115px;
    left: 0;
}

section.contenido:after{
    content: '';
    display: block;
    width:97px;
    height: 183px;
    position: absolute;
    top: -115px;
    right: 0;
	z-index:0;
	background:url(../images/vertice.png) no-repeat 0 0;
}

section.contenido .section-content{
	color:#fff;
	font-family: 'Freight', serif;
	font-size:18px;
	padding:0 60px 60px;
	position: relative;
    top: -35px;
    overflow: hidden;
	z-index:1;
}

section.contenido .section-content a:after{
	content:'';
	display:block;
	width:100%;
	height:1px;
	background-color:#00ff78;
	opacity: 0.6;
}

section.contenido .section-content .broken-text{
	line-height: 1.7em;
	width:90%;
}

section.contenido .section-content .broken-text p{
	position:relative;
	z-index:11;
}

section.contenido .section-content .broken-text p:after,
section.contenido .section-content .broken-text .pilcrow-end p:after{
	content:'¶';
	color: #194ebf;
    font-size: 1.2em;
    font-family: Arial;
    font-weight: 700;
}

section.contenido .section-content .broken-text .pilcrow-end p:after{color:#333;}

section.contenido .section-content strong{
	color:#00ff78;
}

section.encuesta{
	width:100%;
	background-color:#00ff78;
	box-shadow:inset 0 0 0 17px #fff;
	padding:65px 55px 35px;
	box-sizing:border-box;
	position:relative; 
	z-index:9;
	margin-top:-40px;
}

section.encuesta-completa{display:none;}
section.encuesta-incompleta{padding:130px 55px;}

section.encuesta .rtas{
	overflow:hidden;
}

section.encuesta .rtas>li{
	width:66px;
	height:66px;
	line-height:95px;
	border-radius:50%;
	display:inline-block;
	margin-left:6px;
	border:6px solid transparent;
	background-color:#fff;
	cursor:pointer;
	text-align:center;
}


section.encuesta .rtas>li svg{
	width:auto;
	height:40px;
}

section.encuesta .rtas>li.right{
	border-color:#00d866;
}

section.encuesta .rtas>li.right svg path,
section.encuesta .rtas>li.right svg polygon{
	fill:#3ce18a;
}

section.encuesta .rtas>li.right.active{
	background-color:#00d866;
}

section.encuesta .rtas>li.right.active svg path,
section.encuesta .rtas>li.right.active svg polygon,
section.encuesta .rtas>li.wrong.active svg path,
section.encuesta .rtas>li.wrong.active svg polygon{
	fill:#fff;
}

section.encuesta .rtas>li.wrong{
	border-color:#789f58;
}

section.encuesta .rtas>li.wrong svg path{
	fill:#ff3333;
}

section.encuesta .rtas>li.wrong.active{
	background-color:#789f58;
}


/*
========================
>>> ICONOS
========================
*/

.icono{
	display:inline-block;
	position:relative;
	padding: 7px;
}

.icono>img{display:block;}

.icono>.resize{
	position:absolute;
	width: calc(100% - 14px);
    height: calc(100% - 14px);
	top:7px;
	left:7px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
	box-sizing:border-box;
	visibility:hidden;
}

.icono.animate>.resize{visibility:visible;}

.icono>.resize>.square{
	display:block;
	width:4px;
	height:4px;
	border:1px solid #ff8a00;
	position:absolute;
	
}

.icono>.resize>.circle{
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	border:1px solid #ff8a00;
	position:absolute;
}


.icono>.resize>.circle:before,
.icono>.resize>.circle:after{
	content:'';
	display:block;
	background-color:#ff8a00;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

.icono>.resize>.circle:before{
	width:10px;
	height:1px;
}

.icono>.resize>.circle:after{
	width:1px;
	height:10px;
}


.icono>.resize>.top{top:0;}
.icono>.resize>.bottom{bottom:0;}
.icono>.resize>.middle{top:50%;}

.icono>.resize>.left{left:0;}
.icono>.resize>.right{right:0;}
.icono>.resize>.center{left:50%;}

.icono>.resize>.top.left,
.icono>.resize>.top.center,
.icono>.resize>.middle.left,
.icono>.resize>.middle.center{transform: translate(-50%, -50%);}
.icono>.resize>.top.right{transform: translate(50%, -50%);}

.icono>.resize>.bottom.left,
.icono>.resize>.bottom.center{transform: translate(-50%, 50%);}
.icono>.resize>.bottom.right{transform: translate(50%, 50%);}

.icono>.resize>.middle.right{transform: translate(50%, -50%);}

blockquote{
	text-align:center;
	font-family: 'Gotham', sans-serif;
	font-weight:400;
	font-style:italic;
	color:#00ff78;
	font-size:24px;
	line-height: 1.2em;
}

blockquote>small{
	display:block;
	color:#fff;
	font-size: 0.75em;
}

.circle-container {
    position: relative;
    width: 170px;
    height: 130px;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container .icono {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 50%; left: 50%;
	margin-left: -30px;
    margin-top: -20px;
	
}

.circle-container .icono.pos1 { transform: rotate(18deg) translate(80px) rotate(-18deg); }
.circle-container .icono.pos2 { transform: rotate(60deg) translate(50px) rotate(-60deg); }
.circle-container .icono.pos3 { transform: rotate(115deg) translate(60px) rotate(-115deg); }
.circle-container .icono.pos4 { transform: rotate(160deg) translate(75px) rotate(-160deg); }
.circle-container .icono.pos5 { transform: rotate(205deg) translate(80px) rotate(-205deg); }
.circle-container .icono.pos6 { transform: rotate(250deg) translate(65px) rotate(-250deg); }
.circle-container .icono.pos7 { transform: rotate(292deg) translate(72px) rotate(-292deg); }
.circle-container .icono.pos8 { transform: rotate(337.5deg) translate(90px) rotate(-337.5deg); }

/*
========================
>>> BUTTONS
========================
*/

.btn-container{
	width:360px;
	overflow:hidden;
	display:inline-block;
	float:left;
}

.btn-container>.btn{
	width:49%;
	float:left;
	padding:0;
	margin:0 0.5% 5px;
}



/*
========================
>>> FOOTER
========================
*/

footer{
	background:#303030 url(../images/bg-footer.jpg) no-repeat top center;
	position:relative;
	z-index:10;
}

footer .ico-share svg{
	width:33px;
	height:33px;
}

footer .ico-share svg path{
	fill:#00ff78;
}

.change-show-data{
    position: relative;
    height: 30px;
    float: left;
    width: calc(100% - 360px);
}

.change-show-data > a{
	position:absolute;
	top:0; left:0;
}

.go-tabla,
.go-descr{
	height: 33px;
    line-height: 32px;
	display:inline-block;
}

.go-descr{display:none;}

.go-tabla>img,
.go-descr>img{
	float:left;
	margin-top: 5px;
    margin-right: 5px;
	margin-left:5px;
}

.go-descr>img{ margin-left: 6px;}

.data-tablas{display:none;}

.data-tablas table{
	text-align:center;
	font-size: 21px;
}

.data-tablas table td{
	border-left:1px solid #000;
	padding: 7px 15px;
    vertical-align: middle;
	font-weight: 700;
}

.data-tablas table td:first-child{
	border-left:0;
}

.milestones{overflow:hidden;}

.milestones>li{
    float: left;
    width: 50%;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 3px;
    line-height: 1.3em;
}

/*
=============================
>>> EDIFICIOS
=============================
*/

.edificios{
	position:relative;
}

.edificios:before{
    content: url(../images/bg-edificios.jpg);
    position: absolute;
    left: -60px;
    top: -157px;
    width: 100%;
    height: auto;
}

/*
=====================
>>> TABS
=====================
*/

.tabs-content{
	overflow:hidden;
	position:relative;
}

.tabs-content .row{
	visibility:hidden;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	transition:opacity ease-in-out 0.3s;
}

.tabs-content .row.tab-visible{
	position:relative;
	visibility:visible;
	opacity:1;
}

/*
==========================
>>> SLIDER
==========================
*/

.tooltip_templates{display:none;}

.slider-textos{
	width: 90%;
    margin-left: auto;
    margin-right: auto;
	visibility:hidden;
}

.grados span,
.grados ul{ display:inline-block;}

.grados ul{margin-left:5px;}

.grados ul>li{
	display:inline-block;
}

.grados ul>li>span{
	display:block;
	width:22px;
	height:22px;
	line-height:20px;
	border:1px solid #fff;
	border-radius:50%;
	text-align:center;
}

.slick-arrow{
	width:50px;
	height:100px;
	text-indent:-9999px;
	overflow:hidden;
	background-color:transparent;
	background-position:center;
	background-repeat:no-repeat;
	background-size: 100% auto;
	border:0;
	position:absolute;
	top:50%;
	margin-top:-50px;
	outline:none;
	cursor:pointer;
}

.slick-arrow.slick-prev{
	background-image:url(../images/arrow-left.png);
	left:-20px;
	transform:translateX(-100%);
}

.slick-arrow.slick-next{
	background-image:url(../images/arrow-right.png);
	right:-20px;
	transform:translateX(100%);
}

.marker-tooltip {
    position: absolute;
    width: 460px;
    position: fixed;
	top:50%;
    left: 50%;
    /* transform: translate(50%, -50%); */
    display: none;
    /*margin-left: calc(380px / 2 );*/
}

.marker-tooltip.iconos{
    display: block;
    width: auto;
    transform: translateY(-50%);
    margin-top: 50px;
    margin-left: 60px!important;
}


.marker-tooltip.inicial{
	width:612px;
	height:580px;
}

.marker-tooltip.inicial>img{
	position:absolute;
	transform: translateY(-60px); 
	opacity:0;
}

.marker-tooltip.inicial>.inicial-1{top:0; left:105px;}
.marker-tooltip.inicial>.inicial-2{top:44px; left:397px;}
.marker-tooltip.inicial>.inicial-3{top:59px; left:504px;}
.marker-tooltip.inicial>.inicial-4{top:144px; left:329px;}
.marker-tooltip.inicial>.inicial-5{top:196px; left:328px;}
.marker-tooltip.inicial>.inicial-6{top:314px; left:500px;}
.marker-tooltip.inicial>.inicial-7{top:382px; left:84px;}
.marker-tooltip.inicial>.inicial-8{top:423px; left:313px;}
.marker-tooltip.inicial>.inicial-9{top:147px; left:92px;}
.marker-tooltip.inicial>.inicial-10{top:337px; left:206px;}
.marker-tooltip.inicial>.inicial-11{top:376px; left:303px;}
.marker-tooltip.inicial>.inicial-12{top:215px; left:36px;}
.marker-tooltip.inicial>.inicial-13{top:453px; left:538px;}

.marker-tooltip.inicial>img.animado{
	animation: inicial 0.07s ease-in-out alternate forwards;
	-o-animation: inicial 0.07s ease-in-out alternate forwards;
	-ms-animation: inicial 0.07s ease-in-out alternate forwards;
	-moz-animation: inicial 0.07s ease-in-out alternate forwards;
	-webkit-animation: inicial 0.07s ease-in-out alternate forwards;
	opacity:1;
	transform: translateY(0);
}



.marker-tooltip.intro,
.marker-tooltip.end{
	background-color: rgba(14, 32, 71, 0.8);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	margin-left:0!important;
}

.marker-tooltip.intro>div,
.marker-tooltip.end>div{
	width: 480px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(160px, -50%);
}

.marker-tooltip.marker1{transform: translate(-38px, -113px);}
.marker-tooltip.marker2{transform: translate(-38px, -113px);}
.marker-tooltip.marker3{transform: translate(-38px, -113px);}
.marker-tooltip.marker4{transform: translate(-38px, -113px);}

.marker-tooltip .icono-tooltop{
	margin-right:30px;
	margin-top:30px;
	float:left;
	transform: translateY(-60px); 
	opacity:0;
}

.marker-tooltip .icono-tooltop.animado{
	animation: inicial 0.07s ease-in-out alternate forwards;
	-o-animation: inicial 0.07s ease-in-out alternate forwards;
	-ms-animation: inicial 0.07s ease-in-out alternate forwards;
	-moz-animation: inicial 0.07s ease-in-out alternate forwards;
	-webkit-animation: inicial 0.07s ease-in-out alternate forwards;
	transform: translateY(0px); 
	opacity:1;
}

.marker-tooltip.marker1 .icono-tooltop{width:65px;}
.marker-tooltip.marker2 .icono-tooltop{width:105px; margin-left: -40px;}
.marker-tooltip.marker3 .icono-tooltop{width:115px; margin-left: -50px;}
.marker-tooltip.marker4 .icono-tooltop{width:105px; margin-left: -40px;}

.marker-tooltip .icono-tooltop>img{
	width:100%; height:auto;
}

.marker-tooltip .resaltar{
	background-color:#fff;
	line-height: 1.6em;
    padding: 2px;
}

.marker-tooltip .icono-tooltop + div{
	margin-left:95px;
}

.marker-tooltip .botones > .btn{
	display:inline-block;
	width:170px;
	margin-bottom:5px;
}

.marker-tooltip .botones > .btn.animado{
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
}

.location-confirm{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background-color:#3274ff;
	visibility:visible;
	z-index:100;
	color:#fff;
}

.location-confirm>.preload,
.location-confirm>.question1{
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:100%;
}

.location-confirm>.preload>.pin{
	width:75px;
	margin:0 auto 20px;
}

.location-confirm>.preload>.pin>svg{
	width:100%;
	height:auto;
	
	animation: poinggggg ease-in-out 1.8s;
	animation-iteration-count: infinite;
	transform-origin: 50% 100%;
	-webkit-animation: poinggggg ease-in-out 1.8s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50% 100%;
	-moz-animation: poinggggg ease-in-out 1.8s;
	-moz-animation-iteration-count: infinite;
	-moz-transform-origin: 50% 100%;
	-o-animation: poinggggg ease-in-out 1.8s;
	-o-animation-iteration-count: infinite;
	-o-transform-origin: 50% 100%;
	-ms-animation: poinggggg ease-in-out 1.8s;
	-ms-animation-iteration-count: infinite;
	-ms-transform-origin: 50% 100%;
}

.location-confirm>.question1{
	display:none;
	text-align:left;
}

.location-confirm>.question1>div{
	padding-left:65px;
	padding-right:65px;
}

.location-confirm>.question1 .location{
	background-color:transparent;
	border:0;
	border-bottom:1px solid #000;
	font-size:inherit;
	color:inherit;
	font-family:inherit;
	font-weight:inherit;
	width:100%;
}

.location-confirm>.question1 .input-group{
	overflow:hidden;
}

.location-confirm>.question1 .input-group>div{
	float:left;
	margin-right:15px;
}

.location-confirm>.question1 .btn{
	width:190px;
}

.location-confirm>.question1 .input-container{
	width:70%;
}

.location-confirm>.question1 .input-container label{
	display:block;
	font-weight:500;
	margin-top:5px;
	text-decoration:underline;
	visibility:hidden;
}

@media (max-width: 1435px){
	.location-confirm>.question1 .fsize-28{font-size:20px;}
	.location-confirm>.question1 .input-group.fsize-40{ font-size: 30px;}
} 

@media (max-width: 1125px){
	.location-confirm>.question1 .fsize-28{font-size:18px;}
	.location-confirm>.question1 .input-group.fsize-40{ font-size: 25px;}
} 

@media (max-width: 995px){
	.location-confirm>.question1 .input-group>div{
		float:none; 
		margin-right:0;
		width:100%;
	}
}

.show-mobile{display:none;}
@media (max-width: 768px) {
	
	.hide-mobile{display:none;}
	.show-mobile{display:block;}
	
	.location-confirm>.question1>div{
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.location-confirm>.question1 .fsize-28{font-size:18px;}
	.location-confirm>.question1 .input-group.fsize-40{font-size:20px;}
	
	.location-confirm>.question1 .input-group>div{float:none; margin-right:0;}
	
	.location-confirm>.question1 .input-container{width:100%;}
	
	.location-confirm>.question1 .btn{margin-bottom:5px;}
	
	.map{
		position:relative;
	}
	
	.location-confirm{height:105vh;}
	
	section.contenido{
		width: 100%;
		max-width: none;
		margin-top: 0;
	}
	
	section.contenido:before,
	section.contenido:after{display:none;}
	
	section.contenido .section-content{
		padding: 30px;
		top:0;
	}
	
	section.contenido .section-content h1,
	.encuesta h1{font-size:30px;}
	
	section.contenido .section-content .broken-text{
		width:100%;
	}
	
	.slick-arrow.slick-prev{ transform: scale(0.65) translateX(-100%);}
	.slick-arrow.slick-next{ transform: scale(0.65) translateX(100%);}
	
	.marker-tooltip{
		position:absolute;
		width:90%;
	}
	
	.marker-tooltip.intro, .marker-tooltip.end{
		width:100%;
	}
	
	.marker-tooltip.intro>div, .marker-tooltip.end>div{
		transform: translate(-50%, -50%);
		width: 90%;
	}
	.marker-tooltip.iconos{display:none!important;}
	.marker-tooltip.marker1,
	.marker-tooltip.marker2,
	.marker-tooltip.marker3,
	.marker-tooltip.marker4 {    transform: translate(-22%, -53%);}
	
	.marker-tooltip.marker1 .icono-tooltop{}
	.marker-tooltip.marker2 .icono-tooltop{width: 95px; margin-left: -10px; margin-right: 10px;}
	.marker-tooltip.marker3 .icono-tooltop{width: 85px; margin-left: -5px; margin-right: 10px;}
	.marker-tooltip.marker4 .icono-tooltop{width: 85px; margin-left: -5px; margin-right: 10px;}
	
	footer{
		padding-left: 25px;
		padding-right: 25px;
	}
	
	footer .fsize-35,
	.encuesta .fsize-35{font-size:25px;}
	
	.btn-special:before, .btn-special:after{font-size: 15px;}
	
	.btn-special:before {
		left: 50%;
		transform: translateX(-50%);
		top: -40px;
	}
	
	.btn-special:after {
		right: 50%;
		top: 40px;
		transform: translateX(50%);
	}
	
	section.encuesta{padding:35px;}
	
	.encuesta .col-5{
		text-align: center!important;
		margin-top: 10px;
	}
	
	.btn-container{
		width:100%;
		float:none;
	}
	
	.change-show-data{
		float: none;
		width: 100%;
	}
	
	section.encuesta .img-encuesta{width:100%;}
	
	.milestones>li {
		float: none;
		width: 100%;
	}
	
	.table-responsive {
		width: 100%;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	
	.marker-tooltip .fsize-14{font-size:11px;}
	
	.logo>img{
		max-width: 100%;
		width: 75%;
		float: right;
	}
	
	.marker-tooltip .mob-full{
		width: calc(100% + 65px);
		transform: translateX(-65px);
	}
	
	.marker-tooltip .mob-full>.btn{width:100%;}
	
	.btn-container>.btn {
		width: 100%;
		float: none;
	}
	
}


/*
===========================================
>>> ANIMACIONES
===========================================
*/

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}


@keyframes inicial {
  0% {transform: translateY(-60px); opacity:0;}
  30% {opacity:1;}
  100% {transform: translateY(0);}
}

@-o-keyframes inicial {
  0% {transform: translateY(-60px); opacity:0;}
  30% {opacity:1;}
  100% {transform: translateY(0);}
}

@-ms-keyframes inicial {
  0% {transform: translateY(-60px); opacity:0;}
  30% {opacity:1;}
  100% {transform: translateY(0);}
}

@-moz-keyframes inicial {
  0% {transform: translateY(-60px); opacity:0;}
  30% {opacity:1;}
  100% {transform: translateY(0);}
}

@-webkit-keyframes inicial {
  0% {transform: translateY(-60px); opacity:0;}
  30% {opacity:1;}
  100% {transform: translateY(0);}
}


@keyframes poinggggg{
  0% { transform:  rotate(0deg) ; }
  5% {  transform:  rotate(-25deg) ; }
  9% { transform:  rotate(32deg) ; }
  14% {  transform:  rotate(-15deg) ; }
  19% {  transform:  rotate(13deg) ; }
  24% { transform:  rotate(-11deg) ; }
  28% { transform:  rotate(9deg) ; }
  34% { transform:  rotate(-4deg) ; }
  39% { transform:  rotate(6deg) ; }
  45% { transform:  rotate(-1deg) ;  }
  51% { transform:  rotate(1deg) ; }
  58% {}
  100% { transform:  rotate(0deg) ; }
}

@-moz-keyframes poinggggg{
  0% { -moz-transform:  rotate(0deg) ; }
  5% {  -moz-transform:  rotate(-25deg) ; }
  9% { -moz-transform:  rotate(32deg) ; }
  14% {  -moz-transform:  rotate(-15deg) ; }
  19% {  -moz-transform:  rotate(13deg) ; }
  24% { -moz-transform:  rotate(-11deg) ; }
  28% { -moz-transform:  rotate(9deg) ; }
  34% { -moz-transform:  rotate(-4deg) ; }
  39% { -moz-transform:  rotate(6deg) ; }
  45% { -moz-transform:  rotate(-1deg) ;  }
  51% { -moz-transform:  rotate(1deg) ; }
  58% {}
  100% { -moz-transform:  rotate(0deg) ; }
}

@-webkit-keyframes poinggggg {
  0% { -webkit-transform:  rotate(0deg) ; }
  5% {  -webkit-transform:  rotate(-25deg) ; }
  9% { -webkit-transform:  rotate(32deg) ; }
  14% {  -webkit-transform:  rotate(-15deg) ; }
  19% {  -webkit-transform:  rotate(13deg) ; }
  24% { -webkit-transform:  rotate(-11deg) ; }
  28% { -webkit-transform:  rotate(9deg) ; }
  34% { -webkit-transform:  rotate(-4deg) ; }
  39% { -webkit-transform:  rotate(6deg) ; }
  45% { -webkit-transform:  rotate(-1deg) ;  }
  51% { -webkit-transform:  rotate(1deg) ; }
  58% {}
  100% { -webkit-transform:  rotate(0deg) ; }
}

@-o-keyframes poinggggg {
  0% { -o-transform:  rotate(0deg) ; }
  5% {  -o-transform:  rotate(-25deg) ; }
  9% { -o-transform:  rotate(32deg) ; }
  14% {  -o-transform:  rotate(-15deg) ; }
  19% {  -o-transform:  rotate(13deg) ; }
  24% { -o-transform:  rotate(-11deg) ; }
  28% { -o-transform:  rotate(9deg) ; }
  34% { -o-transform:  rotate(-4deg) ; }
  39% { -o-transform:  rotate(6deg) ; }
  45% { -o-transform:  rotate(-1deg) ;  }
  51% { -o-transform:  rotate(1deg) ; }
  58% {}
  100% { -o-transform:  rotate(0deg) ; }
}

@-ms-keyframes poinggggg {
  0% { -ms-transform:  rotate(0deg) ; }
  5% {  -ms-transform:  rotate(-25deg) ; }
  9% { -ms-transform:  rotate(32deg) ; }
  14% {  -ms-transform:  rotate(-15deg) ; }
  19% {  -ms-transform:  rotate(13deg) ; }
  24% { -ms-transform:  rotate(-11deg) ; }
  28% { -ms-transform:  rotate(9deg) ; }
  34% { -ms-transform:  rotate(-4deg) ; }
  39% { -ms-transform:  rotate(6deg) ; }
  45% { -ms-transform:  rotate(-1deg) ;  }
  51% { -ms-transform:  rotate(1deg) ; }
  58% {}
  100% { -ms-transform:  rotate(0deg) ; }
}