@charset "utf-8";
/* CSS Document */
body {
    background-image: url("../media/patriotic background.webp");
    background-size: cover;
    background-attachment: fixed;
    margin: 0 auto;
    font-family: arial;    
    scroll-behavior: smooth;
   }
html {
    scroll-behavior: smooth;
}
#header {
    background-image: url("../media/smart-1_background_original.webp");
    margin: 0 auto;
    height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center top;
    position: relative;    
}
#smart-1_logo {
    width: 550px;
    padding-top: 5px;
    margin: 0 auto;
}
#nav_menu    { 
    width: 100%;
    text-align: center;
    background-color: white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 50; 
    border: 1px solid hsla(0,0%,24%,1.00);
}
#nav_menu li.current a{
	color:#BF0A30;
}
#nav_menu li.current a:hover  {
    color: white;
    background-color: #BF0A30;
}
#nav_menu li{
    display: inline-block;
	width:100px;
    height: 30px;
    line-height: 30px;
    margin: 3px auto;
}
#nav_menu a{
    display:block;
	text-decoration:none;
	color:black;
    height: 100%;
}
#nav_menu a:hover {
	background-color:#009;
	color:#fff;    
    border-radius: 15px;
}
ol,ul {
	list-style: none;
    margin: 0px;
    padding: 0px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .content {
  padding-top: 5px;
}
#main	{
	width: 100%;
	margin: 40px auto;
	box-shadow: 5px 5px 20px 3px;
	background-color: hsla(0,0%,100%,0.75);
    text-align: center;
    border-radius: 15px;
    overflow: hidden;
    }
#main h2 {    
    text-shadow: 3px 3px 8px hsla(0,0%,18%,0.80);
    margin: 0 auto;
    width: 500px;
    height: 50px;
    line-height: 50px;
    background-color: #002868;
    border-radius: 25px;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84);
}
#testimonials	{
    width: 100%;
    text-align: center;
    color: white;
    margin: 0 auto 15px;
}
#intro p {
    text-align: justify;
    text-indent: 15px;
}
#intro    {
    width: 70%;
    margin: 20px auto;
    text-align: left;
    background-color: white;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 15px;
	box-shadow: 5px 5px 20px 3px black;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#intro h1 {
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    border-radius: 5px;    
    text-shadow: 3px 3px 8px hsla(0,0%,18%,0.80);
}
#intro_list li{
    text-align: left;
    display: list-item;
    list-style-type: square;
    list-style-position: inside;
    margin: 2%;
}
.review    {
    display: inline-flex;
    flex-direction: column;
    width: 24%;
    border-radius: 15px;
    padding: 5px 25px;
    color: white;
    min-width: 350px;
    margin: 5px 3px;
	box-shadow: 5px 5px 20px 3px black;
    background-color: #BF0A30;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.review_content  {
    width: 100%;
    display: block;
    text-align: justify;
    text-indent: 30px;
    font-style: italic; 
}
.program  {
    width: 100%;
    display: block;
    text-align: center;
}
.aircraft_info_header h4   {
    width: 100%;
    margin: 10px auto;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
}
#aircraft_info h2 {
    color: white;
}
#aircraft_info    {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    color: hsla(0,0%,0%,1.00); 
    border-radius: 15px;
}
#aircraft_intro p {    
    text-align: justify;
    text-indent: 25px;
}
#aircraft_intro    {  
    align-items: center;
    width: 80%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
    padding: 3px 50px 30px;  
    line-height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#intro_picture_box    {    
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}
.intro_picture    {
    display: inline-flex;
    flex-direction: column; 
    align-items: center;
    width: 30%;
    min-width: 200px;
    margin: 0 auto 30px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px; 
    overflow: hidden;
}
#features    {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    width: 80%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
}
#features_header    {
    width: 100%;
    margin-bottom: 15px;
}
#features_list    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    line-height: 30px;
    margin: 0 auto 50px;
    text-align: center;
}
#features_picture    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    height: 100%;
    margin: 0 auto 30px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px; 
    overflow: hidden;
}
#performance    {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    width: 80%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
}
#performance_header    {
    width: 100%;
    margin-bottom: 15px;
}
#performance_list    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    line-height: 30px;
    margin: 0 auto 50px;
}
#performance_picture    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    height: 100%;
    margin: 0 auto 30px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px;  
    overflow: hidden;
}

#specification    {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap; 
    align-items: center;
    width: 80%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
}
#specification_header    {
    width: 100%;
    margin-bottom: 15px;
}
#specification_list    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    line-height: 30px;
    margin: 0 auto 50px;
    text-align: center;
}
#specification_picture    {
    display: inline-flex;
    flex-direction: column;
    width: 40%;
    min-width: 250px;
    height: 100%;
    margin: 0 auto 30px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px; 
    overflow: hidden; 
}
#aircraft_3d_instructions    {
    display: block;
    width: 50%;
    margin: 20px auto 0;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white; 
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#aircraft_3d    {
    width: 100%;
    margin: 30px auto 10px;
    position: relative;
    color: white;
    padding-bottom: 48%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}
