/*
 * ---- start OUT-BREAKPOINT definition ---- DEFAULT SETTINGS
 */
 
 	.carouselSlide-panel{
		height: 599px;
	}
	
	.firstCarouselSlide-panel{
		background-image: url("../images/crypto-g-art-plan-b-forum-background.png.xhtml") !important;
	}
	
	.secondCarouselSlide-panel{
		background-image: url("../images/management&design_background.png.xhtml") !important;
	}
	
	.advancedCommon-button:before{
		content:"";
		position: absolute;
		bottom: 0;
    	left: 0;
    	width: 0%;
    	height: 100%;
		transition: width 0.3s ease-in-out !important;
		z-index: -1 !important;
		background: #ffedab !important;
		box-shadow: 0 4px 15px 0 #e2f0ff;
	}
	
	.advancedCommon-button{
		background: none !important;
		border-color: #fff8a0;
		z-index: 1;
	}
	
	.advancedCommon-button:hover:before{
		width:100% !important;
	}
		
	.thirdCarouselSlide-panel{
		background-image: url("../images/development_background.png.xhtml") !important;
	}
 
 	.carouselSlideTitle-panel{
  		background: transparent !important;
		padding-left: 37% !important;
    	padding-right: 9% !important;
		text-align: right !important;
 	}
 	
 	.carouselSlideItems-panel{
  		background: transparent !important;
  		padding-left: 50% !important;
		padding-right: 7% !important;
		text-align: right !important;
 	}
 	
 	.secondCarouselItem-label{
 		top: 90px;
 	}
 	
 	.container-panel{
		position: relative;
		height: 860px;
	}
	
	/* start DEVELOPMENT layout */
	
	.developmentTitle-panel{
		height: 300px;
		padding-left: 10% !important;
		padding-right: 10% !important;
	}
	
	@keyframes developmentTitle-move {
	    from {top: 110px; opacity: 0;}
	    to {top: 140px; opacity: 1;}
	}
	
	@keyframes developmentSubtitle-move {
	    from {top: 140px; opacity: 0;}
	    to {top: 170px; opacity: 1;}
	}
		
	.developmentContent-panel{
		position:relative !important;
		height: 500px;
		padding-left: 20%;
    	padding-right: 20%;
	}
	
	/* end DEVELOPMENT layout */
	
	/* start DESIGN layout */
	
	.designTitle-panel{
		height: 300px;
		padding-left: 10% !important;
		padding-right: 10% !important;
		
	}
	
	@keyframes designTitle-move {
	    from {top: 110px; opacity: 0;}
	    to {top: 140px; opacity: 1;}
	}
	
	@keyframes designSubtitle-move {
	    from {top: 140px; opacity: 0;}
	    to {top: 170px; opacity: 1;}
	}
		
	.designContent-panel{
		height: 500px;
		padding-left: 20%;
    	padding-right: 20%;
	}
	
	/* end DESIGN layout */
	
	/* start MANAGEMENT layout */
	
	.managementTitle-panel{
		height: 300px;
		padding-left: 10% !important;
		padding-right: 10% !important;
	}
	
	
	@keyframes managementTitle-move {
	    from {top: 110px; opacity: 0;}
	    to {top: 140px; opacity: 1;}
	}
	
	
	@keyframes managementSubtitle-move {
	    from {top: 140px; opacity: 0;}
	    to {top: 170px; opacity: 1;}
	}
		
	.managementContent-panel{
		height: 500px;
		padding-left: 20%;
    	padding-right: 20%;
	}
	
	/* end MANAGEMENT layout */
	
	/* start SMART COMMERCE layout */
	.smartCommerceContainer-panel{
		position: relative;
		height: 860px;
	}
		
	.smartCommerceTitle-panel{
		height: 300px;
		padding-left: 10% !important;
		padding-right: 10% !important;
	}
	
	@keyframes smartCommerceTitle-move {
	    from {top: 110px; opacity: 0;}
	    to {top: 140px; opacity: 1;}
	}
	
	@keyframes smartCommerceSubtitle-move {
	    from {top: 140px; opacity: 0;}
	    to {top: 170px; opacity: 1;}
	}
		
	.smartCommerceContent-panel{
		height: 500px;
		padding-left: 20%;
    	padding-right: 20%;
	}
	
	.smartCommerceCustomerFuturesContainer-panel{
		height: 380px;
	}
	
	.smartCommerceCustomerJMapHook-panel{
		height: 50px;
		padding-left: 20%;
    	padding-right: 10%;
    	text-align: right;
	}
	
	.smartCommerceCustomerJMap-button{
		top:15px;
	}
	
	.smartCommerceCustomerJMap-button:hover{
		box-shadow: 0 4px 15px 0 #315ca8;
	}
	
	/* end SMART COMMERCE layout */


/* ---- start LARGE SCREEN DEVICE BREAKPOINT ----
 */	
 
@media only screen and (min-width: 1824px) {
	
	
}

/* ---- end Large screen DEVICE BREAKPOINT ----
 */

/* ---- start Desktops and laptops DEVICE BREAKPOINT ----
 */
 
@media only screen and /*(min-width: 1224px) and*/ (max-width: 1823px){

	
	
	
}


/* ---- start LARGE SCREEN DEVICE BREAKPOINT ----
 */	
 
@media only screen and (min-width: 1824px) {
	
	
}

/* ---- end Large screen DEVICE BREAKPOINT ----
 */

/* ---- start Desktops and laptops DEVICE BREAKPOINT ----
 */
 
@media only screen and /*(min-width: 1224px) and*/ (max-width: 1823px){

	
	
	
}

