@CHARSET "ISO-8859-1";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
    margin: 0 auto;
    padding: 0px;
    width: 100%;
    height: 100vh;
    font-family: arial, sans-serif;
}
.wrapper {
    width: 100%;
    height: 100vh;
    background-image: url('../images/backgroundNew.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
#fbShare {
    display: none;
}
.wrapSponsors, .wrapSponsorsTop {
    width: 100%;
    height: 100%;
    background-color: #ff018e;
}
#beneath {
    width: 75%;
    -ms-transform: rotate(-8deg);
    -webkit-transform: rotate(-8deg); 
    transform: rotate(-8deg);
    margin-left: 5%;
    position: absolute;
    top: 10%;
} 
.main-container {
    background-image: url('../images/whiteBkgrd.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 72%;
    position: absolute;
    bottom: 0px;
}
#tiltMe {
    margin-left: 10%;
    position: relative;
    max-width: 100%;
    -ms-transform: rotate(-8deg); 
    -webkit-transform: rotate(-8deg); 
    transform: rotate(-8deg); 
    z-index: 8;
    margin-top: 17%;
}
#surface {
    width: 65%;
    position: relative;
    margin: auto;
}
.tilt {
    position: relative;
    margin-left: 24%;
    right: 20%;
    color: #000;
    margin-top: 25px;
    font-size: .8em;
}
.tilt h3 {
      color: #ff018e;
    line-height: 22px;
    font-size: 1.1em;
  }
.tilt p {
    font-family: arial, sans-serif;
    line-height: 22px;
    font-size: 1.1em;
}
                                                        /* INFO PAGE */
.turnAround {
    margin: auto;
    position: absolute;
    bottom: 0px;
    margin-left: 40%;
    width: 38%;
}
.turnAround img {
    width: 15%;
    margin-top: 2%;
} 
#showInfo {
    padding-top: 0%;
    width: 95%;
    display: inline-block;
}
#eventinfo {
    color: #fff;
    padding: 3%;
    padding-bottom: 5%;
    height: 87%;
}
.infoText {
    margin-bottom: 10%;
}
#date, #location {
    margin-top: 10%;
}
#describe {
    margin-top: 15%;
}
#date h2, #twenty {
    position: relative;
    display: inline-block;
}
#date h2, #location h2 {
    font-weight: 700;
    font-size: 2em;
}
#date h2 {
    margin-bottom: 0px;
    font-size: 2.2em;
}
#location h2 {
    margin-bottom: 0%;
}
#location a {
    text-decoration: none;
    border-bottom: 1px solid #fff;
    padding-bottom: 1%;
    color: #fff;
}
#location a:hover {
    cursor: pointer;
}
#location {
    margin-bottom: 0px;
}


#describe {
    width: 100%;
}
                                            /* Partner and Sponsor page */
#sponsorLogos {
    width: 100%;
    padding-top: 3%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inline-block;
    margin-left: 2%;
}
#sponsorLogos h2 {
    font-weight: 700;
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    margin-top: 0px;
}
#sponsorLogos img {
    width: 49%;
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}
#detailSponsors, .credits {
    position: relative;
    display: inline-block;
    color: #fff;
    margin-top: 3%;
    padding-left: 3%;
}
#detailSponsors {
    width: 95%;
    float: right;
}
#detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 0px;
}
.sponSection {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 5%;
    margin-top: 2%;
}
.sponSection p {
    font-size: .9em;
}
#sponsors {
    width: 100%;
}
#sponsors div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 3%;
}
.credits {
    width: 60%;
    float: left;
    margin-left: 20%;
}
#profs {
    width: 96%;
}
#profs div {
    position: relative;
    display: inline-block;
    margin-right: 4%;
}
                                                        /* Alice */
#alice {
    background-color: #fff;
}
.magentaTop {
    position: absolute;
    top: 0px;
    width: 60%;
    height: 40%;
    left: 15%;
    background-image: url('../images/magentaWide.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}
.alicePic {
    width: 30%;
    display: inline-block;
    margin-top: 0%;
    margin-left: 5%;
    position: relative;
    z-index: 2;
}
.aliceText {
    color: #333;
    font-family: arial, sans-serif;
    width: 40%;
    float: right;
    display: inline-block;
    margin-top: 5%;
    margin-right: 10%;
    position: relative;
    z-index: 2;
}
.aliceText h1 {
    font-weight: 700;
    font-size: 2em;
}
.aliceText h2 {
    font-weight: 700;
    font-size: 5em;
    margin-top: 0px;
    color: #ff0183;
    margin-bottom: 30px;
}
.aliceText p {
    line-height: 25px;
}
.aliceText a {
    color: #333;
    text-decoration: underline !important;
}
.magentaBottom {
    position: absolute;
    bottom: 0px;
    width: 50%;
    height: 40%;
    left: 50%;
    background-image: url('../images/magentaPrintHorz.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

#bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}
.animated{
        -webkit-animation-fill-mode:both;
        -moz-animation-fill-mode:both;
        -ms-animation-fill-mode:both;
        -o-animation-fill-mode:both;

        animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;

        animation-fill-mode:both;
        -webkit-animation-duration:2s;
        -moz-animation-duration:2s;
        -ms-animation-duration:2s;
        -o-animation-duration:2s;
        animation-duration:2s;
    }
    @-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
        60% {-webkit-transform: translateY(-15px);}
    }

    @-moz-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
        40% {-moz-transform: translateY(-30px);}
        60% {-moz-transform: translateY(-15px);}
    }

    @-o-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
        40% {-o-transform: translateY(-30px);}
        60% {-o-transform: translateY(-15px);}
    }
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-30px);}
        60% {transform: translateY(-15px);}
    }

