@charset "UTF-8";
/* CSS Document */

/* CLOCK ------------------------- */

#loginesBox{
	width:350px;
	height:120px;
	overflow:hidden;
	cursor:pointer;
	position:relative;
}
#loginesBox .logo{
	background:url(../images/logoS.png) no-repeat;
	width:350px;
	height:120px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#loginesBox .time{
	width:300px;
	height:120px;
	overflow:hidden;
	position:absolute;
	top:52px;
	left:10px;
	z-index:18;
	display:none;
}
#loginesBox .time div{ float:left; display:block; margin-top:20px; }

#loginesBox .time div span{float:left; display:block;overflow:hidden;line-height:30px;height:24px;width:14px;}

#loginesBox .time .day span{ float:left;line-height:34px;height:34px;overflow:hidden;width:16px; display:block}

#loginesBox .time .day{margin-left:15px;}
#loginesBox .time .hour{margin-left:10px; margin-top:28px;}
#loginesBox .time .minute{margin-left:10px; margin-top:28px;}
#loginesBox .time .second{ margin-left:10px; margin-top:28px;}



#loginesBox .logoEnd{
	background:url(../images/logo.png) no-repeat; 	
	width:350px;
	height:120px; 
	overflow:hidden;
	position:absolute; top:0; left:0; display:none;
}

#loginesBox .horloge{
	width:120px;
	height:120px;
	overflow:hidden;
    position:absolute;
	top:2px;
	right: 16px;
	display:none;
}

/* = = = = = = = = = = = = = = = = = = = = = = = = = / */

p, span, a, body, h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
}

.blue-bg {
	background-color: #002745;
}
.black-bg {
	background-color: #000000;
}
.f-light {
	font-weight: 200;
}
.f-bold {
	font-weight: 700;
}
.f-bolder {
	font-weight: 800;
}
.header {
	border-bottom: 2px solid #ffffff; 
}
.header-wrapper {
	padding: 1rem;
	display: flex;
	align-items: center;
}
.header-wrapper .row {
	justify-content: space-between;
	width: 100%
}
.header-logo {
	max-height: 30px;
	width: 100%;
}
.header-gradient {
	width: 100%;
	height: 70px;
	background-image: url(../images/header-gradient.jpg);
	background-repeat: repeat-x;
	background-position: top center;
}
.video-container {
	width: 100%;
	height: auto;
	overflow-y: hidden;
	position: relative;
}
.cover-container {
	width: 100%;
	background-image:url("../images/cover.jpg");
	background-size: cover;
	background-position: center;
	height: 80vh;
}
#myVideo {
	max-width: 100%;
	height: auto;
	margin-top: -3%;
    margin-bottom: -8%;
}
.headervideo-btn {
	position: absolute;
	width: 380px;
	height: auto;
	border: 2px solid #ffffff; 
	border-radius: 5rem;
	bottom: 10%;
	left: 50%;
	margin-left: -190px;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	padding: .5rem;
	letter-spacing: 1px;
	font-weight: 700;
	z-index: 300;
	text-decoration: none;
	background-color: rgba(0,0,0,.6);
}
.headervideo-btn p {
	color: #ffffff;
	text-decoration: none;
	margin: 0;
}

