/* old styles
@media only screen and (max-device-width: 480px){
       div#wrapper {
           width: 400px;
       }

       div#header {
           background-image: url(media-queries-phone.jpg);
           height: 93px;
           position: relative;
       }

       div#header h1 {
           font-size: 140%;
       }

       #content {
           float: none;
           width: 100%;
       }

       #navigation {
           float:none;
           width: auto;
       }
   }
  
*/

@charset "UTF-8";

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

* {
	margin: 0;
	padding: 0;
}

	
}

/* trying to make iframes responsive
@media screen and (max-width: 1024px) {
  .iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}} */

@media screen and (max-width: 1024px) {
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
  


/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}

/* This rule is to reduce the size of the blue rounded buttons on small devices */

@media screen and (max-width: 870px) {
.card {
    width: 100%;
    height: auto;
}

.card .img-top {
    width: 100%;
    height: auto;
}
}

/* This rule is to reduce the size of the captcha field in the contact form on small devices */
@media screen and (max-width: 640px) {
.mec_form__widget .three-sixty-form-captcha {
	flex: 0 0 80%;
	max-width: 100%;
}
}

@media screen and (max-width: 850px) {
.mec_form__widget .three-sixty-form-captcha {
	flex: 0 0 85%;
	max-width: 100%;
}
}