/* CSS Document */
.bg-lite {
	background: #f8f8f8;
}
.bg-gray {
	background: #ccc;
}
.bg-grn {
	background: #009900;
}
.bg-org {
	background: #538cc6;
}
.bg-red {
	background: #f00;
}
.bg-blue {
	background: #538cc6;
}
.font-italic {
	font-style: italic !important;
}
.text-white {
	color: #fff !important;
}

html, body {
	padding: 0;
	margin: 0;
	background: #fff;
	font-family: Calibri, "Calibri Light";
	font-size: 100%;
	scroll-behavior: smooth;
}
body a {
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: #336699;
}
h1 {
	font-size: 4.5em;
	}

h2 {
	font-size: clamp(2.5rem, 4vw, 4rem);
}
h3 {
	font-size: clamp(2rem, 2.5vw, 2.5rem);
}
h4 {
	font-size: clamp(1.5rem, 2.2vw, 2.2rem);
	}
h5 {
	font-size: 1.5em;
}
h6 {
	font-size: 1.3em;
	}

p {
	margin: 0;
	font-size: clamp(1.5rem, 1.2vw, 2rem);
	font-siz:3vmin;
	color: #555;
	padding: 0;
}
ul {
	padding: 0;
	margin: 0;
}
nav a:hover, nav a:focus {
	outline: none;
}
a.link {
	color: #1c86f9;
	text-decoration: underline;
}
a.link:hover {
	color: #f00;
}
a.btn1, a.btn2 {
	margin-top: 1em;
	background: #e7e7e7;
	padding: 15px 25px;
	color: #fff;
	font-size: 16p;
	letter-spacing: 1px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	text-decoration: none;
}
a.btn1:hover {
	background: #c5c5c5;
}
a.btn2 {
	background: #336699;
}
a.btn2:hover {
	background: #538cc6;
}

.header {
	position: fixed;
	margin: 0 auto;
    width: 100%;
    height: 90px;
	padding:20px 0;
	z-index:1;	
	background:#336699;
}
.logo {
    width: 0%;	
}

.top-nav {
    float: right;
    width: 4%;	
}
.logo h1 {
    font-size:2.3em;
	color:#fff;
}
.logo h1 a {
	 color: #fff;
}

#wrapper {
    background: #f00;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.open_wrapper {
    top: 200px !important;
}
.closed_wrapper {
    top: 0px !important;
}

#nav_container {
    width: 100%;
    height:100px;
    left: 0px;
    background-color:#ff0;
    position: fixed;
    display: none;
    top: 0px;
}
 
.nav_item {
    margin:10px 40px 10px 0px;
    display: inline-block;
	
}
.nav_item a {
    text-decoration: none;
    color: #fff;
    font-size: 1.3em;
    -webkit-transition-duration: 0.5s;
}
.nav_item a:hover {
    color:#000;
}
.nav_item a:active {
    color:#000;
} 

 
.menu { 
    z-index: 9999;
	float: left;
}
.menu h1 {
  font-weight: 300; 
  font-size: 40px;
  text-align: center;
}
.menu h1 a,.menu h1 a:hover{
    color: #ff1493;
	text-decoration:none;
	outline:none;
}
.menu .navicon {
    background: transparent;
    position: fixed;
    height: 20px;
    width: 40px;
    display: block;
    top: 32px;
    z-index: 9999;
    -webkit-transition: linear 0.5s all;
    -moz-transition: linear 0.5s all;
    transition: linear 0.5s all;
    outline: none;
	}
.menu .navicon:before, .menu .navicon:after {
    background: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: "";
    height: 5px;
    left: 0;
    -webkit-transition: 0.8s ease;
    -moz-transition: 0.8s ease;
    transition: 0.8s ease;
    width: 36px;
}

.menu .navicon:before, .menu .navicon:after {
	box-shadow: #000 0 1px 0 0;
	position: absolute;
	top: 0;
}
.menu .navicon:after {
    position: absolute;
    top: 15px;
}

.menu .navicon--active { 
	-webkit-transition: linear 0.5s all;
	-moz-transition: linear 0.5s all; 
	transition: linear 0.5s all;
}

.menu .navicon--active:before, .menu .navicon--active:after {
	box-shadow: transparent 0 0 0 0;
	top: 8px;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	transform: rotate(225deg);
}
.menu .navicon--active:after {
	-webkit-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-o-transform: rotate(315deg);
	transform: rotate(315deg);
} 
.menu .toggle {
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #538cc6;
    padding: 1.2em 3em;
    opacity: 0;
    -webkit-transition: ease-in 0.5s all;
    -moz-transition: ease-in 0.5s all;
    transition: ease-in 0.5s all;
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    z-index: 999;
    -webkit-box-shadow: 0px 0px 7px #696868;
    -moz-box-shadow: 0px 0px 7px #696868;
    box-shadow: 0px 0px 7px #696868;
	text-align: center;
}
.menu .toggle--active {
	display: block;
	opacity: 1;
	-webkit-transition: ease-in 0.5s all;
	-moz-transition: ease-in 0.5s all; 
	transition: ease-in 0.5s all;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
	
}  