#section1 {
	font-family: 'Raleway', sans-serif;
	color: #ffffff;
	padding: 10rem 0;
}
#section1 .row {
	align-items: center;
}
#section1 img {
	width: 100%;
	height: auto;
	border: solid 1px #999;
}
#section1 button {
	border: none;
    outline: none;
    margin: auto;
    padding: 2rem;
    background-color: #000;
}
.modal-content {
	background-color: #000 !important;
	position: relative;
}
.btn-close {
    position: absolute;
	top: 10px;
	right: 10px;
	z-index: 200;
}
#footer {
	background-color: #2f2f2f;
	font-family: 'Raleway', sans-serif;
	padding: 2rem;
}
.footerText {
	font-weight: 200;
	font-size: 11px;
	color: #ffffff;
}
#menutop {
	position: absolute;
	top: 201px;
	padding-top: 10px;
	height: 60px;
	text-align: center;
	z-index: 500;
	width: 100%;
	left: 0;
	color: #fff;
}
#menutop span {
	margin-right: 10px;
	padding: 10px 0;
	white-space: nowrap;
}
#menutop a, .language_btn a {
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 5px
}
#menutop a:hover, .language_btn:hover {
	text-decoration: underline;
	background-color: #002745;
}
#menutop span::after {
	content: "|";
	padding-left: 10px;
}
#menutop span:last-child::after {
	content: "";
}
#menutop img {
	display: inline-flex
}
.menusticky {
	position: fixed !important;
	top: 0px !important;
	background-color: rgba(0,0,0,.6)
}
.menusticky div {
	padding-top: 10px
}
.menusticky + .content {
  padding-top: 60px;
}
.language_btn {
	position: fixed;
    bottom: 30px;
    right: 30px;
	z-index: 100;
	background-color: #002745;
	border-radius: 50px;
	padding: 5px 10px;
}
#puebla {
	background-color: #4a0f56;
	    padding: 10rem 0;;
	color: #fff;
}
#venue {
	background-color: #00324b;
	    padding: 10rem 0;;
	color: #fff;
}
button {
	background-color: transparent;
	border: none;
}
.banner-wrapper {
	width: 100%;
	text-align: center;
	padding: 20px 0;
}

/* = = = = = = = = = = = = = LIGHT box = = = = = = = =  */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
  box-sizing: border-box;
}

.ligtbox_wrapper {
  column-width: 319px;
  column-gap: 5px;
  padding: 5px;
}

.ligtbox_wrapper img {
  width: 100%;
  cursor: pointer;
	margin-bottom: 5px;
}

.lightbox {
  position: fixed;
	z-index: 600;
  width: 100%;
  height: 100%;
  top: 0;
	left: 0;
  display: none;
  background: #000;
  perspective: 1000;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  opacity: 0.5;
  background-position: center;
  background-size: cover;
}

.lightbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  max-height: 95vh;
  max-width: calc(95vw - 100px);
  transition: 0.8s cubic-bezier(0.7, 0, 0.4, 1);
  transform-style: preserve-3d;
}


/*.lightbox:hover img{
  transform: translate(-50%, -50%) rotateY(180deg);
}*/

[class^="arrow"] {
  height: 200px;
  width: 50px;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

[class^="arrow"]:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 15px;
  height: 15px;
}

.arrowr {
  right: 0;
}

.arrowr:after {
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.arrowl {
  left: 0;
}

.arrowl:after {
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.close {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.4);
  margin: 20px;
  cursor: pointer;
}

.close:after,
.close:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #e74c3c;
}

.close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.title {
  font-size: 20px;
  color: #000;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 20px 0;
}
/* = = = = =  = = = = = = = = = RESPONSIVE ========== */

@media (max-width: 768px) {
	#section1, #puebla {
		padding: 4rem 0;
	}
}
	
@media (max-width: 576px) { 
	.header-wrapper, .header-wrapper .col-12 {
		padding: 0 !important;
		overflow: hidden;
		width: 100%;
	}
	.header-wrapper .row {
	width: auto
}
	#loginesBox .time .day {
    margin-left: 0;
}
	#loginesBox {
    width: 100%;
		min-width: 310px;
		max-width: 350px;
		margin: auto;
	}
	.header-logo {
    max-width: 290px;
	width: 100%;
    height: auto;
    margin: 20px auto;
	}
	#section1, #puebla{
		padding: 2rem 0;
	}
	.headervideo-btn {
		width: 90%;
		left: 5%;
		margin-left: 0;
		font-size: 14px
	}
	#menutop {
    height: 95px;
	padding-top: 6px;
	background-color: rgba(0,0,0,1);
		border-bottom: 2px solid #fff;
	}.menusticky {
	background-color: rgba(0,0,0,.8)
}
	.video-container {
    margin-top: 90px;
	}
	.cover-container {
	background-image: url("../images/cover-mobile.jpg");
	background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
    height: 65vh;
	background-color: #000000;
}
	#menutop a {
    font-size: 10px;
    padding: 0px 5px;
}
}