@media only screen and (max-width: 320px){

.join_wrapper{
display:block;
position:relative;
width:100%;
height:auto;
margin:0 auto;
margin-top:80px;
}

.join_container{
display:block;
position:relative;
width:calc(100% - 80px);
min-height:260px;
height:auto;
padding:20px;
background-color:#FFFFFF;
border:1px solid #CFCFCF;
border-radius:7px;
margin:0 auto;
}

.join_section{
display:block;
position:relative;
width:100%;
height:calc(100% - 20px);
//border:1px solid #FF0000;
}

.join{
display:block;
position:relative;
width:100%;
height:100%;
//border:1px solid #FF0000;
}

.cancel_join{
display:block;
position:absolute;
top:0px;
left:calc(100% - 38px);
width:38px;
height:38px;
border:1px solid #CFCFCF;
border-top-right-radius:7px;
cursor:default;
z-index:100;
}

.cancel_join:hover{
background-color:#DFDFDF;
}

#cross_line1{
display:block;
position:absolute;
top:3px;
left:11px;
width:25px;
height:17px;
border:1px solid #000000;
border-width: 0 0 1px 0;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
}

#cross_line2{
display:block;
position:absolute;
top:-1px;
left:3px;
width:17px;
height:25px;
border:1px solid #000000;
border-width: 0 1px 0 0;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
}

.join_header{
display:block;
position:relative;
width:calc(100% - 10px);
min-height:30px;
height:auto;
line-height:30px;
font-family:'Kumbh Sans',sans-serif;
font-size:26px;
font-weight:500;
color:#323232;
//border:1px solid #CFCFCF;
}

.join_sub_header{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_footer{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_terms{
display:block;
position:relative;
width:100%;
min-height:20px;
height:auto;
line-height:20px;
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-weight:400;
margin-top:20px;
//border:1px solid #CFCFCF;
}

.field_row{
display:block;
position:relative;
width:100%;
height:74px;
//border:1px solid #FF0000;
}

#services_field{
height:64px;
}

input.join_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

.join_field_error{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #FF0000;
background-color:#FFDADA;
border-radius:3px;
outline:none;
}

select.join_select_field{
display:block;
position:absolute;
top:20px;
width:calc(100% + 2px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

input.meeting_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

label{
display:block;
position:absolute;
width:300px;
height:30px;
line-height:30px;
font-family:arial,helvetica,sans-serif;
font-size:14px;
color:#282828;
border:1px solid #FF0000;
}

.label_error{
color:#FF0000;
}

#join_email_label{
top:0px;
}

#join_email{
top:20px;
}

#join_phone_label{
top:0px;
}

#join_phone{
top:20px;
}

.buy_btn{
display:block;
position:absolute;
top:64px;
width:100%;
height:40px;
line-height:40px;
text-align:center;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;
color:#FFFFFF;
margin-top:20px;
background-color:#006BFF;
border-radius:5px;
transition: hover 0.5s ease;
cursor:pointer;
}

.buy_btn:hover{
background-color:#0131FF;
}

}

@media only screen and (min-width: 320px) and (max-width: 680px){

.join_wrapper{
display:block;
position:relative;
width:100%;
height:auto;
margin:0 auto;
margin-top:80px;
}

.join_container{
display:block;
position:relative;
width:calc(100% - 80px);
min-height:260px;
height:auto;
padding:20px;
background-color:#FFFFFF;
border:1px solid #CFCFCF;
border-radius:7px;
margin:0 auto;
}

.join_section{
display:block;
position:relative;
width:100%;
height:calc(100% - 20px);
//border:1px solid #FF0000;
}

.join{
display:block;
position:relative;
width:100%;
height:100%;
//border:1px solid #FF0000;
}

.cancel_join{
display:block;
position:absolute;
top:0px;
left:calc(100% - 38px);
width:38px;
height:38px;
border:1px solid #CFCFCF;
border-top-right-radius:7px;
cursor:default;
z-index:100;
}

.cancel_join:hover{
background-color:#DFDFDF;
}

#cross_line1{
display:block;
position:absolute;
top:3px;
left:11px;
width:25px;
height:17px;
border:1px solid #000000;
border-width: 0 0 1px 0;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
}

#cross_line2{
display:block;
position:absolute;
top:-1px;
left:3px;
width:17px;
height:25px;
border:1px solid #000000;
border-width: 0 1px 0 0;
transform:rotate(45deg);
-webkit-transform: rotate(45deg);
}

.join_header{
display:block;
position:relative;
width:calc(100% - 10px);
min-height:30px;
height:auto;
line-height:30px;
font-family:'Kumbh Sans',sans-serif;
font-size:26px;
font-weight:500;
color:#323232;
//border:1px solid #CFCFCF;
}

