#contact-map {
padding: 65px;
}
@media (max-width: 768px) {
#contact-map {
padding: 32.5px;
}
}
@media (max-width: 640px) {
#contact-map {
padding: 1em;
}
}
@media (max-width: 768px) {
#contact-image {
height: 400px;
}
}
@media (max-width: 640px) {
#contact-image {
height: 300px;
}
}
#contact-image .line-triangle {
width: 600px;
height: auto;
position: absolute;
top: calc(100% - 270px);
left: -305px;
z-index: 2;
}
@media (max-width: 768px) {
#contact-image .line-triangle {
width: 400px;
top: calc(100% - 210px);
left: -205px;
}
}
@media (max-width: 768px) {
#contact-image .line-triangle {
top: calc(100% - 150px);
}
} #contactintro { }
#contactintro h2 {
font-size: 1.25rem;
}
.location #contactintro {
display: none;
}
.form-bg {
background-size: cover;
background-position: center center;
}
.form-bg .bgprimary {
background: rgba(47, 54, 57, 0.8);
}
#gmap {
padding-bottom: 58%;
}
@media (max-width: 768px) {
.contact #gmap {
padding-bottom: 90%;
}
}
#directions .wrapper {
max-width: 900px;
}
.googledirections-map {
height: 683px;
width: 100%;
position: relative;
}
@media (max-width: 1024px) {
.googledirections-map {
height: 65vh;
min-height: 65vh;
}
}
#googledirections {
padding: 1.5em 1em;
background-color: #dfdcd4;
}
#googledirections .googledirections-content { }
#googledirections form {
display: table;
margin: 0 auto;
position: relative;
vertical-align: middle;
width: 100%;
}
#googledirections h2 {
display: table-cell;
margin: 0;
padding: 0 1em 0 0;
text-align: right;
vertical-align: middle;
width: 320px;
font-size: 1.7em;
font-family: "Roboto", sans-serif;
text-transform: none;
color: #465155;
}
@media (max-width: 768px) {
#googledirections h2 {
text-align: center;
font-size: 1.5rem;
padding: 0 1em 0 0;
display: block;
width: 100%;
}
}
#saddr {
background: #ffffff;
border: 1px solid #ffffff;
color: #465155;
display: table-cell;
font-size: 1.25em;
height: 45px;
border-radius: 0;
margin: 0;
padding: 0 2.75em 0 0;
text-indent: 15px;
width: 100%;
}
#saddr::-webkit-input-placeholder {
color: #465155;
}
#saddr:-moz-placeholder {
color: #465155;
}
#saddr::-moz-placeholder {
color: #465155;
}
#saddr:-ms-input-placeholder {
color: #465155;
}
@media (max-width: 768px) {
#saddr {
margin-top: 1em;
}
}
.directions-display {
padding: 1rem 0;
}
.directions-display p {
margin-bottom: 0;
}
.directions-display a {
background-color: #49777d;
color: #ffffff !important;
font-weight: 400;
padding: 0.5em 1em;
text-decoration: none;
}
.directions-display a:hover {
background-color: rgb(54.196969697, 88.3484848485, 92.803030303);
}
#google-btn {
background-color: #49777d;
border-left: none;
color: #ffffff;
font-family: FontAwesome;
font-size: 1.25em;
height: 45px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
bottom: 0;
width: 2.5em;
appearance: none;
-webkit-appearance: none;
border-radius: 0;
-webkit-transition: 0.2s all ease-in-out;
-moz-transition: 0.2s all ease-in-out;
-ms-transition: 0.2s all ease-in-out;
-o-transition: 0.2s all ease-in-out;
transition: 0.2s all ease-in-out;
}
#google-btn:hover {
cursor: pointer;
background: rgb(54.196969697, 88.3484848485, 92.803030303);
}
#google-btn svg {
width: 10px;
height: 15px;
fill: #ffffff;
}
#google-btn .gmap-loader {
display: none;
border-radius: 100%;
border-style: solid;
border-width: 0.2rem;
height: 20px;
width: 20px;
margin: 0rem auto;
animation: gmap-loader 1s infinite linear;
}
#google-btn .gmap-loader {
border-color: #49777d;
border-top-color: #ffffff;
}
@keyframes gmap-loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(359.9deg);
}
} #map,
#map_canvas {
width: 100%;
height: 100%;
min-height: 700px;
float: left;
}
@media (max-width: 1024px) {
#map,
#map_canvas {
height: 65vh;
min-height: 65vh;
left: 0px;
top: 0px;
width: 100%;
padding: 0.25em 5px 0.5em 0;
}
} .map-views,
.map-views2,
.reset {
position: absolute;
z-index: 200;
cursor: pointer;
left: 0;
top: 0;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 0.85em;
line-height: 40px;
width: 120px;
height: 40px;
text-align: center;
text-transform: uppercase;
background: #49777d;
border: 1px solid #ffffff;
color: #ffffff;
transition: all 0.5s ease 0s;
}
.map-views:hover,
.map-views2:hover,
.reset:hover {
background: rgb(54.196969697, 88.3484848485, 92.803030303);
}
.map-views {
display: none;
}
.reset {
left: 204px;
width: 100px;
}
#cd-zoom-in,
#cd-zoom-out {
position: absolute;
z-index: 300;
top: 50px;
width: 40px;
height: 40px;
cursor: pointer;
background-color: #49777d;
border: 1px solid #ffffff;
opacity: 1;
background-repeat: no-repeat;
background-size: 30px 60px;
background-image: url(//www.astraslc.com/wp-content/themes/client-theme/images/poi/icons/cd-icon-controller.png);
transition: all 0.5s ease 0s;
}
#cd-zoom-in:hover,
#cd-zoom-out:hover {
background-color: rgb(54.196969697, 88.3484848485, 92.803030303);
}
#cd-zoom-in {
left: 12px;
background-position: 50% 0;
}
@media (max-width: 1024px) {
#cd-zoom-in {
top: 20px;
left: 20px;
}
}
#cd-zoom-out {
left: 64px;
background-position: 50% -30px;
}
@media (max-width: 1024px) {
#cd-zoom-out {
top: 70px;
left: 20px;
}
}
#map-side-bar a {
text-decoration: none;
}
.iw-container {
width: auto;
}
.infowindow {
width: 100%;
overflow: hidden;
}
@media (max-width: 1024px) {
.infowindow {
width: 230px !important;
}
}
#map-photo {
width: 224px;
height: 130px;
background-color: #ccc;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
overflow: hidden;
}
#map-photo img {
width: 100%;
height: auto;
}
#map-text {
padding: 0;
text-align: left;
font-family: "Roboto", sans-serif;
margin: 0 0 0.35em 0;
float: left;
width: 100%;
}
#map-text h2 {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 1.2em;
text-transform: uppercase;
line-height: 1.3em;
letter-spacing: 0;
color: #ffffff;
padding: 0.3em 0.2em 0.3em 0.6em;
margin: 0 0 0.35em 0;
background-color: #49777d;
}
#map-text h3,
#map-text h4 {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 1.2em;
line-height: 1.3em;
margin: 0 0 0.5em 0;
padding: 0 0.8em;
letter-spacing: 0;
color: #49777d;
}
#map-text h4 {
color: #465155;
height: 18px;
}
#map-text h4 a {
color: #465155;
}
#map-text h4 svg {
width: 1.3em;
height: auto;
display: inline;
fill: #465155;
padding: 0 0.2em 0.2em 0;
vertical-align: middle;
}
#map-text p {
font-family: "Roboto", sans-serif;
font-size: 0.9rem;
line-height: 1.3em;
font-weight: 400;
margin: 0.2em 0 0 0;
padding: 0 0 0.3em 0.7em;
color: #000000;
}
#map-text a.website:link,
#map-text a.website:visited {
width: 100%;
float: left;
font-family: "Roboto", sans-serif;
font-size: 1em;
padding: 0.3em 0.8em;
color: #465155;
}
#map-text a:hover {
color: rgb(42.9151515152, 69.9575757576, 73.4848484848);
}
.paddingBottom {
padding-bottom: 5px;
margin: 0px;
} .gm-style .gm-style-iw-c {
width: 230px !important;
border-radius: 0;
padding: 0;
}
.gm-style-iw-d {
overflow-x: hidden !important;
overflow-y: auto !important;
}
.gm-style-iw {
width: 350px !important;
border: 4px solid #ffffff;
}
.gm-style-iw-ch {
padding: 0 !important;
}
.gm-style-iw-chr button {
position: absolute !important;
}
a.iw-close-bg {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
color: #49777d;
background-color: #ffffff;
display: block;
z-index: 10;
font-size: 30px;
line-height: 0;
text-decoration: none;
padding: 9px 0 0 3px;
}
.gm-ui-hover-effect {
opacity: 0;
}
.gm-ui-hover-effect:hover {
opacity: 0;
}
.gm-style iframe + div {
border: none !important;
}
@media only screen and (max-width: 1024px) {
#content2 {
padding-top: 0 !important;
}
.map-views,
.map-views2,
.menu-tab,
.menu-tab2,
.reset {
display: none;
}
.map-all,
.sidebar {
border: none !important;
}
.caption {
display: none;
}
}
@media (max-width: 940px) {
#gmapHolder {
width: 100%;
height: auto !important;
padding: 1.3em;
}
}