@font-face {
	font-family: 'Century Gothic';
	font-weight: normal;
	font-style: italic;
	src: url('/fonts/CenturyGothic-Italic.eot');
	src: local('/fonts/Century Gothic Italic'), local('../fonts/CenturyGothic-Italic'),
		url('/fonts/CenturyGothic-Italic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic-Italic.woff') format('woff'),
		url('../fonts/CenturyGothic-Italic.ttf') format('truetype');
}

@font-face {
	font-family: 'Century Gothic';
	font-weight: normal;
	font-style: normal;
	src: url('/fonts/CenturyGothic.eot');
	src: local('/fonts/Century Gothic'), local('../fonts/CenturyGothic'),
		url('/fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic.woff') format('woff'),
		url('../fonts/CenturyGothic.ttf') format('truetype');
}

@font-face {
	font-family: 'Century Gothic';
	font-weight: bold;
	font-style: normal;
	src: url('/fonts/CenturyGothic-Bold.eot');
	src: local('/fonts/Century Gothic Bold'), local('CenturyGothic-Bold'),
		url('/fonts/CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic-Bold.woff') format('woff'),
		url('../fonts/CenturyGothic-Bold.ttf') format('truetype');

}

@font-face {
	font-family: 'Century Gothic';
	font-weight: bold;
	font-style: italic;
	src: url('/fonts/CenturyGothic-BoldItalic.eot');
	src: local('/fonts/Century Gothic Bold Italic'), local('CenturyGothic-BoldItalic'),
		url('/fonts/CenturyGothic-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/CenturyGothic-BoldItalic.woff') format('woff'),
		url('../fonts/CenturyGothic-BoldItalic.ttf') format('truetype');

}


/*****COOKIES STYLING SECTION*************************************************************************************************/


#cookiePopup {
  background: #eada18;
  width: 1000px;
  position: fixed;
  z-index: 9998;
  left: 160px;
  bottom: 20px;
  box-shadow: 0px 0px 15px #cccccc;
  padding: 5px 10px;
}

  #cookiePopup p{
  text-align: left;
  font-size: 12px;
  color: black;
  font-family: Century Gothic;
  font-weight: lighter;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#cookiePopup h4 {
  font-family: Century Gothic;
  font-style: bold;
  font-size: 18px;
  margin-left: 10px;
  text-align: left;
  margin-top: 10px;
}

#acceptCookie {
  width: 200px;
  height: 40px;
  text-align: center;
  border: navajowhite;
  background-color: black;
  padding: 5px;
  /* border-radius: 10px; */
  color: white;

}

#acceptCookie:hover {
  cursor: pointer;
  background-color:white;
  color: black;
}

#declineCookie {
  width: 100px;
  height: 40px;
  text-align: center;
  border: navajowhite;
  background-color: grey;
  padding: 5px;
  /* border-radius: 10px; */
  color: white;
}

#declineCookie:hover {
  cursor: pointer;
  background-color:red;
  color: black;
}

.cookiebuttons {
  display: flex;
  margin: 10px;
  position: relative;
}
/****************************************************************************************************************************/
/***privacy policy***/
.bodycopy p{
    font-size:12px;
    font-weight: lighter;
}
.bodycopy h4 {
    font-size:20px;
    font-weight: bold;
}

/*******************/
      
/*header*/
/*****************************************************************************/

/*.headtop {
  background-image: url(texture2.jpg);
  background-size:cover;
}*/


#loadingspinner {
  background-color: transparent;
  position: absolute;
  z-index: 9999;
  animation: hide 4s forwards;
  animation-delay: 2s;
}

@keyframes hide {
  from {
   opacity: 1 ;
  }

  to 
  {
    opacity: 0;
    visibility: hidden;
  }
}


