* {
    box-sizing: border-box;
}

/* for mob narrow */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 421px) { /* desk, tab, mob wide */ /*was width 361 and then earlier 768px */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
    padding: 15px; }

.workthumb { margin: 0 !important; text-align:left; min-height:91px; width:100%; clear:both; float:left; display:inline; position:relative; }

.worktext { padding: 0 0 15px 91px !important;  max-width:700px; width:100%; display:inline-block; top:0; left:0; }
	
.row { max-width:700px; min-width:315px; float:none; height:auto; position:relative; margin:0 auto; }
	
.row::after {
    content: "";
    clear: both;
    display: table;
}

br {clear:both;}

a { color:#1200bd; text-decoration:none; transition: .3s ease-in-out;}

a:hover { color:#000; text-decoration:underline; }

.poplink {text-decoration:none; cursor:pointer; }

.close {font-size:2.24em;}

.modal-body p {text-align:center;}

.modal-body p a {font-size:25pt;}

.final {padding: 15px;}

.final div {padding:0; }

#core_content {padding:0 15px 15px 15px !important;}

.soc_icon {margin:0 10px 0 0;}

body {
background:white;
background: #D3CCE3;
background: -webkit-linear-gradient(to right, #c9ffe3, #faffd1);
background: linear-gradient(to right, #c9ffe3, #faffd1);
font-family:Arial;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
margin:0;
padding:0;
}

h1 {
color:#333;
font-family:'Josefin Sans', sans-serif;
font-size:64pt; /*was 101pt and 111pt spacing*/
line-height:74pt;
text-align:center;
margin:0;
background: -webkit-linear-gradient(#3f4c6b, #121212);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@media only screen and (max-width: 420px) {
h1 {font-size:54pt; line-height: 45pt;}
}

.intermediary {color:#333; 
font-family:'Josefin Sans', sans-serif;
font-size:34pt;
text-align:center;
margin:0 0 16px 0;
background: -webkit-linear-gradient(#3f4c6b, #121212);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h2, .modal-title {
color:#333;
font-family:'Josefin Sans', sans-serif;
font-size:2.24em;
margin:0;
background: -webkit-linear-gradient(#3f4c6b, #121212);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h4 { clear:both; }

.header {
  padding: 10px 16px;
  background: none;  
  background: #D3CCE3;
  background: -webkit-linear-gradient(to right, #c9ffe3, #faffd1); /*c9ffe3*/ /*a1ffce*/
  background: linear-gradient(to right, #c9ffe3, #faffd1);
  z-index: 1;
  margin: 0;
  text-align:center;
}

.header ul {max-width:700px; min-width:315px; margin:0 auto; padding:0;}

.header ul li {list-style:none; display:inline; float:left; text-align:center; font-size:15px; width:33%;}

.main_or_not {padding:16px;}

.sticky {
  position: fixed;
  top: 0;
  margin: 0;
  z-index: 1;
  width:100%;
}

.sticky + .main_or_not {
	padding-top:24px;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-1%); opacity:0.2; z-index:-1;
  }
  100% {
    transform: translateX(+9%); opacity:1; z-index:-1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(+55%); opacity:0.9; z-index:1;
  }
  100% {
    transform: translateX(0%); opacity:1; z-index:1;
  }
}

#cyclist {animation: 1s ease-out 1.3s 1 slideInFromLeft; animation-fill-mode:forwards; width:124px; height:251px; background:url('../images/bart4.png') 2px 0/121px 251px no-repeat; position:relative; display:inline; float:left; z-index:1; opacity:0; margin:-20px 0 20px 24%;}

#inner_wrapper {max-width:700px; min-width:315px; margin:15px auto; background:none; background-size:100%; display:block; float:none; height:auto; position:relative; }

#key div { clear:both; }
#key div.lastskill { margin-bottom:5px; }

#key span {font-size:20px;}

.expert_bull {color:#16bd00;}
.competent_bull {color:#91ed00;}
.intermediate_bull {color:#d0c900;}
.beginner_bull {color:#f77500;}

span.desc {font-size:12px !important; font-style:italic;}

#extra_skills h3 {margin-bottom:5px;}

.topleader {margin-top:0;}

@media (max-width: 420px) {

        #inner_wrapper {
        padding-right:15px;
    }

}

#main_or_not {
display:block; float:none; height:auto; position:relative; margin:0 auto;
}

img { border-radius:8px; }

.web_skill { width:100%; height:19px; display:block; float:none; clear:both; margin:1px 0 5px; background:#fff; }

#front_end, #design, #back_end { height:19px; display:inline-block; float:left; clear:none }

#front_end { width:45%; background:#16bd00; }
#design { width:35%; background:#1200bd; }
#back_end {width:20%; background:#f77500; }

#a45, #a35, #a20 { float:left; clear:none; text-align:left; padding:3px; font-size:12px; }

#a45 { width:55%; color:#16bd00; }
#a35 { width:65%; color:#1200bd; }
#a20 { width:80%; color:#f77500; }

.personal_info_section { margin-bottom:10px; }
.personal_info_section span { font-style:italic; font-size:12px; text-transform:uppercase; }

.workthumbnail { background-position:left top; background-repeat:no-repeat; background-size:76px 76px; }

#vimeo { background-image:url('../images/vimeo2-iconset.png'); }
#logic { background-image:url('../images/logic_iconset.png'); }
#suits { background-image:url('../images/suit_iconset.png'); }
#new_2018 { background-image:url('../images/new_2018_iconset.png'); }
#kids_ri { background-image:url('../images/ri_kids_iconset.png'); }
#take_two { background-image:url('../images/taketwo_iconset.png'); }
#sea { background-image:url('../images/sea_iconset.png'); }
#bicycle { background-image:url('../images/bicycle_iconset.png'); }
#hotels { background-image:url('../images/hotel_iconset.png'); }
#afe13 { background-image:url('../images/thirteen_iconset.png'); }
#afe12 { background-image:url('../images/twelve_iconset.png'); }
#olympics_home { background-image:url('../images/medal_iconset.png'); }
#bes_travel { background-image:url('../images/location_iconset.png'); }
#walking { background-image:url('../images/walking_iconset.png'); }
#waterloo { background-image:url('../images/train_iconset.png'); }
#competition { background-image:url('../images/camera_iconset.png'); }
#learning { background-image:url('../images/at_iconset.png'); }
#enter_com { background-image:url('../images/rowing_iconset.png'); }
#star { background-image:url('../images/star_iconset.png'); }
#snowflake { background-image:url('../images/snowflake_iconset.png'); }
#avensis { background-image:url('../images/estate_iconset.png'); }
#gt86 { background-image:url('../images/sportscar_iconset.png'); }

#bsa { background-image:url('../images/bsa_iconset.png'); }
#dnx { background-image:url('../images/dnx_iconset.png'); }

#strobe { background-image:url('../images/strobe_iconset.png'); }
#server { background-image:url('../images/server_iconset.png'); }

#l { background-image:url('../images/l_iconset.png'); }
#ivan { background-image:url('../images/ivan_iconset.png'); }

.first {clear:left;}
.last {clear:right; margin:0 0 10px 0 !important;}

.rose { color:#ff5c77; }

footer div { float:left; position:relative; display:inline; clear:none; height:auto; font-size:11.5px; }

.foot_left { text-align:left; width:55%; }

.foot_right { text-align:right; width:45%; }

.expertise_block {float:left; display:inline; width:13%; height:78px; margin:0 2px 10px 0; background:#f2f2f2; position:relative; }

.expertise_block  div { display:table-cell; height:78px; width:inherit; vertical-align:middle; text-align:center; color:#fff; font-size:12px; z-index:4; top:0; left:0;}

.expert {background:#16bd00;}/* transition: width 1s; -webkit-transition: width 1s;} .expert:hover{width:100px;} */
.competent {background:#91ed00;}
.intermediate  {background:#d0c900;}
.beginner  {background:#f77500;}

.expert_skill, .competent_skill, .intermediate_skill, .beginner_skill {display:table-cell; opacity:0; height:78px; width:inherit; vertical-align:middle; text-align:center; color:#fff; font-size:12px; -webkit-transition: -webkit-transform 1.0s ease-out ; transition: 1s; z-index:5; position:absolute; padding:15px; top:0; left:0; } .expert_skill:hover, .competent_skill:hover, .intermediate_skill:hover, .beginner_skill:hover { width:150px; display:table-cell; visibility:visible; opacity:1;}

.expert_skill {background:#16bd00;}
.expert_skill:hover {background:#0f7d00;}
.competent_skill {background:#91ed00;}
.competent_skill:hover {background:#78c400;}
.intermediate_skill {background:#d0c900;}
.intermediate_skill:hover {background:#9c9700;}
.beginner_skill {background:#f77500;}
.beginner_skill:hover {background:#bf5a00;}

hr {color:#fff; background:#fff; border-top:1px solid #fff;}