@css {

}

/* colors of koh design */

background-color  white    :  #ffffff    rgba(255, 255, 255, 1)  hsla(360, 100%, 100%, 1)
top/bottom 		dark blue  :  #1c4087    rgba(28, 64, 135, 1)    hsla(220, 66%, 32%, 1)
blue logo			       	  #2548a7    rgba(37, 72, 167, 1)    hsla(224, 64%, 40%, 1)
border blue					#204a9c		 rgba ( 32,72,156 )
blue light  				#E9E6E1		 rgba(233, 230, 225, 1)  hsla(38, 15%, 90%, 1)
accent salmon 				#FFA07A		 rgba(	255	160	122 )    hsla (0.05	1.00 0.74)
#fb5954
#d95026		 rgba(217, 80, 38, 1)	hsla(14, 70%, 50%, 1)
medium gray        			#C0C0C0
lighter gray       			#8A8A8A      rgba(138, 138, 138, 1) hsla(0, 0%, 54%, 1)
lightest gray      			#OO6CDI
medium-dark salmon 		    #FF5733
darker gray					#808080		rgb	 (128,128,128)

/*limited reset*/

html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align:baseline;
  font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
  display: block;
}
html {
  background:#fff;
  line-height: 1;
  font-size: 10px;
  box-sizing: border-box;
}

body {
  font-family:Roboto, sans-serif;
  background-color: #f1f1f1;
  margin: 0;
  padding:0;

}

/*--------------------------------------------------------------------------------------------------------
                                                            best practices
--------------------------------------------------------------------------------------------------------*/

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  outline: 0;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

ul,
ol {
  font-size: 1.6rem;
  margin: 1rem 0 0;
}

figcaption {
  font-size: 1.8rem;
}

a {
  text-decoration: none;
}

p {
  font-size: 1.6rem;
  line-height: 1.6;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


a {
  color: #FFF;
}


img {
  display: block;
  border: 0;
  width: 100%;
  height: auto;
}

/*accessibility*/
#maincontent {
  display:none;
}


/* -------------------------------------------------------------------------------------------------------
                           
                                                      styling  header
--------------------------------------------------------------------------------------------------------*/

.header {
  width:100%;
  background-color: #1c4087;
  box-sizing: border-box;
  color:#fff;/*white*/
  padding:1rem;
  margin:0 0 1rem 0;
}


.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header li a {
  color:#fff;
  display: block;
  padding: 1.5rem 1.8rem;
  text-decoration: none;
}

.header li a:hover {
  background-color:#fff;
}

/*------------------------------------------------------------------------------------------------------

                                                 animated css menu items
----------------------------------------------------------------------------------------------------*/