.spinner {
  width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 10px;
  background: radial-gradient(farthest-side,#eada18 95%,#0000) 45% 0/20px 20px no-repeat, radial-gradient(farthest-side,#0000 calc(100% - 3px),#eada18 calc(100% - 4px)) content-box;
  animation: s6 2s infinite;
}
@keyframes s6 {
  
  to {
    transform: rotate(1turn)
  }
}


.logospin img {
  width: 150px;
  z-index: 9999;
  position: absolute;
  transform: translate(45px, 35px);
}

.logospin {
  margin: 0px;
  position: absolute;
  transform: translate(300px, 20px);
  z-index: 9999;
}

.spinnercontainer {
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 230px;
  background-color:white;
  z-index:9999;
  animation: hide 2s forwards;
  animation-delay: 4s;
}

@keyframes hide {
  from {
   opacity: 1 ;
  }

  to 
  {
    opacity: 0;
    visibility: hidden;
  }
}


body::-webkit-scrollbar {
  width:10px;
  box-shadow: transparent;
}


body::-webkit-scrollbar-thumb {
  background-color: white;
}

/*navigation bar*/

#navBox {

  height: 300px;
  width: 505px;
  position: relative;
  margin: 10px;
  left: -30px;
  top: -30px;

  }


  #navBoxmask {
      position: absolute;
      top:-1px;
      left:1px;
      width:45%;
      height: 1px;
      background-color:#fff;
  }

  #navBoxmask img {
    width: 500px;
    position: absolute;
    padding: 20px;
    top: 0px;
    left: 0px;
    z-index: 9998;
  }
  

.sideBarNav {
    font-size:30px;
    font-family: "Century Gothic";
    font-weight: bold;
    line-height:10px;
    padding:10px;
    display: block;
    margin-left: -120px;
    
}

.sideBarNavdup {
  text-align: right;
  position: absolute;
  right: -360px;
  top: 215px;
}

.sideBarNav a {
    color:black;
    text-decoration: none;
}

svg{
    font   : bold 40px Century Gothic, Arial;
    width  : 100%;
    height : 100px;
  }
  
  text{
    fill            : none;
    stroke          : black;
    stroke-width    : .5px;
    stroke-linejoin : round;
  }

.sideBarNav a:hover {
    transition      :0.8s;
    transition-timing-function: 0.2;
    font-size       :45px;
    fill            : none;
    stroke          : #eada18;
    stroke-width    : .5px;
    stroke-linejoin : round;
}


.navsideline {
  background-color: black;
  width: 1px;
  height: 353px;
  position: absolute;
  right: 800px;
  top: 0px;
  animation: updown 14s forwards;
  animation-delay: 0.20s;
  transition: 5s;
  display: none;

}



.sideline {
  background-color:black;
  width: 5px;
  height: 50px;
  position: absolute;
  top: 250px; 
  animation: updown 8s forwards;
  animation-delay: 0.25s;
  transition: 2s;

}

@keyframes updown {
  from {
    position: absolute;
    top: 555px;
    height: 350px;
  }

  to {
    position: absolute;
    top: 250px;
  }
}



.blogsocial {
  width:100px;
 
}

.blogsocial img{
  width: 45px;
  position: absolute;
  right: 342px;
  top: 115px;
  transform: rotate(90deg);
}

.blogarrow img {
  text-align: left;
}

.blogarrow {

}




.text-flow2{
  display:none;
  width:100%;
  padding:0px;
  height: 40px;
  overflow: hidden;
  border:black;
  border-width: 2px;
  border-style: solid;
  border-right: none;
  border-left: none; 
  border-bottom:none;
  margin-top:20px;
  position:fixed;
  z-index: 9999;
  bottom:0px;
  background-color:transparent;
  background-image:linear-gradient(to top, rgba(245, 246, 252, 0.52), white),
  url(texture.jpg);
  background-size:cover;
 
  }


 
.text-flow2 p {
  display:none;
  font-style:normal;
  display:inline;
  color:black;
  background-color:white;
  font-size: 30px;
  font-weight:bold;
  height: 100%;
  width: 100%;
  justify-content: space-between;
}
.text-flow2 p {
  animation: imgBox 100s linear infinite;
}
@keyframes imgBox{
  0%{
    margin-right: 200%;
  }
  100%{
    margin-right: 0%;
  }
}



.logobtn {
    border-radius: 50%;
    border-style: none;
    outline: none;
    background: transparent;
    border: 1px solid transparent;
}

.logobtn img {
  width: 200px;
  padding: 15px;
  left: 20px;
  position: relative;

}

.logobtn:hover {
    cursor:pointer;
}

.salute {
  text-align: center;
  font   : bold 40px Century Gothic, Arial;
  font-size: 65px;
  opacity: 100;
  top:3px;
  position: relative;
  background-color:#eada18;
  background-image: linear-gradient(-45deg, white, white, black, black );
  background-size: 300%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  animation: animated_text 15s ease-in-out infinite;
	-moz-animation: animated_text 15s ease-in-out infinite;
	-webkit-animation: animated_text 15s ease-in-out infinite;
}

