@media only screen and (min-device-width : screen px) and (max-device-width : screen px) { #id{style} }
.div_main_login {
	display: block;
	background: #000000;
	color: #000000;
	max-width:1200px;
		margin: auto;
	margin-top: -20px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 5px;
}

.div_main_index {
	display: block;
	background: #000000;
	color: #000000;
	max-width:400px;
		margin: auto;
	margin-top: 10px;
	margin-left:auto;
	margin-right:auto;
	border-radius: 5px;
}

.image-cropper {
	display: block;
	background: #000000;
	position:relative;
	color: #FFFFFF;
	width:350px;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
}
.login-header {
	display: block;
	background: #000000;
	color: #FFF00F;
	position:relative;
	max-width:1100px;
	width:460px;
	margin-top:-28px;	
	margin-left:-1px;	
	border-radius: 1px;
}

.login-body {
	display: block;
	background: #000000;
	position:relative;
	color: #FFFFFF;
	max-width:1100px;
	width:450px;
	height:380px;
	margin-top: -1;	
	margin-left: auto;
	margin-right: auto;
	border-radius: 5px;
}

.div_login_advert {
	display: inline-block;
	background: #ffffff;
    border: 1px solid #4B6170;
	color: #FFF00F;
	position:relative;
	max-width:1100px;
	width:460px;
	margin-top:30px;	
	margin-left:-1px;	
	border-radius: 1px;
}
.login-page-logo{
    display: inline-block;    
    position:relative;
    margin-top: 5px;
    margin-left:10px;
	max-width:300px;
	max-height:300px;    
    width: 300px;
    height: 300px; 
    overflow: hidden;
    border-radius: 50%;
}
.login-page-logorect{
    display: inline-block;    
    position:relative;
    margin-top: -1px; 
    margin-left: 10px;     
	max-width:500px;
	max-height:300px;    
    width: 440;
    height: 300px; 
    overflow: hidden;
    border-radius: 5%;
 }

 .image_login_advert{
    display: inline-block;    
    position:relative;
    margin-top: -1px; 
    margin-left: 10px;     
	max-width:500px;
	max-height:350px;    
    width: 440px;
    height: 350px; 
    border-radius: 5%;
 }
.login-page-logo1{
    display: inline-block;    
    position:relative;
    width: 80px;
    height: 80px; 
    margin-top: 10px;    
    margin-left:10;
    overflow: hidden;
    border-radius: 50%;
}
.login-page-logo2{
    display: inline-block;   
    position:relative;
    background:#ffffff;
    width: 80px;
    height: 80px; 
    margin-top: 10px;    
    margin-left:30px;
    overflow: hidden;
    border-radius: 50%;
}
.login-page-logo3{
    display: inline-block;   
    position:relative;
    background:#ffffff;
    width: 80px;
    height: 80px; 
    margin-top: 10px;    
    margin-left:30px;
    overflow: hidden;
    border-radius: 50%;
}
.login-page-logo4{
    display: inline-block;   
    position:relative;
    background:#ffffff;
    width: 80px;
    height: 80px; 
    margin-top: 10px;    
    margin-left:30px;
    overflow: hidden;
    border-radius: 50%;
}
.login-page-logo5{
    display: inline-block;    
    position:relative;
    width: 60px;
    height: 60px; 
    margin-top: 10px;    
    margin-left:23;
    overflow: hidden;
    border-radius: 50%;
}
.login-logo-title1{
display: inline-block;    
 position:relative;
  margin:inherit;
 margin-top: 5px;
 margin-left:50px;
 margin-right:auto;
}

.login-logo-title2{
    display: inline-block;    
    position:relative;
    background: nonef;
    color: #ffffff;
    width: 300px;
    height:50px;
    margin-top: 2px;
    margin-left:auto;
    margin-right:auto;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bold;
    text-align:center;
    overflow: hidden;
    border-radius: 5%;
}
.profile-pic {
	border: 2px solid #ffffff;    
    width: 200px;
    height: 200px;
    position: inherit;
     margin-top: 5px;
    overflow: hidden;
    border-radius: 50%;
}

.login-Footer{
display: table;    
 position:absolute;
  margin:inherit;
 margin-top: 50px;
 margin-left:auto;
 margin-right:auto;
}
.navigation{
display: inline-table;
background: #000000;
color: #FFFFFF;
 position:relative;
max-width:450px;
max-height:300px;    
width: 440px;
height: 150px;  
 margin-top: 5px;
 margin-left:1;
 margin-right:auto;
 vertical-align: bottom;
}
.navigation_hr{
display: inline-table;
background: #000000;
color: #FFFFFF;
position:relative;
width: 450px;
margin-top: 5px;
 vertical-align: bottom;
}
.social_media{
display: inline-table;
background: #000000;
color: #FFFFFF;
 position:relative;
max-width:450px;
max-height:300px;    
width: 430px;
height: 150px;  
 margin-top: 5px;
 margin-left:1;
 margin-right:auto;
 vertical-align: bottom;
}
.login-address{
display: inline-table;
background: #000000;
color: #FFFFFF;
position:relative;
max-width:450px;
max-height:300px;    
width: 430px;
height: 150px;  
 margin-top: 5px;
 margin-left:1;
 margin-right:auto;
font-family: sans-serif;
font-size: .9rem;
font-weight: bold;
vertical-align: bottom;
}
.login-promptemail {
display: inline-table;
position:relative;
background: #0000ff;
border: 1px solid #4B6170;
color: #FFFFFF;
max-width:300px;
width:135px;
height:20px;
border-radius: 5px;
}
.login-promptpword {
display: inline-table;
position:relative;
background: #0000ff;
border: 1px solid #4B6170;
color: #FFFFFF;
max-width:300px;
width:135px;
height:20px;
border-radius: 5px;
}
.login-address{
display: inline-table;
color: #FFFFFF;
 position:relative;
 margin-top: -10px;
 margin-left:auto;
 margin-right:auto;
}
.login-contact{
display: inline-table;
color: #FFFFFF;
 position:relative;
 margin-top: -10px;
 margin-left:auto;
 margin-right:auto;
}
.login-contact1{
display: inline-table;
background: #000000;
color: #FFFFFF;
 position:relative;
max-width:450px;
max-height:300px;    
width: 430px;
height: 150px;  
 margin-top: 5px;
 margin-left:1;
 margin-right:auto;
 vertical-align: bottom;
}
.socialmedia{
display: inline-table;
background: #000000;
color: #FFFFFF;
 position:relative;
max-width:450px;
max-height:250px;    
width: 420px;
height: 100px;  
 margin-top: 5px;
 margin-left:10;
 margin-right:auto;
 vertical-align: bottom;
}

.span_login_start {
	display: inline-table;
    background: none;
	border: none;
	color: #FF00FF;
	width: 420px;
	height: 20px;
	margin-bottom:-15px;	
	margin-left:10px;	
    padding:5px 5px 5px 5px;
    font-family: cooper black;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: normal;
    text-align: center;		
    border-radius: 5%;
}

.span_login_or {
	display: inline-table;
    background: none;
	border: none;
	color: #FFFFFF;
	width: 200px;
	height: 20px;
	margin-top:-50px;	
    padding:5px 5px 5px 5px;
    font-family: cooper black;
    font-size: .8rem;
    font-weight: bolder;
    text-align: center;		
    border-radius: 5%;
}

.span_login_enterpw {
	display: inline-table;
    background: none;
	border: none;
	color: #FFFFFF;
	width: 200px;
	height: 20px;
	margin-top:1px;	
	margin-left:30px;		
    font-family: cooper black;
    font-size: .8rem;
    font-weight: bolder;
    text-align: center;		
    border-radius: 5%;
}

.image_login_go{
    display: inline-block;    
    position:relative;
    visibility:hidden;
    width: 60px;
    height: 60px; 
    margin-top: 1px;    
    margin-left:10px;
    vertical-align: middle;
    overflow: hidden;
    border-radius: 50%;
}
.text_login_pw {
	display: inline-table;
    background: #222222;
	border: 1px solid #4B6170;
	color: #ffffff;
	width: 215px;
	height:45px;
	margin-top:1px;	
    font-family: cooper black;
    margin-left:125;    
    font-size: 1rem;
    font-weight: bolder;
    text-align: center;		
    cursor: text;;
    vertical-align: middle;
    border-radius: 1%;
}
.friend_new_member {
	display: inline-table;
    background: #0000ff;
	border: 1px solid #4B6170;
	color: #FFFFFF;
	width: 207px;
	height: 30px;
	margin-top:-55px;	
	margin-left:14px;
    padding:10px 1px 5px 5px;
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: bolder;
    text-align: center;		
    border-radius: 1%;
}
.span_login_advert_title {
	display: inline-table;
    background: none;
	border: none;
	color: #FF00FF;
	width: 100%;
	height: 20px;
	margin-top:0px;	
    padding:5px 5px 5px 5px;
    font-family: cooper black;
    font-size: 1.2rem;
    font-weight: bolder;
    text-align: center;		
    border-radius: 5%;
}

.span_login_adverttop_date {
	display: inline-table;
    background: none;
	color: #FFFFFF;
	width: 105px;
	max-height:20px;
	height: 20px;
	margin-top:-1px;	
	margin-left:-1px;
    padding:5px 5px 5px 10px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: right;		
    overflow:hidden;
    border-radius: 1%;
}
.span_login_advert_date {
	display: inline-table;
    background: none;
	color: #FFFFFF;
	width: 105px;
	height: 20px;
	margin-top:-1px;	
	margin-left:-1px;
    padding:5px 5px 5px 10px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: right;		
    border-radius: 1%;
}
.span_login_advert_venue {
	display: inline-table;
    background: none;
	color: #FF00FF;
	width: 170px;
	height: 20px;
	margin-top:5px;	
	margin-left:-1px;
    padding:5px 20px 5px 20px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: center;		
    border-radius: 1%;
}
.span_login_adverttop_venue {
	display: inline-table;
    background: none;
	color: #FF00FF;
	width: 170px;
	max-height:20px;
	height: 20px;
	margin-top:5px;	
	margin-left:-1px;
    padding:5px 20px 5px 20px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: center;		
    overflow:hidden;
    border-radius: 1%;
}
.span_login_advert_time {
	display: inline-table;
    background: none;
	color: #FFFFFF;
	width: 105px;
	height: 20px;
	margin-top:5px;	
	margin-left:-4px;
    padding:5px 10px 5px 5px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: left;		
    border-radius: 1%;
}
.span_login_adverttop_time {
	display: inline-table;
    background: none;
	color: #FFFFFF;
	width: 105px;
	max-height:20px;
	height: 20px;
	margin-top:5px;	
	margin-left:-4px;
    padding:5px 10px 5px 5px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bolder;
    text-align: left;		
    overflow:hidden;
    border-radius: 1%;
}
.span_login_advert_comment {
	display: inline-table;
    background:  #FFff00;
	border: none;
	color: #333333;
	width: 430px;
	height: 20px;
	margin-top:5px;	
	margin-left:5px;		
    padding:5px 5px 5px 5px;
    font-family: san-serif;
    font-size: 1rem;
    font-weight: normal;
    text-align: center;		
    border-radius: 1%;
}
.span_login_adverttop_comment {
	display: inline-table;
    background:  #FFff00;
	border: none;
	color: #333333;
	width: 430px;
	max-height:20px;
	height: 20px;
	margin-top:5px;	
	margin-left:5px;		
    padding:5px 5px 5px 5px;
    font-family: san-serif;
    font-size: 1rem;
    font-weight: normal;
    text-align: center;		
    overflow:hidden;
    border-radius: 1%;
}
.span_office {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 180px;
	margin-top:3px;	
	margin-left:5px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bold;
    text-align: left;		
}
.span_marketing {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 180px;
	margin-top:-15px;	
	margin-left:240px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bold;
    text-align: right;		
}

.span_marketing_narration {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 100px;
    margin-top: -50px;    
    margin-left:165px;
    font-family: sans-serif;
    font-size: .9rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration1 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 80px;
	margin-top:2;	
	margin-left:30;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;	
	
}
.kbd-narration2 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 80px;
	margin-top:2px;	
	margin-left:30px;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration3 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 80px;
	margin-top:2px;	
	margin-left:10px;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration4 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 80px;
	margin-top:2px;	
	margin-left:30px;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration5 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 20px;
	margin-top:4;	
	margin-left:35;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration6 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 20px;
	margin-top:4;	
	margin-left:45;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}
.kbd-narration7 {
	display: inline-table;
	border: none;
	color: #FFFFFF;
	width: 20px;
	margin-top:4;	
	margin-left:34;
    font-family: sans-serif;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;		
}