﻿* {
  margin: 0;
}

html { 
  	box-sizing: border-box;
	width: 100%;
	height: 100%;
      	scroll-behavior: smooth; 
	color: #000000;
	font-weight: 400; 
	background: #E8E8E8;
	background-image: url("../Picture_Center/background-center/concrete-wall.png");
	}

body {
  	overflow-x: hidden;
	}

main {
  	11margin: 0 auto; 
  	padding: 0.875em 0.5em;   
	}

#top {
	MARGIN-TOP: 0PX; 
	border: 0px;
	}


.top-section {
	user-select: none; 
	width: 100%;
	height: 130px;  
	border: 0px;  
	}


#intro {
	TOP: 0; 
	MARGIN-TOP: 0PX; 
	padding-top: 0; 
	BORDER: 0px;
	}








/***************************************************************************************************************************/

/* SMALLER TABLET screens -----------*/   /*--- SMALLER TABLET ---*/
@media screen and (max-width: 480px) {
  	main {
  		margin: 0 auto    
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 320px) and (max-width : 480px) {/*--- Mobile portrait ---*/
  	main {
  		margin: 0 auto;  
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 480px) and (max-width : 595px) {/*--- Mobile landscape ---*/
  	main {
  		margin: 0 auto;  
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 595px) and (max-width : 690px) {/*--- Small tablet portrait ---*/
  	main {
  		margin: 0 auto;    
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 690px) and (max-width : 769px) {/*--- Tablet portrait ---*/
  	main {
  		margin: 0 auto;   
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture) --- SMALLER TABLET ---*/
@media only screen and (min-width : 769px) and (max-width : 800px) {/*--- Small tablet landscape ---*/
	main {
  		margin: 0 auto; 
		margin-left: 220px;  
  		}
	}




/*********************************************************************************************************/
/* SMALLER TABLET screens -----------*/   /*--- (location for ID picture --- SMALLER TABLET ---*/
@media only screen and (min-width : 800px) and (max-width : 1024px) {/*--- Small tablet landscape ---*/
  	main {
  		margin: 0 auto; 
		margin-left: 220px;   
  		}
	}




/*********************************************************************************************************/
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape ---*/
  	main {
  		margin: 0 auto; 
		margin-left: 230px;   
  		}
	}





/*********************************************************************************************************/
/* Desktops and laptops ----------- */  /*--- SMALL DESKTOP ---*/
@media only screen 
and (min-width : 1224px) {
  	main {
  		margin: 0 auto; 
		margin-left: 260px;
		}
	}
/*********************************************************************************************************/








.banner {
  	left: 0; 
	right: 0; 
	margin-left: 0px; 
	margin-right: 0px;  
	background-size: contain !IMPORTANT; 
	background-repeat: no-repeat !important; 
	background-position: right !important;
	width: 100%;
	
  	HEIGHT: 25.5VMIN;
  	MIN-HEIGHT: 10EM;
  	background: linear-gradient(#000, transparent, #000), var(--img) 50%/cover;
  	background-attachment: fixed;
  	background-blend-mode: multiply;
	}




.banner:nth-of-type(1) {
  --img: url(../Picture_Center/inner-baner-background/THIRTEENTH_another-site-name-banner.png);
}
.banner:nth-of-type(2) {
  --img: url(../Picture_Center/inner-baner-background/TWELVETH_illustrations-banner.png);
}
.banner:nth-of-type(3) {
  --img: url(../Picture_Center/inner-baner-background/ELEVENTH_animations-banner.png) ;
}
.banner:nth-of-type(4) {
  --img: url(../Picture_Center/inner-baner-background/FIRST_multimedia-main-banner.png) ;
}
.banner:nth-of-type(5) {
  --img: url(../Picture_Center/inner-baner-background/SECOND_teachings-banner.png);
}
.banner:nth-of-type(6) {
  --img: url(../Picture_Center/inner-baner-background/THIRD_comedy-banner.png);
}
.banner:nth-of-type(7) {
  --img: url(../Picture_Center/inner-baner-background/FOURTH_music-banner.png) ;
}
.banner:nth-of-type(8) {
  --img: url(../Picture_Center/inner-baner-background/FIFTH_movies-banner.png) ;
}
.banner:nth-of-type(9) {
  --img: url(../Picture_Center/inner-baner-background/SIXTH_cartoons-banner.png) ;
}
.banner:nth-of-type(10) {
  --img: url(../Picture_Center/inner-baner-background/SEVENTH_stories-banner.png) ;
}
.banner:nth-of-type(11) {
  --img: url(../Picture_Center/inner-baner-background/EIGHTH_infographics-banner.png) ;
}
.banner:nth-of-type(12) {
  --img: url(../Picture_Center/inner-baner-background/NINETH_cartography-banner.png) ;
}
.banner:nth-of-type(13) {
  --img: url(../Picture_Center/inner-baner-background/TENTH_games-banner.png) ;
}