@import url('https://fonts.googleapis.com/css?family=Anton');

@font-face{
	font-family: 'Poppins';
	src:url('fonts/Poppins/Poppins-Regular.ttf');
}


*{
	font-family: 'Poppins', sans-serif, verdana, arial;
	font-size: 14px;
}

ul a{
	text-decoration:none;
	color:black;
}

html{
	width:100%;
	min-height:100%;
	height:100%;
}

#header{
	display:inline-block;
	margin-left: 0px;
	/*background:#6d6d6d;*/
	background: rgba(10,10,10,0.8);
	border: 2px solid #6d6d6d;
	border-radius:8px;
	box-shadow: 1px 1px 10px black;
	width:100%;
}

#navbar{
	vertical-align: middle;
	margin-top:5px;
}

#navbar_list{display:none;}

#navbar_list li{
	display:inline;
	list-style: none;
	margin-right: 15px;
	letter-spacing: 3px;
	vertical-align: middle;
	padding:5px;
	border-radius:7px;
	color:white;
}
#navbar_list li{transition:all 0.5s;}
#navbar_list li:hover{box-shadow:0 0 10px white;}

#selected{
	box-shadow:0 0 10px white;
	color:gray; 
}

.my_name{
	position: absolute;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
    width:70%;
}

.my_name h1{
	font-size:48px; 
	font-family:'Anton';
	color:black;
	margin:0;
	margin-top:20px;
}

#my_face_selected{
	background: url("images/face.jpg");
	background-size: cover;
	background-position:-1px -7px;
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:100%;
	background-color:black;
	margin-right:15px;
	margin-top:5px;	
	margin-bottom:5px;
	border:2px solid white;
	transition: all 0.5s;
	box-shadow: 0 0 10px white;
	transform: scale(1.1, 1.1);
}


#my_face{
	background: url("images/face.jpg");
	background-size: cover;
	background-position:-1px -7px;
	display:inline-block;
	width:50px;
	height:50px;
	border-radius:100%;
	background-color:black;
	margin-right:15px;
	margin-top:5px;	
	margin-bottom:5px;
	border:2px solid #6d6d6d;
	box-shadow: 0 0 7px black;
	transition: all 0.5s;
}

#my_face:hover{
	border-color:white;
	box-shadow: 0 0 10px white;
	transform: scale(1.1, 1.1);
}

#big_face{
	max-width:500px;
	height:auto;
}

#social_icons{
	width:145px;
	text-align:center;
	margin:auto;
}
#social_icons a img{
	width:30px;
	margin: 0 15px 0 0;
	border-radius: 15px;
	box-shadow: 0px 2px 10px black;
}
#social_icons a:last-child img{
	margin-right:0;
}

#translucent{opacity: 0.7;}
#centered_container{width:98%; margin:auto;}

#background{
	/*
	background-image: url("http://hd.1001christianclipart.com/wp-content/uploads/2014/08/stripe-background.jpg");
	background-color: gray;
	background-size: cover;
	background-attachment: fixed;
	*/
	/*
	background: white; /* For browsers that do not support gradients 
    background: -webkit-linear-gradient(right bottom, gray, white); /* For Safari 5.1 to 6.0 
    background: -o-linear-gradient(top left, gray, white); /* For Opera 11.1 to 12.0 
    background: -moz-linear-gradient(top left, gray, white); /* For Firefox 3.6 to 15 
    background: linear-gradient(to top left, rgba(210,210,210, 1), rgba(0,0,0,0)); /* Standard syntax (must be last) 
    background-repeat: no-repeat;
    background-size:contain;
    */

    background-image: url("images/Black Sand (25).jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#fullscreen_video{
	object-fit: cover;
	min-height:100%;
	min-width:100%;
	transform: translateX(-50%);
	box-shadow:0 0 10px gray;
	position:fixed;
}

.fullscreen{width:100%;height:100%;}

#enter_button, #contact_button{
	text-decoration:none;
	border: 2px solid black;
	padding:10px;
	color:white;
	background-color:rgba(0,0,0,0.6);
	transition: all 0.75s;
	width:170px;
	height:20px;
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#contact_button{top:120px;}

#enter_button:hover, #contact_button:hover{
	background-color:rgba(0,0,0,0);
	color:gray;
	border-color:gray;
}

.home_icons{
	position: absolute;
    top:85%;
    left: 0;
    right: 0;
    margin: auto;
}

.no_gap{
	padding:0;
	margin:0;
}

.full_height{height:100%; margin:auto;}
.half_heigh{height:50%; margin:auto;}

h1{
	font-size:24px; 
	/*color:#3a3a3a;*/
}

.clear{clear:both;}
.right{float:right;}
.left{float:left;}

.inl_block_50{
	display:inline-block;
	width:49%;
}

