@font-face {
	font-family: "Manning"; 
	src: url('fonts/manning.ttf'), url('fonts/manning.ttf');
}

@font-face {
	font-family: "Stylish"; 
	src: url('fonts/stylish.ttf'), url('fonts/stylish.ttf');
}

@font-face { 
	font-family: "BodyFont"; 
	src: url('fonts/fontmedium.ttf'), url('fonts/fontmedium.ttf');
}

@font-face { 
	font-family: "DropCapHeader"; 
	src: url('fonts/century.ttf'), url('fonts/century.ttf');
}

@font-face { 
	font-family: "OldSans"; 
	src: url('fonts/oldsans.ttf'), url('fonts/oldsans.ttf');
}

@font-face { 
	font-family: "Olde"; 
	src: url('fonts/old.ttf'), url('fonts/old.ttf');
}

@font-face { 
	font-family: "PageMainHeadings"; 
	src: url('fonts/abadi.ttf'), url('fonts/abadi.ttf');
}

@font-face { 
	font-family: "BodyBold"; 
	src: url('fonts/fontbold.ttf'), url('fonts/fontbold.ttf');
}

@font-face { 
	font-family: "AccentText"; 
	src: url('fonts/segoeuil.ttf'), url('fonts/segoeuil.ttf');
}

@font-face { 
	font-family: "Stylish"; 
	src: url('fonts/stylish.ttf'), url('fonts/stylish.ttf');
}

@font-face { 
	font-family: "Headliner"; 
	src: url('fonts/futura.ttf'), url('fonts/futura.ttf');
}

@font-face { 
	font-family: "PageSubHeading"; 
	src: url('fonts/digimpact.ttf'), url('fonts/digimpact.ttf');
}

@font-face { 
	font-family: "PageHeadings"; 
	src: url('fonts/digiscript.ttf'), url('fonts/digiscript.ttf');
}

@font-face { 
	font-family: "Hancock"; 
	src: url('fonts/hancock.otf'), url('fonts/hancock.otf');
}

@font-face { 
	font-family: "SansExtraBold"; 
	src: url('fonts/OpenSans-ExtraBold.ttf'), url('fonts/OpenSans-ExtraBold.ttf');
}

@font-face { 
	font-family: "Elegant"; 
	src: url('fonts/hancock.otf'), url('fonts/hancock.otf');
}

@font-face { 
	font-family: "LinotypeFont"; 
	src: url('fonts/pala.ttf'), url('fonts/pala.ttf');
}



a:link, a:active, a:visited {
	color: rgba(120,120,230,1) !important;
	text-decoration: none !important;
	font-weight: bold !important;
	font-family: "BodyFont" !important;
	font-size: 18pt !important;
}

a:hover {
color: rgba(120,120,230,1);
	text-decoration: underline !important;
}


a:label {
	text-decoration: none;
}

@media screen and (min-width: 0px) and (max-width: 640px) {
  .NavMobile{ display: block; }  /* show it on smaller screen */
}
@media screen and (min-width: 641px) and (max-width: 6000px) {
  .NavMobile{ display: none; }   /* hide it larger screens */
}

@media screen and (min-width: 0px) and (max-width: 640px) {
  .NavMain{ display: none; }  /* show it on larger screen */
}
@media screen and (min-width: 641px) and (max-width: 6000px) {
  .NavMain{ display: block; }   /* hide it smaller screens */
}



html {

scroll-behavior: smooth;

}

body {

	font-family: "BodyFont";
	font-size: 18pt;
	text-decoration: none;
	margin-top:40;
	margin-left:0;
	margin-right:0;
	margin-bottom:0;
	color: #000000;
	overflow-x: hidden;
}


.Cat {
height: 85px;
width: auto;
position: fixed;
top: 40px;
left: 0px;
z-index: 99999999;
}

@media only screen and (max-width: 640px) {
.Cat {
height: 45px;
width: auto;
position: fixed;
top: 5px;
left: 0px;
z-index: 99999999;
}
}





.GalleryArea {
	background-image: url(images/background.jpg);      

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* Responsive Page Settings */

#group {
}
    :after.group {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 640px) {
   .leftGroup, .rightGroup, .MagazineL, .MagazineR {
            float: none;
            width: auto;
        }
    }
}

/* Responsive Page Settings */


/* Body sub headings styling */
.BodySubheading {
	
	font-family: "Hancock";
	color: rgba(140, 0, 0, 1);
	font-size: 32px;
	line-height: 36px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 0px;
	margin-right: 5px;
	padding-left: 10px;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));    
	border-radius: 30px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}
/* Body sub headings styling */


.Logo-Container {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
width: 100%;
height: 350px;
       
position: fixed;
top: 38px;
margin-bottom: 350px;

z-index: -1;

        
}
@media only screen and (max-width: 640px) {
.Logo-Container {
visibility: hidden;
}
}


.Flags {
height: 20px;
width: auto;
}


.youtube-video {
  aspect-ratio: 16 / 9;
  width: 65%;
}
@media only screen and (max-width: 640px) {
.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
}


.TestimonialContainer {
	background-image: url(images/wallpaper.jpg);      
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.VideoContainer {
	background-image: url(images/guangzhou.jpg);      
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}

.Testimonial {
width: 90%;
box-shadow: 1px 1px 35px rgba(0,0,0,0.2);
	background-image: url(images/paper.jpg);      
	background-repeat: repeat;
border-radius: 12px;
font-family: "Olde";
font-size: 18pt;
line-height: 100%;
margin: 10px;
}

@media only screen and (max-width: 640px) {
.Testimonial {
width: 100%;
}
}


.logo {

width: 75%;
height: auto;

}


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

width: 100%;
height: auto;
margin-bottom: 10px;

}
}