a.animated:after {
  width: 0%;
  height: 1px;
  background: #1285be;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
a.animated:hover {
  color: #008FD8;
}
a.animated:hover:after {
  width: 100%;
}

.logo {
  display: block;
  font-family:Montserrat, sans-serif;
  font-weight: bolder;
  font-size: 4.5rem;
  padding: 3rem 2rem;
  text-decoration: none;
  text-shadow: 2px 2px 4px #000000;
}

.Design {
  color:#5383d3;/*dark blue*/
  font-family:"Open sans", sans-serif;
  text-shadow: 2px 2px 4px #000000;
}
/*---------------------------------------------------------------------------------------------

positioning menu and navigation bar
-------------------------------------------------------------------------------------- */




/*-----------------------------------------------------------------------------------------------
                                     styling footer images
-----------------------------------------------------------------------------------------------*/

.icon-styling > a > img,  .icon-styling > img {
  width: 1.8rem;
  height:1.8rem;
  margin: 0 .5rem;
}

.icon-styling > p > span {
  font-size:1.6rem;
}



/*-----------------------------------------------------------------------------------------------------
                                               section main
-------------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------------

                           style index page cover
----------------------------------------------------------------------------*/

.main-content {
max-width: 120rem;
padding: 1rem;
margin: auto;
padding: 1rem;

  }
.search-responsive {
  width:100%;
  padding: .5rem;
  margin: 1rem 0;
}

 figure .cover {
   max-width:75em;

}
.cover > img {
  width: 100%;
  height:auto;
}

.container-effortless {
  display:block;
  margin: 1rem 0 0 0;
}


.contains-details-koh {
  box-sizing: border-box;
  padding: .5rem;
}

/*styles the details section */
section.details-koh > p {
  font-size: 1.4rem;
  line-height: 2;

}

.details {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}



/*--------------------------------------------------------------------------------------------------

                styles slogan
----------------------------------------------------------------------------------------*/

.effortless {
  color: #073389;
  font-size: 2.2rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 3rem 0;
  text-align: center;

}

/*--------------------------------------------------------------------------------------------
horizontal line-----------------------------------------------------------*/
hr.lines {
  border:1px dotted #3B4963;
}

.constraint{
  width:90rem;
  margin:0 auto;

}

.footer-container {
  margin:auto;
  padding: .5rem;
}
/*-----------------------------
styling social media invitation
-----------------------------*/
p.invite {
  font-size: 1.8rem;
  font-weight:bold;
  text-transform:capitalize;
  word-spacing: .1rem;
  padding:1%;
}

  .social-flex > a > img {
    padding:1%;
  }




/*-----------------------------

flexbox
-----------------------------*/
.social-flex-invite {
  align-items: flex-start;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;

}
  .social-flex-invite {
    padding: 1rem 0;
    margin: auto;
  }

/*------------------------------------------------------------------------------------------------ 
                                   individual styling of icon items 
------------------------------------------------------------------------------------------------**/

/*states of links */
ul.menu > li a:hover{
  color:#101E61;
}

/*------------------------------------------------------------------------------------------------
                           SmartBoardrailbracket grid
------------------------------------------------------------------------------------------------**/



/*------------------------------------------------------------------------------------------------

                           SmartBoardrailbracket styling
------------------------------------------------------------------------------------------------**/

div.container-nonslide {
     display: block;
      margin-left: auto;
       margin-right: auto;
  max-width: 80;

}



.card-one-grid > p {
  font-weight: 600;
  padding:0 2% 2% 2%;
}


p.card-texts {
  font-weight:600;
  padding:0 2% 2% 2%;
  max-width: 32rem;
}

a.fragment {
  margin: 0 auto;

}
.smart-textsOne, .smart-textsTwo {
  background-color:#022465;/*darkest blue*/
  color:#fff;
  box-sizing: border-box;
  padding:2rem .5rem;
  margin-bottom: 1.5rem;
  color:#fff;
  width:none;
}

.smart-textsOne > ul,
.smart-textsTwo > ul {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
}

.smart-textsOne > ul> li,
.smart-textsTwo > ul> li
{
  font-weight:500;
  line-height:1.6;
  padding: 1rem;
}

.direction {
  padding:1rem 0;
  text-align: center;
}


a.fragment1, a.fragment2 {
  color: #304FFE;
  padding: 3rem;
}

/*---------------------------------------------------------------------------------------------------

                                           end of smartrail bracket page
 ------------------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------
                                    youtube page
-----------------------------------------------------------------------------------------------------*/

h1.youtube-header {
  padding: 2rem 0 1rem 0;
}

section.main-texts{
  padding:2rem 0;
  margin-bottom: 1rem;
}

.opener {
  padding:2rem 0;
  margin-bottom: 1rem;
}

.hdline-youtube h1 {
  font-weight:normal;
  text-align:center;
  line-height: 1.7;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}


h1.youtube-header {
  font-size:2rem;
  padding: 1rem 0;
  margin-top: 2rem;

}
h2.youtube-header {
  font-size:1.8rem;
  padding: 1rem 0;
  margin-top: 2rem;
  font-weight: normal;
}


ul.list-youtube {
  padding: 1rem 0;
}

.list-youtube > li {
  color:#042E81;
  font-size: 2rem;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  list-style-type: none;
  line-height: 1.6;

}

/*-----------------------------------------------------------------------------------------------
                                                       end youtube page
--------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------
                                                    pdf download page
-----------------------------------------------------------------------------------------------*/

.contains-pdfpage {
  padding: 1rem 0;

}

p.smart_pdfTexts {
  font-size: 1.8rem;
  padding: 1rem .5rem 0 .5rem;
}

.container-nonslide {
  padding: 1rem 0;
}

section.Links > h2 {
  font-size:1.8rem;
  text-align: center;
  text-transform: uppercase;
  padding: 3rem 0;
}
section.Links > p {
  font-size: 1.6rem;
  font-weight:500;
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------------------------------------------------
                                                                      styles image
--------------------------------------------------------------------------------------------------------*/

.koh-smartboard-image {
  min-width:28rem;
  height:auto;
  margin-right: 0;
  margin-left: .4em;
  padding:0;
}

section.contains-pdfpage > h1 {
  color: #262626;
  font-size: 1.8rem;
  text-align: center;
  padding-bottom: 1rem;
}

.texts-smartboard_pdf > h2, section.supplemental > h2 {
  font-size:2rem;
  font-weight: 500;
  text-align:center;
  text-transform:uppercase;
  line-height: 1.7;
  padding-top: 1rem;
}



section.supplemental > h2 {
  font-size:2rem;
  font-weight: 500;
  text-align: center;
  text-transform:uppercase;
  line-height: 1.7;
  padding-top: 2rem;
}

section.supplemental > p {
  font-size:1.8rem;
  max-width: 380px;
  margin-bottom: 2rem;
}

ul.texts-downPDF {
  padding: 1rem;
  margin-bottom: 2rem;
}

.smart_pdfTexts > p, .texts-downPDF >li > a {
  color:#262626;
  padding-top:2rem;
  padding-bottom: 3rem;
  max-width:36rem;
  line-height: 2;
}


.texts-smartboard_pdf {
  font-size:1.8rem;
  font-weight: 500;
  line-height: 1.7;
  padding-top: 2rem;
}



/*-----------------------------------------------------------------------------------------
             image sizes in the rows smartboard rail bracket
-----------------------------------------------------------------------------------------***/
.img-enlarge {
  max-width:30rem;
}

.img-enlarge3{
  max-height:33rem;
  max-width:20rem;
}


/*-----------------------------------------------------------------------------------------
                           style images of the pdf page
--------------------------------------------------------------------*/
.supplemental-grid {
  margin: 0 auto;
  border: .2rem solid #1c4087;/*site color*/
  box-sizing: border-box;
}



/*-----------------------------------------------------------------------------------------
                             styles extender image pdf page
--------------------------------------------------------------------------------------------*/

.supplement-card {
  padding: 1%;
  margin-bottom: 1rem;
}

.supplement-card > a > p {
  font-size:1.8rem;
  padding:2% 1% 1%;
  color:#000;

}

h2.supplement-hdr {
  font-size:2.4rem;
  padding:2% 1% 1%;
  text-align: center;
}


p.fragment {
  text-align:center;
  margin: 1rem 0;
}

ul.texts-downPDF > li > a:visited {
  color:#666; /*light grey*/
}

ul.texts-downPDF > li > a:hover {
  color:#0955EC; /*bright blue*/
}

ul.texts-downPDF > li > a:active {
  color: #052056; /*dark blue*/
}

.supplemental-grid a:focus,
.supplemental-grid a:hover {

}

.caption {
  padding: 1em;
  color:black;
}

.caption >p {
  margin-top: .5em;
  margin-bottom: 0;

}

figure.card {
  padding-top:1rem;
  max-width:35rem;
}

figure.card > img {
  max-height: 25rem;

}

/*--------------------------------------------------------------------------------------------------
                                    end of pdf  page download
--------------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------------
                    contact page
--------------------------------------------------------------------------------------------------------*/


.main-content-contact {
  grid-column:1 /span 4;
  grid-row:2;

}
.contactForm {
  margin-top: 3rem;
  margin-left: 0;
  margin-right: 1rem;
  position: relative;
}

/*style the contact details*/

#contact input[type="Name"],
#contact input[type="email"],
#contact input[type="Phone"],
#contact input[type="Address"],

#contact textarea [type="message"],
#contact button[type="submit"] {
  font: 400 1.2rem/1.6rem;
}

#contact {
  background-color: #F9F9F9;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
 margin: 2rem 1rem 1rem 2rem;
 padding: 2.5rem .5rem;
 max-width: 75rem;
}

