/**
Theme Name: Cathys Child
Author: Cathy Bell
Version: 1.0.0
Text Domain: astra-child
Template: astra
*/

/**animation**/

body {
    margin: 0;
    padding: 0;
	}

/*Cathy added this to prevent a horizontal scrollbar and on cell phone the birds go */
html, body {
    max-width: 100%;
   overflow-x: hidden;
	
}


*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.bird {
    background-image: url(https://cathylbell.ca/wp-content/uploads/2023/02/bird-cells.svg);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    -webkit-animation-name: fly-cycle;
    animation-name: fly-cycle;
    -webkit-animation-timing-function: steps(10);
    animation-timing-function: steps(10);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bird--one {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird--two {
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
}
.bird--three {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
}
.bird--four {
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.bird-container {
    position: absolute;
    top: 20%;
    left: -7.5vw;
    -webkit-transform: scale(0);
    transform: scale(0);
    will-change: transform;
    -webkit-animation-name: fly-right-one;
    animation-name: fly-right-one;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bird-container--one {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}
.bird-container--two {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.bird-container--three {
    -webkit-animation-duration: 14.6s;
    animation-duration: 14.6s;
    -webkit-animation-delay: 9.5s;
    animation-delay: 9.5s;
}
.bird-container--four {
    -webkit-animation-duration: 16s;
    animation-duration: 16s;
    -webkit-animation-delay: 10.25s;
    animation-delay: 10.25s;
}
 @-webkit-keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
 @keyframes fly-cycle {
 100% {
 background-position: -900px 0;
}
}
@-webkit-keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@keyframes fly-right-one {
 0% {
 left: -10%;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(2vh) scale(0.4);
 transform: translateY(2vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(0vh) scale(0.5);
 transform: translateY(0vh) scale(0.5);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(4vh) scale(0.6);
 transform: translateY(4vh) scale(0.6);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(2vh) scale(0.6);
 transform: translateY(2vh) scale(0.6);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 60% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
 100% {
 left: 110%;
 opacity: 1;
 -webkit-transform: translateY(0vh) scale(0.6);
 transform: translateY(0vh) scale(0.6);
}
}
@-webkit-keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
}
@keyframes fly-right-two {
 0% {
 left: -10%;
 opacity: 1;
 -webkit-transform: translateY(-2vh) scale(0.5);
 transform: translateY(-2vh) scale(0.5);
}
 10% {
 left: 10%;
 -webkit-transform: translateY(0vh) scale(0.4);
 transform: translateY(0vh) scale(0.4);
}
 20% {
 left: 30%;
 -webkit-transform: translateY(-4vh) scale(0.6);
 transform: translateY(-4vh) scale(0.6);
}
 30% {
 left: 50%;
 -webkit-transform: translateY(1vh) scale(0.45);
 transform: translateY(1vh) scale(0.45);
}
 40% {
 left: 70%;
 -webkit-transform: translateY(-2.5vh) scale(0.5);
 transform: translateY(-2.5vh) scale(0.5);
}
 50% {
 left: 90%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 51% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
 100% {
 left: 110%;
 -webkit-transform: translateY(0vh) scale(0.45);
 transform: translateY(0vh) scale(0.45);
}
	
}

/*custom css*/
.widget {
    margin-bottom: 0.5em !important;
}

/*top sidebar -moved everything up -default padding-top is 40px*/
.sidebar-main {
    padding-top: 10px !important;
}

/* astra default breakpoint for hamburger menu is 920px*/
/* down to 921 px hide the menu bar because we want the side panel only to show up, below 920 allow the menu bar because the hamburger menu will appear*/
@media only screen and (min-width: 921px) {
.main-header-bar {
    display: none;
		}}

/*when the top header does show, have the text formatted*/
.ast-site-identity .site-description {
    color: #006400 !important;
    font-family: 'Chilanka' !important;
   font-weight: 600 !important;
}

/*put the background tiles into the header*/
.main-header-bar
{background-color:#ace600 !important;
background-image: url("/wp-content/uploads/2020/03/3tilestransparent2-1.png");
background-size:contain;}


/*when the hamburger menu shows, need to hide the sidebar and also have to expand the primary area*/
@media only screen and (max-width: 920px) {
div#secondary {
	display: none;}
div#primary {
    width: 100%;
}
	}

div#secondary {
    background-color:#ace600;
    margin-top: 0px;
	margin-bottom:0px;
  	/*background-image: url("/wp-content/uploads/2020/03/tiletransparent.png");*/
	background-image: url("/wp-content/uploads/2020/03/3tilestransparent2-1.png") !important;
	background-repeat:repeat-y;
	/*background-size:87px 87px;*/
	background-size:contain;
}

/*add a left margin for the sidebar*/
.ast-page-builder-template.ast-right-sidebar #secondary {
      margin-left: 20px;
}

/*padding for the sidebar content ie icon and menu buttons*/
.sidebar-main{padding-top:40px;}

/*menu items*/
#secondary li {
	padding:5px;
	font-size: large;
	color:#006400 !important;
}

#secondary li a{color:#006400;
font-weight:700 !important;}

#secondary li:hover {
   font-size: x-large !important;
	color:#006400 !important;
	text-decoration:underline;
	/*background-color:#ace600 !important;*/
}

.ast-page-builder-template.ast-right-sidebar #secondary {
    padding-right: 20px;
	padding-left: 20px;}

