/* ------------------------------------------------------------ *\
	Fonts
\* ------------------------------------------------------------ */


@font-face {
  font-family: 'Verlag';
  src:
  url('fonts/Verlag-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/Verlag-Bold.woff') format('woff'),
  url('fonts/Verlag-Bold.ttf')  format('truetype'),
  url('fonts/Verlag-Bold.svg#Verlag-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
}


@font-face {
  font-family: 'Verlag';
  src:
  url('fonts/Verlag-Book.eot?#iefix') format('embedded-opentype'),
  url('fonts/Verlag-Book.woff') format('woff'),
  url('fonts/Verlag-Book.ttf')  format('truetype'),
  url('fonts/Verlag-Book.svg#Verlag-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Verlag';
  src:
  url('fonts/Verlag-Light.eot?#iefix') format('embedded-opentype'),
  url('fonts/Verlag-Light.woff') format('woff'),
  url('fonts/Verlag-Light.ttf')  format('truetype'),
  url('fonts/Verlag-Light.svg#Verlag-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: 'FuturaStd';
  src:
  url('fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
  url('fonts/FuturaStd-Light.woff') format('woff'),
  url('fonts/FuturaStd-Light.ttf')  format('truetype'),
  url('fonts/FuturaStd-Light.svg#FuturaStd-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
	font-family: "Gotham";
	src: url("fonts/GothamMedium_400_normal_1423227322.eot");
	src: url("fonts/GothamMedium_400_normal_1423227322.eot?#iefix") format("embedded-opentype"),
		url("fonts/GothamMedium_400_normal_1423227322.svg#GothamMedium") format("svg"),
		url("fonts/GothamMedium_400_normal_1423227322.woff") format("woff"),
		url("fonts/GothamMedium_400_normal_1423227322.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/gotham-book-webfont.eot');
    src: url('fonts/gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham-book-webfont.woff') format('woff'),
         url('fonts/gotham-book-webfont.ttf') format('truetype'),
         url('fonts/gotham-book-webfont.svg#gotham_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Gotham';
    src: url('fonts/gotham-bold-webfont.eot');
    src: url('fonts/gotham-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gotham-bold-webfont.woff') format('woff'),
         url('fonts/gotham-bold-webfont.ttf') format('truetype'),
         url('fonts/gotham-bold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: 700;
    font-style: normal;
}


/* ------------------------------------------------------------ *\
	Widget
\* ------------------------------------------------------------ */
#state-selector { color: #000; }
#socialpost { width: 600px; height: 600px; height: auto; width: 100%; position: relative; }
.widget {  width: 600px; height: 600px; width: 100%; position: relative; z-index: 2; position: relative; height: auto; padding-bottom: 40px; min-height: 560px; }
.widget-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; }
.widget-background-image > .widget-state { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center center; }

.main { padding: 0 40px 20px; max-width: 100%; width: 100%; }

body { max-width: 600px; width: 100%; margin: 0 auto;}

/* ------------------------------------------------------------ *\
	Container
\* ------------------------------------------------------------ */

.container#wrapper { padding-left: 0; padding-right: 0; max-width: 600px; max-width: 800px; border: 1px solid #979797; border: none; background: #fff; }

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.header { padding: 18px 20px 19px; text-align: center; height: auto; }
.header ._title { color: #4a4a4a; font-family: "Gotham", sans-serif; font-size: 32px; font-weight: 500; letter-spacing: 0.18px; line-height: 1.25; }
.header ._subtitle { color: #4a4a4a; font-family: "Gotham", sans-serif; font-size: 20px; font-weight: normal; letter-spacing: -0.26px; line-height: 26px; }

.widget-state[data-fbuy-state="Thanks"] .header { padding-bottom: 28px; padding-top: 64px; }
.widget-state[data-fbuy-state="Thanks"] .header ._title { text-transform: none; }

.header ._subtitle.visible-xs,
.header ._title.visible-xs { margin-left: auto; margin-right: auto; max-width: 400px; }

/* ------------------------------------------------------------ *\
	Navgation
\* ------------------------------------------------------------ */

.widget-navigation:after { content: ''; line-height: 0; display: table; clear: both; }

.steel .nav { background: none; width: 100%; margin-bottom: -17px; position: relative; padding: 0 52px; }
.nav { float: left; }
.nav .nav-item { float: left; width: 33.33%; height: 35px; background: #50cde3; color: #fff; position: relative; border: none; font-size: 16px; }
.nav .nav-item span { color: white; font-family: 'Gotham', sans-serif; font-size: 16px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.nav .nav-item + .nav-item { /*border-left: 1px solid transparent; background-clip: padding-box;*/ /*margin-left: 1px; width: calc(33.33% - 1px);*/ border-left: 2px solid #fff; }

.steel .nav .nav-item:hover,
.steel .nav .nav-item.active { background: #118397; color: #fff; }

.shareLink { margin: 0 auto; position: relative; width: 33.5%; width: 40%; }
.shareLink .upper.fb-malleable { color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1; display: block; text-align: center; margin-bottom: 5px; }
.shareLink .form-controls { position: relative; }
.shareLink .btn-copy { position: absolute; right: 0; top: 0; bottom: 0; width: 37px; background: #717171; color: #fff; z-index: 2; -webkit-appearance: none; -moz-appearance: none; border: none;}
.shareLink .btn-copy:hover { background: #cbd1d2; }
.shareLink .btn-copy i  { font-size: 22px; position: absolute; top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

#shareLink input { text-align: left; margin-top: 0; height: 36px; color: #4a4a4a; font-size: 14px; font-weight: 300; line-height: 36px; background-color: white; border: 1px solid #979797; padding-left: 10px; padding-right: 40px; width: 100%; font-family: 'Gotham', sans-serif; font-weight: normal; }


/* ------------------------------------------------------------ *\
	Form
\* ------------------------------------------------------------ */

.form-wrapper { background: #d8d8d8; min-height: 270px; height: auto;  padding: 37px 50px 5px; margin: 0 1px; }
.form-wrapper .user-mail { text-align: center; display: block; color: black; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1; margin-bottom: 16px; }
.form-wrapper .user-mail span { font-weight: 400; }

.steel .form-wrapper button { filter: none; min-width: 200px; height: 45px; line-height: 18px; background: #50cde3; padding: 0 10px; color: white; font-family: 'Gotham', sans-serif; font-size: 18px; font-weight: 500; margin-top: 0; padding-top: 1px; margin-bottom: 15px; }
.steel .form-wrapper button:hover { background: #717171; color: #fff; }
/*.form-wrapper button span { padding: 0 10px; display: inline-block; vertical-align: middle;  height: 45px; line-height: 45px; font-size: 18px; }*/

.form-wrapper button span  { padding: 0 15px; }
.steel .form-wrapper .form-controls { position: relative; }

.form-wrapper input,
.form-wrapper textarea { background-color: white; border: 1px solid #c5c5c5; color: #000; font-family: 'Gotham', sans-serif; font-size: 18px; font-weight: normal; max-width: 100%; }

#facebook textarea,
.form-wrapper textarea { height: 68px; padding: 4px 12px; display: block; font-size: 14px; }

.form-wrapper input {  height: 35px; line-height: 35px; margin-bottom: 10px; margin-top: 0; padding: 0 27px 0 15px; font-size: 14px; }
.validation-error { height: 36px; line-height: 36px; margin-bottom: 5px; display: block; color: #d0021b;  font-size: 12px; font-family: "Gotham", sans-serif; font-weight: 500; }

#selfEmail .validation-error { padding-top: 8px;}

/* ------------------------------------------------------------ *\
	Email
\* ------------------------------------------------------------ */

.import-contacts { position: absolute; top: 1px; right: 0; width: 32px; height: 32px; line-height: 32px; text-align: center; }
.import-contacts .cs_import { background: url(img/ico-add-user.png) 0 0 no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: middle; }

#email textarea,
#email input { margin-top: 0; }


#fb-email-to,
#email input { color: #000; }

#email button { margin-top: 0; position: relative; top: -10px; }

#email textarea { height: 68px; color: #000; }

.melrose-checkbox-reminder {
  position: relative;
  margin: 0 0 0 21px;
  display: inline-block;
  width: 100%;
}

.melrose-checkbox-reminder label {
  font-size: 13px;
  font-weight: normal;
  display: inline-block;
  font-family: Gotham, sans-serif;
}

.melrose-checkbox-reminder input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  top: 3px;
  position: relative;
  display: inline-block;
}

/* ------------------------------------------------------------ *\
	Facebook
\* ------------------------------------------------------------ */

#facebook { margin-top: 0; }
#facebook textarea { margin-top: 0; font-size: 14px; font-weight: 400; height: 54px; padding: 6px 15px; }

.fb-preview { margin: 0 -15px; padding-top: 12px; }
/*.fb-preview .fb-image { padding-right: 0; }*/
.fb-preview .msg { color: #4a4a4a; padding-left: 18px; text-align: left; }
.fb-preview #fb-share-title {color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1; margin-bottom: 5px; }
.fb-preview #fb-share-description { color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1.1; height: auto; margin-bottom: 5px; }
.fb-preview #fb-share-caption { color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1; }

#facebook .validation-error { margin-bottom: 0; }
#facebook button { margin-bottom: 30px; }


/* ------------------------------------------------------------ *\
	Twitter
\* ------------------------------------------------------------ */

#twitter .num { color: #666; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: 400; line-height: 14px; padding-right: 9px; height: 21px; margin-top: -4px; }

#twitter textarea { margin-top: 0; height: 80px; }
#twitter button { margin-top: 0; }


/* ------------------------------------------------------------ *\
	Email Capture
\* ------------------------------------------------------------ */

#email_capture .contact-cta { text-align: center; padding-top: 3px; margin-bottom: 24px; color: black; font-family: 'Gotham', sans-serif; font-size: 18px; font-weight: normal; line-height: 1; margin-top: -15px;}
#email_capture input { margin-bottom: 0; }

#email_capture button { margin: 10px 0 0; }

/* ------------------------------------------------------------ *\
	Thanks
\* ------------------------------------------------------------ */

#postshare { padding-top: 5px; }
#postshare .contact-cta { text-align: center; color: #4a4a4a; font-family: "Gotham", sans-serif; font-size: 20px; font-weight: 300; letter-spacing: -0.26px; line-height: 26px; margin-bottom: 36px;  }
#postshare button { margin-top: 20px;}

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */

#footer { position: absolute; bottom: 0; left: 0; margin-left: 0; margin-right: 0; padding-left: 0px; padding-right: 0px; background: none; width: 100%; max-width: 100%; }

#footer ._terms-link { text-transform: none; height: 12px; color: #9b9b9b; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: normal; line-height: 12px; }
#footer .text-right a { height: 14px; color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; line-height: 1; text-transform: lowercase; }

#footer ._terms-link,
#footer .text-right a { transition: color .3s; }

#footer ._terms-link:hover,
#footer .text-right a:hover { color: #000; }

#footer .col-xs-5,
#footer .col-xs-7 { line-height: 38px; }

#footer .col-xs-5 {
	padding-left: 15px
}


/*@media(min-width: 767px){*/

@media(max-width: 600px){
	body { width: 100%; min-width: 320px; }

	.header { padding: 14px 20px 19px; height: auto; text-align: center; }

	div[data-fbuy-state="Thanks"] .header { padding-bottom: 51px; padding-top: 56px;  }
	div[data-fbuy-state="Thanks"] .header ._title {  font-size: 32px; color: #4a4a4a; font-family: 'Gotham', sans-serif; font-weight: 500; line-height: 40px;}
	.widget-state[data-fbuy-state="Thanks"] .header { padding-bottom: 28px; }
}

@media(max-width: 767px){
	.fb-preview .msg { padding-top: 8px; text-align: center; }
	#postshare .contact-cta br { display: none; }
}


/*@media(max-width: 800px){*/

@media(max-width: 599px){
	#socialpost { width: 100%; height: auto; }

	.widget { width: 100%; float: none; height: auto; min-height: 570px; margin-top: 0; padding-bottom: 34px; }
	.hero-image { position: static; }

	.main { padding: 0 5px 14px; max-width: 100%; }

	.container#wrapper { border: 1px solid #979797; border: none; }

	/* ------------------------------------------------------------ *\
		Header
	\* ------------------------------------------------------------ */

 	.header { padding: 21px 5px 18px; height: auto; }

	.header ._title.visible-xs { font-size: 28px; line-height: 1.2em; letter-spacing: 0.01em; margin-left: auto; margin-right: auto; margin-top: 10px;}
	.header ._subtitle.visible-xs { color: #4a4a4a; font-size: 18px; font-weight: normal; line-height: 1.2em; margin: 5px 0 0; margin-left: auto; margin-right: auto; }

	.widget-state[data-fbuy-state="Thanks"] .header { padding-bottom: 44px; padding-top: 60px; }
	.widget-state[data-fbuy-state="Thanks"] .header ._title.visible-xs { text-transform: none; color: black; font-family: "Gotham", sans-serif; font-size: 28px; font-weight: 500; line-height: 38px; }
	.widget-state[data-fbuy-state="Thanks"] .header ._subtitle.visible-xs { margin-top: 15px; }


	/* ------------------------------------------------------------ *\
		Nav
	\* ------------------------------------------------------------ */

	/*.nav .nav-item { width: 35px; }*/

	/*.nav .nav-item + .nav-item { margin-left: 8px; }*/
	.nav { padding: 0 9px; }
	.steel .nav { padding: 0 9px;  }
	.steel .nav span { font-size: 14px; font-family: 'Gotham', sans-serif; font-weight: 400; position: absolute; top: 50%; left: 50%;
		-webkit-transform: translate(-50%, -50%);
	    	-ms-transform: translate(-50%, -50%);
	    	 -o-transform: translate(-50%, -50%);
	    	    transform: translate(-50%, -50%);
	}
	.nav .nav-item { height: 35px; line-height: 35px; }

	.shareLink { width: 72%; text-align: center;}
	.shareLink .btn-copy { display: none; }
	#shareLink input { padding: 0 5px 0 10px; text-align: center; color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: normal; max-width: 200px; margin-left: auto; margin-right: auto; }

	/* ------------------------------------------------------------ *\
		Form
	\* ------------------------------------------------------------ */

	.form-wrapper { padding: 37px 6px 5px; min-height: 250px; }
	.form-wrapper .user-mail { height: 17px; font-size: 14px; font-weight: normal;}
	.form-wrapper input { height: 44px; line-height: 44px; font-size: 14px; margin-bottom: 17px; padding-left: 8px; }
	.import-contacts { height: 42px; width: 42px; line-height: 42px; }
	.import-contacts .cs_import { height: 20px; width: 20px;
		-webkit-background-size: 100% 100%;
	        background-size: 100% 100%;
	}


	#facebook textarea,
	.form-wrapper textarea { font-size: 14px; padding: 12px 13px; }

	.validation-error { height: 29px; line-height: 29px; }

	.steel .form-wrapper button { /*width: 100%;*/ }

	#facebook textarea { height: 70px; }

	#postshare button {margin-top: 0;}

	/* ------------------------------------------------------------ *\
		Facebook
	\* ------------------------------------------------------------ */

	.fb-preview { margin-left: 0; margin-right: 0; }
	.fb-preview .fb-image  { padding-right: 12px; }
	.fb-preview img { max-height: 88px; }
	.fb-preview #fb-share-title { font-size: 14px; padding-top: 3px; margin-bottom: 3px; }
	.fb-preview #fb-share-promotion-link { display: block; width: 100%; text-align: center; padding-right: 0; font-size: 14px; margin-top: 3px; }
	#facebook .validation-error { margin-bottom: 0; }

	.fb-preview .msg { padding-top: 8px; text-align: center; }





	/* ------------------------------------------------------------ *\
		Email
	\* ------------------------------------------------------------ */

	#email textarea { height: 73px; font-size: 14px;  padding: 8px 7px; }
	#email button { top: -7px;}


	/* ------------------------------------------------------------ *\
		Twitter
	\* ------------------------------------------------------------ */

	#twitter .num { margin-top: 5px; font-size: 14px; font-family: 'Verlag', sans-serif; color: #000; font-weight: 300; padding-right: 19px; height: 24px; }

	#twitter textarea { height: 74px; font-size: 14px; line-height: 1.2; padding: 6px 15px;  }
	#twitter .validation-error { margin-top: 0; }

	/* ------------------------------------------------------------ *\
		Email Capture
	\* ------------------------------------------------------------ */

	#email_capture .contact-cta { padding-top: 0; font-size: 14px; font-family: 'Gotham', sans-serif; font-weight: normal; color: #000; margin-top: -20px; margin-bottom: 24px; }
	#email_capture .row {  }

	._email_capture.email-form { padding-left: 10px; padding-right: 10px; }
	#email_capture input { height: 35px; line-height: 25px; padding-left: 10px; font-size: 14px; }
	#email_capture button { padding: 0 20px; margin: 0;}

	/* ------------------------------------------------------------ *\
		Thanks
	\* ------------------------------------------------------------ */

	#postshare { padding-top: 9px; padding-left: 10px; padding-right: 10px; }
	#postshare .contact-cta { line-height: 20px; margin-bottom: 36px; color: #4a4a4a; font-family: "Gotham", sans-serif; font-size: 18px; font-weight: normal; letter-spacing: -0.23px; line-height: 26px; }
	#postshare .contact-cta br { display: none; }

	/* ------------------------------------------------------------ *\
		Footer
	\* ------------------------------------------------------------ */

	#footer { padding-bottom: 0; padding-left: 10px; padding-top: 0; padding-right: 10px; max-width: 100%; font-family: "Gotham", sans-serif;}

	#footer .col-xs-5,
	#footer .col-xs-7 { width: 50%; line-height: 25px; }

	#footer .col-xs-5 { padding-left: 0px; }
	#footer ._terms-link { color: #9b9b9b; font-family: 'Gotham', sans-serif; font-size: 12px; font-weight: 300; }

	#footer .col-xs-7 { padding-right: 0; }
	#footer .text-right a { color: #4a4a4a; font-family: 'Gotham', sans-serif; font-size: 14px; font-weight: 300; }

    .melrose-checkbox-reminder input {
      height: 13px;
    }
}


@media(min-width: 599px){
	.col-sm-6.col-xs-12.text-center.fb-image,
	.col-sm-6.col-xs-12.msg { width: 50%; }
	.col-sm-6.col-xs-12.text-center.fb-image { width: 50%; }

	#fb-share-title { text-align: left; }
	.fb-preview .msg { padding-top: 0; padding-left: 10px; text-align: left; }
	.fb-preview #fb-share-promotion-link { text-align: left; }


	.header ._subtitle.visible-xs,
	.header ._title.visible-xs { margin-left: auto; margin-right: auto; display: none !important; }

	.header ._subtitle.hidden-xs,
	.header ._title.hidden-xs { margin-left: auto; margin-right: auto; display: block !important; }

	.hidden-xs { display: block !important; }
	.visible-xs { display: none !important; }
}