:root {
      --accent: #226997;
      --main: #333;
      --text: #222222;
      --light: #666;
      --lighter: #f3f3f3;
      --border: #e6e6e6;
      --bg: #ffffff;
      --hover: #c64121;
      --links: #333;
      --blockbg:#f4fbff;
    }
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --text: #F2F3F4;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
    --hover: #e5969a;
    --links:#78eee5;
    --blockbg:#54bceb;
  }
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  size: 14px;
  line-height: 1.6em;
  color: #fff;
}

a {
  color: #860038;
}

a:hover {
  color:var(--hover);
}

p {
  margin-bottom: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5em;
  margin-bottom: 15px;
  color: var(--main);
  font-weight: bold;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 26px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}


/*============== 3. General ===================*/

.wrapper {
  width: 960px;
  margin: 0 auto;
  /* padding: .5rem;*/
}

.clear {
  clear: both;
}



/*============== 4. Header ===================*/

.top-nav {

  height: 35px;
  padding: 10px 0 50px 0;
  background: var(--bg);
  opacity: 0.9;
  z-index: 1000;
  top: 0;
  display: block;
  color: var(--bg);
  position: fixed;
}

.top-nav {
  color: var(--bg);

}

.top-nav h1 {
  font-size: 26px;
  font-weight: 400;
  padding: 0 

}

.top-nav2 {
  position: fixed;
  width: 100%;
  height: 4px;
  background-color: var(--bg);
  z-index: 200;
  top: 0px;
  display: block;
}

/* logo */

.logo {
  float: left;
   width: 100%;
   height:auto; 
   max-width: 250px;
}

.name {
 float: right;
width: 50%;
height: auto;
max-width: 350px;
text-align: right;

}

.name p {
  color: #545454;
  font-size: 18px;
  line-height: 32px;
  padding-left: 30px;
}

.image {
	  width: 100%;
	  max-width: 960px;
  height: auto;
  border-radius: .55rem;
  
}

#googleSearch {
text-align: center;
margin: -1.5em 0 0 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom-color: #860038;
float: right;


}

.button {
	background-color: #860038;
	border: #860038;
	height: 1.5em;
	color: #fff;
}

#q {
	border: #860038;
	border-style: inset;
	border-width: .1em;	
	border-top: none;
border-left: none;
border-right: none;
}

#sa {
	background-color: #860038;
	color: #fff;
	background-image:url(../img/icons/search.png);
	border-color: #860038;
		border-width: .15em;	
		 border-radius: .2rem;

    background-size: cover;
    height: 20px;

    width: 20px;
}



#alert {
	/* text-align: center;*/
      background-color: #ffa6af;
	  color: #860038;
	 font-size:15px;
	/* font-weight: 700; */
	 margin: .5em 0 0 0; 
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 5.5vh;
  padding: 5px
}

#alert2 {
	/* text-align: center;
*/      background-color: var(--main);
	 	color: var(--lighter);
	 font-size:15px;
	/* font-weight: 700; */
	 margin: .5em 0 0 0; 
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 5.5vh;
  margin-bottom: 10px;
  padding-top: 20px
}

#alert a {
color: var(--accent);
font-weight: bold;

}
#video1 {
	width: 450px; 
	float:left; 
	min-height:7em; 
	margin:10px;
	
	
}

#video2 {
	width: 450px; 
	float:left; 
	min-height:7em; 
	margin-top: -4.8em;
	
	
}




h2.video {

	font-size: 1.2em;
	color: var(--accent);

}

h2.video1 {

	font-size: 1.2em;
	color: var(--accent);
	padding-top: 2em;

}

ul.video, li.video {
    list-style: circle ;
    margin-top: .5em;
    color: var(--text);

}

.video a {
 	font-size: 14px;
	font-weight: 400;
    color: var(--links);

}


/* serach */




/*============== 5. Intro section ===================*/

/* parallax */

