@import url("//hello.myfonts.net/count/2c31f2");
@font-face {
    font-family: 'BrandonGrotesque-Light';
    src: url("../webfonts/2C31F2_7_0.eot");
    src: url("../webfonts/2C31F2_7_0.eot?#iefix") format("embedded-opentype"), url("../webfonts/2C31F2_7_0.woff") format("woff"), url("../webfonts/2C31F2_7_0.ttf") format("truetype")
}
@font-face {
    font-family: 'BrandonGrotesque-LightItalic';
    src: url("../webfonts/2C31F2_6_0.eot");
    src: url("../webfonts/2C31F2_6_0.eot?#iefix") format("embedded-opentype"), url("../webfonts/2C31F2_6_0.woff") format("woff"), url("../webfonts/2C31F2_6_0.ttf") format("truetype")
}
@font-face {
    font-family: 'BrandonGrotesque-Medium';
    src: url("../webfonts/2C31F2_4_0.eot");
    src: url("../webfonts/2C31F2_4_0.eot?#iefix") format("embedded-opentype"), url("../webfonts/2C31F2_4_0.woff") format("woff"), url("../webfonts/2C31F2_4_0.ttf") format("truetype")
}
@font-face {
    font-family: 'BrandonGrotesque-Bold';
    src: url("../webfonts/2C31F2_9_0.eot");
    src: url("../webfonts/2C31F2_9_0.eot?#iefix") format("embedded-opentype"), url("../webfonts/2C31F2_9_0.woff") format("woff"), url("../webfonts/2C31F2_9_0.ttf") format("truetype")
}
body,
html {
    height: 100%
}
html {
    -webkit-overflow-scrolling: touch
}
.prettyprint {
    display: none
}
:focus {
    outline: 0 !important
}
::selection {
    background: #b371a2;
    color: #fff
}
::-moz-selection {
    background: #b371a2;
    color: #fff
}
body {
    font-family: 'BrandonGrotesque-Light', sans-serif;
    color: #000;
    background: #efefef;
    font-size: 18px;
    line-height: 150%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    height: auto !important;
}
#site_wrapper {
	background: #fff;
}
.navbar,
main {
    background-color: #FFF
}
main {
/*    margin-top: 100px*/
}
@media (max-width: 500px) {
    main {
        margin-top: 15px
    }
}
.container {
    padding-right: 0;
    padding-left: 0
}
@media (max-width: 767px) {
    .container {
        padding-right: 22px;
        padding-left: 22px
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        padding-right: 15px;
        padding-left: 15px
    }
}
p {
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 34px;
    font-family: 'BrandonGrotesque-Light', sans-serif
}
@media (max-width: 500px) {
    p {
        font-size: 18px;
        line-height: 30px
    }
}
a {
    color: #ef5227
}
a:hover,
a:focus {
    color: #1ABB9C
}
h1 {
    font-size: 52px;
    font-family: 'BrandonGrotesque-Bold', sans-serif;
    line-height: 130%;
    margin-bottom: 25px;
    color: #fff;
    text-align: center
}
@media (max-width: 500px) {
    h1 {
        font-size: 42px
    }
}
h2 {
    font-size: 42px;
    line-height: 130%;
    margin-bottom: 20px;
    font-family: 'BrandonGrotesque-Light', sans-serif
}
h3 {
    font-size: 34px;
    margin-bottom: 15px;
    font-family: 'BrandonGrotesque-Bold', sans-serif
}
@media (max-width: 500px) {
    h3 {
        font-size: 28px
    }
}
h4 {
    font-size: 22px;
    margin-bottom: 15px;
    font-family: 'BrandonGrotesque-Medium', sans-serif
}
h5 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 13px;
    font-family: 'BrandonGrotesque-Bold', sans-serif
}
@media (max-width: 500px) {
    h5 {
        font-size: 16px;
        line-height: 22px
    }
}
h5 a {
    color: #60bb46
}
h6 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 10px;
    font-family: 'BrandonGrotesque-Medium', sans-serif
}
.h7 {
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    font-family: 'BrandonGrotesque-Light', sans-serif
}
button h6 {
    line-height: inherit
}
a:hover .logo {
    opacity: .6
}
ul {
    list-style: none;
    position: relative;
    padding-left: 22px
}
@media (max-width: 500px) {
    ul {
        padding-left: 0px;
    }
}
header p {
    font-size: 22px;
    line-height: 150%
}
p+h2,
p+h3 {
    padding-top: 15px
}
.inner {
    padding-top: 60px;
    padding-bottom: 60px;
    color: #000
}
hr {
    border: 0;
    border-bottom: 1px solid #CED7E0;
    margin: 60px 0
}
.light-bg {
    background-color: #F2F5F7
}
.dark-bg {
    background-color: #efefef;
}
.dark-bg,
.dark-bg p,
.dark-bg .item-details li:before {
    color: #A3B1BF
}
.yamm .container {
    max-width: 1168px;
    margin: 0 auto
}
@media (min-width: 768px) and (max-width: 1199px) {
    .yamm .container {
        width: auto
    }
}
.header {
    z-index: 1000;
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 1);
    height: 100px;
}
@media (max-width: 500px) {
    .header {
        height: 70px
    }
}
.navbar .container {
    display: table;
    padding: 0
}
@media (max-width: 767px) {
    .navbar .container {
        padding-right: 22px;
        padding-left: 22px
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .navbar .container {
        padding-right: 15px;
        padding-left: 15px
    }
}
.navbar {
    margin: 0;
    border-radius: 0;
    position: relative;
    z-index: 8000;
    height: 105px;
    font-family: 'BrandonGrotesque-Bold', sans-serif
}
.navbar ul {
    list-style: none
}
.navbar-brand {
    float: left;
    display: table-cell;
    vertical-align: middle;
    padding: 10px 0 0 0;
    max-width: 300px
}
@media (max-width: 500px) {
    .navbar-brand {
        padding: 5px 0 0 0
    }
}
.navbar-brand img {
    height: 64px;
	margin-top: 8px;
}
.navbar-header {
    float: none !important;
    position: relative;
    background: #F5F7FA;
    z-index: 0
}
@media (max-width: 500px) {
    .navbar-header {
        padding: 5px 0
    }
}
@media (max-width: 500px) {
    .navbar-brand img {
        height: 60px
    }
}
.navbar-header li,
.navbar-header a {
    display: table-cell;
    vertical-align: middle;
    height: 40px
}
.navbar-nav {
    float: right;
    vertical-align: middle;
    padding-left: 30px
}
.navbar-nav>li {
    width: 110px;
    text-align: center
}
.navbar-nav .dropdown-menu>li:last-child {
    margin-bottom: 0px !important
}
.navbar-nav>.games-dropdown:hover,
.navbar-nav>.games-dropdown:active {
    background-color: #19b5a1
}
.navbar-nav>li.games-dropdown>a.active {
    border-bottom: 8px solid #19b5a1
}
.dropdown-menu>li.dropdown_twodots.active,
.dropdown-menu>li.dropdown_dots.active {
    position: relative
}
.dropdown-menu>li.dropdown_twodots.active a,
.dropdown-menu>li.dropdown_dots.active a {
    background-color: transparent;
    color: #000
}
.dropdown-menu>li.dropdown_twodots.active:after,
.dropdown-menu>li.dropdown_dots.active:after {
    content: "";
    background-color: #81b950;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 5px
}
.navbar-nav>.about a:hover,
.navbar-nav>.about a:active {
    background-color: #7FBB49
}
.navbar-nav>li.about .active {
    border-bottom: 8px solid #7FBB49
}
.navbar-nav>.jobs a:hover,
.navbar-nav>.jobs a:active {
    background-color: #b371a2
}
.navbar-nav>li.jobs .active {
    border-bottom: 8px solid #b371a2
}
.navbar-nav>.connect a:hover,
.navbar-nav>.connect a:active {
    background-color: #76c7c3
}
.navbar-nav>li.connect .active {
    border-bottom: 8px solid #76c7c3
}
.navbar-nav>.blogs a:hover,
.navbar-nav>.blogs a:active {
    background-color: #ffc04c
}
.navbar-nav>li.blogs .active {
    border-bottom: 8px solid #ffc04c
}
.navbar-nav>li.support .active {
    border-bottom: 8px solid #53bfd5
}
.navbar-nav>.support a:hover,
.navbar-nav>.support a:active {
    background-color: #53bfd5
}
.navbar-nav>li>a {
    font-size: 14px;
    font-family: 'BrandonGrotesque-Bold', sans-serif;
    line-height: 20px;
    text-transform: uppercase;
    color: #000;
    padding: 40px 20px 0 20px;
    border: none;
    z-index: 1;
    height: 100px
}
.navbar .nav .open>a,
.nav .open>a:hover,
.nav>li>a:hover {
    background-color: inherit;
    color: #fff
}
.nav>li>a:focus {
    background-color: #FFF;
    border-color: #FFF
}
#games-list.dropdown-menu {
    padding: 0;
    margin: 0 0 0 -1px;
    width: 230px;
    z-index: 1000;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
    border-left: solid 1px rgba(0, 0, 0, 0.05);
    border-right: solid 1px rgba(0, 0, 0, 0.05)
}
.navbar .nav .open>a,
.navbar .nav .open>a:hover,
.navbar .nav .open>a:focus {
    background-color: #FFF
}
.navbar-header .info {
    padding-left: 0;
    margin: 0
}
.navbar-header .info li {
    font-size: 12px;
    padding-right: 25px
}
.navbar-header .info li a {
    font-size: 12px;
    color: #73879C
}
.navbar-header .info a:hover {
    color: #1ABB9C
}
#navigator {
    display: none;
    width: 40px;
    height: 40px;
    font-size: 15px;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: #000;
    box-shadow: none
}
@media (min-width: 501px) and (max-width: 767px) {
    #navigator {
        display: block;
        margin-top: 30px
    }
}
@media (max-width: 500px) {
    #navigator {
        display: block;
        margin-top: 15px
    }
}
#navigator i {
    color: #000;
    padding: 2px 0 0 8px
}
@media (max-width: 767px) {
    #navigator i {
        display: table-cell;
        vertical-align: middle;
        font-size: 24px
    }
}
#navigator.open i {
    color: #b371a2
}
.dropdown-menu li {
    padding-top: 15px;
    background-color: #fff;
    height: 65px;
    margin-top: -1px;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
    border-bottom: solid 1px rgba(0, 0, 0, 0.05)
}
.dropdown-menu li:last-of-type {
    border-bottom: 0
}
.dropdown-menu li a {
    float: left;
    font-size: 28px;
    padding: 0 20px 3px 20px
}
.games-dropdown.open {
    height: 100px
}
.nav>.games-dropdown>a,
.nav>.games-dropdown>a:hover {
    background-color: inherit
}
.nav .games-dropdown.open>a,
.nav .games-dropdown.open>a:hover,
.nav .games-dropdown.open {
    background-color: #19b5a1;
    color: #fff
}
.dropdown-menu li:hover,
.dropdown-menu li:active {
    background-color: #f7f7f7
}
.logo_for_menu {
    height: 35px;
    margin-right: 10px;
    margin-bottom: 8px
}
.banner {
    height: 100%;
    background: #54c0d6;
    width: 100%;
    color: #FFF;
    padding-top: 25px
}
.banner.values,
.banner.about {
    background: #7FBB49
}
.banner p {
    color: #FFF;
    margin: 0 auto;
    max-width: 800px
}
@media (max-width: 500px) {
    .banner p {
        width: 90%
    }
}
@media (max-width: 500px) {
    .banner {
        padding-top: 50px
    }
}
footer {
    font-size: 14px;
    line-height: 22px;
    font-family: 'BrandonGrotesque-Light', sans-serif;
    position: relative;
    z-index: 600
}
footer.dark-bg {
    color: #efefef;
}
footer.dark-bg h4 {
    color: #fff
}
footer .inner {
    padding-top: 45px;
    padding-bottom: 25px
}
footer .container>.row {
    max-width: 1150px;
    margin: 0 auto
}
@media (min-width: 500px) and (max-width: 765px) {
    footer .container>.row {
        width: 70%;
        margin: 0 auto
    }
}
footer .row .inner {
    padding: 25px
}
footer .logo {
    height: auto;
    max-height: 100%
}
footer h4 {
    text-transform: uppercase;
    margin-bottom: 20px
}
footer p {
    margin-bottom: 15px;
    font-size: 14px
}
.footer-menu {
    padding: 0;
    margin-top: 7px;
    list-style: none
}
.footer-menu li {
    display: inline;
    padding-left: 15px
}
.footer-menu li:first-child:before {
    display: none
}
.footer-bottom {
/*    background: #000;*/
}
.footer-bottom p {
    padding: 0;
    margin: 0
}
.footer-bottom p,
.footer-bottom a {
    color: rgba(0,0,0,.5)
}
.footer-bottom .container {
    width: 90%;
	max-width: 1168px;
}
.footer-bottom .container.inner {
    padding-top: 30px;
    padding-bottom: 30px
}
@media (max-width: 800px) {
    .footer-bottom p.pull-left,
    .footer-bottom ul.pull-right {
        float: none !important;
        text-align: center
    }
}
@media (max-width: 760px) {
    .footer .col-sm-6 {
        margin-left: 30px;
        padding-left: 0
    }
}
.page_links {
    float: left
}
.page_links a:hover {
    color: #000;
    text-decoration: none
}
@media (max-width: 800px) {
    .page_links {
        clear: both;
        float: none
    }
}
.social_links {
    float: right
}
.social_links a:hover {
    color: #000;
}
@media (max-width: 800px) {
    .social_links {
        margin-top: 20px;
        clear: both;
        float: none
    }
}
.mailing-list p {
    font-size: 16px
}
@media (max-width: 500px) {
    .instagram {
        width: 90%;
        margin: 0 auto
    }
}
@media (min-width: 501px) and (max-width: 1200px) {
    .footer .col-md-3.col-sm-6 {
        width: 50%;
        margin: 0 auto
    }
}
.banner .container,
.game .container {
    width: 100%;
    text-align: center;
    padding-top: 15px
}
@media (max-width: 500px) {
    .banner.homepage {
        padding-bottom: 25px;
        padding-top: 30px;
        height: auto
    }
    .homepage .container {
        padding-bottom: 30px
    }
}
.homepage h2 {
    color: #fff
}
.game {
    height: 540px;
    clear: both
}