form#contact > h2 {
  color:#1C4087;
  display: block;
  font-size: 3.2rem;
  font-weight: 300;
  margin-top: 1rem;
  margin-left: 3rem;
  margin-right: 0;
  margin-bottom: 1.2rem;
}

form#contact > p {
  display: block;
  font-size: 2rem;
  font-weight: 300;
  margin-top: 1rem;
  margin-left: 3rem;
  margin-right: 0;
  margin-bottom: 1rem;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin-top:1rem;
  margin-left:3rem;
  margin-right:0;
  margin-bottom:1rem;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

fieldset >h2 {
  font-weight: 400;
  margin-bottom: .3rem;
}

input[type=text],
input[type=phone], select, textarea {
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

#contact input[type="Name"],
#contact input[type="email"],
#contact input[type="Phone"],
#contact input[type="Address"],
#contact textarea {
  font-family: inherit;
  width: 90%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}


#contact input[type="Name"]:hover,
#contact input[type="email"]:hover,
#contact input[type="Phone"]:hover,
#contact input[type="Address"],
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 20rem;
  max-width: 100%;
  resize: none;
}

.contains-recaptcha {
  max-width: 350px;
  background: #ccc;
  padding:2rem 0 2rem 2rem;
}

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

#contact input[type="submit"] {
  cursor: pointer;
  width: 90%;
  border: none;
  background: #1C4087;
  color: #FFF;
  margin-top:1rem;
  margin-left:3rem;
  margin-right:0;
  margin-bottom:1rem;
  padding: 10px;
  font-size: 15px;
}

