/* Reset  to remove default browser styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Common styles (not screen size dependent) */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); /* Caters for Montserrat font*/

html{ background: #152117 url(../images/contact_bg_blur10.png) no-repeat;
  background-size: cover;
  height:100%;
}

#contact_home_tab {
  position: fixed;
  top: 60px;
  /*width: 40px;
  height: 100px;*/
  background-color: #666666;
  color: #FFFFFF;
  padding: 10px;
  border-top-right-radius: 11px; 
  border-bottom-right-radius: 11px;
  font-family: Helvetica;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  cursor: pointer;   
}
#contact_home_tab a { text-decoration: none; }
#contact_home_tab a:visited { text-decoration: none; color: #FFFFFF; }
#contact_home_tab a:hover { text-decoration: none; }

#contact_confirmation_home_tab {
  position: fixed;
  top: 60px;
  /*width: 40px;
  height: 100px;*/
  background-color: #666666;
  color: #FFFFFF;
  padding: 10px;
  border-top-right-radius: 11px; 
  border-bottom-right-radius: 11px;
  font-family: Helvetica;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  cursor: pointer;   
}
#contact_confirmation_home_tab a { text-decoration: none; }
#contact_confirmation_home_tab a:visited { text-decoration: none; color: #FFFFFF; }
#contact_confirmation_home_tab a:hover { text-decoration: none; }

#contact_form_div {
  position: relative;
  width:40%;
  margin: 40px auto 0px auto;
  padding: 2% 3%;
  background-color:rgba(72,72,72,0.4);  /* Grey bg with 40% opacity */
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

#contact_form {
  width: 100%;
}

#your_name, #email, #phone, #comment, #button-blue {
  margin: 0px 0px 15px 0px;
  font-size: 18px;
  width: 100%;
}

#your_name{
  background-image: url(../images/name.png);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email{
  background-image: url(../images/email.png);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#phone{
  background-image: url(../images/phone.png);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment{
  background-image: url(../images/comment.png);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

#submit:hover .ease{
  width:100%;
  background-color:white;
}

#button-blue{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width: 100%;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #3498db;
	color:white;
	font-size:24px;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

.feedback-input {
	color:#3c3c3c;
	font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #3498db;
	color: #3498db;
	outline: none;
  padding: 13px 13px 13px 54px;
}

#address {
  width: 100%;
  margin: 20px auto;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: center;
}

#main_page { display: none; }
#mobile_page { display: block; }
#contact_home_tab { display: block; }

#mobile_menu1_header  { display: none; }
#mobile_menu1  { display: none; }
#mobile_menu2  { display: none; }

#mobile_menu1 a {color: #FFFFFF; text-decoration: none;}
#mobile_menu1 a:visited {color: #FFFFFF; text-decoration: none;}
#mobile_menu1 a:hover {color: #FFFFFF; text-decoration: none;}

#mobile_menu2 a {color: #FFFFFF; text-decoration: none;}
#mobile_menu2 a:visited {color: #FFFFFF; text-decoration: none;}
#mobile_menu2 a:hover {color: #FFFFFF; text-decoration: none;}

/* Media queries. These display the appropriate div for the following screen sizes (hide all others):*/


@media screen and (max-width: 650px) and (min-width: 0px) { 
  #main_page { display: none; }
  #mobile_page { display: block; }
  #your_name, #email, #phone, #comment, #button-blue { font-size: 14px; }
  #contact_form_div { width:60%; margin-top: 60px; }
  .ease { width: 0px; height: 60px; }
  #contact_home_tab { display: none; }
  #mobile_menu1_header  { display: block; }
  #mobile_menu1  { display: block; }
  #mobile_menu2  { display: block; }
  #contact_confirmation_home_tab { top: 30px; }
}

@media screen and (max-width: 350px) and (min-width: 0px) { 
 #mobile_removals_select  { font-size: 17px; }
 #mobile_office_removals_select { font-size: 17px; }
 #mobile_piano_movers_select { font-size: 17px; }
 #mc1_left_text, #mc1_right_text, #mc2_left_text, #mc2_right_text, #mc3_left_text, #mc3_right_text { font-size: 12px; }
 #mobile_picture2_text { font-size: 14px; }
 #mobile_coverage_text1, #mobile_coverage_text2 { font-size: 14px; }
 #mobile_testimonial1, #mobile_testimonial2, #mobile_testimonial3 { font-size: 14px; }
 #mobile_oq1 { top: -15px; left: -25px; width: 12px; }
 #mobile_cq1 { bottom: -5px; right: -15px; width: 12px; }
 #mobile_footer_text { font-size: 8px; }
 #mobile_fsb { width: 20px; }
 
 

  
 
 
 
 #contact_confirmation_home_tab { top: 5px; font-size: 16px; padding: 8px; }
 #mobile_menu1_header  { display: block; }
 #mobile_menu1  { display: block; }
 #mobile_menu2  { display: block; }
 #contact_home_tab { display: none; }
 #address { font-size: 12px; }
 #contact_form_div { width:80%; margin-top: 60px; }
 #your_name, #email, #phone, #comment, #button-blue { font-size: 12px; }
 #main_page { display: none; }
 #mobile_page { display: block; }
}



