/* dCodes Framework */

.dc_clear { clear: both; padding: 0; margin: 0; width: 100%; font-size: 0px; line-height: 0px; }
.cr-container { width: 940px; height: 400px; overflow: hidden; position: relative; margin: 0 auto; border: 10px solid #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }
.cr-container label { font-style: italic; width: 228.75px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float: left; position: relative; margin-top: 350px; z-index: 1000; text-align: center; }
.cr-container label:before { content: ''; width: 34px; height: 34px; background: rgba(0, 0, 0, 0.3); position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3); z-index: -1; opacity: 0.7; }
.cr-container label:after { width: 1px; height: 400px; content: ''; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 );
position: absolute; bottom: -20px; right: 0px; }
.cr-container label.cr-label-img-4:after { width: 0px; }
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #000; }
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #fff; opacity: 0.8; box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.6); }
.cr-container input { display: none; }
.cr-bgimg { width: 940px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1; }
.cr-bgimg { background-repeat: no-repeat; background-position: 0 0; }
.cr-bgimg div { width: 235px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; }
.cr-bgimg div span { position: absolute; width: 100%; height: 100%; top: 0px; left: -234px; z-index: 2; text-indent: -9000px; }
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(http://pimg.co/p/980x400/111/fff/img.png); }
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(http://pimg.co/p/980x400/333/fff/img.png); }
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(http://pimg.co/p/980x400/666/fff/img.png); }
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(http://pimg.co/p/980x400/999/fff/img.png); }
.cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }
.cr-bgimg div:nth-child(2) span { background-position: -234px 0px; }
.cr-bgimg div:nth-child(3) span { background-position: -468px 0px; }
.cr-bgimg div:nth-child(4) span { background-position: -702px 0px; }
.cr-container input:checked ~ .cr-bgimg div span { -webkit-animation: slideOut 0.6s ease-in-out; -moz-animation: slideOut 0.6s ease-in-out; -o-animation: slideOut 0.6s ease-in-out; -ms-animation: slideOut 0.6s ease-in-out; animation: slideOut 0.6s ease-in-out; }
@-webkit-keyframes slideOut {  0% {left: 0px;}
 100% {left: 234px; }
}
@-moz-keyframes slideOut {  0% {left: 0px;}
 100% {left: 234px;}
}
@-o-keyframes slideOut {  0% {left: 0px;}
 100% {left: 234px;}
}
@-ms-keyframes slideOut {  0% {left: 0px;}
 100% {left: 234px;}
}
@keyframes slideOut {  0% {left: 0px;}
 100% {left: 234px;}
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; -ms-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; left: 0px; z-index: 10;}
.cr-titles h3 { position: absolute; width: 100%; text-align: center; top: 50%; z-index: 1000; opacity: 0; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; }
.cr-titles h3 span:nth-child(1) { font-family: Arial, sans-serif; font-size: 65px; display: block; margin-bottom: 35px; letter-spacing: 7px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.cr-titles h3 span:nth-child(2) { letter-spacing: 0px; display: block-inline; background: rgba(0, 0, 0, 0.2); font-size: 14px; padding: 10px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) { opacity: 1;}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.cr-container { width: 748px; height: 317px; border: 10px solid #fff; }
	.cr-bgimg div { width: 187px; }   
	.cr-container label { width: 187px; margin-top: 266px; }
	.cr-bgimg { width: 748px; height: 317px; }
	.cr-titles h3 { top: 30%; }
	
	
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
	
	}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.cr-container { width: 410px; height: 188px; border: 5px solid #fff; }
	.cr-bgimg div { width: 102.5px; }   
	.cr-container label { width: 102.5px; margin-top: 155px; font-size: 15px; line-height: 19px; height: 28px; }
	.cr-container label:before { width: 20px; height: 20px; margin-left: -10px; }
	.cr-bgimg { width: 410px; height: 188px; }
	.cr-titles h3 { top: 16%; }
	.cr-titles h3 span:nth-child(1) { font-size: 25px; }
	.cr-titles h3 span:nth-child(2) { padding: 5px; font-size: 11px; }
	.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url("http://pimg.co/p/460x188/111/fff/img.png"); }
	.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) {
    background-image: url("http://pimg.co/p/460x188/333/fff/img.png");
	}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) {
    background-image: url("http://pimg.co/p/460x188/666/fff/img.png"); }
	
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) {
    background-image: url("http://pimg.co/p/460x188/999/fff/img.png");
	
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { left: 100%; }
	
	}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	.cr-container { width: 290px; height: 188px; border: 5px solid #fff; }
	.cr-bgimg div { width: 72.5px; }   
	.cr-container label { width: 72.5px; margin-top: 159px; font-size: 15px; line-height: 19px; height: 28px; }
	.cr-bgimg { width: 290px; height: 188px; }
	.cr-titles h3 { top: 20%; }
	.cr-titles h3 span:nth-child(1) { font-size: 28px; }
	.cr-titles h3 span:nth-child(2) { padding: 5px; font-size: 15px; }
	.cr-container label:before { width: 20px; height: 20px; margin-left: -10px; }

	.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url("http://pimg.co/p/460x188/111/fff/img.png"); }
	.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) {
    background-image: url("http://pimg.co/p/460x188/333/fff/img.png");
	}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) {
    background-image: url("http://pimg.co/p/460x188/666/fff/img.png"); }
	
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) {
    background-image: url("http://pimg.co/p/460x188/999/fff/img.png");
	
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { left: 100%; }
	
	}