.text_left{text-align: left;}
.text_centered{text-align:center;}
.align_top{vertical-align: top;}
.align_middle{vertical-align: middle;}
.align_center{margin:auto}

.height_cap{max-height: 225px;}
.height_large{height: 200px;}
.height_medium{height: 150px;}
.height_small{height: 100px;}

.scroll{overflow:auto;}

.resize{resize:both;}
.code{
	background-color:white;
	resize:both;
}

.shadow{
	box-shadow: 0px 1px 6px #3a3a3a;
}

.box{
	padding:10px;
	background-color:white;
}

.card{
	box-shadow: 0px 3px 10px black;
	padding-left:10px;
	padding-right:10px;
	padding-top:4px;
	padding-bottom:4px;
	border-radius:8px;
	background: white;
}

.translucent{background:rgba(255,255,255,0.85);}
form span{display:block;}
.no_display{display:none;}
.error{color:red;}
#message_sent{}

sup{line-height: 0;}

br{
	clear:both;
}

.button{
	/*
	border: 2px solid black;
	border-radius: 0px;
	padding:5px;
	color:black;
	background-color:rgba(0,0,0,0.3);
	transition: all 0.5s;
	text-decoration:none;
	*/
	text-decoration: none;
	border: 2px solid black;
	padding:10px;
	color:white;
	background-color:rgba(0,0,0,0.7);
	transition: all 0.75s;
}
.button:hover{
	border: 2px solid gray;
	background-color:white;
	color:gray;
	cursor:pointer;
}

.green_button{
	border:1px solid black;
	border-radius:5px;
	background-color:green;
	text-decoration:none;
	padding:5px;
	color:white;
}

/* [class*="col_"]{margin-bottom:10px;} */
.margin_bottom{margin-bottom:10px;}

/* -------- menu icon -------------*/
.menu_icon {
	position:relative;
    display: inline-block;
    cursor: pointer;
 	margin-left:10px;
 	margin-top:10px;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 4px) ;
    transform: rotate(-45deg) translate(-8px, 4px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -6px) ;
    transform: rotate(45deg) translate(-8px, -6px) ;
}


/* -------- dropdown menu -------- */
.dropdown{
	display:none;
	position:absolute;
	min-width: 150px;
	box-shadow: 0 1px 10px black;
	background-color:white;
	opacity:1.0;
	z-index: 1;
}

.dropdown a{
	color:#6d6d6d;
	padding:10px 10px;
	text-decoration: none;
	display:block;
	border-bottom:1px solid #6d6d6d;
}

.dropdown a:hover{color:black;}
.show{display:block;}



/* -------------------------------------------*/
/* Responsive Styling */

/* Mobile first */
.row{clear:both;display:block;}
.row::after{clear: both; display:block;}
[class*="col_"]{width:100%; float:left;padding-bottom:15px;}

.video_wrapper{width:100%;}
video{
	max-width:100%;
	height:auto;
}

img {
	width:100%;
	height:100%;
}

input{margin-bottom:10px; padding:0; width:100%;}

.message_input{width:100%; padding:0;}


/* Tablets */
@media only screen and (min-width: 600px){
	[class*="col_"]{float:left; display:inline-block;}
	.col_1{width:24.9%;}
	.col_2{width:49.9%;}
	.col_3{width:74.9%;}
	.col_4{width:99.9%;}

	.height_cap{max-height: 250px;}
	.height_large{height: 400px;}
	.height_medium{height: 200px;}
	.height_small{height: 100px;}

	.video_wrapper, img{margin-left:5%; margin-right:5%; width:95%;}
	video{
	/* height:100%; */
	max-height:400px;
	}
	
	.menu_icon{display:none;}
	#navbar_list{display:block;}
	.margin_bottom{margin-bottom:0px;}

	.card{
		box-shadow: 0px 3px 10px black;
		padding-left:20px;
		padding-right:20px;
		padding-top:8px;
		padding-bottom:8px;
		border-radius:8px;
		background: white;
	}
	.translucent{background:rgba(255,255,255,0.85);}
	#big_face{margin-left:5%; margin-right:5%;}

	input{margin-bottom:10px; padding:0; width:70%;}

	.message_input{width:70%; padding:0;}
}


/* Desktop */
@media only screen and (min-width: 960px){
	[class*="col_"]{float:left; display:inline-block;}
	.col_1_large{width:24.9%;}
	.col_2_large{width:49.9%;}
	.col_3_large{width:74.9%;}
	.col_4_large{width:99.9%;}
	
	.height_cap{max-height: 290px;}

	.video_wrapper{margin-left:0; margin-right:0; width:100%;}
	video{
	max-height:400px;
	}

	.menu_icon{display:none;}
	#navbar_list{display:block;}
	.margin_bottom{margin-bottom:0px;}
}