/*+++++++++++++++++++++++ELIVKORACH.COM+++++++++++++++++++++++*/
/*General*/
body {margin: 0 27%; font: 16px Arial, sans-serif; color: #32434F;}
p {line-height: 1.4em;}
main, ul, li, a, div, p, input, footer, input, h4, h3, video {margin: 0, padding: 0;}
main {position: relative;}
input {border-radius: none;}

/*Stylers*/
.blueFont {color: #32434F;}
.color {color: #037000; font-size: 20px;}
/*JavaScript*/
.hide {display: none;}
.visible {display: block;}

/*Headers*/
h1 {font-size: 85px; margin-top: 25px; letter-spacing: 1px;}
h2 {margin-top: -67px; letter-spacing: 6px;}
h3 {font-size: 30px; margin-bottom: -5px;}
h3 span {color: #007C87;}
h4 {font-size: 25px; margin-bottom: -20px;}

/*Welcome Message*/
#welcome {margin-top: 30px; width: 580px;}
#contact {margin-left: 120px;}

/*NAV*/
nav {margin-left: -40px;}
ul {display: flex; position: relative;}
li {list-style-type: none;  height: 40px; margin-bottom: 20px;}
a {text-decoration: none; color: #4157FF;}
a:visited {color: #007D9F;}
#eli {margin: -30px 0 0 384px;}
#eli a input{background-color: #039E00;  border-radius: 100px;}

/*Nav Buttons*/
.buttonShort {width: 192px; height: 40px; background-color: #2C637D; color: #fff; display: inline; font-size: 16px; border: 1px solid white;}
.buttonShort:focus {outline: none;}
.buttonShort p {padding: 16px;}

/*QUESTIONS*/
.button {width: 576px; height: 60px; background-color: #32434F; color: #fff; font-size: 16px; text-align: left; padding: 0 16px;}
.button:focus {outline: none;}

/*ANSWERS*/
/*Answer Boxes*/
.defBox {background-color: #C5FAFA; width: 566px; padding: 5px; margin-top: 3px;}
.defBox p {color: #32434F;}
/*Answer Text*/
.bmitzDef {text-align: justify; width: 500px; margin: 20px 30px;}


/*Tree*/
#tree {float: left; margin: -571px 0 0 440px;}

/*Pics*/
.eliPix {margin-left: 0;}

/*Map*/
#googleMap, #googleMap .button {width: 576px;}


/*Footer*/
footer {display: block; margin: 40px 0 50px 0; font-size: 12px;}


/*Video*/
video {margin-bottom: 20px;}
#wideVideo header {margin: 0 0px -40px 10px;}
#narrowVideo, #slimVideo {visibility: hidden;}
 

/*ERROR-------------------------------------------------------------------------*/
#error {margin-top: 50px;}
#treeError {margin: -295px 0 0 300px;}
#footerError {margin: 20px 0 0 270px;}

#googleMap {margin-top: 80px;}
#mapCaption {padding: 0;}
#mapCaption p {padding: 16px 0 0 16px;}


/*Tablet Landscape--------------------------------------------------------------*/

@media screen and (min-width : 950px) and (max-width : 1150px)
{
    body {margin: 0 17%;}
   
}

/*Tablet portrait----------------------------------------------------------------*/
@media screen and (min-width : 831px) and (max-width : 951px) 
{
    body {margin: 0 17%;}
    figure {display: none;}   
}

/* Phones landscape ---------------------------------------------------------- */
@media only screen and (min-width : 700px)and (max-width : 830px)
{
     body {margin: 0 12%;}
     figure {display: none;} 
}



/* Phone portrait -------------------------------------------------------------- */
@media screen and (min-width : 420px) and (max-width : 701px) 
{
    /*General*/
    body {margin: 0 3%;}
    
    /*Headers*/
    h1{font-size: 60px; }
    h2{margin-top: -30px; font-size: 20px; width: 420px;}
    
    #welcome {width: 410px;}
    #contact {margin-left: 30px;}
    
    /*Tree*/
    figure {display: none; font-size: 20px;}
    
    /*Nav*/
    .buttonShort {width:  205px; height: 50px;} 
    
    /*Questions and Answers*/
    .button {width: 420px; height: 60px;}
    .answer {width: 80px;}
    
    /*Answer Text*/
    .bmitzDef {width: 350px;}
    .defBox {width: 410px;}  

    #friendsLink {margin: 50px 0 0 -410px;}   
    #eliLink {margin: 4px 0 0 -179px;} 
    #welcome {width: 410px;}
    
    /*Map*/
    #googleMap, #googleMap .button {width: 420px;}
    
   /*Video*/
    #wideVideo {display: none;}
    #slimVideo {visibility: hidden;}
    #narrowVideo {visibility: visible;}
    #narrowVideo header {margin-bottom: 24px;}
}
   
    

/* Small phones portrait ----------- */
@media screen and (max-width : 419px) 
{
     /*General*/
    body {margin: 0 3%; width: 320px;}
    
    /*Headers*/
    header {width: 320px;}
    h1 {font-size: 60px; margin-bottom: 60px;}
    
    /*Welcome*/
    #welcome {width: 310px;}
    #contact {margin-left: 30px;}
    
    /*Tree*/
    figure {display: none; font-size: 20px;}
    
    /*Nav*/
    .buttonShort {width:  165px; height: 50px;} 
    #friendsLink {margin: 50px 0 0 900px;}   
    #eliLink {margin: 4px 0 0 19px;} 
    
    /*Questions and Answers*/
    .button {width: 320px; height: 60px; padding-left: 10px;}
   
    /*Answer Text*/
    .bmitzDef {width: 280px; margin: 15px;}
    .defBox {width: 310px;}  

    #friendsLink {margin-left: -330px;}   
    #eliLink {margin-left: -220px;} 
    #welcome {width: 310px;}
    
    /*Map*/
    #googleMap, #googleMap .button {width: 320px;}
    #googleMap {margin-top: 30px;}
    
   /*Video*/
    
    #wideVideo, #narrowVideo {display: none;}
    #slimVideo {visibility: visible;}
    #slimVideo header {margin-bottom: 24px;}
    
    
}