body {    
    text-align:center;
    font-family: 'Roboto', sans-serif;
    margin:0;
    background-color: #F2F2F2;
}

p,h1,h2,h3{
        z-index:2;
        position: relative;
        padding:0 10px 0 10px; 
        -webkit-margin-before:0; /* I've never had to do this before, bizarre */
        -webkit-margin-after: 0;
}



p,h1,h2 { margin:0;} 
.box1 h2, .box1a h2{font-size:18px !important;}
.box3 h2, .box3a h2{font-size:16px !important;}
.box2 h2, .box2a h2{font-size:14px !important;}
.box4 h2, box4a h2{font-size:26px !important;}

h1{font-size:50px;}
p{font-size:14px;}

.b-green{background-color: #77BC1F}

.Black{color:#000;}
.White{color:#fff;}
.OffWhite{color:#F4F4DF;}
.LightGreen{color: #58A013;}
.DarkGreen{color: #167705;}
.Yellow{color:#FFB718;}
.LightBlue{color:#2EADE5;}
.MediumBlue{color:#0081C9;}
.DarkBlue{color:#025893;}
.Grey{color:#414141;}

.BackgroundColorBlack .front, .BackgroundColorBlack .back{background-color:#000;}
.BackgroundColorWhite .front, .BackgroundColorWhite .back{background-color:#fff;}
.BackgroundColorOffWhite .front, .BackgroundColorOffWhite .back{background-color:#F4F4DF;}
.BackgroundColorLightGreen .front, .BackgroundColorLightGreen .back{background-color: #58A013;}
.BackgroundColorDarkGreen .front, .BackgroundColorDarkGreen .back{background-color: #167705;}
.BackgroundColorYellow .front, .BackgroundColorYellow .back{background-color:#FFB718;}
.BackgroundColorLightBlue .front, .BackgroundColorLightBlue .back{background-color:#2EADE5;}
.BackgroundColorMediumBlue .front, .BackgroundColorMediumBlue .back{background-color:#0081C9;}
.BackgroundColorDarkBlue .front, .BackgroundColorDarkBlue .back{background-color:#025893;}

.year-general-content .front,.year-general-content .back {background-color: #FCFCF7;  color:#414141;}
.year-2000s .front, .year-2000s .back {background-color: #31AE94; color:#414141; }
.year-1990-1999 .front, .year-1990-1999 .back{background-color: #58A013; color:#fff;}
.year-1980-1989 .front, .year-1980-1989 .back {background-color: #167705; color:#fff;}
.year-1970-1979 .front, .year-1970-1979 .back{background-color:#FFB718; color:#414141;}
.year-1950-1969 .front, .year-1950-1969 .back{background-color:#2EADE5; color:#025893}
.year-1900-1949 .front, .year-1900-1949 .back{background-color:#0081C9; color:#fff;}
.year-1800-1899 .front, .year-1800-1899 .back{background-color:#025893; color:#fff;}
.YywbStatic, .YywbSingleValue, .YywbBeforeAndAfterStatement {color:#000; }

h1#yourLifeTitle{
    width:99%;
    margin-left:1%;
    margin-right:0;
    color:#414141;
    font-size:33px;
    text-align:left;
    float:left;
    display:none;
}

.extraPaddingBottomForDateCopy{
    margin-bottom:3px;
    float:left;
    width:100%;
    font-size:12px;
}

.isotope,.SmallDecadeBoxes{
    float:left;
    width:276px;
}

.nice-select,
.nice-select ul,
.nice-select ul li{
    border-radius: 0px !important;
}


.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .nice-select .list {
        display: none;
    }
    
    .nice-select.open .list {
        display: block;
    }
}


.content .cta {
    position:absolute; 
    bottom:0; 
    right:0;     
    width:25px;
    height:25px; 
    z-index:1000;
}
 


.box1 .content .cta-hover,
.box4 .content .cta-hover{
    background: url('../images/plus.png') top left no-repeat #ff0098;
}


.box3 .content .cta-hover,
.box2 .content .cta-hover{
    width: 102px;
    background: url('../images/share.png') top left no-repeat #ff0098;
}

.box2 .content .cta-hover,
.box3 .content .cta-hover {   
    right:-79px;  
}

.content .cta-hover {
    width: 132px;
    height: 25px;
    background:#ff0098;
    position:absolute; 
    bottom:0; 
    right:-110px;     
    z-index:1001;
}


.content .cta-hover-p {
    padding-top: 5px;
    color: #ffffff;
    text-align:left;
    margin-left:15px;
}


.backgroundImage{
    position:absolute; 
    bottom:0; 
    left:0;
    z-index:0; 
}

#mainContainer{
    width:570px;
    float:left;
    margin-top:6px;
}
 
#tileContainer{    
    width:552px; 
    margin:auto;
    padding:6px 12px 6px 7px;
    float:left;
    text-align:left;
}

#headerContainer{ 
    width:96.5%; 
    max-width:546px; 
    margin:auto;
    padding:6px 13px 6px 13px;
    float:left;
    text-align:left;
}

.box{ 
    float:left;
    margin:0 0 6px 6px;
    position:relative;
    overflow:hidden;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.back {
  background-color: #1e1e1e;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.box.flipped .front{
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 0.1s;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.box.flipped .back{
     -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 0.1s;
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.lt-ie10 .back{display:none;}

 .lt-ie10 .box.flipped .front{
    display:none
}

.lt-ie10 .box.flipped .back{
    display:block;
}



.front, .back {      
    cursor:pointer;
}

.content{padding-top:10px;}

.box1, .box1a, .box2, .box2a, .box4, .box4a{
    width:270px;
    position:relative;
}

.lt-ie10 .box1, 
.lt-ie10 .box1a, 
.lt-ie10 .box2, 
.lt-ie10 .box2a, 
.lt-ie10 .box4, 
.lt-ie10 .box4a{
    z-index:20;
}


.box3, .box3a{width:132px;}
.box1, .box1a{height:238px;}
.box2, .box2a, .box3, .box3a{height:116px;}
.box4a, .box4{height:360px;}

footer{
    width: 546px;
    margin: auto;
    padding: 6px 12px 6px 13px;
    float: left;
    text-align: left;
    cursor:pointer;
}

footer #refresh-container {  
    background:#ff0098;
    width:100%;
    text-align:center;
    float:left; 
    text-decoration:none;
    height: 65px;
    padding-top: 15px;
}

footer #refresh-container:hover {  
    background:#cc007a;
}

footer #refresh-container span {  
    color: #fff; 
    text-decoration: none;    
    font-size:25px;
    font-weight:800;
    background: url('../images/icon-refresh.png') bottom center no-repeat; 
    padding-bottom: 23px;
    padding-top: 2px;
}

footer #refresh-container:hover span{        
    background:#cc007a url('../images/icon-refresh-hover.png')  bottom center no-repeat;    
}

.nice-select{    
    background: #ff0098 url('../images/dropdownArrow-down.png') center 53px no-repeat;
    color:#fff;
    border:none;
    margin:0;
    clear:none;
    z-index:99999;
    position:relative;
    height: 80px !important;
    line-height:50px;
}
 
.nice-select:hover{ 
      background:#cc007a url('../images/dropdownArrow-down-hover.png') center 53px no-repeat;
}

.nice-select.open:hover { 
      background:#cc007a url('../images/dropdownArrow-up-hover.png') center 53px no-repeat;
}


.nice-select.open {
    background:#ff0098 url('../images/dropdownArrow-up.png') center 53px no-repeat;
}

.nice-select .option{
    color:#000;
}

.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus{    
    background-color:#ff0098;
    color:#fff;
}

.nice-select,
.nice-select.open .list{
    width:100%;
}  

.nice-select:after{
    border:none;
    transform:none;    
}

.nice-select.ddDob{
    float:left;
    text-align:center !important; 
    padding-top: 6px;
    letter-spacing: 0.5px;
    font-weight:800;
    font-size:25px;
}

.nice-select.ddDob .list{
    height: 300px;
    overflow-y: scroll;
    font-size:14px;
}


.socialIcons{
    width:100%;
    float:left;
    position:absolute;
    bottom:0;
    padding:8px 0 8px 0;
    background-color:rgba(65, 64, 66, .5);  
    text-align: center;
}

.box2  .socialIcons,
.box3 .socialIcons,
.box3a .socialIcons{
    
    height:100px
}

.box2 .socialIcons ul{
    margin:36px 0 0 0;    
    display: inline-block; 
}

.box3 .socialIcons ul{
    width:115px;
    margin:22px 0 0 0;    
    display:inline-block;
}

.box3 .socialIcons ul li.social-linkedin{margin-right:0;}

.box3 .socialIcons ul li.social-google{
    margin-left:20px
}


.socialIcons ul
{ 
        display: inline-block;
   margin:0px;
   padding:0;
  
}

.socialIcons ul li{
    display:inline;
    margin-right:10px;
    list-style-type:none;
    float:left;
    height:30px;
    width:31px;
 z-index:10;
   position:relative;
   cursor:pointer;
}

.socialIcons ul li.last {
    margin-right:0px;
}

.socialIcons ul li.social-facebook{
    background:url("../images/icon-facebook.png") top left no-repeat;
}

.socialIcons ul li.social-facebook:hover{
    background:url("../images/icon-facebook-hover.png") top left no-repeat;
}

.socialIcons ul li.social-twitter{
    background:url("../images/icon-twitter.png") top left no-repeat;
}

.socialIcons ul li.social-twitter:hover{
    background:url("../images/icon-twitter-hover.png") top left no-repeat;
}

.socialIcons ul li.social-linkedin{
    background:url("../images/icon-linkedin.png") top left no-repeat;
}

.socialIcons ul li.social-linkedin:hover{
    background:url("../images/icon-linkedin-hover.png") top left no-repeat;
}

.socialIcons ul li.social-google{
    background:url("../images/icon-google.png") top left no-repeat;
}

.socialIcons ul li.social-google:hover{
    background:url("../images/icon-google-hover.png") top left no-repeat;
}

.socialIcons ul li.social-email{
    background:url("../images/icon-email.png") top left no-repeat;
}

.socialIcons ul li.social-email:hover{
    background:url("../images/icon-email-hover.png") top left no-repeat;
}

.socialTitle,.socialDescription,.socialHashTags, .socialHashTags2{display:none}


@media only screen and (max-width: 570px) {

    #headerContainer, 
    #tileContainer,
    #mainContainer,
    .box1 .front,
    .box1 .back,
    .box2 .front,
    .box2 .back,
    .box4 .front,
    .box4 .back,
    .nice-select, 
    .nice-select.open .list{
        width:100%;
        max-width:100%;
    }

  

     
    .ddDob,
    footer{
        margin:2% 2% 0 2%;
        width:96%;
    }

    footer{
        padding-left:0;
        padding-right:0;
    }

    .box1, .box1a {
        height: 260px;
    }
    
    .box1,    
    .box2,   
    .box4{
        width:96%
    }

    .box.box3{
        width:47%;
        margin:2% 0 0 2%;
    }

    .backgroundImage{
        width:100%;
    }

    #headerContainer, 
    #tileContainer{
        padding:0;
    }

    .box{
        margin:2% 2% 0 2%;
    }

    .isotope.SmallDecadeBoxes{
        width: 100%;
    }

    .nice-select.ddDob,
    footer #refresh-container span {      
        font-size:15px;         
    } 
}