html{
        font-weight: 800;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-image:url(../images/bg.png);
    font-size:14px;
}

main {
    flex: 1 0 auto;
        
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #9e9e9e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #9e9e9e;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #9e9e9e;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #9e9e9e;
}

a {
    font-weight: bold;
    color: rgb(248, 166, 60);
}
a:hover, a:active, a:focus, a:visited{
    color:rgb(251, 149, 17);
}

h1{
    font-family: 'Oleo Script', cursive;
    text-align:center;
    color:rgb(122, 122, 122);
    font-size:40px;
}

h4{
    font-family: 'Oleo Script', cursive;
    text-align:center;
    color:rgb(122, 122, 122);
    font-size:26px;
}

h5{
    font-family: 'Oleo Script', cursive;
    text-align:center;
    color:rgb(122, 122, 122);
    font-size:22px;
}

ul.browser-default li{
    list-style-type: initial;
    margin-left:20px;
}
a.blue-button{
   color:#1d3a56;
    font-weight: bold;
    min-width: 115px;

    text-align:center;
    padding: 5px;
}
a.yellow-button{
    background-color:rgb(248, 166, 60);
    color:#444;
                min-width: 115px;
    border-radius: 0px;
    text-align:center;
}
a.yellow-button:hover, a.yellow-button:active, a.yellow-button:focus, a.yellow-button:visited{
 color:#000;
}
a.grey-button{
    background-color:#CCCCCC;
    color:#444;
            min-width: 115px;
    border-radius: 0px;
    margin-left: 10px !important;
    text-align:center;
}
a.grey-button:hover, a.grey-button:active, a.grey-button:focus, a.grey-button:visited{
 color:#000;
 
}

.modal h4 {
 text-align:center;   
}

@media only screen and (max-width: 450px){
main.container {
    overflow: scroll;
}
}

/* header */



header{
    border-bottom: 5px solid rgb(248, 166, 60);
    background-color: white;
    height: 50px;
}

header nav{
        box-shadow: none;
     height: 45px;
    line-height: 45px;       
}

nav .brand-logo{
    font-size:30px;
    margin-left:20px;
    font-weight: 200;
    max-height: 100%;
}

nav .brand-logo img{
    max-height: 45px;
    max-width: 157.78px;  
}

nav .header-menu{
    margin-right:20px;
}

.header-menu li a{
    height: 45px;
}

.header-menu li a i.fa{
    font-size:18px;
}

.header-menu li a i.material-icons {
    font-size:20px;
}


.header-menu li a.circular{
    width: 40px;
    margin: 0px;
    padding: 0px;
    
}
.header-menu li:not(:last-child) a.circular{
    margin-left: 20px;
}

.header-menu li a.circular i{

    width: 35px;
    height: 35px;
    border-radius: 35px;
    text-align: center;
    line-height: 35px;
    transition:background-color 0.2s;
}

.header-menu li a.circular i.fa.fa-facebook{
    color:white;
    background-color:#3B5998;
        margin-top: 6px;
        
    
}



.header-menu li a.circular i.material-icons{
    color:white;
    background-color:rgb(248, 166, 60);
        margin-top: 6px;
}

.header-menu li a:hover{
    background-color:transparent;
}
.header-menu li a.circular:hover i.fa.fa-facebook{
    background-color:#274a92;
}



.header-menu li a.circular:hover i.material-icons{
    background-color:rgb(251, 149, 17);
}




/* footer */

footer.page-footer{
    padding-top:0px;
}

footer .footer-copyright a:not(:first-child){
    margin-right:10px;
}

footer .footer-copyright a:not(:first-child):after{
    content:"|";
    margin-left:10px;
}

footer.page-footer .footer-copyright{
    background-color: rgba(0,0,0,0.35);
}


/* home page styling */

.memory-tile-container{
    width:300px;
    margin: 0 auto;
        margin-top: -40px;
}

.memory-tile-title{
    padding:0px;
    margin:0px;
    margin-top: 10px;
}

#memory-tile{
    background-color:#f89b22;   
        background-size: cover;
    width: 300px;
    height: 450px;
        margin-top: -20px;
        position: relative;
            overflow: visible;
}



.help-overlay{
        position: absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    background-image:
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        url(../images/memorytile-demo.jpg);
    z-index: 9;
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 40px;
}

