@charset "UTF-8";
/* CSS Document */
@font-face{font-family:'p530';
    font-style: normal;
  font-weight: 500;
	src:url("fonts/ParangonOrg_530C.woff2") format('woff2');
}
@font-face{font-family:'p430';
    font-style: normal;
  font-weight: 400;
	src:url("fonts/ParangonOrg_430C.woff2") format('woff2');
}
@font-face{font-family:'p330';
    font-style: normal;
  font-weight: 300;
	src:url("fonts/ParangonOrg_330C.woff2") format('woff2');
}
@font-face{font-family:'p520';
    font-style: normal;
  font-weight: 500;
	src:url("fonts/ParangonOrg_520C.woff2") format('woff2');
}
@font-face{font-family:'p420';
    font-style: normal;
  font-weight: 400;
	src:url("fonts/ParangonOrg_420C.woff2") format('woff2');
}
@font-face{font-family:'p510';
    font-style: normal;
  font-weight: 500;
	src:url("fonts/ParangonOrg_510C.woff2") format('woff2');
}
@font-face{font-family:'p210';
    font-style: normal;
  font-weight: 200;
	src:url("fonts/ParangonOrg_210C.woff2") format('woff2');
}

/*div{-webkit-font-smoothing: antialiased;}*/
.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*there are adobe fonts for cover "quasimoda"*/


