body{margin:0px;padding:0px;background-color:#f1f1f1;}


@font-face {
    font-family: ff;
    src: url('ff.ttf'); 
	 
    }
	
@font-face {
    font-family: bod;
    src: url('bod.otf'); 
	 
    }

/* visited link */
a:visited {
  color: white;
}

a {
  color: #efefef;
}


.blacklink a:visited{color:black;}
.blacklink a {color:black;}

#compinfo{font-family: bod,Verdana, Geneva, sans-serif;font-size:10px;color:#bdc3c7;margin-left:130px;}

#titlebar{height:140px;background-color:white;padding:10px;}
#titlebar img{width:500px;}

#butang1{background-color:#197292;padding:5px;text-align:center;color:#fff;cursor:pointer;border-radius:4px;}
#butang1:hover{opacity:.7;}
 

#butang2{background-color:#197292;width:150px;padding:5px;text-align:center;color:#fff;cursor:pointer;border-radius:4px;}
#butang2:hover{opacity:.7;}
#butang2 a { text-decoration: none; }

#butang2b{background-color:#197292;width:150px;padding:5px;text-align:center;color:#fff;cursor:pointer;border-radius:4px;}
#butang2b:hover{opacity:.7;}
#butang2b a { text-decoration: none; }

#titleBlock{background-color:#124e66;color:#FFF;font-family: bod,Verdana, Geneva, sans-serif;min-height:140px;text-align:center;}
.inner1{max-width:1000px;margin:auto;font-size:40px;padding-top:20px;}
#main_page_heading{font-size:35px;font-family: bod,Verdana, Geneva, sans-serif;}
#article_box{width:500px; border:3px solid grey;height:auto;box-sizing: border-box;background-color:white;cursor:pointer;}
#article_box:hover{ border:3px solid #34495e;}
#articles_inner a:visited {  color: black;  }
#articles_inner a {  color: black;}
#article_title{ padding:10px;box-sizing: border-box;
font-family: bod,Verdana, Geneva, sans-serif;font-size:23px;float:left; }

#article_img_smol{display:none;}
#article_img_big{ }
#article_img_big img{width:100%;margin-bottom:-10px; }

#lp2 img{width:98%;}

.box1{max-width:500px;background-color:#fffbe7;padding:5px;box-sizing:border-box;}

#profile{width:1000px;margin:auto;}
#profilepix{float:left;margin:30px;}
#profiletitle{ float:right;margin-top:30px;font-size:80px;width:600px;font-family: bod,Verdana, Geneva, sans-serif;}

#blurb{margin-left:30px;font-family: bod,Verdana, Geneva, sans-serif;font-size:18px;}

#article1{float:left;}
#article2{float:left;margin-left:30px;}

#article_text{margin-left:30px;font-family: Verdana, Geneva, sans-serif;font-size:15px;}
#article_textb{margin-left:30px;font-family: Verdana, Geneva, sans-serif;font-size:19px;}
#article_text a:visited {  color: red;}
#article_text a {  color: blue;}

#articles_inner{width:100%;padding:5%;box-sizing: border-box;}

.zample{background-color:white;padding:5px;}

#lp img{float:right;padding:25px;}

.hl{background-color:white;padding:8px;}

.expect{font-size:17px;color:#34495e;}
.reality{font-size:17px;color:#3a539b;}

#clearme{height:5px;width:100%;float:none;clear:both;}
.clearme{height:5px;width:100%;float:none;clear:both;}

#lefthalf{width:100%;padding:5%;padding-top:1%;float:left;position:relative;box-sizing: border-box;}
#lefthalf img{width:100%;border:1px solid grey;}

#pageTitle{width:100%;padding-left:5%;padding-right:5%;padding-top:40px;padding-bottom:40px; box-sizing: border-box;font-size:65px;font-family:bod, arial;}

#pageTitle2{width:100%;padding-left:5%;padding-right:5%; padding-bottom:15px; box-sizing: border-box;font-size:35px;font-family:ff,bod, arial;}

#righthalfx{width:30%;padding:7%;position:absolute;right:0px;}


#righthalfinnerx{width:auto;font-size:50px;color:black;font-family: ff,arial;background-color:white; ;background-color: rgba(255, 255, 255, 0.1);}


#righthalf{width:auto;padding:7%;padding-left:27%;position:absolute;left:0px;}
#righthalfinner{width:auto;font-size:50px;color:black;font-family: ff,arial;background-color:white; ;background-color: rgba(255, 255, 255, 0.1);}

#clearance{float:none;clear:both;}

#infobar{float:none;clear:both;background-color:#6b8395;color:#fefefe;width:90%;min-height:200px;padding:5%;font-size:22px;font-family: bod,Verdana, Geneva, sans-serif;}

#infobarx{float:none;clear:both;background-color:#34495e;color:#fefefe;width:90%;min-height:200px;padding:5%;font-size:24px;font-family: bod,Verdana, Geneva, sans-serif;}

.olay{background-color:white;max-width:560px;}

#footer{

}


#trainer{width:100%;padding:5%;float:left;position:relative;box-sizing: border-box;background-color:white;}
#trainerPix1{float:left; }
#trainerPix1 img{width:200px;}
#trainerPix2{float:right;}
#trainerinfo{font-size:30px;font-family: bod,Verdana, Geneva, sans-serif;width:60%;float:left;margin-top:25px;}


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

#article1{float:none;}
#article2{float:none;margin-left:0px;margin-top:30px;}
#trainerinfo{font-size:25px;font-family: bod,Verdana, Geneva, sans-serif;width:50%;float:left;margin-top:25px;}
}


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

 #profile{width:96%;}
#profiletitle{ font-size:60px;width:60%;}
#headPix img{width:95%;}
}



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

