@charset "utf-8";
/* CSS Document */

/*@import url(http://fonts.googleapis.com/css?family=Varela+Round);*/

@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrewcondensed.css);
@import url('https://fonts.googleapis.com/css?family=Rubik');

html, body {
    max-width: 100%;
    overflow-x: hidden;
    color: #666;
	font-family: 'Rubik', sans-serif;
}

body {
margin:0px;

}

a {
	color:#ccc;
}

a:hover {
	color:#999;
}


.container-fluid {
	color:#666;
	width:100%;
}

.hidemetop {
	display: none;
}

.logo {
	width:40%;
}

h1 {
	color:#666;
	font-size: 16px;
}
h2 {
	color:#666;
	font-size: 14px;
}
h3 {
	color:#666;
	font-size: 12px; 
}


.row {
	color:#666;
}
.img a {
	border:none;
}

.blk {
	background-color: #000000;
	color: #D4EEF8;
}

.blk-btm {
	background-image: url(images/line-black.jpg);
	background-repeat:no-repeat;
	background-size:100%;
}

.footer {
  bottom: 0;
  position: absolute;
  left: 0;
  width: 100%;
}

@media only screen and (max-width: 580px) {
	.logo {
		width:25%;
   }
  
.alef {
  font-family: 'Rubik', sans-serif;
}


/*`````````````````````fade in text````````````````````````````````` */
@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.bottombar {
	height: 40px;
	width:auto;
    background: #ffffff;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
/*    position: relative;*/
    
}


.bottombar ul {
    padding: 0;
    margin: 0 auto;
    height: 40px;
		
}

.bottombar li {
	height: 40px;
	width:auto;
	text-align:center;
	list-style:none;
	display: inline;
    float: right;
}

.bottombar a {
    color: #666666;
    width: 100px;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #ffffff;
	display:block;
	display: inline-block;
}

.bottombar li a {
    border-left: 1px solid #f8f4ed;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	text-align:center;
}
.bottombar li:last-child a {
    border-left: 0;
	text-align:center;
}
.bottombar a:hover, .bottombar a:active {
    background-color: #039;
	text-decoration:none;
}

.bottombar a#pull {
    display: none;
} 

@media screen and (max-width: 600px) {
    .bottombar { 
        height: auto;
    }
    .bottombar ul {
        width: 100%;
        display: block;
        height: auto;
    }
    .bottombar li {
        width: 50%;
        float: left;
        position: relative;
    }
    .bottombar li a {
        border-bottom: 1px solid #f8f4ed;
        border-right: 1px solid #f8f4ed;
		text-align:center;
    }
    .bottombar a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}
	
/*======================mobile app*/
	
.circle {
  position: absolute;
  left: 85%;
  top: 95%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.circle img {
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
  box-shadow: 0px 6px 5px #ccc;
  -moz-box-shadow: 0px 6px 5px #ccc;
  -webkit-box-shadow: 0px 6px 5px #ccc;
  border-radius:100px;
  -moz-border-radius:100px;
  -webkit-border-radius:100px; 
  background-color: #fff;	
	color: #ffffff
}	
	
.ocean {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}

/* --------------------------------------------- */
	.circle {
  position: absolute;
  left: 85%;
  top: 95%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.circle img {
  width: 120px;
  height: 120px;
  border: 2px solid #fff;
  box-shadow: 0px 6px 5px #ccc;
  -moz-box-shadow: 0px 6px 5px #ccc;
  -webkit-box-shadow: 0px 6px 5px #ccc;
  border-radius:120px;
  -moz-border-radius:120px;
  -webkit-border-radius:120px; 
  background-color: #fff;	
}	
	
.ocean {
  height: 50px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}