/* ----- WEBSITE ----- */
/* Main - DEFAULT #052F61*/
* {
	transition: 0.5s;}

html, body {
	font-family: 'Open Sans', Arial, sans-serif;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	scroll-behavior: smooth;}

a {
	text-decoration: none;
	transition: 0.3s;
	color: #000000;}
	
p {
	font-family: 'Droid Serif', Times New Roman, serif;
	line-height: 1.5;}

h2 {
	color: #745B9D;}

#head {
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 800;}
	
	
/* Footnote */

.footnote {
	width: 100%;
	height: 150px;
	background-color: #F9F9F9;
	border-top: #CCCCCC solid thin;
	bottom: 0;
	padding: 20px 100px 50px 100px;
	font-size: 14px;}
	
.footnote #col1 {
	width: 20%;
	float: left;
	line-height: 2;}

.footnote #col1 a{
	color: #333333;
	transition: 0.5s;}

.footnote #col1 a:hover{
	color: #00B596;}

.footnote #col1 fab a{
	font-size: 14px;
	font-weight: normal;
	transition: 0.5s;}

.footnote #col1 .fab a:hover {
	color: #00B596;}

	

/* Mobile Navigation */


.nav {
	height: 100%;
	width: 0;
	background-color: #424656;
	overflow-x: hidden;
	z-index: 1;
	position: fixed;
	padding-top: 50px;
	transition: 0.5s;}

.nav a{
	padding: 10px 10px 10px 50px;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	width: 250px;
	transition: 0.5s;}

.nav a:hover {
	color: #80DC7D;}

.nav #btnclose {
	margin-top: -25px;
	margin-left: 200px;
	font-size: 18px;
	position: absolute;}

#btnopen {
	font-weight: 700;
	margin-top: 50px;
	margin-left: 100px;
	padding: 10px 15px;
	background-color: #424656;
	color: #ffffff;
	cursor: pointer;
	position: fixed;
	transition: 0.3s;}
	
#btnopen:hover {
	background-color: #ffffff;
	color: #424656;}
	

/* Home */

.welcome {
	height: 250px;
	padding: 200px 0 200px 0;
	background: #ffffff url(../img/bgwelcome.png) no-repeat fixed center;
	background-size: cover;
	text-align:center;}
	
.welcome #head {
	font-size: 90px;
	color: #052F61;}
	
.welcome p {
	font-size: 24px;
	margin: -5px;
	font-family: 'droid serif', Times New Roman, serif;
	color: #424656;}
	
.intro1 {
	height: 150px;
	padding: 75px 50% 100px 100px;
	background: #052F61 url(../img/markright.png) no-repeat right;
	color: #FFFfff;}
	
.intro2 {
	border-top: #cccccc solid thin;
	height: 150px;
	padding: 75px 100px 100px 50%;
	background: #005c8e url(../img/leamleft.png) no-repeat left top;
	color: #FFFfff;
	text-align: right;}
	
.intro1 #head, .intro2 #head {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 36px;
	font-weight: 800;
	color: #F9F871;}

.intro1 a, .intro2 a {
	font-weight: 700;
	color: #FFA5E2;}
	
.intro1 a:hover, .intro2 a:hover {
	color: #80DC7D;}
	
/* Content */

.top {
	position: fixed;
	width:100%;
	background-color: #fffff;
	height: 75px;}

.titlebar {
	height: 50px;
	padding: 50px 100px 0 215px;
	background-color: #ffffff;
	border-bottom: #cccccc solid thin;}
	
.titlebar #head {
	font-size: 32px;
	float: left;
	color: #052F61;}
	
.titlebar #jump {
	font-size: 14px;
	font-weight: 700;
	float: right;
	color: #052F61;
	margin-top: 20px;}
	
.titlebar #jump a{
	color: #052F61;
	padding: 5px 15px 5px 15px;}

.titlebar #jump a:hover {
	color: #00B596;}

.titlebar #jump #home {
	color: #ffffff;
	background-color: #052F61;}
	
.titlebar #jump #home:hover {
	color: #ffffff;
	background-color: #00B596;}
	
#web{
	display: !important;}

#mobi {
	display: none;}


/* Content - ABOUT ME */	
.aboutme {
	margin-top: 75px;
	background-color: #052F61;
	height: 375px;
	padding: 100px;}

.aboutme h1 {
	color: 	#F9F871;}

.aboutme p {
	color: 	#ffffff;
	width: 50%;}

.aboutme_mob {
	display: none;}

/* Content - CONNECT */
.connect {
	background-color: #E6EFFF;
	height: auto;
	padding: 75px 100px 75px 100px;}
	
.connect h1 {
	color: 	#052F61;
	text-align: center;}

.connect #tab {
	text-align: left;
	margin-left: 35%;
	padding: 15px;}

.connect #tab a:hover {
	color: #008AA0;}

.fab {
	font-size: 18px;
	margin-right: 10px;
	width: 20px;}

.fab:hover {
	color: #008AA0;}

/* Content - GALLERY */
.gallery {
	padding: 85px 100px 85px 100px;}

.gallery h1 {
	color: 	#052F61;
	text-align: center;}

.gallery #imgtab {
	width: 100%;}
	
.gallery img {
	width: 30%;
	padding: 15px;
	height: 300px;
	object-fit: cover;}
	
.gallery p, .connect p{
	text-align: center;
	margin-top: -20px;
	color: #745B9D;}

/* Content - ABOUT ME BG */	
#id1 {
	background: #052F61 url(../img/markright.png) no-repeat right;}
	
#id2 {
	background: #052F61 url(../img/leamright.png) no-repeat right;}

#topbtn {
	background-color: #A773B8;
	text-align: center;
	font-weight: 700;
	color: #ffffff;
	padding: 10px;
	display: none;
	z-index: 99999999;
	position: fixed;
	bottom: 40px;
	right: 40px;
	cursor: pointer;
	transition: 0.5s;}
	
#topbtn:hover {
	color: #A773B8;
	background-color: #ffffff;}
	
	









	
/* ----- MOBILE ----- */
/* Main - DEFAULT #052F61*/
@media screen and (max-width: 1200px){
/* Footnote */
.footnote {
	padding: 20px 50px 20px 50px;}
	
.footnote #col1 {
	width: 30%;}


/* Mobile Navigation */

#btnopen {
	margin-top: 25px;
	margin-left: 75px;}
	