.animated {
    margin-top: 8%;
    width: 50%;
    margin-left: 25%;
}
.downArrow {
    width: 10%;
}

/* GENERAL STRUCTURE */ 
#topRow, #bottomRow {
    background-color: #fff;  
}

.title { /* THE SENIORS TITLE DESKTOP */ 
    font-family: Arial, sans-serif;
    font-size: 6em;
    background-color: #019EE4;
    color: #fff;
    text-align: center; 
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 3.8%;  
}

.seniorImage {
    display: block;  
    width: 100%;
}

/* FLIP ANIMATION  */

.flip {
    -webkit-perspective: 800;   
    perspective: 800;
    position: relative;
    text-align: center;
}

.card {
    width: 100%;
    height: auto;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
    background-color: #fff;   
   
}

.face {
    -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
    z-index: 2;
}

.front {
   position: absolute;
   width: 100%;
   z-index: 1;
}

.flipped {
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.back {
    display: block;
    height: 510px; /* SETS HEIGHT OF CARD FLIP */ 
    padding: 10%;
    background-color: #FF018E; /* CHANGES COLOR OF BACK OF CARD FLIP */ 
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.inner {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* END FLIP ANIMATION  */

/* CONTENT INSIDE CARD FLIP */

.seniorName, .seniorName2 { /* SENIOR NAMES ON FLIP CARD */ 
    font-family: Arial, sans-serif;
    font-size: 2.5em;
    margin-top: 30%; 
    color: #fff;
}

.seniorMajor, .seniorMajor2 { /* SENIOR MAJORS ON FLIP CARD */ 
    font-family: Arial, sans-serif;
    font-size: 1.7em; 
    margin-bottom: 5%;
    line-height: 40px;
    color: #fff;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 3px solid #fff;
    border-radius: 4px
}

.btn-default {
    color: #fff;
    background-color: #FF018E;
}

.btn-default:hover {
    color: #fff !important;
    background-color: #FF018E;
    border-color: #fff!important;
}
button:hover {
    color: #fff !important;
}

.downArrow {
    width: 7%;
    display: block;
    margin: auto;
    margin-top: -2%;
}

/* MOBILE CONTENT THAT NEEDS TO BE HIDDEN ON DESKTOP */ 

.titleMobile { /* TAKES OFF THE MOBILE VERSION TITLE FOR THE DESKTOP */ 
    display: none; 
}

.seniorNameMobile, .seniorMajorMobile, .seniorName2Mobile, .seniorMajor2Mobile, .seniorInfoMobile {
    display: none; 
}  

/* MEDIA QUERIES BELOW */

                                                        /* ONLY LANDSCAPE */ 

@media only screen and (orientation: landscape) { 
	.main-container {
    	background-image: url('../images/whiteBkgrd.svg');
    }
    #tiltMe {
          margin-top: 15%;
          margin-left: 5%;
    }
    .tilt {
        margin-left: 2%;
        margin-top: 0px;
        font-size: .6em;
        float: right;
        right: 7%;
    }
}
                                                            /* ONLY PORTRAIT */
@media only screen and (orientation: portrait) { 
    .alicePic {
        margin-left: 35%;
    }
    .aliceText {
        width: 85%;
        float: left;
        margin: 1% 2% 5% 5%;
    }
}
                                                /*  MIN 2022PX */
@media screen and (min-width: 2022px) {
	#tiltMe {
    	margin-top: 13%;
    	margin-left: 8%;
	}
	#beneath {
        width: 50%;
    	top: 20%;
        margin-left: 5%;
    }
    
    #surface {
        width: 40%;
        Margin-left: 10%;
    }
    .tilt {
        float: right;
        right: 18%;
        font-size: 1.5em;
        margin-top: 10px;
    }
    .tilt p, .tilt h3 {
        line-height: 50px;
        font-size: 1.1em;
    }
    .turnAround {
        margin-left: 47%;
        width: 38%;
        margin-bottom: 2%;
    }
    .turnAround img {
        width: 6%;
        margin-top: 2%;
    }
    #showInfo {
        padding-top: 4%;
        width: 60%;
        margin-left: 20%;
    }
    #date, #location {
        margin-top: 0%;
        margin-bottom: 5%;
    }
    #date h2, #location h2 {
        margin-bottom: 0px;
        font-size: 4.6em;
    }
    #date p, #location a {
        font-size: 2em;
        line-height: 50px;
    }
    #describe {
        font-size: 1.5em;
        width: 60%;
        line-height: 36px;
    }
    .alicePic {
        width: 24%;
        margin-left: 10%;
    }
    .aliceText {
        width: 34%;
        margin-right: 20%;
    }
    .aliceText h2 {
        font-size: 5.5em;
    }
    .aliceText p {
        line-height: 36px;
        font-size: 1.5em;
    }
    .aliceText a {
        font-size: 1.3em;
        line-height: 36px;
    }
    .wrapSponsors, .wrapSponsorsTop {
        width: 100%;
        height: 100%
    }
    #sponsorLogos {
        width: 40%;
        padding-top: 5%;
    }
    #sponsorLogos h2 {
        font-size: 5em;
        margin-bottom: 3%;
    }
    #sponsorLogos img {
        width: 49%;
        margin-bottom: 5%;
    }
    #detailSponsors {
        width: 57%;
        margin-top: 3%;
    }
    #detailSponsors h3, #detailSponsors h4 {
        font-size: 2.3em;
        margin-bottom: 0px;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 5%;
    }
    .sponSection p {
        font-size: 1.1em;
        line-height: 30px;
    }
    .credits {
        width: 70%;
        margin-left: 15%;
        float: left;
    }
    .credits h3, .credits h4 {
        font-size: 2.3em;
        margin-bottom: 0px;
    }
    #profs {
        width: 70%;
        margin-right: 0px;
    }
    #profs div {
        position: relative;
        display: inline-block;
        margin-right: 4%;
    }
    #parents {
        margin-top: 5%;
    }
    .animated {
        margin-top: 4%;
    }
}
@media screen and (max-width: 2500px) { /* COPY */ 
    .seniorImage {
        display: block;
        width: 102%;
    }
}
@media screen and (max-width: 2300px) { /* COPY */ 
    .seniorImage {
        display: block;
        width: 103%;
    }
}
@media screen and (max-width: 2300px) {
    .back {
        height: 475px;
    }
}
@media screen and (max-width: 2025px) {
    .back {
        height: 450px;
    }
}
                                                /*  MAX 2122PX and  MIN HEIGHT 800PX */
