Difference between revisions of "Template:SJTU-BioX-Shanghai/interlab CSS"

 
(41 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
 
+
        #bodyContent a[href ^="https://"], .link-https{padding:0;}
  
 
.content{
 
.content{
Line 47: Line 47:
  
 
.container_of_content_nav_item{
 
.container_of_content_nav_item{
−
     width: 100%;
+
     width: 125%;
−
    height: 95vh;
+
−
    border:none;
+
 
      
 
      
−
     margin-top: 5vh;
+
    height: 100vh;
 +
    border:none;
 +
     margin-left: -1vw;
 
      
 
      
 +
    z-index: 99997;
 
}
 
}
  
Line 67: Line 68:
 
.content_nav_top .content_nav_logo{
 
.content_nav_top .content_nav_logo{
 
     position: absolute;
 
     position: absolute;
−
     top: 60%;
+
     top: 70%;
−
     right: 13%;
+
     right: 18.5%;
 
     width: 5vw;
 
     width: 5vw;
 
     height: auto;
 
     height: auto;
 +
   
 +
    transition: transform 0.1s;
 +
}
 +
 +
.content_nav_top .content_nav_logo:hover{
 +
    transform: scale(1.1,1.1) ;
 +
    -ms-transform: scale(1.1,1.1); /* IE 9 */
 +
    -moz-transform:scale(1.1,1.1); /* Firefox */
 +
    -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
 +
    -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
 +
    -o-transform:scale(1.1,1.1); /* Opera */
 
}
 
}
  
Line 80: Line 92:
 
     width: 100%;
 
     width: 100%;
 
     height: auto;
 
     height: auto;
−
     background-image: url("https://static.igem.org/mediawiki/2018/7/7b/T--SJTU-BioX-Shanghai--content_nav_bac1.png");
+
     background-image: url("https://static.igem.org/mediawiki/2018/2/29/T--SJTU-BioX-Shanghai--content_nav_middle.png");
 
     background-size: contain;
 
     background-size: contain;
 
     background-repeat:repeat-y;
 
     background-repeat:repeat-y;
 
}
 
}
 +
  
  
Line 90: Line 103:
 
     width: 100%;
 
     width: 100%;
 
     height: auto;
 
     height: auto;
 +
   
 +
 
 +
    position: relative;
 
      
 
      
 
}
 
}
  
−
.content_nav_bottom img{
+
.content_nav_bottom .content_nav_b_bac{
 
     width: 100%;
 
     width: 100%;
 +
}
 +
 +
.content_nav_bottom .content_nav_b_story_badge
 +
{
 +
    position: absolute;
 +
    width: 29%;
 +
    bottom: 30%;
 +
    left: 12%;
 +
   
 +
    transition: transform 0.1s;
 +
}
 +
 +
.content_nav_bottom .content_nav_b_story_badge:hover
 +
{
 +
    transform: scale(1.1,1.1) ;
 +
    -ms-transform: scale(1.1,1.1); /* IE 9 */
 +
    -moz-transform:scale(1.1,1.1); /* Firefox */
 +
    -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
 +
    -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
 +
    -o-transform:scale(1.1,1.1); /* Opera */
 
}
 
}
  
Line 102: Line 138:
 
.content_nav_item_list{
 
.content_nav_item_list{
 
      
 
      
−
     padding: 4vw 0 0 8vw !important;
+
     padding: 4vw 0 2vh 12vw !important;
 
     margin: 0 !important;
 
     margin: 0 !important;
 
     width: 100%;
 
     width: 100%;
Line 159: Line 195:
 
.content p, .content a{
 
.content p, .content a{
 
     font-size: 1.2vw;
 
     font-size: 1.2vw;
 +
}
 +
 +
.content h1, h2, h3, h4, h5, h6{
 +
    font-family: Lora !important;
 +
 
}
 
}
  
Line 166: Line 207:
 
}
 
}
  
