/* scroll top */
 .scrollTop
 {
   position: fixed;
   bottom: 800px;
   right: 40px;
   width: 60px;
   height: 60px;
   background: #305c7e url(scrolltop.png);
   border-radius: 50%;
   background-size: 40px;
   background-position: center;
   z-index: 100000;
   
   cursor: pointer;
   background-repeat: no-repeat;
   visibility: hidden;
   opacity: 0;
   transition: 0.5s;
 
 
 
 }
 .scrollTop.active {
   bottom: 40px;
   visibility: visible;
   opacity: 1;
 }
 /* scroll top ended */
 
 
 /* schools started here */
 
 .scroll-effect::-webkit-scrollbar {
     width: 10px;
   }
   
   .scroll-effect::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
   }
   
   .scroll-effect::-webkit-scrollbar-thumb {
     background-color: lightgray;
     outline: 1px solid slategrey;
     border-radius: 4px;
   }
   :root {
   --main-white: #f0f0f0;
   --main-red: #be3144;
   --main-blue: #45567d;
   --main-gray: #303841;
   }
   * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         list-style-type: none;
         text-decoration: none;
      }
       html, body {
         font-family: poppins, sans-serif;
         line-height: 1.5;
         color: black;
         font-size: 10px;
         scroll-behavior: smooth;
         min-width: 320px;
         background: #dae0e8; 
         height: auto;   /* to set the height of the column to percentage */  
      }
   img {
     display: block;
     width: 100%;
   }
   a {
     color: var(--main-white); 
   }
   .containerx {
     background: #dae0e8;
     max-width: 1200px;
     height: auto;  /* auto to take the height of its content when in mobile mode, if 100% it will take the first page only as its parent (body and html) are 100% also */ 
     margin: 5% auto;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .col-structure {
     margin: auto 4%;
     height: 600px;   /* if we changed this to %, we MUST set all the parents to 100% not auto or we could break the chain of the parents by setting any of them to absolute value then go up by autor */
     flex: 0 1 30%;
   } 
   .col-style {
     box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.3);
     background: white;
   }
   .col-style:hover {
     box-shadow: 0 0 0;
     border: 3px lightgray solid;
   }
   .heloe 
   {
       justify-content: center;
       font-family: 'Times New Roman', Times, serif;
       font-size: 20px;
       letter-spacing: 0.2em;
       font-weight: bold;
       text-align: center;
       display: flex;
       margin-top: 15px;
   }
   .hela 
   {
       justify-content: center;
       text-align: center;
   }
 
   /* article content */
   .col-content-structure {
     height: 90%;
     width: 100%;
   }
   .col-content-style{
   }
   
   .col-content-1 {
     background: url('EastmanTheatreNight046_605cd613-5056-a36a-097442bd90520903.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1 h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1 .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   
   /* 2nd card start  */
   .col-content-1x {
     background: url('THE\ CHARLES\ FINNEY\ SCHOOL.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1x h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1x .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   /* 2nd card ended  */
   /* 3rd card start  */
   .col-content-1xx {
     background: url('IRONDEQUOIT\ HIGH\ SCHOOL.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1xx h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1xx .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   /* 3rd card ended  */
   /* 4th card start  */
   .col-content-1xxx {
     background: url('GENESEE\ COMMUNITY\ CHARTER\ SCHOOL.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1xxx h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1xxx .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   /* 4th card ended  */
   /* 5th card start  */
   .col-content-1xxxx {
     background: url('HOPE\ HALL\ SCHOOL.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1xxxx h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1xxxx .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   /* 5th card ended  */
   /* 6th card start  */
   .col-content-1xxxxx {
     background: url('ROCHESTER\ EARLY\ COLLEGE\ INTERNATIONAL\ HIGH\ SCHOOL.jpg') no-repeat center/cover;
     padding: 0 40% 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-transform: uppercase;
     color: white;
     
   }
 
 
  
   .col-content-1xxxxx h1 {
     margin-bottom: 30px;
     font-size: 3rem;
     font-weight: bold;
     background-color: #92999f93;
   }
   .col-content-1xxxxx .btn {
     width: 75px;
     height: 30px;
     border: none;
     border-radius: 2px;
     font-weight: bold;
     letter-spacing: 0.5px;
     text-transform: inherit;
     color: #305c7e;
     background-color: #dae0e8;
   }
   /* 6th card ended  */
 
   .col-content-2 {
     padding: 25px;
     color: black;
     letter-spacing: 1.2px;
     font-size: 1.5rem;
     font-weight: thin;
     overflow-y: scroll;
   }
   .col-content-2 p {
     margin-bottom: 30px;
   }
   
   .col-content-2 span {
     display: inline-block;
     float: left;
     margin-right: 20px;
     height: 50px;
     font-size: 6rem;
     color: black;
     position: relative;
     top: -12px;
   }
   /* Comments body */
     .comments-body {
       padding: 25px;
       height: 90%;
     }
     .comments-head {
       margin-bottom: 30px;
       font-size: 1.3rem;
       font-weight: bold;
       text-align: center;
       text-transform: uppercase;
       letter-spacing: 1.1px;
     }
     .comments-head i {
       float: right;
       position: relative;
       top: -17px;
     }
     .comments-container {
       display: grid;
       grid-template-columns: 1fr;
       height: 90%;   /* it is must to be set in order to make it scrool as it is a grid container */
       grid-row-gap: 35px;
       overflow-y: scroll;
     }
     .comments {
       display: grid;
       grid-template-columns: 1fr 4fr;
       grid-auto-rows: auto;
       grid-column-gap: 7px;
     }
     .profile-pic {
       width: 40px;
       height: 40px;
       border-radius: 50%;
     }
     .comments-details .name {
       font-weight: bold;
       margin-right: 30px;
       margin-bottom: 10px;
       float: left;
     }
     .comments-details .date {
       color: lightgray ;
       margin-bottom: 10px;
     }
     .comments-details .comment {
       font-size: 1.1rem;
       color: darkgray;
       line-height: 1.8;
     }
     /*  Media Query  */
   
     @media screen and  (max-width: 1000px) {
       .col-structure {
         margin: 30px 1%;
       }
     }
   
     @media screen and  (max-width: 800px) {
       .containerx {
         flex-direction: column;
         justify-content: center;
       }
       .col-structure {
         margin: 30px auto;
         flex: 0 0 600px;  /* The content of the columns are given a height in %, so we need to set a height explicitly not the flex basis, otherwise, these childs will break out in a strange behaviour */
         height: 600px;
         width: 60%;
       }
     }
     @media screen and (max-width: 500px) {
       .col-structure {
         margin: 15px auto; 
         width: 80%;
       }
     }
     
   /*  */
   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  /* footer section started  */
   .footer-distributed{
     background: #183e5c;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
     box-sizing: border-box;
     width: 100%;
     text-align: left;
     font: bold 16px sans-serif;
     padding: 55px 50px;
     
   }
   
   .footer-distributed .footer-left,
   .footer-distributed .footer-center,
   .footer-distributed .footer-right{
     display: inline-block;
     vertical-align: top;
   }
   
   /* Footer left */
   
   .footer-distributed .footer-left{
     width: 40%;
   }
   
   /* The company logo */
   
   .footer-distributed h3{
     color:  #ffffff;
     font: normal 36px 'Open Sans', cursive;
     margin: 0;
   }
   
   .footer-distributed h3 span{
     color:  lightseagreen;
   }
   
   /* Footer links */
   
   .footer-distributed .footer-links{
     color:  #ffffff;
     margin: 20px 0 12px;
     padding: 0;
   }
   
   .footer-distributed .footer-links a{
     display:inline-block;
     line-height: 1.8;
     font-weight:400;
     text-decoration: none;
     color:  inherit;
   }
   
   .footer-distributed .footer-company-name{
     color:  wheat;
     font-size: 14px;
     font-weight: normal;
     margin: 0;
   }
   
   /* Footer Center */
   
   .footer-distributed .footer-center{
     width: 35%;
   }
   
   .footer-distributed .footer-center i{
     background-color:  #305c7e;
     color: #ffffff;
     font-size: 25px;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     text-align: center;
     line-height: 42px;
     margin: 10px 15px;
     vertical-align: middle;
   }
   
   .footer-distributed .footer-center i.fa-envelope{
     font-size: 17px;
     line-height: 38px;
   }
   
   .footer-distributed .footer-center p{
     display: inline-block;
     color: #ffffff;
     font-weight:400;
     vertical-align: middle;
     margin:0;
   }
   
   .footer-distributed .footer-center p span{
     display:block;
     font-weight: normal;
     font-size:14px;
     line-height:2;
   }
   
   .footer-distributed .footer-center p a{
     color:  wheat;
     text-decoration: none;;
   }
   
   .footer-distributed .footer-links a:before {
     content: "|";
     font-weight:300;
     font-size: 20px;
     left: 0;
     color: #fff;
     display: inline-block;
     padding-right: 5px;
   }
   
   .footer-distributed .footer-links .link-1:before {
     content: none;
   }
   
   /* Footer Right */
   
   .footer-distributed .footer-right{
     width: 20%;
   }
   
   .footer-distributed .footer-company-about{
     line-height: 20px;
     color:  #92999f;
     font-size: 13px;
     font-weight: normal;
     margin: 0;
   }
   
   .footer-distributed .footer-company-about span{
     display: block;
     color:  #ffffff;
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 20px;
   }
   
   .footer-distributed .footer-icons{
     margin-top: 25px;
   }
   
   .footer-distributed .footer-icons a{
     display: inline-block;
     width: 35px;
     height: 35px;
     cursor: pointer;
     
     border-radius: 2px;
   
     font-size: 20px;
     color: #ffffff;
     text-align: center;
     line-height: 35px;
   
     margin-right: 3px;
     margin-bottom: 5px;
   }
   
   /* If you don't want the footer to be responsive, remove these media queries */
   
   @media (max-width: 880px) {
   
     .footer-distributed{
       font: bold 14px sans-serif;
     }
   
     .footer-distributed .footer-left,
     .footer-distributed .footer-center,
     .footer-distributed .footer-right{
       display: block;
       width: 100%;
       margin-bottom: 40px;
       text-align: center;
     }
   
     .footer-distributed .footer-center i{
       margin-left: 0;
     }
   
   }
   
   /* footer section ended  */




    /* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
  height: 80%;
  width: 80%;
  margin-left: 150px;
  
}
@media (max-width: 958px) {
 
  #map{
    margin-left: 90px;
  }
}
@media (max-width: 651px) {
 
  #map{
    margin-left: 40px;
  }
}

#pac-input {
margin-left: 20px !important;
width: 400px !important;
height: 20px !important;
margin-top: 20px;

}
@media (max-width: 697px) {
 
  #pac-input{
    margin-left: -90px !important;
    margin-top: 53px !important;
  }
} 
@media (max-width: 641px) {
 
  #pac-input{
    margin-left: -120px !important;
  }
} 
@media (max-width: 605px) {
 
  #pac-input{
    margin-left: -170px !important;
  }
} 
@media (max-width: 541px) {
 
  #pac-input{
    margin-left: -184px !important;
  }
}