/* This work is licensed under a Creative Commons Attribution 4.0 International License
Theme: FablabTorino@Fabacademy2016 by Stefano Paradiso stefano.prds@gmail.com */

/*///////SET TONT style AND RESET MARGIN////*/
*{padding: 0px; margin:0px; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif}

html, body {
   min-height: 100%;
   height: 100%;}

#wrapper{
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -155px}


/*/////////////////HEADER style///////////*/
/*I have follow this tutorial to make the strip design
-- https://css-tricks.com/stripes-css/*/
header{
   width:100%;
   background-image: url("img/fire.jpg");}

#sec_0{
   max-width:900px;
   width:100%;
   height:120px;
   margin:0 auto;
   padding-top:15px;}

/*///////////////NAME and NAV style/////////////*/
#name_box{
   margin:0 auto;
   float: left;
   width: 50%;
   padding-top:10px;
   padding-bottom:10px;}
#name_box b{/* PALETTE #F47A20 #F39C12*/
   color:#33FF33;
   font-size: 60px;
   background-color:#000000;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#name_box ul{
   text-align: left;
   list-style: none;}
#name_box p{
   width: 140px;
   color:#33FF33;
   font-size: 16px;
   background-color:#000000;
   margin-left: 10px;
   margin-top: 2px;
   padding-left:5px;}

#nav_box{
   clear: right;
   margin:0 auto;
   float: right;
   width: 50%;
   padding-top:10px;
   padding-bottom:10px;}
#nav_box b{
   color:#33FF33;
   font-size: 18px;
   background-color:#000000;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#nav_box b:hover{
   color :#000000;
   background-color:#F47A20;
   text-decoration : none;}
#nav_box ul{
   text-align: right;
   list-style: none;}

/*///////////////BODY STYLE/////////////*/
body{
   width:100%;
   background-image: url("img/fire.jpg");}

   #sec_1 h1{
      color:#33FF33;
      font-size: 20px;
    background-color: #000000}
    #sec_1    h1:hover{
          color :#000000;
          background-color:#F47A20;
          text-decoration : none;}
 #sec_1 b{
      color:#33FF33;
      font-size: 15px;
    background-color: #303030 }

  #sec_1    b:hover{
        color :#000000;
        background-color:#F47A20;
        text-decoration : none;}
  #sec_1 p{
           color:#33FF33;
           font-size: 15px;
         background-color: #303030 }
  #sec_1 ul{
           color:#33FF33;
           font-size: 15px;
         background-color: #303030 }

  #steps h1{
           width: 400px;
           color:#33FF33;
           font-size: 20px;
           background-color:#000000}
  #steps p{
           color:#33FF33;
           font-size: 15px;
         background-color: #303030 }
  #steps ul{
           color:#33FF33;
           font-size: 15px;
         background-color: #303030 }

  #steps{
     width:100%;
     margin: 0 auto;
     max-width:850px;
     padding-top:30px;
     padding-bottom:30px;}

     .step_1{
        float:left;
        width:100%;
        padding:2%;
        margin-bottom:10px;
        background-color: #303030 ;}
      .step_2{
           float:left;
           width:100%;
           padding:2%;
           margin-bottom:10px;
           background-color: #303030 ;}

#sec_1{
   width:100%;
   margin: 0 auto;
   max-width:900px;
   padding-top:30px;
   padding-bottom:30px;}

/*//////////FLOATING LEFT BOX STYLE/////////*/
.box_1{
   float:left;
   width:40%;
   padding:2%;
   margin-bottom:10px;
   background-color: #303030 ;}
/*//////////FLOATING MIDDLE BOX STYLE/////////*/
.box_2{
   float:right;
   clear:right;
   width:42%;
   padding:2%;
   margin-left:1%;
   margin-bottom: 30px;
   background-color:#303030 ;}
.ul_ex{
   padding-left: 20px;
   list-style: circle;
   line-height: 40px}
 /*//////////FLOATING RIGHT BOX STYLE/////////*/
.box_3{
   color:#33FF33
   float:left;
   clear:none;;
   width:42%;
   padding:2%;
   margin-top:0px;
   margin-bottom:30px;
   background-color:#303030 ;}
/*//////////FULL SIZE BOX STYLE/////////*/
.box_full{
   color:#000000
     float:left;
   width:100%;
   padding:4%;
   margin-bottom:30px;
   margin-top:30px;
   background-color:#303030 ;}
.box_full ul{
   padding-top:10px;
   padding-left:30px;}



/*/////////////FLOATING RIGHT BOX STYLE/////////*/
footer{
   bottom: 0px;
   clear: both;
   width:100%;
   height:90px;
   background-image: url("img/fire.jpg");}


footer span{
   color: #33FF33;}



/*///////////////////////LINK STYLE///////////////*/
a:link{
 color:  #1E90FF;
 text-decoration:underline;}
a:visited{
 color : #1E90FF;
 text-decoration: underline}
a:hover{
 color :#F47A20;
 text-decoration : none;}
a:active{
 color :  #1E90FF;
 text-decoration: underline}



.sob{height:40px;opacity:0.8;}
.sob:hover{opacity:1;}

/*////////////////////////////////////////////////////////////////*/
/*GRID LYOUT STYLE - EXERCISES -/////////////////////////////////*/
/*//////////////////////////////////////////////////////////////*/

/*//////////IMAGES STYLE/////////*/
.img_ex{
   width: 100%;}
/*//////////FLOATING LEFT BOX STYLE/////////*/
.ex_a{
   float:left;
   width:30%;
   margin-bottom:30px;
   /*background-color:#EFEFEF;*/}

/*//////////FLOATING MIDDLE BOX STYLE/////////*/
.ex_b{
   float:left;
   clear:right;
   width:30%;
   margin-left:3.5%;
   margin-bottom: 30px;
   /*background-color:#EFEFEF;*/}

/*//////////FLOATING RIGHT BOX STYLE/////////*/
.ex_c{
   float:right;
   clear:right;
   width:30%;
   margin-bottom:30px;
   /*background-color:#EFEFEF;*/}

/*////////////////////////////////////////////////////////////////*/
/*MEDIAQUERY-MOBILE///////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 480px){

   .box_query{
      display:block;
      width:90%;
      padding:1%;
      margin-right:5%;
      margin-left:5%;}
}