@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari,latin);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Amaranth);
body {
	background-color: #F7F6F6;
}
.about {
	background-color: #232323 !important;
	color: #AAAAAA !important;
	border: 0px !important;
}

.about:hover {
	background-color: #3E3E3E !important;
}

.header-panel {
	background-color: #232323;
	height: 10vh;
	line-height: 10vh;
}

.signin {
	background-color: #FFB253 !important;
	color: #232323 !important;
	border: 0px;
	width: 80%
}

.signin {
	background-color: #FFB253 !important;
}

.key {
	min-height: 148px;
	line-height: 148px;
	text-align: center;
	vertical-align: middle;
	background-image: url(../assets/background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	-webkit-transition: width 0.5s, height 0.5s; /* Safari */
	transition: width 0.5s, height 0.5s;
}

.inpt-key {
    width: 32%;
    line-height: 46px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid lightgray;
    padding-left: 2vh;
		-webkit-transition: width 1s, height 1s; /* Safari */
		transition: width 1s, height 1s;
}

.btn-join {
    width: 12%;
    line-height: 46px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #72BB53;
    font-size: 16px;
    font-weight: bold;
    margin-left: -1vh;
    background-color: #72BB53;
    color: #275F34;
		-webkit-transition: width 1s, height 1s; /* Safari */
		transition: width 1s, height 1s;
}

.cards {
    text-align: center;
    /*margin: 2vh;*/
		margin: 2vmin;
    /*padding: 2vh;*/
		padding: 1vmin;
    background-color: white;
    box-shadow: 2px 2px 19px lightgray;
    /*width: 80%;*/
    /*height: 50vh;*/
		min-height: 322px; //Desktop
    display: inline-block;
		-webkit-transition: left 1s, width 1s ease-out, height 1s, padding 1s, font-weight 0.5s; /* Safari */
    transition: left 1s, width 1s ease-out, height 1s, padding 1s, font-weight 0.5s;
}

.icons {
	margin: 1vh 0vh;
}

.caption {
	color: #3D8AF7;
	margin: 5vh 0vh;
	text-align: center;
	font-size: 3vh;
}

.description {
	color: grey;
	font-size: 12pt;
	/*font-size: 1.5vmin;*/
	/*font-size: 3vmin;*/
	text-align: justify;
	padding: 0vh 2vh;
	font-family: 'Amaranth', sans-serif;
	font-weight: normal;
	/*font-weight: 600;*/
}

.footer-panel-desktop {
	background-color: #444444;
	height: 10vh;
	line-height: 10vh;
}

.footer-panel-mobile {
  background-color: #444444;
  color: #EEEEEE !important;
  padding: 15px 5px;
}

.btn-terms {
	background-color: #444444 !important;
	color: #EEEEEE !important;
	border: 0px !important;
}

.about:hover {
	background-color: #444444 !important;
}

.btn-social {
	background-color: #444444 !important;
	color: #EEEEEE !important;
	border: 0px !important;
}

.btn-social:hover {
	background-color: #444444 !important;
}

.signin-bubble {
  /*position:relative;*/
  padding:15px;
  position: absolute;
  right: 4vh;
  margin:1em 0 3em;
  color:#000;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  z-index: 100;
}

/* Variant : for top positioned triangle
------------------------------------------ */



.signin-bubble:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:rgba(245, 245, 245, 0.75) transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
  z-index: 100;
}

/* Variant : top
------------------------------------------ */

.signin-bubble.top:after {
  top:-15px; /* value = - border-top-width - border-bottom-width */
  right:50px; /* controls horizontal position */
  bottom:auto;
  left:auto;
  border-width:0 15px 15px; /* vary these values to change the angle of the vertex */
  border-color:rgba(245, 245, 245, 0.75) transparent;
  z-index: 100;
}

.image-facebook {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #3B5998;
  color: white;
  font-size: 20px;
}

.text-facebook {
  display: inline-block;
  width: 80%;
  height: 30px;
  line-height: 34px;
  text-align: center;
  background-color: #4264AA;
  color: white;
  font-size: 14px;
  margin-left: -4px;
}

.image-twitter {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #04ACED;
  color: white;
  font-size: 20px;
}

.text-twitter {
  display: inline-block;
  width: 80%;
  height: 30px;
  line-height: 34px;
  text-align: center;
  background-color: #55B7F0;
  color: white;
  font-size: 14px;
  margin-left: -4px;
}

.image-google-plus {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #DD4B39;
  color: white;
  font-size: 20px;
}

.text-google-plus {
  display: inline-block;
  width: 80%;
  height: 30px;
  line-height: 34px;
  text-align: center;
  background-color: #E15F4F;
  color: white;
  font-size: 14px;
  margin-left: -4px;
}

.button {
    text-align: center;
    cursor: pointer;
}