@keyframes animated_text {
	0% { background-position: 0px 50%; }
	50% { background-position: 100% 20%; }
	100% { background-position: 0px 50%; }
}

.salute-0 {
  text-align: center;
  font   : bold 40px Century Gothic, Arial;
  font-size: 30px;
  opacity: 100;
  top:3px;
  position: relative;
  background-color:#eada18;
  width:315px;
  margin-left:40px;
}


.salute img {
  width:100px;
  padding:20px;
  text-align: center;
}


.vidlogo{
    width:100%;
    background-image:linear-gradient(to bottom, rgba(245, 246, 252, 0.52), white),
    url(texture.jpg);
    background-size:cover;
}

.sidebarHeader {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    position:fixed;
    z-index: 9998;
    top: 300px;
   /* margin-left: 1174px;*/
    right: -145px;
    line-height:0px;
    padding: 10px;
    display: block;
    background-color:black;
    color: white;
    width:320px;
    animation: animatePopslide 2s;
    transition-delay: 0.1s;
}

  @keyframes animatePopslide {
    from {
      margin-left:1250px;
    }
    to {
      margin-left:1174px;
    }
}

.sidebarHeader h1 {
    padding:10px;
    font-family: "Century Gothic";
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.sidebarHeader img {
    width:50px;
}
/*
/*socials*/

.socials {
  text-align: right;
  justify-content:center;
  right:20px;
  position: absolute;

}


.socials p {
  text-align: center;
  font-weight:lighter;
  font-size: 12px;
  padding:10px;
  width:1280px;
 
}

.socialtxt {
  justify-content:center;
  text-align: center;
  font-weight: lighter;
  font-size: 12px;
  padding: 10px;
  position: absolute;
  margin-right:10px;
  width:100%;
}


.socials img {
  width:100px;
  align-content: center;
}

.socials img:hover {
  opacity:0;
  transition-delay: 0.2s;
  transition: 0.9s;
  cursor: pointer;
}

.sociallinkBtnA {
  width: 100px;
  align-content: right;
  background-color: transparent;
  border-style: none;
  right: 20px;
}

.sociallinkBtnA:hover {
  opacity: 100;
  width:100px;
  transition-delay: 0.20s;
  transition: 0.8s;
  background-image: url(CorBuilt\ Social\ Icons\ 2-02.png);
  background-size:contain;
}

.sociallinkBtnB {
  width: 100px;
  align-content: right;
  background-color: transparent;
  border-style: none;
  right: 20px;
}

.sociallinkBtnB:hover {
  opacity: 100;
  width:100px;
  transition-delay: 0.20s;
  transition: 0.8s;
  background-image: url(CorBuilt\ Social\ Icons\ 3-02.png);
  background-size:contain;
}

.sociallinkBtnC {
  width: 100px;
  align-content: right;
  background-color: transparent;
  border-style: none;
  right: 20px;
}

.sociallinkBtnC:hover {
  opacity: 100;
  width:100px;
  transition-delay: 0.20s;
  transition: 0.8s;
  background-image: url(CorBuilt\ Social\ Icons\ 1-02.png);
  background-size:contain;
}

.sociallinkBtnD {
  width: 100px;
  align-content: right;
  background-color: transparent;
  border-style: none;
  right: 20px;
}


/*end of header*/
/*****************************************************************************/


/*****************************************************************************/
/*body*/



body {
  width:100%;
  display: block;
  align-items: center;
  font-family: "Century Gothic";
  font-weight:bold;
  font-size: 25px;
  margin:0;

}



#about, #service, #portfolio, #contact { 
  display:none;
}


#about:target,#service:target,#portfolio:target, #contact:target {
  display:block;    
}



#profileinfo:target {
  display:block;    
}



/*ABOUT CSS*/


.profile {
  width:100%;
  padding-inline:5px;

}

.responsivegrid {
  display:contents;
}


.profile h6{
  text-align: center !important;
  padding:20px !important;
  margin:-12px;
  height:100px;
 
}

.profile h7{
 font-size:18px;
 text-align:center;
 display: inline-block;
 width: 280px;
 font-weight: lighter;
 color:black;
}

.profilename {
  width:280px;
  height:50px;
  box-sizing: border-box;
  line-height:45px;
  background-color: #eada18;
}

