@import url('http://fonts.googleapis.com/css?family=Roboto:400,700,900');


body {
background:url("../img/Blurred%20Backgrounds%20(4).jpg") no-repeat center center fixed;
background-size: 100%;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

html, body{
	margin:0;
	padding:0;
	width:100%;
	height:auto;
}
/*Full Mobile Menu End*/

.wrapper {
  width: 150px;
}

.line{
	width:70px;
	height:4px;
	background:#000;
	opacity:0;
	margin-top: 5%;
}
/*Mobile menu button start*/
/* btn */
.menu_button {
	position: fixed;
	display:  inline-block;
	width: 30px;
	height: 30px;
	margin-left:-5% ;
	margin-top: 2%;
	  z-index: 10;

}
.menu span {
	margin: 0 auto;
	position: absolute;
	top: 12px;
}
.menu span:before, .menu span:after {
	position: absolute;
	content: '';
}
.menu span, .menu span:before, .menu span:after {
	width: 50px;
	height: 10px;
	background-color: #000;
	display: block;
}
.menu span:before {
	margin-top: -12px;
}
.menu span:after {
	margin-top: 12px;
}
/* --- btn --- */

/* examples */


/* example 5 */
.example5 span {
	-webkit-transition-duration: 0s;
	-webkit-transition-delay: .2s;
}
.example5:active span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: .2s;
}
.example5 span:before {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0;
}
.example5:active span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg);
	-webkit-transition-delay: 0, .2s;
}
.example5 span:after {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0;
}
.example5:active span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transition-delay: 0, .2s;
}
/*Mobile Menu End*/


/*Logo*/

#header{
	font-family: "Roboto", Arial, serif;
	font-size: 4em;
	font-weight: 700;
}
#precious{
	color:#ff0000;
}

/*Logo*/

.line__first {
  margin-top: 37px;
}

.menu {
  z-index: 9;
  width: 100%;
  
}

/* for the list to be horizontaly centered */
nav {
  display: inline-block;
  margin: 0 auto;
}

.menu_list {
  text-align: center;
  width: 100%;
  padding-left: 0px;
}
/* Animation keyframes for the drop down */
@keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 25px;
    animation-timing-function: ease-in;
  }
  to {
    top: 15px;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes drop {
  from {
    top: 0px;
  }s
  70% {
    top: 25px;
    -webkit-animation-timing-function: ease-in;
  }
  to {
    top: 15px;
    -webkit-animation-timing-function: ease-out;
  }
}

li {
  position: relative;
display:inline-block;
padding-left: 20px;
  }


#item a:hover {
  text-decoration: none;
  color: #ff0000;
  font-size: 1.5em;
  font-family: "Roboto",Arial,serif;
   

}
#item a {
  text-decoration: none;
  text-align: center;
  font-size: 1.3em;
  font-family: "Roboto",Arial,serif;
  color: black;
  cursor: pointer;
  
  }

.menu__list__item {
  opacity: 0;
  background:rgba(0,0,0,0.8);
  margin:5px;
  width:150px;
  text-align: center;
  height:10px;
  margin-left: -80px;
}

/*Animation classes to add to list-items that should be animated*/
.list--animation, .list--animation--delay1, .list--animation--delay2 {
  animation: drop 0.5s;
  -webkit-animation: drop 0.5s;
  animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-fill-mode: forwards;
  opacity: 1;
}

.list--animation--delay1 {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}

.list--animation--delay2 {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
} /*Full Mobile Menu End*/


/*Slider Start*/

.slider_container{
  
 width:100vw;
	height:100vh;
  margin: 0%;
  margin-top: 1%;
  background: url("img/overlay.jpg") no-repeat center center;
}
#slider{
 width:100vw;
	height:100vh;
  overflow: hidden;

}
#slider img{
	 width:100vw;
	height:100vh;
}
left1{
margin-left: 81.8%;
	z-index:5;
	margin-top:-5%;
	position: absolute;
	font-size: 3em;
	color:rgba(0,0,0,0.6);




}
.left2{margin-left: 80%;
	z-index:5;
	margin-top:-8.6%;
	position: absolute;
	font-size: 4em;
	color:rgba(0,0,0,0.6);
			cursor: pointer;


}
right1{margin-left: 86%;
		z-index:5;
		margin-top:-5%;
		position: absolute;
		font-size: 3em;
		color:rgba(0,0,0,0.6);

}

