/* pop out function */
.popout
{
    display: none;
    position: fixed;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    z-index: 3000;
}

.content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    margin: auto;
    max-height: 100%;
    overflow: auto;
}
@media (min-width: 1200px) {
	.content {
	    width: 80%;
	}
}
@media (max-width: 820px) {
	.content {
	    width: 100%;
	}
}

.middle-window {
    width: 100%;
    height: 100%;
    display: table;
}

.middle-window>div {
    display: table-cell;
    vertical-align: middle;
    padding: 0px 15px;
}

.redLineTop {
	height: 100%;
	width:25px;
	position: absolute;
	bottom: 3px;
	left: 0px;
	border-top: solid 3px red;
}

.verticalWhiteLine {
	height: 100%;
	border-right: solid 1px white;
}

.whiteLink {
	text-decoration:none;
	color:white;
	cursor:pointer;
}

.whiteLink:hover {
	text-decoration:underline;
	color:white;
}

.whiteLink:visited {
	text-decoration:none;
	color:white;
}

.verticalLine {
	position:relative
}

.verticalLine:before {
	content: '';
height: 10px;
width: 50%;
position: absolute;
bottom: -20px;
left: 0px;
border-right: solid 3px gray;
}


.scrollButton
{
	position:fixed;
	bottom:50px;
	right:30px;
	z-index:16;
	font-size:24px;
	text-shadow: 0px 0px 8px white;
	cursor:pointer;
	-webkit-animation-name: fade; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite;
    animation-name: fade;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.fullHeight {
	height: 100%;
}

.middleWindow {
	width:100%;
	height:100%;
	display: table;
}

.middleWindow>div {
	display: table-cell;
	vertical-align: middle;
	padding:0px 15px;
}

.middleElement
{
	z-index:15;
	text-align:center;
	padding:0 50px;
	display:table;
}

.middleElement>span {
	display: table-cell;
	vertical-align: middle 
}

.verticalGradient
{
	border: none #777; border-width: 0 1px;
	position: relative;
	padding:10px 0;

}

.verticalGradient:before {left: 0; }
.verticalGradient:after {right: 0; }

.verticalGradient:before {
	content: '';
	border : 0;
	height : 200px; /*your own value to suit your content*/
	width : 1px;
	position: absolute;
	background-image: -webkit-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
	background-image: -moz-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
	background-image: -ms-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
}

.verticalGradient:first-child:before {
	content: '';
	border : 0;
	height : 200px; /*your own value to suit your content*/
	width : 0px;
	position: absolute;
	background-image: -webkit-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
	background-image: -moz-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
	background-image: -ms-linear-gradient(top, #FFFFFF, #777, #FFFFFF);
}

@keyframes fade {
    0%   {opacity: 1;}
    50%  {opacity: 0.5;}
    100% {opacity: 1;}
}

@-webkit-keyframes fade {
    0%   {opacity: 1;}
    50%  {opacity: 0.5;}
    100% {opacity: 1;}
}