/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
body {
  background-image: url('bg3.png');
  background-repeat: repeat;
  background-size: cover;
  height:fixed 
}
h2{
background-color:#FFA500;
padding: 20px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 200px;
height: 550px;
margin: 10px auto;
padding-right: 650px;
padding-left: -100px;
font-family: 'Raleway', sans-serif;

}

div.main{
width: 700px;
padding: 2px 3px 2px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:5px;
padding-bottom:0px;
	padding-left:80px;
	padding-right:80px;
	padding-top:5px;
align: center
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
.body {
	padding-bottom:50px;
	padding-left:250px;
	padding-right:50px;
	padding-top:50px;
}
/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}
/* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 100px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}
.WebContainer{
    width: 100%;
    height: auto;
}
.articles{
    width:90%; /*Takes 90% width from WebContainer*/
    height: auto;
    margin: auto;
}
#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 90%;
    height: 78%;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2){ transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3){ transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4){ transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5){ transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6){ transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7){ transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8){ transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9){ transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg) translateZ(288px);}
#carousel img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
    width: 90%;
}
#carousel img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
}
@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}