@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&family=Roboto:ital,wght@0,300;0,400;0,900;1,400;1,900&family=VT323&display=swap');
/*colores*/
  :root {
    --c1: #397fc1;
    --c1b: #4a95d1;
    --c1c: #e7eff5;
    --c2b: #fbd207;
    --c2: #fae66a;
    --c3: #1a2d59;
  }
.color-white {background-color: #fff !important;}
.text-white {    color: #fff !important;}
.text-color-1 {    color: var(--c1) !important;}
.border-color-white {    border-color: #fff !important;}
.text-color-2 {    color: var(--c2) !important;}
.text-color-2b {    color: var(--c2) !important;}
.text-color-3 {    color: var(--c3) !important;}
.color-1 {  background-color: var(--c1) !important;}
.color-2 {    background-color: var(--c2) !important;}
.color-3 {    background-color: var(--c3) !important;}
.grdnt1 {  background: linear-gradient(120deg, var(--c1) 20%,  var(--c1b) 80%);}
.grdnt2 {  background: linear-gradient(120deg, var(--c2) 20%,  var(--c2b) 80%);}
.grbg1{background-image: linear-gradient(to bottom right,#fffbe2,#fbe76a);}

.st1{fill:#FFF}
.st2{fill:var(--c1b)}
.st3{fill:var(--c1)}
.st4{fill:var(--c3)}
.fill-1 {fill: var(--c1);}
.fill-white {fill: #fff;}
.fill-2 {fill: var(--c2);}

.border-color-1 {border-color: var(--c1) !important;}
.border-color-2 {border-color:var(--c2) !important;}
.border-retro-1{border: 5px outset var(--c1);}
.border-retro-2{border: 5px outset var(--c2);}
.border-bottom{border-bottom:5px solid}
.border-top{border-top:5px solid}

/*fuentes*/
.f1{font-family: 'Jost', sans-serif;sans-serif;font-weight: 400}
.f2{font-family: 'Anton', sans-serif;sans-serif;font-weight: 400}

p{font-size: 12pt;color: #1a2d59; font-weight: 400;} 

.titulo{letter-spacing: .1em; font-size: 2.5em; margin: 20px 0 45px;}
.subtitulo{letter-spacing: .1em; font-size: 1.5em; margin: 20px 0;}

.indent{text-indent:15px} 
.bold{font-weight: 700}
.align-l{text-align: left;}
.align-c{text-align:center}
.align-r{text-align:right}

.lista li{padding-left: 15px;list-style: none; position: relative;}
.lista li::before{
	content:"";left:0;top:.5em; position:absolute; width: 0px;height: 0px; 
	border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-left: 5px solid var(--c1);
	}
.lista li:nth-child(even)::before{border-left-color:var(--c1)}
.lista li:nth-child(odd)::before{border-left-color:var(--c3)}

.text-outline{-webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1pt; }

/* generales */
*{  box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
 html{scroll-behavior:smooth}
body{margin:0}
body::-webkit-scrollbar {  width: 1em;}
body::-webkit-scrollbar-track {  box-shadow: inset 0 0 10px #fff; background-color: var(--c2);}
body::-webkit-scrollbar-thumb {  background-color: #fff;  border-radius: 7px;}

.block{display:block}
.inline-block{display:inline-block}
.max-w-1200{max-width:1200px}
.max-w-960{max-width:960px}
.full-width{width:100%}
.rel{position:relative}
.v-align-top{vertical-align:top}
.clear{clear:both}
.margin-none{margin:0}
.margin-auto{margin-left:auto;margin-right:auto}
.margin-s{margin-top:10px;margin-bottom:10px}
.margin-m{margin-top:30px;margin-bottom:30px}
.margin-l{margin-top:70px;margin-bottom:70px}
.padd-s{padding:10px}
.padd-m{padding:30px}
.padd-l{padding:100px 70px 100px}
.z-plus-1{z-index:1}

.svg-glow{ filter:drop-shadow( 0 0 10px #fff);}
.marco{background: url(https://raw.githubusercontent.com/matibarriento/pyconar2021-assets/master/img/borde.svg) top left no-repeat, url(https://raw.githubusercontent.com/matibarriento/pyconar2021-assets/master/img/borde-b.svg) bottom right no-repeat, #fff;}
.shadow{ box-shadow: 0 0 100px 0 rgb(157 202 255 / 80%) inset, 0 0 30px 0 rgb(255 255 255 / 20%); border: 1px solid rgb(170 225 255 / 80%);}
.btn{text-decoration: none; border: 1px solid; padding: 10px 20px; letter-spacing: .02em;transition:.4s}
.btn:hover{box-shadow: 0 0 10px 0 rgb(157 202 255/ 30%);background:rgb(157 202 255/ 30%);}


#main-background{position:fixed;height:100vh; width:100%;z-index:-999}
#main-background img{position:fixed;top:0;width:100%;height:auto;
    top: calc(70vh - 34vw);}
#plano,#plano div{position:absolute}
#plano{left:0;top:-15vh;width:100%;perspective:1000px;height:100%;}
#plano div{transform-style:preserve-3d;transform-origin:center; background-image:url(https://raw.githubusercontent.com/matibarriento/pyconar2021-assets/master/img/grilla.svg);
    width: 200%;height:200%;left: -50%; transform: rotateX(100deg);opacity: .5;
    background-size: 100px 100px;box-shadow: 0 20vh 60vh 0vh #fff inset;animation: piso .5s linear infinite
	}
@keyframes piso{0%{background-position-y:0}100%{background-position-y:100px}}


.corte{z-index:-1}
.corte::after,.corte::before{border-top:solid 70px transparent;top:-70px;position:absolute;content:""}
.corte::before{border-right:50vw solid #2770bb ;right:0}
.corte::after{border-left:50vw solid #2770bb ;left:0}
#main-footer{ background: linear-gradient(#2770bb 0%,#1f3f79 80%);
}

#github{ margin-top:20px}
#footer-icons{padding-top: 20px;}

.navbar{min-height:50px;background-image: linear-gradient(to bottom right,#fffbe2e0,#fbe76ae0);}
.navbar a{color:var(--c3)}


/*front*/
#py{width:56vh;margin:50px auto 0;display:block; position:fixed;left: -3%;}

.pyenter,#py circle,#py .ojo{animation: pypaths 10s ease }
#lengua{opacity:0;animation: lengua 5s ease 2s infinite}
#py>circle{animation-delay:5s}
#py .ojo:last-child{animation-delay:.3s}
@keyframes pypaths {0%,20%,100%{opacity:1}10%{opacity:0}}
@keyframes lengua {0%,20%,48%,100%{opacity:0}12%,35%{opacity:1}}

.py-cola{position:absolute;top: -30vh;overflow:hidden;width:100%;height:80vh;}
.py-cola div{
    position: absolute; width: 140%;height: 40vh; left: -20%; transform: rotate(7deg);
    background-image: url(https://raw.githubusercontent.com/matibarriento/pyconar2021-assets/master/img/cola.png);animation: pycola 6s linear infinite;top: 7vw;
    background-size: contain;box-shadow: 0 -4vh 10vh 5vh rgb(21 80 150 / 80%) inset, 0 0 5px 0 rgb(0 80 255 / 80%);
	}
@keyframes pycola{0%{background-position:0}100%{background-position:13.3vh}}

#pyconar-logo{position:fixed;}
#pyconar-logo h1{ max-width:520px;margin-top: calc(46vh - 125px);padding:0 28px 0 12px;}
#flare-a,#flare-b {height: 40px;width: 40px;border-radius: 50%; position: absolute;
    background-image: radial-gradient(#fff 30%, transparent 70%);
	animation: brilla .8s linear infinite;
}
#flare-a{top: 53px;right: 95px;}
#flare-b{bottom: 76px;left: 90px;width: 30px;height:30px;}
@keyframes brilla{0%,100%{opacity:.5}50%{opacity:1}}


#portada{min-height:110vh;text-align: center; position: relative;}
#portada h2 { font-size:3.5em; letter-spacing:.155em;line-height:1em;line-height: 1.2em;margin: 0 0 12px;}
#portada h2 .sub{display: block;line-height: 1em;letter-spacing: 0;font-size: .55em; color: #1a2d59;}
#portada-content{position: absolute;width:100%;max-width: 370px;right: 3%;top: 42vh; z-index: 1;}

#inscripciones{top: 64vh;position: absolute;width: 100%;}
#inscripciones div:first-child{max-width: 490px;border: 4px solid #fff;padding: 10px 10px 0px;background: #fff9;box-shadow: inset 0 0 50px #fff, 0 0 50px #fff;margin: auto;}
#inscripciones h4{position: absolute;top:72px;left:0;font-size: 1.5em;display: inline;width: 100%; line-height: 1.2em;
    -webkit-text-stroke: .5px var(--c1);color: var(--c3);text-shadow: 0 0 10px #fff, 0 0 20px #fff;
}
#inscripciones a{width: 1420px;text-decoration: none;display: inline-block;position: relative;height: 180px;}
#inscripciones img{max-width: 100%;display: block;margin: auto;max-height:100%;transition: transform 1s ease;}
#inscripciones a:hover img { transform: scale(1.1);}

#discord{transition:transform 1s ease}

#timer{color: #1a2d59; border: 2px solid; border-radius: 10px;font-weight:600; padding:10px 10px 15px;max-width: 370px;}
#clock {padding-bottom: 0px;}
#clock span{font-size:2.3em;font-weight:300;color: #387ec0;}
#timer span{width: 85px; display: inline-block; }

.separador{ margin-top: 68vh }

.navbar{padding-right:10px}
.navbar{color:var(--c3) !important;background-image: linear-gradient(to bottom right,#ffffff,#fbe76a)}
.navbar i, .navbar .caret{color: var(--c1) !important;}
.eventol-logo { border-radius: 5px;}
.social-icons{ position: absolute; width: 100%; margin-top: 95px}
.social-icons a i{font-size: 45px; margin:0 10px;color:#fdd04f;transition: transform .5s ease;text-shadow: 2px -3px 5px #ffffff99, -2px 3px 5px #ffffff99;}
.social-icons a:hover i{transform: scale(1.1);}


@media screen and (max-width:1350px){
	#portada{height:118vh}
	#py{ left:-3%;width: 38vh;bottom:0;}
	#inscripciones{width:auto;margin-left:17%;}
}

@media screen and (max-width:980px){
	.social-icons{ margin-top: 75px}
	.social-icons a i {font-size: 34px}
	#main-footer{position:relative}
	#main-footer .corte {z-index: 0;}
	#portada{height:130vh}
	#pyconar-logo h1{ margin-top: 20vh;}
	#py{ bottom:-10vh; left:calc(50% - 20vh);}
	#inscripciones{width:330px;margin-left:20px;}
}

@media screen and (max-width:800px){
	#flare-a,#flare-b {display:none}
	#clock span{font-size:2em;}
	#timer span{width: 24%; }
	#portada-content{max-width: 100%;right: 0;padding: 5px 5px 10px;background: #fff; position: initial; box-shadow: 0 -10px 20px #fff9;}
	.marco{background: #fff;}
	#plano div{animation: none}
	#portada {padding-top: 83vh;height:auto;}
	.py-cola {display: none;}

	.margin-m{margin-top:15px;margin-bottom:15px}
	.margin-l{margin-top:40px;margin-bottom:40px}
	.padd-s{padding:10px}
	.padd-m{padding:30px 20px}
	.padd-l{padding:70px 20px;}	
    .titulo{font-size:28pt}
    .subtitulo{font-size:22pt}
	
	#timer {padding: 0;}
	#portada .text-outline {-webkit-text-fill-color: initial;}
	#portada h2 {font-size:2.5em;}
	#portada h2 .sub { display: inline; font-size:1em;}
	#inscripciones{width:auto;margin-left:0;max-width: 100%;position: initial;}
	#inscripciones div:first-child{max-width:100%;}
	
	
}


/*---------------------*/

#propone{position:absolute;width:100%;top:530px}
.grid{perspective:500px;height:100%;width:100%;position:relative;overflow:hidden;background:-moz-linear-gradient(90deg,#fbd207 10%,#fff 51%,#fbd207 90%,#fbd207 90%);background:-webkit-linear-gradient(90deg,#fbd207 10%,#fff 51%,#fbd207 90%,#fbd207 90%);background:linear-gradient(90deg,#fbd207 10%,#fff 51%,#fbd207 90%,#fbd207 90%)}
.side-grid{background:url(https://raw.githubusercontent.com/matibarriento/pyconar2021-assets/master/img/side-grid.svg) center no-repeat,linear-gradient(90deg,#fbd207 10%,#fff 51%,#fbd207 90%,#fbd207 90%);background-attachment:fixed;background-size:cover;height:100%;width:100%;border:5px solid #fff;box-shadow:inset 0 0 50px #fff,0 0 80px #fff7}
.infografia-1 article,.infografia-2 article{max-width:240px;width:100%;display:inline-block;vertical-align:top;margin:20px;perspective:500px}
.infografia-1 p,.infografia-2 p{margin:0}
.infografia-2 article{max-width:360px;border:4px outset #fff2;padding:40px 30px 20px;background:#fffb;box-shadow:inset 0 0 50px #fff,0 0 50px #fff}
.infografia-2 ul{padding:0}
.infografia-1 img{width:240px;transition:transform 1s ease}
.infografia-2 img{max-width:300px;max-height:300px;transition:transform 1s ease}
.infografia-1 article:hover img{transform:rotateY(-15deg)scale(1.1)}
article:hover #grabadas{transform:rotateY(-10deg)rotateX(10deg)scale(1.1)}
article:hover #talleres{transform:rotateY(0deg)rotateX(-10deg)scale(1.2)}
article:hover #vivo{transform:rotateY(10deg)rotateX(-10deg)scale(1.1)}
article:hover #discord{transform:rotateY(0deg)rotateX(-10deg)scale(1.1)}
.infografia-1 b,.infografia-2 b{color:var(--c1)!important}
#grabadas{margin:60px 0 0}

@media screen and (max-width:600px) {
.infografia-1 article,.infografia-2 article{margin:20px 0}
}

.cromo{
	background: linear-gradient(0deg,rgba(217,237,250,1) 0%,rgba(255,255,255,1) 20%,rgba(56,126,192,1) 40%,rgba(26,45,89,1) 55%,rgba(73,149,209,1) 56%,rgba(217,237,250,1) 60%,rgba(255,255,255,1) 80%,rgba(217,237,250,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--c1);
    letter-spacing: .05em;
    font-style: italic;
    text-transform: uppercase;
    font-weight: 900;
    display: inline;
}
.btn-cromo{
	color:var(--c3)!important;
	background:var(--c3);
	box-shadow:0 0 15px #fff9,inset 0 0 15px #fff9;border:none;
	display:inline-block;
	border-radius:2px;
	position:relative;
	margin:10px 1px;
	text-transform:uppercase;
	outline:0;cursor:pointer;
	text-decoration:none;
	padding:10px 15px;
	letter-spacing:.02em;transition:.4s
	max-width: 370px;
    width: 100%;
    text-decoration: none;
}
.btn-cromo:hover{box-shadow:0 0 15px #fff,inset 0 0 15px #fff}

#footer-icons a{color: var(--c2b); font-size: 27pt;margin: 0 10px;}
#footer-icons a i{transition: transform .5s ease;}
#footer-icons a:hover i{transform: scale(1.1);}

    /*slider*/
.slick-prev:before,.slick-next:before{width:50px;height:50px;color:var(--c1)!important;font-size:40pt!important;opacity:.4!important;transition:opacity .4s}
.slick-prev:hover:before,.slick-next:hover:before{opacity:1!important}
.slick-prev{left:-5px!important;z-index:1}
.slick-next{right:25px!important}

.slick-slide{text-align:center}
.slick-slide p{text-align:left;font-family:'Jost';}

.slick-slide .col-sm-6 img{border:10px outset var(--c1)}
.slick-dots li button:before{color:#ffffff!important;background:#FFFFFF99;border:3px solid #83d2f6; box-shadow: 0 0px 15px #fff, 0 0 10px #fff;}
.slick-dots{position:relative}
.slick-slide .col-sm-6 > p:not(:nth-child(2)):not(:last-child){display:none}
.slick-dots li.slick-active button:before {opacity:1;}


.slick-slide h2{
display:inline;
color:#fff;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #397fc1;
  font-family: 'Anton';
  -webkit-background-clip: text;
  letter-spacing:1px;
  background-image: -webkit-linear-gradient(90deg,rgba(217,237,250,1) 0%,rgba(255,255,255,1) 20%,rgba(56,126,192,1) 40%,rgba(26,45,89,1) 55%,rgba(73,149,209,1) 56%,rgba(217,237,250,1) 60%,rgba(255,255,255,1) 80%,rgba(217,237,250,1) 100%);
  -webkit-filter: drop-shadow(0px 0px 10px #fff);
  text-transform:uppercase;
}

.slick-slide .col-sm-6{max-width:500px;float:none;display:inline-block;vertical-align:middle}

.slick-slide .col-sm-6:nth-child(1)   
    max-width: 500px;
    float: none;
    display: inline-block;
    vertical-align: middle;
    background: #ffffff77;
    border: 1px solid #fff;
}

.slick-list {
    border-left: 5px solid #1a2d59;
    border-right: 5px solid #1a2d59;
    background: #ffffffcc;
    padding-top: 20px;
    box-shadow: inset 0 0 300px #fff, 0 0 70px #ccf;
}