Team:SSTi-SZGD/css/Safety

.Banner{ text-align: center; padding: 10% 0;} .Banner img{ margin: auto; float: none;} .Content{ font-size: 1.8rem;} .Content .title{ text-align: center; font-size: 3rem; font-weight: 600;} .Content .subtitle{ text-align: center; font-size: 2.5rem;} .Content section{ margin: 0 auto 100px auto; float: none;} .Content section .img{ text-align: center;} .Content section.Safety_Training .img img{ width: 100%; margin: 5px 0;} .Content section.GLS{ transition: none;} .Content section.GLS .content{ margin-top: 20px; padding: 0 100px;} .Content section.GLS .show{ width: 100%; overflow: hidden; height: 605px; position: relative; cursor: pointer;} .Content section.GLS ul{ padding: 0 15px; position: absolute;} .Content section.GLS ul li{ float: left;} .Content section.GLS ul li .img{ margin-bottom: 10px;} .Content section.GLS ul li .img img{ width: 60%; margin: 0;} .Content section.GLS .show span{ display: none; width: 60px; height: 60px; position: absolute; top: 0; bottom: 0; margin: auto;background-repeat: no-repeat; background-size: cover; background-position: center;} .Content section.GLS .show .prev{ left: 0; background-image: url(https://static.igem.org/mediawiki/2018/a/af/T--SSTi-SZGD--safety_btnLeft.png);} .Content section.GLS .show .next{ right: 0; background-image: url(https://static.igem.org/mediawiki/2018/1/15/T--SSTi-SZGD--safety_btnRight.png);}

@media only screen and (max-width: 767px) { .Content{ width: 100%; padding: 5%; font-size: 1.8rem;} .Content .title{ font-size: 2.4rem;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 100%;} .Content section.GLS .show span{ width: 40px; height: 40px;} }

@media (min-width: 467px) and (max-width: 567px) { .Content section.Safety_Training .img img{ width: 80%;} .Content section.GLS .content{ padding: 0 50px;} .Content section.GLS ul li .img img{ width: 75%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 45px; height: 45px;} }

@media (min-width: 567px) and (max-width: 767px) { .Content section.Safety_Training .img img{ width: 60%;} .Content section.GLS .content{ padding: 0 60px;} .Content section.GLS ul li .img img{ width: 60%;} .Content section.GLS .show{ height: 400px;} .Content section.GLS .show span{ width: 50px; height: 50px;}

}

@media only screen and (min-width: 768px) { .Content section.Safety_Training .img img{ width: 50%;} .Content section.GLS .show{ height: 400px;} }