html,body {
font-family: 'DM Sans', sans-serif;
    line-height: 1.6em;
    box-sizing:border-box;
    background-color: #F7F4ED;
    color: #fff;}

@media only screen and (max-width:px){
    html,body {
        overflow:auto;
        height:auto; }}

.right {
    background-image: url("../img/marker-texture.jpg");
    background-position: center;
    background-size: cover;
    background-color: #96b45e;}            

*,*:before,*:after {
    box-sizing:inherit;
    outline:0;
    margin:0;
    padding:0; }

::-webkit-scrollbar {
    display:none; }

.container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;}


/* LEFT CONTAINER */
.left{
    height: auto;
    position: relative;
    width: 100%;
    display:block;
    background-color: #F7F4ED;
    padding: 40px 0px;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .left{
        height: 100vh;
        position: absolute;
        width: 50%;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-align:center;
        align-self:center;
        padding: 60px;
        clear: both;}}

.content{
    height: auto;
    width: 100%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-self:center;
    flex-direction: column;
    max-width: 370px;
    margin: 0px auto;
    text-align: center;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .content{
        max-width: 260px;}}
@media only screen and (min-width:979px) and (min-height: 600px){
    .content{
        margin: 0px auto;
        max-width: 370px;}}

h2{
    line-height: 1.1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 24px 0px;
    color:#6C675E;}  
@media only screen and (min-width:979px) and (min-height: 600px){
    h2{
        font-size: 14px;}}

.left p{
    font-family: 'Zilla Slab', serif;
    text-align: center;
    margin: 20px 40px 0px 40px;
    font-size: 15px;
    line-height: 1.5em;
    letter-spacing: 0px;
    color:#6C675E;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .left p{
        font-size: 16px;
        letter-spacing: .25px;
        margin: 20px 0px 0px 0px;}}
@media only screen and (min-width:979px) and (min-height: 600px){
    .left p{
        letter-spacing: .016em;
        font-size: 23px;}}

.logo {
    height: 50px;
    width: auto;
    margin: 0px auto;
    margin-top: 0px;
    margin-bottom: 10px;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .logo{
        height: 50px;}}
@media only screen and (min-width:979px) and (min-height: 600px){
    .logo{
        height: 70px;}}        

/* LINKS TO APP STORES */
.hero-buttons{
    width: auto;
    margin: 30px 0px 20px 0px;
    padding: 0px;
    display: block;
    text-align: center;}

.store-link{
    height: 40px;
    width: auto;
    display: inline-block;
    margin: 10px 5px;}

.store-link img{
    transition: opacity .25s ease-in-out;
    cursor: pointer;}

.store-link:hover img{
    opacity: .66;}    

.appstore{
    height:100%;
    width: auto;}


/* LEFT FOOTER */
.left .footer {
    text-align: center;
    padding:0px;
    margin:0px;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .left .footer {
        display: block;
        position: absolute;
        bottom: 30px;}}

.footer-link, .footer-link:visited, .footer-link:active{
    display: inline-block;
    font-size: 13px;
    height:18px;
    font-weight: 500;
    color:#6C675E;
    text-decoration: none;
    margin: 0px 5px;
    transition: color .25s ease-in-out;
    cursor: pointer;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .footer-link, .footer-link:visited, .footer-link:active{
        margin: 0px 10px;}}    

.footer-link:hover{
    color:#6C675E;
    cursor: pointer;}

.footer-logo{
    height:18px;
    width:121px;
    background-image: url('../img/carnevale-logo.png');
    background-size: cover;
    background-repeat: no-repeat;}         




/* RIGHT CONTAINER */

.right{
    height: auto;
    width: 100%;
    padding: 60px 60px 30px 60px;
    display:block;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .right{
        height: 100vh;
        position: absolute;
        right: 0;
        width: 50%;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-align:center;
        align-self:center;
        padding: 60px;}}

.slideshow-container {
    max-width: 280px;
    margin: 0px auto;
    margin-bottom: 30px;}
@media only screen and (min-width:1025px) and (min-height: 600px){
    .right .slideshow-container{
        max-width: 375px;
        margin-bottom: 0px;}}

.mySlides {
  display: none;}            

/* RIGHT FOOTER */
.right .footer {
    text-align: center;}
@media only screen and (min-width:767px) and (min-height: 600px){
    .right .footer {
        display: block;
        position: absolute;
        bottom: 30px;
        right: 60px;}}

.right .footer p{
    font-size: 13px;
    font-weight: 500;
    display: block;
    color: #fff;
    opacity: 1;
    text-decoration: none;}


/* PRIVACY */

.privacy {
    margin: auto;
    width: 80%;
    max-width: 1170px;
    min-width: 300px;
    padding: 10px;
    margin-bottom: 80px;}

.privacy h1{
    font-family: 'Zilla Slab', serif;
    color:#6C675E;
    font-size:24px;
    letter-spacing: .016em;
    margin-top: 24px;
    margin-bottom: 24px;}

.privacy h2{
    color:#6C675E;
    font-size:14px;
    margin-top: 24px;
    margin-bottom: 12px;
    letter-spacing: 1px;}

.privacy p, .privacy p a{
    color:#6C675E;
    font-size:16px;
    line-height: 1.6em;
    margin-top: 8px;
    margin-bottom: 8px;}

.privacy p a{
    color:#96b45e;
    text-decoration: none;}    

ul {
    text-decoration: none;
    list-style: none;}


.back {
    color:#96b45e;
    display: inline-block;
    font-size:16px;
    line-height: 1.8em;
    margin-top: 50px;
    margin-bottom: 10px;
    text-decoration: none;}



/* ANIMATION LIBRARY */
.isMobile {display:none;}
.animated {animation-duration:1s;animation-fill-mode:both}
.animatedFast {animation-duration:.75s;animation-fill-mode:both}@keyframes fadeInUp{from{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";transform:translate(0,5em)}to{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";transform:none}}@keyframes fadeInDown{from{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";transform:translate(0,-65px)}to{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";transform:none}}@keyframes fadeOutDown{from{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}to{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";transform:translate(0,5em)}}@keyframes fadeIn{from{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}to{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}}
.fadeInUp {animation-name:fadeInUp;}
.fadeInDown {animation-name:fadeInDown;}
.fadeOutDown {animation-name:fadeOutDown;}
.fadeIn {animation-name:fadeIn;}
.delayed {animation-delay:.4s;}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}