@font-face {
    font-family: 'Alegreya Sans';
    src: url('../fonts/Alegreya Sans/AlegreyaSans-Regular.ttf') format('ttf');
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EB Garamond/EBGaramond-Bold.ttf') format('ttf'),
    url('../fonts/EB Garamond/EBGaramond-SemiBold.ttf') format('ttf');
}
html{
    margin: 0;
    height:100%;
    width:100%;
}

.euLogo{
    height:auto;
    width:50%;
    position:relative;
    margin: 0 auto 8px auto;
}

body{
    margin: 0;
    font: normal 18px 'EB Garamond', serif;
    background: linear-gradient(180deg, #FAF7F4 0%, #D7CFC7 100%);
    min-height:100%;
    width:100%;
    background-attachment: fixed;
}
h1{
    font-size:25px;
    font-weight:600;
    color:#525252;
}

.h1-size {
    font-size: 20px;
}

h4{
    font-size:16px;
    font-weight:700;
    color:#525252;
}

.p-scroll {
    height: 200px;
    width: 100%;
    margin-left: auto;
    overflow-y: scroll;
    text-align: left !important;
    padding-right: 10px;
}
.mgTop{
    margin-top:0.5rem;
    text-align:center;
    line-height:130%;
}

.mgTop p{
    line-height: 130%;
}


.bottomNote{
    margin-top:0.5rem;
    padding-top:5px;
    font-family: 'Open Sans', sans-serif;
    color: rgba(0, 0, 0, 0.85);
    font-size: 9pt;
}

.logo{
    height:auto;
    width:57px;
    margin: 20px auto;
    margin-left: 4px;
}

.topBanner{
    text-align:center;
}

::-webkit-scrollbar {
    width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #EFECE7;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #000;
}

.arrow{
    height:25px;
    width: 25px;
    margin: 20px 0;
}
.mainImg{
    margin: 0 auto 0 auto;
    width:100%;
}
slide-item__image{
    opacity:0 !important;
}
p, li{
    font: normal 16px "Alegreya Sans", sans-serif;
    color:#5f5f5f;
}
.homeH4{
    padding: 0 0 20px 0;
    text-align:center;
}
.flagRow{
    margin-bottom:15px;
}
/*Audio Player START*/

/* Using flex with the column direction to
   align items in a vertical direction */
.player {
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* Using flex with the row direction to
   align items in a horizontal direction */
.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.playpause-track{
    margin:15px;
}
.playpause-track,
.seekBackward,
.seekForward {
    opacity: 1;
    /* Smoothly transition the opacity */
    transition: opacity .2s;
}
.seekBackward,
.seekForward {
    opacity: 1;

    /* Smoothly transition the opacity */
    transition: opacity .2s;
}

/* Change the opacity when mouse is hovered */
.playpause-track:hover,
.seekBackward:hover,
.seekForward:hover {
    opacity: 0.8;
}

/* Define the slider width so that it scales properly */
.slider_container {
    width: 100%;
    max-width: 400px;
    margin: -30px auto 30px auto;
}
a{
    cursor:pointer;
}

/* Modify the appearance of the slider */
.seek_slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 3px;
    background: #3b3b3b;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;
    width: 100%;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: white;
    cursor: pointer;
    border-radius: 50%;
}

/* Change the opacity when mouse is hovered */
.seek_slider:hover {
    opacity: 0.8;
}

.current-time,
.total-duration {
    padding: 10px;
    font-family: "Alegreya Sans", sans-serif;
    font-size:16px;
    color:#3b3b3b;
    width:50%;
}
.current-time{
    float:left;
    text-align:left;
}
.total-duration{
    float:right;
    text-align:right;
}

i.fa-volume-down,
i.fa-volume-up {
    padding: 10px;
}

/* Change the mouse cursor to a pointer
   when hovered over */
i.playBtn,
i.pauseBtn,
i.seekBackward,
i.seekForward {
    cursor: pointer;
}
.playBtn{
    position:relative;
    background: url("../images/playBtn.png");
    height: 46px;
    width: 70px;
    display: block;
    z-index:999;
}
.pauseBtn{
    position:relative;
    background: url("../images/pauseBtn.png");
    height: 46px;
    width: 70px;
    display: block;
    z-index:999;
}
.seekBackward{
    background: url("../images/seekBackward.svg");
    height: 16px;
    width: 16px;
    display: block;
}
.seekForward{
    background: url("../images/seekForward.svg");
    height: 16px;
    width: 16px;
    display: block;
}
/*Audio Player END*/
/*Image Effect START*/
canvas{
    display:block;
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
    transform:initial !important;
}
/* Preloader */
.preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(180deg, #FAF7F4 0%, #D7CFC7 100%);;/* change if the mask should be a color other than white */
    z-index:99; /* makes sure it stays on top */
    transition: 0.5s all linear;
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally on the screen */
    top:50%; /* centers the loading animation vertically on the screen */
    background-image:url('/assets/images/thalassa-logo-dark.png'); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}
.loaded{
    opacity:0;
}
/*CONTROLLER START*/
html, body{
    overflow-x:hidden;
    -ms-overflow-x: hidden;
}
body{
    position:relative;
}
.container{
    position:absolute;
    left: 50%;
    transform: translate(-50%);
    transition:transform 400ms;
}
.hide-right{
    position:absolute;
    transform:translateX(3000px);
    transition:transform 400ms;
    top:0;
}
.hide-in-place{
    top:0;
    visibility:hidden;
}