−
.conent h2, .content h2 a{
+
.content h2, .content h2 a{
 
     font-size: 1.4vw;
 
     font-size: 1.4vw;
 
     color: black;
 
     color: black;
 +
    padding: 6px 0 6px 10px;
 +
   
 +
    background-color: rgba(220,220,220,1);
 +
    border-radius: 5px;
 
}
 
}
 +
 +
.content h2 a:hover{
 +
    text-decoration: none;
 +
 +
}
 +
 +
.content h3, .content h3 a{
 +
    font-size: 1.3vw;
 +
    color: black;
 +
    padding: 10px 0;
 +
}
 +
 +
.content h3 a:hover{
 +
    text-decoration: none;
 +
 +
}
 +
  
 
.content_text{
 
.content_text{
Line 192: Line 254:
 
}
 
}
 
.text h1,.text h2{
 
.text h1,.text h2{
−
     padding-top:2vw;
+
     padding-top:1vw;
 
     padding-bottom:1vw;
 
     padding-bottom:1vw;
 +
    margin-top: 1vw;
 
}
 
}
 
.text p{
 
.text p{
Line 200: Line 263:
 
     line-height: 2.2vw;
 
     line-height: 2.2vw;
 
     letter-spacing:0.002vw;
 
     letter-spacing:0.002vw;
−
 
+
    /*text-align:justify;
 +
    text-justify:inter-ideograph;/*IE*/*/
 
}
 
}
  
Line 232: Line 296:
 
.text a{
 
.text a{
 
     text-decoration-line: none;
 
     text-decoration-line: none;
−
     padding:10px;
+
      
 
     position: relative;
 
     position: relative;
 
}
 
}
Line 247: Line 311:
  
 
.text img{
 
.text img{
−
     width: 80%;
+
     width: 70%;
 
     margin:0 auto;
 
     margin:0 auto;
 
}
 
}
Line 270: Line 334:
 
     list-style: disc;  
 
     list-style: disc;  
 
     font-size: 1.2vw;  
 
     font-size: 1.2vw;  
−
     padding:1.5vw 1.5vw 1.5vw 3vw;
+
     padding:1.5vw 1.5vw 1.5vw 3vw !important;
 
     line-height: 2vw;
 
     line-height: 2vw;
−
     border:4px solid yellow;
+
      
 
     margin: 0 !important;
 
     margin: 0 !important;
 
}
 
}
Line 292: Line 356:
 
     position: fixed;
 
     position: fixed;
 
     right: 3vw;
 
     right: 3vw;
−
     bottom: 10vh;
+
     bottom: 20vh;
−
     background-image: url("https://static.igem.org/mediawiki/2018/0/05/T--SJTU-BioX-Shanghai--return_to_top.png");
+
     background-image: url("https://static.igem.org/mediawiki/2018/d/dd/T--SJTU-BioX-Shanghai--return_to_top_Ecoli1.png");
 
     background-size:100%;
 
     background-size:100%;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     width:4vw;
+
     width:8vw;
 
     height: 10vw;
 
     height: 10vw;
 
     line-height: 60px;
 
     line-height: 60px;
Line 334: Line 398:
 
     border: 0;
 
     border: 0;
 
     background-color: rgba(0,0,0,0.7);
 
     background-color: rgba(0,0,0,0.7);
−
     z-index: 9990;
+
     z-index: 999999999;
 
      
 
      
 
}
 
}
Line 342: Line 406:
 
     padding:15px;
 
     padding:15px;
 
     border-radius: 10px;
 
     border-radius: 10px;
−
     z-index: 9999991;
+
    display: flex;
−
 
+
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: column;
 +
    justify-content: center;
 +
    align-items: center;
 +
       
 +
   
 +
   
 +
     z-index: 999999999;
 +
   
 +
    max-width: 65%;
 +
   
 
     cursor: zoom-out;
 
     cursor: zoom-out;
 +
}
 +
 +
