.pageBody {
    margin-top: 42px;
}


section {
    position:relative;
    top:0px;

}

section img {
    width: 100%;
    display: block;
}



#modal-goback {
    background: url(back.png) 0px center no-repeat;
    display:none;
    width: 44px;
    height: 44px;
    z-index: 1;
    position: absolute;
}

.contact-info {
    position:absolute;
    top: 80.25%;
    left:0;
    width:100%;
    margin: 0 auto;
    text-align:center;
    color:white;
    font-size:.8em;
}

    .contact-info a {
        color:white;
    }

        .contact-info a:hover {
        color:#ffbc39;
    }

    .match-link {
            display: block; 
            width: 80%;
            left: 10%;
            height: 50px;
            position: absolute;
            bottom: 10%

    }


#toolbar h1 span {
    position: absolute;
    top: -99999px;
}

/*desktop menu*/
.toolMenu ul {list-style:none; width:50%; height:100%; position:absolute; right:0; top:0; display:none;}
.toolMenu li  {
    display: inline-block;
    width: 5%;
    height: 100%;
    padding: 0 2% 0 2%;

}
.toolMenu li:hover{
    background: url(../images/menuArrow.png) 50% 100% no-repeat; background-size:30% 10%;
}
.toolMenu li.active {
     background: #24b7f0 url(../images/menuArrow.png) 50% 100% no-repeat; background-size:30% 10%;
}
.toolMenu li a {
    width:100%;
    display:block;
    height:100%;
    float:left;
    text-indent:-9999px;
    white-space:nowrap;

}


.toolMenu .link-playbook {background: url(../images/m-playbook.png) center center no-repeat; background-size:contain;}
.toolMenu .link-politics {background: url(../images/m-politics.png) center center no-repeat; background-size:contain;}
.toolMenu .link-lgbtq {background: url(../images/m-lgbtq.png) center center no-repeat; background-size:contain;}
.toolMenu .link-sex {background: url(../images/m-sex.png) center center no-repeat; background-size:contain;}
.toolMenu .link-exes {background: url(../images/m-exes.png) center center no-repeat; background-size:contain;}
.toolMenu .link-trends {background: url(../images/m-trends.png) center center no-repeat; background-size:contain;}
.toolMenu .link-pot {background: url(../images/m-pot.png) center center no-repeat; background-size:contain;}
.toolMenu .link-trends2 {background: url(../images/m-trends-america.png) center center no-repeat; background-size:contain;}
.toolMenu .link-contact {background: url(../images/m-contact.png) center center no-repeat; background-size:contain;}
/*desktop menu*/


/* Mobile first queries */
.mobileContent {display:block}
.desktopContent { display:none; }

.section-fb-link {
    display:block;
     position:absolute;
    cursor: pointer;   
    width: 13.25%;
    height: 8%; 
    left: 35.1%;
    bottom: 16.5%; 

}
.section-twt-link {
    display: block;
    position: absolute;
    cursor: pointer;   

    width: 13.25%;
    height: 8%; 
    right: 35.1%;
    bottom: 16.5%; 
}



#politics .section-fb-link {
        bottom: 13.5%;
}

#politics .section-twt-link {
        bottom: 13.5%;
}


#lgbtq .section-fb-link {
        left: 37.1%;
        top: 77%;
    
}

#lgbtq .section-twt-link { 
       top: 77%;
       
}


#exes .section-fb-link {
        bottom: 9.5%;
}

#exes .section-twt-link {
        bottom: 9.5%;
}

#trends .section-fb-link {
        left: 37.1%;
    top: 38.5%;
}

#trends .section-twt-link { 
       top: 38.5%;
}


#pot .section-fb-link {
        left: 37.1%;
        top: 86.0%;
    
}

#pot .section-twt-link { 
       top: 86.0%;
       
}


#trendsAmerica .section-fb-link {
        bottom: 7.5%;
}

#trendsAmerica .section-twt-link { 
       bottom: 7.5%;
}

.section-getfacts { 
        display: block;
    width: 100%;
    height: 9%;
    position: absolute;
}
 
#playbook .section-getfacts {  
    left: 0;
    bottom: 30%; 
}

#politics .section-getfacts { 

    left: 0;
    top: 37%;  
}

