* {
	box-sizing:border-box;
}

body {
	margin:0;
	font-size:100%;
	font-family: 'Noto Sans', sans-serif;
	min-width: 360px;
}

a {
	color:inherit;
	/*font-weight:bold;*/
	text-decoration:none;
	cursor: pointer;
}

a:hover {
	text-decoration:underline;
}

ol, ul {
    list-style: none;
}

hr {
	clear: both;
	height: 1px;
    border: 0;
	border-top: 1px solid #B1C1FC;
	margin: 0;
}

.invisible hr {
	background:none;
	border:none;
}


.container {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

h1, nav {
	font-family: 'Montserrat', sans-serif;
}

h1 {
	font-weight: bold;
}

.flex-parent {
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
}
.flex-child {
	flex:1 1 auto;
}
.flex-none {
	flex:none;
}


/*nav*/

header {
    background-color: rgba(177, 193, 252, 0.2);
    box-shadow: 0px 0px 0px 0px #B1C1FC;
    position: fixed;
    width: 100%;
    z-index: 10;
    min-width: 360px;

    transition: background-color 2s, box-shadow 2s;
  	-webkit-transition: background-color 2s, box-shadow 2s;

  	/*transition: all 2s;
  	-webkit-transition: all 2s;*/

}

.navbar {
    position: relative;
    height: 5rem;
}

.brand {
    float: left;
    left: 5%;
    text-align: center;
    padding-top: 1rem;
    position: absolute;
    z-index: 20;
}

.brand img {
	height: 50px;
}

.mobile-nav nav {
	padding-right: 5%;
    float: right;
}

.mobile-nav nav li {
    display: inline-block;
    padding-top: 1.8rem;
    padding-bottom: 0.2rem;
}

.mobile-nav nav li .link-text {
    color: #3F6EA6;
    font-size: 1rem;
    /*font-weight: bold;*/
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .2rem;

    transition: color 2s;
  	-webkit-transition: color 2s;
}

.mobile-nav nav li .link-text:hover {
	color: #E45755;
	font-weight: bolder;
	text-decoration: underline;

	transition: color .5s;
  	-webkit-transition: color .5s;
}

.mobile-nav nav li .active {
	font-weight: 900;
}

.header-height {
	height: 5rem;
}


/* Footer */
footer {
    height: 14rem;
    background-color: #B1C1FC;
    color: #3F6EA6;
    text-align: center;
    padding-top: 2rem;
    z-index: 10;
}

footer .footer-sm {
	width: 30px;
	margin: 0 10px;
}



/* scroll-down */
.scroll-down {
	opacity: 1;
	-webkit-transition: all .5s ease-in 3s;
	transition: all .5s ease-in 3s;
}

.scroll-down {
	position: absolute;
	bottom: 30px;
	left: 50%;
	width: 50px;
	height: 35px;
	background-color: #B1C1FC;
	background-size: 14px auto;
	border-radius: 5px;
	z-index: 3;
	margin-left: -25px;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	transform: scale(1);
}

.scroll-down:hover {
	background-color: #3F6EA6;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 9px);
    transform: rotate(-45deg);
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    border: 2px solid #E45755;
    border-width: 0 0 4px 4px;

}

/* scroll-up */
.scroll-up {
	opacity: 1;
	-webkit-transition: all .5s ease-in 3s;
	transition: all .5s ease-in 3s;
}

.scroll-top{
	display: none;
	position: fixed;
    /*margin: auto;*/
    height: 35px;
    width: 50px;
    background-color: #B1C1FC;
    background-size: 14px auto;
    border-radius: 5px;
    right: 5vw;
    bottom: 35px;
    cursor: pointer;
    overflow: hidden;
    animation: fadeIn 0.8s ease 0s 1 normal;
    z-index: 3;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	transform: scale(1)
}

.scroll-top:hover {
	background-color: #3F6EA6;
}

.scroll-up:before {
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 9px);
    transform: rotate(-45deg);
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    border: 2px solid #E45755;
    border-width: 4px 4px 0 0;
}