#aircraft_3d iframe{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -0%);
    border-radius: 25px;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84);
}
#news_viewer h2{
    width: 350px;
    margin: 0 auto;
    color: white;
}
#news_list    {
    width: 60%;
    margin: 40px auto 0;
    color: white;
    text-align: left;
    line-height: 25px;
    background-color: hsla(347,91%,39%,1.00);
    padding: 20px 0 10px 20px;
    border-radius: 5px;
	box-shadow: 5px 5px 20px 3px black;
}
#news_list a {
    color: white;
    list-style: none;
}
#news_viewer img {
    width: 100%;
    margin: 0 auto;    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
     }
.news_header    {    
    background-color: #303030;
    color: white;
    height: 30px;
    line-height: 30px;
    width: 100%;
    border-top-right-radius: 15px; 
    border-top-left-radius: 15px;
    padding: 0 15px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.news_header h4 {     
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.news_header a {    
    text-decoration: none;
    color: white;
}
.news_date    {
    height: 15px;
    line-height: 15px;
    background-color: #303030;
    overflow: hidden;
    font-size: 0.8rem;
    color: white;
}
.news_date a {
    text-decoration: none;
    color: white;
}
.news_image    {
    height: 125px;
    position: relative;
    overflow: hidden;
}
.news_description {
    width: 100%;
    height: 85px;
    background-color: #303030;
    color: white;
    border-bottom-right-radius: 15px; 
    border-bottom-left-radius: 15px;
    font-size: 0.85rem; 
    line-height: 14px;
    margin: 0 auto 35px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
    text-indent: 15px;
}
.news_description p {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 20px;
}
#smart1_articles    {  
    align-items: center;
    width: 80%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
    padding: 3px 50px 30px;  
    line-height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#smart1_articles p {
    text-align: justify;
    text-indent: 30px;
}
#smart1_articles h1 {
    line-height: 30px;
}
#news h2 {
    color: white;
}
.article_date    {
    height: 10px;
    line-height: 10px;
    font-size: 0.8rem;
    width: 20%;
    margin: 0 auto;
    text-align: center;
}
#news_picture_box    {    
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}
.news_picture    {
    display: inline-flex;
    flex-direction: column; 
    align-items: center;
    width: 50%;
    min-width: 200px;
    margin: 0 auto 30px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px; 
    overflow: hidden;
}
.col1 {
  flex: 32%;
  max-width: 45%;
  margin: 0 auto;
  line-height: 0;
  min-width: 250px;
}
.row > .col1 {
  padding: 0;
    margin: 0 5px;
}

.col1 {
  float: left;
}
#briefing_login    {
    height: 100%;
    max-width: 550px;
    width: 95%;    
    margin: 0 auto;
    position: relative;
    color: white;
}
#briefing_access    {
    background-color: white;
    color: black;
    width: 90%;
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    border-radius: 15px;
	box-shadow: 5px 5px 20px 3px black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#briefing_access p {
    text-align: justify;
    text-indent: 20px;
}
#briefing    {
    display: inline-block;
    width: 80%;
    position: relative;
    color: white;
    padding-bottom: 47%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}
#briefing iframe{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
}
#briefing_header    {
    display: inline-block;
    width: 80%;
    margin: 0 auto;
    position: relative;
    color: white;
}
#briefing_intro    {
    align-items: center;
    width: 70%;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;    
    border: 1px solid hsla(0,0%,24%,1.00);
    background-color: white;
    padding: 3px 50px 30px;  
    line-height: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#briefing_intro p {
    text-align: justify;
    text-indent: 30px;
}
.login_form    {
    width: 95%;
    max-width: 650px;
    margin: 10px auto 30px;
    background-color: #BF0A30;
    border-radius: 15px;
}
.login_form h2    {
    padding-top: 0;
    text-shadow: 0 0 0 hsla(0,0%,18%,0.80);
    text-decoration: none;
}
.login_form p    {
    font-size: 20px;
    margin: 15px 0;
    }
.login_form input {
    font-size: 16px;
    width: 85%;
    padding: 15px 10px;
    border: 0;
    outline: none;
    border-radius: 5px;
}
.login_form button {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
    padding: 15px 10px;
    width: 100px;
    border-radius: 5px;
    border: 0;
}.login_form button:hover {
    box-shadow: 5px 5px 20px 3px black;
}
.login_form button:active {
  background: white;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
   outline: none;
}
#add_users    h2 {
    color: white;
    width: 400px;
}
#add_users    h3 {
    color: white;
    background-color: black;
    border-radius: 25px;
    width: 350px;
    margin: 35px auto;
    padding: 10px 0;
}
#add_users    {
    display: inline-block;
    width: 50%;
    margin: 20px auto;
    height: 100%;
}
.add-users    {
    width: 55%;
    margin: 40px auto 0;
}
.add-users p    {
    font-size: 20px;
    margin: 15px 0;
    }