.profilename:hover {
  cursor:none;
  background-color: grey;
}

.profile h7:hover {
  cursor:none;
}

.profilebio {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.10s, opacity 0.5s;
  height: 0px;
  padding:0px;
  margin:0px;
 
}

.profile h7:hover, .profilename:hover + .profilebio {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
  transition: 0.9s;
  height:230px;
  padding:0px;
  margin:0px;
 
}


.txtstylin {
  content:"";
  display:block;
  width:278px;
  height:2px;
  background:#eada18;
  left:0; 
  top:0;
  
}

#profileinfo, #profileinfo_a, 
#profileinfo_b, #profileinfo_c {
  display:block;

}

#profileinfo:target, #profileinfo_a:target, 
#profileinfo_b:target, #profileinfo_c:target {
    display:block;    
}

.profile img {
  width:300px;
} 


/*
.profile img:hover {
  opacity: 80%;
  cursor:default;
  transition-delay: 1s;
  transition: 0.4s;
}*/



.mockup img{
  width:74px;
  margin:0;
}

.spacer {
  background-color:#eada18;
  height:2px;
  width:100%;

}

.container-text {
  display: flex;
  align-items: center;
  
}

.text-grid {
  display: grid;
  width:400px;
}

.text-grid a {
    text-align: center;
    text-decoration: none;
    background-color: black;
    height: 30px;
    color: white;
    padding: 5px;
}

.text-grid img {
  width:20px;
}

.text-grid-slogan svg {
  width:400px;
  line-height: 10px;
  text-align: center;
  height:80px;
}

.text-grid-slogan text {
  text-align: center;
}



.container-flx {
  display: flex;
  align-items: center;
  padding-top:50px;
  padding-bottom:50px;
}

.container-services {
  align-items: center;
  padding-top:50px;
  padding-bottom:50px;
}

.container-contacttxt {
  display:flex;
  align-items: center;
  padding-bottom:30px;
  margin-top:10px;

}

.container-contacttxt b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 45px;
  font-size: 45px;
  text-align: center;
  top: -25px;
}



.innertxt {
  font-weight: bold;
  color:#eada18;
  display: inline-block;
  padding-left: 10px;
  animation: textrotate 20s infinite;
  animation-delay: 1.5s;
  top: 0;
  left: 0;
  position: relative;

}

@keyframes textrotate {
  0% { top:0px; }
  5% { top:0px; }
  10% { top:-60px; }
  15%{ top:-60px; }
  20%{ top:-120px; }
  25%{ top:-120px; }
  30% { top:-170px; }
  35%{ top:-170px; }
  40%{ top:-230px; }
  45%{ top:-230px; }
  50%{ top:-285px; }
  55%{ top:-285px; }
  60%{ top: -340px; }
  70%{ top:-340px; }
  80%{ top:-455px; }
  90%{ top:-455px; }
}

.container-text img{
  width:349px;
  margin-left:40px;
  text-align: right;
  padding-left: 20px;

}


.container-box {
  padding:30px;
  display:inline-flex;

}

.container-box img {
  width:280px;
}


.container-txtbox {
  width:300px;
  margin-right:0px;
 

}

.container-txtbox h6 {
color:black;
font-family: "Century Gothic";
font-size: 20px; 
text-align: center;

}

.container-txtbox h4 {
  color:black;
  font-family: "Century Gothic";
  font-size: 15px;
  text-align: center;
  
  }

.container-txtbox p {
    color: grey;
    font-family: "Century Gothic";
    justify-content: center;
    font-weight: lighter;
    font-size: 14px;
    text-align: left;
    margin: 10px;
    padding: 5px;
    padding-bottom: 10px;

}

.signature {
  text-align: center;
  margin: 10px;
 
}

.signature img {
  align-content: center;
  width:200px;

}



.abtstyle {
    font-family: "Century Gothic";
    font-style: bold;
    font-size: 30px;
    text-align: right;
    padding-top:10px;

}


.abtstyle p {
    color: grey;
    font-family: "Century Gothic";
    justify-content: center;
    font-weight: lighter;
    font-size:14px;
    text-align: justify;
    margin-left:20px;
    /*margin-bottom:30px;
    margin-top:30px;*/
    padding-bottom:35px;
    padding:20px;
    padding-right:45px;
    display:grid;
    line-height: 18px;
}

