/* main colors */

.blue {
    color: #5493FF;
}
.blue-bg {
    color: #fff;
    background: #70B8FF;
/*
    background: -moz-linear-gradient(top, #322379 0%,#322379 2%,#0f619e 25%,#0290b1 50%,#5493FF 75%,#6fba9c 100%);
    background: -webkit-linear-gradient(top, #322379 0%,#322379 2%,#0f619e 25%,#0290b1 50%,#5493FF 75%,#6fba9c 100%);
    background: linear-gradient(to bottom, #322379 0%,#322379 2%,#0f619e 25%,#0290b1 50%,#5493FF 75%,#6fba9c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#322379', endColorstr='#6fba9c',GradientType=0 );
*/
}

@media only screen and (max-width: 40em) {
    .design2026-21m {
        background:url('/images/design2026-homepage21m.jpg') no-repeat center center !important;
        background-size: cover;
    }
    .design2026-22m {
        background:url('/images/design2026-homepage22m.jpg') no-repeat center center !important;
        background-size: cover;
    }
}

.blue-dark-bg {
    color: #fff;
    background: #322379;
}

#about-bg {
    background: #5493FF;
    color: #fff;
    background-image: url(/images/bg-design2026.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.orange {
    color: #EF7F43;
}
.orange-bg {
    color: #fff;
    background-color: #EF7F43; /* #ff6600; */
}

.dark-blue {
    color: #322379;
}

.white {
    color: #ffffff;
}
.white-bg {
    color: #8f8b88;
    background-color: #ffffff;
}

.gray {
    color: #8f8b88;
}
.gray-bg {
    color: #fff;
    background-color: #8f8b88;
}

.green {
    color: #89b42d;
}
.green-bg {
    color: #fff;
    background-color: #89b42d;
}

.navy {
    color: #5493FF;
}
.navy-bg {
    color: #fff;
    background-color: #5493FF;
}

.violet {
    color: #5493FF;
}
.violet-bg {
    color: #fff;
    background-color: #5493FF;
}

.topic1-bg {
    color: #fff;
    background-color: #efac25;
}
.topic2-bg {
    color: #fff;
    background-color: #f18500;
}
.topic3-bg {
    color: #fff;
    background-color: #e95d0b;
}
.topic4-bg {
    color: #fff;
    background-color: #c63e42;
}
.topic5-bg {
    color: #fff;
    background-color: #a91580;
}
.topic6-bg {
    color: #fff;
    background-color: #702283;
}
.topic7-bg {
    color: #fff;
    background-color: #584495;
}
.topic8-bg {
    color: #fff;
    background-color: #2468b1;
}
.topic9-bg {
    color: #fff;
    background-color: #0591b8;
}
.topic10-bg {
    color: #fff;
    background-color: #00b3d6;
}
.topic11-bg {
    color: #fff;
    background-color: #03a58c;
}
.topic12-bg {
    color: #fff;
    background-color: #15944d;
}
.topic13-bg {
    color: #fff;
    background-color: #88aa28;
}
.topic14-bg {
    color: #fff;
    background-color: #afc224;
}

.open-sans {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

a.filter-menu {
    display: block;
    padding: 1em 1em;
    color: #8f8b88;
}

a.filter-menu.gray h4,
a.filter-menu.gray p{
    color: #8f8b88;
}
a.filter-menu.gray hr {
    color: #8f8b88;
    background-color: #8f8b88;
}

a.filter-menu.gray:hover {
    background-color: #5493FF;
    color: #ffffff;
}
a.filter-menu.gray:hover h4,
a.filter-menu.gray:hover p{
    color: #ffffff;
}
a.filter-menu.gray:hover hr {
    color: #ffffff;
    background-color: #ffffff;
}

a.filter-menu.white h4,
a.filter-menu.white p{
    color: #fff;
}
a.filter-menu.white hr {
    color: #fff;
    background-color: #fff;
}

a.filter-menu.selected {
    background-color: #0591b8;
    color: #ffffff;
}
a.filter-menu.selected h4,
a.filter-menu.selected p{
    color: #ffffff;
}
a.filter-menu.selected hr {
    color: #ffffff;
    background-color: #ffffff;
}
@media only screen and (max-width: 40em) {
    a.filter-menu {
        padding: 1em 0.5em;
    }
    a.filter-menu.gray p .text-0875x {
        font-size: 0.5em;
    }
}

/* html */
body {
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    background-color: #fff;
    color: #8f8b88;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4{
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    color: #5493FF;
    font-weight: 500;
    font-size: 1.3rem;
}

h1,
h2,
h3{
    text-transform: uppercase;
}

h4 {
    margin-bottom: 1em;
}

h1 a,
h2 a,
h3 a,
h4 a {
    color: #5493FF;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
    color: #EF7F43;
}

p,
li {
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
.text-2x {
    line-height: 120%;
    font-size: 2em;
}
.text-15x {
    font-size: 1.5em;
}
.text-0875x {
    font-size: 0.875em;
}
@media only screen and (max-width: 40em) {
    .text-2x {
        line-height: 120%;
        font-size: 1.5em;
    }
    .text-15x {
        font-size: 1.15em;
    }
    .text-0875x {
        font-size: 0.75em;
    }
}

.button {
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

.amagdic-arrow,
.arrow-filter {
    opacity: 0.25;
}
.amagdic-arrow:hover,
.arrow-filter:hover {
    opacity: 1;
}

#home {
    width: 100%;
    min-height: 300px;
    overflow:hidden;
    margin:0 auto;
    background: #5493FF;
    position: relative;
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
#home-bg {
    z-index: 1;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: block;
}
#home-bg div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
}

#amagdic-img-fade {
    z-index: 1;
    position: relative;
    width: 100%;
    display: block;
}
#amagdic-img-fade img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}

.amagdic-img-hover img {
    opacity: 1;
}
.amagdic-img-hover img:hover {
    opacity: 0.75;
}

footer {
    background-color: #fff;
    color: #8f8b88;
    padding: 3em 0 2em 0;
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

footer p {
    color: #8f8b88;
    font-size: 0.8em;
    padding: 1em 0;
    margin: 0;
    /*font-family: Raleway, Arial, Helvetica, sans-serif;*/
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}
footer p a {
    color: #8f8b88;
}

footer .white {
    color: #fff !important;
}

.section-bg {
    margin: 0;
    padding: 7em 0;
}
.topic-section-bg {
    margin: 0;
    padding: 1em 0 0 0;
}
.amagdic-padding {
    margin: 0;
    padding: 0 3em;
}

@media only screen and (max-width: 40em) {
    .section-bg {
        margin: 0;
        padding: 4em 0;
    }
    .amagdic-padding {
        margin: 0;
        padding: 0 0em;
    }
}

.white-bg {
    background-color: #ffffff;
}

/* spacer */
.spacer {
    clear: both;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

/* navigation */
/* Slide Menu */
#pageslide {
    /* These styles MUST be included. Do not change. */
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;

    /* Specify the width of your pageslide here */
    width: 290px;
    padding: 0;
    margin: 0;

    /* These styles are optional, and describe how the pageslide will look */
    background-color: #EF7F43;
    color: #fff;
    overflow: auto;
}
@media only screen and (max-width: 40em) {
    #pageslide {
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
    }
}

#top-nav {
    top: 0;
    left: 0;
    right: 0;
    position:fixed;
    font-size:1em;
    padding: 0.5em 1em;
    width: 100%;
    height: 72px;
    background-color: #70B8FF;
    z-index: 997;
}

