@charset "UTF-8";
/* CSS Document */


  .bg2021 {
    background: url('../images/a.jpg') bottom center / cover no-repeat;
  }

.clusternotice {
	color:#fff;
background-color:#d4351c;
padding: 10px 5px 12px 5px;
    margin: auto;
	margin-top: 0px;
	margin-bottom: 11px;
border-bottom: 1px dashed #000;
cursor: default;
text-align: center;
font-size:15px;
font-family: Source Sans Pro, 'Dosis', sans-serif; 

}

.clusternoticeinner {
margin: auto;
    line-height: 22px;
	max-width: 950px;
}


@media all and (max-width: 99999px) and (min-width: 960px){
.noteicon{display:block; float: left; font-size: 30px!important;    margin-top: 6px; margin-right:6px;}
.notetext {display:block; text-align: left;}
}

@media all and (max-width: 961px) {
.noteicon{display:block;  font-size: 30px!important;    margin-top: 6px; margin-right:6px;}
.notetext {display:block; text-align: center;}
	}


.rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}









body, html { 
 margin:0;
 padding:0;
  font-family:'Montserrat', sans-serif, Arial;
 font-size: 17px;

color: #fff;
background-color: rgba(255,255,255,0.6);
/*background-color:rgba(255,255,255,0.8);*/
	color:#000000;
}