.abtstyle h5 {
  color:black;
  font-family: "Century Gothic";
  font-weight:bold;
  font-size:30px;
  text-align: center;
  padding:25px;
  margin:8;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  position: absolute;
  z-index: 9997;
}


.abtstyle h2 {
  font-size: 60px;
  padding:20px;
}
 

.line {
  text-align: right;
  padding:25px;
  color: #eada18;
  line-height:20px;
  position: relative;
  bottom: -10px;
  -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;

}

-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}    


.line:before {
  content:"";
  display:block;
  width:650px;
  height:2px;
  background:#eada18;
  position:absolute;
  left:0px; 
  top:50%;
}



.hiddenBtn {
  position: relative;  
  width:100%;
  max-width:300px;
}

.hiddenBtn:before {
content:;
position:absolute;
width:100%;
height:100%;
top:0;left:0;right:0;
background-color:rgba(0,0,0,0);
}

.hiddenBtn:hover:before {
background-color:rgb(234, 218, 24);
opacity: 20%;

}

.hiddenBtn img {
display:block;
}

.hiddenBtn button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity:0;
background: #eada18;
font-family: Century Gothic;
font-size:12px;
z-index: 5;
margin-bottom:130px;
border: none;
width:0px;
height:30px;

} 

.hiddenBtn:hover button {   
opacity: 1;
cursor:pointer;
transition-delay: 15s;
transition: 0.4s;
width:250px;
height:30px;

}

.btnX {
  background: #eada18;
  width:300px;
  height:30px;
  border: none;
  color: black;

}

.btnX a p{
  justify-content: center;
  font-family: Century Gothic;
  text-decoration: none;
  text-decoration-line: none;
}

.accreditations {
    width: 100%;
    height:220px;
    margin:15px;
        text-align: -webkit-center;
}

.accreditations img {
    width: 250px;
    display:grid;
    padding:5px;
   
}



/*end of ABOUT CSS*/
/*****************************************************************************/

/*****************************************************************************/
/*SERVICE CSS*/


.servstyle {
    font-family: "Century Gothic";
    font-style: bold;
    text-align: center;
    font-size: 30px;
    padding-top:10px;
    height:100px;
    
}


.servstyle p {
  color: grey;
    font-family: "Century Gothic";
    justify-content: center;
    font-weight: lighter;
    font-size:15px;
    text-align: justify;
    margin-left:30px;
    margin-bottom:30px;
    margin-top:30px;
    padding:20px;
    padding-bottom:35px;
    display:grid;
    line-height: 18px;
}
  

.servstyle h5 {
  color:black;
  font-family: "Century Gothic";
  font-weight:bold;
  font-size:30px;
  text-align: center;
  padding:25px;
  margin:8;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  position: absolute;
  z-index: 9997;
}

.servstyle h2 {
    font-size: 60px;
    padding:20px;

}

/*
.servstyle h1 {
  text-align: right;
  padding:25px;
  color: #eada18;
  line-height:20px;
  position: relative;
  bottom: 25px;
  -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;

}

-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}    


.servstyle h1:before {
  content:"";
  display:block;
  width:650px;
  height:2px;
  background:#eada18;
  position:absolute;
  left:0px; 
  top:50%;
}*/



/*ARCHITECTURE SECTION STYLING*/
.lstofservices_a {
    padding-top:50px;
    justify-content: center;
    background-image: url(image_two.jpg);
    background-size: 1500px;
    margin-bottom:50px;
    animation:animateBg 12s linear infinite alternate;
   
}

@keyframes animateBg {
  from{
    background-position: 0 0;
  }
  to{
    background-position: 5% 0;
  }
}



.architectural {
  color:black;
}

.architectural h2 {
  font-size:20px;
}

.architectural span {
  color: grey;
  font-family: "Century Gothic";
  font-size:20px;
  line-height: 2px;
  margin:15px;

}

.architectural span:hover {
  font-size:30px;
  cursor: pointer;
  transition: 0.1s;
}

.architectural  a {
  color: inherit;
  text-decoration: none;
}

.architectural  a:hover {
  color: #eada18;
  transition: 0.1s;

}

/*END OF ARCHITECTURE SECTION STYLING*/
/*INTERIOR DESIGN SECTION STYLING*/
.lstofservices_b {
    padding-top:50px;
    justify-content: center;
    background-image: url(image_one.jpg);
    background-size: 1500px;
    margin-bottom:50px;
    animation:animateBg 12s linear infinite alternate;
   
  }
  
  @keyframes animateBg {
    from{
      background-position: 5% 10%;
    }
    to{
      background-position: 0 0;
    }
  }



