@font-face {
    font-family: 'karla';
    src: url('./fonts/karla/Karla-Regular.woff2') format('woff2'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-Regular.woff') format('woff'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'karla';
    src: url('./fonts/karla/Karla-Bold.woff2') format('woff2'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-Bold.woff') format('woff'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'karla';
    src: url('./fonts/karla/Karla-BoldItalic.woff2') format('woff2'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-BoldItalic.woff') format('woff'); /* Modern Browsers */
    src: url('./fonts/karla/Karla-BoldItalic.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'karla';
url('./fonts/karla/Karla-Italic.woff2') format('woff2'); /* Modern Browsers */
url('./fonts/karla/Karla-Italic.woff') format('woff'); /* Modern Browsers */
url('./fonts/karla/Karla-Italic.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Franklin Gothic';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/frankgo/FranklinGothic.woff') format('woff');
}

@font-face {
    font-family: 'Franklin Gothic';
    font-style: italic;
    font-weight: normal;
    src: url("./fonts/frankgo/FranklinGothicItalic.woff") format('woff');
}

@font-face {
    font-family: 'Franklin Gothic Condensed';
    font-style: normal;
    font-weight: normal;
    src: url("./fonts/frankgo/FRANKGO.woff") format('woff');
}

* {margin-top:0; padding-top:0}

body {
    background-color: #fff;
}

#page{
    width: 950px;
    height: 450px;
    margin: 20px auto;
}

#colorbar{
    display: block;
    width: 100%;
    height: auto;
    position: fixed;
    align-content: center;
    background-color: white;
    z-index: 9999;
}

#colorbar .nav_upper{
    width: 100%;
    height: auto;
    min-width: 800px;
    position: fixed;
    top: 30px;
    background-color: transparent;
    margin-left: 48px;
    z-index: 9999;
}

#colorbar .nav_lower{
    width: 100%;
    position: fixed;
    height: auto;
    min-width: 800px;
    top: 135px;
    text-align: justify;
    background-color: transparent;
    z-index: 9999;
}

#colorbar .nav_upper h{
    font-family: "Franklin Gothic";
    font-weight: normal;
    font-size: 52pt;
    color: black;
    margin-left: 10px;
}

#colorbar .nav_lower a{
    color:#000000;
    font-family: "Franklin Gothic";
    font-style: normal;
    font-size: 18pt;
    font-weight: normal;
    text-decoration: none;
    padding-right: 0px;
    padding-left: 48px;
    padding-bottom:1px;
}


#blocks{
    width: 98%;
    height: inherit;
    background-color: white;
}

#blocks .big_box{
    float: left;
    width: 66.25%;
    height: 70%;
    background-color: transparent;
    vertical-align: top;
    overflow: hidden;
}

.big_box .curtain{
    background-color: white;
    position: absolute;
    height: 320px;
    width:200px;
    opacity: 0.4;
    z-index:2;
}

.medium_box .curtain{
    background-color: white;
    position: absolute;
    height: 50px;
    width: 310px;
    opacity: 0.4;
    margin-top: 270px;
    z-index:2;
}

.curtain a{
    display: block;
}

.big_box .slide_show{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: 1;
}

.medium_box .slide_show{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: 1;
}

.slide_show img{
    height: 100%;
}

#blocks .big_box a, #blocks .medium_box a, #blocks .left_box a, #blocks .right_box a, #blocks .middle_box a{
    height: 100%;
    width: 100%;
    display: block;
    transition-property: none;
    text-decoration: none;
    text-transform: none;
}

#blocks .big_box a img{
    width: 100%;
}

#blocks .big_box a span{
    color: white;
    font-family: "Franklin Gothic";
    font-style: normal;
    position: absolute;
    left: 2%;
    top: 3%;
    font-size: 17pt;
}

#blocks .medium_box{
    display:inline-block;
    float: right;
    width: 32.5%;
    height: 70%;
    background-color:transparent;
    vertical-align: top;
    margin-left: 1.25%;
    overflow: hidden;
}

