*{
	margin:0;
	padding: 0;
}

html{
	width: 100%;
	height: 100%;
}

	#wrapper{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.top{
		width: 100%;
		height:115px;
		-webkit-box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
		-moz-box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
		box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
		position: relative;
		background-color: #e61e2b;
	}

		.top .container{
			width: 80%;
			height: 115px;
			margin: 0 auto;
			text-align: center;
		}

			.top .container img{
				position: relative;
				padding-top: 17px;
				/*top: 49%;
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);*/
			}

    @media all and (max-width: 600px) and (min-width: 0) {
        .top{
            width: 100%;
            height:80px;
            -webkit-box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
            -moz-box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
            box-shadow: 0px 6px 8px -1px rgba(133,2,5,1);
            position: relative;
            background-color: #e61e2b;
        }

            .top .container{
                width: 100%;
                height: 80px;
                margin: 0 auto;
                text-align: center;
            }

                .top .container img{
                    width: 70%;
                    max-width: 200px;
                    position: relative;
                    /*top: 49%;
                    -webkit-transform: translateY(-50%);
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);*/
                }
    }

	.main{
		width: 80%;
		margin:0 auto;
		position: relative;
		margin-top: 100px;
	}

    @media all and (max-width: 600px) and (min-width: 0) {
        .main{
            width: 90%;
            margin:0 auto;
            position: relative;
            margin-top: 15px;
            margin-bottom: 15px;
        }
    }

		.main .container{
			width: 100%;
			margin: 0 auto;
		}

    		.main .container #welcome{
    			margin:0 auto;
    			width: 400px;
    			height: 700px;
    			text-align: center;
    			background-color: rgba(230,30,43,0.9);
    			padding-top:15px;
                display: block;
    		}

                @media all and (max-width: 600px) and (min-width: 0) {
                    .main .container #welcome{
                        width: 100%;
                        padding-bottom: 30px;
                        /*height:100%;*/
                        padding-top: 30px;
                    }
                }

    			.main .container #welcome h1{
    				font-size: 2em;
    				font-family: 'Titillium Web', sans-serif;
    				color:#fff;
    				margin-bottom: 20px;
    			}

                    @media all and (max-width: 600px) and (min-width: 0) {
                        .main .container #welcome h1{
                            margin-bottom: 20px;
                            font-size: 1.8em;
                        }
                    }

    			.main .container #welcome img{
    				margin-bottom: 120px;
    			}

                    @media all and (max-width: 600px) and (min-width: 0) {
                        .main .container #welcome img{
                            width: 80%;
                            margin-bottom: 50px;
                            max-width: 334px;
                        }
                    }

    			.main .container #welcome p{
    				font-size: 1.2em;
    				color: #fff;
    				font-weight: 400;
    				margin: 5px auto;
    				/*width: 40%;*/
    			}

    			.main .container #welcome span{
    				border-bottom: 1px solid #fff;
    			}

                .main .container #welcome a{
                    text-decoration: none;
                    color:#fff;
                }


        .main .container #steps{
            margin:0 auto;
            position: relative;
            width: 740px;
            height: 349px;
            display: none;
        }

            @media all and (max-width: 600px) and (min-width: 0) {
                    .main .container #steps{
                        width: 100%;
                        padding-bottom: 30px;
                        height:100%;
                    }
                }

            .main .container #steps .tag1{
                display: inline-block;
                vertical-align: top;
                width: 210px;
                margin: 0;
                text-align: center;
                background: url(../images/controls/login/tag1.png);
                background-color: transparent;
                padding-top: 150px;
                height: 199px;
            }
            .main .container #steps .tag2{
                display: inline-block;
                vertical-align: top;
                width: 210px;
                padding-top: 150px;
                height: 199px;
                text-align: center;
                background: url(../images/controls/login/tag2.png);
            }
            .main .container #steps .tag3{
                display: inline-block;
                vertical-align: top;
                width: 210px;
                padding-top: 150px;
                height: 199px;
                text-align: center;
                background: url(../images/controls/login/tag3.png);
            }

            @media all and (max-width: 600px) and (min-width: 0) {
                    .main .container #steps .tag1{
                        display: block;
                        margin:20px auto;
                    }
                    .main .container #steps .tag2{
                        display: block;
                        margin:20px auto;
                    }
                    .main .container #steps .tag3{
                        display: block;
                        margin:20px auto;
                    }
                }

            .main .container #steps .arrow{
                display: inline-block;
                vertical-align: top;
                width:48px;
                height: 330px;
                margin-left:0;
                padding-left:0;
                margin-top: 30px;
            }

             @media all and (max-width: 600px) and (min-width: 0) {
                    .main .container #steps .arrow{
                        display: none;
                    }
                }

                .main .container #steps .arrow i{
                    font-size: 5.95em;
                    color:red;
                    position: relative;
                    padding-left: 0;
                    margin-left: 0;
                      top: 50%;
                      -webkit-transform: translateY(-50%);
                      -ms-transform: translateY(-50%);
                      transform: translateY(-50%);
                      text-shadow: -3px 4px 2px rgba(50, 50, 50, 0.5);
                }

            .main .container #steps h1{
                font-size: 2.7em;
                font-family: 'Titillium Web', sans-serif;
                color:#fff;
            }

            .main .container #steps a{
                text-decoration: none;
                color: #fff;
            }

            .main .container #steps p{
                    font-size: 1.4em;
                    color: #fff;
                    font-weight: 400;
                    margin: 10px auto;
                    width: 85%;
                }

            .main .container #steps span{
                    border-bottom: 1px solid #fff;
                    font-size: 1.4em;
                    color: #fff;
                    font-weight: 400;
                    width: 75%;
                }


/*BACKGROUND SLIDER*/


.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/controls/login/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/controls/login/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/controls/login/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/controls/login/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/controls/login/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/controls/login/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/controls/login/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

@media screen and (max-width: 480px) {

.cb-slideshow{
    display: none;}
}