/* short cut */
.shortcut-btn {
	opacity: 1;
	position: absolute;
    top: calc(50% - 22px);
    left: calc(50% - 15px);
	-webkit-transition: all .5s ease-in 3s;
	transition: all .5s ease-in 3s;
}

.shortcut-btn:hover {
	text-decoration: none;
}

.short-cut {
	display: none;
	position: fixed;
    height: 35px;
    width: 50px;
    background-color: #B1C1FC;
    color: #E45755;
    font-size: 2em;
    background-size: 14px auto;
    border-radius: 5px;
    left: 5vw;
    bottom: 35px;
    cursor: pointer;
    overflow: hidden;
    animation: fadeIn 0.8s ease 0s 1 normal;
    z-index: 3;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	transform: scale(1);
}

.short-cut:hover {
	background-color: #3F6EA6;
}

.short-cut-content-box {
	display: none;
	width: 45%;
	max-width: 500px;
	position: fixed;
	padding: 10px;
    background-color: #B1C1FC;
    color: #3F6EA6;
    border: solid 1px #E45755;
    border-radius: 5px;
    left: 5vw;
    bottom: 80px;
    z-index: 3;
}

.short-cut-content-box h4 {
    color: #242424;
    margin: 0 10px;
}

.short-cut-content-box .shortcut-group a {
	text-align: center;
	padding: 10px;
}

.short-cut-content-box .shortcut-group a:hover {
	color: #E45755;
	font-weight: bold;
}



@media (max-width: 960px){
	.mobile-nav .menu-btn {
	    position: absolute;
	    top: 1.8rem;
	    right: 5%;
	    z-index: 2;
	    width: 2rem;
	    cursor: pointer;
	    -webkit-transition: opacity .25s ease;
	    transition: opacity .25s ease;
	    padding: 1rem;
	}
	.mobile-nav .menu-btn span {
	    background: #252525;
	    border: none;
	    height: 3px;
	    width: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    -webkit-transition: all .35s ease;
	    transition: all .35s ease;
	    cursor: pointer;

	    transition: background 2s;
  		-webkit-transition: background 2s;
	}
	.menu-btn span:nth-of-type(2) {
	    top: .6rem;
	}
	.menu-btn span:nth-of-type(3) {
	    top: 1.2rem;
	}

	.menu-btn:hover {
	    opacity: .7;
	}

	.menu-btn.active .top {
	    -webkit-transform: translateY(0.6rem) translateX(0) rotate(45deg);
	    transform: translateY(0.6rem) translateX(0) rotate(45deg);
	}
	.menu-btn.active .middle {
	    opacity: 0;
	}
	.menu-btn.active .bottom {
	    -webkit-transform: translateY(-0.6rem) translateX(0) rotate(-45deg);
	    transform: translateY(-0.6rem) translateX(0) rotate(-45deg);
	}

	.responsive-overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    width: 100%;
	    height: 0%;
	    opacity: 0;
	    visibility: hidden;
	    -webkit-transition: opacity .35s, visibility .35s, height .35s;
	    transition: opacity .35s, visibility .35s, height .35s;
	    overflow: hidden;
	}

	.responsive-overlay nav {
	    position: relative;
	    background: rgba(177, 193, 252, 0.9);
	    top: 11rem;
	    -webkit-transform: translateY(-50%);
	    transform: translateY(-50%);
	    font-size: 1.2em;
	    text-align: center;
	    float: none;
	    padding-right: 0;
	}

	.mobile-nav nav li {
	    display: block;
	    float: none;
	    width: 100%;
	    text-align: center;
	    padding: 1em 0;
	    /*background-color: #B1C1FC;*/
	}

	.responsive-overlay ul {
	    list-style: none;
	    padding: 0;
	    margin: 0 auto;
	    display: inline-block;
	    position: relative;
	    height: 100%;
	}

	.responsive-overlay.open {
	    opacity: 1;
	    visibility: visible;
	    height: 20rem;
	}
}

@media (max-width: 800px){
	.short-cut-content-box {
		width: 70%;
	}
}