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

body {
	margin: 0!important ;
    padding: 0;
	background-color: black;
	width:100vw;
	height: 100vh;
    overflow: hidden !important;
	x-overflow: hidden !important;
	y-overflow: hidden !important;
	font-family: "Jura";
	color: white;
}

		#turn{
	 background: url("turn_phone.png") no-repeat center center fixed;	
    background-color: black;
    height: 100vh;
    width: 100vw;
    margin: 0 !important;
}

	p{
	font-size: 11em !important;
			 
		 }

.br {
            display: block;
            margin-bottom: 0.5em;
        }

strong { font-weight: 700; font-size: 11em !important;}

.italic {font-family: Kodchasan; font-style: italic; font-size: 11em !important;}




#page{
	width: 100vw;
	height: 100vh;
}



#titulo{
	
 width: 300px;
	text-align: left;
}

	#volantin{
	width: 200px;
    float: left;
    margin: 0;
	margin-left:5%;
    margin-top: 5%;	
}

#box{
	width: 60vw;
	margin-left: auto;
	margin-right: auto;
}

#text_box{
	text-align: justify;
	width: 650px;
	height: auto;
    float: left;
    margin: 0;
	margin-left: 10%;
    margin-top: 5%;	
	margin-bottom: 5%;	
}

#text_box1{
	text-align: justify;
	width: 360px;
	height: auto;
    float: left;
    margin: 0;
	margin-left: 10%;
    margin-top: 5%;	
	margin-bottom: 5%;	
}


#background-video {
    position:fixed;
    z-index: -1;
	height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-aspect-ratio: 16/9) {
    #background-video {
        min-width:auto;
       min-height: 100vh;
    }
}
@media (max-aspect-ratio: 16/9) {
   #background-video { 
        max-width:auto;
        max-height: 100vh;
    }
}


#rosa-box{
 position:absolute;
  width: 130px;
  height:130px;
  display: inline-block; 
  margin: 0;
  top: 15vh;
  right: 20vh;
	
	
}

#mute{
 position:absolute;
  width: 50px;
  height:50px;
  display: inline-block; 
  margin: 0;
  top: 50%;
  right: 50%;
	
	
}



#logo{
	position: fixed;
	width: 130%;
	height: 130%;
    display: inline-block; 
    margin: 0;
    top: 15vh;
    left: 20vh;
}

#logo2{
	
	position:fixed;
	width: 50px;
    float: left;
    margin: 0;
	margin-left:5%;
    margin-top: 5%;
	text-align: center;
}


#text_box{
	width: 600px;
	height: auto;
    float: left;
    margin: 0;
	margin-left: 10%;
    margin-top: 5%;	
}

.parent {
	
  position:absolute;
  width: 130px;
  height:130px;
  display: inline-block; 
  margin: 0;
  top: 15vh;
  right: 20vh;
  background-image: url("images/icons/rosadelosvientos_semi.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;

}

.slider {
   position: absolute;
   width: 130px;
   height:130px;
   transition: transform .5s;
   overflow:hidden;
   width:0;
  margin: 0;
  background-image: url("images/icons/rosadelosvientos.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;

}


.parent:hover .slider {
    width: 130px;
	height: 130px;
	animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;

}


.parent2 {	
  position:relative;
  height: 300px;
  width: 50px;
  display: inline-block;
  background-size: 50px;
  background-position:center;
  background-repeat: no-repeat;
}


.slider2 {
   position:absolute;
   width: 25px;
   transition: transform .5s;
   overflow:hidden;
   width:0;
   text-wrap:none;
   left: 22px;
	top: 100px;


}


.parent2:hover .slider2 {
    width:25px;
	animation: fadeIn 2s;
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  -ms-animation: fadeIn 2s;

}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


/* Popup box BEGIN */
.hover_bkgr_fricc{
    background-color:transparent;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:100;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: rgba(0,0,0,.7);
	overflow:auto;
	text-align: left;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: 80%;
    max-width: 50%;
    min-height: 100px;
    vertical-align: middle;
    width: 50%;
    position: relative;
    padding: 15px 5%;

}
.popupCloseButton {
    background-color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;

}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    display: inline-block;

}


/* Popup 2 box BEGIN */
.hover_bkgr_fricc2{
    background-color:transparent;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:100;
}
.hover_bkgr_fricc2 .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc2 > div {
    background-color: rgba(0,0,0,.7);
	overflow:auto;
	text-align: left;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: 80%;
    max-width: 50%;
    min-height: 100px;
    vertical-align: middle;
    width: 50%;
    position: relative;
    padding: 15px 5%;

}
.popupCloseButton {
    background-color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;

}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc2 {
    cursor: pointer;
    display: inline-block;

}


/* Popup 3 box BEGIN */
.hover_bkgr_fricc3{
    background-color:transparent;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:100;
}
.hover_bkgr_fricc3 .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc3 > div {
    background-color: rgba(0,0,0,.7);
	overflow:auto;
	text-align: left;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: 80%;
    max-width: 50%;
    min-height: 100px;
    vertical-align: middle;
    width: 50%;
    position: relative;
    padding: 15px 5%;

}
.popupCloseButton {
    background-color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;

}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc3 {
    cursor: pointer;
    display: inline-block;

}


/* Popup 4 box BEGIN */
.hover_bkgr_fricc4{
    background-color:transparent;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:100;
}
.hover_bkgr_fricc4 .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc4 > div {
    background-color: rgba(0,0,0,.7);
	overflow:auto;
	text-align: left;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: 80%;
    max-width: 50%;
    min-height: 100px;
    vertical-align: middle;
    width: 50%;
    position: relative;
    padding: 15px 5%;

}
.popupCloseButton {
    background-color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;

}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc4 {
    cursor: pointer;
    display: inline-block;

}


/* Popup 5 box BEGIN */
.hover_bkgr_fricc5{
    background-color:transparent;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:100;
}
.hover_bkgr_fricc5 .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc5 > div {
    background-color: rgba(0,0,0,.7);
	overflow:auto;
	text-align: left;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: 80%;
    max-width: 50%;
    min-height: 100px;
    vertical-align: middle;
    width: 50%;
    position: relative;
    padding: 15px 5%;

}
.popupCloseButton {
    background-color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;

}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc5 {
    cursor: pointer;
    display: inline-block;

}