#contact button[type="submit"]:hover {
  background: #0F58EA;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}



/*-----------------------------------------------------------------

                  gallery 1 and 2-

--------------------------------------------------------------------*/

.card-set {
  padding: 1rem;
}

.galleryOne-grid, .galleryTwo-grid {
  padding:2rem 0 1rem 0;
}

li.card-set > a > figure.card-gallery > img {
  min-height:30rem;
}


.card-gallery > img {
  box-shadow: 0 0 6px rgba(132, 132, 132, .75);
  padding:1rem;
  outline: 1px solid #0F58EA;
}




li.card-set > a :focus,
li.card-set > a:hover {
  background-color: #CCDBF9;
}

.social-flex {
  align-items:flex-start;
  padding:1rem;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width: 23rem;
  min-height: 2vh;
}
/*-----------------------------------------------------------------
-----end of default styles--------------------------------*/
@media screen and (min-width: 700px) {

  @supports (display: flex) {
    .footer-flex {
      align-items: stretch;
      display:flex;
      flex-flow: column;
      justify-content: space-around;
      margin-top: 1rem;
      padding: 0 .5rem 1rem;
    }

    .icon-flex {
      align-items: flex-start;
      display:flex;
      flex: 0 0 auto;
      flex-flow: column;
      flex-wrap:nowrap;
      justify-content: flex-start;
      width: 50rem;
    }

    .social-flex {
      align-items:flex-start;
      padding:1rem;
      display:flex;
      flex-direction:row;
      justify-content: space-evenly;
      width: 33rem;
      min-height: 2vh;
    }


    .flex-supplement {
      align-items: flex-start;
      padding:1rem;
      display:flex;
      flex-direction:row;
      flex-flow:wrap;
      justify-content: space-evenly;
      flex-basis: 35rem 0 auto;
      background-color:#BBDEFB;

    }

    /*positioning with flex*/
    .icon-styling {
      display:flex;
      flex-direction: row;
      justify-content: space-evenly;
      height: 3.5rem;
      padding:1%;
    }

    .smartboard-flexbox {
      display:flex;
      flex-direction:row;
      justify-content: space-between;
      box-sizing: border-box;
    }
	}
}


