body, html { height: 100%; margin: 0; padding: 0; }
body { font-family: "Arimo", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.42857143; letter-spacing: 0.5px; color: #555; background-color: #fafafa; }
p, ul, ol, h3 { margin: 0 auto 1.5em auto; padding: 0 }
ul, ol { padding-left: 1.5em;}
hr { width: 150px; height: 2px; background-color: #2196F3; border: 0; margin: 0 auto 2.8em auto }
svg { vertical-align: middle }
a { color: #2385ea; color: #259adf; color: #2894d5; text-decoration: none }
/* Typography
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { /*color: #485055; */ color: #e0e9ef; margin: 0; padding: .9em 0; font-weight: 500 }
h1 { font-size: 2.5em; line-height: 1.2; }
h2 { font-size: 2.2em; line-height: 1.25; }
h3 { font-size: 2em; line-height: 1.3; }
h4 { font-size: 1.8em; line-height: 1.35; }
h5 { font-size: 1.5em; line-height: 1.5; }
h6 { font-size: 1.2em; line-height: 1.6; }

/* Larger than phablet */
@media (min-width: 550px) {
    h1 { font-size: 3.0em; }
    h2 { font-size: 2.6em; }
    h3 { font-size: 2.2em; }
    h4 { font-size: 1.8em; }
    h5 { font-size: 1.5em; }
    h6 { font-size: 1.2em; }
}

.bg  {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: all 1s linear;
    filter: alpha(opacity=0);  
    -moz-opacity: 0;  
    -khtml-opacity: 0;  
    opacity: 0;
}
.bg.active { 
    filter: alpha(opacity=100);  
    -moz-opacity: 1;  
    -khtml-opacity: 1;  
    opacity: 1;
}

#slide1 { background-image: url("../img/Milos-island-Tsigrado-beach.jpg"); }
#slide2 { background-image: url("../img/Milos-island-Kleftiko.jpg"); }
#slide3 { background-image: url("../img/Symi-island-Yialos-harbour.jpg"); }

.blur { filter: blur(5px); -webkit-filter: blur(5px) }

#webchat { 
    margin: 0 auto;
    max-width: 540px;
    max-height: 720px;
    overflow-y: auto; }

nav { /* width: 100%; */ padding: 2px 1em; background-color: rgba(0, 0, 0, 0.1); text-align: left }
nav ul { margin: 0; padding: 0; display: inline; }
nav li { display: inline-block; zoom: 1; *display: inline; }
nav a { display: inline-block; color: #fafafa; line-height: 64px; padding: 0 .5em; text-decoration: none; opacity: .8; transition: opacity 0.3s ease }
nav a:hover { color: #fafafa; opacity: 1 }
nav a.arrow::after { content: ""; display: inline-block; border: solid #fafafa; border-width: 0 1px 1px 0; margin: 0 0 3px 7px; padding: 0; width: 7px; height: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg) }
nav a:hover::after { border-color: #111; }
nav .login { padding: 9px 10px; margin-left: 9px; border: solid 1px #eee; border-radius: 5px; white-space: nowrap; }

#logo { position: absolute; top: 0; color: #f44444; color: #ff2e17; left: 1em; padding: 0 0 0 45px; line-height: 64px; font-size: 1.1em; font-weight: normal; letter-spacing: 0; text-transform: uppercase; opacity: .9; background: url(../img/logo.png) no-repeat left center; background-size: auto 32px }

nav .btn { display: none; width: 28px; margin: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; opacity: .8; }
nav .btn:before,
nav .btn:after { background-color: #fafafa; content: ''; display: block; height: 3px; transition: all 200ms ease-in-out; opacity: .8; }
nav .btn:before { box-shadow: 0 8px 0 #fafafa; margin-bottom: 13px }

nav.scrolled, nav.expanded { color: #2474A5; background-color: #fff !important; opacity: .95; box-shadow: 0 0 10px rgba(45, 45, 45, .1); transition: all 350ms linear }
nav.scrolled a, nav.expanded a { color: #444; opacity: 1 }
nav.scrolled a:hover, nav.expanded a:hover { color: #259adf }
nav.scrolled .login, nav.expanded .login { border-color: #cecfd1 }
nav.scrolled .btn:before, nav.scrolled .btn:after, nav.expanded .btn:before, nav.expanded .btn:after { background-color: #2474A5 }
nav.scrolled .btn:before, nav.expanded .btn:before { box-shadow: 0 8px #2474A5 }
nav.scrolled #logo { color: #ee3535; }
nav.scrolled #phone { color: #ee3535; }

nav.expanded ul { display: block; margin-bottom: 1em }
nav.expanded .btn:before { box-shadow: 0 0 0 #fafafa; transform: translateY(8px) rotate(45deg); }
nav.expanded .btn:after { transform: translateY(-8px) rotate(-45deg); }

#overlay { position: fixed; width: 100%; top: 0; left: 0; height: 100%; z-index: -1; opacity: .75; background-color: #06224E }
#content { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 3; padding: 0 3em; color: #e0e9ef }
/* main { position: absolute;
    height: 100%;
    overflow: auto;
    z-index: 1;
    padding: 0;
    width: 100%;
    top: 0;
    padding: 0;
    bottom: 0;
}
#content { position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 3;
    text-align: center;
    color: #e0e9ef
} */

.container { margin: 0 auto; padding: 0 1em; max-width: 1170px }
.relative { position: relative }
.short { max-width: 720px }
.blur { filter: blur(5px); }
.faint { color: #999 }
.pad-vertical { padding: 1em 0 }
.section { background-color: #fafafa }
.section-alternate { background-color: #f3f3f3 }

button { margin-top: 3px }
button i.icon { vertical-align: middle; font-size: 1.2em; padding-right: 5px }
.button { display: inline-block; margin: .3em 0; padding: .7em 1em; color: #f7f7f7; text-decoration: none; background-color: #3496d0; border-radius: 3px; transition: background-color .2s linear }
.button:hover { background-color: #368ec2; /* background-color: #ee3268 */ }
.button.green { background-color: #50ae7a }
.button.green:hover { background-color: #48a06f }

@media screen and (max-width: 1024px) {
    nav ul { display: none }
    nav a { font-size: .9em }
    nav li { display: block; text-align: center }
    nav .btn { display: inline-block; margin-top: 12px }
    #logo { line-height: 48px }
    #content {position: static; transform: none; width: auto; padding: 0; }
    #webchat { height: 720px; }
}