#logo {
    position: absolute;
    top: 1em;
    left:50%;
    z-index: 997;
    height: 3rem;
}
#logo img {
    position: relative;
    left:-50%;
    height: 2.5rem;
}

#menu-home {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 997;
    width: 70px;
}
#menu-home a {
    opacity: 1;
}
#menu-home a:hover {
    opacity: 0.75;
}

#menu-open {
    position: absolute;
    top: 1em;
    left: 1em;
    z-index: 997;
    width: 53px;
}
#menu-open img {
    width: 53px;
}
#menu-open a {
    opacity: 1;
}
#menu-open a:hover {
    opacity: 0.75;
}

#menu {
    color: #fff;
    margin: 0;
    padding: 3em;
    display: none;
    position: relative;
    font-size: 0.875em;
}
#menu div.menu-icon {
    position: relative;
    margin: 0 0 3em 0;
    width: 53px;
}
#menu div.menu-icon img {
    width: 53px;
}
#menu div.menu-icon a {
    opacity: 1;
}
#menu div.menu-icon a:hover {
    opacity: 0.75;
}

#menu hr {
    position: relative;
    margin: 1em 0 1em 0;
    width: 40%;
    background-color: #fff;
    color: #fff;
    height: 2px;
    padding: 0;
    border: 0;
}
#menu nav.menu-links a {
    display: block;
    padding: 0;
    margin: 0.25em 0;
    font-size: 1.25em;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
}
#menu nav.menu-links a:hover {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

