@font-face { font-family: "junction"; src: url("../fonts/junction.otf"); } body, html { margin: 0; padding: 0; font-family: Lato, sans-serif; } body{ overflow: hidden; } nav { display: flex; justify-content: space-between; background-color: #fff; width: 100%; height: 40px; position: fixed; top: 0; box-shadow: 0 2px 8px #696969; z-index: 4; } #fullscreen { position: fixed; top: 40px; height: 100%; width: 100%; background-color: #fff; z-index: 2; } #center { transform: translateY(-50%); top: 50%; position: absolute; width: 100%; text-align: center; } #center p { font-size: 22px; color: #324d67; } .cs-loader-inner label { font-size: 30px; opacity: 0; display: inline-block; color: #5380ac; } @keyframes lol { 0% { opacity: 0; transform: translateX(-300px); } 33% { opacity: 1; transform: translateX(0px); } 66% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(300px); } } @-webkit-keyframes lol { 0% { opacity: 0; -webkit-transform: translateX(-300px); } 33% { opacity: 1; -webkit-transform: translateX(0px); } 66% { opacity: 1; -webkit-transform: translateX(0px); } 100% { opacity: 0; -webkit-transform: translateX(300px); } } .cs-loader-inner label:nth-child(6) { -webkit-animation: lol 3s infinite ease-in-out; animation: lol 3s infinite ease-in-out; } .cs-loader-inner label:nth-child(5) { -webkit-animation: lol 3s 100ms infinite ease-in-out; animation: lol 3s 100ms infinite ease-in-out; } .cs-loader-inner label:nth-child(4) { -webkit-animation: lol 3s 200ms infinite ease-in-out; animation: lol 3s 200ms infinite ease-in-out; } .cs-loader-inner label:nth-child(3) { -webkit-animation: lol 3s 300ms infinite ease-in-out; animation: lol 3s 300ms infinite ease-in-out; } .cs-loader-inner label:nth-child(2) { -webkit-animation: lol 3s 400ms infinite ease-in-out; animation: lol 3s 400ms infinite ease-in-out; } .cs-loader-inner label:nth-child(1) { -webkit-animation: lol 3s 500ms infinite ease-in-out; animation: lol 3s 500ms infinite ease-in-out; } #backButton { display: block; height: 40px; line-height: 40px; margin-left: 15px; font-weight: 700; font-size: 16px; letter-spacing: 2px; } #backLink { color: #000; text-decoration: none } #backButton:hover #backAngle { transform: translateX(-5px); transition: .5s } #signature { padding: 0; height: 40px; line-height: 40px; margin-right: 15px; } #signature a h1{ font-family: junction, sans-serif; font-size: 22px; line-height: 45px; font-weight: 600; color: #324d67; text-decoration: none; } #signature a:hover { text-decoration: none } .logo { display: block; height: 45px line-height: 45px; margin-right: 10px; padding-top: 5px; padding-bottom: 5px; } .logoImg { height: 35px; } .imgGrid { width: 100%; margin: 0; padding-top: 35px; padding-bottom: 15px; padding-left: 5%; padding-right: 5%; z-index: 1; overflow:hidden; } .col-md-12, .col-md-4 { margin: 0; padding: 0 } .lightbox { display: block } .img-fluid { width: 100%; } .mini, .miniTitle { position: relative; margin: 36px 18px 36px 18px; font-family: junction, sans-serif; z-index: 1; } .miniPanorama { position: relative; margin: 30px 14px 0 14px } .mini:after, .mini:before, .miniPanorama:after, .miniPanorama:before { position: absolute; top: 25px; right: 25px; content: ''; background-color: #fff; z-index: 1; } .lightbox:after, .lightbox:before { position: absolute; bottom: 25px; left: 25px; content: ''; background-color: #fff; z-index: 2; } .lightbox:before, .mini:before, .miniPanorama:before { width: 0; height: 1px } .lightbox:after, .mini:after, .miniPanorama:after { height: 0; width: 1px } .lightbox.hover:before, .lightbox:hover:before, .mini.hover:before, .mini:hover:before, .miniPanorama.hover:before, .miniPanorama:hover:before { width: 60px; -webkit-transition: .45s ease; transition: .45s ease } .lightbox.hover:after, .lightbox:hover:after, .mini.hover:after, .mini:hover:after, .miniPanorama.hover:after, .miniPanorama:hover:after { height: 60px; -webkit-transition: .45s ease; transition: .45s ease } .caption { visibility: hidden; position: absolute; width: 100%; height: 100%; text-align: center; margin: 0; bottom: 0; padding: 0; background-color: rgba(0, 0, 0, 0.4); -webkit-transition: all .45s ease; transition: all .45s ease; overflow:hidden; } .centeredDiv{ position: relative; bottom: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); } .caption h4, .caption h5 { font-size: 0; color: #fff; text-align: center; margin: 0; font-family: Raleway, sans-serif; -webkit-transition: all .45s ease; transition: all .45s ease; } .mini:hover .caption, .miniPanorama:hover .caption { visibility: visible; background-color: rgba(0, 0, 0, .4) } .mini:hover .caption h4, .miniPanorama:hover .caption h4 { font-weight: 800; letter-spacing: 2px; font-size: 32px } .mini:hover .caption h5, .miniPanorama:hover .caption h5 { font-weight: 400; font-size: 20px } .caption h4::after { background-color: #fff; display: block; content: ''; visibility: hidden; height: 2px; left: 50%; transform: translate(-50%); position: relative; width: 0; margin-top: 7px; margin-bottom: 7px; -webkit-transition: all .45s ease; transition: all .45s ease } .mini:hover .caption h4::after { width: 25%; visibility: visible } .miniPanorama:hover .caption h4::after { width: 12%; visibility: visible } .photo { visibility: hidden } .fadeIn { -webkit-animation: animat_show .9s; animation: animat_show .9s; visibility: visible } @-webkit-keyframes animat_show { 0% { opacity: 0 } 100% { opacity: 1 } } .title { font-weight: 700; font-size: 60px; letter-spacing: 10px; padding: 0; margin: 0 } .floating-div { display: block; font-size: 31px; color: #324d67 } .floating-div:hover { font-size: 34px; color: #324d67 } #sticky { position: fixed; right: 25px; bottom: 7px } footer { background-color: #324d67; height: 240px; text-align: center; margin: 0; padding: 0; bottom: 0; } #topBtnLink { display: block; margin-top: 20px; border-radius: 5px; border-color: transparent; background-color: #fff; color: #000; width: 125px; height: 45px; line-height: 45px; margin-left: auto; margin-right: auto } #topBtnLink span { font-size: 16px; margin-left: 5px } #topBtnLink:hover i { transform: translateY(-3px); transition: .5s } #topBtnLink:hover { text-decoration: none; background-color: #d3d3d3; color: #000 } #topBtnLink:visited { color: #000 } #frame { font-size: 40px; color: #fff; margin-top: 10px; margin-bottom: 0; } .social { color: #fff; padding-left: 5px; padding-right: 5px } .social:hover { color: grey } #mention h3{ color: #fff; font-size: 15px; font-weight: 500; margin-bottom: 2px; } #copyright h3{ color: #fff; margin-top: 4px; font-size: 14px; font-weight: 500; margin-bottom: 1px; } .textServicesPrivacy { color: #fff; font-size: 14px; cursor: pointer; } #services:hover { text-decoration: underline; } #privacy:hover { color: #fff; } @media screen and (min-width:1401px) { .imgGrid { padding-left: 10%; padding-right: 10% } } @media screen and (min-width:993px) and (max-width:1400px) { #sticky { right: 15px } .mini, .miniTitle { margin: 26px 13px 26px 13px } .mini:hover .caption h4 { font-size: 22px } .mini:hover .caption h5 { font-size: 16px } .mini:after, .mini:before, .miniPanorama:after, .miniPanorama:before{ top: 15px; right: 15px } .mini .lightbox:after, .mini .lightbox:before, .miniPanorama .lightbox:after, .miniPanorama .lightbox:before { bottom: 15px; left: 15px } .lightbox.hover:before, .lightbox:hover:before, .mini.hover:before, .mini:hover:before, .miniPanorama.hover:before, .miniPanorama:hover:before { width: 45px } .lightbox.hover:after, .lightbox:hover:after, .mini.hover:after, .mini:hover:after, .miniPanorama.hover:after, .miniPanorama:hover:after { height: 45px } } @media screen and (min-width:1201px) and (max-width:1500px) { .title { font-size: 55px } } @media screen and (min-width:1101px) and (max-width:1200px) { .title { font-size: 50px } } @media screen and (min-width:993px) and (max-width:1100px) { .title { font-size: 45px } } @media screen and (max-width:992px) { .title { font-size: 40px; margin-bottom: 10px; margin-top: 30px; } .last { margin-bottom: 0 } .imgGrid { padding-left: 3%; padding-right: 3% } .mini, .miniTitle { position: relative; margin: 18px 10px 18px 10px; font-family: junction, sans-serif; } .miniPanorama { position: relative; margin: 30px 10px 0 10px } .lightbox.hover:before, .lightbox:hover:before, .mini.hover:before, .mini:hover:before, .miniPanorama.hover:before, .miniPanorama:hover:before { width: 40px; } .lightbox.hover:after, .lightbox:hover:after, .mini.hover:after, .mini:hover:after, .miniPanorama.hover:after, .miniPanorama:hover:after { height: 40px } .mini:hover .caption h4 { font-size: 18px } .mini:hover .caption h5 { font-size: 14px } .miniPanorama:hover .caption h4 { font-size: 20px } .miniPanorama:hover .caption h5 { font-size: 15px } .mini:after, .mini:before, .miniPanorama:after, .miniPanorama:before { top: 10px; right: 10px } .mini .lightbox:after, .mini .lightbox:before, .miniPanorama .lightbox:after, .miniPanorama .lightbox:before { bottom: 10px; left: 10px } } @media screen and (max-width:768px) { nav { height: 45px; } #backButton { height: 45px; line-height: 45px; } #topBtnLink { margin-top: 20px } .mini:hover .caption h4 { font-size: 28px } .mini:hover .caption h5 { font-size: 20px } .miniPanorama:hover .caption h4 { font-size: 23px } .miniPanorama:hover .caption h5 { font-size: 19px } .miniPanorama:after, .miniPanorama:before { top: 15px; right: 15px } .miniPanorama .lightbox:after, .miniPanorama .lightbox:before { bottom: 15px; left: 15px } footer { margin-top: 30px; height: 240px } } @media screen and (max-width:576px) { #topBtn { width: 110px; height: 45px; font-size: 13px } #backButton { font-size: 18px; } #logoDiv{ height: 45px; } .title { font-size: 45px } .mini, .miniTitle { margin: 20px 10px 20px 10px } .last { margin-bottom: 0 } .miniPanorama { margin: 20px 10px 0 10px } .miniPanorama:hover .caption h4 { font-size: 18px } .miniPanorama:hover .caption h5 { font-size: 14px } .miniPanorama:after, .miniPanorama:before { top: 10px; right: 10px } .miniPanorama .lightbox:after, .miniPanorama .lightbox:before { bottom: 10px; left: 10px } .miniPanorama .lightbox.hover:before, .miniPanorama .lightbox:hover:before, .miniPanorama.hover:before, .miniPanorama:hover:before { width: 25px } .miniPanorama .lightbox.hover:after, .miniPanorama .lightbox:hover:after, .miniPanorama.hover:after, .miniPanorama:hover:after { height: 25px } #center p { font-size: 18px; } .cs-loader-inner label { font-size: 15px; } } @media screen and (max-width:450px) { #topBtnLink { width: 110px; height: 40px; line-height: 40px; } #topBtnLink span { font-size: 14px; } #mention h3{ font-size: 14px } #copyright h3{ font-size: 12px } .textServicesPrivacy { font-size: 12px; } }