@media screen and (max-width: 950px) and (min-width: 651px) { 
  #main_page { display: block; }
  #mobile_page { display: none; }
  #search_strip { height: 32px; }
  #logo_strip { height: 95px; }
  #logo { position: absolute; width: 20px; top: 69px; left: 248px; }
  #logo_text {  position: absolute; top: 12px; left: 140px; font-family: Helvetica; font-weight: bold; font-size: 22px; 
  color: #263860; line-height: 1.3; }
  #logo_text.h1 {  font-family: Helvetica; font-weight: bold; font-size: 22px; color: #263860; line-height: 1.3; }
  #main_phone { top: 30px; right: 50px; font-size: 20px; line-height: 1.2; } 
  #menu_strip { margin-top: 10px; }  
  #menu4_holder { right: 20px; }  
  #menu3_holder { right: 130px; }  
  #menu2_holder { right: 297px; }
  #menu1_holder { right: 415px; }  
  #main_image_strip_home { height: 410px; }
  #main_image_words { font-size: 45px; top: 20px; left: 0px;}
  #main_image_services { font-size: 16px; width: 140px; }
  #main_image_why { font-size: 16px; width: 170px; }
  #play_button { margin-top: 130px; width: 100px; }
  #intro_strip {  font-size: 24px; margin: 40px auto 0px auto;  }
  #intro_strip.h2 {  font-size: 24px; }
  #picture_container1, #picture_container2 { width: 620px; height: 134px; }
  #picture_container1_left, #picture_container2_left { width: 400px; height: 134px; }
  #picture_container1a_left, #picture_container1a_right, #picture_container1_right, #picture_container2a_left, 
  #picture_container2a_right, #picture_container2_right { width: 187px; height: 134px; }
  #picture1_text_box, #picture2_text_box, #picture3_text_box, #picture4_text_box, 
  #picture5_text_box, #picture6_text_box  { padding: 8px 0px; }
  #picture1_text, #picture2_text, #picture3_text, #picture4_text, 
  #picture5_text, #picture6_text { font-size: 20px; }
  #why_choose_us_strip { margin: 10px auto 0px auto; }
  #why_choose_us_text {  padding: 0px 0px 20px 0px; font-size: 24px; }
  #icon_container1, #icon_container2 { width: 620px; height: 80px; }
  #icon_container1_left, #icon_container2_left { width: 400px; height: 66px; }
  #icon_container1a_left, #icon_container1a_right, #icon_container1_right, #icon_container2a_left, 
  #icon_container2a_right, #icon_container2_right { width: 134px; height: 66px; }
  .icon_text { font-size: 12px; margin: 10px 0px 0px 0px; }
  #coverage_image { width: 300px; height: 300px; }   
  #coverage_text1 { font-size: 18px; margin-top: 20px; }
  #coverage_text2 { font-size: 18px; margin-top: 85px; }
  #testimonials_column { width: 42%; }
  #testimonial_heading { width: 90%; font-size: 24px; }
  #testimonial1,#testimonial2, #testimonial3, #testimonial4  { width: 86%; font-size: 14px; }
  #oq1, #cq1 { width: 14px; }
}

@media screen and (min-width: 951px) { 
  #main_page { display: block; }
  #mobile_page { display: none; }
  #search_strip { height: 32px; }
  #logo_strip { height: 95px; }
  #logo { position: absolute; width: 28px; top: 79px; left: 268px; }
  #logo_text {  position: absolute; top: 12px; left: 140px; font-family: Helvetica; font-weight: bold; font-size: 26px; 
  color: #263860; line-height: 1.3; }
  #logo_text.h1 {  font-family: Helvetica; font-weight: bold; font-size: 26px; color: #263860; line-height: 1.3; }
  #main_phone { top: 30px; right: 150px; font-size: 24px; line-height: 1.2; } 
  #main_image_strip_home { height: 410px; }
}