/*#########################################################
###########################################################
###              user-top / user-content              #####
###########################################################
#########################################################*/

.user-top {
    background-color: #808080;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 2;
}

.user-content{
	position: absolute;
	width: 100vw;
	bottom: 0;
}

/* Computer */
@media only screen and (min-width:1025px){ 
	.user-top {
	    height: 10vh;
	}
	.user-content{
		height: 90vh;
	}
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
	.user-top {
	    height: 10vh;
	}
	.user-content{
		height: 90vh;
	}
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
	.user-top {
	    height: 8vh;
	}
	.user-content{
		height: 92vh;
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.user-top {
	    height: 14vh;
	}
	.user-content{
		height: 86vh;
		top: 14vh;
	}
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.user-top {
	    height: 10vh;
	}
	.user-content{
		height: 90vh;
		top: 10vh;
	}
}


/*#########################################################
###########################################################
###                   user-button-top                 #####
###########################################################
#########################################################*/


.user-buttonMenuTop {   
    position: absolute;
    height: inherit;
    border: 0;
    outline:0;
    background-color: transparent;
}


.user-buttonMenuTop > img {
  outline:0;
  height: 90%;
}


.user-buttonMenuTop:hover >img  {
   outline:0;
   height: 100%;
}


.user-buttonMenuTop:active> img  {
   outline:0;
   height: 110%;
}





/*#########################################################
###########################################################
###               First and Second Section            #####
###########################################################
#########################################################*/


.user-first-section{
	background-color: #f2f2f2;
	z-index: 1;
}

.user-second-section{
	background-color: #FFF;
	z-index: 1;
}


/* Computer */
@media only screen and (min-width:1025px){ 
	.user-first-section{
		width: 30vw;
		height: 90vh;
		float:left;
		position: fixed;
	}

	.user-second-section{
		width: 70vw;
		height: 90vh;
		float:right;
	}
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
	.user-first-section{
		width: 30vw;
		height: 90vh;
		float:left;
		top: 10vh;
		position: fixed;
	}

	.user-second-section{
		width: 70vw;
		height: 90vh;
		float:right;
	}
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
	.user-first-section{
		width: 100vw;
		height: 30vh;
		top: 8vh;
		float:left;
	}

	.user-second-section{
		width: 100vw;
		height: 62vh;
		float:right;
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.user-first-section{
		width: 30vw;
		height: 86vh;
		float:left;
		position: fixed;
	}

	.user-second-section{
		width: 70vw;
		height: 86vh;
		float:right;
	}
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.user-first-section{
		width: 100vw;
		height: auto;
		float:left;
	}

	.user-second-section{
		width: 100vw;
		height: 20vh;
		float:right;
	}
}


/*#########################################################
###########################################################
###                  First Section                    #####
###########################################################
#########################################################*/


.user-image {   
    position: relative;
    border: 0;
    outline:0;

}


.user-image> img {
	position: relative;
	border-radius: 50%;
	border-style: solid;
	border-color: #808080;
	outline:0;

	left: 50%;
	transform: translate(-50%, 0);
}

.user-info {   
    position: relative;
    padding-bottom: 20px;

}

.user-info-item {   
		}

.user-info-item i{   
	    color: #46A040;
	}

/* Computer */
@media only screen and (min-width:1025px){ 

	.user-image {   
	    width: 70%;
	    padding-top: 20px;
    	padding-bottom: 20px; 
    	left: 50%;
  		transform: translate(-50%, 0);
	}

	.user-image> img {
		width: 70%; 
		border-width: 4px;
	}

	.user-info {   
	    width: 90%;
	    margin-top: 20px;

	  	left: 50%;
	  	transform: translate(-50%, 0);
	}

	.user-info-item {   
	    font-size: 19px;
	    padding: 10px 5px 10px 5px;
	}

	
}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
	.user-image {   
	    width: 80%;
	    padding-top: 20px;
    	padding-bottom: 20px; 
    	left: 50%;
  		transform: translate(-50%, 0);
	}

	.user-image> img {
		width: 70%; 
		border-width: 4px;
	}

	.user-info {   
	    width: 90%;
	     margin-top: 20px;

	  	left: 50%;
	  	transform: translate(-50%, 0);
	}

	.user-info-item {   
	    font-size: 19px;
	    padding: 10px 5px 10px 5px;
	}

	

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
	.user-image {   
	    width: 30%;
	    padding-top: 20px;
    	padding-bottom: 20px; 
    	left:0;
    	top: 50%;
  		transform: translate(0, -50%);
  		float:left;
	}

	.user-image> img {
		width: 70%; 
		border-width: 4px;
	}

	.user-info {   
	    width: 70%;
	    float:right;

	  	top: 50%;
  		transform: translate(0, -50%);
	}

	.user-info-item {   
	    font-size: 19px;
	    padding: 10px 5px 10px 5px;
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.user-image {   
	    width: 70%;
	    padding-top: 20px;
    	padding-bottom: 20px; 
    	left: 50%;
  		transform: translate(-50%, 0);
	}

	.user-image> img {
		width: 70%; 
		border-width: 2px;
	}

	.user-info {   
	    width: 90%;
	    margin-top: 0px;

	  	left: 50%;
	  	transform: translate(-50%, 0);
	}

	.user-info-item {   
	    font-size: 10px;
	    padding: 2px 5px 2px 5px;
	}
}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.user-image {   
	    width: 60%;
	    padding-top: 20px;
    	padding-bottom: 20px; 
    	left:50%;
  		transform: translate(-50%,0);
	}

	.user-image> img {
		width: 70%; 
		border-width: 2px;
	}

	.user-info {   
	    width: 90%;
	    margin-top: 20px;

	  	left: 50%;
	  	transform: translate(-50%, 0);
	}

	.user-info-item {   
	    font-size: 15px;
	    padding: 2px 8px 2px 8px;
	}
}
/*#########################################################
###########################################################
###                 Second Section                    #####
###########################################################
#########################################################*/

.user-aviso{
	position: relative;
    left: 10% !important;
}

.user-second-section-text{
	position: relative;
	width: 80%;
	left: 50%;
	transform: translate(-50%, 0);
	color: #808080;

}

.user-second-section p{
	font-size: 17px;
	margin-bottom: 5px; 
}

.user-second-section-simulacrum-graphic{
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	margin-bottom: 75px;
}

/* Computer */
@media only screen and (min-width:1025px){ 

	.user-aviso{
		font-size: 20px;
	}

	.user-second-section-text{
		font-size: 20px;
		padding: 20px 5px 20px 5px;
	}

	.user-second-section p{
		font-size: 17px;
		margin-bottom: 5px; 
	}

	.user-second-section-simulacrum-graphic{
		width: 70%;
		height: 40vh;
	}


}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 

	.user-aviso{
		font-size: 19px;
	}

	.user-second-section-text{
		font-size: 19px;
		padding: 20px 5px 20px 5px;
	}

	.user-second-section p{
		font-size: 16px;
		margin-bottom: 5px; 
	}

	.user-second-section-simulacrum-graphic{
		width: 80%;
		height: 40vh;
	}

}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 
	.user-aviso{
		font-size: 19px;
	}

	.user-second-section-text{
		font-size: 19px;
		padding: 20px 5px 20px 5px;
	}

	.user-second-section p{
		font-size: 15px;
		margin-bottom: 5px; 
	}
	.user-second-section-simulacrum-graphic{
		width: 80%;
		height: 30vh;
	}

}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){

	.user-aviso{
		font-size: 10px;
		margin-bottom: 5px !important;
	}

	.user-second-section-text{
		font-size: 10px;
		padding: 8px 2px 8px 2px;
	}

	.user-second-section p{
		font-size: 9px;
		margin-bottom: 2px; 
	}

	.user-second-section-simulacrum-graphic{
		width: 80%;
		height: 45vh;
	}

}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 

	.user-aviso{
		font-size: 15px;
		margin-bottom: 5px !important;
	}

	.user-second-section-text{
		font-size: 15px;
		padding: 8px 2px 8px 2px;
	}

	.user-second-section p{
		font-size: 12px;
		margin-bottom: 5px; 
	}

	.user-second-section-simulacrum-graphic{
		width: 90%;
		height: 30vh;
	}

}





