@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
}


@font-face {
    font-family: 'groboldregular';
    src: url('fonts/grobold-webfont.woff2') format('woff2'),
         url('fonts/grobold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.font_lage{font-size: 1.25em}
.font_small{ font-size: 0.875em}
.font_xsmall{ font-size: 0.675em}

/* unvisited link */
a:link {
    color: #FF446C;
	text-decoration: none;
}

/* visited link */
a:visited {
    color: #FF446C;
	text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #FF446C;
	text-decoration: underline;
}

/* selected link */
a:active {
    color: #FF446C;
	text-decoration: none;
}

body{ border-top:8px solid #FF446C;font-family: 'Varela Round', sans-serif; font-size: 18px; color: #484848}

header{ background-color: #6A93D8; padding-bottom: 240px; }

.container{max-width: 1366px; margin: 0 auto; padding: 30px;}
.logo { width: 50vw; max-width: 180px; margin: 0 auto; text-align: center; margin-bottom: 30px}
.logo img{ width: 25vw; max-width: 180px; margin: 0 auto;}

.fiveStars { width: 50vw; max-width: 280px; margin: 0 auto; text-align: center; margin-bottom: 10px;  padding: 0;}
.fiveStars img{ width: 100vw; max-width: 280px; margin: 0 auto; padding: 0;}

h1{width: 100%; margin: 0 auto; text-align: center; font-family: 'groboldregular'; font-size: 3em; color: white; margin-bottom: 20px; letter-spacing:0px;}
h2{width: 80%; margin: 0 auto; text-align: center; font-size: 1.65em; color: white;margin-bottom: 30px}
h3{width: 100%; margin: 0 auto; text-align: center; font-family: 'groboldregular'; font-size: 1.5em; color: #5A3A68; margin-bottom: 20px; letter-spacing:0px;}
h4{width: 100%; margin: 0 auto; text-align: left; font-family: 'groboldregular'; font-size: 1em; color: #5A3A68; margin-bottom: 10px; letter-spacing:0px; border-bottom: 1px #e1e1e1 solid; padding-bottom: 5px; }

.StoreButtons{width:100%; margin: 0 auto; text-align: center}
.btnAppStore, .btnGooglePlay{width: 48%; max-width: 180px; display: inline-block; margin: 1vw; margin-top: 0; margin-bottom: 0}
.btnAppStore {margin-left: 0}
.btnGooglePlay {margin-right: 0}

.btnAppStore img{width: 100%}
.btnGooglePlay img{width: 100%}
.btnRegCTA {width: auto; height: auto; background-color:#F9D25D; color: #0C3282; font-family: 'groboldregular'; font-size: 1em; border-radius:150px; text-align: center; padding: 4px; padding:10px;}

.btnRegCTA:hover {
	text-decoration: none;
}


.devices{width: 90%; max-width: 720px; margin: 0 auto; border-radius: 8px; overflow: hidden;}
.devices img{width: 100%}



.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}




.content{margin-top: -250px;}


.privacy{width:100%; margin: 0 auto; text-align: center; margin-top: 40px; }

.privacy img{width: 100%; margin-bottom: 8px;}


.privacy li{list-style: none; display: inline-block; width: 15vw; width:auto; max-width:100px;text-align: center;  margin: 10px; vertical-align: top}

hr{ display: block; height: 1px;
    border: 0; border-top: 1px solid #e1e1e1;
    margin: 30px 0; padding: 0; }

.contentDescription{margin-bottom: 20px;}

.contentDescription img{ width: 100%; max-width: 800px;margin: 0 auto;line-height: 1.5em}

ul{padding: 0; margin: 0; list-style: none; }


ul li img {width: 30%; float: left}

.animalsList {width: 65%; float: right; text-transform: capitalize}

.AboutUs{ width: 80%; max-width: 800px; margin: 0 auto; padding: 0px;}

p{padding-bottom: 15px; padding-top: 15px; line-height: 1.5em}


.item {
 
  width: 31.2%;
  height: auto;
  margin: 1%;

}


/*Flexbox*/
.flex {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: start;
}

.emojiFeature{display: flex; flex-direction: row}

.imageEmojiFeature{width: 240px;min-width: 240px; max-width: 240px; margin-right: 20px;}


@media only screen and (max-width: 768px) {
header{padding-bottom: 100px; }
.content{margin-top: -110px;}
h1{width: 100%;font-size: 1.75em}
h2{width: 100%;font-size: 1.2em}
h4{width: 100%;font-size: 1.2em}
.logo {display: inline-table;}
.logo img{ width: 40vw; padding-top: 10px;}
.font_xsmall{ font-size: 0.475em}
.font_small{ font-size: 0.9em}
.privacy li{width: 15vw;  margin: 5px;}
.container{padding: 15px;}
.privacy img{ margin-bottom: 4px;}
.item {

  width: 100%;
  height: auto;
  margin: 1%;
	margin-right: 0; margin-left: 0;
	margin-bottom: 20px;
}
.AboutUs{ width: 100%;}
	
.imageEmojiFeature{width: 240px;min-width: 240px; max-width: 240px; margin-right: 20px;}

}

@media only screen and (max-width: 415px) {
.emojiFeature{flex-direction: column}
.imageEmojiFeature{width: 100%;min-width: 100%; max-width: 100%; margin-right: 0px;}	
	
}