body,html {
  height: 100%;
  background: url(../images/backY.jpg);
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.topleft_text {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 4px;
  font-size: 11px; 
  color: #1a0033;
  background-color: #fce1ec;
  border: 3.5px solid white;
  border-radius: 31px;
  max-width: 100%;
  min-width: 10%;
  text-align: center;
  padding: 7px 07px 7px 07px;
}
.YEMENSKI_LOGO{
  display:flex;
  justify-content: Center;
  align-items:Center;
  height:450px;
}

#logo{
	width: 450px;	
}

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);
}

.Copyright {
  position: absolute;
  width: 100%;
  font-size: 11.5px;
  font-family: 'Open Sans', sans-serif;
  color: white;
  left: 50%;
  top: 96%;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.circle_icon {
  padding: 10px;
  margin-left: 0px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.circle_icon:hover {
  /*opacity: 0.7;*/
  color: white;
  text-decoration: none;
  background-color: #581845;
  transform: rotateY(180deg);
  transition: all 1s;
}

.fab {
  font-size: 20px;
}
.fa {
  font-size: 20px;
}

.fa-brands {
  font-size: 20px;
}

.fa-envelope {
  background: white;
  color: #1a0033;
}

.fa-x-twitter {
  background: white;
  color: #1a0033;
}

.fa-instagram {
  background: white;
  color: #1a0033;
}

.fa-tiktok {
  background: white;
  color: #1a0033;
}




/*---------------------------------@media----------------------------------*/

/* portrait 2 */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);}
  
.circle_icon {
  padding: 5px;}
 
.Copyright {
  font-size: 9px;}
}

/* landscape 2 */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);}
 
.circle_icon {
  padding: 5px;}
 
.Copyright {
  font-size: 10px !important; }
}

/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* portrait 3 */

  @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);}
 
.circle_icon {
  padding: 10px;}
 
.Copyright {
  font-size: 9px;}
}

/* Landscape */
 @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  
.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 12px;}
}

/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* portrait 3 */

  @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);}
  

 
.circle_icon {
  padding: 10px;}
 
.Copyright {
  font-size: 9px;}
}

/* Landscape */
 @media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  

.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 12px;}
}


/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* portrait 3 */

  @media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 896px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);}
.circle_icon {
  padding: 10px;}
 
.Copyright {
  font-size: 9px;}
}

/* Landscape 3 */
 @media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 896px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  
.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 14px !important;; }
}


/* Landscape 2 */
 @media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 896px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  
.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 14px;}
}


/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */

/* portrait 3 */
  @media only screen 
  and (min-device-width: 428px) 
  and (max-device-width: 926px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);}
  
.circle_icon {
  padding: 10px;}
 
.Copyright {
  font-size: 9px;}
}

/* Landscape */
 @media only screen 
  and (min-device-width: 428px) 
  and (max-device-width: 926px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  
.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 12px;}
}


/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------- */

/* portrait 3 */
  @media only screen 
  and (min-device-width: 430px) 
  and (max-device-width: 932px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

.smi {
  position: absolute;
  left: 50%;
  top: 85%;
  transform: translate(-50%, -50%);}
  
.circle_icon {
  padding: 10px;}
 
.Copyright {
  font-size: 9px;}
}

/* Landscape */
 @media only screen 
  and (min-device-width: 430px) 
  and (max-device-width: 932px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

.smi {
  position: absolute;
  left: 50%;
  top: 79%;
  transform: translate(-50%, -50%);}
  
.circle {
  padding: 7px;}
 
.Copyright {
  font-size: 12px;}
}