@font-face{
    font-family: font1;
    src: url("weblysleekuil.ttf");
    
}

@font-face{
    font-family: font2;
    src: url("weblysleekuil.eot");
}

@font-face{
    font-family: font3;
    src: url("weblysleekuil.otf");
}

@font-face{
    font-family: menufont1;
    src: url("pacifico.ttf");
    
}

@font-face{
    font-family: menufont2;
    src: url("pacifico.eot");
}

@font-face{
    font-family: menufont3;
    src: url("pacifico.otf");
}

@font-face{
    font-family: title1;
    src: url("caviardreamsbold.otf");
}

@font-face{
    font-family: title2;
    src: url("caviardreamsbold.eot");
}

@font-face{
    font-family: title3;
/*    src: url("code_bold-webfont.ttf");*/
/*    src: url("expressway.ttf");*/
    src: url("caviardreamsbold.ttf");
}


html, body, #page{
    width: 100%;
    min-height: 100%;
    color: black;
    font-size: 13px;
    font-family: 'font1', 'font2', 'font3';
    text-align: center;
    background-color: white;
    margin: 0 0;
}

div{
    margin: 0;
}

/*css for landing panel*/
#landing2{
    background-image: url("../ocmsimages/homepage-img.png");
    background-size: 100%;
    width: 100%;
    height: 100%;
    top: 0; bottom: 0;
    position:absolute; left:0; min-height:100%;
}

#landing{
    background: #000 url("../ocmsimages/homepage-img.png") no-repeat center center;
    -webkit-background-size: length_x length_y;
}

#landingpanel{
/*    background: #000 url("../ocmsimages/homepage-img.png") no-repeat center center;*/
    width: 100%;
/*    height:100%;*/
    background-size: cover; 
    display: table;
    position: relative;
    min-width: 100%;
/*    max-height: 100%;*/
    -webkit-background-size: length_x length_y;
    height: auto;
}

/*css for container*/
.container{
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-image: url("../ocmsimages/bg.png");
/*    background-repeat: repeat-y;*/
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

/*css for header*/
.headerpanel{
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #328ccb;
}

/*css for menu*/
@keyframes blink { 
   50% { border-color: #ff0000; } 
}

#hidemenu{
    vertical-align: middle;
    margin: 0 auto;
    background-color: transparent;
    width: 100%;
    height:100%;
}

#hidemenu p{
    font-family: menufont1,menufont2,menufont3,'Century Gothic';
    padding: 25% 0px;;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 45px;
    color: #363636;
    margin: auto auto;
/*    line-height: 100%;*/
}

#menu{
    background: #353535;
}

.menucontainer{
    width: 100%;
    position: fixed;
    z-index: 9;
}

/*css for contentpanel*/
.contentpanel{
    width: 100%;
    height: auto;
    display: table;
    margin: 0 auto;
    position: relative;
    background-color: transparent;
}

/*css for leftpanel*/
#panel1{
    background: white;
    width: 20%;
    float: left;
    display: table-cell;
    margin-bottom: -10000px;
    padding-bottom: 10000px;    
}

/*css for middlepanel*/
.content{
    width: 1000px;
    overflow: hidden;
    text-align: center;
    background: transparent;
    margin: 0 auto 40px auto;
}

.contents{
    float:left;
    width: 56%;
    text-align: left;
    background: transparent;
    margin-left: 4%;
}

.contents li{
    color: white;
    margin-left: 4%;
}
#panel2{
    width: 100%;
    float: left;
    overflow: hidden;
    height: auto !important;
    margin: 0 auto;
    position: relative;
}

.content1{
    height:auto;
    background: repeat-y;
}

.content2{
overflow: auto;
height: auto !important;
background: repeat-y;
padding-bottom: 50px;
}

/*css for rightpanel*/
#panel3{
    background: #7096FA;
    width: 20%;
    float: left;
    display: table-column;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

/*css for footer*/
.footerpanel{
    width: 100%;
    margin: 0 0;
    overflow: hidden;
    padding: 15px 0;
}

.footerpanel p{
    text-align: center;
    font-size: 13px;
}

.privacy{
    background-color: white;
    width: 80%;
    height: 450px;
    overflow-x: auto;
    display: none;
    position: absolute;
    bottom: 1%;
    left: 10%;
    padding: 30px;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
       -moz-animation: fadein 1s; /* Firefox */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.privacy p{
    color: #363636;
    font-size: 15px;
    text-align: left;
}

.privacy li{
    margin-left:40px;
}
/*css for bubble*/
@keyframes bubble
{
0%   {width: 160px;height: 160px;left: 50%;top: 500px;box-shadow: 0 0 20px yellow;}
10% {width: 200px;height: 200px;left: 40%;top: 400px;box-shadow: 0 0 30px green;}
20% {width: 180px;height: 180px;left: 60%;top: 300px;box-shadow: 0 0 35px blue;}
30% {width: 220px;height: 220px;left: 40%;top: 80px;box-shadow: 0 0 40px yellow;}
40% {width: 230px;height: 230px;left: 60%;top: 30px;box-shadow: 0 0 50px green;}
50% {width: 200px;height: 200px;left: 50%;top: 50px;box-shadow: 0 0 30px blue;}
60% {width: 230px;height: 230px;left: 30%;top: 200px;box-shadow: 0 0 50px yellow;}
70% {width: 200px;height: 200px;left: 10%;top: 310px;box-shadow: 0 0 30px green;}
80% {width: 190px;height: 190px;left: 60%;top: 400px;box-shadow: 0 0 35px blue;}
90% {width: 200px;height: 200px;left: 70%;top: 350px;box-shadow: 0 0 30px blue;}
100% {width: 160px;height: 160px;left: 50%;top: 500px;box-shadow: 0 0 20px yellow;}
}

@-webkit-keyframes bubble
{
0%   {width: 160px;height: 160px;left: 50%;top: 500px;box-shadow: 0 0 20px yellow;}
10% {width: 200px;height: 200px;left: 40%;top: 400px;box-shadow: 0 0 30px green;}
20% {width: 180px;height: 180px;left: 60%;top: 300px;box-shadow: 0 0 35px blue;}
30% {width: 220px;height: 220px;left: 40%;top: 80px;box-shadow: 0 0 40px yellow;}
40% {width: 230px;height: 230px;left: 60%;top: 30px;box-shadow: 0 0 50px green;}
50% {width: 200px;height: 200px;left: 50%;top: 50px;box-shadow: 0 0 30px blue;}
60% {width: 230px;height: 230px;left: 30%;top: 200px;box-shadow: 0 0 50px yellow;}
70% {width: 200px;height: 200px;left: 10%;top: 310px;box-shadow: 0 0 30px green;}
80% {width: 190px;height: 190px;left: 60%;top: 400px;box-shadow: 0 0 35px blue;}
90% {width: 200px;height: 200px;left: 70%;top: 350px;box-shadow: 0 0 30px blue;}
100% {width: 160px;height: 160px;left: 50%;top: 500px;box-shadow: 0 0 20px yellow;}
}

#bubble{
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: transparent;
    -moz-box-shadow: 0 0 30px yellow;
    -webkit-box-shadow: 0 0 30px yellow;
    box-shadow: 0 0 30px yellow;
    animation: bubble 60s infinite;
    -webkit-animation: bubble 60s infinite; 
}