@media screen and (min-width: 2022px) and (max-height: 800px) {
    #beneath {
        width: 42%;
    }
    .main-container {
        height: 82%;
    }
    #tiltMe {
        margin-top: 10%;
    }
    #surface {
        width: 30%;
    }
    .tilt p, .tilt h3 {
        line-height: 45px;
        font-size: 1em;
    }
}
                                                /*  MIN 1891PX and  MAX 2021PX */
@media screen and (max-width: 2021px) {
	#beneath {
        width: 60%;
    	top: 20%;
    }
    .main-container {
        background-image: url('../images/whiteBkgrdimac13.svg');
        height: 72%;
    }
    #tiltMe {
        margin-top: 16%;
    }
    #surface {
        width: 52%;
        margin-left: 0;
    }
    .wrapSponsors {
        width: 100%;
        height: 100vh;
    }
    .tilt {
        margin-left: 0%;
        float: right;
        right: 12%;
        font-size: 1.3em;
        margin-top: 10px;
    }
    .tilt p, .tilt h3 {
        line-height: 40px;
        font-size: 1.1em;
    }
    .turnAround {
        margin-left: 47%;
        width: 38%;
        margin-bottom: 2%;
    }
    .turnAround img {
        width: 6%;
        margin-top: 2%;
    }
    #info {
        height: 91%;
    }
    #showInfo {
        width: 60%;
        margin-left: 20%;
    }
    #date, #location {
        position: relative;
        display: block;
        margin-top: 5%;
        margin-bottom: 0;
    }
    #date {
        margin-top: 0%;
    }
    #location {
        margin-top: 12%;
    }
    #describe {
        margin-top: 15%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
    #date h2, #location h2 {
        font-size: 3.6em;
    }
    #date p, #location a {
        font-size: 1.7em;
        line-height: 45px;
    }
    #describe p {
        font-size: 1.4em;
        line-height: 35px;
    }
    .aliceText h2 {
        font-size: 5.2em;
    }
    .aliceText p, .aliceText a {
        line-height: 30px;
        font-size: 1.2em;
    }
    #sponsorLogos {
        width: 40%;
        padding-top: 5%;
        position: relative;
        display: inline-block;
    }
    #sponsorLogos h2 {
        font-size: 5em;
    }
    #sponsorLogos img {
        width: 49%;
        display: inline-block;
        margin-bottom: 8%;
    }
    #detailSponsors {
        width: 58%;
    }
    #detailSponsors h3, #detailSponsors h4 {
        font-size: 1.7em;
        margin-bottom: 0px;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 2%;
    }
    .sponSection p {
        font-size: 1em;
        line-height: 25px;
    }
    .credits {
    	width: 60%;
    	margin-left: 20%;
    	padding-left: 0%;
    	float: left;
	}
    #profs {
        width: 70%;
        margin-right: 0px;
    }
    #profs div {
        position: relative;
        display: inline-block;
        margin-right: 4%;
    }
    #parents {
        margin-top: 3%;
    }
    
    .title {
        padding: 2%; 
    }
    
    .back {
        height: 375px; 
    }
    
    /* CONTENT INSIDE CARD FLIP */

    .seniorName, .seniorName2 { 
        font-size: 2em;
        margin-top: 30%; 
    }

    .seniorMajor, .seniorMajor2 { 
        font-size: 1.3em; 
        margin-bottom: 5%;
        line-height: 40px;
    }
    .seniors {
        margin-top: -20%;
    }
    .seniorImage {
        width: 92%;
    }
    .animated {
        margin-top: 8%;
    }
}
                                                /*  MAX 1890PX and  MIN HEIGHT 800PX */
@media screen and (max-width: 2021px) and (max-height: 800px) {
    #beneath {
        width: 40%;
    	top: 20%;
    }
    #tiltMe {
        margin-top: 12%;
    }
    .tilt p {
        line-height: 40px;
    }
    .tilt p, .tilt h3 {
        font-size: 1em;
    }
    #surface {
        width: 30%;
    }
    .animated {
        margin-top: 4%;
    }
}

                                               /*  MAX 1890PX */