.dropbtn  {
display:none;
}
.dropdown-content a  {
display:inline-block;
font-size:18px;
color:#fff;
text-decoration:none;
}

.dropdown-content a::before, .dropdown-content a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
.dropdown-content a::before {
	margin-right: 5px;
	content: '|';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}
.dropdown-content a::after {
	margin-left: 5px;
	content: '|';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}
.dropdown-content a:hover::before, .dropdown-content a:hover::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}


.nav-effect a::before, .nav-effect a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
.nav-effect a::before {
	margin-right: 5px;
	content: '|';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}
.nav-effect a::after {
	margin-left: 5px;
	content: '|';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}
.nav-effect a:hover::before, .nav-effect a:hover::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}
.banner {
padding:40px 0;
	height: 300p;
	min-height:32vmi;
	text-align: center;
position: relative;
top:80px;
	
	background:#eee;	
}
.banner-info {
	text-align: center;
position: relative;
top:15v;

background:green;
}
.band {
border-top: #c0c2c9 5px solid;
}

.main {
margin-top:100p;
}
.main .blog {
margin:0 auto;
width:80%;
}

.main .fa {
	font-size: 12em;
	color: #336699;
}

.main embed {
margin:0 auto;
display:block;
width:50%;
border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
}
.main ul {
	padding-left: 1em;
	list-style-type: none;
}

.indent ul {
}
.indent li {
font-size:1.5em;
color:#555;
paddin:3px 0;
}


* {
	box-sizing: border-box;
}
.row::after {
	content: "";
	clear: both;
	display: table;
}
/*  */

.contact {
}

noscript {
margin-top:2em;
	display: block;
	color: #777;
	font-size: 1.5em;
	padding: 9.5em 0;
	text-align: center;
	border: #ccc 1px solid;
	background: #f8f8f8;
}

.contact-info p a, .contact-info p, ul.links li a {
	color: #777;
	font-size: 18px;
	line-height: 1.5em;
}
.contact p {
	font-size: 18px;
}
.contact a {
	color: #777;
	text-decoration: underline;
}
.contact a:hover {
	color: #333;
	text-decoration: underline;
}
.contact-info p span {
	display: block;
}
.contact-info-about p {
	margin-right: 1em;
	font-size: 18px;
	line-height: 1.5em;
}
.contact-info h4 {
	font-size: 18px;
	letter-spacing: 1px;
	color: #c3c3c3;
}
ul.links li a {
	font-size: 18px;
	letter-spacing: 1px;
	margin-bottom: 5px;
	display: inline-block;
}
ul.links li a:hover {
	color: #f00;
}
input, select, textarea {
	border-radius: 0;
	border: none;
	outline: none;
	box-sizing: border-box;
	font-size: 1.1em;
	padding: 0;
	border-bottom: 1px solid #ccc;
	padding: 8px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	
}
div.elem-group {
	margin: 30px 0 5px;
}
label {
	display: none;
	padding-bottom: 0;
	font-size: 1.1em;
	line-height: 0;
	color: #fff;
}
select {
	margin-top: -1.5em;
	width: 100%;
	color: #777;
	padding: 0;
	border-bottom: 1px solid #999;
	outline: none;
	background: #f8f8f8;
}
.contact_right input[type=text], .contact_right input[type=email], .contact_right input[type=tel], .contact_right textarea {
	outline: none;
	padding: 1px 0;
	background: none;
	color: #222;
	font-size: 18px;
	width: 100%;
	letter-spacing: 1px;
	border: none;
	border-bottom: 1px solid #999;
}
.contact_right textarea {
	margin-top: -1em;
	min-height: 200px;
	resize: none;
}
.contact_right button {
	outline: none;
	padding: 10px 0;
	background: #336699;
	color: #fff;
	letter-spacing: 2px;
	margin-top: -1em;
	width: 100%;
	border: none;
	cursor: pointer;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-o-transition: 0.5s all;
}
.contact_right button:hover {
	background: #538cc6;
}
.contact_left iframe {
	width: 100%;
	outline: none;
	border: none;
	min-height: 570px;
	background: #e5e5e5;
	padding: .4em;
}
.map iframe {
	width: 100%;
	border: 0px solid #999;
	min-height: 350px;
	margin-top: 5px;
	padding: 0px;
}
.footer {
	text-align: center;
	background: #222;
	padding: 3em 0;
}
.footer p, .footer p a {
font-size: 1.2em;
	color: #ccc;
}
.footer p a {
	color: #1c86f9;
	text-decoration: none;
}
.footer p a:hover {
	color: #4ea0fa;
	text-decoration: none;
}
.footer span {
	color: #777;
}
.copyright {
font-size:1em;
	text-align: center;
	padding-top: 6px;
	line-height: 1.5em;
}
.copyright p {
	color: #ccc;
}
.copyright p a {
	color: #ccc;
	font-size: 1em;
	text-decoration: underline;
}
.copyright p a:hover {
	color: #fff;
	text-decoration: underline;
}
.copyright span {
	color: #777;
}
.social {
	margin: 0em 0;
	float: right;
}
.social i {
	width: 27px;
	height: 27px;
	background: url('../images/social-icons.png') no-repeat 0px 0px;
	display: inline-block;
	margin: 0 5px;
}


