*,*:before,*:after { box-sizing:inherit; }
html { box-sizing:border-box; line-height:1.15; -webkit-text-size-adjust:100%; }
body { margin:0; font-size:16px; font-size:1rem; line-height:1.5; color:#565975; }
a { background-color:transparent; color:#565975; text-decoration:none; }
a:hover, a:active, a:focus { outline:0; }
p { margin:0 0 1em; }
p:last-child { margin:0; }
img {height:auto; max-width:100%; border-style:none; }

/* CUSTOM STYLES */
body {
	position:relative;
	font-family:'Roboto', sans-serif;
	overflow-x:hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family:'Playfair Display';
	margin:0;
}

.flex { display:flex; flex-wrap:wrap; }
.flex-half > div:first-child { flex-basis:40%; }
.flex-half > div:last-child { flex-basis:60%; }
#who .flex-half:last-child > div:first-child { flex-basis:60%; }
#who .flex-half:last-child > div:last-child { flex-basis:40%; }
.flex-third > a { display:flex; flex-basis:calc(33.333333% - 40px); }
.flex-third > a > div { width:100%; }
.ac { align-items:center; }
.jcc { justify-content:center; }
.jsb { justify-content:space-between; }

.container {
	width:100%;
	margin:0 auto;
	padding:0 30px;
}

.c-1600 { max-width:1600px; }
.c-1400 { max-width:1400px; }
.c-1200 { max-width:1200px; }

.blue { color:#315085; }
.green { color:#3c9c4a; }
.yellow { color:#e6a824; }
.light { color:#ccc; }
.dark { color:#2c304b; }

.bg-image {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:url('img/bg.jpg') no-repeat center center #f1f1f1;
	background-size:cover;
	-webkit-animation-name:bgmove;
	animation-name:bgmove;
    -webkit-animation-duration:30s;
    animation-duration:30s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    animation-timing-function:linear;
    -webkit-animation-delay:0s;
    animation-delay:1s;
    z-index:-1;
}

@-webkit-keyframes bgmove { 0% { transform:scale(1); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }
@keyframes bgmove { 0% { transform:scale(1); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }

.open .site {
	margin-left:300px;
}

.open .main-nav {
	transform:translateX(0);
}

.site {
	position:relative;
	transition:all 0.5s ease;
}

.site-header {
	display:flex;
	align-items:center;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	padding:0 20px;
	height:200px;
}

.logo {
	padding:20px;
	text-align:center;
	font-size:4em;
}

.main-nav {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:300px;
	background:#2c304b;
	color:#fff;
	z-index:99;
	transform:translateX(-100%);
	transition:all 0.5s ease;
}

.nav {
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
}

	.nav li a {
		display:block;
		padding:20px;
		border-top:1px solid rgba(255,255,255,0.15);
		color:#fff;
		transition:all 0.5s ease;
	}

		.nav li a:hover {
			background:rgba(255,255,255,0.1);
		}

	.nav i {
		width:30px;
		text-align:center;
		color:#565975;
		transition:all 0.5s ease;
	}

		.nav li a:hover i {
			color:#fff;
		}

.menu {
  border:none;
  outline:none;
  background:#fff;
  box-shadow:0 10px 20px rgba(44,48,75,0.15);
  color:#2c304b;
  cursor:pointer;
  padding:0;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  font-size:1.25em;
  transition:all 0.5s ease;
}

.site-content, .content-area {
	min-height:100vh;
}

.content-section {
	padding-top:5%;
	padding-bottom:5%;
	margin-bottom:10%;
}

.main-area {
	width:100%;
}

	.main-area h2 {
		position:relative;
		display:inline-block;
		color:#2c304b;
	}

		.main-area h2::before {
			position:absolute;
			top:50%;
			left:50%;
			text-align:center;
			color:rgba(44,48,75,0.05);
			font-family:'Roboto';
			font-size:5em;
			line-height:1;
			text-shadow:none;
			transform:translate(-50%,-50%);
			z-index:1;
		}

		.text-phd::before { content:'PhD.'; }
		.text-why::before { content:'Why?'; }
		.text-who::before { content:'Who?'; }
		.text-services::before { content:'Services'; }
		.text-fees::before { content:'Fees'; }
		.text-con::before { content:'Safe'; }
		.text-find::before { content:'Find'; }

		.main-area h2 span {
			position:relative;
			z-index:2;
		}

.site-title {
	flex-basis:100%;
	padding:80px 20px;
	font-size:2em;
	line-height:1.2;
}

.main-top {
	font-size:1.75em;
	line-height:1.2;
	text-align:center;
	margin-bottom:20%;
}

	.main-top h2 {
		position:relative;
	}

		.main-top h2::after {
			position:absolute;
			top:150%;
			left:50%;
			width:1px;
			height:300%;
			background:#2c304b;
			content:'';
		}

.main-body {
	font-size:1.125em;
}

.main-content,
.main-img {
	position:relative;
	z-index:2;
}

.main-box {
	position:relative;
	box-shadow:0 5px 10px rgba(44,48,75,0.15);
}

.main-box .main-content {
	background:#fff;
	padding:5%;
}

#why .main-box .main-content { padding:10% 5%; }

.main-img {
	background:url('img/img-1.jpg') no-repeat center center #fff;
	background-size:cover;
}

#who .main-img { background-image:url('img/img-bio.jpg'); }
#who .main-body:last-child .main-img { background-image:url('img/bg-vector-1.png'); }
#fees .main-img { background-image:url('img/img-5.jpg'); }
#con .main-img { background-image:url('img/img-3.jpg'); }
#map .main-img { background-image:none; }

.main-img iframe {
	width:100%;
	height:100%;
}

.box {
	position:relative;
	background:#fff;
	margin:20px;
	padding:40px;
	box-shadow:0 5px 10px rgba(44,48,75,0.15);
	transition:all 0.5s ease;
}

	.box::before,
	.box::after,
	.main-box::before,
	.main-box::after {
		position:absolute;
		width:50%;
		height:50%;
		content:'';
		z-index:-1;
	}

	.box::before {
		top:-12.5px;
		left:-12.5px;
	}

	.box::after {
		bottom:-12.5px;
		right:-12.5px;
	}

	.main-box::before {
		top:-50px;
		left:-50px;
	}

	.main-box::after {
		bottom:-50px;
		right:-50px;
	}

	.main-box::before,
	.main-box::after {
		z-index:1;
	}

.boxes a:nth-child(1) .box::before, .box-blue::before { background:#315085; }
.boxes a:nth-child(1) .box::after, .box-yellow::after { background:#315085; }
.boxes a:nth-child(2) .box::before, .box-green::before { background:#3c9c4a; }
.boxes a:nth-child(2) .box::after, .box-blue::after { background:#3c9c4a; }
.boxes a:nth-child(3) .box::before, .box-yellow::before { background:#e6a824; }
.boxes a:nth-child(3) .box::after, .box-green::after { background:#e6a824; }

.boxes a:nth-child(1) .box:hover { box-shadow:0 40px 80px rgba(49,80,133,0.5); }
.boxes a:nth-child(2) .box:hover { box-shadow:0 40px 80px rgba(60,156,74,0.5); }
.boxes a:nth-child(3) .box:hover { box-shadow:0 40px 80px rgba(230,168,36,0.5); }

.box i {
	display:block;
	font-size:2.5em;
	margin-bottom:20px;
}

.boxes a:nth-child(1) .box i { color:#315085; }
.boxes a:nth-child(2) .box i { color:#3c9c4a; }
.boxes a:nth-child(3) .box i { color:#e6a824; }

.main-content h4 {
	position:relative;
	font-family:'Roboto';
	text-transform:uppercase;
	padding-left:50px;
	margin-bottom:40px;
}

	.main-content h4::before {
		position:absolute;
		top:50%;
		left:0;
		width:40px;
		height:2px;
		background:#2c304b;
		content:'';
	}

.services {
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	list-style:none;
}

	.services li {
		position:relative;
		flex-basis:calc(50% - 40px);
		padding:10px 20px 10px 2em;
	}

		.services li::before {
			position:absolute;
			top:10px;
			left:0;
			font-family:'Font Awesome 5 Free';
			font-weight:900;
			content:'\f00c';
		}

#myBtn {
  display:none;
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:98;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.75);
  box-shadow:0 10px 20px rgba(44,48,75,0.15);
  color:#2c304b;
  cursor:pointer;
  padding:0;
  width:40px;
  height:40px;
  line-height:40px;
  text-align:center;
  border-radius:50%;
  font-size:1.5em;
  transition:all 0.5s ease;
}

#myBtn:hover {
  background-color:#2c304b;
  color:#fff;
}

.blue { background:#315085; color:#fff; }
.green { background:#3c9c4a; color:#fff; }
.yellow { background:#e6a824;	color:#fff; }

.blue h2, .green h2, .yellow h2 { color:#fff; }

.footer {
	position:relative;
	padding:20px 40px;
	background:#2c304b;
	color:#fff;
	z-index:99;
}

	.footer p {
		margin:0;
	}

	.footer a {
		color:#fff;
	}

.zoomIn {
    -webkit-animation:zoomIn 2s;
    animation:zoomIn 2s;
    -webkit-transform:scale(0,0); 
    transform:scale(0,0);
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@-webkit-keyframes zoomIn { 100% { -webkit-transform:scale(1,1); } }
@keyframes zoomIn { 100% { transform:scale(1,1); } }

.fadeIn {
    -webkit-animation:fadeIn 4s;
    animation:fadeIn 4s;
    -webkit-opacity:0; 
    opacity:0;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

@-webkit-keyframes fadeIn { 100% { -webkit-opacity:1; } }
@keyframes fadeIn { 100% { opacity:1; } }

.d05 { -webkit-animation-delay:0.5s; animation-delay:0.5s; }
.d10 { -webkit-animation-delay:1s; animation-delay:1s; }
.d15 { -webkit-animation-delay:1.5s; animation-delay:1.5s; }
.d20 { -webkit-animation-delay:2s; animation-delay:2s; }




@media screen and (max-width:1000px) {
	body { font-size:14px; }
	.site { overflow:hidden; }
	.flex-third > a, .flex-half > div:first-child, .flex-half > div:last-child, #who .flex-half:last-child > div:first-child, #who .flex-half:last-child > div:last-child { flex-basis:100%; }
	#who .flex-half:last-child > div:first-child { order:2; }
	#who .flex-half:last-child > div:last-child { order:1; }
	.site-header { position:static; }
	.main-top { padding:20px; }
	.main-img { padding-bottom:62.5%; }
	#map .main-img { padding:0; }
	.main-img iframe {}
	#why .main-img, #con .main-img { order:1; }
	#why .main-content, #con .main-content { order:2; }
}

@media screen and (max-width:750px) {
	.footer.flex { flex-direction:column; padding:20px; }
	.footer.jsb { align-items:center; }
	.services li { flex-basis:100%; }
	.menu { display:none; }
}

@media screen and (max-width:600px) {
	body { font-size:12px; text-align:center; }
	.site-title { padding-top:40px; text-shadow:0 0 10px #fff; }
	.services li { text-align:left; padding:5px 10px 5px 2em; }
	.services li::before { top:5px; }
	.site { overflow:hidden; }
	.site-header { height:140px; }
	.site-header .container { padding:0; justify-content:center; }
	.bg-image { background-position:top right; }
	.main-content h4 { display:none; }
	#services .main-area h2::before { font-size:3em; }
	.main-box::before { top:-25px; left:-25px; }
	.main-box::after { bottom:-25px; right:-25px; }
}