@media only screen and (min-width: 80em) {

}

@media only screen and (max-width: 40em) {
    #top-nav {
        height: 60px;
    }
    #logo {
        top: 0.75em;
        height: 2rem;
    }
    #logo img {
        height: 2rem;
    }
    #menu {
        padding: 1em;
        font-size: 0.75em;
    }
    #menu-home {
        top: 1em;
        right: 1em;
        width: 51px;
    }
    #menu-open {
        top: 1em;
        left: 1em;
        width: 26px;
    }
    #menu div.menu-icon {
        margin: 0 0 2em 0;
    }
    #menu-open img,
    #menu div.menu-icon img {
        width: 26px;
    }
}

.amagdic-round-img {
    border-radius: 50%;
    margin: 1rem 1.5rem 1rem 0;
    padding: 0;
    border: 3px solid white;
    width: 7rem;
    float: left;
}

@media only screen and (max-width: 40em) {
    .amagdic-round-img {
        width: 8rem;
        float: none;
        margin: 1rem auto;
        display: block;
    }
}

hr {
    position: relative;
    margin: 2em auto;
    width: 80px;
    background-color: #fff;
    color: #fff;
    height: 3px;
    padding: 0;
    border: 0;
}
hr.blue {
    background-color: #70B8FF;
    color: #70B8FF;
}
hr.orange {
    background-color: #EF7F43;
    color: #EF7F43;
}
hr.gray {
    background-color: #8f8b88;
    color: #8f8b88;
}

div.carousel {
    position: relative !important;
    display: block !important;
}
div.carousel:after {
    content: '';
    display: block;
    clear: both;
}

ul.amagdic-masonry {
    position: relative;
    display: block;
}

ul.amagdic-masonry li {
    width: 33.33333%;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 40em) {
    ul.amagdic-masonry li {
        width: 50%;
    }
}

ul.amagdic-masonry li img {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}

ul.amagdic-masonry:after {
    content: '';
    display: block;
    clear: both;
}