#lgbtq .section-getfacts {  
    left: 0;
    top: 66%; 
    
}

#sex .section-getfacts {  
    left: 0;
    bottom: 25%; 
}

#exes .section-getfacts {  
    left: 0;
    bottom: 18%; 
}

#trends .section-getfacts {  
    left: 0;
    top: 29%; 
}


#pot .section-getfacts {  
    left: 0;
    bottom: 15%; 
}


#trendsAmerica .section-getfacts {  
    left: 0;
    bottom: 17%; 
}


#slideshow { 
    display:block;
    height:88vh
}

#slideshow > div { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
}



/* Snap CSS overrides */
#toolbar {
    background: #ffbc39;
    border-bottom: 0 solid;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    z-index:10;
    height:42px;
}

#toolbar h1 {
    background: url(../images/title-sia.png) center center no-repeat;
    text-indent: 9999px;
    white-space: nowrap;
    background-size: contain;
    height: 55%;
    width: 40%;
    position: relative;
    margin: 0 auto;
}


/*mob menu*/

.snap-drawer ul {
    list-style: none;
    width: 3%;
    height: 100%;
    position: absolute;
    left: 19px;
    margin:40px 0 0 0;
}

.snap-drawer li  {
   width: 100%;
   height: 8%;

}

.snap-drawer li a {
    width: 100%;
    display: block;
    height: 100%;
    text-indent: 999px;
    white-space: nowrap;
    border: none;
}


    