a {color:#000000;text-decoration:underline;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;}
a.link  { color:#000000; text-decoration:underline;}
.link:hover {color:#7218e0; text-decoration:underline;}
a:hover {color:#7218e0;}

#footer a {text-decoration:underline!important;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;}
#footer a.link  {  text-decoration:underline!important;}
#footer .link:hover { text-decoration:none!important;}
#footer a:hover {}


p {margin:0; padding:0; margin-bottom:20px;    line-height: 30px; text-justify:auto;}

@media all and (max-width: 99999px) and (min-width: 960px){
.fa, .fab, .fas, .far {font-size:15px; margin-bottom: 10px;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;}
}

@media all and (max-width: 961px) {
.fa, .fab, .fas, .far {font-size:15px; margin-bottom: 10px;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;
	top: -3px; position: relative;}

}


@media all and (max-width: 99999px) and (min-width: 960px){
.fa-adjust, .fa-solid, .fa-brands  {font-size:15px; margin-bottom: 10px;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;}
}

@media all and (max-width: 961px) {
.fa-adjust, .fa-solid, .fa-brands  {font-size:14px!important; margin-bottom: 10px;
	-webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;
	top: -2px; position: relative;}

}


.navmainfooter .fa, .navmainfooter .fab, .navmainfooter .fas {font-size:30px; margin-bottom: 10px;}
.fa-stack-1x {font-size: 0.8em!important;}

.bluetextize {font-size:70px!important; margin-bottom: 10px;}
.fasizepackages {font-size:33px!important; margin-left: 1px; margin-top: 8px;}
.fasize {font-size:40px!important; margin-left: 1px; margin-top: 8px;}


input[type='submit']
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
}

@media all and (max-width: 99999px) and (min-width: 960px){
.maxwidth180 {max-width:180px;}
	}
@media all and (max-width: 961px) {
.maxwidth180 {max-width:150px;}
}

@media all and (max-width: 99999px) and (min-width: 960px){
.maxwidth280 {max-width:280px;}
	}
@media all and (max-width: 961px) {
.maxwidth280 {}
}


@media all and (max-width: 99999px) and (min-width: 960px){

.zoom {transition: transform .2s;margin-bottom: -7px; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; margin: 0px 7px 0px 0;}
.zoom:hover {transform: scale(1.1);}
	}
@media all and (max-width: 961px) {

.zoom {transition: transform .2s;margin-bottom: -7px; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; margin: 0px 7px 0px 0;}
.zoom:hover {transform: scale(1);}
}



.floater{margin-right: auto;
    margin-left: auto;
    display: block;
	padding: 10px 5px 10px 5px;
	z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
background-color: rgba(255, 255, 255, 1);
    text-align: center;}




 a:link.messengerbutton, a:visited.messengerbutton,  input.messengerbutton  {display:inline-block; padding: 0px 26px 0px 16px; background-color:#3285ff; border:0px solid #3285ff; color:#fff!important; font-size:25px; font-family:'Montserrat', Arial, sans-serif; font-weight:bold; text-align:center;margin: 5px;
   text-decoration:none; cursor:pointer; border-radius: 23px; -webkit-border-radius: 23px; -moz-border-radius: 23px; }
.messengertext {position: relative;
    bottom: 7px;}
.gallery1 {    background-color: rgba(0, 0, 0, 1) !important;
background-repeat: no-repeat;
    background-position: center center;
    background-size: cover !important;
    position: relative;
    font-size: 0;
    line-height: 0;
    height: 400px;
    max-width: 100%;
    min-width: 100px;}

.gallerymjffc {  background-image: url(../images/clients/mjffc.png);}
.gallerylpc1 {  background-image: url(../images/clients/camberleychildminder.png);}
.gallerylpc2 {  background-image: url(../images/clients/lilypads.png);}
.gallerytg {  background-image: url(../images/clients/techgeneration.png);}


img.gallery { max-width: 400px;  }

img {margin-right:1px;}

img.gallerymessenger {    margin: 6px; border:6px solid #3285ff; background-color: #3285ff; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 77px; cursor: pointer;}

img.gallerymessenger:hover {    margin: 6px; border:6px solid #559aff; background-color: #559aff; padding:0px;     
    position: relative; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; cursor: pointer;}

img.galleryphone {    margin: 6px; border:6px solid #d6017e; background-color: #d6017e; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; cursor: pointer;}

img.galleryemail {    margin: 6px; border:6px solid #909090; background-color: #909090; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; cursor: pointer;}

img.galleryemail:hover {    margin: 6px; border:6px solid #b1b1b1; background-color: #b1b1b1; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; cursor: pointer;}


img.gallerywhatsapp {    margin: 6px; border:6px solid #25d366; background-color: #25d366; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 52px; cursor: pointer;}

img.gallerytelegram {    margin: 6px; border:6px solid #5c82a4; background-color: #5c82a4; padding:0px; border-radius: 52px; -webkit-border-radius: 52px; -moz-border-radius: 77px; cursor: pointer;}

img.gallerytelegram:hover {    margin: 6px; border:6px solid #769fc4; background-color: #769fc4; 
    position: relative; cursor: pointer;}




@media all and (max-width: 99999px) and (min-width: 960px){
	
.packages .calltoaction { font-size:24px; display:block;}
.packages {  padding: 24px; max-width:350px; display:inline-table; margin:0 5px 0 5px;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
	
	-ms-transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
    -webkit-transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
    transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
	    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -moz-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -ms-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -o-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;   
	

}

	.packagesconvenience {  padding: 24px; max-width:600px!important; display:inline-table; margin:0 5px 0 5px;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
	
	-ms-transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
    -webkit-transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
    transform: perspective(1020px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(0px) scale(1);
	    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -moz-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -ms-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -o-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;   
	

}
	
.packages:hover { 
	    -ms-transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
    -webkit-transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
    transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
	    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -moz-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -ms-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -o-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;

	}
	
	.packagesconvenience:hover { 
	    -ms-transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
    -webkit-transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
    transform: perspective(400px) rotateY(-5deg) rotateX(-1deg) translateX(8%) translateZ(-50px) scale(1.2);
	    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -moz-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -ms-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    -o-transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;
    transition: all 0.3s cubic-bezier(0, 0.5, 0.1, 0.9) 0s;

	}
	
}
@media all and (max-width: 961px) {
	.packages .calltoaction {  display:inline-block;max-width: 230px; margin-bottom:10px!important; padding:8px 20px 8px 20px!important;}
.packages, .packagesconvenience {  margin:0 10px 0 10px;padding:10px;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
	    /* disappears on mobiles  -ms-transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);
    -webkit-transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);
    transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);*/
	
	}
	.packages:hover { 
	  /* disappears on mobiles    -ms-transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);
    -webkit-transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);
    transform: perspective(200px) rotateY(9deg) rotateX(-3deg) translateX(8%) translateZ(-50px) scale(1.2);*/
	
	}
}


@media all and (max-width: 99999px) and (min-width: 960px){

.services { max-width: 250px;
    display: inline-table;
    margin: 0 25px 50px 25px;
	height: 1px;
    
    text-align: center;}
}
@media all and (max-width: 961px) {
.services { 
    display: inline-table;
    margin: 0 25px 50px 25px;
	height: 1px;
    
    text-align: center;}
}


.smallprint {font-weight: normal; font-size:11px!important;line-height: 21px;}

.field-dropdown{
border: 2px solid #ebecee;
    border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
    font-size: 14px;
	font-weight: bold;
    width: 100%;
    max-width: 332px;
font-family: 'Montserrat', sans-serif, Arial, Helvetica, sans-serif;    background-color: #fff;
    height: 43px;
    margin: 0px -5px 6px 0;
    cursor: pointer;
    padding: 0 10px 0px 10px;

	}

 .field-input{
border: 2px solid #b0b0b0;
border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
font-size: 14px;
	font-weight: bold;
padding: 11px;
font-family: Gotham Rounded,'Montserrat', sans-serif, Arial, Helvetica, sans-serif;
position: relative;
color: #000000;
margin-bottom: 10px;
background-color: #fff;
width:100%;
max-width: 335px;
	    /*-webkit-transition: border-color .3s ease-in-out;*/
    /* transition: border-color .3s ease-in-out; */
    min-height: 40px;
	 outline-width: 0;

}

 .field-input:focus:not(.c-input__field--invalid), .field-comments:focus:not(.c-input__field--invalid) {
    border-color: #7218e0;
    color: #3c4859;}

.label:focus{
    color: #7218e0!important;}


	
.field-comments{
border: 2px solid #b0b0b0;
   border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
font-size: 14px;
	font-weight: bold;
 outline-width: 0;
    padding: 14px;
    width: 100%;
    max-width: 600px;
font-family: 'Montserrat', sans-serif, Arial, Helvetica, sans-serif;	background-color: #fff;
	margin-bottom: 0;
	    margin-left: 4px;

    position: relative;
	}

.label{
padding: 0;
    color: #3c4859;
    /*font-size: 14px;*/
font-weight: bold;}
	
input.button-expanding{display: inline-block; padding:6px 80px 6px 80px; background-color:transparent; color:#d6017e; font-size:22px; text-align:center; margin:5px 0 5px 0; text-decoration:none; border:1px solid #d6017e;  cursor:pointer;  border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px;}

input.button-expanding:hover {color:#fff; border:1px solid #d6017e; background-color: #d6017e; cursor:pointer; -webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important; }

@media all and (max-width: 99999px) and (min-width: 960px){.mobilehide {display:block;}}
@media all and (max-width: 959px) {	.mobilehide {display:none;}	}

/*
@media all and (max-width: 99999px) and (min-width: 960px){.video-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}}

@media all and (max-width: 959px) {.video-background {

  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}}

@media all and (max-width: 99999px) and (min-width: 960px){
.video-background-0 { background: url(../images/bg-4.jpg) no-repeat center center fixed; }
.video-background-1 { background: url(../images/bg-1b.jpg) no-repeat center center fixed; }
.video-background-2 { background: url(../images/bg-2.jpg) no-repeat center center fixed; }
.video-background-3 { background: url(../images/bg-3.jpg) no-repeat center center fixed; }
.video-background-4 { background: url(../images/bg-4.jpg) no-repeat center center fixed; }
	
}

@media all and (max-width: 959px) {	
.video-background-0 { background: url(../images/bg-4.jpg) no-repeat center center fixed; }
.video-background-1 { background: url(../images/bg-1b.jpg) no-repeat; }
.video-background-2 { background: url(../images/bg-2.jpg) no-repeat; }
.video-background-3 { background: url(../images/bg-3.jpg) no-repeat; }
.video-background-4 { background: url(../images/bg-4.jpg) no-repeat;  }
}*/
	
@media all and (max-width: 99999px) and (min-width: 960px){.indexcent {    bottom: -360px;    position: relative;}}
@media all and (max-width: 959px) {	.indexcent {margin-top:180px;}	}

@media all and (max-width: 99999px) and (min-width: 960px){
	header {   text-align: center;    width: 100%;    padding: 0px 0px 10px 0;	color: #fff;     }}

@media all and (max-width: 959px) {	
header {   text-align: center;    width: 100%;    padding:0px 0px 10px 0px;	color: #fff;   overflow: hidden;  }
}

.bgchome { background-color: #d6017e; }
.bgcdesignanddevelopment {-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(14px);
/* background-color: #ffffff80; */
	position: fixed;
	z-index:100; /*background-color:*/ #d6017e; background-image: linear-gradient(160deg, rgba(214, 1, 126, 0.8) 0%, rgba(214, 1, 126, 0.6) 100%);} /*rgb(52, 185, 0)*/
.bgchostingandemail {-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(14px);
/* background-color: #ffffff80; */
	position: fixed;
	z-index:100; /*background-color: #34b900; */ background-image: linear-gradient(160deg, rgba(52, 185, 0, 0.8) 0%, rgba(52, 185, 0, 0.6) 100%);} /*rgb(0, 80, 193)*/
.bgcmarketing {-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(14px);
/* background-color: #ffffff80; */
	position: fixed;
	z-index:100; /*background-color: #0050c1;*/ background-image: linear-gradient(160deg, rgba(0, 80, 193, 0.8) 0%, rgba(0, 80, 193, 0.6) 100%);} /*rgb(114, 24, 224)*/

.bgcstudios { background-color: #34b900; }
.bgcorange { background-color: #7218e0; }

@media all and (max-width: 99999px) and (min-width: 960px){	
.fixedpadding {padding-top:124px;}}
@media all and (max-width: 959px) {	
.fixedpadding {padding-top:80px;}}


.bgcpurple {background-image: linear-gradient(160deg,rgba(114,24,224,0.8) 0%,rgba(214, 1, 126, 0.6) 100%);   
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(14px);
/* background-color: #ffffff80; */
	position: fixed;
	z-index:100;

} /*rgba(214, 1, 126, 1)*/
/* background-image: linear-gradient(160deg,rgba(114, 24, 224, 1) 0%,rgba(114, 24, 224, 1) 100%);  } */
.bgcred { background-color:#d6017e;   }/*pink 114,24,224*/
.bgccontact { 
background-image: linear-gradient(160deg,rgba(0,0,0,0.8) 0%,rgba(0, 0, 0, 0.6) 100%);   
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(14px);
/* background-color: #ffffff80; */
	position: fixed;
	z-index:100;
}
header .content {padding:20px 20px 6px 20px;}


@media all and (max-width: 99999px) and (min-width: 960px){	.logo   {  top: 12px;    position: relative;	}	}
@media all and (max-width: 959px) {	.logo   {  top: 6px;    position: relative; float:left;	left: 5px;}	}

@media all and (max-width: 99999px) and (min-width: 960px){	.strapline {display:block;}	}
@media all and (max-width: 959px) {	.strapline {display:none;}	}


@media all and (max-width: 99999px) and (min-width: 960px){	.logotext   { 
position: relative;
left: 6px;
font-family: 'Montserrat', sans-serif, Arial;;
font-weight: bold;
font-size: 28px;	}
}
@media all and (max-width: 959px) {	.logotext   { top: 11px;
position: relative;
left: 10px;
font-family: 'Montserrat', sans-serif, Arial;
font-weight: bold;
font-size: 28px;
float: left;}
	}



#red .mainmenu { border-radius: 15px;-webkit-border-radius: 15px; -moz-border-radius: 15px;}
#red a.mainmenunew:link, #red a.mainmenunew:visited { color: #fff!important; border:2px solid #fff; background-color: transparent}
#red a.mainmenunew, #red a.mainmenunew:hover {background-color: #fff; color: #d6017e!important; }
#red a.mainmenunewactive:link, #red a.mainmenunewactive:visited {color: #d6017e!important; border:2px solid #fff; background-color: #fff;}


a.mainmenunewfooter {background-color: #7218e0!important; color: #fff!important; }
a.mainmenunewfooter:link, a.mainmenunewfooter:visited { color: #fff!important;  background-color: #7218e0;border:1px solid #7218e0;}
a.mainmenunewfooter:hover {background-color: #fff!important; color: #7218e0!important; border:1px solid #7218e0;}
a.mainmenunewfooteractive:link, a.mainmenunewfooteractive:visited {color: #000000!important; border:2px solid #fff; background-color: #000000;}



.navmainstudios {  position: relative; font-weight: bold; text-align: center; padding-inline-start: 0px;     }
.navmainstudios ul { list-style-type:none; margin:0 0 0 0; padding:0;  }
.navmainstudios li {     display: inline-block;    margin:0 2px 20px 2px;}
.navmainstudios a {  text-decoration:none; -webkit-transition: all 0.3s ease 0s!important; -moz-transition: all 0.3s ease 0s!important; -o-transition: all 0.3s ease 0s!important; transition: all 0.3s ease 0s!important;  }

/*what does this do? remove if nothing*/

@media all and (max-width: 959px) {
.mainmenustudiosco { padding: 2px 20px 4px 20px;   font-size: 26px; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; }
a.mainmenustudiosco:link, a.mainmenunewstudiosco:visited { color: #D4AF37!important; border:2px solid #D4AF37; background-color: transparent}
a.mainmenunewstudiosco, a.mainmenunewstudiosco:hover {background-color: #D4AF37; color: #fff!important; }
a.mainmenunewactivestudiosco:link, a.mainmenunewactivestudiosco:visited {color: #fff!important; border:2px solid #D4AF37; background-color: #D4AF37;}
}
@media all and (max-width: 99999px) and (min-width: 960px){
.mainmenustudiosco {  padding: 4px 20px 4px 15px; font-size: 16px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
a.mainmenunewstudiosco:link, a.mainmenunewstudiosco:visited { color: #D4AF37!important; border:2px solid #D4AF37; background-color: transparent}
a.mainmenunewstudiosco, a.mainmenunewstudiosco:hover {background-color: #D4AF37; color: #fff!important; }
a.mainmenunewactivestudiosco:link, a.mainmenunewactivestudiosco:visited {color: #fff!important; border:2px solid #D4AF37; background-color: #D4AF37;}
}




@media all and (max-width: 959px) {
.mainmenustudiosdd { padding: 2px 20px 4px 20px;   font-size: 26px; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; }
a.mainmenunewstudiosdd:link, a.mainmenunewstudiosdd:visited { color: #d6017e!important; border:2px solid #d6017e; background-color: transparent}
a.mainmenunewstudiosdd, a.mainmenunewstudiosdd:hover {background-color: #d6017e; color: #fff!important; }
a.mainmenunewactivestudiosdd:link, a.mainmenunewactivestudiosdd:visited {color: #fff!important; border:2px solid #d6017e; background-color: #d6017e;}
}
@media all and (max-width: 99999px) and (min-width: 960px){
.mainmenustudiosdd {  padding: 4px 20px 4px 15px; font-size: 16px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
a.mainmenunewstudiosdd:link, a.mainmenunewstudiosdd:visited { color: #d6017e!important; border:2px solid #d6017e; background-color: transparent}
a.mainmenunewstudiosdd, a.mainmenunewstudiosdd:hover {background-color: #d6017e; color: #fff!important; }
a.mainmenunewactivestudiosdd:link, a.mainmenunewactivestudiosdd:visited {color: #fff!important; border:2px solid #d6017e; background-color: #d6017e;}
}



@media all and (max-width: 959px) {
.mainmenustudioshe { padding: 2px 20px 4px 20px;   font-size: 26px; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; }
a.mainmenunewstudioshe:link, a.mainmenunewstudioshe:visited { color: #34b900!important; border:2px solid #34b900; background-color: transparent}
a.mainmenunewstudioshe, a.mainmenunewstudioshe:hover {background-color: #34b900; color: #fff!important; }
a.mainmenunewactivestudioshe:link, a.mainmenunewactivestudioshe:visited {color: #fff!important; border:2px solid #34b900; background-color: #34b900;}
}

@media all and (max-width: 99999px) and (min-width: 960px){
.mainmenustudioshe { padding: 4px 20px 4px 15px; font-size: 16px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
a.mainmenunewstudioshe:link, a.mainmenunewstudioshe:visited { color: #34b900!important; border:2px solid #34b900; background-color: transparent}
a.mainmenunewstudioshe, a.mainmenunewstudioshe:hover {background-color: #34b900; color: #fff!important; }
a.mainmenunewactivestudioshe:link, a.mainmenunewactivestudioshe:visited {color: #fff!important; border:2px solid #34b900; background-color: #34b900;}
}

@media all and (max-width: 959px) {
.mainmenustudiosmm { padding: 2px 20px 4px 20px;   font-size: 26px; border-radius: 26px; -webkit-border-radius: 26px; -moz-border-radius: 26px; }
a.mainmenunewstudiosmm:link, a.mainmenunewstudiosmm:visited { color: #0050c1!important; border:2px solid #0050c1; background-color: transparent}
a.mainmenunewstudiosmm, a.mainmenunewstudiosmm:hover {background-color: #0050c1; color: #fff!important; }
a.mainmenunewactivestudiosmm:link, a.mainmenunewactivestudiosmm:visited {color: #fff!important; border:2px solid #0050c1; background-color: #0050c1;}
}

@media all and (max-width: 99999px) and (min-width: 960px){
.mainmenustudiosmm {padding: 4px 20px 4px 15px; font-size: 16px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;}
a.mainmenunewstudiosmm:link, a.mainmenunewstudiosmm:visited { color: #0050c1!important; border:2px solid #0050c1; background-color: transparent}
a.mainmenunewstudiosmm, a.mainmenunewstudiosmm:hover {background-color: #0050c1; color: #fff!important; }
a.mainmenunewactivestudiosmm:link, a.mainmenunewactivestudiosmm:visited {color: #fff!important; border:2px solid #0050c1; background-color: #0050c1;}
}



.mainmenu { border-radius: 15px;-webkit-border-radius: 15px; -moz-border-radius: 15px;}
/*a.mainmenunew:link, a.mainmenunew:visited { color: #fff!important; border:1px solid #fff; background-color: transparent}
a.mainmenunew, a.mainmenunew:hover {background-color: transparent; color: #fff!important;  border:1px solid #fff;}*/
a.mainmenunewactive:link, a.mainmenunewactive:visited {color: #7218e0!important; border:2px solid #fff; background-color: #fff;}


.navmain {  position: relative; font-size: 16px; font-weight: bold; margin-bottom: -4px;padding-inline-start: 0px;}
.navmain ul { list-style-type:none; margin:0; padding:0;  }
.navmain li {     display: inline-block;    margin:0 2px 12px 2px;}
.navmain a { border: 2px solid rgba(255, 255, 255, 0.3);padding: 4px 10px 4px 14px;  margin:0 2px 12px 2px; text-decoration:none; -webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important;  }
.navmain a:hover { border: 2px solid rgba(255, 255, 255, 0.4);background-color: rgba(255, 255, 255, 0.2);}


/*color body ID's */
@media all and (max-width: 99999px) and (min-width: 960px){
.mainmenunew .fa, .mainmenunew .fas, .mainmenunew .fab, .mainmenunew .far,
.mainmenunew:link .fa, .mainmenunew:link .fas, .mainmenunew:link .fab, .mainmenunew:link .far
	{color: #fff!important; font-size: 15px; margin:0px 4px 0px -6px;}
	
.mainmenunew:hover .fa, .mainmenunew:hover .fas, .mainmenunew:hover .fab, .mainmenunew:hover .far
{color: #fff!important; font-size: 15px!important; }
	
.mainmenunewactive .fa, .mainmenunewactive .fas, .mainmenunewactive .fab, .mainmenunewactive .far
{ border:2px solid #fff; color: #7218e0!important; font-size: 14px!important; margin:0px 4px 0px -6px;}

	

	
}

	.mainmenunewactive:hover
{ border:2px solid #fff; color: #7218e0!important;  background-color: rgba(255, 255, 255, 1)!important;}

@media all and (max-width: 961px) {
.mainmenunew .fa, .mainmenunew .fas, .mainmenunew .fab, .mainmenunew .far, .mainmenunew:link .fa, .mainmenunew:link .fas, .mainmenunew:link .fab, .mainmenunew:link .far 
	{color: #fff!important; font-size: 22px; margin:0px 4px 0px -6px;}

.mainmenunew:hover 
{color: #fff!important; font-size: 20px!important; }
	
	.mainmenunew:hover .fa, .mainmenunew:hover .fas, .mainmenunew:hover .fab
{color: #fff!important; font-size: 14px!important; margin:0px 4px 0px -6px; }
	
.far, .mainmenunewactive .fa, .mainmenunewactive .fas, .mainmenunewactive .fab, .mainmenunewactive .far
{color: #7218e0!important; font-size: 14px!important; margin:0px 4px 0px -6px; }
}





#purple h1, #purple h3, #purple h5, #purple .texttitle, #purple .fa, #purple .far, #purple .fas, #purple .fab {color: #7218e0;}
#purple .packagebg {background-color: rgba(114, 24, 224, 0.1) !important;margin-top:10px; padding-top: 20px;padding: 20px;}
#purple .circle { background-color: #7218e0; }
#purple .calltoaction {display:inline; white-space: nowrap; font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #7218e0; border:1px solid #7218e0; padding: 9px 25px 9px 25px!important; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#purple .calltoaction:hover, #purple .calltoaction:active {color: #fff!important; border:1px solid #d6017e; background-color: #d6017e; }

#purple .calltoactionhollow {display:inline; white-space: nowrap; font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:normal; text-transform: lowercase; line-height: 27px; color: #7218e0!important; background-color: transparent; border:2px solid #7218e0; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#purple .calltoactionhollow:hover, #purple .calltoactionhollow:active {color: #d6017e!important; border:2px solid #d6017e; background-color: transparent; }


#red h1, #red h3, #red h5, #red .texttitle, #red .fa, #red .far, #red .fas, #red .fab {color: #d6017e;}
.faicon {color: #fff!important;}
#red .packagebg {background-color: rgba(214, 1, 216, 0.1) !important;margin-top:10px; padding-top: 20px;}
#red .circle { background-color: #d6017e; }
#red .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #d6017e; border:1px solid #d6017e; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#red .calltoaction:hover, #red .calltoaction:active {color: #fff!important; border:1px solid #ec49a9; background-color: #ec49a9; }


#blue h1, #blue h3, #blue h5, #blue .texttitle, #blue .fa, #blue .far, #blue .fas, #blue .fab {color: #0050c1;}
#blue .packagebg {background-color: rgba(0, 80, 193, 0.1) !important;margin-top:10px; padding-top: 20px;}
#blue .circle { background-color: #0050c1; }
#blue .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #0050c1; border:1px solid #0050c1; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#blue .calltoaction:hover, #blue .calltoaction:active {color: #fff!important; border:1px solid #236cd4; background-color: #236cd4; }

#green h1, #green h3, #green h5, #green .texttitle, #green .fa, #green .far, #green .fas, #green .fab {color: #34b900;}
#green .packagebg {background-color: rgba(52, 185, 0, 0.1) !important;margin-top:10px; padding-top: 20px;}
#green .circle { background-color: #34b900; }
#green .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #34b900; border:1px solid #34b900; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#green .calltoaction:hover, #green .calltoaction:active {color: #fff!important; border:1px solid #4ec91e; background-color: #4ec91e; }

#black h1, #black h3, #black h5, #black .texttitle, #black .fa, #black .far, #black .fas, #black .fab {color: #000;}
#black .packagebg {background-color: rgba(0, 0, 0, 0.1) !important;margin-top:10px; padding-top: 20px;}
#black .circle { background-color: #000; }
#black .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #000; border:1px solid #000; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#black .calltoaction:hover, #black .calltoaction:active {color: #fff!important; border:1px solid #000; background-color: #000; }


#platinum h1, #platinum h3, #platinum h5, #platinum .fa, #platinum .fas, #platinum .fab, #platinum .texttitle {color: #585958;}
#platinum .packagebg {background-color: rgba(88, 89, 88, 0.1) !important;margin-top:10px; padding-top: 20px;}
#platinum .circle { background-color: #585958; }
#platinum .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #585958; border:1px solid #585958; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#platinum .calltoaction:hover, #platinum .calltoaction:active {color: #fff!important; border:1px solid #848484; background-color: #848484; }


#wordpress h1, #wordpress h3, #wordpress h5, #wordpress .fa, #wordpress .fas, #wordpress .fab, #wordpress .texttitle {color: #267699;}
#wordpress .packagebg {background-color: rgba(38, 118, 153, 0.1) !important;margin-top:10px; padding-top: 20px;}
#wordpress .circle { background-color: #267699; }
#wordpress .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:bold; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #267699; border:1px solid #267699; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#wordpress .calltoaction:hover, #wordpress .calltoaction:active {color: #fff!important; border:1px solid #4495b8; background-color: #4495b8; }


/*
.bronzetexttitle {  color:#c78230; }
.silvertexttitle {  color:#b3b3b3; }
.goldtexttitle {  color:#D4AF37; }*/


#bronze h1, #bronze h3, #bronze h5, #bronze .texttitle, #bronze .fa, #bronze .far, #bronze .fas, #bronze .fab {color: #c78230;}
#bronze .packagebg {background-color: rgba(199, 130, 48, 0.1) !important;margin-top:10px; padding-top: 20px;}
#bronze .circle { background-color: #c78230; }
#bronze .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:normal; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #c78230; border:1px solid #c78230; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#bronze .calltoaction:hover, #bronze .calltoaction:active {color: #fff!important; border:1px solid #dfab6c; background-color: #dfab6c; }

#silver h1, #silver h3, #silver h5, #silver .texttitle, #silver .fa, #silver .far, #silver .fas, #silver .fab {color: #939393;}
#silver .packagebg {background-color: rgba(179, 179, 179, 0.1) !important;margin-top:10px; padding-top: 20px;}
#silver .circle { background-color: #939393; }
#silver .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:normal; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #939393; border:1px solid #939393; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#silver .calltoaction:hover, #silver .calltoaction:active {color: #fff!important; border:1px solid #cccccc; background-color: #cccccc; }


#gold h1, #gold h3, #gold h5, #gold .texttitle, #gold .fa, #gold .far, #gold .fas, #gold .fab {color: #D4AF37;}
#gold .packagebg {background-color: rgba(212, 175, 55, 0.1) !important;margin-top:10px; padding-top: 20px;}
#gold .circle { background-color: #D4AF37; }
#gold .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:normal; text-transform: lowercase; line-height: 27px; color: #fff!important; background-color: #D4AF37; border:1px solid #D4AF37; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#gold .calltoaction:hover, #gold .calltoaction:active {color: #fff!important; border:1px solid #debd53; background-color: #debd53; }



#white .calltoaction {font-family: 'Montserrat', sans-serif, Arial; font-size: 18px; font-weight:normal; text-transform: lowercase; line-height: 27px; color: #000!important; background-color: #fff; border:1px solid #fff; padding: 9px 25px 9px 25px; text-decoration:none;  border-radius: 80px; -webkit-border-radius: 80px;  -moz-border-radius: 80px; margin:20px 0 0 0; cursor: pointer; }
#white .calltoaction:hover, #white .calltoaction:active {color: #000!important; border:1px solid #ccc; background-color: #ccc; }



#footer .fa {color: #fff;}
#footer .fa:hover {color: #7218e0;}



@media all and (max-width: 959px) {
h1 {    margin: 0px 0 0 0; font-size: 34px; padding: 0px 0 10px 0; letter-spacing: -2px; line-height: 48px; text-align: center;
	
	-webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}

}

@media all and (max-width: 99999px) and (min-width: 960px){
h1 {   /*max-width: 700px;*/
    margin: auto;
    margin-top: 10px; font-size: 44px; padding: 0px 0 10px 0; letter-spacing: -2px; line-height: 56px;  text-align: center;
		-webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;

}
	
	.h1hero {   
    margin-top: 50px; 
}
}



h2 {margin: 0; font-size:22px; font-weight: bold;  padding:0px 0px 30px 0; line-height: 32px;  
	    text-align: center;
	-webkit-animation-duration: 0.9s;
-moz-animation-duration: 0.9s;
-o-animation-duration: 0.9s;
animation-duration: 0.9s;

	-webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
 
}

h3 {margin: 0; font-size:18px; padding:0 ;    }
h4 {font-weight: bold; margin:0; padding:0;}
h5 {font-size: 30px;  margin: 21px 0 0 0; padding: 0px 0 20px 0;  text-align: center; line-height:38px;}

h6 {font-size: 24px;  margin: 0px 0 0 0; padding: 0px 0 20px 0;  text-align: center; line-height:38px; font-weight: bold!important; } /*testimonial quote*/
h7 {font-size: 17px;  margin: 21px 0 0 0; padding: 0px 0 20px 0;  text-align: center; line-height:20px;} /*testimonial name*/

hr {margin: 0;
    padding: 0;
    border: 0;
    height: 1px;
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));} /* */

.hr1 {margin: 0;
    padding: 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));}/* */

.hr2 {border:1px dashed #34b900; margin-botton:10px;}
.hr3 {border:1px dashed #0e0775; margin-botton:10px;}

.inner {margin:auto; max-width:1200px; padding:16px;}

.arrowr{float:right; font-size:38px;}
.arrowl{float:left; font-size:38px;}




.navmainfooter {  left: -17px;    position: relative; font-size: 20px; font-weight: bold; margin-bottom: -4px;}
.navmainfooter ul { list-style-type:none; margin:0; padding:0;  }
.navmainfooter li {     display: inline-block;    margin:0 2px 12px 2px;}
.navmainfooter a { padding: 4px 10px 4px 10px;  text-decoration:none; -webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important; }

select.formnavmain { 
-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;
	
 width:100%; clear:both;
font-family:'Didact Gothic', sans-serif, 'Didact Gothic';
font-size:30px;
padding: 0px 0px 6px 12px;
margin:6px 0 6px 0;
color:#000000;
background-color: #fff;
border-color: #fff;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
z-index:10;
position:relative;
cursor: pointer;
}
	

@media all and (max-width: 959px) {
.mobformmain{padding: 1px 3px 0px 19px; z-index:10;position:relative; width:65px; float:right;top: 4px; }
		.navmain{display:none;}
	}
@media all and (max-width: 99999px) and (min-width: 960px){
form.mobformmain, form.mobformsub {display:none;}

	
	}




select.formnavmainstudios { 
-webkit-appearance: none; 
-moz-appearance: none;
appearance: none;
	
 width:100%; clear:both;
font-family:'Didact Gothic', sans-serif, 'Didact Gothic';
font-size:30px;
padding: 0px 0px 6px 12px;
margin:6px 0 6px 0;
color:#000000;
background-color: #fff;
border-color: #fff;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
z-index:10;
position:relative;
cursor: pointer;
}
	

@media all and (max-width: 959px) {
.mobformmainstudios{padding: 1px 3px 0px 19px; z-index:10;position:relative; width:65px; float:right;top: 4px; }
	
	}
@media all and (max-width: 99999px) and (min-width: 960px){
form.mobformmainstudios, form.mobformsubstudios {display:none;}

	
	}


.cluster {z-index:2;  position: relative; background-color: rgba(255, 255, 255, 1); padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0;}

#purple .clusterhome { padding: 0px; text-align:center; margin: auto; margin-bottom: 0; /*opacity:0.7;*/ /*background-image:linear-gradient(160deg,rgba(114, 24, 224, 1) 0%,rgba(214, 1, 126, 1) 100%);*/}

#purple .cluster {color:#fff;  padding: 0px; text-align:center; margin: auto; margin-bottom: 0; /*opacity:0.7;*/ background-image:linear-gradient(160deg,rgba(114, 24, 224, 1) 0%,rgba(114, 24, 224, 1) 100%);}
/*rgba(214, 1, 126, 1) */
#blue .cluster {color:#fff;  padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0; opacity:1; background-image:linear-gradient(160deg,rgba(0, 80, 193, 1) 0%,rgba(0, 80, 193, 1) 100%);}
/*rgba(114, 24, 224, 1) */
#green .cluster {color:#fff; padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0; opacity:1; background-image:linear-gradient(160deg,rgba(52, 185, 0, 1) 0%,rgba(52, 185, 0, 1) 100%);}
#whatsappgreen .cluster {color:#fff; padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0; opacity:1; background-image:linear-gradient(160deg,rgba(52, 185, 0, 1) 0%,rgba(52, 185, 0, 1) 100%);}
/*rgba(52, 185, 0, 1) */
#red .cluster {color:#fff;  padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0; opacity:1;
background-image:linear-gradient(160deg,rgba(214, 1, 126, 1) 0%,rgba(214, 1, 126, 1) 100%);}
/*rgba(52, 185, 0, 1) */
.clusterwhite { background-color:#fff; padding: 0px; text-align:center; margin: auto; margin-top: 0; margin-bottom: 0;}
.cluster-portfolio h3 a {margin:0; color:#000000; text-decoration:none; font-size: 17px;  text-align:center;}

/*PORTFOLIO*/
.title, .title a:link {color:#fff; margin-bottom: 10px; padding: 10px; max-width: 400px; line-height: 32px; border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; text-decoration:none!important;}
.title a:hover, .title:hover {color:#fff!important; background-color:#000000!important; text-decoration:none!important;}



/*colors START*/



.circle {   max-width: 50px;    margin: auto;    border-radius: 38px;    height: 48px; margin-bottom: -8px;
    position: relative;}



.purplepackagebg {background-color: rgba(114, 24, 224, 0.1) !important;margin-top:10px; padding-top: 20px;}


.red {      background-color: #d6017e; color: #d6017e;  }
.orange {      background-color: #7218e0;color: #7218e0; }
.purple {      background-color: #7218e0;color: #7218e0; }
.black { background-color:rgba(255,255,255,0.7); }
.yellow { background-color:rgba(255,255,255,0.7); color:#000000; }
.red { background-color:rgba(255,255,255,0.7); color:#000000; }
.green { background-color:rgba(255,255,255,0.7); color:#000000; }
.blue { background-color:rgba(255,255,255,0.7); color:#000000; }
.pink {      background-color: #d6017e;   color: #d6017e;  }


.redtext {  color:#d6017e; }
.greentext {  color:#34b900; }
.bluetext {  color:#0050c1; }
.pinktext {  color:#d6017e; }
.platinumtexttitle {  color:#585958; }
.purpletexttitle {  color:#7218e0; }

.bronzetexttitle {  color:#c78230; }
.silvertexttitle {  color:#b3b3b3; }
.goldtexttitle {  color:#D4AF37; }
.orangetext {  color:#7218e0; }
.purpletext {  color:#7218e0; }
.blacktext {  color:#000000; }
.wordpresstexttitle {  color:#267699; }

/*
.calltoactionpurple {z-index:20; font-family: 'Montserrat', sans-serif, Arial;
    font-size: 24px; font-weight:bold; text-transform: uppercase;
    line-height: 27px; color: #fff!important; background-color: #7218e0; border:1px solid #7218e0; padding: 6px 20px 6px 20px; text-decoration:none;  border-radius: 80px;
-webkit-border-radius: 80px; 
-moz-border-radius: 80px; margin:20px 0 20px 0; cursor: pointer; }
.calltoactionpurple:hover, .calltoactionpurple:active {color: #fff!important; border:1px solid #7218e0; background-color: #8433e7; }

*/
.calltoactionwordpress {font-family: 'Montserrat', sans-serif, Arial;
    font-size: 17px; font-weight:bold; text-transform: uppercase;
    line-height: 27px; color: #fff!important; background-color: #267699; border:1px solid #267699; padding: 4px 20px 4px 20px; text-decoration:none;  border-radius: 80px;
-webkit-border-radius: 80px; 
-moz-border-radius: 80px; margin:20px 0 20px 0; cursor: pointer; }
.calltoactionwordpress:hover, .calltoactionwordpress:active {color: #fff!important; border:1px solid #3a90b5; background-color: #3a90b5; }



/*colors END*/





@media all and (max-width: 99999px) and (min-width: 960px){
	.content {  
 font-weight:normal;
 font-size: 17px;
 line-height:27px;
 /*text-align:left;*/

 }
}

@media all and (max-width: 959px) {	
.content {  
 font-weight:normal;
 font-size: 17px;
 line-height:27px;
 text-align:center;

    position: relative;
 }}







 @media all and (max-width: 1000px) {
	 .columns {max-width: 496px;
display: inline-table;
margin-right: 1px;}
 }
 @media all and (max-width: 99999px) and (min-width: 1001px){
.columns {max-width: 496px;
display: inline-table;
margin-right: 50px;}
 }
 
.divider {border-top:1px dashed #000000; background: rgba(255,255,255,.6); margin: auto; color:#000000; text-align:center;}


.divider .inner {font-size: 15px;
max-width: 1200px;
margin: auto;
text-align: center;
display: inline-block;
height: 30px;}

.divider a { color:#000000; text-decoration:none;}
.divider a:hover {color:#fff; text-decoration:underline;}

.form-field {
border:none;
color:#c5c5c5;
display:block;
font-size:20px;
font-weight:bold;

margin: 0 0 10px 0;
padding:10px 10px 10px 10px ;
width:262px;
text-align:left;
-webkit-appearance: none;
}

.form-submit {
background-color:#adc67a;
border:none;
color:#FFFFFF;
cursor:pointer;
font-size:20px;
font-weight:bold;
height:54px;
padding:10px 20px;
width:282px;
-webkit-appearance: none;
}
.form-submit:hover {
background-color:#669900;

}



.max-width-portfolio {width:100%; max-width: 800px;}

.facosts {font-size: 33px!important;
    margin: 0px -1px 0px 0px;}
.fa-r {padding-left:5px;}
.fa-l {padding-right:5px;}
.fa-m {padding-right:5px;}
.textdetail{border-bottom: 1px dashed; cursor:pointer; }
.info:link {color:#0CF; border-bottom: 1px dashed #000000; text-decoration: none;}
.info:hover {color:#fff; text-decoration: none;}
input[type='submit']
{padding:4px 12px 4px 12px; font-size:19px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; -webkit-transition: all 0.3s ease 0s!important;
  -moz-transition: all 0.3s ease 0s!important;
  -o-transition: all 0.3s ease 0s!important;
  transition: all 0.3s ease 0s!important; 
}









.navbubble { white-space: nowrap; }
.navbubble ul { list-style-type:none; margin:0; padding:0;  }
.navbubble li { display:inline; margin: 0 2px 0 2px; width:100px;}
.navbubble a { padding: 5px 26px 5px 26px; color:#fff; text-decoration:none;  border-radius: 100px;
-webkit-border-radius: 100px; 
-moz-border-radius: 100px;}
.navbubble a:hover {color:#fff; text-decoration:none;}




.p1 {margin:0; padding:0; margin-bottom:20px; text-justify:auto; font-weight:bold;}
.p2 {margin:0; padding:0; margin-bottom:20px; text-justify:auto; color:#5d5d5d;}

select
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
}


footer {  }
footer .content {text-align: center; padding:20px 10px 20px 10px; color:#000000; /*background: linear-gradient(white, transparent);*/}
footer .inner {margin:auto; max-width:1200px; padding:20px;}
.contactus {    padding: 24px; }
.lozenge {
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
padding: 0px 14px 0px 14px;
color: #fff;
font-size: 11px;
opacity: 1;
margin-right: 5px;
position: relative;
margin-top: 5px;
white-space: nowrap;
display: inline-block;
cursor:default;
}

.lozenge a {border-bottom:1px dashed; }
.lozenge:hover{text-decoration:none; color:#fff !important; opacity:0.6;}

.aa { background-color:#C90;}
.css { background-color:#f08994;}
.design {background-color:#fb6703;}
.html5 {background-color:#3e7cbb;}
.print {background-color:#669900;}
.webdesign { background-color: #7bcb92;}
.responsive { background-color: #8e63ce;}
.retina { background-color:#e44d26;}

.other3 {background-color:#fb6703;}

/*.blue { background-color:#3e7cbb;}*/



	

.hiremenu {
padding: 4px 10px;
background-color: #b74900;
color: #fff;}

.hiremenu:hover {
background-color: #b74900;
}











.hiremesubmit {margin: 5px;
padding: 8px 20px;
background: rgba(0,153,204,1);
color: #fff;
font-size: 25px;
text-decoration: none;
border:0px;
cursor:pointer;}

.hiremesubmit:hover {
background-color: #000000;
color:#fff;
}


/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 3;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 3;
    animation:fadeIn ease-in 3;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    animation-duration:3s;
}



.fade-in-one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
 
.fade-in-two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay:1.7s;
animation-delay:1.7s;
}

.fade-in-three {
-webkit-animation-delay: 2.8s;
-moz-animation-delay: 2.8s;
animation-delay: 2.8s;
}

.fade-in-four {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
animation-delay: 0.9s;
}

.fade-in-five {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}

.fade-in-six {
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
animation-delay: 1.1s;
}

.fade-in-seven {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}

.fade-in-eight {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}

.fadeInDown{

-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}

.animated{-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: 0.1s;

}



	

@media all and (max-width: 1000px) {
.col1{ display:inline-block; width:100%; background: rgba(0,0,0,.2); margin: 10px 0 0 0;}
.col1 .inner {padding:10px 30px;}

.mobformmain{padding: 10px; z-index:10; position:relative;  margin: 0px 8px 8px 0px;  border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;}


.nav {background-color:#000000;}






.socialvisit {
max-width: 1000px;
margin: auto;
text-align: center;
display: inline-block;

margin: 10px 10px 20px 10px;
}


.socialvisitglobal{
	font-size: 47px;
	height: 56px;
width: 70px;
padding: 12px 0 1px 0;
margin: 15px;
position: relative;
float: left;
text-align: center;
text-decoration:none!important;
opacity:0.6;
border-radius: 80px;
-webkit-border-radius: 80px; 
-moz-border-radius: 80px;
	}
	
	a .socialvisitglobal { color:#fff; text-decoration:none!important;}
a:hover .socialvisitglobal {color:#d6017e; text-decoration:none!important;}
	
}

@media all and (max-width: 99999px) and (min-width: 1001px){
.col1{ display:inline-block; min-width: 400px; max-width:400px; /*background: rgba(255,255,255,.1);*/ padding:0 20px; margin: 20px 20px 0 0; white-space:nowrap;}






.socialvisit {
max-width: 1000px;
margin: auto;
text-align: center;
display: inline-block;
height: 24px;
margin: 0px 0 20px 0;
}

.socialvisitglobal{
	font-size: 17px;
	height: 20px;
width: 30px;
padding:3px 0 7px 0;
margin: 5px;
position: relative;
float: left;
text-align: center;
text-decoration:none!important;
opacity:0.6;
border-radius: 80px;
-webkit-border-radius: 80px; 
-moz-border-radius: 80px;
	}
}

.socialvisit a {    opacity: 0.6; color:#000000;}
.socialvisit a:hover {    opacity: 1.0; color:#d6017e;}




/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 10px ;
    border-radius: 6px;
	margin:0 0 0 20px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}




* { box-sizing: border-box; }




 .fb-messenger {
        margin: 30px 5px 20px;
      }

      .fb-messenger div {
            border-radius: 4px;
    background: #0084ff;
    color: #fff;
    font-size: 16px;
    padding: 3px 16px;
    display: inline-block;
    font-family: helvetica, arial, sans-serifnn;
    white-space: nowrap;
    font-weight: bold;
      }

      .fb-messenger a {
        cursor:pointer;
        text-decoration:none;
      }

.fb-messenger-nav {
        margin:0;
      }

      .fb-messenger-nav div {
            border-radius: 4px;
    background: #0084ff;
    color: #fff;
    font-size: 16px;
    padding: 3px 16px;
    display: inline-block;
    font-family: helvetica, arial, sans-serifnn;
    white-space: nowrap;
    font-weight: bold;
      }

      .fb-messenger-nav a {
        cursor:pointer;
        text-decoration:none;
      }

/*stuff moved from the nav page */

@media screen and (max-width: 959px){
.mainmenu {
	
		border-radius: 21px!important;
    -webkit-border-radius: 21px!important;
    -moz-border-radius: 21px!important;
	}
			}
	
	/* [ON BIG SCREEN] */
/* Wrapper */
#page-nav {
  width: 100%;
 
  /* If you want the navigation bar to stick on top
  position: sticky;
  top: 0;
  */
}

/* Hide Hamburger */
#page-nav label, #hamburger {
  display: none;
}

/* Menu Items */
	@media screen and (max-width: 959px){
#page-nav ul {
  list-style-type: none;
  margin: 14px 0 30px 0;
  padding: 0; 
font-size: 20px;

}}
	@media screen and (max-width: 959px){
#page-nav ul li {
  display: inline-block;
  padding: 10px 0 0px 0;
  box-sizing: border-box;
}}

#page-nav ul li a {
  color: #fff;

}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 959px){
  /* Show Hamburger */
  #page-nav label {
    display: block;
 cursor: pointer;
   text-align: right;

   font-size: 40px;
    margin: 0px 0 -3px 0px;
	      top: 2px;
	  padding-top:-63px;
	  right: 10px;
    position: relative;
  }

  /* Break down menu items into vertical */
  #page-nav ul li {
    display: block;
  }
  #page-nav ul li {
    /*border-top: 1px solid #333;*/
  }

  /* Toggle show/hide menu on checkbox click */
  #page-nav ul {
    display: none;
  }
  #page-nav input:checked ~ ul {
    display: block;
  }
}


/*PORTFOLIO PAGES*/

#portfoliopanel .portfoliopanels h1 {    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    letter-spacing: 0px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 12px;
	padding-bottom: 10px;
	margin-top:0px;
}
#portfoliopanel .portfoliopanels h2 {    font-size: 16px;
    line-height: 25px;
    font-weight: normal;
    letter-spacing: 0px;
text-align:justify;}


@media (max-width: 99999px) and (min-width: 960px){
.portfoliopanel { padding: 17px;
margin-right: 10px;
display: inline-block;
border-radius: 0px;
margin-bottom: 0px; /*was 26px;*/

vertical-align: top;
}}

@media (max-width: 961px){
.portfoliopanel { padding: 0;
display: inline-block;
border-radius: 0px;
margin-bottom: 26px;

vertical-align: top;
}}

@media (max-width: 961px){
.portfoliopanels {max-width: 550px; padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 6px;
vertical-align: top;

}
	.portfoliopanelstrio {max-width: 350px; padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 6px;
vertical-align: top;

}
}

@media (max-width: 99999px) and (min-width: 960px){
.portfoliopanels {max-width: 450px; /*min-width: 500px;*/ padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 6px;
vertical-align: top;

}
	

.portfoliopanelstrio {max-width: 550px; min-width: 300px; padding: 0px 10px;

display: inline-block;
border-radius: 0px;
margin-bottom: 6px;
vertical-align: top;

}

}

.image-container {
  width: 200px; /* Or any size */
  height: 200px; /* Must match width for a perfect circle */
  border-radius: 50%; /* Makes the container circular */
  overflow: hidden; /* Hides parts of the image outside the circle */
  display: inline-block; /* Or block, flex, etc., depending on layout */
}

.circular-image {
  width: 100%; /* Makes image fill container width */
  height: 100%; /* Makes image fill container height */
  object-fit: cover; /* Ensures image covers the area without distortion */
  display: block; /* Removes extra space below image */
}




@media (max-width: 961px){
  .mobile-break {
    display: inline;
  }
	  .desktop-break {
    display: none;
  }
}

@media (max-width: 99999px) and (min-width: 960px){
  .desktop-break {
    display: inline;
  }
	  .mobile-break {
    display: none;
  }
}

.service-images {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.service-images a {
  display: block;
}

.service-images img {
  width: 100%;
  max-width: 280px;
	border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; 
}


.shimmer-text {
  font-weight: 800;
/*  font-size: clamp(2rem, 6vw, 4rem);*/
  line-height: 1.1;

  /* Hide the actual text colour */
  color: transparent;

  /* Background image that will move */
  background-image: linear-gradient(
    110deg,
    #9e26a1 0%,
    #6820d8 25%,
    #f7ea1d 50%,
    #9e26a1 75%,
    #9e26a1 100%
  );

  background-size: 300% 100%;
  background-position: 0% 50%;

  /* Clip background to text */
  -webkit-background-clip: text;
  background-clip: text;

  /* Animation */
  animation: shimmer-move 3s linear infinite;
}

/* Keyframes to move the background */
@keyframes shimmer-move {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}


.blur {-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
	background-color: #ffffff80;}

.circle-image {
  width: 45px;        /* or 100%, or any size */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.3);
	padding: 2px;
}