#blocks .medium_box a img{
    height: 100%;
}

#blocks .medium_box a span{
    position: absolute;
    left: 4%;
    bottom: 2%;
    font-size: 17pt;
    color: white;
    font-family: "Franklin Gothic";
    font-style: normal;
}

#blocks .left_box{
    float: left;
    width: 32.5%;
    height: 30%;
    /*height: 70%;*/
    /*background-color: #008c45;*/
    /*background-color: #8DB38B;*/
    /*background-color: #33658a;*/
    /*background-color: #33658A;*/
    /*background-color: #21295C;*/
    /*background-color: #DD6031;*/
    background-color: rgb(94, 122, 157);

    vertical-align: top;
    margin-right: 1.25%;
    margin-top: 1.25%;
    margin-bottom: 1.25%;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

#blocks .middle_box{
    width: 32.5%;
    height: 30%;
    /*height: 50%;*/
    /*background-color: #f4f5f0;*/
    /*background-color: #BDBFA9;*/
    /*background-color: #dd6031;*/
    /*background-color: #8797AF;*/
    /*background-color: #33658A;*/
    /*background-color: #33658A;*/
    background-color: rgb(37, 141, 130);

    float: left;
    vertical-align: top;
    margin-top: 1.25%;
    margin-bottom: 1.25%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#blocks .right_box{
    width: 32.5%;
    height: 30%;
    /*height: 70%;*/
    /*background-color: #cd212a;*/
    /*background-color: #D2AB99;*/
    /*background-color: #fed766;*/
    /*background-color: #A7ADC6;*/
    /*background-color: #9EB3C2;*/
    /*background-color: #53131E;*/
    background-color: rgb(255, 142,123);

    float: right;
    margin-left: 1.25%;
    margin-top: 1.25%;
    margin-bottom: 1.25%;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#left_box-hover{
    height: 100%;
    width: 50%;
    background-color: white;
    top:0px;
    left:0%;
    position: absolute;
    z-index: 1;
    opacity: 0;
}

#blocks .left_box a img{
    width: 100%;
}

#blocks .left_box a span{
    color: white;
    font-family: "Franklin Gothic";
    font-style: normal;
    position: relative;
    left:4%;
    top: 4%;
    font-size: 17pt;
}

#middle_box-hover{
    top:0;
    right: 0;
    height: 100%;
    width: 50%;
    background-color: white;
    position: absolute;
    opacity: 0;
    z-index: 1;
    font-family: "Franklin Gothic";
}

#blocks .middle_box a img{
    height: 100%;
}

#blocks .middle_box a span{
    color: white;
    /*color: black;*/
    font-family: "Franklin Gothic";
    font-style: normal;
    position: relative;
    font-size:17pt;
    left: 68%;
    bottom: 78%;
}

#right_box-hover{
    top:0;
    left:0%;
    height: 100%;
    width: 50%;
    background-color: white;
    position: absolute;
    z-index: 1;
    opacity: 0;
}

#blocks .right_box a img{
    width: 100%;
}

#blocks .right_box a span{
    position: relative;
    left: 4%;
    top: 4%;
    color: white;
    font-family: "Franklin Gothic";
    font-style: normal;
    font-size: 17pt;
}

#bottom{
    width: 100%;
    min-width: 950px;
    height: 80px;
}

#bottom .icons{
    width: 80px;
    float: left;
    margin-left: 48px;
    margin-top: 30px;
    margin-bottom: 60px;
}

#bottom .cc{
    float: left;
    width: 80px;
    margin: 35px 1vw 60px 1vw;
    overflow: hidden;
    background-color: transparent;
}
.cc img{
    width: 70px;
}

#bottom .links{
    float: left;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 60px;
    height: auto;
    background-color:transparent;
    font-size: 18pt;
    color: black;
    position: relative;
}


.links a{
    color: black;
    text-decoration: none;
    text-transform: none;
    font-family: "Franklin Gothic";
    padding-left: 48px;
    font-size: 18pt;
    padding-right: 0px;

}