section#intro {
 /* background: #000 url(../img/bg/bg1.jpg) 50% 0 no-repeat;*/
  color: #fff;
  max-height: 650px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 1024px) {
  section#intro {
    background-attachment: fixed;
  }
}

/* featured */

.featured {
  background: none;
  padding: 0;
  padding-bottom: 30px;
  margin-top: 80px;
  text-align: center;
  color: #f0f0f0;
}

.headline h1 {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 30px;
}

.inner {
  text-align: center;
  padding: 100px 0 0 0;
  position: relative;
  z-index: 999;
}

.inner p {
  text-align: center;
}

.block {
    width: 100vw;
    margin-left: calc(50% - 50vw);
	background-color: var(--blockbg);
	padding: 20px 0 10px 0 ;
	color: #678c99;
	-webkit-box-shadow: 0 -5px 5px -5px  #ccc;
	        box-shadow: 0 -5px 5px -5px  #ccc;
}





/*============== 9. Footer ===================*/


footer h2 {
	color: var(--light);
font-weight: 600;
font-size: 1.1rem;
padding: 4em 0 0 0;
}

footer a {
	font-size: 14px;
	font-weight: 400;
    color: var(--links);
}

.foot_main  {
	margin:  -3em 0 0 0;
	
}

.foot_link {
	padding: 0 .5em 0 0;
	float: left;
}

#links {
	height: 4em;
}

#footer
{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;  
   -webkit-box-orient: horizontal;  
   -webkit-box-direction: normal;  
       -ms-flex-direction: row;  
           flex-direction: row;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start; 

}

.footer
{

   padding: 0 25px 0 0;
}
.fimage {
	
}








/*============== 9. Custom queries ===================*/

@media(min-width: 768px) and (max-width: 979px) {
  .wrapper {
    width: 735px;
    margin: 0 auto;
  }
  .da-thumbs li article h5 {
    color: #fff;
    padding-top: 10px;
  }
  h1.title {
    font-size: 35px;
  }
}

@media(min-width: 480px) and (max-width: 767px) {
  .wrapper {
    width: 480px;
    margin: 0 auto;
  }
   .top-nav h1 {
    color: #383838;
	float:right;
	font-weight: 400;
   }
     .top-nav h1 {
    font-size: 18px;
	font-weight: 400;
	color: #383838;
	z-index: -100;
	margin-top: -2em;
	 }
	 
	 .logo {
 /* float: left;*/
   width: 30%;
   height:auto; 
   min-width: 200px;}

   .name {
	   position:absolute;
	   top: 100px;
   }

}

@media(max-width:480px) {
  .main-content {
    height: 350px;
  }
  
  .inner {
	 	display: none;
}

.logo {
 /* float: left;*/
   width: 30%;
   height:auto; 
   min-width: 150px; 
      text-align: center;
   /* border-bottom: 1px solid #777;*/
    padding-bottom: 10px;
}

  
  .top-nav h1 {
    font-size: 16px;
	font-weight: 500;
	color: #383838;
	float: left;
	padding: 0px 100px 0 0;

   }
   
   #alert {
	   margin: 6em 0 -4em 0;
	   min-height: 5em;
  
   }
   
   .column__title--wrapper h2  {
	    font-size: 14px;
	font-weight: 500;
   }
   
   #googleSearch {
 display: none;

}


   footer {
 display: none;

}


.column__list {
	margin-top: 100px;
}
   

  .wrapper {
    width: 300px;
    margin: 0 auto;
  }
  .top-nav {
    position: fixed;
	color: #fff;
    width: 100%;
   padding: 10px 0;
  
    opacity: 0.9;
    z-index: 1000;
    top: 0;
    display: block;
  }
  
.column__title--wrapper h2 {
    font-size: 16px;
  }

  .name {
   
    width: 100%;
    margin: 0 auto;
    /*margin-top: 10px;
    margin-left: 50px;*/
  }

}