@media screen and (max-width: 1890px) {
	#beneath {
        width: 55%;
        position: absolute;
    	top: 23%;
        margin-left: 5%;
    }
      .main-container {
        background-image: url('../images/whiteBkgrdimac13.svg');
        height: 72%;
    }
    #tiltMe {
        margin-top: 20%;
        margin-left: 8%;
    }
    #surface {
        width: 40%;
    }
      .wrapSponsors {
        width: 100%;
        height: 100vh;
      }
     .tilt {
        margin-left: 0%;
        float: right;
        right: 12%;
        font-size: 1.3em;
        margin-top: 10px;
    }
    .tilt h3 {
        font-size: 1.3em;
    }
    .tilt p, .tilt h3 {
        line-height: 40px;
    }
      .turnAround {
        margin-left: 47%;
        width: 38%;
        margin-bottom: 2%;
    }
      .turnAround img {
        width: 6%;
        margin-top: 2%;
    }
      #info {
        height: 91%;
    }
      #showInfo {
        padding-top: 0%;
        width: 60%;
        margin-right: 10%;
      }
      #date, #location {
        position: relative;
        display: block;
        margin-top: 5%;
        margin-bottom: 0;
      }
      #date {
          margin-top: 0%;
      }
      #location {
        margin-top: 8%;
    }
      #describe {
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
      #date h2, #location h2 {
        font-size: 3.6em;
    }
      #date p, #location a {
        font-size: 1.8em;
        line-height: 45px;
      }
      #describe p {
        font-size: 1.2em;
        line-height: 35px;
    }
    #sponsorLogos {
        width: 40%;
        padding-top: 5%;
        position: relative;
        display: inline-block;
    }
    #sponsorLogos h2 {
        font-size: 4.2em;
        margin-bottom: 4%;
    }
    #sponsorLogos img {
        width: 49%;
        margin-bottom: 8%;
    }
    #detailSponsors {
        width: 56%;
        margin-top: 6%;
    }
    #detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
        margin-bottom: 0px;
    }
    .credits h3 {
        font-size: 1.8em;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 2%;
    }
    .sponSection p {
        font-size: 1em;
        line-height: 30px;
    }
    .credits {
        width: 70%;
        margin-top: 10%;
        margin-left: 20%;
    	padding-left: 0%;
    }
    #copyPoster, #siteDesign, #takePhotos, #profs, #parents {
        margin-top: 4%;
    }
    .credits h4 {
        font-size: 1.7em;
    }
    .credits p {
        font-size: 1.1em;
    }
    #profs {
        width: 70%;
        margin-right: 0px;
    }
    #profs div {
        position: relative;
        display: inline-block;
        margin-right: 4%;
    }
    
    /* PAIGES CODE don't touch */ 

    .seniors {
        margin-top: -5%;
    }

    .seniorImage {
        width: 103%;
    }

    .title {
        padding: 0.5%; 
    }
    
    .back {
        /* height: 290px; */ /* may need to adjust this */ 
        height: 387px;
    }
    
    /* CONTENT INSIDE CARD FLIP */

    .seniorName, .seniorName2 { /* everyone's name on flip card */ 
        font-size: 1.2em;
        margin-top: 30%; 
    }

    .seniorMajor, .seniorMajor2 { /* everyone's major on flip card */ 
        font-size: 1em; 
        margin-bottom: 5%;
        line-height: 40px;
    }   
}	
                                                /*  MAX 1890PX and  MIN HEIGHT 800PX */
@media screen and (max-width: 1890px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 12%;
    }
    .tilt p {
        line-height: 40px;
    }
    #surface {
        width: 30%;
    }
}
@media screen and (max-width: 1800px) {
    .back {
        height: 371px;
    }
}
@media screen and (max-width: 1700px) {
    .back {
        height: 350px;
    }
}
@media screen and (max-width: 1600px) {
    .back {
        height: 330px;
    }
}

                                                /*  MAX 1500PX and  MIN HEIGHT 800PX -- larger screen */
@media screen and (max-width: 1500px) {
    #tiltMe {
        margin-top: 28%;
    }
    .tilt p {
        line-height: 40px;
    }
    #surface {
        width: 45%;
    }
    .back {
        height: 309px;
    }
}
                                                /*  MAX 1500PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 1500px) and (max-height: 800px) {
    #beneath {
        width: 55%;
    	top: 23%;
    }
    #tiltMe {
        margin-top: 13%;
    }
      #surface {
        width: 45%;
    }
    .tilt {
        font-size: 1.1em;
    }
    .animated {
        margin-top: 6%;
    }
}
@media screen and (max-width: 1400px) {
    .back {
        height: 288px;
    }
}

                                                       /* Min 960PX and Max 1300px My laptop size*/
