@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
@import url(https://fonts.googleapis.com/css2?family=Bonheur+Royale:400,800);

body {background-image: linear-gradient(#6699cc, white); background-attachment: fixed; text-align: center; }
.header {position: fixed; left: 0; top: 0; width: 100%; background-color: #103971; color: white; text-align: right; }
.main {width: 75%; border-radius: 25px; border: 2px solid #777777; padding: 15px; }

a.one:link {font-size: 24px; color: #000000; text-decoration: none;} 
a.one:visited {font-size: 24px; color: #000000; text-decoration: none;}
a.one:hover {font-size: 24px; color: #000000; text-decoration: underline;}

h1, h2 {color:black;}
h1, h2, h3, h4, h5, h6 { font-family: 'Lora', serif;}
.h1, h1 {font-size: 36px;}

.img-logo {text-align:left; max-width:75%}  

#img-membership {width: 65%; height: 405px; background: url("../images/membership-luxury.jpg") top center no-repeat; background-size: cover; position: relative; padding-top: 82px;margin-left: 5%;}
#img-membership:before {content: ""; background: rgba(0, 0, 0, 0.2); position: absolute; bottom: 0; top: 0; left: 0; right: 0;}
#img-membership h1 {margin: 0; font-size: 38px; font-weight: 500; color: #afc4db;}

.menu {margin-top: 25px; margin-right: 100px;}
footer {border-color: rgba(34,34,34,.05); background-color: #1b62b5; color:#fff; margin-top:20px; padding:20px;}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
    
.navbar-dark .navbar-toggler {color: #103971; border-color: #103971; background: #103971;}

.collapse:not(.show) {display: none;}

.navbar {position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: .5rem; padding-bottom: .5rem;}

.navbar-toggler {padding: .25rem .75rem; font-size: 1rem; line-height: 1; background-color: #d9d5be; border: 1px solid #103971; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: .25rem; transition: box-shadow .15s ease-in-out;}

.navbar-dark .navbar-nav .nav-link {color: #1b62b5; font-weight: 600;}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {color:#6699cc;}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {width: 100%; height: 100vh; background: url('../images/theuniverse2.jpg') top center no-repeat; background-size: cover; position: relative; padding-top: 350px;}

#hero:before {content: ""; background: rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; top: 0; left: 0; right: 0;}

#hero h1 {margin: 0; font-size: 48px; font-weight: 800; color: #fff}

#hero h2 {color: #fff; margin: 10px 0 0 0; font-size: 48px; font-family: 'Bonheur Royale'}

.description {text-align: center; line-height: 1.6; padding: 10px;}

@media (max-width: 428px) { 
	#hero {width: 100%; height: auto; background: url('../images/hero-ucs.jpg') left center no-repeat; background-size: cover; position: relative; }
	#hero h1 {font-size: 18px; font-weight: 600; padding-top: 50px;}
  	#hero h2 {font-size: 38px; line-height: 24px;  font-weight: 800; font-family: 'Bonheur Royale'; padding-top: 3px; }
	.title{font-size: 25px; font-weight: 600; }
	.gallery {padding: 40px 0;}
	.description {font-size: 18px; font-weight: 400; }
	.gallery img {width: 90%;}
	#img-membership {width: 90%; height: 300px;}
	.subtitle {font-size: 20px;padding: 10px 0;}
}

@media (max-height: 500px) {
  #hero {height: 200vh;}
  .img-logo {text-align:center;max-height: 80px; max-width:150px;}
}

@media (width: 768px) {
  #hero {text-align: center; padding-top: 58px;}
  #hero h1 {font-size: 28px;}
  #hero h2 {font-size: 18px; line-height: 24px;}
}

@media (max-width: 1315px) {
	#hero {width: 100%; height: auto; background: url('../images/hero-ucs.jpg') left center no-repeat; background-size: cover; position: relative; }
	#hero h1 {font-size: 25px; font-weight: 600; padding: 50px;}
  	#hero h2 {font-size: 38px; line-height: 24px;  font-weight: 800; font-family: 'Bonheur Royale'; padding-top: 3px; }
	.gallery {padding: 80px 0;}
	.title{font-size: 28px; font-weight: 600; }
	.description {font-size: 20px; font-weight: 400;}
	.subtitle {font-size: 25px; font-weight: 600; padding: 10px 0;}
}

/************** CUSTOM ***********************/
img{max-width: 100%;}
.gallery{background-color: #dbddf1; }
.gallery img{background-color: #ffffff; padding: 15px;	width: 90%;	box-shadow: 0 0 15px rgba(0,0,0,0.3); cursor: pointer;}
#gallery-modal .modal-img{width: 90%;}
.services p {font-size: 20px; margin: 20px; padding: 20px;}