.zoom_out_album img{
 +
 
 +
    max-width: 65%;
 +
   
 +
}
 +
 +
.zoom_out_album p{
 +
    padding: 10px;
 +
}
 +
 +
/******************************* storage box ***************************/
 +
.storage_box{
 +
    width: 94%;
 +
    height: auto;
 +
    padding: 10px 3%;
 +
}
 +
 +
.storage_box_list{
 +
   
 +
    width: 100%;
 +
   
 +
    list-style: none;
 +
    margin: 0!important;
 +
    padding: 0 !important;
 +
    display: flex;
 +
    display: -webkit-flex;
 +
    flex-direction: column;
 +
    justify-content: center;
 +
    align-items: center;
 +
   
 +
   
 +
}
 +
 +
.storage_box_ele{
 +
    width: 100%;
 +
    height: auto;
 +
 +
    margin: 10px 0;
 +
   
 +
}
 +
 +
.storage_header{
 +
    width: 100%;
 +
    height: 40px;
 +
    padding: 0;
 +
   
 +
    background-color: #FDE3CA;
 +
   
 +
}
 +
 +
.storage_header>p{
 +
    float: left;
 +
    padding: 0;
 +
    padding-left: 10px;
 +
    margin: 0;
 +
    height: 40px;
 +
   
 +
   
 +
    line-height: 40px;
 +
   
 +
}
 +
 +
.storage_header>img{
 +
    float: right;
 +
    padding: 5px 10px;
 +
    height: 30px;
 +
    width: 30px;
 +
   
 +
    transition: transform 0.5s;
 +
    -moz-transition: transform 0.5s; /* Firefox 4 */
 +
    -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
 +
    -o-transition: transform 0.5s; /* Opera */
 +
}
 +
 +
.storage_text{
 +
   
 +
    display: none;
 +
    width:90%;
 +
    padding-left: 5%;
 +
    padding-right: 5%;
 +
   
 +
    background-color: rgba(241,240,240, 1);
 +
    border-bottom-left-radius: 10px;
 +
    border-bottom-right-radius: 10px;
 +
   
 +
   
 +
}
 +
 +
/************************ arrow link *******************/
 +
.arrow_link{
 +
    color: black;
 +
   
 +
}
 +
 +
.arrow_link::after{
 +
    content: "\27a4";
 +
    color: #004bd8;
 +
    padding-left: 5px;
 +
}
 +
 +
/*********************** image atlas **********************/
 +
.image_atlas{
 +
    width: 100%;
 +
    height: auto;
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
   
 +
    flex-direction: column;
 +
    justify-content: center;
 +
    align-content: center;
 +
   
 +
   
 +
}
 +
 +
.atlas_filter{
 +
    width: 100%;
 +
    height: 30px;
 +
    padding: 5px 0;
 +
    border-top-left-radius: 10px;
 +
    border-top-right-radius: 10px;
 +
    background-color:#FDE3CA;
 +
   
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: space-around;
 +
    align-items: center;
 +
}
 +
 +
.one_filter{
 +
    width: auto;
 +
    height: 100%;
 +
    padding: 0 1vw;
 +
   
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: flex-start;
 +
    align-items: center;
 +
}
 +
 +
.one_filter p{
 +
    padding: 0 1vw;
 +
}
 +
 +
.one_filter select{
 +
    height: 20px;
 +
    min-width: 10vw;
 +
}
 +
 +
 +
.atlas_imgDisplay{
 +
    width: 100%;
 +
    height: auto;
 +
    background-color: rgba(241,240,240, 1);
 +
   
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center;
 +
}
 +
 +
.atlas_imgDisplay img{
 +
    padding: 5%;
 +
    width: 90%;
 +
}
 +
 +
/****************** badge boxes ************************/
 +