/*extend the sidebar to the full height, sidebar is 20% wide so position needs to be 80% to the left*/
div#secondary {
    position: absolute !important;
    top: 0;
	left: 80%;
	height:100% !important;}

/*side bar text under icon*/
aside#block-11 {
    line-height: 1.2em;
    font-family: 'Chilanka';
    font-weight: 700;
    text-align: center;
    font-size: 18px;
	font-style:italic;
}
/*side bar bell icon*/
aside#media_image-2 {
    text-align: center;
	margin-bottom:0.7em;
}


/*change color of hamburger menu*/
.ast-header-break-point .ast-mobile-menu-buttons-outline.menu-toggle {
    background: transparent;
    border: 2px solid black;
	color: black;}

/*color the divider lines in the hamburger menu*/
.ast-header-break-point .main-navigation ul .button-custom-menu-item a, .ast-header-break-point .main-navigation ul li a {   
	border-color: #006400;}


/*only way to change this....margin of header in home page on background with birds*/
.elementor-2 .elementor-element.elementor-element-40d24df > .elementor-widget-container {
	margin: 0% 0% 0% 0%;}

/*formatting the contact form*/
/*css to make columns in the form*/
 #left{
	 width:47%;
	 float:left;}
 #right{
	 width:47%;
	 float:right;}

.clearfix:after{
	clear:both;
	visibility:hidden;
	overflow:hidden;
	margin-bottom:10px;
	content:"\0020";
  display:block;
	height:0;	
}

/*elementor adds 20 px margin bottom to all headers -so remove it*/
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin-bottom: 0px;
}


/*background color - transparent*/
.wpcf7 input:not([type=submit]), .wpcf7 select, .wpcf7 textarea {
	background-color: #eaeaea00;}

/*background for success/failure message for submitted message needs to be white*/
.wpcf7-display-none {
       background-color: #eee;
}

/*change the background color of an input when the input in a form has focus*/
.wpcf7 input:not([type=submit]):focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
	background-color:#FFFFFF42}

/*change border color of the input boxes in the form*/
input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
       border-color: #00abff !important; /*light blue*/
		color:#0d0d0d !important;}

/*change color of placeholder text in the form*/
::placeholder{color:
#0d0d0d;}

input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
	padding: .25em !important;}

/*change the number of rows in a text area*/
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 5em !important;}
/* when an input field has focus want the background to change just a little...*/

/*marker test in the map page*/
img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive:hover {
    /* background-color: #d9534f !important; */
    width: 30px !important;
	height: 50px !important;}

/*******************CSS code for Matthew's Dogtag form****************************/

/**adjust the company logo**/
.elementor-widget-image img {
    width: 250px;
	float:left
}

/***format the top File Upload Box -this shows when the screensize is below 870px*************/

/*color the character counter*/
span.wpcf7-character-count.up {color: lightgreen;}

/*format the required field notice*/
span#requiredFieldNotice {
    float: right;
    color: red;
}

/* File uploader box*/
div#wrapTopUploadFilesBox {
    margin-bottom: 3em;
}

div#wrapTopUploadFilesBox h3 {
         font-size: 1.666rem;
         color: red;
         font-weight: 600;
    }

.codedropz-upload-wrapper {
    background-color: #f2f2f2;
 }

.codedropz-upload-inner {
	border-width:1px;
	border-color:black;
	border-style: dashed;}


/*******************css for Contact 7 form************************/
/***********code for tooltips used in contact 7 form****************/
.tooltip{
	position:relative;
	display:inline-block;
	border-bottom:1px dotted black;
}

