.logo{
  width:200px;
  height:200px;
}


*, *:before, *:after {
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
}

*:focus {
  outline: none !important;
}

body{
  margin:0;
}

a {
  cursor: pointer;
}

.top{
  background-image: url(./top-2.jpg);
  background-size: cover;
  height:850px;
  
  
}

main {
  display: flex;
  align-items: center;
  align-content: center;
  
  
  
  
  color:white;
  font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

li{
  list-style: none;
}

nav {
  position: relative;
  opacity: 0;
  -webkit-animation: bounceInUp 1000ms linear 500ms forwards;
          animation: bounceInUp 1000ms linear 500ms forwards;
}
nav label, nav a {
  transition: all 150ms ease-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-content: center;
  height: 48px;
  width: 216px;
  padding: 0 12px;
  
  border: 2px solid white;
  border-radius: 2px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
}
nav a:hover, nav a:focus {
  border-color: white;
}
nav a:active {
  border-color:white;
}
nav label {
  position: relative;
}
nav label:before, nav label:after {
  transition: all 150ms ease-out;
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 12px;
  background: white;
  border-radius: 2px;
}
nav label:before {
  transform: rotate(-45deg);
}
nav label:after {
  transform: rotate(45deg);
}
nav label.down:before, nav label.down:after {
  transform-origin: center 11px;
  top: 50%;
  margin-top: -6px;
  right: 20px;
}
nav label.right:before, nav label.right:after {
  transform-origin: left center;
  top: 50%;
  right: 20px;
}
nav label.right:before {
  margin-top: -9px;
}
nav label.right:after {
  margin-top: -3px;
}
nav > label {
  transform: translateZ(1px);
  z-index: 1;
}
nav ul {
  will-change: visibility;
  transition: visibility 0ms ease-out 600ms;
  visibility: hidden;
  z-index: 1;
}
nav ul li {
  will-change: transform, opacity;
  padding: 4px 0;
  opacity: 0;
}
nav ul li:nth-child(1) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 500ms, opacity 100ms ease-out 500ms;
}
nav ul li:nth-child(2) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 400ms, opacity 100ms ease-out 400ms;
}
nav ul li:nth-child(3) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 300ms, opacity 100ms ease-out 300ms;
}
nav ul li:nth-child(4) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 200ms, opacity 100ms ease-out 200ms;
}
nav ul li:nth-child(5) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 100ms, opacity 100ms ease-out 100ms;
}
nav > ul {
  position: relative;
  padding-top: 4px;
}
nav > ul > li {
  transform: translateY(-100%);
}
nav > ul > li > label {
  transform: translateZ(0.5px);
}
nav > ul ul {
  position: absolute;
  top: 0;
  right: -224px;
}
nav > ul ul > li {
  transform: translateX(-100%);
}
nav input {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
  position: absolute;
  width: 216px;
  height: 48px;
  margin: 0;
}
nav input:hover ~ label, nav input:focus ~ label {
  border-color: white;
}
nav input:active ~ label {
  border-color: white;
}
nav input:checked ~ label {
  border-color: rgb(135, 132, 132);
}
nav input:checked ~ label.down:before, nav input:checked ~ label.down:after {
  margin-top: -16px;
}
nav input:checked ~ label.down:before {
  transform: rotate(-135deg);
}
nav input:checked ~ label.down:after {
  transform: rotate(135deg);
}
nav input:checked ~ label.right:before {
  transform: rotate(45deg);
  margin-top: -11px;
}
nav input:checked ~ label.right:after {
  transform: rotate(-45deg);
  margin-top: -2px;
}
nav input:checked ~ ul {
  visibility: visible;
  transition: visibility 0ms ease-out 0ms;
}
nav input:checked ~ ul > li {
  opacity: 1;
  transform: none;
}
nav input:checked ~ ul > li:nth-child(1) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 100ms, opacity 100ms ease-out 100ms;
}
nav input:checked ~ ul > li:nth-child(2) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 200ms, opacity 100ms ease-out 200ms;
}
nav input:checked ~ ul > li:nth-child(3) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 300ms, opacity 100ms ease-out 300ms;
}
nav input:checked ~ ul > li:nth-child(4) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 400ms, opacity 100ms ease-out 400ms;
}
nav input:checked ~ ul > li:nth-child(5) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 500ms, opacity 100ms ease-out 500ms;
}
nav > input {
  z-index: 2;
  top: 0;
  left: 0;
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li {
  opacity: 0;
  transform: translateX(-100%);
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li:nth-child(1) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 500ms, opacity 100ms ease-out 500ms;
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li:nth-child(2) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 400ms, opacity 100ms ease-out 400ms;
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li:nth-child(3) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 300ms, opacity 100ms ease-out 300ms;
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li:nth-child(4) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 200ms, opacity 100ms ease-out 200ms;
}
nav > input:not(:checked) ~ ul > li input:checked ~ ul li:nth-child(5) {
  transition: transform 150ms cubic-bezier(0, 0.5, 0.5, 1.1) 100ms, opacity 100ms ease-out 100ms;
}

/* https://goo.gl/1h4kf5 */
@-webkit-keyframes bounceInUp {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1);
    opacity: 0;
  }
  5.51% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 95.356, 0, 1);
  }
  11.01% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.691, 0, 1);
  }
  16.52% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.467, 0, 1);
  }
  21.92% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.994, 0, 1);
  }
  36.24% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.682, 0, 1);
    opacity: 1;
  }
  50.55% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.004, 0, 1);
  }
  79.08% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.059, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1;
  }
}
@keyframes bounceInUp {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 200, 0, 1);
    opacity: 0;
  }
  5.51% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 95.356, 0, 1);
  }
  11.01% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 23.691, 0, 1);
  }
  16.52% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.467, 0, 1);
  }
  21.92% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -16.994, 0, 1);
  }
  36.24% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.682, 0, 1);
    opacity: 1;
  }
  50.55% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.004, 0, 1);
  }
  79.08% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.059, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    opacity: 1;
  }
}

