.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both}
.pull-right{float:right !important}
.pull-left{float:left !important}
.hide{display:none !important}
.show{display:block !important}
.invisible{visibility:hidden}
.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
.affix{position:fixed}
@-ms-viewport{width:device-width}@media screen and (max-width:400px){@-ms-viewport{width:320px}}.hidden{display:none !important;visibility:hidden !important}
.visible-xs{display:none !important}tr.visible-xs{display:none !important}
th.visible-xs,td.visible-xs{display:none !important}
@media (max-width:767px){.visible-xs{display:block !important}tr.visible-xs{display:table-row !important} th.visible-xs,td.visible-xs{display:table-cell !important}}@media (min-width:768px) and (max-width:991px){.visible-xs.visible-sm{display:block !important}tr.visible-xs.visible-sm{display:table-row !important} th.visible-xs.visible-sm,td.visible-xs.visible-sm{display:table-cell !important}}
@media (min-width:992px) and (max-width:1199px){.visible-xs.visible-md{display:block !important}tr.visible-xs.visible-md{display:table-row !important} th.visible-xs.visible-md,td.visible-xs.visible-md{display:table-cell !important}}
@media (min-width:1200px){.visible-xs.visible-lg{display:block !important}tr.visible-xs.visible-lg{display:table-row !important} th.visible-xs.visible-lg,td.visible-xs.visible-lg{display:table-cell !important}}
.visible-sm{display:none !important}tr.visible-sm{display:none !important}
th.visible-sm,td.visible-sm{display:none !important}
@media (max-width:767px){.visible-sm.visible-xs{display:block !important}tr.visible-sm.visible-xs{display:table-row !important} th.visible-sm.visible-xs,td.visible-sm.visible-xs{display:table-cell !important}}
@media (min-width:768px) and (max-width:991px){.visible-sm{display:block !important}tr.visible-sm{display:table-row !important} th.visible-sm,td.visible-sm{display:table-cell !important}}@media (min-width:992px) and (max-width:1199px){.visible-sm.visible-md{display:block !important}tr.visible-sm.visible-md{display:table-row !important} th.visible-sm.visible-md,td.visible-sm.visible-md{display:table-cell !important}}
@media (min-width:1200px){.visible-sm.visible-lg{display:block !important}tr.visible-sm.visible-lg{display:table-row !important} th.visible-sm.visible-lg,td.visible-sm.visible-lg{display:table-cell !important}}
.visible-md{display:none !important}tr.visible-md{display:none !important}
th.visible-md,td.visible-md{display:none !important}
@media (max-width:767px){.visible-md.visible-xs{display:block !important}tr.visible-md.visible-xs{display:table-row !important} th.visible-md.visible-xs,td.visible-md.visible-xs{display:table-cell !important}}
@media (min-width:768px) and (max-width:991px){.visible-md.visible-sm{display:block !important}tr.visible-md.visible-sm{display:table-row !important} th.visible-md.visible-sm,td.visible-md.visible-sm{display:table-cell !important}}
@media (min-width:992px) and (max-width:1199px){.visible-md{display:block !important}tr.visible-md{display:table-row !important} th.visible-md,td.visible-md{display:table-cell !important}}@media (min-width:1200px){.visible-md.visible-lg{display:block !important}tr.visible-md.visible-lg{display:table-row !important} th.visible-md.visible-lg,td.visible-md.visible-lg{display:table-cell !important}}
.visible-lg{display:none !important}tr.visible-lg{display:none !important}
th.visible-lg,td.visible-lg{display:none !important}
@media (max-width:767px){.visible-lg.visible-xs{display:block !important}tr.visible-lg.visible-xs{display:table-row !important} th.visible-lg.visible-xs,td.visible-lg.visible-xs{display:table-cell !important}}
@media (min-width:768px) and (max-width:991px){.visible-lg.visible-sm{display:block !important}tr.visible-lg.visible-sm{display:table-row !important} th.visible-lg.visible-sm,td.visible-lg.visible-sm{display:table-cell !important}}
@media (min-width:992px) and (max-width:1199px){.visible-lg.visible-md{display:block !important}tr.visible-lg.visible-md{display:table-row !important} th.visible-lg.visible-md,td.visible-lg.visible-md{display:table-cell !important}}
@media (min-width:1200px){.visible-lg{display:block !important}tr.visible-lg{display:table-row !important} th.visible-lg,td.visible-lg{display:table-cell !important}}
.hidden-xs{display:block !important}tr.hidden-xs{display:table-row !important}
th.hidden-xs,td.hidden-xs{display:table-cell !important}
@media (max-width:767px){.hidden-xs{display:none !important}tr.hidden-xs{display:none !important} th.hidden-xs,td.hidden-xs{display:none !important}}@media (min-width:768px) and (max-width:991px){.hidden-xs.hidden-sm{display:none !important}tr.hidden-xs.hidden-sm{display:none !important} th.hidden-xs.hidden-sm,td.hidden-xs.hidden-sm{display:none !important}}
@media (min-width:992px) and (max-width:1199px){.hidden-xs.hidden-md{display:none !important}tr.hidden-xs.hidden-md{display:none !important} th.hidden-xs.hidden-md,td.hidden-xs.hidden-md{display:none !important}}
@media (min-width:1200px){.hidden-xs.hidden-lg{display:none !important}tr.hidden-xs.hidden-lg{display:none !important} th.hidden-xs.hidden-lg,td.hidden-xs.hidden-lg{display:none !important}}
.hidden-sm{display:block !important}tr.hidden-sm{display:table-row !important}
th.hidden-sm,td.hidden-sm{display:table-cell !important}
@media (max-width:767px){.hidden-sm.hidden-xs{display:none !important}tr.hidden-sm.hidden-xs{display:none !important} th.hidden-sm.hidden-xs,td.hidden-sm.hidden-xs{display:none !important}}
@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none !important}tr.hidden-sm{display:none !important} th.hidden-sm,td.hidden-sm{display:none !important}}@media (min-width:992px) and (max-width:1199px){.hidden-sm.hidden-md{display:none !important}tr.hidden-sm.hidden-md{display:none !important} th.hidden-sm.hidden-md,td.hidden-sm.hidden-md{display:none !important}}
@media (min-width:1200px){.hidden-sm.hidden-lg{display:none !important}tr.hidden-sm.hidden-lg{display:none !important} th.hidden-sm.hidden-lg,td.hidden-sm.hidden-lg{display:none !important}}
.hidden-md{display:block !important}tr.hidden-md{display:table-row !important}
th.hidden-md,td.hidden-md{display:table-cell !important}
@media (max-width:767px){.hidden-md.hidden-xs{display:none !important}tr.hidden-md.hidden-xs{display:none !important} th.hidden-md.hidden-xs,td.hidden-md.hidden-xs{display:none !important}}
@media (min-width:768px) and (max-width:991px){.hidden-md.hidden-sm{display:none !important}tr.hidden-md.hidden-sm{display:none !important} th.hidden-md.hidden-sm,td.hidden-md.hidden-sm{display:none !important}}
@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none !important}tr.hidden-md{display:none !important} th.hidden-md,td.hidden-md{display:none !important}}@media (min-width:1200px){.hidden-md.hidden-lg{display:none !important}tr.hidden-md.hidden-lg{display:none !important} th.hidden-md.hidden-lg,td.hidden-md.hidden-lg{display:none !important}}
.hidden-lg{display:block !important}tr.hidden-lg{display:table-row !important}
th.hidden-lg,td.hidden-lg{display:table-cell !important}
@media (max-width:767px){.hidden-lg.hidden-xs{display:none !important}tr.hidden-lg.hidden-xs{display:none !important} th.hidden-lg.hidden-xs,td.hidden-lg.hidden-xs{display:none !important}}
@media (min-width:768px) and (max-width:991px){.hidden-lg.hidden-sm{display:none !important}tr.hidden-lg.hidden-sm{display:none !important} th.hidden-lg.hidden-sm,td.hidden-lg.hidden-sm{display:none !important}}
@media (min-width:992px) and (max-width:1199px){.hidden-lg.hidden-md{display:none !important}tr.hidden-lg.hidden-md{display:none !important} th.hidden-lg.hidden-md,td.hidden-lg.hidden-md{display:none !important}}
@media (min-width:1200px){.hidden-lg{display:none !important}tr.hidden-lg{display:none !important} th.hidden-lg,td.hidden-lg{display:none !important}}
.visible-print{display:none !important}tr.visible-print{display:none !important}
th.visible-print,td.visible-print{display:none !important}
@media print{.visible-print{display:block !important}tr.visible-print{display:table-row !important} th.visible-print,td.visible-print{display:table-cell !important} .hidden-print{display:none !important}tr.hidden-print{display:none !important} th.hidden-print,td.hidden-print{display:none !important}}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)} 40%{-webkit-transform:translateY(-10px)} 60%{-webkit-transform:translateY(-5px)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)} 40%{-moz-transform:translateY(-10px)} 60%{-moz-transform:translateY(-5px)}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0)} 40%{-o-transform:translateY(-10px)} 60%{-o-transform:translateY(-5px)}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} 60%{transform:translateY(-5px)}}.bounce{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-ms-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce}