.tooltip .tooltiptext{
	visibility:hidden;
	width:100px;
	background-color:#f2f2f2;
	font-size:0.75em;
	color:black;
	text-align:center;
	border-radius:6px;
	padding:3px;
	/* position the tooltip*/
	position:absolute;
	z-index:1;
	bottom:120%;
	left:50%;
	margin-left:-50px;
	line-height:1.4;
	border:1px solid black;
}

.tooltip .tooltiptext::after{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-4.5px;
	border-width:6px;
	border-style:solid;
	border-color:#f2f2f2 transparent transparent transparent;
}

.tooltip:hover .tooltiptext{visibility:visible;}



#wpcf7-f893-p853-o1 #left{width:32%;
float:left;
margin-right:2%;
margin-top:-2em;
background-color: #560d49;
padding-right:10px;
padding-left:10px;
padding-top:10px;
color:white;
border:2px solid black;
}

#wpcf7-f893-p853-o1 #middle{width:32%;
float:left;}

#wpcf7-f893-p853-o1 #right{width:32%;
float:left;
margin-left:2%;
margin-top:-2em;
background-color: #2c7142;
padding-right:10px;
padding-left:10px;
padding-top:10px;
color:white;
border:2px solid black;
}

.clearfix:after{
	content:"\0020";
	display:block;
	height:0;
	visibility:hidden;
	overflow:hidden;
	margin-bottom:10px;
}

.clearfix{display:block;}

h3#leftsideheader, h3#rightsideheader {
    color: white;
	font-weight: 600;
}

/* colour the default values a different color*/
input#your-phone::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #b3b3b3 !important;
  opacity: 1; /* Firefox */
}

input#your-phone:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b3b3b3 !important;
}

input#your-phone::-ms-input-placeholder { /* Microsoft Edge */
  color: #b3b3b3 !important;
}


input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    background-color: white !important ;
}


/*you  need this to position the text properly over the dogtags*/
div#dogtagpicturebox, div#dogtagpicturebox2 {
    position: relative !important;
}

/*this gives a reference on centering the text*/
div#dogtagpictureboxtext, div#dogtagpictureboxtext2 {
    position: absolute;
   /* border: 1px solid green;*/
    top: 18%;
    left: 20%;
    width: 65%;
	height: 66%;}

/*use flex to virtically align the rows of text in the dogtag*/
div#dogtagpictureboxtext, div#dogtagpictureboxtext2 {
	display:flex !important;
	flex-direction:column !important;
	justify-content:center !important;}

/*remove the spaces between the <p> tags in the dogtagpicturebox*/
#firstline, #secondline, #thirdline, #fourthline, #fifthline, #firstline2, #secondline2, #thirdline2, #fourthline2, #fifthline2 {
	margin: 0;}

/*****adjust appearance of the fonts in the dogtags*************/
#firstline, #secondline, #thirdline, #fourthline, #fifthline, #firstline2, #secondline2, #thirdline2, #fourthline2, #fifthline2 {
    text-shadow: 2px 2px 2px #000000 !important;
  	text-transform:uppercase;
    color: #e3e3e3 !important;
    font-family: Prestige, Courier, MS Courier New, Everson Mono;
    line-height:1.1em;
   }


/*********the buttons underneath both togtags******************/
.btn-group button, .btn-group2 button {
  background-color: white; 
  padding: 17px 17px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float:left;
  margin-left:10px;
  margin-bottom:30px;
 }

button#leftScreenshotButton, button#rightScreenshotButton {
    padding: 17px 30px;
}

/**center each button group******/
.btn-group, .btn-group2 {
    /* margin: auto; */
    display: flex;
    flex-direction: row;
	justify-content: center;}

/* Clear floats (clearfix hack) */
.btn-group:after, .btn-group2:after {
  content: "";
  clear: both;
  display: table;
}

/* Prevent double borders */
/****
.btn-group button:not(:last-child) {
  border-right: none; 
}
*****/

/*************hide radio buttons****************/
/*************They are important to send the values to the form -they are connected to the alignment buttons.  We just dont need to see or use them***/
span#radiobuttons, span#rightradiobuttons {
    display: none;
}


button#alignCenterButton{
   background-image: url("/wp-content/uploads/2023/01/centrealign.png");
   background-size:cover;
   background-position:center;
   border:3px solid #2c7142;
   margin-left:0px; 
}

button#alignCenterButton:hover{border:3px solid red;}