.badge_boxes{
 +
   
 +
    width: 100%;
 +
    height: auto;
 +
    margin-top: 5vw;
 +
   
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: space-around;
 +
    align-items: center; 
 +
}
 +
 +
.badge_box{
 +
    width: 25vw;
 +
    height: auto;
 +
    position: relative;
 +
   
 +
    display: -webkit-box;
 +
    display: -moz-box;
 +
    display: -ms-flexbox;
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center; 
 +
   
 +
    background-color: rgba(230,230,230,0.95);
 +
    border-radius: 2vw;
 +
}
 +
 +
.badge_box_txt{
 +
    padding: 1vw;
 +
    padding-top: 4vw;
 +
   
 +
}
 +
 +
.badge_box_txt h3{
 +
    text-align: center;
 +
}
 +
 +
 +
 +
.badge_box>img{
 +
   
 +
    width: 8vw;
 +
    height: 8vw;
 +
    border-radius: 4vw;
 +
   
 +
    position: absolute;
 +
    top: -4vw;
 +
    left: 8.5vw;
 +
 
 +
   
 +
}
 +
 +
 +
.check_icon{
 +
width: 2vw !important;
 +
display:inline-block;
 
}
 
}

Latest revision as of 17:38, 6 December 2018

/******************This is the css code for content template********************************/

/* basic settings */

  1. home_logo, #sideMenu { display:none; }

#sideMenu, #top_title, .patrollink {display:none;} #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } 

       #bodyContent a[href ^="https://"], .link-https{padding:0;}

.content{ 

   width: 100%;
   height:auto !important;
   overflow: hidden;
   padding-top:10px;
   background-color: rgba(241,240,225, 0.7);

}


/*****************************content nav**********************************/ .content_nav{ 

   position: fixed;   
   width: 22vw;
   height: 100vh;
   z-index: 99;

}

.content_nav ul{ 

   list-style: none;
   padding: 0;
   margin:0;

}

.content_nav li{ 

   padding: 0;
   margin:0;

}

.content_nav a{ 

   text-decoration: none;
   color:black;
   cursor:pointer;

}


.container_of_content_nav_item{ 

   width: 125%;
   
   height: 100vh; 
   border:none;
   margin-left: -1vw;
   
   z-index: 99997;

}

.content_nav_top{ 

   width: 100%;
   height: auto;
   position: relative;

}

.content_nav_top>img{ 

   width: 100%;

}

.content_nav_top .content_nav_logo{ 

   position: absolute;
   top: 70%;
   right: 18.5%;
   width: 5vw;
   height: auto;
   
   transition: transform 0.1s;

}

.content_nav_top .content_nav_logo:hover{ 

   transform: scale(1.1,1.1) ;
   -ms-transform: scale(1.1,1.1); 	/* IE 9 */
   -moz-transform:scale(1.1,1.1); 	/* Firefox */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -o-transform:scale(1.1,1.1); 	/* Opera */

}

.content_nav_top .content_nav_logo img{ 

   width: 100%;

}

.content_nav_middle{ 

   width: 100%;
   height: auto;
   background-image: url("T--SJTU-BioX-Shanghai--content_nav_middle.png");
   background-size: contain;
   background-repeat:repeat-y;

}



.content_nav_bottom{ 

   width: 100%;
   height: auto;
   
  
   position: relative;

}

.content_nav_bottom .content_nav_b_bac{ 

   width: 100%;

}

.content_nav_bottom .content_nav_b_story_badge { 

   position: absolute;
   width: 29%;
   bottom: 30%;
   left: 12%;
   
   transition: transform 0.1s;

}

.content_nav_bottom .content_nav_b_story_badge:hover { 

   transform: scale(1.1,1.1) ;
   -ms-transform: scale(1.1,1.1); 	/* IE 9 */
   -moz-transform:scale(1.1,1.1); 	/* Firefox */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -o-transform:scale(1.1,1.1); 	/* Opera */

}


