.device {
			display: inline-block;
			margin: 10px auto;
		}
		
		.frame-mobile {
			border-radius: 25px;
			padding: 50px 2px;
    		background: #151515;
    		box-shadow: 7px 6px 23px 3px rgba(30, 30, 30, 0.48);
		}
		
		.screen-mobile {
			position: relative;
			height: 330px;
			width: 200px;
			background: #444;
			box-shadow: inset 0 0 0 1px #333;
		}
		
		.screen-mobile:before,
		.screen-mobile:after {
			position: absolute;
			width: 32px;
			left: 50%;
			margin-left: -16px;
			border-radius: 16px;
			content: " ";
            background: #292929;
            box-shadow: 0 0 0 1px #5a5a5a;
		}
		
		.screen-mobile:before {
			height: 4px;
    		top: -23px;
		}
		
		.screen-mobile:after {
			height: 32px;
    		bottom: -41px
		}
		
		.frame-tablet {
			border-radius: 25px;
			padding: 50px 2px;
			background: #242324;
			box-shadow: 7px 6px 23px 3px rgba(30, 30, 30, 0.48);
		}
		
		.screen-tablet {
			position: relative;
			height: 440px;
			width: 360px;
    		background: #444;
    		box-shadow: inset 0 0 0 1px #757575;
		}
		
		.screen-tablet:before,
		.screen-tablet:after {
			position: absolute;
			width: 32px;
			left: 50%;
			margin-left: -16px;
			border-radius: 16px;
			content: " ";
			background: #3d3d3d;
			box-shadow: 0 0 0 1px #757575;
		}
		
		.screen-tablet:before {
				width: 10px;
				height: 10px;
				top: -30px;
				margin-left: -5px;
		}
		
		.screen-tablet:after {
			height: 32px;
			bottom: -41px;
		}
		
		.frame-desktop {
			border-radius: 25px;
				padding: 30px 2px 2px;
				border-radius: 10px;
			background: #ddd;
			box-shadow: 7px 6px 23px 3px rgba(30, 30, 30, 0.48);
		}
		
		.screen-desktop {
			position: relative;
				height: 510px;
				width: 900px;
				border-radius: 0 0 10px 10px;
			background: #444;
			box-shadow: inset 0 0 0 1px #333;
		}
		
		.screen-desktop:before,
		.screen-desktop:after {
			position: absolute;
			width: 32px;
			left: 50%;
			margin-left: -16px;
			border-radius: 16px;
			content: " ";
			background: #bbb;
			box-shadow: 0 0 0 1px #eee;
		}
		
		.screen-desktop:before {
				width: 10px;
				height: 10px;
				top: -20px;
				left: 15px;
				background: rgba(255, 100, 100, 1);
				box-shadow: 15px 0 rgba(100, 255, 100, 1), 30px 0 rgba(255, 255, 100, 1);
				margin-left: -5px;
		}
		
		.screen-desktop:after {
				width: 90%;
				height: 16px;
				top: -23px;
				left: 10%;
				border-radius: 5px;
				background: #eee;
			bottom: -41px;
		}
		
		.wrap {
			width: 100%;
			height: 100%;
			overflow-y: scroll;
		}
		.wrap-desktop {
    		border-bottom-left-radius: 8px;
    		border-bottom-right-radius: 8px;
		}
		
		
		.wrap li {
			width: 100%;
			text-align: left;
			border-bottom: 1px dotted #eee;
		}
		.text-center{
			text-align: center !important;
		}
		.device-desktop{
			
		}
		.device-tablet{

		}
		.col-mobile{}
		.col-tablet{}
		.col-desktop{}
		.col-text{}
		.col-hr{
			height: 50px;
		}
		.col-reference-title{
			text-align: left;
			color: #3d3d3d;
			font-size: 28px;
			font-weight: 400;
		}
		.col-reference-motto{
			text-align: right;
			color: #1e76bc;
			font-size: 28px;
			font-weight: 500;
		}
		.btn--blue {
			background-color: #0993FB;
		}
		.client-top-text{
			font-family: 'Coiny', cursive;
			font-size: 35px;
			color: #fff;
			text-align: left !important;
			margin-bottom: -10px;
		}
		.mobile-top-text{
			padding-left: 29px;
		}
		.mobile-top-text{

		}
		.tablet-top-text{
			
		}
		.client-buttons{
			display: inline-flex;
		}
		.client-buttons .js-open-search-popup{
			padding-left: 20px;
		}
		.col-detail{

		}
		
		@media (max-width: 767px){
			.mobile-top-text {
				text-align: center !important;
				margin-left: -110px;
			}
		}
		@media only screen and (min-width:1200px){
			.screen-desktop {
				height: 700px;
				width: 100%;
			}
			.col-mobile{
				text-align: center;
			}
		}
		
		@media (min-width:450px) and (max-width:767px){
			.tablet-top-text {
				text-align: center !important;
				margin-left: -220px;
			}
		}
		@media (min-width:992px) and (max-width:1199px){
			.col-tablet {
				width: 42% !important;
			}
			.col-mobile {
				width: 26% !important;
			}
			.col-detail {
				width: 32% !important;
			}
			.col-text{
				margin-left: 0px !important;
			}
			.reference-detail-area {
				padding: 0px;
			}
			.reference-detail-area {
				height: auto;
			}
			.reference-detail-area .reference-detail-description {
				padding: 0px 30px;
			}
			.reference-detail-area .reference-detail-title-description {
				font-size: 12px;
				font-weight: 400;
				margin: -7px 0px 0px 4px;
				padding-bottom: 13px;
				padding: 0px 30px 10px 30px;
			}
			.reference-detail-area .reference-detail-title-description p{
				font-size: 14px;
			}
			.reference-detail-area .reference-detail-title {
				padding: 10px 30px 0px 30px;
				font-size: 20px;
			}
			.client-buttons {
				padding: 0px 24px 20px 24px;
			}
			.client-buttons .btn{
				cursor: pointer;
				display: inline-block;
				text-decoration: none;
				padding: 10px 10px;
				font-size: 13px;
				color: #fff;
				font-weight: 600;
				border-radius: 20px 0px 20px 0px;
				position: relative;
				transition: all .3s ease;
				text-align: center;
				line-height: 1;
			}
			.mobile-top-text {
				padding-left: 0px;
			}
		}
		@media (min-width:768px) and (max-width:991px){
			.device-desktop{
				max-width: 100%;
			}
			.screen-desktop {
				max-width: 100%;
			}
			.col-tablet {
				width: 61% !important;
			}
			.col-mobile {
				width: 39% !important;
			}
			.col-reference-motto{
				text-align: left;
			}
			.col-mobile .device{
				float: right;
			}
		}
		@media (min-width:801px) and (max-width:940px){
			.col-desktop {
				padding-top: 45px;
			}
		}
		@media (min-width:769px) and (max-width:800px){
			.col-desktop {
				padding-top: 110px;
			}
		}
		@media (min-width:400px) and (max-width:767px){
			.device-desktop{
				width: 100%;
			}
			.screen-desktop {
				width: 100%;
    			height: 350px;
			}
			.screen-desktop:after {
				width: 80%;
				height: 16px;
				top: -23px;
				left: 20%;
				border-radius: 5px;
				background: #eee;
				bottom: -41px;
			}
			.col-mobile {
				padding-top: 100px;
				text-align: center;
			}
			.col-tablet {
				text-align: center;
			}
			.col-reference-motto{
				text-align: center;
			}
			.col-reference-title{
				text-align: center;
			}
		}

		@media only screen and (max-width:399px){
			
			.device-desktop{
				width: 100%;
			}
			.screen-desktop {
				width: 100%;
    			height: 350px;
			}
			.screen-desktop:after {
				width: 75%;
				height: 16px;
				top: -23px;
				left: 27%;
				border-radius: 5px;
				background: #eee;
				bottom: -41px;
			}
			.device-tablet{
				
			}
			.screen-tablet{
				position: relative;
				height: 300px;
				width: 100%;
				background: #444;
				box-shadow: inset 0 0 0 1px #333;
			}
			.col-mobile {
				padding-top: 100px;
				text-align: center;
			}
			.col-tablet {
				text-align: center;
			}
			.col-reference-motto{
				text-align: left;
			}
			.col-reference-title{
				text-align: center;
			}

		}