@media screen and (max-width: 1300px) {
    #wrapper {
        height: 86%;
    }
    #beneath {
        width: 58%;
        top: 14%;
        margin-left: 5%;
    }
      .main-container {
        background-image: url('../images/whiteBkgrdimac13.svg');
        height: 75%;
    }
     #tiltMe {
        margin-top: 35%;
    }
      #surface {
        width: 45%;
    }
      .wrapSponsors {
        width: 100%;
        height: 100vh;
      }
     .tilt {
        margin-left: 0%;
        float: right;
        right: 12%;
        font-size: 1em;
        margin-top: 10px;
    }
      .turnAround {
        margin-left: 45%;
        width: 38%;
        margin-bottom: 2%;
    }
      .turnAround img {
        width: 6%;
        margin-top: 2%;
    }
      #info {
        height: 86%;
    }
      #showInfo {
        padding-top: 0%;
        width: 60%;
        margin-right: 10%;
        z-index: 2;
      }
      #date, #location {
        position: relative;
        display: block;
        margin-top: 5%;
      }
      #date {
          margin-top: 0%;
          margin-bottom: 0%;
      }
      #location {
        margin-top: 8%;
    }
      #describe {
        margin-top: 8%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
      #date h2, #location h2 {
        font-size: 2.5em;
    }
      #date p, #location a {
        font-size: 1.4em;
        line-height: 40px;
      }
      #describe p {
        font-size: 1.1em;
        line-height: 25px;
    }
    .thumbprint {
        width: 22%;
        height: 100%;
    }
    #sponsorLogos {
        width: 40%;
        padding-top: 3%;
        position: relative;
        display: inline-block;
    }
    #sponsorLogos h2 {
        font-size: 3.5em;
    }
    #parents {
        width: 30%;
    }
    #sponsorLogos img {
        width: 45%;
        display: inline-block;
        margin-bottom: 8%;
    }
    #detailSponsors {
        width: 56%;
        margin-top: 2%;
    }
    #detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
        font-weight: 700;
        font-size: 1.3em;
        margin-bottom: 0px;
    }
    #detailSponsors h3, .credits h3 {
        width: 90%;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 5%;
    }
    .sponSection p {
        font-size: .9em;
        line-height: 25px;
    }
    #profs, #sponsors {
        width: 70%;
        margin-right: 0px;
    }
    #sponsors {
        width: 90%;
    }
    .credits {
        width: 70%;
        margin-right: 15%;
        margin-top: 10%;
    }
    #profs div, #sponsors div {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 4%;
        width: 45%;
    }
    #parents {
        width: 100%;
    }
    #alice {
        background-color: #fff;
    }
    .alicePic {
        width: 30%;
        display: inline-block;
        margin-top: 3%;
        margin-left: 5%;
    }
    .aliceText {
        width: 45%;
        margin-top: 0%;
        margin-right: 10%;
    }
    .aliceText h1 {
        font-weight: 700;
        font-size: 2em;
    }
    .aliceText h2 {
        font-weight: 700;
        font-size: 5em;
        margin-top: 0px;
        color: #ff018e;
        margin-bottom: 30px;
    }
    .aliceText p, .aliceText a {
        line-height: 25px;
        font-size: 1em;
    }
    
    /* PAIGES CODE DON'T TOUCH */ 

    .title {
        font-size: 4em; 
        padding: 3.5%; 
        margin-top: 0;
    }
    .back {
        height: 255px; 
    }
    
    /* CONTENT INSIDE CARD FLIP */

    .seniorName, .seniorName2 { /* everyone's name on flip card */ 
        font-size: 1.2em;
        margin-top: 30%; 
    }
    .btn {
        font-size: 1em; 
    }
    .title {
        
    }
    .seniorImage {
        width: 98%;
    }
}
                                                /*  MAX 1300PX and  MIN HEIGHT 800PXX */
@media screen and (max-width: 1300px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 15%;
    }
    .tilt p {
        line-height: 40px;
    }
    .animated {
        margin-top: 8%;
    }
}
@media screen and (max-width: 1200px) {
    .back {
        height: 235px;
    }
}
@media screen and (max-width: 1100px) {
    .back {
        height: 215px;
    }
    .seniorName, .seniorName2 {
        font-size: 1.2em;
        margin-top: 5%;
    }
}
@media screen and (max-width: 1000px) {
    .back {
        height: 196px;
    }
}
                                               /*  MAX 1560PX and PORTRAIT */
@media screen and (max-width: 1560px) and (orientation: portrait) {
	#tiltMe {
    	margin-top: 34%;
	}
	#beneath {
    	width: 70%;
    }
    #surface {
    	width: 55%;
	}
    
    /* PAIGES CODE DON'T TOUCH */ 
    
}
                                                /*  MAX 1045PX */
@media screen and (max-width: 1045px) {
    #tiltMe {
        margin-top: 36%;
    }
    .tilt {
        margin-left: 0%;
        right: 8%;
        font-size: .9em;
    }
    .tilt p, .tilt h3 {
        line-height: 32px;
    }
    #surface {
        width: 50%;
    }
    #showInfo {
        width: 60%;
    }
    #date, #location {
        margin-top: 5%;
    }
    #location h2 {
        margin-bottom: 1%;
    }
    #date p, #location a {
        font-size: 1.2em;
        line-height: 40px;
    }
    #describe p {
        font-size: 1.1em;
        line-height: 27px;
    }
    .wrapSponsorsTop {
        margin-top: 5%;
        height: 100%;
    }
    
    .wrapSponsors {
       height: 100vh;
    }
    #sponsorLogos {
        width: 30%;
        margin-left: 2%;
        margin-right: 0px;
    }
    #sponsorLogos h2 {
        font-size: 2.2em;
        margin-bottom: 5%;
    }
    #sponsorLogos img {
        display: block;
        width: 88%;
    }
    #detailSponsors {
        width: 65%;
        margin-top: 3%;
    }
    #parents h4 {
        width: 100%;
        margin-bottom: 12%;
    }
    .sponsorLogos h2 {
        font-size: 2em;
    }
    .sponsorLogos img {
        width: 30%;
        display: block;
    }
    #sponsors {
        width: 90%;
    }
    #sponsors div {
        vertical-align: top;
        margin-right: 3%;
        width: 42%;
    }
    .sponSection {
        margin-top: 5%;
    }
    .sponSection p {
        font-size: .9em;
        line-height: 25px;
    }
    .aliceText {
        width: 50%;
        margin-right: 6%;
    }
    .aliceText h1 {
        font-size: 1.8em;
    }
    .aliceText h2 {
        font-size: 3.8em;
    }
    
    .back {
        height: 197px;
    }
    
    /* CONTENT INSIDE CARD FLIP */

    .seniorName, .seniorName2 { /* everyone's name on flip card */ 
        font-size: 1.2em;
        margin-top: 30%; 
    }

    .seniorMajor, .seniorMajor2 { /* everyone's major on flip card */ 
        font-size: .9em; 
        margin-bottom: 5%;
        line-height: 20px;
    }
    
    .btn {
        font-size: .9em; 
    }
    
    .inner button {
        display: none; 
    }
}
                                                /*  MIN 900PX and  MAX 1045PX */
