style.css

@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Lato:100');
@import url('https://fonts.googleapis.com/css?family=Lato:300');
@import url('https://fonts.googleapis.com/css?family=Lato:400');
@import url('https://fonts.googleapis.com/css?family=Abel');
* {
	margin: 0;
	padding: 0;
	border-radius: 0;
	outline: 0;
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	box-sizing: border-box
}
html{
	font-size: 16px;
	font-family: "Lato",sans-serif !important
}
body{
	width:100%;
	background-color: #f2f2f2;
	display:flex;
	flex-direction:column;
	position: relative;
	overflow-x: hidden
}

.navigation {
	height: 70px;
	background: #3282B8
}
.brand {
	position: absolute;
	float: left;
	margin-top: 2px
}
.brand a,.brand a:visited {
	color: #ffffff;
	text-decoration: none
}
.nav-container {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto
}
nav {
	float: right
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0
}
nav ul li {
	float: left;
	position: relative
}
nav ul li a,nav ul li a:visited {
	display: block;
	padding: 0 20px;
	line-height: 70px;
	background: #3282B8;
	color: #ffffff;
	text-decoration: none
}
nav ul li a:hover,nav ul li a:visited:hover {
	background: #0F4C75;
	color: #ffffff
}
nav ul li a:not(:only-child):after,nav ul li a:visited:not(:only-child):after {
	padding-left: 4px;
	content: " ▾"
}
nav ul li ul li {
	min-width: 190px
}
nav ul li ul li a {
	padding: 15px;
	line-height: 20px
}
.nav-dropdown {
	position: absolute;
	display: none;
	z-index: 1;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)
}