.upload-image-container{
    text-align: center;
    padding-bottom:10px;
}

.add-text-container{

    margin-bottom:10px;
    margin-top: 0px;
    background-color: rgba(255, 255, 255, 0.9);
    height: 140px;
    max-height:140px;
    min-height:140px;
}

.tile-background{
    background-color:white;
    margin-left:25px;
    margin-right:25px;
    position: relative;
            min-height: 390px;
}

.milestone-type .tile-background{
    min-height: 153px;
}



.add-text-container textarea{
    height: 120px;
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    min-height: 120px;
    max-height: 120px;
    margin: 5px;
    border: none;
    resize: none;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.none-type{
        padding-top: 25px;
}
.none-type .add-text-container{
    height: 385px;
    max-height: 385px;
    min-height: 385px;
}

.none-type .add-text-container textarea{
    height: 360px;
    max-height: 360px;
    min-height: 360px;
}

.quote-type, .photo-type{
    padding-top:25px;
    position: relative;
}

.quote-type .add-text-container.add-quote-container{
    height: 231px;
    max-height: 231px;
    min-height: 231px;
    background-color: rgba(255, 255, 255, 0.9);
    
        position:relative;
}

.quote-image {
    position: absolute;
    z-index: 2;
    text-align: center;
    width:100%;
}

.quote-type .add-text-container.add-quote-container textarea{
    height: 166px;
    max-height: 166px;
    min-height: 166px;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Oleo Script', cursive;
    text-align: center;
    margin-top: 55px;
}

.milestone-type{
    padding-top:32px;
}
.milestone-type .milestone-container{
    padding: 20px;
    padding-top: 30px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: black;
    border-radius: 100px;
    margin-bottom: 32px;
}

.milestone-type .milestone-container input[type=text]{
text-align: center;
    border: none;
    margin-top: -10px;
    font-size: 12px;
}

.milestone-type .milestone-container .milestone-text{
    font-family: 'Oleo Script', cursive;
    height: 100px;
    width: 155px;
    min-width: 155px;
    max-width: 155px;
    min-height: 100px;
    max-height: 100px;
    margin: 5px;
    border: none;
    resize: none;
    text-align: center;
    font-size: 20px;
}

.date-container{
    text-align: right;
    padding: 5px;
    position: absolute;
    font-size: 8px;
    width: 100%;
    bottom: 0px;
    right: 0px;
    
}

.date-container input.datepicker{
        text-align: right;
    border: none;
    margin: 0px;
    padding: 0px;
    height: 25px;
    font-style: italic;
    font-size:12px;
    font-weight: 400;
}

input.picker__input{
    border-bottom: none !important;
    text-align: center !important;

}

.tile-logo{
    position: absolute;
    right: 10px;
    width: 100px;
}

.container .row.memory-tile-buttons{
    text-align:center;
        padding: 15px;
}
.container .row.memory-tile-buttons .col{
 padding:0px;   
}

.memory-tile-buttons .button-title{
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    display: block;
    color: rgb(248, 166, 60);
    font-family: 'Oleo Script', cursive;
}

.memory-tile-buttons .swap-backgrounds .button-text{
    padding: 0px 25px;
    font-size: 10px;
        white-space: nowrap;
}

.memory-tile-buttons .save-memory-tile .button-text{
    font-size: 10px;
}

.memory-tile-buttons .save-memory-tile{
    cursor:pointer;
}



.memory-tile-buttons .col{
    position:relative;
    
}

.memory-tile-buttons .action-button{
    -moz-box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.2);
    transition:box-shadow 200ms;
    border-radius:10px;
padding: 10px;
background-color: white;
}

.memory-tile-buttons .action-button:active{
    -moz-box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px -3px 10px 2px rgba(0, 0, 0, 0.1);    
}

.memory-tile-buttons i.material-icons{
    position: absolute;
    /* line-height: 52px; */
    top: 10px;
    cursor: pointer;
    color: rgb(248, 166, 60);
    border: 2px solid rgb(248, 166, 60);
    border-radius: 50px;
    text-align: center;
}

.memory-tile-buttons .swap-backgrounds{
    margin-right:5px;
}

.memory-tile-buttons .save-memory-tile{
 margin-left:5px;   
}