/*** content nav_item list & item *******/

.content_nav_item_list{ 

   padding: 4vw 0 2vh 12vw !important;
   margin: 0 !important;
   width: 100%;

}


.content_nav_item { 

   height: 2vw;
   line-height: 1.5vw;



   padding: 5px 0.5vw 5px 0.5vw;
   
   
   
   text-decoration: none;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;

}

.content_nav_item img{ 

   width: 2.5vw;
   
   transition: transform 0.5s;
   -moz-transition: transform 0.5s; /* Firefox 4 */
   -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
   -o-transition: transform 0.5s; /* Opera */

}

.content_nav_item a{ 

   padding-left: 1vw;
   text-align: left;
   
   font-size:1.2vw;

}

.content_nav_item a::before{ 

   content: "";
   width: 1vw;
   height: 2vw;
   background-color: red;

}

.content_nav_item a:hover{ 

   font-weight: bold;
   color: rgb(143,43,40);

}


/*****************************content text**********************************/ .content p, .content a{ 

   font-size: 1.2vw;

}

.content h1, h2, h3, h4, h5, h6{ 

   font-family: Lora !important;

}

.content h1{ 

   font-size: 1.6vw;
   color: black;

}

.content h2, .content h2 a{ 

   font-size: 1.4vw;
   color: black;
   padding: 6px 0 6px 10px;
   
   background-color: rgba(220,220,220,1);
   border-radius: 5px;

}

.content h2 a:hover{ 

   text-decoration: none;

}

.content h3, .content h3 a{ 

   font-size: 1.3vw;
   color: black;
   padding: 10px 0;

}

.content h3 a:hover{ 

   text-decoration: none;

}


.content_text{ 

   padding-left:25vw;
   padding-top:3vh;
   padding-bottom: 9vw;
   
   width:58%;

}



.text{ 

   width:100%;
   
   position: relative;
   padding:10px;

} .text h1,.text h2{ 

   padding-top:1vw;
   padding-bottom:1vw;
   margin-top: 1vw;

} .text p{ 

   word-break: normal;
   padding:5px;
   line-height: 2.2vw;
   letter-spacing:0.002vw;
   /*text-align:justify;
   text-justify:inter-ideograph;/*IE*/*/

}

.text table{ 

   font-size: 1.2vw;

}

p.fig_illustration{ 

   font-weight: bold;
   text-align: center;
   padding-top:10px;
   padding-bottom: 20px;

}

p.table_illustration{ 

   font-weight: bold;
   text-align: center;
   padding-top:20px;
   padding-bottom: 10px;

}

.place_holder{ 

   position:absolute;
   width: 30%;
   height: 50px;
   top:-50px;
   display: block;

}

.text a{ 

   text-decoration-line: none;
   
   position: relative;

}

div.img_in_text{ 

   width:100%;
   height: auto;
   margin: 0 auto;
   display: inline-block;
   text-align: center;
   padding-top:10px;

}


.text img{ 

   width: 70%;
   margin:0 auto;

}

.zoom_out_able{ 

   cursor: zoom-in;

}

div.table_in_text{ 

   width: 100%;
   height: auto;
   text-align: center;

}

.table_in_text table{ 

   width:80%; 
   text-align: center;
   margin: 0 auto;

}

.list-elements{ 

   list-style: disc; 
   font-size: 1.2vw; 
   padding:1.5vw 1.5vw 1.5vw 3vw !important;
   line-height: 2vw;
   
   margin: 0 !important;

}


  1. return_to_top_column{


   width:12%;
   height: auto;
   
   display: block;

}

  1. return_to_top_button{
   display: none;
   position: fixed;
   right: 3vw;
   bottom: 20vh;
   background-image: url("T--SJTU-BioX-Shanghai--return_to_top_Ecoli1.png");
   background-size:100%;
   background-repeat: no-repeat;
   width:8vw;
   height: 10vw;
   line-height: 60px;
   text-align: center;
   cursor:pointer;
   z-index: 2;

}

  1. return_to_top_button::after{
   content:"";
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom: 0;
   z-index: -1;
   background-color: none;
   transform:rotate(45deg);
   transform-origin: 50% 50%;
   -moz-transform:rotate(45deg);
   -webkit-transform: rotate(45deg);

}