.interior {
  color: black;
}

.interior h2 {
  font-size:20px;
}


.interior span {
  color: grey;
  font-family: "Century Gothic";
  font-size:20px;
  line-height: 2px;
  margin:15px;

}

.interior span:hover {
  font-size:30px;
  cursor: pointer;
  transition: 0.1s;
}

.interior a{
  color: inherit;
  text-decoration: none;
}

.interior a:hover {
  color: #eada18;
  transition: 0.1s;

}

/*END OF INTERIOR SECTION STYLING*/
/*GRAPHIC DESIGN SECTION STYLING*/

.lstofservices_c {
    padding-top:50px;
    justify-content: center;
    background-image: url(image_three.jpg);
    background-size: 1310px;
    margin-bottom:50px;
    animation:animateBg 12s linear infinite alternate;
   
  }
  
  @keyframes animateBg {
    from{
      background-position: 10% 5%;
    }
    to{
      background-position: 0 0;
    }
  }


.graphic {
  color: black;
}

.graphic h2 {
  font-size:20px;
}

.graphic span {
  color: grey;
  font-family: "Century Gothic";
  font-size:20px;
  line-height: 2px;
  margin:15px;

}

.graphic span:hover {
  font-size:30px;
  cursor: pointer;
  transition: 0.1s;
}

.graphic a{
  color: inherit;
  text-decoration: none;
}

.graphic a:hover {
  color: #eada18;
  transition: 0.1s;

}

/*END OF GRAPHIC D SECTION STYLING*/


/*******************BUTTON STYLING**********************************************/

.btnView {
  z-index: 5;
  margin-top:-130px;
}

.view {
  font-family: Century Gothic;
  font-size:12px;
  z-index: 5;
  margin-bottom:130px;
  border: none;
  background: #eada18;
  width:290px;
  height:30px;
 
}

.view:hover {
  width:330px;
  height:40px;
  transition: 0.3s;
  cursor: pointer;
  background-color: grey;
  color: white;

}


/*end of SERVICE CSS*/
/*****************************************************************************/



/*****************************************************************************/
/*PORTFOLIO CSS*/

.portstyle {
font-family: "Century Gothic";
font-style: bold;
text-align: center;
font-size: 30px;
padding-top: 10px;
height: 100px;
}

/*end of PORTFOLIO CSS*/
/*CONTACT CSS*/


.contstyle {
  font-family: "Century Gothic";
  font-style: bold;
  font-size: 30px;
  text-align: right;
  padding-top:10px;
  height:100px; 
}



.contstyle p {
  color: grey;
    font-family: "Century Gothic";
    justify-content: center;
    font-weight: lighter;
    font-size:15px;
    text-align: justify;
    margin-left:30px;
    margin-bottom:0px;
    margin-top:-55px;
    padding:20px;
    padding-bottom:35px;
    display:grid;
    line-height: 18px;
}

.contstyle h5 {
  color:black;
  font-family: "Century Gothic";
  font-weight:bold;
  font-size:30px;
  text-align: center;
  padding:30px;
  margin:8;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  position: absolute;
  z-index: 9997;
}

.contstyle h2 {
  font-size: 60px;
  padding:20px;

}

/*
.contstyle h1 {
    text-align: right;
    padding:25px;
    color: #eada18;
    line-height:10px;
    position: relative;
    bottom: 25px;
    -webkit-animation: slideIn 2s forwards;
    -moz-animation: slideIn 2s forwards;
    animation: slideIn 2s forwards;

}

-webkit-keyframes slideIn {
    0% {
      transform: translateX(-900px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @-moz-keyframes slideIn {
    0% {
      transform: translateX(-900px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slideIn {
    0% {
      transform: translateX(-900px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .contstyle h1:before {
    content:"";
    display:block;
    width:650px;
    height:2px;
    background:#eada18;
    position:absolute;
    left:0px; 
    top:50%;
  }*/
  
/*end of CONTACT CSS*/


/*end of body*/

/*****************************************************************************/
/*footer*/

.footerdesktop {
  display:flex;
}


.footertablet {
  display:inline-flex;
}

