/* Header style*/

header {
		background-color: black;
		height: 40px;
		width: 100%;
		color: white;
		max-width: 100%;
		min-width: 100%;
	}
    
	#headertext {
		font-family: 'Roboto Slab', sans-serif;
		line-height: 40px; 
		font-size: 20px; 
		margin-left: 10px;
		text-decoration: none;
		font-style: bold;
	}

	@media (max-width:801px)  {
		#headerhomelink {
			float: left;
		}
	}

	#headerhomelink {
		font-family: 'Roboto Slab', sans-serif;
		text-decoration: none;
		color: white;
		text-align: center;
	}

	.headerelement {
		color: white;
		font-family: 'Roboto Slab', sans-serif;
		line-height: 40px; 
		font-size: 20px; 
		text-decoration: none;
		font-style: bold;
	}


/* shared style */ 


body { font-family: 'Montserrat', sans-serif; text-align: center; margin:0; padding: 0; min-width: 350px;}
       html,body { margin:0;  padding:0;  height:100%; } 
       
       #local_home_nav { color: white; text-decoration: none; float:left;} 
       
       /* Index Code */
        #container { width: 100%; margin: auto;}
        #container_left { width: 61%; float: left; }
        #container_right { width: 30%; float: left; margin-top:126px; }
       
   
       #headerhomelink { float: none !important; }
       /* #headerhomelink { float: right;	margin-right: 10px; } */ 
       
       
       #container { min-height:100%; position:relative; }
       
       #footer { position:absolute;
          bottom:0;
          width:100%;
          height:20px;   /* Height of the footer */
          background: #dbdbdb;
          padding-top: 20px; padding-bottom: 20px; 
       }
       

        
        
       .clear {
         width: 100%;
         height: 20px;
         clear: both;
         display: block;
       }
        .clock_contain { margin: auto; background-color: #dbdbdb; padding: 20px; width: 60%; margin-top: 20px; margin-bottom: 20px; text-align: center}
        .sub_clock_contain { margin: auto; background-color: #dbdbdb; padding: 20px; width: 60%; margin-top: 20px; margin-bottom: 20px; text-align: center}
         #link { background-color: #8FBC8F ; display: block; width: 60%; padding: 20px; margin: auto; color: black; margin-bottom: 20px;}
       
        .countdown {margin-bottom: 10px; margin-top: 5px; font-size: 28px;}
       .countdown_2 {margin-bottom: 10px; margin-top: 5px; font-size: 22px;} 
        .local { font-size: 13px;}
        
        h1 {padding-top: 30px; }
        .width_fix { max-width: 80% !important; display: block; margin: auto; margin-bottom: 20px; margin-top: 40px;}
        
        .text_left {text-align: left;}
        #bird {background-color: #c9d7e8 ;}
        #bird3 {background-color: #EF8383 ;}
        #bird4 {background-color: #EFEF67 ;}
        
        #disclaimer {font-size: 12px; }
        .bullet_list {text-align: left; min-width: 40%; max-width: 45%; margin: auto;}
        .big_bullet_list {text-align: left; width: 80%; margin: auto;}
       .width_list { text-align: left; max-width: 98%; padding-left: 2%; padding-right: 2%; margin: auto; 
           font-size: 12px;
           font-size: 1.5vw;
       }
       
        #more { background-color: #dbdbdb; display: block; width: 60%; padding: 20px; margin: auto; color: black; margin-bottom: 20px;}
        .link {  margin-bottom: 10px;}
       
       .event_text {min-width: 40%; max-width: 60%; margin: auto;} 
        
       /* when the page gets below 1500  ============================================*/
         @media (max-width:1501px)  {
           #region_container { min-width: 90%; }
       }
       
       
         /* when the page gets below 1200  ========================================== */
         @media (max-width:1201px)  {
          #container { margin-top: 0px;}
          #container_left { width: 58%; float: left; }
          #container_right { width: 40%; float: left;  }
                    
          
        }

       
       .secondary_timer_header { margin-top: 60px; clear:both; }
       
       /* When the page gets smaller 801px ========================================== */ 
        @media (max-width:801px)  {
          
           #headerhomelink { float: right !important;	margin-right: 10px; }
          
          #container { margin-top: 0px;}
          #container_left { width: 100%; float: left; clear: both;}
          #container_right { width: 100%; float: left; clear: both; margin-top: 20px; padding-top: 15px; margin-bottom: 20px; }
          
          .event_text { min-width: 40%; max-width: 98%; margin: auto; font-size: 2.8vw;} 
          .bullet_list, .big_bullet_list {width: 88%; max-width: 90%; font-size: 12px;}
          
           .width_list { font-size: 11px;  }
          
          .secondary_timer_header { margin-bottom: 15px;}
          
          .secondary_timer_header { margin-top: 30px; }
          
          .extra_text { font-size: 13px; }
          h1 {font-size: 20px; padding-top: 0px; margin-top: 10px;} 
          .link { margin-top: 0px; margin-bottom: 10px;}
          
          .sub_clock_contain { width: 80%; }
          #link { width: 90%; }
          
           #footer { font-size: 15px; padding-bottom: 40px;  } 
        
        
        .clock_contain {width:90% !important;}
          
        .region { font-size: 10px; font-weight: bold;}
          
         .extra_timer_box, .extra_timer_box_nolink { max-width: 80% !important; }
          
          /* Page specific balow*/
          .gen3_leg_img_seg { height: 127px !important; width: 236px !important; }
          
        }
       
       /* if page gets TINY! less than 500px ========================================== */ 
       @media (max-width:501px)  {
        .event_text { font-size: 12px;} 
       }  
         
       /* When the page gets bigger */
       @media screen and (min-width: 1200px) {
        .width_list {  font-size: 16px;  }
      }

        .big_bullet_list br { line-height: 30px; }
       
       #footer_container { width: 80%; margin: auto; color: #404040; font-size: 15px;}
       #footer_contact { float:right; }
       #footer_contact:link, #footer_contact:active, #footer_contact:visited, #footer_contact:hover {  text-decoration: none; color: #404040; } 


       .nest_migration_container { width: 350px; margin: auto; float:left; max-width: 70%; }
       
       #nest_migration_text { float: left;  }
       #nest_migration_div { float: left;  margin-left: 10px;    }
       
       
      /* Side Pannel CSS */
        .left_side_panel { width: 240px; height: 80px;  background-color: #F0F0F0; padding-top: 20px; padding-left: 120px; margin:auto;}
        .countdown_small {margin-bottom: 5px; margin-top: 5px; font-size: 15px;}
        .local_small { font-size: 12px;}
        .left_side_panel:hover {background-color: #cccccc; cursor: pointer;}
        
        .no_link { text-decoration: none; color: black;}
        
        #beast_secondary_image{ position: relative; top: 80px; right: 100px; height:61px; width:113px; z-index: 1;}
        .secondary_image { position: relative; right: 100px;  z-index: 1;}
        
       
        
       /* Apply CSS when the page gets bigger 
         
          @media (min-width:1500px)  {
           .left_side_panel { position: absolute; top: 80px; right: 20px; }
           #beast_secondary_image { position: absolute; top: 100px !important; right: 250px; height:61px; width:113px; z-index: 1;}
           .secondary_image { position: absolute; top: 100px; right: 250px; z-index: 1;}
           #equinox2017_secondary_image { margin-top: 0px;  top: 96px !important;}
           
           .secondary_timer_header { display:none;}
         }
        End Side Pannel CSS */ 
       
       /* Completely redid the side pannel code in legendary beasts */
        
       #countdown_page_extras .extra_timer_box { max-width: 40%;}
       #event_extras .extra_timer_box { max-width: 350px !important;}
       
        .extra_timer_box, .extra_timer_box_nolink { padding: 7px; padding-top: 10px; padding-bottom: 5px; width: 80%; 
          margin: auto;  background-color: #dbdbdb; height: 70px; margin-bottom: 15px;}
        .extra_timer_box:hover { background-color: #cccccc;}
        
             
        .extra_timer_left { width: 25%; float: left;} 
        .extra_timer_right { width: 75%; float: right;} 



/* style for motivational calc*/
     h1 {padding-top: 10px; }
      #input_boxes {clear:both; height: 40px; height: inherit; width: 50%; margin: auto; max-width:500px;}
      .input_items {width: 50%; float:left; margin: auto;}
      input {height: 50px; font-size: 30px; width: 100px; text-align: center; margin-bottom:5px;}
      .input_items input {width: 150px;}    
      #output {width: 60%; margin: auto; max-width:600px;}
      #result {font-size: 30px; }
      #sub {width:50%; margin:auto; clear:both; margin-top: 20px;}
      .i {min-width:49%; max-width:33%; float: left; margin-top: 10px; margin-bottom: 20px; }
      .k {min-width: 100%; clear: both; margin:auto; margin-top: 10px;}
      #help { position: fixed;
      left: 20px;
      bottom: 100px;  }
     .motiv-heart {display:none; height:50px; width:50px;}
          
      @media (max-width:800px)  {
        /* do when the page gets smaller */ 
         h1 {padding-top: 7px; font-size: 16px;}
        .desc_font { font-size:13px;}
        #content{ min-height:80vh;}
        .input_items {width: 100%; margin-bottom: 10px;}
        #sub {width:100%; font-size: 14px;}
        #output {width: 90%;}
        #result{ margin-top: 80px;}
        input[type="text"] { border: 1px solid #d66 }
        #input_boxes {float:left;}
        
        /* Position inherit for when the content is longer than the page*/
        #footer {	position: inherit;max-width: 100%;}
        #help { position: inherit;max-width: 100%; margin-bottom: 10px; margin-top: 15px; } 
      }

      @media (min-width:801px)  {
      /* do when the page gets bigger */ 
        .mob {display:none!important; }
        #result {clear:both; min-width:100%; margin-top: 114px;}
        #sub {width: 400px;}
        
     }