/*
Theme Name: SSA Culinary Institute
Author: 	Diego Pinlac II
Author URI: http://diegopinlac.ueuo.com/;
Version:	1.0
*/

/* MAIN */
	* 			{font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; }
	@font-face {
	  font-family: 'BlackJack';
	  src: url('design/font/web-font.eot'); /* IE9 Compat Modes */
	  src: url('design/font/web-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	       url('design/font/web-font.woff2') format('woff2'), /* Super Modern Browsers */
	       url('design/font/web-font.woff') format('woff'), /* Pretty Modern Browsers */
	       url('design/font/web-font.ttf')  format('truetype'), /* Safari, Android, iOS */
	       url('design/font/web-font.otf')  format('opentype'), /* Safari, Android, iOS */
	       url('design/font/web-font.svg#svgFontName') format('svg'); /* Legacy iOS */
	}
	body {
		max-width: 100%;
	    overflow-x: hidden;
	}
	h1,h2,h3,h4,h5,p {margin: 0;}
	.clear 		{clear: both;}
	.bold 		{font-weight: bold;}

	.uppercase	{text-transform: uppercase;}
	.italic		{font-style: italic;}

	.txt-xxs 	{font-size: 10px;}
	.txt-xs 	{font-size: 12px;}
	.txt-sm 	{font-size: 14px;}
	.txt-md 	{font-size: 16px;}
	.txt-lg 	{font-size: 20px;}
	.txt-xl 	{font-size: 22px;}
	.txt-xxl	{font-size: 30px;}

    .font-black-jack {font-family: 'BlackJack', Fallback, sans-serif;}
	@media screen and (max-width : 300px) {
		.txt-sm {font-size: 12px;}
		.txt-md {font-size: 14px;}
		.txt-lg {font-size: 18px;}
		.txt-xxl{font-size: 25px;}
	}
	@media screen and (max-width : 220px) {
		.txt-sm {font-size: 10px;}
		.txt-md {font-size: 12px;}
		.txt-lg {font-size: 16px;}
		.txt-xxl{font-size: 20px;}
	}

	h1 {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	h2 {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	@media screen and (max-width : 768px) {
		h1 {
			font-size: 18px;
		}

		h2 {
			font-size: 16px;
		}
	}
	@media screen and (max-width : 389px) {
		h1 {
			font-size: 16px;
		}

		h2 {
			font-size: 14px;
		}
		p {
			font-size: 12px;
		}
	}
	@media screen and (max-width : 210px) {
		h1 {
			font-size: 14px;
		}

		h2 {
			font-size: 12px;
		}
		p {
			font-size: 10px;
		}
	}


	.bg-white	{background-color: #fff}
	.bg-red		{background-color: #b80f0a !important;}
	.bg-yellow	{background-color: #f89c1d;}
	.bg-cace	{background-color: #e2c79a;}

	.btn-transparent {
		background-color: Transparent;
	    background-repeat:no-repeat;
	    border: none;
	    cursor:pointer;
	    overflow: hidden;
	    outline:none;
	}
	
	.btn-signup {
	    background-color: #f89c1d;
	    color: #fff;
	}

	.txt-white	{color: #fff;}
	.txt-black	{color: #000;}
	.txt-gray	{color: #1a1a1a;}
	.txt-red	{color: #b80f0a;}
	.txt-yellow {color: #f89c1d;}

	.width-70 	{width: 70%;}
	.width-80 	{width: 80%;}
	.width-85 	{width: 85%;}
	.width-100 	{width: 100% !important;}
	.center		{text-align: center;}
	.margin-0 {margin: 0;}
	.margin-10 {margin: 10px 0 !important;}
	.margin-top-10 {margin-top: 10px;}
	.margin-top-25 {margin-top: 25px;}
	.margin-top-70 {margin-top: 70px;}
	.margin-left-25 {margin-left: 25px;}
	.margin-auto {
		margin-left: auto;
		margin-right: auto;
	}
	
	.padding-0 {padding: 0;}
	.padding-empty {padding: 180px 0;}
	.padding-empty2 {padding: 100px 0;}
	.padding-empty3 {padding: 50px 0;}
	.padding-empty4 {padding: 119px 0;}
	.padding-empty5 {padding: 150px 0;}

	.padding-lr1 {padding: 0 10px;}
	.padding-lr2 {padding: 0 25px;}

	.padding-top-25 {padding-top: 25px;}

	.f-left {float: left;}
	.f-right {float: right;}

	.text-left {text-align: left;}
	.text-right {text-align: right;}

	.border-black {border: 1px solid #ccc;}

	.weight-normal {font-weight: normal;}

	hr.style-one {
	    border: 0;
	    height: 1px;
	    background: #333;
	    background-image: linear-gradient(to right, #ccc, #333, #ccc);
	}

	.c-pointer {cursor: pointer;}


/* NAV */
	.nav {
		/*background: url(../mainsite-theme/design/images/background/wood.png);
		background-repeat: repeat;*/
		/*padding: 40px 0 10px 0;*/
	}

	.nav img {
		margin-bottom: 20px;
	}

	@media screen and (max-width : 768px) {
		.nav img {
			width: 60%;
			height: auto;
			margin-bottom: 20px;
		}
	}
	@media screen and (max-width : 389px) {
		.nav img {
		    width: 80%;
		    margin-bottom: 0;
		}
	}

	.affix {
		background-color: #b80f0a;
		position: fixed;
		top: 0;
	    z-index: 1000;
	}
	.affix a,
	.affix a.active {
		color: #fff;
	}
	.affix a:hover,
	.affix a:focus,
	.affix a:active {
		color: #f89c1d;
	}

	/*nav {
		position: relative;
		text-align : center;
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	nav a {
		color: #737373;
		padding-left: 40px;
		padding-right: 40px;
		font-size: 18px;
	}
	@media screen and (max-width : 768px) {
		nav a {
			padding-left: 20px;
			padding-right: 20px;
			font-size: 18px;
		}
	}
	@media screen and (max-width : 479px) {
		nav a {
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	@media screen and (max-width : 389px) {
		nav a {
			padding-left: 20px;
			padding-right: 20px;
			font-size: 16px;
		}
	}
	@media screen and (max-width : 210px) {
		nav a {
			padding-left: 10px;
			padding-right: 10px;
			font-size: 14px;
		}
	}
	nav a.active {
		color: #b80f0a;
		font-weight: bold;
	}
	nav a:hover,
	nav a:focus,
	nav a:active {
		color: #b80f0a;
		text-decoration: none;
	}*/
	

/* RESPONSIVE NAV */
/*	.responsive-nav {
		display: none;
		position: absolute;
		z-index: 99;
		width: 100%;
	}
	.responsive-nav ul {
	    list-style-type:none;
	    margin:0;
	    padding:0;
	    position: absolute;
	}
	.responsive-nav li {
	    display:inline-block;
	    float: left;
	    margin-right: 1px;
	}
	.responsive-nav li a {
	    display:block;
	    min-width:140px;
	    height: 50px;
	    text-align: center;
	    line-height: 50px;
	    color: #b80f0a;
	    background: #fff;
	    text-decoration: none;
	}
	.responsive-nav li:hover a {
	    background: #ffeceb;
	}
	.responsive-nav li:hover ul a {
	    background: #f3f3f3;
	    color: #2f3036;
	    height: 40px;
	    line-height: 40px;
	}
	.responsive-nav li:hover ul a:hover {
	    background: #ffeceb;
	    color: #fff;
	}
	.responsive-nav li ul {
	    display: none;
	}
	.responsive-nav li ul li {
	    display: block;
	    float: none;
	}
	.responsive-nav li ul li a {
	    width: auto;
	    min-width: 100px;
	    padding: 0 20px;
	}
	.responsive-nav ul li a:hover + .hidden, .hidden:hover {
	    display: block;
	}
	.responsive-nav .show-menu {
	    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	    text-decoration: none;
	    color: #fff;
	    background: #b80f0a;
	    text-align: center;
	    padding: 10px 0;
	    display: none;
	    margin-bottom: 0;
	}
	.responsive-nav input[type=checkbox]{
	    display: none;
	}
	.responsive-nav input[type=checkbox]:checked ~ #menu{
	    display: block;
	}
	@media screen and (max-width : 800px){
		.responsive-nav {
			display: block;
		}
		.nav-menu {
			display: none;
		}
		.add-margin-top {
			margin-top: 40px;
		}
	    .responsive-nav ul {
	        position: static;
	        display: none;
	    }
	    .responsive-nav ul li, li a {
	        width: 100%;
	    }
	    .responsive-nav .show-menu {
	        display:block;
	    }
	}
*/


/* MAIN CONTENT */
	/* template */
		.img-header {
			width: 100%;
			height: auto;
		}
		.main-content {
		    padding: 40px 0;
		}
		@media screen and (max-width : 768px) {
			.main-content {
			    padding: 20px 0;
			}
		}
		@media screen and (max-width : 210px) {
			.main-content {
			    padding: 10px;
			}
		}
		.main-content h1.header-text:after,
		.main-content p.header-text:after {
			content: ""; /* This is necessary for the pseudo element to work. */ 
		    display: block; /* This will put the pseudo element on its own line. */
		    margin: 0 auto; /* This will center the border. */
		    width: 10%; /* Change this to whatever width you want. */
		    padding-top: 15px; /* This creates some space between the element and the border. */
		    border-bottom: 1.5px solid #f89c1d; /* This creates the border. Replace black with whatever color you want. */
		}
		.main-content p {
		    width: 50%;
		    margin-left: auto;
		    margin-right: auto;
		}
		.home-add-content p {
		    width: 100%;
		}
		.main-content p img {
			margin: 15px 0;
		}
		@media screen and (max-width : 768px) {
			.main-content p {
				width: 100%;
			}
			.main-content p img {
				width: 50%;
				height: auto;
			}
		}
		@media screen and (max-width : 300px) {
			.main-content p img {
				width: 65%;
				height: auto;
			}
		}

	/* home */
	    .show-me {display: none;}
	    @media screen and (max-width : 1582px) {
			.show-me {display: block;}
		}
		.cont-slider {
			margin: 10px 20px;
			/*margin: 10px 0;*/
		}
	    .main-content .slick-slide {margin: 0px 20px;}
	    .main-content .slick-slide img { height: auto; max-height: 283px}
	    .main-content .slick-prev:before,
	    .main-content .slick-next:before {color: black;}
	    .main-content .slick-slide {
			transition: all ease-in-out .3s;
			opacity: .2;
	    }
	    .main-content .slick-active {opacity: 1;}
	    .main-content .slick-current {opacity: 1;}

	    .main-content .slick-courses .each-course {
	    	box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
	    }
	    .main-content .slick-courses .each-course:hover,
	    .main-content .slick-courses .each-course:active,
	    .main-content .slick-courses .each-course:focus,
	    .main-content .each-course a:hover,
	    .main-content .each-course a:active,
	    .main-content .each-course a:focus {
	    	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	    	color: #1a1a1a;
	    	text-decoration: none;
	    }

	    .main-content .slick-courses .img-title {position: relative;}
	    .main-content .slick-courses .img-course {
	    	width: 100%;
	    	/*max-width: 300px;*/
	    	height: auto;
	    }
	    .main-content .slick-courses .title-course {
	    	/*position: absolute;
		    bottom: -25px;
		    left: 0px;
		    right: 0;*/
		    width: 100%;
		    height: 50px;
			border: 1px solid #707070;
			border-bottom: none;
		    /*padding: 5px 15px;*/
			/*border: 1.25px solid #b80f0a;*/
	    }
	    .main-content .slick-courses .title-course p {
	    	width: 100%;
	    	padding: 5px 30px;
	    	position: relative;
			top: 50%;
			transform: translateY(-50%);
	    }
		@media screen and (max-width : 1498px) {
			.main-content .slick-courses .title-course p {
			    padding: 0;
			}
		}
	    @media screen and (max-width : 530px) {
			.main-content .slick-courses .title-course {
			    width: auto;
			    padding: 5px 5px;
			}
		}
	    .main-content .slick-courses .desc-course {
			border: 1px solid #707070;
			border-top: none;
	    	padding: 0 15px;
			overflow: hidden;
			width: 100%;
			/*max-width: 700px;*/
			min-height: 123px;
	    }
	    @media screen and (max-width : 1857px) {.main-content .slick-courses .desc-course {min-height: 167px;}}
	    @media screen and (max-width : 1457px) {.main-content .slick-courses .desc-course {min-height: 187px;}}
	    @media screen and (max-width : 1284px) {.main-content .slick-courses .desc-course {min-height: 126px;}}
	    @media screen and (max-width : 1077px) {.main-content .slick-courses .desc-course {min-height: 146px;}}
	    @media screen and (max-width : 984px) {
	        .main-content .slick-courses .title-course p {
	    	    padding: 5px 30px;
			}
	        .main-content .slick-courses .desc-course {
	            min-height: 100px;
	        }
	    }
	    @media screen and (max-width : 889px) {.main-content .slick-courses .desc-course {min-height: 110px;}}
	    @media screen and (max-width : 777px) {.main-content .slick-courses .title-course p {padding: 0;}}
	    @media screen and (max-width : 650px) {
	        .main-content .slick-courses .title-course p {
	            padding: 5px 15px;
	        }
	        .main-content .slick-courses .desc-course {
	            min-height: auto;
	        }
	    }

	    .main-content .slick-courses .desc-course span {
	    	font-size: 14px;
	    }

		@media screen and (max-width : 389px) {
			.main-content .slick-courses .desc-course span {
				font-size: 12px;
			}
		}
		@media screen and (max-width : 210px) {
			.main-content .slick-courses .desc-course span {
				font-size: 10px;
			}
		}

		.main-content .slick-courses-popular .title-course {
			padding: 5px 15px;
		}

		/* necessary plugin styles for ellipsis */
			.ellip {
				display: block;
				height: 100%;
			}
			.ellip-line {
				display: inline-block;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-wrap: normal;
			}
			.ellip,
			.ellip-line {
				position: relative;
				overflow: hidden;
				max-width: 100%;
			}

	/* about */
		.main-content .each-row-about {
			width: 50%;
			float: left;
		}

		@media screen and (max-width : 1100px) {
			.main-content .each-row-about {
				width: 100% !important;
				margin-bottom: 25px;
				padding-top: 0;
			}
		}

		.main-content .each-row-about img {
			width: 100%;
			max-height: 325px;
		}
		.main-content .each-row-about p {width: 100%;}
		

	/* courses / modules */
		#unavailable .modal-header {
			border-bottom: none;
		}
		#unavailable .vertical-alignment-helper {
		    display:table;
		    height: 100%;
		    width: 100%;
		    pointer-events:none;
		}
		#unavailable .vertical-align-center {
		    /* To center vertically */
		    display: table-cell;
		    vertical-align: middle;
		    pointer-events:none;
		}
		#unavailable .modal-content {
		    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
		    width:inherit;
		 max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
		    height:inherit;
		    /* To center horizontally */
		    margin: 0 auto;
		    pointer-events:all;
		}




		.page-course .cont-module-wrapper p { 
			width: 100%;
			margin: 0;
		}

		.page-course .module-filter select {
		    width: max-content;
		    min-width: 300px;
		    margin-bottom: 15px;
		}
		@media screen and (max-width : 500px) {
			.page-course .module-filter select {
			    width: 100%;
			    min-width: 100%;
			}
		}
		@media screen and (max-width : 310px) {
			.cont-module-wrapper .each-module table {
			    display: none;
			}
		}
		@media screen and (max-width : 270px) {
			.cont-module-wrapper .each-module p {
				font-size: 4.5vw;
			}
		}

		.cont-module-wrapper {
			max-height: 768px;
			overflow: auto;
			overflow-x: hidden;
		}

		.cont-module-wrapper::-webkit-scrollbar {width: 15px;}
		.cont-module-wrapper::-webkit-scrollbar-track {background-color: #dcdcdc; /* gray */}
		.cont-module-wrapper::-webkit-scrollbar-thumb {background: #b80f0a; /* red */}
		.cont-module-wrapper::-webkit-scrollbar-thumb:hover {background: #a01c18; /* darker red hover */}

		.cont-module-wrapper .each-module {
			margin-bottom: 15px;
		    padding: 15px;
		    border: 1px solid #f89c1d;
		    float: left;
		}
		/*.cont-module-wrapper .each-module .module-thumb {
		    float: left
		}*/
	    .main-content .each-module .module-content {
	    	padding-top: 7px;
	    }
	    @media screen and (max-width : 2372px) {
	    	.main-content .each-module .module-content {
				min-height: 288px;
			}
	    }
	    @media screen and (max-width : 1617px) {
	    	.main-content .each-module .module-content {
				min-height: 308px;
			}
	    }
	    @media screen and (max-width : 1553px) {
	    	.main-content .each-module .module-content {
				min-height: 328px;
			}
	    }
	    @media screen and (max-width : 1407px) {
	    	.main-content .each-module .module-content {
				min-height: 348px;
			}
	    }
	    @media screen and (max-width : 1352px) {
	    	.main-content .each-module .module-content {
				min-height: 376px;
			}
	    }
	    @media screen and (max-width : 1122px) {
	    	.main-content .each-module .module-content {
				min-height: 444px;
			}
	    }
	    @media screen and (max-width : 1100px) {
	    	#page-course #mod-filtered .col-sm-6 {
				width: 50%;
			}
			.main-content .each-module .module-content {
				min-height: 288px;
			}
	    }
	    @media screen and (max-width : 1075px) {
			.main-content .each-module .module-content {
				min-height: 308px;
			}
	    }
	    @media screen and (max-width : 1043px) {
			.main-content .each-module .module-content {
				min-height: 328px;
			}
	    }
	    @media screen and (max-width : 945px) {
			.main-content .each-module .module-content {
				min-height: 348px;
			}
	    }
	    @media screen and (max-width : 908px) {
			.main-content .each-module .module-content {
				min-height: 376px;
			}
	    }
	    @media screen and (max-width : 788px) {
			.main-content .each-module .module-content {
				min-height: 396px;
			}
	    }
	    @media screen and (max-width : 768px) {
	    	#page-course #mod-filtered .col-sm-6 {
				width: 100%;
			}
			.main-content .each-module .module-content {
				min-height: auto;
			}
	    }
		.cont-module-wrapper .each-module .module-thumb img {
		    display: block;
		    width: 100%;
		    height: auto;
		}
		/*.cont-module-wrapper .each-module .module-content {
		    margin-left: 265px
		}*/
		.page-course .cont-module-wrapper table tr td:first-child {
			padding-right: 50px;
		}
		.main-content .skills-future {
			margin-top: 15px !important;
			padding: 5px 20px; 
			width: max-content !important; 
			text-align: center;
		}
		.main-content .no-skills-future {
			width: 100% !important; 
		}
		@media screen and (max-width : 1252px) {
			.main-content .no-skills {
				font-size: 12px;
			}
		}
		@media screen and (max-width : 1567px) {
			.main-content .skills-future {
				width: auto !important;
			}
		}
		@media screen and (max-width : 890px) {
			.cont-module-wrapper .each-module .module-thumb {width: 100%}
			.cont-module-wrapper .each-module .module-thumb img {
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 15px;
			}
			.cont-module-wrapper .each-module .module-content {
			    margin-left: 0;
			    text-align: center;
			}
			.page-course .cont-module-wrapper table,
			.cont-module-wrapper .each-module .module-content p {
				margin-left: auto;
				margin-right: auto;
			}
		}
		@media screen and (max-width : 856px) {
			.cont-module-wrapper .no-available {
				width: 100%;
				height: auto;
			}
		}
		.main-content .each-module {
	    	box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
	    }

	    .main-content .each-module:hover,
	    .main-content .each-module:active,
	    .main-content .each-module:focus,
		.main-content .each-module a:hover,
	    .main-content .each-module a:active,
	    .main-content .each-module a:focus {
	    	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	    	color: #1a1a1a;
	    	text-decoration: none;
	    }

	    .main-content .course-table table th,
	    .main-content .course-table table td {
	    	text-align: center;
	    	padding: 8px 0;
	    }
	    .main-content .course-table table th {
	    	background-color: #fabf6d;
		    color: #333333;
		}
	    .main-content .course-table table th,
	    .main-content .course-table table tr,
	    .main-content .course-table table td {
	    	border: 1px solid #f89c1d
	    }
	    .popover {
		    max-width: 100%; /* Max Width of the popover (depending on the container!) */
		}
		
		.each-kitchenaid {
		    width: 100%;
		    box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
		    margin-bottom: 15px;
            padding: 15px 3px;
            border: 1px solid #f89c1d;
            float: left;
		}
		
		.each-kitchenaid p {
		    width: 100%;
		}


	/* single modules */
		#page-modules p {
			width: 100%;
			margin: 0;
		}

		#page-modules .module-thumbnail-desc {
			width: 33.33333333%;
			padding-right: 10px;
		}
		#page-modules .module-thumb img {
			width: 100%;
			height: auto;
		}
		#page-modules .module-content {
			margin-top: 15px;
		}
		#page-modules .module-content table {
			margin-top: 10px;
			width: 100%;
		}

		#page-modules .module-schedules {
		    width: 66.66666667%;
		    padding-left: 10px;
		}

		@media screen and (max-width : 900px) {
			#page-modules .module-thumbnail-desc,
			#page-modules .module-schedules {
				width: 100%;
				padding: 0;
			}
		}
		#page-modules .module-schedules .sched-container {
			margin-top: 15px;
			max-height: 442px;
		    overflow-y: scroll;
		}

		#page-modules .module-schedules .sched-container::-webkit-scrollbar {width: 15px;}
		#page-modules .module-schedules .sched-container::-webkit-scrollbar-track {background-color: #dcdcdc; /* gray */}
		#page-modules .module-schedules .sched-container::-webkit-scrollbar-thumb {background: #b80f0a; /* red */}
		#page-modules .module-schedules .sched-container::-webkit-scrollbar-thumb:hover {background: #a01c18; /* darker red hover */}

		.sched-container .each-schedule:first-child { margin-bottom: 15px; }
		.sched-container .each-schedule:not(:first-child) {
			margin-top: 15px;
			margin-bottom: 15px;
		}
		.sched-container .each-schedule {
			margin-right: 15px;
		    padding: 15px;
		    border: 1px solid #f89c1d;
		    box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
		}
		.sched-container .each-schedule:hover,
	    .sched-container .each-schedule:active,
	    .sched-container .each-schedule:focus {
	    	box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	    	color: #1a1a1a;
	    	text-decoration: none;
	    }

	    .sched-container .each-schedule .btn-enroll {
	    	background-color: #f89c1d;
	    	color: #fff;
	    }

	    .sched-container .each-schedule .btn-enroll:hover,
	    .sched-container .each-schedule .btn-enroll:active
	    .sched-container .each-schedule .btn-enroll:focus {
    	    background-color: #f1b86b;
	    }
	    
	    .mobile-ver1,
	    .mobile-ver2 {
		    display: none;
		}
	    
	    @media screen and (max-width : 700px) {
			.desktop-ver {
			    display: none;
			}
			.mobile-ver1 {
			    display: block;
			}
			.mobile-ver2 {
			    display: none;
			}
		}
		
		@media screen and (max-width : 325px) {
			.desktop-ver {
			    display: none;
			}
			.mobile-ver1 {
			    display: none;
			}
			.mobile-ver2 {
			    display: block;
			}
		}

	/* registration */
		.main-content .btn-option {
			background-color: #f89c1d;
    	    color: #fff;
		    width: 100%;
		    padding: 13px 0;
		    box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
	    }

		.main-content .btn-transparent {
		    width: 100%;
		    padding: 13px 0;
		    transition: 0.3s;
			border: 1px solid;
	    }

	    .main-content .btn-option:hover,
	    .main-content .btn-option:active
	    .main-content .btn-option:focus {
    	    background-color: #f1b86b;
    	    box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	    }

		.main-content .btn-transparent:hover,
	    .main-content .btn-transparent:active
	    .main-content .btn-transparent:focus {
    	    background-color: gray;
			color: #fff;
    	    box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
	    }

	    #page-sponsored p {
	    	width: 100%;
	    }


		.input-field {
			position: relative;
			width: 100%;
			height: 44px;
			line-height: 44px;
			margin-bottom: 20px;
		}

		.form-label {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			color: #6b6b6b;
			transition: 0.2s all;
		}

		.form-input {
			width: 100%;
			border: 0;
			outline: 0;
			padding: 0;
			border-bottom: 2px solid #21201e;
		}

		select.form-input { height: 46px; }
		.form-input:focus,
		.form-input:required:valid,
		.form-input[disabled] {
			background-color: transparent;
			border-color: #f89c1d;
			font-weight: bold;
		}

		.form-input:focus ~ .form-label,
		.form-input:required:valid ~ .form-label,
		.form-input[disabled] ~ .form-label {
			top: -18px;
			color: #f89c1d;
		}

		.form-input:valid ~ .form-label {
			top: -18px;
		}
		
		.main-content .btn-sub {
		    padding: 8px 0;
	    }

	    .added .form-input::placeholder {
		    color: #6b6b6b;
		    opacity: 1;
		    font-weight: bold;
		}

		.added .form-input:::-ms-input-placeholder {
		   color: #6b6b6b;
		   font-weight: bold;
		}

		.added .form-input::::-ms-input-placeholder {
		   color: #6b6b6b;
		   font-weight: bold;
		}

	/* news and events */
		.page-news-and-events p {
			width: 100%;
		}
		.page-news-and-events .slick-courses .img-title {padding: 25px;}
		.page-news-and-events .slick-courses .img-course {max-width: none;}
		.page-news-and-events .slick-courses .desc-course {border: none;}
		.page-news-and-events .slick-courses .each-course {border: 1px solid #f89c1d;}
		.page-news-and-events .slick-courses .desc-course {padding: 15px;}
		.page-news-and-events .slick-courses .desc-course {max-width: none;min-height: 135px;}
		@media screen and (max-width : 1716px) {.page-news-and-events .slick-courses .desc-course {min-height: 155px;}}
		@media screen and (max-width : 1484px) {.page-news-and-events .slick-courses .desc-course {min-height: 175px;}}
		@media screen and (max-width : 1326px) {.page-news-and-events .slick-courses .desc-course {min-height: 195px;}}
		@media screen and (max-width : 1240px) {.page-news-and-events .slick-courses .desc-course {min-height: 215px;}}
		@media screen and (max-width : 1107px) {.page-news-and-events .slick-courses .desc-course {min-height: 235px;}}
		@media screen and (max-width : 1017px) {.page-news-and-events .slick-courses .desc-course {min-height: 255px;}}
		@media screen and (max-width : 1000px) {.page-news-and-events .slick-courses .desc-course {min-height: 115px;}}
		@media screen and (max-width : 803px) {.page-news-and-events .slick-courses .desc-course {min-height: 135px;}}
		@media screen and (max-width : 740px) {.page-news-and-events .slick-courses .desc-course {min-height: 155px;}}
		@media screen and (max-width : 626px) {.page-news-and-events .slick-courses .desc-course {min-height: 175px;}}
		@media screen and (max-width : 590px) {.page-news-and-events .slick-courses .desc-course {min-height: auto;}}
		
		.page-news-and-events .slick-courses .img-title {position: relative;}
	    .page-news-and-events .slick-courses .img-course {
	    	width: 100%;
	    	/*max-width: 300px;*/
	    	height: auto;
	    }
	    .page-news-and-events .slick-courses .title-course {
	    	position: absolute;
		    bottom: -25px;
		    left: 0px;
		    right: 0;
		    width: 190px;
		    padding: 5px 15px;
			border: 1.25px solid #b80f0a;
	    }
	    .page-news-and-events .slick-courses .title-course p {
	    	padding: 0;
	    }
	    @media screen and (max-width : 530px) {
			.page-news-and-events .slick-courses .title-course {
			    width: auto;
			    padding: 5px 5px;
			}
		}
	    .page-news-and-events .slick-courses .desc-course {
    	    padding: 15px 15px;
		    overflow: hidden;
		    width: 100%;
		    /*max-width: 700px;*/
		    min-height: 90px;
	    }



		.page-news-and-events .slick-courses .title-course {
			bottom: 8px;
			border: 1.25px solid #f89c1d;
			padding: 5px;    
			width: 300px;
		    line-height: 1em;
		}
		@media screen and (max-width: 560px) {
			.page-news-and-events .slick-courses .title-course  {
				width: 100%;
			}
		}

	/* careers */
		.careers-wrapper {
			margin: 25px 0;
		}

		.careers-wrapper .each-career {
			width: 33.33333333%;
			padding: 15px;
			position: relative;
		}
		.careers-wrapper .each-career .career-container {
		    box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.2);
		    transition: 0.3s;
		}
		.careers-wrapper .each-career .career-container:hover,
		.careers-wrapper .each-career .career-container:active,
		.careers-wrapper .each-career .career-container:focus {
		    box-shadow: 2px 8px 16px 0 rgba(0,0,0,0.2);
		    color: #1a1a1a;
		    text-decoration: none;
		}

		.careers-wrapper .each-career img {
			width: 100%;
			height: auto;
		}
		.careers-wrapper .each-career .career-title-content {
		    position: absolute;
		    bottom: 15px;
		    left: 0;
		    right: 0;
		    width: 100%;
	        padding: 0 15px;
		}

		.careers-wrapper .each-career .career-title-content .career-title p {width: 100%;}
		.careers-wrapper .each-career .career-title-content .career-title {
			background-color: #ffffffbf;
			padding: 5px;
			line-height: 30px;
			border: 1px solid #000;
		}

		@media screen and (max-width : 1366px) {
			.careers-wrapper .each-career .career-title-content .career-title {line-height: 20px;}
		}
		@media screen and (max-width : 768px) {
			.careers-wrapper .each-career { width: 50%; }
		}
		@media screen and (max-width : 460px) {
			.careers-wrapper .each-career { width: 100%; }
		}
		.modal p {
			width: 100%;
		}

	/* single template */

		#single-alone .slick-slide img {max-height: none;}
		#single-alone .slide-wrap {
			display: -webkit-box;
		    display: -moz-box;
		    display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -moz-box-orient: vertical;
		    -webkit-flex-direction: column;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    /* optional */
		    -webkit-box-align: start;
		    -moz-box-align: start;
		    -ms-flex-align: start;
		    -webkit-align-items: flex-start;
		    align-items: flex-start;
		}

		#single-alone .slide-wrap .slider-content-left {
			-webkit-box-ordinal-group: 2;
		    -moz-box-ordinal-group: 2;
		    -ms-flex-order: 2;
		    -webkit-order: 2;
		    order: 2;
		    width: 100%;
		    padding-left: 0.9375em;
		    padding-right: 0.9375em;
		    padding-top: 0;
		}

		#single-alone .slide-wrap .slider-content-left h2,
		#single-alone .slide-wrap .slider-content-left p {
			width: 100%;
			text-align: center;
			margin-top: 20px!important;
		}

		#single-alone .slide-wrap .slider-content-right {
			-webkit-box-ordinal-group: 1;
		    -moz-box-ordinal-group: 1;
		    -ms-flex-order: 1;
		    -webkit-order: 1;
		    order: 1;
		    width: 100%;
		}

	/* gallery */
		#our-creations .cont-slider .each-product {
			margin-bottom: 10px;
			padding: 0 6px;
			width: 25%;
			float: left;
		}
		
		#our-creations .cont-slider .each-product a {color: #1a1a1a;}
		#our-creations .cont-slider .each-product a:hover, 
		#our-creations .cont-slider .each-product a:active, 
		#our-creations .cont-slider .each-product a:focus {
		    color: #f89c1d;
		    text-decoration: none;
		}
		
		#our-creations .cont-slider .each-product .creations-desc {
			min-height: 70px;
		}
		@media screen and (max-width : 1608px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 84px;
		    }
		}
		@media screen and (max-width : 1319px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 106px;
		    }
		}
		@media screen and (max-width : 930px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 126px;
		    }
		}
		@media screen and (max-width : 896px) {
		    #our-creations .cont-slider .each-product {
		        width: 33.33333333%;
		    }
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 106px;
		    }
		}
		@media screen and (max-width : 768px) {
		    #our-creations .cont-slider .each-product {
		        width: 50%;
		    }
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 84px;
		    }
		}
		@media screen and (max-width : 663px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 106px;
		    }
		}
		@media screen and (max-width : 467px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 128px;
		    }
		}
		@media screen and (max-width : 444px) {
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: 148px;
		    }
		}
		@media screen and (max-width : 417px) {
		    #our-creations .cont-slider .each-product {
		        width: 100%;
		    }
		    #our-creations .cont-slider .each-product .creations-desc {
		        min-height: auto;
		    }
		}

		.main-content .cont-slider .slick-track {
			margin-left: auto;
			margin-right: auto;
		}
		.main-content .cont-slider .each-product a:hover, 
		.main-content .cont-slider .each-product a:active, 
		.main-content .cont-slider .each-product a:focus {
		    color: #f89c1d;
		    text-decoration: none;
		}
		.each-product {
			text-align: center;
		}

		.each-product img {
			width: 100%;
		}

		.each-product p {
			width: 100%;
		}

	/* skillsfuture credit */
	#skillsfuture p {
		width: 100%;
	}

	#skillsfuture .instruction {
	    border: 1px solid #000;
	    padding: 10px 25px;
	    margin-bottom: 25px;
	}

	#skillsfuture .form-input[type="file"] {
		-webkit-box-shadow: none;
	    box-shadow: none;
	    -webkit-transition: none;
	    -o-transition: none;
	}