/********************************* zoom out box **************************/ .zoom_out_box{ 

   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   top:0;
   bottom:0;
   left:0;
   right: 0;
   margin: 0;
   border: 0;
   background-color: rgba(0,0,0,0.7);
   z-index: 999999999;

}

.zoom_out_album{ 

   background-color: rgba(255,255,255,1);
   padding:15px;
   border-radius: 10px;
   display: flex;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
       
   
   
   z-index: 999999999;
   
   max-width: 65%;
   
   cursor: zoom-out;

}

.zoom_out_album img{ 

   max-width: 65%;

}

.zoom_out_album p{ 

   padding: 10px;

}

/******************************* storage box ***************************/ .storage_box{ 

   width: 94%;
   height: auto;
   padding: 10px 3%;

}

.storage_box_list{ 

   width: 100%;
   
   list-style: none;
   margin: 0!important;
   padding: 0 !important;
   display: flex;
   display: -webkit-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}

.storage_box_ele{ 

   width: 100%;
   height: auto;

   margin: 10px 0;

}

.storage_header{ 

   width: 100%;
   height: 40px;
   padding: 0;
   
   background-color: #FDE3CA;

}

.storage_header>p{ 

   float: left;
   padding: 0;
   padding-left: 10px;
   margin: 0;
   height: 40px;
   
   
   line-height: 40px;

}

.storage_header>img{ 

   float: right;
   padding: 5px 10px;
   height: 30px;
   width: 30px;
   
   transition: transform 0.5s;
   -moz-transition: transform 0.5s; /* Firefox 4 */
   -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
   -o-transition: transform 0.5s; /* Opera */

}

.storage_text{ 

   display: none;
   width:90%;
   padding-left: 5%;
   padding-right: 5%;
   
   background-color: rgba(241,240,240, 1);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;

}

/************************ arrow link *******************/ .arrow_link{ 

   color: black;

}

.arrow_link::after{ 

   content: "\27a4";
   color: #004bd8;
   padding-left: 5px;

}

/*********************** image atlas **********************/ .image_atlas{ 

   width: 100%;
   height: auto;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   
   flex-direction: column;
   justify-content: center;
   align-content: center;

}

.atlas_filter{ 

   width: 100%;
   height: 30px;
   padding: 5px 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color:#FDE3CA; 
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

}

.one_filter{ 

   width: auto;
   height: 100%;
   padding: 0 1vw;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;

}

.one_filter p{ 

   padding: 0 1vw;

}

.one_filter select{ 

   height: 20px;
   min-width: 10vw;

}


.atlas_imgDisplay{ 

   width: 100%;
   height: auto;
   background-color: rgba(241,240,240, 1);
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

}

.atlas_imgDisplay img{ 

   padding: 5%;
   width: 90%;

}

/****************** badge boxes ************************/ .badge_boxes{ 

   width: 100%;
   height: auto;
   margin-top: 5vw;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

}

.badge_box{ 

   width: 25vw;
   height: auto;
   position: relative;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;   
   
   background-color: rgba(230,230,230,0.95);
   border-radius: 2vw;

}

.badge_box_txt{ 

   padding: 1vw;
   padding-top: 4vw;

}

.badge_box_txt h3{ 

   text-align: center;

}


.badge_box>img{ 

   width: 8vw;
   height: 8vw;
   border-radius: 4vw;
   
   position: absolute;
   top: -4vw;
   left: 8.5vw;

}


.check_icon{ width: 2vw !important; display:inline-block; }