.footer-header {
  font-size:30px;
  font-family: "Century Gothic";
  font-weight: bold;
  line-height:10px;
  padding:10px;
  margin-left:-15px;
  display: block;
  position:sticky;
}

.footer a:hover {
  transition      :0.8s;
  transition-timing-function: 0.2;
  font-size       :45px;
  fill            : none;
  stroke          : #eada18;
  stroke-width    : .5px;
  stroke-linejoin : round;

}

/*.footer-header:before {
  content:"";
  display:block;
  width:650px;
  height:2px;
  background:#eada18;
  position:absolute;s
  left:-15px !important; 
  top:0;
}*/


.infobox:before {
  content:"";
  display:block;
  width:650px;
  height:2px;
  background:#eada18;
  left:0; 
  top:0;
}

.infobox {
  width:100%;
  background-image:linear-gradient(to top, rgba(245, 246, 252, 0.52), white),
  url(texture.jpg);
  background-size:cover;
  position: absolute;
}

/*
.infotext {
margin-left:10px;
display:inline-flex;
}

.infotextimg {
  display:inline-flex;
  width:300px;
}

.infotext img {
  width:250px;
  padding-top:30px;
}

*/

.footeremail {
 text-align: center;
}

.footeremail p {
  font-family: Century Gothic;
  font-weight:bold;
  color:black;
  font-size:35px;
  text-align:justify;
  margin:0px;
  line-height: 30px;
  padding:10px;
  background-color: #eada18;
  display:grid;
  justify-content: center;

}

.footerbusiness p {
  font-family: Century Gothic;
  font-weight:bold;
  color:grey;
  font-size:35px;
  text-align:justify;
  margin:0px;
  line-height: 28.8px;
  padding:11px;
  border-bottom:black;
  border-width:2px;
  border-style: solid;
  border-top:transparent;
  border-left:transparent;
  border-right:transparent;
  display:grid;
  justify-content: center;

}

.footerhours p {
  font-family: Century Gothic;
  font-weight:bold;
  color:black;
  font-size:35px;
  text-align:justify;
  margin:0px;
  line-height: 30px;
  padding:10px;
  background-color: #eada18;
  display:grid;
  justify-content: center;

}

.footeraddition p {
  font-family: Century Gothic;
  font-weight:bold;
  color:grey;
  font-size:35px;
  text-align:justify;
  margin:0px;
  line-height: 28.8px;
  padding:11px;
  border-bottom:black;
  border-width:2px;
  border-style: solid;
  border-top:transparent;
  border-left:transparent;
  border-right:transparent;
  display:grid;
  justify-content: center;

}

.footernumber {
  width:300px;
  text-align: center;
  height:65px;
  border-bottom:black;
  border-width:2px;
  border-style: solid;
  border-top:transparent;
  border-left:transparent;
  border-right:transparent;
  display:grid;
  justify-content: center;
}

.footernumber a:hover {
  transition      :0.8s;
  transition-timing-function: 0.2;
  font-size       :40px;
  fill            : black;
  stroke          : none;
  stroke-width    : .5px;
  stroke-linejoin : round;
  cursor: pointer;
}

.footernumberredirect {
  width: 100%;
  text-align: center;
  height: 65px;
  border-bottom: black;
  border-width: 2px;
  border-style: solid;
  border-top: transparent;
  border-left: transparent;
  border-right: transparent;
  display: grid;
  justify-content: center;  
 }  

 .footernumberredirect svg {
  font-size: 40px;
  transform: translate(0px, 10px);
  text-align: center;
  width: 600px;
  height: 100px;
}


.footernumberredirect a:hover {
  transition      :0.8s;
  transition-timing-function: 0.2;
  font-size       : 42px;
  fill            : black;
  stroke          : none;
  stroke-width    : .5px;
  stroke-linejoin : round;
  cursor: pointer;
}


.footernumber svg {
  font-size:40px;
}



.footernumber p {
  color: grey;
  font-family: "Century Gothic";
  justify-content: center;
  font-weight: lighter;
  font-size: 15px;
  display:inline;
  line-height: 0px;
  padding-bottom: 30px;
  
}

.footernumber h3 {
  text-decoration:none;
  color:grey;
  font-size:15px; 
  font-weight:bold;
  
}

.footerbox {
  width:300px;
}


/*.infotextbox p {
 font-family: Century Gothic;
 font-size: 12px;
 font-style:normal;
 font-weight: lighter;
 color: grey;
 text-align:left;
 padding-bottom: 0px;
 display:block;
 margin:0px !important;
}*/