/* Home */

.welcome #head {
	font-size: 80px;
	color: #052F61;}
	
.welcome p {
	font-size: 22px;}
	
.intro1 {
	padding-left: 50px;}
	
.intro2 {
	padding-right: 50px;}
	
.intro1 #head, .intro2 #head {
	font-size: 32px;}
	
.intro1 a, .intro2 a {
	font-weight: 700;
	color: #FFA5E2;}
	
.intro1 a:hover, .intro2 a:hover {
	color: #80DC7D;}
	
/* Content */

.top {
	height: 50px;}

.titlebar {
	height: 75px;
	padding: 25px 0 0 0;}
		
.titlebar #head {
	padding-left: 175px;
	width: 100%;}
	
.titlebar #jump {
	background-color: #F9F9F9;
	width: 100%;
	padding: 5px;
	margin-top: 5px;
	text-align: center;
	border-bottom: thin solid #CCC;}
	
.titlebar #jump a{
	padding: 0 40px;}

/* Content - ABOUT ME */	
.aboutme {
	padding-left: 50px;}
	
.aboutme_mob {
	display: none;}

/* Content - CONNECT */
.connect {
	padding: 90px 100px;}
	
.connect #tab {
	margin-left: 25%;}

/* Content - GALLERY */

.gallery {
	padding-left: 50px;
	padding-right: 50px;}

.gallery #imgtab {
	padding: 0 0 0 5%;}

.gallery img {
	padding: 20px;
	width: 40%;}
	
/* Content - ABOUT ME BG */	
#id1 {
	background: #052F61 url(../img/markright.png) no-repeat right;}
	
#id2 {
	background: #052F61 url(../img/leamright.png) no-repeat right;}

#topbtn {
	bottom: 20px;
	right: 20px;}}
	












/* ----- MOBILE ----- */
/* Main - DEFAULT #052F61*/
@media screen and (max-width: 770px){
		
	
/* Footnote */

.footnote {
	padding-bottom: 100px;}


.footnote #col1 {
	width: 45%;}

.footnote i {
	font-size: 13px;}


/* Mobile Navigation */

#btnopen {
	width: 100%;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;}	

/* Home */

.welcome #head {
	font-size: 70px;
	color: #052F61;}
	
.welcome p {
	font-size: 20px;}
	
.intro1 {
	height: 500px;
	padding: 0 30px;
	background: #052F61 url(../img/mobmark2.png) repeat-x top center;
	text-align: center;}
	
.intro2 {
	height: 500px;
	padding: 0 30px;
	background: #005c8e url(../img/mobleam2.png) repeat-x  top center;
	text-align: center}

.intro1 #head, .intro2 #head {
	font-size: 28px;
	padding-top: 215px;}
	
.intro1 a, .intro2 a {
	font-weight: 700;
	color: #FFA5E2;}
	
.intro1 a:hover, .intro2 a:hover {
	color: #80DC7D;}
	

	
/* Content */

.top {
	height: 75px;}

.titlebar {
	height: 75px;
	padding: 25px 0 0 0;}
		
.titlebar #head {
	padding-left: 0;
	padding-top: 10px;
	text-align: center;
	font-size: 24px;}
	
/*.titlebar #jump {
	display: block;}*/

.titlebar #jump a{
	padding: 2px 0;
	width: 50%;
	float: left;
	font-size: 13px;}


/* Content - ABOUT ME */	
.aboutme {
	height: 150px;}
	
#web{
	display: none;}

#mobi {
	display: inline-block;}