.right2{margin-left: 87%;
	margin-top:-10%;
		z-index:5;
		position: absolute;
		font-size: 4em;
		color:rgba(0,0,0,0.6);
				cursor: pointer;


}
.arrow_container{
	height:100vh;
	width:100vw;

}

li a{

	text-decoration: none;
	cursor: pointer;
	color: #000;
}
a:hover{

	text-decoration: none;
		cursor: pointer;

}





/* Chrome, Safari, Opera */
@-webkit-keyframes fade {
    from {color: rgba(0,0,0,0.7);}
    to {color: rgba(0,0,0,0.2);}
}

/* Standard syntax */
@keyframes fade {
    from {color:rgba(0,0,0,0.7);}
    to {color: rgba(0,0,0,0.2);}
}

/*Slider End*/


/*FancyBox*/

#pics{
	margin-left:50%;
	margin:10px;
}

.fancybox-effects-d{
	margin:2px;
}


/*Social Icons Start*/

.icon_container{
  margin: 0%;
  	cursor: pointer;

}


  .greenbox, .pinkBox{
	width:139px;
	height:32px;
	bottom:20px;
	float:right;
	z-index: 9;
	position:fixed;
}
.greenBox{
	right:5%;
	top:2%;
	background-color: green;
}
.pinkBox{
	right:5%;
	top:2%;
	background-color: rgba(70,70,70,0.2);
	opacity: 0;
}

#facebook:hover{
background: rgba(70,70,70,0.6);
}
#twitter:hover{
background: rgba(70,70,70,0.6);
}
#linkedin:hover{
background: rgba(70,70,70,0.6);
}
#google:hover{
background: rgba(70,70,70,0.6);
}



.redbox, .blueBox{

	width:100px;
	height:100px;
	bottom:10px;
	z-index: 9;
	position:fixed;
}
.redBox{
	right:5%;
	top:2%;
	background:url("../social%20icons/share_this.png") no-repeat center center;
opacity:0.6;
}
.blueBox{
	right:5%;
	top:2%;
	background:url("../social%20icons/share_this.png") no-repeat center center;
	opacity:0.6;
}


/*Social Icons End*/


/*Image Flip and Overlay Start*/



         
#text{
	
	background-color: fuchsia;
	z-index:0;
}
/*Image Flip and Overlay End*/


.thumbs2{
	opacity:0;
	width:0px;
	height:0px;
	z-index:-1;
}

.fancybox-effects-d{
	margin-left:5%;
	margin-top:5%;
}


/*Underline on hover*/

#underline:hover {
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: black;
	    width:0px;
	    height:0px;
    }
    to {background: black;
    width:5px;
	    height:1px;}
}

/* Standard syntax */
@keyframes myfirst {
    from {background: red;}
    to {background: yellow;}
}



/*Underline on hover*/

/**
 * FOOTER
 *
 * -------------------------------------------------------------------------------------------------
 */
FOOTER {
	position:absolute;
	width: 100%;
	background:rgba(255,255,255,1);
}
#footer_text{
	color: silver;
    font-size: 1em;	
}
.footer_wrapper {
	color: silver;
    margin: 0%;
	width: 100%;

}


@media (min-width:401px) and (max-width:760px){

.right2{margin-left: 87%;
	margin-top:-11.4%;
		font-size:3em;
		
}
.left2{
		font-size: 3em;
margin-left: 80%;
	margin-top:-9%;
}

#header{
	font-size: 3em;
}




}

@media(max-width:400px){

.right2{margin-left: 87%;
	margin-top:-17%;
		font-size:2.5em;
		
}
.left2{
		font-size: 2.5em;
margin-left: 80%;
	margin-top:-12.5%;
}

#header{
	font-size: 3em;
}




.slider_container_med{
	display:none
}

	
}

.slider_container_med{
	display:none
}
.slider_container_sm{
	display:none
}