html { 
  background: url('Untitled-7.jpg') no-repeat left top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    color: #666;
}

h1, h2, h3, h4 {
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6, strong {
    color: 
    #666;
}

h1, h2, h3, h5, h6, pre, code, address, caption, cite, code, em, strong, th, figcaption {
    font-size: 1.9em;
    font-weight: normal;
    font-style: normal;
}

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

.navbar-collapse.collapse.in {
  display: block!important;
}



#navbarNav .nav-item {
	text-transform: uppercase;
	font-size:0.9vw;
}

.bg-dark {
	background-color: #222222 !important;
}

.container {
  width: 100%;
}

.right {
  float: right;
  width: 45%;
  margin-right: -100px;
  
  border: 1px solid #aaa;
  box-sizing: border-box;
  background:rgba(255,255,255,.8);
  border-radius: 25px;
  padding: 20px;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
  box-shadow: 0 0 3px #ccc;
}

.topnote {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #CFCFCF;
}

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
    background-color: #222;
    border-color: #222;
	color: #fff;
	width: 100px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #666;
    border-color: #666;
	color: #fff;
}

.messages {
    font-size: 14px;
    line-height: 1.5;
	position: relative;
}

p {
    margin-bottom: 18px;
}

#letter p {
	margin-bottom: 9px;
}

.scrolls {
  padding: 20px;
  overflow:hidden;
}

.message {
font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
padding-bottom: 50px;
}

.message p, .message div {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.message h1 {
    font-size: 16px;
    margin-bottom: 0px;
    line-height: 1.35;
    padding-bottom: 5px;
}

.message p.author {
    font-size: 14px;
    color: 
    #999;
}

#messages #mask {
    position: absolute;
    z-index: 1;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,1) 92%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 92%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 92%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 92%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 92%,rgba(255,255,255,1) 100%);
    pointer-events: none;
    bottom: 0;
    width: 100%;
    height: 200px;
}

#bshare {
	width: 150px!important;
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 767px) {
/* STYLES GO HERE */
	.right {
		width: 100%;
		background:rgba(255,255,255,0.8);
		margin-right: 0!important;
		margin-top: 20px;
	}
	
	html {
		background: none;
	}
	
	#mask {
		display:none;
	}
	
	.bsocket {
		width: 100%!important;
		clear: both;
		padding-bottom: 10px;
		text-align: center!important;
	}
	
	#cssmenu ul {
		padding-left:0px!important;
	}
	
	#cssmenu > ul > li > a {
		padding: 14px;
	}
	
	#mright {
		padding-top:50px;
	}
	.topnote h1 {
		font-size:1.9em!important;
	}
	.nav-link {
		font-size:1.5em!important;
	}
	.left-panel {
		width:100%;
		height:auto;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
	.right {
		margin-top:30px;
		width: 80%;
		background:rgba(255,255,255,0.8);
	}
	
	#mask {
		display:none;
	}
	.nav-link {
		font-size:2em!important;
	}
	.left-panel {
		height: 100%;
		width: 650px;	
	}
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1025px) {
/* STYLES GO HERE */
	.right {
		margin-top:50px;
	}
	
	#intro {
		margin-top:200px;
	}
	
	#mask {
		display:inline-block;
	}
	.left-panel {
		height: 100%;
		width: 750px;	
	}
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
	.right {
		margin-top:80px;
	}
	
	#intro {
		margin-top:300px;
	}
	
	#mask {
		display:inline-block;
	}
}

.marq {
	width: 100%;
	background-color: #eee;
	padding: 10px 10px 10px 10px;
	font-size:1.2em;
	color: #de0084;
}

#bg {
	background-image: url('banner3c.jpg');
	background-size: cover;
	height: 76vh;
}

.left-panel {
	float: left;
	background-color:rgba(230, 230, 230, 0.3);
}

.banner-btn {
	padding-left: 50px;
}

.left-panel a:hover img {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}




p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom:2px;
	font-weight:bold;
	background-color: #eee !important;
    padding: 10px;
	font-size:1.2em;
}
}

/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
    background-color: #ddd;
}

/* Unicode character for "plus" sign (+) */
p.accordion:after {
    content: '\2795'; 
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
    content: "\2796"; 
}

/* Style the element that is used for the panel class */

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

.foot {
	background-color: #efeee7;
	padding-bottom: 20px;
	padding-top: 20px;
}

.custom-head {
	background-color: #de0084;
	color: #fff;
	padding: 10 10 10 10;
}

.download {
		padding-top:20px;
		padding-bottom: 20px;
}

.download p, li  {
	font-size: 1.2em;
}