.page{padding-top:60px}
.intro{margin:3em 0;color:#666}
.lighttext{color:#888;font-weight:300}
header{background:#0a2e42;overflow:hidden;position:absolute;width:100%;min-height:60px;top:0;z-index:1}header .logo{font-size:1.3em;float:left;padding:0}header .logo a:hover{border-bottom:4px solid #299bda;transition:border .2s;-webkit-transition:border .2s;-moz-transition:border .2s;-ms-transition:border .2s;-o-transition:border .2s}
header a{color:#FFF}header a:hover,header a:focus{text-decoration:none;color:#FFF}
@media (min-width:1200px){header{position:fixed}}.nav{float:right}.nav li{list-style:none;float:left;margin:0}
.nav a{font-weight:300;text-transform:uppercase;display:block;float:left;height:60px;line-height:60px;padding:0 2em}
.nav a:hover {background:#34495e;padding-bottom: 15px;transition:background;}
.nav a.selected{background:#2980b9;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}
@media (max-width:768px){header .logo{float:none;font-size:1em;text-align:center} .nav{float:none;display:block} .nav a{padding:0 .5em;line-height:30px;height:30px} .nav ul{padding:0;text-align:center} .nav li{display:inline-block;float:none}}.hero{font-family:"Avenir","Nunito",sans-serif;background:#2980b9;color:#FFF;font-weight:200;font-size:2.5em;line-height:1.3em;padding:1em 0 1.5em 0}
@media (max-width:768px){.hero{font-size:1.5em}}.work{margin-top:2em;margin-bottom:2em}
.work-info{color:#2c3e50;padding:1em 2em;background:#FFF;font-weight:300;min-height:300px}
.work-image{position:relative;height:300px;background-repeat:no-repeat;background-position:center 50px;line-height:300px;text-align:center;overflow:hidden}.work-image img{max-width:100%;height:auto}
.work-image .mockup{margin-top:50px}
.work-product h2{color:#2980b9}
.work-product .work-image{background-color:#2980b9}

.project{margin-bottom:4em;}
.project-info{background:#FFF;padding:2em;min-height:12em}
.project h2,.project h2 a{color:#0A2E42;font-weight:200;font-size:1.3em;margin:0 0 .5em 0;text-decoration:none}
.project p{color:#888;font-weight:300;margin:.5em 0 0 0}
.project-preview{position:relative}
.project-image{min-height:200px;background-color:#CCC;background-repeat:no-repeat;background-size:cover;background-position:center center;}
.project-cta{display:block;opacity:0;position:absolute;background:rgba(0,0,0,0.8);top:0;left:0;bottom:0;right:0;transition:opacity .2s;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s}
.project-preview:hover .project-cta{opacity:1;text-align:center}
.project-cta .btn{display:block;position:absolute;color:#FFF;left:0;bottom:0;right:0;line-height:190px;font-weight:300;font-size:1.5em;text-transform:uppercase}
.showcase {display:block;position:absolute;color:#FFF;top:90px;left:0;bottom:0;right:0;line-height:190px;font-weight:300;font-size:1.5em;text-transform:uppercase}
.project-cta .btn:hover{text-decoration:none;color: #FFF;}
.work-more{text-align:center}
.about,.about-talks{background:#FFF;padding:44px}
.avatar{height:auto;display:block;max-width:100%;height:auto}
.contact ul{margin:0;padding:0}
.contact li{margin:.5em 0;padding:0;list-style:none;color:#666}
.contact a{color:#666}
.about-experience dt,.about-education dt{width:6em;float:left;font-weight:normal;color:#666}
.about-experience dd,.about-education dd{overflow:auto}
.about-experience h3,.about-education h3{margin:0;font-size:1em;line-height:22px;font-weight:normal}
.about-experience p,.about-education p{color:#888;font-weight:300}
.about-talks{margin-top:3em;font-weight:300;color:#666}.about-talks h2{margin-top:0}
.about-talks h3{font-size:1em}
.footer{margin-top:2em;padding:2em 0;color:#888;border-top:1px solid #DDD;background-color:black!important;}
.section-text{text-align: center!important;font-size: 0.6em!important;font-weight:50!important;line-height:0.7em!important;}
/*.section{text-align: center!important;font-size: 0.8em!important;font-weight:100!important;line-height:0.7em;}*/
/*.section-fa{text-align: center!important;font-size: 1.2em!important;}*/
.hero{text-align: center!important;}
.red{color:red;}

.social-networks li{margin-left:20px}
.social-networks{text-align:center;margin:0;padding:0;width:100%}
.social-networks li{padding:0 6px 5px}
.social-networks {margin-left:15px}
.social-networks{display: inline!important;}
.footer{height:200px!important}

.dataviz{animation-duration:6s;animation-name: bounceInLeft;}
.datahandling{animation-duration:6s;animation-name: bounceInRight;}
.machinelearning{animation-duration:8s;animation-name: bounceInRight;}
.showcase-section{height:300px!important;}
.hero{height:300px!important;}
.box-title{margin-top:145px!important;text-align: center;animation-duration:6s;animation-name: bounceInRight;}
.header-section{height:200px!important;font-family:"Avenir","Nunito",sans-serif;background:#2980b9;color:#FFF;font-weight:200;font-size:2.5em;line-height:1.3em;padding:1em 0 1.5em 0}
@media (max-width:468px){.header-section {font-size:1.5em;margin-top:15px;font-weight:50;background:#2980b9;}}


.title-section{text-align: center;animation-duration:6s;animation-name: bounceInRight;}
.function-section{margin-top: 20px;color: white;}
.function-section:hover{margin-top: 20px;color: white;}
.fa-position{margin:10px;color: #e74c3c}
#sendmail{width: 200px;}
body{overflow-x: hidden;}
.soc-net{color: #fff}
.title-header-section{text-align: center;}
.story{
  visibility: hidden;
}
.function{
  visibility: hidden;

}
.story-left{
  visibility: hidden;
}
.l{padding-top: : -50px!important;}
/* -------------------- modal --------------------- */

#viewer{overflow-x: hidden;}



/* --------------------demo button in home page --------------------- */

.demo{
  background-color: #c0392b;
}
.demo:hover{
  background-color: #e74c3c!important;
}

/* --------------------modal in home page --------------------- */
.modal-header, h4, .close {
    background-color: #2980b9;
    color:white !important;
    text-align: center;
    font-size: 30px;
}
.modal-footer {
    background-color: #f9f9f9;
}

/* --------------------header in home page --------------------- */
.section-table{
  /*font-size: 20px!important;*/
  width: 100%!important;
  text-align: center;
  /*display: block!important;*/
  margin: auto!important;
  font-family:"Avenir","Nunito",sans-serif!important;
}
.section-table-bottom{
margin-top: 15px!important;

}

tbody{
    width: 100%!important;
    font-family:"Avenir","Nunito",sans-serif;
}

/* -------------------------- Social Sidebar -------------------------------- */

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
#social-sidebar > a { text-decoration: none; }

#social-sidebar > h1 {
  font: bold 36px/1.5em "Open Sans", sans-serif;
  margin-bottom: 21px;
}

#social-sidebar > p {
  margin-bottom: 1em;
  text-align: justify;
}

 #social-sidebar > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


#social-sidebar {
  left: 0;
  margin-top: -75px; /* (li * a:width) / -2 */
  position: fixed;
  top: 85%;
}

#social-sidebar li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar li:last-child a { border-radius: 0 0 5px 0; }

#social-sidebar a {
  background: #2980b9;
  color: #fff;
  display: block;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  text-align: center;
  width: 50px;
}

#social-sidebar a:hover span {
  left: 130%;
  opacity: 1;
}

#social-sidebar a span {
  border-radius: 3px;
  line-height: 24px;
  left: -100%;
  margin-top: -16px;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  padding: 4px 8px;
  position: absolute;
  -webkit-transition: opacity .3s, left .4s;
  -moz-transition: opacity .3s, left .4s;
  -ms-transition: opacity .3s, left .4s;
  -o-transition: opacity .3s, left .4s;
  transition: opacity .3s, left .4s;
  top: 50%;
  white-space: nowrap;
  z-index: -1;
}

#social-sidebar a span:before {
  content: "";
  display: block;
  height: 8px;
  left: -4px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 8px;
  z-index: -2;
}

#social-sidebar a[class*="twitter"]:hover,
#social-sidebar a[class*="twitter"] span,
#social-sidebar a[class*="twitter"] span:before { background: #00aced; }

#social-sidebar a[class*="dribbble"]:hover,
#social-sidebar a[class*="dribbble"] span,
#social-sidebar a[class*="dribbble"] span:before { background: #ea4c89; }

#social-sidebar a[class*="behance"]:hover,
#social-sidebar a[class*="behance"] span,
#social-sidebar a[class*="behance"] span:before { background: #1769ff; }

/* -------------------------- Image device in home page  -------------------------------- */
.devices{
  position: absolute;
  top: 200px;
  left: 50%;
  margin: -100px 0 0 -327px;
}
/* MACBOOK */
.notebook{
  float: left;
  animation-duration:6s;
	animation-name: bounceInDown;
/*  animation-iteration-count: infinite; */
}
.notebook .screen:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #a5adbd;
  height: 4px;
  width: 4px;
  margin: 5px 0 0 138px;
  z-index: 999999;
}
.notebook .screen{
  /*background: #fcfcfc;*/
  background: silver;
  border-radius: 15px 15px 0 0;
  height: 185px;
  width: 280px;
  margin: 0 auto;
}
.notebook .screen:after{
  content: "";
  position: absolute;
  /*background: #39303d;*/
  background-image: url("../images/studio.png");
  background-size: 254px 160px ;
  background-repeat: no-repeat;
  height: 160px;
  width: 254px;
  border-radius: 2px;
  margin: 14px 0 0 13px;
}
.notebook .keyboard {
  background: #f4f5f7;
  border-radius: 5px 5px 25px 25px;
  height: 8px;
  width: 350px;
  margin: 0 auto;
}
.notebook .keyboard:after {
  content: "";
  position: absolute;
  background: #d8dbe1;
  height: 4px;
  width: 50px;
  margin: 0px 0px 0px 150px;
  border-radius: 0 0 8px 8px;
}
.keyboard:before {
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.2);
  height: 8px;
  width: 370px;
  margin: 7px 0px 0px -10px;
  z-index: -1;
  border-radius: 100%;
}
/* IPAD */
.ipad{
  background: black;
  border-radius: 10px;
  height: 150px;
  width: 120px;
  margin: 20px 60px 0px 0px;
  float: left;
  animation-duration:6s;
	animation-name: bounceInLeft;
  /*animation-iteration-count: infinite;*/
  z-index: 9999;
}

.ipad .screen{
  margin: 12px 0px 0px 10px;
  background: #39303D;
  background-image: url("../images/responsive.png");
  background-size:  100px 126px ;
  background-repeat: no-repeat;
  border-radius: 2px;
  height: 126px;
  width: 100px;
}
.ipad .screen:before {
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.2);
  height: 4px;
  width: 4px;
  margin: -8px 0px 0px 48px;
  border-radius: 50%;
  z-index: 1000
}

.ipad .screen:after {
  content: "";
  position: absolute;
  background-image: url("../images/responsive.png");
  background-size: 62px 110px ;
  background-repeat: no-repeat;
  height: 4px;
  width: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  margin: 129px 0px 0px 47px;
  z-index: 1000;
  border-radius: 1px;
}
/* IPHONE */
.iphone{
  margin: 40px 0 0 60px;
  background: black;
  border-radius: 10px;
  height: 110px;
  width: 62px;
  float: left;
  animation-duration:6s;
	animation-name: bounceInRight;
  /*animation-iteration-count: infinite;*/
}

.iphone .screen{
  margin: 13px 0px 0px 4px;
  background: #39303D;
  background-image: url("../images/responsive.png");
  background-size:  54px 84px ;
  background-repeat: no-repeat;
  border-radius: 2px;
  height: 84px;
  width: 54px;
}
.iphone .screen:before {
  content: "";
  position: absolute;
  background: rgba(0,0,0,0.2);
  height: 3px;
  width: 10px;
  margin: -7px 0px 0px 23px;
  z-index: -1;
  border-radius: 3px;
  z-index: 1
}
.iphone .screen:after {
  content: "";
  position: absolute;
  background-image: url("../images/responsive.png");
  background-size: 4px 4px ;
  background-repeat: no-repeat;
  height: 4px;
  width: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  margin: 87px 0px 0px 24px;
  /*margin: 87px 0px 0px 24px;*/
  z-index: -1;
  border-radius: 1px;
  z-index: 1
}
@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

	5% {
		opacity: 1;
		transform: translateY(30px);
	}

	10% {
		transform: translateY(-10px);
	}

	20% {
		transform: translateY(0);
	}
}
@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	5% {
		opacity: 1;
		transform: translateX(30px);
	}

	10% {
		transform: translateX(-10px);
	}

	20% {
		transform: translateX(0);
	}
}
@keyframes bounceInRight{
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	5% {
		opacity: 1;
		transform: translateX(-30px);
	}

	10% {
		transform: translateX(10px);
	}

	20% {
		transform: translateX(0);
	}
}

@media (max-width: 768px) {.device-section{font-size:1.5em}
.notebook {display:none}
.ipad {display:none;}
.iphone{
  margin-left:300px!important;
  float:right;
}
}

@media (max-width:1208px){.device-section{font-size:1.5em}
.notebook {display:none}
.ipad{
  margin-left: 150px !important;
}
.iphone{
  margin-left: 50px;
}
}


h5{
  color:#fff;
}

.cpright{padding-bottom: 10px!important;
size:5px!important;
color:red;
}

.prez{
  height: 20%;
  background-color: #34495e;
}

.section:hover{
  color: white!important;
  opacity: 100!important;
}