/*--------------------------------------------------------------
Basic responsive layout for all browsers:
--------------------------------------------------------------*/

.site {
	max-width: 50em;
	margin: 0 auto;
}

/***********************************************/
@supports (display: flex) {
  .icon-styling > a {
    flex-basis: 1 1 auto;
  }

  .smartboard-flex {
    display:flex;
    flex-direction: row;
  }

  .flex-social-icons {
    padding: 1.5rem 0 1.5rem .5rem;
  }

  .footer-icons > a > img{
    padding: 0 .5rem;
}

@media screen and (min-width: 700px) {

	@supports (display: flex) {

    .footer-container {
      display:flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1rem;
    }

      .icon-flex {
        padding-bottom: 2rem;
      }
      
      .container-gallery {
        grid-column-start:2;
        grid-column-end:3;
        grid-row: 4;

      }

      /* children of menu-all-flex */
      .setOne {
        display:flex;
        flex-flow:row;
        align-items:flex-start;
        justify-content: flex-start;
        max-width: 48rem;
        margin: auto;
      }
      .setTwo {
        display:flex;
        flex-flow:row;
        align-items:flex-end;
        justify-content: flex-end;
        max-width: 48rem;
        margin: auto;
      }



    }
}


@media screen and (min-width: 20em) {

  .menu-all-flex {
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-all-flex {
    flex: 0 50%;
  }
  /* children of menu-all-flex */
  .setOne {
    display:flex;
    flex-flow:row;
    align-items:flex-start;
    justify-content: flex-start;
    max-width: 48rem;
    margin: auto;
  }
  .setTwo {
    display:flex;
    flex-flow:row;
    align-items:flex-end;
    justify-content: flex-end;
    max-width: 48rem;
    margin: auto;
  }

  .effortless {
    font-size: 1.8rem;
  }

 .cover > img {
   height:auto;
 }

 .icon-styling {
   display:flex;
   flex-direction:row;
   flex-wrap: nowrap;
   justify-content: flex-start;
   padding-bottom: 1%;
 }

 .icon-flex {
   padding-bottom: 1.5rem;
 }


}
/*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/

@supports (grid-area: auto) {

  @media screen and (min-width: 50em) {

    .site {
      display: grid;
      grid-template-columns: 15em auto 15em;
      justify-content: center;
      max-width: none;
    }

    /*------------------------------
    positioning of content
    --------------------------------*/
    .header {
      grid-column: 1/ span 3;

    }


    .main-content {
      grid-column: 1/ span 3;


    }

    .footer-container {
      grid-column:1 / span 3;
      grid-row-start:10;
    }


    /*******make the header a grid container*************/
    .menu-all-flex {
      display:flex;
      flex-direction:row;
      align-items: flex-start;
      justify-content: space-around;
    }

    /********** children of the menu all flex ************/
    .setOne {
      display:flex;
      flex-flow:row;
      align-items:flex-start;
      justify-content: flex-start;
      max-width: 48rem;
      margin: auto;
    }
    .setTwo {
      display:flex;
      flex-flow:row;
      align-items:flex-end;
      justify-content: flex-end;
      max-width: 48rem;
      margin: auto;
    }


    .container-flex {
      display:grid;
      align-items: center;
      flex-flow: row;
      justify-content: space-between;
    }

    /**********footer is a grid container *****************/
    .footer-container {
      display:flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 1rem;
    }

 /***---------------------------------------------------------------------------------------------------
                     SmartBoardrailbracket page placement of main contents
    ----------------------------------- ------------------------------------------------------------*/
   
    .main-content {
      padding: 1rem;
    }
    .contact-fields {
      margin: auto;
    }

     /***--------------------------------------------------------------------------------------------------                       
                                   position in grid
    ----------------------------------- ------------------------------------------------------------*/
    .smartboardrail-grid-One {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 2 / 3;

    }

    .smart-textsOne {
      grid-column: 1 /span 4;
      grid-row: 3;
    }


    


  /***---------------------------------------------------------------------------------------------------
                                               position in grid
    ----------------------------------- ------------------------------------------------------------*/

    .smartboardrail-grid-Three {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 8;
      justify-content: center;

    }



    /***---------------------------------------------------------------------------------------------------
                     smartboard bracket  grid style for all the main content images- texts
    ----------------------------------- ------------------------------------------------------------****/

     .sb-image-container{
      max-width:100rem;
      display:block;
      margin:auto;
      }

    .card-two-grid {
      display:grid;
      grid-template-rows: 31rem auto-fit;
      grid-row-gap: 1rem;
    }


    .smart-textsTwo {
      grid-column: 1 /span 4;
      grid-row: 7;
      justify-content: center;

    }

/*--------------------------------------------------------------------------------------------------------
                                grid pdf page
--------------------------------------------------------------------------------------------------------*/

     .supplemental-grid {
      display: grid;
      grid-template-columns:50rem 50rem;
      grid-template-rows: auto;
      grid-gap: 1rem;
      margin:auto;
    }




/*--------------------------------------------------------------------------------------------------------
                                card for the supplemental gird
--------------------------------------------------------------------------------------------------------*/
  
  .double-card {
   display: grid;
   grid-template-columns: auto-fill;
   grid-gap: 1rem;
   grid-template-rows: auto 3rem;
   margin: 0 auto;
}




  /*-----------------------------------------------------------------------------------------------

                                        positioning cards on the supplemental gird
    --------------------------------------------------------------------------------------------------**/
  
   .double-card {
     grid-column: 1 / 2;
     grid-row:1;
   }




   /*-----------------------------------------------------------------------------------------------

                                        youtube video
    --------------------------------------------------------------------------------------------------**/

      h1.youtube-header {
      grid-column: 2;
      grid-column-end:3;
      grid-row:2;
      margin:auto;

    }
    .main-texts {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 3;
    }

    .youtube-container {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 4;
    }

    .opener {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 5;

    }

    ul.list-youtube {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 6;
    }

    .directional {
      grid-column: 2;
      grid-column-end:3;
      grid-row: 7;

    }



    /*-----------------------------------------------------------------------------------------------

                                        Galleries one and two
    --------------------------------------------------------------------------------------------------**/


    .galleryOne-grid, .galleryTwo-grid {
      display:grid;
      grid-template-columns: repeat(2, minmax(30rem, 50rem));
      grid-gap:1rem;
      justify-content: space-around;
      margin-bottom: 1rem;

    }


    /**---------------------------------------------------------------------------------------------------- 
              
                                        Galleries-- grid placement 
-------------------------------------------------------------------------------------------------------**/
    .galleryOne-grid {
      grid-column:2;
      grid-row:2;
    }


    .galleryTwo-grid{
      grid-column:2;
      grid-row:4;

    }



    /* -------------------------------------------------------------------------------------------------
                                                 contact page
    -----------------------------------------------------------------------------------------------*/
          .contactForm {
           width:80rem;
           height:auto;
            margin-top: 3rem;
            margin-left: 0;
            margin-right: 1rem;
           position: relative;
}






    /*-------------------------------------------------------------------------------------------

                                       styles the texts & images
    --------------------------------------------------------------------------------------------***/

    section.maintexts > h1 {
      font-size:3rem;
      font-weight:500;
      text-align: center;
    }

  }
}

.icon-styling > p, .icon-styling > p > span {
  font-size:1.4rem;
}

/*-----------------------------------------------------------------------------------------------
                                     media queries
-----------------------------------------------------------------------------------------------*/
media screen and (max-width:90em) {

  .site {
    grid-template-columns: 15em auto 15em;
  }

  .menu-all-flex {
    display: flex;
    flex-direction: column;
    }

  /* children of menu-all-flex */
  .setOne {
    display: flex;
    flex-flow: row;
    }

  .setTwo {
    display: flex;
    flex-flow: row;

  }

  .header {
    grid-column: 1 / span 4;
    grid-row: 1 / ;

  }




}