div.white-box-arrow a {
    border: 2px solid #fff;
    background-image: url(/images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    margin: 0;
    padding: 1em 3em 1em 2em;
    border-radius: 2px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    font-size: 1.5em;
    height: 100px;
    line-height: 100px;
    display: block;
}
div.white-box-arrow a:hover,
div.white-box-arrow a.selected {
    background-image: url(/images/arrow-right-blue.png);
    background-color: #fff;
    color: #5493FF;
}
div.white-box-arrow span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

div.white2-box-arrow a,
div.white3-box-arrow a {
    border: 2px solid #fff;
    background-image: url(/images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    margin: 0;
    padding: 0.85em 2em 0.85em 1.5em;
    border-radius: 2px;
    color: #fff;
    font-weight: 400;
    font-size: 1.5em;
    display: block;
    text-align: center;
}
div.white2-box-arrow a:hover,
div.white2-box-arrow a.selected {
    background-image: url(/images/arrow-right.png);
    background-color: #5493FF;
    color: #ffffff;
    border: 2px solid #5493FF;
}
div.white2-box-arrow span,
div.white3-box-arrow span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
div.white3-box-arrow a:hover,
div.white3-box-arrow a.selected {
    background-image: url(/images/arrow-right-blue.png);
    background-color: #fff;
    color: #5493FF;
}

@media only screen and (max-width: 40em) {
    div.white-box-arrow a {
        padding: 0.5em 2em 0.5em 1em;
        font-size: 1em;
        height: 70px;
        line-height: 70px;
    }
}

div.yellow-box-arrow a {
    border: 2px solid #EF7F43;
    background-color: #EF7F43;
    background-image: url(/images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    margin: 0;
    padding: 0.85em 2em 0.85em 1.5em;
    border-radius: 2rem;
    color: #fff;
    font-weight: 400;
    font-size: 1.5em;
    display: block;
    text-align: center;
    text-transform: uppercase;
}
div.yellow-box-arrow a:hover,
div.yellow-box-arrow a.selected {
    background-image: url(/images/arrow-right.png);
    background-color: #5493FF;
    color: #ffffff;
    border: 2px solid #5493FF;
}
div.yellow-box-arrow span,
div.yellow-box-arrow span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

div.gray-box-arrow a {
    border: 2px solid #8f8b88;
    background-image: url(/images/arrow-right-gray.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    margin: 0;
    padding: 0.85em 2em 0.85em 1.5em;
    border-radius: 2px;
    color: #8f8b88;
    font-weight: 400;
    font-size: 1.5em;
    display: block;
    text-align: center;
    /*background-color: #fff;*/
}
div.gray-box-arrow a:hover,
div.gray-box-arrow a.selected {
    background-image: url(/images/arrow-right.png);
    background-color: #5493FF;
    color: #ffffff;
    border: 2px solid #5493FF;
}
div.gray-box-arrow span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

#photogallery-bg {
    background: #ffffff url('/images/bg-multimedia.jpg') no-repeat 50% 50% fixed;
    background-size: cover;
    position: relative;
}

.padding-parallax {
    padding: 15em 0;
}
@media only screen and (max-width: 40em) {
    .padding-parallax {
        padding: 8em 0;
    }
}

#google-map img {
    max-width : none;
}
/*
.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);

    float: left;
}
*/

.rotate-90{
    height: 100%;
    min-height: 5rem;
    width: 100%;
    position: relative;
    text-align: left;
}

.rotate-90 div.rotate {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    transform-origin: 0% 0%;
    position: absolute;
    left: 10%;
    line-height: 1;
    display: block;
    white-space:pre-wrap;
    top: 100%;
}


.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }

/* code for animated blinking cursor */
.typed-cursor{
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

/* datepicker */
.datepicker{display:none;position:absolute;padding:4px;margin-top:1px;direction:ltr}.datepicker.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;float:left;display:none;min-width:160px;list-style:none;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;color:#333;font-size:13px;line-height:18px}.datepicker.dropdown-menu td,.datepicker.dropdown-menu th{padding:4px 5px}.datepicker table{border:0;margin:0;width:auto}.datepicker table tr td span{display:block;width:23%;height:54px;line-height:54px;float:left;margin:1%;cursor:pointer}.datepicker td,.datepicker th{text-align:center;width:20px;height:20px;border:0;font-size:12px;padding:4px 8px;cursor:pointer}.datepicker td{background:#fff}.datepicker td span.active,.datepicker td.active.day,.datepicker td.active.year{background:#2ba6cb}.datepicker td.new,.datepicker td.old{color:#999}.datepicker td.day.disabled{color:#eee}.datepicker th{background:#fff}.datepicker th span.active,.datepicker th.active.day,.datepicker th.active.year{background:#2ba6cb}.datepicker th.date-switch{width:145px}.datepicker .cw{font-size:10px;width:12px;padding:0 2px 0 5px;vertical-align:middle}.datepicker.days div.datepicker-days,.datepicker.months div.datepicker-months,.datepicker.years div.datepicker-years{display:block}.datepicker-dropdown:after,.datepicker-dropdown:before{content:'';display:inline-block;position:absolute}.datepicker thead tr:first-child th{cursor:pointer}.datepicker thead tr:first-child th.cw{cursor:default;background-color:transparent}.datepicker tfoot tr:first-child th{cursor:pointer}.datepicker-inline{width:220px}.datepicker-rtl{direction:rtl}.datepicker-rtl table tr td span{float:right}.datepicker-dropdown{top:0;left:0}.datepicker-dropdown:before{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:1px solid rgba(0,0,0,.2);top:-7px;left:6px}.datepicker-dropdown:after{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;top:-6px;left:7px}.datepicker-dropdown::after,.datepicker-dropdown::before,.datepicker>div{display:none}.datepicker-close{position:absolute;top:-30px;right:0;width:15px;height:30px;padding:0;display:none}.table-striped .datepicker table tr td,.table-striped .datepicker table tr th{background-color:transparent}


#video-container {
    background-color: rgb(50, 35, 121);
    background-image: url('/intro/design2020.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 100;
}
@media all and (orientation:portrait) {
    #video-container {
        background-image: url('/intro/design2020.jpg');
    }
}

#video {
    position: absolute;
    top: 50%
    transform: translateY(-50%);
    z-index: 99;
    width:100%;
    border:0;
    display:none;
    margin: auto 0;
}

#play-video {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    z-index: 700;
    display: block;
    width: 100%;
    opacity: 1;
    text-align: center;
}

#play-video img {
    width: 120px;
}

/* small */
@media only screen and (max-width: 50em) {
    #play-video img {
        width: 90px;
    }
}

#play-video:hover {
    opacity: 0.6;
}