.infotextcontainer {
  text-align: center;
  width:100%;
}

.infotextbox {
  display:inline-grid;
  width:1100px;
  margin-right:110px;
}

.infotextbox img {
  width:70px;
  text-align: center;
}

.infotextbox h3 {
  font-size: 30px;
  padding:5px;
  text-align:center;
  line-height: 55px;
  width:300px;
  color: black;
}

.infotextbox h3 a {
  text-decoration:none;
  color:black;
  font-weight:bold;
  text-align:center;
}

.infotextbox h3 a:hover {
  color: grey;
}

.iconimage {
  width:70px;
  text-align: center;

}




/*
.footericon a {
  text-decoration:none;
  color:grey;
  font-size:15px; 
  font-weight:bold;
}

.footericon a:hover {
 

}*/

.infonav {
text-align: center;
font-family: Century Gothic;
font-size: 15px;
font-style:normal;
font-weight:bold;
padding-top: 20px;
padding-bottom: 0px;

}


.infonav a:hover {
    cursor:pointer;
    color:#eada18;
    font-size: 16px;
    transition-delay: 0.6s;
    transition: 0.4s;
}


.infonav a {
  text-decoration: none;
  color: grey;

}


.copyright p {
  text-align: center;
  font-family: Century Gothic;
  font-size: 12px;
  font-style:normal;
  font-weight: lighter;
  color: grey;
  margin:0px !important;
  display: block;
  padding: 20px;
  padding-bottom: 35px;
  line-height: 18px;
}

.copyright a {
  color: grey;
}


.trigger {
  position: absolute;
}


.contactus {
  width: 100%;
}

.contactus p {
  font-size: 20px;
}

.textpopupmsgmodal {
  width:100%;
  height: 100%;
  background-color: #eada18;
  display: block;
  z-index: 9999;
  position: fixed;
  bottom:0px;
  display:none;
}


.textboxmsg h4 {
  font-size: 55px;
  font-family: Century Gothic;
  font-weight: bold;
  text-align: center;
  padding-top: 60px;
}

.textboxmsg h5 {
  font-size: 20px;
  font-family: Century Gothic;
  font-weight: light;
  text-align: center;
}

.textpopupmsgmodal p {
  font-size: 12px;
  font-family: Century Gothic;
  font-weight: lighter !important;
  text-align: center;
  padding:10px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
  color: black !important;
}

.textpopupmsgmodal img {
  width: 100%;
  text-align: center;
  position: fixed;
  top: -490px;
  margin: 0px;
  padding: 600px;
}

.textboxmsg {
  position:fixed;
  top: 260px;
  width: 100%;
}

.popupmodal img {
    width:100px;
}
.closingbutton {
  width:40px;
  height:40px;
  background-color: black;
  color: white;
  position: absolute;
  text-align: center;
  font-size: 30px;
  z-index: 9998;

}

.closingbutton:hover, .closingbutton:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}



/*end of footer*/
/*****************************************************************************/

/*floating navigation*/

.float {
    text-align: right;
    padding:25px;
}

 .floatNavBtn { 
     width:100px;
     align-content:right;
     background-color: transparent;
     border-style: none;
     position: fixed;
     bottom:70px;
     right:20px;
     z-index: 2;

 }

 .floatNavBtn:hover {
     color:#eada18;
     cursor: pointer;
 }
 
 .floatNavBtn img {
     width:30px;
 }

 .floatNavBtn p {
     font-size: 15px;
 }

 /*top floating navigation*/
 /******BLOG NAV*****************************************************************************************/

 .Blogfloat {
  text-align: right;
  padding:25px;
  z-index: 9998;
  position: absolute;
  }

 .BlogfloatNavBtn { 
  width: 100px;
  align-content: right;
  background-color: transparent;
  border-style: none;
  position: fixed;
  z-index:9999;
  right: 20px;
  bottom: 135px !important;
  display: none;
 }


 .BlogfloatNavBtn:hover {
   color:#eada18;
   cursor: pointer;
  }

.BlogfloatNavBtn img {
   width:40px;
  }

  .BlogfloatNavBtn img:hover {
    width:42px;
   }

.BlogfloatNavBtn p {
   font-size: 12px;
   display: none;
  }

/******END OF BLOG NAV*****************************************************************************************/


/*****************************************************************************/