.join_sub_header{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_footer{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_terms{
display:block;
position:relative;
width:100%;
min-height:20px;
height:auto;
line-height:20px;
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-weight:400;
margin-top:20px;
//border:1px solid #CFCFCF;
}

.field_row{
display:block;
position:relative;
width:100%;
height:74px;
//border:1px solid #FF0000;
}

#services_field{
height:64px;
}

input.join_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

.join_field_error{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #FF0000;
background-color:#FFDADA;
border-radius:3px;
outline:none;
}

select.join_select_field{
display:block;
position:absolute;
top:20px;
width:calc(100% + 2px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

input.meeting_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

label{
display:block;
position:absolute;
width:300px;
height:30px;
line-height:30px;
font-family:arial,helvetica,sans-serif;
font-size:14px;
color:#282828;
border:1px solid #FF0000;
}

.label_error{
color:#FF0000;
}

#join_email_label{
top:0px;
}

#join_email{
top:30px;
}

#join_phone_label{
top:0px;
}

#join_phone{
top:30px;
}

.buy_btn{
display:block;
position:absolute;
top:64px;
width:100%;
height:40px;
line-height:40px;
text-align:center;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;
color:#FFFFFF;
margin-top:20px;
background-color:#006BFF;
border-radius:5px;
transition: hover 0.5s ease;
cursor:pointer;
}

.buy_btn:hover{
background-color:#0131FF;
}

}

@media only screen and (min-width: 680px){

.join_wrapper{
display:block;
position:relative;
width:100%;
height:auto;
margin:0 auto;
margin-top:100px;
margin-bottom:100px;
}

.join_container{
display:block;
position:relative;
width:500px;
min-height:260px;
height:auto;
padding:30px;
background-color:#FFFFFF;
border:1px solid #CFCFCF;
border-radius:7px;
margin:0 auto;
}

.join_section{
display:block;
position:relative;
width:100%;
height:calc(100% - 20px);
//border:1px solid #FF0000;
}

.join{
display:block;
position:relative;
width:100%;
height:100%;
//border:1px solid #FF0000;
}

.join_header{
display:block;
position:relative;
width:calc(100% - 10px);
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:26px;
font-weight:500;
color:#323232;
//border:1px solid #CFCFCF;
}

.join_sub_header{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_footer{
display:block;
position:relative;
width:100%;
min-height:40px;
height:auto;
line-height:40px;
text-align:center;
font-family:'Kumbh Sans',sans-serif;
font-size:18px;
font-weight:500;
//border:1px solid #CFCFCF;
}

.join_terms{
display:block;
position:relative;
width:100%;
min-height:20px;
height:auto;
line-height:20px;
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-weight:400;
margin-top:20px;
//border:1px solid #CFCFCF;
}

.field_row{
display:block;
position:relative;
width:100%;
height:84px;
//border:1px solid #FF0000;
}

#services_field{
height:64px;
}

input.join_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

.join_field_error{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #FF0000;
background-color:#FFDADA;
border-radius:3px;
outline:none;
}

select.join_select_field{
display:block;
position:absolute;
top:20px;
width:calc(100% + 2px);
//width:calc(50% - 20px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

input.meeting_field{
display:block;
position:absolute;
top:20px;
width:calc(100% - 10px);
height:44px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

label{
display:block;
position:absolute;
width:300px;
height:30px;
line-height:30px;
font-family:arial,helvetica,sans-serif;
font-size:14px;
color:#282828;
//border:1px solid #FF0000;
}

.label_error{
color:#FF0000;
}

#join_email_label{
top:0px;
}

#join_email{
top:30px;
}

#join_phone_label{
top:0px;
}

#join_phone{
top:30px;
}

#join_category_label{
top:0px;
width: calc(50% - 25px);
}

#join_category{
top:30px;
width: calc(50% - 25px);
}

#join_subcategory_label{
top:0px;
left:calc(50% + 15px);
width:calc(50% - 25px);
}

#join_subcategory{
top:30px;
left:calc(50% + 15px);
width:calc(50% - 25px);
}

#join_duration{
top:30px;
left:calc(50% + 15px);
width:calc(50% - 13px);
}

#join_description_label{
top:0px;
}

#join_description{
display:block;
position:absolute;
top:30px;
width:calc(100% - 10px);
height:90px;
font-family:arial,helvetica,sans-serif;
font-size:16px;
color:#383838;
padding:0px;
padding-left:10px;
padding-top:10px;
border:1px solid #CFCFCF;
border-radius:3px;
outline:none;
}

.buy_btn{
display:block;
position:absolute;
top:26px;
width:calc(100% + 2px);
height:42px;
line-height:42px;
text-align:center;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;
color:#FFFFFF;
background-color:#006BFF;
border-bottom:2px solid #0000E0;
border-radius:5px;
transition: all 0.5s ease;
cursor:pointer;
}

.buy_btn:hover{
background-color:#0000E0;
}

.add_btn{
display:block;
position:absolute;
top:20px;
width:100%;
height:40px;
line-height:40px;
text-align:center;
font-family:'Poppins',sans-serif;
font-size:15px;
font-weight:600;
color:#FFFFFF;
background-color:#E00000;
border:1px solid #E00000;
border-bottom:3px solid #A00000;
border-radius:5px;
transition: hover 0.5s ease;
cursor:pointer;
}

.add_btn:hover{
background-color:#C00000;
border:1px solid #C00000;
border-bottom:3px solid #A00000;
}

}