.menu{
  padding-left: 45px;
}

.top-title{
  text-align: left;
  font-size: 60px;
  font-weight: bold;
  margin:0px;
  color:rgb(93, 65, 65);
  padding-left:70px;
  margin-bottom: 30px;
  padding-top:50px;
}

.parent{
  display:flex;
  justify-content: center;
  padding-top: 100px;
  
}

.container{
  margin:0 auto;
  width:1200px;
}

.self-title{
  
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  
}

.btn:hover{
  background-color:rgba(236, 219, 219, 0.574);
}

.btn{
  text-decoration: none;
  color:white;
}

.sub-title{
  padding-left: 10px;
  font-style: italic;
}

/* self-introduction */

#self-introduction{
  background-color: rgb(236, 230, 218);
  padding-bottom:50px;
}

.self-title{
  margin: 0;
  padding:50px 0px;
}

.pro{
  width:300px;
  height:300px;
  border-radius: 50%;
}

.self-message{
  font-size: 25px;
  font-weight: bold;
  margin-top:0px;
  
}



.self-body{
  display:flex;
  justify-content: space-around;
}

.sub-message{
  line-height: 1.5;
}
/* ability */

.ability-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  margin:0px;
  padding:50px 0px;
}

.picture{
  height: 150px;
  width:150px;
}

.pictures{
  display:flex;
  justify-content: space-around;
  text-align: center;
}



#ability{
  margin-bottom: 50px;
}


/* services */
.services-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  padding:50px 0px;
  margin:0px;
  
  
}

#services{
  background-color: rgb(236, 230, 218);
  
}

.s-image{
   height:50px;
   width:50px;
   margin-right: 30px;
   padding-top: 10px;
   
}

.service-image{
  display:flex;
  justify-content: center;
  
}


.service-comment{
  font-size: 20px;
  
}

/* works */
.works-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  padding-top:50px;
  padding-bottom:20px ;
  margin:0px;
}

.null{
  width:300px;
  height:300px;
  display:block;
}

.work-image{
  display:flex;
  justify-content: space-around;
}

#works{
  padding-bottom:50px;
}
/* activity */
.activity-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  padding:50px 0px;
  margin:0px;
}

#activity{
  background-color: rgb(236, 230, 218);
  padding-bottom:50px;
}

.activity-image{
  display: flex;
  justify-content: space-around;
  text-align: center;
}