.nav-mobile {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	background:#3282B8 ;
	height: 70px;
	width: 70px
}
@media only screen and (max-width: 798px) {
	.nav-mobile {
		display: block
	}
	nav {
		width: 100%;
		padding: 70px 0 15px
	}
	nav ul {
		display: none
	}
	nav ul li {
		float: none
	}
	nav ul li a {
		padding: 15px;
		line-height: 20px
	}
	nav ul li ul li a {
		padding-left: 30px
	}
	.nav-dropdown {
		position: static
	}
}
@media screen and (min-width: 799px) {
	.nav-list {
		display: block !important
	}
}
@media screen and (max-width: 799px) {
	.testwrap{
		flex-direction: column
	}
	.contactcontainer{
		flex-direction: column
	}
	.image-qoute{
		flex-direction: column
	}
}
.nav-list{
	position: relative;
	z-index: 5
}
#nav-toggle {
	position: absolute;
	left: 18px;
	top: 22px;
	cursor: pointer;
	padding: 10px 35px 16px 0px
}
#nav-toggle span,#nav-toggle span:before,#nav-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 5px;
	width: 35px;
	background: #ffffff;
	position: absolute;
	display: block;
	content: "";
	transition: all 300ms ease-in-out
}
#nav-toggle span:before {
	top: -10px
}
#nav-toggle span:after {
	bottom: -10px
}
#nav-toggle.active span {
	background-color: transparent
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
	top: 0
}
#nav-toggle.active span:before {
	transform: rotate(45deg)
}
#nav-toggle.active span:after {
	transform: rotate(-45deg)
}
footer{
	width: 100%;
	flex: 0 1 auto;
	background: #3282B8;
	display: flex;
	color: #ffffff;
	padding: 10px;
	justify-content: space-evenly;
	flex-direction: column
}
.footwrap{
	width: 100%;
	margin: auto;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-evenly
}
.adressbox{
	display: flex;
	width: 100%;
	align-items: center;
	font-size: 20px
}
.socials{
	display: flex;
	width: 100%;
	align-items:center;
	justify-content:space-evenly
}
.socials > img {
	height: 40px;
	margin: 5px
}
.navigationfoot{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: inherit;
	font-size: 25px;
	margin: 20px
}
main{
	display: flex;
	width: 100%;
	background-color: #FFFFFF;
	flex: 1 0 auto;
	margin: 0 auto;
	flex-direction: column
}
h1{
	margin: 60px 0 250px 0;
	width: fit-content;
	font-size: 4vmax;
	text-align: center;
	color: #1B262C;
	font-weight: 300;
	font-family: "Lato",sans-serif;
	margin: auto;
	margin-top: 30px
}
h3{
	margin: 30px 0 50px 0;
	width: 100%;
	font-weight: 300;
	font-size: 25px;
	font-family: 'Lato';
	text-align: center;
	color: #1B262C;
	padding-inline: 20px
}
.aboutqoute{
	width: 100%;
	font-weight: 300;
	font-size: 25px;
	font-family: 'Lato';
	text-align: center;
	color: #1B262C;
	margin: auto;
	line-height: 140%;
	padding-inline: 20px;
	margin-bottom: 2rem
}
.underheading{
	margin: 20px 0 25px 0;
	width: 100%;
	font-size: 25px;
	text-align: center;
	color: #1B262C;
	font-family: 'Lato';
	line-height: 140%;
	padding-inline: 20px
}
.footerinfo{
	font-size: 20px
}
.mainpics{
	max-width: 100%
}
.footersplit{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content:space-evenly;
	margin-bottom: 35px
}
.footercontact > p{
	font-size: 20px
}
.footerhours> p{
	font-size: 20px
}
.navigationfoot > a{
	color: #FFFFFF;
	margin-bottom: 10px;
	font-size: smaller
}
.landinglogo{
	height:50px;
	width: 50px;
	margin-bottom: 15px;
	align-self: center
}
.testimonialwrap{
	width: 100%;
	height: auto;
	background: #3282B8;
	align-items: center;
	justify-content: space-evenly;
	display: flex;
	flex-direction: column;
	margin-bottom: 50px
}
.googlelogo{
	height: 200px;
	margin-bottom: 15px
}
.whiteheader{
	color: #000000;
	font-size: 4vmax;
	text-align: center;
	margin: 20px 0 15px 0;
	font-weight: 300
}
.footerqoute{
	color: #ffffff;
	font-size: 40px;
	text-align: center;
	margin: 20px 0 15px 0;
	font-weight: 300
}
.footerheader{
	color: #FFFFFF;
	font-size: 25px;
	text-align: center;
	margin: 20px 0 15px 0;
	text-decoration: underline
}
.blackheader{
	color: #1B262C;
	font-size: 40px;
	text-align: center;
	margin: 0 0 15px 0;
	font-family: "Lato",sans-serif;
	font-weight: 300
}
.testwrap{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-evenly;
	padding:10px;
	flex-direction: column
}
.marc-link{
	color: #FFFFFF
}
.testimonial{
	background: #FFFFFF;
	border: 5px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	text-align: center;
	font-size: 25px;
	color: #1B262C;
	max-width: 350px;
	font-size: 20px;
	line-height: 140%;
	padding-inline: 20px
}
.whitelogo{
	height: 40px;
	margin-top: 12px;
	margin-left: 10px
}
.phonelogo{
	height: 30px;
	margin-bottom: 4px;
	margin-left: 30px
}
.author{
	font-size: 16px;
	text-decoration: underline
}
.grouppic{
	background-image: url(/pictures/normpics/group-pic.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position-x: center;
	height: 60vh;
	background-position: center
}
.bigtext{
	text-align: center;
	margin: 15px;
	font-weight: 300;
	color: #1B262C;
	font-size: 20px;
	line-height: 140%;
	max-width: 900px;
	margin: auto;
	margin-top: 15px;
	padding-inline: 20px
}
.teamcontainer{
	display: flex;
	max-width: 600px;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 30px;
	flex-wrap: wrap;
	margin: auto;
	margin-top: 60px;
	
	width: 100%
}
.services-container{
	display: flex;
	max-width: 1400px;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 30px;
	flex-wrap: wrap;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 60px;
	
	width: 100%
}
.teamplayer{
	width: 100%;
	display: flex;
	align-items: center;
	
	justify-content: space-around;
	flex-direction: column;
	max-width: 150px
}
.teaminfo{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100px;
	color:#1B262C
}
.teamplayer > img{
	height: 150px;
	width: 150px;
	display: flex;
	align-self: center;
	filter: drop-shadow(1px 2px 3px black)
}
.teaminfo > p{
	font-size: 20px;
	margin-top: 5px;
	text-align: center
}
.aboutuspic{
	width: 100%;
	height: auto;
	background-image: url("/pictures/normpics/new-group-pic.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 800px;
	margin: auto;
	background-position-x: center;
	display: flex;
	align-items: baseline;
	justify-content: center;
	background-position: bottom;
	max-width: 1200px
}
.role{
	font-weight: 300
}
.servicepic{
	width: 100%;
	background-image: url("/pictures/carousel-try/office.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 600px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: top;
	position: relative;
	max-width: 800px;
	margin: auto
}
.restorativepic{
	width: 100%;
	height: auto;
	background-image: url("/pictures/normpics/smile.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 600px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	position: relative;
	max-width: 800px;
	margin: auto
}
.cosmeticpic{
	width: 100%;
	height: auto;
	background-image: url("/pictures/carousel-try/smile.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 600px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: right;
	position: relative;
	max-width: 800px;
	margin: auto
}
.prospheticpic{
	width: 100%;
	height: auto;
	background-image: url("/pictures/dental-instruments-used-at-a-dental-office.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 600px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	position: relative;
	max-width: 800px;
	margin: auto
}
.pediatricpic{
	width: 100%;
	height: auto;
	background-image:url("/pictures/normpics/pediatric.jpg");
	background-repeat: none;
	background-size: cover;
	align-items: center;
	height: 600px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: right;
	position: relative;
	max-width: 800px;
	margin: auto
}
.contactpic{
	width: 100%;
	height: auto;
	background-image:url("/pictures/normpics/contact-background.jpg");
	background-repeat: none;
	background-size: contain;
	align-items: center;
	height: 450px;
	background-position-x: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-repeat: no-repeat;
	
}
.factcontainer > img{
	height: 50px;
	margin-bottom: 15px
}
.factcontainer{
	display: flex;
	width: 100%;
	align-items: center;
	margin-top: 2rem;
	justify-content: center;
	flex-direction: column
}
.factcontainer > .facttextwrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around
}
.facttitle{
	font-weight: 400;
	font-size: 25px;
	text-align: center;
	color: #3282B8;
	font-family: 'Lato';
	margin-bottom: 15px
}
.fact{
	font-weight: 400;
	color: #1B262C;
	font-size: 20px;
	text-align: center;
	margin: 0 15px 0 15px;
	line-height: 140%;
	max-width: 500px
}
.contactcontainer{
	width: 100%;
	display: flex;
	align-items: center;
	
	margin: auto;
	width: 100%;
	align-items: center;
	justify-content: space-evenly;
	margin-block: 2rem
}
.contactbox > img{
	height: 100px
}
.contactbox{
	margin: 20px;
	text-align: center
}
.contacttitle{
	text-decoration: underline;
	font-size: 20px;
	font-weight: 400;
	margin: 20px
}
.contactbox > p {
	margin: 10px
}
.padded-div{
	padding-inline: 10px
}
.custom-shape-divider-bottom-1694305696 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0
}
.custom-shape-divider-bottom-1694305696 svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 70px
}
.red-highlight{
	color: #FF0000
}
.slider-wrap{
	width: 100%;
	margin: auto;
	margin-bottom: 40px
}
.quote-end{
	width: 100%;
	display: flex;
	transform: scale(-1, 1);
	font-size: 40px;
	color: #ffffff;
	filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #00BCD4
}
.quote-start{
	width: 100%;
	display: flex;
	font-size: 40px;
	justify-content: flex-start;
	color: #ffffff;
	filter: drop-shadow(1px 1px 1px rgb(0, 0, 0));
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #00BCD4;
	filter: drop-shadow(1px 1px 1px rgb(0, 0, 0))
}
.service-card{
	width: 100%;
	text-align: center;
	text-align: center;
	max-width: 250px;
	font-size: 25px;
	border-radius: 5px;
	padding: 5px;
	color: #FFFFFF;
	background: rgb(50,130,184);
	background: linear-gradient(22deg, rgba(50,130,184,1) 54%, rgba(0,212,255,1) 100%);
	filter: drop-shadow(1px 1px 2px black);
	cursor: pointer
}
.service-card > p{
	background: rgb(50,130,184);
	background: linear-gradient(22deg, rgba(50,130,184,1) 54%, rgba(0,212,255,1) 100%);
	color: #FFFFFF;
	font-size: large;
	border-radius: 5px;
	padding-block: 10px;
	text-transform: uppercase
}
.image-qoute{
	display: flex;
	background: #3282B8;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 60px
}
.image-qoute > img{
	display: flex;
	width:100%;
	max-width: 700px
}
.image-qoute-service{
	display: flex;
	width: 100%;
	margin-bottom: 60px;
	align-items: center;
	justify-content:space-evenly
}
.image-qoute-service-right{
	display: flex;
	width: 100%;
	margin-bottom: 60px;
	align-items: center;
	justify-content:space-evenly
}
.image-qoute > h3{
	font-size: 4vmax;
	color: #FFFFFF;
	width: 100%
}
.image-qoute-service > img{
	display: flex;
	width:100%;
	max-width: 900px
}
.image-qoute-service-right > img{
	display: flex;
	width:100%;
	max-width: 900px
}
.service-text-container{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}
.service-text-container > h3{
	font-size: 4vmax;
	margin: 10px 0 10px 0
}
.background-white{
	background: #FFFFFF
}
.slick-slide img {
	display: block;
	width: 100%
}
.landing-wrap{
	width: 100%;
	max-width: 800px;
	margin:auto;
	padding-inline: 20px
}
.landing-carousel-picture > img{
	border-radius: 20px
}
.mountain-parallax{
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff), url('/pictures/mountain-background-2.jpg');
	background-position: top;
	background-size: cover;
	background-color: rgba(255, 255, 255, 0.6);
	background-blend-mode: lighten
}
.about-header{
	color: #000000;
	font-size: 4vmax;
	text-align: center;
	margin: 80px 0 15px 0;
	font-weight: 300
}
@media screen and (max-width: 1024px) {
	.image-qoute-service{
		flex-direction: column
	}
	.image-qoute-service-right{
		flex-direction: column-reverse
	}
	.aboutuspic{
		height: 550px
	}
	.image-qoute > img {
		max-width: 800px
	}
}
@media screen and (max-width: 500px) {
	.footersplit{
		flex-direction: column
	}
	.navigationfoot{
		flex-direction: column
	}
	.servicepic{
		height: 450px
	}
	.restorativepic{
		height: 450px
	}
	.pediatricpic{
		height: 450px
	}
	.cosmeticpic{
		height: 450px
	}
	.prospheticpic{
		height: 450px
	}
	.service-card{
		max-width: 150px
	}
	.aboutuspic{
		height: 350px
	}
	.image-qoute > img{
		width: 100%
	}
}