@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Didact+Gothic&family=Questrial&display=swap');

body {
    font-family: "Questrial", sans-serif;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smooth: always;
    background: #f9f5e9;
}
header {
    width: 1170px;
    margin: 0 auto;
    height: 130px;
}
header a.logo {
    display: block;
    width: 254px;
    height: 130px;
    background: transparent url(slotconsulting-logo.gif) no-repeat 0 0;
    text-indent: -10000px;
    float: left;
}
header > div {
    float: right;
    padding-top: 70px;
    width: 477px;
}
header button {
    border: 0;
    cursor: pointer;
    width: 34px;
    height: 38px;
    background: transparent url(bg_search.gif) no-repeat 0 0;
    text-indent: -10000px;
    float: left;
}
header input {
    width: 298px;
    padding: 8px 10px;
    background: #e8e5d9;
    border: 0;
    float: left;
    color: #585859;
    font-size: 17px;
    margin-left: 10px;
    font-family: "Questrial", sans-serif;
}
header input::-webkit-input-placeholder     { color: rgba(0,0,0,0.5) !important; }
header input:-moz-placeholder               { color: rgba(0,0,0,0.5) }
header input::-moz-placeholder              { color: rgba(0,0,0,0.5) }
header input:-ms-input-placeholder          { color: rgba(0,0,0,0.5) }