@media screen and (max-width: 1045px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 24%;
    }
    .tilt p, .tilt h3 {
        line-height: 32px;
    }
    .downArrow {
        width: 10%;
    }
    .wrapSponsorsTop {
        margin-top: 0;
        height: 100%;
    }
    #surface {
        width: 50%;
    }
}

@media screen and (max-width: 991px) {
    #tiltMe {
        margin-top: 42%;
    }
    #fullpage {
        overflow-x: hidden;
    }
    .text-center {
        display: none; 
    }
    
    .seniorImage { 
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }
    
    .title {
        display: none; 
    }
    
    .titleMobile {
        margin-top: 0%; 
        display: block;
        background-color: #019EE4;
        width: 100%;
        height: auto;
        padding-top: 18%;
        font-family: Arial, sans-serif;
        font-size: 3.7em;
        color: #fff;
        text-align: center; 
    }
    
    .titleMobile h1 {
        margin-top: -13%;  
    }
    
    /* DISPLAYING SENIOR INFO MOBILE CONTENT */ 
    
    .seniorInfoMobile {
        display: block; 
        margin-top: 18%; 
    }
    
     .seniorNameMobile {
        font-family: Arial, sans-serif;
        font-size: 3em;
        color: #FF018E;
        margin-top: 0%; 
        margin-bottom: 1%;
        display: block; 
    }

   .seniorMajorMobile {
        display: block; 
        font-family: Arial, sans-serif;
        font-size: 2.1em;
        color: #FF018E;
        margin-bottom: 3%; 
    }
    
    .seniorName2Mobile {
        display: block; 
        font-family: Arial, sans-serif;
        font-size: 3em; 
        color: #FF018E;
        margin-top: 2%; 
        margin-bottom: 1%;
    }

    .seniorMajor2Mobile {
        display: block; 
        font-family: Arial, sans-serif;
        font-size: 2.1em;
        line-height: 40px;
        color: #FF018E; 
        margin-bottom: 2%;
    }
 
    /* FLIP ANIMATION DISABLE FOR MOBILE */

    .flip {
      -webkit-perspective: none;   
        perspective: none;
    }

    .card {
        -webkit-transform-style: none;
        -webkit-transition: none;
        transform-style: none;
        transition: none;
    }

    .face {
      -webkit-backface-visibility: none;
        backface-visibility: none;
       z-index: 2;
    }

    .flipped {
      -webkit-transform: none;
      transform: none;
    }

    .back {
        background-color: #fff; /*changes the color of the back of the card*/ 
        -webkit-transform: none;
        transform: none; 
        height: 450px; 
    }

    .inner {
        -webkit-transform: none;
        transform: none;
    }  
    
    .animated{
        display: none;
    }
}
                                                /*  MAX WIDTH 991PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 991px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 30%;
    }
}
                                                /*  MIN 700PX and  MAX 899PX */