/*обнулятор*/
body,h1,h2,h3,h4,h5,h6,p,ol,ul,form,blockquote
{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,pre,code
{font-size: 1rem;}
a{color:unset;text-decoration: none;}
a:visited{color:#000;text-decoration: none;}
a img{border:none;}
ul{list-style-type: none;}





/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
swipe required ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
/*
swipe required ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/*

*/



#profileDivider
{
	cursor: pointer;
}

#copyrightMark
{
    position: fixed;
	bottom:3rem;
	right:3rem;
	text-align: right;
	line-height: 5.5rem;
	font-size: 3.5rem;
	font-family: p530, Helvetica, Arial;
}

#infoButton,#infoButtonShadow
{
	border-radius: 25px;
	background-color: #0d5daa;
	color: #fff;
	width: 5rem;
	height: 5rem;
	position: fixed;
	bottom:3rem;
	left:3rem;
	text-align: center;
	line-height: 5.5rem;
	font-size: 3.5rem;
	font-family: p530, Helvetica, Arial; 
}
#infoButtonShadow
{
	background-color: #d3d3d3;
}
#galleryRules
{
	position: fixed;
	bottom: 11rem;
	left:3rem;
	width: auto;
	font-family: p330, Helvetica, Arial;
	font-size: 3rem;
}
#closegalleryrules
{
	position: absolute;
	top:-2rem;
	right: -2rem;
	font-size: 5rem;
}


.yearspan, .mediumspan, .sizespan, .durationspan
{
	font-family: p330, Helvetica, Arial;
	color: black;
}
.yearspan, .sizespan, .durationspan
{
	text-transform: lowercase;
}

.titlespan
{
	font-style: italic;
}


.authorspan
{
	color: #E73323;
}
.additionalspan
{
	color: #0d6aaa;
}

.additionalspan
{
    font-family: p420, Helvetica, Arial;
/*	color: green;*/
}


#containerForSlider
{
/*       border:thick solid green;*/
     display: flex;
     align-items: center;
      justify-content: center;
    flex-direction: column;
}




#slider
{
    width: 100%;
}

#slider>div>div 
{
        width:100%;
     display: flex;
     align-items: center;
  justify-content: center;
}


.square
{
/*  border: thick dashed pink;*/
     /* background-color: aqua;*/
 display: flex;
     align-items: center;
  justify-content: center;
    flex-direction: column;
}

#backHome
{
	height: 4rem;
	background-color:slategrey;
    display:block;
}
/*#backHome::after {content: ""; clear: both; display: table;}*/

/*
button{
    height:3rem;
    background-color:slategrey;
    border: none;
   
    text-transform: uppercase;
    font-size: 2rem;
    font-family: p520, Helvetica, Arial;
	color: #fff;
	letter-spacing: .2rem;
}
*/


#slider div img{
     cursor: pointer;
}


.blueInfo
{
    background-color: #0d5daa;
    color:goldenrod;
/*    color: antiquewhite;*/
/*    line-height: 3.5rem;*/
}

.infoBlueTextSpan
{
    color:antiquewhite;
}

.blueInfoNO
{
    display: none !important;
/*
    background-color: #0d5daa;
    color: antiquewhite;
*/
/*    line-height: 3.5rem;*/
}

.infoquestionspan
{
    color:rgb(250, 211, 106);
    font-family: p330, Helvetica, Arial;
}

.normalInfo
{
    background-color: #ebebeb;
    color: #000;
}

.activeMessage
{
/*    cursor: pointer;*/
    position: absolute;
    top:0;
    left:0;
/*    background-color: white;*/
    height: 75vh;
    width:100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activeFalseSquare{
/*       border:thick solid red;*/
/*  background-color: pink;*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
}

.activeMiniImg{
	height:30rem;
    width:30rem;
    overflow:hidden;
    background-color:#fbfbfb;
    text-transform:uppercase;
    font-family:p530,Helvetica,Arial;
    font-size:5rem; 
    display: flex;
    align-items: center;
  justify-content: center;
/*	flex-direction: column;*/
}

.activeMiniImg img {
    height:90%;
}


/*.activeInfoText{
	height:50%;width:50%;position:absolute;display:block;bottom:10rem;right:25%;overflow:hidden;text-align:right;color:#000;text-transform:uppercase;font-family:p530,Helvetica,Arial;font-size:5rem;
}
*/

.activeInfoText{
	height:30%;
/*    height:50%;*/
    width:80%;
    overflow:hidden;
    text-align:center;
/*    color:#000;*/
    text-transform:uppercase;
    font-family:p530,Helvetica,Arial;
    font-size:2rem; 
/*    nado диффиринцировать размер шрифта всвязи с изменением размера экрана*/
	margin-top: 2.5rem;
}

.activeInfoText.blueInfo
{
   height:50%; 
}


.activeObject1{
	cursor:pointer;
    font-size:5rem;
/*    color:red;*/
    position:relative;
    display:flex;
/*    background-color:#ebebeb;*/
	
     align-items: center;
  justify-content: center;
	flex-direction: column;
    /*border: dotted thick aqua;*/
        
}

.activeBackToFront{
    cursor:pointer;	
    position:absolute;
    display:block;
    top:2rem;
    left:4rem;
/*    color:grey;*/
    font-size:5rem;
}
.activeCloseInfoPic{
    cursor:pointer;	
    position:absolute;
    display:block;
    top:2rem;
    right:3rem;
/*    color:grey;*/
    font-size:5rem;
}


#closeInfoPic.blueInfo
{
    color:antiquewhite;
}



.activeNextPicButton{
	position:absolute;
    display:block;
    bottom:4rem;
    right:4rem;
/*    color:grey;*/
    font-size:2rem;
}
.activePrevPicButton{
	position:absolute;
    display:block;
    bottom:4rem;
    left:4rem;
/*    color:grey;*/
    font-size:2rem;
}

/*
div.spatium, .activeFalseSpatium{
    background-color: yellow;
    height: 10%;
    height:25rem;
}
*/



/*body
{
    position: relative;
}*/







/*
*
{
	text-align:left;
}
*/
/*no scale for mobile*/


/*define importante and the REM*/
html
{
	/*background-color: green;*/
	font-size: 5px;
	/*background-image: url("img/fence/4x/Asset 1@4x.png");*/

	/*background-size: 10px;*/
	/*background-position: -5px;*/

	/*font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";*/
}
/*define box-sizing: border-box*/

*
{
		box-sizing: border-box;
}

/*****************************
>>>>>>>>>>>>>>><<<<<<<<<<<<<<<
------------------------------
______________________________
*****************************/

/*@media not | only screen and (media feature and | or | not media feature) { css code}*/

#profile,#gallary,#extra
{
	text-transform: uppercase;
	letter-spacing: .1rem;
}

body
{
/*	width:375px;*/
/*	width: 100vw;*/
	background-color: whitesmoke;
	margin: 0 auto auto;
	
/*	min-width: 14rem;*/
}

#superContainer
	{
		background-color: white;
	}

/*______________________________
****************************/

#profile
{
/*	background-color: pink;*/
}

#textProfile
{
	margin: 1rem auto auto 15rem;
}

/*
#firstPartProfile, #secndPartProfile, #thirdPartProfile
{
	width: 42rem;
	background-color: pink;
}
*/

#firstPartProfile
{
	width: 44rem;
	/*background-color: pink;*/
}


#secndPartProfile, #thirdPartProfile
{
	width: 42rem;
	/*background-color: pink;*/
}





#firstPartProfile
{
/*	float: left;*/

	
}

#secAndThird
{
	
	width:41rem;
	/*background-color: green;*/
	/*border:dashed red thick;*/
}

#profile::after
{
	content: "";
  	clear: both;
  	display: table;
}

#secndPartProfile
{
/*	float: left;*/
}

#thirdPartProfile
{
/*	float: left;*/
}

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

#header
{
	margin: 0 auto 1.5rem auto;
	text-align: center;
}

#header>h1
{
	font-size: 5rem;
	font-family: p530, Helvetica, Arial;
	width: auto;
}


/*
#language
{
	float: right;
	text-align: right;
	font: bold 1.5rem Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	letter-spacing: .05rem;
	margin-top: 2.2rem;
	margin-right: 5rem;
}
*/

/*_____________________________*/
.divider, .falsedivider
{
	background-color: #046aaa;
	color:aliceblue;
	font-size: 2rem;
/*	font-display: Arial;*/
	padding-left: 15rem;
	padding-top: .8rem;
	height: 4rem;
	
	
	
}

#gallary>.divider,#extra>.divider
{
	background-color: black;
}

#wrapProfile .falsedivider
{
	background-color:#046aaa;
}

#wrapGallary .falsedivider, #wrapExtra .falsedivider
{
	background-color: black;
}

/*div id profile*/
#wrapProfile
{
/*	float:left;*/
	width: 100vw;
	padding-bottom: 5rem;
}

#wrapGallary
{
/*	float:left;*/
	width: 100vw;
	padding-bottom: 10rem;
}

#wrapExtra
{
/*	float:left;*/
	width: 100vw;
	padding-bottom: 10rem;
}

#profile, #gallary, #extra
{
	margin: 0 auto auto 0;
	width: 75rem;
	position: relative;
	top: -4rem;
}

#gallary
{
	width: 80rem;
}

.divider>.lable
{
	font-family: p520, Helvetica, Arial;
	color: #fff;
	letter-spacing: .2rem;
}

#profile h3
{
	margin-top: 4rem;
	font-size: 3rem;
	color: #0d6aaa;
}

h2
{
	margin-top: 3rem;
	font-size: 3rem;
	color: #000;
	line-height: 4rem;
}


/*'''''''''''''''''''''''''''''''''*/
/* my Photo addes*/
/*:::::::::::::::::::::::::::::::::*/

#myAria
{
	/*color:green;
	background-color: red;
	
	float: left;*/
	display:block;
}
#myAria::after
{
	content: "";
	display: block;
  clear: both; 
 background-color: blue; 
}

#myPhoto
{
	height:16rem;
	width:10rem;
	background-color: grey;
	display: inline-block;
	float: left;
	margin-right: 2rem;
/*	margin-top:2rem;*/
	vertical-align: text-bottom;
}

/* ABOVE my Photoes addes */
/**/


h1
{
/*	margin-top: 4rem;*/
	font-size: 3rem;
	color: #000;
}

.educationGrey
{
    color: #7e7e7e;
}
.educationGrey a
{
    color: #7e7e7e;
}
.educationGrey a:visited
{
    color: #7e7e7e;
}


.education
{
	margin-left: -.5rem;
}

#education
{
	margin-left: -.5rem;
}
.educatedBy
{
/*    */
    margin-left: 2rem;
}

img
{
	height: 2.2rem;
}

#educationLogos
{
	margin: 1rem 0 ;
}

#educationLogos img
{ 
	height: 4rem;
	vertical-align:middle;
}

#educationLogos img:first-child
{ 
	margin-right: .5rem;
	height: 6rem;
}

#englishScoreExplanation, #linkedin
{
	text-transform: lowercase;
}

#profile>div
{
	font-size: 2rem;
	font-family: p430, Helvetica, Arial;
/*	line-height: 3.5rem;*/
}

.explanationBold, .explanationReg, #englishScoreExplanation, #englishScore, #native, #linkedin, .skills
{
	color:#0d6aaa;
}

.explanationReg, #native
{
/*	color:#0d6aaa;*/
	font-family: p330, Helvetica, Arial;
}

.speachBody
{
/*	color:#0d6aaa;*/
/*    color:rgba(126,126,126);*/
    color: #000;
	font-family: p330, Helvetica, Arial;
    line-height: 3rem;
    margin-bottom: 1.5rem;
    padding-right: 3rem;
}

.speachBodySent
{
/*	color:#0d6aaa;*/
/*    color:rgba(126,126,126);*/
    text-transform:none;
    color: #000;
	font-family: p430, Helvetica, Arial;
    line-height: 3rem;
    margin-bottom: 1.5rem;
    padding-right: 3rem;
}


.speachBodyStar
{
/*	color:#0d6aaa;*/
    color:rgba(126,126,126);
	font-family: p330, Helvetica, Arial;
    font-size: 2.5rem;
    line-height: 2rem;
    baseline-shift:sub;
}

.redstroke
{
/*  font-family: p530, Helvetica, Arial;  */
}

.thinnerOption
{
	font-family: p210, Helvetica, Arial;
}

#englishSkills
{
	margin-top: .5rem;
	width: 40%;
}

.englishLevelGraphic
{
	height: 1rem;
	margin-bottom: 1rem;
}

.wholeOne
{
	display: flex;
	flex-wrap: wrap;
	background-color: #d6d6d6;
}

.partOfOne
{
	background-color: #0a6a95;
	height: 1rem;
}

#currentlevelEngS
{
/*	flex: 20%;
	*/
	
	width: 100%;
	
}

#currentlevelEngL
{
/*	flex: 20%;
	*/
	
	width: 100%;
	
}

#currentlevelEngR
{
/*	flex: 20%;
	*/
	
	width: 100%;
	
}

#currentlevelEngW
{
/*	flex: 20%;
	*/
	
	width: 100%;
	
}


.unionImg
{
    margin-top: 1rem;
}

.unionImgItem
{
    margin-right: 1rem;
}

.unionImgV
{
   height: 3rem;
}

.skillsImg
{
	margin-top: .5rem;
	height: 5rem;
}

.skillsImg img
{
	height: 4rem;
}

.adobeSkills
{
	display: inline-flex;
	flex-wrap: wrap;
	height: 1.5rem;
	width: 10rem;
/*	background-color: red;*/
	margin-left: 1rem;
	margin-top: .5rem;
}

.skillsStars
{
/*	flex: 5%;*/
	width: .8rem;
	background-color: #0d6a95;
	margin-right: .5rem;
}

/*
#psSkill .skillsStars:nth-child(5), #psSkill .skillsStars:nth-child(4),
#illSkill .skillsStars:nth-child(5),#illSkill .skillsStars:nth-child(4),#illSkill .skillsStars:nth-child(3),
#aeSkill .skillsStars:nth-child(5), #aeSkill .skillsStars:nth-child(4), #aeSkill .skillsStars:nth-child(3),
#idSkill .skillsStars:nth-child(5), #idSkill .skillsStars:nth-child(4),
#anSkill .skillsStars:nth-child(5), #anSkill .skillsStars:nth-child(4),
#xdSkill .skillsStars:nth-child(5), #xdSkill .skillsStars:nth-child(4),
#frontEndSkill .skillsStars:nth-child(5), #frontEndSkill .skillsStars:nth-child(4), #frontEndSkill .skillsStars:nth-child(3), #frontEndSkill .skillsStars:nth-child(2),
#backEndSkill .skillsStars:nth-child(5), #backEndSkill .skillsStars:nth-child(4), #backEndSkill .skillsStars:nth-child(3), #backEndSkill .skillsStars:nth-child(2)*/
.skillsMaxStars
{
    width: .8rem;
/*	background-color: #0d6a95;*/
	margin-right: .5rem;
	background-color: #d6d6d6;
}



#linedinLogo, #geoLocationLogo
{
/*	display: inline-block;*/
	margin-right: 1rem;
	vertical-align: middle;
/*	height: 1.5rem;*/
}

/*_____________________________*/


#gallary>.divider>div,nav
{
	float:left;
}

#gallary>.divider>nav::after
{
	clear:both;
}

nav
{
	margin-left: 4rem;
}

nav ul li
{
	display: inline;
	font-family: p420, Helvetica, Arial;
	font-size: 2rem;
	color: #fad36a;
	margin-right: .5rem;
	vertical-align: text-top;
}

nav ul li a, nav ul li a:visited
{
	color: #fad36a;
}

.filterLight
{
/*	background-color: black;*/
	width: 2rem;
	height: 2rem;
	background-image: url("img/logopics/publish/filterFullEmty.svg");
	background-position: -3rem 0;
}

#filterCondition
{
    /*
    
    
    !!!!!!!!!!
    
    
    */
    clear: both;
	margin-left: 15rem;
	margin-top: 1rem;
}

.filterMessage
{
	float:left;
	
/*	margin-left: 1rem;*/
/*    above is for filter mode*/
	font-family: p420, Helvetica, Arial;
	font-size: 2rem;
	color: #7e7e7e;
}


#filterCondition::after
{
	content: "";
  clear: both;
  display: table;
}

.filterLight
{
	float:left;
	display: inline-block;
}

#gallaryBlocks
{
/*	background-color: azure;*/
}

.gallaryBlock
{
	margin-bottom: 4rem;
}


#wrapGallary
{
	padding-bottom: 10rem;
}

.blockLable
{
	margin-left: 2rem;
	font-family: p520, Helvetica, Arial;
	font-size: 2rem;
	text-transform: uppercase;
}

.pics
{
	display: flex;
  flex-wrap: wrap;
  padding: 0;

	margin: 0 1rem 0;
}


.pic
{
	flex: 25%;
  	padding: 0 1rem;	
}

.frame
{
	
  	vertical-align: middle;
	height: 20vw;
    background-color: #ebebeb;
    border: solid 1px #d0d0d0;
    
/*
border-top: solid thin #d0d0d0;
    border-left: solid thin #d0d0d0;
*/

/*	background: linear-gradient(#d0d0d0,#ebebeb,#ebebeb,#ebebeb,#ebebeb);*/
	margin-top: 2rem;
	margin-right: auto;
	margin-left: auto;
}


#logos .frame
{
	background-color: white;
	border: solid 1px #d0d0d0;
}

#web .frame
{
/*	background-color: tomato;*/
/*	border: solid;*/
/*    background-color: white;*/
    background-color: white;
	height: auto;
    
}
#web .frame.whiteWebPage
{
    background-color: white;
    border: solid 1px #d0d0d0;
}


#multi .frame
{
/*	background-color: darkgray;*/
/*	position: relative;*/
/*	border: solid;*/
	height: auto;
/*	padding: 5px 0 0;*/background-color: white;
}


#multi img
{
/*	display: block;*/
/*	position: absolute;*/
/*
	top:0;
	bottom: 0;
*/
/*	margin: auto;*/
/*	vertical-align:middle;*/
/*	height: 10px;*/
}


galPic
{
	height: 5rem;
	width: 5rem;
}

/*_____________________________*/

#wrapExtra
{
	display: none;
}

#extra>.divider>div,.nexToLable
{
	float:left;
}

#extra>.divider>.nexToLable
{
	margin-left: 4rem;
	font-family: p420, Helvetica, Arial;
	color: #fad36a;
}

.extraType
{
	margin-top: 1rem;
	margin-left: 15rem;
	font-family: p420, Helvetica, Arial;
	font-size: 2rem;
	color: #7e7e7e;
}


#extraBlocks
{
	margin: auto 15rem;
}


.extraPic
{
/*	background-color: royalblue;*/
}
.extraPic>.pic
{
	margin: 2rem auto 0;
/*	border: thin solid #d0d0d0;*/
    border-top:thin solid #d0d0d0;
    border-left: thin solid #d0d0d0;
	width: auto;
	padding: 0;
}

.extraPic>.pic>.frame
{
	margin: 0 auto 0;
	background-color: white;
	height: 330px;
}

/*
.extraPic>.pic>.frame>a
{
    color:orangered;
    text-align: left;
}
*/

.extraPic>.pic>.frame>a>.picLable
{
/*    background-color: aqua;*/
    text-transform: lowercase;
    display: inline-block;
    width:100%;
    text-align: right;
    font-size: 2rem;
    font-family: p530, Helvetica, Arial;
}

#footer
{
	height: 25vh;
	clear:both;
/*	border-top: thin #000000 solid;*/
}
.footerText
{
	width: 25vw;
	margin-left: 15rem;
	margin-top: 2rem;
	font-family: p330, Helvetica, Arial;
	font-size: 2rem;
	color:#bfbfbf;
}

	/*
_____________________________________new


	*/


.frame img
	{
		width: 100%;
		height: auto;
		
		
	}

img.horizontal
	{
		display: block;
		width: 100%;
		height: auto;
		margin: auto;
		
	}

img.vertical
	{
		display: block;
		height: 100%;
		width: auto;
		margin: 0 auto;
		
	}

img.square
	{
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}






/*
remain for all window sizes
	font family size color 
background color


changeable floating margin 
			width height 
*/

@media (max-width: 375px) /*and (-webkit-min-device-pixel-ratio: 3)*/
{
    
.activeInfoText.blueInfo
    {
        font-size: 2rem;
    }
    
    
/*
    .divider>.lable
    {
        color: red;
    }
*/
    .divider, .falsedivider
    {
        padding-left: 2rem;/*15rem*/
    }
    .blockLable,#filterCondition
    {
        margin-left: 2rem;
    }
}

@media (min-width: 376px) and (max-width: 474px) /*and (-webkit-min-device-pixel-ratio: 3)*/
{
    
   
  /* some CSS here */
/*	body {background-color:red;}*/
/*
    .divider>.lable
    {
        color: orange;
    }
*/
    .divider, .falsedivider
    {
        padding-left: 2rem;/*15rem*/
    }
    .blockLable,#filterCondition
    {
        margin-left: 2rem;
    }
    
/*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
}

@media (min-width: 475px) and (max-width: 500px) 
/*	and (-webkit-min-device-pixel-ratio: 3)*/
{
    

    
  /* some CSS here */
/*	body {background-color:goldenrod;}*/
    
/*
    .divider>.lable
    {
        color: yellow;
    }
*/
    .divider, .falsedivider
    {
        padding-left: 2rem;/*15rem*/
    }
    .blockLable,#filterCondition
    {
        margin-left: 2rem;
    }
    
 /*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
    
}
/*and (max-width: 682px) and (-webkit-min-device-pixel-ratio: 3)*/
@media (min-width: 501px) and (max-width: 682px)
{
  /* some CSS here */
/*	body {background-color:pink;}*/
    
    
	
	#header
	{
/*		margin-top: 2rem;*/
		width: 500px;
		margin: 0 auto 1.5rem;
		padding-top: 2rem;
		text-align: left;
	}
	
	#header h1
	{
/*		margin-top: 2rem;*/
		display: inline-block;
		margin-left: 15rem;
	}
	
	#profile
	{
		width: 100%;
	}
	
	#textProfile
	{
/*
		background-color: rebeccapurple;
		width: 31rem;
		
*/
	}
	#firstPartProfile
	{
		float: left;
	}
	#secAndThird
	{
		margin-top: 19rem;
		float: right;
/*
		width: 15rem;
		float: right;
*/
	}
	
	#profile
	{
		width: 500px;
		margin: auto;
	}
	
	#gallary
	{
		width: 500px;
		margin: auto;
	}
	
	.blockLable
	{
		margin-left: 2.5rem;
	}
	
	.footerText
	{
		width: 500px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15rem;
		padding-right: 15rem;
	}
    
 /*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
}


@media (min-width: 683px) and (max-width: 709px)
{
    
  
  /* some CSS here */
/*
	body 
	{
		background-color:red;
	}
*/
	
	#header
	{
/*		margin-top: 2rem;*/
		width: 550px;
		margin: 0 auto 1.5rem;
		padding-top: 2rem;
		text-align: left;
	}
	
	#header h1
	{
/*		margin-top: 2rem;*/
		display: inline-block;
		margin-left: 15rem;
	}
	
	#profile
	{
		width: 100%;
	}
	
	#textProfile
	{
/*
		background-color: rebeccapurple;
		width: 31rem;
		
*/
	}
	#firstPartProfile
	{
		float: left;
	}
	#secAndThird
	{
		margin-top: -.5rem;
		float: right;
/*
		width: 15rem;
		float: right;
*/
	}
	
	#profile
	{
		width: 550px;
		margin: auto;
	}
	
	#gallary
	{
		width: 550px;
		margin: auto;
	}
	
	.blockLable
	{
		margin-left: 2.5rem;
	}
	
	.footerText
	{
		width: 550px;
		margin-right: auto;
		margin-left: auto;
		padding-left: 15rem;
		padding-right: 15rem;
	}
    
  /*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
}


@media (min-width: 0px) and (max-width: 899px)
{
	img.square
	{
		display: block;
		width: auto;
		height: 100%;
		margin: 0 auto;
	}
    
    
    
/*
    ХХХХХХХХХХХХХХХХХХХХХ    
    ВОТ ЗДЕСЬ СВОРАЧИВАЕМ
    ХХХХХХХХХХХХХХХХХХХХХ
*/
    #wrapProfile 
    {
        padding-bottom: 0;
        height:5rem;
    }
     #textProfile
    {
        display: none;
    }
 /*
    ХХХХХХХХХХХХХХХХХХХХХ    
    ВОТ ЗДЕСЬ СВОРАЧИВАЕМ
    ХХХХХХХХХХХХХХХХХХХХХ
*/ 
    .collapsibleMark:after
    {
        content: " \25ba";
    }
    
    .activeMark:after
{
    content: " \25bc";
}
    
}




@media (min-width: 710px) and (max-width: 899px)
{
  /* some CSS here */
/*	body {background-color:pink;}*/
        
	
	#header
	{
/*		margin-top: 2rem;*/
		margin: 0 auto 1.5rem 15rem;
		padding-top: 2rem;
		text-align: left;
	}
	
	#profile
	{
		width: 100%;
	}
	
	#textProfile
	{
/*
		background-color: rebeccapurple;
		width: 31rem;
*/
	}
	
	
	#secndPartProfile
	{
		float: left;
		width: 35rem;
/*		margin-right: 20rem;*/
	}

	#thirdPartProfile
	{
		float: left;
		width: 38rem;
	}
	
	#firstPartProfile
	{
		float: left;
	}
	
	
	#secAndThird
	{
		margin-top: -.5rem;
		width: 73rem;
		float: right;
	}
	
	#profile
	{
/*		width: 550px;*/
/*		margin: auto;*/
	}
	
/*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
	
}




@media (min-width: 900px) and (max-width: 1499px)
{
  /* some CSS here */
/*	body {background-color:red;}*/
	
body
	{
		width: 100%;
		
	}
	
	#superContainer
	{
		width:230rem;
		margin: 0 auto;
	}
	
	#header
	{
/*		margin-top: 2rem;*/
		margin: 0 auto 1.5rem 15rem;
		padding-top: 4rem;
		text-align: left;
	}
	
	#wrapProfile
	{
		width: 70rem;
/*		border-right: 0.2px solid #707070;*/
	}
	#profile .divider
	{
		border-right: 2px solid #fff;
	}
	
	#profile
	{
		width: 100%;
/*		border-right: 0.2px solid #707070;*/
	}
	
	
	#wrapProfile
	{
		float: left;
	}
	
	#wrapGallary
	{
		float: left;
		width:160rem;
		height: 100%;
	}
	
	#gallaryBlocks
	{
		margin-left: 15rem;
	}
	
	.pics
	{
		margin: 0 10rem 0 -1rem;
	}
	
	.blockLable
	{
		margin-left: 0;
	}
	
	.frame
	{
		height: 160px;
	}

		#wrapExtra
	{
		display:none;
/*
		float: left;
		width:105rem;
*/
	}
	
	
	.footerText
	{
		width: 230rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 15rem;
		padding-right: 15rem;
	}
	
		
	#container::after
	{
		content: "";
		display: table;
		clear: both;
	}
	
    
/*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
	
	
}



@media (min-width: 1500px) 
{
  /* some CSS here */
/*	body {background-color:pink;}*/
	
body
	{
		width: 100%;
		
	}
	
	#superContainer
	{
		width:335rem;
		margin: 0 auto;
	}
	
	#header
	{
/*		margin-top: 2rem;*/
		margin: 0 auto 1.5rem 15rem;
		padding-top: 4rem;
		text-align: left;
	}
	
	#wrapProfile
	{
		width: 70rem;
/*		border-right: 0.2px solid #707070;*/
	}
	#profile .divider
	{

		border-right: 2px solid #fff;
	}
	
	#wrapGallary .falsedivider
	{

		border-right: 2px solid #fff;
	}
	
	#profile
	{
		width: 100%;
/*		border-right: 0.2px solid #707070;*/
	}
	
	
	#wrapProfile
	{
		float: left;
	}
	
	#wrapGallary
	{
		float: left;
		width:160rem;
		height: 100%;
	}
	
	.pics
	{
		margin: 0 10rem 0 -1rem;
	}
	
	#gallaryBlocks
	{
		margin-left: 15rem;
	}
	
	.blockLable
	{
		margin-left: 0;
	}
	
	.frame
	{
		height: 160px;
		
	}

		#wrapExtra
	{
		display:block;
		float: left;
		width:105rem;
	}
	
	.footerText
	{
		width: 335rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 15rem;
		padding-right: 15rem;
	}
	
	
	

	
	
	
		
	#container::after
	{
		content: "";
		display: table;
		clear: both;
	}
    
/*    for blueInfo
    @media (min-aspect-ratio:5.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1rem;
            }
        }
    @media (max-aspect-ratio:5.2) and (min-aspect-ratio:4.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 1.5rem;
            }
        }
     @media (max-aspect-ratio:4.2) and (min-aspect-ratio:3.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2rem;
            }
        }
    @media (max-aspect-ratio:3.2) and (min-aspect-ratio:2.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 2.5rem;
            }
        }
     @media (max-aspect-ratio:2.2) and (min-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 3rem;
            }
        }
    @media (max-aspect-ratio:1.2) 
        {
            .activeInfoText.blueInfo
            {
                font-size: 4rem;
            }
        }*/
	
}




@media (orientation: landscape) {
    
    
    
    #slider>div>div {
  /*      border:thick solid green;
            background-color: red;*/
      		  height:75vh;
        }
 
.square, .activeFalseSquare{
         /*   background-color:rgba(101,129,176,0.62);*/
            aspect-ratio:1/1;
           height:95%;
           width:71.25vh;
 
        }
    #slider div img.horizontalSwipe {
/*
          width: 100%;
          height: auto;
*/
         width: 90%;
            height: auto;
        }
    #slider div img.verticalSwipe {
            width: auto;
            height: 90%;
        }
}

@media (orientation: portrait){/* and (max-aspect-ratio:.8) {*/
    #slider>div>div {
      /*  border:thick solid red;
            background-color: blue;*/
		        height:75vh;
        }
.square, .activeFalseSquare{
    /* background-color:rgba(176,114,101,0.62);
           background-color:brown;*/
			aspect-ratio:1/1;
     		width:95%;
           height:auto;  
        }
    #slider div img.horizontalSwipe {
            width: 90%;
          height: auto;
        }
    #slider div img.verticalSwipe {
