body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f8eeee;
}
.row{
    justify-content: center;
}
.row .column-polaroid{
    justify-content: center;
}

img{
    max-width: 90%;
}
#section-1, #section-2, #section-3, #section-4{
    position: relative;
}
h1{
    font-family: 'Cabin', sans-serif;
    font-size: 3rem;
    
}
h2{
    font-family: 'Caveat', cursive;
    
    font-style: italic;
    font-size: 2rem;
}
p{
    font-family: 'Dawning of a New Day', cursive;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
}
.heading-box{
    width: 100%;
    background-color: #f78259;
    padding: 5% 0 2%;  
    text-align: center;
    position: relative;
    /*border-bottom: 2em solid #eb4559;*/
} 
.earth-image-outer{
    width: 100%;
    padding-bottom: 1em;
}
.earth-image{

    -webkit-animation: earth-anim 4s linear;
    animation-fill-mode: both;

}

@-webkit-keyframes earth-anim{
    0%{
        transform: rotate(0deg) scale(.5);
        
    }
    100%{

        transform: rotate(360deg) scale(1);
        
    }
}

/* Card */
.outer-polaroid{
    padding: 1em;
    background-color: whitesmoke;
    margin: 2em 1em;
    position: relative;
    max-width: 250px;
}
.img:hover{
    transform: scale(1.05); 
}

.inner-polaroid{
    text-align: center;
}
.polaroid-text{
    margin-top: 2em;
    line-height: 0.5em;
}
.column-polaroid{
    position: relative;
   background-color: #aeefec;
}

/*Header*/
.nav-brand{
    font-family: 'Dawning of a New Day', cursive;
    font-size: 1.2rem;
    color: black;
}
#section-1{
    background-color: #f78259;
}


/*Footer*/
.footer{
    padding-top: 1%;
    text-align: center;
    background-color: #ea5455;
    display: block;
    position: relative;
}
.footer a{
    color: black
}
.fa-2x:hover{
    transform: scale(1.3);
}

/* SLIDER */

.slider{
    background-color: rgb(0,0,0,0.9);
    z-index: 55;
    position: fixed;
    height: 100vh;
    width: 100vw;
    padding: 1em;
    display: none;
}
.close{
    display: flex;
    justify-content: end;
    padding: 0em 2em 1em 2em;
}
.slider-main{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    height: 70vh;
}
.slider-photo{
    width: 250px;
}
.slider-main .outer-polaroid{
    width: 250px;
    max-width: 90%;
}
.arrows{
    opacity: 75%;
    width: 1em;
    height: auto;
    position: sticky;
}
.left, .right{
    display: inline-flex;
}
.left{
    margin-right: 1em;
}

.right{
    margin-left: 1em;
}



/*Loader CSS*/

.element{
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: #ea5455;
    top: 250px;
    left: 630px;
    margin-top: -30px;
    transform-origin: 0 50px;
    border-radius: 50%;
 }
 .element1{
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: greenyellow;
    top: 150px;
    left: 630px;
    margin-top: -30px;
    transform-origin: 0 150px;
    border-radius: 50%;
 }
 /*inner elements*/
 .e1{
    animation: 6s  infinite load1 ;
 }
 .e2{
    animation: 6s infinite load2 ;
 }
 .e3{
    animation: 6s infinite load3 ;
 }
 .e4{
    animation: 6s infinite load4 ;
 }
 .e5{
    animation: 6s infinite load5 ;
 }
 .e6{
    animation: 6s infinite load6 ;
 }
 .e7{
    animation: 6s infinite load7 ;
 }
 .e8{
    animation: 6s infinite load8 ;
 }
 /*Outer Elements*/

 .e11{
    animation: 6s  infinite load11 ;
 }
 .e21{
    animation: 6s infinite load21 ;
 }
 .e31{
    animation: 6s infinite load31 ;
 }
 .e41{
    animation: 6s infinite load41 ;
 }
 .e51{
    animation: 6s infinite load51 ;
 }
 .e61{
    animation: 6s infinite load61 ;
 }
 .e71{
    animation: 6s infinite load71 ;
 }
 .e81{
    animation: 6s infinite load81 ;
 }
