body{
	background:whitesmoke;
    margin: 0%;
    padding: 0%;

}

@font-face {
    font-family: defFont;
    src: url("assets/AcephimereThin1-18.otf");
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');


@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0); }
    40% {
      -webkit-transform: translateY(-30px); }
    60% {
      -webkit-transform: translateY(-15px); } }
  @-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -moz-transform: translateY(0); }
    40% {
      -moz-transform: translateY(-30px); }
    60% {
      -moz-transform: translateY(-15px); } }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); }
    40% {
      -webkit-transform: translateY(-30px);
      -moz-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      -o-transform: translateY(-30px);
      transform: translateY(-30px); }
    60% {
      -webkit-transform: translateY(-15px);
      -moz-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      -o-transform: translateY(-15px);
      transform: translateY(-15px); 
    } 
}

.menu{
    position: fixed;
    padding-left: 10px;
    margin-right: 10px;
    z-index: 2;
}

.scroll-down{
box-align: centre;
position: absolute;
bottom:5;
right:25%;
left:50%;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
z-index: 2;
cursor: pointer;
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-family: defFont;
}

.sidenav span{
    color: oldlace;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 8px 8px 8px 32px;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: brown;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    z-index: 2;
}



.top-video{
    box-align:center;
    padding: 0;
    filter: opacity(0.2);
    z-index:1;
    position: absolute;
    height:100%; 
    width:100%;
    overflow: hidden;
}

.logo{
    text-align: center;
    display:block;
    filter: drop-shadow(2px 0 1px crimson);
    height: 100%;
}

.logo img{
    margin-top: 100px;
    margin-bottom: auto;
}


.main-com-1{
    padding-top: 10%;
    padding-left: 2%;
    padding-right: 2%;
    height: 100%;
    width: 100%;
}

.main-com-1 p{
    text-align: left;
    font-family: defFont;
    font-size: 24px;
    width: 70%;
    float: left;
}

.map-com{
    width: 30%;
    height: auto;
    float: right;
}

.cam-com{
    display: block;
    width: auto;
    height:auto;
    float: left;
    margin-top: 5%;
    margin-left:10%;

}

.vcam-com{
    display: block;
    width: auto;
    height:auto;
    float: left;
    margin-left:10%;

}

.about-cam{
    display: block;
    width: auto;
    height:auto;
    float: left;
    margin-top: 4.95%;
    margin-left:10%;


}

.contact-contain{
    height: 90%;
    border-radius: 10px;
    text-align:center;
    display:block;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 20%;
    padding-right: 20%;
    background: #e0e0e0;
}

.fotter{
    display: block;
    padding-top: 8px;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    float: centre;
    text-align: center;
    color: #999;
    font-family: defFont;
}

.fotter a{
    margin-left: 3rem!important;
    text-decoration: none;
    color: rgb(0, 37, 94);
    font-family: defFont;
    
}

.fotter a:hover{
    filter: hue-rotate(90deg);
    filter: drop-shadow(2px 0 1px crimson);
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 37.5em) {
    .sidenav {
        padding-top: 15px;
    }


    .sidenav a {
        font-size: 18px;
    }


    .fotter a { 
        margin-left: 5rem!important;
        text-decoration: none;
        color: rgb(0, 37, 94);
        font-family: defFont;
        float: left;
    }
}