
/* Hoja de estilos */

	    @font-face {
		    font-family: "Roboto";
		    src: url("Roboto-Regular.ttf");
	    }


	*:focus{
		outline: none !important;
	}

	body, html{
		font-family: "Roboto";
	}


		.animated {
		   -webkit-animation-duration: 1.3s !important;
		   animation-duration: 1.3s !important;
		   -webkit-animation-fill-mode: both;
		   animation-fill-mode: both;
		}

		.topbar{
			background-color: #0576a8;
			color: white;
			padding: 10px 0px;
			font-size: 16px;
		}

		.brdnav{
			border-top: 1px solid #EEEEEE;
		}

		.buttonav{
			background-color: #1a2e8e;
			padding: 12px 24px;
			color: white;
		}
		.btntrans{
			background-color: transparent;
			padding: 12px 24px;
			cursor: context-menu !important;
		}

		.icotrans{
			color: #1a2e8e;
			margin-right: 5px;
			font-size: 16px;
		}

		.moveimg{
			position: relative;
			right: 260px;
		}

		.customtitle{
			font-size: 30px;
			color: #1a2e8e;
			font-weight: bold;
			position: relative;
			bottom: 480px;
			left: 40px;
		}

		.customtext{
			position: relative;
			bottom: 470px;
			left: 40px;
			font-size: 16px;
			width: 62%; 	
		}

		.bgheader{
			background-image: url(../img/back1.png);
			background-size: cover;
			background-repeat: no-repeat;
       		background-position: top center;
       		background-color: #00203B;
       		background-attachment: scroll;
			padding: 50px 0px;
		}

		.boxform{
			background-color: #fcfeff;
			box-shadow: 0px 2px 2px #BDBDBD;
			border-radius: 0px 0px 2px 2px;
			padding: 10px 15px 30px 15px; 
			position: relative;
			bottom: 50px;
		}

		.mainform{
			color: #1a2e8e;
			font-weight: bold;
			text-align: center;
			padding: 0px 10px;
		}

		.input-group-text{
			color: white;
			background-color: #e2e2e2;
		}

		.input{
			padding: 10px 15px;
			width: 87%;
			border-radius: 0px 4px 4px 0px;
			border: 1px solid #e2e2e2;
		}
		
		
		.select{
			padding: 10px 15px;
			width: 87%;
			border-radius: 0px 4px 4px 0px;
			border: 1px solid #e2e2e2;
		}
		

		.submitform{
			width: 100%;
			background-color: #37a556;
			color: white; 
			position: relative;
			bottom: 70px;
		}

		.submitform2{
			width: 100%;
			background-color: #37a556;
			color: white; 
			border-radius: 0px;
			font-size: 18px;
			margin-top: 25px;
			padding: 10px;
		}		

		.submitform2:hover{
			color: white; 
		}

		.subcustomtitle{
			text-align: center;
			color: #4a4747;
			font-weight: bold; 
			font-size: 30px;
		}

		.cardbox{
			background-color: #ffffff;
			width: 100%;
			padding: 20px;
			height: 260px;
		}

		.imgCont{
			background-color: #37a556;
			width: 65px;
			height: 65px;
			border-radius: 50%;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 50px;
			border: 3px solid #FFF;
			position: relative;
			right: 53px;
		}

		.cardTitlebox{
			color: #333333;
			font-weight: bold;
			position: relative;
			bottom: 45px;
			left: 30px;
		}


		.cardTextBox{
			color: #333333;
			position: relative;
			bottom: 40px;
			left: 30px;
			line-height: 18px;
			font-size: 14px;
			padding-right: 25px;
		}

		.bgone{
			background-image: url(../img/back3.png);
			background-size: cover;
			background-repeat: no-repeat;
       		background-position: top center;
       		background-color: #00203B;
       		background-attachment: scroll;
			padding: 50px 0px;
		}

		.bgtwo{
			background-image: url(../img/back4.png);
			background-size: cover;
			background-repeat: no-repeat;
       		background-position: top center;
       		background-color: #00203B;
       		background-attachment: scroll;
			padding: 50px 0px;
		}

		.bg3{
			background-image: url(../img/back5.png);
			background-size: cover;
			background-repeat: no-repeat;
       		background-position: top center;
       		background-color: #FFF;
       		background-attachment: scroll;
			padding: 50px 0px;
		}

		.sectionTitle{
			font-size: 45px;
			font-weight: bold;
		}

		.sectionText{
			font-size: 16px;
		}

		.boxRegresive{
			background-color: #ffffff;
			position: relative;
			top: 100px;
		}

		.headReg{
			background-color: #252c4d;
			padding: 15px;
			color: white;
			font-size: 18px;
			text-align: center;
		}

		.caption{
			border: 1px solid #333;
			padding: 15px 25px;
			vertical-align: middle;
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			margin: 0px 4px;
		}

		.boxnumber{
			width: 33.33%;
			float: left;
			text-align: center;
		}

		.clear{
			clear: both;
		}

		.cardCourse{
			background-color: #BDBDBD;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 170px;
			padding: 7.5px;
			margin-bottom: 25px;
			filter: opacity(50%);
		}

		.koiFish{
			background-color: #FFF;
			height: 20px;
		}

		.boxCourses{
			background-color: #FFFFFF;
			padding: 10px;
			position: relative;
			bottom: 180px;
		}

		.btnbox-outline{
			padding: 5px 20px;
			color: #1a2e8e;
			background-color: transparent;
			border-radius: 0px;
			border: 2px solid #1a2e8e;
			font-weight: bold;
		}


		.btnbox{
			padding: 5px 30px;
			color: #FFFFFF;
			background-color: #1a2e8e;
			border-radius: 0px;
			border: 2px solid #1a2e8e;
		}

		.btnbox:hover{
			color: #FFFFFF;
		}


		/* Cards Slider */

		@media (min-width: 768px) {
			/* show 3 items */
			.carousel-inner .active,
			.carousel-inner .active + .carousel-item,
			.carousel-inner .active + .carousel-item + .carousel-item,
			.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
				display: block;
			}

			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item, 
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
				transition: none;
			}

			.carousel-inner .carousel-item-next,
			.carousel-inner .carousel-item-prev {
				position: relative;
				transform: translate3d(0, 0, 0);
			}

			.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: absolute;
				top: 0;
				right: -33.3333%;
				z-index: -1;
				display: block;
				visibility: visible;
			}

			/* left or forward direction */
			.active.carousel-item-left + .carousel-item-next.carousel-item-left,
			.carousel-item-next.carousel-item-left + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(-100%, 0, 0);
				visibility: visible;
			}

			/* farthest right hidden item must be abso position for animations */
			.carousel-inner .carousel-item-prev.carousel-item-right {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				display: block;
				visibility: visible;
			}

			/* right or prev direction */
			.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
			.carousel-item-prev.carousel-item-right + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(100%, 0, 0);
				visibility: visible;
			}
		}

		@media only screen and (max-width: 992px){

			.btncarouselright{left: 0px !important;}
			.btncarouselleft{right: 0px !important;}

			.wmain{
				padding-right: 20px !important;
			}

			.moveimg{
				display: none !important;
			}

			.btnbox{
				padding: 5px 20px !important;
			}

			.input{
				width: 84% !important;
			}

			.cardfull{
				width: 90% !important;
			}

			.contentTopper{
				font-size: 12px !important;
				left: 0px !important;
				top: 7.5px !important;
			}

			.cardtopper{
				text-align: center !important;
			}


			.controlbutton{
				display: none;
			}

			.caption{
				font-size: 20px !important;
			}

			.customtext, .customtitle{

				bottom:0px !important;
				left: 0px !important;
				width: 90% !important; 	

			}

			.customRow{
				margin-right: 0px !important;
			    margin-left: 0px !important;
			}

			.cardTitlebox{
				font-size: 14px !important;
			}

			.cardTextBox{
				font-size: 12px !important;
			}

			.boxRegresive{
				top: 25px !important;
			}

			.customheight{
				height: 420px !important;
			}

			#formSlow{
				margin-bottom: 100px;
			}

			.fleft, .fright{
				text-align: center !important;
			}

			.disResp{
				display: none;
			}

			.navbar-brand{
				margin: 0px auto !important;
			}
			
		}

		.customheight{
			height: 580px;
		}


		.ftbottom{
			background-color: #FFFFFF;
			padding: 1rem 0rem;
			font-size: 14px;
			color: #333333;
			border-top: 1px solid #E0E0E0;
		}

		.fticon{
			color: #777;
			text-decoration: none;
			font-size: 18px;
			margin-right: 10px;
		}

		.fticon:hover{
			color: #000;
			text-decoration: none;
			font-size: 18px;
			margin-right: 10px;
		}

		.fticona{
			color: #EEE;
			text-decoration: none;
			font-size: 18px;
			margin-right: 10px;
		}

		.fticona:hover{
			color: #FFF;
			text-decoration: none;
			font-size: 18px;
			margin-right: 10px;
		}

		.fleft{
			text-align: left;
		}

		.fright{
			text-align: right;
		}

		.ourteam{
			background-color: #F0F0F0;
			padding: 3rem 0rem 5rem 0rem;
		}

		.back4_title{
			font-family: "PoppinsBold";
			font-size: 36px;
			background-color: #F0F0F0;
			position: relative;
			bottom: 120px;
			color: #222222;
			height: 100px;
		}

		.TeamPicture{
			background-color: #BDBDBD;
			width: 100%;
			height: 200px;
			background-position: center 25%;
			background-repeat: no-repeat;
			background-size: cover;
		}

		.card{
			border-radius: 0px;
			border:none;
			padding: 0px;
		}

		.card-body{
			padding: 0px !important;
			padding-top: 15px !important;
		}

		.card-body p{
			text-align: center;
			margin-bottom: 5px;
		}

		.mist{
			font-family: "PoppinsBold";
			font-size: 18px;
		}

		.mist2{
			font-family: "PoppinsLight";
			font-size: 12px;
			margin-bottom: 15px !important;
		}

		.btn_linkedin{
			background-color: #024C8C !important;
			width: 100% !important;
			height: 50px !important;
			border:none;
	        background-image: url(../img/linkedin.png);
	        background-position: 50% 40%;
	        background-repeat: no-repeat;
	        background-size: 27px auto;
			border-radius: 0px;
			padding: 10px 20px;
			transition: .5s;
			cursor:pointer;
		}

		.btn_linkedin:hover{
			background-color: #003766 !important;
			transition: .5s;
		}

		.btncarouselright{
			float: right;
			position: relative;
			bottom: 6rem;
			left: 50px;
			cursor: pointer;
		}

		.btncarouselleft{
			float: left;
			position: relative;
			bottom: 6rem;
			right: 50px;
			cursor: pointer;
		}


	/* Accordion */

		.cardfull{
			width: 70%;
			position: static;
			margin: 0px auto;
		}

		.cardtopper{
			font-size: 16px;
			width: 100%;
			background-color: transparent;
			border: 1px solid #1a2e8e;
			cursor: pointer;
			height: 60px;
			margin: 5px 0px;
			transition: .5s;
		}

		.controlbutton{
			background-color: transparent;
			width: 50px;
			padding: 10.5px 20px;
			color: #1a2e8e;
			float: right;
			position: relative;
			top: 3px;
			right: 15px;
			font-size: 24px;
		}

		.contentTopper{
			position:relative;
			left: 20px;
			top: 15px;
			color: #1a2e8e;
			font-size: 20px;
			font-weight: bold;
		}

		.cardcontent{
			border: 1px solid #dcdddd;
			border-top: none;
			padding: 1rem;
			font-size: 14px;
			width: 100%;
			height: auto !important;
			margin-top: 0px;
		}

		.cardcontent > p{
			margin-bottom: 0px;
		}

		.ui-accordion-header-active{
			border: 1px solid #dcdddd !important;
			margin-bottom: 0px !important; 
			transition: .5s;
		}

		.control_icon{
			transition: .5s;
		}

		.btn_details{
			color: white;
			border-radius: 5px;
			background-color: #37a556;
			padding: .5rem 1rem;
			font-size: 20px;
			font-weight: bold;
			border: none;
		}

		.topperMod{
			width: 100%;
			padding: 10px 15px;
			color: white;
			font-weight: bold;
			background-color: #1a2e8e;
			margin-bottom: 0px;
		}