header .dd { width: 135px !important; float: left }
.mobile-search,
.mobile-list,
.mobile-nav,
.mobile-layer,
.mobile-list-nav,
.slick-slider {
    display: none;
    visibility: hidden;
    height: 0;
}
nav {
    width: 100%;
    height: 54px;
    background: #dcdcdc;
}
nav > ul {
    width: 1170px;
    margin: 0 auto;
    height: 54px;
    list-style: none;
}
nav > ul > li {
    width: 20%;
    float: left;
    position: relative;
    z-index: 9999;
}
nav > ul > li > a {
    width: 100%;
    text-align: center;
    color: #585859;
    font-size: 24px;
    text-decoration: none;
    line-height: 54px;
    display: block;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
}
nav > ul > li > a span {
    width: 100%;
    height: 0%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background: #10457B;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
nav > ul > li > a:hover span,
nav > ul > li.hov > a span {
    height: 100%;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
nav > ul > li > a:hover,
nav > ul > li.hov > a { color: #fff }

nav > ul > li ul {display: none}

nav > ul > li.hov > ul {
    display: block;
    background: #fff;
    width: auto;
    max-width: 305px;
    padding: 5px 30px;
    position: absolute;
    left: 0;
    top: 54px;
}

nav > ul > li.hov > ul a {
    color: #585859;
    font-size: 19px;
    text-decoration: none;
    white-space: nowrap;
}
nav > ul > li.hov > ul li { line-height: 32px }
nav > ul > li.hov > ul > li > a { font-family: 'CenturyGothicBold' }
nav > ul > li.hov > ul > li a:hover { color: #10457B }

nav > ul > li.hov > ul > li > ul > li {
    background: transparent url(bg_li.gif) no-repeat 5px 50%;
    padding-left: 25px;
}
.mainServices {
    width: 100%;
    height: 390px;
    margin-top: -45px;
    background: #0e3b68;
    padding-top: 80px;
}
.mainServices > div {
    width: 1170px;
    height: 270px;
    margin: 0 auto;
}
.mainServices > div div {
    width: 270px;
    height: 270px;
    border: 5px solid #115384;
    float: left;
    margin-right: 29px;
    padding: 15px;
    color: #ffffff;
    font-size: 14px;
    position: relative;
}
.mainServices > div div:last-child {
    margin: 0;
}
.mainServices > div div h2 {
    font-size: 28px;
    font-weight: normal;
    line-height: 32px;
    text-align: center;
}
.mainServices > div div ul {
    margin: 10px 0;
    list-style: none;
}
.mainServices > div div ul li {
    padding-left: 15px;
    background: transparent url(bg_li2.gif) no-repeat 0 6px;
    line-height: 19px;
}
.mainServices > div div a {
    clear: both;
    color: #e08934;
    text-decoration: none;
    font-family: "Questrial", sans-serif;
    font-size: 16px;
	font-weight: normal;
    position: absolute;
    right: 15px;
    bottom: 5px;
}
.mainServices > div div a:hover {
    text-decoration: underline;
}
section {
    width: 100%;
    float: left;
    padding: 7px 0;
    border-bottom: 4px solid #fff;
    border-top: 4px solid #fff;
}
section.main {
    background: #98a9bf;
    padding: 30px 0;
    border: 0;
}
section > div {
    width: 1170px;
    margin: 0 auto;
}
.mainleft {
    float: left;
    width: 715px;
    padding-right: 15px;
}
.mainright {
    float: left;
    width: 455px;
}
section h1 {
    color: #10457a;
    font-size: 28px;
    font-weight: normal;
    margin-bottom: 20px;
}
section h2 {
    color: #10457a;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 20px;
}
.fb-like-box { background: #fff }

footer {
    width: 100%;
    background: #6e7e92;
    float: left;
}
footer > div {
    width: 1170px;
    margin: 0 auto;
    padding: 35px 0 ;
}
footer > div div {
    float: left;
    width: 20%;
    border-right: 1px solid #9aa5b3;
    padding-left: 20px;
    margin-bottom: 35px;
}
footer > div div:first-child { margin-left: -20px }
footer > div div:last-of-type { border: 0}

footer a {
    font-size: 19px;
    color: #092c4d;
    text-decoration: none;
    line-height: 28px;
}
footer h2, 
footer h2 a {
    color: #092c4d;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 20px;
}
footer a:hover { text-decoration: underline }
footer span {
    font-size: 19px;
    color: #092c4d;
    text-decoration: none;
    line-height: 28px;
}
footer a.social { padding: 2px 0 2px 33px }

footer a.fb { background: transparent url(fb.gif) no-repeat 0 0 }
footer a.li { background: transparent url(in.gif) no-repeat 0 0 }
footer a.yt { background: transparent url(yt.gif) no-repeat 0 0 }
footer a.gp { background: transparent url(gp.gif) no-repeat 0 0 }

footer p {
    text-align: center;
    color: #fff;
    font-size: 15px;
}
footer p a {
    color: #fff;
    font-size: 15px;
}

.head {
    width: 100%;
    height: 279px;
    background: #dcdcdc;
}
.head > div {
    width: 1170px;
    margin: 0 auto;
}
.head > div img {
    display: block;
}
.breadcrumb {
    width: 100%;
    height: 42px;
    border-top: 1px solid #1d4670;
    border-bottom: 1px solid #1d4670;
    line-height: 40px;
    color: #fff;
    font-size: 17px;
    background: #0e3b68;
    padding: 0 10px;
}
.breadcrumb a {
    color: #fff;
    font-size: 17px;
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline }

.twocolumn {
    width: 100%;
    background: transparent url(bg_twocolumn.gif) repeat-y 0 0;
    float: left;
}
.leftside {
    float: left;
    width: 286px;
    padding: 15px;
	background: #0e3b68;
}
.rightside {
    float: left;
    width: 884px;
    padding: 15px 0 0 35px;
}
.leftside h2 {
    font-weight: normal;
    font-size: 28px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.leftside .glossary a {
    display: block;
    width: 100%;
    height: 21px;
    line-height: 21px;
    margin-bottom: 1px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-family: 'CenturyGothicBold';
    padding-left: 25px;
    background: #0b2f52 url(bg_glossary.png) no-repeat 10px 7px;
}
.leftside .glossary a:hover {
    background: #dcdcdc url(bg_glossary2.png) no-repeat 10px 7px;
    color: #585859;
}
.leftside ul {
    list-style: none;
}
.rightside ul {
    list-style: square;
	margin-left: 40px;
	line-height: 25px;
}
.leftside ul li a,
.rightside ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    line-height: 25px;
}
.leftside ul li a:hover,
.rightside ul li a:hover {
    text-decoration: underline;
}
.leftside > ul > li > a,
.rightside > ul > li > a {
}
.leftside > ul > li > ul li,
.rightside > ul > li > ul li {
    background: transparent url(bg_glossary.png) no-repeat 4px 10px;
    padding-left: 18px;
}
.leftside div.social a {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin-bottom: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    padding-left: 67px;
    background: #0b2f52 url(fb3.gif) no-repeat 2px 2px;
}
.leftside div.social a.yt { background: #0b2f52 url(yt2.gif) no-repeat 2px 2px }
.leftside div.social a.gp { background: #0b2f52 url(gp2.gif) no-repeat 2px 2px }
.leftside div.social a.li { background: #0b2f52 url(li2.gif) no-repeat 2px 2px }

.fleft div.social {
    margin-top: 60px;
}
.fleft div.social a {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin-bottom: 5px;
    color: #0b2f52;
    text-decoration: none;
    font-size: 17px;
    padding-left: 67px;
    background: #f9f5e9 url(fb3.gif) no-repeat 2px 2px;
}
.fleft div.social a.yt { background: #f9f5e9 url(yt2.gif) no-repeat 2px 2px }
.fleft div.social a.gp { background: #f9f5e9 url(gp2.gif) no-repeat 2px 2px }
.fleft div.social a.li { background: #f9f5e9 url(li2.gif) no-repeat 2px 2px }

.oneColumn h2:first-of-type,
.rightside h2:first-of-type {
    margin-bottom: 0;
}
.oneColumn p,
.rightside p {
    text-align: justify;
    line-height: 25px;
    color: #000;
    font-size: 16px;
    padding: 12px 0;
}
.oneColumn a,
.rightside a { color: #d38437 }
.oneColumn a:hover,
.rightside a:hover { text-decoration: none }

.labels {
    width: 100%;
    font-size: 16px;
    background: #e8e5d9;
    color: #0e3b68;
    margin: 20px 0;
    min-height: 50px;
    float: left;
}
.labels label {
    font-family: 'CenturyGothicBold';
    color: #fff;
    padding: 15px 10px 15px 15px;
    background: #c8c6bb;
    float: left;
    display: block;
}
.labels div {
    float: left;
    width: 770px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    line-height: 30px;
}
.labels div a {
    color: #0e3b68;
    text-decoration: none;
    margin: 0 5px;
    height: 50px;
}
.labels div a:hover { text-decoration: underline }
h6 {
    background: #0e3b68;
    color: #fff;
    width: 100%;
    float: left;
    font-weight: normal;
    font-size: 19px;
    padding: 0 15px;
    line-height: 37px;
    margin-bottom: 20px;
}
.newsItem {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
.newsItem img {
    float: left;
    margin-right: 20px;
}
.newsItem div {
    float: left;
    width: calc(100% - 151px);
    -moz-width: calc(100% - 151px);
    -webkit-width: calc(100% - 151px);
}
.newsItem div a {
    text-decoration: none;
    color: #10457a;
    font-size: 28px;
}
.newsItem div p {
    padding-top: 0;
}
.newsItem div p a {
    font-size: 16px;
    font-family: 'CenturyGothicBold';
}
.oneColumn strong,
.rightside strong {
    font-family: 'CenturyGothicBold';
}
table {
    width: 100%;
    margin: 15px 0;
    border-spacing: 2px;
}
table th {
    background: #0e3b68;
    color: #fff;
    font-family: 'CenturyGothicBold';
    font-size: 19px;
    padding: 0 20px;
    height: 40px;
    text-align: left;
}
table tr th:first-of-type { width: 20% }

table td {
    text-align: left;
    padding: 20px;
    font-size: 16px;
    background: #e8e5d9;
    line-height: 26px;
}
table td.header {
    background: #c8c6bb;
    color: #fff;
    height: 40px;
    font-size: 19px;
    padding: 0 20px;
}
table tr td:first-of-type { font-size: 19px}

table a { color: #0e3b68 !important; font-family: 'CenturyGothicBold'; text-decoration: none }

table.contact td.header2 { background: #d7d5cd; padding: 0; width: 46px; text-align: center; border-right: 1px solid #61666a; border-spacing: 0 }

table.contact td {
    padding: 0 20px;
    height: 50px;
}
h3 {
    font-size: 18px;
    font-weight: normal;
    color: rgba(0,0,0,0.4)
}
.w380 { width: 390px }
.w459 { width: 459px }

.w380 h6 {
    margin: 0 10px 10px 0;
    width: calc(100% - 10px);
    -moz-width: calc(100% - 10px);
    -webkit-width: calc(100% - 10px);
}
.w459 h6 {
    margin: 0 0 10px 0;
}
.gallery {
    width: 100%;
    float: left;
}
.gallery img {
    float: left;
    display: block;
    margin: 0 10px 10px 0;
}
a.pdf {
    background: transparent url(pdf.png) no-repeat 0 0;
    padding: 5px 0 13px 40px;
    display: inline-block;
    margin-bottom: 10px;
    color: #000;
    font-size: 14px;
    text-decoration: underline;
}

#fb-root { display: none }
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important }

/**
    media query
                **/

@media (min-width : 640px) and (max-width : 1170px) {
    header { width: 100% }
    header input { width: 150px }
    header > div { width: 329px }
    nav { width: 100% }
    nav > ul { width: 100% }
    nav > ul > li > a { font-size: 16px }
    nav > ul > li.hov > ul li { line-height: 20px }
    nav > ul > li.hov > ul a { font-size: 14px }
    .owl-carousel .owl-item > div,
    .owl-carousel,
    .m-carousel-container { width: 100% !important }
    .owl-carousel .owl-item div > div div { font-size: 26px !important; line-height: normal !important }
    .mainServices { width: 100%; height: auto; float: left; padding-bottom: 20px }
    .mainServices > div {width: 100%; height: auto }
    .mainServices > div div { width: calc(25% - 10px); -moz-width: calc(25% - 10px);-webkit-width: calc(25% - 10px);height: auto; margin-right: 10px; padding: 10px }
    .mainServices > div div h2 { font-size: 20px; line-height: normal; }
    .mainServices > div div a { position: static; right: auto; bottom: auto; float: right; }
    section { clear: both; }
    section > div { width: 100% }
    .mainleft { width: calc(50% - 15px); padding-right: 15px }
    .mainleft object { width: 100% !important; height: auto !important;}
    .mainright { width: 50% }
    footer > div { width: 100% }
    footer a { font-size: 12px; line-height: normal }
    footer h2 { font-size: 14px; margin-bottom: 10px; }
    footer h2  a, footer h2  a:hover { font-size: 14px; text-decoration: none; }
    footer span { font-size: 12px; line-height: normal }
    footer p { font-size: 12px; width: 100%; clear: both }
    footer p a { font-size: 12px }
    footer a.social { padding: 2px 0 2px 20px; background-size: 16px auto; display: inline-block; clear: both; width: 100% }
    .rightside { width: calc(100% - 286px); padding: 15px 0 0 20px }
    .w380 { width: 100% }
    .w459 {width: 100% }
    .labels div { width: calc(100% - 80px) }
    .labels label { width: 80px }
    .head > div { width: 100% }
    .head > div img { max-width: 100%; height: auto }
    .head { height: auto; padding-bottom: 10px }
}

@media (max-width: 640px) {
    header { width: 100%; height: auto; padding-bottom: 10px }
    header a.logo { height: 45px; width: 135px; background: transparent url(slotconsulting-logo-mobile.gif) no-repeat 0 0; margin: 10px 0 10px 20px }
    header input { width: 150px }
    header > div { width: 100%; padding: 0 20px; float: none; clear: both }
    header > div:after { display: table; content: " "; clear: both; }
    header .dd { width: 100% !important; float: none !important; margin-bottom: 10px }
    header input { width: calc(100% - 34px); float: left; margin-left: 0 }
    header button { float: left }
    nav { display: none }
    nav > ul { width: 100% }
    nav > ul > li > a { font-size: 16px }
    nav > ul > li.hov > ul li { line-height: 20px }
    nav > ul > li.hov > ul a { font-size: 14px }
    .owl-carousel .owl-item > div,
    .owl-carousel,
    .m-carousel-container { width: 100% !important; height: 200px !important; }
    .m-carousel-container { padding: 0 20px; background: #dcdcdc }
    .owl-carousel .owl-item > div > div { width: 100% !important; height: 200px !important; padding-left: 10px !important }
    .owl-carousel .owl-item div > div div { font-size: 14px !important; line-height: normal !important; width: 100% !important; height: 200px !important; }
    .owl-carousel .owl-item div > div div a { font-size: 14px !important; margin-top: 10px !important; padding-left: 10px !important; background-size: auto 11px !important; background-position: 0 4px !important; }
    .owl-nav { display: none }
    .mainServices { width: 100%; height: auto; float: left; padding: 60px 0 20px 0 }
    .mainServices > div {width: 100%; height: auto; padding: 0 20px }
    .mainServices > div div { width: 100%; height: auto; margin: 0 0 10px 0; padding: 10px }
    .mainServices > div div h2 { font-size: 20px; line-height: normal; }
    .mainServices > div div a { position: static; right: auto; bottom: auto; float: right; }
    section { clear: both; }
    section > div { width: 100% }
    .mainleft { width: 100%; padding: 0 20px }
    .mainleft object { width: 100% !important; height: auto !important;}
    .mainright { width: 100%; padding: 0 20px }
    footer > div div { width: 50%; border-right: 0; }
    footer > div { width: 100% }
    footer a { font-size: 12px; line-height: normal }
    footer h2 { font-size: 18px; margin-bottom: 10px; }
	footer h2  a, footer h2  a:hover { font-size: 18px; text-decoration: none; }
    footer span { font-size: 14px; line-height: normal }
    footer p { font-size: 14px; width: 100%; clear: both; padding: 0 30px }
    footer p a { font-size: 12px }
    footer a.social { padding: 2px 0 2px 20px; background-size: 16px auto; display: inline-block; clear: both; width: 100% }
    footer > div div:first-child { margin-left: 0 }
    .rightside { width: calc(100% - 286px); padding: 15px 0 0 20px }
    .w380 { width: 100% }
    .w459 {width: 100% }
    .labels div { width: calc(100% - 80px) }
    .labels label { width: 80px }
    .head > div { width: 100% }
    .head > div img { max-width: 100%; height: auto }
    .head { height: auto; padding: 0 20px 10px 20px }
    .mobile-nav.open { -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); display: block; visibility: visible }
    .mobile-nav { width: 100%;  margin: 0; background: #10457a; z-index: 10000; transform: translate3d(-261px, 0px, 0px); transition-property: -ms-transform, -webkit-transform, transform; transition-duration: 0.3s; position: absolute; top: 55px; left: 0; float: none; height: auto; line-height: normal; overflow-y: auto; padding: 20px }
    .mobile-nav-container { position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: auto }
    .btn-navbar,
    .btn-navbar:hover { border: none; box-shadow: 0 0 0; background: #10457a; margin: 0; z-index: 999; width: 45px; height: 45px; cursor: pointer; padding: 0 0 0 15px; display: block; position: absolute; top: 10px; right: 20px }
    .btn-navbar .icon-bar { background-color: #fff; box-shadow: 0 0 0; width: 30px; height: 3px; display: block; border-radius: 3px; margin-bottom: 3px; position: absolute; right: 8px; top: 21px }
    .btn-navbar .icon-bar:first-of-type { top: 13px }
    .btn-navbar .icon-bar:last-of-type { top: 29px }
    .mobile-layer.open { display: block; width: 100%; height: 100%; z-index: 10; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); visibility: visible }
    .mobile-nav-container ul { list-style: none }
    .mobile-nav-container a { color: #fff; text-decoration: none; font-size: 14px; line-height: 20px }
    .mobile-nav-container a:hover { text-decoration: underline }
    .mobile-nav-container ul li ul li { padding-left: 20px; background: transparent url(bg_glossary.png) no-repeat 5px 9px }

    .twocolumn { background: none }
    .leftside { /*float: right; width: 100%; background: #0E3B68; padding: 10px 20px*/ display: none }
    .rightside { float: left; width: 100%; padding: 10px 20px }
    .newsItem img { display: none }
    .newsItem div { width: 100% }
    h6 { font-size: 16px }
    .oneColumn { padding: 0 20px }
}