.btn-submit {
  background-color: #72BB53;
  color: #275F34;
  border: none;
  width: 80%;
  border-radius: 4px;
  height: 30px;
  font-weight: bold;
}

.login-labels {
  color: #0A63C3;
  cursor: pointer;
}

.login-labels:hover {
  color: #0A63C3;
  text-decoration: underline;
}

.hide {
  display: none;
}

.modal-body {
    text-align: center;
    font-size: 16px;
}

.modal-footer {
    text-align: center !important;
    border: none !important;
}

.modal-footer button {
    background-color: #72BB53;
    border-radius: 4px;
    color: #275F34;
    border: 1px solid #72BB53;
}
/* Flip it left-side-right */
.ulta {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
/* Stay right always*/
#social {
	text-align: right;
}
/* Woah! Easy there... */
.row div {
    -webkit-transition: width 0.5s ease, margin 0.5s ease;
    -moz-transition: width 0.5s ease, margin 0.5s ease;
    -o-transition: width 0.5s ease, margin 0.5s ease;
    transition: width 0.5s ease, margin 0.5s ease;
}

/* Large desktop */
@media (min-width: 1136px) {
  #logoContainer {
    text-align: right;
  }

  .key {
    height: 321px;
    line-height: 321px;
  }

  .footer-panel-mobile {
    display: none;
  }

  .footer-panel-mobile button i {
    font-size: 5vh;
  }

  .signin-bubble{
    width: 25%;
    background: rgba(245, 245, 245, 0.75);
    top: 8vh;
  }

  .btn-join {
    line-height: 44px;
  }

}

/* Standard to large desktop */
@media (min-width: 980px) and (max-width: 1135px) {
  #logoContainer {
    text-align: left;
  }

  .key {
    /*min-height: 148px;*/
		height: 321px;
    line-height: 321px;
  }

  .footer-panel-mobile {
    display: none;
  }

  .footer-panel-mobile button i {
    font-size: 5vh;
  }
	.cards {
		min-height: 200px;
	}
  .signin-bubble{
    width: 25%;
    background: rgba(245, 245, 245, 0.75);
    top: 8vh;
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {
  #logoContainer {
    text-align: left;
  }

  #signinContainer {
    text-align: right;
  }

  #aboutbtn {
    display: none;
  }

  #aomilein {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
  }

  .footer-panel-desktop {
    display: none;
  }

	.cards {
		min-height: 200px;
	}

  .signin-bubble{
    width: 85%;
    background: rgba(245, 245, 245, 1);
    top: 10vh;
  }

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

  .header-panel {
    height: 15vh;
    line-height: 15vh;
  }

  #logoContainer {
    text-align: left;
  }

  #signinContainer {
    text-align: right;
  }

  .inpt-key {
    width: 65% !important;
  }

  .btn-join {
    width: 25%;
  }

  #aboutbtn {
    display: none;
  }

  #aomilein {
    display: none;
  }

  .key {
    height: 200px;
    line-height: 200px;
  }

  .hidden-phone {
    display: none;
  }

  .btn-join {
    line-height: 43px;
    margin-top: 4vh;
  }

  .cards {
    padding: 20px;
		min-height: 200px;
  }

  .cards .description{
		font-size: 12pt;
    font-weight: 200; //Don't need no glasses
  }

  .footer-panel-desktop {
    display: none;
  }

  .footer-panel-mobile button i {
    font-size: 5vh;
  }

  .signin-bubble{
    width: 85%;
    background: rgba(245, 245, 245, 1);
    top: 10vh;
  }
}

/* Landscape phones and down */
@media (max-width: 480px) and (orientation: landscape){
  #logoContainer {
    text-align: left;
  }

  #signinContainer {
    text-align: right;
  }

  #aboutbtn {
    display: none;
  }

  #aomilein {
    display: none;
  }

  .key {
    height: 200px;
    line-height: 200px;
  }

  .hidden-phone {
    display: none;
  }

  .btn-join {
    line-height: 43px;
    margin-top: 4vh;
  }

  .cards {
    padding: 20px;
		min-height: 200px;
  }

  .cards .description{
		font-size: 12pt;
    font-weight: 100;
  }

  .footer-panel-desktop {
    display: none;
  }

  .signin-bubble{
    width: 85%;
    background: rgba(245, 245, 245, 1);
    top: 10vh;
  }
}


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
}

}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
}

}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
}

  .cards {
    height: 50vh;
		min-height: 200px;
  }

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
}

}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
	}

	.cards {
		min-height: 200px;
	}

}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
	}

.cards {
    height: 50vh;
		min-height: 200px;
  }

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
	}

	.cards {
		min-height: 200px;
	}

}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
	}

	.cards {
		min-height: 200px;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {

    .footer-panel-desktop {
    display: none;
  }

  .key {
    height: 321px;
    line-height: 321px;
}

  .cards {
    height: 50vh;
		min-height: 200px;
  }
}