@media screen and (max-width: 899px) {
    .wrapper {
        height: 100vh;
    }
    #tiltMe {
        margin-top: 48%;
    }
    #surface {
        width: 54%;
    }
    #eventinfo {
        background-color: rgb(1, 158, 228);
        height: 100%;
    }
    #showInfo {
        width: 70%;
        margin-left: 15%;
        height: 100%;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    #date, #location {
        position: relative;
        display: block;
        margin-top: 5%;
      }
      #date {
          margin-top: 0%;
          margin-bottom: 0%;
      }
      #location {
        margin-top: 8%;
    }
      #describe {
        margin-top: 8%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
      #date h2, #location h2 {
        font-size: 2.5em;
    }
      #date p, #location a {
        font-size: 1.3em;
        line-height: 40px;
      }
      #describe p {
        font-size: 1.1em;
        line-height: 30px;
    }
    #alice {
        height: 100%;
    }
    .magentaTop, .magentaBottom {
        display: none;
    }
    .aliceText {
        width: 55%;
        margin-right: 6%;
        margin-top: 6%;
    }
    .aliceText h1 {
        font-size: 1.6em;
    }
    .aliceText h2 {
        font-size: 2.7em;
    }
    .aliceText p, .aliceText a {
        font-size: .9em;
    }
    .wrapSponsors, wrapSponsorsTop {
        padding-top: 5%;
        padding-bottom: 5%;
    }
    #sponsorLogos h2 {
        margin-bottom: 8%;
    }
    #sponsorLogos img {
        width: 90%;
        margin-bottom: 5%;
    }
    #detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
        font-size: 1.3em;
        margin-bottom: 0px;
    }
    #detailSponsors h3, .credits h3 {
        width: 90%;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 5%;
    }
    .sponSection p {
        font-size: .9em;
        line-height: 25px;
    }
    .credits {
    	width: 80%;
        margin-left: 15%;
        margin-top: 0%;
	}
    
    /* PAIGES CODE DON'T TOUCH */
    
    .text-center {
        display: none; 
    }
    
    .seniorImage { 
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }
    
    .title {
        display: none; 
    }
    
    .titleMobile {
        margin-top: 0%;
        padding-top: 18%;
        font-size: 3.2em;
    }
    
    .titleMobile h1 {
        margin-top: -13%;  
    }
    
    /* DISPLAYING SENIOR INFO MOBILE CONTENT */ 
    
    .seniorInfoMobile { 
        margin-top: 10%; 
    }
    
     .seniorNameMobile {
        font-size: 2.5em;
    }

   .seniorMajorMobile {
        font-size: 1.8em;
    }
    
    .seniorName2Mobile {
        font-size: 2.5em;
    }

    .seniorMajor2Mobile {
        font-size: 25px;
    }
    
    /* FLIP ANIMATION DISABLE FOR MOBILE */

    .flip {
      -webkit-perspective: none;   
        perspective: none;
    }

    .card {
        -webkit-transform-style: none;
        -webkit-transition: none;
        transform-style: none;
        transition: none;
    }

    .face {
      -webkit-backface-visibility: none;
        backface-visibility: none;
       z-index: 2;
    }

    .flipped {
      -webkit-transform: none;
      transform: none;
    }

    .back {
        background-color: #fff; /*changes the color of the back of the card*/ 
        -webkit-transform: none;
        transform: none; 
        height: 450px; 
    }

    .inner {
        -webkit-transform: none;
        transform: none;
    }  
    .animated {
        margin-top: 15%;
        width: 50%;
        margin-left: 25%;
    }
    .downArrow {
        width: 10%;
    }
}
                                                /*  MAX WIDTH 991PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 899px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 30%;
    }
    #surface {
        width: 52%;
    }
}

@media screen and (max-width: 750px) {
    .wrapper {
        background-image: url(../images/backgroundNewSmall.jpg);
    }
    .seniorInfoMobile {
        margin-top: 0; 
    }
    #tiltMe {
        margin-top: 58%;
    }
    #surface {
        width: 56%;
    }
    .tilt {
        right: 3%;
        font-size: .8em;
    }
    #alice {
        height: 100%;
        margin-top: 10%;
        padding-bottom: 10%;
    }
    .aliceText {
        width: 50%;
        margin-right: 6%;
        margin-top: 6%;
        float: right;
    }
}
                                                /*  MAX WIDTH 750PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 750px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 30%;
    }
    #surface {
        width: 53%;
    }
    .tilt {
        right: 2%;
    }
}
                                                    /*  MAX 699PX */
@media screen and (max-width: 699px) {
    #section5 {
        background-color: #FF018E;
    }
    #tiltMe {
        margin-top: 70%;
    }
    .tilt {
        right: 2%;
        font-size: .7em;
    }
    #showInfo {
        width: 80%;
        margin-left: 10%;
    }
    .thumbprint {
        display: none;
    }
    #describe {
        margin-top: 8%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }
    #date h2, #location h2 {
        font-size: 2.5em;
    }
    #date p, #location a {
        font-size: 1.1em;
        line-height: 40px;
    }
    #describe p {
        font-size: .9em;
        line-height: 25px;
    }
    #sponsorLogos {
        width: 90%;
    }
    #sponsorLogos h2 {
        margin-bottom: 8%;
        font-size: 2.8em;
    }
    #sponsors {
        width: 90%;
    }
    #sponsors div {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        width: 42%;
    }
    #parents {
        margin-bottom: 5%;
    }
    #alice {
        margin-top: 8%;
        padding-bottom: 0%;
    }
    .alicePic {
        width: 36%;
        margin-left: 32%;
    }
    .aliceText {
        width: 85%;
        margin-right: 6%;
        margin-top: 8%;
    }
    .aliceText h1 {
        font-size: 1.3em;
    }
    .aliceText h2 {
        font-size: 3em;
        margin-bottom: 18px;
    }
    .aliceText p, .aliceText a {
        font-size: .9em;
    }
    #sponsorLogos img {
        width: 32%;
        margin-bottom: 3%;
        display: inline-block;
    }
    #detailSponsors {
        width: 98%;
        margin-top: 8%;
        float: left;
        margin-left: 2%;
    }
    #detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
        font-size: 1.3em;
        margin: 0%;
    }
    #detailSponsors h3, .credits h3 {
        width: 90%;
        margin: 0%;
    }
    .sponSection {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-right: 5%;
        margin-top: 5%;
    }
    .sponSection p {
        font-size: .9em;
        line-height: 25px;
    }
    .credits {
    	width: 80%;
        margin-left: 10%;
    	padding-left: 0%;
    	float: left;
        margin-top: 10%;
	}
    #copyPoster, #siteDesign, #takePhotos, #profs, #parents {
        margin-top: 5%;
    }
    
    .title {
        display: none; 
    }
    
    .seniorInfoMobile {
        margin-top: 25%; 
    }
    
     .seniorNameMobile {
        font-size: 2.2em;
        margin-top: 2%; 
    }

   .seniorMajorMobile {
        font-size: 1.5em;
    }
    
    .seniorName2Mobile {
        font-size: 30px;
        color: #FF018E;
        margin-top: 2%; 
        margin-bottom: 1%;
    }

    .seniorMajor2Mobile {
        font-size: 25px;
        line-height: 40px;
    }
    .animated {
        margin-top: 15%;
        width: 50%;
        margin-left: 25%;
    }
    .downArrow {
        width: 10%;
    }
 
    /* FLIP ANIMATION  */

    .back {
        height: 260px; 
    }
}
                                                /*  MAX WIDTH 699PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 699px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 34%;
    }
    #surface {
        width: 53%;
    }
}

@media screen and (max-width: 649px) {
    .title {
        display: none; 
    }
    
    .titleMobile {
        display: block; 
        background-color: #019EE4;
        width: 100%;
        height: auto;
        padding: 18%;
        font-family: Arial, sans-serif;
        font-size: 3.2em;
        color: #fff;
        text-align: center; 
    }
    
    .titleMobile h1 {
        margin-top: -13%;  
    }
    
    .seniorInfoMobile { 
        margin-top: 20%; 
    }

   .seniorMajorMobile {
        margin-bottom: 3%; 
    }
    
    .seniorName2Mobile {
        display: block; 
        font-family: Arial, sans-serif;
        font-size: 30px;
        color: #FF018E;
        margin-top: 2%; 
        margin-bottom: 1%;
    }

    .seniorMajor2Mobile {
        font-size: 25px;
        line-height: 40px;
    }
    .animated {
        margin-top: 54%;
        width: 50%;
        margin-left: 25%;
    }
    .downArrow {
        width: 10%;
    }
}
@media screen and (max-width: 599px) {
    #tiltMe {
        margin-top: 82%;
    }
    .tilt {
        right: 0%;
    }
    .seniorImage {
        display: block;  
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }
    .seniorInfoMobile { 
        margin-top: 18%; 
    }
    .seniorName2Mobile {
        display: block; 
        font-family: Arial, sans-serif;
        font-size: 30px;
        color: #FF018E;
        margin-top: 2%; 
        margin-bottom: 1%;
    }
    .seniorMajor2Mobile {
        margin-bottom: 2%;
    }
}
                                                /*  MAX WIDTH 599PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 599px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 45%;
    }
    .tilt {
        right: 0%;
    }
}

                                                /*  MAX 499PX */