/* Top navigation */
.NavSubPages {

z-index: 10000001; 
position: fixed; 
left: 0; 
top: 0; 
margin: 0; 
height: 50px; 
width: 100%; 
border: 0px;

}
/* Top navigation */

/* RESPONSIVE PAGES */

    .leftGroup {
        float: left;
        width: 50%;
        
    }  
    .rightGroup {
        float: right;
        width: 50%; 
        
    }

#group {
}
    :after.group {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 640px) {
        .leftGroup, .rightGroup {
            float: none;
            width: auto;
        }
    }
}

/* RESPONSIVE PAGES */


/* SCROLLBARS */

::-webkit-scrollbar {
	width: 10px;
	background-color: rgba(150, 150, 150, 1);
}

::-webkit-scrollbar-track {	

	background-color: rgba(200, 200, 200, 1);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);	
}

::-webkit-scrollbar-thumb {
	
	border: 1px solid rgba(210,0,0,0.5);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: rgba(120, 0, 0, 1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(170, 0, 0, 1);
}


/* SCROLLBARS */

.shadow {
  box-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}

.TextShadow {
text-shadow: 3px 3px 10px rgba(0,0,0,1);
}

.BodyText {
	color: #000000;
	font-family: "BodyFont";
	font-size: 18pt;
	line-height: 115%;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}


/* START SET THE MARGINS AND WIDTHS FOR THE MAIN CONTENT AREA */


.content {

margin:10px 0px; 

background: rgba(255,255,255,0.95); 
color: #000000; 
font-family: BodyFont; 
font-size: 18pt; 
line-height: 100%; 
padding: 0px; 
width: 75%; 
max-width: 85%; 
moz-border-radius: 13px; 
-webkit-border-radius: 13px; 


}



@media only screen and (max-width: 640px) {
/*For mobile phones*/

.content {
        width: 100%;
        max-width: 100%;
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 10px;
        overflow: hidden;

}
}

.body-content {
padding: 30px;
width: 100%;
}

@media only screen and (max-width: 640px) {
.body-content {
padding: 20px;
}

}



/* END SET THE MARGINS AND WIDTHS FOR THE MAIN CONTENT AREA */




.PageHeadings {

font-family: "Hancock";
font-size: 36px;
color: rgba(240,240,240,1);
text-align: center;
text-decoration: none;
text-shadow: 2px 2px 5px rgba(0,0,0,1);
line-height: 115%;
padding-top: 2px;
width: 100%;
height: 50px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;

background: rgb(0,9,237);
background-image: linear-gradient(180deg, rgba(0,9,180,1) 0%, rgba(0,80,190,1) 50%, rgba(0,0,91,1) 50%, rgba(0,6,98,1) 90%, rgba(0,116,180,0.5) 90%, rgba(0,100,180,0.5) 100%);
box-shadow: 0px 10px 30px -5px #000000 inset;

}


@media only screen and (max-width: 640px) {
/*For mobile phones*/
.PageHeadings {

font-size: 26px;
height: 36px;

}
}






/*Sets background of navigation bar on mobile devices*/

.NavMobile-Background {

background-color: rgba(0,0,0, 0.8);
position: fixed;
left: 0;
top: 0;
z-index: 999996;
height: 40px;
width: 100%;
color: rgba(255,255,255,1);
font-size: 20px;
line-height: 40px;
}
/*Sets background of navigation bar on mobile devices*/






/* Mobile Menu Overlay */

.MobileMenuOverlay {

position: fixed;
left: 0px;
top: 40px;
z-index: 1000000001;
height: calc(100% - 40px);
width: 100%;
border: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
overflow: hidden;

}

/* Mobile Menu Overlay */


.CopyrightFooter {

text-align: center;
text-decoration: none;
margin-top: 5px;
padding-top: 0px;
padding-bottom: 5px;
width: 100%;
height: 70px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
background: linear-gradient(to right, rgba(240,240,250,1)0%, rgba(230,230,240,1) 50%, rgba(240,240,250,1) 100%);
box-shadow: 0px -3px 20px rgba(0,0,0,0.1);
}

.Copyright-Footer {

margin-top: 0px;
margin-bottom: 0px;
height: 70px;
width: 100%;
border: 0px;

}




.BodySubheading {
	
	font-family: "Hancock";
	color: rgba(140, 0, 0, 1);
	font-size: 32px;
	line-height: 36px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 0px;
	margin-right: 5px;
	padding-left: 10px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));    
	border-radius: 30px;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}

.rounded-image {

  moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: 0px;
  box-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}

.shadow {
  box-shadow: 2px 2px 15px rgba(0,0,0,0.5);
}






/*START IMAGE LINKS*/

.PhotoGrid {
width: 90%;
height: auto;
margin: 2%;
}
@media only screen and (max-width: 640px) {
/*For mobile phones*/
.PhotoGrid {
width: 95%;
margin: 5px;
}
}

.RoundedImage {

border: 0;
border-radius: 16px;

}

.ImageLink {
box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.5);
}

.ImageLink:Hover {


animation-name: FadeIn;
animation-duration: 0.2s;  
animation-fill-mode: forwards;
}

@keyframes FadeIn {
  from {box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.5);}
  to {box-shadow: 0px 0px 20px 4px rgba(255,255,255,1);}

}

/*END IMAGE LINKS*/

/**/