.add-users input {
    font-size: 16px;
    width: 100%;
    padding: 15px 10px;
    border: 1px solid;
    outline: none;
    border-radius: 5px;
}
.add-users button {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
    padding: 15px 10px;
    width: 50%;
    border-radius: 5px;
    border: 0;
    background-color: #BF0A30;
    color: white;
}
.add-users button:hover {
    box-shadow: 5px 5px 20px 3px black;
}
.add-users button:active {
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
   outline: none;
}
#contact_us    {
    height: 100%;
    width: 95%;    
    margin: 0 auto;
    color: white;
    overflow: hidden;
}
#contact_description    {
    width: 35%;
    min-width: 450px;
    margin: 0 auto;
    background-color: white;
    border-radius: 15px;
    padding: 10px 15px;
	box-shadow: 5px 5px 20px 3px black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#contact_description p {
    text-align: justify;
    text-indent: 20px;
}
.contact_form    {
    width: 95%;
    max-width: 550px;
    background-color: #BF0A30;
    border-radius: 15px;
    margin: 10px auto;
    padding-top: 5px;
}
.contact_form h2    {
    padding-top: 0;
    text-shadow: 0 0 0 hsla(0,0%,18%,0.80);
    text-decoration: none;
}
.contact_form p    {
    font-size: 20px;
    margin: 15px 0;
    }
