@charset "UTF-8";
/* CSS Document */
body{margin:0;font-family: 'Roboto', sans-serif;}
body>div { overflow-x: hidden }
body.modal-open>div {
    overflow: hidden;
}
figure{margin:0;}
img{width:100%;}
@font-face {
    font-family: 'bignoodletitlingregular';
    src: url('font/big_noodle_titling-webfont.woff2') format('woff2'),
         url('font/big_noodle_titling-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@-moz-keyframes spin { 100% { -moz-transform: rotate(30deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(30deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(30deg); transform:rotate(30deg); } }


.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;color:#fff !important;
}

.whatsapp-icon {
  margin-top:13px;
}

h1,h2,h3{font-family: 'bignoodletitlingregular' !important;font-size:2.2em !important;}
footer h2{font-size:3.5em !important;}
h1{text-indent:-9999px;}
header{position:relative;overflow:hidden;padding-bottom:30px;}
header figure{position:relative;width:83%;max-width:600px;margin:0 auto;overflow:hidden;}
header figure::before{content:"";background-image:url(images/chupamirto_producciones_logo_ala.svg);background-position:left top;background-size:100%;position:absolute;width:100%;height:100%;z-index:1;transform-origin: 39.7% 40.7% ;
 -webkit-animation:spin .1s ease-in-out infinite alternate-reverse;
    -moz-animation:spin .1s ease-in-out inifinite alternate-reverse;
    animation:spin .1s ease-in-out infinite alternate-reverse;}
header p{position:relative;z-index:3;text-align:center;margin-bottom:100px;}
header p a:link,header p a:visited{padding:15px 25px;font-size:1.5em;font-weight:bold;color:#001e6d;border:#001e6d 5px solid;text-decoration:none;}
header p a:hover{background-color:#ffd100;-webkit-transition: background-color .5s;-moz-transition: background-color .5s;-o-transition: background-color .5s;transition: background-color .5s;}
header video{width:100%;position:absolute;top:0;z-index:-1;opacity:.7;}

section{padding:50px 0;color:#fff;font-size:1.5em;text-align:center;}
section .contenido{margin:0 auto;max-width:1200px;padding:0 15px;}
h2{ text-transform: uppercase;letter-spacing:10px;}
#quienes{background-color:#001e6d;position:relative;margin-bottom:100px;text-align:left;}
#quienes h2{text-align:center;}
#quienes::before{content: '';width: 0;height: 0;position:absolute;top:-65px;left:0;border-style: solid;border-width: 65px 0 0 calc(100vw);border-color: transparent transparent transparent #001e6d;}
#quienes::after{content: '';width: 0;height: 0;position:absolute;top:100%;left:0;border-style: solid;border-width: 65px calc(100vw)  0 0;border-color:  #001e6d transparent transparent transparent;
}
#quienes article{padding-left:0;}
article{width:50%;padding:20px;}
#galeria{width:100%;text-align:center;}
h3{color:#ffd100; text-transform: uppercase;letter-spacing:10px;}
.flex-container {
  display: flex;
}
.slider.responsive:before, .slider.responsive:after{pointer-events: none;}
.slick-dots li button{display:none !important;}

#equipo{background-color:#82c840;padding-bottom:0;position:relative;margin-top:100px;margin-bottom:100px;}
#equipo::before{content: '';width: 0;height: 0;position:absolute;top:-65px;left:0;border-style: solid;border-width: 0 0 65px calc(100vw);border-color: transparent transparent #e10050 transparent ;border-width: 65px 0 0 calc(100vw);border-color: transparent transparent transparent #82c840;}
#equipo::after{content: '';width: 0;height: 0;position:absolute;top:100%;left:0;border-style: solid;border-width: 0 calc(100vw)  65px 0;border-color:  transparent #e10050 transparent transparent;border-width: 65px calc(100vw)  0 0;border-color:  #82c840 transparent transparent transparent;}
#equipo article{width:100%;text-align:left;color:#000;padding-top:0;}
#equipo ul{margin:0;padding:0;font-size:.8em;}
#equipo h3{margin-bottom:20px;font-size:1.5em !important;letter-spacing:normal}

#lista{margin-top:40px !important;background-color:transparent !important;padding:15px 25px !important;font-weight:bold!important;color:#FFF!important;border:#fff 5px solid!important;text-decoration:none!important;font-size:1.1em !important;}
#lista:hover{background-color:#001e6d !important;-webkit-transition: background-color .5s!important;-moz-transition: background-color .5s!important;-o-transition: background-color .5s!important;transition: background-color .5s!important;}
.modal{color:#000 !important;}
.modal-footer .btn-secondary{background-color:#001e6d !important;color:#fff !important;opacity:.7;}
.modal-footer .btn-secondary:hover{opacity:1;}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 11))}
}
section #equipo{width:100%;background:#fff;margin-top:70px;}
.slider {background: white;height: 100px;margin: auto;overflow:hidden;position: relative;width: 100%;max-width:1200px;}
.slider::before,.slider::after {background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);content: "";height: 100px;position: absolute;width: 200px;z-index: 2;}
.slider::after {right: 0;top: 0;transform: rotateZ(180deg);}
.slider::before {left: 0;	top: 0;}
.slide-track {animation: scroll 40s linear infinite;display: flex;width: calc(250px * 21);}
.slides{height: 100px;width: 250px;}

#adicionales{background:#85238e;position:relative;margin-top:70px;}
#adicionales::before{content: '';width: 0;height: 0;position:absolute;top:-65px;left:0;border-style: solid;border-width: 65px 0 0 calc(100vw);border-color: transparent transparent transparent #82c840;

border-width: 0 0 65px calc(100vw);border-color: transparent transparent #85238e transparent ;}
#adicionales::after{content: '';width: 0;height: 0;position:absolute;top:100%;left:0;border-style: solid;border-width: 0 calc(100vw)  65px 0;border-color:  transparent #85238e transparent transparent;}
#adicionales ul{max-width:900px; list-style-type: none;padding:0;margin:0 auto;margin-top:20px;}
#adicionales li{width:105px;font-size:.8em;display:inline-block;margin-top:20px;height:150px;}
#adicionales li:nth-of-type(1):before{content:url(images/produccion.png);}
#adicionales li:nth-of-type(2):before{content:url(images/data.png);}
#adicionales li:nth-of-type(3):before{content:url(images/video.png);}
#adicionales li:nth-of-type(4):before{content:url(images/steady.png);}
#adicionales li:nth-of-type(5):before{content:url(images/microphone.png);}
#adicionales li:nth-of-type(6):before{content:url(images/personal.png);}
#adicionales li:nth-of-type(7):before{content:url(images/direccion.png);}
#adicionales li:nth-of-type(8):before{content:url(images/camera.png);}
#adicionales li:nth-of-type(9):before{content:url(images/guion.png);}
#adicionales li:nth-of-type(10):before{content:url(images/mask.png);}
#adicionales li:nth-of-type(11):before{content:url(images/location.png);}
#adicionales li:nth-of-type(12):before{content:url(images/edicion.png);}
#adicionales li:nth-of-type(13):before{content:url(images/arte.png);}
#adicionales li:nth-of-type(14):before{content:url(images/color.png);}
#adicionales li:nth-of-type(15):before{content:url(images/audio.png);}

#servicios{background:#e10050;position:relative;margin-top:100px;padding-top:10px;height:700px}
#servicios::before{content: '';width: 0;height: 0;position:absolute;top:-65px;left:0;border-style: solid;border-width: 0 0 65px calc(100vw);border-color: transparent transparent #e10050 transparent ;}
#servicios::after{content: '';width: 0;height: 0;position:absolute;top:100%;left:0;border-style: solid;border-width: 0 calc(100vw)  65px 0;border-color:  transparent #e10050 transparent transparent;}
.kc-wrap{max-width:1200px;margin:0 auto;margin-top:300px;}
.kc-horizon {visibility:hidden;} 
#nav-buts {
    position: relative;
    bottom: 10px;
	z-index:10;
}
.nav-but-left, .nav-but-right {
    width: 40px;
    height: 40px;
    position:absolute;
    color: #fff;
    font-size: 16px;
	text-align: center;
	background-color: #001e6d;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
    cursor: pointer;
}	
.nav-but-left:hover,.nav-but-right:hover{background-color:#ffc700;}
.nav-but-left{left:8px;}
#nav-buts p{position:absolute;top:-12px;font-size:1.5em;}
.nav-but-left p{margin-top:10px;left:10px;}
.nav-but-right{right:5px;}
.nav-but-right p{margin-top:10px;right:10px;}
.kc-item {width:100%;height:300px;
	visibility:hidden;
    position:absolute;
	left:0;
	border:none;
	 -webkit-tap-highlight-color:rgba(0,0,0,0);
}  
.kc-shadow-right {
    left:100% !important;
    background-image:url(images/main/shadow_right.png);
}
.kc-shadow-bottom { 
    width:100% !important;
    height:10% !important;
    position:absolute !important;
	    top:100% !important;
	   left:0px !important;
    background-image:url(images/main/shadow_bottom.png);
} 
.kc-shadow-left,.kc-shadow-right {
	width:10% !important;
    height:100% !important;
    position:absolute !important;
	   top:0% !important; 
	left:-10% !important;   
    background-image:url(images/main/shadow_left.png);
} /*Sombrado izquierdo del carrusel (parte del Javascript)*/
@-moz-document url-prefix() { 
    .kc-shadow-bottom,.kc-shadow-left,.kc-shadow-right {
         outline: 1px solid transparent;
    }
    .kc-reflection {
         outline: 1px solid transparent;
    }
}
.kc-reflection {
	    width:100%;
    height:0px;
    position:absolute;
	    top:0px;
	  left:0px;
} 
.kc-horizon+div{visibility:hidden !important;}

footer{text-align:center;background:#ffc700;color:#000;padding-top:100px;}
footer p{font-size:1.5em;}
footer>p:nth-of-type(2):before{content:url(images/phone.png);margin-right:10px}
footer>p:nth-of-type(3):before{content:url(images/mail.png);margin-right:10px}
footer div p{display:inline-block;margin-top:15px;}
footer a,footer a:link, footer a:visited{color:#000; text-decoration:underline;}
footer a:hover{opacity:.7;}
footer form{margin-bottom:30px;}
form label{margin-top:15px;margin-bottom:0px;}
footer div p a{margin:0 auto;text-indent:-9999px;width:60px;height:60px; text-indent: -9999px;
    display:block;opacity:1;transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;-ms-transition:opacity .5s;}
footer div p  a:hover{opacity:.7;}
footer div p:nth-of-type(1) a{background:url(images/facebook.png) left top no-repeat;}
footer div p:nth-of-type(2) a{background:url(images/instagram.png) left top no-repeat;}
footer div p:nth-of-type(3) a{background:url(images/youtube.png) left top no-repeat;}
footer div p:nth-of-type(4) a{background:url(images/vimeo.png) left top no-repeat;}
form{max-width:600px;margin:0 auto;}
.btn-primary{background:#001e6d !important;}
.btn-primary:hover{background:#000!important;}
#comment{margin: 10px !important;width:94% !important;}

/*border-width: 65px calc(100vw) 0 0;*/

nav h2{display:none !important;}

@media only screen and (max-width: 1500px) {
	header video{width:1700px;}
}

@media only screen and (max-width: 600px) {
.flex-container {display:inherit;}
article{width:100%}
header p{font-size:.9em;margin-top:20px;}
header video{width:1400px;left:-500px}
section{font-size:1.3em;}
#adicionales{font-size:1.5em;}
footer{padding-top:150px;padding-bottom:50px;}
footer p{font-size:1.2em;}
}

/* Add a black background color to the top navigation */
.topnav {
  background-color:#001e6d;
  overflow: hidden;
  position:fixed;
  width:100%; 
  top:0;
  z-index:100;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.active {
  background:#ffc700;
  color: #000 !important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 800px) {
#servicios{height:500px}
.kc-wrap{margin-top:200px;}
.modal-dialog{
    overflow-y: initial !important;
}
.modal-body{height:70vh;overflow:scroll;}


}

@media screen and (max-width: 480px) {
#servicios{height:300px}
.kc-wrap{margin-top:100px;}
header{background:url(images/chupamirto_producciones_demo_reel_2018.gif) left top no-repeat;}
#back{ display:none;}
}

.g-recaptcha {
  justify-content: center;
  display: flex;
}

figure{
  margin-bottom: 5%!important;
}
article figure img{
  width: 100%;
  text-align: center;
  height: 300px;
  object-fit: contain;}