@charset "utf-8";

#titlebar {width: 65%; margin:auto; margin-bottom:3%; margin-top:4.5vw; height:auto; text-shadow:#000 0 2px 3px; color:#fff; text-align:center; white-space:nowrap; border:none; }

#contents {background-color:rgba(72, 72, 72, 0.95); overflow:hidden; padding-bottom:5%; width:100%;}

#contactpage { width:100%; background: url(../images/background.jpg); background-attachment:fixed; background-repeat:no-repeat; background-size:cover;}
#contacts #home, #form, #phone { display:flex; flex-direction:column; margin:auto; width:100%; padding:1% 0 2.2% 0;}
#phone a {text-decoration:none; color:#FFF;}
#contacts .icons {width:28%; padding:2%; margin:5%; margin-top:0; margin-bottom:0; }
#contacts { width:22%; float:left; margin:auto; margin-right:0; padding:0; text-align:center; color:#fff; top:0; font-size:1.5vw; white-space:nowrap;}
#contacts a, telenum {font-size:1.3vw; margin:0; list-style:none; text-decoration:none;}
#contacts h2 { width:60%; padding:1%; margin:auto; text-wrap:none; text-align:center; font-size:22px; }

#maploc {display:block; padding:0; margin:0 auto; width:100%;}
#maploc iframe {width:52vw; height:30vw;  box-shadow:#000 8px 10px 25px; }

.hop { margin:1.7% auto; width:50%; color:#FFF; font-size:4vh; text-align:center;}

#SocialContactPage {display:inline-block; padding:0; padding-bottom:1%; margin:0; text-align:center; width:100%; height:auto; background-color: rgba( 100, 121, 100, 0.4);}
#SocialContactPage a { width:6%; display: inline-block; margin:0; padding:0;}
#SocialContactPage img { width:55%; height:auto; cursor: pointer; transition: transform 0.3s, opacity 0.3s;}
#SocialContactPage img:hover { transform: scale(1.33); position:relative;}
#SocialContactPage h2 {text-wrap:none; text-align:center; color: #fff; margin:1%; font-size:1.6vw;}

#phone img, #home img{ transition: transform 0.2s ease, background-color 0.2s ease; cursor: pointer;}
#phone img:hover, #home img:hover {transform:scale(1.2);}
#phone img:active, #home img:active {transform: scale(0.95);}
.openFormBtn { display:flex; align-items: center;justify-content: center; border-radius: 50%; cursor: pointer; border:none; background:none; width:28%; height:28%; margin:0 auto; 
padding:0; box-shadow:none; margin-bottom:6%; margin-top:2.5%;}
.openFormBtn img {width:100%; height:100%; object-fit: contain; border-radius:50px; pointer-events: none;}
.openFormBtn:hover {transform:scale(1.2);}

@media (max-width: 760px) {
#titlebar { width:100%; padding-top:6%; margin:auto; white-space:pre-wrap; font-size:8vw;}
#maploc {display:flex;}	
#maploc iframe { width:85vw; height:73vw; box-shadow:#000 8px 10px 25px; margin:auto; margin-top:8%; }
.hop {color:#FFF; font-size:3.3vh; margin:6% auto; text-align:center; width:100%;}
#telenum {display:none;}
#contacts {display: flex; flex-direction: row; justify-content:center; width: 100%;}
#contacts > #phone,  #contacts > #form,  #contacts > #home {width: 100%; }	
#contacts > #phone img,  #contacts > #form img,  #contacts > #home img {width:60%;}
#contacts h2 {text-align:center; width:100%; margin:0; padding:0;}
.openFormBtn {width:100%;  margin:0; padding:0;   margin-bottom:14%}	
	
#SocialContactPage { display:inline-block; gap: 6%; margin-top: 10%;}
#SocialContactPage h2 {font-size:2.5vh; padding:0; margin:auto; margin-top: 4%; text-align:center; line-height:none;}
#SocialContactPage a { display:inline-block; width: 20%; margin:auto; padding:5%; }
#SocialContactPage img {width: 90%; padding:0; margin:0;}
}