button#alignCenterButton2{
   background-image: url("/wp-content/uploads/2023/01/centrealign.png");
   background-size:cover;
   background-position:center;
   border:3px solid #6c0E61;
   margin-left:0px; 
}

button#alignCenterButton2:hover{border:3px solid red;}


button#alignLeftButton{
   background-image: url("/wp-content/uploads/2023/01/left-align.png");
   background-size:cover;
   background-position:center;
   border:3px solid #2c7142;
}
button#alignLeftButton:hover{border:3px solid red;}

button#alignLeftButton2{
   background-image: url("/wp-content/uploads/2023/01/left-align.png");
   background-size:cover;
   background-position:center;
   border:3px solid #6c0E61;
}
button#alignLeftButton2:hover{border:3px solid red;}

button#clearTextButton{
   background-image: url("/wp-content/uploads/2023/01/clearlines.png");
   background-size:cover;
   background-position:center;
   border:3px solid #2c7142;
}
button#clearTextButton:hover{border:3px solid red;}

button#clearTextButton2{
   background-image: url("/wp-content/uploads/2023/01/clearlines.png");
   background-size:cover;
   background-position:center;
   border:3px solid #6c0E61;
}
button#clearTextButton2:hover{border:3px solid red;}

button#transferInputsRightButton{
   background-image: url("/wp-content/uploads/2023/01/right-arrow.png");
   background-size:cover;
   background-position:center;
   border:3px solid #2c7142;
}
button#transferInputsRightButton:hover{border:3px solid red;}

button#transferInputsLeftButton{
   background-image: url("/wp-content/uploads/2023/01/left-arrow.png");
   background-size:cover;
   background-position:center;
   border:3px solid #6c0E61;
}
button#transferInputsLeftButton:hover{border:3px solid red;}

button#leftScreenshotButton{
	background-image:url("/wp-content/uploads/2023/03/TakeScreenshot.png");
	background-size:cover;
    background-position:center;
	border:3px solid #2c7142;	
}
button#leftScreenshotButton:hover{border:3px solid red;}

button#rightScreenshotButton{
	background-image:url("/wp-content/uploads/2023/03/TakeScreenshot.png");
	background-size:cover;
    background-position:center;
	border:3px solid #6c0E61;	
}
button#rightScreenshotButton:hover{border:3px solid red;}

/*****format the "Please Note" text in the middle*/
#middle h3 {
    margin-bottom: 20px;
	color: red;
    font-size: 1.3em;
    font-weight: 600;
}

span#specialChar {
    font-weight: 600 !important;
    font-size: larger;
    color: green;
}

.codedropz-upload-container {
    padding: 15px 15px;}

.codedropz-upload-inner {
	padding: 2px;}

a.cd-upload-btn {
    font-weight: 600;
}

/***********Format the Upload Files box on the top*******************/
div#wrapTopUploadFilesBox h3 {
    font-size: 1.3rem;   
}

/************ formating the bottom half of the form below the dogtags ********************/
#myclearfix::after{content:""; clear:both; display:table;}
#myclearfix{margin-top:2.75em;}

#bottomCol1{width:40%; margin-right:10%; float:left;}
input#numberDogTagSets {width: 28%;}
#bottomCol2{width:50%; float:left;}
#bottomCol3{width:45%; margin-right:10%; float:left;}
#bottomCol4{width:45%; float:left;}
#bottomCol5{width:45%; margin-right:10%; float:left;}
#bottomCol6{width:45%; float:left;}
#bottomCol7{width:100%; float:left;}

input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
    background-color: #f2f2f2 !important;
    border: 1px solid #000 !important;
}

/***********media queries for responsiveness  *********************/
/***Mathews dogtag form***/