.game.gardentails {
    height: 615px;
}
.game .container {
    padding: 0
}
@media (min-width: 842px) {
    .game .container.inner {
        width: 1170px;
        margin: 0 auto
    }
}
.game .logo {
    float: left;
    margin: 100px 0 30px 0
}
@media (max-width: 840px) {
    .game .logo {
        margin: 0 0 30px 0
    }
}
.logo.dotsclassic {
    height: 36px
}
@media (max-width: 500px) {
    .logo.dotsclassic {
        height: 50px
    }
}
.logo.twodots {
    height: 36px;
    margin-top: 120px
}
@media (max-width: 500px) {
    .logo.twodots {
        height: 40px
    }
}
@media (max-width: 840px) {
    .logo.twodots {
        margin-top: 0
    }
}
@media (min-width: 841px) and (max-width: 1040px) {
    .logo.twodots {
        margin-top: 80px
    }
}
.game.dots .dots_phone {
    float: right;
    margin: 90px 100px 0 0;
    height: 450px
}
@media (max-width: 840px) {
    .game.dots .dots_phone {
        float: none;
        margin: 90px auto 0 auto
    }
}
@media (min-width: 841px) and (max-width: 1050px) {
    .game.dots .dots_phone {
        float: right;
        margin: 170px 300px 0 0;
        height: 370px
    }
}
@media (max-width: 840px) {
    .game.dots {
        background-color: #4acd67
    }
}
@media (max-width: 500px) {
    .game.dots .purchase_links {
        width: 80%;
    }
}
.game.twodots {
    background-color: #1a1028;
    overflow: hidden;
    height: 600px
}
@media (min-width: 841px) {
    .game.twodots .image_container {
        background-image: url(../images/TwoDots_space_bkgd.jpg);
        background-size: auto 100%;
        background-position: center center;
        background-repeat: no-repeat;
        height: 600px
    }
}
.game.twodots h3 {
    color: #fff;
    float: left;
    clear: both;
    margin: 0 33px
}
@media (min-width: 841px) and (max-width: 1054px) {
    .game.twodots h3 {
        margin-left: 50px
    }
}
@media (max-width: 840px) {
    .game.twodots {
        background-image: url(../images/TwoDots_space_bkgd-small.png);
        background-position: center top
    }
}
@media (max-width: 840px) {
    .game.dotsandco {
        background-image: url(../images/homepage-dots-and-co-background-small.png);
        background-position: center top
    }
}
@media (max-width: 660px) {
    .game.twodots {
        height: 880px
    }
}
@media (max-width: 535px) {
    .game.twodots {
        background-size: 200%
    }
}
@media (min-width: 536px) and (max-width: 640px) {
    .game.twodots {
        background-size: 170%
    }
}
@media (min-width: 641px) and (max-width: 840px) {
    .game.twodots {
        background-size: 140%;
        height: 820px
    }
}