.user-second-section-bar{
	position: relative;
	width: 70%;
	left: 50%;
	transform: translate(-50%, 0);
	padding: 0px 5px 0px 5px;

}

/*#########################################################
###########################################################
###                   Animation                       #####
###########################################################
#########################################################*/
.user-alert {
    cursor: pointer;
}

.user-form{
	position: relative;
	width: 50%;
	margin-top:20px;
	margin-bottom:20px;
}

.user-submit-form{
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
}


.user-top {
    background-color: #808080;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    position: fixed;
    z-index: 2;
}

.user-content{
	position: absolute;
	width: 100vw;
	bottom: 0;
}

/* Computer */
@media only screen and (min-width:1025px){ 
	.user-form{
		left: 50%;
		top:50%;
		transform: translate(-50%, -50%);
	}

}

/* iPad Retina, landscape*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ 
	.user-form{
		left: 50%;
		top:50%;
		transform: translate(-50%, -50%);
	}
}

/* iPad Retina, portrait*/
@media only screen and (min-width:768px) and (max-width:1024px)  and (orientation:portrait){ 

	.user-form{
		left: 50%;
		top:50%;
		transform: translate(-50%, -50%);
	}
}


/* Phone, landscape*/
@media only screen and (min-width: 0px) and (max-width:767px) and (orientation:landscape){
	.user-form{
		position: relative;
		margin-top: 50px;

		width: 80%;
		left: 50%;
		top:50%;
		transform: translate(-50%, -50%);
	}

	label{
		font-size: 10px;
	}

	input{
		font-size: 10px!important;
	}


}

/* Phone, portrait*/
@media only screen and (min-width:0px) and (max-width:767px) and (orientation:portrait){ 
	.user-form{
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
}


/*#########################################################
###########################################################
###                   Animation                       #####
###########################################################
#########################################################*/

/* Animation */

.user-animation {
    -webkit-animation: user-animation-movement 1s;  /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation: user-animation-movement 1s;
    animation-iteration-count: infinite;
}

/* Animation */


/* Safari 4.0 - 8.0 */
@-webkit-keyframes user-animation-movement {
    from { transform: none; }
    50% { transform: scale(1.02); }
    to { transform: none; }

}

@keyframes user-animation-movement {
    from { transform: none; }
    50% { transform: scale(1.02); }
    to { transform: none; }
}



/*#########################################################
###########################################################
###                   Animation                       #####
###########################################################
#########################################################*/

/* Animation */

.user-animation1 {
    -webkit-animation: user-animation-movementt 1s;  /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation: user-animation-movementt 1s;
    animation-iteration-count: infinite;
}

/* Animation */


/* Safari 4.0 - 8.0 */
@-webkit-keyframes user-animation-movementt {
    from { transform: none; }
    50% { transform: scale(1); }
    to { transform: none; }

}

@keyframes user-animation-movementt {
    from { transform: none; }
    50% { transform: scale(1); }
    to { transform: none; }
}