<style>

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.pict1
{
width:100%; 
height:50px;
}
.pict2
{
width:100%; 
height:50px;
}
.pict3
{
width:100%; 
height:70px;
}


.crop1{
  width:130px;
  height:130px;
  object-fit:cover;
   border-radius:3%;
   border:3px  #999999 solid;
  }

.brdr_all { border:1px #CCCCCC solid;}
.brdr_corner3 { border-radius:3px;}
.brdr_corner5 { border-radius:5px;}
.brdr_shadow { box-shadow:1px 1px 5px 0px rgba(210, 218, 226,1.0)}

.fill_red { background:#ff5e57;}
.fill_green { background:rgba(26, 188, 156,0.1);}
.fill_green2 { background:rgba(39, 174, 96,1.0);}
.fill_blue { background:#4bcffa;}
.fill_yellow { background:rgba(255, 192, 72,1.0);}
.fill_grey { background:#d2dae2;}
.fill_white { background:#FFFFFF;}
.fill_black { background:#000;}

.pad2 {padding:2px;}
.pad5 {padding:5px;}
.pad10 {padding:10px;}
.pad30 {padding:30px;}

.hx1 {font-family:"Roboto";font-size:30px;font-weight:100 }
.hx2 {font-family:"Roboto";font-size:20px;font-weight:100 }
.hx3 {font-family:"Roboto";font-size:16px;font-weight:100 }

.color-white {color:#FFFFFF;}
.color-black {color:#000000;}
.color-grey {color:#CCCCCC;}
.color-tosca {color: #006666;}
 


.wrp5 {width:19.5%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}
.wrp5x {width:19.5%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}

.wrp4 {width:24.5%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}
.wrp3 {width:32.83%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}
.wrp2 {width:49.45%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}
.wrp2x {width:73%;margin-left:0.5%; margin-top:4px;height:auto;position:relative;float:left;}
.wrp1 {width:99.34%;margin-left:0.5%;margin-top:4px;height:auto;position:relative;float:left;}
.wrp1x {width:72%;margin-top:4px;height:auto;position:relative;float:right;}

.box6 {width:10%; height:auto;position:relative;float:left; }
.box5 {width:20%; height:auto;position:relative;float:left; }
.box4 {width:25%;margin-right:2px; height:auto;position:relative;float:left; }
.box3 {width:33.3333%; height:auto;position:relative;float: }
.box2x {width:74%;  height:auto;position:relative;float:left; }
.box2 {width:50%; height:auto;position:relative;float:left; }
.box1 {width:100%; height:auto;position:relative;float:left; }
.box1x {width:230px; height:240px;position:absolute;margin-left:-29%;margin-top:75px;float:left;}

.center5 {margin-left:40%;} 
.center4 {margin-left:35%;} 
.center3 {margin-left:30%;} 
.center2 {margin-left:25%;} 
.center1 {margin-left:0%;} 



.boxcontainer2 {width:70%;height:auto;position:relative;float:left;margin-left:15%;margin-top:-15%;border:8px #000 solid; }
.boxtop {margin-top:-40px;}
.button-flatredns {
    border: 1px solid  #c0392b;         
    background-color: #c0392b;         
    color: #FFFFFF;                    
    font-size:14px;
	font-weight:300;
 	border-radius:1px; 
	 
	width:100px;
	padding:0px;
}

.button-flatgreenns {
    border: 1px solid #27ae60;         
    background-color: #27ae60;         
    color: #FFFFFF;                    
    font-size:14px;
	font-weight:300;
 	border-radius:1px;
	 
	width:100px;  
	padding:0px; 
}

.button-flatbluens {
     border: 1px solid #2980b9;         
    background-color: #2980b9;         
    color: #FFFFFF;                    
    font-size:14px;
	font-weight:300;
 	border-radius:1px; 
	 
	width:100px;
	padding:0px;
	 
	
}

.button-flatyellowns {
    border: 1px solid  #d35400;         
    background-color: #d35400;         
    color: #FFFFFF;                    
    font-size:14px;
	font-weight:100;
 	border-radius:1px; 
	 
	width:100px;
	padding:0px;
}

 



@media only screen and (max-width: 962px) 
{
.pict1
{
width:100%; 
height:25%;
}
.pict2
{
width:100%; 
height:10%;
}
.pict3
{
width:100%; 
height:10%;
}

.hx1 {font-family:"Roboto";font-size:24px;font-weight:400 }
.hx2 {font-family:"Roboto";font-size:14px;font-weight:100 }
.hx3 {font-family:"Roboto";font-size:14px;font-weight:100 }

.wrp5 {width:100%; margin-top:14px;height:auto;position:relative;float:left;}
.wrp5x { width:48%; margin-top:14px;height:auto;position:relative;float:left; }
.wrp4 {width:100%; margin-top:14px;height:auto;position:relative;float:left;}
.wrp3 {width:100%; margin-top:14px;height:auto;position:relative;float:left;}
.wrp2 {width:100%; margin-top:14px;height:auto;position:relative;float:left;}
.wrp2x {width:90%; margin-left:7px;margin-top:14px;height:auto;position:relative; }
.wrp1 {width:100%; margin-top:14px;height:auto;position:relative;float:left;}
.wrp1x {width:100%;margin-top:4px;height:auto;position:relative;float:right;}


.box6 {width:100%; height:auto;position:relative;float:left }
.box5 {width:100%; height:auto;position:relative;float:left }
.box4 {width:100%; height:auto;position:relative;float:left }
.box3 {width:100%; height:auto;position:relative;float:left }
.box2 {width:100%; height:auto;position:relative;float:left }
.box2x {width:100%;margin-top:5px; height:auto;position:relative;float:left }

.box1 {width:100%; height:auto;position:relative;float:left;}

.boxtop {margin-top:20px;}
.pad30 {padding:10px;}
 
.box1x {width: 70px; height: 70px;position:absolute;margin-left:35%;margin-top:-50px;float:left; }

.center5 {margin-left:0%;} 
.center4 {margin-left:0%;} 
.center3 {margin-left:0%;} 
.center2 {margin-left:0%;} 
.center1 {margin-left:0%;} 
}


.boxalas
{
	z-index:9999999999;
	left:0px;
	top:0px;
	width:100%;
	height:7000px;
	position:fixed;
	background-color:rgba(0, 0, 0,0.7);
	border-radius:0px 0px;
	font-weight:bold;
	overflow:hidden;
	display:block;
}
.croplingkaran3 {  width:120px;
  height:120px;
  object-fit:cover;
   border-radius:3%;
   border:1px  #999999 solid;
}
.boxblue
 {
	z-index:9999999999;
 
	width:90%;
	height:600px;
	position:absolute;
	padding:1%;
	border: 1px solid #CCCCCC;
 	font-weight:bold;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-x: hidden;
	left: 5%;
	top: 10px;
	border-radius:5px;
	background-color:#FFFFFF;
	
  }
@media (max-width: 992px)

{
.croplingkaran3 {  width:120px;
  height:120px;
  object-fit:cover;
   border-radius:3%;
   border:1px  #999999 solid;
}
.boxalas
{
	z-index:9999999999;
	left:0px;
	top:0px;
	width:100%;
	height:7000px;
	position:fixed;
	background-color:rgba(0, 0, 0,0.7);
	border-radius:0px 0px;
	font-weight:bold;
	overflow:hidden;
	display:block;
}
.boxblue
 {
	z-index:9999999999;
 
	width:95%;
	height:auto;
	position:absolute;
	margin-top:0px; 
	border: 1px solid #CCCCCC;
 	font-weight:bold;
 	left: 2.5%;
	top:10px; 
	overflow:scroll;
	 
	
  }
} 
 
</style>