.memory-tile-buttons .swap-backgrounds i.material-icons:first-child{
    left:10px;
}

.memory-tile-buttons .swap-backgrounds i.material-icons:nth-child(3){
    right:10px;
}

.memory-tile-buttons .save-memory-tile i.material-icons:first-child{
left: 10px;
    font-size: 50px;
}

.row.image-upload-container{
    margin-top:30px;
}

.row .col.upload-image input[type=file]{
    margin-bottom:10px;
}

.row .col.preview-image h5{
    margin-top: -5px;
}

.row.save-image-row{
    margin-top:40px;
}





.social-share li{
    display:inline;
}

.social-share li a{
    color: white;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    padding: 0px;
    text-align: center;
    line-height: 50px;
    margin: 20px;
    margin-top: 0px; 
    overflow: visible;
}

.social-share li a:after{
    content: "";
    color: black;
    position: absolute;
    bottom: -40px;
    left: 0px;
    text-align: center;
    width: 100%;
}

.social-share li a.save:after{
 content:"Save" ;  
}

.social-share li a.twitter{
    background-color:#00aced;
}

.social-share li a.facebook{
    background-color:#3B5998;
}

.social-share li a.facebook:after{
    content:"Share";
}

.social-share li a.google{
     background-color:#dd4b39;
}

.social-share li a.email{
    background-color:#ddd;
}

.social-share li a.email:after{
 content:"Email" ;  
}

.row.preview-row, .row.share-row{
    display:table;
}

.row.preview-row .image-download-preview.col{
    margin:0 auto;
}

.row.preview-row .image-download-preview.col img{
        width: 250px;
    height:375px;
}

.image-download-preview{

}
#intro-text{
    position:relative;
}
#intro-text .row{
    background-color:rgba(255,255,255,0.9);
    padding:15px;
    padding-bottom:30px;
}

#intro-text .hide-intro-button{
position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
}



.memory-tile-buttons.top-buttons{
    margin-bottom:0px;
}

.memory-tile-buttons.bottom-buttons{
    margin-top:15px;
}

.memory-tile-buttons .add-button{
    background-size: contain;
    background-repeat: no-repeat;  
    min-height:159px;
    background-position:center center;
    transition:background-image 200ms;
}

.memory-tile-buttons .add-button:hover{
    cursor:pointer;
}


.memory-tile-buttons .add-photo{
    background-image: url(../images/buttons/AddPhoto.png);
}

.memory-tile-buttons .add-photo:hover, .memory-tile-buttons .add-photo.active{
    background-image: url(../images/buttons/AddPhoto-hover.png);
}

.memory-tile-buttons .add-quote{
    background-image: url(../images/buttons/AddQuote.png);
}

.memory-tile-buttons .add-quote:hover, .memory-tile-buttons .add-quote.active{
    background-image: url(../images/buttons/AddQuote-hover.png);
}

.memory-tile-buttons .add-milestone{
    background-image: url(../images/buttons/AddMilestone.png);
}

.memory-tile-buttons .add-milestone:hover, .memory-tile-buttons .add-milestone.active{
    background-image: url(../images/buttons/AddMilestone-hover.png);
}


.clear-button{
    margin-top: 20px;
    text-align: center;
    margin-bottom: -20px;
    padding-bottom: 0px;
}

.clear-button a{
 cursor:pointer;   
}

.loader-container{
    text-align:center;
    margin-top:30px;
}
.upload-image-container img{
    width:250px;
    height:236px;
}
.tile-background.no-message{
    background-color: transparent;
    box-shadow: none;
}

#ss-overlay{
	background-color:black;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1002;
	opacity:0;
	display:none;
}




@media only screen and (max-width: 480px){
    .memory-tile-buttons .add-milestone{
        margin-bottom:10px;
    }
    .social-share li a {
        margin:10px;
    }
    
    ul.social-share {
        min-width:220px;
    }
    
    .memory-tile-buttons .swap-backgrounds{
        margin-right:0px;
        margin-bottom:10px;
    }
    .memory-tile-buttons .save-memory-tile {
        margin-left:0px;   
    }
    .memory-tile-container{
        margin-top:-20px;
    }
    
    p{
        margin-left: 15px;
    margin-right: 15px;
    }
    
}