/*
Theme Name:     Lil Divi
Description:    
Author:         BrennaPincock
Template:       Special310Divi

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/
@import url('https://fonts.googleapis.com/css?family=Lato');

body{
  font-family: 'Lato', sans-serif;
}

/* top navigation bar*/
#main-header {background-color: #c9d1c8}

#et-top-navigation nav > ul > li > a {
   color: #0c202a;
   border: solid;
   border-width: 2px;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
	font-weight: bold !important;
   font-size: 15.1px;
}

#et-top-navigation nav > ul > li > a:hover{
   color: #c9d1c8 !important;
   background-color: #09202b;
}

.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {

  padding-bottom: 33px;}



/* main slider*/

.et_pb_slide_description {

    font-weight: normal;
    padding: 36% 0% 0% 0%;
    text-align: right;
}

.et_pb_slide_description h2.et_pb_slide_title {

    font-weight: bold!important;
    font-size: 75px!important;
    padding-left: 40px;
    text-shadow: 2px 2px 3px #09202b;
}

.et_pb_slide_description h2.et_pb_slide_title {
  font-weight: normal;
  font-size: 30px;
  padding-left: 40px;
}

.et_pb_slide_content p:last-of-type {
  padding: 0% 0% 12% 8%;
  font-size: 22px;
  text-shadow: 2px 2px 3px #09202b;
  font-weight: bold !important;
  }



/*section1*/
#types p {
  color: #5b7065;
  font-size: 60px;  
  padding: 2% 2% 2% 4%;
  text-align: left;
  position: relative;
}


#text p {
  color: #5b7065;
  font-size: 30px;
  padding: 0% 2% 0% 4%;
  margin-top: -20px;
}

#white {
  background-color: white;
  opacity: 0.85; 
}
  
#differenttypes img{
  padding: 0 20%;
}

#cd p{
  color: #5b7065;
  font-size: 25px;
  text-align: center;
}
  
#vd p{
  color: #5b7065;
  font-size: 25px;
  text-align: center;
}
  
#md p{
  color: #5b7065;
  font-size: 25px;
  text-align: center;
}
 

  
/*section2*/
.et_pb_text_inner {
  color: white;
}

#know .et_pb_slide {
    padding-top: 100px;
    padding-bottom: 100px;
}

#vs p{
  font-size: 29px!important; 
  padding-top: 90px;
  font-weight: bold;
  text-shadow: 2px 2px 3px #09202b;
}

#accident p{
  font-size: 19px;
  text-shadow: 2px 2px 3px #09202b;
}

#know {
  padding-top: 15px;
  padding-bottom: 15px;
}



/*section3*/
#what .et_pb_number_counter_0.et_pb_number_counter .percent p {

   color: #09202b !important;
   font-size: 100px;
   font-weight: bold;
   text-align: center;
   word-wrap: normal;
   padding: 90% 0%;
}

#what h3 {
  color: #09202b !important;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 20% 0% 0% 10%;
}

#what .et_pb_text_inner {
  color: white;
  font-size: 30px;
  text-align: right;
  padding: 50% 0% 3% 0%;
  opacity: 0.85;
}

#what .et_pb_text_inner p{
  background-color: #09202b !important;
  padding-top: 20px;
  padding-bottom: 20px;
}

#what p{
  padding-right: 30px;
}

#what {
  padding-top: 15px;
  padding-bottom: 15px;
}



/*section4*/
.larger {
  color: #c8d1c8;
  font-size: 50px;
  font-weight: bold;  
}

#commit p{
  font-size: 25px;
  font-weight: bold;
}

#twitter img{
  padding: 0% 75% 0% 10%;
  margin-top: 10px;
  margin-bottom: -55px;
  margin-left: -50px; 
}

#instagram img{
  padding: 0% 60% 0% 25%;
  margin-top: -70px;
  margin-bottom: -8px;
  margin-left: -10px;
}

#facebook img{
  padding: 0% 45% 0% 40%;
  margin-top: -70px;
  margin-bottom: 30px;
  margin-left: 30px;
}

#youtube img{
  padding: 0% 30% 0% 55%;
  margin-top: -90px;
  margin-bottom: -32px;
  margin-left: 80px;
}

#question {
  padding-top: 60px;
}

#sun img{
  margin-left: -10px;  
}

#commit {
  padding-top: 15px;
  padding-bottom: 15px;
}

ul.et-social-icons a:hover{
  color: #304040;
}

/*mobile*/

/* top navigation bar*/
@media screen and (max-width: 480px)
{
  .et_pb_slide_description h2.et_pb_slide_title{ 
    position: relative;
    font-size: 40px!important;
    padding: 0px;
  }

  .et_pb_slide_content p:last-of-type {
  padding-bottom: 5%;
  font-size: 12px;
  text-shadow: 2px 2px 3px #09202b;
  font-weight: bold !important;
  }

  .mobile_menu_bar::before{
  color: #0c202a;
}
}

/*section1*/
@media screen and (max-width: 480px)
{
  
  #types p {
  color: #5b7065;
  font-size: 40px; }
  
  #text p {
  color: #5b7065;
  font-size: 19px;
  }
  
  #differenttypes img{
    text-align: center !important;
  }
  
  #cd p{
  font-size: 18px;
  text-align: center;} 
  
  #vd p{
  font-size: 18px;
  text-align: center;}
  
  #md p{
  font-size: 18px;
  text-align: center;}
}

/*section2*/
@media screen and (max-width: 480px) {
  #vs p{
  font-size: 22px!important; 
  padding-top: 0px;
  text-align: center;
 }
  
  #accident p{
    font-size: 15px;
    text-align: center;}
}

  #three{
   margin: -20px; 
}
  #vs {
  margin-bottom: 10px;
}

/*section3*/
@media screen and (max-width: 1200px) {
  #what .et_pb_number_counter_0.et_pb_number_counter .percent p {
   font-size: 130px;
   text-align: center;
   padding-top: 100px;}
  
  #trafficcrashes .et_pb_text_inner{
    margin-top: 250px;
  }
  
  #what{
    padding-top: 0px;
  }
  
  #what h3 {
  font-size: 25px;
  margin-top: -150px;
  text-align: center;
  margin-right: 30px;
  }
  
  #what .et_pb_text_inner {
  font-size: 19px;
  text-align: right;
  opacity: 0.85;}
  
  #what .et_pb_text_inner p{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 7.5px;}
}

/*section4*/
@media screen and (max-width: 1150px) {
  .larger {
  font-size: 40px;
  word-wrap: normal; }
  
  #commit p{
  font-size: 21px;
  margin-left: 20px;
  text-align: left;
  word-wrap: normal;
  }
  
  #question {
    padding-top: 0px;}
  
  #sun img{
    margin-left: 0px;}
  
  #commit img{
    text-align: center!important;}  
  
  #facebook img{
    margin-bottom: 16px;
  }
ul.et-social-icons a:hover{
  color: #304040;
}

.mobile_menu_bar::before{
  color: #0c202a;
}

.et_mobile_menu li a:hover {
    background-color:#304040;
    color: #c9d1c8;
  }
  .et_mobile_menu{
    background-color: #c9d1c8;
    border-top:3px solid #c9d1c8!important;
  }
}