
#cards {
	width: 700px;
	height: 750px;
	display: inline-block;
	float: left;
	
}

#device {
	width: 520px;
	height: 750px;
	display: inline-block;
	float: left;
}

.nextButton {
	width: 160px; 
	height: 50px; 
	line-height: 50px; 
	vertical-align: middle; 
	background-color: #174275; 
	color: white; 
	font-weight: bold; 
	text-align: center; 
	cursor: pointer;
}


.nextButton:hover { 
	background-color: #009cde;
	color: white;
}

.nextButton:active { 
	background-color: #b3b3b3;
	color: white;
}


.cardMove{
	position:relative;
	z-index: 9999;
}


.marginTopCards{
	margin-top: 50px;
	height: 100px;
}

.marginTopButton{
	margin-top: 75px;
}

#cardSlide {
	width: 100%;
}

#cardSlide img {
	cursor: pointer;
}

#cardOne {
	margin-left: 57px;
}

.marginTop15 {
	margin-top: 15px;
}

.cardsLeft {
	display: inline-block;
	width: 60%;
	height: 100px;
	color: #174275;
	float: left;
	padding-right: 50px;
	
}

.cardsRight {
	display: inline-block;
	width: 25%;
	height: 100px;
	float: left;
}



.singleImg{
	position: relative;
	width: 448px;
	height: 697px;
	background: url(../../../img/deviceone/deviceone.png) no-repeat;
}

#infoImage{
	position: absolute;
    left: 88px;
    top: 221px;
    width: 270px;
    height: 190px;
	background: url(../../../img/deviceone/KZKGOP_infokiosk_naklejka.png) no-repeat;
	background-size: 270px 190px;
}

/* blue screen */

.blueScreen {
	position: absolute;
	left: 125px;
	top: 55px;
	width: 200px;
	height: 115px;
	background-color: #2a54a1;
	z-index: -50;
}

.blueScreenEvent {
	position: absolute;
	left: 125px;
	top: 55px;
	width: 200px;
	height: 115px;
	z-index: -50;
}

.blueBg {
	position: absolute;
	top: 13px;
	left: 9px;
	width: 180px;
	height: 105px;
	background: url(../../../img/deviceone/bgoptone.png) no-repeat;
	background-size: contain;
	z-index: -50;
}

/* blue screen end */

/* text opt 1 */

.optOneTop {
	//font: Lato, regular;
	top: 6px;
	position: absolute;
	font-weight: normal;
	font-size: 10px;
	width: 180px;
	text-align: center;
	color: white;
}

.optOneMidTop {
	//font: Lato, regular;
	top: 32px;
	position: absolute;
	font-weight: bold;
	font-size: 12px;
	width: 180px;
	text-align: center;
	color: white;
}

.optOneBottom {
	//font: Lato, regular;
	top: 74px;
	position: absolute;
	font-weight: normal;
	font-size: 11px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 1 end */

/* text opt 2 */

.optTwoMidTop {
	//font: Lato, regular;
	top: 23px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 2 end */


/* text opt 3 */

.optThreeTop {
	//font: Lato, regular;
	top: 6px;
	position: absolute;
	font-weight: normal;
	font-size: 11px;
	width: 180px;
	text-align: center;
	color: white;
}

.optThreeMidTop {
	//font: Lato, regular;
	top: 28px;
	position: absolute;
	font-weight: normal;
	font-size: 12px;
	width: 180px;
	text-align: center;
	color: white;
}

.optThreeMidBottom {
	//font: Lato, regular;
	top: 45px;
	position: absolute;
	font-weight: normal;
	font-size: 12px;
	width: 180px;
	text-align: center;
	color: white;
}

.optThreeBottom {
	//font: Lato, regular;
	top: 74px;
	position: absolute;
	font-weight: normal;
	font-size: 11px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 3 end */


/* text opt 4 */

.optFourMidTop {
	//font: Lato, regular;
	top: 30px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 4 end */

/* text opt 5 */

.optFiveTop {
	//font: Lato, regular;
	top: 13px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

.optFiveMidTop {
	//font: Lato, regular;
	top: 33px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

.optFiveMidBottom {
	//font: Lato, regular;
	top: 53px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 5 end */

/* text opt 6 */

.optSixTop {
	//font: Lato, regular;
	top: 6px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

.optSixMidTop {
	//font: Lato, regular;
	top: 25px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

.optSixMidBottom {
	//font: Lato, regular;
	top: 44px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

.optSixBottom {
	//font: Lato, regular;
	top: 63px;
	position: absolute;
	font-weight: normal;
	font-size: 15px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 6 end */

/* text opt 7 */

.optSevenMidTop {
	//font: Lato, regular;
	top: 28px;
	position: absolute;
	font-weight: normal;
	font-size: 12px;
	width: 180px;
	text-align: center;
	color: white;
}

.optSevenMidBottom {
	//font: Lato, regular;
	top: 45px;
	position: absolute;
	font-weight: normal;
	font-size: 12px;
	width: 180px;
	text-align: center;
	color: white;
}

.optSevenBottom {
	//font: Lato, regular;
	top: 74px;
	position: absolute;
	font-weight: normal;
	font-size: 11px;
	width: 180px;
	text-align: center;
	color: white;
}

/* text opt 7 end */


/* buttons */

.btnLeftUp {
	position: absolute;
	left: 46px;
	top: 64px;
	width: 45px;
	height: 45px;
	cursor: pointer;
}

.btnLeftDown {
	position: absolute;
	left: 46px;
	top: 121px;
	width: 45px;
	height: 45px;
	cursor: pointer;
}

.btnRightUp {
	position: absolute;
	left: 357px;
	top: 68px;
	width: 45px;
	height: 45px;
	    cursor: pointer;
}

.btnRightDown {
	position: absolute;
	left: 356px;
	top: 123px;
	width: 45px;
	height: 45px;
	    cursor: pointer;
}

/* buttons end */

/* leds */

.ledRed {
	position: absolute;
	left: 28px;
	top: 170px;
	width: 114px;
	height: 86px;
	background: url(../../../img/deviceone/redled.png) no-repeat;	
}

.ledYellow {
	position: absolute;
	left: 155px;
	top: 170px;
	width: 129px;
	height: 98px;
	background: url(../../../img/deviceone/yellowled.png) no-repeat;	
}

.ledGreen {
	position: absolute;
	left: 297px;
	top: 170px;
	width: 143px;
	height: 86px;
	background: url(../../../img/deviceone/greenled.png) no-repeat;	
}



/* leds end */