@media (min-width:300px) and (max-width:325px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.2em !important;}}
@media (min-width:325px) and (max-width:350px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2 {font-size: 1.34em !important;}}
@media (min-width:350px) and (max-width:375px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.46em !important;}}
@media (min-width:375px) and (max-width:400px) {div#dogtagpictureboxtext, div#dogtagpictureboxtext2 {font-size: 1.59em !important;}}
@media (min-width:400px) and (max-width:425px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.75em !important;}}
@media (min-width:425px) and (max-width:450px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.85em !important;}}
@media (min-width:450px) and (max-width:475px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.00em !important;}}
@media (min-width:475px) and (max-width:500px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.15em !important;}}
@media (min-width:500px) and (max-width:525px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.16em !important;}}
@media (min-width:525px) and (max-width:550px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.3em !important;}}
@media (min-width:550px) and (max-width:575px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.47em !important;}}
@media (min-width:575px) and (max-width:600px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.6em !important;}}
@media (min-width:600px) and (max-width:611px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 2.7em !important;}}
@media (min-width:611px) and (max-width:612px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.25em !important;}}
@media (min-width:612px) and (max-width:625px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.25em !important;}}
@media (min-width:625px) and (max-width:650px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.27em !important;}}
@media (min-width:650px) and (max-width:675px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.33em !important;}}
@media (min-width:675px) and (max-width:700px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.39em !important;}}
@media (min-width:700px) and (max-width:725px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.48em !important;}}
@media (min-width:725px) and (max-width:750px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.53em !important;}}
@media (min-width:750px) and (max-width:775px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.51em !important;}}
@media (min-width:775px) and (max-width:800px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.52em !important;}}
@media (min-width:800px) and (max-width:825px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.56em !important;}}
@media (min-width:825px) and (max-width:850px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.62em !important;}}
@media (min-width:850px) and (max-width:870px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.68em !important;}}
@media (min-width:870px) and (max-width:880px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.1em !important;}}
@media (min-width:880px) and (max-width:900px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.13em !important;}}
@media (min-width:900px) and (max-width:925px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.16em !important;}}
@media (min-width:925px) and (max-width:950px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.19em !important;}}
@media (min-width:950px) and (max-width:975px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.24em !important;}}
@media (min-width:975px) and (max-width:1000px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.28em !important;}}
@media (min-width:1000px) and (max-width:1025px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.31em !important;}}
@media (min-width:1025px) and (max-width:1050px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.34em !important;}}
@media (min-width:1050px) and (max-width:1075px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.38em !important;}}
@media (min-width:1075px) and (max-width:1100px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.42em !important;}}
@media (min-width:1100px) and (max-width:1125px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.47em !important;}}
@media (min-width:1125px) and (max-width:1150px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.51em !important;}}
@media (min-width:1150px) and (max-width:1175px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.55em !important;}}
@media (min-width:1175px) and (max-width:1200px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.56em !important;}}
@media (min-width:1200px) and (max-width:1225px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.56em !important;}}
@media (min-width:1225px){div#dogtagpictureboxtext, div#dogtagpictureboxtext2  {font-size: 1.56em !important;}}

/*make the dogtag area buttons smaller for very small screens */
@media (max-width:300px){
 .btn-group button, .btn-group2 button {padding: 14px 14px;}
 button#leftScreenshotButton, button#rightScreenshotButton {padding: 14px 26px;}
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated>.elementor-widget-wrap {
    padding: 5px;}	
}


/*devices smaller than 611 px - two column becomes cramped-so make one column at 610px and hide the middle text*/
/*phone screen mode -hide the middle "Please Note" text and make sure the top "Please Note" text is visible*/
@media (max-width:611px){
    #wpcf7-f893-p853-o1 #middle {display:none !important;}
	div#wpcf7-f893-p853-o1 #left{width:100% !important;}
	div#wpcf7-f893-p853-o1 #right{
		width:100% !important;
		margin-left:0px;
	    margin-top:20px;}
	div#PleaseNote{display:block!important;	margin-bottom:-10px;}
	.tooltip:hover .tooltiptext{visibility:hidden;}
	#bottomCol1, #bottomCol2, #bottomCol3, #bottomCol4, #bottomCol5, #bottomCol6, #bottomCol7{width:100%;}
	
	
	}

/*browsers larger or equal to 611px and browers smaller than or equal to 869- hide the middle "Please Note" text and keep to two columns, also show the top "Please Note" text */
@media (min-width: 611px) and (max-width: 870px) {
	div#wpcf7-f893-p853-o1 #left{width:48% !important;}	
	div#wpcf7-f893-p853-o1 #right{width:48% !important;}
	div#wpcf7-f893-p853-o1 #middle{display:none !important;}
	
	}

/*the labels are in their default inline position */
/* hide the top "Please Note"*/ 
@media (min-width: 870px){ 
	    div#PleaseNote{display:none !important;}
        div#wrapTopUploadFilesBox{display: none;}	   
}
 

/* min-width includes the 870, max-width is up to 1088*/
/* the labels are above the text inputs -both widths are 100%*/
@media (min-width: 870px) and (max-width: 1089px){
   .myinputs{width:100% !important;}
   div#wpcf7-f893-p853-o1 .myinputs.mylabel p {margin-bottom: 0em !important;}
}