#righthalfinner{font-size:56px;}

}



@media screen and (max-width:900px) {
#lp img{float:right;padding:25px;width:40%;}
}

@media screen and (max-width:840px) {
#profiletitle{ font-size:50px;width:60%;}
#profilepix img{width:70%;}
#profilepix {width:30%;}
#trainerPix1 img{width:150px;}
#trainerPix2 img{width:140px;}
#pageTitle{width:100%;padding-left:5%;padding-right:5%;padding-top:40px;padding-bottom:40px; box-sizing: border-box;font-size:45px;font-family:bod, arial;}
}




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

#righthalfinner{font-size:36px;}

}

@media screen and (max-width:670px) {
#righthalfinner{background-color: rgba(255, 255, 255, 0.6);}

#trainerinfo{font-size:25px;font-family: bod,Verdana, Geneva, sans-serif;width:100%;float:none;margin-left:5px;}
#trainerPix2 {float:none;margin-top:75px;}
}




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

#profiletitle{ font-size:35px;width:50%;}
#profilepix img{width:150px;}
#blurb{margin-left:12px; }
.inner1{width:100%;margin:auto;font-size:30px;padding-top:10px;}
}


@media screen and (max-width:600px) {
#pageTitle2{width:100%;padding-left:5%;padding-right:5%; padding-bottom:15px; box-sizing: border-box;font-size:25px;font-family:ff,bod, arial;}
#article_text{margin-left:14px; margin-right:14px;}
}

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

#righthalfinner{font-size:26px;}


#article_box{width:90%; border:3px solid grey;height:auto;box-sizing: border-box;background-color:white;cursor:pointer;}
#article_box:hover{ border:3px solid #34495e;}

}


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


 .olay{width:100%;}
.olay img {width:100%;}

}



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

#trainerinfo{font-size:16px;}
#infobar{width:90%;;padding:5%;font-size:20px;padding-bottom:10%;}

}

@media screen and (max-width:500px) {
#pageTitle{width:100%;padding-left:5%;padding-right:5%;padding-top:40px;padding-bottom:40px; box-sizing: border-box;font-size:38px;font-family:bod, arial;}
#compinfo{ margin-left:0px;}
#lp img{float:right;padding:0px;width:100%;}
#titlebar{height:auto;}
#titlebar img{width:100%;}}


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

#profiletitle{ font-size:30px;width:auto;text-align:center;float:none;}
#infobar{width:90%;;padding:5%;font-size:16px;padding-bottom:10%;}

}

@media screen and (max-width:400px) {
#profiletitle{ font-size:30px;width:auto;text-align:center;}
#righthalfinner{font-size:22px;}
#trainerPix2 {float:none;margin-top:25px;}
}