/*Scale Change Animations*/
 @keyframes load1{
    0%{
        transform: rotate(0deg) scale(1);
    }
    25%{
        transform: rotate(90deg) scale(1.5);
    }
    50%{
        transform: rotate(180deg) scale(1);
    }
    75%{
        transform: rotate(270deg) scale(1.5);
    }
    100%{
        transform: rotate(360deg) scale(1);
    }
}
@keyframes load2{
    0%{
        transform: rotate(45deg) scale(1.5);
    }
    25%{
        transform: rotate(135deg) scale(1);
    }
    50%{
        transform: rotate(225deg) scale(1.5);
    }
    75%{
        transform: rotate(315deg) scale(1);
    }
    100%{
        transform: rotate(405deg) scale(1.5);
    }
}
@keyframes load3{

    0%{
        transform: rotate(90deg) scale(1);
    }
    25%{
        transform: rotate(180deg) scale(1.5);
    }
    50%{
        transform: rotate(270deg) scale(1);
    }
    75%{
        transform: rotate(360deg) scale(1.5);
    }
    100%{
        transform: rotate(450deg) scale(1);
    }
}
@keyframes load4{
    0%{
        transform: rotate(135deg) scale(1.5);
    }
    25%{
        transform: rotate(225deg) scale(1);
    }
    50%{
        transform: rotate(315deg) scale(1.5);
    }
    75%{
        transform: rotate(405deg) scale(1);
    }
    100%{
        transform: rotate(495deg) scale(1.5);
    }
}
@keyframes load5{
    0%{
        transform: rotate(180deg) scale(1);
    }
    25%{
        transform: rotate(270deg) scale(1.5);
    }
    50%{
        transform: rotate(360deg) scale(1);
    }
    75%{
        transform: rotate(450deg) scale(1.5);
    }
    100%{
        transform: rotate(540deg) scale(1);
    }
}
@keyframes load6{
    0%{
        transform: rotate(225deg) scale(1.5);
    }
    25%{
        transform: rotate(315deg) scale(1);
    }
    50%{
        transform: rotate(405deg) scale(1.5);
    }
    75%{
        transform: rotate(495deg) scale(1);
    }
    100%{
        transform: rotate(585deg) scale(1.5);
    }
}
@keyframes load7{
    0%{
        transform: rotate(270deg) scale(1);
    }
    25%{
        transform: rotate(360deg) scale(1.5);
    }
    50%{
        transform: rotate(450deg) scale(1);
    }
    75%{
        transform: rotate(540deg) scale(1.5);
    }
    100%{
        transform: rotate(630deg) scale(1);
    }
}
@keyframes load8{
    0%{
        transform: rotate(315deg) scale(1.5);
    }
    25%{
        transform: rotate(405deg) scale(1);
    }
    50%{
        transform: rotate(495deg) scale(1.5);
    }
    75%{
        transform: rotate(585deg) scale(1);
    }
    100%{
        transform: rotate(675deg) scale(1.5);
    }
}

/*No scale change*/

@keyframes load11{
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
        transform: rotate(270deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes load21{
    0%{
        transform: rotate(45deg);
    }
    25%{
        transform: rotate(135deg);
    }
    50%{
        transform: rotate(225deg);
    }
    75%{
        transform: rotate(315deg);
    }
    100%{
        transform: rotate(405deg);
    }
}
@keyframes load31{

    0%{
        transform: rotate(90deg);
    }
    25%{
        transform: rotate(180deg);
    }
    50%{
        transform: rotate(270deg);
    }
    75%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(450deg);
    }
}
@keyframes load41{
    0%{
        transform: rotate(135deg);
    }
    25%{
        transform: rotate(225deg);
    }
    50%{
        transform: rotate(315deg);
    }
    75%{
        transform: rotate(405deg);
    }
    100%{
        transform: rotate(495deg);
    }
}
@keyframes load51{
    0%{
        transform: rotate(180deg);
    }
    25%{
        transform: rotate(270deg);
    }
    50%{
        transform: rotate(360deg);
    }
    75%{
        transform: rotate(450deg);
    }
    100%{
        transform: rotate(540deg);
    }
}
@keyframes load61{
    0%{
        transform: rotate(225deg);
    }
    25%{
        transform: rotate(315deg);
    }
    50%{
        transform: rotate(405deg);
    }
    75%{
        transform: rotate(495deg);
    }
    100%{
        transform: rotate(585deg);
    }
}
@keyframes load71{
    0%{
        transform: rotate(270deg);
    }
    25%{
        transform: rotate(360deg);
    }
    50%{
        transform: rotate(450deg);
    }
    75%{
        transform: rotate(540deg);
    }
    100%{
        transform: rotate(630deg);
    }
}
@keyframes load81{
    0%{
        transform: rotate(315deg);
    }
    25%{
        transform: rotate(405deg);
    }
    50%{
        transform: rotate(495deg);
    }
    75%{
        transform: rotate(585deg);
    }
    100%{
        transform: rotate(675deg);
    }
}

.loader{
    background-color: #f8eeee;
    z-index: 55;
    position: fixed;
    height: 100vh;
    width: 100vw;
}
.img:hover{
    cursor: pointer;
}