.contact_form input {
    font-size: 16px;
    width: 85%;
    padding: 15px 10px;
    border: 0;
    outline: none;
    border-radius: 5px;
    margin: 15px auto;
}
.contact_form textarea {
    resize: none;
    outline: none;    
    border-radius: 5px;
    font-size: 16px;
    border: none;
    font-family: Arial, "Arial Black";
    margin: 15px auto;
}
.contact_form button {
    font-size: 18px;
    font-weight: bold;
    margin: 20px auto;
    padding: 15px 5px;
    width: 100px;
    border-radius: 5px;
    border: 0;
}
.contact_form button:hover {
    box-shadow: 5px 5px 20px 3px black;
}
.contact_form button:active {
  background: white;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
   outline: none;
}
#footer {
    width: 100%;
	box-shadow: 5px 5px 20px 3px black;
    text-align: center;
	background-color: hsla(0,0%,100%,0.75);
    overflow: hidden;
}
#footer_content    {
    margin-bottom: 20px;
}
#fb_footer    {
    width: 340px;
    display: inline-block;
    margin: 10px auto;
}
#footer_left    {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin: 15px 10px;
    min-width: 310px;
}
#footer_left p    {
    line-height: 10px;
}
#footer_right    {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    min-width: 310px;
    margin: 0px 10px;
}
#footer_right a:link   {
    text-decoration: none;
    color: black;
}
#footer_right p    {
    line-height: 10px;
}
#picture_viewer    {
    color: white;
    overflow: hidden;
    padding-bottom: 25px;
}
#video_viewer    {
    color: white;
    overflow: hidden;
    margin: 0 auto 10px;
    min-width: 300px;
}
#video_viewer video {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
}
.video_header    {
    background-color: #303030;
    color: white;
    height: 35px;
    width: 100%;
    line-height: 35px;
    border-top-right-radius: 15px; 
    border-top-left-radius: 15px;
    padding: 0 5px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.video_description {
    width: 100%;
    background-color: #303030;
    color: white;
    border-bottom-right-radius: 15px; 
    border-bottom-left-radius: 15px;
    font-size: 0.85rem; 
    line-height: 14px;
    margin: 0 auto 35px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.video_description p {
    padding: 0 10px;
}
.row > .col1 {
  padding: 0;
    margin: 0 5px;
}

.clear_bottom {
    height: 20px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.col {
  flex: 28%;
  max-width: 45%;
  margin: 0 auto;
  line-height: 0;
}

.col img {
    vertical-align: middle;
    width: 100%;
    margin-top: 10px;
    border: 1px solid hsla(0,0%,24%,1.00); 
    border-radius: 15px;
    overflow: hidden;    
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

/* You define the style of our previews here, you are using flex to display the images 
   "responsively". */

.preview {
  width: 85%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
}

.row > .col {
  padding: 0;
    margin: 0 5px;
}

.col {
  float: left;
  width: 25%;
}

/* Now you want to define what the lightbox will look like. Note that you have the display
   as none. You don't want it to show until the user clicks on one of the previews. 
   You will change this display property with JavaScript below. */
   
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding: 10px 62px 0px 62px;
  width: 80%;
  height: 98%;
  overflow: auto;
  background-color: black;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 0 0 0 0;
  width: 90%;
  max-width: 1200px;
}

/* Same with your slides, you set the display to none, because you want to choose which 
   one is shown at a time. */

.slide {
  display: none;
}

.image-slide {
  width: 80%;
}

.modal-preview {
  width: 85%;
}

.dots {
  display: flex;
  flex-direction: row;
    width: 85%;
    margin: 0 auto;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;   
}
.dots img {
    width: 90px;    
}

/* You want the previews a little transparent to show that they are "inactive". 
   You then add an .active or :hover class to animate the selections for your user when
   they interact with your controls and clickable content.
 */

img.preview, img.modal-preview {
  opacity: 0.5;
    border-radius: 0px;
}

img.active,
.preview:hover,
.modal-preview:hover {
  opacity: 1;    
    scroll-snap-align: center;
}

img.hover-shadow {
  transition: 0.1s;
}

.hover-shadow:hover {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
} 

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.previous,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.previous:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
#picture_link    {
    background-color: #BF0A30;
    margin: 0 15px 40px auto;
    border-radius: 15px;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
	box-shadow: 5px 5px 20px 3px black;
}
#picture_link a {
    text-decoration: none;
    color: white;    
}
#picture_link:active {
    background: #BF0A30;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
}
#video_link    {
    background-color: #FFFFFF;
    margin: 0 auto 40px 15px;
    border-radius: 15px;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
	box-shadow: 5px 5px 20px 3px black;
}
#video_link a {
    text-decoration: none;
    color: black;    
}
#video_link:active {
    background: #ffffff;
    color: white;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
}
#video_link2    {
    background-color: #BF0A30;
    margin: 0 auto 40px 15px;
    border-radius: 15px;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
	box-shadow: 5px 5px 20px 3px black;
}
#video_link2 a {
    text-decoration: none;
    color: white;    
}
#video_link2:active {
    background: #BF0A30;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
}
#picture_link2    {
    background-color: #FFFFFF;
    margin: 0 15px 40px auto;
    border-radius: 15px;
    width: 100px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
	box-shadow: 5px 5px 20px 3px black;
}
#picture_link2 a {
    text-decoration: none;
    color: black;    
}
#picture_link2:active {
    background: #ffffff;
    color: white;
  -webkit-box-shadow: inset 3px 3px 3px 3px #161616;
     -moz-box-shadow: inset 3px 3px 3px 3px #161616;
          box-shadow: inset 3px 3px 3px 3px #161616;
}
#logout    {
    text-align: center;
    width: 350px;
    margin: 20px auto;
	box-shadow: 5px 5px 20px 3px hsla(0,0%,0%,0.84); 
    border-radius: 15px;
    background-color: #BF0A30;
    color: white;
}
@media (max-width: 651px){
    #header {
    height: 200px;  
}
    #smart-1_logo {
    width: 75%;
    margin: auto;
    min-width: 250px;
    max-width: 300px;
}
    #nav_menu    { 
    box-shadow: none;
}
    #main	{   
	box-shadow: none;
}
    #intro    {
    width: 98%;
    height: auto;
    margin: 10px auto;
    text-align: center;
}
    #testimonials	{
    width: 96%;
}
    #footer {
	box-shadow: none;
}
    #clear_bottom {
        height: 0px;
}
    .review    {
    width: 75%;
}
    #main h2 {
    width: 98%;
}
    #aircraft_info    {
    width: 100%;
}  
    #aircraft_intro    {
    width: 98%;        
    padding: 3px 30px 30px;
    }
    #features    {
    width: 98%;
}
    #performance    {
        width: 98%;
}
    #specification    {
        width: 98%;
}
    #contact_us    {
        width: 100%;
    }
    .col {
    flex: 97%;
    max-width: 97%;
    margin: 0 auto;
}
.col1 {
    flex: 60%;
    max-width: 60%;
    margin: 0 auto;
}
    .close {
    top: 2px;
    right: 55px;
}
    .modal {
    height: 30%;
}
    .contact_form #message {
        width: 88%;
    }
    #contact_description    {
    width: 95%;
    min-width: 200px;
    }
    .intro_picture    {
    min-width: 300px;
}
#intro_picture_box    { 
    width: 100%;
}
#aircraft_3d_instructions    {
    width: 98%;
    line-height: 20px;
}
    
#smart1_articles    {  
    width: 98%;
}
      #news    {
        width: 100%;
}
.news_picture    {
    width: 98%;
}
.col1 {
  flex: 98%;
  max-width: 98%;
}
#briefing_intro    {
    width: 98%;
} 
#briefing    {
    width: 98%;
}
.image-slide {
  width: 95%;
}

.modal-preview {
  width: 95%;
}
    .dots {
    width: 95%;   
}
.dots img {
    width: 50px;    
}
}