.aboutme_mob {
	background-color: #ffffff;
	display: block;
	padding: 90px 35px;
	text-align: center;}
	
.aboutme_mob h1 {
	color: 	#052F61;}

.aboutme_mob p {
	color: 	#745B9D;}	
	

/* Content - CONNECT */
.connect {
	padding: 80px 30px;}
	
.connect #tab {
	margin-left: 0;}

/* Content - GALLERY */

.gallery {
	padding-left: 30px;
	padding-right: 30px;}

.gallery #imgtab {
	padding: 0 0 0 0;}

.gallery img {
	padding: 20px;
	height: 250px;
	width: 90%;}
	

/* Content - ABOUT ME BG */	

#id2 {
	background: #052F61 url(../img/leamright.png) no-repeat right top;}

#topbtn {
	bottom: 20px;
	right: 20px;
	width: 75px;
	padding: 5px;
	font-size: 14px;}}

















/* ----- MOBILE ----- */
/* Main - DEFAULT #052F61*/
@media screen and (max-width: 480px){
		
	
/* Footnote */

.footnote {
	padding-bottom: 100px;}

.footnote #col1 {
	width: 100%;}
	
.footnote i {
	display: none;}


/* Mobile Navigation */

#btnopen {
	width: 100%;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;}	

/* Home */

.welcome #head {
	font-size: 50px;
	color: #052F61;}
	
.welcome p {
	font-size: 16px;}
	
.intro1 {
	height: 500px;
	padding: 0 30px;
	background: #052F61 url(../img/mobmark2.png) repeat-x top center;
	text-align: center;}
	
.intro2 {
	height: 500px;
	padding: 0 30px;
	background: #005c8e url(../img/mobleam2.png) repeat-x  top center;
	text-align: center}

.intro1 #head, .intro2 #head {
	font-size: 24px;
	padding-top: 215px;}
	
.intro1 a, .intro2 a {
	margin-top: 100px;
	font-weight: 700;
	color: #FFA5E2;}
	
.intro1 a:hover, .intro2 a:hover {
	color: #80DC7D;}
	

	
/* Content */

.top {
	height: 75px;}

.titlebar {
	height: 75px;
	padding: 25px 0 0 0;}
		
.titlebar #head {
	padding-left: 0;
	padding-top: 10px;
	text-align: center;
	font-size: 22px;}
	
/*.titlebar #jump {
	display: block;}*/

.titlebar #jump a{
	padding: 2px 0;
	width: 50%;
	float: left;
	font-size: 13px;}


/* Content - ABOUT ME */	
.aboutme {
	height: 150px;}
	
#web{
	display: none;}

#mobi {
	display: inline-block;}

.aboutme_mob {
	background-color: #ffffff;
	display: block;
	padding: 90px 35px;
	text-align: center;}
	
.aboutme_mob h1 {
	color: 	#052F61;}

.aboutme_mob p {
	color: 	#745B9D;}	
	

/* Content - CONNECT */
.connect {
	padding: 80px 30px;}
	
.connect #tab {
	margin-left: 0;}

/* Content - GALLERY */

.gallery {
	padding-left: 30px;
	padding-right: 30px;}

.gallery #imgtab {
	padding: 0 0 0 0;}

.gallery img {
	padding: 20px;
	height: 250px;
	width: 90%;}
	

/* Content - ABOUT ME BG */	


#id1 {
	background: #052F61 url(../img/markright.png) no-repeat center;}

#id2 {
	background: #052F61 url(../img/leamright.png) no-repeat center top;}

#topbtn {
	bottom: 20px;
	right: 20px;
	width: 75px;
	padding: 5px;
	font-size: 14px;}}







/* ----- EMBEDDED FONTS ----- */
@font-face {
	font-family: 'Droid Serif';
	src:url(../font/DroidSerif-Regular.ttf);}
	
@font-face {
	font-family: 'Droid Serif';
	font-weight: bold;
	font-weight: 700;
	src:url(../font/DroidSerif-Bold.ttf);}

@font-face {
	font-family: 'Droid Serif';
	font-style: italic;
	src:url(../font/DroidSerif-Italic.ttf);
	src:url(../font/DroidSerif-BoldItalic.ttf);}

@font-face {
	font-family: 'Open Sans';
	src:url(../font/OpenSans-Regular.ttf);}

@font-face {
	font-family: 'Open Sans';
	font-weight: 700;
	font-weight: bold;
	src:url(../font/OpenSans-Bold.ttf);}

@font-face {
	font-family:'Open Sans';
	font-weight:800;
	src:url(../font/OpenSans-ExtraBold.ttf);}

@font-face {
	font-family: 'Open Sans';
	font-style:italic;
	src:url(../font/OpenSans-ExtraBoldItalic.ttf);
	src:url(../font/OpenSans-BoldItalic.ttf)
	src:url(../font/OpenSans-Italic.ttf);
	src:url(../font/OpenSans-LightItalic.ttf);
	src:url(../font/OpenSans-SemiBoldItalic.ttf);}