* {
	margin: 0;
	padding: 0;
	font-family: Copperplate Bold;
}

@font-face {
    font-family: Copperplate Bold;
    src: url(/fonts/Copperplate-Bold.ttf);
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.17em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: .83em;
}

h6 {
	font-size: .75em;
}

p {
	font-size: .85em;
}

a {
	font-size: .75em;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

button {
	font-size: .75em;
	background-color: #69ACC9;
	color: #FEF7A6;
}

button:hover {
	background-color: #D77A91;
}

a,
a:active,
a:hover,
a:visited,
a:focus {
	color: #69ACC9;
}

body {
	background-color: #69ACC9;
}

.center {
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	color: #69ACC9;
	text-align: center;
}

h1, h2, h3, h4, h5, h6, p {
	padding: 10px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
select,
textarea {
	font-size: .75em !important;
}

.iro__colorPicker {
	margin: 0 auto;
}

.slider {
	width: 50%;
	margin: 0 auto;
}

.margin-container .center,
.size-container .center {
	margin-bottom: 0 !important;
}

/* Tabs */
/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #69ACC9;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  color: #FEF7A6;
  float: left;
  display: block;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #D77A91;
  color: #FEF7A6;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #D77A91;
  color: #FEF7A6;
}

/* Style the tab content */
.tabcontent {
  display: none;
  width: 100%;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.tabwrapper {
    margin:0 auto;
    display:inline-block;
    width:auto;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Lightbox */
.lightbox-border {
	display: none;
	width: 100%;
	height: 100vh;
	z-index: 99999998;
	position: fixed;
	top: 0;
	background-color: #69ACC9;
	opacity: .7;
	transition: 0.5s;
}

.lightbox-border:hover,
.lightbox-border:focus {
	background-color: #D77A91;
}

.lightbox {
    display: none;
    position: fixed;
	z-index: 99999999;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    overflow: auto;
    background-color: #fff;
}

/* Lightbox Content */
.lightbox-content {
	position: relative;
	background-color: #fefefe;  
	margin: auto;
	padding: 0;
    width: 90%;
    max-width: 1200px;
}

.lightbox-content #submitbutton {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* The Close Button */
.closecontactform {
	z-index: 99999999;
    color: #69ACC9;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.closecontactform:hover,
.closecontactform:focus {
    color: #D77A91;
    text-decoration: none;
    cursor: pointer;
}


/* Contact Form */
#contactform {
	display: block;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

#contactform .submitbutton {
	width: 30%;
	height: 50px;
	margin-left: 35%;
	margin-right: 35%;
	background-color: #69ACC9;
    border: none;
	color: white;
	text-align: center;
	opacity: 0.8;
	transition: 0.3s;
	cursor: pointer;
}

#contactform .submitbutton:hover {
	opacity: 1;
}

.contactforminput {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	height: 25px;
}

.contactforminput,
.contactformtextinput {
	border-style: solid;
	border-color: #69ACC9;
	border-width: 2px;
	font-size: 15px;
}

.contactforminput:focus,
.contactformtextinput:focus {
	outline: none;
	border-color: #D77A91;
}

.contactformtextinput {
	display: block;
	width: 100%;
	margin-bottom: 15px;
	resize: none;
	height: 200px;
}

#copyright-section {
	width: 100%;
	height: 60px;
	background-color: #69ACC9;
	color: #FEF7A6;
}

#copyright-text {
	text-align: center;
	line-height: 40px;
	font-size: .75em;
}

#main-con {
	min-height: calc(100vh - 120px);
}

.main-con-top-margin {
	margin-top: 60px;
}

textarea {
	resize: none; 
}

/* Bootstrap Changes */
	.container {
		background-color: #fff;
		border-style: solid;
		border-color: #fff;
		border-width: 20px;
		border-radius: 60px;
	 
	}
    
@media all and (max-width: 499px) {
    .margin-container,
	.size-container {
	min-width: 100%;
}
    	
}

@media all and (max-width: 800px) {
    
    .lightbox {
	    left: 0%;
	    top: 0%;
	    width: 100%;
	    height: 100%;
    }
    
    .lightbox-content {
   		width: 100%;
	}	
}

@media all and (max-width: 1258px) {
	
    #copyright-section {
		margin-bottom: 48px;
	}
    
	.tab {
		margin-bottom: 0;
	}
	
	.tab button {
		display: block;
		width: 100%;
	}

	.tabcontent {
	}
	
	.tabwrapper {
	}
	
	/* Bootstrap Changes */
	.container {
		border-radius: 0;
		max-width: 100%;
	 
	}
	
	#staticQRDataIMG {
		max-width: 100%;
		height: auto;
	}
}