.snap-drawer .link-playbook {background: url(../images/m-playbook.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-politics {background: url(../images/m-politics.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-lgbtq {background: url(../images/m-lgbtq.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-sex {background: url(../images/m-sex.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-exes {background: url(../images/m-exes.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-trends {background: url(../images/m-trends.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-pot {background: url(../images/m-pot.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-trends2 {background: url(../images/m-trends-america.png) center center no-repeat; background-size:contain;}
.snap-drawer .link-contact {background: url(../images/m-contact.png) center center no-repeat; background-size:contain;}
/*mob menu*/





/* Swiper CSS overrides*/
.swiper-slide { 
    position: relative;
    top: 0;
    left: 0;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2;
    position: relative;
    top: -10px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff;
    width: 16px;
    height: 16px;
    top: -6px;
}

.swiper-buttons {
    position: absolute;
    top: 0;
    width: 12.5%;
    height: 100%;
    margin-top: 0px;
    z-index: 10;
    cursor: pointer;
    background-image: none;
}

.swiper-buttons .swiper-arrow { 
    width:20%;
    height:80%;
    overflow:hidden;
    display:block;
    position: absolute;
    right: 12%; 
    top:10%
}

.swiper-buttons.swiper-button-prev .swiper-arrow {  
    left: 12%;  
}


.swiper-buttons.swiper-button-prev.swiper-button-hover .swiper-arrow {
    border-right:8px solid #ffbc39;
}

.swiper-buttons.swiper-button-prev .swiper-arrow {
    background: transparent url('/en-us/match/singlesinamerica/2016/images/arrows.png') -65% 50% no-repeat;
    background-size:150%;
}

.swiper-buttons.swiper-button-next.swiper-button-hover .swiper-arrow { 
    border-left:8px solid #ffbc39;
}

.swiper-buttons.swiper-button-next .swiper-arrow { 
    background: url('/en-us/match/singlesinamerica/2016/images/arrows.png') 165% 50% no-repeat; 
    background-size:150%;
}

.swiper-button-disabled {
    display: none;
}

 .swiper-pagination-bullets  {
    bottom: 1%;
    left: 0;
    width: 100%;
} 
 
  .swiper-pagination-bullet  {
    margin: 0 5px;
        opacity: 1;
}

.swiper-next-section {
    display:none;
    position: absolute;
    top: 0;
    right:0;
    width: 12.5%;
    height: 100%;
    margin-top: 0px;
    z-index: 10;
    cursor: pointer; 
}




.swiper-next-section-0 {
    background-image: url(../images/NextUp-Politics.png);
}

.swiper-next-section-0:hover {
    background-image: url(../images/NextUp-Politics_1.png);
}

.swiper-next-section-1 {
    background-image: url(../images/NextUp-LGBTQ.png);
}
.swiper-next-section-1:hover {
    background-image: url(../images/NextUp-LGBTQ_1.png);
}


.swiper-next-section-2 {
    background-image: url(../images/NextUp-Sex.png);
}
.swiper-next-section-2:hover {
    background-image: url(../images/NextUp-Sex_1.png);
}


.swiper-next-section-3 {
    background-image: url(../images/NextUp-Exes.png);
    
}
.swiper-next-section-3:hover {
    background-image: url(../images/NextUp-Exes_1.png);
}

.swiper-next-section-4 {
    background-image: url(../images/NextUp-Trends.png);
}
.swiper-next-section-4:hover {
    background-image: url(../images/NextUp-Trends_1.png);
}

.swiper-next-section-5 {
    background-image: url(../images/NextUp-TrendsMap.png);
}
.swiper-next-section-5:hover {
    background-image: url(../images/NextUp-TrendsMap_1.png);
}

.swiper-next-section-6 {
    background-image: url(../images/NextUp-MariJuana.png);
}
.swiper-next-section-6:hover {
    background-image: url(../images/NextUp-MariJuana_1.png);
}
.swiper-next-section-7 {
    background-image: url(../images/NextUp-Contact.png);
}
.swiper-next-section-7:hover {
    background-image: url(../images/NextUp-Contact_1.png);
}



   
.swiper-next-section-0, .swiper-next-section-1, .swiper-next-section-2, .swiper-next-section-3, .swiper-next-section-4, .swiper-next-section-5, .swiper-next-section-6, .swiper-next-section-7 {
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 110% 50%;
}
/* End Swiper CSS overrides*/



/*mobile flip over animation for trendsAmerica section */
.section-modal .trendBlock,  .section-modal .lgbtqBlock, .section-modal .potBlock {
    height: 50%;
    float: left;
    width: 50%;
    cursor: pointer;
}

.section-modal .flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  cursor: pointer;
}

.section-modal .flip-container:hover .flipper,  
.section-modal .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.section-modal .flip-container.on .flipper {
      transition-delay: 0.4s;
  }

.section-modal .flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.section-modal .front,.section-modal .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
	backface-visibility: hidden;

	top: 0;
	left: 0;
}

.section-modal .front {
	z-index: 2;
    position: relative;
}

.section-modal .back {
    position: absolute;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}


/** Sectional Content */

.section-modal {
    width:100%;  
    position:fixed;
    top:0px;
    z-index:20;
    display:none;
    background-color:white;
    margin-top: 42px;
}


    .section-modal .faux-toolbar {
        display:block;
        width:100%;
        background-color: #ffbc39;
        height:45px;
        line-height:45px;
    }

        .section-modal .faux-toolbar h1 {
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
        position: absolute;
        top: 0;
        right: 44px;
        left: 44px;
        width: auto;
        height: 44px;
        z-index:40;
    }

        .modal-content img {
            width: 100%;
        }

        .section-modal .m_next {
            position: absolute;
            bottom: 0px;
            z-index: 999;
        }


       #modal-pot .m_next {
            position: absolute;
            bottom: -9px;
            z-index: 999;
        }


        #modal-trendsAmerica section, #modal-sex section, #modal-trends section {
            padding-bottom: 50px;
        }

/* Larger than phablet */
@media (min-width: 550px) {
    .mobileContent {
        display: none;
    }

    #toolbar {
        width: auto;
        height:90px;
    }

        #toolbar h1 {
        left: 0;
            position: absolute;
        top: 29%;
        width: 38%;
        height: 44%;
        }
         
        #toolbar ul {
            display: block;
        }

    .desktopContent {
        display: block;
    }

    .section-fb-link {
        display: block;
        width: 3.25%;
        height: 6%;
        left: 46.1%;
        bottom: 19%;
    }


      .match-link {
            display: none;   
    }

    #politics .section-fb-link {
        bottom: 26.4%;
    }


    #lgbtq .section-fb-link {
        top: 45.9%;
        left: 45.9%;
    }

    #sex .section-fb-link {
        bottom: 16.3%;
    }

    #exes .section-fb-link {
        bottom: 16.5%;
        left: 46.2%;
    }

    #trends .section-fb-link {
        top: 34.44%;
        left: 18.6%;
    }

    #pot .section-fb-link {
        top: 56.40%;
        left: 45.9%;
    }

    #trendsAmerica .section-fb-link {
        bottom: 43.3%;
        left: 46.1%;
    }

    .section-twt-link {
        width: 3.25%;
        height: 6%;
        right: 46.1%;
        bottom: 19%;
    }

    #politics .section-twt-link {
        bottom: 26.4%;
    }

    #lgbtq .section-twt-link {
       top: 45.80%;
       left: 50.5%;
    }

    #sex .section-twt-link {
        bottom: 16.3%;
    }

    #exes .section-twt-link {
        bottom: 16.5%;
        right: 46.2%;
    }

    #trends .section-twt-link {
       top: 34.44%;
        left: 23%;
    }

    #pot .section-twt-link {
       top: 55.80%;
       left: 50.5%;
    }

    #trendsAmerica .section-twt-link {
        bottom: 43.3%;
        left: 50.5%;
    }

    /** Swiper Pagination Colors for Each Section */
    #playbook .swiper-slide-1 .swiper-pagination-bullet {
        background: #007aff;
    }


    #playbook .swiper-slide-2 .swiper-pagination-bullet,
    #playbook .swiper-slide-4 .swiper-pagination-bullet {
        background-color: white;
    }

    #playbook .swiper-slide-3 .swiper-pagination-bullet {
        background-color: #e461ae;
    }

    #playbook .swiper-slide-5 .swiper-pagination-bullet {
        background-color: #a7b0be;
    }

    #playbook .swiper-slide-6 .swiper-pagination-bullet {
        background-color: #f4f6f9;
    }

    #politics .swiper-slide-1 .swiper-pagination-bullet,
    #politics .swiper-slide-3 .swiper-pagination-bullet,
    #politics .swiper-slide-4 .swiper-pagination-bullet,
    #politics .swiper-slide-5 .swiper-pagination-bullet {
        background-color: white;
    }

    #politics .swiper-slide-2 .swiper-pagination-bullet {
        background-color: #25cda4;
    }


    #lgbtq .swiper-slide-1 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-2 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-3 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-4 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-5 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-6 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-7 .swiper-pagination-bullet,
    #lgbtq .swiper-slide-8 .swiper-pagination-bullet {
        background-color: #f4f6f9; 
    }

   


    #sex .swiper-pagination-bullet,
    #exes .swiper-pagination-bullet,
    #trendsAmerica .swiper-pagination-bullet {
        background-color: white;
    }

    #pot .swiper-slide-1 .swiper-pagination-bullet,
    #pot .swiper-slide-2 .swiper-pagination-bullet,
    #pot .swiper-slide-4 .swiper-pagination-bullet,
    #pot .swiper-slide-5 .swiper-pagination-bullet,
    #pot .swiper-slide-6 .swiper-pagination-bullet {
        background-color: #f4f6f9; 
    }

    #pot .swiper-slide-3 .swiper-pagination-bullet {
        background-color: #e461ae;
    }




    #trends .swiper-slide-1 .swiper-pagination-bullet,
    #trends .swiper-slide-3 .swiper-pagination-bullet {
        background-color: white;
    }

    #trends .swiper-slide-2 .swiper-pagination-bullet {
        background-color: #4999fe;
    }

    #trends .swiper-slide-2 .swiper-pagination-bullet {
        background-color: #ff4c61;
    }





    .contact-info { 
    top: 75%;
    font-size:1.3em;
}

        .contact-info p br {
            display: none;
        }
}


@media only screen and (min-width: 560px) and (max-width: 1280px) {
        #toolbar {
            height: 65px;
        }

          .contact-info {
    top: 77%;
    font-size: 1em;
}
        }

/*desktop flip over animation for trendsAmerica section */
.trendBlock {
    height: 50%;
    float: left;
    width: 25%;
    cursor: pointer;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  cursor: pointer;
}

  .flip-container:hover .flipper,  
  .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}
    .flip-container.on .flipper {
      transition-delay: 0.4s;
    }

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
    position: relative;
}

.back {
    position: absolute;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

}


@media only screen and (min-width: 560px) and (max-width: 1280px) {
    #toolbar {
    height: 65px;
    }

    .contact-info {
    bottom: 5%;
    font-size: 1em;
    }   
        }

/* Mobile first queries */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* For IE 6/7 only */
.clearfix {
    *zoom: 1;
}