@media screen and (max-width: 499px) {
    .wrapper {
        background-image: url(../images/backgroundNewMobile.jpg);
    }
    #beneath {
        width: 75%;
    }
    .main-container {
        height: 80%;
    }
    #tiltMe {
        margin-top: 120%;
    }
    #surface {
        width: 75%;
    }
    .tilt {
        right: 10%;
        font-size: .7em;
        margin-top: 5%;
    }
    #showInfo {
        width: 90%;
        margin: 10% 0 10% 5%;
    }
    #date h2, #location h2 {
        font-size: 2em;
    }
    #date p, #location a { 
        line-height: 30px;
        font-size: 1.1em;
    }
    #describe {
        line-height: 25px;
    }
    #parents {
        margin-bottom: 5%;
    }
    .magentaBottom {
        width: 80%;
        height: 40%;
    }
    .alicePic {
        width: 40%;
        margin-left: 30%;
    }
    .aliceText {
        width: 75%;
        margin-right: 0%; 
        margin-top: 8%;
        float: left;
        margin-left: 12.5%;
    }
    .aliceText h1 {
        font-size: 1.4em;
    }
    #sponsorLogos h2 {
        margin-bottom: 8%;
        font-size: 2.3em;
    }
    .aliceText p, .aliceText a {
        font-size: .9em;
    }
    .wrapSponsors {
        background-color: #ff018e;
        height: 100%;
    }
    #sponsorLogos {
        width: 100%;
        margin-left: 0%;
    }
    #sponsorLogos img {
        display: inline-block;
        width: 49%;
    }
    #detailSponsors {
        width: 98%;
        margin-top: 8%;
        float: none;
        margin-left: 2%;
    }
    #detailSponsors h3, #detailSponsors h4, .credits h3, .credits h4 {
        font-size: 1.1em;
        margin: 0%;
    }
    .sponSection {
        margin-top: 5%;
    }
    .sponSection p {
        font-size: .9em;
        line-height: 25px;
    }
    .credits {
        width: 98%;
        margin-left: 5%;
        margin-top: 0%;
        margin-right: 0%;
        float: none;
    }
    .seniorName2Mobile {
        font-size: 30px;
        color: #FF018E;
        margin-top: 2%; 
        margin-bottom: 1%;
    }
    .seniorMajor2Mobile {
        margin-bottom: 2%;
    }
    /* FLIP ANIMATION  */

    .back {
        height: 200px; 
    }
    .downArrow {
        width: 20%;
        margin: 0px;
    }
    #sponsors div {
        width: 70%;
    }
}
                                                /*  MAX WIDTH 599PX and  MAX HEIGHT 800PX */
@media screen and (max-width: 499px) and (max-height: 800px) {
    #tiltMe {
        margin-top: 60%;
    }
    .tilt {
        right: 10%;
    }
}

@media screen and (max-width: 376px) {
    #tiltMe {
        margin-top: 62%;
    }
    #beneath {
        width: 80%;
    }
    .main-container {
        height: 90%;
    }
    .tilt p, .tilt h3 {
        line-height: 25px;
    }
    #parents {
        margin-bottom: 20%;
    }
    #parents h4 {
        font-size: 1em;
    }
    .wrapSponsors {
        background-color: #ff018e;
        height: 100%;
    }
    .sponSection {
        margin-top: 8%;
    }
    .wrapSponsorsTop {
        margin-top: 5%;
    }
    #section4, #section5 {
        height: 100% !important;
    }
    #sponsors div {
        display: block;
    }
}
@media screen and (max-width: 321px) {
    #beneath {
        top: 20%;
    }
    .tilt p, .tilt h3 {
        line-height: 25px;
    }  
    .main-container {
        height: 85%;
    }
    #sponsorLogos {
        margin-top: 4%;
    }
}
/* Will add desktop and large screen breakpoints here */