.game.gardentails {
    background-image: url(../images/garden-tails_splash.png);
    background-size: cover;
    background-position: center;
}
.game.gardentails p {
    color: #fff;
}
.game.gardentails .logo {
    width: 200px;
    height: auto;
}

.game.dotsandco {
    background-color: #ADE3D6;
    overflow: hidden;
    height: 600px
}
@media (min-width: 841px) {
	.game.dotsandco {
		position: relative;
	}
    .game.dotsandco .image_container {
        background-image: url(../images/dotsAndCoBackground.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 600px;
        z-index: 1;
        position: relative;
    }
	.game.dotsandco .background {
		position: absolute;
		bottom: 0px;
		left: 0px;
		height: 132px;
		width: 100%;
		background: #6FC5C3;
		z-index: 0;
	}
}

.dotsandco a {
    color: #efc15e;
    margin-bottom: 20px;
    text-decoration: none;
}
.dotsandco a:hover,
.dotsandco a:active {
    opacity: .6;
}
.dotsandco p {
    color: rgba(0,0,0,.8);
}

.game.dotsandco h3 {
    color: rgba(0,0,0,.8);
    float: left;
    clear: both;
    margin: 0 33px
}
@media (min-width: 841px) and (max-width: 1054px) {
    .game.dotsandco h3 {
        margin-left: 50px
    }
}
@media (max-width: 840px) {
    .game.dotsandco {
/*        background-image: url(../images/TwoDots_space_bkgd-small.png);*/
        padding-top: 220px;
        height: 500px;
        background-position: center top
    }
}
@media (max-width: 660px) {
    .game.dotsandco .game_description {
        padding: 0px;
    }
    .game.dotsandco {
        padding-top: 250px;
        height: 570px;
    }
}
@media (max-width: 535px) {
    .game.dotsandco {
        padding-top: 170px;
        height: 500px;
        background-size: 200%
    }
}
@media (min-width: 536px) and (max-width: 640px) {
    .game.dotsandco {
        background-size: 170%
    }
}
@media (min-width: 641px) and (max-width: 840px) {
    .game.dotsandco {
        background-size: 140%;
        height: 820px
    }
}

.logo.dotsandco {
    height: 40px;
    margin-top: 100px
}
@media (max-width: 500px) {
    .logo.dotsandco {
        height: 40px
    }
}
@media (max-width: 840px) {
    .logo.dotsandco {
        margin-top: 0
    }
}
@media (min-width: 841px) and (max-width: 1040px) {
    .logo.dotsandco {
        margin-top: 80px
    }
}

a#dots_classic {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden
}
.game_description {
    width: 550px;
    float: left;
    margin-left: 33px
}
.game_description p {
    clear: both;
    text-align: left
}
@media (max-width: 840px) {
    .game_description.dots {
        background-color: #fff
    }
}
@media (min-width: 841px) and (max-width: 1050px) {
    .game_description.dots {
        height: 450px
    }
}
@media (max-width: 840px) {
    .game_description {
        width: 80%;
        padding: 50px 0;
        margin: 10px 0 0 35px
    }
}
@media (min-width: 841px) and (max-width: 1050px) {
    .game_description {
        width: 40%;
        padding: 0 0;
        margin: 0 0 40px 50px
    }
}
@media (min-width: 621px) and (max-width: 840px) {
    .game_description.twodots {
        margin-top: 290px
    }
}
@media (max-width: 620px) {
    .game_description.twodots {
        margin-top: 260px
    }
}
.game_description a:hover,
.game_description a:active {
    border: none;
    text-decoration: none;
    margin-bottom: 21px
}
.dots a {
    color: #60bb46;
    margin-bottom: 20px
}
.dots a:hover,
.dots a:active {
    opacity: .6
}
.twodots a {
    color: #efc15e;
    margin-bottom: 20px;
    text-decoration: none
}
.twodots a:hover,
.twodots a:active {
    opacity: .6
}
.twodots p {
    color: #fff
}
.purchase_links {
    clear: both
}
#dotsandco_applinks,
#twodots_applinks {
    overflow: hidden
}
@media (max-width: 500px) {
	#dotsandco_applinks,
    #twodots_applinks {
        max-width: 300px;
        margin-left: 20px
    }
}
@media (min-width: 501px) {
	#dotsandco_applinks,
    #twodots_applinks {
        margin-left: 33px
    }
}
@media (min-width: 841px) and (max-width: 1050px) {
	#dotsandco_applinks,
    #twodots_applinks {
        margin-left: 50px
    }
}
@media (max-width: 500px) {
	#dotsandco_applinks .app_store,
    #twodots_applinks .app_store {
        margin-left: 10px;
        margin-right: 10px
    }
}
.app_store {
    width: auto;
    height: 45px;
    margin: 20px 20px 0 0;
    float: left;
    border-radius: 5px;
}
.app_store:hover {
    # opacity: .5
}
.emily,
.jack {
    height: 120px;
    float: right;
    -moz-animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-transform: rotate;
    -webkit-transform: rotate;
    transform: rotate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate
}
@media (max-width: 840px) {
    .emily,
    .jack {
        display: none
    }
}
.jack {
    margin-top: 170px;
    margin-right: 100px;
    -moz-animation-name: jack-float;
    -webkit-animation-name: jack-float;
    animation-name: jack-float
}
@media (min-width: 1070px) and (max-width: 1240px) {
    .jack {
        height: 100px;
        margin-top: 190px
    }
}
@media (max-width: 1069px) {
    .jack {
        display: none
    }
}
.emily {
    margin-top: 280px;
    margin-right: 120px;
    -moz-animation-name: emily-float;
    -webkit-animation-name: emily-float;
    animation-name: emily-float
}
@media (max-width: 1240px) {
    .emily {
        height: 100px
    }
}
@media (min-width: 840px) and (max-width: 990px) {
    .emily {
        margin-right: 460px
    }
}
@media (min-width: 991px) and (max-width: 1069px) {
    .emily {
        margin-right: 420px
    }
}
@-moz-keyframes jack-float {
    0% {
        margin-left: 10px;
        -moz-transform: rotate(20deg);
        transform: rotate(20deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }
}
@-webkit-keyframes jack-float {
    0% {
        margin-left: 10px;
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }
}
@keyframes jack-float {
    0% {
        margin-left: 10px;
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg)
    }
}
@-moz-keyframes emily-float {
    0% {
        margin-left: 10px;
        -moz-transform: rotate(10deg);
        transform: rotate(10deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
}
@-webkit-keyframes emily-float {
    0% {
        margin-left: 10px;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
}
@keyframes emily-float {
    0% {
        margin-left: 10px;
        -moz-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
    50% {
        margin-left: -15px
    }
    100% {
        margin-left: 6px;
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
}
.team h3 {
    text-align: center
}
.team h5 {
    color: #000;
    text-align: center;
    font-family: 'BrandonGrotesque-Light', sans-serif
}
.team h6 {
    color: #b5b5b5;
    margin-top: -8px
}
.team p {
    color: #000;
    text-align: center
}
.team a {
    text-decoration: none;
    color: #000
}
.team .inner {
    text-align: center
}
.team .inner-bottom {
    margin: 0 auto;
    width: 90%
}
@media (max-width: 500px) {
    .team .inner-bottom {
        width: 100%
    }
}
.team-member {
    width: 264px;
    padding-top: 25px;
    padding-bottom: 25px;
    height: 600px
}
@media (max-width: 646px) {
    .team-member {
        height: auto;
        margin: 0 auto
    }
}
.jobs h5 {
    text-decoration: underline;
    color: #ef5227
}
.jobs-searching {
    text-align: center
}
.col-md-3.team-member:hover {
/*    background-color: #f7f7f7;*/
}
.col-md-3.team-member:hover .jobs h5 {
    color: #1ABB9C
}
@media (min-width: 647px) and (max-width: 1000px) {
    .team-member:nth-child(odd) {
        float: left
    }
}
@media (min-width: 750px) and (max-width: 990px) {
    .team-member:nth-child(odd) {
        margin-right: 60px
    }
}
@media (min-width: 647px) and (max-width: 1000px) {
    .team-member:nth-child(even) {
        float: right
    }
}
.team-member img,
.team_img {
    width: 250px;
    height: 250px;
    margin: 2% -4%
}
.blank_circle {
    border: 2px dashed #000;
    border-radius: 70px;
    width: 142px;
    height: 142px;
    background-color: #cac8c8;
    margin: 68px auto 56px auto;
    padding: 56px
}
.banner.jobs {
    background: #b371a2;
    height: auto;
    background-image: url(../images/team-2021.jpeg);
    padding: 80px 0px;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5); 
    background-blend-mode: multiply;
    background-position: center;
}
.warning {
    background: #EF5227;
    color: #fff;
    margin-top: 0px;
    padding: 20px 0px 5px 0px;
    line-height: 1.2em;
    text-align: center;
    font-weight: bold;
}
.warning svg {
    vertical-align: middle;
    margin-bottom: 6px;
}
.warning summary {
    margin: 10px 0px;
    cursor: pointer;
}
.warning details div {
    margin: 20px 0px;
}
.warning .warning-content {
    max-width: 1050px;
    margin: 0px auto;
}
.warning .warning-content a {
    color: #fff;
    text-decoration: underline;
}
.jobs-list {
    margin: 20px auto 20px auto;
    max-width: 1168px
}
.jobs-list .row {
    margin-left: 0
}
.jobs-list .col-md-4 {
    padding-top: 25px;
    padding-bottom: 25px;
    float: left
}
@media (min-width: 871px) and (max-width: 1120px) {
    .jobs-list .col-md-4 {
        width: 33%;
        float: left
    }
}
.jobs-list .col-md-3 {
    margin-bottom: 35px
}
.jobs-list h4,
.jobs-list a {
    font-family: 'BrandonGrotesque-Bold', sans-serif
}
.jobs-list h5 {
    font-family: 'BrandonGrotesque-Light', sans-serif
}
.jobs-list p {
    padding-bottom: 5px
}
@media (max-width: 767px) {
    .jobs-list {
        padding-right: 22px;
        padding-left: 22px
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .jobs-list {
        padding-right: 15px;
        padding-left: 15px
    }
}
@media (max-width: 870px) {
    .jobs-list {
        margin-top: 50px
    }
}
.jobs-list a,
.your_position a {
    text-decoration: underline
}
.your_position {
    text-align: center
}
.dots_page {
    text-align: center
}
.dots_page .container {
    padding: 0;
    width: 100%
}
.dots_page img {
    margin: 50px auto 20px auto
}
.dots_page .purchase_links {
    display: inline-block
}
@media (max-width: 500px) {
    .dots_page .purchase_links {
        margin-bottom: 15px;
        float: none
    }
}
.dots_page .app_store {
    margin: 30px 20px 70px 20px
}
@media (max-width: 500px) {
    .dots_page .app_store {
        float: none;
        margin: 15px
    }
}
.section.game {
    height: 580px;
    background-color: #50cb6b
}
@media (max-width: 500px) {
    #google_dotspage {
        margin-left: 13px
    }
}
.foreground_content {
    background-color: #f7f3e8;
    z-index: 600;
    padding-bottom: 40px
}
.twodots_page {
    text-align: center
}
.header_content {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 600;
}
.twodots_logo {
    background: url("../images/twodots-logo.svg") no-repeat center center;
    width: 100%;
    height: 160px;
    display: inline-block;
    margin: 0px auto;
    margin-top: 120px;
}
@media (max-width: 500px) {
    .twodots_logo {
        height: 100px
    }
}
.twodots_logo2 {
    background: url("../images/twodots-logo.svg") no-repeat center center;
    width: 100%;
    height: 160px;
    display: inline-block;
    margin: 0px auto;
    margin-top: 80px;
}
@media (max-width: 500px) {
    .twodots_logo2 {
        height: 100px
    }
}
@media (min-width: 800px) {
    .links_row {
        float: left
    }
}
@media (max-width: 500px) {
    .links_row {
        width: 80%
    }
}
@media (min-width: 501px) and (max-width: 800px) {
    .links_row {
        width: 60%
    }
}
@media (max-width: 800px) {
    .links_row {
        overflow: hidden;
        clear: both;
        margin: 0 auto
    }
}
.download:hover img {
    opacity: 1
}
.download img {
    display: block;
    text-align: center;
    max-width: 140px
}
@media (min-width: 500px) {
    .download img {
        float: left
    }
}
.characters {
    background: url("/twodots/images/td_characters.png") no-repeat center center;
    width: 320px;
    height: 139px;
    margin: 60px auto 0 auto;
}
.wallpapers {
    border-top: 1px solid #C0BAA5;
    padding: 0px 0px;
    clear: both
}
.screenshot {
    border-top: 1px solid #C0BAA5;
    padding: 50px;
}
.screenshot img.screen {
    max-width: 280px
    padding-right: 50px;
}
.screenshot .download {
    width: 200px
}
.animatedscreen {
    width: 280px;
    background: #fff;
    padding: 70px 10px;
    border-radius: 20px;
    margin: 50px 50px 50px 50px;
    display: relative;
    box-shadow: 0px 5px 30px 1px grey;
}
.wallpapers {
    border-top: 1px solid #C0BAA5;
    padding: 30px 20px 0px 20px;
    margin-top: 30px
}
.wallpapers .paper {
    width: 282px;
    margin: 15px auto 0 auto;
    font-size: 14px
}
.wallpapers .paper img {
    border: 1px solid #C0BAA5;
    margin-bottom: 10px
}
@media (max-width: 500px) {
    .wallpapers .paper {
        width: auto
    }
}
.wallpapers .paper a {
    padding: 0px 8px;
    font-size: 16px;
    text-decoration: underline;
    color: #000
}
.wallpapers .paper a.wallpaper_img {
    padding: 0
}
.content {
    width: 400px;
    margin: 0px auto;
    z-index: 600;
    position: relative
}
.content p {
    font-weight: bolder;
    margin: 2em 0px
}
@media (max-width: 500px) {
    .content {
        width: auto
    }
}
.dotsLogo {
    background: url("images/dotsLogo@2x.png") no-repeat center center;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 0 7px -5px
}
.navbar-brand {
    background: url("../images/dotsLogo@2x.svg") no-repeat center center;
    width: 70px;
    height: 70px;
    margin: 12px 0px;
    padding: 20px 0px;
    display: block;
}
@media (max-width: 568px) {
    .navbar-brand {
      width: 50px;
      height: 50px;
      margin: 18px 0px 0px 0px;
      padding: 0px 0px;
    }
}
.error_page {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    padding: 100px 0
}
.error_page img {
    height: 130px;
    width: auto;
    margin: 100px auto 30px auto
}
@media (max-width: 500px) {
    .error_page img {
        height: 100px
    }
}
.values-text {
    max-width: 500px;
}
.values-text strong {
    font-family: BrandonGrotesque-Medium;
}
.values-text p {
    margin-bottom: 50px;
}
.values-text p:last-of-type {
    margin-bottom: 0px;
}
.carousel {
    width: 100%;
    text-align: center
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity
}
.carousel_image_container {
    max-width: 1168px;
    margin: 0 auto
}
.carousel-fade .carousel-inner .active {
    opacity: 1
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1
}
@media (max-width: 500px) {
    .carousel-indicators {
        bottom: -15px
    }
}
.carousel-indicators .active {
    background-color: #000;
    width: 10px;
    height: 10px;
    border: 0;
    margin: 10px 15px
}
@media (max-width: 500px) {
    .carousel-indicators .active {
        width: 15px;
        height: 15px
    }
}
.carousel-indicators li {
    background-color: #b5b5b5;
    width: 10px;
    height: 10px;
    border: 0;
    margin: 10px 15px
}
@media (max-width: 500px) {
    .carousel-indicators li {
        width: 15px;
        height: 15px
    }
}
.carousel h3 {
    padding: 30px
}
.carousel p {
    font-family: 'BrandonGrotesque-LightItalic', sans-serif
}
.carousel h5 {
    padding-top: 10px;
    color: #b5b5b5
}
.carousel_image_container.border:before {
    content: " ";
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
#text_carousel {
    height: 350px;
    padding: 20px
}
@media (max-width: 500px) {
    #text_carousel {
        height: 300px;
        padding: 0
    }
}
#text_carousel a {
    text-decoration: none
}
.quotes h5:hover {
    text-decoration: underline
}
#text_carousel .carousel-inner .item {
    width: 60%;
    margin: 0 auto
}
@media (min-width: 501px) and (max-width: 740px) {
    #text_carousel .carousel-inner .item {
        width: 90%
    }
}
@media (max-width: 500px) {
    #text_carousel .carousel-inner .item {
        width: 70%
    }
}
#site_canvas {
    width: 100%;
    height: 100%;
    position: relative
}
.side_nav {
    overflow-y: scroll;
    position: fixed;
    width: 200px;
    top: 0;
    bottom: 0;
    right: -200px;
    z-index: 2000;
    background-color: #b371a2;
    display: block
}
.side_nav.open {
    -moz-transform: translate3d(-200px, 0, 0);
    -ms-transform: translate3d(-200px, 0, 0);
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
    -moz-transition: -moz-transform, 0.3s, ease-in-out;
    -o-transition: -o-transform, 0.3s, ease-in-out;
    -webkit-transition: -webkit-transform, 0.3s, ease-in-out;
    transition: transform, 0.3s, ease-in-out
}
.side_nav.closed {
    -moz-transform: translate3d(0);
    -ms-transform: translate3d(0);
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -moz-transition: -moz-transform, 0.3s, ease-in-out;
    -o-transition: -o-transform, 0.3s, ease-in-out;
    -webkit-transition: -webkit-transform, 0.3s, ease-in-out;
    transition: transform, 0.3s, ease-in-out
}
#navigator.closed,
.navbar-brand.closed {
    -moz-transform: translate3d(0);
    -ms-transform: translate3d(0);
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -moz-transition: -moz-transform, 0.3s, ease-in-out;
    -o-transition: -o-transform, 0.3s, ease-in-out;
    -webkit-transition: -webkit-transform, 0.3s, ease-in-out;
    transition: transform, 0.3s, ease-in-out
}
#navigator.open,
.navbar-brand.open {
    -moz-transform: translate3d(-200px, 0, 0);
    -ms-transform: translate3d(-200px, 0, 0);
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
    -moz-transition: -moz-transform, 0.3s, ease-in-out;
    -o-transition: -o-transform, 0.3s, ease-in-out;
    -webkit-transition: -webkit-transform, 0.3s, ease-in-out;
    transition: transform, 0.3s, ease-in-out
}
.side_nav ul {
    padding-left: 0
}
.side_nav li {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid rgba(250, 250, 250, 0.3);
    font-family: 'BrandonGrotesque-Medium', sans-serif
}
.side_nav li:hover {
    background-color: rgba(255, 255, 255, 0.2)
}
.side_nav li:focus {
    background-color: rgba(255, 255, 255, 0)
}
.side_nav li a {
    color: #fff;
    display: block;
    padding: 40px 25px;
}
.side_nav li a:hover,
.side_nav li a:focus {
    text-decoration: none
}
.games_links {
    background-color: #8c587e;
    width: 100%
}
#site_wrapper {
    width: 100%;
    overflow-x: hidden
}
.open #site_wrapper::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    content: '';
    opacity: 1;
    -moz-transition: opacity, 0.3s;
    -o-transition: opacity, 0.3s;
    -webkit-transition: opacity, 0.3s;
    transition: opacity, 0.3s;
    -moz-transform: translate3d(0);
    -ms-transform: translate3d(0);
    -webkit-transform: translate3d(0);
    transform: translate3d(0);
    -moz-transition-timing-function: cubic-bezier, 0.7, 0, 0.3, 1;
    -o-transition-timing-function: cubic-bezier, 0.7, 0, 0.3, 1;
    -webkit-transition-timing-function: cubic-bezier, 0.7, 0, 0.3, 1;
    transition-timing-function: cubic-bezier, 0.7, 0, 0.3, 1
}
#site_wrapper.fixed {
    position: fixed;
    -webkit-overflow-scrolling: none
}
a#jobs_carousel {
    color: #2A6196;
    text-decoration: none
}
a#jobs_carousel:hover,
a#jobs_carousel:focus {
    text-decoration: underline
}
.dmca,
.privacy,
.terms {
	width: 100%;
	margin: 0px auto;
	max-width: 1208px;
}
.dmca p,
.privacy p,
.terms p {
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 2.3em;
    margin-top: 0em;
}
.dmca ul,
.privacy ul,
.terms ul {
    list-style: unset;
    padding-left: inherit;
}
.text-wrapper {
	padding: 0px 30px;
}


#game_wallpapers {
    text-align: center;
    margin-bottom: 50px;
}
#game_wallpapers p {
    color: #333;
}
#game_wallpapers .logo {
    width: 100%;
    display: inline-block;
    margin: 20px 0px 10px 0px;
    height: 100px;
}
#game_wallpapers.twodots .logo {
    background: url("../images/twodots-logo.svg") no-repeat center center;
}
#game_wallpapers.dotsandco .logo {
    background: url("../images/dots-and-co-logo.svg") no-repeat center center;
}
#game_wallpapers .container.inner {
    padding-top: 0px;
}
#game_wallpapers .grid {
    max-width: 1200px;
    margin: 0px auto;
}
#game_wallpapers .grid .mobile {
    display: none;
}
#game_wallpapers .grid .paper {
    width: 30%;
    margin: 0px 1% 2% 1%;
    display: inline-block;
}
#game_wallpapers .grid .paper img {
    width: 100%;
}
@media (max-width: 500px) {
  #game_wallpapers .twodots .logo {
      margin: 0px 0px 10px 0px;
      height: 70px;
  }
  #game_wallpapers .grid .desktop {
      display: none;
  }
  #game_wallpapers .grid .mobile {
      display: block;
  }
}