body {
  background: #72cffa;
}

/* .modal-transparent */

.modal-transparent {
 /* background: transparent;*/
}
.modal-transparent .modal-content {
 /* background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
 /* background: transparent;*/
}
.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .1;
  filter: alpha(opacity=20);
}

/* .modal-fullscreen */
#myModalLabel {
  text-align: center;
  padding-top: 50px;
  margin-bottom: 50px;
}

.center-content {
				text-align:center;
				margin-top: 50px;
			}

			.content-wrapper {
				height: 100%;
				
				.content {
					line-height: 1.5em;
					
					font-weight: 300;
					color: $gray;
				}
				.l-content-help{
					margin: 50px 50px;
				}
				.l-text-indent {
					text-indent: -1.1em;
				}
				.large-text{
					font-size: 1.5em;
					// margin-top: -20px;
					
				}
				.btn-large {
					font-size: 1.3em;
					font-weight: 300;
					letter-spacing: 1px;
					// border-color: #624E7A;
				}

				
				.fa {
					color: $purple-dark;
					// border-color: #624E7A;
					border-color: $purple-dark;
				}
				i.fa.fa-lg.fa-download {
					color: $gray !important;
				}
			}
		}
.modal-fullscreen {
  /*background: transparent;*/
}
.modal-fullscreen .modal-content {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
  /*background: #ffffff;*/
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  /*opacity: .97;
  filter: alpha(opacity=97);*/
}

/* .modal-fullscreen size: we use Bootstrap media query breakpoints */

.modal-fullscreen .modal-dialog {
  margin: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
     width: 1170px;
  }
}

/* centering styles for jsbin */
html,
body {
  width:100%;
  height:100%;
}
html {
  display:table;
}
body {
  display:table-cell;
  vertical-align:middle;
}
body > .btn {
  display: block;
  margin: 0 auto;
}

    @media (min-width: 481px) and (max-width: 767px) {
  
  
  #con{
          overflow-x: hidden;

  }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  #con{
          overflow-x: hidden;

  }
}