/*
             width: auto;
            height: 100%;
*/
             width: auto;
            height: 90%;
        }
}


@media (orientation: portrait) and (min-aspect-ratio:.8) {
  #slider>div>div {
        /*border:thick solid red;*/
/*            background-color: blue;*/
		        height:95vh;
        }
    .activeMessage{
         height:95vh;
    }
    
/*
    .activeInfoText.blueInfo
    {
        font-size: 4rem;
    }
*/
    
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


/*
@media (max-aspect-ratio:.8) 
{
    
    @media (min-width: 1500px) 
    {
           .activeInfoText.blueInfo
        {
            font-size: 1rem;
        }
        body
        {
            background-color: red;
        }
    }
    @media (min-width: 501px) and (max-width: 1499px) 
    {
           .activeInfoText.blueInfo
        {
            font-size: 1rem;
        }
         body
        {
            background-color: pink;
        }
    }
    @media (max-width: 500px) 
    {
           .activeInfoText.blueInfo
        {
            font-size: 1rem;
        }
         body
        {
            background-color: fuchsia;
        }
    }
    
}

@media (max-aspect-ratio:1.2) and (min-aspect-ratio:.8) 
{
    .activeInfoText.blueInfo
        {
            font-size: 2rem;
        }
    body
        {
            background-color: blueviolet;
        }
}
@media (min-aspect-ratio:1.2) 
{
    .activeInfoText.blueInfo
        {
            font-size: 3rem;
        }
    body
        {
            background-color: sandybrown;
        }
}
*/





