/* 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:Arial, Helvetica, sans-serif;}
   
   
/*/////////////////HEADER style///////////*/
/*I have followed this tutorial to make the strip design
-- https://css-tricks.com/stripes-css/*/
header{
   width:100%;
   background: repeating-linear-gradient(
  45deg,
  #444,
  #444 10px,
  
  #555 10px,
  #555 20px);}

#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:#ffffff;
   font-size: 30px;
   background-color:#F39C12;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#name_box b:hover{
   color :#ffffff;
   background-color:#F47A20;
   text-decoration : none;}
#name_box ul{
   text-align: left;
   list-style: none;}
#name_box p{
   width: 140px;
   color:#ffffff;
   font-size: 16px;
   background-color:#F39C12;
   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{/*#F47A20 #F39C12*/
   color:#ffffff;
   font-size: 18px;
   background-color:#F39C12;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#nav_box b:hover{
   color :#ffffff;
   background-color:#F47A20;
   text-decoration : none;}
#nav_box ul{
   text-align: right;
   list-style: none;}

/*///////////////BODY STYLE/////////////*/
body{
   width:100%;
   background:#ffffff;}

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

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

/*/////////////FLOATING RIGHT BOX STYLE/////////*/ 
footer{
   bottom: 0px;
   clear: both;
   width:100%;
   height:90px;
   background: repeating-linear-gradient(
  45deg,
  #444,
  #444 10px,
  #555 10px,
  #555 20px);}
   
footer span{
   color: #FFFFFF;}
   
#sec_2{
   width:100%;
   height:150px;
   margin:0 auto;
   max-width:900px;
   padding: 25px 0px 0px 25px;}
#sec_2 b{/*#F47A20 #F39C12*/
   color:#ffffff;
   font-size: 18px;
   background-color:#F39C12;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#sec_2 ul{
   list-style: none;}

#con{
   color:#ffffff;
   font-size: 13px;
   background-color:#F39C12;
   margin-left: 10px;
   padding-left:5px;
   padding-right:5px;}
#con:hover{
   color :#ffffff;
   background-color:#F47A20;
   text-decoration : none;}

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

/*//////////////////////SOCIAL BUTTONS STYLE//////*/
.social_1{
   margin:0 auto;
   clear:both;
   float:right;}
   
.social_1 li{
   display:inline;}
   
.social_0 li{
   display:inline;}
   
.social_0{
   margin:0 auto;
   float:left;}

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

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

/*//////////IMAGES STYLE/////////*/
.img_ex{
   width: 100%;}
video{
   width: 100%;}
/*//////////IMAGES DOUBLE/////////*/
.dob_img_l{
   width: 47%;
   float:left;}
.dob_img_r{
   width: 47%;
   float:right;
   clear:right;}
.comment{
   height: 500px;}
.comment_md{
   height: 580px;}
.comment_big{
   height: 680px;}
.comment_tx{
   height: 390px;}
.comment_mini{
   height: 300px;}
/*//////////FLOATING LEFT BOX STYLE/////////*/   
.ex_a{
   float:left;
   width:30%;
   margin-bottom:30px;
   height: 350px;
   /*background-color:#EFEFEF;*/}  

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

/*//////////FLOATING RIGHT BOX STYLE/////////*/     
.ex_c{
   float:right;
   clear:right;
   width:30%;
   margin-bottom:30px;
   height: 350px;
   /*background-color:#EFEFEF;*/}
 
/*//////////EMBEDDING/////////*/
.emb{
width: 100%;
min-height:400px;}


/*//////////CODE/////////*/
.code{
font-family: "Courier New", Courier, monospace;
background-color:#d9d9d9;
padding:7px;
padding-left: 12px;
font-size: 13px;
border: 1px dashed #666;}

.code_comment{
font-family: "Courier New", Courier, monospace;
font-size: 11px;}

.tab{
   font-family: "Courier New", Courier, monospace;
   margin-left: 20px;}

/*//////////////////////////////equation////////////////*/
.fraction {
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}

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

@media screen and (max-width: 480px){
   
   .box_query{
      display:block;
      width:90%;
      padding:1%;
      margin-right:5%;
      margin-left:5%;} 
}