/* ABOVE FOOTER */
	.abv-footer {padding: 20px 0;}
	.abv-footer .per-col {
		width: 15%;
		padding: 2px;
		float: left;
	}

	@media screen and (max-width : 1048px) {
		.abv-footer .col-1,
		.abv-footer .col-2,
		.abv-footer .col-3,
		.abv-footer .col-4 {
			width: 25%;
		}
		.abv-footer .col-5 {
			width: 100%;
			margin-top: 20px;
		}
	}
	@media screen and (max-width : 768px) {
		.abv-footer .col-1,
		.abv-footer .col-2,
		.abv-footer .col-3 {width: 33.33333333%;}
		.abv-footer .col-4,
		.abv-footer .col-5 {
			width: 50%;
			margin-top: 20px;
		}
	}
	@media screen and (max-width : 470px) {
		.abv-footer .col-1,
		.abv-footer .col-2 {width: 50%;}
		.abv-footer .col-3,
		.abv-footer .col-4 {
			width: 50%;
			margin-top: 20px;
		}
		.abv-footer .col-5 {
			width: 100%;
			margin-top: 20px;
		}
	}
	@media screen and (max-width : 300px) {
		.abv-footer .col-1 {width: 100%;}
		.abv-footer .col-2,
		.abv-footer .col-3,
		.abv-footer .col-4,
		.abv-footer .col-5 {
			width: 100%;
			margin-top: 20px;
		}
	}

	.abv-footer .title {margin: 0 0 10px;}
	.abv-footer a:hover,
	.abv-footer a:focus,
	.abv-footer a:active {
		color: #1a1a1a;
		text-decoration: underline;
	}
	.abv-footer .fa-ul {
	    margin-left: 0;
	}
	
	.abv-footer .btn-news {
	    position: absolute;
	    top: 20px;
	    right: 0;
	    color: #707070;
	}

	.abv-footer .input {
		position: relative;
		z-index: 1;
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}

	.abv-footer .input__field {
		position: relative;
		display: block;
		float: right;
		padding: 0.8em;
		width: 60%;
		border: none;
		border-radius: 0;
		background: #f0f0f0;
		color: #aaa;
		font-weight: 400;
		-webkit-appearance: none; /* for box shadows to show on iOS */
	}

	.abv-footer .input__field:focus {
		outline: none;
	}

	.abv-footer .input__label {
		display: inline-block;
		float: right;
		padding: 0 1em;
		width: 40%;
		color: #8e7e64;
		font-weight: normal;
		font-size: 70.25%;
		-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.abv-footer .input__label-content {
		position: relative;
		display: block;
		padding: 0.5em 0;
		width: 100%;
	}

	.abv-footer .graphic {
		position: absolute;
		top: 0;
		left: 0;
		fill: none;
	}

	.abv-footer .input--nao {
		overflow: hidden;
	}

	.abv-footer .input__field--nao {
		padding: 0.5em 0em 0.25em;
		width: 100%;
		background: transparent;
		color: #9da8b2;
		font-size: 1.75em;
	}

	.abv-footer .input__label--nao {
		position: absolute;
		top: 0.95em;
		font-size: 14px;
		left: 0;
		display: block;
		width: 100%;
		text-align: left;
		padding: 0em;
		pointer-events: none;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
		transition: transform 0.2s 0.15s, color 1s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.abv-footer .graphic--nao {
		stroke: #21201e;
		pointer-events: none;
		-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
		transition: transform 0.7s, stroke 0.7s;
		-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
		transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	} 

	.abv-footer .input__field--nao:focus + .input__label--nao,
	.abv-footer .input--filled .input__label--nao {
		color: #333;
		-webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
		transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
	}

	.abv-footer .input__field--nao:focus ~ .graphic--nao,
	.abv-footer .input--filled .graphic--nao {
		stroke: #333;
		-webkit-transform: translate3d(-66.6%, 0, 0);
		transform: translate3d(-66.6%, 0, 0);
	}


/* FOOTER */
	.copyright {padding: 10px 0;}

	.copy-site {float: left;}
	.copy-year {float: right;}


/* WORDPRESS PLUGIN */
	@media screen and (max-width: 1024px) {
		#page-course .csColumn {
			width: 100% !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}
	 
	.csRow p {
		width: 100%;
		text-align: justify;
	}
	
	
	@media screen and (max-width: 800px) {
    	.slick-image-slide img {
    	    width: 100% !important;
    	    height: auto!important;
    	}
    	.slick-image-slide, .slide-wrap {
            height: auto;
        }
	}

/*Job Vacancy Page*/

	.thumbnail {
		padding: 30px;
		margin-top: 2rem;
	}

	.thumbnail-jobs {
    display: block;
    padding: 30px;
    margin-bottom: 50px;
    margin-top: 30px;
    line-height: 1.5;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
	}

	.thumbnail-jobs:hover {
		background-color: #eadcc533;
	}

	.thumbnail-jobs h4 {
		margin-bottom: 2rem;
		text-transform: uppercase;
	}

	.thumbnail-jobs a {
		color: #b80f0a;
	}

	.media {
		margin-top: 0;
	}

	.media-heading {
		margin-bottom: 2rem;
	}

	.single-job {
		padding: 4rem 1rem 4rem 1rem;
	}

	.single-job .row img {
		margin-bottom: 2px;
	}

	.jobs {
		margin-top: 3rem;
	}

	@media only screen and (max-width: 479px) {
	  .sm-none { display: none !important; }
	}

	.bold {
		font-weight: 700;
	}

	.other-jobs {
		background-color: #eeeeee45;
		padding-top: 50px;
	}


	span.circle {
	  background: #b8100a;
	  border-radius: 50%;
	  -moz-border-radius: 50%;
	  -webkit-border-radius: 50%;
	  color: #ffffff;
	  display: inline-block;
	  font-weight: bold;
	  line-height: 40px;
	  margin-right: 5px;
	  text-align: center;
	  width: 100px;
	/*  height: 100px;*/
	  padding: 10px 0;
	  font-size: 25px;
	}

	.ct-ss-bg {
        background-color: #ffb58b !important;
    }
    .ct-bg-age {
        background-color: #f9f994 !important;
    }
    .ct-cs-bg {
        background-color: #dae2f6 !important;
    }

	@media only screen and (max-width: 600px) {
	  .d-sm-none {
	  	display: none;
		}
	}
	
/* Dropdown Button */
.dropbtn {
  background-color: transparent;
/*  color: white;*/
/*  padding: 16px;*/
  font-size: 18px;
  border: none;
	font-family: inherit;

}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  border-bottom: solid 1px #f89c1d;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { 
	background-color: #b80f0a; 
	color: #ffffff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { 
	color: #b80f0a; 
/*	font-weight: 800;*/
}