.ytTag
{
	height: 10rem;
	width: 90%;/*32rem;*/
	background-color: none;
/*  whitesmoke;*/
/*	margin-top: -3rem;*/
    
    margin-top: 2rem;
/*  margin-left: -50rem;*/
/*	border: solid .5rem white;*/
	color:black;
/*    cursor:pointer;*/
    z-index: 999;
}

.ytTagButton, .ytTagMessOnButton
{
   cursor:pointer;
/*    background-color: pink;*/
     float: left;
    margin-right: 1rem;
}

.ytTagDesguised
{
     z-index: -1;
    background-color: whitesmoke;
}

.ytTag img
{
   pointer-events: none;
    height: 8rem;
   
/*  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);*/

}

.poinerEventsNone
{
    pointer-events: none;
/*    cursor: wait;*/

}


.linkMiniImglink
{
    color:blue;
    margin-bottom: 3rem;
    text-transform: initial;
}

.linksign
{
    font-size: 3rem;
/*    vertical-align: -.5rem;*/
    line-height: 3rem;
}

.copysign
{
/*    margin-top: 15rem;*/
    font-size: 4rem;
    vertical-align: -.5rem;
    line-height: 3rem;
}

.slowSignal
{
    color:#D4D4D4;
/*    font-size: 35rem;*/
}





/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}





.displayNone
{
    display:none;
}


#myPhoto>img
{
    height: 100%;
}