@import url('font.css');

body{
	padding: 0px;
	margin: 0px;
	font-size: 16px;
	font-family: 'MyriadPro';
}

.header{
	position: relative;
	display: block;
	text-align:center;
}

.header .logo h1{
	text-indent: -9999px;
	width: 0;
	height: 0;
	margin: 0;
}

.content{
	text-align: center;
	background-color:#000000;
}

.content-video{
	display: inline-block;
	position: relative!important;
	overflow: hidden;
}

.content-video #video-id{
	max-height:100%;
	max-width: 100%;
	width: auto;
	z-index: 0;
}

.wrap{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding:0 60px;
	text-align: left;
	background:url(../img/fondo.png) center center/cover no-repeat scroll;
}

.wrap::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right,rgba(47, 113, 180, .95), rgba(47, 113, 180, .75));
}

.wrap .wrapper-default{
	position: relative;
	display: block;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform: -webkit-translate(-50%,-50%);
    transform: -moz-translate(-50%,-50%);
    transform: -ms-translate(-50%,-50%);
    transform: -o-translate(-50%,-50%);
}

/*
 ********************************
 HOME
 ********************************
 */
.home .home-header img{
	width: 100%;
    max-width: 815px;
    display: block;

}

.home .home-content p{
	color: white;
	margin-bottom: 30px;
	font-size:22px;
}

/*
 ********************************
 CLOSING
 ********************************
 */
.closing{
	display:none;
}

.closing .closing-content p{
	color: white;
	margin-bottom: 30px;
	font-size:24px;
}

/*
 ********************************
 DEFAULT BUTTON
 ********************************
 */
.btn-default{
	display: inline-block;
	margin:0 6px;
	border: 1px solid rgba(255, 255, 255, 1);
	padding: 12px 20px;
	background-color: transparent;
    color: white;
	cursor: pointer;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active{
	background-color: rgba(255, 255, 255, .2);
	border:0;
}

.btn-default.btn-selected,
.btn-default.btn-selected:hover,
.btn-default.btn-selected:focus,
.btn-default.btn-selected:active{
	border: 3px solid rgba(255, 255, 255, 1); 
}

.btn-primary{
	padding: 10px 15px;
	background-color: #fea700;
	color:white;
	/* font-weight: bold; */
	border:none;
	border-radius:5px;
	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out; 
	cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
	background-color: #c9880a;
}

.btn-primary.btn-start span{
	overflow: hidden;
    display: inline-block;
    height: 13px;
}

.btn-primary.btn-start img{
	width: 14px;
	height: auto;
	margin-right: 8px;
}

.btn-primary.btn-review{
	margin-right:10px;
	margin-bottom: 15px;
}

.content-resources{
	text-align: center;
	padding: 40px 0 25px 0;
	background-color: rgba(47, 113, 180, .7);
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom:-100%;
}

.content-resources.content-visible{
	bottom:0;
	transition: all 1.5s ease-in-out;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	-ms-transition: all 1.5s ease-in-out;
	-o-transition: all 1.5s ease-in-out; 
}

.content-desc p{
    color: white;
    font-size: 18px;
    font-weight: lighter;
    margin-top: 0;
}

.progress{
	margin-top: 20px;
	width: 100%;
	height: 4px;
}

.progress .percent{
	width: 0%;
	height: 100%;
	background-color:#348ce6;
	background-color: white;
	border-radius:10px;
}

/*
 ********************************
 VIDEO COMPLETE
 ********************************
 */

/* The Modal (background) */
 .wrapVideoComplete{
  display: none; 
  position: fixed; 
  z-index: 10; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.contentVideoComplete{
  position:relative;
  background-color: #fefefe;
  margin: 3% auto;
  width: 70%; 
  background-color: transparent;
}

/* The Close Button */
.contentVideoComplete .close {
  position: absolute;
  top:-30px;
  right:-30px;
  color: #eee;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.contentVideoComplete .close:hover,
.contentVideoComplete .close:focus {
  color: #fea700;
  text-decoration: none;
  cursor: pointer;
}

/*VIDEO RESPONSIVE*/
.videoComplete{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}

.videoComplete iframe,
.videoComplete object,
.videoComplete embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767.98px) {
    
    .content-resources{
	    padding: 20px 0 15px 0;
    }
    
    .home .home-content p{
        font-size: 18px;
        margin-bottom: 20px;
    }
    
}

@media screen and (max-width: 575.98px) {
	.home{
        padding:0 30px;
    }
    
    .home .home-content p{
        font-size: 20px;
    }
    
    .btn-default{
    	padding: 7px 11px;
        margin-bottom:15px;
        font-size: 12px;
    }

    .btn-default.btn-selected,
	.btn-default.btn-selected:hover,
	.btn-default.btn-selected:focus,
	.btn-default.btn-selected:active{
		border: 2px solid rgba(255, 255, 255, 1); 
	}

	.content-resources .content-desc{
		padding: 0 10px;
	}

	.content-resources .content-desc p{
		font-size: 16px;
	}
    
    .progress{
        margin-top: 0;
    }

    .contentVideoComplete{
    	position: absolute;
    	display: block;
  		width: 90%; 
  		margin:0;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
  		transform: -webkit-translate(-50%,-50%);
    	transform: -moz-translate(-50%,-50%);
    	transform: -ms-translate(-50%,-50%);
    	transform: -o-translate(-50%,-50%);
	}

	.contentVideoComplete .close {
 		top:-40px;
  		right:0;
  		z-index: 20;
  	}
}

@media screen and (max-width: 479.98px) {
    
}