﻿* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; width: 100%; }
h1:first-child { margin-top: 0 !important; }
body { font-family: 'Droid sans', sans-serif; color: #666; font-size: 1em; }
h1, h2, h3 { color: rgb(204, 204, 204); margin-top: 10px; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; /*text-decoration: underline; line-height: 280%; padding-left: 2%;*/ }
h3 { font-size: 1.2em; /*line-height: 110%; padding: 5% 0;*/ }
p { line-height: 1.5; }
img { text-align: center; max-width: 100%; height: auto; width: auto; }
a { text-decoration: none; color: #29abe2; }
    a:hover { text-decoration: underline; color: #29abe2; }
ul { list-style: none; }

.clear { clear: both; }
.main-wrapper { margin: 0 15%; }
.main-wrapper-margin { margin-top: 20px; margin-bottom: 20px; }
.page-title { padding: 20px; background: #000; margin-bottom: 20px; }
.page-title h1 { color: #fff; }
.circle { border-radius: 50%; height: 100px; width: 100px; text-align: center; vertical-align: middle; white-space: nowrap; }
/*.circle:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; }*/


.border { border-radius: 5px; border: solid 1px #ccc; }
/********OVERLAY MENU********/
.overlay { }
.overlay a.overlay-close { float: right; font-size: 2em; color: #000; display: none; }
.overlay li.overlay-signin { display: none !important; }

header { text-align: center; position: fixed; z-index: 5; top: 0; background-color: #fff; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); width: 100%; }
header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
header a.logo { background: #000; padding: 5px; display: inline-block; margin-top: 5px; }
header div.logo-menu { position: absolute; right: 0; margin: 0 15%; }
header div.logo-menu:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
header div.logo-menu ul { margin: 0; }
header div.logo-menu ul li { float: left; margin-right: 20px; padding: 0;  }
header div.logo-menu ul li:last-child { margin-right: 0; }
header div.logo-menu ul li a { font-weight: bold; color: #000; }
header div.logo-menu ul li a:hover { text-decoration: none; }
header div.logo-menu ul li a:hover span { text-decoration: underline; }

header a.menu { float: right; display: none; margin: 20px 20px 0 0; }
header a.menu i { font-weight: bold; font-size: 1.5em; }
header ul { margin-top: 20px; }
header ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
header ul li { padding: 20px; display: inline-block; }
header ul li.selected { border-top: solid 4px #29A9DF; }
header ul li.selected a { color: #29A9DF; }
header ul li:hover { }
header ul li:hover a { /*color: #fff;*/ color: #666; }
header ul li a { color: #666; }

div.main-body { margin-top: 125px; }

footer { background: #000; color: #fff; text-align: center; font-size: 1em; }
.footer2 { padding: 20px 0; }
footer .Name { font-weight: bold; font-size: 2.0em; }
footer .tag { font-weight: bold; }
footer .address { font-weight: normal; margin-top: 20px; }
footer .copy { font-weight: normal; margin-top: 20px; }

.followus { background: rgb(64, 64, 64); padding: 20px 0px; text-align: center; }
.followus:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.followus h3 { color: #fff; font-size: 2.0em; font-family: 'Akzidenz Bold'; }
.followus div.circle { height: 50px; width: 50px; background: transparent; border: solid 2px #fff; margin: 0 auto; }

.followup-links { float:left; }
.followup-links ul li { line-height: 1.5; text-align: left; }
.followup-links ul li a { color: #fff; }

.social { margin-top: 20px; float: left; margin-right: 0 !important; }
.social ul { text-align: center; }
.social ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.social ul li { display: inline-block; margin-right: 20px; float: left; }
.social ul li:last-child { margin-right: 0; }
.social ul li div.circle { display: table-cell; vertical-align: middle; text-align: center; }
.social ul li i { color: #fff; font-size: 1.5em; }

.social ul li:hover div.facebook { background: rgb(59, 89, 152); }
.social ul li:hover div.twitter { background: rgb(72, 196, 210); }
.social ul li:hover div.linkedin { background: rgb(0, 115, 176); }
.social ul li:hover div.youtube { background: rgb(207, 31, 31); }

.basket-items { background: #f00; border-radius: 100%; color: #fff; width: 20px; height: 20px; display: none; font-size: 0.90em; text-align: center; line-height: 20px; vertical-align: middle; }
div.top-menu { position: absolute; right: 0; margin: -55px 15%; }
div.top-menu > div.sp-basket { }
div.top-menu-user { display: inline-block; font-size: 0.90em; }
div.top-menu-basket { text-align: right; font-size: 0.90em; margin-top: 5px; }
.mobileUser-Menu { width: 100px; left: -5px; background: #fff; border: 1px solid #29A9DF; top: 25px; height: 30px; position: absolute; font-size: 0.90em; display: none; }

div.top-menu-user .desktop-user { display: inline; }
div.top-menu-user .mobile-user { display: none; }

@media screen and (max-width: 980px) {
    div.main-body { margin-top: 65px; }
    .main-wrapper { width: 100%; margin-left: 0; margin-right: 0; }
    .main-wrapper-margin { margin: 0; padding: 20px; }

    /********OVERLAY MENU********/
    .overlay { position: fixed; z-index: 999; top: 0; left: 0; background-color: #004182; opacity: 0.96; overflow-y: hidden; transition: 0.5s; }
    .overlay-top { height: 0%; width: 100%; }
    .overlay-right { height: 100%; width: 0; }
    .overlay-content { position: relative; /*top: 25%;*/ width: 100%; text-align: center; margin-top: 100px; }
    .overlay a { padding: 8px; text-decoration: none; font-size: 1.5em; color: #818181; display: block; transition: 0.3s; }
    .overlay a:hover, .overlay a:focus { color: #fff; }
    .overlay { overflow-y: auto; }
    .overlay a.overlay-close { float: right; font-size: 2em; color: #000; display: block; }

    .overlay li.overlay-signin { display: block !important; }

    header { height: 66px; }

    header a.logo { float: left; }
    header a.menu { display: block; }
    header ul { display: none; }
    header ul li { display: list-item; float: none; padding: 20px; }

    header ul li.selected { border-top: none; }
    header ul li.selected a { color: #fff; }


    div.top-menu { position: absolute; right: 50px; margin: 0; top: 20px; }
    span.sp-basket { display: none; }
    div.top-menu-user { float: left; margin-right: 5px; }
    div.top-menu-basket { margin-top: 0; float: left; }

    .mobileUser-Menu ul { display: inline-block; margin: 0; padding: 0; }
    .mobileUser-Menu ul li { padding: 5px 0 0 0; margin: 0; }
    .mobileUser-Menu ul li a { text-align: left; font-size: 0.90em; color: #29A9DF; }
    .mobileUser-Menu ul li a:hover { text-decoration: none; color: #29A9DF; }
    .mobileUser-Menu ul li a i { margin-left: 5px; }
    div.top-menu-user .desktop-user { display: none; }
    div.top-menu-user .mobile-user { display: inline; }

    .followus { padding: 2%; }
    .social { margin-top: 2% !important; }
    .footer2 { padding: 2%; }
}

@media screen and (max-width: 440px) {
    a.logo > img { height: 70%; width: 70%; float: left; margin: 10px; }
    .followus div.circle { height: 50px; width: 50px; }
    .social ul li { display: inline-block; margin-right: 20px; float: left; }
}