a i.facebook {
	background-position: -3px -2px;
}
a i.twitter {
	background-position: -43px -3px;
}
a i.dribble {
	background-position: -83px -3px;
}
a i.google {
	background-position: -126px -2px;
}
a i.youtube {
	background-position: -167px -3px;
}
a i.facebook:hover {
	background-position: -3px -36px;
}
a i.twitter:hover {
	background-position: -43px -36px;
}
a i.dribble:hover {
	background-position: -83px -36px;
}
a i.google:hover {
	background-position: -126px -36px;
}
a i.youtube:hover {
	background-position: -167px -36px;
}
@media only screen and (max-width: 1440px){
}
@media only screen and (max-width: 1080px){

.top-menu ul li a {
	padding: 0 0.95em;
}
.contact form input[type=text], .contact-right textarea {
	font-size: 1em;
}
.contact-right textarea {
	height: 170px;
}
.contact form input[type=submit] {
	font-size: 1em;
}
.contact-right {
	padding-right: 0;
}
}
@media only screen and (max-width: 1024px){


.top-menu ul li a {
	font-size: 1em;
}


ul.callbacks_tabs.callbacks1_tabs {
	bottom: -14%;
}
.contact-right {
	padding: 0;
	margin-bottom: 3em;
}
.footer {
	padding: 1.5em 0;
}
.contact-left {
	padding: 0;
}
}

/*-- media queries --*/
@media (max-width: 1024px) {
  .container {
    max-width: 100%;
  }
}
@media (max-width: 1440px) {
  .container {
    max-width: 90%;	
  }
}
@media (max-width: 1920px) {
  .container {
    max-width: 80%;	
  }
}
@media (min-width: 2560px) {
  .container {
    max-width: 100%;
	padding:0 10%;
  }
}

/*-- //media queries --*/


/* responsive */
@media only screen and (max-width: 1280px){

.main .blog {
width:90%;
}

.main embed {
width:60%;
}

}

@media only screen and (max-width: 991px){

.top-nav {
    width: 6%;	
}

	.dropbtn {
   background: #336699 url(../images/nav-icon.png) no-repeat center;
   color: white;
   padding:16px;
   font-size: 16px;
   border: none;
   display:block;
   transition: .75s;
  transform: translate(-0%, -0%) rotateY(180deg);
}
.dropdown {
   position: relative;
   display: inline-block;
   
}
.dropdown-content {
	margin-left:-134px;
   display: none;
   position: absolute;
   background-color: #f8f8f8;
   min-width: 300px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a {
	font-size: 15px;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
   display: block;
}
.dropdown:hover .dropbtn {
   background: #336699 url(../images/nav-icon.png) no-repeat center;
   transition: .75s;
  transform: rotate(360deg);
}

.container {
	margin: 0 auto;
	width: 100%;
}
.logo h1 {
	margin: 0 auto;
}
span.menu {
	display: block;
	text-align: center;
	cursor: pointer;
	position: absolute;
}


.map iframe {
	min-height: 250px;
}
}
@media only screen and (max-width: 820px){
}
@media only screen and (max-width:800px){
}
@media only screen and (max-width:768px){
.main .blog {
width:100%;
}

.main embed {
width:90%;
}
}
@media only screen and (max-width:736px){
}
@media only screen and (max-width:640px){

.top-nav {
    width: 8%;	
}


.nav_item {
    margin:10px;
    display: block;
	
}


.map iframe {
	height: 230px;
}
}
@media only screen and (max-width:568px){
.main .blog {
padding:0;
}

.main embed {
width:100%;
}
}

@media only screen and (max-width:480px){
p {
	font-size:1.2em;
}


.indent li {
font-size:1.2em;
}
h2 {
	font-size: 2.3em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.3em;
	}

.contact {
	padding: 0 20px;
}
.contact p {
	font-size: 16px;
}
}
@media only screen and (max-width:425px){
.indent li {
font-size:1.2em;
}
h3 {
	font-size: 1.3em;
}

.map iframe {
	height: 160px;
}
.contact-right textarea {
	height: 125px;
}
.contact {
	min-height: 727px;
}
.map {
	margin: 2em 0;
}
.contact form input[type=text], .contact-right textarea {
	padding: 8px 10px;
}
.contact form input[type=submit] {
	font-size: 0.9em;
	padding: 7px 2em;
}
}
@media only screen and (max-width:390px){
.indent li {
font-size:1.2em;
}

}