.a-image{
  width:150px;
  height:150px;
}


/* information */
.information-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  padding-top:50px;
  padding-bottom:20px ;
  margin:0px;
}

#information{
  padding-bottom:50px;
}

.pyqlink{
  font-size: 16px;
  text-decoration: none;
  color:brown;
}

.pharmacist{
  font-size: 16px;
  text-decoration:none;
  color:brown;
}

.pharmacist2{
  font-size:16px;
  text-decoration: none;
  color:brown;
}

.statistics{
  font-size:16px;
  text-decoration: none;
  color:brown;
}

h2.python{
  margin:0px;
}

/* blog */
.blog-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  padding:50px 0px;
  margin:0px;
}

#blog{
  background-color: rgb(236, 230, 218);
  padding-bottom:50px;
}


.btn-contact:hover{
  background-color:rgb(236, 230, 218);
}

form{
 
  padding:30px 50px;
}

form dl dt{
  width: 200px;
  padding:10px 0;
  float:left;
  clear:both;
}

form dl dd{
  padding:10px 0;
}

.name{
  width:800px;
}

.email{
  width:800px;
}


.tel{
  width:800px;
}

.message{
  width:800px;
  height:300px;
}



#contact{
  margin-bottom: 0px;
  background-color: #eaeaea;
}

footer{
  background-color: black;
  height:50px;
}

.btn-contact{
  display:block;
  margin:0 auto;
  width:100px;
  height:50px;
  background-color:rgb(159, 146, 171);
}

footer p{
  text-align: right;
  margin:0 auto;
  padding-top:15px;
  color:white;
  
}

.contact-title{
  font-weight: bold;
  color:rgb(93, 65, 65);
  font-size: 35px;
  margin:0px;
  padding:50px 0px;
}

@media (min-width:350px) and (max-width: 750px){
 .container{
   width:350px;
   margin:0 auto;
 }
 
  .self-body{
    display:block;
   
  }

  .pictures{
    display:block;

  }

  .picture{
    margin:0 auto;
  }

  .activity-image{
    display:block;
  }

  .work-image{
    display:block;
  }

  form{
 
    padding:30px 20px;
  }
  
  form dl dt{
    width: 200px;
    padding:10px 0;
    float:left;
    clear:both;
  }
  
  form dl dd{
    padding:10px 0;
  }
  
  .name{
    width:200px;
  }
  
  .email{
    width:200px;
  }
  
  
  .tel{
    width:200px;
  }
  
  .message{
    width:200px;
    height:300px;
  }

  .parent{
    display:flex;
    justify-content: left;
    padding:0px;
  }

  nav label, nav a {
    transition: all 150ms ease-out;
    cursor: pointer;
    display: flex;
    align-items: center;
    align-content: center;
    height: 48px;
    width: 150px;
    padding: 0 12px;
    
    border: 2px solid white;
    border-radius: 2px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -1px;
  }
 
  .menu{
    padding:0;
  }
  
  nav > ul ul {
    right: -160px;
  }

  .self-title{
    text-align: center;
  }

  .self-left{
    text-align: center;
  }

  .self-message{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }

  .sub-message{
    text-align: center;
    font-size: 10px;
  }
  .ability-title{
    text-align: center;
  }

  .services-title{
    text-align: center;
  }

  .works-title{
    text-align: center;
  }

  .activity-title{
    text-align: center;
  }

  .information-title{
    text-align: center;
  }

  .blog-title{
    text-align: center;
  }

  .contact-title{
    text-align: center;
  }

  .null{
    
    margin:20px auto;
  }
}

@media (min-width:751px) and (max-width:1150px){
  .container{
    width:700px;
    margin:0 auto;
  }

  .self-right{
    margin-left:20px;

  }

  .null{
    width:200px;
    height:200px;
  }

   form{
 
    padding:30px 20px;
  }
  
  form dl dt{
    width: 345px;
    padding:10px 0;
    float:left;
    clear:both;
  }
  
  form dl dd{
    padding:10px 0;
  }
  
  .name{
    width:60vw;
  }
  
  .email{
    width:60vw;
  }
  
  
  .tel{
    width:60vw;
  }
  
  .message{
    width:60vw;
    height:500px;
  }
}